@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@keyframes iconMotion {
  from {
    transform: translateY(min(10px, 0.7143vw));
  }
  to {
    transform: translateY(max(-10px, -0.7143vw));
  }
}
@keyframes modalMotion {
  from {
    opacity: 0;
    right: calc(50% - 100px);
  }
  to {
    opacity: 1;
    right: 50%;
  }
}
@keyframes titlePC {
  from {
    opacity: 0;
    right: calc(50% + 100px);
  }
  to {
    opacity: 1;
    right: 50%;
  }
}
@keyframes titleMB {
  from {
    opacity: 0;
    left: calc(50% - 100px);
  }
  to {
    opacity: 1;
    left: 50%;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul, li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  background: transparent;
}

.btn {
  cursor: pointer;
}

html, body {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
}

.hover-light {
  transition: all 0.3s ease-in-out;
}
.hover-light:hover {
  filter: brightness(125%);
  transition: all 0.3s ease-in-out;
}

body {
  overflow-x: hidden;
  background-image: url(../imgs/bg-grid-pink.svg), url(../imgs/bg-grid-pink.svg), url(../imgs/bg-grid-green.svg), url(../imgs/bg-grid-green.svg), url(../imgs/bg-cloud-purplepink.jpg), url(../imgs/bg-cloud-greenblue.jpg), url(../imgs/bg-cloud-pink.jpg), url(../imgs/bg-cloud-lightgreen.jpg);
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(../imgs/header-bg.svg);
  background-repeat: repeat-x;
  background-position: bottom center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}
#header .logo {
  cursor: pointer;
}
#header .menu {
  position: absolute;
  top: calc(100% - 7px);
  background-image: url(../imgs/menu-bg.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  color: #727171;
  text-align: center;
  z-index: 2;
  font-size: min(32px, 4.2vw);
  width: min(283px, 36.75vw);
  display: none;
}
#header .menu-btn {
  position: relative;
  background: #70c8c8;
}
#header .menu-btn span {
  position: absolute;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 3px;
}
#header .menu-btn span:nth-of-type(1) {
  top: 25%;
}
#header .menu-btn span:nth-of-type(3) {
  bottom: 25%;
}
#header .menu-btn span:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}
#header .menu-list {
  width: min(236px, 30.76vw);
  padding: min(17px, 2.15vw);
  margin: 0 auto;
}
#header .menu-list:not(:last-of-type) {
  border-bottom: 3px solid #fff;
}
#header .menu-item {
  transition: all 0.3s ease-in-out;
}
#header .menu-item:hover {
  color: #fff794;
  transition: all 0.3s ease-in-out;
}
#header .menu.open {
  display: block;
}
#header.reduse .menu {
  width: 36.75vh;
  font-size: 3.56vh;
}
#header.reduse .menu-list {
  width: 30.53vh;
  padding: 1.69vh 0;
}

#kv {
  position: relative;
  text-align: center;
  width: 100%;
}
#kv .model, #kv .title, #kv .icon {
  position: absolute;
}
#kv .model {
  transform: translateX(50%);
  opacity: 0;
  animation: modalMotion 0.5s ease-in-out forwards;
}
#kv .icon-bg {
  transform: translateX(50%);
  right: 50%;
}

#publicity {
  color: #525252;
}
#publicity .title {
  background-image: url(../imgs/publicity-title_bg.svg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  margin: 0 auto 3px auto;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
#publicity .film {
  text-align: center;
}

#conmic {
  text-align: center;
  background-image: url(../imgs/conmic-bg.svg);
  background-repeat: no-repeat;
}
#conmic .author {
  color: #28a7e5;
  line-height: 1.3;
  font-weight: bolder;
}
#conmic .pic {
  display: inline-block;
  margin: -2px -1px;
}
#conmic .btn_magnifier {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #20afe4;
  cursor: pointer;
}
#conmic .btn_magnifier img {
  display: block;
  transition: all 0.3s ease-in-out;
}
#conmic .btn_magnifier:hover img {
  transition: all 0.3s ease-in-out;
  filter: brightness(120%);
}
#conmic .swiper-control, #conmic .conmic-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
#conmic .conmic-btn-prev {
  transform: scaleX(-1);
}
#conmic .swiper-pagination-bullet {
  border-radius: 50%;
  border: 1px solid #2fa7df;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
