body { background: #f0f0f0; min-width: 1308px; }
/*轮播图*/
.swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; background: #000; height: 100%; }
.swiper-container-no-flexbox .swiper-slide { float: left; }
.swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate(0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; }
.swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; }
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; }
.swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform,height; }
.swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; }
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; }
/* Pagination Styles */
.swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; }
.swiper-pagination.swiper-pagination-hidden { opacity: 0; }
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; }
/* Bullets */
.swiper-pagination-bullet { width: 50px; height: 2px; display: inline-block; background: #fff; opacity: 0.4; }
button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }
.swiper-pagination-white .swiper-pagination-bullet { background: #fff; }
.swiper-pagination-bullet-active { opacity: 1; background: #fff; }
.swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; }
.swiper-pagination-black .swiper-pagination-bullet-active { background: #000; }
.swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); -moz-transform: translate3d(0px, -50%, 0); -o-transform: translate(0px, -50%); -ms-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); }
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px 0; display: block; }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; }
/* Progress */
.swiper-pagination-progress { background: rgba(0, 0, 0, 0.25); position: absolute; }
.swiper-pagination-progress .swiper-pagination-progressbar { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; }
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; }
.swiper-container-horizontal > .swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0; }
.swiper-container-vertical > .swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0; }
.swiper-pagination-progress.swiper-pagination-white { background: rgba(255, 255, 255, 0.5); }
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff; }
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #000; }
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; }
.swiper-container-horizontal > .swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0; }
.swiper-container-vertical > .swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0; }

