@charset "UTF-8";
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:16px "Microsoft YaHei","Arial Narrow"; margin: 0 auto; background: #fff; -webkit-text-size-adjust:100%; color: #333}
a{color:#333; text-decoration:none; transition: color .34s}
a:hover{color:#305798;}
em, strong, i {font-weight: normal; font-style:normal}
li{list-style:none}
h4,h5 { font-weight: normal;}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
input, select, button, textarea {outline: none; font-family: "Microsoft YaHei UI Light"; border: none;}
button,input[type="submit"], input[type="button"] {cursor: pointer;}
.f-l { float: left;}
.f-r { float: right;}
*::-webkit-scrollbar {width: 6px; height: 6px;}
*::-webkit-scrollbar-thumb { border-radius: 6px; background: #305798;}
*::-webkit-scrollbar-track { border-radius: 6px; background: #fff;}
.clear {clear: both;}
:root {
    --box-width: 1260px;
    --header-height: 134px;
}

/*--------------*/
.national-banner {width: 100%; height: 500px; background: url("./images/ershida9.png") no-repeat center / cover;}
.national-banner p {width: 1260px; margin: 0 auto; display: flex; justify-content: space-between}
.blue-logo {background: url('../../../image/logo-white.png') no-repeat left center / auto; width: 240px; height: 55px;}
.national-banner a {color: #fff; height: 50px; line-height: 50px; padding: 0 10px;}
.ydyl-top-news {background: #fff; padding: 30px; width: 1260px; margin: 0 auto; box-sizing: border-box;}
.ydyl-top-news h2 {text-align: center; font-size: 35px; color: #305798}
.ydyl-top-news h3 { font-size: 35px; color: #305798}
.ydyl-top-news p {line-height: 40px; margin-top: 10px;}
.nm-ztlh-box {background: url("./images/home-bg.jpg") no-repeat 0 0 / 100% 100%; padding: 30px 0;}
.nm-ztlh {height: 780px; box-sizing: border-box; padding: 60px 0; }


.nm-ztlh-con {background: #fff; --r-width: 720px; width: var(--box-width); margin: 30px auto 0; height: 480px; display: flex; justify-content: space-between;}
.nm-ztlh-right {width: var(--r-width); height: 480px; overflow: hidden; position: relative;}
.nm-ztlh-right li a {position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box;}
.nm-ztlh-right li img {display: block; width: 100%; height: 100%; transition: transform .2s; position: relative; z-index: 2}
.nm-ztlh-right li h4 {height: 60px; background: rgba(0,0,0,0.3); color: #fff; font-size: 16px; line-height: 60px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; padding-right: 130px; padding-left: 10px; position: absolute; left: 0; width: 100%; bottom: 0; z-index: 2}
.nm-ztlh-left {width: calc(100% - var(--r-width) - 30px); height: 480px; padding-right: 12px; position: relative}
.nm-zt-dot {position: absolute; right: 0; width: 130px!important; height: 60px; display: flex; align-items: center; justify-content: center; bottom: 0!important; left: unset!important; z-index: 2}
.nm-zt-dot span {width: 10px; height: 10px; border-radius: 50%; background: #5ec4df; margin: 0 3px;}
.nm-zt-dot span.curr {background: #f4cc15}
.nm-ztlh-left li {height: 56px; border-bottom: 1px solid #ddd; margin-bottom: 6px; display: flex; justify-content: flex-start; align-items: center;}
.nm-ztlh-left .more {position: absolute; right: 20px; bottom: 14px;}

.ydyl-live{ background: linear-gradient(to bottom, #037cd7 70%, #32c0d4); padding: 60px 0; box-sizing: border-box;}
.nm-ztlh-left li a { width: 100%; max-height: 48px; font-size: 18px; overflow: hidden; box-sizing: border-box; line-height: 24px;}
.ydyl-title-box {display: block; background: url("./images/title-bg.png") no-repeat center 0 / auto 100%; width: var(--box-width); margin: 0 auto 30px; height: 118px;}
.ydyl-ft-box {width: 1500px; margin: 60px auto 0; position: relative;}
.ydyl-ft-con {height: 468px; overflow: hidden; padding-top: 40px; position: relative}
.ydyl-ft-box li {display: flex; justify-content: center; }
.ydyl-ft-box li a {display: flex; flex-direction: column; width: 270px; height: 468px; border: 0px solid #fff; border-radius: 20px; transition: all 300ms; overflow: hidden;}
.ydyl-ft-box li.swiper-slide-active { transform: translateY(-38px)}
.ydyl-ft-box li.swiper-slide-active a {border-width: 10px;}
.ydyl-ft-box li img {width: 100%; height: 400px}
.ydyl-ft-box li h3 {line-height: 24px; font-size: 18px; padding: 10px; color: #fff; font-weight: normal; height: 48px; display: flex; align-items: center; background: linear-gradient(to right, #0e69b1, #009d9d)}
.ydyl-ft-dot span {position: absolute; top: 220px; left: -25px; width: 50px; height: 50px; z-index: 10; transition: all 300ms; cursor: pointer; background: linear-gradient(to right, #fff, #fff); border-radius: 50%; display: flex; align-items: center; justify-content: center}
.ydyl-ft-dot span:after {content: '\e606'; font-family: iconfont; color: #009d9d; transition: all 300ms; font-size: 18px; font-weight: bold}
.ydyl-ft-dot span.ydyl-ft-next {right: -25px; left: unset; transform: rotate(180deg);}
.ydyl-ft-dot span:hover {background: linear-gradient(to right, #0e69b1, #009d9d);}
.ydyl-ft-dot span:hover:after {color: #fff}
.ydyl-four-pagination {height: 10px !important; width: 200px !important; margin: 0 auto; border-radius: 10px; overflow: hidden; position: absolute; left: calc(50% - 100px)!important; top: unset !important; bottom: 0}
.ydyl-four-pagination .swiper-pagination-progressbar-fill {background: #fff!important}

.ydyl-jdpl {background: linear-gradient(to bottom, #e7f2ff, #4cbaf1) top no-repeat;; padding: 60px 0;}
.ydyl-four-con {width: 1500px; overflow: hidden; margin: 0 auto; padding-bottom: 40px; position: relative}
.ydyl-jdpl li {background: #fff; width: 380px;}
.ydyl-jdpl li img { width: 100%; height: 200px;}
.ydyl-jdpl li a { display: block; width: 100%;}
.ydyl-jdpl .pl-con {background: linear-gradient(45deg, rgb(14,105,177), rgb(111,177,72)); padding: 20px;}
.ydyl-jdpl li h3 {line-height: 26px; height: 52px; margin-bottom: 16px; overflow: hidden; transition: all 300ms; color: #fff}
.ydyl-jdpl li p {line-height: 26px; height: 104px; margin-bottom: 20px; overflow: hidden; color: #fff; transition: all 300ms;}
.ydyl-jdpl li span {height: 36px; display: flex; justify-content: space-between; line-height: 36px;}
.ydyl-jdpl li i {color: #d6d6d6; font-size: 15px; transition: all 300ms;}
.ydyl-jdpl li em {color: #fff; font-size: 15px; border-radius: 36px; padding: 0 20px; transition: all 300ms;}
.ydyl-jdpl li:hover h3, .ydyl-jdpl li:hover p, .ydyl-jdpl li:hover i {color: #fff}


.ydyl-xxgc {padding: 60px 0; box-sizing: border-box;}
.ydyl-video-recommend {width: var(--box-width); height: 367px; margin: 30px auto; position: relative}
.vr-left {position: absolute; left: 0; top: 20px; z-index: 5; background: url("./images/video_summer.png") no-repeat center / 100%; padding: 40px 40px 80px; box-sizing: border-box; width: 583px; height: 367px;}
.vr-left h3 {font-size: 20px; height: 72px; line-height: 24px; color: #fff; overflow: hidden;}
.vr-left p {font-size: 18px; color: #fff; height: 96px; line-height: 24px; overflow: hidden;}
.vr-left a {border: 1px solid #fff; display: block; margin: 20px auto 0; line-height: 34px; width: 90px; text-align: center; color: #fff}
.vr-right {position: absolute; right: 0; cursor: pointer; width: 700px; height: 367px;}
.vr-right img {display: block; width: 100%; height: 100%;}
.vr-right:after {content: '\e634'; font-family: iconfont; color: #fff; position: absolute; left: 40px; bottom: 30px; font-size: 66px;}
.ydyl-xxgc ul {width: var(--box-width); margin: 30px auto 0; display: flex; gap: 20px; justify-content: space-between; align-items: center;}
.ydyl-xxgc li {background: #fff; flex: 1;}
.ydyl-xxgc li img {width: 100%; height: 160px;}
.ydyl-xxgc li a { display: block; position: relative}
.ydyl-xxgc li a:after {content: '\e634'; font-family: iconfont; color: #fff; position: absolute; left: 12px; bottom: 88px; font-size: 36px;}
.ydyl-xxgc li h3 { line-height: 28px; height: 56px; font-weight: normal; padding: 10px; font-size: 18px;}

.ydyl-mtsj {background: url("./images/ljl_bg.jpg") no-repeat center / 100% auto; padding: 30px 0;}
.ydyl-mtsj ul {justify-content: space-between; display: flex; width: var(--box-width); --liw: 252px; margin: 30px auto 0;}
.ydyl-mtsj li { width: var(--liw); height: 504px; position: relative; transition: all 300ms;}
.ydyl-mtsj li a {display: flex; flex-direction: column; height: 504px; line-height: 44px; font-size: 16px; color: #333; position: relative; overflow: hidden}
.ydyl-mtsj li h3 {width: var(--liw); font-size: 18px; display: flex; color: #fff; transition: all 300ms; opacity: 1; font-weight: normal; background: linear-gradient(135deg, rgba(185,188,50,1) 0%, rgba(50,167,189,1) 26%, rgba(0,87,171,1) 100%); justify-content: center; align-items: center; line-height: 24px; height: var(--liw); overflow: hidden; padding: 50px; box-sizing: border-box;}
.ydyl-mtsj li h4 {width: 504px; position: absolute; left: 0; font-size: 18px; bottom: 0; height: 68px; color: #fff; transform: translateY(100%); line-height: 24px; padding: 10px; box-sizing: border-box; background: linear-gradient(135deg, rgba(185,188,50,0.6) 0%, rgba(50,167,189,0.6) 26%, rgba(0,87,171,0.6) 100%);}
.ydyl-mtsj li:nth-child(odd) a {flex-direction: column-reverse}
.ydyl-mtsj li img {width: 100%; height: var(--liw); transition: all 300ms;}
.ydyl-mtsj li.curr {width: calc(100% - 3 * var(--liw));}
.ydyl-mtsj li.curr h3 {opacity: 0; display: none;}
.ydyl-mtsj li.curr h4 { transform: translateY(0%);}
.ydyl-mtsj li.curr img {width: 100%; height: 100%;}

.nm-jdpl {background: linear-gradient( 0deg, #fff, #4cbaf1) top no-repeat;; padding: 60px 0;}
.nm-jdpl ul {width: var(--box-width); margin: 40px auto 0; display: flex; flex-wrap: wrap;}
.nm-jdpl li {background: #fff; width: 380px; margin-right: 24px; margin-bottom: 24px; transition: all 300ms;}
.nm-jdpl li a {padding: 15px; box-sizing: border-box; display: block}
.nm-jdpl li:nth-child(3n + 3) { margin-right: 0;}
.nm-jdpl li h3 {line-height: 26px; height: 52px; margin-bottom: 16px; overflow: hidden; color: #333; transition: all 300ms;}
.nm-jdpl li p {line-height: 26px; height: 104px; margin-bottom: 20px; overflow: hidden; color: #666; transition: all 300ms;}
.nm-jdpl li:nth-child(n + 4) h3 {font-weight: normal}
.nm-jdpl li:nth-child(n + 4) p {display: none}
.nm-jdpl li span {height: 36px; display: flex; justify-content: space-between; line-height: 36px;}
.nm-jdpl li i {color: #999; font-size: 15px; transition: all 300ms;}
.nm-jdpl li em {background: #0e69b1; color: #fff; font-size: 15px; border-radius: 36px; padding: 0 20px; transition: all 300ms;}
.nm-jdpl li:hover {background: #3293bc}
.nm-jdpl li:hover h3, .nm-jdpl li:hover p, .nm-jdpl li:hover i {color: #fff}
.nm-jdpl li:hover em {background: #fff; color: #0e69b1}

.nm-lhft {padding: 30px 0; box-sizing: border-box;}
.nm-ft-box {width: var(--box-width); margin: 0 auto;}
.nm-ft-box ul {overflow: hidden; display: flex;}
.nm-ft-box ul li {width: 282px; margin-right: 24px; background: #fff}
.nm-ft-box ul li:last-child {margin-right: 0}
.nm-ft-box li a {display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 30px 10px 10px; border: 2px solid #fff; transition: all 0.3s;}
.nm-ft-box li img {display: block; width: 200px; height: 200px; border-radius: 50%; margin: 0 auto}
.nm-ft-box li h3 {height: 56px; line-height: 28px; color: #0e69b1; font-size: 18px; text-align: center; margin: 10px 0; overflow: hidden;}
.nm-ft-box li p {height: 72px; line-height: 24px; font-size: 14px; margin-top: 15px; color: #999; overflow: hidden}
.nm-ft-box li:hover a {border-color: #0e69b1;}

footer {margin-top: 0;}
@media screen and (min-width: 2000px) {
    .national-banner {height: 660px;}
}