@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#body {
  background-color: #fff;
  overflow-y: scroll;
}

#body.active {
  overflow-y: hidden;
}

#body #header {
  width: 1920px;
  position: relative;
}

#body #header .container {
  width: 100%;
}

#body #header .container .logo {
  position: absolute;
  top: 25px;
  left: 40px;
  text-decoration: none;
  z-index: 2;
}

#body #header .container .logo-bg {
  width: 337px;
  height: 189px;
  position: absolute;
  top: 10px;
  left: -20px;
  background-image: url(../img/logo-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  z-index: 1;
}

#body #header .container .toggle {
  width: 70px;
  height: 70px;
  position: fixed;
  top: 20px;
  right: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  z-index: 23;
}

#body #header .container .toggle span {
  position: absolute;
}

#body #header .container .toggle span:first-child {
  width: 40px;
  height: 4px;
  background: #003ca0;
  border-radius: 4px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

#body #header .container .toggle span:nth-child(2) {
  width: 40px;
  height: 4px;
  background: #003ca0;
  border-radius: 4px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#body #header .container .toggle span:last-child {
  font-size: 14px;
  font-family: sans-serif;
  color: #003ca0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

#body #header .container .toggle.active span:first-child {
  -webkit-transform: translateY(-12px) rotate(45deg);
          transform: translateY(-12px) rotate(45deg);
  -webkit-transition-delay: 0.125s;
          transition-delay: 0.125s;
}

#body #header .container .toggle.active span:nth-child(2) {
  -webkit-transform: translateY(-12px) rotate(315deg);
          transform: translateY(-12px) rotate(315deg);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

#body #header .container .toggle-bg {
  width: 240px;
  height: 164px;
  position: fixed;
  top: 0;
  right: 0;
  background-image: url(../img/trigger-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
  z-index: 20;
}

#body #header .container .toggle-bg.active {
  display: none;
}

#body main #index {
  position: relative;
  width: 100%;
  background-color: #f5f8fc;
  overflow: hidden;
}

#body main #index .background {
  width: 100%;
  height: 100vh;
  background-image: url(../img/首頁背景雲朵.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

#body main #index .navigation {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background: white;
  -webkit-transition: 0.8s;
  transition: 0.8s;
  z-index: 18;
}

#body main #index .navigation.active {
  right: 0;
  position: fixed;
}

#body main #index .navigation .content {
  width: 450px;
  height: 100%;
  padding: 180px 120px;
  background: #f5f8fc;
}

#body main #index .navigation .content ul li {
  list-style: none;
  padding-bottom: 15px;
}

#body main #index .navigation .content ul li a {
  position: relative;
  text-decoration: none;
  font-size: 1.8rem;
  font-family: sans-serif;
  letter-spacing: 0.06rem;
  line-height: 150%;
  color: #4d4d4d;
}

#body main #index .navigation .content ul li:last-child {
  padding-bottom: 80px;
}

#body main #index .navigation .content .sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#body main #index .navigation .content .sns a {
  text-decoration: none;
  color: #4d4d4d;
  font-size: 30px;
  padding: 0 20px 100px;
  cursor: pointer;
}

#body main #index .navigation .content .sns a:first-child {
  padding-left: 0;
}

#body main #index .navigation .content .language {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

#body main #index .navigation .content .language a {
  text-decoration: none;
  color: #4d4d4d;
  font-size: 30px;
  padding-right: 20px;
}

#body main #index .navigation .content .language span {
  font-size: 18px;
  font-family: sans-serif;
}

#body main #index .navigation .images {
  width: 1100px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#body main #index .navigation .images a {
  position: relative;
  width: 100%;
  height: 33.33vh;
  text-decoration: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.9;
}

#body main #index .navigation .images a:first-child {
  background-image: url(../img/navigation-img1.jpg);
}

#body main #index .navigation .images a:nth-child(2) {
  background-image: url(../img/navigation-img2.jpg);
}

#body main #index .navigation .images a:last-child {
  background-image: url(../img/navigation-img3.jpg);
}

#body main #index .navigation .images a .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 35px;
}

