@charset "UTF-8";




#wrap{
    padding-top: 222px;padding-top: 84px;
}
.shuffling{
    width: 100%;
}
.shuffling .shuffling-pic{
    width:100%;
    position:relative;
    transform:perspective(500px);
    transform-style:preserve-3d;
}

.shuffling{
    width: 100%;
    height:660px;
    position:relative;
    overflow:hidden;
}
.shuffling-pic > div{
    width:0;
    height:0;
    position:absolute;
    top:135px;
    left:485px;
    opacity:0;
    filter:alpha(opacity=0);
    transition: .5s;
}
.shuffling-pic > div span{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    filter:alpha(opacity=50);
    /*background:rgba(0,0,0,.5);*/
    display:block;
}
.shuffling-pic > div img{
    width:100%;
    height:100%;
}
.shuffling-pic > div.on{
    transform: translateX(-50%);
    box-shadow: 0px 0px 15px -5px;
}
.shuffling-pic > div.l1{ width:1200px; height:600px; left:50%; top:50px; z-index:10;opacity:1;
    filter:alpha(opacity=100);}

.shuffling-pic > div.l2{ width:50%; height:580px; left:50%; top:0px; z-index:9;opacity:1;
    filter:alpha(opacity=100);}
.shuffling-pic > div.l0{ width:50%; height:580px; left:0px; top:0px; z-index:9;opacity:1;
    filter:alpha(opacity=100);}

.shuffling-pic > div.l3{ width:300px; height:150px; left:970px; top:60px; z-index:8;}
.shuffling-pic > div.l9{ width:300px; height:150px; left:-300px; top:60px; z-index:8;}

.shuffling-btn div{
    width:62px;
    height:71px;
    position:absolute;
    top:50%;
    margin-top:-35px;
    z-index:999;
    cursor:pointer;
}
.shuffling-prv{
    background:url(../img/left.png);
    left:90px;
}
.shuffling-next{
    background:url(../img/right.png);
    right:90px;
}
.shuffling-pager{
    text-align: center;
    padding:10px 0;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:50px;
}
.shuffling-pager span{
    display: inline-block;
    width:26px;
    height:6px;
    margin:0 8px;
    border-radius:5px;
    background:#fff;
    cursor:pointer;
    transition: .5s;
}
.shuffling-pager span.on{
    width: 55px;
}

.phone-shuffling{
    display: none;
}

.products{
    margin-top: 60px;
    margin-bottom: 100px;
}
.products .p-title{
    top: 65px;
    left: 50%;
    width: 880px;
    margin-left: -440px;
    font-size: 18px;
    text-align: center;
}
.products .p-title h3{
    margin-bottom: 35px;
    color: #231815;
    font-size: 40px;
}
.products .p-title p{
    color: rgba(35,24,21,.8);
    line-height: 30px;
    word-break: break-word;
	font-size: 22px;
	line-height: 38px;
	color: #666666;
}

