@charset "utf-8";

body {
  font-family: "Noto Sans TC", sans-serif;
  overflow-x: hidden;
}

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

ul:after,
section:after,
div:after,
li:after {
  content: "";
  display: block;
  clear: both;
}

.text-eeeeee {
  color: #eeeeee;
}

.bg-eeeeee {
  background-color: #eeeeee;
}

.text-a8a8a8 {
  color: #a8a8a8;
}

.text-6d6d6d {
  color: #6d6d6d;
}

.bg-969696 {
  background-color: #969696;
}
.bg-8a8a8a {
  background-color: #8a8a8a;
}

/*header*/
.headertop {
  transition: all 0.5s ease;
}
.headertop.active {
  opacity: 0;
  visibility: hidden;
}
.headerbg {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.menubtn {
  display: none;
}
.rwdmenu {
  display: none;
}
.menulist div {
  position: relative;
}
.menulist div:before {
  content: "";
  position: absolute;
  top: 26px;
  left: 56%;
  background-color: #8a8a8a;
  width: 0%;
  height: 2px;
  border-radius: 15px;
  transform: translate3d(-50%, 0, 0);
  transition: all 0.5s ease;
}
.menulist div:hover:before,
.menulist div.active:before {
  width: 55%;
}

/*banner*/
.splide__arrow--prev {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translate3d(110%, 0, 0);
}
.splide__arrow--next {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  transform: translate3d(-110%, 0, 0);
}
.splide__arrows button {
  outline: none;
}
.splide__pagination__page {
  background-color: #eeeeee;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.splide__pagination li {
  padding: 20px 5px 10px 5px;
  outline: none;
}
.splide__pagination button {
  outline: none;
}
/*content*/
.contentname div {
  width: calc(100% / 3 - 10px);
}
.contentline {
  background-color: #eeeeee;
  width: 1px;
  height: 30vh;
  margin-top: 48px;
}
.contentlist li {
  width: calc(100% / 4 - 31px);
  margin: 15px;
}
.productpic {
  position: relative;
  overflow: hidden;
}
a:hover .productpic img {
  transform: scale(1.1);
}

/*about*/
.sidecontent {
  position: absolute;
  top: 12.5%;
  left: 0;
}
.sidecontentlist div {
  position: relative;
}
.sidecontentlist div:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  background-color: #8a8a8a;
  width: 0%;
  height: 2px;
  border-radius: 15px;
  transform: translate3d(-50%, 0, 0);
  transition: all 0.5s ease;
}
.sidecontentlist div:hover:before,
.sidecontentlist div.active:before {
  width: calc(100% - 15px);
}

/*store*/
.storetimeline {
  background-color: black;
  width: 1px;
  height: 18px;
  transform: rotate(35deg);
}
.storelist li {
  margin: 15px;
}
.blockline {
  border-color: #969696;
  border-top: 0;
}
.storetop {
  margin-top: -38px;
  position: absolute;
}
.storepic {
  padding-left: 21px;
  padding-right: 22px;
}

/*rule*/
.ruleblock {
  border-color: #969696;
}

/*product*/
.productlist li {
  width: calc(100% / 4);
  margin: 8px;
}

.productlist button {
  outline: none;
}

.productbox > li {
  width: calc(100% / 2 - 70px);
  margin: 8px 35px;
}
.productlist div:hover {
  box-shadow: 2px 2px 6px rgb(0 0 0 / 38%);
}
.shoppingbg {
  background: linear-gradient(
    to bottom,
    rgba(238, 238, 238, 1) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(238, 238, 238, 1) 100%
  );
}
.shoppingbg:hover {
  box-shadow: 2px 2px 6px rgb(0 0 0 / 38%);
}
.shoppingbg:focus {
  outline: none;
}

/*allproduct*/
.select {
  right: 0;
}

/*login*/
.loginblock {
  width: 769px;
}

.endbtn:focus {
  outline-color: #c7c7c7;
}
.endbtn:hover .addbtn {
  background-color: #a8a8a8;
}
.endbtn:hover .addwrd {
  color: white;
}
.endbtn:hover .addpic1 {
  display: none;
}
.endbtn:hover .addpic2 {
  display: block;
}

/*apply*/
.applyline {
  background-color: #eeeeee;
  height: 1px;
  width: 687px;
}
.applyblock {
  width: 555px;
}
.applywrd1 {
  letter-spacing: 129px;
}
.applywrd2 {
  letter-spacing: 31px;
}
.applywrd3 {
  letter-spacing: 5px;
}

/*step*/
.steplist li {
  width: calc(100% / 5 - 30px);
  margin: 15px;
}
.flip,
.flip1,
.flip2,
.flip3,
.flip4,
.flip5,
.flip6,
.flip7 {
  cursor: pointer;
}
.panel,
.panel1,
.panel2,
.panel3,
.panel4,
.panel5,
.panel6,
.panel7 {
  display: none;
}

/*shoppingcart*/
.shoppingcartblock {
  width: 275px;
}
.shoppingcartwrd {
  letter-spacing: 40px;
}
.shoppingcartbox li {
  width: calc(100% / 2 - 175px);
  margin: 87px;
}

