@charset "utf-8"; /* 公共模块 */ @import "/2022/src/assets/css/animate.min.css"; @import "/2022/src/assets/css/nav/header.css"; @import "/2022/src/assets/css/nav/footer.css"; @import "/2022/src/assets/css/nav/common-module.css"; @import "/2022/src/assets/css/nav/tool-right.css"; @import "/2022/src/assets/css/nav/map-arousal.css"; .header-top { position: absolute; width: 100%; z-index: 15; } .header-top #cookie-pop { position: relative; } .grey { color: #9a9a9a; } .color { color: #eb0a1e !important; } .white { color: #fff; } .content-body { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; line-height: 1; } .content-body .img-box { -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .content-body .img-box .tit { font-size: 0.36rem; letter-spacing: 0.08rem; position: absolute; top: 1.8rem; left: 0; right: 0; text-align: center; z-index: 5; } .content-body .img-box img, .content-body .img-box video, .content-body .img-box canvas { width: 100%; height: 100%; position: absolute; -o-object-fit: cover; object-fit: cover; } .content-body .form-box { background: #ffffff; width: 6.6rem; height: 100vh; font-size: 0.18rem; padding: 1.8rem 1.2rem 0 0.65rem; } .content-body .form-box .tit { font-size: 0.36rem; letter-spacing: 0.02rem; } .content-body .form-box .desc { color: #606060; letter-spacing: 0.04rem; margin: 0.3rem 0; } .content-body .form-box .msg { line-height: 0.2rem; margin: 0.3rem 0 0.15rem; } .content-body .form-box .flex-box { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #dbdbdb; height: 0.79rem; line-height: 0.79rem; position: relative; gap: 0.35rem; } .content-body .form-box .flex-box.cur { border-color: #e7251f; } .content-body .form-box .flex-box.cur .icon-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .content-body .form-box .flex-box .flex-text { font-size: 0.24rem; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .content-body .form-box .flex-box .near { font-size: 0.18rem; cursor: pointer; } .content-body .form-box .flex-box .near img { width: 0.17rem; display: inline-block; vertical-align: middle; } .content-body .form-box .flex-box .icon-down { width: 0.18rem; height: 0.18rem; margin: auto 0; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: -o-transform 0.3s; -moz-transition: transform 0.3s, -moz-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s; } .content-body .form-box .input-box { border-bottom: 0px; } .content-body .form-box .input-box input { height: 100%; width: 46.5%; border-bottom: 1px solid #dbdbdb; font-size: 0.24rem; } .content-body .form-box .input-box .errinfo { position: absolute; left: 55%; bottom: -0.55rem; font-size: 0.15rem; color: #e60012; } .content-body .form-box .input-box .errinfo i { display: inline-block; vertical-align: middle; width: 0.2rem; height: 0.2rem; line-height: 0.2rem; font-size: 0.18rem; margin-right: 0.1rem; color: #fff; text-align: center; border-radius: 50%; background-color: #e60012; } .content-body .form-box .form-checkbox { margin: 0.34rem 0 0.65rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.1rem; } .content-body .form-box .form-checkbox .checkbox-box { width: 0.3rem; cursor: pointer; height: 0.3rem; border: 3px solid #000; border-radius: 50%; overflow: hidden; } .content-body .form-box .form-checkbox .checkbox-box.checked label { background: url(/uploads/image/2saicomponent/checked.png) center center no-repeat; -o-background-size: 120% 120%; background-size: 120% 120%; display: block; height: 100%; cursor: pointer; } .content-body .form-box .form-submit { cursor: pointer; height: 0.72rem; line-height: 0.72rem; text-align: center; color: #fff; background: #000000; border-radius: 0.36rem; } .local-msg { width: 4.13rem; height: 0.69rem; line-height: 0.69rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 0.08rem; font-size: 0.22rem; font-weight: 400; color: #ffffff; position: fixed; top: 60%; left: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; opacity: 0; z-index: 0; } .local-msg.cur { opacity: 1; z-index: 10; top: 50%; } .bg-box { width: 100%; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); position: absolute; top: 0.89rem; z-index: 1; overflow: hidden; } .bg-box .item-top { height: 0.6rem; line-height: 0.6rem; border-bottom: 1px solid #dadada; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 0 0.2rem; gap: 0.3rem; } .bg-box .item-top .item-tit { cursor: pointer; } .bg-box .item-top .cur { font-weight: bold; margin-bottom: -1px; border-bottom: 2px solid #e7251f; } .bg-box .item-main { padding-left: 0.36rem; margin: 0.2rem 0; height: 3.2rem; overflow: auto; } .bg-box .item-main .item-list { font-size: 0.2rem; line-height: 0.44rem; cursor: pointer; } .dealer-box .search-input { margin: 0.2rem; border: 1px solid rgb(216, 216, 216); border-radius: 0.08rem; height: 0.48rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.17rem; padding: 0 0.2rem; cursor: pointer; position: relative; } .dealer-box .search-input input { height: 100%; -webkit-flex: 0.9; -moz-box-flex: 0.9; -ms-flex: 0.9; flex: 0.9; font-size: 0.18rem; } .dealer-box .search-input .icon-search-close { padding: 0.14rem; width: 0.48rem; height: 0.48rem; position: absolute; right: 0; } .dealer-box .search-input .icon-search { width: 0.2rem; height: 0.2rem; margin: 0; } .dealer-box .result-box { text-align: center; line-height: 0.28rem; color: #909090; position: absolute; width: 100%; } .dealer-box .result-box img { width: 0.5rem; margin: 0.35rem auto 0.15rem; } .dealer-box .item-top .item-tit { max-width: 45%; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .dealer-box .item-top .item-tit:last-child { border: 0px !important; max-width: 55%; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } .dealer-box .item-top .item-tit.cur span { width: 100%; display: inline-block; margin-bottom: -1px; border-bottom: 2px solid #e7251f; height: 0.6rem; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .dealer-box .item-main { padding: 0 0.2rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 3.8rem; } .dealer-box .item-main .item-list { width: 25%; padding: 0.05rem 0; min-height: 0.44rem; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; line-height: 1.3; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .dealer-box .dealer-item { height: 3.15rem; } .dealer-box .dealer-item .item-list { width: 100%; padding-left: 0.15rem; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .dealer-box .dealer-item .item-list p { width: 100%; } .dealer-box .dealer-item .item-list .item-address { font-size: 0.14rem; color: #909090; margin: 0.1rem 0 0.18rem; } @media (max-width: 1024px) { .content-body { display: block; } .content-body .img-box { width: 100%; height: 50vh; } .content-body .img-box .tit { top: 11vh; left: 0; right: 0; text-align: center; } .content-body .form-box { width: 100%; height: auto; font-size: 0.22rem; padding: 1rem; } .content-body .form-box .flex { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 0.2rem; margin-bottom: 0.3rem; line-height: 0.48rem; } .content-body .form-box .tit { font-size: 0.48rem; letter-spacing: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .content-body .form-box .desc { margin: 0; white-space: nowrap; line-height: 2; } .content-body .form-box .msg { line-height: 0.25rem; margin: 0.46rem 0 0; } .content-body .form-box .flex-box { height: 0.95rem; margin-top: 0.15rem; line-height: 0.9rem; position: relative; gap: 0.25rem; } .content-body .form-box .flex-box .flex-text { font-size: 0.3rem; } .content-body .form-box .flex-box .near { font-size: 0.22rem; } .content-body .form-box .flex-box .near img { width: 0.2rem; } .content-body .form-box .flex-box .icon-down { width: 0.22rem; height: 0.22rem; } .content-body .form-box .input-box input { font-size: 0.3rem; } .content-body .form-box .input-box .errinfo { bottom: -0.8rem; font-size: 0.18rem; } .content-body .form-box .input-box .errinfo i { width: 0.32rem; height: 0.32rem; line-height: 0.32rem; font-size: 0.16rem; margin-right: 0.1rem; } .content-body .form-box .form-checkbox { margin: 0.5rem 0; gap: 0.2rem; } .content-body .form-box .form-checkbox .checkbox-box { width: 0.4rem; height: 0.4rem; } .content-body .form-box .form-submit { height: 0.84rem; line-height: 0.84rem; border-radius: 0.42rem; } .bg-box { width: 100%; position: fixed; top: 0; bottom: 0; left: 0; border-top: 0px; z-index: 91; background-color: rgba(0, 0, 0, 0.5); } .bg-box .bg-main { overflow: hidden; background: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); border-radius: 0.16rem; position: absolute; width: 93.6%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .bg-box .item-top { height: 1.1rem; line-height: 1.1rem; padding: 0 0.5rem; gap: 0.4rem; font-size: 0.3rem; } .bg-box .item-main { padding-left: 0.65rem; margin: 0.35rem 0; height: 6.2rem; } .bg-box .item-main .item-list { font-size: 0.3rem; line-height: 0.9rem; } .dealer-box .search-input { height: 0.8rem; padding: 0 0.23rem; } .dealer-box .search-input input { font-size: 0.24rem; } .dealer-box .search-input .icon-search-close { padding: 0.2rem; width: 0.68rem; height: 0.68rem; right: 0.15rem; } .dealer-box .search-input .icon-search { width: 0.28rem; height: 0.28rem; } .dealer-box .result-box { line-height: 0.33rem; } .dealer-box .result-box img { width: 0.64rem; margin: 0.4rem auto 0.2rem; } .dealer-box .item-top .item-tit { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .dealer-box .item-top .item-tit.cur span { height: 1.1rem; } .dealer-box .item-main { height: 8rem; padding: 0 0.2rem; } .dealer-box .item-main .item-list { width: 20%; line-height: 1.4; min-height: 0.8rem; } .dealer-box .dealer-item { height: 7.25rem; margin-top: 0; } .dealer-box .dealer-item .item-list { width: 100%; padding-left: 0.15rem; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media (max-width: 750px) { .header-top { position: relative; } .content-body .img-box { height: 5.6rem; } .content-body .img-box .tit { top: 0.8rem; } .content-body .form-box { padding: 0.6rem 0.34rem 0.97rem; } .content-body .form-box .flex { line-height: 1.2; } .content-body .form-box .input-box .errinfo { bottom: -0.7rem; } .content-body .form-box .form-checkbox .checkbox-box { width: 0.36rem; height: 0.36rem; } .dealer-box .item-main .item-list { width: 33.33%; } .dealer-box .dealer-item .item-list { width: 100%; } .dealer-box .dealer-item .item-list .item-address { font-size: 0.22rem; margin: 0.1rem 0 0.25rem; } }