﻿/*new*/
.news {width: 100%; display: block; margin: auto; padding: 0 0 50px; text-align: left;}
.news li { display: block; position: relative;  width: 98%; margin: 30px auto; padding: 35px 15px; font-size: 0; background-color: #fff; border: 1px solid #ddd; border-left: 4px solid #d9e4ee;word-break: keep-all;  }
.news li * { display: inline-block; vertical-align: top; }
.news li:last-child { margin-bottom: 0; }
.news li:before { pointer-events: none; content: ""; position: absolute; top: -1px; left: -4px; width: 7px; height: 40%; background-color: rgb(61, 51, 147); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.news li:after { pointer-events: none; content: ""; position: absolute; top: calc(40% - 1px); left: -4px; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 0; border-color:rgb(61, 51, 147) transparent transparent transparent; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.news li .date-box { position: relative; padding-top: 15px; width: 77px; height: 77px; color: #333; border: 1px solid rgb(61, 51, 147); text-align: center; }
.news li .date-box .year { position: absolute; left: 0; width: 100%; bottom: 15px; font-size: 17px; }
.news li .date-box .date { font-size: 15px; }
.news li .main { padding: 0;  margin: auto; width:100%!important; display: block; word-break: keep-all; }
.news li h4{ width: 80%; max-width: 100%; margin: 0; padding-bottom: 5px; font-size: 25px; line-height: 40px; color:rgb(61, 51, 147); }
.news li p{ width: 80%; max-width: 100%;   overflow: hidden; font-size: 15px; color: #4d4d4d;word-break: keep-all; }
.news li .down { padding-top: 10px; display: block; font-size: 0; }
.news li .more { position: relative; display: inline-block; font-size: 15px; width: 105px; height: 35px; padding-left: 25px; color: #fff; line-height: 35px;      background-image: linear-gradient(60deg, rgb(61, 51, 147) 0%, rgb(43, 118, 185) 37%, rgb(44, 172, 209) 65%, rgb(53, 235, 147) 100%);
    vertical-align:bottom; }
.news li .img{   width:80%!important; margin:3% 0;  display:block;    overflow: hidden;}
.news li .more:before { pointer-events: none; content: ""; position: absolute; top: 13px; right: 20px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #fff; }
.news li:hover:before { height: 55%; }
.news li:hover:after { top: calc(55% - 1px); }
.news li:hover .more { background: #00afb9; }
.news .bg-box {  }
.news .bg-box2 { padding: 15px 0; background-color: #fff; border: 1px solid #f4f5f9; box-shadow: 0px 5px 10px rgba(31, 50, 140,.2);  ;  }
.news .bg-box3 { padding: 5px;  }
.news .view-top { padding: 0 15px 15px; border-bottom: 1px solid #f4f5f9; }
.news .view-top .date { padding: 5px 0 0; color: #777; }
.news .left-block, .news .right-block { padding: 5px; }
.news .right-block { padding: 0 5px 5px; }
.news .left-block .title { font-size: 1.125rem; }
.news .left-block .title:before{ display: none;}
.news .btn-box { display: block; width: 80%; margin: auto; }
.temp-1{ margin:2% auto;  }
.txt{padding: 1%;}
.news .edit-wrap { padding: 20px 10px; }
.temp-1 ul li {font-size: 20px;}
.temp-1 th{border:2px #ffffff solid;background-color:#f5821f;color:#FFFFFF;text-align:center;vertical-align:middle;}

@media (min-width:768px) {
  .news li { display: block; position: relative; margin: 30px 0 20px; padding: 35px;  }
}


@media (min-width:980px) {
  .news .left-block { display: block; padding: 30px 30px 30px 0; width: calc(100%  ); font-size: 1rem; vertical-align: top; direction: ltr; }
  .news .right-block { display:block; padding: 30px; width: 300px; vertical-align: top;  margin: auto; }
  .news .bg-box3 { padding: 0; }
  .news .btn-box { padding: 0; }
  .news .edit-wrap { padding: 20px; }
  .news li {display: inline-block;  width: 30%; margin: 30px 1%; padding: 35px;  }



}
@media only screen and (max-width:980px) {
  .temp-1 ul li {font-size: 18px;}
}
@media only screen and (max-width:768px) {
  .temp-1 ul li {font-size: 16px;}
}
