@charset "UTF-8";
/**
* 子页
* date:2023-12-11
* author: hjh;
 */
@font-face {
    font-family: 'DIN';
    src: url('../css/fonts/DIN/D-DIN.woff') format('woff'), url('../css/fonts/DIN/D-DIN.ttf') format('truetype'),
        url('../css/fonts/DIN/D-DIN.eot') format('embedded-opentype');
}
.banner {
    height: 496px;
    background: url('../images/city_info/banner_bg.png') no-repeat top center;
    padding-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.logo {
    display: none;
    opacity: 0;
    pointer-events: none;
    width: 323px;
    height: 47px;
    background: url('../images/city_info/logo.png') no-repeat top center;
}

.city-name {
    width: 100%;
    height: 67px;
    background: url('../images/city_info/city_name.png') no-repeat center;
    margin-top: 106px;
    background-position: center !important;
}

.info-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 190px;
}
.info-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 290px;
    height: 116px;
    border-radius: 4px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(35, 113, 200, 0.12);
    box-shadow: 0px 2px 12px 0px rgba(35, 113, 200, 0.12);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 16px;
}
.info-item .num {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #999;
    font-size: 16px;
    line-height: 39px;
    margin-top: 7px;
}
.info-item .num > span {
    color: #ad2017;
    font-family: 'DIN';
    font-size: 28px;
    font-weight: 700;
    margin-right: 8px;
}
.info-item .name {
    color: #333;
    font-size: 18px;
    line-height: 27px;
    margin-top: 5px;
}
.info-ico {
    width: 85px;
    height: 85px;
    background-repeat: no-repeat;
    margin-right: 20px;
}
.info-ico.ico1 {
    background-image: url('../images/city_info/info_ico1.png');
}
.info-ico.ico2 {
    background-image: url('../images/city_info/info_ico2.png');
}
.info-ico.ico3 {
    background-image: url('../images/city_info/info_ico3.png');
}
.info-ico.ico4 {
    background-image: url('../images/city_info/info_ico4.png');
}
.info-title {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 41px;
    margin: 50px 0 40px;
}
.info-title > span {
    position: relative;
    background: url('../images/city_info/info_title.png') no-repeat center;
    width: 258px;
    height: 41px;
}
.info-title > span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -471px;
    width: 441px;
    height: 1px;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(-6.2%, rgba(255, 255, 255, 0)), to(#f6786c));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) -6.2%, #f6786c 100%);
}
.info-title > span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -471px;
    width: 441px;
    height: 1px;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: -webkit-gradient(linear, right top, left top, color-stop(-6.2%, rgba(255, 255, 255, 0)), to(#f6786c));
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) -6.2%, #f6786c 100%);
}
.info-mods {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 40px;
}
.info-mod {
    width: 588px;
}

.sub-title {
    position: relative;
    height: 43px;
    line-height: 30px;
    border-bottom: 1px solid #e8e8e8;
}
.sub-title > h2 {
    float: left;
    position: relative;
    color: #333;
    height: 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    padding-left: 38px;
}
.sub-title > h2:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 3px;
    background: #ad2017;
    left: 0;
    right: 0;
    bottom: -19px;
}
.sub-title .more {
    float: right;
    color: #999;
    font-size: 16px;
    line-height: 24px;
}
.sub-title::before {
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    background: url('../images/index/title-before.png') no-repeat;
    background-size: 100% 100%;
    left: 0;
    top: 0;
}

.news-items {
    position: relative;
    font-size: 16px;
}
.news-items li {
    position: relative;
    line-height: 40px;
    vertical-align: top;
    margin-bottom: 4px;
}
.news-items li:before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    background-color: #333;
    border-radius: 50%;
}
.news-items li a {
    padding-left: 16px;
    margin-right: 100px;
    display: block;
    color: #333;
}
.news-items li .news-time {
    position: absolute;
    right: 0;
    top: 0;
    color: #999;
}
.news-items li:hover a,
.news-items li:hover .news-time {
    color: #c0924b;
}
.news-items li:hover::before {
    background-color: #c0924b;
}

.tab-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 14px;
}
.tab-hd-item {
    height: 32px;
    color: #333;
    font-size: 16px;
    line-height: 32px;
    margin-right: 10px;
    padding: 0 18px;
    border-radius: 30px;
    background: #eaeaea;
    cursor: pointer;
}
.tab-hd-item.active {
    background: #bd1d13;
    color: #fff;
}
.tab-bd {
    margin-top: 10px;
    min-height: 260px;
}

.city-return {
    height: 42px;
    box-sizing: border-box;
    border-radius: 50px;
    border: 1px solid #bd1d13;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 25px;
    margin-top: 115px;
    color: #bd1d13;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    float: right;
}

.city-return:hover {
    background: #bd1d13;
    color: #fff;
}