#body main #index .navigation .images a .text .item {
  position: relative;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 700;
  font-family: sans-serif;
  color: #f5f8fc;
}

#body main #index .navigation .images a .text .item::after {
  content: "";
  width: 60px;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 10px;
  background: #f5f8fc;
}

#body main #index .navigation .images a .text .title {
  position: relative;
  padding: 10px;
  font-size: 48px;
  font-weight: 700;
  font-family: '台灣圓體';
  color: #4d4d4d;
  -webkit-text-stroke: 2px #f5f8fc;
}

#body main #index .navigation .images a .text .title::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 10px;
  width: 30%;
  height: 20px;
  background: #ffd648;
  z-index: -1;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

#body main #index .navigation .images a .text .title:hover:before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

#body main #index .scroll {
  position: absolute;
  bottom: 0;
  left: 960px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#body main #index .scroll p {
  font-size: 14px;
  font-family: sans-serif;
  color: #003ca0;
  padding-bottom: 10px;
}

#body main #index .scroll .dot {
  width: 6px;
  height: 6px;
  margin-bottom: 6px;
  background-color: #003ca0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  list-style: none;
}

#body main #index .scroll .dot:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#body main #index .scroll .dot:last-child {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  margin-bottom: 0px;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#body main #index .sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  bottom: 20px;
  left: 40px;
  height: 100%;
  z-index: 15;
}

#body main #index .sidebar p {
  position: relative;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 1px;
  font-family: sans-serif;
  padding-bottom: 80px;
  color: #4d4d4d;
}

#body main #index .sidebar p::before {
  display: block;
  content: "";
  position: absolute;
  top: 90px;
  left: 9px;
  background: #4d4d4d;
  width: 1.5px;
  height: 50px;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

#body main #index .sidebar a {
  padding: 10px 0;
  text-decoration: none;
  color: #4d4d4d;
}

#body main #index .sidebar a .fab {
  font-size: 25px;
}

#body main #index .languagebar {
  position: fixed;
  bottom: 30px;
  right: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  z-index: 15;
}

#body main #index .languagebar a {
  text-decoration: none;
  color: #4d4d4d;
  font-size: 28px;
  padding-bottom: 10px;
}

#body main #index .languagebar span {
  font-size: 16px;
  font-family: sans-serif;
}

#body main #concept {
  position: relative;
  width: 100%;
  height: 1300px;
  background-color: #f5f8fc;
}

#body main #concept .bg {
  background-image: url(../img/bg.svg);
  background-repeat: repeat-x;
  background-position: calc(50% - 0px);
  width: 100%;
  height: 875px;
  position: absolute;
  top: 280px;
  left: 0;
  z-index: 0;
}

#body main #concept .img-1 {
  background-image: url(../img/珍珠奶茶雪糕.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 396.5px;
  height: 396.5px;
  border-radius: 50%;
  position: absolute;
  top: 660px;
  left: calc(50% + 294px);
  z-index: 5;
}

#body main #concept .img-2 {
  background-image: url(../img/小碗冰淇淋.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: absolute;
  bottom: 60px;
  left: 420px;
  z-index: 5;
}

#body main #concept .img-3 {
  background-image: url(../img/吃冰小朋友.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: absolute;
  top: 200px;
  right: calc(50% + 300px);
  z-index: 5;
}

#body main #concept .title {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 32px;
  font-weight: 700;
  font-family: '台灣圓體';
  letter-spacing: 0.66rem;
  line-height: 1.7;
  position: absolute;
  top: 250px;
  left: calc(50% - 52px);
  color: #f5f8fc;
  z-index: 10;
}

#body main #concept .title-bg {
  width: 450px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  top: 150px;
  left: calc(50% - 210px);
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
  background-color: #e60014;
  z-index: 4;
}

#body main #concept .text {
  width: 500px;
  font-size: 18px;
  font-weight: 500;
  font-family: '台灣圓體';
  text-align: center;
  line-height: 2.4;
  position: absolute;
  bottom: 100px;
  left: calc(50% - 230px);
  color: #292929;
  z-index: 10;
}

