@charset "utf-8";
/* CSS Document */
/*index*/
.guide .logo { background: #fff; width: 100%; height: 100%; text-align: center; display: table-cell; vertical-align: middle; }
.guide .logo img { height: 130px; /*position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);*/ opacity: 0; }
.banner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; padding: 130px 60px 60px 60px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background: #eeefef; opacity: 0; }
.banner_right { width: 100%; /*width: 82%; */ float: right; height: 100%; }
.banner .slider { width: 100%; height: 100%; }
.banner .slick-list { height: 100%; }
.banner .slick-track { height: 100%; }
.banner .slider li { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; }
.banner .slider li a { display:block; width:100%; height:100%;}
.banner .slider .slick-next, .banner .slider .slick-prev { display: none; width: 60px; height: 60px; border-radius: 50%; position: absolute; top: 50%; margin-top: -30px; text-indent: -99999em; }
.banner .slider .slick-prev { left: -98px; background: #fafafa; }
.banner .slider .slick-next { right: -98px; background: #fafafa; }
.banner .slider .slick-prev:hover { background: #ff6600; }
.banner .slider .slick-next:hover { background: #ff6600; }
.banner .slick-dots { position: absolute; z-index: 2; bottom: 45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; opacity: 0; }
.banner .slick-dots li { position: relative; display: inline-block; height: 12px; width: 12px; margin: 0px 8px; padding: 0px; cursor: pointer; background: #9f9fa1; border-radius: 50%; text-indent: -9999em; }
.banner .slick-dots .slick-active { background: #fff; }
@-webkit-keyframes rotate { from 0% {
-webkit-transform: rotateY(0deg)
}
100% {
-webkit-transform: rotateY(359deg)
}
0 {
-webkit-transform: rotateY(0)
}
100% {
-webkit-transform: rotateY(359deg)
}
}
@-moz-keyframes rotate { 0% {
-moz-transform: rotateY(0deg)
}
100% {
-moz-transform: rotateY(359deg)
}
0 {
-moz-transform: rotateY(0)
}
100% {
-moz-transform: rotateY(359deg)
}
}
@-o-keyframes rotate { from 0% {
-o-transform: rotateY(0deg)
}
100% {
-o-transform: rotateY(359deg)
}
0 {
-o-transform: rotateY(0)
}
100% {
-o-transform: rotateY(359deg)
}
}
@keyframes rotate { from 0% {
transform: rotateY(0deg)
}
100% {
transform: rotateY(359deg)
}
0 {
transform: rotateY(0)
}
100% {
transform: rotateY(359deg)
}
}
.workBox { height: 40%; }
.workBox .swiper-container { overflow: visible; }
.work { height: 100%; margin-left: -40px; margin-right: -40px; -moz-animation: fadeInRight 2s ease; -ms-animation: fadeInRight 2s ease; -o-animation: fadeInRight 2s ease; -webkit-animation: fadeInRight 2s ease; animation: fadeInRight 2s ease; -moz-transition: all ease 3s; -ms-transition: all ease 3s; -o-transition: all ease 3s; -webkit-transition: all ease 3s; transition: all ease 3s; }
.work.zoomout { opacity: 0; }
.work .slider { width: 110%; left:-5%; height:110%; }
.work .slick-track{ height:100%;}
.work .slick-list{ padding-bottom:60px!important; height:100%; }
.work .slick-next, .work .slick-prev { width: 16px; height: 28px; position: absolute; top: 50%; margin-top: -38px; text-indent: -99999em; display: none; opacity:0 }
.work .slick-prev { left: -50px; }
.work .slick-next { right: -50px; }
.work li { height: 90%; position:relative;}
.work li>div { height: 100%; margin:0px 20px;}
.work li .img { width: 100%; height: 100%; position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
.work li .img img { width: 100%; }
.work li .shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: rgba(35,24,21,0.69); -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; opacity:1; }
.work li .topic { text-align: center; padding-top: 20px; padding-bottom: 20px; color: #3e3a39;  -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transition: all ease 0.3s;  }
.work .slick-center { cursor: pointer; }
.work li.slick-center .shadow { opacity: 0;}
.work li.slick-center .topic { opacity: 1; }
.work li.slick-center .img { margin: 0; }
.work li:hover .shadow { cursor: pointer; opacity: 0;}


/*work详情页*/
.outBox { left: 0; margin: 0 auto; -moz-transition: all ease 2s; -ms-transition: all ease 2s; -o-transition: all ease 2s; -webkit-transition: all ease 2s; transition: all ease 2s; z-index: 200; width: 74%; height: 100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }
.outBox.active { opacity: 1; z-index: 20; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.outBox .img { width: 100%; height: 100%;font-size: 0; margin: 0 auto; display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; -moz-transition: all ease 0.6s; -ms-transition: all ease 0.6s; -o-transition: all ease 0.6s; -webkit-transition: all ease 0.6s; transition: all ease 0.6s;background-size: contain;}
.outBox .img img { width: 100%; }
.outBox .swiper-button-prev { background-image: url(../images/left.png); left: 8%; z-index: 2; background-size: 20px 52px; position: fixed; }
.outBox .swiper-button-next { background-image: url(../images/right.png); right: 8%; z-index: 2; background-size: 20px 52px; position: fixed; }
.outBox .swiper-container { /*width: 70.7%;*/width: 100%; height: 100%; /*padding-bottom: 160px; padding-top: 130px;*/padding-bottom: 100px; padding-top: 100px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.outBox .swiper-slide img { width: 100%; max-height: 755px; }
.outBox .topic { width: 100%; position: absolute; left: 0; bottom: -102px; padding: 40px 0px; text-align: center; background: #eeefef; z-index: 3; }
.outBox .topic span { background: #eeefef; padding: 0px 40px; position: relative; z-index: 1; }
.outBox .topic:before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -0.5px; background: #7e7e7e; height: 1px; width: 0; -moz-transition: all ease 4s; -ms-transition: all ease 4s; -o-transition: all ease 4s; -webkit-transition: all ease 4s; transition: all ease 4s; }
.outBox .topic:after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -0.5px; background: #7e7e7e; height: 1px; width: 0; -moz-transition: all ease 4s; -ms-transition: all ease 4s; -o-transition: all ease 4s; -webkit-transition: all ease 4s; transition: all ease 4s; }
.outBox .swiper-slide-active .topic:before { width: 50%; }
.outBox .swiper-slide-active .topic:after { width: 50%; }
.outBox .swiper-slide-active .topic { }
.outBox .swiper-slide>div { height: 100%; }
.outBox li { -moz-transition: all ease 0.8s; -ms-transition: all ease 0.8s; -o-transition: all ease 0.8s; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; }
.outBox .next { text-align: center; position: absolute; bottom: 0px; left: 0; right:0px; margin:0 auto; width: 70.7%; color: #fff; height: 80px; line-height: 80px; z-index: 4;  -moz-transition: all ease 0.8s; -ms-transition: all ease 0.8s; -o-transition: all ease 0.8s; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; cursor: pointer ;}
.outBox li:hover .img { }
.outBox .swiper-slide-active:hover .img { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.outBox .next a{ color:#fff; display:block;background: rgba(35,24,21,0.69);-ms-transition: all ease 0.8s; -o-transition: all ease 0.8s; -webkit-transition: all ease 0.8s; transition: all ease 0.8s;}
.outBox .next .next_cover{position: absolute; left: 0; top: 0;-moz-transition: 1.5s;-ms-transition: 1.5s;-o-transition: 1.5s;-webkit-transition: 1.5s; transition: 1.5s;width: 100%; height: 100%;  z-index: -1; overflow: hidden; background-size: cover; background-position: center;background-repeat: no-repeat;}
.outBox .next .next_cover .tip{ opacity:0; position:relative; z-index:-1;-moz-transition: all ease 0.8s; -ms-transition: all ease 0.8s; -o-transition: all ease 0.8s; -webkit-transition: all ease 0.8s; transition: all ease 0.8s;}
.outBox .next:hover a{ background:none;-moz-transition: all ease 0.8s; -ms-transition: all ease 0.8s; -o-transition: all ease 0.8s; -webkit-transition: all ease 0.8s; transition: all ease 0.8s;}
.outBox .next a .hidespan{-moz-transition: all ease 0.8s; -ms-transition: all ease 0.8s; -o-transition: all ease 0.8s; -webkit-transition: all ease 0.8s; transition: all ease 0.8s; }
.outBox .next:hover a .hidespan{ opacity:0;}
.outBox .next:hover .next_cover .tip{ opacity:1;}

/*文化*/
.culture { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; padding: 130px 50px 50px 0px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }
.culture .cu_img { width: 66%; float: left; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; -moz-animation: fadeInLeft 2s ease; -ms-animation: fadeInLeft 2s ease; -o-animation: fadeInLeft 2s ease; -webkit-animation: fadeInLeft 2s ease; animation: fadeInLeft 2s ease; }
.culture .cu_img .slider { width: 100%; height: 100%; }
.culture .cu_img .slick-list { height: 100%; }
.culture .cu_img .slick-track { height: 100%; }
.culture .cu_img .swiper-slide { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.culture .cu_img .slider .slick-next, .culture .cu_img .slider .slick-prev { width: 50px; height: 50px; background-color: transparent; position: absolute; top: 50%; margin-top: -25px; text-indent: -99999em; background-repeat: no-repeat; background-position: center; background-size: contain; }
.culture .cu_img .slider .slick-prev { background-image: url(../images/left.png); left: 0; z-index: 100; }
.culture .cu_img .slider .slick-next { background-image: url(../images/right.png); right: 0; z-index: 100; }
.culture .swiper-wrapper { width: 100%; height: 100%; }
.culture .swiper-button-prev { background-image: url(../images/left.png); width: 50px; height: 50px; left: 0; z-index: 2; background-size: contain; }
.culture .swiper-button-next { background-image: url(../images/right.png); width: 50px; height: 50px; right: 0; z-index: 2; background-size: contain; }
.culture .swiper-button-next.swiper-button-disabled,.culture .swiper-button-prev.swiper-button-disabled{ display:none;}


.culture .cu_text { width: 34%; float: right; height: 100%; position: relative; z-index:3; -moz-animation: fadeInRight 2s ease; -ms-animation: fadeInRight 2s ease; -o-animation: fadeInRight 2s ease; -webkit-animation: fadeInRight 2s ease; animation: fadeInRight 2s ease; }
.culture .cu_text .textDiv { width: 100%; height: 80%; overflow: hidden; padding-left: 10%; background: #fff; line-height: 30px; position: absolute; top: 50%; right: 0px; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; }
.culture .cu_text .textDiv ul { margin-right: 20px; width: 85%; height: 80%; overflow: hidden; position: absolute; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.culture .cu_text .textDiv ul li { width: 0; font-size: 16px; color: #898989; margin-bottom: 24px; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.culture .cu_text .textDiv ul li:before { content: ''; position: absolute; left: 0px; margin-top: -2px; top: 50%; width: 4px; height: 4px; background: #898989; border-radius: 50%; -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.culture .cu_text .textDiv ul li a { font-size: 16px; color: #898989; padding-left: 17px; }
.culture .cu_text .textDiv ul li a:hover { color: #3e3a39 }
.culture .cu_text .textDiv ul li:hover:before { background: #3e3a39; }
.mCSB_scrollTools { width: 3px; right: 10px; }
.mCSB_scrollTools .mCSB_draggerContainer { width: 100%; }
.mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger { background: #dcdddd; width: 14px; height: 14px!important; left: -6px; -moz-animation: inup 3s ease-in-out; -ms-animation: inup 3s ease-in-out; -o-animation: inup 3s ease-in-out; -webkit-animation: inup 3s ease-in-out; animation: inup 3s ease-in-out; }
.mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger .mCSB_dragger_bar { display: none; }
.mCSB_scrollTools .mCSB_draggerContainer .mCSB_draggerRail { width: 100%; background: #dcdddd; -moz-animation: fadeInDown 3s ease-in-out; -ms-animation: fadeInDown 3s ease-in-out; -o-animation: fadeInDown 3s ease-in-out; -webkit-animation: fadeInDown 3s ease-in-out; animation: fadeInDown 3s ease-in-out; }
.details h2 { font-size: 18px; color: #3e3a39; margin-bottom: 30px; font-weight: normal; }
.culture .cu_text .detailsDiv { padding-left: 0; background: #eeefef;  width: 100%; height: 80%; overflow: hidden; position: absolute; top:50%; right: -100%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; display:none; }
.culture .cu_text .detailsDiv .details { padding: 10%; padding-top:5%; padding-right: 0px; height: 90%; overflow: hidden; }
.culture .cu_text .detailsDiv .mCSB_scrollTools .mCSB_draggerContainer .mCSB_draggerRail { background: #fff; width: 10px;-moz-animation-delay:0.8s;-ms-animation-delay:0.8s;-o-animation-delay:0.8s;-webkit-animation-delay:0.8s; animation-delay:0.8s; }
.culture .cu_text .detailsDiv .mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger { left: -2px;-moz-animation-delay:0.8s;-ms-animation-delay:0.8s;-o-animation-delay:0.8s;-webkit-animation-delay:0.8s; animation-delay:0.8s;}
.culture .cu_text .detailsDiv .mCSB_inside > .mCSB_container { margin-right: 100px; }
.culture .cu_text .detailsDiv { height: 90%; }
.culture .cu_text .changebtn { position: absolute; bottom: 5px; right: 0px; width: 25px;
height: 25px; border-radius: 50%; z-index:4; border: 1px solid #9d9d9e; background-size: 9px 16px; background-repeat: no-repeat; background-position: center; background-image: url(../images/arrow.png); cursor: pointer;  background-color:#eeefef; opacity:0; display:none;-ms-animation-delay:2s;-o-animation-delay:2s;-webkit-animation-delay:2s; animation-delay:2s;}
.culture .cu_text .changebtn.rotate {-moz-animation: rotate 0.8s linear;-ms-animation: rotate 0.8s linear;-o-animation: rotate 0.8s linear;-webkit-animation: rotate 0.8s linear; animation: rotate 0.8s linear; }




@-webkit-keyframes inup { from {
top:100%;
}
to { top: 0; }
}
@-moz-keyframes inup { from {
top:100%;
}
to { top: 0; }
}
@-o-keyframes inup { from {
top:100%;
}
to { top: 0; }
}
@keyframes inup { from {
top:100%;
}
to { top: 0; }
}