@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */
/* 메인타이틀 */
#header{position: absolute; width: 100%; z-index: 900;  top: 0; left: 0;}
.main .title h3.tt{font-family: 'Orbitron', sans-serif; font-size: 64px; color: #222; font-weight: 900; text-transform: uppercase;}
.main .title h3.tt + p{margin-top: 21px;}
.main .title p{font-size: 18px; line-height: 30px; color: #444;}

.linkA{ font-weight: bold; font-size: 15px;font-family: 'Orbitron', sans-serif; display: flex; align-items: center;}
.linkA i{width: 25px; height: 12px; display: inline-block; margin-left: 12px;}
.linkA i img{width: 100%;}

.area_side{width: 8.3333%;position: absolute;background-color: transparent; transition: all .3s; z-index: 10; left: 0;height: 100%;top: 0;display: flex;align-items: center;flex-direction: column;justify-content: center;}
.area_side *{transition: all .6s;}
.m_side{text-align: center; display: flex; align-items: center; transform: rotate(-90deg);}
.m_side i.dot{display: block;}
.m_side i.dot + i.dot{margin-left: 25px;}
.m_side > span.point{display: flex; align-items: center; margin-right: 25px; margin-left: 25px; font-weight: 700;}
.m_side i.dot{width: 5px; height: 5px; border-radius: 20px; background-color: #222; opacity: 0.52; }
.m_side i.bar{width: 0; height: 1px; background-color: #a5aab0; position: relative;overflow: hidden; }
.m_side i.bar:before{display:block;content:"";position: absolute; left:0; top:0; width: 100%; height: 1px;background: #222;animation: scrollMove 2s ease-in infinite; -webkit-animation:scrollMove 2s ease-in infinite}

@keyframes scrollMove {
    0% {
      left:100%;
    }
    100% {
      left: -100%;
    }
  }
.m_side i.number{font-size: 11px; font-family: 'Orbitron', sans-serif; transform: rotate(90deg);}
.m_side em{ font-size: 11px; font-family: 'Orbitron', sans-serif; display: block; }
.m_product .area_side{background-color: #fff;}
.m_product .m_side{width: 221px;}
.m_grobal .m_side{width: 267px;}
.m_medianews .m_side{width: 273px;}
.m_grobal .m_side em{color: #fff;}
.m_grobal .m_side i.dot{background-color: #fff;}
.m_grobal .m_side i.number{color: #fff;}
.m_grobal .area_side{background-color: transparent;}
.m_medianews .area_side::before{content: ""; width: 1px; height: 100%; background-color: #262626; position: absolute; left: 50%; top: 0; opacity: 0.05; margin-left: 0;}

.fp-section.active .m_side i.bar{width: 32px; margin:0 16px; transition-delay: .4s;}
.fp-section.active .m_side i.number{}

/* 메인비주얼 */
.area_mainvisual{position: relative;}
.area_mainvisual .visual .list li{position: relative; z-index: -1;}
.area_mainvisual .visual .list li span{display: block; height: 100vh; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }
.textBox{width: 100%; box-sizing: border-box; margin: 0 auto; position: absolute; left:50%; top: 47%; transform: translate(-50%,-50%); z-index: 2;}
.textBox h2{color: #222; font-size: 67px; font-family: 'Orbitron', sans-serif; font-weight: 900; line-height: 1.2;}
.textBox strong{display: block; font-weight: 800; color: #222; font-size: 24px;  display: block;} 
.textBox .cont{margin-top: 36px; color: #666;}
.textBox .cont em{font-size: 20px; display: block;}
.textBox .cont p{font-size: 18px;}
.textBox a{margin-top: 70px; width: 168px; height: 55px; box-sizing: border-box; border:1px solid #222; font-family: 'Orbitron', sans-serif; font-size: 14px; text-align: center; font-weight: 700; line-height: 54px; display: inline-block; transition: all .3s;}
.textBox a:hover{background-color: #222; color: #fff;}
.hidden_v2{overflow: hidden; display: block;}
.hidden_v2 *{opacity:0; transform:translate3d(0, 80%, 0);}
.fp-section.active .slick-slide.slick-active .hidden_v2 *{animation:textUp 0.7s ease 0.3s forwards;}

@keyframes textUp{
    0%{transform: translate3d(0, 60px, 0);opacity: 0;}
	100%{transform: translate3d(0, 0, 0);opacity: 1;}
}

.area_mainvisual .thumb{position: absolute; bottom: 0; right: 0; display: flex; width: 100%; z-index: 999; box-sizing: border-box; padding-left: 8.333333%;}
.area_mainvisual .nav button{width:100px; box-sizing: border-box;  height: 100px; font-size: 0; text-indent: -99999999px; display: inline-flex; align-items: center; justify-content: center;}
.area_mainvisual .nav button i{width: 20px; height: 17px; display: block;}
.area_mainvisual .nav button.prev{background-color: #fff;}
.area_mainvisual .nav button.prev i{transform: rotate(180deg); background: url(/images/common/arrow_v1_b.svg) no-repeat; background-size: cover;}
.area_mainvisual .nav button.next{background-color: #146ab4;}
.area_mainvisual .nav button.next i{ background: url(/images/common/arrow_v1_w.svg) no-repeat; background-size: cover;}
.area_mainvisual .thumb .list {box-sizing: border-box;width: calc(100% - 200px);}
.area_mainvisual .thumb .list{display: flex;}
.area_mainvisual .thumb .list li{display: flex; cursor: pointer; position: relative; width: 16.6666%; height: 100px; background-color: rgba(255,255,255,0.3); align-items: center; justify-content: center; }
.area_mainvisual .thumb .list li div{box-sizing: border-box; padding:0 42px ; display: flex;}
.area_mainvisual .thumb .list li::before{content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #fff;}
.area_mainvisual .thumb .list li *{font-family: 'Orbitron', sans-serif;}
.area_mainvisual .thumb .list li i{font-size: 14px; font-weight: 700; color: #d2d2d2;}
.area_mainvisual .thumb .list li span{font-size: 15px; color: #222; font-weight:600; margin-left: 12px;}
.area_mainvisual .thumb .list li.on{ background-color: rgba(255,255,255,0.7);}
.area_mainvisual .thumb .list li.on span,.area_mainvisual .thumb .list li:hover span{color: #1d6bae;}
.area_mainvisual .thumb .list li.on i{color: rgba(66,129,183,0.38);}

@media all and (min-width:1921px){
    .area_mainvisual .textBox{padding-left: 8.3333%; }
}
@media all and (max-width:1920px){
    .area_mainvisual .textBox{max-width: 1680px; padding:0 40px; }
    .area_mainvisual .thumb{padding-left: 160px;}
}

/* 제품 */
.fp-viewing-2Page  #header{background-color: #fff;}
.area_product{width: 100%; height: 100vh; position: relative;  overflow: hidden;}
.area_product::before{content: ""; width: 100%; height: 100%; position: absolute; background: url(/images/main/img_main2.jpg) no-repeat; background-size: cover; background-position: 50% 50%; transition-duration:1s; transform: scale(1.3); transition-delay: .4s;}
.area_product *{color: #fff; }
.area_product .inner{}
.area_product .title{position: absolute; z-index: 2; top: 211px; width: 100%; padding-left: 40px; box-sizing: border-box;}
.area_product .title h3.tt{color: #fff;}
.area_product .title p{color: #fff; opacity: 0.6;}
.area_product .list{display: flex; height: 100%; justify-content: center;}
.area_product .list > li{width: 25%; display: flex;  position: relative; justify-content: center; border-right:1px solid rgba(255,255,255,0.09) ; position: relative;}
.area_product .list > li::before{width: 100%; height: 0; background-color: rgba(10,65,113,0.33); content: ""; position: absolute; bottom: 0; left: 0; }
.area_product .list > li .box{padding:0 40px; box-sizing: border-box; width: 100%; position: absolute; top: 50%;} 
.area_product .list > li i{width: 25px; height: 12px; display: inline-block; margin-left: 12px;}
.area_product .list > li i img{width: 100%;}
.area_product .list > li span.num{font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 600;}
.area_product .list > li strong{display: block; font-size: 34px; font-weight: 700; margin-top: 69px; margin-bottom: 62px;}
.area_product .list > li:nth-child(1) strong{font-family: 'Orbitron', sans-serif; margin-bottom: 60px;}
.area_product .list > li a.linkA{transform: translateY(30px); opacity: 0; visibility:hidden; transition: all .3s;}
.area_product .list > li a.linkA span{font-size: 14px; color: #80d127; font-family: 'Orbitron', sans-serif; }
.area_product .list > li:hover a.linkA{opacity: 1; visibility: visible; transform: translateY(0);}
.area_product .list > li:hover::before{height:100%}
.area_product .list > li a.linkA span:hover{letter-spacing: 1.45px; transition: all .3s;}
.fp-section.active .area_product::before{transform: scale(1); }

/* 글로벌 */
.fp-viewing-3Page  #header nav .gnb > li > a{color: #fff;}
.m_grobal{width: 100%; overflow: hidden; }
.m_grobal::before{content: ""; width: 100%; height: 100%; position: absolute; left: 0; top:0; background: url(/images/main/img_main3.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;  transition-duration:1s; transform: scale(1.3); transition-delay: .4s;}
.m_grobal .inner{display: flex; align-items: center;}
.area_grobal{position: relative;}
.area_grobal .title h3.tt{color:#fff;}
.area_grobal .title  p{opacity: 0.6; color:#fff}
.area_grobal .link_btn a{border:1px solid #fff; color: #fff; margin-top: 149px; box-sizing: border-box; height: 100px; width:300px; display: flex; align-items: center; justify-content: center; transition: all .3s;}
.area_grobal .link_btn a:hover{background-color: #fff; color: #146ab4; letter-spacing:2px;}
.fp-section.active.m_grobal::before{transform: scale(1); }

/* 뉴스 */
.m_medianews .inner{display: flex; align-items: center;}
.area_medianews{width: 100%;}
.area_medianews *{box-sizing: border-box; }
.area_medianews .linkA{position: absolute; right: 0; top:-79px;  color:#222;transition: all .4s; }
.area_medianews .linkA:hover{opacity: 0.4; letter-spacing: 1.4px;}
.area_medianews .listBox{position: relative; margin-top: 60px;}
.area_medianews .listBox ul{display: flex; margin-left: -14px; margin-right: -14px;}
.area_medianews .listBox ul > li{width: 33.333%; padding:0 14px;}
.area_medianews .listBox ul > li *{transition: all .4s;}
.area_medianews .listBox ul > li > a{border: 1px solid #ddd; padding: 50px 30px 65px; display: block; }
.area_medianews .listBox ul > li > a span.date{font-family: 'Orbitron', sans-serif; font-weight: 600; color: #363636; opacity: 0.36; display: block; margin-bottom: 38px;}
.area_medianews .listBox ul > li > a em{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; font-weight: 600; color: #222;}
.area_medianews .listBox ul > li  div{overflow: hidden; margin-top: 23px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 26px;  height: 48px;}
.area_medianews .listBox ul > li:hover a{border-color: #146ab4;}
.area_medianews .listBox ul > li:hover em{color: #146ab4;}
c
/* .fp-section.active .area_product .title *,.fp-section.active .area_product .list > li .box{opacity: 1; visibility: visible; transform: translateY(0);}
.fp-section.active .title h3{transition-delay:.4s; }
.fp-section.active .title p{transition-delay:.7s; opacity: 0.6;}
.fp-section.active .area_product .list > li:nth-child(1) .box{transition-delay:.6s}
.fp-section.active .area_product .list > li:nth-child(2) .box{transition-delay:.7s}
.fp-section.active .area_product .list > li:nth-child(3) .box{transition-delay:.8s}
.fp-section.active .area_product .list > li:nth-child(4) .box{transition-delay:.9s}
.fp-section.active .area_grobal .title *,.fp-section.active .area_grobal .link_btn a{opacity: 1; visibility: visible;transform: translateY(0);}
.fp-section.active .area_grobal .link_btn a{transition-delay:.9s}
.fp-section.active .area_medianews .title *,.fp-section.active .area_medianews .listBox{opacity: 1; visibility: visible; transform: translateY(0);}
.fp-section.active .area_medianews .listBox{transition-delay:.9s} */


@media all and (max-width:1800px){
    .area_side{width: 90px;}
    .area_product .title{top: 120px;}
    .area_mainvisual .thumb{padding-left: 0;}
    .area_mainvisual .thumb .list li div{padding: 0;}
}
 @media all and (max-width:1680px){
    .area_product .list > li .box{top: 44%;}
 }
 @media all and (max-width:1600px){
    .area_side{display: none;}


    .area_product .title{top: 160px;}
    .area_product .list > li .box{top: 50%;}
    .area_product .inner{padding:0}
    .area_product .list > li:last-child{border-right:0;}
 }
 @media all and (max-width:1440px){}
 @media all and (max-width:1400px){
    .main .title h3.tt{font-size: 54px;}
 }
 @media all and (max-width:1366px){}
 @media all and (max-width:1280px){
    .area_product .list > li strong{font-size: 28px;}
    .area_product .list > li .box{padding: 0 30px}

    .textBox h2{font-size: 52px;}
    .area_mainvisual .thumb .list li div{display: block;}
    .area_mainvisual .thumb .list li i{display: block}
    .area_mainvisual .thumb .list li span{margin-left: 0;}

    .area_mainvisual .thumb .list li span{font-size: 13px; }
 }
 @media all and (min-width:1025px){

 }

 @media all and (max-width:1024px){
    .inner{padding:0 20px}
    .main .title h3.tt{font-size: 48px;}
    .main .title h3.tt + p{margin-top: 12px;}

    .area_mainvisual .visual .list li:nth-child(1) span{background-image: url(/images/main/img_main_mo01.jpg)!important; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }
    .area_mainvisual .visual .list li:nth-child(2) span{background-image:  url(/images/main/img_main_mo02.jpg)!important; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }
    .area_mainvisual .visual .list li:nth-child(3) span{background-image:  url(/images/main/img_main_mo03.jpg)!important; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }
    .area_mainvisual .visual .list li:nth-child(4) span{background-image:  url(/images/main/img_main_mo04.jpg)!important; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }
    .area_mainvisual .visual .list li:nth-child(5) span{background-image:  url(/images/main/img_main_mo05.jpg)!important; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }
    .area_mainvisual .visual .list li:nth-child(6) span{background-image:  url(/images/main/img_main_mo06.jpg)!important; background-repeat: no-repeat; background-position: 72% 50%; background-size: cover; }

    .area_mainvisual .thumb{display: block;}
    .area_mainvisual .thumb .list{width: 100%;}
    .area_mainvisual .thumb .list li{padding:0 12px; box-sizing: border-box;}
    .area_mainvisual .nav button{width: 70px; height: 70px;}
    .area_product{box-sizing: border-box; display: flex; align-items: center;}
    .area_product .inner{height: auto; padding:0 20px}
    .area_product .title{position: relative ; padding-left:0; top: 0;}
    /* .area_product .inner{padding: 0 20px} */
    .area_product .list{flex-wrap: wrap; height: auto; margin-top: 50px; margin-left: -10px; margin-right: -10px;}
    .area_product .list > li{width: 50%; border-right: 0; padding:10px; box-sizing: border-box; display: block;}
    .area_product .list > li::before{display: none;}
    .area_product .list > li .box{border:1px solid rgba(255,255,255,0.2); position: relative; top: 0; padding:30px; min-height: 240px;}
    .area_product .list > li strong{margin-top: 20px;}
    .area_product .list > li a.linkA{opacity: 1; visibility: visible; transform: translateY(0); position: absolute;bottom: 30px;}

   
 }
 @media all and (max-width:960px){
    
    .main .title h3.tt{font-size: 44px;}
    .textBox h2{font-size: 42px;}

    .area_medianews{padding:80px 0; box-sizing: border-box;}
    .area_medianews .linkA{position: relative; top: 0; display: flex; margin-bottom: 20px; justify-content: flex-end;}
    .area_medianews .listBox ul{flex-wrap: wrap; margin: 0;}
    .area_medianews .listBox ul > li {width: 100%; padding:0}
    .area_medianews .listBox ul > li + li{margin-top: 22px;}
    .area_medianews .listBox ul > li > a{padding: 30px}
    .area_medianews .listBox ul > li > a em{font-size: 18px;}
 }
 @media all and (max-width:820px){}
 @media all and (max-width:768px){
    .main .title h3.tt{font-size: 36px;}
    .main .title h3.tt + p{margin-top: 7px;}
    .main .title p{font-size: 15px; line-height: 28px;}
    .main .title p br{display: none;}
    .area_mainvisual .thumb .list{display: none;}

    .area_product .list > li strong{font-size: 24px;}

    .area_grobal .link_btn a{width: 260px; height: 80px;}
 }
 @media all and (max-width:640px){

    .main .title h3.tt{font-size: 28px;}
    .textBox h2{font-size: 32px;}
    .textBox strong{font-size: 20px;}
    .textBox .cont em{font-size: 19px;}
    .textBox .cont p{font-size: 16px;}

    .area_product .list{margin-top: 32px;}
    .area_product .list > li .box{padding:24px 15px; min-height: 210px;}
    .area_product .list > li strong{font-size: 20px; margin-bottom: 0;}
    .area_product .list > li span.num{font-size: 18px; opacity: 0.4; }
    .area_product .list > li a.linkA{bottom: 24px;}

    .area_grobal .link_btn a{margin-top: 60px; height: 55px; width: 200px; font-size: 14px;}

    
    .area_medianews .listBox{margin-top: 40px;}
    .area_medianews .listBox ul > li > a{padding:24px}
    .area_medianews .listBox ul > li > a em{font-size:16px}
    .area_medianews .listBox ul > li > a p{margin-top: 4px; font-size:14px}
    .area_medianews .listBox ul > li > a span.date{margin-bottom: 12px;}
 }
 @media all and (max-width:540px){

    /* .area_product .list > li{width: 100%;}
    .area_product .list > li .box{min-height: auto;} */
 }
 @media all and (max-width:480px){}
 @media all and (max-width:360px){}
 @media all and (max-width:320px){}
 @media all and (max-width:240px){}