.head_box, .welcome_banner, .welcome_box, .banner_box, .box, .foot_box { width: 100%; min-width: 1280px; } /*@media (max-width: 1280px) { .head_box, .welcome_banner, .welcome_box, .banner_box, .box, .foot_box { width: 1280px; } }*/ .head_box { padding: 0 0.6rem; left: 0; background-color: rgba(89, 153, 219, 0.3); } .headb_box { background-color: rgba(2, 72, 144, 0.6); } .banner_box { /*height: 250px; background-position: top;*/ height: 25vw; } .banner_box h5 { top: 53%; transform: none; } .banner_box h5 strong { font-size: 230%; } .box { position: relative; z-index: 8; margin-top: 250px; background-color: #fff; margin-top: 25vw; } .box .title_box { height: 50px; line-height: 50px; } .boxs { padding-top: 1.26rem; margin-top: 0; background-color: #0f649b; } .foot_box { position: relative; } .pd { padding: 0.7rem 0; } .bg-gray { background-color: #efefef; } .w1600 { max-width: 1600px; width: 80%; /*display: block;*/ margin: 0 auto; box-sizing: border-box; } .mg { margin: 1.4rem 0; } .container { width: 80%; margin: 0 auto; } .title_h5 { text-align: center; margin-bottom: 0.5rem; } .title_h5 strong { display: block; font-size: 0.45rem; font-weight: normal; margin-bottom: 0.15rem; color: #538DD5; } .title_h5 span { display: block; font-size: 0.35rem; font-weight: normal; } .title_h5 p { width: 70%; font-size: 0.18rem; line-height: 1.8; color: #666; margin: 0 auto; } .title_h6 { text-align: center; font-size: 0; margin-bottom: 0.5rem; } .title_h6 a { display: inline-block; vertical-align: top; width: 2.12rem; height: 0.44rem; background-color: #ccc; line-height: 0.44rem; border-radius: 0.22rem; font-size: 0.18rem; color: #fff; margin-right: 0.42rem; transition: all 0.5s ease; } .title_h6 a:last-of-type { margin-right: 0; } .title_h6 a.active { background-color: #c80917; color: #fff; } .more { display: block; margin: 0.35rem auto 0; width: 2.3rem; height: 0.46rem; line-height: 0.46rem; text-align: center; font-size: 0.16rem; color: #c80917; background-color: #f2f2f2; border-radius: 0.23rem; transition: all 0.5s ease; } .more:after { content: ">"; display: inline-block; vertical-align: top; margin-left: 0.12rem; font-size: 0.26rem; line-height: 0.44rem; transform: scaleX(0.5); } .more:hover { background-color: #c80917; color: #fff; } .img-box { overflow: hidden; } .img-box .img { padding-bottom: 65%; transition: .5s; } .img-box .img:hover { transform: scale(1.1); } .with-border { background-color: #fff; padding: 0.15rem; box-sizing: border-box; box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2); transition: all 0.5s ease; } .swiper-out { position: relative; } .swiper-slide.with-border { border: 1px solid rgba(0, 0, 0, 0.1); } .swiper-slide:hover .img { transform: scale(1.1); } .swiper-slide .info h1 { margin-top: 0.15rem; font-weight: bold; font-size: 0.18rem; color: #333; /*color: #031d4c;*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .swiper-slide .info p { margin-top: 0.15rem; font-size: 0.15rem; color: #666; color: #757f87; line-height: 1.6; overflow: hidden; height: 0.48rem; } .swiper-slide .info span { display: block; margin-top: 0.15rem; padding-top: 0.15rem; font-size: 0.16rem; color: #666; /*color: #5b82a1;*/ border-top: 1px solid rgba(0, 0, 0, 0.1); } .swiper-pagination { bottom: 0.3rem !important; font-size: 0; } .swiper-pagination span { vertical-align: top; width: 0.1rem; height: 0.1rem; margin: 0 0.06rem !important; /*background-color: #666666; opacity: 1;*/ transition: all 0.5s ease; } .swiper-pagination span.swiper-pagination-bullet-active { background-color: #ef3133 !important; opacity: 1; } .list_box form { display: flex; height: 0.44rem; padding: 0.2rem; border: 1px solid #e6e6e6; align-items: center; margin-bottom: 0.3rem; } .list_box form span { font-size: 0.18rem; flex-shrink: 0; width: 0.96rem; } .list_box form select { font-size: 0.16rem; height: 100%; /*width: 20%;*/ box-sizing: border-box; border: 1px solid #e6e6e6; margin-right: 0.16rem; padding-left: 0.1rem; } .list_box form input { font-size: 0.16rem; height: 100%; flex: 1; box-sizing: border-box; border: 1px solid #e6e6e6; margin-right: 0.16rem; padding-left: 0.14rem; } .list_box form button { flex-shrink: 0; width: 1.34rem; height: 100%; background-color: #c80917; color: #fff; border: none; font-size: 0.18rem; } .list_box .list { margin-top: -0.3rem; } .list_box .list .item { margin-top: 0.3rem; float: left; cursor: pointer; } .list_box .list .item:hover .img { transform: scale(1.1); } .list_box .list .item .info h1 { margin-top: 0.1rem; font-weight: bold; font-size: 0.18rem; color: #333; line-height: 1.6; overflow: hidden; } .list_box .list .item .info h1.nowrap { white-space: nowrap; text-overflow: ellipsis; } .list_box .list .item .info p { margin-top: 0.1rem; font-size: 0.15rem; color: #666; line-height: 1.6; overflow: hidden; height: 0.48rem; } .list_box .list .item .info span { display: block; margin-top: 0.1rem; padding-top: 0.16rem; font-size: 0.16rem; color: #666; border-top: 1px solid rgba(0, 0, 0, 0.1); } .list_box .list.list1 .item { display: flex; padding: 0.2rem; width: 100%; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; } .list_box .list.list1 .item .img-box { width: 15%; } .list_box .list.list1 .item .img { padding-bottom: 1.25rem; } .list_box .list.list1 .item .info { width: 85%; padding-left: 0.25rem; } .list_box .list.list1 .item .info h1 { margin: 0; font-weight: bold; font-size: 0.20rem; line-height: initial; /*color: #538DD5;*/ } .list_box .list.list1 .item .info p { margin-top: 0.15rem; } .list_box .list.list1 .item .info span { margin-top: 0.15rem; padding: 0; font-size: 0.15rem; border: 0; } .list_box .list.list2 .item { width: 49%; margin-right: 2%; } .list_box .list.list2 .item:nth-of-type(2n) { margin-right: 0; } .list_box .list.list3 .item { width: 32%; margin-right: 2%; } .list_box .list.list3 .item:nth-of-type(3n) { margin-right: 0; } .list_box .list.list4 .item { width: 23.5%; margin-right: 2%; } .list_box .list.list4 .item:nth-of-type(4n) { margin-right: 0; } .paging_div { font-size: 0; text-align: center; margin-top: 0.5rem; } .paging_div a { display: inline-block; vertical-align: top; height: 0.36rem; line-height: 0.36rem; padding: 0 0.15rem 0; background-color: #efefef; border-radius: 2px; font-size: 0.14rem; color: #999; margin: 0 0.05rem; transition: all 0.5s ease; } .paging_div a.active { background-color: #c80917 !important; color: #fff; } .paging_div span { display: inline-block; line-height: 0.36rem; font-size: 0.14rem; margin: 0 0.05rem; } .bg-gray .paging_div a { background-color: #fff; } .honor_box { display: flex; justify-content: space-between; } .honor_box .left { position: relative; width: 70%; height: 100%; padding-bottom: 0.5rem; } .honor_box .left .swiper-slide { box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.1); } .honor_box .left .swiper-slide.with-border { padding: 0.1rem; transition: none; } .honor_box .left .swiper-slide .img { padding-bottom: 70%; } .honor_box .left .swiper-button-next, .honor_box .left .swiper-button-prev { left: unset; top: unset; bottom: unset; right: unset; width: .35rem; height: .35rem; background-color: #efefef; border-radius: 50%; background-size: 30%; background-position: center; bottom: -0.5rem; bottom: 0; } .bg-gray .honor_box .left .swiper-button-next, .bg-gray .honor_box .left .swiper-button-prev { background-color: #fff; } .honor_box .left .swiper-button-next { left: 51%; } .honor_box .left .swiper-button-prev { right: 51%; } .honor_box .left .swiper-button-next:hover, .honor_box .left .swiper-button-prev:hover { background-color: #C80917; } .honor_box .right { position: relative; padding-bottom: 34%; width: 25%; height: 100%; } .honor_box .right .inner { position: absolute; height: 100%; overflow: auto; } .honor_box .right .inner::-webkit-scrollbar { width: 4px; } .honor_box .right .inner::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ACACAC; background: rgba(0, 0, 0, 0.2); } .honor_box .right .inner::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px #fff; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; opacity: 1; background: #fff; background: rgba(0, 0, 0, 0.1); } .honor_box .right p { font-size: .16rem; color: #666; padding: 0 0.2rem; position: relative; box-sizing: border-box; line-height: 0.25rem; margin-bottom: 0.15rem; } .honor_box .right p:last-of-type { margin-bottom: 0; } .honor_box .right p::before { position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; left: 0; top: 50%; transform: translate(0, -50%); background-color: #666; } .xq_box { background-color: #fff; } .xq_box .head { text-align: center; } .xq_box .head h5 { font-size: 0.3rem; line-height: 1.5; } .xq_box .head h6 { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid #e6e6e6; } .xq_box .head h6 span { font-size: 0.18rem; color: #999; padding: 0 0.2rem; } .xq_box .head h6 span:not(:last-child) { border-right: 1px solid #e6e6e6; } .xq_box .content { margin-top: 0.35rem; } .xq_box .content p { font-size: 0.16rem; line-height: 1.8; } .xq_box .content img { display: block; margin: 0.05rem auto; max-width: 100%; } /* 首页 */ .welcome_banner { /*position: relative; top: 0; left: 0; width: 100%;*/ height: 100vh; } .welcome_banner .swiper-container { height: 100%; } .welcome_banner .swiper-slide { overflow: hidden; background-color: #000; } .welcome_banner .swiper-slide video { display: block; /*width: 100%; height: auto;*/ min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .welcome_banner .swiper-slide i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.1); animation: dh0 12s infinite 1s; } @keyframes dh0 { 0% { transform: scale(1.1); } 50% { transform: scale(1); } 100% { transform: scale(1.1); } } .welcome_banner .swiper-slide i.gif { transform: scale(1); animation: none; } .welcome_banner .swiper-slide div { position: absolute; top: 50%; left: 9%; transform: translateY(-50%); color: #fff; } .welcome_banner .swiper-slide div h6 { font-size: 0.52rem; opacity: 0; transform: translateY(1rem); transition: all 0.8s; margin-bottom: 0.2rem; } .welcome_banner .swiper-slide div p { font-size: 0.52rem; margin-bottom: 0.4rem; opacity: 0; transform: translateY(1rem); transition: all 0.8s 0.2s; } .welcome_banner .swiper-slide div span { display: block; opacity: 0; transform: translateY(1rem); transition: all 0.8s 0.4s; } .welcome_banner .swiper-slide-active div h6 { opacity: 1; transform: translateY(0); text-shadow: 0 0 0.2rem rgba(0,0,0,0.2); } .welcome_banner .swiper-slide-active div p { opacity: 1; transform: translateY(0); } .welcome_banner .swiper-slide-active div span { opacity: 1; transform: translateY(0); } .welcome_banner .swiper-pagination span { background-color: #fff; opacity: 1; } .welcome_box .swiper-button-prev { left: -0.6rem; /*margin-top: -0.22rem;*/ } .welcome_box .swiper-button-next { right: -0.6rem; /*margin-top: -0.22rem;*/ } .welcome_box .swiper-button-prev, .welcome_box .swiper-button-next { width: 0.45rem; height: 0.45rem; border-radius: 0.45rem; border: 2px solid rgb(0, 122, 255); background-color: #fff; background-size: 0.15rem; background-repeat: no-repeat; background-position: center; transition: all 0.5s ease; } .welcome_box .gradient { background-image: -webkit-gradient(linear, left top, right bottom, from(#0664b3), to(#2db6f7)); background-image: -webkit-linear-gradient(top, #0664b3 0, #2db6f7 100%); background-image: -moz-linear-gradient(top, #0664b3 0, #2db6f7 100%); background-image: linear-gradient(to bottom, #0664b3 0, #2db6f7 100%); } .welcome_box .head { padding: 1.2rem 0 0.7rem; text-align: center; } .welcome_box .head .title_h5 { padding: 0.2rem 0; margin-bottom: 0; background-repeat: no-repeat; background-position: center; background-size: auto 100%; } .welcome_box .head .title_h5 strong { font-size: 0.55rem; font-weight: 700; font-stretch: normal; line-height: 0.6rem; margin: 0; -webkit-background-clip: text; background-clip: text; color: transparent; } .welcome_box .head p { width: 60%; font-size: 0.18rem; line-height: 1.8; line-height: 2; color: #666; /*color: #0b398d;*/ margin: 0.3rem auto 0; } .welcome_box .w1600 { max-width: 80%; padding: 1px; } .welcome_box .foot { padding: 0.7rem 0 1.2rem; text-align: center; } .welcome_box .foot .more { margin-top: 0; color: #fff; display: inline-block; width: 1.86rem; font-size: 0.18rem; transition: all 0.5s ease; border-radius: 0.01rem; } .welcome_box .foot .more:after { display: none; } .welcome_box .zxdt-box { background-image: url(../images/welcome-zxdt-bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .welcome_box .zxdt-box .title_h5 { background-image: url(../images/welcome-zxdt-title-bg.png); } .welcome_box .zxdt-box .foot { background-image: url(../images/welcome-zxdt-foot-bg.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% 100%; } .welcome_box .mtbd-box { background-image: url(../images/welcome-mtbd-bg.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; } .welcome_box .mtbd-box .head { background-image: url(../images/welcome-mtbd-head-bg.png); background-repeat: no-repeat; background-position: top center; background-size: 100% 100%; } .welcome_box .mtbd-box .title_h5 { background-image: url(../images/welcome-mtbd-title-bg.png); } .welcome_box .spbd-box { background-image: url(../images/welcome-spbd-bg.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; } .welcome_box .spbd-box .head { background-image: url(../images/welcome-spbd-head-bg.png); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } .welcome_box .spbd-box .title_h5 { background-image: url(../images/welcome-spbd-title-bg.png); } .welcome_box .qqyy-box { background-image: url(../images/welcome-qqyy-bg.png); background-repeat: no-repeat; background-position: bottom center; background-size: cover; } .welcome_box .qqyy-box .head { background-image: url(../images/welcome-qqyy-head-bg.png); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } .welcome_box .qqyy-box .title_h5 { background-image: url(../images/welcome-qqyy-title-bg.png); } .welcome_box .mtbd-box dl { display: flex; /*box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);*/ } .welcome_box .mtbd-box dt { vertical-align: top; width: 50%; height: 100%; box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2); } .welcome_box .mtbd-box dt .swiper-slide .img { padding-bottom: 4.21rem; } .welcome_box .mtbd-box dt .swiper-slide .title { position: absolute; bottom: 0; padding: 0.3rem 0.5rem; width: 100%; box-sizing: border-box; text-align: center; /*background-color: #666; opacity: 0.85;*/ background-color: rgba(0, 0, 0, 0.2); font-size: 0.18rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; } .welcome_box .mtbd-box dt .swiper-pagination span { background-color: #fff; opacity: 1; } .welcome_box .mtbd-box dt .swiper-button-prev { left: 0; background-image: url(../img/jt2.png); } .welcome_box .mtbd-box dt .swiper-button-next { right: 0; background-image: url(../img/jt3.png); } .welcome_box .mtbd-box dt .swiper-button-next, .welcome_box .mtbd-box dt .swiper-button-prev { top: unset; bottom: 0.15rem; border: none; background-color: transparent; } .welcome_box .mtbd-box dd { width: 50%; box-sizing: border-box; padding-left: 0.15rem; } .welcome_box .mtbd-box dd>div { margin-bottom: 0.15rem; transition: all 0.5s ease; } .welcome_box .mtbd-box dd>div:last-of-type { margin-bottom: 0; } .welcome_box .mtbd-box dd a { display: flex; align-items: center; justify-content: space-between; background-color: #b7cbe1; padding: 0.15rem 0; background-color: rgba(128, 219, 247, 0.2); background: #f7f7f7; box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2); } .welcome_box .mtbd-box dd a .date { box-sizing: border-box; border-right: 1px solid #0099ff; border-right: 1px solid #ccc; width: 1.2rem; height: 0.64rem; padding: 0 0.15rem; text-align: right; font-size: 0.16rem; color: #0099ff; color: #333; } .welcome_box .mtbd-box dd a .date .day { font-size: 0.3rem; margin: 0.06rem 0; } .welcome_box .mtbd-box dd a .info { max-width: calc(100% - 1.2rem); padding: 0 0.15rem; } .welcome_box .mtbd-box dd a .info h1 { font-weight: bold; font-size: 0.18rem; color: #0099ff; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; } .welcome_box .mtbd-box dd a .info p { margin-top: 0.06rem; font-size: 0.15rem; color: #f2f6f9; color: #757f87; line-height: 1.4; overflow: hidden; height: 0.40rem; } .welcome_box .qqyy-box .head { padding-bottom: 3rem; } .welcome_box .qqyy-box>.w1600 { margin-top: -2.7rem; position: relative; } .welcome_box .qqyy-box .w1600 .sjdt { width: 100%; } .welcome_box .qqyy-box .w1600 .ul1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .welcome_box .qqyy-box .w1600 .ul1 li { position: absolute; z-index: 6; width: 0.36rem; height: 0.44rem; cursor: pointer; transform: translate(-50%, -50%); } .welcome_box .qqyy-box .w1600 .ul1 li i { display: block; width: 100%; height: 100%; position: relative; background-image: url(../img/tb5.png); background-size: 100% 100%; transform: scale(0.8); } .welcome_box .qqyy-box .w1600 .ul1 li span { position: absolute; white-space: nowrap; font-size: 0.15rem; color: #0b398d; top: 110%; left: 50%; transform: translateX(-50%); transition: all 0.5s ease; } .welcome_box .qqyy-box .w1600 .ul1 #li1 { width: 0.22rem; height: 0.22rem; } .welcome_box .qqyy-box .w1600 .ul1 #li1 i { background: none; background-color: #e51a28; border-radius: 50%; } .welcome_box .qqyy-box .w1600 .ul1 #li1 i::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; opacity: 0; background-color: #e51a28; animation: gjyy-dh0 3s linear infinite; } .welcome_box .qqyy-box .w1600 .ul1 #li1 i::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; opacity: 0; background-color: #e51a28; animation: welcome-qqyy-dh0 3s 1.5s linear infinite } @keyframes welcome-qqyy-dh0 { 0% { opacity: 0; transform: scale(0); } 75% { opacity: 0.4; transform: scale(5); } 100% { opacity: 0; transform: scale(6); } } .welcome_box .qqyy-box .w1600 .ul1 #li1 span { top: 160%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(1) { top: 39%; left: 41%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(2) { top: 21.5%; left: 15.5%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(2) span { margin-left: 0.35rem; margin-top: -0.3rem; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(3) { top: 25%; left: 13%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(3) span { margin-left: 0.35rem; margin-top: -0.2rem; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(4) { top: 25.8%; left: 11.5%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(5) { top: 63.5%; left: 96.5%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(6) { top: 80.5%; left: 17%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(7) { top: 38%; left: 18%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(8) { top: 47%; left: 29.8%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(9) { top: 59%; left: 37.5%; } .welcome_box .qqyy-box .w1600 .ul1 li:nth-of-type(10) { top: 40%; left: 80.5%; } .welcome_box .qqyy-box .w1600 .ol1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } .welcome_box .qqyy-box .w1600 .ol1 li { position: absolute; top: 0; right: 0; background-size: cover; background-position: right top; } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(1) { top: 23%; right: 59%; width: 25.5%; height: 16%; background-image: url(../img/xx1.png); animation: welcome-qqyy-dh1 3.8s infinite; } @keyframes welcome-qqyy-dh1 { 0% { width: 0; opacity: 0; } 80% { width: 25.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(2) { top: 27%; right: 59%; width: 28%; height: 12%; background-image: url(../img/xx2.png); animation: welcome-qqyy-dh2 4s infinite; } @keyframes welcome-qqyy-dh2 { 0% { width: 0; opacity: 0; } 80% { width: 28%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(3) { top: 27%; right: 59%; width: 29.5%; height: 12%; background-image: url(../img/xx3.png); animation: welcome-qqyy-dh3 3.8s infinite; } @keyframes welcome-qqyy-dh3 { 0% { width: 0; opacity: 0; } 80% { width: 29.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(4) { top: 39%; right: 59%; width: 23%; height: 2.3%; background-image: url(../img/xx4.png); animation: welcome-qqyy-dh4 3.2s infinite; } @keyframes welcome-qqyy-dh4 { 0% { width: 0; opacity: 0; } 80% { width: 23%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(5) { top: 39%; right: 59%; width: 11.3%; height: 11%; background-image: url(../img/xx5.png); animation: welcome-qqyy-dh5 2.1s infinite; } @keyframes welcome-qqyy-dh5 { 0% { width: 0; opacity: 0; } 80% { height: 11%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(6) { top: 39%; right: 59%; width: 24%; height: 44%; background-image: url(../img/xx6.png); animation: welcome-qqyy-dh6 8.1s infinite; } @keyframes welcome-qqyy-dh6 { 0% { width: 0; opacity: 0; } 80% { height: 44%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(7) { top: 39%; right: 59%; width: 3.5%; height: 22.5%; background-image: url(../img/xx7.png); animation: welcome-qqyy-dh7 4s infinite; } @keyframes welcome-qqyy-dh7 { 0% { width: 0; opacity: 0; } 80% { height: 22.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(8) { top: 39%; left: 41%; width: 56.5%; height: 27%; background-image: url(../img/xx8.png); animation: welcome-qqyy-dh8 8s infinite; } @keyframes welcome-qqyy-dh8 { 0% { height: 0; opacity: 0; } 80% { width: 56.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .w1600 .ol1 li:nth-of-type(9) { top: 39%; left: 41%; width: 39.5%; height: 3%; background-image: url(../img/xx9.png); animation: welcome-qqyy-dh9 6s infinite; } @keyframes welcome-qqyy-dh9 { 0% { height: 0; opacity: 0; } 80% { width: 39.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .qqyy-box .foot { padding: 0.3rem 0 0.7rem; } .welcome_box .qqyy-box .foot ul { display: flex; justify-content: space-between; align-items: end; } .welcome_box .qqyy-box .foot ul li { font-size: 0; } .welcome_box .qqyy-box .foot ul li div { display: inline-block; vertical-align: bottom; } .welcome_box .qqyy-box .foot ul li div strong { display: block; text-align: left; font-size: 0.5rem; font-family: "BEBAS"; font-weight: normal; } .welcome_box .qqyy-box .foot ul li div .counter { -webkit-background-clip: text; background-clip: text; color: transparent; } .welcome_box .qqyy-box .foot ul li div small { margin-left: 0.1rem; font-size: 0.36rem; color: #0099ff; } .welcome_box .qqyy-box .foot ul li:nth-of-type(1) div small { font-size: 0.18rem; } .welcome_box .qqyy-box .foot ul li div>span { display: inline-flex; margin-top: 0.2rem; font-size: 0.15rem; color: #0099ff; } .welcome_box .qqyy-box .foot ul li img { display: inline-block; vertical-align: bottom; width: 0.5rem; margin-left: 0.2rem; } .welcome_box .qqyy-box .foot ul i { flex-shrink: 0; width: 1px; height: 0.75rem; background-color: #e6e7e8; } /*.welcome_box .gjyy_box { padding-top: 0; } .welcome_box .gjyy_box .diva { position: relative; } .welcome_box .gjyy_box .diva .title_h5 { position: absolute; z-index: 5; top: 0.7rem; width: 230px; text-align: left; } .welcome_box .gjyy_box .diva .title_h5 p { width: 100%; font-size: 0.16rem; } .welcome_box .gjyy_box .diva .title_h5 a { display: block; width: 1.86rem; height: 0.48rem; font-size: 0.18rem; line-height: 0.48rem; border-radius: 0.04rem; background-color: #ef3133; color: #fff; margin-top: 0.32rem; transition: all 0.5s ease; text-align: center; } .welcome_box .gjyy_box .diva .sjdt { width: 100%; } .welcome_box .gjyy_box .diva .ul1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .welcome_box .gjyy_box .diva .ul1 li { position: absolute; z-index: 6; width: 0.36rem; height: 0.44rem; cursor: pointer; transform: translate(-50%,-50%); } .welcome_box .gjyy_box .diva .ul1 li i { display: block; width: 100%; height: 100%; position: relative; background-image: url(../img/tb5.png); background-size: 100% 100%; transform: scale(0.8); } .welcome_box .gjyy_box .diva .ul1 li span { position: absolute; white-space: nowrap; font-size: 0.15rem; top: 110%; left: 50%; transform: translateX(-50%); transition: all 0.5s ease; } .welcome_box .gjyy_box .diva .ul1 #li1 { width: 0.22rem; height: 0.22rem; } .welcome_box .gjyy_box .diva .ul1 #li1 i { background: none; background-color: #e51a28; border-radius: 50%; } .welcome_box .gjyy_box .diva .ul1 #li1 i::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; opacity: 0; background-color: #e51a28; animation: gjyy-dh0 3s linear infinite; } .welcome_box .gjyy_box .diva .ul1 #li1 i::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; opacity: 0; background-color: #e51a28; animation: gjyy-dh0 3s 1.5s linear infinite } @keyframes gjyy-dh0 { 0% { opacity: 0; transform: scale(0); } 75% { opacity: 0.4; transform: scale(5); } 100% { opacity: 0; transform: scale(6); } } .welcome_box .gjyy_box .diva .ul1 #li1 span { top: 160%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(1) { top: 39%; left: 51%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(2) { top: 20.5%; left: 30.5%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(2) span { margin-left: 0.35rem; margin-top: -0.3rem; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(3) { top: 24.8%; left: 27%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(4) { top: 24%; left: 28.4%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(4) span { margin-left: 0.35rem; margin-top: -0.2rem; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(5) { top: 63.8%; left: 96%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(6) { top: 80.5%; left: 31.5%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(7) { top: 37.8%; left: 32.5%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(8) { top: 46.8%; left: 41.7%; } .welcome_box .gjyy_box .diva .ul1 li:nth-of-type(9) { top: 59%; left: 48.2%; } .welcome_box .gjyy_box .diva .ol1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } .welcome_box .gjyy_box .diva .ol1 li { position: absolute; top: 0; right: 0; background-size: cover; background-position: right top; } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(1) { top: 23%; right: 49%; width: 20.5%; height: 16%; background-image: url(../img/xx1.png); animation: gjyy-dh1 3.8s infinite; } @keyframes gjyy-dh1 { 0% { width: 0; opacity: 0; } 80% { width: 20.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(2) { top: 26%; right: 49%; width: 22.5%; height: 13%; background-image: url(../img/xx2.png); animation: gjyy-dh2 4s infinite; } @keyframes gjyy-dh2 { 0% { width: 0; opacity: 0; } 80% { width: 22.5%; opacity: 1; } 100% { opacity: 1; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(3) { top: 27%; right: 49%; width: 24%; height: 12%; background-image: url(../img/xx3.png); animation: gjyy-dh3 3.8s infinite; } @keyframes gjyy-dh3 { 0% { width: 0; opacity: 0; } 80% { width: 24%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(4) { top: 39%; right: 49%; width: 18.5%; height: 2.3%; background-image: url(../img/xx4.png); animation: gjyy-dh4 3.2s infinite; } @keyframes gjyy-dh4 { 0% { width: 0; opacity: 0; } 80% { width: 18.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(5) { top: 39%; right: 49%; width: 9.3%; height: 11%; background-image: url(../img/xx5.png); animation: gjyy-dh5 2.1s infinite; } @keyframes gjyy-dh5 { 0% { width: 0; opacity: 0; } 80% { height: 11%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(6) { top: 39%; right: 49%; width: 19.5%; height: 45%; background-image: url(../img/xx6.png); animation: gjyy-dh6 8.1s infinite; } @keyframes gjyy-dh6 { 0% { width: 0; opacity: 0; } 80% { height: 45%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(7) { top: 39%; right: 49%; width: 2.5%; height: 22.5%; background-image: url(../img/xx7.png); animation: gjyy-dh7 4s infinite; } @keyframes gjyy-dh7 { 0% { width: 0; opacity: 0; } 80% { height: 22.5%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .diva .ol1 li:nth-of-type(8) { top: 39%; left: 51%; width: 45%; height: 27.5%; background-image: url(../img/xx8.png); animation: gjyy-dh8 8s infinite; } @keyframes gjyy-dh8 { 0% { height: 0; opacity: 0; } 80% { width: 45%; opacity: 1; } 100% { opacity: 0; } } .welcome_box .gjyy_box .divb ul { display: flex; align-items: center; justify-content: space-between; } .welcome_box .gjyy_box .divb { padding-top: 0; } .welcome_box .gjyy_box .divb ul li { font-size: 0; } .welcome_box .gjyy_box .divb ul i { flex-shrink: 0; width: 1px; height: 0.75rem; background-color: #e6e7e8; } .welcome_box .gjyy_box .divb ul li div { display: inline-block; vertical-align: bottom; } .welcome_box .gjyy_box .divb ul li div strong { font-size: 0.5rem; display: block; font-family: "BEBAS"; font-weight: normal; } .welcome_box .gjyy_box .divb ul li div small { font-size: 0.36rem; margin-left: 0.1rem; } .welcome_box .gjyy_box .divb ul li:nth-of-type(1) div small { font-size: 0.18rem; } .welcome_box .gjyy_box .divb ul li div p { font-size: 0.15rem; margin-top: 0.2rem; } .welcome_box .gjyy_box .divb ul li img { display: inline-block; vertical-align: bottom; width: 0.72rem; margin-left: 0.2rem; margin-bottom: -0.04rem; }*/ /* 亨通党建 */ .htdj_box .div2 .htdj-item { background-color: #fff; } .htdj_box .div2 .htdj-item p { font-weight: bold; font-size: 0.18rem; } /* 发展历程 */ /*.fzlc_box .fzlc1-info li[data-src] { cursor: pointer; }*/ .fzlc_box .fzlc1-img-box { position: relative; } .fzlc_box .fzlc1-img-box .fzlc1-img .title { position: absolute; bottom: 8px; width: calc(100% - 16px); box-sizing: border-box; padding: 15px; text-align: center; background-color: rgba(0, 0, 0, 0.6); font-size: 0.18rem; color: #fff; transition: all 0.5s ease; } .fzlc_box .fzlc1-img-box .fzlc1-img .title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 创新驱动 */ .cxqd_box .div2.active video { opacity: 1; } /* 新闻中心 */ .xwlb_box .xwlb_list_3 { margin-top: -0.16rem; } .xwlb_box .xwlb_list_3 .item { float: left; width: 24.25%; margin-right: 1%; margin-top: 0.16rem; background-color: #fff; box-sizing: border-box; padding: 0.16rem; box-shadow: 0 0 0.05rem rgba(0,0,0,0.1); transition: all 0.5s ease; } .xwlb_box .xwlb_list_3 .item:nth-of-type(4n) { margin-right: 0; } .xwlb_box .xwlb_list_3 .item .img-box { display: block; width: 100%; padding-bottom: 64%; position: relative; } .xwlb_box .xwlb_list_3 .item .img-box .img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; transition: all 0.5s ease; } .xwlb_box .xwlb_list_3 .item .info h1 { height: 0.56rem; font-size: 0.18rem; margin-top: 0.16rem; line-height: 1.6; text-align: left; overflow: hidden; transition: all 0.5s ease; } .xwlb_box .xwlb_list_3 .item .info span { display: block; margin-top: 0.10rem; font-size: 0.16rem; color: #666; padding-top: 0.16rem; border-top: 1px solid #eaeaea; transition: all 0.5s ease; } .xwlb_box .xwlb_list .paging_div { margin-top: 0.5rem; } .xwlb_box .xwlb_list .paging_div a { background-color: #efefef; } .video_box { display: none; position: fixed; width: 100%; height: 100%; z-index: 11; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); } .video_box div { position: absolute; width: 9.0rem; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video_box div .close { position: absolute; z-index: 3; top: 0; right: 0; width: 0.4rem; height: 0.4rem; font-size: 0.26rem; color: #fff; background-color: #c80917; text-align: center; line-height: 0.4rem; cursor: pointer; } .video_box div video { width: 100%; height: auto; max-height: 100vh; } .xwxq_box { background-color: #fff; } .xwxq_box .left { float: left; width: 75%; } .xwxq_box .left .div1 { padding-bottom: 0.24rem; margin-bottom: 0.4rem; border-bottom: 1px solid #e5e5e5; } .xwxq_box .left .div1 dt { font-size: 0.24rem; line-height: 1.5; margin-bottom: 0.3rem; } .xwxq_box .left .div1 dd { line-height: 0.24rem; } .xwxq_box .left .div1 dd strong { font-size: 0.22rem; font-weight: normal; } .xwxq_box .left .div1 dd span { float: right; font-size: 0.13rem; color: #999; padding-left: 0.3rem; background-image: url(../img/tb31.png); background-size: 0.2rem; background-repeat: no-repeat; background-position: left 0.04rem; } .xwxq_box .left .div1 dd em { float: right; color: #666; margin-left: 0.3rem; } .xwxq_box .left .div1 dd em small { font-size: 0.13rem; color: #999; display: inline-block; vertical-align: top; } .xwxq_box .left .div1 dd em i { display: inline-block; vertical-align: top; line-height: 0.2rem; margin-left: 0.06rem; cursor: pointer; } .xwxq_box .left .div1 dd em sup { float: right; margin-left: -0.04rem; width: 0.1rem; margin-top: -0.02rem; } .xwxq_box .left .div2 p { font-size: 0.16rem; line-height: 1.8; margin-bottom: 0.2rem; color: #666; } .xwxq_box .left .div2 p img { display: block; margin: 0 auto; width: auto; max-width: 100%; } .xwxq_box .left .div3 { padding-top: 0.2rem; margin-top: 0.5rem; border-top: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: space-between; } .xwxq_box .left .div3 div { font-size: 0; } .xwxq_box .left .div3 div span { display: inline-block; vertical-align: top; line-height: 0.31rem; font-size: 0.16rem; } .xwxq_box .left .div3 div a { display: inline-block; vertical-align: top; float: none; margin: 0; padding: 0; width: 0.31rem; height: 0.31rem; background-size: 100% 100%; margin-right: 0.12rem; } .xwxq_box .left .div3 div a.wx { background-image: url(../img/tb26.jpg); } .xwxq_box .left .div3 div a.qq { background-image: url(../img/tb27.jpg); } .xwxq_box .left .div3 div a.wb { background-image: url(../img/tb28.jpg); } .xwxq_box .left .div3 div a.qt { background-image: url(../img/tb29.jpg); margin-right: 0; } .xwxq_box .right { float: right; width: 23%; box-sizing: border-box; background-color: #efefef; padding: 0.48rem 0.22rem; } .xwxq_box .right h6 { font-size: 0.36rem; text-align: center; padding-bottom: 0.3rem; border-bottom: 1px solid #d7d7d7; } .xwxq_box .right div { padding: 0.4rem 0; border-bottom: 1px solid #d7d7d7; } .xwxq_box .right div a { display: flex; } .xwxq_box .right div a em { font-size: 0.14rem; color: #999; text-align: center; flex-shrink: 0; width: 0.62rem; } .xwxq_box .right div a em i { display: block; font-size: 0.24rem; color: #C80917; margin-bottom: 0.04rem; } .xwxq_box .right div a p { flex-shrink: 0; margin-top: -0.04rem; width: calc(100% - 0.62rem); font-size: 0.18rem; color: #666; line-height: 1.5; box-sizing: border-box; padding-left: 0.2rem; transition: all 0.5s ease; } /* 集团领导 */ .zxfc_box .zxzc_box { position: relative; width: 100%; background-image: url(../img/zxzc.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .zxfc_box .zxzc_box .pd { background-image: url(../img/zx.png); background-size: auto 80%; background-repeat: no-repeat; background-position: right bottom; } .zxfc_box .zxzc_box .info { left: 0; width: 40%; } .zxfc_box .zxzc_box .info h1 { font-size: .45rem; margin-bottom: .5rem; } .zxfc_box .zxzc_box .info p { font-size: .16rem; color: #666; line-height: .28rem; } .zxfc_box .zxzc_box .info .qm { text-align: right; margin-top: .3rem; } .zxfc_box .zxzc_box .info .qm img{ width: 1.0rem; } .zxfc_box .sjzs_box { background-color: #f7f7f7; } .zxfc_box .sjzs_box .swiper-out { background-color: #fff; box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2); } .zxfc_box .sjzs_box .swiper-slide { display: flex; padding: 0.5rem 0.3rem; max-width: 100%; border: 0; box-shadow: none; } .zxfc_box .sjzs_box .swiper-slide .img-box { margin: 0 1.1rem; width: 2rem; } .zxfc_box .sjzs_box .swiper-slide .img-box .img { padding-bottom: 130%; } .zxfc_box .sjzs_box .swiper-slide .info { margin: 0 0.3rem 0 0.5rem; width: calc(100% - 5rem); } .zxfc_box .sjzs_box .swiper-slide .info blockquote { display: block; position: relative; padding-top: 40px; } .zxfc_box .sjzs_box .swiper-slide .info blockquote:after { content: ""; width: 55px; height: 40px; background: url(../images/blockquote.png); position: absolute; left: 0; top: 0; } .zxfc_box .sjzs_box .swiper-slide .info h1 { margin: 0.15rem 0; font-size: 0.2rem; line-height: 1.5; white-space: normal; } .zxfc_box .sjzs_box .swiper-slide .info h2 { font-size: 0.18rem; line-height: 1.5; } .zxfc_box .sjzs_box .swiper-slide .info p { font-size: 0.16rem; margin: 0.15rem 0 0.3rem; line-height: 1.8; height: auto; } .zxfc_box .sjzs_box .swiper-slide .info .detail { font-size: 0.16rem; color: #c80917; padding-right: 0.3rem; background-image: url(../img/tp69.png); background-repeat: no-repeat; background-position: right center; background-size: 0.2rem; } .zxfc_box .sjzs_box .swiper-button-prev, .zxfc_box .sjzs_box .swiper-button-next { background-color: #cccccc; background-size: 0.15rem; width: 0.4rem; height: 0.4rem; } .zxfc_box .sjzs_box .swiper-button-prev { background-image: url(../img/jt2.png); left: 0.6rem; } .zxfc_box .sjzs_box .swiper-button-next { background-image: url(../img/jt3.png); left: 3.8rem; } .zxfc_box .mtpj_box .swiper-pagination, .zxfc_box .spbd_box .swiper-pagination, .zxfc_box .hddt_box .swiper-pagination { position: static; margin: 0.3rem 0; } .dtxq_box { background-color: #fff; } .dtxq_box .div1 { text-align: center; } .dtxq_box .div1 h5 { font-size: 0.3rem; line-height: 1.4; } .dtxq_box .div1 h6 { margin-top: 0.2rem; padding-top: 0.2rem; border-top: 1px solid #e6e6e6; } .dtxq_box .div1 h6 span { display: inline-block; vertical-align: top; font-size: 0.14rem; height: 0.16rem; line-height: 0.16rem; color: #999; padding-right: 0.2rem; margin-right: 0.2rem; } .dtxq_box .div1 h6 span:not(:last-child) { border-right: 1px solid #e6e6e6; } .dtxq_box .div2 { padding-top: 0.3rem; } .dtxq_box .div2 p { font-size: 0.16rem; line-height: 1.8; margin-bottom: 0.16rem; } .dtxq_box .div2 img { display: block; margin: 0 auto; max-width: 100%; } /* 亨通概况 */ .htgk_box .content { margin: 0 10%; } /* 亨通党建 */ .htdj_box .djdt_box .list_box .list .item .info h1 { height: 0.56rem; } /* 亨通荣誉 */ .htry_box .list_box .list .item .info h1 { text-align: center; white-space: nowrap; text-overflow: ellipsis; } /* 发展历程 */ .fzlc_box .fzlc-swiper2 { margin-top: 0.4rem; padding: 0.4rem; } /* 国际产业 */ .gjcy_box .hwdt-box .list_box .list .item .info h1 { height: 0.56rem; } /* 创新驱动 */ .cxqd_box .cxfzdt-box .list_box .list .item .info h1 { height: 0.56rem; } /* 视频报道 */ .spbd_box .list_box .list .item .info h1 { height: 0.56rem; } /* 企业文化 */ .qywh_box .mg img { width: 100%; height: auto; } /*.qywh_box .box1 { background-image: url(../images/qywh-01-bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .qywh_box .box1 .container { height: 4rem; } .qywh_box .box2 { background-image: url(../images/qywh-02-bg.png); background-repeat: no-repeat; background-position: right bottom; background-size: auto 100%; } .qywh_box .box2 .container { height: 4rem; } .qywh_box .box3 .container { height: 4rem; } .qywh_box .box4 { background-image: url(../images/qywh-04-bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .qywh_box .box4 .container { height: 4rem; } .qywh_box .box5 { background-image: url(../images/qywh-05-bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .qywh_box .box5 .container { height: 4rem; } .qywh_box .box6 { background-image: url(../images/qywh-06-bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .qywh_box .box6 .container { height: 4rem; }*/ /* 公益慈善动态 */ .gycsdt_box .list_box .list .item .info h1 { height: 0.56rem; } /* CSR报告 */ .csrbg_box .list_box .list .item { padding: 0.25rem; } .csrbg_box .list_box .list .item .info h1 { margin-top: 0.25rem; text-align: center; } .csrbg_box .list_box .list .item:hover{ background-color: #c80917; box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.4); } .csrbg_box .list_box .list .item:hover .info h1 { color: #fff; } /* 亨通慈善基金会 */ .box>.htcsjjh_box .gyxm_box .tab_head a { margin: 0 0.05rem; padding: 0 0.18rem; width: auto; height: 0.36rem; line-height: 0.36rem; border: 1px solid #cacaca; } .box>.htcsjjh_box .gyxm_box .tab_head a.active { border: 1px solid #c80917; } .box>.htcsjjh_box .gyxm_box .tab_div .swiper-container { display: none; } .box>.htcsjjh_box .gyxm_box .tab_div .swiper-wrapper { min-height: 4.35rem; } .box>.htcsjjh_box .gyxm_box .tab_div .item { display: flex; background-color: #fff; } .box>.htcsjjh_box .gyxm_box .tab_div .img-box { width: 58.5%; } .box>.htcsjjh_box .gyxm_box .tab_div .img-box .img { padding-bottom: 4.35rem; } .box>.htcsjjh_box .gyxm_box .tab_div .info { width: 41.5%; padding: 0.5rem 5% 0; } .box>.htcsjjh_box .gyxm_box .tab_div .info h1 { margin: 0; font-size: 0.3rem; color: #c80917; } .box>.htcsjjh_box .gyxm_box .tab_div .info p { margin: 8% 0 0; font-size: 0.18rem; height: 1.5rem; } .box>.htcsjjh_box .gyxm_box .tab_div .info .more { margin: 0.5rem 0 0 auto; } .box>.htcsjjh_box .gyxm_box .tab_div .swiper-pagination { position: static; margin: 0.3rem 0 0; } .box>.htcsjjh_box .gyxm_box .tab_div .swiper-pagination span { background-color: #fff; opacity: 1; } /* 亨通慈善基金会 - 公益项目 */ /*.box>.gyxm_box .list_box #list { display: inline-block; width: 100%; } .box>.gyxm_box .list_box .left { float: left; position: relative; width: 2.0rem; padding: 0.5rem 0; } .box>.gyxm_box .list_box .left::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0.07rem; width: 0.07rem; height: 0.07rem; border: 1px solid #ccc; background-color: #fff; border-radius: 50%; } .box>.gyxm_box .list_box .left::after { content: ""; position: absolute; z-index: 3; bottom: 0; left: 0.07rem; width: 0.07rem; height: 0.07rem; border: 1px solid #ccc; background-color: #fff; border-radius: 50%; } .box>.gyxm_box .list_box .left a { position: relative; z-index: 3; display: block; cursor: pointer; margin-bottom: 0.3rem; font-size: 0.18rem; height: 0.23rem; line-height: 0.23rem; padding-left: 0.48rem; background-image: url(../img/tb14.png); background-size: auto 100%; background-repeat: no-repeat; transition: all 0.5s ease; } .box>.gyxm_box .list_box .left a:last-of-type { margin-bottom: 0; } .box>.gyxm_box .list_box .left a.active { background-image: url(../img/tb15.png); } .box>.gyxm_box .list_box .left i { position: absolute; width: 1px; height: 100%; top: 0; left: 0.11rem; background-color: #ccc; } .box>.gyxm_box .list_box .right { float: left; width: calc(100% - 2.0rem); box-sizing: border-box; padding: 0.3rem; box-shadow: 0 0 0.05rem rgba(0, 0, 0, 0.1); min-height: 5.5rem; }*/ .box>.gyxm_box .list_box .list .item .info h1 { text-align: center; white-space: nowrap; text-overflow: ellipsis; } /* 亨通慈善基金会 - 信息公开 */ .xxgk_box .list_box .list .item { /*line-height: 0.8rem;*/ padding: 0.3rem 0.35rem; } .xxgk_box .list_box .list .item .info:before { content: ""; display: inline-block; vertical-align: middle; width: 0.29rem; height: 0.36rem; background-image: url(../img/tb24.png); background-size: 0.29rem; background-position-y: 0; transition: all 0.5s ease; } .xxgk_box .list_box .list .item .info h1 { display: inline-block; width: calc(100% - 0.5rem); margin: 0 0 0 0.14rem; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; } .xxgk_box .list_box .list .item .info span { /*float: right;*/ margin: 0.15rem 0 0; padding: 0 0.26rem 0 0; border: 0; background-image: url(../img/tb25.png); background-repeat: no-repeat; background-position: right center; background-size: 0.08rem; text-align: right; } .xxgk_box .list_box .list .item:hover{ background-color: #c80917; box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2); } .xxgk_box .list_box .list .item:hover .info:before { background-position-y: -0.38rem; } .xxgk_box .list_box .list .item:hover .info h1 { color: #fff; } .xxgk_box .list_box .list .item:hover .info span { color: #fff; background-image: url(../img/tb25h.png); } /* list_box timeline */ .list_box #list { display: inline-block; width: 100%; } .list_box .left { float: left; position: relative; width: 2.0rem; padding: 0.5rem 0; } .list_box .right { float: left; width: calc(100% - 2.0rem); box-sizing: border-box; padding: 0.3rem; box-shadow: 0 0 0.05rem rgba(0, 0, 0, 0.1); min-height: 5.5rem; } timeline::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0.07rem; width: 0.07rem; height: 0.07rem; border: 1px solid #ccc; background-color: #fff; border-radius: 50%; } .timeline::after { content: ""; position: absolute; z-index: 3; bottom: 0; left: 0.07rem; width: 0.07rem; height: 0.07rem; border: 1px solid #ccc; background-color: #fff; border-radius: 50%; } .timeline a { position: relative; z-index: 3; display: block; cursor: pointer; margin-bottom: 0.3rem; font-size: 0.18rem; height: 0.23rem; line-height: 0.23rem; padding-left: 0.48rem; background-image: url(../img/tb14.png); background-size: auto 100%; background-repeat: no-repeat; transition: all 0.5s ease; } .timeline a:last-of-type { margin-bottom: 0; } .timeline a.active { background-image: url(../img/tb15.png); } .timeline i { position: absolute; width: 1px; height: 100%; top: 0; left: 0.11rem; background-color: #ccc; }