﻿ .technology-nr .technology-top{width:60px;height:60px}
.technology-nr .technology-top .technology-mod em{color:var(--color);font-size:80px;position:absolute;z-index:-1;left:50%;top:-80%;transform:translate(-50%) rotate(-90deg)}
.technology-nr .technology-top>em{top:-15px;left:-4px;position:absolute;color:#FFFFFF;font-size:var(--fontsize36);z-index:1}
.technology-content{width:100%;height:100%;margin:70px auto;padding:0px}
.technology-content ul{width:100%;display:flex;justify-content:space-between}
.technology-content ul li{width:22%;display:flex;justify-content:center;align-items:center;box-shadow:0 3px 8px 0 rgba(19,20,21,.17);position:relative;padding:4% 0;padding-bottom:2%;border-radius:var(--border)}
.technology-nr{display:flex;flex-direction:column;justify-content:center;align-items:center}
.technology-nr .technology-top{position:relative}
.technology-nr p{text-align:center;margin-top:18%;font-size:var(--fontsize20);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.technology-content .show{position:absolute;background-color:var(--color);width:100%;height:100%;color:#FFFFFF;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:var(--fontsize18);opacity:0;transition:all .6s ease;border-radius:var(--border);top:0px;left:0}
.technology-content .show p{width:100%}
.technology-content .show p:nth-child(1){font-size:var(--fontsize24);text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.technology-content .show p:nth-child(2){text-align:center;font-size:var(--fontsize16);width:80%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.technology-content ul li:hover .show{opacity:1}
.technology-content ul li:hover .technology-top em{display:none}
.overview-content{display:flex;justify-content:space-between;flex-wrap:wrap;font-size:var(--fontsize16);padding:0px}
.overview-left{width:40%;margin-right:20px}
.overview-left-img-box{width:100%;height:100%;display:flex;position:relative}
.overview-left-img-box img{transform:scale(1);transition:all .3s linear}
.overview-left-img-box:hover img{transform:scale(1.03)}
.overview-right{flex:1;box-sizing:border-box;padding:0px 20px}
.overview-right p{color:var(--introcolor);margin:2% 0px;margin-right:0px}
.overview-right p:nth-child(1){color:var(--color);margin:2% 0;font-size:var(--fontsize18)}
.overview-right h4{font-size:var(--fontsize36);font-weight:var(--fontbold5);color:var(--fontcolor);margin-top:20px}
.overview-right h4 span{color:var(--color)}
@media screen and (max-width:900px){.technology-content ul{flex-wrap:wrap}
.technology-content .show p{width:100%}
.technology-content .show p:nth-child(1){font-size:var(--fontsize18);text-align:center}
.technology-content .show p:nth-child(2){font-size:var(--fontsize14)}
.technology-nr p{font-size:var(--fontsize18)}
.technology-nr .technology-top .technology-mod em{font-size:66px;top:-50%}
.technology-nr .technology-top>em{top:-1px;left:3px;font-size:var(--fontsize30)}
.technology-content ul li{width:24%}
.overview-left{width:100%;box-sizing:border-box;margin-bottom:0px;margin-right:0px}
.overview-left div{width:100%}
.overview-left img{width:100%}
}@media screen and (max-width:768px){.technology-content ul li{width:48%;margin-bottom:1.5em}
.technology-nr .technology-top .technology-mod em{font-size:50px;left:50%;top:0%}
.technology-nr .technology-top>em{top:23px;left:10px;font-size:var(--fontsize22)}
.technology-content .show p:nth-child(1){font-size:var(--fontsize24)}
.technology-content .show p:nth-child(2){font-size:var(--fontsize20);width:80%}
}@media screen and (max-width:500px){.overview-right{padding:0px}
.overview-right p{margin-right:0px}
.overview-right p:nth-child(1){color:var(--color);margin-top:20px;font-size:var(--fontsize14)}
.overview-right h4{font-size:var(--fontsize18);margin-bottom:10px}
.technology-content{margin:20px auto;padding:0px}
.technology-nr p{font-size:var(--fontsize14)}
.technology-nr img{width:55px;height:64px}
.technology-content .show p:nth-child(1){font-size:var(--fontsize16)}
.technology-content .show p:nth-child(2){font-size:var(--fontsize12);line-height:1.4;width:90%}
}
      .grade-content ul{width:100%;background-color:#FFFFFF;box-shadow:1px 1px 5px #ccc;display:flex;justify-content:center;align-items:center;border-radius:10px;transform:translateY(-70px)}
.grade-content ul li{width:18%;border-right:2px solid #EEEEEE;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:4% 0}
.grade-content ul li:last-child{border-right:0px}
.grade-content ul li p:nth-child(1){font-size:40px;font-weight:var(--fontbold7);color:var(--fontcolor)}
.grade-content ul li p:nth-child(2){color:var(--color);margin:1% 0;font-size:var(--fontsize18)}
@media screen and (max-width:900px){.grade-content ul{width:100%;flex-wrap:wrap;justify-content:center;align-items:center}
.grade-content ul li{width:50%}
}@media screen and (max-width:500px){.grade-content ul{transform:translateY(-30px)}
.grade-content ul li p:nth-child(1){font-size:var(--fontsize24)}
.grade-content ul li p:nth-child(2){font-size:var(--fontsize14)}
}