@import url(main.less);

// PC
@media (min-width:@screen-sm-min){
    .banner{
        // 940px
        height: 48.9583vw;
        background: url('../images/index/index_banner.png') no-repeat;
        background-size: 100% 100%;
        position: relative;

        .play_btn{
            width: 15.4688vw;
            height: 2.6563vw;
            border-radius: 1.5104vw;
            border: .1042vw solid #FFFFFF;
            font-size: 1.25vw;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 1.875vw;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 13.5417vw;
            bottom: 12.7604vw;
            cursor: pointer;

            img{
                display: block;
                width: 1.3542vw;
                height: 1.3542vw;
                margin-right: .9375vw;
            }

            &:hover{
                background: rgba(0,0,0,0.2);
            }
        }
    }

    // 播放视频
    .video_box{
        display: none;
        width: 100vw;
        height: 100vh;
        padding: 1.6667vw 10.4167vw;
        box-sizing: border-box;
        // background: #333333;
        background: rgba(0,0,0,0.7);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        // display: flex;
        align-items: center;

        .video{
            width: 100%;
            // height: 100%;
            // background: #979797;
            position: relative;

            .close{
                width: 1.5625vw;
                height: 1.5625vw;
                position: absolute;
                // top: -2.5vw;
                top: 0vw;
                right: -2.5vw;
                z-index: 999999;
                cursor: pointer;

                span{
                    display: block;
                    width: .1563vw;
                    height: 1.5625vw;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;

                    &:nth-of-type(1){
                        transform: rotate(45deg);
                    }

                    &:nth-of-type(2){
                        transform: rotate(-45deg);
                    }
                }
            }

            video{
                width: 100%;
                // max-width: 100%;
                // max-height: 100%;
            }
        }
    }
    
    // 文章
    .story_article{
        padding: 8.4375vw 0 3.6458vw;
        
        p{
            font-size: 1.25vw;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
            line-height: 2.0833vw;
            text-indent: 2.5vw;
            letter-spacing: 0.05vw;
            margin-bottom: .625vw;
        }

        .sign{
            text-align: right;
            margin-top: 1.875vw;
        }
    }

    // 以下内容的公共样式
    .t{
        font-size: 2.0833vw;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #333333;
        line-height: 5.8854vw;
        margin-bottom: 1.1979vw;
    }

    .p{
        font-size: 1.4583vw;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #666666;
        line-height: 2.5vw;
        margin-bottom: 2.0833vw;
        opacity: 0.72;
    }

    .btn{
        display: block;
        width: 7.8125vw;
        height: 2.8125vw;
        background: #FF7C00;
        // background: linear-gradient(90deg, #FF5400 0%, #FF7F41 100%);
        border-radius: .3125vw;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        text-align: center;
        font-size: 1.25vw;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 2.8125vw;
    }

    // 一套智能设备
    .device_box{
        background: rgba(207,209,213,0.15);
        padding: 3.5417vw 0;

        .title{
            text-align: center;
            font-size: 3.125vw;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #333333;
            line-height: 2.9167vw;
            margin-bottom: 9.7917vw;
        }

        .main_flex{

            .right{
                width: 52.4479vw;
                height: 25.6771vw;
                margin-left: .7292vw;
            }
        }
    }
    // 智能运营平台
    .operate_box{
        padding: 9.375vw 0 3.5417vw;

        .main_flex{

            .left{
                width: 36.7188vw;
                height: 27.7083vw;
                margin-right: 6.5625vw;
            }
        }
    }
    // 应急响应服务中心
    .response_box{
        background: rgba(207,209,213,0.15);
        padding: 9.2708vw 0 8.5417vw;

        .main_flex{

            .right{
                width: 30.4167vw;
                height: 24.4792vw;
                margin-left: 5.3646vw;
            }
        }
    }

    // 山羊智能就在您身边
    .bottom_box{
        height: 29.9479vw;
        // background: linear-gradient(144deg, #FC712C 0%, #FEA63E 100%);
        background: url("../images/index/index_img_4.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .text{
            font-size: 3.125vw;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 4.6875vw;
        }
    }
}

