* {
  margin: 0;
  padding: 0;
  font-style: none;
}



body,
html {
  font-family: sans-serif;




}


.allcontainer {
  overflow: hidden;
}





::selection {
  background: #2eb6a4;
  color: white;
}


.img-box-1 {
  width: 160px;
  line-height: 70px;
}

.img-box-1 img {
  width: 100%;
  padding: 5px;
}

/* <!-- ＝＝＝＝＝＝＝＝＝＝＝＝＝手機版菜單 --> */

.header-ph {
  display: none;
}


#cloud {
  position: fixed;
  top: 0;
  left: 0px;
  z-index: -1;
  opacity: 0;
  height: 100%;
}


.small {
  display: none;
}

.side-menu {
  display: block;
  z-index: 100;
  width: 100%;

}




.header-ph {
  position: fixed;

  width: 100%;
  z-index: 110;
  box-shadow: 0px 0px 13px #aaaaaaba;
  height: 70px;
  top: 0;
  background-color: white;




}


.header-ph li a:hover {
  text-decoration: none;
  color: #139884;
}



.menu-control {
  position: absolute;
  width: 50px;
  height: 50px;
  border: solid 2px #2eb6a4;
  top: 10px;
  border-radius: 9px;
  right: 10px;

}


.menu-control span {
  display: block;
  height: 3px;
  background-color: #2eb6a4;
  margin: 9px;
  transform-origin: 3px;

  transition: .3s;


}

.menu-control2 {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}



.side-menu {
  box-sizing: border-box;
  background: #d1e9e7;
  transition: all .3s;
  overflow: auto;
  position: fixed;
  width: 60%;
  top: 70px;
  height: 100vh;
  z-index: 95;
  transform: translateX(-100%);

}



#cloud:checked~.side-menu {
  transform: translateX(0%);
}

#cloud:checked~.menu-control2 {
  display: block;
}





.side-menu li {
  list-style: none;
  padding: 11px 0;

  border-bottom: 1px dashed #c5c4c4ba;
  color: #515457;

}




.side-menu li a {
  text-decoration: none;
  color: #5c5c5cb8;
  font-size: 19px;
  padding: 11px 5px 10px 20px;
  font-weight: 500
}

.side-menu-active {
  color: #2eb3a2 !important;
}

.side-menu li a:hover {
  color: #2eb6a4
}

/* ------ */

.line1_rotate {
  width: 40px;

  transform: translate(0px, 0) rotate(45deg);
}

.line2_hide {
  opacity: 0;
}

.line3_rotate {
  width: 40px;

  transform: translate(0px, 0) rotate(-45deg);
}

.menu li {
  display: block;

}

/* ========= */

#ICON {
  position: absolute;
  right: 40px;
  top: 200px;
  width: 80px;
  height: 80px;
  z-index: 100;

}

#ICON:hover {
  transform: scale(1.1);
}





#ICON img {
  width: 100%;
  box-shadow: 2px 2px 4px #aaa;
  border-radius: 50%;
  background-color: white;
}


#ICON-1 {
  position: fixed;
  width: 80px;
  height: 80px;
  bottom: 25px;
  right: 20px;
  z-index: 99;
  text-align: center;
  display: none;

}

#ICON-1 img {
  width: 100%;
  box-shadow: 2px 2px 4px #aaa;
  border-radius: 50%;
  background-color: white;
}




.header-bar {
  height: 90px;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px 25px;
  position: fixed;
  z-index: 110;
  top: 0;
  align-content: center;
  align-items: center;
  box-shadow: 0px 0px 13px #aaaaaaba;
}

.header-bigimg {
  width: 35%;
}

.header-img img {
  width: 100%;
}

.header-word {
  width: 75%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding: 0 20px;

}

.header-bar-active {
  color: white !important;
  border: solid 1px #2eb3a4 !important;
  background-color: #2eb3a4 !important;
}

.header-word a {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 19px;
  text-decoration: none;
  color: #2eb3a4;
  position: relative;
  padding: 15px;
  border: solid 1px #2eb3a4;
  margin: 0 8px;
  border-radius: 30px;
  letter-spacing: 1px;
  transition: .3s;
  width: 180px;
  font-weight: bold;
}





.header-word a:hover {
  color: white;
  border: solid 1px #2eb3a4;
  background-color: #2eb3a4;

  text-decoration: none;

}

.header-word a:hover::after {
  color: white;
  text-decoration: none;
  width: 100%;
  left: 0%;
}

.header-bar-ph {
  display: none;
}


/* ---------add-------- */



.benefitword p {
  font-size: 20px;
  color: #515457;
  text-align: center;
  margin-bottom: 3px;
  letter-spacing: 2px;
}


.benefitword p {
  font-size: 20px;
  color: #515457;
}

.benefitword span {
  color: #ed4b80;
}

.installmentbox {
  display: flex;
  margin-bottom: 30px;
}

.installmentboxword {
  border-right: solid 1px #b1aeae;
  padding: 10px 25px;


}

.installmentboxwordnone {
  border-right: none !important;
}



.installmentboxword h1 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #2eb3a4;
  text-align: center;
  font-weight: 700;
  transition: .5s;
  margin-top: 5px;

}

.installmentboxword p {
  font-size: 19px;
  margin: 0;
  color: #515457;
  transition: .5s;
  text-align: justify;
  margin-bottom: 5px;
}



.arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 20px 0;
}

.arrowimg {
  width: 50px;
}


.arrowimg img {
  width: 100%;
}


