#dialog-overlay {
/* set it to fill the whil screen */
width:100%;
height:100%;
/* transparency for different browsers */
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background:#000;
/* make sure it appear behind the dialog box but above everything else */
position:fixed;
top:0;
left:0;
z-index:4999;
/* hide it by default */
display:none;
}
#dialog-box {
/* css3 drop shadow */
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
/* css3 border radius */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#eee;
/* styling of the dialog box, i have a fixed dimension for this demo */
width:328px;
/* make sure it has the highest z-index */
position:absolute;
z-index:5000;
/* hide it by default */
display:none;
}
#dialog-box .dialog-content {
/* style the content */
text-align:center;
padding:10px;
margin:13px;
color:#666;
word-break: break-all;
}
#dialog-message{
	font-size: 22px;
	font-weight: 700;
	color: #DD0000;
	text-align:center;
}
.dialog-content > a.button {
/* styles for button */
margin:10px auto 0 auto;
text-align:center;
font-size: 120%;
background-color: #96877c;
display: block;
width:50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
/* css3 implementation :) */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.dialog-content > a.button:hover {
background-color: #796e65;
}
.dialog-content > a.b-no{
	display: inline-block;
}
.dialog-content > a.b-ok{
	background-color: #5b85b9;
	display: inline-block;
	margin-left: 30px;
}
.dialog-content > a.b-ok:hover {
	background-color: #4d6e98;
}
/* extra styling */
#dialog-box .dialog-content p {
font-weight:700; margin:0;
}
#dialog-box .dialog-content ul {
margin:10px 0 10px 20px;
padding:0;
height:50px;
}