#swiper { height: 100%; z-index: 0; width: 100%; }
#body { position: relative; background-color: #f0f0f0; z-index: 1; overflow: hidden; }
.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; color: #fff; position: relative; left: 0; top: 0; }
.swiper-slide { overflow: hidden; text-align: center; font-size: 18px; background: #000; /* 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; }
.arrow { display: block; width: 100px; height: 300px; position: absolute; transition: all .4s ease; z-index: 10; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); }
.btn-pre { left: 5%; }
.btn-next { right: 5%; }
.arrow span { display: block; height: 2px; width: 0; background: #fff; transition: all .4s ease; position: absolute; top: 50%; }
.btn-pre span { left: 25%; margin-left: 10px; }
.btn-next span { right: 25%; }
.arrow span:before, .arrow span:after { content: ""; display: block; width: 30px; height: 2px; background: #fff; transition: all .4s ease; position: absolute; }
.btn-pre span:before { transform: translateY(-10px) rotate(-45deg); left: -4px; }
.btn-pre span:after { transform: translateY(10px) rotate(45deg); left: -4px; }
.btn-next span:before { transform: translateY(-10px) rotate(45deg); right: -4px; }
.btn-next span:after { transform: translateY(10px) rotate(-45deg); right: -4px; }

.screen-one .swiper-wrapper { will-change: transform; -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1); transition-timing-function: cubic-bezier(.77,0,.175,1); }

.btn-pre:hover { margin-left: -15px; }
.btn-next:hover { margin-right: -15px; }
.arrow:hover span { width: 40px; }
.btn-pre:hover span:before, .btn-pre:hover span:after { left: -4px; }
.btn-next:hover span:before, .btn-next:hover span:after { right: -4px; }
.swiper-button-disabled span:before, .swiper-button-disabled:hover span:before, .swiper-button-disabled span:after, .swiper-button-disabled:hover span:after { background: #666; }
.swiper-button-disabled:hover span { width: 0; }

.slide-content { width: 100%; height: 100%; }
.slide-content .center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; -webkit-transition-duration: 1.6s; -ms-transition-duration: 1.6s; transition-duration: 1.6s; }
.slide-content .container { display: block; width: 100%; max-width: 1190px; width: 1190px; margin: 0 auto; /*-webkit-perspective: 1190px;-webkit-perspective: 1190px;-webkit-perspective: 1190px; perspective: 1190px;*/ transition: all 1s ease-in-out; }

.slide-content .slide-links { display: inline-block; transition: all 1s ease 0s; width: 100%; }
.slide-content .slide-links .note { font-size: 24px; }
.slide-content .slide-links h2 { font-size: 60px; line-height: 60px; margin-top: 10px; }
.slide-content .slide-links .line { display: inline-block; width: 10px; height: 2px; margin: 8px 0 18px; }
.slide-content .slide-links .more { height: 28px; line-height: 26px; padding: 0 20px; border: 1px solid #000; display: inline-block; transition: all .3s ease; }
.slide-content .slide-links .more:hover { background: #000; color: #fff; }

.slide-content .black .slide-links { color: #000; }
.slide-content .black .slide-links .more { border-color: #000; color: #000; }
.slide-content .black .slide-links .more:hover { background: #000; color: #fff; }
.slide-content .black .slide-links .line { background: #000; }

.slide-content .white .slide-links { color: #fff; }
.slide-content .white .slide-links .more { border-color: #fff; color: #fff; }
.slide-content .white .slide-links .more:hover { background: #fff; color: #000; }
.slide-content .white .slide-links .line { background: #fff; }

.slide-content .t-c { text-align: center; }

.slide-content .t-l { text-align: left; }

.slide-content .t-r { text-align: right; }

/*.slide-content .slide-links:hover { transform: rotate(0) !important; -webkit-transform: rotate(0) !important; transition: all 1s ease 0s; }*/

.swiper-slide .trans_alpha { opacity: 0; transition: all 1s ease 0s; }
.swiper-slide-active .trans_alpha { opacity: 1; transition: all 1s ease 0s; }


/*@media (max-width:767px) {
    .swiper-container .pagination { padding: 20px; }
    .swiper-container .swiper-pagination-bullet { margin: 0 6px; }
    .swiper-container .btn-next, .swiper-container .btn-pre { display: none; }
}*/

@keyframes imgFade {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}


@keyframes bgfadeIn {
    0% { background: #fff; }
    100% { background: #f0f0f0; }
}

@keyframes bottom-fade {
    0% { opacity: 0; bottom: 20%; }
    100% { opacity: 1; bottom: 50%; }
}

header { position: fixed; left: 0; top: 0; width: 100%; min-width: 780px; height: 60px; z-index: 2; background: #fff; }
header h1 a { display: inline-block; width: 174px; height: 33px; margin: 15px 33px; background: url(/images/logo.png) no-repeat; text-indent: -2000em; }
header nav { height: 100%; }
header nav li { float: left; }
header nav li > a { display: inline-block; padding: 0 25px; height: 60px; line-height: 60px; position: relative; transition: all .5s ease; }
header nav li > a.current, header nav li > a:hover { background: #f0f0f0; animation: bgfadeIn 2s; }
header nav li > a.current:before, header nav li > a:hover:before { display: block; content: ""; border-bottom: 3px solid #003584; width: 100%; height: 0; background: #ff0000; position: absolute; left: 0; bottom: 0; }

/*小导航*/
.cent { position: absolute; left: 50%; bottom: 50%; -webkit-transform: translate(-50%,50%); -ms-transform: translate(-50%,50%); transform: translate(-50%,50%); width: 100%; }
.h-cent { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.cont-cent { width: 100%; max-width: 1190px; width: 1190px; margin: 0 auto; }
.cont-cent2 { width: 100%; max-width: 1308px; width: 1308px; margin: 0 auto; }


.sub-nav { display: table; text-align: justify; display: table; width: 100%; table-layout: fixed; }
.sub-nav a { display: table-cell; height: 373px; transition: all 1s ease; text-align: center; color: #fff; position: relative; width: 100%; }
.sub-nav a .sub-nav-bg { position: absolute; background: #000; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; display: inline-block; z-index: 2; transition: all .3s ease; }
.sub-nav a:hover .sub-nav-bg { opacity: .3; transition: all 1s ease; }

.sub-nav a .red-line-wrap { position: relative; margin-bottom: 10px; }
.sub-nav a .red-line-wrap .red-line, .sub-nav a .red-line-wrap .red-line2 { display: inline-block; width: 10px; height: 2px; background: #c10000; }
.sub-nav a .red-line-wrap .red-line2 { transform: translateX(-6px) translateY(-5px) rotate(90deg); }
.sub-nav .big-tit { font-size: 40px; }

.sub-nav a > div { width: 100%; height: 100%; }
.sub-nav a .cent { display: inline-block; z-index: 3; opacity: 0; transition: all .3s ease; }
.sub-nav a .cent:hover { opacity: 1; }
.sub-nav a:hover .cent { animation: bottom-fade .6s; opacity: 1; }

#body { background: #f0f0f0; }
/*home  产品展示*/
.home-pro { display: table; table-layout: fixed; width: 100%; max-width: 1190px; width: 1190px; margin: 0 auto; padding: 85px 0; line-height: 20px; }
.home-pro a { display: table-cell; text-align: center; color: #858585; }
.home-pro a img { opacity: 0.6; max-width: 100%; transition: all 1s ease; }
.home-pro a:hover, .product .home-pro a.current { color: #000; }
.home-pro a:hover img, .product .home-pro a.current img { opacity: 1; animation: imgFade 1s; }

/*home  友情链接*/
#footer-box { position: relative; }
.friend-link { display: block; width: 100%; height: 220px; position: absolute; cursor: pointer; transition: all .5s ease-in-out; top: 0; z-index: 100; overflow: hidden; }
.friend-link-cont { width: 100%; height: 100%; position: absolute; top: 0; transition: all 1s ease; /*overflow-x:hidden*/ }
.friend-link .fl_bg { width: 100%; height: 100%; transition: all 1s ease; }
.friend-link .black_bg { width: 100%; height: 100%; background: #000; opacity: 0.5; position: absolute; left: 0; top: 0; z-index: 2; transition: all 1s ease; }
.friend-link .cont-cent { /*height: 100%;*/ position: absolute; z-index: 3; }
.friend-link .fl-cont { width: 100%; height: 100%; }
.friend-link .fl-cont a { margin-right: 5px; }
/*.friend-link .fl-cont img { position: relative; top: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }*/

.friend-link:hover { height: 280px; top: -30px; overflow: hidden; transition: all .5s ease-in-out; }
/*.friend-link:hover .cont-cent { height:280px; }*/
.friend-link-cont:hover .black_bg { opacity: 0; transition: all 1s ease; }
/*.friend-link-cont:hover .fl_bg { transform: scale(1.3); }*/

.other_bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .5; z-index: 99; }

/*footer 导航*/
#footer { background: #f0f0f0; padding: 60px 0 55px; overflow: hidden; padding-top: 280px; }
.foot-nav li { display: inline-block; width: 16%; float: left; }
.foot-nav h4, .foot-kf h4 { color: #4f4f4f; font-weight: 700; margin-bottom: 10px; }
.foot-nav h4:after, .foot-kf h4:after { content: ""; display: block; width: 10px; height: 1px; background: #003584; margin-top: 5px; }
.foot-nav a { display: block; font-size: 12px; color: #8f8f8f; line-height: 24px; }
.foot-nav a:hover { color: #4f4f4f; }
.foot-kf { float: right; line-height: 20px; }
.foot-kf li { color: #8f8f8f; }
.foot-kf strong { font-size: 22px; color: #626262; }

/*home 导航*/
#hamburger-1 { display: none; width: 20px; position: relative; top: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.hamburger .line { width: 100%; height: 2px; border-radius: 2px; background-color: #003584; display: block; margin: 0 auto 5px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.hamburger:hover { cursor: pointer; }
/* ONE */

#hamburger-1.is-active .line:nth-child(2) { opacity: 0; }

#hamburger-1.is-active .line:nth-child(1) { -webkit-transform: translateY(7px) rotate(-45deg); -ms-transform: translateY(7px) rotate(-45deg); -o-transform: translateY(7px) rotate(-45deg); transform: translateY(7px) rotate(-45deg); }

#hamburger-1.is-active .line:nth-child(3) { -webkit-transform: translateY(-7px) rotate(45deg); -ms-transform: translateY(-7px) rotate(45deg); -o-transform: translateY(-7px) rotate(45deg); transform: translateY(-7px) rotate(45deg); }

/*产品中心列表*/
#product-slide { width: 100%; height: 350px; }
/*#product-slide img { max-width: 100%; }*/
.product-nav { width: 100%; overflow: hidden; background: #fff; }
.product .home-pro { padding: 0; }
.product .home-pro a { padding: 25px 0; transition: all 1s ease; }
.product .home-pro .current, .product .home-pro a:hover { background: #f0f0f0; }

.product .product-list { display: inline-block; flex-flow: row wrap; justify-content: space-between; margin-top: 80px; margin-right: -25px; }
.product .product-list .product-item { width: 380px; margin-bottom: 30px; overflow: hidden; float:left; margin-right: 25px; transition: all 1s ease; }
.product .product-list .product-item a.product-img { display: block; width: 100%; height: 340px; padding: 30px; background: #fff; text-align: center; vertical-align: middle; position: relative; }
.product .product-list .product-item a.product-img .img-wrap { position: relative; width: 100%; height: 100%; }
.product .product-list .product-item a.product-img img { max-width: 100%; max-height: 100%; margin: auto; background-size: contain; }
.product .product-list .product-item a.product-img .black_film { position: absolute; width: 100%; height: 100%; background: #000; left: 0; top: 0; z-index: 2; opacity: 0; transition: all 2s ease; }
.product .product-list .product-item a.product-img .circle { width: 36px; height: 36px; line-height: 36px; border: 2px solid #fff; border-radius: 36px; font-weight: 400; z-index: 3; color: #fff; font-size: 40px; transition: all .2s ease; opacity: 0; }
.product .product-list .product-item a.product-img .circle:before, .product .product-list .product-item a.product-img .circle:after { content: ''; display: block; background: #fff; position: absolute; left: 50%; bottom: 50%; -webkit-transform: translate(-50%,50%); -ms-transform: translate(-50%,50%); transform: translate(-50%,50%); width: 100%; }
.product .product-list .product-item a.product-img .circle:before { width: 20px; height: 2px; }
.product .product-list .product-item a.product-img .circle:after { width: 2px; height: 20px; }
.product .product-list .product-item a.product-img .circle:hover { background: #fff; transition: all .2s ease; }
.product .product-list .product-item a.product-img .circle:hover:before, .product .product-list .product-item a.product-img .circle:hover:after { background-color: #000; }

.product .product-list .pro-num { height: 70px; line-height: 70px; padding: 0; position: relative; transition: all .2s ease; }
.product .product-list .product-item .pro-num .com-arrow { opacity: 0; transition: all .2s ease; }

.pro-num .com-arrow { width: 23px; height: 23px; background: #f5f5f5; border-radius: 23px; right: 30px; transition: all .2s ease; }
.com-arrow span:before, .com-arrow span:after { content: ''; display: block; height: 1px; width: 5px; background: #000; transition: all .2s ease; }
.com-arrow span:before { transform: translate(4px,2px) rotate(-45deg); }
.com-arrow span:after { transform: translate(4px,-3px) rotate(45deg); }
.com-arrow span { display: block; width: 10px; height: 1px; background: #000; transition: all .2s ease; }

.product .product-list .product-item:hover { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); transition: all 1s ease; }
.pro-num .com-arrow:hover { background: #000; transition: all .2s ease; }
.com-arrow:hover span:before, .com-arrow:hover span:after, .com-arrow:hover span { background: #fff; transition: all .2s ease; }

.product .product-list .product-item:hover a.product-img .circle { opacity: 1; transition: all .2s ease; }
.product .product-list .product-item:hover a.product-img .black_film { opacity: .7; transition: all 2s ease; }
.product .product-list .product-item:hover .pro-num { background: #fff; padding-left: 40px; transition: all .2s ease; animation: ver-Lmove .4s; color: #003584; }
.product .product-list .product-item:hover .pro-num .com-arrow { opacity: 1; transition: all .2s ease; }

/*Product details*/
div.pro-sub-menu { line-height: 14px; }
.pro-sub-menu .pro-type { line-height: 60px; position: relative; margin-left: 33px; }
.pro-sub-menu .pro-type span { padding-left: 70px; }
.pro-sub-menu a { color: #595757 !important; }
.pro-sub-menu a:hover { background: #003584; color: #fff !important; border-radius: 10px; }
div.pro-sub-menu a { padding: 5px 10px; margin: 20px 15px 0; display: inline-block; }
.detail-banner { height: 480px; position: relative; }
.detail-banner img { display: block; width: 526px; height: 329px; background-size: contain; }

.detail #swiper { height: 480px; }
.detail #swiper .cent { width: auto; }

.detail .text01 { width: 100%; background: #fff; overflow: hidden; padding: 90px 0; position: relative; }
.detail .text01 .para { line-height: 32px; width: 545px; font-size: 12px; }
.detail .text01 .para h5 { font-weight: bold; border-bottom: 1px solid #cbcbcb; }
.detail .text01 .para li { border-bottom: 1px solid #cbcbcb; }
.detail .text01 .para .span-1 { display: inline-block; width: 60%; }
.detail .text01 .para-type { width: 230px; text-align: center; }
.detail .text01 .para-type h3 { margin: 18px 0; }
.detail .text02 { width: 100%; height: 672px; }
.detail .pro-show { background: #fff; overflow: hidden; }
.detail .pro-show li { float: left; height: 326px; position: relative; overflow: hidden; }
.detail .pro-show li img { background-size: cover; }
.detail .pro-show .li-1 { width: 550px; }
.detail .pro-show .li-2 { width: 640px; }
.detail .pro-show .li-1 .cont-intro { margin-left: 99px; line-height: 24px; }
.detail .pro-show .li-2 .cont-intro { margin-left: 225px; line-height: 24px; }
.detail .text04 { overflow: hidden; margin-bottom: 140px; }
.detail .text04 .tabs-wrap { height: 46px; position: relative; margin: 140px 0 70px; }
.detail .text04 .tabs { width: auto; }
.detail .text04 .tabs a { float: left; display: inline-block; width: 150px; height: 46px; line-height: 46px; text-align: center; }
.detail .text04 .tabs a.current { background: #003584; color: #fff; }
.detail .text04 .panes { overflow: hidden; margin-right: -25px; }
.detail .text04 .panes a { display: block; float: left; margin-right: 25px; overflow: hidden; }
.detail .text04 .panes .img-wrap { padding: 48px; width: 380px; height: 300px; background: #fff; }
.detail .text04 .panes .img-inner { position: relative; width: 100%; height: 100%; }
.detail .text04 .panes a img { max-width: 100%; max-height: 100%; background-size: contain; margin: 0 auto; }
.detail .text04 .panes a .cent { width: auto; }
.detail .text04 .panes .pro-type { text-align: center; padding: 25px 0; font-size; }

/*page*/
#page { width: 100%; line-height: 50px; background: #fff; padding-left: 20px; overflow: hidden; }
#page a { display: inline-block; height: 50px; float: left; padding: 0 20px; }
#page a.pre-page, #page a.next-page { padding: 0 74px; background: #eaeaea; float: right; }
#page a:hover, #page a.active { background: #000; color: #fff; }
.product #page { margin-bottom: 60px; }

/*back to top*/
#back-top { display: none; }
#back-top.com-arrow-t { width: 50px; height: 50px; background: #fff; position: fixed; left: 50%; bottom: 100px; margin-left: 654px; z-index: 100; cursor: pointer; transition: all .2s ease; }
.com-arrow-t span { display: block; height: 12px; width: 1px; background: #000; transition: all .2s ease; }
.com-arrow-t span:before, .com-arrow-t span:after { content: ""; display: block; width: 10px; height: 1px; background: #000; position: absolute; top: 2px; transition: all .02s ease; }
.com-arrow-t span:before { transform: translate(0,0) rotate(45deg); left: -1px; }
.com-arrow-t span:after { transform: translate(0,0) rotate(-45deg); right: -1px; }
.com-arrow-t:hover { background: #000 !important; transition: all .2s ease; }
.com-arrow-t:hover span, .com-arrow-t:hover span:before, .com-arrow-t:hover span:after { background: #fff; transition: all .2s ease; }

/*about shenhua*/
.about-cont { width: 990px; margin: 0 auto; }
.sub-menu { width: 100%; height: 60px; line-height: 60px; position: fixed; top: 60px; background: #f0f0f0; z-index: 99; }
.sub-menu a { padding: 0 25px; }
.sub-menu .current { color: #003584; }
.about { clear: both; }
.about .cont-cent { position: relative; }
.about .memorabilia { width: 100%; height: 1729px; }
.memorabilia .mrb-item { display: block; width: 177px; overflow: hidden; position: absolute; }
.memorabilia .mrb-item .circle { display: block; width: 13px; height: 13px; border-radius: 13px; background: #fff; margin-top: 9px; }
.memorabilia .mrb-item .dash-line { width: 0; height: 100%; border-left: 1px dashed #fff; position: relative; top: 0; left: 6px; display: block; }
.memorabilia .mrb-item .text { width: 152px; color: #fff; }
.memorabilia .mrb-item .text p { line-height: 18px; }
.memorabilia .mrb-item .text strong { font-size: 30px; font-weight: bold; display: block; margin-bottom: 25px; }
.mrb-item-l .decorate { float: left; }
.mrb-item-l .text { float: right; }
.mrb-item-r .decorate { float: right; }
/*.mrb-item-r .decorate span.dash-line { left: inherit; right: 6px !important; }*/
.mrb-item-r .text { text-align: right; }

/*about kitchen*/
.kitchen-banner, .ball-banner { width: 100%; height: 838px; color: #fff; }
.kitchen-banner .content { display: inline-block; padding: 95px 50px 0; height: 550px; background: rgba(0,0,0,0.3); border-left: 1px solid #757776; border-right: 1px solid #757776; margin-left: 160px; }
.kitchen-banner .content strong { font-size: 30px; }
.kitchen-banner .content strong:after { content: ''; display: block; width: 12px; height: 2px; background: #fff; margin-top: 20px; }
.kitchen-banner .content .note { color: #bebebe; line-height: 20px; margin: 45px 0 185px; }
.kitchen-banner .content .note2 { font-size: 9px; color: #bebebe; }
.kitchen2 { width: 100%; height: 809px; margin-bottom: 25px; }
.kitchen2 ul { width: 100%; height: 100%; }
.kitchen2 li { width: 33.33%; height: 33.33%; float: left; }
.kitchen2 .li-1 { background: #000; opacity: .12; }
.kitchen2 .li-2 { background: #000; }
.kitchen2 .li-2 img, .kitchen2 .li-7 img { width: 100%; height: 100%; background-size: cover; }
.kitchen2 .li-3 { background: #fff; opacity: .4; }
.kitchen2 .li-4 { background: #fff; opacity: .29; }
.kitchen2 .li-56 { width: 66.66%; background: rgba(255,255,255,.8); }
.kitchen2 .li-56 .text1, .kitchen2 .li-56 .text2 { margin: 110px 0 0 115px; }
.kitchen2 .li-56 strong { display: block; margin-bottom: 10px; }
.kitchen2 .li-56 .text2 { width: 40%; line-height: 18px; }
.kitchen2 .li-9 { background: #000; opacity: .29; }

.kitchen3, .ball-item { width: 100%; background: #fff; overflow: hidden; cursor: pointer; margin-bottom: 25px; transition: all .5s ease; }
.kitchen3:hover, .ball-item:hover { box-shadow: 0 5px 12px rgba(0, 0,0,.06); transition: all .5s ease; }
.kitchen3 li { width: 50%; float: left; }
.kitchen3 .text { width: 340px; margin: 0 auto; }
.kitchen3 h3 { font-size: 30px; margin-bottom: 10px; margin: 100px 0 10px; }
.kitchen3 .note, .ball-item .note { font-size: 18px; color: #727171; }
.kitchen3 .cont-intro, .ball-item .cont-intro { margin-top: 30px; line-height: 20px; }
.kitchen4 { overflow: hidden; margin-bottom: 25px; }

/*shenhua & football*/
.ball-banner { margin-bottom: 25px; }
.ball-item { height: 320px; }
.ball-item li { float: left; }
.ball-item .li-1 { width: 870px; }
.ball-item .li-1 .text { width: 540px; margin: 85px auto 0; }
.ball-item .li-2 { width: 338px; }
.ball-item h3 { margin-top: 5px; }

/*contact us*/
.contact .cont-cent2 { position: relative; top: -155px; margin-bottom: -130px; }
.contact-text { background: #fff; padding: 70px 160px; overflow: hidden; transition: all .5s ease; }
.contact-text:hover { box-shadow: 0 5px 12px rgba(0, 0,0,.06); transition: all .5s ease; }
.contact-text ul { position: relative; overflow: hidden; }
.contact-text li { width: 50%; float: left; color: #595757; font-size: 16px; }
.contact-text h3 { color: #3e3a39; margin-bottom: 50px; }
.contact-text .address { line-height: 20px; }
.contact-text .address:before { content: ""; display: inline-block; width: 12px; height: 2px; background: #b8b8b8; position: relative; top: -10px; }
.contact-text .li-2 { position: absolute; display: inline-block; right: 0; bottom: 0; }
.contact-text .li-2 img { margin: 50px 10px 0 10px; }
.contact-text .phone { display: inline-block; }
.contact-text .icon-ph { display: inline-block; width: 31px; height: 31px; background: url(/Images/About/icon-ph.png) no-repeat center; position: relative; top: 5px; margin-right: 5px; }

.contact .map { padding: 5px; background: #fff; height: 740px; margin-top: 25px; }

/*Join us*/
.join .cont-cent2 { background: #fff; color: #595757; position: relative; top: -173px; margin-bottom: -150px; transition: all .5s ease; }
.join .cont-cent2:hover { box-shadow: 0 5px 12px rgba(0, 0,0,.06); transition: all .5s ease; }
.join .join-cont { width: 990px; margin: 0 auto; }
.join .text01 .note, .com-note { font-size: 20px; margin-bottom: 5px; color: #727171; }
.join .text01 h3:after, .com-h3:after { display: block; content: ''; width: 12px; height: 2px; background: #727171; margin-top: 10px; }
.join .text01, .know .text01, .know .text02, .know .text03 { padding: 65px 0; color: #595757; }
.join .text01 ul { margin-top: 40px; }
.join .text01 ul li, .join .text02 .ul-1 li { font-size: 20px; line-height: 28px; }
.join .text02 { overflow: hidden; padding: 80px 0 140px; }
.join .text02 .ul-1 { margin-top: 44px; margin-bottom: 50px; }

.join .text02 .ul-2 li { float: left; }
.join .text02 .ul-2 .li-1 { width: 136px; height: 140px; text-align: center; background: url(/Images/About/join02.png) no-repeat; font-size: 22px; line-height: 26px; color: #6e6d6d; }
.join .text02 .ul-2 .li-1 p { padding-top: 45px; }
.join .text02 .ul-2 .dot { width: 76px; height: 140px; background: url(/Images/About/join03.png) center no-repeat; }

/*konw*/
.com-h3 { margin-bottom: 45px; color: #3e3a39; }
.com-intro { font-size: 16px; line-height: 28px; }
.know { overflow: hidden; margin-bottom: -175px; }
.know .cont-cent2 { position: relative; top: -175px; overflow: hidden\0; }
.know .text01 { width: 100%; }
.know .shadow { background: #fff; overflow: hidden; transition: all .5s ease; }
.know .shadow:hover { box-shadow: 0 5px 12px rgba(0, 0,0,.06); transition: all .5s ease; }
.know .text01 .cont-intro { font-size: 18px; line-height: 24px; }
.know .text02 .cont-intro { margin-right: -45px; }
.know .text02 ul { margin-right: 45px; float: left; width: 472px; border-top: 1px solid #e3e3e3; }
.know .text02 ul li { line-height: 30px; border-bottom: 1px solid #e3e3e3; }
.know .text03 { margin-top: 25px; margin-bottom: 25px; }
.know .text03 .cont-intro { margin-right: -42px; }
.know .text03 dl { width: 216px; float: left; margin-right: 42px; }
.know .text03 h4 { font-size: 20px; padding-bottom: 5px; margin: 20px 0 5px; border-bottom: 1px solid #dedddd; }
.know .text03 dd p { line-height: 18px; }
.know .text04 { margin-right: -23px; }
.know .text04 dl { width: 642px; background: #fff; float: left; margin-right: 23px; margin-bottom: 30px; transition: all .5s ease; }
.know .text04 dl:hover { box-shadow: 0 8px 20px rgba(0, 0,0,.15); transition: all .5s ease; }
.know .text04 dl dd { width: 326px; margin: 0 auto; padding: 55px 0 70px; }
.know .text04 dl .dl-1 { width: 346px; }
.know .text04 dl .dl-4 { width: 336px; }
.know .text04 .com-note { margin: 8px 0 30px; }
.know .text04 .know-more { display: inline-block; font-size: 12px; padding: 7px 10px; border: 1px solid #959494; margin-top: 60px; transition: all .3s ease; }
.know .text04 .know-more:hover { background: #000; color: #fff; transition: all .3s ease; }

.unormal { position: relative; bottom: -80px; overflow: hidden; opacity: 0; position: inherit\0; bottom: inherit\0; }
.normal { bottom: initial; animation: .4s allFade; opacity: 1; }
.memorabilia .unormal { position: relative; }

/*pop up*/
.popup-box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 105; }
.popup-aph { width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; left: 0; top: 0; z-index: 1; }
.popup-cont { width: 1308px; height: 80%; margin: 0 auto; background: #fff; margin-top: 60px; border-radius: 5px; position: absolute; z-index: 2; left: 50%; margin-left: -654px; }


@keyframes allFade {
    0% { opacity: 0; top: 60px; }
    100% { opacity: 1; top: 0; }
}

@keyframes ver-Lmove {
    0% { padding: 0; }
    100% { padding-left: 40px; }
}

@media (max-width:767px) {
    header { padding: 0 10px; }

    /*导航*/
    header h1 a { margin: 15px 0px; }
    #hamburger-1 { display: block; margin-right: 10px; }
    #nav { display: none; position: absolute; top: 60px; left: 0; background: #fff; }
    #nav li { width: 100%; }
    #nav li a { height: 40px; line-height: 40px; width: 100%; }
    header nav li > a.current, header nav li > a.current:hover, header nav li > a.current:focus { background: #c6ddfe; }
    #nav li a:before { display: none; }
    #nav.is-active { display: block; }

    /*轮播*/
    .slide-content { background-size: cover !important; }
    .slide-content .slide-links .note { font-size: 16px; }
    .slide-content .slide-links h2 { font-size: 30px; }

    .home-pro { width: 100%; padding: 25px 0 5px; display: block; line-height: 20px; }
    .home-pro a { font-size: 12px; display: inline-block; margin-bottom: 20px; width: 32.33%; }
    .sub-nav a { display: block; height: 145px; }
    .sub-nav a .cent { opacity: 1; }
    .sub-nav .big-tit { font-size: 16px; line-height: 16px; }
    .sub-nav .f22 { font-size: 14px; }
    /*home  友情链接*/
    .friend-link { height: 150px; }
    .friend-link-cont:hover { height: 100px; top: 0; }
    .friend-link-cont .fl_bg, .friend-link-cont:hover .fl_bg { background-size: initial !important; }
    .friend-link .fl-cont { padding-left: 10px; width: 100%; height: 100%; }
    .friend-link .fl-cont img { height: 60%; background-size: contain; }

    /*footer 导航*/
    #footer { padding: 15px 0; }
    .foot-nav { border-top: 1px solid #cfcfcf; }
    .foot-nav li { width: 100%; border-bottom: 1px solid #cfcfcf; }
    .foot-nav li a { padding: 0 20px; line-height: 40px; }
    .foot-nav h4 { height: 50px; line-height: 50px; position: relative; padding: 0 10px; margin-bottom: 0; }
    .foot-nav h4:after { text-align: center; content: "+"; background: initial; position: absolute; top: 0; font-size: 14px; color: #999; right: 10px; }
    .foot-nav h4.is-active:after { content: '-'; }
    .foot-nav li .list { display: none; }

    .foot-kf { float: initial; text-align: center; padding-top: 15px; clear: both; overflow: hidden; }
    .foot-kf h4 { display: none; }
    .foot-kf strong { font-size: 18px; }

    .product #page { padding-left: 0; }
    .product .pre-next { width: 100%; overflow: hidden; }
    .product .pre-next a { width: 50% !important; padding: 0 !important; text-align: center; }

    .product .home-pro a { margin: 0; }
    .product .product-list { margin-top: 30px; }
}