2024/10/28 오시는 길 추가
This commit is contained in:
subsub
parent
a356a4e4ed
commit
1f562606ff
BIN
src/main/webapp/kofair_case_seed/usr/images/info/icon_bus.png
Normal file
BIN
src/main/webapp/kofair_case_seed/usr/images/info/icon_bus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/main/webapp/kofair_case_seed/usr/images/info/icon_subway.png
Normal file
BIN
src/main/webapp/kofair_case_seed/usr/images/info/icon_subway.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/main/webapp/kofair_case_seed/usr/images/info/logo.png
Normal file
BIN
src/main/webapp/kofair_case_seed/usr/images/info/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
169
src/main/webapp/kofair_case_seed/usr/info/directions.html
Normal file
169
src/main/webapp/kofair_case_seed/usr/info/directions.html
Normal file
@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>한국공정거래조정원 온라인분쟁조정시스템 > 분쟁조정 안내 > 오시는 길</title>
|
||||
|
||||
<!-- css -->
|
||||
<link rel="stylesheet" href="/kofair_case_seed/css/reset.css">
|
||||
<link rel="stylesheet" href="/kofair_case_seed/css/font.css">
|
||||
<link rel="stylesheet" href="/kofair_case_seed/usr/style/common.css">
|
||||
<link rel="stylesheet" href="/kofair_case_seed/usr/style/layout.css">
|
||||
<link rel="stylesheet" href="/kofair_case_seed/usr/style/style.css">
|
||||
<link rel="stylesheet" href="/kofair_case_seed/usr/style/info.css">
|
||||
|
||||
<!-- js -->
|
||||
<script src="/kofair_case_seed/script/lib/jquery-3.5.0.js"></script>
|
||||
<script src="/kofair_case_seed/usr/scripts/common.js"></script>
|
||||
<script src="/kofair_case_seed/usr/scripts/layout.js"></script>
|
||||
<script src="/kofair_case_seed/usr/scripts/info.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="mask"></div>
|
||||
<div class="wrap sub">
|
||||
<div data-include-path="/kofair_case_seed/usr/layout/_header.html"></div>
|
||||
|
||||
<div class="contents sub">
|
||||
|
||||
<div class="sub_visual">
|
||||
<h2>분쟁조정 안내</h2>
|
||||
</div>
|
||||
|
||||
<div class="inner">
|
||||
|
||||
<!-- lnb -->
|
||||
<div class="lnb">
|
||||
<p class="title">분쟁조정 안내</p>
|
||||
<ul class="lnb_menu">
|
||||
<li>
|
||||
<a href="#none" class="lnb_menu_title">분쟁조정 안내 <i class="icon lnb_slide_toggle"></i></a>
|
||||
<ul class="lnb_sub_menu">
|
||||
<li><a href="#">분쟁조정 제도</a></li>
|
||||
<li><a href="#">분쟁조정 절차</a></li>
|
||||
<li><a href="#">분쟁조정 관련 서식</a></li>
|
||||
<li><a href="#">법령자료실</a></li>
|
||||
<li><a href="#">자료실</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#none" class="lnb_menu_title">자주하는 질문 <i class="icon lnb_slide_toggle"></i></a>
|
||||
<ul class="lnb_sub_menu">
|
||||
<li><a href="#">조정신청 관련 질문</a></li>
|
||||
<li><a href="#">절차진행 관련 질문</a></li>
|
||||
<li><a href="#">(성립/불성립)절차종료 관련 질문</a></li>
|
||||
<li><a href="#">(기타)절차종결 관련 질문</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="#none" class="lnb_menu_title">오시는 길</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#none" class="lnb_menu_title">공지사항</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#none" class="lnb_menu_title">뉴스레터 <i class="icon lnb_slide_toggle"></i></a>
|
||||
<ul class="lnb_sub_menu">
|
||||
<li><a href="#">뉴스레터 자료</a></li>
|
||||
<li><a href="#">뉴스레터 서비스</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- //lnb -->
|
||||
|
||||
<div class="sub_content">
|
||||
|
||||
<!-- page_location -->
|
||||
<ul class="page_location">
|
||||
<li><i class="icon home"></i></li>
|
||||
<li>분쟁조정 안내</li>
|
||||
<li>오시는 길</li>
|
||||
</ul>
|
||||
<!-- //page_location -->
|
||||
|
||||
<h3 class="sub_con_tit">오시는 길</h3>
|
||||
<p class="sub_con_sub_tit">한국공정거래조정원의 위치 및 오시는 길을 알려드립니다.</p>
|
||||
|
||||
<div class="directions_content">
|
||||
|
||||
<div class="map_area" id="mapArea" style="width:100%;height:500px;"></div>
|
||||
|
||||
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=6b7b045541e183038c5aba6fe4e5e879"></script>
|
||||
<script>
|
||||
var mapContainer = document.getElementById('mapArea'), // 지도를 표시할 div
|
||||
mapOption = {
|
||||
center: new kakao.maps.LatLng(37.560897, 126.973709), // 지도의 중심좌표
|
||||
level: 3 // 지도의 확대 레벨
|
||||
};
|
||||
|
||||
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
|
||||
var map = new kakao.maps.Map(mapContainer, mapOption);
|
||||
// 마커가 표시될 위치입니다
|
||||
var markerPosition = new kakao.maps.LatLng(37.560897, 126.973709);
|
||||
|
||||
// 마커를 생성합니다
|
||||
var marker = new kakao.maps.Marker({
|
||||
position: markerPosition
|
||||
});
|
||||
// 마커가 지도 위에 표시되도록 설정합니다
|
||||
marker.setMap(map);
|
||||
</script>
|
||||
|
||||
<div class="map_box">
|
||||
<img src="/kofair_case_seed/usr/images/info/logo.png" alt="">
|
||||
<ul class="adress_ul">
|
||||
<li>
|
||||
<p class="title">주소</p>
|
||||
<span>서울 중구 세종대로 39 상공회의소회관 9층</span>
|
||||
</li>
|
||||
<li>
|
||||
<p class="title">전화</p>
|
||||
<span>1588-1490</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 지하철 이용 시 -->
|
||||
<b class="title orange_border blue_border">지하철 이용 시</b>
|
||||
<div class="item_list">
|
||||
<div class="icon_box">
|
||||
<i class="icon subway"></i>
|
||||
</div>
|
||||
<ul>
|
||||
<li><span class="subway_text subway_1">1</span>호선 서울역 3번 출구 : YTN 방향 도보 5분</li>
|
||||
<li><span class="subway_text subway_2">2</span>호선 시청역 9번 출구 : 삼성본관방향 도보 5분</li>
|
||||
<li><span class="subway_text subway_4">4</span>호선 회현역 5번 출구 : 숭례문방향 도보 5분</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 버스 이용 시 -->
|
||||
<b class="title orange_border blue_border">버스 이용 시</b>
|
||||
<div class="item_list">
|
||||
<div class="icon_box">
|
||||
<i class="icon bus"></i>
|
||||
</div>
|
||||
<ul>
|
||||
<li>- 서울역 YTN 빌딩 앞 : 149, 151, 152, 162, 202, 500, 501, 502, 503, 505, 056, 701, 702, 703</li>
|
||||
<li>- 염천교 : 163, 261, 262, 263, 604, 7017</li>
|
||||
<li>- 시청앞 : 150, 1711, 406, 408, 421, 504, 507, 603, 700, 7019, 7011, 7022</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-include-path="/kofair_case_seed/usr/layout/_footer.html"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -33,6 +33,26 @@
|
||||
.process_content .box.gray_border.gray_fill.terms_info{padding:40px;text-align:left;}
|
||||
.process_content .terms_info p{font-size:1.7rem;font-weight:400;color:#666;line-height:1.5;margin:10px 0 0 0;}
|
||||
|
||||
/* 오시는 길 */
|
||||
.map_area{width:100%;height:330px;}
|
||||
.map_box{display:flex;background:#f4f5f7;border-radius:0 0 5px 5px;padding:30px 90px;align-items:center;}
|
||||
.map_box .adress_ul{position:relative;display:flex;padding:0 0 0 60px;margin:0 0 0 60px;align-items:flex-start;gap:60px;}
|
||||
.map_box .adress_ul::after{position:absolute;content:"";width:1px;height:40px;background:#d8d8d8;top:50%;left:0;transform:translateY(-50%);}
|
||||
.map_box .adress_ul .title{font-size:2.3rem;}
|
||||
.map_box .adress_ul span{font-size:1.9rem;color:#666;}
|
||||
|
||||
.directions_content .title.blue_border.orange_border{display:block;margin:60px 0 30px 0;}
|
||||
.directions_content .item_list{display:flex;align-items:center;gap:30px;}
|
||||
.directions_content .icon_box{width:130px;height:110px;background:#f4f5f7;border-radius:5px;}
|
||||
.directions_content .icon_box .subway{display:inline-block;width:100%;height:100%;background:url(/kofair_case_seed/usr/images/info/icon_subway.png) no-repeat center;}
|
||||
.directions_content .icon_box .bus{display:inline-block;width:100%;height:100%;background:url(/kofair_case_seed/usr/images/info/icon_bus.png) no-repeat center;}
|
||||
.directions_content .item_list ul{display:flex;flex-direction:column;font-size:1.7rem;font-weight:300;gap:6px;}
|
||||
.directions_content .subway_text{display:inline-flex;width:24px;height:24px;margin:0 4px 0 0;font-weight:400;color:#fff;border-radius:100%;justify-content:center;align-items:center;}
|
||||
.directions_content .subway_text.subway_1{background:#263c96;}
|
||||
.directions_content .subway_text.subway_2{background:#35a142;}
|
||||
.directions_content .subway_text.subway_4{background:#2b99d9;}
|
||||
|
||||
|
||||
/* ==================== 테블릿 ==================== */
|
||||
@media screen and (max-width: 1199px){
|
||||
.news_service .text_explain{font-size:3.4rem;margin:80px 0;}
|
||||
@ -53,6 +73,18 @@
|
||||
|
||||
.system_info ul{font-size:3.4rem;padding:0 0 0 40px;margin:40px 0 0 0;}
|
||||
.system_info .sub_info_ul li{padding:0 0 0 30px;}
|
||||
|
||||
/* 오시는 길 */
|
||||
.map_box{padding:30px;}
|
||||
.map_box img{display:none;}
|
||||
.map_box .adress_ul{display:flex;padding:0;margin:0;flex-direction:column;gap:30px;}
|
||||
.map_box .adress_ul::after{display:none;}
|
||||
.map_box .adress_ul li{display:flex;align-items:center;gap:30px;}
|
||||
.map_box .adress_ul li .title,.map_box .adress_ul li span{font-size:3.2rem;}
|
||||
.directions_content .item_list{padding:0 40px;}
|
||||
.directions_content .icon_box{display:none;}
|
||||
.directions_content .item_list ul{font-size:3.4rem;gap:20px;}
|
||||
.directions_content .subway_text{width:48px;height:48px;}
|
||||
}
|
||||
|
||||
/* ==================== 모바일 ==================== */
|
||||
@ -74,6 +106,16 @@
|
||||
|
||||
.system_info ul{font-size:1.7rem;padding:0 0 0 20px;margin:20px 0 0 0;}
|
||||
.system_info .sub_info_ul li{padding:0 0 0 15px;margin:0 0 0 10px;}
|
||||
|
||||
/* 오시는 길 */
|
||||
.map_box{padding:15px;}
|
||||
.map_box .adress_ul{gap:8px;}
|
||||
.map_box .adress_ul li{gap:15px;}
|
||||
.map_box .adress_ul li .title,.map_box .adress_ul li span{font-size:1.6rem;}
|
||||
.directions_content .title.blue_border.orange_border{margin:30px 0 15px 0;}
|
||||
.directions_content .item_list{padding:0 20px;}
|
||||
.directions_content .item_list ul{font-size:1.7rem;gap:10px;}
|
||||
.directions_content .subway_text{width:24px;height:24px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user