#top{background:0 0;border-bottom:#9918ce 1px solid}

#nav{background:#490b5e;border-top:#380748 1px solid;border-bottom:#9918ce 1px solid}

#nav ul{text-align:right}

#nav ul li{display:inline-block;padding:13px 26px}

#nav ul li:last-child{padding-right:0}

#nav ul li a{color:#d586f2}

#nav ul li a:hover{color:#fe0}

#top .w1000{display:-ms-flex;display:flex;justify-content:space-between;padding:14px 0}

#top #logo{width:260px}

#top h3{display:-ms-flex;display:flex;flex-direction:column;justify-content:center;font-size:26px;font-weight:400;color:#fe0;letter-spacing:.3em;text-align:center;text-shadow:3px 3px 0 rgba(0,0,0,.4);float:right\9;padding-top:18px\9}

#top h3 small{display:block;font-size:14px;letter-spacing:0;text-transform:uppercase;color:#fc0;text-align:center;letter-spacing:2.3px;text-indent:-7px;padding-top:4px}

#nav ul li.welcome{float:left;color:#fff;padding-left:0}

#nav ul li.welcome span{color:#fe0;text-transform:capitalize}

#main{padding:30px 0}

#main .form .form-box{border:transparent 1px solid;position:relative;border-radius:6px;padding:30px 20px 60px 20px;background:#550b79}

#main .form .form-box.jc_img_box{background:#fff}

#main .form .jc_img_box{border:transparent 1px solid;position:relative;border-radius:6px;padding:30px 20px 60px 20px;background:#fff}

#main .form .jc_img_box img{max-width: 100%;display: block;margin:0 auto;}

#main .form .form-box h1{font-size:24px;color:#fe0;line-height:40px;padding:10px;text-align:center}

#main .form .form-box h1 span{display:inline-block;position:relative}

#main .form .form-box h1 span::before{width:280px;height:2px;position:absolute;display:block;content:'';background:#9918ce;left:-300px;top:19px;background:linear-gradient(to right,#550b79,#9918ce)}

#main .form .form-box h1 span::after{width:280px;height:2px;position:absolute;display:block;content:'';background:#9918ce;right:-300px;top:19px;background:linear-gradient(to left,#550b79,#9918ce)}

#main .form input{line-height:38px;height:38px;border:#380748 1px solid;border-radius:4px;transition:all .6s;background:#490b5e;color:#fff}

#main .form input:focus{border-color:#9918ce}

#main .form input.full{width:100%}

#main .form input.half{width:50%}

#main .form label{display:block;padding-bottom:10px;font-size:16px;color:#fe0}

#main .form label.title{color:#d586f2}

#main .form li{padding:10px 0;color:#fff;color:rgba(255,255,255,.8)}

#main .form li.info{text-align:right}

#main .form li.info label{color:#fff;font-size:14px}

#main .form li.buttons{text-align:center}

#main .form .cates{display:-ms-flex;display:flex;flex-wrap: wrap}

#main .form .cates .way{flex-shrink:1;text-align:center;display:-ms-flex;display:flex;justify-content:space-between;position:relative;border-radius:4px;overflow:hidden;color:#666;cursor:pointer;background:#fff;display:inline-block\9;flex-direction: column;width:110px;padding: 10px 0;margin-right:10px;margin-bottom: 10px;transition: all .2s}

#main .form .cates .way:hover{box-shadow:0 0 10px rgba(255,0,0,1),0 0 30px rgba(255,0,0,.2)}

#main .form .cates .way:nth-child(8n){margin-right: 0}

#main .form .cates .way.active{border-color:transparent;color:#fff;background: #54b9ff;background: linear-gradient( to right,#54b9ff,#038AFC);;}

#main .form .cates .way.active i{color:#fff}

#main .form .bank-selector .single i,#main .form .cates .way i{width:40px;text-align:center;flex-shrink:0;font-size: 22px}

#main .form .cates .way i{font-size:20px;margin: 0 auto;font-size: 24px;display: block}

#main .form .bank-selector .single span,#main .form .cates .way span{flex-grow:1;overflow:hidden}

#main .form .bank-selector .single span{text-align: left}

#main .form .cates .way cite{position:absolute;width:24px;height:24px;line-height:14px;padding-top:10px;right:0;bottom:0;text-align:right;visibility:hidden;color:#4d4;font-size:16px}

#main .form .bank-selector .single cite{position:absolute;width:24px;height:24px;line-height:14px;padding-top:10px;right:0;bottom:0;text-align:right;visibility:hidden;background:#4d4;background:linear-gradient(135deg,transparent 50%,#4d4 50%);font-size:16px;color:#fff}

#main .form .bank-selector .single.active cite,#main .form .cates .way.active cite{visibility:visible;}

#main .form .bank-selector .single.active{background:#fff;opacity: 1;color:#380748}

#main .form .quick-amount,#main .form .pay-gate{display:-ms-flex;display:flex;padding:10px 0;flex-wrap: wrap}

