/***feature01***/
#featureMovie {
  margin-bottom: 0 !important;
}
.responsive.mainLayout img,
.responsive.subLayout img,
.responsive.subLayout2 img {
  max-width: 100%;
}
.responsive.subLayout {
  max-width: 1100px;
  margin: 0 auto;
}
.responsive.subLayout2 {
  max-width: 1400px;
  margin: 0 auto;
}

.responsive.subLayout .inLayout {
  margin: 120px 0 0 0;
}
.responsive.subLayout.flex .inLayout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.responsive.subLayout.flex .inLayout > section {
  width: 50%;
  text-align: left;
}
.responsive.subLayout.flex .inLayout.type2 > section:nth-child(1) {
  order: 2;
}
.responsive.subLayout.flex .inLayout.type2 > section:nth-child(2) {
  order: 1;
}

.uspVideo {
  line-height: 0;
}


.vdo_btn_play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -57px 0 0 -57px;
  display: none;
  z-index:9;
}

@media screen and (max-width: 768px) {
  .mobile .responsive.subLayout .inLayout {
    margin: 0;
  }
  .mobile .responsive.subLayout.flex .inLayout {
    flex-direction: column;
  }
  .mobile .responsive.subLayout.flex .inLayout > section {
    width: 100%;
  }
  .mobile .responsive.subLayout.flex .inLayout.type2 > section:nth-child(1) {
    order: 1;
  }
  .mobile .responsive.subLayout.flex .inLayout.type2 > section:nth-child(2) {
    order: 2;
  }

}
section.responsive .layout-11-top #custompager2.dot-thumbs a.active:after {
  display: none;
}
#featureIdx03 .uspVideo.usp0104 {
  position: absolute;
  left: -162px;
  top: -148px;
  width: 57%;
}
.usp0204_01,
.usp0204_02,
.usp0204_03 {
  position: relative;
}
.usp0204_01 .uspVideo,
.usp0204_02 .uspVideo,
.usp0204_03 .uspVideo {
  position: relative;
}
.usp0204_01 .imgCover,
.usp0204_02 .imgCover,
.usp0204_03 .imgCover {
  position: absolute;
  top: 0;
  width: 100%;
  display: none;
}
.usp0204_01 .uspVideo {
  position: absolute;
  top: 0; left: 0;
  width: 49.5%;
  height: auto;
}
.usp0204_02 .uspVideo {
  position: absolute;
  top: 0; right: 0;
  width: 49.5%;
  height: auto;
}
.usp0204_03 .uspVideo {
  position: absolute;
  top: 0; left: 0;
  width: 49.5%; height: auto;
}

@media screen and (max-width: 768px) {
  .mobile .usp0104 {
    max-width: 100%;
    position: static;
    margin: 0 auto;
  }
  .mobile section.responsive .layout-11-top > * {
    padding: 0;
  }
  .mobile section.responsive .layout-11-top #custompager2.dot-thumbs {
    margin: 0 auto;
  }
  .mobile section.responsive .layout-11-top #custompager2.dot-thumbs a {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    color: #b7b7b7;
    max-width: 95px;
    padding: 11px 20px;
    margin: 0 3px;
  }
  .mobile section.responsive .layout-11-top #custompager2.dot-thumbs a.active {
    border: 2px solid #90d1e6;
    color: #000;
    font-weight: bold;
  }
  .usp0204_01, .usp0204_02, .usp0204_03 {
    position: absolute;
    left: 7%;
    top: 6%;
    width: 87%;
    height: auto;
  }
  /* .usp0204_02 {
    position: absolute;
    left: 7%;
    top: 9%;
    width: 86.5%;
    height: 65.5%;
  }
  .usp0204_03 {
    position: absolute;
    left: 7%;
    top: 9%;
    width: 86.5%;
    height: 65.5%;
  } */
  .vdo_btn_play {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    width: 77px;
    height: 77px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
}

/***feature02***/
.usp0202 {
  max-width: 100%;
  position: absolute;
  right: -50px;
  bottom: 18%;
}

@media screen and (max-width: 1500px) {
  .usp0202 {
    right: 0;
  }
}

@media screen and (max-width: 768px) {
  .mobile .usp0202 {
    max-width: 75%;
    margin: 0 auto 50px auto;
    position: static;
  }
}

