@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* sub visual */
.area_subVisual_wrap{ display: grid; grid-template: 'scroll visual' 'scroll lnb' / auto 1fr; }
.area_subVisual{ grid-area: visual; overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height:600px; padding-bottom: 4.67032967%; box-sizing: border-box; color: #fff; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/img_subvisual_about.jpg); }
.area_subVisual.product::before{ background-image:url(../images/content/img_subvisual_product.jpg); }
.area_subVisual.board::before{ background-image:url(../images/content/img_subvisual_board.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/img_subvisual_common.jpg); }
.area_subVisual__inr{ display: flex; align-items: flex-end; }
.area_subVisual__text{ display: flex; gap: 2em clamp(3em, 5.42857143vw, 76px); }
.area_subVisual-h2{ font-size: var(--font_size50); font-weight: 800; }
.area_subVisual-p{ position: relative; top: -.125em; line-height: 1.6875; color: #ddd; }
.area_subVisual__scroll{ grid-area: scroll; display: flex; justify-content: flex-end; align-items: center; gap: 13px; position: relative; width: 100px; padding-bottom: 6.25em; background: #fff; text-transform: uppercase; font-size: 14px; letter-spacing: .125em; color: #aaa; writing-mode: vertical-rl; z-index: 2; }
.area_subVisual__scroll::after{ content: ''; position: relative; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); }
.area_subVisual__scroll-p{ position: relative; transform: rotate(180deg); }
@media(prefers-reduced-motion:no-preference){
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes sub_visual_text {
		0%{ transform: translateX(20px); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual-h2{ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual-p{ opacity: 0; animation: sub_visual_text .6s .4s both; }
}
@media(min-width:768px){
	.area_subVisual__text{ align-items: center; }
}
@media(min-width:1800px){
    .area_subVisual__inr{ position: relative; left: -2.8125vw; }
}
@media(max-width:1279px){
    .area_subVisual__scroll{ display: none; }
}
@media(max-width:767px){
	.area_subVisual{height:300px;}
	.area_subVisual__text{ flex-direction: column; }
	.area_subVisual-p{ max-width: 360px; }
}

/* lnb */
.lnb { grid-area: lnb; background: #00071c; }
.lnb__inr{ display: flex; justify-content: space-between; align-items: center; }
.lnb__nav{ display: flex; align-items: center; gap: 1em; color: rgba(221, 221, 221, .8); }
.lnb__ul{ display: flex; gap: clamp(2em, 3.90625vw, 75px); font-size: var(--font_size18); color: rgba(255, 255, 255, .5); }
.lnb__ul li:hover a, 
.lnb__ul li a.on{ color: #fff; }
@media(min-width:1800px){
    .lnb__inr{ position: relative; left: -2.8125vw; }
}
@media(min-width:1280px){
    .lnb{ border-radius: 0 0 0 50px; }
	.lnb__inr{ height: 6.25em; }
}
@media (max-width:1279px){
	.lnb{ overflow: hidden; }
	.lnb__nav{ display: none; }
	.lnb__inr{ overflow: auto hidden; height: 4.28571429em; }
}

/* common content */
#content{ min-height:300px; }
.sub_title{ margin-bottom: 1.75em; font-weight: 900; }
.sub_title p{ font-size: var(--font_size20); color: var(--secondary); }
.sub_title h2{ margin-top: .25em; font-size:var(--font_size40); }
@media(min-width:768px){
	#content{ padding: 80px 0; }
}
@media(min-width:1280px){
	#content{ padding: 143px 0; }
}
@media(max-width:767px){
	#content{ padding: 60px 0; }
}


/* inr_st01 */
.inr_st01 .sub > .inr{width:100% !important; max-width:100% !important;}
.inr_st01 .sub > .inr .sub_title{position:relative; margin:0 auto 80px; max-width:87.5rem; width:92%; height:100%; z-index:2;}
.f_0 #content{padding-bottom:0 !important}
@media(max-width:1024px){
    .inr_st01 .sub > .inr .sub_title{margin-bottom:60px;}
}
@media(max-width:767px){
    .inr_st01 .sub > .inr .sub_title{margin-bottom:40px;}
}


/* 인사말 */
.area_about p{font-size:18px; color:#444; width:450px;}
.area_about .line{display:block; margin:50px auto; width:1px; height:120px; background:#ddd;}
.area_about .part01 .img{width:100%; border-bottom-right-radius:150px; overflow:hidden;}
.area_about .part01 .img img{width:100%;}
.area_about .part01 h2{color:#111; font-size:45px; text-align:center; margin-top:-35px;}
.area_about .part02{padding:80px 0;}
.area_about .part02 .inr{display:flex; justify-content:space-between; align-items:center; max-width:68rem;}
.area_about .part02 .img{overflow:hidden; width:500px; height:320px;}
.area_about .part02 .img img{width:100%; height:100%; object-fit:cover;}
.area_about .part0201{background:#f8f8f8;}
.area_about .part0201 .img{border-top-right-radius:100px;}
.area_about .part0202{padding-bottom:0 !important;}
.area_about .part0202 .inr{flex-direction:row-reverse;}
.area_about .part0202 .img{border-bottom-left-radius:100px;}
.area_about .part03 h3{position:relative; color:#111; font-size:24px; text-align:center; font-weight:600;}
.area_about .part03 h3:before,
.area_about .part03 h3:after{content:''; display:inline-block; width:15px; height:12px; background:url(../images/content/obj_txt.png)no-repeat 50% 50%/contain; vertical-align:text-top;}
.area_about .part03 h3:before{margin-right:12px;}
.area_about .part03 h3:after{margin-left:12px; transform-origin:center; transform:rotate(180deg);}
.area_about .part03 h3 > br{display:none;}
@media(max-width:1200px){
    .area_about p{width:50%}
    .area_about p > br{display:none;}
    .area_about .part02 .img{width:45%; height:280px;}
}
@media(max-width:1024px){
    .area_about p{font-size:16px;}
    .area_about .line{margin:40px auto; height:100px;}
    .area_about .part01 .img{border-bottom-right-radius:80px;}
    .area_about .part01 h2{font-size:35px; margin-top:-26px;}
    .area_about .part02{padding:60px 0;}
    .area_about .part0201 .img{border-top-right-radius:60px;}
    .area_about .part0202 .img{border-bottom-left-radius:60px;}
    .area_about .part03 h3{font-size:20px;}
    .area_about .part03 h3:before,
    .area_about .part03 h3:after{display:block; margin:auto;}
    .area_about .part03 h3:before{margin-bottom:18px;}
    .area_about .part03 h3:after{margin-top:18px;}
}
@media(max-width:767px){
    .area_about p{margin-top:25px; font-size:15px; width:92%;}
    .area_about .line{margin:25px auto; height:70px;}
    .area_about .part01 .img{height:250px; border-bottom-right-radius:60px;}
    .area_about .part01 .img img{height:100%; object-fit:cover;}
    .area_about .part01 h2{font-size:22px; margin-top:-18px;}
    .area_about .part02{padding:45px 0;}
    .area_about .part02 .img{width:92%;}
    .area_about .part0201 .inr{flex-direction:column-reverse; align-items:flex-start;}
    .area_about .part0202 .inr{flex-direction:column-reverse; align-items:end;}
    .area_about .part0202 p{text-align:end;}
    .area_about .part03 h3{font-size:18px;}
    .area_about .part03 h3 > br{display:block;}
}
@media(max-width:480px){
    .area_about .part02 .img{height:240px;}
}


/* 오시는길 */
.area_location .txt_box{padding:40px 4%; width:100%; text-align:center; color:#fff; font-size:18px; background:url(../images/main/img_product_bg.jpg)no-repeat 50% 50%/cover; box-sizing:border-box;}
.area_location .txt_box img{display:inline-block; vertical-align:middle; margin:-3px 12px 0 0;}
.area_location iframe{width:100% !important; height:600px !important;}
@media(max-width:1024px){
    .area_location .txt_box{padding:30px 4%; font-size:16px;}
    .area_location iframe{height:500px !important;}
}
@media(max-width:767px){
    .area_location .txt_box{padding:20px 4%; font-size:15px;}
    .area_location .txt_box img{margin:-3px 8px 0 0; width:12px;}
    .area_location iframe{height:350px !important;}
}


/***************************
    제품소개 
****************************/
.area_pr .intro{position:relative; padding-top:80px; margin-bottom:80px; background:url(../images/main/img_product_bg.jpg)no-repeat 50% 50%/cover; text-align:center; box-sizing:border-box;} 
.area_pr .intro:before{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:100px; background:#fff;}
.area_pr .intro h3{margin-bottom:20px; font-size:24px; color:#fff; padding:0 4%; box-sizing:border-box;}
.area_pr .intro > p{font-size:18px; color:#fff; padding:0 4%; box-sizing:border-box;}
.area_pr .intro .img_box{display:flex; margin-top:50px; justify-content:space-between; align-items:center; box-shadow:0 0 50px rgba(0,0,0,0.15); background:#f8f8f8;}
.area_pr .intro .img_box .txt{width:600px; text-align:left; padding-left:5%; box-sizing:border-box;}
.area_pr .intro .img_box h2{margin-bottom:20px; font-size:45px; color:#111;}
.area_pr .intro .img_box p{font-size:18px; color:#444;}
.area_pr .intro .img_box img{width:calc(100% - 650px);}
.area_pr .box{padding:40px 0; box-sizing:border-box;}
.area_pr .box.st01{border-top:2px solid var(--primary);}
.area_pr .box.st02{border-top:1px dashed #ddd;}
.area_pr .box.st03{margin:40px 0; border:1px solid #ddd;}
.area_pr .list01 li{position:relative; padding-left:15px; font-size:16px; color:#444; box-sizing:border-box;}
.area_pr .bullet01:before{content:''; display:block; position:absolute; top:8px; left:0; width:6px; height:6px; border-radius:50%; background:#98d4bf;}
.area_pr .list01 li+li{margin-top:8px;}
.area_pr .list01 h3{margin-bottom:3px; font-size:18px; color:#111;}
.area_pr .bullet02:before{content:''; display:block; position:absolute; top:13px; left:0; width:8px; height:2px; background:var(--primary);}
.area_pr .box h2{ font-size:24px; color:#111;}
.area_pr .box .txt{margin-bottom:30px;}
.area_pr .box .txt p{margin-top:10px;}
.area_pr em{display:inline-block; padding:0 4px; background:rgba(152,212,195,0.25); color:var(--primary) !important; font-weight:bold; box-sizing:border-box;}
.area_pr table.table thead th{background:rgba(152,212,195,0.1) !important; font-weight:600 !important;}
.area_pr .table_wrap i{display:block; font-size:14px; font-weight:600;}
.area_pr .list02{display:flex; justify-content:space-between;}
.area_pr .list02 li{width:calc(100% / 3 - 40px);}
.area_pr .list02 li .img{display:block; width:100%;}
.area_pr .list02 li .img img{width:100%;}
.area_pr .list02 li .name{display:block; padding:10px 5px; text-align:center; width:100%; font-size:18px; font-weight:600; color:#fff; background:var(--primary); box-sizing:border-box;}
.area_pr .list03{border-top:2px solid var(--primary);}
.area_pr .list03 li{display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed #ddd; padding:10px 0; box-sizing:border-box;}
.area_pr .list03 li .img{width:200px;}
.area_pr .list03 li .img img{width:100%;}
.area_pr .list03 li p{width:calc(100% - 220px); font-size:17px;}
@media(max-width:1280px){
    .area_pr .intro .img_box .txt{padding-left:3%; width:520px;}
    .area_pr .intro .img_box img{width:calc(100% - 520px);}
}
@media(max-width:1024px){
    .area_pr .intro{padding-top:60px; margin-bottom:60px;}
    .area_pr .intro h3{margin-bottom:15px; font-size:20px;}
    .area_pr .intro > p{font-size:16px;}
    .area_pr .intro .img_box{margin-top:35px; flex-direction:column-reverse; padding:20px 4% 30px; box-sizing:border-box; box-shadow:0 0 30px rgba(0,0,0,0.18);}
    .area_pr .intro .img_box .txt{margin-top:15px; padding-left:0; width:100%;}
    .area_pr .intro .img_box h2{margin-bottom:8px; font-size:30px;}
    .area_pr .intro .img_box p{font-size:16px;}
    .area_pr .intro .img_box p > br{display:none;}
    .area_pr .intro .img_box img{max-width:600px; width:80%;}
    .area_pr em{padding:0 2px;}
    .area_pr .box{padding:30px 0;}
    .area_pr .list01 li{font-size:15px;}
    .area_pr .list01 li+li{margin-top:6px;}
    .area_pr .box .txt{margin-bottom:20px;}
    .area_pr .box h2{font-size:18px;}
    .area_pr .box.st03{margin:30px 0;}
    .area_pr .list02 li .name{font-size:16px;}
    .area_pr .list01 h3{font-size:16px;}
    .area_pr .bullet02:before{top:11px; left:0; width:6px;}
    .area_pr .list03 li p{font-size:16px;}
}
@media(max-width:767px){
    .area_pr .intro{padding-top:50px; margin-bottom:50px;}
    .area_pr .intro h3{margin-bottom:12px; font-size:18px;}
    .area_pr .intro > p{font-size:15px;}
    .area_pr .intro .img_box{margin-top:30px; padding:15px 4% 20px;}
    .area_pr .intro .img_box .txt{margin-top:10px;}
    .area_pr .intro .img_box h2{margin-bottom:8px; font-size:22px;}
    .area_pr .intro .img_box p{font-size:15px;}
    .area_pr .intro .img_box img{width:90%;}
    .area_pr .box{padding:25px 0;}
    .area_pr .list01 li{font-size:14px;}
    .area_pr .list01 li+li{margin-top:5px;}
    .area_pr .box .txt{margin-bottom:15px;}
    .area_pr .box h2{font-size:16px;}
    .area_pr .box.st03{margin:25px 0;}
    .area_pr .list02{flex-wrap:wrap;}
    .area_pr .list02 li{width:calc(100% / 2 - 5px); margin-bottom:10px;}
    .area_pr .list02 li .name{font-size:15px;}
    .area_pr .list01 h3{font-size:15px;}
    .area_pr .bullet02:before{top:9px;}
    .area_pr .list03 li .img{width:180px;}
    .area_pr .list03 li p{width:calc(100% - 190px); font-size:15px;}
}
@media(max-width:480px){
    .area_pr .intro .img_box h2{font-size:20px;}
    .area_pr .intro .img_box img{width:100%;}
    .area_pr .list03 li .img{width:110px;}
    .area_pr .list03 li p{width:calc(100% - 120px);}

}
@media(max-width:380px){
    .area_pr .list02 li{width:100%; margin-bottom:10px;}

}