#conmic .swiper-pagination-bullet-active {
  background-color: #2fa7df;
  transition: all 0.3s ease-in-out;
  cursor: default;
}

#card {
  background-image: url(../imgs/card-bg.svg);
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}
#card .title {
  color: #fff;
  font-weight: bolder;
  text-align: center;
  line-height: 1.25;
  background-image: url(../imgs/card-title_bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}
#card .btn_download {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e97599;
  cursor: pointer;
}
#card .btn_download img {
  display: block;
  transition: all 0.3s ease-in-out;
}
#card .btn_download:hover img {
  filter: brightness(120%);
  transition: all 0.3s ease-in-out;
}
#card .swiper-control {
  display: flex;
  justify-content: center;
  align-items: center;
}
#card .card-btn-prev {
  transform: scaleX(-1);
}
#card .swiper-pagination-bullet {
  border-radius: 50%;
  border: 1px solid #e79;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
#card .swiper-pagination-bullet-active {
  background-color: #e79;
  transition: all 0.3s ease-in-out;
  cursor: default;
}
#card .card {
  perspective: 1000px;
}
#card .card-tint {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  left: 50%;
  line-height: 1.1;
  border-radius: min(5px, 0.35715vw);
}
#card .card-flip {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
#card .card-hidden {
  opacity: 0;
}
#card .card img {
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#card .card-back {
  transform: rotateY(180deg);
}

#benefit .title {
  background-image: url(../imgs/benefit-title_bg.svg);
  background-repeat: no-repeat;
  color: #fff;
  background-position: bottom center;
  font-weight: bolder;
  text-align: center;
}
#benefit .benefit {
  position: relative;
  background-image: url(../imgs/benefit-item_bg.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#benefit .benefit-photo, #benefit .benefit-more {
  position: absolute;
}
#benefit .benefit-text {
  color: #333;
  line-height: 1.5;
}
#benefit .benefit-title {
  color: #fff;
  background-image: url(../imgs/benefit-item_title_bg.svg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
  line-height: 1.2;
  display: inline-block;
}
#benefit .benefit-more {
  display: inline-block;
  background-image: url(../imgs/benefit-item_btn_more.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  text-align: center;
  color: #fff;
  right: 0;
  font-weight: bolder;
}

#film {
  text-align: center;
}
#film .title {
  background-image: url(../imgs/film-title_bg.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  color: #fff;
  line-height: 1.2;
  font-weight: bolder;
}
#film .film {
  background-image: url(../imgs/film-bg.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

#link {
  text-align: center;
}
#link .title {
  background-image: url(../imgs/link-title_bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  color: #fff;
  line-height: 1.2;
}
#link > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#link > div [href] {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: url(../imgs/link-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  flex-direction: column;
  color: #554;
  line-height: 1.375;
}
#link > div [href] .icon {
  height: 51.8%;
}

#footer {
  background-image: url(../imgs/footer-bg.svg);
  background-repeat: repeat-x;
  background-size: auto calc(100% + 10px);
  background-position: top center;
  color: #554;
  line-height: 1.25;
  text-align: center;
}
#footer .social {
  display: block;
  transition: all 0.3s ease-in-out;
}
#footer .social:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}
#footer .social-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
#footer span {
  border: min(2px, 0.14286vw) solid #554;
  display: inline-block;
  padding: 0 0.1em 0.1em 0.1em;
  margin: 0.2em;
  font-size: 0.9em;
}

