@charset "UTF-8";
* {
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

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

body {
  overflow-x: hidden;
}

a.link {
  width: 159px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 文字樣式 */
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
}

.red-background {
  background-color: rgb(158, 35, 40);
}

.font-white {
  color: white;
}

.burger-box {
  display: none;
}

header {
  width: 100%;
  position: relative;
}
header .swiper {
  width: 100%;
  overflow: hidden;
  transition: all 0.5s ease;
  transition-delay: 50ms;
}
header .swiper .swiper-wrapper {
  width: 100%;
  transition: all 0.5s ease;
  transition-delay: 50ms;
}
header .swiper .swiper-wrapper .swiper-slide {
  width: 100%;
  height: auto;
  max-height: 712.9px;
  aspect-ratio: 16/9;
  background-color: white;
}
header .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  background-color: white;
  -o-object-fit: cover;
     object-fit: cover;
}
header .swiper .swiper-wrapper .swiper-slide img.company-logo {
  width: 413px;
}
header .swiper .swiper-wrapper .swiper-button-prev:hover {
  transform: scale(1.2);
}
header img {
  width: 100%;
  display: block;
}
header .header-container {
  width: 100%;
  padding: 32px 135px 15px 195px;
  background-color: rgb(251, 251, 251);
  opacity: 0.9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  transition: all 0.5s ease;
}
header .header-container h1 {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}
header .header-container h1 a {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .header-container h1 img {
  height: auto;
}
header .header-container nav {
  width: 575px;
  height: 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 17px;
}
header .header-container nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
}
header .header-container nav ul li {
  color: rgb(15, 10, 7);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
}
header .header-container nav ul li a.products-li {
  position: relative;
}
header .header-container nav ul li:hover > .products-menu {
  visibility: visible;
  transition-delay: 0.5s;
  opacity: 1;
}
header .header-container nav ul li:hover {
  color: rgb(255, 23, 23);
}
header .header-container nav ul li.products-menu-relate {
  position: relative;
}
header .header-container nav ul li.products-menu-relate::after {
  content: " ";
  display: inline-block;
  width: 19px;
  height: 11px;
  background-image: url("/img/downarrow-icon-25.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 11px;
  transition: all 0.3s ease;
}
header .header-container nav ul li.products-menu-relate:hover::after {
  background-image: url("/img/red-uparrow.png");
  transition: all 0.3s ease;
  transform: rotate(180deg);
}
header .header-container nav ul li ul.products-menu {
  width: 220px;
  height: unset;
  max-height: 232.5px;
  border-top: 3px solid rgb(255, 23, 23);
  background-color: white;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: start;
  flex-direction: column;
  position: absolute;
  top: 78px;
  left: -20px;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.5s;
  padding-inline-start: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
header .header-container nav ul li ul.products-menu li.menu-item {
  display: block;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
header .header-container nav ul li ul.products-menu li.menu-item a {
  width: 220px;
  height: 45px;
  display: inline-block;
  padding: 0px 15px;
  font-size: 16px;
  font-weight: 600;
  line-height: 45px;
}
header .header-container nav ul li ul.products-menu li.menu-item a:hover {
  color: #88070d;
  background-color: rgb(245, 245, 245);
}
header .img-decorate {
  background-image: url("/img/whitetriangle-K.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0px;
  z-index: 2;
  transition: all 0.5s ease;
}

main section {
  background-color: rgb(158, 35, 40);
  transition: all 0.5s ease;
}

main ul.info-container li {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
main ul.info-container li::before {
  content: "";
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
main ul.info-container li.phone::before {
  background-image: url("/img/telephone-icon.png");
}
main ul.info-container li.fax::before {
  background-image: url("/img/fax-icon.png");
}
main ul.info-container li.place::before {
  background-image: url("/img/local-icon.png");
}

footer {
  width: 100%;
  height: 98px;
  transition: all 0.5s ease;
}
footer .footer-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(35, 24, 22);
  transition: all 0.5s ease;
}
footer p {
  color: rgb(137, 45, 48);
  font-size: 1.75rem;
  font-weight: 600;
}

#menu {
  display: none;
}

@media (max-width: 1437px) {
  header .header-container {
    padding: 32px 95px 15px 95px;
  }
  header .swiper .swiper-wrapper .swiper-slide {
    max-height: 599px;
  }
}
@media (max-width: 1214px) {
  #menu:checked + header .burger-box .line .menu {
    background: transparent;
  }
  #menu:checked + header .burger-box .line .menu::after {
    top: 0;
    transition: top ease 0s, transform ease 0s 0s;
    transform: rotate(-45deg);
  }
  #menu:checked + header .burger-box .line .menu::before {
    top: 0;
    transition: top ease 0s, transform ease 0s 0s;
    transform: rotate(45deg);
  }
  #menu:checked ~ header .header-container .burger-box .nav-list {
    transform: translateX(0%);
    transition-delay: 32ms;
  }
  #menu:checked ~ header, #menu:checked ~ main, #menu:checked ~ footer {
    overflow: hidden;
    margin-left: 300px;
    transition: all 0.5s ease;
  }
  #menu:checked ~ header .header-container {
    left: 300px;
    transition: all 0.5s ease;
  }
  #menu:checked ~ header .swiper {
    transition: all 0.5s ease;
    transition-delay: 53ms;
  }
  #menu:checked ~ header .swiper .swiper-wrapper {
    transition: all 0.5s ease;
  }
  #menu:checked ~ header .img-decorate {
    display: none;
  }
  #menu:checked ~ main section {
    transition: all 0.5s ease;
  }
  #menu:checked ~ footer .footer-container {
    transition: all 0.5s ease;
  }
  #menu:checked ~ .burger-box {
    left: 300px;
    transition: all 0.5s ease;
  }
  header .header-container {
    justify-content: center;
    padding: 12px 50px 5px 50px;
  }
  header .header-container nav.nav-companyInfo {
    display: none;
  }
  header .header-container h1 a {
    width: 100%;
  }
  header .header-container h1 a .company-logo {
    width: 70%;
    margin: auto;
  }
  header .header-container .burger-box {
    width: 50px;
    height: 53px;
    display: block;
    position: absolute;
    top: calc(50% - 26.5px);
    left: 0;
    z-index: 5;
  }
  header .header-container .burger-box .line {
    width: 50px;
    height: 53px;
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 5;
  }
  header .header-container .burger-box .line .menu {
    width: 20px;
    height: 1px;
    position: absolute;
    left: 15px;
    top: 25px;
    background: black;
  }
  header .header-container .burger-box .line .menu::after {
    width: 20px;
    background: black;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    transition: top ease 0s 0s, transform ease 0s;
    top: 5px;
  }
  header .header-container .burger-box .line .menu::before {
    width: 20px;
    background: black;
    content: "";
    display: block;
    height: 0.5px;
    position: absolute;
    transition: top ease 0s 0s, transform ease 0s;
    top: -5px;
  }
  header .header-container .burger-box .nav-list {
    width: 300px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    transition: all 0.5s ease;
    transform: translateX(-100%);
    background-color: rgb(58, 77, 106);
  }
  header .header-container .burger-box .nav-list ul {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    list-style-type: none;
  }
  header .header-container .burger-box .nav-list ul li.products-li {
    position: relative;
  }
  header .header-container .burger-box .nav-list ul li.products-li::after {
    content: "";
    display: inline-block;
    width: 19px;
    height: 11px;
    background-image: url("/img/downarrow-white.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 160px;
    transition: all 0.3s ease;
  }
  header .header-container .burger-box .nav-list ul li.products-li:hover::after {
    width: 14px;
    height: 7px;
    margin-left: 165px;
    background-image: url("/img/red-uparrow.png");
    transition: all 0.3s ease;
    transform: rotate(180deg);
  }
  header .header-container .burger-box .nav-list ul li.products-li input#products-list {
    display: none;
  }
  header .header-container .burger-box .nav-list ul li.products-li input#products-list:checked + label ul {
    display: block;
  }
  header .header-container .burger-box .nav-list ul li.products-li label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    z-index: 5;
  }
  header .header-container .burger-box .nav-list ul li.products-li label ul.products-menu {
    height: unset;
    max-height: 300px;
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    visibility: unset;
    opacity: 1;
    border-top: unset;
  }
  header .header-container .burger-box .nav-list ul li.products-li label ul.products-menu li {
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  header .header-container .burger-box .nav-list ul li.products-li label ul.products-menu li:nth-child(1) {
    border: unset;
  }
  header .header-container .burger-box .nav-list ul li.products-li label ul.products-menu li a {
    color: rgb(58, 77, 106);
  }
  header .header-container .burger-box .nav-list ul li.products-li label ul.products-menu li:hover {
    background-color: rgb(58, 77, 106);
    transition: all 0.3s linear;
  }
  header .header-container .burger-box .nav-list ul li.products-li label ul.products-menu li:hover a {
    color: #ce000a;
    transition: all 0.3s linear;
    background-color: transparent;
  }
  header .header-container .burger-box .nav-list ul li {
    width: 100%;
    height: 50px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    line-height: 50px;
    padding: 0px 20px;
    border-top: 1px solid rgb(255, 255, 255);
  }
  header .header-container .burger-box .nav-list ul li:hover {
    color: #ce000a;
    transition: all 0.3s linear;
  }
  header .header-container .burger-box .nav-list ul li:nth-child(1) {
    border: unset;
  }
  header .swiper .swiper-wrapper .swiper-slide {
    max-height: 380px;
  }
  footer p {
    font-size: 1.25rem;
  }
}
@media (max-width: 725px) {
  header .swiper .swiper-wrapper .swiper-slide {
    max-height: 302.5px;
  }
  footer .footer-container {
    padding: 10px 0px;
    flex-direction: column;
  }
  footer .footer-container div {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  footer .footer-container div p {
    line-height: unset;
    font-size: 1.25rem;
  }
}
@media (max-width: 500px) {
  header .header-container {
    padding: 9px 50px 8px 50px;
  }
  header .header-container a .company-logo {
    width: 55%;
  }
  header .swiper .swiper-wrapper .swiper-slide {
    max-height: 208.325px;
  }
  footer .footer-container div p {
    font-size: 1rem;
  }
}
@media (max-width: 375px) {
  header .swiper .swiper-wrapper .swiper-slide {
    max-height: 156.25px;
  }
}/*# sourceMappingURL=template.css.map */