@charset "UTF-8";
/*********** OO7BTS.v2.6 目录 *****/
/*
	OO7BTS为SCSS轻量级框架,能够更加灵活操作CSS3,你可以把他了解为短小精悍的小钢炮
	作者: __OO7__
	源码链接: https://github.com/ZTaer/OO7GoldModl
	如果你有更好的想法可以联系我: QQ - 1069798804 ( 加好友时记得留言scssUser )
	
	0. 防出错类
	1.	flex函数类
		1-0. 开启弹性布局,有兼容性: display-flex( [flex-direction] )
		1-1. 单行flex布局，含兼容性: xy-items( justify-content, align-items, [flex-wrap] );
		1-2. 多行flex布局，含兼容性: xy-content( justify-content, align-items, align-content, [flex-wrap] )
	2. 颜色类
		2-0. 预计开发快捷渐变
		2-1. 修改placeholder颜色: placeholder-color( 字体大小, 字体颜色, 字间距 )
	3. 字体类
		3-0. 快捷设置字体格式: font-style( 字体大小, 字体颜色, 字体宽度, 字间距 )
		3-1. 字体不换行且文本溢出时显示省略标记(...): font-nowrap();
		3-2. 字体自动换行文本溢出时显示省略标记(...): font-wrap(); // 暂时维护
		3-3. 常用中文字体以及图片排版,图片为自适应,支持电脑/移动端: font-zh( 字体大小, 字体颜色, 字体行高, 字体间距  ) ps: 使用默认值即可 ;
		3-4. 固定范围显示字体: font-hidden( 显示宽度 , 显示高度 );
	4. 布局类
		4-0. 根据宽度"等比例缩放"大小高度: img-autosize( 原始图片宽度,原始图片高度,容器宽度,容器单位 );
		4-1. 设置主要内容区域,留出二边间隔,默认0/1200/1920大小为中间内容: div-content( 上下内间大小,书写主要内容区域大小,占用真实空间大小 );
		4-2. 图片不变形显示,防止在后台因放不同尺寸图片，造成前台因图片尺寸不同造成的布局变形,默认图片位置为center: img-window( 图片宽度,图片高度,图片x方向位置,图片y方向位置 );
		4-3. pc端翻页样式,只适合页面数小于10页,并且要求ul结构为 ul -> li -> a: ul-fanye-pc( 按钮边框设置, 按钮外间距, 按钮内间距, 按钮背景颜色, 按钮字体颜色 );
	5. 动画类
		5-0. 图片放大/缩小动画过度效果,注意二者函数配合才能实现放大动画效果，但是img-transition也可以单独使用,配合hover效果( 考虑到灵活性 ): img-transition( 动画时间 ); img-transform-scale( 放大倍数 ); img-transform-scale-window( 放大倍数 ) - 与img-window()配合;
		5-1. 自适应背景视频，与oo7.backgroundVideo()配合: background-video-init( 背景图片路径 ); - 简便方法,css中直接写在父类下,HTML要写入对应的class类名
	6.	辅助类
		6-0. 以辅助其它第三方库
		6-1. 灯箱效果-改变灯箱中字体样式: @include help-lightbox-font( 字体大小,颜色,字间距,字体宽度 );
		6-2. 滑动动画-改变按钮位置以及样式 0. 改变二个按钮之间的位置: help-slick-btn-pos( 设定大于x分辨率生效, 左按钮位置, 右按钮位置, 显示层阶 ) 1. 改变按钮二个默认样式: help-slick-btn-style( 按钮大小, 按钮颜色, 按钮粗度 ) 2. 隐藏按钮开关: help-slick-btn-hidden( 左按钮显示开关, 右按钮显示开关 ) hidden开启隐藏
	7.	其他类
	
*/
ol, ul, li {
  list-style: none;
}

a {
  text-decoration: none;
}

.oo7-animate {
  opacity: 0;
}

body {
  font-size: 15px;
  color: #333;
  font-weight: normal;
  letter-spacing: 3px;
  background: #f8f8f8;
}

a:hover {
  text-decoration: none;
}

