@charset "utf-8";
@import 'aos.css';

body {font-family:'Noto Sans KR', 'Roboto', 'Apple SD Gothic Neo', dotum, gulim, verdana, arial, AppleSDGothicNeo, AppleGothic; color:#777; font-size:min(max(18px, 1.8vw), 20px); font-weight:400; background:#333333; letter-spacing: -0.5px;}
label, select, input, textarea {font-family:'Noto Sans KR'}

#wrap {position: relative; width:100%; margin: 0 auto;}
.inner-wrap {position:relative; width: 100%; max-width: 1130px; height: 100%; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
.inner-wrap .inner {display: flex; align-items: center; width: 100%; flex-direction: row-reverse;}
.inner-wrap .inner:after {content: ''; display: block; clear: both;}

h1, h2, h3, h4 {letter-spacing: -2px;}

/* Header */
#header {position:relative; height:100px; background-color: #fff;}
#header .inner {position:relative; height:100%}
#header h1 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@media all and (max-width:1024px) {
    #header {height: 60px;}
    #header h1 img {width: auto; max-width: 90px;}
}

/* Container */
#container {background-color: #fff;}

/* Content */
.main-section {position:relative; padding: min(120px, 15%) 0 min(80px, 10%); width: 100%;}
.main-section .badge span {display: inline-block; padding: 0 18px; background-color: #f37800; color: #fff; height: 36px; line-height: 34px; border-radius: 18px; font-size:min(max(16px, 1.8vw), 18px); box-sizing: border-box;}
.main-section .badge + h3 {margin-top: 4.5%;}
.main-section h3 {font-size:min(max(24px, 5vw), 50px); color: #222; line-height: 1.2;}
.main-section h3 i {font-style: italic;}
.main-section h3 + p {margin-top: 5%; letter-spacing: -1px;}
.main-section p > span.etc {display:block; font-size:min(max(12px, 1.8vw), 14px); color: #999;}
.main-section p.etc {margin-top: 5%;}
.main-section p.etc img {width:auto}

.main-section.bg-gray {background-color: #f7f7f7;}

.main-section .info-block {width: 530px; flex: 1; margin-left: 17%;}
.main-section .slide-block {position:relative; width: 330px;}

.main-section .slide-block .swiper-container:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: url('../../inc/images/main/bg-slide-frame.png') no-repeat 0 0; background-size:cover; z-index: 1;}
.main-section.bg-gray .slide-block .swiper-container:after{background-image: url('../../inc/images/main/bg-slide-frame-bg.png');}

.main-section .slide-block .tip {position: absolute; top:0; left:0; width: auto; z-index: 1;}
.main-section .slide-block .tip img {width: auto;}

#tip-0301 {position: absolute; top: 46%; left: -25%; transform: translate(0, -50%);}

@media all and (max-width:480px) {
    #tip-0301 {left: 0;}
}

.main-section .slide-block .swiper-container .swiper-slide > img {position:relative; top:0; vertical-align: top; z-index: 2;}

.main-section .slide-block .control {position: relative; margin-top:-20px; width:100%; height: 30px; text-align: center;}
.main-section .slide-block .control .swiper-pagination {top:0; left: 50%; transform: translateX(-50%);}
.main-section .slide-block .swiper-pagination-bullet {margin: 0 5px;}
.main-section .slide-block .swiper-pagination-bullet-active {background-color: #f37800;}

.main-section.bg-gray .inner {flex-direction: inherit}
.main-section.bg-gray .inner .info-block {margin-left: 0;}

/* section */
.main-section.ms01 {padding: 0;
    background: rgb(243,150,0);
    background: radial-gradient(circle, rgba(243,150,0,1) 0%, rgba(243,147,0,1) 50%, rgba(243,142,0,1) 100%);
}
.main-section.ms01 .inner-wrap .inner {align-items: flex-start;}
.main-section.ms01 .inner-wrap .inner > div {flex: 1;}

.main-section.ms01 .info-block {position:relative; margin-left: 0; padding: min(150px, 15%) 0 min(150px, 10%); z-index: 1;}
.main-section.ms01 h3 {font-size:min(max(30px, 4vw), 36px); color: #fff;}
.main-section.ms01 p {font-size:min(max(16px, 1.8vw), 22px); color: #fff;}
.main-section.ms01 .copy1 {margin-top:2%; font-size:min(max(80px, 4vw), 100px); font-weight: bold;}
.main-section.ms01 .copy1 img {width: auto;}
.main-section.ms01 .copy2 {margin-top:1%; font-size:min(max(36px, 4vw), 70px);}

.main-section.ms01 h3 div.dot {letter-spacing: -6px;}
.main-section.ms01 h3 div.dot > div {position:relative; font-weight: bold; display: inline-block;}
.main-section.ms01 h3 div.dot > div:first-child {margin-right: 1.5%;}
.main-section.ms01 h3 div.dot > div:before {content: ''; position: absolute; top:-6px; left: 60%; transform: translateX(-50%); width: 6px; height: 6px; background-color: #fff; border-radius: 50%;}

.main-section.ms01 h3 + p {margin-top: 4%;}

.main-section.ms01 .info-img {padding-bottom: 3%;}

.main-section .app-store {margin-top: 4%;}
.main-section .app-store:after {content: ''; display: block; clear: both;}
.main-section .app-store li {display: inline-block;}
.main-section .app-store li a {display: inline-block;}
.main-section .app-store li + li {margin-left: 2%;}

.main-section .map-list {margin-top: 6%;}
.main-section .map-list li {display: inline-block;}
.main-section .map-list li a {display: inline-block;}
.main-section .map-list li + li {margin-left: 2%;}

.app-download {display:none; position: fixed; right: 20px; bottom: 60px; z-index: 11;}
.app-download a {display: block; padding: 0 15px; background-color: #f37800; height: 50px; line-height: 48px; border-radius: 50px; font-size: min(max(16px, 1.8vw), 18px); border:1px solid #fff; box-sizing: border-box; box-shadow: 4px 0 8px rgb(0 0 0 / 20%);}
.app-download a + a {margin-top:5px;}
.app-download a span {color: #fff; font-weight: bold; padding-left: 30px;}

.app-download a.app span {background: url('../../inc/images/main/icon-apple.png') no-repeat 0 0; background-size: contain;}
.app-download a.google span {background: url('../../inc/images/main/icon-google.png') no-repeat 0 0; background-size: contain;}

.main-section.ms03.bg-gray .inner .info-block {margin-left: 10%;}

.logo-daejeon img {max-width: 150px;}
.main-section.ms06 {
    padding: min(140px, 10%) 0 min(140px, 10%);
    position:relative; background-color: #f39600; overflow: hidden;
}
.main-section.ms06 .inner-wrap {padding: 0;}

.video {width: 100%; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 1;}
.video-container {position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.video-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.main-section.ms07 {padding: min(80px, 10%) 0 min(50px, 10%); overflow: hidden; min-height: 875px; box-sizing: border-box;
    background: rgb(234,234,234);
    background: linear-gradient(153deg, rgba(234,234,234,1) 0%, rgba(234,234,234,1) 45%, rgba(220,220,220,1) 45.01%, rgba(220,220,220,1) 100%);
}
.main-section.ms07 .txt-wrap {position: absolute; top:0; left: 0; width: 100%; height:100%;  z-index: 2; text-align: left;}
.main-section.ms07 .txt-wrap img {width:auto; transition: all 0.5s ease;}
.main-section.ms07 .txt-wrap .copy1 {position: absolute; top:0; left: 0;}
.main-section.ms07 .txt-wrap .copy2 {position: absolute; top:0; left: 0;}

.main-section.ms07 .img-wrap {position: absolute; top:0; right:0; width: 100%; height:100%; z-index: 1;}
.main-section.ms07 .img-wrap img {position:absolute; top:0; right: 0; width: auto; transition: all 0.5s ease;}

@media all and (max-width:1200px) {
    .main-section.ms01 .inner-wrap {padding-right:20px; padding-left:20px;}
}

@media all and (max-width:1024px) {
    .main-section {text-align: center;}
    /* .main-section.ms01 .inner-wrap:before {left: 50%; transform: translateX(-50%); opacity: 0.3;} */

    .main-section.ms03.bg-gray .inner .info-block {margin-left: 0;}
}
@media all and (max-width:980px) {
    .inner-wrap .inner {display: block;}
    .main-section .info-block {float: none !important; display: block; margin:0 auto; width: 100%;}
    .main-section .slide-block {float: none !important; display: block; margin: 0 auto;}

    .main-section .info-block + .slide-block {margin-top: 7%;}
    .main-section .slide-block + .info-block {margin-top: 7%;}

    .main-section.ms07 {min-height: 100vw;}
    .main-section.ms07 .txt-wrap {left: 20px;}
    .main-section.ms07 .txt-wrap img {width:80%;}
    .main-section.ms07 .img-wrap {margin-top: 13%;}
    .main-section.ms07 .img-wrap img {width: 70%;}

    .main-section.ms01 .inner-wrap .inner {display:flex}
}
@media all and (max-width:860px) {
    .main-section .app-store li {width: 48%;}
}
@media all and (max-width:768px) {
    .main-section.ms01 .inner-wrap .inner {display: block;}
    .main-section.ms01 .info-img img {width: auto;}
    .main-section.ms01 .info-block {padding-top:0}

    .main-section.ms01 .copy2,
    .main-section.ms01 h3 + p,
    .main-section .app-store {display:none;}

    .app-download {display: block;}
}
@media all and (max-width:680px) {
    .inner-wrap {padding: 0 20px;}

    .main-section.ms01 .inner-wrap:before {width:100%; background-position: 50% 0;}
    .main-section.ms01 h3 .copy1 img {max-height:80px}

    .main-section .app-store li img {width: auto;}

    .main-section .info-block {width:100%;}
}
@media all and (max-width:480px) {
    p br {display: none;}

    .main-section .app-store li {float: left; width: 48%;}
    .main-section .app-store li + li {margin:0 1%;}
}
@media all and (max-width:400px) {
    .main-section .slide-block {width:100%;}
}

/* Footer */
#footer .inner-wrap {font-size:min(max(13px, 1.8vw), 15px); padding:20px 0; color:#ababab; text-align: center;}

/* language */
.language {position:absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.language li {position:relative; display:inline-block;}
.language li + li {margin-left:8px; padding-left:10px;}
.language li + li:before {content:''; position:absolute; top:50%; left:0; transform: translateY(-50%); width:1px; height:14px; background:#ccc}
.language li span {color:#f37800}
.language li a {color:#bbb}

/* eng */
.eng .main-section.ms01 h3 {font-size: min(max(24px, 4vw), 30px);}
.eng .main-section.ms01 h3 div.dot {letter-spacing:-2px;}
.eng .main-section.ms01 h3 div.dot > div:before {display:none;}
.eng .main-section.ms01 h3 + p {line-height:1.4}

.eng .main-section h3 {font-size:min(max(20px, 5vw), 40px); line-height:1.2}
.eng .main-section h3.type2 {font-size:min(max(20px, 5vw), 30px);}
.eng .main-section h3 + p {line-height:1.4}

.eng .main-section.ms01 .copy2 {font-size: min(max(36px, 4vw), 50px);}
.eng .main-section.ms05 h3 {font-size:min(max(20px, 5vw), 36px);}