@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
.containerCustom * { box-sizing: border-box;vertical-align: top; text-align: center;font-family: 'Noto Sans TC';}


.headerTop { background: url(../images/background_yellow.jpg) top center repeat-y; }
.headerTop h1 { padding-top: 20px  }
.headerTop .signUpButton { cursor: pointer; }
.headerTop .signUpButton img { transition: .5s; -webkit-transition: .5s; }
.headerTop .signUpButton:hover img { transform: translateY(-10px); }

.backgroundYellow { background: url(../images/background_yellow.jpg) top center repeat-y; }
.backgroundWhite { background: url(../images/background_white.jpg) top center repeat-y; }

.mainButton {}
.mainButton > .button { display: inline-block; margin: 50px 30px; width: 270px; height: 270px; /*border-radius: 99em;*/ background: url(../images/background_yellow.jpg) top center no-repeat; }

.mainButton > .buttonAni:nth-child(1) {-webkit-animation: bottonA 2s infinite alternate; animation: bottonA 2s infinite alternate;}
@-webkit-keyframes bottonA {
  0% {    
    -webkit-clip-path:inset(0px 0px 0px 0px round 99em 40em 99em 50em );
   }  
 100% {   
    -webkit-clip-path:inset(0px 0px 0px 0px round 30em 60em 50em 80em );
     }    
  }
 @keyframes bottonA {
  0% {    
    clip-path:inset(0px 0px 0px 0px round 99em 40em 99em 50em );
   }  
 100% {   
    clip-path:inset(0px 0px 0px 0px round 30em 60em 50em 80em );
     }    
  }

 .mainButton > .buttonAni:nth-child(2) {-webkit-animation: bottonB 2s infinite alternate; animation: bottonB 2s infinite alternate;}
@-webkit-keyframes bottonB {
  0% {    
    -webkit-clip-path:inset(0px 0px 0px 0px round 60em 90em 50em 50em );
   }  
 100% {   
    -webkit-clip-path:inset(0px 0px 0px 0px round 90em 30em 70em 80em );
     }    
  }
 @keyframes bottonB {
  0% {    
    clip-path:inset(0px 0px 0px 0px round 60em 90em 50em 50em );
   }  
 100% {   
    clip-path:inset(0px 0px 0px 0px round 90em 30em 70em 80em);
     }    
  } 

 .mainButton > .buttonAni:nth-child(3) {-webkit-animation: bottonC 2s infinite alternate; animation: bottonC 2s infinite alternate;}
@-webkit-keyframes bottonC {
  0% {    
    -webkit-clip-path:inset(0px 0px 0px 0px round 50em 90em 70em 80em );
   }  
 100% {   
    -webkit-clip-path:inset(0px 0px 0px 0px round 80em 60em 90em 60em );
     }    
  }
 @keyframes bottonC {
  0% {    
    clip-path:inset(0px 0px 0px 0px round 50em 90em 70em 80em );
   }  
 100% {   
    clip-path:inset(0px 0px 0px 0px round 80em 60em 90em 60em);
     }    
  }   




