@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:450rem; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
/* 서브 비주얼 작업 시 top.html:69 파일명, 숫자 양식 맞춰주세요 */
.subVisual.about::before{ background-image:url('/images/content/sub_visual-1.webp'); }
.subVisual.product::before{ background-image:url('/images/content/sub_visual-2.webp'); }
.subVisual.video::before{ background-image:url('/images/content/sub_visual-3.webp'); }
.subVisual.store::before{ background-image:url('/images/content/sub_visual-4.webp'); }
.subVisual.as::before{ background-image:url('/images/content/sub_visual-5.webp'); }
.subVisual.customer::before{ background-image:url('/images/content/sub_visual-6.webp'); }
.subVisual.common::before{ background-image:url('/images/content/sub_visual-7.webp'); }

.subVisual .inr {display: flex; flex-direction: column; padding-top: 60rem; }
.subVis__tit {}
.subVis__tit [data-menu-snb="1"]{font-size: var(--fs50); font-weight: 700; margin-bottom: 15rem;}
.subVis__tit p {font-size: var(--fs18); font-weight: 300;}

@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 .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }

	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* lnb */
.lnbWrap {position: relative; height:66rem; border-bottom:1px solid #e1e1e1; z-index: 5;}
.lnb_inr {display:grid; grid-template-columns: 66rem 240rem 300rem; height: 100%;}
.lnb_inr > * {height: inherit; border-right:1px solid #e1e1e1;}
.lnbHome {display:flex; align-items:center; justify-content:center; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1;}
.lnbHome__svg {height: 15rem; fill: var(--black);}
.lnbDepth {transition: 0s linear;}
.lnbDepth > span {height: 100%; display:flex; align-items:center; justify-content:space-between; padding: 0 25rem 0 20rem; box-sizing: border-box; font-size: 18rem; color: var(--black);}
.lnbDepth.lnb2 {position: relative; cursor: pointer;}
.lnbDepth.lnb2 > span {position: relative;}
.lnbDepth.lnb2 > span:after {content:''; display:block; position:absolute; top: 45%; right:20rem; display: inline-block; width: 7rem; height: 7rem; border: solid var(--black); border-width: 0 1px 1px 0; transform: rotate(45deg);}
.lnbDepth nav {display:none; position:absolute; right:-1rem; top:100%; width:calc(100% + 2px); border-top:0; z-index:3; background:#fff;}
.lnbDepth .sub_menu a {display:block; padding:10rem 25rem; color:#888; transition:0.2s;}
.lnbDepth .sub_menu a:hover {opacity: 0.5;}
.lnbDepth .sub_menu {border: 1rem solid #e1e1e1; border-top: 0; padding: 10rem 0; box-sizing: border-box;}


@media(max-width:1279px){
    .lnb_inr{margin:0; width:100%; grid-template-columns: 50rem 1fr 1fr}
}
@media(max-width:767px){
	.lnb_inr{ grid-template-columns: 50rem 1fr 1fr}
    .lnbHome{width:50rem;}
    .lnbHome img{width:22rem;}
    .lnbDepth > span{font-size: 15rem; padding:0 15rem;}
    .lnbDepth > span:after{margin-top:-2rem; right:15rem; width:9rem; height:9rem;}
    .lnbDepth ul a{padding:15rem 15rem;}
}
/* common content */
.sub {min-height:300px; padding: 100rem 0;}
.sub_title {text-align: center; margin-bottom: 50rem;}
.sub_title small {display: block; font-size: var(--fs17); text-transform: uppercase; letter-spacing: 0.5rem; font-weight: 600; color: var(--primary); margin-bottom: 20rem;}
.sub_title h2 {font-size:var(--fs40); font-weight: 700; }
#content:has(.join_area) .sub_title{ display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */

.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:767px){
	.sub {padding: 65rem 0;}
	.sub_title {margin-bottom: 30rem;}
	.sub_title small {margin-bottom: 10rem;}
}

/* 매장찾기 */
.store_locator{ --border: #e0e6e9; display: grid; gap: 30rem;
	.search_panel{ position: relative; border: 1px solid var(--border); }
	.heading{ height: 60rem; padding: 15rem; background: var(--primary); font-size: 18rem; font-weight: 600; color:#fff; text-align: center; }
	.form{ padding: 15rem 20rem; }
	#keyword{ width: 100%; height: 60rem; padding: 20rem; }
	.search_results{ overflow-y: auto; padding: 15rem 20rem; border-top: 1px solid var(--border); }
	.store-btn{ width: 100%; padding: 10rem 0; border-bottom: 1px solid #eee; text-align: left; }
	.results-name{ font: 700 18rem var(--font-pre); }
	.results-address{ margin-top: 10rem; font-weight: 300; color: #555; }
	.results-tel{ display: none; margin-top: 10rem; font-weight: 300; color: #555; }

	.map_view{ width: 100%; height: 600rem; border: 1rem solid #eee;}
	.store_info{ position: relative; width: 330px; background: #fff; border: 1px solid #111; }
	.store_info::before{ content: ''; position:absolute; left:50%; ; bottom:-9rem; width:16rem; height:16rem; background:#fff; transform:translateX(-50%) rotate(-45deg); border-left:1px solid #111; border-bottom:1px solid #111;}
	.info-header{ display: flex; justify-content: space-between; align-items: center; gap: 8rem; padding: 15rem 20rem; border-bottom: 1rem dotted #ddd;}
	.location-icon{ width: 20rem; height: 25rem; background: url('/images/content/icon_map.svg') no-repeat 50% / contain; }
	.info-name{ position: relative; font-size: var(--fs18); font-weight: 600;}
	.info-close{width: 15rem;}
	.info-close img{width: 100%}
	.info-body{ padding: 20rem; color: #555; font-weight: 300;}
	.info_swiper .swiper-slide{ aspect-ratio: 16/9; }
	.swiper-slide{ background: no-repeat 50% / cover; }
	.info-address{ white-space: normal; }
	.info-tel{ margin-top: 10rem; display: inline-block; }
	/* .info_search_image{position:absolute; right:35%; top:44%} */
	@media(min-width:768px){
		&{ grid-template-columns: 400rem 1fr; }
		.search_results{ height: 448rem; }
		.store_info:not(:has(.swiper)){ translate: -5% 76px; }
		.store_info:has(.swiper){ translate: -5% 244px; }
	}
	@media(max-width:767px){
		.search_results{ height: 250rem; }
		.store_info:not(:has(.swiper)){ translate: -5% 69px; }
		.store_info:has(.swiper){ translate: -5% 234px; }
	}
}

.history.sub{
	.year-ul{ position: relative; display: grid; gap: 10rem; padding: 20rem 0; }
	.year{ font: 900 40rem var(--font-pre); }
	.month-ul{ margin-top: 20rem; display: grid; gap: 20rem; }
	.month-li{ display: flex; gap: 20rem; }
	.month{ min-width: 3ch; font: 700 20rem var(--font-pre); }
	.day-ul{ display: grid; gap: 5rem; }
	.day-li{ display: flex; gap: 10rem; }
	.day{ min-width: 3ch; font: 500 20rem var(--font-pre); }
	/* .day:empty{ display: none; } */
}
@media(min-width:1280px){
	.year-ul::before{content:''; display:block; position:absolute; inset: 0 50%; border-right:1px solid #e1e1e1; }
	.year-li{ width: 50%; }
	.year-li:nth-child(odd){ margin-left: auto; padding-left: 50rem; }
	.year-li:nth-child(even){ padding-right: 50rem; text-align: right; }
	.year-li:nth-child(even) .month-li{ flex-direction: row-reverse; }
	.year-li:nth-child(even) .day-li{ flex-direction: row-reverse; }
}

/* about1 - 인사말 */
.about1 {position: relative; padding-bottom: 100rem; margin-bottom: -100rem; }
.about1::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 75%; background: #f6f7f9; z-index: -1;}
.about1 .inr {display: flex;gap: 50rem;justify-content: space-between;}
.about1__img img {width: 100%; max-width: 100%;border-radius: 10rem;}
.about1__txt {width: 65%}
.about1__txt h2 small {display: block; font: 500 16rem var(--font-rem); text-transform: uppercase; letter-spacing: 0.5rem; color: var(--primary); margin-bottom: 20rem;}
.about1__txt h2 {font-size: var(--fs35); font-weight: 700; margin-bottom:50rem;}
.about1__txt dd {font-size: var(--fs17); line-height: 1.7; font-weight: 300; color: #555;}
.about1__txt dd + dd {margin-top: 28rem;}
.about1__txt dd.ceo {color: var(--black); display: flex; align-items: center; gap: 15rem; margin-top: 35rem;}
.about1__txt dd.ceo strong {font-weight: 600;}
.about1__txt dd.ceo .sign {font-size: var(--fs30);font-family: var(--font-roe); margin-top: -5rem;}

@media(max-width:767px){
	.about1 .inr {flex-direction: column-reverse; gap: 40rem;}
	.about1__txt {width: 100%;}
	.about1__txt h2 {margin-bottom: 30rem;}
	.about1__txt dd + dd {margin-top: 20rem;}
	.about1__txt dd.ceo {gap: 10rem; margin-top: 20rem;}
}

/* about2 - 회사개요 */
.about2 {}
.about2__img {}
.about2__img img {width: 100%; max-width: 100%; border-radius: 8rem;}
.about2__txt {font-size: var(--fs18); line-height: 1.8;color: #555; margin: 60rem 0; text-align: center;}
.about2__txt p + p {margin-top: 25rem;}
.about2__box {display: flex; gap: 50rem; margin-top: 50rem; padding-top: 50rem; border-top: 1rem solid #e5e5e5;}
.about2__video {position: relative; text-align: center; padding-bottom: 100rem; margin-bottom: -100rem;}
.about2__video::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: #f6f7f9; z-index: -1;}
.about2__video video {width:80%; border-radius: 10rem;}


@media(max-width:767px){
	.about2__img {height: 200rem;}
	.about2__img img {width: 100%; height: 100%; object-fit: cover;}
	.about2__txt {margin: 30rem 0;}
	.about2__txt p + p {margin-top: 15rem;}
	.about2__video {padding-bottom: 50rem; margin-bottom:-65rem;}
	.about2__video video {width: 100%;}
}


/* about3 - 연혁 */
.hisTop {position: relative; display: flex; align-items: center; justify-content: center; width: 190rem; height: 190rem; border-radius: 50%; background: -webkit-linear-gradient( 45deg, #ff6739 0%, #d82c26 100%); box-shadow: 0px 8px 25px 4px rgba(216, 44, 38, 0.25); color: #fff; font-size: var(--fs30); font-weight: 500; margin: 0 auto;}
.hisTop::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 240rem; height: 240rem; border-radius: 50%; background: rgba(216, 44, 38, 0.05); z-index: -1;  animation: circle 1.1s infinite alternate;}
.hisCon {position: relative; display: flex; flex-direction: column;}
.hisCon::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1rem; height: 100%; background: #ddd;}
.hisCon .his-list {position: relative; width: 50%; padding-top: 55rem;}
.hisCon .his-list:nth-child(1) {padding-top:100rem;}
.hisCon .his-list:nth-child(odd) {text-align: right; align-self: flex-start; }
.hisCon .his-list:nth-child(even) {align-self: flex-end;}
.hisCon .his-list:nth-child(even) .his-year, .hisCon .his-list:nth-child(even) .his-date {padding-left: 100rem;}
.hisCon .his-list:nth-child(odd) .his-year, .hisCon .his-list:nth-child(odd) .his-date {padding-right: 100rem;}
.hisCon .his-year {position: relative; font-size: var(--fs40); font-weight: 800; margin-bottom: 20rem;}
.hisCon .his-year::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 12rem; height:12rem; border-radius: 50%; background: var(--primary)}
.hisCon .his-list:nth-child(even) .his-year::before {left:-6rem;}
.hisCon .his-list:nth-child(odd) .his-year::before {right: -6rem; background: #fff; border: 2rem solid var(--primary);}
.hisCon .his-date dd {display: flex; align-items: center; gap: 15rem; font-size: var(--fs17); line-height: 1.7; font-weight: 300;}
.hisCon .his-date dd + dd {margin-top:6rem;}
.hisCon .his-date b {min-width: 25rem; font-weight: 600;}
.hisCon .his-list:nth-child(odd) .his-date dd {flex-direction: row-reverse;}

@keyframes circle {
	0% {transform: translate(-50%,-50%) scale(0);}
	100% {transform: translate(-50%,-50%) scale(1);}
  }

@media (max-width: 767px) {
	.hisTop {display: none;}
	.hisCon .his-list:nth-child(1) {padding-top:0;}
	.hisCon::before {left: 0; transform: translateX(0);}
	.hisCon .his-list {width: 100%; padding-top: 40rem;}
	.hisCon .his-year {margin-bottom: 10rem;}
	.hisCon .his-list:nth-child(odd) {text-align: left;}
	.hisCon .his-list:nth-child(odd) .his-date dd {flex-direction: row;}
	.hisCon .his-list:nth-child(odd) .his-year, .hisCon .his-list:nth-child(odd) .his-date {padding-right: 0; padding-left: 30rem;}
	.hisCon .his-list:nth-child(even) .his-year, .hisCon .his-list:nth-child(even) .his-date {padding-left: 30rem;}
	.hisCon .his-date dd {gap: 10rem; align-items: flex-start;}
	.hisCon .his-year::before {width: 10rem; height: 10rem;}
	.hisCon .his-list:nth-child(even) .his-year::before {left: -5rem;}
	.hisCon .his-list:nth-child(odd) .his-year::before {right: 0; left: -5rem;}
}


/* about4 - 인증서 */
.about4 h3 {position: relative; font-size: var(--fs30); font-weight: 700; margin-bottom: 40rem; padding-left: 25rem;}
.about4 h3::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6rem; height: 26rem; background: linear-gradient(-45deg, #e77326 50%, #d82c26 50%)}
.about4 .modal-list {display: grid; gap: 40rem 40rem; grid-template-columns: repeat(4,1fr); text-align: center;}
.about4 .modal-list .img {position: relative; display: block; background: #f6f7f9; padding: 30rem 20rem; box-sizing: border-box; margin-bottom: 15rem; border: 2rem solid transparent;}
.about4 .modal-list .img:hover {border: 2rem solid var(--primary);}
.about4 .modal-list .img:hover::before {display: block;}
.about4 .modal-list .img::before {display: none; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50rem; height: 50rem; border-radius: 50%; background: var(--primary) url(/images/common/ico_search.svg) no-repeat center; background-size: 20rem;}
.about4 .modal-list .img img {width: 70%; max-width: 100%;}
.about4 .modal-list p {font-size: var(--fs18); font-weight: 500;}
.about4 > .ssBox + .ssBox {margin-top: 100rem;}

.tab-container {overflow: hidden; visibility: hidden; height: 0;}
.tab-container.active {overflow: visible; visibility: visible; height: 100%;}
.tab-menu {width: 100%; display: flex; margin-bottom: 60rem; }
.tab-menu li {font-size: var(--fs17); cursor: pointer; width: 100%; padding: 0 15rem; height: 70rem; display: inline-flex; align-items: center; justify-content: center; color: #888; border: 1rem solid #e5e5e5;}
.tab-menu li + li {border-left: 0;}
.tab-menu li.active {background: var(--primary); color: #fff; border-color: var(--primary);}
.modal-con {display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.modal-con__img {position: absolute;top: 50%;left: 50%;width: 30%;transform: translate(-50%, -50%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);}
.modal-con__img img {width: 100%;}
.modal-con .close {position: absolute; top: 0; right: -108rem; display: block; width: 80rem; height: 80rem; border-radius: 100%; background: #111;}
.modal-con .close::before {content: ''; position: absolute; top: 50%; left: 50%; width: 23rem; height: 3rem; background: #fff; transform: translate(-50%, -50%) rotate(45deg);}
.modal-con .close::after {content: ''; position: absolute; top: 50%; left: 50%; width: 23rem; height: 3rem; background: #fff; transform: translate(-50%, -50%) rotate(-45deg);}

@media(max-width:767px){
	.tab-menu {flex-wrap: wrap;margin-bottom: 40rem;}
	.tab-menu li {width: 50%; height: 60rem;}
	.tab-menu li + li {border-left: 1rem solid #e5e5e5;}
	.tab-menu li:nth-child(n+3) {border-top: 0;}
	.tab-menu li:nth-child(even) {border-left: 0;}
	.about4 h3 {margin-bottom: 25rem; padding-left: 20rem;}
	.about4 h3::before {width: 5rem; height: 20rem;}
	.about4 .modal-list {gap: 20rem 15rem; grid-template-columns: repeat(2,1fr);}
	.about4 .modal-list .img {padding: 20rem 10rem; margin-bottom: 10rem;}
	.modal-con__img {width: 55%;}
	.modal-con .close {right: -50rem; width: 40rem; height: 40rem;}
	.modal-con .close::before {width: 15rem; height: 2rem;}
	.modal-con .close::after {width: 15rem; height: 2rem;}
}

/* about5 - 오시는길 */
.about5 {}
.about5 .root_daum_roughmap {width: 100%;}
.about5 .root_daum_roughmap .wrap_map {height: 450rem; border-bottom: 1px solid rgba(0,0,0,.1);}
.about5 .root_daum_roughmap .wrap_controllers {display: none;}
.about5__traffic {margin-top: 30rem;}
.about5__traffic li {display: flex; padding: 50rem 0; border-bottom: 1rem solid #e5e5e5;}
.about5__traffic .icon {display: flex; align-items: center; justify-content: center; width: 110rem; height: 110rem; margin-right: 60rem; border: 1rem solid #e5e5e5; border-radius: 50%; box-sizing: border-box;}
.about5__traffic dt {font-size: var(--fs25); font-weight: 700; margin-bottom: 20rem;}
.about5__traffic dd {position: relative; font-size: var(--fs17); font-weight: 300; color: #555; padding-left: 18rem;}
.about5__traffic dd::before {content: ''; position: absolute; top: 10rem; left: 0; width: 5rem; height: 5rem; border-radius: 50%; background: #e5e5e5;}
.about5__traffic b {font-weight: 400;}
.about5__traffic dd + dd {margin-top: 14rem;}

@media(max-width:767px){
	.about5__traffic {margin-top: 0;}
	.about5__traffic li {flex-direction: column; gap: 25rem; padding: 45rem 0;}
	.about5__traffic .icon {width: 60rem; height:60rem; margin-right: 0}
	.about5__traffic .icon img {height: 22rem;}
	.about5__traffic dt {margin-bottom: 10rem;}
	.about5__traffic dd + dd {margin-top: 10rem;}
	.about5__traffic dd {padding-left: 15rem;}
	.about5__traffic dd::before {top: 8rem;}
	.about5__traffic b {display: block; font-weight: 500;}
}

/* 제품소개 공통 표 */
.productView .conts table *{ border: 1px solid gray; text-align: center;  }
.productView .conts table + table{ margin-top: 20rem; }
.productView .btn-box{margin-top:50rem;}
.productView .btn-box .button.lg{min-width:220rem; height:65rem;}
.productView .btn-box .button.red{background-color:var(--primary);}
.productView .btn-box .button span{display:flex; align-items:center; gap:10rem;}
.productView .btn-box .button i{font-size:20rem;}
@media(max-width:767px){
	.productView .btn-box .button.lg{min-width:180rem; height:50rem;}
}


/* 제품 A/S 및 시연 - as */
.mt60 {margin-top: 60rem;}
.as .sub_title {text-align: left;}
.asTit {margin-bottom: 40rem;}
.asTit p {font-size: var(--fs20); margin-top: 20rem;}
.sub-h3 {position: relative; font-size: var(--fs30); font-weight: 700; padding-left: 25rem;}
.sub-h3::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6rem; height: 26rem; background: linear-gradient(-45deg, #e77326 50%, #d82c26 50%)}
.asList {display: grid; grid-template-columns: repeat(2,1fr); gap: 20rem;}
.asList em {font-weight: 800; font-size: var(--fs18); color: var(--primary);}
.asList li {padding:40rem 40rem; box-sizing: border-box; border: 1rem solid #e5e5e5;}
.asList dt {margin: 15rem 0; font-size: var(--fs20); font-weight: 700;}
.asList dd {font-size: var(--fs18); font-weight: 300;}
.asList .icon {text-align: right; margin-top: 10rem;}
.asList img {height:60rem;}
.as .note {padding: 40rem; box-sizing: border-box; background: #f8f8f8; margin-top: 30rem;}
.as .note p {font-size: var(--fs20); font-weight: 600; margin-bottom: 15rem;}
.as .note dd {color: #555; font-size:var(--fs18); color:#111;}
.as .note dd+dd {margin-top: 8rem;}
.as .note ul {display:flex; flex-direction:column; gap:5rem; margin-top:20rem; padding:20rem; background: var(--white); border:1rem solid #e5e5e5; border-left: 2rem solid var(--primary);}
.as .note ul li{position:relative; padding-left:15rem; font-weight:300;}
.as .note ul li:before{content:''; display:block; position:absolute; left:0; top:11rem; width:4rem; height:4rem; background-color:#bbb;}

@media(max-width:767px){
	.mt60 {margin-top: 40rem;}
	.asTit {margin-bottom:25rem;}
	.sub-h3 {padding-left: 18rem;}
	.sub-h3::before {width: 5rem; height: 20rem;}
	.asList { grid-template-columns: repeat(1,1fr); gap: 15rem;}
	.asList li {padding: 25rem;}
	.asList .icon {margin-top: 10rem;}
	.asList img {height: 45rem;}
	.as .note {padding: 30rem 20rem; margin-top: 20rem;}
	.as .note dd+dd {margin-top: 5rem;}
}