@charset "utf-8";

.real-cont {padding:30px 0 250px;}
.s3_view, .s4_view {padding-top: 70px;}


/* splitting */
.page-header > .container.motion h3.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.1s * var(--char-index));}

@keyframes textAni {
    0% {opacity:0;}
    30% {opacity:0;}
}

/* page-header */
.page-header {position: relative; width: 100%; padding-top: 70px;}
.page-header .container h2 {font-size: 26px; font-weight: 700; color: #222; line-height: 1.6; border-bottom: 1px solid #eee; padding-bottom: 10px;}

section {padding: 50px 0 250px;}

/* s1 */
.s1 .about {width: 100%; display: flex; gap: 74px; align-items: flex-start;}
.s1 .about .txt {width: 1%; flex: 1 1 auto;}
.s1 .about .txt h3 {font-size: 60px; font-weight: 700; color: #303030; line-height: 1.2;}
.s1 .about .txt h3 > span {color: #F5CC2D;}
.s1 .about .txt p {margin-top: 40px; font-size: 18px; color: #666; font-weight: 400; line-height: 1.6;}
.s1 .about .txt p > strong {color: #222;}
.s1 .about .txt p.dot {position: relative; margin-top: 16px; padding-left: 27px; color: #444; font-weight: 500;}
.s1 .about .txt p.dot::before {position: absolute; content: '＊'; font-size: 18px; color: #F5CC2D; font-weight: 500; line-height: 1.6; top: 0; left: 0;}
.s1 .about .txt figure {margin-top: 50px; max-width: 492px; width: 100%;}
.s1 .about .txt figure img {display: block; max-width: 100%; margin: 0 auto;}

.s1 .about .map-wrap {max-width: 800px; width: 100%;}
.s1 .about .map-wrap .map {width: 100%; height: 520px;}
.root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .wrap_map {height: 100% !important;}
.root_daum_roughmap .map_border {display: none;}
.s1 .about .map-wrap .info {margin-top: 40px;}
.s1 .about .map-wrap .info h5 {position: relative;margin-left: 20px; padding-left: 20px; font-size: 22px; color: #222; font-weight: 600; line-height: 1.6;}
.s1 .about .map-wrap .info h5::before {position: absolute; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #F5CC2D; top: 13.5px; left: 0;}
.s1 .about .map-wrap .info ul {margin-top: 20px; border-top: 2px solid #000; display: flex; flex-wrap: wrap;}
.s1 .about .map-wrap .info ul li {width: 50%; border-bottom: 1px solid #eee;}
.s1 .about .map-wrap .info ul li dl {width: 100%; padding: 15px 20px; display: flex; gap: 20px; align-items: flex-start;}
.s1 .about .map-wrap .info ul li dl dt {display: flex; gap: 8px; align-items: center; font-size: 18px; color: #222; font-weight: 600; line-height: 1.6;}
.s1 .about .map-wrap .info ul li dl dt img {display: block; max-width: 100%; margin: 0 auto;}
.s1 .about .map-wrap .info ul li dl dd {font-size: 18px; color: #666; font-weight: 400; line-height: 1.6;}
.s1 .about .map-wrap .info ul li dl dd a {display: block; color: #666;}

/* s2 */
.s2 .banner {width: 100%; height: 310px; display: flex; align-items: center; justify-content: center; background: url(../images/sub/banner_s201.jpg) 50% 50% no-repeat; background-size: cover;}
.s2 .banner h4 {font-size: 40px; color: #fff; font-weight: 700; line-height: 1.6;}
.s2 figure {margin-top: 80px; width: 100%;}
.s2 figure img {display: block; max-width: 100%; margin: 0 auto;}



/* s5 */
.s5 .jeongseon {display: flex; width: 100%; gap: 40px; align-items: flex-start;}
.s5 .jeongseon .map {position: relative; max-width: 1028px; width: 100%; flex-shrink: 0;}
.s5 .jeongseon .map > img {display: block; max-width: 100%;}
.s5 .jeongseon .map-pins {position: absolute; inset: 0;}
.s5 .jeongseon .map-pin {position: absolute; width: 43px; height: 57px; background: url() 50% 50% no-repeat; background-size: contain; cursor: pointer; transform: translate(-50%, -100%) scale(1); transform-origin: center bottom; transition: all .2s ease; z-index: 10;}
.s5 .jeongseon .map-pin.spot {background-image: url(../images/sub/ico_pin_red.png);}
.s5 .jeongseon .map-pin.festival {background-image: url(../images/sub/ico_pin_blue.png);}
.s5 .jeongseon .map-pin.spot.design-pin {background-image: url(../images/sub/ico_company.png); width: 58px; height: 54px;}
.s5 .jeongseon .map-pin.spot.design-pin > span {display: none;}
.s5 .jeongseon .map-pin:hover, .s5 .jeongseon .map-pin.on {transform: translate(-50%, -100%) scale(1.5); z-index: 10;}
.s5 .jeongseon .map-pin > span {display: block; font-size: 12px; font-weight: 700; line-height: 1.6; text-align: center; position: absolute; top: 9px; left: 49%; transform: translateX(-50%);}
.s5 .jeongseon .map-pin.spot > span {color: #D80000;}
.s5 .jeongseon .map-pin.festival > span {color: #3D4CA9;}
.s5 .jeongseon .list-wrap {width: 1%; flex: 1 1 auto; max-height: 1028px; height: 100%; overflow: auto;}
.s5 .jeongseon .list-wrap .list ~ .list {margin-top: 60px;}
.s5 .jeongseon .list-wrap .list > h5 {font-size: 24px; color: #070707; font-weight: 700; line-height: 1.6; padding-bottom: 10px;}
.s5 .jeongseon .list-wrap .list dl {position: relative; width: 100%; display: flex; gap: 22px; align-items: center; border-top: 2px solid #000; padding: 26px 4px 20px; cursor: pointer;}
.s5 .jeongseon .list-wrap .list dl ~ dl::before {position: absolute; content: ''; width: 2px; height: 100%; top: -30px; left: 17px; background-color: #222; z-index: -1;}
.s5 .jeongseon .list-wrap .list dl::after {position: absolute; content: ''; width: calc(100% - 54px); height: 1px; background-color: #eee; bottom: 0; right: 0;}
.s5 .jeongseon .list-wrap .list dl ~ dl {border-top: 0;}
.s5 .jeongseon .list-wrap .list dl dt {max-width: 27px; width: 100%; height: 33px; line-height: 27px; background: url(../images/sub/ico_mark.png) 50% 50% no-repeat; background-size: auto; font-size: 14px; color: #fff; font-weight: 700; text-align: center; transition: all .2s linear;}
.s5 .jeongseon .list-wrap .list dl dd {width: 1%; flex: 1 1 auto; font-size: 20px; color: #222; font-weight: 400; line-height: 1.6; transition: all .2s linear;}
.s5 .jeongseon .list-wrap .list.spot dl.on dt {background-image: url(../images/sub/ico_mark_on.png);}
.s5 .jeongseon .list-wrap .list.spot dl.on dd {color: #D80000;}
.s5 .jeongseon .list-wrap .list.festival dl.on dt {background-image: url(../images/sub/ico_mark_on2_.png);}
.s5 .jeongseon .list-wrap .list.festival dl.on dd {color: #3D4CA9;}


.s5 .jeongseon .map-popup {display: none; position: absolute; z-index: 20;  transform: translate(30px, -50%); max-width: 550px; width: 100%; border-radius: 20px; background-color: #fff; padding: 40px 24px 24px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);}
.s5 .jeongseon .map-popup.on {display: block;}
.s5 .jeongseon .pop-close {position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; cursor: pointer;}
.s5 .jeongseon .pop-close img {display: block; max-width: 100%;}
.s5 .jeongseon .map-popup .tit {display: flex; align-items: center; gap: 9px;}
.s5 .jeongseon .map-popup .tit .num {display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; padding-bottom: 5px; background: url() 50% 50% no-repeat; background-size: auto; width: 27px; height: 33px;}
.s5 .jeongseon .map-popup.spot .tit .num {background-image: url(../images/sub/ico_mark_on.png);}
.s5 .jeongseon .map-popup.festival .tit .num {background-image: url(../images/sub/ico_mark_on2_.png);}
.s5 .jeongseon .map-popup .tit h5 {font-size: 24px; color: #070707; font-weight: 700; line-height: 1.6;}
.s5 .jeongseon .map-popup p {font-size: 18px; font-weight: 400; line-height: 1.6; color: #444; margin-top: 8px;}
.s5 .jeongseon .map-popup figure {width: 100%; margin-top: 20px;}
.s5 .jeongseon .map-popup figure img {display: block; max-width: 100%;}


.s5 .jeongseon .map .map-zoom {display: none; position: absolute; bottom: 20px; right: 20px; border-radius: 50%; z-index: 2; cursor: pointer;}
.s5 .jeongseon .tab {display: none; margin-bottom: 20px;}
.s5 .jeongseon .tab a {width: 1%; flex: 1 1 auto; display: flex; height: 50px; align-items: center;justify-content: center; font-size: 18px; color: #999; font-weight: 500; background-color: #F8F8F8; border-bottom: 2px solid #444;}
.s5 .jeongseon .tab a.on {background-color: #444; color: #fff; font-weight: 700;}
.s5 .jeongseon .mo-list {display: none;}

.s5 .jeongseon .list-wrap .list .mo-list dl {border-top: 0; align-items: flex-start; padding: 23px 15px 0; position: relative; display: flex;}
.s5 .jeongseon .list-wrap .list .mo-list dl::before {position: absolute; content: ''; width: 2px; height: 100%; top: 25px; left: 28px; background-color: #222; z-index: -1;}
.s5 .jeongseon .mo-list {position: relative; padding-bottom: 56px;}
.s5 .jeongseon .mo-list h5 {font-size: 19px; color: #070707; font-weight: 700; line-height: 1.6;}
.s5 .jeongseon .mo-list p {font-size: 14px; font-weight: 400; line-height: 1.6; color: #444; margin-top: 6px;}
.s5 .jeongseon .mo-list figure {margin-top: 20px; width: 100%;}
.s5 .jeongseon .mo-list figure img {display: block; max-width: 100%;}
.s5 .jeongseon .mo-list.spot dl dt {background-image: url(../images/sub/ico_mark_on.png);}
.s5 .jeongseon .mo-list.spot dl dd {color: #D80000;}
.s5 .jeongseon .mo-list.festival dl dt {background-image: url(../images/sub/ico_mark_on2.png);}
.s5 .jeongseon .mo-list.festival dl dd {color: #0700c7;}