@charset "UTF-8";
/* 字體大小調整 */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* nav 選項置右 */
.collapse {
  justify-content: flex-end;
}

@media only screen and (max-width: 991px) {
  .collapse {
    justify-content: start;
  }
}
/* reContainer 樣式還原 */
.reContainer {
  padding: 0;
}

.logo {
  height: 50px;
}

.orangeCover {
  font-size: 1.25rem;
  background: #ff7c3b;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  padding: 0.2rem 1rem;
  margin: 0.5rem;
}
.orangeCover:hover {
  text-decoration: none;
  background: #dd662a;
  color: #fff;
}

.orangeLine {
  font-size: 1.25rem;
  background: #fff;
  border: 1px solid #ff7c3b;
  border-radius: 50px;
  color: #333;
  font-weight: bold;
  padding: 0.2rem 1rem;
  margin: 0.5rem;
}
.orangeLine:hover {
  text-decoration: none;
  background: #e3e3e5;
  border: 1px solid #dd662a;
  color: #000;
}

.navbar {
  box-shadow: 0 0 0.3rem #555;
}

.navbar-nav .nav-item .nav-link {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 1.5rem;
  color: #555;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #000;
}

.navbar-nav .nav-item .orangeCover {
  color: #fff;
  padding: 0.5rem 1.5rem;
}
.navbar-nav .nav-item .orangeCover:hover {
  color: #fff;
}
.navbar-nav .nav-item .orangeLine {
  padding: 0.5rem 1.5rem;
}
.navbar-nav .nav-item .orangeLine:hover {
  border: 1px solid #dd662a;
  color: #000;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
    margin: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav .orangeCover, .navbar-expand-lg .navbar-nav .orangeLine {
    padding: 0.5rem 1.5rem;
  }
}
body {
  overflow-x: hidden;
}

.modal-content {
  border-radius: 15px;
}
.modal-content .modal-header {
  flex-direction: column;
}
.modal-content .modal-header img {
  padding: 1rem;
}
.modal-content .modal-body {
  padding-top: 2rem;
}
.modal-content .modal-body .form-group {
  display: flex;
}
.modal-content .modal-body .form-group label {
  text-align: end;
}
.modal-content .modal-body .form-group .col-sm-7 .btn-default {
  border: 1px solid #ccc;
}
.modal-content .modal-body .btn-box {
  display: flex;
  justify-content: center;
  padding-top: 15px;
}
.modal-content .modal-body .btn-box .btn {
  padding: 0.25rem 2.5rem;
  border-radius: 50px;
  margin: 1rem 1rem;
  font-size: 1.25rem;
}
.modal-content .modal-body .btn-box .btn-orange {
  color: #fff;
  background: #ff7c3b;
}
.modal-content .modal-body .btn-box .btn-orange:hover {
  background: #dd662a;
}