.bigbgwordsvg svg {
  width: 50px;
  height: 50px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.bigbgwordsvg {
  border-radius: 7px;
  border: solid 1.5px #2eb3a4;
  transition: .3s;
  margin: 12px 0 12px 12px;
  cursor: pointer;
}


.bigbgwordsvg:hover {
  border: solid 1.5px #2eb3a4;
  color: #2eb3a4;
  background-color: #2eb3a4;
}

.st0 {
  fill: #2eb3a4;
}

.bigbgwordsvg:hover .st0 {
  fill: white;
}

.installmentboximg img {
  width: 100%;
}

.installmentboximg {
  width: 30%;
  margin: 10px;
}

.installmentboximg img {
  width: 100%;
}


.installmentboxone-1 {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 14px;


}

.installmentboxone {
  width: 33%;

}

.dot {
  display: flex;
}

.modal rect {
  width: 400px;
  height: 400px;
}



/* --------------firstpart */
.inline {
  margin: 0 auto;
  text-align: center;
}


.firstpartlogo img {
  width: 100%;
}

.firstpartlogo {
  width: 100%;
}

.firstpartbigbg {

  background-image: url(../img/background-color.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-top: 130px;
  overflow: hidden;
}

.firstpartbiglogo {
  margin-top: 90px;
}



.firstpartbg {

  width: 100%;


}

.firstimg {
  margin-bottom: 5px;
}



.firstpartbgimg {
  width: 54px;
  margin: 0% auto;
}

.firstimg img {
  width: 100%;
}

.firstword {
  text-align: center;
  color: #626262;
  margin: 0
}


.firstpartbigbgbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.firstpartbigbgimg {
  width: 47%;
}

.bigbgwordimgbox {
  margin-top: 10px;
}

.bigbgwordimgbox h2 {
  font-size: 20px;
  color: #626262;
  margin: 0 0 0 8px;
  font-weight: normal;
  color: #2eb3a4;
}

.bigbgwordimgbox {
  display: flex;
  align-items: center;

}

.flex {
  align-items: center;
  display: flex;
}

.bigbgwordimg {
  width: 120px;
  padding: 7px;
}



.bigbgwordimg img {
  width: 100%;
}


.iosqrcode {
  width: 100%;
}


.iosqrcode img {
  width: 100%;
}

/* -------手機輪播圖 */


.iPhoneX {
  position: relative;

}




.screen {
  position: absolute;
  left: 49%;
  right: 50%;
  transform: translate(-51%, -50%);
  top: 300px;
  width: 260px;
  z-index: 3;


}

.iPhoneX {
  display: block;
  width: 640px;
  height: 640px;
  background: url(../img/iphonex.png);
  transform: scale(0.9);
  background-repeat: no-repeat;
  background-size: 100% 100%;

}


.firstword h3 {
  font-size: 24px;
  position: relative;
  color: #515457;
  display: inline-block;
  letter-spacing: 1px;
  font-weight: bold;

}

.firstword h3::before {
  content: '';
  position: absolute;
  top: 15px;
  right: -135px;
  width: 100px;
  height: 1px;
  background-color: #515457be;
}

.firstword h3::after {
  content: '';
  position: absolute;
  top: 15px;
  left: -135px;
  width: 100px;
  height: 1px;
  background-color: #3f4144be;
}

.firstpartbigbgword p {
  margin: 10px 0 0 0;
  letter-spacing: 2px;
  font-size: 20px;
  color: #8a8d91;
  font-weight: bold;
  text-align: justify;

}

.firstpartbigbgword h3 {
  margin: 0 0 0px 0;
  letter-spacing: 3px;
  font-size: 25px;
  color: #2eb3a4;
  font-weight: bold;
}

.firstpartbigbgword span {

  color: #ed4b80;
  margin-right: 10px;
}

.firstpartbigbgword h1 {
  margin-bottom: 6px;
  letter-spacing: 3px;
  font-size: 40px;
  color: #2eb3a4;
  font-weight: 800;
}


.firstpartbigbgword h2 {
  margin: 0 0 6px 0;
  letter-spacing: 3px;
  font-size: 25px;
  color: #515457;
  font-weight: bold;

}

.firstpartbigbgword {

  margin-bottom: 0;
}


/* =====modal */



html.modal-active,
body.modal-active {
  overflow: hidden;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 999;
}

#modal-container.ios {
  transform: scale(1);
}

#modal-container.ios .modal-background {
  background-color: rgba(0, 0, 0, .5);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios .modal-background .modal {
  background-color: transparent;
  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios .modal-background .modal .iosqrcode,
#modal-container.ios .modal-background .modal p {
  opacity: 0;
  position: relative;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios .modal-background .modal .modal-svg rect {
  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container.ios.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios.out .modal-background .modal {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios.out .modal-background .modal .iosqrcode,
#modal-container.ios.out .modal-background .modal p {
  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.ios.out .modal-background .modal .modal-svg rect {
  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}

#modal-container .modal-background .modal {
  background: white;
  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
  position: relative;
  width: 400px;
  height: 400px;
}

#modal-container .modal-background .modal .iosqrcode {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 15px;
}

#modal-container .modal-background .modal p {
  font-size: 18px;
  line-height: 22px;
}

#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

#modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

/* -------- */

#modal-container-android {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 999;
}

#modal-container-android.android {
  transform: scale(1);
}

#modal-container-android.android .modal-background {
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android .modal-background .modal {
  background-color: transparent;
  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android .modal-background .modal .iosqrcode,
#modal-container-android.android .modal-background .modal p {
  opacity: 0;
  position: relative;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android .modal-background .modal .modal-svg rect {
  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container-android.android.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android.out .modal-background .modal {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android.out .modal-background .modal .iosqrcode,
#modal-container-android.android.out .modal-background .modal p {
  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android.android.out .modal-background .modal .modal-svg rect {
  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container-android .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}

#modal-container-android .modal-background .modal {
  background: white;
  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
  position: relative;
  width: 400px;
  height: 400px;
}

#modal-container-android .modal-background .modal .iosqrcode {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 15px;
}

#modal-container-android .modal-background .modal p {
  font-size: 18px;
  line-height: 22px;
}

#modal-container-android .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

#modal-container-android .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

/* --------- */


.content h1 {
  padding: 75px 0 30px 0;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
}



@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }

  99.9% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes slideUpLarge {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideDownLarge {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(150px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(150px);
  }
}

@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes blowUpModalTwo {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes roadRunnerIn {
  0% {
    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }

  70% {
    transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }

  100% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}

@keyframes roadRunnerOut {
  0% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }

  30% {
    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }

  100% {
    transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}

@keyframes sketchIn {
  0% {
    stroke-dashoffset: 778;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 778;
  }
}

@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }

  100% {
    background-color: white;
  }
}

@keyframes modalFadeOut {
  0% {
    background-color: white;
  }

  100% {
    background-color: transparent;
  }
}

@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }

  100% {
    opacity: 0;
    top: -20px;
  }
}

@keyframes bondJamesBond {
  0% {
    transform: translateX(1000px);
  }

  80% {
    transform: translateX(0px);
    border-radius: 75px;
    height: 75px;
    width: 75px;
  }

  90% {
    border-radius: 3px;
    height: 182px;
    width: 247px;
  }

  100% {
    border-radius: 3px;
    height: 162px;
    width: 227px;
  }
}

@keyframes killShot {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(300px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes slowFade {
  0% {
    opacity: 1;
  }

  99.9% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}




/* -------- */
.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
  border-radius: 0 0 20px 20px;

}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screenimg {
  width: 100%;
}


.screenimg img {
  width: 100%;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: #2eb3a2 !important;
}


/* ----------- */




/* -----second---- */

.firstwordbox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.firstwordboximg {
  width: 50%;
}

.firstwordimg {
  width: 100%;
  margin: 0 auto;
}


.firstwordimg img {
  width: 100%;
}

.firstwordboxword {
  width: 50%;
  padding: 30px;


}

.firstwordboxword h2 {
  font-size: 18px;
  background-color: #ed4b80;
  display: inline-block;
  color: white;
  padding: 4px 10px;
  letter-spacing: 2px;
}

.firstwordboxword h4 {
  font-size: 19px;
  color: #515457;
  font-weight: bold;

}

.firstwordboxword h5 {
  font-size: 17px;
  color: #515457;
  margin-bottom: 10px;
  font-weight: normal;
      text-align: justify;

}

.firstwordboxword span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  border: solid 1px #aaa;
  margin-right: 5px;
}


