/*======================================================================== 
	Copyright: HOT大聯盟
	Author: Shanny
  ========================================================================*/
header .logo{ display: inline-block; position: relative; z-index: 10;}
header .logo .car img{ z-index: 15; position: absolute; left: 0;
  animation: jump 1s infinite;}
header .logo .car::after{ content: ''; z-index: 10; position: absolute;
  border-radius: 100%; background: rgba(75,25,10,0.5);
  box-shadow: 0 0 3px 0 rgba(75,25,10,0.5); -webkit-box-shadow: 0 0 3px 0 rgba(75,25,10,0.5);
  animation: shadow 1s infinite;}

@media (max-width: 959px) {
  body{ padding-top: 70px;}
  header { background-image: url(/images/2025Xmas/headerBg_m.jpg); background-position: top left;}
  header::before, header::after{ height: 86px; display: inline-block; z-index: 3;
    position: absolute; top: 0; pointer-events: none;}
    header::before{ content: url("/images/2025Xmas/picL_m.png"); width: 40px; left: 0;}
    header::after{ content: url("/images/2025Xmas/picR_m.png"); width: 200px; right: 0;}

  header .logo{ width: 130px; margin-top: 15px;}
  header .logo .car img{ width: 60px;}

  @-webkit-keyframes jump{
    0%,100%{ bottom: 1px;}
    20%{ height: 46px;  /*從 20% 的地方才開始變形*/}
    50%{ bottom: 4px; height: 50px;}
    80%{ height: 48px;  /*到 80% 的地方恢復原狀*/}
  }
  @-webkit-keyframes shadow{
    0%,100%{
      width: 53px; height: 3px; bottom: 0; left: 4px;
      background: rgba(75,25,10,0.5);}
    50%{
      width: 46px; height: 5px; bottom: 0; left: 7px; /*讓陰影保持在原位*/
      background: rgba(75,25,10,0.25);}
  }
}

@media (min-width: 960px) {
  body{ padding-top: 105px;}
  header { height: 105px; background-image: url(/images/2025Xmas/headerBg_pc.jpg);}
  header::before, header::after{ height: 120px; display: inline-block; z-index: 6;
    position: absolute; top: 0; pointer-events: none;}
    header::before{ content: url("/images/2025Xmas/picL.png"); width: 610px; margin-left: -360px; left: calc((100% - 1200px) / 2);}
    header::after{ content: url("/images/2025Xmas/picR.png"); width: 265px; margin-right: -80px; right: calc((100% - 1200px) / 2);}

  header .logo{ width: 172px; margin-left: 10px; margin-top: 10px;}
  header .logo .car img{ width: 80px;}

  @-webkit-keyframes jump{
    0%,100%{ bottom: 1px;}
    20%{ height: 60px;  /*從 20% 的地方才開始變形*/}
    50%{ bottom: 9px; height: 58px;}
    80%{ height: 60px;  /*到 80% 的地方恢復原狀*/}
  }
  @-webkit-keyframes shadow{
    0%,100%{
      width: 72px; height: 3px; bottom: 0; left: 5px;
      background: rgba(75,25,10,0.5);}
    50%{
      width: 60px; height: 5px; bottom: 0; left: 10px; /*讓陰影保持在原位*/
      background: rgba(75,25,10,0.25);}
  }
}
@media (min-width: 1300px) {
  header::after{ content: url(/images/2025Xmas/picR.png); width: 265px; margin-right: -360px; right: calc((100% - 1200px) / 2);}
}

header .reindeer{ z-index: 1; position: absolute; opacity: 0;}
header .runL,header .runR{ animation: infinite ease-in-out normal;}
header .runL{ animation-name: runL; }
header .runR{ animation-name: runR; transform:scaleX(-1);}
@media (max-width: 959px) {
  header .reindeer{ width: 80px;}
  header .runL,header .runR{ top: 10px; animation-duration: 20s;}
  header .runR{ animation-delay: 10s;}
}
@media (min-width: 960px) {
  header .reindeer{ width: 102px;}
  header .runL,header .runR{ top: 20px; animation-duration: 40s;}
  header .runR{ top: 20px; animation-delay: 20s;}
}
@-webkit-keyframes runL{
    0%     { opacity: 0; left:  calc(100% + 50px);}
    5%     { opacity: 1;}
    45%   { opacity: 1;}
    50%   { opacity: 0; left: -50px;}
  }
  @-webkit-keyframes runR{
    0%     { opacity: 0; left: -50px;}
    5%     { opacity: 1;}
    45%   { opacity: 1;}
    50%   { opacity: 0; left: calc(100% + 50px);}
  }

