@font-face { font-family: 'DIN-Bold'; src: url("../fonts/DIN-Bold.otf"); } @font-face { font-family: '047-CAI978'; src: url("../fonts/047-CAI978.TTF"); } @font-face { font-family: '064-CAI978'; src: url("../fonts/064-CAI978.ttf"); } @font-face { font-family: '021-CAI978'; src: url("../fonts/021-CAI978.TTF"); } @keyframes mouseDown { 0%,100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes inlinerbg { 0%,100% { -webkit-transform: translate(5px, -9px); -moz-transform: translate(5px, -9px); -ms-transform: translate(5px, -9px); transform: translate(5px, -9px); } 50% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes inlinerbgo { 0%,100% { -webkit-transform: translate(-5px, 9px); -moz-transform: translate(-5px, 9px); -ms-transform: translate(-5px, 9px); transform: translate(-5px, 9px); } 50% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes indexDot { 0% { opacity: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 60% { opacity: .8; } 100% { opacity: 0; -webkit-transform: scale(2.4); -moz-transform: scale(2.4); -ms-transform: scale(2.4); transform: scale(2.4); } } @keyframes o-upfade-top { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } body { padding-top: 96px; } .pt60 { padding-top: 60px; } .lighter, .comm_banner h4, .comm_banner p, .comm_title h3, .comm_title h4, .index_main .section2 .bg_block .txt h3, .index_main .section2 .conts .cont .tip span, .about_index .section1 h3, .recruit_index .item h3, .recruit_index .item h4, .recruit_1 .section1 .item .hide .salary, .recruit_2 .rolling ul li, .recruit_2 .section4 span, .recruit_3 .section1 .item .show h3, .recruit_3 .section1 .item .hide p, .recruit_3 .section3 .dot p, .solution_index .item a, .solution_category .section1 p, .b-chain-tit h3 { font-weight: lighter; } .wrapper { width: 80vw; max-width: 1440px; margin: 0 auto; position: relative; } .wrapper:after { content: ''; clear: both; display: block; } /*header*/ .header { position: fixed; top: 0; left: 0; right: 0; padding: 0 48px; background-color: #fff; z-index: 9; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header .logo { float: left; padding: 28px 0; -webkit-transition: padding 0.3s ease; -moz-transition: padding 0.3s ease; -ms-transition: padding 0.3s ease; transition: padding 0.3s ease; } .header .logo img { display: block; height: 40px; } .header ul { float: right; padding-right: 80px; font-size: 0; } .header ul li { display: inline-block; vertical-align: top; margin: 0 14px; position: relative; } .header ul li a.single { position: relative; display: block; font-size: 16px; color: #3b3b3b; padding: 28px 10px; line-height: 40px; -webkit-transition: color 0.3s ease, padding 0.3s ease; -moz-transition: color 0.3s ease, padding 0.3s ease; -ms-transition: color 0.3s ease, padding 0.3s ease; transition: color 0.3s ease, padding 0.3s ease; } .header ul li a.single:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: #2884f6; transform-origin: left top; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .header ul li .drop_menu1 { position: absolute; top: 100%; left: 50%; opacity: 0; visibility: hidden; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .header ul li .drop_menu1 a { display: block; background: #fff; line-height: 40px; text-align: center; padding: 0 20px; font-size: 14px; color: #333; white-space: nowrap; border-top: 1px solid #f7f7f7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header ul li .drop_menu1 a:hover { background: #2884f6; color: #fff; } .header ul li .drop_menu2 { position: absolute; top: 100%; background: #fff; font-size: 0; width: 0; overflow: hidden; opacity: 0; visibility: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; } .header ul li .drop_menu2 .scroll { padding-right: 20px; max-height: 60vh; overflow: auto; } .header ul li .drop_menu2 .left { width: 40%; background-color: #073ec5; position: absolute; left: 0; top: 0; bottom: 0; } .header ul li .drop_menu2 .left .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; opacity: .1; z-index: 1; } .header ul li .drop_menu2 .left span { font-size: 24px; line-height: 30px; color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .header ul li .drop_menu2 .right { width: 60%; padding: 4vw 3vw; margin-left: 40%; } .header ul li .drop_menu2 .right .box { margin-bottom: 20px; } .header ul li .drop_menu2 .right .box:last-of-type { margin-bottom: 0; } .header ul li .drop_menu2 .right .tit { border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; } .header ul li .drop_menu2 .right .tit a { display: block; font-size: 16px; color: #073ec5; line-height: 46px; } .header ul li .drop_menu2 .right .lists { font-size: 0; margin-top: 20px; } .header ul li .drop_menu2 .right .list { display: inline-block; vertical-align: top; margin-right: 80px; } .header ul li .drop_menu2 .right .list:last-of-type { margin-right: 0; } .header ul li .drop_menu2 .right .list h3 a { display: block; font-size: 16px; color: #000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header ul li .drop_menu2 .right .list h3 a:hover { color: #073ec5; } .header ul li .drop_menu2 .right .list .a_block { margin-top: 20px; } .header ul li .drop_menu2 .right .list .a_block a { display: block; font-size: 12px; color: #000; line-height: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header ul li .drop_menu2 .right .list .a_block a:hover { color: #073ec5; } .header ul li:hover a.single, .header ul li.active a.single { color: #2884f6; } .header ul li:hover a.single:before, .header ul li.active a.single:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .header ul li:hover .drop_menu1 { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header ul li:hover .drop_menu2 { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header a.search { width: 96px; height: 96px; position: absolute; right: 0; top: 0; background-color: #2884f6; background-position: center; background-repeat: no-repeat; background-image: url("../images/icon-1.png"); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header .m_nav { display: none; } .header:after { content: ''; display: block; clear: both; } .header.down .logo { padding: 20px 0; } .header.down ul li a.single { padding: 20px 10px; } .header.down a.search { width: 80px; height: 80px; } /*footer*/ .footer .top_box { background-color: #4b4f56; padding: 50px 0; } .footer .top_box .info { display: inline-block; vertical-align: top; width: 24vw; } .footer .top_box .logo img { display: block; height: 42px; } .footer .top_box .tip { font-size: 14px; line-height: 26px; color: #cccccc; padding: 20px 0; position: relative; } .footer .top_box .tip:after { content: ''; width: 32px; height: 1px; background-color: #8d8d8d; position: absolute; left: 0; bottom: 0; } .footer .top_box .desc { font-size: 14px; line-height: 26px; color: #888888; padding: 20px 0; } .footer .top_box .share { font-size: 0; } .footer .top_box .share a { width: 25px; height: 25px; border-radius: 50%; display: inline-block; vertical-align: top; background-color: #ffffff; background-position: center; background-repeat: no-repeat; background-image: url("../images/share-1.png"); position: relative; } .footer .top_box .share a:hover .box { opacity: 1; visibility: visible; } .footer .top_box .share .box { width: 120px; position: absolute; bottom: 100%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: 10px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .footer .top_box .share .box .ewm { text-align: center; background-color: #fff; padding: 5px 5px 10px; position: relative; } .footer .top_box .share .box .ewm:after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; top: 100%; left: 50%; margin-left: -5px; } .footer .top_box .share .box img { display: block; width: 100%; } .footer .top_box .share .box p { font-size: 12px; margin-top: 5px; } .footer .top_box .nav { float: right; font-size: 0; } .footer .top_box .box { display: inline-block; vertical-align: top; margin-right: 28px; min-width: 100px; } .footer .top_box .box:last-of-type { margin-right: 0; } .footer .top_box .box h3 { font-size: 18px; } .footer .top_box .box h3 a { color: #fff; } .footer .top_box .box .a_block { margin-top: 10px; } .footer .top_box .box .a_block a { display: block; font-size: 16px; line-height: 36px; color: #9e9f9f; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .footer .top_box .box .a_block a:hover { color: #fff; } .footer .copyright { background-color: #35383d; font-size: 14px; color: #fff; line-height: 42px; } .footer .copyright span { position: absolute; right: 0; top: 0; padding-left: 24px; background-position: center left; background-repeat: no-repeat; background-image: url("../images/icon-2.png"); } /*search*/ .fixed_search { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); z-index: 10; display: none; } .fixed_search .close { position: absolute; top: 30px; right: 30px; width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/close.svg"); cursor: pointer; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .fixed_search .close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fixed_search .main { position: absolute; left: 0; right: 0; width: 90%; max-width: 1440px; margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .fixed_search form { display: block; position: relative; height: 80px; background-color: #fff; overflow: hidden; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transform-origin: center center; -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; transition: transform 0.5s ease; border-bottom: 2px solid #353434; } .fixed_search form input { display: block; width: 100%; height: 100%; padding: 0 20px; font-size: 28px; background-color: transparent; opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .fixed_search form button { width: 80px; height: 80px; position: absolute; right: 0; top: 0; background-position: center; background-repeat: no-repeat; background-size: auto 50%; background-image: url("../images/search.svg"); background-color: transparent; opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; } .fixed_search.active form { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition-delay: .5s; } .fixed_search.active form input, .fixed_search.active form button { opacity: 1; transition-delay: 1s; } @media screen and (max-width: 1500px) { body { padding-top: 80px; } .header .logo { padding: 20px 0; } .header ul li a.single { padding: 20px 10px; } .header a.search { width: 80px; height: 80px; } .header.down .logo { padding: 15px 0; } .header.down ul li a.single { padding: 15px 10px; } .header.down a.search { width: 70px; height: 70px; } .header ul li .drop_menu2 .right .lists { margin-top: 10px; } .header ul li .drop_menu2 .right .list .a_block { margin-top: 10px; } .header ul li .drop_menu2 .right .list .a_block a { line-height: 24px; } .footer .top_box .box h3 { font-size: 16px; } .footer .top_box .box .a_block a { font-size: 14px; } .footer .top_box .box { min-width: auto; } .footer .top_box .info { width: 22vw; } .footer .top_box .tip { line-height: 20px; } } @media screen and (max-width: 1200px) { .header ul li { margin: 0 3px; } .header ul li a.single { font-size: 14px; } .footer .top_box .box h3 { font-size: 14px; } .footer .top_box .box .a_block a { font-size: 12px; line-height: 30px; } .footer .top_box .info { width: 20vw; } } @media screen and (max-width: 992px) { body { padding-top: 50px; } .wrapper { width: 90%; } .header { padding: 0 10px; border-bottom: 1px solid #2884f6; } .header .logo { padding: 10px 0; } .header .logo img { height: 30px; } .header a.search { width: 50px; height: 50px; } .header ul { display: none; } .header .m_nav { display: block; position: fixed; top: 51px; width: 100%; bottom: 0; background: #fff; z-index: 9; left: 100%; -webkit-transition: left 0.3s ease; -moz-transition: left 0.3s ease; -ms-transition: left 0.3s ease; transition: left 0.3s ease; } .header .m_nav.active { left: 0; } .header .m_nav > .box { border-bottom: 1px solid #f7f7f7; } .header .m_nav > .box > a { display: block; line-height: 50px; padding: 0 20px; } .header .m_nav > .box > a.icon { background-position: 94% center; background-repeat: no-repeat; background-image: url("../images/page-next.png"); } .header .m_nav .boxes { position: fixed; top: 51px; bottom: 0; left: 100%; width: 100%; background: #fff; -webkit-transition: left 0.3s ease; -moz-transition: left 0.3s ease; -ms-transition: left 0.3s ease; transition: left 0.3s ease; z-index: 10; } .header .m_nav .boxes.open { left: 0; } .header .m_nav .boxes > a { display: block; line-height: 50px; padding: 0 30px; border-bottom: 1px solid #f7f7f7; } .header .m_nav .boxes > a.back { background-position: 10px center; background-repeat: no-repeat; background-image: url("../images/page-prev.png"); } .header .m_nav .boxes > .box > a { display: block; line-height: 50px; padding: 0 30px; border-bottom: 1px solid #f7f7f7; } .header .m_nav .boxes > .box > a.icon { background-position: 94% center; background-repeat: no-repeat; background-image: url("../images/page-next.png"); } .mNavBtn { display: block; width: 24px; height: 16px; right: 70px; top: 16px; position: fixed; cursor: pointer; z-index: 15; } .mNavBtn.active .line2 { display: none; } .mNavBtn.active .line1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .mNavBtn.active .line3 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 7px; } .mNavBtn span { position: absolute; left: 0; width: 24px; height: 2px; background: #000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .mNavBtn span.line1 { top: 0; } .mNavBtn span.line2 { top: 7px; } .mNavBtn span.line3 { bottom: 0; } .footer .top_box { padding: 30px 0; } .footer .top_box .info { width: 100%; } .footer .top_box .nav, .footer .top_box .share { display: none; } .footer .top_box .logo img { margin: 0 auto; } .footer .top_box .tip, .footer .top_box .desc { text-align: center; } .footer .top_box .tip:after { margin: 0 auto; right: 0; } .footer .top_box .desc { padding-bottom: 0; } .footer .copyright { padding: 15px 0; line-height: 20px; text-align: center; } .footer .copyright span { display: none; } .lighter, .comm_banner h4, .comm_banner p, .comm_title h3, .comm_title h4, .index_main .section2 .bg_block .txt h3, .index_main .section2 .conts .cont .tip span, .about_index .section1 h3, .recruit_index .item h3, .recruit_index .item h4, .recruit_1 .section1 .item .hide .salary, .recruit_2 .rolling ul li, .recruit_2 .section4 span, .recruit_3 .section1 .item .show h3, .recruit_3 .section1 .item .hide p, .recruit_3 .section3 .dot p, .solution_index .item a, .solution_category .section1 p, .b-chain-tit h3 { font-weight: normal; } .fixed_search form { height: 50px; } .fixed_search form input { font-size: 16px; } .fixed_search form button { width: 50px; height: 50px; } } .comm_banner { position: relative; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); background-position: center; background-repeat: no-repeat; background-size: cover; } .comm_banner img { width: 100%; display: block; } .comm_banner .cell_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; } .comm_banner h2 { font-size: 60px; color: #fff; line-height: 1; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); } .comm_banner h3 { font-size: 40px; color: #fff; line-height: 1; } .comm_banner h4 { font-size: 14px; line-height: 1; color: #fff; margin-top: 15px; } .comm_banner p { font-size: 20px; color: #fff; margin-top: 15px; } .comm_banner a.btn { display: block; width: 140px; line-height: 44px; text-align: center; margin: 30px auto 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; font-size: 16px; color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .comm_banner a.btn:hover { background-color: #fff; color: #2884f6; } .comm_crumbs { margin-top: 35px; } .comm_crumbs a { display: inline-block; vertical-align: top; font-size: 16px; line-height: 20px; color: #fff; } .comm_crumbs a:after { content: '>'; font-size: 12px; color: #fff; line-height: 18px; display: inline-block; vertical-align: top; margin: 0 12px; } .comm_crumbs a:first-of-type:before { content: ''; width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin: -3px 8px 0 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/home.png"); } .comm_crumbs a:last-of-type:after { display: none; } .comm_subnav { position: relative; font-size: 0; background-color: #fff; margin-top: -90px; } .comm_subnav:before, .comm_subnav:after { content: ''; position: absolute; bottom: 100%; } .comm_subnav:before { height: 10px; left: 58px; right: 58px; background-color: rgba(255, 255, 255, 0.3); } .comm_subnav:after { height: 20px; left: 94px; right: 94px; background-color: rgba(255, 255, 255, 0.2); } .comm_subnav .item { display: inline-block; vertical-align: top; text-align: center; } .comm_subnav .item a { display: inline-block; line-height: 90px; font-size: 16px; color: #161a1c; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .comm_subnav .item.active a { color: #2884f6; } .comm_subnav .line { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: #2884f6; } .comm_subnav.item_1 .item { width: 100%; } .comm_subnav.item_2 .item { width: 100%; } .comm_subnav.item_3 .item { width: 33.333%; } .comm_subnav.item_4 .item { width: 25%; } .comm_subnav.item_5 .item { width: 20%; } .comm_subnav.item_6 .item { width: 16.666%; } .comm_subnav.item_7 .item { width: 14.285%; } .comm_subnav .slick-arrow { position: absolute; top: 50%; margin-top: -10px; width: 13px; height: 20px; background-color: transparent; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: contain; transition: all .3s ease; z-index: 2; cursor: pointer; } .comm_subnav .slick-prev { left: 20px; background-image: url("../images/prev-2.png"); } .comm_subnav .slick-prev:hover { background-image: url("../images/prev-3.png"); } .comm_subnav .slick-next { right: 20px; background-image: url("../images/next-2.png"); } .comm_subnav .slick-next:hover { background-image: url("../images/next-3.png"); } .pagination { font-size: 0; text-align: center; } .pagination li { display: inline-block; vertical-align: top; margin: 0 3px; } .pagination li.first, .pagination li.end, .pagination li.total, .pagination li.totalPage { display: none; } .pagination li a,.pagination li span { display: block; width: 36px; height: 36px; border-radius: 3px; background-color: #fff; font-size: 14px; color: #989898; line-height: 36px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .pagination li.active a, .pagination li:hover a ,.pagination li:hover span{ background-color: #2884f6; color: #fff; } .pagination li:first-of-type a, .pagination li:last-of-type a { background-position: center; background-repeat: no-repeat; font-size: 0; } .pagination li.prev span,.pagination li.prev a{ background-position: center; background-repeat: no-repeat; background-image: url("../images/page-prev.png"); } .pagination li.prev:hover span, .pagination li.prev:hover a{ background-image: url("../images/page-prev-on.png"); } .pagination li.next span,.pagination li.next a { background-position: center; background-repeat: no-repeat; background-image: url("../images/page-next.png"); } .pagination li.next span:hover,.pagination li.next a:hover { background-image: url("../images/page-next-on.png"); } .comm_title { text-align: center; } .comm_title h3 { font-size: 34px; color: #111111; } .comm_title h4 { font-size: 16px; color: #6a809b; } .comm_title p { font-size: 14px; line-height: 24px; color: #3e3e3e; margin-top: 10px; } .video_pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none; } .video_pop .bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .video_pop .close { width: 32px; height: 32px; position: absolute; right: 20px; top: 20px; background: url("../images/close.png") center no-repeat; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; z-index: 2; } .video_pop .close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .video_pop video { position: absolute; top: 50%; left: 50%; max-height: 80vh; max-width: 75vw; z-index: 3; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .img_pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none; } .img_pop .bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .img_pop .close { width: 32px; height: 32px; position: absolute; right: 20px; top: 20px; background: url("../images/close.png") center no-repeat; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; z-index: 2; } .img_pop .close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .img_pop img { position: absolute; top: 50%; left: 50%; max-height: 80vh; max-width: 75vw; z-index: 3; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .comm_sec1 { padding: 4vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/recruit/img-3.jpg"); } .comm_sec1 .slick { margin-top: 3vw; } .comm_sec1 .item { margin: 0 12px; } .comm_sec1 .item .img_block { overflow: hidden; } .comm_sec1 .item img { width: 100%; display: blcok; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .comm_sec1 .item .txt_block { position: relative; margin: -50px 30px 0; background-color: #fff; padding: 36px; box-shadow: 0 0 7px rgba(192, 192, 192, 0.35); } .comm_sec1 .item h3 { font-size: 20px; color: #292929; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comm_sec1 .item h4 { font-size: 14px; color: #7e7e7e; font-family: 'Arial'; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comm_sec1 .item:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .comm_sec1 .slick-arrow { width: 16px; height: 26px; background-color: transparent; font-size: 0; cursor: pointer; position: absolute; top: 50%; margin-top: -13px; background-position: center; background-repeat: no-repeat; background-size: contain; } .comm_sec1 .slick-prev { background-image: url("../images/prev-3.png"); left: -38px; } .comm_sec1 .slick-next { background-image: url("../images/next-3.png"); right: -38px; } .comm_sec1 a.view { margin-top: 3vw; } .mouse { width: 21px; height: 42px; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 40px; background-position: center; background-repeat: no-repeat; background-image: url("../images/mouse.png"); z-index: 2; } .mouse:after { content: ''; width: 1px; height: 3px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 18px; background-color: #fff; -webkit-animation: mouseDown 1s linear infinite; -moz-animation: mouseDown 1s linear infinite; -ms-animation: mouseDown 1s linear infinite; animation: mouseDown 1s linear infinite; } /*index*/ .index_main a.more_btn { display: block; width: 158px; line-height: 48px; background-color: #2884f6; border-radius: 5px; font-size: 14px; color: #fff; text-align: center; margin: 2.5vw auto 0; } .index_main .section1 { position: relative; } .index_main .section1 .item { height: calc(100vh - 96px); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; } .index_main .section1 video { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .index_main .section1 .video_bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 2; } .index_main .section1 .txt_block { position: absolute; bottom: 20vh; left: 0; right: 0; text-align: center; z-index: 2; } .index_main .section1 h3 { font-size: 40px; color: #fff; } .index_main .section1 h4 { font-size: 18px; color: #fff; } .index_main .section1 a { display: inline-block; color: #fff; margin-top: 36px; } .index_main .section1 .slick-arrow { width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; background-color: transparent; font-size: 0; cursor: pointer; background-position: center; background-repeat: no-repeat; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section1 .slick-arrow:hover { background-color: #2884f6; } .index_main .section1 .slick-prev { background-image: url("../images/prev-1.png"); left: 0; } .index_main .section1 .slick-next { background-image: url("../images/next-1.png"); right: 0; } .index_main .section1 .mouse { margin-bottom: 25px; } .index_main .section1 .mouse span { position: absolute; bottom: -25px; left: 50%; font-size: 12px; color: #fff; white-space: nowrap; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .index_main .section2 { padding: 76px 0 390px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-9.jpg"); } .index_main .section2 .circle { width: 630px; height: 630px; margin: 70px auto 0; border: 1px solid #9bdef8; border-radius: 50%; padding: 20px; position: relative; } .index_main .section2 .m_show { display: none; } .index_main .section2 svg { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); fill: none; stroke: #9bdef8; stroke-width: 1; stroke-dasharray: 3128; stroke-dashoffset: 2350; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); display: none; } .index_main .section2 .bg_block { width: 100%; height: 100%; border-radius: 50%; position: relative; } .index_main .section2 .bg_block .canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; overflow: hidden; z-index: 1; } .index_main .section2 .bg_block img.tit { position: absolute; top: 50%; left: 50%; width: 40%; max-width: 248px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .index_main .section2 .bg_block .bgs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; overflow: hidden; background: #000; z-index: 3; opacity: 0; } .index_main .section2 .bg_block .bgs.active { opacity: 1; } .index_main .section2 .bg_block .bgs .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background-color: #0093e5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section2 .bg_block .bgs .bg.active { opacity: 1; } .index_main .section2 .bg_block .bgs .pic { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: .2; } .index_main .section2 .bg_block .txt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; opacity: 0; } .index_main .section2 .bg_block .txt img { display: block; width: 90%; max-width: 585px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .index_main .section2 .bg_block .txt .cell_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; z-index: 2; } .index_main .section2 .bg_block .txt h3 { font-size: 36px; color: #fff; max-width: 60%; margin: 0 auto 10px; } .index_main .section2 .bg_block .txt span { font-size: 18px; color: #fff; } .index_main .section2 .bg_block .txt.active { opacity: 1; } .index_main .section2 .dots span { position: absolute; width: 50%; height: 0; top: 50%; left: 50%; transform-origin: left center; } .index_main .section2 .dots span:after { content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #000; margin: -5px -6px 0 0; position: absolute; top: 0; right: 0; } .index_main .section2 .dots span:nth-of-type(1) { -webkit-transform: rotate(calc((360deg / 8) * 5)); -moz-transform: rotate(calc((360deg / 8) * 5)); -ms-transform: rotate(calc((360deg / 8) * 5)); transform: rotate(calc((360deg / 8) * 5)); } .index_main .section2 .dots span:nth-of-type(2) { -webkit-transform: rotate(calc((360deg / 8) * 4)); -moz-transform: rotate(calc((360deg / 8) * 4)); -ms-transform: rotate(calc((360deg / 8) * 4)); transform: rotate(calc((360deg / 8) * 4)); } .index_main .section2 .dots span:nth-of-type(2):after { -webkit-animation: indexDot 1.5s linear infinite; -moz-animation: indexDot 1.5s linear infinite; -ms-animation: indexDot 1.5s linear infinite; animation: indexDot 1.5s linear infinite; background: #f25648; } .index_main .section2 .dots span:nth-of-type(3) { -webkit-transform: rotate(calc((360deg / 8) * 3)); -moz-transform: rotate(calc((360deg / 8) * 3)); -ms-transform: rotate(calc((360deg / 8) * 3)); transform: rotate(calc((360deg / 8) * 3)); } .index_main .section2 .dots span:nth-of-type(4) { -webkit-transform: rotate(calc((360deg / 8) * 2)); -moz-transform: rotate(calc((360deg / 8) * 2)); -ms-transform: rotate(calc((360deg / 8) * 2)); transform: rotate(calc((360deg / 8) * 2)); } .index_main .section2 .dots span:nth-of-type(5) { -webkit-transform: rotate(calc((360deg / 8) * 1)); -moz-transform: rotate(calc((360deg / 8) * 1)); -ms-transform: rotate(calc((360deg / 8) * 1)); transform: rotate(calc((360deg / 8) * 1)); } .index_main .section2 .dots span:nth-of-type(5):after { -webkit-animation: indexDot 1.5s linear infinite; -moz-animation: indexDot 1.5s linear infinite; -ms-animation: indexDot 1.5s linear infinite; animation: indexDot 1.5s linear infinite; background: #00a0e6; } .index_main .section2 .dots span:nth-of-type(6) { -webkit-transform: rotate(calc((360deg / 8) * 0)); -moz-transform: rotate(calc((360deg / 8) * 0)); -ms-transform: rotate(calc((360deg / 8) * 0)); transform: rotate(calc((360deg / 8) * 0)); } .index_main .section2 .dots span:nth-of-type(7) { -webkit-transform: rotate(calc((360deg / 8) * -1)); -moz-transform: rotate(calc((360deg / 8) * -1)); -ms-transform: rotate(calc((360deg / 8) * -1)); transform: rotate(calc((360deg / 8) * -1)); } .index_main .section2 .dots span:nth-of-type(7):after { -webkit-animation: indexDot 1.5s linear infinite; -moz-animation: indexDot 1.5s linear infinite; -ms-animation: indexDot 1.5s linear infinite; animation: indexDot 1.5s linear infinite; background: #575bff; } .index_main .section2 .dots span.yellow:after { background-color: #f2b635; -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } .index_main .section2 .dots span.red:after { background-color: #f25648; -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } .index_main .section2 .dots span.blue:after { background-color: #00a0e6; -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } .index_main .section2 .dots span.purple:after { background-color: #575bff; -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } .index_main .section2 .items .item { position: absolute; font-size: 18px; color: #676767; width: 150px; padding: 40px 0; cursor: pointer; } @media screen and (min-width: 992px) { .index_main .section2 .items .item:nth-of-type(1) { text-align: right; white-space: nowrap; right: 100%; top: 50%; padding-right: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .index_main .section2 .items .item:nth-of-type(2) { white-space: nowrap; top: 85%; left: 85%; padding-left: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .index_main .section2 .items .item:nth-of-type(3) { top: 15%; left: 85%; padding-left: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .index_main .section2 .conts .cont { opacity: 0; visibility: hidden; } .index_main .section2 .conts .cont .icon { text-align: center; position: absolute; transform-origin: bottom center; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section2 .conts .cont .icon i { display: block; width: 80px; height: 102px; margin: 0 auto; background-position: center bottom; background-repeat: no-repeat; } .index_main .section2 .conts .cont .icon span { font-size: 14px; color: #676767; white-space: nowrap; } .index_main .section2 .conts .cont .tips { opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section2 .conts .cont .tip { width: 100px; height: 100px; border: 1px solid #dedede; border-radius: 50%; text-align: center; position: absolute; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section2 .conts .cont .tip span { font-size: 14px; color: #000; display: block; margin: 0 auto; max-width: 90%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section2 .conts .cont .tip:hover { border-color: #2884f6; } .index_main .section2 .conts .cont .tip:hover span { color: #2884f6; } .index_main .section2 .conts .cont:nth-of-type(1) .icon:nth-of-type(1) { left: 6%; top: -7%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .index_main .section2 .conts .cont:nth-of-type(1) .icon:nth-of-type(2) { left: -10%; top: 30%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .index_main .section2 .conts .cont:nth-of-type(1) .icon:nth-of-type(3) { left: 6%; top: 68%; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .index_main .section2 .conts .cont:nth-of-type(1) .tip { left: 0; } .index_main .section2 .conts .cont:nth-of-type(1) .tip:nth-of-type(1) { top: 10%; -webkit-transform: translateX(calc(-7vw - 100%)); -moz-transform: translateX(calc(-7vw - 100%)); -ms-transform: translateX(calc(-7vw - 100%)); transform: translateX(calc(-7vw - 100%)); } .index_main .section2 .conts .cont:nth-of-type(1) .tip:nth-of-type(2) { top: 30%; -webkit-transform: translateX(calc(-12vw - 100%)); -moz-transform: translateX(calc(-12vw - 100%)); -ms-transform: translateX(calc(-12vw - 100%)); transform: translateX(calc(-12vw - 100%)); } .index_main .section2 .conts .cont:nth-of-type(1) .tip:nth-of-type(3) { bottom: 30%; -webkit-transform: translateX(calc(-12vw - 100%)); -moz-transform: translateX(calc(-12vw - 100%)); -ms-transform: translateX(calc(-12vw - 100%)); transform: translateX(calc(-12vw - 100%)); } .index_main .section2 .conts .cont:nth-of-type(1) .tip:nth-of-type(4) { bottom: 10%; -webkit-transform: translateX(calc(-7vw - 100%)); -moz-transform: translateX(calc(-7vw - 100%)); -ms-transform: translateX(calc(-7vw - 100%)); transform: translateX(calc(-7vw - 100%)); } .index_main .section2 .conts .cont:nth-of-type(2) .icon:nth-of-type(1) { left: 88%; top: 75%; -webkit-transform: rotate(135deg) translateY(50%); -moz-transform: rotate(135deg) translateY(50%); -ms-transform: rotate(135deg) translateY(50%); transform: rotate(135deg) translateY(50%); } .index_main .section2 .conts .cont:nth-of-type(2) .tip:nth-of-type(1) { top: 50%; left: 110%; } .index_main .section2 .conts .cont:nth-of-type(2) .tip:nth-of-type(2) { top: 70%; left: 110%; } .index_main .section2 .conts .cont:nth-of-type(2) .tip:nth-of-type(3) { top: 89%; left: 106%; } .index_main .section2 .conts .cont:nth-of-type(2) .tip:nth-of-type(4) { top: 104%; left: 93%; } .index_main .section2 .conts .cont:nth-of-type(2) .tip:nth-of-type(5) { top: 112%; left: 75%; } .index_main .section2 .conts .cont:nth-of-type(2) .tip:nth-of-type(6) { top: 115%; left: 55%; } .index_main .section2 .conts .cont:nth-of-type(3) .icon:nth-of-type(1) { right: 0; top: -6%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(1) { top: -28%; left: 35%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(2) { top: -28%; left: 55%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(3) { top: -25%; left: 75%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(4) { top: -20%; left: 95%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(5) { top: -4%; left: 108%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(6) { top: 15%; left: 113%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(7) { top: 34%; left: 116%; } .index_main .section2 .conts .cont:nth-of-type(3) .tip:nth-of-type(8) { top: 53%; left: 116%; } .index_main .section2 .conts .cont.active { opacity: 1; visibility: visible; } .index_main .section2 .conts .cont.active .icon { opacity: 1; } .index_main .section2 .conts .cont.active .icon:nth-of-type(2) { transition-delay: .2s; } .index_main .section2 .conts .cont.active .icon:nth-of-type(3) { transition-delay: .4s; } .index_main .section2 .conts .cont.active .tips { opacity: 1; transition-delay: .2s; } .index_main .section3 { margin-top:4.5vw; } .index_main .section3 .main { margin-top: 4vw; height: 560px; overflow: hidden; position: relative; } .index_main .section3 .items { width: 100vw; position: absolute; left: 0; top: 0; bottom: 0; font-size: 0; z-index: 1; background: #000; } .index_main .section3 .item { height: 100%; display: inline-block; vertical-align: top; overflow: hidden; } .index_main .section3 .item .single, .index_main .section3 .item .sub { height: 100%; } .index_main .section3 .item .single { width: 12.5vw; position: relative; background-color: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .index_main .section3 .item .single .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: auto 100%; opacity: .9; z-index: 1; } .index_main .section3 .item .single .txt_block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 506px; margin: 0 auto; color: #fff; text-align: center; z-index: 3; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section3 .item .single h3 { font-size: 24px; margin-bottom: 24px; } .index_main .section3 .item .single h3:after { content: ''; width: 60px; height: 4px; background-color: #1e54b4; display: block; margin: 12px auto 0; } .index_main .section3 .item .single p { font-size: 14px; line-height: 24px; color: #fff; } .index_main .section3 .item .single .info { margin-top: 40px; } .index_main .section3 .item .single .icons { margin: 20px 0; font-size: 0; } .index_main .section3 .item .single .icons i { display: inline-block; vertical-align: top; width: 27px; height: 27px; background-position: center; background-repeat: no-repeat; background-size: contain; position: relative; margin-right: 60px; } .index_main .section3 .item .single .icons i:after { content: ''; width: 30px; height: 1px; background-color: #fff; position: absolute; right: -45px; top: 50%; } .index_main .section3 .item .single .icons i:last-of-type { margin-right: 0; } .index_main .section3 .item .single .icons i:last-of-type:after { display: none; } .index_main .section3 .item .sub { font-size: 0; width: 0; overflow: hidden; -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; transition: transform 0.5s ease; } .index_main .section3 .item .sub .box { display: inline-block; vertical-align: top; height: 100%; position: relative; overflow: hidden; } .index_main .section3 .item .sub .box:nth-of-type(1) { background-color: #c0d7f4; } .index_main .section3 .item .sub .box:nth-of-type(2) { background-color: #5893d5; } .index_main .section3 .item .sub .box:nth-of-type(3) { background-color: #0068b7; } .index_main .section3 .item .sub .box:nth-of-type(4) { background-color: #1e3c89; } .index_main .section3 .item .sub .box .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: .2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section3 .item .sub .box .txt_block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; } .index_main .section3 .item .sub .box h3 { font-size: 20px; color: #fff; } .index_main .section3 .item .sub .box i { display: block; width: 60px; height: 60px; border-radius: 50%; border-radius: 50%; border: 1px solid #fff; background-position: center; background-repeat: no-repeat; margin: 15px auto 0; } .index_main .section3 .item .sub .box:hover .bg { opacity: .5; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .index_main .section3 .item:nth-of-type(1) .single, .index_main .section3 .item:nth-of-type(1) .sub { float: left; } .index_main .section3 .item:nth-of-type(1) .sub .box { width: 25%; } .index_main .section3 .item:nth-of-type(2) .single, .index_main .section3 .item:nth-of-type(2) .sub { float: right; } .index_main .section3 .item:nth-of-type(2) .sub .box { width: 50%; } @media screen and (min-width: 992px) { .index_main .section3 .item.active .single { width: 50vw; } .index_main .section3 .item.active .single .txt_block { opacity: 1; transition-delay: .3s; } .index_main .section3 .item.active .sub { width: 37.5vw; } } .index_main .section3 .btn { position: absolute; width: 12.5vw; top: 0; bottom: 0; text-align: center; z-index: 2; cursor: pointer; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section3 .btn h3 { display: inline-block; font-size: 20px; width: 120px; color: #fff; background-repeat: no-repeat; } .index_main .section3 .btn:nth-of-type(1) { left: 0; } .index_main .section3 .btn:nth-of-type(1) h3 { padding-right: 40px; text-align: right; background-position: right center; background-image: url("../images/index/btn-prev.png"); } .index_main .section3 .btn:nth-of-type(2) { right: 0; } .index_main .section3 .btn:nth-of-type(2) h3 { padding-left: 40px; text-align: left; background-position: left center; background-image: url("../images/index/btn-next.png"); } .index_main .section3 .btn.active { opacity: 1; visibility: visible; } .index_main .section3 .new-items { display: flex; margin-top: 4vw; } .index_main .section3 .new-item { position: relative; height: 29vw; width:25%; } .index_main .section3 .new-item .img-box { height: 100%; overflow: hidden; } .index_main .section3 .new-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .index_main .section3 .new-item .txt-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding: 0 3.125vw; background-color: rgba(0, 0, 0, 0.5); } .index_main .section3 .new-item h3 { font-size: 24px; color: #fff; transition: all .3s ease; } .index_main .section3 .new-item h3:after { content: ''; width: 50px; height: 4px; background-color: #fff; display: block; margin: 20px auto 0; } .index_main .section3 .new-item p { font-size: 14px; line-height: 24px; color: #fff; margin-top: 30px; display: none; opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index_main .section3 .new-item .link { margin-top: 2vw; display: none; opacity: 0; opacity: 0; animation: o-upfade-top 0.7s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index_main .section3 .new-item .link a { display: inline-block; vertical-align: top; padding: 0 30px; font-size: 18px; line-height: 3; color: #052e5f; background-color: #fff; border-radius: 3px; transition: all .3s ease; margin: 10px; } .index_main .section3 .new-item .link a:hover { color: #fff; background-color: #2884f6; } .index_main .section3 .new-item:hover .txt-box { background-color: rgba(12, 84, 174, 0.8); } .index_main .section3 .new-item:hover h3 { font-size: 30px; } .index_main .section3 .new-item:hover p, .index_main .section3 .new-item:hover .link { display: block; } .index_main .section4 { background-color: #fff; padding: 4.5vw 0; } .index_main .section4 .slick { margin: 3vw -70px 0; padding: 0 70px; } .index_main .section4 .item { padding: 10px; } .index_main .section4 .item .box { border: 1px solid #e9e9e9; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section4 .item .img_block { background-color: #000; overflow: hidden; position: relative; } .index_main .section4 .item .img_block:after { content: ''; width: 43px; height: 43px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-1.png"); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section4 .item .txt_block { padding: 0 18px 18px; } .index_main .section4 .item img { display: block; width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section4 .item h3 { font-size: 20px; color: #000; padding: 20px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #e9e9e9; margin-bottom: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section4 .item p { font-size: 14px; line-height: 24px; color: #787878; height: 48px; overflow: hidden; } .index_main .section4 .item .date { font-size: 14px; color: #787878; margin-top: 10px; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (min-width: 992px) { .index_main .section4 .item:hover .box { border-color: transparent; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 0 10px rgba(192, 192, 192, 0.4); } .index_main .section4 .item:hover .img_block:after { opacity: 1; } .index_main .section4 .item:hover img { opacity: .4; } .index_main .section4 .item:hover h3 { color: #2884f6; } .index_main .section4 .item:hover .date { opacity: 1; } } .index_main .section4 .slick-arrow { position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; border-radius: 5px; background-color: #fff; border: 1px solid #e9e9e9; background-position: center; background-repeat: no-repeat; font-size: 0; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2; } .index_main .section4 .slick-arrow:hover { background-color: #2884f6; border-color: #2884f6; } .index_main .section4 .slick-prev { left: 0; background-image: url("../images/page-prev.png"); } .index_main .section4 .slick-prev:hover { background-image: url("../images/page-prev-on.png"); } .index_main .section4 .slick-next { right: 0; background-image: url("../images/page-next.png"); } .index_main .section4 .slick-next:hover { background-image: url("../images/page-next-on.png"); } .index_main .section5 { padding: 4.5vw 0; background-color: #f1f2f5; } .index_main .section5 .tab_title { text-align: center; font-size: 0; margin: 2.5vw 0; } .index_main .section5 .tab_title a { display: inline-block; vertical-align: top; margin: 0 6px; width: 158px; line-height: 46px; border: 1px solid #2884f6; color: #2884f6; border-radius: 5px; font-size: 14px; text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section5 .tab_title a.active { background-color: #2884f6; color: #fff; } @media screen and (min-width: 992px) { .index_main .section5 .tab_title a:hover { background-color: #2884f6; color: #fff; } } .index_main .section5 .child { font-size: 0; display: none; } .index_main .section5 .item { display: inline-block; vertical-align: top; width: calc((100% / 6) - 20px); padding-top: calc((100% / 6) - 20px); position: relative; background-color: #fff; margin: 10px; text-align: center; box-shadow: 0 2px 5px 0 #CCCBCB; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section5 .item .cell_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .index_main .section5 .item .cell_box img { max-width: 70%; max-height: 60%; } .index_main .section5 .item .hide { display: none; } .index_main .section5 .item:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 2px 8px 4px #E9E9E9; } .index_main .section5 .s_tab_t { font-size: 0; text-align: center; margin-bottom: 3vw; } .index_main .section5 .s_tab_t span { display: inline-block; vertical-align: top; margin: 0 30px; padding-top: 54px; background-position: center top; background-repeat: no-repeat; background-size: auto 50px; font-size: 16px; color: #666; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); cursor: pointer; } .index_main .section5 .s_tab_t span:nth-of-type(1) { background-image: url("../images/index/icon-9.png"); color: #df1100; } .index_main .section5 .s_tab_t span:nth-of-type(2) { background-image: url("../images/index/icon-8.png"); color: #1e8bd8; } .index_main .section5 .s_tab_t span:nth-of-type(3) { background-image: url("../images/index/icon-10.png"); color: #df9c0e; } .index_main .section5 .s_tab_t span.active { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); filter: grayscale(0); } .index_main .section5 .s_tan_c .block { display: none; } .index_main .section6 { background-color: #2884f6; padding: 6vw 0; background-position: center; background-repeat: no-repeat; background-image: url("../images/index/img-4.png"); } .index_main .section6 .comm_title h3 { font-weight: bold; color: #fff; } .index_main .section6 .comm_title h4 { color: #fff; } .index_main .section6 .desc { max-width: 870px; margin: 2vw auto 0; text-align: center; font-size: 16px; line-height: 26px; color: #fff; } .index_main .section6 .data { font-size: 0; text-align: center; margin-top: 6vw; } .index_main .section6 .data .item { display: inline-block; vertical-align: top; width: 20%; } .index_main .section6 .data .item .num, .index_main .section6 .data .item p { font-size: 16px; color: #fff; } .index_main .section6 .data .item span { font-family: 'DIN-Bold'; font-size: 60px; } .index_main .section6 .data .item i { font-size: 24px; font-style: normal; } .index_main .section6 a.more_btn { background-color: transparent; border: 1px solid #fff; margin-top: 6vw; } /*news*/ .news_list { background-color: #f6f6f6; } .news_list .item_2 .line{ width:100% !important; } .news_list .section1 { padding: 50px 0 30px; } .news_list .section1 .wrapper { background-color: #fff; box-shadow: 0 0 7px rgba(229, 229, 255, 0.35); } .news_list .section1 .img_block { width: 50%; overflow: hidden; } .news_list .section1 .img_block img { width: 100%; display: block; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .news_list .section1 .txt_block { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; padding: 0 2.5vw; } .news_list .section1 .txt_block .date { font-size: 16px; color: #707070; font-family: 'Arial'; margin-bottom: 10px; } .news_list .section1 .txt_block h3 { font-size: 30px; color: #3f3f3f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .news_list .section1 .txt_block p { font-size: 14px; line-height: 22px; height: 44px; color: #989898; margin: 20px 0; overflow: hidden; } .news_list .section1 .txt_block span { display: block; width: 110px; font-size: 14px; line-height: 40px; color: #2884f6; border: 1px solid #2884f6; text-align: center; border-radius: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .news_list .section1:hover .img_block img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .news_list .section1:hover .txt_block h3 { color: #2884f6; } .news_list .section1:hover .txt_block span { background-color: #2884f6; color: #fff; } .news_list .section2 { padding-bottom: 4vw; } .news_list .section2 .items { font-size: 0; margin-bottom: 4vw; } .news_list .section2 .item { display: inline-block; vertical-align: top; width: calc((100% - 26px) / 2); position: relative; background-color: #fff; box-shadow: 0 0 7px rgba(229, 229, 255, 0.35); margin-bottom: 26px; } .news_list .section2 .item:nth-of-type(odd) { margin-right: 26px; } @media screen and (min-width: 992px) { .news_list .section2 .item:nth-last-of-type(1), .news_list .section2 .item:nth-last-of-type(2) { margin-bottom: 0; } } .news_list .section2 .item .img_block { width: 40%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; } .news_list .section2 .item .bg { height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .news_list .section2 .item .txt_block { width: 60%; padding: 28px; } .news_list .section2 .item h3 { font-size: 18px; color: #3f3f3f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .news_list .section2 .item p { font-size: 14px; line-height: 22px; height: 44px; color: #989898; margin: 15px 0 20px; overflow: hidden; } .news_list .section2 .item .date { font-size: 14px; color: #707070; font-family: 'Arial'; padding-top: 15px; border-top: 1px solid #ebebeb; } .news_list .section2 .item:hover .bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .news_list .section2 .item:hover h3 { color: #2884f6; } .news_detail { background-color: #f6f6f6; } .news_detail .section1 { padding: 5.5vw 0 4vw; } .news_detail .section1 h3 { font-size: 36px; color: #231815; text-align: center; } .news_detail .section1 .info { font-size: 0; text-align: center; margin: 2.5vw 0; } .news_detail .section1 .info span { display: inline-block; vertical-align: top; font-size: 14px; color: #2a2a2a; margin: 0 20px; padding-left: 40px; background-position: left center; background-repeat: no-repeat; } .news_detail .section1 .info span.author { background-image: url("../images/news/icon-1.png"); } .news_detail .section1 .info span.from { background-image: url("../images/news/icon-2.png"); } .news_detail .section1 .info span.date { background-image: url("../images/news/icon-3.png"); } .news_detail .section1 .desc { font-size: 16px; color: #6b6b6b; line-height: 28px; padding: 22px; background-color: #ececec; margin-bottom: 15px; } .news_detail .section1 .other_page { margin-top: 4vw; font-size: 0; } .news_detail .section1 .other_page a { width: 49%; display: inline-block; vertical-align: top; padding: 0 30px; font-size: 14px; color: #6b6b6b; line-height: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #d8d8d8; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .news_detail .section1 .other_page a:before { content: ''; width: 16px; height: 9px; display: inline-block; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/news/icon4.png"); margin: -3px 6px 0 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .news_detail .section1 .other_page a span { font-size: 16px; } .news_detail .section1 .other_page a:nth-of-type(2) { margin-left: 2%; } .news_detail .section1 .other_page a:nth-of-type(2):before { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .news_detail .section1 .other_page a:hover { color: #fff; background-color: #b82f28; } .news_detail .section1 .other_page a:hover:before { background-image: url("../images/news/icon4-on.png"); } .research_list { background-color: #f6f6f6; } .research_list .section1 { padding: 3vw 0 4vw; } .research_list .section1 .items { margin-bottom: 4vw; } .research_list .section1 .item { margin-bottom: 16px; background-color: #fff; } .research_list .section1 .item:last-of-type { margin-bottom: 0; } .research_list .section1 .item a { position: relative; font-size: 18px; color: #3f3f3f; line-height: 24px; display: block; padding: 30px 100px 30px 20px; border-left: 6px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 7px rgba(229, 229, 255, 0.35); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .research_list .section1 .item a:after { content: ''; width: 33px; height: 33px; background-position: center; background-repeat: no-repeat; position: absolute; right: 20px; top: 50%; margin-top: -16px; background-image: url("../images/pdf.png"); } .research_list .section1 .item a:hover { color: #2884f6; border-color: #2884f6; box-shadow: 0 0 7px rgba(40, 132, 246, 0.35); } .research_list .section1 .item a:hover:after { background-image: url("../images/download.png"); } /*investor*/ .investor_1 { background-color: #f6f6f6; } .investor_1 .section1 { padding-bottom: 4vw; } .investor_1 .section1 .search { width: 80%; max-width: 720px; margin: 0 auto; padding: 3.5vw 0; } .investor_1 .section1 form { position: relative; display: block; height: 70px; padding-right: 70px; background-color: #fff; box-shadow: 0 0 7px rgba(229, 229, 255, 0.35); } .investor_1 .section1 form input { display: block; width: 100%; height: 100%; padding: 0 30px; font-size: 18px; color: #686868; background-color: transparent; } .investor_1 .section1 form button { width: 70px; height: 70px; position: absolute; right: 0; top: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-image: url("../images/investor/icon-1.png"); cursor: pointer; } .investor_1 .section1 .year { margin-bottom: 3.5vw; font-size: 0; text-align: center; } .investor_1 .section1 .year a { display: inline-block; vertical-align: top; padding: 0 16px; font-size: 16px; color: #161a1c; line-height: 34px; border-radius: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_1 .section1 .year a:not(.active):hover { color: #2884f6; } .investor_1 .section1 .year a.active { color: #fff; background-color: #2884f6; } .investor_1 .section1 .items { font-size: 0; margin-bottom: 4vw; } .investor_1 .section1 .item { display: inline-block; vertical-align: top; width: calc((100% - 52px) / 3); margin-bottom: 24px; } .investor_1 .section1 .item:nth-of-type(3n-1) { margin-left: 26px; margin-right: 26px; } .investor_1 .section1 .item:nth-last-of-type(1), .investor_1 .section1 .item:nth-last-of-type(2), .investor_1 .section1 .item:nth-last-of-type(3) { margin-bottom: 0; } .investor_1 .section1 .item a { display: block; padding: 1.875vw; background-color: #fff; border-left: 6px solid transparent; box-shadow: 0 0 7px rgba(229, 229, 255, 0.35); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_1 .section1 .item .box { position: relative; } .investor_1 .section1 .item .box:after { content: ''; width: 29px; height: 29px; position: absolute; right: 0; top: -10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/pdf.png"); } .investor_1 .section1 .item .date { font-size: 14px; color: #696969; font-family: 'Arial'; padding-bottom: 20px; border-bottom: 1px solid #ebebeb; margin-bottom: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_1 .section1 .item h3 { font-size: 18px; line-height: 30px; height: 60px; color: #696969; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_1 .section1 .item:hover a { border-color: #2884f6; box-shadow: 0 0 7px rgba(40, 132, 246, 0.35); } .investor_1 .section1 .item:hover .box:after { background-image: url("../images/download.png"); } .investor_1 .section1 .item:hover .date, .investor_1 .section1 .item:hover h3 { color: #2884f6; } .investor_4 { background-color: #f6f6f6; } .investor_4 .section1 { padding: 8.8vw 0; } .investor_4 .section1 .items { font-size: 0; text-align: center; } .investor_4 .section1 .item { display: inline-block; vertical-align: top; width: 250px; border-radius: 15px; background-color: #fff; padding: 2.5vw 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_4 .section1 .item i { display: block; height: 64px; background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_4 .section1 .item h3, .investor_4 .section1 .item p, .investor_4 .section1 .item a { font-size: 16px; color: #161a1c; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor_4 .section1 .item h3 { margin: 25px 0; } .investor_4 .section1 .item a { text-decoration: underline; } .investor_4 .section1 .item:nth-of-type(1) i { background-image: url("../images/investor/icon-2.png"); } .investor_4 .section1 .item:nth-of-type(1):hover i { background-image: url("../images/investor/icon-2-on.png"); } .investor_4 .section1 .item:nth-of-type(2) { margin: 0 4.5vw; } .investor_4 .section1 .item:nth-of-type(2) i { background-image: url("../images/investor/icon-3.png"); } .investor_4 .section1 .item:nth-of-type(2):hover i { background-image: url("../images/investor/icon-3-on.png"); } .investor_4 .section1 .item:nth-of-type(3) i { background-image: url("../images/investor/icon-4.png"); } .investor_4 .section1 .item:nth-of-type(3):hover i { background-image: url("../images/investor/icon-4-on.png"); } .investor_4 .section1 .item:hover { background-color: #2884f6; } .investor_4 .section1 .item:hover h3, .investor_4 .section1 .item:hover p, .investor_4 .section1 .item:hover a { color: #fff; } /*about*/ .about_index .comm_banner .cell_box { text-align: left; } .about_index .comm_banner h3 { font-weight: bold; text-shadow: 2px 2px 0px #192a6b; } .about_index .comm_banner h4 { text-shadow: 2px 2px 0px #192a6b; } .about_index .section1 { background-color: #f6f6f6; padding: 9vw 0; font-size: 0; } .about_index .section1 .img_block { width: 50%; display: inline-block; vertical-align: middle; } .about_index .section1 img { max-width: 80%; display: block; margin: 0 auto; } .about_index .section1 .txt_block { width: 50%; display: inline-block; vertical-align: middle; } .about_index .section1 h3 { font-size: 34px; color: #111111; } .about_index .section1 .desc { font-size: 14px; line-height: 28px; color: #6c6c6c; margin: 20px 0; } .about_index .section1 a { display: block; width: 150px; font-size: 14px; line-height: 44px; border: 1px solid #2884f6; color: #2884f6; text-align: center; border-radius: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section1 a:hover { background-color: #2884f6; color: #fff; } .about_index .section2 { padding-top: 4vw; background-size: cover; background-attachment: fixed; } .about_index .section2 .comm_title h3, .about_index .section2 .comm_title h4 { color: #fff; } .about_index .section2 .comm_title:after { content: ''; display: block; width: 50px; height: 5px; background-color: #2884f6; margin: 5px auto 0; } .about_index .section2 .desc { font-size: 18px; color: #fff; line-height: 2; max-width: 1160px; margin: 3.5vw auto 0; position: relative; z-index: 2; } .about_index .section2 .desc .item { display: none; } .about_index .section2 .desc .item .hide { display: none; } .about_index .section2 .year_box { margin-top: -5vw; position: relative; z-index: 1; } .about_index .section2 .year_box img.line { display: block; width: 100%; } .about_index .section2 .year { position: absolute; top: 19vw; left: 0; right: 0; } .about_index .section2 .year .box { opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .about_index .section2 .year .box.active { opacity: 1; visibility: visible; } .about_index .section2 .year .item { position: absolute; -webkit-transform: translateY(-28px); -moz-transform: translateY(-28px); -ms-transform: translateY(-28px); transform: translateY(-28px); cursor: pointer; } .about_index .section2 .year .item .img_block { width: 56px; height: 56px; position: relative; border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section2 .year .item .img_block .img { position: relative; z-index: 2; border: 3px solid #2884f6; border-radius: 50%; overflow: hidden; } .about_index .section2 .year .item .img_block img { display: block; width: 100%; } .about_index .section2 .year .item .img_block:before { content: ''; width: 1px; height: 30px; background-color: #fff; position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; transform-origin: top left; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section2 .year .item .img_block:after { content: ''; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #2884f6; position: absolute; top: -10px; left: 50%; margin-left: -7px; z-index: 1; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section2 .year .item span { display: block; font-family: '064-CAI978'; font-size: 24px; color: #2884f6; -webkit-transform: scaleX(0.8); -moz-transform: scaleX(0.8); -ms-transform: scaleX(0.8); transform: scaleX(0.8); position: absolute; left: 0; right: 0; top: 100%; padding-top: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section2 .year .item:nth-of-type(1) { top: 0; left: 10%; } .about_index .section2 .year .item:nth-of-type(2) { top: -2.5vw; left: 30%; } .about_index .section2 .year .item:nth-of-type(3) { top: -2.5vw; left: 50%; margin-left: -28px; } .about_index .section2 .year .item:nth-of-type(4) { top: -0.5vw; right: 30%; } .about_index .section2 .year .item:nth-of-type(5) { top: -2.5vw; right: 10%; } .about_index .section2 .year .item.active .img_block { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); box-shadow: 0 5px 15px #000; } .about_index .section2 .year .item.active .img_block:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .about_index .section2 .year .item.active .img_block:after { opacity: 1; } .about_index .section2 .year .item.active span { color: #fff; top: 170%; } .about_index .section2 .year .btn { width: 21px; height: 35px; position: absolute; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section2 .year .btn.prev { left: 0; top: 4vw; background-image: url("../images/prev-1.png"); } .about_index .section2 .year .btn.next { right: 0; top: -2vw; background-image: url("../images/next-1.png"); } .about_index .section3 { background-color: #f6f6f6; } @media screen and (min-width: 992px) { .about_index .section3 .comm_title h3, .about_index .section3 .comm_title h4 { color: #fff; } } .about_index .section3 .main { padding: 10vw 0; position: relative; } .about_index .section3 .circle { width: 32.6%; margin: 0 auto; } .about_index .section3 .circle img { display: block; width: 100%; } .about_index .section3 .center { position: absolute; width: 24.5%; margin: 0 auto; left: 0; right: 0; top: 50%; -webkit-transform: translate(2%, -48%); -moz-transform: translate(2%, -48%); -ms-transform: translate(2%, -48%); transform: translate(2%, -48%); z-index: 3; } .about_index .section3 .center img { display: block; width: 100%; } .about_index .section3 .center .txt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .about_index .section3 .item { position: absolute; width: 30%; z-index: 2; } .about_index .section3 .item:before { content: ''; width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-31.png"); position: absolute; top: 4px; } .about_index .section3 .item h3 { font-size: 18px; line-height: 24px; color: #0b0b0b; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section3 .item span { font-size: 22px; position: absolute; top: -1px; font-weight: normal; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section3 .item p { font-size: 14px; line-height: 22px; color: #323232; margin-top: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section3 .item:after { content: ''; width: 20vw; height: 1px; background-color: #2884f6; position: absolute; top: 12px; } @media screen and (min-width: 992px) { .about_index .section3 .item:nth-of-type(1), .about_index .section3 .item:nth-of-type(2), .about_index .section3 .item:nth-of-type(31) { left: 0; padding-right: 4vw; } .about_index .section3 .item:nth-of-type(1):before, .about_index .section3 .item:nth-of-type(2):before, .about_index .section3 .item:nth-of-type(31):before { right: 0; } .about_index .section3 .item:nth-of-type(1) h3 span, .about_index .section3 .item:nth-of-type(2) h3 span, .about_index .section3 .item:nth-of-type(31) h3 span { left: -30px; } .about_index .section3 .item:nth-of-type(1):after, .about_index .section3 .item:nth-of-type(2):after, .about_index .section3 .item:nth-of-type(31):after { left: 95%; transform-origin: left top; } .about_index .section3 .item:nth-of-type(4), .about_index .section3 .item:nth-of-type(3), .about_index .section3 .item:nth-of-type(6) { right: 0; text-align: right; padding-left: 4vw; } .about_index .section3 .item:nth-of-type(4):before, .about_index .section3 .item:nth-of-type(3):before, .about_index .section3 .item:nth-of-type(6):before { left: 0; } .about_index .section3 .item:nth-of-type(4) h3 span, .about_index .section3 .item:nth-of-type(3) h3 span, .about_index .section3 .item:nth-of-type(6) h3 span { right: -30px; } .about_index .section3 .item:nth-of-type(4):after, .about_index .section3 .item:nth-of-type(3):after, .about_index .section3 .item:nth-of-type(6):after { right: 98%; transform-origin: right top; } } .about_index .section3 .item:nth-of-type(1), .about_index .section3 .item:nth-of-type(3) { top: 14%; } .about_index .section3 .item:nth-of-type(21) { top: 50%; margin-top: -12px; } .about_index .section3 .item:nth-of-type(2), .about_index .section3 .item:nth-of-type(4) { top: 80%; } .about_index .section3 .item:nth-of-type(1):after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .about_index .section3 .item:nth-of-type(2):after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .about_index .section3 .item:nth-of-type(3):after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .about_index .section3 .item:nth-of-type(4):after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .about_index .section3 .item:hover h3, .about_index .section3 .item:hover span, .about_index .section3 .item:hover p { color: #2884f6; } .about_index .section4 { position: relative; } .about_index .section4 .title { padding-right: 6vw; } .about_index .section4 .comm_title { position: relative; text-align: right; padding-right: 16px; } .about_index .section4 .comm_title h3, .about_index .section4 .comm_title h4 { color: #fff; } .about_index .section4 .comm_title:after { content: ''; width: 5px; height: 50px; position: absolute; right: 0; top: 52%; margin-top: -25px; background-color: #2884f6; } .about_index .section4 .left { width: 50%; padding: 5vw 0 5vw 5vw; background: #202020; position: relative; z-index: 2; } .about_index .section4 .items { margin-top: 4vw; } .about_index .section4 .item { margin-bottom: 5vw; text-align: right; padding-right: 6vw; position: relative; cursor: pointer; } .about_index .section4 .item h3 { font-size: 20px; color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section4 .item p { font-size: 14px; color: #999999; margin-top: 5px; max-width: 420px; display: inline-block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section4 .item img { display: none; } .about_index .section4 .item i { width: 64px; height: 64px; position: absolute; right: 0; top: 50%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); background-color: #fff; border-radius: 50%; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section4 .item i:after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.25); } .about_index .section4 .item:nth-of-type(1) i { background-image: url("../images/about/icon-28.png"); } .about_index .section4 .item:nth-of-type(1).active i { background-image: url("../images/about/icon-28-on.png"); } .about_index .section4 .item:nth-of-type(2) i { background-image: url("../images/about/icon-29.png"); } .about_index .section4 .item:nth-of-type(2).active i { background-image: url("../images/about/icon-29-on.png"); } .about_index .section4 .item:nth-of-type(3) i { background-image: url("../images/about/icon-30.png"); } .about_index .section4 .item:nth-of-type(3).active i { background-image: url("../images/about/icon-30-on.png"); } .about_index .section4 .item.active h3, .about_index .section4 .item.active p { color: #2884f6; } .about_index .section4 .right { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 1; } .about_index .section4 .img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section4 .img.active { opacity: 1; visibility: visible; } .about_index .section5 { position: relative; } .about_index .section5 video { width: 100%; display: block; } .about_index .section5 a { position: absolute; width: 5.2vw; height: 5.2vw; top: 50%; left: 50%; margin: -2.6vw 0 0 -2.6vw; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/play.png"); } .about_index .section5 a.play { background-image: url("../images/about/pause.png"); } .about_index .section6 { padding: 4vw 0; background-color: #f6f6f6; } .about_index .section6 .slick { margin: 2.5vw -70px; padding: 0 70px; } .about_index .section6 .item { padding: 0 0.625vw 10px; } .about_index .section6 .box { position: relative; box-shadow: 0 5px 5px rgba(140, 140, 140, 0.3); } .about_index .section6 .box img { display: block; width: 100%; } .about_index .section6 .box:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(40, 132, 246, 0.9); z-index: 1; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section6 .box h3 { font-size: 18px; line-height: 30px; color: #fff; text-align: center; position: absolute; padding: 0 20px; max-width: 210px; margin: 0 auto; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section6 .box:hover:after { opacity: 1; } .about_index .section6 .box:hover h3 { opacity: 1; } .about_index .section6 .slick-arrow { position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; border-radius: 5px; background-color: #f6f6f6; border: 1px solid #e9e9e9; background-position: center; background-repeat: no-repeat; font-size: 0; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2; } .about_index .section6 .slick-arrow:hover { background-color: #2884f6; border-color: #2884f6; } .about_index .section6 .slick-prev { left: 0; background-image: url("../images/page-prev.png"); } .about_index .section6 .slick-prev:hover { background-image: url("../images/page-prev-on.png"); } .about_index .section6 .slick-next { right: 0; background-image: url("../images/page-next.png"); } .about_index .section6 .slick-next:hover { background-image: url("../images/page-next-on.png"); } .about_index .section6 a.more { display: block; margin: 0 auto; width: 150px; font-size: 14px; line-height: 44px; border: 1px solid #2884f6; color: #2884f6; text-align: center; border-radius: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_index .section6 a.more:hover { background-color: #2884f6; color: #fff; } .honor_main{ background: url("../images/honor/honour_bg.jpg") no-repeat top center; background-size:cover ; height: 720px; position: relative; overflow: hidden; } .honour_page .commn_content{ margin-top:180px } .honor_main .comm_title{ margin:80px 0 30px; } .honor_main .container { position: relative; margin: 0 auto; width: 170px; height: auto; } .honor_main .commn_content{ text-align: center; } .honor_main .commn_content img{ max-width: 100%; } .honor_main .comm_more{ margin-top: 50px; text-align: center; width: 100%; } .honor_main a.more { display: block; margin: 0 auto; width: 150px; font-size: 14px; line-height: 44px; border: 1px solid #2884f6; color: #2884f6; text-align: center; border-radius: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .honor_main a.more:hover { background-color: #2884f6; color: #fff; } .about_1 .section1 { background-color: #f6f6f6; padding: 4.5vw 0; font-size: 0; } .about_1 .section1 .img_block { display: inline-block; vertical-align: middle; width: 35%; } .about_1 .section1 .img_block img { display: block; max-width: 100%; } .about_1 .section1 .txt_block { width: 65%; padding-left: 6vw; display: inline-block; vertical-align: middle; } .about_1 .section1 .txt_block h3 { position: relative; } .about_1 .section1 .txt_block .en { font-size: 80px; line-height: 1; color: #d5e8ff; font-family: '047-CAI978'; transform-origin: left center; -webkit-transform: scaleX(0.7); -moz-transform: scaleX(0.7); -ms-transform: scaleX(0.7); transform: scaleX(0.7); } .about_1 .section1 .txt_block .zh { font-size: 38px; line-height: 1; color: #000; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .about_1 .section1 .txt_block .slogan { font-size: 16px; color: #4a4a4a; font-weight: bold; margin: 25px 0; } .about_1 .section1 .txt_block .desc { font-size: 14px; line-height: 30px; color: #4a4a4a; } .about_1 .section2 { background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-2.jpg"); background-attachment: fixed; padding: 6.5vw 0; font-size: 0; } .about_1 .section2 .item { display: inline-block; vertical-align: top; width: 25%; } .about_1 .section2 .box { width: 180px; height: 180px; margin: 0 auto; text-align: center; border: 1px solid #fff; border-radius: 50%; } .about_1 .section2 .box .num { font-size: 16px; color: #fff; } .about_1 .section2 .box .num span { display: inline-block; font-size: 50px; font-family: '064-CAI978'; -webkit-transform: scaleX(0.7); -moz-transform: scaleX(0.7); -ms-transform: scaleX(0.7); transform: scaleX(0.7); -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about_1 .section2 .box i { font-style: normal; margin-left: -10px; } .about_1 .section2 .box h3 { font-size: 15px; color: #fff; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about_1 .section2 .box:hover .num, .about_1 .section2 .box:hover h3 { color: #2884f6; } .about_1 .section3 { background-color: #f6f6f6; padding: 4vw 0; } .about_1 .section3 .items { margin-top: 3vw; font-size: 0; } .about_1 .section3 .item { display: inline-block; vertical-align: top; width: calc((100% - 42px) / 4); margin: 0 7px; position: relative; } .about_1 .section3 .item:last-of-type { margin-right: 0; } .about_1 .section3 .item .img_block { overflow: hidden; } .about_1 .section3 .item img { width: 100%; display: block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_1 .section3 .item .cell_box { position: absolute; height: 58px; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_1 .section3 .item h3 { font-size: 16px; color: #fff; } .about_1 .section3 .item:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .about_1 .section3 .item:hover .cell_box { height: 100%; background-color: rgba(31, 91, 182, 0.8); } .about_1 .section3 .slick-arrow { width: 16px; height: 26px; background-color: transparent; font-size: 0; cursor: pointer; position: absolute; top: 50%; margin-top: -13px; background-position: center; background-repeat: no-repeat; background-size: contain; } .about_1 .section3 .slick-prev { background-image: url("../images/prev-3.png"); left: -38px; } .about_1 .section3 .slick-next { background-image: url("../images/next-3.png"); right: -38px; } .about_2 { background-color: #f6f6f6; } .about_2 .section1 { padding: 6.5vw 0; } .about_2 .section1 li { width: 54%; margin-left: 46%; position: relative; padding-bottom: 6vw; } .about_2 .section1 li:last-of-type { padding-bottom: 0; } .about_2 .section1 li:before { content: ''; width: 1px; background-color: #dddddd; position: absolute; left: 0; top: 10px; bottom: -10px; } .about_2 .section1 li .year { font-size: 35px; line-height: 36px; color: #3a3a3a; font-family: '047-CAI978'; position: absolute; top: -5px; right: calc(100% + 7vw); white-space: nowrap; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about_2 .section1 li .year:after { content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; border: 2px solid #dddddd; background-color: #f6f6f6; border-radius: 50%; box-sizing: border-box; margin: -5px 0 0 2.5vw; } .about_2 .section1 li .year:before { content: ''; height: 1px; background-color: #dddddd; position: absolute; left: 100%; right: -7vw; top: 50%; } .about_2 .section1 li .desc { padding-left: 50px; margin-bottom: 25px; position: relative; } .about_2 .section1 li .desc:last-of-type { margin-bottom: 0; } .about_2 .section1 li .desc:before { content: ''; width: 15px; height: 15px; border: 2px solid #dddddd; background-color: #fff; border-radius: 50%; box-sizing: border-box; position: absolute; left: -7px; top: 5px; } .about_2 .section1 li .desc span { width: 50px; text-align: center; float: left; font-size: 16px; color: #070707; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about_2 .section1 li .desc p { margin-left: 50px; padding-left: 30px; font-size: 14px; line-height: 24px; color: #464646; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about_2 .section1 li .desc:hover span, .about_2 .section1 li .desc:hover p { color: #2884f6; } .about_2 .section1 li:hover .year { color: #2884f6; } .about_3 .section1 { background-color: #f6f6f6; padding: 4.5vw 0; } .about_3 .section1 .items { font-size: 0; margin-top: 3vw; text-align: center; } .about_3 .section1 .item { display: inline-block; vertical-align: top; width: 118px; padding: 24px 10px; margin: 0 1.5vw; border: 1px solid #000000; border-radius: 10px; } .about_3 .section1 .item i { display: block; height: 38px; background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_3 .section1 .item span { display: block; margin-top: 12px; font-size: 16px; color: #5d5d5d; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_3 .section1 .item:nth-of-type(1) i { background-image: url("../images/about/icon-1.png"); } .about_3 .section1 .item:nth-of-type(1):hover i { background-image: url("../images/about/icon-1-on.png"); } .about_3 .section1 .item:nth-of-type(2) i { background-image: url("../images/about/icon-2.png"); } .about_3 .section1 .item:nth-of-type(2):hover i { background-image: url("../images/about/icon-2-on.png"); } .about_3 .section1 .item:nth-of-type(3) i { background-image: url("../images/about/icon-3.png"); } .about_3 .section1 .item:nth-of-type(3):hover i { background-image: url("../images/about/icon-3-on.png"); } .about_3 .section1 .item:nth-of-type(4) i { background-image: url("../images/about/icon-4.png"); } .about_3 .section1 .item:nth-of-type(4):hover i { background-image: url("../images/about/icon-4-on.png"); } .about_3 .section1 .item:nth-of-type(5) i { background-image: url("../images/about/icon-5.png"); } .about_3 .section1 .item:nth-of-type(5):hover i { background-image: url("../images/about/icon-5-on.png"); } .about_3 .section1 .item:nth-of-type(6) i { background-image: url("../images/about/icon-6.png"); } .about_3 .section1 .item:nth-of-type(6):hover i { background-image: url("../images/about/icon-6-on.png"); } .about_3 .section2 .item { position: relative; height: 580px; } .about_3 .section2 .item .img_block { width: 50%; height: 100%; overflow: hidden; background-color: #2884f6; } .about_3 .section2 .item .bg { height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_3 .section2 .item .txt_block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .about_3 .section2 .item .box { width: 50%; } .about_3 .section2 .item h3 { font-size: 30px; color: #000000; line-height: 40px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about_3 .section2 .item h3:after { content: ''; display: block; width: 58px; height: 3px; background-color: #000; margin-top: 20px; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .about_3 .section2 .item p { font-size: 14px; line-height: 26px; color: #797979; margin-top: 20px; } .about_3 .section2 .item:nth-of-type(odd) .box { padding-left: 6vw; margin-left: 50%; } .about_3 .section2 .item:nth-of-type(even) .img_block { margin-left: 50%; } .about_3 .section2 .item:nth-of-type(even) .box { padding-right: 6vw; } .about_3 .section2 .item:hover .bg { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); opacity: 0.3; } .about_3 .section2 .item:hover h3 { color: #2884f6; } .about_3 .section2 .item:hover h3:after { background-color: #2884f6; } .about_4 .section1 { padding-top: 5vw; } .about_4 .section1 .items { font-size: 0; margin-top: 4vw; text-align: center; } .about_4 .section1 .item { display: inline-block; vertical-align: top; width: 20%; position: relative; text-align: center; } .about_4 .section1 .item .img_block { overflow: hidden; background-color: #000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_4 .section1 .item img { display: block; width: 100%; opacity: .5; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_4 .section1 .item .txt_block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .about_4 .section1 .item i { display: block; height: 45px; background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_4 .section1 .item h3 { font-size: 20px; color: #fff; margin: 20px 0 30px; } .about_4 .section1 .item p { font-size: 14px; line-height: 24px; color: #fff; height: 0; overflow: hidden; opacity: 0; max-width: 80%; margin: 0 auto; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_4 .section1 .item:hover .img_block { background: #2884f6; } .about_4 .section1 .item:hover img { opacity: .2; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } @media screen and (min-width: 992px) { .about_4 .section1 .item:hover i { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } } .about_4 .section1 .item:hover p { height: 144px; opacity: 1; } .about_4 .section2 { padding: 5vw 0; } .about_4 .section2 .box { position: relative; margin-top: 3vw; } .about_4 .section2 .box:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #0a376f; box-shadow: 0 1px 6px rgba(10, 55, 111, 0.55); } .about_4 .section2 .center { width: 38%; margin: 0 auto; text-align: center; } .about_4 .section2 .center p { font-size: 16px; color: #0075bf; line-height: 2; font-weight: bold; margin-bottom: 4vw; } .about_4 .section2 .center img { display: block; max-width: 100%; margin: 0 auto; } .about_4 .section2 .left, .about_4 .section2 .right { width: 22%; position: absolute; top: 0; } .about_4 .section2 .item { position: relative; } .about_4 .section2 .item i { width: 70px; height: 70px; border-radius: 10px; box-shadow: 0 1px 6px rgba(187, 187, 187, 0.55); position: absolute; top: 0; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_4 .section2 .item .txt { height: 70px; } .about_4 .section2 .item p { font-size: 16px; line-height: 20px; color: #0075bf; } .about_4 .section2 .item:hover i { background-color: #0075bf; } .about_4 .section2 .left { left: 0; } .about_4 .section2 .left .item { padding-right: 100px; text-align: right; margin-bottom: 2vw; } .about_4 .section2 .left .item:last-of-type { margin-bottom: 0; } .about_4 .section2 .left .item i { right: 0; } .about_4 .section2 .left .item:nth-of-type(1) i { background-image: url("../images/about/icon-12.png"); } .about_4 .section2 .left .item:nth-of-type(1):hover i { background-image: url("../images/about/icon-12-on.png"); } .about_4 .section2 .left .item:nth-of-type(2) i { background-image: url("../images/about/icon-13.png"); } .about_4 .section2 .left .item:nth-of-type(2):hover i { background-image: url("../images/about/icon-13-on.png"); } .about_4 .section2 .left .item:nth-of-type(3) i { background-image: url("../images/about/icon-14.png"); } .about_4 .section2 .left .item:nth-of-type(3):hover i { background-image: url("../images/about/icon-14-on.png"); } .about_4 .section2 .left .item:nth-of-type(4) i { background-image: url("../images/about/icon-15.png"); } .about_4 .section2 .left .item:nth-of-type(4):hover i { background-image: url("../images/about/icon-15-on.png"); } .about_4 .section2 .left .item:nth-of-type(5) i { background-image: url("../images/about/icon-16.png"); } .about_4 .section2 .left .item:nth-of-type(5):hover i { background-image: url("../images/about/icon-16-on.png"); } .about_4 .section2 .right { right: 0; } .about_4 .section2 .right .item { padding-left: 100px; margin-bottom: 0.9vw; } .about_4 .section2 .right .item:last-of-type { margin-bottom: 0; } .about_4 .section2 .right .item i { left: 0; } .about_4 .section2 .right .item:nth-of-type(1) i { background-image: url("../images/about/icon-17.png"); } .about_4 .section2 .right .item:nth-of-type(1):hover i { background-image: url("../images/about/icon-17-on.png"); } .about_4 .section2 .right .item:nth-of-type(2) i { background-image: url("../images/about/icon-18.png"); } .about_4 .section2 .right .item:nth-of-type(2):hover i { background-image: url("../images/about/icon-18-on.png"); } .about_4 .section2 .right .item:nth-of-type(3) i { background-image: url("../images/about/icon-19.png"); } .about_4 .section2 .right .item:nth-of-type(3):hover i { background-image: url("../images/about/icon-19-on.png"); } .about_4 .section2 .right .item:nth-of-type(4) i { background-image: url("../images/about/icon-20.png"); } .about_4 .section2 .right .item:nth-of-type(4):hover i { background-image: url("../images/about/icon-20-on.png"); } .about_4 .section2 .right .item:nth-of-type(5) i { background-image: url("../images/about/icon-21.png"); } .about_4 .section2 .right .item:nth-of-type(5):hover i { background-image: url("../images/about/icon-21-on.png"); } .about_4 .section2 .right .item:nth-of-type(6) i { background-image: url("../images/about/icon-22.png"); } .about_4 .section2 .right .item:nth-of-type(6):hover i { background-image: url("../images/about/icon-22-on.png"); } .about_5 { background-color: #f6f6f6; } .about_5 .section1 { padding: 4vw 0; } .about_5 .section1 .big_slick { margin: 0 6px; } .about_5 .section1 .big_slick .item { position: relative; } .about_5 .section1 .big_slick .item img { display: block; width: 100%; } .about_5 .section1 .big_slick .item a { width: 100px; height: 100px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-23.png"); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about_5 .section1 .small_slick { margin-top: 12px; position: relative; } .about_5 .section1 .small_slick .item { margin: 0 6px; background-color: #000; position: relative; } .about_5 .section1 .small_slick .item img { display: block; width: 100%; opacity: .5; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .about_5 .section1 .small_slick .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid #2884f6; opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .about_5 .section1 .small_slick .item.slick-current img { opacity: 1; } .about_5 .section1 .small_slick .item.slick-current:after { opacity: 1; } .about_5 .section1 .small_slick .btn { position: absolute; top: 50%; margin-top: -17px; font-size: 16px; color: #fff; line-height: 34px; cursor: pointer; z-index: 2; } .about_5 .section1 .small_slick .prev { left: 2vw; } .about_5 .section1 .small_slick .prev:before { content: ''; width: 21px; height: 35px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/prev-1.png"); display: inline-block; vertical-align: middle; margin-right: 1.5vw; } .about_5 .section1 .small_slick .next { right: 2vw; } .about_5 .section1 .small_slick .next:after { content: ''; width: 21px; height: 35px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/next-1.png"); display: inline-block; vertical-align: middle; margin-left: 1.5vw; } .about_6 { background-color: #f6f6f6; } .about_6 .section1 { padding: 4vw 0; } .about_6 .section1 .slick { margin: 0 -70px; padding: 0 55px; } .about_6 .section1 .item { padding: 15px; } .about_6 .section1 .box { position: relative; box-shadow: 0 0 10px rgba(148, 148, 148, 0.4); background-color: #fff; padding: 2px; } .about_6 .section1 .box img.bg { display: block; width: 100%; } .about_6 .section1 .box .cell_box { position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; z-index: 1; } .about_6 .section1 .box .cell_box img.cell { width: auto; max-width: 100%; max-width: 100%; } .about_6 .section1 .box h3 { position: absolute; font-size: 16px; line-height: 24px; color: #fff; text-align: center; top: 50%; left: 20px; right: 20px; opacity: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_6 .section1 .box:after { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; opacity: 0; background-color: rgba(40, 132, 246, 0.9); z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_6 .section1 .box:hover h3 { opacity: 1; } .about_6 .section1 .box:hover:after { opacity: 1; } .about_6 .section1 .slick-arrow { width: 26px; height: 41px; position: absolute; top: 50%; margin-top: -20px; background-position: center; background-repeat: no-repeat; font-size: 0; background-color: transparent; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_6 .section1 .slick-prev { left: 0; background-image: url("../images/prev-2.png"); } .about_6 .section1 .slick-prev:hover { background-image: url("../images/prev-3.png"); } .about_6 .section1 .slick-next { right: 0; background-image: url("../images/next-2.png"); } .about_6 .section1 .slick-next:hover { background-image: url("../images/next-3.png"); } .about_7 .section1 { background-color: #f6f6f6; font-size: 0; text-align: center; padding: 6vw 0; } .about_7 .section1 .item { display: inline-block; vertical-align: top; margin: 0 3vw; } .about_7 .section1 .item i { width: 100px; height: 100px; display: block; margin: 0 auto; border: 1px solid #000000; border-radius: 5px; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about_7 .section1 .item h3 { font-size: 18px; color: #0a0a0a; margin: 15px 0; } .about_7 .section1 .item p { font-size: 14px; line-height: 26px; color: #727272; max-width: 200px; } .about_7 .section1 .item:nth-of-type(1) i { background-image: url("../images/about/icon-24.png"); } .about_7 .section1 .item:nth-of-type(1):hover i { background-image: url("../images/about/icon-24-on.png"); } .about_7 .section1 .item:nth-of-type(2) i { background-image: url("../images/about/icon-25.png"); } .about_7 .section1 .item:nth-of-type(2):hover i { background-image: url("../images/about/icon-25-on.png"); } .about_7 .section1 .item:nth-of-type(3) i { background-image: url("../images/about/icon-26.png"); } .about_7 .section1 .item:nth-of-type(3):hover i { background-image: url("../images/about/icon-26-on.png"); } .about_7 .section1 .item:nth-of-type(4) i { background-image: url("../images/about/icon-27.png"); } .about_7 .section1 .item:nth-of-type(4):hover i { background-image: url("../images/about/icon-27-on.png"); } .about_7 .section1 .item:hover i { border-color: #2884f6; } .about_7 .section2 { height: 57vh; } .about_7 .section2 .map { height: 100%; } .about_7 .section2 .map_contant { text-align: center; padding-top: 7px; } .about_7 .section2 .map_contant img { height: 40px; display: block; } .about_7 .section3 { background-color: #f6f6f6; padding: 4vw 0; } .about_7 .section3 .form { margin-top: 2.5vw; font-size: 0; } .about_7 .section3 .form input { display: inline-block; vertical-align: top; height: 50px; padding: 0 20px; font-size: 16px; color: #818181; border-radius: 3px; background-color: #fff; } .about_7 .section3 .form .layui-form-item{ width: 100%; } .about_7 .section3 .form .layui-form-item .layui-input-block{ margin-left: 0; } .about_7 .section3 .form .form-item-f1,.about_7 .section3 .form .form-item-f2,.about_7 .section3 .form .form-item-f3,.about_7 .section3 .form .form-item-f4{ width: calc((100% - 54px) / 4); display: inline-block; margin-left: 18px; } .about_7 .section3 .form .form-item-f1{ margin-left:0; } .about_7 .section3 .form input:first-of-type { margin-left: 0; } .about_7 .section3 .form textarea { display: block; width: 100%; height: 270px; background-color: #fff; border-radius: 3px; padding: 20px; font-size: 16px; color: #818181; resize: none; } .about_7 .section3 .form button { display: block; width: 155px; height: 50px; margin: 40px auto 0; font-size: 16px; color: #fff; background-color: #2884f6; border-radius: 5px; cursor: pointer; } /*recruit*/ a.rec_view { display: block; width: 140px; line-height: 40px; text-align: center; font-size: 16px; color: #fff; border-radius: 20px; margin: 3vw auto 0; background-color: #2884f6; } a.rec_view1 { display: block; width: 160px; line-height: 46px; font-size: 14px; color: #fff; text-align: center; border: 1px solid #fff; } a.rec_view1:after { content: ''; display: inline-block; vertical-align: middle; margin: -2px 0 0 10px; width: 20px; height: 7px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/right-1.png"); } .recruit_index { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .recruit_index .items { font-size: 0; position: absolute; bottom: 120px; left: 0; right: 0; } .recruit_index .item { display: inline-block; vertical-align: top; width: calc((100% - 48px) / 3); background-color: #f6f6f6; border-radius: 10px; padding: 40px 0; text-align: center; -webkit-transition: background-color 0.3s ease, transform 0.3s ease; -moz-transition: background-color 0.3s ease, transform 0.3s ease; -ms-transition: background-color 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease; } @media screen and (min-width: 992px) { .recruit_index .item:nth-of-type(2) { margin: 0 24px; } } .recruit_index .item .box { display: inline-block; text-align: left; padding-left: 76px; background-position: left center; background-repeat: no-repeat; -webkit-transition: background-image 0.3s ease; -moz-transition: background-image 0.3s ease; -ms-transition: background-image 0.3s ease; transition: background-image 0.3s ease; } .recruit_index .item h3 { font-size: 22px; color: #000; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .recruit_index .item h4 { font-size: 12px; color: #909090; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .recruit_index .item:nth-of-type(1) .box { background-image: url("../images/recruit/icon-1.png"); } .recruit_index .item:nth-of-type(1):hover .box { background-image: url("../images/recruit/icon-1-on.png"); } .recruit_index .item:nth-of-type(2) .box { background-image: url("../images/recruit/icon-2.png"); } .recruit_index .item:nth-of-type(2):hover .box { background-image: url("../images/recruit/icon-2-on.png"); } .recruit_index .item:nth-of-type(3) .box { background-image: url("../images/recruit/icon-3.png"); } .recruit_index .item:nth-of-type(3):hover .box { background-image: url("../images/recruit/icon-3-on.png"); } .recruit_index .item:hover { background-color: #2884f6; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .recruit_index .item:hover h3, .recruit_index .item:hover h4 { color: #fff; } .recruit_index .copyright { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); font-size: 14px; color: #979797; line-height: 42px; text-align: center; } .recruit_1 .section1 { background-color: #f6f6f6; padding-bottom: 4vw; } .recruit_1 .section1 .form { font-size: 0; padding: 3vw 0; } .recruit_1 .section1 .form .box { position: relative; display: inline-block; vertical-align: top; width: 27%; margin-left: 2%; z-index: 1; } .recruit_1 .section1 .form .box:first-of-type { margin-left: 0; } .recruit_1 .section1 .form .box:last-of-type { width: 42%; } .recruit_1 .section1 .form .box:last-of-type:after { display: none; } .recruit_1 .section1 .form .box:nth-of-type(1) input, .recruit_1 .section1 .form .box:nth-of-type(2) input { cursor: pointer; } .recruit_1 .section1 .form .box:after { content: ''; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 13px solid #000; position: absolute; right: 20px; top: 50%; margin-top: -6px; z-index: 3; } .recruit_1 .section1 .form .box input { width: 100%; display: block; box-shadow: 0 0 7px rgba(223, 223, 223, 0.35); height: 60px; font-size: 18px; color: #686868; padding: 0 20px; position: relative; z-index: 2; } .recruit_1 .section1 .form .box input::-webkit-input-placeholder { color: #686868; } .recruit_1 .section1 .form .box input::-moz-placeholder { color: #686868; } .recruit_1 .section1 .form .box input:-moz-placeholder { color: #686868; } .recruit_1 .section1 .form .box input:-ms-input-placeholder { color: #686868; } .recruit_1 .section1 .form .box input:focus::-webkit-input-placeholder { color: #686868; } .recruit_1 .section1 .form .box input:focus::-moz-placeholder { color: #686868; } .recruit_1 .section1 .form .box input:focus:-moz-placeholder { color: #686868; } .recruit_1 .section1 .form .box input:focus:-ms-input-placeholder { color: #686868; } .recruit_1 .section1 .form .box button.sear1 { width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-color: transparent; background-size: contain; background-image: url("../images/recruit/icon-4.png"); position: absolute; right: 20px; top: 50%; margin-top: -12px; cursor: pointer; z-index: 3; } .recruit_1 .section1 .form .box ul { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); z-index: 1; display: none; } .recruit_1 .section1 .form .box ul li { font-size: 16px; color: #333; line-height: 50px; padding: 0 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .recruit_1 .section1 .form .box ul li:hover { background: #2884f6; color: #fff; } .recruit_1 .section1 .form .box.open { z-index: 2; } .recruit_1 .section1 .form .box.open ul { display: block; } .recruit_1 .section1 .items { margin-bottom: 4vw; } .recruit_1 .section1 .item { margin-bottom: 15px; position: relative; } .recruit_1 .section1 .item:last-of-type { margin-bottom: 0; } .recruit_1 .section1 .item .top_box { padding: 24px 0; position: relative; border-bottom: 1px solid #f6f6f6; } .recruit_1 .section1 .item .top_box .post { font-size: 18px; font-weight: bold; color: #686868; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .top_box .post:before { content: ''; width: 27px; height: 27px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; background-image: url("../images/recruit/icon-5.png"); margin: -5px 6px 0 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .top_box .date { position: absolute; right: 0; top: 50%; font-size: 14px; color: #a3a3a3; line-height: 20px; margin-top: -10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .top_box .date span { color: #686868; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .top_box .date:before { content: ''; width: 18px; height: 18px; background-position: center; background-repeat: no-repeat; background-image: url("../images/recruit/icon-6.png"); display: inline-block; vertical-align: middle; margin: -3px 10px 0 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .bot_box { padding: 18px 0; font-size: 0; height: 84px; } .recruit_1 .section1 .item .bot_box .info { display: inline-block; vertical-align: top; width: 33.33%; font-size: 14px; color: #a3a3a3; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .bot_box span { color: #686868; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .show { box-shadow: 0 0 7px rgba(223, 223, 223, 0.35); background-color: #fff; border-left: 6px solid transparent; padding: 0 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .recruit_1 .section1 .item .hide { position: relative; background-color: #fff; box-shadow: 0 0 7px rgba(223, 223, 223, 0.35); padding: 40px 50px 70px; margin-top: -158px; display: none; } .recruit_1 .section1 .item .hide .close { position: absolute; right: 35px; top: 35px; width: 18px; height: 18px; background-position: center; background-repeat: no-repeat; background-image: url("../images/close-2.png"); cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_1 .section1 .item .hide .close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .recruit_1 .section1 .item .hide .post { font-size: 34px; color: #161a1c; } .recruit_1 .section1 .item .hide .salary { font-size: 16px; margin: 24px 0; } .recruit_1 .section1 .item .hide .salary span { font-size: 24px; } .recruit_1 .section1 .item .hide .tip { background-color: #f6f6f6; padding: 18px 35px; font-size: 0; } .recruit_1 .section1 .item .hide .tip span { display: inline-block; vertical-align: top; width: 33.33%; font-size: 16px; line-height: 2; color: #161a1c; } .recruit_1 .section1 .item .hide .box { margin-top: 40px; } .recruit_1 .section1 .item .hide .box h4 { font-size: 20px; color: #161a1c; } .recruit_1 .section1 .item .hide .box .desc { margin-top: 15px; font-size: 16px; line-height: 30px; color: #565656; } .recruit_1 .section1 .item .hide a { display: block; width: 150px; line-height: 46px; font-size: 16px; color: #fff; text-align: center; background-color: #2884f6; margin: 3vw auto 0; } @media screen and (min-width: 992px) { .recruit_1 .section1 .item:hover .show { box-shadow: 0 0 7px rgba(40, 132, 246, 0.35); border-color: #2884f6; } .recruit_1 .section1 .item:hover .show .top_box .post, .recruit_1 .section1 .item:hover .show .top_box .date, .recruit_1 .section1 .item:hover .show .top_box .date span { color: #2884f6; } .recruit_1 .section1 .item:hover .show .top_box .post:before { background-image: url("../images/recruit/icon-5-on.png"); } .recruit_1 .section1 .item:hover .show .top_box .date:before { background-image: url("../images/recruit/icon-6-on.png"); } .recruit_1 .section1 .item:hover .show .bot_box .info, .recruit_1 .section1 .item:hover .show .bot_box span { color: #2884f6; } } .recruit_1 .section1 .item.active .show { box-shadow: 0 0 7px rgba(40, 132, 246, 0.35); border-color: #2884f6; } .recruit_1 .section1 .item.active .show .top_box .post, .recruit_1 .section1 .item.active .show .top_box .date, .recruit_1 .section1 .item.active .show .top_box .date span { color: #2884f6; } .recruit_1 .section1 .item.active .show .top_box .post:before { background-image: url("../images/recruit/icon-5-on.png"); } .recruit_1 .section1 .item.active .show .top_box .date:before { background-image: url("../images/recruit/icon-6-on.png"); } .recruit_1 .section1 .item.active .show .bot_box .info, .recruit_1 .section1 .item.active .show .bot_box span { color: #2884f6; } .recruit_2 .rolling { font-size: 0; } .recruit_2 .rolling .tip { display: inline-block; vertical-align: top; width: 28%; text-align: right; padding-right: 2.5vw; line-height: 70px; font-size: 18px; color: #2884f6; font-weight: bold; background-color: #f5f5f9; } .recruit_2 .rolling ul { display: inline-block; vertical-align: top; width: 72%; padding-left: 2.5vw; overflow: hidden; height: 70px; } .recruit_2 .rolling ul li { line-height: 70px; font-size: 16px; color: #252525; } .recruit_2 .rolling ul span { margin-right: 2vw; } .recruit_2 .section1 { padding: 7vw 0 12vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/recruit/img-2.jpg"); } .recruit_2 .section1 .main { max-width: 830px; margin: 0 auto; font-size: 0; } .recruit_2 .section1 .lead { width: 350px; float: left; } .recruit_2 .section1 .lead span { display: inline-block; font-size: 32px; line-height: 54px; color: #1c93ca; background-color: #fff; padding: 0 15px; margin: 4px 0; font-weight: bold; } .recruit_2 .section1 .para { margin-left: 350px; padding-left: 4vw; font-size: 16px; line-height: 36px; color: #fff; text-decoration: underline; } .recruit_2 .section2 { padding-bottom: 3.5vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/recruit/img-3.jpg"); } .recruit_2 .section2 .tip { position: absolute; top: 0; left: 0; right: 0; padding: 2.5vw 0 6vw; background-color: #fff; box-shadow: 0 0 7px rgba(194, 194, 194, 0.35); text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .recruit_2 .section2 .tip:before { content: ''; width: 54px; height: 54px; display: block; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-image: url("../images/recruit/icon-7.png"); } .recruit_2 .section2 .tip h3 { font-size: 20px; color: #2386c9; margin-top: 25px; } .recruit_2 .section2 .para { width: 50%; padding-top: 3.5vw; margin: 0 auto; position: relative; z-index: 2; } .recruit_2 .section2 .para .img_block { overflow: hidden; } .recruit_2 .section2 .para img { display: block; width: 100%; } .recruit_2 .section2 .para p { font-size: 16px; line-height: 28px; color: #000; margin-top: 20px; } .recruit_2 .section2 .para a.rec_view { margin: 3vw auto 0; } .recruit_2 .section3 { padding: 0 7.6vw; } .recruit_2 .section3 .item { position: relative; padding: 4.5vw 0; } .recruit_2 .section3 .item .box { position: relative; } .recruit_2 .section3 .item .img_block { width: 51%; overflow: hidden; } .recruit_2 .section3 .item img { display: block; width: 100%; } .recruit_2 .section3 .item .txt_block { position: absolute; width: 49%; top: 0; bottom: 0; padding-right: 4vw; padding-left: 11vw; } .recruit_2 .section3 .item .txt_block h3 { position: relative; font-size: 24px; color: #2884f6; } .recruit_2 .section3 .item .txt_block span { font-size: 20px; font-family: '021-CAI978'; font-weight: normal; position: absolute; left: -130px; top: 0; } .recruit_2 .section3 .item .txt_block span:before { content: ''; width: 62px; height: 62px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/recruit/icon-8.png"); position: absolute; left: -22px; top: -22px; } .recruit_2 .section3 .item .txt_block .desc { font-size: 16px; line-height: 30px; color: #262626; margin-top: 15px; } .recruit_2 .section3 .item .txt_block a.rec_view { margin-top: 3vw; margin-left: 0; } .recruit_2 .section3 .item:nth-of-type(odd) .img_block { margin-left: 49%; } .recruit_2 .section3 .item:nth-of-type(odd) .txt_block { left: 0; } .recruit_2 .section3 .item:nth-of-type(even) .txt_block { right: 0; } .recruit_2 .section4 { padding: 8.5vw 0 4.5vw; position: relative; } .recruit_2 .section4 .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 11vw; z-index: 1; background-position: center; background-repeat: no-repeat; background-size: cover; } .recruit_2 .section4 .main { position: relative; z-index: 2; } .recruit_2 .section4 .box { background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/recruit/img-3.jpg"); padding: 4vw 5vw; } .recruit_2 .section4 .para { font-size: 16px; line-height: 24px; color: #2884f6; } .recruit_2 .section4 a { width: 19vw; display: block; margin: 4vw auto 0; text-align: center; } .recruit_2 .section4 .icon { height: 12vw; background-position: center; background-repeat: no-repeat; background-color: #fff; background-image: url("../images/recruit/icon-9.png"); } .recruit_2 .section4 span { font-size: 16px; color: #1f1f1f; display: block; margin: 20px 0 10px; } .recruit_2 .section4 h3 { font-size: 22px; color: #2884f6; } .recruit_3 .section1 { background-color: #f6f6f6; padding: 4.5vw 0; } .recruit_3 .section1 .items { font-size: 0; margin-top: 4vw; } .recruit_3 .section1 .item { display: inline-block; vertical-align: top; width: calc((100% - 9.6vw) / 5); margin-right: 2.4vw; position: relative; border-radius: 5px; overflow: hidden; box-shadow: 0 5px 7px rgba(219, 219, 219, 0.35); padding: 3.5vw 0; background-color: #fff; text-align: center; } .recruit_3 .section1 .item:last-of-type { margin-right: 0; } .recruit_3 .section1 .item .show i { display: block; height: 55px; background-position: center; background-repeat: no-repeat; background-size: contain; } .recruit_3 .section1 .item .show h3 { color: #2884f6; margin-top: 20px; font-size: 18px; } .recruit_3 .section1 .item .hide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #0a59ba; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section1 .item .hide .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: .3; z-index: 1; } .recruit_3 .section1 .item .hide h3, .recruit_3 .section1 .item .hide p { position: relative; z-index: 2; } .recruit_3 .section1 .item .hide h3 { font-size: 20px; color: #fff; } .recruit_3 .section1 .item .hide p { font-size: 14px; line-height: 24px; color: #fff; max-width: 80%; margin: 0 auto; margin-top: 15px; } .recruit_3 .section1 .item:hover .hide { opacity: 1; visibility: visible; } .recruit_3 .section2 { font-size: 0; } .recruit_3 .section2 .item { display: inline-block; vertical-align: top; width: 50%; padding: 4vw 5vw 4vw 10vw; background-color: #eef0f3; position: relative; } .recruit_3 .section2 .item .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/recruit/img-2.jpg"); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section2 .item .box { position: relative; } .recruit_3 .section2 .item p { color: #2d73c8; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section2 .item .tar { font-size: 16px; text-align: right; } .recruit_3 .section2 .item .para { font-size: 18px; line-height: 30px; margin: 40px 0 30px; position: relative; } .recruit_3 .section2 .item .para:before { content: ''; position: absolute; top: 15px; left: -80px; width: 46px; height: 1px; background-color: #2d73c8; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section2 .item a.rec_view1 { border-color: #2d73c8; color: #2d73c8; } .recruit_3 .section2 .item a.rec_view1:after { background-image: url("../images/right-2.png"); } .recruit_3 .section2 .item.active .bg { opacity: 1; } .recruit_3 .section2 .item.active p { color: #fff; } .recruit_3 .section2 .item.active .para:before { background-color: #fff; } .recruit_3 .section2 .item.active a.rec_view1 { border-color: #fff; color: #fff; } .recruit_3 .section2 .item.active a.rec_view1:after { background-image: url("../images/right-1.png"); } .recruit_3 .section3 { padding: 190px 0; } .recruit_3 .section3 .main { width: 624px; height: 624px; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/recruit/img-17.png"); position: relative; } .recruit_3 .section3 .center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-image: url("../images/recruit/img-16.png"); text-align: center; } .recruit_3 .section3 .center .box { max-width: 210px; display: inline-block; } .recruit_3 .section3 .center h3 { font-size: 34px; color: #2d73c8; } .recruit_3 .section3 .center p { font-size: 14px; line-height: 24px; color: #3e3e3e; margin-top: 10px; } .recruit_3 .section3 .dot { position: absolute; } .recruit_3 .section3 .dot i { width: 38px; height: 38px; display: block; background-color: #f2f2f2; border-radius: 50%; position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section3 .dot i:before, .recruit_3 .section3 .dot i:after { content: ''; margin: 0 auto; position: absolute; left: 0; right: 0; border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section3 .dot i:before { width: 24px; height: 24px; background-color: #ececec; top: 7px; } .recruit_3 .section3 .dot i:after { width: 12px; height: 12px; background-color: #d2d2d2; top: 13px; } .recruit_3 .section3 .dot p { position: absolute; font-size: 16px; line-height: 24px; color: #000; white-space: nowrap; -webkit-transition: coloe 0.3s ease; -moz-transition: coloe 0.3s ease; -ms-transition: coloe 0.3s ease; transition: coloe 0.3s ease; } .recruit_3 .section3 .dot:nth-of-type(1) { left: 50%; top: 0; margin: -19px 0 0 -19px; } .recruit_3 .section3 .dot:nth-of-type(1) p { left: -20px; bottom: 100%; padding-bottom: 10px; } .recruit_3 .section3 .dot:nth-of-type(2) { left: 93%; top: 25%; margin: -19px 0 0 -19px; } .recruit_3 .section3 .dot:nth-of-type(2) p { padding-left: 10px; top: -10px; left: 100%; } .recruit_3 .section3 .dot:nth-of-type(3) { left: 93%; top: 75%; margin: -19px 0 0 -19px; } .recruit_3 .section3 .dot:nth-of-type(3) p { padding-left: 10px; top: 50%; left: 100%; } .recruit_3 .section3 .dot:nth-of-type(4) { left: 50%; top: 100%; margin: -19px 0 0 -19px; } .recruit_3 .section3 .dot:nth-of-type(4) p { padding-top: 10px; top: 100%; left: -60px; } .recruit_3 .section3 .dot:nth-of-type(5) { left: 7%; top: 75%; margin: -19px 0 0 -19px; } .recruit_3 .section3 .dot:nth-of-type(5) p { padding-right: 10px; top: 10px; right: 100%; } .recruit_3 .section3 .dot:nth-of-type(6) { left: 7%; top: 25%; margin: -19px 0 0 -19px; } .recruit_3 .section3 .dot:nth-of-type(6) p { padding-right: 10px; top: -20px; right: 100%; } .recruit_3 .section3 .dot:hover i { background-color: #deedff; } .recruit_3 .section3 .dot:hover i:before { background-color: #a7cfff; } .recruit_3 .section3 .dot:hover i:after { background-color: #2d73c8; } .recruit_3 .section3 .dot:hover p { color: #2884f6; } .recruit_3 .section4 { padding: 9vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .recruit_3 .section4 .para { font-size: 18px; line-height: 2; color: #fff; position: relative; } .recruit_3 .section4 .para:before { content: ''; width: 46px; height: 1px; background: #fff; position: absolute; left: -80px; top: 18px; } .recruit_3 .section4 a.rec_view1 { margin-top: 2.5vw; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section4 a.rec_view1:after { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit_3 .section4 a.rec_view1:hover { color: #2884f6; background-color: #fff; } .recruit_3 .section4 a.rec_view1:hover:after { background-image: url("../images/right-2.png"); } /*solution*/ .solution_index { position: relative; top: 0; left: 0; right: 0; bottom: 0; } .solution_index .items { font-size: 0; height: 100%; } .solution_index .item { display: inline-block; vertical-align: top; width: 50%; height: 50vh; position: relative; overflow: hidden; } .solution_index .item:nth-of-type(1) { background-color: #feb514; } .solution_index .item:nth-of-type(1) .bg { background-position: left center; } .solution_index .item:nth-of-type(2) { background-color: #2884f6; } .solution_index .item:nth-of-type(3) { background-color: #2884f6; } .solution_index .item:nth-of-type(4) { background-color: #feb514; } .solution_index .item .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: .3; background-position: center; background-repeat: no-repeat; background-size: cover; } .solution_index .item .cell_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; } .solution_index .item .cell { position: relative; } .solution_index .item i { display: block; height: 100px; background-position: center; background-repeat: no-repeat; background-size: contain; } .solution_index .item h3 { font-size: 30px; color: #fff; margin-top: 30px; } .solution_index .item a { display: block; position: absolute; left: 0; right: 0; bottom: -80px; margin: 0 auto; width: 120px; line-height: 42px; border: 1px solid #fff; border-radius: 10px; font-size: 16px; color: #fff; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_index .item a:hover { background-color: #fff; color: #2884f6; } .solution_index .item:hover a { opacity: 1; visibility: visible; } .solution_index .copyright { position: relative; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); font-size: 14px; color: #979797; line-height: 42px; text-align: center; z-index: 2; } .solution_category .section1 { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; text-align: center; } .solution_category .section1 .cell_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .solution_category .section1 h3 { font-size: 60px; color: #fff; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); } .solution_category .section1 p { font-size: 20px; color: #fff; margin-top: 10px; } .solution_category .section1 .btns { position: absolute; bottom: 100px; left: 0; right: 0; text-align: center; } .solution_category .section1 .btns a { display: inline-block; vertical-align: top; line-height: 36px; padding: 0 10px; min-width: 80px; margin: 0 5px; border: 1px solid #fff; border-radius: 5px; font-size: 14px; color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_category .section1 .btns a:hover { background: #fff; color: #2884f6; } .solution_category .section2 { position: relative; } .solution_category .section2 .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .solution_category .section2 .bg .item { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .solution_category .section2 .bg .item:first-of-type { left: 0; } .solution_category .section2 .circle { width: 64vh; height: 64vh; position: absolute; top: calc(50% + 48px); left: 50%; margin: -32vh 0 0 -32vh; z-index: 2; } .solution_category .section2 .circle:before, .solution_category .section2 .circle:after { content: ''; position: absolute; top: 0; left: 40px; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; } .solution_category .section2 .circle:before { background-image: url("../images/solution/wel23.png"); -webkit-animation: inlinerbg 1.2s infinite linear; -moz-animation: inlinerbg 1.2s infinite linear; -ms-animation: inlinerbg 1.2s infinite linear; animation: inlinerbg 1.2s infinite linear; } .solution_category .section2 .circle:after { background-image: url("../images/solution/wel24.png"); -webkit-animation: inlinerbgo 1.2s infinite linear; -moz-animation: inlinerbgo 1.2s infinite linear; -ms-animation: inlinerbgo 1.2s infinite linear; animation: inlinerbgo 1.2s infinite linear; } .solution_category .section2 .circle svg { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); fill: none; stroke-width: 2px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 2; } .solution_category .section2 .circle svg.svg1 { stroke: #fff; } .solution_category .section2 .circle svg.svg2 { stroke: #2884f6; stroke-dasharray: 3130; stroke-dashoffset: 3130; -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -ms-transition: all 0.8s linear; transition: all 0.8s linear; } .solution_category .section2 .circle svg[data-path=""] { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } .solution_category .section2 .circle svg[data-path="4-0"] { stroke-dashoffset: 0; } .solution_category .section2 .circle svg[data-path="4-1"] { stroke-dashoffset: 2346; } .solution_category .section2 .circle svg[data-path="4-2"] { stroke-dashoffset: 1564; } .solution_category .section2 .circle svg[data-path="4-3"] { stroke-dashoffset: 782; } .solution_category .section2 .circle svg[data-path="3-0"] { stroke-dashoffset: 0; } .solution_category .section2 .circle svg[data-path="3-1"] { stroke-dashoffset: 2086; } .solution_category .section2 .circle svg[data-path="3-2"] { stroke-dashoffset: 1043; } .solution_category .section2 .circle svg[data-path="2-0"] { stroke-dashoffset: 0; } .solution_category .section2 .circle svg[data-path="2-1"] { stroke-dashoffset: 1565; } .solution_category .section2 .cont { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; } .solution_category .section2 .cont .item { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; text-align: center; padding-top: 96px; } .solution_category .section2 .cont .item .cell { max-width: 440px; } .solution_category .section2 .cont .item h3 { font-size: 50px; color: #fff; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); } .solution_category .section2 .cont .item h3:after { content: ''; display: block; width: 60px; height: 2px; background-color: #fff; margin: 15px auto 0; } .solution_category .section2 .cont .item p { font-size: 16px; line-height: 24px; color: #fff; margin: 24px 0; } .solution_category .section2 .cont .item a { display: block; margin: 0 auto; width: 150px; line-height: 34px; border-radius: 15px; font-size: 14px; color: #fff; border: 1px solid #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_category .section2 .cont .item a:hover { background-color: #fff; color: #2884f6; } .solution_category .section2 .cont .item:first-of-type { left: 0; } .solution_category .section2 .dots { position: absolute; width: 2px; height: 2px; top: 50%; left: 50%; margin: -1px 0 0 -1px; z-index: 4; } .solution_category .section2 .dot { position: absolute; width: 20px; height: 20px; top: calc(50% + 48px); left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; } .solution_category .section2 .dot:after { content: ''; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 5px; left: 5px; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_category .section2 .dot:nth-of-type(1) { margin-left: -32vh; } .solution_category .section2 .dot.num2:nth-of-type(2) { margin-left: 32vh; } .solution_category .section2 .dot.num3:nth-of-type(2), .solution_category .section2 .dot.num3:nth-of-type(3) { margin-left: 16vh; } .solution_category .section2 .dot.num3:nth-of-type(2) { margin-top: -27.6vh; } .solution_category .section2 .dot.num3:nth-of-type(3) { margin-top: 27.6vh; } .solution_category .section2 .dot.num4:nth-of-type(2) { margin-top: -32vh; } .solution_category .section2 .dot.num4:nth-of-type(3) { margin-left: 32vh; } .solution_category .section2 .dot.num4:nth-of-type(4) { margin-top: 32vh; } .solution_category .section2 .dot.active:after { background-color: #2884f6; } .solution_category .section2 .circle, .solution_category .section2 .cont, .solution_category .section2 .dots { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .solution_category .section2.scale .circle, .solution_category .section2.scale .cont, .solution_category .section2.scale .dots { -webkit-transition: transform 0.8s 0.3s ease; -moz-transition: transform 0.8s 0.3s ease; -ms-transition: transform 0.8s 0.3s ease; transition: transform 0.8s 0.3s ease; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .solution_category .section2 .m_show { display: none; } .solution_page .comm_banner { height: calc(100vh - 96px); } .solution_page .section1 { padding: 10vw 0; font-size: 0; } .solution_page .section1 .left { width: 52%; display: inline-block; vertical-align: middle; padding-right: 20px; } .solution_page .section1 .left .en { font-size: 20px; color: #989898; transform-origin: left center; -webkit-transform: scaleX(0.8); -moz-transform: scaleX(0.8); -ms-transform: scaleX(0.8); transform: scaleX(0.8); } .solution_page .section1 .left h3 { font-size: 80px; color: #16242f; } .solution_page .section1 .left .info { font-size: 20px; line-height: 26px; color: #16242f; margin: 10px 0 20px; } .solution_page .section1 .left .desc { font-size: 16px; line-height: 24px; color: #8b9297; } .solution_page .section1 .left .logos { margin-top: 30px; } .solution_page .section1 .left .logos .logo { display: inline-block; vertical-align: middle; max-height: 36px; max-width: 150px; margin-right: 30px; margin-bottom: 10px; } .solution_page .section1 .right { width: 48%; display: inline-block; vertical-align: middle; } .solution_page .section1 .right img { max-width: 100%; display: block; } .solution_page .section2 { padding: 5vw 0 9vw; background-position: center; background-repeat: no-repeat; background-size: cover; } .solution_page .section2 .comm_title h3, .solution_page .section2 .comm_title h4 { color: #fff; } .solution_page .section2 .items { font-size: 0; margin-top: 3.125vw; text-align: center; } .solution_page .section2 .items p { font-size: 16px; line-height: 24px; color: #fff; text-align: center; margin-bottom: 3.125vw; } .solution_page .section2 .item { display: inline-block; vertical-align: top; width: 170px; height: 170px; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; margin: 1.18vw; } .solution_page .section2 .item a { display: block; height: 100%; } .solution_page .section2 .item i { display: block; height: 58px; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_page .section2 .item span { font-size: 16px; color: #000; display: block; margin-top: 15px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_page .section2 .item:hover { background-color: #2884f6; } .solution_page .section2 .item:hover span { color: #fff; } .solution_page .section2 .tab_title { text-align: center; font-size: 0; margin: 2.5vw 0; } .solution_page .section2 .tab_title span { display: inline-block; vertical-align: top; margin: 0 6px; width: 158px; line-height: 46px; border: 1px solid #fff; color: #fff; border-radius: 5px; font-size: 14px; text-align: center; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .solution_page .section2 .tab_title span.active { background-color: #2884f6; border-color: #2884f6; } @media screen and (min-width: 992px) { .solution_page .section2 .tab_title span:hover { background-color: #2884f6; border-color: #2884f6; } } .solution_detail { background-color: #f6f6f6; } .solution_detail .section1 { padding: 5vw 0; } .solution_detail .section1 .items { margin-top: 3.5vw; font-size: 0; text-align: center; } .solution_detail .section1 .item { width: 220px; display: inline-block; vertical-align: top; margin: 0 5px; position: relative; } .solution_detail .section1 .item img { display: block; width: 100%; } .solution_detail .section1 .item .cell_box { position: absolute; top: 40px; left: 0; right: 0; bottom: 0; } .solution_detail .section1 .item p { font-size: 14px; line-height: 24px; max-height: 96px; color: #000; padding: 0 15px; overflow: hidden; } .solution_detail .section2 { position: relative; margin-bottom: 100px; } .solution_detail .section2 .bg { bottom: 50px; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; height: 100%; } .solution_detail .section2 .bg img{ opacity: 0; } .solution_detail .section2 .absolute{ position: absolute; bottom:-100px; left: 0; width: 100%; } .solution_detail .section2 .wrapper { z-index: 2; } .solution_detail .section2 .para { padding: 5vw 0; font-size: 0; } .solution_detail .section2 .para .img_block { width: 33%; display: inline-block; vertical-align: middle; } .solution_detail .section2 .para .txt_block { width: 67%; display: inline-block; vertical-align: middle; padding-left: 3vw; } .solution_detail .section2 .para img { display: block; max-width: 100%; } .solution_detail .section2 .para h3 { font-size: 30px; color: #fff; } .solution_detail .section2 .para p { font-size: 16px; line-height: 30px; color: #fff; margin-top: 10px; } .solution_detail .section2 .slick { background: #fff; padding: 4vw 70px; } .solution_detail .section2 .slick .logo { margin: 0 16px; text-align: center; } .solution_detail .section2 .slick .logo img { max-width: 100%; } .solution_detail .section2 .slick .slick-arrow { width: 20px; height: 35px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; margin-top: -17px; font-size: 0; background-color: transparent; cursor: pointer; } .solution_detail .section2 .slick .slick-prev { background-image: url("../images/prev-3.png"); left: 30px; } .solution_detail .section2 .slick .slick-next { background-image: url("../images/next-3.png"); right: 30px; } /*empowerment*/ .empowerment_main .section1 { padding: 4vw 0; } .empowerment_main .section1 img.tit { display: block; width: 80%; max-width: 532px; margin: 20px auto 0; } .empowerment_main .section1 .position { width: 520px; border: 1px solid #ededed; position: relative; margin: 30px auto 0; padding: 40px 0 30px; text-align: center; display: none; } .empowerment_main .section1 .position h3 { font-weight: bold; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; background: #fff; padding: 0 12px; } .empowerment_main .section1 .position h4 { font-size: 12px; color: #aeaeae; } .empowerment_main .section1 .info { margin-top: 4vw; } .empowerment_main .section1 .info img { display: block; max-width: 80%; margin: 35px auto; } .empowerment_main .section1 .info .desc { font-size: 16px; line-height: 28px; color: #2c2c2c; max-width: 880px; margin: 0 auto; text-align: center; } .empowerment_main .section2 { background-color: #f8f8f8; padding: 220px 0; overflow: hidden; } .empowerment_main .section2 .circle { width: 620px; height: 620px; margin: 0 auto; border: 1px solid #d9d9d9; border-radius: 50%; position: relative; } .empowerment_main .section2 .center { margin: 0 auto; position: absolute; left: 0; right: 0; top: 50%; width: 82.6%; max-width: 512px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; overflow: hidden; } .empowerment_main .section2 .center img { display: block; width: 100%; } .empowerment_main .section2 .center img.hide { display: none; } .empowerment_main .section2 .center .txt { width: 200px; height: 200px; position: absolute; } .empowerment_main .section2 .center .txt span { font-size: 30px; color: #fff; position: absolute; line-height: 1; } .empowerment_main .section2 .center .txt h3 { position: absolute; text-align: center; font-size: 18px; color: #fff; position: absolute; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .empowerment_main .section2 .center .txt:nth-of-type(1) { top: 6px; left: 6px; } .empowerment_main .section2 .center .txt:nth-of-type(1) span { right: 20px; bottom: 20px; } .empowerment_main .section2 .center .txt:nth-of-type(1) h3 { left: 10%; right: 0; top: 50%; } .empowerment_main .section2 .center .txt:nth-of-type(2) { top: 6px; right: 6px; } .empowerment_main .section2 .center .txt:nth-of-type(2) span { left: 20px; bottom: 20px; } .empowerment_main .section2 .center .txt:nth-of-type(2) h3 { right: 10%; left: 0; top: 50%; } .empowerment_main .section2 .center .txt:nth-of-type(3) { bottom: 6px; right: 6px; } .empowerment_main .section2 .center .txt:nth-of-type(3) span { left: 20px; top: 20px; } .empowerment_main .section2 .center .txt:nth-of-type(3) h3 { right: 10%; left: 0; bottom: 50%; } .empowerment_main .section2 .center .txt:nth-of-type(4) { bottom: 6px; left: 6px; } .empowerment_main .section2 .center .txt:nth-of-type(4) span { right: 20px; top: 20px; } .empowerment_main .section2 .center .txt:nth-of-type(4) h3 { right: 0; left: 10%; bottom: 50%; } .empowerment_main .section2 .center .txt:hover h3 { color: rgba(255, 255, 255, 0.5); } .empowerment_main .section2 .dots .dot { position: absolute; width: 50%; height: 0; top: 50%; left: 0; transform-origin: right center; z-index: 2; } .empowerment_main .section2 .dots .dot span { content: ''; width: 15px; height: 15px; border-radius: 50%; margin: -7px 0 0 -7px; position: absolute; top: 0; left: 0; cursor: pointer; } .empowerment_main .section2 .dots .dot:nth-of-type(1) { -webkit-transform: rotate(calc((360deg / 5) * 0)); -moz-transform: rotate(calc((360deg / 5) * 0)); -ms-transform: rotate(calc((360deg / 5) * 0)); transform: rotate(calc((360deg / 5) * 0)); } .empowerment_main .section2 .dots .dot:nth-of-type(1) span { background-color: #66c4cd; } .empowerment_main .section2 .dots .dot:nth-of-type(2) { -webkit-transform: rotate(calc((360deg / 5) * 3)); -moz-transform: rotate(calc((360deg / 5) * 3)); -ms-transform: rotate(calc((360deg / 5) * 3)); transform: rotate(calc((360deg / 5) * 3)); } .empowerment_main .section2 .dots .dot:nth-of-type(2) span { background-color: #f18d32; } .empowerment_main .section2 .dots .dot:nth-of-type(3) { -webkit-transform: rotate(calc((360deg / 5) * 2)); -moz-transform: rotate(calc((360deg / 5) * 2)); -ms-transform: rotate(calc((360deg / 5) * 2)); transform: rotate(calc((360deg / 5) * 2)); } .empowerment_main .section2 .dots .dot:nth-of-type(3) span { background-color: #c02331; } .empowerment_main .section2 .conts .item { opacity: 0; visibility: hidden; position: absolute; } .empowerment_main .section2 .conts .item .tip { font-size: 16px; line-height: 22px; font-weight: bold; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .empowerment_main .section2 .conts .item .tit { position: relative; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .empowerment_main .section2 .conts .item .tit span { display: inline-block; font-size: 18px; color: #fff; line-height: 34px; padding: 0 28px; border-radius: 20px; } .empowerment_main .section2 .conts .item .point { margin-top: 25px; font-size: 0; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .empowerment_main .section2 .conts .item .point .po { margin-top: 10px; } .empowerment_main .section2 .conts .item .point span { display: inline-block; vertical-align: top; font-size: 15px; color: #3c3c3c; line-height: 26px; padding: 0 16px; border: 1px dotted transparent; border-radius: 20px; } .empowerment_main .section2 .conts .item:nth-of-type(1) { width: 390px; right: 100%; top: 50%; margin-top: -170px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tip { color: #66c4cd; text-align: right; padding-right: 115px; position: relative; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tip:after { content: ''; position: absolute; top: 6px; right: 48px; width: 56px; height: 166px; background: url("../images/empowerment/img-3.png"); } .empowerment_main .section2 .conts .item:nth-of-type(1) .box { margin-top: 38px; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box .spans { font-size: 0; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box span { display: inline-block; vertical-align: top; font-size: 14px; line-height: 26px; color: #fff; background: #66c4cd; padding: 0 20px; margin-right: 10px; border-radius: 20px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box span:last-of-type { margin-right: 0; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box img { display: block; margin: 12px 0 0 34px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tit { padding-left: 84px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tit span { background: #66c4cd; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tit:after { content: ''; position: absolute; top: 50%; left: 210px; right: 0; height: 1px; background: #66c4cd; } .empowerment_main .section2 .conts .item:nth-of-type(1) .point { padding-left: 105px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .point .po:first-of-type { margin-top: 0; } .empowerment_main .section2 .conts .item:nth-of-type(1) .point span { border-color: #66c4cd; } .empowerment_main .section2 .conts .item:nth-of-type(1).active .tit { transition-delay: 0s; } .empowerment_main .section2 .conts .item:nth-of-type(1).active .point { transition-delay: .2s; } .empowerment_main .section2 .conts .item:nth-of-type(1).active .tip { transition-delay: .4s; } .empowerment_main .section2 .conts .item:nth-of-type(1).active .box { transition-delay: .6s; } .empowerment_main .section2 .conts .item:nth-of-type(2) { width: 420px; top: 79%; left: 90.5%; padding-top: 36px; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tip { margin-left: 160px; color: #f18d32; position: relative; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tip:before { content: ''; width: 56px; height: 56px; position: absolute; top: 6px; left: -65px; background-image: url("../images/empowerment/img-5.png"); } .empowerment_main .section2 .conts .item:nth-of-type(2) .tit { margin-top: 23px; position: relative; margin-left: 135px; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tit span { background-color: #f18d32; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tit:before { content: ''; width: 136px; height: 100px; background-image: url("../images/empowerment/img-6.png"); position: absolute; bottom: 50%; right: 100%; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point { padding-left: 156px; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point .po { display: inline-block; vertical-align: top; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point .po:nth-of-type(odd) { width: 106px; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point .po:nth-of-type(1), .empowerment_main .section2 .conts .item:nth-of-type(2) .point .po:nth-of-type(2) { margin-top: 0; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point span { border-color: #f18d32; } .empowerment_main .section2 .conts .item:nth-of-type(2).active .tit { transition-delay: 0s; } .empowerment_main .section2 .conts .item:nth-of-type(2).active .point { transition-delay: .2s; } .empowerment_main .section2 .conts .item:nth-of-type(2).active .tip { transition-delay: .4s; } .empowerment_main .section2 .conts .item:nth-of-type(3) { width: 490px; top: -28px; left: 90.5%; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tip { margin-left: 160px; color: #c02331; position: relative; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tip:before { content: ''; width: 56px; height: 56px; position: absolute; top: 6px; left: -65px; background-image: url("../images/empowerment/img-7.png"); } .empowerment_main .section2 .conts .item:nth-of-type(3) .tit { margin-top: 23px; position: relative; margin-left: 135px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tit span { background-color: #c02331; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tit:before { content: ''; width: 136px; height: 100px; background-image: url("../images/empowerment/img-8.png"); position: absolute; top: 50%; right: 100%; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point { padding-left: 156px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point .po { display: inline-block; vertical-align: top; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point .po:nth-of-type(odd) { width: 178px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point .po:nth-of-type(1), .empowerment_main .section2 .conts .item:nth-of-type(3) .point .po:nth-of-type(2) { margin-top: 0; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point span { border-color: #c02331; } .empowerment_main .section2 .conts .item:nth-of-type(3).active .tit { transition-delay: 0s; } .empowerment_main .section2 .conts .item:nth-of-type(3).active .point { transition-delay: .2s; } .empowerment_main .section2 .conts .item:nth-of-type(3).active .tip { transition-delay: .4s; } .empowerment_main .section2 .conts .item.active { opacity: 1; visibility: visible; } .empowerment_main .section2 .conts .item.active .tip, .empowerment_main .section2 .conts .item.active .box, .empowerment_main .section2 .conts .item.active .tit, .empowerment_main .section2 .conts .item.active .point { opacity: 1; } /*search*/ .search_index .section1 { padding: 4.5vw 0; font-size: 0; } .search_index .section1 .left { display: inline-block; vertical-align: top; width: calc(100% - 400px); border: 1px solid #f2f2f2; padding: 30px 40px 50px; } .search_index .section1 .left .items { margin-bottom: 3vw; } .search_index .section1 .left .item { position: relative; border-bottom: 1px solid #f2f2f2; line-height: 70px; padding-right: 90px; } .search_index .section1 .left .item a { font-size: 16px; color: #333; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .search_index .section1 .left .item span { position: absolute; right: 0; top: 0; font-size: 14px; color: #808080; } .search_index .section1 .left .item:hover a { color: #2884f6; } .search_index .section1 .right { display: inline-block; vertical-align: top; margin-left: 40px; width: 360px; border: 1px solid #f2f2f2; border-top: none; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .search_index .section1 .right h3 { line-height: 60px; background-color: #2884f6; font-size: 20px; color: #fff; text-indent: 40px; } .search_index .section1 .right a { display: block; font-size: 16px; color: #333; line-height: 70px; text-indent: 40px; border-top: 1px solid #f2f2f2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .search_index .section1 .right a:hover,.search_index .section1 .right a.active { color: #2884f6; } .search_index .section1 .right.visi { opacity: 0; } /*---------- 2020-06-05 blockchain ----------*/ .b-chain-tit { text-align: center; } .b-chain-tit h3 { font-size: 34px; } .b-chain-tit p { font-size: 16px; margin-top: 15px; } .b-chain-tit:after { content: ''; display: block; width: 54px; height: 2px; margin: 15px auto 0; } .b-chain-tit.gray h3 { color: #010101; } .b-chain-tit.gray p { color: #666; } .b-chain-tit.gray:after { background-color: #333; } .b-chain-tit.color h3 { color: #1f73d7; } .b-chain-tit.color:after { background-color: #1f73d7; } .b-chain-tit.white h3 { color: #fff; } .b-chain-tit.white:after { background-color: #fff; } .blockchain-intro-s1 { padding: 4.5vw 0; } .blockchain-intro-s1 .para { font-size: 16px; line-height: 2; color: #333333; } .blockchain-intro-s1 .top-box .para { margin-top: 2vw; } .blockchain-intro-s1 .mid-box { margin: 4vw 0; } .blockchain-intro-s1 .mid-box img { display: block; width: 100%; } .blockchain-intro-s1 .bot-box img { display: block; max-width: 100%; margin: 20px auto 0; } .blockchain-intro-s2 { padding: 4.5vw 0; background-color: #fafafa; } .blockchain-intro-s2 .img-box { margin-top: 2vw; } .blockchain-intro-s2 .img-box img { display: block; width: 100%; } .blockchain-prod-s1 { padding: 4.5vw 0; background-color: #f9f9fa; } .blockchain-prod-s1 .items { margin-top: 6vw; } .blockchain-prod-s1 .item { font-size: 0; position: relative; margin-top: 6vw; } .blockchain-prod-s1 .item:nth-of-type(1) { margin-top: 0; } .blockchain-prod-s1 .item .img-box { width: 50%; text-align: center; } .blockchain-prod-s1 .item .txt-box { width: 50%; padding: 0 2.5vw; position: absolute; top: 0; bottom: 0; } .blockchain-prod-s1 .item img { max-width: 100%; } .blockchain-prod-s1 .item h3 { font-size: 40px; color: #237ded; } .blockchain-prod-s1 .item h4 { font-size: 20px; color: #237ded; margin-top: 10px; } .blockchain-prod-s1 .item p { font-size: 16px; line-height: 2; color: #777777; margin-top: 20px; } .blockchain-prod-s1 .item:nth-of-type(odd) .txt-box { right: 0; } .blockchain-prod-s1 .item:nth-of-type(even) .img-box { margin-left: 50%; } .blockchain-prod-s1 .item:nth-of-type(even) .txt-box { left: 0; } .blockchain-tech-s1 { padding: 4.5vw 0; } .blockchain-tech-s1 .cont { margin-top: 2.5vw; background-color: #222222; } .blockchain-tech-s1 .item { position: relative; } .blockchain-tech-s1 .item .img-box { overflow: hidden; } .blockchain-tech-s1 .item img { display: block; width: 100%; } .blockchain-tech-s1 .item .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 2vw; background-color: rgba(34, 34, 34, 0.8); text-align: center; transition: all .3s ease; } .blockchain-tech-s1 .item i { display: block; height: 4vw; max-height: 76px; background-position: center; background-repeat: no-repeat; background-size: contain; } .blockchain-tech-s1 .item h3 { font-size: 20px; color: #fff; margin-top: 15px; } .blockchain-tech-s1 .item h3:after { content: ''; width: 20px; height: 1px; background-color: #fff; display: block; margin: 15px auto 0; } .blockchain-tech-s1 .item p { font-size: 14px; line-height: 24px; color: #fff; margin-top: 15px; display: none; } @media screen and (min-width: 992px) { .blockchain-tech-s1 .item:hover .txt-box { background-color: rgba(40, 132, 246, 0.8); } .blockchain-tech-s1 .item:hover p { display: block; } } .blockchain-tech-s1 .slick-arrow { position: absolute; top: 50%; margin-top: -20px; width: 26px; height: 40px; background-color: transparent; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: contain; transition: all .3s ease; cursor: pointer; } .blockchain-tech-s1 .slick-prev { left: -80px; background-image: url("../images/prev-2.png"); } .blockchain-tech-s1 .slick-prev:hover { background-image: url("../images/prev-3.png"); } .blockchain-tech-s1 .slick-next { right: -80px; background-image: url("../images/next-2.png"); } .blockchain-tech-s1 .slick-next:hover { background-image: url("../images/next-3.png"); } .blockchain-tech-s2 { padding-bottom: 4.5vw; } .blockchain-tech-s2 .para { text-align: center; font-size: 18px; line-height: 28px; color: #666666; margin-top: 20px; } .blockchain-tech-s2 .img-box { width: 80%; max-width: 1039px; margin: 2.5vw auto 0; } .blockchain-tech-s2 .img-box img { display: block; width: 100%; } .blockchain-tech-s3 { padding: 4.5vw 0; background-color: #f7f7f7; } .blockchain-tech-s3 .para { text-align: center; font-size: 18px; line-height: 28px; color: #666666; margin-top: 20px; } .blockchain-tech-s3 .para img { display: block; max-width: 100%; margin: 20px auto 0; } .blockchain-tech-s3 .items { font-size: 0; display: flex; flex-wrap: wrap; margin: 3vw -15px 0; } .blockchain-tech-s3 .item { display: inline-block; vertical-align: top; width: calc(33% - 30px); margin: 30px 15px 0; background-color: #fff; border-left: 3px solid #2884f6; padding: 3vw 2vw; transition: all .3s ease; } @media screen and (min-width: 992px) { .blockchain-tech-s3 .item:nth-of-type(1), .blockchain-tech-s3 .item:nth-of-type(2), .blockchain-tech-s3 .item:nth-of-type(3) { margin-top: 0; } } .blockchain-tech-s3 .item h3 { font-size: 22px; color: #444444; transition: all .3s ease; } .blockchain-tech-s3 .item h3:after { content: ''; display: block; margin-top: 15px; width: 40px; height: 2px; background-color: #444444; transition: all .3s ease; } .blockchain-tech-s3 .item p { font-size: 15px; line-height: 28px; color: #666666; margin-top: 15px; transition: all .3s ease; } @media screen and (min-width: 992px) { .blockchain-tech-s3 .item:hover { background-color: #2884f6; } .blockchain-tech-s3 .item:hover h3, .blockchain-tech-s3 .item:hover p { color: #fff; } .blockchain-tech-s3 .item:hover h3:after { background-color: #fff; } } .blockchain-app-s1 { padding: 4.5vw 0; } .blockchain-app-s1 .items { margin: 2vw -12px 0; font-size: 0; } .blockchain-app-s1 .item { display: inline-block; vertical-align: top; width: calc(33% - 24px); margin: 24px 12px 0; background-color: #fff; box-shadow: 0 0 20px rgba(178, 178, 178, 0.3); transition: all .3s ease; } .blockchain-app-s1 .item .img-box { overflow: hidden; } .blockchain-app-s1 .item img { display: block; width: 100%; transition: all .3s ease; } .blockchain-app-s1 .item .txt-box { padding: 20px 30px; } .blockchain-app-s1 .item h3 { font-size: 24px; color: #222; } .blockchain-app-s1 .item p { font-size: 16px; line-height: 26px; color: #666666; margin-top: 10px; } @media screen and (min-width: 992px) { .blockchain-app-s1 .item:nth-of-type(1), .blockchain-app-s1 .item:nth-of-type(2), .blockchain-app-s1 .item:nth-of-type(3) { margin-top: 0; } .blockchain-app-s1 .item:hover { transform: translateY(-10px); } .blockchain-app-s1 .item:hover img { transform: scale(1.1); } } .blockchain-pas-s1 { padding: 4.5vw 0; } .blockchain-pas-s1 .items { font-size: 0; margin: 3vw -12px 0; } .blockchain-pas-s1 .item { display: inline-block; vertical-align: top; width: calc(25% - 24px); margin: 0 12px; position: relative; } .blockchain-pas-s1 .item .img-box { overflow: hidden; } .blockchain-pas-s1 .item img { display: block; width: 100%; } .blockchain-pas-s1 .item span { position: absolute; top: 0; left: 0; font-size: 16px; line-height: 36px; color: #fff; padding: 0 12px; background-color: #2884f6; z-index: 2; } .blockchain-pas-s1 .item .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 2.5vw; } .blockchain-pas-s1 .item h3 { font-size: 18px; line-height: 26px; color: #333; padding: 10px 2vw; text-align: center; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("../images/qukuailian/img-21.png"); } .blockchain-pas-s1 .item.fabiao h3 { color: #2884f6; background-image: url("../images/qukuailian/img-22.png"); } .blockchain-pas-s2 { padding-top: 4.5vw; background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-image: url("../images/qukuailian/img-23.jpg"); } .blockchain-pas-s2 .items { font-size: 0; margin: 4vw -15px 0; display: flex; } .blockchain-pas-s2 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 30px); margin: 0 15px; text-align: center; padding: 2.5vw 2vw; background-color: #fff; box-shadow: 0 0 20px rgba(178, 178, 178, 0.3); } .blockchain-pas-s2 .item span { display: block; font-size: 60px; font-family: 'DIN-Bold'; color: #e6ebf2; } .blockchain-pas-s2 .item h3 { background-color: #fff; margin-top: -30px; padding: 15px 0; font-size: 24px; color: #2884f6; position: relative; } .blockchain-pas-s2 .item h3:after { content: ''; width: 1px; height: 20px; background-color: #92abea; display: block; margin: 5px auto 0; transform-origin: center bottom; transform: rotate(45deg); } .blockchain-pas-s2 .item p { font-size: 15px; color: #333333; line-height: 28px; text-align: justify; } .blockchain-pas-s3 { padding: 4.5vw 0; } .blockchain-pas-s3 .block { margin-top: 4.5vw; } .blockchain-pas-s3 .block:nth-of-type(1) { margin-top: 0; } .blockchain-pas-s3 .items { font-size: 0; display: flex; margin: 2.5vw -15px 0; } .blockchain-pas-s3 .item { display: inline-block; vertical-align: top; margin-left: 15px; margin-right: 15px; margin-top: 30px; padding: 30px 30px 0; background-color: #fff; box-shadow: 0 0 20px rgba(178, 178, 178, 0.3); } .blockchain-pas-s3 .item h3 { padding: 20px 0; font-size: 16px; line-height: 24px; letter-spacing: 2px; color: #333; text-align: center; } .blockchain-pas-s3 .items-1 .item { width: calc(33.33% - 30px); } @media screen and (min-width: 992px) { .blockchain-pas-s3 .items-1 .item:nth-of-type(1), .blockchain-pas-s3 .items-1 .item:nth-of-type(2), .blockchain-pas-s3 .items-1 .item:nth-of-type(3) { margin-top: 0; } } .blockchain-pas-s3 .items-2 { flex-wrap: wrap; } .blockchain-pas-s3 .items-2 .item { width: calc(25% - 30px); } @media screen and (min-width: 992px) { .blockchain-pas-s3 .items-2 .item:nth-of-type(1), .blockchain-pas-s3 .items-2 .item:nth-of-type(2), .blockchain-pas-s3 .items-2 .item:nth-of-type(3), .blockchain-pas-s3 .items-2 .item:nth-of-type(4) { margin-top: 0; } } @media screen and (max-width: 1600px) { .blockchain-prod-s1 .item h3 { font-size: 32px; } .blockchain-prod-s1 .item h4 { font-size: 18px; } .blockchain-tech-s1 .item h3 { font-size: 18px; } .blockchain-tech-s3 .item h3 { font-size: 20px; } .blockchain-tech-s2 .para, .blockchain-tech-s3 .para { font-size: 16px; line-height: 24px; } .blockchain-app-s1 .item h3 { font-size: 20px; } .blockchain-app-s1 .item p { font-size: 15px; line-height: 24px; } .blockchain-pas-s2 .item h3 { font-size: 20px; } } @media screen and (max-width: 1366px) { .b-chain-tit h3 { font-size: 30px; } .blockchain-prod-s1 .item h3 { font-size: 28px; } .blockchain-prod-s1 .item h4 { font-size: 16px; } .blockchain-prod-s1 .item p { font-size: 14px; line-height: 24px; } .blockchain-tech-s1 .item i { height: 46px; } .blockchain-tech-s1 .item h3 { font-size: 16px; margin-top: 10px; } .blockchain-tech-s1 .item p { font-size: 12px; line-height: 20px; margin-top: 10px; } .blockchain-tech-s3 .item h3 { font-size: 18px; } .blockchain-tech-s3 .item p { font-size: 14px; line-height: 24px; } .blockchain-app-s1 .item h3 { font-size: 18px; } .blockchain-app-s1 .item p { font-size: 14px; } .blockchain-pas-s1 .item h3 { font-size: 16px; line-height: 24px; } .blockchain-pas-s1 .item span { font-size: 14px; line-height: 30px; } .blockchain-pas-s2 .item h3 { font-size: 18px; } .blockchain-pas-s3 .item h3 { font-size: 14px; } } @media screen and (max-width: 992px) { .blockchain-intro-s1 { padding: 20px 0; } .blockchain-app-s1 .item{ height:auto !important } .b-chain-tit h3 { font-size: 20px; } .b-chain-tit:after { width: 30px; } .blockchain-intro-s1 .para { font-size: 14px; line-height: 24px; } .blockchain-intro-s1 .top-box .para { margin-top: 15px; } .blockchain-intro-s1 .mid-box { margin: 15px 0; } .blockchain-intro-s2 { padding: 20px 0; } .blockchain-intro-s2 .img-box { margin-top: 15px; } .blockchain-prod-s1 { padding: 20px 0; } .blockchain-prod-s1 .items { margin-top: 20px; } .blockchain-prod-s1 .item { margin-top: 30px; } .blockchain-prod-s1 .item .img-box { width: 100%; } .blockchain-prod-s1 .item:nth-of-type(even) .img-box { margin-left: 0; } .blockchain-prod-s1 .item .txt-box { position: static; width: 100%; padding: 0; margin-top: 10px; } .blockchain-prod-s1 .item h3 { font-size: 18px; text-align: center; } .blockchain-prod-s1 .item h4 { font-size: 12px; margin-top: 5px; text-align: center; } .blockchain-prod-s1 .item p { margin-top: 10px; } .blockchain-tech-s1 { padding: 20px 0; } .blockchain-tech-s1 .cont { margin-top: 20px; background-color: transparent; } .blockchain-tech-s1 .item p { display: block; } .blockchain-tech-s1 .item .txt-box { padding: 0 20px; } .blockchain-tech-s1 .item.slick-active .txt-box { background-color: rgba(40, 132, 246, 0.8); } .blockchain-tech-s1 .slick-dots { text-align: center; margin-top: 10px; font-size: 0; } .blockchain-tech-s1 .slick-dots li { display: inline-block; vertical-align: top; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background-color: #ccc; } .blockchain-tech-s1 .slick-dots li.slick-active { background-color: #2884f6; } .blockchain-tech-s1 .slick-dots button { display: none; } .blockchain-tech-s2 { padding: 20px 0; } .blockchain-tech-s2 .para, .blockchain-tech-s3 .para { font-size: 14px; margin-top: 15px; } .blockchain-tech-s2 .img-box { width: 100%; margin-top: 20px; } .blockchain-tech-s3 { padding: 20px 0; } .blockchain-tech-s3 .items { margin: 20px 0 0; display: block; } .blockchain-tech-s3 .item { width: 100%; margin: 20px 0 0; padding: 15px 20px; } .blockchain-tech-s3 .item:nth-of-type(1) { margin-top: 0; } .blockchain-tech-s3 .item h3 { font-size: 16px; } .blockchain-tech-s3 .item h3:after { width: 20px; height: 1px; margin-top: 10px; } .blockchain-tech-s3 .item p { margin-top: 15px; } .b-chain-tit p { font-size: 14px; line-height: 24px; } .blockchain-app-s1 .items { margin: 20px 0 0; } .blockchain-app-s1 .item { width: 100%; margin: 20px 0 0; } .blockchain-app-s1 .item:nth-of-type(1) { margin-top: 0; } .blockchain-app-s1 .item .txt-box { padding: 15px 20px; } .blockchain-app-s1 .item h3 { font-size: 16px; } .blockchain-app-s1 .item p { font-size: 14px; } .blockchain-pas-s1 { padding: 20px 0; } .blockchain-pas-s1 .items { margin: 20px 0 0; } .blockchain-pas-s1 .item { width: 100%; margin: 20px 0 0; } .blockchain-pas-s1 .item:nth-of-type(1) { margin-top: 0; } .blockchain-pas-s1 .item .txt-box { padding: 0 20px; } .blockchain-pas-s1 .item h3 { padding: 20px; } .blockchain-pas-s2 { padding-top: 20px; } .blockchain-pas-s2 .items { display: block; margin: 20px 0 0; } .blockchain-pas-s2 .item { width: 100%; margin: 20px 0 0; padding: 20px; } .blockchain-pas-s2 .item:nth-of-type(1) { margin-top: 0; } .blockchain-pas-s2 .item span { font-size: 40px; } .blockchain-pas-s2 .item h3 { font-size: 16px; margin-top: -20px; } .blockchain-pas-s2 .item p { font-size: 14px; line-height: 24px; } .blockchain-pas-s3 { padding: 20px 0; } .blockchain-pas-s3 .block { margin-top: 20px; } .blockchain-pas-s3 .items { margin: 20px 0 0; display: block; } .blockchain-pas-s3 .items-1 .item { width: 100%; margin: 20px 0 0; } .blockchain-pas-s3 .items-1 .item:nth-of-type(1) { margin-top: 0; } .blockchain-pas-s3 .items-2 .item { width: 100%; margin: 20px 0 0; } .blockchain-pas-s3 .items-2 .item:nth-of-type(1) { margin-top: 0; } .honor_main{ height: auto; padding-bottom: 50px; } .honour_page .commn_content{ margin-top:80px } } /*---------- 2021-08-23 ----------*/ .blockchain-app-s2 { padding-bottom: 6.25vw; } .blockchain-app-s2 .items { font-size: 0; margin-top: 4vw; } .blockchain-app-s2 .item { display: inline-block; vertical-align: top; width: calc((100% - 26px) / 2); position: relative; background-color: #fff; box-shadow: 0 0 7px rgba(229, 229, 255, 0.35); margin-bottom: 26px; } .blockchain-app-s2 .item:nth-of-type(odd) { margin-right: 26px; } @media screen and (min-width: 992px) { .blockchain-app-s2 .item:nth-last-of-type(1), .blockchain-app-s2 .item:nth-last-of-type(2) { margin-bottom: 0; } } .blockchain-app-s2 .item .img_block { width: 40%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; } .blockchain-app-s2 .item .bg { height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .blockchain-app-s2 .item .txt_block { width: 60%; padding: 28px; } .blockchain-app-s2 .item h3 { font-size: 18px; color: #3f3f3f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .blockchain-app-s2 .item p { font-size: 14px; line-height: 22px; height: 44px; color: #989898; margin: 15px 0 20px; overflow: hidden; } .blockchain-app-s2 .item .date { font-size: 14px; color: #707070; font-family: 'Arial'; padding-top: 15px; border-top: 1px solid #ebebeb; } .blockchain-app-s2 .item:hover .bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blockchain-app-s2 .item:hover h3 { color: #2884f6; } @media screen and (max-width: 992px) { .blockchain-app-s2 { padding-bottom: 20px; } .blockchain-app-s2 .items { margin-top: 20px; } } @media screen and (max-width: 1600px) { /*solution*/ .solution_category .section1 h3 { font-size: 50px; } .solution_category .section2 .cont .item h3 { font-size: 40px; } .solution_category .section2 .circle { width: 70vh; height: 70vh; margin: -35vh 0 0 -35vh; } .solution_category .section2 .dot:nth-of-type(1) { margin-left: -35vh; } .solution_category .section2 .dot.num2:nth-of-type(2) { margin-left: 35vh; } .solution_category .section2 .dot.num3:nth-of-type(2), .solution_category .section2 .dot.num3:nth-of-type(3) { margin-left: 17.5vh; } .solution_category .section2 .dot.num3:nth-of-type(2) { margin-top: -30vh; } .solution_category .section2 .dot.num3:nth-of-type(3) { margin-top: 30.5vh; } .solution_category .section2 .dot.num4:nth-of-type(2) { margin-top: -35vh; } .solution_category .section2 .dot.num4:nth-of-type(3) { margin-left: 35vh; } .solution_category .section2 .dot.num4:nth-of-type(4) { margin-top: 35vh; } .solution_page .section1 .left h3 { font-size: 70px; } /*index*/ .index_main .section2 { padding: 70px 0 330px; } .index_main .section2 .circle { width: 480px; height: 480px; } .index_main .section2 .conts .cont .icon i { width: 60px; height: 80px; background-size: contain; } .index_main .section2 .conts .cont .tip { width: 80px; height: 80px; } .index_main .section2 .conts .cont .tip span { font-size: 13px; max-width: 80%; } .index_main .section2 .conts .cont:nth-of-type(1) .icon:nth-of-type(1) { left: 6%; top: -9%; } .index_main .section2 .conts .cont:nth-of-type(1) .icon:nth-of-type(2) { top: 29%; } .index_main .section2 .conts .cont:nth-of-type(1) .icon:nth-of-type(3) { left: 2%; top: 66%; } .index_main .section2 .conts .cont:nth-of-type(3) .icon:nth-of-type(1) { right: -4%; top: -9%; } .index_main .section2 .items .item { font-size: 16px; } .index_main .section2 .bg_block .txt h3 { font-size: 30px; } /*empowerment*/ .empowerment_main .section2 .circle { width: 480px; height: 480px; } .empowerment_main .section2 .conts .item:nth-of-type(3) { top: -60px; } .empowerment_main .section2 .center .txt { width: 156px; height: 156px; } .empowerment_main .section2 .center .txt span { font-size: 24px; } .empowerment_main .section2 .center .txt:nth-of-type(1) span { right: 15px; bottom: 15px; } .empowerment_main .section2 .center .txt:nth-of-type(2) span { left: 15px; bottom: 15px; } .empowerment_main .section2 .center .txt:nth-of-type(3) span { left: 15px; top: 15px; } .empowerment_main .section2 .center .txt:nth-of-type(4) span { right: 15px; top: 15px; } .empowerment_main .section2 .center .txt h3 { font-size: 16px; } .index_main .section3 .new-item h3 { font-size: 20px; } .index_main .section3 .new-item:hover h3 { font-size: 24px; } .index_main .section3 .new-item h3:after { width: 40px; height: 3px; margin-top: 15px; } .index_main .section3 .new-item p { margin-top: 15px; } .index_main .section3 .new-item .link a { font-size: 16px; padding: 0 20px; margin: 5px; } } @media screen and (max-width: 1500px) { /*commom*/ .comm_subnav { margin-top: -70px; } .comm_subnav .item a { line-height: 70px; } /*about_index*/ .about_index .section2 .desc { font-size: 16px; } .about_index .section3 .item h3 { font-size: 16px; } .about_index .section3 .item p { line-height: 20px; } .about_index .section3 .center { margin-top: -3%; } .about_index .section3 .circle { -webkit-transform: translateY(-7%); -moz-transform: translateY(-7%); -ms-transform: translateY(-7%); transform: translateY(-7%); } .about_index .section6 .box h3 { font-size: 16px; line-height: 26px; } /*about_1*/ .about_1 .section1 .txt_block .en { font-size: 70px; } .about_1 .section1 .txt_block .zh { font-size: 34px; } .about_1 .section1 .txt_block .slogan { margin: 15px 0; } .about_1 .section2 .box .num span { font-size: 44px; } /*about_3*/ .about_3 .section2 .item { height: 500px; } .about_3 .section2 .item h3 { font-size: 26px; line-height: 32px; } .about_3 .section2 .item p { line-height: 24px; } /*about_4*/ .about_4 .section1 .item i { height: 40px; } .about_4 .section1 .item h3 { font-size: 16px; margin: 15px 0 20px; } .about_4 .section1 .item p { font-size: 13px; line-height: 18px; } .about_4 .section1 .item:hover p { height: 108px; } .about_4 .section2 .item p { font-size: 14px; } .about_4 .section2 .item i { width: 60px; height: 60px; } .about_4 .section2 .left .item { padding-right: 80px; } .about_4 .section2 .right .item { padding-left: 80px; } .about_4 .section2 .item .txt { height: 60px; } /*about_5*/ .about_5 .section1 .big_slick .item a { width: 80px; height: 80px; } .about_5 .section1 .small_slick .btn { font-size: 14px; } /*investor_1*/ .investor_1 .section1 form { height: 60px; padding-right: 60px; } .investor_1 .section1 form button { width: 60px; height: 60px; background-size: auto 24px; } /*news*/ .news_list .section1 .txt_block h3 { font-size: 26px; } .news_list .section2 .item .txt_block, .blockchain-app-s2 .item .txt_block { padding: 20px; } .news_list .section2 .item .img_block, .blockchain-app-s2 .item .img_block { width: 34%; } .news_list .section2 .item .txt_block, .blockchain-app-s2 .item .txt_block { width: 66%; } .news_list .section2 .item p, .blockchain-app-s2 .item p { margin: 10px 0 15px; } .news_detail .section1 h3 { font-size: 32px; } .research_list .section1 .item a { padding: 20px 100px 20px 15px; font-size: 16px; } /*solution*/ .solution_index .item i { height: 80px; } .solution_index .item h3 { font-size: 26px; } .solution_page .comm_banner { height: calc(100vh - 80px); } .comm_banner h2 { font-size: 50px; } .solution_page .section1 .left h3 { font-size: 60px; } /*recruit*/ .recruit_index .item { padding: 30px 0; } .recruit_1 .section1 .item .hide .post { font-size: 30px; } .recruit_1 .section1 .item .hide .salary span { font-size: 20px; } .recruit_1 .section1 .item .hide .tip span { font-size: 14px; } .recruit_2 .section1 .lead span { font-size: 28px; line-height: 48px; } .recruit_2 .section2 .para { width: 60%; padding-top: 5vw; } .recruit_2 .section3 .item .txt_block span { font-size: 16px; left: -95px; top: 4px; } .recruit_2 .section3 .item .txt_block span:before { width: 50px; height: 50px; top: -17px; left: -14px; } .recruit_2 .section3 .item .txt_block h3 { font-size: 20px; } .recruit_2 .section3 .item .txt_block .desc { font-size: 14px; line-height: 24px; } .comm_sec1 .item .txt_block { padding: 20px; } .recruit_3 .section1 .item .hide h3 { font-size: 18px; } .recruit_3 .section2 .item .para { font-size: 16px; } .recruit_3 .section3 .center h3 { font-size: 30px; } .recruit_3 .section4 .para { font-size: 16px; } .comm_sec1 .item h3 { font-size: 18px; } /*index*/ .index_main .section1 .item { height: calc(100vh - 80px); } .index_main .section4 .item h3 { font-size: 18px; padding: 15px 0; margin-bottom: 10px; } .index_main .section6 .data .item span { font-size: 50px; } .index_main .section3 .item .sub .box h3 { font-size: 18px; } .index_main .section3 .item .single h3 { font-size: 20px; } .index_main .section3 .main { height: 500px; } .index_main .section3 .btn h3 { font-size: 16px; background-size: auto 26px; } .index_main .section3 .btn:nth-of-type(2) h3 { padding-left: 26px; } .index_main .section3 .btn:nth-of-type(1) h3 { padding-right: 26px; } /*search*/ .search_index .section1 .left { width: calc(100% - 320px); } .search_index .section1 .right { width: 280px; } } @media screen and (max-width: 1366px) { /*commom*/ .comm_title h3 { font-size: 30px; } /*about_index*/ .about_index .section1 h3 { font-size: 30px; } /*solution*/ .solution_category .section1 h3 { font-size: 46px; } .solution_category .section2 .cont .item .cell { max-width: 350px; } .solution_category .section2 .cont .item h3 { font-size: 34px; } .comm_banner h2 { font-size: 46px; } .solution_page .section1 .left h3 { font-size: 50px; } .solution_page .section1 .left .info { font-size: 18px; } .solution_page .section2 .item { margin: 10px; } /*empowerment*/ .empowerment_main .section2 { padding-top: 100px; } .empowerment_main .section2 .circle { width: 420px; height: 420px; } .empowerment_main .section2 .conts .item:nth-of-type(1) { width: 320px; margin-top: -164px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tip { padding-right: 100px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tip:after { right: 30px; height: 159px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box span { padding: 0 16px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box img { width: 204px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tit { padding-left: 68px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .point { padding-left: 80px; } .empowerment_main .section2 .conts .item:nth-of-type(2) { width: 340px; top: 68%; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tit { margin-left: 70px; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tit:before { width: 96px; height: 50px; background-position: 0 bottom; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tip { margin-left: 115px; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point { padding-left: 80px; } .empowerment_main .section2 .conts .item:nth-of-type(3) { width: 420px; top: -30px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tit { margin-left: 70px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tit:before { width: 96px; height: 50px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tip { margin-left: 115px; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point { padding-left: 80px; width: 420px; } .empowerment_main .section2 .center .txt { width: 135px; height: 135px; } .empowerment_main .section2 .center .txt span { font-size: 20px; } .empowerment_main .section2 .center .txt:nth-of-type(1) span { right: 12px; bottom: 12px; } .empowerment_main .section2 .center .txt:nth-of-type(2) span { left: 12px; bottom: 12px; } .empowerment_main .section2 .center .txt:nth-of-type(3) span { left: 12px; top: 12px; } .empowerment_main .section2 .center .txt:nth-of-type(4) span { right: 12px; top: 12px; } .empowerment_main .section2 .center .txt h3 { font-size: 15px; } .index_main .section3 .new-item h3 { font-size: 18px; } .index_main .section3 .new-item:hover h3 { font-size: 22px; } .index_main .section3 .new-item .link { margin-top: 20px; } .index_main .section3 .new-item .link a { font-size: 15px; line-height: 2.5; } } @media screen and (max-width: 1200px) { /*about_3*/ .about_3 .section2 .item h3 { font-size: 20px; line-height: 26px; } .about_3 .section2 .item h3:after { margin-top: 10px; } .about_3 .section2 .item p { margin-top: 10px; } .about_4 .section1 .item:hover p { height: 72px; } /*about_7*/ .about_7 .section1 .item { margin: 0 1.9vw; } /*investor_1*/ .investor_1 .section1 .item h3 { font-size: 16px; line-height: 24px; height: 48px; } /*investor_4*/ .investor_4 .section1 .item:nth-of-type(2) { margin: 0 2vw; } /*news*/ .news_list .section1 .txt_block h3 { font-size: 22px; } .news_list .section1 .txt_block p { margin: 15px 0; } .news_detail .section1 h3 { font-size: 28px; } /*index*/ .index_main .section3 .item .single .txt_block { width: 460px; } /*solution*/ .solution_page .section2 .item { width: 130px; height: 130px; } .solution_page .section2 .item i { height: 50px; background-size: contain; } .solution_page .section2 .item span { font-size: 12px; } .solution_detail .section2 .para h3 { font-size: 26px; } .solution_detail .section2 .para p { font-size: 14px; line-height: 24px; } .solution_detail .section1 .item { width: 185px; } .solution_detail .section1 .item p { line-height: 20px; max-height: 80px; } } @media screen and (max-width: 992px) { /*commom*/ .comm_banner { height: 200px; } .comm_banner h2 { font-size: 24px; } .comm_banner img { display: none; } .comm_banner h3 { font-size: 18px; } .comm_banner h4 { font-size: 12px; line-height: 14px; margin-top: 10px; } .comm_banner p { font-size: 16px; } .comm_banner a.btn { width: 120px; line-height: 36px; font-size: 14px; margin-top: 15px; } .comm_crumbs { margin-top: 20px; } .comm_crumbs a { font-size: 14px; } .comm_subnav { margin-top: 0; width: 100%; padding: 0 3%; border-bottom: 1px solid #f7f7f7; } .comm_subnav.item_2, .comm_subnav.item_3 { text-align: center; } .comm_subnav:before, .comm_subnav:after { display: none; } .comm_subnav .line { display: none; } .comm_subnav .item { width: auto !important; } .comm_subnav .item a { display: block; line-height: 40px; padding: 0 10px; font-size: 14px; border-bottom: 1px solid transparent; } .comm_subnav .item.active a { border-color: #2884f6; } .comm_title h3 { font-size: 20px; } .comm_title h4 { font-size: 12px; } /*about_index*/ .about_index .section1 { padding: 20px 0; } .about_index .section1 .img_block { width: 100%; } .about_index .section1 .txt_block { width: 100%; margin-top: 15px; } .about_index .section1 h3 { font-size: 20px; text-align: center; } .about_index .section1 .desc { margin: 15px 0; } .about_index .section1 a { width: 130px; line-height: 40px; margin: 0 auto; } .about_index .section2 { padding: 20px 0; background-attachment: inherit; } .about_index .section2 .comm_title:after { height: 2px; width: 40px; } .about_index .section2 .desc { font-size: 14px; line-height: 24px; } .about_index .section2 .desc .item { display: block; padding: 0 10px; } .about_index .section2 .desc .item .hide { display: block; text-align: center; margin-bottom: 10px; } .about_index .section2 .desc .item .hide span { display: block; font-size: 24px; color: #2884f6; font-family: 'DIN-Bold'; } .about_index .section2 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .about_index .section2 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .about_index .section2 .slick-dots li.slick-active { background-color: #2884f6; } .about_index .section2 .slick-dots button { display: none; } .about_index .section2 .year_box { display: none; } .about_index .section3 .main { padding: 20px 0; } .about_index .section3 .circle { display: none; } .about_index .section3 .center { width: 100%; position: static; margin-top: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .about_index .section3 .center img { display: none; } .about_index .section3 .center .txt { position: static; } .about_index .section3 .item { position: static; width: 100%; padding: 0 !important; margin-top: 15px !important; } .about_index .section3 .item:before, .about_index .section3 .item:after { display: none; } .about_index .section3 .item h3 { padding-left: 30px; } .about_index .section3 .item span { left: 0; } .about_index .section4 .left { width: 100%; padding: 20px; } .about_index .section4 .title { padding-right: 0; } .about_index .section4 .comm_title:after { display: none; } .about_index .section4 .comm_title { text-align: center; padding-right: 0; } .about_index .section4 .item { margin-bottom: 20px; padding-right: 0; text-align: left; padding-left: 70px; } .about_index .section4 .item i { width: 50px; height: 50px; left: 0; top: 5px; right: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .about_index .section4 .item h3 { font-size: 16px; } .about_index .section4 .item p { line-height: 20px; height: 40px; overflow: hidden; } .about_index .section4 .right { position: static; height: 30vh; display: none; } .about_index .section4 .item img { display: block; width: calc(100% + 60px); margin-top: 10px; margin-left: -70px; } .about_index .section5 { display: none; } .about_index .section6 { padding: 20px 0; } .about_index .section6 .slick { margin: 15px 0; padding: 0; } .about_index .section6 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .about_index .section6 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .about_index .section6 .slick-dots li.slick-active { background-color: #2884f6; } .about_index .section6 .slick-dots button { display: none; } .about_index .section6 a.more { width: 130px; line-height: 40px; } /*about_1*/ .about_1 .section1 { padding: 20px 0; } .about_1 .section1 .img_block { width: 80%; display: block; margin: 0 auto; } .about_1 .section1 .txt_block { width: 100%; margin-top: 15px; padding-left: 0; } .about_1 .section1 .txt_block h3 { text-align: center; } .about_1 .section1 .txt_block .en { font-size: 40px; transform-origin: center; } .about_1 .section1 .txt_block .zh { right: 0; font-size: 20px; } .about_1 .section1 .txt_block .slogan { text-align: center; margin: 10px 0; line-height: 24px; } .about_1 .section1 .txt_block .desc { line-height: 24px; } .about_1 .section2 { padding: 30px 0; background-attachment: inherit; } .about_1 .section2 .box { width: 100%; height: auto; border: none; } .about_1 .section2 .box .num { font-size: 12px; white-space: nowrap; } .about_1 .section2 .box .num span { font-size: 28px; } .about_1 .section2 .box i { margin-left: -5px; } .about_1 .section2 .box h3 { font-size: 14px; margin-top: 10px; } .about_1 .section3 { padding: 20px 0; } .about_1 .section3 .items { margin-top: 15px; } .about_1 .section3 .item { width: calc(50% - 5px); margin: 0; } .about_1 .section3 .item:nth-of-type(even) { margin-right: 0; } .about_1 .section3 .item .cell_box { height: 40px; } .about_1 .section3 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .about_1 .section3 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .about_1 .section3 .slick-dots li.slick-active { background-color: #2884f6; } .about_1 .section3 .slick-dots button { display: none; } /*about_2*/ .about_2 .section1 { padding: 20px 0; } .about_2 .section1 li { width: 100%; margin-left: 0; padding: 0; margin-bottom: 20px; } .about_2 .section1 li .year { position: static; font-size: 24px; padding-left: 65px; } .about_2 .section1 li .year:before, .about_2 .section1 li .year:after, .about_2 .section1 li .desc:before, .about_2 .section1 li:before { display: none; } .about_2 .section1 li .desc { padding-left: 0; margin-bottom: 10px; } .about_2 .section1 li .desc p { padding-left: 15px; } .about_2 .section1 li:last-of-type { margin-bottom: 0; } /*about_3*/ .about_3 .section1 { padding: 20px 0; } .about_3 .section1 .items { margin-top: 15px; } .about_3 .section1 .item { width: 31.33%; margin: 1%; padding: 15px 10px; } .about_3 .section1 .item i { height: 30px; } .about_3 .section1 .item span { margin-top: 8px; } .about_3 .section2 .item { height: auto; } .about_3 .section2 .item .img_block { width: 100%; height: 30vh; margin: 0 !important; } .about_3 .section2 .item .txt_block { position: static; padding: 15px 0; } .about_3 .section2 .item .box { width: 100%; margin: 0 !important; padding: 0 !important; } .about_3 .section2 .item h3 { font-size: 18px; line-height: 24px; text-align: center; } .about_3 .section2 .item h3:after { width: 40px; height: 2px; margin: 10px auto 0; } /*about_4*/ .about_4 .section1 { padding-top: 20px; } .about_4 .section1 .items { margin-top: 15px; } .about_4 .section1 .item { width: 50%; } .about_4 .section1 .item i { height: 30px; } .about_4 .section1 .item h3 { font-size: 16px; margin: 10px 0; } .about_4 .section1 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .about_4 .section1 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .about_4 .section1 .slick-dots li.slick-active { background-color: #2884f6; } .about_4 .section1 .slick-dots button { display: none; } .about_4 .section2 { padding: 20px 0; } .about_4 .section2 .box { margin-top: 15px; } .about_4 .section2 .center { width: 100%; } .about_4 .section2 .center p { font-size: 14px; line-height: 24px; } .about_4 .section2 .left, .about_4 .section2 .right { width: 100%; position: static; margin-top: 15px; font-size: 0; } .about_4 .section2 .item { width: 50%; display: inline-block; vertical-align: top; } .about_4 .section2 .item i { width: 50px; height: 50px; background-size: auto 30px; } .about_4 .section2 .item .txt { height: 50px; } .about_4 .section2 .item p { font-size: 12px; line-height: 16px; } .about_4 .section2 .item:nth-of-type(odd) { padding-right: 10px !important; } .about_4 .section2 .left .item { text-align: left; padding-right: 0; padding-left: 60px; margin-bottom: 15px; } .about_4 .section2 .left .item i { left: 0; right: auto; } .about_4 .section2 .right .item { margin-bottom: 15px; padding-left: 60px; } .about_4 .section2 .box:after { display: none; } /*about_5*/ .about_5 .section1 { padding: 20px 0; } .about_5 .section1 .big_slick .item a { width: 40px; height: 40px; } .about_5 .section1 .small_slick .btn { font-size: 0; width: 21px; height: 35px; } .about_5 .section1 .small_slick .prev { left: 20px; } .about_5 .section1 .small_slick .next { right: 20px; } .about_5 .section1 .small_slick .prev:before, .about_5 .section1 .small_slick .next:after { margin: 0 !important; } /*about_6*/ .about_6 .section1 { padding: 20px 0; } .about_6 .section1 .slick { margin: 0; padding: 0; } .about_6 .section1 .item { padding: 3px; } .about_6 .section1 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .about_6 .section1 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .about_6 .section1 .slick-dots li.slick-active { background-color: #2884f6; } .about_6 .section1 .slick-dots button { display: none; } .about_6 .section1 .box h3 { font-size: 14px; } /*about_7*/ .about_7 .section1 { padding: 20px 0; } .about_7 .section1 .item { margin: 15px 0 0; width: 50%; padding: 0 5px; } .about_7 .section1 .item:nth-of-type(1), .about_7 .section1 .item:nth-of-type(2) { margin-top: 0; } .about_7 .section1 .item i { width: 80px; height: 80px; background-size: auto 36px; } .about_7 .section1 .item h3 { font-size: 16px; margin: 8px 0; } .about_7 .section1 .item p { font-size: 13px; line-height: 20px; } .about_7 .section3 { padding: 20px 0; } .about_7 .section3 .form input { width: 100%; margin-left: 0; margin-bottom: 10px; padding: 0 10px; } .about_7 .section3 .form textarea { margin-top: 0; height: 140px; padding: 10px; } .about_7 .section3 .form button { margin-top: 20px; width: 130px; height: 40px; } /*investor_1*/ .investor_1 .section1 { padding-bottom: 20px; } .investor_1 .section1 .search { width: 100%; padding: 20px 0; } .investor_1 .section1 form { height: 50px; padding-right: 50px; } .investor_1 .section1 form button { width: 50px; height: 50px; } .investor_1 .section1 form input { padding: 0 15px; font-size: 16px; } .investor_1 .section1 .item { width: 100%; margin-bottom: 15px; } .investor_1 .section1 .item:nth-of-type(3n-1) { margin-left: 0; margin-right: 0; } .investor_1 .section1 .item a { padding: 15px; } .investor_1 .section1 .item .date { padding-bottom: 10px; margin-bottom: 10px; } .investor_1 .section1 .item .box:after { width: 24px; height: 24px; top: -6px; } .investor_1 .section1 .item h3 { height: auto; } .investor_1 .section1 .items { margin-bottom: 15px; } .investor_1 .section1 .year { margin-bottom: 15px; } .investor_1 .section1 .year a { font-size: 14px; } /*investor_4*/ .investor_4 .section1 { padding: 20px 0; } .investor_4 .section1 .item { width: 100%; padding: 20px; } .investor_4 .section1 .item i { height: 40px; } .investor_4 .section1 .item h3 { margin: 10px 0 6px; } .investor_4 .section1 .item:nth-of-type(2) { margin: 15px 0; } /*news*/ .news_list .section1 { padding: 20px 0; } .news_list .section1 .img_block { width: 100%; } .news_list .section1 .txt_block { width: 100%; position: static; padding: 15px; } .news_list .section1 .txt_block .date { font-size: 12px; } .news_list .section1 .txt_block h3 { font-size: 16px; } .news_list .section1 .txt_block p { margin: 10px 0; } .news_list .section1 .txt_block span { display: none; } .news_list .section2 { padding-bottom: 20px; } .news_list .section2 .items { margin-bottom: 15px; } .news_list .section2 .item, .blockchain-app-s2 .item { width: 100%; margin-bottom: 15px; margin-right: 0 !important; } .news_list .section2 .item:last-of-type, .blockchain-app-s2 .item:last-of-type { margin-bottom: 0; } .news_list .section2 .item .img_block, .blockchain-app-s2 .item .img_block { left: 0; right: auto; } .news_list .section2 .item .txt_block, .blockchain-app-s2 .item .txt_block { margin-left: 34%; padding: 15px; } .news_list .section2 .item h3, .blockchain-app-s2 .item h3 { font-size: 16px; } .news_list .section2 .item p, .blockchain-app-s2 .item p { margin: 10px 0; } .news_list .section2 .item .date, .blockchain-app-s2 .item .date { font-size: 12px; padding-top: 8px; } .news_detail .section1 { padding: 20px 0; } .news_detail .section1 h3 { font-size: 20px; } .news_detail .section1 .info { margin: 15px 0; } .news_detail .section1 .info span { margin: 0 5px; padding-left: 24px; } .news_detail .section1 .desc { font-size: 14px; line-height: 24px; padding: 15px; } .news_detail .section1 .other_page { margin-top: 15px; } .news_detail .section1 .other_page a { display: block; width: 100%; margin-top: 5px; padding: 0 15px; line-height: 40px; } .news_detail .section1 .other_page a:nth-of-type(2) { margin-left: 0; } .news_detail .section1 .other_page span { font-size: 14px; } .research_list .section1 { padding: 20px 0; } .research_list .section1 .items { margin-bottom: 15px; } .research_list .section1 .item { margin-bottom: 15px; } .research_list .section1 .item a { padding: 15px 50px 15px 10px; } .research_list .section1 .item a:after { right: 15px; width: 24px; height: 24px; margin-top: -12px; background-size: contain; } /*solution*/ .mouse { bottom: 20px; } .solution_index .item { width: 100%; } .solution_index .item:nth-of-type(1) .cell_box { padding-top: 40px; } .solution_index .item:nth-of-type(2) .cell_box { padding-bottom: 40px; } .solution_index .item i { height: 50px; } .solution_index .item h3 { font-size: 20px; margin: 15px 0; } .solution_index .item a { opacity: 1; visibility: visible; position: static; line-height: 36px; } .solution_index .item:nth-of-type(3) { background-color: #feb514; } .solution_index .item:nth-of-type(4) { background-color: #2884f6; } .solution_index .copyright { padding: 10px; line-height: 20px; } .solution_category .section1 { height: 50vh; } .solution_category .section1 h3 { font-size: 24px; } .solution_category .section1 p { font-size: 16px; } .solution_category .section1 .btns { position: static; margin-top: 15px; } .solution_category .section2 .bg, .solution_category .section2 .circle, .solution_category .section2 .cont, .solution_category .section2 .dots { display: none; } .solution_category .section2 .m_show { display: block; position: relative; } .solution_category .section2 .m_show .item { height: 50vh; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; position: relative; } .solution_category .section2 .m_show .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .solution_category .section2 .m_show .item .cell_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 30px; z-index: 2; } .solution_category .section2 .m_show .item h3 { font-size: 20px; color: #fff; } .solution_category .section2 .m_show .item p { font-size: 16px; line-height: 24px; margin: 15px 0; color: #fff; } .solution_category .section2 .m_show .item a { display: block; width: 120px; line-height: 36px; font-size: 14px; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 30px; margin: 0 auto; } .solution_category .section2 .m_show .slick-dots { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 0; } .solution_category .section2 .m_show .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .solution_category .section2 .m_show .slick-dots li.slick-active { background-color: #2884f6; } .solution_category .section2 .m_show .slick-dots button { display: none; } .solution_page .comm_banner { height: 46vh; } .solution_page .section1 { padding: 20px 0; } .solution_page .section1 .left { width: 100%; padding-right: 0; text-align: center; } .solution_page .section1 .left .en { transform-origin: center; font-size: 16px; } .solution_page .section1 .left h3 { font-size: 20px; } .solution_page .section1 .left .info { font-size: 16px; line-height: 24px; margin: 10px 0; } .solution_page .section1 .left .desc { font-size: 14px; } .solution_page .section1 .left .logos { margin-top: 15px; } .solution_page .section1 .left .logos .logo { margin-right: 8px; margin-left: 8px; } .solution_page .section1 .right { width: 100%; margin-top: 15px; } .solution_page .section1 .right img { width: 80%; margin: 0 auto; } .solution_page .section2 { padding: 20px 0; } .solution_page .section2 .items { margin-top: 15px; text-align: left; } .solution_page .section2 .items p { font-size: 14px; margin-bottom: 15px; } .solution_page .section2 .item { width: 31.33%; margin: 1%; height: 120px; text-align: center; } .solution_page .section2 .item i { height: 36px; } .solution_page .section2 .item span { padding: 0 10px; font-size: 14px; margin-top: 8px; } .solution_page .section2 .tab_title { margin: 15px 0; } .solution_page .section2 .tab_title span { width: auto; padding: 0 10px; line-height: 36px; margin: 5px; } .solution_detail .section1 .items { margin-top: 15px; } .solution_detail .section1 .item { width: 48%; margin: 1%; } .solution_detail .section1 .item .cell_box { left: 15px; right: 15px; top: 30px; } .solution_detail .section1 .item p { font-size: 12px; padding: 0; max-height: 60px; } .solution_detail .section2 .bg{ position: absolute; top: 0; left: 0; } .solution_detail .section2 .absolute{ position: relative; } .solution_detail .section2{ min-height: 600px; } .solution_detail .section2 .para { padding: 20px 0; } .solution_detail .section2 .para .img_block { width: 100%; text-align: center; } .solution_detail .section2 .para .img_block img{ display: inline-block; } .solution_detail .section2 .para .txt_block { width: 100%; padding-left: 0; margin-top: 15px; } .solution_detail .section2 .para h3 { font-size: 18px; text-align: center; } .solution_detail .section2 .slick { padding: 20px 15px 15px; } .solution_detail .section2 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .solution_detail .section2 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .solution_detail .section2 .slick-dots li.slick-active { background-color: #2884f6; } .solution_detail .section2 .slick-dots button { display: none; } /*recruit*/ .recruit_index { top: 50px; } .recruit_index .copyright { padding: 10px; line-height: 20px; padding: 15px; } .recruit_index .items { bottom: 50%; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .recruit_index .item { width: 100%; } .recruit_index .item:nth-of-type(2) { margin: 15px 0; } .recruit_index .item h3 { font-size: 20px; } .recruit_1 .section1 .form { padding: 20px 0; } .recruit_1 .section1 .form .box { width: 48%; margin-left: 4%; } .recruit_1 .section1 .form .box:last-of-type { width: 100%; margin-left: 0; margin-top: 4%; } .recruit_1 .section1 .form .box input { height: 40px; font-size: 16px; padding: 0 10px; } .recruit_1 .section1 .form .box button.sear1 { width: 20px; height: 20px; } .recruit_1 .section1 .form .box:after { border-left-width: 5px; border-right-width: 5px; border-top-width: 7px; margin-top: -3px; right: 10px; } .recruit_1 .section1 .form .box ul li { line-height: 40px; padding: 0 10px; } .recruit_1 .section1 .items { margin-bottom: 15px; } .recruit_1 .section1 .item .show { padding: 0 15px; } .recruit_1 .section1 .item .top_box { padding: 15px 0; } .recruit_1 .section1 .item .top_box .post { font-size: 16px; } .recruit_1 .section1 .item .top_box .post:before { width: 20px; height: 20px; } .recruit_1 .section1 .item .top_box .date { position: static; display: block; margin-top: 8px; } .recruit_1 .section1 .item .bot_box { display: none; } .recruit_1 .section1 .item .hide { margin-top: 0 !important; padding: 15px; } .recruit_1 .section1 .item .hide .post, .recruit_1 .section1 .item .hide .salary { display: none; } .recruit_1 .section1 .item .hide .box { margin-top: 20px; } .recruit_1 .section1 .item .hide .box h4 { font-size: 16px; } .recruit_1 .section1 .item .hide .box .desc { font-size: 14px; line-height: 24px; } .recruit_1 .section1 .item .hide .tip { padding: 15px; } .recruit_1 .section1 .item .hide .tip span { width: 100%; } .recruit_1 .section1 .item .hide a { width: 120px; line-height: 36px; font-size: 14px; margin-top: 15px; } .recruit_2 .rolling .tip { line-height: 50px; font-size: 16px; } .recruit_2 .rolling ul { height: 50px; padding-left: 10px; } .recruit_2 .rolling ul li { line-height: 50px; font-size: 14px; } .recruit_2 .section1 { padding: 20px 0; } .recruit_2 .section1 .lead { width: 100%; float: none; } .recruit_2 .section1 .lead span { font-size: 20px; line-height: 40px; } .recruit_2 .section1 .para { margin-left: 0; padding-left: 0; margin-top: 15px; font-size: 14px; line-height: 26px; } .recruit_2 .section2 { padding: 20px 0; } .recruit_2 .section2 .tip { position: static; padding: 15px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .recruit_2 .section2 .tip:before { width: 40px; height: 40px; background-size: contain; } .recruit_2 .section2 .tip h3 { font-size: 16px; line-height: 28px; margin-top: 15px; } .recruit_2 .section2 .para { width: 100%; margin-top: 15px; padding-top: 0; } .recruit_2 .section2 .para p { margin-top: 15px; font-size: 14px; line-height: 24px; } .recruit_2 .section2 .para a.rec_view { margin-top: 15px; } a.rec_view { width: 120px; line-height: 36px; font-size: 14px; } .recruit_2 .section3 { padding: 20px 5%; } .recruit_2 .section3 .item { padding: 0; } .recruit_2 .section3 .item:nth-of-type(2) { margin-top: 15px; } .recruit_2 .section3 .item .img_block { width: 100%; margin-left: 0 !important; } .recruit_2 .section3 .item .txt_block { position: static; width: 100%; margin-top: 15px; padding: 0; } .recruit_2 .section3 .item .txt_block span { display: none; } .recruit_2 .section3 .item .txt_block h3 { text-align: center; font-size: 16px; } .recruit_2 .section3 .item .txt_block a.rec_view { margin: 15px auto 0; } .comm_sec1 { padding: 20px 0; } .comm_sec1 .item { margin: 0; } .comm_sec1 .item .txt_block { margin: -50px 20px 0; } .comm_sec1 .item .txt_block { padding: 15px; text-align: center; } .comm_sec1 .item h3 { font-size: 16px; } .comm_sec1 .item h4 { font-size: 12px; } .comm_sec1 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .comm_sec1 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .comm_sec1 .slick-dots li.slick-active { background-color: #2884f6; } .comm_sec1 .slick-dots button { display: none; } .recruit_2 .section4 { padding: 20px 0; } .recruit_2 .section4 .bg { bottom: 0; } .recruit_2 .section4 .box { padding: 15px; } .recruit_2 .section4 .para { font-size: 14px; } .recruit_2 .section4 a { width: 180px; margin-top: 20px; } .recruit_2 .section4 .icon { height: 80px; background-size: auto 40px; } .recruit_2 .section4 span { font-size: 14px; margin: 15px 0 10px; } .recruit_2 .section4 h3 { font-size: 18px; } .recruit_3 .section1 { padding: 20px 0; } .recruit_3 .section1 .items { margin-top: 15px; } .recruit_3 .section1 .item { width: 100%; margin-right: 0; margin-bottom: 10px; padding: 20px 0; } .recruit_3 .section1 .item:last-of-type { margin-bottom: 0; } .recruit_3 .section1 .item .show i { height: 40px; } .recruit_3 .section1 .item .show h3 { font-size: 16px; } .recruit_3 .section1 .item .hide { position: static; background: none; opacity: 1; visibility: visible; } .recruit_3 .section1 .item .hide .bg { display: none; } .recruit_3 .section1 .item .hide h3 { font-size: 16px; display: none; } .recruit_3 .section1 .item .hide p { margin-top: 10px; font-size: 12px; line-height: 20px; color: #333; } .recruit_3 .section2 .item { width: 100%; padding: 30px 5%; } .recruit_3 .section2 .item .tar { text-align: center; } .recruit_3 .section2 .item .para { margin: 20px 0; font-size: 14px; line-height: 24px; height: auto !important; } .recruit_3 .section2 .item .para:before { display: none; } a.rec_view1 { width: 130px; line-height: 40px; margin: 0 auto; } .recruit_3 .section3 { padding: 20px 0; } .recruit_3 .section3 .main { width: 100%; height: auto; background: none; } .recruit_3 .section3 .center { position: static; background: none; } .recruit_3 .section3 .center h3 { font-size: 20px; } .recruit_3 .section3 .dots { width: 80%; margin: 0 auto; } .recruit_3 .section3 .dot { position: static; overflow: hidden; margin: 15px 0 0 !important; } .recruit_3 .section3 .dot p { position: static; padding: 0 !important; margin-left: 20px; font-size: 14px; white-space: normal; } .recruit_3 .section3 .dot i { float: left; width: 12px; height: 12px; margin-top: 6px; } .recruit_3 .section3 .dot i:before, .recruit_3 .section3 .dot i:after { display: none; } .recruit_3 .section4 { padding: 20px 0; } .recruit_3 .section4 .para { font-size: 14px; line-height: 24px; } /*index*/ .index_main .section1 .item { height: 50vh; } .index_main .section1 .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); } .index_main .section1 .slick-dots { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 0; } .index_main .section1 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .index_main .section1 .slick-dots li.slick-active { background-color: #2884f6; } .index_main .section1 .slick-dots button { display: none; } .index_main .section1 h3 { font-size: 24px; } .index_main .section1 h4 { font-size: 14px; } .index_main .section1 .mouse { margin-bottom: 30px; } .index_main .section2 { padding: 20px 0; background: none; } .index_main .section2 .circle { display: none; } .index_main .section2 .m_show { display: block; margin-top: 15px; } .index_main .section2 .m_show .item { padding: 20px 0; text-align: center; } .index_main .section2 .m_show .item h3 { font-size: 18px; } .index_main .section2 .m_show .item .tubs { font-size: 0; margin: 15px 0; } .index_main .section2 .m_show .item .tub { width: 33.33%; display: inline-block; vertical-align: top; } .index_main .section2 .m_show .item .tub i { display: block; width: 40px; height: 60px; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; background-position: center bottom; } .index_main .section2 .m_show .item .tub span { font-size: 14px; display: block; margin-top: 10px; } .index_main .section2 .m_show .item .p_block { font-size: 14px; line-height: 24px; } .index_main .section2 .m_show .item .p_block p { display: inline-block; vertical-align: top; margin: 0 5px; } .index_main .section2 .m_show .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .index_main .section2 .m_show .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .index_main .section2 .m_show .slick-dots li.slick-active { background-color: #2884f6; } .index_main .section2 .m_show .slick-dots button { display: none; } .index_main .section3 { margin-top: 0; } .index_main .section3 .btn { display: none; } .index_main .section3 .main { height: auto; } .index_main .section3 .items { width: 100%; position: static; } .index_main .section3 .item { width: 100%; display: block; } .index_main .section3 .item .single { width: 100%; height: 40vh; } .index_main .section3 .item .single .bg { background-size: cover; } .index_main .section3 .item .single, .index_main .section3 .item .sub { float: none !important; } .index_main .section3 .item .single .txt_block { width: 100%; padding: 20px 5%; opacity: 1; } .index_main .section3 .item .single h3 { font-size: 18px; margin-bottom: 15px; } .index_main .section3 .item .single .info { margin-top: 20px; } .index_main .section3 .item .single .icons { margin: 10px 0; } .index_main .section3 .item .sub { width: 100%; height: 160px; } .index_main .section3 .item .sub .box h3 { font-size: 16px; } .index_main .section4 { padding: 20px 0; } .index_main .section4 .slick { margin: 15px 0 0; padding: 0; } .index_main .section4 .item { padding: 0; } .index_main .section4 .item .date { opacity: 1; } .index_main .section4 .item .box { border: none; } .index_main .section4 .item .txt_block { padding: 0; } .index_main .section4 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .index_main .section4 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .index_main .section4 .slick-dots li.slick-active { background-color: #2884f6; } .index_main .section4 .slick-dots button { display: none; } .index_main a.more_btn { width: 120px; line-height: 36px; margin-top: 15px; } .index_main .section5 { padding: 20px 0; } .index_main .section5 .tab_title { margin: 15px 0; } .index_main .section5 .tab_title a { width: 120px; line-height: 36px; } .index_main .section5 .item { width: 31.33%; margin: 1%; padding-top: 0; height: 60px; } .index_main .section5 .s_tab_t { margin-bottom: 15px; } .index_main .section5 .s_tab_t span { margin: 0 10px; padding-top: 40px; background-size: auto 36px; font-size: 14px; } .index_main .section6 { padding: 20px 0; } .index_main .section6 .desc { font-size: 14px; line-height: 24px; margin-top: 10px; } .index_main .section6 .data { margin-top: 15px; } .index_main .section6 .data .item { width: 25%; } .index_main .section6 .data .item .num, .index_main .section6 .data .item p { font-size: 12px; } .index_main .section6 .data .item span { font-size: 24px; } .index_main .section6 .data .item i { font-size: 18px; } .index_main .section6 a.more_btn { margin-top: 15px; } /*empowerment*/ .empowerment_main .section1 { padding: 20px 0; } .empowerment_main .section1 .position { width: 100%; padding: 30px 0 20px; } .empowerment_main .section1 .info { margin-top: 15px; } .empowerment_main .section1 .info img { margin: 15px auto; } .empowerment_main .section1 .info .desc { font-size: 14px; line-height: 24px; } .empowerment_main .section2 { padding: 20px 0; } .empowerment_main .section2 .circle { border: none; width: 100%; height: auto; } .empowerment_main .section2 .center { width: 80vw; height: 80vw; position: static; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .empowerment_main .section2 .center img.show { display: none; } .empowerment_main .section2 .center img.hide { display: block; } .empowerment_main .section2 .center .txts, .empowerment_main .section2 .dots, .empowerment_main .section2 .conts .item:nth-of-type(1) .tip:after, .empowerment_main .section2 .conts .item:nth-of-type(1) .tit:after, .empowerment_main .section2 .conts .item:nth-of-type(2) .tip:before, .empowerment_main .section2 .conts .item:nth-of-type(2) .tit:before, .empowerment_main .section2 .conts .item:nth-of-type(3) .tip:before, .empowerment_main .section2 .conts .item:nth-of-type(3) .tit:before { display: none; } .empowerment_main .section2 .conts { margin-top: 15px; } .empowerment_main .section2 .conts .item { position: static; opacity: 1; visibility: visible; margin-top: 0 !important; padding-top: 0 !important; } .empowerment_main .section2 .conts .item .tip, .empowerment_main .section2 .conts .item:nth-of-type(1) .box, .empowerment_main .section2 .conts .item .tit, .empowerment_main .section2 .conts .item .point { opacity: 1; } .empowerment_main .section2 .conts .item:nth-of-type(1), .empowerment_main .section2 .conts .item:nth-of-type(2), .empowerment_main .section2 .conts .item:nth-of-type(3) { width: 100%; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tip { padding-right: 0; } .empowerment_main .section2 .conts .item:nth-of-type(1) .tit { padding-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(1) .point { padding-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tip { margin-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(2) .tit { margin-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(2) .point { padding-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tip { margin-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(3) .tit { margin-left: 0; } .empowerment_main .section2 .conts .item:nth-of-type(3) .point { padding-left: 0; } .empowerment_main .section2 .conts .item .tip { text-align: center !important; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box { margin-top: 15px; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box { text-align: center; } .empowerment_main .section2 .conts .item:nth-of-type(1) .box img { margin: 10px auto 0; } .empowerment_main .section2 .conts .item .tit { text-align: center; } .empowerment_main .section2 .conts .item .point { text-align: center; width: 100% !important; } .empowerment_main .section2 .conts .item .point .po { display: inline-block; vertical-align: top; margin: 3px !important; width: auto !important; } .empowerment_main .section2 .slick-dots { margin-top: 10px; text-align: center; font-size: 0; } .empowerment_main .section2 .slick-dots li { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; margin: 0 2px; } .empowerment_main .section2 .slick-dots li.slick-active { background-color: #2884f6; } .empowerment_main .section2 .slick-dots button { display: none; } /*search*/ .search_index .section1 { padding: 20px 0; } .search_index .section1 .left { width: 100%; padding: 0 15px 15px; } .search_index .section1 .right { width: 100%; margin: 15px 0 0; } .search_index .section1 .left .item { line-height: 50px; } .search_index .section1 .left .item a { font-size: 15px; } .search_index .section1 .left .item span { font-size: 12px; } .search_index .section1 .right a { line-height: 50px; } .index_main .section3 .new-items { margin-top: 20px; display: block; } .index_main .section3 .new-item .txt-box { padding: 0 20px; } .index_main .section3 .new-item { height: auto; width:100%; } }