.works-list .item .info h2,.tecommend-list2 .item .info h2,.skill-list .item .info h2,.skill-list .item .info p { display: -webkit-box;-webkit-box-orient: vertical; overflow: hidden;}

.nNav,.flex,.tecommend-list2,.member-info,.about,.contact { display: -webkit-flex; display: flex;}

.works-list,.tecommend-list,.event-information,.skill-list,.member-list { display: grid;}

.nbanner { height: 420px; /*background-attachment: fixed;*/  background-size: 100% 100%;    background-position: center top; background-repeat: no-repeat;}


.nNav { position: relative; margin-top: -60px; padding: 36px 0; background-color: #f2f2f2;}
.nNav span { flex: 1;position: relative; font-size: 18px; height: 44px; line-height: 44px;text-align: center;}
.nNav span::after { display: block; content: ''; position: absolute;top: 50%;right: -1px; transform: translateY(-50%); width: 1px; height:50%; background-color: #dedede;;}
.nNav span a { display: block; }
.nNav span:last-of-type::after { display: none;}
.nNav span.on,.nNav span:hover { background-color: #cc0005;}
.nNav span.on a,.nNav span:hover a { color: #fff;}

.content-box { margin-bottom: 50px;}
.content-title { position: relative; margin: 40px auto; padding: 20px 0; text-align: center; font-size: 36px;}
.content-title::after { display: block; content: ''; position: absolute;bottom: 0%;left: 50%; transform: translateX(-50%); width: 36px; height:3px; background-color: #cc0005;}

.works-list,.tecommend-list { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 500px;  grid-gap: 40px;  overflow: hidden;}
.ty-works-list .item {position: relative;overflow: hidden;}
.ty-works-list .item .img { height: 410px; overflow: hidden;}
.ty-works-list .item .img img { transition: all .5s;}
.ty-works-list .item .info { position: absolute; top: 410px; left: 0;padding: 0 5%; width: 100%; height: 100%; transition: all .5s;}
.ty-works-list .item .info h2 {margin: 18px 0; font-size: 18px;-webkit-line-clamp:1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.ty-works-list .item .info p { margin-top: 20px;}
.ty-works-list .item:hover { height: 410px;}
.ty-works-list .item:hover img { transform: scale(1.05);}
.ty-works-list .item:hover .info { overflow: hidden; top: 0;  color: #fff; background-color: rgba(0, 0, 0, .5)}

.crumb { margin: 18px auto; line-height: 42px; font-size: 16px;}
.crumb span { margin: 0 10px;}

.content-text { flex: 1;padding: 0 30px;border-right: solid 1px #dedede;border-left: solid 1px #dedede; position:relative}
.content-tecommend { flex: 0 0 370px; padding: 0 30px; border-right: solid 1px #dedede;}
.content-tecommend h1 { margin-bottom: 30px; text-align: center; font-size: 28px;}
.tecommend-list {grid-template-columns: 1fr;}

#content-swiper { position: relative; margin-bottom: 20px; }
.content-swiper { margin: 0 auto; width: 760px;}
.content-swiper .item .img { position: relative; height: 506px;}
.content-swiper .item .img img { position: absolute; top: 0; right: 0; bottom: 0; left:0; margin: auto;}
.content-swiper .item .info p { margin-top: 20px; line-height: 30px; font-size: 16px;}
.content-swiper-pagination {position: absolute; left: 0; top: 526px;  padding: 4px 8px; width: 50px; height: 26px; text-align: center; background-color: #cc0005; color: #fff; border-radius: 5px;}
.content-swiper-next,.content-swiper-prev {position: absolute; top: 40%; width: 44px; height: 44px; line-height: 44px; text-align: center; background-color: #bbb; border-radius: 50%; cursor: pointer;}
.content-swiper-next {right: 0;}
.content-swiper-next span,.content-swiper-prev span { display: inline-block; font-size: 24px; color: #fff;}
.content-swiper-prev span { transform: rotate(180deg) }
.content-swiper-next:hover,.content-swiper-prev:hover { background-color: #cc0005;}
.content-text h1 { margin-bottom: 20px; font-size: 36px;}
.content-text .date { margin-bottom: 20px;}
.content-text .date span { margin-right: 10px;}
.content-info { line-height: 36px; font-size: 16px; margin-top: 20px;}

.event-information { grid-template-columns: 1fr 1fr; grid-gap: 40px;}
.event-information .info { opacity: 1;}
.enroll { margin: 30px auto; width: 240px; height: 48px; line-height: 48px; font-size: 18px; text-align: center;background-color: #cc0005; border-radius: 5px; }
.enroll a { display: block; color: #fff;}

.tougaobtn { margin: 0px auto; width: 180px; height: 48px; line-height: 48px; font-size: 18px; text-align: center;background-color: #cc0005; border-radius: 5px; position:absolute; right:0px; left:0; top:35%; z-index:999999 }
.tougaobtn a { display: block; color: #fff;}

.tecommend-list2 { flex-wrap: wrap; flex-direction: column;}
.tecommend-list2 .item { flex: 1; margin-bottom: 30px;}
.tecommend-list2 .item .img { height: 168px; overflow: hidden;;}
.tecommend-list2 .item .info h2 { margin: 10px auto; font-size: 16px;-webkit-line-clamp:1;}
.tecommend-list2 .item span { color: #666;}
.tecommend-list2 .item .read-more { margin-top: 10px; display: block; color: #ee7758; text-decoration: underline;}
.tecommend-list2 .item .read-more i { font-size: 14px; }

.skill-list {grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px;}
.skill-list .item { z-index: 100; margin: 0 5px 5px; font-size: 0; cursor: pointer;}
.skill-list .item .img { height: 280px; overflow: hidden;}
.skill-list .item .img img {height: 100%;}
.skill-list .item .info {z-index: 99; margin-top: -1px; padding: 0 36px; height: 200px; color: #666; font-size: 14px; border: solid 1px #dedede; background-color: #fff;}
.skill-list .item .info h2 { margin: 20px auto; font-size: 16px;-webkit-line-clamp:1;}
.skill-list .item .info p { margin-bottom: 14px; line-height: 24px;-webkit-line-clamp:3;}
.skill-list * { transition: all .3s;}
.skill-list .item:hover { border-radius: 10px; box-shadow: 0px 5px 5px #666; overflow: hidden;}
.skill-list .item:hover img { transform: scale(1.05);}

.member-list {grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 420px; grid-gap: 36px; }
.member-list .item {box-shadow: 0px 5px 5px #e7e6e6;  cursor: pointer; transition: all .3s;}
.member-list .item .img { margin: 25px auto; width: 140px; height: 140px; border-radius: 50%; overflow: hidden;}
.member-list .item h2 { margin-bottom: 10px; text-align: center;  font-size: 20px;}
.member-list .item p {padding: 0 30px; line-height: 26px; }
.member-list .item .read-more { display: block; margin: 20px auto; width: 134px; height: 38px; line-height: 38px; font-size: 16px; color: #fff; text-align: center; border-radius: 5px;background: radial-gradient(50% 20%, farthest-corner, #e96e38, #cc0005);background: -webkit-radial-gradient( 50% 20%, farthest-corner, #e96e38, #cc0005);}
.member-list .item:hover {box-shadow: 0px 5px 5px #666;}

.member-info,.about,.contact { justify-content: space-between; margin: 60px auto;}
.member-info .img { flex: 0 0 480px;}
.member-info .info { flex: 0 0 840px;}
.member-info .info h1,.about .info h1 { margin-bottom: 20px; font-size: 30px; font-weight: bold;}
.member-info .info h2 { margin-bottom: 20px; font-size: 24px;}
.member-info .info p,.about .info { font-size: 16px; line-height: 32px;}
.about .img { flex: 0 0 680px;}
.about .info { flex: 0 0 620px;}
.about .info h1 { font-size: 24px; font-weight: normal;}

.contact .img { flex: 0 0 680px;}
.contact .info { flex: 1; padding: 40px; background-color: #f5f5f5;}
.contact .info p { line-height: 32px; font-size: 16px;} 
.contact .img h1 { margin-bottom: 20px;; font-size: 20px; font-weight: bold;}
.contact .img h2 { margin-bottom: 30px;font-size: 20px;}
.contact .img p {margin: 20px auto; height: 38px; line-height: 38px; vertical-align: middle; font-size: 16px;}
.contact .img p span { display: inline-block; margin-right: 20px; vertical-align: middle; color: #cc0005; font-size: 28px;}
.contact .info.nb { background: none; border-left: solid 1px #dedede;}