@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* board */
ul.bbsList{border-top-color:#152f53;}
ul.bbsList li .more.active,
ul.bbsList li .more:hover,
ul.bbsList li .more:focus{border-color:#152f53;}
ul.bbsList li .more em,
ul.bbsList li .subject:hover,
ul.bbsList li .subject:focus,
ul.bbsList li:hover .date,
ul.bbsList li:hover .date i{color:#152f53;}
ul.bbsList li .notice{background:#152f53;}

p{word-break: keep-all;}
.prepare{padding:100px 0 ; min-height: 300px; display: flex; align-items: center; justify-content: center;}
.prepare p{font-size: 20px; text-align: center;}

#header nav .gnb > li > a{color: #fff;}

/* sub visual */
.area_subVisual{width: 100%; height: 420px; position: relative; z-index: 2;}
.area_subVisual.subtype01{background: url(/images/content/img_subvisual01.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.area_subVisual.subtype02{background: url(/images/content/img_subvisual02.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.area_subVisual.subtype03{background: url(/images/content/img_subvisual03.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.area_subVisual.subtype04{background: url(/images/content/img_subvisual04.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.area_subVisual.subtype05{background: url(/images/content/img_subvisual05.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}

.area_subVisual .title{position: absolute; left:0; top: 50%; transform: translateY(-50%); width: 100%; padding: 0 20px; box-sizing: border-box;}
.area_subVisual .title h2{font-size: 64px; color:#fff; font-weight: 600; text-align: center;}
.subvisual_lnb{ width: 100%; z-index: 22; border-bottom: 1px solid #ddd; }
.subvisual_lnb ul{display: flex; align-items: center;  justify-content: center;}
.subvisual_lnb ul > li > a{display: block; padding:27px 42px;  box-sizing: border-box; opacity: 0.5;}
.subvisual_lnb ul > li.active a{opacity: 1; background-color: #fff; color: #146ab4; border-bottom: 1px solid #146ab4; font-weight: 600;}
.subvisual_lnb  .current{display: none;}

.area_subpage .tit{text-align: center; padding:100px 0}
.area_subpage h4{font-size: 52px;}
.area_subpage h3{font-size: 48px; font-weight: 700; color: #222;}
.area_subconts{padding-bottom: 130px; /* overflow:hidden ; */}

.area_tab ul{width: 33.333%; margin: 0 auto; border:1px solid #ddd; display: flex;align-items: center;}
.area_tab ul > li{width: 50%; display: table;  text-align: center; height: 60px; transition: all .3s;}
.area_tab ul > li span{display: table-cell; vertical-align: middle; }
.area_tab ul > li.on{background-color: #146ab4;}
.area_tab ul > li.on span{color: #fff;}
.area_tab{margin-bottom: 60px;}

.visual_sub{position: relative;  height:438px; width: 100%; background-color: #fff; }
.visual_sub::before{content: ""; background: url(/images/content/img_icon.svg) no-repeat; position: absolute; }

.intro_sec{display: flex; align-items: center; justify-content: space-between; }
.intro_sec .image{position: relative;}
.intro_sec .image::before{width: 80px; height: 80px; content: ""; position: absolute;}
.intro_sec:nth-child(1) .image::before{ background-color: #6cab32; top: -40px; left: -40px;}
.intro_sec:nth-child(2) .image::before{background-color: #231815; bottom: -40px; right: -40px;}
.intro_sec:nth-child(3) .image::before{background-color: #146ab4; bottom: -40px; left: -40px;}
.intro_sec:nth-child(2){flex-direction: row-reverse; }
.intro_sec + .intro_sec{margin-top: 100px;}
.intro_sec strong{display: block; font-size: 32px; margin-bottom: 22px;}
.intro_sec > *:nth-child(2){width: 45%;}
.intro_sec p + p{margin-top: 24px;}
.intro_sec p{line-height: 1.8;}

.ceo .area_subconts{overflow: hidden;}
.ceo .visual_sub{ background: url(/images/content/img_ceo01.jpg) no-repeat;}
.ceo .visual_sub::before{width: 200px; height: 298px; left: -100px; bottom: -139px;}
.ceo_sec{position: relative;}
.ceo_sec h4{ font-weight: 500;}
.ceo_sec p{line-height: 1.8;}
.ceo_sec + .ceo_sec{padding-top: 100px;}
.ceo_sec:not(:nth-child(2)){padding-left:15%; }
.ceo_sec:nth-child(1) .text{margin-top: 32px;}
.ceo_sec:nth-child(1) p + p{margin-top: 32px;}
.ceo_sec:nth-child(2) h5{font-size:42px; font-weight: 300;}
.ceo_sec [class*="part_"]{position: relative; padding-top: 100px;}
.ceo_sec [class*="part_"] .bg{width: 100%; height: 420px; display: block;}
.ceo_sec [class*="part_"]:nth-of-type(odd){padding-left: 15%;}
.ceo_sec [class*="part_"]:nth-of-type(2){padding-right: 25%;}
.ceo_sec [class*="part_"]:not(.part_02)::before{content: ""; width: 257px; height: 257px; background-color: #f5f5f5; position: absolute; right: -257px; top: -156px;}
.ceo_sec [class*="part_"] .top{position: relative;}
.ceo_sec [class*="part_"] .square{width: 134px; height: 134px; position: absolute; bottom: -84px; left: -78px;}
.ceo_sec [class*="part_"] .bottom{position: relative; z-index: 1; }
.ceo_sec [class*="part_"] strong{font-size: 70px; color: #fff; letter-spacing: 4px; display: block;} 
.ceo_sec [class*="part_"] em{font-size: 30px;}
.ceo_sec .part_01 .bg{background: url(/images/content/img_ceo02.jpg) no-repeat; background-size: cover;}
.ceo_sec .part_02 .bg{background: url(/images/content/img_ceo03.jpg) no-repeat;  background-size: cover;}
.ceo_sec .part_03 .bg{background: url(/images/content/img_ceo04.jpg) no-repeat;  background-size: cover;}
.ceo_sec .part_01 .square{background-color: #6cab32;}
.ceo_sec .part_01 strong i{color: #6cab32;}
.ceo_sec .part_02 .square{background-color: #231815;}
.ceo_sec .part_02 strong i{color: #231815;}
.ceo_sec .part_03 .square{background-color: #006cb3}
.ceo_sec .part_03 strong i{color: #006cb3;}
.ceo_sec .sign{text-align: right; margin-top: 90px;}
.ceo_sec .sign span:nth-child(1){color: #006cb3;}
.ceo_sec .sign span{display: block;}
.ceo_sec .sign em i{font-weight: 400; display: inline-block;}
.ceo .area_subpage{position: relative;}
.ceo .two_square{position: absolute; bottom: 0; left: 0; width: 320px; height:320px;}
.ceo .two_square i{width: 50%; height: 50%; background-color: #f5f5f5; display: block; position: absolute;}
.ceo .two_square i:nth-child(1){left: 0; top: 0;}
.ceo .two_square i:nth-child(2){right:0; bottom: 0;}

.history .area_subpage .tit{background-color: #fff;position: relative; }
.history .visual_sub{ background: url(/images/content/img_histroy00.jpg) no-repeat; background-size: cover; background-color: #fff; background-position: 50% 50%;}
.history .visual_sub::before{width: 129px; height: 192px; bottom: -64px; left: -64px; }
.area_history{display: flex; align-items: flex-start; position: relative; padding-top: 110px;}
.area_history::after{content: ""; }
.area_history::before{position: absolute; left: 0; top: 0; width: 100%; height: 20%; background-color: #fff; z-index: -1; content: "";}
.area_history .title{width: 50%;}
.area_history .title h4{font-weight: 400; line-height: 1.5;}
.area_history .info{width: 50%;}
.area_history .info strong{display: block; font-size: 28px; line-height: 0; position: relative;}
.area_history .info strong::before,.area_history .info strong::after{content: ""; position: absolute; border-radius: 100%; z-index: 1;}
.area_history .info strong::before{width: 10px; height: 10px; background-color: #146ab4; left: -94px;}
.area_history .info strong::after{width: 26px; height: 26px; background-color: #146ab4; opacity: 0.13; left: -102px; top: -8px;}
.area_history .info > ul > li{position: relative; padding-left: 90px; box-sizing: border-box;}
.area_history .info > ul > li::before{content: ""; width: 1px; height: 100%; background-color: #ddd; position:absolute; left: 0; top: 0;}
.area_history .info > ul > li + li{padding-top: 90px;}
.area_history .info > ul > li > ul{margin-top: 27px;}
.area_history .info > ul > li > ul li + li{margin-top: 8px;}
.area_history .info > ul > li img{display: block; margin-top: 12px;}
.area_history i{font-size: 157px; color: #f5f5f5; text-align: center; display: block; position:fixed; font-weight: 900; z-index: -2; bottom: 10%; opacity: 0; transition: .2s;}
.area_history i.on{position: absolute; ;}
.fixed  .area_history i{opacity: 1;}

.area_loaction{}
.area_location h4{font-size: 32px;margin-bottom: 34px;}
.map{border-bottom: 1px solid rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 46px;}
.map .root_daum_roughmap{width: 100%!important;}
.map .root_daum_roughmap .wrap_controllers{display: none;}
.map .root_daum_roughmap .wrap_map{height: 360px;}
.part_conts .image img{height: 230px;}
.part_conts  ul > li + li{margin-top: 110px; }
.part_conts dl{display: flex;width: 100%;border-bottom: 1px solid #ddd;padding: 25px 0px;}
.part_conts dl:nth-child(1){border-top: 1px solid;}
.part_conts dl dt{font-weight: 600;width: 123px;}
.part_conts dl dd{width: calc(100% - 123px);}
.part_conts .info{display: flex; align-items: flex-start;}
.part_conts .image{width: 420px;}
.part_conts .detail{width: calc(100% - 420px);position: relative;}
.part_conts .detail::before{content: "";width: 1px;height: 100%;/* background-color: #ddd; */left: 0;top: 0;position: absolute;}
.part_conts .visual{width: 100%; margin-bottom: 80px; padding:100px 0 80px; display: flex; align-items: center; justify-content: center; background: url(/images/content/img_mapBg.jpg) no-repeat; background-size: cover;}
.part_conts .visual img{position: relative; transform: translateX(-40px);}
.part_conts.others li{display: flex;}
.part_conts.others span{color: #146ab4; font-weight: 400;}
.part_conts.others h4{margin-bottom: 0; font-size: 28px;}

.center .visual_sub{height: 525px; background: url(/images/content/img_center.jpg) no-repeat; background-size: cover;}
.center .visual_sub::before{width: 129px; height: 192px; bottom: -128px; left: -64px; }
.center_sec{padding-left: 15%; margin-top: 80px;}
.center_sec h4{font-weight: 400; margin-bottom: 20px;}

.product_tab{display: flex; margin-bottom: 60px; }
.product_tab a.btn{width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ddd; border-top:1px solid #ddd; border-bottom: 1px solid #ddd;}
.product_tab a.btn:first-child{border-left: 1px solid #ddd;}
.product_tab a.btn.red{background-color: #146ab4; color: #fff;}

.product_tit{text-align: center; margin-bottom: 30px; }
.product_tit p{margin-top: 20px; color: #999;}
.product.type02 .area_subconts{padding-top: 80px;}
.product_tit img{max-width: 100%; display: block; margin: 20px auto 0;}

.photoList > li .img{padding-top: 83%;}
.photoList > li .img i{background-size: auto;}

.box_3d{display: flex; max-width:1024px; margin: 40px auto 0; width: 100%; box-sizing: border-box; padding: 0 20px}
.box_3d > img{max-width: 283px!important; width: 100%;}
.box_3d .txt{text-align: left; padding-left: 32px;}
.box_3d .txt strong{display: block; font-size: 24px;}
.box_3d .txt p + dl{margin-top: 40px; border-top: 1px solid #222;}
.box_3d .txt dl{display: flex; width: 100%; border-bottom: 1px solid #ddd;}
.box_3d .txt dl *{padding:12px 18px; font-size: 16px;}
.box_3d .txt dl dt{width: 120px; background-color: #f5f5f5;}
.box_3d .txt dl dd{width: calc(100% - 120px);}

@media all and (max-width:1680px){

    .ceo .visual_sub::before{width: 166px; left: -82px; bottom: -255px;}
    .ceo .visual_sub,.center .visual_sub{width: calc(100% - 82px); margin-left: auto; background-size: cover; background-position: 50% 50%;}
    .ceo_sec:not(:nth-child(2)),
    .ceo_sec [class*="part_"]:nth-of-type(odd){padding-left: 20%;}
    .ceo_sec [class*="part_"]:nth-of-type(2){padding-right: 0; padding-left: 20%;}
    .center .visual_sub::before{bottom: -128px; left: -64px;}
}
@media all and (max-width:1600px){
    .history .visual_sub{width: calc(100% - 64px); margin-left: auto;}
    .ceo_sec [class*="part_"]:not(.part_02)::before{display: none;}
  
}
@media all and (max-width:1440px){
    .area_subpage img{max-width: 100%;}
    .intro_sec .image{width:45%;}
    .ceo_sec [class*="part_"] .square{width: 144px; height: 144px; bottom: -64px; left: -71px;}
    .ceo_sec [class*="part_"] .bottom{padding-left: 24px}
    .ceo_sec [class*="part_"] strong{font-size: 53px;}
    .ceo .two_square{z-index: -1;}
}
@media all and (max-width:1400px){
    .area_subpage h4 {font-size: 42px;}
    .ceo_sec:nth-child(2) h5 {font-size: 32px;}
    .ceo_sec [class*="part_"] .bg{height: 290px;}

}
@media all and (max-width:1366px){}
@media all and (max-width:1280px){
    .inner{padding:0 30px}
    .part_conts .image{width: 390px;}
}
@media all and (max-width:1024px){

    #header nav .gnb > li > a{color: #222;}
    .subvisual_lnb{position: relative; z-index:1;}
    .subvisual_lnb .current{display: block;}
    .subvisual_lnb.lnb{left: 0;  box-sizing: border-box; width: 100%; }
    .subvisual_lnb.lnb .current{ height: 54px ; align-items: center;box-sizing: border-box; position: relative; display: flex; justify-content: space-between;  width: 100%; background-color: #fff; }
    .subvisual_lnb.lnb .current i{ display: block; width: 7px; height: 11px; background: url(/images/common/arrow.svg) no-repeat; background-size: cover;  transition: all 0.3s ease-in-out; transform: rotate(90deg);}
    .subvisual_lnb.lnb .current.active i{transform: rotate(-90deg);}
    .subvisual_lnb.lnb ul{position: absolute; background-color: #fff; width: 100%; display: none; z-index: 22; top: 54px; left: 0; box-shadow: 3px 10px 24px rgba(21,45,78,0.15);}
    .subvisual_lnb.lnb ul > li.active a{background-color: #146ab4; color: #fff;}
    .subvisual_lnb.lnb ul > li > a{padding:12px 20px;  font-size: 15px; opacity: 1;}

    .intro_sec{display: block;}
    .intro_sec > *{width: 100%!important;}
    .intro_sec img{width: 100%;}
    .intro_sec .text{margin-top: 24px;}
    .intro_sec .image::before{display: none;}

    .area_history{display: block; padding-top: 60px; padding-left: 140px;}
    .area_history .title,.area_history .info{width: 100%;}
    .history .visual_sub,.ceo .visual_sub,.center .visual_sub{height: 300px; background-position: bottom; width: calc(100% - 24px);}
    .history .visual_sub::before,
    .ceo .visual_sub::before,
    .center .visual_sub::before{width: 82px; height:122px ; bottom: -82px; left: -41px;}
  
    .area_history .title {margin-bottom: 80px;}
    .area_history i{left: 0;}
    .area_history .info > ul > li + li {padding-top: 48px;}

    .ceo_sec{padding-top: 80px;}
    .ceo_sec:not(:nth-child(2)), .ceo_sec [class*="part_"]:nth-of-type(odd),.ceo_sec [class*="part_"]:nth-of-type(2){padding-left: 10%;}
    .ceo_sec [class*="part_"] em {font-size: 22px;}
    .ceo_sec [class*="part_"] strong{font-size: 42px;}
    .ceo_sec [class*="part_"] .square{width: 104px; height: 104px; left: -65px; bottom: -60px ;}
    .ceo_sec [class*="part_"] .bottom{padding-left: 0;}

    .area_tab ul{width: 50%;}
    .center_sec{padding-left: 10%;}
}
@media all and (max-width:960px){
    .inner{padding:0 20px}
    .intro_sec + .intro_sec {margin-top: 60px;}
    .area_subconts{padding-bottom: 80px;}
    .part_conts .info,.part_conts.others li{display: block;}
    .part_conts .info .detail,.part_conts .detail{width: 100%; margin-top:32px;}
    .part_conts dl {padding:13px 0}
}
@media all and (max-width:820px){}
@media all and (max-width:768px){
    .area_subpage .tit{padding:64px 0}
    .area_subpage h3{font-size:32px}
    .area_subpage h4{font-size: 28px;}
    .area_subVisual{height: 320px;}
    .intro_sec strong{font-size: 22px;}

    .area_history{padding-left: 20px; padding-top: 80px;}
    .area_history .title{margin-bottom: 42px;}
    .history .visual_sub::before,.center .visual_sub::before{width: 60px; height:89px; bottom: -60px; left: -30px;}
    .area_history .info > ul > li{padding-left: 40px;}
    .area_history .info > ul > li::before{left: 5px;}
    .area_history .info strong::before{left: -38px; width: 7px; height: 7px;}
    .area_history .info strong{font-size: 20px;}
    .area_history .info strong::after{width: 20px; height: 20px; left: -45px; top: -7px;}
    .area_history .info > ul > li > ul{margin-top: 17px;}
    .area_history i{display: none;}

    .ceo_sec:nth-child(2) h5 {font-size: 24px;}
    .ceo_sec + .ceo_sec{padding-top: 60px;}
    .ceo_sec [class*="part_"]{padding-top: 60px;}
    .ceo_sec:not(:nth-child(2)), .ceo_sec [class*="part_"]:nth-of-type(odd), .ceo_sec [class*="part_"]:nth-of-type(2){padding-left: 0;}
    .ceo_sec:nth-child(1){padding-top: 100px;}
    .ceo .two_square{width: 200px; height: 200px;}
    .ceo_sec [class*="part_"] em {font-size: 20px;}
    .ceo_sec [class*="part_"] .square{position: relative; width: 60px; height: 60px; left: 0; bottom: -32px;}
    .ceo_sec [class*="part_"] .bottom{padding-top: 0;}
    .ceo_sec [class*="part_"] strong{font-size: 26px; padding-left: 37px;}

    .area_tab ul{width: 100%;}
    .area_tab ul > li ,.product_tab a.btn{height: 50px;}
    .part_conts .visual{padding:50px 0 30px; margin-bottom: 40px;}
    .part_conts .visual img{transform: translateX(-27px);}
    .part_conts ul > li + li{margin-top: 60px;}

    .box_3d{display: block; padding: 0 20px }
    .box_3d .txt{margin-top: 24px; padding-left: 0;}
    .box_3d .txt strong{font-size: 19px;}
    .box_3d .txt  p{font-size: 15px;}
    .box_3d .txt dl * {font-size: 14px;}
    .box_3d .txt dl dt{width: 100px; word-break: keep-all;}
}
@media all and (max-width:640px){
   
    .product_tab a.btn{font-size: 12px;}
}
@media all and (max-width:540px){}
@media all and (max-width:480px){
    .area_subVisual{height: 280px;}
    .area_subVisual .title h2{font-size: 32px;}
    .history .visual_sub,.ceo .visual_sub,.center .visual_sub{height: 180px; width: 100%;}
    .history .visual_sub::before, 
    .ceo .visual_sub::before,
    .center .visual_sub::before{width: 52px; height: 78px; bottom: -52px; left: 0;}
    .area_subpage h4{font-size: 24px;}
    .ceo_sec:nth-child(2) h5 {font-size: 20px;}
    .ceo_sec [class*="part_"] em{font-size: 18px;}
    .part_conts .image{width: 100%;}
    .part_conts .image img{height: auto; width: 100%;}
    .part_conts dl dt{width: 100px;}
    .part_conts dl dd{width: calc(100% - 100px);}
    .part_conts.others h4{font-size: 22px;}
    .center_sec{padding-left: 0;}
    
}
@media all and (max-width:360px){}
@media all and (max-width:320px){}
@media all and (max-width:240px){}