html,
body {
  overflow-x: hidden !important;
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  border: none;
}
a {
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  background-color: transparent;
  color: inherit;
  border: none;
}
p {
  margin: 0;
}
img {
  max-width: 100%;
  border: none;
  pointer-events: none;
  user-select: none;
}
* {
  box-sizing: border-box;
  outline: none;
}
span {
  display: inline-block;
}
table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}
ul,
ol {
  margin: 0;
}
ul.decimal,
ol.decimal {
  list-style: decimal;
}
ul.disc,
ol.disc {
  list-style: disc;
}
ul.upper_alpha,
ol.upper_alpha {
  list-style: upper-alpha;
}
ul.cus,
ol.cus {
  list-style: none;
  padding: 0;
}
ul.cus > li,
ol.cus > li {
  position: relative;
}
ul.cus:not(._dot) > li::before,
ol.cus:not(._dot) > li::before {
  content: attr(str);
  position: absolute;
  top: 0;
  left: 0;
}
ul.cus._gh > li::before,
ol.cus._gh > li::before {
  content: "(" attr(str) ")";
}
ul.cus._dot > li::before,
ol.cus._dot > li::before {
  content: "‧";
}
ul li ::marker,
ol li ::marker {
  text-indent: 0 !important;
}
.clear::after {
  display: block;
  content: "";
  clear: both;
}
.vtc > * {
  vertical-align: middle;
}
.vtc::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  font-size: 0;
}
.slime {
  animation: 1.3s slime infinite;
}
@media (min-width: 1025px) {
  .up_lg_hide {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .lg_hide {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .up_lt_lg_hide {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .lt_lg_hide {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .up_md_hide {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .md_hide {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .up_lt_md_hide {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .lt_md_hide {
    display: none !important;
  }
}
@media (min-width: 577px) {
  .up_sm_hide {
    display: none !important;
  }
}
@media (max-width: 576px) {
  .sm_hide {
    display: none !important;
  }
}
@keyframes an_none {
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes an_scroll {
  0% {
    height: 0;
  }
  40% {
    height: 100%;
    transform: translateY(0);
  }
  80% {
    height: 100%;
    transform: translateY(100%);
  }
  100% {
    height: 100%;
    transform: translateY(100%);
  }
}
@media (max-width: 1024px) {
  html.nav_active,
  body.nav_active {
    overflow-y: hidden;
  }
}
span {
  display: inline;
}
span.c {
  display: inline;
}
span.b {
  display: inline;
  font-size: 200%;
  line-height: 1;
}
span.w {
  display: inline;
  font-weight: bold;
}
span.s {
  display: inline;
  font-size: 80%;
}
.midline {
  text-align: center;
  overflow: hidden;
}
.midline > * {
  position: relative;
  display: inline-block;
}
.midline > *::after,
.midline > *::before {
  content: "";
  position: absolute;
  top: 50%;
  border-bottom: 2px solid;
  width: 50vw;
}
.midline > *::after {
  left: calc(100% + 20px);
  transform-origin: left;
}
.midline > *::before {
  right: calc(100% + 20px);
  transform-origin: right;
}
.IBILI {
  position: relative;
}
.IBILI.active {
  overflow: hidden;
}
.IBILI.active > * {
  transform-origin: center top;
  position: absolute;
  top: 0;
  left: 50%;
}
.spx_frame {
  overflow: hidden;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  user-select: none;
  background-color: #ffffff;
  box-shadow: inset 0 -1px 0 0 #d3d3d3;
  z-index: 100;
  padding: 0 20px;
}
.header .header_ctn {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.header .header_logo {
  margin-right: auto;
}
.header .header_logo > img {
  width: 100%;
  display: block;
}
.header,
.header_fill {
  height: 70px;
}
@media (max-width: 768px) {
  .header,
  .header_fill {
    height: 70px;
  }
}
@media (max-width: 576px) {
  .header,
  .header_fill {
    height: 70px;
  }
}
.float_frame_fill {
  padding-top: 101px;
}
@media (max-width: 750px) {
  .float_frame_fill {
    padding-top: calc(101 / (750 * 1) * (100vw - 0px));
  }
}
.float_frame {
  position: fixed;
  bottom: 20%;
  right: 0;
  font-size: 0;
  line-height: 1;
  z-index: 10;
}
@media (max-width: 1024px) {
  .float_frame {
    left: 0;
    bottom: 0;
    display: flex;
  }
  .float_frame > a {
    width: 100%;
    text-align: center;
  }
  .float_frame > a > img {
    margin: 0 auto;
  }
}
@media (min-width: 1025px) {
  .float_frame.hideOn.ready {
    transition: 0.3s;
  }
  .float_frame.hideOn:not(.active) {
    transform: scale(0);
  }
}
body {
  letter-spacing: 1px;
  font-weight: 300;
}
.ctn1 {
  max-width: 1200px;
  margin: 0 auto;
}
img {
  display: block;
}
.header {
  background-color: #142240;
  background-image: url(../img/header-bar.png);
  background-position: bottom;
  background-size: auto 3px;
  background-repeat: repeat-x;
  padding-bottom: 3px;
}
@media (min-width: 1025px) {
  .header .nav_frame,
  .header .nav_ctn {
    height: 100%;
  }
}
@media (max-width: 1024px) {
  .header .nav_frame {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .header .nav_frame:not(.active) {
    height: 0;
  }
}
@media (max-width: 768px) {
  .header .nav_frame {
    top: 70px;
  }
}
@media (max-width: 576px) {
  .header .nav_frame {
    top: 70px;
  }
}
.header .nav_close {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (min-width: 1025px) {
  .header .nav_close {
    display: none;
  }
}
@media (min-width: 1025px) {
  .header .nav_ctn {
    display: flex;
  }
}
@media (max-width: 1024px) {
  .header .nav_ctn {
    position: relative;
    background-color: #ffffff;
    transition: 0.5s;
    border-top: 1px solid #ececec;
  }
  .header .nav_ctn:not(.active) {
    transform: translateY(-100%);
  }
}
.header .nav_box {
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
@media (min-width: 1025px) {
  .header .nav_box {
    height: 70px;
    padding: 0 5px;
    display: flex;
    align-items: center;
  }
  .header .nav_box:not(:last-child) {
    margin-right: 12px;
  }
  .header .nav_box:hover {
    box-shadow: inset 0 4px 0 0 #fff;
  }
}
@media (max-width: 1024px) {
  .header .nav_box {
    border-bottom: 1px solid #ececec;
  }
}
.header .nav_item {
  font-size: 16px;
  color: #000000;
}
@media (max-width: 1024px) {
  .header .nav_item {
    padding: 20px 0;
    text-align: center;
  }
  .header .nav_item:hover {
    background-color: #f6f5f3;
  }
}
.header .nav_btn {
  cursor: pointer;
}
@media (min-width: 1025px) {
  .header .nav_btn {
    display: none;
  }
}
.header .nav_btn .nav_line {
  width: 32px;
  height: 3px;
  background-color: #fff;
  transition: 0.3s;
}
.header .nav_btn .nav_line:not(:last-child) {
  margin-bottom: 8px;
}
.header .nav_btn .nav_line:nth-child(1) {
  transform-origin: left bottom;
}
.header .nav_btn .nav_line:nth-child(3) {
  transform-origin: left top;
}
.header .nav_btn.active {
  transition: 0.5s linear;
}
.header .nav_btn.active .nav_line:nth-child(1) {
  transform: rotate(42deg);
}
.header .nav_btn.active .nav_line:nth-child(2) {
  opacity: 0;
}
.header .nav_btn.active .nav_line:nth-child(3) {
  transform: rotate(-42deg);
}
.header .header_logo {
  width: 128px;
}
.header .nav_item {
  color: #fff;
  font-size: 15px;
}
@media (max-width: 1024px) {
  .header .nav_item {
    color: #000;
  }
}
footer {
  background-image: url(../img/footer-bg.jpg);
  background-size: 100% 100%;
  background-position: center;
  padding-top: 65px;
  padding-bottom: 45px;
  padding-left: 30px;
  padding-right: 30px;
}
footer .container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  footer .container {
    flex-wrap: wrap;
  }
}
@media (max-width: 576px) {
  footer .container .rt {
    width: 100%;
    margin-top: 20px;
  }
}
footer .container .rt p,
footer .container .rt a {
  display: block;
  color: #fff;
  text-align: right;
}
@media (max-width: 576px) {
  footer .container .rt p,
  footer .container .rt a {
    text-align: left;
  }
}
footer .container .rt .line {
  max-width: 330px;
  width: 100%;
  height: 1px;
  background-color: #fff;
  margin: 15px 0;
}
.cpr {
  height: 80px;
  background-color: #01041a;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float_frame_fill {
  background-color: #01041a;
}
@media (min-width: 1025px) {
  .float_frame > a {
    transition: 0.3s;
  }
  .float_frame:hover > a:hover {
    transform: scale(1.05);
  }
  .float_frame:hover > a:not(:hover) {
    transform: scale(0.95);
  }
}
.space_frame {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  text-align: justify;
  text-justify: inter-ideograph;
}
.ntc_frame .ntc_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  background-color: #ffffff;
  border-bottom: 1px solid #f6f6f6;
  font-size: 24px;
  padding: 30px 0;
}
@media (max-width: 576px) {
  .ntc_frame .ntc_btn {
    font-size: 22px;
    padding: 25px 0;
  }
}
.ntc_frame .ntc_btn .plus_btn {
  transform: translateY(1px);
  margin-left: 15px;
  position: relative;
  width: 12px;
  height: 12px;
}
.ntc_frame .ntc_btn .plus_btn::before,
.ntc_frame .ntc_btn .plus_btn::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background-color: #000000;
  transition: 0.3s ease;
}
.ntc_frame .ntc_btn .plus_btn:not(.active)::after {
  transform: rotate(-90deg);
}
@media (max-width: 576px) {
  .ntc_frame .ntc_btn .plus_btn {
    width: 10px;
    height: 10px;
  }
}
.ntc_frame .ntc_ctn {
  display: none;
  padding: 40px 20px;
}
@media (max-width: 576px) {
  .ntc_frame .ntc_ctn {
    padding: 30px 10px;
  }
}
.ntc_frame ul {
  line-height: 1.8;
  font-size: 18px;
  padding-left: 21.6px;
}
.ntc_frame ul.cus {
  padding: 0;
}
.ntc_frame ul.cus > li {
  padding-left: 21.6px;
}
.ntc_frame ul.cus._gh > li {
  padding-left: 27px;
}
.ntc_frame ul.cus._num > li:nth-child(n + 10) {
  padding-left: 32.4px;
}
.ntc_frame ul.cus._num._gh > li:nth-child(n + 10) {
  padding-left: 37.8px;
}
.ntc_frame ul.cus._dot > li::before {
  margin-left: -19px;
}
@media (max-width: 576px) {
  .ntc_frame ul {
    font-size: 16px;
    padding-left: 19.2px;
  }
  .ntc_frame ul.cus {
    padding: 0;
  }
  .ntc_frame ul.cus > li {
    padding-left: 19.2px;
  }
  .ntc_frame ul.cus._gh > li {
    padding-left: 24px;
  }
  .ntc_frame ul.cus._num > li:nth-child(n + 10) {
    padding-left: 28.8px;
  }
  .ntc_frame ul.cus._num._gh > li:nth-child(n + 10) {
    padding-left: 33.6px;
  }
  .ntc_frame ul.cus._dot > li::before {
    margin-left: -17px;
  }
}
main > section {
  position: relative;
}
.bg-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  height: 100%;
  transform: translate(-50%);
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.bg-container * {
  pointer-events: all;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .bg-container {
    width: 128vw;
  }
}
@media (max-width: 768px) {
  .bg-container {
    width: 100%;
  }
}
.container {
  position: relative;
  width: 1500px;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
  pointer-events: none;
}
.container * {
  pointer-events: all;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .container {
    width: 100vw;
  }
}
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}
.swiper-frame .swiper {
  overflow: hidden;
}
.swiper-frame .container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  pointer-events: none;
}
.swiper-frame .swiper-pagination {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1500px) and (min-width: 769px) {
  .swiper-frame .swiper-pagination {
    bottom: 1.33333333vw;
  }
}
.swiper-frame .swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px;
  opacity: 1;
  background: transparent;
  border: 1px solid #efdb93;
  transition: 0.3s;
  border-radius: 1000px;
}
.swiper-frame .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 40px;
  background-color: #efdb93;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .swiper-frame .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 2.66666667vw;
  }
}
.swiper-frame .swiper-button-next,
.swiper-frame .swiper-button-prev {
  color: #efdb93;
}
.index #kv-sec {
  padding-bottom: 4px;
  background-color: #f7e8ca;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #kv-sec {
    padding-bottom: 0.26666667vw;
  }
}
.index #kv-sec .bg-container {
  position: relative;
}
.index #sec-1 {
  height: 750px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-1 {
    height: 50vw;
  }
}
@media (max-width: 768px) {
  .index #sec-1 {
    height: 176.5625vw;
  }
}
.index #sec-1 .bg-container {
  background-image: url(../img/index/sec-1.jpg);
}
@media (max-width: 768px) {
  .index #sec-1 .bg-container {
    background-image: url(../img/index/sec-1-m.jpg);
  }
}
.index #sec-1 .container .text {
  position: absolute;
  top: 182px;
  left: 942px;
  width: 516px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-1 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-1 .container .text {
    top: 12.13333333vw;
    left: 62.8vw;
    width: 34.4vw;
  }
}
@media (max-width: 768px) {
  .index #sec-1 .container .text {
    top: 8.59375vw;
    left: 10.546875vw;
    width: 75.52083333vw;
  }
}
.index #sec-2 {
  height: 758px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-2 {
    height: 50.53333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-2 {
    height: 94.79166667vw;
  }
}
.index #sec-2 .bg-container {
  background-image: url(../img/index/sec-2.jpg);
}
@media (max-width: 768px) {
  .index #sec-2 .bg-container {
    background-image: url(../img/index/sec-2-m.jpg);
  }
}
.index #sec-2 .container .text {
  position: absolute;
  top: 168px;
  left: 150px;
  width: 246px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-2 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-2 .container .text {
    top: 11.2vw;
    left: 10vw;
    width: 16.4vw;
  }
}
@media (max-width: 768px) {
  .index #sec-2 .container .text {
    top: 9.765625vw;
    left: 13.02083333vw;
    width: 69.01041667vw;
  }
}
.index #sec-2 .container .video-wrap {
  position: absolute;
  top: 166px;
  left: 490px;
  width: 597px;
  height: 338px;
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-2 .container .video-wrap {
    top: 11.06666667vw;
    left: 32.66666667vw;
    width: 39.8vw;
    height: 22.53333333vw;
    border-radius: 0.93333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-2 .container .video-wrap {
    top: 38.54166667vw;
    left: 7.8125vw;
    width: 82.03125vw;
    height: 46.35416667vw;
    border-radius: 1.82291667vw;
  }
}
.index #sec-2 .container .video-wrap .swiper .swiper-slide {
  cursor: pointer;
}
.index #sec-3 {
  height: 606px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-3 {
    height: 40.4vw;
  }
}
@media (max-width: 768px) {
  .index #sec-3 {
    height: 120.83333333vw;
  }
}
.index #sec-3 .bg-container {
  background-image: url(../img/index/sec-3.jpg);
}
@media (max-width: 768px) {
  .index #sec-3 .bg-container {
    background-image: url(../img/index/sec-3-m.jpg);
  }
}
.index #sec-3 .container .text {
  position: absolute;
  top: 163px;
  left: 142px;
  width: 253px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-3 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-3 .container .text {
    top: 10.86666667vw;
    left: 9.46666667vw;
    width: 16.86666667vw;
  }
}
@media (max-width: 768px) {
  .index #sec-3 .container .text {
    top: 7.16145833vw;
    left: 32.29166667vw;
    width: 32.94270833vw;
  }
}
.index #sec-3 .container #sec-3-swiper {
  position: absolute;
  top: 160px;
  left: 510px;
  width: 890px;
  overflow: hidden;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-3 .container #sec-3-swiper.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-3 .container #sec-3-swiper {
    top: 10.66666667vw;
    left: 34vw;
    width: 59.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-3 .container #sec-3-swiper {
    top: 33.203125vw;
    left: 0;
    width: 100%;
  }
  .index #sec-3 .container #sec-3-swiper .swiper-slide {
    width: 75.26041667vw;
  }
}
.index #sec-3 .container #sec-3-swiper img {
  max-width: none;
  width: 100%;
}
.index #sec-3 .container #sec-3-swiper p {
  font-size: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  color: #fff;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-3 .container #sec-3-swiper p {
    font-size: 1.33333333vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 1.33333333vw;
    padding-right: 1.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-3 .container #sec-3-swiper p {
    font-size: 3.38541667vw;
    padding-top: 2.60416667vw;
    padding-bottom: 5.20833333vw;
    padding-left: 2.60416667vw;
    padding-right: 2.60416667vw;
  }
}
.index #sec-3 .container .swiper-frame .swiper-pagination {
  bottom: 0;
}
.index #sec-4 {
  height: 612px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-4 {
    height: 40.8vw;
  }
}
@media (max-width: 768px) {
  .index #sec-4 {
    height: 126.171875vw;
  }
}
.index #sec-4 .bg-container {
  background-image: url(../img/index/sec-4.jpg);
  overflow: visible;
}
@media (max-width: 768px) {
  .index #sec-4 .bg-container {
    background-image: url(../img/index/sec-4-m.jpg);
  }
}
.index #sec-4 .bg-container .benvol {
  position: absolute;
  bottom: 1px;
  left: 1604px;
  width: 804px;
  animation-delay: 0s;
  transform: translateX(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-4 .bg-container .benvol.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-4 .bg-container .benvol {
    bottom: 0.06666667vw;
    left: 106.93333333vw;
    width: 53.6vw;
  }
}
.index #sec-4 .container .text {
  position: absolute;
  top: 163px;
  left: 142px;
  width: 254px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-4 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-4 .container .text {
    top: 10.86666667vw;
    left: 9.46666667vw;
    width: 16.93333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-4 .container .text {
    top: 7.16145833vw;
    left: 32.29166667vw;
    width: 32.94270833vw;
  }
}
.index #sec-4 .container #sec-4-swiper {
  position: absolute;
  top: 160px;
  left: 510px;
  width: 890px;
  overflow: hidden;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-4 .container #sec-4-swiper.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-4 .container #sec-4-swiper {
    top: 10.66666667vw;
    left: 34vw;
    width: 59.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-4 .container #sec-4-swiper {
    top: 34.50520833vw;
    left: 0;
    width: 100%;
  }
  .index #sec-4 .container #sec-4-swiper .swiper-slide {
    width: 75.26041667vw;
  }
}
.index #sec-4 .container #sec-4-swiper img {
  max-width: none;
  width: 100%;
}
.index #sec-4 .container #sec-4-swiper p {
  font-size: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  color: #fff;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-4 .container #sec-4-swiper p {
    font-size: 1.33333333vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 1.33333333vw;
    padding-right: 1.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-4 .container #sec-4-swiper p {
    font-size: 3.38541667vw;
    padding-top: 2.60416667vw;
    padding-bottom: 5.20833333vw;
    padding-left: 2.60416667vw;
    padding-right: 2.60416667vw;
  }
}
.index #sec-4 .container .swiper-frame .swiper-pagination {
  bottom: 0;
}
.index #sec-5 {
  height: 584px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 {
    height: 38.93333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 {
    height: 76.04166667vw;
  }
}
.index #sec-5 .bg-container {
  background-image: url(../img/index/sec-5.jpg);
}
@media (max-width: 768px) {
  .index #sec-5 .bg-container {
    background-image: url(../img/index/sec-5-m.jpg);
  }
}
.index #sec-5 > .container .img {
  position: absolute;
  bottom: 0;
  left: -127px;
  width: 767px;
  animation-delay: 0s;
  transform: translateX(-40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-5 > .container .img.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container .img {
    left: -8.46666667vw;
    width: 51.13333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container .img {
    display: none;
  }
}
.index #sec-5 > .container .text {
  position: absolute;
  top: 60px;
  left: 819px;
  width: 381px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-5 > .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container .text {
    top: 4vw;
    left: 54.6vw;
    width: 25.4vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container .text {
    top: 8.46354167vw;
    left: 29.42708333vw;
    width: 41.27604167vw;
  }
}
.index #sec-5 > .container #sec-5-swiper {
  position: absolute;
  top: 220px;
  left: 429px;
  width: 970px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-5 > .container #sec-5-swiper.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container #sec-5-swiper {
    top: 14.66666667vw;
    left: 35.26666667vw;
    width: 50vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container #sec-5-swiper {
    width: 100%;
    left: 0;
    top: 28.64583333vw;
  }
}
.index #sec-5 > .container #sec-5-swiper .container {
  position: absolute;
  width: 100%;
  top: 0;
  pointer-events: none;
  z-index: 3;
}
.index #sec-5 > .container #sec-5-swiper .container .swiper-button-next,
.index #sec-5 > .container #sec-5-swiper .container .swiper-button-prev {
  color: #283b67;
  top: 0;
  transform: none;
  margin-top: 83px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-next,
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-prev {
    margin-top: 5.53333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-next,
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-prev {
    margin-top: 10.80729167vw;
  }
}
.index #sec-5 > .container #sec-5-swiper .container .swiper-button-next {
  right: -50px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-next {
    right: -3.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-next {
    right: 10px;
  }
}
.index #sec-5 > .container #sec-5-swiper .container .swiper-button-prev {
  left: -50px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-prev {
    left: -3.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container #sec-5-swiper .container .swiper-button-prev {
    left: 10px;
  }
}
.index #sec-5 > .container #sec-5-swiper img {
  max-width: none;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.index #sec-5 > .container #sec-5-swiper p {
  font-size: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  color: #151b45;
  text-align: center;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-5 > .container #sec-5-swiper p {
    font-size: 1.33333333vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 1.33333333vw;
    padding-right: 1.33333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container #sec-5-swiper p {
    font-size: 3.38541667vw;
    padding-top: 2.60416667vw;
    padding-bottom: 5.20833333vw;
    padding-left: 2.60416667vw;
    padding-right: 2.60416667vw;
    color: #000;
  }
}
@media (max-width: 768px) {
  .index #sec-5 > .container:after,
  .index #sec-5 > .container:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 13.02083333vw;
    height: 100%;
    z-index: 3;
  }
  .index #sec-5 > .container:after {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }
  .index #sec-5 > .container:before {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.index #sec-6 {
  height: 397px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-6 {
    height: 26.46666667vw;
  }
}
@media (max-width: 768px) {
  .index #sec-6 {
    height: 59.63541667vw;
  }
}
.index #sec-6 .bg-container {
  background-image: url(../img/index/sec-6.jpg);
}
@media (max-width: 768px) {
  .index #sec-6 .bg-container {
    background-image: url(../img/index/sec-6-m.jpg);
  }
}
.index #sec-6 .container .text {
  position: absolute;
  top: 108px;
  left: 557px;
  width: 422px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-6 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-6 .container .text {
    top: 7.2vw;
    left: 37.13333333vw;
    width: 28.13333333vw;
  }
}
@media (max-width: 768px) {
  .index #sec-6 .container .text {
    top: 13.02083333vw;
    left: 15.75520833vw;
    width: 66.27604167vw;
  }
}
.index #sec-6 .container .img {
  position: absolute;
  bottom: 0;
  right: -143px;
  width: 360px;
  animation-delay: 0s;
  transform: translateX(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-6 .container .img.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-6 .container .img {
    bottom: 0vw;
    right: -9.53333333vw;
    width: 24vw;
  }
}
@media (max-width: 768px) {
  .index #sec-6 .container .img {
    display: none;
  }
}
.index #sec-6 .container .btn {
  position: absolute;
  top: 266px;
  left: 589px;
  width: 358px;
  cursor: pointer;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.index #sec-6 .container .btn.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-6 .container .btn {
    top: 17.73333333vw;
    left: 39.26666667vw;
    width: 23.86666667vw;
  }
}
@media (max-width: 768px) {
  .index #sec-6 .container .btn {
    top: 38.80208333vw;
    left: 20.83333333vw;
    width: 55.72916667vw;
  }
}
.index #sec-7 {
  height: 600px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .index #sec-7 {
    height: 40vw;
  }
}
@media (max-width: 768px) {
  .index #sec-7 {
    height: 65.10416667vw;
  }
}
.index #sec-7 .bg-container {
  background-image: url(../img/index/sec-8.png);
}
@media (max-width: 768px) {
  .index #sec-7 .bg-container {
    background-image: url(../img/index/sec-8-m.png);
    background-color: #4c4c4c;
  }
}
.product #sec-1 {
  height: 643px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-1 {
    height: 42.86666667vw;
  }
}
@media (max-width: 768px) {
  .product #sec-1 {
    height: 146.875vw;
  }
}
.product #sec-1 .bg-container {
  background-image: url(../img/product/sec-1.jpg);
}
@media (max-width: 768px) {
  .product #sec-1 .bg-container {
    background-image: url(../img/product/sec-1-m.jpg);
  }
}
.product #sec-1 .container .text {
  position: absolute;
  top: 262px;
  left: 509px;
  width: 482px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.product #sec-1 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-1 .container .text {
    top: 17.46666667vw;
    left: 33.93333333vw;
    width: 32.13333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-1 .container .text {
    top: 72.78645833vw;
    left: 14.0625vw;
    width: 69.66145833vw;
  }
}
.product #sec-2 {
  height: 515px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-2 {
    height: 34.33333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-2 {
    height: 115.88541667vw;
  }
}
.product #sec-2 .bg-container {
  background-image: url(../img/product/sec-2.jpg);
}
@media (max-width: 768px) {
  .product #sec-2 .bg-container {
    background-image: url(../img/product/sec-2-m.jpg);
  }
}
.product #sec-2 .container .text {
  position: absolute;
  top: 145px;
  left: 863px;
  width: 430px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.product #sec-2 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-2 .container .text {
    top: 9.66666667vw;
    left: 57.53333333vw;
    width: 28.66666667vw;
  }
}
@media (max-width: 768px) {
  .product #sec-2 .container .text {
    top: 44.66145833vw;
    left: 22.65625vw;
    width: 69.79166667vw;
  }
}
.product #sec-3 {
  height: 512px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-3 {
    height: 34.13333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-3 {
    height: 167.578125vw;
  }
}
.product #sec-3 .bg-container {
  background-image: url(../img/product/sec-3.jpg);
}
@media (max-width: 768px) {
  .product #sec-3 .bg-container {
    background-image: none;
    background-color: #303030;
  }
}
.product #sec-3 .container .text {
  position: absolute;
  top: 106px;
  left: 345px;
  width: 525px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.product #sec-3 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-3 .container .text {
    top: 7.06666667vw;
    left: 23vw;
    width: 35vw;
  }
}
@media (max-width: 768px) {
  .product #sec-3 .container .text {
    top: 21.74479167vw;
    left: 4.55729167vw;
    width: 88.80208333vw;
  }
}
.product #sec-3 .container .img {
  position: absolute;
  bottom: 0;
  left: 1035px;
  width: 530px;
  transform: translateX(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}