// H5
@media (max-width:@screen-xs-max){
    .banner{
        // 940px
        height: 134.1333vw;
        background: url('../images/index/h5/index_banner.png') no-repeat;
        background-size: 100% 100%;

        .h5{
            width: 100%;
            height: calc(100% - 3.4667vw);
            // padding-bottom: 3.4667vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;

            .one{
                font-size: 4.2667vw;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #666666;
                line-height: 6.4vw;
                margin-bottom: 2.1333vw;
            }

            .two{
                font-size: 6.4vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 9.6vw;
                margin-bottom: 3.2vw;
            }

            .play_btn{
                width: 32vw;
                height: 6.9333vw;
                border-radius: 4vw;
                border: .2667vw solid #333333;
                font-size: 3.2vw;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #333333;
                line-height: 4.8vw;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 3.4667vw;

                img{
                    display: block;
                    width: 3.4667vw;
                    height: 3.4667vw;
                    margin-right: 2.4vw;
                }
            }

            &>img{
                height: 84vw;
            }
        }
    }
    
    // 播放视频
    .video_box{
        display: none;
        width: 100vw;
        height: 100vh;
        padding: 6.4vw;
        box-sizing: border-box;
        // background: #333333;
        background: rgba(0,0,0,0.7);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        // display: flex;
        align-items: center;

        .video{
            width: 100%;
            // height: 100%;
            // background: #979797;
            position: relative;

            .close{
                width: 4.2667vw;
                height: 4.2667vw;
                // border: 1px solid #000000;
                position: absolute;
                bottom: -5.3333vw;
                left: 50%;
                margin-left: -2.1333vw;
                z-index: 999999;
                cursor: pointer;

                span{
                    display: block;
                    width: .4vw;
                    height: 4.2667vw;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;

                    &:nth-of-type(1){
                        transform: rotate(45deg);
                    }

                    &:nth-of-type(2){
                        transform: rotate(-45deg);
                    }
                }
            }

            video{
                width: 100%;
            }
        }
    }

    // 文章
    .story_article{
        padding: 8vw 0 9.6vw;

        p{
            font-size: 4.2667vw;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
            line-height: 6.4vw;
            text-indent: 6.4vw;
            letter-spacing: 0.1vw;
            margin-bottom: 1.6vw;
        }

        .sign{
            text-align: right;
            margin-top: 9.6vw;
        }

        .open_or_off{
            width: 13.3333vw;
            margin: 4.2667vw auto 0;
            text-align: center;
            font-size: 4.2667vw;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FF7C00;
            line-height: 6.4vw;
        }

        .h5_open{
            display: none;
        }
    }

    // 以下内容的公共样式
    .t{
        width: 92vw;
        margin: 0 auto 2.1333vw;
        font-size: 5.3333vw;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #333333;
        line-height: 8vw;
    }

    .p{
        width: 92vw;
        margin: 0 auto 7.4667vw;
        font-size: 4.2667vw;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #666666;
        line-height: 6.4vw;
        letter-spacing: .1333vw;
    }

    .btn{
        display: block;
        width: 21.3333vw;
        height: 12vw;
        background: #FF7C00;
        border-radius: 1.6vw;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        text-align: center;
        font-size: 4.2667vw;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 12vw;
        margin: 0 auto;
    }

    // 一套智能设备
    .device_box{
        background: rgba(207,209,213,0.15);
        padding: 6.4vw 0 8.2667vw;

        .title{
            width: 92vw;
            margin: 0 auto 14.1333vw;
            text-align: center;
            font-size: 6.4vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #333333;
            line-height: 9.6vw;
        }

        .right{
            width: 100%;
            height: 55.2vw;
            margin-bottom: 5.8667vw;
        }
    }

    // 智能运营平台
    .operate_box{
        padding: 9.0667vw 4vw 9.6vw;

        .main_flex{
            display: flex;
            flex-direction: column-reverse;

            .left{
                width: 100%;
                height: 70.4vw;
                margin-bottom: 5.8667vw;
            }
        }
    }

    // 应急响应服务中心
    .response_box{
        padding: 5.8667vw 4vw 8vw;
        background: rgba(207,209,213,0.15);

        .right{
            width: 92vw;
            height: 74.1333vw;
            margin-bottom: 11.4667vw;
        }
    }

    // 山羊智能就在您身边
    .bottom_box{
        height: 29.8667vw;
        // background: linear-gradient(144deg, #FC712C 0%, #FEA63E 100%);
        background: url("../images/index/index_img_4.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .text{
            font-size: 4.8vw;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 7.2vw;
        }
    }
}