/*======================================================================== 
	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: 150%; color: #fff; text-decoration: none;
  background-color: #3d3e55;
  background-image: url(../images/bg.jpg); background-repeat: no-repeat;
  background-size: auto 800px; background-position: center top;
}
@media (min-width: 960px) {
  body{ background-size: auto; background-position: center top -150px;}
}

a:link		{ text-decoration: none; color: #3d3e55;}
a:visited	{ text-decoration: none; color: #3d3e55;}
a:hover		{ text-decoration: none; color: #e46a9c;}
a:active		{ text-decoration: none; color: #3d3e55;}

.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;}
}

/* 主視覺 */
.keyVision{ width: 100%; height: 650px; padding-top: 5%; overflow: hidden;
 background-image: url(../images/bg_w.png), url(../images/bg_c.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom 35%, right bottom 35%;
  background-size: auto 350px, auto 350px;}
.keyVision > div{ width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; position: relative;}

.keyVision .slogan{ width: 80%; margin: 50px auto 0 auto; padding-top: 9%; position: relative; z-index: 15;}
.keyVision .slogan .float1{ width: 13.5%; position: absolute; left: 9%; top: 5%; z-index: 5;}
.keyVision .slogan .float1 img{ rotate: -10deg;}
.keyVision .slogan .float2{ width: 9.5%; position: absolute; right: 13.5%; top: 18.5%; z-index: 1;}
.keyVision .slogan .float2 img{ rotate: 8deg;}
@media (min-width: 640px) {
  .keyVision .slogan{ width: 75%; margin: 0 auto;}
}
@media (min-width: 960px) {
  .keyVision{ height: 1200px; background-position: left bottom 65%, right bottom 65%; background-size: auto, auto;}
  .keyVision .slogan{ width: 60%; margin-top: 0;}
}
@media (min-width: 1200px) {
  .keyVision .slogan{ margin-top: -50px;}
}

.car_w,.car_c{ width: 50%; z-index: 15; position: absolute; bottom: 13%;}
.car_w{ left: 0; text-align: left;}
.car_c{ right: 0; text-align: right;}
.gift{ width: 40%; margin-left: -20%; z-index: 10;
  position: absolute; bottom: 34%; left: 50%;}
@media (min-width: 640px) {
  .car_w,.car_c{ width: 45%; bottom: 4%;}
  .gift{ width: 26%; margin-left: -13%; bottom: 30%;}
}
@media (min-width: 768px) {
  .car_w,.car_c{ bottom: -6%;}
  .gift{ width: 24%; margin-left: -12%; bottom: 20%;}
}
@media (min-width: 960px) {
  .car_w,.car_c{ width: 50%; bottom: 15%;}
  .gift{ width: 26%; margin-left: -13%; bottom: 36%;}
}

/* 動效 */
.float1 img{ display: inline-block; position: absolute; top: 0;
  animation: float 1s ease-in infinite;
  -webkit-animation: float 2s ease-in infinite;
}
.float2 img{ display: inline-block; position: absolute; top: 0;
  animation: float 0.75s infinite;
  -webkit-animation: float 1.5s ease-out infinite;
}
@keyframes float {
  50% {
    top: 3px;
  }
  100% {
    top: 0;
  }
}
.floatUp{ display: inline-block; position: absolute; top: 0;
  animation: floatUp 1s ease-in infinite;
  -webkit-animation: float 1s ease-in infinite;}
@keyframes floatUp {
  50% {
    top: 4px;
  }
  100% {
    top: 0;
  }
}

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

/* 活動內容 */
.action{ padding: 0 20px; margin-top: -5%; box-sizing: border-box; z-index: 19; position: relative;}
.action > div{ margin-bottom: 25px; position: relative;}
.action::after{ content: url(../images/action_gift.svg); width: 130px; margin-left: -65px; z-index: 5;
    position: absolute; left: 50%; bottom: -18px;}
.theTitle{ width: 100%; padding: 0 30px; box-sizing: border-box; text-align: center;
  position: absolute; top: 0; left: 0; z-index: 5;}
.theInfo{ padding: 30px 25px 25px 25px; margin-top: 10%;
  background: #ffffff; border-radius: 25px;
  background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(226, 236, 248, 1) 100%);}
.theInfo img{ width: 100%;}