#body main #concept .text-bg {
  width: 800px;
  height: 600px;
  border-radius: 50%;
  position: absolute;
  bottom: 25px;
  left: calc(50% - 380px);
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  background-color: #ffd648;
  z-index: 3;
}

#body main #concept .ball-1 {
  width: 400px;
  height: 400px;
  position: absolute;
  bottom: 200px;
  left: 340px;
}

#body main #concept .ball-2 {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 400px;
  right: 120px;
}

#body main #products {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 280px 240px 230px;
  background-color: #f5f8fc;
  overflow: hidden;
}

#body main #products .title {
  position: absolute;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0.48rem;
  font-family: sans-serif;
  z-index: 5;
}

#body main #products .title .red {
  padding: 5px;
  color: #e60014;
}

#body main #products .title .blue {
  color: #003ca0;
}

#body main #products .title-bg {
  width: 900px;
  height: 885px;
  position: absolute;
  top: 0;
  left: -50px;
  background-image: url(../img/products-title-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

#body main #products .products-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: -130px;
  padding: 430px 150px 0;
}

#body main #products .products-list .products-item {
  position: relative;
  width: 460px;
  margin-bottom: 130px;
  padding: 25px;
  border-radius: 230px 230px 20px 20px;
  text-decoration: none;
  z-index: 10;
}

#body main #products .products-list .products-item:first-child {
  margin-top: -200px;
  background-color: #ffd648;
  color: #292929;
}

#body main #products .products-list .products-item:nth-child(2) {
  background-color: #e60014;
  color: #f5f8fc;
}

#body main #products .products-list .products-item:nth-child(3) {
  margin-top: -100px;
  background-color: #003ca0;
  color: #ffd648;
}

#body main #products .products-list .products-item:last-child {
  margin-top: 100px;
  background-color: #ffd648;
  color: #292929;
}

#body main #products .products-list .products-item .img {
  position: relative;
  margin-bottom: 40px;
  padding-top: 110%;
  border-radius: 215px 215px 5px 5px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#body main #products .products-list .products-item .img-1 {
  background-image: url(../img/products-img1.jfif);
}

#body main #products .products-list .products-item .img-2 {
  background-image: url(../img/products-img2.jfif);
}

#body main #products .products-list .products-item .img-3 {
  background-image: url(../img/products-img3.jfif);
}

#body main #products .products-list .products-item .img-4 {
  background-image: url(../img/products-img4.jfif);
}

#body main #products .products-list .products-item .item-title {
  font-size: 28px;
  font-weight: 600;
  font-family: '台灣圓體';
  line-height: 26px;
  text-align: center;
  margin-bottom: 35px;
}

#body main #products .products-list .products-item .item-text {
  font-size: 18px;
  font-family: '台灣圓體';
  line-height: 2;
}

#body main #products .products-list-bg {
  width: 600px;
  height: 800px;
  position: absolute;
  bottom: 0;
  right: -240px;
  background-image: url(../img/products-list-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

#body main #products .ball-1 {
  width: 500px;
  height: 400px;
  position: absolute;
  bottom: 280px;
  left: 80px;
}

#body main #products .ball-2 {
  width: 600px;
  height: 650px;
  position: absolute;
  top: 830px;
  right: calc(50% - 330px);
}

#body main #products .ball-3 {
  width: 500px;
  height: 450px;
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
  position: absolute;
  top: 150px;
  right: 80px;
}

#body main #history {
  position: relative;
  padding-top: 150px;
  padding-bottom: 150px;
  background-color: #003ca0;
  z-index: 10;
  overflow: hidden;
}

#body main #history .inner {
  position: relative;
  width: 1096px;
  height: 950px;
  margin: 0 auto;
  z-index: 10;
}

#body main #history .inner .bg-typo {
  width: 12000px;
  height: 350px;
  display: block;
  position: absolute;
  top: 190px;
  left: 0;
  background-image: url(../img/history-typo-shaomei.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-animation: 70s linear 0s infinite running motion;
          animation: 70s linear 0s infinite running motion;
}

@-webkit-keyframes motion {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-6000px);
            transform: translateX(-6000px);
  }
}

@keyframes motion {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-6000px);
            transform: translateX(-6000px);
  }
}

