@import "./floatMenu.css";

:root {
  --container-width: 1200px;
  --highlight-text-color: #ffffff; /* 高亮字型 */
  --main-color: #ffffff; /* 字型主色 */
  --main-bg-color: #2F4659; /* 背景主色 */
  --indise-footer-bg-color: #ebb678; /* 注意事項背景顏色 */
  --indise-footer-color: #05151f; /* 注意事項字體顏色 */
  /* 精選禮品 */
  --prod-title-image: url('https://twimage.daigobang.com/web/events/moonfestival2022/prod_title.png'); /* 「精選禮品」圖片 */
  --prod-title-image-height: 60px; /* 「精選禮品」圖片高 */
  --prod-title-image-width: 390px; /* 「精選禮品」圖片寬 */
  --prod-title-image-m: url('https://twimage.daigobang.com/web/events/moonfestival2022/prod_title_m.png'); /* 「精選禮品」圖片 - 小網 */
  --prod-title-image-m-height: 31px; /* 「精選禮品」圖片高 - 小網 */
  --prod-title-image-m-width: 194px; /* 「精選禮品」圖片寬 - 小網 */
  /* 商品分類 */
  --button-color: #ffffff; /* 看折扣按鈕文字色 */
  --button-bg-color: #16193a; /* 看折扣按鈕背景色 */
  --button-bg-color-hv: #16193a; /* 看折扣按鈕互動色 */
  --category-bg-color: #2f8fa0; /* 商品分類底色 */
  --category-bg-color-hv: #f0ce83; /* 商品分類底色 */
  --category-name-color: #16193a; /* 商品分類名稱文字顏色 */
  --category-wrap-size: 13px; /* 商品分類間隔 */
  /* 浮動選單 */
  --float-menu-border-color: #0899e1; /* 浮動選單按鈕間隔顏色 */
  --float-menu-border-color-hv: #c80b00; /* 浮動選單按鈕間隔互動顏色 */
  --float-menu-bg-color: transparent; /* 浮動選單按鈕背景色 */
  --float-menu-bg-color-hv: #c80b00; /* 浮動選單按鈕互動背景色 */
  --float-menu-bg-image: url('https://twimage.daigobang.com/web/events/car_masters2022/bg_float_menu.png'); /* 浮動選單圖片路徑 */
  --float-menu-height: 493px; /* 浮動選單高 */
  --float-menu-width: 143px; /* 浮動選單寬 */
  --float-menu-padding: 110px 10px 0 7px; /* 浮動選單padding */
  --float-menu-image-1: url("https://twimage.daigobang.com/web/events/car_masters2022/11.png");
  --float-menu-image-2: url("https://twimage.daigobang.com/web/events/car_masters2022/22.png");
  --float-menu-image-3: url("https://twimage.daigobang.com/web/events/car_masters2022/33.png");
  --float-menu-image-4: url("https://twimage.daigobang.com/web/events/car_masters2022/44.png");
  --float-menu-image-1-hv: url("https://twimage.daigobang.com/web/events/car_masters2022/11_h.png");
  --float-menu-image-2-hv: url("https://twimage.daigobang.com/web/events/car_masters2022/22_h.png");
  --float-menu-image-3-hv: url("https://twimage.daigobang.com/web/events/car_masters2022/33_h.png");
  --float-menu-image-4-hv: url("https://twimage.daigobang.com/web/events/car_masters2022/44_h.png");
  --float-menu-image-top: url("https://twimage.daigobang.com/web/events/car_masters2022/top.png");
  /* 浮動選單 - 小網*/
  --float-menu-bg: #28a594;
  --float-menu-image-m-1: url("https://twimage.daigobang.com/web/events/moonfestival2022/11-off@2x.png");
  --float-menu-image-m-2: url("https://twimage.daigobang.com/web/events/moonfestival2022/22-off@2x.png");
  --float-menu-image-m-3: url("https://twimage.daigobang.com/web/events/moonfestival2022/33-off@2x.png");
  --float-menu-image-m-4: url("https://twimage.daigobang.com/web/events/moonfestival2022/44-off@2x.png");
  --float-menu-image-m-1-hv: url("https://twimage.daigobang.com/web/events/moonfestival2022/11-on@2x.png");
  --float-menu-image-m-2-hv: url("https://twimage.daigobang.com/web/events/moonfestival2022/22-on@2x.png");
  --float-menu-image-m-3-hv: url("https://twimage.daigobang.com/web/events/moonfestival2022/33-on@2x.png");
  --float-menu-image-m-4-hv: url("https://twimage.daigobang.com/web/events/moonfestival2022/44-on@2x.png");
}


