:root{
    --themeColor:rgb(232,75,91);
    --themeOpacityColor:#FCF4F5;
    --themeShadowColor:rgba(250, 55, 66, 0.25);
    --expertThemeColor:rgb(232,75,91);
    --heColor:#F6A20F;
    --linkColor:#0083FF;
    --winColor: #F56266;
    --drawColor:#76BF9A;
    --loseColor:#5B9BF5;
    --handicapColor:#fea583;
    --vipColor:#B38F0D;
    --color_F5790B:#F5790B;
}

* {box-sizing: border-box;padding: 0;margin: 0;}

body{background: #f9f9f9;font-size: 14px;color: #202020}

table{border-collapse: collapse;}

li{list-style: none}

a{cursor: pointer;text-decoration: none}

input,button{outline: none;}

input::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 13px;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 13px;
}

input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 13px;
}

.container{width: 1200px;margin: 0 auto;}

.pointer{cursor: pointer}

.display_flex{display: flex}
.hide{display: none}
.show{display: block}
.show_inlineBlock{display: inline-block}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.text-overflow{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.text-overflow-2{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
}
.text-overflow-3{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
}

.bgfff{background: #fff;}

.color_eee{color: #eee;}
.color_999{color: #999;}
.color_777{color: #777;}
.color_666{color: #666;}
.color_555{color: #555;}
.color_444{color: #444;}
.color_333{color: #333;}
.color_202020{color: #202020;}
.color_89b2f2{color: #89b2f2}

.win_color{color: var(--winColor)}
.draw_color{color: var(--drawColor)}
.lose_color{color: var(--loseColor)}

.padding_10{padding: 10px}

.font_12{font-size: 12px}
.font_14{font-size: 14px}
.font_13{font-size: 13px}
.font_14{font-size: 14px}
.font_15{font-size: 15px}
.font_16{font-size: 16px}
.font_18{font-size: 18px}
.font_20{font-size: 20px}
.font_22{font-size: 22px}
.font_24{font-size: 24px}

.font_weight{font-weight: 600}
.hover-underline:hover{text-decoration: underline}

.clearfix:after, .clearfix:before {content: "";display: block;clear: both;}
.float-r{float: right;}
.float-l{float: left;}

.flex_1{flex: 1}
.flex_2{flex: 2}
.flex_3{flex: 3}
.flex_4{flex: 4}
.flex_5{flex: 5}
.flex_6{flex: 6}
.flex_7{flex: 7}
.flex_auto{flex: auto}

.divider{margin: 20px 0;line-height: 28px;}
.divider span::before,.divider span::after{content: "";width: 30%;height: 1px;float: left;border-top: 1px solid #ddd;margin-top: 14px;}
.divider span::after{float: right;}

.close {
    position: absolute;
    right: 10px;
    top: 0;
    width: 34px;
    height: 34px;
    text-align: center;
    cursor: pointer;
}
.close::before {
    content: '×';
    font-size: 24px;
}

.form-control{
    height: 34px;
    border: 1px solid #ddd;
    width: 100%;
    padding: 0 10px;
    border-radius: 3px;
    margin-bottom: 20px;
    background: #f9f9f9;
}
button[type=submit],#getVerifyCode{
    height: 34px;
    width: 100%;
    background: var(--themeColor);
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    /*隐藏溢出的径向渐变背景*/
    overflow: hidden;
}
.form-control[name="verifyCode"]{
    width: 68.3%;
}
#getVerifyCode{
    width: 30%;
    padding: 0;
    vertical-align: middle;
    line-height: 34px;
}

.label.error{
    color: #fff;
}

.label.error input{
    border: 1px solid #db939a;
    color: #E74C5B;
    font-size: 12px;
    animation: inputShake .2s;
    -webkit-animation: inputShake .2s;
    -moz-animation: inputShake .2s;
    -o-animation: inputShake .2s
}
@keyframes inputShake {
    0%{transform: translateX(4px);}
    30%{transform: translateX(-4px);}
    60%{transform: translateX(4px);}
    90%{transform: translateX(-4px);}
    100%{transform: translateX(0px);}
}
@-webkit-keyframes inputShake {
    0%{transform: translateX(4px);}
    30%{transform: translateX(-4px);}
    60%{transform: translateX(4px);}
    90%{transform: translateX(-4px);}
    100%{transform: translateX(0px);}
}
@-moz-keyframes inputShake {
    0%{transform: translateX(4px);}
    30%{transform: translateX(-4px);}
    60%{transform: translateX(4px);}
    90%{transform: translateX(-4px);}
    100%{transform: translateX(0px);}
}
@-o-keyframes inputShake {
    0%{transform: translateX(4px);}
    30%{transform: translateX(-4px);}
    60%{transform: translateX(4px);}
    90%{transform: translateX(-4px);}
    100%{transform: translateX(0px);}
}

/* 按钮点击水波纹效果 开始 */
.btn_ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    /*设置径向渐变*/
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}
.btn_ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    /*设置初始状态*/
    transition: 0s;
}
/* 按钮点击水波纹效果 结束 */

/* 按钮加载中 效果 开始 */
.btn-loading{
    position: relative;
}
.btn-loading::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(255,255,255,.8);
}
.btn-loading::after{
    font-family: 'iconfont';
    content: "\e6ae";
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    color: #666;
    font-size: 16px;
    animation:rotate 1.5s linear infinite ;
    -webkit-animation: rotate 1.5s linear infinite ;
    -moz-animation: rotate 1.5s linear infinite ;
    -o-animation: rotate 1.5s linear infinite ;
}
@keyframes rotate {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
@-moz-keyframes rotate {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
@-o-keyframes rotate {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
/* 按钮加载 效果 结束 */

.btn{
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 4px 2px #bcbcbc30;
    padding: 4px 10px;
    display: inline-block;
    color: #333;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
}
.disabled{cursor: no-drop;color: #999}

.pop_up_bg{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1010;
}

/* 模块标题左侧竖线 */
.mod_title_line{position: relative;padding-left: 12px;}
.mod_title_line::before{content: "\eb45";position: absolute;font-family: iconfont;left: -4px;top: 50%;margin-top: -8px;color: var(--themeColor);}


/* 消息弹窗提醒 */
.message_notice{z-index: 1010;text-align: center;}
.message_notice>span{display: inline-block;background: #fff;padding:8px 20px;margin-top: 20%;border-radius: 5px;letter-spacing: 1px;color: #666;}

/* 分页按钮 样式 开始 */
.paging{text-align: center;border-top: 1px solid #f6f6f6;padding-top: 20px;}
.paging ul{display: inline-block}
.paging li{float: left;margin: 10px}
.paging li:first-child,.paging li:last-child{font-size: 12px;color: #999;padding: 4px 10px;}
.paging .btn.disabled{color: #c8c8c8;background: #f9f9f9;}
.paging .btn.disabled:hover{cursor: not-allowed}
.paging .btn:not(.disabled):hover{background: var(--themeColor);color: #fff}
/* 分页按钮 样式 结束 */

/* header 样式 开始 */
header{height: 64px;margin-bottom: 10px}
header .header_area{position: fixed;width: 100%; height: 64px;background: #fff;box-shadow: 0px 2px 12px 1px rgba(226,226,254,.42);z-index: 1000;top: 0}
header .logo img{margin-top: 12px;}
header .nav_list{display: inline-block}
header .nav_item{margin-right: 40px;;line-height: 64px;position: relative;width: 80px;text-align: center;}
header .nav_item.active::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 0;
    background: var(--themeColor);
    animation: tab_switch_line ease-in-out .2s;
}
header .nav_item>a{text-decoration: none;color: #1a2030;font-size: 15px;display: block;letter-spacing: 1px}
header .nav_item.active>a{font-weight: 600;font-size: 18px}
header .nav_item:hover>a,
header .nav_item.active>a,
header .nav_item .vice_nav a:hover{color: var(--themeColor);text-shadow: 3px 3px 3px rgba(222,30,48,.2);}
header .nav_item .vice_nav{
    background: #fff;
    box-shadow: 0 0px 8px #ddd;
    line-height: 36px;
    width: 100px;
    position: absolute;
    text-align: center;
    left: -10px;
}
header .nav_item .vice_nav a{display: block;text-align: left;padding-left: 16px;color: #202020}
header .nav_item .vice_nav a .iconfont{color: #d81e06;font-size: 20px; vertical-align: middle;}
header .btn{margin-top: 16px;border: 1px solid var(--themeColor);}
header .btn.to_login{color: var(--themeColor);margin-right: 2px;}
header .register_btn{background: var(--themeColor);color: #fff;}
.header_user_info{position: relative;padding: 18px 0;}
.header_user_info .avatar{width: 28px;height: 28px;border-radius: 50%; vertical-align: middle;margin-right: 6px;box-shadow: 0 0 10px #ddd;}
.header_user_info .details_pop{position: absolute;width: 100%;border-radius: 5px;padding: 10px;padding-bottom:6px;box-shadow: 0px 2px 12px 1px rgba(226, 226, 254, 0.9);top:60px;border: 1px solid #eee}
.header_user_info .details_pop li{margin-bottom: 10px}
.header_user_info .details_pop>a{display: block; height: 36px;line-height: 36px;border-top: 1px solid #f6f6f6;}
.header_user_info .details_pop .logout_btn{
    border: 0;
    border-top: 1px solid #f6f6f6;
    padding: 0;
    margin-top: 0;
    box-shadow: 0 0;
    color: #999;
}
.header_user_info .details_pop>a:hover{color: var(--themeColor)}
.header_user_info .details_pop .beans{color: var(--themeColor);font-size: 16px;font-weight: 600}
/* header 样式 结束 */

footer{height: 200px;line-height: 50px;color: #666;margin-top: 100px;box-shadow: 2px 0px 20px rgba(0, 9, 255, 0.1);padding-top: 30px;background: #363636;color: #c9c9c9;}
footer ul{max-width: 462px;margin: 0 auto;}
footer ul li{font-size: 12px;margin-right: 12px;}
footer ul li a{font-size: 12px;}
footer ul li i{margin-left: 12px}
footer>div{width: 50%;margin: 0 auto;text-align: center;font-size: 12px;}
footer>div span:not(:first-child){margin-left:16px; }
footer a{color: #c9c9c9;}

/* 登录样式 */
.login_pop_con .login_area {
    width: 788px;
    height: 396px;
    position: fixed;
    background-color: #fff;
    left: 50%;
    top: 200px;
    margin-left: -394px;
    background: url("../img/login34.png") no-repeat 0%;
}

.login_content {
    position: absolute;
    right: 56px;
    width: 332px;
    padding: 22px;
    text-align: center;
}

.login_mode_switch {
    line-height: 34px;
    margin-bottom: 18px;
}

.login_mode_switch span {
    width: 28%;
    margin: 0 11%;
    position: relative;
    cursor: pointer;
}

.login_mode_switch span.active{
    color: var(--themeColor);
}

.login_mode_switch span:hover{
    color: var(--themeColor);
}

.login_mode_switch span.active::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: -2px;
    background: var(--themeColor);
    animation: tab_switch_line ease-in-out .2s;
}

.login_pop_con .close {
    background: #fff;
    border-radius: 50px;
    top: -16px;
    color: #596fd5;
    transition: all linear .1s;
}

.login_pop_con .close:hover {
    box-shadow: 0 0 4px 4px #ebebeb;
}

.login_pop_con.show .login_area{
    animation-name: log_pop_show;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-name: log_pop_show;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: log_pop_show;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation-name: log_pop_show;
    -o-animation-duration: .5s;
    -o-animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
}

.login_pop_con.hide .login_area {
    animation-name: log_pop_hide;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-name: log_pop_hide;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: log_pop_hide;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation-name: log_pop_hide;
    -o-animation-duration: .5s;
    -o-animation-timing-function: cubic-bezier(0.1, 1.07, 1, 1);
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
}

@keyframes log_pop_show {
    from {
        opacity: 0;
        top: 50px;
    }
    to {
        opacity: 1;
        top: 160px
    }
}

@-webkit-keyframes log_pop_show {
    from {
        opacity: 0;
        top: 50px;
    }
    to {
        opacity: 1;
        top: 160px
    }
}

@-moz-keyframes log_pop_show {
    from {
        opacity: 0;
        top: 50px;
    }
    to {
        opacity: 1;
        top: 160px
    }
}

@-o-keyframes log_pop_show {
    from {
        opacity: 0;
        top: 50px;
    }
    to {
        opacity: 1;
        top: 160px
    }
}

@keyframes log_pop_hide {
    from {
        opacity: 1;
        top: 160px;
    }
    to {
        opacity: 0;
        top: 50px
    }
}

@-webkit-keyframes log_pop_hide {
    from {
        opacity: 1;
        top: 160px;
    }
    to {
        opacity: 0;
        top: 50px
    }
}

@-moz-keyframes log_pop_hide {
    from {
        opacity: 1;
        top: 160px;
    }
    to {
        opacity: 0;
        top: 50px
    }
}

@-o-keyframes log_pop_hide {
    from {
        opacity: 1;
        top: 160px;
    }
    to {
        opacity: 0;
        top: 50px
    }
}

/* tab 切换动画 */
@keyframes tab_switch_line {
    from{width: 0;left: 50%}
    to{width: 100%;left: 0}
}

/* 滚动条样式 */
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:10px;
    height: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    background: #fff;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:#999;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.2);
}

/* 专家段位样式 */
.experts_rank{position: relative}
.experts_rank img{width: 22px;height: 22px;vertical-align: middle;position: absolute;left: 0;top: -2px;z-index: 1}
.experts_rank font{
    font-size: 12px;
    padding: 0 6px 0px 16px;
    margin-left: 4px;
    transform: scale(.88);
    display: inline-block;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* 分页按钮 */
.pager{margin: 20px 0}
.pager .btn{margin: 0 6px}
.pager .btn a{color: #202020}

/* 可用优惠券列表 */
#canUseCoupon{margin-bottom: 20px;padding: 0 20px}
#canUseCoupon .unfold_btn .iconfont{display: inline-block;transition: transform .5s}
#canUseCoupon .unfold .iconfont{transform: rotate(180deg);}
#canUseCoupon ul{margin-top: 10px;height: 0;transition: height .5s;overflow: hidden;}
#canUseCoupon ul li{font-size: 12px;height: 34px;line-height: 34px;text-align:left;background: #f8f8f8;border-bottom: 1px solid #fff; padding: 0 36px;position: relative;letter-spacing: 1px;cursor: pointer}
#canUseCoupon ul li span{color: #202020}
#canUseCoupon ul li:hover{color:#fd890a}
#canUseCoupon ul li.active{background: #fff;border: 1px solid rgba(253, 139, 15, .2); color:#fd890a;line-height: 32px; }
#canUseCoupon ul li .point{border: 1px solid #FD8B0F;width: 16px;height: 16px;margin-bottom:-8px;border-radius: 50%;padding: 3px;position: absolute;right: 36px;bottom: 50%;}
#canUseCoupon ul li.active .point{border: 0;background: rgba(253, 139, 15, .5);}
#canUseCoupon ul li.active .point span{background: #FD8B0F;display: block;width: 100%;height: 100%;border-radius: 50%;}
#canUseCoupon ul li .reduce_price{float: right;margin-right: 48px;width: 100px;text-align: right;color: #fd890a;}

#appDownloadWindow{
    position: fixed;
    left: 50%;
    right: 0;
    bottom: 200px;
    width: 100px;
    margin-left: 640px;
    padding: 4px;
    cursor: pointer;
}
#appDownloadWindow .item{
    width: 40px;
    height: 40px;
    margin: 6px auto;
    background: rgba(0,0,0,0.15);
    color: #fff;
    text-align: center;
    font-size: 12px;
    border-radius: 5px;
    position: relative;
}
#appDownloadWindow .item:hover{background: var(--themeColor);transition: background .5s;}
#appDownloadWindow .item .move_wrap{width: 100%;height: 100%;overflow: hidden;}
#appDownloadWindow .move_wrap>div{height: 100%;width: 200%;transform: translateX(0px);transition: transform .5s}
#appDownloadWindow .move_wrap>div span{float: left;width: 50%;height: 100%;padding: 4px}
#appDownloadWindow .item:hover .move_wrap>div{transform: translateX(-40px);}
#appDownloadWindow .app_code{
    position: absolute;
    width: 100px;
    height: 100px;
    top: -120px;
    left: -32px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
#appDownloadWindow .app_code img{width: 100%;height: 100%}

/* 点赞 */
.praise_btn{position: relative;}
.praise_btn.praised .iconfont {color: var(--themeColor);}
.praise_btn .zan_animate{position: absolute;top: -10px;width: 100%;left: 0}
.praise_btn .zan_animate{left: 8px}
.praise_btn .zan_animate i{ display: none;color: var(--themeColor);margin: 0; }
.praise_btn .zan_animate i.play_animate{display: inline-block}
.praise_btn .zan_animate i:first-child.play_animate{animation: zanAnimate1 .5s;}
.praise_btn .zan_animate i:nth-child(2).play_animate{animation: zanAnimate2 .5s;}
.praise_btn .zan_animate i:nth-child(3).play_animate{animation: zanAnimate3 .5s;}
.praise_btn .zan_animate i:nth-child(4).play_animate{animation: zanAnimate4 .5s;}

@keyframes zanAnimate1 {
    0%{
        transform: translate(0 0);
        opacity: 0;
    }
    50%{
        transform: translate(-10px,-20px);
        opacity: 1;
    }
    100%{
        transform: translate(-20px,-10px);
        opacity: 0;
    }
}
@keyframes zanAnimate2 {
    0%{
        transform: translate(0 0);
        opacity: 0;
    }
    50%{
        transform: translate(-10px,-26px);
        opacity: 1;
    }
    100%{
        transform: translate(-10px,-12px);
        opacity: 0;
    }
}
@keyframes zanAnimate3 {
    0%{
        transform: translate(0 0);
        opacity: 0;
    }
    50%{
        transform: translate(6px,-24px);
        opacity: 1;
    }
    100%{
        transform: translate(16px,-18px);
        opacity: 0;
    }
}

@keyframes zanAnimate4 {
    0%{
        transform: translate(0 0);
        opacity: 0;
    }
    50%{
        transform: translate(18px,-24px);
        opacity: 1;
    }
    100%{
        transform: translate(22px,-6px);
        opacity: 0;
    }
}