	/* info page css*/
    .match-info{
		min-height: 100%;
		background: rgb(243, 243, 243);
	}
	.m-section{
        margin-bottom:px2rem(20);
		background: rgb(255, 255, 255);
		text-align: center;

        h5{
            height: px2rem(50);
            font-size: px2rem(24);
            line-height: px2rem(50);
            color: rgb(112, 112, 112);
        }

        table{
            width: 100%;
            border-collapse: collapse;
            border: none;
        }
        thead{
             height: px2rem(50);
             line-height: px2rem(50);
             color: rgb(160, 160, 160);
        }
        tbody{
            line-height: px2rem(70);
            color: rgb(51, 51, 51);
        }
        tr{
            border-top: 1px solid rgb(243, 243, 243);
        }
        th,td{
        width: 25%;
        }
        th{
             font-size: px2rem(22);
        }
        td{
             font-size: px2rem(28);
        }
	}


    /*detail page  css*/
    $paddingHorizontal : px2rem(24);

    .time-info{
        height: px2rem(50);
        font-size: px2rem(20);
        line-height: px2rem(50);
        background: rgb(250, 250, 250);
        color: rgb(153, 153, 153);

        .start-time{
            float: left;
            // width: px2rem(276);
            margin-right: $paddingHorizontal;
            margin-left: $paddingHorizontal;
        }

        .total-time{
            float: left;
        }

    }

    .detail-content{
        background: rgb(255, 255, 255);
    }

    .team-section{

        /*team nav*/
        nav{
            height: px2rem(60);
            padding: 0 $paddingHorizontal;
            background-size:px2rem(180) px2rem(60);
            background-repeat: no-repeat;
            font-size: px2rem(22);
            line-height: px2rem(60);

            .team-label{
                font-size: px2rem(26);
                color: rgb(255, 255, 255);
            }

            .kill-money{
                float: right;
                font-size: px2rem(22);

                label{
                    margin-left: px2rem(40);
                }
            }
        }

        &.victory-team nav{
            color: rgb(75, 226, 178);
            background-image: url(/img/victory_back.png);
            
        }
        &.failed-team nav {
            color: rgb(250, 102, 104);
            border-top: 1px solid #f3f3f3;
            background-image: url(/img/failed_back.png);
        }


        /*team detail*/
        .team-detail{
            list-style: none;

            &>li{
                min-height: px2rem(190);
                padding: 0 $paddingHorizontal;
                border-top: 1px solid #f3f3f3;
            }
        }

        .player-detail{
            height: px2rem(90);
            margin: px2rem(28) 0 px2rem(14) 0;
            font-size: 0;/*消除inline-block的缝隙*/

            section{
                float: left;
            }

            img{
                width: 100%;
                height: 100%;
            }

            .player-head{
                float: left;
                width: px2rem(90);
                height: px2rem(90);
                margin-right: px2rem(24);
            }

            .player-equipment{
                height: 100%;
            }

            .player-name{
                @include inline-block;
                margin: px2rem(2) 0  px2rem(20) 0;
                font-size: px2rem(28);
                color:#333;
                text-decoration: underline;
            }

            /*装备列表*/
            .equipment-list{
                list-style: none;
            }

            
            li{
                    @include inline-block;
                    width: px2rem(40);
                    height: px2rem(40);
                    margin-right: px2rem(14);
            }

            /*玩家战绩*/
            .player-military{
                float: right;
                height: 100%;

                p{
                    margin: px2rem(6) 0 px2rem(20) 0;
                    font-size: px2rem(24);
                    color:#999;
                }

                .most-value-player{
                    @include inline-block;
                    width: px2rem(104);
                    height: px2rem(40);
                    background: url(/img/most_value_player.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }

        /*获得荣誉区域*/
        .player-glory{
            position: relative;
            height: px2rem(58);
            font-size: 0;
            
            .place-holder{
                @include inline-block;
                width: px2rem(90);
                margin-right: px2rem(24);
            }

            /*荣誉*/
            i{
                @include inline-block;
                width: px2rem(30);
                height: px2rem(30);
                margin-right: px2rem(10);
                img{
                    display: block;
                    width: 100%;
                    overflow: hidden;
                }
            }

            .most-hurt{
                background: url(/img/most_hurt.png) no-repeat;
                background-size: 100% auto;
            }

            .arrow-span{
                float: right;
                width: px2rem(40);
                height:px2rem(40);
            }
            .arrow-down{
                display: block;
                height: px2rem(22);
                margin-top: px2rem(4);
                background: url(/img/arrow_down.png) no-repeat;
                background-size: 100% auto;
                overflow: hidden;
                transition: height .1s ease .6s;
            }
            .arrow-up{
                position: absolute;
                bottom: 0;
                right: 0;
                width: px2rem(40);
                height: 0;
                background: url(/img/arrow_up.png) no-repeat;
                background-size: 100% auto;
                overflow: hidden;
                transition: height .1s ease .5s;
            }
        }

        .player-data{
            position: relative;
            height: 0;
            margin: 0 -px2rem(24);
            background: rgb(243, 243, 243);
            overflow: hidden;
            color:rgb(64, 64, 64);

            table{
                width: 100%;
                margin-top: px2rem(16);
                border-collapse: collapse;
                border: none;
                font-size:px2rem(22); 
                line-height: px2rem(42);
            }
            td:first-child{
                padding-left: px2rem(24);
            }

            td:first-child,td:nth-child(2){
                width: px2rem(286);
            }

            .d-f{
                margin-top: px2rem(10);
                padding-left: px2rem(24);
                height: px2rem(30);
                font-size: 0;
            }

            i{
                @include inline-block;
                width: px2rem(30);
                height: px2rem(30);
                margin-right: px2rem(14);
                vertical-align: text-top;
                background-size: 100% auto;
                img{
                    display: block;
                    overflow: hidden;
                    width: 100%;
                }
            }

            .d-f-trot{
                // background: url(/img/d_f_trot.jpg) no-repeat;
            }
            .d-f-treat{
                // background: url(/img/d_f_treat.jpg) no-repeat;
            }

        }

        /*控制所有数据块的显示*/
        .showing-data .player-data{
            animation: slidedown-data .3s ease .2s forwards;
        }
        .hiding-data .player-data{
            animation: slideup-data .3s ease forwards;
        }
        .showing-data .arrow-up{
            height: px2rem(22);
            transition: height .1s ease .1s;
        }
        .showing-data .arrow-down{
            height: 0;
            transition: height .1s ease;
        }

    }

    
/*animation css*/
@keyframes slidedown-data{
    from{height : 0;}
    to{height : px2rem(204)}
}
@keyframes slideup-data{
    from{height: px2rem(204);}
    to{height: 0}
}


    
    
