@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-se="slide-left"], [data-se="slide-right"], [data-se="flip-Y"])){ overflow: clip visible; }
	span[data-se]{ display: inline-block; }
	.seActive [data-se]:not([data-se*="parallax"], [data-se^="clip-"]),
	.seActive[data-se]:not([data-se*="parallax"], [data-se^="clip-"]){ transition-duration: .6s; }
	[data-se="clip-right"]{ clip-path: inset(0 100% 0 0); }
	[data-se="clip-left"]{ clip-path: inset(0 0 0 100%); }
	[data-se="clip-down"]{ clip-path: inset(0 0 100% 0); }
	[data-se="slide-up"]{ transform: translateY(40rem); }
	[data-se="slide-left"]{ transform: translateX(40rem); }
	[data-se="slide-right"]{ transform: translateX(-40rem); }
	[data-se*="flip-"]{ backface-visibility: hidden; }
	[data-se="flip-up"]{ transform: perspective(2500rem) rotateX(-100deg); }
	[data-se="flip-Y"]{ opacity: 0; }
	.seActive[data-se*="clip-"]{ clip-path: inset(0); }
	[data-se*="slide-"]:not(.seActive){ opacity: 0; }
	.seActive[data-se*="slide-"]{ transform: translate(0); }
	.seActive[data-se*="flip-"]{ transform: perspective(2500rem) rotateX(0deg); }
	.seActive[data-se="flip-Y"]{ animation: flip-Y 1s both; }
	@keyframes flip-Y {
		0%{ transform: perspective(400rem) rotateY(0deg); opacity: 0; }
		20%{ transform: perspective(400rem) rotateY(-30deg); }
		50%{ transform: perspective(400rem) rotateY(20deg); }
		75%{ transform: perspective(400rem) rotateY(-10deg); }
		100%{ transform: perspective(400rem) rotateY(0deg); opacity: 1; }
	}
	.seActive [data-se-delay="50"], .seActive[data-se-delay="50"]{ transition-delay: .05s; }
	.seActive [data-se-delay="100"], .seActive[data-se-delay="100"]{ transition-delay: .1s; }
	.seActive [data-se-delay="150"], .seActive[data-se-delay="150"]{ transition-delay: .15s; }
	.seActive [data-se-delay="200"], .seActive[data-se-delay="200"]{ transition-delay: .2s; }
	.seActive [data-se-delay="250"], .seActive[data-se-delay="250"]{ transition-delay: .25s; }
	.seActive [data-se-delay="300"], .seActive[data-se-delay="300"]{ transition-delay: .3s; }
	.seActive [data-se-delay="350"], .seActive[data-se-delay="350"]{ transition-delay: .35s; }
	.seActive [data-se-delay="400"], .seActive[data-se-delay="400"]{ transition-delay: .4s; }
	.seActive [data-se-delay="450"], .seActive[data-se-delay="450"]{ transition-delay: .45s; }
	.seActive [data-se-delay="500"], .seActive[data-se-delay="500"]{ transition-delay: .5s; }
	.seActive [data-se-delay="600"], .seActive[data-se-delay="600"]{ transition-delay: .6s; }
	.seActive [data-se-delay="700"], .seActive[data-se-delay="700"]{ transition-delay: .7s; }
	@media(min-width: 768px){
		[data-se] [data-se="clip-right"]{ clip-path: inset(0 100% 0 0); }
		[data-se] [data-se="clip-left"]{ clip-path: inset(0 0 0 100%); }
		[data-se] [data-se="clip-down"]{ clip-path: inset(0 0 100% 0); }
		[data-se] [data-se="slide-up"]{ transform: translateY(40rem); opacity: 0; }
		[data-se] [data-se="slide-left"]{ transform: translateX(40rem); opacity: 0; }
		[data-se] [data-se="slide-right"]{ transform: translateX(-40rem); opacity: 0; }
		.seActive[data-se] [data-se*="clip-"]{ clip-path: inset(0); }
		.seActive[data-se] [data-se*="slide-"]{ transform: translate(0); opacity: 1; }
		.seActive[data-se] [data-se*="flip-"]{ transform: perspective(2500rem) rotateX(0deg); }
		.seActive[data-se]:not([data-se-offset]) [data-se]{ transform: translate(0); opacity: 1; }
		[data-se-column] [data-se].seActive{ transition-delay: calc(var(--index) * calc(var(--delay) * 1ms)); animation-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }
	}
	@media(min-width:1280px){
		.seActive[data-se^="clip-"]{ transition-duration: 1s; }
		[data-se-column="2"] [data-se].seActive:nth-child(2n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="2"] [data-se].seActive:nth-child(2n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] [data-se].seActive:nth-child(3n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] [data-se].seActive:nth-child(3n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] [data-se].seActive:nth-child(3n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+6){ transition-delay: calc(5 * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 1279px){
		.seActive[data-se^="clip-"]{ transition-duration: .6s; }
		[data-se-column] [data-se*="slide-"]{ transform: translateY(40rem); }
		[data-se-column] [data-se*="slide-"].seActive{ transform: translate(0); }
	}
	@media(max-width: 1279px) and (min-width: 768px){
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 0 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 1 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 2 * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 767px){
		#wrap [data-se-delay]{ transition-delay: 0s; }
		[data-se-column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-se-column] > *:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); }
	}
}

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:400rem; text-align:center; color: #fff; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: url('/images/content/sub_visual.jpg') 50% / cover; }
.subVisual h2{ font-size: var(--fs40); }
@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 */
.lnb{ background: #2b2b2b; border-bottom: 1px solid #ddd; text-align:center; font-size:18rem; font-weight: 500; color: #dadada; z-index:10; }
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 28rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 4.0625em; }
.lnb a:hover,
.lnb a.on{ color: var(--primary); }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-bottom: 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 */
#content{ min-height:300px; padding: 100rem 0; }
.ss_title{ margin-bottom:50rem;}
.ss_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: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;}
}

@media (max-width: 768px) {
	#content{ padding: 60rem 0; }
	.ss_title {margin-bottom: 25rem;}
}