@import url('keyframes.css');
@import url('hover.css');
@import url('media.css');

html {
  /* rem根部单位 */
  font-size: 10px;
}

* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

ul {
  list-style: none;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

div,
p,
a,
img,
li,
ul,
span,
main {
  box-sizing: border-box;
}

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

nav#nav {
  box-sizing: border-box;
  width: 100%;
  background: #F6AB00;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #FFFFFF;
  padding: 14px 19.5%;
}

nav#nav .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 24px;
}

nav#nav .menu .item {
  flex: 1;
  padding: 0 34px;
  border-right: 1px solid #fff;
  text-align: center;
}

nav#nav .menu .item a {
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

nav#nav .menu .item:last-child {
  border-right: 0;
}

nav#nav .menu .item:first-child {
  margin-left: 0;
}

.site_footer {
  background: #F6AB00;
  padding: 80px 19.5% 10px 19.5%;
  font-family: Microsoft JhengHei-Regular;
  color: #FFFFFF;
  font-size: 1.6rem;
}

.site_footer .copyright {
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #FFFFFF;
  padding: 26px 5% 38px 5%;
  text-align: center;
}

.site_footer .up {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(232, 232, 232, 0.43);
}

.site_footer .up .left {
  flex: none;
  margin-right: 20px;
  min-width: 240px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 30px;
}

.site_footer .up .left .logo {
  width: 100%;
  max-width: 220px;
  margin-bottom: 26px;
}

.site_footer .up .right {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 200px;
}

.site_footer .up .right ul {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 30px;
}

.site_footer .up .right ul:first-child {
  flex: none;
  margin-right: 20px;
}

.site_footer .up .right ul:first-child li {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  line-height: 2;
}

.site_footer .up .right ul:first-child li a {
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #FFFFFF;
}

.site_footer .up .right ul:first-child li img {
  height: 20px;
  height: fit-content;
  max-width: 20px;
  margin-right: 10px;
  flex: none;
}

.site_footer .up .right ul:first-child li:first-child img {
  padding: 0 2px;
}

.site_footer .up .right ul:first-child li:last-child img {
  margin-top: 5px;
}

.site_footer .up .right ul:first-child li span {
  display: inline-block;
  margin-top: -5px;
}

.site_footer .up .right ul:last-child {
  flex: none;
}

.site_footer .up .right ul:last-child .item a {
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #FFFFFF;
}

.topsign_mo {
  width: 100%;
  padding: 0 15px;
  background-image: url('../assets/home/haikei.png');
  color: #fff;
  display: none;
  height: 80px;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding: 20px 30px;
  z-index: 800;
  position: relative;
}

.topsign_mo .change_lang {
  overflow: hidden;
  flex: none;
  position: absolute;
  top: -5px;
  right: 8rem;
}

.topsign_mo .change_lang .change_lang_icon {
  width: 25px;
  height: fit-content;
}

.topsign_mo .menu_mo {
  flex: none;
  overflow: hidden;
  background: #FFA514;
  position: fixed;
  top: 20px;
  right: 30px;
}

.topsign_mo .menu_mo .menu_icon {
  width: 25px;
  height: fit-content;
}

.topsign_mo .logo_m {
  width: 130px;
  flex: none;
  height: fit-content;
}