#body main #history .inner .circile-year {
  width: 750px;
  height: 750px;
  position: absolute;
  top: 0;
  left: 225px;
  background-image: url(../img/history-cicyle-year.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#body main #history .inner .title {
  width: 280px;
  height: 474px;
  position: absolute;
  top: 130px;
  left: 66px;
}

#body main #history .inner .title .num {
  font-size: 120px;
  font-weight: 400;
  font-family: sans-serif;
  padding-top: 70px;
  line-height: 1;
  color: #ffd648;
}

#body main #history .inner .title .text {
  font-size: 18px;
  font-weight: 600;
  font-family: '台灣圓體';
  margin-top: 20px;
  line-height: 1.5;
  color: #ffd648;
}

#body main #history .inner .imgs {
  position: absolute;
  top: -20px;
  left: 224px;
  width: 760px;
  height: 760px;
  background-image: url(../img/history-img1.png);
  background-repeat: no-repeat;
  background-position: center center;
}

#body main #history .inner .btn-prev {
  text-decoration: none;
  color: #e60014;
  width: 85px;
  height: 85px;
  position: absolute;
  bottom: 0;
  left: 350px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

#body main #history .inner .btn-prev .text {
  font-size: 14px;
  font-weight: 600;
  font-family: sans-serif;
  letter-spacing: 0.2rem;
}

#body main #history .inner .btn-prev .text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #e60014;
  border-radius: 50%;
}

#body main #history .inner .btn-prev .arrow {
  position: absolute;
  left: -18px;
}

#body main #history .inner .btn-prev .arrow::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background-color: #e60014;
}

#body main #history .inner .btn-prev .arrow::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  width: 12px;
  height: 2px;
  background-color: #e60014;
}

#body main #history .inner .btn-next {
  text-decoration: none;
  color: #e60014;
  width: 85px;
  height: 85px;
  position: absolute;
  bottom: 0;
  left: 670px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

#body main #history .inner .btn-next .text {
  font-size: 14px;
  font-weight: 600;
  font-family: sans-serif;
  letter-spacing: 0.2rem;
}

#body main #history .inner .btn-next .text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #e60014;
  border-radius: 50%;
}

#body main #history .inner .btn-next .arrow {
  position: absolute;
  right: -18px;
}

#body main #history .inner .btn-next .arrow::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background-color: #e60014;
}

#body main #history .inner .btn-next .arrow::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transform-origin: right;
          transform-origin: right;
  width: 12px;
  height: 2px;
  background-color: #e60014;
}

#body main #history .inner .pager {
  width: 95px;
  height: 75px;
  position: absolute;
  bottom: 4px;
  left: 490px;
  color: #e60014;
  font-family: sans-serif;
}

#body main #history .inner .pager .page {
  font-size: 46px;
  font-weight: 400;
  position: absolute;
  top: 25px;
  right: 30px;
}

#body main #history .inner .pager .hr {
  width: 25px;
  height: 2px;
  position: absolute;
  top: 28px;
  right: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #e60014;
}

#body main #history .inner .pager .total {
  font-size: 18px;
  font-weight: 400;
  position: absolute;
  top: 0;
  right: 0;
}

#body main #main-video {
  position: relative;
  padding-top: 300px;
  padding-bottom: 120px;
  background-color: #ffd648;
}

#body main #main-video .title-en {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5rem;
  font-family: sans-serif;
  position: absolute;
  top: 250px;
  left: calc(50% - 100px);
  z-index: 10;
}

#body main #main-video .title-en .red {
  padding: 5px;
  color: #e60014;
}

#body main #main-video .title-en .blue {
  color: #003ca0;
}

#body main #main-video .title-tw {
  font-size: 17px;
  font-weight: 500;
  font-family: '台灣圓體';
  line-height: 1;
  letter-spacing: 0.2rem;
  margin-top: 18px;
  text-align: center;
  color: #4d4d4d;
}

#body main #main-video .video {
  width: 1440px;
  height: 844px;
  position: relative;
  margin: 45px auto;
  overflow: hidden;
}

#body main #main-video .video .img {
  width: 100%;
  height: 100%;
  background-image: url(../img/main-vadio.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 3;
}

