@charset "utf-8";
/* -----------------------------------------
 * common 
 ------------------------------------------- */
.sub{min-width:320px;}
.coupon{min-height:500px;padding-bottom:50px;}
.coupon h3{color:#fff;font-size:20px;font-weight:normal;margin:40px 0 30px;text-align:center;}
.button{margin:35px auto;text-align:center;}
.button a{position:relative;padding:0 50px;height:40px;display:inline-block;line-height:40px;color:#666;background-color:#202020;border-radius:3px;margin:5px;}
.button a.ok{background-color:#ff3214;color:#fff;}
.coupon-step{position:relative;width:100%;height:80px;background-color:#090909;}
.coupon-step .step-list{width:900px;margin:0 auto;padding:30px 0 0;overflow:hidden;} 
.coupon-step .step-list li{float:left;font-size:13px;text-align:center;width:300px;background:url('../images/coupon/ico_menu.png') 0 5px no-repeat;}
.coupon-step .step-list li.f{background:none;}
.coupon-step .step-list li a {color:#666;}
.coupon-step .step-list li.on a{color:#ff3214;}
.block{display:none;}
.page-prev{display:none;text-indent:-1000em;}
.coupon .paging{text-align:center;}
.coupon .paging > span{display:table;margin:20px auto 0;display:inline-block;}
.coupon .paging a{display:block;float:left;width:10px;height:10px;margin:10px 10px;color:#fff;}
.coupon .paging a.active{color:#ff3214;font-weight:bold;}
/* -----------------------------------------
 * step01 
 ------------------------------------------- */
.textbox{position:relative;display:block;width:270px;height:38px;margin:40px auto 0;border:1px solid #303030;border-radius:3px}
.textbox .lbl{color:#666;font-size:15px;position:absolute;top:10px;left:20px;cursor:text;}
.textbox .frm_input{background:none 0;width:90%;margin:10px 0 0 20px;color:#666;font-size:15px;}
.textbox label.focus{display:none;}
.msg-error{display:none;color:#ff3214;text-align:center;margin-top:40px;font-size:15px;}
.msg-error.on{display:block;}
.msg-noti{display:block;color:#999;text-align:center;margin-top:40px;font-size:13px;}
/* -----------------------------------------
 * step02 
 ------------------------------------------- */
.bnr-list{width:900px;margin:0 auto;overflow:hidden;}
.bnr-list li{float:left;margin:10px;}
.bnr-game,
.bnr-list li img{width:280px;height:81px;}
.bnr-game{display:block;margin:40px auto;}
.selectbox{width:280px;margin:0 auto 10px;}
.selectbox select{-webkit-appearance: none;}
.selectbox a{background:url('../images/coupon/ico_selectbox.jpg') no-repeat 100% 50%;}
.btn-redeem .uploading{display:none;width:100%;height:100%;position:absolute;top:0;left:0;}
.btn-redeem.ok .uploading{background-color:#ff3214;border-radius:3px;}
.btn-redeem.ok .uploading img{animation:loading .8s infinite linear;-webkit-animation:loading .8s infinite linear;margin-top:5px;}
.btn-redeem.ok.disabled{}
.btn-redeem.ok.disabled .uploading{display:block;}
/* -----------------------------------------
 * step03 
 ------------------------------------------- */
.complate .txt{font-size:13px;color:#999;text-align:center;line-height:18px;}
.complate .link_game{display:block;width:100%;font-size:13px;color:#0084ff;text-align:center;text-decoration:underline;}
.complate h3{margin:40px 0 20px;}
.complate .bnr-game{margin:20px auto;}
/* -----------------------------------------
 * faild 
 ------------------------------------------- */
.link_ticket{margin-top:20px;}

@media (min-width:760px) and (max-width:979px){
	.page-prev{display:block;width:20px;height:20px;background:url('../images/coupon/ico_page_prev.png');position:absolute;top:10px;right:10px;cursor:pointer;}
	/* step01 */
	.coupon-step{height:40px;overflow:hidden;}
	.coupon-step .step-list{padding:0;width:100%;}
	.coupon-step .step-list li{width:100%;text-align:left;display:none;height:40px;line-height:40px;text-indent:20px;background:none;}
	.coupon-step .step-list li.on{display:block;}
	/* step02 */
	.bnr-list{width:650px;margin-left:-20px;}
	.bnr-list li{margin:10px 0 10px 20px;}
	.bnr-game,
	.bnr-list li img{width:305px;height:88px;}
	.selectbox{width:100%;}
}

@media (min-width:1px) and (max-width:759px){
	.page-prev{display:block;width:20px;height:20px;background:url('../images/coupon/ico_page_prev.png');position:absolute;top:10px;right:10px;cursor:pointer;}
	/* step01 */
	.coupon-step{height:40px;overflow:hidden;}
	.coupon-step .step-list{padding:0;width:100%;}
	.coupon-step .step-list li{width:100%;text-align:left;display:none;height:40px;line-height:40px;text-indent:20px;background:none;}
	.coupon-step .step-list li.on{display:block;}
	.textbox{width:100%;margin:10px auto 0;}
	.button{margin:20px auto 0;}
	.msg-error,
	.msg-noti{text-align:left;margin-top:10px;}

	/* step02 */
	.coupon h3{font-size:15px;margin:30px 0 20px;}
	.bnr-list{width:100%;}
	.bnr-list li{width:50%;margin:0;}
	.bnr-list li:nth-child(2n+1) img{margin:10px 20px 10px 0;}
	.bnr-list li:nth-child(2n+2) img{margin:10px 0 10px 20px;}
	.bnr-list li img{width:100%;height:auto;}
	.bnr-game{width:330px;height:95px;margin:20px auto;}
	.selectbox{width:100%;}
}

@media (min-width:1px) and (max-width:690px){
	.block{display:block;}
	.sub header h2{font-size:26px;line-height:130%;padding:25px 25px 0}
	.coupon h3{font-size:20px;}
}

@media (min-width:1px) and (max-width:510px){
	/* step02 */
	.bnr-list li{width:100%;}
	.bnr-list li:nth-child(2n+1) img{margin:10px 0;}
	.bnr-list li:nth-child(2n+2) img{margin:10px 0;}
	.bnr-game{width:100%;height:auto;}
	.button a{margin:5px 0;width:100%;padding:0 0;text-align:center;}
}

@-webkit-keyframes loading {
	0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}

@keyframes loading{
	0%{transform:rotate(0deg);} 
	100%{transform:rotate(-360deg);}
}