/***feature03***/

.usp_module .slideNew .bx-wrapper img {
  width: auto;
}
#featureIdx03 .responsive.subLayout .inLayout2 {
  margin-right: -172px;
}
.subLayout .subLayout {
  width: 1200px;
  max-width: 1200px;
}

@media screen and (max-width: 1500px) {
  .subLayout .subLayout {
    width: 100%;
  }
  #featureIdx03 .responsive.subLayout .inLayout2 {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {
  /* .mobile .usp_module .subLayout .slideNew {
    margin-bottom: 75px;
  } */
  .mobile .usp_module .subLayout .slideNew .bx-wrapper img {
    width: auto;
  }
  .mobile .subLayout .subLayout {
    width: 100%;
  }
}
  


/* ####  202107_공기청정기 알파 펫 USP  #### */
#anchor2, #anchor3  {
  position: relative;
}
#featureIdx01 .anchor-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 6%;
}
section.anchor-wrap .img-ani {
  position: relative;
  width: 100%; height: 0;
  padding-top: calc(900 / 1600 * 100%);
  background: url(../../../md08988828/usp/as351nrpa_0103.jpg)center center / 120% no-repeat;
  transition: all 1s ease-in;
  opacity: 0.8;
}
/* bg-animation */
section.anchor-wrap .img-ani.scale {
  background-size: 100% ;
  opacity: 1;
}

