.wrapbanner{overflow: hidden;position: relative;z-index: 1;} .banner{position: relative;z-index: 5;} .banner a{display: block;position: relative;} .banner a::before{content: '';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,.8);z-index: 2;opacity: 1;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;} .banner .slick-current a::before{opacity: 0;} .banner .img{padding-bottom: calc(700% / 19.2);position: relative;} .banner .img::before{content: '';display: block;position: absolute;left: 0;right: 0;top: 0;padding-bottom: 14%;background:rgba(0, 71, 158,1);background: -webkit-linear-gradient(top, rgba(0, 71, 158,1) , rgba(0, 71, 158,0));background: -o-linear-gradient(bottom, rgba(0, 71, 158,1), rgba(0, 71, 158,0));background: -moz-linear-gradient(bottom, rgba(0, 71, 158,1), rgba(0, 71, 158,0));background: linear-gradient(to bottom, rgba(0, 71, 158,1) , rgba(0, 71, 158,0));opacity: 1;z-index: 2;} .banner .title{color: #fff;bottom: 26px;position: absolute;text-shadow: 0 1px 1px rgb(0,0,0), 0 0 16px rgba(0,0,0,.7);overflow: visible;font-family: 'chtitle';padding: 22px 0 0;} .banner .title::before{content: '';display: block;position: absolute;left: 0;top: 0;background: #cfa972;width: 88px;height: 2px} .banner .slick-dots{display: none;} /* .banner .slick-list{overflow: visible;} .wrapbanner .slick-dots{bottom: auto;width: auto;left: 100px;right: auto;top: 50%;transform: translateY(-50%);z-index: 10;} .wrapbanner .slick-dots li{width: 8px;height: 8px;margin: 30px auto;background: rgba(255, 255, 255, .3);display: block;border-radius: 50%;position: relative;} .wrapbanner .slick-dots li.slick-active{background: #fff;border: 4px solid #fff;} .wrapbanner .slick-dots li button{background: none;left: 50%;top: 50%;transform:translateX(-50%) translateY(-50%);position: absolute;width: 12px;height: 12px;} .wrapbanner .slick-dots li.slick-active button{border: 2px solid #ae0d13;} */ /* .banner .slick_menu{} */ .banner .slick-arrow{border: 2px solid rgba(255, 255, 255, .12);width: 56px;height: 56px;font-size: 0;background: center center no-repeat;position: absolute;border-radius: 50%;} .banner .slick-arrow::before{content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 50%;z-index: 2;background: center no-repeat;opacity: 1;} .banner .slick-arrow:after{background: #00479d;opacity: 1;} .banner .prev{left: -100px;} .banner .next{right: -100px;} .banner .prev::before{background-image: url(../images/banner_prev.png);} .banner .next::before{background-image: url(../images/banner_next.png);} .banner .slick-arrow:hover::before{opacity: 1;} .banner:hover .prev{left: 20px;} .banner:hover .next{right: 20px;} .index_title{margin-bottom: 28px;display: block;} .index_title::after{content: '';display: block;clear: both;} .index_title .channel_link{float: right;position: relative;z-index: 2;line-height: 28px;padding: 0 18px;border-radius: 50px;margin: 24px 0 0;background: #fff;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;box-shadow: 0 10px 20px rgba(12, 44, 83, .1);color: #004fa1;height: 28px;} .index_title .channel_title{padding: 0 0 0 0;color: #333;float: left;position: relative;line-height: 42px;font-family: 'chtitle';} /* .index_title .channel_title::before{content: '';display: block;position: absolute;left: 10px;height: 11px;width: 100%;bottom: 0;background: #fff;z-index: -1;} */ .index_title .channel_link:hover{background: #0655a7;color: #fff;} .index_title .en_title{font-family: 'entitle';color: #004fa1;margin: 0 0 6px;text-transform: uppercase;} .mode03 .index_title .channel_title,.mode03 .index_title .en_title{color: #fff;} .wrap_mode01{padding: 56px 0 57px;background: url(../images/mode01_bg.png) top center no-repeat;} .mode01{} .mode01 .lf{width: calc(60% - 40px);float: left;} .mode01 .rt{width: 40%;float: right;} .index_01a{padding: 0 0 40px;position: relative;} .index_01a .bottom{position: absolute;left: 0;right: 32px;bottom: 0;padding: 24px 46px 12px 20px;z-index: 2;/* background: #fff;box-shadow: 0 10px 20px rgba(0,79,161,.15) ; */} .index_01a .bottom::before{content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;border-bottom: 156px solid #fff;border-right: 27px solid transparent;filter: drop-shadow(0 10px 20px rgba(0,79,161,.15));z-index: -1;} .index_01a .title{margin: 0 0 10px;} .index_01a .time{color: #004fa1;margin: 0 0 0;padding: 0 0 0 22px;background: url(../images/mode01_time.png) left center no-repeat;} .index_01a .info{margin: 0 0 7px;color: #666;} .index_01b{} .index_01b ul{margin: 0 0 -20px;padding: 0 0 0;} .index_01b li{} .index_01b .item{margin: 0 0 20px;position: relative;} .index_01b .img_box{width: 47.5%;float: left;} .index_01b .info_box{margin: 0 0 0 0;position: absolute;left: 44.2%;top: 50%;transform: translateY(-50%);right: 0;background: #fff;padding: 12px 20px;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;} .index_01b .title{margin: 0 0 0;} .index_01b .time{color: #004fa1;margin: 2px 0 0;padding: 0 0 0 22px;background: url(../images/mode01_time.png) left center no-repeat;} .index_01b .item:hover .info_box{box-shadow: 0 10px 20px rgba(0,79,161,.15);} .wrap_mode02{padding: 0 0 59px;} .mode02{} .index_02{} .index_02 ul{margin: 0 0 0 0;} .index_02 li{} .index_02 .item{margin: 0 0 0;position: relative;padding: 25px 30px;line-height: 29px;} .index_02 .item::after{content: '';display: block;position: absolute;bottom: 0;left: 30px;right: 30px;border-top: 1px dashed #dcdcdc;} .index_02 .title{margin: 0 0 0 160px;} .index_02 .time{float: left;padding: 0 0 0 22px;background: url(../images/mode01_time.png) left center no-repeat;color: #004fa1;position: relative;} .index_02 .time::before{content: '';display: block;width: 1px;position: absolute;top: 50%;transform: translateY(-50%);left: 130px;height: 18px;background: #dcdcdc;} .index_02 .item::before{content: '';display: block;position: absolute;top: 0;bottom: 0;left: 50%;transform: translateX(-50%);background: url(../images/mode02_bg.png) right bottom no-repeat #00479d;width: 0;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;z-index: -1;} .index_02 .item:hover:before{width: 100%;} .index_02 .item:hover .title{color: #fff;} .index_02 .item:hover .time{color: #fff;background: url(../images/mode02_time.png) left center no-repeat;} .index_02 .item:hover::after{opacity: 0;} .wrap_mode03{padding: 37px 0 60px;background: url(../images/mode03_bg.png) top center no-repeat #f2f5f7;overflow: hidden;} .mode03{overflow: hidden;} .index_03{} .index_03 ul{margin: 0 0 0 -40px;padding: 0 0 0;} .index_03 li{width: 25%;} .index_03 .item{margin: 0 0 0 40px;position: relative;top: 0;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;} .index_03 li:nth-child(2n) .item{margin-top: 40px;} .index_03 .bottom{padding: 14px 20px 24px;margin: -20px 15px 0;background: #fff;position: relative;z-index: 2;} .index_03 .title{margin: 0 0 10px;} .index_03 .time{color: #004fa1;margin: 0 0 9px;padding: 0 0 0 22px;background: url(../images/mode01_time.png) left center no-repeat;} .index_03 .info{margin: 0 0 0;color: #666;} .wrap_mode04{padding: 183px 0 63px;background: url(../images/mode04_bg.png) bottom center no-repeat #f2f5f7;margin: -186px 0 0;} .mode04{} .index_04{} .index_04 ul{margin: 0 0 0 -20px;} .index_04 li{width: 25%;} .index_04 .item{margin: 0 0 25px 20px;background: #fff;border: 1px solid rgba(0,0,0,.06);padding: 23px 29px 35px;position: relative;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;overflow: hidden;} .index_04 .item::before{content: '';display: block;position: absolute;border-left: 170px solid #f3f6f9;border-right: 170px solid #f3f6f9;position: absolute;left: 50%;transform: translateX(-50%);bottom: 0;border-bottom: 0px solid #f3f6f9;border-top: 0px solid #fff;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;} .index_04 .info_box{border-top: 1px solid rgba(0,0,0,.06);margin: 14px 0 0;padding: 15px 0 0;} .index_04 .ico{display: inline-block;vertical-align: middle;width: 32px;height: 32px;background: rgba(0,0,0,.04) center no-repeat;border-radius: 50%;margin: 0 8px 0 0;} .index_04 .ico1{background-image: url(../images/mode04_ico1.png);} .index_04 .ico2{background-image: url(../images/mode04_ico2.png);} .index_04 .ico3{background-image: url(../images/mode04_ico3.png);} .index_04 .info{margin: 0 0 6px;color: #666;} .wrap_mode05{padding: 57px 0 60px;} .mode05{} .index_05{} .index_05 ul{margin: 0 0 -30px -40px;} .index_05 li{width: 25%;} .index_05 .item{margin: 0 0 30px 40px;padding: 10px 0 0;position: relative;border-bottom: 1px solid #e5e5e5;} .index_05 .item::before{content: '';display: block;position: absolute;left: 0;width: 0;bottom: -1px;background: #cfa972;height: 1px;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;} .index_05 .time{position: absolute;left: 10px;top: 0;background: url(../images/mode02_time.png) 15px center no-repeat #00479d;color: #fff;padding: 0 15px 0 36px;} .index_05 .title{margin: 14px 0 15px;} .index_05 .item:hover::before{width: 100%;} .wrap_mode06{padding: 57px 0 60px;background: #eff1f3;} .mode06{} .mode06 .lf{width: calc(50% - 30px);float: left;} .mode06 .rt{width: calc(50% - 30px);float: right;} .index_06a{} .index_06a ul{margin: -17px 0 -13px;} .index_06a li{} .index_06a .item{margin: 0 0 13px;border-bottom: 1px solid #d7d8da;padding: 12px 0 10px 14px;position: relative;} .index_06a .item::before{content: '';display: block;background: #cfa972;width: 4px;height: 4px;position: absolute;left: 0;top: 23px;} .index_06a .time{color: #004fa1;margin: 12px 0 0;padding: 0 0 0 22px;background: url(../images/mode01_time.png) left center no-repeat;} .index_06b{} .index_06b ul{margin: 0 0 -20px -40px;} .index_06b li{width: 50%;} .index_06b .item{margin: 0 0 20px 40px;position: relative;text-align: center;height: 74px;z-index: 2;} .index_06b .item::after{content: '';display: block;position: absolute;top: 50%;transform: translateY(-50%);width: 1px;height: 16px;background: #00479d;right: 20px;z-index: 2;} .index_06b .item::before{content: '';display: block;border-top: 74px solid #fff;border-left: 24px solid transparent;position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 2;} .index_06b li:nth-child(2n) .item::before{border-left-color: #fff;border-right: 24px solid transparent;} .index_06b li:nth-child(2n) .item::after{right: auto;left: 20px;} .index_06b .title{margin: 0 0 0;position: absolute;left: 50%;top: 50%;transform:translateX(-50%) translateY(-50%);width: calc(100% - 60px);text-align: center;z-index: 2;max-height: 56px;} /* .index_07a .slick-slider .slick-track{transition: all ease-in-out 0.3s;-ms-transition: all ease-in-out 0.3s;-moz-transition: all ease-in-out 0.3s;-webkit-transition: all ease-in-out 0.3s;-o-transition: all ease-in-out 0.3s;} */ .index_07a{width: 512px;height: 540px;margin: 5px 0 0 -24px;float: left;position: relative;z-index: 1;} .index_07a .slick-list{overflow: visible;} .index_07a .slick-slide{width: 464px;margin-top: 280px;transition: all ease-in-out 0.3s;-ms-transition: all ease-in-out 0.3s;-moz-transition: all ease-in-out 0.3s;-webkit-transition: all ease-in-out 0.3s;-o-transition: all ease-in-out 0.3s;transition-delay: 0s !important;} .index_07a .slick-slider a{display: block;position: relative;padding: 0 24px 20px;} .index_07a .img{padding-bottom: calc(500% / 8.88);} .index_07a .slick-slide.slick-active{width: 936px !important;margin-top: 0;} .index_07b{margin: 78px 100px 0 882px;position: relative;z-index: 2;} .index_07b::before{content: '';display: block;height: 1px;position: absolute;bottom: -28px;left: -154px;width: 320px;background: #e0ac1b;} .index_07b .slick-slide a{display: block;padding: 0 0 0 46px;position: relative;} .index_07b .title{white-space: normal;margin: 0 0 18px;color: #fff;text-align: justify;line-height: 34px;height: 68px;} .index_07b .title span{padding: 0 0 0 18px;font-size: 0.666em;} .index_07b .info{white-space: normal;line-height: 30px;color: #333;height: 90px;} .index_07b .slick-slide.slick-active a{-webkit-animation-name: bottom_fade_in ;animation-name: bottom_fade_in ;animation-duration: 0.5s;-webkit-animation-duration: 0.5s;} @keyframes bottom_fade_in{ from { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; bottom: -10px; } to { -webkit-transform: perspective(400px); transform: perspective(400px); opacity: 1; bottom: 0; } } .index_07a .arrow_box{position: absolute;left: 124px;bottom: 0;} .index_07a .slick-arrow{border: 0;width: 60px;height: 60px;font-size: 0;outline: none;position: relative;transform: none;top: auto;margin: 0 10px 0 0;display: inline-block;*display: inline;border-radius: 8px;*zoom:1;} .index_07a .slick-arrow:after{display: none;} .index_07a .slick-next{right: 0px;background: url(../images/mode07_next1.png) center center no-repeat #fff;} .index_07a .slick-prev{left: 0px;background: url(../images/mode07_prev1.png) center center no-repeat #fff;} .index_07a .slick-next:hover{background: url(../images/mode07_next2.png) center center no-repeat #0655a7;} .index_07a .slick-prev:hover{background: url(../images/mode07_prev2.png) center center no-repeat #0655a7;} @media screen and (min-width:1040px){ .index_03 .item:hover{top: -50px;} .index_04 .item:hover{border: 1px solid transparent;border-bottom: 2px solid #cfa972;padding-bottom: 62px;box-shadow: 0 20px 50px 7.5px rgba(16, 56, 95, .1);margin-bottom: -100px;} .index_04 .item:hover::before{border-bottom: 16px solid #f3f6f9;border-top: 32px solid #fff;} } @media screen and (max-width:1480px){ .index_title{margin-bottom: 20px;} .wrap_mode01,.wrap_mode05,.wrap_mode06{padding: 40px 0;} .wrap_mode02{padding-bottom: 40px;} .wrap_mode04{padding: 153px 0 40px;margin: -156px 0 0;} .index_02 .item{padding: 12px 20px;} .index_02 .item::after{left: 20px;right: 20px;} .index_04 .item{padding: 18px 22px 30px;} .index_07a{width: 340px;height: 360px;} .index_07a .slick-slide{margin-top: 180px;} .index_07a .slick-slide.slick-active{width: 624px !important;} .index_07b{margin: 78px 0 0 620px;} .index_07b .slick-slide a{padding: 0;} } @media screen and (max-width:1280px){ .banner .slick-dots{left: 12px;} .banner .slick_menu{display: none;} .banner .prev{margin-right: 60px;} .banner .next{margin-right: 0;} .banner .slick-arrow{width: 40px;height: 40px;bottom: 20px;} .banner .title{font-size: 24px;left: 30px;right: 30px;bottom: 20px;} } @media screen and (max-width:992px){ .side_nav,.side_btn2{display: none !important;} .banner .slick-dots{} .banner .slick-arrow{display: none !important;} .banner .img::after{display: none;} .banner .slick-dots{bottom: 4px;} .banner .slick-dots li,.banner .slick-dots li.slick-active, .banner .slick-dots li:hover{width: 4px;height: 4px;margin: 6px auto;} .wrapbanner .slick-dots li button{width: 8px;height: 8px;} /* .banner .slick-dots li.slick-active::after, .banner .slick-dots li:hover::after{width: 5px;height: 5px;} */ .index_title{margin-bottom: 12px;} .mode01 .lf,.mode06 .lf{width: auto;float: none;margin: 0 0 30px;} .mode01 .rt,.mode06 .rt{width: auto;float: none;} .index_02 .item{padding: 8px 10px;} .index_02 .item::after{left: 10px;right: 10px;} .index_02 .title{margin-left: 130px;} .index_02 .time::before{left: 110px;} .index_03 li,.index_04 li,.index_05 li{width: 50%;} .index_05 .title{margin: 6px 0 10px;} .index_07a{width: 230px;height: 240px;} .index_07a .slick-slide{margin-top: 120px;} .index_07a .slick-slide.slick-active{width: 416px !important;} .index_07b{margin: 30px 0 0 400px;} .index_07b::before{bottom: -10px;} .index_07a .arrow_box{left: 40px;} .index_07a .slick-arrow{width: 40px;height: 40px;} } @media screen and (max-width:767px){ .banner .title,.banner .more,.banner a::before{display: none;} .banner .slick-dots{/* left: 20px; */} .index_title .channel_link{line-height: 28px;padding: 0 16px;margin-top: 10px;} .index_title .channel_title{line-height: 1.2em;} .wrap_mode01,.wrap_mode05,.wrap_mode06{padding: 24px 0;} .wrap_mode02{padding-bottom: 24px;} .wrap_mode03{background-size: cover;padding-bottom: 0;} .wrap_mode04{padding: 50px 0 30px;margin: -18px 0 0;} .index_01a{padding: 0;} .index_01a .bottom{position: relative;right: 0;margin-top: -50px;} .index_01b .info_box{padding: 6px 10px;} .index_03 li, .index_04 li, .index_05 li{width: 100%;} .index_03 .item ,.index_03 li:nth-child(2n) .item{margin-top: 0;margin-bottom: 20px;} .index_04 .item{padding: 12px 16px 16px;} .index_04 .title{height: auto; -webkit-line-clamp: initial;} .index_04 .info_box{padding: 10px 0 0;margin: 10px 0 0;} .index_04 ul{margin-bottom: -25px;} .index_06a .item{margin-bottom: 0;} .index_06a .time{margin: 2px 0 0;} .index_06b ul{margin: 0 0 -10px -20px;} .index_06b .item{margin: 0 0 10px 20px;} .index_07a{width: 230px;height: 350px;} .index_07a .slick-slide{margin-top: 120px;opacity: 0;} .index_07a .slick-slide.slick-active{width: 400px !important;opacity: 1;} .index_07b{position: absolute;top: 280px;margin:0px;left: 0;right: 0;} .index_07b::before{display: none;} } @media screen and (max-width:639px){ } @media screen and (max-width:479px){ } @media screen and (max-width:413px){ .index_01b .img_box{width: auto;float: none;} .index_01b .info_box{position: relative;left: 0;transform: none;} .index_01b .title{height: auto;-webkit-line-clamp: initial;} .index_02 .time{float: none;} .index_02 .title{margin-left: 0;} .index_07a{width: 230px;height: 290px;} .index_07a .slick-slide{margin-top: 10px;opacity: 0;} .index_07a .slick-slide.slick-active{width: 280px !important;opacity: 1;} .index_07b{position: absolute;top: 220px;margin:0px;left: 0;right: 0;} } @media screen and (max-width:320px){ }