@charset 'UTF-8';


/***----通用---***/

/*p*/
#long-image p{
  font-size: 1.6rem;
  font-weight: 500;
}

.font-w400{
  font-weight:400!important;
}

/*寬*/
.w-1000{
  max-width: 1000px;
  margin: 0 auto;
}
.w-900{
  max-width: 900px;
  margin: 0 auto;
}
.w-600{
  max-width: 600px;
  margin: 0 auto;
}

/*顏色*/
.color-b{
  color: #0e376b!important;
}
.color-brown{
  color: #A08076!important;
}

.backG-G{
  background-color: #F4F2F1;
  border-radius: 50%;
}
.backG-Gro{
  background-color: #DED2CE;
  border-radius: 10px;
}



/*區塊*/
.ptia{
  margin-top: -90px;
  position: relative;
}
.borderSay{
  font-size: 4rem;
  color: #4E3D39;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -16px;
}


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

  /*flex-wrap*/
  .phone-flex-wrap{
    flex-wrap: wrap;
    justify-content: space-around;
  }

  /*寬*/
  #long-image .phone-w100{
    width: 100%!important;
  }

  /*center*/
  .phone-center{
    text-align: center;
  }
  
  .phone-j-center{
    justify-content: center;
  }


  /*margin*/
  #long-image .phone-m-0{
    margin: 0!important;
  }

  .phone-m-0a{
    margin: 0 auto!important;
  }

  #long-image .phone-mb-0{
    margin-bottom: 0!important;
  }

  /*區塊*/
  .ptia{
    margin-top:-24px;
  }
  .borderSay{
    font-size: 1.6rem;
    color: #4E3D39;
    top: -39px;
  }

}

/***New米黃按鈕&底下p***/
.new-yellow img{
  width: 100px;
  height: 100px;
  z-index: 2;
}
.new-yellow .button{
  border: #eae2cb 1px solid;
  border-radius: 10px;
  padding: 6px;
  margin-left: -38px;
}

.new-yellow h2{
  background: #eae2cb;
  border-radius: 10px;
  padding: 14px 10px 14px 50px;
  line-height: 1;
  margin: 0;
  font-size: 5rem!important;
}

.new-yellow p{
  font-size: 2.2rem!important;
  padding-top: 1em;
}

@media screen and (max-width:768px) { 
  .new-yellow img{
    width: 70px;
    height: 70px;
  }
  .new-yellow h2{
    font-size: 2.4rem!important;
  }

  .new-yellow p{
    font-size: 1.6rem!important;
    padding-top: 0em;
  }
}

/***第一段圓圈黃**/
#yellow-circle img{
  width:160px;
  height:160px;
  margin-bottom: -130px;
}
@media screen and (max-width:768px) {
  #yellow-circle img{
    width:120px;
    height:120px;
    margin-bottom: -96px;
  }
  #yellow-circle h3{
    font-size: 2rem;
  }
}

/***第一段 1-3**/
#img-one-three span{
  color: #A18977;
}
#img-one-three{
  position: relative;
}
#img-one-three h3{
  position: absolute;
}
#img-one-three h3.one{
  top: 54.4%;
  left: 0;
}
#img-one-three h3.one img{
  max-width: 31px;
}
#img-one-three h3.two{
  bottom: 15%;
  left: 0;
}
#img-one-three h3.three{
  top: 37%;
  right: 90px;
}
@media screen and (max-width:912px) {
  #img-one-three h3{
    font-size: 14px;
  }
  #img-one-three h3.one{
    left: 0;
  }
  #img-one-three h3.one img{
    max-width: 24px;
  }
  #img-one-three h3.two{
    left: 0;
  }
  #img-one-three h3.three{
    right: 0px;
  }
}
@media screen and (max-width:576px) {
  #img-one-three h3.one{
    top: 26%;
  }
  #img-one-three h3.two{
    bottom: 2%;
  }
  #img-one-three h3.three{
    top: 34%;
  }
}

/***第一段 1-4**/
.specialpage h3.fontBlg{
  font-size: 4rem;
}
@media screen and (max-width:768px) {
  .specialpage h3.fontBlg{
    font-size: 3rem;
  }
}

/***第一段 1-5*****/
#one-five-img{
  margin-top: -54rem;
}

#one-five-img .backG-G{
  height: 440px;
  padding: 2rem;
}
#one-five-img .backG-G p{
  padding: 0 4rem;
  font-size: 1.8rem;
}
#one-five-img h3{
  color: #A18176;
}
.onefive-img-1{
  height: 184px;
  width: auto;
}
.onefive-img-2{
  width: 210px;
}
@media screen and (max-width:768px) {
  #one-five-img{
    margin-top: -30rem;
  }
  #one-five-img .backG-G{
    height: 281px;
    padding: 8px;
    max-width: 28%;
    border-radius: 10px;
  }
  #one-five-img .col-md-3{
    max-width: 44%;
  }
  #one-five-img .backG-G p{
    padding: 0;
    font-size: 12px;
  }
  #one-five-img h3{
    font-size: 14px;
  }
  .onefive-img-1{
    height: 66px;
  }
  .onefive-img-2{
    width: 100px;
  }
}

