@charset "utf-8";

#wrapper {letter-spacing:-.02em; font-family:'Wanted Sans';}
/* main-visual */
.main-visual {position:relative; padding:0 80px;}
.main-visual .item {width:100%; height:100vh; overflow:hidden;}
.main-visual .item .secting-img {background-repeat:no-repeat; background-size:cover; background-position:center center; height:100%; border-radius:0 0 40px 40px;}
.main-visual .txt-box {position:absolute; width:100%; max-width:1030px; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff;}
.main-visual .txt-box p {font-size:28px; line-height:1.3em; font-weight:500; letter-spacing:.15em; margin-bottom:28px;}
.main-visual .txt-box h2 {font-size:65px; line-height:1.1em; font-weight:600; letter-spacing:-.03em;}
 .main-visual .visual-btn {position:absolute; bottom:60px; left:160px; z-index:11; display:flex; align-items:center;}
.main-visual .btn-wrap {margin-right:20px; position:relative;}
.main-visual .pro-bar {position:relative; width:40px; height:40px;}
.main-visual .pro-bar:before {content:''; width:40px; height:40px; position:absolute; bottom:0; left:0; border:3px solid rgba(255,255,255,0.2); border-radius:50%;}
.main-visual .pro-bar > div {width: 50%; height: 100%; position: absolute; top: 0; overflow: hidden; display: block;}
.main-visual .pro-bar > div span {width: 200%; height: 100%; border: 3px solid transparent; border-radius: 50%; position: absolute; top: 0; transform: rotate(-135deg); display: block;}
.main-visual .pro-bar  div.pro-right {right:0;}
.main-visual .pro-bar  div.pro-left {left:0;}
.main-visual .pro-bar.pro-ani  div.pro-right span {border-top: 3px solid #fff; border-right: 3px solid #fff; right: 1px; animation-name: pro-Right; animation-duration: 4.5s; animation-timing-function: linear; animation-fill-mode: forwards;}
.main-visual .pro-bar.pro-ani  div.pro-left span {border-bottom: 3px solid #fff; border-left: 3px solid #fff; left: 1px; animation-name: pro-Left; animation-duration: 4.5s; animation-timing-function: linear; animation-fill-mode: forwards;}
.main-visual .pro-ani .pro-right {0% {transform: rotate(-135deg);} 50%, 100% {transform: rotate(45deg);}}
.main-visual .pro-ani .pro-left {0%, 50% {transform: rotate(-135deg);}100% {transform: rotate(45deg);}}
@keyframes pro-Right {0% {transform: rotate(-135deg);} 50%, 100% {transform: rotate(45deg);}}
@keyframes pro-Left {0%, 50% {transform: rotate(-135deg);}100% {transform: rotate(45deg);}}
.main-visual .btn-wrap .btnw {width:100%; height:100%; background-repeat:no-repeat; background-size:auto; background-position:center center; cursor:pointer; position:absolute; top:0; left:0; 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 .page-wrap {width:90px; position:relative; height:30px;}
.main-visual .slick-arrow {width:8px; height:12px; position:absolute; background-repeat:no-repeat; background-size:cover; font-size:0; border:0; background-color:transparent; cursor:pointer; z-index:11; top:50%; margin-top:-6px;} 
.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;}
.main-visual .paging {display:flex; justify-content:center;}
.main-visual .paging li {display:none;}
.main-visual .paging li.slick-active {display:block;}
.main-visual .paging .count {font-size:18px; line-height:30px; color:#fff; font-weight:600;}
.main-visual .paging .num {font-size:14px; line-height:30px; color:#fff; opacity:0.6;}
.main-visual .scrolldown {position:absolute; right:160px; bottom:60px; padding-right:30px; height:10px;}
.main-visual .scrolldown:after {content:''; width:14px; height:14px; background:url('../img/main/scrolldown-icon.png') no-repeat; position:absolute; top:50%; margin-top:-7px; right:0; animation:shake-vertical 5s linear infinite both;}
@keyframes shake-vertical{0%,100%{transform:translateY(0)}10%,30%,50%,70%{transform:translateY(-6px)}20%,40%,60%{transform:translateY(6px)}80%{transform:translateY(3px)}90%{transform:translateY(-3px)}}
/* section */
.section-common .contain {width:100%;}
.sec-tit {margin-bottom:64px;}
.sec-tit p {font-size:22px; line-height:1.4em; color:#0c4da2; font-weight:700; margin-bottom:20px; opacity:0; transition:all 0.4s 0.6s;}
.sec-tit h3 {font-size:62px; line-height:1.1em; color:#000;opacity:0; transition:all 0.4s 0.8s;}
.section-common.on .sec-tit p {opacity:1;}
.section-common.on .sec-tit h3 {opacity:1;}


.fp-tableCell {padding-top:80px;}
#section0 .fp-tableCell {padding-top:0 !important;}
#section4 .fp-tableCell {padding-top:0 !important;}
#section5 .fp-tableCell {padding-top:0 !important;}
/* section01 */
.section01 .col {display:flex; margin:0 -8px;}
.section01 .col .row {width:25%; padding:0 8px; opacity:0; position:relative; top:100px;}
.section01.on .col .row {opacity:1; top:0;}
.section01 .col .row:nth-child(even) {padding-top:64px;}
.section01 .row:nth-child(1) {transition:all 0.4s 1.1s;}
.section01 .row:nth-child(2) {transition:all 0.4s 1.3s;}
.section01 .row:nth-child(3) {transition:all 0.4s 1.5s;}
.section01 .row:nth-child(4) {transition:all 0.4s 1.7s;}
.section01 .inner {height:460px; background-repeat:no-repeat; background-size:cover; background-position:center center; border-radius:20px; position:relative; overflow:hidden;}
.section01 .row:nth-child(1) .inner {background-image:url('../img/main/sec01-01.jpg');}
.section01 .row:nth-child(2) .inner {background-image:url('../img/main/sec01-02.jpg');}
.section01 .row:nth-child(3) .inner {background-image:url('../img/main/sec01-03.jpg');}
.section01 .row:nth-child(4) .inner {background-image:url('../img/main/sec01-04.jpg');}
.section01 .inner .tit {width:100%; position:absolute; bottom:66px; left:0; transition:all 0.4s; text-align:center;}
.section01 .inner:hover .tit {opacity:0;}
.section01 .inner .tit p {font-size:32px; font-weight:600; color:#333; line-height:1.2em;}
.section01 .inner .over {transition:all 0.6s; transform:translateY(100%); position:absolute; top:0; left:0; background:rgba(12,77,162,0.8); width:100%; height:100%; text-align:center; padding:144px 30px 30px; color:#fff;}
.section01 .inner:hover .over {transform:translateY(0); transition-delay:0.2s;}
.section01 .inner .over h4 {font-size:32px; line-height:1.2em; font-weight:500; margin-bottom:20px;}
.section01 .inner .over p {font-size:18px; line-height:1.6em; opacity:0.8; margin-bottom:40px;}
.section01 .inner .over span {display:inline-block; width:60px; height:60px; background:rgba(255,255,255,0.1); border-radius:50%; position:relative;}
.section01 .inner .over span:after {content:''; width:60px; height:60px; background:url('../img/main/sec01-more.png') no-repeat; background-size:cover; position:absolute; top:0; left:0;}

.section01 .inner .img {display:none;}
/* section02 */
.section02 {background:#f8f8f8;}
.section02 .sec-tit {margin-bottom:46px;}
.section02 .tab-menu {position:absolute; top:80px; right:15px; display:flex; opacity:0; transition:all 0.4s 1s;}
.section02.on .tab-menu {opacity:1;}

.section02 .tab-menu button {margin-left:8px; display:block; width:108px; line-height:48px; height:48px; border-radius:24px; text-align:center; background:#edeef0; font-size:16px; color:#333; cursor:pointer; border:0; transition:all 0.4s;}
.section02 .tab-menu button.active {background:#0c4da2; color:#fff;} 
.section02 .tab-menu button:hover {background:#0c4da2; color:#fff;} 
.section02 .tab-content {display:none; position:relative; overflow:hidden;}
.section02 .tab-content.active {display:block;}
.section02 .swiper-wrapper {margin-bottom:30px; height:480px;}
.section02 .swiper-slide {padding-top:20px; padding-bottom:0; transition:all 0.4s;}
.section02 .swiper-slide:hover {padding-top:0; padding-bottom:20px;}
.section02 .swiper-slide:hover .inner {box-shadow:5px 5px 10px rgba(6,37,77,0.1);}
.section02 .inner {padding:52px 50px 62px; border-radius:20px; border:1px solid #fff; background:#fff; transition:all 0.4s; position:relative;}
.section02 .inner:hover {border-color:#0c4da2;}
.section02 .inner h4 {font-size:26px; margin-bottom:22px; line-height:1.4em; color:#333; font-weight:500; height:calc(1.4em * 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; transition:all 0.4s;}
.section02 .inner:hover h4 {color:#0c4da2;}
.section02 .inner p {font-size:18px; margin-bottom:106px; line-height:1.6em; color:#666; height:calc(1.6em * 1 * 4); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
.section02 .inner .date {display:block; font-size:18px; line-height:1.6em; color:#999; position:relative; padding-left:26px;}
.section02 .inner:hover .date {color:#0c4da2;}
.section02 .inner .date:before {content:''; width:16px; height:16px; background-image:url('../img/main/sec02-date.png'); position:absolute; top:50%; margin-top:-8px; left:0; background-repeat:no-repeat; background-size:cover;}
.section02 .inner:hover .date:before {background-image:url('../img/main/sec02-date-on.png');}
.section02 .inner span {width:60px; height:60px; background:url('../img/main/sec02-more.png') no-repeat; background-size:cover; border-radius:50%; position:absolute; bottom:50px; right:50px; opacity:0; transition:all 0.4s;}
.section02 .inner:hover span {opacity:1;}

.section-common .btn-wrap {display:flex; align-items:center;}
.section-common .btn-wrap .porg {width:1%; flex:1 1 auto; padding-right:30px; height:3px;}
.section-common .swiper-pagination-progressbar {background:#d4d4d4; height:3px; width:100%; position:relative;}
.section-common .swiper-pagination-progressbar-fill {background:#0c4da2;}
.section-common .btn-wrap .btn {width:100%; max-width:140px; display:flex; justify-content:flex-end;}
.section03.section-common .btn-wrap .btn {max-width:90px;}
.section-common .btn-wrap .btn div {width:40px; height:40px; border-radius:50%; background:#fff; margin-right:5px; cursor:pointer; position:relative; transition:all 0.4s;}
.section-common .btn-wrap .btn div:hover {background:#0c4da2;}
.section-common .btn-wrap .btn div:after {content:''; width:40px; height:40px; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:0; transition:all 0.4s; background-position:center center;}
.section-common .btn-wrap .btn .prev:after {background-image:url('../img/main/sec02-prev.png');}
.section-common .btn-wrap .btn .next:after {background-image:url('../img/main/sec02-next.png');}
.section-common .btn-wrap .btn .prev:hover:after {background-image:url('../img/main/sec02-prev-on.png');}
.section-common .btn-wrap .btn .next:hover:after {background-image:url('../img/main/sec02-next-on.png');}


.section-common .btn-wrap .btn .more {width:40px; height:40px; border-radius:50%; background:#ddd; margin-left:10px; transition:all 0.4s; position:relative;}
.section-common .btn-wrap .btn .more:hover {background:#0c4da2;}
.section-common .btn-wrap .btn .more:before,
.section-common .btn-wrap .btn .more:after {content:''; position:absolute; top:50%; left:50%; background:#fff; transition:all 0.4s;}
.section-common .btn-wrap .btn .more:before {width:12px; height:2px; margin-top:-1px; margin-left:-6px;}
.section-common .btn-wrap .btn .more:after {width:2px; height:12px; margin-top:-6px; margin-left:-1px;}
/* section03 */
.section03 .swiper {overflow:hidden; position:relative;}
.section03 .swiper-wrapper {margin-bottom:30px;}
.section03 .swiper-slide {padding-top:20px; transition:all 0.4s; padding-bottom:0;}
.section03 .swiper-slide:hover {padding-top:0; padding-bottom:0;}
.section03 .inner {display:flex; align-items:center; justify-content:center; padding:46px 62px; border:1px solid #ddd; background:#f8f8f8; border-radius:20px; position:relative; overflow:hidden;}
.section03 .swiper-slide:hover .inner {box-shadow:5px 5px 10px rgba(6,37,77,0.1);}
.section03 .img-box {width:100%; max-width:260px;}
.section03 .img-box .pic {position:relative; height:0; padding-bottom:141.54%; overflow:hidden; transition:all 0.6s; box-shadow:0 0 10px 5px rgba(219,220,221,0.75);}
.section03 .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
 .section03 .inner .over {position:absolute; top:0; left:0; opacity:0; width:100%; height:100%; transition:all 0.4s; background:rgba(12,77,162,0.8); z-index:1;}
.section03 .swiper-slide:hover .inner .over {opacity:1;}
 .section03 .inner .over .icon {position:absolute; top:-4px; left:-12px; opacity:0.07;}
.section03 .inner .over .more {position:absolute; bottom:50px; right:50px;}
 .section03.section-common .btn-wrap .btn > div {border:1px solid #ddd;}
.section03.section-common .btn-wrap .btn > div:hover {border-color:#0c4da2;}
.section03.section-common .btn-wrap .btn > div:after {top:-1px; left:-1px;}
/* section04 */
.section04 {background:rgba(12,77,162,0.05);}
.section04 .col {display:flex; align-items:center;}
.section04 .tit-box {width:1%; flex:1 1 auto;}
.section04 .sec-tit {margin-bottom:62px; padding-bottom:62px; border-bottom:1px solid #ddd; position:relative;}
.section04 .sec-tit:after {content:''; width:40px; height:3px; background:#0c4da2; position:absolute; bottom:-2px; left:0; border-radius:2px; z-index:11;}

.section04 .txt {position:relative; opacity:0; transition:all 0.4s 1s;}
.section04.on .txt {opacity:1;}
.section04 .txt dl {display:flex; font-size:18px; line-height:1.8em; margin-bottom:6px;}
.section04 .txt dl:last-child {margin-bottom:0;}
.section04 .txt dt {width:100%; max-width:45px; font-weight:600; color:#333;}
.section04 .txt dd {width:1%; flex:1 1 auto; color:#666;}
.section04 .txt dd a {display:inline-block;}
.section04 .txt ul {margin-top:66px; display:flex;}
.section04 .txt ul li {padding-right:8px;} 
.section04 .txt ul li a {display:block; width:264px; border-radius:5px; padding:0 32px; font-size:16px; line-height:64px; color:#fff; transition:all 0.4s; position:relative; overflow:hidden;}
.section04 .txt ul li a:hover {padding:0 20px;}
.section04 .txt ul li:nth-child(1) a {background:#0c4da2;}
.section04 .txt ul li:nth-child(2) a {background:#000;}
.section04 .txt ul li a:before {content:''; width:22px; height:22px; display:inline-block; vertical-align:middle; margin-top:-2px; margin-right:10px; background-repeat:no-repeat; transition:all 0.4s;}
.section04 .txt ul li:nth-child(1) a:before {background-image:url('../img/main/sec04-tel.png');}
.section04 .txt ul li:nth-child(2) a:before {background-image:url('../img/main/sec04-map.png');}
.section04 .txt ul li a:hover:before {margin-right:15px;}

.section04 .txt ul li a:after {content:''; width:64px; height:64px; position:absolute; top:0; right:0; background-image:url('../img/main/sec04-more.png'); background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.4s;}
.section04 .txt ul li:nth-child(1) a:after {background-color:#0d438b;}
.section04 .txt ul li:nth-child(2) a:after {background-color:#1b1b1b;}


.section04 .map-box {width:100%; max-width:940px; background:#fff; border-radius:20px; padding:7px; box-shadow:0 0 20px rgba(208,212,218,0.5); opacity:0; transition:all 0.4s 1.4s; transform:translateX(100px); position:relative;}
.section04.on .map-box {opacity:1; transform:translateX(0);}


.section04 .map-box .root_daum_roughmap {width:100% !important; height:566px !important; border-radius:20px;}
.section04 .map-box .root_daum_roughmap .wrap_map {height:566px !important;}
.section04 .map-box .root_daum_roughmap .map_border {border:0 !important; width:0 !important; height:0 !important;}
/* footer */
#footer {padding:84px 0; border-top:1px solid #ddd;}
.foot-col {display:flex; align-items:center;}
.foot-logo {width:100%; max-width:350px;}
.foot-cnt {width:1%; flex:1 1 auto;}
.foot-cnt .info {padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #ddd;}
.foot-cnt .info p {font-size:16px; line-height:1.8em; color:#999;}
.foot-cnt .info p span {margin:0 4px;}
.foot-cnt .info p br {display:none;}
.foot-cnt .cnt {display:flex; align-items:center; justify-content:space-between;}
.foot-cnt .cnt p {font-size:15px; line-height:1.8em; color:#999;}
.foot-cnt .cnt ul {display:flex; margin:0 -14px;}
.foot-cnt .cnt ul li {padding:0 14px; position:relative;}
.foot-cnt .cnt ul li:after {content:''; width:2px; height:12px; background:#999; position:absolute; right:-1px; top:50%; margin-top:-6px;}
.foot-cnt .cnt ul li:last-child:after {display:none;}
.foot-cnt .cnt ul li a {font-size:16px; line-height:1.6em; color:#999;}

.scrolltop {position:fixed; bottom:160px; right:80px; z-index:11;}


body.scrolled #header {transform:translateY(-100%);}

.fp-viewing-PRODUCT #header,
.fp-viewing-NEWS #header,
.fp-viewing-PATENTS #header,
.fp-viewing-LOCATION #header {background:rgba(0,0,0,0.3);}




#fp-nav {position:fixed; top:50%; left:36px;}
#fp-nav ul {}
#fp-nav ul li {margin-bottom:44px;}
#fp-nav ul li:last-child {display:none;}
#fp-nav ul li:last-child {margin-bottom:0;}
#fp-nav ul li a {display:block; width:8px; height:8px; background:#d4d4d4; border-radius:50%; transition:all 0.4s; position:relative;}
#fp-nav ul li a.active {background:#0c4da2;}
#fp-nav ul li a:after {content:''; width:20px; height:20px; position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-10px; background:rgba(12,77,162,0.2); border-radius:50%; opacity:0; transition:all 0.4s;}
#fp-nav ul li .active:after {opacity:1;}

.fp-viewing-FOOTRE #fp-nav {display:none;}