*,
*:before,
*:after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #b71927;
  font-family: "Source Han Sans Chinese", Helvetica, "LiHei Pro", "微軟正黑體",
    sans-serif;
}

a {
  text-decoration: none;
}

.desktop {
  display: block;
  position: relative;
}

.mobile {
  display: none;
  position: relative;
}

.container {
  width: 57.4%;
  max-width: 1200px;
  margin: 0 auto;
}

.horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.section-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.ad {
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 100;
  width: 10%;
  animation: float 3s ease-in-out infinite;
}

.desktop nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 80px;
  background-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.desktop nav .container {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-right: 10px;
}

.desktop nav.active {
  background-color: #fff;
  box-shadow: 2px 0 4px rgb(0, 0, 0, 0.25);
}

.desktop .nav__logo {
  position: absolute;
  top: 16px;
  left: 15px;
  height: 76px;
  width: auto;
  transition: height 0.2s ease;
  cursor: pointer;
}

.desktop nav.active .nav__logo {
  height: 50px;
}

.desktop .nav__action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}

.desktop .nav__action__link {
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.desktop .link-featured {
  width: 160px;
  background-image: url("../images/BTN_1_1.png");
}

.desktop .link-featured:hover {
  background-image: url("../images/BTN_1_2.png");
}

.desktop .link-store {
  width: 110px;
  background-image: url("../images/BTN_2_1.png");
}

.desktop .link-store:hover {
  background-image: url("../images/BTN_2_2.png");
}

.desktop .link-product {
  width: 110px;
  background-image: url("../images/BTN_3_1.png");
}

.desktop .link-product:hover {
  background-image: url("../images/BTN_3_2.png");
}

.desktop .nav__action__social {
  width: 48px;
  height: 48px;
}

.desktop .nav__action__menu {
  width: 44px;
  height: 44px;
}

.desktop .nav__action img {
  width: 100%;
  height: auto;
}

.desktop .section-1,
.desktop .section-2,
.desktop .section-3 {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.desktop .section-1 {
  padding-top: 188.5416667%;
  background-image: url("../images/BG_wb_01.jpg");
}

.desktop .section-2 {
  background-image: url("../images/BG_wb_02.jpg");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.desktop .section-3 {
  padding-top: 177.65625%;
  background-image: url("../images/BG_wb_03.jpg");
}

.desktop .hero {
  width: 57.4%;
  max-width: 1200px;
  height: 15%;
  margin-top: 7%;
}

.desktop .hero-1,
.desktop .hero-2,
.desktop .hero-3 {
  opacity: 0.1;
  transform: translateX(-60px);
}

.desktop .hero-1 {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease;
}

.desktop .hero-2 {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.desktop .hero-3 {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.2s;
}

.desktop .hero-1.active,
.desktop .hero-2.active,
.desktop .hero-3.active {
  opacity: 1;
  transform: translateX(0);
}

.desktop .hero-1.active {
  transform: scale(1.2);
}

.desktop .video {
  width: 48%;
  max-width: 1200px;
  height: 13%;
  margin-top: 11%;
}

.desktop .subtitle {
  display: flex;
  justify-content: center;
  height: 85px;
  /* opacity: 0.1; */
  /* transform: translateY(30px); */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* .desktop .subtitle.active {
  transform: translateY(0);
  opacity: 1;
} */

.desktop .subtitle-2 {
  width: auto;
  height: 36px;
  margin-top: 28px;
}

.desktop .store {
  width: 48%;
  max-width: 1200px;
  height: 23%;
  margin-top: 2.5%;
}

.desktop .store .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 32px;
  margin-top: 16px;
  margin-bottom: 32px;
  width: 100%;
}

.desktop .store .grid .item {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

.desktop .store .grid .item:hover {
  transform: scale(1.1);
}

.desktop .store .grid img {
  width: 100%;
}

.desktop .featured {
  width: 57.4%;
  max-width: 1200px;
  height: 29%;
  margin-top: 5%;
  justify-content: space-between;
}

.desktop .featured__content__spec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 20px;
}

.desktop .desktop-feature-1 {
  opacity: 0.1;
  transform: translateX(-60px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  background-image: url("../images/new-woman.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}

.desktop .desktop-feature-1.active {
  opacity: 1;
  transform: translateY(0);
}

.desktop .desktop-feature-2 {
  opacity: 0.1;
  transform: translateX(60px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.desktop .desktop-feature-2.active {
  opacity: 1;
  transform: translateY(0);
}

.desktop .featured__content__spec__1,
.desktop .featured__content__spec__4 {
  opacity: 0.1;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.desktop .featured__content__spec__2,
.desktop .featured__content__spec__3 {
  margin-left: 40px;
  opacity: 0.1;
  transform: translateY(30px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.desktop .featured__content__spec__3 {
  transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}

.desktop .featured__content__spec__4 {
  transition: opacity 0.3s ease 0.3, transform 0.3s ease 0.3;
}

.desktop .featured__content__spec__1.active,
.desktop .featured__content__spec__2.active,
.desktop .featured__content__spec__3.active,
.desktop .featured__content__spec__4.active {
  opacity: 1;
  transform: translateY(0);
}

.desktop .featured__content__cloth {
  display: flex;
  justify-content: space-between;
  max-height: 20%;
}

.product__content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.desktop .section-2 .container {
  gap: 3em;
}

.desktop .section-2 .product__content {
  gap: 3em;
}

.desktop .section-2 .product__content__img {
  flex: 1;
}

.desktop .section-2 .product__content__desc {
  flex: 1;
}

.product__content__img {
  flex: 1.2;
}

.product__content__desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0.8;
  gap: 1em;
}

.product__content__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  gap: 0.5em;
}

.product__content__action a {
  max-width: 125px;
}

.fade-in {
  opacity: 0.1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-in.active {
  opacity: 1;
}

.slide-right {
  transform: translateX(-60px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.slide-right.active {
  transform: translateX(0);
}

.slide-left {
  transform: translateX(60px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.slide-left.active {
  transform: translateX(0);
}

.slide-up {
  transform: translateY(-60px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.slide-up.active {
  transform: translateY(0);
}

.desktop .footer {
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px;
  color: #eee;
  font-size: 14px;
}

.mobile nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 65px;
  padding: 0 10px 0 15px;
  background-color: #fff;
  box-shadow: 2px 0 4px rgb(0, 0, 0, 0.25);
}

.mobile .nav__logo {
  height: 38px;
  width: auto;
}

.mobile .nav__action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}

.mobile .nav__action__link {
  width: 34px;
  height: 34px;
}

.mobile .nav__action__menu {
  width: 44px;
  height: 44px;
}

.mobile .nav__action img {
  width: 100%;
  height: auto;
}

.mobile .sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 101;
  width: 0;
  transition: width 0.2s ease;
}

.mobile .sidebar.active {
  width: 60%;
}

.mobile .sidebar__content {
  width: 100%;
  height: 100%;
  min-width: 233px;
  background-color: #1b1b1b;
}

.mobile .sidebar__title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 12px;
  gap: 14px;
  border-bottom: 1px solid #2f2f2f;
}

.mobile .sidebar__close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  padding: 16px;
  box-shadow: 2px 2px 12px rgb(255, 255, 255, 0.55);
}

.mobile .sidebar__link {
  display: block;
  width: 100%;
  padding: 20px;
  color: #fff;
  border-bottom: 1px solid #2f2f2f;
  font-size: 20px;
  font-weight: bold;
}

.mobile .section-1,
.mobile .section-2,
.mobile .section-3,
.mobile .divider {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.mobile .section-1 {
  padding-top: 664.7135417%;
  background-image: url("../images/BG_mb_01.jpg");
}

.mobile .section-2 {
  background-image: url("../images/BG_mb_02.jpg");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.mobile .section-3 {
  background-image: url("../images/BG_mb_04.jpg");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.mobile .divider {
  padding-top: 13.0208333%;
  background-image: url("../images/BG_mb_03.jpg");
}

.mobile .hero {
  height: 25%;
  padding-top: 21%;
}

.mobile .hero-1,
.mobile .hero-2,
.mobile .hero-3 {
  opacity: 0.1;
  transform: translateX(-60px);
}

.mobile .hero-1 {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease;
}

.mobile .hero-2 {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.mobile .hero-3 {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.2s;
}

.mobile .hero-1.active,
.mobile .hero-2.active,
.mobile .hero-3.active {
  opacity: 1;
  transform: translateX(0);
}

.mobile .hero-4 {
  padding-top: 2%;
}

.mobile .wrapper {
  padding: 1em;
  background-color: rgb(255, 255, 255, 0.5);
  border-radius: 10px;
}

.mobile .video {
  width: 95%;
  height: 8%;
  margin-top: 20%;
}

.mobile .store {
  width: 95%;
  margin-top: 5%;
}

.mobile .store .subtitle {
  margin-bottom: 8%;
}

.mobile .store .subtitle-2 {
  width: 30%;
}

.mobile .store .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 8px;
  margin-top: 16px;
  margin-bottom: 32px;
  width: 100%;
}

.mobile .store .grid .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile .store .grid img {
  width: 100%;
}

.mobile .desktop-feature-1 {
  width: 80%;
  margin-bottom: 1em;
  background-image: url("../images/new-woman.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}

.mobile .featured__content__spec {
  width: 80%;
  gap: 1em;
}

.mobile .featured__content__spec__2,
.mobile .featured__content__spec__3 {
  margin-left: 10%;
}

.mobile .footer {
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px;
  color: #eee;
  font-size: 14px;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .container {
    width: 100%;
    padding: 0 1em;
    gap: 3em;
  }

  .product__content__desc {
    flex: 1;
  }

  .product__content__img {
    flex: 1;
  }
}