/*======================================================================== 
	Copyright: HOT大聯盟
	Author: Shanny
  ========================================================================*/
/* Global */
html{ width:100%; height:100%;}
body {
  margin: 0px; padding: 0; width: 100%;
  font-family: '微軟正黑體', Verdana, 'Times New Roman', Times, Georgia, '新細明體', PMingLiU, '新宋体', NSimSun, serif;
  font-size: 15px; line-height: 160%; color: #fff; text-decoration: none;
  background-image: url(../images/bg.gif);
}

a:link		{ text-decoration: none; color: #0754a1;}
a:visited	{ text-decoration: none; color: #0754a1;}
a:hover		{ text-decoration: none; color: #0754a1;}
a:active		{ text-decoration: none; color: #0754a1;}

.logo{ position: absolute; left: 15px; top: 15px; z-index: 10;}
.logo img{ width: 100px;}
@media (min-width: 960px) {
  .logo img{ width: 150px;}
}
@media (min-width: 1200px) {
  .logo{ left: 25px; top: 25px;}
}

.community{ position: absolute; top: 5px; right: 10px; z-index: 50;}
.community img{ width: 34px; margin: 5px 2px;}
@media (min-width: 640px) {
  .community{ top: 15px; right: 20px;}
  .community img{ width: 40px;}
}

.container{ width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto; position: relative;}

.num{ margin-top: 20px; margin-left: 8px; margin-bottom: 0; padding-left: 16px;}
.num li{ margin: 6px 0 0 0; list-style: decimal;}
.num li i{ color: #d10000; font-style: normal;}
.point li{ margin-top: 4px; position: relative; list-style: none; color: #f44c1f; font-size: 14px;}
.point li:before{ content: ""; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: -17px; top: 0;}


/* 主視覺 */
.keyVision{ position: relative; overflow: hidden;
  background-image: url(../images/mainBg_m.webp);
  background-size: contain; background-repeat: no-repeat;}
.keyVision .slogan{ width: 70%; max-width: 625px; margin-left: 15px; z-index: 5; position: absolute; left: 0; top: 0;}
.keyVision .slogan .title img{ width: 100%; margin-top: 20px;}

.hand{ width: 60%; max-width: 700px; position: absolute; top: 30%; right: -20%;}

.mainPic{ padding-top: 114.5%; position: relative;}
.mainPic > div{ position: absolute;}
.mainPic .gift{ width: 50%; left: 0; bottom: 5%;}
.mainPic .car_rl{ width: 20%; left: 27%; top: 62%; transform: rotate(2deg);}
.mainPic .car_wr{ width: 33%; right: 10%; top: 65%;}
.mainPic .winners{ width: 30%; min-height: 65px; left: 2%; top: 68%; filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.3));}
.mainPic .winners a img{ position: absolute; top: 0; left: 0;
  animation-name: winners;
  transform-origin: center bottom;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-delay: 2.5s;}
.mainPic .winners a:hover img{
  animation: floatUp 1s ease-in infinite;
  -webkit-animation: float 1s ease-in infinite;
}

@media (min-width: 960px) {
  .keyVision{ background-image: url(../images/mainBg.webp); background-position: center top; background-size: cover;}
  .keyVision .slogan{ width: 85%;}
  .hand{ top: 7%; right: -100px;}
  .mainPic{ height: 1000px; padding-top: 0;}
  .mainPic .gift{ top: 60%;}
  .mainPic .car_rl{ top: 50%;}
  .mainPic .car_wr{ top: 50%;}
  .mainPic .winners{ width: 20%; top: 55%; left: 20px;}
}

/* 動效 */
.rotation{ transform-origin: right bottom;
  animation: rotation 1.2s ease-out reverse;
}
@keyframes rotation{
  0%{ transform: rotate(0);}
  100%{ transform: rotate(50deg);}
}
.rock{ transform-origin: right bottom;
  animation: rock 2s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes rock{
  0%{ transform: rotate(0);}
  20%{ transform: rotate(2deg);}
  100%{ transform: rotate(0);}
}

.float1 { display: inline-block; position: absolute; top: 0;
  animation: float 1s ease-in infinite;
  -webkit-animation: float 1s ease-in infinite;
}
.float2 { display: inline-block; position: absolute; top: 0;
  animation: float 0.75s infinite;
  -webkit-animation: float 0.75s ease-out infinite;
}
@keyframes float {
  50% {
    top: 3px; left: 1px;
    transform: scale(1.005);
  }
  100% {
    top: 0; left: 0;
  }
}
@keyframes floatUp {
  50% {
    top: 4px;
  }
  100% {
    top: 0;
  }
}

@keyframes winners {
    0% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    8% {
        transform: rotate(-8deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    16% {
        transform: rotate(8deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    23% {
        transform: rotate(-6.4deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    29% {
        transform: rotate(6.4deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    34% {
        transform: rotate(-3deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    38% {
        transform: rotate(3deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    42% {
        transform: rotate(-1.5deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    45% {
        transform: rotate(1.5deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    48% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    100% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
}

/* 活動內容 */
article{ width: 100%; margin-top: -50px; position: relative; overflow: hidden; z-index: 10;}

.actionBox{ margin-bottom: 10px !important; text-align: center;
  filter: drop-shadow(0px 5px 6px rgba(0, 60, 0, 0.5));
  -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;}
.actionBox img{ width: 90%; max-width: 715px;}
.actionBox:hover { margin-top: -10px;}

@media (min-width: 768px) {
  article{ margin-top: -120px;}
  .actionBox img{ width: 95%;}
}

.actionInfo{ padding: 30px 20px 30px 10px; font-size: 16px; color: #333; line-height: 150%;
  background: #fff; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.actionInfo h6{ margin: 20px 0 10px 0; font-size: 24px; font-weight: bolder; color: #e95504;}
.actionInfo p{ margin-bottom: 0;}
.actionInfo b{ color: #e73a36;}
.actionInfo small{ color: #555; font-size: 13px; font-weight: normal;}
@media (min-width: 640px) {
  .actionInfo{ padding: 30px 30px 30px 25px; font-size: 18px;}
  .actionInfo small{ font-size: 16px;}
}

.actionRemind p{ margin: 0 20px 10px 20px; color: #fff; font-size: 15px;}


/* 注意事項 */
.notes{ position: relative; z-index: 10; margin: 20px;
  border: solid 2px rgba(255,255,255,1); border-radius: 15px;
  background: rgba(255,255,255,0.1);
  -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;}
.notes h4{ height: 60px; padding: 15px 0 0 25px; margin: 0; position: relative; box-sizing: border-box;
  font-size: 20px; color: #fff; font-weight: bolder;
}
.notes .uk-open h4{ color: #22803e;}
.notes:has( > .uk-open){ background: rgba(255,255,255,1);}
.uk-accordion-content{ margin: 0;}
.uk-accordion-title::before{ content: ""; margin: 15px 20px; background-image: none;
  width: 0; height: 0; display: block; border: 8px solid;
  border-color: transparent transparent #fff transparent;
  -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;}
.uk-open > .uk-accordion-title::before{ transform: rotate(180deg); background-image: none;
  border-color: transparent transparent #22803e transparent; margin-top: 25px;}

.coupon_horizontal{ padding: 0 15px 15px 15px;}
.coupon_horizontal::before{ content: ""; width: clac(100% - 20px); height: 1px; display: block; border-top: dotted 1px #ccc;}

.notes h5{ margin: 0 10px; color: #333; font-weight: bolder;}
.notes li,.notes p{ margin: 0 0 0 10px; font-size: 14px; color: #666;}
.notes li{ margin-top: 4px;}
@media (min-width: 480px) {
  .notes li,.notes p{ margin: 0 25px;}
}

/*======================================================================== 
  右側選單
  ========================================================================*/
#rightMenu{ position: fixed; z-index: 20; text-align: center;}
#rightMenu .btn{ margin: 0 auto; box-sizing: border-box; display: inline-block;
  -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25); box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
}
#rightMenu .btn a{ display: inline-block;
  border-top: solid 1px #e5e5e5; border-left: solid 1px #e5e5e5;
  text-align: center; line-height: 120%;
-webkit-transition:all 300ms ease-out; -mozilla-transition:all 300ms ease-out; -ms-transition:all 300ms ease-out;
-o-transition:all 300ms ease-out; transition:all 300ms ease-out;}
#rightMenu a img{ width: 28px; height: 28px; margin-bottom: 4px; display: inline-block;
  filter: invert(54%) sepia(56%) saturate(5610%) hue-rotate(192deg) brightness(97%) contrast(94%); opacity: 0.5;}
#rightMenu a:hover img{ opacity: 1;
  animation-name: upAnimation;
  transform-origin: center bottom;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-delay: .5s;}
#rightMenu span{ display: block; font-size: 14px;}

.goTop{ width: 36px; height: 36px; position: absolute; top: -17px; left: 50%; margin-left: -17px; z-index: 5;
  background: #54c3c3; border-radius: 50%; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25); box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
}
.goTop span { width: 0; height: 0; margin: 5px auto 0 auto; display: block; border: 8px solid;
    border-color: transparent transparent #fff transparent;
}

@media (max-width: 639px) {
  #rightMenu{ width: 100%; bottom: 0; left: 0;}
  #rightMenu .btn{ padding-bottom: 5px; margin: 0 auto; box-sizing: border-box;
    background: linear-gradient(to top, #cae0e8 0%, #fff 15%);
    border-top-left-radius: 15px; border-top-right-radius: 15px;}
  #rightMenu .btn a{ padding: 0 13px 0 15px; margin: 10px 0; border-top: none;}
  #rightMenu .btn a:first-child{ border-left: none;}
}
@media (min-width: 640px) {
  #rightMenu{ right: 0; top: 50%; margin-top: -180px;}
  #rightMenu .btn{ width: 35px; padding: 0 5px 5px 5px;
    background: linear-gradient(to left, #cae0e8 0%, #fff 15%);
    border-top-left-radius: 15px; border-bottom-left-radius: 15px;}
  #rightMenu .btn a{ padding: 10px 0; border-left: none;}
  #rightMenu .btn a:first-child{ border-top: none;}
  .goTop{ top: -30px;}
}
@media (min-width: 768px) {
  #rightMenu .btn{ width: 50px;}
}
@media (min-width: 960px) {
  #rightMenu .btn{ width: 65px; padding: 0 10px 5px 10px;}
  #rightMenu span{ display: block; font-size: 16px;}
}

@keyframes upAnimation {
    0% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    10% {
        transform: rotate(-12deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    20% {
        transform: rotate(12deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    28% {
        transform: rotate(-10deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    36% {
        transform: rotate(10deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    42% {
        transform: rotate(-8deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    48% {
        transform: rotate(8deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    52% {
        transform: rotate(-4deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    56% {
        transform: rotate(4deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    60% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
    }
    100% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
}


/*======================================================================== 
  Footer
  ========================================================================*/

footer{ padding: 15px; position: relative;
  background: #fabf13; box-shadow: 0 0 15px 0 rgba(70,0,0,0.5); font-size: 15px; color: #000;}
footer a{ width: 100%; display: block;}
footer a img{ max-width: 220px;}
@media (max-width: 479px) {
  footer a img{ max-width: 160px;}
}
@media (max-width: 639px) {
  footer{ padding-bottom: 100px;}
}