/*======================================================================== 
	Copyright: HOT大聯盟
	Author: Shanny
  ========================================================================*/
header .logo{ display: inline-block; position: absolute; top: 0; left: 0; 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(headerBg_m.jpg); background-position: top left;}
  header::before{ content: url("picL_m.png"); width: 40px; height: 86px; display: inline-block; z-index: 3;
    position: absolute; top: 0; left: 0; pointer-events: none;}

  header .logo{ width: 130px; padding-top: 10px; margin-left: 10px;}
  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(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("picL.png"); width: 375px; margin-left: -355px; left: calc((100% - 1200px) / 2);}
    header::after{ content: url("picR.png"); width: 405px; margin-right: -355px; right: calc((100% - 1200px) / 2);}

  header .logo{ width: 340px; height: 112px; padding: 25px 0 0 70px; margin: 0 0 0 -50px; box-sizing: border-box;
    background-image: url(eaves.png);}
  header .logo .car{ width: 100px; height: 60px; position: absolute; top: 25px; left: 70px;}
  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("picR.png"); width: 265px; margin-right: -360px; right: calc((100% - 1200px) / 2);}
}*/

header .reindeer{ z-index: 1; position: absolute; top: 0; left: -300px; opacity: 0;}
header .runR{ animation: infinite ease-in-out normal;}
header .runR{ animation-name: runR;}
@media (max-width: 959px) {
  header .reindeer{ width: 213px; position: relative;}
  header .runR{ animation-duration: 20s;}
}
@media (min-width: 960px) {
  header .reindeer{ width: 320px;}
  header .runR{ animation-duration: 14s;}
}

@-webkit-keyframes runR{
  0%     { opacity: 0; left: -300px;}
  5%     { opacity: 1;}
  55%   { opacity: 1;}
  70%   { opacity: 0; left: calc(50% + 300px);}
}

header .otherLink{ z-index: 5;}
  header .otherLink .subMeun_b, header.sellCar .otherLink .subMeun_b{ display: none;}
