@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height:450rem; text-align:center; color: #fff; }
.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.location::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.board::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual.jpg); }
.area_subVisual h2{ font-size: var(--fs40); }
@media(prefers-reduced-motion:no-preference){
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.area_subVisual .inr *{ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual .inr *:nth-child(2){ animation-delay: .4s; }
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}
@media(max-width:1279px){
	.area_subVisual{height:300rem;}
}

/* lnb */
.lnb { left:0; bottom:0; width:100%; background: #2b2b2b; border-bottom:1px solid #ddd; text-align:center; z-index:11;}
.lnb ul {margin: 0 auto; width:100%; height: 4.0625em;}  
.lnb ul li {display:inline-block;padding: 19px 28px;}
.lnb ul li:first-child {padding-left:0 ;background :none} 
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {font-weight: 500;font-size:18rem;color: #dadada;transition: 0.2s;}
.lnb ul li:hover a, 
.lnb ul li a.on{ color: var(--primary); }
@media (max-width:767px){
	.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:first-child{padding-left:15px;}
	.lnb ul li:last-child{padding-right:15px;}
	.lnb ul li a{display:block; padding:0; white-space:nowrap;}
	.lnb ul li a.on::before{ width: 4px; height: 4px; }
	.lnb ul li:first-child a.on::before{ right: calc( 100% - 10px ); }
}

/* common content */
#content{ min-height:300px; padding: 90rem 0; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }

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


/* 매장찾기 */
.area_find{position:relative; margin-top:20px;}
.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:400px;}
.area_find .box_double.shop div.search em{padding:15px 0; background: var(--primary); font-size:18px; 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:40px; background: #000 url(../images/content/icon_search.png) no-repeat 50% 50%;}
.area_find .box_double.shop div.search .form{padding-top:10px}
.area_find .box_double.shop div.search .form input[type="text"]{width: calc(100% - 35px);}
.area_find .box_double.shop .list_search{overflow-y:scroll; width:90%; height:460px; margin:15px auto;}
.area_find .box_double.shop .list_search li a{display:block; padding:10px 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:460px; width:max-content; border:1px solid #ddd; transform: translateX(-6%); }
.info_search_text .button{z-index:9; position:absolute; right:10px; top:10px; min-width:auto; width:30px; height:30px; padding:0;}
.info_search_text h3{position:relative; background:var(--primary); padding:15px 40px 15px 40px;  color:#fff;}
.info_search_text h3:before{content:""; position:absolute; left:10px; top:10px; width:20px; height:25px;background:url(../images/content/icon_map.svg) no-repeat 50% 50%;}
.info_search_text p{position:relative; padding:10px; 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:-16px; width:14px; height:14px; margin-left:-7.5px; background:#fff; transform:translateY(-51%) rotate(-45deg); border-left:1px solid #ddd; border-bottom:1px solid #ddd;}

.store_map{float:right; width:calc(100% - 430px); height:600px;}
@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:500px;}
}

/* vw 반응형을 활용한 사이트입니다
16px은 16rem처럼 단위를 바꿔서 사용해주세요
글씨 크기의 경우 base에 있는 변수 var(--fs16)을 활용하세요 */