/* *********************************************** */
/* *********************************************** */
/* ********************** [2] 제품소개 */
/* 제품의 특장점 / 제품소개*/
@keyframes imgOpa {
  0% {
      opacity: 0;
  }
  50% {
      opacity: 0;
  }
  51% {
      opacity: 1;
  }
  100% {
      opacity: 1;
  }
}


.greenStar{color: #01A661}
.section{background-color: #fff;}

.sub02 .imgBx{height: 20rem; }
.sub02 img.pd-img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.sub02 .small-tit-wr{text-align: center;}
.sub02 .small-tit{font-size: 2.8rem;font-weight: 700;line-height: 32px;}
.sub02 .small-txt{font-size: 2rem;line-height: 32px;}

.sub02 .sec_01 .c-txt{}
.sub02 .sec_01 .c-txt strong{display: block;font-size: 3.7rem;line-height: 46px;}
.sub02 .sec_01 .c-txt strong .point{color: #01A661}
.sub02 .sec_01 .c-txt p{font-size: 1.8rem;line-height: 32px;color: #323232;margin-top: 1.5rem}
.sub02 .sec_01 .c-txt p .bold{color: #000;}

.sub02 .sec_01 .cont01{padding-bottom: 12rem}
.sub02 .sec_01 .cont01 .imgBx{height: 30.4rem;margin-bottom: 3.5rem}
.sub02 .sec_01 .cont01 .imgBx .pd-img{width: 100%;height:100%;object-fit: cover;object-position: center;}
.sub02 .sec_01 .cont01 .imgBx .pd-img.mo-img{display: none;}

.sub02 .sec_01 .cont02{background-color: #F7F9F8;padding: 12rem 0;}
.sub02 .sec_01 .cont02 .c-txt{padding-bottom: 3.5rem}
.sub02 .sec_01 .cont02 .flex{align-items: center;justify-content: space-between;}
.sub02 .sec_01 .cont02 .circle{
  width: 20rem;
  height: 20rem;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #01A661
}
.sub02 .sec_01 .cont02 .iconBx{}
.sub02 .sec_01 .cont02 .iconBx .icon{}
.sub02 .sec_01 .cont02 .icon-wr li{margin-right: -1.8rem}
.sub02 .sec_01 .cont02 .icon-wr strong{text-align: center;margin-top: 1.5rem;font-size: 1.8rem}
.sub02 .sec_01 .cont02 .icon-wr1 {display: grid;grid-template-columns: repeat(4,1fr);}

.sub02 .sec_01 .cont02 .icon-wr1 .circle{background-color: transparent}
.sub02 .sec_01 .cont02 .icon-wr2{display: flex;align-items: center;}
.sub02 .sec_01 .cont02 .icon-wr2 .circle{position:relative;background-color: #01A661;border:0}
.sub02 .sec_01 .cont02 .icon-wr2 .circle::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: transparent;
  border: 1px solid #fff;
  top: -1px;
  left: -1px;
  z-index: 3;
}
.sub02 .sec_01 .cont02 .plus-bx{margin: 0 auto;}
.sub02 .sec_01 .cont02 .icon-wr2 strong{color: #fff}


.sub02 .sec_01 .cont03{padding: 12.8rem 0 6rem}
.sub02 .sec_01 .cont03 .flex{align-items: center;justify-content: space-between;}
.sub02 .sec_01 .cont03 .c-txt{width: 32%;margin-right: 5.8rem}
.sub02 .sec_01 .active-bx{width: 68%;display: flex;align-items: center;}
.sub02 .sec_01 .active-bx li.bx{width: calc(100% / 2);height: 37.3rem;background-color: #F8FAF3;padding: 0 5rem}
.sub02 .sec_01 .active-bx li.bx .t-bx{font-size: 2rem;line-height: 30px;display: flex;flex-direction: column;align-items: flex-start;}
.sub02 .sec_01 .active-bx li.bx .t-bx > strong{font-size: 2.2rem}
.sub02 .sec_01 .active-bx li.bx .t-bx span{font-size: 1.8rem;font-weight: 500;}
.sub02 .sec_01 .active-bx li.bx_1{position: relative;border-radius: 20px 0px 0px 20px;}
.sub02 .sec_01 .active-bx li.bx_1 .t-bx{
  position: absolute;
  right: 76px;
  bottom: 32px;
  z-index: 2;
}
.sub02 .sec_01 .active-bx li.bx_1 img.mush-img{
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  z-index: 2;
  width: 22rem;
}
.sub02 .sec_01 .active-bx li.bx_2{position: relative;border-radius: 0px 20px 20px 0px;transition: .5s}
.sub02 .sec_01 .active-bx li.bx_2 .t-bx{
  position:absolute;
  left: 59px;
  bottom: 32px;
  z-index: 2
}
.sub02 .sec_01 .active-bx li.bx_2 img.mush-img{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: .5s
}
.sub02 .sec_01 .active-bx li.bx_2.effect{background-color: #EAF9E3;box-shadow: 2px 0px 8px 0px rgba(9, 62, 36, 0.15);}
.sub02 .sec_01 .active-bx li.bx_2.effect .t-bx{color: #01A661;font-weight: 700;}
.sub02 .sec_01 .active-bx li.bx_2.effect img.mush-img{transform:  translateY(-50%) scale(1.2);}

.sub02 .sec_02{position: relative;width: 100%;height: 45rem;overflow: hidden;}
.sub02 .sec_02 img{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.sub02 .sec_02 .small-tit-wr{position: absolute;top: 50%;left: var(--inner-pd);transform: translateY(-50%);width: 100%;text-align: left;}
.sub02 .sec_02 .small-tit, .sub02 .sec_02 .small-txt{color: #fff;}
.sub02 .sec_02 .mid-deco{font-family: "Noto Sans KR";display: block; font-size: 6rem;font-weight: 700;color: #fff;line-height: 60px;margin-top: 3rem;}
.sub02 .sec_02 .mid-deco.deco2{
  transform: rotate(180deg);
  text-align: right;
  margin-top: 0
}

.sub02 .sec_03 .small-tit-wr{padding-bottom: 9rem;}
.sub02 .sec_03 .small-tit{color: #000;}
.sub02 .sec_03 .small-txt{color: #959595;margin-top: 2rem;}

.sub02 .sec_04{background-color: #F4F1DC;}



@media all and (max-width:1300px) {
  .sub02 .sec_01 .c-txt p br.br_pc{display: none}
  .sub02 .sec_01 .cont02 .flex{flex-direction: column;}
  .sub02 .sec_01 .cont02 .plus-bx{margin: 0;padding: 2rem 0;}

  .sub02 .sec_01 .cont03 .c-txt{margin-right: 3rem}
  .sub02 .sec_01 .cont03 br.br_pc{display: none;}

  .sub02 .sec_01 .cont03 .c-txt{width: 37%}
  .sub02 .sec_01 .active-bx{width: 62%}
  .sub02 .sec_01 .active-bx li.bx_1 .t-bx{right: 3rem;bottom: 2rem;}
  .sub02 .sec_01 .active-bx li.bx_2 .t-bx{left: 3rem;bottom:2rem}
  .sub02 .sec_01 .active-bx li.bx_1 img.mush-img{width: 20rem;left: 0}
  .sub02 .sec_01 .active-bx li.bx_2 img.mush-img{width: 20rem;right: 0;top: 0;transform: inherit !important;}

  .flex-wr ul.flex-bx > li.fx-txtBx p br.br_pc{display: none;}
}

@media all and (max-width:960px) {
  .flex-wr ul.flex-bx{flex-direction: column;}
  .flex-wr ul.flex-bx > li.fx-imgBx, .flex-wr ul.flex-bx > li.fx-txtBx{width: 100%;}
  .flex-wr ul.flex-bx > li.fx-txtBx{margin-left: 0;margin-top: 3rem}
  .flex-wr ul.flex-bx:nth-child(2n){flex-direction: column;}
  .flex-wr ul.flex-bx:nth-child(2n) > li.fx-txtBx{margin-right: 0}
  .flex-wr ul.flex-bx:not(:first-child){padding-top: 12rem;}
  .flex-wr ul.flex-bx > li.fx-imgBx{height: 35rem}
  .flex-wr ul.flex-bx .more-btn{font-size: 1.8rem;padding: 1.4rem 4.1rem;height: 5.5rem}
}

@media all and (max-width:768px) {
  .sub02 .sec_02 .small-tit-wr{width: 90%}
  .sub02 .sec_03 .small-tit br.br_mo{display: inline-block;}
  .sub02 .sec_01 .c-txt strong{font-size: 2.2rem;line-height: 29px;}
  .sub02 .sec_01 .c-txt p{font-size: 1.6rem;line-height: 26px;margin-top: 1rem}
  .sub02 .sec_01 .cont01 .imgBx{height: 28rem;margin-bottom: 2rem}
  .sub02 .sec_01 .cont02 .circle{width: 18rem;height: 18rem}
  .sub02 .sec_01 .cont02 .iconBx .icon{width: 7rem}
  .sub02 .sec_01 .cont02 .icon-wr strong{font-size: 1.6rem}
  .sub02 .sec_01 .cont03 .flex{flex-direction: column;}
  .sub02 .sec_01 .cont03 .c-txt, .sub02 .sec_01 .active-bx{width: 100%;}
  .sub02 .sec_01 .cont03 .c-txt{margin-right: 0;}
  .sub02 .sec_01 .active-bx{margin-top: 3rem}
  .sub02 .sec_01 .active-bx li.bx{height: 27.5rem}
  .sub02 .sec_01 .active-bx li.bx .t-bx{font-size: 1.8rem;line-height: 26px;}
  .sub02 .small-tit{font-size: 2.2rem;line-height: 28px;}
  .sub02 .sec_01 .cont02 .plus-bx img.ico_plus{width: 3rem}

  .sub02 .sec_02{height: 40rem;}
  .sub02 .sec_02 .mid-deco{font-size: 4rem;line-height: 39px;margin-top: 1.5rem}

  .sub02 .sec_03 .small-tit-wr{padding-bottom: 3rem}

  .flex-wr ul.flex-bx > li.fx-txtBx{margin-top: 2rem}
  .flex-wr ul.flex-bx > li.fx-txtBx strong{font-size: 2.2rem;line-height: 30px;}
  .flex-wr ul.flex-bx > li.fx-txtBx p{font-size: 1.8rem;line-height: 28px;}
  .flex-wr ul.flex-bx .more-btn{padding: 1rem 2rem;height: 4.5rem}
  .flex-wr ul.flex-bx > li.fx-txtBx .more-btn{margin-top: 1.5rem;font-size: 1.3rem}
}

@media all and (max-width:640px) {
  .sub02 .small-tit{font-size: 2rem;line-height: 28px;}
  .sub02 .sec_01 .cont01{padding-bottom: 7.5rem}
  .sub02 .sec_01 .cont02{padding: 7.5rem 0 10rem}
  .sub02 .sec_01 .cont02 .icon-wr strong{margin-top: 1rem}
  .sub02 .sec_01 .cont02 .icon-wr1{grid-template-columns: repeat(2,1fr);margin-left: -1.8rem}
  .sub02 .sec_01 .cont02 .icon-wr1 .circle:nth-child(3),
  .sub02 .sec_01 .cont02 .icon-wr1 .circle:nth-child(4){margin-top: -1.8rem}
  .sub02 .sec_01 .cont02 .icon-wr2{display: grid;grid-template-columns: repeat(2,1fr)}
  .sub02 .sec_01 .cont02 .icon-wr2 li{margin-right: 0}
  .sub02 .sec_01 .cont02 .icon-wr2 li:nth-child(1){grid-column: 2 / span 2;margin-left: -8rem}
  .sub02 .sec_01 .cont02 .icon-wr2 li:nth-child(2), .sub02 .sec_01 .cont02 .icon-wr2 li:nth-child(3){margin-top: -1.8rem}
  .sub02 .sec_01 .cont02 .icon-wr2 li:nth-child(2){margin-right: -.9rem}
  .sub02 .sec_01 .cont02 .icon-wr2 li:nth-child(3){margin-left: -.9rem}
  .sub02 .sec_01 .cont02 .icon-wr2 .circle{margin-bottom: -1.8rem}
  .sub02 .sec_01 .active-bx{flex-direction: column;}
  .sub02 .sec_01 .active-bx li.bx{width: 100%}
  .sub02 .sec_01 .active-bx li.bx_1{border-radius: 20px 20px 0 0}
  .sub02 .sec_01 .active-bx li.bx_2{border-radius: 0 0 20px 20px}

  .sub02 .small-txt{font-size: 1.6rem;line-height: 26px;}
  .sub02 .small-txt br.br_mo{display: inline-block;}
  .sub02 .small-txt br.br_pc{display: none;}

  .sub02 .sec_01 .cont03{padding: 6rem 0 0}
  .sub02 .sec_03 .small-txt{font-size: 1.6rem;line-height: 21px;margin-top: 1rem;}

  .flex-wr ul.flex-bx > li.fx-txtBx strong{font-size: 2rem;line-height: 28px;}
  .flex-wr ul.flex-bx > li.fx-txtBx p{font-size: 1.6rem;line-height: 26px;margin-top: 1rem}
  .flex-wr ul.flex-bx .more-btn{font-size: 1.5rem}
  .flex-wr ul.flex-bx > li.fx-imgBx{height: 27rem;}
  .flex-wr ul.flex-bx:not(:first-child){padding-top: 6rem}

  .sub02 .sec_01 .cont02 .iconBx .icon{width: 5rem}
  .sub02 .sec_01 .cont02 .circle{width: 16rem;height: 16rem;}

   #pd_04 > li.fx-txtBx p br{display: none}
}
@media all and (max-width:480px) {
  .sub02 .sec_01 .cont01 .imgBx .pd-img.mo-img{display: block;;}
  .sub02 .sec_01 .cont01 .imgBx .pd-img.pc-img{display: none;}
}




/*  */
.flex-wr ul.flex-bx > li.fx-imgBx{position: relative;}
.flex-wr ul.flex-bx > li.fx-imgBx::after{
  position:absolute;
  content: '';
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: .7s;
}
.flex-wr ul.flex-bx:nth-child(2n) > li.fx-imgBx::after{right: 0;left: inherit;}
.flex-wr ul.flex-bx > li.fx-imgBx.effect::after{width: 0;}

/* .flex-wr ul.flex-bx > li.fx-imgBx:hover::after{
  width: 0;
} */

@media all and (min-width:494px) and (max-width:960px) {
  .flex-wr #pd_05 > li.fx-imgBx img.fx-img{object-fit: contain;}
}