
.area{ padding: 1%; margin-top: 1%;}
.area h3{font-size: 1.05em;color: #232222;}
.area p{font-size: .9em;text-align: justify;}
.area li:not(:last-child){margin-right: 1%;}
.h2_title{font-size: 1.3em;margin-top: 1%;margin-bottom: 1em;}
.h2_title a{background-color: #f26078;color: #fff;padding: .2em .5em;}
.area1-item1{ width: 27%;}
.area1-item1 a{ display: block;}
.area1-item1 a:hover .middle{}
.area1-item1 a:last-child{ margin-top: 1em;}
.area1-item1 .middle{ height: 14em; overflow: hidden;}
.area1-item1 .middle img{ height: 14em; width:100%;object-fit: cover;transition: all 2s;}
.area1-item1 .middle img:hover{ transform: scale(1.1);}
.area1-item1 h3{margin: 1em 0;}
.area1-item2{overflow: hidden;width: 36%;}
.area1-item2 a{ transition: all 1s;}
.area1-item2 a:not(:last-child){margin-bottom: 1.2em;border-bottom: 1px solid #e8e7e7;padding-bottom: 1.2em;}
.area1-item2 a:hover{ margin-left: -1em;}
.area1-item2 .left{width: 40em;height: 5em;margin-right: .7em;}
.area1-item2 .left img{width: 100%;height: 5em;object-fit: cover;}
.area1-item2 .right h3{margin-bottom: 1em;}

.area2-item1{ width: 72%; flex-wrap: wrap;}
.area2-item1 a{background: #f7f7f7;padding-bottom: 1.5em;width: 32.65%;margin-bottom: 1em;}
.area2-item1 a:not(:last-child){ display: block;}
.area2-item1 a:nth-child(4),.area2-item1 a:nth-child(5),.area2-item1 a:last-child{margin-bottom: 0;}
.area2-item1 a:not(:nth-child(3n)){ margin-right: 1%;}
.area2-item1 a p{ padding: 0 .5em;}
.area2-item1 .middle{height: 12em;transition: all 1s;}
.area2-item1 .middle:hover{height: 11em;}
.area2-item1 .middle img{height: 12em;width:100%;object-fit: cover;transition: all 1s;}
.area2-item1 .middle img:hover{ height: 11em;}
.area2-item1 h3{padding: 1.2em .5em 0 .5em;margin-bottom: 1em;}
.area2-item2{width: 28%;padding-left: 1%;box-sizing: border-box;}
.area2-item2 a:not(:last-child){display:block;border-bottom: 1px solid #e8e7e7;padding-bottom: 1em;}
.area2-item2 a:not(:first-child) h3{margin-top: 1em;}
.area2-item2 a h3{margin-bottom: 1em;}

.position{color: #9c9c9c;padding: 1em .5em 1em;font-size:.9em;border-top: 1px solid #eeeeee;}
.position a:first-child { color: #9c9c9c;}
.list{justify-content: space-between;}
.list .left{width: 75%;padding: 1% 1.5%;box-sizing: border-box;border-right: 1px solid #eeeeee;}
.list-article{}
.list-article>ul>li{border-bottom: 1px solid #eeeeee;display: flex;padding-bottom: 1em;padding-top:1em;/* font-size: .9em; */}
.list-article>ul>li a{ display: block;}
.list-article>ul>li a:first-child{ width: 25%;overflow: hidden; margin-right: .8em; height: 10em;}
.list-article>ul>li a:first-child img{ width: 100%;}
.list-article>ul>li a:last-child{ width: 74%; margin-left: 1%; position: relative;}
.list-article>ul>li a:last-child h2{font-size: 1.1em;font-weight: normal;color: #232323;}
.list-article>ul>li a:last-child p{margin-top: .7em;font-size: .95em;margin-bottom: .7em;}
.list-article>ul>li a:last-child  time{font-size: .85em;color: #b7b6b6; display: block; margin-top: .5em;}
.list-article>ul>li a:last-child span{display: block;text-align: right;font-size: .9em;color: #f26078;}
.list .right{ width: 24%;padding: 1% 1% 1% 0; box-sizing: border-box;}
.list .right h4{font-size: 1.05em;margin-top: .5em;margin-bottom: .7em;padding-bottom: 1em;border-bottom: 1px solid #eeeeee;}
.list-group-item{line-height: 2.7em;margin: .5em 0;padding: 0 .5em;border: none;border-bottom: 1px solid #eeeeee;}
.list-group-item:last-child{border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
.list-group-item:first-child{border-top-left-radius: 0;border-top-right-radius: 0;}
.list-group-item a{font-size: .95em;}
.list-group-item a span{ padding-right: .2em;}
.pagesize{ text-align: center;}
.pagination>li>a, .pagination>li>span{color: #f26078;}


.list .left h1{text-align:center;font-size:1.5em;padding: 1em 0 .2em;font-weight:normal;color: #555;}
.article-meta{padding: .5em;  border: 1px #eeeeee dashed;text-align:center;font-size: .9em; color: #7d7d7d; margin:.7em 0;}
.article-meta span{ padding-right:.7em;}
.article-content{color:#636161;font-size: .95em;line-height:1.7em;text-align:justify;padding: 1.5em .7em;word-break: break-all;word-wrap: break-word;position: relative;}
.article-content img{display:block;margin: 1em auto;max-width: 95% !important;min-width: auto !important;height: auto !important;}
.article-content p,.article-content div{margin-bottom:.5em;color: #545454;text-align: justify;/* letter-spacing: .03em; */}
.article-content h2,.article-content h3{margin: .8em 0;font-size: 1.1em;color: #000;}
.s-top-b{padding:1.2em 0 1.5em 1em; border: 1px solid #eeeeee;padding-bottom:1.5em;}
.s-top-b p{ display: flex;}
.s-top-b span{padding-right:1em;width: 50%;color: #f26078;}
.s-top-b span:last-child{ text-align: right;}
.correlation{width:100%;overflow: hidden; margin-top: 2em;}
.correlation h4{font-size: 1.05em;color:#333;padding-bottom: 1em;position:relative;margin-bottom: 1em;}
.correlation h4::after,.correlation h4::before{content:"";position:absolute;bottom:0;left:0;}
.correlation h4::after{width:100%;height:1px;background:#e6e6e6;}
.correlation h4::before{width:112px;height:3px;background: #f26078;z-index: 999;}
.correlation ul{ width: 100%; flex-wrap: wrap;}
.correlation ul li{width: 49%;font-size: .95em;margin-bottom: 1em;}
.correlation ul li span{font-weight:bold;color:#888;margin-right:10px;}
.correlation ul li a:hover{color:#f26078;}

@media(max-width: 768px){
	.top{ display: none;}
	
    .area{ padding: 2%;}
    .area ul{ flex-wrap: wrap;}
    .area1-item1,.area1-item2,.area2-item1,.area2-item2{ width: 100%;}
    .area2-item2{ margin-top: 1em;}
    .area1-item2,.area1-item1{margin-bottom: 1.5em;}
  
	.list{ flex-wrap: wrap;}
	.list .left,.list .right{ width: 100%;}
	.list .right{ padding-left: 1%;}
}
@media(max-width: 600px){
	.s-top-b p,.correlation ul{ flex-wrap: wrap;}
	.s-top-b p span,.correlation ul li{ width: 100%; padding-left: 1%;}
	.s-top-b span:last-child{ text-align: left; margin-top: 1em;}
	.list .right h4{padding-top: 1em;border-top: 1px solid #eeeeee;}
	.list-group-item:last-child{ border-bottom: none;}
}
@media(max-width: 481px){
	.area2-item1 a{ width: 49.5%;}
	.area2-item1 a:nth-child(odd){ margin-right: 1% !important;}
	.area2-item1 a:not(:nth-child(3n)){ margin-right: 0;}
}
