/* CSS Document */ * { font-size: 100px; color: #333; /* text-transform:capitalize; */ font-family: "PingFang HK", "Microsoft YaHei", "Arial"; } br{font-size: 1px;} body, html { overflow-y: auto; } body::-webkit-scrollbar, html::-webkit-scrollbar { width: 3px; border-radius: 1.5px; } body::-webkit-scrollbar-button, html::-webkit-scrollbar-button { display: none; } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background-color: #eee; } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background-color: #337aff; } /*用来解决在安卓上的点击出现篮框问题*/ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @font-face { font-family: 'num'; src: url('../css/font/GOTHAM-BOLD.eot'); src: url('../css/font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'), url('../css/font/GOTHAM-BOLD.woff') format('woff'), url('../css/font/GOTHAM-BOLD.ttf') format('truetype'), url('../css/font/GOTHAM-BOLD.svg#YourWebFontName') format('svg'); } @font-face { font-family: 'En_light'; src: url('../css/font/MONTSERRAT-REGULAR_0.eot'); src: url('../css/font/MONTSERRAT-REGULAR_0.eot?#iefix') format('embedded-opentype'), url('../css/font/MONTSERRAT-REGULAR_0.woff') format('woff'), url('../css/font/MONTSERRAT-REGULAR_0.ttf') format('truetype'), url('../css/font/MONTSERRAT-REGULAR_0.svg#YourWebFontName') format('svg'); } @font-face { font-family: 'En_bold'; src: url('../css/font/UNI SANS BOLD.eot'); src: url('../css/font/UNI SANS BOLD.eot?#iefix') format('embedded-opentype'), url('../css/font/UNI SANS BOLD.woff') format('woff'), url('../css/font/UNI SANS BOLD.ttf') format('truetype'), url('../css/font/UNI SANS BOLD.svg#YourWebFontName') format('svg'); } a[href], [data-ahref] { cursor: pointer; } a, span, li, b, i, label, p, div, h1, h2, h3, h4, h5, h6, font, small, em { font-size: 0.14rem; /* text-transform:capitalize; */ } p{ text-transform: initial; } strong{ font-size: inherit; } h4 { font-size: 0.26rem; color: #333; font-weight: bold; } h5 { font-size: 0.22rem; color: #333; font-weight: bold; text-align: left; font-family:"Microsoft YaHei", "黑体"; } h6 { font-size: 0.16rem; font-weight: bold; text-align: left; } p { font-size: 0.14rem; line-height: 200%; text-align: left; } .pr { position: relative; } .pa { position: absolute!important; } .row { overflow: hidden; } .row .topTitle { position: relative; text-align: center; font-size: 1.71rem; margin: 60px 0; } .row .topTitle .small { font-size: 1.14rem; margin-top: 10px; text-transform: uppercase; color: #999; display: inline-block; text-align: center; } .row .topTitle:after { content: ""; height: 2px; width: 40px; background-color: #337aff; bottom: -24px; left: calc(50% - 20px); position: absolute; } .row .leftCol { float: left; } .row .rightCol { float: right; } .backImg { background-size: cover!important; background-position: center; } .picBox { overflow: hidden; } .picBox > .backImg { transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); height: 100%; width: 100%; } .picBox:hover > .backImg { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } .cl { clear: both; } .msg { display: table; width: 100%; height: 100%; } .msg .msgContent { display: table-cell; vertical-align: middle; } .msg .msgContent h4 { font-size: 2.5rem; color: #231815; margin-bottom: 30px; position: relative; text-align: left; min-height: 3.2rem; line-height: 3.2rem; padding-top: 1rem; } .msg .msgContent h4:after { content: ''; position: absolute; left: 7px; top: 0; width: 120px; height: 2px; background-color: #b49e8c; transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); } .msg .msgContent h4 .small { font-size: 1rem; display: inline-block; text-transform: uppercase; } .msg .msgContent .active:after { width: 22px; } .msg .msgContent h5 { font-size: 24px; color: #0f0f0f; font-weight: 700; margin-bottom: 30px; height: 72px; } .msg .msgContent p { color: #666; line-height: 25px; font-size: 1rem; margin-bottom: 30px; min-height: 8rem; } .msg .msgContent p > strong { text-transform: uppercase; font-family: num; transform-origin: 0 50%; display: inline-block; width: 136px; text-align: center; height: 120px; line-height: 100px; float: left; font-size: 100px; vertical-align: top; color: #231815; } .msg .msgContent .cl { height: 4rem; line-height: 4rem; } /* 搜索 */ .searchBox { display: inline-block; margin-right: 8px; position: relative; padding-right: 1rem; height: 0.5rem; width: 40%; } .searchBox > input { border: none; border-bottom: 1px solid #cbcbcb; font-size: 0.16rem; width: 100%; height: 0.5rem; background-color: transparent; } .searchBox .searchBtn { right: 0; display: block; top: 0; width: 1rem; height: 0.5rem; cursor: pointer; position: relative; box-sizing: content-box; min-width: 1rem; height: 0.3rem; line-height: 0.3rem; padding: 0.2rem 0.2rem; position: absolute; padding: 0.1rem 0; z-index: 1000; } .searchBox .searchBtn > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.3rem; line-height: 0.3rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } .searchBox .searchBtn:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0deg); -webkit-transform: skew(-8deg, 0deg); -moz-transform: skew(-8deg, 0deg); -o-transform: skew(-8deg, 0deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } .searchBox .searchBtn > a { font-size: 0.18rem; color: #fff!important; font-weight: bold; } .searchBox .searchBtn:after { background-color: #2740bf!important; } .searchBox .searchBtn:hover:after { box-shadow: 0 10px 40px -5px rgba(39, 64, 191, 0.3); } /* 新闻文章列表 */ .layout-articles { border-bottom: 1px solid #eee; } .layout-articles .layout-top { display: inline-block; } .layout-articles .layout-top h4.layout-title { text-align: left; font-weight: bold; font-size: 0.18rem; color: #545454; margin-bottom: 10px; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } .layout-articles .layout-top > small { display: block; font-weight: 500; color: #6a6a6a; font-size: 0.13rem; margin: 0.15rem 0 0.2rem 0; } .layout-articles p { line-height: 150%; font-size: 14px; color: #a6a6a6; } .layout-articles .layout-btm { clear: both; height: 0.45rem; line-height: 0.45rem; padding: 0.3rem 0; position: relative; box-sizing: content-box; } .layout-articles .layout-btm > .btn { background-color: #f0f4f7; color: #6a6a6a; width: 1.25rem; height: 0.45rem; line-height: 0.45rem; text-align: center; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; font-size: 0.13rem; } .layout-articles:not(:last-child) { margin-bottom: 0.7rem; } .btn { transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } .btn > i { font-size: 1.4rem; margin-right: 8px; font-weight: 100; } .small { color: #b4b9bf; font-size: 0.875rem; } .more { display: inline-block; width: 68px; height: 30px; line-height: 30px; } .Thover1 { position: relative; z-index: 5; overflow: hidden; } .Thover1:after { content: ''; position: absolute; top: 50%; left: 50%; margin: auto; width: 3px; height: 3px; border-radius: 50%; opacity: 0; background-color: #fff; z-index: -1; transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1); transform-origin: 50% 50%; } .Thover1:hover:after { opacity: 1; transform: scale(120); -webkit-transform: scale(120); -moz-transform: scale(120); -o-transform: scale(120); background-color: #2640bf; } .bur { -webkit-filter: blur(3px); filter: blur(3px); } #Tbox { transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1); } .anchorBL { display: none; } .lineBox { position: relative; } .lineBox .Sline { position: absolute; top: 0; left: 0; z-index: 2; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); fill: none; stroke: #92989e; pointer-events: none; -webkit-transition: -webkit-transform 0.7s, stroke 0.7s, stroke-width 0.7s; transition: transform 0.7s, stroke 0.7s, stroke-width 0.7s; -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); } .lineBox:hover .Sline { stroke: #fff!important; stroke-width: 2px; -webkit-transform: translate3d(-66.6%, 0, 0); transform: translate3d(-66.6%, 0, 0); } /*曾*1.29*/ input[type=range] { -webkit-appearance: none; width: 300px; background: -webkit-linear-gradient(#059cfa, #059cfa) no-repeat; background-size: 0% 100%; border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 0px; /*将轨道设为圆角的*/ box-shadow: 0 1px 1px #def3f8, inset 0 12px 12px #0d1112; /*轨道内置阴影效果*/ } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 25px; width: 25px; margin-top: -12px; /*使滑块超出轨道部分的偏移量相等*/ background: #69adff; border-radius: 50%; /*外观设置为圆形*/ border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/ box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/ } input[type=range]::-moz-range-progress { background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); height: 13px; border-radius: 10px; } input[type=range]::-ms-track { height: 25px; border-radius: 10px; box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; border-color: transparent; /*去除原有边框*/ color: transparent; /*去除轨道内的竖线*/ } input[type=range]::-ms-thumb { border: solid 0.125em rgba(205, 224, 230, 0.5); height: 25px; width: 25px; border-radius: 50%; background: #ffffff; margin-top: -5px; box-shadow: 0 .125em .125em #3b4547; } input[type=range]::-ms-fill-lower { /*进度条已填充的部分*/ height: 22px; border-radius: 10px; background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); } input[type=range]::-ms-fill-upper { /*进度条未填充的部分*/ height: 22px; border-radius: 10px; background: #ffffff; } input[type=range]:focus::-ms-fill-lower { background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); } input[type=range]:focus::-ms-fill-upper { background: #ffffff; } #bloc { position: relative; } #bloc .mask { position: fixed; background-color: rgba(15, 15, 15, 0.6); width: calc(100% - 258px); height: 100%; top: 0; right: 0; display: none; z-index: -1; } #bloc .myClick { cursor: pointer; } #bloc #header { height: 1rem; background-color: transparent; width: 100%; top: 0; left: 0; position: absolute; box-sizing: border-box; z-index: 5000; margin: auto; right: 0; padding: 0 4%; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #header.active{ height: 0.6rem; } #bloc #header #logo { position: absolute; top: 0; bottom: 0; margin: auto; left: 5%; z-index: 1000; } #bloc #header #logo > img { position: absolute; top: 0; bottom: 0; margin: auto; } #bloc #header #nav { height: 1rem; position: relative; z-index: 1000; float: right; padding-right: 200px; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #header.active #nav{ height: 0.6rem; } #bloc #header #nav .item { width: 100%; overflow: visible; box-sizing: border-box; text-align: center; } #bloc #header #nav .item .navlist { height: 1rem; line-height: 1rem; width: 1rem; float: left; text-align: center; transform-origin: 50% 20%; visibility: hidden; } #bloc #header.active #nav .item .navlist{ height: 0.6rem; line-height: 0.6rem; } #bloc #header #nav .item .navlist > a { text-align: left; display: inline-block; width: 100%; box-sizing: border-box; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); font-size: 0.15rem; position: relative; font-weight: 500; text-align: center; color: rgba(255, 255, 255, 0.5); vertical-align: top; } #bloc #header #nav .item .navlist:hover a { color: #ffffff; } #bloc #header #nav .item .thisNav a { color: #ffffff; font-weight: 700; font-size: 0.15rem; } #bloc #header #nav .otherItem { position: absolute; height: 100%; width: 2rem; overflow: hidden; padding: 0.25rem 0; box-sizing: border-box; right: 0; top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #header.active #nav .otherItem{ padding: 0.05rem 0; } #bloc #header #nav .otherItem > span { display: flex; float: left; width: 40%; height: 0.5rem; justify-content: center; } #bloc #header #nav .otherItem > span > a { display: inline-block; text-align: center; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); font-size: 0.14rem; height: 0.5rem; line-height: 0.5rem; color: rgba(255, 255, 255, 0.5); } #bloc #header #nav .otherItem > span > a:hover { color: #ffffff; } #bloc #header #nav .otherItem > span:nth-child(2) { margin-left: 10%; } #bloc #header #nav .otherItem > span:nth-child(2) > a { width: calc(100%/3); } #bloc #header #nav .otherItem > span:nth-child(1) { margin-left: 5%; margin-right: 5%; } #bloc #header #nav .otherItem > span:nth-child(1) > a { width: 50%; font-size: 0.2rem; } #bloc #header #nav .otherItem > span .active { color: #ffffff; font-weight: bold; } #bloc #header #nav .otherItem:after { content: ''; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0 ; width: 1px; height: 0.2rem; background-color: rgba(255, 255, 255, 0.5); } #bloc #header #nav .childItem { position: absolute; height: 2.4rem; width: 200%; top: 80%; left: 0; display: none; } #bloc #header #nav .childItem .navMask { position: absolute; height: 3.9rem; z-index: -1; width: 1rem; bottom: 0; background-color: rgba(17, 95, 173, 0.37); left: 1rem; } #bloc #header #nav .childItem .childNav { position: absolute; top: 0; left: 1rem; width: 1rem; display: flex; flex-wrap: wrap; align-items: center; } #bloc #header #nav .childItem .childNav > li { display: table; float: left; position: relative; height: 0.32rem; text-align: left; width: 100%; margin-left: 22px; animation-duration: 0.3s; } #bloc #header #nav .childItem .childNav > li > a { display: table-cell; vertical-align: middle; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); font-family: sans-serif; font-size: 0.13rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.5px; } #bloc #header #nav .childItem .childNav > li > a:hover { color: #ffffff; font-weight: bold; } #bloc #header #nav .childItem .childNav:nth-child(2) { left: 2rem; } #bloc #header #nav .childItem .childNav:nth-child(3) { left: 3rem; } #bloc #header #nav .childItem .childNav:nth-child(4) { left: 4rem; } #bloc #header #nav .childItem .childNav:nth-child(4) > li { margin-left: 12px; } #bloc #header #nav .childItem .childNav:nth-child(5) { left: 5rem; } #bloc #header #nav .childItem .language { left: 6rem; width: 2rem; } #bloc #header #nav .childItem .language > li > a { opacity: 0.5; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); font-family: En_light; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } #bloc #header #nav .childItem .language > li > a > img { margin-right: 0.08rem; } #bloc #header #nav .childItem .language > li > a:hover { opacity: 1; color: #fff; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; } #bloc #header #nav .childItem .language > li > a.on { opacity: 1; color: #fff; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; } #bloc #header nav.app-nav { position: fixed; top: 0; right: 0; height: 0.6rem; line-height: 0.6rem; width: 0.5rem; display: none; z-index: 20; } #bloc #header nav.app-nav > ul { display: none; position: absolute; top: 100%; right: 0; border-bottom: 2px solid #d2d2d2; } #bloc #header nav.app-nav > ul > li { width: 100%; line-height: 0.4rem; text-align: center; background-color: rgba(255, 255, 255, 1); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; border-top: 1px solid #eee; font-weight: bold; } #bloc #header nav.app-nav > ul > li > a { display: inline-block; width: 100%; color: rgba(0, 0, 0, 0.7); } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav { padding: 0; overflow: hidden; background-color: rgba(226, 226, 226, 0.7); } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav > li { width: 50%; float: left; text-align: center; line-height: 0.4rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; height: 0; } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav.erwei-down > li{ width: 100%; } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav > li > a { display: inline-block; width: 100%; color: rgba(47, 47, 47, 0.7); height: 0.4rem; line-height: 0.4rem; overflow: hidden; } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav.on > li { height: 0.4rem; } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav.erwei-down.on > li{ height: 150px; width: 100%; } #bloc #header nav.app-nav > ul > li.child-Down > .child-nav.erwei-down > li > a{ height: 150px; padding-top: 8px; } #bloc #header nav.app-nav .getAppNav { font-size: 0.28rem; z-index: 6; position: absolute; width: 100%; height: 100%; margin: auto; right: 0; text-align: center; cursor: pointer; } #bloc #header nav.app-nav .getAppNav > span { position: absolute; width: 0.28rem; height: 2px; background-color: #fff; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 1; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #bloc #header nav.app-nav .getAppNav:after { content: ''; position: absolute; width: 0.28rem; height: 2px; background-color: #fff; top: -16px; bottom: 0; left: 0; right: 0; margin: auto; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #bloc #header nav.app-nav .getAppNav:before { content: ''; position: absolute; width: 0.28rem; height: 2px; background-color: #fff; top: 16px; bottom: 0; left: 0; right: 0; margin: auto; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #bloc #header nav.app-nav .menuActive > span { opacity: 0!important; } #bloc #header nav.app-nav .menuActive:after { transform: rotate(45deg); transform-origin: 50% 50%; top: 0px!important; } #bloc #header nav.app-nav .menuActive:before { transform: rotate(-45deg); transform-origin: 50% 50%; top: 0px!important; } #bloc #header:after { content: ''; position: absolute; width: 100%; height: 1rem; z-index: 15; left: 0; top: 0%; background-color: rgba(0, 0, 0, 0.38); opacity: 1; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform-origin: 50% 0; } #bloc #header.active:after{ height: 0.6rem; } #bloc #header.on:after { opacity: 1; top: 0%; transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); height: 3.2rem; background-color: rgba(0, 0, 0, 0.7); } #bloc #center { position: relative; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main { width: 100%; position: relative; } #bloc #center #main .content { box-sizing: content-box; } #bloc #center #main .content #indexBanner { height: 100%; position: relative; } #bloc #center #main .content #indexBanner nav { position: absolute; top: 0; bottom: 0; right: 8%; margin: auto; width: 50px; z-index: 1000; padding: 0 5px; box-sizing: content-box; visibility: hidden; } #bloc #center #main .content #indexBanner .numChoose { position: absolute; top: 0; bottom: 0; right: 10%; width: 1.2rem; margin: auto; z-index: 1000; height: 1.6rem; } #bloc #center #main .content #indexBanner .numChoose > li { font-size: 0.15rem; color: rgba(255, 255, 255, 0.5); position: relative; text-align: right; padding-right: 0.1rem; height: 0.4rem; line-height: 0.4rem; width: 100%; transition: 0.3s all cubic-bezier(0.27, 0.54, 0.44, 0.85); font-family: num; opacity: 1; cursor: pointer; pointer-events: inherit; } #bloc #center #main .content #indexBanner .numChoose > li:after { content: ""; position: absolute; right: 0; opacity: 0; width: 100%; height: 3px; background-color: #fff; bottom: 0; transition: 7s width cubic-bezier(0.36, 0, 0.59, 0.84); } #bloc #center #main .content #indexBanner .numChoose > li:hover { color: #fff; } #bloc #center #main .content #indexBanner .numChoose .active { color: #fff; } #bloc #center #main .content #indexBanner .numChoose .active:after { opacity: 1; width: 0%; } #bloc #center #main .content #indexBanner .Tmsg { position: absolute; left: 10%; bottom: 15%; z-index: 1000; width: 7rem; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list { display: none; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list > span { font-size: 0.48rem; font-weight: bold; color: #fff; text-shadow: 0 1px 1px #000000; display: block; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list > small { font-size: 0.36rem; color: rgba(255, 255, 255, 0.35); letter-spacing: 5px; text-transform: uppercase; font-family: En_bold; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list.show { display: inline-block; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(2) { font-size: 0.14rem; padding-left: 0.4rem; position: relative; color: #fff; height: 0.28rem; line-height: 0.28rem; margin: 40px 0; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(2):after { content: ''; position: absolute; width: 18px; height: 28px; border-radius: 50px; left: 5px; background-color: #262626; top: -4px; /*-webkit-animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;*/ } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(2):before { content: ""; position: absolute; width: 2px; height: 7px; left: 13px; top: 7px; background-color: #ffffff; border-radius: 50px; z-index: 5; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } @-webkit-keyframes Tmouse { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-5px); } } @keyframes Tmouse { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-8px); } } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(3) { width: 100%; height: 1px; position: relative; background-color: rgba(0, 0, 0, 0.2); margin: 60px 0; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(3):after { content: ""; position: absolute; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.3); bottom: -1px; left: 0; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) { line-height: 34px; position: relative; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > span { font-size: 0.18rem;font-weight: lighter; color: #fff; display: block; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > small { font-size: 0.16rem; color: #fff; font-weight: bold; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore { position: absolute; width: 0.68rem; height: 0.68rem; left: 4rem; border-radius: 50%; line-height: 0.68rem; text-align: center; background-color: rgba(0, 0, 0, 0.5); top: 0; cursor: pointer; display: inline-block; transition-origin: 50% 50%; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore > i { font-size: 0.24rem; color: #fff; } #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore:hover { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } #bloc #center #main .content #indexBanner .go { -webkit-filter: blur(12px); filter: blur(12px); transform: scale(1.2); opacity: 1; -webkit-animation: scaleDownFadeIn 1s forwards ease; animation: scaleDownFadeIn 1s forwards ease; } #bloc #center #main .content .rowMain { max-width: 1200px; margin: auto; overflow: hidden; box-sizing: content-box; position: relative; padding: 0px 5%; z-index: 2000; padding-bottom: 36px; } #bloc #center #main .content .row { margin: auto; padding: 20px 5%; box-sizing: content-box; position: relative; overflow: visible; } #bloc #center #main .content .skew { transform: skew(0, -2.4deg); -webkit-transform: skew(0, -2.4deg); -moz-transform: skew(0, -2.4deg); -o-transform: skew(0, -2.4deg); z-index: 1000; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform-origin: left top; } #bloc #center #main .content .banner { width: 100%; position: relative; } #bloc #center #main .content .banner .Tmsg { position: absolute; left: 20%; z-index: 1000; width: 7rem; bottom: 25%; padding-bottom: 0.2rem; } #bloc #center #main .content .banner .Tmsg:after { content: ''; position: absolute; height: 1px; width: 2.2rem; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); } #bloc #center #main .content .banner .Tmsg > div:nth-child(1) { font-size: 0.14rem; color: #fff; letter-spacing: 10px; height: 0.8rem; line-height: 0.8rem; } #bloc #center #main .content .banner .Tmsg > div:nth-child(2) { font-size: 0.24rem; padding-right: 0.4rem; position: relative; color: #fff; height: 0.28rem; line-height: 0.28rem; text-transform: uppercase; width: 2rem; font-family: En_bold; } #bloc #center #main .content .banner .Tmsg > div:nth-child(2):after { content: ''; position: absolute; width: 18px; height: 28px; border-radius: 50px; right: 5px; background-color: #fff; top: -4px; /*-webkit-animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;*/ } #bloc #center #main .content .banner .Tmsg > div:nth-child(2):before { content: ""; position: absolute; width: 2px; height: 7px; right: 13px; top: 7px; background-color: #262626; border-radius: 50px; z-index: 5; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } #bloc #center #main .content .banner > img { width: 100%; filter: blur(0px); transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .banner > img.go { filter: blur(0px); } #bloc #center #main .content .banner > .buleMask1 { mix-blend-mode: multiply; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); position: absolute; width: 100%; height: 100%; right: 100%; bottom: 0; margin: auto; background-color: #275cfd; z-index: 1000; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); transform-origin: 0 50%; } #bloc #center #main .content .banner > .buleMask1.go { /* right: 64%; */ -webkit-animation: bannergo 2s forwards ease-in-out; animation: bannergo 2s forwards ease-in-out; } @-webkit-keyframes bannergo { 0% { right: 0%; opacity: 1; } 60% { right: -100%; opacity: 1; } 61% { right: 100%; opacity: 0; } 100% { right: 63%; opacity: 1; } } @keyframes bannergo { 0% { right: 100%; opacity: 1; } 60% { right: -100%; opacity: 1; } 60.0001% { right: 100%; opacity: 0; } 100% { right: 63%; opacity: 1; } } #bloc #center #main .content .banner .b_txt { position: absolute; top: -30%; bottom: 0; left: 20%; margin: auto; line-height: 60px; z-index: 1001; /* text-shadow:2px 0 2px rgba(20,35,51,0.2); */ height: 100px; color: transparent; transition: 1.2s all ease-in-out; } #bloc #center #main .content .banner .b_txt > span { font-size: 0.52rem; font-weight: bold; color: #fff; letter-spacing: 25px; text-shadow: 0 1px 1px #000000; display: block; transition: 1.5s all ease-in-out 1.2s; } #bloc #center #main .content .banner .b_txt > small { font-size: 0.28rem; color: #ffffff; letter-spacing: 25px; text-transform: uppercase; letter-spacing: 1px; transition: 1.5s all ease-in-out 1.2s; font-family: En_bold; } #bloc #center #main .content .banner .b_txt > small >p{ font-size: 24px; white-space: nowrap; } #bloc #center #main .content .banner .b_txt > small > em{ color: #ffffff; text-transform: uppercase; letter-spacing: 1px; transition: 1.5s all ease-in-out 1.2s; font-size: 50px; } #bloc #center #main .content .banner .b_txt .picMove { height: 46px; line-height: 46px; margin: 0.3rem 0 1.4rem 0; position: absolute; left: -12px; } #bloc #center #main .content .banner .b_txt .picMove > a { display: table-cell; width: 46px; height: 46px; border-radius: 50%; position: relative; background-color: transparent; line-height: 46px; text-align: center; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); color: rgba(255, 255, 255, 0.5); vertical-align: top; } #bloc #center #main .content .banner .b_txt .picMove > a:hover { color: #ffffff; } #bloc #center #main .content .banner .b_txt .picMove .next:after { content: attr(data-href); position: absolute; left: 100%; height: 100%; width: 200px; text-align: left; text-indent: 0.1rem; font-weight: bold; } #bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4),#bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3) { font-size: 0.14rem; padding-left: 0.4rem; position: relative; color: #fff; height: 0.28rem; line-height: 0.28rem; margin: 40px 0 54px 0; letter-spacing: 8px; padding-bottom: 8px; box-sizing: content-box; border-bottom: 1px solid rgba(255,255,255,0.5); } #bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4):after,#bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3):after { content: ''; position: absolute; width: 18px; height: 28px; border-radius: 50px; left: 5px; background-color: #ffffff; top: -4px; /*-webkit-animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;*/ } #bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4):before,#bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3):before { content: ""; position: absolute; width: 2px; height: 7px; left: 13px; top: 7px; background-color: #262626; border-radius: 50px; z-index: 5; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } #bloc #center #main .content .banner .b_txt.go { filter: blur(0px); } #bloc #center #main .content .banner .b_txt.go > span { letter-spacing: 0; } #bloc #center #main .content .banner .b_txt.go > small { letter-spacing: 0; } #bloc #center #main .content .bannerPro > img.go { } #bloc #center #main .content .bannerPro .b_txt { top: -20%; line-height: 52px; } #bloc #center #main .content .bannerPro .b_txt > label { color: #fff; display: block; font-size: 0.18rem; height: 0.4rem; line-height: 0.6rem; } #bloc #center #main .content .bannerPro .aniBtn { position: absolute; left: 0; right: 0; margin: auto; z-index: 1002; width: 2rem; height: 0.5rem; line-height: 0.5rem; visibility: hidden; bottom: 15%; padding: 6px 6px; box-sizing: content-box; background-color: rgba(255, 255, 255, 0.4); border-radius: 50px; } #bloc #center #main .content .bannerPro .aniBtn > a { display: inline-block; height: 0.5rem; line-height: 0.5rem; position: absolute; background-color: #337aff; width: calc(100% - 12px); left: 6px; top: 6px; color: #fff; text-align: center; border-radius: 50px; font-size: 0.16rem; } #bloc #center #main .content .bannerPro .aniBtn > a.leftbtn { border-bottom-right-radius: 0; border-top-right-radius: 0; } #bloc #center #main .content .bannerPro .aniBtn > a.rightbtn { border-bottom-left-radius: 0; border-top-left-radius: 0; right: 6px; left: auto; } #bloc #center #main .content .bannerPro .aniBtn > a.on { background-color: #39414f; } #bloc #center #main .content .bannerPro .aniBtn:after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50px; top: 0; left: 0; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); border: 1px solid rgba(255, 255, 255, 0.3); z-index: -1; pointer-events: none; animation-delay: 0.5s; animation: anibtn2 2s ease infinite ; } #bloc #center #main .content .bannerPro .aniBtn:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50px; top: 0; left: 0; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); border: 1px solid rgba(255, 255, 255, 0.3); z-index: -1; pointer-events: none; animation: anibtn1 2s ease infinite ; } @-webkit-keyframes anibtn1 { 0% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); opacity: 0; } } @-webkit-keyframes anibtn2 { 0% { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.4); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); opacity: 0; } } #bloc #center #main .content .bannerPro .myvideo { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); pointer-events: none; } #bloc #center #main .content .bannerPro .myvideo.on { visibility: visible; opacity: 1; pointer-events: auto; } #bloc #center #main .content .bannerPro .myvideo video { opacity: 0; pointer-events: none; visibility: hidden; position: absolute; top: 0; left: 0; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .bannerPro .myvideo video.on { visibility: visible; filter: blur(0px); opacity: 1; pointer-events: auto; } #bloc #center #main .content .bannerPro .myvideo .Tmain { width: 100%; height: 100%; } #bloc #center #main .content .bannerPro .myvideo .fenwei { position: absolute; top: 0; width: 100%; left: 0; right: 0; margin: auto; display: none; } #bloc #center #main .content .bannerPro .myvideo .tiaoguang { position: absolute; top: 0; height: 100%; left: 0; right: 0; margin: auto; opacity: 0; } #bloc #center #main .content .bannerPro .myvideo .Vchange { pointer-events: none; } #bloc #center #main .content .bannerPro .myvideo .Vchange.on { pointer-events: auto; } #bloc #center #main .content .bannerPro .myvideo .gere { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } #bloc #center #main .content .bannerPro .myvideo .gere i { color: #fff; font-size: 0.24rem; } #bloc #center #main .content .bannerPro .myvideo .dotItem { text-align: center; width: 100%; } #bloc #center #main .content .bannerPro .myvideo .dotItem > li { width: 24px; height: 24px; border-radius: 50%; display: inline-block; margin: 0 30px; background-color: #000; position: relative; cursor: pointer; } #bloc #center #main .content .bannerPro .myvideo .dotItem > li svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transform: scale(1.8); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); } #bloc #center #main .content .bannerPro .myvideo .dotItem > li svg circle { transform: translate(12px, 12px); -webkit-transform: translate(12px, 12px); -moz-transform: translate(12px, 12px); -o-transform: translate(12px, 12px); fill: transparent; opacity: 0.5; stroke-dasharray: 80px; stroke-dashoffset: 82px; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .bannerPro .myvideo .dotItem > li.on svg circle, #bloc #center #main .content .bannerPro .myvideo .dotItem > li:hover svg circle { stroke-dashoffset: 16px; } #bloc #center #main .content .bannerPro .myvideo .videoTxt { position: absolute; left: 0; right: 0; margin: auto; bottom: 15%; text-align: center; display: none; z-index: 1000; } #bloc #center #main .content .bannerPro .myvideo .videoTxt > font { color: #fff; font-size: 0.4rem; font-weight: bold; } #bloc #center #main .content .bannerPro .myvideo .videoTxt .tiaoguang_p { text-align: center; color: #fff; text-transform: uppercase; font-size: 0.32rem; padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 70px; } #bloc #center #main .content .bannerPro .bannerMask { opacity: 1; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); pointer-events: none; } #bloc #center #main .content .bannerPro .bannerMask.on { opacity: 0; } #bloc #center #main .content .bannerPro .videoList { opacity: 1; } #bloc #center #main .content .bannerPro .videoList.on { opacity: 0; pointer-events: none; visibility: hidden!important; animation: fadeOutDownSmall 1.2s ease; } #bloc #center #main .content .bannerPro .Tboli { z-index: 1001; right: 10%; top: 0; bottom: 0.3rem; margin: auto; height: 4rem; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox { transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -moz-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); position: relative; box-sizing: content-box; min-width: 2rem; height: 0.5rem; line-height: 0.5rem; padding: 0.2rem 0.2rem; padding: 0.3rem 0; margin: 0.3rem 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .bannerPro .Tboli > li.skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.5rem; line-height: 0.5rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -moz-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .bannerPro .Tboli > li.skewBox > a { font-size: 0.16rem; transform: skew(15deg, 0); -webkit-transform: skew(15deg, 0); -moz-transform: skew(15deg, 0); -o-transform: skew(15deg, 0); color: #fff!important; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv { position: absolute; opacity: 0; visibility: hidden; right: 100%; background-color: #fff; top: 0%; width: 2.5rem; padding: 0.2rem 0.4rem; transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div { transform: skew(15deg, 0); -webkit-transform: skew(15deg, 0); -moz-transform: skew(15deg, 0); -o-transform: skew(15deg, 0); line-height: 30px; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div > h5 { margin-bottom: 20px; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div > span { display: block; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv:after { content: ''; position: absolute; width: 5px; height: 100%; left: 0; top: 0; background-color: #255ed3; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox:before { content: ''; position: absolute; z-index: 2; width: 100%; height: 100%; background-color: #337aff; mix-blend-mode: multiply; left: 0; top: 0; opacity: 0; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.14); } #bloc #center #main .content .bannerPro .Tboli > li.skewBox:after { transform: skew(0, 0); -webkit-transform: skew(0, 0); -moz-transform: skew(0, 0); -o-transform: skew(0, 0); background-color: transparent; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox:hover { box-shadow: 0 15px 35px -10px rgba(33, 85, 198, 0.63); } #bloc #center #main .content .bannerPro .Tboli > li.skewBox:hover:before { visibility: visible; opacity: 1; } #bloc #center #main .content .bannerPro .Tboli > li.skewBox:hover .adv { visibility: visible; top: 12%; opacity: 1; } #bloc #center #main .content .p_top { position: relative; } #bloc #center #main .content .p_top .top_nav { display: flex; align-items: flex-end; height: 100px; justify-content: center; max-width: 1200px; margin: auto; padding: 0 5%; box-sizing: content-box; margin-bottom: 30px; } #bloc #center #main .content .p_top .top_nav > li { max-width: 260px; background-color: rgba(0, 74, 179, 0.8); position: relative; overflow: hidden; line-height: 60px; height: 60px; width: 22%; margin: 0 0.5px; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .p_top .top_nav > li:after { content: ''; position: absolute; width: 1px; height: 21px; bottom: -21px; left: calc(50% - 0.5px); transition: 0.5s all cubic-bezier(0.4, 0.46, 0.3, 1.31); z-index: 3; background: url(../img/top_line.png) center no-repeat; } #bloc #center #main .content .p_top .top_nav > li > a { display: inline-block; width: 100%; height: 100%; line-height: 60px; opacity: 0.5; color: #fff; text-align: center; font-size: 18px; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .p_top .top_nav > li:hover { height: 72px; line-height: 50px; background-color: #004ab3; } #bloc #center #main .content .p_top .top_nav > li:hover > a { opacity: 1; font-weight: bold; } #bloc #center #main .content .p_top .top_nav > li:hover:after { bottom: 0; } #bloc #center #main .content .p_top .top_nav .choose { height: 72px; line-height: 50px; background-color: #004ab3; } #bloc #center #main .content .p_top .top_nav .choose > a { opacity: 1; font-weight: bold; } #bloc #center #main .content .p_top .top_nav .choose:after { bottom: 0; } #bloc #center #main .content .p_top:after { content: ''; background-color: #e6e6e6; height: 1px; width: 100%; position: absolute; bottom: 0; } #bloc #center #main .content .p_title { font-size: 24px; font-weight: bold; color: #262626; height: 78px; line-height: 78px; text-align: center; position: relative; margin: 60px 0; letter-spacing: 4px; } #bloc #center #main .content .p_title:after { content: ''; position: absolute; width: 24px; height: 3px; background-color: #cf2b1e; bottom: 12px; left: calc(50% - 12px); } #bloc #center #main .content > small { display: block; text-align: center; font-size: 16px; color: #666; font-weight: 100; line-height: 200%; max-width: 1200px; margin: auto; letter-spacing: 0; margin-top: -20px; } #bloc #center #main .content .mainContent { position: relative; } #bloc #center #main .content .mainContent .nodeItem { position: fixed; right: 5%; top: 0; bottom: 0; margin: auto; width: 0.8rem; z-index: 10000; height: 2.4rem; text-align: right; display: inline-block; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .mainContent .nodeItem.on { opacity: 1; visibility: visible; } #bloc #center #main .content .mainContent .nodeItem > a { display: block; width: 100%; color: #ccc; font-size: 0.14rem; cursor: pointer; font-family: En_bold; height: 0.32rem; line-height: 0.32rem; position: relative; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .mainContent .nodeItem > a:after { content: ""; position: absolute; width: 100%; height: 2px; background-color: #2640bf; bottom: 0px; left: 10px; opacity: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .mainContent .nodeItem > a:before { content: attr(data-title); position: absolute; left: 0; opacity: 0; font-size: 0.12rem; color: #333; width: 100%; text-align: right; font-weight: bold; transform: translateX(-10px); -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); } #bloc #center #main .content .mainContent .nodeItem > a.on, #bloc #center #main .content .mainContent .nodeItem > a:hover { color: rgba(255, 255, 255, 0); } #bloc #center #main .content .mainContent .nodeItem > a.on:after, #bloc #center #main .content .mainContent .nodeItem > a:hover:after { opacity: 1; left: 0; } #bloc #center #main .content .mainContent .nodeItem > a.on:before, #bloc #center #main .content .mainContent .nodeItem > a:hover:before { opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); } #bloc #footer { position: relative; height: 1.2rem; background-color: #1a1a1a; padding: 0.2rem 0 0.35rem 0; box-sizing: content-box; z-index: 1000; } #bloc #footer .skew { transform: skew(0, -2.4deg); -webkit-transform: skew(0, -2.4deg); -moz-transform: skew(0, -2.4deg); -o-transform: skew(0, -2.4deg); z-index: 1000; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform-origin: left top; background-color: #1a1a1a; } #bloc #footer .toTop { position: absolute; height: 0.46rem; line-height: 0.43rem; width: 0.46rem; border-radius: 50%; top: -0.5rem; left: 0; right: 0; margin: auto; box-shadow: 0 2px 2px rgba(255, 255, 255, 0.9); text-align: center; background: rgba(0, 0, 0, 0.9); /* 一些不支持背景渐变的浏览器 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)); background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.3))); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)); z-index: 10000; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } #bloc #footer .toTop > i { color: #fff; font-size: 0.3rem; } #bloc #footer .rowMain { position: relative; z-index: 1002; } #bloc #footer .rowMain > div { height: 0.4rem; text-align: center; } #bloc #footer .rowMain > div > span { display: inline-block; text-align: center; font-size: 0.16rem; height: 100%; vertical-align: top; line-height: 0.4rem; } #bloc #footer .rowMain > div > span > i { display: inline-block; vertical-align: top; color: #fff; font-size: 0.22rem; padding: 0 0.15rem; } #bloc #footer .rowMain > div > span > a { font-size: 0.16rem; display: inline-block; vertical-align: top; } #bloc #pop { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; z-index: 10005; } #bloc #pop .propop { position: absolute; top: 0; bottom: 0%; left: 0; right: 0; margin: auto; display: none; } #bloc #pop .propop > img { max-width: 100%; } #bloc #pop .propop > ul { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: flex; justify-content: center; } #bloc #pop .propop > ul > li { display: inline-block; width: 16%; border-radius: 5px; background-color: #eee; margin: 0 0.5%; margin-top: 24.5%; opacity: 0; } #bloc #pop .propop > ul > li > a { display: inline-block; width: 100%; height: 100%; } #bloc #pop .propop.on { display: block; } /*end*/ #index .row .rowMain { padding: 0px 5%; z-index: 2000; padding-bottom: 36px; } #index .row .rowMain .r_top .title { text-align: right; transform: scale(1.2) translateY(20px); -webkit-transform: scale(1.2) translateY(20px); -moz-transform: scale(1.2) translateY(20px); -o-transform: scale(1.2) translateY(20px); transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1); filter: blur(3px); padding-bottom: 10px; position: relative; overflow: hidden; opacity: 0; transform-origin: 90% 50%; } #index .row .rowMain .r_top .title span { font-size: 0.36rem; color: #000; display: block; } #index .row .rowMain .r_top .title small { font-size: 0.32rem; color: #d9d9d9; text-transform: uppercase; text-shadow: 0px -1px 0px #9e9e9e; font-family: En_bold; } #index .row .rowMain .r_top .title:after { content: ""; width: 450px; height: 1px; background-color: rgba(0, 0, 0, 0.2); bottom: 0; right: 0; position: absolute; } #index .row .rowMain .r_top .title.go { transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); opacity: 1; filter: blur(0px); } #index .r1 { overflow: hidden!important; } #index .r1 .skew { background-color: #fff; } #index .r1 .skew > img { position: absolute; bottom: -1.5rem; left: 0; transform-origin: 0% 100%; } #index .r1 .skew > img.go { -webkit-animation: homebg 4s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; -o-animation: homebg 4s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: homebg 4s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } @keyframes homebg { 0% { -webkit-transform: rotateZ(1deg) scaleY(0.9); -moz-transform: rotateZ(1deg) scaleY(0.9); -ms-transform: rotateZ(1deg) scaleY(0.9); -o-transform: rotateZ(1deg) scaleY(0.9); transform: rotateZ(1deg) scaleY(0.9); } 100% { -webkit-transform: rotate(0deg) scaleY(1); -moz-transform: rotate(0deg) scaleY(1); -ms-transform: rotate(0deg) scaleY(1); -o-transform: rotate(0deg) scaleY(1); transform: rotate(0deg) scaleY(1); } } #index .r1 .r_center { position: relative; margin: 80px 0 30px 0; } #index .r1 .r_center .picBox { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 48%; box-shadow: 0 17px 54px rgba(0, 0, 0, 0.22); } #index .r1 .r_center .newItem { width: 46%; margin-left: 54%; height: 550px; } #index .r1 .r_center .newItem > li { overflow: hidden; height: 65px; cursor: pointer; opacity: 0; filter: blur(3px); transform: scale(1.2) translateY(40px); -webkit-transform: scale(1.2) translateY(40px); -moz-transform: scale(1.2) translateY(40px); -o-transform: scale(1.2) translateY(40px); transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); } #index .r1 .r_center .newItem > li span { font-size: 0.18rem; color: #545454; display: block; margin-bottom: 5px; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); } #index .r1 .r_center .newItem > li small { font-size: 0.16rem; color: #8c8c8c; font-family: En_bold; font-weight: 500; opacity: 0.5; } #index .r1 .r_center .newItem > li .Tmsg { font-size: 0.14rem; color: #a6a6a6; display: none; line-height: 24px; } #index .r1 .r_center .newItem > li .active { display: block; } #index .r1 .r_center .newItem > li:not(:last-child) { margin-bottom: 36px; } #index .r1 .r_center .newItem > li:hover span { color: #337aff; } #index .r1 .r_center .newItem > li.go { transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); opacity: 1; filter: blur(0px); } #index .r1 .r_btm { margin: 30px 0; padding: 30px 0; } #index .r1 .r_btm .btnBox { position: relative; height: 0.5rem; box-sizing: content-box; width: 2.2rem; margin: 30px auto; } #index .r1 .r_btm .btnBox > .btn { font-size: 0.16rem; color: #abb3b9; text-align: center; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); width: 2.2rem; height: 0.5rem; background-color: transparent; line-height: 0.5rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #index .r1 .r_btm .btnBox:after { content: ''; position: absolute; width: 2.2rem; height: 0.5rem; left: 0; right: 0; margin: auto; background-color: #f0f4f7; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); } #index .r1 .r_btm .btnBox canvas { z-index: 3!important; background-color: #f0f4f7!important; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #index .r1 .r_btm .btnBox:hover > .btn { color: #fff; } #index .r1 .r_btm .btnBox:hover:after { box-shadow: 0 6px 24px -2px rgba(42, 105, 220, 0.31); } #index .r2 .skew { overflow: hidden; } #index .r2 .skew .buleMask1 { position: absolute; width: 50%; height: 100%; left: 0; top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #index .r2 .skew .buleMask2 { mix-blend-mode: multiply; transform-origin: 100% 50%; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); position: absolute; width: 100%; height: 100%; right: 50%; top: 0; bottom: 0; margin: auto; background-color: #275cfd; z-index: 10000; } #index .r2 .skew .picItem { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; overflow: visible; z-index: 999; opacity: 0; } #index .r2 .skew .current { opacity: 1; z-index: 1000; } #index .r2 .skew .maskMove1 { right: 0%; transition: all 0.3s ease-in-out; } #index .r2 .skew .maskMove2 { -webkit-animation: maskmove 1s forwards ease-in-out; animation: maskmove 1s forwards ease-in-out; } #index .r2 .skew .maskMove3 { -webkit-animation: maskmove2 0.5s forwards ease-in-out; animation: maskmove2 0.5s forwards ease-in-out; } @-webkit-keyframes maskmove { 0% { right: 0; height: 100%; } 99% { right: -100%; height: 100%; } 99.99% { right: -100%; height: 0%; } 100% { right: 100%; height: 100%; } } @keyframes maskmove { 0% { right: 0; height: 100%; } 99% { right: -100%; height: 100%; } 99.99% { right: -100%; height: 0%; } 100% { right: 100%; height: 100%; } } @-webkit-keyframes maskmove2 { 0% { right: 100%; height: 100%; } 100% { right: 50%; height: 100%; } } @keyframes maskmove2 { 0% { right: 100%; height: 100%; } 100% { right: 50%; height: 100%; } } #index .r2 .rowMain .half { display: inline-block; position: absolute; top: 0; bottom: 0; margin: auto; height: 200px; transform-origin: 50% 0%; transform: scale(1.2) translateY(100px); -webkit-transform: scale(1.2) translateY(100px); -moz-transform: scale(1.2) translateY(100px); -o-transform: scale(1.2) translateY(100px); opacity: 0; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); filter: blur(3px); } #index .r2 .rowMain .half > div:nth-child(1) h4 { display: none; position: relative; line-height: 54px; } #index .r2 .rowMain .half > div:nth-child(1) h4 > span { font-size: 0.36rem; color: #fff; display: block; transform-origin: 50% 0%; text-transform: none; filter: blur(3px); transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); } #index .r2 .rowMain .half > div:nth-child(1) h4 > small { font-family: En_bold; font-size: 0.32rem; color: #fff; display: inline-block; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; } #index .r2 .rowMain .half > div:nth-child(1) h4:after { content: ''; height: 1px; width: 100%; background-color: #fff; opacity: 0.3; bottom: 0; left: 0; position: absolute; } #index .r2 .rowMain .half > div:nth-child(1) h4.show { display: inline-block; } #index .r2 .rowMain .half > div:nth-child(1) h4.show > span { font-size: 0.36rem; color: #fff; display: block; filter: blur(0px); } #index .r2 .rowMain .half > div:nth-child(1) h4.show > small { font-size: 0.18rem; color: #fff; text-transform: uppercase; font-weight: 300; letter-spacing: 2px; } #index .r2 .rowMain .half .picMove { height: 46px; line-height: 46px; margin: 0.3rem 0 1.4rem 0; } #index .r2 .rowMain .half .picMove > a { display: inline-block; width: 46px; height: 46px; border-radius: 50%; background-color: transparent; line-height: 46px; text-align: center; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); color: #fff; vertical-align: top; } #index .r2 .rowMain .half .picMove > a:hover { background-color: #262626; } #index .r2 .rowMain .half .picMove .active { background-color: #262626; } #index .r2 .rowMain .half p { font-size: 0.2rem; color: #fff; line-height: 200%; position: relative; display: none; transition: all 0.5s ease; } #index .r2 .rowMain .half p:after { content: ""; position: absolute; height: 1px; width: 120%; left: 0; bottom: -10px; background-color: #fff; } #index .r2 .rowMain .half p.show { display: inline-block; -webkit-animation: pmove 1.2s forwards ease-in-out; animation: pmove 1.2s forwards ease-in-out; } @keyframes pmove { 0% { opacity: 0; transform-origin: 50% 0%; filter: blur(3px); transform: scale(1.2) translateY(100px); -webkit-transform: scale(1.2) translateY(100px); -moz-transform: scale(1.2) translateY(100px); -o-transform: scale(1.2) translateY(100px); } 100% { opacity: 1; transform-origin: 50% 0%; filter: blur(0px); transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); } } #index .r2 .rowMain .half.go { transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); opacity: 1; filter: blur(0px); } #index .r3 #scene { width: 100%; height: 500px; z-index: 1; position: absolute; left: 0; bottom: 0; } #index .r3 .canvas-box { width: 100%; height: 500px; z-index: 1; position: absolute; left: 0; bottom: 0; } #index .r3 .r_center { position: relative; } #index .r3 .r_center #cv { position: absolute; z-index: 1001; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); opacity: 1; } #index .r3 .r_center .proItem { display: flex; justify-content: space-between; align-items: flex-start; margin: 0.7rem 0 0.3rem 0; position: relative; z-index: 1005; } #index .r3 .r_center .proItem > .proList { padding-top: 45px; position: relative; min-width: 1.6rem; cursor: pointer; } #index .r3 .r_center .proItem > .proList:after { content: attr(data-name); position: absolute; top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); left: 19px; font-size: 0.2rem; font-weight: bold; color: #333; } #index .r3 .r_center .proItem > .proList > li { padding-left: 20px; font-size: 0.14rem; position: relative; height: 0.25rem; line-height: 0.25rem; color: #999; } #index .r3 .r_center .proItem > .proList > li > a { display: inline-block; width: 100%; font-size: 0.14rem; color: #999; height: 0.25rem; line-height: 0.25rem; } #index .r3 .r_center .proItem > .proList > li > a:hover { color: #337aff; } #index .r3 .r_center .proItem > .proList > li:after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; left: 4px; top: 10px; background-color: #337aff; } #index .r3 .r_center .proItem > .proList:hover:after { color: #337aff; } #index .r3 .r_center .proItem .proList.active:after { color: #337aff; } #index .r3 .r_center .imgBox { margin: 0.6rem 0 0rem 0; } #index .r3 .r_center .imgBox .carItem > li { text-align: center; position: relative; min-height: 400px; } #index .r3 .r_center .imgBox .carItem > li .carMask0 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: visible; opacity: 1; } #index .r3 .r_center .imgBox .carItem > li .carMask1 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #index .r3 .r_center .imgBox .carItem > li .carMask2 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #index .r3 .r_center .imgBox .carItem > li .carMask3 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #index .r3 .r_center .imgBox .carItem > li .carMask4 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #index .r3 .r_center .imgBox .carItem > li .carscreen0.c1_1 { top: 32px; left: -19px; } #index .r3 .r_center .imgBox .carItem > li .carscreen0.c1_2 { left: -30px; top: 30px; } #index .r3 .r_center .imgBox .carItem > li .carscreen0.c1_2.active { left: -80px; top: 2px; } #index .r3 .r_center .imgBox .carItem > li .carscreen1.c1_1 { top: 61px; left: -328px; } #index .r3 .r_center .imgBox .carItem > li .carscreen1.c1_2 { left: -345px; top: 61px; } #index .r3 .r_center .imgBox .carItem > li .carscreen1.c1_2.active { left: -418px; top: 32px; } #index .r3 .r_center .imgBox .carItem > li .carscreen2.c1_1 { top: 24px; left: -157px; } #index .r3 .r_center .imgBox .carItem > li .carscreen2.c1_2 { top: 25px; left: -176px; } #index .r3 .r_center .imgBox .carItem > li .carscreen2.c1_2.active { top: 0px; left: -246px; } #index .r3 .r_center .imgBox .carItem > li .carscreen3.c1_1 { top: 24px; left: -72px; } #index .r3 .r_center .imgBox .carItem > li .carscreen3.c1_2 { top: 24px; left: -72px; } #index .r3 .r_center .imgBox .carItem > li .carscreen3.c1_2.active { top: 0px; left: -91px; } #index .r3 .r_center .imgBox .carItem > li .carscreen4.c1_1 { top: 82px; left: 0px; } #index .r3 .r_center .imgBox .carItem > li .carscreen4.c1_2 { top: 82px; left: 0px; } #index .r3 .r_center .imgBox .carItem > li .carscreen4.c1_2.active { top: 82px; left: 78px; } #index .r3 .r_center .imgBox .carItem > li .car { display: none; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); opacity: 1; position: absolute; left: 0; right: 0; margin: auto; top: 0; } #index .r3 .r_center .imgBox .carItem > li .car.show { display: inline-block; opacity: 1; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); } #index .r3 .r_center .imgBox .carItem > li .moveOut { transform: rotateY(30deg) !important; -webkit-transform: rotateY(30deg) !important; -moz-transform: rotateY(30deg) !important; -o-transform: rotateY(30deg) !important; opacity: 0!important; } #index .r3 .r_center .imgBox .carItem > li .moveIn { transform: rotateY(-30deg); -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); -o-transform: rotateY(-30deg); display: inline-block; opacity: 0; } #contact .skew { background-color: #fff; } #contact .row .r_top { position: relative; height: 0.6rem; line-height: 0.6rem; } #contact .row .r_top .title { float: right; font-size: 0.2rem; height: 0.6rem; line-height: 0.6rem; position: relative; padding-left: 0.4rem; font-weight: bold; letter-spacing: 7px; } #contact .row .r_top .title:after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; right: 0; background-color: #2640bf; } #contact .row .r_center .Tbox .top { font-size: 0.32rem; font-weight: bold; position: relative; height: 0.8rem; line-height: 0.8rem; margin-bottom: 0.4rem; } #contact .row .r_center .Tbox.box1 .center { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } #contact .row .r_center .Tbox.box1 .center > ul.item { padding-top: 0.5rem; position: relative; min-width: 3.4rem; display: inline-block; float: left; margin-right: 2rem; margin-bottom: 1rem; } #contact .row .r_center .Tbox.box1 .center > ul.item > li { padding-left: 0.4rem; font-size: 0.14rem; height: 0.4rem; line-height: 0.4rem; position: relative; } #contact .row .r_center .Tbox.box1 .center > ul.item > li > b { font-size: 0.14rem; color: #262626; } #contact .row .r_center .Tbox.box1 .center > ul.item > li > i { display: inline-block; position: absolute; font-size: 0.2rem; left: 0; top: 0; color: #2640bf; } #contact .row .r_center .Tbox.box1 .center > ul.item:after { content: attr(data-title); position: absolute; width: 100%; top: 0; left: 0.4rem; font-size: 0.2rem; font-weight: bold; color: #545454; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #contact .row .r_center .Tbox.box1 .center > ul.item:before { content: ''; position: absolute; width: 100%; top: 32px; left: 0; height: 1px; background-color: #8e8e8e; } #contact .row .r_center .Tbox.box1 .center > ul.item.go:after { left: 0; } #contact .row .r_center .Tbox.box2 .center ul.partTop { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 0.8rem; } #contact .row .r_center .Tbox.box2 .center ul.partTop > li { display: inline-block; position: relative; float: left; width: 24%; font-size: 0.2rem; color: rgba(0, 0, 0, 0.5); height: 0.6rem; line-height: 0.7rem; font-weight: bold; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); overflow: hidden; } #contact .row .r_center .Tbox.box2 .center ul.partTop > li .Sline { position: absolute; top: 0; left: 0; z-index: 2; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); fill: none; stroke: #92989e; pointer-events: none; -webkit-transition: -webkit-transform 0.7s, stroke 0.7s, stroke-width 0.7s; transition: transform 0.7s, stroke 0.7s, stroke-width 0.7s; -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); } #contact .row .r_center .Tbox.box2 .center ul.partTop > li:hover { color: #2640bf; line-height: 0.5rem; } #contact .row .r_center .Tbox.box2 .center ul.partTop > li:hover .Sline { stroke: #2640bf; stroke-width: 2px; -webkit-transform: translate3d(-66.6%, 0, 0); transform: translate3d(-66.6%, 0, 0); } #contact .row .r_center .Tbox.box2 .center ul.partTop > li.on { color: #2640bf; line-height: 0.5rem; } #contact .row .r_center .Tbox.box2 .center ul.partTop > li.on .Sline { stroke: #2640bf; stroke-width: 2px; -webkit-transform: translate3d(-66.6%, 0, 0); transform: translate3d(-66.6%, 0, 0); } #contact .row .r_center .Tbox.box2 .center .part .cutList { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; display: none; } #contact .row .r_center .Tbox.box2 .center .part .cutList > li { width: 50%; display: inline-block; float: left; margin-bottom: 0.5rem; } #contact .row .r_center .Tbox.box2 .center .part .cutList > li > b { font-size: 0.2rem; display: inline-block; margin-bottom: 0.1rem; } #contact .row .r_center .Tbox.box2 .center .part .cutList > li > a { display: block; padding-left: 0.3rem; font-size: 0.14rem; position: relative; height: 0.3rem; line-height: 0.3rem; } #contact .row .r_center .Tbox.box2 .center .part .cutList > li > a > i { display: inline-block; color: #2640bf; font-size: 0.2rem; position: absolute; left: 0; top: 0; } #contact .row .r_center .Tbox.box2 .center .part .cutList.on { display: block; } #new .row .skew { background-color: #fff; } #new .row .rowMain .r_top { padding-top: 18px; } #new .row .rowMain .r_top .mNav { display: flex; justify-content: center; align-items: center; } #new .row .rowMain .r_top .mNav > li.skewBox { position: relative; box-sizing: content-box; min-width: 2rem; height: 0.5rem; line-height: 0.5rem; padding: 0.2rem 0.2rem; padding: 0.1rem 0; } #new .row .rowMain .r_top .mNav > li.skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.5rem; line-height: 0.5rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #new .row .rowMain .r_top .mNav > li.skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0deg); -webkit-transform: skew(-8deg, 0deg); -moz-transform: skew(-8deg, 0deg); -o-transform: skew(-8deg, 0deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .row .rowMain .r_top .mNav > li.skewBox > a { font-size: 0.16rem; color: #a8a8a8; } #new .row .rowMain .r_top .mNav li.active > a { color: #fff!important; font-weight: bolder; } #new .row .rowMain .r_top .mNav li.active:after { background-color: #2740bf!important; box-shadow: 0 10px 43px -3px rgba(39, 64, 191, 0.28); transform-origin: 50% 50%; transform: skew(-8deg, 0) scaleY(1.2); -webkit-transform: skew(-8deg, 0) scaleY(1.2); -moz-transform: skew(-8deg, 0) scaleY(1.2); -o-transform: skew(-8deg, 0) scaleY(1.2); } #new .row .rowMain .r_top .comBox { margin: 1rem 0 1.8rem 0; display: flex; justify-content: space-around; align-items: center; } #new .row .rowMain .r_top .comBox .dateBox { width: 480px; display: inline-block; } #new .row .rowMain .r_top .comBox .dateBox > span { font-size: 0.16rem; display: inline-block; float: left; height: 0.5rem; line-height: 0.5rem; margin: 0 0.2rem; } #new .row .rowMain .r_top .comBox .dateBox .skewBox { display: inline-block; float: left; position: relative; box-sizing: content-box; min-width: 1.7rem; height: 0.1rem; line-height: 0.1rem; padding: 0.2rem 0.2rem; } #new .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.1rem; line-height: 0.1rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #new .row .rowMain .r_top .comBox .dateBox .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .row .rowMain .r_top .comBox .dateBox .skewBox > input { background-color: transparent; border: none; width: 100%; color: #959595; font-size: 0.14rem; height: 0.4rem; line-height: 0.4rem; position: absolute; cursor: pointer; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding-right: 0.4rem; z-index: 100; } #new .row .rowMain .r_top .comBox .dateBox .skewBox > i { position: absolute; right: 0.14rem; top: 0; bottom: 0; margin: auto; height: 0.26rem; line-height: 0.26rem; display: inline-block; font-size: 0.26rem; color: #a6a6a6; z-index: 10; } #new .row .rowMain .r_top .title { margin: 0.4rem 0; margin-bottom: 1rem; } #new .row .rowMain .r_top .title > span { display: inline-block; font-size: 0.32rem; color: #333; font-weight: bold; visibility: hidden; animation-duration: 0.8s; } #new .row .rowMain .r_top .title > small { font-size: 0.14rem; display: block; margin: 0.1rem 0; color: #808080; } #new .row .rowMain .r_btm { margin: 30px 0; } #new .row .rowMain .r_btm .btnBox { position: relative; height: 0.5rem; padding: 30px 0; box-sizing: content-box; } #new .row .rowMain .r_btm .btnBox > .btn { font-size: 0.16rem; color: #abb3b9; text-align: center; color: #333; width: 2.2rem; height: 0.5rem; background-color: transparent; line-height: 0.5rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #new .row .rowMain .r_btm .btnBox:after { content: ''; position: absolute; width: 2.2rem; height: 0.5rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #new .r1 { position: relative; display: table; width: 100%; } #new .r1 .newBox { display: table-cell; vertical-align: middle; } #new .r1 .newBox .title { font-size: 0.28rem; color: #fff; font-weight: bold; margin: auto; margin-bottom: 0.4rem; width: 68%; } #new .r1 .newBox > .Tbox { width: 68%; margin: auto; } #new .r1 .newBox > .Tbox .newMove { position: relative; width: 100%; padding-right: 30%; box-sizing: border-box; } #new .r1 .newBox > .Tbox .newMove > img { width: 100%; } #new .r1 .newBox > .Tbox .newMove > .Tmsg { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.6); width: 70%; padding: 0.2rem; left: 0; } #new .r1 .newBox > .Tbox .newMove > .Tmsg > h6 { color: #ffffff; margin-bottom: 0.16rem; } #new .r1 .newBox > .Tbox .newMove > .Tmsg > p { font-size: 0.12rem; color: rgba(255, 255, 255, 0.6); line-height: 160%; } #new .r1 .newBox > .Tbox .newMove > .Tmsg > .date { top: 0.2rem; right: 0.2rem; font-size: 0.14rem; font-weight: bold; color: #fff; } #new .r1 .newBox > .Tbox .newMove > .Tmsg > .date > i { color: #fff; font-size: 0.18rem; } #new .r1 .newBox > .Tbox .newMove > ul.videoItem { width: 30%; position: absolute; right: 0; top: 0; height: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; } #new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList { width: 88%; position: relative; display: inline-block; float: right; } #new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList .Tmsg { font-size: 0.14rem; color: #fff; text-align: center; position: absolute; bottom: 0; left: 0; height: 0.34rem; line-height: 0.34rem; background-color: rgba(0, 0, 0, 0.6); width: 100%; } #new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList .Tplay { position: absolute; height: 32px; width: 32px; border-radius: 50%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 32px; text-align: center; border: 2px solid #fff; opacity: 0.8; cursor: pointer; } #new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList .Tplay > i { font-size: 0.2rem; color: #fff; display: inline-block; } #new .r1 .newBox > .Tbox .newSet { height: 0.32rem; text-align: center; margin-top: 0.3rem; } #new .r1 .newBox > .Tbox .newSet > i { color: #fff; display: inline-block; vertical-align: top; height: 100%; width: 0.32rem; } #new .r1 .newBox > .Tbox .newSet > span { font-size: 0.15rem; font-family: En_bold; color: rgba(115, 133, 222, 0.7); display: inline-block; vertical-align: top; height: 100%; } #new .r1 .newBox > .Tbox .newSet > span > b { font-size: 0.2rem; font-family: En_bold; letter-spacing: 2px; color: #fff; } #new .r2 .rowMain .r_top .title { position: relative; } #new .r2 .rowMain .r_top .title .title_item { display: flex; justify-content: flex-start; align-items: center; position: absolute; left: 1.5rem; top: 0; height: 100%; padding-left: 0.8rem; } #new .r2 .rowMain .r_top .title .title_item > i { position: absolute; display: inline-block; font-size: 0.32rem; left: 0.1rem; top: 0; bottom: 0; margin: auto; text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19); } #new .r2 .rowMain .r_top .hot { position: absolute; left: 2rem; top: 0; width: calc(100% - 3rem); padding-left: 0.8rem; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; } #new .r2 .rowMain .r_top .hot:after { content: attr(data-msg); position: absolute; top: 15px; left: 0; font-size: 0.14rem; color: #333333; } #new .r2 .rowMain .r_top .hot .skewBox { position: relative; box-sizing: content-box; min-width: 0.6rem; height: 0rem; line-height: 0rem; padding: 0.2rem 0.2rem; display: inline-block; float: left; margin: 0.1rem 5px; padding: 0.18rem 0.16rem; } #new .r2 .rowMain .r_top .hot .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0rem; line-height: 0rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #new .r2 .rowMain .r_top .hot .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-13deg, 0); -webkit-transform: skew(-13deg, 0); -moz-transform: skew(-13deg, 0); -o-transform: skew(-13deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r2 .rowMain .r_top .hot .skewBox > a { color: #8198c2!important; font-size: 0.14rem !important; } #new .r2 .rowMain .r_top .hot .skewBox:after { background-color: #e8ebf0; } #new .r2 .rowMain .r_center .Tbox { padding: 0.4rem 2.6rem 0.4rem 2.7rem ; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); cursor: pointer; } #new .r2 .rowMain .r_center .Tbox > img { position: absolute; width: 1.7rem; bottom: 0; top: 0; left: 0.5rem; margin: auto; } #new .r2 .rowMain .r_center .Tbox .layout-articles { margin-bottom: 0; border: none; } #new .r2 .rowMain .r_center .Tbox .layout-articles p { height: 0.42rem; overflow: hidden; } #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm { padding: 10px 0 0 0; } #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox { position: relative; box-sizing: content-box; min-width: 0.6rem; height: 0rem; line-height: 0rem; padding: 0.2rem 0.2rem; display: inline-block; float: left; margin: 0rem 5px; padding: 0.18rem 0.16rem; } #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0rem; line-height: 0rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-13deg, 0); -webkit-transform: skew(-13deg, 0); -moz-transform: skew(-13deg, 0); -o-transform: skew(-13deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox > a { color: #8198c2!important; font-size: 0.14rem !important; } #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox:after { background-color: #e8ebf0; } #new .r2 .rowMain .r_center .Tbox .Tmsg { width: 1.6rem; height: 1.15rem; bottom: 0; top: 0; right: 0.5rem; margin: auto; background-color: #f3f3f3; padding: 0.2rem 0.32rem; overflow: hidden; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r2 .rowMain .r_center .Tbox .Tmsg > span { text-align: center; color: #b0b0b0; font-family: En_light; display: inline-block; font-size: 0.14rem; width: 100%; height: 0.38rem; line-height: 0.38rem; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); position: relative; z-index: 10; } #new .r2 .rowMain .r_center .Tbox .Tmsg > span:first-child { border-bottom: 1px solid #dcdcdc; } #new .r2 .rowMain .r_center .Tbox .Tmsg > span > i { font-size: 0.18rem; color: #b0b0b0; display: inline-block; vertical-align: top; margin-right: 7px; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r2 .rowMain .r_center .Tbox .Tmsg:after { content: ''; width: 1px; height: 1px; border-radius: 50%; position: absolute; top: 0.76rem; left: 0.61rem; margin: auto; background-color: #b0b0b0; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); z-index: 2; } #new .r2 .rowMain .r_center .Tbox:hover { box-shadow: 0 15px 16px -3px rgba(0, 0, 0, 0.08); } #new .r2 .rowMain .r_center .Tbox:hover .layout-title { color: #2640bf; } #new .r2 .rowMain .r_center .Tbox:hover .Tmsg span { color: #fff; } #new .r2 .rowMain .r_center .Tbox:hover .Tmsg span > i { color: #fff; } #new .r2 .rowMain .r_center .Tbox:hover .Tmsg:after { transform: scale(250); -webkit-transform: scale(250); -moz-transform: scale(250); -o-transform: scale(250); background-color: #2640bf; } #new .r3 .skew { background-color: #f0f4f7; } #new .r3 .rowMain .r_top .title { position: relative; } #new .r3 .rowMain .r_top .title .title_item { display: flex; justify-content: flex-start; align-items: center; position: absolute; left: 1.5rem; top: 0; height: 100%; padding-left: 0.8rem; } #new .r3 .rowMain .r_top .title .title_item > i { position: absolute; display: inline-block; font-size: 0.32rem; left: 0.1rem; top: 0; bottom: 0; margin: auto; text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19); line-height: 100%; } #new .r3 .rowMain .r_top .title .title_item > li { display: table; float: left; height: 100%; padding: 0 12px; margin: 0 12px; position: relative; z-index: 10; visibility: hidden; } #new .r3 .rowMain .r_top .title .title_item > li > a { font-size: 0.2rem; display: table-cell; vertical-align: middle; font-weight: 500; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); position: relative; background-color: transparent; z-index: 100; } #new .r3 .rowMain .r_top .title .title_item > li:after { content: attr(data-num); position: absolute; color: #cbccce; font-size: 0.4rem; font-family: En_bold; z-index: -1; left: 0; right: 0; margin: auto; width: 0.5rem; top: -0.64rem; letter-spacing: 20px; transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); filter: blur(5px); opacity: 0; transform-origin: 50% 50%; } #new .r3 .rowMain .r_top .title .title_item > li:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r3 .rowMain .r_top .title .title_item > li.active > a, #new .r3 .rowMain .r_top .title .title_item > li:hover > a { color: #fff; background-color: #2640bf; } #new .r3 .rowMain .r_top .title .title_item > li.active:before, #new .r3 .rowMain .r_top .title .title_item > li:hover:before { background-color: #2640bf; } #new .r3 .rowMain .r_top .title .title_item > li.active:after, #new .r3 .rowMain .r_top .title .title_item > li:hover:after { top: -0.32rem; letter-spacing: 2px; filter: blur(0px); opacity: 1; } #new .r3 .rowMain .r_center { position: relative; } #new .r3 .rowMain .r_center .prolist1 { width: 100%; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo { display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li { display: inline-block; float: left; margin: 0 0.12rem; width: 22%; margin-bottom: 0.24rem; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.46); position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book{ position: relative; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg{ position: absolute; bottom: -0.6rem; left: 0; background-color: #184156; height: 0.6rem; line-height: 0.6rem; width: 100%; z-index: 1; transition: all 0.8s cubic-bezier(0.76, 0.01, 0.05, 1.56); } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book:hover > .Tmsg{ bottom: 0; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span{ display: inline-block; position: relative; height: 0.6rem; line-height: 0.6rem; color: #fff; font-size: 0.15rem; width: 50%; float: left; text-align: center; cursor: pointer; z-index: 3; overflow: hidden; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span:after{ content: ''; width: 1px; height: 1px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin: auto; background-color: transparent; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); transform-origin: 50% 50%; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); z-index: -1; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span:hover:after{ transform: scale(200); -webkit-transform: scale(200); -moz-transform: scale(200); -o-transform: scale(200); background-color: #2640bf; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span > i{ margin-right: 8px; display: inline-block; height: 0.6rem; line-height: 0.6rem; color: #fff; font-size: 0.18rem; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book:after{ content: ''; position: absolute; width: 100%; height: 0; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); background-color: rgba(0, 0, 0, 0.5); } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book:hover:after{ height: 100%; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox:hover { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox:hover .date { background-color: #2640bf; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date { position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); height: 0.3rem; line-height: 0.3rem; width: 100%; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date > span { color: #fff; padding: 0 0.1rem; font-size: 0.12rem; display: inline-block; vertical-align: middle; height: 100%; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date > span > i { display: inline-block; vertical-align: middle; margin-left: 4px; font-size: 0.14rem; color: #fff; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date > span:last-child { float: right; } #new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .Tmsg { color: #333; font-size: 0.14rem; margin-top: 0.15rem; } #new .r4 .skew { background-color: #fff; } #new .r4 .rowMain { overflow: visible!important; } #new .r4 .rowMain .r_top .title { position: relative; } #new .r4 .rowMain .r_top .title .title_item { display: flex; justify-content: flex-start; align-items: center; position: absolute; left: 1.5rem; top: 0; height: 100%; padding-left: 0.8rem; } #new .r4 .rowMain .r_top .title .title_item > i { position: absolute; display: inline-block; font-size: 0.32rem; left: 0.1rem; top: 0; bottom: 0; margin: auto; text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19); line-height: 100%; } #new .r4 .rowMain .r_top .title .title_item > li { display: table; float: left; height: 100%; padding: 0 12px; margin: 0 12px; position: relative; z-index: 10; visibility: hidden; } #new .r4 .rowMain .r_top .title .title_item > li > a { font-size: 0.2rem; display: table-cell; vertical-align: middle; font-weight: 500; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); position: relative; background-color: transparent; z-index: 100; } #new .r4 .rowMain .r_top .title .title_item > li:after { content: attr(data-num); position: absolute; color: #cbccce; font-size: 0.4rem; font-family: En_bold; z-index: -1; left: 0; right: 0; margin: auto; width: 0.5rem; top: -0.64rem; letter-spacing: 20px; transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); filter: blur(5px); opacity: 0; transform-origin: 50% 50%; } #new .r4 .rowMain .r_top .title .title_item > li:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new .r4 .rowMain .r_top .title .title_item > li.active > a, #new .r4 .rowMain .r_top .title .title_item > li:hover > a { color: #fff; background-color: #2640bf; } #new .r4 .rowMain .r_top .title .title_item > li.active:before, #new .r4 .rowMain .r_top .title .title_item > li:hover:before { background-color: #2640bf; } #new .r4 .rowMain .r_top .title .title_item > li.active:after, #new .r4 .rowMain .r_top .title .title_item > li:hover:after { top: -0.32rem; letter-spacing: 2px; filter: blur(0px); opacity: 1; } #new .r4 .rowMain .r_center { position: relative; } #new .r4 .rowMain .r_center .component { width: 100%; height: auto; } #new .r4 .rowMain .r_center .component .itemwrap { height: 450px; width: 100%; max-width: 12rem; } #new .r4 .rowMain .r_center .component .itemwrap > li { display: flex; justify-content: space-around; align-items: center; height: auto; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book { display: inline-block; float: left; position: relative; width: 3.2rem; margin: auto 2%; box-shadow: 0 15px 60px -10px rgba(0, 0, 0, 0.6); } #new .r4 .rowMain .r_center .component .itemwrap > li > .book > img { width: 100%; height: 100%; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book:hover:after { height: 100%; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book:hover .Tmsg { bottom: 0; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book:after { content: ''; position: absolute; width: 100%; height: 0; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); background-color: rgba(0, 0, 0, 0.5); } #new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg { position: absolute; bottom: -0.6rem; left: 0; background-color: #184156; height: 0.6rem; line-height: 0.6rem; width: 100%; z-index: 1; transition: all 0.8s cubic-bezier(0.76, 0.01, 0.05, 1.56); } #new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span { display: inline-block; position: relative; height: 0.6rem; line-height: 0.6rem; color: #fff; font-size: 0.15rem; width: 50%; float: left; text-align: center; cursor: pointer; z-index: 3; overflow: hidden; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span:after { content: ''; width: 1px; height: 1px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin: auto; background-color: transparent; transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); transform-origin: 50% 50%; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); z-index: -1; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span:hover:after { transform: scale(200); -webkit-transform: scale(200); -moz-transform: scale(200); -o-transform: scale(200); background-color: #2640bf; } #new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span > i { margin-right: 8px; display: inline-block; height: 0.6rem; line-height: 0.6rem; color: #fff; font-size: 0.18rem; } #new .r4 .rowMain .r_center .component nav { height: 0.32rem; text-align: center; margin-top: 0.8rem; } #new .r4 .rowMain .r_center .component nav > i { color: #b2b2b2; display: inline-block; vertical-align: top; height: 100%; line-height: 0.32rem; width: 0.4rem; text-align: center; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); cursor: pointer; font-size: 0.18rem; } #new .r4 .rowMain .r_center .component nav > i:hover { color: #000; } #new .r4 .rowMain .r_center .component nav > span { font-size: 0.2rem; font-family: En_bold; color: #8d8d8d; display: inline-block; vertical-align: top; height: 100%; } #new .r4 .rowMain .r_center .component nav > span > b { font-size: 0.3rem; font-family: En_bold; letter-spacing: 2px; color: #2640bf; } #new_detail .r1 .skew { background-color: #f0f4f7; } #new_detail .r1 .rowMain { overflow: visible!important; padding-top: 0.5rem!important; padding-bottom: 1.3rem!important; } #new_detail .r1 .rowMain .Tbox { position: relative; padding: 1rem 0; padding-right: 25%; transform: translateY(-1.5rem); -webkit-transform: translateY(-1.5rem); -moz-transform: translateY(-1.5rem); -o-transform: translateY(-1.5rem); } #new_detail .r1 .rowMain .Tbox:after { content: ''; position: absolute; width: 75%; height: 100%; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); background-color: #fff; z-index: -1; top: 0; } #new_detail .r1 .rowMain .Tbox .articles { padding: 0 6%; } #new_detail .r1 .rowMain .Tbox .articles > h5 { font-size: 0.32rem; font-weight: bold; margin-bottom: 0.1rem; text-align: center; } #new_detail .r1 .rowMain .Tbox .articles small { height: 0.5rem; line-height: 0.5rem; display: block; width: 2.5rem; margin: auto; margin-bottom: 0.3rem; } #new_detail .r1 .rowMain .Tbox .articles small > span { color: #646464; padding: 0 0.1rem; font-size: 0.12rem; display: inline-block; vertical-align: middle; height: 100%; height: 0.5rem; line-height: 0.5rem; font-family: En_bold; float: left; text-align: center; } #new_detail .r1 .rowMain .Tbox .articles small > span > i { display: inline-block; margin-right: 6px; margin-left: 4px; font-size: 0.18rem; vertical-align: sub; color: #646464; height: 0.5rem; line-height: 0.5rem; } #new_detail .r1 .rowMain .Tbox .articles small > span:last-child { float: right; } #new_detail .r1 .rowMain .Tbox .articles .dot { overflow: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 60%; margin: auto; } #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox { position: relative; box-sizing: content-box; min-width: 0.6rem; height: 0rem; line-height: 0rem; padding: 0.2rem 0.2rem; display: inline-block; float: left; margin: 0.05rem 5px; padding: 0.18rem 0.16rem; z-index: 2; } #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0rem; line-height: 0rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-13deg, 0); -webkit-transform: skew(-13deg, 0); -moz-transform: skew(-13deg, 0); -o-transform: skew(-13deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox > a { color: #8198c2!important; font-size: 0.14rem !important; } #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox:after { background-color: #e8ebf0; } #new_detail .r1 .rowMain .Tbox .articles .Tmsg { margin-top: 0.5rem; } #new_detail .r1 .rowMain .Tbox .articles .Tmsg img { width: 90%; margin: 0.24rem auto 0.24rem auto; display: block; } #new_detail .r1 .rowMain .Tbox .articles .Tmsg p { margin: 0.2rem 0; } #new_detail .r1 .rowMain .Tbox .cor { right: 0; padding: 0.4rem 0.2rem; width: 25%; top: 0; z-index: 2; } #new_detail .r1 .rowMain .Tbox .cor:after { content: ''; position: absolute; width: 100%; height: 100%; transform: skew(0, -2.4deg); -webkit-transform: skew(0, -2.4deg); -moz-transform: skew(0, -2.4deg); -o-transform: skew(0, -2.4deg); background-color: #2640bf; z-index: -1; top: 0.33rem; left: 0; } #new_detail .r1 .rowMain .Tbox .cor .top { font-size: 0.2rem; font-weight: bold; color: #fff; margin: 0.4rem 0 0.3rem 0; } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist { margin-bottom: 0.3rem; } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small { height: 0.2rem; line-height: 0.2rem; display: block; width: 1.3rem; } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small > span { color: #fff; opacity: 0.5; font-size: 0.12rem; display: inline-block; vertical-align: middle; height: 100%; height: 0.2rem; line-height: 0.2rem; font-family: En_bold; float: left; text-align: left; } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small > span > i { display: inline-block; margin-right: 6px; margin-left: 4px; font-size: 0.18rem; vertical-align: sub; color: #fff; height: 0.2rem; line-height: 0.2rem; opacity: 0.5; } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small > span:last-child { float: right; } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist > a { color: #fff; display: block; font-size: 0.14rem; width: 100%; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; padding-bottom: 0.16rem; height: 0.3rem; line-height: 0.4rem; box-sizing: content-box; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist > a .Sline { stroke-width: 2px; stroke: rgba(255, 255, 255, 0.4); } #new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist > a:hover { line-height: 0.32rem; } #new_detail .r1 .rowMain .Tbox .cor .center .component nav { height: 0.32rem; text-align: center; } #new_detail .r1 .rowMain .Tbox .cor .center .component nav > i { color: rgba(255, 255, 255, 0.5); display: inline-block; vertical-align: top; height: 100%; line-height: 0.32rem; width: 0.4rem; text-align: center; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); cursor: pointer; font-size: 0.18rem; } #new_detail .r1 .rowMain .Tbox .cor .center .component nav > i:hover { color: #fff; } #new_detail .r1 .rowMain .Tbox .cor .center .component nav > span { font-size: 0.16rem; font-family: En_bold; color: rgba(255, 255, 255, 0.5); display: inline-block; vertical-align: top; height: 100%; } #new_detail .r1 .rowMain .Tbox .cor .center .component nav > span > b { font-size: 0.2rem; font-family: En_bold; letter-spacing: 2px; color: #fff; } #new_detail .r1 .rowMain .Tbox .cor .btm { position: absolute; top: 100%; width: 100%; left: 0; } #new_detail .r1 .rowMain .Tbox .cor .btm .return { color: #fff; font-size: 0.18rem; display: inline-block; width: 100%; height: 0.8rem; line-height: 0.8rem; position: relative; z-index: 5; font-weight: bold; text-align: center; } #new_detail .r1 .rowMain .Tbox .cor .btm .return:after { content: ''; position: absolute; width: 100%; height: 100%; transform: skew(0, -2.4deg); -webkit-transform: skew(0, -2.4deg); -moz-transform: skew(0, -2.4deg); -o-transform: skew(0, -2.4deg); background-color: #a9aebb; z-index: -1; top: 0; left: 0; } #new_detail .r1 .rowMain .Tbox .change { width: 75%; text-align: center; } #new_detail .r1 .rowMain .Tbox .change .pageSet { background-color: #8f8f8f; display: inline-block; width: 1.2rem; height: 0.6rem; line-height: 0.6rem; } #new_detail .r1 .rowMain .Tbox .change .pageSet > span { color: #fff; font-size: 0.14rem; display: inline-block; height: 0.6rem; line-height: 0.6rem; width: 100%; } #new_detail .r1 .rowMain .Tbox .change .pageSet > span > i { color: #fff; font-size: 0.18rem; margin: 0 0.1rem; vertical-align: sub; } #baogao .row .rowMain, #gonggao .row .rowMain, #zhili .row .rowMain { padding: 0px 5%; z-index: 2000; padding-bottom: 36px; } #baogao .row .rowMain .r_top, #gonggao .row .rowMain .r_top, #zhili .row .rowMain .r_top { padding-top: 18px; } #baogao .row .rowMain .r_top .mNav, #gonggao .row .rowMain .r_top .mNav, #zhili .row .rowMain .r_top .mNav { display: flex; justify-content: center; align-items: center; } #baogao .row .rowMain .r_top .mNav > li.skewBox, #gonggao .row .rowMain .r_top .mNav > li.skewBox, #zhili .row .rowMain .r_top .mNav > li.skewBox { position: relative; box-sizing: content-box; min-width: 2rem; height: 0.5rem; line-height: 0.5rem; padding: 0.2rem 0.2rem; padding: 0.1rem 0; } #baogao .row .rowMain .r_top .mNav > li.skewBox > a.Tcon, #gonggao .row .rowMain .r_top .mNav > li.skewBox > a.Tcon, #zhili .row .rowMain .r_top .mNav > li.skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.5rem; line-height: 0.5rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #baogao .row .rowMain .r_top .mNav > li.skewBox:after, #gonggao .row .rowMain .r_top .mNav > li.skewBox:after, #zhili .row .rowMain .r_top .mNav > li.skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0deg); -webkit-transform: skew(-8deg, 0deg); -moz-transform: skew(-8deg, 0deg); -o-transform: skew(-8deg, 0deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .row .rowMain .r_top .mNav > li.skewBox > a, #gonggao .row .rowMain .r_top .mNav > li.skewBox > a, #zhili .row .rowMain .r_top .mNav > li.skewBox > a { font-size: 0.16rem; color: #a8a8a8; } #baogao .row .rowMain .r_top .mNav li.active > a, #gonggao .row .rowMain .r_top .mNav li.active > a, #zhili .row .rowMain .r_top .mNav li.active > a { color: #fff!important; font-weight: bolder; } #baogao .row .rowMain .r_top .mNav li.active:after, #gonggao .row .rowMain .r_top .mNav li.active:after, #zhili .row .rowMain .r_top .mNav li.active:after { background-color: #2740bf!important; box-shadow: 0 10px 43px -3px rgba(39, 64, 191, 0.28); transform-origin: 50% 50%; transform: skew(-8deg, 0) scaleY(1.2); -webkit-transform: skew(-8deg, 0) scaleY(1.2); -moz-transform: skew(-8deg, 0) scaleY(1.2); -o-transform: skew(-8deg, 0) scaleY(1.2); } #baogao .row .rowMain .r_top .comBox, #gonggao .row .rowMain .r_top .comBox, #zhili .row .rowMain .r_top .comBox { margin: 1rem 0 1.8rem 0; display: flex; justify-content: space-around; align-items: center; } #baogao .row .rowMain .r_top .comBox .dateBox, #gonggao .row .rowMain .r_top .comBox .dateBox, #zhili .row .rowMain .r_top .comBox .dateBox { width: 480px; display: inline-block; } #baogao .row .rowMain .r_top .comBox .dateBox > span, #gonggao .row .rowMain .r_top .comBox .dateBox > span, #zhili .row .rowMain .r_top .comBox .dateBox > span { font-size: 0.16rem; display: inline-block; float: left; height: 0.5rem; line-height: 0.5rem; margin: 0 0.2rem; } #baogao .row .rowMain .r_top .comBox .dateBox .skewBox, #gonggao .row .rowMain .r_top .comBox .dateBox .skewBox, #zhili .row .rowMain .r_top .comBox .dateBox .skewBox { display: inline-block; float: left; position: relative; box-sizing: content-box; min-width: 1.7rem; height: 0.1rem; line-height: 0.1rem; padding: 0.2rem 0.2rem; } #baogao .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon, #gonggao .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon, #zhili .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.1rem; line-height: 0.1rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #baogao .row .rowMain .r_top .comBox .dateBox .skewBox:after, #gonggao .row .rowMain .r_top .comBox .dateBox .skewBox:after, #zhili .row .rowMain .r_top .comBox .dateBox .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .row .rowMain .r_top .comBox .dateBox .skewBox > input, #gonggao .row .rowMain .r_top .comBox .dateBox .skewBox > input, #zhili .row .rowMain .r_top .comBox .dateBox .skewBox > input { background-color: transparent; border: none; width: 100%; color: #959595; font-size: 0.14rem; height: 0.4rem; line-height: 0.4rem; position: absolute; cursor: pointer; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding-right: 0.4rem; z-index: 100; } #baogao .row .rowMain .r_top .comBox .dateBox .skewBox > i, #gonggao .row .rowMain .r_top .comBox .dateBox .skewBox > i, #zhili .row .rowMain .r_top .comBox .dateBox .skewBox > i { position: absolute; right: 0.14rem; top: 0; bottom: 0; margin: auto; height: 0.26rem; line-height: 0.26rem; display: inline-block; font-size: 0.26rem; color: #a6a6a6; z-index: 10; } #baogao .row .rowMain .r_top .title, #gonggao .row .rowMain .r_top .title, #zhili .row .rowMain .r_top .title { font-size: 0.32rem; color: #333; font-weight: bold; margin: 0.8rem 0; } #baogao .row .rowMain .r_btm, #gonggao .row .rowMain .r_btm, #zhili .row .rowMain .r_btm { margin: 30px 0; } #baogao .row .rowMain .r_btm .btnBox, #gonggao .row .rowMain .r_btm .btnBox, #zhili .row .rowMain .r_btm .btnBox { position: relative; height: 0.5rem; padding: 30px 0; box-sizing: content-box; } #baogao .row .rowMain .r_btm .btnBox > .btn, #gonggao .row .rowMain .r_btm .btnBox > .btn, #zhili .row .rowMain .r_btm .btnBox > .btn { font-size: 0.16rem; color: #abb3b9; text-align: center; color: #333; width: 2.2rem; height: 0.5rem; background-color: transparent; line-height: 0.5rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #baogao .row .rowMain .r_btm .btnBox:after, #gonggao .row .rowMain .r_btm .btnBox:after, #zhili .row .rowMain .r_btm .btnBox:after { content: ''; position: absolute; width: 2.2rem; height: 0.5rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #baogao .r1 .skew, #gonggao .r1 .skew, #zhili .r1 .skew, #baogao .r2 .skew, #gonggao .r2 .skew, #zhili .r2 .skew { background-color: #f0f4f7; } #baogao .r1 .r_center > ul, #gonggao .r1 .r_center > ul, #zhili .r1 .r_center > ul, #baogao .r2 .r_center > ul, #gonggao .r2 .r_center > ul, #zhili .r2 .r_center > ul { width: 100%; padding: 0.3rem 0; overflow: hidden; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } #baogao .r1 .r_center > ul li, #gonggao .r1 .r_center > ul li, #zhili .r1 .r_center > ul li, #baogao .r2 .r_center > ul li, #gonggao .r2 .r_center > ul li, #zhili .r2 .r_center > ul li { display: inline-block; float: left; box-sizing: content-box; min-width: 35%; height: 0.8rem; line-height: 0.8rem; padding: 0.2rem 0.2rem; padding-left: 0.4rem; padding-right: 0.4rem; position: relative; cursor: pointer; margin-bottom: 0.7rem; width: 2rem; } #baogao .r1 .r_center > ul li > a.Tcon, #gonggao .r1 .r_center > ul li > a.Tcon, #zhili .r1 .r_center > ul li > a.Tcon, #baogao .r2 .r_center > ul li > a.Tcon, #gonggao .r2 .r_center > ul li > a.Tcon, #zhili .r2 .r_center > ul li > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.8rem; line-height: 0.8rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #baogao .r1 .r_center > ul li:after, #gonggao .r1 .r_center > ul li:after, #zhili .r1 .r_center > ul li:after, #baogao .r2 .r_center > ul li:after, #gonggao .r2 .r_center > ul li:after, #zhili .r2 .r_center > ul li:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(0deg, -3deg); -webkit-transform: skew(0deg, -3deg); -moz-transform: skew(0deg, -3deg); -o-transform: skew(0deg, -3deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .r1 .r_center > ul li > i, #gonggao .r1 .r_center > ul li > i, #zhili .r1 .r_center > ul li > i, #baogao .r2 .r_center > ul li > i, #gonggao .r2 .r_center > ul li > i, #zhili .r2 .r_center > ul li > i { vertical-align: 0.25rem; color: #eb062b; font-size: 0.3rem; margin-right: 0.24rem; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .r1 .r_center > ul li span, #gonggao .r1 .r_center > ul li span, #zhili .r1 .r_center > ul li span, #baogao .r2 .r_center > ul li span, #gonggao .r2 .r_center > ul li span, #zhili .r2 .r_center > ul li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: super!important; height: 68%; vertical-align: 0.2rem; line-height: 0.25rem; width: 70%; font-size: 0.16rem; color: #333; font-weight: bold; display: inline-block; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .r1 .r_center > ul li span > small, #gonggao .r1 .r_center > ul li span > small, #zhili .r1 .r_center > ul li span > small, #baogao .r2 .r_center > ul li span > small, #gonggao .r2 .r_center > ul li span > small, #zhili .r2 .r_center > ul li span > small { font-size: 0.13rem; font-weight: 500; display: block; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .r1 .r_center > ul li a.downLoad, #gonggao .r1 .r_center > ul li a.downLoad, #zhili .r1 .r_center > ul li a.downLoad, #baogao .r2 .r_center > ul li a.downLoad, #gonggao .r2 .r_center > ul li a.downLoad, #zhili .r2 .r_center > ul li a.downLoad { position: absolute; display: inline-block; right: 0.3rem; top: 0.15rem; bottom: 0; margin: auto; height: 50%; font-size: 0.12rem; line-height: 0.25rem; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .r1 .r_center > ul li a.downLoad > i, #gonggao .r1 .r_center > ul li a.downLoad > i, #zhili .r1 .r_center > ul li a.downLoad > i, #baogao .r2 .r_center > ul li a.downLoad > i, #gonggao .r2 .r_center > ul li a.downLoad > i, #zhili .r2 .r_center > ul li a.downLoad > i { font-size: 0.25rem; color: #484848; font-weight: bold; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #baogao .r1 .r_center > ul li:hover > i, #gonggao .r1 .r_center > ul li:hover > i, #zhili .r1 .r_center > ul li:hover > i, #baogao .r2 .r_center > ul li:hover > i, #gonggao .r2 .r_center > ul li:hover > i, #zhili .r2 .r_center > ul li:hover > i { color: #fff; } #baogao .r1 .r_center > ul li:hover span, #gonggao .r1 .r_center > ul li:hover span, #zhili .r1 .r_center > ul li:hover span, #baogao .r2 .r_center > ul li:hover span, #gonggao .r2 .r_center > ul li:hover span, #zhili .r2 .r_center > ul li:hover span { color: #fff; } #baogao .r1 .r_center > ul li:hover span > small, #gonggao .r1 .r_center > ul li:hover span > small, #zhili .r1 .r_center > ul li:hover span > small, #baogao .r2 .r_center > ul li:hover span > small, #gonggao .r2 .r_center > ul li:hover span > small, #zhili .r2 .r_center > ul li:hover span > small { color: #fff; } #baogao .r1 .r_center > ul li:hover a.downLoad, #gonggao .r1 .r_center > ul li:hover a.downLoad, #zhili .r1 .r_center > ul li:hover a.downLoad, #baogao .r2 .r_center > ul li:hover a.downLoad, #gonggao .r2 .r_center > ul li:hover a.downLoad, #zhili .r2 .r_center > ul li:hover a.downLoad { color: #fff; } #baogao .r1 .r_center > ul li:hover a.downLoad > i, #gonggao .r1 .r_center > ul li:hover a.downLoad > i, #zhili .r1 .r_center > ul li:hover a.downLoad > i, #baogao .r2 .r_center > ul li:hover a.downLoad > i, #gonggao .r2 .r_center > ul li:hover a.downLoad > i, #zhili .r2 .r_center > ul li:hover a.downLoad > i { color: #fff; } #baogao .r1 .r_center > ul li:hover:after, #gonggao .r1 .r_center > ul li:hover:after, #zhili .r1 .r_center > ul li:hover:after, #baogao .r2 .r_center > ul li:hover:after, #gonggao .r2 .r_center > ul li:hover:after, #zhili .r2 .r_center > ul li:hover:after { background-color: #2740bf!important; box-shadow: 0 5px 20px -2px rgba(0, 0, 0, 0.19); } #baogao .r2 .r_center > ul > li:after, #gonggao .r2 .r_center > ul > li:after, #zhili .r2 .r_center > ul > li:after { background-color: #fbfbfb!important; } #baogao .r3 .r_center > ul, #gonggao .r3 .r_center > ul, #zhili .r3 .r_center > ul { width: 100%; padding: 0.3rem 0; overflow: hidden; display: flex; padding-bottom: 0.6rem; justify-content: space-around; align-items: center; flex-wrap: wrap; } #baogao .r3 .r_center > ul > li, #gonggao .r3 .r_center > ul > li, #zhili .r3 .r_center > ul > li { display: inline-block; float: left; position: relative; cursor: pointer; } #baogao .r3 .r_center > ul > li .skewBox, #gonggao .r3 .r_center > ul > li .skewBox, #zhili .r3 .r_center > ul > li .skewBox { transform: skew(0, -3deg) scale(0.9); -webkit-transform: skew(0, -3deg) scale(0.9); -moz-transform: skew(0, -3deg) scale(0.9); -o-transform: skew(0, -3deg) scale(0.9); display: block; overflow: hidden; } #baogao .r3 .r_center > ul > li .skewBox > img, #gonggao .r3 .r_center > ul > li .skewBox > img, #zhili .r3 .r_center > ul > li .skewBox > img { transform: skew(0, 3deg) scale(1.1); -webkit-transform: skew(0, 3deg) scale(1.1); -moz-transform: skew(0, 3deg) scale(1.1); -o-transform: skew(0, 3deg) scale(1.1); } #baogao .r3 .r_center > ul > li:after, #gonggao .r3 .r_center > ul > li:after, #zhili .r3 .r_center > ul > li:after { content: attr(data-title); position: absolute; left: 0; right: 0; margin: auto; height: 0.3rem; line-height: 0.3rem; color: #333; top: 108%; font-size: 0.16rem; font-weight: bold; text-align: center; } /*产品*/ #pro .row .skew { background-color: #fff; } #pro .row .rowMain { padding: 0px 5%; z-index: 2000; padding-bottom: 36px; } #pro .row .rowMain .Tlist1.pa { visibility: hidden; pointer-events: none; display: none; } #pro .row .rowMain .r_top { padding-top: 18px; } #pro .row .rowMain .r_top .mNav { display: flex; justify-content: center; align-items: center; } #pro .row .rowMain .r_top .mNav > li.skewBox { position: relative; box-sizing: content-box; min-width: 2rem; height: 0.5rem; line-height: 0.5rem; padding: 0.2rem 0.2rem; padding: 0.1rem 0; } #pro .row .rowMain .r_top .mNav > li.skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.5rem; line-height: 0.5rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #pro .row .rowMain .r_top .mNav > li.skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0deg); -webkit-transform: skew(-8deg, 0deg); -moz-transform: skew(-8deg, 0deg); -o-transform: skew(-8deg, 0deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .row .rowMain .r_top .mNav > li.skewBox > a { font-size: 0.16rem; color: #a8a8a8; } #pro .row .rowMain .r_top .mNav li.active > a { color: #fff!important; font-weight: bolder; } #pro .row .rowMain .r_top .mNav li.active:after { background-color: #2740bf!important; box-shadow: 0 10px 43px -3px rgba(39, 64, 191, 0.28); transform-origin: 50% 50%; transform: skew(-8deg, 0) scaleY(1.2); -webkit-transform: skew(-8deg, 0) scaleY(1.2); -moz-transform: skew(-8deg, 0) scaleY(1.2); -o-transform: skew(-8deg, 0) scaleY(1.2); } #pro .row .rowMain .r_top .comBox { margin: 1rem 0 1.8rem 0; display: flex; justify-content: space-around; align-items: center; } #pro .row .rowMain .r_top .comBox .dateBox { width: 480px; display: inline-block; } #pro .row .rowMain .r_top .comBox .dateBox > span { font-size: 0.16rem; display: inline-block; float: left; height: 0.5rem; line-height: 0.5rem; margin: 0 0.2rem; } #pro .row .rowMain .r_top .comBox .dateBox .skewBox { display: inline-block; float: left; position: relative; box-sizing: content-box; min-width: 1.7rem; height: 0.1rem; line-height: 0.1rem; padding: 0.2rem 0.2rem; } #pro .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.1rem; line-height: 0.1rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #pro .row .rowMain .r_top .comBox .dateBox .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .row .rowMain .r_top .comBox .dateBox .skewBox > input { background-color: transparent; border: none; width: 100%; color: #959595; font-size: 0.14rem; height: 0.4rem; line-height: 0.4rem; position: absolute; cursor: pointer; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding-right: 0.4rem; z-index: 100; } #pro .row .rowMain .r_top .comBox .dateBox .skewBox > i { position: absolute; right: 0.14rem; top: 0; bottom: 0; margin: auto; height: 0.26rem; line-height: 0.26rem; display: inline-block; font-size: 0.26rem; color: #a6a6a6; z-index: 10; } #pro .row .rowMain .r_top .title { margin: 0.4rem 0; margin-bottom: 1rem; } #pro .row .rowMain .r_top .title > span { display: inline-block; font-size: 0.32rem; color: #333; font-weight: bold; visibility: hidden; animation-duration: 0.8s; } #pro .row .rowMain .r_top .title > small { font-size: 0.18rem; display: block; margin: 0.1rem 0; color: #808080;text-transform: initial; } #pro .row .rowMain .r_btm { margin: 30px 0; } #pro .row .rowMain .r_btm .btnBox { position: relative; height: 0.5rem; padding: 30px 0; box-sizing: content-box; } #pro .row .rowMain .r_btm .btnBox > .btn { font-size: 0.16rem; color: #abb3b9; text-align: center; color: #333; width: 2.2rem; height: 0.5rem; background-color: transparent; line-height: 0.5rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #pro .row .rowMain .r_btm .btnBox:after { content: ''; position: absolute; width: 2.2rem; height: 0.5rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #pro .r1 .r_top .title { position: relative; } #pro .r1 .r_top .title .title_item { display: flex; justify-content: flex-start; align-items: center; position: absolute; left: 1.5rem; top: 0; height: 100%; padding-left: 0.8rem; } #pro .r1 .r_top .title .title_item > i { position: absolute; display: inline-block; font-size: 0.32rem; left: 0.1rem; top: 0; bottom: 0; margin: auto; text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19); } #pro .r1 .r_top .title .title_item > li { display: table; float: left; height: 100%; padding: 0 12px; margin: 0 12px; position: relative; z-index: 10; visibility: hidden; } #pro .r1 .r_top .title .title_item > li > a { font-size: 0.2rem; display: table-cell; vertical-align: middle; font-weight: 500; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); position: relative; background-color: #fff; z-index: 100; } #pro .r1 .r_top .title .title_item > li:after { content: attr(data-num); position: absolute; color: #eaeaea; font-size: 0.4rem; font-family: En_bold; z-index: -1; left: 0; right: 0; margin: auto; width: 0.5rem; top: -0.64rem; letter-spacing: 20px; transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); filter: blur(5px); opacity: 0; transform-origin: 50% 50%; } #pro .r1 .r_top .title .title_item > li:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .r1 .r_top .title .title_item > li.active > a, #pro .r1 .r_top .title .title_item > li:hover > a { color: #fff; background-color: #2640bf; } #pro .r1 .r_top .title .title_item > li.active:before, #pro .r1 .r_top .title .title_item > li:hover:before { background-color: #2640bf; } #pro .r1 .r_top .title .title_item > li.active:after, #pro .r1 .r_top .title .title_item > li:hover:after { top: -0.32rem; letter-spacing: 2px; filter: blur(0px); opacity: 1; } #pro .r1 .r_center { padding-bottom: 1rem; } #pro .r1 .r_center .pro_list1 { display: none; } #pro .r1 .r_center .pro_item1 { transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); display: flex; justify-content: space-around; align-items: center; height: 5rem; position: relative; } #pro .r1 .r_center .pro_item1:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; z-index: -1; background-color: #dcdcdc; } #pro .r1 .r_center .pro_item1 > li { display: table; float: left; width: 25%; max-width: 3rem; height: 100%; position: relative; padding: 0 2%; border: none; animation-duration: 0.8s; visibility: hidden; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .r1 .r_center .pro_item1 > li > .Tmask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; background-color: #2640bf; } #pro .r1 .r_center .pro_item1 > li > a { display: table-cell; vertical-align: middle; height: 100%; width: 100%; transform: skew(0, 3deg); -webkit-transform: skew(0, 3deg); -moz-transform: skew(0, 3deg); -o-transform: skew(0, 3deg); text-align: center; position: relative; z-index: 100; } #pro .r1 .r_center .pro_item1 > li > a > i { font-size: 0.52rem; display: inline-block; height: 1.6rem; line-height: 1.6rem; animation-delay: .3s; animation-duration: 0.6s; } #pro .r1 .r_center .pro_item1 > li > a > span { font-size: 0.18rem; color: #303a43; text-align: center; display: block;text-transform: initial; } #pro .r1 .r_center .pro_item1 > li.active { background-color: #2640bf; box-shadow: 0 20px 55px -5px rgba(0, 96, 229, 0.6); } #pro .r1 .r_center .pro_item1 > li.active > a > i { color: #fff; } #pro .r1 .r_center .pro_item1 > li.active > a > span { color: #fff;text-transform: initial; } #pro .r2 { position: relative; } #pro .r2 .playBox { display: inline-block; position: absolute; text-align: center; bottom: -0.2rem; right: 10%; z-index: 10001; } #pro .r2 .playBox > a.Tplay { display: block; text-align: center; color: #fff; width: 0.74rem; height: 0.74rem; line-height: 0.74rem; border-radius: 50%; background-color: #2640bf; box-shadow: 0 10px 32px -5px rgba(0, 44, 255, 0.43); cursor: pointer; } #pro .r2 .playBox > a.Tplay > i { color: #fff; font-size: 0.32rem; } #pro .r2 .playBox > span { color: #b2b2b2; font-size: 0.12rem; text-align: center; height: 0.4rem; line-height: 0.4rem; } #pro .r2 .skew { overflow: hidden; } #pro .r2 .skew .Tvideo { position: absolute; width: 100%; height: 112%; top: -6%; left: 0; overflow: hidden; transform-origin: 50% 50%; transform: skew(0, 2.4deg); -webkit-transform: skew(0, 2.4deg); -moz-transform: skew(0, 2.4deg); -o-transform: skew(0, 2.4deg); transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .r2 .skew .Tvideo video{ object-fit: contain!important; height: 90%; opacity: 0; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .r2 .skew .Tvideo.on video{ opacity: 1; } #pro .r2 .skew .Tvideo .pic { position: absolute; width: 100%; height: 100%; top: 0%; left: 0; overflow: hidden; transform-origin: 50% 50%; z-index: 6; opacity: 1; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .r2 .skew .Tvideo .Tmask { transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); position: absolute; width: 0.74rem; left: 0; top: 100%; bottom: 0; right: 0; margin: auto; background-color: transparent; border-radius: 50%; border-width: 20rem; border-color: #fff; border-style: solid; box-sizing: content-box; z-index: 5; } #pro .r2 .skew .Tvideo.on .pic { opacity: 0; } #pro .r2 .skew .Tvideo.on .Tmask { width: 200%; height: 20rem!important; left: -32rem; top: 0; bottom: 0%; right: 0; } #pro .r2 .rowMain.on { opacity: 0; } #pro .r2 .rowMain { transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); opacity: 1; } #pro .r2 .r_top .title { margin-bottom: 0rem!important; } #pro .r2 .r_center { height: 4.6rem; position: relative; } #pro .r2 .r_center > span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 3.6rem; margin: auto; text-transform: uppercase; font-size: 2rem; font-family: En_light; letter-spacing: 15px; text-align: center; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65); } #pro .r3 .r_center > ul { width: 100%; padding: 0.3rem 0; overflow: hidden; display: flex; padding-bottom: 0.6rem; justify-content: space-around; align-items: center; flex-wrap: wrap; } #pro .r3 .r_center > ul > li { display: inline-block; float: left; position: relative; cursor: pointer; margin: 0.2px 0 0.6rem 0; } #pro .r3 .r_center > ul > li .skewBox { transform: skew(0, -3deg) scale(0.9); -webkit-transform: skew(0, -3deg) scale(0.9); -moz-transform: skew(0, -3deg) scale(0.9); -o-transform: skew(0, -3deg) scale(0.9); display: block; overflow: hidden; } #pro .r3 .r_center > ul > li .skewBox > img { transform: skew(0, 3deg) scale(1.1); -webkit-transform: skew(0, 3deg) scale(1.1); -moz-transform: skew(0, 3deg) scale(1.1); -o-transform: skew(0, 3deg) scale(1.1); } #pro .r3 .r_center > ul > li:after { content: attr(data-title); position: absolute; left: 0; right: 0; margin: auto; height: 0.3rem; line-height: 0.3rem; color: #333; top: 108%; font-size: 0.16rem; font-weight: bold; text-align: center; } #pro .r4 #scene { width: 100%; height: 500px; z-index: 1; position: absolute; left: 0; bottom: 0; } #pro .r4 .canvas-box { width: 100%; height: 500px; z-index: 1; position: absolute; left: 0; bottom: 0; } #pro .r4 .r_center { position: relative; } #pro .r4 .r_center #cv { position: absolute; z-index: 1001; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); opacity: 1; } #pro .r4 .r_center .proItem { display: flex; justify-content: space-around; align-items: flex-start; margin: 0.7rem 0 0.3rem 0; position: relative; z-index: 1005; } #pro .r4 .r_center .proItem > .proList { padding-top: 45px; position: relative; min-width: 1.6rem; cursor: pointer; } #pro .r4 .r_center .proItem > .proList:after { content: attr(data-name); position: absolute; top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); left: 19px; font-size: 0.18rem; font-weight: bold; color: #333; } #pro .r4 .r_center .proItem > .proList > li { padding-left: 20px; font-size: 0.14rem; position: relative; height: 0.25rem; line-height: 0.25rem; color: #999; } #pro .r4 .r_center .proItem > .proList > li:after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; left: 4px; top: 10px; background-color: #337aff; } #pro .r4 .r_center .proItem > .proList > li:hover { color: #337aff; } #pro .r4 .r_center .proItem > .proList:hover:after { color: #337aff; } #pro .r4 .r_center .proItem .proList.active:after { color: #337aff; } #pro .r4 .r_center .imgBox { margin: 0.6rem 0 0rem 0; } #pro .r4 .r_center .imgBox .carItem > li { text-align: center; position: relative; min-height: 400px; } #pro .r4 .r_center .imgBox .carItem > li .carMask0 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: visible; opacity: 1; } #pro .r4 .r_center .imgBox .carItem > li .carMask1 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #pro .r4 .r_center .imgBox .carItem > li .carMask2 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #pro .r4 .r_center .imgBox .carItem > li .carMask3 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #pro .r4 .r_center .imgBox .carItem > li .carMask4 { position: absolute; z-index: 1000; right: 0; margin: auto; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); visibility: hidden; opacity: 0; } #pro .r4 .r_center .imgBox .carItem > li .carscreen0.c1_1 { top: 32px; left: -19px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen0.c1_2 { left: -30px; top: 30px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen0.c1_2.active { left: -80px; top: 2px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen1.c1_1 { top: 61px; left: -328px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen1.c1_2 { left: -345px; top: 61px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen1.c1_2.active { left: -418px; top: 32px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen2.c1_1 { top: 24px; left: -157px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen2.c1_2 { top: 25px; left: -176px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen2.c1_2.active { top: 0px; left: -246px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen3.c1_1 { top: 24px; left: -72px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen3.c1_2 { top: 24px; left: -72px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen3.c1_2.active { top: 0px; left: -91px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen4.c1_1 { top: 82px; left: 0px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen4.c1_2 { top: 82px; left: 0px; } #pro .r4 .r_center .imgBox .carItem > li .carscreen4.c1_2.active { top: 82px; left: 78px; } #pro .r4 .r_center .imgBox .carItem > li .car { display: none; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); opacity: 1; position: absolute; left: 0; right: 0; margin: auto; top: 0; } #pro .r4 .r_center .imgBox .carItem > li .car.show { display: inline-block; opacity: 1; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); } #pro .r4 .r_center .imgBox .carItem > li .moveOut { transform: rotateY(30deg) !important; -webkit-transform: rotateY(30deg) !important; -moz-transform: rotateY(30deg) !important; -o-transform: rotateY(30deg) !important; opacity: 0!important; } #pro .r4 .r_center .imgBox .carItem > li .moveIn { transform: rotateY(-30deg); -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); -o-transform: rotateY(-30deg); display: inline-block; opacity: 0; } #pro .r5 .r_center { text-align: center; height: 2.2rem; line-height: 2.2rem; } #pro .r5 .r_center > a.txtDown { display: inline-block; margin: 0 0.4rem; color: #999; font-size: 0.24rem; font-weight: bold; vertical-align: middle; } #pro .r5 .r_center > a.txtDown > i { color: #999; font-size: 0.24rem; vertical-align: middle; } #pro .r5 .r_center > .mycontact { display: inline-block; margin: 0 0.4rem; position: relative; box-sizing: content-box; min-width: 1.3rem; height: 0.1rem; line-height: 0.1rem; padding: 0.2rem 0.2rem; vertical-align: middle; } #pro .r5 .r_center > .mycontact > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.1rem; line-height: 0.1rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #pro .r5 .r_center > .mycontact:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0); -webkit-transform: skew(-8deg, 0); -moz-transform: skew(-8deg, 0); -o-transform: skew(-8deg, 0); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro .r5 .r_center > .mycontact:after { background-color: #e5e5e5; } #pro .r5 .r_center > .mycontact > a.Tcon { color: #4e4e4e; } #pro .r5 .r_center > .mycontact > a.Tcon > i { color: #777; font-size: 0.24rem; margin-right: 0.1rem; vertical-align: sub; } #pro .r6 .r_center > ul { width: 100%; padding: 0.3rem 0; overflow: hidden; display: flex; padding-bottom: 0.6rem; justify-content: space-around; align-items: center; flex-wrap: wrap; } #pro .r6 .r_center > ul > li { display: inline-block; float: left; background-color: #fff; margin: 0.2rem 0 0.8rem 0; position: relative; cursor: pointer; width: 40%; box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15); transition: all 0.2s ease-in-out; } #pro .r6 .r_center > ul > li .skewBox { display: block; overflow: hidden; margin: 20px; } #pro .r6 .r_center > ul > li.width-100 { width: 80%; } #pro .r6 .r_center > ul > li:hover { box-shadow: 20px 30px 20px -5px rgba(0, 0, 0, 0.15); } #pro .r6 .r_center > ul > li:after { content: attr(data-title); position: absolute; left: 0; right: 0; margin: auto; height: 0.3rem; line-height: 0.3rem; color: #333; top: 106%; font-size: 0.16rem; font-weight: bold; text-align: center; } /* 公司治理 */ #prolist .part { display: none; position: absolute; } #prolist .banner { position: absolute!important; width: 100%!important; z-index: -1; } #prolist .banner .video { position: absolute; width: 100%; top: 0; height: 100%; } #prolist .Trow img { width: 100%; } #prolist #footer { display: none; } #zhili .r1 .r_center .box .skewBox { position: relative; box-sizing: content-box; min-width: 100%; line-height: 3rem; padding: 0.2rem 0.2rem; margin-bottom: 1.4rem; } #zhili .r1 .r_center .box .skewBox > span.Tcon,#zhili .r1 .r_center .box .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; line-height: 3rem; position: relative; left: 0; right: 0; margin: auto; z-index: 4; } #zhili .r1 .r_center .box .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #zhili .r1 .r_center .box .skewBox > a,#zhili .r1 .r_center .box .skewBox > span { line-height: normal!important; padding: 0.4rem 6.25%; } #zhili .r1 .r_center .box .skewBox h5 { margin-bottom: 0.4rem; } #zhili .r1 .r_center .box .skewBox p { overflow: hidden; } #zhili .r1 .r_center .box h4 { margin-bottom: 0.8rem; padding-left: 0.5rem; position: relative; } #zhili .r1 .r_center .box h4:after { content: ''; height: 0.3rem; width: 0.2rem; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; background-color: #2740bf; transform: skew(-15deg, 0); -webkit-transform: skew(-15deg, 0); -moz-transform: skew(-15deg, 0); -o-transform: skew(-15deg, 0); z-index: 10; } #zhili .r1 .r_center .box h4:before { content: ''; height: 0.3rem; width: 0.2rem; position: absolute; left: 0.08rem; opacity: 0.3; top: 0; bottom: 0; margin: auto; background-color: #2740bf; transform: skew(-15deg, 0); -webkit-transform: skew(-15deg, 0); -moz-transform: skew(-15deg, 0); -o-transform: skew(-15deg, 0); z-index: 9; } /* 独立董事、监事交流 */ #jiaoliu .r1 { margin-bottom: 0.5rem!important; } #jiaoliu .r1 .rowMain { overflow: visible!important; } #jiaoliu .r1 .skew { background-color: #fff; } #jiaoliu .r1 .r_center { padding-top: 1rem; padding-bottom: 1rem; } #jiaoliu .r1 .r_center > .box .layout-mBox { padding-right: 3.2rem; box-sizing: border-box; width: 100%; } #jiaoliu .r1 .r_center > .box .layout-pa-right { position: absolute; right: 0; top: 0; width: 3.2rem; padding: 0 0.3rem; } #jiaoliu .r1 .r_center > .box .layout-pa-right .skew { background-color: #f0f4f7; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box { z-index: 2000; position: relative; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-top h4 { color: #333; font-size: 0.23rem; font-weight: bold; padding: 0.1rem 0 0.2rem 0; border-bottom: 1px solid #d3dce2; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li { position: relative; padding-left: 0.35rem; margin: 0.2rem 0 0.3rem 0; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > span { font-size: 0.16rem; color: #333; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > small { font-size: 0.12rem; color: #898989; display: block; margin-bottom: 0.1rem; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > a { font-size: 0.14rem; color: #6088ee; display: inline-block; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > i { display: inline-block; position: absolute; top: 0; left: 0; color: #eb062b; font-size: 0.24rem; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-btm .btnBox { position: relative; height: 0.4rem; padding: 30px 0; box-sizing: content-box; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-btm .btnBox > .btn { font-size: 0.13rem; color: #abb3b9; text-align: center; color: #6a6a6a; width: 1.2rem; height: 0.4rem; background-color: transparent; line-height: 0.4rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-btm .btnBox:after { content: ''; position: absolute; width: 1.2rem; height: 0.4rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #jiaoliu2 .r1 { margin-bottom: 0.5rem!important; } #jiaoliu2 .r1 .rowMain { overflow: visible!important; } #jiaoliu2 .r1 .rowMain .r_center { padding-top: 1rem; padding-bottom: 1rem; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child { text-align: center; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child { display: inline-block; padding-right: 0.35rem; position: relative; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child > b:first-child { color: #242424; font-size: 0.2rem; display: block; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child .redcolor { color: #e62b1e; font-size: 0.6rem; font-family: En_bold; display: inline-block; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child > i { display: inline-block; position: absolute; bottom: 0.18rem; right: 0; font-size: 0.35rem; color: #e62b1e; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span { display: inline-block; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span > a.redcolor { color: #e62b1e; font-size: 0.20rem; font-family: En_bold; display: inline-block; } #jiaoliu2 .r1 .rowMain .r_center > div:first-child > span a { font-size: 0.14rem; color: #666; } #jiaoliu2 .r1 .rowMain .r_center > ul { display: flex; overflow: hidden; justify-content: center; align-items: center; position: relative; } #jiaoliu2 .r1 .rowMain .r_center > ul:after { content: ''; position: absolute; width: 100%; top: 0; left: 0; height: 1px; background-color: #b3b3b3; transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1); } #jiaoliu2 .r1 .rowMain .r_center > ul > li { margin: 0 0.4rem; padding: 0.3rem 0; } #jiaoliu2 .r1 .rowMain .r_center > ul > li > span { font-size: 0.14rem; color: #666; display: block; height: 0.3rem; line-height: 0.3rem; } #jiaoliu2 .r1 .rowMain .r_center > ul > li > a { display: block; font-size: 0.2rem; font-family: En_bold; } #jiaoliu2 .r1 .rowMain .r_center > ul > li .redcolor { color: #e62b1e; } #jiaoliu2 .r1 .rowMain .r_center > ul > li .greencolor { color: #10a800; } #jiaoliu2 .r1 .rowMain .r_center > ul > li .graycolor { color: #a6a8ae; } #jiaoliu2 .r1 .skew { background-color: #fff; } #jiaoliu2 .r2 { padding-top: 0.68rem!important; padding-bottom: 0.68rem!important; } #jiaoliu2 .r2 .rowMain .r_center > h4 { font-size: 0.2rem; color: #484848; text-align: center; padding-bottom: 0.3rem; position: relative; opacity: 0; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); } #jiaoliu2 .r2 .rowMain .r_center > h4:after { content: ''; position: absolute; width: 0.26rem; height: 6px; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; background-color: #337aff; transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1); transform: translateY(15px); -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -o-transform: translateY(15px); } #jiaoliu2 .r2 .rowMain .r_center > h4.go { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); } #jiaoliu2 .r2 .rowMain .r_center > h4.go:after { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); } #jiaoliu2 .r2 .rowMain .r_center > p { text-align: center; padding: 0.3rem 0; font-size: 0.16rem; font-weight: bold; color: #484848; line-height: 240%; } #jiaoliu2 .r3 { padding-top: 1rem!important; padding-bottom: 1rem!important; } #jiaoliu2 .r3 .rowMain .r_top { text-align: left; margin-bottom: 0.4rem; line-height: 200%; font-size: 0.15rem; color: #333;text-transform: initial; } #jiaoliu2 .r3 .rowMain .r_center form > ul { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } #jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text { width: 50%; display: inline-block; float: left; padding-right: 10%; margin: 0.25rem 0; } #jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text > span { font-size: 0.16rem; color: #333; display: block; text-align: left; height: 0.36rem; line-height: 0.36rem; } #jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text > input, #jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text > textarea { width: 100%; border: none; background-color: rgba(0, 0, 0, 0.2); box-sizing: border-box; padding: 0 6px; height: 0.5rem; font-size: 0.14rem; color: #fff; } #jiaoliu2 .r3 .rowMain .r_center form > ul > .list-textarea { width: 100%; } #jiaoliu2 .r3 .rowMain .r_center form > ul > .list-textarea > textarea { height: 1.5rem; padding: 6px; } #jiaoliu2 .r3 .rowMain .r_center form .sub { text-align: center; } #jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox { position: relative; box-sizing: content-box; min-width: 2rem; height: 0.5rem; line-height: 0.5rem; padding: 0.2rem 0.2rem; display: inline-block; padding: 0.1rem 0; } #jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox > a.Tcon { font-size: 0.16rem; text-align: center; color: #333; width: 100%; background-color: transparent; display: block; height: 0.5rem; line-height: 0.5rem; position: absolute; left: 0; right: 0; margin: auto; z-index: 4; } #jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: auto; background-color: #fff; z-index: -1; transform: skew(-8deg, 0deg); -webkit-transform: skew(-8deg, 0deg); -moz-transform: skew(-8deg, 0deg); -o-transform: skew(-8deg, 0deg); top: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox > a.Tcon { font-size: 0.20rem; color: #fff; letter-spacing: 3px; } #jiaoliu2 .r3 .rowMain .r_center form .sub .subBtn:after { background-color: #2740bf; } #jiaoliu2 .r3 .rowMain .r_center form .sub .resizeBtn:after { background-color: #4b565a; } .dialog { position: fixed; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; pointer-events: none; visibility: hidden; width: 100%; height: 100%; top: 0; left: 0; z-index: 10000; } .dialog .dialog_mask { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 10001; background: rgba(55, 58, 71, 0.9); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; } .dialog .dialog_content { width: 50%; background: #fff; text-align: center; position: relative; z-index: 10005; opacity: 0; } .dialog.dialog--open{ visibility: visible; } .dialog.dialog--open .dialog_mask { opacity: 1; pointer-events: auto; } .dialog.dialog--open .dialog_content { opacity: 1; pointer-events: auto; } #dialog_video .dialog_content { width: 750px; overflow: visible; } #dialog_video .dialog_content .Tbox { overflow: visible; } #dialog_video .dialog_content .Tbox .left { float: left; width: 100%; background-color: #fff; } #dialog_video .dialog_content .Tbox .left .videoBox { width: 100%; position: relative; } #dialog_video .dialog_content .Tbox .left .videoBox .Tplay { position: absolute; height: 45px; width: 45px; border-radius: 50%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 32px; text-align: center; border: 2px solid #fff; opacity: 0.8; cursor: pointer; } #dialog_video .dialog_content .Tbox .left .videoBox .Tplay > i { font-size: 0.2rem; color: #fff; display: inline-block; line-height: 0.4rem; } #dialog_video .dialog_content .Tbox .left .Tmsg { padding: 0.15rem 0.24rem; } #dialog_video .dialog_content .Tbox .left .Tmsg p { font-size: 0.25rem; font-weight: bold; text-align: left; margin: 0.1rem 0; } #dialog_video .dialog_content .Tbox .left .Tmsg small { height: 0.2rem; line-height: 0.2rem; display: block; width: 1.8rem; float: right; } #dialog_video .dialog_content .Tbox .left .Tmsg small > span { color: #333; opacity: 0.5; font-size: 0.12rem; display: inline-block; vertical-align: middle; height: 100%; height: 0.2rem; line-height: 0.2rem; font-family: En_bold; float: left; text-align: left; margin-right: 0.1rem; } #dialog_video .dialog_content .Tbox .left .Tmsg small > span > i { display: inline-block; margin-right: 6px; margin-left: 4px; font-size: 0.18rem; vertical-align: sub; color: #333; height: 0.2rem; line-height: 0.2rem; opacity: 0.5; } #dialog_video .dialog_content .Tbox .left .Tmsg small > span:last-child { float: right; margin-right: 0rem; } #dialog_video .dialog_content .Tbox .right { float: right; width: 22%; height: 100%; background-color: #292929; padding: 0.12rem; } #dialog_video .dialog_content .Tbox .right .top { font-size: 0.18rem; font-weight: bold; text-align: left; color: #fff; height: 0.6rem; line-height: 0.6rem; } #dialog_video .dialog_content .Tbox .right .item { display: flex; align-content: space-between; flex-wrap: wrap; margin-top: 0.2rem; } #dialog_video .dialog_content .Tbox .right .item > li { width: 100%; position: relative; margin-bottom: 0.15rem; } #dialog_video .dialog_content .Tbox .right .item > li > img { width: 100%; } #dialog_video .dialog_content .Tbox .right .item > li .Tmsg { position: absolute; font-size: 0.12rem; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 0.3rem; line-height: 0.3rem; bottom: 0; left: 0; } #dialog_video .dialog_content .Tbox i[data-dialog-close] { display: inline-block; width: 0.64rem; height: 0.64rem; line-height: 0.64rem; font-size: 0.18rem; color: #fff; text-align: center; background-color: #2640bf; left: 100%; top: 0; cursor: pointer; } .blurInDown { -webkit-animation-name: blurInDown; animation-name: blurInDown; } @keyframes blurInDown { from { transform: scale(1.2) translateY(-25px); -webkit-transform: scale(1.2) translateY(-25px); -moz-transform: scale(1.2) translateY(-25px); -o-transform: scale(1.2) translateY(-25px); filter: blur(3px); opacity: 0; } to { transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); opacity: 1; filter: blur(0px); } } .fadeInSoftDown { -webkit-animation-name: fadeInSoftDown; animation-name: fadeInSoftDown; } @keyframes fadeInSoftDown { from { transform: translateY(-35px); -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -o-transform: translateY(-35px); opacity: 0; } to { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); opacity: 1; } } .blurInUp { -webkit-animation-name: blurInUp; animation-name: blurInUp; } @keyframes blurInUp { from { filter: blur(3px); transform: scale(1.2) translateY(25px); -webkit-transform: scale(1.2) translateY(25px); -moz-transform: scale(1.2) translateY(25px); -o-transform: scale(1.2) translateY(25px); opacity: 0; } to { filter: blur(0px); transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); opacity: 1; } } .blurInLeft { -webkit-animation-name: blurInLeft; animation-name: blurInLeft; } @keyframes blurInLeft { from { filter: blur(3px); transform: translateX(-300px); -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -o-transform: translateX(-300px); opacity: 0; } to { filter: blur(0px); transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); opacity: 1; } } .prolist1 { width: 100%; } .prolist1.pa { pointer-events: none; opacity: 0; top: 0; visibility: hidden; } /*页码*/ .page_row { position: relative; } .page_text { font-size: 14px; position: absolute; left: 0; display: inline-block; height: 28px; line-height: 28px; } .page { overflow: hidden; margin: 0 auto; display: inline-block; font-size: 14px; } .page_list { overflow: hidden; float: left; } .page_list li { float: left; font-size: 14px; width: 36px; margin: 0 4px; border: 1px solid #e2e2e2; height: 36px; line-height: 36px; text-align: center; border-radius: 3px; cursor: pointer; } .page_list li a{ display:block;} .getpage { width: 35px; display: inline-block; border: 1px solid #e2e2e2; height: 17px; line-height: 17px; font-size: 14px; } .page_choose { background: #337aff; border-color: #337aff; color: #fff; } .page_set { width: 83px; height: 36px; border: 1px solid #e2e2e2; line-height: 36px; text-align: center; float: left; cursor: pointer; font-size: 14px; } .page_set a{ display:block;} .page_set img { vertical-align: 2px; } .baogaoList { overflow: hidden; } .baogaoList > span { display: inline-block; border-bottom: 1px solid #eee; height: 60px; line-height: 60px; font-size: 16px; font-weight: bold; margin-bottom: 32px; transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1); } .baogaoList > span:nth-child(1) { width: 15%; float: left; font-family: En_bold; } .baogaoList > span:nth-child(2) { width: 83%; font-size: 14px; float: right; position: relative; } .baogaoList > span:nth-child(2) > i { margin-right: 10px; font-size: 18px; transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); } .baogaoList > span:nth-child(2) .go { position: absolute; top: 0; bottom: 0; margin: auto; height: 20px; margin-left: 25px; line-height: 20px; font-weight: 100; opacity: 0; font-size: 14px; transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1); } .baogaoList:hover > span { color: #337aff; } .baogaoList:hover > span > i:nth-child(1) { color: #337aff; } .baogaoList:hover > span .go { margin-left: 15px; opacity: 1; } #style1 { position: absolute; right: 0; top: 0; width: 3.2rem; padding: 0 0.3rem; } #style1 .skew { background-color: #f0f4f7; } #style1 > .box { z-index: 2000; position: relative; } #style1 > .box > .layout-top h4 { color: #333; font-size: 0.23rem; font-weight: bold; padding: 0.1rem 0 0.2rem 0; border-bottom: 1px solid #d3dce2; } #style1 > .box > .layout-center ul > li { position: relative; padding-left: 0.35rem; margin: 0.2rem 0 0.3rem 0; } #style1 > .box > .layout-center ul > li > span { font-size: 0.16rem; color: #333; } #style1 > .box > .layout-center ul > li > small { font-size: 0.12rem; color: #898989; display: block; margin-bottom: 0.1rem; } #style1 > .box > .layout-center ul > li > a { font-size: 0.14rem; color: #6088ee; display: inline-block; } #style1 > .box > .layout-center ul > li > i { display: inline-block; position: absolute; top: 0; left: 0; color: #eb062b; font-size: 0.24rem; } #style1 > .box > .layout-btm .btnBox { position: relative; height: 0.4rem; padding: 30px 0; box-sizing: content-box; } #style1 > .box > .layout-btm .btnBox > .btn { font-size: 0.13rem; color: #abb3b9; text-align: center; color: #6a6a6a; width: 1.2rem; height: 0.4rem; background-color: transparent; line-height: 0.4rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #style1 > .box > .layout-btm .btnBox:after { content: ''; position: absolute; width: 1.2rem; height: 0.4rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #pro_nav .r1 { position: relative; } #pro_nav .r1 .pro_type { width: 20%; height: 100%; transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro_nav .r1 .pro_type h5 { font-size: 0.35rem; font-weight: bold; color: #fff; text-align: center; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); height: 70px; } #pro_nav .r1 .pro_type h5 > small { display: block; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); font-size: 0.12rem; } #pro_nav .r1 .pro_type:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; mix-blend-mode: multiply; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #pro_nav .r1 .pro_type:hover,#pro_nav .r1 .pro_type.on { z-index: 3; width: 25%; } #pro_nav .r1 .pro_type:hover h5,#pro_nav .r1 .pro_type.on h5 { height: 352px; } #pro_nav .r1 .pro_type:hover h5 .layout-ul,#pro_nav .r1 .pro_type.on h5 .layout-ul { display: block; } #pro_nav .r1 .pro_type:hover:after,#pro_nav .r1 .pro_type.on:after { background-color: #2640bf; } #pro_nav .r2 { position: relative; display: flex; justify-content: space-around; align-items: center; padding: 0.7rem 0; z-index: 10000; background-color: #fff; } #pro_nav .r2 .pro_type { width: 42%; margin: 0 4%; height: 3rem; position: relative; } #pro_nav .r2 .pro_type p { text-align: center; color: #fff; font-size: 0.24rem; font-weight: bold; } #pro_nav .r2 .pro_type:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; } #pro .guidao_dot .Tcon:after { content: ""; position: absolute; height: 0.5rem; width: 3px; background-color: #fff; left: 0; right: 0; margin: auto; transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); } #pro .guidao_dot .guidao_item { width: 100%; bottom: 0; left: 0; background-color: #2640bf; padding: 0.25rem 0.3rem 0 0.25rem; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); z-index: 103; } #pro .guidao_dot .guidao_item > .list { margin-bottom: 0.24rem; color: rgba(255, 255, 255, 0.5); transform: skew(0, 3deg); -webkit-transform: skew(0, 3deg); -moz-transform: skew(0, 3deg); -o-transform: skew(0, 3deg); } #pro .guidao_dot .guidao_item > .list > b { display: block; color: #fff; } #pro .guidao_dot:hover .guidao_item { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); } #pro .guidao_list { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; position: relative; padding-top: 1rem!important; } #pro .guidao_list .Ttitle { width: 100%; color: #333; text-align: center; font-weight: bold; height: 0.6rem; line-height: 0.8rem; left: 0; top: 0; font-size: 0.2rem; } #pro .guidao_list .Ttitle:after { content: attr(data-num); position: absolute; left: 0; right: 0; margin: auto; z-index: -1; color: #dadada; font-size: 0.5rem; font-family: En_bold; letter-spacing: 3px; top: -10px; } #pro .guidao_list .skewBox { background-color: #fff; padding-left: 2rem; height: 2rem; line-height: 2rem; } #pro .guidao_list .skewBox > img { top: 0; bottom: 0; margin: auto; position: absolute; left: 0.4rem; max-width: 1.32rem; } #pro .guidao_list .skewBox > span { font-size: 0.18rem; transform: skew(0, 3deg); -webkit-transform: skew(0, 3deg); -moz-transform: skew(0, 3deg); -o-transform: skew(0, 3deg); display: inline-block; width: 90%; } #pro .guidao_list .skewBox > small { display: inline-block; width: 24%; text-align: center; line-height: 0.6rem; transform: skew(0, 3deg); -webkit-transform: skew(0, 3deg); -moz-transform: skew(0, 3deg); -o-transform: skew(0, 3deg); } #pro .guidao_list .skewBox > small:nth-child(2){ padding-top: 25px; } #pro .guidao_list .skewBox > small:nth-child(3){ padding-top: 52px; } #pro .guidao_list .skewBox > small:nth-child(4){ padding-top: 78px; } #pro .guidao_list .skewBox > small > img { display: block; margin: auto; } #pro .guidao_list .skewBox > small > a { font-size: 0.18rem; } .layout-tab { display: table; width: 2.2rem; height: 100%; margin: auto; position: relative; z-index: 3; padding-top: 0.6rem; } .layout-tab > .cell { display: table-cell; vertical-align: middle; } .layout-ul { margin-top: 0.1rem; position: absolute; display: none; } .layout-ul.on { opacity: 1; display: block; } .layout-ul > li { height: 0.48rem; line-height: 0.48rem; position: relative; padding-left: 0.64rem; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); margin: 0.2rem 0; cursor: pointer; } .layout-ul > li * { color: rgba(255, 255, 255, 0.5); transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } .layout-ul > li > i { left: 0; top: 0; bottom: 0; margin: auto; position: absolute; height: 0.42rem; width: 0.42rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); line-height: 0.42rem; display: inline-block; text-align: center; font-size: 0.28rem; font-weight: 100; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } .layout-ul > li > span { font-weight: bold; font-size: 0.2rem; line-height: 0.24rem; text-align: left; display: block; } .layout-ul > li > span > small { font-size: 0.12rem; font-weight: 400; display: block; } .layout-ul > li:hover * { color: #ffffff; } .layout-ul > li:hover > i { background-color: #fff; color: #0f306e; } .about .founder_text{ line-height: 38px; display: inline-block; font-size: 0.24rem!important; } .about .row .about_title { font-size: 0.32rem; font-weight: bold; margin-bottom: 0.2rem; } .about .row .about_title > small { font-size: 0.32rem; color: #b2b2b2; font-weight: 300; margin-right: 0.24rem; text-transform: uppercase; } .about .row .r_center { padding: 0 3%; } .about .row .r_center ul.myVideo { display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; } .about .row .r_center ul.myVideo > li { display: inline-block; float: left; margin: 0 0.12rem; width: 22%; margin-bottom: 0.24rem; } .about .row .r_center ul.myVideo > li .picBox { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.46); cursor: pointer; position: relative; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } .about .row .r_center ul.myVideo > li .picBox:hover { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); } .about .row .r_center ul.myVideo > li .picBox:hover .date { background-color: #2640bf; } .about .row .r_center ul.myVideo > li .picBox .date { position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); height: 0.3rem; line-height: 0.3rem; width: 100%; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); } .about .row .r_center ul.myVideo > li .picBox .date > span { color: #fff; padding: 0 0.1rem; font-size: 0.12rem; display: inline-block; vertical-align: middle; height: 100%; } .about .row .r_center ul.myVideo > li .picBox .date > span > i { display: inline-block; vertical-align: middle; margin-left: 4px; font-size: 0.14rem; color: #fff; } .about .row .r_center ul.myVideo > li .picBox .date > span:last-child { float: right; } .about .row .r_center ul.myVideo > li .Tmsg { color: #333; font-size: 0.14rem; margin-top: 0.15rem; text-transform: initial; } .about .small_txt { display: inline-block; color: #333; font-weight: bold; text-align: center; } .about .small_txt > small { font-size: 0.16rem; color: rgba(51, 51, 51, 0.5); font-weight: 400; display: block; text-align: center; text-transform: uppercase; } #about_1 .row .top { padding-top: 18px; font-size: 0.32rem; font-weight: bold; position: relative; height: 0.8rem; line-height: 0.8rem; margin-bottom: 0.4rem; } #about_1 .row .r_top { padding-top: 18px; } #about_1 .row .r_top .title { margin: 0.4rem 0; } #about_1 .row .r_top .title span { display: inline-block; font-size: 0.32rem; color: #333; font-weight: bold; visibility: hidden; animation-duration: 0.8s; } #about_1 .row .r_xian { width: 100%; border-bottom: 1px solid #d9d9d9; transform: skew(0, -2.4deg); margin: 0.43rem 0; } #about_1 .row.r1 .skew { background-color: #fff; } #about_1 .row.r1 .rowMain .r_top .top-box .top-left, #about_1 .row.r1 .rowMain .r_top .top-box .top-right { width: 50%; text-align: justify; } #about_1 .row.r1 .rowMain .r_top .top-box .top-left { padding-right: 0.2rem; float: left; } #about_1 .row.r1 .rowMain .r_top .top-box .top-right { padding-left: 0.2rem; float: right; } #about_1 .row.r1 .rowMain .r_btm { margin-top: 0.2rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; } #about_1 .row.r1 .rowMain .r_btm .list { width: 1.5rem; } #about_1 .row.r1 .rowMain .r_btm .list .list-top { height: 100px; position: relative; } #about_1 .row.r1 .rowMain .r_btm .list .list-top .top-num span { position: absolute; z-index: 100; } #about_1 .row.r1 .rowMain .r_btm .list .list-top .top-num span:nth-child(1) { font-size: 0.8rem; line-height: 1em; font-weight: bold; right: 0.35rem; } #about_1 .row.r1 .rowMain .r_btm .list .list-top .top-num span:nth-child(2) { font-size: 0.13rem; right: 0.18rem; bottom: 0.2rem; } #about_1 .row.r1 .rowMain .r_btm .list .list-top .top-i { position: absolute; right: 0; bottom: 0; } #about_1 .row.r1 .rowMain .r_btm .list .list-top .top-i i { display: block; font-size: 0.8rem; line-height: 1em; color: #e8eaed; } #about_1 .row.r1 .rowMain .r_btm .list .list-guo, #about_1 .row.r1 .rowMain .r_btm .list .list-us { font-weight: bold; text-align: center; } #about_1 .row.r1 .rowMain .r_btm .list .list-guo { font-size: 16px; color: #333; margin-top: 20px; } #about_1 .row.r1 .rowMain .r_btm .list .list-us { font-size: 24px; color: #e3e4e5; } #about_1 .row.r1 .rowMain .r_btm .list:nth-child(1) .list-top .top-num span, #about_1 .row.r1 .rowMain .r_btm .list:nth-child(3) .list-top .top-num span { color: #337aff; } #about_1 .row.r1 .rowMain .r_btm .list:nth-child(1) .list-top .top-num span:nth-child(1), #about_1 .row.r1 .rowMain .r_btm .list:nth-child(3) .list-top .top-num span:nth-child(1) { text-shadow: 0 0.06rem 0.1rem rgba(0, 44, 255, 0.2); } #about_1 .row.r1 .rowMain .r_btm .list:nth-child(2) .list-top .top-num span, #about_1 .row.r1 .rowMain .r_btm .list:nth-child(4) .list-top .top-num span { color: #2640bf; } #about_1 .row.r1 .rowMain .r_btm .list:nth-child(2) .list-top .top-num span:nth-child(1), #about_1 .row.r1 .rowMain .r_btm .list:nth-child(4) .list-top .top-num span:nth-child(1) { text-shadow: 0 0.06rem 0.1rem rgba(0, 44, 255, 0.2); } #about_1 .row.r2 { position: relative; } #about_1 .row.r2 .playBox { display: inline-block; position: absolute; text-align: center; bottom: -0.2rem; right: 10%; z-index: 10001; } #about_1 .row.r2 .playBox > a.Tplay { display: block; text-align: center; color: #fff; width: 0.74rem; height: 0.74rem; line-height: 0.74rem; border-radius: 50%; background-color: #2640bf; box-shadow: 0 10px 32px -5px rgba(0, 44, 255, 0.43); cursor: pointer; } #about_1 .row.r2 .playBox > a.Tplay > i { color: #fff; font-size: 0.32rem; } #about_1 .row.r2 .playBox > span { color: #b2b2b2; font-size: 0.12rem; text-align: center; height: 0.4rem; line-height: 0.4rem; } #about_1 .row.r2 .skew { overflow: hidden; } #about_1 .row.r2 .skew .Tvideo { position: absolute; width: 100%; height: 112%; top: -6%; left: 0; overflow: hidden; transform-origin: 50% 50%; transform: skew(0, 2.4deg); -webkit-transform: skew(0, 2.4deg); -moz-transform: skew(0, 2.4deg); -o-transform: skew(0, 2.4deg); transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_1 .row.r2 .skew .Tvideo video{ object-fit: contain!important; height: 90%; } #about_1 .row.r2 .skew .Tvideo .pic { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; transform-origin: 50% 50%; z-index: 6; opacity: 1; transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_1 .row.r2 .skew .Tvideo .Tmask { transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); position: absolute; width: 0.74rem; left: 0; top: 100%; bottom: 0; right: 0; margin: auto; background-color: transparent; border-radius: 50%; border-width: 20rem; border-color: #fff; border-style: solid; box-sizing: content-box; z-index: 5; } #about_1 .row.r2 .skew .Tvideo.on .pic { opacity: 0; } #about_1 .row.r2 .skew .Tvideo.on .Tmask { width: 200%; height: 20rem!important; left: -32rem; top: 0; bottom: 0%; right: 0; } #about_1 .row.r2 .rowMain.on { opacity: 0; } #about_1 .row.r2 .rowMain { transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1); opacity: 1; } #about_1 .row.r2 .r_top .title { margin-bottom: 0rem!important; } #about_1 .row.r2 .r_center { height: 4.6rem; position: relative; } #about_1 .row.r2 .r_center > span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 3.6rem; margin: auto; text-transform: uppercase; font-size: 2.2rem; font-family: En_light; letter-spacing: 15px; text-align: center; color: #2640bf; opacity: 0.9; } #about_1 .row.r3 .rowMain .r_center .box { width: 100%; height: 400px; margin-top: 50px; position: relative; overflow: hidden; } #about_1 .row.r3 .rowMain .r_center ul { width: 30000%; height: 200px; position: absolute; float: none; top: 100px; left: 50px; z-index: 10; cursor: move; } #about_1 .row.r3 .rowMain .r_center li { width: 13px; height: 13px; position: absolute; float: none; } #about_1 .row.r3 .rowMain .r_center li i, #about_1 .row.r3 .rowMain .r_center li i img { width: 13px; height: 13px; position: relative; float: left; cursor: pointer; webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #about_1 .row.r3 .rowMain .r_center li i img:hover { webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } #about_1 .row.r3 .rowMain .r_center .box .e { width: 1px; height: 1px; background-color: #198eed; position: absolute; } #about_1 .row.r3 .rowMain .r_center li h3 { font-size: 18px; color: #0b8bd4; white-space: nowrap; font-weight: bold; } #about_1 .row.r3 .rowMain .r_center li h4 { width: 130px; line-height: 18px; overflow: hidden; font-size: 13px; color: #464646; } #about_1 .row.r3 .rowMain .r_center li span { position: absolute; float: none; left: -8px; bottom: 25px; } #about_1 .row.r3 .rowMain .r_center li.b span { bottom: auto; top: 23px; } #about_1 .row.r3 .rowMain .r_center li.active h3 { font-size: 35px; } #about_1 .row.r3 .rowMain .r_center li.active h4 { width: 340px; } #about_1 .row.r3 .rowMain .r_center .car { width: 61px; height: 38px; position: absolute; float: none; opacity: 0; margin: -13px 0 0 -24.5px; z-index: 10; background: url(../img/public.png) no-repeat; background-position: -195px -40px; } #about_1 .row.r3 .rowMain .r_center .car.back { background-position: -195px -78px; } #about_1 .row.r3 .rowMain .r_center canvas { position: absolute; left: 0; top: 0; pointer-events: none; } #about_1 .row.r3 .rowMain .r_btm { width: 100%; text-align: center; font-size: 16px; vertical-align: middle; margin-top: 20px; } #about_1 .row.r3 .rowMain .r_btm img { float: none; margin: 0 5px; border: none; } #about_1 .row.r3 .rowMain .r_btm img:nth-child(1) { margin-top: -10px; } #about_1 .row.r4 .r_center { display: flex; justify-content: space-between; } #about_1 .row.r4 .r_center .left-btn, #about_1 .row.r4 .r_center .right-btn { width: 0.64rem; height: 0.64rem; box-sizing: border-box; border-radius: 100%; border: 1px solid #d2d2d2; position: relative; display: inline-block; } #about_1 .row.r4 .r_center .left-btn img, #about_1 .row.r4 .r_center .right-btn img { display: block; position: absolute; top: 0; bottom: 0; margin: auto; } #about_1 .row.r4 .r_center .left-btn img { right: 0; } #about_1 .row.r4 .r_center .year { height: 0.64rem; margin: 0 5px; position: relative; text-align: center; width: calc(100% - 1.28rem); } #about_1 .row.r4 .r_center .year:before { content: ''; width: 100%; border-bottom: 1px dashed #bec3cc; position: absolute; top: 50%; z-index: -1; left: 0; } #about_1 .row.r4 .r_center .year .year-div span { line-height: 0.64rem; font-size: 0.28rem; font-weight: bold; padding: 0 0.2rem; background-color: #fff; color: #adadad; } #about_1 .row.r4 .r_center .year .year-cur { position: relative; } #about_1 .row.r4 .r_center .year .year-cur i { width: 0.31rem; height: 0.17rem; display: block; line-height: 1em; font-size: 0.3rem; color: #337aff; position: absolute; left: 0; right: 0; top: -0.16rem; margin: auto; } #about_1 .row.r4 .r_center .year .year-cur span { font-size: 0.46rem; color: #337aff; } #about_1 .row.r4 .r_center .zhu { width: 100%; font-size: 0.14rem; color: #9c9c9c; text-align: center; line-height: 5em; } #about_1 .row.r4 .r_btm ul { width: 8.5rem; margin: 20px auto 0; } #about_1 .row.r4 .r_btm ul li { transform: skew(-10deg, 0); position: relative; margin-bottom: 20px; transition: all 0.3s ease; } #about_1 .row.r4 .r_btm ul li i{ opacity: 0;pointer-events: none; transition: all 0.3s ease; } #about_1 .row.r4 .r_btm ul li i img { width: 32px; height: 40px; position: absolute; top: -19px; left: 0; right: 0; margin: auto; transform: skew(10deg, 0); opacity: 0; } #about_1 .row.r4 .r_btm ul li p { width: 80%; text-align: center; font-size: 14px; color: #595959; margin: 0 auto; transform: skew(10deg, 0); } #about_1 .row.r4 .r_btm ul li:hover { background-color: #337aff; padding: 23px 0 10px 0; box-shadow: 0 4px 0 #e5e5e5; position: relative; } #about_1 .row.r4 .r_btm ul li:hover i,#about_1 .row.r4 .r_btm ul li:hover i > img{ opacity: 1; } #about_1 .row.r4 .r_btm ul li.horHref p{ color: #337aff; text-decoration: underline; } #about_1 .row.r4 .r_btm ul li:hover p { font-size: 16px; color: #fff; } #about_3 .row .r_center .mapNote { text-align: right; padding-bottom: 0.14rem; border-bottom: 2px solid #1f65e7; } #about_3 .row .r_center .mapNote > span { display: inline-block; height: 0.32rem; line-height: 0.32rem; font-size: 0.12rem; margin-left: 0.24rem; } #about_3 .row .r_center .mapNote > span > img { vertical-align: sub; margin-right: 0.1rem; } #about_3 .r1 .top_p { color: #1f65e7; font-size: 0.18rem; font-weight: bold; line-height: 175%; padding: 0.2rem 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-bottom: 0.48rem; } #about_3 .r1 .r_center .picBox { margin: 0.32rem 0 0.2rem 0; text-align: center; } #about_3 .r1 .r_center .picBox > img { width: 100%; } #about_3 .r2 .r_center .picBox { margin: 0.32rem 0 0.2rem 0; text-align: center; position: relative; } #about_3 .r2 .r_center .picBox > ul{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #about_3 .r2 .r_center .picBox > ul .adr_dot{ position: absolute; height: 32px; line-height: 32px; display: inline-block; cursor: pointer; white-space: nowrap; } #about_3 .r2 .r_center .picBox > ul .adr_dot > img{ vertical-align: middle; margin: 0 3px; display: none; } #about_3 .r2 .r_center .picBox > ul .adr_dot > span{ margin-right: 2px; vertical-align: middle; font-size: 14px; height: 32px; line-height: 32px; display: inline-block; width: 70px; text-align: left; padding-left: 24px; position: relative; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_3 .r2 .r_center .picBox > ul .adr_dot > span:after{ content:""; position: absolute; width: 13px; height: 13px; border-radius: 50%; top: 0; bottom: 0; margin: auto; left: 0; background-color: #1f65e7; opacity: 0.8; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_3 .r2 .r_center .picBox > ul .adr_dot:hover > span{ font-size: 18px; font-weight: bold; color: #1f65e7; } #about_3 .r2 .r_center .picBox > ul .adr_dot:hover > span:after{ opacity: 1; transform:scale(1.1); } #about_3 .r2 .r_center .picBox > ul .adr_dot:hover > img{ display: inline; } #about_3 .r2 .r_center .picBox > img { display: block; margin: auto; max-width: 100%; } #about_6 .r2 .r_center .picBox .yearItem { top: 0; bottom: 0; margin: auto; right: 15%; height: 1.2rem; padding: 0 0.4rem; } #about_6 .r2 .r_center .picBox .yearItem > li { width: 2rem; height: 1.2rem; } #about_6 .r2 .r_center .picBox .yearItem > li .yearList { color: #fff; font-size: 1rem; font-weight: bold; text-align: center; line-height: 0.6rem; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); position: absolute; visibility: hidden; opacity: 0; transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_6 .r2 .r_center .picBox .yearItem > li .yearList > small { display: block; text-align: left; text-transform: uppercase; font-size: 0.18rem; color: rgba(255, 255, 255, 0.6); } #about_6 .r2 .r_center .picBox .yearItem > li .yearList.on { visibility: visible; opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } #about_6 .r2 .r_center .picBox .yearItem > a.iconfont { color: rgba(255, 255, 255, 0.7); font-size: 0.4rem; line-height: 0.4rem; text-align: center; display: inline-block; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_6 .r2 .r_center .picBox .yearItem > a.iconfont:hover { color: #fff; } #about_6 .r3 .r_center .fu_activity .box { display: table; width: 49.5%; overflow: visible; height: 100%; visibility: hidden; position: relative; } #about_6 .r3 .r_center .fu_activity .box > .cell { display: table-cell; vertical-align: middle; text-align: center; } #about_6 .r3 .r_center .fu_activity .box > .cell > p { text-align: center; font-size: 0.42rem; font-weight: bold; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7); width: 80%; margin: auto; line-height: 0.5rem; } #about_6 .r3 .r_center .fu_activity .box > .cell > span { display: block; width: 60%; margin: auto; color: #fff; font-size: 0.16rem; font-weight: bold; text-align: center; line-height: 28px; } #about_6 .r3 .r_center .fu_activity .box > .cell > a { display: inline-block; cursor: pointer; text-align: center; font-size: 0.12rem; font-weight: bold; border-radius: 50px; padding: 5px 20px; } #about_6 .r3 .r_center .fu_activity .box > .cell > a.look { background-color: #fff; color: #4f728a; margin-top: 0.12rem; } #about_6 .r3 .r_center .fu_activity .box > .cell > a.Tmore { color: #fff; background-color: #1b1d1f; letter-spacing: 5px; } #about_6 .r3 .r_center .fu_activity .box.picBox { margin-bottom: 1%; } #about_6 .r3 .r_center .fu_activity .box .arrow { position: absolute; width: 0; height: 0; border-style: solid; border-width: 12px; top: 0; bottom: 0; margin: auto; border-color: transparent #fff transparent transparent; } #about_5 .r2 .r_center .small_txt { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 2rem; height: 0.5rem; font-size: 0.2rem; } #about_5 .r2 .r_center .view_dot { width: 2.5rem; } #about_5 .r2 .r_center .view_dot > h6 { border-bottom: 2px solid #f29600; color: #f29600; font-size: 0.2rem; height: 0.48rem; line-height: 0.48rem; } #about_5 .r2 .r_center .view_dot > h6 > small { color: #ccc; text-transform: uppercase; font-size: 0.2rem; font-weight: 300; margin-left: 0.15rem; } #about_5 .r2 .r_center .view_dot > ul > li { font-size: 0.14rem; color: #595959; margin: 0.1rem 0; text-transform: initial; } #about_5 .r2 .r_center .view_dot > ul > li > b { display: inline-block; width: 0.4rem; text-align: left; color: #333; } #about_5 .r3 .r_center .dot:after { content: ""; position: absolute; width: 25px; height: 23px; left: 0; right: 0; margin: auto; top: -0.48rem; background: url(../img/about/dot.png) center no-repeat; } #about_5 .r4 .r_center .brandItem { display: flex; justify-content: space-around; align-items: stretch; box-sizing: border-box; margin: 0.32rem 0; border: 1px solid #cad0d9; overflow: hidden; } #about_5 .r4 .r_center .brandItem > li { position: relative; text-align: center; width: 25%; float: left; border-left: 1px solid #cad0d9; padding: 0.2rem 0; background-color: #f7f9fa; } #about_5 .r4 .r_center .brandItem > li:first-child { border-left: none; } #about_5 .r4 .r_center .brandItem > li:nth-child(2n) { background-color: #fff; } #about_5 .r4 .r_center .brandItem > li > img { height: 0.42rem; } #about_5 .r4 .r_center .brandItem > li > span { display: block; text-align: center; color: #5f1985; font-weight: bold; font-size: 0.2rem; } #about_5 .r4 .r_center .brandItem > li > span:nth-child(2) { margin: 0.18rem 0; } #about_5 .r4 .r_center .brandItem > li > small { display: block; text-align: center; font-size: 0.16rem; color: #999; width: 60%; margin: 6px auto; height: 0.48rem; } #about_5 .r5 .r_center .fu_item { display: flex; justify-content: space-between; align-items: center; height: 5rem; position: relative; } #about_5 .r5 .r_center .fu_item > li { display: inline-block; height: 100%; width: 25%; position: relative; transform: skew(0, -2.4deg); -webkit-transform: skew(0, -2.4deg); -moz-transform: skew(0, -2.4deg); -o-transform: skew(0, -2.4deg); } #about_5 .r5 .r_center .fu_item > li .picBox { position: absolute; opacity: 0.11; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_5 .r5 .r_center .fu_item > li:hover .picBox { opacity: 0.8; } #about_5 .r5 .r_center .fu_item > li:hover > .Tmsg small { color: #fff; } #about_5 .r5 .r_center .fu_item > li > .Tcon { transform: skew(0, 2.4deg); -webkit-transform: skew(0, 2.4deg); -moz-transform: skew(0, 2.4deg); -o-transform: skew(0, 2.4deg); text-align: center; z-index: 5; display: inline-block; height: 0.4rem; width: 0.6rem; position: absolute; top: -1rem; bottom: 0; left: 0; right: 0; margin: auto; } #about_5 .r5 .r_center .fu_item > li > .Tcon:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0.6rem; height: 1px; background-color: #333; } #about_5 .r5 .r_center .fu_item > li > .Tmsg { transform: skew(0, 2.4deg); -webkit-transform: skew(0, 2.4deg); -moz-transform: skew(0, 2.4deg); -o-transform: skew(0, 2.4deg); position: absolute; width: 100%; padding: 0 0.2rem; bottom: 0.8rem; left: 0; } #about_5 .r5 .r_center .fu_item > li > .Tmsg > span { display: block; font-size: 0.2rem; font-weight: bold; text-align: left; color: #5f1985; } #about_5 .r5 .r_center .fu_item > li > .Tmsg > small { font-size: 0.12rem; font-weight: 300; color: #999999; margin-top: 0.1rem; display: inline-block; transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); } #about_5 .r5 .r_center .fu_item > li:nth-child(2n) { transform: skew(0, -2.4deg) translateY(20px); -webkit-transform: skew(0, -2.4deg) translateY(20px); -moz-transform: skew(0, -2.4deg) translateY(20px); -o-transform: skew(0, -2.4deg) translateY(20px); } #about_5 .r5 .r_center .fu_item > li:nth-child(2n) > .Tcon { top: 1rem; } #about_5 .r5 .r_center .fu_item > li:nth-child(2n) > .Tmsg { bottom: auto; top: 0.8rem; } /* 清除浮动 */ .clear-both:after { content: ''; width: 0; height: 0; display: block; clear: both; visibility: hidden; } /* 弹窗视频 */ #xcVideo { display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); position: fixed; top: 0; left: 0; z-index: 100000; } #xcVideo video { width: 80%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #xcVideo .close { width: 0.8rem; height: 0.8rem; border-radius: 0 0 0 0.8rem; background-color: #fff; position: absolute; top: 0; right: 0; cursor: pointer; } #xcVideo .close i { display: block; font-size: 0.4rem; line-height: 0.7rem; text-align: right; margin-right: 0.1rem; } /*2.11添加*/ .mt-20 { margin-top: 20px; } .client_page1 .img, .client_page1 .img img { width: 168px; } .client_page1 .img { position: relative; float: left; } .client_page1 .textArea { width: auto; float: none; display: block; margin-left: 205px; font-size: 14px; } .b-b { border-bottom: 1px #dbdbdb solid; position: relative; float: left; width: 100%; margin-top: 30px; } .dutyItem { width: 100%; margin-top: 60px; position: relative; float: left; } .dutyItem h3 { width: 100%; text-align: center; font-size: 18px; font-weight: bold; } .dutyItem img { margin-top: 10px; float: none; } .dutyItem i { width: 225px; position: relative; float: left; font-style: normal; overflow: hidden; text-align: center; } .dutyItem .textArea { margin-top: 20px; margin-left: 240px; width: auto; float: none; display: block; font-size: 14px; } .dutyItem.r i { float: right; } .dutyItem.r .textArea { margin: 20px 240px 0 0; } .creditor { overflow: hidden; } .creditor div { position: relative; float: left; } .creditor ul { width: 120%; } .creditor li { width: 440px; height: 225px; overflow: hidden; font-size: 14px; margin-right: 80px; display: inline; margin-top: 20px; position: relative; float: left; } .creditor li i { width: 70px; height: 71px; position: relative; float: left; overflow: hidden; } .creditor li h3 { float: none; display: block; margin-left: 80px; font-size: 18px; font-weight: bold; margin-top: 12px; } .network .select-div dl { float: left; position: relative; width: 200px; height: 40px; cursor: pointer; margin-right: 40px; } .network .select-div dl dt { width: 200px; height: 40px; line-height: 40px; border: 1px solid #ccc; transform: skewX(-18deg); transform-origin: right bottom; position: relative; } .network .select-div dl dt i { display: block; position: absolute; color: #fff; text-align: center; font-size: 30px; width: 40px; height: 100%; right: 0; top: 0; background-color: #dfdfdf; } .network .select-div dl dt span { transform: skewX(18deg); display: block; text-indent: 20px; } .network .select-div dl dd { display: none; border: 1px solid #ccc; border-top: none; position: absolute; top: 40px; left: 0; width: 200px; background-color: #fff; z-index: 99; } .network .select-div dl dd li { height: 40px; line-height: 40px; text-align: center; } .network .select-div dl dd li:hover { background-color: #eee; } .network .select-div .search { width: 180px; height: 40px; line-height: 40px; color: #fff; text-align: center; font-size: 16px; position: relative; float: left; cursor: pointer; } .network .select-div .search::before { width: 180px; height: 100%; background-color: #2640bf; display: block; position: absolute; content: ''; left: 0; top: 0; transform: skewX(-18deg); z-index: -1; } .network .map-div { margin-top: 100px; } .network .map-div .list { width: 500px; float: left; } .network .map-div .list li { position: relative; padding: 0 0 40px 90px; margin-bottom: 40px; border-bottom: 1px solid #ccc; padding-right: 50px; } .network .map-div .list li h3 { font-size: 16px; color: #636363; margin-bottom: 10px; } .network .map-div .list li p { font-size: 14px; color: #9c9c9c; } .network .map-div .list li span { display: block; position: absolute; left: 0; top: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 16px; } .network .map-div .list li span::before { display: block; content: ''; position: absolute; width: 40px; height: 40px; background-color: #6e6765; left: 0; top: 0; transform: skewX(-18deg); z-index: -1; } .network .map-div .list li i { display: block; position: absolute; right: 12px; top: 10px; font-size: 30px; color: #9c9c9c; cursor: pointer; } .network .map-div .list li:hover span::before { background-color: #2640bf; } .network .map-div .list li:hover h3 { color: #2640bf; } .network .map-div #map { width: 500px; float: right; height: 600px; } .network #shop{ height: 6.4rem; overflow: auto; padding-left: 10px; } .network #province,.network #city{ max-height: 4rem; overflow: auto; } .network #shop::-webkit-scrollbar,.network #province::-webkit-scrollbar,.network #city::-webkit-scrollbar { width: 3px; border-radius: 1.5px; } .network #shop::-webkit-scrollbar-button,.network #province::-webkit-scrollbar-button,.network #city::-webkit-scrollbar-button { display: none; } .network #shop::-webkit-scrollbar-track,.network #province::-webkit-scrollbar-track,.network #city::-webkit-scrollbar-track { background-color: #eee; } .network #shop::-webkit-scrollbar-thumb,.network #province::-webkit-scrollbar-thumb,.network #city::-webkit-scrollbar-thumb { background-color: #337aff; } /*搜索*/ .Tsearch{ overflow: hidden; } .Tsearch div,.Tsearch span{ position: relative; float: left; } .Tsearch span{ position: relative; float: left; } .mr-10 { margin-right: 10px; } .w-100 { width: 100%; } .fbold { font-weight: bold; } .f-16 { font-size: 16px; } .h-35 { line-height: 35px; } .Tsearch .searchPage{ width: 100%;display: inline; position: relative; float: left; } .Tsearch .searchPage form{ width: 100%; height: 100%; padding: 0px; margin: 0px; } .Tsearch .searchPage .ipt{ border: 1px solid #b6b6b6; height: 36px; line-height: 36px; padding: 6px; width: 300px; background-color: #fafafa; font-size: 14px; float: left; } .Tsearch .searchPage .btn{ width: 100px; height: 36px; color: white; letter-spacing: 1px; background: #3385ff; border-bottom: 1px solid #2d78f4; outline: medium; -webkit-appearance: none; -webkit-border-radius: 0; font-size: 16px; cursor: pointer; float: left; margin-left: 10px; border: none; } .Tsearch .searchPage em{ font-style: normal; color: #c00; font-size: 14px; } .Tsearch .searchPage .list,.Tsearch .searchPage .list ul,.Tsearch .searchPage .list li{ width: 100%; } .Tsearch .page.top { margin: 30px 0 30px 0; } .Tsearch .page{ width: 100%; height: 40px; line-height: 32px; overflow: hidden; margin: 30px 0 0; text-align: center; padding-top: 2px; } .Tsearch .page a:hover, .Tsearch .page a.active { background: #198eed; color: #fff; text-decoration: none; border: 1px #198eed solid; } .Tsearch .page a { padding: 7px 11px; margin: 0 3px; display: inline; background-color: #fff; color: #666; border: 1px #dddddd solid; } .Tsearch .searchPage .list li { margin-top: 10px; } .Tsearch .searchPage .list .el { width: 100%; font-size: 16px; margin-bottom: 10px; } .Tsearch .searchPage .list .el .ty { padding: 0 16px; margin-right: 16px; display: inline; border-right: 1px solid #ddd; } .Tsearch .searchPage .list .textArea { width: auto; max-height: 66px; overflow: hidden; padding: 10px 20px; border-top: 1px solid #ddd; float: none; display: block; } .Tsearch .searchPage .list .textArea a { border-bottom: none; color: #888; } .Tsearch .textArea * { position: static; float: none; word-wrap: break-word; } #about_2 .r_btm { margin: 0px 0; } #about_2 .r_btm .btnBox { position: relative; height: 0.5rem; padding: 30px 0; box-sizing: content-box; } #about_2 .r_btm .btnBox > .btn { font-size: 0.16rem; color: #abb3b9; text-align: center; color: #333; width: 2.2rem; height: 0.5rem; background-color: transparent; line-height: 0.5rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #about_2 .r_btm .btnBox:after { content: ''; position: absolute; width: 2.2rem;30px; height: 0.5rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } #about_6 .r_btm { margin-bottom: 30px; } #about_6 .r_btm .btnBox { position: relative; height: 0.5rem; padding: 30px 0; box-sizing: content-box; } #about_6 .r_btm .btnBox > .btn { font-size: 0.16rem; color: #abb3b9; text-align: center; color: #333; width: 2.2rem; height: 0.5rem; background-color: transparent; line-height: 0.5rem; position: absolute; left: 0; right: 0; top: 30px; margin: auto; z-index: 4; } #about_6 .r_btm .btnBox:after { content: ''; position: absolute; width: 2.2rem;30px; height: 0.5rem; left: 0; right: 0; top: 30px; margin: auto; background-color: #cfd8de; z-index: 2; transform: skew(0, -3deg); -webkit-transform: skew(0, -3deg); -moz-transform: skew(0, -3deg); -o-transform: skew(0, -3deg); } /*下拉*/ .layout-down { display: block; padding-right: 0.4rem; position: relative; background-color: #337aff; height: 0.4rem; line-height: 0.4rem; width: 150px; cursor: pointer; } .layout-down span.downTxt { display: inline-block; width: 110px; display: flex; align-items: center; position: relative; border: none; background-color: transparent; box-sizing: border-box; padding: 0.04rem 0.08rem; height: 100%; vertical-align: top; } .layout-down span.downTxt > span{color: #fff;font-weight: bold;font-size: 18px;} .layout-down span.downTxt:after { content: ''; width: 1px; height: 50%; top: 0; bottom: 0; background-color: #ddd; right: 0; position: absolute; margin: auto; } .layout-down span.downIcon { position: absolute; right: 0; width: 0.4rem; top: 0; height: 100%; text-align: center; box-sizing: border-box; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; height: 0.4rem; line-height: 0.4rem; color: #fff; } .layout-down ul.down { position: absolute; top: 100%; left: 0%; width: 100%; z-index: 100; display: none; } .layout-down ul.down > li { display: inline-block; width: 100%; box-sizing: border-box; padding: 0 0.08rem; background-color: #fff; float: left; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; } .layout-down ul.down > li > span { color: #333333c9; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; } .layout-down ul.down > li:hover { background-color: #2640bf; } .layout-down ul.down > li:hover > span { color: #fff; } .layout-down.active span.downIcon { transform: scale(-1); -webkit-transform: scale(-1); -moz-transform: scale(-1); -o-transform: scale(-1); -ms-transform: scale(-1); } /* 分享 */ /*Layer*/ .Smohan_Layer_Shade{position:fixed; _position:absolute; zoom:1; top:0; left:0; width:100%; height:100%; overflow:hidden; background:url(../img/hei.png) repeat; z-index:99900;} .Smohan_Layer_box{ min-width:300px; height:200px!important; padding:20px; background:#ffffff; position:fixed; _position:absolute; top:50%; left:50%; overflow:hidden; z-index:99999;-moz-border-radius:20px;-webkit-border-radius:20px; border-radius:20px;} .Smohan_Layer_box h3{ display:block; width:100%; height:30px; line-height:30px; padding:0px 0px 10px 0px; margin:0; border-bottom:1px solid #cccccc; overflow:hidden;} .Smohan_Layer_box h3 .text{ float:left;font-size:16px; font-family:'Microsoft JhengHei','Microsoft YaHei', Arial, sans-serif; font-weight:600; color:#84c017; text-indent:0.5em; display:block;} .Smohan_Layer_box h3 .close{ display:block; width:30px; height:30px; background:url(../img/Smohan.layer.close.png) 0px 0px no-repeat; float:right;} .Smohan_Layer_box h3 .close:hover{background-position:0px -31px;} .Smohan_Layer_box .layer_content{ display:block; width:100%; height:100%; margin-top:10px; margin-bottom:10px; padding:0; overflow:hidden; position:relative;} .Smohan_Layer_box .layer_content .loading{ display:block; width:36px; height:36px; background:url(../img/Load.gif) center center no-repeat; position:absolute; top:0; left:0;} /*Share*/ #Share{ display:none; width:360px; height:120px; padding:15px 10px;} #Share ul{ margin:0; padding:0; list-style-type:none;} #Share ul li{ float:left; display:block; width:50px; height:50px;margin-left:5px; margin-right:5px; cursor:pointer; position:relative;} #Share ul li a{ display:block; width:28px; height:28px; margin-left:11px; margin-top:12px;} #Share ul li span{ display:block;width:40px;height:10px;background:url(../img/share_shade.png) 0px 0px no-repeat; position:absolute; left:5px; bottom:0px;} #Share ul li a.share1{ background:url(../img/share_icon2.png) 0px 0px;} #Share ul li a.share2{ background:url(../img/share_icon2.png) -28px 0px;} #Share ul li a.share3{ background:url(../img/share_icon2.png) -56px 0px;} #Share ul li a.share4{ background:url(../img/share_icon2.png) -84px 0px;} #Share ul li a.share5{ background:url(../img/share_icon2.png) -112px 0px;} #Share ul li a.share6{ background:url(../img/share_icon2.png) -140px 0px;} /*微信二维码*/ .none{ display: none; } .qrcode{ width:180px; height:240px; padding:20px; position: fixed; left:50%; top:50%; margin-left:-120px; margin-top:-140px; background: #fff; z-index: 100000; } .qrcode img{ max-width: 100%; max-height:100%; } .weixin_close{ background: #7CBDD0; display: inline-block; width:100%; height:30px; line-height: 30px; text-align: center; color: #fff; text-decoration: none } .ge-choose{ height: 40px;line-height: 40px; bottom: -60px; left: 0; } .ge-choose a{ display: inline-block; height: 40px;line-height: 40px;text-align: center; font-size: 16px; font-weight: bold; margin: 0 20px; transition: all 0.3s; } .ge-choose a.on{ color: #2640bf; text-decoration: underline; } .ge-choose a:hover{ color: #2640bf; } .fang ul.pa li{ font-size: 18px; } .fang span.pa{ width: 100%; left: 0; text-align: center; bottom: 80px; font-size: 14px; color: rgba(0,0,0,0.3); } /* ie兼容 */ .ie #index .r2 .skew .buleMask2{ opacity: 0.6; } .ie #bloc #center #main .content .banner > .buleMask1.go{ -webkit-animation: bannergo1 2s forwards ease-in-out; animation: bannergo1 2s forwards ease-in-out; } .ie10 #about_6 .r3 .r_center .fu_activity .box{ height: inherit; } .ie #baogao .r1 .r_center > ul li a.downLoad > i, .ie #gonggao .r1 .r_center > ul li a.downLoad > i, .ie #zhili .r1 .r_center > ul li a.downLoad > i, .ie #baogao .r2 .r_center > ul li a.downLoad > i, .ie #gonggao .r2 .r_center > ul li a.downLoad > i, .ie #zhili .r2 .r_center > ul li a.downLoad > i{ display: inline-block; vertical-align: top; } .ie #baogao .r1 .r_center > ul li a.downLoad, .ie #gonggao .r1 .r_center > ul li a.downLoad, .ie #zhili .r1 .r_center > ul li a.downLoad, .ie #baogao .r2 .r_center > ul li a.downLoad, .ie #gonggao .r2 .r_center > ul li a.downLoad, .ie #zhili .r2 .r_center > ul li a.downLoad{ line-height: 0; } @-webkit-keyframes bannergo1 { 0% { right: 0%; opacity: 0.6; } 60% { right: -100%; opacity: 0.6; } 61% { right: 100%; opacity: 0; } 100% { right: 63%; opacity: 0.6; } } @keyframes bannergo1 { 0% { right: 100%; opacity: 0.6; } 60% { right: -100%; opacity: 0.6; } 60.0001% { right: 100%; opacity: 0; } 100% { right: 63%; opacity: 0.6; } } .pc{ display: block; } .app{ display: none!important; } /*英文版*/ .english .layout-down ul.down > li > span{ line-height: 22px; display: inline-block; vertical-align: middle; } .english #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore{ left: 80%; } .english #bloc #header #nav .childItem .childNav > li{ height: auto; margin-bottom: 8px; } .english #bloc #header.on:after{ height: 4.6rem; } .english #bloc #header #nav .childItem .childNav > li > a{ font-size: 12px;vertical-align: top; } .english #index .r3 .r_center .proItem > .proList{ padding-top: 54px; } .english #index .r3 .r_center .proItem > .proList:after{ font-size: 0.18rem; line-height: 20px; } .english #bloc #center #main .content .banner .b_txt > span{ letter-spacing: 5px; } .english #bloc #center #main .content .banner .b_txt.go > span{ letter-spacing: 0; } .english .layout-down span.downTxt > span{ font-size: 14px;line-height: 20px; } .english #bloc #center #main .content .banner .b_txt > span{ margin-bottom: 20px; } .english #bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4),.english #bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3){ letter-spacing: 1px; } .english #bloc #center #main .content .mainContent .nodeItem > a:before{ line-height: 14px; bottom: 2px; } .english #about_5 .r2 .r_center .view_dot > ul > li > b{ display: block; } .english #about_5 .r5 .r_center .fu_item > li > .Tmsg > span{ font-size: 0.16rem; font-weight: 500; text-transform: initial; } .english #contact .row .r_top .title{ letter-spacing: 0; } .english #pro_nav .r1 .pro_type h5{ font-size: 0.2rem; } .english .layout-ul > li > span{ display: table; height: 100%; } .english .layout-ul > li > span > small{ display: table-cell; vertical-align: middle; font-size: 14px; } .english #pro_nav .r1 .pro_type:hover, #pro_nav .r1 .pro_type.on{ z-index: 15; width: 20%; } .english #bloc #center #main .content .banner .b_txt > span{ font-size: 0.42rem; } .english #bloc #center #main .content .banner .b_txt .picMove .next:after{ text-indent: 0; line-height: 20px; height: 20px; top: 0; bottom: 0; margin: auto; } .english #bloc #center #main .content .bannerPro .aniBtn > a{ font-size: 0.12rem; overflow: hidden; } .english #pro .r5 .r_center > .mycontact{ padding: 0.2rem 0.3rem; } .english #new .r2 .rowMain .r_top .hot{ top: 130%; left: 0; padding-left: 1.4rem; } .english #new .r2 .rowMain .r_top .hot .skewBox > a.Tcon,.english #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox > a.Tcon,.english #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox > a.Tcon{ position: relative; } .english #new .r3 .rowMain .r_top .title .title_item,.english #new .r4 .rowMain .r_top .title .title_item{ left: 0; top: 155%; } .english #new .r3 .rowMain .r_top .title .title_item > li > a,.english #new .r4 .rowMain .r_top .title .title_item > li > a{ font-size: 0.16rem; } .english #baogao .r3 .r_center > ul > li:after,.english #gonggao .r3 .r_center > ul > li:after, #zhili .r3 .r_center > ul > li:after{ line-height: 0.2rem; font-size: 0.14rem; } .english #bloc #center #main .content .bannerPro .Tboli > li.skewBox > a.Tcon{ line-height: 0.2rem; width: 90%; } .english #index .r2 .rowMain .half > div:nth-child(1) h4.show > small,.english #bloc #center #main .content .banner .b_txt > small{ text-transform: inherit; } .english #bloc #center #main .content .banner .b_txt{ left: 10%; } .english .about .founder_text{ font-size: 0.2rem!important; } .english #about_3 .r2 .r_center .picBox > ul .adr_dot > span{ width: auto; } .english #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div{ transform: none; } @media screen and (max-width: 800px) { .english #bloc #center #main .content .banner .b_txt > small { font-size: 12px !important; line-height: 16px; } .english #about_3 .r1 .top_p{ font-size: 0.14rem; } .english #about_5 .r4 .r_center .brandItem > li > small{ line-height: 18px; font-size: 0.14rem; text-transform: initial; } .english #bloc #center #main .content .banner .b_txt > span{ letter-spacing: 0px; } .english #bloc #center #main .content .banner .b_txt > span{ font-size: 0.28rem; } .english #about_6 .r3 .r_center .fu_activity .box > .cell > span{ line-height: 18px; } .english #about_6 .r3 .r_center .fu_activity .box > .cell > p{ line-height: 0.4rem; } .english #pro_nav .r1 .pro_type:hover, #pro_nav .r1 .pro_type.on{ width: 50%; } .english #pro_nav .r1 .pro_type:nth-child(5):hover h5 .layout-ul{ left: -16%; } .english .layout-ul > li > span > small{ font-size: 12px; } .english .layout-ul > li > span > small{ line-height: 12px; } .english #pro_nav .r1 .pro_type:hover h5 .layout-ul,.english #pro_nav .r1 .pro_type.on h5 .layout-ul{ width: 90%; } .english .layout-ul{ left: -38%; } .english #pro .r5 .r_center{ line-height: 0.8rem; } .english #pro .guidao_list .skewBox > small > a{ display: inline-block; height: 70px; line-height: 22px; margin-top: 22px; } .english #bloc #center #main .content .banner .b_txt > span{ margin-bottom: 8px; } }