/**!
 * 青海省网上政务大厅-法律服务
 * author: qxy
 * date: 2020-12-24
 */


/* 字体 */

@font-face {
    font-family: "SHR";
    src: url("../font/SourceHanSansCN-Regular.woff") format("woff"), url("../font/SourceHanSansCN-Regular.ttf") format("truetype"), url("../font/SourceHanSansCN-Regular.eot") format("embedded-opentype");
}

@font-face {
    font-family: "SHM";
    src: url("../font/SourceHanSansCN-Medium.woff") format("woff"), url("../font/SourceHanSansCN-Medium.ttf") format("truetype"), url("../font/SourceHanSansCN-Medium.eot") format("embedded-opentype");
}

@font-face {
    font-family: "HXB";
    src: url("../font/HuXiaoBonNanShen.woff") format("woff"), url("../font/HuXiaoBonNanShen.ttf") format("truetype"), url("../font/HuXiaoBonNanShen.eot") format("embedded-opentype");
}

body {
    font-family: "SHR";
}


/* 头部 */

.law-header {
    height: 120px;
    padding-top: 30px;
    background: #fff;
    box-sizing: border-box;
}

.law-header img {
    margin-right: 25px;
}


/* banner */

.banner {
    height: 440px;
    background: url(../images/lawService/banner-bg.jpg) center 0 no-repeat;
}


/* 咨询方式 */

.consult-type {
    margin-top: -108px;
}

.consult-type li {
    float: left;
}

.consult-type li+li {
    margin-left: 20px;
}

.consult-type a {
    display: block;
    width: 285px;
    height: 200px;
    padding-top: 26px;
    font-size: 22px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 2px 32px 0px rgba(25, 61, 105, 0.08);
    border-radius: 4px;
    box-sizing: border-box;
    transition: all ease 200ms;
}

.consult-type .ico {
    display: block;
    height: 81px;
    margin-bottom: 28px;
    line-height: 81px;
}

.consult-type .ico img {
    vertical-align: middle;
}

.consult-type .ico .high {
    display: none;
}

.consult-type a:hover {
    color: #fff;
    background: url(../images/lawService/consult-bg.jpg);
}

.consult-type a:hover .init {
    display: none;
}

.consult-type a:hover .high {
    display: inline-block;
}


/* 法规百科 */

.cyclopedia {
    height: 120px;
    margin-top: 70px;
    padding: 40px 30px 0 257px;
    line-height: 40px;
    box-sizing: border-box;
    background: url(../images/lawService/cyclopedia.jpg);
}

.cyclopedia .title {
    float: left;
    font-family: "HXB";
    font-size: 30px;
    color: #fff;
}

.cyclopedia .quick-enter {
    min-width: 120px;
    height: 40px;
    margin: 0 -10px 0 30px;
    padding: 0 18px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all ease 200ms;
}

.cyclopedia .quick-enter:hover {
    color: #2868b1;
    background: #fff;
}

.cyclopedia .enter-btn {
    width: 114px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    font-family: "SHM";
    color: #2868B1;
    background: #FFFFFF;
    box-shadow: 0px 4px 30px 0px rgba(5, 29, 77, 0.47);
    border-radius: 4px;
    transition: all ease 200ms;
}

.cyclopedia .enter-btn:hover {
    color: #fff;
    background: #9cc1ff;
}


/* 公共法律服务 */

.law-hd {
    height: 45px;
    margin-top: 70px;
    background: url(../images/lawService/law-hd.png);
}

.law-hd h2 {
    display: inline-block;
    line-height: 46px;
    font-size: 28px;
    color: #2868B1;
    font-weight: bold;
}

.law-hd .txt {
    float: right;
    margin-top: 15px;
    font-size: 18px;
    color: #76899E;
}

.service-list {
    margin: 30px 0 0 -20px;
}

.service-list li {
    float: left;
    margin: 20px 0 0 20px;
}

.service-list a {
    display: block;
    width: 183px;
    height: 200px;
    padding: 0 16px;
    font-size: 22px;
    text-align: center;
    box-sizing: border-box;
    transition: all ease 200ms;
}

.service-list .ico {
    height: 120px;
    line-height: 130px;
}

.service-list .ico img {
    vertical-align: middle;
}

.service-list .ico .high {
    display: none;
}

.service-list a.purple {
    color: #798BD4;
    background: url(../images/lawService/service-bg1.jpg);
}

.service-list a.gray {
    color: #2868B1;
    background: url(../images/lawService/service-bg2.jpg);
}

.service-list a.blue {
    color: #2980B0;
    background: url(../images/lawService/service-bg3.jpg);
}

.service-list a.green {
    color: #66B991;
    background: url(../images/lawService/service-bg4.jpg);
}

.service-list a:hover {
    color: #fff;
    transform: translateY(-8px);
    background: url(../images/lawService/service-bg-h.png);
}

.service-list a:hover .init {
    display: none;
}

.service-list a:hover .high {
    display: inline-block;
}


/* 法律服务地图 */

.map-spot {
    margin: 30px 0 0 -20px;
}

.map-spot li {
    float: left;
    margin: 20px 0 0 20px;
}

.map-spot a {
    display: block;
    width: 224px;
    height: 94px;
    text-align: center;
    line-height: 94px;
    font-size: 24px;
    color: #2868B1;
    font-family: "SHM";
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #E9F0F7;
    border-radius: 4px;
    transition: all ease 200ms;
}

.map-spot a:hover {
    color: #fff;
    background: #2868b1;
}


/* 群众批评监督 */

.remark-list {
    margin: 50px 0 0 -20px;
}

.remark-list li {
    float: left;
    margin: 0 0 67px 20px;
}

.remark-list a {
    position: relative;
    display: block;
    width: 386px;
    height: 120px;
    color: #fff;
    padding: 17px 0 0 20px;
    box-sizing: border-box;
}

.remark-list .name {
    line-height: 40px;
    font-size: 28px;
    font-weight: bold;
}

.remark-list .txt {
    display: block;
    margin: 15px 0 0 -10px;
    opacity: 0.5;
    font-size: 18px;
}

.remark-list .ico {
    position: absolute;
    top: 23px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: url(../images/lawService/ico.png);
}

.remark-list li:nth-child(1) a {
    background: url(../images/lawService/remark-bg1.jpg);
}

.remark-list li:nth-child(2) a {
    background: url(../images/lawService/remark-bg2.jpg);
}

.remark-list li:nth-child(3) a {
    background: url(../images/lawService/remark-bg3.jpg);
}