/* Reset */
button {
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  outline: none;
}
p {
  line-height: 1;
  margin: 0;
}
a:hover {
  text-decoration: none;
}

#detail a,
#detail a:visited {
  color: #fff;
}

.car_container {
  max-width: var(--container-width);
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
}

.main-banner {
  background-color: var(--main-bg-color);
  height: 740px;
  width: 100vw;
}
.main-banner img {
  display: block;
  margin: auto;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

.belt {
  width: 100vw;
  padding: 33px 0 7px;
  display: flex;
  justify-content: center;
	background-color: #000412;
}
.belt a {
  opacity: 0.92;
}
.belt a:hover {
  opacity: 1;
}
.belt img {
  max-width: 80vw;
}
.belt a:hover img {
  position: relative;
  top: 2px;
  left: 2px;
  opacity: 1;
}

.card-wrap {
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.card-wrap .card {
  flex: 1;
}
.card-wrap .card + .card {
  margin-left: 10px;
}

.second {
  position: relative;
  width: 100vw;
}
.second .card-wrap {
  padding-top: 84px;
  padding-bottom: 80px;
}
.second .card-wrap .card img {
  width: 100%;
  height: auto;
}
.second .background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: #04a4ed;
}
.second .background img {
  position: absolute;
  max-width: 40vw;
}
.second .background img:nth-of-type(1) {
  top: 0;
  left: 0;
}
.second .background img:nth-of-type(2) {
  bottom: 0;
  right: 0;
}

/* 大師推薦汽車改裝配件、大師推薦機車改裝配件 */
.accessories {
  position: relative;
  height: 640px;
  width: 100vw;
  max-height: 53vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
  overflow: hidden;
}
.accessories .card-wrap {
  padding-top: 220px;
  padding-left: 50px;
  padding-right: 50px;
}
.accessories .card-wrap .card {
  display: block;
}
.accessories .card-wrap .card img {
  width: 100%;
  height: auto;
}
.accessories .background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.accessories .background img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1200px) {
  .accessories .card-wrap {
    padding-top: 18%;
  }
  .accessories .background img {
    width: 158vw;
  }
}
/* 大師推薦汽車改裝配件 */
.third {
  background-image: url(https://twimage.daigobang.com/web/events/car_masters2022/car-accessories-bg.jpg);
}
/* 大師推薦機車改裝配件 */
.fourth {
  background-image: url(https://twimage.daigobang.com/web/events/car_masters2022/motorcycle-accessories-bg.jpg);
}

footer {
  width: 100vw;
  background-color: #04a4ed;
  padding-top: 52px;
  padding-bottom: 52px;
  font-size: 16px;
  text-align: left;
  color: #ffffff;
  line-height: 2.25;
}
footer .car_container {
  padding-left: 140px;
  padding-right: 140px;
}
footer p {
  line-height: 1.3;
}
footer a {
  color: inherit;
}
footer ul {
  padding-left: 32px;
  margin-top: 15px;
  margin-bottom: 35px;
}
@media screen and (max-width: 768px) {
  .card-wrap .card + .card {
    margin-left: 3px;
  }
  .main-banner {
    height: auto;
  }
  .main-banner img {
    width: 100%;
    height: auto;
  }
  .belt {
    padding-top: 17px;
  }
  .second .card-wrap {
    padding: 24px 6px 28px;
  }
  .accessories {
    height: auto;
    max-height: unset;
  }
  .accessories .card-wrap {
    flex-wrap: wrap;
    padding: 48vw 7vw 60px;
  }
  .accessories .card-wrap .card {
    flex: 0 0 50%;
    padding: 5px;
  }
  .accessories .card-wrap .card + .card {
    margin-left: 0;
  }
  .accessories .background img {
    width: 100vw;
  }
  .accessories .background img {
    width: 100vw;
  }
  footer {
    padding-top: 27px;
    padding-bottom: 40px;
  }
  footer .car_container {
    padding-left: 10px;
    padding-right: 10px;
  }
  footer p {
    line-height: 2.25;
  }
}
@media screen and (max-width: 1200px) {
  .mid-head {
    min-width: unset;
  }
  .footer {
    min-width: unset;
  }
}