﻿/*-------------------在线客服---------------------------*/

#rightsead { height: 200px; position: fixed; z-index: 999; top: 50%; margin-top: -59px; right: -70px; transition: .3s; font-size: 14px; }
*html #rightsead { margin-top: 368px; position: absolute;  top:expression(eval(document.documentElement.scrollTop));
}
#rightsead li { height: 50px; list-style: none; margin-bottom: 1px; }
#rightsead li a { height: 50px; cursor: pointer; float: right; display: block; min-width: 50px; max-width: 160px; text-align: center; }
#rightsead li a .icon { display: block; width: 50px; height: 50px; padding: 12px; line-height: 50px; color: #fff; -webkit-transition: background .8s; -ms-transition: background .8s; -o-transition: background .8s; transition: background .8s; border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; }
#rightsead li a .shows { display: block; }
#rightsead li a.youhui .hides { background: url(../images/arrow.png) right 0 top 15px no-repeat; margin-right: -138px; display: none; position: absolute; right: 188px; top: 0; }
#rightsead li a.youhui .hides-big { top: -25px; background: url(../images/arrow.png) right 0 top 22% no-repeat; }
#rightsead li a.youhui .hides-md { top: -12px; background: url(../images/arrow.png) right 0 top 22% no-repeat; }
#rightsead li a .hides .icon { position: absolute; left: 0; top: 0; display: block; width: 50px; height: 50px; padding: 12px; line-height: 50px; background: #fff; color: #575757; border: 1px solid #808080; }
#rightsead li a .hides span { height: 50px; line-height: 50px; padding-left: 45px; padding-right: 10px; }
#rightsead li a.youhui .hides .bg { margin-right: 9px; width: 161px; background: #808080; color: #fff; line-height: 180%; }
/*-------------------在线客服 end---------------------------*/

/******导航******/

