@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
#mtkContainer { overflow: hidden; }
#mtkContainer * { vertical-align: top;font-family: "微軟正黑體"; box-sizing: border-box; }
#mtkContainer button,
 { font-size: 20px; }
header.header { margin: 0; padding: 0; height: 696px; background: url(../images/header_pc.jpg) top center no-repeat;}
.line1 { margin: 0; padding: 0; height: 107px; background: url(../images/line_1.jpg) top center no-repeat;}
.line2 { margin: 0; padding: 0; height: 110px; background: url(../images/line_2.jpg) top center no-repeat;}
header.header h1 { margin: 0; }
header.header .mobile,
header.header .pc2 { display: none; }

.goEventButtonBase { padding:20px 0; background: #fff200 }
.goEventButtonBase  .goEventButton { margin: 0px auto; width: 300px; border-radius: 99em; transition: .5s;
  text-align: center; border:5px solid #000; background: #da2c52; box-shadow: 0 10px 0 rgba(0,0,0,0.3)}
.goEventButtonBase  .goEventButton a { font: 500 34px/1.2em "微軟正黑體";text-align: center;color: #fff; cursor: pointer; }
.goEventButtonBase  .goEventButton:hover { transform: translateY(5px);  box-shadow: 0 5px 0 rgba(0,0,0,0.1); }
.goEventButtonBase  .goEventButton a:hover { color: #fff200; }

a:link,
a:visited { color: #fff; }
a:hover { text-decoration: none; }
.setop { display: none; }
.box1 { width: 100%; height: 100vh; background: url(../images/sample_1.jpg) top center no-repeat; background-size: 100% auto; }
.box2 { padding: 10px 0 50px 0;}

.gameBase { padding: 50px 0 200px 0; width: 100%; height: auto; background: #fff200 }
.gameBase h2,
.gameBase p strong { margin-bottom: 5px; font: 700 40px/1.2em "微軟正黑體";text-align: center;color: #fff200;background: #000;width: auto;display: inline-block;padding: 0 20px;border-radius: 200px;}
.gameBase p {font: 500 24px/1.8em "微軟正黑體"; text-align: center; letter-spacing: -2px; color: #000;}

.stepArea { text-align: center; }

.chanceArea { text-align: center; }
.chanceArea > .chanceButton,
.chanceArea > .nextButton { display: inline-block; letter-spacing: normal; margin-right: 5px; margin-top: 0px; width: 250px;
	font: 500 24px/1.8em "微軟正黑體"; text-align: center; color: #fff; cursor: pointer;
	transition: .5s; background: #000;}

.chanceArea > .nextButton a,
.chanceArea > .nextButton a:link {color: #fff  }
.chanceArea > .nextButton:hover a { color: #000; }

.chanceArea > div:last-child { margin-right:0; }
.chanceArea > div:hover { color: #000; background: #fff; }
.chanceArea > .nextButton.cantUse { /*color: #fff; background: #999;*/}
.chanceArea > .nextButton.cantUse:hover {/* opacity: 0; */}
select.locationList , input.workedtime{ font-size: 20px; height: 43px; margin-top: 0px; }

.gameHide { display: none; }


.waterBoxBorder {
  margin: 0 auto;
  padding: 0px 0; 
  position: relative;
  align-items: center;
  min-height: 500px;
 /* border:8px solid #000;*/
  overflow: hidden;
  width: 510px;
  border-radius: 99em;
  /*box-sizing: border-box;*/
  /*background: #000;*/
  /*box-sizing: content-box; border: 8px solid #000;*/
}

.waterBox {
  margin: 0 auto;	
  position: relative;
  align-items: center;
  min-height: 500px;
  background-color: rgba(0,0,0,1);
  overflow: hidden;
  width: 500px;
  border-radius: 99em;
  /*box-sizing: content-box; border: 8px solid #000;*/
}
.waterInner1, .waterInner2 {
  content: "";
  position: absolute;
  left: 50%;
  min-width: 200%;
  min-height: 190%;
  background-color: rgba(255,255,255,1);
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.waterInner1 {
  bottom: 65%;
  border-radius:100%;
  animation-duration: 10s;
}
.waterInner2 {
  bottom: 60%;
  opacity: 0.5;
  border-radius: 100%;
  animation-duration: 10s;
}
.waterBox .earth {
  opacity: 0.8;
  position: absolute;
  bottom:0%;
  left: 0;
  width:100%;
  height: 100%;
  background: url(../images/earth.png) top center no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}
@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }
  50% {
    transform: translate(-50%, -2%) rotateZ(180deg);
  }
  100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
  }
}

.waterNum { position: absolute; top:5%; left:calc(50% - 150px); width: 300px; font: 500 20px/1.2em "微軟正黑體"; 
text-align: center; color: #000; z-index: 99; }
.waterNum { font: 700 60px/1.2em "微軟正黑體"; }



.flightCard { margin: 0 auto; display: inline-block; padding:20px 20px; width: auto; /*max-width: 700px;*/ border-radius: 20px; background:#fff; }
select.locationList,.taiwan { height: auto;  padding: 5px 0; margin: 0; font: 700 26px/1em "微軟正黑體"; background:transparent; border: none; }
select.locationList {  background: #ddd; cursor: pointer; }
.taiwan { line-height: 45px ; letter-spacing: normal; }
.flightLogo { padding: 0 15px; }
.flightLogo img { padding-top: 10px; }

.nowTime { margin-bottom: 10px; font: 700 26px/1em "微軟正黑體";  letter-spacing: normal; color: #ccc; }
.nowTime:hover { color: #ccc !important; }

@media only screen and (min-width: 900px) and (max-width: 1440px) {
header.header { height: auto; background: none }

header.header .pc2 { display: block; width: 100%; }
}



@media only screen and (max-width: 900px) {
  header.header { height: auto; background: none }
header.header .pc2 { display: none; }
header.header .mobile { display: block; width: 100%; }
}

@media only screen and (max-width: 414px) {
 .waterBoxBorder {
  padding: 1%;
  margin: 0 auto; 
  position: relative;
  align-items: center;
  min-height: 92vw;
  background-color: #fff;
  overflow: hidden;
  width:92%;
  border-radius: 99em;
 
} 
.waterBox {
  margin: 0 auto; 
  position: relative;
  align-items: center;
  min-height: 90vw;
  
  overflow: hidden;
  width:100%;
  border-radius: 99em;
 
}
.waterNum { font: 700 40px/1.2em "微軟正黑體"; }

.chanceArea > .chanceButton, .chanceArea > .nextButton { width: 40%;}
.chanceArea > .nextButton.oneButton { padding: 0 10px; border-radius: 0px; width: auto; }

.chanceArea > .chanceButton,
.chanceArea > .nextButton,
select.locationList, 
input.workedtime{ margin-top: 20px }

}











/*shareCSS*/
#mtkContainer.share {  background: url(../images/bg.png)  #fff200 top center repeat;transition: .5s }
.shareHeader { margin: 0 auto; position: relative; padding: 20px 0;width: 100%; max-width: 1440px; -webkit-perspective: 2000;transition: .5s  }



/*.shareHeader > div { display: inline-block; padding: 20px 10px; width: 50%; letter-spacing: normal; }*/

/*.shareHeader .img img { width: 100%; border: 5px solid #000; }*/
#mtkContainer.share h1 {margin: 0; padding: 10% 0 0 0;  font:700 40px/1.2em "微軟正黑體"; text-align: center; color: #000;}
#mtkContainer.share p { padding: 50px 0 50px 60px; font:500 25px/1.6em "微軟正黑體"; text-align: left;
color:#000; position: relative;z-index: 2}
#mtkContainer.share p.small { font-size: 23px; letter-spacing: -1px; }

.shareHeader .more { display: none; }


.toolBottonBase { margin: 0 auto; padding: 2% 0 2% 0;width: 90%; max-width: 900px; }
.toolBottonBase .button { transition: .5s; display: inline-block; margin: 0 0.5%; padding: 5px;
  width: 32%;font:700 20px/1.4em "微軟正黑體"; text-align: center; color: #fff;
  letter-spacing: normal; border:2px solid #000; overflow: visible; cursor: pointer;
  z-index: 20; box-shadow: 10px 10px rgba(0,0,0,0.4); background: #e12e54; }
.toolBottonBase .button strong { color: #fff200; font-size: 24px;}



  /*.toolBottonBase .button:hover { transform: translateY(-10px); color: #fff200; box-shadow: 5px 20px 0 rgba(0,0,0,0.2)  }
}*/
.toolBottonBase .button:nth-child(2) { background:#2b3afd; }
.toolBottonBase .button:nth-child(3) { background:#fd6b2b; }

.iframeBase { padding:0 0 30px 0; text-align: center; background: url(../images/background_reprat.jpg) top center repeat; }



.rotateBox{ margin: 0 auto; width: 90%; max-width:900px; height: auto;position: relative;/*border: 5px solid #000*/;
box-sizing: content-box; transform-style: preserve-3d; transition: 1s }
.card { display: block;position: absolute;width: 100%;height: auto; backface-visibility: hidden; 
  background: rgba(255,255,255,0.8); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }

.front{ background:#fff; transform: rotateY(180deg);  }
.front > div,
.back > div > div { display: inline-block; letter-spacing: normal; }
.back > div { height: 100%;background:rgba(255,255,255,0.9); transform: translateY(1px);}
.front .img { position: relative; width: 100%;  cursor: pointer;}
.front .rotateBotton { width: 170px; font: 700 24px/1.2em "微軟正黑體"; color: #000; 
letter-spacing: normal; text-align: center; }

.back .img { position: relative; width: 400px; box-sizing: border-box;  }
.back .img .alert,
.front .alert { display: inline-block; position: absolute;top:0; left: 0; padding: 0 10px;  border-radius: 99em;
 font: 700 20px/1.2em "cwTeXYen",sans-serif; color: #fff; background:#000; opacity: 1;transition: .5s;cursor: pointer; }

.back .img img {cursor: pointer; transform: translate(0,40px)scale(1.12) rotate(-10deg);
  animation: cardFly 1s infinite alternate; border: 5px dotted #000; }
@-webkit-keyframes cardFly {
  0% { transform: translate(0,50px)scale(1.12) rotate(-10deg) ; box-shadow: 0 20px 20px rgba(0,0,0,0.2)}
 
  100% {  transform: translate(0,30px)scale(1.12) rotate(-10deg) ; box-shadow: 0 50px 20px rgba(0,0,0,0.1) }
}

@keyframes cardFly {
  0% { transform: translate(0,50px)scale(1.12) rotate(-10deg) ; box-shadow: 0 20px 20px rgba(0,0,0,0.2)}
 
  100% {  transform: translate(0,30px)scale(1.12) rotate(-10deg) ; box-shadow: 0 50px 20px rgba(0,0,0,0.1) }
}

.back .img:hover img { animation-play-state:paused;  }
.back .img:hover .alert ,
.front .img:hover .alert { opacity: 1 }

.back .text { position: relative; width: 498px; box-sizing: border-box; }
.back .text .logo {position: absolute; top: -20px; right: -50px; width: 150px; height: 150px; 
  border-right: 99em; background:url(../images/logoBg.png) top center no-repeat; background-size: 100%;
 font: 700 24px/140px "微軟正黑體"; color: #db2c52; text-align: center; transform: rotate(-10deg); }

.back{  }
.flipped{transform: rotateY(180deg); }
.flipped .back { height: 100%; }
.flipped .back > div { background: transparent; }
.rotateBox.flipped .back { display: none;  }
.rotateBox.flipped .card { backface-visibility: visible;  }

.rotateBox img { width: 100%; }
.rotateBox.flipped .back .img,
.rotateBox.flipped .back .logo{ display: none; }
.rotateBox.flipped .back .text { opacity: 0 }




.eventContentBase { display: block; background:#fff200; }
.eventContentBase .eventContent { margin:0 auto; padding:10px 20px; width: 90%; max-width: 1100px; 
  text-align: center; border:5px solid #000; background:#fff; }
.eventContentBase .eventContent h2 { margin:20px 0; }
.eventContentBase .eventContent p {font: 500 30px/46px "微軟正黑體"; color: #000;}
.eventContentBase .eventContent p.giftName { margin: 0 auto; width: 180px; color: #fff200; border-radius: 99em;
 background:#000; }
.eventContentBase .eventContent p.small { font: 500 20px/34px "微軟正黑體"; text-align: left; color: #000;}
.eventContentBase .eventContent p.small strong { padding:0 10px; font-weight: 500; border-radius: 99em; color: #fff200; 
  background: #000; }
.eventContentBase .eventContent h3 {font: 500 32px/50px "微軟正黑體"; text-align: left; color: #000;}
.eventContentBase .eventContent .box4 > div { display: inline-block; width: 23.5%; }
.eventContentBase .eventContent .box2 > div { display: inline-block; width: 49%; }
.eventContentBase .eventContent .box2 img,
.eventContentBase .eventContent .box4 img { width: auto; }
.eventRule { margin:0px 0 0 0; padding: 20px 0; background:#000; }
.eventRule ul { margin: 0 auto; width: 80% }
.eventRule ul li {  font: 500 18px/30px "微軟正黑體"; text-align: left; color: #fff;letter-spacing: 1px; 
list-style: none; }


@media only screen and (max-width: 1135px) {
.rotateIO{ width: 100px;  height: 100px;} 
.back .img { width: 40%; }
.back .img img { transform: translate(0,40px)scale(1.12) rotate(-10deg); border: 5px dotted #000; }
.back .text { width: 60%; }
#mtkContainer.share p { font-size: 24px }

}

@media only screen and (max-width: 900px) {
.front > div { display: block; }
.card,.rotateBox { height: auto; }
.back { position: static; }
/*.back * { position: static; }*/
.front .img { width: 100%; }
.front .rotateBotton { width: 100%; font: 700 24px/1.2em "微軟正黑體"; letter-spacing: normal; text-align: center; }

.back > div { display: block; }
.back .img { width: 100%; }
.back .img img {animation-play-state:paused;animation:none; transform: translate(0,0) rotate(0deg); border: 5px dotted #000; }
.back .text { width:100%; }
.back .img .alert { display: none; }
#mtkContainer.share p.small  { padding: 0px 0 20px 0px; text-align: center; }

.eventContentBase .eventContent p.giftName { margin: 0 auto; width: 100%; color: #fff200; border-radius: 99em; background:#000; }
.eventContentBase .eventContent .box2 img,
.eventContentBase .eventContent .box4 img { width: 100%}
}

@media only screen and (max-width: 500px) {
.eventContentBase { display: none; }
#mtkContainer.share p.small { font:500 18px/1.6em "微軟正黑體";
 font-size: 16px;
    letter-spacing: 1px;  } 
  /*
.shareHeader > div { display: block; padding: 20px 10px; width: 100%; letter-spacing: normal; }*/

}
@media only screen and (max-width: 500px) {
.shareHeader > div.text { padding-top: 0; }  
.shareHeader .more { display: block; margin: 0 auto; padding:5px 0; width: 130px; font:500 16px/1em "微軟正黑體"; text-align: center; color: #fff; border-radius: 99em; background: #000; }
.toolBottonBase { padding-top: 5%; }
.toolBottonBase .button { display: block; margin: 0 auto 3% auto; width: 98%; box-shadow: 0 5px rgba(0,0,0,0.4); height:auto; vertical-align: middle; }
#mtkContainer.share h1 { padding: 0; text-align: center; }
#mtkContainer.share p { padding: 5%; }

.back .text .logo { display: none; }

.gameBase p {font: 500 18px/1.8em "微軟正黑體"; text-align: center; letter-spacing: -1px; color: #000;}
.gameBase h2,
.gameBase p strong {font: 700 20px/1.4em "微軟正黑體"; text-align: center;}

.chanceArea > .nextButton {   font: 500 20px/1.8em "微軟正黑體"; letter-spacing: -1px }


.eventContentBase .eventContent h2 img { width: 100% }
.eventContentBase .eventContent p {font: 500 20px/1.4em "微軟正黑體"; color: #000;}

.eventContentBase .eventContent p.small { font: 500 20px/1.4em "微軟正黑體"; text-align: left; color: #000;}
.eventContentBase .eventContent p.small strong { padding:0 10px; font-weight: 500; border-radius: 99em; color: #fff200; background: #000; }
.eventContentBase .eventContent h3 {font: 500 24px/46px "微軟正黑體"; text-align: left; color: #000;}

.eventContentBase .eventContent .box2 img,
.eventContentBase .eventContent .box4 img { width: 100%; }
.mobileHide { display: none; }


}


.modal-body p {font-size: 18px; letter-spacing: 1px }

/*AWARD*/
.awardBtn { margin: 0px auto; width: 300px; border-radius: 99em; transition: .5s;
  text-align: center; border:5px solid #000; background: #da2c52; box-shadow: 0 10px 0 rgba(0,0,0,0.3)}
.awardBtn a { font: 500 30px/40px "微軟正黑體"; text-align: center; color: #fff; cursor: pointer; display: block; }
.awardBtn:hover { transform: translateY(5px);  box-shadow: 0 5px 0 rgba(0,0,0,0.1); }
.awardBtn a:hover { color: #fff200; }

/*
.modal {text-align: center;}
.modal-header {padding: 15px; border-bottom: 1px solid #e5e5e5; background: #000; color: #fff;}
.modal-header .close {padding: 0 1rem; color: #fff200;}
.close{opacity: 1; font-size: 3rem;}
.close:hover{opacity: 1; color: #fff;}
.modal-dialog {display: inline-block; text-align: left; vertical-align: middle; word-spacing: -0.36em;}
*/

.award{width: 100% !important;}
.award .award-title{background: #da2c52; border-radius:20px;}
.award .award-title > h3{color: #fff; font-size: 24px; line-height: 40px; margin-bottom: 5px; text-align: center; /*padding: 8px 0;*/}
.award .award-title > h3 > span{ display:inline-block; color: #fff !important; font-size: 24px !important;}
.award p{color: #da2c52 !important; font-size: 24px; text-align: center;}
.award .area{float: left; width: 50%; margin-bottom: 15px;}
.award ol{ list-style:none; width: 49%; display: inline-block;}
.award li{font-size: 15px; line-height: 24px; border-bottom: dashed 1px #ccc; margin-bottom: 5px;}
.award black{background: #000; color: #fff; border-bottom: none;}
.award span{ color: #da2c52; padding: 0 10px 0 5px;}
.note{font:bold 16px/24px "微軟正黑體","新細明體"; color: #da2c52; border: solid 5px #da2c52; clear: both; padding: 15px;}
.note a{color: #0099ff;}

/*
.modal-footer {display: none;}
@media screen and (min-width: 980px) {
  .modal-dialog{ max-width: 950px !important; display: block;}
}
@media screen and (max-width: 768px) {
  .modal-dialog{width: 90%;}
}
*/

@media screen and (max-width: 640px) {
  /*.modal-dialog{width: 90%; height: 80%; overflow: scroll;}*/
  .awardBtn { width: 280px !important;}

  .award{width: 100%; display:block; margin: 0;}
  .award .award-title{border-radius:50px;}
  .award .area{width: 50%;}
  .award ol{ width: 100%; display: block; float: left;}
  .award li{font-size: 15px; line-height: 18px; border-bottom: dashed 1px #ccc; margin-bottom: 2px;}
  .award p{font-size: 18px;}
  .award .award-title > h3{color: #fff; font-size: 18px; line-height: 24px; margin-bottom: 5px; text-align: center; /*padding: 8px 0;*/}
  .award .award-title > h3 > span{ display: block; color: #fff !important; font-size: 18px !important;}

}