html{scroll-behavior: smooth}
.sub_vi_wrap{width:100%;position:relative;height:430px;}
.sub_vi {width:100%; display:inline-block; text-align:center; box-sizing:border-box; position:relative; overflow:hidden;height:100%; }
.sub_vi_p{background:url('/common/img/sub_vi1.png') no-repeat center / cover, rgba(0, 0, 0, 0.2);background-blend-mode:multiply; width:100%; height:100%; }
.sub_vi2{background:url('/common/img/s2.png') no-repeat center / cover, rgba(0, 0, 0, 0.3);}
.sub_vi3{background:url('/common/img/s3.png') no-repeat center / cover, rgba(0, 0, 0, 0.3);}
.sub_vi4{background:url('/common/img/s4.png') no-repeat center / cover, rgba(0, 0, 0, 0.3);}
.sub_vi_text{line-height:2.5em; font-weight:600; color:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); letter-spacing:-1px; width:100%; height:100%; padding:0 5%; box-sizing:border-box;display:flex;flex-direction:column; justify-content:center; align-items:center;}
.sub_vi_text span{font-size:1.2em; font-weight:300;letter-spacing:2px;}
.sub_vi_text p{font-size:3.3em; font-weight:700;margin-top:10px}
.sub_vi .sub_vi_p{
	will-change: transform;
	animation-duration:2s;
	animation-name: background-image-animation;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-timing-function: linear;
	transform: translateX(0) scale(1);
}
@keyframes background-image-animation {
	0% {transform: scale(1.3);}
	100% {transform: scale(1);}
}

