@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300px;padding:120rem 0;}
.sub_title h2{font-size:var(--font_size18); color:var(--primary); font-weight:800; margin-bottom:15rem;}

div#content.common .sub_title h2, 
div#content.products .sub_title h2,
div#content.customer .sub_title h2,
div#content.koweb_online_counsel .sub_title h2 {font-size:var(--font_size45); font-weight:800; color:var(--black); margin-bottom:30rem;}

.sbTitle {margin-bottom:50rem; font-size:var(--font_size45); font-weight:800;}
.ss_title {margin-bottom:20rem; font-size:var(--font_size22); font-weight:800;}

/* 서브비쥬얼 */
.area_subVisual{position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-end; height:400rem; margin-top:var(--header_height); background: 50% / cover;}
.area_subVisual h2{margin-bottom:50rem; color:#fff; text-align:center; font-size:var(--font_size55); text-transform:uppercase; font-weight:800;}
.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.products::before {background-image:url(../images/content/sub_visual03.jpg);}
.area_subVisual.customer::before {background-image:url(../images/content/sub_visual04.jpg);}
.area_subVisual.koweb_online_counsel::before {background-image:url(../images/content/sub_visual05.jpg);}

.area_subVisual > ul {position:absolute; left:50%; top:0; display:flex; justify-content:flex-end; height:auto; padding-top:50rem; color:#fff; font-size:var(--font_size15); transform:translate(-50%, 0);}
.area_subVisual > ul li {position:relative; padding:0 25rem; line-height:1;}
.area_subVisual > ul li::after {position:absolute; right:0; top:50%; content:''; width:5px; height:5px; border:1px solid #fff; border-width:0 1px 1px 0; transform:translate(-0, -50%) rotate(-45deg);}
.area_subVisual > ul li:last-child {padding-right:0;}
.area_subVisual > ul li:last-child::after {display:none;}
.area_subVisual > ul li img {height:15rem; margin-top:-3px;}

.area_subVisual.business {align-content:center;}
.area_subVisual.business h2 {margin:50rem 0 0;} 
.area_subVisual.business .lnb {display:none;}
.area_subVisual.business > ul li:last-child {display:none;}
.area_subVisual.business > ul li:nth-child(2) {padding-right:0;}
.area_subVisual.business > ul li:nth-child(2)::after {display:none;}

.area_subVisual.koweb_online_counsel {align-content:center;}
.area_subVisual.koweb_online_counsel h2 {margin:50rem 0 0;} 
.area_subVisual.koweb_online_counsel .lnb {display:none;}
.area_subVisual.koweb_online_counsel > ul li:last-child {display:none;}
.area_subVisual.koweb_online_counsel > ul li:nth-child(2) {padding-right:0;}
.area_subVisual.koweb_online_counsel > ul li:nth-child(2)::after {display:none;}



@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: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual :is(h2, .lnb){ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual h2{ animation-delay: .4s; }
}


/* lnb */
.lnb {z-index:11;left:0;bottom:0;width:100%;text-align:center; border-top:1px solid rgba(255, 255, 255, .2);}
.lnb ul {margin: 0 auto;width:100%;}
.lnb ul li {position:relative; display:inline-block; margin:0 30rem;}
.lnb ul li:first-child {padding-left:0 ;background :none}
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {position:relative; display:block; padding:28rem 0; font-size:var(--font_size18); color: #fff;transition: 0.2s; opacity:.5;}
.lnb ul li:hover a,
.lnb ul li a.on {color: #fff; opacity:1; font-weight:600;}
.lnb ul li a.on::after {position:absolute; left:0; top:0; content:''; width:100%; height:2px; background:#fff;}


@media all and (max-width:1279px){
	.area_subVisual h2 {font-size:45rem;}

	div#content.common .sub_title h2, 
	div#content.customer .sub_title h2,
	div#content.koweb_online_counsel .sub_title h2 {font-size:32rem;}

	.sbTitle {font-size:32rem;}
}


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

	.area_subVisual {height:280rem;}
	.area_subVisual > ul {padding-top:35rem;}
	.area_subVisual h2 {margin-bottom:35rem; font-size:35rem;}

	div#content.sub{padding:80rem 0;}

	div#content.common .sub_title h2, 
	div#content.customer .sub_title h2,
	div#content.koweb_online_counsel .sub_title h2 {font-size:27rem; margin-bottom:20rem;}

	.sbTitle {font-size:27rem; margin-bottom:20rem;}

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

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

	div#content.sub{padding:55rem 0;} 
}


/* ready */
.ready {margin:65rem auto; text-align:center;}
.ready i {display:flex; justify-content:center; align-items:center; width:50rem; height:50rem; margin:0 auto; font-size:var(--font_size35); font-weight:1000; border-radius:100%; border:5rem solid #111;}
.ready h3 {margin:25rem 0 15rem; font-size:var(--font_size45); font-weight:500;}
.ready h3 strong {font-weight:800; color:var(--primary);}
.ready p {font-size:var(--font_size18); color:var(--black2);}



/* all-공통 */
.bg_wrap {position:relative; padding:65rem 0; background:#f7f7f7;}

.dot_list li {position:relative; padding-left:12rem; margin:5rem 0;}
.dot_list li:before {position:absolute; left:0; top:8rem; content:''; width:3px; height:3px; background:var(--black); border-radius:100%;}

.common_table {color:var(--black2); border-top:1px solid var(--border);}
.common_table tr {border-bottom: 1px solid var(--border);}
.common_table tr th {font-weight:600; background:#f5f5f5;}
.common_table :is(th, td) {padding:12rem 20rem; text-align:center; border-right:1px solid var(--border);}
.common_table :is(th:last-child, td:last-child) {border-right:none;}
.common_table .bd_l {border-left:1px solid var(--border) !important;}
.common_table .bd_r {border-right:1px solid var(--border) !important;}
.common_table .bd_t {border-top:1px solid var(--border) !important;}
.common_table .bd_b {border-bottom:1px solid var(--border) !important;}
.common_table .bd_l_blue {border-left:3px solid var(--blue) !important;}
.common_table .bd_r_blue {border-right:3px solid var(--blue) !important;}
.common_table .bd_t_blue {border-top:3px solid var(--blue) !important;}
.common_table .bd_b_blue {border-bottom:3px solid var(--blue) !important;}
.common_table .bg {background:#f4f8f9;}


.grid_w50 {display:grid; grid-template-columns: repeat(2, 1fr); gap:0 40rem;}
.grid_w33 {display:grid; grid-template-columns: repeat(3, 1fr); gap:40rem;}
.grid_w25 {display:grid; grid-template-columns: repeat(4, 1fr); gap:0 40rem;}


/* intro */
.area_intro {display:grid; grid-template-columns:repeat(2, 1fr); align-items:center;}
.area_intro > div:last-child {padding:20rem 0 20rem 100rem;}
.area_intro img {max-width:100%;}
.area_intro h4 {font-size:var(--font_size22); font-weight:400; line-height:1.6;}
.area_intro p {margin-top:20rem;  color:#333;}


/* history */
.area_history {display:grid; grid-template-columns:30% 1fr;}
.area_history > p span {position:sticky; top:30rem; padding:12rem 30rem; font-size:var(--font_size22); font-weight:700; color:#fff; border-radius:999px; background:var(--blue);}
.area_history .box section {display:grid; grid-template-columns:0.5fr 2fr 1fr; padding:30rem 0; border-bottom:1px solid var(--border);}
.area_history .box section:first-child {padding-top:0;}
.area_history .box section h4 {font-size:var(--font_size22);}
.area_history .box section div { max-width:250rem;  padding:15rem; text-align:center; background:#f5f5f5;} 
.area_history .box section div img {max-width:100%;}
.area_history .box section div.gap {height:0; padding:0; background:none;}
.area_history .box section div.logo {background:none;}


/* patent */
.area_patent ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:0 40rem; font-size:var(--font_size18); font-weight:600; text-align:center;} 
.area_patent ul li img {display:block; max-width:100%; margin-bottom:15rem; border:1px solid var(--border); box-sizing:border-box;}


/* location */
.area_location ul {display:grid; grid-template-columns:repeat(4, 1fr); padding:50rem 0; border-top:1px solid var(--border);} 
.area_location ul li {padding:0 40rem; color:#333;}
.area_location ul li + li {border-left:1px solid var(--border2);}
.area_location ul li span {display:block; margin-bottom:7rem; font-size:var(--font_size18); font-weight:700; color:var(--black);}
.area_location ul li a {display:inline-block; color:#333;}
.area_location ul li a:hover {text-decoration:underline;}
.area_location .root_daum_roughmap {width:100%;}
.area_location .root_daum_roughmap .wrap_map {height:500rem;}
.area_location .map_border {display:none;}
.area_location .hide {display:none;}

/* business */
.area_business .vision_list {display:grid; grid-template-columns:repeat(3, 1fr); padding:50rem 0; border:1px solid var(--border); border-width:1px 0 1px 0;}
.area_business .vision_list li {display:grid; grid-template-columns:85rem 1fr; align-items:center; font-size:var(--font_size22); color:var(--gray);}
.area_business .vision_list li i {display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:var(--blue);}
.area_business .vision_list li i img {height:35%;}
.area_business .vision_list li p {padding-left:40rem;}
.area_business .vision_list li strong {display:block; font-weight:700; color:var(--black);}
.area_business .vision_list li:first-child i {background:#002535;}
.area_business .vision_list li:last-child i {background:#005a83;}
.area_business .our_list {margin-top:65rem;}
.area_business .our_list li {position:relative; display:flex; line-height:1.6;}
.area_business .our_list li i {display:inline-block; width:5rem; height:5rem; border-radius:100%; background:#ccc; margin:8rem 30rem 8rem 0;}
.area_business .our_list li em {margin-right:50rem; font-weight:700; color:#aaa;}
.area_business .our_list li + li {margin-top:20rem;}


/* product */
.area_product .sub_section {margin-top:65rem;}
.area_product .define_box {padding:40rem; font-size:var(--font_size18); font-weight:500; line-height:1.6; background:var(--blue); box-sizing:border-box; color: #fff;}
.area_product .merit_list {margin-top:-30rem;}
.area_product .merit_list li {padding:40rem 0 20rem; border-bottom:1px dashed var(--border);}
.area_product .merit_list li > div {margin-top:25rem;}
.area_product .merit_list em {display:block; margin-bottom:5rem; font-size:var(--font_size15); font-weight:700; color:var(--primary);}
.area_product .prod_list {text-align:center; font-size:var(--font_size18); font-weight:700;}
.area_product .prod_list img {margin-bottom:12rem;}
.area_product .notice {margin-top:15rem; font-weight: 600; color:var(--blue);}
.area_product img {max-width:100%;}


/* product01 */
.product01 .merit_list li:nth-child(4) > div {margin-top:50rem;}
.product01 .ss02 .grid_w50 {align-items: flex-start;}
.product01 .ss02 .grid_w33 {position:relative; gap:0;}
.product01 .ss02 .grid_w33::before {position:absolute; left:0; top:0; content:'컬러 제작 가능 제품'; font-size:var(--font_size15); font-weight:600; color:#fff; padding:6rem 15rem; background:var(--blue); transform:translate(0, -100%);}
.product01 .ss02 .grid_w33 table {position:relative; margin-top:-1px; border:3px solid var(--blue); box-sizing:border-box;}
.product01 .ss02 .grid_w33 table tr th {background:#f0f5f7;}
.product01 .ss03 .wrapper {display:flex; align-items:flex-start; gap:0 80rem;}
.product01 .ss03 .circle {flex-shrink:1;}
.product01 .ss03 .info {flex-shrink:2;}
.product01 .ss03 .info > div:first-child {display:flex; flex-wrap:wrap; align-items:center; margin:30rem 0;}
.product01 .ss03 .info > div:first-child .ss_title {margin-bottom:0;}
.product01 .ss03 .info > div:first-child p {position:relative; margin-left:12rem; padding-left:14rem;}
.product01 .ss03 .info > div:first-child p::before {position:absolute; left:0; top:-2rem; content:':';}
.product01 .ss03 .info > div:first-child span {margin-left:auto; font-size:var(--font_size15); color:var(--gray);}
.product01 .ss03 .info .grid_w50 {gap:0 10rem;}
.product01 .ss03 .info .grid_w50 p {padding:22rem; color:var(--black2); font-weight:700; border:3px solid var(--border); background:#fff;}
.product01 .ss03 .info .grid_w50 p br {display:none;}
.product01 .ss03 .info .grid_w50 p span {margin-right:20rem; padding:7px 10px; font-size:var(--font_size15); color:var(--gray); background:#f0f0f0;}
.product01 .ss03 .info .grid_w50 p strong {color:var(--primary);}
.product01 .ss03 .info .grid_w33 {margin-top:35rem; text-align:center;}
.product01 .ss03 .info .grid_w33 li p {padding:12rem; font-weight:700; color:var(--white); background:var(--black);}


/* product02 */
.product02 .ss02 .grid_w33 {align-items:flex-start;}
.product02 .ss02 ul {position:relative; display:flex; justify-content:center; padding:40rem 50rem 30rem; border:3px solid var(--blue); box-sizing:border-box;}  
.product02 .ss02 ul::before {position:absolute; left:-3px; top:-2px; content:'색상'; font-size:var(--font_size15); font-weight:600; color:#fff; padding:6rem 15rem; background:var(--blue); transform:translate(0, -100%);}
.product02 .ss02 ul li {text-align:center;}
.product02 .ss02 ul li + li {margin-left:30rem;}
.product02 .ss02 ul li i {display:block; width:20rem; height:20rem; margin:0 auto 5rem; border-radius:100%; border:1px solid var(--border);}
.product02 .ss02 ul li:nth-child(1) i {background:#d4b888;}
.product02 .ss02 ul li:nth-child(2) i {background:#f9f5ea;}
.product02 .ss02 ul li:nth-child(3) i {background:#0123b4;}
.product02 .ss02 ul li:nth-child(4) i {background:#b30c27;}
.product02 .ss02 ul li:nth-child(5) i {background:#000;}

@media(min-width:768px){
	.product02 .merit_list li:nth-child(6) > div {margin-top:50rem;}
}

@media(min-width:1280px){
	.product02 .merit_list li:nth-child(3) > div{margin-top:50rem;}
}

@media(max-width:1279px) and (min-width:768px){
	.product02 .merit_list li:nth-child(2) > div{margin-top:50rem;}
}

/* product03 */
.product03 .ss04 {display:flex; gap: 10px;}
.product03 .ss04 .grid_w50 {gap:0 10rem;}
.product03 .ss04 .grid_w33 {gap:0 10rem;}



/* product04 */
.product04 .ss02 .ss_title,
.product04 .ss04 .ss_title {margin-bottom:12rem;}
.product04 .ss03 li {padding:30rem; background:#fafafa; border:1px solid var(--border2);}
.product04 .ss04 .prod_list {margin-top:30rem;}


/* product05 */
.product05 .prod_list {gap:30rem 40rem;}


@media (max-width:1279px) {

	.ready i {width:37rem; height:37rem; font-size:25rem;}
	.ready h3 {margin:20rem 0 10rem; font-size:35rem;}

	.area_intro {align-items:start;}
	.area_intro > div:last-child {padding-left:50rem;}
	
	.area_business .our_list li em {min-width:15%;}

	.product01 .ss02 .grid_w33::before {width:33.33%; text-align:center; box-sizing:border-box;}
	.product01 .ss03 .wrapper {gap:0 50rem;}
	.product01 .ss03 .info .grid_w50 p br {display:block;}
	.product01 .ss03 .info .grid_w50 p span {display:inline-block; margin:0 0 10rem;}

	.product02 .ss02 .grid_w33 {grid-template-columns:repeat(2, 1fr)}

	.product03 .ss04 {gap:0 40rem;}
}


@media (max-width:1023px){

	.product03 .ss04 {gap:0 20rem;}
}

@media (max-width:810px){
	.product01 .ss03 .info > div:first-child span {margin-top:10rem; margin-left:0;}
}

@media (max-width:767px) {

	.ready i {width:30rem; height:30rem; font-size:20rem; border-width:4rem;}
	.ready h3 {font-size:27rem;}


	
	.grid_w50 {grid-template-columns:1fr; gap:20rem 0;}
	.grid_w33,
	.grid_w25 {grid-template-columns:repeat(2, 1fr); gap:20rem;}
	
	.bg_wrap {padding:40rem 0;}

	.common_table :is(th, td) {padding:12rem 10rem; word-break:break-all;}

	.area_intro {grid-template-columns:1fr; gap:30rem 0;}
	.area_intro > div:last-child {padding:0 !important;}

	.area_history {grid-template-columns:1fr;}
	.area_history > p span {position:relative; top:auto; display:inline-block; font-size:16rem; padding:7rem 20rem;}
	.area_history .box section {grid-template-columns:0.7fr 2fr 1fr;}
	.area_history .box section:first-child {padding-top:30rem;}

	.area_patent ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:25rem 20rem;} 
	.area_patent ul li img {margin-bottom:10rem;}
 
	.area_location ul { grid-template-columns:repeat(2, 1fr); padding:0; border-top:none;}
	.area_location ul li {padding:20rem; border-top:1px solid var(--border);}
	.area_location ul li + li {border-left:none;}
	.area_location .root_daum_roughmap .wrap_map {height:250rem;}
	
	.area_business .vision_list {grid-template-columns:1fr; padding:20rem 0;}
	.area_business .vision_list li {grid-template-columns:65rem 1fr; padding:10rem 0;}
	.area_business .vision_list li p {padding-left:25rem;}
	.area_business .our_list {margin-top:35rem;}
	.area_business .our_list li {display:block; padding-left:25rem;}
	.area_business .our_list li::before {position:absolute; left:0; top:11rem; content:''; width:3rem; height:3rem; border-radius:100%; background:#ccc;}
	.area_business .our_list li i {display:none;}
	.area_business .our_list li em {display:block; min-width:auto; margin:0 0 5rem;}

	.area_product .define_box {padding:22rem 20rem;}
	.area_product .sub_section {margin-top:40rem;}
	.area_product .merit_list {margin-top:-20rem; gap:0;}
	.area_product .merit_list li {padding:20rem 0;}
	.area_product .prod_list img {margin-bottom:10rem;}

	.area_product .merit_list li > div {margin-top:20rem;}

	.product01 .merit_list li:nth-child(4) > div {margin-top:20rem;}
	.product01 .ss02 .grid_w33 {grid-template-columns:1fr;}
	.product01 .ss02 .grid_w33::before {position:relative; width:100%; transform:none;}
	.product01 .ss03 .wrapper {flex-wrap:wrap;}
	.product01 .ss03 .info > div:first-child {align-items:flex-start; flex-wrap:wrap; margin-bottom:10rem;}
	.product01 .ss03 .info > div:first-child .ss_title {margin-bottom:5rem;}
	.product01 .ss03 .info .grid_w50 {gap:10rem 0;}
	.product01 .ss03 .info .grid_w33 li p {padding:8rem;}

	.product02 .ss02 .grid_w33 {grid-template-columns:1fr;}
	.product02 .ss02 ul {padding:35rem 30rem 30rem; margin-top:50rem;}

	.product03 .ss04 {display:grid; grid-template-columns: 1fr; gap:40rem 0;}
	.product03 .ss04 .grid_w50 {gap:20rem 0;}
	.product03 .ss04 img {width:100%;}
	

	.product05 .prod_list {gap:20rem;}

}


@media (max-width:460px) {
	
	.dot_list li:before {width:2px; height:2px;}

	.area_history .box section {grid-template-columns:1fr; gap:10rem 0;}
	.area_history .box section div {width:100%; max-width:none; padding:20rem; box-sizing:border-box;}
	
	.area_location ul { grid-template-columns:1fr;}
	.area_location ul li {display:flex; align-items:center; padding:20rem 10rem;}
	.area_location ul li span {margin-bottom:0; padding-right:15rem;}


}