@charset "utf-8"; a, .transition, .g-head, .g-foot .btn li .ewm, .side-bar, .index-about .list li, .index-about .list li .layer, .index-about .list li .layer h3, .index-about .list li .layer .container, .index-business .head .btn li, .index-news .list li, .index-news .list li a .img, .technology-3 .list-wrapper li, .technology-3 .list-wrapper li .time, .technology-4 .list li:after, .technology-4 .list li .name, .page-layer, .product-5 .list li, .product-5 .list li .ico, .lyb-layer .container .form li .input, .report .form li .input, .lyb .form li .input, .lyb-layer .container .form li .select dd, .report .form li .select dd, .lyb .form li .select dd, .lyb-layer .container .submit div, .report .submit div, .lyb .submit div, .business-2 .list li, .business-3 .list a .layer .btn, .programme-6 .btn li, .about-2 li, .about-2 li h2:after, .about-2 li .content, .about-3 .list2 .line, .about-4 .list li, .about-4 .list li .name, .about-4 .list li .layer, .news li, .join-1 li .name, .ewm-layer, .technology-1 .btn dd, .technology-1 .list li div.title, .technology-1 .list li.li_01 .line, .technology-1 .list li.li_01 dt, .technology-1 .list li.li_01 dd, .technology-1 .list li.li_02 .light, .technology-1 .list li.li_02 h2.title, .technology-1 .list li.li_02 dd, .technology-1 .list li.li_03 .yuan, .technology-1 .list li.li_03 dd, .technology-1 .list li.li_04 .yuan, .technology-1 .list li.li_04 dd, .technology-1 .list li.li_05 .yuan, .technology-1 .list li.li_05 dl.dl_01 dd, .technology-1 .list li.li_05 dl.dl_02 dd, .business-6 .list li, .business-6 .list li h3, .business-6 .list li .layer, .kass-3 a.btn em, .kass-2 .title ul li, .kass-layer, :before, img, .g-nav { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .ellipsis, .business-6 .list li .layer dd a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .flex, .g-head .btn, .g-foot .list li, .g-foot .list2 li, .default .layer, .indexflash li .layer, .indexflash li .layer2 h2, .indexflash .dots, .index-about .list ul, .index-business .head .btn ul, .index-news .list ul, .p-title h2, .page-layer, .technology-layer li .name, .product-1 .btn ul, .business .arrow, .business-2 .arrow, .business .btn, .business-2 .title, .business-3 .list a .layer .btn, .business-4 .list li a, .report .container .list li, .report .container .list2 dl.radio, .programme-6 .btn ul, .programme-6 .list a, .about-2 li h2, .about-4 .list ul, .p-nav dl, .join-1 li, .ewm-layer, .technology-1 .list li.li_04 dl, .technology-1 .list li.li_05 dl.dl_01, .technology-1 .list li.li_05 dl.dl_02, .business-6 .list ul, .business .list2 li, .kass-3 a.btn, .kass-2 .title ul, .kass-layer .title2, .kass-show-2 .list li, .kass-show-2 .list li h3, .kass-show-3 .img-list .num, .business-7 .list .arrow,.index-partner .btn dl { display: flex; display: -webkit-flex; display: -ms-flex; } .flexcolumn, .indexflash li .layer2, .index-about .list li .layer, .p-banner, .technology-4 .list li, .product-4 .list .content, .programme-1 .list li .p-content, .about-2 li, .about-4 .list li, .ewm-layer .container, .technology-1 .btn dl, .technology-1 .list li.li_01 dd, .technology-1 .list li.li_02 dd, .technology-1 .list li.li_04 dd, .kass-layer, .business-7 .title { display: flex; display: -webkit-flex; display: -ms-flex; flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; } .itemscenter, .g-foot .list li, .g-foot .msg, .indexflash li .layer2, .p-banner, .p-title h2, .technology-4 .list li, .page-layer, .technology-layer li .name, .product-4 .list .content, .business .btn, .business-2 .title, .business-3 .list a .layer .btn, .business-4 .list li a, .programme-6 .list a, .about-2 li h2, .about-4 .list li, .join-1 li, .ewm-layer, .ewm-layer .container, .technology-1 .btn dl, .technology-1 .list li.li_01 dd, .technology-1 .list li.li_02 dd, .technology-1 .list li.li_04 dd, .business .list2 li, .kass-3 a.btn, .kass-layer, .kass-layer .title2, .kass-show-2 .list li, .kass-show-2 .list li h3, .kass-show-3 .img-list .num, .business-7 .title { align-items: center; -webkit-align-items: center; } .justifycenter, .g-nav ul, .default .layer, .indexflash li .layer, .indexflash li .layer2, .p-banner, .p-title h2, .technology-4 .list li, .page-layer, .product-1 .btn ul, .product-4 .list .content, .product-5 .list ul, .business-4 .list li a, .programme-1 .list li .p-content, .about-2 li, .about-4 .list li, .p-nav dl, .ewm-layer, .ewm-layer .container, .technology-1 .btn dl, .technology-1 .list li.li_01 dd, .technology-1 .list li.li_02 dd, .technology-1 .list li.li_04 dd, .technology-1 .list li.li_05 dl.dl_01, .kass-3 a.btn, .kass-layer, .business-7 .title { justify-content: center; -webkit-justify-content: center; } .flexaround { justify-content: space-around; -webkit-justify-content: space-around; } .flexbetween, .index-technology .list ul, .technology-2 .list2 ul, .product-3 ul, .lyb-layer .container .form ul, .report .form ul, .lyb .form ul, .business .arrow, .business-2 .arrow, .business .list dl, .report .wal, .programme-1 .list ul, .programme-6 .list ul, .case-1 .wal, .case-2 .list ul, .about-1 .list ul, .join-1 ul, .join-2 li, .technology-1 .list li.li_04 dl, .technology-1 .list li.li_05 dl.dl_02, .business .list2 ul, .kass-show-2, .kass-show-3 .wal, .kass-show-5 .list ul, .business-7 .wal, .business-7 .list .arrow { justify-content: space-between; -webkit-justify-content: space-between; } .flexwrap, .g-nav ul, .g-foot .list2 li dl, .g-foot .msg, .index-technology .list ul, .technology-2 .list2 ul, .product-3 ul, .product-5 .list ul, .lyb-layer .container .form ul, .report .form ul, .lyb .form ul, .business .list dl, .business-3 .list ul, .report .wal, .programme-1 .list ul, .programme-5 .list ul, .programme-6 .list ul, .case-1 .wal, .case-2 .list ul, .about-1 .list ul, .about-2 ul, .news-1 ul, .news ul, .join-1 ul, .join-2 li, .business .list2 ul, .kass-layer .form ul, .kass-layer .list ul, .kass-show-1 .list ul, .kass-show-2, .kass-show-3 .wal, .kass-show-5 .list ul, .business-7 .wal, .business-partner .list li dl,.business .list3 ul,.business .list3 ul{ display: flex; display: -webkit-flex; display: -ms-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } * { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } html { font-size: 100px; } body { font-size: 12px; font-family: arial, "微软雅黑"; color: #333; -webkit-text-size-adjust: none; opacity: 0; } body.show { opacity: 1; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } a { color: #333; text-decoration: none; outline: none; } a:active { star: expression(this.onfocus=this.blur()); } a:link { text-decoration: none; outline: none; } a:visited { text-decoration: none; outline: none; } a:hover { text-decoration: none; color: #d80c18; outline: none; } li { list-style: outside none; } h1 { font-size: 16px; } h2, h3, h4, h5 { font-size: 14px; } h5 { font-size: 12px; } textarea, input { background: transparent; font-size: 12px; font-family: arial, "微软雅黑"; color: #888; outline: none; border: 0; } em { font-style: normal; } img { vertical-align: middle; border: 0; } .fl { float: left; } .fr { float: right; } .clear { clear: both; height: 0; display: block; _display: inherit; } .before { content: ""; display: block; position: absolute; left: 50%; top: 0; } .h10 { height: 0.1rem; overflow: hidden; clear: both; } .h50 { height: 0.5rem; overflow: hidden; clear: both; } .wal { max-width: 12.5rem; margin: 0 auto; } @font-face { font-family: "oswald"; src: format("woff2"), format("woff"), format("truetype"), format("embedded-opentype"), format("svg"); font-weight: normal; font-style: normal; } .g-headd { height: 0.95rem; } .g-head { position: fixed; z-index: 50; left: 0; top: 0; width: 100%; } .g-head:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; height: 1.55rem; background: center repeat-x; background-size: auto 100%; } .g-head .wal { min-height: 0.95rem; position: relative; max-width: 100%; margin: 0 .5rem; } .g-head a.logo { display: block; background: center no-repeat; background-size: 100%; width: 1.7rem; height: 100%; position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; } .g-head .btn { position: absolute; z-index: 10; left: auto; right: -0.2rem; top: 50%; bottom: auto; margin-top: -.17rem; } .g-head .btn a { width: .6rem; height: .34rem; line-height: .34rem; text-align: center; font-size: .16rem; color: #fff; text-transform: uppercase; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; margin-left: 2px; } .g-head .btn a:hover, .g-head .btn a.on { background: #d80c18; } /* .g-head #top_member { position: absolute; z-index: 10; left: auto; right: 0.5rem; top: 50%; bottom: auto; margin-top: -.17rem; } .g-head #top_member #top_login_no{ overflow:hidden;} .g-head #top_member #top_login_no .btn_member{ float:left;padding:6px 12px;} .g-head #top_member #top_login_no .btn_member a{ height: .34rem; line-height: .34rem; font-size: .16rem; color:#fff; padding-right:.14rem; } .g-head #top_member #top_login_no .btn{ float:left;} .g-head #top_member #top_login_no .btn a { width: .6rem; height: .34rem; line-height: .34rem; text-align: center; font-size: .16rem; color: #fff; text-transform: uppercase; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; margin-left: 2px; } .g-head #top_member #top_login_no .btn a:hover, .g-head #top_member #top_login_no .btn a.on { background: #d80c18; } .g-head #top_member #top_login_ok { overflow:hidden;} .g-head #top_member #top_login_ok .btn_member{ float:left;padding:6px 12px;} .g-head #top_member #top_login_ok .btn_member a{ height: .34rem; line-height: .34rem; font-size: .16rem; color:#fff; padding-right:.14rem; } .g-head #top_member #top_login_ok .btn{ float:left;} .g-head #top_member #top_login_ok .btn a { width: .6rem; height: .34rem; line-height: .34rem; text-align: center; font-size: .16rem; color: #fff; text-transform: uppercase; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; margin-left: 2px; } .g-head #top_member #top_login_ok .btn a:hover, .g-head #top_member #top_login_ok .btn a.on { background: #d80c18; } */ .g-nav { position: absolute; z-index: 5; left: auto; right: 0; top: 0; bottom: auto; width: 100%; } .g-nav li { position: relative; } .g-nav a.name { display: block; height: 0.95rem; line-height: 0.95rem; font-size: .16rem; color: #fff; position: relative; padding: 0 .33rem; } .g-nav a.name:before { content: ""; display: block; position: absolute; left: 50%; right: 50%; top: .8rem; height: .02rem; background: #c22c33; opacity: 0; } .g-nav a.name.on { color: #c22c33; } .g-nav a.name.on:before { opacity: 1; left: .33rem; right: .33rem; } @media screen and (min-width: 800px) { .g-head.hide { top: -1.55rem; } .g-nav .list { width: .82rem; background: #fff; position: absolute; z-index: 10; left: 50%; right: auto; top: 0.82rem; bottom: auto; margin-left: -.41rem; padding: 0 .1rem .1rem; opacity: 0; visibility: hidden; } .g-nav .list-1 { width: 3.08rem; margin-left: -1.09rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; padding: .25rem .3rem .25rem 0; } .g-nav .list-1 .side { width: 1.87rem; } .g-nav .list-1 .side dd { line-height: .43rem; height: .44rem; font-size: .18rem; font-weight: bold; color: #666; padding-left: .5rem; position: relative; } .g-nav .list-1 .side dd.on { color: #c22c33; } .g-nav .list-1 .side dd.on:before { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 1px; height: .16rem; margin-top: -.08rem; background: #c22c33; } .g-nav .list-1 .list2 { width: 2.68rem; display: none; padding-left:0.4rem;} .g-nav .list-1 .list2 h3 { display: none; } .g-nav .list-1 .list2 dd { border-bottom: #ccc solid 1px; } .g-nav .list-1 .list2 dd a { display: block; height: .44rem; line-height: .43rem; font-size: .14rem; color: #666; position: relative; } .g-nav .list-1 .list2 dd a:before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; right: 0; height: 1px; background: #c22c33; opacity: 0; } .g-nav .list-1 .list2 dd a em { padding-right: .34rem; display: inline-block; position: relative; } .g-nav .list-1 .list2 dd a em:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; background: right center no-repeat; background-size: 100%; width: .07rem; } .g-nav .list-1 .list2 dd a:hover { color: #c22c33; } .g-nav .list-1 .list2 dd a:hover:before { opacity: 1; } .g-nav .list-1 .list2 dd a.on { color: #c22c33; border-color: #c22c33; } .g-nav .list-1 .list2 dd a.on:before { opacity: 1; } .g-nav .list-1 .list2 dd a.on em:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } .g-nav .list-1 .list2 dd dl { border-top: #ccc solid 1px; padding: .06rem 0; display: none; } .g-nav .list-1 .list2 dd dl dd { border: 0; padding: .06rem 0; } .g-nav .list-1 .list2 dd dl a { height: .2rem; line-height: .2rem; display: inline-block; } .g-nav .list-1 .list2 dd:last-child { border: 0; } .g-nav .list-2 a { display: block; text-align: center; border-bottom: #ccc solid 1px; line-height: .43rem; font-size: .14rem; color: #666; } .g-nav .list-2 a:hover { color: #c22c33; border-color: #c22c33; } .g-nav .list-2 dd:last-child a { border: 0; } .g-nav li:hover .list { opacity: 1; visibility: visible; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .g-nav li:hover a.name { color: #c22c33; } .g-nav li:hover a.name:before { opacity: 1; left: .33rem; right: .33rem; } } .g-foot { background: #f0f0f0; position: relative; color: #666; font-size: .14rem; } .g-foot a { color: #666; } .g-foot a:hover { color: #c22c33; } .g-foot:before { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: .62rem; height: 1px; background: #d4d4d4; } .g-foot .wal { min-height: 4.55rem; position: relative; } .g-foot .tel { padding: .68rem 0 .5rem 0; } .g-foot .tel div { font-size: .18rem; padding-left: .28rem; background: left center no-repeat; background-size: .22rem; line-height: .24rem; } .g-foot .tel h2 { font-family: 'oswald'; font-weight: 400; font-size: .36rem; letter-spacing: .03rem; line-height: .5rem; } .g-foot .list .ico { width: .18rem; margin-right: .06rem; } .g-foot .list li { height: .31rem; } .g-foot .list2 { position: absolute; z-index: 10; left: 6rem; right: auto; top: 1rem; bottom: auto; } .g-foot .list2 h3 { font-size: .27rem; padding-bottom: .28rem; font-weight:bold; } .g-foot .list2 li { font-size: .14rem; line-height: .3rem; } .g-foot .list2 li dl { width:3.5rem; } .g-foot .list2 li dd { padding-right: .3rem;padding-bottom: .1rem; font-size:.15rem; } .g-foot .btn { position: absolute; z-index: 10; left: auto; right: 0; top: 0.95rem; bottom: auto; width: 1.94rem; } .g-foot .btn li { position: relative; height: .6rem; } .g-foot .btn li .name { display: block; } .g-foot .btn li .ewm { width: 1.02rem; position: absolute; z-index: 10; left: auto; right: 0.44rem; top: 0; bottom: auto; opacity: 0; visibility: hidden; } .g-foot .btn li:hover .ewm { opacity: 1; visibility: visible; right: .6rem; } .g-foot .msg { position: absolute; z-index: 10; left: 0; right: 0; top: auto; bottom: 0; height: .62rem; } .g-foot .msg p { opacity: .5; } .g-foot .msg div { position: absolute; z-index: 10; left: auto; right: 0; top: auto; bottom: auto; } .g-foot .msg div em { padding: 0 .05rem; } .side-bar { position: fixed; z-index: 30; bottom: 3rem; right: .5rem; opacity: 0; visibility: hidden; } .side-bar.show { opacity: 1; visibility: visible; } .side-bar li { padding-bottom: .1rem; } .side-bar a { display: block; background: #c6151d; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .side-bar a:hover { background: #c22c33; } .default { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #000; } .default .layer { position: absolute; z-index: 10; left: 0; right: 0; top: 50%; bottom: auto; color: #fff; margin-top: -1rem; } .default .layer h2 { font-size: .51rem; position: relative; height: .5rem; line-height: .5rem; } .default .layer h2:nth-child(1) { padding-right: .7rem; } .default .layer h2:nth-child(1):after { content: ""; display: block; position: absolute; top: 50%; right: .37rem; width: .04rem; height: .5rem; background: #c22c33; margin-top: -.25rem; } .default canvas { position: absolute; z-index: 10; left: 50%; right: auto; top: 50%; bottom: auto; min-height: 100%; min-width: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } /*index*/ .indexflash { width: 100%; overflow: hidden; position: relative; } .indexflash li { height: 9rem; background: center no-repeat; background-size: cover; max-height: 100vh; position: relative; } .indexflash li .layer { position: absolute; z-index: 10; left: 0; right: 0; top: 3.45rem; bottom: auto; font-size: .51rem; font-weight: bold; color: #fff; } .indexflash li .layer:before { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: .04rem; height: .5rem; background: #d80c18; margin-top: -.25rem; margin-left: -.02rem; } .indexflash li .layer p { padding: 0 .45rem; } .indexflash li .layer2 { position: absolute; z-index: 10; right:0.64rem; top: 0; bottom: 0; color: #fff; text-align: center; } .indexflash li .layer2 .img { width: 5.46rem; padding-bottom: .85rem; } .indexflash li .layer2 .img2 { width: 3.99rem; padding-top: 1rem; } .indexflash li .layer2 h2 { font-size: .54rem; line-height: .68rem; } .indexflash li .layer2 h2 em { padding-left: .54rem; position: relative; } .indexflash li .layer2 h2 em:before { content: ""; display: block; position: absolute; left: .25rem; top: 50%; width: .04rem; height: .5rem; background: #d80c18; margin-top: -.25rem; } .indexflash li .layer2 .more { padding-top: 6.68rem; } .indexflash li .layer2 .more a { -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; display: block; color: #fff; background: rgba(191, 21, 29, 0.7); width: 1.9rem; height: .41rem; line-height: .41rem; font-size: .14rem; } .indexflash li .layer2 .more a em { background: right center no-repeat; background-size: .38rem; } .indexflash li .layer2 .more a:hover { background: #c22c33; } .indexflash .dots { position: absolute; z-index: 10; left: 50%; right: auto; top: auto; bottom: 0.5rem; margin-left: -6.25rem; } .indexflash .dots span { width: .65rem; height: .04rem; margin-left: .16rem; background: #fff; -moz-border-radius: 0.04rem; -webkit-border-radius: 0.04rem; border-radius: 0.04rem; position: relative; } .indexflash .dots span:before { content: ""; display: block; position: absolute; left: -.1rem; top: 0; width: .04rem; height: .04rem; background: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .indexflash .dots span:first-child:before { display: none; } .indexflash .dots span.swiper-pagination-bullet-active { background: #d80c18; } a.p-more { font-size: .22rem; display: block; line-height: .4rem; text-transform: uppercase; color: #666; width: 1.3rem; position: relative; letter-spacing: .01rem; } a.p-more:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; width: .36rem; background: right center no-repeat; background-size: auto .12rem; } a.p-more:hover { color: #c22c33; } a.p-more:hover:before { background-image: ; width: .56rem; right: -.2rem; } a.p-more2 { color: #fff; } a.p-more2:before { background-image: ; } a.p-more2:hover { color: #c22c33; } a.p-more2:hover:before { background-image: ; } .index-title { position: relative; max-width: 8.9rem; } .index-title h2 { font-size: .46rem; line-height: 1em; padding-bottom: .12rem; } .index-title p { font-size: .18rem; color: #999; max-width: 5.65rem; line-height: .31rem; } .index-title a.p-more { position: absolute; z-index: 10; left: auto; right: 0; top: 50%; bottom: auto; margin-top: -.2rem; } .w1400 { position: relative; max-width: 1400px; margin: 0 auto; width: 92% } .wel-case .flex-control-nav { bottom: 20px } .wel-banner .flex-control-nav li, .wel-case .flex-control-nav li { margin: 0 2px } .wel-banner .flex-control-nav li a, .wel-case .flex-control-nav li a { width: 12px; height: 12px; background: url(/uploads/image/ephdimages/btn01.png) no-repeat center; background-size: 100% 100%; transition: background .3s; box-shadow: none } .manage-bot .flex-control-nav { display: none } .wel-banner .flex-control-paging li a.flex-active, .wel-banner .flex-control-paging li a:hover, .wel-case .flex-control-nav li a:hover, .wel-case .flex-control-nav li a.flex-active { background: url(/uploads/image/ephdimages/btn01_h.png) no-repeat center; background-size: 100% 100%; box-shadow: none } .wel-case { padding: 42px 0 0 0; width: 100%; position: relative; overflow: hidden; background:#fff; } .ser-contact-list li a { display: block; width: 100% } .wel-case-title { font-size: 24px; color: #24272b; font-weight: bold; line-height: 42px; margin-bottom: 22px } .wel-case-list { padding-bottom: 86px } .wel-case .flex-viewport { overflow: visible !important } .wel-case .slides li { overflow: hidden; position: relative; float: left; width: 420px; margin-right: 25px } .wel-case .slides .con { position: absolute; bottom: -72%; left: 0; width: 100%; height: 100%; z-index: 2; display: block; padding: 9% 50px 0; transition: bottom .3s } .wel-case .slides .bg { width: 100%; position: absolute; top: 0; left: 0; height: 100%; background: #fff; z-index: 1; opacity: 0; filter: alpha(opacity=0) } .wel-case .slides .font-bg { width: 100%; position: absolute; top: 0; left: 0; height: 100%; background: #000; z-index: 1; opacity: 0; filter: alpha(opacity=0); transition-property: opacity; transition-duration: .3s; transition-delay: .2s } .wel-case .slides .tit { font-size: 18px; color: #fff; line-height: 25px; color: #fff; font-weight: bold } .wel-case .slides .en { font-size: 16px; color: #fff; opacity: .6; filter: alpha(opacity=60); line-height: 24px; min-height: 24px } .wel-case .slides .font { font-size: 18px; color: #fff; line-height: 34px; margin-top: 18px } .wel-case .slides .more { margin-top: 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: url(/uploads/image/ephdimages/wel02.png) no-repeat center } .wel-product { padding: 50px 0 60px; } .wel-product-title { font-size: 24px; color: #24272b; line-height: 42px; margin-bottom: 22px; font-weight: bold; position: relative } .wel-product-title a { display: inline-block; font-size: 14px; color: #24272b; position: absolute; top: 0; right: 0; width: 95px; transition: color .3s } .wel-product-title span { width: 20px; height: 20px; border-radius: 50%; background: #b0b0b0 url(/uploads/image/ephdimages/wel04.png) no-repeat center; display: inline-block; position: absolute; right: 0; top: 50%; margin-top: -12px; transition: background .3s } .wel-product .left { padding: 0 10px 0 0; width: 50%; float: left } .wel-product .right { padding: 0 0 0 10px; width: 50%; float: right } .wel-product .product-1 { padding: 0 10px 0 0; margin-bottom: 20px; height: auto; text-align: center } .wel-product .container a { width: 100%; text-align: center; height: 100%; display: block; background: #fff; overflow: hidden; position: relative; cursor: pointer; transition: box-shadow .3s } .wel-product .product-2 { padding: 0 0 0 10px; margin-bottom: 20px; height: 190px; text-align: center } .wel-product .product-3 { width: 100%; height: 393px; padding: 0 } .wel-product .product-3 .pic { height: 100%; position: relative; width: 100% } .wel-product .product-3 img { height: 100%; position: absolute; left: 50%; margin-left: -345px } .wel-product .contrast { width: 14px; height: 16px; background: url(/uploads/image/ephdimages/wel09.png) no-repeat center; position: absolute; bottom: 15px; right: 20px; cursor: pointer; transition: background .3s } .wel-product .ico-1 img { max-height: 100%; max-width: 100% } .wel-product .ico-1.ico_11 img { max-height: 100%; max-width: 100% } .wel-product .container { width: 100%; padding: 0 } .wel-product .container .row { margin: 0 } .wel-product .ico-1 h2 { font-size: 16px; color: #fff; position: absolute; bottom: 10px; line-height: 26px; height: 26px; width: 100%; text-align: left; padding: 0 15px 0 15px; overflow: hidden } .wel-product .ico-1 .toep h2 { font-size: 16px; color: #333; position: absolute; bottom: 10px; line-height: 26px; height: 26px; width: 100%; text-align: left; padding: 0 15px 0 15px; overflow: hidden; opacity:10; } .wel-product .ico-1 .bg { width: 100%; position: absolute; bottom: 0; left: 0; background: #dd231f; display: block; height: 0; transition: height .3s } .wel-product .product-4 { margin-bottom: 20px; width: 100%; padding: 0; height: auto; } .wel-product .product-4 img { max-height: 100%; width:100%; position: relative; left: 50%; margin-left: -101% } .wel-product .product-4 .toep { display: block; width: 100%; position: absolute; bottom: 0; left: 0; text-align: left; padding: 16px 45px 20px } .wel-product .product-4 .toep h2{ color:#333; opacity:10;} .wel-product .product-4 .toep p.font{ color:#333; opacity:10;} .wel-product .product-4 .con { display: block; width: 100%; position: absolute; bottom: 0; left: 0; text-align: left; padding: 16px 45px 20px } .wel-product .product-4 h2 { font-size: 16px; color: #fff; line-height: 26px; height: 26px; width: 100%; overflow: hidden } .wel-product .container h2, .wel-product .container p.font { opacity: 0; filter: alpha(opacity=0) } .wel-product .product-4 .bg { width: 100%; background: #dd231f; position: absolute; bottom: 0; left: 0; height: 0; transition: height .3s } .wel-product .product-4 .font { font-size: 14px; color: #fff; opacity: .7; filter: alpha(opacity=70); line-height: 24px; height: 24px; overflow: hidden } .wel-product .product-3 .contrast, .wel-product .product-4 .contrast { position: absolute; bottom: 40px; right: 45px } .wel-case-list .flex-direction-nav a { opacity: 1; filter: alpha(opacity=100); width: 66px; height: 77px; margin: -38px 0 0; text-shadow: none; background-size: 100% !important; transition: background .3s; z-index: 1 } .wel-case-list .flex-direction-nav a:before { font-size: 0 } .wel-case .flex-viewport { overflow: visible !important } .wel-case-list .flex-direction-nav .flex-prev { background: url(/uploads/image/ephdimages/a32.png) no-repeat center; left: -121px } .wel-case-list .flex-direction-nav .flex-next { background: url(/uploads/image/ephdimages/a33.png) no-repeat center; right: -121px } .wel-case-list .flex-direction-nav .flex-prev:hover { background: url(/uploads/image/ephdimages/a32_h.png) no-repeat center } .wel-case-list .flex-direction-nav .flex-next:hover { background: url(/uploads/image/ephdimages/a33_h.png) no-repeat center } .wel-case .slides li:hover .con { bottom: 0 } .wel-case .slides li:hover .font-bg { opacity: .3; filter: alpha(opacity=30) } .wel-product-title a:hover { color: #dd231f } .wel-product-title a:hover span { background: #dd231f url(/uploads/image/ephdimages/wel04.png) no-repeat center } .wel-product .container a:hover { box-shadow: 0 0 30px rgba(0, 0, 0, .1) } .wel-product a:hover .bg { height: 46px } .wel-product a:hover .contrast { background: url(/uploads/image/ephdimages/wel09_h.png) no-repeat center } .wel-product .container a:hover h2, .wel-product .container a:hover p.font { opacity: 1; filter: alpha(opacity=100) } .wel-product .product-4 a:hover .bg { height: 86px } .index-about { padding: 1.5rem 0 1.45rem 0; width: 100%; overflow: hidden; position: relative; } .index-about .list { margin-right: -3.6rem; margin-left: -.5rem; padding-top: .9rem; } .index-about .list li { width: 33.333%; height: 4.73rem; background: center no-repeat; background-size: cover; position: relative; overflow: hidden; } .index-about .list li:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; right: 0; top: 0; background: center bottom repeat-x; background-size: auto 1.1rem; } .index-about .list li .layer { position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; justify-content: flex-end; -webkit-justify-content: flex-end; padding: 0 .5rem; color: #fff; } .index-about .list li .layer h3 { font-size: .32rem; padding-bottom: .4rem; } .index-about .list li .layer .container { height: 0; overflow: hidden; } .index-about .list li .layer p { font-size: .16rem; line-height: .24rem; max-width: 5.6rem; } .index-about .list li .layer .more a { display: block; width: .86rem; height: .95rem; background: center no-repeat; background-size: 100%; } .index-about .list li.on:before { opacity: 0; } .index-about .list li.on .layer { background: rgba(0, 0, 0, 0.2); } .index-about .list li.on .layer h3 { color: #c22c33; } .index-about .list li.on .layer .container { height: 2.6rem; } .index-technology .list { padding-top: 1rem; } .index-technology .list li { width: 3.2rem; text-align: center; min-height: 5.5rem; } .index-technology .list li .ico { width: 2.5rem; margin: 0 auto; } .index-technology .list li h3 { font-size: .3rem; font-weight: 400; line-height: 1em; padding: .5rem 0 .25rem 0; } .index-technology .list li p { font-size: .18rem; line-height: .32rem; color: #666; } .index-technology .list li:hover .ico { animation: updown 2s infinite linear; -webkit-animation: updown 2s infinite linear; } @keyframes updown { 0% { transform: translatey(0); } 25% { transform: translatey(-0.1rem); } 50% { transform: translatey(0); } 75% { transform: translatey(0.1rem); } 100% { transform: translatey(0); } } @-webkit-keyframes updown { 0% { -webkit-transform: translatey(0); } 25% { -webkit-transform: translatey(-0.1rem); } 50% { -webkit-transform: translatey(0); } 75% { -webkit-transform: translatey(0.1rem); } 100% { -webkit-transform: translatey(0); } } .index-business { position: relative; color: #fff; } .index-business .head { position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: auto; } .index-business .head .wal { position: relative; padding-top: 1.25rem; } .index-business .head .index-title p { color: #fff; } .index-business .head .btn { position: absolute; z-index: 10; left: auto; right: -0.12rem; top: 1.17rem; bottom: auto; } .index-business .head .btn li { width: .8rem; height: .86rem; text-align: center; position: relative; font-size: .27rem; line-height: .37rem; padding-top: .06rem; margin-left: .68rem; letter-spacing: .01rem; } .index-business .head .btn li:after { content: ""; display: block; position: absolute; left: -.33rem; top: 50%; width: .08rem; height: .08rem; background: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-top: -.04rem; } .index-business .head .btn li:first-child:after { display: none; } .index-business .head .btn li:before { content: ""; display: block; position: absolute; left: 0; bottom: -.05rem; right: 0; height: .02rem; background: #bc333e; opacity: 0; } .index-business .head .btn li.on, .index-business .head .btn li:hover { background: #bc333e; } .index-business .head .btn li.on:before { opacity: 1; } .index-business .list { width: 100%; overflow: hidden; position: relative; } .index-business .list li { height: 8rem; background: center no-repeat; background-size: cover; padding-top: 3.45rem; } .index-business .list h3 { font-size: .38rem; } .index-business .list dl { min-height: 2.75rem 0; padding: .35rem 0; } .index-business .list dl dd { position: relative; padding-left: .26rem; font-size: .18rem; line-height: .32rem; } .index-business .list dl dd:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: .14rem; height: .32rem; background: center no-repeat; background-size: 100%; } .index-business .list p { font-size: .18rem; padding: .15rem 0 .35rem 0; } .index-business .list a.p-more { color: #fff; } .index-business .list a.p-more:before { background-image: ; } .index-business .list a.p-more:hover { color: #c22c33; } .index-business .list a.p-more:hover:before { background-image: ; } .index-news { width: 100%; overflow: hidden; position: relative; } .index-news .wal { min-height: 9.45rem; } .index-news .index-title { padding: 2rem 0 .8rem 0; } .index-news .btn { min-height: 2.45rem; } .index-news .btn a { display: block; font-size: .18rem; line-height: .46rem; color: #666; } .index-news .btn a:hover, .index-news .btn a.on { color: #c22c33; } .index-news .list { position: absolute; z-index: 10; left: 50%; right: 0; top: 0; bottom: 0; margin-left: -3.2rem; } .index-news .list li { height: 9.45rem; width: 33.333%; border-left: #e1e1e1 solid 1px; padding-top: 2rem; } .index-news .list li a { display: block; padding: 0 .55rem 0 .25rem; color: #666; position: relative; } .index-news .list li a:before { content: ""; display: block; position: absolute; left: -1px; top: -2rem; width: 1px; background: #c22c33; height: 0; } .index-news .list li a h3 { font-size: .2rem; line-height: .27rem; height: .54rem; overflow: hidden; } .index-news .list li a .time { padding: .1rem 0 .25rem 0; font-size: .12rem; } .index-news .list li a p { font-size: .16rem; line-height: .22rem; height: .66rem; overflow: hidden; max-width: 3.85rem; } .index-news .list li a .more { height: 1.3rem; position: relative; } .index-news .list li a .more:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: .86rem; height: .8rem; background: center no-repeat; background-size: 100%; } .index-news .list li a .img { height: 1.8rem; background: center no-repeat; background-size: cover; margin-left: -.05rem; margin-right: -.05rem; } .index-news .list li.on { width: 47%; flex-shrink: 0; -webkit-flex-shrink: 0; } .index-news .list li.on a { color: #c22c33; } .index-news .list li.on a:before { height: 2.15rem; top: .06rem; } .index-news .list li.on a .more:before { background-image: ; } .index-news .list li.on a .img { height: 3.58rem; } .index-news .news-1 { display: none; padding: .5rem .3rem 0 .3rem; } /*page*/ .p-banner { background: center no-repeat; background-size: cover; height: 6rem; text-align: center; color: #fff; padding-top: .5rem; } .p-banner h2 { font-size: .51rem; position: relative; line-height: 1em; padding: .3rem 0; } .p-banner h2:before { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: .5rem; height: .04rem; background: #c22c33; margin-left: -.25rem; } .p-banner a.btn { font-size: .18rem; color: #fff; background: center top no-repeat; background-size: .52rem; padding-top: .7rem; margin-top: .4rem; } .p-banner p { font-size: .32rem; font-weight: bold; padding-top: .38rem; } .p-banner p.p-1 { font-size: .25rem; line-height: .4rem; padding-top: .15rem; } .p-title h2 { font-size: .46rem; line-height: 1em; } .p-title h2 span { position: relative; padding-right: .67rem; } .p-title h2 span:before { content: ""; display: block; position: absolute; top: 0; right: .32rem; bottom: 0; width: .04rem; background: #c33037; } .technology-2 { min-height: 9.85rem; position: relative; padding-top: 1.35rem; background: center 0.43rem no-repeat; background-size: auto 6.91rem; } .technology-2 h3 { text-align: center; font-size: .28rem; line-height: 1em; padding-top: .28rem; } .technology-2 .list { height: 1.8rem; position: relative; } .technology-2 .list li { width: .32rem; height: .32rem; position: absolute; z-index: 10; left: 50%; right: auto; top: auto; bottom: auto; margin-left: -.16rem; margin-top: -.16rem; } .technology-2 .list li:after { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: .04rem; height: .04rem; background: #c32f36; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-left: -.02rem; margin-top: -.02rem; } .technology-2 .list li i { display: block; position: absolute; z-index: 10; left: 50%; right: auto; top: 50%; bottom: auto; width: .6rem; height: .6rem; border: #c32f36 solid 1px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-left: -.3rem; margin-top: -.3rem; opacity: 0; animation: technology-anim 2s infinite linear; -webkit-animation: technology-anim 2s infinite linear; } .technology-2 .list li i:nth-child(2) { animation-delay: 1s; -webkit-animation-delay: 1s; } .technology-2 .list li .name { position: absolute; z-index: 10; left: auto; right: auto; top: -0.22rem; bottom: auto; font-size: .16rem; white-space: nowrap; line-height: 1em; } .technology-2 .list li.li_01 { margin-left: -2.97rem; top: 1.08rem; } .technology-2 .list li.li_01 .name { left: -.1rem; } .technology-2 .list li.li_02 { margin-left: -2.63rem; top: 1.02rem; } .technology-2 .list li.li_02 .name { left: -.06rem; } .technology-2 .list li.li_03 { margin-left: -2.02rem; top: 1.11rem; } .technology-2 .list li.li_03 .name { left: -.2rem; top: -.2rem; } .technology-2 .list li.li_04 { margin-left: -1.9rem; top: .93rem; } .technology-2 .list li.li_04 .name { left: .1rem; } .technology-2 .list li.li_05 { margin-left: -1.78rem; top: 1.11rem; } .technology-2 .list li.li_05 .name { left: .36rem; top: 0; } .technology-2 .list li.li_06 { margin-left: -2.12rem; top: 1.47rem; } .technology-2 .list li.li_06 .name { left: .36rem; top: .07rem; } .technology-2 .list li.li_07 { margin-left: 3.39rem; top: .8rem; } .technology-2 .list li.li_07 .name { left: -.3rem; } .technology-2 .list2 li { width: 5.25rem; min-height: 2.85rem; position: relative; padding: 0 0 0 1.05rem; color: #666; } .technology-2 .list2 li b { color: #c33037; position: absolute; z-index: 10; left: 0; right: auto; top: -0.5rem; bottom: auto; font-size: 1.5rem; line-height: 1em; } .technology-2 .list2 li h4 { font-size: .28rem; } .technology-2 .list2 li .name { font-size: .18rem; padding: .28rem 0 .12rem 0; } .technology-2 .list2 li dd { position: relative; font-size: .14rem; line-height: .25rem; padding-left: .2rem; } .technology-2 .list2 li dd:before { content: ""; display: block; position: absolute; left: 0; top: .075rem; width: .1rem; height: .1rem; background: #999; } .technology-2 .list2 li.li_03 { left: 4.7rem; } @keyframes technology-anim { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @-webkit-keyframes technology-anim { 0% { -webkit-transform: scale(0); opacity: 0; } 70% { -webkit-transform: scale(0.7); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 0; } } .technology-3 { background: center no-repeat; background-size: cover; min-height: 6.98rem; text-align: center; } .technology-3 .title { font-size: .18rem; padding: .8rem 0 .68rem 0; } .technology-3 .title h2 { font-size: .28rem; padding-bottom: .28rem; } .technology-3 .list { position: relative; } .technology-3 .list:before { content: ""; display: block; position: absolute; left: 0; top: 50%; right: 0; height: 1px; background: #c22c33; } .technology-3 .list .arrow a { display: block; width: .48rem; height: .48rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 10; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.24rem; background: #c22c33 center no-repeat; background-size: 100%; } .technology-3 .list .arrow a.prev { left: 0; background-image: ; } .technology-3 .list .arrow a.next { right: 0; background-image: ; } .technology-3 .list-wrapper { width: 100%; overflow: hidden; position: relative; background: center no-repeat; background-size: 1.91rem; } .technology-3 .list-wrapper:after { content: ""; display: block; position: absolute; left: 50%; top: 0; width: 2.2rem; height: 2.2rem; background: center no-repeat; background-size: 100%; margin-left: -1.1rem; animation: rotate-anim 2s infinite linear; -webkit-animation: rotate-anim 2s infinite linear; } .technology-3 .list-wrapper li { height: 2.2rem; position: relative; background: center no-repeat; background-size: .24rem; } .technology-3 .list-wrapper li .time { font-size: .16rem; color: #fff; width: 1.16rem; height: .3rem; line-height: .3rem; background: #c22c33; position: absolute; z-index: 10; left: 50%; right: auto; top: 1.5rem; bottom: auto; margin-left: -.508rem; margin-top: 0; } .technology-3 .list-wrapper li:nth-child(even) .time { top: .43rem; } .technology-3 .list-wrapper li.swiper-slide-active { background-size: 0; } .technology-3 .list-wrapper li.swiper-slide-active .time { background: rgba(0, 0, 0, 0); color: #c33037; font-size: .22rem; line-height: .3rem; top: 50%; margin-top: -.3rem; font-weight: bold; width: 1.2rem; margin-left: -.6rem; } .technology-3 .list-wrapper li.swiper-slide-active .time span { display: block; } .technology-3 .list-2 { padding: .45rem 0; color: #666; } .technology-3 .list-2 h3 { font-size: .28rem; padding-bottom: .2rem; } .technology-3 .list-2 p { font-size: .18rem; line-height: .32rem; } @keyframes rotate-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes rotate-anim { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate-anim2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @-webkit-keyframes rotate-anim2 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); } } .technology-4 { width: 100%; overflow: hidden; position: relative; text-align: center; padding-bottom: .6rem; } .technology-4 .title { padding: 1.15rem 0 .5rem 0; position: relative; z-index: 2; } .technology-4 .title h2 { font-size: .46rem; padding-bottom: .32rem; } .technology-4 .title p { font-size: .18rem; color: #666; } .technology-4 .list { min-height: 8.71rem; position: relative; background: center no-repeat; background-size: 2.85rem; } .technology-4 .list:before { content: ""; display: block; position: absolute; left: 50%; top: 0; width: 8.71rem; height: 8.71rem; margin-left: -4.355rem; background: center no-repeat; background-size: 100%; animation: rotate-anim 60s infinite linear; -webkit-animation: rotate-anim 60s infinite linear; } .technology-4 .list:after { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 11.22rem; height: 11.22rem; margin-left: -5.66rem; margin-top: -5.66rem; background: center no-repeat; background-size: 100%; animation: rotate-anim2 60s infinite linear; -webkit-animation: rotate-anim2 60s infinite linear; } .technology-4 .list .yuan { background: center no-repeat; background-size: 100%; position: absolute; left: 50%; top: 50%; width: 5.83rem; height: 5.83rem; margin-left: -2.915rem; margin-top: -2.915rem; animation: rotate-anim2 60s infinite linear; -webkit-animation: rotate-anim2 60s infinite linear; } .technology-4 .list li { width: 1.16rem; height: 1.16rem; position: absolute; z-index: 10; left: 50%; right: auto; top: 50%; bottom: auto; } .technology-4 .list li:after { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: 100%; animation: rotate-anim 30s infinite linear; -webkit-animation: rotate-anim 30s infinite linear; } .technology-4 .list li:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: 100%; opacity: 0; } .technology-4 .list li .ico { width: .38rem; height: .38rem; position: relative; z-index: 5; } .technology-4 .list li .ico img:nth-child(2) { position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; opacity: 0; } .technology-4 .list li .name { position: relative; font-size: .14rem; line-height: .18rem; color: #666; z-index: 5; padding-top: .04rem; } .technology-4 .list li.li_01 { margin-left: -.58rem; margin-top: -3.44rem; } .technology-4 .list li.li_02 { margin-left: .85rem; margin-top: -3.05rem; } .technology-4 .list li.li_03 { margin-left: 1.9rem; margin-top: -2rem; } .technology-4 .list li.li_04 { margin-left: 2.32rem; margin-top: -.48rem; } .technology-4 .list li.li_05 { margin-left: 1.9rem; margin-top: 1rem; } .technology-4 .list li.li_06 { margin-left: .85rem; margin-top: 1.92rem; } .technology-4 .list li.li_07 { margin-left: -.58rem; margin-top: 2.28rem; } .technology-4 .list li.li_08 { margin-left: -2.02rem; margin-top: 1.92rem; } .technology-4 .list li.li_09 { margin-left: -3.1rem; margin-top: 1rem; } .technology-4 .list li.li_10 { margin-left: -3.5rem; margin-top: -.48rem; } .technology-4 .list li.li_11 { margin-left: -3.08rem; margin-top: -2rem; } .technology-4 .list li.li_12 { margin-left: -2.02rem; margin-top: -3.05rem; } .technology-4 .list li:hover:after { opacity: 0; } .technology-4 .list li:hover:before { opacity: 1; } .technology-4 .list li:hover .ico img:nth-child(1) { opacity: 0; } .technology-4 .list li:hover .ico img:nth-child(2) { opacity: 1; } .technology-4 .list li:hover .name { color: #c22c33; } .page-layer { position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); opacity: 0; visibility: hidden; } .page-layer.show { opacity: 1; visibility: visible; } .page-layer .container { background: #fff; width: 12.5rem; min-height: 2rem; box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); -webkit-box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); -moz-box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); position: relative; } .page-layer a.close { display: block; width: .8rem; height: .8rem; background: center no-repeat; background-size: .3rem; position: absolute; z-index: 10; left: auto; right: 0; top: 0; bottom: auto; } .page-layer a.close:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .technology-layer li { padding: 0 1.3rem .7rem 1.3rem; } .technology-layer li .name { padding: .56rem 0 .24rem 0; } .technology-layer li .name .ico { width: .48rem; margin-right: .16rem; } .technology-layer li .name h3 { color: #c22c33; font-size: .28rem; } .technology-layer li .content { background: #f0f0f0; font-size: .18rem; color: #666; padding: .36rem .4rem; text-align: justify; line-height: 1.8em; } .p-content { font-size: .18rem; color: #666; text-align: justify; line-height: 1.8em; } .product-title { padding: 1.05rem 0 .55rem 0; } .product-title h2 { position: relative; padding-left: .22rem; font-size: .38rem; } .product-title h2:before { content: ""; display: block; position: absolute; left: 0; top: 50%; width: .07rem; height: .4rem; margin-top: -.2rem; background: #c22c33; } .p-title2 h2 { position: relative; font-size: .46rem; padding-bottom: .32rem; } .p-title2 h2:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: .4rem; height: .07rem; background: #c22c33; } .product-1 .p-title2 { padding: 1.55rem 0 .43rem 0; } .product-1 .p-content { padding-bottom: 1rem; } .product-1 .btn { height: .75rem; border-bottom: #ccc solid 1px; } .product-1 .btn a { display: block; height: .75rem; position: relative; padding: 0 .55rem; font-size: .28rem; color: #666; font-weight: 600; } .product-1 .btn a:before { content: ""; display: block; position: absolute; left: .55rem; right: .55rem; bottom: 0; height: 1px; background: #c22c33; opacity: 0; } .product-1 .btn a:hover, .product-1 .btn a.on { color: #c22c33; } .product-1 .btn a:hover:before, .product-1 .btn a.on:before { opacity: 1; } .product-2 { position: relative; padding-bottom: 1rem; min-height: 7.1rem; } .product-2 .p-title { padding: 1rem 0 .95rem 0; } .product-2 .scroll { max-width: 5.8rem; height: 3.7rem; overflow: hidden; position: relative; color: #666; } .product-2 .scroll h3 { position: relative; font-size: .28rem; line-height: 1em; padding-left: .2rem; } .product-2 .scroll h3:before { content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -.14rem; width: .04rem; height: .28rem; background: #c22c33; } .product-2 .scroll .list { padding: .2rem 0; min-height: 2.6rem; } .product-2 .scroll .list dd { position: relative; padding: 0 .17rem; line-height: .32rem; font-size: .18rem; } .product-2 .scroll .list dd:before { content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -.02rem; width: .04rem; height: .04rem; background: #999; } .product-2 .img { width: 5.77rem; position: absolute; z-index: 10; left: auto; right: 0; top: 1.05rem; bottom: auto; } .product-2 .img img{width:502px; height:502px} .product-3 { min-height: 7.2rem; background: #f7f7f7; } .product-3 .p-title { padding: .9rem 0 .75rem 0; } .product-3 li { width: 5.55rem; min-height: 1.55rem; position: relative; padding: 0 0 .6rem .72rem; color: #666; } .product-3 li .ico { width: .55rem; position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; } .product-3 li h3 { font-size: .28rem; line-height: .5rem; padding-bottom: .15rem; } .product-4 { border-bottom: #ccc solid 1px; padding-bottom: .8rem; } .product-4 .list { width: 100%; overflow: hidden; position: relative; } .product-4 .list li { position: relative; } .product-4 .list li img { width: 100%; } .product-4 .list .content { position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; text-align: center; color: #fff; font-size: .24rem; line-height: 1.8em; } .product-4 .list .num { position: absolute; z-index: 10; left: auto; right: 0.35rem; top: auto; bottom: 0.2rem; color: #fff; font-size: .18rem; } .product-4 .list .num .num-curr { font-size: .46rem; } .product-5 { text-align: center; } .product-5 .title { font-size: .32rem; color: #666; padding: .7rem 0 .8rem 0; position: relative; } .product-5 .title:before { content: ""; display: block; position: absolute; left: 50%; bottom: .55rem; width: .4rem; height: 1px; background: #c22c33; margin-left: -.2rem; } .product-5 .list { min-height: 2.1rem; } .product-5 .list li { width: 2.22rem; color: #666; cursor: pointer; } .product-5 .list li .ico { width: .72rem; height: .72rem; margin: 0 auto; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: relative; border: #ccc solid 1px; } .product-5 .list li .ico img:nth-child(2) { position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; opacity: 0; } .product-5 .list li .name { font-size: .16rem; line-height: .6rem; } .product-5 .list li:hover { color: #c22c33; } .product-5 .list li:hover .ico { border-color: #c22c33; } .product-5 .list li:hover .ico img:nth-child(1) { opacity: 0; } .product-5 .list li:hover .ico img:nth-child(2) { opacity: 1; } .lyb-layer .container .form li, .report .form li, .lyb .form li { width: 3.25rem; padding-bottom: .45rem; position: relative; } .lyb-layer .container .form li .ico, .report .form li .ico, .lyb .form li .ico { width: .22rem; height: .22rem; position: absolute; z-index: 10; left: 0; right: auto; top: 0.16rem; bottom: auto; } .lyb-layer .container .form li .ico img:nth-child(2), .report .form li .ico img:nth-child(2), .lyb .form li .ico img:nth-child(2) { position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; opacity: 0; } .lyb-layer .container .form li .name, .report .form li .name, .lyb .form li .name { position: absolute; left: .3rem; top: 0; line-height: .54rem; font-size: .16rem; color: #999; } .lyb-layer .container .form li .name em, .report .form li .name em, .lyb .form li .name em { color: #c22c33; } .lyb-layer .container .form li .input, .report .form li .input, .lyb .form li .input { min-height: .55rem; border-bottom: #ccc solid 1px; position: relative; } .lyb-layer .container .form li .input input, .lyb-layer .container .form li .input textarea, .report .form li .input input, .report .form li .input textarea, .lyb .form li .input input, .lyb .form li .input textarea { width: 100%; height: .54rem; line-height: .54rem; padding-left: .3rem; color: #c22c33; font-size: .16rem; } .lyb-layer .container .form li .input textarea, .report .form li .input textarea, .lyb .form li .input textarea { height: 1.1rem; line-height: .24rem; padding: .15rem 0 .15rem .3rem; } .lyb-layer .container .form li .select:before, .report .form li .select:before, .lyb .form li .select:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; width: .23rem; background: center no-repeat; background-size: 100%; } .lyb-layer .container .form li .select dl, .report .form li .select dl, .lyb .form li .select dl { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; bottom: auto; border: #ccc solid 1px; background: #fff; border-bottom: 0; display: none; max-height: 2.2rem; overflow-y: auto; } .lyb-layer .container .form li .select dd, .report .form li .select dd, .lyb .form li .select dd { line-height: .44rem; padding: 0 .29rem; border-bottom: #ccc solid 1px; color: #999; font-size: .16rem; } .lyb-layer .container .form li .select dd:hover, .report .form li .select dd:hover, .lyb .form li .select dd:hover { color: #c22c33; border-color: #c22c33; } .lyb-layer .container .form li .select span, .report .form li .select span, .lyb .form li .select span { display: block; line-height: .54rem; padding-left: .3rem; font-size: .16rem; color: #c22c33; } .lyb-layer .container .form li .select.on:before, .report .form li .select.on:before, .lyb .form li .select.on:before { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .lyb-layer .container .form li .select.on dl, .report .form li .select.on dl, .lyb .form li .select.on dl { display: block; } .lyb-layer .container .form li.on .ico img:nth-child(1), .report .form li.on .ico img:nth-child(1), .lyb .form li.on .ico img:nth-child(1) { opacity: 0; } .lyb-layer .container .form li.on .ico img:nth-child(2), .report .form li.on .ico img:nth-child(2), .lyb .form li.on .ico img:nth-child(2) { opacity: 1; } .lyb-layer .container .form li.on .name, .report .form li.on .name, .lyb .form li.on .name { display: none; } .lyb-layer .container .form li.on .input, .report .form li.on .input, .lyb .form li.on .input { border-color: #c22c33; } .lyb-layer .container .form li.li_01, .report .form li.li_01, .lyb .form li.li_01 { width: 100%; } .lyb-layer .container .submit, .report .submit, .lyb .submit { padding-top: .1rem; } .lyb-layer .container .submit div, .report .submit div, .lyb .submit div { background: #c22c33; } .lyb-layer .container .submit div:hover, .report .submit div:hover, .lyb .submit div:hover { background: #d80c18; } .lyb-layer .container .submit input, .report .submit input, .lyb .submit input { width: 100%; height: .52rem; font-size: .16rem; color: #fff; cursor: pointer; } .lyb-layer .container { padding: 0 .6rem .6rem; } .lyb-layer .container .title { text-align: center; padding: .45rem 0; } .lyb-layer .container .title h2 { font-size: .28rem; padding-bottom: .15rem; } .lyb-layer .container .title p { color: #999; text-align: center; } .lyb-layer-ok .container { width: 6.45rem; min-height: 2.88rem; text-align: center; } .lyb-layer-ok .container h3 { font-size: .28rem; padding: 1rem 0 .15rem 0; } .lyb-layer-ok .container p { font-size: .18rem; color: #999; } .business .arrow, .business-2 .arrow { position: relative; width: .68rem; height: .3rem; } .business .arrow:after, .business-2 .arrow:after { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 1px; height: .2rem; background: #ccc; margin-top: -.1rem; } .business .arrow a, .business-2 .arrow a { width: .3rem; height: .3rem; background: center no-repeat; background-size: .11rem; } .business .arrow a.prev, .business-2 .arrow a.prev { background-image: ; } .business .arrow a.prev:hover, .business-2 .arrow a.prev:hover { background-image: ; } .business .arrow a.next, .business-2 .arrow a.next { background-image: ; } .business .arrow a.next:hover, .business-2 .arrow a.next:hover { background-image: ; } .business { position: relative; padding: 0 0 0 3.14rem; min-height: 5.84rem; } .business h2 { font-size: .46rem; position: absolute; z-index: 10; left: 0; right: auto; top: 0.95rem; bottom: auto; } .business h3 { font-size: .28rem; padding: 1.15rem 0 .3rem 0; } .business .p-content { padding-bottom: .4rem; border-bottom: #ccc solid 1px; } .business .btn { height: .95rem; } .business .btn h4 { font-size: .18rem; padding-right: .2rem; } .business .list { width: 100%; overflow: hidden; position: relative; font-size: .18rem; color: #666; } .business .list .list-wrapper { margin-right: -.3rem; } .business .list dl { padding-right: .3rem; } .business .list .num { color: #c22c33; line-height: .4rem; padding-bottom: .1rem; } .business .list .num b { font-size: .48rem; display: inline-block; position: relative; top: .02rem; padding-right: .06rem; } .business .list3 { margin-left: -3.14rem; border: #ccc solid 1px; margin-bottom: .8rem; } .business .list3 ul { margin-left: -1px; } .business .list3 li { width: 25%; text-align: center; border-left: #ccc solid 1px; min-height: 3rem; padding-top: .45rem; } .business .list3 li .ico { width: 1rem; margin: 0 auto; } .business .list3 li h5 { font-size: .2rem; padding: .15rem 0; letter-spacing: .02rem; } .business .list3 li p { font-size: .14rem; line-height: .22rem; color: #666; } .business-2 { background: center no-repeat; background-size: cover; min-height: 7.97rem; color: #fff; } .business-2 .title { height: 1.9rem; } .business-2 .title h2 { font-size: .46rem; } .business-2 .title .arrow { margin-left: .2rem; opacity: 0; visibility: hidden; } .business-2 .title .arrow:after { background: #fff; } .business-2 .title .arrow a.prev { background-image: ; } .business-2 .title .arrow a.prev:hover { background-image: ; } .business-2 .title .arrow a.next { background-image: ; } .business-2 .title .arrow a.next:hover { background-image: ; } .business-2 .list { width: 100%; overflow: hidden; position: relative; } .business-2 .list .list-wrapper { margin-left: -.55rem; } .business-2 .list li { padding: 0 0 .55rem .55rem; } .business-2 .list li .img { width: 100%; overflow: hidden; position: relative; } .business-2 .list li .container { padding: .4rem 0 0 .24rem; position: relative; } .business-2 .list li .container:before { content: ""; display: block; position: absolute; left: 0; top: .43rem; width: 1px; height: 2.1rem; background: rgba(255, 255, 255, 0.5); } .business-2 .list li .name a { font-weight: bold; font-size: .2rem; display: block; line-height: .27rem; height: .54rem; overflow: hidden; color: #fff; } .business-2 .list li .time { font-size: .12rem; line-height: .3rem; } .business-2 .list li p { font-size: .16rem; line-height: .22rem; padding: .2rem 0; min-height: 1rem; } .business-2 .list li:hover { color: #c22c33; } .business-2 .list li:hover .img img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .business-2 .list li:hover .container:before { background: #c22c33; } .business-2 .list li:hover .name a { color: #c22c33; } .business-2-3 { background: none; min-height: 3rem; color: #333; } .business-2-3 .title { height: 1rem; padding-bottom: .5rem; } .business-2-3 .list li .container:before { background: #dcdcdc; } .business-2-3 .list li .name a { color: #333; } .business-2-2 { background: none; color: #666; } .business-2-2 .title { height: 1.15rem; } .business-2-2 .title h3 { padding-left: .18rem; font-size: .28rem; position: relative; color: #333; } .business-2-2 .title h3:before { content: ""; display: block; position: absolute; left: 0; top: 50%; width: .04rem; height: .26rem; background: #c22c33; margin-top: -.13rem; } .business-2-2 .title .arrow:after { background: #ccc; } .business-2-2 .title .arrow a.prev { background-image: ; } .business-2-2 .title .arrow a.prev:hover { background-image: ; } .business-2-2 .title .arrow a.next { background-image: ; } .business-2-2 .title .arrow a.next:hover { background-image: ; } .business-2-2 .list li .container:before { background: #ccc; } .business-2-2 .list li .name a { color: #666; } .business-3 h2 { font-size: .46rem; padding: .95rem 0 .75rem 0; } .business-3 .list ul { margin-left: -.55rem; } .business-3 .list li { width: 33.333%; padding: 0 0 .5rem .55rem; } .business-3 .list a { display: block; position: relative; color: #fff; } .business-3 .list a .img { width: 100%; overflow: hidden; position: relative; } .business-3 .list a .img:before { content: ""; display: block; position: absolute; z-index: 2; left: 0; bottom: 0; right: 0; top: 0; background: center bottom repeat-x; background-size: auto 1.79rem; } .business-3 .list a .layer { position: absolute; z-index: 10; left: 0.25rem; right: 0.25rem; top: auto; bottom: 0; } .business-3 .list a .layer .name { font-size: .2rem; line-height: .3rem; font-weight: 600; padding-bottom: .03rem; } .business-3 .list a .layer .btn { height: .75rem; font-size: .2rem; } .business-3 .list a .layer .btn:before { content: ""; display: block; position: absolute; position: relative; width: .4rem; height: .4rem; border: #fff solid 1px; background: center no-repeat; background-size: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-right: .1rem; } .business-3 .list a .layer .btn:hover { color: #c22c33; } .business-3 .list a .layer .btn:hover:before { border-color: #c22c33; background-color: #c22c33; } .business-3 .list a:hover .img img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .business-4 .arrow a, .business-5 .arrow a { display: block; width: .31rem; position: absolute; z-index: 10; left: auto; right: auto; top: 0; bottom: 0; background: center no-repeat; background-size: 100%; } .business-4 .arrow a.prev, .business-5 .arrow a.prev { left: 50%; margin-left: -7.15rem; background-image: ; } .business-4 .arrow a.prev:hover, .business-5 .arrow a.prev:hover { background-image: ; } .business-4 .arrow a.next, .business-5 .arrow a.next { right: 50%; margin-right: -7.15rem; background-image: ; } .business-4 .arrow a.next:hover, .business-5 .arrow a.next:hover { background-image: ; } .business-4 h2 { font-size: .46rem; padding: .5rem 0 .6rem 0; } .business-4 .list { width: 100%; overflow: hidden; position: relative; } .business-4 .list li a { background: center no-repeat; background-size: cover; text-align: center; color: #fff; height: 6rem; } .business-4 .list li a .name { font-size: .51rem; font-weight: bold; position: relative; padding-bottom: .3rem; } .business-4 .list li a .name:before { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: .5rem; height: .04rem; background: #c22c33; margin-left: -.25rem; } .business-5 { padding-bottom: 1.1rem; } .business-5 h2 { font-size: .46rem; padding: .95rem 0 .6rem 0; } .business-5 .list { position: relative; margin-left: -.275rem; margin-right: -.275rem; } .business-5 .list .list-wrapper { width: 100%; overflow: hidden; position: relative; } .business-5 .list li { padding: 0 .275rem; position: relative; } .business-5 .list li .img a { width: 100%; overflow: hidden; position: relative; display: block; } .business-5 .list li .img a:before { content: ""; display: block; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; background: center bottom repeat-x; background-size: auto 1.27rem; } .business-5 .list li .name a { display: block; position: absolute; z-index: 10; left: 0.275rem; right: 0.275rem; top: auto; bottom: 0.25rem; color: #fff; font-size: .18rem; line-height: .25rem; padding: 0 .2rem; } .business-5 .list li:hover .img a img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .business-5 .list li:hover .img a:before { background-image: ; } .business-5 .arrow a.prev { background-image: ; } .business-5 .arrow a.prev:hover { background-image: ; } .business-5 .arrow a.next { background-image: ; } .business-5 .arrow a.next:hover { background-image: ; } .business-case h2 { font-size: .46rem; padding: .95rem 0 .6rem 0; } .business-case .list { position: relative; } .business-case .list .list-wrapper { width: 100%; overflow: hidden; position: relative; } .business-case .list li { padding: 0 0 .9rem 4.5rem; position: relative; } .business-case .list li .img { width: 3.8rem; position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; } .business-case .list li h5 { position: relative; font-size: .2rem; line-height: .27rem; min-height: 1rem; padding: .15rem 0 .2rem 0; max-width: 5.1rem; font-weight: 400; letter-spacing: .02rem; } .business-case .list li h5:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; background: #d80c18; width: .23rem; height: .04rem; } .business-case .list li .container { padding: .3rem .6rem .3rem 1.4rem; background: #f0f0f0; min-height: 2.16rem; margin-left: -1.4rem; } .business-case .list li .container p { font-size: .16rem; line-height: .22rem; color: #666; min-height: 1rem; padding-bottom: .2rem; } .business-case .arrow a { display: block; width: .31rem; height: 2.54rem; position: absolute; z-index: 10; left: auto; right: auto; top: 0; bottom: auto; background: center no-repeat; background-size: 100%; } .business-case .arrow a.prev { background-image: ; left: -.9rem; } .business-case .arrow a.prev:hover { background-image: ; } .business-case .arrow a.next { background-image: ; right: -.9rem; } .business-case .arrow a.next:hover { background-image: ; } .business-partner { background: #e9e9e9; } .business-partner .wal { position: relative; min-height: 5.67rem; } .business-partner h2 { font-size: .46rem; padding: .85rem 0 .65rem 0; } .business-partner .more { position: absolute; z-index: 10; left: auto; right: 0; top: 1.15rem; bottom: auto; } .business-partner .list { position: relative; margin-left: -.13rem; margin-right: -.13rem; } .business-partner .list .list-wrapper { width: 100%; overflow: hidden; position: relative; } .business-partner .list li dd { padding: 0 .13rem .34rem .13rem; width: 20%; } .business-partner .list li a { display: block; background: #fff; } .business-partner .list li a img { width: 100%; } .business-partner .arrow a { display: block; width: .31rem; position: absolute; z-index: 10; left: auto; right: auto; top: 0; bottom: 0.34rem; background: center no-repeat; background-size: 100%; } .business-partner .arrow a.prev { background-image: ; left: -.77rem; } .business-partner .arrow a.prev:hover { background-image: ; } .business-partner .arrow a.next { background-image: ; right: -.77rem; } .business-partner .arrow a.next:hover { background-image: ; } .index-partner .wal { min-height: 6.9rem; } .index-partner h2 { padding: 1.15rem 0 .35rem 0; } .index-partner .more { top: 2rem; width: 4.8rem; } .index-partner .btn { padding-bottom: .7rem; } .index-partner .btn dd { position: relative; margin-right: .6rem; font-size: .22rem; color: #666; padding-bottom: .12rem; letter-spacing: .02rem; line-height: 1em; cursor: pointer; } .index-partner .btn dd:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 0; height: .02rem; background: #d80c18; } .index-partner .btn dd.on { color: #d80c18; } .index-partner .btn dd.on:before { width: 100%; } .report { position: relative; } .report:before { content: ""; display: block; position: absolute; left: -.45rem; top: 0; bottom: 0; width: 50%; background: #dfdfdf; } .report .head { position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: auto; height: .95rem; } .report .head a { display: block; position: absolute; z-index: 10; left: 0.5rem; right: auto; top: 0; bottom: 0; background: center no-repeat; background-size: 100%; width: 1.7rem; } .report .wal { min-height: 70vh; position: relative; padding: 1.5rem 0 1rem 0; } .report .side { width: 5.4rem; } .report .side h2 { font-size: .28rem; line-height: .42rem; position: relative; padding-bottom: .65rem; } .report .side h2:before { content: ""; display: block; position: absolute; left: 0; bottom: .3rem; width: .5rem; height: .04rem; background: #c22c33; } .report .side .content { font-size: .16rem; line-height: .3rem; color: #666; } .report .side .content a { color: #c22c33; } .report .side .msg { font-weight: bold; font-size: .18rem; color: #666; padding: .33rem 0; border-bottom: #999 dashed 1px; } .report .side h3 { font-size: .18rem; padding: .48rem 0 .2rem 0; } .report .container { width: 6.25rem; } .report .container .title { border-bottom: #999 dashed 1px; } .report .container .title h2 { font-size: .28rem; } .report .container .title p { font-size: .16rem; color: #999; padding: .1rem 0 .26rem 0; } .report .container .form { padding-top: .5rem; } .report .container .form li { width: 2.86rem; } .report .container .submit { width: 2.86rem; padding-bottom: .55rem; } .report .container .btn { padding-top: .5rem; border-top: #ccc dashed 1px; } .report .container .btn a { display: block; height: .83rem; line-height: .83rem; text-align: center; background: #d8d8d8; font-size: .18rem; color: #999; cursor: default; } .report .container .btn a.on { background: #c22c33; color: #fff; cursor: pointer; } .report .container .list h3 { font-size: .18rem; position: relative; padding: .5rem 0 .15rem 0; } .report .container .list h3 a { position: absolute; z-index: 10; left: auto; right: 0; top: 0.5rem; bottom: auto; font-weight: 400; color: #c22c33; } .report .container .list li { line-height: .52rem; border-bottom: #ccc solid 1px; font-size: .18rem; color: #666; } .report .container .list li .name { width: 3.15rem; } .report .container .list2 { font-size: .18rem; line-height: .3rem; color: #666; padding: .6rem 0; } .report .container .list2 .red { color: #c22c33; } .report .container .list2 h3 { font-size: .18rem; padding-bottom: .22rem; } .report .container .list2 dl { padding: .08rem 0 .18rem 0; line-height: .33rem; } .report .container .list2 dl dd { padding-left: .38rem; background: left center no-repeat; background-size: .2rem; } .report .container .list2 dl dd.on { background-image: ; } .report .container .list2 dl.radio dd { padding-right: .48rem; background-image: ; } .report .container .list2 dl.radio dd.on { background-image: ; } .programme-1 .p-title2 { padding: 1.05rem 0 .4rem 0; } .programme-1 .content { padding-bottom: .2rem; } .programme-1 .p-title3 { line-height: 1rem; } .programme-1 .list li { width: 5.78rem; position: relative; padding-bottom: .3rem; } .programme-1 .list li .ico { width: .64rem; position: absolute; z-index: 10; left: 0.14rem; right: auto; top: 0.16rem; bottom: auto; } .programme-1 .list li .p-content { min-height: .95rem; padding: .15rem .15rem .15rem 1.07rem; background: #f0f0f0; } .p-title3 { padding-left: .18rem; line-height: .7rem; font-size: .28rem; color: #666; position: relative; } .p-title3:before { content: ""; display: block; position: absolute; left: 0; top: 50%; width: .04rem; height: .26rem; background: #c22c33; margin-top: -.13rem; } .programme-2 .p-title2 { padding: .5rem 0 .35rem 0; } .programme-2 .p-content { padding: 0 0 .7rem .18rem; } .programme-3 { background: #f0f0f0; } .programme-3 .wal { min-height: 3.87rem; position: relative; padding: .65rem 0; } .programme-3 .p-content { padding: 0 0 .3rem .18rem; max-width: 5.3rem; } .programme-3 .img { width: 4.94rem; position: absolute; z-index: 10; left: auto; right: 0; top: 0.5rem; bottom: auto; } .programme-4 { padding: .4rem 0 1.2rem 0; } .programme-4 .p-content { padding: 0 0 .7rem .18rem; } .programme-4 .img { margin-left: -1px; } .programme-5 { background: center no-repeat; background-size: cover; min-height: 5.52rem; color: #fff; padding: 1rem 0; } .programme-5 .p-content { color: #fff; padding: .32rem 0 .28rem 0; } .programme-5 .list li { font-size: .18rem; line-height: .42rem; position: relative; min-width: 4.4rem; padding-left: .2rem; } .programme-5 .list li:before { content: ""; display: block; position: absolute; left: 0; top: 50%; width: .09rem; height: .09rem; margin-top: -.045rem; background: #ccc; } .programme-6 { padding: .35rem 0 .9rem; position: relative; border-bottom: #ccc solid 1px; } .programme-6 .p-title3 { line-height: 1.45rem; } .programme-6 .btn { position: absolute; z-index: 10; left: 1.88rem; right: auto; top: 0.35rem; bottom: auto; } .programme-6 .btn li { height: 1.45rem; line-height: 1.45rem; position: relative; margin-right: .25rem; font-size: .28rem; color: #666; font-weight: bold; cursor: pointer; } .programme-6 .btn li:hover, .programme-6 .btn li.on { color: #c22c33; } .programme-6 .list li { width: 5.78rem; } .programme-6 .list a { color: #666; font-size: .28rem; background: #f0f0f0; height: 1.8rem; padding: .2rem; } .programme-6 .list a .img { width: 1.28rem; } .programme-6 .list a .name { margin-left: .73rem; padding-bottom: .38rem; background: left bottom no-repeat; background-size: .86rem; } .programme-6 .list a:hover { color: #c22c33; } .programme-6 .list a:hover .name { background-image: ; } .case-1 { padding: .85rem 0; background: #f5f5f5; } .case-1 .col { width: 5.78rem; } .case-1 .col .p-title2 { padding: .7rem 0 1.1rem 0; } .case-1 .col .list li { position: relative; padding: 0 0 .32rem .3rem; letter-spacing: .01rem; } .case-1 .col .list li:before { content: ""; display: block; position: absolute; left: 0; top: .12rem; width: .09rem; height: .09rem; background: #ccc; } .case-1 .img { width: 5.79rem; } .case-2 { padding: 1rem 0; } .case-2 .p-title2 { padding-bottom: .5rem; } .case-2 .list ul { position: relative; } .case-2 .list li { position: relative; padding: 0 0 .32rem .3rem; width: 5.79rem; } .case-2 .list li:before { content: ""; display: block; position: absolute; left: 0; top: .12rem; width: .09rem; height: .09rem; background: #ccc; } .about-banner { height: 9.5rem; overflow: hidden; position: relative; } .about-banner video { position: absolute; z-index: 10; left: 50%; right: auto; top: 50%; bottom: auto; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .about-banner a.btn { position: relative; z-index: 11; } .about-0 {position: relative; padding:0.85rem 0 0.15rem 0; min-height: 5rem; color: #666;} .about-0 h2 { z-index: 10; left: 0; right: auto; top: 1.45rem; bottom: auto; font-size: .46rem; line-height: 1em; text-align:center; color:#333; } .about-0 .p-content { min-height: 1.85rem; padding:0.45rem 0 .3rem; } .about-0 .p-content img{ max-width:12.5rem;} .about-1 { padding: 1.45rem 0 0 3.15rem; position: relative; } .about-1 h2 { position: absolute; z-index: 10; left: 0; right: auto; top: 1.45rem; bottom: auto; font-size: .46rem; line-height: 1em; } .about-1 .p-content { min-height: 1.85rem; padding-bottom: .3rem; } .about-1 .list { position: relative; } .about-1 .list:after { content: ""; display: block; position: absolute; top: .08rem; left: 4.05rem; width: 1px; height: .8rem; background: #c22c33; } .about-1 .list li { width: 3.63rem; font-size: .24rem; padding-bottom: .3rem; } .about-1 .list li h3 { font-size: .32rem; padding-bottom: .16rem; } .about-2 { background: center no-repeat; background-size: cover; min-height: 6.82rem; color: #fff; } .about-2 ul { border-right: rgba(255, 255, 255, 0.5) solid 1px; } .about-2 li { width: 25%; height: 6.82rem; border-left: rgba(255, 255, 255, 0.5) solid 1px; padding: 0 .2rem; } .about-2 li h2 { font-size: .26rem; position: relative; height: 1.3rem; } .about-2 li h2:before { content: ""; display: block; position: absolute; left: -.2rem; margin-left: -1px; top: 50%; width: 1px; height: .26rem; margin-top: -.13rem; background: #c22c33; opacity: 0; } .about-2 li h2:after { content: ""; display: block; position: absolute; position: relative; width: .4rem; height: .25rem; background: center no-repeat; background-size: .25rem; opacity: 0; display: none; } .about-2 li .content { font-size: .16rem; line-height: 1.8em; height: 0; overflow: hidden; margin-right: -.1rem; } .about-2 li .scroll { height: 10.8em; overflow: hidden; position: relative; } .about-2 li .scroll p { padding-right: .1rem; } .about-2 li.on h2:before { opacity: 1; } .about-2 li.on .content { height: 10.8em; } .content-wrap { width: 100%; padding: 80px 0; text-align: center; box-sizing: border-box; overflow: hidden; transition: all .3s ease } .content-wrap.gray { background-color: #f8f9fb } .content-wrap .content { width: 1200px; margin: 0 auto } .content-wrap .content.full-image img { width: 100%; height: auto } .content-wrap .title { margin-bottom: 50px; font-size: 38px; font-weight: 600; color: #34363d; user-select: none } .content-wrap.mobile { padding: 1.066667rem 0 } .content-wrap.mobile .title { font-size:.613333rem; line-height:.8rem; margin-bottom:.666667rem } .content-wrap.mobile .content { width: auto } .about-module_content_3b1w2 { display: flex } .about-module_content-item_1rgxa { text-align: center } .about-module_content-item_1rgxa:first-child, .about-module_about_cafcz .about-module_content_3b1w2 .about-module_content-item_1rgxa:last-child { width: 224px } .about-module_content-item_1rgxa:nth-child(2) { flex: 1; padding: 0 120px } .about-module_content-item_1rgxa img { display: inline-block; width: 120px; height: 130px; margin-bottom: 17px } .about-module_content-item_1rgxa h5 { font-size: 18px; font-weight: 600; color: #34363d; line-height: 25px; margin-bottom: 12px } .about-module_content-item_1rgxa p { font-size: 16px; font-weight: 400; color: #5e636e; line-height: 22px } .about-module_about_cafcz .banner-wrap .text.middle h1 { font-size: 40px } .about-module_about_cafcz .banner-wrap .text.middle p { font-size: 14px } .about-module_about_cafcz.about-module_mobile_1huu8 .about-module_content_3b1w2 { padding:0 .133333rem; display: block } .about-module_about_cafcz.about-module_mobile_1huu8 .about-module_content_3b1w2 .about-module_content-item_1rgxa { width: 100%; text-align: center; padding: 0; margin-bottom:.4rem } .about-module_about_cafcz.about-module_mobile_1huu8 .about-module_content_3b1w2 .about-module_content-item_1rgxa img { width: 2.4rem; height: auto; margin-bottom: 0 } .about-module_about_cafcz.about-module_mobile_1huu8 .about-module_content_3b1w2 .about-module_content-item_1rgxa h5 { font-size:.4rem; line-height:.48rem; margin-bottom:.133333rem } .about-module_about_cafcz.about-module_mobile_1huu8 .about-module_content_3b1w2 .about-module_content-item_1rgxa p { font-size:.32rem; line-height:.4rem } .about-module_about_cafcz.about-module_mobile_1huu8 .banner-wrap .text.middle h1 { font-size:.533333rem; margin-bottom:.133333rem } .about-module_about_cafcz.about-module_mobile_1huu8 .banner-wrap .text.middle p { font-size:.293333rem; line-height:.453333rem } .about-3 { width: 100%; overflow: hidden; position: relative; } .about-3 h2 { font-size: .46rem; padding: .95rem 0 .3rem; text-align:center; } .about-3 .bg { background: center no-repeat; background-size: cover; min-height: 6.29rem; text-align: center; color: #fff; position: relative; } .about-3 .list li { position: relative; } .about-3 .list li .time, .about-3 .list li .time2 { font-family: 'oswald'; font-size: .4rem; line-height: .8rem; } .about-3 .list li .time { font-size: 1.53rem; opacity: .1; position: absolute; left: 0; top: 0; right: 0; line-height: 3.1rem; } .about-3 .list li .name { font-size: .24rem; line-height: .36rem; position: relative; padding: 1.65rem 0 .2rem 0; } .about-3 .list li .name:before { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: .5rem; height: .02rem; background: #c22c33; margin-left: -.25rem; } .about-3 .list2 { position: absolute; z-index: 10; left: -1rem; right: -1rem; top: 4.25rem; bottom: auto; border-top: #fff dotted 1px; transform: rotate(-9deg); -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); transform-origin: center top; -webkit-transform-origin: center top; } .about-3 .list2 .line { position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: #c22c33; } .about-3 .list2 .list-wrapper { width: 13rem; margin: 0 auto; overflow: hidden; position: relative; top: -.1rem; } .about-3 .list2 li { position: relative; transform: rotate(9deg); -webkit-transform: rotate(9deg); -moz-transform: rotate(9deg); z-index: 2; transform-origin: center top; -webkit-transform-origin: center top; } .about-3 .list2 li:before { content: ""; display: block; position: absolute; left: 50%; top: 0; margin-left: -.1rem; width: .2rem; height: .2rem; background: center no-repeat; background-size: 100%; } .about-3 .list2 li div { font-size: .18rem; padding: .32rem 0 .2rem 0; position: relative; } .about-3 .list2 li div:before { content: ""; display: block; position: absolute; left: 50%; top: .13rem; width: 1px; height: .14rem; background: rgba(255, 255, 255, 0.5); } .about-3 .list2 li.on:before { background-image: ; } .about-3 .list2 li.on div { color: #d80c18; } .about-3 .list2 li.on div:before { background: #c22c33; } .about-3 .arrow a { display: block; width: .4rem; height: 1rem; background: rgba(0, 0, 0, 0.5) center no-repeat; background-size: 100%; position: absolute; z-index: 10; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.5rem; } .about-3 .arrow a:hover { background-color: rgba(198, 21, 29, 0.5); } .about-3 .arrow a.prev { left: 50%; margin-left: -6.8rem; background-image: ; } .about-3 .arrow a.next { right: 50%; margin-right: -6.8rem; background-image: ; } .about-4 { padding-bottom: 1rem; overflow: hidden; position: relative; } .about-4 h2 { font-size: .46rem; padding: .7rem 0 .5rem; } .about-4 .list { min-height: 4.59rem; position: relative; } .about-4 .list .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: cover; opacity: 0; } .about-4 .list .bg.show { opacity: 1; } .about-4 .list ul { position: relative; z-index: 11; } .about-4 .list li { height: 4.59rem; width: 14.285%; border-right: rgba(255, 255, 255, 0.5) solid 1px; color: #fff; font-size: .18rem; line-height: .26rem; position: relative; } .about-4 .list li .name { width: 2em; position: relative; top: 0; } .about-4 .list li .layer { position: absolute; z-index: 10; left: 0; right: auto; top: auto; bottom: auto; width: 100%; min-width: 3rem; padding: 0 .5rem; opacity: 0; } .about-4 .list li .layer h3 { font-size: .18rem; } .about-4 .list li:last-child { border: 0; } .about-4 .list li.on { width: 30%; flex-shrink: 0; -webkit-flex-shrink: 0; } .about-4 .list li.on .name { opacity: 0; } .about-4 .list li.on .layer { opacity: 1; } .p-nav { border-bottom: #ccc solid 1px; } .p-nav a { display: block; height: 1.47rem; padding: .75rem .56rem 0 .56rem; position: relative; font-size: .28rem; font-weight: bold; color: #666; } .p-nav a:before { content: ""; display: block; position: absolute; left: 50%; bottom: -1px; right: 50%; height: 1px; background: #c22c33; } .p-nav a:hover, .p-nav a.on { color: #c22c33; } .p-nav a:hover:before, .p-nav a.on:before { left: .56rem; right: .56rem; } .news-1 { padding: .8rem 0 0 0; } .news-1 ul { margin-left: -.55rem; } .news-1 li { width: 50%; padding: 0 0 .55rem .55rem; } .news-1 a { display: block; position: relative; color: #fff; } .news-1 a:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center bottom repeat-x; background-size: auto .75rem; z-index: 2; } .news-1 a .img { width: 100%; overflow: hidden; position: relative; } .news-1 a .img img { width: 100%; } .news-1 a .time { position: absolute; z-index: 10; left: 0.3rem; right: auto; top: 0; bottom: auto; width: .8rem; height: .88rem; font-size: .12rem; text-align: center; background: #c22c33; padding-top: .13rem; } .news-1 a .time span { display: block; font-size: .42rem; line-height: .5rem; } .news-1 a .name { position: absolute; z-index: 10; left: 0.3rem; right: 0.3rem; top: auto; bottom: 0.24rem; font-size: .2rem; line-height: .27rem; font-weight: bold; } .news-1 a:hover .img img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .news { padding:.8rem 0 0 0; } .news .p-title3 { line-height: 1.15rem; } .news ul { margin-left: -.55rem; } .news li { width: 33.333%; padding: 0 0 .8rem .55rem; } .news li .img { width: 100%; overflow: hidden; position: relative; } .news li img{max-width:100%;} .news li .container { padding: .4rem 0 0 .24rem; position: relative; } .news li .container:before { content: ""; display: block; position: absolute; left: 0; top: .43rem; width: 1px; height: 2.1rem; background: #ccc; } .news li .name a { font-weight: bold; font-size: .2rem; display: block; line-height: .27rem; height: .54rem; overflow: hidden; color: #666; } .news li .time { font-size: .12rem; line-height: .3rem; } .news li p { font-size: .16rem; line-height: .22rem; padding: .2rem 0; min-height: 1rem; } .news li:hover { color: #c22c33; } .news li:hover .img img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .news li:hover .container:before { background: #c22c33; } .news li:hover .name a { color: #c22c33; } .p-btn { padding-bottom: 1rem; } .p-btn a { display: block; text-align: center; line-height: .56rem; background: #f0f0f0; font-size: .16rem; color: #666; } .p-btn a:hover { background: #c22c33; color: #fff; } .news-show { position: relative; min-height: 5rem; color: #666; } .news-show .title { font-size: .32rem; line-height: .49rem; padding: .65rem 1.3rem 0 0; } .news-show .time { line-height: .6rem; position: relative; z-index: 11; font-size: .13rem; } .news-show .time:before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: .73rem; height: 1px; background: #c22c33; } .news-show .p-content { border-top: #ccc solid 1px; border-bottom: #ccc solid 1px; padding: .6rem 0; } .news-show .p-content .img { text-align: center; padding: .45rem 0; } .news-show .p-content img{ max-width:12.5rem; height:auto;} .news-show a.back { position: absolute; z-index: 10; left: auto; right: 0; top: 1.25rem; bottom: auto; z-index:9999; } .news-show div.back { padding-top: .5rem; } .news-show div.back a.p-more { margin-left: auto; } /*分页代码*/ .scott{height:36px; overflow:hidden; text-align:center; line-height:36px; padding:40px 0 80px; } .scott a{border:#3f3f3f 1px solid; padding:8px 10px; margin-right: 5px; text-decoration: none; background:#fff; color:#3f3f3f;} .scott a:hover{border:1px solid #3f3f3f; text-decoration:none; background-color:#3f3f3f; color:#fff;} .scott a:active{border:1px solid #3f3f3f; text-decoration:none; background-color:#3f3f3f;} .scott span.current{border: #3f3f3f 1px solid; padding:8px 10px; font-weight: bold; color: #fff; margin-right: 2px; background-color: #3f3f3f;margin-right: 5px;} .scott span.disabled{border:#3f3f3f 1px solid; padding:2px 5px; color:#3f3f3f; margin-right: 5px; background:#d8f1ff;} .law { padding: 1rem 0 .5rem 0; } .law .p-title2 { padding-bottom: .35rem; } .law .p-content { padding-bottom: .5rem; } .join-1 { padding-top: .9rem; } .join-1 li { width: 5.78rem; height: 1.87rem; background: #f0f0f0; padding-left: 1rem; position: relative; } .join-1 li .ico { width: 1.15rem; margin-right: .6rem; } .join-1 li .name { font-size: .28rem; font-weight: bold; color: #666; } .join-1 li a.p-more { font-size: .16rem; width: 1.2rem; } .join-1 li a.btn { display: block; position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; } .join-1 li:hover .name { color: #c22c33; } .join-1 li:hover a.p-more { color: #c22c33; } .join-1 li:hover a.p-more:before { background-image: ; width: .56rem; right: -.2rem; } .join-title { text-align: center; padding: .85rem 0 1.15rem 0; font-size: .46rem; } .join-2 { width: 100%; overflow: hidden; position: relative; } .join-2 .wal { min-height: 5rem; position: relative; } .join-2 .wal:before { content: ""; display: block; position: absolute; left: 0; top: 4.8rem; right: -3.35rem; bottom: 1.45rem; background: #f7f7f7; } .join-2 li .img { width: 5.78rem; } .join-2 li .col { width: 5.78rem; } .join-2 li .title { padding-bottom: .65rem; } .join-2 li .title h3 { position: relative; font-size: .46rem; padding-left: .2rem; line-height: 1em; } .join-2 li .title h3:before { content: ""; display: block; position: absolute; left: 0; top: 50%; width: .07rem; height: .4rem; background: #c22c33; margin-top: -.2rem; } .join-2 li h4 { color: #666; padding-bottom: .2rem; font-size: .28rem; } .join-2 li .p-content { padding-bottom: .6rem; max-width: 4.95rem; } .join-2 li.li_01 { padding-bottom: .5rem; } .join-2 li.li_02 .img { order: -1; } .join-2 li.li_02 .img div { margin-left: -3.35rem; } .join-2 li.li_03 .title { padding: 1.15rem 0 .35rem 0; } .join-2 li.li_03 .p-content { padding: 0; } .join-2 li.li_03 .img div { margin-right: -3.35rem; } .join-3 { padding-bottom: 1.2rem; } .join-3 .join-title { padding: 1.35rem 0 .75rem 0; } .join-3 .list { width: 100%; overflow: hidden; position: relative; } .join-3 .list li img { width: 100%; } .join-3 .list .num { position: absolute; z-index: 10; left: auto; right: 0.35rem; top: auto; bottom: 0.2rem; color: #fff; font-size: .18rem; } .join-3 .list .num .num-curr { font-size: .46rem; } .join-3 .arrow a { display: block; width: .4rem; height: 1rem; background: rgba(0, 0, 0, 0.5) center no-repeat; background-size: 100%; position: absolute; z-index: 10; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.5rem; } .join-3 .arrow a:hover { background-color: rgba(198, 21, 29, 0.5); } .join-3 .arrow a.prev { left: 0; background-image: ; } .join-3 .arrow a.next { right: 0; background-image: ; } .video-layer video { width: 100%; } .ewm-layer { position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; } .ewm-layer.show { opacity: 1; visibility: visible; } .ewm-layer .container { background: #fff; width: 6.2rem; height: 7.4rem; -moz-border-radius: 0.1rem; -webkit-border-radius: 0.1rem; border-radius: 0.1rem; text-align: center; position: relative; } .ewm-layer .container a.close { display: block; width: .9rem; height: .9rem; background: center no-repeat; background-size: .42rem; position: absolute; z-index: 10; left: auto; right: 0; top: 0; bottom: auto; } .ewm-layer .container .img { width: 3.57rem; } .ewm-layer .container .img img { width: 100%; } .ewm-layer .container .name { font-size: .32rem; font-weight: bold; padding: .5rem 0 .2rem 0; } .ewm-layer .container p { font-size: .28rem; color: #666; line-height: 1.8em; } .technology-1 .p-title { padding: 1.3rem 0 .85rem 0; } .technology-1 .bg { background: center no-repeat; background-size: cover; } .technology-1 .bg .wal { min-height: 7rem; position: relative; } .technology-1 .btn dl { position: absolute; z-index: 12; left: auto; right: -1.55rem; top: 0; bottom: 0; width: 1.8rem; } .technology-1 .btn dd { padding: .1rem 0; position: relative; width: 1.26rem; cursor: pointer; } .technology-1 .btn dd img { width: 100%; border: #fff solid .02rem; } .technology-1 .btn dd.on { width: 1.8rem; } .technology-1 .btn dd.on img { border-color: #c22c33; } .technology-1 .list { height: 7rem; position: relative; /**/ /**/ /**/ /**/ /**/ } .technology-1 .list li { position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; visibility: hidden; } .technology-1 .list li div.title { position: absolute; z-index: 10; left: 0; right: 0; top: -1rem; bottom: auto; text-align: center; font-size: .18rem; opacity: 0; } .technology-1 .list li div.title h2 { font-size: .28rem; font-weight: 400; padding: .75rem 0 .22rem 0; } .technology-1 .list li.show { opacity: 1; visibility: visible; } .technology-1 .list li.in .title { opacity: 1; top: 0; } .technology-1 .list li.li_01 .line { background: left top no-repeat; background-size: auto 4.09rem; position: absolute; z-index: 10; left: 0; right: auto; top: 1.94rem; bottom: auto; width: 0; height: 4.09rem; transition-duration: 2.5s; -webkit-transition-duration: 2.5s; -moz-transition-duration: 2.5s; -o-transition-duration: 2.5s; } .technology-1 .list li.li_01 dt:before, .technology-1 .list li.li_01 dt:after, .technology-1 .list li.li_01 dd:before, .technology-1 .list li.li_01 dd:after { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: 100%; } .technology-1 .list li.li_01 dt:before, .technology-1 .list li.li_01 dd:before { animation: rotate-anim 9s infinite linear; -webkit-animation: rotate-anim 9s infinite linear; } .technology-1 .list li.li_01 dt:after, .technology-1 .list li.li_01 dd:after { animation: rotate-anim2 9s infinite linear; -webkit-animation: rotate-anim2 9s infinite linear; } .technology-1 .list li.li_01 dt { position: absolute; z-index: 10; left: 0.3rem; right: auto; top: 2.23rem; bottom: auto; background: center no-repeat; background-size: 100%; width: 3.52rem; height: 3.52rem; line-height: 3.52rem; text-align: center; color: #c22c33; font-size: .35rem; font-weight: bold; letter-spacing: .04rem; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } .technology-1 .list li.li_01 dt:before { background-image: ; background-size: 3.1rem; } .technology-1 .list li.li_01 dt:after { background-image: ; background-size: 3.1rem; } .technology-1 .list li.li_01 dd { width: 1.66rem; height: 1.66rem; background: center no-repeat; background-size: 100%; position: absolute; z-index: 10; left: auto; right: auto; top: auto; bottom: auto; color: #c22c33; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; } .technology-1 .list li.li_01 dd:before { background-image: ; } .technology-1 .list li.li_01 dd:after { background-image: ; } .technology-1 .list li.li_01 dd img { width: .4rem; } .technology-1 .list li.li_01 dd div { font-size: .16rem; padding-top: .08rem; line-height: 1em; } .technology-1 .list li.li_01 dd.dd_01 { left: 5.28rem; top: 2.26rem; margin-left: -4.1rem; margin-top: 1rem; } .technology-1 .list li.li_01 dd.dd_02 { left: 7.25rem; top: 4.13rem; margin-left: -6.1rem; margin-top: -.88rem; } .technology-1 .list li.li_01 dd.dd_03 { left: 9.14rem; top: 3.15rem; margin-left: -7.98rem; } .technology-1 .list li.li_01.in .line { width: 100%; } .technology-1 .list li.li_01.in dt, .technology-1 .list li.li_01.in dd { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } .technology-1 .list li.li_01.in dt { transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; } .technology-1 .list li.li_01.in dd { margin-left: 0; margin-top: 0; } .technology-1 .list li.li_01.in dd.dd_01 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_01.in dd.dd_02 { transition-delay: 1.3s; -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; -o-transition-delay: 1.3s; } .technology-1 .list li.li_01.in dd.dd_03 { transition-delay: 1.6s; -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -o-transition-delay: 1.6s; } .technology-1 .list li.li_01.out .line { transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; } .technology-1 .list li.li_01.out dt { transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; } .technology-1 .list li.li_01.out dd.dd_01 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; } .technology-1 .list li.li_01.out dd.dd_02 { transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; } .technology-1 .list li.li_02 .light { width: 9.4rem; height: 4.79rem; position: absolute; z-index: 10; left: 50%; right: auto; top: 1.3rem; bottom: auto; margin-left: -4.7rem; opacity: 0; } .technology-1 .list li.li_02 .light canvas { width: 100%; } .technology-1 .list li.li_02 h2.title { color: #c22c33; text-align: center; position: absolute; z-index: 10; left: 0; right: 0; top: 2.4rem; bottom: auto; font-size: .4rem; line-height: .5rem; opacity: 0; margin-top: 1rem; } .technology-1 .list li.li_02 dd { position: absolute; z-index: 10; left: 50%; right: auto; top: 3.5rem; bottom: auto; margin-left: -.65rem; background: center no-repeat; background-size: 100%; width: 1.29rem; height: 1.59rem; text-align: center; color: #c22c33; padding-bottom: .3rem; font-size: .2rem; line-height: .24rem; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; animation: updown 3s infinite linear; -webkit-animation: updown 3s infinite linear; } .technology-1 .list li.li_02 dd.dd_04 { font-size: .14rem; line-height: .19rem; } .technology-1 .list li.li_02.in .light { opacity: 1; } .technology-1 .list li.li_02.in h2.title { opacity: 1; margin-top: 0; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; } .technology-1 .list li.li_02.in dd { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } .technology-1 .list li.li_02.in dd.dd_01 { margin-left: -5.2rem; top: 3.4rem; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_02.in dd.dd_02 { margin-left: -3.26rem; top: 1.8rem; transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; } .technology-1 .list li.li_02.in dd.dd_03 { margin-left: 2.1rem; top: 1.8rem; transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; } .technology-1 .list li.li_02.in dd.dd_04 { margin-left: 3.92rem; top: 3.4rem; transition-delay: 1.5s; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -o-transition-delay: 1.5s; } .technology-1 .list li.li_02.in dd.dd_05 { margin-left: -.65rem; top: 4.52rem; transition-delay: 1.8s; -webkit-transition-delay: 1.8s; -moz-transition-delay: 1.8s; -o-transition-delay: 1.8s; } .technology-1 .list li.li_02.out .light { transition-delay: 1.5s; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -o-transition-delay: 1.5s; } .technology-1 .list li.li_02.out h2.title { transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; } .technology-1 .list li.li_02.out dd.dd_01 { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; } .technology-1 .list li.li_02.out dd.dd_02 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; } .technology-1 .list li.li_02.out dd.dd_03 { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; } .technology-1 .list li.li_02.out dd.dd_04 { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; } .technology-1 .list li.li_03 .yuan { background: center no-repeat; background-size: 100%; width: 4.64rem; height: 4.64rem; position: absolute; z-index: 10; left: 50%; right: auto; top: 1.56rem; bottom: auto; margin-left: -2.32rem; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } .technology-1 .list li.li_03 dd { position: absolute; z-index: 10; left: 50%; right: auto; top: 3.65rem; bottom: auto; margin-left: -1.71rem; font-size: .31rem; color: #c22c33; text-align: center; background: center no-repeat; background-size: 100%; width: 3.42rem; height: .73rem; line-height: .73rem; padding-right: .38rem; opacity: 0; transform: scale(0.2); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; } .technology-1 .list li.li_03 dd i { display: block; background: #c22c33; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 10; left: auto; right: 0.2rem; top: 50%; bottom: auto; margin-top: -.15rem; width: .3rem; height: .3rem; animation: scale-anim 2s infinite linear; -webkit-animation: scale-anim 2s infinite linear; } .technology-1 .list li.li_03 dd i:nth-child(2) { animation-delay: -1s; -webkit-animation-delay: -1s; } .technology-1 .list li.li_03 dd.dd_02, .technology-1 .list li.li_03 dd.dd_03 { background-image: ; padding: 0 0 0 .38rem; } .technology-1 .list li.li_03 dd.dd_02 i, .technology-1 .list li.li_03 dd.dd_03 i { right: auto; left: .2rem; } .technology-1 .list li.li_03.in .yuan { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } .technology-1 .list li.li_03.in dd { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } .technology-1 .list li.li_03.in dd.dd_01 { top: 2.55rem; margin-left: -5.55rem; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; } .technology-1 .list li.li_03.in dd.dd_02 { top: 2.55rem; margin-left: 2.1rem; transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; } .technology-1 .list li.li_03.in dd.dd_03 { top: 4.5rem; margin-left: 2.1rem; transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; } .technology-1 .list li.li_03.in dd.dd_04 { top: 4.5rem; margin-left: -5.55rem; transition-delay: 1.1s; -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -o-transition-delay: 1.1s; } .technology-1 .list li.li_03.out .yuan { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_03.out dd.dd_01 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; } .technology-1 .list li.li_03.out dd.dd_02 { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; } .technology-1 .list li.li_03.out dd.dd_03 { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; } .technology-1 .list li.li_04 .yuan { background: center no-repeat; background-size: 100%; width: 14.04rem; height: 5rem; position: absolute; z-index: 10; left: 50%; right: auto; top: 1.3rem; bottom: auto; margin-left: -7.02rem; opacity: 0; transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; margin-top: .5rem; } .technology-1 .list li.li_04 dl { position: absolute; z-index: 10; left: 0.8rem; right: 0.8rem; top: 1.55rem; bottom: auto; } .technology-1 .list li.li_04 dd { background: center no-repeat; background-size: 100%; width: 1.18rem; height: 1.19rem; position: relative; opacity: 0; transform: scale(0.3); -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); top: 2.2rem; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; animation: updown 3s infinite linear; -webkit-animation: updown 3s infinite linear; } .technology-1 .list li.li_04 dd img { width: .5rem; } .technology-1 .list li.li_04 dd .name { font-size: .16rem; padding-top: .1rem; text-align: center; color: #c22c33; } .technology-1 .list li.li_04 dd.dd_01 { left: 4.85rem; } .technology-1 .list li.li_04 dd.dd_02 { left: 3.25rem; } .technology-1 .list li.li_04 dd.dd_03 { left: 1.6rem; } .technology-1 .list li.li_04 dd.dd_05 { left: -1.6rem; } .technology-1 .list li.li_04 dd.dd_06 { left: -3.25rem; } .technology-1 .list li.li_04 dd.dd_07 { left: -4.85rem; } .technology-1 .list li.li_04 dd:nth-child(odd) { margin-top: .5rem; animation-delay: -1.5s; -webkit-animation-delay: -1.5s; } .technology-1 .list li.li_04.in .yuan { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); margin-top: 0; } .technology-1 .list li.li_04.in dd { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); left: 0; top: 0; } .technology-1 .list li.li_04.in dd.dd_04 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_04.in dd.dd_03, .technology-1 .list li.li_04.in dd.dd_05 { transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; } .technology-1 .list li.li_04.in dd.dd_02, .technology-1 .list li.li_04.in dd.dd_06 { transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; } .technology-1 .list li.li_04.in dd.dd_01, .technology-1 .list li.li_04.in dd.dd_07 { transition-delay: 1.6s; -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -o-transition-delay: 1.6s; } .technology-1 .list li.li_04.out .yuan { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_04.out dd.dd_04 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; } .technology-1 .list li.li_04.out dd.dd_03, .technology-1 .list li.li_04.out dd.dd_05 { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; } .technology-1 .list li.li_04.out dd.dd_02, .technology-1 .list li.li_04.out dd.dd_06 { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; } .technology-1 .list li.li_05 .yuan { background: center no-repeat; background-size: 100%; width: 8.99rem; height: 2.74rem; position: absolute; z-index: 10; left: 50%; right: auto; top: 3.49rem; bottom: auto; margin-left: -4.5rem; opacity: 0; transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; margin-top: .5rem; } .technology-1 .list li.li_05 dl.dl_01 { position: absolute; z-index: 10; left: 0; right: 0; top: 1.67rem; bottom: auto; } .technology-1 .list li.li_05 dl.dl_01 dd { position: relative; color: #c22c33; width: .66rem; height: .8rem; font-size: .16rem; line-height: .21rem; text-align: center; top: 2rem; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); opacity: 0; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; animation: updown 3s infinite linear; -webkit-animation: updown 3s infinite linear; } .technology-1 .list li.li_05 dl.dl_01 dd:before { content: ""; display: block; position: absolute; left: 50%; top: 0; background: center no-repeat; background-size: 100%; width: .76rem; height: 1.45rem; margin-left: -.38rem; } .technology-1 .list li.li_05 dl.dl_01 dd div { position: relative; padding-top: .18rem; } .technology-1 .list li.li_05 dl.dl_01 dd:nth-child(odd) { animation-delay: -1.5s; -webkit-animation-delay: -1.5s; } .technology-1 .list li.li_05 dl.dl_01 dd.dd_01 { left: 1.98rem; } .technology-1 .list li.li_05 dl.dl_01 dd.dd_02 { left: 1.32rem; } .technology-1 .list li.li_05 dl.dl_01 dd.dd_03 { left: .66rem; } .technology-1 .list li.li_05 dl.dl_01 dd.dd_05 { left: -.66rem; } .technology-1 .list li.li_05 dl.dl_01 dd.dd_06 { left: -1.32rem; } .technology-1 .list li.li_05 dl.dl_01 dd.dd_07 { left: -1.98rem; } .technology-1 .list li.li_05 dl.dl_02 { position: absolute; z-index: 10; left: 1.62rem; right: 1.62rem; top: 4.7rem; bottom: auto; } .technology-1 .list li.li_05 dl.dl_02 dd { background: center no-repeat; background-size: 100%; width: 1.29rem; height: 1.29rem; color: #c22c33; text-align: center; font-size: .2rem; line-height: .24rem; padding-top: .42rem; position: relative; opacity: 0; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; } .technology-1 .list li.li_05 dl.dl_02 dd.dd_02 { top: .78rem; background-image: ; } .technology-1 .list li.li_05 dl.dl_02 dd.dd_03 { top: .79rem; background-image: ; } .technology-1 .list li.li_05 dl.dl_02 dd.dd_04 { top: .08rem; background-image: ; } .technology-1 .list li.li_05.in .yuan { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); margin-top: 0; } .technology-1 .list li.li_05.in dl.dl_02 dd { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } .technology-1 .list li.li_05.in dl.dl_02 dd.dd_02, .technology-1 .list li.li_05.in dl.dl_02 dd.dd_03 { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; } .technology-1 .list li.li_05.in dl.dl_02 dd.dd_01, .technology-1 .list li.li_05.in dl.dl_02 dd.dd_04 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_05.in dl.dl_01 dd { left: 0; top: 0; opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_01, .technology-1 .list li.li_05.in dl.dl_01 dd.dd_07 { top: .3rem; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_02, .technology-1 .list li.li_05.in dl.dl_01 dd.dd_04, .technology-1 .list li.li_05.in dl.dl_01 dd.dd_06 { top: .8rem; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_02 { left: .1rem; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_06 { left: -.1rem; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_04 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_03, .technology-1 .list li.li_05.in dl.dl_01 dd.dd_05 { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_02, .technology-1 .list li.li_05.in dl.dl_01 dd.dd_06 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_05.in dl.dl_01 dd.dd_01, .technology-1 .list li.li_05.in dl.dl_01 dd.dd_07 { transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; } .technology-1 .list li.li_05.out .yuan { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; } .technology-1 .list li.li_05.out dl.dl_02 dd.dd_02, .technology-1 .list li.li_05.out dl.dl_02 dd.dd_03 { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; } .technology-1 .list li.li_05.out dl.dl_01 dd.dd_04 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; } .technology-1 .list li.li_05.out dl.dl_01 dd.dd_03, .technology-1 .list li.li_05.out dl.dl_01 dd.dd_05 { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; } .technology-1 .list li.li_05.out dl.dl_01 dd.dd_02, .technology-1 .list li.li_05.out dl.dl_01 dd.dd_06 { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; } .technology-1 .phone-list { display: none; } .technology-1 .phone-list li { padding-bottom: 3px; } @media screen and (max-width: 1600px) { .technology-1 .btn dl { right: -.8rem; } } @keyframes scale-anim { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @-webkit-keyframes scale-anim { 0% { -webkit-transform: scale(0); opacity: 0; } 50% { -webkit-transform: scale(0.6); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 0; } } .business-6 { background: #f0f0f0; } .business-6 h2 { font-size: .46rem; line-height: 1em; padding: .4rem 0; } .business-6 .list { min-height: 6rem; position: relative; } .business-6 .list .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: cover; } .business-6 .list ul { margin-left: -1px; } .business-6 .list li { width: 25%; height: 6rem; border-left: rgba(255, 255, 255, 0.6) solid 1px; position: relative; z-index: 11; color: #fff; overflow: hidden; } .business-6 .list li h3 { font-size: .32rem; text-align: center; position: absolute; z-index: 10; left: 0; right: 0; top: 50%; bottom: auto; line-height: 1rem; margin-top: -.5rem; } .business-6 .list li .layer { position: absolute; z-index: 10; left: 1rem; right: 0; top: 3rem; bottom: auto; opacity: 0; visibility: hidden; } .business-6 .list li .layer h4 { position: relative; font-size: .32rem; padding-bottom: .36rem; } .business-6 .list li .layer h4:before { content: ""; display: block; position: absolute; left: 0; bottom: .19rem; background: #fff; width: .36rem; height: .03rem; } .business-6 .list li .layer .scroll { height: 3.6rem; overflow: hidden; position: relative; } .business-6 .list li .layer .scroll .mcs-dark-thin > .mcsb_scrolltools .mcsb_draggerrail { width: 1px; } .business-6 .list li .layer .scroll .mcs-dark-thin > .mcsb_scrolltools .mcsb_dragger .mcsb_dragger_bar { width: 1px; } .business-6 .list li .layer dd { padding-bottom: .08rem; position: relative; } .business-6 .list li .layer dd:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: .08rem; background: left repeat-y; background-size: 5.22rem; opacity: 0; } .business-6 .list li .layer dd a { display: block; height: .64rem; line-height: .64rem; color: #fff; font-size: .24rem; position: relative; } .business-6 .list li .layer dd:hover:before { opacity: 1; } .business-6 .list li .layer dd:hover a { padding-left: .3rem; } .business-6 .list li.on { flex-shrink: 0; -webkit-flex-shrink: 0; width: 40%; } .business-6 .list li.on h3 { opacity: 0; } .business-6 .list li.on .layer { opacity: 1; visibility: visible; top: 1rem; } .kass-1 .list li { width: 16.666%; } .kass-1 .list li .layer { left: .6rem; right: .6rem; } .kass-1 .list li .layer .scroll { height: 4.32rem; } .kass-1 .list li .layer dd:before { background-size: 3.33rem; } .kass-1 .list li.on { width: 5.5rem; } .kass-1 .list li.on .layer { top: .5rem; } .business .list2 li { width: 4.55rem; height: .94rem; background: #f0f0f0; margin-bottom: .3rem; padding: .14rem; } .business .list2 li b { color: #d80c18; width: .64rem; height: .64rem; line-height: .64rem; background: #fff; text-align: center; font-size: .44rem; font-family: 'oswald'; position: relative; } .business .list2 li b:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: .14rem; height: .14rem; border-left: #d80c18 solid 1px; border-top: #d80c18 solid 1px; } .business .list2 li b:after { content: ""; display: block; position: absolute; right: 0; bottom: 0; width: .14rem; height: .14rem; border-right: #d80c18 solid 1px; border-bottom: #d80c18 solid 1px; } .business .list2 li p { padding-left: .3rem; font-size: .18rem; line-height: .27rem; color: #666; } .kass-3 { padding: .3rem 0 1rem 0; } .kass-3 .bg { background: center no-repeat; background-size: cover; height: 3rem; position: relative; color: #fff; padding: 0 .6rem; } .kass-3 .title { min-height: 2.05rem; padding: .5rem 0; } .kass-3 .title h2 { font-size: .46rem; line-height: 1em; } .kass-3 .title p { font-size: .18rem; padding-top: .15rem; } .kass-3 a.btn { width: 1.9rem; height: .4rem; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; font-size: .14rem; color: #fff; background: rgba(198, 21, 29, 0.7); } .kass-3 a.btn em { padding-right: .48rem; background: right center no-repeat; background-size: .38rem; } .kass-3 a.btn:hover { background: #d80c18; } .kass-3 a.btn:hover em { padding-right: .58rem; } .kass-3 .ewm { width: 2.22rem; position: absolute; z-index: 10; left: auto; right: 0.6rem; top: 0.55rem; bottom: auto; } .kass-2 .title { padding: 0 0 .2rem 0; position: relative; } .kass-2 .title h2 { border-bottom: #ccc solid 1px; height: 1.73rem; padding-top: .63rem; line-height: 1.1rem; font-size: .46rem; } .kass-2 .title ul { position: absolute; z-index: 10; left: auto; right: 0; top: 0.63rem; bottom: auto; } .kass-2 .title ul li { margin-left: .75rem; height: 1.1rem; line-height: 1.1rem; position: relative; font-size: .28rem; font-weight: bold; color: #666; cursor: pointer; } .kass-2 .title ul li:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; background: #d80c18; opacity: 0; } .kass-2 .title ul li.on { color: #d80c18; } .kass-2 .title ul li.on:before { opacity: 1; } .kass-2 .list { background: center no-repeat; background-size: cover; } .kass-2 .list .wal { min-height: 6rem; position: relative; padding: 1.7rem 0; } .kass-2 .list .arrow a { display: block; width: .21rem; height: .6rem; position: absolute; z-index: 10; left: auto; right: auto; top: 50%; bottom: auto; background: center no-repeat; background-size: 100%; margin-top: -.3rem; } .kass-2 .list .arrow a.prev { left: -.9rem; background-image: ; } .kass-2 .list .arrow a.next { right: -.9rem; background-image: ; } .kass-2 .list .list-wrapper { width: 13.02rem; position: relative; left: -.27rem; overflow: hidden; } .kass-2 .list .list-wrapper li { padding: 0 .27rem; } .kass-2 .list .list-wrapper a { display: block; position: relative; } .kass-2 .list .list-wrapper a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; right: 0; height: 1.26rem; background: center repeat-x; background-size: auto 100%; } .kass-2 .list .list-wrapper a .name { font-size: .18rem; color: #fff; font-weight: bold; position: absolute; z-index: 10; left: 0.22rem; right: auto; top: auto; bottom: 0.25rem; } .kass-2 .list .list-wrapper a:hover:before { background-image: ; } .kass-layer { position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); opacity: 0; visibility: hidden; } .kass-layer.show { opacity: 1; visibility: visible; } .kass-layer .container { width: 12.5rem; background: #fff; min-height: 50vh; box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); -webkit-box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); -moz-box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); padding: 0 .16rem; position: relative; } .kass-layer .scroll { height: 56vh; overflow: hidden; position: relative; } .kass-layer .scroll .mcs-dark-thin > .mcsb_scrolltools .mcsb_draggerrail { width: 1px; } .kass-layer .scroll .mcs-dark-thin > .mcsb_scrolltools .mcsb_dragger .mcsb_dragger_bar { width: 1px; } .kass-layer .close { display: block; width: .9rem; height: .9rem; background: center no-repeat; background-size: .29rem; position: absolute; z-index: 10; left: auto; right: 0; top: 0; bottom: auto; } .kass-layer .close:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .kass-layer .title { text-align: center; padding: .4rem 0; } .kass-layer .title h2 { font-size: .28rem; letter-spacing: .02rem; } .kass-layer .title p { padding-top: .15rem; font-size: .18rem; color: #999; } .kass-layer .form { padding: 0 .4rem; } .kass-layer .form ul { margin-left: -.4rem; } .kass-layer .form li { width: 25%; padding: 0 0 .2rem .4rem; position: relative; } .kass-layer .form li .ico { width: .2rem; height: .2rem; position: absolute; z-index: 10; left: 0.4rem; right: auto; top: 0.19rem; bottom: auto; } .kass-layer .form li .ico img:nth-child(2) { position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; opacity: 0; } .kass-layer .form li .name { position: absolute; z-index: 10; left: 0.7rem; right: auto; top: 0; bottom: auto; line-height: .58rem; font-size: .16rem; color: #999; } .kass-layer .form li .name em { color: #d80c18; } .kass-layer .form li .input { height: .58rem; border-bottom: #ccc solid 1px; position: relative; z-index: 11; } .kass-layer .form li .input input { width: 100%; height: .58rem; line-height: .58rem; font-size: .16rem; padding-left: .3rem; color: #d80c18; } .kass-layer .form li.on .ico img:nth-child(1) { opacity: 0; } .kass-layer .form li.on .ico img:nth-child(2) { opacity: 1; } .kass-layer .form li.on .name { opacity: 0; } .kass-layer .form li.on .input { border-color: #d80c18; } .kass-layer .title2 { padding: .4rem 0 .2rem .4rem; font-size: .16rem; line-height: 1em; } .kass-layer .title2 img { width: .2rem; } .kass-layer .title2 span { color: #999; padding: 0 0 0 .1rem; } .kass-layer .title2 em { color: #d80c18; } .kass-layer .list { padding: 0 .4rem; } .kass-layer .list ul { margin-left: -.4rem; } .kass-layer .list li { min-width: 25%; padding: 0 0 .2rem .4rem; } .kass-layer .list li div { font-size: .16rem; color: #999; cursor: pointer; height: .6rem; line-height: .58rem; text-align: center; border: #ccc solid 1px; padding: 0 .15rem; } .kass-layer .list li.on div { background: #d80c18; border-color: #d80c18; color: #fff; } .kass-layer .submit { padding: .6rem .4rem; } .kass-layer .submit div { background: #d80c18; } .kass-layer .submit input { height: .52rem; width: 100%; font-size: .16rem; color: #fff; cursor: pointer; } .kass-layer .container-2 { width: 6rem; min-height: 3rem; text-align: center; padding-top: 1.1rem; display: none; } .kass-layer .container-2 h2 { font-size: .24rem; padding-bottom: .24rem; } .kass-layer .container-2 p { font-size: .16rem; color: #888; } .kass-show-1 .p-title2 { padding: 1rem 0 .5rem 0; } .kass-show-1 .list { padding-bottom: .7rem; } .kass-show-1 .list ul { margin-left: -.4rem; } .kass-show-1 .list li { min-width: 20%; padding: 0 0 .2rem .4rem; } .kass-show-1 .list li div { font-size: .18rem; height: .55rem; line-height: .55rem; text-align: center; background: #f0f0f0; color: #666; } .kass-show-2 .col { width: 5.8rem; padding-bottom: 1rem; } .kass-show-2 .p-title2 { padding-bottom: .4rem; } .kass-show-2 .list { border: #ccc solid 1px; border-bottom: 0; } .kass-show-2 .list li { border-bottom: #ccc solid 1px; height: .6rem; font-size: .18rem; color: #666; } .kass-show-2 .list li h3 { height: .59rem; border-right: #ccc solid 1px; width: 1.62rem; padding-left: .2rem; font-size: .18rem; font-weight: 400; color: #333; background: #f0f0f0; } .kass-show-2 .list li h3 img { width: .24rem; margin-right: .14rem; } .kass-show-2 .list li p { padding-left: .5rem; } .kass-show-3 { background: #f0f0f0; padding: .6rem 0 .8rem 0; } .kass-show-3 .p-title2 { width: 100%; padding-bottom: .5rem; } .kass-show-3 .scroll { width: 6.25rem; height: 3.65rem; overflow: hidden; position: relative; } .kass-show-3 .content { color: #666; padding-right: .5rem; font-size: .18rem; line-height: 1.75em; text-align: justify; } .kass-show-3 .img-list { width: 5.81rem; overflow: hidden; position: relative; } .kass-show-3 .img-list:after { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background: center bottom repeat-x; background-size: auto 1.3rem; } .kass-show-3 .img-list .num { position: absolute; z-index: 10; left: auto; right: 0.4rem; top: auto; bottom: 0.2rem; color: #fff; } .kass-show-3 .img-list .num a { width: .17rem; height: .32rem; background: center no-repeat; background-size: 100%; } .kass-show-3 .img-list .num a.prev { background-image: ; } .kass-show-3 .img-list .num a.next { background-image: ; } .kass-show-3 .img-list .num div { padding: 0 .12rem; font-size: .18rem; letter-spacing: .03rem; } .kass-show-3 .img-list .num div em { font-size: .46rem; } .kass-show-4 { padding: .95rem 0 1.5rem 0; } .kass-show-4 .img { padding-top: .6rem; } .kass-show-5 .list { padding: .7rem 0 .3rem 0; } .kass-show-5 .list li { width: 5.72rem; position: relative; padding: 0 0 .6rem .7rem; color: #666; } .kass-show-5 .list li .ico { width: .5rem; position: absolute; z-index: 10; left: 0; right: auto; top: 0; bottom: auto; } .kass-show-5 .list li h3 { line-height: .5rem; font-size: .28rem; } .kass-show-5 .list li p { font-size: .18rem; line-height: 1.7em; text-align: justify; padding-top: .1rem; } .business-7 { background: #f0f0f0; padding-bottom: .5rem; } .business-7 h2 { font-size: .46rem; line-height: 1em; padding: .5rem 0 .35rem 0; width: 100%; } .business-7 .title { position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; text-align: center; color: #fff; letter-spacing: .04rem; cursor: pointer; } .business-7 .videos { width: 9.6rem; } .business-7 .videos li { position: relative; } .business-7 .videos li video { width: 100%; } .business-7 .videos li .title .ico { width: .8rem; } .business-7 .videos li .title h3 { font-size: .28rem; padding: .3rem 0 .06rem 0; } .business-7 .videos li .title p { font-size: .14rem; font-weight: bold; } .business-7 .videos li.on .title { display: none; } .business-7 .list { width: 2.65rem; position: relative; } .business-7 .list .list-wrapper { height: 5.04rem; overflow: hidden; position: relative; } .business-7 .list .list-wrapper li { height: 1.68rem; position: relative; } .business-7 .list .list-wrapper li .img { position: relative; } .business-7 .list .list-wrapper li .img:after { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: .3; } .business-7 .list .list-wrapper li .title { bottom: .2rem; } .business-7 .list .list-wrapper li .title .ico { width: .38rem; } .business-7 .list .list-wrapper li .title h3 { font-size: .13rem; padding: .1rem 0 .02rem 0; } .business-7 .list .list-wrapper li .title p { font-size: .1rem; } .business-7 .list .list-wrapper li.on .img:after { background: #c6151d; opacity: .8; } .business-7 .list .arrow { position: absolute; z-index: 10; left: auto; right: 0; top: auto; bottom: 0; width: .88rem; } .business-7 .list .arrow:after { content: ""; display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #ddd; } .business-7 .list .arrow a { width: .16rem; height: .31rem; background: center no-repeat; background-size: 100%; } .business-7 .list .arrow a.prev { background-image: ; } .business-7 .list .arrow a.prev:hover { background-image: ; } .business-7 .list .arrow a.next { background-image: ; } .business-7 .list .arrow a.next:hover { background-image: ; } .lyb .container { padding: .6rem 0 1rem 0; } .lyb .container .title { text-align: center; padding: .45rem 0; } .lyb .container .title h2 { font-size: .28rem; padding-bottom: .15rem; } .lyb .container .title p { color: #999; text-align: center; } /*# sourcemappingurl=index.css.map */