/* Slideshow */ .txt-slideshow, .txt-slide { position: relative; height: 100%;width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; } /* .txt-slide:not(.slide--current) { position: absolute; top: 0; pointer-events: none; opacity: 0; } */ .txt-slide { position: absolute; top: 0; pointer-events: none; opacity: 0; } .txt-slide.slide--current { position: relative; opacity: 1; } .letter-effect { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .title--centered { width: 100%; text-align: center; } .title--centered { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /*寤虹珯琛屼笟*/ .emip{background: #373d41;padding: 0 4%;} .emip .emip-item{float: left;width: 20%;position: relative;} .emip .emip-item:nth-child(1){background: url(../img/l_bg01.png) no-repeat;background-size: cover;} .emip .emip-item:nth-child(2){background: url(../img/l_bg02.png) no-repeat;background-size: cover;} .emip .emip-item:nth-child(3){background: url(../img/l_bg03.png) no-repeat;background-size: cover;} .emip .emip-item:nth-child(4){background: url(../img/l_bg04.png) no-repeat;background-size: cover;} .emip .emip-item:nth-child(5){background: url(../img/l_bg05.png) no-repeat;background-size: cover;} .emip .emip-item::after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.6); transition: all .4s cubic-bezier(.4,0,.2,1); -webkit-transition: all .4s cubic-bezier(.4,0,.2,1); } .emip .emip-item:hover::after{ background-color: rgba(0, 20, 60, 0.9); } .emip .emip-item a{display: block;width: 100%;height: 100%;padding: 60% 10px 30%;text-align: center;position: relative;z-index: 5; transition: all .6s cubic-bezier(.4,0,.2,1); -webkit-transition: all .6s cubic-bezier(.4,0,.2,1);} .emip .emip-item a i{font-size: 45px;color: #fff;} .emip .emip-item a h3{font-size: 20px;text-align: center;color: #fff;position: relative;font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 40px 10px 0; transition: all .6s cubic-bezier(.4,0,.2,1); -webkit-transition: all .6s cubic-bezier(.4,0,.2,1);} .emip .emip-item a h3::before{ content: ""; position: absolute; top: 0px; left: 50%; display: block; width: 18px; height: 2px; background: #fff; margin: 20px 0; margin-left: -9px; transition: all .6s cubic-bezier(.4,0,.2,1); -webkit-transition: all .6s cubic-bezier(.4,0,.2,1);} .emip .emip-item a .emip-p-box{text-align: center;line-height: 1.8;opacity: 0; transition: all .6s cubic-bezier(.4,0,.2,1); -webkit-transition: all .6s cubic-bezier(.4,0,.2,1); padding: 0 10px;height: 128px;overflow: hidden;} .emip .emip-item a .emip-p-box p{ font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .emip .emip-item a:hover{padding: 45% 0;} .emip .emip-item a:hover h3{padding: 20px 10px;} .emip .emip-item a:hover h3::before{display: none;} .emip .emip-item a:hover .emip-p-box{opacity: 1;} .m-emip{display: none;} .m-emip .emip-item{float: none;width: 100%;} .m-emip .swiper-slide .emip-item img{position: absolute;left: 0;top: 0;display: block; width: 100%;height: 100%;} .m-emip .swiper-pagination-bullet{width: 20px;height: 3px;background: #fff;border-radius: 0;} .m-emip .swiper-pagination-bullet-active{background: #e00012;} @media (max-width:1200px){ .emip .emip-item a i{font-size: 30px;} .emip .emip-item a h3{font-size: 16px;} .emip .emip-item a .emip-p-box p{font-size: 14px;} } @media (max-width:768px){ .emip{display: none;} .m-emip{display: block;} .emip .emip-item a{padding: 45% 0;} .emip .emip-item a h3{padding: 20px 10px;} .emip .emip-item a h3::before{display: none;} .emip .emip-item a .emip-p-box{opacity: 1;} } @media (min-width:414px) and (max-width:567px){ .emip .emip-item a i{font-size: 45px;} .emip .emip-item a h3{font-size: 20px;font-weight: 600;} .emip .emip-item a .emip-p-box p{font-size: 18px;} }