.main { width: 100%; } .main>.left { width: 4.9201rem; height: 100vh; padding: 0.54rem 0.39rem; box-sizing: border-box; background: url(../img/empowerback.png) no-repeat; background-size: 100% 100%; position: fixed; } .main>.left>.title, .main>.left>.select, .main>.left>.inp { width: 100%; } .main>.left>.title>p:nth-child(1) { margin-top: 6vh; font-size: 0.315rem; font-weight: bold; color: #333333; } .main>.left>.title>p:nth-child(2) { margin-top: 1.5vh; font-size: 0.135rem; font-weight: 400; color: #333333; } .main>.left>.select { margin-top: 5vh; color: #A8A8A8; border-bottom: 1px solid #A8A8A8; display: flex; justify-content: space-evenly; } .main>.left>.select>div { width: 100%; padding-bottom: 0.1875rem; text-align: center; font-size: 0.18rem; font-weight: 400; color: #A8A8A8; position: relative; cursor: pointer; } .main>.left>.select .se_active { color: #333; } .main>.left>.select>div:nth-child(1)>.bot { display: none; } .main>.left>.select .bot { display: block; width: 100%; height: 2px; position: absolute; bottom: -1px; background-color: #333; } .main>.left .inp1, .main>.left .inp2 { margin-top: 4vh; } .main>.left .inp1, .main>.left .inp2 { width: 100%; } .main>.left .inp1 input { width: 100%; height: 0.51rem; border: 1px solid #DBD9D9; border-radius: 0.255rem; padding: 0.15rem 0.27rem; box-sizing: border-box; margin-bottom: 0.2rem; background-color: #fff; font-size: 0.15rem; font-weight: 400; color: #333333; } .inp2 .choose { width: 100%; } .inp2 .choose .country, .inp2 .choose .province, .inp2 .choose .city { width: 100%; height: 0.51rem; border: 1px solid #DBD9D9; border-radius: 0.255rem; padding: 0.15rem 0.27rem; box-sizing: border-box; margin-bottom: 0.2rem; background-color: #fff; font-size: 0.15rem; font-weight: 400; color: #333333; position: relative; } .inp2 .choose .country .country-box, .inp2 .choose .province .province-box, .inp2 .choose .city .city-box { width: 100%; height: 100%; cursor: pointer; } .inp2 .choose .country .country-box::after, .inp2 .choose .province .province-box::after, .inp2 .choose .city .city-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .inp2 .choose .country .country-box .country-value, .inp2 .choose .province .province-box .province-value, .inp2 .choose .city .city-box .city-value { float: left; } .inp2 .choose .country .country-box .icon, .inp2 .choose .province .province-box .icon, .inp2 .choose .city .city-box .icon { float: right; width: 0.1575rem; } .inp2 .choose .country .country-box .icon img, .inp2 .choose .province .province-box .icon img, .inp2 .choose .city .city-box .icon img { width: 100%; vertical-align: middle; transition: 0.3s; } .inp2 .choose .country .country-box .icon.xz img, .inp2 .choose .province .province-box .icon.xz img, .inp2 .choose .city .city-box .icon.xz img { transform: rotate(180deg); } .inp2 .choose .country ul, .inp2 .choose .province ul, .inp2 .choose .city ul { width: 100%; max-height: 2rem; border-radius: 0.1rem; overflow: scroll; background-color: #fff; display: none; position: absolute; left: 0; top: 0.5rem; z-index: 1; box-shadow: 0px 0px 0.225rem 0px rgba(0, 0, 0, 0.1); } .inp2 .choose .country ul li, .inp2 .choose .province ul li, .inp2 .choose .city ul li { padding: 0.06rem 0.15rem; box-sizing: border-box; color: #999999; font-size: 0.14rem; } .inp2 .choose .country ul li:hover, .inp2 .choose .province ul li:hover, .inp2 .choose .city ul li:hover { background: #F5F4F4; } .main>.left>.inp>.inp1>.btn, .main>.left>.inp>.inp2>.btn { width: 100%; margin-top: 14vh; } .main>.left>.inp>.inp1>.btn>button:nth-child(1), .main>.left>.inp>.inp2>.btn>button:nth-child(1) { display: block; width: 15%; height: 0.51rem; font-size: 0.15rem; font-weight: 400; margin: auto; border: none; background-color: transparent; cursor: pointer; } .main>.left>.inp>.inp1>.btn>button:nth-child(2), .main>.left>.inp>.inp2>.btn>button:nth-child(2) { width: 100%; height: 0.51rem; background: #EA222D; color: #fff; font-size: 0.15rem; font-weight: 400; color: #FFFFFF; border-radius: 0.255rem; border: none; background-color: #EA222D; cursor: pointer; } .main>.left .inp1 { display: none; } .main>.right { display: inline-block; vertical-align: top; margin-left: 0.35rem; width: 8.7077rem; height: 100%; position: absolute; right: 0.5rem; margin-top: 0.68rem; } .main>.right>.find_top { width: 100%; padding: 0.2625rem 0.0825rem; margin-bottom: 0.345rem; box-sizing: border-box; font-size: 0.27rem; font-weight: 400; color: #333333; border-bottom: 1px solid #D7D7D7; } .main>.right>.find_top>.num { color: #EA222D; } .main .finded { width: 100%; padding-bottom: 0.2rem; } .main .finded>.box { width: 100%; height: 2.415rem; margin-bottom: 0.195rem; padding: 0.375rem 0.3975rem; padding-right: 0; box-sizing: border-box; background-color: #F5F4F4; display: flex; } .main .finded>.box:last-child { margin-bottom: 0.3rem; } .main .boxleft { flex-shrink: 0; width: 6.5026rem; height: 100%; border-right: 1px solid #DCDCDC; } .main .boxleft .title { font-size: 0.165rem; font-weight: 400; color: #333333; margin-bottom: 0.3rem; } .main .boxleft .code { width: 5.9401rem; padding-bottom: 0.165rem; border-bottom: 1px solid #333; position: relative; } .main .boxleft .cleft { font-size: 0.135rem; font-weight: bold; color: #333333; display: inline-block; } .main .boxleft .cleft>.red_ { width: 0.0375rem; height: 0.135rem; margin-right: 0.0975rem; margin-top: -0.04rem; vertical-align: middle; } .main .boxleft .address { margin-top: 0.2175rem; margin-bottom: 0.3rem; font-size: 0.12rem; font-weight: 400; color: #A8A8A8; } .main .boxleft .area { font-size: 0.15rem; font-weight: 400; color: #333333; } .main .boxleft .area>.icon { display: inline-block; vertical-align: middle; margin-right: 0.0825rem; width: 0.165rem; height: 0.195rem; background: url(../img/caseadress.png) no-repeat; background-size: contain; } .main .boxleft .area>.text { display: inline-block; vertical-align: middle; } .main .boxleft .cright { font-size: 0.135rem; font-weight: 400; color: #333333; display: inline-block; position: absolute; right: 0; } .main .boxright { flex-shrink: 0; width: 1.7rem; text-align: center; height: 100%; } .main .boxright a { display: block; } .main .boxright .icon { display: block; margin: auto; margin-top: 0.2025rem; margin-bottom: 0.2rem; width: 0.27rem; height: 0.255rem; background: url(../img/empowerchakan.png) no-repeat; background-size: contain; } .main .boxright .check { margin-top: 0.18rem; font-size: 0.12rem; font-weight: 400; color: #333333; } .main .boxright .web { margin-top: 0.5rem; font-size: 0.12rem; font-weight: bold; color: #333333; } .main .boxright .web>.text { display: inline-block; vertical-align: middle; margin-right: 0.0375rem; } .main .boxright .web>.img { display: inline-block; vertical-align: middle; width: 0.15rem; height: 0.165rem; background: url(../img/empowerrukou.png) no-repeat; background-size: contain; } @media screen and (max-width:1024px) { .main>.left { width: 100%; height: 14rem; padding: 0.54rem 0.39rem; box-sizing: border-box; background: url(../img/empowerback.png) no-repeat; background-size: 100% 100%; position: relative; padding-top: 2rem; } .main>.left>.title>p:nth-child(1) { margin-top: 1vh; font-size: 0.5rem; font-weight: bold; color: #333333; } .main>.left>.title>p:nth-child(2) { margin-top: 1.5vh; font-size: 0.26rem; font-weight: 400; color: #333333; } .main>.left>.select>div { width: 100%; padding-bottom: 0.1875rem; text-align: center; font-size: 0.34rem; font-weight: 400; color: #A8A8A8; position: relative; cursor: pointer; } .inp2 .choose .country, .inp2 .choose .province, .inp2 .choose .city { width: 100%; height: 1rem; border: 1px solid #DBD9D9; border-radius: 0.5rem; padding: 0.3rem 0.5rem; box-sizing: border-box; margin-bottom: 0.2775rem; background-color: #fff; font-size: 0.3rem; font-weight: 400; color: #333333; position: relative; } .inp2 .choose .country ul, .inp2 .choose .province ul, .inp2 .choose .city ul { width: 100%; max-height: 4rem; border-radius: 0.2rem; overflow: scroll; background-color: #fff; display: none; position: absolute; left: 0; top: 0.97rem; z-index: 1; } .inp2 .choose .country ul li, .inp2 .choose .province ul li, .inp2 .choose .city ul li { padding: 0.1rem 0.3rem; box-sizing: border-box; color: #999999; } .inp2 .choose .country .country-box .icon, .inp2 .choose .province .province-box .icon, .inp2 .choose .city .city-box .icon { float: right; width: 0.25rem; } .main>.left>.inp>.inp1>.btn>button:nth-child(1), .main>.left>.inp>.inp2>.btn>button:nth-child(1) { display: block; width: 15%; height: 1rem; font-size: 0.3rem; font-weight: 400; margin: auto; border: none; background-color: transparent; cursor: pointer; } .main>.left>.inp>.inp1>.btn>button:nth-child(2), .main>.left>.inp>.inp2>.btn>button:nth-child(2) { width: 100%; height: 1rem; background: #EA222D; color: #fff; font-size: 0.3rem; font-weight: 400; color: #FFFFFF; border-radius: 0.5rem; border: none; background-color: #EA222D; cursor: pointer; } .main>.left .inp1 input { width: 100%; height: 1rem; border: 1px solid #DBD9D9; border-radius: 0.5rem; padding: 0.15rem 0.4rem; box-sizing: border-box; margin-bottom: 0.2775rem; background-color: #fff; font-size: 0.3rem; font-weight: 400; color: #333333; } .main>.right { display: block; margin-left: 0rem; width: 100%; height: 100%; position: relative; right: 0rem; margin-top: 0.6rem; } .main>.right>.find_top { width: 90%; margin: 0 auto; padding: 0.2625rem 0.0825rem; margin-bottom: 0.345rem; box-sizing: border-box; font-size: 0.35rem; font-weight: 400; color: #333333; border-bottom: 1px solid #D7D7D7; } .main .finded { width: 90%; margin: auto; } .main .finded>.box { width: 100%; height: 5rem; margin-bottom: 0.3rem; padding: 0.375rem 0.3975rem; box-sizing: border-box; background-color: #F5F4F4; display: block; } .main .boxleft { flex-shrink: 0; width: 100%; height: 2.8rem; border-right: none; } .main .boxleft .title { font-size: 0.3rem; font-weight: 400; color: #333333; margin-bottom: 0.3rem; } .main .boxleft .code { width: 100%; padding-bottom: 0.25rem; border-bottom: 1px solid #333; position: relative; } .main .boxleft .cleft { font-size: 0.22rem; font-weight: bold; color: #333333; display: inline-block; } .main .boxleft .cleft>.red_ { width: 0.0375rem; height: 0.22rem; margin-right: 0.0975rem; margin-top: -0.04rem; vertical-align: middle; } .main .boxleft .cright { font-size: 0.22rem; font-weight: 400; color: #333333; display: inline-block; position: absolute; right: 0; } .main .boxleft .address { margin-top: 0.25rem; margin-bottom: 0.3rem; font-size: 0.24rem; font-weight: 400; color: #A8A8A8; } .main .boxleft .area { font-size: 0.20rem; font-weight: 400; color: #333333; } .main .boxright { flex-shrink: 0; width: 100%; text-align: center; height: 1.5rem; display: flex; justify-content: space-between; align-items: center; } .main .boxright .check { margin-top: 0.18rem; font-size: 0.2rem; font-weight: 400; color: #333333; } .main .boxright .icon { display: block; margin: auto; margin-top: 0.2025rem; margin-bottom: 0.2rem; width: 0.37rem; height: 0.355rem; background: url(../img/empowerchakan.png) no-repeat; background-size: contain; } .main .boxright .web { font-size: 0.2rem; font-weight: bold; color: #333333; } }