article{ margin-top: -7.5rem; padding: 2.5rem .43rem .6rem; position: relative; z-index: 5; } .section .content { width: 100%; height: auto; background-color: rgba(69, 7, 7, .6); box-shadow: 0rem 0rem 1.08rem 0rem rgba(255, 143, 93, 0.5); border-radius: 0rem 0rem 0.17rem 0.17rem; padding: .75rem .2rem .5rem; } .section .content>h3 { font-size: 0.75rem; color: #fac568; padding-left: .4rem; } .section .content>p { font-size: 0.47rem; color: #fff8f2; margin: .3rem 0 .6rem; padding-left: .4rem; } .section .btn_box{ margin-top: .7rem; } .section .btn_box .btn{ width: 5.78rem; height: 1.53rem; background-color: #e7bd88; box-shadow: 0.05rem 0.09rem 0.18rem 0rem rgba(186, 65, 20, 0.5); border-radius: 0.74rem; background: url(/uploads/image/ksimg/btn_bg1.png) no-repeat; background-size: 100%; font-size: 0.55rem; font-weight: 700; color: #8f5711; } .section .btn_box .btn a{ font-size: 0.55rem; } .section .btn_box .btn:nth-child(2){ margin-left: 1rem; } .section .btn_box .btn a{ color: #8f5711; } .offer { margin-bottom: 1rem; } .offer .tab_box { width: 100%; margin: 0 auto; z-index: 10; } .offer .tab_box.active{ position: fixed; top: 2rem; width: 15.15rem; margin: 0 auto; background: #ab110f; padding: .2rem 0; } .offer .tab { width: 33.33%; height: 1.5rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07rem; color: #ffffff; text-shadow: 0.05rem 0.09rem 0.1rem rgba(217, 57, 13, 0.5);; background: linear-gradient(to bottom, #ffdf90, transparent); border-radius: .43rem .43rem 0px 0px; cursor: pointer; } .offer .tab.active { border-radius: 0px 0px .43rem .43rem; background: linear-gradient(to top, #ffdf90, transparent); } .offer .content .table{ height: 14rem; max-height: 14rem; overflow: hidden; } .offer .content table { width: 100%; background-color: #ffffff; } .offer .content thead { height: 1.3rem; background-color: #edc695; position: relative; z-index: 3; } .offer .content thead th { font-size: 0.51rem; line-height: 1.3rem; height: 1.3rem; color: #990d00; font-weight: 700; text-align: center; } .offer .content thead th.w25{ width: 25%; } .offer .content .list{ position: relative; } .offer .content .list tr td { font-size: 0.51rem; color: #000000; height: 40px; border: none; } .offer .content .list tr.g { background-color: #f2f2f2; } .case { width: 100%; height: auto; } .case .list { flex-wrap: wrap; height: 12rem; overflow: hidden; } .case .list li { width: 32%; margin-right: .18rem; margin-top: .4rem; position: relative; cursor: pointer; } .case .list li:nth-child(1), .case .list li:nth-child(2), .case .list li:nth-child(3){ margin-top: 0; } .case .list li:nth-child(3n) { margin-right: 0; } .case .list li img { width: 100%; } .case .more { width: 100%; margin: 1rem auto 0; flex-direction: column; cursor: pointer; } .case .more p { font-size: 0.55rem; margin-bottom: .5rem; color: #edc695; font-weight: 700; } .case .more img { width: .8rem; } .introduction { margin-top: 1rem; } .introduction .content { background: none; padding: 0; box-shadow: none; } .introduction .content h3{ margin-bottom: .63rem; } .introduction .swiper-container{ padding-bottom: 1rem; } .introduction .swiper-wrapper{ align-items: stretch; } .introduction .swiper-slide{ width: 15.15rem; height: auto; background-color: #fff8f2; box-shadow: 0rem 0rem 1.08rem 0rem rgba(255, 143, 93, 0.5); border-radius: 0.17rem; padding: 0.88rem .57rem 0.9rem .98rem; position: relative; } .introduction .swiper-slide h3{ font-size: 0.55rem; color: #990d00; } .introduction .swiper-slide p{ font-size: 0.51rem; line-height: .8rem; color: #666361; } .introduction .swiper-slide p b{ color: #000000; } .introduction .swiper-slide .num{ position: absolute; font-size: 1.71rem; font-weight: 700; color: #b80000; opacity: 0.1; top: 0; left: .4rem; } .introduction .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 0; } .introduction .swiper-pagination-bullet{ width: 0.35rem; height: 0.35rem; background-color: #6e0b0b; border-radius: .35rem; opacity: 1; } .introduction .swiper-pagination-bullet-active{ background-color: #fac467; } .recommend{ background-color: rgba(69, 7, 7, .6); margin-top: 1rem; padding: .7rem .43rem .65rem; } .recommend .content{ background: none; padding: 0; box-shadow: none; } .recommend .content ul{ margin-top: .65rem; } .recommend li{ width: 4.93rem; height: 3.43rem; background-color: #edc695; border-radius: 0.09rem; padding: .1rem; position: relative; top: 0; } .recommend li a{ display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .recommend li img{ position: absolute; left: 50%; top: 50%; max-width: none; height: 100%; z-index: 1; transform: translate3d(-50%,-50%,0) ; } .recommend li a .txt{ font-size: 0.47rem; font-weight: 700; line-height: 0.65rem; color: #6e0b0b; position: absolute; left: .38rem; top: .5rem; z-index: 2; position: relative; padding-bottom: .4rem; } .recommend li a .txt::after{ content: ""; width: 1.1rem; height: 0.04rem; background-color: #6e0b0b; position: absolute; bottom: 0; left: 0; } .custom-made-case { padding-bottom: 0.75rem; background-color: #ffffff; padding-top: .5rem; } .custom-made-case .title { text-align: center; font-size: 0.9rem; line-height: 1.3rem; color: #ff4f4b; } .custom-made-case .tips { text-align: center; font-size: 0.75rem; line-height: 1.15rem; color: #333; } .custom-made-case form { width: 13.75rem; margin: 0.5rem auto 0; } .custom-made-case .item { border: 0.05rem solid #dcdddd; border-radius: 0.2rem; margin-bottom: 0.35rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .custom-made-case .icon-box { width: 1.35rem; text-align: center; margin-top: 0.425rem; } .custom-made-case .icon { height: 0.8rem; } .custom-made-case select, .custom-made-case input { font-size: 0.6rem; line-height: 1.65rem; width: 11.85rem; height: 1.65rem; } .custom-made-case input::placeholder{ color: #727171; } .custom-made-case select { background: no-repeat right center; background-size: 0.425rem 0.25rem; color: #727171; } .custom-made-case .submit { text-align: center; width: 10rem; font-size: 0.65rem; line-height: 1.5rem; color: #fff; background: linear-gradient(90deg, #f67947, #f64e4b); -webkit-box-shadow: 0 0.25rem 0.5rem rgba(246, 68, 77, 0.48); box-shadow: 0 0.25rem 0.5rem rgba(246, 68, 77, 0.48); border-radius: 0.75rem; margin: 0.5rem auto 0; } .showimg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .7); display: none; z-index: 31; } .showimg .img { width: auto; height: 70%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } .showimg .img img { max-width: none; height: 100%; }