@font-face { font-family: 'DINPro-Light'; src: url("../fonts/DINPro-Light.otf"); } @font-face { font-family: 'DINPro-Regular'; src: url("../fonts/DINPro-Regular_0.otf"); } @font-face { font-family: 'DINPro-Medium'; src: url("../fonts/DINPro-Medium.otf"); } @font-face { font-family: 'DINPro-Bold'; src: url("../fonts/DINPro-Bold.otf"); } @font-face { font-family: 'DINEngschrift'; src: url("../fonts/DINEngschrift.otf"); } .wrapper { width: 80vw; max-width: 1360px; margin: 0 auto; position: relative; } .wrapper:after { content: ''; display: block; clear: both; } .dom-loaded .header .nav li { -webkit-transition: padding 0.3s ease; -moz-transition: padding 0.3s ease; -ms-transition: padding 0.3s ease; transition: padding 0.3s ease; } .dom-loaded .header .nav li .drop { -webkit-transition: transform 0.1s ease, opacity 0.1s ease, visibility 0.1s; -moz-transition: transform 0.1s ease, opacity 0.1s ease, visibility 0.1s; -ms-transition: transform 0.1s ease, opacity 0.1s ease, visibility 0.1s; transition: transform 0.1s ease, opacity 0.1s ease, visibility 0.1s; } .dom-loaded .header .search-box { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } /* header */ .header { position: fixed; top: 0; left: 0; right: 0; background-color: #fff; z-index: 9; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .header .logo { position: absolute; left: 5.2vw; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .header .logo img { display: block; height: 60px; } .header .nav { text-align: right; font-size: 0; padding-right: calc(7vw + 120px); } .header .nav li { display: inline-block; vertical-align: top; margin-right: 2vw; } .header .nav li a.single { display: block; font-size: 16px; line-height: 90px; color: #515151; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header .nav li a.active { color: #004ea2; } @media screen and (min-width: 992px) { .header .nav li .drop { position: absolute; top: 100%; left: 0; right: 0; display: flex; border-top: 1px solid #f7f7f7; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.01); opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } .header .nav li .drop .left, .header .nav li .drop .right { display: inline-block; vertical-align: top; width: 50%; } .header .nav li .drop .left { background-color: #fff; text-align: right; padding: 4.5vw 0; } .header .nav li .drop .left .box { display: inline-block; text-align: left; width: 28vw; max-width: 520px; } .header .nav li .drop .left a { position: relative; display: block; font-size: 16px; line-height: 54px; color: #333; text-indent: 3vw; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header .nav li .drop .left a:after { content: ''; width: 10px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-2.png"); position: absolute; right: 3vw; top: 50%; margin-top: -8px; opacity: 0; -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .header .nav li .drop .left a:hover { background-color: #f7f7f7; } .header .nav li .drop .left a:hover:after { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .header .nav li .drop .right { background-color: #f7f7f7; padding: 4.5vw 6vw; text-align: left; } .header .nav li .drop .right img { width: 20vw; max-width: 382px; display: block; } .header .nav li .drop .right h3 { font-size: 24px; color: #333; line-height: 1; margin-top: 20px; } .header .nav li .drop .right p { margin-top: 10px; font-size: 14px; line-height: 24px; } } @media screen and (min-width: 992px) { .header .nav li:hover a.single { color: #004ea2; } .header .nav li:hover .drop { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s, visibility 0.5s 0.2s; -moz-transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s, visibility 0.5s 0.2s; -ms-transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s, visibility 0.5s 0.2s; transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s, visibility 0.5s 0.2s; } } .header .nav li.active a.single { color: #004ea2; } .header .ope { position: absolute; right: 5.2vw; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .header .ope .lang, .header .ope .search { display: inline-block; vertical-align: top; } .header .ope .lang a, .header .ope .lang i { display: inline-block; vertical-align: top; color: #666; line-height: 20px; } .header .ope .lang i { font-style: normal; font-size: 12px; } .header .ope .lang a { font-size: 16px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (min-width: 992px) { .header .ope .lang a:hover { color: #004ea2; } } .header .ope .search { margin-left: 2vw; } .header .ope .search a.icon { display: block; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; 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; } @media screen and (min-width: 992px) { .header .ope .search a.icon:hover { background-image: url("../images/icon-1-on.png"); } } .header .search-box { position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: 5; background-color: rgba(0, 78, 162, 0.95); opacity: 0; visibility: hidden; } .header .search-box.active { opacity: 1; visibility: visible; } .header .search-box .close { position: absolute; top: 30px; right: 6vw; width: 70px; height: 70px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/close-1.png"); cursor: pointer; } .header .search-box form { position: absolute; top: 50%; left: 6vw; right: 6vw; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-left: 70px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .header .search-box form:before { content: ''; width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-3.png"); position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: .2; } .header .search-box input { display: block; width: 100%; height: 6vw; background-color: transparent; font-size: 36px; color: #fff; } .header .search-box .tip { position: absolute; left: 6vw; right: 6vw; font-size: 16px; color: #fff; top: 50%; -webkit-transform: translateY(5.5vw); -moz-transform: translateY(5.5vw); -ms-transform: translateY(5.5vw); transform: translateY(5.5vw); } .header.down .nav li a.single { line-height: 70px; } /* footer */ .footer { padding: 0 7.8vw; background-color: #f7f7f7; } .footer .top-box { padding: 4.5vw 0; font-size: 0; } .footer .top-box .block { position: relative; } .footer .top-box .block:after { content: ''; clear: both; display: block; } .footer .bot-box { border-top: 1px solid #dcdcdc; padding: 30px 0; position: relative; } .footer .left { float: left; } .footer .left .logo img { display: block; height: 60px; } .footer .left .info { margin-top: 20px; padding-left: 76px; font-size: 16px; line-height: 30px; color: #666666; } .footer .center { position: absolute; right: 230px; top: 0; } .footer .center .box { width: 12.5vw; display: inline-block; vertical-align: top; } .footer .center .box h3 a { font-size: 18px; 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; } .footer .center .box h3 a:hover { color: #004ea2; } .footer .center .box .a-block { margin-top: 20px; } .footer .center .box .a-block a { display: block; font-size: 16px; line-height: 30px; color: #666; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .footer .center .box .a-block a:hover { color: #004ea2; } .footer .right { float: right; } .footer .right h3 { font-size: 18px; color: #000; } .footer .right .ewm { margin-top: 24px; font-size: 0; } .footer .right .ewm .item { display: inline-block; vertical-align: top; text-align: center; } .footer .right .ewm .item:nth-of-type(2) { margin-left: 30px; } .footer .right .ewm .item img { display: block; width: 100px; } .footer .right .ewm .item p { font-size: 14px; color: #414141; margin-top: 5px; } .footer .share { margin-top: 4.5vw; font-size: 0; } .footer .share a { display: inline-block; vertical-align: top; width: 36px; height: 36px; float: none; padding: 0; border-radius: 50%; border: 1px solid #dedede; background-position: center; background-repeat: no-repeat; margin: 0 10px 0 0; } .footer .share a:last-of-type { margin-right: 0; } .footer .share a[data-cmd="weixin"] { background-image: url("../images/share-1.png"); } .footer .share a[data-cmd="tsina"] { background-image: url("../images/share-2.png"); } .footer .share a[data-cmd="sqq"] { background-image: url("../images/share-3.png"); } .footer .share a[data-cmd="ibaidu"] { background-image: url("../images/share-4.png"); } .footer .share a[data-cmd="linkedin"] { background-image: url("../images/share-5.png"); } .footer .copyright, .footer .link a { font-size: 16px; line-height: 24px; color: #666; } .footer .link { position: absolute; right: 0; top: 50%; margin-top: -12px; font-size: 0; } @media screen and (min-width: 992px) { .footer .link a { margin-left: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .footer .link a:nth-of-type(1) { margin-left: 0; } .footer .link a:hover { color: #004ea2; } } @media screen and (max-width: 1600px) { .header .logo img, .footer .left .logo img { height: 44px; } .header .nav li { margin-right: 1.5vw; } .header .ope .search { margin-left: 1.5vw; } .header .nav li .drop .right h3 { font-size: 20px; } .header .nav li .drop .left a { line-height: 46px; } .header .search-box input { font-size: 28px; } .footer .center .box { width: auto; margin-right: 3vw; min-width: 120px; } .footer .left .info { padding-left: 62px; } } @media screen and (max-width: 1366px) { .header .logo { left: 3vw; } .header .ope { right: 3vw; } .header .nav { padding-right: calc(150px + 3vw); } .footer { padding: 0 5vw; } .footer .right h3, .footer .center .box h3 a { font-size: 16px; } .footer .center .box .a-block a, .footer .left .info { font-size: 14px; line-height: 24px; } .footer .center .box { min-width: 80px; } .footer .copyright, .footer .link a { font-size: 14px; } .header .search-box input { font-size: 20px; } } @media screen and (max-width: 1200px) { .header .logo img, .footer .left .logo img { height: 36px; } .header .nav li { margin-right: 10px; } .header .nav li a.single { font-size: 14px; } .header .nav li a.active { color: #004ea2; } .header .nav li .drop .left a { font-size: 14px; line-height: 40px; } .header .ope .lang a { font-size: 14px; } .footer .left .info { padding-left: 50px; } .footer .center .box { min-width: auto; margin-right: 2vw; } } @media screen and (max-width: 992px) { .mNavBtn { display: block; width: 24px; height: 16px; right: 10px; top: 22px; position: absolute; cursor: pointer; z-index: 2; } .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: #004ea2; -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; } .header { height: 60px; } .header .logo img { height: 26px; } .header .ope .lang a{ font-size: 12px; } .header .logo { left: 10px; } .header .ope { right: 45px; } .header .ope .search { margin-left: 10px; } .header .nav { position: fixed; width: 100vw; top: 60px; left: 100%; right: 0; bottom: 0; background-color: #fff; padding: 20px 20px 0; border-top: 1px solid #e6e6e6; text-align: left; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .header .nav.active { left: 0; } .header .nav li { padding: 0; margin: 0; display: block; border-bottom: 1px solid #e6e6e6; } .header .nav li a.single { line-height: 40px; } .header .nav li .drop { padding-bottom: 10px; margin-top: -8px; } .header .nav li .drop .left { font-size: 0; } .header .nav li .drop .left a { display: inline-block; vertical-align: top; margin: 5px 10px 0 0; font-size: 12px; color: #333; line-height: 16px; } .header .nav li .drop .right { display: none; } .header .search-box .close { width: 40px; height: 40px; background-size: auto 20px; right: 30px; } .header .search-box form { padding-left: 40px; left: 30px; right: 30px; } .header .search-box form:before { width: 24px; height: 24px; } .header .search-box input { height: 60px; font-size: 16px; } .header .search-box .tip { font-size: 14px; left: 30px; right: 30px; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } .footer { padding: 0 20px; } .footer .top-box { padding: 30px 0; text-align: center; } .footer .left { float: none; display: inline-block; } .footer .left .info { text-align: left; margin-top: 10px; } .footer .right, .footer .center { display: none; } .footer .bot-box { padding: 15px 0; } .footer .link { position: static; text-align: center; margin-top: 0; } .footer .link a { margin: 0 10px; } .footer .copyright { text-align: center; margin-top: 5px; } } /* common */ .inner-tit { font-size: 36px; line-height: 1; } .inner-tit.white { color: #fff; } .inner-tit.black { color: #000; } .inner-tit.center { text-align: center; } .inner-tit.bold { font-weight: bold; } .inner-btn { display: block; width: 180px; font-size: 16px; color: #fff; line-height: 50px; background-color: #004ea2; 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; } .inner-btn:after { content: ''; width: 12px; height: 12px; display: inline-block; vertical-align: middle; margin: -3px 0 0 10px; background-position: center; background-repeat: no-repeat; background-image: url("../images/a-btn.png"); } @media screen and (min-width: 992px) { .inner-btn:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 78, 162, 0.3); } } .index-tit h3 { font-size: 30px; line-height: 1; } .index-tit p { font-size: 16px; line-height: 24px; margin-top: 10px; } .index-tit.white h3, .index-tit.white p { color: #fff; } .index-tit.gray h3 { color: #000; } .index-tit.gray p { color: #a8a8a8; } .inner-page { padding-top: 90px; } .inner-banner { position: relative; } .inner-banner .img-block { overflow: hidden; } .inner-banner .txt-block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; } .inner-banner img { display: block; width: 100%; } .inner-banner h3 { font-size: 60px; line-height: 1.2; color: #fff; font-weight: normal; } .inner-banner p { font-size: 28px; line-height: 1.2; color: #fff; margin-top: 20px; } .comm-subnav { display: flex; } .comm-subnav .crumbs { width: 25%; background-color: #004ea2; padding-left: 5vw; position: relative; } .comm-subnav .crumbs:after { content: ''; width: 10px; height: 6px; background-position: center; background-repeat: no-repeat; background-size: contain; /*background-image: url("../images/drop.png");*/ position: absolute; right: 1.5vw; top: 50%; margin-top: -3px; } .comm-subnav .crumbs a, .comm-subnav .crumbs span { display: inline-block; vertical-align: middle; line-height: 80px; } .comm-subnav .crumbs a { font-size: 16px; color: #fff; } .comm-subnav .crumbs span { font-size: 24px; color: #fff; padding-left: 24px; background-position: left center; background-repeat: no-repeat; background-image: url("../images/crumbs.png"); margin-left: 16px; } .comm-subnav .nav { font-size: 0; width: 75%; background-color: #f8f8f8; } .comm-subnav .nav a { display: inline-block; vertical-align: top; margin-left: 5vw; font-size: 16px; line-height: 76px; color: #666666; border-bottom: 4px solid transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .comm-subnav .nav a:nth-of-type(1) { margin-left: 6vw; } .comm-subnav .nav a:hover, .comm-subnav .nav a.active { color: #004ea2; border-color: #004ea2; } .comm-subnav.fixed { position: sticky; left: 0; right: 0; top: 70px; z-index: 5; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .comm-subnav.fixed .crumbs a, .comm-subnav.fixed .crumbs span { line-height: 60px; } .comm-subnav.fixed .nav a { line-height: 56px; } .comm-pages { font-size: 0; text-align: center; } .comm-pages ul li { display: inline-block; vertical-align: top; margin: 0 2px; } .comm-pages ul li a { display: block; width: 50px; height: 50px; font-size: 16px; color: #666; line-height: 50px; 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; } .comm-pages ul li input { width: 50px; height: 50px; text-align: center; font-size: 16px; color: #808080; background-color: #f5f5f5; border: none; -moz-appearance: textfield; } .comm-pages ul li input::-webkit-outer-spin-button, .comm-pages ul li input::-webkit-inner-spin-button { -webkit-appearance: none; } .comm-pages ul li button { font-size: 16px; color: #808080; background-color: transparent; margin-left: 15px; cursor: pointer; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .comm-pages ul li button:hover { color: #004ea2; } .comm-pages ul li.next a { background-position: center; background-repeat: no-repeat; background-image: url("../images/page.png"); } .comm-pages ul li.prev a { background-position: center; background-repeat: no-repeat; background-image: url("../images/prev-page.png"); } .comm-pages ul .disabled:hover a{ background-color: rgba(0, 0, 0, 0) !important; } .comm-pages ul li:hover a, .comm-pages ul li.active a { border-color: #004ea2; background-color: #004ea2; color: #fff; } .video-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 11; display: none; } .video-pop .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 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-1.png") center no-repeat; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; z-index: 2; } .video-pop .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .video-pop video { position: absolute; top: 50%; left: 50%; z-index: 2; max-height: 70vh; max-width: 70vw; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .comm-section1 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin-left: 10px; margin-right: 10px; text-align: center; cursor: pointer; } .comm-section1 .item .img-block { height: 15.625vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-9.jpg"); } .comm-section1 .item .img-block img { width: auto; max-width: 70%; max-height: 80%; border: 5px 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; } .comm-section1 .item h3 { font-size: 18px; line-height: 1.2; color: #515151; margin-top: 2vw; } @media screen and (min-width: 992px) { .comm-section1 .item:hover .img-block img { border-color: #004ea2; } } .comm-section1-slick { margin: 3.5vw -10px 0; } .comm-section1-slick .slick-arrow { width: 56px; height: 56px; position: absolute; top: 40%; margin-top: -28px; border: 1px solid #eeeeee; border-radius: 50%; background-color: transparent; font-size: 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; cursor: pointer; z-index: 2; } .comm-section1-slick .slick-arrow:hover { background-color: #004ea2; border-color: #004ea2; } .comm-section1-slick .slick-prev { left: -5vw; background-image: url("../images/prev-3.png"); } .comm-section1-slick .slick-prev:hover { background-image: url("../images/prev-4.png"); } .comm-section1-slick .slick-next { right: -5vw; background-image: url("../images/next-3.png"); } .comm-section1-slick .slick-next:hover { background-image: url("../images/next-4.png"); } .comm-section1-slick .slick-dots { margin-top: 2.5vw; font-size: 0; text-align: center; } .comm-section1-slick .slick-dots li { display: inline-block; vertical-align: top; width: 14px; height: 14px; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 50%; margin: 0 8px; -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; } .comm-section1-slick .slick-dots li.slick-active { background-color: #004ea2; border-color: #004ea2; } .comm-section1-slick .slick-dots button { display: none; } .comm-crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comm-crumbs a { font-size: 14px; color: #969696; line-height: 24px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .comm-crumbs a:after { content: ''; width: 4px; height: 8px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/crumbs-1.png"); display: inline-block; vertical-align: middle; margin: -3px 15px 0; } .comm-crumbs a:last-of-type:after { display: none; } @media screen and (min-width: 992px) { .comm-crumbs a:hover { color: #004ea2; } } @media screen and (min-width: 992px) { .comm-crumbs.white a { color: #fff; } .comm-crumbs.white a:after { background-image: url("../images/crumbs-2.png"); } } .comm-share { position: absolute; top: 0; left: -5vw; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .comm-share.visi { opacity: 0; } .comm-share a { display: block; width: 40px; height: 40px !important; padding: 0 !important; margin: 10px 0 0 !important; float: none !important; background-position: center !important; background-repeat: no-repeat !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .comm-share a:first-of-type { border-radius: 50%; background-color: #004ea2; background-image: url("../images/news/share-1.png"); } .comm-share a.wx { background-image: url("../images/news/share-2.png"); } .comm-share a.wx:hover { background-image: url("../images/news/share-2-on.png"); } .comm-share a.sina { background-image: url("../images/news/share-3.png"); } .comm-share a.sina:hover { background-image: url("../images/news/share-3-on.png"); } .comm-share a.qq { background-image: url("../images/news/share-4.png"); } .comm-share a.qq:hover { background-image: url("../images/news/share-4-on.png"); } .comm-right-box { display: inline-block; vertical-align: top; width: 32%; padding-left: 3vw; } .comm-right-box h3 { font-size: 20px; line-height: 54px; color: #fff; background-color: #004ea2; padding: 0 20px; } .comm-right-box .list { padding: 2vw 20px; } .comm-right-box .list a { display: block; font-size: 16px; line-height: 24px; margin-top: 15px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .comm-right-box .list a:nth-of-type(1) { margin-top: 0; } @media screen and (min-width: 992px) { .comm-right-box .list a:hover { color: #004ea2; } } .comm-right-box a.more { display: block; font-size: 16px; padding: 0 20px; line-height: 50px; background-color: #004ea2; color: #fff; position: relative; } .comm-right-box a.more:after { content: ''; width: 8px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; right: 20px; top: 50%; margin-top: -6px; background-image: url("../images/page-on.png"); } .comm-section2 { padding: 6vw 0; } .comm-section2 .para { text-align: center; font-size: 16px; line-height: 2; color: #999999; margin-top: 20px; } .comm-section2 .para.left { text-align: justify; } .comm-section2 .video-box { position: relative; max-width: 960px; width: 72%; margin: 3.5vw auto 0; overflow: hidden; } .comm-section2 .video-box img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .comm-section2 .video-box a { width: 80px; height: 80px; 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%); background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/video.png"); -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) { .comm-section2 .video-box a:hover { background-image: url("../images/video-on.png"); } } @media screen and (min-width: 992px) { .comm-section2 .video-box:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } } .comm-section3 { padding: 6vw 0; background-color: #004ea2; } .comm-section3 .slick { font-size: 0; margin: 3vw -10px 0; } .comm-section3 .item { width: calc(33.33% - 20px); margin: 0 10px; } .comm-section3 .item .img-box { overflow: hidden; } .comm-section3 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .comm-section3 .item h3 { text-align: center; font-size: 18px; line-height: 1.2; color: #fff; margin-top: 2vw; } @media screen and (min-width: 992px) { .comm-section3 .item:hover img { /*-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);*/ } } .comm-section3 .slick-arrow { width: 18px; height: 32px; position: absolute; top: 40%; margin-top: -16px; border-radius: 50%; background-color: transparent; font-size: 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; cursor: pointer; z-index: 2; } .comm-section3 .slick-prev { left: -40px; background-image: url("../images/prev-5.png"); } .comm-section3 .slick-next { right: -40px; background-image: url("../images/next-5.png"); } .comm-section3 .slick-dots { margin-top: 2.5vw; font-size: 0; text-align: center; } .comm-section3 .slick-dots li { display: inline-block; vertical-align: top; width: 14px; height: 14px; background-color: #004ea2; border: 1px solid #d3d3d3; border-radius: 50%; margin: 0 8px; -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; } .comm-section3 .slick-dots li.slick-active { background-color: #fff; } .comm-section3 .slick-dots button { display: none; } .comm-section4 { padding: 6vw 0; background-color: #004ea2; } .comm-section4 .cont { font-size: 0; margin-top: 2vw; } .comm-section4 .img-box { display: inline-block; vertical-align: middle; width: 40%; overflow: hidden; } .comm-section4 .img-box img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } @media screen and (min-width: 992px) { .comm-section4 .img-box:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .comm-section4 .txt-box { display: inline-block; vertical-align: middle; width: 60%; padding-left: 4vw; } .comm-section4 .txt-box p { padding-left: 60px; font-size: 18px; line-height: 2; color: #fff; position: relative; margin-top: 24px; } .comm-section4 .txt-box p:nth-of-type(1) { margin-top: 0; } .comm-section4 .txt-box span { position: absolute; left: 0; top: 0; font-size: 30px; line-height: 1; font-family: 'DINPro-Regular'; } .comm-section5 { padding: 6vw 0; } .comm-section5 .items { margin: 2.5vw -10px 0; font-size: 0; } .comm-section5 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 2vw 10px 0; } @media screen and (min-width: 992px) { .comm-section5 .item:nth-of-type(1), .comm-section5 .item:nth-of-type(2), .comm-section5 .item:nth-of-type(3) { margin-top: 0; } } .comm-section5 .item .img-box { overflow: hidden; } .comm-section5 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .comm-section5 .item h3 { text-align: center; font-size: 18px; line-height: 1.2; color: #515151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2vw; } @media screen and (min-width: 992px) { .comm-section5 .item:hover img { /*-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);*/ } } .comm-section6 { background-color: #004ea2; padding: 6vw 0; } .comm-section6 .slick { margin-top: 3vw; } .comm-section6 .item .logo { width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; border: 10px solid #80a7d1; background-color: #fff; text-align: center; } .comm-section6 .item .logo img { width: auto; max-width: 70%; max-height: 70%; } .comm-section6 .item h3 { text-align: center; font-size: 24px; line-height: 1.2; color: #fff; margin: 30px 0; } .comm-section6 .item .para { width: 80%; max-width: 1080px; margin: 0 auto; padding: 0 100px; text-align: center; font-size: 18px; line-height: 2; color: #fff; position: relative; } .comm-section6 .item .para:before, .comm-section6 .item .para:after { content: ''; width: 46px; height: 37px; background-position: center; background-repeat: no-repeat; position: absolute; } .comm-section6 .item .para:before { left: 0; top: 0; background-image: url("../images/solution/icon-2.png"); } .comm-section6 .item .para:after { right: 0; bottom: 0; background-image: url("../images/solution/icon-3.png"); } .comm-section6 .slick-arrow { width: 60px; height: 60px; position: absolute; top: 40%; margin-top: -30px; background-color: transparent; font-size: 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; cursor: pointer; z-index: 2; } .comm-section6 .slick-arrow:hover { background-color: #fff; } .comm-section6 .slick-prev { left: 0; background-image: url("../images/prev-6.png"); } .comm-section6 .slick-prev:hover { background-image: url("../images/prev-7.png"); } .comm-section6 .slick-next { right: 0; background-image: url("../images/next-6.png"); } .comm-section6 .slick-next:hover { background-image: url("../images/next-7.png"); } .comm-section6 .slick-dots { margin-top: 2.5vw; font-size: 0; text-align: center; } .comm-section6 .slick-dots li { display: inline-block; vertical-align: top; width: 14px; height: 14px; background-color: #004ea2; border: 1px solid #d3d3d3; border-radius: 50%; margin: 0 8px; -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; } .comm-section6 .slick-dots li.slick-active { background-color: #fff; } .comm-section6 .slick-dots button { display: none; } .comm-section7 .item { margin: 0 1.8vw; } .comm-section7 .item a { display: block; padding-bottom: calc(3vw + 30px); position: relative; } .comm-section7 .item .img-box { overflow: hidden; } .comm-section7 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .comm-section7 .item h3 { position: absolute; left: 4vw; right: 4vw; bottom: 30px; font-size: 20px; line-height: 6vw; color: #111; text-align: center; padding: 0 20px; background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); 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; } .comm-section7 .item.slick-center h3 { opacity: 1; } @media screen and (min-width: 992px) { .comm-section7 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .comm-section7 .item:hover h3 { color: #004ea2; } } .comm-section7 .slick-arrow { width: 56px; height: 56px; position: absolute; top: 40%; margin-top: -28px; border: 1px solid #eeeeee; border-radius: 50%; background-color: transparent; font-size: 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; cursor: pointer; z-index: 2; } .comm-section7 .slick-arrow:hover { background-color: #004ea2; border-color: #004ea2; } .comm-section7 .slick-prev { left: 19vw; background-image: url("../images/prev-4.png"); } .comm-section7 .slick-next { right: 19vw; background-image: url("../images/next-4.png"); } .comm-section8 { font-size: 0; margin: 0 -10px; } .comm-section8 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 2vw 10px 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) { .comm-section8 .item:nth-of-type(1), .comm-section8 .item:nth-of-type(2), .comm-section8 .item:nth-of-type(3) { margin-top: 0; } } .comm-section8 .item .img-box { height: 260px; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .comm-section8 .item img { width: auto; max-width: 70%; max-height: 70%; } .comm-section8 .item h3 { font-size: 20px; color: #333; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2vw; margin-top: 1.5vw; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (min-width: 992px) { .comm-section8 .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .comm-section8 .item:hover h3 { color: #004ea2; } } .fixed-imgpopups { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; background-color: rgba(0, 0, 0, 0.8); display: none; } .fixed-imgpopups .close { width: 32px; height: 32px; position: absolute; right: 30px; top: 30px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/close-1.png"); cursor: pointer; z-index: 2; } .fixed-imgpopups .cell-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; z-index: 1; } .fixed-imgpopups .cell-box img { width: auto; max-width: 80%; max-height: 80%; } /* index */ .index-main .section1 { background-color: #000; } .index-main .section1 .item { height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .index-main .section1 .item .txt { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .index-main .section1 .item h3 { font-size: 60px; color: #fff; } .index-main .section1 .item p { font-size: 28px; color: #fff; margin-top: 10px; } .index-main .section1 .item h3, .index-main .section1 .item p { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(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 .section1 .item.slick-current h3, .index-main .section1 .item.slick-current p { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .index-main .section1 .item.slick-current h3 { transition-delay: .3s; } .index-main .section1 .item.slick-current p { transition-delay: .5s; } .index-main .section1 .slick-arrow { width: 40px; height: 40px; position: absolute; top: 50%; margin-top: -20px; background-color: transparent; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: .5; -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; z-index: 2; } .index-main .section1 .slick-arrow:hover { opacity: 1; } .index-main .section1 .slick-prev { left: 3.5vw; background-image: url("../images/prev-1.png"); } .index-main .section1 .slick-prev:hover { background-image: url("../images/prev-2.png"); } .index-main .section1 .slick-next { right: 3.5vw; background-image: url("../images/next-1.png"); } .index-main .section1 .slick-next:hover { background-image: url("../images/next-2.png"); } .index-main .section1 .slick-dots { position: absolute; bottom: 3vw; left: 0; right: 0; text-align: center; font-size: 0; } .index-main .section1 .slick-dots li { display: inline-block; vertical-align: top; width: 14px; height: 14px; margin: 0 6px; background-color: #fff; border-radius: 7px; -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; } .index-main .section1 .slick-dots li.slick-active { width: 30px; background-color: #004ea2; } .index-main .section1 .slick-dots button { display: none; } .index-main .section2 { padding: 6vw 11vw; position: relative; } .index-main .section2 .txt-block { width: 50%; } .index-main .section2 .txt-block:before { content: ''; display: block; width: 25px; height: 3px; background-color: #dcdcdc; } .index-main .section2 .en { font-size: 20px; line-height: 1; color: #666; text-transform: uppercase; margin-top: 1vw; margin-bottom: 2vw; } .index-main .section2 .para { font-size: 16px; line-height: 30px; color: #999999; text-align: justify; margin-top: 1vw; } .index-main .section2 .inner-btn { margin-top: 1.5vw; } .index-main .section2 .data { font-size: 0; margin-top: 4vw; } .index-main .section2 .data .item { display: inline-block; vertical-align: top; width: 33%; } .index-main .section2 .data .item .num, .index-main .section2 .data .item p { font-size: 16px; color: #666; } .index-main .section2 .data .item .num span { font-size: 60px; line-height: 1; color: #000; font-family: 'DINPro-Medium'; display: inline-block; vertical-align: top; } .index-main .section2 .data .item p { margin-top: 10px; } .index-main .section2 .data .item .tip { font-size: 12px; color: #d7d7d7; } .index-main .section2 .img-block { position: absolute; top: 6vw; bottom: 6vw; right: 0; left: 58%; } .index-main .section2 .img-block:before { content: ''; height: 6vw; width: 50%; position: absolute; right: 0; bottom: 100%; background-color: #f7f7f7; } .index-main .section2 .img-block:after { content: ''; width: 10vw; height: 1px; background-color: #dcdcdc; position: absolute; bottom: 3.5vw; left: 0; margin-left: -5vw; } .index-main .section2 .img-block .bg-box { width: 100%; height: 100%; overflow: hidden; } .index-main .section2 .img-block .bg { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } @media screen and (min-width: 992px) { .index-main .section2 .img-block:hover .bg { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } } .index-main .section2 .m-show { display: none; } .index-main .section3 { padding: 4.5vw 11vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-2.jpg"); } .index-main .section3 .index-tit { padding-right: 120px; position: relative; } .index-main .section3 .index-tit a { position: absolute; right: 0; bottom: 0; font-size: 16px; color: #fff; } .index-main .section3 .index-tit a:after { content: ''; width: 22px; height: 22px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/a-btn-2.png"); display: inline-block; vertical-align: middle; margin: -2px 0 0 10px; } .index-main .section3 .slick { margin: 2vw -11vw 0; padding-left: 11vw; } .index-main .section3 .slick-list { padding-right: 11vw; } .index-main .section3 .item { margin-right: 20px; } .index-main .section3 .item a { position: relative; display: block; height: 100%; } .index-main .section3 .item a:after { content: ''; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); z-index: 1; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .index-main .section3 .item a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; 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; } .index-main .section3 .item .img-block { overflow: hidden; } .index-main .section3 .item .txt-block { position: absolute; left: 2.8vw; right: 2.8vw; bottom: 2.8vw; z-index: 2; -webkit-transition: padding 0.3s ease; -moz-transition: padding 0.3s ease; -ms-transition: padding 0.3s ease; transition: padding 0.3s ease; } .index-main .section3 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .index-main .section3 .item i { display: block; height: 34px; background-position: left center; background-repeat: no-repeat; background-size: contain; } .index-main .section3 .item h3 { font-size: 22px; color: #fff; margin: 10px 0; } .index-main .section3 .item h4 { font-size: 14px; color: #fff; opacity: .5; } .index-main .section3 .item p { font-size: 14px; line-height: 22px; color: #fff; opacity: .5; margin-top: 15px; height: 88px; overflow: hidden; } .index-main .section3 .item .inner-btn { position: absolute; left: 0; bottom: 0; opacity: 0; } @media screen and (min-width: 992px) { .index-main .section3 .item:hover a:after { opacity: 0; } .index-main .section3 .item:hover a:before { opacity: 1; } .index-main .section3 .item:hover .txt-block { padding-bottom: 5vw; } .index-main .section3 .item:hover .inner-btn { opacity: 1; } .index-main .section3 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .index-main .section3 .slick-arrow { width: 54px; height: 54px; background-position: center; background-repeat: no-repeat; position: absolute; top: 50%; margin-top: -27px; font-size: 0; border-radius: 50%; 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; } .index-main .section3 .slick-arrow.slick-disabled { opacity: 0; } .index-main .section3 .slick-prev { left: 5vw; background-color: #fff; background-image: url("../images/prev-3.png"); } .index-main .section3 .slick-next { right: 5vw; background-color: #004ea2; background-image: url("../images/next-4.png"); } .index-main .section3 .slick-dots { margin-top: 1.8vw; font-size: 0; text-align: center; } .index-main .section3 .slick-dots li { display: inline-block; vertical-align: top; width: 16px; height: 16px; margin: 0 10px; background-color: rgba(255, 255, 255, 0.2); 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; cursor: pointer; } .index-main .section3 .slick-dots li.slick-active { background-color: #fff; } .index-main .section3 .slick-dots button { display: none; } .index-main .section4 { padding: 5vw 11vw; } .index-main .section4 .index-tit { padding-right: 120px; position: relative; } .index-main .section4 .index-tit a { position: absolute; right: 0; bottom: 0; font-size: 16px; color: #666; } .index-main .section4 .index-tit a:after { content: ''; width: 22px; height: 22px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/a-btn-1.png"); display: inline-block; vertical-align: middle; margin: -2px 0 0 10px; } .index-main .section4 .main { margin-top: 2vw; display: flex; } .index-main .section4 .left-block { width: 32%; padding-right: 24px; } .index-main .section4 .left-block .txt-block { background-color: #f5f5f5; padding: 2vw; } .index-main .section4 .left-block .img-block { overflow: hidden; } .index-main .section4 .left-block .date { font-size: 14px; color: #999; } .index-main .section4 .left-block h3 { font-size: 20px; color: #111; line-height: 24px; margin: 10px 0; height: 48px; overflow: hidden; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .index-main .section4 .left-block p { font-size: 16px; line-height: 24px; color: #999999; height: 48px; overflow: hidden; } .index-main .section4 .left-block span { font-size: 24px; color: #111; text-align: right; display: block; line-height: 1; padding-right: 20px; } .index-main .section4 .left-block img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } @media screen and (min-width: 992px) { .index-main .section4 .left-block:hover h3 { color: #004ea2; } .index-main .section4 .left-block:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .index-main .section4 .right-block { width: 68%; display: flex; } .index-main .section4 .right-block .img-block { width: 72%; height: 100%; position: relative; overflow: hidden; } .index-main .section4 .right-block .img-block .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; } .index-main .section4 .right-block .img-block h3 { position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); padding: 1.5vw; text-align: center; font-size: 18px; color: #fff; } @media screen and (min-width: 992px) { .index-main .section4 .right-block .img-block:hover .bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .index-main .section4 .right-block .txt-block { width: 28%; } .index-main .section4 .right-block .txt-block .item { position: relative; height: 33.33%; background-color: #f7f7f7; padding: 0 2vw; border-bottom: 1px solid #dcdcdc; -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; } .index-main .section4 .right-block .txt-block .item:last-of-type { border: none; } .index-main .section4 .right-block .txt-block .item:after { content: ''; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 12px solid #004ea2; position: absolute; right: 100%; top: 50%; margin-top: -10px; opacity: 0; -webkit-transform: translateX(12px); -moz-transform: translateX(12px); -ms-transform: translateX(12px); transform: translateX(12px); -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 .right-block .txt-block .item .date { font-size: 14px; color: #999; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .index-main .section4 .right-block .txt-block .item h3 { font-size: 18px; line-height: 24px; color: #111; height: 48px; overflow: hidden; margin-top: 10px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .index-main .section4 .right-block .txt-block .item span { display: block; font-size: 24px; line-height: 1; margin-top: -5px; color: #fff; text-align: right; 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; } .index-main .section4 .right-block .txt-block .item:hover, .index-main .section4 .right-block .txt-block .item.active { background-color: #004ea2; } .index-main .section4 .right-block .txt-block .item:hover .date, .index-main .section4 .right-block .txt-block .item:hover h3, .index-main .section4 .right-block .txt-block .item.active .date, .index-main .section4 .right-block .txt-block .item.active h3 { color: #fff; } .index-main .section4 .right-block .txt-block .item:hover span, .index-main .section4 .right-block .txt-block .item.active span { opacity: 1; } .index-main .section4 .right-block .txt-block .item.active:after { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .index-main .section4 .m-slick { display: none; } /* about */ .about-index .section1 { padding: 6vw 0; } .about-index .section1 .cont { display: flex; } .about-index .section1 .left-box { width: 50%; padding-right: 4vw; } .about-index .section1 .left-box img { width: 100%; } .about-index .section1 .left-box .para { font-size: 16px; line-height: 30px; color: #999999; text-align: justify; margin-top: 2vw; } .about-index .section1 .left-box .inner-btn { margin-top: 4vw; } .about-index .section1 .right-box { width: 50%; overflow: hidden; } .about-index .section1 .right-box .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; } @media screen and (min-width: 992px) { .about-index .section1 .right-box:hover .bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .about-index .section1 .data { font-size: 0; margin-top: 5vw; } .about-index .section1 .data .item { display: inline-block; vertical-align: top; width: 25%; text-align: center; position: relative; } .about-index .section1 .data .item:after { content: ''; width: 1px; height: 4vw; position: absolute; right: 0; top: 50%; margin-top: -2vw; background-color: #dfdfdf; } .about-index .section1 .data .item:last-of-type:after { display: none; } .about-index .section1 .data .item .num, .about-index .section1 .data .item p { font-size: 16px; color: #666; } .about-index .section1 .data .item .num span { font-size: 60px; line-height: 1; color: #004ea2; font-family: 'DINPro-Medium'; display: inline-block; vertical-align: top; } .about-index .section1 .data .item p { margin-top: 10px; } .about-index .section1 .data .item .tip { font-size: 12px; color: #d7d7d7; } .about-index .section1 .m-show { display: none; } .about-index .section2 { padding: 4.5vw 0 6vw; background-color: #f5f5f5; } .about-index .section2 .items { font-size: 0; margin: 3vw -10px 0; } .about-index .section2 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 0 10px; 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; } .about-index .section2 .item .img-block { overflow: hidden; } .about-index .section2 .item .txt-block { padding: 1.8vw 2.3vw; } .about-index .section2 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .about-index .section2 .item h3 { font-size: 24px; color: #111; line-height: 1.2; } .about-index .section2 .item p { font-size: 16px; line-height: 24px; height: 48px; overflow: hidden; margin-top: 20px; } @media screen and (min-width: 992px) { .about-index .section2 .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-index .section2 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .about-index .section3 { padding: 6vw 0; background-color: #004ea2; } .about-index .section3 .items { margin: 3vw -10px 0; font-size: 0; } .about-index .section3 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); padding: 3vw 2.5vw; background-color: #fff; margin: 0 10px; } .about-index .section3 .item p { font-size: 16px; line-height: 24px; color: #111; margin-top: 1.8vw; cursor: pointer; 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; } .about-index .section3 .item p:nth-of-type(1) { margin-top: 0; } @media screen and (min-width: 992px) { .about-index .section3 .item p:hover { color: #004ea2; } } .about-index .section4 { padding: 6vw 0; } .about-index .section4 .items { margin: 3vw -10px 0; } .about-index .section4 .item { margin: 0 10px; } .about-index .section4 .item .img-block { overflow: hidden; } .about-index .section4 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .about-index .section4 .item h3 { font-size: 20px; line-height: 1.2; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2vw; } .about-index .section4 .item p { font-size: 16px; line-height: 24px; color: #666; padding-left: 30px; background-position: left center; background-repeat: no-repeat; background-image: url("../images/about/icon-1.png"); margin-top: 1vw; } @media screen and (min-width: 992px) { .about-index .section4 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .about-index .section4 .slick-arrow { width: 56px; height: 56px; position: absolute; top: 50%; margin-top: -28px; border: 1px solid #eeeeee; border-radius: 50%; background-color: transparent; font-size: 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; cursor: pointer; z-index: 2; } .about-index .section4 .slick-arrow:hover { background-color: #004ea2; border-color: #004ea2; } .about-index .section4 .slick-prev { left: -5vw; background-image: url("../images/prev-3.png"); } .about-index .section4 .slick-prev:hover { background-image: url("../images/prev-4.png"); } .about-index .section4 .slick-next { right: -5vw; background-image: url("../images/next-3.png"); } .about-index .section4 .slick-next:hover { background-image: url("../images/next-4.png"); } .about-index .section5 { background-color: #004ea2; padding: 4vw 0; font-size: 0; } .about-index .section5 .wrapper { padding-right: 200px; } .about-index .section5 .item { display: inline-block; vertical-align: top; width: 33.33%; } .about-index .section5 .item i { width: 70px; height: 70px; background-position: center; background-repeat: no-repeat; display: inline-block; vertical-align: middle; } .about-index .section5 .item .txt { display: inline-block; vertical-align: middle; width: calc(100% - 70px); padding-left: 20px; color: #fff; } .about-index .section5 .item h3 { font-size: 30px; line-height: 1; } .about-index .section5 .item h4 { font-size: 20px; color: #fff; } .about-index .section5 .item p { font-size: 16px; line-height: 1; margin-top: 10px; } .about-index .section5 .item:nth-of-type(1) i { background-image: url("../images/about/icon-4.png"); } .about-index .section5 .item:nth-of-type(2) i { background-image: url("../images/about/icon-5.png"); } .about-index .section5 .item:nth-of-type(3) i { background-image: url("../images/about/icon-6.png"); } .about-index .section5 a { display: block; position: absolute; right: 0; top: 50%; margin-top: -25px; width: 186px; line-height: 50px; font-size: 16px; color: #333; text-align: center; 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; } @media screen and (min-width: 992px) { .about-index .section5 a:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); color: #004ea2; } } .about-legal .section1 { padding: 6vw 0 8vw; } .about-legal .section1 .para { margin-top: 3vw; border-top: 1px solid #d8d8d8; padding-top: 2vw; font-size: 16px; line-height: 36px; color: #666; } .about-legal .section1 .para h3 { font-size: 20px; color: #111; } .about-intro .section1 { padding: 6vw 0; } .about-intro .section1 .main { max-width: 1210px; margin: 0 auto; } .about-intro .section1 .cont { margin-top: 2vw; } .about-intro .section1 .para { font-size: 16px; line-height: 30px; color: #666; } .about-intro .section1 .img-block { margin: 2vw 0; } .about-intro .section1 .img-block img { display: block; width: 100%; } .about-honor .section1 { padding: 4.5vw 0 6vw; } .about-honor .section1 .link-box { font-size: 0; text-align: center; } .about-honor .section1 .link-box a { display: inline-block; vertical-align: top; width: 160px; font-size: 20px; color: #111; line-height: 46px; border-radius: 24px; border: 1px solid #e5e5e5; background-color: #f8f8f8; margin: 0 12px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about-honor .section1 .link-box a:hover, .about-honor .section1 .link-box a.active { background-color: #004ea2; border-color: #004ea2; color: #fff; } .about-honor .section1 .comm-section1 { margin: 3vw -10px; font-size: 0; } .about-honor .section1 .comm-section1 .item { margin-top: 2.5vw; } @media screen and (min-width: 992px) { .about-honor .section1 .comm-section1 .item:nth-of-type(1), .about-honor .section1 .comm-section1 .item:nth-of-type(2), .about-honor .section1 .comm-section1 .item:nth-of-type(3) { margin-top: 0; } } .about-culture .section1 { padding: 5vw 0; } .about-culture .section1 .item { position: relative; } .about-culture .section1 .item .img-box { width: 50%; overflow: hidden; } .about-culture .section1 .item .txt-box { width: 50%; padding: 0 9vw; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .about-culture .section1 .item:nth-of-type(1) .txt-box { left: 0; } .about-culture .section1 .item:nth-of-type(odd) .img-box { margin-left: 50%; } .about-culture .section1 .item:nth-of-type(2) .txt-box { right: 0; } .about-culture .section1 .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; } .about-culture .section1 .item h3 { font-size: 30px; line-height: 1.2; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .about-culture .section1 .item p { font-size: 16px; line-height: 24px; color: #666666; margin-top: 20px; } @media screen and (min-width: 992px) { .about-culture .section1 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .about-culture .section1 .item:hover h3 { color: #004ea2; } } .about-culture .section2 { padding: 6vw 0 8vw; background-color: #004ea2; } .about-culture .section2 .tab-tit { text-align: center; margin-top: 3vw; font-size: 0; } .about-culture .section2 .tab-tit span { display: inline-block; vertical-align: top; width: 160px; line-height: 46px; font-size: 18px; color: #fff; border: 1px solid #fff; border-radius: 24px; -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; margin: 0 15px; } .about-culture .section2 .tab-tit span:hover, .about-culture .section2 .tab-tit span.active { background-color: #fff; color: #000; } .about-culture .section2 .tab-cont { max-width: 1020px; margin: 3.5vw auto 0; } .about-culture .section2 .tab-cont .child { display: none; } .about-culture .section2 .tab-cont .child.active { display: block; } .about-culture .section2 .tab-cont h3 { font-size: 28px; line-height: 1.2; color: #fff; text-align: center; } .about-culture .section2 .tab-cont .para { font-size: 16px; line-height: 36px; color: #fff; margin-top: 2vw; overflow: hidden; } .about-culture .section2 .tab-cont .para p { width: 50%; float: left; padding-left: 20px; } .about-culture .section3 { padding: 4.5vw 0 6vw; background-color: #f7f7f7; } .about-culture .section3 .img-box { position: relative; width: 76%; max-width: 1020px; margin: 2.5vw auto 0; overflow: hidden; } .about-culture .section3 .img-box img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .about-culture .section3 .img-box a { width: 80px; height: 80px; 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%); background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/video.png"); -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) { .about-culture .section3 .img-box a:hover { background-image: url("../images/video-on.png"); } } @media screen and (min-width: 992px) { .about-culture .section3 .img-box:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } } .about-culture .section4 { background-color: #fafafa; padding: 5vw 0 4vw; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/about/img-20.png"); } .about-culture .section4 img { display: block; margin: 4vw auto 0; width: 28%; max-width: 364px; } .about-manage .section1 { padding: 5vw 0; } .about-manage .section2 { padding: 6vw 0; background-color: #f5f5f5; } .about-manage .section2 .para { font-size: 16px; line-height: 24px; color: #666666; margin-top: 2vw; } .about-manage .section2 .img-box { width: 90%; max-width: 1216px; margin: 4vw auto 0; } .about-manage .section2 .img-box img { display: block; width: 100%; } .about-manage .section3 { padding: 5vw 0; } .about-manage .section3 .img-box img { display: block; width: 100%; } .about-manage .section4 { padding: 5vw 0; background-color: #004ea2; } .about-manage .section4 .para { font-size: 16px; line-height: 24px; color: #fff; text-align: center; margin-top: 30px; } .about-manage .section4 .img-box { margin-top: 2.5vw; } .about-manage .section4 .img-box img { display: block; width: 100%; } .about-contact .section1 { padding: 6vw 0 4.5vw; } .about-contact .section1 .items { margin: 2.5vw -10px 0; font-size: 0; } .about-contact .section1 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 3vw 10px 0; } @media screen and (min-width: 992px) { .about-contact .section1 .item:nth-of-type(1), .about-contact .section1 .item:nth-of-type(2), .about-contact .section1 .item:nth-of-type(3) { margin-top: 0; } } .about-contact .section1 .item .img-box { overflow: hidden; position: relative; z-index: 1; } .about-contact .section1 .item .img-box:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(34, 34, 34, 0.5); z-index: 1; } .about-contact .section1 .item .img-box img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .about-contact .section1 .item .img-box h3 { font-size: 20px; color: #fff; text-align: center; position: absolute; left: 0; right: 0; top: 40%; z-index: 2; } .about-contact .section1 .item .txt-box { margin: -3.5vw 1.7vw 0; padding: 2vw 1.5vw; background-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; 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-contact .section1 .item .txt-box h3 { font-size: 18px; color: #111; 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; } .about-contact .section1 .item .txt-box .addr, .about-contact .section1 .item .txt-box .tel { font-size: 14px; line-height: 26px; color: rgba(102, 102, 102, 0.7); padding-left: 35px; background-position: left center; background-repeat: no-repeat; 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about-contact .section1 .item .txt-box .addr { background-image: url("../images/about/icon-2.png"); } .about-contact .section1 .item .txt-box .tel { background-image: url("../images/about/icon-3.png"); } @media screen and (min-width: 992px) { .about-contact .section1 .item:hover .img-box img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .about-contact .section1 .item:hover .txt-box { background-color: #004ea2; } .about-contact .section1 .item:hover .txt-box h3 { color: #fff; } .about-contact .section1 .item:hover .txt-box .addr, .about-contact .section1 .item:hover .txt-box .tel { color: rgba(255, 255, 255, 0.7); } .about-contact .section1 .item:hover .txt-box .addr { background-image: url("../images/about/icon-2-on.png"); } .about-contact .section1 .item:hover .txt-box .tel { background-image: url("../images/about/icon-3-on.png"); } } .about-contact .section2 { padding: 4.5vw 0; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-color: #004ea2; } .about-contact .section2 .items { font-size: 0; margin-top: 3vw; } .about-contact .section2 .item { display: inline-block; vertical-align: bottom; width: 33.33%; text-align: center; position: relative; color: #fff; } .about-contact .section2 .item:after { content: ''; width: 1px; height: 70%; background-color: #fff; position: absolute; right: 0; bottom: 0; opacity: .5; } .about-contact .section2 .item i { display: block; width: 40px; height: 40px; margin: 0 auto; background-position: center; background-repeat: no-repeat; } .about-contact .section2 .item img { display: block; margin: 0 auto; width: 95px; } .about-contact .section2 .item h3 { font-size: 20px; line-height: 1; margin-top: 20px; } .about-contact .section2 .item p { font-size: 16px; line-height: 1; margin-top: 10px; } .about-contact .section2 .item:nth-of-type(1) i { background-image: url("../images/about/icon-7.png"); } .about-contact .section2 .item:nth-of-type(2) i { background-image: url("../images/about/icon-8.png"); } .about-contact .section2 .item:last-of-type:after { display: none; } /* news */ .news-company .section1 { padding: 6vw 0; } .news-company .section1 .items { margin: 0 -10px 4vw; font-size: 0; } .news-company .section1 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 2.5vw 10px 0; } @media screen and (min-width: 992px) { .news-company .section1 .item:nth-of-type(1), .news-company .section1 .item:nth-of-type(2), .news-company .section1 .item:nth-of-type(3) { margin-top: 0; } } .news-company .section1 .item .img-block { overflow: hidden; } .news-company .section1 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .news-company .section1 .item h3 { font-size: 20px; line-height: 30px; height: 60px; overflow: hidden; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .news-company .section1 .item .date { font-size: 18px; line-height: 1.2; color: #999999; margin-top: 20px; margin-bottom: 10px; } @media screen and (min-width: 992px) { .news-company .section1 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .news-company .section1 .item:hover h3 { color: #004ea2; } } .news-party .section1 { padding: 6vw 0; } .news-party .section1 .items { margin-bottom: 3vw; } .news-party .section1 .item { border-top: 1px solid #dcdcdc; padding: 2.5vw 120px; font-size: 0; min-height: 125px; position: relative; } .news-party .section1 .item .box { position: relative; } .news-party .section1 .item .date { text-align: center; font-size: 14px; color: #666; font-family: 'DINPro-Medium'; position: absolute; left: 1.5vw; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .news-party .section1 .item .date span { display: block; font-size: 48px; line-height: 1; color: #111; font-family: 'DINPro-Bold'; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #d2d2d2; } .news-party .section1 .item .img-block { width: 35%; max-width: 384px; position: relative; overflow: hidden; } .news-party .section1 .item .img-block span { position: absolute; left: 0; top: 0; background-color: #004ea2; font-size: 16px; color: #fff; line-height: 40px; padding: 0 1.5vw; } .news-party .section1 .item .txt-block { position: absolute; top: 0; left: 35%; bottom: 0; width: 65%; padding-left: 2.5vw; } .news-party .section1 .item .txt-block span { width: 35px; height: 6px; position: absolute; bottom: 12px; background-position: center; background-repeat: no-repeat; background-image: url("../images/news/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; } .news-party .section1 .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; } .news-party .section1 .item h3 { font-size: 20px; color: #111; 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-party .section1 .item p { font-size: 16px; line-height: 30px; color: #636363; height: 60px; overflow: hidden; margin-top: 10px; } @media screen and (min-width: 992px) { .news-party .section1 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .news-party .section1 .item:hover h3 { color: #004ea2; } .news-party .section1 .item:hover .txt-block span { background-image: url("../images/news/icon-1-on.png"); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .news-detail .section1 { background-color: #f7f7f7; padding: 2vw 0; } .news-detail .section1 .main { margin: 0 -5vw; position: relative; } .news-detail .section2 { padding: 5vw 0; font-size: 0; } .news-detail .section2 .left-box { width: 68%; display: inline-block; vertical-align: top; } .news-detail .section2 .tit-box h3 { font-size: 30px; line-height: 36px; color: #414141; } .news-detail .section2 .tit-box .date { font-size: 14px; color: #969696; margin-top: 20px; display: inline-block; vertical-align: top; margin-right: 20px; } .news-detail .section2 .cont { margin-top: 20px; } .news-detail .section2 .other-box { position: relative; margin-top: 4.5vw; padding: 2vw 180px 2vw 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .news-detail .section2 .other-box .page a { display: block; font-size: 16px; line-height: 36px; color: #111; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (min-width: 992px) { .news-detail .section2 .other-box .page a:hover { color: #004ea2; } } .news-detail .section2 .other-box a.back { position: absolute; right: 0; top: 50%; margin-top: -20px; width: 130px; font-size: 14px; line-height: 40px; color: #fff; text-align: center; background-color: #004ea2; border-radius: 20px; -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) { .news-detail .section2 .other-box a.back:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 78, 162, 0.3); } } /* recruit */ .recruit-idea .section1 .item { position: relative; } .recruit-idea .section1 .item .img-box { width: 50%; overflow: hidden; position: relative; } .recruit-idea .section1 .item .img-box a { width: 80px; height: 80px; 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%); background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/video.png"); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .recruit-idea .section1 .item .img-box span { position: absolute; color: #fff; font-size: 20px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -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) { .recruit-idea .section1 .item .img-box a:hover { background-image: url("../images/video-on.png"); } } .recruit-idea .section1 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .recruit-idea .section1 .item .txt-box { width: 50%; position: absolute; top: 0; bottom: 0; } .recruit-idea .section1 .item .box { display: inline-block; width: 40vw; max-width: 680px; } .recruit-idea .section1 .item h3 { font-size: 30px; line-height: 1.2; color: #111; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .recruit-idea .section1 .item p { font-size: 16px; line-height: 24px; color: #999; margin-top: 20px; } .recruit-idea .section1 .item:nth-of-type(odd) .txt-box { right: 0; text-align: left; } .recruit-idea .section1 .item:nth-of-type(odd) .box { text-align: right; } .recruit-idea .section1 .item:nth-of-type(even) .img-box { margin-left: 50%; } .recruit-idea .section1 .item:nth-of-type(even) .txt-box { left: 0; text-align: right; } .recruit-idea .section1 .item:nth-of-type(even) .box { text-align: left; } @media screen and (min-width: 992px) { .recruit-idea .section1 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .recruit-idea .section1 .item:hover h3 { color: #004ea2; } } .recruit-idea .section2 { font-size: 0; } .recruit-idea .section2 .item { display: inline-block; vertical-align: top; width: 50%; position: relative; } .recruit-idea .section2 .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .recruit-idea .section2 .item .img-box { overflow: hidden; } .recruit-idea .section2 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .recruit-idea .section2 .item .txt-box { position: absolute; left: 0; right: 0; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } .recruit-idea .section2 .item h3 { font-size: 30px; color: #fff; line-height: 1.2; } .recruit-idea .section2 .item p { font-size: 16px; line-height: 24px; color: #fff; margin-top: 20px; } @media screen and (min-width: 992px) { .recruit-idea .section2 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .recruit-detail .section1 { padding: 5vw 0 6vw; background-color: #f2f2f2; } .recruit-detail .section1 .main { background-color: #fff; padding: 4vw 6vw 5vw; } .recruit-detail .section1 .top-box { position: relative; padding-right: 160px; } .recruit-detail .section1 .top-box h3 { font-size: 30px; line-height: 1.2; color: #111; } .recruit-detail .section1 .top-box .label { margin-top: 2vw; font-size: 0; } .recruit-detail .section1 .top-box .item { display: inline-block; vertical-align: top; margin-right: 30px; font-size: 16px; line-height: 20px; color: #666; } .recruit-detail .section1 .top-box .item span { color: #111; margin-right: 10px; } .recruit-detail .section1 .top-box .inner-btn { position: absolute; right: 0; top: 50%; margin-top: -25px; } .recruit-detail .section1 .top-box .inner-btn:after { display: none; } .recruit-detail .section1 .cont-box { margin-top: 2vw; } .recruit-detail .section1 .cont-box .inner-btn { margin-left: 3vw; } .recruit-detail .section1 .cont-box .inner-btn:after { display: none; } .recruit-detail .section1 .box { padding: 2.5vw 0; border-top: 1px solid #e5e5e5; } .recruit-detail .section1 .box .tit { font-size: 20px; color: #111; line-height: 1.2; } .recruit-detail .section1 .box .para { font-size: 16px; line-height: 3; color: #666666; margin-top: 20px; } .recruit-campus .section1 { padding: 6vw 0; background-color: #f2f2f2; } .recruit-campus .section1 .items { margin: 4vw -15px; font-size: 0; } .recruit-campus .section1 .item { cursor:pointer; display: inline-block; vertical-align: top; width: calc(33.33% - 30px); margin: 30px 15px 0; background-color: #fff; padding: 2.5vw; 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; } @media screen and (min-width: 992px) { .recruit-campus .section1 .item:nth-of-type(1), .recruit-campus .section1 .item:nth-of-type(2), .recruit-campus .section1 .item:nth-of-type(3) { margin-top: 0; } } .recruit-campus .section1 .item .box { position: relative; } .recruit-campus .section1 .item a { display: block; } .recruit-campus .section1 .item h3 { font-size: 22px; color: #111; line-height: 30px; 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; } .recruit-campus .section1 .item .label { margin-top: 40px; font-size: 16px; line-height: 2; color: #666; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .recruit-campus .section1 .item .label span { margin-right: 10px; } .recruit-campus .section1 .item span.recruit-popups-btn a{ position: absolute; top: 30px; font-size: 16px; color: #004ea2; left: 0; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; } .recruit-campus .section1 .item span.recruit-popups-btn :hover{ border-bottom: 1px solid #fff; color: #fff; } .recruit-campus .section1 .item:after { content: '+'; font-size: 30px; line-height: 1; color: #111; position: absolute; right: 2.5vw; bottom: 2.5vw; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (min-width: 992px) { .recruit-campus .section1 .item:hover { background-color: #004ea2; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 75, 152, 0.3); } .recruit-campus .section1 .item:hover h3, .recruit-campus .section1 .item:hover .label, .recruit-campus .section1 .item:hover:after, .recruit-campus .section1 .item:hover span.recruit-popups-btn a { color: #fff; } } .recruit-campus .section1 .comm-pages ul li input { background-color: #fff; } .recruit-social .section1 { padding: 6vw 0; background-color: #f2f2f2; } .recruit-social .section1 .items { margin: 4vw 0; } .recruit-social .section1 .item { margin-top: 20px; 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; font-size: 0; position: relative; } .recruit-social .section1 .item:first-of-type { margin-top: 0; } .recruit-social .section1 .item a { display: block; padding: 2vw 6vw; position: relative; } .recruit-social .section1 .item a:after { content: ''; position: absolute; right: 5vw; top: 50%; margin-top: -15px; width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/recruit/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; } .recruit-social .section1 .item .info { display: inline-block; vertical-align: top; padding-right: 20px; } .recruit-social .section1 .item .info:nth-of-type(1) { width: 36%; } .recruit-social .section1 .item .info:nth-of-type(2), .recruit-social .section1 .item .info:nth-of-type(3), .recruit-social .section1 .item .info:nth-of-type(4), .recruit-social .section1 .item .info:nth-of-type(5) { width: 16%; } .recruit-social .section1 .item h3 { font-size: 22px; color: #111; line-height: 24px; 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; } .recruit-social .section1 .item .label { font-size: 14px; line-height: 20px; color: #666; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .recruit-social .section1 .item span { display: block; font-size: 18px; line-height: 24px; color: #111; margin-top: 5px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .recruit-social .section1 .item span.recruit-popups-btn { color: #004ea2; display: inline-block; position: absolute; bottom: 2vw; left: 6vw; cursor: pointer; } .recruit-social .section1 .item span.recruit-popups-btn:hover{ border-bottom: 1px solid #fff !important; color: #fff; } @media screen and (min-width: 992px) { .recruit-social .section1 .item:hover { margin-left: -10px; margin-right: -10px; background-color: #004ea2; } .recruit-social .section1 .item:hover a:after { background-image: url("../images/recruit/icon-1-on.png"); } .recruit-social .section1 .item:hover h3, .recruit-social .section1 .item:hover .label, .recruit-social .section1 .item:hover span { color: #fff; } } .fixed-recruit-popups { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; display: none; } .fixed-recruit-popups .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 1; } .fixed-recruit-popups .close { position: absolute; right: 30px; top: 30px; width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-image: url("../images/close-2.png"); z-index: 2; cursor: pointer; } .fixed-recruit-popups .main { width: 90%; max-width: 720px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 50%; margin: 0 auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: #fff; z-index: 2; padding: 3vw; font-size: 0; } .fixed-recruit-popups h3 { font-size: 24px; text-align: center; } .fixed-recruit-popups form { margin-top: 1vw; } .fixed-recruit-popups .box { display: inline-block; vertical-align: top; margin-top: 12px; width: 100%; position: relative; } @media screen and (min-width: 992px) { .fixed-recruit-popups .box.half { width: calc(50% - 6px); } .fixed-recruit-popups .box.third { width: calc(33.33% - 8px); } .fixed-recruit-popups .box.ml { margin-left: 12px; } } .fixed-recruit-popups .box input[type="text"], .fixed-recruit-popups .box select, .fixed-recruit-popups .box textarea { display: block; width: 100%; border: 1px solid #f5f5f5; border-radius: 5px; font-size: 14px; color: #333; font-family: 'Source Han Sans CN','Microsoft YaHei'; } .fixed-recruit-popups .box input[type="text"], .fixed-recruit-popups .box select { height: 40px; padding: 0 10px; } .fixed-recruit-popups .box select { background-position: 96% center; background-repeat: no-repeat; background-image: url("../images/select-btn.png"); } .fixed-recruit-popups .box textarea { height: 90px; padding: 10px; resize: none; } .fixed-recruit-popups .box .file { display: inline-block; vertical-align: top; position: relative; width: 120px; height: 40px; overflow: hidden; } .fixed-recruit-popups .box .file input[type="file"] { display: block; width: 100%; height: 100%; position: relative; z-index: 2; opacity: 0; cursor: pointer; } .fixed-recruit-popups .box .file a { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; text-align: center; background-color: #004ea2; font-size: 14px; color: #fff; line-height: 40px; } .fixed-recruit-popups .box .txt { display: inline-block; vertical-align: top; margin-left: 20px; font-size: 14px; line-height: 40px; color: #999; } .fixed-recruit-popups .box button { display: block; width: 100%; height: 40px; font-size: 14px; color: #fff; background-color: #004ea2; cursor: pointer; } /* product */ .product-list .section1 { padding: 4.5vw 0; } .product-list .section1 .filter { margin-top: 2.5vw; } .product-list .section1 .item { margin-top: 2vw; font-size: 0; position: relative; padding-right: 60px; } .product-list .section1 .item:nth-of-type(1) { margin-top: 0; } .product-list .section1 .item .label { display: inline-block; vertical-align: top; width: 86px; font-size: 20px; line-height: 36px; color: #333; } .product-list .section1 .item .a-block { display: inline-block; vertical-align: top; width: calc(100% - 86px); height: 36px; overflow: hidden; } .product-list .section1 .item .a-block.auto { height: auto; } .product-list .section1 .item .box a { display: inline-block; vertical-align: top; font-size: 14px; line-height: 36px; padding: 0 1.5vw; color: #808080; margin: 0 18px 2px 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .product-list .section1 .item .box a:hover, .product-list .section1 .item .box a.active { background-color: #004ea2; color: #fff; } .product-list .section1 .item .more { position: absolute; right: 40px; top: 12px; width: 18px; height: 11px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product/icon-1.png"); 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; } .product-list .section1 .item .more.open { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .product-list .section2 { padding: 4.5vw 0 6vw; background-color: #f2f2f2; } .product-list .section2 form { position: absolute; right: 0; top: 0; width: 320px; height: 50px; border: 1px solid #e6e6e6; margin-top: -10px; background-color: #fff; } .product-list .section2 form input { display: block; width: 100%; height: 100%; padding: 0 24px; font-size: 16px; color: #808080; } .product-list .section2 form button { width: 48px; height: 48px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product/icon-2.png"); position: absolute; right: 0; top: 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; } .product-list .section2 form button:hover { background-image: url("../images/product/icon-2-on.png"); } .product-list .section2 .items { margin: 40px -10px 4vw; font-size: 0; } .product-list .section2 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 20px 10px 0; 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; } @media screen and (min-width: 992px) { .product-list .section2 .item:nth-of-type(1), .product-list .section2 .item:nth-of-type(2), .product-list .section2 .item:nth-of-type(3) { margin-top: 0; } } .product-list .section2 .item .img-box { height: 260px; text-align: center; } .product-list .section2 .item img { width: auto; max-width: 70%; max-height: 70%; } .product-list .section2 .item .txt-box { border-top: 1px solid #eeeeee; padding: 1.5vw 2vw 2.5vw; } .product-list .section2 .item h3 { font-size: 20px; color: #333; 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; } .product-list .section2 .item p { font-size: 16px; line-height: 24px; color: #666666; height: 48px; overflow: hidden; margin-top: 10px; } .product-list .section2 .item span { display: block; width: 160px; text-align: center; margin-top: 2vw; font-size: 16px; line-height: 44px; color: #111; border: 1px solid #dcdcdc; background-color: #eeeeee; -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) { .product-list .section2 .item:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .product-list .section2 .item:hover h3 { color: #004ea2; } .product-list .section2 .item:hover span { background-color: #004ea2; color: #fff; border-color: #004ea2; } } .product-list .section2 .comm-pages ul li input { background-color: #fff; } .product-detail .inner-banner .wrapper { width: 100%; max-width: 100%; padding: 0 5vw; text-align: left; } .product-detail .inner-banner p { font-size: 20px; } .product-detail .section1 { padding: 6vw 0; font-size: 0; } .product-detail .section1 .img-box { display: inline-block; vertical-align: middle; width: 38%; height: 30vw; background-color: #f5f5f5; text-align: center; } .product-detail .section1 .txt-box { display: inline-block; vertical-align: middle; width: 62%; padding-left: 6vw; } .product-detail .section1 img { width: auto; max-width: 100%; max-height: 100%; } .product-detail .section1 .inner-tit { font-weight: bold; } .product-detail .section1 .para { font-size: 16px; line-height: 2; color: #999999; margin-top: 1.5vw; } .product-detail .section1 h4 { margin-top: 4vw; font-size: 24px; line-height: 1.2; color: #333; } .product-detail .section1 .inner-btn { margin-top: 2vw; } .product-detail .section1 .txt_box { overflow-y:auto; } .product-detail .section1 .inner-btn:after { display: none; } .product-detail .section2 { padding: 6vw 0; background-color: #004ea2; } .product-detail .section2 .para { margin-top: 4vw; font-size: 0; } .product-detail .section2 p { display: inline-block; vertical-align: top; width: calc(50% - 3vw); padding-left: 30px; position: relative; font-size: 18px; line-height: 2; color: #fff; margin-top: 20px; } @media screen and (min-width: 992px) { .product-detail .section2 p:nth-of-type(1), .product-detail .section2 p:nth-of-type(2) { margin-top: 0; } .product-detail .section2 p:nth-of-type(odd) { margin-right: 3vw; } .product-detail .section2 p:nth-of-type(even) { margin-left: 3vw; } } .product-detail .section2 p span { position: absolute; left: 0; top: 0; } .product-detail .section3 { padding: 6vw 0; } .product-detail .section4 { padding: 4.5vw 0; background-color: #f5f5f5; } .product-detail .section4 .slick { margin-top: 3.5vw; } .product-detail .section4 .item { font-size: 0; background-color: #fff; } .product-detail .section4 .item .img-box { width: 33%; display: inline-block; vertical-align: middle; max-width: 440px; overflow: hidden; } .product-detail .section4 .item .txt-box { width: 67%; display: inline-block; vertical-align: middle; padding: 0 4vw; } .product-detail .section4 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .product-detail .section4 .item h3 { font-size: 24px; line-height: 1.2; color: #333; } .product-detail .section4 .item p { font-size: 16px; line-height: 2; color: #999999; margin-top: 20px; } .product-detail .section4 .slick-dots { margin-top: 24px; font-size: 0; text-align: center; } .product-detail .section4 .slick-dots li { display: inline-block; vertical-align: top; width: 14px; height: 14px; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 50%; margin: 0 8px; -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; } .product-detail .section4 .slick-dots li.slick-active { background-color: #004ea2; border-color: #004ea2; } .product-detail .section4 .slick-dots button { display: none; } .product-detail .section5 { padding: 6vw 0; } .product-detail .section5 .items { margin: 3vw -14px 0; font-size: 0; } .product-detail .section5 .item { display: inline-block; vertical-align: top; width: calc(25% - 28px); margin: 28px 14px 0; border: 1px solid #e6e6e6; -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) { .product-detail .section5 .item:nth-of-type(1), .product-detail .section5 .item:nth-of-type(2), .product-detail .section5 .item:nth-of-type(3), .product-detail .section5 .item:nth-of-type(4) { margin-top: 0; } } .product-detail .section5 .item a { display: block; padding: 1.5vw 2.5vw; position: relative; } .product-detail .section5 .item a:after { content: ''; width: 15px; height: 30px; position: absolute; right: calc(2.5vw - 15px); top: 50%; margin-top: -15px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product/icon-3.png"); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; display: none; } .product-detail .section5 .item h3 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .product-detail .section5 .item p { font-size: 16px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (min-width: 992px) { .product-detail .section5 .item:hover { background-color: #004ea2; } .product-detail .section5 .item:hover a:after { background-image: url("../images/product/icon-3-on.png"); -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .product-detail .section5 .item:hover h3, .product-detail .section5 .item:hover p { color: #fff; } } /* search */ .search-page .wrapper { max-width: 1080px; } .search-page .section1 { padding: 9vw 0; background-color: #004ea2; } .search-page .section1 h3 { text-align: center; font-size: 60px; color: #fff; line-height: 1.2; } .search-page .section1 form { display: block; position: relative; height: 60px; padding-right: 90px; margin: 2vw auto 0; background-color: #fff; } .search-page .section1 form input { display: block; width: 100%; height: 100%; padding: 0 20px; font-size: 16px; color: #666; background-color: transparent; } .search-page .section1 form button { position: absolute; right: 0; top: 0; width: 90px; height: 60px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-image: url("../images/search-1.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; } .search-page .section1 form button:hover { background-image: url("../images/search-1-on.png"); } .search-page .section1 .cate { font-size: 0; text-align: center; margin-top: 2.5vw; } .search-page .section1 .cate a { display: inline-block; vertical-align: top; font-size: 18px; color: #fff; margin: 0 1.5vw; position: relative; padding-left: 30px; } .search-page .section1 .cate a.active i { background-color: #004ea2; } .search-page .section1 .cate a.active i:after { opacity: 1; } .search-page .section1 .cate i { width: 16px; height: 16px; position: absolute; left: 0; top: 50%; margin-top: -8px; border-radius: 50%; background-color: #fff; border: 1px solid #fff; } .search-page .section1 .cate i:after { content: ''; width: 6px; height: 6px; background-color: #fff; position: absolute; top: 50%; left: 50%; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; } .search-page .section2 { padding: 4.5vw 0 6vw; } .search-page .section2 .tip { font-size: 18px; color: #4b4c4e; } .search-page .section2 .tip span { color: #004ea2; } .search-page .section2 .items { margin: 3.5vw 0; border-top: 1px solid #dfdfdf; } .search-page .section2 .item { position: relative; border-bottom: 1px solid #dfdfdf; } .search-page .section2 .item a { display: block; padding: 2vw 5vw 2vw 0; } .search-page .section2 .item .date { font-size: 16px; color: #92959c; } .search-page .section2 .item h3 { font-size: 20px; line-height: 1.2; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 15px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .search-page .section2 .item p { font-size: 16px; line-height: 2; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-page .section2 .item:before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 5px; background-color: #004ea2; transform-origin: left center; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; transition: transform 0.5s ease; } .search-page .section2 .item:after { content: ''; position: absolute; right: 1.5vw; top: 50%; margin-top: -11px; width: 27px; height: 22px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/search-2.png"); -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) { .search-page .section2 .item:hover h3 { color: #004ea2; } .search-page .section2 .item:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .search-page .section2 .item:hover:after { background-image: url("../images/search-2-on.png"); } } /* investor */ .investor-govern .section1 { padding: 6vw 0; font-size: 0; } .investor-govern .section1 .txt-box { width: 50%; display: inline-block; vertical-align: top; padding-right: 6vw; padding-top: 4.5vw; } .investor-govern .section1 .para { margin-top: 2vw; font-size: 16px; line-height: 30px; color: #808080; text-align: justify; } .investor-govern .section1 .img-box { display: inline-block; vertical-align: top; width: 50%; } .investor-govern .section1 .img-box img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .investor-govern .section1 .img-box:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .investor-govern .section2 { padding: 6vw 0 4.5vw; background-color: #f2f2f2; } .investor-govern .section2 img { display: block; margin: 0 auto; max-width: 1200px; width: 90%; } .investor-stock .section1 { padding: 6vw 0; font-size: 0; } .investor-stock .section1 .wrapper { -webkit-display: flex; display: flex; } .investor-stock .section1 .left-box { display: inline-block; vertical-align: top; width: 68%; padding-right: 2vw; } .investor-stock .section1 .top-box { background-color: #f8f8f8; border: 1px solid #e6e6e6; padding: 2vw; } .investor-stock .section1 .top-box .tip { font-size: 14px; color: #333; opacity: .5; margin-top: 2vw; } .investor-stock .section1 .data-item { font-size: 0; } .investor-stock .section1 .data-item .item { width: 16%; display: inline-block; vertical-align: top; } .investor-stock .section1 .data-item .item .label { font-size: 16px; color: #333; opacity: .5; } .investor-stock .section1 .data-item .item .data { display: block; font-size: 32px; line-height: 1; color: #333; margin-top: 24px; font-family: 'DINEngschrift'; } .investor-stock .section1 .data-item .item .stock { margin-top: 5px; } .investor-stock .section1 .data-item .item .stock span { display: inline-block; vertical-align: bottom; } .investor-stock .section1 .data-item .item .stock.red span.icon { background-image: url("../images/investor/icon-1.png"); } .investor-stock .section1 .data-item .item .stock.red span.num, .investor-stock .section1 .data-item .item .stock.red span.unit { color: #e8233a; } .investor-stock .section1 .data-item .item span.num { font-size: 54px; line-height: 1; font-family: 'DINEngschrift'; } .investor-stock .section1 .data-item .item span.icon { width: 16px; height: 13px; background-position: center; background-repeat: no-repeat; margin: 0 10px 10px; } .investor-stock .section1 .data-item .item span.unit { font-size: 26px; line-height: 1; font-family: 'DINEngschrift'; margin-bottom: 5px; } .investor-stock .section1 .data-item .item:nth-of-type(1) { width: 36%; } .investor-stock .section1 .data-item .item:nth-of-type(1) .label { opacity: 1; } .investor-stock .section1 .tab-tit { margin-top: 24px; } .investor-stock .section1 .tab-tit span { display: inline-block; vertical-align: top; width: 20%; font-size: 14px; line-height: 48px; text-align: center; border: 1px solid #e6e6e6; border-bottom: none; margin-left: -1px; background-color: #f8f8f8; 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; } .investor-stock .section1 .tab-tit span:hover, .investor-stock .section1 .tab-tit span.active { background-color: #004ea2; color: #fff; } .investor-stock .section1 .tab-cont { padding: 2vw; border: 1px solid #e6e6e6; border-top: 2px solid #004ea2; } .investor-stock .section1 .tab-cont .child { display: none; } .investor-stock .section1 .tab-cont .child.active { display: block; } .investor-stock .section1 .tab-cont .child img { display: block; width: 100%; max-width: 795px; } .investor-stock .section1 .right-box { width: 32%; display: inline-block; vertical-align: top; background-color: #005aaa; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/investor/img-3.jpg"); background-size: 100% auto; } .investor-stock .section1 .right-box h3 { text-align: center; font-size: 22px; color: #fff; line-height: 90px; background-color: rgba(0, 0, 0, 0.1); } .investor-stock .section1 .right-box .para { padding: 4vw; font-size: 16px; line-height: 36px; color: #fff; } .investor-interactive .section1 { padding: 6vw 0 4vw; } .investor-interactive .section1 .slick { margin: 2vw -14px 0; } .investor-interactive .section1 .items { font-size: 0; } .investor-interactive .section1 .item { display: inline-block; vertical-align: top; width: calc(33.3% - 28px); margin: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 1.56vw; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor-interactive .section1 .item .date { font-size: 14px; color: #666; background-position: right center; background-repeat: no-repeat; background-image: url("../images/investor/icon-3.png"); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor-interactive .section1 .item .tit { margin-top: 1vw; padding-top: 1vw; border-top: 1px solid #dcdcdc; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor-interactive .section1 .item h3 { font-size: 18px; color: #111; line-height: 30px; height: 60px; overflow: hidden; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (min-width: 992px) { .investor-interactive .section1 .item:hover { background-color: #004ea2; } .investor-interactive .section1 .item:hover .date { color: #fff; background-image: url("../images/investor/icon-4.png"); } .investor-interactive .section1 .item:hover .tit { border-color: #dcdcdc; } .investor-interactive .section1 .item:hover h3 { color: #fff; } } .investor-interactive .section1 .slick-dots { margin-top: 2vw; font-size: 0; text-align: center; } .investor-interactive .section1 .slick-dots li { display: inline-block; vertical-align: top; width: 14px; height: 14px; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 50%; margin: 0 8px; -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; } .investor-interactive .section1 .slick-dots li.slick-active { background-color: #004ea2; border-color: #004ea2; } .investor-interactive .section1 .slick-dots button { display: none; } .investor-interactive .section2 { padding: 6vw 0; background-color: #f0f0f0; } .investor-interactive .section2 .tip { font-size: 16px; line-height: 24px; color: #666666; margin-top: 20px; } .investor-interactive .section2 form { margin-top: 2vw; font-size: 0; } .investor-interactive .section2 form .box { display: inline-block; vertical-align: top; width: calc(50% - 18px); position: relative; } .investor-interactive .section2 form .box:nth-of-type(1) { margin-right: 36px; } .investor-interactive .section2 form .box i { width: 33px; height: 33px; background-position: left center; background-repeat: no-repeat; position: absolute; left: 0; top: 50%; margin-top: -16px; 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; } .investor-interactive .section2 form .box span { position: absolute; left: 0; font-size: 18px; color: #474747; line-height: 70px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor-interactive .section2 form .box input { display: block; width: 100%; height: 70px; border-bottom: 1px solid #b5b5b5; font-size: 18px; color: #333; padding-left: 100px; background-color: transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor-interactive .section2 form .box input:focus { border-color: #004ea2; } .investor-interactive .section2 form .box.focus i { opacity: 1; } .investor-interactive .section2 form .box.focus span { left: 50px; } .investor-interactive .section2 form textarea { display: block; width: 100%; height: 160px; font-size: 18px; line-height: 24px; color: #333; background-color: transparent; font-family: 'Microsoft HaHei'; margin-top: 2vw; border-bottom: 1px solid #b5b5b5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .investor-interactive .section2 form textarea:focus { border-color: #004ea2; } .investor-interactive .section2 form button { margin-top: 2vw; cursor: pointer; } .investor-interactive .section2 form button:after { display: none; } /* solution */ .solution-case-list .section1 { padding: 6vw 0; } .solution-case-list .section1 .items { margin: 0 -10px 4vw; font-size: 0; } .solution-case-list .section1 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 2.5vw 10px 0; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } @media screen and (min-width: 992px) { .solution-case-list .section1 .item:nth-of-type(1), .solution-case-list .section1 .item:nth-of-type(2), .solution-case-list .section1 .item:nth-of-type(3) { margin-top: 0; } } .solution-case-list .section1 .item .img-box { overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .solution-case-list .section1 .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .solution-case-list .section1 .item h3 { font-size: 20px; line-height: 1.2; color: #333; margin-top: 1.5vw; 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; } @media screen and (min-width: 992px) { .solution-case-list .section1 .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .solution-case-list .section1 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .solution-case-list .section1 .item:hover h3 { color: #004ea2; } } .solution-list .section { padding: 6vw 0; } .solution-list .section .para { font-size: 16px; line-height: 2; margin-top: 10px; } .solution-list .section .items { margin: 2vw -10px 0; font-size: 0; } .solution-list .section .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 20px 10px 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } @media screen and (min-width: 992px) { .solution-list .section .item:nth-of-type(1), .solution-list .section .item:nth-of-type(2), .solution-list .section .item:nth-of-type(3) { margin-top: 0; } } .solution-list .section .item a { display: block; position: relative; } .solution-list .section .item a:after { content: ''; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); z-index: 1; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .solution-list .section .item a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1; 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; } .solution-list .section .item .img-box { overflow: hidden; } .solution-list .section .item .txt-box { position: absolute; left: 2vw; right: 2vw; bottom: 2.5vw; z-index: 2; -webkit-transform: translateY(118px); -moz-transform: translateY(118px); -ms-transform: translateY(118px); transform: translateY(118px); -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .solution-list .section .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .solution-list .section .item h3 { font-size: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .solution-list .section .item p { font-size: 14px; line-height: 24px; color: #fff; height: 48px; overflow: hidden; margin: 15px 0; 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; } .solution-list .section .item span { display: block; width: 160px; line-height: 40px; font-size: 14px; text-align: center; background-color: #004ea2; text-align: center; color: #fff; 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; } @media screen and (min-width: 992px) { .solution-list .section .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .solution-list .section .item:hover a:after { opacity: 0; } .solution-list .section .item:hover a:before { opacity: 1; } .solution-list .section .item:hover .txt-box { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .solution-list .section .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .solution-list .section .item:hover p, .solution-list .section .item:hover span { opacity: 1; } } .solution-list .section:nth-of-type(1) .inner-tit, .solution-list .section:nth-of-type(2) .inner-tit, .solution-list .section:nth-of-type(5) .inner-tit { color: #111111; } .solution-list .section:nth-of-type(1) .para, .solution-list .section:nth-of-type(2) .para, .solution-list .section:nth-of-type(5) .para { color: #666; } .solution-list .section:nth-of-type(2), .solution-list .section:nth-of-type(6) { background-color: #004ea2; } .solution-list .section:nth-of-type(2) .inner-tit, .solution-list .section:nth-of-type(6) .inner-tit { color: #fff; } .solution-list .section:nth-of-type(2) .para, .solution-list .section:nth-of-type(6) .para { color: #fff; } .solution-list .section:nth-of-type(4) { background-color: #f7f7f7; } .solution-list .section:nth-of-type(4) .inner-tit { color: #111111; } .solution-list .section:nth-of-type(4) .para { color: #666; } .solution-case-detail .inner-banner .wrapper { width: 100%; max-width: 100%; padding: 0 8vw; text-align: left; } .solution-case-detail .inner-banner a.btn { display: none; } .solution-case-detail .comm-crumbs { position: absolute; left: 9vw; top: 2vw; } .solution-case-detail .section1 { padding: 6vw 0; font-size: 0; } .solution-case-detail .section1 .left-box { width: 68%; display: inline-block; vertical-align: top; } .solution-case-detail .section1 .left-box .box { margin-top: 3vw; } .solution-case-detail .section1 .left-box .box:nth-of-type(1) { margin-top: 0; } .solution-case-detail .section1 .left-box .tit { font-size: 24px; color: #111; line-height: 1.2; } .solution-case-detail .section1 .left-box .para { font-size: 16px; line-height: 32px; color: #666; margin-top: 20px; } .solution-case-detail .section1 .left-box .cont { margin-top: 20px; } .solution-case-detail .share-box { position: absolute; top: 0; left: -5vw; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .solution-case-detail .share-box.visi { opacity: 0; } .solution-case-detail .share-box a.tat { display: block; width: 40px; position: relative; } .solution-case-detail .share-box a.tat:hover .tel { opacity: 1; visibility: visible; } .solution-case-detail .share-box i { display: block; width: 40px; height: 40px; background-color: #004ea2; background-position: center; background-repeat: no-repeat; background-image: url("../images/solution/icon-1.png"); border-radius: 50%; position: relative; z-index: 2; } .solution-case-detail .share-box span { display: block; font-size: 14px; line-height: 18px; color: #636363; text-align: center; margin-top: 5px; position: relative; z-index: 2; } .solution-case-detail .share-box .tel { position: absolute; left: 20px; top: 0; background-color: #004ea2; font-size: 14px; line-height: 40px; color: #fff; padding: 0 20px 0 40px; border-radius: 0 20px 20px 0; white-space: nowrap; z-index: 1; 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-case-detail .share-box .share a { display: block; padding: 0; float: none; width: 40px; height: 40px; margin: 10px 0 0 0; background-color: #f7f7f7; background-position: center; background-repeat: no-repeat; 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; } .solution-case-detail .share-box .share a[data-cmd='weixin'] { background-image: url("../images/news/share-2.png"); } .solution-case-detail .share-box .share a[data-cmd='weixin']:hover { background-image: url("../images/news/share-2-on.png"); } .solution-case-detail .share-box .share a[data-cmd='tsina'] { background-image: url("../images/news/share-3.png"); } .solution-case-detail .share-box .share a[data-cmd='tsina']:hover { background-image: url("../images/news/share-3-on.png"); } .solution-case-detail .share-box .share a[data-cmd='sqq'] { background-image: url("../images/news/share-4.png"); } .solution-case-detail .share-box .share a[data-cmd='sqq']:hover { background-image: url("../images/news/share-4-on.png"); } .solution-detail2 .inner-banner .wrapper { width: 100%; max-width: 100%; padding: 0 5vw; text-align: left; } .solution-detail2 .inner-banner p { font-size: 18px; line-height: 2; } .solution-detail2 .section3 { padding: 6vw 0; } .solution-detail2 .section3 .items { margin-top: 3vw; } .solution-detail2 .section3 .item { position: relative; } .solution-detail2 .section3 .item .img-box { width: 50%; overflow: hidden; } .solution-detail2 .section3 .item 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; } .solution-detail2 .section3 .item .txt-box { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0 3vw; } .solution-detail2 .section3 .item .para { font-size: 16px; line-height: 2; color: #999; } @media screen and (min-width: 992px) { .solution-detail2 .section3 .item:nth-of-type(odd) .img-box { margin-left: 50%; } .solution-detail2 .section3 .item:nth-of-type(odd) .txt-box { left: 0; } .solution-detail2 .section3 .item:nth-of-type(even) .txt-box { right: 0; } .solution-detail2 .section3 .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } .solution-detail1 .inner-banner .wrapper { width: 100%; max-width: 100%; padding: 0 5vw; text-align: left; } .solution-detail1 .inner-banner p { font-size: 18px; line-height: 2; } .solution-detail1 .section5 { padding: 6vw 0; } .solution-detail1 .section5 .slick { margin-top: 2.5vw; } .solution-detail1 .section7 { padding: 6vw 0; } .solution-detail1 .section7 .items { margin-top: 2.5vw; } .solution-detail3 .inner-banner .wrapper { width: 100%; max-width: 100%; padding: 0 5vw; text-align: left; } .solution-detail3 .inner-banner p { font-size: 18px; line-height: 2; } .solution-detail3 .section5 { padding: 6vw 0; } .solution-detail3 .section5 .tab-tit { font-size: 0; text-align: center; margin-top: 2vw; } .solution-detail3 .section5 .tab-tit span { display: inline-block; vertical-align: top; margin: 0 14px; font-size: 18px; line-height: 48px; color: #111; border-radius: 24px; padding: 0 35px; border: 1px solid #e5e5e5; background-color: #f8f8f8; -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; } .solution-detail3 .section5 .tab-tit span:hover, .solution-detail3 .section5 .tab-tit span.active { background-color: #004ea2; border-color: #004ea2; color: #fff; } .solution-detail3 .section5 .tab-cont { margin-top: 2.5vw; } .solution-detail3 .section5 .tab-cont .child { height: 0; overflow: hidden; } .solution-detail3 .section5 .tab-cont .child.active { height: auto; } .solution-detail3 .section7 { padding: 6vw 0; } .solution-detail3 .section7 .tab-tit { font-size: 0; text-align: center; } .solution-detail3 .section7 .tab-tit span { display: inline-block; vertical-align: top; margin: 0 14px; font-size: 18px; line-height: 48px; color: #111; border-radius: 24px; padding: 0 35px; border: 1px solid #e5e5e5; background-color: #f8f8f8; -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; } .solution-detail3 .section7 .tab-tit span:hover, .solution-detail3 .section7 .tab-tit span.active { background-color: #004ea2; border-color: #004ea2; color: #fff; } .solution-detail3 .section7 .tab-cont { margin-top: 2vw; } .solution-detail3 .section7 .tab-cont .child { display: none; } .solution-detail3 .section7 .tab-cont .child.active { display: block; } .solution-detail3 .section7 .news-box { font-size: 0; margin: 0 -10px; } .solution-detail3 .section7 .news-box .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 3vw 10px 0; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } @media screen and (min-width: 992px) { .solution-detail3 .section7 .news-box .item:nth-of-type(1), .solution-detail3 .section7 .news-box .item:nth-of-type(2), .solution-detail3 .section7 .news-box .item:nth-of-type(3) { margin-top: 0; } } .solution-detail3 .section7 .news-box .item .img-box { overflow: hidden; } .solution-detail3 .section7 .news-box .item img { display: block; width: 100%; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .solution-detail3 .section7 .news-box .item h3 { font-size: 20px; line-height: 30px; color: #111; height: 60px; overflow: hidden; margin: 1vw 0; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .solution-detail3 .section7 .news-box .item .date { font-size: 14px; color: #999; font-family: 'Arial'; } @media screen and (min-width: 992px) { .solution-detail3 .section7 .news-box .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .solution-detail3 .section7 .news-box .item:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .solution-detail3 .section7 .news-box .item:hover h3 { color: #004ea2; } } .solution-detail3 .section8 { background-color: #f2f2f2; } /* service */ .service-page .section1 { padding: 6vw 0; } .service-page .section1 .items { font-size: 0; margin-top: 2.5vw; display: flex; } .service-page .section1 .item { display: inline-block; vertical-align: top; width: calc(50% - 15px); border: 1px solid #e6e6e6; padding: 4vw 5vw; 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; } @media screen and (min-width: 992px) { .service-page .section1 .item:nth-of-type(2) { margin-left: 30px; } } .service-page .section1 .item i { display: block; height: 4.166vw; background-position: center; background-repeat: no-repeat; background-size: contain; } .service-page .section1 .item h3 { font-size: 24px; line-height: 1.2; color: #333; margin-top: 10px; } .service-page .section1 .item p { font-size: 16px; line-height: 24px; color: #333; margin-top: 1.5vw; } @media screen and (min-width: 992px) { .service-page .section1 .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } } .service-page .section2 { padding: 6vw 0; background-color: #004ea2; } .service-page .section2 .items { font-size: 0; margin-top: 2.5vw; display: flex; } .service-page .section2 .item { display: inline-block; vertical-align: top; width: calc(50% - 15px); padding: 3.5vw 3vw; 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; } @media screen and (min-width: 992px) { .service-page .section2 .item:nth-of-type(2) { margin-left: 30px; } } .service-page .section2 .item .box { position: relative; padding-right: 8vw; padding-bottom: 6vw; height: 100%; } .service-page .section2 .item i { position: absolute; right: 0; top: 0; width: 4.68vw; height: 5.2vw; background-position: center top; background-repeat: no-repeat; background-size: contain; } .service-page .section2 .item h3 { font-size: 24px; line-height: 1.2; color: #111; } .service-page .section2 .item h3.color { color: #004ea2; } .service-page .section2 .item p { font-size: 16px; line-height: 24px; color: #333333; margin-top: 20px; } .service-page .section2 .item .absolute { position: absolute; left: 0; right: 0; bottom: 0; } .service-page .section2 .item .tel { font-size: 48px; line-height: 1; color: #004ea2; font-family: 'DINPro-Medium'; } @media screen and (min-width: 992px) { .service-page .section2 .item:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } } .service-page .section3 { padding: 6vw 0; } .service-page .section3 .items { font-size: 0; margin: 2.5vw -10px 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .service-page .section3 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 20px 10px 0; border: 1px solid #e6e6e6; padding: 3vw 2vw; -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) { .service-page .section3 .item:nth-of-type(1), .service-page .section3 .item:nth-of-type(2), .service-page .section3 .item:nth-of-type(3) { margin-top: 0; } } .service-page .section3 .item i { display: block; height: 4.166vw; 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; } .service-page .section3 .item h3 { font-size: 24px; color: #333; line-height: 1.2; text-align: center; margin: 3vw 0 1.5vw; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .service-page .section3 .item p { font-size: 16px; line-height: 24px; color: #808080; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .service-page .section3 .item:nth-of-type(1) i { background-image: url("../images/service/icon-5-1.png"); } @media screen and (min-width: 992px) { .service-page .section3 .item:nth-of-type(1):hover i { background-image: url("../images/service/icon-5-1-on.png"); } } .service-page .section3 .item:nth-of-type(2) i { background-image: url("../images/service/icon-5-2.png"); } @media screen and (min-width: 992px) { .service-page .section3 .item:nth-of-type(2):hover i { background-image: url("../images/service/icon-5-2-on.png"); } } .service-page .section3 .item:nth-of-type(3) i { background-image: url("../images/service/icon-5-3.png"); } @media screen and (min-width: 992px) { .service-page .section3 .item:nth-of-type(3):hover i { background-image: url("../images/service/icon-5-3-on.png"); } } .service-page .section3 .item:nth-of-type(4) i { background-image: url("../images/service/icon-5-4.png"); } @media screen and (min-width: 992px) { .service-page .section3 .item:nth-of-type(4):hover i { background-image: url("../images/service/icon-5-4-on.png"); } } .service-page .section3 .item:nth-of-type(5) i { background-image: url("../images/service/icon-5-5.png"); } @media screen and (min-width: 992px) { .service-page .section3 .item:nth-of-type(5):hover i { background-image: url("../images/service/icon-5-5-on.png"); } } .service-page .section3 .item:nth-of-type(6) i { background-image: url("../images/service/icon-5-6.png"); } @media screen and (min-width: 992px) { .service-page .section3 .item:nth-of-type(6):hover i { background-image: url("../images/service/icon-5-6-on.png"); } } @media screen and (min-width: 992px) { .service-page .section3 .item:hover { background-color: #004ea2; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 90, 170, 0.3); } .service-page .section3 .item:hover h3, .service-page .section3 .item:hover p { color: #fff; } } .service-page .section4 { background-color: #f7f7f7; padding: 6vw 0; } .service-page .section4 .map-box .child { display: none; } .service-page .section4 .china { position: relative; } .service-page .section4 .china img { display: block; width: 100%; } .service-page .section4 .china .dot { width: 13px; height: 15px; margin: -7px 0 0 -6px; position: absolute; } .service-page .section4 .china .dot i { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/service/map-icon-6.png"); position: relative; z-index: 2; } .service-page .section4 .china .dot:after { content: ''; width: 9px; height: 4px; background-color: #c6c6c6; border-radius: 50%; position: absolute; left: 2px; top: 13px; z-index: 1; } .service-page .section4 .china .dot .txt { position: absolute; font-size: 14px; color: #333; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; padding-top: 5px; z-index: 2; } .service-page .section4 .china .dot .circle span { position: absolute; border-radius: 50%; background-color: #005aaa; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; transition: transform 0.3s ease; } .service-page .section4 .china .dot .circle span:nth-of-type(1) { width: 7.5vw; height: 7.5vw; margin: -3.75vw 0 0 -3.75vw; top: 3vw; left: -2vw; opacity: .03; } .service-page .section4 .china .dot .circle span:nth-of-type(2) { width: 4vw; height: 4vw; margin: -2vw 0 0 -2vw; top: -1vw; left: 0; opacity: .1; } .service-page .section4 .china .dot .circle span:nth-of-type(3) { width: 5vw; height: 5vw; margin: -2.5vw 0 0 -2.5vw; top: 1vw; left: 2.5vw; opacity: .06; } .service-page .section4 .china .dot.heilongjiang { top: 18.4%; left: 71.52%; } .service-page .section4 .china .dot.heilongjiang i { opacity: .8; } .service-page .section4 .china .dot.jilin { top: 26%; left: 70%; } .service-page .section4 .china .dot.jilin i { opacity: .4; } .service-page .section4 .china .dot.beijing { top: 35.2%; left: 61.11%; } .service-page .section4 .china .dot.beijing i { opacity: .2; } .service-page .section4 .china .dot.beijing .txt { top: auto; bottom: 100%; padding-bottom: 5px; } .service-page .section4 .china .dot.baoding { top: 37.73%; left: 60.27%; } .service-page .section4 .china .dot.baoding i { opacity: .8; } .service-page .section4 .china .dot.shandong { top: 43.33%; left: 61.666%; } .service-page .section4 .china .dot.shandong i { opacity: .4; } .service-page .section4 .china .dot.nanjing { top: 54.13%; left: 63.61%; } .service-page .section4 .china .dot.nanjing i { opacity: .6; } .service-page .section4 .china .dot.shanghai { top: 56%; left: 66.25%; } .service-page .section4 .china .dot.shanghai i { opacity: .8; } .service-page .section4 .china .dot.shanghai .txt { top: auto; bottom: 100%; padding-bottom: 5px; } .service-page .section4 .china .dot.zhejiang { top: 60%; left: 65%; } .service-page .section4 .china .dot.zhejiang i { opacity: .2; } .service-page .section4 .china .dot.fujian { top: 67.73%; left: 63.9%; } .service-page .section4 .china .dot.fujian i { opacity: .8; } .service-page .section4 .china .dot.neimenggu { top: 32.8%; left: 56.38%; } .service-page .section4 .china .dot.neimenggu i { opacity: .4; } .service-page .section4 .china .dot.shanxi { top: 40.4%; left: 56.94%; } .service-page .section4 .china .dot.shanxi i { opacity: .6; } .service-page .section4 .china .dot.henan { top: 48%; left: 58.2%; } .service-page .section4 .china .dot.henan i { opacity: .6; } .service-page .section4 .china .dot.wuhan { top: 57.86%; left: 58.81%; } .service-page .section4 .china .dot.wuhan i { opacity: .4; } .service-page .section4 .china .dot.guangdong { top: 73.86%; left: 57.9%; } .service-page .section4 .china .dot.guangdong i { opacity: .6; } .service-page .section4 .china .dot.ningxia { top: 38.8%; left: 50.55%; } .service-page .section4 .china .dot.ningxia i { opacity: .8; } .service-page .section4 .china .dot.shanxi1 { top: 48.66%; left: 53.33%; } .service-page .section4 .china .dot.shanxi1 i { opacity: .2; } .service-page .section4 .china .dot.guizhou { top: 66.13%; left: 50.97%; } .service-page .section4 .china .dot.guizhou i { opacity: .8; } .service-page .section4 .china .dot.guangxi { top: 74.66%; left: 52.63%; } .service-page .section4 .china .dot.guangxi i { opacity: .2; } .service-page .section4 .china .dot.gansu { top: 44.8%; left: 48.2%; } .service-page .section4 .china .dot.gansu i { opacity: .4; } .service-page .section4 .china .dot.qinghai { top: 43.6%; left: 43.75%; } .service-page .section4 .china .dot.qinghai i { opacity: .2; } .service-page .section4 .china .dot.yunnan { top: 70.13%; left: 47.08%; } .service-page .section4 .china .dot.yunnan i { opacity: .4; } .service-page .section4 .china .dot.xinjiang { top: 25%; left: 31.38%; } .service-page .section4 .china .dot.xinjiang i { opacity: .6; } .service-page .section4 .china .dot.xizang { top: 58.93%; left: 34.93%; } .service-page .section4 .china .dot.xizang i { opacity: .6; } .service-page .section4 .china .dot:hover .circle span { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .service-page .section4 .oversea { position: relative; } .service-page .section4 .oversea img { display: block; width: 100%; } .service-page .section4 .oversea .dot { width: 22px; height: 25px; margin: -12px 0 0 -11px; position: absolute; } .service-page .section4 .oversea .dot i { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; position: relative; z-index: 2; } .service-page .section4 .oversea .dot .txt { position: absolute; top: 100%; left: 50%; font-size: 16px; line-height: 28px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; z-index: 2; } .service-page .section4 .oversea .dot .circle span { border-radius: 50%; position: absolute; -webkit-transition: transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .service-page .section4 .oversea .dot:nth-of-type(1) { top: 47.55%; left: 76.9%; } .service-page .section4 .oversea .dot:nth-of-type(1) i { background-image: url("../images/service/map-icon-1.png"); } .service-page .section4 .oversea .dot:nth-of-type(1) .txt { color: #64b400; } .service-page .section4 .oversea .dot:nth-of-type(1) .circle span { background-color: #64b400; } .service-page .section4 .oversea .dot:nth-of-type(1) .circle span:nth-of-type(1) { width: 7.5vw; height: 7.5vw; opacity: .1; top: 50%; left: 50%; margin: -3.75vw 0 0 -3.75vw; } .service-page .section4 .oversea .dot:nth-of-type(1) .circle span:nth-of-type(2) { width: 5vw; height: 5vw; opacity: .3; top: -3.5vw; left: 100%; margin: -2.5vw 0 0 -2.5vw; } .service-page .section4 .oversea .dot:nth-of-type(1) .circle span:nth-of-type(3) { width: 4vw; height: 4vw; opacity: .2; top: 3vw; left: -3vw; margin: -2vw 0 0 -2vw; } .service-page .section4 .oversea .dot:nth-of-type(2) { top: 36.08%; left: 53.87%; } .service-page .section4 .oversea .dot:nth-of-type(2) i { background-image: url("../images/service/map-icon-2.png"); } .service-page .section4 .oversea .dot:nth-of-type(2) .txt { color: #c42a28; } .service-page .section4 .oversea .dot:nth-of-type(2) .circle span { background-color: #c42a28; } .service-page .section4 .oversea .dot:nth-of-type(2) .circle span:nth-of-type(1) { width: 6vw; height: 6vw; opacity: .1; top: 50%; left: -2vw; margin: -3vw 0 0 -3vw; } .service-page .section4 .oversea .dot:nth-of-type(2) .circle span:nth-of-type(2) { width: 3.5vw; height: 3.5vw; opacity: .3; top: 1.3vw; left: 1.3vw; margin: -1.75vw 0 0 -1.75vw; } .service-page .section4 .oversea .dot:nth-of-type(3) { top: 61.538%; left: 53.87%; } .service-page .section4 .oversea .dot:nth-of-type(3) i { background-image: url("../images/service/map-icon-3.png"); } .service-page .section4 .oversea .dot:nth-of-type(3) .txt { color: #d37600; } .service-page .section4 .oversea .dot:nth-of-type(3) .circle span { background-color: #d37600; } .service-page .section4 .oversea .dot:nth-of-type(3) .circle span:nth-of-type(1) { width: 6vw; height: 6vw; opacity: .3; top: 20px; left: -8px; margin: -3vw 0 0 -3vw; } .service-page .section4 .oversea .dot:nth-of-type(3) .circle span:nth-of-type(2) { width: 4vw; height: 4vw; opacity: .15; top: 3.5vw; left: 10px; margin: -2vw 0 0 -2vw; } .service-page .section4 .oversea .dot:nth-of-type(4) { top: 71%; left: 31.12%; } .service-page .section4 .oversea .dot:nth-of-type(4) i { background-image: url("../images/service/map-icon-4.png"); } .service-page .section4 .oversea .dot:nth-of-type(4) .txt { color: #edae00; } .service-page .section4 .oversea .dot:nth-of-type(4) .circle span { background-color: #edae00; } .service-page .section4 .oversea .dot:nth-of-type(4) .circle span:nth-of-type(1) { width: 6vw; height: 6vw; opacity: .3; top: 2vw; left: 1.5vw; margin: -3vw 0 0 -3vw; } .service-page .section4 .oversea .dot:nth-of-type(4) .circle span:nth-of-type(2) { width: 5vw; height: 5vw; opacity: .2; top: 4.5vw; left: -1.5vw; margin: -2.5vw 0 0 -2.5vw; } .service-page .section4 .oversea .dot:nth-of-type(5) { top: 23.5%; left: 15.56%; } .service-page .section4 .oversea .dot:nth-of-type(5) i { background-image: url("../images/service/map-icon-5.png"); } .service-page .section4 .oversea .dot:nth-of-type(5) .txt { color: #43a9eb; } .service-page .section4 .oversea .dot:nth-of-type(5) .circle span { background-color: #43a9eb; } .service-page .section4 .oversea .dot:nth-of-type(5) .circle span:nth-of-type(1) { width: 9vw; height: 9vw; opacity: .3; top: 3vw; left: -10px; margin: -4.5vw 0 0 -4.5vw; } .service-page .section4 .oversea .dot:nth-of-type(5) .circle span:nth-of-type(2) { width: 5vw; height: 5vw; opacity: .2; top: 5vw; left: 2vw; margin: -2.5vw 0 0 -2.5vw; } .service-page .section4 .oversea .dot:nth-of-type(5) .circle span:nth-of-type(3) { width: 4vw; height: 4vw; opacity: .2; top: 3.5vw; left: 4.5vw; margin: -2vw 0 0 -2vw; } .service-page .section4 .oversea .dot:nth-of-type(5) .circle span:nth-of-type(4) { width: 5vw; height: 5vw; opacity: .1; top: -2vw; left: -3.5vw; margin: -2.5vw 0 0 -2.5vw; } .service-page .section4 .oversea .dot:hover .circle span { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } .service-page .section4 .cont { background-color: #fff; padding: 4vw 6vw; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); } .service-page .section4 .cont .child { display: none; } .service-page .section4 .cont .para { font-size: 16px; line-height: 24px; color: #666; } .service-page .section4 .tab-tit { text-align: center; font-size: 0; } .service-page .section4 .tab-tit span { display: inline-block; vertical-align: top; font-size: 24px; line-height: 1.2; padding-bottom: 10px; border-bottom: 2px solid transparent; color: #333; margin: 0 10px; 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; } .service-page .section4 .tab-tit span:hover, .service-page .section4 .tab-tit span.active { color: #004ea2; border-color: #004ea2; } .service-page .section4 .tab-cont { margin-top: 20px; } /* sitemap */ .sitemap-page .section1 { padding: 4vw 0; } .sitemap-page .section1 .item { padding: 2vw 0; border-bottom: 1px solid #e6e6e6; } .sitemap-page .section1 a.btn { display: inline-block; vertical-align: middle; width: calc((100% - 120px) / 6); max-width: 220px; line-height: 60px; font-size: 18px; text-align: center; -webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; } .sitemap-page .section1 h3 a.btn { display: block; background-color: #004ea2; color: #fff; } .sitemap-page .section1 .link { margin-top: 24px; font-size: 0; } .sitemap-page .section1 .link a.btn { background-color: #e6e6e6; margin-right: 24px; margin-top: 24px; color: #666; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (min-width: 992px) { .sitemap-page .section1 .link a.btn:nth-of-type(1), .sitemap-page .section1 .link a.btn:nth-of-type(2), .sitemap-page .section1 .link a.btn:nth-of-type(3), .sitemap-page .section1 .link a.btn:nth-of-type(4), .sitemap-page .section1 .link a.btn:nth-of-type(5), .sitemap-page .section1 .link a.btn:nth-of-type(6) { margin-top: 0; } .sitemap-page .section1 .link a.btn:nth-of-type(6n) { margin-right: 0; } .sitemap-page .section1 .link a.btn:hover { background-color: #004ea2; color: #fff; } } @media screen and (max-width: 1600px) { .index-main .section1 .item h3, .inner-banner h3, .about-index .section1 .data .item .num span, .search-page .section1 h3 { font-size: 50px; } .index-main .section1 .item p { font-size: 24px; } .inner-tit { font-size: 30px; } .inner-btn, .about-index .section5 a { width: 150px; line-height: 44px; } .index-main .section2 .en { font-size: 18px; } .index-main .section2 .data .item .num span { font-size: 40px; } .index-tit h3 { font-size: 24px; } .index-main .section3 .item h3 { font-size: 18px; } .index-main .section4 .right-block .txt-block .item h3, .index-main .section4 .right-block .img-block h3 { font-size: 16px; } .index-main .section4 .left-block h3 { font-size: 18px; } .comm-subnav .nav a { line-height: 66px; } .comm-subnav .crumbs a, .comm-subnav .crumbs span { line-height: 70px; } .comm-subnav .crumbs span { font-size: 20px; } .about-contact .section1 .item .img-box h3 { font-size: 18px; } .about-contact .section1 .item .txt-box h3 { font-size: 15px; } .about-contact .section1 .item .txt-box .addr, .about-contact .section1 .item .txt-box .tel { font-size: 13px; background-size: auto 20px; padding-left: 30px; } .about-contact .section2 .item h3 { font-size: 18px; } .about-contact .section2 .item p { font-size: 14px; } .about-culture .section1 .item h3 { font-size: 24px; } .about-culture .section2 .tab-tit span { font-size: 16px; line-height: 40px; width: 140px; } .about-culture .section2 .tab-cont h3 { font-size: 24px; } .about-culture .section2 .tab-cont .para { line-height: 2; } .about-honor .section1 .link-box a { font-size: 18px; } .comm-section1 .item h3 { font-size: 16px; } .inner-banner p { font-size: 24px; } .about-index .section2 .item h3 { font-size: 20px; } .about-index .section2 .item p { margin-top: 10px; } .about-index .section4 .item h3 { font-size: 18px; } .about-index .section5 .item h3 { font-size: 24px; } .about-index .section5 .item p { font-size: 14px; } .about-index .section5 a { margin-top: -22px; } .about-index .section5 .item h4 { font-size: 18px; } .about-legal .section1 .para h3 { font-size: 18px; } .investor-interactive .section1 .item h3 { font-size: 16px; line-height: 24px; height: 48px; } .investor-interactive .section2 form .box i { width: 28px; height: 28px; background-size: contain; } .investor-interactive .section2 form .box input, .investor-interactive .section2 form .box span, .investor-interactive .section2 form textarea { font-size: 16px; } .investor-stock .section1 .right-box h3 { font-size: 18px; line-height: 70px; } .investor-stock .section1 .right-box .para { padding: 3vw; font-size: 14px; line-height: 2; } .investor-stock .section1 .data-item .item .data { font-size: 28px; } .investor-stock .section1 .data-item .item span.num { font-size: 46px; } .investor-stock .section1 .data-item .item span.unit { font-size: 20px; margin-bottom: 7px; } .investor-stock .section1 .data-item .item .data { margin-top: 20px; } .news-company .section1 .item h3, .solution-detail3 .section7 .news-box .item h3 { font-size: 18px; line-height: 26px; height: 54px; } .news-company .section1 .item .date { font-size: 14px; margin-top: 20px; } .news-party .section1 .item h3 { font-size: 18px; } .news-party .section1 .item .date span { font-size: 40px; } .news-detail .section2 .tit-box h3 { font-size: 24px; } .comm-right-box h3 { font-size: 18px; line-height: 50px; } .product-detail .section1 h4 { font-size: 20px; } .product-detail .section2 p { font-size: 16px; } .product-detail .section4 .item h3 { font-size: 20px; } .product-detail .section5 .item h3 { font-size: 16px; } .product-detail .section5 .item p { font-size: 14px; } .product-detail .section5 .item a:after { width: 12px; height: 24px; background-size: contain; } .product-list .section2 .item h3 { font-size: 18px; } .product-list .section2 .item span { width: 140px; line-height: 40px; } .product-list .section1 .item .label { font-size: 18px; } .recruit-campus .section1 .item h3 { font-size: 18px; line-height: 26px; } .recruit-campus .section1 .item .label, .recruit-campus .section1 .item span.recruit-popups-btn { font-size: 14px; line-height: 24px; } .recruit-detail .section1 .top-box h3 { font-size: 24px; } .recruit-detail .section1 .box .tit { font-size: 18px; } .recruit-detail .section1 .box .para { line-height: 2; } .recruit-idea .section1 .item h3, .recruit-idea .section2 .item h3 { font-size: 24px; } .recruit-social .section1 .item h3 { font-size: 18px; } .recruit-social .section1 .item span { font-size: 16px; } .search-page .section1 form { height: 50px; } .search-page .section1 form button { height: 50px; } .solution-list .section .item h3 { font-size: 18px; } .solution-list .section .item p { margin: 10px 0; } .solution-list .section .item span { width: 140px; } .solution-case-list .section1 .item h3 { font-size: 18px; } .solution-case-detail .section1 .left-box .tit { font-size: 20px; } .comm-section4 .txt-box p { font-size: 16px; margin-top: 15px; padding-left: 50px; } .comm-section4 .txt-box span { font-size: 26px; } .comm-section5 .item h3 { font-size: 16px; } .comm-section3 .item h3 { font-size: 16px; } .comm-section7 .item h3 { font-size: 18px; } .comm-section6 .item h3 { font-size: 20px; } .comm-section6 .item .para { font-size: 16px; } .comm-section8 .item h3 { font-size: 18px; } .product-detail .inner-banner p { font-size: 18px; } .solution-detail3 .section5 .tab-tit span, .solution-detail3 .section7 .tab-tit span { font-size: 16px; line-height: 40px; } .service-page .section1 .item h3 { font-size: 20px; } .service-page .section2 .item h3 { font-size: 20px; } .service-page .section2 .item .tel { font-size: 40px; } .service-page .section3 .item h3 { font-size: 20px; } .service-page .section4 .tab-tit span { font-size: 20px; } .sitemap-page .section1 a.btn { font-size: 16px; line-height: 50px; } } @media screen and (max-width: 1366px) { .inner-banner p { font-size: 20px; } .inner-tit { font-size: 26px; } .index-main .section1 .item h3, .inner-banner h3, .about-index .section1 .data .item .num span, .search-page .section1 h3 { font-size: 42px; } .index-main .section1 .item p { font-size: 20px; } .index-main .section2 .para { font-size: 14px; line-height: 24px; } .index-main .section2 .en { font-size: 16px; } .index-main .section2 .data .item .num span { font-size: 32px; } .index-main .section2 .data .item .num, .index-main .section2 .data .item p { font-size: 14px; } .index-tit p { font-size: 14px; } .index-main .section3 .index-tit a, .index-main .section4 .index-tit a { font-size: 14px; } .index-main .section3 .item h4 { font-size: 12px; } .index-main .section3 .item p { line-height: 20px; height: 80px; } .index-main .section4 .left-block h3 { font-size: 16px; } .index-main .section4 .left-block p { font-size: 14px; } .comm-subnav .crumbs a, .comm-subnav .crumbs span { line-height: 60px; } .comm-subnav .crumbs a { font-size: 20px; } .comm-subnav .crumbs span { font-size: 18px; } .comm-subnav .nav a { line-height: 56px; margin-left: 3vw; } .about-contact .section1 .item .txt-box .addr, .about-contact .section1 .item .txt-box .tel { font-size: 12px; margin-top: 5px; } .about-culture .section1 .item h3 { font-size: 20px; } .about-culture .section1 .item p { font-size: 14px; } .about-culture .section2 .tab-cont h3 { font-size: 20px; } .about-culture .section2 .tab-cont .para { font-size: 14px; } .about-honor .section1 .link-box a { font-size: 16px; line-height: 40px; width: 140px; } .about-index .section1 .left-box .para { font-size: 14px; line-height: 24px; } .about-index .section2 .item h3 { font-size: 18px; } .about-index .section2 .item p { font-size: 14px; } .about-index .section3 .item p { font-size: 14px; margin-top: 15px; } .about-index .section4 .item h3 { font-size: 16px; } .about-index .section4 .item p { font-size: 14px; background-size: auto 20px; } .about-index .section4 .slick-arrow, .comm-section1-slick .slick-arrow { width: 46px; height: 46px; margin-top: -23px; } .about-index .section5 .item i { width: 50px; height: 50px; background-size: contain; } .about-index .section5 .item .txt { width: calc(100% - 50px); } .about-index .section5 .item h3 { font-size: 20px; } .about-index .section5 .item h4 { font-size: 16px; } .about-index .section5 .item p { font-size: 12px; } .about-intro .section1 .para { font-size: 14px; line-height: 24px; } .about-legal .section1 .para h3 { font-size: 16px; } .about-legal .section1 .para { font-size: 14px; line-height: 24px; } .about-manage .section4 .para, .about-manage .section2 .para { font-size: 14px; } .investor-govern .section1 .para { font-size: 14px; line-height: 28px; } .investor-interactive .section2 .tip { font-size: 14px; } .investor-stock .section1 .data-item .item .label { font-size: 14px; } .news-company .section1 .item h3, .solution-detail3 .section7 .news-box .item h3 { font-size: 16px; line-height: 24px; height: 48px; } .solution-detail3 .section7 .news-box .item h3 { margin-top: 15px; } .news-company .section1 .item .date { margin-top: 15px; } .news-party .section1 .item p { font-size: 14px; line-height: 24px; height: 48px; } .news-party .section1 .item .date span { font-size: 36px; } .news-party .section1 .item h3 { font-size: 16px; } .news-detail .section2 .tit-box h3 { font-size: 20px; } .comm-right-box h3 { font-size: 16px; line-height: 46px; } .comm-right-box .list a { font-size: 14px; margin-top: 10px; } .comm-right-box a.more { line-height: 46px; } .product-detail .section1 .para { font-size: 14px; } .product-detail .section1 h4, .product-detail .section4 .item h3 { font-size: 18px; } .product-detail .section4 .item p { font-size: 14px; } .product-list .section2 .item p { font-size: 14px; } .recruit-detail .section1 .top-box h3 { font-size: 20px; } .recruit-detail .section1 .top-box .item { font-size: 14px; } .recruit-detail .section1 .box .tit { font-size: 16px; } .recruit-detail .section1 .box .para { font-size: 14px; } .recruit-idea .section1 .item h3, .recruit-idea .section2 .item h3 { font-size: 20px; } .recruit-idea .section1 .item p, .recruit-idea .section2 .item p { font-size: 14px; } .search-page .section1 .cate a { font-size: 16px; } .search-page .section2 .tip { font-size: 16px; } .search-page .section2 .item .date { font-size: 14px; } .search-page .section2 .item h3 { font-size: 18px; } .search-page .section2 .item p { font-size: 14px; } .solution-list .section .para { font-size: 14px; } .solution-case-list .section1 .item h3 { font-size: 16px; } .solution-case-detail .section1 .left-box .tit { font-size: 18px; } .solution-case-detail .section1 .left-box .para { font-size: 14px; line-height: 28px; } .comm-section2 .para { font-size: 14px; } .comm-section7 .item h3 { font-size: 16px; } .comm-section8 .item h3 { font-size: 16px; } .comm-section6 .item h3 { font-size: 18px; } .comm-section6 .item .para { font-size: 14px; } .solution-detail2 .section3 .item .para { font-size: 14px; } .service-page .section1 .item p { font-size: 14px; } .service-page .section2 .item p { font-size: 14px; } .service-page .section3 .item p { font-size: 14px; } .service-page .section4 .cont .para { font-size: 14px; } .service-page .section3 .item h3, .service-page .section2 .item h3, .service-page .section1 .item h3, .service-page .section4 .tab-tit span { font-size: 18px; } .service-page .section4 .china .dot .txt { font-size: 12px; padding-top: 0; } .service-page .section4 .oversea .dot .txt { font-size: 14px; } } @media screen and (max-width: 1300px) { .investor-stock .section1 .right-box .para { padding: 2vw 3vw; } .investor-stock .section1 .right-box h3 { font-size: 16px; line-height: 60px; } .service-page .section2 .item .box { padding-bottom: 7vw; } } @media screen and (max-width: 992px) { .wrapper { width: 100%; } .inner-page { padding-top: 60px; } .inner-tit { font-size: 20px; text-align: center; } .inner-btn, .about-index .section5 a { width: 120px; line-height: 40px; font-size: 14px; } .comm-subnav { display: block; padding: 10px 0; background-color: #f8f8f8; } .comm-subnav .crumbs { display: none; } .comm-subnav .nav { width: 100%; } .comm-subnav .nav a { font-size: 14px; width: 25%; margin: 0; text-align: center; line-height: 30px; border-bottom-width: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comm-subnav .nav a:nth-of-type(1) { margin-left: 0; } .index-main .section1 .item { height: 48vh; } .index-main .section1 .item h3, .inner-banner h3, .search-page .section1 h3 { font-size: 24px; } .index-main .section1 .item p { font-size: 16px; } .index-main .section1 .slick-dots li { width: 8px; height: 8px; margin: 0 2px; } .index-main .section1 .slick-dots li.slick-active { width: 16px; } .index-main .section2 { padding: 30px 20px; } .index-main .section2 .txt-block { width: 100%; } .index-main .section2 .txt-block:before { margin: 0 auto; } .index-main .section2 .en { font-size: 12px; margin: 10px 0; text-align: center; } .index-main .section2 .para { margin-top: 10px; } .index-main .section2 .inner-btn { margin: 15px auto 0; } .index-main .section2 .data { margin-top: 0; } .index-main .section2 .data .item { width: 50%; text-align: center; margin-top: 15px; } .index-main .section2 .data .item p { margin-top: 5px; } .index-main .section2 .img-block { position: static; height: 30vh; margin-top: 20px; } .index-main .section2 .img-block:before, .index-main .section2 .img-block:after { display: none; } .index-main .section2 .m-show { display: block; } .index-main .section2 .m-show img { display: block; width: 100%; margin-top: 20px; } .index-main .section2 .m-hide { display: none; } .index-main .section3 { padding: 30px 20px; } .index-tit h3 { font-size: 20px; text-align: center; } .index-main .section3 .index-tit, .index-main .section4 .index-tit { padding-right: 0; } .index-tit p { text-align: center; } .index-main .section3 .index-tit a, .index-main .section4 .index-tit a { top: 0; bottom: auto; display: none; } .index-main .section3 .slick { margin: 15px 0 0; padding: 0 15px; } .index-main .section3 .slick-list { padding-right: 0; } .index-main .section3 .item { margin: 0 2px; } .index-main .section3 .item a:before { opacity: 1; } .index-main .section3 .item a:after { opacity: 0; } .index-main .section3 .item .txt-block { left: 20px; right: 20px; bottom: 20px; } .index-main .section3 .item .inner-btn { position: static; margin-top: 10px; opacity: 1; } .index-main .section3 .slick-dots, .comm-section1-slick .slick-dots, .product-detail .section4 .slick-dots, .comm-section3 .slick-dots, .comm-section6 .slick-dots { margin-top: 15px; } .index-main .section3 .slick-dots li, .comm-section1-slick .slick-dots li, .product-detail .section4 .slick-dots li, .comm-section3 .slick-dots li, .comm-section6 .slick-dots li { width: 8px; height: 8px; margin: 0 2px; } .index-main .section4 { padding: 30px 20px; } .index-main .section4 .main { margin-top: 15px; display: none; } .index-main .section4 .left-block { width: 100%; padding-right: 0; } .index-main .section4 .left-block .txt-block { padding: 20px; } .index-main .section4 .left-block h3 { height: auto; } .index-main .section4 .right-block { width: 100%; } .index-main .section4 .m-slick { display: block; margin-top: 15px; } .index-main .section4 .m-slick .item { margin: 0 2px; } .index-main .section4 .m-slick .item .img-box img { display: block; width: 100%; } .index-main .section4 .m-slick .item .date { font-size: 14px; color: #666; margin-top: 15px; } .index-main .section4 .m-slick .item h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1.2; color: #333; font-weight: bold; margin: 10px 0; } .index-main .section4 .m-slick .item p { font-size: 14px; line-height: 24px; height: 48px; overflow: hidden; } .about-contact .section1 { padding: 30px 20px; } .about-contact .section1 .items { margin: 15px 0 0; } .about-contact .section1 .item { width: 100%; margin: 15px 0 0; } .about-contact .section1 .item:nth-of-type(1) { margin-top: 0; } .about-contact .section1 .item .txt-box { margin: -20px 20px 0; padding: 20px; } .about-contact .section1 .item .img-box h3 { font-weight: bold; font-size: 16px; } .about-contact .section1 .item .txt-box h3 { white-space: normal; font-weight: bold; } .about-contact .section2 { padding: 30px 20px; } .about-contact .section2 .items { margin-top: 20px; } .about-contact .section2 .item { width: 50%; } .about-contact .section2 .item:nth-of-type(3) { width: 100%; margin-top: 20px; } .about-contact .section2 .item:after { display: none; } .about-contact .section2 .item i { width: 30px; height: 30px; background-size: contain; } .about-contact .section2 .item h3 { font-size: 16px; margin-top: 10px; } .about-contact .section2 .item p { font-size: 12px; } .about-culture .section1 { padding: 30px 0; } .about-culture .section1 .item .txt-box { padding: 0 20px; } .about-culture .section1 .item h3 { font-size: 16px; font-weight: bold; } .about-culture .section1 .item p { margin-top: 5px; line-height: 20px; font-size: 12px; } .about-culture .section2 { padding: 30px 20px; } .about-culture .section2 .tab-tit { margin-top: 25px; } .about-culture .section2 .tab-tit span { width: 24%; margin: 0 .5%; font-size: 12px; line-height: 30px; } .about-culture .section2 .tab-cont { margin-top: 25px; } .about-culture .section2 .tab-cont h3 { font-size: 16px; font-weight: bold; } .about-culture .section2 .tab-cont .para { margin-top: 15px; } .about-culture .section2 .tab-cont .para p { width: 100%; float: none; padding-left: 0; } .about-culture .section3 { padding: 30px 20px; } .about-culture .section3 .img-box { width: 100%; margin: 20px 0 0; } .about-culture .section3 .img-box a, .recruit-idea .section1 .item .img-box a { width: 40px; height: 40px; } .about-culture .section4 img { margin-top: 20px; } .about-honor .section1 { padding: 30px 20px; } .about-honor .section1 .link-box a { font-size: 14px; line-height: 30px; width: 100px; margin: 0 5px; } .about-honor .section1 .comm-section1 { margin: 15px 0; } .about-honor .section1 .comm-section1 .item { margin-top: 15px; } .about-honor .section1 .comm-section1 .item:nth-of-type(1) { margin-top: 0; } .comm-section1 .item { width: 100%; margin-left: 0; margin-right: 0; } .comm-section1 .item .img-block { height: 26vh; } .comm-section1 .item h3 { margin-top: 10px; font-weight: bold; } .comm-pages ul li a { width: 30px; height: 30px; line-height: 30px; font-size: 12px; } .comm-pages ul li input { width: 30px; height: 30px; font-size: 12px; } .comm-pages ul li button { font-size: 12px; } .inner-banner p { font-size: 16px; margin-top: 10px; } .about-index .section1 { padding: 30px 20px; } .about-index .section1 .cont { display: block; } .about-index .section1 .left-box { width: 100%; padding-right: 0; } .about-index .section1 .left-box .para { margin-top: 15px; } .about-index .section1 .left-box img { margin-top: 20px; } .about-index .section1 .left-box .inner-btn { margin: 15px auto 0; } .about-index .section1 .right-box { width: 100%; height: 30vh; margin-top: 15px; } .about-index .section1 .data { margin-top: 0; } .about-index .section1 .data .item { width: 50%; text-align: center; margin-top: 15px; } .about-index .section1 .data .item:after { display: none; } .about-index .section1 .data .item .num span { font-size: 32px; } .about-index .section1 .data .item .num, .about-index .section1 .data .item p { font-size: 14px; } .about-index .section1 .data .item p { margin-top: 5px; } .about-index .section1 .m-spacing { margin: 15px auto 0; } .about-index .section1 .m-show { display: block; } .about-index .section1 .m-hide { display: none; } .about-index .section2 { padding: 30px 20px; } .about-index .section2 .items { margin: 15px auto 0; } .about-index .section2 .item { width: 100%; margin: 15px 0 0; } .about-index .section2 .item:nth-of-type(1) { margin-top: 0; } .about-index .section2 .item .txt-block { padding: 20px; } .about-index .section2 .item h3 { font-size: 16px; font-weight: bold; } .about-index .section2 .item p { height: auto; } .about-index .section3 { padding: 30px 20px; } .about-index .section3 .items { margin: 15px 0 0; background-color: #fff; padding: 20px 0; } .about-index .section3 .item { width: 100%; margin: 0; padding: 0 20px; margin-top: 10px; } .about-index .section3 .item:nth-of-type(1) { margin-top: 0; } .about-index .section3 .item p { margin-top: 10px; } .about-index .section4 { padding: 30px 20px; } .about-index .section4 .items { margin: 15px 0 0; } .about-index .section4 .item { margin: 0 2px; } .about-index .section4 .item h3 { margin-top: 15px; white-space: normal; } .about-index .section4 .item p { margin-top: 10px; } .about-index .section4 .slick-dots, .comm-section5 .slick-dots, .comm-section7 .slick-dots, .index-main .section4 .m-slick .slick-dots { margin-top: 15px; font-size: 0; text-align: center; } .about-index .section4 .slick-dots li, .comm-section5 .slick-dots li, .comm-section7 .slick-dots li, .index-main .section4 .m-slick .slick-dots li { display: inline-block; vertical-align: top; width: 8px; height: 8px; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 50%; margin: 0 2px; -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; } .about-index .section4 .slick-dots li.slick-active, .comm-section5 .slick-dots li.slick-active, .comm-section7 .slick-dots li.slick-active, .index-main .section4 .m-slick .slick-dots li.slick-active { background-color: #004ea2; border-color: #004ea2; } .about-index .section4 .slick-dots button, .comm-section5 .slick-dots button, .comm-section7 .slick-dots button, .index-main .section4 .m-slick .slick-dots button { display: none; } .about-index .section5 { padding: 30px 20px; } .about-index .section5 .wrapper { padding-right: 0; } .about-index .section5 .item { width: 100%; margin-top: 20px; padding: 0 20px; } .about-index .section5 .item:nth-of-type(1) { margin-top: 0; } .about-index .section5 a { display: block; margin: 20px auto 0; position: static; } .about-intro .section1 { padding: 30px 20px; } .about-intro .section1 .cont { margin-top: 15px; } .about-intro .section1 .img-block { margin: 15px 0; } .about-legal .section1 { padding: 30px 20px; } .about-legal .section1 .para { margin-top: 15px; padding-top: 15px; } .about-legal .section1 .para h3 { font-weight: bold; } .about-manage .section1 { padding: 30px 20px; } .comm-section1-slick { margin: 15px 0 0; } .about-manage .section2 { padding: 30px 20px; } .about-manage .section2 .para { margin-top: 15px; } .about-manage .section2 .img-box { width: 100%; margin-top: 15px; } .about-manage .section3 { padding: 30px 20px; } .about-manage .section4 { padding: 30px 20px; } .about-manage .section4 .para { margin-top: 15px; } .about-manage .section4 .img-box { margin-top: 15px; } .investor-govern .section1 { padding: 30px 20px; } .investor-govern .section1 .txt-box { width: 100%; padding: 0; } .investor-govern .section1 .para { line-height: 24px; margin-top: 15px; } .investor-govern .section1 .img-box { width: 100%; margin-top: 15px; } .investor-govern .section2 { padding: 30px 20px; } .investor-interactive .section1 { padding: 30px 20px; } .investor-interactive .section1 .slick { margin: 10px 0 0; } .investor-interactive .section1 .item { width: 100%; margin: 15px 0 0; padding: 20px; } .investor-interactive .section1 .item .tit { margin-top: 10px; padding-top: 10px; } .investor-interactive .section2 { padding: 30px 20px; } .investor-interactive .section2 .tip { margin-top: 15px; } .investor-interactive .section2 form { margin-top: 15px; } .investor-interactive .section2 form .box { width: calc(50% - 5px); } .investor-interactive .section2 form .box:nth-of-type(1) { margin-right: 10px; } .investor-interactive .section2 form .box i { display: none; } .investor-interactive .section2 form .box input, .investor-interactive .section2 form .box span, .investor-interactive .section2 form textarea { font-size: 14px; } .investor-interactive .section2 form .box input { height: 40px; padding-left: 34px; } .investor-interactive .section2 form .box span { line-height: 40px; } .investor-interactive .section2 form .box.focus span { left: 0; } .investor-interactive .section2 form textarea { margin-top: 10px; height: 80px; } .investor-interactive .section2 form button { margin: 15px auto 0; } .investor-stock .section1 { padding: 30px 20px; } .investor-stock .section1 .left-box { width: 100%; } .investor-stock .section1 .wrapper { display: block; } .investor-stock .section1 .top-box { padding: 15px; } .investor-stock .section1 .data-item .item .label { font-size: 12px; line-height: 15px; height: 30px; } .investor-stock .section1 .data-item .item .data { font-size: 18px; margin-top: 8px; } .investor-stock .section1 .data-item .item span.num { font-size: 24px; } .investor-stock .section1 .data-item .item span.unit { font-size: 16px; margin-bottom: 2px; } .investor-stock .section1 .data-item .item span.icon { width: 8px; height: 8px; margin: 0 3px 5px; background-size: contain; } .investor-stock .section1 .top-box .tip { margin-top: 10px; font-size: 12px; } .investor-stock .section1 .tab-tit { margin-top: 15px; } .investor-stock .section1 .tab-tit span { line-height: 36px; width: 25%; margin-left: 0; } .investor-stock .section1 .right-box { width: 100%; margin-top: 20px; } .investor-stock .section1 .right-box h3 { line-height: 50px; } .investor-stock .section1 .right-box .para { padding: 20px; } .news-company .section1 { padding: 30px 20px; } .news-company .section1 .items { margin: 0 0 15px; } .news-company .section1 .item, .solution-detail3 .section7 .news-box .item { width: 100%; margin: 20px 0 0; } .news-company .section1 .item:nth-of-type(1), .solution-detail3 .section7 .news-box .item:nth-of-type(1) { margin-top: 0; } .solution-detail3 .section7 .news-box .item h3 { margin-top: 10px; } .news-company .section1 .item .date { margin-top: 10px; } .news-party .section1 { padding: 30px 20px; } .news-party .section1 .items { margin-bottom: 15px; } .news-party .section1 .item { padding: 15px 0; } .news-party .section1 .item .date { display: none; } .news-party .section1 .item .img-block { width: 100%; } .news-party .section1 .item .img-block span { font-size: 14px; line-height: 36px; padding: 0 10px; } .news-party .section1 .item .txt-block { position: static; width: 100%; padding-top: 15px; } .news-party .section1 .item .txt-block span { position: static; display: block; margin-top: 10px; } .news-detail .section1 { padding: 10px 20px; } .news-detail .section1 .main { margin: 0; } .comm-crumbs a:after { margin: -3px 5px 0; } .news-detail .section2 { padding: 30px 20px; } .comm-share { display: none; } .news-detail .section2 .left-box { width: 100%; } .news-detail .section2 .tit-box h3 { font-size: 18px; line-height: 26px; } .news-detail .section2 .tit-box .date { margin-top: 10px; } .news-detail .section2 .cont { margin-top: 15px; } .news-detail .section2 .other-box { margin-top: 15px; padding-right: 120px; } .news-detail .section2 .other-box a.back { width: 100px; line-height: 30px; margin-top: -15px; } .news-detail .section2 .other-box .page a { font-size: 14px; line-height: 24px; } .comm-right-box { margin-top: 20px; padding-left: 0; width: 100%; } .comm-right-box .list { padding: 20px; } .comm-subnav.fixed { top: 60px; } .product-detail .section1 { padding: 30px 20px; } .product-detail .section1 .img-box { width: 100%; height: 30vh; } .product-detail .section1 .txt-box { width: 100%; margin-top: 20px; padding-left: 0; } .product-detail .section1 .para { margin-top: 10px; } .product-detail .section1 .inner-tit { text-align: left; } .product-detail .section1 h4 { margin-top: 15px; } .product-detail .section1 .inner-btn { margin-top: 15px; } .product-detail .section2 { padding: 30px 20px; } .product-detail .section2 .para { margin-top: 15px; } .product-detail .section2 p { font-size: 14px; line-height: 24px; width: 100%; margin-top: 15px; } .product-detail .section2 p:nth-of-type(1) { margin-top: 0; } .product-detail .section3 { padding: 30px 20px; } .product-detail .section4 { padding: 30px 20px; } .product-detail .section4 .slick { margin-top: 15px; } .product-detail .section4 .item .img-box { width: 100%; } .product-detail .section4 .item .txt-box { width: 100%; padding: 20px; } .product-detail .section1 h4, .product-detail .section4 .item h3 { font-size: 16px; font-weight: bold; } .product-detail .section4 .item p { line-height: 24px; margin-top: 10px; } .product-detail .section5 { padding: 30px 20px; } .product-detail .section5 .items { margin: 15px 0 0; } .product-detail .section5 .item { width: 100%; margin: 15px 0 0; } .product-detail .section5 .item:nth-of-type(1) { margin-top: 0; } .product-detail .section5 .item a { padding: 20px 40px 20px 20px; } .product-detail .section5 .item a:after { right: 20px; } .product-list .section1 { padding: 30px 20px; } .product-list .section1 .filter { margin-top: 15px; } .product-list .section1 .item { margin-top: 10px; padding-right: 20px; } .product-list .section1 .item .more { right: 0; } .product-list .section1 .item .label { font-size: 12px; line-height: 30px; width: 40px; } .product-list .section1 .item .box a { line-height: 30px; padding: 0 8px; margin: 0 5px 2px 0; font-size: 12px; } .product-list .section1 .item .a-block { width: calc(100% - 40px); } .product-list .section2 { padding: 30px 20px; } .product-list .section2 form { position: relative; width: 100%; height: 40px; margin-top: 15px; } .product-list .section2 form button { height: 38px; } .product-list .section2 form input { font-size: 14px; padding: 0 10px; } .product-list .section2 .items { margin: 15px 0 0; } .product-list .section2 .item { width: 100%; margin: 15px 0; } .product-list .section2 .item:nth-of-type(1) { margin-top: 0; } .product-list .section2 .item .img-box { height: 30vh; } .product-list .section2 .item .txt-box { padding: 20px; } .product-list .section2 .item span { width: 120px; line-height: 36px; font-size: 14px; } .recruit-campus .section1 { padding: 30px 20px; } .recruit-campus .section1 .items { margin: 15px 0; } .recruit-campus .section1 .item { margin: 15px 0 0; width: 100%; padding: 20px; } .recruit-campus .section1 .item:nth-of-type(1) { margin-top: 0; } .recruit-campus .section1 .item h3 { font-size: 16px; font-weight: bold; margin-right: 80px; } .recruit-campus .section1 .item span.recruit-popups-btn { right: 0; left: auto; top: 0; } .recruit-campus .section1 .item .label { margin-top: 15px; overflow: hidden; font-size: 12px; } .recruit-campus .section1 .item .label p { float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .recruit-campus .section1 .item .label p:nth-of-type(odd) { width: 44%; } .recruit-campus .section1 .item .label p:nth-of-type(even) { width: 56%; } .recruit-campus .section1 .item:after { right: 20px; bottom: 20px; } .recruit-detail .section1 { padding: 30px 20px; } .recruit-detail .section1 .top-box { padding-right: 0; } .recruit-detail .section1 .main { padding: 15px; } .recruit-detail .section1 .top-box .label { margin-top: 10px; } .recruit-detail .section1 .top-box .inner-btn { display: none; } .recruit-detail .section1 .cont-box { margin-top: 20px; } .recruit-detail .section1 .box { padding: 15px 0; } .recruit-detail .section1 .cont-box .inner-btn { margin: 0 auto; } .recruit-idea .section1 .item h3, .recruit-idea .section2 .item h3 { font-size: 16px; } .recruit-idea .section1 .item .box { width: 100%; padding: 0 20px; } .recruit-idea .section1 .item p, .recruit-idea .section2 .item p { line-height: 20px; margin-top: 5px; font-size: 12px; } .recruit-idea .section2 .item .txt-box { padding: 0 20px; } .recruit-social .section1 { padding: 30px 20px; } .recruit-social .section1 .items { margin: 15px 0; } .recruit-social .section1 .item { margin-top: 15px; } .recruit-social .section1 .item a { padding: 15px 20px; } .recruit-social .section1 .item .info { padding-right: 0; } .recruit-social .section1 .item .info:nth-of-type(1) { width: 100%; } .recruit-social .section1 .item .info:nth-of-type(2), .recruit-social .section1 .item .info:nth-of-type(4) { width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .recruit-social .section1 .item .info:nth-of-type(3), .recruit-social .section1 .item .info:nth-of-type(5) { width: 56%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .recruit-social .section1 .item .info:nth-of-type(2), .recruit-social .section1 .item .info:nth-of-type(3) { margin-top: 15px; } .recruit-social .section1 .item h3 { font-size: 16px; font-weight: bold; margin-right: 80px; } .recruit-social .section1 .item span.recruit-popups-btn { left: auto; bottom: auto; top: 15px; right: 20px; } .recruit-social .section1 .item .label { font-size: 12px; line-height: 24px; display: inline-block; vertical-align: top; } .recruit-social .section1 .item span { font-size: 12px; margin-top: 0; margin-left: 5px; display: inline-block; vertical-align: top; } .recruit-social .section1 .item a:after { width: 24px; height: 24px; margin-top: 0; bottom: 15px; top: auto; } .search-page .section1 { padding: 30px 20px; } .search-page .section1 form { height: 40px; margin-top: 10px; padding-right: 60px; } .search-page .section1 form input { font-size: 14px; padding: 0 10px; } .search-page .section1 form button { height: 40px; width: 60px; } .search-page .section1 .cate a { font-size: 14px; padding-left: 20px; } .search-page .section1 .cate i { width: 12px; height: 12px; } .search-page .section2 { padding: 30px 20px; } .search-page .section2 .tip { font-size: 14px; } .search-page .section2 .items { margin: 15px 0; } .search-page .section2 .item a { padding: 15px 40px 15px 0; } .search-page .section2 .item h3 { font-size: 16px; margin-top: 10px; } .solution-list .section { padding: 30px 20px; } .solution-list .section .para { line-height: 24px; } .solution-list .section .items { margin: 15px 0 0; } .solution-list .section .item { width: 100%; margin: 15px 0 0; } .solution-list .section .item:nth-of-type(1) { margin-top: 0; } .solution-list .section .item .txt-box { left: 20px; right: 20px; bottom: 20px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .solution-list .section .item p, .solution-list .section .item span { opacity: 1; } .solution-list .section .item a:after { opacity: 0; } .solution-list .section .item a:before { opacity: 1; background-color: rgba(0, 0, 0, 0.4); } .solution-case-list .section1 { padding: 30px 20px; } .solution-case-list .section1 .items { margin: 0 0 20px; } .solution-case-list .section1 .item { width: 100%; margin: 20px 0 0; } .solution-case-list .section1 .item:nth-of-type(1) { margin-top: 0; } .solution-case-list .section1 .item h3 { font-weight: bold; margin-top: 10px; text-align: center; } .solution-case-detail .section1 { padding: 30px 20px; } .solution-case-detail .share-box { display: none; } .solution-case-detail .section1 .left-box { width: 100%; } .solution-case-detail .section1 .left-box .para { line-height: 24px; margin-top: 10px; } .solution-case-detail .section1 .left-box .box { margin-top: 20px; } .solution-case-detail .section1 .left-box .tit { text-align: center; } .solution-case-detail .inner-banner { margin-top: 44px; } .solution-case-detail .comm-crumbs { left: 0; right: 0; top: -44px; padding: 10px 20px; } .solution-case-detail .inner-banner a.btn { display: block; margin-top: 10px; width: 130px; line-height: 36px; background-color: #004ea2; color: #fff; text-align: center; font-size: 14px; } .product-detail .inner-banner p, .solution-detail1 .inner-banner p, .solution-detail2 .inner-banner p, .solution-detail3 .inner-banner p { font-size: 14px; line-height: 20px; max-height: 60px; overflow: hidden; } .comm-section2 { padding: 30px 20px; } .comm-section2 .para { margin-top: 10px; line-height: 24px; } .comm-section2 .video-box { width: 100%; margin-top: 20px; } .comm-section2 .video-box a { width: 40px; height: 40px; } .comm-section4 { padding: 30px 20px; } .comm-section4 .cont { margin-top: 20px; } .comm-section4 .img-box { width: 100%; } .comm-section4 .txt-box { width: 100%; padding-left: 0; margin-top: 15px; } .comm-section4 .txt-box p { font-size: 14px; line-height: 24px; padding-left: 40px; } .comm-section4 .txt-box span { font-size: 22px; } .comm-section5 { padding: 30px 20px; } .comm-section5 .items { margin: 15px 0 0; } .comm-section5 .item { width: 100%; margin: 0 2px; } .comm-section5 .item:nth-of-type(1) { margin-top: 0; } .comm-section5 .item h3 { margin-top: 10px; font-weight: bold; } .comm-section3 { padding: 30px 20px; } .comm-section3 .slick { margin: 15px 0 0; } .comm-section3 .item { margin: 0 2px; } .comm-section3 .item h3 { font-weight: bold; margin-top: 10px; } .comm-section7 .item h3 { line-height: 40px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); bottom: 15px; } .comm-section7 .item a { padding-bottom: 35px; } .solution-detail1 .section5 .slick { margin-top: 15px; } .comm-section6 { padding: 30px 20px; } .comm-section6 .slick { margin-top: 20px; } .comm-section6 .item .logo { width: 100px; height: 100px; border-width: 5px; } .comm-section6 .item h3 { font-size: 16px; font-weight: bold; margin: 15px 0; } .comm-section6 .item .para { width: 100%; padding: 0; } .comm-section6 .item .para:before, .comm-section6 .item .para:after { display: none; } .solution-detail1 .section7 { padding: 30px 20px; } .solution-detail1 .section7 .items { margin: 15px 0 0; } .comm-section8 .item { width: 100%; margin: 20px 0 0; } .comm-section8 .item:nth-of-type(1) { margin-top: 0; } .comm-section8 .item .img-box { height: 30vh; } .comm-section8 .item h3 { margin-top: 10px; font-weight: bold; text-align: center; } .solution-detail2 .section3 { padding: 30px 20px; } .solution-detail2 .section3 .items { margin-top: 15px; } .solution-detail2 .section3 .item { margin-top: 20px; } .solution-detail2 .section3 .item:first-of-type { margin-top: 0; } .solution-detail2 .section3 .item .img-box { width: 100%; } .solution-detail2 .section3 .item .txt-box { width: 100%; padding: 15px 0 0; position: static; } .solution-detail2 .section3 .item .para { line-height: 24px; } .solution-detail3 .section5 .tab-tit { margin-top: 15px; } .solution-detail3 .section5 .tab-tit span, .solution-detail3 .section7 .tab-tit span { font-size: 12px; line-height: 30px; padding: 0 15px; margin: 0 2px; } .solution-detail3 .section5 .tab-cont, .solution-detail3 .section7 .tab-cont { margin-top: 15px; } .solution-detail3 .section7 { padding: 30px 20px; } .comm-section8, .solution-detail3 .section7 .news-box { margin: 0; } .solution-detail3 .section7 .news-box .item h3 { margin-bottom: 10px; } .service-page .section1 { padding: 30px 20px; } .service-page .section1 .items { margin-top: 20px; display: block; } .service-page .section1 .item { width: 100%; margin-top: 15px; padding: 20px; } .service-page .section1 .item:nth-of-type(1) { margin-top: 0; } .service-page .section1 .item i { height: 30px; width: 30px; float: left; } .service-page .section3 .item h3, .service-page .section2 .item h3, .service-page .section1 .item h3, .service-page .section4 .tab-tit span { font-size: 16px; font-weight: bold; } .service-page .section1 .item h3 { margin: 0 0 15px 50px; line-height: 30px; text-align: left; } .service-page .section1 .item p { margin: 0; text-align: left; } .service-page .section2 { padding: 30px 20px; } .service-page .section2 .items { margin-top: 20px; display: block; } .service-page .section2 .item { width: 100%; margin-top: 15px; padding: 20px; } .service-page .section2 .item:nth-of-type(1) { margin-top: 0; } .service-page .section2 .item .box { padding: 0; } .service-page .section2 .item i { width: 30px; height: 30px; position: static; display: block; margin: 0 auto 15px; } .service-page .section2 .item .absolute { position: static; margin-top: 10px; } .service-page .section2 .item p { margin-top: 10px; } .service-page .section2 .item .tel { font-size: 30px; } .service-page .section3 { padding: 30px 20px; } .service-page .section3 .items { margin: 20px auto 0; display: block; } .service-page .section3 .item { width: 100%; margin: 15px auto 0; padding: 20px; } .service-page .section3 .item:nth-of-type(1) { margin-top: 0; } .service-page .section3 .item i { height: 30px; width: 30px; float: left; } .service-page .section3 .item h3 { margin: 0 0 15px 50px; text-align: left; line-height: 30px; } .service-page .section4 .map-box { display: none; } .service-page .section4 { padding: 30px 20px; } .service-page .section4 .cont { margin-top: 20px; padding: 20px; } .sitemap-page .section1 { padding: 30px 20px; } .sitemap-page .section1 .item { padding: 15px 0; } .sitemap-page .section1 .link { margin-top: 5px; } .sitemap-page .section1 a.btn { font-size: 14px; line-height: 36px; width: calc((100% - 10px) / 3); max-width: none; } .sitemap-page .section1 .link a.btn { margin: 5px 5px 0 0; } .sitemap-page .section1 .link a.btn:nth-of-type(3n) { margin-right: 0; } .fixed-recruit-popups .main { padding: 20px; } .fixed-recruit-popups form { max-height: 70vh; overflow: auto; margin-right: -10px; padding-right: 10px; } .fixed-recruit-popups h3 { font-size: 20px; } .fixed-recruit-popups .close { top: 15px; right: 15px; } } /*# sourceMappingURL=bundle.css.map */ .service-page .section4 .table{ margin-top: 20px; } .service-page .section4 .table img{ display: block; width: 100%; } .product-list .section2 .opa-box { margin-top: 20px; font-size: 0; } .product-list .section2 .opa-box .opa { display: inline-block; vertical-align: top; margin: 0 15px 5px 0; position: relative; } .product-list .section2 .opa-box .opa span { display: block; background-color: #f8f8f8; font-size: 14px; line-height: 30px; padding: 0 15px; color: #333; } .product-list .section2 .opa-box .opa i { position: absolute; top: -7px; right: -7px; border-radius: 50%; width: 14px; height: 14px; font-size: 12px; line-height: 10px; color: #fff; background-color: #004ea2; font-style: normal; text-align: center; cursor: pointer; }