/* 全局 */
body {color: #333; background: #FFF;}
a {color: #333;}
a:hover {color: #e83223;}

.show {display: block;}
.none {display: none;}

/* 共用 */
.banner img {display: block; width: 100%;}

.position {border-bottom: 1px solid #E9E9E9; background: #FFF;}
.position .row {display: grid; grid-template-columns: 1fr auto;}
.position ul {display: flex; padding: 20px 0;}
.position li {margin: 0 0 0 20px;}
.position li:first-of-type {padding: 0 20px 0 0; margin: 0; border-right: 1px solid #DDD;}
.position li:first-of-type a {font-size: 18px;}
.position li a {display: block; padding: 0 20px;}
.position li.active a {background: #e83223; color: #FFF;}
.position form {display: flex;}
.position form input[type="text"] {background: #FFF; border: 1px solid #CCC; padding: 0 10px; line-height: 30px; margin: 0 10px 0 0;}
.position form input[type="text"]::placeholder {color: #CCC;}
.position form input[type="submit"] {background: #333; border: 1px solid #333; color: #FFF; height: 32px; padding: 0 10px; cursor: pointer;}
.position form input[type="submit"]:hover {background: #e83223; border: 1px solid #DD0000;}

.tit1 {text-align: center;}
.tit1 em {display: block; font-size: 12px; line-height: 20px; color: #999;}
.tit2 em {display: block; font-size: 12px; line-height: 20px; color: #999; text-transform: uppercase;}

.lsText1 {box-sizing: border-box; overflow: hidden;}
.lsText1 .red {color: #e83223;}
.lsText1 li {box-sizing: border-box; border-bottom: 1px solid #E9E9E9; padding: 16px 0;}
.lsText1 li:first-of-type {padding-top: 0;}
.lsText1 li:last-of-type {padding-bottom: 0; border: 0;}
.lsText1 em {display: block; font-size: 12px; line-height: 20px;}
.lsText1 strong {display: block; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.lsText1 p {display: block; color: #999; margin-top: 5px;}
.lsText1 p span {display: block; float: left; width: 74px; height: 28px; line-height: 28px; margin: 0 10px 0 0; border: 1px solid #dd4425; text-align: center; color: #dd4425; font-size: 14px;}
.lsText1.dh li {padding: 30px 0;}
.lsText1.dh li:last-of-type {border-bottom: 1px solid #E9E9E9;}
.lsText1.dh strong {font-size: 20px; line-height: 28px; font-weight: normal;}
.lsText1.dh p {margin-top: 10px;}

.lsText2 li {box-sizing: border-box; border-bottom: 1px solid #E9E9E9; background: url(/template/diy/skin/base_ico_dot1.gif) no-repeat left 13px; padding: 5px 0 5px 15px;}
.lsText2 li:last-of-type {padding-bottom: 0; border: 0;}
.lsText2 strong {display: block; font-weight: normal; line-height: 20px;}
.lsText2 em {font-size: 12px; line-height: 20px; color: #999;}

/* 字段在图片的下面 */
.lsPic {box-sizing: border-box; overflow: hidden;}
.lsPic li {box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1; float: left;}
.lsPic img {display: block; width: 100%;}
.lsPic strong {display: block; font-size: 14px; margin: 5px 0 0 0;}
.lsPic span {font-size: 12px; color: #999;}

/* 字段在图片的底部，字段后有透明背景 */
.lsPicTm {box-sizing: border-box; overflow: hidden;}
.lsPicTm li {box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1;}
.lsPicTm img {display: block; width: 100%;}
.lsPicTm p {box-sizing: border-box; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FFF; padding: 6px 15px; background: rgba(0,0,0,0.6); position: absolute; left: 0; bottom: 0;}
.lsPicTm p strong {float: left; display: block; font-size: 16px; height: 24px;}
.lsPicTm p span {float: right; font-size: 12px;}

/* 字段在图片的下面，字段后有灰色背景 */
.lsPicHd {box-sizing: border-box; overflow: hidden;}
.lsPicHd li {box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1;}
.lsPicHd img {display: block; width: 100%;}
.lsPicHd p {box-sizing: border-box; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 15px; background: #F5F5F5;}
.lsPicHd p strong {display: block; font-size: 16px; height: 24px;}
.lsPicHd p span {font-size: 12px; line-height: 20px; color: #999;}

.page {overflow: hidden; height: 100%; clear: both; padding: 30px 0 18px 0;}
.page li {float: left; display: inline; text-align: center; margin: 0 12px 12px 0; width: 38px; height: 38px; line-height: 38px;}
.page li a {display: block; height: 38px; line-height: 38px; font-weight: bold; background: url(/template/diy/skin/base_page_bg.gif) no-repeat 0 -50px; color: #666;}
.page li a:hover {background: url(/template/diy/skin/base_page_bg.gif) no-repeat 0 0; color: #FFF;}
.page li.prev {width: 70px;}
.page li.prev a {background: url(/template/diy/skin/base_page_bg.gif) no-repeat -50px -50px;}
.page li.prev a:hover {background: url(/template/diy/skin/base_page_bg.gif) no-repeat -50px 0;}
.page li.active {width: 38px; line-height: 38px; background: url(/template/diy/skin/base_page_bg.gif) no-repeat 0 0; color: #FFF;}
.page li.record {float: right; margin: 0; width: auto;}


/* 移动（小于1079px） */
@media screen and (max-width: 1079px) {
body {font-size: 14px; line-height: 22px;}

.banner {margin-top: 40px;}

.position li {line-height: 40px;}

.tit1 {background: url(/template/diy/skin/base_tit_bg.png) no-repeat center 20px; padding: 20px 0 10px 0;}
.tit2 {padding: 20px 0 10px 0;}

.lsText3 li {padding: 15px 0;}
.lsText3 li strong {max-height: 60px;}

.lsPic1 li {overflow: hidden; margin-top: 15px;}
.lsPic1 li img {max-height: 100px;}
.lsPic2 li {margin-bottom: 15px;}
.lsPic2 li img {max-height: 100px;}
.lsPic3 li {margin-top: 15px;}
.lsPic3 li img {max-height: 120px;}
}

/* PC （大于1079px） */
@media screen and (min-width: 1080px) {
body {font-size: 14px; line-height: 22px;}

.banner {margin-top: 80px;}

.position li {line-height: 50px;}

.tit1 {background: url(/template/diy/skin/base_tit_bg.png) no-repeat center 40px; padding: 40px 0 20px 0;}
.tit2 {padding: 40px 0 20px 0;}

.lsText1.tl li {float: left; width: 49%;}
.lsText1.tl li em, .lsText1.tl li strong, .lsText1.tl li p {width: 90%;}
.lsText1.tl li:nth-of-type(1) {padding: 0 0 30px 0;}
.lsText1.tl li:nth-of-type(2) {border-left: 1px solid #E9E9E9; padding: 0 0 30px 30px;}
.lsText1.tl li:nth-of-type(3) {border-bottom: 0; padding: 30px 0 0 0;}
.lsText1.tl li:nth-of-type(4) {border-bottom: 0; border-left: 1px solid #E9E9E9; padding: 30px 0 0 30px;}
.lsText1.tl strong {width: 80%;}
}