#main .form .quick-amount li,#main .form .pay-gate li{padding:0 20px;margin-right:10px;line-height:34px;border-radius:4px;cursor:pointer;transition:all .3s;display:inline-block\9;background:#fff;margin-bottom: 6px;color:#9918ce}

#main .form .quick-amount li:hover,#main .form .pay-gate li:hover{box-shadow:0 0 10px rgba(255,0,0,1),0 0 30px rgba(255,0,0,.2)}

#main .form .quick-amount li.active,#main .form .pay-gate li.active{background: #54b9ff;background: linear-gradient( to right,#54b9ff,#038AFC);color:#fff}

#main .form .bank-selector{display:flex;flex-wrap:wrap;}

#main .form .bank-selector .single{width:calc(20% - 8px);flex-shrink:1;text-align:center;height:40px;line-height:40px;display:-ms-flex;display:flex;justify-content:space-between;position:relative;border-radius:4px;overflow:hidden;cursor:pointer;background:rgba(0,0,0,.1);display:inline-block\9;color:#fff;margin-bottom:10px;border:rgba(255,255,255,.1) 1px solid;transition: all .2s;margin-right: 10px;}

#main .form .bank-selector .single:nth-child(5n+1){margin-right: 0}

#main .form .bank-selector .single.blank{visibility: hidden;}

#main .form .fixed-qrcode{display: flex;flex-direction: column;display: none}

#main .form .fixed-qrcode .half{display: flex;flex-direction: column;justify-content: center}

#main .form .fixed-qrcode .half dl{width:220px;margin: 0 auto;text-align: center; height: 100%;background:#fff;border-radius: 8px}

#main .form .fixed-qrcode .half dl dd{padding: 6px 0 14px 0 ;color:#666;border-top:#ddd 1px solid;}

#main .form .fixed-qrcode .half dl dt{position: relative;}

#main .form .fixed-qrcode .half dl dd b{color:#54b9ff}

/*#main .form .fixed-qrcode .half dl dt::before{content: '';display: block;position: absolute;width: calc(100% + 10px);left: -5px;top:14px;height: calc(100% - 28px);background: #550b79}

#main .form .fixed-qrcode .half dl dt::after{content: '';display: block;position: absolute;height: calc(100% + 10px);top: -5px;left:14px;width: calc(100% - 28px);background: #550b79}*/

#main .form .fixed-qrcode .half dl dt span{display: block;position: relative;z-index: 2;padding:6px;}

#main .form .fixed-qrcode .half>small{text-align: center;padding-top: 20px}

#point-card-details{display: none}

#main .form .bank-card-list{font-size:0}

#main .form .bank-card-list li{display: inline-block;width: calc(33.333% - 10px);padding: 10px 20px;font-size: 14px;position: relative;border-radius: 9px;overflow: hidden;cursor: pointer;transition: all .6s;margin: 10px 0;margin-right: 14px;vertical-align: top;background:#fff;color:#9918ce}

#main .form .bank-card-list li:nth-child(3n){margin-right: 0;}

#main .form .bank-card-list li p{display: none;line-height:24px}

#main .form .bank-card-list li h1{padding: 10px 0;display: none;transition: all .6s;text-align: left;font-size: 18px}

#main .form .bank-card-list li i.bankicon{float: right;transform: scale(3.6)}

#main .form .bank-card-list li i.bankicon.opacity{font-size:18px;transform: none}

#main .form .bank-card-list li:hover{box-shadow: 0 0 10px rgba(255,0,0,1), 0 0 30px rgba(255,0,0,.2);}

#main .form .bank-card-list li.active{color: #fff;background: #54b9ff;background: linear-gradient( to right,#54b9ff,#038AFC);;cursor:pointer}

#main .form .bank-card-list li.active h1{display: block}

#main .form .bank-card-list li.active p{display: block}

#main .form .bank-card-list li.active i.bankicon{color:#fff}

#main .record_table{width: 100%;border-radius: 6px;margin-top: 20px}

#main .record_table th{background:#f5f5f5;padding:12px 20px;color:#490b5e;text-align: left}

#main .record_table td{color:#555;padding: 10px 20px;background: transparent}

#main .record_table tr{background: #fff}

#main .record_table tr:nth-child(2n+1){background: #fafafa}

#main .record_table td .green{color:#494}

#main .page{text-align: center;padding: 20px 0}

#main .page li{display: inline-block;}

#main .page li a,#main .page li span{padding: 8px 14px;background: rgba(0,0,0,.1);color:#d586f2;border:#9918ce 1px solid;;font-size: 16px;display: block;border-radius: 2px}

#main .page li span{border-color: transparent;background: transparent}

#main .page li.active a{background: #d586f2;color:#490b5e}

#main .form label a{ color: red; font-size: 15px; margin-left: 15px} 

#main .form label a:hover{ color:#fe0;}