.product #sec-3 .container .img.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-3 .container .img {
    left: 69vw;
    width: 35.33333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-3 .container .img {
    top: -4.81770833vw;
    left: 52.734375vw;
    width: 44.921875vw;
  }
}
.product #sec-3 .container .dialog {
  position: absolute;
  top: 357px;
  left: 916px;
  width: 308px;
  transform: translateX(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
}
.product #sec-3 .container .dialog.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-3 .container .dialog {
    top: 23.8vw;
    left: 61.06666667vw;
    width: 20.53333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-3 .container .dialog {
    top: 61.19791667vw;
    left: 4.6875vw;
    width: 76.43229167vw;
  }
}
.product #sec-4 {
  height: 509px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-4 {
    height: 33.93333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-4 {
    height: 128.38541667vw;
  }
}
.product #sec-4 .bg-container {
  background-image: url(../img/product/sec-4.jpg);
}
@media (max-width: 768px) {
  .product #sec-4 .bg-container {
    background-image: url(../img/product/sec-4-m.jpg);
  }
}
.product #sec-4 .container .img {
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 461px;
  transform: translateX(-40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.product #sec-4 .container .img.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-4 .container .img {
    bottom: 0.2vw;
    left: 0vw;
    width: 30.73333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-4 .container .img {
    bottom: auto;
    top: 0;
    left: 0;
    width: 76.953125vw;
  }
}
.product #sec-4 .container .dialog-1 {
  position: absolute;
  top: 129px;
  left: 382px;
  width: 411px;
  transform: translateX(-40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}
