@charset "UTF-8";
* { padding:0; margin:0; }
body { font-family: Arial, Tahoma; }
p { font-size: 16px; line-height: 1.4; }
h1,
h2 { font-size: 20px; padding:6px 0;}
.container { margin: 0 auto; width: 920px; }
.left-box,
.center-step,
.right-key,
.logo { float: left; }

/* button */
.btn-getkey a { border-radius: 4px; display: block; width: 422px; background-color: #98d828; margin-bottom: 10px; padding: 14px 0; text-decoration: none; color: #fff; font-weight: 600; font-size: 20px; text-align: center; 
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.btn-getkey a:hover { background: #76bf21; }
.btn-buy a { background: #f17d16; padding: 18px 100px; display: inline-block; color: #fff; font-size: 30px; font-weight: 600; text-decoration: none; border-radius: 5px; margin: 10px 0; }
.btn-buy a:hover { background: #e16e09; }



/* #header */
#header { width: 920px; margin: 0 auto; display: table; }
.logo { padding: 10px 5px; display: inline-block; }
.logo img { vertical-align: middle; margin: 0 10px; }

/* banner */
.banner { background: #8f0000; width: 100%; }
.banner .bg-img { background: url(../images/bg-gift_01.jpg) no-repeat; width: 1148px; margin: 0 auto; }
.banner .getkey-area {display: inline-block; margin: 190px 10px 140px; padding: 40px 0 30px; width: 900px; border-radius: 8px; background: #fff; 
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.banner .left-box { margin-top: 100px;  }
.banner .code {padding: 10px 0;}
.banner .right-key { width: 470px; padding: 10px; border-left: 2px dotted #ccc; margin-left:20px;}
.banner .mark { color:#529800;}
.banner .facebook { margin: 10px 0 30px; }
.banner .getkey p { width: 420px; padding-bottom: 10px; }
.banner input.ipt { padding: 12px 0; width: 420px; border: 1px solid #aaa; margin: 0 0 6px; font-size: 16px; color: #999; text-align: center; border-radius: 4px; }

/* .linkbuy */
.linkbuy { text-align: center; }
.linkbuy h2 { font-size: 36px; }
.nocard { margin: 40px 0; }
.card { position: relative; margin: -100px 10px 0; padding: 20px 0; width: 900px; border-radius: 8px; background: #fff; 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }


/* benefits */
.benefits { margin: 60px 0 30px; width: 800px; margin: 0 auto; }
.benefits h3 { font-size: 36px; color: #333; font-weight: 100; }
.benefits .gift { position: absolute; margin-top: -40px; padding-left: 20px; z-index: -1; }
.benefits table { border-collapse: collapse; margin-top: 70px; }
.benefits table tr { border-bottom: 1px solid #dcdcdc; }
.benefits table th { font-weight: 100; text-align: left; padding: 20px; color: #666; font-size: 16px; line-height: 1.4; }
.benefits table th span { margin-bottom: 8px; display: inline-block; color: #000; font-size: 18px; }
.benefits table td.title-checked { font-size: 20px; text-align: center; background: #ffc729; line-height: 60px; }
.benefits table td.bg-yellow { background-color: #fff8e4; text-align: center; width: 200px; }

/* footer */
.footer { width: 100%; background: #333; }
.footer .copyright { text-align: center; color: #999; padding: 15px; }
.footer .copyright a { color: #ccc; text-decoration: none;}
.footer .copyright a:hover {  color: #fff; }

/* tips */
.tips { color: #ef0054;}

@media screen and (max-width:1164px){
	.banner .bg-img{width: 100%;}
}
/* pop up */
.cover { height: 100%; width: 100%; position: absolute; z-index: 1; }
.blur-in { -webkit-animation: blur 2s forwards; -moz-animation: blur 2s forwards; -o-animation: blur 2s forwards; animation: blur 2s forwards; }
.blur-out { -webkit-animation: blur-out 2s forwards; -moz-animation: blur-out 2s forwards; -o-animation: blur-out 2s forwards; animation: blur-out 2s forwards; }
.pop-up { position: fixed; margin: 5% auto; left: 0; right: 0; z-index: 2; }
.pop-box { z-index: 2; background: #fffefa; margin-left: auto; margin-right: auto; margin-top: 10%; position: relative; width: 620px; border-radius: 2px; border: 1px solid #d4dbea; box-shadow: 0 0 20px 0px #21334b5c; }
.pop-box img { float: left; margin: 40px; }
.fb-share { float: left; margin: 45px 0 40px 0; width: 60%; }
.fb-share p { color: #333; font-size: 18px; margin-bottom: 20px; }
.bg-2 { background: #000; width: 100%; height: 100%; left: 0; top: 0;/*FF IE7*/ filter: alpha(opacity=20);/*IE*/ opacity: 0.4;/*FF*/ z-index: 1; position: fixed !important;/*FF IE7*/ }
.close-button { transition: all 0.5s ease; position: absolute; left: 0; margin-left: 594px; margin-top: -16px; background-color: #19b5fe; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 24px; text-decoration: none; cursor: pointer; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
.close-button:hover { background-color: #188fc6; color: #fff; }