@charset "utf-8";

/* main-visual  */
.main-visual {position:relative; width:100%; height:100vh;  background-size:cover; overflow:hidden;}
.main-visual .backdr {background:url('../img/main/main-visual01.jpg') center center no-repeat; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; transition:all 4.5s; transform:scale(1.03);}
.main-visual.active .backdr {transform:scale(1);}
.main-visual .txt-box {display:flex; height:100%; flex-direction:column; justify-content:center;}
.main-visual h2 {font-size:55px; line-height:1.3em; color:#fff; font-family:'NanumSquareExtraBold'; text-shadow:3px 3px 6px rgba(0,0,0,0.3); opacity:0;}
.main-visual.active h2 {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);}}
.scroll-down {position:absolute; bottom:70px; right:60px; width:140px; height:11px; padding-right:30px; overflow:hidden; animation:scroll-ani 3s ease-in-out infinite;}
@keyframes scroll-ani {0%{transform:translateY(0);}50%{transform:translateY(20px);}100%{transform:translateY(0);}}

.main-visual .move {margin-top:30px;}
.main-visual .move a {opacity:0; display:block; width:100px; line-height:50px; background:#d12338; text-align:center; color:#ffff; border-radius:0 0 0 20px; font-size:18px; font-weight:500; transition:all 0.3s;}
.main-visual .move a:hover {border-radius:0 20px 0 20px;}
.main-visual.active .move a {animation:text-focus-in1 1s 0.6s cubic-bezier(.55,.085,.68,.53) both;}



.scroll-down:before,
.scroll-down:after {content:''; width:104px; height:11px; position:absolute; top:0; left:0; background-repeat:no-repeat; background-size:cover; transition:all 0.4s;}
.scroll-down:before {background-image:url('../img/main/scroll-down.png');}
.scroll-down:after {background-image:url('../img/main/scroll-down-on.png'); transform:translateY(-101%);}
.scroll-down:hover:before {transform:translateY(101%);}
.scroll-down:hover:after {transform:translateY(0);}
.scroll-down span {width:11px; height:11px; position:absolute; right:0; top:0;}
.scroll-down span:before,
.scroll-down span:after {content:''; width:11px; height:11px; position:absolute; top:0; left:0; background-repeat:no-repeat; background-size:cover; transition:all 0.4s;}
.scroll-down span:before {background-image:url('../img/main/scroll-down-arrow.png');}
.scroll-down span:after {background-image:url('../img/main/scroll-down-arrow-on.png'); transform:translateY(101%);}
.scroll-down:hover span:before {transform:translateY(-101%);}
.scroll-down:hover span:after {transform:translateY(0);}
/* section */
.section {position:relative; background-repeat:no-repeat; background-size:cover; background-position:center center; padding:150px 0 180px;}
.section .sec-tit {text-align:center; margin-bottom:66px;}
.section .sec-tit span {display:inline-block; width:35px; height:6px; background:#d12338; margin-bottom:2px;}
.section .sec-tit h3 {font-size:55px; color:#000; line-height:1.3em; margin-bottom:26px; font-family:'Play';}
.section .sec-tit p {font-size:18px; line-height:1.66em; color:#666;}
/* section01 */
.section01 {background-image:url('../img/main/sec01bg.jpg');}
.section01 .col {display:flex; border-bottom:3px solid #e0dcdc;}
.section01 .col .row {width:16.666667%;}
.section01 .inner {padding:0 10px 72px; height:100%; text-align:center; position:relative;}
.section01 .inner:after {content:''; width:0; height:3px; position:absolute; bottom:-3px; left:50%; background:#d12338; transition:all 0.6s;}
.section01 .inner:hover:after {width:100%; left:0;}
.section01 .inner .img-box {margin-bottom:22px; position:relative;}
.section01 .inner .img-box img {transition:all 1s;}
.section01 .inner:hover .img-box img {transform:rotateY(-360deg);}
.section01 .inner .txt-box h4 {font-size:26px; line-height:1.2em; color:#000; font-weight:600; margin-bottom:16px; min-height:calc(1.2em * 1 * 2);}
.section01 .inner .txt-box p {font-size:16px; line-height:1.75em; color:#666;}
/* section02 */
.section02 {background-image:url('../img/main/sec02bg.jpg');}
.section02 .col {display:flex; margin:0 -19px; height:100%;}
.section02 .col .row {width:50%; padding:0 19px;}
.section02 .inner {display:flex; border-radius:0 0 50px 0; height:340px; overflow:hidden; transition:all 0.6s;}
.section02 .inner:hover {border-radius:50px 0 50px 0;}
.section02 .inner .img-box {width:1%; flex:1 1 auto; height:auto; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.section02 .inner01 .img-box {background-image:url('../img/main/sec02-01bg.jpg');}
.section02 .inner02 .img-box {background-image:url('../img/main/sec02-02bg.jpg');}
.section02 .inner .txt-box {width:100%; max-width:340px; padding:50px 46px 20px; position:relative; z-index:1;}
.section02 .inner .txt-box:after {content:''; width:100%; height:100%; background-image:url('../img/main/sec02-inner.jpg'); background-size:cover; z-index:-1; position:absolute; top:0; left:0; background-repeat:no-repeat; background-position:center center; transition:all 0.6s;}
.section02 .inner:hover .txt-box:after {background-image:url('../img/main/sec02-inner-on.jpg');}
.section02 .inner .txt-box h4 {font-size:32px; font-weight:600; line-height:1.2em; color:#fff; margin-bottom:18px;}
.section02 .inner .txt-box p {font-size:18px; line-height:1.66em; color:#fff; margin-bottom:20px;}
.section02 .inner .txt-box span {display:inline-block; font-size:18px; font-family:'Play'; line-height:1.6em; color:#fff; width:140px; line-height:49px; border-bottom:1px solid #fff; position:relative;}
.section02 .inner .txt-box span:after {content:''; width:4px; height:4px; background:#fff; opacity:0.5; position:absolute; right:0; top:50%; margin-top:-2px;}
.section02 .inner:hover .txt-box span:after {opacity:1;}
/* section03 */
.section03 {background-image:url('../img/main/sec03bg.jpg');}
.section03 .col {display:flex;}
.section03 .tab-menu {width:100%; max-width:320px; position:relative; height:100%;}
.section03 .tab-menu .tabs {margin-bottom:78px;}
.section03 .tab-menu .tabs li {margin-bottom:20px;}
.section03 .tab-menu .tabs li a {display:inline-block; font-size:22px; line-height:40px; font-weight:600; color:#666; position:relative; cursor:pointer; background-color:transparent; border:0; cursor:pointer; transition:all 0.6s; padding:0 2px; z-index:1;}
.section03 .tab-menu .tabs li a:hover {color:#000;}
.section03 .tab-menu .tabs li.active a {color:#000;}
.section03 .tab-menu .tabs li a:after {content:''; width:100%; height:16px; left:0; bottom:1px; background:rgba(209,35,56,0.2); position:absolute; opacity:0; transition:all 0.6s;}
.section03 .tab-menu .tabs li.active a:after {opacity:1;}
.section03 .tab-menu .tabs li a:hover:after {opacity:1;}

.section03 .tab-cnt {width:1%; flex:1 1 auto; height:400px; border-top:1px solid #000; position:relative;}
.section03 .inner {border-bottom:1px solid #ddd; height:100px; display:flex; align-items:center;}
.section03 .inner .tit {width:100%; max-width:140px; padding:0 5px;}
.section03 .inner .tit span {display:inline-block; padding:10px; line-height:1.5em; border-radius:0 20px 0 20px; text-align:center; background:#d12338; font-size:14px; font-weight:600; color:#fff;}
.section03 .inner .txt {width:1%; flex:1 1 auto; padding:0 5px;}
.section03 .inner .txt p {font-size:20px; line-height:2em; color:#666; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all 0.6s;}
.section03 .inner:hover .tit p {color:#000;}
.section03 .inner .date {width:100%; max-width:100px; padding:0 5px; text-align:right; font-size:18px; line-height:1.8em; color:#999;} 
.section03 .slick-arrow {position:absolute; bottom:100px; width:20px; height:20px; background-repeat:no-repeat; background-size:cover; background-color:transparent; border:0; cursor:pointer; font-size:0; opacity:.5; transition:all 0.6s;}
.section03 .slick-arrow:hover {opacity:1;}
.section03 .slick-prev {background-image:url('../img/main/sec03-prev.png'); left:-320px;}
.section03 .slick-next {background-image:url('../img/main/sec03-next.png'); left:-265px;}


.section03 .more {width:18px; height:18px; position:absolute; bottom:100px; left:-200px;}
.section03 .more a {display:block; transition:all 0.6s; width:100%; height:100%;}
.section03 .more a:hover {transform:rotate(180deg);}
/* .section04 */
.section04 {padding:42px 0;}
.section04 ul {display:flex; align-items:center; justify-content:space-around;}