header .otherLink{ z-index: 5;}
header .otherLink .functionMenu a.stress{ background: rgba(130, 59, 23, 0.5); color: #fff;}
header .otherLink .functionMenu a.stress:hover{ background: rgba(130, 59, 23, 1);}

@media (max-width: 959px) {
  header .menuDiv .otherLink{ top: 5px;}
  header .otherLink .rightMenu a{ margin-left: 1px; background: none;}
  header .otherLink .rightMenu a:hover{ background: none;}
  header .otherLink .rightMenu a span{ 
    filter: invert(100%) sepia(18%) saturate(0%) hue-rotate(35deg) brightness(103%) contrast(105%) drop-shadow(0 1px 2px rgba(120, 0, 0, 0.5));}
}
@media (min-width: 960px) {
  header .otherLink{ position: absolute; top: -5px; right: 30px;}
  header .community a img{ filter: invert(27%) sepia(20%) saturate(2782%) hue-rotate(345deg) brightness(93%) contrast(92%); opacity: 0.5;}
}

/* 主選單 */
.mainMenu a{ width: auto; min-width: 80px; height: auto; padding: 10px 15px 12px 15px; margin: 0 3px; position: relative;
  border-radius: 5px; font-size: 18px; color: #fff;
  background: linear-gradient(to top, rgba(181,76,4,0) 85%, rgba(130,37,4,0)), radial-gradient(farthest-corner ellipse, rgba(245,227,180,0), rgba(240,193,128,0));
}
.mainMenu a:hover::after,
header.buyCar .mainMenu a.buyCarLink::after,
header.sellCar .mainMenu a.sellCarLink::after,
header.warranty .mainMenu a.warrantyLink::after{ content: url(/images/2025Xmas/snow.png); position: absolute; top: -5px; right: -5px;}
.mainMenu a:hover,
header.buyCar .mainMenu a.buyCarLink,
header.sellCar .mainMenu a.sellCarLink,
header.warranty .mainMenu a.warrantyLink{ padding-top: 15px; color: #823b17;
  background: linear-gradient(to top, rgba(181,76,4,0) 85%, rgba(130,37,4,0.15)), radial-gradient(farthest-corner ellipse, #f5e3b4, #f0c180);
  box-shadow: 0 2px 5px 0 rgba(120,0,0,0.75);
}

@media (max-width: 959px) {
  .menuDiv{ margin-top: 70px;}
  .mainMenu{ background: #dd4534;
    background: url(/images/2025Xmas/subMenu_t.png) top left / auto no-repeat, linear-gradient(#de4533 5%, #d1312d);}
  .mainMenu a{ width: 80%; margin: 18px auto 0 auto;}
  .mainMenu a:hover,
  header.buyCar .mainMenu a.buyCarLink,
  header.sellCar .mainMenu a.sellCarLink,
  header.warranty .mainMenu a.warrantyLink{ margin-top: 10px;}
}
@media (min-width: 960px) {
  .menuDiv{ width: 750px; height: 115px; display: inline-block; position: relative; z-index: 4;
    background-image: url(/images/2025Xmas/mainMenu_pc.png); background-repeat: no-repeat; background-position: left bottom;}
    header.sellCar .menuDiv{ background-image: url(/images/2025Xmas/mainMenu_s.png); background-position: left 41.5% bottom 20px;}
  .mainMenu{ margin-left: 200px; position: relative; z-index: 5;}
  .mainMenu a{ margin-top: 8px; color: #823b17;}
  .mainMenu a:hover,
  header.buyCar .mainMenu a.buyCarLink,
  header.sellCar .mainMenu a.sellCarLink,
  header.warranty .mainMenu a.warrantyLink{ margin-top: 13px;}
}

/* 次選單 */
.subMenu div a:link,.subMenu div a:visited,.subMenu div a:hover,.subMenu div a:active{ color: #ffefae;}

@media (max-width: 959px) {
  .subMenu > div{ padding: 5px 0; position: relative; 
    background: #dd4534; background: linear-gradient(#d1312d, #d1312d 95%);}
  .subMenu > div::after{ content: ""; width: 100%; height: 30px; z-index: 5;
    position: absolute; bottom: -30px; left: 0;
    background-image: url(/images/2025Xmas/subMenu_b.png);}
}
@media (min-width: 960px) {
  .subMenu{ min-width: auto; height: 72px; padding: 0 22px 0 57px; top: 43px; left: 75px; 
    background-image: url(/images/2025Xmas/mainMenu_r.png); background-position: right bottom;}
    header.sellCar .subMenu{ background-image: none;}
  .subMenu > div{ background-image: none;}
    header.buyCar .subMenu .buyCar_item, header.warranty .subMenu .warranty_item{ 
     margin-left: 0; padding-left: 0; padding-top: 17px; display: inline-block; white-space: nowrap;}
  .subMenu div a{ padding-bottom: 9px;}
  .subMenu div a::after{ border-color: #4caf50;}
}

/* 漢堡選單 */
.burgerMenu, .burgerMenu::before, .burgerMenu::after{ background: #000; z-index: 5}

@media (max-width: 959px) {
  #burgerMenu:checked ~ .menuDiv > div { min-height: 180px;}
  .sellCar #burgerMenu:checked ~ .menuDiv > div{ min-height: 115px;}
}
@media (max-width: 639px) {
    .warranty #burgerMenu:checked ~ .menuDiv > div { min-height: 215px;}
}