
/* ************ 메인페이지 스타일 ************ */
	
	
.main h2 {font-size:36px; font-weight:700;}

/* part1 */
.main .part1 {width:100%; /*background:url(/images/main/main_bg.webp) no-repeat center / cover;*/ display:flex; justify-content:center;}
.main .part1 .inner {display:flex; gap:20px; justify-content:center; max-width:1400px;margin:150px auto 50px; width:100%;}
.main .part1 .banner1 {max-width:1080px; width:77.2%; max-height:580px; aspect-ratio:1080/580; border-radius:20px; overflow:hidden; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 10px;}	
.banner1_prev {width:60px; height:60px; background:#fff url(/images/common/banner_prev.png) no-repeat center center / 13px; border-radius:50%; left:3.5%; transform:translateY(-50%); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.banner1_prev:hover {background:var(--base1) url(/images/common/banner_prev_W.png) no-repeat center center / 13px;}
.banner1_next:hover {background:var(--base1) url(/images/common/banner_next_W.png) no-repeat center center / 13px;}
.banner1_next {width:60px; height:60px; background:#fff url(/images/common/banner_next.png) no-repeat center center / 13px; border-radius:50%;right:3.5%; transform:translateY(-50%); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.banner1 .swiper-pagination {bottom:3%; left:50%; transform:translateX(-50%);}
.banner1 .swiper-pagination .swiper-pagination-bullet {width:15px; height:15px;}
.banner1 .swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {margin-left:10px;}
.banner1 .swiper-pagination-bullet-active {background:#000;}
.main .part1 .banner1 img {width:100%; aspect-ratio:1080/580; object-fit:cover;}
.main .part1 .import_btn {display:flex; flex-direction:column; gap:20px; width:calc(22.8% - 20px); height:100%;}
.main .part1 .import_btn a {display:flex; flex-direction:column;
background:#fff; border-radius:20px; justify-content: center; align-items: center;
height:100%; border: 1px solid var(--border1);}
.main .part1 .import_btn a span {font-size:24px; font-weight:600; padding-top:5px;}
.main .part1 .import_btn a:hover {color:var(--base3); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /*background:#F3F6F9;*/}

/* part2 */

.main .part2 {background:#F3F6F9;}
.main .part2 .inner {padding:50px 0;}
.main .part2 .topWrap {display:flex; justify-content:space-between; align-items:center;}
.main .part2 .topWrap .btn {display:flex; gap:5px;}
.main .part2 .topWrap .btn a {display:block; padding:8px 23px; border-radius:10px; font-size:18px; font-weight:600; color:#fff;}
.main .part2 .topWrap .btn a.blue {background:var(--base1); border:2px solid var(--base1);}
.main .part2 .topWrap .btn a.blue:hover {border:2px solid var(--base1); background:#fff; color:var(--base1);}
.main .part2 .topWrap .btn a.green {background:var(--base2); border:2px solid var(--base2);}
.main .part2 .topWrap .btn a.green:hover {border:2px solid var(--base2); background:#fff; color:var(--base2);}
.main .part2 .topWrap .btn a.orange {background:var(--base3); border:2px solid var(--base3);}
.main .part2 .topWrap .btn a.orange:hover {border:2px solid var(--base3); background:#fff; color:var(--base3);}
.main .part2 .noticeWrap {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
.main .part2 .noticeWrap li {border:1px solid var(--border1); border-radius:20px; padding:35px 40px; background:#fff;}
.main .part2 .noticeWrap li .n_type {display:block; font-size:16px; font-weight:700; text-decoration:underline!important; text-decoration-thickness:2px!important; text-underline-offset:7px;}
.main .part2 .noticeWrap li .n_type.blue {color:var(--base1);}
.main .part2 .noticeWrap li .n_type.orange {color:var(--base3);}
.main .part2 .noticeWrap li .n_type.green {color:var(--base2);}
.main .part2 .noticeWrap li dl {margin-top:23px;}
.main .part2 .noticeWrap li dl dt {font-size:24px; font-weight:600;}
.main .part2 .noticeWrap li dl dd {overflow:hidden; white-space:normal;
text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; word-break: keep-all; color:#666; font-size:18px; margin-top:10px;}
.main .part2 .noticeWrap li .date {display:block; color:#666; font-size:18px; margin-top:20px;}
.main .part2 .noticeWrap li.type_g:hover dt, .main .part2 .noticeWrap li.type_g:hover dd {color:var(--base1);}
.main .part2 .noticeWrap li.type_h:hover dt, .main .part2 .noticeWrap li.type_h:hover dd {color:var(--base2);}
.main .part2 .noticeWrap li.type_f:hover dt, .main .part2 .noticeWrap li.type_f:hover dd {color:var(--base3);}


/* part3 */
.main .part3 {position:relative; }
.main .part3 .inner {position:relative; height:620px;}
/*.main .part3 .inner .position_ab {position:absolute; display:flex; justify-content:space-between; z-index:3; width:100%; height:100%; align-items:center;}*/
/*.main .part3 .inner .position_ab {position:absolute; display:flex; justify-content:space-between; z-index:3; width:100%; height:100%; align-items:center;}*/
.main .part3 .info_bx {position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:3; border-radius:20px; box-shadow:rgba(0, 0, 0, 0.15) 0px 5px 7px; height:420px; background:#fff; overflow:hidden;}
.main .part3 .info_bx .top {padding:40px 50px 20px 50px; background:var(--base1); color:#fff;}
.main .part3 .info_bx .top h3 {font-size:32px; font-weight:700;}
.main .part3 .info_bx .top h3 span {display:block; font-size:18px; font-weight:600; padding-bottom:10px;}
.main .part3 .info_bx .bottom {padding:20px 50px 50px 50px;}
.main .part3 .info_bx .address {font-size:18px; font-weight:600;}
.main .part3 .info_bx .method {margin-top:20px;}
.main .part3 .info_bx .method dl {position:relative; padding-left:70px;}
.main .part3 .info_bx .method dl:before {content:""; display:block; width:60px; height:60px; border-radius:50%; position:absolute; left:0;}
.main .part3 .info_bx .method dl.bus:before {background:var(--base2) url(/images/main/i-bus.png) no-repeat center center / 32px;}
.main .part3 .info_bx .method dl.car:before {background:var(--base3) url(/images/main/i-car.png) no-repeat center center / 32px;}
.main .part3 .info_bx .method dl+dl {margin-top:20px;}
.main .part3 .info_bx .method dl dt {font-size:18px; font-weight:600; }
.main .part3 .info_bx .method dl dd {font-size:16px; font-weight:600; margin-top:4px;}
.main .part3 .info_bx .method dl.bus dt {color:var(--base2); }
.main .part3 .info_bx .method dl.car dt {color:var(--base3);}


.main .part3 .link_wrap {position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:3; height:420px;}
.main .part3 .link_wrap ul {display:grid; grid-template-rows:repeat(6,1fr); gap:10px; height:100%;}
.main .part3 .link_wrap ul li {background:#fff; width:300px;  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 7px; border-radius:10px; overflow:hidden;}
.main .part3 .link_wrap ul li a {display:flex; align-items:center; width:100%; height:100%; background:url(/images/main/i-link_arrow.png) no-repeat 90% center / 20px; font-size:18px; font-weight:600; color:#000; }
.main .part3 .link_wrap ul li:hover a {background:var(--base2) url(/images/main/i-link_arrow_W.png) no-repeat 90% center / 20px; color:#fff;}
.main .part3 .link_wrap ul li a span {padding-left:20px;}
.main .part3 .root_daum_roughmap {width:115%;}
.main .part3 .root_daum_roughmap .wrap_map {height:100%; height:620px;}
.main .part3 .mapWrap {position:absolute; top:0; width:100%; }
.main .part3 .root_daum_roughmap .wrap_controllers {display:none;}
.main .part3 .root_daum_roughmap .wrap_btn_zoom {display:none;}
.main .part3 .root_daum_roughmap .map_border {display:none;}
/*.main .part3 .mapWrap { width: 100%;}
.main .part3 #map {width:100%; height:620px; border-top:1px solid #ddd;}*/

/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
.main h2 {font-size:28px;}
.main .part1 {padding:80px 20px 50px;}
.main .part1 .inner {margin:0; width:100%; flex-direction:column; padding:0 20px}	
.main .part1 .banner1 {width:100%; max-width:none;}
.main .part1 .import_btn {width:100%; height:auto; flex-direction:row;}
.main .part1 .import_btn a {width:100%; padding:30px 0;}
.main .part1 .import_btn a span {font-size:20px;}
.main .part2 .inner {padding:50px 20px;}
.main .part2 .topWrap .btn a {font-size:16px; padding:6px 20px}
.main .part2 .noticeWrap li {padding:25px 30px;}
.main .part2 .noticeWrap li dl dt {font-size:20px;}
.main .part2 .noticeWrap li dl dd {font-size:16px;}
.main .part2 .noticeWrap li .date {font-size:16px;}
.main .part2 .noticeWrap li .n_type {font-size:15px;}
.main .part3 .mapWrap {position:static;}
.main .part3 .root_daum_roughmap {width:100%; height:400px;}
.main .part3 .root_daum_roughmap .wrap_map {height:400px;}
.main .part3 .inner {height:auto; order:2;}
.main .part3 {position: static;display:flex;flex-direction:column; } 
.main .part3 .link_wrap {position:static; transform:translateY(0); z-index:3; height:auto; width:300px;}
.main .part3 .info_bx {position:static; height:auto; transform: translateY(0); border-radius:0;}
.main .part3 .position_ab {display:flex;}
.main .part3 .link_wrap ul {gap:0;}
.main .part3 .info_wrap {width:calc(100% - 300px);}
.main .part3 .info_bx .top {padding:20px 30px;}
.main .part3 .info_bx .top h3 {font-size:26px;}
.main .part3 .info_bx .top h3 span {font-size:16px;}
.main .part3 .info_bx .bottom {padding:20px 30px;}
.main .part3 .link_wrap ul {border-left:1px solid var(--border1);}
.main .part3 .link_wrap ul li {border-radius:0; width:100%; box-shadow:none;}
.main .part3 .link_wrap ul li+li {border-top:1px solid var(--border1);}
.main .part3 .info_bx .method {margin-top:15px;}
.main .part3 .info_bx .address {font-size:16px;}
.main .part3 .info_bx .method dl {padding-left:65px;}
.main .part3 .info_bx .method dl dt {font-size:16px;}
.main .part3 .info_bx .method dl.bus:before {background: var(--base2) url(/images/main/i-bus.png) no-repeat center center / 25px;}
.main .part3 .info_bx .method dl.car:before {background: var(--base3) url(/images/main/i-car.png) no-repeat center center / 25px;}
.main .part3 .info_bx .method dl:before {width:50px; height:50px;} 
.main .part3 .link_wrap ul li a {font-size:16px;}

}

/* ************************ 태블릿 (~1024) ************************ */
@media screen and (max-width:1024px) {
	
}


@media screen and (max-width:767px) { 
.main h2 {font-size:24px;}
.main .part1 .import_btn a span {font-size:18px;}
.banner1_next {width:45px; height:45px; background:#fff url(/images/common/banner_next.png) no-repeat center center / 9px; }
.banner1_prev {width:45px; height:45px; background:#fff url(/images/common/banner_prev.png) no-repeat center center / 9px;}
.main .part1 .banner1 {box-shadow:rgba(0, 0, 0, 0.2) 0px 5px 6px;}
.main .part1 .import_btn a {padding:20px 0; box-shadow:rgba(0, 0, 0, 0.15) 0px 1px 9px;}
.main .part1 .import_btn a img {width:50px;}
.main .part1 .import_btn a span {font-size:16px;}
.main .part2 .topWrap {flex-wrap:wrap; gap:15px;}
.main .part2 .noticeWrap {grid-template-columns:1fr; gap:10px;}
.main .part2 .noticeWrap li dl dt {font-size:18px;}
.main .part2 .noticeWrap li {padding:20px;}
.main .part2 .noticeWrap li dl {margin-top:15px;}
.main .part2 .noticeWrap li dl dd {font-size:15px;}
.main .part2 .noticeWrap li .date {font-size:15px; margin-top:15px;}
.main .part2 .topWrap .btn a {font-size:14px; padding:6px 15px;}
.main .part2 .inner {padding:40px 20px;}
.main .part3 .position_ab {display:block;}
.main .part3 .root_daum_roughmap {width:100%; height:300px;}
.main .part3 .root_daum_roughmap .wrap_map {height:300px;}
.main .part3 .info_wrap {width:100%;}
.main .part3 .link_wrap {width:100%;}
.main .part3 .link_wrap ul {border-left:0; border-top:1px solid var(--border1);}
.main .part3 .info_bx .top h3 {font-size:24px;}
.main .part3 .link_wrap ul li a {padding:15px 0;}
.main .part3 .info_bx .bottom {padding:20px;}
.main .part3 .info_bx .method dl+dl {margin-top:10px;}
.main .part3 .info_bx .top {padding:20px;}
}

@media screen and (max-width:500px) {
.main .part1 {padding:80px 20px 30px;}
.main .part1 .inner {gap:10px;}	
.main .part1 .import_btn {gap:10px;}
.main .part1 .import_btn a span {font-size:14px;} 
.main .part1 .import_btn a img {width:35px;}
.banner1_next {width:35px; height:35px; background:#fff url(/images/common/banner_next.png) no-repeat center center / 9px;}
.banner1_prev {width:35px; height:35px; background:#fff url(/images/common/banner_prev.png) no-repeat center center / 9px;}
.main .part3 .info_bx .address {font-size:15px;}
.main .part3 .info_bx .method dl dd {font-size:15px;}
.main .part3 .info_bx .top h3 span {font-size:14px; padding-bottom:7px;}
.main .part3 .info_bx .top h3 {font-size:20px;}
.main .part3 .link_wrap ul li a {padding:10px 0; font-size:15px;} 
}
