.tradeTit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    p{
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 22px;
        line-height: 1.5;
        color: #333;
        &::before{
            display: block;
            content: '';
            width: 4px;
            height: 24px;
            margin-right: 17px;
            background-color: #f08200;
            border-radius: 2px;
        }
    }
    .tradeSearch{
        display: flex;
        input{
            width: 340px;
            height: 50px;
            padding: 0 20px;
            border: 1px solid #D9D9D9;
            border-right: 0;
            font-size: 14px;
            color: #999;
        }
        .searchBtn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 50px;
            background: #f08200;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
        }
    }
}
.dateBlock{
    padding-top: 40px;
    padding-bottom: 60px;
    background: #f7f7f7;
    .w1280{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .left{
            width: 420px;
            padding: 32px 30px;
            background: rgba($color: #fff, $alpha: .97);
            .tit{
                display: flex;
                align-items: center;
                margin-bottom: 16px;
                font-size: 22px;
                line-height: 1.75;
                color: #333;
                img{
                    height: 24px;
                    margin-right: 11px;
                }
            }
            #ID-laydate-static-1{
                width: 100%;
                #layui-laydate1{
                    width: 100%;
                    border: 0;
                    box-shadow: none;
                    .layui-laydate-main{
                        width: 100%;
                        .layui-laydate-header{
                            display: flex;
                            justify-content: space-between;
                            padding: 0;
                            // padding-top: 32px;
                            padding-top: 20px;
                            border-bottom: 0;
                            border-top: 1px solid rgba($color: #3f3a39, $alpha: .1);
                            .laydate-set-ym{
                                span{
                                    padding: 0;
                                    font-size: 20px;
                                    font-weight: bold;
                                    color: #333;
                                }
                            }
                            .laydate-prev-y,.laydate-next-y{
                                display: none;
                            }
                            i{
                                font-weight: bold;
                                color: #3f3a39;
                                &.laydate-prev-m{
                                    position: initial;
                                }
                                &.laydate-next-m{
                                    position: initial;
                                }
                            }
                        }
                        .layui-laydate-content{
                            // margin-top: 34px;
                            margin-top: 20px;
                            padding: 0;
                            table{
                                width: 100%;
                                thead tr,tbody tr{
                                    display: flex;
                                    justify-content: space-between;
                                    th{
                                        width: 34px;
                                        height: auto;
                                        font-size: 14px;
                                        color: #999;
                                    }
                                    td{
                                        width: 34px;
                                        height: 34px;
                                        margin-top: 9px;
                                        font-size: 14px;
                                        line-height: 34px;
                                        color: #333;
                                        div{
                                            padding: 0;
                                        }
                                        &.laydate-day-prev div,&.laydate-day-next div{
                                            color: #ccc;
                                        }
                                        .laydate-day-mark{
                                            font-size: 14px;
                                            line-height: 34px;
                                            &::after{
                                                top: 4px;
                                                background: #f08200;
                                            }
                                        }
                                    }
                                    .layui-this {
                                        background: #fff !important;
                                        div{
                                            overflow: hidden;
                                            border-radius: 50%;
                                            background: #f08200 !important;
                                        }
                                    }
                                }
                                thead tr{
                                    margin-bottom: 10px;
                                }
                                tbody tr td div{
                                    border-radius: 50%;
                                }
                            }
                        }
                    }
                    .layui-laydate-footer{
                        display: none;
                    }
                }
            }
        }
        .right{
            width: calc(100% - 450px);
            min-height: 476px;
            padding: 35px 40px 35px;
            background: #fff;
            .time{
                margin-bottom: 25px;
                margin-top: 38px;
                font-weight: bold;
                font-size: 16px;
                line-height: 1.75;
                color: #333;
            }
            .info,.text,.text,.desc{
                padding: 25px 0 21px;
                border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
                p{
                    margin-bottom: 4px;
                    font-size: 16px;
                    line-height: 1.75;
                    color: #666;
                    span{
                        font-weight: bold;
                        color: #333;
                    }
                }
            }
            .info{
                border-top: 1px solid rgba($color: #000000, $alpha: .1);
            }
        }
    }
}
.commissionBlock{
    padding: 40px 0 0;
    background: #f7f7f7;
    .w1280{
        padding: 40px;
        background: #fff;
        .tradeTit{
            margin-bottom: 30px;
        }
        .tab{
            display: flex;
            overflow-x: auto;
            background: #d9d9d9;
            border-right: 1px solid #d9d9d9;
            a{
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .5s,color .5s;
                min-width: 196px;
                height: 70px;
                border-right: 1px solid #fff;
                text-align: center;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #333333;
                &.on{
                    background: #f08200;
                    color: #fff;
                }
                &:last-child{
                    border-right: 0;
                }
            }
        }
        .content{
            .cont{
                display: none;
                width: 100%;
                padding-bottom: 15px;
                overflow-x: auto;
                .table1{
                    table-layout: fixed;
                    width: 100%;
                    tbody{
                        overflow: auto;
                        width: 100%;
                        tr{
                            min-width: 855px;
                            display: flex;
                            border-left: 1px solid rgba($color: #cecece, $alpha: .8);
                            border-right: 1px solid rgba($color: #cecece, $alpha: .8);
                            td{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 12px 10px;
                                background: #fff;
                                border-right: 1px solid rgba($color: #cecece, $alpha: .8);
                                border-bottom: 1px solid rgba($color: #cecece, $alpha: .8);
                                text-align: center;
                                font-size: 16px;
                                line-height: 36px;
                                color: #333;
                                p{
                                    font-size: 16px;
                                    line-height: 36px;
                                    color: #333;
                                }
                                &:first-child{
                                    position: sticky;
                                    left: 0;
                                    z-index: 1;
                                    width: calc(240/1180*100%);
                                }
                                &:nth-child(2){
                                    width: calc(167/1180*100%);
                                }
                                &:nth-child(3){
                                    width: calc(268/1180*100%);
                                }
                                &:nth-child(4){
                                    width: calc(506/1180*100%);
                                }
                                &:last-child{
                                    border-right: 0;
                                }
                            }
                            &:nth-child(odd) {
                                background: #f5f5f5;
                                td{
                                    background: #f5f5f5;
                                }
                            }
                            &:first-child{
                                background: #fff6ec;
                                td{
                                    background: #fff6ec;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
                .table2{
                    table-layout: fixed;
                    tbody{
                        tr{
                            // min-width: 855px;
                            width: 1720px;
                            display: flex;
                            border-left: 1px solid rgba($color: #cecece, $alpha: .8);
                            border-right: 1px solid rgba($color: #cecece, $alpha: .8);
                            td{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 100px;
                                padding: 12px 0px;
                                background: #fff;
                                border-right: 1px solid rgba($color: #cecece, $alpha: .8);
                                border-bottom: 1px solid rgba($color: #cecece, $alpha: .8);
                                text-align: center;
                                font-size: 16px;
                                line-height: 36px;
                                color: #333;
                                p{
                                    font-size: 16px;
                                    line-height: 36px;
                                    color: #333;
                                }
                                &:first-child{
                                    position: sticky;
                                    left: 0;
                                    z-index: 1;
                                    width: 120px;
                                }
                                &:nth-child(2){
                                    width: 80px;
                                }
                                &:nth-child(3){
                                    width: 180px;
                                }
                                &:nth-child(4){
                                    width: 180px;
                                }
                                &:nth-child(6){
                                    width: 260px;
                                }
                                &:nth-child(7){
                                    width: 200px;
                                }
                                &:nth-child(8){
                                    width: 220px;
                                }
                                &:nth-child(9){
                                    width: 260px;
                                }
                                &:last-child{
                                    border-right: 0;
                                }
                            }
                            &:nth-child(odd) {
                                background: #f5f5f5;
                                td{
                                    background: #f5f5f5;
                                }
                            }
                            &:first-child{
                                background: #fff6ec;
                                td{
                                    background: #fff6ec;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
                &::-webkit-scrollbar-track-piece{
                    background-color: #e6e6e6;
                }
                &::-webkit-scrollbar-thumb:vertical{
                    background-color: #f08200;
                }
            }
        }
        .tradeTime{
            margin-top: 5px;
            font-size: 16px;
            color: #666;
        }
    }
}
.commissionBlock2{
    padding-top: 50px;
    padding-bottom: 80px;
    background: #f7f7f7;
    .w1280{
        padding: 46px 60px 84px 50px;
        background: #fff;
        .content{
            height: 505px;
            margin-top: 38px;
            padding-right: 68px;
            overflow-y: auto;
            p{
                margin-bottom: 36px;
                font-size: 16px;
                line-height: 36px;
                color: #333;
                &:last-child{
                    margin-bottom: 0;
                }
            }
            &::-webkit-scrollbar-track-piece{
                background-color: #e6e6e6;
            }
            &::-webkit-scrollbar-thumb:vertical{
                background-color: #f08200;
            }
        }
    }
}
.breedBlock{
    background: #f7f7f7;
    padding-top: 40px;
    padding-bottom: 60px;
    .w1280{
        background: #fff;
        padding: 40px;
        .type{
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
            a{
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 60px;
                padding-bottom: 19px;
                font-weight: bold;
                font-size: 16px;
                color: #333;
                &:first-child{
                    margin-left: 0;
                }
                &.on{
                   position: relative;
                   color: #f08200;
                   &::after{
                        display: block;
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: -1px;
                        width: 100%;
                        height: 3px;
                        background: #f08200;
                   }
                }
            }
            // &::after{
            //     display: block;
            //     content: '';
            //     position: absolute;
            //     bottom: 0;
            //     width: 100%;
            //     height: 1px;
            //     background: rgba($color: #000000, $alpha: .1);
            // }
        }
        .swiperClick{
            position: relative;
            margin-top: -1px;
            padding-top: 40px;
            border-top: 1px solid  rgba($color: #000000, $alpha: .1);
            .swiper-button-prev,.swiper-button-next{
                width: 24px;
                height: 24px;
                margin-top: 0px;
                background: url(../images/trade/left2.png) no-repeat center;
                opacity: 1;
                &::after{
                    display: none;
                }
                &.swiper-button-disabled{
                    background: url(../images/trade/left.png) no-repeat center;
                }
                &.swiper-button-next{
                    transform: rotate(180deg);
                }
            }
            .breedSwiper{
                position: relative;
                margin-top: 43px;
                margin: 20px calc(70/1180*100%);
                padding: 0 20px;
                .swiper-wrapper .swiper-slide{
                    width: 102px;
                    cursor: pointer;
                    .img{
                        position: relative;
                        width: 102px;
                        height: 102px;
                        border: 2px solid #fff;
                        border-radius: 50%;
                        overflow: hidden;
                        font-size: 0;
                        &::after{
                            display: block;
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 1;
                            width: calc(100% - 4px);
                            height: calc(100% - 4px);
                            border-radius: 50%;
                            box-shadow: 0px 2px 20px 0px 
                            rgba(240, 130, 0, 0.3);
                            border: solid 2px #f08200;
                            opacity: 0;
                        }
                        img{
                            position: relative;
                            z-index: 0;
                        }
                    }
                    p{
                        margin-top: 11px;
                        text-align: center;
                        font-size: 16px;
                        line-height: 2;
                        color: #333;
                    }
                    &.on{
                        width: 102px;
                        .img{
                            &::after{
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
        .content{
            margin-top: 45px;
            .cont{
                display: none;
                table{
                    width: 100%;
                    tbody{
                        border-top: 1px solid rgba($color: #000, $alpha: .1);
                        tr{
                            display: flex;
                            border-left: 1px solid rgba($color: #000, $alpha: .1);
                            td{
                                width: 50%;
                                padding: 12px 0;
                                border-right: 1px solid rgba($color: #000, $alpha: .1);
                                border-bottom: 1px solid rgba($color: #000, $alpha: .1);
                                text-align: center;
                                font-size: 16px;
                                line-height: 36px;
                            }
                            &:nth-child(even){
                                background: #f5f5f5;
                            }
                        }
                    }
                }
            }
        }
        .levelCont{
            .levelList{
                display: none;
            }
        }
    }
}
@media (anu-hover:hover) {
    .layui-laydate-content td>div:hover{
        border-radius: 50%;
    }
}
@media (max-width:1080px) {
    .tradeTit {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
        p{
            font-size: 18px;
        }
        .tradeSearch{
            // flex-direction: column;
            justify-content: space-between;
            width: 100%;
            margin-top: 20px;
            input{
                width: calc(100% - 70px);
                height: 40px;
                // margin-bottom: 20px;
                padding: 0 10px;
                border-right: 1px solid #d9d9d9;
                font-size: 12px;
            }
            .searchBtn{
                width: 60px;
                height: 40px;
                font-size: 12px;
            }
        }
    }
    .dateBlock{
        padding: 40px 0;
        .w1280{
            flex-direction: column;
            align-items: center;
            .left{
                max-width: 420px;
                width: 100%;
            }
            .right{
                width: 100%;
                min-height: auto;
                margin-top: 30px;
                .time{
                    margin: 20px 0;
                }
            }
        }
    }
    .commissionBlock{
        padding:  40px 0 0;
        .w1280{
            padding: 40px;
            .tab{
                a{
                    min-width: 120px;
                    height: 60px;
                }
            }
            .content {
                padding-bottom: 0;
                .cont .table1 tbody tr td{
                    font-size: 15px;
                    line-height: 28px;
                    &:nth-child(1){
                        width: calc(200/1180*100%);
                    }
                    &:nth-child(3){
                        width: calc(290/1180*100%);
                    }
                    &:nth-child(4){
                        width: calc(550/1180*100%);
                    }
                }
                .cont .table2 tbody tr td{
                    font-size: 15px;
                    line-height: 28px;
                }
            }
        }
    }
    .commissionBlock2{
        .w1280{
            padding: 40px;
            .content{
                padding-right: 20px;
                margin-top: 20px;
                p{
                    font-size: 14px;
                    margin-bottom: 15px;
                }
            }
        } 
    }
    .breedBlock{
        padding: 40px 0;
        .w1280{
            padding: 40px;
            .type{
                justify-content: flex-start;
                margin-top: 30px;
                overflow-x: auto;
                a{
                    min-width: 100px;
                    height: 45px;
                    font-size: 14px;
                }
            }
            .swiperClick {
                padding-top: 10px;
                .breedSwiper{
                    padding: 0;
                }
                .swiper-button-prev{
                    left: -10px;
                    margin-top: -20px;
                }
                .swiper-button-next{
                    right: -10px;
                    margin-top: -20px;
                }
            }
            .content{
                margin-top: 30px;
                .cont table tbody tr td{
                    font-size: 14px;
                    line-height: 24px;
                }
            }
        }
    }
}
@media (max-width:500px) {
    .dateBlock .w1280 .right{
        padding:  20px;
    }
    .commissionBlock .w1280{
        padding: 20px;
        .tab a{
            min-width: 100px;
            height: 56px;
            font-size: 16px;
        }
    }
    .commissionBlock2{
        .w1280{
            padding: 20px;
            .content{
                height: auto;
                padding-right: 0;
            }
        }
    }
    .breedBlock .w1280{
        padding: 20px;
        .swiperClick .breedSwiper {
            margin: 20px 10%;
            .swiper-wrapper .swiper-slide{
                width: 70px;
                .img{
                    width: 70px;
                    height: 70px;
                    &::after{
                        height: 66px;
                    }
                }
                &.on{
                    width: 70px;
                }
            }
        }
    }
}