@media screen and (min-width: 768px) { .advertising { width: 100%; height: 973px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f2f2f2; overflow: hidden; background: url(/img/brand-ross-ad.png) no-repeat; background-position: top center; } .advertising .video-container { position: relative; width: 960px; height: 540px; margin: 0 auto; margin-top: 433px; } .advertising .video-container .play { position: absolute; width: 132px; height: 132px; border-radius: 50%; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; background: url(/img/ross-video-play.png) no-repeat center; } .advertising .video-container video { display: block; width: 100%; height: 100%; } .main .about .content .about-swiper { height: 540px; } .main .about .content .about-swiper .swiper { width: 720px; height: 100%; position: relative; } .main .about .content .about-swiper .swiper .swiper-prev, .main .about .content .about-swiper .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 .about-swiper .swiper .swiper-next { left: unset; right: 0; background: url(/img/icon-arrow-right.png) no-repeat center; } .main .about .content .about-swiper .swiper img { width: 100%; height: 540px; } .main .about .content .about-swiper .section { 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; 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: 36px 36px, 353px 422px; color: #fff; } .main .about .content .about-swiper .section .title { font-size: 25px; font-weight: bold; padding: 0 24px; width: 100%; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; } .main .about .content .about-swiper .section .description { font-size: 24px; font-weight: lighter; line-height: 44px; padding: 0 24px; text-align: justify; word-break: break-all; margin-top: 12px; } .main .about .content .more-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 24px; } .main .about .content .more-content img { display: block; width: 233px; height: 160px; } .main .chairman .cover img { display: block; width: 470px; height: 480px; } .main .chairman .info { padding-top: 40px; margin-left: 50px; } .main .chairman .info .name { font-size: 50px; color: #f3920d; } .main .chairman .info .name-en { font-size: 34px; color: #000000; font-weight: lighter; margin-top: 37px; } .main .chairman .info .name-en span { font-size: 38px; color: #f3920d; font-weight: normal; } .main .chairman .info .tip { font-size: 25px; color: #000; font-weight: lighter; margin-top: 19px; } .main .chairman .info .tip span { margin: 0 16px; } .main .chairman .info .line { width: 36px; height: 7px; background: #f3920d; margin: 25px 0 37px; } .main .chairman .info .description { font-size: 20px; color: #000; font-weight: lighter; } .main .word .content img { display: block; width: 100%; } .main .brand-activity .content .item { position: relative; float: left; height: 340px; width: 390px; margin-right: 15px; margin-bottom: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .main .brand-activity .content .item .cover-bg { width: 100%; height: 100%; opacity: 1; -webkit-transition: all 0.4s; transition: all 0.4s; background: #f3920d; } .main .brand-activity .content .item img { width: 100%; height: 100%; opacity: 1; -webkit-transition: all 0.4s; transition: all 0.4s; } .main .brand-activity .content .item.no-mb { margin-bottom: 0; } .main .brand-activity .content .item.no-mr { margin-right: 0; } .main .brand-activity .content .item:nth-child(1), .main .brand-activity .content .item:nth-child(7) { width: 795px; } .main .brand-activity .content .item:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .main .brand-activity .content .item .cover { position: absolute; left: 0; bottom: 0; display: inline-block; background: rgba(0, 0, 0, 0.5); padding: 19px 14px; } .main .brand-activity .content .item .cover .title { color: #fff; font-size: 24px; font-weight: lighter; line-height: 1.5; } .main .honor .content { position: relative; } .main .honor .content .swiper-container { width: 1070px; margin: 0 auto; } .main .honor .content .swiper-container img { display: block; width: 100%; } .main .honor .content .swiper-prev, .main .honor .content .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 .honor .content .swiper-next { left: unset; right: 0; background: url(/img/icon-arrow-right.png) no-repeat center; } .main .device .swiper-container img { display: block; width: 100%; } } @media screen and (max-width: 768px) { .advertising { width: 100%; height: 5.9488rem; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f2f2f2; overflow: hidden; background: url(/img/brand-ross-ad.png) no-repeat; background-position: top center; background-size: 7.5rem; } .advertising .video-container { position: relative; width: 6.86rem; height: 3.8588rem; margin: 0 auto; margin-top: 2.09rem; } .advertising .video-container .play { position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; background: url(/img/ross-video-play.png) no-repeat center; background-size: 0.8rem; } .advertising .video-container video { display: block; width: 100%; height: 100%; } .main .about { width: 6.86rem; margin: 0 auto; } .main .about .content .about-swiper .swiper { width: 100%; float: unset !important; } .main .about .content .about-swiper .swiper .swiper-container { width: 100%; height: 5.14rem; } .main .about .content .about-swiper .swiper .swiper-container img { display: block; width: 100%; height: 100%; } .main .about .content .about-swiper .section { float: unset !important; 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; background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png); background-color: #f3920d; background-repeat: no-repeat; background-size: 0.66rem; background-position: 0.4rem 0.82rem, 5.86rem 2.8rem; color: #fff; padding: 0.4rem; } .main .about .content .about-swiper .section .title { font-size: 0.32rem; font-weight: bold; width: 100%; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .main .about .content .about-swiper .section .description { font-size: 0.24rem; line-height: 0.46rem; text-align: justify; word-break: break-all; margin-top: 0.4rem; text-align: center; } .main .about .content .more-content { display: none; } .main .chairman { width: 6.48rem; margin: 0 auto; } .main .chairman .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .main .chairman .content .cover { float: unset !important; } .main .chairman .content .cover img { display: block; width: 5.46rem; height: 5.57rem; margin: 0 auto; } .main .chairman .content .info { float: unset !important; 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-align: center; -ms-flex-align: center; align-items: center; } .main .chairman .content .info .name { font-size: 0.3rem; color: #272727; font-weight: bold; } .main .chairman .content .info .name-en { font-size: 0.26rem; color: #272727; margin-top: 0.32rem; } .main .chairman .content .info .name-en span { font-size: 0.3rem; color: #f3920d; } .main .chairman .content .info .tip { font-size: 0.26rem; color: #272727; margin-top: 0.12rem; } .main .chairman .content .info .tip span { margin: 0 0.16rem; } .main .chairman .content .info .line { width: 0.4rem; height: 0.06rem; background: #f3920d; margin: 0.4rem 0; } .main .chairman .content .info .description { font-size: 0.26rem; color: #666; line-height: 0.48rem; text-align: center; margin-bottom: 0.4rem; } .main .word { width: 6.86rem; margin: 0 auto; } .main .word .content img { display: block; width: 100%; } .main .brand-activity { width: 6.86rem; margin: 0 auto; } .main .brand-activity .content .item { position: relative; float: left; height: 1.94rem; width: 2.23rem; margin-right: 0.08rem; margin-bottom: 0.08rem; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .main .brand-activity .content .item img { width: 100%; height: 100%; opacity: 1; -webkit-transition: all 0.4s; transition: all 0.4s; } .main .brand-activity .content .item.no-mb { margin-bottom: 0; } .main .brand-activity .content .item.no-mr { margin-right: 0; } .main .brand-activity .content .item:nth-child(1), .main .brand-activity .content .item:nth-child(7) { width: 4.54rem; } .main .brand-activity .content .item:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .main .brand-activity .content .item .cover { position: absolute; left: 0; bottom: 0; display: inline-block; background: rgba(0, 0, 0, 0.5); padding: 0.08rem 0.1rem; } .main .brand-activity .content .item .cover .title { color: #fff; font-size: 0.22rem; font-weight: lighter; line-height: 1.5; } .main .honor .scroll-box img { width: 1.96rem; height: 2.83rem; margin-right: 0.24rem; } .main .honor .scroll-box img:first-child { margin-left: 0.32rem; } .main .honor .scroll-box img:last-child { margin-right: 0.32rem; } .main .device .scroll-box img { width: 1.88rem; height: 2.41rem; margin-right: 0.24rem; } .main .device .scroll-box img:first-child { margin-left: 0.32rem; } .main .device .scroll-box img:last-child { margin-right: 0.32rem; } }