@charset "utf-8";

@import 'font.css';
@import "sosop-reset.css";
@import "sosop-common.css";

/*==========================================================================================
	main
==========================================================================================*/

/* main > content */
.main-container{width:100%;min-height:calc(100% - 7rem);margin:0 auto;}
.main-container .content-wrap{position:relative;width:100%;min-height:100%;height:auto;margin:0 auto;padding:0 2rem 20rem;}

/*======================== main > swipe ========================*/
.main-container .my-container{position:relative;overflow:hidden;max-width:160rem;height:auto;padding:5rem 3.5rem;margin:0 auto;background-color:#fff;}
.main-container .my-container .swiper-container{overflow:hidden;width:100%;height:100%;}
.main-container .my-container .swiper-container .swiper-wrapper{padding:0 0 1rem;}
.main-container .my-container .swiper-slide{position:relative;width:60rem;height:30rem;text-align:center;font-size:1.8rem;display:flex;align-items:center;transition:opacity 0.5s ease;border-radius:1rem;}
.main-container .my-container .swiper-slide.slide1{background-image:linear-gradient(#3681e7, #9db6ef 0%, #3681e7 100%);}
.main-container .my-container .swiper-slide.slide2{background-image:linear-gradient(#61b136, #b7ea9e 0%, #53a627 100%);}
.main-container .my-container .swiper-slide.slide3{background-image:linear-gradient(#f99132, #ffd7b4 0%, #f99132 100%);}
.main-container .my-container .swiper-slide-active{opacity:1;}
.main-container .my-container .swiper-scrollbar{width:calc(100% - 7rem);z-index:99;left:3.5rem;bottom:2.5rem;}
.swiper-navigation .swiper-button-next, .swiper-navigation .swiper-button-prev{width:3rem;height:3rem;}

.main-container .my-container .swiper-slide .img{position:relative;width:100%;height:100%;border-radius:1rem;}
.main-container .my-container .swiper-slide .img img{z-index:1;position:absolute;bottom:0;right:0;width:auto;height:28rem;border-radius:1rem;}
.main-container .my-container .swiper-slide .link, .main-container .my-container .swiper-slide img{width:100%;height:30rem;object-fit:cover;border-radius:1rem;}
.main-container .my-container .swiper-slide .txt{z-index:2;position:absolute;top:50%;left:3rem;transform:translateY(-50%);padding:0;text-align:left;}
.main-container .my-container .swiper-slide .txt *{color:#fff;font-weight:700;}
.main-container .my-container .swiper-slide .tit-l{font-size:3rem;}
.main-container .my-container .swiper-slide .tit-m{font-size:2.4rem;}
.main-container .my-container .swiper-slide .tit-s{font-size:1.6rem;font-weight:600;}

/* Phone */
@media only screen and (max-width:640px){
	.main-container .my-container{padding:0 3.5rem 3rem;}
	.main-container .my-container .swiper-slide{height:20rem;}
	.main-container .my-container .swiper-slide .img img{height:16rem;}
	.main-container .my-container .swiper-slide .txt{left:2rem;}
	.main-container .my-container .swiper-slide .tit-l{font-size:2.4rem !important;font-weight:800;}
	.main-container .my-container .swiper-slide .tit-m{font-size:1.6rem !important;font-weight:800;}
	.main-container .my-container .swiper-slide .tit-s{font-size:1.4rem !important;font-weight:600;}
	.main-container .my-container .swiper-slide .link, .main-container .my-container .swiper-slide img{width:100%;height:20rem;object-fit:cover;border-radius:1rem;}
}
/* Phone */
@media only screen and (min-width:641px) and (max-width:1023px){
	.main-container .my-container{padding:0 3.5rem 3rem;}
	.main-container .my-container .swiper-slide{min-height:20rem;}
}

/* desktop PC */
@media only screen and (min-width:1600px){
	.main-container .content-wrap{width:160rem;}
}


/*========== tab ==========*/
.tab-wrap{position:relative;width:100%;height:auto;}
.tab-wrap .tab-menu{display:flex;align-items:center;justify-content:center;width:50rem;height:5.5rem;text-align:center;margin:0 auto 5rem;border:1px solid #C4CDD5;border-radius:3rem;}
.tab-wrap .tab-menu .tablink{display:inline-block;flex:1;width:100%;height:100%;padding:0 2rem;line-height:5rem;font-size:2rem;text-align:center;font-weight:700;border-radius:3rem;background-color:transparent;cursor:pointer;}
.tab-wrap .tab-menu .tablink.active{color:#fff;background:linear-gradient(316deg, #2d6fe2 0%, #2d6fe2 30%, #99db08 60%, #99db08 100%);}
/* Phone */
@media only screen and (max-width:767px){
	.tab-wrap .tab-menu{width:30rem;margin:0 auto 2.2rem;}
	.tab-wrap .tab-menu > li{width:15rem;}
}


/*========== main > 카테고리==========*/
.category-wrap{width:100%;min-height:13rem;height:auto;margin-bottom:4rem;text-align:center;}
.category-wrap .section-wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.category-wrap .section-wrap .btn-cat{display:block;width:9rem;flex:1 auto 8rem;margin-bottom:1rem;}
.category-wrap .section-wrap .btn-cat i{position:relative;display:inline-block;width:8rem;height:8rem;margin-bottom:1rem;border:1px solid #e5e5e5;border-radius:50%;background-color:#fff;background-size:5rem;background-repeat:no-repeat;background-position:center center;}
.category-wrap .section-wrap .btn-cat span{display:block;font-size:1.8rem;font-weight:400;text-align:center;}
.category-wrap .section-wrap .btn-cat i.active::before,
.category-wrap .section-wrap .btn-cat i:hover::before{content:'';position:absolute;inset:0;border-radius:50%;padding:.5rem;background-image:linear-gradient(316deg, #2d6fe2 0%, #2d6fe2 30%, #99db08 60%, #99db08 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;mask-composite: exclude;}
.category-wrap .ic-all{background-image:url('/img/main/ic-all.svg');}
.category-wrap .ic-beauty{background-image:url('/img/main/ic-beauty.svg');}
.category-wrap .ic-food{background-image:url('/img/main/ic-food.svg');}
.category-wrap .ic-life{background-image:url('/img/main/ic-life.svg');}
.category-wrap .ic-edu{background-image:url('/img/main/ic-edu.svg');}
.category-wrap .ic-health{background-image:url('/img/main/ic-health.svg');}
.category-wrap .ic-etc{background-image:url('/img/main/ic-etc.svg');}
.category-wrap .ic-all.active{background-image:url('/img/main/ic-all-active.svg');}
.category-wrap .ic-beauty.active{background-image:url('/img/main/ic-beauty-active.svg');}
.category-wrap .ic-food.active{background-image:url('/img/main/ic-food-active.svg');}
.category-wrap .ic-life.active{background-image:url('/img/main/ic-life-active.svg');}
.category-wrap .ic-edu.active{background-image:url('/img/main/ic-edu-active.svg');}
.category-wrap .ic-health.active{background-image:url('/img/main/ic-health-active.svg');}
.category-wrap .ic-etc.active{background-image:url('/img/main/ic-etc-active.svg');}
/* Phone */
@media only screen and (max-width:416px){
	.category-wrap .section-wrap{justify-content:stretch;gap:calc((100% - 36rem) / 3);}
}
@media only screen and (min-width:417px) and (max-width:539px){
	.category-wrap .section-wrap{justify-content:stretch;gap:calc((100% - 45rem) / 4);}
}
/* desktop PC */
@media only screen and (min-width:1600px){
	.category-wrap .section-wrap{gap:2rem;}
	.category-wrap .section-wrap .btn-cat{width:11rem;flex:1 auto 10rem;}
	.category-wrap .section-wrap .btn-cat i{width:10rem;height:10rem;}
}


/*========== main > 평가목록 ==========*/

 @media only screen and (max-width:639px){
	.sosop-list ul{--li-width:47%;gap:1rem calc((var(--ul-width) - (var(--li-width) * 2)) / 1);}
}
 @media only screen and (min-width:640px) and (max-width:850px){
	.sosop-list ul{--li-width:31%;gap:1rem calc((var(--ul-width) - (var(--li-width) * 3)) / 2);}
}
 @media only screen and (min-width:851px) and (max-width:1000px){
	.sosop-list ul{--li-width:24%;gap:1rem calc((var(--ul-width) - (var(--li-width) * 4)) / 3);}
}
 @media only screen and (min-width:1001px) and (max-width:1280px){
	.sosop-list ul{--li-width:19%;gap:1rem calc((var(--ul-width) - (var(--li-width) * 5)) / 4);}
}
 @media only screen and (min-width:1281px) and (max-width:1450px){
	.sosop-list ul{--li-width:15%;gap:1rem calc((var(--ul-width) - (var(--li-width) * 6)) / 5);}
}





/*========== main > 방문>지역선택 ==========*/
.map-select-wrap{width:100%;height:13rem;text-align:center;}
.map-select-wrap .btn-select{min-width:20rem;width:auto;padding:0 1.2rem;padding-right:4rem;height:4.6rem;color:#000;font-size:2.4rem;text-align:left;font-weight:400;border:0;border-bottom:.4rem solid #99DB08;border-radius:0;background:#fff url('/img/form/control-select-down.svg') no-repeat right 1.2rem center;background-size:1.6rem;}
.map-select-wrap .btn-select.val{color:#000;}
.map-select-wrap .btn-select:focus, .btn-select:active{border-color:#4386f9;opacity:1;}
.map-select-wrap .btn-select:disabled{color:#bdbec6;background-color:#f7f8fa;border-color:#dadbdf;}
.map-select-wrap .btn-select + .btn-select{margin-left:2rem}
@media only screen and (max-width:1198px){	/* Phone & tablet*/
	.map-select-wrap{width:100%;height:8rem;text-align:center;}
	.map-select-wrap .btn-select{min-width:40%;font-size:1.8rem;}
}

/*========== main > 고객센터 배너 ==========*/
.customer-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;height:28.4rem;margin-top:6rem;}
.customer-wrap button{position:relative;width:25%;height:100%;flex:1 1 auto;padding-top:10rem;background-color:#F5F6F8;border-radius:1rem;}
.customer-wrap button[class*="banner-"]{background-repeat:no-repeat;background-position:center 4rem;background-size:9.8rem;}
.customer-wrap button .title{color:#000;font-size:2.4rem;text-align:center;}
.customer-wrap button .desc{margin-top:2rem;line-height:1.4;color:#666;font-size:1.8rem;text-align:center;}
.customer-wrap .banner-faq{background-image:url('/img/main/img_faq.png');}
.customer-wrap .banner-qna{background-image:url('/img/main/img_qna.png');}
.customer-wrap .banner-notice{background-image:url('/img/main/img_notice.png');}
.customer-wrap .banner-fran{background-image:url('/img/main/img_success.png');}
@media only screen and (max-width:767px){/* Phone & tablet */
	/* main > 고객센터 배너 */
	.customer-wrap{justify-content:unset;flex-direction:column;min-height:46rem;margin-top:0;}
	.customer-wrap button{width:100%;padding:2rem 2rem 2rem 12rem;}
	.customer-wrap button[class*="banner-"]{background-repeat:no-repeat;background-position:3rem 1.5rem;background-size:6.8rem;}
	.customer-wrap button .title{font-size:2rem;text-align:left;}
	.customer-wrap button .desc{margin-top:1rem;font-size:1.6rem;text-align:left;}
}
@media only screen and (min-width:768px) and (max-width:1198px){/* tablet */
	/* main > 고객센터 배너 */
	.customer-wrap button .desc{font-size:1.6rem;}
}


/*========== main > 제품상세페이지 ==========*/
.detail-container{position:relative;overflow:hidden;width:118rem;height:auto;margin:0 auto;}

.detail-container .contentL{float:right;width:83rem;padding:4rem 4rem 0 0;}
.contentL .product-con dl{display:flex;align-items:flex-start;justify-content:space-around;width:100%;border-bottom:1px solid #dadbdf;}
.contentL .product-con dt{width:20rem;padding:3rem 0;color:#36373F;font-size:2rem;font-weight:400;}
.contentL .product-con dd{flex:1;max-width:50rem;flex:1;padding:3rem 0;}
.contentL .product-con .con-wrap{display:flex;align-items:flex-start;justify-content:space-around;width:100%;}
.contentL .product-con .stit, .product-con .scon{line-height:1.4;color:#575966;font-size:1.8rem;}
.contentL .product-con .stit{width:14rem;padding-left:1.5rem;}
.contentL .product-con .scon{flex:1;width:100%;}
.contentL .product-section{padding:2rem 0 4rem;}
.contentL .content-viewport{overflow: hidden;max-height:55rem;transition: max-height 0.8s ease-in-out;}
.contentL .content-viewport .photo-wrap img{width:100%;}
.contentL .content-viewport.expanded{max-height:300rem;}
.contentL .toggle-button-container{margin-top:2rem;text-align:center;}
.contentL .toggle-button{position:relative;width:100%;height:4rem;margin-top:1rem;padding-right:1rem;color:#575966;font-size:1.6rem;text-align:center;border-radius:.5rem;background-color:#E7E8F0;cursor:pointer;}

.detail-container .contentR{float:right;position:relative;width:35rem;min-height:100%;padding:3rem 0;}
.detail-container .contentR .pc-fixed{position:fixed;top:11rem;width:inherit;}
.detail-container .contentR .h2-tit{width:100%;padding:1rem 0 2rem;color:#36373F;font-size:2rem;font-weight:700;}
.contentR .product-box{width:100%;height:auto;padding:2rem;border:1px solid #dadbdf;border-radius:1rem;background-color:#fff;}
.contentR .product-box p.con-wrap{display:flex;align-items:flex-start;justify-content:space-around;width:100%;}
.contentR .product-box .stit,
.contentR .product-box .scon{line-height:3.5rem;color:#575966;font-size:1.6rem;}
.contentR .product-box .stit{width:10rem;}
.contentR .product-box .scon{flex:1;width:100%;text-align:right;}
.contentR .product-box .stit.bold,
.contentR .product-box .scon.bold{color:#36373F;font-size:1.6rem;font-weight:700;}
.contentR .product-box .btn-heart{display:block;width:6.2rem;height:6.2rem;padding:0 2rem;border:1px solid #9D9D9D;border-radius:1rem;background:#FFF url('/img/icon/ico-heart.svg') center center no-repeat;background-size:3rem;}
.contentR .product-box .btn-heart.active{background-image:url('/img/icon/ico-heart-rd.svg');}
.contentR .product-box .btn-txt{border-radius:1rem;}

/*.photo-list{display:none;opacity:0;animation:formopen-reverse;animation-duration:0.5s;}*/
.photo-list{opacity:1;animation:formopen-reverse;animation-duration:0.5s;}

.photo-list p{margin-top:1rem;}
.photo-wrap:has(.btn-view:checked) .photo-list{display:block;opacity:1;animation:formopen;animation-duration:0.5s;}

@keyframes formopen {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes formopen-reverse {
	from {opacity:1;}
	to {opacity:0;}
}

.btn-arrow{position:relative;display:inline-block;width:100%;height:6.4rem;padding:2rem 0;color:#575966;font-size:2rem;font-weight:700;text-align:left;border-bottom:1px solid #dadbdf;}
.btn-arrow::after{content:'';position:absolute;top:2rem;right:0;width:2.4rem;height:2.4rem;background:url('/img/temp/btn-arrowR.svg') 0 0 no-repeat;background-size:contain;}

.btn-view{position:relative;width:100%;height:4rem;margin-top:1rem;padding-right:1rem;color:#575966;font-size:1.6rem;text-align:center;border-radius:.5rem;background-color:#E7E8F0;cursor:pointer;}
.btn-view::after{content:'상세 내용 펼처보기 +';position:absolute;top:0;left:0;bottom:0;right:0;line-height:4rem;color:#575966;font-size:1.6rem;text-align:center;}
.btn-view:checked::after{content:'상세 내용 접기 -';}

/* Phone */
@media only screen and (max-width:1023px){
	.detail-container{width:100%;height:auto;}
	.detail-container .contentL{float:none;width:100%;padding:2rem;}
	.detail-container .contentR{float:none;width:100%;padding:.5rem 2rem 0;}
	.detail-container .contentR .pc-fixed{display:block;position:relative;width:100%;top:0;}
	.detail-container .contentR .h2-tit{padding:1.5rem 0 2rem;line-height:1.4;}
	.contentR .product-box .stit,
	.contentR .product-box .scon{line-height:4rem;}
	.photo-wrap p img{width:100%;}
	.contentL .btn-lg{height:6.2rem;font-size:2rem;border-radius:1rem;}
	.contentL .btn-heart{display:block;width:6.2rem;height:6.2rem;padding:0 2rem;border:1px solid #9D9D9D;border-radius:1rem;background:#FFF url('/img/icon/ico-heart.svg') center center no-repeat;background-size:3rem;}
	.contentL .btn-heart.active{background-image:url('/img/icon/ico-heart-rd.svg');}
	.contentL .product-con dl{flex-direction:column;}
	.contentL .product-con dt{width:100%;padding:3rem 0 1rem;color:#36373F;font-size:2rem;font-weight:700;}
	.contentL .product-con dd{width:100%;padding:0 0 3rem;padding-left:2rem;}
}