/**tabs**/
.tabPanel ul{ width: 45%;height:42px; margin: 0 auto;}
.tabPanel ul li{
	float:left;margin:0 2px 0 0;font-size:20px;height:42px;line-height:42px;width:142px;text-align:center;cursor:pointer;
	color: #fff;
}
.tabPanel .hit{
	cursor:pointer; color: #E7D5AF; border: 1px solid #E7D5AF;border-radius: 30px;
}
.pane{border-top:0;display:none;}
/*.pane p{padding:15px 15px 0 10px;}*/
.pane h4{padding:15px 15px 0 10px;font-size:14px;font-weight:bold;}

#app {width:100%;overflow: hidden;padding:1.5rem 4rem;}
  .ui-big-images {width: 100%;overflow: hidden;display: flex;background-color: #fff;}
  .ui-big-image {
	width: 100%;
	margin-right: -100%;
  }

  .ui-big-image img {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center 20%;
	   object-position: center 20%;
		display: block;
  }
  @media (max-height: 600px) {
	.ui-big-image img {
	  -o-object-position: center center;
		 object-position: center center;
	}
  }
  .ui-thumbnails {
	position: relative;
	width:100%;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding:0 4rem;
	min-height: 11rem;
  }
  .ui-thumbnail {
	display: block;
	margin-right: 1.2rem;
	padding: .6rem 0;
	cursor: pointer;
  }
  .ui-cuticle {
	position: absolute;
	top: .4rem;
	height: 92%;
	width: 100%;
	border: .2rem solid #D4A12D;
  }
  
  .ui-thumbnail > img {
	width: auto;
  }
  
  .ui-content {
	width: 30%; line-height: 30px; color: #000;
  }
  .ui-articles {
	background:#E7D5AF;
	display: flex;
	text-align: center;
	align-items: stretch;
	overflow: hidden;
  }
  .ui-article {
	padding: 2.1rem 1.5rem;
	width: 100%;
	margin-right: -100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
  }
  .ui-paragraph {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
  } 
.lingleft{ position: absolute; left: 0;}
.lingright{ position: absolute; right: 0;}
  .ui-thumbnails button {
	background-color: rgb(255, 255, 255, 0);
	border: none;
	padding: 0;
	margin: 0;
  }
  .ui-thumbnails button:hover, .ui-thumbnailsv button:focus {
	outline: none;
  }
  .ui-thumbnails button:active {
	outline: none;
	-webkit-transform: translateY(0.25em);
			transform: translateY(0.25em);
	transition-duration: 100ms;
  }
  .ui-thumbnail img{ width: 100%; height: 100%;}
  .ui-heading {
	margin: 0;
	margin-bottom: 0.5rem;
	font-size: 1.6rem;
	font-weight: normal;
  }
  .ui-heading:before {
	font-size: .5rem;
	text-transform: uppercase;
	display: block;
	margin-bottom: .5rem;
	letter-spacing: 1px;
  }
  
  /* ---------------------------------- */
  .ui-big-image {
	opacity: 0;
	-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
  }
  .ui-big-image img {
	-webkit-transform: scale(0.85);
			transform: scale(0.85);
  }
  
  .ui-big-image[data-active] ~ .ui-big-image {
	-webkit-transform: translateX(100%);
			transform: translateX(100%);
  }
  
  .ui-big-image[data-active] {
	opacity: 1;
	-webkit-transform: translateX(0%);
			transform: translateX(0%);
  }
  .ui-big-image[data-active] img {
	-webkit-transform: scale(1);
			transform: scale(1);
  }
  
  /* ---------------------------------- */
  .ui-article {
	-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
  }
  .ui-article:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#E7D5AF;
	opacity: 1;
	transition-duration: 0.35s;
	z-index: 1;
  }
  
  .ui-article[data-active] ~ .ui-article {
	-webkit-transform: translateX(100%);
			transform: translateX(100%);
  }
  
  .ui-article[data-active] {
	-webkit-transform: translateX(0%);
			transform: translateX(0%);
  }
  .ui-article[data-active]:before {
	opacity: 0;
  }
  
  /* ---------------------------------- */
  .ui-thumbnail { position: relative;}
  .ui-thumbnail > img {
	-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
	transition-duration: 0.35s;
  }
  .ui-thumbnail:active > img {
	-webkit-transform: scale(0.9);
			transform: scale(0.9);
	transition-duration: 100ms;
  }
  .ui-thumbnail:focus {
	outline: none;
  }
  
  .ui-cuticle {
	display: none;
  }
  
  .ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img {
	-webkit-filter: grayscale(0%);
			filter: grayscale(0%);
  }
  .ui-thumbnail[data-active] .ui-cuticle {
	display: block;
  }
