@charset "utf-8";

body{background: #ffffff}
.headPic{width: 100%;height: auto;padding: 0 7px;}
.headPic img{width: 100%;}
.part1{padding:46px 0 58px 0; }
.part1 .item{padding:0 7px;height: auto; }
.part1 .item .inner{width: 100%;height: auto;padding:66px 0 58px;text-align: center;box-shadow: 0 0 10px 0 rgba(27,48,31,0.21);}
.part1 .item .icon{width: 100%;height:auto;line-height: 44px;font-size: 44px;color: inherit}
.part1 .item .inner .itemname{width: 100%;text-align: center;padding: 12px 0 0 0;font-size: 20px;color: inherit}
.part1 .item:nth-child(1) .inner{background:  #C6EADE;color:#3B877D }
.part1 .item:nth-child(2) .inner{background: #F7C967;color:#ffffff;}
.part1 .item:nth-child(3) .inner{background:  #ffffff;color:#3B877D}
.part1 .item:nth-child(4) .inner{background:  #3B877D;color:#C6EADE}

.part2{padding-bottom:15px; }
.part2 .item{padding: 0 11px;}
.part2 .item .inner{width: 100%;height: auto;background-image: linear-gradient(0deg, rgba(238,238,238,0.00) 0%, rgba(238,238,238,0.00) 34%, #39877A 100%);}
.part2 .item .inner .topPic{width: 100%;height:228px;}
.part2 .item .inner .topPic img{width: 100%;height: 100%;}
.part2 .item .inner .artPart{width: 100%;height:213px; box-shadow: 0 0 6px 0 rgba(0,0,0,0.18);padding: 14px 18px;}
.part2 .item .inner .artPart .title{display: flex;justify-content: space-between;line-height: 33px;background-color: inherit;border-bottom: none;}
.part2 .item .inner .artPart .title .name{font-size: 24px;color: #2a6961;line-height: 33px;}
.part2 .item .inner .artPart .title .readMore{width: auto;line-height: 33px;}
.part2 .item .inner .artPart .title .readMore span{line-height:26px;display: inline-block;border-radius: 10px;border: 1px solid #c9c8c8;padding: 0 10px;font-size: 12px;color: #666666;}
.part2 .item  .artList{width: 100%;height: auto;}
.part2 .item  .artList li{width: 100%;border-bottom:1px solid #EBEBEB;line-height: 36px;font-size:12px;color: #707070; text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }
.part2 .item  .artList li:last-child{border-bottom: none;}

.part3-1{padding:0 9px;}
.part3-2{padding:0 9px;padding-bottom: 47px;}
.partTitle{width: 100%;height:auto;line-height: 33px;padding-bottom: 12px;font-size: 24px;color: #000000;padding-left: 9px;padding-right: 9px;}
.part3 .item{padding: 0;}
.part3 .item .inner{width: 100%;height:266px;padding-top: 85px; }
.part3 .item .inner .name1{width: 100%;line-height:28px;font-size: 20px;color: #ffffff;padding-bottom: 23px;color: inherit;text-align: center}
.part3 .item .inner .heng{width:38px;height: 3px;background: #ffffff;margin: 0 auto;margin-bottom: 24px;}
.part3 .item .inner .more{width: 100%;height: 17px;line-height: 17px;font-size: 12px;color: inherit;text-align: center}
.part3-1 .item:nth-child(1) .inner{background: #39877A;color: #ffffff;}
.part3-1 .item:nth-child(2) .inner{background: url("/static/images/article/index/part3BG2.png") no-repeat center;background-size: 100% 100%;color: #1D7E81;}
.part3-1 .item:nth-child(2) .inner .heng{background: #1D7E81}
.part3-1 .item:nth-child(3) .inner{background: url("/static/images/article/index/part3BG3.png") no-repeat center;background-size: 100% 100%;color: #ffffff;}
.part3-1 .item:nth-child(4) .inner{background: url("/static/images/article/index/part3BG4.png") no-repeat center;background-size: 100% 100%;color: #ffffff;}
.part3-2 .item:nth-child(1) .inner{background: url("/static/images/article/index/part3BG5.png") no-repeat center;background-size: 100% 100%;color: #ffffff;}
.part3-2 .item:nth-child(2) .inner{background: url("/static/images/article/index/part3BG6.png") no-repeat center;background-size: 100% 100%;color: #ffffff;}
.part3-2 .item:nth-child(3) .inner{background: #F1C875;color: #ffffff}
.part3-2 .item:nth-child(4) .inner{background: url("/static/images/article/index/part3BG8.png") no-repeat center;background-size: 100% 100%;color: #ffffff;}

.part4{padding-bottom: 28px;}
.part4 .item{padding: 0;}
.part4 .item2{padding: 0;}
.part4-1{padding: 0 9px 18px 9px;}
.part4-1 .item .inner{padding: 0;height: 310px;position:relative;}
.part4-1 .item .inner .picItem{width: 100%;height: 310px;overflow: hidden;position: relative;}
.part4-1 .item .inner .picItem img{min-width: 100%; min-height: 100%; max-width: 150%; max-height: 150%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.part4-1 .item .inner .ksinfo{background: rgba(0,0,0,0.50);position: absolute;left: 0;bottom: 0;padding:12px; }
.part4-1 .item .inner .ksinfo .title{width: 100%;padding: 0 12px 6px 12px;font-size: 24px;color: #ffffff;background-color: initial;}
.part4-1 .item .inner .ksinfo .info{width: 100%;font-size: 12px;color: #ffffff;}

.hideLine2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  overflow: hidden;}
.part4-1 .item2 .inner{padding: 0 ;width: 100%;max-height: 310px;overflow: hidden;}
.part4-1 .item2 .inner .titlePart{width: 100%;height: auto;display: flex;justify-content:space-between;}
.part4-1 .item2 .inner .titlePart li{flex: 1;height:40px;line-height: 40px;text-align: center;font-size: 18px;border-radius: 5px;width: 0;margin: 0 0 0 14px;position: relative;cursor: pointer;}
.part4-1 .item2 .inner .titlePart li:nth-child(1){background:#447FF5;color: #ffffff;}
.part4-1 .item2 .inner .titlePart li:nth-child(2){background:#C6EADE;color: #3B877D }
.part4-1 .item2 .inner .titlePart li:nth-child(3){background:#E5CA8F;color: #ffffff }
.part4-1 .item2 .inner .titlePart li:nth-child(4){background:#39877A;color: #C6EADE }
.part4-1 .item2 .inner .titlePart li:nth-child(5){background:#CED6D4;color: #1D7E81;}
.currentArrow{width: 0; height: 0;  border-left: 6px solid transparent; border-right: 6px solid transparent;border-top: 7px solid #447FF5;  font-size: 0; line-height: 0;  position: absolute;left: 50%;bottom: -7px;; margin-left: -6px;display: none}
.part4-1 .item2 .inner .titlePart li.on .currentArrow{display: block;}

.part4-1 .item2 .inner .titlePart li:nth-child(1) .currentArrow{border-top-color: #447FF5}
.part4-1 .item2 .inner .titlePart li:nth-child(2) .currentArrow{border-top-color: #C6EADE}
.part4-1 .item2 .inner .titlePart li:nth-child(3) .currentArrow{border-top-color: #E5CA8F}
.part4-1 .item2 .inner .titlePart li:nth-child(4) .currentArrow{border-top-color: #39877A}
.part4-1 .item2 .inner .titlePart li:nth-child(5) .currentArrow{border-top-color: #CED6D4}


.ksList{width: 100%;display: flex;flex-wrap: wrap;padding-top: 2px;}
.ksList li{width:139px;margin-left:14px;background: #FFFFFF;border: 1px solid #D3D3D3;border-radius: 5px;display: flex;justify-content: space-between;height: 43px;cursor:pointer;margin-top: 10px;}
.ksList li .nameInfo{width: auto;font-size: 12px;padding: 4px 0 0 8px;width: 70%}
.ksList li .nameInfo .cName{line-height: 17px;color: #4a4a4a;}
.ksList li .nameInfo .eName{line-height: 16px;color: #4a4a4a;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.ksList li .arrow{width:14px;line-height: 40px;text-align: center;border-left: 1px solid #d3d3d3}
.ksList li .arrow .icon{font-size: 11px;color: #d3d3d3}
.ksList li:hover{border-color:#447FF5}
.ksList li:hover  .nameInfo .cName{color:#447FF5 }
.ksList li:hover  .nameInfo .eName{color:#447FF5 }
.ksList li:hover .arrow .icon{color: #447FF5}
.ksList li:hover .arrow {border-color: #447FF5}


.ksList:nth-child(3) li:hover{border-color:#C6EADE}
.ksList:nth-child(3) li:hover  .nameInfo .cName{color:#C6EADE }
.ksList:nth-child(3) li:hover  .nameInfo .eName{color:#C6EADE }
.ksList:nth-child(3) li:hover .arrow .icon{color: #C6EADE}
.ksList:nth-child(3) li:hover .arrow {border-color: #C6EADE}

.ksList:nth-child(4) li:hover{border-color:#E5CA8F}
.ksList:nth-child(4) li:hover  .nameInfo .cName{color:#E5CA8F }
.ksList:nth-child(4) li:hover  .nameInfo .eName{color:#E5CA8F }
.ksList:nth-child(4) li:hover .arrow .icon{color: #E5CA8F}
.ksList:nth-child(4) li:hover .arrow {border-color: #E5CA8F}

.ksList:nth-child(5) li:hover{border-color:#39877A}
.ksList:nth-child(5) li:hover  .nameInfo .cName{color:#39877A }
.ksList:nth-child(5) li:hover  .nameInfo .eName{color:#39877A }
.ksList:nth-child(5) li:hover .arrow .icon{color: #39877A}
.ksList:nth-child(5) li:hover .arrow {border-color: #39877A}

.ksList:nth-child(6) li:hover{border-color:#CED6D4}
.ksList:nth-child(6) li:hover  .nameInfo .cName{color:#CED6D4 }
.ksList:nth-child(6) li:hover  .nameInfo .eName{color:#CED6D4 }
.ksList:nth-child(6) li:hover .arrow .icon{color: #CED6D4}
.ksList:nth-child(6) li:hover .arrow {border-color: #CED6D4}


.part4-2{padding-bottom: 28px;}
.part4-2 .item{padding: 0 9px;}
.part4-2 .item .inner{width: 100%;height:180px;line-height: 180px;font-size: 24px;color: #ffffff;text-align: center}
.part4-2 .item:nth-child(1) .inner{background: url("/static/images/article/index/part4-2Pic1.png") no-repeat center;background-size: cover}
.part4-2 .item:nth-child(2) .inner{background: url("/static/images/article/index/part4-2Pic2.png") no-repeat center;background-size: cover}
.part4-2 .item:nth-child(3) .inner{background: url("/static/images/article/index/part4-2Pic3.png") no-repeat center;background-size: cover}


/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
@media screen and  (max-width: 370px) {
 .part4-1 .item2 .inner .titlePart li{font-size: 12px;}
}
/* 小屏幕（平板，大于等于 768px） */
@media  screen and (min-width: 769px) {
 .part4-1 .item2 .inner .titlePart li{font-size: 14px;}
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 992px) {
 .part4-1 .item2 .inner .titlePart li {font-size: 16px;}
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media  screen and  (min-width: 1200px) {
 .part4-1 .item2 .inner .titlePart li{font-size: 18px;}
}


@media screen and (min-width: 1000px) {

 .part4-1 .item2 .inner .titlePart li{font-size: 18px;}
}
/*device-width:400px-1000px*/
@media screen and (min-width:550px) and (max-width: 1000px) {

 .part4-1 .item2 .inner .titlePart li{font-size: 14px;}
 .part4-1 .item2 .inner{height: auto;max-height: none}
}

@media screen and (min-width:470px) and (max-width: 550px) {

 .part4-1 .item2 .inner .titlePart li{font-size: 12px;}
 .part4-1 .item2 .inner{height: auto;max-height: none}
}
/*device-width: <= 400px*/
@media screen and (max-width: 470px) {


 .part4-1 .item2 .inner .titlePart li{font-size: 12px;line-height:20px;}
 .part4-1 .item2 .inner{height: auto;max-height: none}
}