@import "./global.less";
@import "../css/style.css";
@import "../css/less.css";

header {
    height: 72px;
    background-color: @tr;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    transition: all .5s;

    .container {
        .between-Box();

        .header_logo {
            width: 72px;
            height: 72px;

            img {
                transition: all .5s;
            }
        }

        .header_navigation {
            .center-Box();
            height: 72px;
            transition: all .5s;

            .navigation {
                width: 120px;
                .center-Box();
                height: 72px;
                cursor: pointer;
                position: relative;
                margin-right: 4px;

                // transition: all .5s;
                .navigation_text {
                    z-index: 1;
                    color: @white;
                    transition: all .5s;

                    .border {
                        height: 2px;
                        background: @font_color;
                        margin-top: 6px;
                        transform: scale(0);
                        transition: all .5s;
                    }

                    .active_border {
                        transform: scale(1);
                    }
                }

                .navigation_text:hover {
                    .border {
                        transform: scale(1);
                    }
                }

                .child_navigation_list {
                    width: 100%;
                    height: 0px;
                    transition: all .5s;
                    background: @font_color;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    overflow: hidden;
                    .child_navigation {
                        font-size: 14px;
                        color: @white;
                        margin-bottom: 20px;
                        text-align: center;
                        // transform: translateX(30px);
                        // opacity: .5;
                        // &:nth-child(1) {
                        //     transition: all .4s;
                        // }

                        // &:nth-child(2) {
                        //     transition: all .6s;
                        // }

                        // &:nth-child(3) {
                        //     transition: all .8s;
                        // }

                        // &:nth-child(4) {
                        //     transition: all 1s;
                        // }
                    }
                }
            }

            .navigation:hover {
                .child_navigation_list {
                    padding-top: 60px;
                    height: 220px;

                    // .child_navigation {
                    //     transform: translateX(0);
                    //     opacity: 1;
                    // }
                }
            }

            .header_statement {
                .center-Box();
                width: 136px;
                height: 32px;
                background-color: @font_color;
                border-radius: 20px;
                cursor: pointer;

                p {
                    color: @white;
                    margin-left: 7px;
                    font-size: 15px;
                    line-height: 15px;
                }
            }
        }
    }
}
.mb_header {
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 15;
    transition: all 0.5s;
    display: none;

    .top_bar {
        width: 100%;
        height: 60px;
        .between-Box();

        .left {
            width: 46px;
            height: 60px;

            #nav-toggle {
                position: absolute;
                left: 14px;
                top: 18px;
                color: #fff;
                -webkit-transform: scale(0.7);
                -moz-transform: scale(0.7);
                -ms-transform: scale(0.7);
                -o-transform: scale(0.7);
                transform: scale(0.7);
                transform-origin: 50% 50%;
                z-index: 999;
                cursor: pointer;
                padding: 10px 35px 16px 0px;

                span,
                span:before,
                span:after {
                    cursor: pointer;
                    border-radius: 1px;
                    -moz-border-radius: 1px;
                    -webkit-border-radius: 1px;
                    -o-border-radius: 1px;
                    height: 3px;
                    width: 35px;
                    background: #fff;
                    position: absolute;
                    display: block;
                    content: '';
                }

                span:before {
                    top: -10px;
                }

                span:after {
                    bottom: -10px;
                }

                span {
                    height: 0;
                }

                span,
                span:before,
                span:after {
                    transition: all 500ms ease-in-out;
                    -webkit-transition: all 500ms ease-in-out;
                    -moz-transition: all 500ms ease-in-out;
                    -o-transition: all 500ms ease-in-out;
                }
            }

            #nav-toggle.active span {
                background-color: transparent;
            }

            #nav-toggle.active span:before,
            #nav-toggle.active span:after {
                top: 0;
            }

            #nav-toggle.active span:before {
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
            }

            #nav-toggle.active span:after {
                transform: translateY(-10px) rotate(-45deg);
                -webkit-transform: translateY(-10px) rotate(-45deg);
                -ms-transform: translateY(-10px) rotate(-45deg);
                top: 10px;
            }
        }

        .right {
            .center-Box();
            width: 50px;
            margin-right: 20px;
            img{
                width: 100%;
            }
        }
    }

    .mb_positions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 60px;
        z-index: 14;
        overflow: hidden;
        padding: 0 20%;
        padding-top: 40px;
        max-height: 0;
        .mb_nav {
            color: @white;
            width: 50vw;
            margin: 0 auto;
            height: 50px;
            .center-Box();
            .justifyStart();
            font-size: 18px;
            border-bottom: 1px solid rgba(255, 255, 255, .5);
            cursor: pointer;
            overflow: hidden;
            position: relative;
            transition: all .5s;

            .mb_nav_child_list {
                position: absolute;
                right: 0px;

                .mb_nav_child {
                    height: 34px;
                    font-size: 16px;
                    // border-bottom: 1px solid #ccc;
                    min-width: 144px;
                    .center-Box();
                    .justifyEnd();
                }
            }
        }
    }
}
.mb_active_header {
    height: 100%;
}
.container {
    width: 1170px;
    margin: 0 auto;
}

.loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: @font_color;
    .center-Box();
    z-index: 16;
    transition: all .5s;
    .con {
        transform: rotateZ(90deg) translatex(-50vh);
        .center-Box();
        position: relative;

        .middle_con {
            min-width: 0vw;
            height: 194px;
            min-height: 194px;
            max-width: 1508px;
            width: 0;
            .center-Box();
            overflow: hidden;

            img {
                display: block;
                height: 10vw;
            }
        }



        .left_con {
            // background-image: url(../img/loading/img001.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            max-width: 1.5vw;
            min-width: 1.4vw;
            z-index: 1;
            height: 242px;
            .center-Box();

            img {
                width: 100%;

            }
        }

        .right_con {
            // background-image: url(../img/loading/img001.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            max-width: 1.5vw;
            min-width: 1.4vw;
            height: auto;
            z-index: 1;
            height: 242px;
            .center-Box();

            img {
                width: 100%;
            }
        }

        
    }
        .loading_btn{
                position: absolute;
                padding: 10px 30px;
                font-size: 18px;
                line-height: 18px;
                font-weight: lighter;
                cursor: pointer;
                left: 0;
                right: 0;
                bottom: 10vw;
                width: 120px;
                height: 40px;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                COLOR: #ddd3b6;
                transition: all 0.5s;
                transform: scale(0);
                overflow: hidden;
                .borderss{
                    width: 36px;
                    height: 1px;
                    background: #ddd3b6;
                    position: absolute;
                    bottom: 10px;
                }
        }
    
}

.active_loading {
    .con {
        animation: con_active 1s forwards;
    }

    @keyframes con_active {
        0% {
            transform: rotateZ(90deg) translatex(-50vh);
        }

        50% {
            transform: rotateZ(90deg) translatex(0vh);
        }

        100% {
            transform: rotateZ(0deg) translatex(0vh);

        }
    }

    .middle_con {
        animation: middle_con_active 2s forwards 1s;
    }

    @keyframes middle_con_active {
        0% {
            min-width: 0vw;
        }

        100% {
            min-width: 78vw;
        }
    }
}

footer {
    height: 418px;
    background-color: #f1efef;
    padding-top: 50px;

    .footer_top {
        .center-Box();
        .justifyStart();
        padding-bottom: 34px;
        border-bottom: 1px solid #d2d2d2;

        .footer_top_title {
            font-size: 20px;
            font-weight: lighter;
            margin-right: 40px;
            position: relative;
            
        }

        .icon-weixin {
            font-size: 25px;
            margin-right: 30px;
            cursor: pointer;
            position: relative;
            img{
                position: absolute;
                width: 120px;
                height: 120px;
                top: 0px;
                left: -40px;
                z-index: -1;
                transition: all .5s;
            }
        }

        .icon-weibo {
            font-size: 30px;
            cursor: pointer;
            position: relative;
            img{
                position: absolute;
                width: 120px;
                height: 120px;
                top: 0px;
                left: -40px;
                z-index: -1;
                transition: all .5s;
            }
        }
    }

    .footer_middle {
        padding-top: 36px;
        .between-Box();

        .footer_middle_list {
            .center-Box();
            .justifyStart();
            .alstart();

            .footer_middle_ul {
                margin-right: 102px;

                .footer_middle_title {
                    font-size: 20px;
                    color: @three;
                    margin-bottom: 33px;
                }

                .footer_middle_li {
                    font-size: 16px;
                    color: @six;
                    margin-bottom: 23px;
                    cursor: pointer;
                }
            }
        }

        .footer_middle_logo {
            margin-right: 127px;
            cursor: pointer;
        }
    }

    .footer_bottom {
        font-size: 14px;
        color: @nine;
        margin-top: 64px;
    }
}

main {
    overflow: hidden;
    // padding-bottom: 160px;
}
.swiper2 {
    padding-bottom: 20px;
    .swiper-scrollbar-drag{
        bottom: 0px;
        height: 6px;
        background-color: @font_color;
    }
}
.page_tab{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    li{
        list-style: none;
        font-size: 18px;
        margin-right: 30px;
    }
    .page-active{
        color: @font_color;
    }
}