html,
body {
    height: 100%;
    width: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Roboto", "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", BlinkMacSystemFont, -apple-system, "Segoe UI", "Microsoft Yahei", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
}

a {
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
    color: #474157;
}

a:hover,
a:focus {
    color: #474157;
}

hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.1);
}

hr.light {
    border-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 200;
    letter-spacing: 1px;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.navbar-default {
    font-weight: 200;
    letter-spacing: 1px;
}

.navbar-default .navbar-header .navbar-brand {
    font-weight: 200;
    letter-spacing: 1px;
    color: #474157;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color: #474157;
}

.navbar-default .navbar-header .navbar-toggle {
    font-size: 12px;
    color: #474157;
    padding: 8px 10px;
}

.navbar-default .nav > li > a {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    color: #7a798c;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
    color: #474157;
}

.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
    color: #474157 !important;
    background-color: transparent;
}

.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
    background-color: transparent;
}

#mainbody {
    position: relative;
    width: 100%;
    min-height: auto;
    background: #f1f6fd;
    color: #474157;
}

#mainbody .index-text {
    text-align: center;
    padding: 150px 0 50px;
    position: relative;
    /*height: 100vh;*/
}

#mainbody .index-text h1 {
    font-size: 50px;
    font-weight: bold;
    color: #171347
}

#mainbody .index-gallery {
    text-align: center;
    padding: 100px 0 50px;
    position: relative;
}

.banner{ position: relative; width: 100%; overflow: hidden;}
.banner .swiper-slide a{ display: block; padding-bottom: 430px; background-size: cover; background-position: center;}
.banner .bannerNext{background: url(images/bannerright.png) no-repeat 0 0; width: 38px; height: 38px; right: -60px; transition: 0.3s; -webkit-transition: 0.3s; cursor: pointer; background-size: cover; transition: 0.4s;}
.banner .bannerPrev{background: url(images/bannerright.png) no-repeat 0 0; width: 38px; height: 38px; left: -60px; transform: rotate(180deg); -webkit-transform: rotate(180deg); transition: 0.3s; -webkit-transition: 0.3s;cursor: pointer; background-size: cover;}
.banner:hover .bannerNext{ right: 40px;}
.banner:hover .bannerPrev{ left: 40px;}
.banner .btn{ bottom: 34px;}
.banner .btn span{position: relative; width: 12px; height: 12px; background: rgba(255,255,255,0.6); transition: 0.4s; box-sizing: border-box; margin: 0 10px !important; opacity: 1;}
.banner .btn span::before{ content: ""; position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); background: rgba(255,255,255,0); border-radius: 50%;}
.banner .btn span.swiper-pagination-bullet-active{ background: #fff;}
.banner .btn span.swiper-pagination-bullet-active::before{background: rgba(255,255,255,0.3);}

#intro{
    background:#fff url('https://www.51zhdj.cn/html/index/images/special_bg.png') left bottom no-repeat;
    padding:20px 0 120px;
}
#intro .fun_title{display:flex;justify-content: center;align-items: center;margin:50px;}
#intro .fun_title .line{border-bottom:1px solid #ccc;width:300px;}
#intro .fun_title span{font-weight:bold;font-size:50px;color:#cb1c1d;margin:0 20px;}

#intro .funList img{width:60px;height:60px;}
#intro .funList p{text-align: center;}
#intro .funList .icon{margin:0 auto;width:100px;height:100px;text-align: center;border:2px solid #cb1c1d;border-radius: 15px;line-height: 100px;

}

#intro .funList .icon i{font-size:50px;color:#cb1c1d;
    display:block;
    -webkit-transition: -webkit-transform .8s ease-out;
    -moz-transition: -moz-transform .8s ease-out;
    -o-transition: -o-transform .8s ease-out;
    -ms-transition: -ms-transform .8s ease-out;
}
#intro .funList .icon:hover{background:#cb1c1d;
}
#intro .funList .icon:hover i{color:#fff;
    webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

.team .list{margin:0 auto;}
.team .list li { display: inline-block;margin-right: 60px;margin-top: 80px; vertical-align: middle;width:220px;height:294px; background:rgba(255,255,255,1);
    box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05) ;border-radius: 4px ;padding: 0 40px; box-sizing: border-box;}
