@charset "utf-8";

#main {margin-top:110px;}

/* main-visual */
.main-visual {position:relative; height:calc(100vh - 110px); overflow:hidden;}
.main-visual .origin {width:100%; position:absolute; top:0; left:0; height:100%;}
.main-visual .origin .item {position: relative; width: 100%; height: calc(100vh - 110px);}
.main-visual .origin .secting-img {width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform:scale(1.04);}
.main-visual .origin .item.slick-active .secting-img {transform:scale(1); transition:all 4.5s ease-in-out;}
.main-visual .thumb {height:100%;}
.main-visual .wrap {display:flex; flex-direction:column; justify-content:center; height:100%;} 
.main-visual .thumb .items {margin-bottom:90px;}
.main-visual h2 {font-size:60px; color:#fff; line-height:1.3em; margin-bottom:20px;}
.main-visual h2 br.mob-only {display: none;}
.main-visual p {font-size:20px; line-height:1.7em; color:#fff;}
.main-visual .item.slick-active h2 {animation:text-focus-in1 .8s cubic-bezier(.55,.085,.68,.53) both;}
.main-visual .item.slick-active p {animation:text-focus-in1 1s cubic-bezier(.55,.085,.68,.53) both;}
@keyframes text-focus-in1 {0%{filter:blur(12px);opacity:0;transform:translateX(5%);}100%{filter:blur(0);opacity:1;transform:translateX(0);}}
.main-visual .visual-btn {display:flex; align-items:center; justify-content:center; width:140px; position:relative;}
.main-visual .paging {margin-right:22px;}
.main-visual .paging .slick-dots {display:flex; align-items:center; margin:0 -6px;}
.main-visual .paging .slick-dots li {padding:0 6px;}
.main-visual .paging .slick-dots li button {display:block; width:8px; height:8px;  border-radius:50%; background:#fff; border:2px solid #fff; font-size:0; cursor:pointer;}
.main-visual .paging .slick-dots li.slick-active button {background:transparent;}
.main-visual .btn-wrap {position:relative; width:14px; height:14px;}
.main-visual .btn-wrap .btnw {width:14px; height:14px; background-repeat:no-repeat; background-size:cover; background-position:center center; cursor:pointer; position:absolute; top:50%; left:50%; margin-top:-7px; margin-left:-7px; z-index:15;}
.main-visual .btn-wrap .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .btn-wrap .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .btn-wrap .btnw.bt-play {display:none;}
.main-visual .slick-arrow {width:10px; height:16px; background-repeat:no-repeat; background-size:cover; cursor:pointer; z-index:11; position:absolute; top:50%; margin-top:-8px; font-size:0; border:0; background-color:transparent;}
.main-visual .slick-prev {background-image:url('../img/main/visual-prev.png'); left:0;}
.main-visual .slick-next {background-image:url('../img/main/visual-next.png'); right:0;}

.scrolldown {position:absolute; bottom:60px; right:100px; animation:scroll-ani 2s ease-in-out infinite;}
@keyframes scroll-ani {0%{transform:translateY(0);}50%{transform:translateY(20px);}100%{transform:translateY(0);}}
/* section */
.section {padding:160px 0 180px;}
.sec-tit {text-align:center; margin-bottom:72px;}
.sec-tit span {display:block; font-size:18px; line-height:2em; color:#20407f; font-family:'Montserrat'; font-weight:700; margin-bottom:4px;}
.sec-tit h3 {font-size:55px; line-height:1.2em; color:#111;}
.sec-tit p {font-size:22px; line-height:1.6em; color:#666; margin-top:34px;}
/* section01 */
.section01 {padding-top: 138px;}
.section01 .col {display:flex; margin:0 -10px;}
.section01 .col .row {width:25%; padding:0 10px;}
.section01 .inner {display:block; padding:50px 20px 70px; position:relative; text-align:center; overflow:hidden; transition:all 0.6s;}
.section01 .inner:before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid #ddd;}
.section01 .inner:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; transition:all 0.6s; opacity:0; transform:scale(2); background:url('../img/main/sec01-cntbg.jpg') center center no-repeat; background-size:cover; z-index:4;}
.section01 .inner:hover:after {opacity:1; transform:scale(1);}

.section01 .inner .icon {width:140px; height:140px; margin:0 auto 24px; position:relative; z-index:11; background-repeat:no-repeat; background-size:cover; transition:all 0.6s;}
.section01 .inner01 .icon {background-image:url('../img/main/sec01-icon01-on.png');}
.section01 .inner02 .icon {background-image:url('../img/main/sec01-icon02-on.png');}
.section01 .inner03 .icon {background-image:url('../img/main/sec01-icon03-on.png');}
.section01 .inner04 .icon {background-image:url('../img/main/sec01-icon04-on.png');}
.section01 .inner01:hover .icon {background-image:url('../img/main/sec01-icon01.png');}
.section01 .inner02:hover .icon {background-image:url('../img/main/sec01-icon02.png');}
.section01 .inner03:hover .icon {background-image:url('../img/main/sec01-icon03.png');}
.section01 .inner04:hover .icon {background-image:url('../img/main/sec01-icon04.png');}
.section01 .inner .txt {position:relative; z-index:11;}
.section01 .inner h4 {font-size:26px; line-height:1.3em; font-weight:600; color:#333; margin-bottom:36px;}
.section01 .inner:hover h4 {color:#fff;}
.section01 .inner .more {display:inline-block; width:140px; line-height:50px; background:#f6f6f6; font-size:14px; color:#999; border-radius:25px; transition:all 0.6s;}
.section01 .inner:hover .more {background:rgba(255,255,255,0.1); color:#fff;}
/* section02 */
.section02 {background:#f6f6f6; padding-top: 150px;}
.section02 .col {display:flex; flex-wrap:wrap;}
.section02 .col .row {width:33.3333333%; display:block; padding:66px 60px; height:350px; position:relative; z-index:1; background-repeat:no-repeat; background-size:cover; background-position:center center; color:#fff; overflow:hidden;}
.section02 .col .row01 {background-image:url('../img/main/sec02-row01.jpg');}
.section02 .col .row02 {background-image:url('../img/main/sec02-row02.jpg');}
.section02 .col .row03 {background-image:url('../img/main/sec02-row03.jpg');}
.section02 .col .row04 {background-image:url('../img/main/sec02-row04.jpg');}
.section02 .col .row05 {background-image:url('../img/main/sec02-row05.jpg');}
.section02 .col .row06 {background-image:url('../img/main/sec02-row06.jpg');}
.section02 .col .row .txt {position:relative; z-index:11;}
.section02 .col .row h4 {font-size:26px; line-height:1.3em; font-weight:600; margin-bottom:17px;}
.section02 .col .row p {font-size:20px; line-height:1.7em; opacity:0.7;}
.section02 .col .row .more {width:56px; height:56px; background:rgba(255,255,255,0.3); position:absolute; bottom:0; right:0; transition:all 0.6s; z-index:10;}
.section02 .col .row:hover .more {background:#fff;}
.section02 .col .row .more:before,
.section02 .col .row .more:after {content:''; background:#fff; position:absolute; top:50%; left:50%; transition:all 0.6s;}
.section02 .col .row .more:before {width:14px; height:2px; margin-top:-1px; margin-left:-7px;}
.section02 .col .row .more:after {width:2px; height:14px; margin-top:-7px; margin-left:-1px;}
.section02 .col .row:hover .more:before,
.section02 .col .row:hover .more:after {background:#000;}
.section02 .col .row:before {content:''; width:100%; height:100%; position:absolute; z-index:5; top:0; left:0; background:rgba(32,64,127,0.95); opacity:0; transition:all 0.6s;}
.section02 .col .row:hover:before {opacity:1;}
.section02 .col .row:after {content:''; opacity:0; z-index:8; width:382px; height:102px; background:url('../img/main/sec02-logo.png') no-repeat; background-size:cover; position:absolute; right:-10px; bottom:-100px; transition:all 0.6s;}
.section02 .col .row:hover:after {opacity:0.03; bottom:-10px; transition-delay:0.3s;}
/* section03 */
.section03 .col {display:flex; margin:0 -10px;}
.section03 .col .row {width:50%; padding:0 10px;}
.section03 .box {padding:50px 55px; display:flex; align-items:center; margin-bottom:20px;}
.section03 .box .icon {width:100%; max-width:50px;}
.section03 .box .tit {font-size:26px; line-height:1.3em; font-weight:600; width:100%; max-width:140px; padding-left:15px; color:#111;}
.section03 .box.kakao .tit {color:#333;}
.section03 .box .txt {width:1%; flex:1 1 auto;}
.section03 .box .txt ul li {display:flex; align-items:center; margin-bottom:12px; line-height:1.5em; font-weight:600;}
.section03 .box .txt ul li:last-child {margin-bottom:0;}
.section03 .box .txt ul li .tt {width:100%; max-width:68px; text-align-last:justify; font-size:20px;}
.section03 .box .txt ul li a {color:#333; width:1%; flex:1 1 auto; padding-left:20px; font-size:22px;}
.section03 .box .txt ul li a br.mob-only {display: none;}
.section03 .box .more {width:100%; background:#fff; height:60px; border-radius:30px; overflow:hidden; position:relative; padding-left:40px;}
.section03 .box .more .typing-container {font-size:20px; line-height:60px; font-weight:600; color:#111;}
.section03 .box .more .cursor {border-left:2px solid #000; animation:blink 0.7s infinite; display:inline-block; margin-left:2px; height:24px; vertical-align:middle;}
@keyframes blink {0% {opacity:1;}50% {opacity:0;}100% {opacity:1;}}
.section03 .box .more a {display:block; width:120px; position:absolute; top:0; right:0; background:#3c1e1e; color:#fff; font-size:18px; line-height:60px; text-align:center; transition:all 0.6s;}
.section03 .box .more a:hover {letter-spacing:.2em;}

.section03 .time {padding:45px 55px; display:flex;}
.section03 .time .inner {/* width:50%; */ position:relative; border-right:1px solid rgba(255,255,255,0.2);}
.section03 .time .inner:nth-child(1) {width: 300px;}
.section03 .time .inner:last-child {width: calc(100% - 300px); border-right:0;} 
.section03 .time .inner .tit {margin-bottom:20px; display:flex; align-items:center;}
.section03 .time .inner .tit .icon {width:100%; max-width:50px;}
.section03 .time .inner .tit p {width:1%; flex:1 1 auto; font-size:26px; line-height:1.3em; font-weight:600; padding-left:15px; color:#fff;}
.section03 .time .inner .txt {display:block; width:250px; line-height:50px; font-size:20px; border-radius:25px; color:#fff; background:#1d9add; font-weight:600; text-align:center;}
.section03 .time .inner ul {display:flex; flex-direction:column; height:100%; padding-left:50px;}
.section03 .time .inner ul li {display:flex; align-items:center; margin-bottom: 10px;}
.section03 .time .inner ul li .tt {font-size:20px; line-height:1.5em; color:#fff; opacity:0.8; text-align-last:justify; width:100%; max-width:68px;}
.section03 .time .inner ul li p {width:1%; flex:1 1 auto; padding-left:15px; font-size:22px; line-height:1.4em; color:#fff; font-weight:600;}