/*footer*/
.footerlist li {
  width: calc(100% / 5 - 30px);
  margin: 15px;
}

.gotop button {
  outline: none;
}
.gotop {
  position: fixed;
  right: calc((100% - 1200px - 150px) / 2);
  bottom: 336px;
}
.gotop {
  display: none;
  position: fixed;
}
.gotop.active {
  display: block;
  z-index: 999;
}

.zero {
  background-color: #ed9696;
  width: 20px;
  transform: translate3d(15px, -31px, 0);
}
.sidebtn {
  top: 30%;
  right: 1%;
  position: fixed;
  z-index: 20;
}
.sidebtn {
  display: none;
}
.sidebtn.active {
  display: block;
}

.function_area > li {
  float: none;
  padding: 0;
}

.search_input:focus {
  cursor: text;
  line-height: 50px;
  height: 40px;
  outline: none;
  padding: 10px 50px 10px 15px;
  transition: width 0.6s cubic-bezier(0, 1, 0.5, 1.2);
  width: 300px;
  opacity: 1;
}

.search_input:focus + label {
  left: auto;
  right: 11px;
}

.search_input + label {
  cursor: pointer;
  display: inline-block;
  left: 11px;
  position: absolute;
  top: 13px;
}

.search_input {
  display: block;
  height: 52px;
  width: 36px;
  opacity: 0;
  cursor: pointer;
}

.btnend {
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 1024px) {
  /*header*/
  .menu {
    display: none;
  }
  .rwdmenu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: white;
    z-index: 999;
    transform: translate(-100%, 0);
    transition: all 0.5s ease;
  }
  .rwdmenu.active {
    transform: translate(0, 0);
  }
  .menubtn {
    float: right;
    display: block;
    font-size: 40px;
    top: 50%;
    right: 50%;
    position: absolute;
    transform: translate3d(505px, -22px, 0px);
  }
  .menubtn button {
    outline: none;
  }

  .menubtn.active .close {
    display: block;
  }
  .menubtn.active .open {
    display: none;
  }
  .rwdmenulist {
    display: block;
    padding: 17px;
  }

  /*content*/
  .contentlist li {
    width: calc(100% / 2 - 31px);
  }
  .contentline {
    display: none;
  }
  /*store*/
  .storepic {
    padding-left: 13px;
    padding-right: 14px;
  }

  /*shoppingcart*/
  .shoppingcartbox li {
    width: calc(100% / 2 - 71px);
    margin: 35px;
  }

  /*footer*/
  .gotop {
    right: 9%;
    bottom: 338px;
  }
}

@media screen and (max-width: 768px) {
  /*header*/
  .menubtn {
    transform: translate3d(371px, -19px, 0px);
  }

  /*product*/
  .productbox li {
    width: calc(100%);
    margin: 26px;
  }

  /*login*/
  .loginblock {
    width: 580px;
  }

  /*apply*/
  .applyline {
    width: 498px;
  }
  .applyblock {
    width: 368px;
  }

  /*shoppingcart*/
  .shoppingcartbox li {
    width: calc(100% / 2 - 50px);
    margin: 25px;
  }
}

@media screen and (max-width: 425px) {
  /*header*/
  .menubtn {
    position: unset;
    transform: translate3d(199px, 29px, 0);
  }
  .splide__arrow--prev {
    transform: translate3d(25%, -50%, 0);
  }
  .splide__arrow--next {
    transform: translate3d(-25%, -50%, 0);
  }

  /*content*/
  .contentlist li {
    width: calc(100%);
  }

  /*store*/
  .blockline {
    border-width: 0px;
  }

  /*login*/
  .loginblock {
    width: 393px;
  }

  /*apply*/
  .applyblock {
    width: 393px;
  }

  /*shoppingcart*/
  .shoppingcartbox li {
    width: calc(100%);
    margin: 19px 39px;
  }

  /*pruduct*/
  .productbox li {
    margin: 4px;
  }

  /*footer*/
  .gotop {
    right: 6%;
    bottom: 315px;
  }
  .footerlist li {
    width: calc(100%);
    display: grid;
    justify-items: center;
  }
}
@media screen and (max-width: 375px) {
  /*header*/
  .menubtn {
    transform: translate3d(6px, -22px, 0);
  }

  /*login*/
  .loginblock {
    width: 300px;
  }
  .loginwrd {
    padding-left: 35px;
    padding-right: 35px;
  }

  /*apply*/
  .applyblock {
    width: 343px;
  }

  /*shoppingcart*/
  .shoppingcartbox li {
    width: calc(100%);
    margin: 19px 14px;
  }
}
@media screen and (max-width: 320px) {
  /*header*/
  .menubtn {
    transform: translate3d(6px, -12px, 0);
  }
  .logo {
    padding-top: 8px;
  }

  /*sidecontent*/
  .sidecontentwrd {
    display: grid;
    justify-items: center;
  }
  /*login*/
  .loginwrd {
    font-size: 18px;
  }

  /*apply*/
  .applyblock {
    width: 300px;
  }

  /*connectionwrd*/
  .connectionwrd {
    font-size: 15px;
  }

  /*shoppingcart*/
  .shoppingcartbox li {
    width: calc(100%);
    margin: 19px 0px;
  }
}