header .otherLink .functionMenu a.stress{ background: rgba(255, 165, 150, 0.5); color: #fff;}
header .otherLink .functionMenu a.stress:hover{ background: rgba(255, 255, 255, 1); color: #e91633;}

@media (max-width: 959px) {
    header .otherLink .subMeun_b{ width: calc(100% - 16px); height: 10px; margin: -10px 0 0 8px; 
      display: block; box-sizing: border-box; position: relative;
      background-image: url(mainMenu_mb.jpg); background-repeat: repeat-x;}
      header .otherLink .subMeun_b::before, header .otherLink .subMeun_b::after{ width: 10px; height: 10px; position: absolute; top: -5px;}
      header .otherLink .subMeun_b::before{ content: url(mainMenu_mbl.jpg); left: 0;}
      header .otherLink .subMeun_b::after{ content: url(mainMenu_mbr.jpg); right: 0;}
  header .otherLink .rightMenu a{ margin-left: 1px; background: rgba(255,255,255,0.3);}
  header .otherLink .rightMenu a span{ 
    filter: invert(9%) sepia(95%) saturate(6800%) hue-rotate(349deg) brightness(109%) contrast(86%);}
}
@media (min-width: 960px) {
  header .otherLink{ position: absolute; top: -5px; right: 30px;}
  header .community a img{ filter: invert(87%) sepia(17%) saturate(3184%) hue-rotate(301deg) brightness(107%) contrast(101%);; opacity: 0.7;}
}

/* 主選單 */
.mainMenu a{ width: auto; min-width: 100px; height: 65px; margin: 0 3px; position: relative;}
.mainMenu a > b img{ max-width: 90px; margin-top: 20px; opacity: 0.7;
  filter: invert(77%) sepia(57%) saturate(372%) hue-rotate(354deg) brightness(103%) contrast(101%);
  -webkit-transition:all 200ms ease-out; -mozilla-transition:all 200ms ease-out;
  -ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out;}
.mainMenu a:hover,
header.buyCar .mainMenu a.buyCarLink,
header.sellCar .mainMenu a.sellCarLink,
header.warranty .mainMenu a.warrantyLink{ padding: 0; background: none; 
  filter: drop-shadow(0 2px 5px rgba(235, 25, 50, 0.75));}
.mainMenu a:hover > b img,
header.buyCar .mainMenu a.buyCarLink > b img,
header.sellCar .mainMenu a.sellCarLink > b img,
header.warranty .mainMenu a.warrantyLink > b img{ margin-top: 0;  opacity: 1;
  filter: invert(100%) sepia(5%) saturate(20%) hue-rotate(71deg) brightness(105%) contrast(104%);
}

@media (max-width: 959px) {
  .menuDiv{ margin-top: 70px;}
  .mainMenu{ background-color: #ce2a02;
    background-image: url(subMenuBg_m.jpg); background-repeat: repeat-x; background-position: top left;}
  .mainMenu a{ width: 80%; margin: 20px auto 0 auto; padding: 13px;}
  .mainMenu a > span{ display: none;}
  .mainMenu a > b img{ margin-top: 10px;}
  .mainMenu a:hover,
  header.buyCar .mainMenu a.buyCarLink,
  header.sellCar .mainMenu a.sellCarLink,
  header.warranty .mainMenu a.warrantyLink{ padding-top: 12px;}
  .mainMenu a:hover > b img,
  header.buyCar .mainMenu a.buyCarLink > b img,
  header.sellCar .mainMenu a.sellCarLink > b img,
  header.warranty .mainMenu a.warrantyLink > b img{ margin-top: 10px;}
}
@media (min-width: 960px) {
  .menuDiv{ width: 580px; height: 115px; display: inline-block; position: relative; z-index: 4;}
  .mainMenu{ margin-left: 10px; position: relative; z-index: 5;}
  .mainMenu a{ margin-top: 5px; color: #823b17;}
  .mainMenu a > span{ display: none;}
  .mainMenu a > span img{ width: 50px;
  filter: invert(100%) sepia(5%) saturate(20%) hue-rotate(71deg) brightness(105%) contrast(104%);}
  .mainMenu a:hover > span, 
  header.buyCar .mainMenu a.buyCarLink > span, 
  header.sellCar .mainMenu a.sellCarLink > span, 
  header.warranty .mainMenu a.warrantyLink > span{ display: block;}
  .mainMenu a:hover > span img, 
  header.buyCar .mainMenu a.buyCarLink > span img, 
  header.sellCar .mainMenu a.sellCarLink > span img, 
  header.warranty .mainMenu a.warrantyLink > span img{ opacity: 1; padding-bottom: 0;}
}

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

@media (max-width: 959px) {
  .subMenu{ background: #ce2a02;}
  .subMenu > div{ width: calc(100% - 16px); margin: 0 auto; padding: 5px 0 0 0; position: relative;
    background-color: #fff7d8;
    background-image: url(mainMenu_mt.jpg), url(mainMenu_ml.jpg), url(mainMenu_mr.jpg); 
    background-repeat: repeat-x, no-repeat, no-repeat; 
    background-size: 10px, 10px 100%,10px 100%;
    background-position: top center, top left, top right;
  }
  .subMenu > div::before,.subMenu > div::after{ width: 10px; height: 10px; z-index: 5;
    position: absolute; top: -5px;}
    .subMenu > div::before{ content: url(mainMenu_mtl.jpg); left: 0;}
    .subMenu > div::after{ content: url(mainMenu_mtr.jpg); right: 0;}
  .subMenu div a{ padding: 10px 15px 4px 15px;}
  .subMenu div a::before{ margin-top: -4px;}
}
@media (min-width: 960px) {
  .subMenu{ min-width: auto; height: 45px; padding: 0 15px; top: 65px; left: 0; 
    background-image: url(mainMenu_pcl.png), url(mainMenu_pcr.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;}
    header.sellCar .subMenu{ background-image: none;}
  .subMenu > div{ background-image: none;}
    header.buyCar .subMenu .buyCar_item, header.warranty .subMenu .warranty_item{ 
     padding-top: 8px; display: inline-block; white-space: nowrap;}
  .subMenu div a{ padding: 5px 15px 4px 15px;}
  .subMenu div a::after{ border-color: #f84747;}
}

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

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