.topsign_mo .menu_btn {
  padding: 10px;
  border-radius: 5px;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.topsign_mo .menu_btn:hover {
  background: #ffd58894;
}

.topsign_mo .menu_btn:active {
  background: #b4873294;
}

.nav_menu {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  right: -100vw;
  z-index: 1000;
  transition: all 0.5s;
  pointer-events: none;
}

.nav_menu ul {
  pointer-events: all;
  width: 80vw;
  height: 100%;
  background: #ffd588c0;
  position: absolute;
  backdrop-filter: blur(5px);
  right: 0;
  top: 0;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
}

.nav_menu ul .close_btn {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.nav_menu ul .close_btn .btn_close {
  flex: none;
  padding: 10px;
  border-radius: 5px;
}

.nav_menu ul .close_btn .btn_close:hover {
  background: #fce2b294;
}

.nav_menu ul .close_btn .btn_close:active {
  background: #b4873294;
}

.nav_menu ul .close_btn img {
  width: 25px;
  height: fit-content;
}

.nav_menu ul .item,
.nav_menu ul li a {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  flex: none;
  width: 100%;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: Segoe UI-Regular, Segoe UI;
  color: #fff;
  white-space: nowrap;
}

.nav_menu ul .item img,
.nav_menu ul li a img {
  flex: none;
  width: 25px;
  height: fit-content;
}

.nav_menu ul a,
.nav_menu ul .padding {
  padding: 14px 0;
  transition: all 0.5s;
}

.nav_menu ul .item a,
.nav_menu ul .item_action {
  transition: all 0.3s;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.nav_menu ul .item a:hover,
.nav_menu ul .item_action:hover {
  font-size: 2.2rem;
}

.mask_background {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: none;
  opacity: 0;
  width: 100vw;
  height: 100%;
  z-index: 500;
}

.change_lan_menu {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  left: -100vw;
  transition: all 0.5s;
  z-index: 1000;
  pointer-events: none;
}

.change_lan_menu ul {
  pointer-events: all;
  width: 80vw;
  height: 100%;
  background: #ffd588c0;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 30px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
}

.change_lan_menu ul li {
  width: 100%;
  padding: 10px 0;
}

.change_lan_menu ul .close_btn {
  cursor: pointer;
  flex: none;
  width: fit-content;
  user-select: none;
  -webkit-user-select: none;
}

.change_lan_menu ul .close_btn .btn_close {
  padding: 10px;
  border-radius: 5px;
}

.change_lan_menu ul .close_btn .btn_close:hover {
  background: #fce2b294;
}

.change_lan_menu ul .close_btn .btn_close:active {
  background: #b4873294;
}

.change_lan_menu ul .close_btn img {
  width: 25px;
  height: fit-content;
}

.change_lan_menu ul .lan_btn a {
  font-size: 2rem;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-family: Segoe UI-Regular, Segoe UI;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.5s;
}

.change_lan_menu ul .lan_btn a:hover {
  font-size: 2.5rem;
}

.topsign {
  width: 100%;
}

.topsign .tip {
  font-size: 1.8rem;
  font-family: Segoe UI-Regular, Segoe UI;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  background-color: #0099FF;
  padding: 12px 5%;
}

.topsign .sign {
  padding: 5px 19.5% 10px 19.5%;
  background-image: url('../assets/home/haikei.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.topsign .sign .logo {
  min-width: 80px;
  flex: none;
  margin-right: 20px;
}

.topsign .sign .right {
  flex: 1;
  min-width: 300px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.topsign .sign .right .box {
  background: #F53F9F;
  margin-right: 4rem;
  border-radius: 11px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

.topsign .sign .right ul {
  margin: 0 1rem;
}

.topsign .sign .right ul li {
  flex: none;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  margin-bottom: 12px;
  color: #fff;
}

.topsign .sign .right ul li span {
  font-size: 12px;
}

.topsign .sign .right ul li b {
  display: block;
}

.topsign .sign .right ul li img {
  flex: none;
}

.topsign .sign .right ul li a {
  font-size: 2rem;
  font-family: Segoe UI-Bold, Segoe UI;
  font-weight: bold;
  color: #fff;
  margin-left: 1rem;
  line-height: 1;
}

.topsign .sign .right ul li .btn {
  width: 120px;
  height: 30px;
  border: none;
  display: flex;
  color: #3D3D3D;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  background: #fff;
  border-radius: 10px;
}

.topsign .sign .right ul li .btn img {
  margin-right: 5px;
}

.topsign .sign .right .rs {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.lang a {
  width: 70px;
  margin-top: -5px;
  text-align: center;
  color: #fff;
  border-radius: 0 0 9px 9px;
  padding: 1rem;
  background: linear-gradient(180deg, #7DC31E 0%, #A4DC59 100%);
}

.lang a:nth-child(2) {
  background: linear-gradient(180deg, #95CE48 0%, #EBEBEB 100%);
  color: #333333;
  border: 1px solid #A4DC59;
  border-top: none;
  margin-left: 1rem;
}

.topsign .sign .right .sc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.topsign .sign .right .sc a {
  margin: 0.5rem;
}

.container {
  padding: 45px 19.5%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  background: #fff;
}

.container .title {
  width: 100%;
  border-left: 8px solid #F33799;
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #F33799;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(-45deg, #f3add2 0, #f3add2 5%, transparent 5%, transparent 25%, #f3add2 25%, #f3add2 30%, transparent 30%, transparent 50%, #f3add2 50%, #f3add2 55%, transparent 55%, transparent 75%, #f3add2 75%, #f3add2 80%, transparent 80%, transparent 100%);
  background-size: 28px 28px;
  margin-bottom: 60px;
  padding: 8px 0;
}

.container .title2 {
  width: 100%;
  border-left: 8px solid #0099FF;
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #0099FF;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(-45deg, #b2dcf8 0, #b2dcf8 5%, transparent 5%, transparent 25%, #b2dcf8 25%, #b2dcf8 30%, transparent 30%, transparent 50%, #b2dcf8 50%, #b2dcf8 55%, transparent 55%, transparent 75%, #b2dcf8 75%, #b2dcf8 80%, transparent 80%, transparent 100%);
  background-size: 28px 28px;
  margin-bottom: 60px;
  padding: 8px 0;
}

.container .title3 {
  width: 100%;
  border-left: 8px solid #F6AB00;
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #F6AB00;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(-45deg, #FFE7AF 0, #FFE7AF 5%, transparent 5%, transparent 25%, #FFE7AF 25%, #FFE7AF 30%, transparent 30%, transparent 50%, #FFE7AF 50%, #FFE7AF 55%, transparent 55%, transparent 75%, #FFE7AF 75%, #FFE7AF 80%, transparent 80%, transparent 100%);
  background-size: 28px 28px;
  margin-bottom: 60px;
  padding: 8px 0;
}

.container .title4 {
  width: 100%;
  border-left: 8px solid #008D3A;
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #008D3A;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(-45deg, #62f49e 0, #62f49e 5%, transparent 5%, transparent 25%, #62f49e 25%, #62f49e 30%, transparent 30%, transparent 50%, #62f49e 50%, #62f49e 55%, transparent 55%, transparent 75%, #62f49e 75%, #62f49e 80%, transparent 80%, transparent 100%);
  background-size: 28px 28px;
  margin-bottom: 60px;
  padding: 8px 0;
}

.container .desc {
  width: 100%;
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
}

.container .inner {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
}

.c1 {
  background: #FDE2F0;
}

.c1 ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.c1 ul li {
  flex: none;
  width: 33.33%;
}

.c1 ul li img {
  margin: 0;
  width: fit-content;
  height: fit-content;
}

.c2 {
  background: #FFEEA4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.c2 ul {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  justify-items: center;
  overflow: hidden;
}

.c2 ul li {
  width: 100%;
}

.c2 ul li:first-child .c_title {
  background: #59d0ff;
}

.c2 ul li:nth-child(2) .c_title {
  background: #8afdb4;
}

.c2 ul li:nth-child(3) .c_title {
  background: #b3df71;
}

.c2 ul li:nth-child(4) .c_title {
  background: #ffce96;
}

.c2 ul li:nth-child(5) .c_title {
  background: #ff88c5;
}

.c2 ul li:nth-child(6) .c_title {
  background: #9ccaff;
}

.c2 ul .card {
  flex: 1;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: max-content;
}

.c2 ul .card .btn_c {
  width: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.c2 ul .card .btn_c .btn {
  border-radius: 5px;
  padding: 3px 60px;
}

.c2 ul .card .c_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  box-sizing: border-box;
  padding: 5px 15px;
  font-size: 1.7rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 0;
}

.c2 ul .card .c_title .icon {
  width: 26px;
  height: 24px;
  flex: none;
  object-fit: cover;
}

.c2 ul .card img {
  width: 100%;
  height: 173px;
}

.c2 ul .card .lit_title {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #303030;
  padding: 14px 0 7px 15px;
}

.c2 ul .card .desc {
  width: 100%;
  height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding: 0 15px;
  margin-bottom: 30px;
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #303030;
}

.btn {
  background: #fff;
  border-radius: 10px;
  transition: all 0.5s;
  color: #0099FF;
  border: 1px solid #0099FF;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  text-align: center;
  width: fit-content;
}

.btn a {
  color: #0099FF;
}

.btn:hover {
  background: #0099FF;
  color: #fff;
}

.btn:hover a {
  color: #fff;
}

.btn:active {
  background: #bee5ff;
  color: #fff;
}

.btn:active a {
  color: #fff;
}

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

.c3 {
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.c3 .inner ul {
  margin-bottom: 40px;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 30px;
  justify-items: center;
  overflow: hidden;
}

.c3 .inner ul li {
  width: 100%;
}

.c3 .inner ul li .card {
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex: none;
  padding: 14px 18px;
  position: relative;
}

.c3 .inner ul li .card .arrow {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s;
  width: 27px;
  height: fit-content;
}

.c3 .inner ul li .card .lit_title {
  width: 100%;
  padding: 15px 0;
  font-size: 2.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  text-align: left;
  line-height: 2.8rem;
}

.c3 .inner ul li .card .icon {
  flex: none;
  height: 120px;
}

.c3 .inner ul li .card .icon img {
  flex: none;
  max-height: 86px;
  max-width: 100px;
  width: fit-content;
  height: fit-content;
}

.c3 .inner ul li .card .desc {
  flex: 1;
  height: 100%;
  width: 100%;
}

.c3 .inner ul li .card .desc p {
  flex: 1;
  min-height: 160px;
  max-height: 160px;
  height: 100%;
  width: 100%;
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 2.4rem;
  background: #fff;
  padding: 10px 16px;
  overflow: hidden;
  border-radius: 10px;
}

.c3 .inner ul li:nth-child(2n+1) .card {
  background: #B9E2FE;
}

.c3 .inner ul li:nth-child(2n+1) .lit_title {
  color: #0099FF;
}

.c3 .inner ul li:nth-child(2n) .card {
  background: #FFE7AF;
}

.c3 .inner ul li:nth-child(2n) .lit_title {
  color: #F6AB00;
}

.hidderOpen {
  transform: rotate(90deg);
}

.c4 {
  overflow: hidden;
  background: #CAE7A3;
}

.c4 .btn_c {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.c4 .btn_c .btn {
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  padding: 17px 60px;
  border-radius: 5px;
  border: 1px solid #008D3A;
  color: #008D3A;
  background: none;
}

.c4 .btn_c .btn:hover {
  background: #008D3A;
  color: #fff;
}

.c4 .swiper {
  width: 100%;
}

.c4 .pagination_hidder {
  width: 100%;
  padding: 8px 12px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s;
  background: #8CC63F;
  border: 1px #8CC63F solid;
  margin-bottom: 10px;
  display: none;
  align-items: center;
  justify-content: space-between;
}

.c4 .pagination_hidder .arrow {
  display: block;
  transition: all 0.5s;
}

.c4 .pagination_hidder:hover {
  background: #8CC63F;
  color: #fff;
  transition: all 0.1s;
}

.c4 .pagination_hidder:active {
  background: #fff;
  color: #8CC63F;
}

.c4 .swiper-wrapper .itemlist {
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  justify-items: center;
  overflow: hidden;
}

.c4 .swiper-wrapper .itemlist li {
  width: 100%;
  background: #98c455;
  overflow: hidden;
  padding: 18px 13px 0 13px;
  cursor: default;
}

.c4 .swiper-wrapper .itemlist li .img {
  width: 100%;
  padding: auto;
  overflow: hidden;
  border: 2px #fff solid;
  cursor: default;
}

.c4 .swiper-wrapper .itemlist li .img div {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.c4 .swiper-wrapper .itemlist li .name {
  text-align: center;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  padding: 20px 0 20px 0;
}

.c4 .pagination_container {
  height: auto !important;
}

.ad_container {
  background: #FDE2F0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 358px;
}

.ad_container .ad_cover {
  background: #FDE2F0;
  padding: 58px 19.5% 77px 19.5%;
  height: 100%;
  width: 100%;
  position: relative;
}

.ad_container .ad_cover .action {
  width: fit-content;
  height: fit-content;
  width: 366px;
  height: 296px;
  position: absolute;
  right: 19.5%;
  bottom: 0;
  z-index: 300;
  pointer-events: none;
  transition: all 0.5s;
}

.ad_container .ad_cover .ad_inner {
  z-index: 200;
  position: absolute;
  top: 58px;
  left: 19.5%;
  right: 25%;
  bottom: 77px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
}

.ad_container .ad_cover .ad_inner .white_bg {
  flex: 1;
  width: 98%;
  height: 90%;
  background: #fff;
  z-index: 10;
  position: absolute;
  left: 8px;
  top: 8px;
}

.ad_container .ad_cover .ad_inner .ad_title {
  flex: none;
  font-size: 3.6rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #F33799;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  margin-bottom: 30px;
}

.ad_container .ad_cover .ad_inner .dash_bg {
  position: absolute;
  z-index: 100;
  background: linear-gradient(-45deg, #f3add2 0, #f3add2 5%, transparent 5%, transparent 25%, #f3add2 25%, #f3add2 30%, transparent 30%, transparent 50%, #f3add2 50%, #f3add2 55%, transparent 55%, transparent 75%, #f3add2 75%, #f3add2 80%, transparent 80%, transparent 100%);
  background-size: 28px 28px;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
}

.ad_container .ad_cover .ad_inner .info {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  z-index: 999;
}

.ad_container .ad_cover .ad_inner .info .left,
.ad_container .ad_cover .ad_inner .info .right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: none;
}

.ad_container .ad_cover .ad_inner .info .left .phone {
  flex: 1;
}

.ad_container .ad_cover .ad_inner .info .left .phone p:first-child {
  padding: 4px 10px;
  font-size: 1.4rem;
  font-family: Segoe UI-Bold, Segoe UI;
  font-weight: bold;
  color: #FFFFFF;
  background: #F33799;
  border-radius: 3px;
  width: fit-content;
}

.ad_container .ad_cover .ad_inner .info .left .phone p:last-child {
  font-size: 4rem;
  font-family: Segoe UI-Bold, Segoe UI;
  font-weight: bold;
  color: #F33799;
  white-space: nowrap;
}

.ad_container .ad_cover .ad_inner .info .left img {
  width: 60px;
  height: 62px;
  flex: none;
  margin-right: 20px;
}

.ad_container .ad_cover .ad_inner .info .right {
  font-size: 2rem;
  font-family: Segoe UI-Bold, Segoe UI;
  font-weight: bold;
  color: #FFFFFF;
  white-space: nowrap;
  background: #F33799;
  padding: 20px 27px;
}

.ad_container .ad_cover .ad_inner .info .right img {
  width: 38px;
  height: 26px;
  flex: none;
  margin-right: 18px;
}

.hvr-underline-from-left:before {
  transform: translateY(3px);
  background: #fff !important;
}

.hvr-underline-from-right:before {
  transform: translateY(3px);
  background: #fff !important;
}

.repair_top {
  width: 100%;
  margin-bottom: 30px;
}

.view {
  padding: 0 19.5%;
}

.view .crumb {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 3rem;
  margin-bottom: 40px;
}

.view .crumb .hvr-underline-from-left:before {
  transform: translateY(3px);
  background: #4397f7 !important;
}

.view .crumb a {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 3rem;
}

.view .crumb a:hover {
  color: #4397f7;
}

.view .view_title {
  border-bottom: 2px solid #4397f7;
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(-45deg, #60bcf0 0, #60bcf0 5%, #6ac1f0 5%, #6ac1f0 25%, #60bcf0 25%, #60bcf0 30%, #6ac1f0 30%, #6ac1f0 50%, #60bcf0 50%, #60bcf0 55%, #6ac1f0 55%, #6ac1f0 75%, #60bcf0 75%, #60bcf0 80%, #6ac1f0 80%, #6ac1f0 100%);
  background-size: 28px 28px;
  margin-bottom: 60px;
  padding: 8px 0;
}

.view h2 {
  font-size: 2.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #0099FF;
  line-height: 3rem;
  margin-bottom: 30px;
}

.view .desc {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 3rem;
  margin-bottom: 50px;
}

.view .desc p {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: none;
}

.view .desc p::before {
  content: url('../assets/repair/sq.png');
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: translateY(-2px);
  margin-right: 10px;
}

.view .repair_list .list_title {
  font-size: 2.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #0099FF;
  line-height: 3rem;
  margin-bottom: 44px;
}

.view .repair_list .list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-bottom: 100px;
}

.view .repair_list .list .list_item {
  border-top: 1px solid #0099FF;
  counter-increment: index;
  width: 100%;
  position: relative;
}

.view .repair_list .list .list_item:last-child {
  border-bottom: 1px solid #0099FF;
}

.view .repair_list .list .list_item::before {
  content: counter(index);
  width: 50px;
  height: 50px;
  background: #0099FF;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 2.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 3rem;
  float: left;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 20px;
}

.view .repair_list .list .list_item .item_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 26px 0 26px 73px;
}

.view .repair_list .list .list_item .item_inner .item_title {
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #0099FF;
  line-height: 3rem;
  flex: 1;
  width: 200px;
  margin-right: 40px;
}

.view .repair_list .list .list_item .item_inner .desc {
  flex: 1;
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 3rem;
  margin-right: 40px;
}

.view .repair_list .list .list_item .item_inner .img {
  width: 223px;
  height: 154px;
  overflow: hidden;
}

.view .repair_list .list .list_item .item_inner .img img {
  width: max-content;
  height: fit-content;
}

.design_list {
  margin-bottom: 100px;
}

.design_list .list_title {
  font-size: 2.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #22B573;
  line-height: 3rem;
  padding: 40px 0;
  text-align: center;
  text-transform: capitalize;
}

.design_list .list {
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  overflow: hidden;
}

.design_list .list li {
  width: 100%;
  background: #57b279;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: nowrap;
}

.design_list .list li .img {
  flex: none;
  width: 100%;
  height: 300px;
  border: 1px solid #EFEFEF;
  border: 1px #fff solid;
  overflow: hidden;
}

.design_list .list li .img div {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.design_list .list li .title {
  flex: none;
  text-align: center;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.design_top {
  position: relative;
  margin-bottom: 30px;
  min-height: 150px;
  height: 20vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.design_top .text {
  font-size: 4.8rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #FFFFFF;
  position: absolute;
  left: 19.5%;
  top: 35%;
}

.design .contact_card {
  background: url('../assets/design/mid.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 40px 50px 32px 50px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.design .contact_card .contact_title {
  font-size: 2.4rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 25px;
  flex: none;
}

.design .contact_card ul {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: nowrap;
}

.design .contact_card ul li {
  flex: none;
}

.design .contact_card ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  color: #FFFFFF;
  font-size: 2rem;
  font-family: Segoe UI-Bold, Segoe UI;
  font-weight: bold;
}

.design .contact_card ul li a img {
  width: 40px;
  height: 40px;
  flex: none;
  margin-right: 14px;
}

.design .view_title {
  background: linear-gradient(-45deg, #52ac78 0, #52ac78 5%, #57b279 5%, #57b279 25%, #52ac78 25%, #52ac78 30%, #57b279 30%, #57b279 50%, #52ac78 50%, #52ac78 55%, #57b279 55%, #57b279 75%, #52ac78 75%, #52ac78 80%, #57b279 80%, #57b279 100%);
  background-size: 28px 28px;
  border-bottom: 2px solid #1e2082;
}

.window .view_title {
  background: linear-gradient(-45deg, #7abf53 0, #7abf53 5%, #98c455 5%, #98c455 25%, #7abf53 25%, #7abf53 30%, #98c455 30%, #98c455 50%, #7abf53 50%, #7abf53 55%, #98c455 55%, #98c455 75%, #7abf53 75%, #7abf53 80%, #98c455 80%, #98c455 100%);
  background-size: 28px 28px;
  border-bottom: 2px solid #1e2082;
}

.window .desc {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 3rem;
}

.window .desc .label {
  display: inline-block;
  margin-right: 20px;
  width: 7.5rem;
  font-weight: bold;
}

.window .window_desc {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 3rem;
}

.window .list_title {
  color: #8CC63F;
}

.window .list .list_item {
  background: #98c455;
  overflow: hidden;
  padding: 18px 13px 0 13px;
}

.window .list .list_item .title {
  text-align: center;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  padding: 27px 0 10px 0;
}

.drege .view_title {
  background: linear-gradient(-45deg, #e8a73a 0, #e8a73a 5%, #ebae3c 5%, #ebae3c 25%, #e8a73a 25%, #e8a73a 30%, #ebae3c 30%, #ebae3c 50%, #e8a73a 50%, #e8a73a 55%, #ebae3c 55%, #ebae3c 75%, #e8a73a 75%, #e8a73a 80%, #ebae3c 80%, #ebae3c 100%);
  background-size: 28px 28px;
  border-bottom: 2px solid #1e2082;
}

.drege .drege_contant {
  margin-bottom: 40px;
  height: 385px;
  background: url('../assets/drege/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 50px 75px;
  position: relative;
  z-index: 200;
}

.drege .drege_contant .action {
  position: absolute;
  right: 0;
  bottom: 0;
  width: fit-content;
  height: fit-content;
  z-index: 100;
}

.drege .drege_contant .title_r {
  font-size: 4.8rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: 800;
  color: #AE003F;
  top: 0;
  left: 0;
}

.drege .drege_contant .title_b {
  top: 80px;
  left: 0;
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #024E9F;
}

.drege .drege_contant .mid {
  position: relative;
  top: 170px;
  width: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 300;
}

.drege .drege_contant .mid a {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 330px !important;
}

.drege .drege_contant .mid a img {
  flex: none;
  width: 45px;
  height: fit-content;
  margin-right: 20px;
}

.drege .drege_contant .mid a p {
  flex: none;
  transform: translateY(6px);
}

.drege .drege_contant .mid .whatsapp {
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #1D2087;
  cursor: pointer;
}

.drege .drege_contant .mid .phone {
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #AE003F;
}

.drege .drege_contant .desc_b {
  top: 220px;
  left: 0;
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  position: relative;
}

.drege .drege_contant .desc_b .text {
  color: #fff;
}

.drege .drege_contant .desc_b .shadow {
  text-stroke: 6px #1f4c99 !important;
  -webkit-text-stroke: 6px #1f4c99 !important;
}

.drege .drege_contant .desc_b_mini {
  display: none;
  top: 180px;
  left: 0;
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  position: relative;
}

.drege .drege_contant .desc_b_mini .text {
  color: #fff;
}

.drege .drege_contant .desc_b_mini .shadow {
  text-stroke: 6px #1f4c99 !important;
  -webkit-text-stroke: 6px #1f4c99 !important;
}

.drege .drege_contant .shadow_text {
  position: relative;
  z-index: 300;
}

.drege .drege_contant .shadow_text .text,
.drege .drege_contant .shadow_text .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  height: fit-content;
}

.drege .drege_contant .shadow_text .text {
  z-index: 50;
  text-shadow: 1px 1px 2px #000;
}

.drege .drege_contant .shadow_text .shadow {
  z-index: 20;
  text-stroke: 10px #fff;
  -webkit-text-stroke: 10px #fff;
}

.drege .dredge_mid {
  width: 100%;
  margin-bottom: 68px;
}

.drege .design_list {
  margin-bottom: 46px;
}

.drege .design_list .list_item {
  background: #F6AB00;
}

.drege .design_list .list_item .img {
  border-top: #1e2082 1px solid;
}

.drege .desc {
  margin-bottom: 97px;
}

.electricity .view_title {
  background: linear-gradient(-45deg, #dc3d96 0, #dc3d96 5%, #e04997 5%, #e04997 25%, #dc3d96 25%, #dc3d96 30%, #e04997 30%, #e04997 50%, #dc3d96 50%, #dc3d96 55%, #e04997 55%, #e04997 75%, #dc3d96 75%, #dc3d96 80%, #e04997 80%, #e04997 100%);
  background-size: 28px 28px;
  border-bottom: 2px solid #1e2082;
}

.electricity h2 {
  color: #F33799;
}

.electricity .repair_list .list_title {
  color: #F33799;
}

.electricity .repair_list .list .list_item {
  border-top: #F33799 solid 1px;
}

.electricity .repair_list .list .list_item:last-child {
  border-bottom: 1px solid #F33799;
}

.electricity .repair_list .list .list_item::before {
  background: #F33799;
}

.electricity .repair_list .list .list_item .item_inner .item_title {
  color: #F33799;
}

.contact {
  margin-bottom: 73px;
}

.contact .view_title {
  background: linear-gradient(-45deg, #e6f3fe 0, #e6f3fe 5%, transparent 5%, transparent 25%, #e6f3fe 25%, #e6f3fe 30%, transparent 30%, transparent 50%, #e6f3fe 50%, #e6f3fe 55%, transparent 55%, transparent 75%, #e6f3fe 75%, #e6f3fe 80%, transparent 80%, transparent 100%);
  background-size: 28px 28px;
  border-bottom: 2px solid #1e2082;
  color: #0099FF;
  border-bottom: none;
  border-left: 5px #4397f7 solid;
}

.contact .address_form {
  margin-bottom: 66px;
}

.contact .address_form li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contact .address_form li .label {
  flex: none;
  display: inline-block;
  background: #F5F3F0;
  height: 100px;
  width: 30%;
  min-width: 180px;
  font-size: 2.4rem;
  font-family: Hanyi Senty Chalk Original-Regular, Hanyi Senty Chalk Original;
  font-weight: 400;
  color: #333333;
}

.contact .address_form li .label p {
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

.contact .address_form li .text {
  height: 98px;
  border: 1px solid #F5F3F0;
  flex: 1;
  display: inline-block;
}

.contact .address_form li .text p,
.contact .address_form li .text a {
  height: 99px;
  text-align: center;
  vertical-align: middle;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}

.contact .swiper-pagination3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.contact .swiper-pagination3 span {
  display: inline-block;
  white-space: nowrap;
}

.contact .my-bullet3 {
  background: #F5F3F0;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #000;
  line-height: 2.4rem;
  padding: 24px 35px;
  margin-right: 10px;
  transition: all 0.5s;
  cursor: pointer;
}

.contact .my-bullet3:hover {
  background: #9cd6fd;
  color: #FFFFFF;
}

.contact .my-bullet-active3 {
  background: #0099FF;
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 2.4rem;
  padding: 24px 35px;
  margin-right: 10px;
}

.contact .map_item {
  width: 100%;
  flex: 1;
}

.contact .swiper3 {
  overflow: hidden;
  margin-bottom: 60px;
}

.contact .swiper3 .flex {
  display: flex;
}

.contact .message_t {
  margin-bottom: 12px;
}

.contact .desc {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 50px;
  text-align: center;
}

.contact .message_form {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.contact .message_form .cell {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 22px;
  width: 100%;
}

.contact .message_form .cell .form_label {
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  flex: none;
  margin-right: 20px;
  width: 100px;
}

.contact .message_form .cell .form_label::after {
  content: '*';
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #FF4930;
}

.contact .message_form .cell input[type=text] {
  flex: 1;
  width: 100%;
  height: 4.5rem;
  background: #FFFFFF;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #E2DEDE;
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  padding: 4px 6px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.contact .message_form .cell input[type=text]:hover {
  border-color: #a2d1ff;
}

.contact .message_form .cell input[type=text]:focus {
  outline: 0px;
  border-color: #0080ff;
}

.contact .message_form .cell:first-child,
.contact .message_form .cell:nth-child(2),
.contact .message_form .cell:nth-child(4),
.contact .message_form .cell:nth-child(5) {
  width: 48%;
}

.contact .message_form .cell:first-child,
.contact .message_form .cell:nth-child(4) {
  margin-right: 4%;
}

.contact .message_form .textarea_cell {
  align-items: flex-start;
}

.contact .message_form .textarea_cell .form_control {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  flex: 1;
  background: #FFFFFF;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #E2DEDE;
  font-size: 1.8rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  padding: 4px 6px;
  transition: border-color 0.3s;
}

.contact .message_form .textarea_cell .form_control:hover {
  border-color: #a2d1ff;
}

.contact .message_form .textarea_cell .form_control:focus {
  outline: 0px;
  border-color: #0080ff;
}

.contact .submit_btn {
  background-color: #0099FF;
  color: #fff;
  font-size: 1.6rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #F8F8F8;
  padding: 14px 56px;
  transition: background-color, color 0.5s;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid #0099FF;
}

.contact .submit_btn:hover {
  background-color: #fff;
  color: #0099FF;
}

.contact .submit_btn:active {
  background-color: #93c9ff80;
  color: #fff;
}

.swiper {
  --swiper-theme-color: #000;
  /* 设置Swiper风格 */
  --swiper-navigation-color: #000;
  /* 单独设置按钮颜色 */
  --swiper-navigation-size: 25px;
  /* 设置按钮大小 */
}

.swiper_mo {
  width: 0;
  height: 0;
}

.swiper-slide .banner {
  width: 100%;
}

.pagination_container {
  width: 100%;
  overflow: hidden;
  transition: all 0.5s;
}

.pagination_container .swiper-pagination {
  position: unset !important;
  padding: 30px 0;
}

.my-bullet {
  font-size: 2rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: #333333;
  padding: 10px 28px;
  transition: all 0.5s;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  margin-right: 10px;
  white-space: nowrap;
  display: inline-block;
}

.my-bullet:last-child {
  margin-right: 0;
}

.my-bullet:hover {
  background: #d2ff97;
  color: #000;
}

.my-bullet:active {
  background: #68a31b94;
  color: #fff;
}

.my-bullet-active {
  color: #FFFFFF;
  background: #8CC63F;
  white-space: nowrap;
}

.swiper2 {
  margin-bottom: 60px;
}

.recent .crumb {
  margin-top: 30px;
  margin-bottom: 10px;
}

.recent .swiper_contaniner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
}

.recent .swiper_contaniner .swiper-pagination4 {
  transition: all 0.5s;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  transform: translateY(30px) !important;
  user-select: none;
  -webkit-user-select: none;
  margin-right: 20px;
}

.recent .swiper_contaniner .swiper-pagination4 span,
.recent .swiper_contaniner .swiper-pagination4 a {
  display: inline-block;
  padding: 12px 25px;
  width: 100%;
  flex: none;
  transition: all 0.5s;
  border-bottom: 2px dashed #0063A7;
}

.recent .swiper_contaniner .swiper-pagination4 span:hover,
.recent .swiper_contaniner .swiper-pagination4 a:hover {
  font-weight: bold;
  color: #0063A7;
}

.recent .swiper_contaniner .my-bullet4 {
  font-size: 2rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: 400;
  color: #333;
  background: #fff;
  cursor: pointer;
}

.recent .swiper_contaniner .my-bullet-active4 {
  font-size: 2rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #fff !important;
  background: #0063A7;
}

.recent .swiper_contaniner .swiper4 {
  flex: 1;
  height: fit-content !important;
  overflow: hidden;
  color: #fff !important;
}

.recent .swiper_contaniner .swiper4 .swiper-slide {
  height: fit-content !important;
  overflow: hidden;
}

.recent .swiper_contaniner .swiper4 .itemlist {
  height: fit-content !important;
  overflow: hidden;
  width: 100%;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  justify-items: center;
  min-height: 600px;
}

.recent .swiper_contaniner .swiper4 .itemlist li {
  transition: all 0.5s;
  background: #8CC63F;
  padding: 14px 10px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
}

.recent .swiper_contaniner .swiper4 .itemlist2 li {
  background: #E3F5F8;
}

.recent .swiper_contaniner .swiper4 .itemlist li .img {
  width: 100%;
  height: 210px;
  overflow: hidden;
  border: 1px #fff solid;
  margin-bottom: 20px;
}

.recent .swiper_contaniner .swiper4 .itemlist li .img div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.recent .swiper_contaniner .swiper4 .itemlist li .name {
  font-size: 2rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.recent .swiper_contaniner .swiper4 .itemlist2 li .name {
  color: #333;
}

.recent .swiper_contaniner .swiper4 .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  margin: 4rem auto;
}

.recent .swiper_contaniner .swiper4 .pagination li {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px #f5f5f5 solid;
  background: #fff;
  transition: all 0.5s;
  border-radius: 15px;
  overflow: hidden;
  margin: 5px;
}

.recent .swiper_contaniner .swiper4 .pagination li:hover {
  border: 1px solid #0063A7;

}

.recent .swiper_contaniner .swiper4 .pagination li:hover a {
  color: #fff;
  font-weight: bold;
}

.recent .swiper_contaniner .swiper4 .pagination li a,
.recent .swiper_contaniner .swiper4 .pagination li span {
  font-size: 1.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: 400;
  color: #808080;
  transition: all 0.5s;
  text-align: center;
  vertical-align: middle;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recent .swiper_contaniner .swiper4 .pagination .active {
  border: 1px #0063A7 solid;
  background: #0063A7;
  color: #fff;
}

.recent .swiper_contaniner .swiper4 .pagination .active a {
  font-size: 1.4rem;
  font-family: Microsoft JhengHei-Bold, Microsoft JhengHei;
  font-weight: bold;
  color: #fff;
}

.recent .swiper_contaniner .swiper4 .pagination .fa-angle-right::after {}

.recent .itemlist_demo {
  font-size: 60px;
  width: 100%;
  text-align: center;
  min-height: 600px;
}

.popout {
  margin-top: 30px;
}

.popout .crumb {
  margin-bottom: 20px;
}

.popout .inner {
  width: 100%;
  border-radius: 20px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 150px;
}

.popout .inner .title {
  font-size: 3rem;
  font-family: MFinance HK-Bold, MFinance HK;
  font-weight: bold;
  color: #0099FF;
  margin-bottom: 30px;
  text-align: center;
}

.popout .inner .swiper5 {
  margin-bottom: 20px;
}

.popout .inner .swiper {
  flex: none;
  width: 100%;
}

.popout .inner .swiper-wrapper {
  width: 100%;
  height: fit-content;
  overflow: hidden;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.popout .inner .swiper-wrapper .swiper-slide {
  width: 100%;
  flex: none;
}

.popout .inner .swiper-wrapper img {
  width: 100%;
  height: fit-content;
}

.popout .my-container-thumbs .swiper-slide {
  border: 5px solid #fff;
  cursor: pointer;
  opacity: 0.8;
}

.popout .my-container-thumbs .swiper-slide:hover {
  opacity: 0.9;
  border: 5px solid #8a8a8a;
}

.popout .my-container-thumbs .swiper-slide:active {
  opacity: 1;
}

.popout .my-slide-thumb-active {
  border: 5px solid #000 !important;
  opacity: 1;
}

.roate_img:hover .roate_target {
  -webkit-animation: rotate-vert-center 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotate-vert-center 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.prodetail .detail {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30px 0;
}

.prodetail .detail .left {
  width: 48%;
  overflow: hidden;
}

.prodetail .detail .left .ndimg {
  margin-bottom: 15px;
}

.prodetail .detail .left .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prodetail .detail .left .nximg .swiper-slide {
  border: 1px solid #E5E5E5;
}

.prodetail .detail .left .nximg {
  position: relative;
}

.prodetail .detail .left .nximg .swiper-button-next:after,
.prodetail .detail .left .nximg .swiper-button-prev:after {
  color: #333;
  font-size: 1.2em;
}

.prodetail .detail .right {
  width: 48%;
}

.prodetail .detail .right .title {
  font-size: 30px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 15px;
}

.prodetail .detail .right .price {
  color: #F6AB00;
  font-size: 20px;
  margin: 15px 0px;
}

.prodetail .detail .right dl dd {
  display: flex;
  margin-bottom: 10px;
}

.prodetail .detail .right dl dd span {
  width: 22%;
  font-size: 18px;
  font-weight: bold;
}

.prodetail .detail .right dl dd span:nth-child(2) {
  width: 76%;
  margin-left: 2rem;
  font-weight: normal;
}

.prodetail .detail .right .contact {
  font-size: 20px;
  margin: 50px 0 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #0063A7;
  padding: 1rem 2rem;
  color: #fff;
  max-width: 355px;
  text-align: center;
}

.prodetail .detail .right .contact img {
  margin-right: 10px;
}

.prodetail .detail .right .share {
  display: flex;
  align-items: center;
}

.prodetail .detail .right .share .a2a_svg {
  background: #4C4C4C !important;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 5px;
}

.prodetail .detail .right .share .s {
  margin-left: 15px;
}

.other {
  margin: 80px 0px;
}

.other .title {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  margin: 30px 0px;
}

.other .swi {
  position: relative;
}

.other .swi .swiper-slide a {
  display: block;
  width: 100%;
  background: #E3F5F8;
  padding: 15px;
}

.other .swi .swiper-slide a img {
  width: 100%;
}

.other .swi .swiper-slide .name {
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin-top: 1rem;
}

.swi .swiper-slide {
  height: 400px;
}

.other .swi .swiper-slide a {
  height: 100%;
}

.swi .swiper-slide .img {
  height: 100%
}

.other .swi .swiper-slide a img {
  object-fit: contain;
  height: 100%;
  margin: auto;
}
.articlepage {
    margin: 30px 0;
}
.pswp__img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}


.drege .repair_list .list .list_item:last-child {
	border-bottom: 1px solid #F6AB00;
}
.drege .repair_list .list .list_item {
	border-top: 1px solid #F6AB00;
}
.drege .repair_list .list .list_item::before {
	background: #F6AB00;
	
}
.drege .repair_list .list .list_item .item_inner .item_title {
	color: #F6AB00
}