@charset "utf-8";
@import url("all_shared.css");

body{ 
	background: #172E57;
	background: -moz-linear-gradient(top,  #172E57 0%, #050618 100%);
	background: -webkit-linear-gradient(top,  #172E57 0%,#050618 100%);
	background: linear-gradient(to bottom,  #172E57 0%,#050618 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#172E57', endColorstr='#050618',GradientType=0 );
	}
ul{list-style:none;}
.clear-fix{ clear:both;}

.header { width:100%; margin:0 auto;}
.topmenu{ width:100%; margin:0 auto;}
.container{ width:100%; margin:0 auto; position:relative; z-index:999;}
.footer { width:100%;height: auto; margin:0 auto;background-color:#fcad17;}

.header .headerbox{width: 1000px;margin:0 auto;background-color: #C2C3C4; position:relative; }
.container .containerbox{width:1000px; margin:auto; background-color: #C2C3C4; padding:0 15px 15px 15px;}
.footer .footerbox{width:1000px;height: auto; margin:0px auto; text-align:center; padding:10px; color:#fff; font-size:100%; letter-spacing:2px;}

/*----------------------------------------------------------------*/

/*header--------------------------------------------------*/
.headerbox .bg{ width: 100%; margin:auto; font-size:0;}
.headerbox .bg h1{ margin:0;}
.headerbox .bg img{ width: 100%; margin:auto;}
.headerbox .bg02{ display:none;}

.menu{ width:700px; height:auto; position:absolute; bottom:15px; left:70px;}
.menu li{ float:left;margin-left:0px;width:auto; height:auto;text-align:center; }
.menu li:hover{ opacity:.8;}
.menu li a{ display:inline-block; width:90%;height:auto; font-size:0;text-align:center;}
.menu li a img{ width:auto;height:auto;  max-height:75px;}
.menu li:nth-child(4){ margin-left:5px;}


.home-btn{ display:inline-block; position:absolute; top:15px; right:25px; width:11%; height:auto;}
.home-btn img{ width: 100%;}
.home-btn .home-phone{ display:none;}
/*header-end-------------------------------------------------*/
/*container--------------------------------------------------*/
.border{width: 100%; margin:auto; border:1px solid #000000; background:#85898C; border-radius:30px; padding:0 6px; position:relative;}
.border .borderbox{width: 100%; margin:auto;border:1px solid #000000;background-color: #fff; border-radius:30px; padding:15px;position:relative;}
.border-img{ display:inline-block; position:absolute; right:5px; top:-140px; z-index:-1; width:17%;}
.border-img img{ width: 100%;}

.containerbox .toptitle{ height:63px;}
.containerbox .toptitle img{ width:auto; height:100%;}

.containerbox .toptext{ padding:2% 0px;}
.containerbox .toptext img{ width:22px;vertical-align:text-bottom;}
.containerbox .toptext span{ font-size:110%;}

/*內容------------------------------------------------*/
.content{ width:100%; margin:auto;font-size:110%; }

.explain{ width:80%;  margin-top:-40px;float:right; line-height:160%;}
.explain .top-text{ color:#204e91; font-size:140%; font-weight:bold;}
.explain .txt-group{ padding:5px 0;font-size:120%;}
.explain .txt-group li{ padding:10px 0;}
.explain .txt-group .title{ color:#d34124; font-weight:bold;}
.explain .txt-group .text{ padding:5px 0;}

.content .txt-group ol{ list-style-position:outside; padding-left:1.5em;}

.list-start{ width:660px; text-align:center;}
.list-start .txt-group{ width:auto;font-size:120%;}
.list-start .txt-group li{ padding:5px 0;}
.list-start .txt-group .title{display:inline-block; color:#D34124; vertical-align:middle;font-weight:bold;}
.list-start .txt-group .text-wrep{width:auto;display:inline-block;}
.list-start .txt-group .text-wrep .item{ display:inline-block; padding:0 2px;}
.list-start .txt-group .text-wrep .item select{ padding:2px;color:#666;}

.list-start .txt-group .text-wrep .itembox{ padding:5px 0;}
.list-start .txt-group .text-wrep .itembox span{vertical-align:middle;}
.list-start .txt-group .text-wrep .itembox input{ width:120px;padding:2px;font-size:100%;vertical-align:middle; color:#666; vertical-align:middle;}
.list-start .txt-group ol{ display:inline-block;}

.botton{ width:100%; margin:auto;text-align:center; padding:30px 0;font-size:0; }
.botton a{ width:140px; display:inline-block;}
.botton img{ width:100%;}

/*列表------------*/
.search{ width:850px;font-size:120%;}
.search-bar{ width:100%; margin:auto; text-align:center; padding:15px 0;  vertical-align:middle; border-bottom:1px dashed #BBBBBD;}
.search-bar input{ width:120px;font-size:100%; padding:3px 2px;border:1px solid #6D6F6E; }
.search-bar .search_btn{ font-size:100%;vertical-align:middle; width:60px; text-align:center;padding:2px 8px; margin-left: 5px; border:1px solid #6D6F6E; background-color: #DFDFDF;}

.table_box1 {width:90%; height:auto; margin:0 auto; }
.table_box1 #css_table .line{background:#FED261;color:#6B5950; }
.table_box1 #css_table .box01{ width:auto; }
.table_box1 #css_table .box02{ width:130px;}
.table_box1 #css_table>.box03{ width:190px !important; text-align:center;}
.table_box1 #css_table .box03 p{ display:inline-block; margin-left:5px;}
.table_box1 #css_table .box04{ width:50px;}

/*得獎名單awarded*/
.awarded{ width: 100%;margin:auto; color:#363231;	}
.awarded .text-box{ font-size:130%; line-height:150%; padding:2% 0 5% 0;}
.awarded .title{ line-height:160%;}
.awarded .text-box h5{ font-size:110%; padding-bottom:2%; color:#204E91;}
.awarded .text-box .download{ font-size:100%; padding-top:2%; font-weight:bold;}

.awarded_table{  margin:0;}
/*game-說明頁-----------*/
.containerbox .gametitle{ width:100%; height:auto;}
.containerbox .gametitle .gametitle-img{ display:inline-block; width:24%;font-size:0; float:left;}
.containerbox .gametitle .gametitle-img img{ width:100%; height:auto;}

.gametitle .score{ float:right;width:73%; height:auto; vertical-align:bottom;margin:2% 0 0 1%; position:relative;}
.gametitle .score .score-img{width:100%;font-size:0;}
.gametitle .score .score-img img{ width:100%;}
.gametitle .score .score-txt{font-size:190%;color:#fff; width:21%; text-align:center;position:absolute; top:52%;transform:translateY(-50%); right:7%; }

.score-seed
{
	width:50%; position:absolute;top:50%; left:5%;transform:translateY(-50%); list-style:none;
}
.score-seed .seed-box
{
	width: 14%;
    height: auto;
    margin: 0 1%;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
	margin-left:4%;
}
.score-seed .seed-box img{ width:100%;height:auto; padding:0;}

.game-startbg{ height:650px; background:url(../Rewardedimg/img-25.png) no-repeat bottom center; background-size:105% auto;}

.game-start{ width:100%;}
.game-start .game-title{ width:190px; margin:auto; text-align:center; font-size:0;}
.game-start .game-title img{ width:100%;}
.game-start .game-content{ text-align:center; font-size:150%; padding:15px 0; font-weight:bold;}
/*game-測驗頁-----------*/
.game-test{ width:100%; margin:auto; position:relative;}
.game-test .game-content{ width:700px; margin:auto; min-height:450px; border-bottom:1px dashed #BBBBBD;text-align:center;padding:30px 0; color:#363231; font-weight:bold; position:relative;}

.game-content .question-num{display:inline-block; width:100px; height:66px;  font-size:250%; line-height:66px; color:#AD3232; text-align:center; 
background: url(../Rewardedimg/img-47.png) no-repeat top center; background-size:100% auto;}
.game-content .question-text{display:inline-block; width:580px;font-size:150%; padding-left:10px; padding-top:10px; line-height:150%;}
.game-content .question-text .content{ margin-bottom:15px;}
.game-content .question-text .options{ width:450px;min-height:200px;}
.game-content .question-text .options label{ display:block; }
.game-content .question-text .options input{vertical-align:middle;}
.game-content .question-text .options .txt{ width:390px; vertical-align:top; display:inline-block;}
.options input[type="radio"] { width:20px;height:20px; margin:-2px 5px 0 0;}

.game-bg{ position:absolute; right:-10px; bottom:50px; font-size:0;}
.game-bg img{ width:100%; margin:auto;}

/*game-end*/
.game-end{ width:70%; margin:auto;}
.game-end .gameover-box{ width:100%; margin:auto; position:relative; }
.game-end .gameover-box .img{ width:100%; margin:auto;font-size:0;}
.game-end .gameover-box .img img{ width:100%; margin:auto;font-size:0;}

.game-end .gameover-box .name{ width:100%; text-align:center; position:absolute;font-size:110%; font-weight:bold; }

.game-end .gameover-box .score { position:absolute;width:43%; height:auto; text-align:center;font-size:125%;font-weight:bold; color:#fff; vertical-align:middle;}
.game-end .gameover-box .score img{ width:100%;}
.game-end .gameover-box .score span{font-size:100%; width:100%;  position:absolute; top:8%; left:50%; transform:translateX(-50%);  }
.game-end .gameover-box .score span b{font-size:200%; padding:0 3%; }

.game-end .first .name{ position:absolute;top:-170%;  color:#000;}
.game-end .first .score {left:13%; bottom:16%;  position:absolute; }

.game-end .second .name{ position:absolute;top:-165%; color:#000;}
.game-end .second .score { position:absolute; right:8%; bottom:17%;}

.game-end .third .name{position:absolute;  top:-190%;  }
.game-end .third .score { left:11%; bottom:7%; position:absolute;}

.game-end .gameover-btn{ width:auto; margin:auto; text-align:center;font-size:0;}
.game-end .gameover-btn a{width:170px; display:inline-block; margin:2% 7%; }
.game-end .gameover-btn img{ width: 100%; margin:auto;}
/*container--end------------------------------------------------*/



/* == 手機版型區 =============================== */
@media screen and (min-width:450px) and (max-width: 767px ){
body{ width:100%;min-width:320px; height:auto;-webkit-text-size-adjust:none;font-family:Arial, Helvetica, "微軟正黑體", sans-serif !important;}
/*-------------------------------------------*/
.header .headerbox{width: 100%;;margin:0 auto; position:relative; }
.container .containerbox{width:100%; margin:auto; background-color: #C2C3C4; padding:0 15px 15px 15px;}
.footer .footerbox{width:100%;height: auto; margin:0px auto; text-align:center; padding:10px; color:#fff; font-size:100%; letter-spacing:2px;}

/*----------------------------------------------------------------*/

/*header--------------------------------------------------*/
.bg{ width: 100%; margin:auto; font-size:0;}
.bg img{ width: 100%; margin:auto;}
.bg .bg01{ display:none;}
.bg .bg02{ display:inline-block;}

.menu{ width:95%; height:auto; margin:auto; overflow:hidden;position:inherit; bottom:0; left:1%;}
.menu li{ float:left;margin-left:-0.5%;width:24%; height:auto;text-align:center;  }
#re_width{width:27%;}
.menu li:hover{ opacity:.8;}
.menu li a{ display:inline-block; width:100%;height:auto; font-size:0;}
.menu li a img{ width:100%;height:auto;  max-height:100%;}
.menu li:nth-child(1){ margin-left:0.5%; margin-right:-1%;}
.menu li:nth-child(4){ margin-left:-0.5%; }


.home-btn{ display:inline-block; position:absolute; top:8%; right:5%; width:8%; height:auto; text-align:right;}
.home-btn img{ width: 100%;}
.home-btn .home{ display:none;}
.home-btn .home-phone{ display:inline-block; width:100%;}
/*header-end-------------------------------------------------*/
/*container--------------------------------------------------*/
.border{width: 100%; margin:auto; border:1px solid #000000; background:#85898C; border-radius:30px; padding:0 6px; position:relative;}
.border .borderbox{width: 100%; margin:auto;border:1px solid #000000; background:#fff; border-radius:30px; padding:15px;}
.border-img{ display:none; position:absolute; right:5px; top:-110px; z-index:-1; width:150px;}
.border-img img{ width: 100%;}

.containerbox .toptitle{ height:63px;}
.containerbox .toptitle img{ width:auto; height:100%;}
/*game-title*/
.containerbox .gametitle{ width:100%; height:auto;}
.containerbox .gametitle .gametitle-img{height:63px;display:inline-block;  font-size:0;}
.containerbox .gametitle .gametitle-img img{width:auto; height:100%;}

.gametitle .score{ display:block;width:100%; height:auto;margin:auto; padding:10px 0;position:relative;}
.gametitle .score .score-img{width:100%;font-size:0;}
.gametitle .score .score-img img{ width:100%;}
.gametitle .score .score-txt{font-size:190%;color:#fff; width:21%; text-align:center;position:absolute; top:54%;transform:translateY(-50%); right:7%; }

.score-seed{ width:52%; position:absolute;top:50%; left:5%;transform:translateY(-50%); list-style:none;}
.score-seed .seed-box{ 
width:13%; height:auto; margin:0 1%; display:inline-block; vertical-align:middle; font-size:0;
margin-left:4%;
}
.score-seed .seed-box img{ width:100%;height:auto; padding:0 0px;}
/*內容------------------------------------------------*/
.content{ width:100%; margin:auto; padding:20px 0;font-size:100%;}

.explain{ width:100%;  margin-top:0px;float:right;}
.explain .top-text{  padding:5px 0;font-size:120%;}
.explain .txt-group li{ padding:10px 0;}
.explain .txt-group .title{ }
.explain .txt-group .text{ padding:5px 0;}
.explain .txt-group ol{ list-style-position:outside; padding-left:1.5em;}

.list-start{ width:100%; text-align:center;padding:10px 0;}
.list-start .txt-group{ width:auto;font-size:120%;}
.list-start .txt-group li{ padding:5px 0;}
.list-start .txt-group .title{display:inline-block; color:#D34124; vertical-align:middle;}
.list-start .txt-group .text-wrep{width:100%;display:inline-block; padding:5px 0;}
.list-start .txt-group .text-wrep .item{ display:inline-block; padding:0 2px;}
.list-start .txt-group .text-wrep .item select{ padding:2px;}

.list-start .txt-group .text-wrep .itembox{ padding:5px 0;}
.list-start .txt-group .text-wrep .itembox span{ width:auto;vertical-align:middle;}
.list-start .txt-group .text-wrep .itembox input{ width:120px;padding:0 2px;font-size:100%;vertical-align:middle; line-height:150%;}
.list-start .txt-group ol{ display:block;}

.botton{ width:100%; margin:auto;text-align:center; padding:30px 0;font-size:0; }
.botton a{ width:150px; display:inline-block;}
.botton img{ width:100%;}

/*得獎名單awarded*/
.awarded{ width: 90%;margin:auto; color:#363231;	}
.awarded .text-box{ font-size:120%; line-height:150%; padding:2% 0 5% 0;}
.awarded .title{ line-height:160%;}
.awarded .text-box h5{ font-size:100%; padding-bottom:2%; color:#204E91;}
.awarded .text-box .download{ font-size:100%; padding-top:2%; font-weight:bold;}
/*列表---------------------*/
.search{ width:100%;font-size:110%; }
.search-bar{ width:100%; margin:auto; text-align:center; padding:15px 0;  vertical-align:middle; border-bottom:1px dashed #BBBBBD;}
.search-bar input{ width:100px;font-size:100%; padding:3px 2px;border:1px solid #6D6F6E; }
.search-bar button{ font-size:100%;vertical-align:middle;font-size:100%;padding:2px 8px; margin-left: 5px; border:1px solid #6D6F6E; background-color: #DFDFDF;}

#css_table { background-color: transparent; text-align:left;border:#eee 0px solid;}
#css_table .css_tr { display:block; width:100%; font-size:110%; height:auto; overflow:hidden;border:#ddd 1px solid; padding:5px 0; 	background: #ffffff;}
#css_table .css_tr:nth-child(odd){ background-color:#FFE9E9;}
/*標題部分*/
#css_table .css_tr:first-child {  font-weight:bold;/*標題底色*/background-color: #ea6e8c; color:#FFFFFF;display: none;}
#css_table .css_td { display:inline-block;border:none;width:100%; padding:1% 2%;text-align:left; }

#css_table .line{/*標題底色*/background-color: rgba(255,255,255,0.8);color:#333;}
#css_table .css_tr .css_td h1{ font-size:100%;color:#000; margin:0px;}
#css_table .title{color:#0277bd;font-size:87.5%;}
#css_table .css_td b{color:#000;display: inline-block;text-align: right;  vertical-align:text-bottom;}
#css_table .css_td b:after{ content:":";}

.table_box1 { clear:both; width:100%; height:auto; margin:0 auto;border:0px solid #eee;}
.table_box1 #css_table .line{background-color:#000; }
.table_box1 #css_table .box01{ width:100%;float:left;}
.table_box1 #css_table .box02{ width:100%;float:left; text-align:left;}
.table_box1 #css_table .box03{ width:100%;float:left; text-align:left;}
.table_box1 #css_table .box04{ width:100%;float:left; text-align:left;}
.table_box1 #css_table .css_td b{  width:70px; text-align:right;}

.table_box1 #css_table .box03 p{ display:inline-block; padding-left:5px;}

/*game------------*/
.border .game-startbg{ height:auto; background:#ffdcf0 url(../Rewardedimg/img-25.png) no-repeat center center; background-size:105% auto;}

.game-start{ width:100%;}
.game-start .game-title{ width:150px; margin:auto; text-align:center; font-size:0;}
.game-title img{ width:100%;}

.game-start .game-content{ text-align:center; font-size:130%; padding:20px 0;  color:#363231; font-weight:bold;}
.game-start .botton{margin-bottom:5%;}

/*game-測驗頁-----------*/
.game-test{ width:100%; margin:auto;}
.game-test .game-content{ width:93%; margin:auto; min-height:auto; border-bottom:1px dashed #BBBBBD;text-align:left;padding:5% 0; color:#363231; font-weight:bold; position:relative; }

.game-content .question-num{display:inline-block; width:90px; height:60px;  font-size:200%; line-height:60px; color:#AD3232; text-align:center; 
background: url(../Rewardedimg/img-47.png) no-repeat top center; background-size:100% auto;}
.game-content .question-text{width:100%;display:inline-block; font-size:140%; padding-left:0; padding-top:0%; line-height:150%;}
.game-content .question-text .content{width:100%; margin-bottom:0px;padding:3% 0;}
.game-content .question-text .options{ width:100%;min-height:auto;}
.game-content .question-text .options label{ display:block; padding:1% 0; }
.game-content .question-text .options input{vertical-align:middle; }
.game-content .question-text .options .txt{ width:89%; vertical-align:top; display:inline-block;}
.options input[type="radio"] { width:8%;height:20px; margin:auto;}

.game-test .game-bg{width:30%; max-width:150px; min-width:140px;  height:auto;position:absolute; right:3%;top:-60px; bottom:auto; font-size:0;}
.game-test .game-bg img{ width:100%; margin:auto;}


/*game-end*/
.game-end{ width:100%; margin:auto;}
.game-end .gameover-box{ width:100%; margin:auto; position:relative; }
.game-end .gameover-box .img{ width:100%; margin:auto;font-size:0;}
.game-end .gameover-box .img img{ width:100%; margin:auto;font-size:0;}
.game-end .gameover-box .name{ position:absolute;font-weight:bold;font-size:85%; line-height:140%; }
.game-end .gameover-box .score { position:absolute;width:42%; height:auto; text-align:center;font-size:130%;font-weight:bold; color:#fff; vertical-align:middle;}
.game-end .gameover-box .score img{ width:100%;}
.game-end .gameover-box .score span{font-size:100%; width:100%; position:absolute;top:30%; transform:translate(-50%,-50%); }
.game-end .gameover-box .score span b{font-size:200%; padding:0 3%; }

.game-end .first .name{ position:absolute;top:-180%; color:#000;}
.game-end .first .score {left:14%; top:59%;  position:absolute; }

.game-end .second .name{ position:absolute;top:-170%; }
.game-end .second .score { position:absolute; right:8%; bottom:17%;}

.game-end .third .name{position:absolute; top:-200%;  }
.game-end .third .score { left:10%; bottom:7%; position:absolute;}

.game-end .gameover-btn{ width:100%; margin:auto; text-align:center;font-size:0;}
.game-end .gameover-btn a{width:45%; max-width:150px; display:inline-block; margin:4% 2%; }
.game-end .gameover-btn img{ width: 100%; margin:auto;}
/*container--end------------------------------------------------*/


}
@media screen and (max-width: 449px) {
body{ width:100%;min-width:320px; height:auto;-webkit-text-size-adjust:none;font-family:Arial, Helvetica, "微軟正黑體", sans-serif !important;}
/*-------------------------------------------*/
.header .headerbox{width: 100%;;margin:0 auto; position:relative; }
.container .containerbox{width:100%; margin:auto; background-color: #C2C3C4; padding:0 15px 15px 15px;}
.footer .footerbox{width:100%;height: auto; margin:0px auto; text-align:center; padding:10px; color:#433130; font-size:100%; letter-spacing:2px;}

/*----------------------------------------------------------------*/

/*header--------------------------------------------------*/
.bg{ width: 100%; margin:auto; font-size:0;}
.bg img{ width: 100%; margin:auto;}
.bg .bg01{ display:none;}
.bg .bg02{ display:inline-block;}

.menu{ width:95%; height:auto; margin:auto; overflow:hidden;position:inherit; bottom:0; left:0;}
.menu li{ float:left;margin-left:0;width:24%; height:auto;text-align:center;  }
#re_width{width:27%;}
.menu li:hover{ opacity:.8;}
.menu li a{ display:inline-block; width:100%;height:auto; font-size:0;}
.menu li a img{ width:100%;height:auto;  max-height:100%;}
.menu li:nth-child(1){ margin-left:0; }
.menu li:nth-child(2){ margin-left:-2.5%; }
.menu li:nth-child(3){ margin-left:-1%; }
.menu li:nth-child(4){ margin-left:-0.6%; }

.home-btn{ display:inline-block; position:absolute; top:8%; right:5%; width:8%; height:auto; text-align:right;}
.home-btn img{ width: 100%;}
.home-btn .home{ display:none;}
.home-btn .home-phone{ display:inline-block; width:100%;}
/*header-end-------------------------------------------------*/
/*container--------------------------------------------------*/
.border{width: 100%; margin:auto; border:1px solid #000000; background:#85898C; border-radius:30px; padding:0 6px; position:relative;}
.border .borderbox{width: 100%; margin:auto;border:1px solid #000000; background:#fff; border-radius:30px; padding:15px;}
.border-img{ display:none; position:absolute; right:5px; top:-110px; z-index:-1; width:150px;}
.border-img img{ width: 100%;}

.containerbox .toptitle{ height:63px;}
.containerbox .toptitle img{ width:auto; height:100%;}
/*game-title*/
.containerbox .gametitle{ width:100%; height:auto;}
.containerbox .gametitle .gametitle-img{height:63px;display:inline-block;  font-size:0;}
.containerbox .gametitle .gametitle-img img{width:auto; height:100%;}

.gametitle .score{ display:block;width:100%; height:auto;margin:auto; padding:10px 0;position:relative;}
.gametitle .score .score-img{width:100%;font-size:0;}
.gametitle .score .score-img img{ width:100%;}
.gametitle .score .score-txt{font-size:100%;color:#fff; width:21%; text-align:center;position:absolute; top:52%;transform:translateY(-50%); right:7%; }

.score-seed{ width:52%; position:absolute;top:48%; left:5%;transform:translateY(-50%); list-style:none;}
.score-seed .seed-box{ width:13%; height:auto; margin:0 1%; display:inline-block; vertical-align:middle; font-size:0;
margin-left:4%;
}
.score-seed .seed-box img{ width:100%;height:auto; padding:0 0px;}
/*內容------------------------------------------------*/
.content{ width:100%; margin:auto; padding:20px 0;font-size:100%;}

.explain{ width:100%;  margin-top:0px;float:right;}
.explain .top-text{  font-size:140%; font-weight:bold;}
.explain .txt-group{ padding:5px 0;font-size:120%;}
.explain .txt-group li{ padding:10px 0;}
.explain .txt-group .title{}
.explain .txt-group .text{ padding:5px 0;}
.explain .txt-group ol{ list-style-position:outside; padding-left:1.5em;}

.list-start{ width:100%; text-align:center;padding:10px 0;}
.list-start .txt-group{ width:auto;font-size:120%;}
.list-start .txt-group li{ padding:5px 0;}
.list-start .txt-group .title{display:inline-block; color:#D34124; vertical-align:middle;}
.list-start .txt-group .text-wrep{width:100%;display:inline-block; padding:5px 0;}
.list-start .txt-group .text-wrep .item{ display:inline-block; padding:0 2px; margin:5px 0; display:block;}
.list-start .txt-group .text-wrep .item select{ padding:2px;}

.list-start .txt-group .text-wrep .itembox{ padding:5px 0;}
.list-start .txt-group .text-wrep .itembox span{ width:auto;vertical-align:middle; display:block;margin:5px 0;}
.list-start .txt-group .text-wrep .itembox input{ width:120px;padding:0 2px;font-size:100%;vertical-align:middle; line-height:150%;}
.list-start .txt-group ol{ display:block;}

.botton{ width:100%; margin:auto;text-align:center; padding:30px 0;font-size:0; }
.botton a{ width:150px; display:inline-block;}
.botton img{ width:100%;}


/*得獎名單awarded*/
.awarded{ width: 90%;margin:auto; color:#363231;	}
.awarded .text-box{ font-size:110%; line-height:150%; padding:2% 0 5% 0;}
.awarded .title{font-size:130%; line-height:160%;}
.awarded .text-box h5{padding-bottom:2%; color:#204E91;}
.awarded .text-box .download{ font-size:100%; padding-top:2%; font-weight:bold;}

.awarded table{ width:auto;border-collapse:collapse; padding:0; margin:0;font-size:100%; line-height:150%;}
.awarded table td{ padding:10px 20px;border:1px solid #B9B9B9;}
/*列表---------------------*/
.search{ width:100%;font-size:110%; }
.search-bar{ width:100%; margin:auto; text-align:center; padding:15px 0;  vertical-align:middle; border-bottom:1px dashed #BBBBBD;}
.search-bar input{ width:100px;font-size:100%; padding:3px 2px;border:1px solid #6D6F6E; }
.search-bar button{ font-size:100%;vertical-align:middle;font-size:100%;padding:2px 8px; margin-left: 5px; border:1px solid #6D6F6E; background-color: #DFDFDF;}

#css_table { background-color: transparent; text-align:left;border:#eee 0px solid;}
#css_table .css_tr { display:block; width:100%; font-size:110%; height:auto; overflow:hidden;border:#ddd 1px solid; padding:5px 0; 	background: #ffffff;}
#css_table .css_tr:nth-child(odd){ background-color:#FFE9E9;}
/*標題部分*/
#css_table .css_tr:first-child {  font-weight:bold;/*標題底色*/background-color: #ea6e8c; color:#FFFFFF;display: none;}
#css_table .css_td { display:inline-block;border:none;width:100%; padding:1% 2%;text-align:left; }

#css_table .line{/*標題底色*/background-color: rgba(255,255,255,0.8);color:#333;}
#css_table .css_tr .css_td h1{ font-size:100%;color:#000; margin:0px;}
#css_table .title{color:#0277bd;font-size:87.5%;}
#css_table .css_td b{ color:#000;display: inline-block;text-align: right;  vertical-align:text-bottom;}
#css_table .css_td b:after{ content:":";}

.table_box1 { clear:both; width:100%; height:auto; margin:0 auto;border:0px solid #eee;}
.table_box1 #css_table .line{background-color:#000; }
.table_box1 #css_table .box01{ width:100%;float:left;}
.table_box1 #css_table .box02{ width:100%;float:left; text-align:left;}
.table_box1 #css_table .box03{ width:100%;float:left; text-align:left;}
.table_box1 #css_table .box04{ width:100%;float:left; text-align:left;}
.table_box1 #css_table .css_td b{ width:70px;}

.table_box1 #css_table .box03 p{ display:inline-block; padding-left:5px;}

/*game------------*/
.border .game-startbg{ height:auto; background:#ffdcf0 url(../Rewardedimg/img-25.png) no-repeat center center; background-size:105% auto;}

.game-start{ width:100%;}
.game-start .game-title{ width:150px; margin:auto; text-align:center; font-size:0;}
.game-title img{ width:100%;}

.game-start .game-content{ text-align:center; font-size:130%; padding:20px 0;  color:#363231; font-weight:bold;}
.game-start .botton{margin-bottom:5%;}

/*game-測驗頁-----------*/
.game-test{ width:100%; margin:auto;}
.game-test .game-content{ width:93%; margin:auto; min-height:auto; border-bottom:1px dashed #BBBBBD;text-align:left;padding:5% 0; color:#363231; font-weight:bold; position:relative; }

.game-content .question-num{display:inline-block; width:90px; height:60px;  font-size:200%; line-height:60px; color:#AD3232; text-align:center; 
background: url(../Rewardedimg/img-47.png) no-repeat top center; background-size:100% auto;}
.game-content .question-text{width:100%;display:inline-block; font-size:140%; padding-left:0; padding-top:0%; line-height:150%;}
.game-content .question-text .content{width:100%; margin-bottom:0px;padding:3% 0;}
.game-content .question-text .options{ width:100%;min-height:auto;}
.game-content .question-text .options label{ display:block; padding:1% 0; }
.game-content .question-text .options input{vertical-align:middle; }
.game-content .question-text .options .txt{ width:89%; vertical-align:top; display:inline-block;}
.options input[type="radio"] { width:8%;height:20px; margin:auto;}

.game-test .game-bg{width:27%; max-width:120px; min-width:100px;  height:auto;position:absolute; right:-3%;top:-10px; bottom:auto; font-size:0;}
.game-test .game-bg img{ width:100%; margin:auto;}


/*game-end*/
.game-end{ width:100%; margin:auto;}
.game-end .gameover-box{ width:100%; margin:auto; position:relative; }
.game-end .gameover-box .img{ width:100%; margin:auto;font-size:0;}
.game-end .gameover-box .img img{ width:100%; margin:auto;font-size:0;}

.game-end .gameover-box .name{ width:100%; position:absolute;font-weight:bold;font-size:80%; line-height:150%; }
.game-end .gameover-box .score { position:absolute;width:42%; height:auto; text-align:center;font-size:100%;font-weight:bold; color:#fff; vertical-align:middle;}
.game-end .gameover-box .score img{ width:100%;}
.game-end .gameover-box .score span{font-size:85%; width:100%; padding:0; position:absolute; top:31%; transform:translate(-50%,-50%); left:50%; }
.game-end .gameover-box .score span b{font-size:200%; padding:0 2%; }

.game-end .first .name{ position:absolute;top:-175%; }
.game-end .first .score {left:15%; bottom:16%;  position:absolute; }

.game-end .second .name{ position:absolute;top:-170%;color:#000;}
.game-end .second .score { position:absolute; right:8%; bottom:18%;}

.game-end .third .name{position:absolute; top:-210%;  }
.game-end .third .score {  bottom:6%; position:absolute;}	

.game-end .gameover-btn{ width:100%; margin:auto; text-align:center;font-size:0;}
.game-end .gameover-btn a{width:45%; max-width:150px; display:inline-block; margin:4% 2%; }
.game-end .gameover-btn img{ width: 100%; margin:auto;}
/*container--end------------------------------------------------*/

	
	}

/* == 平板版型區 =============================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

.header .headerbox{width: 100%;;margin:0 auto; position:relative; }
.container .containerbox{width:100%; margin:auto; background-color: #C2C3C4; padding:0 15px 15px 15px;}
.footer .footerbox{width:100%;height: auto; margin:0px auto; text-align:center; padding:10px; color:#fff; font-size:100%; letter-spacing:2px;}

/*----------------------------------------------------------------*/

/*header--------------------------------------------------*/
.bg{ width: 100%; margin:auto; font-size:0;}
.bg img{ width: 100%; margin:auto;}

.menu{ width:75%; height:auto; position:absolute; bottom:5%; left:5%;}
.menu li{ float:left;margin-left:-5px;width:24%; height:auto;text-align:center; }
#re_width{width:27%;}
.menu li:hover{ opacity:.8;}
.menu li a{ display:inline-block; width:100%;height:auto; font-size:0;text-align:center;}
.menu li a img{ width:100%;height:auto;  max-height:100%;}
.menu li:nth-child(4){ margin-left:0px;}

.home-btn{ width:12%;position:absolute; top:7%; right:2.5%; font-size:0;}
.home-btn img{ width: 100%;}
/*header-end-------------------------------------------------*/
/*container--------------------------------------------------*/
.border{width: 100%; margin:auto; border:1px solid #000000; background:#85898C; border-radius:30px; padding:0 6px; position:relative;}
.border .borderbox{width: 100%; margin:auto;border:1px solid #000000;background-color: #fff;border-radius:30px; padding:15px;}
.border-img{position:absolute; right:5px; top:-120px; z-index:-1; width:17%;}
.border-img img{ width: 100%;}

.containerbox .toptitle{ width:100%; height:63px;}
.containerbox .toptitle img{ width:auto; height:100%;}

/*game-title*/
.containerbox .gametitle{ width:100%; height:auto;}
.containerbox .gametitle .gametitle-img{ width:26%;display:inline-block;  font-size:0;}
.containerbox .gametitle .gametitle-img img{ width:100%; height:auto;}

.gametitle .score{ display:inline-block;width:72%; height:auto; vertical-align:bottom;margin:3% 0 0 1%; position:relative;}
.gametitle .score .score-img{width:100%;font-size:0;}
.gametitle .score .score-img img{ width:100%;}
.gametitle .score .score-txt{font-size:190%;color:#fff; width:21%; text-align:center;position:absolute; top:52%;transform:translateY(-50%); right:7%; }
/*內容------------------------------------------------*/
.content{ width:100%; margin:auto; padding:20px 0;font-size:100%;}

.explain{ width:100%;  margin-top:0px;float:right;}
.explain .top-text{ font-size:140%; font-weight:bold;}
.explain .txt-group{ padding:5px 0;font-size:120%;}
.explain .txt-group li{ padding:10px 0;}
.explain .txt-group .title{}
.explain .txt-group .text{ padding:5px 0;}
.explain .txt-group ol{ list-style-position:outside; padding-left:1.5em;}

.list-start{ width:100%; text-align:center;padding:10px 0;}
.list-start .txt-group{ width:auto;font-size:120%;}
.list-start .txt-group li{ padding:5px 0;}
.list-start .txt-group .title{display:inline-block; color:#D34124; vertical-align:middle;}
.list-start .txt-group .text-wrep{width:auto;display:inline-block;}
.list-start .txt-group .text-wrep .item{ display:inline-block; padding:0 2px;}
.list-start .txt-group .text-wrep .item select{ padding:2px;}

.list-start .txt-group .text-wrep .itembox{ padding:5px 0;}
.list-start .txt-group .text-wrep .itembox span{ width:auto;vertical-align:middle;}
.list-start .txt-group .text-wrep .itembox input{ width:120px;padding:0 2px;font-size:100%;vertical-align:middle; line-height:150%;}
.list-start .txt-group ol{ display:inline-block;}

.botton{ width:100%; margin:auto;text-align:center; padding:30px 0;font-size:0; }
.botton a{ width:150px; display:inline-block;}
.botton img{ width:100%;}

/*得獎名單awarded*/
.awarded{ width: 90%;margin:auto; color:#363231;	}
.awarded .text-box{ font-size:130%; line-height:150%; padding:2% 0 5% 0;}
.awarded .title{ line-height:160%;}
.awarded .text-box h5{ font-size:110%; padding-bottom:2%; color:#204E91;}
.awarded .text-box .download{ font-size:100%; padding-top:2%; font-weight:bold;}

.awarded table{ width:auto;border-collapse:collapse; padding:0; margin:0;font-size:120%; line-height:150%;}
.awarded table td{ padding:10px 20px;border:1px solid #B9B9B9;}
/*列表------------*/
.search{ width:100%;font-size:110%;}
.table_box1 {width:100%; height:auto; margin:0 auto;}
.table_box1 #css_table .box01{ width:auto; }
.table_box1 #css_table .box02{ width:130px;}
.table_box1 #css_table .box03{ width:150px;}
.table_box1 #css_table .box04{ width:50px;}

/*game------------*/
.border .game-startbg{ height:auto; background:#ffdcf0 url(../Rewardedimg/img-25.png) no-repeat center center; background-size:105% auto;}

.game-start{ width:100%;}
.game-start .game-title{ width:190px; margin:auto; text-align:center; font-size:0;}
.game-title img{ width:100%;}

.game-start .game-content{ text-align:center; font-size:160%; padding:30px 0;  color:#363231; font-weight:bold;}
.game-start .botton{margin-bottom:100px;}

/*game-測驗頁-----------*/
.game-test{ width:100%; margin:auto;}
.game-test .game-content{ width:100%; margin:auto; min-height:400px; border-bottom:1px dashed #BBBBBD;text-align:left;padding:10px 0; color:#363231; font-weight:bold; position:relative;}

.game-content .question-num{width:80px;display:inline-block;  height:55px;  font-size:250%; line-height:55px; color:#AD3232; text-align:center; 
background: url(../Rewardedimg/img-47.png) no-repeat top center; background-size:100% auto;}
.game-content .question-text{width:85%;display:inline-block; font-size:150%; padding-left:2%; padding-top:0%; line-height:150%;}
.game-content .question-text .content{width:100%; margin-bottom:25px;padding:10px 0;}
.game-content .question-text .options{ width:80%;min-height:200px;}
.game-content .question-text .options label{ display:block; }
.game-content .question-text .options input{vertical-align:middle;}
.game-content .question-text .options .txt{ width:90%; vertical-align:top; display:inline-block;}
.options input[type="radio"] { width:20px;height:20px; margin:-2px 5px 0 0;}

.game-bg{width:29%; max-width:280px; position:absolute; right:10px; bottom:70px; font-size:0;}
.game-bg img{ width:100%; margin:auto;}


/*game-end*/
.game-end{ width:80%; margin:auto;}
.game-end .gameover-box{ width:100%; margin:auto; position:relative; }
.game-end .gameover-box .img{ width:100%; margin:auto;font-size:0;}
.game-end .gameover-box .img img{ width:100%; margin:auto;font-size:0;}
.game-end .gameover-box .name{ position:absolute;font-size:110%; font-weight:bold; }
.game-end .gameover-box .score { position:absolute;width:45%; height:auto; text-align:center;font-size:120%;font-weight:bold; color:#fff; vertical-align:middle;}
.game-end .gameover-box .score img{ width:100%;}
.game-end .gameover-box .score span{font-size:120%; width:100%;  position:absolute; top:30%; transform:translate(-50%,-50%);  }
.game-end .gameover-box .score span b{font-size:200%; padding:0 3%; }

.game-end .first .name{ position:absolute;top:-155%; color:#000;}
.game-end .first .score {left:12%; bottom:16%;  position:absolute; }

.game-end .second .name{ position:absolute;top:-155%; }
.game-end .second .score { position:absolute; right:6%; bottom:17%;}

.game-end .third .name{position:absolute; top:-180%;  }
.game-end .third .score { left:11%; bottom:7%; position:absolute;}

.game-end .gameover-btn{ width:auto; margin:auto; text-align:center;font-size:0;}
.game-end .gameover-btn a{width:170px; display:inline-block; margin:2% 7%; }
.game-end .gameover-btn img{ width: 100%; margin:auto;}
/*container--end------------------------------------------------*/


}