.ld_right{float: left;width: 76.5%; margin-top: 20px;}
  .leaderright{float: left;width: 87%; hidden; margin-top: 20px;}
  .ui-big-text{  text-indent:2rem;font-size:1rem; color:#000; float: right;line-height: 32px; margin:  40px; height:312px ; overflow-y: scroll;  }
/* 使用WebKit和Blink引擎的浏览器自定义滚动条样式 */
.ui-big-text::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}
.ui-big-text::-webkit-scrollbar-thumb {
    background: rgba(231, 213, 175); /* 设置滚动条滑块颜色和透明度 */
    border-radius: 10px;
}
.ui-big-text::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0); /* 设置滚动条轨道颜色和透明度 */
    border-radius: 10px;
}
.ui-big-text::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 213, 175); /* 设置滚动条滑块悬停时颜色和透明度 */
}
  
.lrld_left{ width:312px; font-size: 18px;}
.lrld_left img{ height: 412px;width:312px; display: block;}
.lrld_right{ width: 76.2%; text-align: left; padding-top: 40px;}
.lrld_name{ background-color: #e7d5af; height: 200px; line-height: 30px; padding: 10px; text-align: center;}
.lrld_title{ font-size: 30px; line-height: 50px; font-weight: 400;}
.lrld_text{  text-indent:2rem;font-size:1rem;color:#000; float: right;line-height: 30px;height:332px ; overflow-y: scroll;  padding:0 40px; margin-right: 40px; margin-bottom: 40px;}
/* 使用WebKit和Blink引擎的浏览器自定义滚动条样式 */
.lrld_text::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}
.lrld_text::-webkit-scrollbar-thumb {
    background: rgba(231, 213, 175); /* 设置滚动条滑块颜色和透明度 */
    border-radius: 10px;
}
.lrld_text::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0); /* 设置滚动条轨道颜色和透明度 */
    border-radius: 10px;
}
.lrld_text::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 213, 175); /* 设置滚动条滑块悬停时颜色和透明度 */
}
.lrld_photo{ overflow: hidden; clear: both; background-color: #f9f3e7; height: 200px;}
.lrld_photo p{ float: left; padding-left: 20px; padding-top: 20px;}
.lrld_photo p img{ width: 220px;}
  
/* 效果CSS开始 */
.mod18{width:90%;position:relative;margin:20px auto;}
.mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:0;background:url(../images/lingleft.png) no-repeat;}
.mod18 #prev,.mod18 #next{top:670px;width:40px;height:70px;}
.mod18 .next{right:0;background:url(../images/lingright.png) no-repeat;}
.mod18 li{float:left; overflow: hidden;}
.mod18 .cf li{position:relative;color:#fff; color: #333;}
.mod18 .cf a{display:block;position:absolute;color:#fff;}
.mod18 .cf a.lrld_left img{display:block;width:312px;height:412px;}
.mod18 .picBox{width:100%; height:600px; position:relative;overflow:hidden; background:#fff;}
.mod18 .picBox ul{width:100%;height:600px;position:absolute; left:0;}
.mod18 .picBox li{ padding-right:1px; width:100%;height:600px;}
.mod18 .listBox{width:100%;height:200px;margin:0 auto;position:relative; padding-top:15px;overflow:hidden;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，50%透明度 */
}
.mod18 .listBox ul{ width: 100%;height:156px;position:absolute; padding-left:50px;}
.mod18 .listBox li{width:127px;height:156px;cursor:pointer;position:relative; padding:5px 0 0 0;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:108px;height:156px;}
.mod18 .listBox img{ height: 150px;}
.mod18 .listBox .on img{border:3px solid #e7d5af;}
.mod18 .listBox .on{background:url(../images/img_bg.jpg) center top no-repeat;}
.mod18 .listBox .on i{display:block;}