@charset "utf-8";

@font-face {
    font-family:"Pretendard";
    font-weight:900;
    src:url(pre/Pretendard-Black.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:800;
    src:url(pre/Pretendard-ExtraBold.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:700;
    src:url(pre/Pretendard-Bold.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:600;
    src:url(pre/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:500;
    src:url(pre/Pretendard-Medium.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:300;
    src:url(pre/Pretendard-Light.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:200;
    src:url(pre/Pretendard-ExtraLight.woff) format('woff');
}
@font-face {
    font-family:"Pretendard";
    font-weight:100;
    src:url(pre/Pretendard-Thin.woff) format('woff');
}

/********************************** 전체 Layout **********************************/
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
  	display: none!important;
  }
.clean_btn_01{position: absolute; width: 11.2%;height: 10%;top: 57%;left: 17%;}
.clean_btn_02{position: absolute;width: 72.5%;height: 73%;top: 27%;left: 13.7%;z-index: 3;}
.clean_btn_03{position: absolute; width: 12%; height: 14%; top: 72%; left: 29.8%; z-index:4;}
.swiper-button-prev, .swiper-button-next{top: 44%!important;}
/*.wrap {opacity:0}*/
.mobile_tab{display:none;}
.event-benefit-template {max-width:1380px; margin:0 auto; font-family:'Pretendard', 'Noto Sans', sans-serif}
.event-benefit-template picture {display:block;}
.contents.exhibition.ex-module-wrap .ev-detail-con.wide {max-width:1380px}
.contents.event .ev-detail-wrap .ev-detail-con {max-width:inherit; padding:0}
.eventTop {position:relative;z-index:6;}
/**/
.event-benefit-template .content-wrap .tab_wrap { position:sticky; z-index:11; top:0; left:0}
.tab_wrap {font-size:14px;}
.tab_wrap .tab_inner {width:100%; /*height:4.57em;*/ height:64px; text-align:center;}
.tab_wrap .tab_inner ul {display:flex; width:100%; height:100%; margin:0 auto; gap:1px; background:#9eaba4;}
.tab_wrap .tab_inner li {flex:0 1 33.3%; background:#75887E;}
.tab_wrap .tab_inner li:last-child {flex:0 1 33.4%;}
.tab_wrap .tab_inner li a {display:flex; align-items:center; justify-content:center; height:100%; font-size:20px; font-weight:500; color:#ffffff; line-height:1.4em; letter-spacing:-0.03em;}
.tab_wrap .tab_inner li.active {background:#111111;}
/* .tab_wrap .tab_inner li.active a {color:#FFFFFF} */
@media screen and (max-width:767px) {
    .event-benefit-template .content-wrap .tab_wrap {position:sticky; top:46px;}
    .header.helloBar~.container .event-benefit-template .content-wrap .tab_wrap {top:88px}
    .tab_wrap .tab_inner {height:calc(112/720*100vw);}
    .tab_wrap .tab_inner li a {font-size:calc(24/720*100vw); letter-spacing:0; border-width:1px}
    .tab_wrap .tab_inner li a span {height:auto; line-height:1.5;}
    .clean_btn_01{position: absolute; width: 29.2%;height: 10%;top: 54%;left: 13%;}
    .clean_btn_02{position: absolute;width: 86.5%;height: 71%;top: 29%;left: 6.7%;z-index: 3;}
    .clean_btn_03{position: absolute;width: 24%;height: 19%;top: 71.5%;left: 36%; z-index: 4;}
}
/**/
                                
article{border-bottom: 8px solid #e5e5e5; position: relative;}
article.content_03{border: none;}
.clean_btn_01,clean_btn_02,clean_btn_03{position: absolute;}
.tab_wrap5 {position:sticky; z-index:4; top:50px; left:0; background:#fff;}
.tab_wrap5 .tab_inner {padding:0; text-align:center; font-size:14px; background:#fff;}
.tab_wrap5 .tab_inner ul {display:inline-flex; height:3.50em; margin:0 auto;}
.tab_wrap5 .tab_inner li {position:relative; flex:1; height:100%;}
.tab_wrap5 .tab_inner li::after {content:''; position:absolute; right:-2px; top:50%; display:inline-block; width:4px; height:4px; margin-top:-2px; border-radius:5px; background:#BDBDBD;}
.tab_wrap5 .tab_inner li:last-child:after {display:none;}
.tab_wrap5 .tab_inner li a {display:flex; align-items:center; justify-content:center; height:100%; padding:0 24px; font-size:14px; font-weight:600; color:#666666; line-height:1.4em; letter-spacing:-0.03em; white-space:nowrap;}
.tab_wrap5 .tab_inner li.active a {color:#EA1241; font-weight:800}
.benefit_2.btn_area{
  padding: 4% 0;
 background-color: #f6fcf9;
}
    .benefit_2_a1{position:absolute;top: 52%;left: 18%;width: 7.5%;height: 5%;}
    .benefit_2_a2{position:absolute;top: 52%;left: 46%;width: 7.5%;height: 5%;}
    .benefit_2_a3{position:absolute;top: 52%;left: 74%;width: 7.5%;height: 5%;}
  	.benefit_2_a4{position:absolute;top: 90%;left: 46%;width: 7.5%;height: 5%;}
@media screen and (max-width:767px) {
.mobile_tab{display:block;}
    .tab_wrap5 {top:calc(46px + (60/360*100vw)); overflow:hidden;}
    .header.helloBar~.container .tab_wrap5 {top:calc(88px + (60/360*100vw))}
    .tab_wrap5 .tab_inner {padding:0}
    .tab_wrap5 .tab_inner ul {height:calc(60/360*100vw); padding:0}
    .tab_wrap5 .tab_inner li {flex-grow:1;}
    .tab_wrap5 .tab_inner li a {margin:0; white-space:nowrap; font-size:calc(14/360*100vw); padding:0 calc(18/360*100vw); min-height:auto}
    .tab_wrap5 .tab_inner li a span {margin-top:1vw}
  
    .benefit_2_a1{position:absolute;top: 29.5%;left: 38%;width: 23.5%;height: 3%;}
    .benefit_2_a2{position:absolute;top: 52%;left: 38%;width: 23.5%;height: 3%;}
    .benefit_2_a3{position:absolute;top: 74%;left: 38%;width: 23.5%;height: 3%;}
  	.benefit_2_a4{position:absolute;top: 96.5%;left: 38%;width: 23.5%;height: 3%;}
}
/**/
.tab_wrap3 {position:absolute;z-index:2;}
.tab_wrap3 .tab_inner {height:100%;}
.tab_wrap3 .tab_inner ul {width:100%; height:100%; display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.tab_wrap3 .tab_inner li {flex: 1 1 18%; position:relative;height:100%;background:rgba(255,255,0,.0);border-radius:50px;}
.tab_wrap3 .tab_inner li a {display:flex;align-items:center;justify-content:center;height:100%;}
.tab_wrap3 .tab_inner li.active {background-color:rgba(255,0,0,.0);}
.tab_container3 .tab_con {display:none}
.tab_container3 .tab_con.active {display:block}
/* @media screen and (max-width: 767px) {
    .tab_wrap3 .tab_inner ul {gap:6px;}
    .tab_wrap3 .tab_inner li {height:calc(32/360*100vw)}
} */
                            
      @media screen and (max-width: 767px) {
.mobile_tab .tab_wrap3 .tab_inner li a {display:flex;align-items:center;justify-content:center;height:100%; color: #696969;line-height: 5vh;font-size: 3.6vw;}
.mobile_tab .tab_wrap3 .tab_inner li.active {background-color: #2e2e33; color:#fff;}
.mobile_tab .tab_wrap3 .tab_inner li.active a{ color:#fff;}
}                       
                            
/* Toggle Btn */
.toggle_btn .toggle_on {display:none}
.toggle_btn.active .toggle_off {display:none}
.toggle_btn.active .toggle_on {display:block}
.toggle_btn + .toggle_con {display:none}
.toggle_btn.active + .toggle_con {display:block}
/* Toggle Btn New */
.btnToggle + .toggleData {display:none;}
.btnToggle.on + .toggleData {display:block}
/* .fullLine .btnToggle {display:block;background:#E2E2E2;}
.fullLine .btnToggle img {height:50px;}
.fullLine .btnToggle + .toggleData {padding-top:0;}
@media screen and (max-width:767px) {
    .btnToggle + .toggleData {padding:0;}
    .fullLine .btnToggle img {height:calc(50 / 360* 100vw);}
} */
/* 제품링크 */
.pdSet {padding:0 40px 60px; background:#F7F7F7;}
.pdSet h4 {padding:40px 0 20px;}
.pdSet h3 + h4 {padding-top:0;}
.pdImg {position:relative; display:inline-block;}
.pdImg .pdInner {position:absolute; display:grid; grid-template-columns:repeat(2, 1fr); gap:calc(30 / 830* 100%); left:calc(10 / 672* 100%); right:calc(10 / 672* 100%);}
.pdImg .pdInner span {position:relative;}
.pdImg .pdInner span.blind	{display: none;}
.pdImg .pdInner a {display:block; width:100%; height:100%; background:rgba(255,0,0,.0);}
.pdImg .pdInner button {position:absolute; top: 28%; right: 7.5%; width: 7%; height: 5.5%;}
.pdImg .pdInner .soldout {background:url(/kr/event/2025/07/01_cleaner/images/img_soldout.png) no-repeat center; background-size:100%;}
.pdImg .tvSet {position:relative;}
.pdImg .tvSet a {position:relative; display:block;}
.pdImg .tvSet a.tvSet1,
.pdImg .tvSet a.tvSet2 {position:absolute; z-index:2; bottom:calc(18 / 560* 100%); width:calc(124 / 318* 100%); height:calc(40 / 560* 100%); background:rgba(0,255,0,.0);}
.pdImg .tvSet a.tvSet1 {left:calc(30 / 318* 100%);}
.pdImg .tvSet a.tvSet2 {right:calc(30 / 318* 100%);}
.pdImg .tvSet a.tvSet3 {height:100%;}
@media screen and (max-width:767px) {
    .pdSet {padding:0 0 calc(40 / 360* 100vw);}
    .pdSet h4 {padding:calc(24 / 360* 100vw) 0 0;}
    .pdImg .pdInner {gap:calc(8 / 720* 100vw); left:calc(15 / 720* 100vw); right:calc(15 / 720* 100vw); grid-template-columns:repeat(1, 1fr);}
    .pdImg .pdInner .soldou {background:url(/kr/event/2025/07/01_cleaner/images/img_soldout_m.png) no-repeat center; background-size: 100%;}
}
.popup-wrap {max-width:620px; min-height: auto !important;}
.popup-wrap .pop-conts.no-footer {padding: 0 40px 0;}
@media screen and (max-width: 767px) {
    .popup-wrap .pop-conts.no-footer {padding: 32px 16px 60px;}
    .popup-wrap .pop-conts.no-footer:after {display:none;}
    .popup-wrap .pop-conts img {width:100%;}
}
/********************************** 베스트랭킹 **********************************/
.couponCont {background:#F6FCF9;}
.couponCont .couponNote .btnToggle {display:inline-block; padding:10px 0 20px;}
.couponCont .couponNote .btnToggle img {height:26px;}
.couponCont .couponNote .toggleData {padding-bottom:50px;}
.bestCont {padding-bottom:80px; background:#E6F3ED;}
.bestCont .pc .pdInner {top:calc(18 / 830* 100%);right:calc(18 / 830* 100%);bottom:calc(50 / 830* 100%);left:calc(18 / 830* 100%);grid-template-columns:repeat(3, 1fr); gap:calc(28 / 830* 100%) calc(20 / 830* 100%);}
.bestCont .bestBaneer {display:inline-block; margin-top:40px;}
@media screen and (max-width: 767px) {
    .couponCont .couponNote .btnToggle {padding:calc(10 / 720* 100vw) 0 calc(40 / 720* 100vw);}
    .couponCont .couponNote .btnToggle img {height:calc(40 / 720* 100vw);}
    .couponCont .couponNote .toggleData {padding-bottom:calc(40 / 720* 100vw);}
    .bestCont {padding-bottom:0;}
    .bestCont .pc .pdInner {top:0; right:0; bottom:0; left:0; gap:0;}
    .bestCont .mobile .pdInner {top:0; right:calc(40 / 720* 100vw); left:calc(40 / 720* 100vw); grid-template-columns:repeat(1, 1fr); gap:calc(20 / 720* 100vw);}
    .bestCont .mobile .moreBefore {position:relative;}
    .bestCont .mobile .moreBefore .pdInner {bottom:calc(162 / 720* 100vw);}
    .bestCont .mobile .moreAfter .pdInner {top:calc(0 / 720* 100vw); bottom:calc(156 / 720* 100vw);}
    .bestCont .pdMore {position:absolute; bottom:calc(80 / 720* 100vw); left:5.5%; right:5.5%; height:calc(73 / 720* 100vw); background:rgba(255,0,0,.0);}
    .bestCont .bestBaneer {margin:0 5.5% calc(60 / 720* 100vw);}
}
/********************************** 정품 소모품을 써야하는 이유 **********************************/
.originalCont {padding-bottom:80px;}
.originalCont .careNote {padding-top:60px;margin-bottom:-80px;}
.originalCont .careNote .btnToggle {display:inline-block; padding:10px 0 20px;}
.originalCont .careNote .btnToggle img {height:26px;}
.originalCont .careNote .toggleData {padding-bottom:50px;}
.originalCont section {position:relative; display:inline-block;}
.originalCont .tab_wrap3 {width:386px; height:48px; left:50%; top:0; transform: translateX(-50%);}
.originalCont .tab_wrap3 ul {gap:2.2%;}
.originalCont .tab_wrap3 li:nth-child(1) {flex:1 1 0;}
.originalCont .tab_wrap3 li:nth-child(2) {flex:1 1 24.6%;}
.originalCont .tab_wrap3 li:nth-child(3) {flex:1 1 20%;}
.originalCont .tab_wrap3 li:nth-child(4) {flex:1 1 33.3%;}
@media screen and (max-width: 767px) {
    .originalCont {padding-bottom:calc(100 / 720* 100vw);}
    .originalCont .careNote {padding-top:calc(40 / 720* 100vw);margin-bottom:calc(-80 / 720* 100vw);}
    .originalCont .careNote .btnToggle {padding:calc(10 / 720* 100vw) 0 calc(40 / 720* 100vw)}
    .originalCont .careNote .btnToggle img {height:calc(40 / 720* 100vw);}
    .originalCont .careNote .toggleData {padding-bottom:calc(40 / 720* 100vw);}
    .originalCont .tab_wrap3 {width: 66%;height: calc(58 / 720 * 100vw); top:0;}
    .originalCont .tab_wrap3 ul {gap:calc(10 / 720* 100vw);}
    .originalCont .tab_wrap3 li {height:100%;}
    .originalCont .tab_wrap3 li:nth-child(1) {flex:1 1 31%;}
    .originalCont .tab_wrap3 li:nth-child(2) {flex:1 1 54%;}
    .originalCont .tab_wrap3 li:nth-child(3) {flex:0 1 32%;}
    .originalCont .tab_wrap3 li:nth-child(4) {flex:0 1 55.3%;}
}
/********************************** 시즌별 추천 소모품 **********************************/
.seasonCont {padding-bottom:100px; background:#F1F3F5;}
.seasonCont section {position:relative; display:inline-block;}
.seasonCont .tab_wrap3 {left:23.2%; right:23.2%; height:23.2%;}
.seasonCont .tab_wrap3 ul {gap:14.8% 2.4%;}
.seasonCont .tab_wrap3 ul li {flex:0 1 14.5%; height:auto;}
.seasonCont .tab_wrap3 li:nth-child(1) {flex:0 1 29.7%;}
.seasonCont .tab_wrap3 li:nth-child(4) {flex:0 1 17.3%;}
.seasonCont .tab_wrap3 li:nth-child(8) {flex:0 1 20.18%;}
.seasonCont .tab_wrap3 li:nth-child(9) {flex:0 1 24.1%;}
.seasonCont .pdInner {top:calc(176 / 504* 100%); right:0; bottom:calc(3 / 504* 100%); left:0; grid-template-columns:repeat(4, 1fr); gap:calc(24 / 1020* 100%);}
@media screen and (max-width: 767px) {
    .seasonCont {padding-bottom:0;}
    .seasonCont .tab_wrap3 {left:4.9%; right:4.9%; height:calc(135 / 720* 100vw);}
    .seasonCont .tab_wrap3 ul {gap:18.5% 2.5%;}
    .seasonCont .tab_wrap3 ul li {flex:0 1 14.3%; height:auto;}
    .seasonCont .tab_wrap3 li:nth-child(1) {flex:0 1 30.3%;}
    .seasonCont .tab_wrap3 li:nth-child(4) {flex:0 1 17.4%;}
    .seasonCont .tab_wrap3 li:nth-child(8) {flex:0 1 20.3%;}
    .seasonCont .tab_wrap3 li:nth-child(9) {flex:0 1 24.4%;}
    .seasonCont .pdInner {top:calc(195 / 720* 100vw); right:5%; bottom:calc(76 / 720* 100vw); left:5%; grid-template-columns:repeat(2, 1fr); gap:calc(20/ 720* 100vw);}
    .seasonCont .tab_con:nth-child(2) .pdInner,
    .seasonCont .tab_con:nth-child(3) .pdInner,
    .seasonCont .tab_con:nth-child(6) .pdInner,
    .seasonCont .tab_con:nth-child(8) .pdInner {bottom:calc(152 / 720* 100vw);}
  .pc_img{display:none;}
}