@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: end; justify-content: center; position:relative; height:450rem; padding-bottom: 80rem; text-align:center; color: #fff;
	&::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
	&.about::before{ background-image:url('/images/content/subVisual-1.jpg'); }
	&.product::before{ background-image:url('/images/content/subVisual-2.jpg'); }
	&.news::before{ background-image:url('/images/content/subVisual-3.jpg'); }
	&.inquiry::before{ background-image:url('/images/content/subVisual-4.jpg'); }
	&.common::before{ background-image:url('/images/content/subVisual-5.jpg'); }
	&::after{ content: ''; position: absolute; inset: 0; background: #000; opacity: .3; }
	.inr{ position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 1ch; }
	.title{ font-size: 40rem; }
	.sub_menu{ display: flex; gap: 2ch; font-size: 20rem; }
	.sub_menu a{ position: relative; display: inline-block; }
	.sub_menu a.isVisiting::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }
	@media(any-hover:hover){
		.sub_menu a:not(:hover){ opacity: .7; }
	}
	@media(max-width:767px){
		.inr{ flex-direction: column; }
		.title{ align-self: start; }
	}
}
@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ -webkit-animation: subVisual_bg 1.8s both; animation: subVisual_bg 1.8s both; }
	@-webkit-keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .title{ -webkit-animation: txt1 .6s .3s both; animation: txt1 .6s .3s both; opacity: 0; }
	.subVisual .lnb{ -webkit-animation: txt2 .6s .3s both; animation: txt2 .6s .3s both; opacity: 0; }
	@-webkit-keyframes txt1 {
		0%{ translate: -40rem; opacity: 0; }
		100%{ translate: 0;; opacity: 1; }
	}
	@keyframes txt1 {
		0%{ translate: -40rem; opacity: 0; }
		100%{ translate: 0;; opacity: 1; }
	}
	@-webkit-keyframes txt2 {
		0%{ translate: 40rem; opacity: 0; }
		100%{ translate: 0;; opacity: 1; }
	}
	@keyframes txt2 {
		0%{ translate: 40rem; opacity: 0; }
		100%{ translate: 0;; opacity: 1; }
	}
	.subVisual .sub_menu a{ transition: .3s; }
}

/* lnb */
/* .lnb{ background: #2b2b2b; border-bottom: 1px solid #ddd; text-align:center; font-size:18rem; font-weight: 500; color: #dadada; z-index:5; }
.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.isVisiting{ color: var(--primary); }
.lnb a.isVisiting::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 */
.sub{ min-height:300px; padding: 90rem 0; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }
#content:has(.join_area) .sub_title{ display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */


