/* ----------------------------------
Main CSS file for 有爱就有设计
(C) 有爱就有设计! Inc.
http://www.hl-designer.com
Created & Modified by 有爱就有设计.
50px=1rem
14px=0.28rem
-------------------------------------*/
/*======================初始化======================*/
body{background: #fff;}
a:hover{text-decoration: none;}
.frame-1 {background-color:transparent !important;background-image:none !important;border:0 none !important;margin:0 !important;padding:0 !important;border-width:0px;height: auto}
.frame-1-c {background-color:transparent !important;background-image:none !important;border:0 none !important;margin:0 !important;padding:0 !important;border-width:0px;height: auto;}
.move-span{background-color:transparent !important;background-image:none !important;border:0 none !important;margin:0 !important;padding:0 !important;border-width:0px;height:auto;}
.move-span .content{background-color:transparent !important;background-image:none !important;border:0 none !important;margin:0 !important;padding:0 !important;border-width:0px;height:auto;}

.hl_userbox{    margin-top: 15px;}
.hl_userbox .user_tx{width: 35px;height: 35px;border-radius: 50%;overflow: hidden;float: left;margin-left: 10px;}
.hl_userbox .user_tx img{width: 100%;}
.hl_userbox .user_info{float: left;color: #fff;}
.hl_userbox .user_info .vip_c{color: #d1a967;}
.top_list_box3 {background: url(source/plugin/hl_about/static/images/bn3.jpg) no-repeat center top;background-size: cover;}
.top_list_box {width: 100%;min-width: 1200px; height: 300px;overflow: hidden;}
.wp{width: 1200px;}
.cont_help_box{ width:1200px; margin:0 auto;background: #f0f0f0;overflow:hidden;    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);}
.hel_le_nav{ width:240px;float:left;}
.hel_le_nav_box{ width:239px;padding:20px 0; padding-bottom:50px;}
.hel_le_nav_box .on p{display: block;color:$color;}
.hel_le_nav p{ width:220px; height:50px; margin:0 auto; border-bottom:1px solid #e7e7e7; font:16px/50px "microsoft yahei"; text-indent:70px; color:#666; }
.hel_le_nav_box .fa{display: inline;}

.hel_le_nav p:hover{ text-decoration:none;}
.hel_le_nav a:hover{ text-decoration:none;}
.hel_ri_con{ width:959px; float:right;background-color:#fff; border-left:1px solid #f1f1f1;  padding-bottom:40px;}
.ti_help{ width:880px; overflow:hidden; margin:0 auto; margin-top:25px;}
.ti_help p{ font:22px/52px "microsoft yahei"; color:#333;}
.info_tex_ab{ width:880px; overflow:hidden; margin:0 auto; font:14px/32px "microsoft yahei"; }

.hl_header{ height:70px; background:#333; width:100%; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08); position:relative; z-index:10;}
.hl_header .hl_w1200{  width:1200px; margin:0 auto; }
.hl_logo{ float:left;margin-top: 10px;}
.hl_logo img{height: 40px;}
.hl_nav{ float:left; width:630px; overflow:hidden; margin-left:15px;}
.hl_nav ul{ white-space:nowrap; height:70px; width:630px; overflow:hidden;}
.hl_nav ul li{ height:70px; line-height:70px;  margin:0 15px; float:left; white-space:nowrap; position:relative;}
.hl_nav ul li a{ height:70px; line-height:70px; font-size: 16px;  color:#fff; display:inline-block; transition: 0.3s ease-out;text-decoration: none}
.hl_nav ul li a span{ display:none;}
.hl_nav ul li a:after{ position: absolute; content: ''; left: 50%; height:3px; bottom: 0; width: 0; transition: all .5s; background:#d1a967; }
.hl_nav ul li.a a:after,.hl_nav ul li a:hover:after{text-decoration:none; width:100%; left:0; }
.hl_nav ul li.a a,.hl_nav ul li a:hover{ color:#d1a967; }

/* subnav */

.sub_nav .h_pop { padding:0;margin: 0; border: 0;border-top: 3px solid #866d44; background: #fff; padding:6px 0 12px;border-radius: 0px 0px 12px 12px !important;box-shadow: 0 1px 4px rgba(0,0,0,0.3);}
.sub_nav .h_pop li { background: none;min-width: 160px;display: inherit;}
.sub_nav .h_pop li a { height: 25px; line-height: 23px; padding: 5px 10px; margin: 0; color: #333; font-size: 14px; border: 0; border-radius: 0; box-shadow: none !important; background: none; text-indent:10px;}
.sub_nav .h_pop li.a a{color: #866d44; background: #eee}
.sub_nav .h_pop li a:hover { color: #866d44; background: #eee}
.sub_nav .h_pop li a span{display:none;}

.top-banner{height: 380px; background: url(../img/comy-bannerv5.png) no-repeat center top; text-align: center;}
.top-banner .big-title{font-size: 38px; color: #FFE1AE; font-weight: bold; padding-top: 69px; letter-spacing: 5px;}
.top-banner .small-title{padding-top: 8px; font-size: 21px; color: #ffe1ae; opacity: 0.7;}
.top-banner .open-vip-btn{display: inline-block; margin-top: 27px; width: 200px; height: 48px; line-height: 45px; border-radius: 4px; color: #eed9ae; border: 2px solid #f1deb5; font-size: 16px; opacity: 0.7; box-sizing: border-box;}
.top-banner .open-vip-btn:hover{color: #65430B; opacity: 1; border: 0; line-height: 48px; background: linear-gradient(180deg, #f7e7c3 0%, #d1a967 100%);}
.top-banner .open-vip-btn:active{background: linear-gradient(180deg, #afa286 0%, #866d44 100%);}
.top-icon-box{width: 1200px; margin: 0 auto;}
.top-icon-box ul{padding-left: 85px; margin-top: -74px;}
.top-icon-box ul .list{text-align: center; margin: 0 55px 0 55px;}
.top-icon-box ul .list:nth-child(2) .icon-box .iconfont{font-size: 56px;}
.top-icon-box ul .list .icon-box{width: 144px; height: 134px; background: url(../img/comy-icon1.svg); text-align: center; line-height: 134px;}

.top-icon-box ul .list img{width: 45px;    margin-top: 45px;}
.top-icon-box ul .list .icon-box .iconfont{font-size: 44px; color: #65430b;}
.top-icon-box ul .list .icon-box .iconfont.icon-renzhun{font-size: 58px;}
.top-icon-box ul .list .pointer{position: relative; cursor: pointer;}
.top-icon-box ul .list .pointer .tip{display: none; position: absolute; width: 143px; text-align: left; padding: 10px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); line-height: 20px; background: #fff; border-radius: 6px; top: 13px; left: 130px; font-size: 12px; color: #001013; box-sizing: border-box; font-weight: normal;}
.top-icon-box ul .list .pointer .tip .sanjiao{position: absolute; top: 10px; left: -12px; width: 16px; height: 12px; background: url(../img/comy-sanjiao.png) no-repeat center; transform: rotate(90deg);}
.top-icon-box ul .list .pointer .tip.tip-icon{width: 345px;}
.top-icon-box ul .list .pointer:hover .tip{display: inline-block;}
.top-icon-box ul .list .text1{color: #65430b; font-size: 18px; padding: 16px 0 3px 0; font-weight: bold;}
.top-icon-box ul .list .text2{color: rgba(0, 16, 19, 0.5); font-size: 16px;}

.hl_box{background: #fff; padding: 20px;text-align: center;}
.charge-source-list{text-align: center;}
.charge-source-list>li{position:relative;margin-right: 20px; background:#FFF;padding:9px 11px;cursor:pointer;  display: inline-block;border:2px solid #eee;width: 180px;border-radius: 5px;}
.charge-source-list>li a{font-size: 16px;display:block;    text-align: left; }
.charge-source-list>li a p{font-size: 12px;color:#ccc;}
.charge-source-list>li:before{position:absolute;top:18px;right:10px;z-index:1;display:block;width:16px;height:16px;content:'';border: 2px solid #ccc;border-radius: 15px;}
.charge-source-list>li.active{border-color:#e1b271}
.charge-source-list>li.active:before{border: 2px solid #e1b271;background:#e1b271 url(../img/gou.png) 50% 50%;    background-size: cover;}
.charge-source-list>li img{width: 35px;float: left;margin-right: 10px;}



.VipMoneyList{background:#fff; text-align: center;}
.VipMoneyList ul li{cursor:pointer;color: #edb161;width:180px;height: 160px;background: #fff;border:1px solid rgba(0, 16, 19, 0.15);border-radius:5px;margin:0 10px;text-align:center;margin-bottom: 20px;box-shadow: 0 0 4px 1.3335px rgba(0,0,0,.04);position: relative;overflow: hidden;    display: inline-block; padding-bottom: 35px;}
.VipMoneyList ul li h3{color: #5b3301;font-size: 16px;margin-top: 25px;font-weight: 500;}
.VipMoneyList ul li .hl_tip{position: absolute;top: 0rem;left: 0;background: #edb161;color: #fff;font-size: 12px;padding: 0 10px;;border-radius:0 0 5px 0;}
.VipMoneyList ul li .money{display:block;font-size:46px;font-weight: 500;}
.VipMoneyList ul li .money i{font-size: 16px;}
.VipMoneyList ul li .integral{display:block;font-size:18px;color:#999;text-decoration: line-through;margin-bottom: 15px;}
.VipMoneyList ul li .viptq{position: absolute;display: flex;align-items: center;justify-content: center;    bottom: 0;width: 100%;height: 35px;font-size: 14px;color: #5b3301;background-image: linear-gradient(170deg,#f9eddc 100%,#fff6e8 0);}
.VipMoneyList ul li.on{border-color:#e3b675;border-width:2px;background: linear-gradient(180deg,#fff9f0 16%,#fff6e8 97%);box-shadow: 0 1.3335px 5.3335px 1.3335px hsla(35,63%,67%,.35);}
.VipMoneyList ul li.on .viptq{color: #fff;background-image: linear-gradient(170deg,#f2ce91,#e6b570 98%);}

.hl_mh_hotbk4{width:100%;padding:0 15px;border-collapse:inherit;box-sizing:border-box;overflow:hidden}
.hl_mh_hotbk4 li{float:left;text-align:center;width:25%;box-sizing:border-box}
.hl_mh_hotbk4 li a{display:block;padding:15px}
.hl_mh_hotbk4 li .hl_indexico{width:85px;height:85px;display: inline-block;}
.hl_mh_hotbk4 li .hl_indexico img{width: 100%;}
.hl_mh_hotbk4 li .hl_indexico i{font-size:30px; font-weight:200;color:#357fff}
.hl_mh_hotbk4 li p{height:14px;line-height:14px;font-size: 14px;    color: #5a3401;}

.hl_pay{background: linear-gradient(90deg,#fce5aa,#e1b271);border-radius: 25px;height: 50px;line-height: 50px;text-align: center;display: block;width: 300px;margin: 0 auto;margin-top: 30px;box-shadow: 0 0 4px 1.3335px rgba(0,0,0,.04)}
.hl_pay .weui_tabbar_label{color: #5b3301;font-size: 16px;font-weight: 700;}
.hl_pay .weui_tabbar_label i{font-size: 17px;font-weight: 300;}


.decorate{font-size: 30px; position: relative; display: inline-block; letter-spacing: 2px;margin: 50px 0;}
.decorate:before,.decorate:after{content: ''; width: 101px; height: 19px; position: absolute; top: 12px;}
.decorate:before{left: -140px; background: url(../img/comy-icon3.svg);}
.decorate:after{right: -140px; background: url(../img/comy-icon2.svg);}

.common-problem-box{height: 653px; background: url(../img/comy-bbg2.svg) no-repeat center;text-align: left;}
.common-problem-box .hl_title{padding: 89px 0 56px 0; font-size: 30px; text-align: center; letter-spacing: 2px;color: #333;}
.common-problem-box .con{width: 1100px; margin: 0 auto;}
.common-problem-box .con ul{width: 506px;}
.common-problem-box .con ul li .question{font-size: 18px; padding-bottom: 8px;}
.common-problem-box .con ul li .question em{float: left;}
.common-problem-box .con ul li .question span{overflow: hidden; display: block;}
.common-problem-box .con ul li .answer{padding: 0 0 40px 30px; color: #6B4100; font-size: 16px; line-height: 24px;}
.common-problem-box .con ul.right{width: 516px; padding-left: 70px;}

.my_orderlist{ box-sizing:border-box;text-align: left;}
.my_orderlist ul{ padding:0px}
.my_orderlist ul li{ width:100%;  line-height:20px; font-size:14px; margin:10px auto 0 auto; padding:10px 0px; border-bottom:1px dashed #ccc  }
.my_orderlist ul li .pup{ font-size:16px;}
.my_orderlist ul li .dow{ font-size:12px; color:#999; line-height:25px}
.my_orderlist ul li .dow b.pcdate{ font-size:12px; font-weight:500; color:#666;}
.my_orderlist ul li .dow b.sx{font-weight:500; color:#ccc; margin:0 10px;}
.my_orderlist ul li.nolist{ text-align:center; color:#999; font-size:18px; line-height:50px; margin-top:50px}
.my_orderlist ul li span{ float:right}
.noorder{  text-align:center; border:1px dashed #e3e3e3; /*border-top:1px dashed #e3e3e3;*/ padding:50px 0px !important; color:#999 }
.my_orderlist .yxz{ color:#C30}
.my_orderlist .cccs{ color:#999}

.hl_load{display:block;text-align:center;line-height:34px;font-size:14px;margin:12px auto;width:80%;border-radius:25px;}

.pay-money {text-align:center;font-size:16px;padding:14px 0 24px;margin:0;}
.pay-money .pay-title {font-size:16px;}
.pay-money .money {font-size:30px;color:#edb161;padding-right:8px;font-weight:bold;}
.pay-money i {color:rgba(0,16,19,0.5);}
.pay-money .old-page-tip {color:rgba(0,16,19,0.5);margin:8px 0 -8px 0;font-size:14px;}

.qr-code{text-align:center;font-size:14px;color:#333;padding: 15px 0;position: relative;border-radius: 5px;}
.qr-code .pay_img{height: 40px;margin-bottom: 10px;}
/* .f2fpay{background: #3d7eff;} */
.qr_code_img{position: relative;width: 200px;margin: 0 auto;border: #f3f3f3 solid 1px;}
.qr_code_img .expired {position: absolute;top: 0;left: 0;height: 100%;width: 100%;opacity: .95;background: #fff url(../img/expired.png) center center no-repeat;}
.qr-code .desc{font-size: 12px;color: #ccc;}