@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

p,h1,h2,h3,h4,h5,h6 {color:#292929;}
p,a  {color:#ffffff;} 
a {}

a:link {text-decoration: none;} 

body {
	background-color:#d5d0aa;
	background-repeat:no-repeat;background-position:top;background-attachment: fixed; background-size:cover;margin:0;
	padding:0;border:0;font-family: "微軟正黑體", "儷黑 Pro", Arial, Helvetica, sans-serif;z-index: 0;}

.main_bg {background-image:url(../images/bg.jpg);background-size:contain;}
.wrapper_full {margin:0 auto;text-align:center;width:100%;background-repeat:no-repeat;background-position:top;background-attachment: fixed;  background-size:cover;}
.container{margin:0 auto;max-width:1000px;width:90%;}
#header {padding:0px 0 0 0;line-height:0;}

.imgresponse img {width:100%;height:auto;max-width:500px;}
.clearfix {clear:both;}
a {cursor:pointer;}

.topimage {}
.topimage img {width:100%;}
.topweb {visibility:visible;}
.topapp{display:none;}

.content_main {background-color:none;}
.padding{margin:10px auto;}
.logo {margin:10px auto;}
.logo img{width:100%; max-width:200px;}
.logo_campaign {width:100%;margin:0 auto;}
.logo_campaign img {width:100%;max-width:450px;height:auto;}

.content {background-color:#ffffff;min-height:400px;padding-bottom:30px;}
.content .container {width:90%;padding:15px 5%;max-width:800px;}
.content  h1 {color:#89898a;text-align:center;padding:5px 0;}
.content  h4 {font-size:15px;text-align:center;}
.content p,a{color:#362d2b;font-size:15px;line-height:24px;}
.content_trans {padding:20px auto;min-height:300px;}
.content_detail {margin:10px 0;}
.content_message {text-align:center;}

/* FB */
.fblike_wrap2 {position:relative;width:100%;max-width:400px;margin:0 auto;}
.fblike_wrap .arrow {position:absolute;width:50px;height:80px;top:0;top:80px;left:5px;}
.fblike_wrap iframe {width:100%;max-width:400px;height:300px;} 
.fblike {margin:10px auto;text-align:center;}
.fblike img{width:100%;max-width:300px;}


/* TNC */
.tnc {}
.tnc h3 {color:#ad9e69;font-size:21px;}
.tnc li {text-align:left;font-size:14px;}


/* Login */
.mb_login_wrap{}
.mb_login {width:100%;margin:0 auto;}
.mb_login .full {width:90%;max-width:360px;margin:0 auto;padding:10px 5%;}
.mb_login .half{width:47%;float:left;padding:0 1.5%;}
.mb_login .half img{padding:0px;}
.mb_login .row {margin:10px auto;left:0;}
.mb_login .title {color:#1d1d1d;text-align:left;padding:3px 0;}
.mb_login .inputzone{text-align:left;}
.inputsn{width:100%;height:20px;text-align:left;}

.smallremind {font-size:12px;color:#acacac;}
.redremind {color:#d01444;}
.tickremind {font-size:12px;color:#272727;text-align:left;}

.center {text-align:center;}

.gameintro {}
.gameintro .content_detail {text-align:left; text-align:justify;}

.terms { ;font-size: 14px; color: #1851a1; line-height: 21px;}


.bannerzone {margin:0 auto;width:100%;text-align:center;max-width:800px;}
.bannerzone728 {margin:0 auto;width:728px;text-align:center; }
.bannerzone320 {margin:0 auto;width:320px;text-align:center;display:none; }
.bannerzone300 {width:50%;text-align:center;float:left; }
.bannerzone300b {width:50%;text-align:center;float:left;}


/*btn*/
.btneffect img {opacity: 1;-webkit-transition: .2s ease-in-out;transition: .2s ease-in-out;}
.btneffect :hover img {opacity: .7;}
.btn {text-align:center;}
.btn img { margin:10px 10px;width:145px; height:45px;}
.btn2 img { margin:10px 10px;width:220px; height:80px;}
.btn_tnc {padding:10px 0 40px 0;cursor:pointer;}
.btnreg {text-align:center;margin:20px auto;}
.btnreg img{ margin:10px 10px; width:198px; height:42px;}

button{background-color:#ffffff;border:0;}
button a{cursor: pointer;}

.details{max-width:400px;margin:20px auto;}
.details img{width:100%;}
/*images*/
.photo {width:29.5%;float:left;margin:1%;border:solid 4px #ffffff;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);}

/*video*/
.videowrap {margin:0px auto;width:100%;height:auto;text-align:center;background-image:url(../images/videobg.jpg);max-width:500px;}
.videoplay {margin:0 auto;width:100%;}
.player img {width:90%;}

/*QNA*/
.qna_wrap{}
.qna_wrap h1 {font-size:24px;margin:10px auto;text-align:center;color:#333333;}
.ans {margin:0px auto;text-align:left;width:100%;max-width:310px;}
.ans input{margin:10px 0px;}
.ans_select {width:100%; }

.ans ul{ list-style: none; margin: 0;padding: 0;overflow: auto;}
.ans ul li{ color: #AAAAAA; display: block; position: relative;float: left;width: 100%;
  border-bottom: 1px dotted #333;}

.ans ul li input[type=radio]{position: absolute;visibility: hidden;}
.ans ul li label{ display: block; position: relative;font-weight: 300;
  font-size: 1.35em;padding: 6px 5px 5px 60px;margin: 5px auto;
  z-index: 9; cursor: pointer;-webkit-transition: all 0.25s linear;}

.ans ul li:hover label{color: #b9b9b9;}

.ans ul li .check{
  display: block; position: absolute;border: 3px solid #AAAAAA;border-radius: 100%;
  height: 13px;width: 13px;top: 15px; left: 20px;z-index: 5;transition: border .25s linear;-webkit-transition: border .25s linear;}

.ans ul li:hover .check { border: 3px solid #b9b9b9;}
.ans ul li .check::before { display: block;position: absolute;content: ''; border-radius: 100%;
  height: 7px;width: 7px;top: 3px;left: 3px;
  margin: auto;transition: background 0.25s linear;-webkit-transition: background 0.25s linear;}

.ans input[type=radio]:checked ~ .check { border: 3px solid #252525;background: #252525;}
.ans input[type=radio]:checked ~ .check::before{background: #ffffff;}
.ans input[type=radio]:checked ~ label{color: #252525;}

.ans textarea{  
  display: block;box-sizing: padding-box;overflow: hidden; padding: 2% ;width: 96%;
  font-size: 14px;margin: 20px auto; border-radius: 0px;border: 1;}


/*footer*/
.footer {height:150px;}



.poster1 {text-align:center;max-width:600px;margin:0 auto;}
.poster1 img {width:100%;box-shadow: 2px 2px 6px #888888;}




 
 @media (max-width: 767px){
.mb_login .half{width:95%;float:left;padding:0 0;}}

 @media (max-width: 639px){
.container{width:100%;}
.topweb {display:none;}
.topapp{display:block;}}
.bannerzone {margin:0 auto;width:100%;text-align:center;max-width:800px;}
.bannerzone728 {margin:0 auto;width:728px;text-align:center;display:none; }
.bannerzone320 {margin:0 auto;width:320px;text-align:center;display:block; }
.bannerzone300 {width:100%;text-align:center;float:left; }
.bannerzone300b {width:50%;text-align:center;float:left;display:none;}
.logo img{width:45%; max-width:200px;}

 @media (max-width: 565px){


h1 {font-size:24px;}
h2 {font-size:22px;}


/*images*/
.photo {width:29%;float:left;margin:1%;}}





  @media (max-width: 480px){
 .photo {width:45%;float:left;margin:4% 1%;}
 
.mb_login .full {width:94%;max-width:480px;padding:10px 2%;}
.ans {max-width:460px;}
.logo_campaign img {width:100%;max-width:400px;height:auto;}
.details{max-width:330px;margin:20px auto;}
  }
 
  @media (max-width: 320px){

.logo_campaign img {width:100%;max-width:280px;height:auto;}
 .photo {width:100%;float:left;margin:4% 0%;}
/*images*/


  }