@charset "utf-8";
.upgradebody{ background:#f3f3f3; }

.upgrademain{ width: 100%; min-height: 500px; margin: 0 auto;  text-align: left; }
.upgradecontent{width: 1200px; margin: 0 auto;}

.pay-top {width: 100%;height: 290px;margin-bottom: 40px; padding-top: 35px; background: url(../images/pay-top-bg.jpg) no-repeat center center; text-align: left;}
.v-container {width: 1200px; margin: 0 auto;}
.pay-top .pay-top-container .pay-top-left { width: 600px;}
.pay-top .pay-top-container .pay-top-left .top-left-title {font-size: 26px;color: #fff;margin-bottom: 10px;}
.pay-top .pay-top-container .pay-top-left .top-left-desc ul { margin-left: 20px;}
.pay-top .pay-top-container .pay-top-left .top-left-desc ul li {width: 280px;display: list-item;font-size: 14px;color: #fff;line-height: 30px;float: left;list-style-type: disc;}
.pay-top .pay-top-container { background-color: rgba(0,0,0,.4); height: 220px; padding: 40px 60px;}
.pay-top .pay-top-container .pay-top-right { width: 400px; background-color: #fff; padding: 20px 20px;}
.pay-top .pay-top-container .pay-top-right .top-right-login>img {width: 100px; height: 100px; border-radius: 50%; border: 1px solid #ddd; vertical-align: top;}
.pay-top .pay-top-container .pay-top-right .top-right-login .top-right-login-info {display: inline-block;margin-left: 10px;}
.pay-top .pay-top-container .pay-top-right .top-right-login .top-right-login-info .info-user-name {font-size: 22px; line-height: 180%; color: #f00;}
.top-right-no-login{text-align: center;}

.pay-middle-icons ul li { text-align: left; float: left; width: 380px; height: 150px; background-color: #fff; margin-right: 30px; margin-bottom: 20px; padding-top: 45px; padding-left: 80px;}
.pay-middle-icons ul li.last{margin-right: 0;}
.pay-middle-icons ul li p{font-size: 20px; margin-bottom: 5px;}
.icon-upgrade{display: block; width: 58px; height: 58px; float: left; margin-right: 10px;}
.icon-pay-download{background: url(../images/icon-pay-download.png) no-repeat center center;}
.icon-pay-quickplay{background: url(../images/icon-pay-quickplay.png) no-repeat center center;}
.icon-pay-nogg{background: url(../images/icon-pay-nogg.png) no-repeat center center;}
.icon-pay-badge{background: url(../images/icon-pay-badge.png) no-repeat center center;}
.icon-pay-multiscreen{background: url(../images/icon-pay-multiscreen.png) no-repeat center center;}
.icon-pay-HD{background: url(../images/icon-pay-HD.png) no-repeat center center;}

.pay-bottom-package .bottom-package-title { width: 100%; font-size: 28px;color: #333; border-bottom: 1px solid #ccc;margin-bottom: 20px; line-height: 60px;}
.pay-bottom-package .bottom-package-container ul .package-li-hover, .pay-bottom-package .bottom-package-container ul li:hover { border: 2px solid #f00;}
.pay-bottom-package .bottom-package-container ul li { float: left; background-color: #fff; position: relative; width: 232px; height: 140px; border: 2px solid #fff; box-sizing: border-box; text-align: center;margin-right: 10px;}
.pay-bottom-package .bottom-package-container ul li.last{margin-right: 0px;}
.pay-bottom-package .bottom-package-container ul li .package-tip { position: absolute;top: 0; right: 0; background-color: #ff7800;color: #fff; font-size: 12px;padding: 0 5px;}
.pay-bottom-package .bottom-package-container ul li .package-money { font-size: 20px; color: #333; margin-top: 45px; margin-bottom: 10px;}
.pay-bottom-package .bottom-package-container ul li .package-money>span { font-size: 30px; color: #f00; padding: 0 5px;}
.pay-bottom-package .bottom-package-container ul .package-li-hover{background:#fff url(../images/select-arrow.png) no-repeat right bottom;}

.pay-stype{margin-top: 20px;}
.pay-type-title { width: 100%; font-size: 28px;color: #333; border-bottom: 1px solid #ccc;margin-bottom: 20px; line-height: 60px;}
.pay-type-libox{ padding: 20px; background: #fff;}
.pay-type-li{width: 180px; float: left; line-height: 35px;}
.pay-type-li>input{margin-right: 5px;}

/* 支付方式选择样式 */
.regular-radio {display: none;}
.regular-radio + label {-webkit-appearance: none;background-color: #fafafa;border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding: 9px;border-radius: 50px;display: inline-block;position: relative; margin-right: 5px; margin-top: 5px}
.regular-radio:checked + label:after {content: ' ';width: 12px;height: 12px;border-radius: 50px;position: absolute;top: 3px;background: #F40;box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);text-shadow: 0px;left: 3px;font-size: 32px;}
.regular-radio:checked + label {background-color: #FFF;color: #99a1a7;border: 1px solid #F40;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);}
.regular-radio + label:active, .regular-radio:checked + label:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.big-radio + label {padding: 16px;}
.big-radio:checked + label:after {width: 24px;height: 24px;left: 4px;top: 4px;}

.pay-name{margin-top: 30px; font-size: 16px;}
.pay-name-input{width: 200px; height:41px; line-height:41px; border: 1px #ccc solid; background: #fff; padding: 0 10px; border-radius: 3px; transition: all .5s;}
.pay-name-input:focus{ background: #fff1f1; border-color: #ffb0b0; transition: all .5s;}

.layer-pay-btn{clear: both; margin: 30px auto 1px auto;}
.layer-pay-btn a,.please-login a{display: block; width:100px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; background: #990253; color: #fff; border-radius: 3px; transition: all .5s;}
.layer-pay-btn a:hover,.please-login a:hover{background: #f00; transition: all .5s;}
.please-login a{ width: 250px; margin: 10px auto;}