@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300rem; padding:80rem 0; overflow:hidden;}
div#content.over_hidden{overflow:hidden;}
.sub_title{margin-bottom:80rem;}
.sub_title h2{text-align:center; color:#111; font-size:var(--font_size35);}

/* 서브비쥬얼 */
.area_subVisual{position:relative; height:400rem; padding:0 4%; background: 50% / cover;}
.area_subVisual .box{position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; text-align:center;}
.area_subVisual .box h3{margin-bottom:5rem; color:#fff; font-size:var(--font_size20); font-weight:600;}
.area_subVisual .box h2{ color:#fff; font-size:var(--font_size45);}
.area_subVisual .box p{margin-top:20rem; color:#fff; opacity:0.8; font-size:var(--font_size16);}
.area_subVisual .box p > br{display:none;}

.area_subVisual.about,
.area_subVisual.location{background-image: url(../images/content/sub_visual01.jpg) }
.area_subVisual.product {background-image:url(../images/content/sub_visual02.jpg); /*height:320rem !important;*/}
.area_subVisual.board_gallery{background-image:url(../images/content/sub_visual03.jpg);}
.area_subVisual.koweb_online_counsel{background-image:url(../images/content/sub_visual04.jpg);}
.area_subVisual.board_notice {background-image:url(../images/content/sub_visual01.jpg);}
.area_subVisual.common {background-image:url(../images/content/sub_visual01.jpg);}

/* lnb */
.lnb {z-index:11; left:0; bottom:0; width:100%; height:65rem; background:#222; border-bottom:1px solid #ddd;text-align:center;}
.lnb ul {margin: 0 auto;width:100%; height:65rem;}
.lnb ul li {display:inline-block; padding:19rem 28rem;}
.lnb ul li a {font-weight:500; font-size:var(--font_size18); color:#fff; transition: 0.2s; opacity:0.4;}
.lnb ul li:hover a,
.lnb ul li a.on {opacity:1;}
.lnb .depth3{display:none;}
@media(max-width:1279px){
    .area_subVisual{margin-top:85rem; height:300rem;}
    div#content.sub{padding:70rem 0;}
    .sub_title{margin-bottom:70rem;}
}
@media all and (max-width:767px){
    .area_subVisual{margin-top:70rem; height:220rem;}
	div#content.sub{padding:60rem 0;}
    .sub_title{margin-bottom:60rem;}
}

@media all and (max-width:600px){
	.lnb{overflow-x:auto; width:100%;overflow-y: hidden;}
	.lnb ul{display:table; margin:0 auto; table-layout:fixed;    overflow-y: hidden;}
	.lnb ul li{display:table-cell; padding:0 15rem; vertical-align:middle;}
	.lnb ul li a{display:block; padding:0; white-space:nowrap;}
	.lnb ul li:first-child{padding-left:15rem;}
	.lnb ul li:last-child{padding-right:15rem;}
}

@media all and (max-width:500px){
	.lnb ul{table-layout: auto;}
}


/* sub 공통 */


/* 회사소개 - 인사말 */
.area_greeting{display:flex;}
.area_greeting .img{display:block; width:50%; }
.area_greeting .img img{display:block; width:100%; height:100%; object-fit:cover;}
.area_greeting .txt_box{padding-left:100rem; width:50%;}
.area_greeting .txt_box h2{margin-bottom:30rem; color:#999; font-size:var(--font_size30); font-weight:500;}
.area_greeting .txt_box h2 em{color:var(--primary); font-weight:bold;}
.area_greeting .txt_box h2 b{font-weight:bold; color:#111;}
.area_greeting .txt_box p{color:#444; font-size:var(--font_size18);}
.area_greeting .txt_box p+p{margin-top:20rem;}
.area_greeting .txt_box span{display:block; margin-top:40rem; font-size:var(--font_size18); font-weight:bold; color:#999; text-align:end;}
.area_greeting .txt_box span b{color:#111; font-size:var(--font_size20);}
.area_greeting .txt_box span img{display:inline-block; margin-left:15rem; vertical-align:middle; width:120rem;}
@media(max-width:1279px){
    .area_greeting{align-items:unset;}
    .area_greeting .img img{height:100%; object-fit:cover;}
    .area_greeting .txt_box{padding-left:40rem;}
    .area_greeting .txt_box p > br{display:none;}
}
@media(max-width:767px){
    .area_greeting{display:block;}
    .area_greeting .img{width:100%;}
    .area_greeting .img img{height:auto;}
    .area_greeting .txt_box{margin-top:40rem; padding-left:0; width:100%;}
    .area_greeting .txt_box h2{margin-bottom:25rem;}
    .area_greeting .txt_box p+p{margin-top:15rem;}
    .area_greeting .txt_box span{margin-top:30rem;}
}


/* 회사소개 - 연혁 */
.area_history .banner{padding:100rem 40rem; border-radius:30rem; text-align:center; background:url(/images/content/img_history.jpg)no-repeat center/cover;}
.area_history .banner h3{color:#fff; font-size:22rem; font-weight:normal;}
.area_history .banner h3 b{font-weight:bold;}
.area_history .history{position:relative;}
.area_history .history:before{content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:100%; background:#ddd;}
.area_history .history .cont{display:flex; padding-top:80rem;}
.area_history .history .cont.left{justify-content:left; text-align:end;}
.area_history .history .cont.right{justify-content:flex-end;}
.area_history .history .cont .box{position:relative; width:50%;}
.area_history .history .cont .box:before{content:''; display:block; position:absolute; top:19rem; width:22rem; height:22rem; border:6rem solid var(--primary); border-radius:50%; box-sizing:border-box; background:#fff;}
.area_history .history .cont.left .box{padding-right:50rem;}
.area_history .history .cont.right .box{padding-left:50rem;}
.area_history .history .cont.left .box:before{right:-11rem;}
.area_history .history .cont.right .box:before{left:-11rem;}
.area_history .history .cont .box h2{font-size:40rem; margin-bottom:25rem; color:var(--primary); font-weight:800;}
.area_history .history .cont .box > ul > li+li{margin-top:16rem;}
.area_history .history .cont .box > ul > li .txt{display:flex;}
.area_history .history .cont.left .box > ul > li .txt{flex-direction:row-reverse;}
.area_history .history .cont .box > ul > li .txt em{display:block; width:65rem; color:#000; font-weight:bold; font-size:18rem;}
.area_history .history .cont .box > ul > li .txt p{width:calc(100% - 65rem);}
.area_history .history .cont .box > ul > li .txt p.w100{width:100% !important;}
.area_history .history .cont .box > ul > li .img{display:block; margin-top:12rem; width:100%;}
.area_history .history .cont .box > ul > li .img img{display:inline-block; max-width:500rem; width:100%;}
@media(max-width:1279px){
    .area_history .banner{padding:80rem 40rem;}
}
@media(max-width:767px){
    .area_history .banner{padding:50rem 15rem; border-radius:15rem;}
    .area_history .history{margin:auto; width:calc(100% - 30rem);}
    .area_history .history:before{left:0; transform:none;}
    .area_history .history .cont{display:block; padding-top:45rem;}
    .area_history .history .cont.left{text-align:left;}
    .area_history .history .cont .box{width:100%;}
    .area_history .history .cont.left .box{padding-right:0; padding-left:25rem;}
    .area_history .history .cont.right .box{padding-left:25rem;}
    .area_history .history .cont.left .box:before{left:-11rem; right:auto;}
    .area_history .history .cont .box h2{margin-bottom:15rem;}
    .area_history .history .cont .box > ul > li+li{margin-top:12rem;}
    .area_history .history .cont.left .box > ul > li .txt{flex-direction:row;}
}


/* 회사소개 - 공장전경 */
.area_factory .swiper{margin:auto; max-width:1000rem; width:100%; overflow:visible;}
.area_factory .swiper .swiper-slide img{width:100%; opacity:0.2; transition:0.3s ease;}
.area_factory .swiper .swiper-slide-active img{opacity:1; transition:0.3s ease;}
.area_factory .control{display:flex; margin-top:50rem; justify-content:center; align-items:center; z-index:1;}
.area_factory .pager_num{font-size:0; width:auto;}
.area_factory .pager_num span{color:#333; font-size:var(--font_size16); font-weight:bold;}
.area_factory .pager_num .swiper-pagination-total{display:none;}
.area_factory .pager_num_total{color:#333; font-size:var(--font_size16); font-weight:bold;}
.area_factory .pager_bar{ position: relative; margin:0 18rem;  width:120rem; height: 3rem; background: rgba(0,0,0,0.3); }
.area_factory .pager_bar:before{ content: ''; position: absolute; inset: 0; width: 0; background:#333; }
.area_factory .pager_bar.active:before{animation:factory_bar 5s linear both; }
.area_factory .swiper-button-next,
.area_factory .swiper-button-prev{position:relative; top:auto; left:auto; right:auto; bottom:auto; margin-top:0; width:30rem; height:30rem; transition:0.3s ease;}
.area_factory .swiper-button-next{margin-left:40rem;}
.area_factory .swiper-button-prev{margin-right:40rem;}
.area_factory .swiper-button-next:after,
.area_factory .swiper-button-prev:after{font-size:30rem; font-weight:bold; color:#333;}
@keyframes factory_bar {
	0%{width:0%;}
	100%{width:100%;}
}
@media(hover:hover){
    .area_factory .control .swiper-button-prev:hover,
    .area_factory .control .swiper-button-next:hover{opacity:0.5;}
}
@media(max-width:1279px){
    .area_factory .pager_num span{font-size:var(--font_size18);}
    .area_factory .swiper-button-next{margin-left:25rem;}
    .area_factory .swiper-button-prev{margin-right:25rem;}
}
@media(max-width:767px){
    .area_factory .control{margin-top:30rem;}
    .area_factory .swiper-button-next:after, 
    .area_factory .swiper-button-prev:after{font-size:25rem; font-weight:normal;}
}


/* 회사소개 - 오시는길 */
.area_location .root_daum_roughmap_landing{width:100% !important;}
.area_location .root_daum_roughmap .wrap_map{height:560rem !important;}
.area_location .root_daum_roughmap .wrap_controllers{display:none;}
.area_location .box{position:relative; margin:-100rem auto 0; width:90%; background:url(../images/content/bg_location.jpg)no-repeat center/cover; z-index:1; box-shadow:0 0 40rem rgba(0,0,0,0.3);}
.area_location .box .address{display:block; padding:45rem 10rem; color:#fff; font-size:var(--font_size20); text-align:center; border-bottom:1px solid rgba(255,255,255,0.2);}
.area_location .box .contact{display:flex; justify-content:space-evenly; padding:45rem 0;}
.area_location .box .contact li{display:flex; align-items:center; padding:0 15rem;}
.area_location .box .contact li .icon{display:flex; align-items:center; justify-content:center; width:54rem; height:54rem; border-radius:50%; background:rgba(255,255,255,0.15);}
.area_location .box .contact li .icon img{display:block; height:25rem;}
.area_location .box .contact li a{display:block; margin-left:20rem; color:#fff; font-size:var(--font_size18); cursor:pointer;}
.area_location .map_border,
.area_location .wrap_controllers{ display: none }
@media(max-width:1279px){
    .area_location .box .address{padding:35rem 10rem;}
    .area_location .box .contact{padding:35rem 0;}
    .area_location .box .contact li a{margin-left:15rem;}
}
@media(max-width:767px){
    .area_location .root_daum_roughmap .wrap_map{height:360rem !important;}
    .area_location .box{margin-top:-60rem;}
    .area_location .box .address{padding:25rem 5rem;}
    .area_location .box .contact{display:block; padding:25rem 0;}
    .area_location .box .contact li+li{margin-top:20rem;}
    .area_location .box .contact li .icon{width:45rem; height:45rem;}
    .area_location .box .contact li .icon img{height:20rem;}
    .area_location .box .contact li a{margin-left:12rem;}
}