@charset "utf-8";
* {
    padding: 0;
    margin: 0;
    transition: all .3s;
    box-sizing: border-box;
}
li,
ol,
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
    vertical-align: top;
}
input,
select,
button,
textarea {
    border: none;
    border-radius: 0;
    font-family: Arial,Microsoft YaHei,Helvetica;
    font-size: 1.4rem;
}
input,
textarea {
    outline: 0;
    -webkit-appearance: none;
}
.fr{float:right;}
.fl{float:left;}
.clearfix:after{content: "";display: table;clear: both;}
a{-webkit-tap-highlight-color:rgba(255,255,255,0);color:#414141;}
.xs-visible{display: none;}
.xs-hidden{}
/*@font-face {
    font-family: 'FZMWFont';
    src: url('../font/FZMWFont.ttf');
}
@font-face {
    font-family: 'sthupo';
    src: url('../font/sthupo.ttf');
}
@font-face {
    font-family: 'REGULAR';
    src: url('../font/REGULAR.ttf');
}*/
@font-face {
  font-family: 'REGULAR';
  src: url('../font/REGULAR.eot');
  src:
    url('../font/REGULAR.eot?#font-spider') format('embedded-opentype'),
    url('../font/REGULAR.woff') format('woff'),
    url('../font/REGULAR.ttf') format('truetype'),
    url('../font/REGULAR.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
    font-size: 62.5%;
    font-family:  Arial,Microsoft YaHei,Helvetica;
}
body {
    overflow-x: hidden;
    font-size: 1.6rem;
    color: #282828;
    font-family: Arial,Microsoft YaHei,Helvetica;
    margin:0 auto;
}
.wrap{max-width: 1150px;position: relative;margin:0 auto;}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}
.hide{display: none!important;}
.xs-visible{display: none;}
.xs-hidden{}
::-webkit-scrollbar {
    width: 8px;
    height: 40px; 
}
::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.5);
}
@keyframes move {
     0%{ 
      opacity:  0;
      transform: translateY(-100%);  
    }
 
    
    100%  {
      opacity:  1;
      transform: translateY(0);  
    }
}
@-webkit-keyframes move {
    0%{ 
      opacity:  0;
      transform: translateY(-100%);  
    }
 
    
    100%  {
      opacity:  1;
      transform: translateY(0);  
    }
}