@media only screen and (max-width: 575px) {
  .modal-content .modal-body .form-group {
    flex-direction: column;
  }
  .modal-content .modal-body .form-group label {
    text-align: start;
  }
}
.main {
  background: white url(../../images/mainBG.svg) center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
.main .titleBox {
  padding-top: 300px;
  width: 60%;
  text-align: center;
  z-index: 2;
}
.main .titleBox .titleB {
  font-size: 4rem;
  font-weight: bolder;
}
.main .titleBox .titleO {
  font-size: 2.05rem;
  color: #ff7c3b;
}
.main .titleBox .titleS {
  font-size: 1.65rem;
}
.main .titleBox .tbtnBox {
  padding-top: 60px;
}
.main .titleBox .tbtnBox a {
  padding: 0.5rem 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.main .titleBox .tbtnBox a:hover {
  box-shadow: 0 0 6px #ccc;
  transform: scale(1.025);
}
.main .titleBox div .orange {
  color: #ff7c3b;
}
.main .titleBox div .black {
  color: #212529;
}
.main .mainRound {
  position: absolute;
  top: 130px;
  right: 100px;
  width: 35%;
  overflow: hidden;
}
.main .mainRound .round .imgRound {
  width: 100%;
}
.main .mainRound .roundLine1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  animation-name: rotation360;
  animation-duration: 60s;
  transform-origin: 50% 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.main .mainRound .roundLine2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  animation-name: rotation360;
  animation-duration: 120s;
  transform-origin: 50% 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: 1;
}
.main .mainRound .roundProduct {
  position: absolute;
  top: 10px;
  right: -18px;
  width: 100%;
  z-index: 2;
}

@media only screen and (max-width: 1199px) {
  .main .titleBox {
    padding-top: 200px;
    width: 60%;
    text-align: center;
  }
  .main .titleBox .titleB {
    font-size: 3.5rem;
    font-weight: bolder;
  }
  .main .titleBox .titleO {
    font-size: 1.75rem;
    color: #ff7c3b;
  }
  .main .titleBox .titleS {
    font-size: 1.425rem;
  }
  .main .titleBox .tbtnBox {
    padding-top: 50px;
  }
  .main .titleBox .tbtnBox a {
    display: inline-block;
  }
}
@media only screen and (max-width: 991px) {
  .main .titleBox {
    padding-top: 180px;
    width: 60%;
    text-align: center;
  }
  .main .titleBox .titleB {
    font-size: 2.8rem;
    font-weight: bolder;
  }
  .main .titleBox .titleO {
    font-size: 1.4rem;
    color: #ff7c3b;
  }
  .main .titleBox .titleS {
    font-size: 1.125rem;
  }
  .main .titleBox .tbtnBox {
    padding-top: 40px;
  }
  .main .titleBox .tbtnBox a {
    display: inline-block;
  }
}
@media only screen and (max-width: 767px) {
  .main .titleBox {
    padding-top: 160px;
    width: 60%;
    text-align: center;
  }
  .main .titleBox .titleB {
    font-size: 2rem;
    font-weight: bolder;
  }
  .main .titleBox .titleO {
    font-size: 1rem;
    color: #ff7c3b;
  }
  .main .titleBox .titleS {
    font-size: 0.815rem;
  }
  .main .titleBox .tbtnBox {
    padding-top: 30px;
  }
  .main .titleBox .tbtnBox a {
    display: inline-block;
  }
}
@media only screen and (max-width: 575px) {
  .main .titleBox {
    padding-top: 350px;
    width: auto;
  }
  .main .titleBox .titleB {
    font-size: 2.25rem;
    font-weight: bolder;
  }
  .main .titleBox .titleO {
    font-size: 1.125rem;
    color: #ff7c3b;
  }
  .main .titleBox .titleS {
    font-size: 0.915rem;
  }
  .main .titleBox .tbtnBox {
    padding-top: 30px;
  }
  .main .titleBox .tbtnBox a {
    display: inline-block;
    font-size: 1.25rem;
  }
}
@media only screen and (min-width: 1900px) {
  .main .titleBox {
    width: 70%;
  }
  .main .mainRound {
    right: 25%;
    width: 25%;
  }
}
@media only screen and (min-width: 2500px) {
  .main .titleBox {
    width: 75%;
  }
  .main .mainRound {
    right: 30%;
    width: 20%;
  }
}
@media only screen and (max-width: 575px) {
  .main .mainRound .roundProduct {
    top: 20px;
    right: -13px;
  }
}
@media only screen and (max-width: 1199px) {
  .main .mainRound {
    top: 100px;
    right: 90px;
    width: 35%;
  }
}
@media only screen and (max-width: 991px) {
  .main .mainRound {
    top: 100px;
    right: 70px;
    width: 35%;
  }
}
@media only screen and (max-width: 767px) {
  .main .mainRound {
    top: 100px;
    right: 60px;
    width: 35%;
  }
}
@media only screen and (max-width: 575px) {
  .main .mainRound {
    top: 0;
    right: calc((100vw - 320px) / 2);
    /*transform: translateY(-50%) translatex(-50%); */
    width: 320px;
  }
}
.areaFisrt {
  margin-bottom: 10%;
}

@media only screen and (max-width: 991px) {
  .areaFisrt {
    margin-bottom: 150px;
  }
}
.area {
  margin: 64px 0;
}

.bubble {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: #3fc8ae;
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 0 0.4rem #555;
}

@media only screen and (max-width: 575px) {
  .bubble {
    font-size: 1.25rem;
  }
}
.bubbleNeedle {
  border-color: #3fc8ae transparent transparent transparent;
  border-style: solid solid solid solid;
  border-width: 20px 15px;
  bottom: 0;
  content: "";
  height: 0;
  position: relative;
  left: 46px;
  width: 0;
  margin-bottom: -25px;
}

.titleBefore {
  color: #ff7c3b;
  padding-top: 1rem;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  padding: 0.5rem 0;
  display: flex;
}
.title .text-orange {
  color: #FF9F01;
}
.title .orange {
  background: #ff9f01;
  padding: 0.2rem 1rem;
  border-radius: 8px;
}

@media only screen and (max-width: 575px) {
  .title {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 459px) {
  .title {
    font-size: 1.75rem;
  }
}
.content {
  font-size: 1.5rem;
  display: flex;
  margin: 0.5rem 0;
}
.content .orange {
  background: #ff9f01;
  padding: 0.2rem 1rem;
  border-radius: 8px;
}

@media only screen and (max-width: 575px) {
  .content {
    flex-direction: column;
    align-items: center;
    font-size: 1.25rem;
  }
}
.payrollArea {
  display: flex;
  align-items: center;
  padding: 96px 0 0 0;
  background: url(../../images/payroll_bg.svg), linear-gradient(to top, #f3f3f5 0%, #e3e3e5 50%, #f3f3f5 100%);
  background-size: cover;
  aspect-ratio: 5/3;
}
.payrollArea .left_bg, .payrollArea .left, .payrollArea .left-text, .payrollArea .right {
  margin-top: -5vw;
}
.payrollArea .left_bg {
  position: absolute;
  padding-right: 5rem;
  width: 70%;
}
.payrollArea .left_bg .vector_phone {
  display: block;
}
.payrollArea .left_bg .vector_phone {
  display: none;
}
.payrollArea .left_bg img {
  position: absolute;
  width: 100%;
  right: 0;
  transform: translateY(-50%);
  object-fit: fill;
}
.payrollArea .left {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  padding-left: 1rem;
  padding-right: 3rem;
}
.payrollArea .left-text {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  left: 0;
  width: 70%;
}
.payrollArea .text-box {
  text-align: center;
  font-size: 1.5rem;
  color: #FF9F01;
  transform: translateY(-7vw);
  line-height: 3;
}
.payrollArea .items5, .payrollArea .items6, .payrollArea .items7, .payrollArea .items8 {
  top: 0;
}
.payrollArea .items5 .dash-line, .payrollArea .items6 .dash-line, .payrollArea .items7 .dash-line, .payrollArea .items8 .dash-line {
  order: 1;
  transform: rotate(180deg);
}
.payrollArea .items5 div:nth-child(2), .payrollArea .items6 div:nth-child(2), .payrollArea .items7 div:nth-child(2), .payrollArea .items8 div:nth-child(2) {
  order: 2;
}
.payrollArea .items5 .items-text, .payrollArea .items6 .items-text, .payrollArea .items7 .items-text, .payrollArea .items8 .items-text {
  order: 3;
}
.payrollArea .items {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 21%;
}
.payrollArea .items .icon {
  text-align: center;
  padding: 0 2rem;
}
.payrollArea .items .icon img {
  width: 100%;
}
.payrollArea .items1 {
  bottom: calc(-4vw - 8px);
}
.payrollArea .items5 {
  top: 4vw;
}
.payrollArea .items2 {
  bottom: calc(1vw - 8px);
}
.payrollArea .items6 {
  top: -1vw;
}
.payrollArea .items3 {
  bottom: calc(4vw - 8px);
}
.payrollArea .items7 {
  top: -4vw;
}
.payrollArea .items4 {
  bottom: calc(5.8vw - 8px);
}
.payrollArea .items8 {
  top: -5.8vw;
}
.payrollArea .items-text {
  font-size: 1.25rem;
  padding-bottom: 1rem;
  white-space: nowrap;
}
.payrollArea .right {
  width: 30%;
  display: flex;
  justify-content: flex-start;
}
.payrollArea .right .bubble-box {
  position: absolute;
  top: -120px;
}
.payrollArea .right_phone {
  order: 1;
  display: none;
}
.payrollArea .right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.payrollArea .title-left {
  padding-right: 1.5rem;
}
@media only screen and (max-width: 1919px) {
  .payrollArea {
    flex-direction: row;
  }
  .payrollArea .items1 {
    bottom: calc(-4.5vw - 8px);
  }
  .payrollArea .items5 {
    top: 4.5vw;
  }
  .payrollArea .items2 {
    bottom: calc(0.5vw - 8px);
  }
  .payrollArea .items6 {
    top: -0.5vw;
  }
  .payrollArea .items3 {
    bottom: calc(3.5vw - 8px);
  }
  .payrollArea .items7 {
    top: -3.5vw;
  }
  .payrollArea .items4 {
    bottom: calc(5.3vw - 8px);
  }
  .payrollArea .items8 {
    top: -5.3vw;
  }
}
@media only screen and (max-width: 1199px) {
  .payrollArea {
    padding-top: 15%;
  }
  .payrollArea .items1 {
    bottom: calc(-4.5vw - 8px);
  }
  .payrollArea .items5 {
    top: 4.5vw;
  }
  .payrollArea .items2 {
    bottom: calc(0.5vw - 8px);
  }
  .payrollArea .items6 {
    top: -0.5vw;
  }
  .payrollArea .items3 {
    bottom: calc(3.5vw - 8px);
  }
  .payrollArea .items7 {
    top: -3.5vw;
  }
  .payrollArea .items4 {
    bottom: calc(5.3vw - 8px);
  }
  .payrollArea .items8 {
    top: -5.3vw;
  }
}
@media only screen and (max-width: 991px) {
  .payrollArea {
    background: #fff;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding-bottom: 4rem;
  }
  .payrollArea .left_bg, .payrollArea .left, .payrollArea .left-text, .payrollArea .right {
    margin-top: 0;
  }
  .payrollArea .left {
    width: 70%;
    padding: 0 1rem;
  }
  .payrollArea .left_bg {
    width: 4vw;
    padding: 0;
    margin-top: -15%;
  }
  .payrollArea .left_bg img {
    transform: translateY(0%);
  }
  .payrollArea .left_bg .vector {
    display: none;
  }
  .payrollArea .left_bg .vector_phone {
    display: block;
  }
  .payrollArea .left-text {
    position: static;
    width: 100%;
    justify-content: center;
  }
  .payrollArea .text-box {
    transform: translateY(0);
    line-height: 2;
  }
  .payrollArea .right {
    width: 100%;
    justify-content: center;
  }
  .payrollArea .right .bubble-box {
    display: none;
  }
  .payrollArea .title {
    padding: 1rem 0;
  }
  .payrollArea .right_phone {
    display: flex;
    width: 100%;
    justify-content: center;
    position: absolute;
    top: -32px;
  }
  .payrollArea .items {
    flex-wrap: wrap;
    width: 50%;
    flex-direction: row;
    margin-bottom: 2rem;
    position: relative;
  }
  .payrollArea .items .dash-line {
    position: absolute;
    bottom: 50%;
  }
  .payrollArea .items .icon {
    padding: 0 3rem;
  }
  .payrollArea .items1, .payrollArea .items2, .payrollArea .items3, .payrollArea .items4 {
    bottom: 0;
  }
  .payrollArea .items5, .payrollArea .items6, .payrollArea .items7, .payrollArea .items8 {
    top: 0;
  }
  .payrollArea .items:nth-child(odd) {
    justify-content: flex-end;
    align-items: center;
    right: -12px;
  }
  .payrollArea .items:nth-child(odd) .dash-line {
    order: 2;
    transform: rotate(270deg);
    padding: 0 30px;
    position: absolute;
  }
  .payrollArea .items:nth-child(odd) .icon {
    width: 100%;
    order: 1;
    z-index: 2;
  }
  .payrollArea .items:nth-child(odd) .items-text {
    text-align: center;
    width: 100%;
    order: 3;
    padding-right: 1rem;
    padding-top: 1rem;
  }
  .payrollArea .items:nth-child(even) {
    justify-content: flex-start;
    align-items: center;
    left: -12px;
  }
  .payrollArea .items:nth-child(even) .dash-line {
    position: absolute;
    order: 2;
    transform: rotate(90deg);
    padding: 0 30px;
  }
  .payrollArea .items:nth-child(even) .icon {
    width: 100%;
    order: 1;
    z-index: 2;
  }
  .payrollArea .items:nth-child(even) .items-text {
    text-align: center;
    width: 100%;
    order: 3;
    padding-left: 1rem;
    padding-top: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .payrollArea .items-text {
    font-size: 1rem;
  }
  .payrollArea .left {
    width: 100%;
  }
  .payrollArea .left_bg {
    width: 5.6%;
  }
}

.trainArea {
  background: #f3f3f5;
  transform: skew(0deg, -5deg);
  padding: 0;
}
.trainArea .trainMain {
  transform: skew(0deg, 5deg);
  display: flex;
  justify-content: center;
}
.trainArea .trainMain .train {
  animation-name: trainAni;
  animation-duration: 10s;
  transform-origin: 50% 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.trainArea .trainMain .trainLeft {
  padding: 0 1rem;
}
.trainArea .trainMain .trainLeft .wordBox {
  margin-top: -1.2rem;
  transform: skew(0deg, -5deg);
  color: #ff9f01;
}
.trainArea .trainMain .trainLeft .wordBox div {
  padding: 0.5rem 0;
  font-size: 1.5rem;
  font-weight: bolder;
}
.trainArea .trainMain .trainRight .trainContent .orange span {
  display: inline-flex;
}

.orangekeyword {
  animation-name: orangekeywordAni;
  animation-duration: 8s;
  transform-origin: 50% 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media only screen and (max-width: 575px) {
  .trainArea .trainMain .trainLeft .wordBox div {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 575px) {
  .trainArea .trainMain .trainLeft .wordBox {
    margin-top: -8rem;
  }
}
.trainArea .trainMain .trainLeft .train {
  margin-bottom: -3rem;
}
.trainArea .trainMain .trainLeft .train img {
  height: 400px;
}
.trainArea .trainMain .trainRight {
  padding: 0 1rem;
  margin-top: -2rem;
}
.trainArea .trainMain .trainRight h2 .title {
  display: block;
}
.trainArea .trainMain .trainRight .trainContent {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}
.trainArea .trainMain .trainRight .trainContent .xicon {
  padding: 0.2rem 0.5rem;
}
.trainArea .trainMain .trainRight .trainContent .xicon .imgx {
  width: 20px;
}
.trainArea .trainMain .trainRight .coverBox {
  font-size: 2rem;
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 3px solid #ff7c3b;
}
.trainArea .trainMain .trainRight .coverBox .coverContent {
  margin: 0.25rem 0;
}
.trainArea .trainMain .trainRight .coverBox .coverContent1 {
  display: inline-block;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 {
  font-size: 2rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0.15rem 0;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 .cc {
  display: flex;
  align-items: center;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .keyword {
  margin: 0 0.5rem;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .keyword .imgx {
  height: 70px;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .redkeyword {
  color: #ff0000;
  font-size: 3rem;
  font-weight: bold;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .orangekeyword {
  display: flex;
  align-items: center;
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  background: #ff7c3b;
  padding: 0 1rem;
  border-radius: 8px;
}
.trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .orangekeyword .orangekeywordsmall {
  padding-top: 0.75rem;
  padding-left: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
}

@media only screen and (max-width: 575px) {
  .trainArea .trainMain .trainLeft .train {
    margin-top: -5rem;
  }
}
@media only screen and (max-width: 575px) {
  .trainArea .trainMain .trainRight .coverBox .coverContent {
    font-size: 1.5rem;
  }
  .trainArea .trainMain .trainRight .coverBox .coverContent1 {
    display: inline-block;
  }
  .trainArea .trainMain .trainRight .coverBox .coverContent2 {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
  }
  .trainArea .trainMain .trainRight .coverBox .coverContent2 .cc {
    display: flex;
    font-size: 1.5rem;
  }
  .trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .redkeyword {
    font-size: 2rem;
  }
  .trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .orangekeyword {
    font-size: 2rem;
  }
  .trainArea .trainMain .trainRight .coverBox .coverContent2 .cc .orangekeyword .orangekeywordsmall {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 991px) {
  .trainArea .trainMain {
    flex-direction: column;
    align-items: center;
  }
  .trainArea .trainMain .trainLeft {
    z-index: -1;
  }
}
.rocketArea {
  background: linear-gradient(to bottom, #f3f3f5 0%, #fff 50%);
  margin: 0 0 10% 0;
}

.rocketArea .rocketMain {
  display: flex;
  justify-content: center;
}
.rocketArea .rocketMain .rocketLeft {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  margin-top: -5%;
}
.rocketArea .rocketMain .rocketLeft .rocketLeftbox {
  width: 50%;
}
.rocketArea .rocketMain .rocketLeft .rocketLeftbox .title .orange {
  margin-right: 0.5rem;
}
.rocketArea .rocketMain .rocketLeft .rocketLeftbox .rocketContent {
  padding-bottom: 1rem;
}
.rocketArea .rocketMain .rocketRight {
  width: 50%;
}
.rocketArea .rocketMain .rocketRight .rocketRMain {
  position: relative;
  /*overflow: hidden; */
}
.rocketArea .rocketMain .rocketRight .rocketRMain div img {
  width: 15vw;
  height: auto;
}
.rocketArea .rocketMain .rocketRight .rocketRMain .upline {
  position: absolute;
  top: 0;
  left: 0;
}
.rocketArea .rocketMain .rocketRight .rocketRMain .upword {
  position: absolute;
  top: 45px;
  left: 15%;
}
.rocketArea .rocketMain .rocketRight .rocketRMain .rocket {
  position: absolute;
  top: 0;
  left: 30%;
}
@media only screen and (max-width: 1919px) {
  .rocketArea .rocketMain {
    padding-top: 5%;
  }
  .rocketArea .rocketMain .rocketLeft {
    width: 50%;
    padding: 0 1rem;
  }
  .rocketArea .rocketMain .rocketLeft .rocketLeftbox {
    width: auto;
  }
  .rocketArea .rocketMain .rocketLeft .rocketLeftbox .title {
    flex-wrap: wrap;
  }
  .rocketArea .rocketMain .rocketRight {
    width: 50%;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain div img {
    width: 20vw;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upline {
    left: 0;
    top: 0;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upword {
    left: 10%;
    top: 0;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .rocket {
    left: 35%;
    top: -5vw;
  }
}
@media only screen and (max-width: 1199px) {
  .rocketArea .rocketMain {
    padding-top: 10%;
  }
  .rocketArea .rocketMain .rocketRight {
    width: 50%;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain {
    overflow: visible;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upline {
    left: 5%;
    top: 50px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upword {
    left: 15%;
    top: 60px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .rocket {
    left: 40%;
    top: 30px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain div img {
    width: 20vw;
  }
}
@media only screen and (max-width: 991px) {
  .rocketArea .rocketMain {
    padding-top: 5%;
  }
  .rocketArea .rocketMain .rocketLeft {
    width: 50%;
    padding: 0 1rem;
  }
  .rocketArea .rocketMain .rocketLeft .rocketLeftbox {
    margin-top: -5%;
    z-index: 2;
  }
  .rocketArea .rocketMain .orange {
    margin-bottom: 16px;
  }
  .rocketArea .rocketMain .rocketRight {
    width: 50%;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain {
    overflow: visible;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upline {
    left: 5%;
    top: 50px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upword {
    left: 15%;
    top: 60px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .rocket {
    left: 40%;
    top: 30px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain div img {
    width: 30vw;
  }
}
@media only screen and (max-width: 767px) {
  .rocketArea .rocketMain {
    flex-direction: column;
  }
  .rocketArea .rocketMain .rocketLeft {
    width: 100%;
    justify-content: center;
  }
  .rocketArea .rocketMain .rocketRight {
    width: 100%;
    height: 300px;
    padding-top: 64px;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upline {
    top: 0;
    height: 300px;
    left: 15vw;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upword {
    top: 40px;
    left: 20vw;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .rocket {
    top: 0;
    left: 40vw;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain div img {
    width: 40vw;
  }
}
.rocketArea .rocketMain .rocketArea {
  margin-bottom: 0;
}
@media only screen and (max-width: 575px) {
  .rocketArea .rocketMain .rocketLeftbox {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .rocketArea .rocketMain .rocketLeftbox h2 {
    text-align: center;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upline {
    top: 0;
    height: 300px;
    left: -20vw;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .upword {
    top: 40px;
    left: 0;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain .rocket {
    top: 0;
    left: 30vw;
  }
  .rocketArea .rocketMain .rocketRight .rocketRMain div img {
    width: 60vw;
  }
}

.mapArea {
  background: linear-gradient(to bottom, #fff 50%, #f3f3f5 100%);
  margin: 5% 0 0 0;
}
.mapArea .mapMain {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mapArea .mapMain .mapLeft {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapArea .mapMain .mapLeft .columnitem {
  width: 75%;
}
.mapArea .mapMain .mapRight {
  padding: 0 1rem;
  margin-top: -1rem;
}
.mapArea .mapMain .mapRight .mapContent .orange {
  margin-right: 0.5rem;
}
.mapArea .mapMain .mapRight .content {
  flex-wrap: wrap;
}
@media only screen and (max-width: 991px) {
  .mapArea .mapMain {
    flex-direction: column;
  }
  .mapArea .mapMain .mapitem {
    order: 2;
  }
}
@media only screen and (max-width: 767px) {
  .mapArea .mapMain .mapLeft .columnitem {
    width: 80%;
    margin-bottom: 0;
  }
  .mapArea .mapMain .mapRigh {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media only screen and (max-width: 991px) {
  .mapArea {
    padding-bottom: 64px;
  }
}

.phoneArea {
  background: #f3f3f5;
  transform: skew(0deg, -5deg);
}

.phoneMain {
  transform: skew(0deg, 5deg);
}

.phoneArea .phoneMain {
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phoneArea .phoneMain .phoneLeft, .phoneArea .phoneMain .phoneRight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.phoneArea .phoneMain .phoneLeft {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.phoneArea .phoneMain .phoneLeftbox {
  width: 50%;
}
.phoneArea .phoneMain .phoneRight {
  width: 50%;
  display: flex;
  justify-content: flex-start;
}
.phoneArea .phoneMain .phone {
  width: 50%;
}
@media only screen and (max-width: 1919px) {
  .phoneArea .phoneMain .phoneLeftbox {
    width: auto;
  }
  .phoneArea .phoneMain .phoneRight {
    align-items: flex-start;
  }
  .phoneArea .phoneMain .phone {
    width: 60%;
  }
}
@media only screen and (max-width: 1199px) {
  .phoneArea .phoneMain .phone {
    width: 60%;
  }
}
@media only screen and (max-width: 991px) {
  .phoneArea .phoneMain .phone {
    width: 80%;
  }
}
@media only screen and (max-width: 767px) {
  .phoneArea .phoneMain {
    flex-direction: column;
    align-items: center;
  }
  .phoneArea .phoneMain .phoneLeft {
    width: 100%;
  }
  .phoneArea .phoneMain .phoneLeft .phoneContent {
    display: inline;
  }
  .phoneArea .phoneMain .phoneRight {
    width: 100%;
    padding-top: 2rem;
    display: flex;
    justify-content: center;
  }
  .phoneArea .phoneMain .phoneRight .phone {
    width: 70%;
  }
}
@media only screen and (max-width: 575px) {
  .phoneArea .phoneMain .phoneRight .phone {
    width: 300px;
  }
}

.hrline {
  transform: skew(0deg, -5deg);
  border-color: #ff7c3b;
}

.evaluateArea {
  background: bottom center no-repeat url(../../images/evaluate_bg.jpg);
  background-size: 100%;
  display: flex;
  position: relative;
}
.evaluateArea .evaluate-box {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 100%;
  margin-top: 12%;
  margin-bottom: 10vw;
}
.evaluateArea .building {
  position: relative;
  left: -6%;
  width: 40%;
}
.evaluateArea .text-box {
  position: absolute;
  width: 35%;
  right: 0;
}
.evaluateArea .big-title {
  font-weight: bold;
  color: #3FC6AC;
  font-size: 2.5rem;
}
.evaluateArea .title-left {
  padding-right: 1.5rem;
}
.evaluateArea .dashline {
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, transparent 0%, transparent 50%, #3FC6AC 50%, #3FC6AC 100%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  margin: 1rem 0;
}
.evaluateArea .list {
  font-size: 1.5rem;
  padding: 0.5rem 0;
}
.evaluateArea .list div {
  display: flex;
  align-items: center;
}
.evaluateArea .list .dot {
  display: inline-block;
  margin-right: 1rem;
  background: #3fc8ae;
  width: 10px;
  height: 10px;
  border-radius: 50px;
}
@media only screen and (max-width: 1919px) {
  .evaluateArea .evaluate-box {
    margin-top: 10%;
  }
}
@media only screen and (max-width: 1199px) {
  .evaluateArea {
    flex-direction: column;
  }
  .evaluateArea .evaluate-box {
    order: 2;
    margin-top: 1rem;
  }
  .evaluateArea .text-box {
    order: 1;
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .evaluateArea .big-title {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 991px) {
  .evaluateArea {
    background-size: 150%;
  }
  .evaluateArea .evaluate-box {
    padding-bottom: 6%;
  }
  .evaluateArea .building {
    width: 70%;
  }
}
@media only screen and (max-width: 575px) {
  .evaluateArea .big-title {
    font-size: 1.2rem;
  }
}

.threePointArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin: -5% 0 2.5% 0;
}
.threePointArea .threePoint {
  display: flex;
  justify-content: center;
  padding: 3rem;
  overflow: hidden;
}
.threePointArea .threePoint img {
  width: 600px;
}
.threePointArea .items {
  position: absolute;
  top: -50px;
}
.threePointArea .items .item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0.3rem #777;
  padding: 1rem 1rem;
  font-size: 20px;
}
.threePointArea .items .item .circle {
  display: flex;
  align-items: center;
  width: 170px;
}
.threePointArea .items .item .circle .dot {
  margin-right: 0.5rem;
  width: 10px;
  height: 10px;
  border-radius: 50px;
}
.threePointArea .items .item .circle .dotg {
  background: #3fc8ae;
}
.threePointArea .items .item .circle .dotb {
  background: #43a8da;
}
.threePointArea .items .item .circle .doto {
  background: #ff7c3b;
}
.threePointArea .items .item1 {
  position: absolute;
  top: 125px;
  left: -250px;
}
.threePointArea .items .item2 {
  position: absolute;
  top: 350px;
  left: -380px;
}
.threePointArea .items .item3 {
  position: absolute;
  top: 575px;
  left: -250px;
}
.threePointArea .items .item4 {
  position: absolute;
  top: 125px;
  right: -250px;
}
.threePointArea .items .item5 {
  position: absolute;
  top: 350px;
  right: -380px;
}
.threePointArea .items .item6 {
  position: absolute;
  top: 575px;
  right: -250px;
}

@media only screen and (max-width: 767px) {
  .threePointArea .threePoint img {
    width: 400px;
  }
}
@media only screen and (max-width: 575px) {
  .threePointArea .threePoint img {
    width: 580px;
  }
}
@media only screen and (max-width: 575px) {
  .threePointArea .threePoint {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .threePointArea .items .item .circle {
    display: flex;
    align-items: center;
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .threePointArea {
    margin-bottom: -85px;
  }
  .threePointArea .items {
    position: relative;
    top: -100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .threePointArea .items .item {
    font-size: 20px;
    position: static;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0.3rem #777;
    padding: 1rem 1rem;
    margin: 0.5rem;
  }
  .threePointArea .items .item .circle {
    display: flex;
  }
}
.programArea {
  background: #f3f3f5;
}
.programArea .programTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem 0.5rem;
}
.programArea .programTitle span .orangekeyword {
  display: inline;
  color: #ff7c3b;
  padding: 0 0.5rem;
  font-size: 3rem;
}
.programArea .items {
  display: flex;
  justify-content: center;
  padding-bottom: 3rem;
}
.programArea .items .item {
  background: #fff;
  padding: 0.5rem 1rem;
  margin: 0 0.5em;
  border-radius: 12px;
  font-size: 1.25rem;
}
.programArea .items .item .itemtitle {
  text-align: center;
  border-radius: 50px;
  margin-bottom: 0.5rem;
}
.programArea .items .item .list {
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
}
.programArea .items .item .list .dot {
  margin-right: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50px;
}
.programArea .items .item1 .itemtitle, .programArea .items .item1 .list .dot {
  background: #bdbdbd;
}
.programArea .items .item2 .itemtitle, .programArea .items .item2 .list .dot {
  background: #43a8da;
}
.programArea .items .item3 .itemtitle, .programArea .items .item3 .list .dot {
  background: #f4cc39;
}
.programArea .items .item4 {
  display: flex;
  flex-direction: column;
}
.programArea .items .item4 .itemtitle, .programArea .items .item4 .list .dot {
  background: #3fc6ac;
}
.programArea .items .item4 .itemTip {
  align-self: center;
  position: relative;
  transform: translateY(25%);
}
.programArea .items .item4 .itemTip .tipbox {
  position: relative;
  top: 100%;
  border-radius: 0 0 8px 8px;
  background: #3fc6ac;
  color: #fff;
  padding: 0 1rem;
}
.programArea .items .item5 .itemtitle, .programArea .items .item5 .list .dot {
  background: #ff7c3b;
}
.programArea .items .item6 .itemtitle, .programArea .items .item6 .list .dot {
  background: #c586ff;
}
.programArea .maintip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 3rem;
}
.programArea .maintip .tipIcon img {
  width: 100px;
  margin: 0.75rem;
}
.programArea .maintip .tipContent {
  background: #ff7c3b;
  color: #fff;
  padding: 0 1rem;
  border-radius: 10px;
  font-size: 1.5rem;
  display: flex;
}
.programArea .maintip .tipContent .tipBox {
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
}
.programArea .maintip .tipContent .tipBox .percent, .programArea .maintip .tipContent .tipBox .price {
  font-size: 2.5rem;
  font-weight: bold;
  color: #FFF176;
  padding: 0 0.5rem;
}

@media only screen and (max-width: 320px) {
  .programArea .programTitle {
    padding: 1rem 0.5rem;
    display: inline;
  }
  .programArea .programTitle span {
    display: inline;
  }
  .programArea .programTitle span .orangekeyword {
    display: inline;
  }
}
/* @media only screen and (max-width: 1199px)
 * .programArea .items
 *  flex-wrap: wrap
 *
 *  .item
 *    width: 30%
 *    margin: 0.5rem 0.5rem
 *
 *  .item4 .itemTip
 *    position: relative
 *    transform: translateY(0%)
 *
 *    .tipbox
 *      position: relative
 *      transform: translateY(100%)
 *      top: 9px */
@media only screen and (max-width: 991px) {
  .programArea .items {
    flex-wrap: wrap;
  }
  .programArea .items .item {
    width: 30%;
    margin: 0.5rem 0.5rem;
  }
  .programArea .items .item4 .itemTip {
    position: relative;
    transform: translateY(0%);
  }
  .programArea .items .item4 .itemTip .tipbox {
    position: relative;
    transform: translateY(100%);
    top: 9px;
  }
}
@media only screen and (max-width: 575px) {
  .programArea .items {
    flex-direction: column;
  }
  .programArea .items .item {
    width: auto;
  }
  .programArea .items .item4 .itemTip .tipbox {
    transform: translateY(0%);
    border-radius: 8px 8px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .programArea .maintip {
    flex-direction: column;
  }
  .programArea .maintip .tipContent {
    flex-direction: column;
  }
}
.feedbackArea {
  background: white url(../../images/feedbackbg.jpg) center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 64px;
  margin-bottom: 10%;
  background-color: #c8f1eb;
}
.feedbackArea .title {
  display: flex;
  justify-content: center;
}
.feedbackArea .feedbackMain {
  display: flex;
  justify-content: center;
  /* margin-top: 30px */
}
.feedbackArea .feedbackMain .items {
  width: 80%;
  display: flex;
  justify-content: center;
}
.feedbackArea .feedbackMain .items .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
  background: #fff;
  margin: 1rem 0.5rem;
  padding: 1rem 1rem;
  border-radius: 10px;
  box-shadow: 0 0 0.25rem rgba(85, 85, 85, 0.3333333333);
}
.feedbackArea .feedbackMain .items .item .fcontent {
  display: flex;
  flex-direction: column;
  font-size: 1.25rem;
  text-align: justify;
}
.feedbackArea .feedbackMain .items .item .fcontent img {
  width: 30px;
  display: block;
  padding-bottom: 1rem;
}
.feedbackArea .feedbackMain .items .item .fcontent .imgfirts {
  align-self: flex-start;
}
.feedbackArea .feedbackMain .items .item .fcontent .imglast {
  align-self: flex-end;
}
.feedbackArea .feedbackMain .items .item .userBox {
  display: flex;
  align-items: center;
}
.feedbackArea .feedbackMain .items .item .userBox .userIcon {
  width: 120px;
}
.feedbackArea .feedbackMain .items .item .userBox .userInfo {
  color: #ff7c3b;
  padding: 0 1rem;
}

@media only screen and (max-width: 1439px) {
  .feedbackArea .feedbackMain .items {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /*margin: 1rem; */
  }
  .feedbackArea .feedbackMain .items .item {
    /*height: 400px; */
    margin: 0.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .feedbackArea .feedbackMain {
    justify-content: center;
    width: 100%;
  }
  .feedbackArea .feedbackMain .items {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
  }
  .feedbackArea .feedbackMain .items .item {
    width: 45%;
    justify-items: center;
    margin: 0.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .feedbackArea .feedbackMain .items {
    flex-direction: column;
  }
  .feedbackArea .feedbackMain .items .item {
    width: auto;
    margin: 0.5rem;
  }
}
@media only screen and (max-width: 1439px) {
  .feedbackArea {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 1199px) {
  .feedbackArea {
    margin-bottom: 70px;
  }
}
.connectArea {
  overflow: hidden;
}
.connectArea .bg {
  display: flex;
  justify-content: center;
  position: relative;
}
.connectArea .bg .earth {
  position: absolute;
  width: 25%;
  z-index: -1;
  top: -1vw;
  right: 15%;
}
.connectArea .bg .pnormal {
  position: absolute;
  background: #3fc6ac;
  border-radius: 50px;
  z-index: -1;
}
.connectArea .bg .point {
  position: absolute;
  z-index: -1;
}
.connectArea .bg .pnormal1 {
  width: 40px;
  height: 40px;
  left: 90px;
  top: 100px;
}
.connectArea .bg .pnormal2 {
  width: 20px;
  height: 20px;
  right: 5%;
  top: 180px;
}
.connectArea .bg .pnormal3 {
  width: 30px;
  height: 30px;
  right: 200px;
  top: 580px;
}
.connectArea .bg .point1 {
  width: 45px;
  height: 45px;
  right: 200px;
  top: 80px;
}
.connectArea .bg .point2 {
  width: 60px;
  height: 60px;
  left: 240px;
  top: 240px;
}
.connectArea .bg .point3 {
  width: 55px;
  height: 55px;
  left: 130px;
  top: 360px;
}
.connectArea .bg .point4 {
  width: 70px;
  height: 70px;
  right: 3%;
  top: 380px;
}
.connectArea .connectMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
}
.connectArea .connectBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.connectArea .connectBox .connectItem {
  display: flex;
  width: 30%;
  padding: 0.5rem 0;
}
.connectArea .connectBox .connectItem label {
  white-space: nowrap;
  padding-right: 1rem;
  width: 100px;
  text-align: end;
}
.connectArea .connectBox .connectItem label span {
  color: #cc0000;
}
.connectArea .connectBox .connectItem input {
  background: #f3f3f5;
  border-radius: 50px;
  border: 0;
}
.connectArea .connectBox .connectItem textarea {
  border-radius: 15px;
  border: 0;
  background: #f3f3f5;
  resize: none;
}
.connectArea .connectBox .btnBox {
  padding-top: 100px;
  padding-bottom: 100px;
}
.connectArea .connectBox .btnBox a {
  padding: 0.5rem 3rem;
  display: inline-block;
  transition: all 0.3s;
}
.connectArea .connectBox .btnBox a:hover {
  box-shadow: 0 0 6px #ccc;
  transform: scale(1.025);
}

@media only screen and (max-width: 1919px) {
  .connectArea .bg .earth {
    top: 5vw;
  }
}
@media only screen and (max-width: 1199px) {
  .connectArea .bg .earth {
    top: 12vw;
  }
}
@media only screen and (max-width: 991px) {
  .connectArea .bg .earth {
    right: -5%;
    width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  .connectArea .bg .earth {
    right: -15%;
    top: 18vw;
    width: 60%;
  }
}
@media only screen and (max-width: 575px) {
  .connectArea .bg .earth {
    top: 50vw;
  }
  .connectArea .bg .earth img {
    position: relative;
    right: -30%;
  }
}
@media only screen and (max-width: 991px) {
  .connectArea .bg .point2 {
    left: 20%;
    top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .connectArea .bg .pnormal1 {
    left: 20px;
    top: 240px;
  }
  .connectArea .bg .pnormal3 {
    right: 80px;
  }
  .connectArea .bg .point1 {
    left: 10px;
    top: 80px;
  }
  .connectArea .bg .point2 {
    left: 80%;
    top: 90px;
  }
  .connectArea .bg .point3 {
    left: 5%;
    top: 640px;
  }
  .connectArea .bg .point4 {
    right: 5%;
    top: 370px;
  }
}
@media only screen and (max-width: 575px) {
  .connectArea .bg .pnormal1, .connectArea .bg .pnormal3 {
    display: none;
  }
  .connectArea .bg .point3, .connectArea .bg .point4 {
    display: none;
  }
}
@media only screen and (max-width: 1199px) {
  .connectArea .connectBox .connectItem {
    padding: 0.5rem 0.5rem;
    width: 40%;
  }
}
@media only screen and (max-width: 991px) {
  .connectArea .connectBox .connectItem {
    padding: 0.5rem 0.5rem;
    width: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .connectArea .connectBox .connectItem {
    padding: 0.5rem 0.5rem;
    width: 70%;
  }
}
@media only screen and (max-width: 575px) {
  .connectArea .connectBox .connectItem {
    flex-direction: column;
    padding: 0.2rem 0.5rem;
    width: 90%;
  }
}
.footer {
  background: #f3f3f5;
  padding: 1.5rem 1rem 0.75rem 1rem;
}
.footer .footerline1 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.footer .footerline1 .flbox {
  padding: 1rem 1.5rem;
}
.footer .footerline1 .icon {
  width: auto;
  display: flex;
  justify-content: flex-start;
}
.footer .footerline1 .icon img {
  width: 180px;
}
.footer .footerline1 .info {
  display: inline;
  width: 40%;
  color: #555;
  line-height: 30px;
}
.footer .footerline1 .contactBox {
  /*width: 40%; */
}
.footer .footerline1 .contactBox .cbusiness .binfo {
  display: flex;
  flex-direction: column;
  color: #555;
  padding: 0.5rem 0;
}
.footer .footerline1 .contactBox .cbusiness .binfo div {
  padding: 0.25rem 0;
}
.footer .footerline2 {
  display: flex;
  justify-content: flex-start;
}
.footer .footerline2 a {
  padding: 0 1rem;
  color: #555;
}
.footer .footerline2 .kindLine {
  color: #d3d3d5;
}
.footer .footerline2 .copyright {
  padding: 0 1rem;
  color: #555;
}

@media only screen and (max-width: 767px) {
  .footer .footerline1 {
    flex-direction: column;
    align-items: center;
  }
  .footer .footerline1 .info, .footer .footerline1 .contactBox {
    width: 100%;
  }
}
#hiddenReact {
  padding: 0 1rem;
  color: #555;
  text-decoration: none;
}
#hiddenReact:hover {
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  .footer .footerline2 {
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer .footerline2 a {
    padding: 0 0.5rem;
  }
  .footer .footerline2 .kindLinexsnone {
    display: none;
  }
}
@media only screen and (max-width: 610px) {
  .footer .footerline2 .copyright {
    padding: 0.5rem 0.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer {
    padding: 1.5rem 0.25rem 0.75rem 0.25rem;
  }
}
/*關於威睿內容 */
.mainCompany {
  background: white url(../../images/cpbg.jpg) center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.mainCompany .mainCompanyBox {
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainCompany .mainCompanyBox .map .mapsize {
  width: 50vw;
}
.mainCompany .mainCompanyBox .slogan {
  font-size: 3rem;
  font-weight: bold;
  display: flex;
  padding: 1rem 0;
}
.mainCompany .mainCompanyBox .slogan .sbox {
  padding: 0 1rem;
}
.mainCompany .mainCompanyBox .slogan .s1 {
  color: #3fc6ac;
}
.mainCompany .mainCompanyBox .slogan .s2 {
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .mainCompany .mainCompanyBox .map .mapsize {
    width: 70vw;
  }
}
@media only screen and (max-width: 459px) {
  .mainCompany .mainCompanyBox .map .mapsize {
    width: 90vw;
  }
}
@media only screen and (max-width: 767px) {
  .mainCompany .mainCompanyBox .slogan {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 459px) {
  .mainCompany .mainCompanyBox .slogan {
    flex-direction: column;
  }
}
.mainContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainContent .cp {
  padding-top: 2rem;
}
.mainContent .cp .cpimg {
  width: 60px;
}
.mainContent .paragraph {
  padding: 1rem 0;
}
.mainContent .paragraph .contentBox {
  display: inline;
}
.mainContent .paragraph .contentBox .orangeWord {
  display: inline;
  color: #ff7c3b;
}
.mainContent .mw {
  font-size: 1.75rem;
  width: 50%;
  line-height: 3rem;
}
.mainContent .btbox {
  padding-bottom: 3rem;
}

@media only screen and (max-width: 1439px) {
  .mainContent .mw {
    width: 70%;
    font-size: 1.5rem;
    line-height: 2.75rem;
  }
}
@media only screen and (max-width: 1199px) {
  .mainContent .mw {
    width: 80%;
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}
@media only screen and (max-width: 459px) {
  .mainContent .mw {
    width: 90%;
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}
.fixedBtnList {
  position: fixed;
  right: 22px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.fixedBtn {
  border-radius: 50px;
  width: 65px;
  margin: 10px 0;
  padding: 5px;
  box-shadow: 0 0 0 1px #fff;
}
.fixedBtn:hover {
  filter: brightness(85%);
}

.gotop, .lineBtn {
  background: #3fc6ac;
}

.fbBtn {
  background: #43a8da;
}

.chatBtn {
  background: #ff7c3b;
}

@keyframes rotation360 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes trainAni {
  0% {
    width: 90%;
    height: 90%;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 90%;
    height: 90%;
  }
}
@keyframes orangekeywordAni {
  0% {
    transform: rotate(0deg);
  }
  2% {
    transform: rotate(-5deg);
  }
  3% {
    transform: rotate(0deg);
  }
  4% {
    transform: rotate(-5deg);
  }
  5% {
    transform: rotate(0deg);
  }
}
/*SEO優化 */
.logo-box {
  margin: 0;
}

/*隱私權政策 */
.banner-type-thin {
  background: white url(../../images/cpbg.jpg) center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
}
.banner-type-thin .bannerBox .slogan {
  font-size: 3rem;
  font-weight: bold;
  display: flex;
  padding: 1rem 0;
  justify-content: center;
}
.banner-type-thin .bannerBox .slogan .s1 {
  color: #3fc6ac;
  text-shadow: 0 0 9px #fff;
}
.banner-type-thin .bannerBox .slogan .s2 {
  color: #fff;
  text-shadow: 0 0 9px #68928a;
}
.banner-type-thin .bannerBox .slogan .sbox {
  padding: 0 1rem;
}

@media only screen and (max-width: 767px) {
  .banner-type-thin .bannerBox .slogan {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 459px) {
  .banner-type-thin .bannerBox .slogan {
    flex-direction: column;
  }
}
.privacy-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.privacy-title {
  /*background: #3fc6ac; */
  width: 100%;
  text-align: center;
  color: #000;
  padding: 1rem 0;
  font-size: 1.5rem;
}

.privacy-content .privacy-main .cpimg-box {
  padding-bottom: 1rem;
}
.privacy-content .privacy-main .cpimg-box .privacy-cpimg {
  width: 60px;
}

.privacy-main {
  text-align: start;
  width: 80%;
  font-size: 1rem;
  padding-bottom: 2rem;
  line-height: 2rem;
}
.privacy-main .ft-bold {
  font-weight: bold;
}
.privacy-main .li-none-style {
  list-style-type: none;
  margin-left: -1rem;
  text-indent: -1.625rem;
}

@media only screen and (max-width: 767px) {
  .privacy-main {
    width: 95%;
  }
}

/*# sourceMappingURL=main.css.map */