.advertising { width: 100%; height: 1055px; 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%; 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%; 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 .content { margin-top: 80px; height: 540px; display: flex; align-items: flex-start; } .main .therapy .content .item { flex-shrink: 0; height: 100%; } .main .therapy .content .item.hover .cover { display: none; } .main .therapy .content .item.hover .active { display: block; } .main .therapy .content .item:first-child .cover { border-left: 0; } .main .therapy .content .item .cover { position: relative; width: 180px; height: 100%; box-sizing: border-box; border-left: 1px solid rgba(243, 146, 13, 0.2); background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%); overflow: hidden; } .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%; transform: translateX(-50%); } .main .therapy .content .item .active { position: relative; display: none; 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: flex; flex-direction: column; justify-content: 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%; 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; transition: all 0.4s; display: flex; justify-content: center; align-items: center; flex-direction: column; } .main .application .content .item .active .info .num { font-size: 50px; 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: flex; justify-content: 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 { transform: scale(1.06); } .main .distribution .content img { display: block; width: 100%; } .main .distribution .content .section { display: flex; justify-content: space-between; margin-top: 80px; } .main .distribution .content .section .line { width: 1px; height: 12px; background: #b2b2b2; transform: translateY(52px); } .main .distribution .content .section .item { display: flex; justify-content: center; align-items: center; 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 { box-sizing: border-box; } .main .contact .content .form-container textarea { display: block; width: 526px; height: 344px; 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; transition: all 0.4s; } .main .contact .content .form-container .submit:hover { background: #e78d0d; }