#lightbox {
  position: absolute;
  z-index: 99;
  width: 100%;
  padding: min(400px, 28.572vw) 0 min(550px, 39.2865vw) 0;
  text-align: center;
  top: 0;
  left: 0;
  background-image: linear-gradient(rgba(230, 230, 230, 0.9), rgba(200, 200, 200, 0.9));
  display: none;
}
#lightbox.open {
  display: block;
}
#lightbox br {
  display: none;
}
#lightbox .author {
  color: #28a7e5;
  line-height: 1.15;
  font-weight: bolder;
  font-size: min(45px, 4.5vw);
  margin-bottom: min(80px, 8vw);
}
#lightbox .author img {
  display: inline-block;
  width: min(200px, 20vw);
  margin-bottom: min(20px, 2vw);
}
#lightbox .pic {
  display: block;
  margin: 1px auto;
  width: min(1000px, 70vw);
}
#lightbox .btn_close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100px, 10vw);
  height: min(100px, 10vw);
  position: absolute;
  top: min(240px, 17.1432vw);
  right: 50%;
  transform: translateX(min(675px, 42.5vw));
  border-radius: 50%;
  background: #fff;
}
#lightbox .btn_close img {
  width: 55.7%;
}

.top-btn {
  position: fixed;
  right: max(-5px, -3vw);
  bottom: min(50px, 5vh);
  opacity: 0;
  display: none;
  transition: all 0.4s ease-in-out;
  z-index: 99;
}
.top-btn img {
  width: min(80px, 10.42vw);
  transition: all 0.3s ease-in-out;
}
.top-btn:hover img {
  transition: all 0.3s ease-in-out;
  filter: brightness(120%);
}