#body main #main-video .video .cover-top {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e60014;
  z-index: 5;
}

#body main #main-video .video .cover-bottom {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #e60014;
  z-index: 5;
}

#body main #main-video .video .btn {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 348px;
  left: calc(50% - 35px);
  background-image: url(../img/video-btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

#body main #main-video .video .btn-typo {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 292px;
  left: calc(50% - 90px);
  background-image: url(../img/video-btn-typo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-animation: 24s linear 0s infinite running btn-motion;
          animation: 24s linear 0s infinite running btn-motion;
}

@-webkit-keyframes btn-motion {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes btn-motion {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

#body main #main-video .ball {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -150px;
  left: calc(50% - 420px);
}

#body main #movies {
  position: relative;
  padding-top: 150px;
  padding-bottom: 200px;
  width: 100%;
  background-color: #ffd648;
}

#body main #movies .title-en {
  position: absolute;
  top: 80px;
  left: calc(50% - 160px);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5rem;
  font-family: sans-serif;
  text-align: center;
  z-index: 5;
}

#body main #movies .title-en .red {
  padding: 5px;
  color: #e60014;
}

#body main #movies .title-en .blue {
  color: #003ca0;
}

#body main #movies .title-tw {
  font-size: 17px;
  font-weight: 500;
  font-family: '台灣圓體';
  line-height: 1;
  letter-spacing: 0.2rem;
  margin-top: 18px;
  text-align: center;
  color: #4d4d4d;
}

#body main #movies .movies-list {
  margin: 90px auto;
  width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#body main #movies .movies-list .movie-item {
  width: 540px;
  padding-bottom: 30px;
  overflow: hidden;
  cursor: pointer;
}

#body main #movies .movies-list .movie-item:first-child .img {
  background-image: url(../img/movies-img1.png);
}

#body main #movies .movies-list .movie-item:nth-child(2) {
  margin-top: 90px;
}

#body main #movies .movies-list .movie-item:nth-child(2) .img {
  background-image: url(../img/movies-img2.png);
}

#body main #movies .movies-list .movie-item:nth-child(3) .img {
  background-image: url(../img/movies-img3.png);
}

#body main #movies .movies-list .movie-item:last-child {
  margin-top: 90px;
}

#body main #movies .movies-list .movie-item:last-child .img {
  background-image: url(../img/movies-img4.png);
}

#body main #movies .movies-list .movie-item .movie {
  position: relative;
  height: 306px;
}

#body main #movies .movies-list .movie-item .movie .img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#body main #movies .movies-list .movie-item .movie .cover-top {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e60014;
  z-index: 10;
}

#body main #movies .movies-list .movie-item .movie .cover-bottom {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #e60014;
  z-index: 10;
}

#body main #movies .movies-list .movie-item .movie .btn {
  width: 70px;
  height: 70px;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 40px);
  background-image: url(../img/video-btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

#body main #movies .movies-list .movie-item .title {
  font-size: 24px;
  font-family: '台灣圓體';
  margin-top: 34px;
  text-align: justify;
  line-height: 1.75;
}

#body main #movies .title-bg {
  background-image: url(../img/movie-title-bg.svg);
  background-repeat: repeat-x;
  background-position: top right;
  width: 100%;
  height: 875px;
  position: absolute;
  top: -68px;
  left: 0;
  z-index: 0;
}

#body main #news {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 150px 372px 250px;
  background-color: #4d4d4d;
}

#body main #news .title {
  font-size: 60px;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: 0.48rem;
  text-align: center;
}

#body main #news .title span {
  display: inline-block;
}

#body main #news .title .yellow {
  color: #ffd648;
  padding: 0.48rem;
}

#body main #news .title .white {
  color: #f5f8fc;
}

#body main #news .news-list {
  margin-top: 70px;
  margin-bottom: 100px;
}

#body main #news .news-list::after {
  content: "";
  display: table;
  clear: both;
}

#body main #news .news-list .news-item {
  width: 352px;
  float: left;
  margin-left: 60px;
  text-decoration: none;
  color: #292929;
  cursor: pointer;
}

