@charset "utf-8";

#fp-nav {position:fixed; right:50px; top:50%; transform:translateY(-50%); margin-top:0 !important;}
#fp-nav ul li {display:flex; flex-direction:row-reverse; margin-bottom:40px; align-items:center; cursor:pointer;}
#fp-nav ul li:last-child {margin-bottom:0;}
#fp-nav ul li a {width:10px; height:10px; position:relative; display:block; overflow:hidden;}
#fp-nav ul li a:before {content:''; width:8px; height:8px; background:#d2d2d2; position:absolute; top:1px; left:1px; border-radius:50%; transition:all 0.4s;}
#fp-nav ul li a.active:before {left:-10px;}
#fp-nav ul li a:after {content:''; width:10px; height:10px; background:url('../img/main/fp-nav.png') no-repeat; position:absolute; top:0; left:10px; transition:all 0.6s;}
#fp-nav ul li a.active:after {left:0;}
#fp-nav ul li .fp-tooltip {margin-right:15px; width:0; line-height:28px; text-align:center; background:#163c6b; font-family:'Montserrat'; border-radius:14px; transition:all 0.4s; overflow:hidden;}
#fp-nav ul li a.active + .fp-tooltip {width:80px; transition-delay:0.4s;}
#fp-nav ul li .fp-tooltip span {color:#fff; font-weight:700; font-size:12px; letter-spacing:-.03em; opacity:0; transition:all 0.4s 0.8s;}
#fp-nav ul li a.active + .fp-tooltip span {opacity:1;}

#main {letter-spacing:-.03em;}

