@charset "UTF-8";

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; outline: none; }
ul{list-style:none;}
img{ max-width:100%; display:block;}
img[src*=".svg"] { width:100%; }
html { width:100%; height:100%; }
body { width:100%; min-height:100%; color:#434343; margin:0 auto; font-size:18px; font-weight: 400; line-height:1.5; position:relative; font-family: "Noto Sans TC", Helvetica; }

.none{ display:none !important;}
.container{ width:100%; position:relative; margin:0 auto; padding:0; }

.pc{ display: block;}
.mb{ display: none;}

#loader{ width:100%; height:100vh; top:0; left: 0; background: #FFF; position:fixed; z-index:99999; overflow:hidden; pointer-events: none;}
#loader.loaded{ opacity:0; transition: opacity 0.7s ease-in; }

#wrap{ width:100%; height:100%; margin: 0 auto; }

#header{ width:100%; /*position:fixed;*/ position: absolute; top: 0; left: 0; z-index:999; }
#header .container{ width: 100%; max-width: 1920px; padding: 15px 0 0 1.2vw;}
#header .logo{ display: block; z-index: 1001; width: 8.38vw; max-width: 160px;}

#main{ width: 100%; position: relative; }
#main section{ width: 100%; max-width: 1920px; margin: 0 auto; position: relative; }

#footer { color: #fff; background-color: #a9c6c9; padding:30px 0;}
#footer .container{ width: 90%; max-width: 1000px; }
#footer .logo{ display: block; width: 135px; margin: 0 auto 20px;}
#footer .links{ display: flex; justify-content: center; margin: 0 auto 20px;}
#footer .links li{ padding: 0 10px; border-right: #fff solid 1px; line-height: 1;}
#footer .links li:last-child{ border-right: 0;}
#footer .links li a{ color: #fff; font-size: 16px;}
.desktop #footer .links li a:hover{ text-decoration: underline;}
#footer .contact{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto 30px;}
#footer .contact li{ padding: 0 7.5px; }
#footer .contact li .btn{ display: block;}
.desktop #footer .contact li .btn:hover{ opacity: 0.8;}
#footer .contact li .btn img{ width: 40px; margin: 0 auto; }
#footer .copyright{ font-size: 12px; font-family: Arial, "sans-serif"; text-align: center;}


#side-btn{ position: fixed; right: 1vw; top: 50%; z-index: 999; transform: translateY(-50%); }
#side-btn .btn{ display: block; width: 8.3333vw; max-width: 160px; transition: all ease-out 0.4s;}
#side-btn .btn img{ animation-delay: 1.5s; animation-duration: 0.5s;}
.desktop #side-btn .btn:hover{ transform: scale(1.05); transition: all ease-out 0.4s;}


#btn-gotop { display:none; position:fixed; right: 10px; bottom:20px; width:50px; height:50px; z-index:998; background-color: #a9c6c9; background-image: url(../img/gotop.png); background-position: 50% 50%; background-repeat: no-repeat; background-size:100% auto; border-radius:100%; cursor:pointer; transition: opacity ease-out 0.3s;}
.desktop #btn-gotop:hover { opacity: 0.75; transition: opacity ease-out 0.3s;}


.sec-kv{ }
.sec-kv .container{}
.sec-kv .kv{ width: 52.5vw; max-width: 1000px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.sec-kv .bg{ }
.sec-kv .kv .slogan{ position: relative;}
.sec-kv .kv .bike{ position: absolute; top: 0; left: 0; animation-duration: 0.8s;}
.sec-kv .kv .bike1{ animation-delay: 0.2s; }
.sec-kv .kv .bike2{ animation-delay: 0.4s; }
.sec-kv .kv .bike3{ animation-delay: 0.6s; }
.sec-kv .prize{ width: 70vw; max-width: 1400px; position: absolute; bottom: 1.5vw; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; }
.sec-kv .prize .item{ position: relative; margin: 0 0.5vw;}
.sec-kv .prize .item:nth-child(1){ animation-delay: 0.5s;}
.sec-kv .prize .item:nth-child(2){ animation-delay: 0.7s;}
.sec-kv .prize .item:nth-child(3){ animation-delay: 0.9s;}
.sec-kv .prize .item .bg{ }
.sec-kv .prize .item .gift{ position: absolute; top: 0; left: 0; width: 100%; height: auto; animation: floating linear 4s infinite;}


.sec-promo{ background: #a9c6c9 url("../img/bg_promo.jpg") center top no-repeat; background-size: 100% auto; padding: 50px 0; position: relative;}
.sec-promo::after{ content: ''; background: url("../img/bg_wave_1.png") bottom repeat-x; width: 100%; height: 15px; position: absolute; left: 0; bottom: 0; }
.sec-promo .container{ }
.sec-promo .title{ width: 80%; max-width: 420px; margin: 0 auto;}
.sec-promo .list{ width: 100%; max-width: 1680px; margin: 0 auto 1.5vw;}
.sec-promo .list .item{ margin: 40px 10px; position: relative;}
.sec-promo .list .item img{ border-radius: 50px; box-shadow: rgba(0,0,0,0.3) 0 0 10px;}


.sec-event{ background: #a9c6c9 url("../img/bg_event.png") center top no-repeat; background-size: 100% auto; position: relative; padding: 50px 0;}
.sec-event::after{ content: ''; background: url("../img/bg_wave_2.png") bottom repeat-x; width: 100%; height: 40px; position: absolute; left: 0; bottom: 0; animation: wave linear 5s infinite;}
.sec-event .container{ }
.sec-event .title{ width: 100%; max-width: 600px; margin: 0 auto 1.5vw;}
.sec-event .desc{ font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 2vw;}
.sec-event .events{ position: relative; overflow: hidden;}
.sec-event .events .road{ }
.sec-event .events .item{ position: absolute; }
.sec-event .events .start{ width: 10%; max-width: 210px; top: 6.5%; left: 45%; animation-duration: 0.6s; animation-delay: 0.4s;  }
.sec-event .events .house{ width: 22%; max-width: 450px; bottom: 5%; right: 7%; }
.sec-event .events .bike1{ width: 14%; max-width: 273px; top: 0%;  left: 27%;  animation-delay: 0.3s; }
.sec-event .events .bike2{ width: 16%; max-width: 319px; top: 13%; right: 13%; animation-delay: 0.3s; }
.sec-event .events .bike3{ width: 17%; max-width: 336px; top: 30%; left: 9%;   animation-delay: 0.3s; }
.sec-event .events .step1{ width: 11%; max-width: 220px; top: 21.5%; left: 27%; animation-duration: 0.6s; }
.sec-event .events .step2{ width: 11%; max-width: 220px; top: 48.5%; left: 27%; animation-duration: 0.6s; }
.sec-event .events .step3{ width: 11%; max-width: 220px; top: 72.5%; left: 18%; animation-duration: 0.6s; }
.sec-event .events .info0{ width: 22%; max-width: 440px; top: 24%; left: 41%; }
.sec-event .events .info1{ width: 30%; max-width: 600px; top: 47%; left: 37%; }
.sec-event .events .info2{ width: 30%; max-width: 600px; top: 65%; left: 26%; }
.sec-event .events .info3{ width: 32%; max-width: 640px; top: 82%; left: 38%; }
.sec-event .events .gift1{ width: 13%; max-width: 280px; top: 48%; left: 64%; animation-delay: 0.4s; }
.sec-event .events .gift2{ width: 15%; max-width: 330px; top: 73%; left: 49%; animation-delay: 0.4s; }
.sec-event .events .gift3{ width: 16%; max-width: 330px; top: 91%; left: 26%; animation-delay: 0.4s; }


.sec-rule{ padding: 50px 0; }
.sec-rule .container{ width: 90%; max-width: 1000px;  }
.sec-rule .label{ width: 70%; max-width: 330px; margin: 0 auto 30px;}
.sec-rule .content{ font-size: 18px; margin-bottom: 30px; }
.sec-rule .content a{ color: #434343;  }
.sec-rule .content h3{  }
.sec-rule .content p{ margin-bottom: 7px; }
.sec-rule .content p.center{ text-align: center;}
.sec-rule .content ul.dot{ margin-left: 18px;  }
.sec-rule .content ul.dot li{ padding-left: 18px;  position: relative;}
.sec-rule .content ul.dot li::before{ background-color: #434343; content: ''; width: 8px; height: 8px; border-radius: 8px; position: absolute; top: 11px; left: 5px;}
.sec-rule .content ol{ margin-left: 25px; }
.sec-rule .content ol>li{ }
.sec-rule .content .level{ display: flex;}
.sec-rule .content .level .i{ min-width: 30px; text-align: center;}
.sec-rule .content .level .t{ width: 100%; }


.sec-statement{}
.sec-statement .container{ padding: 80px 0; }
.sec-statement .title{ background-color: #a9c6c9; color: #fff; font-size: 24px; margin-bottom: 30px; padding: 30px 0; text-align: center;}
.sec-statement .content{ width: 90%; max-width: 900px; font-size: 16px; margin: 0 auto;}
.sec-statement .content h3.strong{ font-weight: 600;}
.sec-statement .content ol{ margin-left: 30px;}
.sec-statement .content li{ margin-bottom: 16px;}
.sec-statement .content p{ margin-bottom: 16px;}
.sec-statement .content a{ color: #434343; text-decoration: underline;}


/*	RESPONSIVE:  */
@media only screen and (max-width:1080px) {	
	

}


/*	RESPONSIVE:  */
@media only screen and (max-width:767px) {

.pc{ display: none;}
.mb{ display: block;}
    
#header .container{ padding: 10px 0 0 10px;}
#header .logo{ width: 100px; }
	
#btn-gotop { bottom:20px; right: 10px; width:50px; height:50px;}
	
#side-btn{ right: 0;}
#side-btn .btn{ width: 44px;}
	
.sec-kv .kv{ width: 93%; top: 6.5%; }
.sec-kv .prize{ width: 97%; bottom: 4%; flex-wrap: wrap; }
.sec-kv .prize .item{ width: 48%; margin: 0 1% 1%;}
.sec-kv .prize .item:nth-child(3){ width: 48%; margin: 0 auto;}
	

.sec-promo{ background-size: 768px auto;}
.sec-promo::after{ background-size: auto 7px; height: 7px; }
	
	
.sec-event{ background-size: 800px auto; }
.sec-event::after{ background-size: auto 20px; height: 20px; bottom: -1px; }
.sec-event .title{ margin-bottom: 8vw; }
.sec-event .desc{ font-size: 18px; margin-bottom: 8vw; }
.sec-event .events .start{ width: 20vw; top: 7vw; left: 40vw; }
.sec-event .events .house{ width: 40vw; bottom: 3vw; right: 4vw; }
    
.sec-event .events .bike1{ width: 24vw; top: 1vw; left: 8vw; }
.sec-event .events .bike2{ width: 25vw; top: 65vw; right: 34vw; }
.sec-event .events .bike3{ width: 25vw; top: 138vw; left: 62vw; }
    
.sec-event .events .step1{ width: 22vw; top: 42vw; left: 3vw; }
.sec-event .events .step2{ width: 22vw; top: 85vw; left: 3vw; }
.sec-event .events .step3{ width: 22vw; top: 162vw; left: 3vw; }
    
.sec-event .events .info0{ width: 59vw; top: 45vw; left: 27vw; }
.sec-event .events .info1{ width: 86vw; top: 91vw; left: 10vw; }
.sec-event .events .info2{ width: 86vw; top: 167vw; left: 10vw; }
.sec-event .events .info3{ width: 89vw; top: 212.5vw; left: 4vw; }
    
.sec-event .events .gift1{ width: 30vw; top: 127vw; left: 12vw; }
.sec-event .events .gift2{ width: 33vw; top: 195vw; left: 1.5vw; }
.sec-event .events .gift3{ width: 33vw; top: 249vw; left: 15vw; }   
    
    
}

/*	RESPONSIVE:  */
@media only screen and (max-width:480px) {

.sec-promo{  background-position: left top;}

.sec-event{ background-size: 550px auto; }
    
}



@keyframes fadeInRight {
  0%{opacity:0; transform:translate3d(30%,0,0)}
  to{opacity:1; transform:translateZ(0)}
}
@keyframes wave {
  0% { background-position: 0 0;}
  100% { background-position: 198px 0;}
}
@keyframes floating {
  0% { transform: translateY(7px); }
  50% { transform: translateY(-7px); }
  100% { transform: translateY(7px); }
}
@keyframes kv-intro {
    0% { transform: scale(1.05,1.05); opacity: 0;}
	100% { transform: scale(1,1); opacity: 1;}
}
@keyframes kv-flash {
    0% { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}