.otherInfo{ width: 100%; padding: 0 20px; box-sizing: border-box;}
.winner{ width: 100%; max-width: 400px; margin: 0; display: inline-block; position: relative;}
a.winner:link, a.winner:visited, a.winner:active{ color: #7381be;}
a.winner:hover{ color: #e46a9c;}
.winner p{ padding: 38px 0 15px 60px; box-sizing: border-box;
  position: relative; z-index: 3; text-align: center; font-size: 24px; font-weight: bold;}
.winner::before{ content: ""; width: 60px; height: 85px; rotate: -10deg; z-index: 5;
  background-image: url(../images/hotAirBalloon.png); background-repeat: no-repeat; background-size: contain;
  position: absolute; top: 0; left: 15px;
  animation: floatM 1s ease-in infinite;
  -webkit-animation: float 1s ease-in infinite;}
.winner::after{ content: ""; width: 100%; height: 60px; display: block; z-index: 1;
  background: linear-gradient(to top, #e6f2ff 0%, #fff 40%); border-radius: 30px;
   position: absolute; top: 20px; left: 0;}

@media (min-width: 640px) {
  .action::before{ content: url(../images/star.svg); width: 14px; margin-left: -7px; z-index: 5;
    position: absolute; left: 50%; bottom: 13%;}
  .otherInfo{ width: 80%; margin: 0 auto;}
  .winner{ margin: 0 30px;}
}
@media (min-width: 768px) {
  .action{ margin-top: 2%;}
  .action::before{ content: url(../images/star.svg); width: 20px; margin-left: -10px; bottom: 10%;}
  .action::after{ content: url(../images/action_gift.svg); width: 18%; margin-left: -9%; z-index: 5;
    position: absolute; left: 50%; bottom: -10%;}
  .theInfo{ padding: 40px 30px 30px 30px;}
}
@media (min-width: 960px) {
  .action{ margin-top: -20%;}
  .action::before{ bottom: 23%;}
  .action::after{ width: 14%; margin-left: -7%;}
}

@keyframes floatM {
  50% {
    top: 0;
  }
  100% {
    top: 4px;
  }
}

.qrcode{ padding: 0 15px; box-sizing: border-box;}
.qrcode p{ margin: 5px 0 0 0; text-align: center; font-size: 13px;}

/* 注意事項 */
.notes{ box-sizing: border-box; margin: 20px; font-size: 15px; color: #fff;}
.notes a:link    { text-decoration: none; color: #ffcf2f;}
.notes a:visited { text-decoration: none; color: #ffcf2f;}
.notes a:hover   { text-decoration: underline; color: #ffcf2f;}
.notes a:active    { text-decoration: none; color: #ffcf2f;}

.num{ margin: 0 0 0 8px; padding-left: 16px;}
.num li{ margin: 6px 0 0 0; list-style: decimal;}
.num li p{ margin: 4px 0 0 0;}
.num li p b{ padding: 3px 12px; margin-right: 5px; display: inline-block;
  background: rgba(255,255,255,0.2); border-radius: 15px; color: #fff;}

.notes h5 span{ padding: 3px 12px; display: inline-block;
  background: rgba(255,255,255,0.2); border-radius: 25px; color: #fff; font-size: 18px;}
.notes .icon{ width: 100%; display: block;}
@media (min-width: 960px) {
  .notes .icon{ width: 115px;}
}
.notes input { display: none;}
.notes label { cursor: pointer; font-size: 18px; color: #ffcf2f;}
.notes label span{ vertical-align: top;
  -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;}
.notes label:hover span{ transform: rotate(90deg);}
.notes_w { overflow: hidden; width: 100%;
  min-height: 110px; max-height: 0;    /* 讓 transition 能有作用 */
  transition: .5s;
  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);}
.notes input:checked + .notes_w { /* 勾選 checkbox 時顯示相鄰的下一個兄弟元素 */
  max-height: 100%;   /* 讓 transition 能有作用 */
  transition: 1s;
  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);}

/*======================================================================== 
  右側選單
  ========================================================================*/
#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 rgba(0,0,0,0.2); border-left: solid 1px rgba(0,0,0,0.2);
  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(21%) sepia(23%) saturate(627%) hue-rotate(198deg) brightness(101%) contrast(88%); 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: #ffcf2f; 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 #000 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, #e6f2ff 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, #e6f2ff 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: 180px;}
@media (max-width: 479px) {
  footer a img{ max-width: 160px;}
}
@media (max-width: 639px) {
  footer{ padding-bottom: 100px;}
}