@font-face {
    font-family: Fredoka-Bold;
    src: url('Fredoka-Bold.ttf')
}

@font-face {
    font-family: Poppins-Bold;
    src: url('Poppins-Bold.ttf')
}

@font-face {
    font-family: Poppins-ExtraBold;
    src: url('Poppins-ExtraBold.ttf')
}

* {
    box-sizing: border-box;
    color: #000;
    font-size: .16rem;
}

body, input, h1, h2, h3, h4, h5, h6, p, textarea, table, div, ul, li, select, td, th, em, span, i, button, code {
    margin: 0;
    padding: 0;
    color: inherit;
    line-height: inherit;
    font-family: 'Inter', "microsoft yahei", 'PingFang SC', 'PingFangMedium';
    /* font-size: inherit; */
}

img {
    border: 0;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

ul, li {
    list-style: none;
}

a, p, span, i, em {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
}

pre {
    word-break: break-word;
}

:focus {
    outline: none !important;
    border-color: inherit;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

h3, h4, h5, h6 {
    font-weight: normal;
}

em, i {
    font-style: normal;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] {
    -webkit-appearance: none;
}

input[type="button"] {
    border: none;
}

textarea {
    -webkit-appearance: none;
}

.auto {
    margin: 0 auto;
    max-width: 16rem;
    width: 94%;
}

.auto1720 {
    margin: 0 auto;
    max-width: 17.2rem;
    width: 94%;
}

:hover {
    transition: all .2s;
}

.img_hover_wrap {
    overflow: hidden;
}

.img_hover {
    transition: all .3s;
}

.img_hover:hover {
    transform: scale(1.05, 1.05);
}

.img_traslate {
    transition: all .3s;
}

.img_traslate:hover {
    transform: translateY(-10px);
}

.img_rotate {
    transition: all .3s;
}

.img_rotate:hover {
    transform: rotate(-360deg);
}

.bold {
    font-weight: bold;
}

.normal {
    font-weight: normal !important;
}

.center {
    text-align: center !important;
}

.img {
    width: 100%;
    display: block;
    height: auto;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ele {
    position: relative;
}

.ele:before, .ele:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.ipt {
    display: block;
    border: none;
}

.ipt_button {
    cursor: pointer;
}

.item_scale .icon {
    transition: all .3s;
}

.item_scale:hover .icon {
    transform: scale(1.08, 1.08);
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    /* display: -ms-flexbox; */
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 3;*/
}

.clamp1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.clamp2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.clamp3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body {
    background: #fff;
    overflow-x: hidden;
}

.item {}

.item .imgbox {
    display: block;
    overflow: hidden;
}

.item .img {
    transition: all 1s;
    width: 100%;
    display: block;
}

.item:hover .imgbox .img {
    transform: scale(1.1, 1.1);
}

.zoomimg {
    position: relative;
    overflow: hidden;
    height: 0;
    display: block;
}

.zoomimg .img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.flipx .icon {
    transition: all .3s;
}

.flipx:hover .icon {
    transform: scaleX(-1);
}

.scale .icon {
    transition: all .3s;
}

.scale:hover .icon {
    transform: scale(1.1, 1.1);
}

.underline {
    text-decoration: underline;
}

label {
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

.img_full {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-pack-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-pack-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: pace-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-pack-start {
    justify-content: flex-start;
}

.flex-pack-end {
    justify-content: flex-end;
}

.flex-v {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-w {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
    overflow: hidden;
}

.flex-11 {
    flex: 1;
}

html {
    font-size: 5.2083vw;
}

.header .banner img {
    width: 100%;
    position: relative;
}

.header .banner .logo {
    position: absolute;
    left: 1.13rem;
    top: .59rem;
    height: 1.94rem;
}

.header .banner .logo img {
    height: 100%;
}

.video-box {
    background-color: #161616;
    height: auto;
}

.video-box .video {
    position: relative;
    margin: 0 auto;
    height: 7.06rem;
    width: 14.96rem;
}

.video-box .video .playico {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    cursor: pointer;
}

.vist {
    position: relative;
    background-color: #000;
    /* padding-top: .67rem;
    padding-bottom: 1.26rem;
    background: url(../images/vist.jpg) no-repeat center;
    padding-top: .27rem; */
}

.vist .txt {
    text-align: center;
    margin: 0 auto;
}

.vist .txt .title {
    text-align: center;
    background-color: #E7292E;
    color: #fff;
    font-family: Poppins-ExtraBold;
    font-size: .7rem;
    line-height: .98rem;
    letter-spacing: 0px;
    padding: .7rem 14% 1rem 14%;
}
.vist .txt .title h1{font-size: inherit;}
.vist .txt .nfa{margin-top: -0.47rem;position: relative;}
.vist .txt .nfa img{width: 70%;margin: 0 auto;}
.vist .txt .nfa .nfa-txt{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
.vist .txt h2 {
    text-align: center;
    font-family: Poppins-Bold;
    font-size: .7rem;
    line-height: .82rem;
    letter-spacing: 0px;
    color: #181818;
}

.vist .txt h3 {
    font-family: Fredoka-Bold;
    margin-top: .66rem;
    font-size: .65rem;
    line-height: .69rem;
    letter-spacing: .01rem;
    color: #e7292e;
    text-shadow:
        2px 2px 0 white,
        /* 右下 */
        -2px 2px 0 white,
        /* 左下 */
        2px -2px 0 white,
        /* 右上 */
        -2px -2px 0 white;
}

.hot {
    background-color: #000;
    padding: 30px 0;
}

.indexA {
    background: url(../images/bg_07.jpg) no-repeat center;
}

.indexA .box {
    margin: 0 auto;
    width: 69%;
    position: relative
}

.indexA .box .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.indexA .box .item {
    position: relative;
    z-index: 1;
    padding: 5% 7%;
}

.indexA .box .item .img1 {
    width: 85%;
    margin: 0 auto;
}

.inquiry {
    background-color: #181818;
    padding: .9rem 0 .96rem 0;
}

.form {
    background: linear-gradient(to right, #F7E4E6, #fff);
    ;
    margin: 0 auto;
    padding: .77rem 10%;
    border-radius: 20px;
    width: 71%;
}

.form h2 {
    text-align: center;
    height: .56rem;
    font-family: Poppins-ExtraBold;
    font-size: .66rem;
    line-height: .52rem;
    letter-spacing: 3px;
    color: #000000;
    margin-bottom: .5rem;
}

.form .row {
    display: flex;
    justify-content: space-between;
}

.form .item {
    width: 49%;
    margin-bottom: 2%;
}

.form .ipt {
    font-size: 0.14rem;
    color: #000;
    width: 100%;
    background: transparent;
    border-radius: .04rem;
    border: solid 1px #929292;
}

.form .ipt-txt {
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 .2rem;
}

.form .con {
    height: 2.05rem;
    line-height: 1.4;
    padding: .16rem .2rem;
    resize: none;
}

.form .submit {
    width: 1.96rem;
    cursor: pointer;
    font-family: Barlow-SemiBold;
    font-size: .22rem;
    color: #fff;
    height: .64rem;
    background-color: #db3439;
    border-radius: 31px;
    background-color: #DB3539;
    margin-top: 0.25rem;
    border: none;
}

.form .submit:hover {
    background-color: #F60013;
}

.contact {
    height: 1.19rem;
    background-color: #e7292e;
}

.contact .c-box {
    width: 71%;
    display: flex;
    justify-content: space-between;
    height: 1.19rem;
    line-height: 1.19rem;
    ;
    margin: 0 auto;
    font-size: .18rem;
    color: #fff;
    font-family: Barlow-SemiBold;
}

.contact .c-box .ico {
    padding-left: 44px;
}

.contact .c-box .ico p {
    font-family: Barlow-SemiBold;
}

.contact .c-box .whatsapp {
    background: url(../images/whatsapp.png) left no-repeat;
}

.contact .c-box .email {
    background: url(../images/email.png) left no-repeat;
}

.contact .c-box .website {
    background: url(../images/website.png) left no-repeat;
}

@media screen and (max-width:1199px) {
    .auto {
        width: 10.5rem;
    }

    html {
        font-size: 5.5rem !important;
    }

    .header .banner .logo {
        height: 1rem;
        left: 0.65rem;
    }

    .video-box .video {
        width: 100%;
        height: 6.06rem;
    }

    .vist .txt {
        width: 100%;
    }
    .vist .txt .title{font-size: 0.6rem;line-height: 0.8rem;padding: .7rem 14% .8rem 14%;;}
    .vist .txt h2{font-size: 0.5rem;}
    .vist .txt h3{font-size: 0.4rem;}
    .form h2 {
        font-size: .36rem;
    }
    .vist .txt .nfa {
        margin-top: -0.35rem;
    }
    .contact .c-box {
        width: 100%;
    }
}


@media screen and (max-width:991px) {
    .auto {
        padding: 0 3%;
        width: 100%;
    }

    html {
        font-size: 6.2rem !important;
    }

    .header .banner .logo {
        height: 0.6rem;
        left: 0.35rem;
    }

    .video-box .video {
        width: 100%;
        height: 6.06rem;
    }

    .vist .txt {
        width: 100%;
    }

    .vist .txt .title {
        font-size: .5rem;
        line-height: 1.3;
    }
    .vist .txt .nfa img{width: 100%;}
    .vist .txt h2{font-size: 0.5rem;}
    .vist .txt h3{margin-top: 0;font-size: 0.4rem}
    .contact {
        height: auto;
    }

    .contact .c-box {
        flex-wrap: wrap;
        height: auto;
        line-height: 3;
        padding: 2%;
    }

    .contact .c-box .ico {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .auto {
        padding: 0 4%;
        width: 100%;
    }

    html {
        font-size: 6.2rem !important;
    }

    .header .banner .logo {
        height: 0.6rem;
        left: 0.35rem;
        top: 0.3rem;
    }

    .video-box .video {
        width: 100%;
        height: 5.06rem;
    }

    .vist .txt .title {
        font-size: .4rem;
        line-height: 1.2;
    }

    .vist .txt h2 {
        font-size: 0.4rem;
        line-height: 1;
    }

    .vist .txt h3 {
        font-size: 0.35rem;
    }

    .form {
        width: 91%;
    }

}

@media screen and (max-width:481px) {
    .video-box .video{height: 3rem;}
    .vist .txt .title {
        font-size: 0.24rem;
        padding: .2rem 14% .4rem 14%;
    }
    .vist .txt h2 {
        font-size: 0.25rem;
    }

    .vist .txt h3 {
        font-size: 0.2rem;
    }

    .indexA .box {
        width: 100%;
    }

    .form {
        padding: .37rem 10%;
    }

    .form h2 {
        height: .66rem;
    }

    .form .row {
        flex-wrap: wrap;
    }

    .form .item {
        width: 100%;
    }

    .inquiry {
        padding: .2rem 0;
    }
}