.ntwas-multi_cols{padding:100px 0 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
.ntwas-multi_cols .container{padding:0 118px;}

.ntwas-multi_cols h3{font-size:60px;color:#000;font-weight:bold;text-align:center;font-family:SourceHanSansSC;line-height: 1;}

.ntwas-multi_cols ul{margin:55px 0 0;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.ntwas-multi_cols ul li{width:380px;height:230px;cursor:pointer;box-sizing:border-box;}
.ntwas-multi_cols ul li:nth-child(n+4){margin-top:96px;}

.ntwas-multi_cols ul li .box{background:#037dc6;padding:40px 35px;position:relative;}
.ntwas-multi_cols ul li h5{font-size:24px;color:#000;font-weight:bold;text-align:center;margin-bottom:10px;}
.ntwas-multi_cols ul li .t{overflow:hidden;color:#fff;transition:all 0.3s ease 0s;}
.ntwas-multi_cols ul li .t p{margin-top:-100%;opacity:0;transition:all 0.3s ease 0s;height:120px;font-size:17px;line-height:26px;}
.ntwas-multi_cols ul li .ico{width:108px;height:108px;background:#fff;border-radius:50%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;position:absolute;left:calc(50% - 54px);bottom:-50px;}
.ntwas-multi_cols ul li .ico img{transition:all 0.3s ease 0s;}
.ntwas-multi_cols ul li .ico img:last-child{display:none;}

@media screen and (max-width:1500px) {
  .ntwas-multi_cols .container{padding:0;}

  .ntwas-multi_cols ul li{width:32%;}
  .ntwas-multi_cols ul li:nth-child(n+4){margin-top:50px;}
  .ntwas-multi_cols ul li h5{font-size:20px;}
  .ntwas-multi_cols ul li .t{font-size:17px;line-height:26px;}
  .ntwas-multi_cols ul li .ico{width:80px;height:80px;left:calc(50% - 40px);bottom:-30px;}

  .ntwas-multi_cols ul li:hover .ico{bottom:-40px;}
}

@media screen and (max-width:1340px) {
  .ntwas-multi_cols h3{font-size:30px;}
  
  .ntwas-multi_cols ul li{height:200px;}
  .ntwas-multi_cols ul li:nth-child(n+4){margin-top:40px;}
  .ntwas-multi_cols ul li .box{padding:30px 25px 40px;}
  .ntwas-multi_cols ul li .t{font-size:15px;line-height:22px;}
}

@media screen and (max-width:1100px) {
  .ntwas-multi_cols .container{padding:0 20px;}
}

@media screen and (min-width: 768px) {
  .ntwas-multi_cols ul li:hover .box,.ntwas-multi_cols ul li:hover .ico{background:var(--color-primary);}
  .ntwas-multi_cols ul li:hover .ico{bottom:-53px;}
  .ntwas-multi_cols ul li:hover h5{color:#fff;}
  .ntwas-multi_cols ul li:hover .t p{margin-top:0;opacity:1;}
  .ntwas-multi_cols ul li:hover .ico img:first-child{display:none;}
  .ntwas-multi_cols ul li:hover .ico img:last-child{display:inline-block;}
}

@media screen and (max-width:768px) {
  .ntwas-multi_cols{padding:30px 0;}
  .ntwas-multi_cols .container{padding:0 10px;}
  .ntwas-multi_cols ul{margin:30px 0 0;}
  .ntwas-multi_cols ul li{width:48%;height:auto;}
  .ntwas-multi_cols ul li:nth-child(n+3){margin-top:20px;}
  .ntwas-multi_cols ul li .box{padding:20px 15px;}
  .ntwas-multi_cols ul li h5{font-size:18px;}
  .ntwas-multi_cols ul li .t{font-size:15px;line-height:20px;color:#333;}
  .ntwas-multi_cols ul li .t p{margin-top:0;opacity:1;line-height:20px;height:60px;overflow:hidden;}
  .ntwas-multi_cols ul li .ico{width:80px;height:80px;background:var(--color-primary);position:static;margin:0 auto 15px;}
  .ntwas-multi_cols ul li .ico img{transition:all 0.3s ease 0s;}
  .ntwas-multi_cols ul li .ico img:first-child{display:none;}
  .ntwas-multi_cols ul li .ico img:last-child{display:inline-block;}
}

@media screen and (max-width:480px) {
  .ntwas-multi_cols h3{font-size:24px;}
  .ntwas-multi_cols ul li .t{display:none;}
}

.ntwas-multi_cols ul li h5 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
  
  
  
  @media screen and (max-width:992px){
.ntwas-multi_cols {
    padding: 30px 0;
}.ntwas-multi_cols ul {
    margin: 10px 0 0;
}.ntwas-multi_cols ul li .ico {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
}.ntwas-multi_cols ul li h5 {
    font-size: 16px;
}.ntwas-multi_cols ul li:hover .t p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
}
}
@media screen and (max-width:768px){
.ntwas-multi_cols h3 {
    font-size: 24px;
}.ntwas-multi_cols ul li h5 {
    font-size: 14px;
}
}