body{font-family: "微软雅黑";}

.ratio-img{ width: 100%;}

.main { max-width: 1260px; width: 100%; margin: 0 auto; position: relative; z-index: 1000; }
.main02{ margin-top:20px; margin-bottom: 50px;z-index: 99;}
.hnt_01{ overflow: hidden; margin-bottom: 50px;}
.hnt_01 .left{ float: left; width: 330px;}
.hnt_01 .left h1{ height: 42px; line-height: 42px; padding: 0 36px; border: 2px solid #000; font-size: 18px; margin-bottom: 4px;}
.hnt_01 .left ul li {padding: 0 36px;background: #8c8c91; margin-bottom: 4px; }
.hnt_01 .left ul li a{ display: block; width: 100%; height: 45px; line-height: 45px; font-size: 18px; color: #fff;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hnt_01 .left ul li.on{ background: #1290ed;}
.hnt_01 .left ul li.on a{ color: #383842;}
.hnt_01 .left ul li:hover{ background: #1290ed;}
.hnt_01 .left ul li:hover a{ color: #383842;}

.hnt_01 .right{ float:right; width: 905px; background: #f4f4f4;}
.hnt_01 .right h1{ font-size: 36px; color: #383842; margin-bottom: 50px;}
.hnt_01 .right .le{ width: 47%; float: left;}
.hnt_01 .right .re{ width: 47%; float: left; margin-left: 4%; padding-top: 4%}


.hnt_02 ul{overflow: hidden; margin: 0 -4px; margin-bottom: 20px; }
.hnt_02 h1{ font-size: 24px; color: #383842; display: block; margin-bottom: 20px;}
.hnt_02 li{ float: left; width: 24%; height: 35px; text-align: center; line-height: 35px; border: 1px solid #3e3e48; margin:0 4px; margin-bottom: 10px;}
.hnt_02 li a{ margin: 0 10px;  color: #383842; display: block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hnt_02 li:hover{ background: #1290ed; border:1px solid #1290ed;}
.hnt_02 li:hover a{ font-weight: bold;}

.hnt_03 h1{ margin-bottom: 30px;}
.hnt_03 h1 span{ font-size: 18px; display: inline-block; height: 30px; line-height: 30px; border: 2px solid #383842; border-right:0; padding-right: 14px;  padding-left: 25px;}
.hnt_03 .left{ width: 518px; float: left;}
.hnt_03 .right{ width:660px; float: right; padding: 50px 36px; border: 2px solid #000;}
.hnt_03 .right p{ color: #626670; line-height:24px;}
.hnt_03 .right .p_con{ height: 100%; overflow: hidden;}
#recon_0{ height: 180px; line-height:24px;}


.htbock_02{ margin-bottom: 54px;}
.htbock_02 ul{ overflow: hidden;}
.htbock_02 .ht_hd{ background: url(../images/hbg_01.png) no-repeat 0 center; position: relative}
.htbock_02 .ht_hd li{ float: left; height: 32px; line-height: 32px; font-size: 18px; font-weight:700; color: #fff; width: 110px; padding-left: 24px; cursor: pointer;color: #383842;}
.htbock_02 .ht_hd li:first-child + li{ padding-left: 10px; color: #fff;}
.htbock_02 .ht_hd.on02{ background: url(../images/hbg_02.png) no-repeat 0 center;}

.htbock_02 .ht_hd.on02 li{ color: #fff;} 
.htbock_02 .ht_hd.on02 li:first-child + li{ color: #383842;} 





.ht_bd li{ margin-bottom: 25px;}
.ht_bd{ border: 2px solid #000; padding:30px 26px; margin-top: -2px; }
.ht_bd .htb01.show{ display: block;}
.ht_bd .htb01{ display: none;}
.ht_bd h1{ font-size: 18px; margin-bottom: 15px;}
.ht_bd p{ font-size: 14px; color: #626670;  line-height: 24px;}

.htbock_03{ margin-bottom: 50px;}
.htbock_03 h1{ margin-bottom: 30px;}
.htbock_03 h1 span{ font-size: 18px; display: inline-block; height: 30px; line-height: 30px; border: 2px solid #383842; border-right:0; padding-right: 14px;  padding-left: 25px;}
.htbock_03 ul{ overflow: hidden;}
.htbock_03 li{ float: left; width: 20%; *margin-left: -1px; line-height:24px;}
.htbock_03 li a{ color: #626670;  display: block;}
.htbock_03 li a p{text-decoration: underline;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float: left; max-width: 100%;}
.htbock_03 li a span{ margin-left: 10px;}


.htbock_03 ul.hnt_ul li p{ max-width: 80%;}



.htbock_04 ul{ margin: 0 -10px;}
.htbock_04 li{ width: 25%;}
.htbock_04 li a{ margin:0 10px; display: block; position: relative;}
.htbock_04 p{ background: url(../images/pm_01.png) repeat; position: absolute; bottom: 0; left: 0; height: 40px; line-height: 40px; font-weight: bold; width:96%; color: #fff; padding: 0 2%; text-align: center;text-decoration: none !important;}


.htbock_01{ overflow: hidden; background: #f4f4f4; margin-bottom:30px;}
.htbock_01 .left{ float: left; width: 50%;}
.htbock_01 .right{ float: right; width: 46%; padding: 2% 2% 0; }
.htbock_01 .right h1{ font-size: 36px; color: #383842; margin-bottom: 36px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.htbock_01 .right .right_pcon{ font-size: 16px; color: #383842; line-height:30px;}
.right_pcon p{ margin-bottom: 20px;}
.htbock_01 .right .fw a{ display: inline-block; width: 124px; height: 29px; line-height: 29px; background: url(../images/t_bg.png) no-repeat; color: #fff; margin-right: 20px;}
.htbock_01 .right .fw span{float:left; padding: 0 10px;}
.htbock_01 .right .fw i{ font-family: "宋体"; font-weight: bold; float: right; margin-right: 20px;}


@media only screen and (max-width: 1366px) {
.main02{ width: 1135px !important; margin:20px auto !important}


.hnt_01 .left{ width: 20%;}
.hnt_01 .right{ width: 78%}
.hnt_03 .left{ width: 40%;}
.hnt_03 .right{ width: 45%; padding: 50px 5%;}

.hnt_01 .right .le{ width: 47%;}
.hnt_01 .right .re{ width: 47%;}
.hnt_01 .right h1{ margin-bottom: 20px; font-size: 30px;}

.htbock_01 .left{ width: 47%;}
.htbock_01 .right{ width:47%; padding:5% 2%;}
.htbock_01 .right h1{ font-size: 30px; margin-bottom: 20px;}

}

@media only screen and (max-width: 1280px) {
.main02{ width:1049px !important; margin:20px auto !important}
}

@media only screen and (max-width: 1060px) {
.main02{ width:96% !important; margin:20px auto !important}
}


@media only screen and (max-width:1024px) {
.hnt_01 .left h1{ padding:0 10px; margin-bottom:14px; display: inline-block; height: 40px; line-height: 40px; font-size: 16px;}

.hnt_01 .left{ width: 100%;}	
.hnt_01 .left ul{ overflow: hidden; margin: 0 -4px; margin-bottom: 20px;}
.hnt_01 .left ul li{ width: 20%; float: left; padding: 0; background: none;}
.hnt_01 .left ul li.on{ background: none}
.hnt_01 .left ul li a{ padding:0 10px; width: auto;background: #8c8c91; margin: 0 4px;}
.hnt_01 .left ul li.on a{background: #1290ed;}
.hnt_01 .left ul li:hover a{background: #1290ed;}

.hnt_01 .right{ width: 100%;}
.hnt_01 .right .le{ width: 47%;}
.hnt_01 .right .re{ width: 47%; margin: 0; *margin-left: -1px; padding: 1%;}
.hnt_01 .right h1{ font-size: 24px;}
.hnt_02 li{ width: 18%;}

.hnt_01 .left ul li:hover{ background: none;}

.htbock_03 ul.hnt_ul li{ width: 33.333%}

.htbock_01 .right h1{ font-size: 18px; margin-bottom: 20px;}
.htbock_01 .right .right_pcon{ font-size: 16px;}
}

@media only screen and (max-width:767px) {



.hnt_02 li{ width:31%;}
.hnt_01 .left ul li{ width: 33.333%;}
.hnt_01 .left ul li a{ height: 40px; line-height: 40px; font-size: 14px;}
.hnt_02 h1{ font-size: 16px; margin-bottom: 10px;}
.hnt_03 h1 span{ font-size: 16px;}

.htbock_04 li{ width: 50%; margin-bottom: 14px;}
.ht_bd h1{ font-size: 14px; margin-bottom: 4px;}
.htbock_02 .ht_hd li{ font-size: 16px;}
.htbock_03 ul.hnt_ul li{ width: 50%}

.ht_bd{ padding: 20px 10px;}

.htbock_01 .left{ width: 100%;}
.htbock_01 .right{ width: 96%; padding: 2%; padding-bottom: 20px;}


}

@media only screen and (max-width:640px) {

.hnt_01 .left ul li{ width: 50%}
.hnt_01 .right .le{ width: 100%;}
.hnt_01 .right .re{ width: 96%; padding-top:16px; padding-bottom: 20px;}
#recon_0{ height: auto;}
.hnt_01 .right h1{ font-size: 16px; margin-bottom: 4px;}
.hnt_03 .left{ width: 100%;}
.hnt_03 .right{ width: 96%; padding: 2%;height: auto !important; border: none;}
.htbock_03 h1 span{ font-size: 16px;}

}
@media only screen and (max-width:520px) {

.hnt_02 li{ width:47%;}
.htbock_03 li{ width: 100%}
.htbock_04 ul{ margin: 0;}
.htbock_04 li a{ margin: 0}
.htbock_03 ul.hnt_ul li{ width: 100%}


}

@media only screen and (max-width:370px) {

.hnt_02 li{ width:46%;}


}

.product-send { clear:both; width:570px; background:#fff; height:auto; padding:10px; margin:20px auto 0; overflow:hidden;}
.col-md-6 {
    width: 48%;
	float: left;
}
.col-md-6 strong{ color:#F00;}
.message_form {margin-top: 15px;}
.message_name {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #EAEAEA;
    color: #8F8F8F;
    float: left;
    height: 32px;
	font-size:14px; 
    line-height: 32px;
    padding-left: 5px;
    width: 100%;
	margin-bottom:10px;
}
.message_content {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #EAEAEA;
    color: #8F8F8F;
    height: 100px;
	font-size:14px; 
    line-height: 32px;
    overflow: hidden;
    padding: 1%;
    width: 98%;
	margin-bottom:5px;
}
.message_sub_do{ height:42px; line-height:42px; text-align:center; color:#FFF; width:100%; border:none;}
.message_sub_re{ height:32px; line-height:32px; text-align:center; color:#FFF; width:100%; border:none;}
.message_about {
    color: #8F8F8F;
    font-size: 14px;
	line-height:25px;
}



.htbock_01 .create_box { background-size:100% auto; height: auto; margin: 0;}


/*回+书店&开放图书馆*/
.book_box_top {  width:100%; border-radius:0 0 20px 0; background:#009819; position:relative;}
.book_main_wrap {  width:100%; background:#fff; margin:0 auto; }
.book_main { width:100%; overflow:hidden; position:relative;height:471px; }
.book_main img {  width:100%; height:471px;}
.book_box { width:100%; margin:0 auto 0px; position:relative; }
.book_box a.book_left_menu { height:50px; position:absolute; left:38px; width:50px; top:50%; margin-top:-25px; background:url(../images/fu_prev.png) no-repeat left center; z-index:200; display: none !important; }
.book_box a.book_right_menu { height:50px; position:absolute; right:38px; width:50px; top:50%; margin-top:-25px; background:url(../images/fu_next.png) no-repeat right center; z-index:200; display: none !important;}

.book_box_bottom .book_bottom_l { display:block; width:19px; height:100px; background:url(../images/fu_prev.png) no-repeat left center; position:absolute; left:0px; top:50%; margin-top:-50px; z-index:200; }
.book_box_bottom .book_bottom_r { display:block; width:19px; height:100px; background:url(../images/fu_next.png) no-repeat left center; position:absolute; right:0px; top:50%; margin-top:-50px; z-index:200; }

.htbock_01 .book_box_bottom { width:100%; position:relative; overflow:hidden;}
.htbock_01 .book_box_bottom ul {  width:8000%; position:relative;}
.htbock_01 .book_box_bottom li{ float:left; margin-right:20px; cursor:pointer; position:relative; height: 150px; margin-bottom: 0 }
.htbock_01 .book_box_bottom li.active span { display:none; }



.book_main { position:relative; overflow:hidden; }
.book_main_box {  width:8000%; height:480px; position:relative;}
.book_main_box img { float:left; }
.htbock_01 .book_bottom_main span { position:absolute; left:0; top:0; width:100%; height:100%; display:block; background:url(../images/fu_1px.png) repeat; }
.book_bottom_main img {  width:100% !important; height:100% !important;}




/*边距*/




@media only screen and (max-width: 767px) {



.book_box a.book_left_menu { width:36px; height:36px; background-size:100% 100%; margin-top:-18px; left:2%; }
.book_box a.book_right_menu { width:36px; height:36px; background-size:100% 100%; margin-top:-18px; right:2%; }
.book_box_bottom .book_bottom_l { width:26px; height:46px; background-size:100% 100%; margin-top:-23px; left:0%; }
.book_box_bottom .book_bottom_r { width:26px; height:46px; background-size:100% 100%; margin-top:-23px; right:0%; }


        

}