.index{ } .index .section1{ background: url(/uploads/image/agimages/section1.jpg) no-repeat center bottom; background-size: 100%; padding-top: calc(155/1920*100vw); padding-bottom: calc(193/1920*100vw); } .index .section1 .content{ margin-top: calc(58/1920*100vw); zoom: 1; overflow: hidden; } .index .section1 .content .left{ float: left; width: 50%; } .index .section1 .content .left a{ display: block; } .index .section1 .content .left .wap{ display:none } .index .section1 .content .left *{ display: block; } .index .section1 .content .left .imgbox{ overflow: hidden; } .index .section1 .content .left .img{ height: calc(432/1920*100vw); } .index .section1 .content .left a:hover .con:before{ left: 100%; } .index .section1 .content .left .con:before{ position:absolute; content:""; left:0px; bottom:0px; right:0px; border-bottom: 1px solid #a3a3a3; } .index .section1 .content .left .con{ padding-top: calc(24/1920*100vw); padding-bottom: calc(25/1920*100vw); zoom: 1; overflow: hidden; position: relative; } .index .section1 .content .left .time{ float: left; width: 14%; border-right: 1px solid #a3a3a3; position: relative; z-index: 2; text-align: center; } .index .section1 .content .left .year{ font-size: calc(25/1920*100vw); font-family: arial; font-weight: 400; color: #0068b6; } .index .section1 .content .left .mon{ font-size: calc(20/1920*100vw); font-family: arial; font-weight: 400; color: #0068b6; padding-top: calc(15/1920*100vw); } .index .section1 .content .left .text{ float: left; width: 86%; padding-top: calc(3/1920*100vw); padding-left: calc(26/1920*100vw); position: relative; z-index: 2; } .index .section1 .content .left .title{ font-size: calc(20/1920*100vw); font-family: microsoft yahei; font-weight: 400; color: #0068b6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index .section1 .content .left .dec{ font-size: calc(16/1920*100vw); font-family: microsoft yahei; font-weight: 400; color: #727272; margin-top: calc(20/1920*100vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index .section1 .content .right{ float: right; width: 50%; } .index .section1 .content .right li{ } .index .section1 .content .right li a{ display: block; position: relative; padding-left: 10%; padding-top: calc(25/1920*100vw); padding-bottom: calc(26/1920*100vw); padding-right: 10%; } .index .section1 .content .right li a *{ display: block; } .index .section1 .content .right li a .con{ position: relative; z-index: 4; } .index .section1 .content .right li a .time{ } .index .section1 .content .right li a .time{ float: left; width: 14%; } .index .section1 .content .right li a .mon{ font-size: calc(20/1920*100vw); font-family: arial; font-weight: 400; color: #7a7a7a; padding-top: calc(12/1920*100vw); } .index .section1 .content .right li a .ri{ float: left; width: 86%; } .index .section1 .content .right li a .year{ font-size: calc(25/1920*100vw); font-family: arial; font-weight: 400; color: #7a7a7a; /* float: left; */ } .index .section1 .content .right li a .titi{ zoom: 1; overflow: hidden; } .index .section1 .content .right li a .text{ zoom: 1; overflow: hidden; } .index .section1 .content .right li a .title{ font-size: calc(20/1920*100vw); font-family: sourcehansanscn; font-weight: 500; color: #7a7a7a; /* float: left; */ /* width: calc(100% - 99px); */ margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index .section1 .content .right li a .dec{ font-size: calc(16/1920*100vw); font-family: sourcehansanscn; font-weight: 400; color: #7a7a7a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: calc(19/1920*100vw); } .index .section1 .content .right li a:after{ content: ""; position: absolute; right: 10%; bottom: 0px; left: 10%; /* height: 1px; */ border-bottom: 1px solid #7a7a7a; } /*.index .section1 .content .right li a:before{ content:''; position:absolute; left:0px; bottom: 0; width:100%; height: calc(100% 1px); width: 0; background: linear-gradient(89deg, rgba(0,160,233,0.99) 8%, rgba(0,197,59,0.91) 100%); } .index .section1 .content .right li a:hover:before{ width: 100%; }*/ .index .section1 .content .right li a:hover:after{ left: 100%; } .index .section1 .content .right li a:before{ height: calc(100% 1px); top: auto; bottom: 0; } .index .section1 .content .right li a:hover *{ color: #fff; } .index .section2{ padding-top: calc(178/1920*100vw); padding-bottom: calc(92/1920*100vw); } .index .section2 .content{ position: relative; /* overflow: hidden; */ } .index .section2 .left{ width: 37.4%; } .index .section2 .left .dec{ font-size: 17px; font-family: microsoft yahei; font-weight: 400; color: #727272; line-height: 2.2; padding-top: calc(58/1920*100vw); padding-bottom: calc(39/1920*100vw); text-align: justify; } .index .section2 .right{ position: absolute; right: 0; top: 0px; width: 51%; height: 100%; } .index .section2 .right .year{ position: absolute; top: -19%; left: -13%; z-index: 4; animation-delay: .4s; } .index .section2 .right .year img{ width: 100%; } .index .section2 .right .con{ padding-right: 41px; height: 100%; } .index .section2 .right .imgbox{ height: 100%; overflow: hidden; position: relative; } .index .section2 .right .imgbox i{ position: absolute; top: 50%; left: 50%; -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; background: url(/uploads/image/agimages/play.png) no-repeat center center; background-size: 64px; width: 100%; height: 100%; z-index: 4; } .index .section2 .right .img{ height: 100%; } .index .section2 .right .line{ position: absolute; font-size: 30px; font-family: arial; font-weight: bold; color: #ffffff; right: 0; top: 0; height: 100%; width: 41px; writing-mode: vertical-rl; background: url(/uploads/image/agimages/line2.png) no-repeat center center; line-height: 42px; padding-top: 25px; background-size: cover; } .index .section3 .height{ position: relative; overflow: hidden; height: 100vh; } .index .section3 *{ overflow: hidden; } .index .section3 .block{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100px; background: #ccc; opacity: 0; z-index: 77; } .index .section3{position: relative;/* overflow: hidden; */} .index .section3 .imgbox{ height: 100%; -webkit-transform: scale(1.25,1.25); -o-transform: scale(1.25,1.25); -moz-transform: scale(1.25,1.25); -ms-transform: scale(1.25,1.25); transform:scale(1.25,1.25); /*background: url(/uploads/image/agimages/coverimg.jpg) no-repeat center center; background-size: cover;*/ } .index .section3 video{ height: 100%; width: 100%; object-fit: cover; } .index .section3 .svgimg img{ width:100%; position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); text-align: center; width: 100%; max-width: none; object-fit: cover; height: 100%; display: block; } .index .section3:after{ content: ""; position: absolute; width: 100%; height: 12px; background: #fff; left: 0px; top: -9px; z-index: 44; } .index .section3 .svgimg{position: absolute;left: 0;top: 0px;width: 100%;height: 100%;position:absolute;top: 50%;left: 50%;-o-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);/* object-fit: cover; *//* display: none; */background: url(/uploads/image/agfonts/syplk.svg) no-repeat center center;background-size: cover;} .index .section3 .text span{ display: inline-block; } .index .section3 .text{ position: absolute; left: 0; bottom: 8%; width: 100%; text-align: center; } .index .section3 .title1{ font-size: 33px; font-family: microsoft yahei; font-weight: 400; color: #4b4b4b; } .index .section3 .title2{ font-size: 37px; font-family: microsoft yahei; font-weight: bold; color: #4b4b4b; padding-top: 24px; padding-bottom: 36px; } .index .section3 .title3{ font-size: 16px; font-family: microsoft yahei; font-weight: 400; color: #9c9b9b; } .index .section3 .text2{ text-align: center; width: 100%; position: absolute; left: 0px; top: 0; height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; } .index .section3 .text2 .tit1 span, .index .section3 .text2 .tit2 span{ display: block; -o-transform: translate(0%, 100%); -webkit-transform: translate(0%, 100%); -moz-transform: translate(0%, 100%); -ms-transform:translate(0%, 100%); transform: translate(0%, 100%); } .index .section3 .text2 .tit1{ font-size: calc(52/1920*100vw); font-family: microsoft yahei; font-weight: 400; color: #ffffff; overflow: hidden; } .index .section3 .text2 .tit2{ font-size: calc(60/1920*100vw); font-family: microsoft yahei; font-weight: bold; color: #ffffff; margin-top: 50px; overflow: hidden; } .index .section3 .more{ margin: auto; margin-top: 15px; width: 32px; height: 43px; background: url(/uploads/image/agimages/aniup.png) no-repeat center center; background-size: 100%; animation: move .6s infinite; -moz-animation: move .6s infinite; -webkit-animation: move .6s infinite; -o-animation: move .6s infinite; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: cubic-bezier(0.46, 0.02, 0.97, 0.36); -webkit-animation-timing-function: cubic-bezier(0.46, 0.02, 0.97, 0.36); } @keyframes move { from { -o-transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%,0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%);} to { -o-transform: translate(0%, 10px); -webkit-transform: translate(0%, 10px); -moz-transform: translate(0%,10px); -ms-transform: translate(0%, 10px); transform: translate(0%, 10px); } } .index .section4{padding-top: calc(114/1920*100vw);padding-bottom: calc(100/1920*100vw);} .index .section4 .list{ padding-top: calc(60/1920*100vw); } .index .section4 .list .left{ float: left; width: 48%; } .index .section4 .list .left .item a{ } .index .section4 .list .right .item{ float: left; width: 48%; margin-left: 1%; margin-bottom: 10px; } .index .section4 .list .right{ width: 52%; float: left; } .index .section4 .list .item{ } .index .section4 .list .item *{ display: block; } .index .section4 .list .item a{ display: block; overflow: hidden; height: 235px; position: relative; } .index .section4 .list .item .imgbox{ } .index .section4 .list .item .conbg{ position: absolute; z-index:4; width: 100%; left: 0px; bottom: -42px; } .index .section4 .list .item a:hover .conbg{ bottom:90px; } .index .section4 .list .left .item a:hover .conbg{bottom: 200px;} .index .section4 .list .item .text{ position: absolute; width: 100%; left: 0; top: 0px; z-index: 4; text-align: center; height: 100%; } .index .section4 .list .item .title>span{ font-size: 20px; font-family: microsoft yahei; font-weight: 400; color: #ffffff; padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid #fff; display: inline-block; } .index .section4 .list .item .dec{ font-size: 16px; font-family: microsoft yahei; font-weight: 400; height: 33px; color: #ffffff; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-left: 15px; padding-right: 15px; } .index .section4 .list .item .text:after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(/uploads/image/agimages/leanier1.png) no-repeat center center;opacity: 0;background-size: cover;} .index .section4 .list .item .dec span{ } .index .section4 .list .item a:hover .text:after{ opacity:1 } .index .section4 .list .item .imgbox{ height: 100%; } .index .section4 .list .left .item a{ height: 480px; } .alertmodel{ display: none; position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;-webkit-backdrop-filter: saturate(180%) blur(20px);backdrop-filter: saturate(180%) blur(10px);background-color: rgb(255 255 255 / 35%);} .alertmodel .center{ position:absolute; top: 50%; left: 50%; -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 992px; max-width: 100%; perspective: 150; overflow: hidden; -webkit-perspective: 500; perspective-origin: center center; -webkit-transition: all 0.3s; -o-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s; } .alertmodel .center .close:before{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; content: ""; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s; border-radius: 400px; background: url(/uploads/image/agimages/close.png) no-repeat center center #fff; background-size: 50%; } .alertmodel .center .close:hover:before{ -webkit-transform: scale(1.05,1.05); -o-transform: scale(1.05,1.05); -moz-transform: scale(1.05,1.05); -ms-transform: scale(1.05,1.05); transform: scale(1.05,1.05); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); } .alertmodel .center .close{ position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; cursor: pointer; z-index: 5; /* transform: translatey(-80px);*/ transition-delay: 2s; transform-origin: center center; } .alertmodel .center video{ width: 100%; display: block; height: 50vh; object-fit: cover; } .alertmodel .center .is{ } .alertmodel .center .is i{ position: absolute; top: 0px; width: 50%; height: 100%; background: #fff; left: 0px; } .alertmodel .center .is i:nth-child(2){ right: 0px; left: auto; } .alertmodel .content{ overflow: hidden; } @keyframes zoomindown { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -120px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.875, .875, .875) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomindown { animation-name: zoomindown; animation-direction: 1s; } .mc_pcnav_menu { /* left: 100%; */ top: 0; z-index: 99; width: 100%; height: 100%; /* background: rgba(0, 71, 186, .98); */ transition: all .4s cubic-bezier(.81, .01, .15, .995); display: flex; justify-content: center; align-items: center; position: absolute; z-index: 4; } .mc_pcnav_menu.on { left: 0; } .mc_navbar.isfixed .mc_pcnav_menu { height: calc(100vh - 86px); } .ys_pos_center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; } .mc_pcmenu_circle { font-size: 10px; position: absolute; left: 50%; top: 50%; z-index: -1; width: 100%; height: 100%; transform: translate(-50%, -50%); pointer-events: none; } .mc_pcmenu_circle span { position: absolute; left: 50%; top: 50%; display: block; border-radius: 50%; border: 1px solid #0068b7; opacity: .8; } .mc_pcmenu_circle0 { width: 120em; height: 120em; margin-top: -60em; margin-left: -60em; } .mc_pcmenu_circle1 { width: 15em; height: 15em; margin-top: -7.5em; margin-left: -7.5em; } .mc_pcmenu_circle2 { width: 30em; height: 30em; margin-top: -15em; margin-left: -15em; } .mc_pcmenu_circle3 { width: 60em; height: 60em; margin-top: -30em; margin-left: -30em; } .mc_pcmenu_circle4 { width: 98em; height: 98em; margin-top: -49em; margin-left: -49em; } .mc_pcmenu_circle5 { width: 140em; height: 140em; margin-top: -70em; margin-left: -70em; } .en .index .section2 .left .dec{ font-size: 15px; line-height: 1.6; }