#body main #news .news-list .news-item .img {
  width: 100%;
  height: 264px;
  background-size: cover;
}

#body main #news .news-list .news-item .img-1 {
  background-image: url(../img/news-img1.jfif);
}

#body main #news .news-list .news-item .img-2 {
  background-image: url(../img/news-img2.jfif);
}

#body main #news .news-list .news-item .img-3 {
  background-image: url(../img/news-img3.jfif);
}

#body main #news .news-list .news-item .title {
  font-size: 18px;
  font-weight: 700;
  font-family: '台灣圓體';
  line-height: 2;
  margin-top: 20px;
  text-align: justify;
  color: #f5f8fc;
}

#body main #news .news-list .news-item .text {
  font-size: 14px;
  font-family: '台灣圓體';
  line-height: 2;
  margin-top: 10px;
  text-align: justify;
  color: #f5f8fc;
}

#body main #news .news-list .news-item:first-child {
  margin-left: 0;
}

#body main #news .news-btn {
  text-decoration: none;
  position: relative;
  width: 260px;
  height: 60px;
  margin: 60px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#body main #news .news-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e60014;
  z-index: 1;
}

#body main #news .news-btn .text {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12rem;
  font-family: sans-serif;
  color: #f5f8fc;
  z-index: 3;
}

#body main #news .news-btn .arrow {
  display: block;
  width: 24px;
  height: 6px;
  position: absolute;
  top: auto;
  right: 16px;
  z-index: 10;
}

#body main #news .news-btn .arrow::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: top right;
          transform-origin: top right;
  width: 10px;
  height: 1px;
  background-color: #f5f8fc;
  z-index: 1;
}

#body main #news .news-btn .arrow::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 1px;
  background-color: #f5f8fc;
  z-index: 1;
}

#body main #news .left-bg {
  width: 400px;
  height: 950px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/news-left-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#body main #news .right-bg {
  width: 490px;
  height: 800px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/news-right-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#body main #news .bottom-bg {
  width: 100%;
  height: 300px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/news-bottom-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#body main #business {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 300px 400px 70px;
  background-color: #fff;
}

#body main #business .title {
  position: absolute;
  top: 250px;
  left: 300px;
  font-size: 72px;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: 0.48rem;
  z-index: 5;
}

#body main #business .title .red {
  padding: 5px;
  color: #e60014;
}

#body main #business .title .blue {
  color: #003ca0;
}

#body main #business .title-bg {
  width: 1450px;
  height: 1600px;
  position: absolute;
  top: -90px;
  left: 0;
  background-image: url(../img/business-title-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#body main #business .text {
  position: absolute;
  top: 360px;
  left: 310px;
  font-size: 18px;
  font-family: '台灣圓體';
  line-height: 2;
  z-index: 5;
}

#body main #business .business-list {
  margin-top: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#body main #business .business-list .corporate, #body main #business .business-list .contact {
  text-decoration: none;
  width: 50%;
  height: 500px;
  position: relative;
}

#body main #business .business-list .corporate .title-1, #body main #business .business-list .corporate .title-2, #body main #business .business-list .contact .title-1, #body main #business .business-list .contact .title-2 {
  font-size: 30px;
  letter-spacing: 0.42rem;
  padding-top: 230px;
  text-align: center;
}

#body main #business .business-list .corporate .tag-1, #body main #business .business-list .corporate .tag-2, #body main #business .business-list .contact .tag-1, #body main #business .business-list .contact .tag-2 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0.3rem;
  position: absolute;
  bottom: -8px;
}

#body main #business .business-list .corporate .arrow-1, #body main #business .business-list .corporate .arrow-2, #body main #business .business-list .contact .arrow-1, #body main #business .business-list .contact .arrow-2 {
  width: 55px;
  height: 18px;
  position: absolute;
  top: calc(50% - 13px);
  right: 32px;
}

#body main #business .business-list .corporate .arrow-1::before, #body main #business .business-list .corporate .arrow-2::before, #body main #business .business-list .contact .arrow-1::before, #body main #business .business-list .contact .arrow-2::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