/***第一段 1-6*****/
#one-fix{
  margin-top: 35rem!important;
}
#one-fix-img{
  margin-top: -83rem;
}
#one-fix-img .backG-G{
  height: 440px;
  padding: 2rem;
}
#one-fix-img .backG-G p{
  padding: 0 4rem;
  font-size: 1.8rem;
}
#one-fix-img h3{
  color: #A18176;
}
#one-fix-img .onefive-img-1{
  max-width: 278px;
}
#one-fix-img .onefive-img-2{
  height: 225px;
  width: auto;
}
#one-fix-img .div-1{
  height: 390px;
  margin-bottom: -95px;
}
#one-fix-img .div-2{
  margin-top: 160px;
  text-align: left;
}
#one-fix-img .div-2 p{
  padding: 0;
}
@media screen and (max-width:768px) {
  #one-fix{
    margin-top: 0!important;
  }
  #one-fix-img{
    margin-top: 0;
  }
  #one-fix-img .phone-none{
    display: none;
  }
  #one-fix .backG-G{
    flex-basis: auto;
    height: 300px;
    max-width: 300px;
    margin: 4px auto;
  }
  #one-fix h3{
    font-size: 18px;
  }
  #one-fix p{
    font-size: 14px!important;
  }
  #one-fix-img .onefive-img-2{
    height: 160px;
  }
}

/**第二段step**/
.step{
  width: 120px;
}
@media screen and (max-width:768px) {
  .step{
    width: 70px;
  }
}

/**第二段-圖**/
#img-1-4-1left{
  width: 400px;
}
@media screen and (max-width:768px) {
  #img-1-4-1left{
    width: 200px;
  }
}

/*******第二大段-棕********/
.brownANDsay h2{
  font-size: 5rem!important;
  letter-spacing: 0;
}
.brownANDsay h3{
  font-size: 3rem!important;
}
.brownANDsay p{
  font-size: 2.2rem!important;
}

.brownANDsay .button{
  border-radius: 10px;
    background-color: #A08076;
    line-height: 1.8;
    color: #FFF;
    margin: 14px;
}/** optia02 & optia03 **/

.brownANDsay img.baby{
  width: 300px;
}

.color-brown span br{
  display: none;
}

.borderSay-R{
  background-image: url(../img/long/say-right.png);
  right: 0;
  padding: 8px 8px 14px 30px;
}
.borderSay-L{
  background-image: url(../img/long/say-left.png);
  left: 0;
  padding: 8px 30px 14px 8px;
}

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

  .brownANDsay h2{
    font-size: 2.4rem!important;
  }
  .brownANDsay h3{
    font-size: 1.6rem!important;
  }
  .brownANDsay p{
    font-size: 1.6rem!important;
  }

  .brownANDsay img.baby{
    width: 180px;
  }
  .color-brown span br{
    display: block;
  }

  .borderSay-R{
    padding: 6px 9px 12px 21px;
  }
  .borderSay-L{
    padding: 6px 21px 12px 9px;
  }
  
}

/***2-3*****/
.brownANDsay .image2to3 .button{
  padding-right: 135px;
  padding-left: 18px;
  margin: 0;
}

.image2to3 .position-absolute{
  bottom: -35px;
  right: -10px;
}

/****EasyWash***/
#EasyWash{
  border-bottom: #fff solid;
  max-width: 540px;
  margin-right: 20px;
}
@media screen and (max-width:768px) { 
  #EasyWash,#EasyWash1{
    max-width: 100%;
    margin-left: 20px;
  }
}

/*******2-4twoFour*****/
#twoFour .twoFour-image{
  max-width: 93px;
}
#twoFour .DED2CE{
  background-color: #DED2CE;
  border-radius: 10px;
  margin-top: -5px;
  padding: 2rem 2rem 1rem;
}
#twoFour .borfff{
  height: 4px;
  width: 100%;
  background-color: #fff;
  margin: 1rem auto;
}
#twoFour h4{
  font-size: 2em;
}
@media screen and (min-width:768px) { 

  #twoFour{
    margin-top: -30rem;
    margin-bottom: 4rem;
  }
  #twoFour .twoFourOne{
    margin-top: 10rem;
  }
  #twoFour .twoFourTwo{
    margin-top: -10rem;
  }

}
@media screen and (max-width:768px) { 
  #twoFour{
    flex-direction: column-reverse;
    margin-top: 1rem;
    margin-bottom: 3rem;
  }
  #twoFour .DED2CE{
    margin-bottom: 1rem;
  }
}

