/* 头部全屏背景区域 */
header{ 
  position:relative; /* 相对定位，内部元素可绝对定位 */
  display:block; /* 块级元素独占一行 */
  width:100%; 
  height:939px; 
  /* 背景图，顶部居中，不平铺 */
  background:url("../images/bg_01.jpg") top center no-repeat;
}
/* 第一内容区块容器 */
.box-1{ 
  position:relative; 
  display:block; 
  width:100%; 
  height:807px; 
  background:url("../images/bg_02.jpg") top center no-repeat;
}
/* 第二内容区块容器 */
.box-2{ 
  position:relative; 
  display:block; 
  width:100%; 
  height:624px; 
  background:url("../images/bg_03.jpg") top center no-repeat;
}
/* 第三内容区块容器 */
.box-3{ 
  position:relative; 
  display:block; 
  width:100%; 
  height:900px; 
  background:url("../images/bg_04.jpg") top center no-repeat;
}
/* 第四内容区块容器 */
.box-4{ 
  position:relative; 
  display:block; 
  width:100%; 
  height:893px; 
  background:url("../images/bg_05.jpg") top center no-repeat;
}
/* 底部导航按钮组外层 */
.nav{ 
  position:absolute; /* 绝对定位悬浮 */
  bottom:0; /* 贴容器底部 */
  left:50%; 
  margin-left:-600px; /* 向左偏移一半宽度实现居中 */
  width:1200px; 
  height:300px; 
  z-index:99; /* 层级高于背景 */
}
/* 导航单个按钮通用样式 */
.nav a{ 
  display:inline-block; 
  float:left; /* 横向排列 */
  width:285px; 
  height:287px; 
  margin-right:20px;
  background-position:bottom center; /* 默认精灵图底部（常态图） */
}
/* 最后一个按钮取消右侧外边距 */
.nav a:last-child{ margin-right:0;}
/* 鼠标悬浮按钮上移，切换精灵图顶部高亮 */
.nav a:hover{ 
  background-position:top center; 
  margin-top:-10px;
}
/* 按钮1 精灵图 */
.nav a.a1{background:url("../images/btn-a.png") no-repeat;}
/* 按钮2 精灵图 */
.nav a.a2{background:url("../images/btn-b.png") no-repeat;}
/* 按钮3 精灵图 */
.nav a.a3{background:url("../images/btn-c.png") no-repeat;}
/* 按钮4 精灵图 */
.nav a.a4{background:url("../images/btn-d.png") no-repeat;}
/* 顶部视频/动画层 */
.flash{ 
  position:absolute; 
  top:0; 
  left:0; 
  width:1920px; 
  height:940px; 
  z-index:1;
}
/* 第一套轮播容器 */
.s1{ 
  position:absolute; 
  bottom:70px; 
  left:50%; 
  margin-left:-385px; 
  width:771px; 
  height:312px;
}
/* 轮播左切换按钮左偏移 */
.s1 .swiper-button-prev{ margin-left:-200px;}
/* 轮播右切换按钮右偏移 */
.s1 .swiper-button-next{ margin-right:-200px;}
/* 第二套轮播容器 */
.s2{ 
  position:absolute; 
  left:50%; 
  margin-left:-630px; 
  width:1260px; 
  height:632px;
}
.s2 .swiper-button-prev{ margin-left:-100px;}
.s2 .swiper-button-next{ margin-right:-100px;}
/* 第三套3D缩放轮播容器 */
.s3{ 
  position:absolute; 
  top:0px; 
  left:50%; 
  margin-left:-650px; 
  width:1300px; 
  height:760px;
}
.s3 .swiper-button-prev{ margin-left:-100px;}
.s3 .swiper-button-next{ margin-right:-100px;}
/* 轮播幻灯片默认缩小80% */
.s3 .swiper-slide{
  align-items: center;
  transition: 300ms; /* 切换过渡动画0.3秒 */
  transform: scale(0.8);
}
/* 当前激活幻灯片1:1原尺寸 */
.s3 .swiper-slide-active, .s3 .swiper-slide-duplicate-active{
  transform: scale(1);
}
/* swiper轮播外层容器基础 */
.swiper-container {
  width: 100%;
  height: 100%;
}
/* 单张幻灯片通用布局 */
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* 弹性布局水平垂直居中图片 */
  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;
}
/* 轮播左箭头按钮 */
.swiper-button-prev{ 
  background:url("left.png") no-repeat; 
  margin-top:-55px; 
  margin-left:-46px; 
  width:93px; 
  height:111px;
}
/* 轮播右箭头按钮 */
.swiper-button-next{ 
  background:url("right.png") no-repeat; 
  margin-top:-55px; 
  margin-left:-46px; 
  width:93px; 
  height:111px;
}
/* 顶部导航通栏 */
.navs{
  height: 75px;
  background: url("../images/t-r-b.png") repeat-x; /* 横向平铺背景 */
  padding-top: 5px;
  position: relative;
  z-index: 10;
}
/* 顶部logo区域 */
.navs .t-logo{
  display: block;
  margin: 0 0 0 10px;
  width: 700px;
  height: 70px;
  float: left;
  background: url("../images/t-logo.gif") no-repeat;
}
/* 右侧导航菜单容器 */
.r-nav-c{
  width: 654px;
  height: 37px;
  float: right;
  background: url("../images/t-nav-c.png") no-repeat;
  margin-right: 28px;
  position: relative;
  margin-top: 15px;
}
/* 导航单项容器（含下拉） */
.r-nav-c .al{
  width: 116px;
  height: 68px;
  float: left;
  margin-left: 12px;
  position: relative;
}
/* 导航按钮精灵图通用 */
.r-nav-c a{
  width: 116px;
  height: 37px;
  display: block;
  background: url("../images/t-nav.png") no-repeat;
}
/* 导航1精灵图位置 */
.r-nav-c a.a1{background-position: -12px 0px;font-size:16px;color:#242424}
/* 导航2 */
.r-nav-c a.a2{background-position: -140px 0px;}
/* 导航3 */
.r-nav-c a.a3{background-position: -268px 0px;}
/* 导航4 */
.r-nav-c a.a4{background-position: -396px 0px;}
/* 导航5 */
.r-nav-c a.a5{background-position: -524px 0px;}
/* 悬浮/激活状态切换精灵图下方 */
.r-nav-c a.a1:hover,.r-nav-c a.a1.on{background-position: -12px -37px;}
.r-nav-c a.a2:hover,.r-nav-c a.a2.on{background-position: -140px -37px;}
.r-nav-c a.a3:hover,.r-nav-c a.a3.on{background-position: -268px -37px;}
.r-nav-c a.a4:hover,.r-nav-c a.a4.on{background-position: -396px -37px;}
.r-nav-c a.a5:hover,.r-nav-c a.a5.on{background-position: -524px -37px;}
/* 下拉菜单容器 默认隐藏 */
.r-nav-c .al .aui{
  display: none;
  width: 128px;
  position: absolute;
  left: -3px;
  top: 67px;
  z-index:10
}
/* 下拉半透明遮罩背景 */
.r-nav-c .al .aui .b{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.9;
  filter:alpha(opacity=90);
}
/* 下拉列表 */
.r-nav-c .al ul{
  position: relative;
  padding: 10px 0;
}
/* 下拉单项 */
.r-nav-c .al ul li{height: 32px;}
/* 下拉链接 */
.r-nav-c .al ul li a{
  color: #404040;
  width: 110px;
  height: 32px;
  display: block;
  margin: 0 auto;
  text-align: center;
  line-height: 32px;
  background-image: none;
  border-radius: 5px;
}
/* 下拉链接悬浮变色背景 */
.r-nav-c .al ul li a:hover{background-color: #7cae95;color: #fff;}
/* 页面底部容器 */
#footer {
  clear:both; /* 清除上方浮动 */
  background: #333; /* 深灰色背景 */
  padding-bottom: 10px;
  height:100px;
}
/* 右侧悬浮侧边栏 */
.rightbar {
  width: 160px;
  height: 492px;
  position: fixed; /* 固定跟随滚动 */
  top: 40%;
  right: 0;
  margin-top: -280px; /* 垂直居中偏移 */
  background: url("../images/ce/left1.png") no-repeat;
  z-index: 10000; /* 最高层级 */
  text-align: center;
  color: #5b4022;
  /* 0.5秒过渡动画 */
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s
}
/* 侧边栏收起状态 */
.rightbar.close {
  right: -155px /* 移出屏幕右侧隐藏 */
}
/* 收起状态切换箭头背景 */
.rightbar.close .btn-close {
  background: url("../images/ce/left4.png") no-repeat
}
/* 侧边展开/收起按钮 */
.rightbar .btn-close {
  width:28px;
  height: 78px;
  background: url("../images/ce/left2.png");
  position: absolute;
  top: 10px;
  left: -28px /* 贴侧边栏左侧外面 */
}
/* 侧边栏标题 */
.rightbar h6 {
  margin-bottom: 10px;
  padding-top: 15px;
  padding-left: 28px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  overflow: hidden
}
/* 标题小字 */
.rightbar h6 span {
  display: block;
  font-size: 14px
}
/* 二维码区域 */
.rightbar .code {
  margin:30px 0 30px 10%;
  width:90%;
  text-align:center
}
/* 二维码下方文字行 */
.rightbar .code p {
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
}
/* 侧边栏普通文字 */
.rightbar p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 5px;
  padding-left: 20px;
}
/* 客服按钮区域 */
.rightbar .kefu {
  display: block;
  width:90%;
  margin-left:10%;
  height:auto;
  text-align:center
}
/* 客服链接按钮 */
.rightbar .kefu a{
  display: block;
  width: 100%;
  height:auto;
  margin-bottom:15px;
}