@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

.sub .inr {max-width: 1400rem !important; margin: 0 auto;}

/* sub visual */
.subVisual{ overflow: hidden; align-items: center; justify-content: center; position:relative; height:450rem; color: #fff;}
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/sub_visual1.jpg'); }
.subVisual.product::before{ background-image:url('/images/content/sub_visual2.jpg'); }
.subVisual.customer::before{ background-image:url('/images/content/sub_visual3.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/sub_visual3.jpg'); }
.subVisual .inr {max-width: 1400rem; height: 100%; display: flex; align-items: center;}
.subVisual_title [data-menu-snb="1"]{ font-size: var(--fs50); font-weight: 700; padding-top: 100rem; text-shadow: 6rem 8rem 30rem rgb(0 0 0 / 30%);}
.subVisual_title span {display: block; font-size: 17rem; font-weight: 300; margin-top: 10rem; }

@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_title > * { opacity: 0; animation: subVisualText .6s .2s both; }
	.subVisual_title span { animation-delay: .4s; }

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

/* lnb */
.lnb{ background: var(--primary); width: 100%; text-align:center; font-size:18rem; font-weight: 500; color: var(--white); z-index:5; }
.lnb ul{display: flex; justify-content: center; margin: 0 auto; }
.lnb li{ padding: 0 30rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 72rem;  opacity: .5;}
.lnb a:hover,
.lnb a.isVisiting{ opacity: 1; }
.lnb a.isVisiting::before{ content: ''; position: absolute; inset: 0; border-top: 2px solid currentColor; }
@media(max-width:767px){
	.lnb{ overflow: auto clip; white-space:nowrap;}
	.lnb ul{ display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb li{ display:table-cell; }
}

/* common content */
main#content{ min-height:300px; padding: 100rem 0 90rem; }
.sub_title {margin-bottom: 50rem;}
.sub_title small {display: block; font-size: var(--fs18); margin-bottom: 18rem; font-weight: 600; color: var(--primary);}
.sub_title h2 {font-size:var(--fs35); font-weight:600;}
#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){
	main#content {}
}


/* 매장찾기 */
.area_find{position:relative; margin-top:20rem;}
.area_find .find_wrap{position:relative; background:#fff; overflow:hidden;}
.area_find .box_double.shop{position:relative; float:left; background:#fff; margin:0;}
.area_find .box_double.shop div.search{width:400rem;}
.area_find .box_double.shop div.search em{padding:15rem 0; background: var(--primary); font-size:18rem; color:#fff;}
.area_find .box_double.shop div.search{padding:0;}
.area_find .box_double.shop div.search:before{display:none;}
.area_find .box_double.shop div.search .form .button{min-width:auto; width:40rem; background: #000 url(/images/content/icon_search.png) no-repeat 50% 50%;}
.area_find .box_double.shop div.search .form{padding-top:10rem}
.area_find .box_double.shop div.search .form input[type="text"]{width: calc(100% - 35rem);}
.area_find .box_double.shop .list_search{overflow-y:scroll; width:90%; height:460rem; margin:15rem auto;}
.area_find .box_double.shop .list_search li a{display:block; padding:10rem 0; border-bottom:1px solid #eee; text-align:left;}

.info_search_image{position:absolute; right:35%; top:44%}
.info_search_text{position:relative; max-width:460rem; width:max-content; border:1px solid #ddd; transform: translateX(-6%); }
.info_search_text .button{z-index:9; position:absolute; right:10rem; top:10rem; min-width:auto; width:30rem; height:30rem; padding:0;}
.info_search_text h3{position:relative; background:var(--primary); padding:15rem 40rem 15rem 40rem;  color:#fff;}
.info_search_text h3:before{content:""; position:absolute; left:10rem; top:10rem; width:20rem; height:25rem;background:url(/images/content/icon_map.svg) no-repeat 50% 50%;}
.info_search_text p{position:relative; padding:10rem; background:#fff; font-size:13pt; line-height:100%; white-space:initial; }
.info_search_text p:last-of-type::before{content: ""; position:absolute; left:50%; ; bottom:-16rem; width:14rem; height:14rem; margin-left:-7.5rem; background:#fff; transform:translateY(-51%) rotate(-45deg); border-left:1px solid #ddd; border-bottom:1px solid #ddd;}

.store_map{float:right; width:calc(100% - 430rem); height:600rem;}
@media (max-width: 1023px) {
	.area_find .box_double.shop {position: static; float:none; }
	.area_find .box_double.shop div.search {width: 100%; }
	.store_map{float:none; width:100%; height:500rem;}
}


/* about1 - 인사말 */
.about1 {}
.about1 .sub_title {margin-bottom: 0;}
.about1__img {width:100%; margin: 30rem 0 40rem; }
.about1__img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.about1__txt dl {margin: 0 25rem;}
.about1__txt dd {font-size: var(--fs18); line-height: 1.8; font-weight: 300;}
.about1__txt dd + dd {margin-top: 25rem;}
.about1__txt dd.ceo {display: flex; align-items: center; gap: 20rem; justify-content: flex-end; font-weight: 700; margin-top: 40rem;}
.about1__txt dd.ceo .sign {font-size: var(--fs45); font-weight: 500; font-family: var(--font-let); margin-bottom: 10rem;}

@media (max-width: 767px) {
	.about1__img {margin: 20rem 0; height: 200rem;}
	.about1__txt h3 span {font-size: 15rem; font-weight: 600;}
	.about1__txt dl {margin: 0;}
	.about1__txt dd + dd {margin-top: 20rem;}
	.about1__txt dd.ceo {margin-top: 20rem;}

}

/* about2 - 연혁 */
.about2 {}
.hisTop {position: relative; display: flex; align-items: center; justify-content: center; width: 190rem; height: 190rem; border-radius: 50%; background: -webkit-linear-gradient( -21deg, #38d430 0%, #009e44 100%); box-shadow: 0px 8px 25px 4px rgba(0, 174, 66, 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(0, 174, 66, 0.1); 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: 80rem;}
.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: #009e44;}
.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 #009e44;}
.hisCon .his-date {}
.hisCon .his-date dd {font-size: var(--fs17); line-height: 1.7; font-weight: 300;}
.hisCon .his-date dd + dd {margin-top: 4rem;}

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

@media (max-width: 767px) {
	.hisTop {width: 170rem; height: 170rem;}
	.hisTop::before {width: 210rem; height: 210rem;}
	.hisCon .his-list {padding-top: 40rem;}
	.hisCon .his-list:nth-child(1) {padding-top: 60rem;}
	.hisCon .his-list:nth-child(even) .his-year, .hisCon .his-list:nth-child(even) .his-date {padding-left: 20rem;}
	.hisCon .his-list:nth-child(odd) .his-year, .hisCon .his-list:nth-child(odd) .his-date {padding-right: 20rem;}
	.hisCon .his-date dd {font-size: 15rem;}
	.hisCon .his-year::before {width: 8rem; height: 8rem;}
	.hisCon .his-list:nth-child(even) .his-year::before {left:-4rem;}
	.hisCon .his-list:nth-child(odd) .his-year::before {right: -4rem;}

}

/* about3 - 오시는길 */
.about3 {}
.about3 .sub_title {margin-bottom: 40rem;}
.mapImg {text-align: center; padding: 70rem; box-sizing: border-box; border-radius: 10rem; border: 1rem solid #e5e5e5;}
.mapImg img {width: 100%; max-width:100%; object-fit: contain;}
.mapList li {display: flex; justify-content: space-between; align-items: center; padding: 70rem 0; box-sizing: border-box; border-bottom: 1rem solid #e5e5e5;}
.mapList .map {padding: 0; width: 55%;}
.mapList .map iframe {border-radius: 10rem; border: 1px solid #eee !important; box-sizing: border-box; background: #f1f3f4; overflow: hidden;}
.mapList .info {width: 50%; padding: 0; margin-right: 5%;}
.mapList .info h3 {font-size: var(--fs35); font-weight: 500; margin-bottom: 35rem;}
.mapList .info dd {font-size: var(--fs18); font-weight: 300; display: flex; align-items: center;}
.mapList .info dd + dd {margin-top: 12rem;}
.mapList .info strong {font-weight: 600; width: 80rem;}


@media (max-width: 767px) {
	.mapImg {padding: 20rem;}
	.mapList li {flex-direction: column; padding: 40rem 0; }
	.mapList .map {width: 100%;}
	.mapList .info {width: 100%; margin-right: 0; margin-bottom: 30rem;}
	.mapList .info h3 {margin-bottom: 20rem;}
	.mapList .info dd {font-size: 15rem; flex-direction: column; align-items: flex-start;}
	.mapList .info dd + dd {margin-top: 10rem;}
	.mapList .info strong {width: 60rem;}
}