@charset "utf-8"; 
/*body{ background: #fff url('./images/background.jpg') no-repeat top center; }*/
header{ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);}
.mod-nav-list a{ line-height: 35px; font-size:16px; }

.banner { margin-top: -150px; margin-bottom: 20px;} 
.banner .intro{ border-radius:16px; overflow:hidden; }
.intro h1{ height:52px; background: url('../images/intro.png') no-repeat top center;   margin:0 auto; }
.banner .introduce p{ width:100%; margin-top:0px; color:#fff; font-size:17px; line-height:26px; margin-bottom:0; padding-top:10px; padding-bottom:26px; padding-left: 50px; padding-right: 40px; background-color:rgba(224,79,71,1); }
 .main{ padding-top: 15px; }
.main .col-sm-4{ margin: 25px 0;}
.main .viedo_box > img{ width:100%; height:169px; }

.viedo_box{ position:relative; overflow:hidden;} 
.viedo_box a{ position:absolute; left:0; top:0; display:flex; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.3); opacity: 0; }
.viedo_box a:hover { opacity: 1;}
.viedo_box a img{ align-self:center; margin:0 auto; }
.word_box { background:#fcebe0; width:100%; height:auto; text-align:center; line-height:22px; padding: 8px 0; }
.word_box .title{ font-size:15px; }
.word_box .author{ font-size:13px; }

.myPage1{ text-align:center; margin-top:50px; position:relative;}
.pager { padding: 15px; margin: 30px 50px; display: inline-block; } 
.spage-number span {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    margin-left: -1px;
    padding: 0px 10px;
    line-height: 28px;
    border: 1px solid #ddd;
    text-align: center;
    transition: all .2s;
    cursor: pointer;
	margin:0 5px;
	border-radius: 3px;
}
.spage-skip span {line-height: 30px;}
.spage-skip input {  height: 32px;}
.spage-number span.active {
    background: #c96261;
    color: #fff;
    border-color: #c96261;
    z-index: 3;
}
.spage-number span.active:hover {
    background: #c96261;
    color: #fff;
    border-color: #c96261;
    z-index: 3;
} 
.spage-skip span:hover {
    background: #c96261;
    color: #fff;
    border: 1px solid #c96261;
}
.spage-skip input:focus {
    border-color: #c96261;
}

.footer { padding-top:20px; border-top: none; height: 270px; background: #fff url('./images/footer.jpg') no-repeat bottom center; }
.footer .container{ padding-top:110px; }

@media (min-width: 1200px){
	.container {
		width: 1002px;
	}
}

@media (max-width: 1200px){
	.banner { margin-top: -90px; } 
}
@media (max-width: 767px){
	.banner .introduce p { 
		padding-top: 20px;
		padding-left: 25px;
		padding-right: 20px; 
	}
	.banner {
		margin-top: -20px;
	}
	.main .viedo_box > img{ height:auto; }
	.pager { position:relative; }
}

 
@media only screen and (min-width:1199px) {

}
.pager A,.pager SPAN{display: block;
    float: left;
    margin-right: 3px;
    height: 34px;
    line-height: 20px;
    width: 34px;}
.pager A,.pager A:active  {display: block;
    float: left;
    border: 1px solid #c5c5c5;
    color: #999999;
    padding: 6px 6px;}
.pager A:hover {border:1px solid #0099FF; text-decoration:none; color:#c00;}
.pager SPAN.current {background: #999999;
    border: 1px solid #999999;
    color: #fff;
    font-weight: bold;
    padding: 6px 6px;}
.pager SPAN.disabled {border:1px solid #c5c5c5;  padding:0 6px; color:#c0c0c0;}

@media only screen and (min-width:992px)and (max-width:1198px){

/*.pager {
    padding: 15px;
    margin: 30px 80px;
position: absolute;
    right: 30%;
    bottom: -39px;
}*/
.pager A,.pager SPAN{display: block;
    float: left;
    margin-right: 3px;
    height: 34px;
    line-height: 20px;
    width: 34px;}
.pager A,.pager A:active  {display: block;
    float: left;
    border: 1px solid #c5c5c5;
    color: #999999;
    padding: 6px 6px;}
.pager A:hover {border:1px solid #0099FF; text-decoration:none; color:#c00;}
.pager SPAN.current {background: #999999;
    border: 1px solid #999999;
    color: #fff;
    font-weight: bold;
    padding: 6px 6px;}
.pager SPAN.disabled {border:1px solid #c5c5c5;  padding:0 6px; color:#c0c0c0;}

}
@media only screen and (min-width:800px)and (max-width:991px){

/*.pager {
    padding: 15px 0px;
    margin: 30px 0px;
    position: absolute;
    right: 30%;
    bottom: -39px;
}*/
}
@media only screen and (min-width:685px)and (max-width:799px){

/*.pager {
    padding: 15px;
    margin: 30px 80px;
position: absolute;
    right: 20%;
    bottom: -39px;
}*/

.pager A,.pager SPAN{display: block;
    float: left;
    margin-right: 3px;
    height: 34px;
    line-height: 20px;
    width: 34px;}
.pager A,.pager A:active  {display: block;
    float: left;
    border: 1px solid #c5c5c5;
    color: #999999;
    padding: 6px 6px;}
.pager A:hover {border:1px solid #0099FF; text-decoration:none; color:#c00;}
.pager SPAN.current {background: #999999;
    border: 1px solid #999999;
    color: #fff;
    font-weight: bold;
    padding: 6px 6px;}
.pager SPAN.disabled {border:1px solid #c5c5c5;  padding:0 6px; color:#c0c0c0;}

}
@media only screen and (min-width:525px)and (max-width:684px){

/*.pager {
    padding: 15px;
    margin: 30px 80px;
position: absolute;
    right: 10%;
    bottom: -55px;
}*/
}
@media only screen and (max-width:524px){
.myPage1{ margin-top:0px; }
.pager { margin:0; } 
.pager A,.pager SPAN{display: block;
    float: left;
    margin-right: 3px;
    height: 34px;
    line-height: 20px;
    width: 20px;}
.pager A,.pager A:active  {display: block;
    float: left;
    border: 1px solid #c5c5c5;
    color: #999999;
    padding: 6px 3px;}
.pager A:hover {border:1px solid #0099FF; text-decoration:none; color:#c00;}
.pager SPAN.current {background: #999999;
    border: 1px solid #999999;
    color: #fff;
    font-weight: bold;
    padding: 6px 3px;}
.pager SPAN.disabled {border:1px solid #c5c5c5;  padding:0 6px; color:#c0c0c0;}

}