﻿html,body {width: 100%;height: 100%;overflow: hidden;}
.section-wrap {width: 100%;height: 100%;overflow: visible;transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1);-webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.03, 1);}
.section-wrap .section {position: relative;width: 100%;height: 100%;background-position: center center;background-repeat: no-repeat;background-size: cover;}
.section-wrap .section .title {width: 100%;position: absolute;top: 20.53%;color: #fff;text-align: center;}
.section-wrap .section .title p {opacity: 0;font-size:50px ;}
.section-wrap .section .title.active .tit {opacity: 1;transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);}
.section-wrap .section .title .dian{font-size: 22px; margin: 20px auto; font-style: normal;transform: rotate(-30deg);-webkit-transform: rotate(-30deg);display: block;line-height: 1;vertical-align: bottom;	}
.section-wrap .section .title span{font-size: 22px;opacity: 0;}
.section-wrap .section .title.active span{opacity: 1;transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);}

/* 头图 */

.section-wrap .section-1 .title{width: 80%;position: absolute;top: 50%;left: 14%;text-align: left; transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);    }
.section-wrap .section-1 .title p{margin: 8px auto;font-weight: 600;letter-spacing:10px;}
.section-wrap .section-1 .title.active .tit{font-size: 100px;line-height: 1;}
.section-wrap .section-1 .title .dian{margin: 0; font-size: 50px; display: inline-block;line-height: 1;vertical-align: bottom;	}
.section-wrap .section-1 .title span{display: block;background-color: #08b79a;font-size: 22px;color: #fff;line-height: 2;width: 240px;margin-top: 26px;text-align: center;border-bottom-right-radius:20px ;}
.section-wrap .section-1 {background-image: url(../images/index_bg1.jpg);}

/* 案例 */
.section-wrap .section-2 {background-image: url(../images/index_bg2.jpg);}
.section-wrap .section-2 ul{font-size:0;position: absolute;top: 41.63%;left: 50%; width: 76.56%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
.section-wrap .section-2 ul li{display: inline-block;width: 20%; cursor: pointer;}
.section-wrap .section-2 ul li p{ font-size: 22px;color: #fff;line-height: 2;width:150px;margin: 0 auto; text-align: center;border-bottom-right-radius:20px ;transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;}
.section-wrap .section-2 ul li:hover p{background-color: #08b79a;transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;}
.section-wrap .section-2 ul li div{width: 100%;min-height: 174px; background-position: center center; background-repeat: no-repeat;}
.section-wrap .section-2 ul li div.icon1{background-image: url(../images/trailer.png);background-size: 104px 97px;}
.section-wrap .section-2 ul li div.icon2{background-image: url(../images/tvc.png);background-size: 109px 81px;}
.section-wrap .section-2 ul li div.icon3{background-image: url(../images/3d.png);background-size: 100px 100px;}
.section-wrap .section-2 ul li div.icon4{background-image: url(../images/video.png);background-size: 104px 83px;}
.section-wrap .section-2 ul li div.icon5{background-image: url(../images/photography.png);background-size: 101px 81px;}

/* 客户 */
.section-wrap .section-3 {background-image: url(../images/index_bg3.jpg);}
.section-wrap .section-3 ul{position: absolute;top: 43.46%;left: 50%; width: 60%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
.section-wrap .section-3 ul li{width:18%;margin-right:2.5% ;margin-bottom: 28px; }
.section-wrap .section-3 ul li:nth-child(5n+5){margin-right:0 ;}
.section-wrap .section-3 ul li a{display: block;transform: scale(0.9);-webkit-transform: scale(0.9);-moz-transform: scale(0.9);transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
.section-wrap .section-3 ul li:hover a{transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1); transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}

/* 关于我们 */
.section-wrap .section-4 {background-image: url(../images/index_bg4.jpg);}
.section-wrap .section-4 .title a{color: #fff;font-size: 18px;line-height: 1;}
.section-wrap .section-4 ul{font-size:0;position: absolute;top: 50%;left: 50%; width: 76.56%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
.section-wrap .section-4 ul li{display: inline-block;width: 20%; cursor: pointer;}
.section-wrap .section-4 ul li p{ font-size: 22px;color: #fff;line-height: 2;width:150px;margin: 0 auto; text-align: center;border-bottom-right-radius:20px ;transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;}
.section-wrap .section-4 ul li:hover p{background-color: #08b79a;transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;}
.section-wrap .section-4 ul li div{width: 100%;min-height: 174px; background-position: center center; background-repeat: no-repeat;}
.section-wrap .section-4 ul li div.icon1{background-image: url(../images/trailer.png);background-size: 104px 97px;}
.section-wrap .section-4 ul li div.icon2{background-image: url(../images/tvc.png);background-size: 109px 81px;}
.section-wrap .section-4 ul li div.icon3{background-image: url(../images/3d.png);background-size: 100px 100px;}
.section-wrap .section-4 ul li div.icon4{background-image: url(../images/video.png);background-size: 104px 83px;}
.section-wrap .section-4 ul li div.icon5{background-image: url(../images/photography.png);background-size: 101px 81px;}


/* 新闻资讯 */
.section-wrap .section-5 {background-image: url(../images/index_bg5.jpg);}
.section-wrap .section-5 ul{font-size: 0; position: absolute;top: 40.61%;left: 50%; width: 72.39%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
.section-wrap .section-5 ul li{width: 30.91%;margin-right:3.59% ;display: inline-block;vertical-align: top; }
.section-wrap .section-5 ul li:nth-child(3n+3){margin-right:0 ;}
.section-wrap .section-5 ul li p{font-size: 18px;line-height: 2; color: #fff;margin-top: 20px;}


/* 联系我们 */
.section-wrap .section-6 {background-image: url(../images/index_bg5.jpg);}
.section-wrap .section-6 .contact{position: absolute;top: 43.36%;left: 50%; width: 670px;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
.section-wrap .section-6 .contact .contact_img{width: 250px;height: 250px;}
.section-wrap .section-6 .contact .contact_content{width:calc(100% - 250px); padding-left: 50px;}
.section-wrap .section-6 .contact .contact_content ul {margin-top: 26px;}
.section-wrap .section-6 .contact .contact_content ul li{margin-bottom: 20px;}
.section-wrap .section-6 .contact .contact_content ul li span{color: #d8d8d8;font-size: 18px;display: block;margin-bottom: 16px; line-height: 1;}
.section-wrap .section-6 .contact .contact_content ul li p{color: #fff;font-size: 18px;}

.put-section-0 {transform: translateY(0);webkit-transform: translateY(0);}
.put-section-1 {transform: translateY(-100%);-webkit-transform: translateY(-100%);}
.put-section-2 {transform: translateY(-200%);-webkit-transform: translateY(-200%);}
.put-section-3 {transform: translateY(-300%);-webkit-transform: translateY(-300%);}
.put-section-4 {transform: translateY(-400%);-webkit-transform: translateY(-400%);}
.put-section-5 {transform: translateY(-500%);-webkit-transform: translateY(-500%);}

/* 底部 */
footer{position: fixed;bottom: 0;width: 100%; height: 50px; line-height: 50px; color: #fff;font-size: 12px;padding: 0 30px 0 30px;}
footer a{color: #fff;}

.section-btn {width: 14px;position: fixed;right: 4%;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);}
.section-btn li {width: 16px;height: 16px;cursor: pointer;text-indent: -9999px;border-radius: 16px;-webkit-border-radius: 16px;margin-bottom: 12px;background: #fff;text-align: center;color: #fff;cursor: pointer;transition: height 1s ease-in-out;-webkit-transition: height 1s ease-in-out;-moz-transition: height 1s ease-in-out;}
.section-btn li.on {background: #08b79a;height: 58px; transition: height 1s ease-in-out;-webkit-transition: height 1s ease-in-out;-moz-transition: height 1s ease-in-out;}




@media screen and (max-width:1440px){
    .section-wrap .section .title p {font-size:40px ;}
    .section-wrap .section .title .dian{font-size: 20px; margin: 20px auto; }
    .section-wrap .section .title span{font-size: 20px;}

    .section-wrap .section-1 .title.active .tit {font-size: 80px;}
    .section-wrap .section-1 .title .dian{margin: 0; font-size: 40px; 	}
    .section-wrap .section-1 .title span{font-size: 20px;width: 240px;margin-top: 26px;border-bottom-right-radius:20px ;}

    .section-wrap .section-2 ul li p{ font-size: 20px;width:120px;margin: 0 auto; border-bottom-right-radius:20px ;}
    
    .section-wrap .section-4 .title a{color: #fff;font-size: 16px;line-height: 1;}
    .section-wrap .section-4 ul li p{ font-size: 20px;width:120px;margin: 0 auto; border-bottom-right-radius:20px ;}

    .section-wrap .section-5 ul li p{font-size: 16px;line-height: 2; color: #fff;margin-top: 20px;}

    .section-wrap .section-6 .contact .contact_content ul li span{color: #d8d8d8;font-size: 16px;display: block;margin-bottom: 16px; line-height: 1;}
    .section-wrap .section-6 .contact .contact_content ul li p{color: #fff;font-size: 16px;}
}


@media screen and (max-width:1200px){
    .section-wrap .section .title p {font-size:30px ;}
    .section-wrap .section .title .dian{font-size: 18px; margin: 15px auto; }
    .section-wrap .section .title span{font-size: 18px;}

    .section-wrap .section-1 .title.active .tit {font-size: 60px;}
    .section-wrap .section-1 .title .dian{margin: 0; font-size: 30px; 	}
    .section-wrap .section-1 .title span{font-size: 18px;width: 240px;margin-top: 20px;border-bottom-right-radius:15px ;}

    .section-wrap .section-2 ul li p{ font-size: 18px;width:120px;margin: 0 auto; border-bottom-right-radius:15px ;}
    .section-wrap .section-2 ul li div{width: 100%;min-height: 140px; background-position: center center; background-repeat: no-repeat;}
    .section-wrap .section-2 ul li div.icon1{background-image: url(../images/trailer.png);background-size: 83px 77px;}
    .section-wrap .section-2 ul li div.icon2{background-image: url(../images/tvc.png);background-size: 87px 64px;}
    .section-wrap .section-2 ul li div.icon3{background-image: url(../images/3d.png);background-size: 80px 80px;}
    .section-wrap .section-2 ul li div.icon4{background-image: url(../images/video.png);background-size: 83px 66px;}
    .section-wrap .section-2 ul li div.icon5{background-image: url(../images/photography.png);background-size: 80px 64px;}

    .section-wrap .section-4 ul li p{ font-size: 18px;width:120px;margin: 0 auto; border-bottom-right-radius:15px ;}
    .section-wrap .section-4 ul li div{width: 100%;min-height: 140px; background-position: center center; background-repeat: no-repeat;}
    .section-wrap .section-4 ul li div.icon1{background-image: url(../images/trailer.png);background-size: 83px 77px;}
    .section-wrap .section-4 ul li div.icon2{background-image: url(../images/tvc.png);background-size: 87px 64px;}
    .section-wrap .section-4 ul li div.icon3{background-image: url(../images/3d.png);background-size: 80px 80px;}
    .section-wrap .section-4 ul li div.icon4{background-image: url(../images/video.png);background-size: 83px 66px;}
    .section-wrap .section-4 ul li div.icon5{background-image: url(../images/photography.png);background-size: 80px 64px;}

    .section-wrap .section-5 ul li p{font-size: 16px;line-height: 2; color: #fff;margin-top: 20px;}

    .section-wrap .section-6 .contact .contact_content ul li span{color: #d8d8d8;font-size: 16px;display: block;margin-bottom: 16px; line-height: 1;}
    .section-wrap .section-6 .contact .contact_content ul li p{color: #fff;font-size: 16px;}
}

@media screen and (max-width:750px){
    .section-wrap .section .title {top: 12.53%;}
    .section-wrap .section .title p {font-size:24px ;}
    .section-wrap .section .title .dian{font-size: 16px; margin: 10px auto; }
    .section-wrap .section .title span{font-size: 16px;}

    .section-wrap .section-1 .title{width: 80%;position: absolute;top: 50%;left: 14%;text-align: left;}
    .section-wrap .section-1 .title.active .tit {font-size:36px;}
    .section-wrap .section-1 .title .dian{margin: 0; font-size: 18px; 	}
    .section-wrap .section-1 .title span{font-size: 16px;width: 180px;margin-top: 20px;border-bottom-right-radius:10px ;}

    
    .section-wrap .section-2 ul{text-align: center; font-size:0;position: absolute;top: 30.63%;left: 50%; width: 100%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
    .section-wrap .section-2 ul li{width: 33%;}
    .section-wrap .section-2 ul li p{ font-size: 12px;width:85px;margin: 0 auto; border-bottom-right-radius:15px ;}
    .section-wrap .section-2 ul li div{width: 100%;min-height: 100px; background-position: center center; background-repeat: no-repeat;}
    .section-wrap .section-2 ul li div.icon1{background-image: url(../images/trailer.png);background-size:55px 61px;}
    .section-wrap .section-2 ul li div.icon2{background-image: url(../images/tvc.png);background-size: 69px 51px;}
    .section-wrap .section-2 ul li div.icon3{background-image: url(../images/3d.png);background-size: 64px 64px;}
    .section-wrap .section-2 ul li div.icon4{background-image: url(../images/video.png);background-size: 66px 52px;}
    .section-wrap .section-2 ul li div.icon5{background-image: url(../images/photography.png);background-size: 64px 51px;}

    .section-wrap .section-3 ul{top: 30.46%;left: 50%; width: 80%;}
	.section-wrap .section-3 ul li:nth-child(5n+5){margin-right:2% ;}
    .section-wrap .section-3 ul li{width: 32%;margin-right:2% ;margin-bottom: 10px; }

    .section-wrap .section-3 ul li:nth-child(3n+3){margin-right:0 ;}

    .section-wrap .section-4 .title a{font-size: 16px;display: block;box-sizing: content-box;padding: 0 20px;}
    .section-wrap .section-4 ul li p{ font-size: 20px;width:120px;margin: 0 auto; border-bottom-right-radius:20px ;}
    .section-wrap .section-4 ul{text-align: center; font-size:0;position: absolute;top: 33.63%;left: 50%; width: 100%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
    .section-wrap .section-4 ul li{width: 33%;}
    .section-wrap .section-4 ul li p{ font-size: 12px;width:85px;margin: 0 auto; border-bottom-right-radius:15px ;}
    .section-wrap .section-4 ul li div{width: 100%;min-height: 100px; background-position: center center; background-repeat: no-repeat;}
    .section-wrap .section-4 ul li div.icon1{background-image: url(../images/trailer.png);background-size:55px 61px;}
    .section-wrap .section-4 ul li div.icon2{background-image: url(../images/tvc.png);background-size: 69px 51px;}
    .section-wrap .section-4 ul li div.icon3{background-image: url(../images/3d.png);background-size: 64px 64px;}
    .section-wrap .section-4 ul li div.icon4{background-image: url(../images/video.png);background-size: 66px 52px;}
    .section-wrap .section-4 ul li div.icon5{background-image: url(../images/photography.png);background-size: 64px 51px;}

    .section-wrap .section-5 ul{top: 30.61%;left: 50%; width: 80%;;}
    .section-wrap .section-5 ul li{width: 49%;margin-right:2% ;display: inline-block;vertical-align: top; }
    .section-wrap .section-5 ul li:nth-child(3n+3){margin-right:auto ;}
    .section-wrap .section-5 ul li:nth-child(2n+2){margin-right:0 ;}
    .section-wrap .section-5 ul li:last-child{display: none;}
    .section-wrap .section-5 ul li p{font-size: 12px;line-height: 2; color: #fff;margin-top: 10px;}

    .section-wrap .section-6 .contact{top: 30.36%; width:80%;}
    .section-wrap .section-6 .contact .contact_img{width: 128px;height: 128px;}
    .section-wrap .section-6 .contact .contact_content{width:100%; padding-left: 0px;}
    .section-wrap .section-6 .contact .contact_content ul {margin-top: 20px;}
    .section-wrap .section-6 .contact .contact_content ul li{margin-bottom: 10px;}
    .section-wrap .section-6 .contact .contact_content ul li span{color: #d8d8d8;font-size: 12px;display: block;margin-bottom: 10px; line-height: 1;}
    .section-wrap .section-6 .contact .contact_content ul li p{color: #fff;font-size: 12px;}

    .section-btn li {width: 8px;height: 8px;margin-bottom: 12px;}
    .section-btn li.on {height: 26px;}

    footer{position: fixed;bottom: 0;width: 100%; height: auto; line-height: 24px; color: #fff;font-size: 12px;padding: 0 30px 0 30px;}
    footer>div{width: 100%;text-align: center;}
	
}
	.section-wrap .section{
		background-color:black;
		background-image: initial;
	}