* {

    box-sizing: border-box;

}





/*@font-face {

	font-family: 'lantingxihei';

	src: url(../fonts/lantingxihei_gbk.TTF);

}*/



body {

    font-family: sans-serif, Helvetica, Arial, "Microsoft YaHei";

    font-size: 14px;

    color: #373737;

    overflow-x: hidden;

}



section {

    display: block;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: normal;

}



a {

    transition: .5s;

    -webkit-tap-highlight-color: transparent;

}



a:focus,

a:visited,

a:hover {

    text-decoration: none;

    outline: none;

    outline: 0;

}



.container {

    max-width: 1374px;

    margin: 0 auto;

}



body {

    position: relative

}



body:before {

    /*content: "";

	width: 100%;

	height: 100%;

	background: #eee;

	position: absolute;

	z-index: 10000;

	animation: intoPage 1.0s cubic-bezier(1, 0, 0, 1) 0.1s;

	animation-fill-mode: forwards;*/

}



#all_container {

    padding-top: 80px;

}





/*进场动画*/



@keyframes intoPage {

    0% {

        left: 0;

    }

    100% {

        left: 100%;

    }

}



.index_head {

    position: fixed;

    left: 0;

    top: 0;

    z-index: 3;

    width: 100%;

    height: 80px;

    line-height: 80px;

    padding-top: 25px;

    background: #fff;

    transition: .5s;

}



.index_head.fixed {

    animation: menu-scroll 0.5s ease 0s forwards;

    z-index: 10;

    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

}





/*滚动时导航固定动画*/



@keyframes menu-scroll {

    0% {

        top: -80px;

    }

    100% {

        top: 0;

    }

}



.logo {

    float: left;

}



.logo a {

    display: block;

    width: 113px;

    height: 50px;

    background: url(../images/logo.png) no-repeat;

}



.logo a:hover {

    background: url(../images/logo_h.png) no-repeat;

}



.head_r {

    width: 260px;

    float: right;

}



.head_r .link_a {

    display: inline-block;

    float: left;

    font-size: 16px;

    color: #373737;

    line-height: 34px;

}



.head_r .link_a:after {

    content: "";

    display: block;

    width: 0%;

    height: 1px;

    background: #373737;

    transition: .5s;

}



.head_r .link_a:hover::after {

    width: 100%;

}



.contact-box {

    float: right;

    position: relative;

    width: 125px;

}



.contact_a {

    display: block;

    height: 35px;

    line-height: 35px;

    text-align: center;

    color: #373737;

    font-size: 14px;

    border: 1px #333 solid;

    letter-spacing: 0.5px;

}





/*.contact_a:hover {

	background: #373737;

	color: #fff;

}*/



.contact-box section {

    position: absolute;

    width: 125px;

    border-left: 1px #333 solid;

    border-right: 1px #333 solid;

    padding: 0 14px;

    background: #fff;

    top: 33px;

    left: 0;

    transition: .5s;

    height: 0;

    overflow: hidden;

}



.contact-box:hover section {

    height: 153px;

    padding: 10px 14px 15px;

    border-bottom: 1px #333 solid;

}



.qq_link {

    display: block;

    height: 24px;

    line-height: 24px;

    font-size: 16px;

    color: #373737;

    background: url(../images/qq_icon.png) no-repeat left;

    padding-left: 22px;

    margin-bottom: 10px;

}





/*banner*/



.fix-banner {

    position: fixed;

    z-index: 2;

    width: 100%;

}





/*.banner{position:fixed;left:0;width:100%;top:70px;z-index: 1}*/



.banner li {

    position: relative;

    text-align: center;

    overflow: hidden

}



.banner li a {

    display: block;

}





/*.banner li a>img{width:100%;}*/



.banner-text {

    position: absolute;

    width: 100%;

    text-align: center;

    top: 10%;

}



.banner-text h1 {

    font-weight: normal;

    color: #000;

    font-size: 45px;

    line-height: 1.5;

}



.banner-text h6 {

    font-weight: normal;

    color: #5f5852;

    font-size: 18px;

    line-height: 1.5;

}



.banner-text.style2 h6 {

    color: #000;

}



.banner-text.style3 h1 {

    color: #bb1500;

}



.banner-text.style3 h6 {

    color: #ac946b;

}



.banner-text.style4 h1 {

    color: #fff;

}



.banner-text.style4 h6 {

    color: #fff;

}



.banner-text.style5 h1 {

    color: #015092;

}



.banner-text.style5 h6 {

    color: #015092;

}





/*point*/



.swiper-pagination-bullet {

    background: none;

    border: 1px #4a4a4a solid;

    opacity: 1;

}



.swiper-pagination-bullet-active {

    background: #4a4a4a;

}



.swiper-container-horizontal>.swiper-pagination-bullets,

.swiper-pagination-custom,

.swiper-pagination-fraction {

    bottom: 30px;

}



.null {

    height: 700px;

}



.bottom_area {

    position: relative;

    z-index: 3;

    background: #fff;

}



