html.sub{background-color: #f4f7f6;}

.skip{display: none !important;}

#sVisual .inConts{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; align-items: center; flex-direction: column; gap: 2rem; max-width: none; justify-content: center;}
#sVisual .inConts h2{font-size: 4.8rem; line-height: 1; color: rgba(255,255,255,0.95); font-family: var(--mi);}
#sVisual .inConts p{font-size: 1.8rem; line-height: 1; color: rgba(255,255,255,0.85); font-family: var(--mi);}

#pageTop{padding: 12rem 2rem 4rem; text-align: center;}
#pageTop h3{font-size: 2.6rem; line-height: 3rem; text-align: center; font-weight: bold; font-family: var(--mi); color: #000; margin-bottom: 8rem;}
#pageTop p{font-size: 1.6rem; line-height: 2.4rem; color: #000; margin-bottom: 8rem;}
#pageTop h3 + p{margin-top: -4rem;}
#pageTop .after{display: inline-block; width: 1px; height: 5rem; background: #000;}

.sTitle{text-align: center; font-size: 4rem; line-height: 1; font-weight: bold; color: var(--point); margin-bottom: 8rem;}
.sTitle_sub{font-size: 2.4rem; line-height: 1; color: #1b1b1b; text-align: center; margin-bottom: 8rem;} 
.sTitle + .sTitle_sub{margin-top: -7rem;}

/* 1-1 brand */


/* 1-2 Clean Formulation */
.clean_formulation{display: flex; flex-wrap: wrap; justify-content: center; gap: 6rem 10rem; }
.clean_formulation li{width: calc((100% - 30rem)/4); max-width: 24rem;}
.clean_formulation li .imgArea{max-width: 24rem; width: 100%; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 2rem; background-color: #ecefee; margin: 0 auto 2.5rem;}
.clean_formulation li .imgArea img{max-width: 7.5rem;}
.clean_formulation li .textArea p{font-size: 1.8rem; line-height: 2.4rem; color: #333333; text-align: center;}

.clean_ul{max-width: 110rem; width: 100%; margin: 14rem auto 0;}
.clean_ul li{display: flex; gap: 6rem 12rem; flex-wrap: wrap; align-items: center; flex-direction: row;}
.clean_ul li:nth-of-type(even){flex-direction: row-reverse;}
.clean_ul li:nth-of-type(even) .textArea{text-align: right;}
.clean_ul li + li{margin-top: 10rem;}
.clean_ul li > div{width: calc((100% - 12rem)/2);}
.clean_ul li .bgArea{height: 60rem; background-position: center; background-size: cover; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1)}
.clean_ul li:nth-of-type(1) .bgArea{background-image: url('/images/sub/clean_li_01.jpg');}
.clean_ul li:nth-of-type(2) .bgArea{background-image: url('/images/sub/clean_li_02.jpg');}
.clean_ul li .textArea h4{font-size: 5rem; line-height: 6rem; color: var(--point); font-family: var(--mi); margin-bottom: 2rem; text-transform: uppercase;}
.clean_ul li .textArea p{font-size: 2rem; line-height: 3rem; color: #1b1b1b; }

/* 1-3 marterial */
.marterial_circle_title{font-size: 2.4rem; line-height: 1; font-weight: 550; color: #000000; text-align: center; }
.marterial_circle_title span{color: #00a360; font-weight: bold; border-bottom: 1px solid #b0c5bf; display: inline-block;  padding-bottom: 1rem;}
.marterial_circle_title_text{font-size: 2rem; line-height: 1; color: #000000; text-align: center;}
.marterial_circle{display: flex; max-width: 90rem; width: 100%; margin: 3.5rem auto 6rem; position: relative; height: 24rem; /* transform: translateX(12rem); */}
.marterial_circle li{width: 24rem; min-width: 24rem;  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 2.3rem; line-height: 1; color: #ffffff; font-weight: 550; position: absolute; top: 0; /* transform: translateX(-50%); */ padding: 2rem; text-align: center;}
.marterial_circle li:nth-of-type(1){background-color: rgba(179,229,215,0.8); left: 0;}
.marterial_circle li:nth-of-type(2){background-color: rgba(179,229,225,0.8); left: 25%; }
.marterial_circle li:nth-of-type(3){background-color: rgba(178,213,229,0.8); left: 50%; }
.marterial_circle li:nth-of-type(4){background-color: rgba(178,198,229,0.8); left: 100%; margin-left: -22.5rem;}

.marterial .clean_ul li:nth-of-type(1) .bgArea{background-image: url('/images/sub/marterial_01.jpg');}
.marterial .clean_ul li:nth-of-type(2) .bgArea{background-image: url('/images/sub/marterial_02.jpg');}
.marterial .clean_ul li .textArea h4{font-size: 3.2rem; line-height: 4.8rem; color: #1b1b1b; margin-bottom: 3rem; font-weight: bold;}
.marterial .clean_ul li .textArea h4 span{font-family: var(--mi);}
.marterial .clean_ul li .textArea p{font-size: 1.8rem; line-height: 3.2rem; color: #1b1b1b;}

/* 2-1 b2b */
.ul01{}
.ul01 li{width: calc((100% - 12rem)/3); padding: 7rem 3rem; background-color: #fff; border: 2px solid #aebcb9; border-style: dashed;}

.product_solution{display: flex; flex-wrap: wrap; gap: 10rem; max-width: 130rem; width: 100%; margin: 0 auto; overflow: hidden; justify-content: center;}
.product_solution li{width: calc((100% - 50rem)/6); display: flex; align-items: center; flex-direction: column; position: relative;}
.product_solution li + li::before{position: absolute; content: ''; top: 50%; left: -5rem; width: 2.5rem; aspect-ratio: 1/1; background-image: url('/images/sub/product_solution_arrow.png'); background-size: cover; margin-left: -1.2rem; margin-top: -1.2rem;}
.product_solution li .imgArea{width: 9.4rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;}
.product_solution li .textArea{}

/* 3-1 product */
.product_listArray{display: flex; width: max-content; margin-left: auto; margin-bottom: 3rem;}
.product_listArray a{display: inline-block; padding: 0 1rem; font-size: 1.6rem; line-height: 2rem; color: #333333;}
.product_listArray li + li a{border-left: 1px solid #cccccc;}


.product .product_list{display: flex; flex-wrap: wrap; gap: 10rem 8.5%;}
.product .product_list li{width: calc((100% - 17%)/3); cursor: pointer;}
.product .product_list .imgArea{padding: 10rem; background-color: #f9f8f6; display: flex; align-items: center; justify-content: center; aspect-ratio: 6/8;}
.product .product_list .textArea{margin-top: 4rem; text-align: center; }
.product .product_list .textArea .productTitle{font-size: 1.7rem; line-height: 2rem; color: #333333; text-align: center; font-weight: bold; height: 2rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1rem;}
.product .product_list .textArea .productText{font-size: 1.6rem; line-height: 2rem; color: #888888; text-align: center; height: 4rem; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2rem;}
.product .product_list .textArea .productPrice{font-size: 1.8rem; line-height: 2rem; color: var(--point); text-align: center; font-weight: bold;}

.product_viewArea_top{display: flex; flex-wrap: wrap; gap: 8rem; align-items: flex-start; margin-bottom: 10rem;}

/* .productImgArea{width: 53rem;} */
.productImgArea{width: 61rem; display: flex; align-items: flex-start; gap: 1rem; flex-direction: row-reverse;}
/* .productImgArea .mainSlider{width: 100%; margin-bottom: 1rem;} */
.productImgArea .mainSlider{width: 50rem}
.productImgArea .mainSlider .swiper-slide{width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #f5f5f5;}

/* .productImgArea .thumbsSlider{width: 100%; padding-bottom: 1rem;} */
.productImgArea .thumbsSlider{width: 10rem;   height: 50rem;}
.productImgArea .thumbsSlider .swiper-wrapper{display: block; width: 10rem; overflow-x: hidden; overflow-y: auto; }
/* .productImgArea .thumbsSlider .swiper-slide{width: calc((100% - 3rem)/4); aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;} */
.productImgArea .thumbsSlider .swiper-slide{width: 10rem; height: 10rem; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #f5f5f5;}
/* .productImgArea .thumbsSlider .swiper-slide + .swiper-slide{margin-left: 1rem;} */
.productImgArea .thumbsSlider .swiper-slide + .swiper-slide{margin-top: 1rem;}


.thumbsSlider .swiper-wrapper::-webkit-scrollbar{width: 0.3rem; height:100%;}/* 스크롤바의 너비 */
.thumbsSlider .swiper-wrapper::-webkit-scrollbar-thumb{height: 10%; background-color:var(--point); border-radius: 0;}  /* 스크롤바의 길이 & 색상 */
.thumbsSlider .swiper-wrapper::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.5);}/*스크롤바 뒷 배경 색상*/

.productImgArea .thumbsSlider .swiper-horizontal>.swiper-scrollbar, 
.productImgArea .thumbsSlider .swiper-scrollbar.swiper-scrollbar-horizontal{display: none;}
.productImgArea .swiper-scrollbar-drag{background: var(--point);}

/* .productInfoArea{width: calc(100% - 53rem - 8rem);} */
.productInfoArea{width: calc(100% - 61rem - 8rem);}
.productInfoArea .titleArea{padding-bottom: 3rem; border-bottom: 1px solid #000;}
.productInfoArea .titleArea .title{font-size: 3.2rem; line-height: 4rem; color: #1b1b1b; margin-bottom: 2rem; font-weight: bold;}
.productInfoArea .titleArea .title_sub{font-size: 2rem; line-height: 2.8rem; color: #555555;}

.productInfoArea .infoArea{padding-bottom: 1rem; border-bottom: 1px solid #ccc;}
.productInfoArea .infoArea .etc{padding: 1rem 0;}
.productInfoArea .infoArea .etc.price{padding: 1.5rem 0; border-bottom: 1px solid #ccc; margin-bottom: 1rem;}
.productInfoArea .infoArea .etc p{font-size: 1.7rem; line-height: 2; color: #626262;}
.productInfoArea .infoArea .etc p.name{width: 8rem; font-weight:bold; color:#000;}
.productInfoArea .infoArea .etc p.value{width: calc(100% - 8rem - 3rem); }
.productInfoArea .infoArea .etc input[type="number"]{width: 8rem; height: 3rem; font-size: 2rem; line-height: 1; text-align: center; border: 1px solid #ccc; padding-left: 1rem;}

.productInfoArea .priceAll{}
.productInfoArea .priceAll .totalPrice{display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 3rem 0; }
.productInfoArea .priceAll .totalPrice p{font-size: 1.8rem; line-height: 1; font-weight: bold; color: #1b1b1b;}

.priceAll_btns{display: flex; gap: 1rem;}
.priceAll_btns button{min-height: 5rem; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; color: #1b1b1b; font-weight: bold; border: 1px solid #98a3b3; width: calc((100% - 7rem - 2rem)/2); background: #f8f8f8;}
.priceAll_btns button.b_purchase{background: var(--point); color: #fff;}
.priceAll_btns button.purchase_heart{width: 7rem; color: #1b1b1b;}
.priceAll_btns button.purchase_heart.on{color: red;}

/* 퍼옴 */
/* 제품 뷰 하단 상세정보 */
.view_area_desc{width: 100%; min-height: 80rem;height: auto; border: 1px solid #dadada; display: flex; justify-content: space-between; align-items: flex-start;}
.view_area_desc .tab_wrap{width: 100%; height: 100%;}
/*.view_area_desc .tab_wrap{width: calc(100% - 27rem); height: 100%;}*/
.view_area_desc .tab_wrap ul.tab{display: flex;}
.view_area_desc .tab_wrap ul.tab li{display: flex; justify-content: center; align-items: center;flex: 1;cursor: pointer;height: 5rem; gap: 0.5rem; font-size: 1.6rem; color: #666666; border-left: 1px solid #dadada; border-bottom: 1px solid #dadada; background: #fafafa; font-weight: 500;}
.view_area_desc .tab_wrap ul.tab li:first-child{border-left: none;}
.view_area_desc .tab_wrap ul.tab li.on{color: #1b1b1b; background-color: #fff;}
.view_area_desc .tab_wrap ul.tab li span{border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: #aaa; line-height: 1; text-align: center;}
.view_area_desc .tab_wrap ul.tab li.on span{background: #1b1b1b; color: #fff;}
.view_area_desc .tab_wrap .tab_con{display: none; padding: 6rem 2rem 2rem; background: #f8f8f8;}
.view_area_desc .tab_wrap .tab_con.on{display: block; margin: 0 auto;}

#tab-4 .HKeditorContent *{width: auto !important;}
#tab-2 .btnArea.tac.two{display: flex; gap: 0.5rem;}

.view_area_desc_purchase{width: 27rem; height: 100%; border-left: 1px solid #dadada; padding: 4rem 0; }
.view_area_desc_purchase >div{padding: 0 2rem;}
.view_area_desc_purchase .view_area_top_purchase_option_done{padding: 1rem 2rem ; background: none;margin-top: 5rem; border-left: none; border-right: none; }
.view_area_desc_purchase .view_area_top_purchase_buttons{flex-wrap: wrap;}
.view_area_desc_purchase .view_area_top_purchase_buttons button{width: 100%;}

/* 제품 뷰 하단 상세정보 사용후기 */
.view_area_desc_review_title{display: flex; justify-content: space-between; align-items: center; font-size: 3rem; line-height: 1; padding-bottom: 2rem;color: #1b1b1b; font-weight: bold; border-bottom: 1px solid black;}
.view_area_desc_review_title *{font-size: 3rem; line-height: 1.2; color: #1b1b1b;}
.view_area_desc_review_title a{display: inline-block; padding: 0.5rem 1.5rem; background: #fafafa; color: #000; border-radius: 10px; font-size: 1.6rem; border: 1px solid #dadada;}
.view_area_desc_review_list{width: 100%;}
.view_area_desc_review_list li{display: flex; gap: 2rem; padding: 2rem; border-bottom: 1px solid #dadada;}
.review_thum{min-width: 15rem; height: 15rem; max-width: 15rem; display: flex; align-items: center; justify-content: center; border: 1px solid #f8f8f8;}
.review_thum img{max-width: 100%; max-height: 100%;}
.view_area_desc_review_list_top{display: flex; justify-content: space-between; align-items: flex-start ;margin-bottom: 1rem;}
/* .view_area_desc_review_list_top + .view_area_desc_review_list_option{margin-top: -1rem;} */
.view_area_desc_review_list_option{font-size: 1.4rem; margin-bottom: 1rem; color: #aaa;}
.view_area_desc_review_list_date{font-size: 1.6rem; color: #aaa;}
.view_area_desc_review_list_date span::before{content: '|'; padding: 0 0.51rem; font-size: 1.4rem; vertical-align: top;}
.view_area_desc_review_list_title{font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; color: #1b1b1b; line-height: 1.5;}
.view_area_desc_review_list_txt{font-size: 1.6rem; line-height: 2.4rem; color: #666666;}
/* 제품 뷰 하단 상세정보 상품문의  */
.view_area_desc_inquiry table{width: 100%; border-collapse: collapse;}
.view_area_desc_inquiry table thead{border-bottom: 1px solid #dadada;}
.view_area_desc_inquiry table thead th{padding: 2rem 1rem; font-weight: bold; font-size: 1.6rem; text-align: center; color: #000; }
.view_area_desc_inquiry table tbody tr{border-bottom: 1px solid #dadada;}
.view_area_desc_inquiry table tbody td{padding: 1rem; color: #333; text-align: center;}
.view_area_desc_inquiry table tbody td.title{text-align: left;}
.qna_box tr.row_question td .answer{display:inline-block; vertical-align:top; font-size:13px; font-weight:700; letter-spacing:-1px; color:#8d8d8d; line-height:1; box-sizing:border-box; border:1px solid #c4c4c4; background-color:#fbfbfa; padding:7px 10px;}
.qna_box tr.row_question td .answer.complete{color:#137dc5; border-color:#137dc5; background-color:#f1f9ff;}
/* 제품 뷰 하단 상세정보 배송정보 */
.parcel_area{padding: 0 1rem;}
.parcel_title{font-size: 2.5rem; font-weight: bold; margin: 2rem 0; color: #1b1b1b;}
.parcel_area ul li{width:100%; height:auto; box-sizing:border-box; font-size:2rem; line-height: 3rem;font-weight:400; line-height:1.4; padding-left:15px; position:relative; color:#616161;}
.parcel_area ul li::before{content:""; display:block; width:0.5rem; height:0.5rem; border-radius:2.5px; background:#616161; position:absolute; top:1.25rem; left:5px;}
.parcel_area ul li + li{margin-top:10px;}

/*  */



@media only screen and (max-width : 1720px){
    .product .product_list{gap: 10rem 4%;}
    .product .product_list li{width: calc((100% - 8%)/3);}
}


@media only screen and (max-width : 1540px){


}
@media only screen and (max-width : 1340px){
    .odmoem .ul01.gap6{gap: 3rem;}
    .odmoem .ul01 li{width: calc((100% - 6rem)/3);  padding: 7rem 2rem;}

    .product_solution{gap: 5rem;}
    .product_solution li{width: calc((100% - 25rem)/6);}
    .product_solution li + li::before{left: -2.5rem;}

    .product_viewArea_top{gap: 4rem;}

    .productImgArea{flex-wrap: wrap;}
    .productImgArea{width: 53rem;}
    .productImgArea .mainSlider{width: 100%;}
    .productImgArea .thumbsSlider{width: 100%; height: auto; padding-bottom: 1rem;}
    .productImgArea .thumbsSlider .swiper-wrapper{display: flex; width: 100%; overflow: initial;}
    .productImgArea .thumbsSlider .swiper-slide{width: calc((100% - 3rem)/4); height: auto; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .productImgArea .thumbsSlider .swiper-slide + .swiper-slide{margin-left: 1rem; margin-top: 0;}
    
    .productImgArea .thumbsSlider .swiper-horizontal>.swiper-scrollbar, 
    .productImgArea .thumbsSlider .swiper-scrollbar.swiper-scrollbar-horizontal{left: 0; width: 100%; bottom: 0; display: block;}
    .productImgArea .swiper-scrollbar-drag{background: var(--point);}

    .productInfoArea{width: calc(100% - 53rem - 4rem);}


    
}
@media only screen and (max-width : 1024px){
    .clean_formulation{gap: 6rem 5rem;}
    .clean_formulation li{width: calc((100% - 15rem)/4);}

    .clean_ul li{gap: 6rem;}
    .clean_ul li > div{width: calc((100% - 6rem)/2);}

    .product_solution{gap: 5rem;}
    .product_solution li{width: calc((100% - 15rem)/4);}

    .productImgArea{width: 40rem;}
    .productInfoArea{width: calc(100% - 40rem - 4rem);}

    


}
@media only screen and (max-width : 840px){
}
@media only screen and (max-width : 768px){


}
@media only screen and (max-width : 640px){
    .mmD{display: none !important;}
    .mmV{display: inline-block ;}

    .clean_formulation{gap: 6rem 3rem;}
    .clean_formulation li{width: calc((100% - 6rem)/2); max-width: none;}

    .clean_ul li > div{width: 100%;}
    .clean_ul li .bgArea{height: auto; aspect-ratio: 4/5;}
    .clean_ul li:nth-of-type(even) .textArea{text-align: left;}

    .marterial_circle{max-width: 45rem; height: 45rem;}
    .marterial_circle li:nth-of-type(1){left: 0; top: 0;}
    .marterial_circle li:nth-of-type(2){left: auto; top: 0; right: 0;}
    .marterial_circle li:nth-of-type(3){left: 0; bottom: 0; top: auto;}
    .marterial_circle li:nth-of-type(4){left: auto; bottom: 0; top: auto; right: 0; margin-left: 0; }

    .odmoem .ul01.gap6{gap: 3rem;}
    .odmoem .ul01 li{width: 100%;}

    .productImgArea{width: 100%;}
    .productInfoArea{width: 100%;}


}
@media only screen and (max-width : 480px){
    .product_solution{gap: 5rem;}
    .product_solution li{width: calc((100% - 5rem)/2);}
    .product_solution li + li::before{left: -2.5rem;}

    .product .product_list{gap: 5rem 2rem;}
    .product .product_list li{width: calc((100% - 2rem)/2);}
    .product .product_list li .imgArea{padding: 3rem 2rem;}

    

}
@media only screen and (max-width : 400px){
}