/*1)流动布局*/
/*页面中各个区块的位置都是浮动的，不是固定不变的，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现*/
/*.left{ width:30%; float:left}
.right{ width:70%; float:right;}*/

/*html {font-size:62.5%;} */
/*字体大小是页面默认大小的100%，即12像素。字体不要使用绝对大小"PX"，要使用相对大小“REM”*/
body {font:normal 100% Arial,sans-serif;font-size:1.125rem;background-color: #f6f6f6;margin:0;}

/*给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。*/
/*img { width: auto; max-width: 100%; }*/
/*windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令*/
/*img { width:100%; -ms-interpolation-mode: bicubic;}*/


div {
/*removing the space between your inline divs*/
  box-sizing: border-box;
  /*background-color: #ffffff;*/
  border: 0px solid black;
}

/*div :hover{filter:drop-shadow(0 0 0 black);}*/

section {
	/*removing the space between your inline divs
  box-sizing: border-box;
  /*Only vertical (top and bottom) margins!*/
  margin-bottom: 1em;
  margin-top: 1em;
  float: left;
  width: 100%;

}

/*从列表中去掉圆点和外边距*/
ul{
  list-style-type:none;
  margin:0;
  padding:0;
}

h2{
	/*font-size:1.25rem;*/
	/*text-align: left;*/
	margin-top:10px;
  margin-bottom:10px;
}

h3{
  margin-top:10px;
  margin-bottom:10px;
  font-size: 100%;
  font-weight: normal;
}


p{
  margin-top:10px;
  margin-bottom:10px;
}

a{
  text-decoration:none;
  color:black;
  display : block;
}

/*div{
  字超出div外框
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}*/
/*鼠标悬停效果*/

.nav-top-aline a:hover {background-color: #7a161c;color:#ffffff;}


/*窄的段落间距*/
.p-narrow{
margin-top:4px;
margin-bottom:4px;	

}

/*div字在中间*/
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

.center-twoside-nospace {
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(0%, -50%);
  border: none;
}

/*div字在右边*/
.right {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

/*查看更多*/

.seemore{
	position: absolute;
	bottom:0;
	right: 0;
	font-size:65%;
  border: 1px solid #7a161c;
  border-radius:1em;
}

.seemore a{
  color:#7a161c;
}

.seemore:hover {background-color: #7a161c;color:#ffffff;}


.textoverflow {
  overflow: hidden; 
  text-overflow: ellipsis; 
  word-wrap: break-word;
  /*显示几行*/
  display: -webkit-box;
  -webkit-box-orient: 
  vertical;-webkit-line-clamp: 2;
}
/*------------模板用-----------------*/

/*div 和section一样功能的div-----*/
.section-line {
float: left;
width: 100%;
margin: 0 auto;
background-color: #ffffff;
}

/*顶部*/
.header-line {
font-size: 75%;
text-align:right;
background-color: #ffffff;
} 

/*顶部广告*/
.header-adv {
height: 60px;
text-align:center;
/*垂直居中*/
color: #ffffff;
background-color: #7a161c;

} 

.header-adv span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;

}

.bottom-line {
font-size: 75%;
text-align:center;
} 

/*div-----*/

/*导航栏*/
/*logo图片*/
.logo {
float: left;
/*width: 350px;*/
font-size: 100%;
display: inline-block;
} 

.nav-whole-top{

/*display: flex;*/
/*justify-content: center;
align-items: center; */
padding: 15px;
/*font-size: 97%;*/
}

.dropbtn {
  /*background-color: #4CAF50;*/
  /*color: white;*/
  /*padding: 16px;*/
  /*border: none;*/
}

/*--下拉菜单--*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: 90%;
}

.dropdown-content a {
  /*color: black;*/
  /*padding: 12px 16px;*/
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #7a161c;color:#ffffff;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #7a161c;color:#ffffff;}



/*--下拉菜单结束--*/

.nav-top-aline{
margin:0 auto;
float: right;
font-size: 100%;
display: inline-block;
}

.nav-whole-100 div:hover {background-color: #f1f1f1;padding:0.6em}

/*导航栏每个菜单栏*/
.nav-top li{
float:left;
}

.nav-top a{
display:inline-block;
width:107px;
border: 1px solid #ffffff;
padding:4px;
text-align:center;
}

/*所在路径整体*/
.path-line{
float: left;
width: 100%;
} 

/*--------------------正文用---------------------*/

/*宽度层*/

.container-topwidth{
	/*max-width: 1300px;*/
  width: 1270px;
	margin: 0 auto;
  vertical-align:middle;
  position: relative;
  /*display: inline-block;*/
}

@media only screen and (max-width: 600px) {
  .container-topwidth{
  width: 100%;
}
}

.container-pagewidth-narrow{
	width: 1100px;
	margin: 0 auto;
  vertical-align:middle;
  position: relative;
  /*使外面的div高度fit with 里面的*/
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .container-pagewidth-narrow{
  width: 100%;
}
}

/*绝对层*/

.container-abs-centerbase{
position: absolute; 
display: table;
transform: translate(-50%, -50%);  
}

.container-abs-borderbase{
position: absolute; 
display: table; 
}

.container-abs-verticalcenter{
position: absolute; 
display: table;
transform: translate(-50%, -50%);
top: 50%;
}

/*字垂直居中*/
.container-abs-verticalcenter span{
  display: table-cell;
  vertical-align: middle;
}

.container-abs-horizoncenter{
position: absolute; 
display: table;
transform: translate(-50%, -50%); 
left: 50%;
}

/*标题*/

/*用h2*/
.first-title{
color:#7a161c;font-size:200%;padding:20px
}

/*居中标题*/

/*用div*/
.second-title{
position: absolute; 
display: table;
transform: translate(-50%, -50%); 
left: 50%;
top: 0%;
font-size:150%;display:block;color:#ffffff;border:5px solid #7a161c;text-align:center;background-color:#7a161c;border-radius:20px;align-items: center;font-weight: bold;
}

.third-title{
position: absolute; 
display: table;
transform: translate(-50%, -50%); 
left: 50%;
width: 80%;
top: 0%;
font-size:150%;display:block;color:#ffffff;border:5px solid #7a161c;text-align:center;background-color:#7a161c;border-radius:20px;align-items: center;font-weight: bold;
}

/*装饰*/

/*相对层*/

/*所有相对层都要有两个class name: containner-inner container-inner-w30*/
/*.container-relate {
  float: left;
  position: relative;
  border: 10px solid #f6f6f6;
  border-top: 3px;
  margin:0 auto;
}*/

.container-relate-w15{
  width: calc(1/6*100%);
  float: left;
  position: relative;
  margin:0 auto;
  /*padding: 10px;*/
/*  display: inline-block;*/
} 

@media only screen and (max-width: 600px) {
  .container-relate-w15{
  width: 100%;
}
}

.container-relate-w20{
  width: calc(1/5*100%);
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w20{
  width: 100%;
}
}

.container-relate-w25{
  width: calc(1/4*100%);
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w25{
  width: 100%;
}
}

.container-relate-w30{
  width: 30%;
  float: left;
  position: relative;
  margin:0 auto;
}

@media only screen and (max-width: 600px) {
  .container-relate-w30{
  width: 100%;
}
}

.container-relate-w33{
  width: calc(1/3*100%);
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w33{
  width: 100%;
}
}

.container-relate-w40{
  width: 40%;
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w40{
  width: 100%;
}
}

.container-relate-w45{
  width: 45%;
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w45{
  width: 100%;
}
}


.container-relate-w50{
  width: calc(1/2*100%);
  float: left;
  position: relative;
  margin:0 auto;
}

@media only screen and (max-width: 600px) {
  .container-relate-w50{
  width: 100%;
}
}

.container-relate-w60{
  width: 60%;
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w60{
  width: 100%;
}
}

.container-relate-w66{
  width: calc(2/3*100%);
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w66{
  width: 100%;
}
}

.container-relate-w70{
  width: 70%;
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w70{
  width: 100%;
}
}

.container-relate-w75{
  width: 75%;
  float: left;
  position: relative;
  margin:0 auto;
} 

@media only screen and (max-width: 600px) {
  .container-relate-w75{
  width: 100%;
}
}

@media only screen and (max-width: 600px) {
  .fix-width-w75{
  width: 75%;
}
}


.container-relate-w100{
  width: 100%;
  float: left;
  position: relative;
  margin:0 auto;
} 

/*图片滑动效果*/
/*图片上下移动前*/
.img-before-down-up {
  /*box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);*/
  opacity: 0;
  -webkit-transform: translate(0%, calc(-20% + 0.5em));
          transform: translate(0%, calc(-20% + 0.5em));
  -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  /*increase the responsiveness of a page by doing potentially expensive work before they are actually required*/
  will-change: transform, opacity;
}

/*上下移动*/
.img-before-down-up.scrollmove {
  opacity: 1;
  /*-webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);*/
  -webkit-transform: translate(0%, calc(0%));
          transform: translate(0%, calc(0%));
}

/*图片左右移动前*/
.img-before-left-right {
  /*box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);*/
  opacity: 0;
  /*这是起始位置*/
  -webkit-transform: translate(calc(-50% + 0.5em),0%);
          transform: translate(calc(-50% + 0.5em),0% );
  -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  /*increase the responsiveness of a page by doing potentially expensive work before they are actually required*/
  will-change: transform, opacity;
}

/*左右移动*/
.img-before-left-right.scrollmove {
  opacity: 1;
  /*-webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);*/
  /*这是最终位置*/
  -webkit-transform: translate(calc(0%),0%);
          transform: translate(calc(0%),0%);
}

/*悬停闪亮效果*/
.shine {
  overflow: hidden;
  /*宽度和字相同*/
  /*display: inline-block;*/
  position: relative;
}

.shine:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 400%;
  opacity: 0;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.5) 65%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */
.shine:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */
.shine:active:after {
  opacity: 0;
}