.index_body .bottom_area {

    padding-top: 3%;

}



.company_logo {

    background: #f0f0f0;

    text-align: center;

    padding: 0;

}



.flex_logos {

    display: flex;

    flex-wrap: wrap;

    justify-content: stretch;

}



.company_logo li {

    background: #f0f0f0;

    border: 1px #fff solid;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 25%;

    padding: 2% 0

}



.company_logo li img {

    max-width: 240px;

}



.company_logo h6 {

    font-size: 20px;

    text-transform: uppercase;

    letter-spacing: 2px;

    line-height: 1.5;

    margin-bottom: 4%;

}



.company_logo li {

    list-style: none;

}



.banner {

    /*background: #ececec;*/

}



.banner img {

    /*width:100%;*/

}



.main_banner {

    padding-top: 80px;

    text-align: center;

    width: 586px;

    height: 586px;

    margin: 0 auto;

    background: url(../images/banner_round2.png) no-repeat;

}



.main_banner h3 span {

    font-size: 28px;

    line-height: 1.5;

    position: relative;

    overflow: hidden;

    display: inline-block;

    color: #373737;

}



.main_banner h3 span::after {

    content: "";

    display: block;

    width: 100%;

    height: 100%;

    background: #000;

    position: absolute;

    left: 0;

    top: 0;

    animation: efc-bgColour01 1.0s ease 0.2s;

    animation-fill-mode: forwards;

}





/*.main_banner h3.first_h span::after{

	animation: efc-bgColour01 1.0s ease 0.2s;

	animation-fill-mode: forwards;

}*/



.main_banner h3.last_h span::after {

    animation-delay: .4s;

}



.title_box {

    padding: 0 20px;

    text-align: center;

    color: #777b80;

    font-size: 24px;

    line-height: 2;

    margin: 90px 0;

}





/*公用遮罩动画*/



.efc-bgColour01 {

    overflow: hidden;

    display: inline-block;

    position: relative

}



.efc-bgColour01::after {

    animation: efc-bgColour01 1.0s ease 0.2s forwards;

}



@-webkit-keyframes efc-bgColour01 {

    0% {

        width: 0;

    }

    60% {

        width: 100%;

    }

    61% {

        left: 0%;

    }

    100% {

        left: 100%;

    }

}



.main_banner h1 {

    font-size: 230px;

    font-weight: bold;

    line-height: 1;

    margin: 5% 0 8%;

}





/*选项卡*/



.section_nav {

    padding: 5% 0;

}



.section_nav h4 {

    float: left;

    color: #373737;

    font-size: 16px;

    background: url(../images/nav_line.png) no-repeat left center;

    padding-left: 40px;

    text-transform: uppercase;

}



.section_nav ul {}



.section_nav li {}



.section_nav li a {

    font-size: 16px;

    color: #373737;

    position: relative;

    display: inline-block;

    letter-spacing: 2px;

}



.section_nav li a:after {

    content: "";

    display: block;

    width: 0%;

    height: 1px;

    background: #373737;

    transition: .5s;

}



.section_nav li a:hover::after {

    width: 100%;

}



.case_content li {

    margin-bottom: 20px;

}



.case_content li a {

    text-align: center;

    display: block;

    overflow: hidden;

    position: relative;

}



.case_content li img {

    /*width: 100%;*/

    background-color: #f0f0f0;

}



.case_content li img,

.case_content li section {

    transition: .4s;

}



.case_content li section {

    background: #fff;

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 2;

    top: 0;

    left: 0;

    transform: translateY(20px);

    opacity: 0;

}



.case_content li section h3 {

    letter-spacing: 2px;

    color: #373737;

    font-size: 16px;

    position: absolute;

    width: 100%;

    left: 0;

    top: 40%;

    line-height: 30px;

}



.case_content li a:hover img {

    transform: translateY(20px);

    opacity: 0;

}



.case_content li a:hover section {

    transform: translateY(0);

    opacity: 1;

}





/*服务*/



.service_box {

    padding-left: 3%;

}



.service_box h3 {

    color: #777b80;

    font-size: 20px;

}



.service_box p {

    margin: 50px 0 40px;

    color: #88898b;

    line-height: 2;

}



.service_box li {

    color: #88898b;

    margin: 5px 0;

}



.service_content {

    padding-bottom: 80px;

    padding-top: 10%;

}





/*footer*/



footer.container {

    padding-top: 50px;

    padding-bottom: 50px;

}



footer h3 {

    float: left;

    font-size: 14px;

    color: #777b80;

}



footer p {

    float: right;

    color: #777b80;

}





/****Loading************/



#loading {

    background-color: #fff;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: 99;

    margin-top: 0px;

    top: 0px;

}



#loading-center {

    width: 100%;

    height: 100%;

    position: relative;

}



#loading-center-absolute {

    position: absolute;

    left: 50%;

    top: 50%;

    height: 60px;

    width: 60px;

    margin-top: -30px;

    margin-left: -30px;

    -webkit-animation: loading-center-absolute 1s infinite;

    animation: loading-center-absolute 1s infinite;

}



