/*hero index page css*/
.hero-index{
    padding-top: px2rem(320);
}
.h-brief{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: px2rem(220);
    box-sizing: border-box;
    padding: px2rem(40) px2rem(24);
    background: rgb(255, 255, 255);

    &>section{
        float: left;
    }

    /*头像区域*/
    .h-head{
        position: relative;
        width: px2rem(140);
        height: 100%;
        border-radius: 4px;/*圆角*/
        overflow: hidden;
        font-size: 0;

        .h-icon{
            width: 100%;
            height: 100%;
        }

        .h-follow{
            position: absolute;
            right: px2rem(10);
            bottom: px2rem(10);
            width: px2rem(40);
            height:px2rem(40);
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        .has-follow{
            background-image: url(/img/has_follow.png);
        }

        .not-follow{
            background-image: url(/img/not_follow.png);
        }
    }

    /*英雄属性介绍*/
    .h-property{
        margin-left: px2rem(24);
        padding-top: px2rem(16);

        .p-line1{
            font-size: 0;
        }
        
        .p-line2,.p-line3{
            font-size: px2rem(24);
            color: #999;
            line-height: 1;
        }

        .p-line2{
            margin-top: px2rem(26);
        }

        .p-line3{
            margin-top: px2rem(18);

            label{
                margin-right: px2rem(10);
            }
        }
        .p-eb-line2{
            margin-top: px2rem(36);
            font-size: 0;
            vertical-align: text-bottom;

            &>*{
                @include inline-block;
            }

            .eb-for-author{
                font-size: px2rem(26);
                color: #333;
            }

            .eb-author{
                font-size: px2rem(24);
                color: #999;
                margin-left: px2rem(24);
            }

            .eb-for-force{
                width: px2rem(22);
                height: px2rem(22);
                background: url(/img/eb_force.jpg) no-repeat;
                background-size: 100% auto;
                margin-left: px2rem(30);
            }

            .eb-force{
                font-size: px2rem(22);
                color: #999;
                margin-left: px2rem(12);
            }

        }

        .h-name{
            @include inline-block;;
            height: px2rem(30);
            margin-right: px2rem(14);
            font-size: px2rem(30);
            line-height: 1;
            color: #333;
            vertical-align: top;
        }

        .h-type{
            @include inline-block;;
            width: px2rem(72);
            height: px2rem(30);
            background: url(/img/hero_type_back.png) no-repeat;
            background-size: 100% auto;
            text-align: center;
            font-size: px2rem(20);
            line-height: px2rem(30);
            color: #fff;
            vertical-align: top;
        }
        
    }

    /*右侧按钮*/
    .compare-talent{
        float: right;
        display: table;
        width: px2rem(160);
        height: 100%;

        .b-wrap{
            display: table-cell;
            font-size: 0; 
            line-height: px2rem(54);
            text-align: center;
            vertical-align: middle;
        }

        a{
            @include inline-block;;
            width: 100%;
            height: px2rem(54);
            font-size: px2rem(26);
            // margin-bottom: px2rem(32);
            background: rgb(251, 173, 62);
            color:#fff;
            vertical-align: middle;
        }
    }
}

    $navNum : 2;
    .h-nav{
        position: fixed; 
        top: px2rem(240);
        left: 0;
        right: 0;   
        height: px2rem(80);
        background: #fff;
        border-bottom: 1px solid #f3f3f3;

        ul{
            list-style: none;
            height: px2rem(80);
            color: #a5a5a5;
            font-size: 0;/*去除li的间隙*/
        }

        li{
            @include inline-block;;
            width: 100% / $navNum;
            text-align: center;
            font-size: px2rem(28);
            line-height: px2rem(80);

            &.active a{
                color: #fbad3e;
            }
        }  

        .nav-underline{
            position: absolute;
            left: -px2rem(9);
            bottom:px2rem(11);
            width: px2rem(18);
            height: px2rem(4);
            border-radius: px2rem(2);
            background: #fbad3e;
            transition: transform .5s ease;
            transform: translateX(px2rem(375 / $navNum));
        }
    }


.h-content-wrap{
    position: fixed;
    top: px2rem(320);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255, 255, 255);
    
    .content-section{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: none;
        overflow-y: scroll;
    }
    .content-section.active{
        display: block;
    }

    /*英雄资料*/
    .content-section-header{
        color: #333;

        &.one-level{
            padding: px2rem(40) 0 px2rem(20) px2rem(24);
        }

        &.two-level{
            padding: px2rem(20) 0 px2rem(16) px2rem(24);
        }
    }
    .content-section-header>h2{
        font-size: px2rem(26);
        font-weight: bold;
    }

    .ability-list{
        list-style: none;
        padding: 0 px2rem(40);
        font-size: 0;
        
        li{
            position: relative;
            @include inline-block;;
            width: px2rem(96);
            height: px2rem(96);
            border-radius: px2rem(4);
            overflow: hidden;
        }

        li+li{
            margin-left: px2rem(47.5);
        }

        li.active .border-like{
            opacity: 1;
        }

        img{
           width: 100%;
           height: 100%;
           border-radius: px2rem(4);
        }

        /*模拟边框效果*/
        .border-like{
            position: absolute;
            top: 0;
            right: 0;
            bottom:0;
            left: 0;
            border-radius: px2rem(4);
            border: px2rem(6) solid #fbad3e;
            opacity: 0;
        }

    }

    .ability-explain-wrapper{
        margin-top: px2rem(30);
        background: #f3f3f3;

        .ability-detail{
            position: relative;
            font-size: px2rem(26);
            line-height: px2rem(38);
            color: #333;
            display: none;

            &.active{
                display: block;
            }

            @for $i from 1 to 6 {
                .arrow-up-#{$i}th{
                position: absolute;
                top: -px2rem(28);
                left: px2rem(74 + 143.5 * ($i - 1));
                @include triangle-up(px2rem(16),#f3f3f3);
                }
            }
        }
        
        .article-content{
            padding: 0 px2rem(24) px2rem(20) px2rem(24);
            word-break: break-all;
        }
    }

    /*最佳拍档*/
    .best-partner-counter{
        padding: 0 px2rem(24);

        .content-section-header{
            padding-left: 0;
        }
        
        .b-pc-list{
            display: none;
            list-style: none;

        &.default-show{
            display: block;
        }

        }


        .b-pc-icon{
            float: left;
            width: px2rem(90);
            height: px2rem(90);
            margin-right: px2rem(20);
        }

        .b-pc-info{
            font-size: px2rem(26);
            color: #333;
            line-height: px2rem(38);
            overflow: hidden;
        }

        .b-pc-more{
            margin-top: px2rem(24);
            font-size: px2rem(26);
            color: #fbad3e;
            text-align: center;
        }
    }

    .content-text-wrap{
        font-size: px2rem(26);
        color:#333;
        padding: 0 px2rem(40);
    }

    /*英雄背景*/
    .hero-lore{
        
    }


    /*出装*/
    .equip-build-list{
        background: #efefef;

        &>li{
            position: relative;
            margin-bottom: px2rem(10);
            padding: 0  px2rem(30) 0 px2rem(23);
            background: #fff;
            overflow: hidden;
        }


        .equip-build-title{
            margin: px2rem(24) 0 px2rem(26) 0;
            overflow: auto;

            h5{
                float: left;
                font-size: px2rem(26);
                line-height: 1;
                color: #44b5ef;
            }

            time{
                float: right;
                font-size: px2rem(24);
                color: #999;
                line-height: px2rem(26);
            }
        }
        .eb-go{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: px2rem(100);

                .eb-go-detail{
                    display: block;
                    height: 100%;
                    background: url(/img/eq_build_go.png) no-repeat 65% center;
                    background-size: 10% auto;
                }
            }

    }
}

    .equip-build-brief {
            tr{
                display: block;
                margin-top: px2rem(26);
            }

            td:first-child{
                padding-right: px2rem(26);
                font-size: px2rem(26);
                color: #333;
            }
            
            td:nth-child(2){
                font-size: px2rem(24);
                color: #999;
            }

            .equipment_list img{
                width: px2rem(40);
                height: px2rem(40);
                margin-right: px2rem(14);
            }

            .vertical-middle{
                vertical-align: middle;
            }
            .clear-inline-px{
                font-size: 0 !important;
            }

            .equipment-talent-list{
                font-size: 0 !important;

                *{
                    @include inline-block;
                    vertical-align: middle;
                }

                span{
                    font-size: px2rem(24);
                    margin-left: px2rem(11);
                    margin-right: px2rem(29);
                }
            }

            .talent-col-1{
                @include inline-block;
                width: px2rem(34);
                height: px2rem(35);
                background: url(/img/talent_1@2x.png) no-repeat  center left ;
                background-size: 100% auto;
            }

            .talent-col-2{
                @include inline-block;
                width: px2rem(28);
                height: px2rem(38);
                background: url(/img/talent_2@2x.png) no-repeat  center left ;
                background-size: 100% auto;
            }

            .talent-col-3{
                @include inline-block;
                width: px2rem(35);
                height: px2rem(28);
                background: url(/img/talent_3@2x.png) no-repeat  center left ;
                background-size: 100% auto;
            }
            .equipment-build-rune{
                margin-bottom: px2rem(24);
            }
            .equipment-build-rune >li {
                margin-bottom: px2rem(16);
            }
            .equipment-build-rune li>label{
                @include inline-block;
                width: px2rem(55);
                vertical-align: middle;
            }

            .rune-elite-icon{
                @include inline-block;
                width: px2rem(38);
                height: px2rem(38);
                background: url('/img/rune_elite@2x.png') no-repeat;
                background-size: 100% auto;
            }

            .rune-stamp-icon{
                @include inline-block;
                width: px2rem(35);
                height: px2rem(40);
                background: url('/img/rune_stamp@2x.png') no-repeat;
                background-size: 100% auto;
            }

            .rune-sigil-icon{
                @include inline-block;
                width: px2rem(34);
                height: px2rem(39);
                background: url('/img/rune_sigil@2x.png') no-repeat;
                background-size: 100% auto;
            }

            .rune-glyph-icon{
                @include inline-block;
                width: px2rem(35);
                height: px2rem(40);
                background: url('/img/rune_glyph@2x.png') no-repeat;
                background-size: 100% auto;
            }
    }


