@charset "utf-8";

#main {letter-spacing:-.03em;}
/* main-visual */
.main-visual {position:relative;}
.main-visual .item {height:100vh;}
.main-visual .item .secting-img {background-repeat:no-repeat; background-size:cover; background-position:center center; width:100%; height:100%; transform:scale(1.04);}
.main-visual .item.slick-active .secting-img {transform:scale(1); transition:all 4.5s;}
.main-visual .txt-box {position:absolute; width:100%; height:100%; top:0; left:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.main-visual .txt-box p {font-size:20px; line-height:1.6em; color:#518bd3; font-weight:600; font-family:'Poppins'; letter-spacing:.5em; margin-bottom:46px; filter:blur(10px); opacity:0;}
.main-visual .txt-box h2 {font-size:55px; line-height:1.2em; color:#fff; filter:blur(10px); opacity:0;}
.main-visual .item.slick-active .txt-box p {filter:blur(0); opacity:1; transition:all 1s;}
.main-visual .item.slick-active .txt-box h2 {filter:blur(0); opacity:1; transition:all 1s 0.8s;}
.main-visual .visual-btn {position:absolute; bottom:100px; left:160px; display:flex; align-items:center;}
.main-visual .visual-btn .paging {padding-right:24px;}
.main-visual .visual-btn .paging ul {display:flex; margin:0 -10px; align-items:center;}
.main-visual .visual-btn .paging ul li {padding:0 10px;}
.main-visual .visual-btn .paging ul li button {display:block; width:8px; height:8px; border-radius:50%; display:block; font-size:0; background-color:#fff; border:0;}
.main-visual .visual-btn .paging ul li.slick-active button  {width:10px; height:10px; border:2px solid #fff; background-color:transparent;}
.main-visual .visual-btn .btn-wrap {position:relative; width:14px; height:14px;}
.main-visual .visual-btn .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 .visual-btn .btn-wrap .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .visual-btn .btn-wrap .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .visual-btn .btn-wrap .btnw.bt-play {display:none;}
.scrolldown {position:absolute; bottom:80px; right:160px; z-index:11;}
/* section01 */
.section01 .col {display:flex; height:100%;}
.section01 .row {width:50%; height:100%; padding:20px 160px; display:flex; align-items:center; background-size:cover;}
.section01 .inner {color:#fff; position:relative; top:80px; opacity:0; filter:blur(10px);}
.section01.on .inner {top:0; opacity:1; filter:blur(0); transition:all 1s;}
.section01.on .row:last-child .inner {transition-delay:0.6s;}
.section01 .inner h3 {font-size:55px; line-height:1.2em; margin-bottom:32px;}
.section01 .inner p {font-size:22px; line-height:1.4em; margin-bottom:56px;}
.section01 .inner a {display:block; font-size:18px; width:210px; line-height:70px; padding:0 30px; background:rgba(255,255,255,0.2); border-radius:35px; position:relative; overflow:hidden; z-index:1;}
.section01 .inner a:before {content:''; width:40px; height:40px; background:#518bd3; border-radius:50%; z-index:5; position:absolute; top:50%; margin-top:-20px; right:20px; transition:all 0.6s;}
.section01 .inner a:hover:before {width:300px; height:300px; margin-top:-150px; right:-60px;}
.section01 .inner a strong {font-weight:500; font-family:'Poppins'; position:relative; z-index:10;}
.section01 .inner a span {width:40px; height:40px; background:#518bd3; border-radius:50%; position:absolute; top:50%; margin-top:-20px; right:20px; z-index:10;}
.section01 .inner a span:before {content:''; width:12px; height:4px; background:#fff; position:absolute; top:50%; margin-top:-2px; left:50%; margin-left:-6px;}
/* section02 */
.section02 {background:url('../img/main/sec02bg.jpg') center center no-repeat; background-size:cover;}
.section02 .col {display:flex;color:#fff; position:relative; top:80px; opacity:0; filter:blur(10px);}
.section02.on .col {top:0; opacity:1; filter:blur(0); transition:all 1.4s;}
.section02 .tit-box {width:100%; max-width:460px; padding-top:86px;}
.section02 .tit-box h3 {font-size:55px; color:#000; font-family:'Poppins'; margin-bottom:36px; line-height:1.1em;}
.section02 .tit-box p {font-size:22px; line-height:1.3em; color:#666; margin-bottom:66px;}
.arrows .slick-arrow {width:70px; height:70px; background-color:#fff; background-position:center center; background-size:cover; border:0; border-radius:50%; box-shadow:0 0 20px rgba(132,132,132,0.3); font-size:0; margin-right:20px; transition:all 0.4s;}
.arrows .slick-arrow:hover {background-color:#518bd3; box-shadow:none;}
.arrows .slick-prev {background-image:url('../img/main/sec02-prev.png');}
.arrows .slick-prev:hover {background-image:url('../img/main/sec02-prev-on.png');}
.arrows .slick-next {background-image:url('../img/main/sec02-next.png');}
.arrows .slick-next:hover {background-image:url('../img/main/sec02-next-on.png');}
.section02 .slide-box {width:1%; flex:1 1 auto;}
.section02 .slide-box .items {margin:0 -15px;}
.section02 .slide-box .item {padding:0 15px;}
.section02 .slide-box .inner {display:flex; flex-direction:column; justify-content:space-between; margin-top:40px; padding:60px 50px; height:500px; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.4s; color:#fff;}
.section02 .slide-box .item:hover .inner {margin-top:0; margin-bottom:40px; box-shadow:5px 5px 20px 2px rgba(102,102,102,0.4);}
.section02 .slide-box .inner .txt p {font-size:16px; line-height:1.8em; margin-bottom:20px; font-family:'Poppins'; font-weight:600;}
.section02 .slide-box .inner .txt h4 {font-size:34px; line-height:1.1em;}
.section02 .slide-box .inner .more {text-align:right;}
.section02 .slide-box .inner .more p {display:inline-block; font-size:16px; line-height:1.8em; font-weight:600; font-family:'Poppins'; position:relative; padding-right:24px;}
.section02 .slide-box .inner .more p:after {content:''; width:12px; height:2px; background:#518bd3; position:absolute; top:50%; margin-top:-1px; right:0;}
/* section03 */
.section03 .col {display:flex; height:100%;}
.section03 .row {width:20%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.4s;}
.section03 .row:hover {width:28%;}
.section03 .inner {color:#fff;}
.section03 .inner h3 {font-size:40px; line-height:1.2em; transition:all 0.4s;}
.section03 .row:hover .inner h3 {font-size:50px;}
.section03 .inner .txt {height:0; overflow:hidden; transition:all 0.4s;}
.section03 .row:hover .inner .txt {height:180px; padding-top:20px; transition-delay:0.3s;}
.section03 .inner p {font-size:22px; line-height:30px;}
.section03 .inner .more {margin-top:54px;}
.section03 .inner .more a {display:inline-block; font-size:18px; width:210px; line-height:70px; padding:0 30px; background:rgba(255,255,255,0.2); border-radius:35px; position:relative; overflow:hidden; z-index:1; text-align:left;}
.section03 .inner .more a:before {content:''; width:40px; height:40px; background:#518bd3; border-radius:50%; z-index:5; position:absolute; top:50%; margin-top:-20px; right:20px; transition:all 0.6s;}
.section03 .inner .more a:hover:before {width:300px; height:300px; margin-top:-150px; right:-60px;}
.section03 .inner .more a strong {font-weight:500; font-family:'Poppins'; position:relative; z-index:10;}
.section03 .inner .more a span {width:40px; height:40px; background:#518bd3; border-radius:50%; position:absolute; top:50%; margin-top:-20px; right:20px; z-index:10;}
.section03 .inner .more a span:before {content:''; width:12px; height:4px; background:#fff; position:absolute; top:50%; margin-top:-2px; left:50%; margin-left:-6px;}
/* section04 */
.section04 {background:url('../img/main/sec04bg.jpg') center center no-repeat; background-size:cover;}
.section04 .col {display:flex;color:#fff; position:relative; top:80px; opacity:0; filter:blur(10px);}
.section04.on .col {top:0; opacity:1; filter:blur(0); transition:all 1.4s;}
.section04 .tit-box {width:100%; max-width:460px; padding-top:86px;}
.section04 .tit-box h3 {font-size:55px; color:#000; font-family:'Poppins'; margin-bottom:36px; line-height:1.1em;}
.section04 .tit-box p {font-size:22px; line-height:1.3em; color:#666; margin-bottom:66px;}
.section04 .slide-box {width:1%; flex:1 1 auto;}
.section04 .slide-box .items {margin:0 -15px;}
.section04 .slide-box .item {padding:0 15px;}
.section04 .slide-box .inner {padding:46px 40px; margin-top:40px; height:500px; transition:all 0.4s; background:#fff;}
.section04 .slide-box .item:hover .inner {margin-top:0; margin-bottom:40px; box-shadow:5px 5px 20px 2px rgba(102,102,102,0.4); background:#518bd3;}
.section04 .slide-box .inner .date {margin-bottom:32px; color:#000; font-family:'Poppins'; font-weight:600; transition:all 0.4s; padding-left:10px;}
.section04 .slide-box .item:hover .inner .date {color:#fff;}
.section04 .slide-box .inner .date .day {font-size:45px; line-height:1em;}
.section04 .slide-box .inner .date .month {font-size:13px; line-height:1em;}
.section04 .slide-box .inner .tit {padding-bottom:12px; border-bottom:1px solid #ddd; margin-bottom:12px; transition:all 0.6s;}
.section04 .slide-box .item:hover .inner .tit {border-bottom-color:rgba(255,255,255,0.6);}
.section04 .slide-box .inner .tit h4 {font-size:24px; line-height:1.5em; color:#000; font-weight:600; transition:all 0.4s; height:calc(1.5em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.section04 .slide-box .item:hover .inner .tit h4 {color:#fff;}
.section04 .slide-box .inner .txt p {font-size:18px; line-height:1.8em; color:#666; transition:all 0.4s; height:calc(1.8em * 1 * 6); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;}
.section04 .slide-box .item:hover .inner .txt p {color:rgba(255,255,255,0.5);}
.section04 .slide-box .more {text-align:right; margin-top:46px;}
.section04 .slide-box .more a {display:inline-block; font-size:16px; line-height:1.8em; color:#666; font-weight:600; font-family:'Poppins'; position:relative; padding-right:24px;}
.section04 .slide-box .more a:after {content:''; width:12px; height:2px; background:#518bd3; position:absolute; top:50%; margin-top:-1px; right:0;}
/* section05 */
.section05 .sec05 {padding:160px 0; background:url('../img/main/sec05bg.jpg') center center no-repeat; background-size:cover;}
.section05 .sec05 .tit {text-align:center; margin-bottom:90px; position:relative; top:80px; opacity:0; filter:blur(10px);}
.section05.on .sec05 .tit {top:0; opacity:1; filter:blur(0); transition:all 1.4s;}
.section05 .sec05 .tit h3 {font-size:55px; line-height:1.1em; color:#000; margin-bottom:40px; font-family:'Poppins';}
.section05 .sec05 .tit p {font-size:22px; line-height:1.4em; color:#666;}
.section05 .sec05 .items {margin:0 -20px;}
.section05 .sec05 .item {padding:0 20px; text-align:center;}
.section05 .sec05 .item img {display:inline-block;}
/* headr */
/* 공통 스타일 */
.fp-viewing-DOWNLOAD #header, 
.fp-viewing-NOTICE #header, 
.fp-viewing-PARTNERSHIP #header {background:#fff; border-color:transparent;}

.fp-viewing-DOWNLOAD #header .sitelogo a, 
.fp-viewing-NOTICE #header .sitelogo a, 
.fp-viewing-PARTNERSHIP #header .sitelogo a {background-image:url('../img/layout/logo-b.png');}

.fp-viewing-DOWNLOAD #header #gnb>ul>li>a, 
.fp-viewing-NOTICE #header #gnb>ul>li>a, 
.fp-viewing-PARTNERSHIP #header #gnb>ul>li>a {color:#000;}

.fp-viewing-DOWNLOAD #header #gnb>ul>li:hover>a, 
.fp-viewing-NOTICE #header #gnb>ul>li:hover>a, 
.fp-viewing-PARTNERSHIP #header #gnb>ul>li:hover>a {color:#518bd3;}

.fp-viewing-DOWNLOAD #header .sitemap-btn span, 
.fp-viewing-NOTICE #header .sitemap-btn span, 
.fp-viewing-PARTNERSHIP #header .sitemap-btn span {background:#000;}

body.fp-viewing-PRODUCT #header,
body.fp-viewing-DOWNLOAD #header,
body.fp-viewing-COMPANY #header,
body.fp-viewing-NOTICE #header {transform:translateY(-100%);}

body.fp-viewing-PRODUCT.scrolled #header,
body.fp-viewing-DOWNLOAD.scrolled #header,
body.fp-viewing-COMPANY.scrolled #header,
body.fp-viewing-NOTICE.scrolled #header  {transform:translateY(0);}