.sub_con{max-width:1400px;margin:100px auto;padding:0 5%}
.guide{font-size:2.3em;font-weight:700;margin-bottom:20px;letter-spacing:1px}
.red{color:#da0f1c;font-weight:600}
@media screen and (max-width:900px) {
	.sub_con{margin:60px auto}
	.sub_vi_wrap{height:250px;}
	.sub_vi_text{padding-top:70px}
	.sub_vi_text span{font-size:1em;display:none}
	.sub_vi_text p{font-size:2.2em;margin-top:0}
	.guide{font-size:1.8em;}
}


.brand{max-width:1100px;}
.brand .intro{}
.brand .intro .tit{font-size:2.2em;font-weight:600;color:#333;}
.brand .intro .tit span{font-size:.6em;}
.brand .intro .txt{font-size:1.3em;color:#555;line-height:1.5;margin:40px 0 120px 0}

.brand .box{display:flex;flex:1;align-items:center;}
.brand .box .imgbox{width:50%;margin-right:7%;}
.brand .box img{width:100%;}
.brand .box p{width:50%;font-size:1.2em;color:#777;line-height:1.5;margin-top:20px;font-weight:300;}
.brand .box:nth-child(2){flex-direction: row-reverse;}
.brand .box:nth-child(2) p{padding-left: 5%;box-sizing: border-box;}

@media screen and (max-width:900px) {
	.brand .intro .tit{font-size:1.8em;}
	.brand .intro .txt{font-size:1.1em;margin:20px 0 60px 0}
	.brand .box{display:block;margin-bottom:60px;}
	.brand .box .imgbox{width:100%;}
	.brand .box p{width:100%;font-size:1em;}
	.brand .box br{display:none;}
	.brand .box:nth-child(2) p{padding-left:0}
}	

.tab{display:inline-flex;gap:10px;margin-bottom:60px;border:1px solid #ccc;padding:10px;border-radius:50px;box-sizing:border-box}
.tab li{padding:7px 0;box-sizing:border-box;}
.tab a{padding:7px 25px;box-sizing:border-box;border-radius:50px;font-size:1.2em;letter-spacing:0;color:#aaa;}
.tab a.ov{background:#da0f1c;color:#fff;}
@media screen and (max-width:900px) {
	.tab{overflow-x:auto;max-width:100%;border:none;margin-bottom:30px;;border-radius:0;}
	.tab a{font-size:1em;padding:7px 20px;}
}



.product {display:flex; flex-wrap:wrap; gap:20px; }
.product li {width:23%; text-align:center; box-sizing:border-box;cursor:pointer;}
.product li:nth-child(n+5) {margin-top:30px}
.product li div{position:relative;overflow:hidden;padding-bottom:125%;border:1px solid #ccc;}
.product li img {vertical-align:bottom;max-width: 100%;    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);}
.product li  h4 {font-size:1.2em; font-weight:500; padding:20px 0;}


@media screen and (max-width:900px) {
	.product{gap:15px;}
	.product li{width:47%}
	.product li:nth-child(n+3) {margin-top:30px}
	.product li  h4{font-size:1em;padding:10px 0}
}

.page {text-align:center;   width:100%; margin-top:60px; display:inline-block; font-size:0}
.page ul { width:100%; text-align:center; }
.page li { display:inline-block; font-size:1rem; font-weight:400;  }
.page a {
	display:flex; align-items:center; justify-content:center; 
 	text-decoration:none; vertical-align:middle;
 	 width:33px; line-height:33px; height:33px;  margin-left:-1px; color:#aaa; text-align:center;
   }
.page a.ov  {background:var(--main_c);color:#fff;border:1px solid var(--main_c);border-radius:50%;box-sizing:border-box;}

 @media screen and (max-width:900px) {
	.page li {font-size:.9rem;}
	.page a {  width:30px; line-height:30px; height:30px;}
}


.product_view .guide{max-width:1000px;margin:0 auto;margin-bottom:20px;text-align:center}
.product_view .product_info{max-width:1000px;margin:0 auto;display:flex;gap:60px;padding-bottom:60px;margin-bottom:60px;border-bottom:1px solid #aaa; justify-content:center;}
.product_view .product_info .imgbox{width:40%;}
.product_view .product_info .imgbox img{max-width: 100%;
	 -webkit-touch-callout:none;
}
.product_view .product_info .txt{width:60%;margin-top:40px;}
.product_view .product_info .txt > h4{font-size:2.5em;font-weight:600}
.product_view .product_info .txt > p{font-size:1.2em;margin:15px 0 40px 0}
.product_view .product_info .txt > a{border:1px solid #555;color:#555;padding:10px 40px;box-sizing:border-box;letter-spacing:0;font-weight: 500;}
.product_view .product_img{max-width:1000px;margin:0 auto;}
.product_view .product_img > img{width:100%;
	 -webkit-touch-callout:none;
}

@media screen and (max-width:900px) {
	.product_view .product_info{display:block;padding-bottom:40px;margin-bottom:40px;}
	.product_view .product_info .imgbox{width:100%;}
	.product_view .product_info .txt{width:100%;}
	.product_view .product_info .txt > h4{font-size:1.6em;}
	.product_view .product_info .txt > p{font-size:1.1em;}
}


.store{max-width:1200px;}
.store h4{font-size:2.2em;margin-bottom:40px;font-weight:700;}
.store hr{margin:50px;}
.store .info{display:flex;justify-content:space-around;padding:50px 30px;box-sizing:border-box;box-shadow:0 0 15px rgba(0,0,0,0.1);}
.store .info p{font-weight:400;color:#444;font-size:1.2em;}
.store .info b{font-weight:700;margin-right:5px;}
.store iframe{width:100%;height:500px;}
@media screen and (max-width:900px) {
	.store h4{font-size:1.8em;margin-bottom:20px;}
	.store hr{margin:30px;}
	.store .info{display:block;padding:30px 20px;}
	.store .info p{font-size:1em;margin-bottom:7px;}
	.store iframe{width:100%;height:250px;}
}


.family{display:flex; gap:30px; }
.family .box{width:20%;}
.family a{box-shadow:0 0 15px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;padding:20px 0;min-height:80px;transition:all .3s ease;position:relative;}
.family a:after {content:'바로가기 +'; font-size:1.4em;font-weight:600;display:flex; align-items:center; justify-content:center; width:100%; height:0; position:absolute; left:0; top:0; background:rgb(103 207 202 / 95%); color:#fff; opacity:0; transition: all 0.3s ease }
.family a:hover:after {  height:100%; opacity:1  }
.family img{max-height:80px;}
.family p{text-align:center;margin-top:15px;font-size:1.2em;}

@media screen and (max-width:900px) {
	.family{display:block;}
	.family .box{width:100%;margin-bottom:30px;}
}





.product_view.product_shop{max-width:1000px;}
.product_view.product_shop .product_info{border:none; margin:60px 0 0 0; align-items:center;}
.product_view.product_shop .product_img{margin:30px 0;}
.product_view.product_shop .product_img img{max-width:100%;}

.product_shop .mid .tab_list {display: flex; width:100%}
.product_shop .mid .tab_list > li {width:100%;    border: 1px solid #ddd; margin-left: -1px;}
.product_shop .mid .tab_list li.on { background: var(--main_c);}
.product_shop .mid .tab_list li a {display:inline-block; text-align:center; width:100%; white-space:nowrap; font-size: 1.15rem;  font-weight: 600;  padding: 20px 0; box-sizing: border-box;}
.product_shop .mid .tab_list li.on a {color: #FFF;} 

.product_shop .product_info .txt{margin-top:0;}
.product_shop .product_info .txt a{display:inline-block;}
@media screen and (max-width:480px){
	.product_shop .mid .tab_list li a {font-size: 0.9rem; padding: 10px 5px;}
}	

.review .item{ border-bottom:solid 1px #eee; display:flex; align-items: start; gap:3%; box-sizing:Border-box; padding:20px 0;}

.review .item .thum{width:13%;overflow:hidden; position:relative; padding-bottom:10%;}
.review .item .thum img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);  min-width: 100%;    min-height: 100%;    max-width: 150%;}
.review .item .info{width:100%;}

.review .item .writer{margin-bottom:10px; font-size:.9em;}
.review .item .writer span{color:#999; position:relative;}
.review .item .writer span:first-child::before{position:absolute; content:'|'; top:0; right:-15px; }
.review .item .writer span:first-child{margin-right:25px;}
.review .item .content{
	overflow: hidden;
	position: relative;
}
.review .item .content img{max-width:100%; margin-top:10px;}
.review .item .more-btn{ margin-top:10px; }
.review .item .more-btn a{color:#555;}
.review .item .more-btn a:before{ content:"더보기 "; }
.review .item.more .more-btn a:before{ content:"접기"; }
.review .item .more-btn i{margin-left:5px;}
.review .item.more .more-btn i{transform: rotate(180deg); }
.review .item .content .txt{
	white-space: normal;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	word-wrap:break-word; 		
	color:#333;
}
.review .item .content .txt.fake{ opacity: 0; position: absolute;display:block; }
.review .item.more .content .txt{ display:block;}


.pd_menu{margin-bottom:60px;}
.join_menu{display: flex;   justify-content: center; margin:30px 0 10px 0;}
.menu_wrap {   border:1px solid #ccc; padding:10px; width:auto; display:inline-block; border-radius:50px;   box-sizing:border-box; }
.menu_wrap * {transition: all 0.3s ease}
.menu { display: flex; position: relative;}

.menu li{ box-sizing:border-box; width:130px; text-align:Center; line-height:40px;   }
.pd_menu .menu li{width:100px} 

.menu a{ font-size:1.1em;letter-spacing:0; color:#aaa; width:100%; display:inline-block }
.menu a.ov {color:#fff}


.highlight {
		position: absolute;
		background-color: #da0f1c; /* 배경 색상 */
		height: 100%;
		width:100px; 
		border-radius: 50px;
		transition: transform 0.3s ease; /* 애니메이션 효과 */
		z-index: -1;
		left:0;
}

/* 배경 컬러 박스 설정 */
.join_menu .highlight {
		background-color: var(--main_c); /* 배경 색상 */
		width:130px; 
}

@media screen and (min-width:900px) {
  .menu li a:hover {color:#fff}	

}
@media screen and (max-width:900px) {
		.menu_wrap  {overflow-x:auto; width:100%;  border:none; padding:0; border-radius:0 }
		.menu  {width:100%; gap:20px}
		.menu li {width:auto; font-size:14px}
		.menu li a {padding:0 10px}
		.menu li a.ov {background-color:#da0f1c; border-radius:50px }	
		.join_menu .menu li a.ov {background-color:var(--main_c); }	
		.highlight {display:none}
 
}