@media (min-width: 768px) {
  .mobile {
    display: none !important;
  }
  body {
    background-size: auto min(1833px, 130.93119vw), auto min(1833px, 130.93119vw), auto min(1833px, 130.93119vw), auto min(1833px, 130.93119vw), min(1900px, 120vw) auto, min(1900px, 120vw) auto, min(1900px, 120vw) auto, min(1900px, 120vw) auto;
    background-position: top min(1075px, 76.78725vw) center, top min(2908px, 207.71844vw) center, top min(5246px, 374.72178vw) center, top min(7079px, 505.65297vw) center, top min(875px, 62.50125vw) center, top min(1770px, 126.4311vw) center, top min(3421px, 244.36203vw) center, top min(6352px, 453.72336vw) center;
    padding-top: min(100px, 7.143vw);
  }
  #header {
    height: min(100px, 7.143vw);
    background-size: auto calc(100% + 10px);
    padding: 0 calc(37vw - 285px);
  }
  #header .logo {
    width: min(237px, 16.92891vw);
  }
  #header .menu {
    right: calc(37vw - 285px);
    transform: translateX(10%);
    padding-bottom: min(10px, 2vw);
  }
  #header .menu-btn {
    width: min(53px, 3.78579vw);
    height: min(53px, 3.78579vw);
    border-radius: min(4px, 0.28572vw);
  }
  #header.reduse {
    height: 12.4vh;
  }
  #header.reduse .logo {
    width: 29.75vh;
  }
  #header.reduse .menu {
    padding-bottom: 2vh;
  }
  #header.reduse .menu-btn {
    width: 6.67vh;
    height: 6.67vh;
  }
  #kv {
    margin-top: min(75px, 5.35725vw);
  }
  #kv .bg {
    width: min(1062px, 75.85866vw);
  }
  #kv .title {
    width: min(638px, 45.57234vw);
    top: max(-20px, -1.4286vw);
    transform: translateX(min(154px, 11.00022vw));
    animation: titlePC 0.5s ease-in-out forwards;
  }
  #kv .model {
    width: min(863px, 61.64409vw);
    top: min(200px, 14.286vw);
  }
  #kv .icon-bg {
    width: min(950px, 67.8585vw);
    top: min(30px, 2.1429vw);
  }
  #kv .icon.item1 {
    width: min(35px, 2.50005vw);
    left: 35%;
    top: min(150px, 10.7145vw);
    animation: iconMotion 5s linear infinite alternate;
  }
  #kv .icon.item2 {
    width: min(37px, 2.64291vw);
    left: 55%;
    top: min(175px, 12.50025vw);
    animation: iconMotion 4.75s linear infinite alternate-reverse;
  }
  #kv .icon.item3 {
    width: min(45px, 3.21435vw);
    top: min(75px, 5.35725vw);
    left: 70%;
    animation: iconMotion 4.5s linear infinite alternate;
  }
  #kv.reduse {
    margin-top: 9.2vh;
  }
  #kv.reduse .bg {
    width: 132.1vh;
  }
  #kv.reduse .title {
    width: 80.5vh;
    top: -4.2vh;
    transform: translateX(min(157px, 19.625vh));
  }
  #kv.reduse .model {
    width: 107.6vh;
    top: 16.1vh;
  }
  #kv.reduse .icon-bg {
    width: 120vh;
    top: 2.5vh;
  }
  #kv.reduse .icon.item1 {
    width: 4.5vh;
    top: 13.5vh;
  }
  #kv.reduse .icon.item2 {
    width: 4.5vh;
    top: 16.5vh;
  }
  #kv.reduse .icon.item3 {
    width: 6vh;
    top: 6vh;
  }
  #publicity {
    margin-top: min(310px, 22.1433vw);
  }
  #publicity .title {
    font-size: min(28px, 2.00004vw);
    padding: min(52px, 3.71436vw) 0 min(52px, 3.71436vw) min(173px, 12.35739vw);
    width: min(865px, 61.78695vw);
    margin-bottom: min(10px, 0.7143vw);
  }
  #publicity iframe {
    width: min(840px, 60.0012vw);
    height: min(472.5px, 33.750675vw);
    transform: translateX(max(-4px, -0.28572vw));
  }
  #conmic {
    margin-top: min(185px, 13.21455vw);
    background-position: bottom min(240px, 17.1432vw) center;
    background-size: min(830px, 59.2869vw) auto;
  }
  #conmic .pic {
    width: min(415px, 29.64345vw);
    transform: translateX(10px);
  }
  #conmic .author {
    font-size: min(30px, 2.1429vw);
    margin-bottom: min(60px, 4.2858vw);
  }
  #conmic .author img {
    width: min(185px, 13.21455vw);
  }
  #conmic .btn_magnifier {
    margin: min(100px, 7.143vw) auto min(20px, 1.4286vw) auto;
    font-size: min(35px, 2.50005vw);
    width: min(210px, 15.0003vw);
  }
  #conmic .btn_magnifier img {
    height: min(53px, 3.78579vw);
    margin-right: 5px;
  }
  #conmic .conmic-btn-prev img, #conmic .conmic-btn-next img {
    height: min(85px, 6.07155vw);
  }
  #conmic .conmic-pagination {
    width: min(330px, 23.5719vw);
  }
  #conmic .conmic-pagination .swiper-pagination-bullet {
    width: min(28px, 2.00004vw);
    height: min(28px, 2.00004vw);
    margin: 0 min(15px, 1.07145vw);
  }
  #conmic.reduse {
    background-position: bottom 14.4vh center;
    background-size: 60.8vh auto;
  }
  #conmic.reduse .pic {
    width: 29.52vh;
    transform: translateX(-1.6vh);
  }
  #conmic.reduse .btn_magnifier {
    margin: 4.64vh auto 1.36vh auto;
    font-size: 2.4vh;
    width: 16vh;
  }
  #conmic.reduse .btn_magnifier img {
    height: 3.76vh;
  }
  #conmic.reduse .conmic-btn-prev img, #conmic.reduse .conmic-btn-next img {
    height: 6.08vh;
  }
  #conmic.reduse .conmic-pagination {
    width: 21.28vh;
  }
  #conmic.reduse .conmic-pagination .swiper-pagination-bullet {
    width: 2.08vh;
    height: 2.08vh;
    margin: 0 1.08vh;
  }
  #card {
    margin: min(155px, 11.07165vw) 0 min(125px, 8.92875vw) 0;
    background-size: min(790px, 56.4297vw) auto;
    background-position: bottom min(205px, 14.64315vw) center;
  }
  #card [src^="imgs/card/i"] {
    width: min(788px, 56.28684vw);
  }
  #card .title {
    font-size: min(44px, 3.14292vw);
    padding: min(130px, 9.2859vw) 0 min(35px, 2.50005vw) 0;
  }
  #card .btn_download {
    font-size: min(35px, 2.50005vw);
    width: min(250px, 17.8575vw);
    margin: min(45px, 3.21435vw) auto min(35px, 2.50005vw) auto;
  }
  #card .btn_download img {
    height: min(51px, 3.64293vw);
    margin-right: min(20px, 1.4286vw);
  }
  #card .card-pagination {
    width: min(350px, 25.0005vw);
  }
  #card .card-pagination .swiper-pagination-bullet {
    width: min(28px, 2.00004vw);
    height: min(28px, 2.00004vw);
  }
  #card .card-btn-prev img, #card .card-btn-next img {
    width: min(85px, 6.07155vw);
  }
  #card .card {
    margin: 0 auto;
    width: min(788px, 56.28684vw);
  }
  #card .cardSwiper {
    margin-top: min(50px, 3.5715vw);
  }
  #card .card-tint {
    font-size: min(24px, 1.71432vw);
    padding: min(14px, 1.00002vw) 0;
    width: min(38px, 2.71434vw);
    top: min(700px, 50.001vw);
    transform: translateX(min(410px, 29.2863vw));
  }
  #card .card:hover .card-flip {
    transform: translateX(max(-20px, -1.4286vw)) rotateY(180deg);
  }
  #card .card-flip, #card [src="imgs/card/index.jpg"] {
    transform: translateX(max(-20px, -1.4286vw));
  }
  #card.reduse {
    background-size: 60vh auto;
    background-position: bottom 16vh center;
  }
  #card.reduse [src^="imgs/card/i"] {
    width: 59.84vh;
  }
  #card.reduse .btn_download {
    font-size: 2.56vh;
    width: 18vh;
    margin: 3.36vh auto 2.72vh auto;
  }
  #card.reduse .btn_download img {
    height: 4vh;
  }
  #card.reduse .card-pagination {
    width: 26.72vh;
  }
  #card.reduse .card-pagination .swiper-pagination-bullet {
    width: 2.16vh;
    height: 2.16vh;
  }
  #card.reduse .card-btn-prev img, #card.reduse .card-btn-next img {
    width: 6.4vh;
  }
  #card.reduse .card-tint {
    padding: 0.96vh 0;
    top: 60%;
    transform: translate(32vh, -50%);
  }
  #card.reduse .card {
    width: 59.84vh;
  }
  #card.reduse .card:hover .card-flip {
    transform: translateX(-1.6vh) rotateY(180deg);
  }
  #card.reduse .card-flip, #card.reduse [src="imgs/card/index.jpg"] {
    transform: translateX(-1.6vh);
  }
  #benefit .title {
    padding: min(135px, 9.64305vw) 0 min(32px, 2.28576vw) 0;
    margin-bottom: min(50px, 3.5715vw);
    font-size: min(42px, 3.00006vw);
  }
  #benefit .benefit {
    width: min(910px, 65.0013vw);
    padding-top: min(45px, 3.21435vw);
    padding-left: min(354px, 25.28622vw);
    padding-bottom: min(45px, 3.21435vw);
    margin: 0 auto min(70px, 5.0001vw) auto;
    transition: all 0.3s ease-in-out;
  }
  #benefit .benefit:hover {
    transition: all 0.3s ease-in-out;
    transform: scale(0.9);
  }
  #benefit .benefit:hover .benefit-title, #benefit .benefit:hover .benefit-more {
    color: #fff794;
    transition: all 0.3s ease-in-out;
  }
  #benefit .benefit-photo {
    width: min(335px, 23.92905vw);
    top: min(34px, 2.42862vw);
    left: min(27px, 1.92861vw);
  }
  #benefit .benefit-title {
    padding: min(10px, 0.7143vw) min(50px, 3.5715vw) min(8px, 0.57144vw) min(32px, 2.28576vw);
    font-size: min(26px, 1.85718vw);
  }
  #benefit .benefit-text {
    width: min(500px, 35.715vw);
    margin-top: min(15px, 1.07145vw);
    padding-left: min(32px, 2.28576vw);
    font-size: min(26px, 1.85718vw);
  }
  #benefit .benefit-more {
    width: min(150px, 10.7145vw);
    padding: min(15px, 1.07145vw) 0;
    bottom: max(-15px, -1.07145vw);
    font-size: min(30px, 2.1429vw);
  }
  #film {
    margin: min(150px, 10.7145vw) 0;
  }
  #film .title {
    padding: min(145px, 10.35735vw) 0 min(28px, 2.00004vw) 0;
    margin-bottom: min(48px, 3.42864vw);
    font-size: min(42px, 3.00006vw);
  }
  #film .film iframe {
    width: min(850px, 60.7155vw);
    height: min(477px, 34.07211vw);
    transform: translateY(max(-20px, -1.4286vw));
  }
  #link .title {
    font-size: min(42px, 3.00006vw);
    padding: min(125px, 8.92875vw) 0 min(28px, 2.00004vw) 0;
  }
  #link > div {
    margin: min(44px, 3.14292vw) auto min(120px, 8.5716vw) auto;
    width: min(680px, 48.5724vw);
  }
  #link > div [href] {
    width: min(310px, 22.1433vw);
    height: min(415px, 29.64345vw);
    font-size: min(32px, 2.28576vw);
    transition: all 0.3s ease-in-out;
  }
  #link > div [href]:hover {
    color: #fff794;
    transform: scale(0.9);
    transition: all 0.3s ease-in-out;
  }
  #footer {
    padding: min(45px, 3.21435vw) 0;
    font-size: min(27px, 1.92861vw);
  }
  #footer .count {
    margin: min(32px, 2.28576vw) 0 min(52px, 3.71436vw) 0;
  }
  #footer .social {
    width: min(92px, 6.57156vw);
    margin: 0 min(15px, 1.07145vw);
  }
}
@media (min-width: 1900px) {
  body {
    background-size: auto min(1833px, 130.93119vw), auto min(1833px, 130.93119vw), auto min(1833px, 130.93119vw), auto min(1833px, 130.93119vw), 100vw auto, 100vw auto, 100vw auto, 100vw auto;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none !important;
  }
  body {
    background-size: auto 175vw, auto 175vw, auto 175vw, auto 175vw, 178.57% auto, 178.57% auto, 178.57% auto, 178.57% auto;
    background-position: top 98vw center, top 273vw center, top 500vw center, top 675vw center, top 75vw center, top 168vw center, top 327.3vw center, top 588vw center;
    padding-top: 13.6vw;
  }
  #header {
    height: 13.6vw;
    background-size: auto 15vw;
    padding: 0 4vw;
  }
  #header .logo {
    width: 34vw;
  }
  #header .menu {
    right: -1.5vw;
  }
  #header .menu-btn {
    width: 7.5vw;
    height: 7.5vw;
    border-radius: 1.5vw;
  }
  #kv {
    margin-top: 7.5vw;
  }
  #kv .bg {
    width: 100%;
  }
  #kv .title {
    width: 61%;
    top: -2.5vw;
    transform: translateX(-45vw);
    animation: titleMB 0.5s ease-in-out forwards;
  }
  #kv .model {
    width: 81.4vw;
    top: 19.5vw;
  }
  #kv .icon-bg {
    width: 90vw;
    top: 1.5vw;
  }
  #kv .icon.item1 {
    width: 3.3vw;
    left: 21%;
    top: 10vw;
    animation: iconMotion 5s linear infinite alternate;
  }
  #kv .icon.item2 {
    width: 3.6vw;
    left: 54%;
    top: 16.5vw;
    animation: iconMotion 4.5s linear infinite alternate-reverse;
  }
  #kv .icon.item3 {
    width: 4.3vw;
    top: 4vw;
    left: 70%;
    animation: iconMotion 5s linear infinite alternate;
  }
  #publicity {
    margin-top: 30vw;
  }
  #publicity .title {
    font-size: 2.9vw;
    padding: 5.9vw 0 3.6vw 16vw;
    width: 83.5vw;
  }
  #publicity iframe {
    width: 82vw;
    height: 45.8vw;
    transform: translateX(0);
  }
  #conmic {
    margin-top: 22.8vw;
    background-position: bottom 17.5vw left 9vw;
    background-size: 82.5vw auto;
  }
  #conmic .pic {
    width: 40.25vw;
  }
  #conmic .author {
    font-size: 3vw;
    margin-bottom: 5vw;
  }
  #conmic .author img {
    width: 18.3vw;
  }
  #conmic .btn_magnifier {
    margin: 4vw auto 1.9vw auto;
    font-size: 3.3vw;
    width: 22vw;
  }
  #conmic .btn_magnifier img {
    height: 5vw;
    margin-right: 1vw;
  }
  #conmic .conmic-btn-prev img, #conmic .conmic-btn-next img {
    height: 7.8vw;
  }
  #conmic .conmic-pagination {
    width: 31.5vw;
  }
  #conmic .conmic-pagination .swiper-pagination-bullet {
    width: 2.8vw;
    height: 2.8vw;
    margin: 0 1.5vw;
  }
  #card {
    margin: 14vw 0 4vw 0;
    background-size: 72.3vw auto;
    background-position: bottom 19.9vw left 14.5vw;
  }
  #card [src^="imgs/card/i"] {
    width: 73.1vw;
  }
  #card .title {
    font-size: 4vw;
    padding: 12.5vw 0 3.5vw 0;
  }
  #card .btn_download {
    font-size: 3.4vw;
    width: 22vw;
    margin: 3.5vw auto;
  }
  #card .btn_download img {
    height: 5vw;
    margin-right: 2vw;
  }
  #card .card-pagination {
    width: 33.5vw;
  }
  #card .card-pagination .swiper-pagination-bullet {
    width: 2.5vw;
    height: 2.5vw;
  }
  #card .card-btn-prev img, #card .card-btn-next img {
    width: 8vw;
  }
  #card .card {
    margin: 0 auto;
    width: 73vw;
  }
  #card .cardSwiper {
    margin-top: 2.3vw;
  }
  #card .card-tint {
    font-size: 3vw;
    padding: 1.6vw 0;
    width: 5vw;
    top: 55%;
    transform: translate(40vw, -50%);
    display: none;
  }
  #card .card.toggle-flip .card-flip {
    transform: rotateY(180deg);
  }
  #benefit .title {
    padding: 12.4vw 0 3.5vw 0;
    margin-bottom: 6vw;
    font-size: 4.2vw;
  }
  #benefit .benefit {
    width: 86vw;
    padding: 3.8vw 0 6.5vw 33.3vw;
    margin: 0 auto 7vw auto;
  }
  #benefit .benefit-photo {
    width: 31.3vw;
    top: 2.6vw;
    left: 2.4vw;
  }
  #benefit .benefit-title {
    padding: 1.1vw 5.8vw 0.8vw 3vw;
    font-size: 2.5vw;
  }
  #benefit .benefit-text {
    width: 43vw;
    margin-top: 1.9vw;
    padding-left: 3vw;
    font-size: 2.5vw;
  }
  #benefit .benefit-more {
    width: 14vw;
    padding: 1.2vw 0 3vw 0;
    bottom: -2.5vw;
    font-size: 3vw;
  }
  #film {
    margin: 0.8vw 0 10.5vw 0;
  }
  #film .title {
    padding: 13.6vw 0 2.5vw 0;
    margin-bottom: 3.8vw;
    font-size: 4vw;
  }
  #film .film iframe {
    width: 81.1vw;
    height: 45.5vw;
    transform: translateY(-1.5vw);
  }
  #link .title {
    font-size: 4vw;
    padding: 11.9vw 0 2.5vw 0;
  }
  #link > div {
    margin: 4.4vw auto 8.5vw auto;
    width: 64.5vw;
  }
  #link > div [href] {
    width: 29.4vw;
    height: 39.4vw;
    font-size: 3vw;
  }
  #footer {
    padding: 4.4vw 0 3.6vw 0;
    font-size: 2.6vw;
  }
  #footer .count {
    margin: 3vw 0 5vw 0;
  }
  #footer .social {
    width: 8.5vw;
    margin: 0 1.25vw;
  }
}