@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

#wrap {}
/* sub visual */
.subVisual{ overflow: hidden; padding-bottom: calc( 75rem + 1.46em ); display: flex; align-items: flex-end; position:relative; height: 550rem; font-size: var(--fs50); color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/vis1.jpg'); }
.subVisual.product::before{ background-image:url('/images/content/vis2.jpg'); }
.subVisual.equipment::before{ background-image:url('/images/content/vis3.jpg'); }
.subVisual.board::before{ background-image:url('/images/content/vis4.jpg'); }
.subVisual.koweb_online_counsel::before{ background-image:url('/images/content/vis5.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/vis5.jpg'); }
.subVisual__h2{ font-size: inherit; }
@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .inr *{ opacity: 0; animation: subVisualText .6s .3s both; }
	@keyframes subVisualText {
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
}

/* lnb */
.lnb__inr{ overflow: auto clip; margin-top: -75rem; padding: 0 clamp(10rem, 4vw, 50rem); background: #fff; }
.lnb{ display: flex; align-items: center; justify-content: space-between; height: 75rem; color: #888;}
.lnb .sub_menu{ display: flex; gap: 50rem; padding-right: 4vw; white-space: nowrap; }
.lnb .sub_menu li{ position: relative; }
.lnb .sub_menu li + li::before{ content: ''; position: absolute; top: 6rem; left: -25rem; width: 1px; height: 14rem; background: #ddd; }
.lnb .on{ color: var(--primary); font-weight: 500;}
@media(prefers-reduced-motion:no-preference){
	.lnb__inr{ --d: 1s; animation: clipRight var(--d) .7s both; }
	@keyframes clipRight {
		0%{ clip-path: inset(-10px 100% -10px 0); }
		100%{ clip-path: inset(-10px 0); }
	}
	@media(max-width:767px){
		.subVisual {height: 400rem;}
		.lnb__inr{ --d: .6s; }
	}
}

/* breadcrumb */
.breadcrumb { display: flex; gap: 38rem; font-size: 15rem; font-weight: 300; color: #888; }
.breadcrumb__item{ position: relative; }
.breadcrumb__item:empty{ display: none; }
.breadcrumb__item + .breadcrumb__item::before{ content: ''; position: absolute; top: 8rem; left: -26rem; width: 8rem; height: 8rem; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.breadcrumb__home{ width: 14rem; fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:.7px; vertical-align: middle; }
@media(max-width:1279px){
	.breadcrumb{ display: none; }
}

/* common content */
#content{ min-height:300px; padding: 110rem 0 80rem; }
.subTitle{ margin-bottom: 65rem; text-align:center; }
.subTitle__p{ text-transform: uppercase; font-size: clamp(16rem, calc( 18 / var(--inr) * 100vw ), 16rem); font-weight: 700; color: rgba(0, 0, 0, 0.4); }
.subTitle__h2{ margin-top: 10rem; font-size:var(--fs35); font-weight: 700; }
.subTitle__h3 {font-size: var(--fs35); font-weight: 700;}

.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; }

@media(max-width:768px){
	#content {padding: 80rem 0 70rem;}
	.subTitle {margin-bottom: 30rem;}
}

/* 인사말 about1 */
.about1 {position: relative; display: flex; justify-content: center; margin: 80rem 0;}
.about1:before {position: absolute; top: 70rem; left: -80rem; content: ''; width: 280rem; height: 280rem; background: url(/images/content/symbol.svg) no-repeat center; background-size: contain; opacity: 0.04; transition: .8s;}
.about1 > div {width: 50%}
.about1 .greeting_left {padding-right: 40rem;}
.about1 .greeting_left p {font-size: 14rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 15rem;}
.about1 .greeting_left h2 {font-size: var(--fs35); font-weight: 700;}
.about1 .greeting_left img {height: 40rem;}
.about1 .greeting_right {margin-top: 60rem;}
.about1 .greeting_right p {font-size: var(--fs17); line-height: 1.7;}
.about1 .greeting_right p + p {margin-top: 30rem;}
.about1 .greeting_right .sign {margin-top: 40rem;}
.about1 .greeting_right .sign span {font-size:var(--fs22); font-weight: 800; margin-left: 5rem;}

/* 연혁 about2 */
.about2 {display: grid; grid-template-columns: repeat(2, 1fr);}
.about2 .history_left {position: relative; padding-right: 80rem; box-sizing: border-box;}
.about2 .history_left img {position: sticky; top: 40rem; left: 0; max-width: 100%;}
.about2 .history_right {padding: 0 0 40rem;}
.about2 .history_list {position: relative; display: flex; color: #aaa; padding-left: 50rem; padding-bottom: 50rem;}
.about2 .history_list:before {content: ''; position: absolute; top: 5rem; left: 5rem; width: 1rem; height: 100%; background: #ddd; transition: all .3s;}
.about2 .history_list:after {content: ''; position: absolute; top: 5rem; left: 0; width: 11rem; height: 11rem; border-radius: 100%; border: 1rem solid #ddd; background: #fff; box-sizing: border-box; transition: all .3s;}
.about2 .history_list.active:before {background: #444;}
.about2 .history_list.active:after {border-color: #111}
.about2 .history_list.active h3 {color: #111;}
.about2 .history_list.active dl dt {color: #111;}
.about2 .history_list.active dl dd {color: #111;}
.about2 .history_list h3 {min-width: 150rem; font-size: 20rem; font-weight: 700; transition: .3s;}
.about2 .history_list > div {margin-top: -3rem;}
.about2 .history_list dl {display: flex; align-items: flex-start; transition: .3s;}
.about2 .history_list dl dt {min-width: 30rem; font-weight: 500; margin-right: 15rem; line-height: 2;}
.about2 .history_list dl dd {position: relative; line-height: 2;}

/* 오시는길  */
.about3 {}
.about3 .map_img {border: 1rem solid rgba(0, 0, 0, 0.1); box-sizing: border-box;} 
.about3 .map_img img.pc {}
.about3 .map_img img.mo {display: none;}
.about3 .map_img img {max-width: 100%; width: 100%; object-fit: cover;}
.about3 .map_img .root_daum_roughmap {width: 100%; border-bottom: 1rem solid rgba(0, 0, 0, 0.1);}
.about3 .map_img .root_daum_roughmap .wrap_map {height: 450rem; }
.about3 .map_img .root_daum_roughmap .wrap_controllers {display: none;}
.about3 .map_info {margin-top: 40rem;}
.about3 .map_info ul {display: flex; flex-wrap: wrap; gap: 40rem 80rem; }
.about3 .map_info li {display: flex; gap:20rem; align-items: center;}
.about3 .map_info i.ico {display: flex; align-items: center; justify-content: center; width:48rem; height: 48rem; border-radius: 100%; background: #f4f4f4; border: 1px solid #eee; }
.about3 .map_info i.ico svg {fill: #333;}
.about3 .map_info dl {display: flex; align-items: center;}
.about3 .map_info dl dt {font-weight: 600;}
.about3 .map_info dl dd {position: relative; font-size: 15rem; padding-left: 15rem; margin-left: 15rem;}
.about3 .map_info dl dd:before {content: ''; position: absolute; top: 6rem; left: 0; width: 1rem; height: 11rem; background: #ccc;}
.about3 .map_info .mapBtn {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60rem; padding: 0 25rem; border-radius: 5rem; background: #111; color: rgba(255, 255, 255, 0.5); font-size: 15rem;}
.about3 .map_info .mapBtn img {height: 7rem; opacity: 0.5;}



@media(max-width:768px){
	/* 인사말 */
	.about1 {flex-wrap: wrap;}
	.about1:before {top: auto; bottom: 0; left: auto; right: -50rem; width: 220rem; height: 220rem}
	.about1 > div {width: 100%;}
	.about1 .greeting_left h2 {font-size: 25rem; }
	.about1 .greeting_right {margin-top: 25rem;}
	.about1 .greeting_right p + p {margin-top: 20rem;}
	.about1 .greeting_right .sign {margin-top: 25rem;}
	/* 연혁 */
	.about2 { grid-template-columns: repeat(1, 1fr); gap: 50rem;}
	.about2 .history_left {padding-right: 0;}
	.about2 .history_list {flex-direction: column; padding-left: 40rem; padding-bottom: 40rem;}
	.about2 .history_list h3 {font-size: 18rem; margin-bottom: 5rem;}
	/* 오시는길 */
	.about3 .map_info {margin-top: 30rem;}
	.about3 .map_info ul {gap: 22rem; }
	.about3 .map_img img.pc {display: none;}
	.about3 .map_img img.mo {display: block;}
	.about3 .map_img .root_daum_roughmap .wrap_map {height: 400rem;}
	.about3 .map_info li {gap: 12rem;}
	.about3 .map_info dl dt {font-size: 15rem;}
	.about3 .map_info dl dd {margin-left: 8rem; padding-left: 8rem;}
	.about3 .map_info i.ico {width: 38rem; height: 38rem;}
	.about3 .map_info i.ico svg {width: 14rem;}
}

/* 제품소개 공통 */
.num {display: flex; align-items: center; justify-content: center; width: 22rem; height: 22rem; border-radius: 100%; border: 1px solid #111; font-size: 12rem;}
.subtitle__p {font-size: 17rem; margin-top: -30rem; text-align: center; margin-bottom: 50rem;}
.product .pr_info {position: relative; padding-left: 20rem; margin-bottom: 40rem;}
.product .pr_info:before {content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #111;}
.product .pr_info dt {font-size: var(--fs25); font-weight: 700; margin-bottom: 10rem;}
.product .ss01 .img_list {display: grid; gap: 15rem; } 
.product .ss01 .img_list.grid2 {grid-template-columns: repeat(2,1fr); } 
.product .ss01 .img_list img {width: 100%;}
.product .ss02 {position: relative; margin-top: 120rem; padding: 100rem 0; background: #f4f4f4; text-align: center;}
.product .ss02::before {content: ''; position: absolute; inset: 0 -50vw 0; height: auto; background: #f4f4f4; z-index: -1;}
.product .subTitle__h3 {margin-bottom: 40rem;}

/* PE폼/발포지롤, 토이론지 */
.pr1 .pe_list {display: grid; grid-template-columns: repeat(3,1fr); gap: 25rem; }
.pr1 .pe_list li img {width: 100%;}
.pr1 .pe_list dt {display: flex; align-items: center; gap: 10rem; font-size: var(--fs20); font-weight: 700; margin: 25rem 0 15rem;}
.pr1 .ss02 {margin-top: 100rem; text-align: center;}
.pr1 .ss02 .img_list {display: grid; grid-template-columns: repeat(4,1fr); gap:15rem;}
.pr1 .ss02 .img_list img { width: 100%; max-width: 100%; object-fit: cover;}
.pr1 .ss03 {margin-top: 100rem; text-align: center;}
.pr1 .ss03 .img_list {display: grid; grid-template-columns: repeat(3,1fr); gap:15rem;}
.pr1 .ss03 .img_list img { width: 100%;  max-width: 100%; object-fit: cover;}
.pr1 .ss03 .video {margin-top: 15rem;}
.pr1 .ss03 .video video {max-width: 100%; max-height: 600rem; width: 100%; background: #000;}

/* 과일망 */
.product.pr3 .ss02 .video {display: grid; gap: 15rem;  grid-template-columns: repeat(2,1fr);}
.product.pr3 .ss02 .video video {max-width: 100%;}
/* 진공성형트레이 */
.product.pr4 {}
.product.pr4 h4 {display: flex; align-items: center; gap: 8rem; font-size: var(--fs20); font-weight: 700; color: #111; margin-bottom: 20rem;}
.product.pr4 .pr_box + .pr_box {margin-top: 50rem;}
.product.pr4 .pr_box .img_list {display: grid; grid-template-columns: repeat(4,1fr); gap: 10rem;}
.product.pr4 .pr_box .img_list img {width: 100%;}

@media(max-width:768px){
	/* 제품소개 공통 */
	.product .pr_info {margin-bottom: 20rem; padding-left: 0; padding-top: 30rem; border-top: 1px solid #ddd;}
	.product .pr_info:before {display: none;}
	.product .pr_info dt {font-size: 20rem;}
	.product .pr_info dd {font-size: 15rem;}
	.product .ss01 .img_list.grid2 {grid-template-columns: repeat(1,1fr); gap: 10rem; } 
	/* PE폼 발포지롤 토이론지 */
	.product .pe_list {grid-template-columns: repeat(1,1fr); padding-top: 30rem; border-top: 1px solid #ddd;}
	.product .pe_list dt {margin: 20rem 0 10rem;}
	.product .ss02 {margin-top: 60rem;padding: 60rem 0;}
	.product .ss02 .subTitle__h3 {font-size: 25rem; margin-bottom: 30rem;}
	.product .ss02 .img_list {grid-template-columns: repeat(1,1fr);}
	.product .ss02 .video {margin-top: 20rem;}
	.pr1 .ss02 {margin-top: 60rem; }
	.pr1 .ss02 .img_list { grid-template-columns: repeat(2,1fr); gap:8rem;}
	.pr1 .ss03 {margin-top: 60rem; }
	/* 과일망 */
	.product.pr3 .ss02 .video { grid-template-columns: repeat(1,1fr);}
	/* 진공성형트레이 */
	.num  {width: 18rem; height: 18rem;}
	.product.pr4 h4 {margin-bottom: 15rem; gap: 5rem;}
	.product.pr4 .pr_box .img_list { grid-template-columns: repeat(2,1fr); gap: 6rem;}
	.product.pr4 .pr_box + .pr_box {margin-top:30rem;}
}

/* 생산설비 production */
.production {}
.production .table{}
.production .table table {text-align: center; border: 1px solid #ddd; box-sizing: border-box;}
.production .table table thead { border-top: 1px solid #111;  background: #182028;}
.production .table table thead th {padding: 15rem; box-sizing: border-box; font-size: 18rem; color: #fff; font-weight: 600;}
.production .table table thead th:not(:first-child) {border-left: 1px dotted rgba(255, 255, 255, 0.5)}
.production .table table tbody tr {border-top: 1px dotted #ccc;}
.production .table table tbody td {padding: 12rem; box-sizing: border-box;}
.production .table table tbody td:not(:first-child) {border-left: 1px dotted #ccc;}

@media(max-width:768px){
	.production .table table thead th {padding: 10rem 6rem; font-size: 16rem; font-weight: 500;}
	.production .table table tbody td {padding: 10rem 6rem; font-size: 14rem;}
}