.title_en { font-size: 30px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #f1eff1; margin-top: 50px; } .title_cn { font-size: 24px; font-weight: bold; font-stretch: normal; letter-spacing: 0px; color: #0063fb; } .swiper_Img { width: 651px; display: inline-block; position: relative; } .swiper_Img .pc-slide { width: 100%; } .view .swiper-container { height: 432px; width: 651px; margin: 0; } .view:hover .arrow { display: block; } .view .arrow { display: none; position: absolute; top: 50%; margin-top: -35px; width: 70px; height: 70px; z-index: 10; } .view .arrow-left { background: url("../images/left_one_icon.png") no-repeat center; left: 10px; } .view .arrow-right { background: url("../images/right_one_icon.png") no-repeat center; right: 10px; } .preview { padding: 0 30px; width: 100%; margin-top: 10px; position: absolute; bottom: 0; z-index: 999; white-space: nowrap; text-align: center; background: rgba(0.3, 0.3, 0.3, 0.5); } .preview .swiper-slide { padding: 0 12px; width: 23%; height: 100%; } .preview_Img { display: inline-block; width: 340px; overflow: hidden; } .preview_Img .preview-msg li { font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 30px; } .preview_Img .preview-msg li:not(:first-child) { display: none; } .preview_Img .tranImg { /* transform: translateX(-110px); */ transition: all .3s; } .preview .arrow { position: relative; width: 30px; height: 28px; z-index: 10; top: -20px } .preview .arrow-left { background: url("../images/left_two_icon.png") no-repeat center; } .preview .arrow-right { background: url("../images/right_two_icon.png") no-repeat center; } .preview img { padding: 1px; cursor: pointer; } .tranImg .active-nav img { padding: 0; border: 2px solid #FCAB20; border-radius: 5px; }