@charset "utf-8"; a { display: block; } .banner { position: relative; overflow: hidden; } .banner img { display: block; width: 100%; height: 100vh; object-fit: cover; } .banner a { display: block; position: relative; } .banner .slick { position: relative; z-index: 9; } .banner .slick-slide a { display: block; position: relative; } .motto { position: absolute; right: calc(50% - 8rem); top: 1rem; z-index: 11; } .motto img { width: 2.9rem; height: .4rem; } .banner::before { content: ''; position: absolute; left: 0; top: 0; height: 30%; width: 100%; background: linear-gradient(180deg, #005186 0%, rgba(37, 79, 106, 0) 100%); z-index: 10; } .banner .slick-dots { bottom: .48rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .banner .slick-dots li { width: auto; height: auto; margin: 0 .25rem; position: relative; } .banner .slick-dots li::after { content: ''; width: .36rem; height: .01rem; background: #ffffff; position: absolute; left: 100%; top: 60%; transform: translatey(-50%); } .banner .slick-dots li:last-child:after { content: none; } .banner .slick-dots li button { width: .6rem; height: .6rem; line-height: .6rem; font-family: candara; font-size: .24rem; font-weight: bold; line-height: normal; color: rgba(255, 255, 255, 0.8); display: block; padding: 0; margin: 0; } .banner .slick-dots li button::before { content: '0'; } .banner .slick-dots li.slick-active button { font-size: .5rem; } /*.banner .slick-slide.slick-current a img { animation: img_scale linear 8s; }*/ @keyframes img_scale { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } .banner video { width: 100%; height: 100vh; object-fit: cover; } .index { background: url(/uploads/image/images/s7-bg.png) no-repeat center bottom; background-size: 100% auto; } /* side */ .side-lk { width: 1.15rem; height: 2.3rem; background: url(/uploads/image/images/side-lk.png) no-repeat; background-size: 100% 100%; position: fixed; top: 50%; left: 0; transform: translatey(-50%); cursor: pointer; z-index: 99; transition: all 0.5s; } .side-lk h3 { width: .3rem; font-family: 'sy'; font-size: .2rem; line-height: 1.2; color: #ffffff; position: absolute; top: 50%; left: .2rem; transform: translatey(-50%); } .side.on .side-lk { opacity: 0; } .side-lt { position: fixed; top: 50%; left: 0; transform: translate(-100%, -50%); cursor: pointer; z-index: 100; background: linear-gradient(180deg, #0d42a7 0%, #2990d4 80%); padding: .25rem .15rem; border-radius: 0 .2rem .2rem .2rem; transition: all 0.5s; } .side.on .side-lt { transform: translate(.1rem, -50%); } .side-lt::before { content: ''; width: .3rem; height: .3rem; left: 0; bottom: 99.5%; position: absolute; background: url(/uploads/image/images/side-sj.png) no-repeat; background-size: 100% 100%; } .side-lt ul li a { line-height: .66rem; font-size: .18rem; color: #ffffff; border-top: .01rem dashed rgba(118, 194, 208, 0.5); text-align: center; } .side-lt ul li:first-child a { border-color: transparent; } .side-lt ul li a:hover { font-weight: 600; } /* s1 */ .s1 { padding-top: .5rem; padding-bottom: .7rem; position: relative; background: url(/uploads/image/images/s1-bg.png) no-repeat right top 100%; } .tit { text-align: center; position: relative; margin-bottom: .7rem; } .tit h3 { display: inline-block; position: relative; } .tit h3::before { content: ''; width: 1rem; height: .64rem; background: url(/uploads/image/images/titbg.png) no-repeat; background-size: 100% 100%; right: -0.4rem; bottom: -0.2rem; position: absolute; } .tit h3 b { font-size: .38rem; font-weight: bold; font-family: 'sy'; position: relative; } .tit h3 b:first-child { color: #006ab5; } .tit a { position: absolute; bottom: 0; right: 0; font-size: .16rem; color: #414141; } .tit a:hover { color: #006ab5; } .s1-banner { width: 55%; border-radius: 0 .25rem 0 0; overflow: hidden; } .s1-c { display: flex; flex-wrap: wrap; justify-content: space-between; } .s1-r { width: 42%; } .s1-banner .pic { height: 5.2rem; padding-top: 0; } .s1-banner a { position: relative; border-bottom: 1px dashed rgba(0, 106, 181, 0.3); } .s1-banner .pic::after { content: ''; position: absolute; left: 0; bottom: 0; height: 30%; width: 100%; background: linear-gradient(180deg, rgba(50, 50, 50, 0) 0%, #292929 100%); } .s1-tx { padding-bottom: .2rem; } .s1-tx h3 { font-size: .2rem; font-weight: bold; line-height: .42rem; color: #222222; margin-top: .15rem; margin-bottom: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-tx p { font-size: .16rem; line-height: .28rem; height: .56rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #666666; } .s1-banner .slick-dots { bottom: 1.7rem; right: .2rem; text-align: right; } .s1-banner .slick-dots li { width: .1rem; height: .1rem; background-color: rgba(216, 216, 216, 1); border-radius: .99rem; transition: all 0.5s; } .s1-banner .slick-dots li.slick-active { background-color: #ffffff; width: .6rem; } .s1-time { position: absolute; left: 0; top: 0; background: url(/uploads/image/images/s1-datebg.png) no-repeat; background-size: 100% 100%; padding: .17rem .18rem .23rem .12rem; text-align: center; box-shadow: 0px .1rem .1rem 0px rgba(0, 106, 181, 0.2); } .s1-time b { display: block; font-family: calisto mt; font-size: .34rem; color: #006ab5 } .s1-time span { display: block; font-size: .16rem; color: #666666; } .s1-txt h3 { font-size: .18rem; font-weight: 500; color: #2e2e2e; margin-bottom: .12rem; padding-left: .2rem; background: url(/uploads/image/images/s1-dots.png) no-repeat left center; background-size: .09rem; } .s1-txt h3:hover { color: #005186; } .s1-txt span { display: flex; flex-wrap: wrap; align-items: center; font-size: .16rem; line-height: .22rem; color: #bbbbbb; padding-left: .2rem; display: block; } .s1-txt span img { width: .11rem; margin-right: .06rem; } .s1-p { padding-top: .15rem; border-top: 1px solid rgba(255, 255, 255, 0.9); display: none; } .s1-p p { font-size: .16rem; font-weight: normal; line-height: .28rem; height: .56rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: rgba(255, 255, 255, 0.9); } .s1-date { display: none; position: absolute; left: .33rem; top: 0; transform: translatey(-50%); border-radius: .2rem 0rem .2rem 0rem; background: #ffffff; border: 1px solid #006ab5; padding: .1rem .15rem; padding-right: .2rem; background: url(/uploads/image/images/s1-line.png) no-repeat 35% 70% #fff; background-size: .3rem; } .s1-date b { display: block; font-family: 'sy'; font-size: .32rem; line-height: .32rem; color: #006ab5; } .s1-date span { font-size: .18rem; line-height: 1; color: #006ab5; display: block; margin-left: .5rem; font-family: 'sy'; } .s1-r ul li { position: relative; padding: .143rem 0; border-bottom: 1px dashed #dfdfdf; } .s1-r ul li.on { border-radius: .3rem 0rem .3rem 0rem; background: #006ab5; box-shadow: 0rem .04rem .1rem 0rem rgba(0, 106, 181, 0.2); padding: .5rem .3rem .2rem .3rem; border: none; } .s1-r ul li.on .s1-txt span { display: none; } .s1-r ul li.on h3 { color: #ffffff; padding: 0; } .s1-r ul li.on .s1-p { display: block; } .s1-r ul li.on .s1-date { display: block; } /* s2 */ .s2 { background: url(/uploads/image/images/s2-bg.png) no-repeat; background-size: 100% 100%; padding-top: 1.04rem; padding-bottom: .7rem; position: relative; } .s2-c { display: flex; flex-wrap: wrap; justify-content: space-between; } .s2-c>div { width: 31.8%; } .s2 .tit { text-align: left; } .s2 .tit h3 b { color: #ffffff !important; } .s2 .tit a { color: #ffffff; } .s2-lt ul { background: #ffffff; padding: .25rem; } .s2-lt ul li a { display: flex; flex-wrap: wrap; align-items: center; padding: .15rem 0; border-bottom: 1px dashed rgba(0, 106, 181, 0.3); } .s2-lt ul li a:hover .s2-date { background: #0c9b83; } .s2-lt ul li:last-child a { border: none; } .s2-tx { flex: 1; min-width: 0; } .s2-tx p { font-size: .16rem; line-height: .26rem; height: .52rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #333333; } .s2-date { text-align: center; font-family: 'sy'; border-radius: .15rem 0rem .15rem 0rem; background: #006ab5; margin-right: .25rem; padding: .12rem .15rem; } .s2-date b { font-size: .28rem; line-height: 1; display: block; color: #ffffff; margin-bottom: .1rem; } .s2-date span { font-size: .14rem; display: block; color: #ffffff; font-family: serif; } .s2-lt ul li a:hover p { color: #006ab5; font-weight: 600; } .s2 .tit a:hover { opacity: 0.7; } .s2-m .s2-lt { transform: translatey(-.15rem); position: relative; } .s2-m .s2-lt ul { position: relative; background: #0c9b83; box-shadow: 0rem .04rem .3rem 0rem rgba(0, 106, 181, 0.2); border-radius: 0 0 .5rem 0; } .s2-m .s2-lt::before { content: ''; position: absolute; right: -0.15rem; top: .15rem; width: 100%; height: 100%; background: #ffffff; box-shadow: 0rem .04rem .3rem 0rem rgba(0, 106, 181, 0.2); } .s2-m .s2-date { background: #ffffff; } .s2-m .s2-date b { color: #006ab5; } .s2-m .s2-date span { color: #006ab5; } .s2-m .s2-tx p { color: #ffffff; } .s2-m .s2-lt ul li a { border-color: #cae9ff; position: relative; } .s2-m .s2-lt ul li a::after { content: ''; width: .15rem; height: .15rem; position: absolute; right: 0; bottom: 0; transform: translatey(50%); background: url(/uploads/image/images/s2-dots.png) no-repeat center center #0c9b83; background-size: 100% 100%; } .s2-m .s2-lt ul li:last-child a::after { display: none; } .s2-m .s2-lt ul li a:hover .s2-date { background: #ffffff; } .s2-m .s2-lt ul li a:hover p { color: #ffffff; } .s2-r ul { background: #ffffff; padding: .32rem .3rem; } .s2-r ul li { margin-bottom: .21rem; } .s2-r ul li:last-child { margin-bottom: 0; } .s2-r ul li a { position: relative; border: 1px solid #a0cceb; padding: .3rem .2rem; } .s2-r ul li a p { font-size: .16rem; font-weight: 500; line-height: .3rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s2-r ul li a span { position: absolute; left: .2rem; top: 0; transform: translatey(-50%); font-size: .14rem; color: #006ab5; padding: 0 .3rem; border-radius: .1rem 0rem .1rem 0rem; background: #ddf4f9; line-height: .34rem; } .s2-r ul li a:hover p { color: #fff; } .s2-r ul li a:hover { background: #006ab5; } .s2-r ul li a:hover span { background: #0c9b83; color: #ffffff; } .s2 .tit h3::before { opacity: 0.3; } /* s3 */ .s3 { padding: .5rem 0; background: url(/uploads/image/images/s3-bg.png) no-repeat center bottom; background-size: cover; } .s3 .tit { margin-bottom: .4rem; } .s3-lt .pic { padding-top: 66.5%; } .s3-lt ul li a { padding: .3rem .25rem 0 .25rem; } .s3-lt ul li a:hover { background: #006ab5; } .s3-lt ul li a:hover .s3-date { background: rgba(227, 187, 91, 0.9); } .s3-lt ul li a:hover .s3-tx { border-color: rgba(255, 255, 255, 0.3); } .s3-lt ul li a:hover p { color: #ffffff; } .s3-lt ul li a:hover span { color: #ffffff; background: url(/uploads/image/images/s3-jth.png) no-repeat right center; background-size: .18rem; } .s3-tx p { font-size: .18rem; line-height: .3rem; height: .6rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #393939; } .s3-tx { padding-top: .3rem; padding-bottom: .2rem; border-bottom: 1px dashed #aacfe8; } .s3-date { position: absolute; bottom: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; padding: 0 .2rem; padding-left: .4rem; background: url(/uploads/image/images/s3-d.png) no-repeat left .2rem top 48% #006ab5; background-size: .11rem; line-height: .43rem; color: #ffffff; } .s3-more { padding: .15rem 0; } .s3-more span { display: block; font-size: .14rem; color: #9e9e9e; background: url(/uploads/image/images/s3-jt.png) no-repeat right center; background-size: .18rem; } .s3-lt .slick-dots li { width: .13rem; height: .13rem; border-radius: .99rem; border: 1px solid #006ab5; transition: all 0.5s; } .s3-lt .slick-dots li.slick-active { width: .45rem; background-color: #005186; } .s3-lt>ul { padding-bottom: .6rem; } /* s4 */ .s4 { background: url(/uploads/image/images/s4-bg.png) no-repeat center center; background-size: cover; padding-top: .7rem; } .s4-lt ul li a { text-align: center; position: relative; width: 2.25rem; margin: 0 auto; padding: .35rem .2rem; background: url(/uploads/image/images/s4-q.png) no-repeat center .1rem; background-size: 100%; transition: all 0.5s; } .s4-lt ul li a h3 { position: absolute; left: 50%; bottom: 0; transform: translatex(-50%); white-space: nowrap; } .s4-lt ul li a h3 b { color: #006ab5; font-size: .45rem; font-family: 'sy'; } .s4-lt ul li a h3 span { color: #006ab5; font-size: .18rem; font-family: 'sy'; } .s4-lt ul li a .icobox { width: 1.76rem; height: 1.76rem; margin: 0 auto; background: linear-gradient(0deg, #ffffff 0%, #006ab5 100%); border-radius: 50%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; } .s4-lt ul li a .icobox img { max-height: .45rem; transition: all 0.5s; } .s4-lt ul li a .icobox p { font-size: .22rem; line-height: .6rem; color: #006ab5; font-family: 'sy'; width: 100%; text-align: center; } .s4-lt ul li.slick-current a { margin-top: 2.08rem; } .s4-lt ul li.slick-current li a { margin-top: .8rem; } .s4-lt ul li.slick-current li li a { margin-top: 0; } .s4-lt ul li.slick-current li li li a { margin-top: .8rem; } .s4-lt ul li.slick-current li li li li a { margin-top: 2.08rem; } .s4-tit .tit {} .s4-tit .tit h3 b { color: #ffffff; } .s4-tit .tit h3::before { opacity: 0.3; } .s4-tit { width: 8.5rem; height: 4.35rem; margin: 0 auto; background: url(/uploads/image/images/s4-titbg.png) no-repeat; background-size: 100% 100%; padding-top: 2.1rem; } .s4-lt ul li a:hover .ico>img { transform: rotatey(180deg); } .s4-lt>ul { height: 4.54rem; background: url(/uploads/image/images/s4-line.png) no-repeat center bottom .6rem; background-size: 100%; } .s4-line { width: 3.1rem; height: .18rem; background: url(/uploads/image/images/s4-titline.png) no-repeat; background-size: 100% 100%; margin: 0 auto; } .s4-tit .tit h3::after { content: ''; width: .84rem; height: .62rem; background: url(/uploads/image/images/s4-tit.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; transform: translate(-90%, -50%); } /* s5 */ .s5 { padding: .6rem 0; background: url(/uploads/image/images/s5-bg.png) no-repeat left bottom; } .s5-lt ul li a p { font-size: .2rem; font-weight: 500; color: #000000; text-align: center; margin-top: .28rem; opacity: 0; } .s5-lt ul li.slick-current a p { opacity: 1; } .s5-lt .pic { padding-top: 62%; } .s5-lt ul li a { margin: .5rem 0; z-index: 1; transition: all 0.5s; } .s5-lt ul li.slick-current a { transform: scale(1.3); position: relative; z-index: 99; } .s5-lt ul li a .pic { clip-path: polygon(0% 0%, 100% 5%, 100% 95%, 0% 100%); transition: all 0.5s; } .s5-lt ul li a .pic::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 30, 94, 0.35); } .s5-lt ul li.slick-current a .pic::after { background: transparent; } .s5-lt ul li.slick-current a .pic { clip-path: none; } .s5-lt ul li.slick-current li a .pic { clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 95%); } .s5-lt .slick-dots li { width: .16rem; height: .16rem; border-radius: 50%; background: #d8d8d8; margin: 0 .3rem; } .s5-lt .slick-dots li.slick-active { background: #006ab5; } .s5-lt>ul { padding-bottom: .6rem; } .s5-lt>ul .slick-prev, .s5-lt>ul .slick-next { width: .4rem; height: .4rem; z-index: 9; } .s5-lt>ul .slick-prev { top: 40%; left: .2rem; background: url(/uploads/image/images/imgview16_19prev.png) no-repeat center; background-size: 100% 100%; } .s5-lt>ul .slick-next { top: 40%; right: .2rem; background: url(/uploads/image/images/imgview16_19next.png) no-repeat center; background-size: 100% 100%; } /* s6 */ .s6 { padding-top: .5rem; padding-bottom: .9rem; background: url(/uploads/image/images/s6-bg.png) no-repeat; background-size: 100%; position: relative; } .s6 .tit a { color: #ffffff; } .s6 .tit a:hover { opacity: 0.7; } .s6-c { padding: 0 .3rem; position: relative; margin-left: .46rem; } .s6-c::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 90.2%; background: #ffffff; } .s6-c::after { content: ''; position: absolute; left: 0; bottom: 0; transform: translatex(-100%); border-top: .86rem solid #b3e0ff; border-right: .23rem solid #b3e0ff; border-bottom: .86rem solid transparent; border-left: .23rem solid transparent; } .s6-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; position: relative; } .s6-c a { position: relative; } .s6-c a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; } .s6-vd a::before { content: ''; width: .78rem; height: .78rem; background: url(/uploads/image/images/s6-play.png) no-repeat; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .s6-vd { position: relative; } .s6-vd::after { content: ''; position: absolute; left: 100%; top: 0; border-top: .4rem solid transparent; border-right: .22rem solid transparent; border-bottom: .4rem solid #b3e0ff; border-left: .22rem solid #b3e0ff; } .s6-p a p { position: absolute; left: 0; bottom: .14rem; width: 100%; color: #ffffff; font-size: .18rem; padding: 0 .15rem; z-index: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s6-p a p img { width: .4rem; margin-right: .05rem; vertical-align: -0.12rem; } .s6-vd { width: 51%; } .s6-vd .pic { height: 4.76rem; padding-top: 0; } .s6-top .s6-p { width: 22%; } .s6-top .s6-p .pic { height: 3.71rem; padding-top: 0; } .s6 .tit h3 b { color: #ffffff; } .s6-bot { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: .3rem; position: relative; } .s6-bot>div { width: 32%; } .s6-bot>div .pic { height: 2.95rem; padding-top: 0; } .s6::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2.84rem; background: url(/uploads/image/images/s6-bg2.png) no-repeat; background-size: 100%; } /* s7 */ .s7 { padding-bottom: .74rem; position: relative; } .s7-c { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .s7-lt { flex: 1; min-width: 0; } .s7-tit { width: .4rem; margin-right: .75rem; } .s7-tit .tit h3 { line-height: 1.2; } .s7-lt .pic { padding-top: 145%; } .s7-lt ul li a { position: relative; margin: 0 .14rem; margin-top: .5rem; transition: all 0.5s; } .s7-lt ul li:nth-child(odd) a { margin-top: 0; } .s7-lt .slick-arrow { box-shadow: 0 0 .1rem 0 rgba(0, 0, 0, 0.2); } .s7-lt .slick-prev { width: .6rem; height: .6rem; background: url(/uploads/image/images/s7-l.png) no-repeat; background-size: 100% 100%; } .s7-lt .slick-prev:hover { background: url(/uploads/image/images/s7-lh.png) no-repeat; background-size: 100% 100%; } .s7-lt .slick-next { width: .6rem; height: .6rem; background: url(/uploads/image/images/s7-r.png) no-repeat; background-size: 100% 100%; } .s7-lt .slick-next:hover { background: url(/uploads/image/images/s7-rh.png) no-repeat; background-size: 100% 100%; } .s7-lt>ul { padding: 0 .8rem; } @media screen and (max-width:1600px) { .banner video, .banner img { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .banner a { padding-top: 50%; } } @media screen and (max-width:1200px) { .s1-c>div { width: 100%; } .s1-banner .pic { height: auto; padding-top: 56%; } .s2-c>div { width: 100%; } .s2-m { margin: .3rem 0; } .s2-m .s2-lt { transform: none; } .tit { margin-bottom: .3rem; } .s1 { padding: .5rem 0; } .s2 { background-color: #006ab5; background-size: 0; padding: .5rem 0; } .s1-banner { margin-bottom: .5rem; } .s4-lt ul li a { margin-top: 0 !important; } .s4-lt>ul { background-size: 0; height: auto; margin-bottom: .3rem; } .s4 { padding-top: .3rem; } .s6-vd { width: 100%; margin-bottom: .3rem; } .s6-vd .pic { padding-top: 56%; height: auto; } .s6-top .s6-p { width: 48.5%; } .s6-top .s6-p .pic { height: auto; padding-top: 122%; } .s6-c::after { display: none; } .s6-c { margin: 0; } .s6-vd::after { display: none; } .s6-bot>div .pic { padding-top: 64%; height: auto; } .s6 { padding: .5rem 0; } .s7 { padding-bottom: .5rem; } } @media screen and (max-width:1024px) { .s4-tit { width: 6rem; height: 3rem; padding-top: 1.5rem; } .s4 .tit { margin-bottom: .2rem; } .tit h3 b { font-size: .3rem; } } @media screen and (max-width:900px) {} @media screen and (max-width:768px) { .s4-tit { width: 4rem; height: 2rem; padding-top: .8rem; } .s6-bot>div { width: 100%; margin-bottom: .3rem; } } @media screen and (max-width:480px) { .s4-lt ul li a .icobox { width: 1.4rem; height: 1.4rem; } .s4-lt ul li a { width: 1.9rem; } .s4-lt ul li a h3 b { font-size: .3rem; } .s7-lt ul li a { margin: 0 .1rem; } .s7-lt>ul { padding: 0 .4rem; } .s7-lt .slick-prev, .s7-lt .slick-next { width: .3rem; height: .3rem; } .s7-tit { margin-right: .3rem; } }