@charset "utf-8";



/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url(../images/loader.gif) center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; }
/* Dots */
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; }
.slick-dots li button:focus { outline: none; }
.slick-dots li.slick-active a { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg);}
@-webkit-keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1);  }
}




/*index style*/
.align-vertical { height: 100%; width: 100%; position: relative; display: table; }
.vertical-inner { display: table-cell; vertical-align: middle; }
.transXT50 { transform: translateX(50px); -webkit-transform: translateX(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
.transYT50 { transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
.action.transYT50{ opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
.action.transXT50 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
.dly_1 { transition-delay: 100ms; -webkit-transition-delay: 100ms; }
.dly_2 { transition-delay: 200ms; -webkit-transition-delay: 200ms; }
.dly_3 { transition-delay: 300ms; -webkit-transition-delay: 300ms; }
.dly_4 { transition-delay: 400ms; -webkit-transition-delay: 400ms; }
.dly_5 { transition-delay: 500ms; -webkit-transition-delay: 500ms; }
.dly_6 { transition-delay: 600ms; -webkit-transition-delay: 600ms; }
.dly_7 { transition-delay: 700ms; -webkit-transition-delay: 700ms; }
.dly_8 { transition-delay: 800ms; -webkit-transition-delay: 800ms; }
.dly_9 { transition-delay: 900ms; -webkit-transition-delay: 900ms; }
.dly_10 { transition-delay: 1000ms; -webkit-transition-delay: 1000ms; }
.dly_11 { transition-delay: 1100ms; -webkit-transition-delay: 1100ms; }

.banner { position: relative; overflow: hidden; }
.banner .item .pimg { position: absolute; right: 0px; top: 0px; width: 100%; display: block; }

.banner .bot{ position: absolute; left: 0px; bottom: 0px; background-color: #a0733e; height: 6px; overflow: hidden;}
.banner .slick-arrow{ background:url(../images/black_50.png) repeat; background:none rgba(0,0,0,0.5); width:60px; height: 52px; z-index: 105;  bottom: 300px;}
.banner .slick-arrow i{ width: 100%; height: 100%; display: block; transition: 300ms; -webkit-transition: 300ms;}
.banner .slick-prev{ left: 7%; }
.banner .slick-next{ left: 7%; margin-left: 74px;}
.banner .slick-prev i{ background: url(../images/i_banner_l.png) no-repeat scroll center center;}
.banner .slick-next i{ background: url(../images/i_banner_r.png) no-repeat scroll center center;}
.banner .slick-prev:hover,.banner .slick-next:hover{ background:url(../images/cs_80.png) repeat; background:none rgba(176,125,65,0.8);}
.banner .slick-prev:hover i{ transform: translateX(-5px); -webkit-transform: translateX(-5px);}
.banner .slick-next:hover i{ transform: translateX(5px); -webkit-transform: translateX(5px);}
.banner-yy{ background: url(../images/bg_yy.png) repeat-x scroll left bottom; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0;}
.banner .slick-active .pimg { visibility: visible !important; -webkit-animation: scaleUpDown 5s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); animation: scaleUpDown 5s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.banner .slick-active .binbox{  visibility: visible; -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: fadeInRightBig 1.2s 1; animation: fadeInRightBig 1.2s 1;}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(300px);transform:translateX(300px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(300px);transform:translateX(300px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.banner .slick-active .bot { -moz-animation: a_slidercurrent 5s linear; -webkit-animation: a_slidercurrent 5s linear; -o-animation: a_slidercurrent 5s linear; animation: a_slidercurrent 5s linear; }
@-moz-keyframes a_slidercurrent {from { width: 0%; } to { width: 100%; }}
@-webkit-keyframes a_slidercurrent {from { width: 0%; } to { width: 100%; }}
.banner .slick-dots{ right: 2.5%; bottom: 50%; width: 10px; margin-bottom: -92px; z-index: 105; }
.banner .slick-dots li{ position: relative; display: block; width: 21px; padding: 20px 0px; margin: 0px; cursor: pointer;}
.banner .slick-dots li:before{ content: ""; background-color: #fff; width: 1px; height: 100%; position: absolute; left: 50%; top: 0;}
.banner .slick-dots li:first-child:before{ top: 50%; height: 50%;}
.banner .slick-dots li:last-child:before{ height: 50%;}
.banner .slick-dots li a{ height: 21px; width: 21px; line-height: 21px; display: block; overflow: hidden; margin: 0px auto; padding: 0px; cursor: pointer;  border-radius: 50%; background: url(../images/banner_y1.png) no-repeat scroll center center;}
.banner .slick-dots li a span{ width: 100%; height: 100%; display: block; border-radius: 50%; background: url(../images/banner_y2.png) no-repeat scroll center center;  visibility: hidden; opacity: 0; transform: scale(0.8); -webkit-transform: scale(0.8); transition: 300ms; -webkit-transition: 300ms;}
.banner .slick-dots li a:focus{ outline: none; }
.banner .slick-dots li.slick-active a span{ opacity: 1; visibility: visible; transform: scale(1); -webkit-transform: scale(1); }
.mouseIco{ border: 2px solid #fff; width: 21px; height: 30px; display: block; margin: 0px auto; border-radius: 6px; position: absolute; left: 50%; margin-left: -17px; bottom: 67px; z-index:900;}
.mouseIco i{ width: 3px; height: 7px; border-radius: 1px; display: block; background-color: #fff; position: absolute; left: 50%; margin-left: -1px; top: 5px; -webkit-animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;}
@keyframes mouse-dot {
    from { opacity: 0; }
    33% { opacity: 1; }
    to { transform: translateY(15px); -webkit-transform: translateY(15px); opacity: 0; }
}
@-webkit-keyframes mouse-dot {
    from { opacity: 0; }
    33% { opacity: 1; }
    to { transform: translateY(15px); -webkit-transform: translateY(15px); opacity: 0; }
}

.industryINav .moreBtna{ opacity: 0; margin: 0px auto; visibility: hidden;}

.industryIbox{ position: relative; overflow: hidden; }

.industryIDemo{ position: relative; overflow: hidden;}
.industryIDemo .item{ position: relative; opacity: 1 !important;}
.industryIDemo .img{ position: relative; overflow: hidden;}
.industryIDemo .img img{ width: 100%; display: block;}
.industryIDemo .black-30{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.industryIDemo .slick-active{ z-index:800 !important;}
.industryIDemo .slick-active .img { -webkit-animation: slideIn 1s ; animation: slideIn 1s;}
.industryIDemo .slick-active .img img { -webkit-animation: imgIn 1s; animation: imgIn 1s; }
@-webkit-keyframes slideIn {
    0% { -webkit-transform: translateX(-100%); opacity: 1; }
    100% { -webkit-transform: translateX(0); opacity: 1; }
}
@keyframes slideIn {
    0% { transform: translateX(-100%); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes imgIn {
    0% { -webkit-transform: -webkit-translateX(100%); opacity: 1; }
    100% { -webkit-transform: -webkit-translateX(0); opacity: 1; }
}
@keyframes imgIn {
    0% { transform: translateX(100%); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}


.industryINav{ position: absolute; left: 0; bottom:691px; width: 100%; z-index:99;}
.industryINav .item{ float: left; display: block; width: 33.33%;}
.industryINav .itemC{ padding:0 !important; border-left: 1px solid #fff; height:auto !important; border-top: 1px solid #fff; border-left:1px solid rgba(255,255,255,0.3); border-top:1px solid rgba(255,255,255,0.3);height:250px !important; text-align: center; position: relative; z-index: 1;}
.industryINav .itemC:before { content: ""; width: 100%; height: 100%; z-index: -1; position: absolute; left: 0; bottom: 0px; background: url(../images/cs_90.png) repeat; background:none rgba(160,115,62,0.8); transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .38s cubic-bezier(.4,0,.2,1); transition: transform .38s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; }
.industryINav .addico{ background: url(../images/add_ico.png) no-repeat scroll center center; background-size: cover; width: 10px; height: 10px; display: block; margin: 0px auto 22px; transition:  0.3s; -webkit-transition:  0.3s;}

.industryINav .slick-current .ico { -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; }
.industryINav .slick-current .itemC:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; }
@keyframes gelatine {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
@-webkit-keyframes gelatine {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
.industryINav .slick-current .addico{ opacity: 0; visibility: hidden; transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.industryINav .slick-current .moreBtna{ opacity: 1; visibility: visible;}
.industryINav .itemC:hover .ico{ -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; }
.industryINav .itemC:hover .addico{ transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.bgf8{ background-color: #f8f8f8;}
.twoIbox{ position: relative; overflow: hidden; z-index: 1;}
.twoIbox .bgf8{ width: 50%; position: absolute; right: 0; top: 0; height: 100%; z-index: -1;}
.newIbox{ background-color: #fff; float: left; display: block; width: 57.6%; padding-right: 4%; padding-top: 86px; height: 648px;}
.fashionIbox{ float: left; display: block; width: 34.4%; margin-left: 4%; padding-top: 86px; height: 648px;}

@media (max-width:1280px) {
	.industryINav{ bottom:580px !important; position:absolute !important; height:193px !important; overflow:hidden;}
}
@media (max-width:767px) {
.industryINav{ bottom:0 !important; position: relative !important; height:155px !important;background-color: rgba(0,0,0,0.5);}
.projec_des { font-size:15px; margin-top:46px; line-height:34px; height:146px;display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;}


}
/*index style end*/