/*出装 page css*/
.eb-wrap{
    position: fixed;
    top: px2rem(240);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255, 255, 255);
    overflow-y: scroll;
}
.eb-content{
    background: #fff;

    .eb-item{
        padding: 0 px2rem(23);
        border-bottom: 1px solid #f3f3f3;

        h5{
            padding: px2rem(26) 0;
            font-size: px2rem(26);
            line-height: 1;
            color:#333;
        }
        .eb-item-content{
            font-size: 0;
            a{
                @include inline-block;
                width: px2rem(90);
                height: px2rem(90);
            }
            img{
                @include inline-block;
                width: 100%;
                height: 100%;
                margin-bottom:px2rem(26);
                border-radius: px2rem(4);

            }
            a + a{
                margin-left: px2rem(30);
            }

            a:nth-child(7){
                margin-left: 0;
            }

            figcaption{
                margin-bottom: px2rem(26);
                font-size: px2rem(24);
                color:#999;

                label{
                    margin-right: px2rem(5);
                }
            }
        }

    }
}


/*技能详情*/
.ability-info-wrap{
    min-height: px2rem(1334);
    padding: px2rem(60) px2rem(23) 0 px2rem(23);
    background: #fff;

    .ability-info-head{
        overflow: hidden;

        .ability-info-icon{
            float: left;
            width: px2rem(96);
            height: px2rem(96);
        }

        img{
            @include inline-block;;
            width: 100%;
            height: 100%;
        }

        .ability-info-name{
            float: left;
            margin-left: px2rem(30);
        }

        h3{
            font-size:px2rem(36);
            color: #333; 
        }
    }

    .ability-info-describe{
        
        h3{
            margin: px2rem(40) 0 px2rem(26) 0;
            font-size: px2rem(26);
            color: #333;
        }

        p{
            font-size: px2rem(24);
            line-height: 1.4333;
            color: #999;
            margin-right: px2rem(30);
        }
        /*单位*/
        label{
            margin-left: px2rem(30);
        }
    }
}