.navbar { padding: 0 60px; background-color: transparent !important; transition: .3s; }
.navbar-brand img { height: 90px; }
.navbar-expand-md .navbar-nav .nav-link { padding: 20px 12.5px; line-height: 30px; font-size: 15px; color: rgba(255,255,255,1); }
.navbar-expand-md .navbar-nav .nav-link.dropdown-toggle::after { color: rgba(255,255,255,.6); ; }
.navbar-nav .nav-item .dropdown-menu { margin: 0; padding: 0; border-radius: 0; border-width: 0; min-width: 97.95px; background-color: #edc386; box-shadow: 0px 2px 2px rgba(30,30,30,.1); }
.navbar-nav .nav-item .dropdown-menu .dropdown-item { color: #1e1e1e; font-size: 14px; line-height: 30px; padding: 8px 5px 8px 20px; transition: .3s; }
.navbar-expand-md .navbar-nav .dropdown-item.active, .navbar-expand-md .navbar-nav .dropdown-item:active { background-color: #d0a260; }
.navbar-expand-md .navbar-nav .nav-item:hover .nav-link { background-color: #edc386; color: #1e1e1e; }
.navbar-expand-md .navbar-nav .nav-item:hover .nav-link.dropdown-toggle::after { color: rgba(30,30,30,.6); }
.navbar-expand-md .navbar-nav .nav-item:hover .dropdown-menu/******,

.navbar-expand-md .navbar-nav .nav-item:nth-child(2) .dropdown-menu******/ { display: block; }
.navbar-expand-md .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover { background-color: #d0a260; }
.navbar-expand-md .navbar-nav .nav-item-user .nav-link { transition: .3s; }
.navbar-expand-md .navbar-nav .nav-item-icon .nav-link { width: 36px; height: 36px; padding: 0; margin: 17px 0 17px 30px; background-color: #edc386; border-radius: 3px; overflow: hidden; text-align: center; line-height: 42px; }
.navbar-expand-md .navbar-nav .nav-item-icon .nav-link .icon { font-size: 20px; height: 22px; color: rgba(30,30,30,.4); padding: 0; margin: 0; }
.navbar-expand-md .navbar-nav .nav-item-user .nav-link { padding-right: 0; }
.navbar-expand-md .navbar-nav .nav-item-icon:hover .nav-link,  .navbar-expand-md .navbar-nav .nav-item-user:hover .nav-link { background-color: transparent; color: #fff; }
.navbar-expand-md .navbar-nav .nav-item-icon:hover .nav-link { background-color: #edc386; }
.navbar-expand-md .navbar-nav .nav-item-user:hover .nav-link { color: #edc386; }
/*产品导航*/
.navbar-expand-md .navbar-nav .nav-item:nth-child(3) .dropdown-item:nth-child(n+4) { display: none; }
.nav-pills-box .nav li:nth-child(2), .nav-pills-box .nav li:nth-child(3) { display: none; }
.nav-pills-box { border-bottom: 1px solid rgba(0,0,0,.08); }
.nav-pills-box .nav li a { padding: 12px 15px; font-size: 15px; position: relative; }
.nav-pills-box .nav li a::before { position: absolute; content: ''; left: 15px; right: 15px; height: 1px; background-color: #fff; bottom: 0; }
.nav-pills-box .nav li.active a { color: #d0a260; }
.nav-pills-box .nav li.active a::before { background-color: #d0a260; }
/******下滚-导航******/

.header-nav { transition: .8s ease; }
.navbar-up { top: -80px; }
.navbar-down { top: 0; background-color: #CBA989 !important; }
/******底部******/

.ft-box { padding-top: 60px; padding-bottom: 60px; }
.ft-box, .ft-box a { color: rgba(255,255,255,.6); transition: .3s; }
.ft-box a:hover, .ft-box a.text-muted:hover { color: #edc386 !important; }
.ft-box .media img { width: 60px; margin-right: 40px; }
.ft-box .media .title { font-size: 18px; margin-top: 5px; margin-bottom: 20px; }
.ft-short { position: fixed; left: 0; bottom: 30px; width: 100%; z-index: 99; }
.ft-short,  .ft-short a { color: rgba(255,255,255,.7); font-size: 14px; }
/******顶部大图******/
.topimg img { width: 100%; max-width: none; }
/******焦点图******/

.swiper-focus { background-color: #000; height: 100vh; }
.swiper-focus .container { padding-left: 120px; padding-right: 120px; }
/*左右切换*/

.swiper-focus .swiper-button-next,  .swiper-focus .swiper-button-prev { background: none; width: 10%; left: 0; top: 0; height: 100%; margin-top: 0; padding-left: 50px; }
.swiper-focus .swiper-button-next { left: auto; right: 0; padding-left: 0; padding-right: 50px; }
.swiper-focus .swiper-button-next .icon,  .swiper-focus .swiper-button-prev .icon { opacity: 0; width: 64px; height: 64px; padding: 20px; color: #1e1e1e; background-color: #edc386; border-radius: 50%; transition: .8s ease; }
.swiper-focus .swiper-button-next:hover .icon,  .swiper-focus .swiper-button-prev:hover .icon { opacity: 1; }
/******焦点图内容******/

.swiper-focus .swiper-slide { overflow: hidden; }
/*连接*/

/*连接左侧文字*/
.swiper-focus .swiper-slide .container.text-left { margin-top: 4vw; }
.swiper-focus .swiper-slide.left .link-box { margin-top: 12vw; }
/*连接居中文字*/
.swiper-focus .swiper-slide .container.text-center { margin-top: 14vw; }
.swiper-focus .swiper-slide .link-box { margin-top: 10vw; }
.swiper-focus .swiper-slide .link-box:hover .link { display: block; }
.swiper-focus .swiper-slide .link { display: none; margin-left: 60px; font-size: 15px; }
.swiper-focus .swiper-slide .link a { display: inline-block; padding: 5px 30px; border: 1px solid rgba(255,255,255,.2); margin: 0 5px; border-radius: 30px; color: rgba(255,255,255,1); background-color: rgba(0,0,0,.2); transition: .5s; }
.swiper-focus .swiper-slide .link a:hover { border-color: rgba(237,195,134,1); color: #edc386; background-color: rgba(0,0,0,.4); }
.swiper-focus .swiper-slide .link-innerbox { height: 40px; }
/*更多按钮*/

.swiper-focus .swiper-slide .hmore { width: 50px; height: 50px; opacity: 0; transition: .4s; }
.swiper-focus .swiper-slide-active .hmore { opacity: 1; }
.swiper-focus .swiper-slide.left .hmore { left: 25px; }
.swiper-focus .swiper-slide .hmore::before { width: 50px; height: 4px; margin-top: -2px; background-color: #fff; }
.swiper-focus .swiper-slide .hmore::after { width: 4px; height: 50px; margin-left: -2px; background-color: #fff; }
.swiper-focus .swiper-slide .hmore:hover::before,  .swiper-focus .swiper-slide .hmore:hover::after { background-color: #edc386; }
/*第一行文字*/

.swiper-focus .swiper-slide .animate-text { color: #fff; font-size: 25px; font-family: '楷体', '宋体', 'times'; margin-bottom: -10px; opacity: 0; }
.swiper-focus .swiper-slide-active .animate-text { opacity: 1; }
.swiper-focus .swiper-slide .animate-text span,  .swiper-focus .swiper-slide .move-s { text-shadow: 0 2px 2px rgba(0,0,0,.5); }
/*第二行文字*/

.swiper-focus .swiper-slide .move-p { margin-bottom: 15px; display: inline-block; position: relative; overflow: hidden; }
.swiper-focus .swiper-slide.left .move-p:nth-child(2) { width: 456px; }
.swiper-focus .swiper-slide[data-swiper-slide-index="0"] .animate-text .paragraph1 .word1 .char4,  .swiper-focus .swiper-slide[data-swiper-slide-index="0"] .animate-text .paragraph1 .word2 .char4,  .swiper-focus .swiper-slide[data-swiper-slide-index="1"] .animate-text .paragraph1 .word1 .char1,  .swiper-focus .swiper-slide[data-swiper-slide-index="1"] .animate-text .paragraph1 .word1 .char2,  .swiper-focus .swiper-slide[data-swiper-slide-index="1"] .animate-text .paragraph1 .word2 .char1,  .swiper-focus .swiper-slide[data-swiper-slide-index="1"] .animate-text .paragraph1 .word2 .char2,  .swiper-focus .swiper-slide[data-swiper-slide-index="2"] .animate-text .paragraph1 .word1 .char5,  .swiper-focus .swiper-slide[data-swiper-slide-index="2"] .animate-text .paragraph1 .word1 .char6,  .swiper-focus .swiper-slide[data-swiper-slide-index="2"] .animate-text .paragraph1 .word2 .char5,  .swiper-focus .swiper-slide[data-swiper-slide-index="2"] .animate-text .paragraph1 .word2 .char6 { color: #edc386; }
.swiper-focus .swiper-slide .move-p:before { content: ''; background: #edc386; position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top: 0; transform: translateY(100%); -webkit-transform: translateY(100%) }
.swiper-focus .swiper-slide .move-s { color: #fff; font-size: 22px; margin: 0; font-weight: normal; display: inline-block; position: relative; z-index: 1; animation-fill-mode: forwards; transform: translateY(100%); -webkit-transform: translateY(100%); }
.swiper-focus .swiper-slide-active .move-s { -webkit-animation-name: maskUpIn; animation-name: maskUpIn; animation-duration: 0.7s; animation-delay: 2s; }
.swiper-focus .swiper-slide-active .move-p:before { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-name: maskUp; animation-name: maskUp; animation-timing-function: cubic-bezier(.165, .84, .44, 1); animation-delay: 1.6s; }
 @-webkit-keyframes maskUp {  0% {
 -webkit-transform: translateY(100%)
}
 100% {
 -webkit-transform: translateY(-100%)
}
}
 @keyframes maskUp {  0% {
 transform: translateY(100%)
}
 100% {
 transform: translateY(-100%)
}
}
 @-webkit-keyframes maskUpIn {  0% {
 -webkit-transform: translateY(100%)
}
 100% {
 -webkit-transform: translateY(0)
}
}
 @keyframes maskUpIn {  0% {
 transform: translateY(100%)
}
 100% {
 transform: translateY(0)
}
}
/*焦点图视频*/

.video-box::before { position: absolute; content: ''; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-position: top left; background-image: url(../images/bg-dot.png); background-color: rgba(0,0,0,.5); }
.video-box video { min-height: 100vh; min-width: 100vw; width: auto; }
.swiper-focus .swiper-slide .img-box { left: 0; top: 0; z-index: 5; }
/*焦点图导航*/

.swiper-container-horizontal>.swiper-pagination-bullets,  .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 130px; right: 0; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 15px; }
.swiper-focus .swiper-pagination-bullet { display: inline-block; background-color: transparent; opacity: 1; }
.swiper-focus .swiper-pagination-bullet .dot { position: relative; display: inline-block; width: 7px; height: 7px; background-color: #fff; border-radius: 50% }
.swiper-focus .swiper-pagination-bullet .dot::before { position: absolute; content: ''; left: -9px; top: -9px; width: 25px; height: 25px; border: 1px solid transparent; border-radius: 50%; }
.swiper-focus .swiper-pagination-bullet .dot:hover,  .swiper-focus .swiper-pagination-bullet-active .dot { background-color: #edc386; }
.swiper-focus .swiper-pagination-bullet .dot:hover::before,  .swiper-focus .swiper-pagination-bullet-active .dot::before { border-color: #edc386; }
/******动画******/

.himg-hover { width: 100%; height: 100%; overflow: hidden; }
.himg-hover img { display: block; max-width: 100%; height: auto; }
.maskbox { overflow: hidden; position: relative; display: inline-block; max-width: none }
.maskbox.maskbg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: -1; }
.maskfadeUp { display: block; background-color: #edc386; z-index: 1; -webkit-transition: -webkit-transform 1.2s .5s; transition: transform 1.2s 0.5s }
.maskfadeLeft:after, .maskfadeUp:after { content: ''; display: block; width: 100%; height: 100%; position: absolute }
.maskfadeUp:after { background-color: #fff; opacity: 0.6; -webkit-transform: translateY(100%); transform: translateY(100%); transition: opacity 0.8s 1s }
.maskfadeLeft:after { left: 100%; top: 0; background-color: #edc386; }
.maskfadeLeft, .maskfadeUp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1 }
.maskfadeLeft { z-index: 2; background-color: #fff; transition: transform 0.8s 1s }
.maskfadeLeft.animated { -webkit-transform: translateX(-100%); transform: translateX(-100%) }
.maskfadeUp.animated { -webkit-transform: translateY(-101%); transform: translateY(-101%) }
.maskfadeUp.animated:after { opacity: 0 }
/******loading******/

#loading { background-color: #000; width: 100%; height: 100%; top: 0; left: 0; position: fixed; z-index: 10001 }
#loading .dot { position: absolute; width: 10px; height: 10px; border-radius: 20px; top: 50%; background-color: #edc386; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-animation: 3s linear loader infinite; animation: 3s linear loader infinite }
#loading .dot:nth-of-type(1) { left: 0px }
#loading .dot:nth-of-type(2) { left: -10px; -webkit-animation-delay: 0.15s; animation-delay: 0.15s }
#loading .dot:nth-of-type(3) { left: -20px; -webkit-animation-delay: 0.3s; animation-delay: 0.3s }
#loading .dot:nth-of-type(4) { left: -30px; -webkit-animation-delay: 0.45s; animation-delay: 0.45s }
#loading .dot:nth-of-type(5) { left: -40px; -webkit-animation-delay: 0.60s; animation-delay: 0.60s }
#loading.closed { -webkit-animation: fadeOut 0.3s; -moz-animation: fadeOut 0.3s; animation: fadeOut 0.3s }
 @-webkit-keyframes loader {  0%, 20% {
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 opacity: 0
}
 35% {
 -webkit-transform: translate(45vw, -50%);
 transform: translate(45vw, -50%);
 opacity: 1
}
 65% {
 -webkit-transform: translate(55vw, -50%);
 transform: translate(55vw, -50%);
 opacity: 1
}
 80%, 100% {
 -webkit-transform: translate(100vw, -50%);
 transform: translate(100vw, -50%);
 opacity: 0
}
}
 @keyframes loader {  0%, 20% {
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 opacity: 0
}
 35% {
 -webkit-transform: translate(45vw, -50%);
 transform: translate(45vw, -50%);
 opacity: 1
}
 65% {
 -webkit-transform: translate(55vw, -50%);
 transform: translate(55vw, -50%);
 opacity: 1
}
 80%, 100% {
 -webkit-transform: translate(100vw, -50%);
 transform: translate(100vw, -50%);
 opacity: 0
}
}
 @-webkit-keyframes fadeOut {  0% {
 opacity: 1
}
 100% {
 opacity: 0
}
}
 @keyframes fadeOut {  0% {
 opacity: 1
}
 100% {
 opacity: 0
}
}
