﻿.container { width: 1140px; margin: 0 auto; position: relative;}
.main { width: 1145px; overflow: hidden; position: relative;}
.background{ background: #003970; width: 500px; height:1000px; margin: 0 auto; position: absolute; top: 20px; left: 50%;}

.main-top-left { float: left; width: 627px; position: relative; z-index: 3;} 

/* å›¾ç‰‡æ–°é—» */
.slider-pic { height: 304px; background: url(../images/2021yl_index_bg1.png) no-repeat; overflow: hidden; padding: 18px 20px 0 0; position: relative;}
.slider-pic .hd { height: 10px; overflow: hidden; position: absolute; right: 30px; bottom: 15px; z-index: 1; }
.slider-pic .hd li { float: left; width: 10px; height: 10px; border-radius: 100%; background: #fff; opacity: .5; margin: 0 5px; cursor: pointer; }
.slider-pic .hd li.on { opacity: 1;} 
.slider-pic .bd { position: relative; height: 304px; z-index: 0; } 
.slider-pic .bd li { zoom: 1; vertical-align: middle; } 
.slider-pic .bd li a { display: block; width: 100%; height: 100%; position: relative; } 
.slider-pic .bd li p { position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background: rgba(0, 0, 0, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cf000000, endColorstr=#cf000000); font-size: 16px; line-height: 40px; color: #fff; cursor: pointer; text-indent: 20px; } 
.slider-pic .bd li a:hover p { color: #0f51aa; } 
.slider-pic .bd img { display: block; width: 607px; height: 304px;}


/* æ”¿åºœæ–‡ä»¶ */
.zfwj { height: 304px; background: url(../images/2021yl_index_bg1.png) no-repeat; overflow: hidden; padding: 18px 20px 0 0; margin-top: -6px;}
.zfwj-box { background: #1994ec; height: 100%; padding: 0 20px; overflow: hidden;}
.zfwj-search { background: #1b6dc0; margin-top: 14px; overflow: hidden;}
.zfwj-search h3 { float: left; width: 96px; line-height: 40px; font-size: 16px; color: #fff; text-align: center; font-weight: normal;}
.zfwj-search .search-txt { float: left; border: none; border-left: 1px solid #fff; width: 400px; height: 16px; line-height: 20px; background: none; line-height: 38px; color: #fff; outline: none; cursor: text; padding: 0 15px; margin-top: 12px;}
.zfwj-search .search-txt::placeholder { color: #4a82cd;}
.zfwj-search .search-btn { float: right; border: none; width: 40px; height: 40px; background: url(../images/2021yl_index_search.png) no-repeat center center; outline: none; cursor: pointer;}


.main-top-right { float: right; width: 518px; position: relative; left: -5px; z-index: 3;}

/* äº‘é¾™è¦é—» */
.ylyw{  height: 304px; background: url(../images/2021yl_index_bg3.png) no-repeat; overflow: hidden; padding: 18px 20px 0 0; position: relative;}
.ylyw-box { height: 100%; background: #3069d5; padding: 0 20px;}
.ylyw-box .list { padding-top: 15px;}

/* æ”¿åºœä¿¡æ¯å…¬å¼€ */
.xxgk {float: left;width: 239px;height: 304px;background: url(../images/2021yl_index_bg4.png) no-repeat;overflow: hidden;padding: 18px 20px 0 0;margin-top: -6px;}
.xxgk-box {background: #ffa400;height: 100%;padding: 0 20px;}
.xxgk .title { border-bottom: 1px solid #ffbf4d;}
.xxgk-list { padding-top: 20px;}
.xxgk-list li {line-height: 25px;margin-bottom: 6px;}
.xxgk-list li a { display: block; background: url(../images/2021yl_xxgk_icon1.png) no-repeat left top; text-indent: 30px; color: #fff; font-size: 16px;}
.xxgk-list li .xxgk02 { background-position-y: -30px;}
.xxgk-list li .xxgk03 { background-position-y: -60px;}
.xxgk-list li .xxgk04 { background-position-y: -90px;}
.xxgk-list li .xxgk05 { background-position-y: -120px;}
.xxgk-list li .xxgk06 { background-position-y: -150px;}

/* äº‘é¾™å‘å±• */
.ylfz { float: right; width: 244px; height: 304px; background: url(../images/2021yl_index_bg5.png) no-repeat; overflow: hidden; padding: 18px 20px 0 0; margin-top: -6px; margin-left: -5px;}
.ylfz-box {background: #00bde5;height: 100%;position: relative;overflow: hidden;}
.ylfz-box .hd { height: 10px; overflow: hidden; position: absolute; right: 20px; bottom: 20px; z-index: 1; }
.ylfz-box .hd li { float: left; width: 10px; height: 10px;  background: #000; opacity: .5; margin: 0 3px; cursor: pointer; }
.ylfz-box .hd li.on { background: #fff; opacity: 1;} 
.ylfz-box .bd { position: relative; width: 224px; height: 284px; z-index: 0; margin: 10px auto 0;} 
.ylfz-box .bd li { zoom: 1; vertical-align: middle; } 
.ylfz-box .bd img { display: block; width: 224px; height: 284px;}

.main-bottom-left { float: left; width: 881px; margin-top: -6px; position: relative; z-index: 2;}

/* æ”¿åŠ¡æœåŠ¡ */
.zwfw { height: 117px; background: url(../images/2021yl_index_bg6.png) no-repeat; padding: 18px 20px 0 0; position: relative; z-index: 1;}
.zwfw-box {background: url(../images/2021yl_zwfw_bg.png) no-repeat;height: 100%;overflow: hidden;}
.zwfw-tit { float: left; background: url(../images/2021yl_zwfw_tit.png) no-repeat right center; font-size: 24px; color: #fff; line-height: 117px; padding: 0 25px;}
.zwfw-list { float: left; padding-left: 20px;}
.zwfw-list li {float: left;width: 99px;text-align: center;margin-left: 10px;}
.zwfw-list li a {display: block;background: no-repeat center top;line-height: 1;padding-top: 56px;color: #fff;white-space: nowrap;/* overflow: hidden; *//* text-overflow: ellipsis; */margin-top: 30px;}
.zwfw-list li .zwfw01 { background-image: url(../images/2021yl_zwfw_icon01.png);}
.zwfw-list li .zwfw02 { background-image: url(../images/2021yl_zwfw_icon02.png);}
.zwfw-list li .zwfw03 { background-image: url(../images/2021yl_zwfw_icon03.png);}
.zwfw-list li .zwfw04 { background-image: url(../images/2021yl_zwfw_icon04.png);}
.zwfw-list li .zwfw05 { background-image: url(../images/2021yl_zwfw_icon05.png);}
.zwfw-right {float: right;margin: 9px 20px 0 0;}
.zwfw-right li { margin-bottom: 5px;}
.zwfw-right li a { display: block; border: 1px solid #1b6dc0; border-radius: 5px; width: 123px; height: 28px; line-height: 28px; text-align: center; color: #1b6dc0;}
.zwfw-right li a:hover { color: #fff; border-color: #fff;}

/* é—®å·è°ƒæŸ¥ */
.wjdc { float: left; width: 607px; height: 180px; background: url(../images/2021yl_index_bg7.png) no-repeat; padding: 18px 20px 0 0; margin-top: -6px;}
.wjdc-box {background: #7a5ae3;padding: 0 20px;height: 100%;}
.wjdc .title { border-bottom: 1px solid #a28ceb;}
.letter-list .status{ right: 150px; color: #fff; font-size: 16px;}
.letter-list li { padding-right: 250px;}

/* æˆ‘è¦å†™ä¿¡ */
.wyxx { float: right; width: 239px; height: 180px; background: url(../images/2021yl_index_bg8.png) no-repeat; padding: 18px 20px 0 0; margin-top: -6px; margin-left: -5px;}
.wyxx-box {background: #00b27e;padding: 0 20px;height: 100%;}
.wyxx-left { float: left; padding-top: 15px;}
.wyxx-left .wyxx-tit { display: block; width: 75px; background: url(../images/2021yl_wyxx_icon.png) no-repeat center top; font-size: 16px; line-height: 18px; color: #fff; font-weight: bold; text-align: center; padding-top: 70px;}
.wyxx-left .wyxx-btn {display: block;width: 75px;height: 35px;background: #057f5b;line-height: 35px;text-align: center;color: #fff;border-radius: 5px;margin-top: 10px;}
.wyxx-menu { float: right; padding-top: 20px;}
.wyxx-menu li { margin-bottom: 10px;}
.wyxx-menu li a { display: block; border: 1px solid #fff; width: 100px; height: 25px; text-align: center; color: #fff; line-height: 25px; border-radius: 5px;}


.main-bottom-right { float: right; width: 264px; position: relative; left: -5px; z-index: 2;}

/* ä¸“é¢˜ä¸“æ  */
.ztzl { height: 308px; background: url(../images/2021yl_index_bg9.png) no-repeat; padding: 18px 20px 0 0; margin-top: -6px;}
.ztzl-box { background: #2299ef; height: 100%; overflow: hidden;}
.ztzl-box .hd { height: 10px; overflow: hidden; position: absolute; right: 30px; bottom: 10px; z-index: 1; }
.ztzl-box .hd li { float: left; width: 10px; height: 10px;  background: #000; opacity: .5; margin: 0 3px; cursor: pointer; }
.ztzl-box .hd li.on { background: #fff; opacity: 1;} 
.ztzl-box .bd { position: relative; width: 244px; height: 308px; z-index: 0;} 
.ztzl-box .bd li { zoom: 1; vertical-align: middle; } 
.ztzl-box .bd img { display: block; width: 244px; height: 308px;}


/* ç»¼åˆç®¡ç† */
.zhgl {float: left;width: 1120px;height: 56px;background: url(../images/2021yl_index_bg11.png) no-repeat;padding: 18px 20px 0 0;margin-top: -6px;position: relative;z-index: 2;}
.zhgl-box { background: #00bde5; padding: 10px 20px; overflow: hidden;}
.zhgl-box a {position: relative;float: left;color: #fff;line-height: 35px;font-size: 16px;padding: 0 3px 0 13px;margin: 0 5px;}
.zhgl-box a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; background: #fff; margin-top: -8px;}
.zhgl-box a:first-child::before  { display: none;}

/* å‹æƒ…é“¾æŽ¥ */
.yqlj { float: left; width: 1120px; height: 56px; background: url(../images/2021yl_index_bg10.png) no-repeat; padding: 18px 20px 0 0; margin-top: -6px; position: relative; z-index: 1;}
.yqlj-box { background: #376cd1; padding: 10px 20px; overflow: hidden;}
.yqlj-box a { float: left; width: 255px; height: 35px; line-height: 35px; background: #528af6; text-align: center; color: #fff; font-size: 16px; margin-left: 20px;}
.yqlj-box a:first-child { margin-left: 0;}


@media screen and (max-width: 1139px) {
    .background,.ylfz,.ztzl { display: none;}
    .container { padding: 0 5px; width: auto;}
    .main,.main-top-left,.main-top-right,.main-bottom-left,.main-bottom-right,.zhgl,.wjdc,.yqlj,.xxgk,.ylfz,.wyxx { width:100%;}
    .slider-pic,.zfwj,.ylyw,.xxgk,.ylfz,.zwfw,.wjdc,.ztzl,.yqlj,.zhgl,.wyxx {background-image: none;padding: 5px 0 0;height: auto;}
    .zwfw-box { background-size: cover;}
    .main-top-right,.main-bottom-right { position: static;}
    .zfwj,.xxgk,.ylfz,.main-bottom-left,.wjdc,.wyxx,.zhgl,.yqlj { margin-top: 0;}

    .slider-pic,.slider-pic .bd { height: auto;}
    .slider-pic .bd img { width: 100%; height: auto;}

    .zfwj-search .search-txt { width: calc(100% - 96px - 40px); box-sizing: border-box;}
    
    .title { height: auto; overflow: hidden;}
    .title ul { width: 100%;}
    .title ul li { height: 50px; text-align: center; margin-left: 0;}
    .title ul li.on { height: 49px;}
    
    .zfwj-box,.ylyw-box,.xxgk-box,.wjdc-box { padding: 0 10px 10px;}
    .zfwj-box .title ul li { width: 20%;}
    .ylyw-box .title ul li { width: calc(100% / 3);}

    .ylfz-box,.ztzl-box,.zwfw-box,.wyxx-box { padding: 10px;}
    .ylfz-box .bd,.ztzl-box .bd { margin: 0;}
    .ylfz-box .bd,.ylfz-box .bd img,.ztzl-box .bd,.ztzl-box .bd img { width: 100%; height: auto;}

    .zhgl-box { padding: 10px;}
    .zhgl-box a { width: calc(100% / 6); margin: 0; padding-left: 0; padding-right: 0; text-align: center;}
    .zhgl-box a:nth-child(7)::before { display: none;}

    .yqlj-box { padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-between}
    .yqlj-box a { width: calc(100% / 4 - 8px); margin: 0;}

    .wjdc-box .title ul li{ width: 50%;}
    .letter-list li { padding-right: 100px;}

    .zwfw-box,.wyxx-box { overflow: hidden;}
    .zwfw-tit { line-height: 1; margin-top: 20px;}
    .zwfw-list { padding: 0; width: 100%;}
    .zwfw-list li { width: 20%; margin: 0; padding: 0 5px; box-sizing: border-box;}
    .zwfw-list li a { white-space: normal;}
    .zwfw-right { width: 100%; margin: 20px 0 0;}
    .zwfw-right li { float: left; width: calc(100% / 3 - 7px); margin-left: 10px;}
    .zwfw-right li:first-child { margin-left: 0;}
    .zwfw-right li a { width: 100%; height: 100%; box-sizing: border-box;}

    .wyxx-menu { float: none; margin-left: 100px;}
    .wyxx-menu li a { width: 100%; box-sizing: border-box; height: 28px; line-height: 28px;}
}

@media screen and (max-width: 480px) {
    .zfwj-box .title ul li { width: calc(100% / 3);}

    .zhgl-box a { width: calc(100% / 3)}
    .zhgl-box a:nth-child(4)::before,.zhgl-box a:nth-child(10)::before { display: none;}

    .yqlj-box a { width: calc(100% / 2 - 5px); margin: 10px 0 0;}
    .yqlj-box a:nth-child(1),.yqlj-box a:nth-child(2) { margin-top: 0;}
    .yqlj-box a:nth-child(2),.yqlj-box a:nth-child(4) { float: right;}
}