.firstwordboxword h1 {
  font-size: 32px;
  color: #2eb3a4;
  letter-spacing: 2px;
  font-weight: bold;
  padding-bottom: 3px;
}

.firstwordboxword p {
  font-size: 20px;
  color: #515457;
  border-bottom: solid 1px #aaa;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.second {
  margin-top: 90px;
}



/* -------three------- */




.firstpartbigbgthree {
  background-image: url(../img/background-color.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

.allwordbox {
  width: 45%;
  margin: 0 70px 0 -10px;

}

#pills-tab {
  position: relative;
}

#pills-tab::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 8px;
  width: 1px;
  height: 76%;
  background-color: #515457a4;
}

.all {
  display: flex;
  justify-content: center;
  align-items: center;
}

.allimg {
  width: 35%;
  padding: 10px;
}

.allimg img {
  width: 100%;
  padding: 10px 0;
}

.flex-1 {
  display: flex;
  align-items: center;
}

.allword {
  display: flex;
  flex-direction: column;
  
}

.allword h1 {
  margin: 0;
  font-size: 45px;
  color: #515457;
  margin: 10px 0 8px 0;
}

.allword p {
  margin: 0;
  font-size: 25px;
  color: #515457;
  letter-spacing: 1px;
  margin-top: -9px;
  margin-bottom: 6px;
}


.tabphonebox {
  padding-bottom: 65px;
  position: relative;
}

.tabphonebox .tabphone {
  position: relative;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  top: 300px;
}

.tabphonebox .screentab {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  top: 300px;
}

.tabphonebox .tabphone {

  width: 280px;
  height: 545px;
  background: url(../img/iphone.png);
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 9;
  overflow: hidden;

}


.tabphonebox .screentab {
  width: 244px;
  height: 520px;
  background-color: white;

  border-radius: 30px;


}




.screentabimg {
  width: 100%;
}


.screentabimg img {
  width: 100%;
  border-radius: 30px;
}



.mrr {
  margin-right: 15px;
}

#MAIN ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#MAIN span {

  font-size: 17px;
}

#MAIN li a {

  font-weight: bold;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  color: #515457;
  text-decoration: none;
  letter-spacing: 2px;
  cursor: pointer;
}

#MAIN li a.nowTab {
  position: relative;
  z-index: 2;
  color: #ed4b80;


}

#MAIN .nav-pills .nav-link.active,
#MAIN .nav-pills .show>.nav-link {
  background-color: transparent !important;
  color: #ed4b80 !important;
  z-index: 2;
  position: relative;

}

#MAIN .nav-link {
  display: block;
  padding: 0;
}



#ALL .boxs {

  display: none;
}

#ALL .open {
  display: block;
}