/*****3-2 lockFree*****/
.lockFree{
  max-width: 900px;
  margin: auto!important;
}
.lockFree span{
  background: #3a3a3a;
  color: #fff;
  border-radius: 35px;
  font-size: 3rem;
  padding: 8px 15px;
  position: relative;
}
.lockFree img{
  margin-top: -15px;
  max-width: 359px;
}
@media screen and (max-width:768px) { 
  .lockFree span{
    font-size: 1rem;
  }
  .lockFree img{
    margin-top: -2px;
  }
  .lockFree .mx-5{
    margin-left: 1rem!important;
    margin-right: 1rem!important;
  }
}

/*******3-3 thrThree******/
#thrThree{
  margin-top: 7rem;
}
#thrThree .thrThreeBG{
  background-color: #E5DEDA;
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
  padding: 3rem;
  margin: 2rem;
}
#thrThree .greyBG{
  background-color: #9F9F9F;
  border-radius: 40px;
  padding: 7px 0;
  max-width: 240px;
  color: #fff;
  margin: 0rem auto 2rem;
}
#thrThree .thrThreeOne-img{
  margin-top: -7rem;
}
#thrThree .red{
  color: #D11525;
}
#thrThree .grey{
  color: #9F9F9F;
}
#thrThree .thrThreeLine{
  margin: 2rem 0;
}
#thrThree h4{
  text-align: left;
  width: auto;
  position: absolute;
  bottom: 60px;
  right: 116px;
}
@media screen and (max-width:768px) { 

  #thrThree h3{
    font-size: 15px;
  }
  #thrThree h4{
    bottom: 0;
    right: 0;
    font-size: 12px;
  }
  #thrThree .thrThreeOne-img{
    margin-top: -4rem;
  }
  #thrThree .thrThreeBG{
    margin: 1rem;
    padding: 1rem;
  }

}


/***#two-way 雙向推行 3-4 *****/
#two-way{
  position: relative;
}
#two-way div{
  position: absolute;
}
#two-way div.one{
  top: 26%;
  left: 74px;
}
#two-way div.two{
  top: 20%;
  right: 74px;
}
#two-way span{
  font-size: 2rem;
  color: #A38374;
}
#two-way h4{
  background: #A38374;
  color: #fff;
  padding: 6px;
  border-radius: 10px;
}
@media screen and (max-width:768px) { 
  #two-way span{
    font-size: 12px;
  }
  #two-way h4{
    font-size: 14px;
  }
  #two-way div.one{
    left: 0;
  }
  #two-way div.two{
    right:0;
  }
}


/******schematic 示意圖*****/
p.schematic{
  font-size: 14px!important;
  text-align: right;
}


/****第四段 sevenRem ****/
.sevenRem img{
  width: 246px;
  max-height: 117px;
}
@media screen and (min-width:769px) { 
  .sevenRem h2{
    font-size: 7rem!important;
  }
}
@media screen and (max-width:768px) { 
  .sevenRem img{
    width: 100px;
  }
}

/***第四段 fourTwo**/
.borwn-div{
  width: 105px;
  height: 15px;
  background-color: #a38173;
  border-radius: 30px;
  margin-top: 18px;
  padding-left: 70px;
}

#fourTwo-1 section{
  background-repeat: no-repeat;
  height: 610px;
  flex-direction: column;
  padding-left: 6rem;
}

#fourTwo-1 section.one{
  background-image: url(../img/long/4-2-1.png);
}
#fourTwo-1 section.two{
  background-image: url(../img/long/4-2-2.png);
}
#fourTwo-1 section.three{
  background-image: url(../img/long/4-2-3.png);
}
#fourTwo-1 section.four{
  background-image: url(../img/long/4-2-4.png);
}
#fourTwo-1 section.five{
  background-image: url(../img/long/4-2-5.png);
}
#fourTwo-1 section.fix{
  background-image: url(../img/long/4-2-6.png);
}

#fourTwo-1 section h3{
  font-size: 4rem;
}

#fourTwo-1 section h3:nth-child(2){
  font-weight: 500;
}

@media screen and (max-width:768px) { 
  #fourTwo-1 section{
    height: 210px;
    background-size: contain;
    padding-left: 2rem;
  }
  #fourTwo-1 section h3{
    font-size: 1.2rem;
  }
  .borwn-div{
    width: 55px;
    height: 10px;
    margin-top: 8px;
    padding-left: 4rem;
  }
}

/******第四段 #fourThree *******/
#fourThree img.fourThreeOne{
  max-width: 254px;
}

#fourThree h3{
  font-weight: 500;
}

#fourThree h3.oneTitle{
  background: #485463;
  color: #fff;
  padding: 10px 0;
}
@media screen and (max-width:768px) { 

  #fourThree img.fourThreeOne{
    max-width: 160px;
  }

  #fourThree h3.oneTitle{
    margin-bottom: 10px!important;
    margin-top: 10px;
  }
  #fourThree h3:not(.oneTitle){
    font-size: 1.4rem;
    margin-top: 7px!important;
  }
}


/****影片****/
@media screen and (max-width:768px) { 
  #long-yt.sp-product-info > iframe{
    width: 100%;
  }
}