section.anchor-wrap .img-ani .ani-wrap {
  position: absolute;
  top: 20%; left: 15%;
  width: 38%;
}
section.anchor-wrap .img-ani .ani-wrap ul {
  /* border:1px solid red; */
}
section.anchor-wrap .img-ani .ani-wrap li {
  width: 100%;
  /* border:1px solid green; */
}
section.anchor-wrap .img-ani .ani-wrap a {
  display: block;
  width: 100%;
  padding-top: 24%;
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(1) a {
  padding-top: 35%;
  background: url(../../../md08988828/usp/011-title.png) 0 0 / 100% no-repeat;
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(2) a {
  background: url(../../../md08988828/usp/01pet-text.png) 0 0 / 50% no-repeat;
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(3) a {
  background: url(../../../md08988828/usp/02ai-text.png) 0 0 / 54% no-repeat;
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(4) a {
  background: url(../../../md08988828/usp/03virus-text.png) 3px 0 / 51% no-repeat;
}

/* text-animation */
section.anchor-wrap .img-ani .ani-wrap li:nth-child(1) {
  opacity: 0;
  transition: all 1.7s 0.2s cubic-bezier(0, 0.51, 0.16, 1.1);
  transform: translateY(-80px);
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(2) {
  opacity: 0;
  transition: all 1.7s 0.5s cubic-bezier(0, 0.51, 0.16, 1.1);
  transform: translateY(-80px);
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(3) {
  opacity: 0;
  transition: all 1.7s 0.8s cubic-bezier(0, 0.51, 0.16, 1.1);
  transform: translateY(-80px);
}
section.anchor-wrap .img-ani .ani-wrap li:nth-child(4) {
  opacity: 0;
  transition: all 1.7s 1s cubic-bezier(0, 0.51, 0.16, 1.1);
  transform: translateY(-80px);
}

/* text-animation-show */
section.anchor-wrap .img-ani .ani-wrap.show li:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
}
section.anchor-wrap .img-ani .ani-wrap.show li:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
}
section.anchor-wrap .img-ani .ani-wrap.show li:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
}
section.anchor-wrap .img-ani .ani-wrap.show li:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
}

section.responsive.disClWrap {position: relative;}
section.responsive.disClWrap .disCl-wrap {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 75px;
  /* border:1px solid blue; */
  z-index: 9;
}
section.responsive.disClWrap .disCl-wrap .disCl-link {
  position: absolute;
  width: 100%; height: 100%;
  text-align: right;
  /* border:1px solid red; */
}
section.responsive.disClWrap .disCl-wrap.disCl011 {top: 31%;}
section.responsive.disClWrap .disCl-wrap.disCl022 {top: 55%;}
section.responsive.disClWrap .disCl-wrap.disCl013 {bottom: -5%;}
section.responsive.disClWrap .disCl-wrap.disCl024 {top: 12%;}
section.responsive.disClWrap .disCl-wrap.disCl035 {top: 4.5%;}
section.responsive.disClWrap .disCl-wrap.disCl06 {top: 54%;}
section.responsive.disClWrap .disCl-wrap.disCl07 {top: 6%;}
section.responsive.disClWrap .disCl-wrap.disCl08 {bottom: 0%;}

section.linkScrollWrap {position: relative;}
section.linkScrollWrap .linkScroll-wrap {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
section.linkScrollWrap .linkScroll-wrap .linkScroll {
  position: absolute; 
  width: 100%; height: 3.7%;
  /* border:1px solid green; */
}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc01 {top: -2.2%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc02 {top: 4.6%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc03 {top: 10%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc04 {top: 20.8%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc05 {top: 26.2%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc06 {top: 53.5%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc07 {top: 58.5%;}
section.linkScrollWrap .linkScroll-wrap .linkScroll.sc08 {top: 87.3%;}
section.responsive.mt50 {margin-top: 7%;}
section.responsive.mb60 {margin-bottom: 5%;}

/* #featureIdx04 {margin-top: 150px;} */

section.responsive .inLayout {position: relative;}
section.responsive .inLayout .ahref-wrap-w {
  position: absolute; bottom: 80px; left: 0;
  width: 100%; height: 70px;
  z-index: 9;
}
section.responsive .inLayout .ahref-wrap-w a {
  position: relative;
  display: inline-block;
  float: left;
  margin-right: 25px;
  width: 40%; height: 100%;
  /* border:1px solid blue; */
}
section.responsive .inLayout .ahref-wrap-w a:nth-child(1) {
  margin-left: 6%;
  margin-right: 7%;
}

/* 슬라이드 버튼 커스텀_w */
#featureIdx04 .slide .next a, .slide .next button,
#featureIdx04 .slide .prev a, .slide .prev button {
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  /* border:1px solid red; */
}
#featureIdx04 .slide .prev a, .slide .prev button,
#featureIdx04 .slide .next a, .slide .next button {background-position: -500px -500px;}
#featureIdx04 section.responsive .layout-11 .next {right: 38px;}

#featureIdx03 .uspVideo.usp0104 {
  top:-30px;
}
#featureIdx03 .uspVideo.topbot {
  position: relative;
  bottom:-90px;
} 
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 9px;
  height: 9px;
  border: 0 none;
  border-radius: 50%;
  background: #c3c3c5;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
  width: 19px;
  height: 9px;
  padding: 0;
  border-radius: 9px;
  background: #dc1e58;
}



@media screen and (max-width: 768px) {
  #anchor2, #anchor3  {padding-top: 0px;}
  #featureIdx01 .anchor-wrap {margin-top: 0;}
  section.responsive.disClWrap .disCl-wrap.disCl011 {top: 27%;}
  section.responsive.disClWrap .disCl-wrap.disCl022 {top: 23%;}
  section.responsive.disClWrap .disCl-wrap.disCl013 {bottom: 6%;}
  section.responsive.disClWrap .disCl-wrap.disCl02 {top: 8%;}
  section.responsive.disClWrap .disCl-wrap.disCl03 {top: 4%; z-index: 10;}
  section.responsive.disClWrap .disCl-wrap.disCl035 {top: 21.5%;}
  section.responsive.disClWrap .disCl-wrap.disCl06 {top: 17%;}
  section.responsive.disClWrap .disCl-wrap.disCl07 {top: 3%;}
  section.responsive.disClWrap .disCl-wrap.disCl08 {bottom: -3%;}

  section.linkScrollWrap .linkScroll-wrap .linkScroll {width: 100%; height: 4%;} /* border:1px solid green; */
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc01 {top: -2.8%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc02 {top: 4%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc03 {top: 10.1%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc04 {top: 21%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc05 {top: 25.8%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc06 {top: 53.5%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc07 {top: 58.5%;}
  section.linkScrollWrap .linkScroll-wrap .linkScroll.sc08 {top: 86.5%;}

  #featureIdx03 .uspVideo.topbot {margin: 10% 0 7%;}

  /* scale */
  section.anchor-wrap .img-ani {
    width: 100%; height: 0;
    padding-top: calc(1209 / 720 * 100%);
    background: url(../../../md08988828/usp/as351nrpa_0103_m.jpg)no-repeat;
    background-size: 115%;
    background-position: 0 0;
    transition: all 0.8s cubic-bezier(0, 0.51, 0.16, 1.1);
    opacity: 0.8;
  }
  section.anchor-wrap .img-ani .ani-wrap {
    position: absolute;
    top: 15.5%; left: 8%;
    width: 77%;
  }
  section.anchor-wrap .img-ani .ani-wrap a {padding-top: 30%;}
  section.anchor-wrap .img-ani .ani-wrap li:nth-child(1) a {
    padding-top: 52%;
    background: url(../../../md08988828/usp/011-title.png) 0 0 / 96% no-repeat;
  }
  section.anchor-wrap .img-ani .ani-wrap li:nth-child(2) a {
    background: url(../../../md08988828/usp/01pet-text.png) 0 0 / 57% no-repeat;
  }
  section.anchor-wrap .img-ani .ani-wrap li:nth-child(3) a {
    background: url(../../../md08988828/usp/02ai-text.png) 0 0 / 63% no-repeat;
  }
  section.anchor-wrap .img-ani .ani-wrap li:nth-child(4) a {
    background: url(../../../md08988828/usp/03virus-text.png) 0 0 / 59% no-repeat;
  }
  
  section.responsive .inLayout .ahref-wrap-m {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 15%;
    z-index: 9;
    /* border:1px solid red; */
  }
  section.responsive .inLayout .ahref-wrap-m .ahref-m01 {
    display: block;
    width: 100%; height: 55px;
    /* border:1px solid blue; */
  }
  section.responsive .inLayout .ahref-wrap-m .ahref-m02 {
    display: inline-block;
    width: 49%; height: 55px;
    /* border:1px solid blue; */
  }
  #featureIdx03 .uspVideo.usp0104 {width: 100%;}
  #featureIdx03 .uspVideo.topbot {bottom: 0;}
  #featureIdx03 .uspVideo.usp0104 {position:static;}

  /* 슬라이드 버튼 커스텀_m */
  #featureIdx04 .slide .next a, .slide .next button,
  #featureIdx04 .slide .prev a, .slide .prev button,
  .mobile .slide .prev button.sp, .mobile .slide .next button.sp {
    position: absolute; top: 0; 
    width: 35px; height: 35px;
    /* border:1px solid red; */
  }
  .mobile .slide .prev button.sp {left:-31px}
  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 9px;
    height: 9px;
    border: 0 none;
    border-radius: 50%;
    background: #c3c3c5;
  }
  .bx-wrapper .bx-pager.bx-default-pager a.active {
    width: 19px;
    height: 9px;
    padding: 0;
    border-radius: 9px;
    background: #dc1e58;
  }

  /* #featureIdx04 {margin-top: 16%;}  */
  #featureIdx04 .btn-arrow::before,
  #featureIdx02 .btn-arrow::before {position: absolute; top: 0; }
  
  #featureIdx04 .btn-arrow.prev::before,
  #featureIdx02 .btn-arrow.prev::before {left: -30px;}

  #featureIdx04 .btn-arrow.next::before,
  #featureIdx02 .btn-arrow.next::before {left: 5px;}

  /* button.bx-next.sp, button.bx-prev.sp {display: none;} */
  .mobile .slide .prev button.sp, .mobile .slide .next button.sp {
    background-position: -1000px 0;
  }
  .slide .prev {display: block;}
  .slide .next {display: block;}

  #featureIdx04 .slide .next.top,
  #featureIdx04 .slide .prev.top {top: 34%;}

  #featureIdx02 section.responsive.mt50 {margin-top: 17%;}
}


/* 항균text추가_211104 */
.titleTextWrap {
  position: relative;  width: 100%;
  text-align: left;
  padding: 0 0 8vw; 
}
.titleTextWrap .minititle {
  display: block; 
  font-size: 14px; 
  line-height: 1.8;
  padding-top: 3%;
  color: #888;
}
.titleTextWrap .listDesc li { 
  position: relative;
  color: #888888; line-height: 1.8;
  padding-left: 8px;
}
.titleTextWrap .listDesc li::before {
  content: "*";
  position: absolute; top: 3px; left: 0;
  display: inline-block;
  width: 22px; 
  color: #888;
}
.titleTextWrap .ftnoti {
  font-size: 14px; 
  line-height: 1.8; font-weight: 500;
  padding-top: 2%;
  color: #888;
}

@media screen and (min-width: 800px) and (max-width:1200px) {
  .titleTextWrap .listDesc li,
  .titleTextWrap .minititle, .titleTextWrap .ftnoti {font-size: 13px; }
}
@media screen and (max-width: 1100px) {
  .titleTextWrap {padding: 2vw 1.5vw 7vw;}
}
@media screen and (max-width: 764px) {
  .titleTextWrap {padding: 0 25px 20px;}
  .titleTextWrap .minititle, .titleTextWrap .listDesc, .titleTextWrap .ftnoti
   {font-size: 12px;line-height: 1.8;}
  .titleTextWrap .listDesc li {padding-left: 6px; line-height: 1.8;}
}
/* 1111추가문구 */
section.mainLayout .petnoti {
  position: relative;
  padding-top: 10px;
}
section.mainLayout .petnoti .petnoti-text {
  color: #888888;
  font-size: 14px;
  line-height: 1.8;
}
@media screen and (max-width: 1599px) {
  section.mainLayout .petnoti {padding-left: 16px;}
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
  section.mainLayout .petnoti .petnoti-text {font-size: 13px;}
}
@media screen and (max-width: 764px) {
  section.mainLayout .petnoti {padding-top: 20px; padding-left: 0; margin-bottom: 20px;
    width: 100%; text-align: center; }
  section.mainLayout .petnoti .petnoti-text {font-size: 12px;}
  section.responsive.mt40 {margin-top: 10%;}
}

/* sideText */
#featureIdx02 .mainLayout .sideWrap {
  position: relative; 
  padding: 0 53% 0 65px;
  margin: 9vw auto;
}
#featureIdx02 .mainLayout .sideTextWrap {    
  position: absolute;
  top: 52%; left: 53%;
  transform: translateY(-50%);
  width: 47%; 
  text-align: left;
  z-index: 10;
}
#featureIdx02 .mainLayout .sideTextWrap .h2Sub {
  display: block;
  font-size: 26px; 
  color: #767676;
  font-weight: bold;
}
#featureIdx02 .mainLayout .sideTextWrap h2 {
  color: #222222;
  font-size: 48px; 
  padding: 1% 0 2% 0;
}
#featureIdx02 .mainLayout .sideTextWrap .titleDesc {
  position: relative;
  color: #222222;
  font-size: 26px;
  line-height: 1.6;
}
#featureIdx02 .mainLayout .sideTextWrap .titleDesc::after {
  content: "②";
  display: inline-block;
  position: relative;
  top: -6px;  right: 4px;
  width: 20px;  height: 20px;
  font-size: 20px;
}

@media screen and (min-width: 800px) and (max-width: 1600px) {
  #featureIdx02 .mainLayout .sideTextWrap h2 { font-size: 3vw; }
  #featureIdx02 .mainLayout .sideTextWrap .titleDesc { font-size: 1.4vw; }
  #featureIdx02 .mainLayout .sideTextWrap .titleDesc::after { font-size: 1.25vw; }
  #featureIdx02 .mainLayout .sideTextWrap .h2Sub { font-size: 1.625vw; }
}
@media screen and (max-width: 764px){
  #featureIdx02 .mainLayout .sideWrap {
    padding: 0;
    margin: 35vw 0 0;
  }
  #featureIdx02 .mainLayout .sideTextWrap {
    position: relative; top: 0; left: 0;
    width: 100%;
    padding-left: 0;
    text-align: center;
  }
  #featureIdx02 .mainLayout .sideTextWrap .h2Sub { font-size: 15px; }
  #featureIdx02 .mainLayout .sideTextWrap h2 {
    font-size: 27px; line-height: 1.5;
  }
  #featureIdx02 .mainLayout .sideTextWrap .titleDesc {
      font-size: 16px; line-height: 1.6;
  }
  #featureIdx02 .mainLayout .sideTextWrap .titleDesc::after { 
    top: -4px;  right: 6px;
    width: 20px;  height: 20px;
    font-size: 12px;
  }
}