@charset "utf-8";

/* 
* main CSS Document
* KOWEB
*/

.main_visual,
.main_visual .slick-list,
.main_visual .slick-track, .visual_area, 
.main_visual .img {height:100%;}

#section1 {background:url(/images/main/product_bg.jpg)no-repeat center/cover;}
#section3 {background: url(/images/main/order_bg.jpg)no-repeat center/cover;}

.main_visual .list.slick-active .img {animation:visualScale 8s ease 0s forwards;}

@keyframes visualScale{
	0%{transform:scale(1.13) rotate(.001deg);}
	100%{transform:scale(1) rotate(.001deg);}
}

.main_visual .list {overflow: hidden;}
.main_visual .list .text {position:absolute; top:55%; left:100px; transform: translateY(-50%); z-index:1;}
.main_visual .list .text span {display:block; color:#fff; font-size:46px; font-family:'Montserrat'; font-weight: 600; animation: fadeup 1s;}
.main_visual .list .text b {color:#00ccff; font-weight: 600;}


.main_visual .list .text p {position: relative; padding-left:220px; font-size:20px; color:#fff; font-weight: 200; line-height: 1.8em; margin-top:15px; animation: fadeup 1s forwards; animation-delay: 0.5s; opacity: 0;}
.main_visual .list .text p::before {content:''; position:absolute; left:0; top:18px; width:180px; height:2px; background:#fff; vertical-align: middle;}

.main_visual .slick-arrow {position:absolute; z-index:1; bottom:80px; font-size:0; border:1px solid #fff; width:46px; height:46px; transition: 0.3s;}
.main_visual .slick-next {background:url(/images/common/main_arrow_next.png)no-repeat center; right:190px;}
.main_visual .slick-prev {background:url(/images/common/main_arrow_prev.png)no-repeat center; right:245px;}
.main_visual .slick-arrow:hover {background-color:rgba(255, 255, 255, 0.2)}

#scroll_ani {position: fixed; bottom:0px; right:48px; z-index:1; height:auto;  padding-bottom:200px;}
.fp-viewing-5 #scroll_ani {display:none;}
#scroll_ani .img {width:15px; height:100px; background:url(/images/main/scroll_ani_text_b.png)no-repeat center;}
#scroll_ani i {position: absolute; bottom:0; right:calc(50% - 1px); width:2px; height:170px; background: rgba(0, 0, 0, 0.2); vertical-align: middle; overflow: hidden;}
#scroll_ani i:after {content:''; position: absolute; bottom:0; right:calc(50% - 1px); width:2px; height:170px; background: #555; vertical-align: middle; animation: scrollbar 3s infinite ease-in-out;}

body.fp-viewing-white #scroll_ani i {background:rgba(255, 255, 255, 0.3);}
body.fp-viewing-white #scroll_ani .img { background:url(/images/main/scroll_ani_text.png)no-repeat center;}
body.fp-viewing-white #scroll_ani i:after {background:#fff;}
body.fp-viewing-footer #scroll_ani {display:none;}

@keyframes scrollbar {
    0% {transform: translateY(-170px);}
    100% {transform: translateY(170px);}
}

.product_area {height:100%; background:url(/images/main/section1_bg.png)no-repeat left bottom;}
.product_area .text {position: absolute; top:50%; transform: translateY(-50%); left:100px; z-index:2}
.product_area .text span {display:block; font-size:22px; color:#007db6; font-family:'Montserrat'; font-weight: 700; margin-bottom:50px; line-height: 1em;}
.product_area .text p {font-size:100px; color:#000; font-family:'Montserrat'; font-weight: 600; text-transform: uppercase; line-height: 1em;}
.product_area .text a.btn_more {position: relative; display:block; border:1px solid #dcdcdc; font-size: 18px; color:#000; padding:20px 0; width:300px; text-align: center; margin-top:70px; overflow: hidden;}
.product_area .text a.btn_more:before {content:''; position:absolute; left:0; top:0; width:120%; height:100%; background:#122b3c; z-index:-1; transition: 0.5s;-ms-transform:translateX(-101%) skewX(-17.62deg);-webkit-transform:translateX(-101%) skewX(-17.62deg);-webkit-transform-origin:right top; -ms-transform-origin:right top;}
.product_area .text a.btn_more:hover:before {transform:translateX(0) skewX(-17.62deg); transform-origin: left top;}
.product_area .text a.btn_more:hover {color:#fff;}
.product_area .text a.btn_more:after {content:''; display:inline-block; width:20px; height:15px; background:url(/images/common/btn_arrow.png)no-repeat center; margin-left:10px; vertical-align: middle;}
.product_area .text a.btn_more:hover:after {background:url(/images/common/btn_arrow_hover.png)no-repeat center;}
.product_area .ani {height:100%; width:100%; overflow: hidden;}
.product_area .ani .circle_ani01 {position: absolute; top:3%; right:40%; animation: maincircle01 2.5s infinite alternate-reverse;}
.product_area .ani .circle_ani02 {position: absolute; top:20%; right:5%; z-index: 1; animation: maincircle02 5s linear infinite alternate-reverse; -ms-animation: maincircle02 3s linear infinite alternate-reverse;}
.product_area .ani .circle_ani03 {position: absolute; bottom:2%; right:30%; animation: maincircle03 2s linear infinite alternate-reverse;}

@keyframes maincircle01 {
    0%{transform: translate(0%, 0%);}
    100%{transform: translate(-1%, -5%);}
}

@keyframes maincircle02 {
    0%{transform: translate(0%, 0%);}
    100%{transform: translate(2%, -3%);}
}

@keyframes maincircle03 {
    0%{transform: translate(0);}
    100%{transform: translate(-1%, -2%);}
}

#section2 {background:url(/images/main/section2_bg.jpg)no-repeat; background-size:cover}

.vision_area {margin-top: 100px;}
.vision_area h2 {text-align: center; margin-bottom:140px;}
.vision_area h2 span {font-size:42px; font-family: 'Montserrat'; text-transform: uppercase; color:#fff; font-weight: 700;}
.vision_area h2 p {margin-top:10px; font-size:22px; color:#fff; font-weight: 300;}
.vision_area .info {position: relative; display:flex; justify-content: center;}
.vision_area .info > div {display:flex; flex-direction:column; text-align: center; width:300px; margin:0 50px;}
.vision_area .info > div i {position: relative; display:block; margin:0 auto; width:100px; height:100px; border:2px solid #fff; border-radius: 50%;}
.vision_area .info:before {content:''; position:absolute; transform: translateX(-50px); width:300px; height:3px; background:url(/images/main/section3_line.png); right:50%; top:50px;}
.vision_area .info:after {content:''; position:absolute; transform: translateX(50px); width:300px; height:3px; background:url(/images/main/section3_line.png); left:50%; top:50px;}
.vision_area .info > div i img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.vision_area .info > div span {display:block; color:#fff; font-family: 'Montserrat'; text-transform: uppercase; font-size:26px; margin:50px 0 30px;}
.vision_area .info > div span em {color:#93d0ec; margin-left:20px;}
.vision_area .info > div span b {margin-right:20px;}
.vision_area .info > div span b img {vertical-align: middle; margin-top:-5px;}
.vision_area .info > div p {color:#fff; font-size:18px;}

#section3 {padding:0px 100px 0 100px; background:#232323;}
.solution_area {display:flex; position: relative; height:100%; align-items:flex-end;}
.solution_area .title {position:absolute; top:20%; left:10%;}
.solution_area .title h2 {font-size:18px; color:#fff; font-family: 'Montserrat'; text-transform: uppercase; font-weight: 600;}
.solution_area .title span {display:block; font-size:32px; color:#fff; margin-top:35px; font-weight: 600;}
.solution_area .part {position: relative; width:calc(100% / 3); height:calc(100% - 100px); display:flex; align-items: center; justify-content: center;  text-align: center; border-left:1px solid rgba(200, 200, 200, 0.1); cursor: pointer; overflow: hidden;}
.solution_area .part .box-on {display:flex; align-items: center; justify-content: center; width:100%; height:100%; position: absolute; bottom:-30%; transition: 0.8s; left:0;}
.solution_area .part .box-basic {transform: translateY(120px);}
.solution_area .part .box-basic span {display:block; font-size:26px; color:#fff; font-family: 'Montserrat', 'Noto Sans KR'; font-weight:600; margin-top:30px;}
.solution_area .part:hover .box-on {bottom:0;}
.solution_area .part1:after {content:''; width:100%; height:100%; position: absolute; left:0; top:0; background:url(/images/main/section4_bg01.jpg)no-repeat center; background-size:cover;} 
.solution_area .part2:after {content:''; width:100%; height:100%; position: absolute; left:0; top:0; background:url(/images/main/section4_bg02.jpg)no-repeat center; background-size:cover;} 
.solution_area .part3:after {content:''; width:100%; height:100%; position: absolute; left:0; top:0; background:url(/images/main/section4_bg03.jpg)no-repeat center; background-size:cover;} 
.solution_area .part:after {opacity: 0; transition: 0.3s; z-index:0;}
.solution_area .part:hover:after {opacity: 1;}
.solution_area .part .box-on img {max-width:90%; width:100%; z-index:1; opacity: 0; transition: 0.5s;}
.solution_area .part:hover .box-on img {opacity: 1;}

#section4 {background:#d5d8dd; overflow: hidden;}
#section4 .inner {position: relative; width:1340px;}
#section4 .text {z-index: 1;}
#section4 .map {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#section4 .ani {width:8px; height:8px; background:rgba(237, 27, 35, 0.3); border-radius: 50%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); margin-left:-10.6%; margin-top:-2.5%;}
#section4 .ani > div {background:rgba(237, 27, 35, 0.5); border-radius: 50%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); animation: map_pointer 2s infinite ease-in-out;}
#section4 .ani > div:nth-child(1) {width:42px; height:42px; opacity: 0.2; z-index:-1;}
#section4 .ani > div:nth-child(2) {width:76px; height:76px; opacity: 0.15; z-index:-1;}
#section4 .ani > div:nth-child(3) {width:118px; height:118px; opacity: 0.15; z-index:-1;}
#section4 .ani > div:nth-child(4) {width:172px; height:172px; opacity: 0.09; z-index:-1;}
#section4 .ani > div:nth-child(5) {width:227px; height:227px; opacity: 0.12; z-index:-1;}

@keyframes map_pointer {
    0% {transform:translate(-50%, -50%) scale(0);}
    100% {transform:translate(-50%, -50%) scale(1);}
}

#section4 .text {position: absolute; left:0; top:17%;}
#section4 h2 {color:#333; font-family: 'Montserrat'; font-size:56px; text-transform: uppercase; line-height: 1em; font-weight:800;}
#section4 h3 {font-family: 'Montserrat'; color:#467fb0; font-size:80px; line-height: 1em; margin-top:40px;}
#section4 h3 b {display:block; color:#2a567b;}
#section4 ul {display:flex; position: absolute; bottom:12%; right:0;}
#section4 ul li {position:relative; margin-left:100px;}
#section4 ul li em {position:absolute; top:-40px; left:-20px; font-family: 'Montserrat'; font-size:52px; color:#a5b2be; font-weight:500;}
#section4 ul li span {position: relative; display:block; font-size:20px; color:#222; margin-bottom:15px;}
#section4 ul li p {font-size:18px; color:#666;}