/* 매장찾기 */
.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; 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: #666; }
	.results-tel{ display: none; margin-top: 10rem; font-weight: 300; color: #666; }

	.map_view{ width: 100%; height: 600rem; }
	.store_info{ position: relative; width: 300px; background: #fff; border: 1px solid #ddd; }
	.store_info::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;}
	.info-header{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8rem; background: var(--primary); padding: 15rem 10rem; color:#fff; }
	.location-icon{ width: 20rem; height: 25rem; background: url('/images/content/icon_map.svg') no-repeat 50% / contain; }
	.info-name{ position: relative; }
	.info-close{ width: 30rem; height: 30rem; background: var(--black); }
	.info-body{ padding: 10rem; }
	.info_swiper .swiper-slide{ aspect-ratio: 16/9; }
	.swiper-slide{ background: no-repeat 50% / cover; }
	.info-address{ margin-top: 5rem; 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 #ddd; }
	.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; }
}


/* Subcontent */

/* 01-about */
.sub .greetings { display: grid; grid-template-columns: 1fr 1fr; gap: 80rem; align-items: center; }
.sub .greetings figure img { width: 100%; -o-object-fit: cover; object-fit: cover; }
.sub .greetings .insamal { display: flex; flex-direction: column; }
.sub .greetings .insamal h3 { position: relative; font-size: var(--fs40); margin-bottom: 40rem; padding-bottom: 40rem; line-height: 1.3; }
.sub .greetings .insamal h3 .name { color: var(--primary); }
.sub .greetings .insamal h3::after { content: ''; position: absolute; width: 100rem; height: 1rem; background: #222; bottom: 0; left: 0; }
@media(max-width:1279px) {
	.sub .greetings { grid-template-columns: 1fr; gap: 40rem; }
}

.sub .history-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60rem; }
.sub .history-wrap .img-history img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.sub .history-wrap .year-ul::before {content:''; display:block; position:absolute;inset: 0;border-left: 1rem solid #ddd;border-right: 0;}
.sub .history-wrap .year-li {margin: 0;padding-left: 40rem;text-align: left;width: 100%;margin-bottom: 20rem;}
.sub .history-wrap .year-li .month-li { flex-direction: unset; }
.sub .history-wrap .year-li .year {position: relative;font-size: 30rem;color: #5064b8;}
.sub .history-wrap .year-li .year::before {content: '';position: absolute;width: 15rem;height: 15rem;background: #fff;border: 1rem solid var(--primary);border-radius: 50%0;left: -45rem;top: 50%;transform: translateY(-50%);}
.sub .history-wrap .year-li .month-ul { margin-top: 10rem; }
@media(max-width:1279px) {
	.sub .history-wrap { grid-template-columns: 1fr; gap: 20rem; }
}

.sub .direction .comp-name { font-size: var(--fs40); margin-bottom: 40rem; }
.sub .direction .dir-map { position: relative; }
.sub .direction .dir-map .desc-map { display: flex; padding: 20rem; justify-content: space-between; border: 1rem solid #eee;flex-wrap: wrap; }
.sub .direction .dir-map .desc-map span > b { margin-right: 10rem; }
.sub .direction .dir-map .visit-btn { position: absolute; bottom: 0; z-index: 99; right: 0; padding: 20rem; background: var(--primary); color: #fff; min-width: 200rem; display: flex; align-items: center; justify-content: center; gap: 20rem; font-size: var(--fs20); }
.sub .direction .dir-map .visit-btn::after { content: ''; position: relative; width: 20rem; height: 20rem; background: url(/images/common/top-btn-arrow.png) no-repeat; background-size: contain; transform: rotate(90deg); display: flex; align-items: center; transition: all 0.3s; }
.sub .direction .dir-map .visit-btn:hover::after { transform: rotate(45deg); transition: all 0.3s; }
.sub .direction .dir-map .desc-map.bottom { justify-content: flex-start; gap: 10rem;  }
.sub .direction .dir-map .desc-map.bottom span { display: flex; align-items: center; gap: 10rem; flex-wrap: wrap;}
.sub .direction .dir-map .desc-map.bottom span > b { margin: 0; }
.sub .direction .dir-map .desc-map.bottom span > b.station, .sub .direction .dir-map .desc-map.bottom span > b.walk { position: relative; display: inline-flex; align-items: center; padding: 5rem 12rem; border: 1rem solid var(--primary); border-radius: 50rem; }
.sub .direction .dir-map .desc-map.bottom span > b.station::before, .sub .direction .dir-map .desc-map.bottom span > b.walk::before { content: ''; position: relative; width: 16rem; height: 16rem; background: url(/images/content/train-fill.svg) no-repeat; background-size: contain; margin-right: 5rem; }
.sub .direction .dir-map .desc-map.bottom span > b.walk::before { background: url(/images/content/person-simple-walk-fill.svg) no-repeat; background-size: contain; }
.sub .direction .maps { position: relative; }
.sub .direction .google-map{ display: block; width: 100%; height: 400rem; border: solid #ddd; border-width: 0 0 1px; }
.sub .direction .maps .root_daum_roughmap { width: 100%; border-bottom: 1rem solid #ddd; }
.sub .direction .maps .root_daum_roughmap .hide, .sub .direction .maps .root_daum_roughmap .cont { display: none; }
.sub .direction .maps .root_daum_roughmap .wrap_map { height: 400rem; }
.sub .direction .contact-cta { margin-top: 40rem; }
.sub .direction .contact-cta ul { display: flex; gap: 10rem; }
.sub .direction .contact-cta ul li { display: flex; width: 100%; gap: 10rem; border: 1rem solid #eee; padding: 30rem 0; justify-content: center; font-size: 18rem; }
@media(max-width:767px){
	.sub .direction .contact-cta ul { flex-wrap: wrap; }
}

.table {
    .col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
        li { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; border: 1px solid #cecece; font-size: 12px; font-weight: 600; }
        .yl { background: yellow; }
        .wh { background: #FAF9F6; }
        .br { background: chocolate; }
        .rd { background: #FF2400; }
        .or { background: orange; }
        .bl { background: black; color: white; }
    }
}
.product {
    .desc {
        figure { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        img { width: 120%; aspect-ratio: 16/5; -o-object-fit: cover; object-fit: cover; position: relative; }
        figure:after { content: ' '; width: 100%; height: 300px; position: absolute; bottom: 0; left: 0; display: block; z-index: 1; background: rgba(255, 255, 255, 0); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%); }
        p { font: 500 20rem / 1.5 var(--font-pre); text-align: center; }
    }
	.pimage { border: 1px solid #cecece; margin-top: 50px; max-width:100%;}
	.pimage_m { border: 1px solid #cecece; margin-top: 50px; max-width:100%; display: none; }
	.pimages { border: 1px solid #cecece; margin-top: 50px; max-width:100%;}
	.pimages_m { border: 1px solid #cecece; margin-top: 50px; max-width:100%; display: none; }
    .product-gal { display: flex; flex-direction: column; background: url(/images/main/main-bg.jpg) no-repeat 50% 100% / cover fixed; padding-block: 150px; margin-block: 100px;
        .gallery { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-content: center; gap: 50px; }
        .gallery li img { width: 100%; height: auto; aspect-ratio: 1/1; }
    }
    hr { width: 100rem; height: 0px; border-bottom: 1px solid #222; margin: 0 auto; margin-top: 50px; }
    .feature { display: flex; flex-direction: column; justify-content: center; margin-block: 100px; align-items: center;
        ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; }
        ul li { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1/1; gap: 20px; background: #FAF9F6; padding: 20px; width: 100%; }
        li figure { display: flex; align-items: center; justify-content: center; background: #fff; border: 5px solid var(--primary); width: 128px; height: 128px; border-radius: 50%; overflow: hidden; }
        li figure img { width: 90%; height: auto; }
        h1 { font: 700 var(--fs35) var(--font-pop); text-align: center; margin-bottom: 50px; }
        li p { font: 700 var(--fs18) var(--font-pop); font-weight: 700; text-align: center; line-height: 35px; min-height: 80px; }
        figure { display: flex; justify-content: center; width: 60%;
            img { width: 100%; height: auto; }
        }
        ul.img li { background: transparent; aspect-ratio: auto; padding: 0; position: relative; }
        ul.img li figure { border: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; height: auto; }
        ul.img li:before { content: ''; background: rgba(0, 0, 0, .5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
        ul.img li figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
        ul.img li p { font: 500 var(--fs24) var(--font-pop); min-height: auto; position: absolute; z-index: 2; text-transform: uppercase; color: #fff; }
    }
    table.table thead th[rowspan] { border-right: 1rem solid #cecece; border-bottom: 0 !important; }
    table.table.line thead th { border: 1rem solid #cecece; }
    table.table thead tr th:last-child, table.table tbody tr td:last-child { border-right-width: 0px !important; }
}
@media(max-width:767px){
    .product {
        .desc-table {
            width: 100%;
            overflow: scroll;
        }
        
        .desc-table .table {
            width: 600px;
            .col { grid-template-columns: repeat(1, minmax(0, 1fr));
        }
		
    }
    
    .desc {
            img { aspect-ratio: 1/1 !important; }
    }
	.product-gal { 
        .gallery { grid-template-columns: repeat(1, 1fr); }
    }
    .feature {
        ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        ul li { align-self: stretch; justify-content: flex-start;}
        ul.img li { align-self: stretch; justify-content: center;}
    }
}

		.pimages { display: none;}
		.pimages_m { display: block !important;}
}