.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0; } .swiper-button-next, .swiper-button-prev { outline: none; } video.img { max-width: 100%; } #banner { display: block; width: 100%; position: relative; } #banner .swiper-button, #banner .button { display: block; } #banner img { width: 100%; } #banner .swiper-slide { position: relative; } #banner .text { text-align: center; color: white; position: absolute; left: 0; top: 50%; font-size: 30px; transform: translateY(-50%); width: 100%; } #banner .text h2 { font-weight: bold; font-size: 0.85rem; } #banner .text .slogan { font-weight: bold; font-size: 0.36rem; padding-top: 0.12rem; } #banner .swiper-button, .content .box .swiper-button { display: none; } #banner:hover .swiper-button, .content .box:hover .swiper-button { display: block; } #banner .swiper-button-next:after, .content .box .swiper-button-next:after, #banner .swiper-container-rtl .swiper-button-prev:after, .content .box .swiper-container-rtl .swiper-button-prev:after, #banner .swiper-button-prev:after, .content .box .swiper-button-prev:after, #banner .swiper-container-rtl .swiper-button-next:after, .content .box .swiper-container-rtl .swiper-button-next:after { color: #48433d; font-size: 20px; } #banner .swiper-button-prev, .content .box .swiper-button-prev, #banner .swiper-container-rtl .swiper-button-next, .content .box .swiper-container-rtl .swiper-button-next { left: 0.4rem; } #banner .swiper-button-next, .content .box .swiper-button-next, #banner .swiper-container-rtl .swiper-button-prev, .content .box .swiper-container-rtl .swiper-button-prev { right: 0.4rem; } @keyframes bannerScale { 100% { transform: scale(1); } } #product { margin: auto; margin-top: 0.2rem; } #product .buttons { position: absolute; left: 50%; top: 25%; z-index: 55; display: flex; } #product .button { display: block; width: 0.95rem; line-height: 0.33rem; text-align: center; color: #333; border-radius: 0.1rem; border: solid 1px #333; transition: all 0.3s; } #product .see-price { margin-left: 0.2rem; } #product .button:hover { border-color: #ed780a; background: #ed780a; } #product .swiper-wrapper { flex-wrap: wrap; } #product .swiper-slide { width: calc(50% - 0.05rem); height: auto; margin-bottom: 0.1rem; } #product .swiper-slide:nth-child(odd) { margin-right: 0.1rem; } #product .box { cursor: pointer; overflow: hidden; position: relative; background: #C3C3C3; box-sizing: border-box; } #product .mask { position: absolute; right: 110%; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); transition: all 0.3s; } #product .chart { display: flex; align-items: center; justify-content: center; } #product img { width: 100%; } #product .title { font-size: 22px; color: #FFFFFF; font-weight: bold; padding-bottom: 15px; } #product .brief { color: #fff; font-size: 16px; min-height: 80px; } #product .text { padding-right: 0.26rem; text-align: justify; z-index: 11; position: absolute; top: 73%; transition: all 0.3s; } #product .arrow { width: 54px; height: 54px; margin-top: 50px; } #product .swiper-button-next, #product .swiper-button-prev { background: url(../images/index-arrow-left.png) no-repeat; background-size: 100% 100%; width: 106px; height: 106px; } #product .swiper-button-next { background: url(../images/index-arrow-right.png) no-repeat; } #product .swiper-button-next:hover, #product .swiper-button-prev:hover { opacity: 0.7; } #product .swiper-button-next:after, #product .swiper-button-prev:after { content: ''; display: block; } .content h2 { font-size: 32px; color: #333; text-align: center; padding-top: 57px; padding-bottom: 40px; font-weight: bold; } .content .box { position: relative; margin: auto; } .content .box::after { content: ''; clear: both; display: block; } .content img { width: 100%; } .content .texts { position: absolute; left: 0; top: 25%; text-align: center; width: 100%; } .content .texts .title { font-size: 0.3rem; } .content .button { position: absolute; display: table; width: 0.85rem; line-height: 0.28rem; text-align: center; color: #333; border-radius: 0.1rem; border: solid 1px #333; transition: all 0.3s; } .content .button:hover { border-color: #ed780a; background: #ed780a; } .content .swiper-pagination-bullet { width: 24px; height: 23px; background: #EE780F; font-size: 23px; text-align: center; line-height: 23px; color: white; border-radius: 0; opacity: 1; } .content .swiper-pagination-bullet-active { opacity: 0.8; } .content .swiper-pagination { left: inherit; right: 20px; display: table; width: auto; } .content .showMobile { display: none; } #dynamic { margin-top: 0; } #footer { margin-top: 0.5rem; } @media (max-width: 1200px) { #product { padding: 0 0.35rem; } .content { margin-top: 0; padding: 0 0.3rem; } .content h2 { font-size: 0.36rem; padding-top: 0.34rem; padding-bottom: 0.4rem; } .content .swiper-container, .content .list { float: inherit; width: 100%; } .content .list { margin-top: 0.2rem; } .content .list a { padding-bottom: 0.26rem; padding-top: 0.16rem; } #about { margin-bottom: 0.2rem; } #about h2 { padding-top: 0.7rem; } #about .box { display: block; } #about .menu { display: flex; width: 100%; margin: 0; } #about .menu .item { width: 33.3%; line-height: 100px; background: #FF6700; } #about .menu .item.active, #about .menu .item:hover { background: #DEDEDE; color: #545454; } #about .about-content { margin: 0; width: 100%; } #about .about-content .text { margin-top: 30px; } } @media (max-width: 970px) { #product { padding: 0; } #product .swiper-button-next, #product .swiper-button-prev { display: none; } #product .swiper-wrapper { flex-wrap: wrap; } #product .swiper-slide { width: 100%; margin: 0; margin-left: 0%; margin-bottom: 2%; } #product .mask { display: none !important; } #product .box { height: 100%; padding: 0; } #product .chart { margin-bottom: 0; } #product .text { z-index: 11; position: absolute; bottom: 0.2rem !important; transition: all 0.3s; width: 100%; text-align: center; } #product .arrow { display: none !important; } #product .title { font-size: 0.2rem; font-weight: bold; padding-bottom: 0; } #product .brief { font-size: 0.16rem; } #about .menu .item { font-size: 0.32rem; height: 1rem; line-height: 1rem; } } @media (max-width: 768px) { .content .button { font-size: 0.12rem; width: initial; max-width: initial; line-height: 1; padding: 0.1rem 0.2rem; } #banner .swiper-button-next, #banner .swiper-button-prev { display: none; } .banner-pc { display: none !important; } .banner-mobile { display: block !important; } .content { padding: 0; } .content .texts .title { font-size: 0.2rem; } .content h2 { font-size: 0.26rem; } #product { margin-top: 0.5rem; } #product .brief { display: none; } #product .title { padding-bottom: 0.2rem; font-size: 0.26rem; } #product .button { font-size: 0.12rem; width: initial; max-width: initial; line-height: 1; padding: 0.1rem 0.2rem; } .content .texts .button { font-size: 0.12rem; width: initial; max-width: initial; line-height: 1; padding: 0.1rem 0.2rem; } #about .box { background: white; } #about .about-content { display: block; } #about .about-content .text { text-indent: 0.5rem; margin-top: 0.42rem; line-height: 0.43rem; color: #221815; width: 100%; margin-left: 0; font-size: 0.25rem; } #about .about-content .video { width: 100%; margin-top: 0.14rem; } #banner .swiper-slide { overflow: hidden; } #banner img { margin-left: -5rem; width: 1920px; height: 13.4rem; } .content .swiper-wrapper img { width: 100%; } .content .list a { font-size: 0.28rem; } } .content .list a { word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #product .box:hover .brief { display: none; } #product .box:hover .brief_show { display: block !important; } #about .about-content .video { position: relative; } #about .about-content video { opacity: 0; } .video-poster { position: absolute; left: 0; top: 0; width: 100%; /*height: 97%;*/ z-index: 22; cursor: pointer; } .video-poster img { width: 100%; /*height: 100%;*/ } .video-poster .layui-icon { font-size: 80px; position: absolute; left: 50%; color: white; top: 50%; transform: translate(-50%, -50%); text-shadow: 0px 0px 13px #ffffff; } @media (max-width: 1600px) { body #about .about-content .text { margin-top: 10px; line-height: 36px; } } @media (max-width: 768px) { .content .showPc { display: none; } .content .showMobile { display: block; } .video-poster img { height: 100%; } .video-poster { height: 100%; } #banner { /*padding: 0 .15rem;*/ margin-top: 0.1rem; } #banner img { padding: 0 0.15rem; box-sizing: border-box; width: 100%; height: auto; transform: scale(1); margin: 0; } #product { margin-top: 0.1rem; } body #product .box:hover .brief_show { display: none !important; opacity: 0; } } @media (min-width: 1201px) { #product .box { height: inherit; } #about .about-content .video { width: 60%; } #about .about-content .text { width: 32%; line-height: 38px; } #about .about-content .video { margin-top: 22px; } #about .about-content .video video { /*border: solid 1px red;*/ } #about .about-content { width: 72%; margin-left: 30px; } } /*# sourceMappingURL=index.css.map */