#body main #business .business-list .corporate .arrow-1::after, #body main #business .business-list .corporate .arrow-2::after, #body main #business .business-list .contact .arrow-1::after, #body main #business .business-list .contact .arrow-2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55px;
  height: 1px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

#body main #business .business-list .corporate {
  background-color: #e60014;
  color: #fff;
  font-family: '台灣圓體';
}

#body main #business .business-list .corporate .tag-1 {
  left: 70px;
  font-family: sans-serif;
}

#body main #business .business-list .corporate .arrow-1::before {
  background-color: #fff;
}

#body main #business .business-list .corporate .arrow-1::after {
  background-color: #fff;
}

#body main #business .business-list .contact {
  background-color: #ffd648;
  color: #4d4d4d;
  top: 100px;
  font-family: '台灣圓體';
}

#body main #business .business-list .contact .tag-2 {
  left: 150px;
  font-family: sans-serif;
}

#body main #business .business-list .contact .arrow-2::before {
  background-color: #4d4d4d;
}

#body main #business .business-list .contact .arrow-2::after {
  background-color: #4d4d4d;
}

#body main #company {
  position: relative;
  width: 1920px;
  padding: 180px 624px 450px;
  margin: 0 auto;
}

#body main #company table {
  font-size: 24px;
  font-family: '台灣圓體';
  color: #4d4d4d;
  line-height: 1.75;
  border-spacing: 0 54px;
  border-collapse: separate;
}

#body main #company table th {
  vertical-align: top;
  width: 230px;
  font-weight: 400;
  text-align: left;
}

#body main #company table td {
  vertical-align: top;
  font-weight: 400;
  text-align: left;
}

#body main #company .bottom-bg {
  width: 362px;
  height: 492px;
  position: absolute;
  bottom: 300px;
  right: 0;
  background-image: url(../img/business-bottom-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#body #footer {
  position: relative;
  width: 100%;
  height: 200px;
  z-index: 16;
}

#body #footer .inner {
  width: 1200px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  position: relative;
  margin: 0 auto;
  z-index: 2;
}

#body #footer .inner .sns {
  width: 150px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#body #footer .inner .sns a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #ffd648;
}

#body #footer .inner .sns a span {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

#body #footer .inner .sns a .fb::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: -2px;
  left: -0.5px;
  border: 1px solid #ffd648;
  border-radius: 50%;
}

#body #footer .inner .sns a .ig::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: -2px;
  left: 54.5px;
  border: 1px solid #ffd648;
  border-radius: 50%;
}

#body #footer .inner .sns a .yt::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: -2px;
  left: 109.5px;
  border: 1px solid #ffd648;
  border-radius: 50%;
}

#body #footer .inner .sns a .fab {
  font-size: 20px;
}

#body #footer .inner .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#body #footer .inner .nav a {
  text-decoration: none;
  font-size: 16px;
  font-family: sans-serif;
  letter-spacing: 0.12rem;
  padding: 8px 0;
  color: #ffd648;
  margin-left: 27px;
}

#body #footer .copyright {
  font-size: 12px;
  font-weight: 700;
  font-family: '台灣圓體';
  color: #e60014;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 64px;
  z-index: 5;
}

#body #footer .bg-wave {
  width: 100%;
  height: 528px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/footer-wave.svg);
  background-position: calc(50% - 230px) 0;
  background-repeat: repeat-x;
  background-size: cover;
  z-index: 1;
}

#body #footer .page-top {
  width: 60px;
  height: 98px;
  position: absolute;
  right: 30px;
  bottom: 50px;
  z-index: 110;
}

#body #footer .page-top .shape {
  width: 60px;
  height: 98px;
  position: relative;
  cursor: pointer;
}

#body #footer .page-top .shape .circle {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 50%;
}

#body #footer .page-top .shape .arrow {
  width: 68px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 30px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: #292929;
}

#body #footer .page-top .shape .arrow::before {
  content: "";
  width: 20px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: #292929;
}

#body #footer .page-top .shape .arrow::after {
  content: "";
  width: 20px;
  height: 1px;
  position: absolute;
  top: -14px;
  left: 14px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background-color: #292929;
}
/*# sourceMappingURL=shaomei.css.map */