header{position: absolute;top: 0;left:0;width: 100%;z-index: 2;padding:15px 0;}
header .wrap{display: flex;justify-content: space-between;align-items: flex-end;}
header .nav{text-align: right;}
header .wrap li:hover a,header .wrap .cur a{color:#000000;}
header .wrap li:hover ,header .wrap .cur {background: #fff;}
header .index li:hover a,header .index .wrap .cur a{color:#fff;}
header .index li:hover ,header .index .wrap .cur {background: #000000;}
header .nav a{color:#fff;display: inline-block;padding:5px 10px;}
header .logo{position: relative;-webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;width: 230px;}
.show .pic{display: none;}
.active .show .pic{display:block;}
.active .show .front,.active .show .back{display:none;}
header .logo .front{
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transform: rotateX(0deg) rotateY(0deg);
    -o-transform-style: preserve-3d;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-transform: perspective(600px) rotateY(0deg);
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    position: relative;
}
header .logo .back{
    -webkit-transform: rotateX(0deg) rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transform: rotateX(0deg) rotateY(-180deg);
    -o-transform-style: preserve-3d;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-transform: perspective(600px) rotateY(-180deg);
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    position: absolute;top:0;left:0;
}
header .logo:hover .front{ -webkit-transform: rotateX(0deg) rotateY(180deg);
    -ms-transform: perspective(600px) rotateY(180deg)!important;
    -webkit-transform: rotateX(0deg) rotateY(180deg)!important;
    -moz-transform: rotateX(0deg) rotateY(180deg)!important;
    -o-transform: rotateX(0deg) rotateY(180deg)!important;
}
header .logo:hover .back{ -webkit-transform: rotateX(0deg) rotateY(-360deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform: perspective(600px) rotateY(0deg)!important;
    -webkit-transform: rotateX(0deg) rotateY(0deg)!important;
    -moz-transform: rotateX(0deg) rotateY(0deg)!important;
    -o-transform: rotateX(0deg) rotateY(0deg)!important;
}
header .wrap ul{margin-top: 5px;}
header .wrap ul li{display: inline-block;margin-left: 50px;font-size: 1.7rem;}
header.active{position: fixed;padding:0;}
header.active .email{display: none;}
header.active .wrap{align-items: center;}
header.active{animation: move .3s ease-out;background:rgba(255,255,255,0.9);box-shadow: 0 1px 3px rgba(0,0,0,0.11);}
header.active .nav a{color:#101010;}
/*header.active .logo img{background:#e0689f;}*/
header.active .wrap ul{margin-top: 0;}
header.active .wrap ul li{margin-left: 0;padding:25px;transition: background .3s;}
header.active .wrap ul li:hover{background: #101010;}
header.active .wrap ul li:hover a{color:#fff;}

.banner .swiper-container-horizontal > .swiper-pagination-bullets{}
.banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin:0 6px;}
.banner .swiper-pagination-bullet{width: 11px;height:11px;background: #fff;opacity: 1;}
.banner .swiper-pagination-bullet-active{background: #aaa;}
.banner .swiper-slide .txt{position: absolute;top:35%;color:#fff;width: 90%;left: 5%;font-size: 4rem;text-align: center;transform: translateY(-50%);}
.banner .icon{width:60px; height: 60px;fill:#fefefe;position: absolute;bottom: 15%;left: 50%;transform: translateX(-50%);z-index: 2;border-radius: 30px;padding:8px 6px 6px ;background: #282828;cursor:pointer;}

.call{text-align:center;margin:70px 0;}
.call p{color:#414141;font-size: 2.5rem;}
a.link{color:#fefefe;font-size: 1.6rem;background: #e60011;display: table;margin:20px auto;padding:10px 20px;}
a.link:hover{padding:10px 30px;background: #000000;color:#fff;}

.service>h3{font-size: 3rem;text-align: center;border-bottom: 1px solid #9fa0a0;padding-bottom: 40px;}
.service ul{margin:80px auto 20px;display: flex;flex-wrap: wrap;}
.service ul li{width: 30%;margin-bottom: 30px;padding-left: 50px;background-repeat: no-repeat;margin-left: 5%;}
.service ul li:nth-child(3n-2){margin-left: 0;}
.service ul li>p{color:#282828;font-size: 2rem;}
.service ul li>div{margin:15px 0;}
.service ul li>a{color:#9fa0a0;}

.project>h3{font-size: 3rem;text-align: center;border-bottom: 1px solid #9fa0a0;padding: 40px 0;border-top: 1px solid #9fa0a0;margin-top: 80px;}
.project>p{text-align: center;margin:20px 0;}
.project .list{display: flex;flex-wrap: wrap;}
.project .list .item .over{position: absolute;top: 0;width: 100%;height:100%;background: transparent;}
.project .list .item:nth-child(even) .over{bottom: 0;top:initial;}

.project .list .item img,.project .list .item div,.project .list .item .over {-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
   }
.project .list .item{width: 50%;position: relative;overflow:hidden;opacity: 0;}
.project .list .item div{position: absolute;bottom: -30%;height: 30%;background: #101010;width: 100%;text-align: center;display: flex;flex-direction: column;justify-content: center;}
.project .list .item:nth-child(even) div{top: -30%;}
.project .list .item:hover img{transform: translateY(-30%);}
.project .list .item:nth-child(even):hover img{transform: translateY(30%);}
.project .list .item:hover div{bottom: 0;}
.project .list .item:nth-child(even):hover div{top: 0;}
.project .list .item:hover .over{background:rgba(0,0,0,0.5);top:-30%; }
.project .list .item:nth-child(even):hover .over{bottom:-30%;top:initial; }
.project .list .item div p{margin-bottom: 5px;display: block;font-weight: 600;}
.project .list .item div span{font-size: 1.3rem;}
.project .list .item div p:hover{color: #fefefe;}

.project .list .item .location{position: absolute;top:35%;left:50%;transform: translate(-50%,-50%);width: 55px;height:55px;border: 1px solid #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;opacity: 0;}
.project .list .item:nth-child(even) .location{top:65%;}
.project .list .item .location i{color:#fff;}
.project .list .item:hover .location {opacity: 1;}

footer{margin-top: 50px;background: #101010;padding-top:50px;}
footer .wrap{display: flex;justify-content: space-between;margin-bottom: 40px;}
footer .wrap >div{width: 22%;color:#fff;padding-top: 10px;padding-bottom: 10px;}
footer .wrap >div a{color:#fff;display: table;margin-bottom: 15px;font-size: 1.5rem;transition: color .2s ease-in-out;}
footer .wrap >div a:nth-child(1){font-size: 1.8rem;}
footer .wrap >div:not(:nth-child(1)){padding-left: 20px;border-left: 1px solid #fff;}
footer .wrap >div:nth-child(1) p{font-size: 1.8rem;margin-top: 15px;}
footer .wrap >div:nth-child(1) img{max-width: 170px;}
footer .wrap >div:nth-child(2) a{margin-right: 5px;display: inline-block;width: 40px;height: 40px;border-radius: 50%;transition:all .3s;}
footer .wrap >div:nth-child(2) a:nth-child(1){background:url(../images/in.png) no-repeat center center;}
footer .wrap >div:nth-child(2) a:nth-child(2){background:url(../images/facebook.png) no-repeat center center;}
footer .wrap >div:nth-child(2) a:nth-child(3){background:url(../images/twitter.png) no-repeat center center;}
footer .wrap >div:nth-child(2) a:hover{background-color:#9fa0a0;}
footer .wrap >div:nth-child(3) a:not(:nth-child(1)):hover{color:#414141;}
footer .icp{background: #000000;text-align: center;color:#fff;padding:15px 0;font-size: 1.5rem;}

.up svg{fill:#fff;background: #282828;width:45px;border-radius: 5px;padding:5px;position: fixed;bottom: 15%;right: 5%;z-index: 10;cursor: pointer;opacity: 0;visibility: hidden;}
.up.show svg{visibility: visible;opacity: 1;}

.portfolio .wrap {text-align: center;margin-bottom: 70px;}
.portfolio .wrap h3{font-size: 3rem;text-align: center;border-bottom: 1px solid #9fa0a0;padding-bottom: 40px;margin-top: 60px;margin-bottom: 40px;}
.portfolio .wrap p{line-height: 1.6;}

.info .category{padding:30px;border-top: 1px solid #9fa0a0;border-bottom: 1px solid #9fa0a0;margin:50px 0;text-align: center;}
.info .category .title{margin-bottom: 30px;}

.album{text-align: center;}
.album img{margin-bottom: 30px;}
.page{padding-top: 30px;border-top:1px solid #9fa0a0;display: flex;justify-content: space-between;align-items: center;}

.service .wrap>h3{font-size: 3rem;text-align: center;margin-top: 50px;padding-bottom: 30px;border-bottom: 1px solid #9fa0a0;}
.service .wrap .s-intro{margin:30px 0 50px;text-align: center;line-height: 1.6;}
.service .s-list{border-bottom:1px solid #9fa0a0;}
.service .s-list .item{display: flex;justify-content: space-between;padding-top: 30px;border-top:1px solid #ccc;margin-bottom: 30px;opacity: 0;}
.service .s-list .item img{width: 35%;margin-right: 20px;}
.service .s-list .item:nth-child(even){flex-direction: row-reverse;}
.service .s-list .item:nth-child(even) img{margin-right: 0;margin-left: 20px;}
.service .s-list .item h3{background-repeat: no-repeat;padding:15px 0 15px 45px;color:#282828;background-position: left 50%;}
.service .s-list .item:nth-child(9) h3{padding-left: 30px;background-position: left 5px center;}
.service .s-list .item div{line-height: 1.6;}

.contact .wrap .map{display: flex;flex-wrap: wrap;}
.contact .wrap > img{display: table;margin:20px auto;}
.contact .wrap>h3{font-size: 3rem;text-align: center;margin-top: 50px;padding-bottom: 30px;border-bottom: 1px solid #9fa0a0;}
.contact .m-item>div:nth-child(2){width: 70%;height: 300px;border:3px solid #ccc;}
.contact .m-item {width:32%;margin-left:2%;display: flex;justify-content:space-between;margin-top: 30px;border-bottom: 1px solid #9fa0a0;line-height: 1.8;padding-bottom: 30px;}
.contact .m-item:nth-child(3n-2){margin-left: 0;}

.about{margin: 0 10%;text-align: left;}
.about .item{border-bottom: 1px solid  #b3b3b3;margin-bottom: 50px;padding-bottom: 30px;}
.about .item >i{font-size: 65px;color: #101010;text-align: center;display: flex;margin:0 auto;width: 100px;height: 100px;justify-content: center;align-items: center;border-radius: 50%;}
.about .item >span{display: table;margin:5px auto;position: relative;font-weight: 600;color:#101010;margin-top: 15px;font-size: 2rem;}
.about .item >span:after{content:"";height: 1px;width: 40px;background-color: #b3b3b3;bottom: -10px;left:50%;transform: translateX(-50%);position: absolute;}
.about .item >div{margin-top:30px;line-height:1.8;}
.about .item >i:hover{color:#fff;background-color:#101010;}

.big{position: relative;}
.big p{position: absolute;left:50%;top:50%;width:40%;transform: translate(-50%,-50%);text-align: center;color: #fefefe;font-size: 2.5rem;}

#site-navigation {
    margin-left: auto;
    position: fixed;
    top:20px;
    right:20px;
    z-index: 11;
}

#site-navigation .menu-toggle {
    cursor: pointer;
    width: 40px;
    z-index: 120;
    position: relative
}

#site-navigation .menu-toggle span {
    transition: all 300ms ease-in-out;
    width: 37px;
    height: 3px;
    display: block;
    margin-bottom: 9px;
    background: #e0689f;
}

#site-navigation .menu-toggle div {
    font-weight: bold;
    font-size: 14px;
    color: #e0689f;
    margin-top: 10px
}
.m #site-navigation .menu-toggle span{background: #282828;}
.m #site-navigation .menu-toggle div{color: #282828;}
#site-navigation .menu-toggle.active span:first-of-type {
    transform: translate(0, 12px) rotate(45deg)
}

#site-navigation .menu-toggle.active span:nth-child(2) {
    opacity: 0
}

#site-navigation .menu-toggle.active span:last-of-type {
    transform: translate(0, -12px) rotate(-45deg)
}

#site-navigation .menu-main_menu-container {
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
    position: fixed;
    background: #bfa7b2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    transform: scale(0.9)
}

#site-navigation .menu-main_menu-container.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1)
}

#site-navigation .menu-main_menu-container ul {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    margin: 0
}

#site-navigation .menu-main_menu-container ul li {
    width: 100%;
    display: block;
    text-align: center
}

#site-navigation .menu-main_menu-container ul li a {
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 30px;
    line-height: 60px;
    text-transform: uppercase
}
#site-navigation .menu-main_menu-container ul li.active a{
    color:#e0689f
}

#site-navigation .menu-main_menu-container ul li a:hover {
    color: #eb2961;
    text-decoration: none;
    font-weight: 900
}
#site-navigation .menu-main_menu-container ul li div a{display: block;font-size: 2.1rem;line-height: 50px;}

@media screen and (max-width: 768px){
    .xs-visible{display: block;}
    header .nav{display: none;}
    header{position: static!important;}
    header .logo{width: 150px;margin-left: 15px;}
    /*header .logo img{background-color: #e0689f;}*/
    .banner .icon{display: none;}
    .banner .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 5%;}
    .banner .swiper-pagination-bullet{width: 8px;height: 8px;}
    header.active{animation: none;background: none;padding:15px 0;}
    .banner .swiper-slide .txt{font-size: 2rem;width:100%;top:45%;left:0;}

    .call p{font-size: 1.4rem;}
    .call{margin:30px 15px;}
    a.link{font-size: 1.4rem;padding: 8px 15px;}
    a.link:hover{padding: 8px 20px;}

    .service>h3{font-size: 2.4rem;padding-bottom: 15px;}
    .service ul{margin-top: 30px;}
    .service ul li{width: 96%;padding-left:50px;margin:0 3% 30px 6%;}
    .service ul li>div{margin: 10px 0;font-size: 1.4rem;}
    .service ul li>p{font-size: 1.8rem;}
    .service ul li>a{font-size: 1.5rem;}

    .up svg{width:32px;right:3%;}

    .project>h3{font-size: 2.4rem;padding: 15px 0;margin-top: 40px;}
    .project>p{margin:20px 15px;font-size: 1.4rem;}
    .project .list .item{width:100%;margin-bottom: 20px;}

    footer .wrap{flex-wrap: wrap;}
    footer .wrap >div{width: 50%;}
    footer .wrap >div:nth-child(1){padding-left: 20px;}
    footer .wrap >div:nth-child(1) img{max-width: 155px;}
    footer .wrap >div:nth-child(1) p{font-size: 1.6rem;}

    footer{margin-top:30px;padding-top:30px;}
    footer .wrap{margin-bottom:25px;}

    .portfolio .wrap h3,.service .wrap>h3,.contact .wrap>h3{font-size:2.4rem;margin-top:30px;padding-bottom:20px;margin-bottom:10px;}
    .about .item >i{font-size: 55px;width: 85px;height: 85px;}
    .about .item >div{font-size: 1.4rem;}
    .about .item{margin-bottom: 30px;}
    .about .item >span{margin-top: 0;}
    .service .wrap .s-intro{font-size: 1.4rem;margin: 20px 15px 20px;}
    .service .s-list .item div{font-size: 1.4rem;}
    .service .s-list .item{display: block;margin:0 20px 20px;}
    .service .s-list .item img{width:100%;margin-right: 0;margin-bottom: 10px;}
    .service .s-list .item:nth-child(even) img{margin-left: 0;}

    .portfolio .wrap{margin-bottom: 40px;}
    .portfolio .wrap p{font-size: 1.4rem;margin:0 15px;}
    .contact .m-item{display: block;padding:0 15px 20px;}
    .contact .m-item>div:nth-child(2){width: 100%;height: 250px;margin-top: 10px;}
    .contact .m-item .txt{font-size: 1.4rem;}
    .service ul li:nth-child(3n-2){margin-left: 6%;}
    .contact .m-item{width: 92%;margin:20px 4% 0;}
    .contact .m-item:nth-child(3n-2){margin-left: 4%;}

  
}