@media screen and (min-width: 768px) { .advertising { width: 100%; height: 1055px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f2f2f2; overflow: hidden; background: url(/img/brand-ross-ad.jpg) no-repeat center; background-size: cover; } .advertising .video-container { position: relative; width: 1200px; height: 570px; margin: 0 auto; margin-top: 485px; background: pink; } .advertising .video-container .play { position: absolute; width: 64px; height: 64px; border-radius: 50%; z-index: 2; bottom: 155px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .advertising .video-container video { display: block; width: 100%; height: 100%; } .main .wrapper { margin-top: 120px; } .main .wrapper .title { font-size: 34px; text-align: center; } .main .wrapper .content { margin-top: 80px; } .main .about .content { height: 540px; } .main .about .content .swiper { width: 720px; height: 100%; position: relative; } .main .about .content .swiper .swiper-prev, .main .about .content .swiper .swiper-next { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 48px; height: 72px; background-color: rgba(55, 55, 55, 0.3) !important; z-index: 5; cursor: pointer; background: url(/img/icon-arrow-left.png) no-repeat center; } .main .about .content .swiper .swiper-next { left: unset; right: 0; background: url(/img/icon-arrow-right.png) no-repeat center; } .main .about .content .swiper img { width: 100%; height: 540px; } .main .about .content .section { width: 480px; height: 540px; background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png); background-color: #f3920d; background-repeat: no-repeat; background-position: 48px 48px, 341px 410px; } .main .about .content .section .item { width: 390px; margin: 0 auto; margin-top: 73px; display: none; } .main .about .content .section .item .num { font-size: 32px; color: #fff; text-align: center; } .main .about .content .section .item .line { width: 1px; height: 24px; margin: 25px auto 40px; background: #fff; } .main .about .content .section .item .desc { font-size: 16px; color: #fff; line-height: 40px; } .main .therapy { background: url(/img/about-bg.png) no-repeat top center; padding-top: 80px; } .main .therapy .content { margin-top: 80px; height: 540px; background-color: #fff; } .main .therapy .content .item { float: left; width: 180px; height: 100%; position: relative; overflow: hidden; } .main .therapy .content .item.hover { width: 480px; } .main .therapy .content .item.hover .cover { opacity: 0; } .main .therapy .content .item.hover .active { opacity: 1; } .main .therapy .content .item:first-child .cover { border-left: 0; } .main .therapy .content .item .cover, .main .therapy .content .item .active { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } .main .therapy .content .item .cover { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid rgba(243, 146, 13, 0.2); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(243, 146, 13, 0.3))); background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%); overflow: hidden; opacity: 1; } .main .therapy .content .item .cover .tip { font-size: 16px; text-align: center; margin-top: 57px; margin-bottom: 40px; font-weight: bold; } .main .therapy .content .item .cover .line { width: 24px; height: 2px; background: #f3920d; margin: 0 auto; } .main .therapy .content .item .cover img { position: absolute; width: 128px; height: 128px; bottom: 44px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .main .therapy .content .item .active { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; width: 480px; height: 100%; text-align: center; color: #fff; } .main .therapy .content .item .active img { width: 100%; height: 100%; } .main .therapy .content .item .active .info { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .main .therapy .content .item .active .info .tip { font-size: 24px; margin-bottom: 10px; } .main .therapy .content .item .active .info .subtip { font-size: 16px; margin-bottom: 60px; } .main .therapy .content .item .active .info .section { width: 160px; margin: 0 auto; border: 1px solid #fff; padding: 36px 0; } .main .therapy .content .item .active .info .section dl { padding: 0; } .main .therapy .content .item .active .info .section dl dt { margin-bottom: 24px; } .main .therapy .content .item .active .info .section dl dd { margin: 0; margin-top: 10px; } .main .application .content .item { position: relative; float: left; width: 390px; height: 390px; margin-right: 15px; margin-top: 15px; overflow: hidden; } .main .application .content .item img { display: block; width: 100%; height: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; } .main .application .content .item:nth-child(-n+3) { margin-top: 0; } .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(6) { width: 795px; } .main .application .content .item:nth-child(3), .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(7) { margin-right: 0; } .main .application .content .item .active { opacity: 0; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.39); z-index: 1; top: 0; left: 0; -webkit-transition: all 0.4s; transition: all 0.4s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .main .application .content .item .active .info .num { font-size: 50px; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(transparent)); background: linear-gradient(to bottom, #fff, transparent); -webkit-background-clip: text; color: transparent; text-align: center; } .main .application .content .item .active .info .tip { font-size: 24px; color: #fff; text-align: center; } .main .application .content .item .active .info .line { width: 28px; height: 2px; background: #fff; margin: 24px auto; } .main .application .content .item .active .info .link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 160px; height: 48px; border: 1px solid #fff; font-size: 16px; color: #fff; margin-top: 52px; cursor: pointer; } .main .application .content .item:hover .active { opacity: 1; } .main .application .content .item:hover img { -webkit-transform: scale(1.06); transform: scale(1.06); } .main .distribution .content img { display: block; width: 100%; } .main .distribution .content .section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 80px; } .main .distribution .content .section .line { width: 1px; height: 12px; background: #b2b2b2; -webkit-transform: translateY(52px); transform: translateY(52px); } .main .distribution .content .section .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .main .distribution .content .section .item .row:first-child { padding-left: 36px; background: url(/img/icon-star.png) no-repeat left center; line-height: 37px; font-size: 28px; } .main .distribution .content .section .item .row.company { background-image: url(/img/icon-company.png); } .main .distribution .content .section .item .row.doctor { background-image: url(/img/icon-doctor.png); } .main .distribution .content .section .item .row.heart { background-image: url(/img/icon-heart.png); } .main .distribution .content .section .item .row:last-child { font-size: 14px; color: #999; margin-top: 12px; } .main .contact .content .cover { width: 626px; height: 418px; } .main .contact .content .cover img { display: block; width: 100%; height: 100%; } .main .contact .content .form-container { -webkit-box-sizing: border-box; box-sizing: border-box; } .main .contact .content .form-container textarea { display: block; width: 526px; height: 344px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 12px; line-height: 26px; font-size: 16px; border-color: #dedede; } .main .contact .content .form-container .submit { font-size: 16px; color: #fff; height: 48px; background: #f3920d; text-align: center; line-height: 48px; margin-top: 26px; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; } .main .contact .content .form-container .submit:hover { background: #e78d0d; } } @media screen and (max-width: 768px) { .advertising { width: 100%; height: 5.45rem; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f2f2f2; overflow: hidden; background: url(/img/brand-ross-ad.jpg) no-repeat center; background-size: cover; background-size: auto 5.45rem; } .advertising .video-container { position: relative; width: 6.86rem; height: 3.26rem; margin: 0 auto; margin-top: 2.8rem; } .advertising .video-container .play { position: absolute; width: 64px; height: 64px; border-radius: 50%; z-index: 2; bottom: 155px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .advertising .video-container video { display: block; width: 6.86rem; height: 3.26rem; } .main .wrapper { margin-top: 1.2rem; } .main .wrapper .title { font-size: 0.34rem; text-align: center; } .main .wrapper .content { margin-top: 0.4rem; } .main .about .content .swiper { display: none; } .main .about .content .section { padding-bottom: 0.16rem; float: unset !important; } .main .about .content .section::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .main .about .content .section::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #cccecf; } .main .about .content .section .item { display: inline-block !important; width: 5.83rem; height: 8.32rem; margin-left: 0.32rem; background-color: #f3920d; vertical-align: top; } .main .about .content .section .item:last-child { margin-right: 0.32rem; } .main .about .content .section .item .cover { width: 5.83rem; height: 4.37rem; } .main .about .content .section .item .cover img { display: block; width: 5.83rem; height: 4.37rem; } .main .about .content .section .item .num { font-size: 0.4rem; color: #fff; text-align: center; margin: 0.4rem 0 0.32rem; } .main .about .content .section .item .desc { font-size: 0.24rem; color: #fff; line-height: 0.4rem; padding: 0 0.4rem; white-space: initial; } .main .therapy { background: #f7f7f7; background-size: 7.5rem auto; padding-top: 0.8rem; } .main .therapy .content { margin-top: 0.8rem; padding-bottom: 0.63rem; } .main .therapy .content::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .main .therapy .content::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #cccecf; } .main .therapy .content .item { display: inline-block; width: 4.8rem; height: 100%; position: relative; margin-left: 0.32rem; } .main .therapy .content .item:last-child { margin-right: 0.32rem; } .main .therapy .content .item .cover { display: none; } .main .therapy .content .item .active { width: 4.8rem; height: 100%; } .main .therapy .content .item .active img { width: 100%; height: 100%; } .main .therapy .content .item .active .info { width: 100%; height: 100%; } .main .therapy .content .item .active .info .tip { font-size: 0.3rem; margin-bottom: 0.12rem; margin-top: 0.32rem; font-weight: bold; } .main .therapy .content .item .active .info .subtip { font-size: 0.24rem; color: #505050; } .main .therapy .content .item .active .info .section { margin-top: 0.4rem; } .main .therapy .content .item .active .info .section dl { padding: 0; margin: 0; } .main .therapy .content .item .active .info .section dl dt { font-size: 0.24rem; font-weight: bold; margin-bottom: 0.24rem; } .main .therapy .content .item .active .info .section dl dd { font-size: 0.24rem; margin: 0; margin-top: 0.16rem; color: #505050; } .main .application .content { padding-left: 0.32rem; } .main .application .content .item { position: relative; float: left; width: 2.23rem; height: 2.23rem; margin-right: 0.08rem; margin-top: 0.08rem; overflow: hidden; } .main .application .content .item img { display: block; width: 100%; height: 100%; } .main .application .content .item:nth-child(-n+3) { margin-top: 0; } .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(6) { width: 4.55rem; } .main .application .content .item:nth-child(3), .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(7) { margin-right: 0; } .main .application .content .item .active { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .main .application .content .item .active .info .num { display: none; } .main .application .content .item .active .info .tip { position: absolute; left: 0; bottom: 0; font-size: 0.24rem; color: #fff; text-align: center; background: rgba(0, 0, 0, 0.39); z-index: 1; width: 100%; text-align: center; line-height: 0.48rem; } .main .application .content .item .active .info .link { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; opacity: 0; } .main .distribution .content img { display: block; width: 100%; } .main .distribution .content .section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0.6rem; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 0.32rem; } .main .distribution .content .section .item { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; } .main .distribution .content .section .item:nth-child(1), .main .distribution .content .section .item:nth-child(3) { padding-bottom: 0.35rem; border-bottom: 0.01rem solid #dedede; } .main .distribution .content .section .item:nth-child(1), .main .distribution .content .section .item:nth-child(5) { border-right: 0.01rem solid #dedede; } .main .distribution .content .section .item:nth-child(5), .main .distribution .content .section .item:nth-child(7) { padding-top: 0.35rem; } .main .distribution .content .section .item .row:first-child { padding-left: 0.48rem; background: url(/img/icon-star.png) no-repeat left center; background-size: 0.4rem; line-height: 0.4rem; font-size: 0.26rem; } .main .distribution .content .section .item .row.company { background-image: url(/img/icon-company.png); } .main .distribution .content .section .item .row.doctor { background-image: url(/img/icon-doctor.png); } .main .distribution .content .section .item .row.heart { background-image: url(/img/icon-heart.png); } .main .distribution .content .section .item .row:last-child { font-size: 0.2rem; color: #999; margin-top: 0.16rem; } .main .contact .content { padding: 0 0.32rem; } .main .contact .content .cover { width: 100%; height: 4.18rem; float: unset !important; } .main .contact .content .cover img { display: block; width: 100%; height: 100%; } .main .contact .content .form-container { -webkit-box-sizing: border-box; box-sizing: border-box; float: unset !important; } .main .contact .content .form-container textarea { display: block; width: 100%; height: 2.4rem; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0.24rem; line-height: 0.4rem; font-size: 0.26rem; border-color: #dedede; margin-top: 0.24rem; } .main .contact .content .form-container .submit { font-size: 0.3rem; color: #fff; height: 0.9rem; background: #f3920d; text-align: center; line-height: 0.9rem; margin-top: 0.4rem; } .main .contact .content .form-container .submit:hover { background: #e78d0d; } }