.st106 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 50;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.allword-1 a {
  background: linear-gradient(171deg, #2eb5a3 50%, #27a993 50%);
  padding: 10px 20px;
  width: 75%;
  text-align: center;
  display: block;
  font-size: 27px;
  letter-spacing: 1px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 15px 0;
  transition: .5s;
  cursor: pointer;
}

.allword-1 a:hover {
  background: linear-gradient(171deg, #27a993 50%, #27a993 50%);
  box-shadow: 2px 2px 3px #aaa;
}



.allword-1 a:hover {
  color: white;
  text-decoration: none;
}

.allword-2 p {
  width: 75%;
  text-align: center;
  color: #515457;
  letter-spacing: 2px;
  font-size: 23px;
  font-weight: bold;
}

.allword-1 {
  display: flex;
  align-items: center;
}


.allword-1 svg {
  width: 30px;
  height: 30px;
  stroke-width: 3;
  margin-left: 10px;

}


/* ----four---- */
.fourword {
  margin: 50px 0 0px 0;
  text-align: center;
}

.fourword h1 {
  font-size: 28px;
  color: #515457;
  letter-spacing: 3px;
  font-weight: bold;
}

.fourbigbox {
  display: flex;
  justify-content: center;
}

.fourbox {
  width: 25%;
  padding: 20px;
}

.fourboximg {
  width: 100%;
  padding: 10px 30px;
  position: relative;

}

.fourboximg img {
  width: 100%;

}

.fourboxp p {
  margin: 0;
  font-size: 20px;
  color: #515457;
  text-align: center;
  letter-spacing: 2px;
}


.fourbigboxword {
  text-align: center;
  margin: 35px 0;

}

.fourbigboxword p {
  background-color: #2eb3a2;
  color: white;
  font-size: 22px;
  letter-spacing: 3px;
  display: inline-block;
  border-radius: 50px;
  padding: 10px 15px;
  position: relative;

}

.fourbigboxword p::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 80px;
  width: 35px;
  height: 35px;
  background-image: url(../img/horn.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.fourbigboxspan {
  text-align: center;
  margin: 30px auto;
}

.fourbigboxspan span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(107, 107, 107, 0.67);

  display: block;
  margin: 25px auto;
}

.fourwordhh1 h1 {
  font-size: 35px;
  color: #515457;
  letter-spacing: 8px;
  margin-bottom: 0;
}

.fourwordhh1 {
  text-align: center;
  margin: 60px 0 20px 0;
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex p {
  margin: 0;
  font-size: 23px;
  letter-spacing: 2px;
}


.allimg-1 {
  width: 14%;
  padding: 10px;
}

.allimg-1 img {
  width: 100%;
}

.fourwordbtnbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 65px;
}

.fourwordbtn {
  display: flex;
  align-items: center;
  background-color: black;
  padding: 10px 12px;
  border-radius: 12px;
  width: 188px;
  margin: 0 20px;
  border: solid 1px black;
  transition: .3s;


}

.fourwordbtn:hover {
  background-color: #fff;
  border: solid 1px black;
}

.fourwordbtn:hover p {
  color: black;
}


.fourwordbtn:hover svg {
  fill: black;
}

.fourwordbtnbox a:hover {
  text-decoration: none;
}

.fourwordbtn svg {
  width: 40px;
  height: 40px;
  margin: 0 8px;
  fill: white;
}

.st3 {
  color: white;

}

.fourwordbtnp p {
  margin: 0;
  color: white;
  letter-spacing: 1px;
}


.fourpartbg {
  padding-bottom: 0px;
}

/* ------five */
.fiveparttitle p {
  margin: 0;
  font-size: 30px;
  text-align: center;
  letter-spacing: 2px;
}

.fiveparttitle {
  text-align: center;
  background-color: #2eb6a4;
  color: white;
  padding: 15px;
  position: relative;
  margin-bottom: 100px;
}

.fiveparttitle::after {
  content: '';
  position: absolute;
  border-top: 20px solid #2db6a4;
  border-bottom: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  bottom: -53%;
  left: 50%;
  transform: translate(-50%);
}

.fivepartbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}

.fivepartboxone {
  width: 30%;
  margin: 0 15px;
}

.fivepartbg {
  background-image: url(../img/background-gray.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-bottom: 50px;
  margin-bottom: 30px;

}

.fivepartboximg {
  width: 180px;
  height: 180px;
  margin: -70px auto 0 auto;

}

.fivepartboxone {
  background-color: #fff;
  padding: 25px;
  border-radius: 20px 20px 0 0;
  border-bottom: solid 13px #2eb3a4;
}


.fivepartboximg img {
  width: 100%;
  border-radius: 20px;

}

.fivepartboxname {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: solid 1px #515457;

}

.fivepartboxname p {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #2eb3a4;
  letter-spacing: 2px;
  font-size: 25px;

}

.fivepartboxword p {
  font-size: 19px;
  text-align: justify;
  color: #515457;
}

.fivepartboxword span {
  color: #ed4b80;
}


/* ------ */

.footerpartbg {
  width: 100%;
box-shadow: 0px 0px 13px #aaaaaaba;
  /* background-color: #e5eaed; */
}

.ptbtn{
  width: 28%;
}

.ptbtn p{
letter-spacing: 1px;
font-size: 16px;
color: #515457;
margin-bottom: 3px;
text-align: center;
padding-top: 25px;
font-weight: bold;
}

.ptbtn-img{
    width: 65%;
    margin: 0 auto;
    padding-top: 5px;
}

.ptbtn-img img {
  width: 100%;
      padding-bottom: 12px;

}

.footerword {
  width: 28%;
  padding: 0 50px;
  border-left: 1px solid #51545761;
  letter-spacing: 2px;
  line-height: 2;



}

.footericon a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footericon {
  width: 32%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 50px;
  border-left: 1px solid #51545761;

}

.footericon img {
  width: 100%;
}

.footerbox {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  padding-top: 20px;
}


.footerword h2 {
  color: white;
  font-size: 28px;
  position: relative;
  margin-bottom: 15px;
}



.footerbtn a:hover {
  text-decoration: none;
}

.footerbtn a {
  padding: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  font-size: 17px;

  border-radius: 50px;
  transition: .3s;
  margin: 0 10px;

}

.dot-col {
  display: flex;
  flex-direction: column;
}

.dot-col p {
  margin: 3px;
  line-height: 1;
}

.footerbtn-1 {
  display: flex;

}



.footerbtn img {
  width: 35px;
  height: 35px;
  margin-right: 6px;
}

.footerbtn a:hover {

  color: white;
}



.footerword h2::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #fff;
  width: 55px;
  height: 2px;
}

.footerword p {
  display: inline-block;
  font-size: 15px;
  margin-bottom: 5px;
  color: #515457;
  display: flex;
  white-space: nowrap;

}

.conpyright {
  text-align: center;
  color: #fff;
  background-color: #ed4b80;
  font-size: 13px;
  padding: 5px;
  letter-spacing: 1px;

}

.conpyright a {
  color: white;
  border-bottom: solid 1px white;
  padding-bottom: 3px;
  font-size: 13px;
  margin-left: 10px;
}

.conpyright a:hover {
  color: white;
  text-decoration: none;

}





.ic {
  background-color: #fff;
  width: 33px !important;
  height: 33px !important;
  padding: 5px;
  border-radius: 50%;
  color: #085e9c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ic-1 {
  color: #00d000
}

.one,
.two,
.three h5 {
  color: #626262;



}




.blue-1 {
  font-size: 21px;
}

.firstpartimg-ph {
  display: none;
}


/* ============ */


/* ===================for partner */

.background {
  background-color: #d1e9e7;

}

.contactbox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 90px 0;
}


.contactimg {
  width: 100%;
  padding: 30px;
  margin: 0 auto;
}

.contactimg img {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contactimgbox {
  width: 50%;
}

.contactwordbox {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.midinput label {
  font-size: 17px;
  white-space: nowrap;
  text-align: left;
  padding: 0px 10px;
  margin-bottom: 15px;
  pointer-events: none;
  background-color: #e97094;
  color: white;
  border-radius: 15px;
  font-weight: bold;
}


.midinput select {
  color: #797979;
  width: 100%;
  height: 40px;
  font-weight: bold;
  padding: 0 10px;
  outline: none;
  border-radius: 10px;
  background-color: #fbe9f1;
  border: none;
  font-weight: bold;
}

.midinput select:invalid {
  color: rgba(102, 102, 102, 0.512);

}

.contactword {
  background-color: white;
  padding: 10px 30px;
  border-top: solid 31px #2eb3a2;
  border-radius: 0 0 20px 20px;
  width: 85%;
  box-shadow: 0 0 13px #2eb3a357;
}

.midinput {
  width: 100%;
  margin: 15px auto 5px auto;
}

.midinput input:focus {
  outline: none;
  box-shadow: 0 0 9px 1px #f994b3cc !important;

}

.midinput textarea:focus {
  outline: none;
  box-shadow: 0 0 9px 1px #f994b3cc !important;

}

.midinput select:focus {
  outline: none;
  box-shadow: 0 0 9px 1px #f994b3cc !important;

}


.midinput input {
  color: #797979;
  width: 100%;
  height: 40px;
  font-weight: bold;
  padding: 0 10px;
  outline: none;
  border-radius: 10px;
  background-color: #fbe9f1;
  border: none;
}

.midinput textarea {
  color: #797979;
  width: 100%;
  height: 100px;
  font-size: 19px;
  padding: 0 10px;
  outline: none;
  border-radius: 10px;
  background-color: #fbe9f1;
  border: none;
  font-weight: bold;
}

.divBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 20px;
}


.divBtn button {

  font-weight: bold;
  width: 80%;
  color: white;
  padding: 10px 8px;
  font-size: 19px;
  background: linear-gradient(to top, #2eb6a4 50%, #2eb6a4a1 100%);
  border: none;
  border-radius: 10px;
  letter-spacing: 2px;
  box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);
}


.divBtn button:hover {
  background: linear-gradient(to top, #2eb6a4d2 50%, #2eb6a4d2 100%);
}

.divBtn button:focus {
  outline: none;
}

.midinput ::placeholder {
  color: rgba(102, 102, 102, 0.512);
  font-size: 16px;
}

@media screen and (min-width: 860px) and (max-width: 991px) {
  .firstword h3::before {

    right: -95px !important;
    width: 70px !important;

  }

  .firstword h3::after {
    left: -95px !important;
    width: 70px !important;
  }
}



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

  .colorsmallbox {
    width: 620px;
    height: 220px;
    margin: 13px auto;
  }


}

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


  .lineimg {
    display: flex;
    flex-direction: column;
  }

  .linebtn span {
    display: block;
  }

  .fbbtn a {
    width: 157px;
  }

  .companybtn {
    margin: 10px;
    height: 67px;
    display: flex;
  }

}