/* show task finished styling */
.missionOK {position: fixed; display:none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); font-size: 80%; z-index: 2; }
.missionOK.open { display: table; left: 0; top:0;}
.missionOK .missionMain{position: relative; display: table-cell; box-sizing: border-box; vertical-align:middle; text-align: center;  }
.missionOK .missionMain .title { position:relative; font-weight: 900; font-size: 0%; color: #dfbe75;
background: -webkit-linear-gradient(#fff3c0, #c28e31);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition:all 200ms; transition:all 200ms;}
.missionOK .missionMain .title.open { font-size: 800%; }
.missionOK .missionMain .oklist { position:relative; display: inline-block;left:-100%; font-weight: 400; font-size: 300%; color:transparent; color: #ffffff; text-shadow: 2px 2px 0 #000000; margin-top: 10px; z-index: 4; -webkit-transition: all 200ms; transition: all 200ms;}
.missionOK .missionMain .oklist.open {left:0;}
.missionOK .missionMain .oklist img{ position: absolute; width: 0%; z-index: -1; left: 50%; top: 50%;-webkit-transition: all 200ms; transition: all 200ms;}
.missionOK .missionMain .oklist img.open{ position: absolute; width: 120%; z-index: -1; left: -10%; top: 25%;}
.missionOK .missionMain .oklist .s { font-size: 50%; font-weight: 400;}
.missionOK .missionMain .oklist .m { font-size: 80%; color: #00fcff;}
.missionOK .missionMain .oklist .m b{ font-size: 150%;}
.missionOK .missionMain .morebnt { display:inline-block; padding: 5px 15px; border-radius: 8px; font-weight: 300px; font-size: 200%; margin-top: 30px; color: transparent;-webkit-transition: all 200ms; transition: all 200ms;}
.missionOK .missionMain .morebnt.open {background-color: #936c25; color: #ffffff;box-shadow:0px 10px 10px -7px #000000;}

@media screen and (min-width: 1590px) {.missionOK {font-size: 110%;}}
@media screen and (max-width: 980px) {.missionOK {font-size: 60%;}}
@media screen and (max-width: 520px) {
	.missionOK {font-size: 50%;}
	.missionOK .missionMain .oklist .b{display: block;}
	.missionOK .missionMain .oklist {display:block; line-height: 130%;}
	.missionOK .missionMain .oklist .s { font-size: 65%;}
	.missionOK .missionMain .oklist .m b{ font-size: 200%;}
	.missionOK .missionMain .oklist img { top:17%; }
	.missionOK .missionMain .oklist img.open {width: 100%; top:10%; left: 0%; }
	.missionOK .missionMain .morebnt { margin-top: 20px;}
}

body { height:100%; background-color: #000000;}
body ,input { margin:0; padding:0; font-family:"微軟正黑體", Arial, simhei;}
@media screen and (min-width: 980px) {
	.joinbigbg { position:fixed; z-index:-1; width:100%; height:100%; background-image:url(../../../images/joinmain.jpg); background-repeat:no-repeat; background-position:right; background-size: auto 100%;}
	}

a { text-decoration:none; color:#00F;}
img { border:0px; vertical-align:middle;}
.top { display:block; color:#FFF; background-color:#7ba429; padding:3px ; height:48px;}
.backarr { display:none; margin:auto 5px; width:10px;}
.logo a{ font-size:30px; margin-left:20px; margin-right:20px; height:48px; line-height:48px; color:#FFF;}
@media screen and (max-width: 630px) {
	.top { padding-left:0px;}
	.logo a{ font-size:24px;}
	}
@media screen and (max-width: 850px) {
	.backarr { display:inline;}
	.logo a{ margin-left:0px; margin-right:5px;}
	}
.slogan { color:#FFF;}
.bslogan { font-size:130%; text-decoration:underline; margin-right:5px; color:#FFF;}
@media screen and (max-width: 630px) {
	.slogan { position:absolute; font-size:90%; top:29px;}
	.bslogan { position:absolute; font-size:110%; top:7px;}
	}


.topbut { position:absolute; right:1.5%; top:8px; }
.butjoin { display:inline-table; background-image:url(../../../images/but_join.svg); width:164px; height:38px; background-size:100%; border-radius:10px;}
.butlogin { display:inline-table; background-image:url(../../../images/but_login.svg); width:164px; height:38px; background-size:100%; border-radius:10px;}
.butbuy { display:inline-table; background-image:url(../../../images/but_buy.svg); width:164px; height:38px; background-size:100%; border-radius:10px;}
.butlogout { display:inline-table; background-image:url(../../../images/but_logout.svg); width:164px; height:38px; background-size:100%; border-radius:10px;}
.butmember { display:inline-table; background-image:url(../../../images/but_member.svg); width:164px; height:38px; background-size:100%; border-radius:10px;}
.butservice { display:inline-table; background-image:url(../../../images/but_service.svg); width:38px; height:38px; background-size:100%; border-radius:10px;}
@media screen and (max-width: 850px) {
	.topbut { right:5px; top:5px; }
	.butjoin { background-image:url(../../../images/but_joins.png); background-size:100% 100%; width:45px; height:45px;}
	.butlogin { background-image:url(../../../images/but_logins.png); background-size:100% 100%; width:45px; height:45px;}
	.butbuy { background-image:url(../../../images/but_buys.png); background-size:100% 100%; width:45px; height:45px;}
	.butlogout { background-image:url(../../../images/but_logouts.png); background-size:100% 100%; width:45px; height:45px;}
	.butmember { background-image:url(../../../images/but_members.png); background-size:100% 100%; width:45px; height:45px;}
	.butservice { background-image:url(../../../images/but_services.png); width:45px; height:45px; }
	}

.main { overflow:hidden; text-align:center; margin-bottom:50px;}

.buyI { overflow:hidden; text-align:center; background:#ff0000; line-height:130%; color:#FFF; font-weight:bold; border-top:1px #000 solid; display: block; width: 100%; padding-top: 9px; padding-bottom: 9px;}

.type { position:relative; display:block; font-size:100%; text-align:left; width:96%; margin:0% auto 0.5%; padding:8px 2% 3px;}
.type #h a ,.type #hover a { display:inline-table; padding:2px 5px; color:#fff; margin-right:4px; margin-bottom:2px; border-radius:5px; background-color:#999;}
.type #h>a.s1 { background: #ae6c6d;}
.type #hover a { font-size:125%; font-weight:bold; background-color:#7ba429;}
.TarrL ,.TarrR { display:none; width:5px; margin-top:20px;}

@media screen and (min-width: 1590px) {
	.type { width:1550px; }
	}

@media screen and (max-width: 850px) {
	.TarrL { left:7px; display:block; position:absolute;}
	.TarrR { right:7px; display:block; position:absolute;}
	.type #h a ,.type #hover a { font-size:115%; display:inline-table; margin-right:2px;}
	.type { margin:6px auto 0.5%; font-size:110%; padding:5px 0%; width:95%; white-space:nowrap; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling: touch;}
	}
@media screen and (max-width: 520px) {
	.TarrL { left:5px; margin-top:17px;}
	.TarrR { right:5px; margin-top:17px;}
	.type { width:92%; margin:3px auto 0.2%;}
	}
.I12 { display:block; font-size: 120%; max-width: 1600px; line-height: 110%; border-radius: 10px; margin: auto 2% 1%; background-color: #3e92e8; padding: 8px 10px; color: #fff;}
.I12 b { font-size: 120%;}
@media screen and (min-width: 1590px) {
	.I12 { width:1530px; margin: auto auto 1%; }
	}
.account_menu { position: relative; display: block; margin:0.5% auto 0;  padding-top: 1%; width: 95%;}
.account_menu a {display:inline-table; font-size: 110%; padding:3px 6px; color:#fff; border-radius:5px; background-color:#378de5; margin: auto 3px;}
.account_menu a.r {background-color:#b95555;}
@media screen and (min-width: 1590px) {
	.account_menu { width:1550px; }
	}
@media screen and (max-width: 850px) {
	.account_menu {width:100%; padding-top: 2%; }
	.account_menu a {display:inline-table; font-size: 100%; padding:6px 2px; color:#fff; border-radius:5px; background-color:#378de5; margin: auto 0px 3px;}
	}


.plist { position:relative; margin:0% 0.5% 1.5%; width:21%; border-radius:10px; display:inline-table; overflow:hidden; }
.plist .free { position:absolute; top:0; right:0; width:28%; height: auto; border-radius:0px; overflow:hidden;}
.plist img { width:100%; height: 100%; border-radius:10px;}
.plistname { display:block; width:96%; background-image:url(../../../images/plistbg.png); font-size:100%; line-height:110%; color:#FFF; position:absolute; bottom:0px; padding:2%;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
 }
.typemark1{ display:inline-table; border-radius:3px; margin-right:3px; font-size:85%; background-color:#01a11b; color:#FFF; }
.typemark2{ display:inline-table; border-radius:3px; margin-right:3px; font-size:85%; background-color:#d7000d; color:#FFF; }
.typemark3{ display:inline-table; border-radius:3px; margin-right:3px; font-size:85%; background-color:#FFF; color:#d7000d; }
.typemark4{ display:inline-table; border-radius:3px; margin-right:3px; font-size:85%; background-color:#3e92e8; color:#FFF; }
.plistW ,.plistW1 ,.plistW2 ,.plistW3 { width:94.5%; border-radius:10px; display:none; font-weight:bold; position:relative; padding:0.8% 0.5%; margin:0% 0.5% 1.5%; color:#FFF; background-color:#F33; background-image:url(../../../images/plistWbg.gif); font-size:120%; }
@media screen and (min-width: 1590px) {
/*	.plist {width:500px;}*/
	.plistW3 { width:1530px;}
	}
@media screen and (min-width: 980px) {
	.plistW3 {display:inline-table;}
	}
@media screen and (max-width: 1280px) {
	.plist {width:30%;}
	.plistname { font-size:100%;}
	.plistW1 ,.plistW3 {display:none;}
	.plistW2 {width:94.5%; display:inline-table; padding:1% 0.5%; }
	}
@media screen and (max-width: 980px) {
	.plist {width:46%;}

	}
@media screen and (max-width: 520px) {
	.plist {width:95%;}
	.plistname { font-size:100%; }
	.plistW2 ,.plistW3 {display:none;}
	.plistW1 {width:95%; display:block; padding:2.5% 0.5%; margin:0% auto 1.5%; font-size:100%; }
	}

.viewmain { overflow:hidden; width:96%; margin:0 auto;}
.left { background-color:#F0F0F0; width:380px; font-size:130%; color:#ff0000; padding:1% 0; border-radius:10px;}
.left a { position:relative; display:block; width:90%; line-height:120%; font-size:70%; color:#333; margin:3% auto; }
.left a img { width:100%; margin-bottom:2%; border-radius:10px;}
.left a .free { position:absolute; top:0; right:0; width:28%; border-radius:0px; overflow:hidden; border:0;}
@media screen and (min-width: 1590px) {
	.viewmain { width:1550px; }
	}
@media screen and (max-width: 1590px) {
	.left {width:27%;}
	}
@media screen and (max-width: 980px) {
	.left a { font-size:65%; }
	}
@media screen and (max-width: 520px) {
	.left { width:100%; margin:3% auto; padding:3% auto;font-size:170%; text-align: center; }
	.left a { display: inline-table;  width:48%; font-size:55%;  }
	}

.right { position:absolute; width:69%; text-align:left; padding:0% 1% 5% 2%;}
.right .name { font-size:150%; font-weight:bold; display:block; color:#484848; margin-bottom:1%}
.right .play { display:block;  margin-bottom:3% ; }
.right .play1 { display:block; width:100%; margin-bottom:3% ;}
.right .play h2 {font-size:120%; color: #6B6B6B; margin: 25px 0 0;}
.right .play h3 {font-size:100%; color: #6B6B6B; margin: 10px 0 0;}
.right .play1 h4 {font-size:100%; color: #FF0000; margin: 10px 0 0;}
.right .play p {font-size:100%; color: #6B6B6B; margin: 10px 0 0;}
.right a.bntallplay ,.right a.bntdl ,.bntallplayw100 {display: inline-block; box-sizing: border-box; width: 50%; text-align: center; padding:1% 0 0.3%;font-size: 26px; color: #fff; line-height: 150%;text-shadow:#000 0px 0px 5px;border:1px outset; }
.right .bntallplayw100{display: block; width: 100%; line-height: 120%;}
.right a.bntallplay .big ,.right a.bntdl .big ,.right a.bntallplayw100 .big { line-height: 60%; font-size: 38px; color: #FFFF00;}
.right a.bntallplay .small ,.right a.bntdl .small { line-height: 60%; font-size: 18px; color: #FFF;}
.right a.bntdl {line-height: 100%;}
.right a.bntdl .s { font-size: 70%; line-height: 100%;}
.right a.bntallplay ,.right a.bntallplayw100{
	border-color:#f699a6 #59151f #59151f #f699a6;
    background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ec3a52), color-stop(1, #ab2a3c));
    background:-moz-linear-gradient(top, #ec3a52 5%, #ab2a3c 100%);
    background:-o-linear-gradient(top, #ec3a52 5%, #ab2a3c 100%);
    background:-ms-linear-gradient(top, #ec3a52 5%, #ab2a3c 100%);
    background:linear-gradient(to bottom, #ec3a52 5%, #ab2a3c 100%);
    background:-webkit-linear-gradient(top, #ec3a52 5%, #ab2a3c 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec3a52', endColorstr='#ab2a3c',GradientType=0);
}
.right a.bntdl {
	border-color:#9ec8de #173443 #173443 #9ec8de;
    background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #4294be), color-stop(1, #306b89));
    background:-moz-linear-gradient(top, #4294be 5%, #306b89 100%);
    background:-o-linear-gradient(top, #4294be 5%, #306b89 100%);
    background:-ms-linear-gradient(top, #4294be 5%, #306b89 100%);
    background:linear-gradient(to bottom, #4294be 5%, #306b89 100%);
    background:-webkit-linear-gradient(top, #4294be 5%, #306b89 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4294be', endColorstr='#306b89',GradientType=0);
}
.right a.bntallplay img ,.right a.bntdl img ,.right a.bntallplayw100 img {width: 50px; position: absolute; margin-left: -55px; margin-top: -7px;}
@media screen and (max-width: 980px) {
	.right a.bntallplay ,.right a.bntallplayw100 ,.right a.bntdl {
		font-size: 22px; padding:2% 0 1%;
	}
	.right a.bntallplay .big ,.right a.bntallplayw100 .big ,.right a.bntdl .big {
		font-size:31px;
	}
}
@media screen and (max-width: 850px) {
	.right a.bntallplay ,.right a.bntdl {
		display: block; width: 100%;
	}
	.right a.bntallplay img ,.right a.bntdl img ,.right a.bntallplayw100 img {width: 40px; position: absolute; margin-left: -45px; margin-top: -3px;}
}


.right .noplay { display:block; width:100%; margin-bottom:3% ; background-color:#333; text-align:center; padding:8% 0; color:#FFF; font-size:130%;}
.right .noplay .big { font-weight:200; color:#FF0; font-size:130%;}
.right img {max-width:600px}
.right .noplay img { width:100px;}
.right .VTlink { display: block; box-sizing: border-box; padding: 15px 10px; font-size: 130%; font-weight: 500; border-radius: 10px; background-color: #FF0000; color: #ffffff; margin: 0px auto 10px;}
.plistW  { width:100%; display:block; margin-bottom:1%; text-align:center; margin-left:0; padding:1.5% 0;}
.plistI {position:relative; width: 100%; display: block; margin: 0 0 1%; padding: 0; text-align: left; background-image: none;}
.plistI img,.plistI1 img,.plistI2 img,.plistI3 img{max-width:100%; }
.plistI1 ,.plistI2 ,.plistI3 { width:94.5%; display:none; position:relative; text-align: center;margin:0% 0% 1.5%;  }
/*@media screen and (min-width: 1590px) {
	.plistI3 { width:1530px;}
	}
@media screen and (min-width: 980px) {
	.plistI3 {display:inline-table;}
	}
@media screen and (max-width: 980px) {
	.plistI1 ,.plistI3 {display:none;}
	.plistI2 {width:94.5%; display:inline-table; }
	}
@media screen and (max-width: 520px) {
	.plistI2 ,.plistI3 {display:none;}
	.plistI1 {width:95%; display:inline-table; }
	}*/

@media screen and (min-width: 1590px) {
	.right { position:relative;left:auto; float:right; width:1140px;}
	}
@media screen and (max-width: 1590px) {
	.right {left:27%; }
	}

@media screen and (max-width: 980px) {
	.right img {width:100%}
	}
@media screen and (max-width: 520px) {
	.right { position:relative; left:0%; padding:0; width:100%; }
	.right .name { font-size:130%;}
	}

.join ,.login ,.edit ,.orders ,.taskok ,.tasklist ,.taskgold{ display:inline-table; padding:2% 1.5%; margin:2% 0%; text-align:left; border:1px #CCC solid; background-image:url(../../../images/joinbg.png); overflow:hidden; border-radius:15px;}
.join { position:absolute; left:2%;}
.login { position:absolute; left:58%;}
.edit { width: 95%; box-sizing: border-box; padding-left: 6%; padding-right: 6%;}
.taskok ,.tasklist { width: 92%;padding:2% 0.5%;margin-top: 0;}
.taskgold { width: 87%; margin-bottom: 1%; padding:1% 3%;}
.taskgold .f150 {font-size:140%; line-height: 100%;}
.taskgold b {color: #FF0000; font-size: 150%;}

.tasklists{ position: relative; width: 97%; margin: auto auto 30px;background-color: #ffffff; border-radius: 10px; box-sizing: border-box; padding: 10px 10px 15px; z-index: 0;}
.tasklists .complete{  position:absolute; right: 5px; top: 5px; display: block; width: 45px; height: 45px; background-image: url(/images/taskok.png); background-size: 100%; z-index: -1;}
.tasklists .name { display: inline-table; font-size: 140%; color: #ff000c; font-weight: 500; text-shadow:#ffffff 1px 1px 0px;}
.tasklists .reward { display: inline-table; font-size: 130%; color: #333333; margin-bottom: 10px; text-shadow:#ffffff 1px 1px 0px;}
.tasklists .reward b { font-weight: 400; font-size: 70%;}
.tasklists .directions { color: #888888; margin-bottom: 10px; line-height: 150%; overflow: hidden;}
.tasklists #cp1 {position: relative; padding: 10px 15px; border-radius: 5px; border: 1px #AAAAAA solid; color: #0000ff; margin-bottom: 10px;}
.tasklists #cp1 button { position: absolute; font-size: 100%; right: 10px; background-color: #3e92e8; color: #ffffff; border-radius: 3px; padding: 3px 6px; border: none;}
@media screen and (max-width: 640px) {
	.tasklists #cp1 .text { display: block; margin-bottom: 10px;}
	.tasklists #cp1 button {position: relative; right: auto;font-size: 120%; }
}
.tasklists .schedule { margin-bottom: 5px; margin-top: 20px; color: #888888; padding-top: 10px; border-top:1px #dddddd solid;}
.tasklists .schedule .ok,.tasklists .schedule .no { display: inline-table; width: 20px; height: 15px; margin-right: 2px; background-color: #E4E4E4;}
.tasklists .schedule .ok { background-color: #22ac38;}
.tasklists .date {color: #f4747a;}
.giftbut{display: inline-table; padding: 3px 10px; background-color:#FF0000; color: #ffffff; border-radius: 5px;}

.orders { display: block; margin: 1.5% auto 0.5%; width: 95%; box-sizing: border-box; padding-left: 3%; padding-right: 3%; margin-bottom: 1%;}
.join .title ,.login .title ,.edit .title ,.orders .title ,.taskok .title ,.tasklist .title{ display:inline-table; font-weight:bold; font-size:160%; padding:0px 0; color:#3e92e8; margin-bottom:2%; text-shadow:#f3f3f3 1px 1px 0px, #b2b2b2 1px 2px 0; }
.edit .title ,.orders .title ,.tasklist .title ,.taskok .title { text-align: center; width: 100%;}
.tasklist .title { margin-bottom: 10px;}
.edit input { width:350px;}
.join input ,.login input ,.edit input{ border-radius:5px; font-size:120%; margin-top:2%; margin-left:1%; border:1px #CCC solid; background-color:#FFF; padding:3px; }
.inputw { display:inline-table; margin-bottom:2%; margin-left:5px; font-size: 85%; white-space:nowrap; color:#3e92e8; }
.inputt { display: inline-table; width: 105px; text-align: right;}
.pagetime { display: block; width: 100%; text-align: center; margin-bottom: 1%;}
.pagetime a {display:inline-table; font-size: 100%; padding:3px 6px; color:#fff; border-radius:5px; background-color:#999; margin: auto 3px;}
.pagetime a.hover{ background-color:#777;}
.ordertab { width: 100%; background: #aaa;border-spacing:1px; margin-bottom: 1%;}
.ordertab a img { width: 200px;}
.ordertab .tc {text-align: center;}
.ordertab .f80 { font-size: 80%;}
.ordertab .red {color: #FF0000;}
.ordertab th{ background: #3775b4; font-weight: 100; color: #fff;padding:6px 3px; text-align: center;}
.ordertab td{ background: #fff;padding:6px 3px;}
@media screen and (max-width: 640px) {
	.ordertab td{ font-size: 90%;}
	.ordertab a img { width: 150px;}
	.ordertab .h { display:none;}
}
@media screen and (max-width: 980px) {
	.taskok { border:none; background-image:none; }
	.join { width:51%; }
	.login { width:37%; }
	.join input ,.login input ,.edit input { width:70%;}
	.inputw { margin-left:70px;}
	.edit .inputw { margin-left:110px;}
	}
@media screen and (max-width: 520px) {
	.join ,.login { position:static; width:81%; padding:5%;}
	.edit ,.orders { padding-left: 1%; padding-right: 1%;}
	.edit input { width:60%;}
	}
@media screen and (min-width: 980px) {
	.taskgold { width: 96%; margin-top: 1%;padding:1%; text-align: center; font-size: 120%;}
	.taskok { width: 40%;}
	.tasklist { width: 55%;margin-left: 0.5%;}
	.tasklists{width: 100%; padding: 10px 20px 15px;}
	.tasklists .complete{ width: 75px; height: 75px; right: -5px; top:-20px; }
	.tasklists .name { font-size: 180%;}
	.tasklists .reward {  font-size: 160%;}
	.tasklists .schedule .ok,.tasklists .schedule .no { width: 50px;}
	.join { width:450px;}
	.login { width:380px; left:54%;}
	.join { left:auto; right:48%;}
	.edit ,.orders { width: 850px;}
	}
a.sbutton{
	display:inline-table;
	margin:5% auto 10px;
	font-size:120%;
	padding:5px 20px;
    color:#ffffff;
    background-color:#ededed;
    font-weight:bold;
    background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
    border:1px solid #84bbf3;
    border-radius:6px;
    -moz-box-shadow:0px 8px 10px -7px #276873;
    -webkit-box-shadow:0px 8px 10px -7px #276873;
    box-shadow:0px 8px 10px -7px #276873;
    text-align:center;
}
a.sbuttonB{
	display:inline-table;
	margin:5% auto 10px;
	font-size:120%;
	padding:5px 20px;
    color:#ffffff;
    background-color:#ededed;
    font-weight:bold;
    background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #aaaaaa), color-stop(1, #777777));
    background:-moz-linear-gradient(top, #aaaaaa 5%, #777777 100%);
    background:-o-linear-gradient(top, #aaaaaa 5%, #777777 100%);
    background:-ms-linear-gradient(top, #aaaaaa 5%, #777777 100%);
    background:linear-gradient(to bottom, #aaaaaa 5%, #777777 100%);
    background:-webkit-linear-gradient(top, #aaaaaa 5%, #777777 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#777777',GradientType=0);
    border:1px solid #999999;
    border-radius:6px;
    -moz-box-shadow:0px 8px 10px -7px #222222;
    -webkit-box-shadow:0px 8px 10px -7px #222222;
    box-shadow:0px 8px 10px -7px #222222;
    text-align:center;
}
.edit a.sbutton{ display: block;}

.buy1 ,.buy2 { display:inline-table; padding:2%; margin:2% 0%; text-align:left; border-radius:15px; border:6px #f9f9f9 solid; background-color:#e8e8e8;}
.buy1 { width:36%;}
.buy2 { width:48%;}
.buy1 .title ,.buy2 .title { display:inline-table; font-weight:200; font-size:200%; padding:0px 0; color:#000; margin-bottom:2%;  }
.buy1 .buytype ,.buy1 .buytypeP{ position:relative; display:block; padding:0% 0.5% 1.5%; text-align:center; border:1px #828282 solid; border-radius:15px; margin-bottom:3.5%;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #fff), color-stop(1, #DDD));
background:-moz-linear-gradient(top, #fff 5%, #DDD 100%);
background:-o-linear-gradient(top, #fff 5%, #DDD 100%);
background:-ms-linear-gradient(top, #fff 5%, #DDD 100%);
background:linear-gradient(to bottom, #fff 5%, #DDD 100%);
background:-webkit-linear-gradient(top, #fff 5%, #DDD 100%);
-moz-box-shadow:0px 8px 10px -7px #276873;
-webkit-box-shadow:0px 8px 10px -7px #276873;
box-shadow:0px 8px 10px -7px #276873;
}
.buy1 hr {margin: 5% 1%;}

.buytype .name { color:#000; font-size:170%; font-weight:300; }
.buytype .day { color:#ab2a3c; font-size:230%; padding-left:1%; font-weight:bold;}
.buytype .buybay { background-color:#ab2a3c; border-radius:5px; color:#FFF; padding:0.4% 3%;}
.buytype .tick { display:inline-table; background-image:url(../../../images/tick.png); background-size:100%; background-repeat:no-repeat; width:43px; height:40px;}

.buytypeP .name { color:#333; font-size:170%; font-weight:300; }
.buytypeP .day { color:#306b89; font-size:230%; padding-left:1%; font-weight:bold;}
.buytypeP .buybay { background-color:#306b89; border-radius:5px; color:#FFF; padding:0.4% 3%;}
.buytypeP .tick { display:inline-table; background-image:url(../../../images/tick.png); background-size:100%; background-repeat:no-repeat; width:43px; height:40px;}

.buy2 .type { position:relative; display:inline-table; padding:0%; border:1px #828282 solid; border-radius:10px; background-color:#FFF; padding:1% 0 0; margin:0% 1% 2.5%; width:46%; text-align:center;
-moz-box-shadow:0px 8px 10px -7px #276873;
-webkit-box-shadow:0px 8px 10px -7px #276873;
box-shadow:0px 8px 10px -7px #276873;
}
.buy2 .type a img { width:100%;}
.buy2 .type a .name { position:relative; display:block; background-color:#c5dfe1; padding-bottom:5px; padding-top:5px; color:#000; width:100%; text-align:center; line-height:120%;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.buy2 .type a .name .price { color:#ff3333; font-size:80%; line-height:100%;}

@media screen and (max-width: 850px) {
	.buy1 ,.buy2 { padding:1%; margin:2% 0%;}
	.buy1 { width:47%}
	.buy2 { width:37%;}
	.buytype .name {font-size:150%;}
	.buytype .day { font-size:200%;}
	.buytype .tick { width:43px; height:40px;}
	.buytypeP .name {font-size:150%;}
	.buytypeP .day { font-size:200%;}
	.buytypeP .tick { width:43px; height:40px;}
	.buy2 .type { width: 96%; margin:0% 1% 2.5%;}

	}
@media screen and (max-width: 520px) {
	.buy1 ,.buy2 { position:static; width:95%;}
	.buytype .name {font-size:120%;}
	.buy2 .type a img { width:90%;}
	.buy2 .type { position:relative; display:inline-table; padding:0%; border:1px #828282 solid; border-radius:10px; background-color:#FFF; padding:1% 0 0; margin:0% 1% 2.5%; width:46%; text-align:center;}
	.buy2 .type a .name { font-size: 85%; }
	}
@media screen and (min-width: 980px) {
	.buy1 { width:370px;}
	.buy2 { width:480px;}
	}


a.last { position:fixed; border-radius:8px; color:#FFF; top:60%; left:-5px; overflow:hidden; font-size:190%; line-height:180%; padding:0 10px 0 0; background-image:url(../../../images/bg_foot.png);}
a.next { position:fixed; border-radius:8px; color:#FFF; top:60%; right:-5px; overflow:hidden; font-size:190%; line-height:180%; padding:0 0 0 10px; background-image:url(../../../images/bg_foot.png);}

@media screen and (max-width: 980px) {
	.mmlist{ display:none;}
	}
a.foot { position:fixed; font-weight:bold; color:#FFF; bottom:0px; left:0px; overflow:hidden; font-size:120%; line-height:150%; padding:8px 1%; text-align:center; width:98%;  background-image:url(../../../images/bg_foot.png);}

/* buy radio */
.buy1 input[type="radio"] {
	display: none;
}
#divHLS img {width:1% ; height:1px;}

.iosarr{ position: fixed; box-sizing: border-box; padding: 10px; display:inline-table; text-align: center; width: 70%; bottom: 10px; left: 50%; margin-left: -35%; background:#fff;  border: 1px #000 solid; border-bottom: 3px #000 solid; z-index: 99;}
.iosarr::after{position:absolute; right: 0; top: 0; content: '×'; line-height: 25px; width: 25px; text-align: center; font-weight: 700; font-size: 150%; background:rgb(255,255,255,0.8); }
.iosarr::before{position:absolute;  left: 50%; margin-left: -5.5px; bottom: -11px;
content: '';width: 0; height: 0;border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #fff; transform: rotate(0deg);-webkit-transform: rotate(0deg);}

@media screen and (min-width: 580px) {
.iosarr{ width: 350px; bottom: auto; top:10px; left: auto; right: 10px; border-bottom: 1px #000 solid; border-top: 3px #000 solid;}
.iosarr::before{position:absolute;  bottom: auto; top:-11px;
content: '';width: 0; height: 0;border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid #fff;border-top: 0; transform: rotate(0deg);-webkit-transform: rotate(0deg);}
}

.buyinfo{margin: 20px auto; font-size: 130%; color:#B30002;}
.fullv{ display:block; text-align: center; font-size: 120%; color:#FFFFFF;  padding: 5px 30px; background-color:#203896; margin-bottom: 20px;}

.mainad {overflow:hidden; margin-bottom: 15px; }
.mainad a{  padding: 5px;}

	.mainad a img{ width: 46%;}

@media screen and (max-width: 800px) {
	.mainad a img{ width: 95%;}
	}

/*
.mainSideadL{display: inline-block; position: fixed; width: 140px; text-align: left; left: 0; bottom: 0; z-index: 999;}
.mainSideadR{display: inline-block; position: fixed; width: 140px; text-align: right; right: 0; bottom: 0;  z-index: 999;}
*/
.mainSideadL{display: inline-block; position: fixed; width: 140px; text-align: left; left: 0; bottom: 0; z-index: 999;}
.mainSideadR{display: inline-block; position: fixed; width: 140px; text-align: right; right: 0; bottom: 0;  z-index: 999;}
.mainSideadL img,.mainSideadR img{width: 100%;}
.clSideadL ,.clSideadR{display: block; width: 100%; background-color: #990000; color: #ffffff; text-align: center; cursor: pointer; line-height: 100%;}
@media screen and (max-width: 1510px) {
.mainSideadL ,.mainSideadR{width: 90px;}
	}
@media screen and (max-width: 800px) {
.mainSideadL{display: none;}
.mainSideadR{display: none;}
	}
.sharebtn { margin: 5px 0;}
.sharebtn a{ margin-right: 3px; padding-bottom: 5px; display: inline-block;}
@media screen and (max-width: 980px) {
.sharebtn {text-align: center;}
.sharebtn img {width: auto;}
}