.object {

    width: 20px;

    height: 20px;

    background-color: #373737;

    float: left;

    -moz-border-radius: 50% 50% 50% 50%;

    -webkit-border-radius: 50% 50% 50% 50%;

    border-radius: 50% 50% 50% 50%;

    margin-right: 20px;

    margin-bottom: 20px;

}



.object:nth-child(2n+0) {

    margin-right: 0px;

}



#object_one {

    -webkit-animation: object_one 1s infinite;

    animation: object_one 1s infinite;

}



#object_two {

    -webkit-animation: object_two 1s infinite;

    animation: object_two 1s infinite;

}



#object_three {

    -webkit-animation: object_three 1s infinite;

    animation: object_three 1s infinite;

}



#object_four {

    -webkit-animation: object_four 1s infinite;

    animation: object_four 1s infinite;

}



@-webkit-keyframes loading-center-absolute {

    100% {

        -ms-transform: rotate(360deg);

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



@keyframes loading-center-absolute {

    100% {

        -ms-transform: rotate(360deg);

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



@-webkit-keyframes object_one {

    50% {

        -ms-transform: translate(20px, 20px);

        -webkit-transform: translate(20px, 20px);

        transform: translate(20px, 20px);

    }

}



@keyframes object_one {

    50% {

        -ms-transform: translate(20px, 20px);

        -webkit-transform: translate(20px, 20px);

        transform: translate(20px, 20px);

    }

}



@-webkit-keyframes object_two {

    50% {

        -ms-transform: translate(-20px, 20px);

        -webkit-transform: translate(-20px, 20px);

        transform: translate(-20px, 20px);

    }

}



@keyframes object_two {

    50% {

        -ms-transform: translate(-20px, 20px);

        -webkit-transform: translate(-20px, 20px);

        transform: translate(-20px, 20px);

    }

}



@-webkit-keyframes object_three {

    50% {

        -ms-transform: translate(20px, -20px);

        -webkit-transform: translate(20px, -20px);

        transform: translate(20px, -20px);

    }

}



@keyframes object_three {

    50% {

        -ms-transform: translate(20px, -20px);

        -webkit-transform: translate(20px, -20px);

        transform: translate(20px, -20px);

    }

}



@-webkit-keyframes object_four {

    50% {

        -ms-transform: translate(-20px, -20px);

        -webkit-transform: translate(-20px, -20px);

        transform: translate(-20px, -20px);

    }

}



@keyframes object_four {

    50% {

        -ms-transform: translate(-20px, -20px);

        -webkit-transform: translate(-20px, -20px);

        transform: translate(-20px, -20px);

    }

}





/**移动端*/



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

    .banner img {

        width: 100%;

    }

}



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

    body {

        overflow-x: hidden;

    }

    .bottom_area .col-sm-offset-2 {

        margin-left: 0;

    }

    .case_content li img {

        width: 100%;

    }

    .service_content {

        width: 100%;

    }

    .service_box p {

        margin-top: 20px;

    }

}



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

    /*.banner{height:550px;padding-top:5%;}*/

    .main_banner {

        background-size: 100%;

        width: 500px;

        height: 500px;

        padding-top: 5%;

    }

    .main_banner h1 img {

        max-width: 140px

    }

    .company_logo {

        padding: 6% 0;

    }

    .company_logo h6 {

        font-size: 16px;

    }

    .company_logo li {

        width: 50%;

        padding: 5% 0;

        border: none;

    }

    .company_logo li img {

        max-width: 80px;

    }

    .title_box {

        font-size: 18px;

        margin: 10% 0;

    }

}



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

    /*.banner{height:400px;}*/

    .main_banner {

        width: 350px;

        height: 350px;

    }

    .main_banner h1 {

        line-height: .5;

    }

    .main_banner h3 span {

        font-size: 20px;

    }

    .head_r {

        width: auto;

    }

    .head_r .link_a {

        display: none;

    }

}



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

    /*.banner{height:300px;}*/

    .main_banner {

        width: 250px;

        height: 250px;

    }

    .main_banner h1 {

        font-size: 0;

    }

    .main_banner h1 img {

        max-width: 100px

    }

    .main_banner h3 span {

        font-size: 14px;

    }

    .section_nav li a,

    .section_nav h4 {

        font-size: 14px;

    }

    .logo img {

        max-height: 25px;

    }

    .contact_a {

        height: 30px;

        line-height: 30px;

    }

    .tab-nav {

        display: none;

    }

    .service_content {

        padding-top: 0;

        padding-bottom: 0

    }

    .service_box p {

        margin: 0;

    }

    .service_box {

        margin-bottom: 20px

    }

    footer.container {

        padding-top: 20px;

        padding-bottom: 20px;

    }

    .swiper-container-horizontal>.swiper-pagination-bullets,

    .swiper-pagination-custom,

    .swiper-pagination-fraction {

        bottom: 10px;

    }

}