@media screen and (min-width: 1024px) {
  .firstpartbigbgword h1 {
    white-space: nowrap;
  }

  .fivepartboxone {
    height: 620px;
  }


  .installmentboxword {

    height: 180px;

  }







}

@media screen and (min-width: 1025px) {
  .fivepartboxword p {
    line-height: 1.7;
  }
}

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


  .allword-2 p {
    width: 100%;
  }

  .allword-1 {
    justify-content: center;
    margin: 10px 0;
  }

  .allword-1 a {
    width: 55%;
  }

  .firstpartbigbgbox {

    flex-direction: column
  }

  .all {
    flex-direction: column;
    padding-top: 30px;
  }

  #MAIN {
    display: flex;
    justify-content: center;
  }


  .allword h1 {
    font-size: 35px;
  }

  #MAIN li a {
    font-size: 17px;
    text-align: center;
    line-height: 45px;
    letter-spacing: 0px;

  }

  .allimg {
    width: 18%;
    margin: 0 10px;
  }

  .mrr {
    margin-right: 5px;
  }


  #MAIN .nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .allword {
    justify-content: center;
   align-items: center;
  }

  .flex-1{
    justify-content: center;
  }

  .allwordbox {
    width: 100%;
    margin: 0;
  }



  .firstpartbigbgimg {
    width: 100%;
  }

  .iPhoneX {
    margin: 0 auto;
  }

  .firstpartbigbgword {
    text-align: center;
  }

  .bigbgwordimgbox {
    justify-content: center;
  }

}


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

  .flex-1 {

    justify-content: center;
  }

  .allword p {
    font-size: 20px;
    margin: -14px auto 16px auto;
    letter-spacing: 0px;

  }

  .installmentboxword p {
    font-size: 17px;
    text-align: center;
  }

  .benefitword p {
    font-size: 19px;
  }

  .contactimg img {
    width: 100%;
  }

  .fivepartbg {
    background-attachment: scroll;
    padding-bottom: 0px;
  }


  .firstpartbigbg {
    background-attachment: scroll;
  }

  .firstpartbigbgthree {
    background-attachment: scroll;
  }

  .fourwordhh1 h1 {
    font-size: 28px;
    letter-spacing: 4px;
  }


  .fourwordbtn {
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    width: 175px;
    margin: 0 10px;
  }

  .fourwordbtnp p {
    letter-spacing: 1px;
  }

  .fourwordbtn svg {
    width: 30px;
    height: 30px;
  }

  .allimg-1 {
    width: 27%;
  }

  .fourbigboxword p {

    font-size: 19px;
    letter-spacing: 0px;

    padding: 10px 11px;

  }

  #pills-tab::before {
    left: 8px;
  }


  .fourword h1 {
    font-size: 23px;
    letter-spacing: 0;
    margin-top: 50px;
  }


  .fourboxp p {

    letter-spacing: 0px;
  }

  .fourbigbox {


    flex-wrap: wrap;
  }

  .fourbox {
    width: 50%;
    padding: 0px;
  }

  .fourboximg {
    width: 100%;
    padding: 20px;

  }




  .benefitword p {
    text-align: center;

  }

  .allimg {
    width: 35%;
    margin: 0 0px;
  }


  .allword-1 a {

    width: 80%;
  }

  .allword-2 p {
    width: 100%;
  }



  .dot-col {
    display: flex;
    flex-direction: column;
  }

  .dot-col p {
    margin: 3px;
    line-height: 1;
  }


  .second {
    margin-top: 30px;
  }


  .firstword {
    margin: 30px 0 30px 0;
  }

  .firstwordboxword {
    width: 100%;
    padding: 0;
    margin-top: 30px;
  }

  .firstwordbox {
    padding: 20px;
  }


  .firstwordboximg {
    width: 100%;
    margin: 0 auto
  }

  .firstwordbox {
    flex-direction: column;
  }

  .firstwordboxre {
    flex-direction: column-reverse !important
  }


  .footerbtn {
    flex-direction: column;
  }

  .iPhoneX {
    width: 480px;
    height: 480px;
  }

  .screen {

    top: 220px;
  }

  .screen {
    width: 197px;
  }

  .firstpartbigbgword h1 {
    letter-spacing: 2px;
    font-size: 36px;
  }

  .firstpartbigbgword p {
    letter-spacing: 3px;
    font-size: 22px;
  }



}

@media screen and (min-width: 1100px) and (max-width: 1199px) {


  .firstpartbigbgword {
    margin-right: 5%;
  }
}





@media screen and (min-width: 1025px) and (max-width: 1199px) {

  .iPhoneX {

    transform: scale(0.75);
    margin: 0 auto;

  }

  .firstpartbigbgimg {
    width: 50%;
  }

  .firstpartbigbgword {
    width: 40%;
  }

  .firstpartbigbgword h1 {

    font-size: 37px;
  }

}

@media screen and (min-width: 500px) {
  .inline p {
    display: inline;
    text-align: center;
  }

}

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



  .firstpartbigbg {
    padding-top: 110px;
  }

  .firstpartbigbgword span {
    margin-bottom: 9px;
  }

  .firstpartbigbgword h2 {
    letter-spacing: 1px;
  }

  .iPhoneX {
    display: block;
    width: 380px;
    height: 380px;
    transform: scale(1.3);
    margin-top: 85px;
    margin-bottom: 50px;

  }


  .firstpartbigbgimg {
    width: 100%;
  }

  .screen {
    width: 155px;
    top: 170px;
  }


  .firstpartbigbgword h1 {
    margin-bottom: 10px;
    font-size: 30px;
  }

  .firstpartbigbgword p {
    font-size: 20px;
  }

  .flexbox {
    display: flex;
    flex-direction: column;
  }

  .flex {
    margin-top: 10px;
    align-items: center;
    display: flex;
  }



  .bigbgwordsvg {

    margin: 12px 12px 12px 12px;
  }

  .bigbgwordimgbox h2 {
    font-size: 24px;
  }

  .firstpartbigbg {
    overflow: hidden;
  }

  .modal rect {
    width: 360px;
    height: 360px;
  }

  #modal-container-android .modal-background .modal {
    width: 360px;
    height: 360px;

  }

  #modal-container .modal-background .modal {
    width: 360px;
    height: 360px;
  }

}

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

  #modal-container .modal-background .modal {
    width: 320px;
    height: 320px;
  }


  #modal-container-android .modal-background .modal {
    width: 320px;
    height: 320px;
  }


  .iPhoneX {
    width: 340px !important;
    height: 340px !important;
  }

}

