@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.area_subVisual{overflow:hidden; display:flex; justify-content:center; align-items:center; position:relative; height:500rem; text-align:center; color: #fff; }
.area_subVisual::before{content:''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.business::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual.board_equipment::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.board_performance::before{ background-image:url(../images/content/sub_visual04.jpg); }
.area_subVisual.board::before{ background-image:url(../images/content/sub_visual05.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.koweb_online_counsel::before{ background-image:url(../images/content/sub_visual06.jpg); }
.area_subVisual .inr{display:flex; padding-top:88rem; flex-direction:column; justify-content:center; align-items:center; height:100%; width:100%;}
.area_subVisual .inr h2{ font-size: var(--fs50); width:100%; text-align:center; color:#fff;}
.area_subVisual .inr p{ font-size:18rem; width:100%; text-align:center; color:#fff;}
@media(prefers-reduced-motion:no-preference){
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.area_subVisual .inr *{ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual .inr *:nth-child(2){ animation-delay: .4s; }
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}
@media(max-width:1279px){
	.area_subVisual{height:400rem;}
    .area_subVisual .inr{padding-top:80rem;}
}
@media(max-width:767px){
    .area_subVisual{height:320rem;}
    .area_subVisual.business::before{background-position:15% 100%;}
}


/* lnb */
.lnb{left:0; bottom:0; width:100%; border-bottom:1px solid #ddd; text-align:center; z-index:11;}
.lnb ul {margin:0 auto; width:100%; height:64rem;}  
.lnb ul li{display:inline-block; height:100%;}
.lnb ul li a{display:block; padding:0 50rem; font-weight:500; font-size:20rem; color:#aaa; transition: 0.2s; height:100%; line-height:64rem;}
.lnb ul li a.on{color:var(--primary); font-weight:bold; border-bottom:3px solid var(--primary);}
@media (max-width:767px){
    .lnb{overflow-x:auto; overflow-y:hidden;}
	.lnb ul{/*display:table;*/ margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb ul li{/*display:table-cell;*/ vertical-align:middle;}
	.lnb ul li a{display:block; padding:0 25rem; white-space:nowrap;}
}

/* common content */
#content{position:relative; min-height:300px; padding:70rem 0; }
.sub_title{ margin-bottom:100rem;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }

.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }

.area_sub .inr_st01{position:relative; margin:auto; max-width:1280rem; width:90%;}
.area_sub .mt50{margin-top:50rem;}
.area_sub p{color:#444; font-size:18rem;}
.area_sub p+p{margin-top:25rem;}
@media (max-width:1279px){
    #content{padding:60rem 0; }
    .sub_title{ margin-bottom:80rem;}
    .area_sub .mt50{margin-top:40rem;}
}
@media (max-width:767px){
    #content{padding:50rem 0; }
    .sub_title{ margin-bottom:60rem;}
    .area_sub .inr_st01{width:100%;}
    .area_sub .mt50{margin-top:30rem;}
    .area_sub p+p{margin-top:20rem;}
}


/* 회사소개 _ 인사말 */
.area_greeting h2{font-size:var(--fs40); color:#111; font-weight:500;}
.area_greeting h2 em{color:var(--primary); font-weight:bold;}
.area_greeting img{display:block; width:100%;}
.area_greeting .txt{text-align:end;}
@media (max-width:767px){
    .area_greeting .txt p > br{display:none;}
}


/* 회사소개 _ 오시는길 */
.area_location > div{display:flex; align-items:flex-start; justify-content:space-between;}
.area_location > div .logo{display:block; width:230rem;}
.area_location > div ul li{display:flex; align-items:center;}
.area_location > div ul li+li{margin-top:20rem;}
.area_location > div ul li .icon{display:flex; margin-right:10rem; align-items:center; justify-content:center; width:40rem; height:40rem; border-radius:50%; background:#e7ecf9;}
.area_location > div ul li:nth-child(3) .icon svg{display:block;}
.area_location > div ul li:nth-child(3) .icon svg path{fill:#111;}
.area_location > div ul li:nth-child(1) .icon svg,
.area_location > div ul li:nth-child(2) .icon svg{height:18rem;}
.area_location > div ul li:nth-child(3) .icon svg{width:18rem;}
.area_location > div ul li a{color:#444; font-size:18rem;}
.area_location  .map_wrap{width:100%; }
.area_location  .map_wrap .root_daum_roughmap_landing{width:100% !important;}
.area_location  .map_wrap .root_daum_roughmap .wrap_map{height:500rem !important;}
.area_location  .root_daum_roughmap .wrap_controllers,
.area_location  .root_daum_roughmap .map_border{display:none;}
@media (max-width:767px){
    .area_location > div{justify-content:center; align-items:center; flex-direction:column;}
    .area_location > div .logo{margin:0 auto 30rem; width:180rem;}
    .area_location  .map_wrap .root_daum_roughmap .wrap_map{height:340rem !important;}
}


/* 업무소개 */
.area_business h2{margin-bottom:10rem; font-size:var(--fs35); color:#111; font-weight:500;}
.area_business h2 em{color:var(--primary); font-weight:bold;}
.area_business .box{display:flex; justify-content:center; align-items:center; padding:50rem; background:#f5f5f5;}
.area_business .box .box_tit{display:flex; align-items:center; width:250rem;}
.area_business .box .box_tit h3{display:flex; position:relative; align-items:center; justify-content:center; width:200rem; height:200rem; border-radius:50%; background:#fff; text-align:center; font-size:var(--fs25); box-shadow:10rem 10rem 40rem rgba(2,37,81,0.12);}
.area_business .box .box_tit h3 em i{color:var(--primary);}
.area_business .box .box_tit span{display:block; width:50rem; height:1px; background:#ccc;}
.area_business .box ul{width:770rem;}
.area_business .box ul li{display:flex; align-items:center; position:relative; padding:10rem 0;}
.area_business .box ul li:after{content:''; display:block; position:absolute; top:0; left:0; width:1px; height:100%; background:#ccc;}
.area_business .box ul li:first-child:after{height:50%; top:auto; bottom:0;}
.area_business .box ul li:last-child:after{height:50%;}
.area_business .box ul li .line{display:block; width:50rem; height:1px; background:#ccc;}
.area_business .box ul li span{display:flex; align-items:center; justify-content:center; width:100rem; height:100rem; border-radius:50%;}
.area_business .box ul li:nth-child(odd) span{background:var(--primary);}
.area_business .box ul li:nth-child(even) span{background:#08499b;}
.area_business .box ul li span img{display:block; height:46rem;}
.area_business .box ul li p{padding-left:25rem; width:calc(100% - 150rem);}
@media (max-width:1279px){
    .area_business .box{padding:40rem;}
    .area_business .box .box_tit{width:210rem;}
    .area_business .box .box_tit h3{width:160rem; height:160rem;}
    .area_business .box ul{width:620rem;}
    .area_business .box ul li p > br{display:none;}
}
@media (max-width:767px){
    .area_business p > br{display:none;}
    .area_business .box{display:block; padding:40rem 20rem;}
    .area_business .box .box_tit{display:block; margin-bottom:20rem; width:100%; border-bottom:3px solid var(--primary);}
    .area_business .box .box_tit h3{margin:auto; font-size:22rem; width:150rem; height:150rem;}
    .area_business .box .box_tit span{margin:auto; width:1px; height:40rem;}
    .area_business .box ul{width:100%;}
    .area_business .box ul li{padding:15rem 0; border-bottom:1px dashed #ccc;}
    .area_business .box ul li:first-child{padding-top:0;}
/*    .area_business .box ul li:last-child{padding-bottom:0;}*/
    .area_business .box ul li:after{display:none;}
    .area_business .box ul li .line{display:none;}
    .area_business .box ul li span{width:80rem; height:80rem;}
    .area_business .box ul li span img{width:40rem;}
    .area_business .box ul li p{padding-left:20rem; width:calc(100% - 80rem);}
    
}


























/* vw 반응형을 활용한 사이트입니다
16px은 16rem처럼 단위를 바꿔서 사용해주세요
글씨 크기의 경우 base에 있는 변수 var(--fs16)을 활용하세요 */