.md-product-11.md33878 { position: relative; padding-top: 0.4rem; padding-bottom: 0.7rem; background-color: #f1f4f6; } .md-product-11.md33878 .layout { margin-left: auto; margin-right: auto; width: 16rem; max-width: 92%; } .md-product-11.md33878 .swipers { width: calc( 750 / 1600 * 100%); } .md-product-11.md33878 .text { width: calc( 750 / 1600 * 100%); padding-right: 1rem; } .md-product-11.md33878 .swiper1 { width: calc( 140 / 750 * 100%); } .md-product-11.md33878 .swiper2 { width: calc( 590 / 750 * 100%); } .md-product-11.md33878 .sw1 { height: auto; margin-bottom: 0.1rem; cursor: pointer; } .md-product-11.md33878 .img { padding-top: 100%; } .md-product-11.md33878 .thumb-active::before { content: ""; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; border: 1px solid var(--theme); z-index: 5; } .md-product-11.md33878 .line { margin-top: 0.3rem; margin-bottom: 0.16rem; height: 1px; background-color: rgba(0, 0, 0, 0.1); position: relative; } .md-product-11.md33878 .line::before { content: ""; width: 80px; height: 4px; background-color: var(--theme); position: absolute; left: 0; bottom: -1px; } .md-product-11.md33878 .intro { line-height: calc( 24 / 18); } .md-product-11.md33878 .numbers { margin-top: 0.4rem; } .md-product-11.md33878 .numbers span { margin-right: 0.2rem; } .md-product-11.md33878 .numbers .ip { width: 4.4444444444em; height: 2.2222222222em; text-align: center; border: solid 1px rgba(0, 0, 0, 0.1); color: var(--theme); margin: 0 0.1rem; } .md-product-11.md33878 .numbers .nbtn { width: 2.2222222222em; height: 2.2222222222em; box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1); background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 25% auto; cursor: pointer; position: relative; } .md-product-11.md33878 .numbers .reduce::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; height: 2px; background-color: rgba(0, 0, 0, 0.5); } .md-product-11.md33878 .numbers .add::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; height: 2px; background-color: rgba(0, 0, 0, 0.5); } .md-product-11.md33878 .numbers .add::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 40%; width: 2px; background-color: rgba(0, 0, 0, 0.5); } .md-product-11.md33878 .btns { margin-top: 0.6rem; } .md-product-11.md33878 .btn1 { padding: 0 0.5rem; line-height: calc( 60 / 18); /* background-image: linear-gradient(90deg, #054075 0%, #0d5a9f 36%, var(--theme) 100%); */ background: var(--theme); margin-right: 0.2rem; } .md-product-11.md33878 .btn2 { width: calc( 60em / 18); height: calc( 60em / 18); background-color: #fff; box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1); background-image: url(/static/home/images/a7.png); background-repeat: no-repeat; background-position: center; background-size: 41.6666666667% auto; cursor: pointer; } .md-product-11.md33878 .watch { position: absolute; right: 0.4rem; bottom: 0.4rem; width: 1em; height: 1em; border-radius: 50%; background-image: linear-gradient(90deg, rgba(5, 64, 117, 0.2) 0%, rgba(13, 90, 159, 0.2) 36%, rgba(20, 115, 200, 0.2) 100%); cursor: pointer; z-index: 30; } .md-product-11.md33878 .watch .wbox { width: 75%; height: 75%; /* background-image: linear-gradient(90deg, #054075 0%, #0d5a9f 36%, var(--theme) 100%); */ background: var(--theme); border-radius: 50%; } .md-product-11.md33878 .watch .wbox::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-top: 0.06rem solid transparent; border-bottom: 0.06rem solid transparent; border-left: 0.08rem solid #fff; } @media screen and (min-width: 901px) { .md-product-11.md33878 .swiper1 .swiper-container { height: 5.9rem; } } @media screen and (max-width: 900px) { .md-product-11.md33878 .swipers { width: 90%; margin: 0 auto; } .md-product-11.md33878 .swiper1 { width: 100%; order: 2; margin-top: 0.1rem; } .md-product-11.md33878 .swiper2 { width: 100%; order: 1; } .md-product-11.md33878 .sw1 { width: 24%; margin-right: 1%; } .md-product-11.md33878 .text { width: 100%; margin-top: 0.4rem; padding: 0; } } .md-product-12.md33878 { position: relative; padding-top: 0.86rem; padding-bottom: 1rem; } .md-product-12.md33878 .layout { margin-left: auto; margin-right: auto; width: 16rem; max-width: 92%; } .md-product-12.md33878 .box-left { width: calc( 380 / 1600 * 100%); } .md-product-12.md33878 .box-right { width: calc( 1140 / 1600 * 100%); } .md-product-12.md33878 .form .fbox { margin-top: 0.1rem; } .md-product-12.md33878 .form .fitem { margin-bottom: 0.1rem; } .md-product-12.md33878 .form .fi-active .placehold { display: none; } .md-product-12.md33878 .form .inp { position: relative; } .md-product-12.md33878 .form .ta { position: relative; } .md-product-12.md33878 .form .ip { width: 100%; height: calc( 50em / 18); background-color: #fff; border: solid 1px #e7e7e7; padding: 0 0.4rem; } .md-product-12.md33878 .form .textarea { display: block; width: 100%; height: 1rem; background-color: #fff; border: solid 1px #e7e7e7; padding: 0.12rem 0.4rem; } .md-product-12.md33878 .form .placehold { color: #666; position: absolute; left: 0; top: 0; width: 100%; height: calc( 50em / 18); display: flex; align-items: center; padding: 0 0.4rem; pointer-events: none; } .md-product-12.md33878 .form .placehold span { color: #ff0000; } .md-product-12.md33878 .form .code { position: absolute; top: 0%; right: 0; height: 100%; } .md-product-12.md33878 .form .submit { display: block; width: 100%; height: 2.0833333333em; background-color: var(--theme); border: none; cursor: pointer; } @media screen and (max-width: 900px) { .md-product-12.md33878 .box-left { width: 100%; } .md-product-12.md33878 .box-right { width: 100%; margin-top: 0.5rem; } .md-product-12.md33878 .form { display: none; } } .md-product-12.md33878 .pro12-1 .cont { background-color: #f7f8fa; } .md-product-12.md33878 .pro12-1 .c-pic { width: calc( 600 / 1140 * 100%); } .md-product-12.md33878 .pro12-1 .img { padding-top: calc( 338 / 600 * 100%); height: 100%; } .md-product-12.md33878 .pro12-1 .text { width: calc( 540 / 1140 * 100%); padding: 0.5rem 0.6rem 0.4rem; } .md-product-12.md33878 .pro12-1 .intro { line-height: calc( 24 / 18); margin-top: 0.14rem; } .md-product-12.md33878 .pro12-1 .content { line-height: calc( 24 / 18); margin-top: 0.2rem; } .md-product-12.md33878 .pro12-1 .tags { margin-top: 0.3rem; } .md-product-12.md33878 .pro12-1 .tags .sp { flex-shrink: 0; margin-right: 0.2rem; } .md-product-12.md33878 .pro12-1 .ta { line-height: calc( 30 / 14); padding: 0 0.1rem; display: inline-flex; background-color: #f7f8fa; box-shadow: 0 0 0 1px inset #e5e5e5; margin-right: 0.1rem; margin-bottom: 0.1rem; transition: 0.5s; } .md-product-12.md33878 .pro12-1 .ta:hover { background-color: var(--theme); color: #fff; } @media screen and (max-width: 900px) { .md-product-12.md33878 .pro12-1 .c-pic { width: 100%; } .md-product-12.md33878 .pro12-1 .text { width: 100%; padding: 0.4rem; } .md-product-12.md33878 .pro12-1 .tags { flex-wrap: wrap; } .md-product-12.md33878 .pro12-1 .sp { width: 100%; margin-bottom: 0.1rem; } } .md-product-12.md33878 .pro12-2 { padding-top: 0.3rem; padding-bottom: 0.3rem; } .md-product-12.md33878 .pro12-2 .swiper { margin-top: 0.32rem; position: relative; } .md-product-12.md33878 .pro12-2 .sw { height: auto; } .md-product-12.md33878 .pro12-2 .sw:hover .c-pic { box-shadow: 0px 2px 0.12rem 0px rgba(66, 135, 194, 0.4); } .md-product-12.md33878 .pro12-2 .sw:hover .title { color: var(--theme); } .md-product-12.md33878 .pro12-2 .c-pic { border: 1px solid #e5e5e5; transition: 0.5s; } .md-product-12.md33878 .pro12-2 .img { padding-top: 100%; } .md-product-12.md33878 .pro12-2 .text { margin-top: 0.16rem; } .md-product-12.md33878 .pro12-2 .title { transition: 0.5s; } .md-product-12.md33878 .pro12-2 .intro { line-height: 1.3333333333; margin-top: 0.08rem; } .md-product-12.md33878 .pro12-3 { padding-top: 0.3rem; padding-bottom: 0.3rem; } .md-product-12.md33878 .pro12-3 .list { margin-top: 0.32rem; } .md-product-12.md33878 .pro12-3 .li { box-shadow: 0 0 0 1px #e5e5e5; } .md-product-12.md33878 .pro12-3 .aa { padding: 0.2rem 0.4rem; } .md-product-12.md33878 .pro12-3 .aa:hover { background-color: #f7f8fa; } .md-product-12.md33878 .pro12-3 .name { width: 30%; } .md-product-12.md33878 .pro12-3 .time { width: 30%; color: #666; } .md-product-12.md33878 .pro12-3 .size { width: 30%; color: #666; } .md-product-12.md33878 .pro12-3 .btn { width: 10%; text-align: center; } .md-product-12.md33878 .pro12-3 .icon { display: inline-flex; width: 1em; height: 1em; background-image: url(/static/home/images/a8.png); background-repeat: no-repeat; background-size: contain; background-position: center; } @media screen and (max-width: 500px) { .md-product-12.md33878 .pro12-3 .name { width: 50%; } .md-product-12.md33878 .pro12-3 .time { width: 50%; } .md-product-12.md33878 .pro12-3 .size { width: 50%; } .md-product-12.md33878 .pro12-3 .btn { width: 50%; } } .md-product-12.md33878 .pro12-4 { padding-top: 0.3rem; } .md-product-12.md33878 .pro12-4 .list { margin-top: 0.3rem; } .md-product-12.md33878 .pro12-4 .li { width: calc( 560 / 1140 * 100%); margin-bottom: 0.2rem; } .md-product-12.md33878 .pro12-4 .dd { height: 100%; padding: 0.3rem 0.4rem; box-shadow: 0 0 0 1px inset #e5e5e5; } .md-product-12.md33878 .pro12-4 .title { color: var(--theme); } .md-product-12.md33878 .pro12-4 .intro { margin-top: 0.1rem; line-height: calc( 24 / 18 ); } @media screen and (max-width: 900px) { .md-product-12.md33878 .pro12-4 .li { width: 100%; } }