.zy-block{ align-items: stretch; } #idx-spa .zy-block{ margin-top: .2rem; } .zy-block-img{ overflow: hidden; } .gsjs-title{ padding-bottom: 0.03rem !important; margin-bottom: 0.03rem !important; } .gsjs-title-img{ text-align: center; } .gsjs-title-img img{ width: 50%; } .gsjs-line{ display: block; height: .03rem; width: .4rem; background-color: rgba(214, 56, 116, 1); } .gsjs-l-b{ position: absolute; top: 50%; transform: translateY(-50%); } .gsjs-body{ margin-top: .15rem; } .lunbo{ padding-bottom: .2rem !important; } .brs-logo{ position: absolute; width: 100%; height: 100%; z-index: 1; opacity: 0; background-color: rgba(0, 0, 0, .5); } .swiper-brand-swiper-container{ overflow: hidden; } .brs-logo .logo-i{ width: 2.2rem; height: .8rem; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); background-repeat: no-repeat; background-size: cover; background-position: center; } .brs-logo .etc_logo-i{ width: 1.5rem; height: 1.79rem !important; } .pp-content{ display: inline-block; width: 50%; text-align: center; position: relative; text-align: center; padding-left: .15rem; vertical-align: top; } .brand-d-title a{ padding: 0 .3rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .pp-content:nth-of-type(1){ padding-left: 0; padding-right: .15rem; } .brand-d-img{ position: relative; font-size: 0; width: 100%; overflow: hidden; } .brand-d-img img{ width: 100%; } .mask { position: absolute; width: 100%; height: 100%; z-index: 1; opacity: 0; background-color: rgba(0, 0, 0, .5); } .brand-d-line{ background: #c7c7c7; height: .04rem; width: 100%; margin-top: .05rem; } .brand-d-title{ color: #9b9b9b; margin-top: .1rem; } .brand-d-title a{ overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */ } .wnyyx-text{ width: 49%; position: relative; } .wnyyx-body{ position: absolute; padding: 0 .6rem; top: 50%; transform: translateY(-50%); } .wnyyx-img{ flex: 1; overflow: hidden; } .wnyyx-img img{ width: 100%; } .yyx-line{ width: .3rem; height: .02rem; background-color: #b0b0b0; } .yyx-title{ opacity: .4; cursor: pointer; } .yyx-title-actived{ opacity: 1; } .f-qlink{ /* border-top: .01rem solid #b0b0b0; */ box-shadow: 0 0 .15rem 0 #b0b0b0; } .qlink{ font-size: 0; padding: .3rem 0 .15rem 0; } .qlink li{ display: inline-block; width: 33.33%; text-align: center; font-size: .14rem; position: relative; line-height: .14rem; } .qlink li img{ width: .5rem; } .s-r-line { margin-top: -.08rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ position: absolute; bottom: .15rem; } .swiper-pagination-bullet{ border-radius: 0; display: inline-block; width: .5rem; height: .03rem; background-color: rgba(0, 0, 0, .6); } .swiper-pagination-bullet-active{ background-color: rgba(0, 0, 0, .8); } .yyx_img{ opacity: 0; display: none; } .text_show{ animation: show 1s; -moz-animation: show 1s; -webkit-animation: show 1s; -o-animation: show 1s; animation-fill-mode :forwards; } .img_show{ display: block !important; animation: show 1s; -moz-animation: show 1s; -webkit-animation: show 1s; -o-animation: show 1s; animation-fill-mode :forwards; } #idx-spa .zy-block:nth-of-type(2n) .zy-block-text{ padding-right: .1rem; order: 1; } #idx-spa .zy-block:nth-of-type(2n) .zy-block-img{ padding-left: .1rem; order: 2; } #idx-spa .zy-block:nth-of-type(2n+1) .zy-block-text{ order: 2; padding-left: .1rem; } #idx-spa .zy-block:nth-of-type(2n+1) .zy-block-img{ order: 1; padding-right: .1rem; } #idx-spa .idx_spa_img img{ width: 100%; } #idx-spa .gsjs-l-b{ width: 100%; text-align: center; } #certify { position: relative; margin: 0 auto } #certify .swiper-container { padding-bottom: 60px; } #certify .swiper-wrapper{ padding: .4rem 0; } #certify .swiper-slide { width: 460px; height: 359px; background: #fff; } #certify .swiper-slide img{ width: 460px; height: 359px; display:block; box-shadow:5px 5px 6px 2px rgba(0,0,0,.5) } #certify .swiper-pagination { width: 100%; } #certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border-radius: 100%; background-color: #CCC; width: 10px; height: 10px; opacity: 1; } #certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border-radius: 100%; border: 1px solid #d33975; background-color: #fff; transform:scale(1.4); } #certify .swiper-button-prev { left: 140px; width: 100px; height: 100px; background: url(../img/leftarrow.png) no-repeat; background-size: 100%; } #certify .swiper-button-next { right: 140px; width: 100px; height: 100px; background: url("../img/rightarrow.png") no-repeat; background-size: 100%; } .idx_btn{ padding: 0 .1rem; width: 1.2rem; height: .34rem; background-color: rgba(232, 192, 207, 1); font-size: .14rem; color: #fff; line-height: .34rem; margin: 0 auto; margin-top: .1rem; display: block; cursor: pointer; } #wnyyx{ overflow: hidden; } #wnyyx .wn_title{ font-size: 24px; border-bottom: 3px solid #ea247c; } #wnyyx .swiper-slide{ display: flex; background-color: #fce3e9; } #wnyyx .wn_ele{ flex: 1; position: relative; } #wnyyx .wn_content{ width: 76%; font-size: 14px; left: 12%; position: absolute; top: 50%; transform: translateY(-50%); } #wnyyx .wn_content p{ margin-top: 30px; } @media screen and (max-width: 900px){ #certify .swiper-button-prev, #certify .swiper-button-next{ display: none; } .idx_btn{ font-size: .24rem; padding: 0 .2rem; width: 1.8rem; height: .4rem; line-height: .4rem; } #certify .swiper-slide img{ box-shadow:none !important; } } @media screen and (max-width: 750px){ #wnyyx .swiper-slide{ display: block; } #wnyyx .wn_content{ width: 100%; font-size: 14px; position: relative; left: 0; top: 0; transform: translateY(0); padding: .6rem; } } @media screen and (min-width:750px){ .brs-logo{ opacity: 0; } .swiper-brand-swiper-container .swiper-slide:hover .brs-logo{ animation:show 1s; animation-fill-mode: forwards; } .swiper-brand-swiper-container .swiper-slide:hover .cover{ transition:transform 0.3s; } } @media screen and (min-width:800px){ .pp-content:hover .brand-d-img .mask{ animation:show 1s; animation-fill-mode: forwards; } .pp-content:hover .brand-d-img img{ transition: 1s ease; transform:scale(1.1); } .pp-content:hover .brand-d-title{ color: #2a2a2a; font-weight: 500; } .pp-content:hover .brand-d-line{ background: #d63874; } }