.project-nav{ background: #fff;max-width: 1400px;
    padding: 10px 41px 0 41px;
    margin: 0 auto;}
.ca-menu{padding-top:20px;}
.ca-menu li{ display: inline-block; height:60px;overflow:hidden;position:relative;background:#fff; padding:0; border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);
    box-shadow:1px 1px 2px rgba(0,0,0,.2);
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
    transition:all 300ms ease-in-out }
.ca-menu li:nth-child(4){border-right:none;}
.ca-menu li:nth-child(5),.ca-menu li:nth-child(6),.ca-menu li:nth-child(7),.ca-menu li:nth-child(8){border-bottom:none;}
.ca-menu li:last-child{border-right:none;}
.ca-menu li a{overflow: hidden; width:100%;height:100%;display:block;color:#333;position:relative}
.ca-menu li a span{position: absolute;left:20px; top:5px; z-index: 3; -webkit-transition:all 300ms linear;-moz-transition:all 300ms linear;
    -o-transition:all 300ms linear;-ms-transition:all 300ms linear;transition:all 300ms linear}
.ca-menu li a img{ position: absolute; width: 100%; height:auto; top:-50%;
    -webkit-transition:all 300ms linear;
    -moz-transition:all 300ms linear;
    -o-transition:all 300ms linear;
    -ms-transition:all 300ms linear;
    transition:all 300ms linear}
.ca-menu li a .ca-content{z-index:2; position: absolute; width: 100%; height: 100%; background: rgba(68,68,68,.8) }
.ca-menu li a .ca-main{z-index:3; position: absolute; width: 100%; left: 90px; color: #fff; font-size: 18px;
    -webkit-transition:all 300ms linear;
    -moz-transition:all 300ms linear;
    -o-transition:all 300ms linear;
    -ms-transition:all 300ms linear;
    transition:all 300ms linear}
.ca-menu li:hover{}
.ca-menu li:hover span{left:-20px; top: -20px; opacity: .3; width: 100px; height: 100px; -webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}
.ca-menu li:hover .ca-main{color:#fff; font-size: 20px;
    -webkit-transition:all 300ms linear;
    -moz-transition:all 300ms linear;
    -o-transition:all 300ms linear;
    -ms-transition:all 300ms linear;
    transition:all 300ms linear}
.ca-menu li:hover .ca-content{background: rgba(0,72,191,.9)}
.ca-menu li:hover img{ width: 130%; height: auto;
    -webkit-transition:all 300ms linear;
    -moz-transition:all 300ms linear;
    -o-transition:all 300ms linear;
    -ms-transition:all 300ms linear;
    transition:all 300ms linear}
.ca-menu li.active a img{width: 130%; height: auto;}
.ca-menu li.active .ca-content{background: rgba(0,72,191,.9) !important;}
.ca-menu li.active .ca-main{color:#fff; }
.ca-menu li.active span{left:-20px; top: -20px; opacity: .3; width: 100px; height: 100px;
    -webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}
/*列表*/
.project-list{ padding:10px 25px 40px 25px; background: #fff; margin: 0 auto; max-width: 1400px}
.project-list{}
.project-list .row{ padding-right: 15px;}
.project-list .row .project-list-box{ padding-right: 0px; margin-top: 15px;}
.project-list a span, .project-list a,.project-list a img, .project-list a i, .project-list a p,
.project-list a:hover,.project-list a:hover span,.project-list a:hover i, .project-list a:hover img,
.project-list a:hover p{
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out
}
.project-list a{position: relative; overflow: hidden; background: #fff; display: block;  text-decoration: none; border: 1px solid #fff; height: 300px;}
.project-list a span{  z-index: 6;position: absolute; background: #0048bf; border-radius: 50%;  left: 50%; margin-left: -30px; bottom: 65px; width: 60px; height: 60px;background-size: 70% auto;
    background-position: center center; background-repeat: no-repeat}
.project-list a .img{ z-index: 4; position: absolute; height:244px; width: 100%; display: block; background-size: cover; background-repeat: no-repeat; background-position: center center;}

.project-list a i{ z-index: 6; position: absolute; opacity: 0; font-style: normal;  background: rgba(0,72,191,.9); color: #fff; text-align: center; width: 120px; height: 30px; line-height: 30px;
    bottom: 0; left:50%; margin-left: -60px;}
.project-list a p{ z-index: 6; position: absolute; text-align: center; font-size: 16px; bottom: 0px; width: 100%; height: 40px; line-height: 40px; color: #333;}
.project-list a:hover span{bottom: 140px; transition: all ease-in-out .5s}
.project-list a:hover i{opacity: 1; bottom: 12px; border-radius: 20px;}
.project-list a:hover{ box-shadow: 0 0 15px rgba(0,0,0,.2); border:none}
.project-list a:hover{ border: 1px solid #fff; }
.project-list a:hover p{ bottom: 44px;  background: rgba(0,0,0,.25);text-align: center; color: #fff;}
.s-title{ height: 150px; position: relative; overflow: hidden}
.s-title img{position: absolute; width: 100%;}
.s-title h1{position: absolute; width: 100%; height: 150px; line-height: 150px; margin: 0;  margin-left: 50px; font-weight: bolder; color: #333; z-index: 3}
.s-title .bg{position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,.8); z-index: 2}
.project-detail-container{ height: 800px; margin: 50px}
.swiper-container {
    width: 100%;
    height: 100%;
    background-color: rgb(179, 189, 196);
    transition: 1s background-color 1.3s;
}
.swiper-wrapper {
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-wrapper .title {
    transition-delay: 1s;
    z-index: 10;
}
.swiper-wrapper .title h3 {
    font-weight: 700;
    font-size: calc(55px + 54 * ((53vw + 53vh) - 520px) / 820);
    letter-spacing: -1px;
    color: rgba(255,255,255,0);
    -webkit-text-stroke: 2px #fff;
}
.swiper-wrapper .img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: scale(0.6, 0.6);
    transition-duration: 1s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    opacity: 0.9;
    overflow: hidden;
}
.swiper-wrapper .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2, 1.2) translateX(50%);
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    transition-property: transform;
}
.button-prev, .button-next {
    transition: 0.5s;
    outline: none;
    position: absolute;
    width: 140px;
    z-index: 10;
    top: 65vh;
    transform: translateY(-34px);
    cursor: pointer;
}
.button-prev {
    left: 4vw;
}
.button-next {
    right: 4vw;
}
.button.disabled {
    opacity: 0.2;
    cursor: default;
}
#arrow-svg-home {
    transform: translateY(353px);
}
.button-next #arrow-svg-home {
    transform: translateY(353px) rotateY(180deg);
    transform-origin: 80px 0px 0px;
}
svg {
    transition: 0.5s;
}
.cls-1 {
    transition: 0.5s;
    opacity: 0.4;
    transform-origin: -20px 40px;
    opacity: 1;
}
.cls-4 {
    transition: 0.5s;
    stroke-width: 2px;
    stroke: #fff;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.4;
    transform-origin: 0px 0px 0px;
}
#arrow-trg {
    transition: 0.5s;
    fill: #fff;
    transform: rotateY(180deg) translate(-53px, 39px);
}
#line {
    transition: 0.5s;
    stroke: #fff;
    transform: translate(50px, 42px);
}
.button-prev:not(.disabled):hover svg {
    transform: translateX(-25px);
}
.button-next:not(.disabled):hover svg {
    transform: translateX(25px);
}
.button:not(.disabled):hover .cls-1 {
    transform: scale(1.1);
}
.button:not(.disabled):hover .cls-4 {
    stroke-dasharray: 2px;
    stroke-dashoffset: 2px;
    opacity: 1;
}
.button:not(.disabled):hover #arrow-trg {
    transform: rotateY(180deg) translate(-37px, 39px);
}
.button:not(.disabled):hover #line {
    transform: translate(35px, 42px) scaleX(0.33);
}

@media screen and (max-width: 767px){
    .project-nav{padding: 10px 31px 0 31px;}
    .project-list .row .project-list-box{ margin-top: 10px; padding-left: 5px;}
    .project-list .row{ padding-right: 5px;}
    .project-list a{ height: 230px;}
    .project-list a .img{ height: 180px;}
    .project-list a i{ width: 80px; margin-left: -40px;}
    .project-list a span{ height: 30px; width: 30px; margin-left: -15px;}
    .ca-menu li{ height: 40px;}
    .ca-menu li span{ opacity: 0;}
    .ca-menu li a .ca-main{ width: 100%; left: 0; font-size: 14px; text-align: left; padding: 0 10px; margin: 0; height: 30px; top:50%; margin-top: -15px; }
    .ca-menu li a:hover .ca-main{ font-size: 14px;}
    .project-list a:hover span{bottom: 95px; transition: all ease-in-out .5s}
    .project-detail-container{ height: 500px; margin: 0;}
    .s-title{ height: 80px;}
    .s-title h1{height: 80px; line-height: 80px; margin-left: 20px; font-size: 20px;}
}