@charset "utf-8";
.module-box{position: relative; background: url(../img/hw-bg.jpg) repeat-y center top; padding-bottom: 80px;}
.page-bg{width: 1200px; margin: 0 auto; position: relative; height: 0;}
.page-bg div{position: absolute; z-index: 2; background: url(../img/zhwh-bg.png) no-repeat; width: 320px; height: 237px; right: 330px; top: -55px;}

.module-title{padding:35px 0 15px 0; display: block; display: block; text-align: center; justify-content: center; position: relative;}
.module-title h2{color: #333333; font-size: 42px; display: inline-block; vertical-align: text-bottom;}
.module-title span{font-size: 48px; font-weight: 100; position: relative; top: -9px; display: inline-block; vertical-align: bottom; line-height: 36px;color: #555555; }
.module-title h3{color: #010101; font-size: 24px; text-transform: uppercase; font-weight: lighter; display: inline-block; vertical-align: text-bottom;}
.module-title  .tab-box{ margin-top: 6px; text-align: left;}
.module-title  .tab-box a{display: inline-block; font-size: 18px; padding: 0 20px; height: 38px; line-height: 38px; color: #333;}
.module-title  .tab-box a:hover{color: #FF7D7D;}
.module-title  .tab-box a.on{font-size: 28px;}
.module-title  .tab-box h2{font-size: 36px; font-weight: normal; }

.more-box{text-align: right; }
.more-box .more{font-size: 16px; color: #ff7d7d;}
.more-box .more .iconfont{font-size: 26px; position: relative; top: 4px;}
.more-box .more:hover .iconfont{left: 5px;}

.left-box{width: 800px; float: left;}

.module-4{ margin-top:60px;}
.module-4 .block-title{font-size: 42px; display: block; font-weight: normal; margin-bottom: 40px;}
.module-4 .hot-list{float: left; width:424px; height: 270px; position: relative;}
.module-4 .hot-list .pic{display: block; border-radius: 12px; overflow: hidden;}
.module-4 .hot-list .pic img{display: block; width:424px; height: 270px; border-radius: 8px; background-size: cover; background-position: center;}
.module-4 .hot-list .title{position: absolute; padding: 20px;bottom: 0; border-radius: 0 0 8px 8px; width: 100%;left: 0; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));}
.module-4 .hot-list .title h2{font-size: 16px; color: #fff;}
.module-4 .list-box{ width: 320px; float: right; padding-top: 0px; margin-right: 20px;}
.module-4 .list-box .list{ margin-bottom: 20px; padding: 2px 0;}
.module-4 .list-box .list a{display: block; position: relative; padding-left: 25px;}
.module-4 .list-box .list a::before{content: ""; width: 8px; height: 8px; border-radius: 100%; left: 0; top: 6px; position: absolute; background-color: #ff7d7d;}
.module-4 .list-box .list a h2{color: #333; font-size: 16px; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.module-4 .list-box .list a:hover h2{color: #ff7d7d; }

.right-box{width: 370px; float: right; padding-top: 150px;}
.right-box .block-title{font-size: 36px; display: block; font-weight: normal; text-align: center; padding: 40px 0 30px;}
.block-01 .list-box{text-align: center; padding: 0 50px;}
.block-01 .list-box a{width: 49%; font-size: 16px; text-align: center; display: inline-block; margin: 10px 0;}
.block-01 .list-box a:hover{color: #FF7D7D;}
.block-02{background: url(../img/zhwh-01.png) no-repeat center center; padding: 50px 0 60px; margin: 40px 0 30px;}
.block-02 .list-box{text-align: center; padding: 0 20px;}
.block-02 .list-box a{width: 30%; font-size: 16px; box-sizing: border-box; display: inline-block; margin: 10px 0; padding-left: 15px; position: relative;}
.block-02 .list-box a::before{content: ""; width: 8px; height: 8px; border-radius: 100%; left: 0; top: 6px; position: absolute; background-color: #ff7d7d;}
.block-02 .list-box a:hover{color: #FF7D7D;}
.block-03{margin: 70px 0;}
.block-03 a{display: block;}
.block-03 a img{display: block; margin: 0 auto;}
.block-04 .list-box{padding-left: 70px;}
.block-04 .list-box a{box-sizing: border-box; font-size: 16px; display: block; padding: 15px 0; padding-left: 20px; position: relative;}
.block-04 .list-box a::before{content: ""; width: 8px; height: 8px; border-radius: 100%; left: 0; top: 21px; position: absolute; background-color: #ff7d7d;}
.block-04 .list-box a:hover{color: #FF7D7D;}

.block-title:hover{color: #f38484;}

@media screen and (max-width: 768px) {
	
	.module-box{position: relative; background: none; padding-bottom: 0;}
	.page-bg{display: none;}

	.module-title{padding:.25rem; display: block; display: none; text-align: center; justify-content: center; position: relative;}
	.module-title img{width: 50%;}
	.module-title h2{color: #333333; font-size: 42px; display: inline-block; vertical-align: text-bottom;}
	.module-title span{font-size: 48px; font-weight: 100; position: relative; top: -9px; display: inline-block; vertical-align: bottom; line-height: 36px;color: #555555; }
	.module-title h3{color: #010101; font-size: 24px; text-transform: uppercase; font-weight: lighter; display: inline-block; vertical-align: text-bottom;}


	.left-box{width: 100%; float: none;}

	.module-4{ margin-top:0; border-bottom: 10px solid #f1f1f1; padding-bottom: 10px;}
	.module-4 .block-title{font-size: .42rem; display: block; font-weight: bold; margin-bottom: 0px; padding:.3rem .3rem .2rem; }

	.module-4 .hot-list{width: calc(100% - .5rem) ; margin:0 auto; height: auto;position: relative;border-radius: .1rem;overflow: hidden; float: none;}
    .module-4 .hot-list .pic{position: relative;}
	.module-4 .hot-list .pic img{display: block; width: 100%; height: 60vw; background-position: center; background-size: cover;}
    .module-4 .hot-list .title{position: absolute; padding: .2rem .2rem .2rem .2rem; bottom: 0;width: 100%;left: 0; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));}
    .module-4 .hot-list .title h2{font-size: .28rem; color: #fff; line-height: 1.5em;}

	.module-4 .list-box{ width: 100%; float: ; padding-top: 0; margin-right: 0; padding:.25rem .35rem 0}
	.module-4 .list-box .list{ margin-bottom: .2rem;}
	.module-4 .list-box .list a{display: block; position: relative; padding-left: 20px;}
	.module-4 .list-box .list a::before{content: ""; width: 8px; height: 8px; border-radius: 100%; left: 0; top: 5px; position: absolute; background-color: #ff7d7d;}
	.module-4 .list-box .list a h2{color: #333; font-size: 16px; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.module-4 .list-box .list a:hover h2{color: #ff7d7d; }

	.right-box{width: 100%; float: none; padding-top: 0;}
	.right-box .block-title{font-size: .42rem; display: block; font-weight: bold; margin-bottom: 0px; padding:.3rem .3rem .2rem;}
	.block-01 .list-box{text-align: left; padding: 0 .35rem;}
	.block-01 .list-box a{width: 49%; font-size: 16px; text-align: center; display: inline-block; margin: .15rem 0;}
	.block-01 .list-box a:hover{color: #FF7D7D;}
	.block-02{background: url(../img/zhwh-01.png) no-repeat center center; padding: 50px 0 60px; margin: 0;}
	.block-02 .list-box{text-align: left; padding: 0 0 0 30px;}
	.block-02 .list-box a{width: 30%; font-size: 16px; box-sizing: border-box; display: inline-block; margin: 10px 0; padding-left: 15px; position: relative;}
	.block-02 .list-box a::before{content: ""; width: 8px; height: 8px; border-radius: 100%; left: 2px; top: 6px; position: absolute; background-color: #ff7d7d;}
	.block-02 .list-box a:hover{color: #FF7D7D;}
	.block-03{margin: .2rem 0;}
	.block-03 a{display: block;}
	.block-03 a img{display: block; width: calc(100% - .5rem); margin: 0 auto;}

	.block-04 .block-title{text-align: left;}
	.block-04 .list-box{padding: 0 .35rem;}
	.block-04 .list-box a{box-sizing: border-box; font-size: 16px; display: block; padding: .15rem 0; padding-left: 20px; position: relative;}
	.block-04 .list-box a::before{content: ""; width: 8px; height: 8px; border-radius: 100%; left: 0; top: 21px; position: absolute; background-color: #ff7d7d;}
	.block-04 .list-box a:hover{color: #FF7D7D;}
	
}