.swiper-container { width: 100vw; height: 27.777778rem; } .swiper-container img { width: 100%; margin: 0 !important; } .title { font-size: 2.777778rem; text-align: center; margin-top: 4.444444rem; margin-bottom: 1.666667rem; } .introduce { font-size: 1.111111rem; color: #666; } .product { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/right.png) no-repeat bottom center; background-size: contain; } .product-box { display: flex; justify-content: space-between; width: 66.666667rem; height: 37.555556rem; margin-top: 3.388889rem; margin-bottom: 4.388889rem; text-align: center; } .product-item { float: left; cursor: pointer; width: 21.111111rem; height: 37.555556rem; background-color: #fff; box-shadow: 0 2px 30px 0 rgba(104, 104, 104, 0.07); border-radius: 0.625rem; overflow: hidden; } .product-header { position: relative; width: 21.111111rem; height: 5.555556rem; background: rgba(65, 144, 246, 1); border-radius: 0.625rem 0.625rem 0 0; } .product-header-bg1 { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhineng.png) no-repeat center; background-size: contain; } .product-header-bg2 { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/ruanjian.png) no-repeat center; background-size: contain; } .product-header-bg3 { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/common/kehu.png) no-repeat center; background-size: contain; } .product-quan { position: absolute; left: 1.875rem; top: 2.6875rem; display: inline-block; width: 0.875rem; height: 0.875rem; background: rgba(255, 186, 0, 1); border-radius: 50%; } .product-title { position: absolute; left: 3.75rem; top: 1.8125rem; display: inline-block; width: 13.125rem; height: 2.625rem; font-size: 1.666667rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(255, 255, 255, 1); line-height: 2.625rem; } .product-icon { position: absolute; bottom: 0; right: 0; font-size: 4.375rem; color: #5ea1f7; } .product-main { height: 24.5rem; margin: 2.222222rem 1.666667rem; background-color: #fff; padding-bottom: 1rem; border-bottom: 0.0625rem solid #f0f0f0; margin-bottom: 0; } .product-main-item { margin-top: 1.111111rem; } .product-main-item-header { text-align: left; margin-left: 0.5625rem; } .product-main-item-header-title { font-size: 1.111111rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: rgba(51, 51, 51, 1); } .product-main-item-header-icon { color: #4190f6; } .product-main-item-main { width: 17.25rem; height: 4.5rem; font-size: 0.777778rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(136, 136, 136, 1); line-height: 1.5rem; margin-top: 1.111111rem; margin-left: 0.625rem; text-align: left; } .product-footer { position: relative; height: 4.444444rem; line-height: 4.444444rem; margin: 0 1.875rem; background-color: #fff; cursor: pointer; } .product-footer-more { position: absolute; top: 0; left: 1.875rem; } .product-footer-icon { position: absolute; top: 0; right: 0.075rem; font-size: 1.25rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(102, 102, 102, 1); } .box-footer { position: relative; height: 36.777778rem; } .box-footer-icon { position: absolute; top: 4.875rem; left: 25.1875rem; font-size: 4.75rem; color: #e7e8ec; } .programme-box { width: 66.666667rem; height: 4.444444rem; margin-top: 1.875rem; } .programme-header { width: 100%; height: 5rem; display: flex; } .programme-header-item { flex: 1; padding: 1.3125rem 3.4375rem; color: #666; font-size: 1.25rem; background-color: #f8f9fc; cursor: pointer; } .active { background-color: #fff; font-weight: 600; color: #333; } .active-i { color: #4190f6; } .programme-main { position: absolute; display: flex; box-sizing: border-box; padding: 3.333333rem; height: 23.333333rem; background: rgba(255, 255, 255, 1); } .programme-main:nth-child(1) { box-shadow: 0 2px 30px 0 rgba(104, 104, 104, 0.07); } .selected { z-index: 999; } .programme-image { width: 22.222222rem; height: 16.666667rem; background-color: pink; } .programme-content { display: flex; flex-direction: column; width: 34.444444rem; margin-left: 3.333333rem; text-align: left; } .programme-title { color: #333; font-size: 30px; font-weight: 600; margin-bottom: 1.875rem; } .programme-content-box { font-size: 14px; font-weight: 400; color: rgba(136, 136, 136, 1); letter-spacing: 1px; } .programme-content-more { position: absolute; top: 17.222222rem; width: 13.125rem; height: 3.125rem; background: rgba(65, 144, 246, 1); border-radius: 0.375rem; font-size: 1.25rem; font-weight: 600; color: rgba(255, 255, 255, 1); line-height: 3.125rem; text-align: center; cursor: pointer; } .deeds { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/left.png) no-repeat bottom; background-size: 100% 100%; } .deeds-box { position: relative; width: 100vw; height: 30.944444rem; border-radius: 0.375rem; overflow: hidden; margin-top: 1.125rem; } .h-class { font-weight: 600 !important; } .news { position: absolute; top: 10.3125rem; left: 23.333333rem; font-size: 1.25rem; cursor: pointer; color: rgba(255, 255, 255, 1); } .news:hover { font-weight: 600; } .news:hover::after { content: ''; display: inline-block; width: 0; height: 0; border-top: 0.5rem solid transparent; border-left: 0.625rem solid #fff; border-bottom: 0.5rem solid transparent; } .news-i { font-size: 12px !important; margin-left: 0.375rem; } .activity { position: absolute; top: 13.4375rem; left: 26.25rem; font-size: 1.25rem; font-weight: 400; color: rgba(255, 255, 255, 1); cursor: pointer; } .activity:hover { font-weight: 600; } .activity:hover::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 0.3125rem; border-top: 0.5rem solid transparent; border-left: 0.625rem solid #fff; border-bottom: 0.5rem solid transparent; } .deeds-right { position: absolute; top: 2.444444rem; left: 38.888889rem; width: 47.777778rem; height: 22.222222rem; background-color: #fff; text-align: left; display: flex; } .deeds-right img { display: inline-block; width: 25.555556rem; height: 22.222222rem; } .deeds-content { display: inline-block; height: 100%; padding: 2.222222rem 2.222222rem; } .deeds-title { margin-top: 0.9375rem; font-weight: 400; color: rgba(51, 51, 51, 1); font-size: 1.25rem; } .deeds-main { margin-top: 2rem; font-size: 14px; font-weight: 400; color: rgba(136, 136, 136, 1); line-height: 1.3; } .deeds-footer { position: absolute; top: 17rem; left: 27.777778rem; padding-bottom: 0.3125rem; border-bottom: 1px solid #333; cursor: pointer; } .down, .up { width: 1.375rem; height: 1.375rem; cursor: pointer; } .down img { width: 100%; height: 100%; cursor: pointer; } .up img { width: 100%; height: 100%; } .down { position: absolute; left: 81.555556rem; top: 19.444444rem; } .up { position: absolute; left: 83.277778rem; top: 19.444444rem; } .programme-main-box { position: relative; } #mobile { display: none; } .programme-content-more a { color: #fff; } @media screen and (max-width: 750px) { html { font-size: 0.5rem; } #pc { display: none; } #mobile { display: block; } .box { overflow: hidden; } .introduce { display: inline-block; width: 80vw; } .product { background-size: 100% 69% !important; } .product-header { width: 100%; background-color: rgba(65, 144, 246, 1); } .product-title { width: 100%; text-align: left; } .product-box { display: block; text-align: inherit; width: 99vw !important; height: 122.25rem !important; } .product-box .product-item { width: 90vw; height: auto; margin-left: 0; float: none; margin-bottom: 1.875rem; } .product-footer { margin-top: 7vh; } .product-main-item-main { width: 73vw; } .product-main-item-header { width: 90vw; } .box-footer { width: 100vw !important; height: 24.7rem; padding-left: 5vw; box-sizing: border-box; } .main-wrap { width: 90vw !important; height: 21.25rem !important; position: absolute; bottom: 0; left: 5%; transform: none; margin: 0; } .video-img { position: absolute; top: -1rem; left: 1rem; width: 5.4375rem; height: 4.75rem; } .programme-box { height: 55rem; box-shadow: 0 2px 30px 0 rgba(104, 104, 104, 0.07); } .programme-header-container { width: 45rem; overflow: auto; } .programme-header { white-space: nowrap; overflow-y: auto; } .programme-header::-webkit-scrollbar { display: none; } .programme-header-item { display: inline-block; } .programme-image { width: 96vw; height: 20.34375rem; } .programme-main { width: 100vw !important; height: 49rem; box-sizing: border-box; flex-wrap: wrap; padding: 1.875rem; } .programme-content { width: 100%; margin: 0; text-align: left; } .programme-content-box { width: 92vw; } .programme-content-more { width: 15rem; height: 4.375rem; text-align: center; line-height: 4.375rem; margin: 0 auto; margin-top: 2.222222rem; top: 41.222222rem; left: 50%; transform: translateX(-50%); } .deeds-box { height: 46rem; background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/right.png) no-repeat center; background-position: center; background-size: 100% 39%; } .deeds-right { left: 0; flex-wrap: wrap; flex-direction: column; height: 45rem; } .deeds-right img { width: 66.7vw; height: 18rem; margin-left: 16vw; background-color: #fff; } .deeds-content { width: 66.7vw; height: 25.5rem; margin-left: 16vw; box-sizing: border-box; background-color: #fff; box-shadow: 2px 2px 30px 2px rgba(104, 104, 104, 0.07); border-radius: 0 0 5px 5px; } .deeds-footer { bottom: 0; top: 39.75rem; left: 7.5rem; height: 1.6rem; } .box-mobile { height: 61.5625rem; background-color: #fff; } .product-footer { margin-top: 0; height: 4rem; line-height: 4rem; } .product-main { height: auto; margin: 2.222222rem 1.875rem 0 1.875rem; background-color: #fff; padding-bottom: 1rem; border-bottom: 0.0625rem solid #f0f0f0; } .swiper-container { height: 21.25rem; } }