/* color */
/* font */
/* transition */
.bannerBox {
  --swiper-navigation-sides-offset: 5%;
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-border-radius: 0;
  --swiper-pagination-bullet-size: 18px;
  --swiper-pagination-bottom: 10%;
  --swiper-pagination-bullet-inactive-color: transparent;
}

.bannerBox .swiper-pagination-bullet {
  border: 2px solid #fff;
}

@media (max-width: 997px) {
  .bannerBox .bannerSwiper {
    max-height: calc(100dvh - 100px);
  }

  .bannerBox .bannerSwiper img{
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.bannerBox .swiper-slide {
  font-size: 0;
}

.outerWrap {
  padding-bottom: 0;
}

.mainArea {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../assets/images/homeBg.jpg");
  position: relative;
  padding-bottom: 180px;
}

@media (max-width: 640px) {
  .mainArea {
    background-image: none;
    padding-bottom: 120px;
  }
}

.mainArea .deco1 {
  position: absolute;
  right: 0;
  top: 12.5%;
}

@media (max-width: 1536px) {
  .mainArea .deco1 {
    top: 10%;
  }
}

@media (max-width: 1440px) {
  .mainArea .deco1 {
    opacity: 0.75;
  }
}

@media (max-width: 1024px) {
  .mainArea .deco1 {
    display: none;
  }
}

.mainArea .deco2 {
  position: absolute;
  left: -10%;
  bottom: 3.5%;
}

@media (max-width: 1440px) {
  .mainArea .deco2 {
    opacity: 0.75;
  }
}

@media (max-width: 1366px) {
  .mainArea .deco2 {
    left: -18%;
  }
}

@media (max-width: 1024px) {
  .mainArea .deco2 {
    display: none;
  }
}

.showBox {
  padding: 150px 0 200px;
}

@media (max-width: 768px) {
  .showBox {
    padding: 80px 0;
  }
}

.showBox .wrap {
  max-width: 1660px;
}

@media (max-width: 1680px) {
  .showBox .wrap {
    max-width: 90vw;
  }
}

.showBox .showList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 55px;
}

@media (max-width: 640px) {
  .showBox .showList {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 60px;
  }
}

.showBox .showItem {
  position: relative;
  transition: all 0.5s ease-in-out;
}

.showBox .showItem:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -25px;
  bottom: -20px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

@media (min-width: 1181px) {
  .showBox .showItem:hover .imgBox img {
    scale: 1.1;
  }

  .showBox .showItem:hover .linkBtn {
    scale: 0.9;
    background-color: #4385a0;
  }

  .showBox .showItem:hover .linkBtn a {
    color: #fff;
  }
}

.showBox .showItem .imgBox {
  position: relative;
  overflow: hidden;
  font-size: 0;
  z-index: 2;
}

.showBox .showItem .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
}

.showBox .showItem .linkBtn {
  position: absolute;
  right: 15%;
  bottom: -10%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #066292;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  transition: all 0.5s ease-in-out;
  z-index: 3;
}

@media (max-width: 1024px) {
  .showBox .showItem .linkBtn {
    width: 80px;
    height: 80px;
    font-size: 24px;
    right: 5%;
  }
}

.showBox .showItem .linkWrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.productBox .decoTitle {
  color: #303030;
  font-weight: 300;
}

.productBox .titleBox {
  width: 100%;
  align-items: baseline;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  .productBox .titleBox {
    margin-bottom: 20px;
  }
}

.productBox .titleBox .title {
  color: #303030;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  margin-right: 20px;
}

@media (max-width: 1280px) {
  .productBox .titleBox .title {
    font-size: 50px;
  }
}

@media (max-width: 640px) {
  .productBox .titleBox .title {
    font-size: 40px;
  }
}

.productBox .titleBox .decoTitle {
  font-size: 50px;
  font-weight: 300;
  line-height: 1;
}

@media (max-width: 1280px) {
  .productBox .titleBox .decoTitle {
    font-size: 40px;
  }
}

@media (max-width: 640px) {
  .productBox .titleBox .decoTitle {
    font-size: 30px;
  }
}