/*物品详情*/
.equip-info-wrap{
    min-height: px2rem(1334);
    padding: px2rem(60) px2rem(23) 0 px2rem(23);
    background: #fff;

    

    .equip-info-head{
         overflow: hidden;

        .equip-info-icon{
            float: left;
            width: px2rem(96);
            height: px2rem(96);
            
        }

        img{
            @include inline-block;;
            width: 100%;
            height: 100%;
            border-radius: px2rem(4);
        }

        .equip-name-price{
            float: left;
            margin-left: px2rem(30);
            color: #333;
            font-size: 0; 
        }

        h3{
            font-size:px2rem(36);
            margin-bottom: px2rem(26);
        }
        .equip-for-price{
            font-size: px2rem(26);
        }

        .equip-price{
            margin-left: px2rem(20);
            font-size: px2rem(26);
            color: #999;
        }
    }

   
    .equip-info-describe,.equip-info-parts{
        h3{ 
            margin: px2rem(40) 0 px2rem(26) 0;
            font-size: px2rem(26);
        }
    }
    .equip-info-describe{
        margin: px2rem(40) 0;

        .fix-lineheight{
            line-height: 1.4333;
        }

        li{
            margin-bottom: px2rem(26);
            font-size: px2rem(24);
            color: #999;
        }
    }

    .equip-info-parts{
        font-size: 0;

        li{
            @include inline-block;
            width: px2rem(40);
            height: px2rem(40);
        }
        li+li{
            margin-left: px2rem(14);
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
}


