.main { background: url(../images/main.png) no-repeat center bottom; background-size: 100% 100%; } .section1 { padding-top: 70px; overflow: hidden; } .sect1-l { float: left; width: 42%; } .sect1-l a { position: relative; display: block; height: 467px; } .sect1-l a img { display: block; width: 100%; height: 100%; } .sect1-l a p { position: absolute; left: 0; right: 0; bottom: 0; line-height: 44px; padding-left: 10px; padding-right: 100px; font-size: 18px; color: #fff; background-color: rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1-l .slick-dots { width: auto; bottom: 17px; right: 10px; } .sect1-l .slick-dots li { width: 8px; height: 8px; border-radius: 50%; background-color: #fff; } .sect1-l .slick-dots li.slick-active { background-color: #ff0006; } .sect1-r { float: right; width: 54%; } .title { padding-bottom: 18px; border-bottom: 1px solid #c7cbd1; } .title h2 { float: left; } .title h2 span { position: relative; display: inline-block; font-size: 24px; color: #0f3366; font-weight: normal; margin-right: 30px; cursor: pointer; } .title h2 span:after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background-color: #0f3366; bottom: -20px; display: none; } .title h2 span.on { font-weight: bold; } .title h2 span.on:after { display: block; } .title .more { float: right; } .title .more a { width: 65px; height: 24px; line-height: 24px; text-align: center; font-size: 14px; color: #fff; background-color: #8fa2c1; display: none; } .title .more>a:first-child { display: block; } .title .more>a.on { display: block; } .sect1r-text>ul { display: none; } .sect1r-text>ul:first-child { display: block; } .sect1r-text>ul>li { position: relative; padding-left: 25px; padding-right: 100px; line-height: 18px; background: url(../images/list.png) no-repeat left center; margin-top: 33px; } .sect1r-text>ul>li:first-child { margin-top: 30px; } .sect1r-text>ul>li:hover a { color: #cc1a1a; } .sect1r-text>ul>li:hover span { color: #cc1a1a; } .sect1r-text>ul>li>a { display: block; font-size: 18px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect1r-text>ul>li span { position: absolute; right: 0; top: 0; font-size: 14px; color: #0f3366; } .section2 { padding-top: 65px; } .section2>ul { overflow: hidden; } .section2>ul>li { float: left; width: 31%; margin-left: 3.5%; } .section2>ul>li:first-child { margin-left: 0; } .section2>ul>li ul li { padding-left: 0; background-image: none; margin-top: 39px; } .section3 { padding-top: 60px; overflow: hidden; padding-bottom: 75px; } .sect3-l { float: left; width: 65%; } .sect3-r { float: right; width: 31%; } .accordion { padding-top: 30px; } .squee { display: none; } .accordion>ul>li { position: relative; float: left; width: 9%; height: 346px; transition: all .3s; } .accordion>ul>li.on { width: 55%; } .accordion>ul>li:before { content: ''; position: absolute; top: 30px; left: -14px; width: 28px; height: 28px; border-radius: 50%; background: url(../images/jt.png) no-repeat center center; } .accordion>ul>li.child1:before { background-color: #677fa1; } .accordion>ul>li.child2:before { background-color: #0f3366; } .accordion>ul>li.child3:before { background-color: #254675; } .accordion>ul>li.child4:before { background-color: #254675; } .accordion>ul>li.child5:before { background-color: #254675; } .accordion>ul>li.child6:before { background-color: #254675; } .accordion>ul>li::before { display: none; } .accordion>ul>li.on+li::before { display: block; } .accordion>ul>li.on .accod-text { display: none; } .accordion>ul>li.on .acc0d-pic { display: block; } .child1 { background-color: #677fa1; } .child2 { background-color: #0f3366; } .child3 { background-color: #254675; } .child4 { background-color: #3b5984; } .child5 { background-color: #516b92; } .child6 { background-color: #677fa1; } .accod-text { position: relative; padding-top: 30px; padding-right: 15px; height: 100%; box-sizing: border-box; } .child1 .accod-text { background-color: #677fa1; } .child2 .accod-text { background-color: #0f3366; } .child3 .accod-text { background-color: #254675; } .child4 .accod-text { background-color: #3b5984; } .child5 .accod-text { background-color: #516b92; } .child6 .accod-text { background-color: #677fa1; } .accod-text>p { float: right; width: 20px; font-size: 16px; color: #fff; writing-mode: vertical-lr; writing-mode: tb-lr; } .acc0d-pic { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: none; } .child1 .acc0d-pic { background: url(../images/plot.jpg) no-repeat center center; background-size: 100% 100%; } .child2 .acc0d-pic { background: url(../images/plot.jpg) no-repeat center center; background-size: 100% 100%; } .child3 .acc0d-pic { background: url(../images/plot.jpg) no-repeat center center; background-size: 100% 100%; } .child4 .acc0d-pic { background: url(../images/plot.jpg) no-repeat center center; background-size: 100% 100%; } .child5 .acc0d-pic { background: url(../images/plot.jpg) no-repeat center center; background-size: 100% 100%; } .child6 .acc0d-pic { background: url(../images/plot.jpg) no-repeat center center; background-size: 100% 100%; } .acc0d-pic p { position: absolute; bottom: 0; left: 0; right: 0; line-height: 40px; font-size: 16px; color: #fff; font-size: 16px; font-weight: bold; padding-left: 10px; display: none; } .child1 .acc0d-pic p { background-color: rgba(15, 51, 102, .8); } .child2 .acc0d-pic p { background-color: rgba(15, 51, 102, .8); } .child3 .acc0d-pic p { background-color: rgba(37, 70, 117, .8); } .child4 .acc0d-pic p { background-color: rgba(59, 89, 132, .8); } .child5 .acc0d-pic p { background-color: rgba(81, 107, 146, .8); } .child6 .acc0d-pic p { background-color: rgba(103, 127, 146, .8); } .accordion>ul>li.on .acc0d-pic p { display: block; } .sect3-r>ul>li { position: relative; line-height: 61px; padding-right: 90px; border-bottom: 1px dashed #cccfd6; } .sect3-r>ul>li:first-child { padding-top: 5px; } .sect3-r>ul>li>a { display: block; font-size: 18px; color: #292929; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sect3-r>ul>li>span { position: absolute; right: 0; top: 0; font-size: 14px; color: #0f3366; } .vedio { float: left; width: 66%; padding-top: 35px; overflow: hidden; padding-bottom: 60px; } .vedio ul { margin-left: -14px; margin-right: -14px; } .vedio ul li { margin: 0 14px; } .vedio ul li a { display: block; } .pic4 { position: relative; } .box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 35px; height: 35px; border-radius: 50%; background: rgba(16, 56, 112, .7) url(../images/play.png) no-repeat 13px center; } .vedio ul li a:hover .box { background: rgba(157, 7, 12, .7) url(../images/play.png) no-repeat 13px center; } .pic4 img { display: block; width: 100%; height: 275px; } .text4>h2 { font-size: 16px; color: #292929; font-weight: normal; padding-top: 30px; } .text4 p { padding-left: 20px; border-left: 1px solid #0d4589; } .text4 span { display: block; padding-left: 25px; background: url(../images/art-icon.png) no-repeat left center; line-height: 18px; font-size: 14px; color: #0f3366; margin-top: 15px; } .text4 i { display: block; padding-left: 25px; background: url(../images/time.png) no-repeat left center; line-height: 18px; font-size: 14px; color: #0f3366; margin-top: 15px; } .text4:hover h2 { font-weight: bold; color: #cc1a1a; } .text4:hover span { background-image: url(../images/art-other.png); color: #cc1a1a; } .text4:hover p { border-left: 1px solid #cc1a1a; } .text4:hover i { background-image: url(../images/time-other.png); color: #cc1a1a; } @media screen and (max-width: 1400px) { .main { padding-left: 10px; padding-right: 10px; } .sect1r-text>ul>li { margin-top: 17px; } .sect1r-text>ul>li>a { font-size: 16px; } .sect1r-text>ul>li:first-child { margin-top: 20px; } } @media screen and (max-width: 1024px) { .main-list3 li{ width: 30%;} .vedio{ width:100%; float: none;} .lk{ width: 100% !important; float: none !important;} .wg{ margin-top:0px !important; width: 100% !important; float: none !important;} .sect1-l a{ height: 313px;} .section1 { padding-top: 15px; } .sect1-l a img{ height: 100%;} .sect1r-text>ul>li { line-height: 32px; margin-top: 6px; background-size: 6px auto; padding-left: 10px; } .sect1r-text>ul>li:first-child { margin-top: 12px; } .sect1r-text>ul>li span { font-size: 12px; } .sect1-l a p { font-size: 14px; } .section2 { padding-top: 20px } .section2>ul>li { float: none; width: auto; margin-left: 0; margin-top: 10px; } .section2>ul>li ul li { margin-top: 20px; } .section3 { padding-top: 20px; padding-bottom: 20px; } .sect3-l { float: none; width: auto; } .sect3-r { margin-top: 20px; float: none; width: auto; } } @media screen and (max-width:768px) { .pic4 img { display: block; width: 100%; height: auto; } .sect1-l { float: none; width: auto; } .sect1-r { float: none; width: auto; margin-top: 20px; } .sect1r-text>ul>li { line-height: 28px; } .title h2 span { font-size: 20px; } .accordion { display: none; } .squee { display: block; } .squee a { position: relative; display: block; overflow: hidden; height: 275px; } .squee a img { display: block; width: 100%; } .squee a p { position: absolute; left: 0; right: 0; bottom: 0; line-height: 40px; font-size: 16px; color: #fff; font-size: 16px; font-weight: bold; padding-left: 10px; background-color: rgba(15, 51, 102, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vedio { padding-bottom: 25px; } } @media screen and (max-width:414px) { .section2>ul>li ul li { margin-top: 10px; } .squee a p { font-size: 14px; } .sect3-r>ul>li { line-height: 40px; } .sect3-r>ul>li>a { font-size: 16px; } .vedio { padding-top: 15px; } .text4>h2 { padding-top: 10px; } .text4 p { padding-left: 10px; margin-top: 10px; } .text4 span { margin-top: 0; } .text4 i { margin-top: 0; } } /*2021.12.7*/ .foot-r>ul img{width: 123px;} .lk{ float: left; width: 66%;} .wg{float:right; margin-top: -49px; width: 31%;} .zn{min-height: 69px;} .wb{ margin-top: 50px;} .wb p{ font-size: 16px; color: #333333; line-height: 47px;} .nmr { margin-right: 0px !important;} .main-list3 li a { font-size: 21px; color: #ffffff; font-weight: bold; display: block; padding-top: 89px;} .main-list3 li { float: left; text-align: center; width: 194px; height: 177px; display: block; margin-right: 15px; } .main-list3 { margin-top: 31px; margin-bottom: 20px;} .clearfix { zoom: 1;} @media screen and (max-width: 1200px){ .main-list3{height: 103px;} .main-list3 li { width: 43.33333%;} } @media screen and (max-width: 1083px){ .main-list3{height: 103px;} .main-list3 li { width: 46.33333%; margin-left: 0px !important} .main-list3 .q1{ background-position-x: 50%; background-position-y: 50%;} .main-list3 .q2{ background-position-x: 50%; background-position-y: 50%} .main-list3 li a{font-size: 17px; color: #ffffff; font-weight: bold; display: block; padding-top: 79%;} } @media screen and (max-width: 900px){ .main-list3{ height: 130px; display: block;} .main-list3 li { width: 44%; float: left; /* height: 152px; */ margin-left: 0px !important; } .main-list3 .q1{ background-position-x: 50% !important; background-position-y: 50% !important;} .main-list3 .q2{ background-position-x: 50% !important; background-position-y: 50% !important;} .main-list3 li a{font-size: 17px; color: #ffffff; font-weight: bold; display: block; padding-top: 30%;} } @media screen and (max-width: 600px){.main-list3 li a{ padding-top: 41%;}} @media screen and (max-width: 500px){.main-list3 li a{ padding-top: 51%;}} @media screen and (max-width: 450px){.main-list3 li a{ padding-top: 61%;}} @media screen and (max-width: 350px){.main-list3 li a{ padding-top: 71%;}}