body.fp-viewing-2 #header .sitelogo a {background-image:url('../img/layout/logo-c.png');}
body.fp-viewing-2 #gnb>ul>li>a {color:#163c6b;}
body.fp-viewing-2 #gnb>ul>li>a:hover {color:#f5b758;}
body.fp-viewing-2 .sitemap-btn span {background:#163c6b;}
body.fp-viewing-2 .sitemap-btn:hover span {background:#f5b758;}
/* main-visual */
.main-visual {position:relative;}
.main-visual .item {height:100vh; position:relative;}
.main-visual .item .secting-img {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.main-visual .item .txt-box {position:relative; z-index:1; max-width:1470px; padding:0 15px; margin:0 auto; height:100%; display:flex; align-items:flex-end;}
.main-visual .item .txt-box .txt {padding:160px 0; width:100%; color:#fff;}
.main-visual .item .txt-box h2 {font-size:60px; line-height:1.2em; font-weight:600; margin-bottom:32px;}
.main-visual .item .txt-box p {font-size:20px; line-height:1.6em;}
.main-visual .item.slick-active .txt-box h2 {animation:text-focus-in .8s cubic-bezier(.55,.085,.68,.53) both .2s;}
.main-visual .item.slick-active .txt-box p {animation:text-focus-in .8s cubic-bezier(.55,.085,.68,.53) both .4s;}
@keyframes text-focus-in{0%{filter:blur(12px);opacity:0;transform:translateY(30%);}100%{filter:blur(0);opacity:1;transform:translateY(0);}}
@keyframes text-focus-in-span{0%{filter:blur(12px);opacity:0;transform:translateY(30%);}100%{filter:blur(0);opacity:1;transform:translateY(0);}}
.main-visual .arrows {position:absolute; bottom:80px; right:80px;}
.main-visual .arrows .slick-arrow {position:relative; z-index:1; width:80px; height:80px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); transition:all 0.6s; background-color:transparent; background-repeat:no-repeat; background-size:cover; background-position:center center; margin-left:10px; font-size:0;}
.main-visual .arrows .slick-arrow:hover {background-color:#111; border-color:#111;}
.main-visual .arrows .slick-prev {background-image:url('../img/main/main-prev.png');}
.main-visual .arrows .slick-next {background-image:url('../img/main/main-next.png');}
/* section-common */
.section-common {position:relative; overflow:hidden;}
/* section01 */
.section01 {background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.6s;}
.section01.on01 {background-image:url('../img/main/sec01-01.jpg');}
.section01.on02 {background-image:url('../img/main/sec01-02.jpg');}
.section01.on03 {background-image:url('../img/main/sec01-03.jpg');}
.section01 .wrap {width:100%; max-width:1695px; margin:0 0 0 auto; padding-left:15px; height:100%; display:flex; position:relative; z-index:10;}
.section01 .tit-box {width:25%; position:relative; height:100%;}
.section01 .tit-box .txt {width:100%; position:absolute; top:50%; left:50px; transform:translateY(-50%); opacity:0; transition:all 0.6s;}
.section01.on01 .tit-box .txt01,
.section01.on02 .tit-box .txt02,
.section01.on03 .tit-box .txt03 {opacity:1; left:0;}
.section01 .tit-box .txt  span {font-size:18px; line-height:1.8em; color:#f5b758; font-weight:700; display:block; margin-bottom:10px; font-family:'Montserrat';}
.section01 .tit-box .txt  h3 {font-size:52px; font-weight:600; color:#fff; line-height:1.2em; margin-bottom:32px;}
.section01 .tit-box .txt  p {font-size:20px; line-height:1.6em; color:#fff;}
.section01 .col {width:75%; display:flex;}
.section01 .row {width:33.3333333%; padding:50px 10px; text-align:center; display:flex; justify-content:center; align-items:flex-end; position:relative; transition:all 0.6s; overflow:hidden; border-left:1px solid rgba(255,255,255,0.2);}
.section01.on01 .row01,
.section01.on02 .row02,
.section01.on03 .row03 {background-color:rgba(22,60,107,0.9); padding-bottom:24%;}
.section01 .row .back {position:absolute; bottom:0; left:-200px; opacity:0; transition:all 0.4s; z-index:5;}
.section01.on01 .row01 .back,
.section01.on02 .row02 .back,
.section01.on03 .row03 .back {opacity:0.1; left:0; transition-delay:0.8s;}
.section01 .row .inner {position:relative; z-index:10;}
.section01 .row .icon {margin-bottom:40px; opacity:0; transition:all 0.4s;}
.section01.on01 .row01 .icon,
.section01.on02 .row02 .icon,
.section01.on03 .row03 .icon {opacity:1; transition-delay:0.4s;}
.section01 .row h4 {font-size:36px; line-height:1.2em; font-weight:600; color:#fff;}
.section01 .row .more {width:80px; height:80px; border-radius:50%; background:#f5b758; position:relative; margin-top:24px; display:inline-block; opacity:0; transition:all 0.4s;}
.section01.on01 .row01 .more,
.section01.on02 .row02 .more,
.section01.on03 .row03 .more {opacity:1; transition-delay:0.4s;}
.section01 .row .more:before,
.section01 .row .more:after {content:''; width:12px; height:18px; background:url('../img/main/sec01-more.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-9px; left:50%; margin-left:-6px; transition:all 0.2s;}
.section01 .row .more:hover:before {margin-left:-9px; opacity:0.6;}
.section01 .row .more:hover:after {margin-left:-3px;}
.section01 .row .txt {display:none;}
/* section02 */
.section02 .back-efft {position:absolute; z-index:-1;}
.section02 .back-efft.tl {left:-255px; top:-420px; animation: rotateCircle01 9s linear infinite;}
.section02 .back-efft.br {right:-355px; bottom:-480px; animation: rotateCircle02 11s linear infinite;}
@keyframes rotateCircle01 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
@keyframes rotateCircle02 {0% {transform: rotate(0deg);}100% {transform: rotate(-360deg);}}
.section02 .col {display:flex; align-items:center;}
.section02 .tit-box {width:100%; max-width:440px; filter:blur(10px); transition:all 0.6s; position:relative; transform:translateY(30%); opacity:0;}
.section02.active .tit-box {filter:blur(0); transition-delay:.4s; transform:translateY(0); opacity:1;}
.section02 .tit-box .tit {margin-bottom:56px;}
.section02 .tit-box .tit p {font-size:18px; line-height:1.8em; color:#163c6b; font-weight:700; font-family:'Montserrat'; margin-bottom:20px;}
.section02 .tit-box .tit h4 {font-size:52px; font-weight:600; color:#111; line-height:1.2em;}
.section02 .tabs li {padding-bottom:3px; border-bottom:1px solid #ddd; width:250px; margin-bottom:12px;}
.section02 .tabs li:last-child {margin-bottom:0;}
.section02 .tabs li a {display:block; line-height:65px; background:#fff; font-size:20px; color:#111; transition:all 0.6s; padding:0 20px; position:relative;}
.section02 .tabs li.active a {background:#163c6b; color:#fff;}
.section02 .tabs li a:hover {background:#163c6b; color:#fff;}
.section02 .tabs li a span {width:24px; height:24px; border:1px solid transparent; position:absolute; top:50%; margin-top:-12px; right:15px;}
.section02 .tabs li.active a span {border-color:rgba(180,192,207,0.5);}
.section02 .tabs li a span:before,
.section02 .tabs li a span:after {content:''; background:#ddd; position:absolute; top:50%; left:50%; transition:all 0.3s;}
.section02 .tabs li a span:before {width:12px; height:2px; margin-left:-6px; margin-top:-1px;}
.section02 .tabs li a span:after {width:2px; height:0;; margin-left:-1px; margin-top:0;}
.section02 .tabs li.active a span:after {height:12px; margin-top:-6px;}
.section02 .slide-box {width:1%; flex:1 1 auto; position:relative; height:520px;}
.section02 .tab-content {display:none;}
.section02 .tab-content.active {display:block;}
.section02 .slide-box .box {position:absolute; top:0; left:0; width:1320px; overflow:hidden; height:100%;}
.section02 .slide-box .swiper-slide {width:100%; max-width:390px;}
.section02 .slide-box .cnt {display:flex; align-items:center; position:absolute; bottom:0; left:0; width:100%; max-width:1000px;}
.section02 .slide-box .img-box {margin-bottom:24px;}
.section02 .slide-box .txt-box h4 {font-size:20px; margin-bottom:32px; line-height:1.6em; color:#111; font-weight:500; height:calc(1.6em * 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;}
.section02 .slide-box .txt-box p {font-size:16px; line-height:1.8em; color:#666; position:relative; padding-left:25px;}
.section02 .slide-box .txt-box p:before {content:''; width:14px; height:14px; background:url('../img/main/sec02-time.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-7px; left:0;}
.section02 .slide-box .btn {width:100%; max-width:150px;}
.section02 .slide-box .sec02-arrows {display:flex; width:90px; height:20px; justify-content:space-between; position:relative;}
.section02 .slide-box .sec02-arrows:after {content:''; width:2px; height:20px; background:#ddd; position:absolute; top:50%; margin-top:-10px; left:50%; margin-left:-1px;}
.section02 .slide-box .sec02-arrows > div {width:20px; height:20px; background-color:transparent; background-repeat:no-repeat; background-size:cover; font-size:0; border:0; cursor:pointer; position:relative; z-index:1;}
.section02 .slide-box .sec02-prev {background-image:url('../img/main/sec02-prev.jpg');}
.section02 .slide-box .sec02-next {background-image:url('../img/main/sec02-next.jpg');}
.section02 .slide-box .bar {width:1%; flex:1 1 auto;}
.section02 .slide-box .bar .sec02_progress {width:100%; height:6px; background:#e4e5e5; position:relative; overflow:hidden;}
.section02 .slide-box .bar .sec02_progress span {display:block; width:0%; height:100%; background:#163c6b; transition:width 1s linear; position:absolute; top:0; left:0;}
/* section03 */
.section03 .col {display:flex; flex-direction:column; width:100%;}
.section03 .inq {padding:200px 15px; width:100%; background:url('../img/main/sec03bg.jpg') center center no-repeat; background-size:cover; text-align:center;}
.section03 .inq p {font-size:18px; line-height:1.8em; color:#fff; font-family:'Montserrat'; font-weight:700; margin-bottom:24px; }
.section03 .inq h3 {font-size:52px; line-height:1.2em; color:#fff; font-weight:600; margin-bottom:66px;}
.section03 .inq .more a {display:inline-block; text-align:left; width:240px; line-height:80px; padding:0 45px; position:relative; font-size:20px; font-weight:600; color:#111; background:#f5b758; border-radius:40px;}
.section03 .inq .more a:after {content:''; width:10px; height:14px; background:url('../img/main/sec03-more.png') no-repeat; position:absolute; top:50%; margin-top:-7px; right:45px; transition:all 0.4s;}
.section03 .inq .more a:hover:after {right:55px;}
.section03 .inq p {filter:blur(10px); transition:all 0.6s; position:relative; transform:translateY(30%); opacity:0;}
.section03.active .inq p {filter:blur(0); transition-delay:.3s; transform:translateY(0); opacity:1;}
.section03 .inq h3 {filter:blur(10px); transition:all 0.6s; position:relative; transform:translateY(30%); opacity:0;}
.section03.active .inq h3 {filter:blur(0); transition-delay:.6s; transform:translateY(0); opacity:1;}
.section03 .inq .more {filter:blur(10px); transition:all 0.6s; position:relative; transform:translateY(30%); opacity:0;}
.section03.active .inq .more {filter:blur(0); transition-delay:.9s; transform:translateY(0); opacity:1;}
/* footer */
#sub #footer {border-top:1px solid #ddd;}
.footer {padding:70px 0;}
.footer .foot-col {display:flex; justify-content:space-between; align-items:center;}
.footer .foot-info {display:flex;}
.footer .foot-logo {width:100%; max-width:280px;}
.footer .foot-logo .logo {margin-bottom:28px;}
.footer .foot-logo ul {display:flex;}
.footer .foot-logo ul li {padding-right:8px;}
.footer .foot-logo ul li a {padding-top:6px; transition:all 0.4s;}
.footer .foot-logo ul li a:hover {padding-top:0; padding-bottom:6px;}
.footer .info {width:1%; flex:1 1 auto;}
.footer .info p {font-size:16px; line-height:1.8em; color:#666; white-space:nowrap;}
.footer .info p.copy {color:#999; margin-top:14px;}
.footer .info p span {margin:0 11px;}
.footer .info p br {display:none;}
.footer .foot-cnt ul li {margin-bottom:8px;}
.footer .foot-cnt ul li:last-child {margin-bottom:0;}
.footer .foot-cnt ul li a {display:block; width:180px; line-height:40px; background:#f6f7f8; padding:0 20px; font-size:16px; color:#999; position:relative; transition:all 0.4s;}
.footer .foot-cnt ul li a:hover {background:#999; color:#f6f7f8;}
.footer .foot-cnt ul li a:after {content:''; width:8px; height:10px; background:url('../img/layout/foot-i.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:15px; transition:all 0.4s;}
.footer .foot-cnt ul li a:hover:after {opacity:0.4;}