* {
    margin: 0;
    padding: 0;
}






body {
    width: 100%;
    margin: 0 auto;
    font: 14px/1.5 '微软雅黑';
    color: #333;
    min-width: 320px;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: #333;
}

i {
    font-style: normal;
}

button, input, textarea, hr {
    border: none;
}

.clear {
    clear: both;
}

table {
    border-collapse: collapse;
    max-width: 100%;
}

table td {
    border-collapse: collapse;
}
img{
    border:none;
}


input:focus {
    outline: none;
}
.main{width:100%;max-width: 1200px;margin:0 auto;display: block;}

.header{width:100%;background:#0483f5;display: block;}
@media screen and (min-width: 751px) {
    .header .main{display: flex;justify-content: space-between;position: relative;}
    .web-search,.web-nav-btn,.web-nav,.web-banner{display: none !important;}
}
.header .main .logo{width:54%;max-width: 650px;display: block;padding-bottom: 15px;}
.header .main .logo img{width:100%;display: block;border:none;}


.banner,.banner a,.banner a img{width:100%;display: block;}


.header .search{width:230px;position: absolute;top:50%;right:0;transform: translateY(-50%);}
.header .search ul{width:100%;display: flex;justify-content: start;text-align: right;}
.header .search ul li{float: none !important;display: inline-block !important;width:auto;flex-grow: 0;display: block;border-right:1px solid #fff;}
.header .search ul li:last-child{border-right: none;}
.header .search ul li a{font-size:13px;color:#fff;line-height: 14px;display: block;padding:0 5px;}
.header .search ul li:first-child a{padding-left:0;}
.header .header-form{width:100%;margin-top:10px;display: flex;justify-content: space-between;font-size:13px;line-height: 24px;}
.header .header-form .input{flex-grow: 1;display: block;padding:0 10px;color:#333;line-height: 24px;}
.header .header-form .button{padding:0 5px;display: block;flex-grow: 0;line-height: 24px;background:#e49f42;color:#fff;}

@media screen and (min-width: 750px) {
    .header .search ul,.header .header-form{
        display: block;
        justify-content: unset;
    }
    .header .search ul li,.header .header-form .input,.header .header-form .button{
        float: left;
        display: inline-block;
        flex-grow: unset;
    }
    .header .header-form .input{
        width: 164px;
        height: 24px;
    }
}

@media screen and (max-width: 750px) {
    .header .search,.banner{display: none;}
    .web-search,.web-banner{display: block;}
    .header .main{position: relative;}
    .web-banner,.web-banner a,.web-banner a img{width:100%;}
    .web-banner a img{display: block;}
    .header .main .logo{width:86%;padding:10px 0;margin-bottom: 0;}
    .web-nav-btn{width:12%;display: block;position: absolute;top:50%;right:0;transform: translateY(-50%);}
    .web-nav-btn span{width:80%;height:3px;border-radius: 2px;margin:10px auto;display: block;background:#fff;}
    .web-nav,.category{width:100%;display: none;position: fixed;top:0;left:0;height: 100vh;background:rgba(0,0,0,0.5);z-index:9;}
    .web-nav-right,.category .web-nav-right{width:50%;height: 100vh;position: absolute;left:0;bottom:0;top:0;}
    .web-nav ul,.category ul{width:50%;height:95%;position: relative;padding:5% 0;left:50%;right:0;bottom:0;top:0;background:#005bac;overflow-y: auto;}
    .web-nav ul ul{position: relative;left:20px;padding:0;width:100%;}
    .web-nav ul li,.category ul li{width:100%;display: block;font-size:16px;line-height: 40px;}
    .web-nav ul li a,.category ul li a{color:#fff;padding:0 10px;display: block;}
    .web-nav ul li i,.category ul li i{width:20px;height:40px;line-height: 40px;color:#fff;font-size:16px;float:right;display: inline-block;}
    .web-nav ul li.on,.category ul li a.on{background:#fe992d;}
    .web-nav ul li.on ul li{background: none;}
    .web-nav ul li dl,.category ul li dl{display: none;}
    .web-nav ul li dl dd,.category ul li dl dd{padding-left:20px;background:#005bac !important;}
    .web-nav ul li dl dd a.on,.category ul li dl dd a.on,.web-nav ul li.on ul li.on a {color:#fe992d !important;background: none;}

    .web-search{width:90%;padding:10px 5%;background:#005bac;color:#fff;}
    .web-search ul{width:50%;float:left;display: block;line-height: 24px;}
    .web-search ul li{float:left;display: inline-block;line-height:16px;font-size:14px;border-right:1px solid #fff;}
    .web-search ul li a{color:#fff;padding:0 5px;}
    .web-search ul li:nth-child(4){border-right: none;}
    .web-search form{width:50%;float:right;display: flex;justify-content: space-between;}
    .web-search form .input{flex-grow: 1;padding:0 10px;display: block;line-height: 24px;font-size:14px;}
    .web-search form button{flex-grow: 0;display: block;padding:0 10px;line-height: 24px;background:#fe992d;font-size:12px;color:#fff;}
}
@media screen and (max-width: 513px) {
    .web-search ul{width:100%;float: inherit;display: block;}
    .web-search form{width:100%;float: inherit;margin-top:10px;}
}

.nav{
    width:100%;
    display: block;
    line-height: 56px;
    background: #0f43aa;
    background: -moz-linear-gradient(top,  #0e4fde 0%, #093bd1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e4fde), color-stop(100%,#093bd1));
    background: -webkit-linear-gradient(top,  #0e4fde 0%,#093bd1 100%);
    background: -o-linear-gradient(top,  #0e4fde 0%,#093bd1 100%);
    background: -ms-linear-gradient(top,  #0e4fde 0%,#093bd1 100%);
    background: linear-gradient(to bottom,  #0e4fde 0%,#093bd1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e4fde', endColorstr='#093bd1',GradientType=0 );
}
.nav ul{width:100%;max-width: 1200px;margin:0 auto;display: flex;justify-content: space-between;}
.nav ul li{flex-grow: 1;display: block;text-align: center;position:relative;line-height: 24px;/*padding:0 10px;*/}
.nav ul li a{width:100%;display: block;color:#fff;font-size:17px;padding:10px 0;}
.nav ul li a P{white-space: nowrap;}
.nav ul li a span{font-size:12px;line-height: 16px;display: block;}
.nav ul li dl{position: absolute;top:100%;left:50%;transform:translateX(-50%);display: none;background:#fff;z-index:9;padding:10px 20px;}
.nav ul li dl dd{line-height: 36px;font-size:14px;display: block;padding:0 15px;white-space: nowrap;}
.nav ul li dl dd a{padding:0;color:#0483f5;font-size:14px;}
.nav ul li dl dd:hover{background: #004998;}
.nav ul li dl dd:hover a{color:#fff;}
@media screen and (min-width: 750px) {
    .nav ul{
        display: block;
        justify-content: unset;
    }
    .nav ul li{
        flex-grow: unset;
        float: left;
        display: inline-block;
        width:108.33px;
    }
}

.nav .nav-diy-sub-nav{
    width:760px;
    position: absolute;
    top:100%;
    left:0;
    z-index:9;
    background:#fff;
    /*width:1200px;*/
    display: flex;
    justify-content: start;
}
.nav .nav-diy-sub-nav .nav-diy-sub-nav-left{
    width:100px;
  min-width:100px;
    float: left;
    flex-grow: 0;
    margin:10px 0;
    display: inline-block;
}
.nav .nav-diy-sub-nav .nav-diy-sub-nav-left a{
    width:100%;
    font-size:14px;
    color:#0483f5;
    line-height: 36px;
    display: block;
    padding:0;
}
.nav .nav-diy-sub-nav .nav-diy-sub-nav-right{
  width:658px;
  max-width:658px;
    float:left;
    display: inline-block;
    border-left:1px solid #e5e5e5;
}
.nav .nav-diy-sub-nav .nav-diy-sub-nav-right .nav-diy-sub-nav-right-title{
    width:100%;
    margin:15px 0;
    display: flex;
    justify-content: center;
}
.nav .nav-diy-sub-nav .nav-diy-sub-nav-right .nav-diy-sub-nav-right-title img{
    width:18px;
    height: 16px;
    margin:4px 5px 0 0;
    display: block;
}
.nav .nav-diy-sub-nav .nav-diy-sub-nav-right .nav-diy-sub-nav-right-title p{
    flex-grow: 0;
    display: block;
    font-size:17px;
    color:#000;
    line-height: 20px;
}
.nav-diy-sub-nav-right-list{
    width:100%;
    display: block;
    margin-bottom: 25px;
}
.nav-diy-sub-nav-right-list .nav-diy-sub-nav-right-list-li{
    float: left;
    display: inline-block;
    margin:10px 20px;
}
.nav-diy-sub-nav-right-list .nav-diy-sub-nav-right-list-li h2 a{
    font-size:17px;
    color:#000;
    line-height: 24px;
    padding:6px 0  !important;
    display: block;
    font-weight: normal;
}
.nav-diy-sub-nav-right-list .nav-diy-sub-nav-right-list-li h3 a{
    font-size:14px;
    color:#0483f5;
    line-height: 20px;
    padding:5px 0 !important;
    display: block;
    font-weight: normal;
}
.nav-diy-sub-nav-right-list dl dd:hover{
    background: unset !important;
}
.nav-diy-sub-nav-right-list dl dd:hover a{
    color:#0483f5 !important;
}
#nav-diy-sub-nav-main{
    width:600px !important;
    padding:10px 0 25px;
    display: block;
}
.nav-diy-sub-nav-list{
    width:160px;
    padding:0 20px;
    float: left;
    display: inline-block;
}
.nav-diy-sub-nav-list a{
    color:#0483f5 !important;
    font-size:12px !important;
    line-height: 20px;
    padding:5px 0 !important;
}
.nav-diy-sub-nav-list a b{
    font-size:17px;
    color:#000;
    line-height: 20px;
    font-weight: normal;
}


.footer{
    width:100%;
    padding:15px 0 15px;
    background: #274d8e;
    background: -moz-linear-gradient(top,  #097de6 0%, #1341a0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#097de6), color-stop(100%,#1341a0));
    background: -webkit-linear-gradient(top,  #097de6 0%,#1341a0 100%);
    background: -o-linear-gradient(top,  #097de6 0%,#1341a0 100%);
    background: -ms-linear-gradient(top,  #097de6 0%,#1341a0 100%);
    background: linear-gradient(to bottom,  #097de6 0%,#1341a0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#097de6', endColorstr='#1341a0',GradientType=0 );
}
.footer .main{display: flex;justify-content: space-between;}
.footer-contact{flex-grow: 1;display: block;text-align: center;}
.footer-contact p{font-size:14px;color:#fff;display: block;line-height: 24px;}
.footer-contact a{color:#fff;display: inline-block;}
.footer .wechat{flex-grow: 0;display: block;}
.footer .wechat ul{display: flex;justify-content: center;margin-right:165px;}
.footer .wechat li{width:113px;flex-grow:0;display: block;margin-left:30px;font-size:14px;line-height: 24px;color:#fff;text-align: center;}

@media screen and (max-width: 750px) {
    .footer{padding:20px 0;}
    .footer .main{display: block;}
    .footer-contact{margin-left:20px;}
    .footer .wechat ul{width:100%;margin-right: 0;margin-top:25px;}
    .footer .wechat li{width:46%;max-width: 113px;margin:0 2%;}
    .nav{display: none;}
}


/*  右侧浮窗   */
.popup{
    width:60px;
    padding:4px;
    border:1px solid #50a0e6;
    position: fixed;
    top:50%;
    right:10px;
    transform: translateY(-50%);
    z-index:10;
    border-radius: 10px;
    display:none;
}
.popup-main{
    background: #2c95f4;
    border-radius: 10px;
}
.popup .popup-title{
    width:60px;
    height:45px ;
    padding-top:5px;
}
.popup .popup-title img{
    width: 100%;
    display: block;
}
.popup ul{
    padding-bottom: 5px;
}
.popup li{
    width:60px;
    margin: 0 auto 0;
    padding:2px 0;
    display: block;
}
.popup li a {
    width:100%;
    display: block;
}
.popup li a .popup-img{
    width:75%;
    height: 75%;
    border-radius: 50%;
    margin:0 auto;
    display: block;
}
.popup li a .popup-img img{
    width: 100%;
    object-fit: contain;
    display: block;
}
.popup li a p{
    width: 100%;
    text-align: center;
    font-size:9px;
    line-height: 20px;
    color:#fff;
    display: block;
    text-shadow: rgba(0,0,0,0.35) 1px 1px 1px;
}
.popup li hr{
    width:40px;
    height: 1px;
    border:none;
    margin:0 auto;
    background:#83c1f9;
}
@media screen and (max-width: 750px) {
    .popup{display: none;}
}