/* ---reset.css--- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ---reset.css--- */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: none;
  font-family: Arial, Helvetica, "source-han-sans-traditional", "微軟正黑體", "Microsoft JhengHsans", sans-serif;
}
body {
  color: #505050;
}
.fs-0 {
  font-size: calc(1.875rem + 1.5vw) !important;
}
.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}
.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}
.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}
.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}
.fs-5 {
  font-size: 1.25rem !important;
}
.fs-6 {
  font-size: 1rem !important;
}
.t-c {
  text-align: center;
}
.m-a {
  margin: auto;
}
a {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  text-decoration: none !important;
}
p {
  color: #536970;
}
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
/* ----------電腦版型--------------------------- */
#header {
  width: 100%;
  height: auto;
  display: block;
  z-index: 9999;
}
#ALL {
  width: 100%;
  position: relative;
  margin-top: -3px;
  background-color: #F4C9CD;
  background-repeat: no-repeat;
  background-position: center 0px;
  overflow: hidden;
  height: 100%;
  background-size: 100%;
}
.wrap {
  max-width: 1000px;
  padding: 100px 0 120px;
  margin: auto;
}
.arrow-bottom {
  display: block;
  width: 18px;
  max-width: auto;
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translate(-50%, 138%);
  z-index: 1;
}
.modal-dialog {
  max-width: 350px;
}
.f-primary {}
.f-secondary {}
/*------------------- TOP -----------------*/
#GOTOP {
  background-image: url(../images/gotop.png);
  right: 10px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 9999;
  position: fixed;
}
#GOTOP:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.bg img {
  margin-top: -3rem;
  display: block;
  width: 100%;
  max-width: auto;
  height: auto;
  object-fit: cover;
}
.text-indent {
  text-indent: -9999999px;
  display: inline-block;
}
.TOP {
  position: relative;
  /*  overflow: hidden;*/
}
.slide-in-left {
  -webkit-animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
  animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
}
.TOP .title1 {
  display: block;
  width: 29%;
  max-width: auto;
  position: absolute;
  top: 20%;
  left: 24%;
  transform: translate(-17%, 3%);
}
.fade-in-top {
  -webkit-animation: fade-in-top .6s cubic-bezier(.39, .575, .565, 1.000) both;
  animation: fade-in-top .6s cubic-bezier(.39, .575, .565, 1.000) both;
  animation-delay: .5s;
}
.fade-in-bottom {
  -webkit-animation: fade-in-bottom .6s cubic-bezier(.39, .575, .565, 1.000) both;
  animation: fade-in-bottom .6s cubic-bezier(.39, .575, .565, 1.000) both;
  animation-delay: .5s;
}
.TOP .title2 {
  display: block;
  width: 25%;
  max-width: auto;
  position: absolute;
  top: 59%;
  left: 28%;
  transform: translate(-23%, 95%);
}
.TOP .linegroup {
  display: block;
  width: 100%;
  max-width: auto;
  position: absolute;
  top: 5%;
  left: 91%;
  transform: translate(-91%, 5%);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  border: 1px solid transparent;
}
.scale-in-center {
  -webkit-animation: scale-in-center 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
  animation: scale-in-center 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
  animation-delay: 1.1s;
}
.TOP .scale-in-right {
  display: block;
  width: 25%;
  max-width: auto;
  position: absolute;
  top: 5%;
  left: 82%;
  transform: translate(-90%, 20%);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.title1 {
  text-align: center;
  color: #25AFAF;
  font-weight: bold;
}
.c-point {
  width: 45vw;
  margin-bottom: 2.5rem;
}
/*------------- content1-------------*/
.content1 {
  width: 100%;
  background-color: #F4C9CD;
}
.L-box1 {
  background: url(../images/img03a.svg)no-repeat 35PX 60px;
  background-size: 88%;
  height: 30rem;
  position: relative;
}
.L-box-p1 {
  top: 55%;
  position: absolute;
  left: 18%;
  width: 65%;
  line-height: 44px;
  text-align: justify;
}
.R-box1 {
  background: url(../images/img05.svg)no-repeat 61px 70px;
  background-size: 80%;
  position: relative;
}
.btn-line {
  display: block;
  width: 80%;
  height: auto;
  background-color: #1bbf1b;
  border-radius: 99rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 0px;
  margin: auto;
  color: #ffffff;
  bottom: 7%;
  left: 10%;
}
.btn-line img {
  display: inline-table;
  width: 17%;
  padding-right: 0.5rem;
  vertical-align: middle;
}
.btn-line:hover, .btn-line:focus {
  background-color: #149514;
  color: #ffffff;
}
.i-abs {
  position: absolute;
  bottom: -10px;
}
/*------------- content2-------------*/
.content2 {
  width: 100%;
  background-color: #EAB5BA;
}
.L-box2 {
  background: url(../images/img08.svg)no-repeat 21px 57px;
  background-size: 88%;
  height: 30rem;
  position: relative;
}
.L-box-p2 {
  top: 58%;
  position: absolute;
  left: 16%;
  width: 65%;
  line-height: 44px;
  text-align: justify;
}
.RR-box2 {
  height: 31rem;
}
.R-box2 {
  margin: auto;
  padding-top: 20px;
  padding-bottom: 80px;
  width: 332px;
}
.slideall {
  width: 355px;
  overflow: hidden;
  margin: auto;
  margin-top: 3.5rem;
}
.part {
  background: #fff;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  margin: auto;
  height: 21rem;
}
.swiper-pagination {
  left: 0%;
  right: 0%;
  margin-top: 40px;
}
.swiper-pagination-bullet-active {
  background: #536970;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 4px;
}
.btn-line-app {
  display: none;
}
/*------------- content3-------------*/
.content3 {
  width: 100%;
  background-color: #F4C9CD;
}
.L-box3 {
  background: url(../images/img14.svg)no-repeat 39px 28px;
  background-size: 88%;
  height: 30rem;
  position: relative;
}
.L-box-p3 {
  top: 58%;
  position: absolute;
  left: 16%;
  width: 70%;
  line-height: 44px;
  text-align: justify;
}
.R-box3 {
  background: url(../images/img15.svg)no-repeat 74px 23px;
  background-size: 71%;
  position: relative;
}
.btn-line2 {
  bottom: 2%;
}
/*------------- content4-------------*/
.content4 {
  width: 100%;
  background-color: #EAB5BA;
}
.content4 h4 {
  padding-bottom: 2rem;
}
.content4 ul {
  list-style: decimal;
  text-align: justify;
}
.content4 ul li {
  line-height: 25px;
  padding-bottom: 8px;
}
.content4 ul li span {
  color: #C94B72;
}
/********************************X-Large devices (large desktops, less than 1400px)*********************************/
@media (max-width: 1400px) {}
@media screen and (max-width: 1200px) {
  .wrap {
    width: 95%;
  }
  .c-point {
    width: 75vw;
  }
  .content4 .wrap {
    width: 85%;
  }
}
@media screen and (max-width: 1024px) {
  .btn-line2 {
    bottom: 5%;
  }
  .L-box1 {
    background-position: 16px 53px;
  }
  .L-box2 {
    background-position: 24px 57px;
  }
  .L-box-p1 {
    top: 52%;
    left: 15%;
    width: 65%;
  }
  .btn-line {
    bottom: 8%;
  }
  .L-box-p3 {
    top: 56%;
    left: 18%;
    width: 65%;
  }
  .L-box-p2 {
    top: 56%;
    position: absolute;
    left: 17%;
    width: 65%;
    line-height: 44px;
    text-align: justify;
  }
}
@media screen and (max-width: 992px) {
  .wrap {
    padding: 80px 0 80px;
  }
  .L-box1, .L-box2 {
    background-position: 33px 68px;
    background-size: 90%;
  }
  .L-box-p1 {
    top: 58%;
    left: 16%;
    width: 73%;
  }
  .L-box2 {
    background-position: 30px 69px;
  }
  .L-box-p2 {
    top: 59%;
    left: 19%;
    width: 64%;
  }
  .btn-line2 {
    bottom: 9%;
  }
  .btn-line-app a {
    color: #ffffff;
  }
  .L-box-p3 {
    top: 56%;
    left: 22%;
    width: 65%;
  }
}
@media screen and (max-width: 768px) {
  .wrap {
    padding: 60px 0 60px
  }
  .TOP .bg {
    background: url(../images/m-bg.svg)no-repeat center 0;
    height: 35rem;
    background-size: 101%;
  }
  .TOP .bg > img {
    display: none;
  }
  .TOP .title1 {
    display: none;
  }
  .TOP .title2 {
    display: none;
  }
  .TOP .linegroup {
    display: none;
  }
  .scale-in-right {
    display: none;
  }
  .c-point {
    width: 86vw;
    margin-bottom: 1.2rem;
  }
  .R-box1 {
    background-position: 19px 3px;
  }
  .R-box1, .R-box2 {
    background-size: 95%;
    height: 22rem;
  }
  .L-box1 {
    background-position: 19px 9px;
    background-size: 94%;
    height: auto;
  }
  .L-box2 {
    background-position: 19px 34px;
    background-size: 94%;
    height: 26rem;
  }
  .L-box-p2 {
    top: 50%;
    left: 16%;
    width: 72%;
    line-height: 34px;
  }
  .L-box3 {
    background-position: 16px 20px;
    background-size: 94%;
    margin-bottom: 2rem;
    height: 24rem;
  }
  .L-box-p3 {
    top: 59%;
    left: 15%;
    width: 75%;
    line-height: 34px;
    text-align: justify;
  }
  .R-box3 {
    background-position: 45px 7px;
    background-size: 79%;
    height: 23rem;
  }
  .btn-line {
    left: 3%;
    width: 95%;
    bottom: 0%;
  }
  .R-box2 {
    width: 305px;
  }
  .slideall {
    width: 338px;
    margin-top: 1.5rem;
  }
  .RR-box2 {
    height: 25rem;
  }
  .L-box-p1 {
    top: 48%;
    left: 16%;
    width: 73%;
    line-height: 34px;
  }
}
/* X-Small devices (portrait phones, less than 576px)*/
@media screen and (max-width: 576px) {
  .btn-line-pc {
    display: none;
  }
  .btn-line-app {
    display: block;
  }
  .TOP .bg {
    background: url(../images/m-bg.svg)no-repeat 1px -7px;
    height: 26rem;
    background-size: 101%;
  }
  .c-point {
    width: 95vw;
  }
  .content2 .wrap {
    padding: 60px 0 96px;
  }
  .L-box1 {
    background-position: 17px 0px;
    background-size: 94%;
    height: 32rem;
  }
  .L-box-p1 {
    top: 49%;
  }
  .R-box1 {
    height: 33rem;
  }
  .R-box2 {
    height: 27rem;
  }
  .L-box2 {
    background-position: 18px 0px;
    background-size: 94%;
    height: 32rem;
  }
  .L-box-p2 {
    top: 53%;
  }
  .L-box3 {
    height: 33rem;
  }
  .L-box-p3 {
    left: 11%;
    top: 65%;
  }
  .R-box3 {
    background-position: 65px 7px;
    height: 35rem;
  }
  .btn-line {
    bottom: 7%;
  }
  .part {
    height: 21rem;
  }
  .btn-line {
    bottom: 0%;
  }
  .RR-box2 .btn-line {
    bottom: 8%;
  }
  .RR-box2 {
    height: 29rem;
  }
  .swiper-pagination {
    bottom: -6px;
  }
}
/*  phone*/
@media screen and (max-width: 414px) {
  .TOP .bg {
    height: 19rem;
  }
  .wrap {
    padding: 40px 0 50px;
  }
  .L-box1 {
    background-position: 10px 3px;
    height: 22rem;
  }
  .R-box1, .R-box2 {
    background-size: 88%;
  }
  .L-box-p1 {
    top: 52%;
    left: 14%;
    width: 71%;
  }
  .L-box-p2 {
    top: 56%;
  }
  .R-box1 {
    background-position: 26px 22px;
    height: 22rem;
  }
  .L-box2 {
    background-position: 15px 0px;
    height: 22rem;
  }
  .R-box2 {
    height: 24rem;
  }
  .swiper-pagination {
    margin-top: 30px;
  }
  .L-box3 {
    height: 24rem;
    background-position: 14px 0px;
  }
  .L-box-p3 {
    left: 13%;
    top: 59%;
  }
  .R-box3 {
    background-position: 49px 7px;
    height: 26rem;
  }
  .content4 .wrap {
    width: 80%;
  }
  .btn-line {
    bottom: -2%;
  }
  .btn-line-app a {
    color: #ffffff;
  }
  .RR-box2 .btn-line {
    bottom: 8%;
  }
  .content2 .wrap {
    padding: 60px 0 58px;
  }
  .modal-dialog {
    margin: auto;
    margin-top: 3rem;
  }
}
/*  phone*/
@media screen and (max-width: 375px) {
  .TOP .bg {
    height: 17rem;
  }
  .L-box-p1 {
    top: 51%;
    left: 16%;
    width: 70%;
    line-height: 33px;
  }
  .L-box1 {
    height: 21rem;
    background-position: 14px 5px;
  }
  .R-box1 {
    height: 22rem;
  }
  .L-box2 {
    height: 21rem;
    background-position: 12px 0px;
  }
  .L-box-p2 {
    top: 43%;
    width: 70%;
    line-height: 33px;
  }
  .L-box3 {
    height: 22rem;
  }
  .L-box-p3 {
    top: 59%;
  }
  .R-box3 {
    height: 23rem;
    background-position: 49px 7px;
  }
  .L-box-p2 {
    top: 53%;
  }
}
/*  phone*/
@media screen and (max-width: 320px) {
  .TOP .bg {
    height: 15rem;
  }
  .fs-0 {
    font-size: calc(1.475rem + 1.5vw) !important;
  }
  .L-box-p1 {
    top: 43%;
  }
  .L-box-p2 {
    top: 45%;
  }
  .L-box2 {
    height: 18rem;
  }
  .L-box-p2 {
    top: 53%;
  }
  .RR-box2 {
    height: 26rem;
  }
  .slideall {
    width: 100%;
    margin-top: 1rem;
  }
  .R-box2 {
    width: 281px;
  }
  .RR-box2 {
    height: 25rem;
  }
  .L-box-p3 {
    top: 55%;
    left: 16%;
  }
  .L-box3 {
    height: 20rem;
  }
  .btn-line {
    bottom: -4%;
  }
  .R-box3 {
    height: 20rem;
  }
  .R-box1 {
    height: 19rem;
  }
  .L-box1 {
    height: 19rem;
  }
  .L-box-p1 {
    top: 48%;
  }
}