.team .list li:nth-child(1) { border-top: 6px solid #2eb8e6;}
.team .list li:nth-child(2) { border-top: 6px solid #1dbfa4;}
.team .list li:nth-child(3) { border-top: 6px solid #ffaa33;}
.team .list li:nth-child(4) { border-top: 6px solid #ff6666;}
.team .list li:last-child { margin-right: 0; }
.team .list li p { font-size: 24px; color: #333; line-height: 36px;margin-bottom: 30px;margin-top: 54px; }
.team .list li span { display: inline-block; font-size: 14px; color: #666; line-height: 22px; text-align: justify; }

.quality { padding: 80px 0 0; background: #fff; text-align: center; }
.quality h2 {list-style: none;list-style-type: none;margin:0;padding:0; font-size: 36px; color: #333; line-height: 50px; font-weight: normal;}
.quality .qualityContent {text-align: center;margin-top:80px;padding-bottom: 80px;}
.quality .qualityContent .tabList{list-style: none;list-style-type: none;margin:0;padding:0;width: 304px;cursor: pointer;display: inline-block;}
.quality .qualityContent .tabList li{list-style: none;list-style-type: none;margin:0;padding:0;margin-bottom: 60px;width: 100%;height: 80px;}
.quality .qualityContent .tabList li .redio span {display: block;width:24px;height: 24px;border-radius: 50%;border: 1px solid #ff8313; float: left;margin-top: 8px;box-sizing: border-box;}
.quality .qualityContent .tabList li .redio img {width:24px;height: 24px;float: left;margin-top: 8px;display: none;}
.quality .qualityContent .tabList li .box {text-align: left; float: right;width:270px;}
.quality .qualityContent .tabList li .box h3 {font-size: 24px;color: #333;font-weight:normal;line-height: 36px;margin:0;padding:0;}
.quality .qualityContent .tabList li .box p {font-size: 14px;line-height: 22px;color: #666;}
.quality .qualityContent .tabList li.active .box h3 {color: #ff8313;}
.quality .qualityContent .tabList li.active .redio span {display: none;}
.quality .qualityContent .tabList li.active .redio img {display: block;}
.quality .qualityContent .tabList li:last-child {margin-bottom: 0;text-align: left;padding-left: 34px;height: 24px;}
.quality .qualityContent .tabList li:last-child a {font-size: 16px;color: #ff8313;line-height:24px;}
.quality .qualityContent .rightImg{list-style: none;list-style-type: none;margin:0;padding:0;width:620px;height:460px;overflow: hidden;position: relative;display: inline-block;margin-left: 76px;}
.quality .qualityContent .rightImg li {list-style: none;list-style-type: none;margin:0;padding:0;position: absolute;}
.quality .qualityContent .rightImg img{width:100%;height:100%;}
.quality .list { padding-top: 60px; font-size: 0; line-height: 0;background-color: #fafafa; padding-bottom: 80px;}
.quality .list li { display: inline-block; width: 200px; height: 254px;list-style: none;list-style-type: none;margin:0;padding:0;  margin-right: 67px; vertical-align: middle; }
.quality .list li:last-child { margin-right: 0; }
.quality .list li img { display: block; margin: 0 auto; width: 160px; height: 160px; }
.quality .list li p { padding-bottom: 9px; font-size: 18px; color: #333; line-height: 24px;}
.quality .list li span { display: inline-block; font-size: 14px; color: #666; line-height: 22px; text-align: justify; }

@media (max-height: 500px) {
    #mainbody {
        height: inherit;
    }
}

@media (min-width: 768px) {
    .navbar-default {
        background-color: transparent;
        border-color: transparent;
    }

    #mainbody .index-text {
        text-align: left;
    }
}

@media (max-width: 767px) {

    .navbar-default {
        background-color: #f1f6fd;
        border-color: #f1f6fd;
    }

    .navbar-default .navbar-collapse {
        background: #f1f6fd;
        box-shadow: 5px 9px 5px rgba(0, 0, 0, 0.07);
    }

    #mainbody {
        height: unset;
    }

    #mainbody .index-text {
        padding: 130px 0 0 0;
        height: calc(100vh - 261px);
    }

    #mainbody .index-gallery {
        padding: 30px 0 50px 0;
    }

    #mainbody .index-text h1 {
        font-size: 50px;
        margin-bottom: 20px;
    }
}

footer {
    background-color: #222222;
    padding: 20px 0;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

footer p {
    font-size: 14px;
    margin: 0;
}

.bg-primary {
    background: #fdcc52;
    background: -webkit-linear-gradient(#fdcc52, #fdc539);
    background: linear-gradient(#fdcc52, #fdc539);
}

.btn {
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 300px;
}

.btn-xl {
    margin-top: 20px;
    padding: 10px 45px;
    font-size: 14px;
}