.product #sec-4 .container .dialog-1.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-4 .container .dialog-1 {
    top: 8.6vw;
    left: 25.46666667vw;
    width: 27.4vw;
  }
}
@media (max-width: 768px) {
  .product #sec-4 .container .dialog-1 {
    top: 16.796875vw;
    left: 24.34895833vw;
    width: 66.92708333vw;
  }
}
.product #sec-4 .container .dialog-2 {
  position: absolute;
  top: 224px;
  left: 359px;
  width: 901px;
  transform: translateX(-40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
}
.product #sec-4 .container .dialog-2.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-4 .container .dialog-2 {
    top: 14.93333333vw;
    left: 23.93333333vw;
    width: 60.06666667vw;
  }
}
@media (max-width: 768px) {
  .product #sec-4 .container .dialog-2 {
    top: 80.72916667vw;
    left: 6.51041667vw;
    width: 84.89583333vw;
  }
}
.product #sec-5 {
  height: 536px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-5 {
    height: 35.73333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-5 {
    height: 165.10416667vw;
  }
}
.product #sec-5 .bg-container {
  background-image: url(../img/product/sec-5.jpg);
}
@media (max-width: 768px) {
  .product #sec-5 .bg-container {
    background-image: url(../img/product/sec-5-m.jpg);
  }
}
.product #sec-5 .container .text {
  position: absolute;
  top: 103px;
  left: 85px;
  width: 407px;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}
