/*======================================================================== 
	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: radial-gradient( closest-corner circle at 50% 15%, #ee774d 15%, #c72628 95%);*/
  background: radial-gradient(closest-corner circle at 50% 15%, #fac19f, #c91f46 80% 80%, #ca2029);
}
@media (min-width: 960px) {
  body { background: radial-gradient( 1000px circle at 50% 500px, #fac19f, #c91f46 80% 80%, #ca2029);}
}

.knot, .flower{ display: none;}
@media (min-width: 1400px) {
  .knot{ display: block; width: 90px; margin-right: -45%; position: absolute; top: 0; right: 50%;}
  .flower{ display: block; width: 130px; height: 130px; margin-left: -45%;
    position: absolute; top: 110px; left: 50%;}
}
/* 鐘擺動畫 */
 .pendulum{ animation: pendulum 3s linear infinite reverse; transform-origin: top;}
@keyframes pendulum {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

a:link		{ text-decoration: none; color: #611d0b;}
a:visited	{ text-decoration: none; color: #611d0b;}
a:hover		{ text-decoration: none; color: #c72628;}
a:active		{ text-decoration: none; color: #611d0b;}

.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: 0 0 0 8px; 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{ width: 100%; padding-top: 75%; margin: 0 auto; position: relative;
  background-image: url(../images/mainBg_c.png), url(../images/mainBg_c1.png); 
  background-position: center bottom, center top;
  background-size: 100% auto, 100% auto; 
  background-repeat: no-repeat, no-repeat;}
.keyVision > div{ position: absolute;}
.keyVision > div img{ width: 100%;}
.keyVision .slogan{ width: 54%; display: block;
  z-index: 5; position: absolute; left: 11.5%; top: 15%;}
.keyVision .airpods{ width: 18.5%; z-index: 1; right: 5%; top: 48.5%;}
.keyVision .car_cc{ width: 16%; left: 28%; top: 51%;}
.keyVision .car_camry{ width: 25%; right: 18%; top: 59.5%;}
.keyVision .coffe{ width: 10%; left: 7.5%; top: 55%;}
@media (min-width: 1300px) {
  .keyVision{ width: 1300px; height: 880px; padding-top: 0;}
  .keyVision .slogan{ top: 6.5%;}
  .keyVision .airpods{ top: 42%;}
  .keyVision .car_cc{ top: 44.5%;}
  .keyVision .car_camry{ top: 53%;}
  .keyVision .coffe{ top: 49%;}
}

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

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

/* 活動內容 */
.article{ padding: 48px 15px 125px 15px; box-sizing: border-box; z-index: 10; overflow: hidden; position: relative;}
.actionTitle{ width: 100%; padding: 0 30px; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 5;}
.actionBox{ margin-bottom: 10px !important; color: #60200f;
  /*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{ max-height: 85px; width: auto; }
.separatorLine{ width: 20px; height: 100%; margin: 0 25px 0 5px; position: relative;
 background-image: url(../images/separatorLine.svg); background-position: center center;
 background-repeat: no-repeat; background-size: auto 70%; }
.separatorLine::before, .separatorLine::after{ content: url(../images/star.svg); width: 20px;
  position: absolute; left: 0;}
.separatorLine::before{ top: 0;}
.separatorLine::after{ bottom: 0;}
.separatorLine_n{ width: 20px; margin: 0 15px;}
.winner{ width: 320px; height: 110px; margin-left: -160px; position: absolute; bottom: 0; left: 50%; z-index: 5;}

@media (min-width: 480px) {
  .article{ padding-top: 58px; padding-bottom: 60px;}
  .actionTitle{ padding: 0 50px;}
  .actionBox img{ max-height: 100px;}
  .winner{ width: 350px; height: 120px;}
}
@media (min-width: 768px) {
  .article{ padding-top: 99px; padding-bottom: 50px;}
  .actionBox img{ max-height: 160px;}
  .winner{ width: 410px; height: 140px; margin-left: -205px;}
}
@media (max-width: 959px) {
  .winner img{ position: absolute; top: 0;
  animation: floatM 1s ease-in infinite;
  -webkit-animation: float 1s ease-in infinite;}
}
@media (min-width: 960px) {
  .article{ margin-top: -20px; padding-top: 79px; padding-bottom: 53px;}
  .winner{ right: 6%;}
  .actionBox img{ height: 130px;}
  .winner{ left: 77.5%;}
  .winner:hover img{ position: absolute; top: 0;
  animation: floatM 1s ease-in infinite;
  -webkit-animation: float 1s ease-in infinite;}
}
@media (min-width: 1200px) {
  .article{ padding-top: 99px;}
  .actionBox img{ height: 160px;}
}

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

.concaveCircle { box-sizing: border-box;
    background: radial-gradient( closest-side ellipse, #fbdab1 5%, 52%, #f8ce96 95%);
    mask: radial-gradient( circle at 100% 100%, transparent 0, transparent calc(var(--border_radius) - 1px), #000 var(--border_radius)),
      radial-gradient( circle at 0 0, transparent 0, transparent calc(var(--border_radius) - 1px), #000 var(--border_radius)),
      radial-gradient( circle at 100% 0, transparent 0, transparent calc(var(--border_radius) - 1px), #000 var(--border_radius)),
      radial-gradient( circle at 0 100%, transparent 0, transparent calc(var(--border_radius) - 1px), #000 var(--border_radius));
    mask-repeat: no-repeat;
    mask-position: right var(--mask_position) bottom var(--mask_position), 
      left var(--mask_position) top var(--mask_position), 
      right var(--mask_position) top var(--mask_position), 
      left var(--mask_position) bottom var(--mask_position);
    mask-size: 80% 80%;}
.concaveCircle-s1{
  width: 100%; padding: 20px;
  --border_radius: 25px;
  --mask_position: -3px;
}
@media (min-width: 480px) {
  .concaveCircle-s1{ padding: 40px;}
}
.concaveBorder { box-sizing: border-box;
  background: radial-gradient(var(--border_radius) at var(--border_radius) var(--border_radius), 
    transparent calc(97% - var(--border_width)), var(--color) calc(100% - var(--border_width)) 98%, transparent),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color));
    background-position: calc(-1 * var(--border_radius)) calc(-1 * var(--border_radius)),
    calc(var(--border_radius) - 1px) 0,
    calc(var(--border_radius) - 1px) 100%,
    0 calc(var(--border_radius) - 1px),
    100% calc(var(--border_radius) - 1px);
    background-size: 100% 100%,
    calc(100% - calc(var(--border_radius) * 2 - 2px)) var(--border_width),
    calc(100% - calc(var(--border_radius) * 2 - 2px)) var(--border_width),
    var(--border_width) calc(100% - calc(var(--border_radius) * 2 - 2px)),
    var(--border_width) calc(100% - calc(var(--border_radius) * 2 - 2px));
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;}
.concaveBorder-s1 { 
  width: 100%; padding: 10px;
  --color: #f8ce95;
  --border_radius: 25px;
  --border_width: 2px;
}

.actionInfo p{ margin: 5px 0; font-size: 18px; line-height: 150%; color: #60200f;}
.actionInfo b{ color: #cb2026;}
.actionInfo span.icon_line{ width: 32px; margin: 0 5px; display: inline-block;}

.actionInfo .increase span{ width: 18px; height: 100%; padding: 8px 4px; display: block;
  border-radius: 15px; background: #e43f26; 
  color: #f8ce96; font-size: 15px; line-height: 120%; text-align: center; font-weight: bold;}
.actionInfo .other{ padding-left: 25px; position: relative; font-size: 16px;}
.actionInfo .other::before{ content: "※"; position: absolute; left: 0; top: 5px; color: #60200f;}
.actionInfo .other small{ padding: 4px 8px; margin-left: 4px; display: inline-block;
  background: rgba(97, 29, 11, 0.75); border-radius: 15px; 
  font-size: 14px; color: #f8ce96; line-height: 100%; vertical-align: middle;}
@media (min-width: 640px) {
  .actionInfo p{ font-size: 20px;}
  .actionInfo .other{ font-size: 18px;}
}

.qrcode{ padding: 10px 10px 5px 10px; background: rgba(255,255,255,0.5); border-radius: 5px;}
.qrcode p{ margin: 5px 0 0 0; text-align: center; font-size: 13px;}

/* 注意事項 */
.notes{ box-sizing: border-box; margin: 20px; font-size: 15px; color: #f8ce95;}
.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;}
.notes h5 span{ padding: 3px 12px; display: inline-block;
  background: #f8ce95; border-radius: 25px; color: #c72628; font-size: 18px; font-weight: bolder;}
.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(16%) sepia(21%) saturate(4378%) hue-rotate(346deg) brightness(95%) contrast(101%); 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, #f8ce96 0%, #fad7ab 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, #f8ce96 0%, #fad7ab 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;}
}