.productBox .subtitle {
  color: #d87474;
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 60px;
}

.productBox .side {
  list-style: none;
}

.productBox .btnBox {
  margin-top: 60px;
}

.productBox.new {
  margin-top: 100px;
}

@media (max-width: 1680px) {
  .productBox.new {
    margin-top: 140px;
  }
}

@media (max-width: 1366px) {
  .productBox.new {
    margin-top: 180px;
  }
}

@media (max-width: 768px) {
  .productBox.new {
    margin-top: 100px;
  }
}

@media (max-width: 640px) {
  .productBox.new {
    margin-top: 50px;
  }
}

.productBox.new .subtitle {
  color: #1fb29f;
}

.productBox.new .origanPrice {
  text-decoration: none;
}

.productBox.brand {
  margin-top: 100px;
}

@media (max-width: 640px) {
  .productBox.brand {
    margin-top: 50px;
  }
}

.productBox.brand .subtitle {
  color: #4385a0;
}

.productBox.brand .wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 100px;
}

@media (max-width: 1024px) {
  .productBox.brand .wrap {
    column-gap: 50px;
  }
}

@media (max-width: 768px) {
  .productBox.brand .wrap {
    grid-template-columns: 25% 1fr;
    column-gap: 25px;
  }
}

@media (max-width: 640px) {
  .productBox.brand .wrap {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 30px;
  }
}

.productBox.brand .productList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 0;
  padding-right: 0;
}

.productBox.brand .origanPrice {
  text-decoration: none;
}

.productBox .side>li {
  color: #252525;
  font-size: 20px;
  padding: 10px 20px;
  position: relative;
  margin-bottom: 20px;
}

.productBox .side>li:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 50%;
  background-color: #b5b5b5;
  left: 0;
  bottom: 0;
}

.productBox .side>li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #b5b5b5;
  left: 0;
  bottom: 0;
}

@media (max-width: 768px) {
  .productBox .side>li {
    font-size: 16px;
  }
}

.productBox .side>li a {
  position: relative;
  color: currentColor;
  display: block;
  max-width: 90%;
  transition: all 0.5s ease-in-out;
}

@media (min-width: 1181px) {
  .productBox .side>li a:hover {
    color: #066292;
  }
}

.productBox .side>li.hasChild>a:before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #b5b5b5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  content: "+";
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
}

.productBox .side>li.hasChild>a.open:before {
  content: "";
  position: absolute;
  content: "-";
}

.productBox .side .child {
  display: none;
  padding: 10px;
}

.productBox .side .child li {
  font-size: 16px;
  padding: 10px 20px;
  position: relative;
}

.productList {
  padding-left: 45px;
  padding-right: 45px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 45px;
}

@media (max-width: 768px) {
  .productList {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    padding-left: 0;    
    padding-right: 0;
  }
}

.productList .productItem {
  position: relative;
  max-width: 300px;
}

@media (min-width: 1181px) {
  .productList .productItem:hover .imgBox img {
    scale: 1.1;
  }
}

.productList .productItem .imgBox {
  border: 2px solid #d5d6d6;
  width: 300px;
  aspect-ratio: 1;
  max-width: 100%;
  font-size: 0;
  overflow: hidden;
}

.productList .productItem .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
}

.productList .productItem .textBox {
  position: relative;
  color: #303030;
  padding: 20px 0 0;
}

.productList .productItem .linkWrap:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.productList .productItem .cartBtn {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 3;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.productList .productItem .cartBtn svg {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.productList .productItem .tag {
  position: absolute;
  font-size: 18px;
  font-weight: 700;
  left: -10px;
  top: -10px;
  color: #fff;
  padding: 5px 10px;
  z-index: 5;
}

.productList .productItem .tag.hot {
  background-color: #d87474;
}

.productList .productItem .tag.new {
  background-color: #1fb29f;
}

.productList .productTitle {
  font-size: 20px;
  font-weight: 400;
  max-width: 85%;
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .productList .productTitle {
    font-size: 16px;
  }
}

.productList .origanPrice {
  text-decoration: line-through;
}

.productList .price {
  color: #b00c0c;
  font-weight: 600;
}