.product #sec-5 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-5 .container .text {
    top: 6.86666667vw;
    left: 5.66666667vw;
    width: 27.13333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-5 .container .text {
    top: 11.45833333vw;
    left: 28.38541667vw;
    width: 41.40625vw;
  }
}
.product #sec-5 .container .video-wrap {
  position: absolute;
  top: 100px;
  left: 507px;
  width: 597px;
  height: 338px;
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-5 .container .video-wrap {
    top: 6.66666667vw;
    left: 33.8vw;
    width: 39.8vw;
    height: 22.53333333vw;
    border-radius: 0.93333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-5 .container .video-wrap {
    top: 61.71875vw;
    left: 7.8125vw;
    width: 82.03125vw;
    height: 46.35416667vw;
    border-radius: 1.82291667vw;
  }
}
.product #sec-5 .container .video-wrap .swiper .swiper-slide {
  cursor: pointer;
}
.product #sec-5 .container .img {
  position: absolute;
  bottom: 3px;
  left: 600px;
  width: 1109px;
  transform: translateX(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.product #sec-5 .container .img.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-5 .container .img {
    bottom: 0.2vw;
    left: 40vw;
    width: 73.93333333vw;
  }
}
@media (max-width: 768px) {
  .product #sec-5 .container .img {
    display: none;
  }
}
.product #sec-6 {
  height: 597px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-6 {
    height: 39.8vw;
  }
}
@media (max-width: 768px) {
  .product #sec-6 {
    height: 182.421875vw;
  }
}
.product #sec-6 .bg-container {
  background-image: url(../img/product/sec-6.jpg);
}
@media (max-width: 768px) {
  .product #sec-6 .bg-container {
    background-image: none;
    background-color: #4c4c4c;
  }
}
.product #sec-6 .container .text {
  position: absolute;
  top: 80px;
  left: 694px;
  width: 567px;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.product #sec-6 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-6 .container .text {
    top: 5.33333333vw;
    left: 46.26666667vw;
    width: 37.8vw;
  }
}
@media (max-width: 768px) {
  .product #sec-6 .container .text {
    top: 19.01041667vw;
    left: 5.859375vw;
    width: 85.9375vw;
  }
}
@media (max-width: 768px) {
  .product #sec-6 .container .img {
    position: absolute;
    top: -3.90625vw;
    left: 39.32291667vw;
    width: 58.33333333vw;
  }
}
.product #sec-7 {
  height: 1420px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-7 {
    height: 94.66666667vw;
  }
}
@media (max-width: 768px) {
  .product #sec-7 {
    height: 250.390625vw;
  }
}
.product #sec-7 .bg-container {
  background-image: url(../img/product/sec-7.jpg);
}
@media (max-width: 768px) {
  .product #sec-7 .bg-container {
    background-image: url(../img/product/sec-7-m.jpg);
  }
}
.product #sec-7 .container .top {
  position: absolute;
  top: 144px;
  left: 274px;
  width: 969px;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.product #sec-7 .container .top.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-7 .container .top {
    top: 9.6vw;
    left: 18.26666667vw;
    width: 64.6vw;
  }
}
@media (max-width: 768px) {
  .product #sec-7 .container .top {
    top: 9.89583333vw;
    left: 5.859375vw;
    width: 85.9375vw;
  }
}
.product #sec-7 .container .bottom {
  position: absolute;
  top: 742px;
  left: 146px;
  width: 1189px;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.product #sec-7 .container .bottom.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-7 .container .bottom {
    top: 49.46666667vw;
    left: 9.73333333vw;
    width: 79.26666667vw;
  }
}
@media (max-width: 768px) {
  .product #sec-7 .container .bottom {
    top: 70.05208333vw;
    left: 2.34375vw;
    width: 89.453125vw;
  }
}
.product #sec-8 {
  height: 600px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .product #sec-8 {
    height: 40vw;
  }
}
@media (max-width: 768px) {
  .product #sec-8 {
    height: 65.10416667vw;
  }
}
.product #sec-8 .bg-container {
  background-image: url(../img/index/sec-8.png);
}
@media (max-width: 768px) {
  .product #sec-8 .bg-container {
    background-image: url(../img/index/sec-8-m.png);
    background-color: #4c4c4c;
  }
}
.about #sec-1 {
  height: 646px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-1 {
    height: 43.06666667vw;
  }
}
@media (max-width: 768px) {
  .about #sec-1 {
    height: 85.80729167vw;
  }
}
.about #sec-1 .bg-container {
  background-image: url(../img/about/sec-1.jpg);
}
@media (max-width: 768px) {
  .about #sec-1 .bg-container {
    background-image: url(../img/about/sec-1-m.jpg);
  }
}
.about #sec-1 .container .text {
  position: absolute;
  top: 217px;
  left: 148px;
  width: 421px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.about #sec-1 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-1 .container .text {
    top: 14.46666667vw;
    left: 9.86666667vw;
    width: 28.06666667vw;
  }
}
@media (max-width: 768px) {
  .about #sec-1 .container .text {
    top: 33.07291667vw;
    left: 3.90625vw;
    width: 73.4375vw;
  }
}
.about #sec-2 {
  height: 506px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-2 {
    height: 33.73333333vw;
  }
}
@media (max-width: 768px) {
  .about #sec-2 {
    height: 100.26041667vw;
  }
}
.about #sec-2 .bg-container {
  background-image: url(../img/about/sec-2.jpg);
}
@media (max-width: 768px) {
  .about #sec-2 .bg-container {
    background-image: url(../img/about/sec-2-m.jpg);
  }
}
.about #sec-2 .container .text {
  position: absolute;
  top: 125px;
  left: 777px;
  width: 522px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.about #sec-2 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-2 .container .text {
    top: 8.33333333vw;
    left: 51.8vw;
    width: 34.8vw;
  }
}
@media (max-width: 768px) {
  .about #sec-2 .container .text {
    top: 51.43229167vw;
    left: 7.68229167vw;
    width: 67.83854167vw;
  }
}
.about #sec-3 {
  height: 516px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-3 {
    height: 34.4vw;
  }
}
@media (max-width: 768px) {
  .about #sec-3 {
    height: 100.26041667vw;
  }
}
.about #sec-3 .bg-container {
  background-image: url(../img/about/sec-3.jpg);
}
@media (max-width: 768px) {
  .about #sec-3 .bg-container {
    background-image: url(../img/about/sec-3-m.jpg);
  }
}
.about #sec-3 .container .text {
  position: absolute;
  top: 125px;
  left: 167px;
  width: 437px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.about #sec-3 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-3 .container .text {
    top: 8.33333333vw;
    left: 11.13333333vw;
    width: 29.13333333vw;
  }
}
@media (max-width: 768px) {
  .about #sec-3 .container .text {
    top: 56.90104167vw;
    left: 7.68229167vw;
    width: 69.79166667vw;
  }
}
.about #sec-4 {
  height: 516px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-4 {
    height: 34.4vw;
  }
}
@media (max-width: 768px) {
  .about #sec-4 {
    height: 100.65104167vw;
  }
}
.about #sec-4 .bg-container {
  background-image: url(../img/about/sec-4.jpg);
}
@media (max-width: 768px) {
  .about #sec-4 .bg-container {
    background-image: url(../img/about/sec-4-m.jpg);
  }
}
.about #sec-4 .container .text {
  position: absolute;
  top: 87px;
  left: 655px;
  width: 190px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.about #sec-4 .container .text.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-4 .container .text {
    top: 5.8vw;
    left: 43.66666667vw;
    width: 12.66666667vw;
  }
}
@media (max-width: 768px) {
  .about #sec-4 .container .text {
    top: 11.328125vw;
    left: 36.45833333vw;
    width: 24.73958333vw;
  }
}
.about #sec-4 .container #sec-4-swiper {
  position: absolute;
  top: 180px;
  left: 100px;
  width: 1300px;
  animation-delay: 0s;
  transform: translateY(40px);
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.about #sec-4 .container #sec-4-swiper.active {
  animation-name: an_none;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-4 .container #sec-4-swiper {
    top: 12vw;
    left: 6.66666667vw;
    width: 86.66666667vw;
  }
}
@media (max-width: 768px) {
  .about #sec-4 .container #sec-4-swiper {
    top: 26.5625vw;
    left: 0;
    width: 100%;
  }
  .about #sec-4 .container #sec-4-swiper .swiper-slide {
    width: 51.5625vw;
  }
}
.about #sec-4 .container #sec-4-swiper .container {
  position: absolute;
  width: 100%;
  top: 0;
  pointer-events: none;
  z-index: 3;
}
.about #sec-4 .container #sec-4-swiper .container .swiper-pagination {
  display: none;
}
@media (max-width: 768px) {
  .about #sec-4 .container #sec-4-swiper .container .swiper-pagination {
    display: block;
    bottom: -5.20833333vw;
  }
}
.about #sec-4 .container #sec-4-swiper .container .swiper-pagination .swiper-pagination-bullet {
  border: 1px solid #283b67;
}
.about #sec-4 .container #sec-4-swiper .container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #283b67;
}
.about #sec-4 .container #sec-4-swiper img {
  max-width: none;
  width: 100%;
}
.about #sec-4 .container #sec-4-swiper p {
  font-size: 25px;
  margin-top: -30px;
  color: #000;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-4 .container #sec-4-swiper p {
    font-size: 1.66666667vw;
    margin-top: -2vw;
  }
}
@media (max-width: 768px) {
  .about #sec-4 .container #sec-4-swiper p {
    margin-top: 0;
    font-size: 4.16666667vw;
  }
}
.about #sec-5 {
  height: 600px;
}
@media (max-width: 1500px) and (min-width: 769px) {
  .about #sec-5 {
    height: 40vw;
  }
}
@media (max-width: 768px) {
  .about #sec-5 {
    height: 65.10416667vw;
  }
}
.about #sec-5 .bg-container {
  background-image: url(../img/index/sec-8.png);
}
@media (max-width: 768px) {
  .about #sec-5 .bg-container {
    background-image: url(../img/index/sec-8-m.png);
    background-color: #4c4c4c;
  }
}
.popup-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.popup-wrap .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 390px;
}
@media (max-width: 800px) {
  .popup-wrap .popup {
    width: 100%;
    height: 0;
    padding-top: 56%;
  }
}
.popup-wrap .popup iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.popup-wrap .popup .close {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .popup-wrap .popup .close {
    right: 10px;
  }
}
.popup-wrap .popup .close span {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.popup-wrap .popup .close span:first-child {
  transform: rotate(45deg);
}
.popup-wrap .popup .close span:last-child {
  transform: rotate(-45deg);
}