/********* BGN *****/
/******** tel-fixed-right *****/
#tel-fixed-right ul {
  position: fixed;
  right: 10px;
  top: 350px;
  z-index: 9999;
}
#tel-fixed-right ul li {
  display: flex;
  display: -webkit-flex;
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
  justify-content: center !important;
  -webkit-justify-content: center !important;
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
  margin-bottom: 15px;
}
#tel-fixed-right ul li a {
  width: 50px;
  height: 50px;
  display: block;
  border: 1px solid #7d7d7d;
  transition: background 0.3s linear,border 0.3s linear;
}
#tel-fixed-right ul li p {
  width: 180px;
  height: 120px;
  background: url(../images/fixed_right_bg.png) center center no-repeat;
  position: absolute;
  display: none;
  right: 60px;
  text-align: center;
  color: #1f65bb;
  padding-right: 10px;
}
#tel-fixed-right ul li p b {
  width: 70%;
  text-align: center;
  margin: 12px auto;
  display: block;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #1f65bb;
  font-size: 15px;
  color: #1f65bb;
  font-weight: normal;
  letter-spacing: 3px;
}
#tel-fixed-right ul li p img {
  height: 95%;
  top: 5px;
  position: relative;
}
#tel-fixed-right ul li:hover p {
  display: block;
}
#tel-fixed-right ul li:hover a {
  border: 1px solid #1f65bb;
}
#tel-fixed-right ul li:nth-of-type(1) a {
  background: url(../images/fixed_right_icon_0.png) center center no-repeat;
}
#tel-fixed-right ul li:nth-of-type(1) a:hover {
  background: url(../images/fixed_right_icon_00.png) center center no-repeat #1f65bb;
}
#tel-fixed-right ul li:nth-of-type(2) a {
  background: url(../images/fixed_right_icon_1.png) center center no-repeat;
}
#tel-fixed-right ul li:nth-of-type(2) a:hover {
  background: url(../images/fixed_right_icon_11.png) center center no-repeat #1f65bb;
}
#tel-fixed-right ul li:nth-of-type(3) a {
  background: url(../images/fixed_right_icon_2.png) center center no-repeat;
}
#tel-fixed-right ul li:nth-of-type(3) a:hover {
  background: url(../images/fixed_right_icon_22.png) center center no-repeat #1f65bb;
}
#tel-fixed-right ul li:nth-of-type(4) a {
  background: url(../images/fixed_right_icon_3.png) center center no-repeat;
}
#tel-fixed-right ul li:nth-of-type(4) a:hover {
  background: url(../images/fixed_right_icon_33.png) center center no-repeat #1f65bb;
}

/********** fanye *****/
.fanye {
  display: flex;
  display: -webkit-flex;
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
  justify-content: center !important;
  -webkit-justify-content: center !important;
  align-items: center !important;
  -webkit-align-items: center !important;
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
  margin: 15px auto;
  cursor: pointer;
  text-indent: 0;
  width: 100%;
  padding: 0px;
}
.fanye li {
  margin: 5px;
}
.fanye li a {
  color: #444c6b;
  padding: 10px;
  border: 1px solid #c9c9c9;
  background: #f8f8f8;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
.fanye li a:hover {
  background: #444c6b;
  border-color: #444c6b;
  color: #f8f8f8;
  text-decoration: none;
}

/*********** 灯箱翻页颜色 *****/
.ekko-lightbox-nav-overlay a {
  color: #0a386b;
}

/*********** nav *****/
#nav-top .navbar-brand img {
  width: auto;
  height: 63px;
}
#nav-top .nav-item a {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.9rem;
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
#nav-top .nav-item a:hover {
  background: #dc3545;
  color: #f8f8f8;
}

#nav {
  background: #1f65bb;
}
#nav .navbar-nav {
  justify-content: space-between !important;
  -webkit-justify-content: space-between !important;
  align-items: center !important;
  -webkit-align-items: center !important;
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
}
#nav .navbar-nav li {
  flex-grow: 1;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
#nav .navbar-nav li a {
  text-align: center;
  color: #f8f8f8;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
#nav .navbar-nav li:hover {
  background: #0a386b;
}
#nav .navbar-nav li:hover a {
  color: #fff;
}
@media (min-width: 725px) {
  #nav .dropdown-menu {
    width: 100%;
    background: transparent;
    border: 0;
  }
  #nav .dropdown-menu .dropdown-item {
    width: 100%;
    height: 45px;
    background: #0a386b;
    color: #f8f8f8;
    opacity: 0.8;
    display: flex;
    display: -webkit-flex;
    flex-direction: row !important;
    -webkit-flex-direction: row !important;
    justify-content: center !important;
    -webkit-justify-content: center !important;
    align-items: center !important;
    -webkit-align-items: center !important;
    flex-wrap: nowrap !important;
    -webkit-flex-wrap: nowrap !important;
  }
  #nav .dropdown-menu .dropdown-item:hover {
    background: #1f65bb;
    color: #fff;
  }
}

.active {
  background: #0a386b;
  color: #fff;
}
.active a {
  color: #fff !important;
}

.more {
  width: 120px;
}

/*********** tel *****/
#tel {
  background: #f2f1f1;
}
#tel .form-group input {
  height: 45px;
}
#tel .form-group button {
  height: 45px;
}

/************ footer ******/
#footer {
  background: url(../images/footer_bg.jpg) center center no-repeat;
  background-size: cover;
}
#footer h4 {
  letter-spacing: 3px;
}
#footer hr {
  background: #f8f8f8;
}
#footer label {
  font-size: 1.2rem;
  font-weight: bold;
}
#footer p {
  font-size: 1rem;
  margin-bottom: 5px;
}
#footer .footer-p {
  letter-spacing: 3px;
  line-height: 1.8rem;
}
#footer .container .row {
  width: 77%;
}
#footer .footer-left {
  width: 77%;
  border-top: 1px solid #f8f8f8;
  height: 90px;
}
#footer .footer-left img {
  position: relative;
  left: 200px;
  bottom: 50px;
}

/************ end *****/
#end {
  background: #0f2a4b;
}
#end p {
  margin-bottom: 0;
  color: #eee;
}
#end a {
  color: #f8f8f8;
}

/*# sourceMappingURL=public.css.map */
#pro .fanye li {display:inline-block;background:none;color:#333;}
#pro .fanye li.active {}