@import "./common.less";

body {
    font-size: 16px;
    color: #333;
    .d-flex;
    .flex-column;
    min-height: 100vh;

    @media (max-width: 768px) {}

    background-color: #FFFDFA;
    ;
}

:root {
    --gary: #999;
}

main {
    flex: 1;
}

section {
    padding: var(--p30) 0;
}

footer {
    padding: var(--p10) 0;
    text-align: center;
    color: var(--gary);
}

header {
    position: sticky !important;
    top: 0;
    background: rgba(20, 18, 18, 0.8);
    padding: var(--p15) 0;

    .layui-main {
        .d-flex;
        .al-c;
        .jc-s;
    }

    .layui-nav .layui-nav-item {
        line-height: 3em;
        margin: 0 vaR(--p20);
        height: 3em;
        width: 90px;
        overflow: hidden;
        text-align: center;
        position: relative;
    }

    .layui-nav .layui-nav-item a {
        padding: 0;

        width: 100%;
        position: absolute;
        top: 0;
        transition: top 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);

        .EN,
        .CN {
            width: 100%;
            height: 100%;
            display: block;
            text-align: center;

        }

        ;

        &:hover {

            top: -3em;
        }
    }

    .layui-nav .layui-this:after,
    .layui-nav-bar {
        background: #fff;
    }

    .layui-nav-bar,
    .layui-nav .layui-this:after {
        height: 1px;
    }

    .layui-icon-spread-left {
        color: #fff;
    }
}

h5 {
    font-size: var(--ft20);
    font-weight: normal;
}

.contactMain {
    color: #333;

    section {
        padding-top: var(--p30);
    }

    .Info {
        h1 {
            text-align: center;
            font-weight: normal;
            font-size: var(--ft32);
        }

        .s_content {
            margin-top: var(--p20);
            color: var(--gary);
        }
    }

    .listRow {
        gap: var(--p60);
        .d-flex;
        .al-fs;
        .jc-s;
    }

    .ContentList {
        .d-grid;
        gap: var(--p30);

        li {
            gap: var(--p20);
            .d-flex;
            .al-fs
        }

        .img {
            flex-shrink: 0;
            width: var(--p50);
        }

        .sub {
            margin-top: 5px;
        }
    }

    .qrcodeList {
        .d-flex;
        flex-wrap: wrap;
        margin-top: vaR(--p40);
        margin-left: var(--p70);
        gap: var(--p30) var(--p60);

        h5 {
            margin-bottom: var(--p10);
            ;
        }

        .img {
            width: 140px;
        }

        li:hover {
            .img {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            }
        }
    }
}

.leftTitle {
    font-weight: normal;
    padding-left: var(--p15);
    font-size: var(--ft32);
    border-left: 3px solid rgba(20, 18, 18, 0.45);
}

.yewuPage {

    .leftTitle {
        margin-bottom: var(--p50);
    }

    ul {
        .d-grid;
        gap: var(--p35);
        .grid4;

        .item {
            .img {
                aspect-ratio: 373/500;
                position: relative;
            }

            .content {
                .d-flex;
                .flex-column;
                .jc-fe;
                position: absolute;
                z-index: 1;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                color: rgba(255, 255, 255, 0.8);
                padding: var(--p20);

                h5 {
                    text-align: center;
                    margin-top: auto;
                    margin-bottom: var(--p15);
                    color: #fff;
                }
            }

            .tit1,
            .sub2,
            .sub {
                .line-clamp1;
            }

            .sub2,
            .sub {
                font-size: var(--ft14);
            }

            .sub2 {
                margin-top: var(--p10);
            }

            .tit1 {
                margin-top: var(--p15);
            }

            .sub1 {
                .line-clamp2;
                color: #666666;
                margin-top: var(--p10);
                line-height: 1.6em;
                font-size: var(--ft14);
            }
        }
    }
}

.picTitle {
    align-items: center;
    .flex-center;
    color: var(--gary);
    font-size: var(--ft20);
    writing-mode: vertical-rl;
    font-weight: normal;
    letter-spacing: 6px;
    gap: var(--p10);



}

.picturePage {
    .layui-main {
        .d-grid;
        gap: var(--p90);
    }

    .ItemBox {
        gap: var(--p35);
        .d-flex;

        .al-fs;
    }

    ul {
        .d-grid;
        .grid4;
        gap: var(--p20);

        .item {
            cursor: pointer;
            position: relative;

            .img {
                aspect-ratio: 1/1;
            }

            .content {
                color: #fff;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: var(--p20);
            }
        }
    }

}

.animate__animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.SerivePage {
    .leftTitle {
        margin-bottom: var(--p50);
        ;
    }

    ul {
        .d-grid;
        gap: var(--p20);

        .item {
            gap: var(--p40);
            .d-flex;
            .al-c;
            transition: all 0.5s;

        }

        .img {
            flex-shrink: 0;

            width: 150px;
            aspect-ratio: 373/500;
        }

        .content {
            padding: var(--p20);

        }

        .sub {
            margin-top: var(--p20);
            color: var(--gary);
            line-height: 1.6em;

        }
    }
}

header.index {
    position: fixed !important;
}

.indexMain {
    width: 100vw;
    height: 100vh;
}

.index_swiper {
    --swiper-pagination-bullet-width: 40px;
    --swiper-pagination-bullet-height: 1px;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bottom: 2vh;

    .item {
        position: relative;
    }

    video,
    .img1 {
        width: 100vw;
        object-fit: COVER;
        height: 100vh;
    }

    .content {
        position: absolute;

        left: 50%;
        transform: translateX(-50%);

        bottom: 20vh;
        width: 100%;

        .title {
            font-size: var(--ft32);
            margin-bottom: var(--p15);
            color: rgba(255, 255, 255, 1);

        }

        .sub {
            line-height: 1.6em;
            color: rgba(255, 255, 255, 0.7);
        }

        .sub,
        .title {
            width: 500px;
            max-width: 100%;
            transform: translateY(50px);
            opacity: 0;
            transition: all .6s;
        }
    }

    .ani-slide .content .sub,
    .ani-slide .content .title {
        transform: translateY(0);
        opacity: 1;
    }
}

.language {
    cursor: pointer;
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: car(--ft12);
    margin-left: var(--p30);

    i {
        transition: all 0.3s;
        display: inline-block;
        font-size: var(--ft12);
    }

    &:hover {
        i {
            transform: rotate(-180deg);
        }
    }
}

.logo {
    flex: 1;
}

@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {}

@media only screen and (max-width: 768px) {
    .logo {

        height: 40px;
        flex: unset;
    }

    header .layui-show-xs-block {
        margin-left: auto;
        margin-right: 15px;
    }

    body {
        font-size: 14px;
    }

    .contactMain .listRow {
        flex-direction: column;
    }

    .contactMain .qrcodeList {
        .d-grid;
        .grid3;
    }

    .contactMain .Logo img {
        max-width: 50%;
    }

    .SerivePage ul li {
        flex-direction: column;
    }

    .picturePage ul,
    .yewuPage ul {
        .grid2;
    }

    .picturePage .ItemBox {
        .d-grid;
    }

    .picTitle {
        .jc-fs;
        writing-mode: unset;
    }
}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}