.mainButton > .button p { padding-top: 100px; color: #000  }
.mainButton > .button p b { display: block; font-size: 40px; line-height: 40px; font-weight: 700; }
.mainButton > .button p small { display: block; font-size: 12px; line-height: 20px; font-weight: 100; letter-spacing: 2px; }
.mainButton > .button img { transition: .5s; -webkit-transition: .5s; }
.mainButton > .button:hover img { transform: translateY(-10px); }



.contentBase { padding: 40px 0; width: 100%;}
.contentBase .contentArea { margin: 0 auto; padding: 40px 0; width: 80%; max-width: 1100px; }
.contentBase .contentArea .box2 { display: inline-block; padding-bottom: 20px; width: 50%; letter-spacing: normal; }
.contentBase .contentArea .box2.border { margin: 0 1%; width: 48%; border-radius: 20px;  } 
.contentBase .contentArea h2 {margin-bottom: 10px;}
.contentBase .contentArea p { padding: 0 20px; text-align: left; font-size: 18px; line-height: 30px; color: #000; font-weight: 400; }

.contentBase .contentArea h3.name { display: inline-block; padding: 8px 30px; font-size: 30px; line-height: 30px; font-weight: 500; color: #fff;
	border-radius: 99em; transform: translateY(-20px); background: #ea2a3a;  } 

.activityFlow .button { display: inline-block; margin: 50px 30px; width: 270px; height: 270px; border-radius: 99em; background: #fff} 
.activityFlow .button p { padding-top: 100px; color: #000  }
.activityFlow .button p b { display: block; font-size: 40px; line-height: 40px; font-weight: 700; }
.activityFlow .button p small { display: block; font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing: 2px; }

.contentBase .contentArea.regArea > div { position: relative; margin-bottom:20px; height: 200px; border-radius: 20px; overflow: hidden; ; }
.contentBase .contentArea.regArea > div p { position: relative; transform: translateY(70px); width: 80%; font-size: 30px; line-height: 40px; color: #000; font-weight: 700; z-index: 2 }
.contentBase .contentArea.regArea > div p a { padding: 0 20px; color: #ffd800; border-radius: 20px; background: #000 }
.contentBase .contentArea.regArea > div .bgImg { position: absolute; bottom: 0; right: 0; z-index: 1 }

.note { background: #555 }
.note ul { margin: 0 auto; width: 80%; max-width: 1100px;font-size: 16px; line-height: 30px; color: #fff; font-weight: 100; text-align: left;}
.note ul li { text-align: left; }

.box4 { margin:auto; width: 90%; max-width: 1200px; }
.box4 > div { position: relative; display: inline-block; margin:1%; padding: 10px 0; width: 22%; text-align: center; background: #ffd800 }
.box4 > div::before { position: absolute; top:calc(50% - 5px); right: -16px; content: ""; width: 12px; height: 12px; background: url(../images/arrow.png) top center no-repeat; z-index: 10; }
.box4 > div:last-child::before { display: none }
.box4 > div strong { display: block; font: bold 20px/20px "微軟正黑體"; color: #000; } 
.box4 > div small { display: block; font: 16px/20px "微軟正黑體"; color: #000; } 
.box4 > div small a { color: #000; text-decoration: underline !important; }

p.center { text-align: center !important; }
p.center a {color: #000; }
.voteButton {
  margin: 0 auto 5px auto;
  padding: 5px 0;
  font: bold 20px/20px "微軟正黑體";
  width: 40%;
  min-width: 200px;
  border-radius: 99em;
  background: #fff;
  cursor: pointer;
  display: inline-block;
}

@media only screen and (max-width: 1350px) {
.box2 img { width: 100% }

}

@media only screen and (max-width: 1100px) {
.headerTop h1 img { margin: 0 auto; width: 80%; }

.mainButton > .button , 
.activityFlow .button{ margin: 1.5%; width: 29%; height: auto; } 
.mainButton > .button p ,
.activityFlow .button p  { padding-top: 5%;   }

.mainButton > .button p b ,
.activityFlow .button p b { font-size: 20px; line-height: 20px; font-weight: 700; }

.mainButton > .button p small,
.activityFlow .button p small { display: block; font-size: 12px; line-height: 20px; font-weight: 100; letter-spacing: 2px; }

.contentBase .contentArea .box2 img { width: 100% }


}




@media only screen and (max-width: 768px) {
h2 img { width: 100%; }	
.contentBase > h2 > img { width: 80% }
.signUpButton img { margin: 0 auto; width: 80% }

.mainButton > .button { border-radius:10px; }
.mainButton > .button img { display: none }

.mainButton > .button p b ,
.activityFlow .button p b { font-size: 16px; line-height: 18px; font-weight: 400; }

.mainButton > .button p small,
.activityFlow .button p small { display: block; font-size: 12px; line-height: 20px; font-weight: 100; letter-spacing: 0px}


.contentBase .contentArea .box2 ,
.contentBase .contentArea .box2.border { display: block; margin: 0 auto 10% auto; padding: 5% 0; width: 100%; letter-spacing: normal; }

.contentBase .contentArea h3.name { transform: translateY(0); }


.contentBase .contentArea.regArea > div { height: auto;}
.contentBase .contentArea.regArea > div p { padding: 10% 5% ; transform: translateY(0px); width: 100%; font-size: 16px; line-height: 24px;  font-weight: 500; }
.contentBase .contentArea.regArea > div .bgImg { display: none }



.box4 > div {  width: 47%; }

}

@media only screen and (max-width: 500px) {
.box4 > div strong { display: block; font: bold 14px/20px "微軟正黑體"; color: #000; } 
.box4 > div small { display: block; font: 12px/20px "微軟正黑體"; color: #000; } 
}