@media screen and (max-width: 390px) {
  .iPhoneX {
    display: block;
    width: 360px;
    height: 360px;

  }


  .fourwordbtn {

    margin: 0 5px;
  }


  .footerword p {
    font-size: 15px !important;

  }


  .firstpartbigbgimg {
    width: 100%;
  }

  .swiper {

    border-radius: 0px;
  }

  .screen {
    width: 128px;
    top: 150px;
  }





}


@media screen and (max-width: 878px) {
  .faqsbox-pc {
    display: flex;
    padding-bottom: 60px;
  }

}

@media screen and (max-width: 600px) {
  .bg3 {

    background-size: contain;

  }

}



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





  .pillbox {

    border-radius: 14px;
  }


  .pillbox-arrow {
    display: none;
  }

  .pill-container {
    margin-top: 30px;
  }

  .footerbtn-1 {
    display: flex;
  }

  .linebtn a {
    letter-spacing: 2px;
    width: 157px;

  }


  .conpyright a {
    display: inline-block;
  }




  .companybtn {
    margin: 10px;
  }

  .footericon img {
    width: 100%;
  }

   .footericon  {
     width: 100%;
  
   }


  .ptbtn-img {
    width: 75%;
  }

  .ptbtn {
    width: 100%;
   border-bottom: 1px solid #51545761;
  }





  .firstword h3::before {
    width: 90px;
    top: 21px;
    right: -117px;
  }

  .firstword h3::after {
    width: 90px;
    top: 21px;
    left: -117px;
  }

  .firstword h3 {
    font-size: 35px;
  }

  /* .installmentboxword h1 {
      font-size: 17px;}

      .installmentboxword p {
        font-size: 16px;} */

  .installmentboxword {
    border-right: none;

  }

  .teamintroductionboximg {
    margin-bottom: 20px;
    padding: 30px;
  }

  .teamintroductionbox {
    width: 100%;
    padding: 20px;
    margin-bottom: 120px;
  }

  .teamintroductionboximg img {
    width: 100%;
  }

  .aboutabox-1 {
    width: 100%;
    margin: 20px auto;
  }

  .aboutabox {
    width: 100%;
    margin: 20px auto;
  }

  .aboutuabigbox {
    flex-direction: column;
    margin: 10px 0 110px 0;
  }

  .installmentboxone-1 {
    min-height: 250px;

  }

  .firstword h2 {
    font-size: 23px;
  }

  .installmenth1 h1 {
    font-size: 23px;
  }

  .installmentbox {

    flex-direction: column;
  }

  .installmentboxone {
    width: 100%;
    margin: 13px 0;
  }


  .contactimg {
    width: 100%;
  }


  .contactword {
    width: 95%;
  }

  .contactimgbox {
    width: 100%;
  }

  .contactwordbox {
    width: 100%;
    margin: 30px 0 60px 0;
  }

  .mr {
    margin-right: 2px;
    margin-left: 2px;
  }



  .firstwordh1 h2 {
    font-size: 20px;
  }

  .contactbox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 20px 0;
  }

  .margin-1 {
    margin-top: 0px;
  }

  .toggleBox {

    padding: 45px 20px 20px 20px;
    margin: -30px auto 0 auto;

  }

  .bgc-1 {

    padding-bottom: 30px;
  }


  .swiprthcpimg {
    width: 95%;
    padding: 6px;

  }

  .fourpartbg {
    background-attachment: scroll;
  }



  .toggleBtn {

    margin: 15px 15px 0 15px;
  }


  .faqsbox-pc {
    display: none;
  }

  .faqsbox-ph {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding-bottom: 50px;
    margin-top: 20px;
  }

  .firstpart {
    margin-top: 70px;
  }

  .firstword h4 {
    font-size: 22px;
  }

  /* .firstwordh1 p{
    text-align: justify;
  }

  .firstwordh1{
    margin-top: 16px;
  }

  .firstwordlogo {
    width: 100px;
    height: 50px;
    margin-bottom: 20px;
}

  .firstwordbox{
    display: flex;
    width: 100%;
  }

  .firstwordh1 h1 {
    font-size: 20px;}

  .firststep::before{
    display: none;
  }

  .firstwordimg {
    width: 100%;
    position: relative;
    margin-bottom: 28px;
    z-index: 1;
}
  .firststep {
    padding: 0px 0;
    flex-direction: column-reverse;
} */



  .csae-list {
    width: 95%;
    padding: 20px 20px 20px 20px;
    margin: 35px auto 15px auto;
  }

  .secondpartbg {
    background-attachment: scroll;
  }



  .csae-listwordimg {
    padding: 0px;
  }

  .header-bar {
    display: none;
  }

  .img-box-1 {
    width: 66%;
    line-height: 0px;
  }

  .firstpartbiglogo {
    margin-top: 70px;
  }

  .firstpartimg-ph {
    display: block;
  }

  .firstpartimg {
    display: none;
  }



  .color h4 {

    line-height: 33px;

    font-size: 18px;
  }

  .oneword {
    height: 525px;
  }

  .twoword {
    height: 466px;
  }

  .threeword {
    height: 510px;
  }

  .footerword p {
    font-size: 18px;
    white-space: nowrap;
  }

  .footerword h2 {

    font-size: 25px;
  }

  .footerword h2::after {

    width: 45px;
  }

  .one h4 {

    font-size: 23px;
  }

  .two h4 {

    font-size: 23px;
  }

  .three h4 {

    font-size: 23px;
  }

  .one h5 {

    font-size: 18px;
  }

  .two h5 {

    font-size: 18px;
  }

  .three h5 {

    font-size: 18px;
  }



  .blue {
    font-size: 21px !important;
  }










  .member {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 87%;
    margin: 0 auto;
  }

  .one {
    width: 100%;

  }

  .two {
    width: 100%;
  }

  .three {
    width: 100%;
  }

  .one,
  .two,
  .three {
    margin-top: 40px;


  }

  .color {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  .colorboxfour {
    flex-direction: column;
    width: 100%;
  }

  .colorbox {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .color-img {
    width: 100%;
  }


  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: 0px;
  }



  .swiper-slide::after {


    height: 110px;
  }


  .sbox {
    flex-direction: column;
  }

  .sword {
    width: 100%;
  }

  .simg {
    width: 60%;
    margin: 0 auto;
    padding: 0;
  }

  .sword h2 {

    font-size: 23px;
  }

  .swiper-container {
    width: 87%;
  }

  .ptbtn p {
    font-size: 18px;}



  .header-ph {
    display: flex;
    align-items: center;
  }

  .footericon {
    width: 100%;
    padding: 0px;
        border-left:none;
  }

.ptbtn p{
  padding-top: 16px;
}

  .footerword {
    width: 100%;
    border-left: none;
    padding: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
        margin-top: -20px;
margin-bottom: 10px;

  }

  .footericon a {
    text-align: center;
  }

  .footerbox {
    flex-direction: column;
    width: 90%;

  }

  #ICON-1 {
    display: block;
  }



}

