@media screen and (min-width: 768px) { .main { .about { .cover { img { display: block; width: 470px; height: 480px; } } .info { width: 660px; padding-top: 65px; .name { font-size: 50px; color: #5ba9ad; font-weight: bold; } .subname { font-size: 30px; margin-top: 15px; } .line { width: 36px; height: 7px; background: #5ba9ad; margin: 20px 0 30px; } .description { text-align: justify; word-break: break-all; font-weight: lighter; line-height: 36px; p { margin-top: 24px; font-size: 20px; } } } } .about-device { .content { img { display: block; width: 100%; } } } .therapy { .content { .section { background: #eeeeee; padding: 24px 24px 24px 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-top: 20px; &:first-child { margin-top: 0; } .info { margin-right: 24px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 0; flex-shrink: 0; text-align: justify; word-break: break-all; .cover { img { display: block; width: 560px; } } .title { font-size: 36px; color: #5ba9ad; font-weight: bold; } .subtitle { font-size: 16px; color: #434343; font-weight: lighter; text-transform: uppercase; margin-top: 4px; } .desc { font-size: 27px; color: #434343; line-height: 38px; margin-top: 50px; } .row { margin-top: 68px; .label { font-size: 29px; color: #434343; font-weight: bold; } .text { font-size: 25px; line-height: 38px; color: #434343; margin-top: 10px; } .item { font-size: 22px; color: #434343; font-weight: lighter; margin-top: 32px; line-height: 1.5; } } } &.therapy-2 { .row { margin-top: 130px; } } &.therapy-3 { .row { margin-top: 80px; .item { line-height: 38px; } } .desc{ line-height: 42px; } } &.therapy-4 { .row { margin-top: 50px; .label { margin-bottom: 16px; } .item { margin-top: 12px; } } } } } } .device { .content { position: relative; .swiper-container { width: 1100px; margin: 0 auto; img { display: block; width: 100%; } } .swiper-prev, .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.6) !important; z-index: 5; cursor: pointer; background: url(/img/icon-arrow-left.png) no-repeat center; } .swiper-next { left: unset; right: 0; background: url(/img/icon-arrow-right.png) no-repeat center; } } } } } @media screen and (max-width: 768px) { .main { .about { .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; -webkit-box-align: center; -ms-flex-align: center; align-items: center; .cover { margin-top: 0.4rem; img { display: block; width: 5.46rem; height: 5.57rem; } } .info { width: 6.5rem; margin: 0 auto; .name { font-size: 0.34rem; color: #5ba9ad; text-align: center; font-weight: bold; } .subname { font-size: 0.26rem; margin-top: 0.16rem; text-align: center; } .line { width: 0.4rem; height: 0.06rem; background: #5ba9ad; margin: 0.32rem auto; } .description { text-align: justify; word-break: break-all; color: #333333; text-align: center; p { font-size: 0.26rem; line-height: 0.48rem; } } } } } .about-device { width: 6.86rem; margin: 0 auto; .content { img { display: block; width: 100%; } } } .therapy { .content { .section { width: 6.86rem; margin: 0 auto; background: #eeeeee; padding: 0.4rem; margin-top: 0.32rem; -webkit-box-sizing: border-box; box-sizing: border-box; &:first-child { margin-top: 0; } .cover { img { display: block; width: 100%; } } .info { text-align: center; word-break: break-all; .title { font-size: 0.3rem; color: #5ba9ad; font-weight: bold; margin-top: 0.4rem; } .subtitle { font-size: 0.24rem; color: #333; margin-top: 0.16rem; } .desc { font-size: 0.26rem; color: #333; line-height: 0.48rem; margin-top: 0.32rem; } .row { margin-top: 0.4rem; .label { font-size: 0.26rem; color: #434343; font-weight: bold; } .text { font-size: 0.26rem; line-height: 0.48rem; color: #434343; } .item { font-size: 0.26rem; color: #333; margin-top: 0.16rem; line-height: 1.5; } } } &.therapy-2 { .row { margin-top: 0.32rem; } } &.therapy-3 { .row { margin-top: 0.4rem; } } &.therapy-4 { .row { margin-top: 0.48rem; } } } } } .device { .scroll-box { img { width: 1.77rem; height: 2.27rem; margin-right: 0.24rem; &:first-child { margin-left: 0.32rem; } &:last-child { margin-right: 0.32rem; } } } } } }