.shop{
    width: 1760px;
    margin: auto;
    margin-bottom: 100px;
}
.shop h3{
    margin-bottom: 30px;
    color: #231815;
    font-size: 30px;
}
.shop ul{
    font-size: 0;
}
.shop ul li{
    display: inline-block;
    vertical-align: top;
    width: 11.3%;
    color: #231815;
    font-size: 18px;
    text-align: center;
}
.shop ul li + li{
    margin-left: 1.3%;
}
.shop ul li div{
    overflow: hidden;
    margin-bottom: 15px;
}
.shop ul li div a{
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
    opacity: 0;
    transition: .5s;
}
.shop ul li div:hover a{
    opacity: 1;
}
.shop ul li div a p{
    margin: auto;
    color: white;
}
.shop ul li > p{
    word-break: break-word;
}
.shop ul li i{
    width: 30px;
    height: 1px;
    background-color: #766f6e;
}
.making{
    width: 100%;
    height: 780px;
    margin-bottom: 110px;
    background:url("../img/bg.png") no-repeat center/cover fixed;
}
.making > div{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3) ;
    color: #fff;
    text-align: center;
}
.making > div h3{
    margin-top: 230px;
    margin-bottom: 60px;
    font-size: 40px;
}
.making > div p{
    font-size: 18px;
    line-height: 30px;
    word-break: break-word;
}
.making > div a{
    width: 240px;
    height: 60px;
    margin-top: 80px;
    border: 1px solid white;
    font-size: 20px;
    line-height: 60px;
    box-sizing: border-box;
    transition: .5s;
    background-color: transparent;
    color: white;
}
.making > div a:hover{
    color: #231815;
    background-color: white;
}
.about{
    width: 100%;
    /* height: 530px; */
    /* margin-bottom: 130px; */
    /* background: no-repeat center/cover fixed; */
	background: no-repeat center/cover ;
}
.about > div >div{
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* padding-left: 255px; */
    padding-right: 130px;
    /* background: url("../img/Shape.png") no-repeat center right; */
    color: white;
    box-sizing: border-box;
}
.about > div h3{
    /* margin-top: 115px; */
    margin-bottom: 40px;
    font-size: 40px;
}
.about > div p {
    font-size: 18px;
    line-height: 30px;
}
.clients{
    text-align: center;
}
.clients h3{
    margin-bottom: 40px;
    color: #363636;
    font-size: 40px;
}
.clients p{
    color: rgba(35,24,21,.8);
    font-size: 18px;
    line-height: 30px;
}
.clients .swiper-container{
    width: 1400px;
    margin:90px auto 130px;
}
.clients .swiper-button-next,
.clients  .swiper-button-prev{
    width: 20px;
    height: 34px;
    margin-top: -17px;
    background-size: 20px 34px;
    outline: none;
}
.clients  .swiper-button-prev{
    left: 150px;
    background-image: url("../img/left1.png");
}
.clients .swiper-button-next{
    right: 150px;
    background-image: url("../img/right1.png");
}



.swibanner .swiper-pagination-bullet{width: 10px;height: 10px;opacity: 0.4;vertical-align: middle;}
.swibanner .swiper-pagination-bullet-active{background: #fff;width: 14px;height: 14px;opacity: 1;}
.swibanner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 6px;}



.products .name{font-size: 0;}
.products .name h3,.products .name .txt{display: inline-block;vertical-align: top;}
.products .name h3{margin-bottom: 35px;color: #231815;font-size: 40px;width: 40%;}
.products .name .txt{color: rgba(35,24,21,.8);line-height: 38px;word-break: break-word;width: 60%;
font-size: 22px;color: #666;
}
.products .swipro .img{border-radius: 10px;overflow: hidden;margin-bottom: 30px;}
.products .swipro .img img{max-width: 100%;border-radius: 10px;}
.products .swipro .tit{position: relative;padding-right: 44px;}
.products .swipro .tit span{font-size: 24px;line-height: 34px;color: #333333;}
.products .swipro .tit img{width: 43px;height: 23px;position: absolute;
right: 0;top: 8px;display: none;}
.products .swipro .swiper-slide-active .img{box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.21);}
.products .swipro .swiper-slide-active .tit img{display: block;}


.about{padding: 10% 0;}
.about .content{font-size: 0;}
.about::before,.about::after{content: '';position: absolute;left: 0;width:100%;}
.about::before{top: 0;background-image: url("../img/about-bg-top.png");
height: 155px;
width: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
z-index: 1;}
.about::after{background-color: rgba(0,0,0,0.3);width: 100%;height: 100%;top: 0;}
.about .about-bg-bottom{width: 100%;position:absolute;z-index: 1;}
.about > div >div{z-index: 1;position: relative;display: inline-block;vertical-align: middle;
box-sizing: border-box;}
.about .videos{text-align: right;padding-right: 0;position: relative;overflow: hidden;}
.about .videos video{width: 660px;height: 440px;object-fit: cover;border-radius: 10px;}

.absub{text-align: center;position: relative;z-index: 2;}
.absub .about-bg-bottom{margin-top: -5%;
position: relative;}
.absubin{display: flex;justify-content: space-between;}
.absubin > div{width: 30%;}
.absubin > div img{height: 89px;width: auto;margin: 0 auto;}
.absubin > div h5{font-size: 24px;line-height: 30px;color: #333333;
margin: 30px 0;
height: 65px;overflow: hidden;}
.absubin > div p{font-size: 20px;line-height: 36px;color: #666666;}


.vidplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
}
.videos1 .d2 img {
    max-width: 100%;
}
.vidplay .dquan1 {
    border: 1px solid white;
}
.vidplay .dquan2 {
    border: 1.5px solid white;
    animation: kuos 1s linear infinite;
}
@keyframes kuos {
    0%{
       width: 52px;
        height: 52px;
    }
    100%{
        width: 100px;
        height: 100px;
    }
}
.vidplay .dquan {
    width: 52px;
    height: 52px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 100%;
}
.videotan .guan {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.videotan {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.4);
	visibility: hidden;
	opacity: 0;

	z-index: 20;
}
.videotan.active {
	transition: opacity 0.3s 0s, visibility 0s 0s;
	visibility: visible;
	opacity: 1;
	transition-duration: .5s;
}
.videotan video {
	object-fit: fill;
	max-width: 1200px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -70%);
	-ms-transform: translate(-50%, -70%);
	-moz-transform: translate(-50%, -70%);
	-webkit-transform: translate(-50%, -70%);
	-o-transform: translate(-50%, -70%);
	transition-duration: .5s;
}
.videotan.active video {
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}