@media screen and (min-width: 768px) {
  .swiper-container {

    height: 400px;
  }

}



@media screen and (min-width: 768px) and (max-width: 859px) {
  .footericon {
    width: 100%;
  }

.footericon img {
  width: 60%;
}


  .ptbtn {
    width: 100%;}

    .ptbtn-img {
      width: 60%;
    }

    .dot-col {
      display: flex;
      flex-direction: row;
    }

    .footerword {
      width: 60%;
      padding: 15px 0;
    }

}

@media screen and (min-width: 1025px) and (max-width: 1199px) {

  .fourboximg {

    padding: 10px;
  }

  .fourboximg:before {
    content: '';
    position: absolute;
    top: 56px;
    right: -14px;
    width: 1px;
    height: 120px;
    background-color: #aaaaaa75;
  }

  .fourboximgnone::before {
    display: none;
  }



}

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


  .fourboximg {
    width: 100%;
    padding: 0px;
  }

  .fourword h1 {
    font-size: 24px;
  }

  .fourboxp p {
    letter-spacing: 0;
    font-size: 18px;
  }

  .pill {
    width: 80%;
    margin: 0 auto;
  }

  .swiper-slide-2 {
    display: none;
  }

  .padd {
    padding-left: 27px !important;
  }


  .header-word {
    width: 100%;
    padding: 0 0px;

  }


  #ICON {
    display: none;
  }

  .footerbox {

    width: 100%;

  }

  .footerword {
    width: 60%;
    padding: 15px 0 ;

  }

}

@media screen and (max-width: 340px) {
  .threeword h5 {
    word-break: break-all;
  }
}


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

  .fivepartbox {
    flex-direction: column;

  }

  .fivepartboxone {
    margin-bottom: 100px;
  }

  .fivepartboxone {
    width: 90%;
  }

}


@media screen and (min-width: 1100px) and (max-width: 1199px) {
  .firstpart {
    margin-top: -60px;
  }

  .color {
    display: flex;
    margin-bottom: 110px;
  }

}

@media screen and (min-width: 1000px) {

  .span-1 {
    display: block;
  }

  .span-0 {
    display: block;
    color: #515457 !important;
  }


}

@media screen and (min-width: 1200px) {


  .fourboximg:before {
    content: '';
    position: absolute;
    top: 76px;
    right: -14px;
    width: 1px;
    height: 120px;
    background-color: #aaaaaa75;
  }

  .fourboximgnone::before {
    display: none;
  }


  .ropebox {
    width: 50px;
    margin: 6px 70px -4px 70px;
    position: relative;
    z-index: 3;
  }

  .footericon img {
    width: 100%;
  }

  .aboutaboxp span {
    display: block;
  }

  .firstpart {
    margin-top: -150px;
  }

  .csae-listwordimg img {
    box-shadow: 10px 10px 0px #2eb3a482;
  }

  .installmenth1 h1 {

    letter-spacing: 1px;
  }


}


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



  .fourboximg:before {
    content: '';
    position: absolute;
    top: 46px;
    right: -14px;
    width: 1px;
    height: 120px;
    background-color: #aaaaaa75;
  }

  .fourboximgnone::before {
    display: none;
  }

  .member {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  .one,
  .two,
  .three {
    width: 100%;
    margin-top: 40px;
  }

  .threeword {
    height: 500px;
  }


  .twoword {
    height: 420px;
  }

  .oneword {
    height: 405px;
  }

  .mySwiper-1 {
    border: solid 2px #2eb3a2;
    border-radius: 12px;
    padding: 10px;
    width: 80%;

  }

  .bgc-1 {
    padding-bottom: 10px;
  }


  .mySwiper-1 .swiper-button-next {
    right: 35px;
  }

  .mySwiper-1 .swiper-button-prev {
    left: 35px;
  }

  .firstpart {
    margin-top: 70px;
  }



}

@media screen and (min-width:860px) and (max-width:1024px) {
  .header-bigimg {
    width: 55% !important;
  }




}

@media screen and (min-width:767px) {
  .installmentboxword {
    height: 180px;
  }

}

@media screen and (min-width:859px) and (max-width:1023px) {
  .colorboxfour {

    width: 60%;
  }
}


@media screen and (min-width: 767px) and (max-width: 858px) {
  .colorboxfour {
    width: 100%;
  }




}

@media screen and (min-width: 859px) and (max-width: 1199px) {
  .colorsmallbox {

    min-height: 315px;
  }
}


@media screen and (min-width:1200px) {
  .colorsmallbox {
    width: 320px;
    height: 250px;
    background-color: white;
    box-shadow: 0 0 13px #2eb3a357;
    margin: 20px;
    padding: 16px;
  }

}

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


  .firstwordbox {
    flex-direction: column;
  }

  .firstwordboxre {
    flex-direction: column-reverse !important
  }

  .firstword h3::before {
    width: 60px;
    top: 18px;
    right: -79px;
  }

  .firstword h3::after {
    width: 60px;
    top: 18px;
    left: -79px;
  }

  .firstword h3 {
    font-size: 28px;
  }








}

@media screen and (max-width: 320px) {
  .colorsmallbox {
    width: 80%;
    height: initial;

  }
}

/* --------- 人物碰到圖片放大特效 */

.oneimg {
  position: relative;
  overflow: hidden;

}

.twoimg {
  position: relative;
  overflow: hidden;

}


.threeimg {
  position: relative;
  overflow: hidden;

}




@keyframes zoom-fade {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }
}




@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}



/* ===== */

