.all-city-box { background-color: #ffffff; } .all-city-box .guess-city { margin: 19px auto; border: 1px solid #ff6c00; color: #9d9d9e; width: 290px; height: 36px; line-height: 36px; font-size: 16px; display: flex; align-items: center; justify-content: center; } .all-city-box .guess-city em, .all-city-box .guess-city a { color: #ff6c00; } .all-city-box .guess-city em { margin: 0 4px; } .all-city-box .province-city { padding: 19px 24px; font-size: 14px; line-height: 26px; color: #3d3d3d; border-bottom: 1px solid #ededee; } .all-city-box .province-city .province-city-select .choose-inter { margin-left: 15px; color: #fff; background: #ff6c00; line-height: 26px; padding: 0 18px; } .all-city-box .province-city .choose-province, .all-city-box .province-city .choose-city { position: relative; width: 101px; height: 26px; line-height: 26px; margin-left: 15px; cursor: pointer; color: #9d9d9e; } .all-city-box .province-city .choose-province .choose-province-input, .all-city-box .province-city .choose-city .choose-province-input, .all-city-box .province-city .choose-province .choose-city-input, .all-city-box .province-city .choose-city .choose-city-input { padding-left: 9px; width: 100%; height: 100%; } .all-city-box .province-city .choose-province .choose-province-input input, .all-city-box .province-city .choose-city .choose-province-input input, .all-city-box .province-city .choose-province .choose-city-input input, .all-city-box .province-city .choose-city .choose-city-input input { color: #9d9d9e; background-color: unset; border: 0; cursor: pointer; width: calc(100% - 24px); height: 100%; } .all-city-box .province-city .choose-province .choose-province-input input::-webkit-input-placeholder, .all-city-box .province-city .choose-city .choose-province-input input::-webkit-input-placeholder, .all-city-box .province-city .choose-province .choose-city-input input::-webkit-input-placeholder, .all-city-box .province-city .choose-city .choose-city-input input::-webkit-input-placeholder { color: #9d9d9e; } .all-city-box .province-city .choose-province .choose-province-input img, .all-city-box .province-city .choose-city .choose-province-input img, .all-city-box .province-city .choose-province .choose-city-input img, .all-city-box .province-city .choose-city .choose-city-input img { transition: 0.2s; } .all-city-box .province-city .choose-province.choose-hover .choose-province-input img, .all-city-box .province-city .choose-city.choose-hover .choose-province-input img, .all-city-box .province-city .choose-province.choose-hover .choose-city-input img, .all-city-box .province-city .choose-city.choose-hover .choose-city-input img { transform: rotate(180deg); } .all-city-box .province-city .choose-province ul, .all-city-box .province-city .choose-city ul { position: absolute; top: 24px; left: -1px; width: 100%; background: #fff; display: none; overflow: hidden; z-index: 10; height: 110px; } .all-city-box .province-city .choose-province ul li, .all-city-box .province-city .choose-city ul li { height: 26px; line-height: 26px; padding-left: 8px; } .all-city-box .province-city .choose-province ul li:hover, .all-city-box .province-city .choose-city ul li:hover { background: rgba(231, 99, 2, 0.1); color: #3d3d3d; } .all-city-box .province-city .hot-city { margin-left: 25px; } .all-city-box .province-city .hot-city a { margin-left: 24px; color: #6d6d6d; } .all-city-box .province-city .hot-city a:hover { color: #ff6c00; } .all-city-box .letter-list { padding: 19px 24px; font-size: 14px; line-height: 28px; color: #3d3d3d; border-bottom: 1px solid #ededee; } .all-city-box .letter-list dd { margin-left: 35px; line-height: 28px; padding: 0 9px; cursor: pointer; border: 1px solid #ededee; } .all-city-box .letter-list dd.active { background: #ff6c00; color: #fff; } .all-city-box .letter-city { padding: 20px 24px 5px; } .all-city-box .letter-city .letter-city-item { display: none; } .all-city-box .letter-city .letter-city-item:first-child { display: block; } .all-city-box .letter-city .letter-city-item dl { font-size: 14px; line-height: 26px; margin-bottom: 15px; } .all-city-box .letter-city .letter-city-item dl dt { width: 26px; height: 26px; text-align: center; line-height: 26px; background: #ff6c00; color: #fff; border-radius: 2px; } .all-city-box .letter-city .letter-city-item dl a { color: #6d6d6d; margin-left: 30px; } .all-city-box .letter-city .letter-city-item dl a:hover { color: #ff6c00; } .all-class-item { width: 604px; height: 200px; background: #fbfbfb; overflow: hidden; margin-top: 12px; } .all-class-item:nth-child(2n) { margin-left: 12px; } .all-class-item .all-class-item-l { width: 90px; height: 200px; border-style: solid; border-width: 1px; border-color: #ededee; } .all-class-item .all-class-item-l a { display: block; width: 90px; line-height: 50px; text-align: center; border-style: solid; border-color: #fbfbfb; border-right: 0px; border-left-color: #ededee; box-sizing: border-box; margin-top: 33.33px; margin-left: -1px; } .all-class-item .all-class-item-l a.active { border-width: 1px; background: #fff; border-color: #ededee !important; } .all-class-item .all-class-item-l a.active-hover { border-width: 1px; background: #fff; border-color: #ff6c00 !important; } .all-class-item .all-class-item-r { width: 514px; height: 200px; overflow: hidden; background: #fff; border-style: solid; border-width: 1px; border-color: #ededee; border-left: 0px; } .all-class-item .all-class-item-r ul { width: 479px; max-height: 164px; overflow: hidden; margin: 10px 25px 25px 10px; font-size: 12px; color: #6d6d6d; display: none; } .all-class-item .all-class-item-r ul li { padding: 15px 0px 0px 15px; line-height: 17px; } .all-class-item .all-class-item-r ul li a:hover { color: #ff6c00; } .all-class-item .all-class-item-r ul.active-ul { display: flex; flex-wrap: wrap; } .all-class-item .all-class-item-r.active-hover { background: #fff; border-color: #ff6c00; box-sizing: border-box; } .related-last-box { display: flex; } .related-last-box .related-last-item { flex: 1; min-width: 0; padding: 18px 16px; border-right: 1px solid #ededee; } .related-last-box .related-last-item:last-child { margin-right: 0; } .related-last-box .related-last-item .related-last-title { font-size: 15px; margin-bottom: 18px; } .related-last-box .related-last-item .related-last-title img { margin-right: 5px; } .related-last-box .related-last-item .related-last-title span { line-height: 18px; } .related-last-box .related-last-item .related-last-title a { font-size: 13px; color: #6d6d6d; margin-left: auto; } .related-last-box .related-last-item ul li { position: relative; margin-top: 10px; } .related-last-box .related-last-item ul li a { width: 100%; padding-left: 10px; color: #333333; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative; } .related-last-box .related-last-item ul li a::before { content: ''; position: absolute; display: inline-block; width: 4px; height: 4px; background: #ff6c00; border-radius: 50%; left: 0; top: 50%; transform: translatey(-50%); }