.design{width: 100%;height: 100%;
	background-image: url("../img/design_bg.png");
	background-size: cover;
	background-position: center;padding: 13% 0;
}
.design .content{padding-top: 30px;}
.design .hui{font-size: 26px;line-height: 40px;letter-spacing: 1px;color: #ffffff;opacity: 0.8;}
.design .org{font-size: 22px;line-height: 40px;letter-spacing: 1px;color: #ffffff;opacity: 0.8;}
.design .b{font-size: 40px;line-height: 68px;color: #E6AC55;text-align: center;
font-weight: bold;height: 210px;position: relative;padding: 40px 0;}
.design .b>span{animation:blink-caret 1s step-end infinite;}
@keyframes blink-caret { 50% { background-color: transparent; } }


.ins_name h3,.ins_name .des{text-align: center;}
.ins_name h3{font-size: 44px;line-height: 19px;color: #333333;}
.ins_name .des{font-size: 22px;line-height: 34px;color: #666666;margin: 30px 0 48px;}
.swisay{padding: 10% 0;}
.swisay .sayli{padding: 40px 30px;box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.09);}
.swisay .sayli .tit{font-size: 18px;line-height: 32px;color: #333333;}
.swisay .sayli .img{position: relative;padding-left: 98px;margin-top: 28px;}
.swisay .sayli .img img{width: 74px;height: 74px;position: absolute;left: 0;top: 0;border-radius: 50%;}
.swisay .sayli .img h5{font-size: 24px;line-height: 34px;color: #333333;margin-bottom: 12px;}
.swisay .sayli .img>div{font-size: 18px;line-height: 34px;color: #999999;}
.swisay .swiper-container{padding: 20px;}
.swisay .swiper-pagination{left: 0;right: 0;margin-top: 50px;}
.swisay .swiper-pagination-bullet{width: 10px;height: 10px;background-color: #e6ac55;border-radius: 20px;opacity: 0.5;
display: inline-block;
vertical-align: middle;
margin: 0 6px;}
.swisay .swiper-pagination-bullet-active{width: 14px;height: 14px;opacity: 1;}

.news{padding-bottom: 8%;}
.newsin{font-size: 0;}
.newsli{background-color: #f6f6f6;display: inline-block;vertical-align: top;width: 33.33%;padding: 30px;box-sizing: border-box;}
.newsli:nth-child(2n),.news a:nth-child(2n) .newsli{background-color: #eeeeee;}
.newsli h5{font-size: 20px;line-height: 34px;color: #e6ac55;}
.newsli h5 span{float: right;color: #999999;}
.newsli .p{font-size: 24px;line-height: 38px;color: #333333;font-weight: bold;height: 70px;overflow: hidden;margin: 35px 0 45px;}
.newsli .more{line-height: 24px;}
.newsli .more span,.newsli .more img{display: inline-block;vertical-align: middle;}
.newsli .more span{font-size: 18px;color: #e6ac55;display: none;margin-right: 4px;transition: all 0.6s;-webkit-transition: all 0.6s;}
.newsli .more img{width: 29px;height: 15px;}
.newsli .more .act{display: none;}
.newsli:hover .more .ini{display: none;}
.newsli:hover .more .act{display: inline-block;}
.newsli:hover .more span{display: inline-block;}