/* ------- */
@keyframes g-up {
  0% {
    will-change: transform;
    opacity: 0;
    transform: translateY(70px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.g-up {
  animation-name: g-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: .1s;
}

/* ------- */

@keyframes h-up {
  0% {
    will-change: transform;
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.h-up {
  animation-name: h-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: .2s;
}

/* ------- */
@keyframes i-up {
  0% {
    will-change: transform;
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.i-up {
  animation-name: i-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: .3s;
}



/* ====== */
.oneimg:before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 10;
}

.oneimg:hover:before {

  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}

.oneimg img {
  transition: 0.5s;
}

.oneimg:hover.oneimg img {
  transform: scale(1.2, 1.2);
  transition: all 1s ease-out;
}

/* ====== */

.twoimg:before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 10;
}

.twoimg:hover:before {
  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}

.twoimg img {
  transition: 0.5s;
}

.twoimg:hover.twoimg img {
  transform: scale(1.2, 1.2);
  transition: all 1s ease-out;
}

/* ====== */


.threeimg:before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 10;
}

.threeimg:hover:before {

  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}

.threeimg img {
  transition: 0.5s;
}

.threeimg:hover.threeimg img {
  transform: scale(1.2, 1.2);
  transition: all 1s ease-out;
}

/* ======== */


@keyframes f-up {
  0% {
    will-change: transform;
    /*優化動畫卡頓1*/
    /*position:relative;優化動畫卡頓2*/
    /*z-index: 1;優化動畫卡頓2*/
    opacity: 0;
    /*初始狀態 透明度為0*/
    transform: translateY(100px);
    /*初始狀態 文件流下100px*/
  }

  100% {
    opacity: 1;
    /*結尾狀態 透明度為1*/
    transform: translateY(0px);
    /*初始狀態 恢復正常位置*/
  }
}

.f-up {
  animation-name: f-up;
  /*動畫名稱*/
  animation-duration: .8s;
  /*動畫持續時間*/
  animation-iteration-count: 1;
  /*動畫次數*/
  animation-delay: 0s;
  /*延遲時間*/
}

@media (min-width: 1400px) {
  .containerlist {
    max-width: 1200px !important;
  }

  .contactimg img {
    width: 100%;
  }
}

@media (min-width: 860px) and (max-width: 991px) {

  .installmentboxone-1 {
    height: 420px;
  }
}


@media (max-width: 991px) {
  .csae-listimgbox {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15px;
  }

  .csae-listword {
    width: 100%;
    padding: 0 0px;
    margin-top: 20px;


  }

  .firstword {
    text-align: center;
    color: #626262;
    position: relative;

  }


  .shape-layer {

    position: absolute;
    left: -79px;
    top: -94px;
    width: 230px;
    opacity: .4;
    height: 230px;
  }

  .shape-layer-1 {
    background-image: url(../img/shape-17.png);
    position: absolute;
    right: -79px;
    bottom: -161px;
    width: 230px;
    opacity: .4;
    height: 230px;
  }


  .csae-listimg {
    width: 100%;
    margin-top: 0px;
    padding: 0;
  }
}


@media only screen and (min-width:879px) {




  .grid {
    top: 0;
    left: 50%;
    height: 100%
  }

  .grid:after {
    content: "\30FB";
    line-height: 1;
    text-indent: -1px;
    display: inline-block;
    color: #2eb3a4;
    box-sizing: border-box;
    border: 1px solid #2eb3a4;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -9px;
    bottom: -10px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
  }

  .grid {
    top: 0;
    height: 100%
  }

}

@media only screen and (min-width:1700px) {
  .colorboxfour {
    margin-top: 90px;
  }


  .firstpart {
    margin-top: -280px;
  }

}


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

  .footerword a {

    font-size: 16px;
  }

  .firstwordlogo {
    width: 90px;
    height: 50px;

  }

  .padd {
    padding-left: 23px;
  }

  .secondwordlogo {
    width: 65px;
    height: 50px;

  }

  .firstwordh1 h1 {
    font-size: 23px !important;
    margin-bottom: 15px;
    letter-spacing: 0px;
  }

  .secondwordh1 h1 {
    font-size: 23px !important;
    margin-bottom: 15px;
  }

}

@media screen and (min-width:500px) and (max-width:1024px) {
  .padd {
    padding-left: 26px;
  }

}

@media screen and (min-width:501px) and (max-width:878px) {
  .firstwordlogo {
    width: 66px;
    height: 50px;

  }

  .secondwordlogo {
    width: 66px;
    height: 50px;

  }

  .firstwordh1 h1 {
    font-size: 29px;
  }

  .secondwordh1 h1 {
    font-size: 29px;
  }



}

@media only screen and (min-width:879px) and (max-width:991px) {
  .firstwordh1 h1 {
    font-size: 26px;
  }

  .firststep {
    align-items: center;
  }

  .firstwordbox {

    padding-right: 30px;
  }
}


@media only screen and (max-width:878px) {
  #mainService.current .grid {
    top: 90px;
    height: calc(100% - 90px)
  }

  #mainService.current .grid {
    top: 0;
    height: 100%
  }

  .firstwordh1 p {
    text-align: justify;
    letter-spacing: 0px;
    font-size: 16px;
  }

  .dotp p {
    padding: 0;
  }

  .firstwordh1 {
    margin-top: 16px;
    width: 71%;
  }



  .firstwordbox {
    display: flex;
    width: 100%;
  }



  .firststep::before {
    display: none;
  }


  .firststep {
    padding: 0px 0;
    flex-direction: column-reverse;
  }


  /* ------ */

  .secondwordh1 p {
    text-align: justify;
  }

  .secondwordh1 {
    margin-top: 16px;
    width: 80%;
  }



  .secondwordbox {
    display: flex;
    width: 100%;
    padding: 0;
  }



  .secondstep::before {
    display: none;
  }

  .secondwordimg {
    width: 93%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 28px;
    z-index: 1;
  }

  .secondstep {
    padding: 0px 0;
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .girdbox {

    padding-bottom: 120px;
  }



}


/* for JS */
.js-fadein-up,
.js-fadein-down,
.js-fadein-left,
.js-fadein-right {
  opacity: 0;
  transition: all .7s ease;
}

.js-fadein-up {
  transform: translateY(-50px);
}

.js-fadein-bottom {
  transform: translateY(50px);
}

.js-fadein-left {
  transform: translateX(-50px);
}

.js-fadein-right {
  transform: translateX(50px);
}

.js-fadein-up--active,
.js-fadein-down--active,
.js-fadein-left--active,
.js-fadein-right--active {
  transform: translate(0);
  opacity: 1;
}

@media screen and (min-width:1020px) and (max-width: 1024px) {
.footerword {
  width: 30% !important;
    padding: 0 30px;
   letter-spacing: 0;
   }

  .footericon {
    width: 38%;}

    .ptbtn {
      padding-right: 15px;
    }

     .ptbtn p {

       font-size: 15px;
     }

    

}


@media screen and (min-width:1100px){
.footerpartbg {
  padding-right: 100px;}

  .footericon {
    height: 116px;}

    .footericon {
      width: 34%;}


   

}