@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: 'NeutraTextBookAlt'; src: url("../fonts/NeutraTextBookAlt.otf"); } @font-face { font-family: 'NeutraTextLight'; src: url("../fonts/NeutraTextLight.otf"); } @font-face { font-family: 'NeutraTextBold'; src: url("../fonts/NeutraTextBold.otf"); } @font-face { font-family: 'NeutraTextBook'; src: url("../fonts/NeutraTextBook.otf"); } @keyframes o-upfade-top { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes o-scale { 0%,85%,100% { transform: scale(1); } 50% { transform: scale(1.2); } } @keyframes o-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes o-ani-1 { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(0, 5vw); } 50% { transform: translate(-5vw, 5vw); } 75% { transform: translate(-5vw, 0); } } @keyframes o-ani-2 { 0% { opacity: .5; transform: scale(0.7); } 80% { opacity: .5; } 100% { opacity: 0; transform: scale(1); } } @keyframes o-ani-3 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes o-map { 0% { opacity: 1; transform: scale(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } @keyframes o-map-1 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; } 50%,100% { opacity: 0; transform: scale(1); } } @keyframes ringscale { 0% { opacity: 1; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @media screen and (min-width: 1025px) { .wow { visibility: hidden; } .dom-loaded .header .nav li .drop-1 { transition: all .3s ease; } } .wrapper { width: 81.25vw; max-width: 1560px; margin: 0 auto; position: relative; z-index: 2; } .wrapper:after { content: ''; display: block; clear: both; } /* header */ .header { position: fixed; top: 0; left: 0; right: 0; font-size: 0; min-width: 1200px; z-index: 9; } .header:before, .header:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; transition: all .3s ease; } .header:before { background-image: linear-gradient(90deg, #001066, #2f50a2); } .header:after { background-color: #fff; opacity: 0; } .header .logo { position: absolute; left: 3.125vw; top: 50%; margin-top: -30px; transition: all .3s ease; z-index: 3; } .header .logo img { display: block; height: 60px; transition: all .3s ease; } .header .logo img.color { opacity: 0; } .header .logo img.white { position: absolute; top: 0; left: 0; opacity: 1; } .header .head-cont { position: relative; text-align: right; z-index: 2; } .header .nav { display: inline-block; vertical-align: middle; text-align: left; } .header .nav:after { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 20px; background-color: rgba(255, 255, 255, 0.3); margin: 0 1vw; transition: all .3s ease; } .header .nav li { display: inline-block; vertical-align: middle; position: relative; } .header .nav li a.single { display: block; font-size: 18px; line-height: 100px; color: #fff; padding: 0 1vw; position: relative; transition: all .3s ease; } .header .nav li a.single:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-image: linear-gradient(90deg, #5051f3, #c9449a); transform: scaleX(0); transition: all .3s ease; } .header .nav li .drop-1 { position: absolute; top: 100%; left: 50%; margin-left: -120px; width: 240px; background-color: #fff; padding: 1.5vw 0; opacity: 0; visibility: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .header .nav li .drop-1 a { display: block; font-size: 16px; line-height: 3.75; color: #333; text-align: center; position: relative; } .header .nav li .drop-1 a:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-image: linear-gradient(180deg, #5051f3, #c9449a); opacity: 0; } .header .nav li .drop-1 a:hover { color: #fff; background-image: linear-gradient(90deg, #001066, #2f50a2); } .header .nav li .drop-1 a:hover:before { opacity: 1; } .header .nav li:hover .drop-1 { opacity: 1; visibility: visible; } .header .nav li.hover a.single:after, .header .nav li.active a.single:after, .header .nav li:hover a.single:after { transform: scaleX(1); } .header .lang { display: inline-block; vertical-align: middle; margin: 0 1vw; position: relative; } .header .lang span { display: block; font-size: 14px; color: #fff; cursor: pointer; transition: all .3s ease; } .header .lang span:before { content: ''; width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-1-2.png"); transition: all .3s ease; } .header .lang span:after { content: ''; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #fff; display: inline-block; vertical-align: middle; margin: -3px 0 0 5px; transition: all .3s ease; } .header .lang .hide { position: absolute; width: 90px; top: 100%; left: 50%; margin-left: -45px; padding-top: 20px; opacity: 0; visibility: hidden; } .header .lang .hide:before { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; position: absolute; top: 10px; left: 0; right: 0; margin: 0 auto; } .header .lang .hide a { display: block; font-size: 12px; line-height: 30px; color: #333; margin-bottom: 1px; text-align: center; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -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: 1025px) { .header .lang .hide a:hover { background-color: #0c2075; color: #fff; } } .header .lang:hover .hide { opacity: 1; visibility: visible; } .header .search { display: inline-block; vertical-align: middle; position: relative; margin: 0 3.125vw 0 1vw; width: 12.5vw; height: 42px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 20px; transition: all .3s ease; } .header .search input { display: block; width: 100%; height: 100%; background-color: transparent; padding: 0 20px; font-size: 12px; color: rgba(52, 52, 52, 0.3); transition: all .3s ease; } .header .search input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.3); } .header .search input:-moz-placeholder { color: rgba(255, 255, 255, 0.3); } .header .search input::-moz-placeholder { color: rgba(255, 255, 255, 0.3); } .header .search input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.3); } .header .search input:focus { color: #fff; } .header .search button { width: 18px; height: 18px; position: absolute; right: 20px; top: 50%; margin-top: -9px; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: transparent; background-image: url("../images/icon-2-2.png"); transition: all .3s ease; cursor: pointer; } .header.init:before, .header:hover:before { opacity: 0; } .header.init:after, .header:hover:after { opacity: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .header.init .logo img.color, .header:hover .logo img.color { opacity: 1; } .header.init .logo img.white, .header:hover .logo img.white { opacity: 0; } .header.init .nav:after, .header:hover .nav:after { background-color: rgba(52, 52, 52, 0.3); } .header.init .nav li a.single, .header:hover .nav li a.single { color: #343434; } .header.init .lang span, .header:hover .lang span { color: #343434; } .header.init .lang span:before, .header:hover .lang span:before { background-image: url("../images/icon-1-1.png"); } .header.init .lang span:after, .header:hover .lang span:after { border-top: 4px solid #343434; } .header.init .search, .header:hover .search { border: 2px solid rgba(52, 52, 52, 0.3); } .header.init .search input, .header:hover .search input { color: rgba(52, 52, 52, 0.3); } .header.init .search input::-webkit-input-placeholder, .header:hover .search input::-webkit-input-placeholder { color: rgba(52, 52, 52, 0.3); } .header.init .search input:-moz-placeholder, .header:hover .search input:-moz-placeholder { color: rgba(52, 52, 52, 0.3); } .header.init .search input::-moz-placeholder, .header:hover .search input::-moz-placeholder { color: rgba(52, 52, 52, 0.3); } .header.init .search input:-ms-input-placeholder, .header:hover .search input:-ms-input-placeholder { color: rgba(52, 52, 52, 0.3); } .header.init .search input:focus, .header:hover .search input:focus { color: #343434; } .header.init .search button, .header:hover .search button { background-image: url("../images/icon-2-1.png"); } .header.down .logo { margin-top: -25px; } .header.down .logo img { height: 50px; } .header.down .nav li a.single { line-height: 70px; } .head-nav { position: fixed; top: 100px; left: 0; right: 0; bottom: 0; font-size: 0; z-index: 9; display: none; } .head-nav.down { top: 70px; } .head-nav .main { width: 1200px; margin: 0 auto; height: calc(100% - 100px); max-height: 640px; background-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .head-nav .wrap { display: none; height: 100%; } .head-nav .block { height: 100%; display: flex; } .head-nav .left-box { width: 280px; } .head-nav .left-box a { position: relative; display: block; font-size: 18px; line-height: 60px; color: #29489a; padding: 0 3.125vw; transition: color .3s ease; cursor: default; } .head-nav .left-box a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, #001066, #2f50a2); z-index: 1; opacity: 0; transition: all .3s ease; } .head-nav .left-box a:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 8px; background-image: linear-gradient(190deg, #5051f3, #c9449a); z-index: 2; opacity: 0; transition: all .3s ease; } .head-nav .left-box a span { display: block; border-bottom: 1px solid #e6e6e6; position: relative; z-index: 3; } .head-nav .left-box a span:after { content: ''; width: 25px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-4.png"); position: absolute; left: 100%; top: 50%; margin-top: -8px; } .head-nav .left-box a.active { color: #fff; } .head-nav .left-box a.active:before, .head-nav .left-box a.active:after { opacity: 1; } .head-nav .left-box a.active span { border: none; } .head-nav .right-box { width: calc(100% - 280px); } .head-nav .right-box .child { width: 100%; height: 100%; background-color: #fafbfd; background-position: right center; background-repeat: no-repeat; background-size: auto 100%; display: none; overflow: auto; } .head-nav .right-box .child.active { display: block; } .head-nav .right-box .b-div-1 { min-height: 100%; padding: 40px 60px; display: flex; } .head-nav .right-box .b-div-2 { padding: 6.25vw 60px; width: 80%; } .head-nav .right-box .b-div-2 h3 { font-size: 24px; color: #29489a; } .head-nav .right-box .b-div-2 p { font-size: 16px; line-height: 2; color: #333548; margin: 20px 0; } .head-nav .right-box .b-div-2 a { display: block; width: 180px; font-size: 16px; line-height: 48px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .head-nav .right-box .b-div-2 a:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .head-nav .right-box .s-div { display: flex; } .head-nav .right-box .s-div-cont { width: 50%; } .head-nav .right-box .flex-nav.width-1 { min-width: 240px; } .head-nav .right-box .flex-nav.width-2 { min-width: 500px; } .head-nav .right-box .flex-nav .box { margin-bottom: 50px; } .head-nav .right-box .flex-nav .box:last-of-type { margin-bottom: 0; } .head-nav .right-box .flex-nav h3 { font-size: 18px; color: #29489a; } .head-nav .right-box .flex-nav h3 a { color: #29489a; } .head-nav .right-box .flex-nav h4 { font-size: 16px; color: #afb1ba; margin-top: 20px; } .head-nav .right-box .flex-nav h4 a { color: #29489a; } .head-nav .right-box .flex-nav h5 { font-size: 14px; line-height: 28px; color: #afb1ba; } .head-nav .right-box .flex-nav ul { margin-top: 10px; } .head-nav .right-box .flex-nav ul li.new:after, .head-nav .right-box .flex-nav ul li.hot:after { content: ''; width: 30px; height: 21px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: -6px; } .head-nav .right-box .flex-nav ul li.new:after { background-image: url("../images/new.png"); } .head-nav .right-box .flex-nav ul li.hot:after { background-image: url("../images/hot.png"); } .head-nav .right-box .flex-nav ul a { display: inline-block; vertical-align: middle; line-height: 2; color: #333548; } .head-nav .right-box .flex-nav ul a:hover { color: #29489a; } .head-nav .right-box .flex-nav ul.b-ul a { font-size: 14px; } .head-nav .right-box .flex-nav ul.s-ul { padding-left: 24px; margin-bottom: 10px; } .head-nav .right-box .flex-nav ul.s-ul a { font-size: 12px; } /* footer */ .footer { font-size: 0; padding: 4.5vw 0 4vw; background-color: #20252d; background-position: center top; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/foot-bg.png"); } .footer .top-block { position: relative; padding-right: 13.5vw; } .footer .left-box { display: inline-block; vertical-align: top; width: 35vw; } .footer .info-box { display: inline-block; vertical-align: top; width: calc(100% - 35vw); } .footer .flex { display: flex; justify-content: space-between; } .footer .ewm-box { position: absolute; top: 0; right: 0; text-align: center; } .footer .ewm-box img { display: block; width: 120px; } .footer .ewm-box p { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-top: 20px; } .footer .logo img { display: block; height: 72px; } .footer .slogan { font-size: 16px; color: #fff; margin-top: 3vw; letter-spacing: 3px; } .footer .info { position: relative; padding-bottom: 9vw; } .footer .info h3 { font-size: 16px; color: #fff; margin-bottom: 1.5vw; } .footer .info p { font-size: 14px; line-height: 32px; color: rgba(255, 255, 255, 0.5); } .footer .info p a { display: inline-block; color: rgba(255, 255, 255, 0.5); transition: color .3s ease; } .footer .info p a.line { border-bottom: 2px solid #909296; } .footer .info p a.contact { margin-top: 2vw; } .footer .info p a.pos { position: absolute; bottom: 0; font-size: 16px; } .footer .info p a:hover { color: #fff; } .footer .bot-block { display: inline-block; font-size: 14px; line-height: 2; color: #fff; margin-top: -32px; position: relative; z-index: 2; } /* fixed right */ .fixed-right { position: fixed; right: 0; bottom: 5%; z-index: 8; } .fixed-right .block { width: 60px; height: 60px; margin-top: 2px; border-radius: 2px; position: relative; background-color: #4b494a; -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; } .fixed-right .block i, .fixed-right .block a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1; } .fixed-right .block i { background-position: center; background-repeat: no-repeat; background-size: auto 24px; z-index: 1; } .fixed-right .block a { text-align: center; font-size: 14px; color: #fff; line-height: 16px; padding: 14px; opacity: 0; z-index: 2; } .fixed-right .block.form i { background-image: url("../images/fixed-1.png"); } .fixed-right .block.tel i { background-image: url("../images/fixed-2.png"); } .fixed-right .block.totop { background-color: #29489a; } .fixed-right .block.totop i { background-image: url("../images/fixed-3.png"); } .fixed-right .block .hide-box { position: absolute; right: 100%; padding-right: 10px; opacity: 0; visibility: hidden; } @media screen and (min-width: 1025px) { .fixed-right .block:hover { background-color: #29489a; } .fixed-right .block:hover i { opacity: 0; } .fixed-right .block:hover a { opacity: 1; } .fixed-right .block:hover .hide-box { opacity: 1; visibility: visible; } } .fixed-right .tel-box { top: 0; } .fixed-right .tel-box .box { border: 1px solid #e6e6e6; box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); background-color: #fff; white-space: nowrap; } .fixed-right .tel-box .info { padding: 15px 30px; } .fixed-right .tel-box h3 { font-size: 20px; color: #4b494a; } .fixed-right .tel-box .tel { font-size: 32px; color: #29489a; line-height: 1; font-family: 'DINPro-Regular'; margin-top: 10px; } .fixed-right .tel-box p { font-size: 12px; color: #4b494a; line-height: 30px; padding: 0 30px; background-color: #f5f5f5; } .fixed-form { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; z-index: 12; display: none; } .fixed-form .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); } .fixed-form .box { position: absolute; width: 90%; max-width: 640px; right: 70px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: #fff; } .fixed-form .close { position: absolute; top: 35px; right: 30px; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/close-1.png"); cursor: pointer; } .fixed-form h3 { padding: 0 30px; font-size: 24px; line-height: 90px; color: #fff; background-color: #29489a; } .fixed-form h3:before { content: ''; width: 26px; height: 24px; display: inline-block; vertical-align: middle; margin: -4px 10px 0 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/fixed-1.png"); } .fixed-form .center-box { padding: 2vw 3.125vw; max-height: 60vh; overflow: auto; } .fixed-form .label { margin-top: 12px; } .fixed-form .label:nth-of-type(1) { margin-top: 0; } .fixed-form .label span { display: inline-block; vertical-align: top; width: 90px; font-size: 14px; line-height: 48px; color: #808080; } .fixed-form .label i { font-style: normal; color: #f00; } .fixed-form .label input { display: inline-block; vertical-align: top; width: calc(100% - 92px); height: 48px; border: 1px solid #e6e6e6; border-radius: 3px; padding: 0 20px; font-size: 12px; color: #808080; } .fixed-form .label textarea { display: inline-block; vertical-align: top; width: calc(100% - 90px); height: 120px; border: 1px solid #e6e6e6; border-radius: 3px; padding: 10px 20px; font-size: 12px; color: #808080; resize: none; } .fixed-form .bot-box { background-color: #f5f5f5; padding: 2vw 3.125vw; } .fixed-form .bot-box button { display: block; width: 70%; max-width: 320px; height: 48px; margin: 0 auto; background-image: linear-gradient(90deg, #f7b42a, #f29803); box-shadow: 0 10px 30px rgba(245, 168, 26, 0.3); border-radius: 5px; font-size: 16px; color: #5c3e3e; cursor: pointer; } /* media */ @media screen and (max-width: 1600px) { .header .logo { margin-top: -25px; } .header .logo img { height: 50px; } .header .nav li a.single { font-size: 16px; line-height: 80px; } .footer .logo img { height: 60px; } .fixed-form .box { max-width: 600px; } .fixed-form h3 { font-size: 20px; line-height: 80px; } .fixed-form .close { top: 30px; } .head-nav { top: 80px; } .head-nav .left-box a { font-size: 17px; line-height: 54px; } .head-nav .right-box .b-div-2 a { width: 160px; } .header .nav li .drop-1 { width: 200px; margin-left: -100px; } .header .nav li .drop-1 a { font-size: 15px; line-height: 50px; } } @media screen and (max-width: 1366px) { .header .nav li a.single { font-size: 15px; padding: 0 10px; } .header .nav:after, .header .lang { margin: 0 10px; } .header .search { margin-left: 10px; } .footer .logo img { height: 50px; } .footer .slogan { font-size: 14px; } .footer .info p { font-size: 12px; line-height: 24px; } .footer .info p a.pos { font-size: 14px; } .footer .bot-block { font-size: 12px; line-height: 20px; } .footer .ewm-box img { width: 100px; } .footer .ewm-box p { font-size: 12px; } .fixed-form h3 { font-size: 18px; line-height: 70px; } .fixed-form .close { top: 25px; } .head-nav .left-box a { font-size: 16px; line-height: 50px; } .head-nav .right-box .b-div-2 h3 { font-size: 20px; } .head-nav .right-box .b-div-2 p { font-size: 14px; line-height: 24px; } .head-nav .right-box .b-div-2 a { width: 120px; line-height: 40px; font-size: 15px; } .header .nav li .drop-1 { width: 160px; margin-left: -80px; } .header .nav li .drop-1 a { font-size: 14px; line-height: 44px; } } /* common */ .c-pd { padding-top: 100px; } .c-main { position: relative; } .c-main:after { content: ''; display: block; clear: both; } .c-nav { position: sticky; top: 70px; padding: 0 3.125vw; display: flex; justify-content: space-between; font-size: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); z-index: 5; } .c-nav a { transition: all .3s ease; } .c-nav a.home { width: 14px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/home.png"); } .c-nav a.link { font-size: 14px; color: #808080; line-height: 60px; position: relative; } .c-nav a.link:hover, .c-nav a.link.active { color: #29489a; } .c-nav .left-box a { display: inline-block; vertical-align: middle; } .c-nav .left-box a:before { content: ''; width: 7px; height: 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-3.png"); margin: -2px 20px 0; display: inline-block; vertical-align: middle; } .c-nav .left-box a:first-of-type:before { display: none; } .c-nav .right-box a { display: inline-block; vertical-align: top; padding: 0 20px; } .c-nav .right-box a:before { content: ''; width: 100%; height: 2px; background-color: #29489a; position: absolute; bottom: 0; left: 0; transform: scaleX(0); transition: transform .6s ease; } .c-nav .right-box a:hover:before, .c-nav .right-box a.active:before { transform: scaleX(1); } .c-nav.white { background-color: #fff; } .c-nav.gray { background-color: #f6f6f6; } .c-banner { position: relative; overflow: hidden; } .c-banner .item { position: relative; height: calc(100vh - 160px); overflow: hidden; } .c-banner .item img { height: 100%; object-fit: cover; } .c-banner .item-1 { position: relative; height: 100vh; overflow: hidden; } .c-banner .item-1 img { height: 100%; object-fit: cover; } .c-banner img { display: block; width: 100%; } .c-banner video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .c-banner .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; background-color: rgba(0, 0, 0, 0.3); } .c-banner h3 { font-size: 60px; color: #fff; text-align: center; } .c-banner h4 { font-size: 24px; color: #fff; text-align: center; margin-bottom: 15px; } .c-banner p { font-size: 18px; line-height: 2; color: #fff; text-align: center; margin-top: 15px; } .c-banner form { display: block; width: 70%; max-width: 1200px; height: 60px; margin: 2vw auto 0; border-radius: 3px; position: relative; overflow: hidden; } .c-banner input { display: block; width: 100%; height: 100%; padding: 0 20px; font-size: 14px; color: #808080; } .c-banner button { position: absolute; right: 0; top: 0; width: 60px; height: 60px; background-position: center; background-repeat: no-repeat; background-color: transparent; background-image: url("../images/news/icon-1.png"); cursor: pointer; } .c-banner .pagination { position: absolute; left: 9.375vw; right: 9.375vw; font-size: 0; bottom: 3.125vw; text-align: center; z-index: 2; } .c-banner .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; position: relative; cursor: pointer; } .c-banner .pagination span:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid rgba(255, 255, 255, 0.5); border-radius: 50%; transition: all .3s ease; } .c-banner .pagination span:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-1.png"); opacity: 0; transition: all .3s ease; } .c-banner .pagination span.active:before { opacity: 0; } .c-banner .pagination span.active:after { opacity: 1; animation: o-rotate 5s linear infinite; } .c-banner .tip { text-align: center; font-size: 0; margin-top: 2vw; } .c-banner .tip a { display: inline-block; vertical-align: top; margin: 0 20px; font-size: 18px; line-height: 24px; color: #fff; padding-left: 34px; position: relative; } .c-banner .tip a:before { content: ''; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; position: absolute; top: 0; left: 0; } .c-banner .tip a:after { content: ''; width: 16px; height: 16px; background-image: linear-gradient(90deg, #5051f3, #c9449a); border-radius: 50%; position: absolute; top: 4px; left: 4px; opacity: 0; } .c-banner .tip a.active:after { opacity: 1; } .video-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none; } .video-pop .bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .video-pop .close { width: 32px; height: 32px; position: absolute; right: 20px; top: 20px; background: url("../images/close.png") center no-repeat; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; z-index: 2; } .video-pop .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .video-pop video { position: absolute; top: 50%; left: 50%; max-height: 80vh; max-width: 75vw; z-index: 3; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .index-tit h3 { font-size: 32px; letter-spacing: 2px; } .index-tit p { font-size: 18px; line-height: 30px; letter-spacing: 2px; margin-top: 15px; } .index-tit:after { content: ''; width: 60px; height: 4px; display: block; margin-top: 30px; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .index-tit.gray h3 { color: #333333; } .index-tit.gray p { color: #666; } .index-tit.white h3, .index-tit.white p { color: #fff; } .index-tit.center { text-align: center; } .index-tit.center:after { margin-left: auto; margin-right: auto; } .index-tit.noline:after { display: none; } .inner-tit h3 { font-size: 36px; letter-spacing: 2px; } .inner-tit h4 { font-size: 24px; } .inner-tit h4 span { font-size: 36px; font-family: 'NeutraTextBook'; } .inner-tit:after { content: ''; width: 60px; height: 4px; display: block; margin-top: 20px; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .inner-tit.center { text-align: center; } .inner-tit.center:after { margin-left: auto; margin-right: auto; } .inner-tit.gray h3 { color: #333333; } .inner-tit.gray h4 { color: #808080; } .inner-tit.white h3 { color: #fff; } .comm-page { font-size: 0; text-align: center; } .comm-page li { display: inline-block; vertical-align: top; margin: 0 5px; } .comm-page li a { display: block; width: 40px; height: 40px; font-size: 14px; color: #666; line-height: 38px; font-family: 'DINPro-Light'; text-align: center; border: 1px solid #d9d9d9; } .comm-page li:first-of-type a, .comm-page li:last-of-type a { width: 60px; font-size: 12px; } .comm-page li:hover a, .comm-page li.active a { border-color: transparent; background-image: linear-gradient(90deg, #001066, #2f50a2); color: #fff; } .comm-share { float: right; width: 12.5vw; margin-top: 30vh; position: sticky; top: 180px; z-index: 4; } .comm-share .box { width: 40px; } .comm-share span { display: block; font-size: 14px; color: #808080; text-align: center; } .comm-share a { display: block; width: 40px; height: 40px !important; padding: 0 !important; margin: 30px 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.wx { background-image: url("../images/news/share-1.png"); } .comm-share a.wx:hover { background-image: url("../images/news/share-1-on.png"); } .comm-share a.sina { background-image: url("../images/news/share-2.png"); } .comm-share a.sina:hover { background-image: url("../images/news/share-2-on.png"); } .comm-share a.link { background-image: url("../images/news/share-3.png"); } .comm-share a.link:hover { background-image: url("../images/news/share-3-on.png"); } .c-section-1 { padding: 6.25vw 0; position: relative; overflow: hidden; } .c-section-1 .img-box { position: absolute; top: 0; left: 0; right: 0; } .c-section-1 .img-box img { display: block; width: 100%; -webkit-transition: transform 0.5s ease-out; -moz-transition: transform 0.5s ease-out; -ms-transition: transform 0.5s ease-out; transition: transform 0.5s ease-out; } .c-section-1 h3 { font-size: 42px; color: #fff; text-align: center; } .c-section-1 a { display: block; width: 240px; font-size: 22px; line-height: 60px; color: #5c3e3e; text-align: center; margin: 2vw auto 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); background-image: linear-gradient(152deg, #f7b42a, #f29803); transition: all .3s ease; } .c-section-1 a:hover { transform: translateY(-5px); } .operation-page .c-banner h3, .solution-page .c-banner h3, .service-page .c-banner h3 { text-align: left; } /* index */ .index-main { background-color: #f7f7f7; overflow: hidden; } .index-s1 { height: 100vh; position: relative; background-color: #fff; } .index-s1 .item { height: 100vh; position: relative; background-color: #fff; overflow: hidden; } .index-s1 .item .img-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .index-s1 .item .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .index-s1 .item video { height: 110%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .index-s1 .item-1 .img-box:before { content: ''; width: 50vw; height: 50vw; border-radius: 50%; background-color: rgba(0, 16, 102, 0.08); filter: blur(20px); position: absolute; bottom: -27.5vw; left: -20.3vw; animation: o-ani-1 10s linear infinite; } .index-s1 .item-1 .ani-box { width: 56vw; height: 56vw; position: absolute; top: 50%; right: -4.5vw; margin-top: -27vw; z-index: 2; } .index-s1 .item-1 .ani-box:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #f4f5f9; z-index: 1; transform: scale(0.7); opacity: .5; animation: o-ani-2 2s linear infinite; } .index-s1 .item-1 .ani-box .circle-1 { width: 60vw; max-width: 1140px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .index-s1 .item-1 .ani-box .circle-1 img { display: block; width: 100%; animation: o-rotate 20s linear infinite; } .index-s1 .item-1 .ani-box .circle-2 { width: 60vw; max-width: 1140px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .index-s1 .item-1 .ani-box .circle-2 img { display: block; width: 100%; animation: o-rotate 20s linear infinite reverse; } .index-s1 .item-1 .ani-box .circle-3 { width: 42vw; max-width: 790px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; } .index-s1 .item-1 .ani-box .circle-3 img { display: block; width: 100%; } .index-s1 .item-1 h3, .index-s1 .item-1 p, .index-s1 .item-1 .btn { opacity: 0; transform: translateY(2vw); transition: all .6s; } .index-s1 .item-1 h3 { font-size: 48px; color: #343434; line-height: 1.25; } .index-s1 .item-1 p { font-size: 20px; line-height: 1.6; color: #808080; margin-top: 20px; width: 45%; } .index-s1 .item-1 .btn { margin-top: 2vw; } .index-s1 .item-1 a { display: block; width: 180px; font-size: 20px; line-height: 60px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .index-s1 .item-1 a:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .index-s1 .item-1.swiper-slide-active h3, .index-s1 .item-1.swiper-slide-active p, .index-s1 .item-1.swiper-slide-active .btn { opacity: 1; transform: translateX(0); } .index-s1 .item-1.swiper-slide-active h3 { transition-delay: .5s; } .index-s1 .item-1.swiper-slide-active p { transition-delay: .7s; } .index-s1 .item-1.swiper-slide-active .btn { transition-delay: .9s; } .index-s1 .item-2 .bg { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .index-s1 .button { width: 14px; height: 18px; position: absolute; top: 50%; margin-top: -9px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/prev-3.png"); transition: all .3s ease; z-index: 2; cursor: pointer; } .index-s1 .button:hover { background-image: url("../images/index/prev-2.png"); } .index-s1 .button-prev { left: 3.125vw; } .index-s1 .button-next { right: 3.125vw; transform: rotateY(180deg); } .index-s1 .pagination { position: absolute; left: 9.375vw; right: 9.375vw; font-size: 0; bottom: 3.125vw; z-index: 2; } .index-s1 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; position: relative; cursor: pointer; } .index-s1 .pagination span:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid #b7bed5; border-radius: 50%; transition: all .3s ease; } .index-s1 .pagination span:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-4.png"); opacity: 0; transition: all .3s ease; } .index-s1 .pagination span.active:before { opacity: 0; } .index-s1 .pagination span.active:after { opacity: 1; animation: o-rotate 5s linear infinite; } .index-s2 { padding-top: 6.25vw; font-size: 0; position: relative; } .index-s2 .left-box { width: 41.875%; padding-left: 9.375vw; } .index-s2 .left-box .items { display: flex; flex-wrap: wrap; margin: 3.125vw -12px 0; } .index-s2 .left-box .item { width: calc(50% - 24px); margin: 0 12px; padding: 2vw; background-color: #fff; box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.05); transition: all .3s ease; } .index-s2 .left-box .item:nth-of-type(3), .index-s2 .left-box .item:nth-of-type(4) { margin-top: 24px; } .index-s2 .left-box .item .num { color: #565656; } .index-s2 .left-box .item span { display: inline-block; vertical-align: middle; margin-right: 10px; line-height: 1; font-size: 48px; font-family: 'DINPro-Bold'; transition: all .3s ease; } .index-s2 .left-box .item i { display: inline-block; vertical-align: middle; font-size: 32px; font-family: 'DINPro-Regular'; font-style: normal; transition: all .3s ease; } .index-s2 .left-box .item em { display: inline-block; vertical-align: middle; font-size: 14px; font-style: normal; transition: all .3s ease; } .index-s2 .left-box .item h3 { font-size: 20px; color: #333; letter-spacing: 2px; margin: 15px 0; } .index-s2 .left-box .item p { font-size: 14px; line-height: 18px; color: #666666; } .index-s2 .left-box .item:hover { transform: translateY(-10px); box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.2); } .index-s2 .left-box .item:hover span, .index-s2 .left-box .item:hover i, .index-s2 .left-box .item:hover em { color: #29489a; text-shadow: 0 15px 10px rgba(0, 16, 102, 0.3); } .index-s2 .right-box { width: 58%; max-width: 1082px; position: absolute; top: 12px; right: 0; } .index-s2 .right-box img.bg { display: block; width: 100%; } .index-s2 .right-box .tip { position: absolute; right: 22.18%; top: 51.17%; background-color: #fff; border: 1px dashed #e6e6e6; border-radius: 5px; text-align: center; font-size: 16px; line-height: 2; color: #808080; padding: 1.5vw 3vw; box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1); z-index: 2; } .index-s2 .right-box .tip span { display: inline-block; vertical-align: middle; margin: -5px 5px 0 0; font-size: 36px; color: #29489a; font-family: 'NeutraTextBook'; line-height: 1; } .index-s2 .right-box .dot { width: 20px; height: 20px; position: absolute; margin: -10px 0 0 -10px; z-index: 1; } .index-s2 .right-box .dot:before { content: ''; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-5.png"); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: all .3s ease; cursor: pointer; z-index: 2; cursor: pointer; } .index-s2 .right-box .dot .range { position: absolute; top: -20px; left: -20px; width: 60px; height: 60px; z-index: 1; opacity: 0; animation: o-map-1 6.4s linear infinite; } .index-s2 .right-box .dot .range:before { content: ''; width: 12px; height: 12px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; z-index: 2; } .index-s2 .right-box .dot .range:after { content: ''; width: 8px; height: 8px; background-color: #1f3a8d; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -4px 0 0 -4px; z-index: 3; } .index-s2 .right-box .dot .range span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(31, 58, 141, 0.1); border-radius: 50%; opacity: 0; transform: scale(0); animation: o-map 3s linear infinite; z-index: 1; } .index-s2 .right-box .dot .range span:nth-of-type(2) { animation-delay: 1s; } .index-s2 .right-box .dot .range span:nth-of-type(3) { animation-delay: 2s; } .index-s2 .right-box .dot .hide { padding-right: 90px; position: absolute; bottom: -40px; right: 10px; opacity: 0; visibility: hidden; z-index: 2; } .index-s2 .right-box .dot .hide:after { content: ''; width: 90px; height: 84px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/img-7.png"); position: absolute; bottom: 50px; right: 0; } .index-s2 .right-box .dot .hide .box { position: relative; width: 320px; min-height: 160px; padding: 30px; border-radius: 20px 0 20px 0; background-image: linear-gradient(40deg, #001066, #2f50a2); } .index-s2 .right-box .dot .hide h3 { font-size: 20px; color: #fff; } .index-s2 .right-box .dot .hide p { font-size: 14px; line-height: 20px; color: #ffffff; margin: 10px 0; } .index-s2 .right-box .dot .hide .tel { font-size: 16px; color: #fff; font-family: 'NeutraTextBookAlt'; } .index-s2 .right-box .dot .hide .tel:before { content: ''; width: 12px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-6.png"); display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .index-s2 .right-box .dot .hide i { width: 14px; height: 14px; border: 1px solid transparent; position: absolute; } .index-s2 .right-box .dot .hide i.lb { border-left-color: #fff; border-bottom-color: #fff; left: 10px; bottom: 10px; } .index-s2 .right-box .dot .hide i.rt { border-top-color: #fff; border-right-color: #fff; top: 10px; right: 10px; } .index-s2 .right-box .dot:nth-of-type(8n-1) .range { animation-delay: .8s; } .index-s2 .right-box .dot:nth-of-type(8n-2) .range { animation-delay: 1.6s; } .index-s2 .right-box .dot:nth-of-type(8n-3) .range { animation-delay: 2.4s; } .index-s2 .right-box .dot:nth-of-type(8n-4) .range { animation-delay: 3.2s; } .index-s2 .right-box .dot:nth-of-type(8n-5) .range { animation-delay: 4s; } .index-s2 .right-box .dot:nth-of-type(8n-6) .range { animation-delay: 4.8s; } .index-s2 .right-box .dot:nth-of-type(8n-7) .range { animation-delay: 5.6s; } .index-s2 .right-box .dot.active { z-index: 2; } .index-s2 .right-box .dot.active:before { opacity: 1; } .index-s2 .right-box .dot.active .hide { opacity: 1; visibility: visible; transition: all .3s ease; } .index-s2 .right-box .dot.beijing { top: 23.6%; left: 53.5%; } .index-s2 .right-box .dot.tianjin { top: 25.2%; left: 55.2%; } .index-s2 .right-box .dot.shanghai { top: 35%; left: 61.3%; } .index-s2 .right-box .dot.chongqing { top: 38.21%; left: 44.5%; } .index-s2 .right-box .dot.hebei { top: 27%; left: 52.8%; } .index-s2 .right-box .dot.shanxi { top: 28%; left: 49.5%; } .index-s2 .right-box .dot.liaoning { top: 21.21%; left: 60.05%; } .index-s2 .right-box .dot.jilin { top: 17.5%; left: 62.79%; } .index-s2 .right-box .dot.heilongjiang { top: 13.1%; left: 63.79%; } .index-s2 .right-box .dot.jiangsu { top: 33%; left: 59%; } .index-s2 .right-box .dot.zhejiang { top: 38%; left: 60%; } .index-s2 .right-box .dot.anhui { top: 34.82%; left: 56%; } .index-s2 .right-box .dot.fujian { top: 42.63%; left: 58.1%; } .index-s2 .right-box .dot.jiangxi { top: 40.5%; left: 54.75%; } .index-s2 .right-box .dot.shandong { top: 28.5%; left: 55.61%; } .index-s2 .right-box .dot.henan { top: 32.58%; left: 51%; } .index-s2 .right-box .dot.hubei { top: 36.39%; left: 50%; } .index-s2 .right-box .dot.hunan { top: 40.84%; left: 49.73%; } .index-s2 .right-box .dot.guangdong { top: 45.5%; left: 52.19%; } .index-s2 .right-box .dot.hainan { top: 52.2%; left: 47.6%; } .index-s2 .right-box .dot.sichuan { top: 36.85%; left: 37.43%; } .index-s2 .right-box .dot.guizhou { top: 42.02%; left: 44.33%; } .index-s2 .right-box .dot.yunnan { top: 45.62%; left: 37.03%; } .index-s2 .right-box .dot.shanxi1 { top: 33%; left: 45.3%; } .index-s2 .right-box .dot.gansu { top: 29.95%; left: 40%; } .index-s2 .right-box .dot.qinghai { top: 28.71%; left: 30%; } .index-s2 .right-box .dot.yajiada { top: 76.5%; left: 59%; } .index-s2 .right-box .dot.neimenggu { top: 23.63%; left: 46%; } .index-s2 .right-box .dot.guangxi { top: 46.95%; left: 46.5%; } .index-s2 .right-box .dot.xizang { top: 32.79%; left: 18.07%; } .index-s2 .right-box .dot.ningxia { top: 28%; left: 42.3%; } .index-s2 .right-box .dot.xinjiang { top: 22%; left: 19.7%; } .index-s2 .right-box .dot.xianggang { top: 48%; left: 53.18%; } .index-s2 .right-box .dot.xinjiapo { top: 75.3%; left: 41.2%; } .index-s3 { padding: 8.33vw 0 6.25vw; font-size: 0; } .index-s3 .items { margin: 3.125vw -12px 0; display: flex; } .index-s3 .item { width: calc(33.33% - 24px); margin: 0 12px; padding: 4vw 2vw; background-color: #fff; transition: all .3s ease; } .index-s3 .item:before { content: ''; display: block; height: 10vw; max-height: 188px; background-position: center; background-repeat: no-repeat; background-size: contain; } .index-s3 .item:nth-of-type(1):before { background-image: url("../images/index/icon-1-1.png"); } .index-s3 .item:nth-of-type(2):before { background-image: url("../images/index/icon-1-2.png"); } .index-s3 .item:nth-of-type(3):before { background-image: url("../images/index/icon-1-3.png"); } .index-s3 .item h3 { font-size: 24px; color: #333333; text-align: center; margin: 15px 0; } .index-s3 .item p { font-size: 16px; line-height: 2; color: #666666; } .index-s3 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .index-s4 { height: 100vh; position: relative; overflow: hidden; } .index-s4 .tab-cont { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; z-index: 1; } .index-s4 .tab-cont .item { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: all .6s ease; } .index-s4 .tab-cont .item img { display: block; width: 100%; height: 100%; object-fit: cover; animation: o-scale 20s linear infinite; } .index-s4 .tab-cont .item.active { opacity: 1; } .index-s4 .cont { width: 36vw; position: absolute; top: 0; bottom: 0; right: 0; padding: 0 6.25vw; background-image: linear-gradient(40deg, rgba(0, 16, 102, 0.9), rgba(47, 80, 162, 0.9)); z-index: 2; } .index-s4 .tab-tit { margin: 6.25vw -3.125vw 0; } .index-s4 .tab-tit .item { padding: 0 3.125vw; position: relative; font-size: 18px; line-height: 60px; color: #fff; transition: all .3s ease; cursor: pointer; } .index-s4 .tab-tit .item:before { content: ''; width: 60px; height: 1px; background-color: #fff; position: absolute; right: 6.25vw; top: 50%; transform-origin: right top; transform: scaleX(0); } .index-s4 .tab-tit .item:after { content: ''; width: 1.875vw; height: 1.875vw; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-2-1.png"); position: absolute; right: 3.125vw; top: 50%; margin-top: -0.9375vw; } .index-s4 .tab-tit .item span { font-size: 20px; font-family: 'DINPro-Regular'; display: inline-block; vertical-align: middle; margin: -4px 15px 0 0; } .index-s4 .tab-tit .item a { color: #fff; } .index-s4 .tab-tit .item.active { background-color: rgba(255, 255, 255, 0.1); } .index-s4 .tab-tit .item.active:before { transform: scaleX(1); transition: transform .6s ease; } .index-s4 .tab-tit .item.active:after { background-image: url("../images/index/icon-2-2.png"); animation: o-rotate 10s linear infinite; } .index-s5 { padding: 6.25vw 0; background-color: #fff; font-size: 0; } .index-s5 .bot-block { margin-top: 3.125vw; position: relative; } .index-s5 .bot-block .items { padding-left: 9.375vw; padding-right: calc(70.625vw + 24px); } .index-s5 .bot-block .item { position: relative; overflow: hidden; width: 18.75vw; height: 31.25vw; transition: width .5s ease; } .index-s5 .bot-block .item .img-box { width: 61.25vw; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -30.625vw; z-index: 1; opacity: .1; transition: opacity .3s ease; } .index-s5 .bot-block .item .show { position: absolute; left: 0; bottom: 0; width: 18.75vw; padding: 3.125vw; font-size: 24px; line-height: 1.5; color: #fff; z-index: 2; transition: all .3s ease; } .index-s5 .bot-block .item .hide { width: 61.25vw; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -30.625vw; padding: 6.25vw; z-index: 2; opacity: 0; visibility: hidden; transition: all .3s ease; } .index-s5 .bot-block .item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .index-s5 .bot-block .item h3 { font-size: 24px; color: #fff; } .index-s5 .bot-block .item h3:after { content: ''; width: 60px; height: 4px; display: block; margin-top: 20px; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .index-s5 .bot-block .item p { font-size: 16px; line-height: 2; color: #ffffff; margin-top: 15px; } .index-s5 .bot-block .item a { display: block; position: absolute; bottom: 6.25vw; left: 6.25vw; width: 120px; font-size: 14px; line-height: 40px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .index-s5 .bot-block .item a:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .index-s5 .bot-block .item:hover img { transform: scale(1.1); } .index-s5 .bot-block .item.swiper-slide-active { width: 61.25vw; } .index-s5 .bot-block .item.swiper-slide-active .show { opacity: 0; visibility: hidden; } .index-s5 .bot-block .item.swiper-slide-active .hide { opacity: 1; visibility: visible; } .index-s5 .bot-block .item.swiper-slide-active .img-box, .index-s5 .bot-block .item.swiper-slide-next .img-box { opacity: 1; } .index-s5 .button { position: absolute; top: 50%; margin-top: -30px; width: 60px; height: 60px; background-position: center; background-repeat: no-repeat; background-color: transparent; background-image: url("../images/index/prev-3.png"); transition: all .3s ease; cursor: pointer; z-index: 2; } .index-s5 .button:hover { background-color: #172573; background-image: url("../images/index/prev-4.png"); } .index-s5 .button-prev { left: 0; } .index-s5 .button-next { right: 0; transform: rotateY(180deg); } .index-s5 .pagination { margin-top: 2vw; text-align: center; } .index-s5 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-3-1.png"); cursor: pointer; } .index-s5 .pagination span.active { background-image: url("../images/index/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .index-s5 a.more { display: block; position: absolute; right: 0; top: 60px; width: 180px; font-size: 16px; line-height: 48px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .index-s5 a.more:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .index-s6 { padding: 6.25vw 0; font-size: 0; background-color: #f6f9fd; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/index/img-3.png"); background-size: 100% auto; background-attachment: fixed; } .index-s6 .tab-tit { position: absolute; right: 0; top: 60px; } .index-s6 .tab-tit .item { display: inline-block; vertical-align: top; width: 180px; font-size: 16px; line-height: 48px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); padding: 1px; cursor: pointer; } .index-s6 .tab-tit .item:nth-of-type(2) { margin-left: 24px; } .index-s6 .tab-tit .item span { display: block; background-color: #f6f9fd; transition: all .3s ease; } .index-s6 .tab-tit .item:hover span, .index-s6 .tab-tit .item.active span { background-color: transparent; } .index-s6 .b-tab-cont { margin-top: 3.125vw; } .index-s6 .b-child { display: none; } .index-s6 .b-child.active { display: block; } .index-s6 .b-logo { font-size: 0; margin-right: -5px; opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index-s6 .b-logo .logo-tit { display: inline-block; vertical-align: top; width: 16.66%; max-width: 260px; padding: 1px; position: relative; margin: -1px 0 0 -1px; cursor: pointer; z-index: 1; } .index-s6 .b-logo .logo-tit:before, .index-s6 .b-logo .logo-tit:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; z-index: 1; } .index-s6 .b-logo .logo-tit:before { border-color: #dfe1e6; } .index-s6 .b-logo .logo-tit:after { border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; opacity: 0; transition: box-shadow .3s ease; } .index-s6 .b-logo .logo-tit .img-box { position: relative; z-index: 2; overflow: hidden; } .index-s6 .b-logo .logo-tit img { display: block; width: 100%; transition: transform .3s ease; } .index-s6 .b-logo .logo-tit.active, .index-s6 .b-logo .logo-tit:hover { z-index: 2; } .index-s6 .b-logo .logo-tit.active:before, .index-s6 .b-logo .logo-tit:hover:before { opacity: 0; } .index-s6 .b-logo .logo-tit.active:after, .index-s6 .b-logo .logo-tit:hover:after { opacity: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .index-s6 .b-logo .logo-tit.active img, .index-s6 .b-logo .logo-tit:hover img { transform: scale(1.1); } .index-s6 .b-btns { margin: 2vw 0; font-size: 0; text-align: right; } .index-s6 .b-btns .button { display: inline-block; vertical-align: top; width: 13px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/prev-1.png"); cursor: pointer; transition: all .3s ease; } .index-s6 .b-btns .button:hover { background-image: url("../images/index/prev-2.png"); } .index-s6 .b-btns .button-next { margin-left: 2vw; transform: rotateY(-180deg); } .index-s6 .s-tab-cont { padding: 1.5vw 2vw; background-color: #fff; border: 1px solid; border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; overflow: hidden; opacity: 0; animation: o-upfade-top 0.7s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index-s6 .s-child { display: none; } .index-s6 .s-child.active { display: block; } .index-s6 .s-child h3, .index-s6 .s-child p, .index-s6 .s-child .btn { opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index-s6 .s-child h3 { font-size: 24px; color: #333; } .index-s6 .s-child p { font-size: 16px; line-height: 2; color: #666; margin-top: 20px; animation-delay: .1s; } .index-s6 .s-child .btn { margin-top: 20px; animation-delay: .2s; } .index-s6 .s-child a { display: block; width: 120px; font-size: 14px; line-height: 40px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .index-s6 .s-child a:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .index-s7 { padding: 6.25vw 0; font-size: 0; background-color: #fff; } .index-s7 .cont { margin-top: 3.125vw; display: flex; } .index-s7 .left-box { width: 50%; padding-right: 12px; } .index-s7 .left-box a { display: block; position: relative; } .index-s7 .left-box .img-block { overflow: hidden; } .index-s7 .left-box .txt-block { position: absolute; padding: 5vw 2vw 6.25vw; top: 0; left: 0; right: 0; bottom: 0; transition: background .3s ease; z-index: 2; } .index-s7 .left-box img { display: block; width: 100%; transition: all .6s ease; } .index-s7 .left-box .date { font-size: 18px; color: #fff; font-family: 'DINPro-Regular'; } .index-s7 .left-box h3 { font-size: 22px; line-height: 32px; color: #fff; letter-spacing: 2px; margin: 1.5vw 0; } .index-s7 .left-box p { font-size: 16px; line-height: 2; color: #fff; } .index-s7 .left-box span { display: block; position: absolute; bottom: 6.25vw; left: 2vw; width: 120px; font-size: 14px; line-height: 40px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .index-s7 .left-box span:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .index-s7 .left-box:hover img { transform: scale(1.1); } .index-s7 .left-box:hover .txt-block { background-color: rgba(0, 0, 0, 0.3); } .index-s7 .right-box { width: 50%; padding-left: 12px; } .index-s7 .item { width: calc(50% - 12px); height: calc(50% - 12px); display: inline-block; vertical-align: top; position: relative; } .index-s7 .item:nth-of-type(even) { margin-left: 24px; } .index-s7 .item:nth-of-type(3), .index-s7 .item:nth-of-type(4) { margin-top: 24px; } .index-s7 .item a { display: block; height: 100%; } .index-s7 .item .img-box { height: 100%; overflow: hidden; } .index-s7 .item .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 2vw; z-index: 2; transition: background .3s ease; } .index-s7 .item .box { position: relative; transition: all .3s ease; } .index-s7 .item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .index-s7 .item .date { font-size: 18px; color: #fff; font-family: 'DINPro-Regular'; } .index-s7 .item h3 { font-size: 22px; line-height: 32px; color: #fff; letter-spacing: 2px; margin-top: 1.5vw; height: 96px; overflow: hidden; } .index-s7 .item span { display: block; position: absolute; bottom: 0; left: 0; font-size: 14px; line-height: 24px; color: #fff; opacity: 0; transition: all .3s ease; } .index-s7 .item:hover img { transform: scale(1.1); } .index-s7 .item:hover .txt-box { background-color: rgba(0, 0, 0, 0.3); } .index-s7 .item:hover .box { padding-bottom: 40px; } .index-s7 .item:hover span { opacity: 1; } .index-s7 a.more { display: block; position: absolute; right: 0; top: 60px; width: 180px; font-size: 16px; line-height: 48px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .index-s7 a.more:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .index-s8 { font-size: 0; padding: 6.25vw 0; background-color: #f7f7f7; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-8.png"); } .index-s8 .items { margin-top: 3.125vw; display: flex; } .index-s8 .item { position: relative; flex: 1; margin-left: 24px; } .index-s8 .item:nth-of-type(1) { margin-left: 0; } .index-s8 .item .box { transition: all .3s ease; } .index-s8 .item .icon { width: 12.5vw; height: 12.5vw; max-width: 240px; max-height: 240px; margin: 0 auto; position: relative; } .index-s8 .item .ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .index-s8 .item .ring span { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: rgba(99, 123, 224, 0.2); transform: scale(0.3); animation: ringscale 2s linear infinite; } .index-s8 .item .ring span:nth-of-type(2) { animation-delay: .7s; } .index-s8 .item .ring span:nth-of-type(3) { animation-delay: 1.4s; } .index-s8 .item i { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; position: relative; z-index: 2; } .index-s8 .item h3 { font-size: 24px; color: #333333; text-align: center; margin-top: 3.125vw; transition: color .3s ease; } .index-s8 .item p { font-size: 16px; line-height: 2; color: #666666; transition: color .3s ease; margin-top: 15px; } .index-s8 .item:nth-of-type(1) i { background-image: url("../images/index/icon-7-1.png"); } .index-s8 .item:nth-of-type(2) i { background-image: url("../images/index/icon-7-2.png"); } .index-s8 .item:nth-of-type(3) i { background-image: url("../images/index/icon-7-3.png"); } .index-s8 .item .show { padding: 3.125vw 2vw; background-color: #fff; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } .index-s8 .item .hide { height: 100%; background-image: linear-gradient(90deg, #5051f3, #c9449a); opacity: 0; visibility: hidden; padding: 6px; } .index-s8 .item .hide .cell-box { padding: 3.125vw 2vw; height: 100%; background-image: linear-gradient(180deg, #001066, #2f50a2); } .index-s8 .item:hover .show { opacity: 0; visibility: hidden; } .index-s8 .item:hover .hide { opacity: 1; visibility: visible; } .index-s8 .item:hover .hide i { transform: rotateY(360deg); transition: transform 1s ease; } .index-s8 .item:hover .hide h3, .index-s8 .item:hover .hide p { color: #fff; } .index-s8 .item:hover .ring span { background-color: rgba(255, 255, 255, 0.1); } .index-s9 .child { position: relative; display: none; opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .index-s9 .child.active { display: block; } .index-s9 .tab-tit { text-align: center; } .index-s9 .tab-tit .item { position: relative; display: inline-block; vertical-align: top; cursor: pointer; } .index-s9 .tab-tit .item:nth-of-type(2) { margin-left: 24px; } .index-s9 .tab-tit .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, #f7b42a, #f29803); opacity: 0; transition: all .3s ease; z-index: 1; } .index-s9 .tab-tit .item span { display: block; width: 120px; font-size: 14px; line-height: 36px; color: #fff; border: 2px solid #fff; position: relative; z-index: 2; transition: all .3s ease; } .index-s9 .tab-tit .item:hover:before, .index-s9 .tab-tit .item.active:before { opacity: 1; } .index-s9 .tab-tit .item:hover span, .index-s9 .tab-tit .item.active span { border-color: transparent; color: #5c3e3e; } .index-s9 .child-1 { background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-9-1.jpg"); } .index-s9 .child-1 .tab-tit { margin-top: 24px; } .index-s9 .child-1 .top-box { position: absolute; left: 0; right: 0; top: 6.125vw; } .index-s9 .child-2 { padding: 6.25vw 0 4.5vw; } .index-s9 .child-2 .backg { position: absolute; top: -40px; left: -40px; right: -40px; bottom: -40px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-9-2.jpg"); z-index: 1; } .index-s9 .child-2 .tab-tit { position: absolute; right: 0; top: 0; } .index-s9 .logo-box { overflow: hidden; } .index-s9 .logo-box img.bg { display: block; width: 100%; } .index-s9 .logo-box .ani { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .index-s9 .logo-box .ani img { display: block; height: 100%; position: absolute; bottom: -2vw; left: 0; margin-left: -12.5vw; } .index-s9 .planet { max-width: 1312px; margin: -6.25vw auto 0; position: relative; } .index-s9 .planet img.bg { display: block; width: 100%; } .index-s9 .planet .ani { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .index-s9 .planet .ani img { display: block; width: 100%; position: absolute; bottom: 0; left: 0; } /* news */ .news-list-s1 { padding: 6.25vw 0; font-size: 0; } .news-list-s1 .item { padding-bottom: 2vw; margin-bottom: 2vw; border-bottom: 1px solid #e6e6e6; } .news-list-s1 .item a { display: block; } .news-list-s1 .item .img-box { width: 25vw; display: inline-block; vertical-align: middle; overflow: hidden; } .news-list-s1 .item .txt-box { width: calc(100% - 25vw); display: inline-block; vertical-align: middle; padding-left: 3.125vw; } .news-list-s1 .item img { display: block; width: 100%; transition: transform .6s ease; } .news-list-s1 .item h3 { font-size: 24px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; } .news-list-s1 .item p { font-size: 16px; line-height: 2; color: #808080; max-height: 96px; overflow: hidden; margin: 15px 0; } .news-list-s1 .item span { display: block; font-size: 20px; color: #808080; font-family: 'NeutraTextBookAlt'; } .news-list-s1 .item:hover img { transform: scale(1.1); } .news-list-s1 .item:hover h3 { color: #29489a; } .news-list-s2 { padding: 6.25vw 0; font-size: 0; } .news-list-s2 .items { margin: 0 -1.5625vw 3.125vw; } .news-list-s2 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.25vw); margin: 1.77vw 1.5625vw 0; position: relative; transition: all .3s ease; } .news-list-s2 .item:nth-of-type(1), .news-list-s2 .item:nth-of-type(2), .news-list-s2 .item:nth-of-type(3) { margin-top: 0; } .news-list-s2 .item:after { content: ''; width: 100%; height: 2px; background-image: linear-gradient(90deg, #5051f3, #c9449a); position: absolute; bottom: 0; left: 0; transform-origin: left center; transform: scaleX(0); transition: transform .6s ease; } .news-list-s2 .item .img-box { overflow: hidden; } .news-list-s2 .item .txt-box { padding: 1.6vw; } .news-list-s2 .item img { display: block; width: 100%; transition: transform .6s ease; } .news-list-s2 .item h3 { font-size: 22px; line-height: 32px; height: 64px; overflow: hidden; } .news-list-s2 .item p { font-size: 14px; line-height: 28px; color: #808080; height: 56px; overflow: hidden; margin: 15px 0; } .news-list-s2 .item span { display: block; font-size: 20px; color: #808080; font-family: 'NeutraTextBookAlt'; } .news-list-s2 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .news-list-s2 .item:hover:after { transform: scaleX(1); } .news-list-s2 .item:hover img { transform: scale(1.1); } .news-detail-s1:after { content: ''; display: block; clear: both; } .news-detail-s1 .cont { width: calc(100% - 12.5vw); float: left; } .news-detail-s1 .block { margin-right: -12.5vw; padding: 6.25vw 0; } .news-detail-s1 .main { max-width: 1200px; margin: 0 auto; } .news-detail-s1 .top-block { border-bottom: 2px solid #e6e6e6; padding-bottom: 20px; margin-bottom: 3vw; } .news-detail-s1 .top-block h3 { font-size: 48px; color: #333333; letter-spacing: 1px; max-width: 90%; } .news-detail-s1 .top-block .date { font-size: 24px; color: #808080; font-family: 'NeutraTextLight'; margin-top: 2.5vw; } .news-detail-s1 .bot-block { padding-top: 20px; border-top: 2px solid #e6e6e6; } .news-detail-s1 .bot-block a { display: block; font-size: 16px; line-height: 2; color: #808080; transition: color .3s ease; } .news-detail-s1 .bot-block a:hover { color: #29489a; } .news-detail-s1 a.back { display: block; width: 120px; height: 120px; background-image: linear-gradient(90deg, #001066, #2f50a2); border-radius: 50%; margin: 3vw auto 4.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; } .news-detail-s1 a.back span { display: block; font-size: 14px; color: #fff; } .news-detail-s1 a.back span:before { content: ''; width: 26px; height: 24px; display: block; margin: 0 auto 15px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/news/icon-2.png"); } @media screen and (min-width: 1025px) { .news-detail-s1 a.back:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(15, 37, 122, 0.3); } } /* about */ .about-intro-s1 { padding: 6.25vw 0; } .about-intro-s1 .para { font-size: 18px; line-height: 2; color: #808080; margin-top: 2vw; } .about-intro-s1 .video-box { margin-top: 2vw; position: relative; overflow: hidden; } .about-intro-s1 .video-box img { display: block; width: 100%; transition: transform .6s ease; } .about-intro-s1 .video-box .video-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; } .about-intro-s1 .video-box .video-btn i { width: 80px; height: 80px; display: block; margin: 0 auto; position: relative; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-1.png"); } .about-intro-s1 .video-box .video-btn svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-intro-s1 .video-box .video-btn .cir1, .about-intro-s1 .video-box .video-btn .cir2 { stroke-width: 2px; stroke: #fff; fill: none; transition: all .3s ease; } .about-intro-s1 .video-box .video-btn .cir1 { stroke-dasharray: 314; stroke-dashoffset: 74; transform: rotate(90deg); transform-origin: center; } .about-intro-s1 .video-box .video-btn .cir2 { stroke-dasharray: 276; stroke-dashoffset: 76; transform: rotate(-20deg); transform-origin: center; } .about-intro-s1 .video-box .video-btn p { font-size: 14px; color: #fff; margin-top: 15px; } .about-intro-s1 .video-box .video-btn:hover .cir1 { stroke-dashoffset: 0; } .about-intro-s1 .video-box .video-btn:hover .cir2 { stroke-dashoffset: 0; } .about-intro-s1 .video-box:hover img { transform: scale(1.05); } .about-intro-s2 { padding: 18.75vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-1.jpg"); background-attachment: fixed; } .about-intro-s2 h3 { font-size: 32px; color: #fff; } .about-intro-s2 .para { font-size: 18px; line-height: 2; color: #fff; margin-top: 2vw; } .about-intro-s3 { padding: 6.25vw 0; } .about-intro-s3 .para { font-size: 18px; line-height: 2; color: #808080; } .about-intro-s4 { padding: 0 0 6.25vw; font-size: 0; } .about-intro-s4 .items { display: flex; justify-content: space-between; } .about-intro-s4 .item { width: 20%; max-width: 300px; text-align: center; transition: transform .3s ease; } .about-intro-s4 .item .icon { padding: 30px 0; border-bottom: 1px solid #e6e6e6; } .about-intro-s4 .item .icon:before { content: ''; display: block; margin: 0 auto; width: 4.8vw; height: 4.8vw; max-width: 90px; max-height: 90px; background-position: center; background-repeat: no-repeat; background-size: contain; } .about-intro-s4 .item:nth-of-type(1) .icon:before { background-image: url("../images/about/icon-1-1.png"); } .about-intro-s4 .item:nth-of-type(2) .icon:before { background-image: url("../images/about/icon-1-2.png"); } .about-intro-s4 .item:nth-of-type(3) .icon:before { background-image: url("../images/about/icon-1-3.png"); } .about-intro-s4 .item:nth-of-type(4) .icon:before { background-image: url("../images/about/icon-1-4.png"); } .about-intro-s4 .item h3 { font-size: 20px; color: #333; margin: 20px 0 15px; } .about-intro-s4 .item p { font-size: 14px; line-height: 20px; color: #666; height: 40px; } .about-intro-s4 .item .num { color: #333; margin-top: 30px; } .about-intro-s4 .item span { display: inline-block; vertical-align: middle; margin-right: 10px; line-height: 1; font-size: 60px; font-family: 'NeutraTextLight'; transition: all .3s ease; } .about-intro-s4 .item i { display: inline-block; vertical-align: middle; font-size: 48px; font-family: 'NeutraTextLight'; font-style: normal; transition: all .3s ease; } .about-intro-s4 .item em { display: inline-block; vertical-align: middle; font-size: 14px; font-style: normal; transition: all .3s ease; } .about-intro-s4 .item:hover { transform: translateY(-10px); } .about-intro-s4 .item:hover .icon:before { transform: rotateY(360deg); transition: transform 1s ease; } .about-history-s1 { padding: 6.25vw 0; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-3.jpg"); background-attachment: fixed; } .about-history-s1:after { content: ''; display: block; clear: both; } .about-history-s1 .line-box { width: 200px; float: right; position: sticky; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; } .about-history-s1 .line-box .line { position: relative; padding-right: 55px; text-align: right; font-size: 16px; line-height: 40px; color: #bfbfbf; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about-history-s1 .line-box .line:after { content: ''; width: 24px; height: 1px; background-color: #e6e6e6; position: absolute; right: 0; top: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .about-history-s1 .line-box .line.active { font-size: 24px; padding-right: 75px; color: #29489a; } .about-history-s1 .line-box .line.active:after { width: 48px; background-color: #29489a; } .about-history-s1 .line-box.show { opacity: 1; visibility: visible; } .about-history-s1 .cont { float: left; width: calc(100% - 200px); } .about-history-s1 .cont .main { margin-right: -200px; } .about-history-s1 .tip { font-size: 24px; line-height: 1.5; color: #333333; } .about-history-s1 .items { margin-top: 1.5625vw; } .about-history-s1 .item { padding: 4.5vw 0; position: relative; border-bottom: 4px solid #d9d9d9; } .about-history-s1 .item:after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background-image: linear-gradient(90deg, #5051f3, #c9449a); transition: transform .6s ease; transform-origin: left center; transform: scaleX(0); } .about-history-s1 .item .block { margin-top: 3.125vw; } .about-history-s1 .item .txt-box { display: inline-block; vertical-align: top; width: 58%; padding: 3.125vw 3.1254vw 0 0; } .about-history-s1 .item .img-box { display: inline-block; vertical-align: top; width: 42%; max-width: 640px; overflow: hidden; } .about-history-s1 .item .img-box img { display: block; width: 100%; transition: transform .6s ease; } .about-history-s1 .item .box { margin-top: 3.125vw; } .about-history-s1 .item .box:nth-of-type(1) { margin-top: 0; } .about-history-s1 .item .box .year { width: 190px; display: inline-block; vertical-align: top; font-size: 60px; line-height: 1; color: #29489a; font-family: 'NeutraTextBook'; } .about-history-s1 .item .box .para { display: inline-block; vertical-align: top; width: calc(100% - 190px); font-size: 16px; line-height: 2.25; color: #333; } .about-history-s1 .item .box .para p { padding-left: 15px; position: relative; } .about-history-s1 .item .box .para p:before { content: ''; width: 4px; height: 4px; background-color: #333; border-radius: 50%; position: absolute; left: 0; top: 16px; } .about-history-s1 .item.active .img-box img { transform: scale(1.1); } .about-history-s1 .item.active:after { transform: scaleX(1); } .about-partner-s1 { padding: 8.33vw 0; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/about/img-5.jpg"); background-size: 100% auto; text-align: center; } .about-partner-s1 h3 { font-size: 24px; line-height: 1.5; color: #333; } .about-partner-s1 p { font-size: 16px; line-height: 2; color: #333; margin-top: 2vw; } .about-partner-s2 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-8.jpg"); background-attachment: fixed; } .about-partner-s2 .cont { margin-top: 2vw; font-size: 0; } .about-partner-s2 .tab-tit { background-color: #fff; border-bottom: 1px solid #dfe1e6; } .about-partner-s2 .tab-tit .item { display: inline-block; vertical-align: top; width: 14.28%; max-width: 222px; position: relative; cursor: pointer; z-index: 1; } .about-partner-s2 .tab-tit .item:before, .about-partner-s2 .tab-tit .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .about-partner-s2 .tab-tit .item:before { border-right: 1px solid #dfe1e6; } .about-partner-s2 .tab-tit .item:after { border-width: 2px 1px 1px 1px; border-style: solid; border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; opacity: 0; transition: box-shadow .3s ease; } .about-partner-s2 .tab-tit .item .img-box { overflow: hidden; } .about-partner-s2 .tab-tit .item img { display: block; width: 100%; transition: transform .3s ease; } .about-partner-s2 .tab-tit .item:hover img { transform: scale(1.1); } .about-partner-s2 .tab-tit .item:nth-of-type(7n):before { display: none; } .about-partner-s2 .tab-tit .item.active { z-index: 2; } .about-partner-s2 .tab-tit .item.active:before { opacity: 0; } .about-partner-s2 .tab-tit .item.active:after { opacity: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .about-partner-s2 .tab-tit .item.active img { transform: scale(1.1); } .about-partner-s2 .tab-cont { background-color: #f7f7f7; } .about-partner-s2 .tab-cont .child { position: relative; display: none; } .about-partner-s2 .tab-cont .child.active { display: block; } .about-partner-s2 .tab-cont .img-box { width: 50%; overflow: hidden; } .about-partner-s2 .tab-cont .img-box img { display: block; width: 100%; opacity: 0; animation: o-ani-3 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-partner-s2 .tab-cont .txt-box { width: 50%; position: absolute; right: 0; top: 0; bottom: 4vw; padding: 0 2vw; text-align: center; } .about-partner-s2 .tab-cont .txt-box .cell-box { height: 100%; background-position: center; background-repeat: no-repeat; background-image: url("../images/about/img-10.png"); background-size: 100% auto; } .about-partner-s2 .tab-cont .txt-box p, .about-partner-s2 .tab-cont .txt-box h3 { opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-partner-s2 .tab-cont .txt-box p { font-size: 16px; line-height: 2; color: #333; animation-delay: .1s; } .about-partner-s2 .tab-cont .txt-box h3 { font-size: 24px; color: #333; position: absolute; top: 100%; left: 0; right: 0; animation-delay: .2s; } .about-partner-s3 { padding: 6.25vw 0; } .about-partner-s3 .cont { margin-top: 2vw; display: flex; } .about-partner-s3 .img-box { width: 62%; max-width: 960px; overflow: hidden; } .about-partner-s3 .img-box img { display: block; width: 100%; transition: transform .6s ease; } .about-partner-s3 .img-box:hover img { transform: scale(1.1); } .about-partner-s3 .txt-box { width: 38%; background-color: #f7f7f7; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/about/img-7.jpg"); background-size: 100% auto; text-align: center; } .about-partner-s3 .txt-box i { display: block; margin: 0 auto; width: 108px; height: 108px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-2.png"); } .about-partner-s3 .txt-box h3 { font-size: 24px; color: #333; margin-top: 2vw; } .about-partner-s3 .txt-box h4 { font-size: 14px; color: #333333; margin-top: 10px; } .about-partner-s4 { padding: 6.25vw 0; font-size: 0; } .about-partner-s4 .items { margin-top: 2vw; } .about-partner-s4 .item { display: inline-block; vertical-align: top; width: 20%; max-width: 312px; position: relative; margin: -1px 0 0 -1px; z-index: 1; } .about-partner-s4 .item:before, .about-partner-s4 .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; z-index: 1; } .about-partner-s4 .item:before { border-color: #dfe1e6; } .about-partner-s4 .item:after { border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; opacity: 0; transition: box-shadow .3s ease; } .about-partner-s4 .item .img-box { overflow: hidden; opacity: .5; filter: grayscale(1); transition: all .3s ease; } .about-partner-s4 .item img { display: block; width: 100%; transition: transform .3s ease; } .about-partner-s4 .item:hover { z-index: 2; } .about-partner-s4 .item:hover:before { opacity: 0; } .about-partner-s4 .item:hover:after { opacity: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .about-partner-s4 .item:hover .img-box { opacity: 1; filter: grayscale(0); } .about-partner-s4 .item:hover img { transform: scale(1.1); } .about-contact-s1 { position: relative; } .about-contact-s1 .map-box img { display: block; width: 100%; } .about-contact-s1 .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .about-contact-s1 .para { margin: 2vw 0; font-size: 16px; line-height: 2; color: #333; } .about-contact-s1 .para a { color: #333; } .about-contact-s1 .para a:after { content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: -2px 0 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-3.png"); } .about-contact-s1 .ewm { display: inline-block; border: 1px solid #d9d9d9; } .about-contact-s1 .ewm img { display: block; max-width: 120px; } .about-contact-s2 { padding: 6.25vw 0; font-size: 0; position: relative; z-index: 2; } .about-contact-s2 .items { margin: 2vw -1.5625vw 0; } .about-contact-s2 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.125vw); margin: 0 1.5625vw; } .about-contact-s2 .item .top-box { position: relative; } .about-contact-s2 .item .img-box { width: 25%; position: relative; } .about-contact-s2 .item .img-box img { display: block; width: 100%; filter: grayscale(1); transition: filter 0.3s ease; } .about-contact-s2 .item .img-box span { position: absolute; bottom: 0; left: 0; font-size: 48px; font-weight: bold; color: #fff; width: 50px; } .about-contact-s2 .item .map { position: absolute; top: 0; right: 0; width: 75%; height: 100%; } .about-contact-s2 .item .txt-box { margin-top: 2vw; padding-left: 25%; } .about-contact-s2 .item h3 { font-size: 24px; color: #333; } .about-contact-s2 .item p { font-size: 16px; line-height: 2; color: #808080; margin-top: 10px; } .about-contact-s2 .item:hover .img-box img { filter: grayscale(0); } .about-contact-s3 { padding: 6.25vw 0; background-color: #f7f7f7; } .about-contact-s3 .items { font-size: 0; margin-top: 2vw; } .about-contact-s3 .item { display: inline-block; vertical-align: top; width: calc((100% - 3.2vw) / 2); position: relative; background-color: #fff; margin-top: 3.125vw; transition: all .3s ease; } .about-contact-s3 .item:nth-of-type(even) { margin-left: 3.125vw; } .about-contact-s3 .item:nth-of-type(1), .about-contact-s3 .item:nth-of-type(2) { margin-top: 0; } .about-contact-s3 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, #001066, #2f50a2); z-index: 1; opacity: 0; transition: all .3s ease; } .about-contact-s3 .item .img-box { position: relative; z-index: 2; overflow: hidden; } .about-contact-s3 .item img { display: block; width: 100%; opacity: .2; filter: grayscale(1); transition: all .3s ease; } .about-contact-s3 .item .txt-box { position: absolute; left: 3.125vw; right: 3.125vw; top: 3.125vw; transition: all .3s ease; z-index: 3; } .about-contact-s3 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .about-contact-s3 .item h3:after { content: ''; width: 24px; height: 4px; display: block; margin: 20px 0; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .about-contact-s3 .item p { font-size: 16px; line-height: 24px; color: #808080; transition: color .3s ease; } .about-contact-s3 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(19, 41, 126, 0.3); } .about-contact-s3 .item:hover:before { opacity: 1; } .about-contact-s3 .item:hover img { opacity: .5; filter: grayscale(0); } .about-contact-s3 .item:hover h3, .about-contact-s3 .item:hover p { color: #fff; } .about-culture-s1 { padding: 6.25vw 0; font-size: 0; } .about-culture-s1 .items { margin: 0 -1.5625vw; } .about-culture-s1 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.125vw); margin: 0 1.5625vw; background-color: #fafafa; position: relative; transition: all .3s ease; } .about-culture-s1 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, #001066, #2f50a2); z-index: 1; opacity: 0; transition: all .3s ease; } .about-culture-s1 .item .img-box { position: relative; z-index: 2; overflow: hidden; } .about-culture-s1 .item img { display: block; width: 100%; } .about-culture-s1 .item .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .about-culture-s1 .item .txt-box:after { content: ''; position: absolute; left: 2vw; top: 2vw; width: 24px; height: 4px; display: block; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .about-culture-s1 .item .cell-box { height: 100%; padding: 0 2vw; } .about-culture-s1 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .about-culture-s1 .item p { font-size: 18px; color: #808080; margin-top: 10px; transition: color .3s ease; } .about-culture-s1 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(19, 41, 126, 0.3); } .about-culture-s1 .item:hover:before { opacity: 1; } .about-culture-s1 .item:hover h3, .about-culture-s1 .item:hover p { color: #fff; } .about-culture-s2 { padding: 6.25vw 0; background-color: #f7f7f7; } .about-culture-s2 .para { text-align: center; font-size: 16px; line-height: 24px; color: #333; margin-top: 2vw; } .about-culture-s2 .items { margin-top: 2vw; font-size: 0; } .about-culture-s2 .item { display: inline-block; vertical-align: top; overflow: hidden; margin-top: 1.25vw; } .about-culture-s2 .item img { display: block; width: 100%; transition: transform .6s ease; } .about-culture-s2 .item:nth-of-type(1), .about-culture-s2 .item:nth-of-type(2) { width: calc((100% - 1.25vw) / 2); margin-top: 0; } .about-culture-s2 .item:nth-of-type(3), .about-culture-s2 .item:nth-of-type(4), .about-culture-s2 .item:nth-of-type(5), .about-culture-s2 .item:nth-of-type(6) { width: calc((100% - 3.75vw) / 4); } .about-culture-s2 .item:nth-of-type(2), .about-culture-s2 .item:nth-of-type(4), .about-culture-s2 .item:nth-of-type(5), .about-culture-s2 .item:nth-of-type(6) { margin-left: 1.25vw; } .about-culture-s2 .item:hover img { transform: scale(1.1); } .about-culture-s3 { padding: 6.25vw; font-size: 0; } .about-culture-s3 .items { margin-top: 2vw; } .about-culture-s3 .item { border: 1px solid #e6e6e6; } .about-culture-s3 .item .img-box { overflow: hidden; } .about-culture-s3 .item .txt-box { padding: 1.5vw; } .about-culture-s3 .item img { display: block; width: 100%; transition: transform .6s ease; } .about-culture-s3 .item h3 { font-size: 22px; line-height: 30px; color: #333333; height: 60px; overflow: hidden; transition: color .3s ease; } .about-culture-s3 .item p { font-size: 14px; line-height: 24px; color: #808080; height: 48px; overflow: hidden; margin: 20px 0; } .about-culture-s3 .item .date { font-size: 18px; color: #808080; line-height: 1; font-family: 'NeutraTextLight'; } .about-culture-s3 .item:hover img { transform: scale(1.1); } .about-culture-s3 .item:hover h3 { color: #29489a; } .about-culture-s3 .pagination { margin-top: 2vw; text-align: center; } .about-culture-s3 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-3-1.png"); cursor: pointer; } .about-culture-s3 .pagination span.active { background-image: url("../images/index/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .about-culture-s4 { padding: 6.25vw 0; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-19.jpg"); background-attachment: fixed; } .about-culture-s4 .cont { margin-top: 2vw; position: relative; padding-left: 9%; } .about-culture-s4 .icon { position: absolute; width: 14.5%; max-width: 225px; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; } .about-culture-s4 .block { display: flex; } .about-culture-s4 .txt-box { width: 55%; background-color: #fff; padding: 3.125vw 3.125vw 3.125vw 7.5vw; text-align: right; } .about-culture-s4 .txt-box .ewm { display: inline-block; vertical-align: middle; width: 10.5vw; max-width: 200px; border: 1px solid #e6e6e6; } .about-culture-s4 .txt-box .ewm img { display: block; width: 100%; } .about-culture-s4 .txt-box .para { display: inline-block; vertical-align: middle; width: calc(100% - 10.5vw); padding-left: 2vw; font-size: 16px; line-height: 2; color: #333333; text-align: left; } .about-culture-s4 .tip-box { width: 22.5%; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 3.125vw; } .about-culture-s4 .tip-box.bg-1 { background-image: url("../images/about/img-22.png"); } .about-culture-s4 .tip-box.bg-2 { background-image: url("../images/about/img-23.png"); } .about-culture-s4 .tip-box h3 { font-size: 24px; color: #fff; } .about-culture-s4 .tip-box .para { font-size: 16px; line-height: 2; color: #fff; margin-top: 20px; } .about-honor-s1 { padding: 6.25vw 0; font-size: 0; } .about-honor-s1 .items { margin: 2vw -1vw 0; } .about-honor-s1 .item { display: inline-block; vertical-align: top; width: calc(25% - 2vw); margin: 3.125vw 1vw 0; } .about-honor-s1 .item .img-box { box-shadow: 0 1.5vw 2vw rgba(0, 0, 0, 0.05); } .about-honor-s1 .item .img-box img { display: block; width: 100%; } .about-honor-s1 .item h3 { margin-top: 1.5vw; text-align: center; font-size: 18px; line-height: 1.5; color: #333333; } .about-honor-s2 { padding: 6.25vw 0; background-color: #f7f7f7; font-size: 0; } .about-honor-s2 .cont { margin-top: 2vw; } .about-honor-s2 .tab-cont .child { position: relative; display: none; } .about-honor-s2 .tab-cont .child.active { display: block; } .about-honor-s2 .tab-cont .img-box { width: 50%; overflow: hidden; } .about-honor-s2 .tab-cont .img-box img { display: block; width: 100%; opacity: 0; animation: o-ani-3 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-honor-s2 .tab-cont .txt-box { width: 50%; position: absolute; right: 0; top: 0; bottom: 0; padding: 0 6.25vw; background-position: center; background-repeat: no-repeat; background-color: #fff; background-image: url("../images/about/img-26.jpg"); background-size: 100% auto; } .about-honor-s2 .tab-cont .txt-box .year, .about-honor-s2 .tab-cont .txt-box .para { opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-honor-s2 .tab-cont .txt-box .year { font-size: 120px; line-height: 1; color: #29489a; font-family: 'NeutraTextBook'; animation-delay: .1s; } .about-honor-s2 .tab-cont .txt-box .para { font-size: 18px; line-height: 2; color: #333; margin-top: 2vw; animation-delay: .2s; max-height: 210px; overflow: auto; padding-right: 10px; } .about-honor-s2 .tab-tit { margin-top: 2.5vw; background-position: center 18px; background-repeat: no-repeat; background-image: url("../images/about/img-27.png"); background-size: 100% 4px; text-align: center; } .about-honor-s2 .tab-tit .item { display: inline-block; vertical-align: top; position: relative; margin-left: 7.8vw; padding-bottom: 60px; cursor: pointer; } .about-honor-s2 .tab-tit .item:last-of-type { margin-right: 7.8vw; } .about-honor-s2 .tab-tit .item:before { content: ''; width: 15.6vw; height: 4px; background-position: center; background-repeat: no-repeat; background-image: url("../images/about/img-28.png"); background-size: 100% 100%; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1; opacity: 0; transition: all .3s ease; } .about-honor-s2 .tab-tit .item:after { content: ''; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-5-1.png"); display: block; margin: 0 auto; position: relative; z-index: 2; } .about-honor-s2 .tab-tit .item .year { font-size: 24px; line-height: 50px; color: #808080; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-family: 'NeutraTextBook'; transition: all .3s ease; } .about-honor-s2 .tab-tit .item.active:before { opacity: 1; } .about-honor-s2 .tab-tit .item.active:after { background-image: url("../images/about/icon-5-2.png"); } .about-honor-s2 .tab-tit .item.active .year { font-size: 48px; color: #29489a; } .about-team-s1 { padding: 6.25vw 0; font-size: 0; background-color: #f7f7f7; } .about-team-s1 .item { position: relative; margin-top: 3.125vw; background-color: #fff; } .about-team-s1 .item:nth-of-type(1) { margin-top: 0; } .about-team-s1 .item:nth-of-type(odd) { text-align: right; } .about-team-s1 .item:nth-of-type(odd) .txt-box { left: 0; } .about-team-s1 .item:nth-of-type(even) .txt-box { right: 0; } .about-team-s1 .item:nth-of-type(6n) .txt-box { background-image: url("../images/about/img-30-6.jpg"); } .about-team-s1 .item:nth-of-type(6n-1) .txt-box { background-image: url("../images/about/img-30-5.jpg"); } .about-team-s1 .item:nth-of-type(6n-2) .txt-box { background-image: url("../images/about/img-30-4.jpg"); } .about-team-s1 .item:nth-of-type(6n-3) .txt-box { background-image: url("../images/about/img-30-3.jpg"); } .about-team-s1 .item:nth-of-type(6n-4) .txt-box { background-image: url("../images/about/img-30-2.jpg"); } .about-team-s1 .item:nth-of-type(6n-5) .txt-box { background-image: url("../images/about/img-30-1.jpg"); } .about-team-s1 .item .img-box { display: inline-block; vertical-align: top; width: 35%; overflow: hidden; } .about-team-s1 .item .img-box img { display: block; width: 100%; } .about-team-s1 .item .txt-box { position: absolute; top: 0; bottom: 0; width: 65%; text-align: left; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; padding: 0 6.25vw; } .about-team-s1 .item .txt-box .tit { padding-left: 6.25vw; background-position: left center; background-repeat: no-repeat; background-image: url("../images/about/icon-6.png"); background-size: 3.125vw auto; } .about-team-s1 .item .txt-box h3 { font-size: 32px; color: #333333; } .about-team-s1 .item .txt-box h4 { font-size: 16px; color: #808080; margin-top: 10px; } .about-team-s1 .item .txt-box .para { font-size: 16px; line-height: 2; color: #333; margin-top: 2vw; margin-left: 6.25vw; padding-right: 20px; padding-top: 1.5vw; border-top: 1px solid #e6e6e6; max-height: calc(192px + 1.5vw); overflow: auto; } .about-duty-s1 { position: relative; } .about-duty-s1 .img-box img { display: block; width: 100%; } .about-duty-s1 .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 8.3vw; } .about-duty-s1 .box { width: 60%; } .about-duty-s1 .logo img { display: block; height: 72px; } .about-duty-s1 .logo:after { content: ''; width: 60px; height: 4px; display: block; margin-top: 1.5vw; background-image: linear-gradient(90deg, #5051f3, #c9449a); position: relative; } .about-duty-s1 .para { padding-top: 1.5vw; font-size: 16px; line-height: 2; } .about-duty-s2 { margin-top: -8.3vw; position: relative; font-size: 0; } .about-duty-s2:before { content: ''; width: 10vw; height: 23vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-36.jpg"); position: absolute; bottom: 0; } .about-duty-s2 .inner-tit { position: absolute; top: 6.25vw; left: 0; right: 0; z-index: 3; } .about-duty-s2 .cont { position: relative; } .about-duty-s2 .b-items .item img { display: block; width: 100%; } .about-duty-s2 .s-items { width: 50%; position: absolute; right: 0; bottom: 0; z-index: 2; background-image: linear-gradient(90deg, rgba(0, 16, 102, 0.95), rgba(47, 80, 162, 0.95)); } .about-duty-s2 .s-items .item { padding: 4.5vw; height: auto; min-height: 23vw; } .about-duty-s2 .s-items .item .cell-box { height: 100%; } .about-duty-s2 .s-items .item h3 { font-size: 24px; color: #fff; } .about-duty-s2 .s-items .item p { font-size: 16px; line-height: 2; color: #fff; margin-top: 20px; } .about-duty-s2 .btns { position: absolute; bottom: 7vw; left: 0; margin-left: -30px; z-index: 3; } .about-duty-s2 .button { position: relative; width: 60px; height: 60px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/about/icon-7.png"); cursor: pointer; } .about-duty-s2 .button svg { position: absolute; top: -1%; left: -1%; width: 102%; height: 102%; } .about-duty-s2 .button circle { stroke-width: 2px; stroke: #fff; fill: none; stroke-dasharray: 314; stroke-dashoffset: 314; transform: rotate(-90deg); transform-origin: center; transition: all .6s ease; } .about-duty-s2 .button:hover circle { stroke-dashoffset: 0; } .about-duty-s2 .button-prev { transform: rotate(180deg); margin-top: 1.5vw; } .about-duty-s3 { padding: 6.25vw 0; font-size: 0; } .about-duty-s3 .items { margin: 2vw -1.5625vw 0; } .about-duty-s3 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.125vw); margin: 3.125vw 1.5625vw 0; } .about-duty-s3 .item:nth-of-type(1), .about-duty-s3 .item:nth-of-type(2), .about-duty-s3 .item:nth-of-type(3) { margin-top: 0; } .about-duty-s3 .item .img-box { overflow: hidden; } .about-duty-s3 .item img { display: block; width: 100%; transition: transform .6s ease; } .about-duty-s3 .item .txt-box { padding: 1.5vw 1.5vw 0; } .about-duty-s3 .item h3 { font-size: 22px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; } .about-duty-s3 .item .date { font-size: 18px; color: #808080; font-family: 'NeutraTextLight'; margin-top: 1vw; } .about-duty-s3 .item:hover img { transform: scale(1.1); } .about-duty-s3 .item:hover h3 { color: #29489a; } .about-index .c-banner img { height: 100vh; max-height: 100vh; object-fit: cover; } .about-index-s1 { position: relative; z-index: 3; } .about-index-s1 .left-box { width: 50%; background-color: #f7f7f7; text-align: right; } .about-index-s1 .left-box .tip { display: inline-block; vertical-align: top; height: 10.5vw; max-height: 200px; text-align: center; padding: 0 1.5vw; text-align: center; background-image: linear-gradient(90deg, #001066, #2f50a2); } .about-index-s1 .left-box .tip span { font-size: 42px; font-weight: bold; color: #fff; } .about-index-s1 .left-box .tip p { font-size: 16px; line-height: 24px; color: #fff; margin-top: 10px; } .about-index-s1 .left-box .box { text-align: left; padding: 20px 4.5vw 9.375vw 9.375vw; } .about-index-s1 .left-box .para { font-size: 16px; line-height: 2; color: #808080; margin: 2vw 0; } .about-index-s1 .right-box { width: 50%; position: absolute; right: 0; top: 0; bottom: 0; } .about-index-s1 .right-box .img-box { width: 100%; height: 100%; overflow: hidden; } .about-index-s1 .right-box .img-box img { width: 100%; height: 100%; object-fit: cover; animation: o-scale 20s linear infinite; } .about-index-s1 .right-box .top-tip, .about-index-s1 .right-box .bot-tip { width: 81.25%; height: 10.5vw; max-height: 200px; text-align: center; position: absolute; left: 0; overflow: hidden; } .about-index-s1 .right-box .top-tip .box, .about-index-s1 .right-box .bot-tip .box { height: 100%; background-color: rgba(255, 255, 255, 0.6); } .about-index-s1 .right-box .top-tip { bottom: 100%; perspective: 800px; } .about-index-s1 .right-box .top-tip .box { transform: rotateX(100deg) translate3d(0, 0, 0); transform-origin: center bottom; transition: transform .6s ease; } .about-index-s1 .right-box .top-tip .box:after { content: ''; position: absolute; width: 60px; height: 4px; left: 0; right: 0; margin: 0 auto; bottom: 0; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .about-index-s1 .right-box .top-tip h3 { font-size: 28px; line-height: 48px; color: #333; } .about-index-s1 .right-box .top-tip.active .box { transform: none; } .about-index-s1 .right-box .bot-tip { top: 0; } .about-index-s1 .right-box .bot-tip p { font-size: 16px; color: #333; } .about-index-s1 .right-box .bot-tip p:before { content: ''; width: 20px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-12.png"); display: block; margin: 0 auto 1.5vw; } .about-index-s2 { font-size: 0; } .about-index-s2 .top-box { padding: 6.25vw 0 3.125vw; } .about-index-s2 .top-box .para { font-size: 16px; line-height: 2; color: #808080; text-align: center; margin-top: 2vw; } .about-index-s2 .tab-tit { max-width: 1240px; margin: 3.125vw auto 0; background-position: center 17px; background-repeat: no-repeat; background-image: url("../images/about/img-45.png"); background-size: 100% 2px; text-align: center; position: relative; } .about-index-s2 .tab-tit:before { content: ''; position: absolute; top: 17px; left: 0; height: 2px; background-image: linear-gradient(90deg, #fff, #2e3e85); } .about-index-s2 .tab-tit .item { display: inline-block; vertical-align: top; position: relative; padding-bottom: 40px; margin-left: 11.25vw; cursor: pointer; } .about-index-s2 .tab-tit .item:nth-of-type(1) { margin-left: 0; } .about-index-s2 .tab-tit .item:before { content: ''; width: 36px; height: 36px; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-13-1.png"); transition: all .3s ease; } .about-index-s2 .tab-tit .item .year { font-size: 20px; color: #808080; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; transition: all .3s ease; } .about-index-s2 .tab-tit .item .year span { font-size: 24px; font-family: 'NeutraTextLight'; } .about-index-s2 .tab-tit .item:hover:before, .about-index-s2 .tab-tit .item.active:before { background-image: url("../images/about/icon-13-2.png"); } .about-index-s2 .tab-tit .item:hover .year, .about-index-s2 .tab-tit .item.active .year { color: #29489a; } .about-index-s2 .bot-box .child { position: relative; display: none; } .about-index-s2 .bot-box .child.active { display: block; } .about-index-s2 .bot-box .left-box { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; } .about-index-s2 .bot-box .left-box img { display: block; width: 100%; height: 100%; object-fit: cover; } .about-index-s2 .bot-box .right-box { width: 50%; margin-left: 50%; padding: 4.5vw 3.125vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-47.jpg"); } .about-index-s2 .bot-box .box, .about-index-s2 .bot-box a.about-more { opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-index-s2 .bot-box .box { margin-bottom: 2vw; animation-delay: .1s; } .about-index-s2 .bot-box .box span { display: inline-block; vertical-align: top; width: 90px; font-size: 24px; color: #fff; font-family: 'NeutraTextBook'; } .about-index-s2 .bot-box .box .para { display: inline-block; vertical-align: top; width: calc(100% - 100px); font-size: 16px; line-height: 2; color: #fff; } .about-index-s2 .bot-box a.about-more { margin-left: 90px; animation-delay: .2s; } .about-index-s3 { padding: 6.25vw 0; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-40.jpg"); } .about-index-s3 .items { margin-top: 2vw; } .about-index-s3 .item { display: inline-block; vertical-align: top; width: 16.66%; max-width: 260px; position: relative; margin: -1px 0 0 -1px; z-index: 1; } .about-index-s3 .item:before, .about-index-s3 .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; z-index: 1; } .about-index-s3 .item:before { border-color: #dfe1e6; } .about-index-s3 .item:after { border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; opacity: 0; transition: box-shadow .3s ease; } .about-index-s3 .item .img-box { overflow: hidden; opacity: .5; filter: grayscale(1); transition: all .3s ease; } .about-index-s3 .item img { display: block; width: 100%; transition: transform .3s ease; } .about-index-s3 .item:hover { z-index: 2; } .about-index-s3 .item:hover:before { opacity: 0; } .about-index-s3 .item:hover:after { opacity: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .about-index-s3 .item:hover .img-box { opacity: 1; filter: grayscale(0); } .about-index-s3 .item:hover img { transform: scale(1.1); } .about-index-s3 a.about-more { margin: 2vw auto 0; } .about-index-s4 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-39.jpg"); background-attachment: fixed; } .about-index-s4 .data { margin: 6.25vw 0; display: flex; justify-content: space-between; } .about-index-s4 .item { color: #fff; } .about-index-s4 .item .num { line-height: 1; font-size: 36px; font-family: 'NeutraTextBook'; } .about-index-s4 .item .num span { font-size: 72px; } .about-index-s4 .item h3 { font-size: 22px; margin-top: 15px; } .about-index-s4 .item p { font-size: 16px; margin-top: 5px; } .about-index-s5 { padding: 6.25vw 0 7.8125vw; background-color: #f7f7f7; } .about-index-s5 .cont { margin-top: 2vw; position: relative; } .about-index-s5 .cont:before, .about-index-s5 .cont:after { content: ''; width: 9.375vw; height: 100%; background-color: rgba(255, 255, 255, 0.8); position: absolute; top: 0; z-index: 2; } .about-index-s5 .cont:before { left: 0; } .about-index-s5 .cont:after { right: 0; } .about-index-s5 .items { padding: 0 9.375vw; } .about-index-s5 .item { position: relative; } .about-index-s5 .item:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background-image: linear-gradient(180deg, rgba(0, 16, 102, 0), #001066); opacity: 0; transition: all .3s ease; } .about-index-s5 .item .img-box { overflow: hidden; } .about-index-s5 .item .img-box img { display: block; width: 100%; } .about-index-s5 .item .txt-box { position: absolute; bottom: 0; left: 0; right: 0; padding: 2vw; text-align: center; opacity: 0; transition: all .3s ease; } .about-index-s5 .item h3 { font-size: 24px; color: #fff; } .about-index-s5 .item p { font-size: 16px; color: #fff; margin-top: 15px; } .about-index-s5 .item:hover:before { opacity: 1; } .about-index-s5 .item:hover .txt-box { opacity: 1; } .about-index-s5 .button { width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; background-color: #fff; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/about/icon-8.png"); z-index: 3; cursor: pointer; transition: all .3s ease; } .about-index-s5 .button:hover { box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1); } .about-index-s5 .button-prev { left: calc(4.6875vw - 30px); transform: rotate(180deg); } .about-index-s5 .button-next { right: calc(4.6875vw - 30px); } .about-index-s5 a.about-more { margin: 2vw auto 0; } .about-index-s6 { padding: 0 0 7vw; background-color: #f7f7f7; font-size: 0; } .about-index-s6 .items { margin: 2vw -1.5625vw 0; } .about-index-s6 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.125vw); margin: 0 1.5625vw; position: relative; } .about-index-s6 .item .img-box { overflow: hidden; } .about-index-s6 .item img { display: block; width: 100%; transition: transform .6s ease; } .about-index-s6 .item .txt-box { position: absolute; bottom: 3.125vw; left: 2vw; right: 2vw; } .about-index-s6 .item h3 { font-size: 24px; color: #fff; } .about-index-s6 .item h4 { font-size: 14px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; margin-top: 5px; } .about-index-s6 .item:nth-of-type(1), .about-index-s6 .item:nth-of-type(3) { transform: translateY(3.125vw); } .about-index-s6 .item:hover img { transform: scale(1.1); } .about-index-s6 a.about-more { margin: 3.125vw auto 0; } .about-index-s7 { padding: 0 0 6.25vw; background-color: #f7f7f7; font-size: 0; } .about-index-s7 .para { font-size: 16px; line-height: 2; color: #333; margin: 2vw 0; max-width: 930px; } .about-index-s7 .cont { display: flex; } .about-index-s7 .tab-cont { width: 38%; padding: 6.25vw 3.125vw 3.125vw; background-color: #fff; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/about/img-43.jpg"); background-size: 100% auto; } .about-index-s7 .tab-cont .child { height: 100%; display: none; position: relative; } .about-index-s7 .tab-cont .child.active { display: block; } .about-index-s7 .tab-cont h3, .about-index-s7 .tab-cont p { opacity: 0; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-index-s7 .tab-cont h3 { font-size: 24px; color: #333333; animation-delay: .1s; } .about-index-s7 .tab-cont p { font-size: 16px; line-height: 2; color: #808080; margin-top: 15px; animation-delay: .2s; } .about-index-s7 .tab-cont a { width: 20px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-9.png"); position: absolute; right: 0; bottom: 0; transition: all .3s ease; } .about-index-s7 .tab-cont a:hover { background-image: url("../images/about/icon-8.png"); } .about-index-s7 .swiper { width: 62%; max-width: 960px; position: relative; } .about-index-s7 .item img { display: block; width: 100%; height: 100%; object-fit: cover; } .about-index-s7 .pagination { position: absolute; bottom: 3.125vw; left: 0; right: 0; text-align: center; z-index: 2; } .about-index-s7 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-10.png"); cursor: pointer; } .about-index-s7 .pagination span.active { background-image: url("../images/about/icon-11.png"); animation: o-rotate 10s linear infinite; } .about-index-s7 .button { width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/about/icon-7.png"); z-index: 3; cursor: pointer; transition: all .3s ease; } .about-index-s7 .button:hover { background-color: #000; } .about-index-s7 .button-prev { left: 2vw; transform: rotate(180deg); } .about-index-s7 .button-next { right: 2vw; } .about-index-s7 a.about-more { margin-top: 2vw; } .about-index-s8 { position: relative; } .about-index-s8 .img-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .about-index-s8 .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; } .about-index-s8 .txt-box { position: relative; z-index: 2; padding: 6.25vw 0; } .about-index-s8 .cont { margin-top: 2vw; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } .about-index-s8 .left-box { width: 50%; padding: 6.25vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-37.jpg"); } .about-index-s8 .left-box h3 { font-size: 24px; color: #fff; } .about-index-s8 .left-box .para { font-size: 16px; line-height: 2; color: #fff; margin: 2vw 0; } /* join */ .join-index-s1 { padding: 6.25vw 0 0; } .join-index-s1 .para { font-size: 16px; line-height: 2; color: #333333; text-align: center; margin-top: 2vw; } .join-index-s1 .img-box { width: 76%; max-width: 1103px; margin: 2vw auto 0; } .join-index-s1 .img-box img { display: block; width: 100%; } .join-index-s2 { padding: 6.25vw 0; background-color: #f7f7f7; } .join-index-s2 .items { margin-top: 2vw; font-size: 0; display: flex; justify-content: space-between; } .join-index-s2 .item { width: calc(50% - 1.5625vw); } .join-index-s2 .item .img-box { overflow: hidden; } .join-index-s2 .item img { display: block; width: 100%; transition: transform .6s ease; } .join-index-s2 .item .txt-box { margin: -6.25vw 1.5625vw 0; position: relative; background-color: #fff; transition: all .3s ease; } .join-index-s2 .item .txt-box:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, #001066, #2f50a2); z-index: 1; opacity: 0; transition: all .3s ease; } .join-index-s2 .item .txt-box:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-image: linear-gradient(90deg, #5051f3, #c9449a); z-index: 3; transform: scaleX(0); transform-origin: left center; transition: all .6s ease; } .join-index-s2 .item .box { padding: 1.5vw; position: relative; z-index: 2; } .join-index-s2 .item h3 { font-size: 24px; color: #333; transition: all .3s ease; } .join-index-s2 .item .dot { margin-top: 1.5625vw; } .join-index-s2 .item span { display: inline-block; vertical-align: top; width: calc((100% - 3.125vw) / 3); font-size: 16px; line-height: 3.375; color: #333; margin-right: 1.5625vw; border-top: 1px solid #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .3s ease; } .join-index-s2 .item span:nth-of-type(3n) { margin-right: 0; } .join-index-s2 .item:hover img { transform: scale(1.1); } .join-index-s2 .item:hover .txt-box { transform: translateY(-1.5625vw); box-shadow: 0 10px 30px rgba(0, 16, 102, 0.3); } .join-index-s2 .item:hover .txt-box:before { opacity: 1; } .join-index-s2 .item:hover .txt-box:after { transform: scaleX(1); } .join-index-s2 .item:hover h3 { color: #fff; } .join-index-s2 .item:hover span { border-top-color: rgba(255, 255, 255, 0.1); color: #fff; } .join-index-s3 { padding: 6.25vw 0; } .join-index-s3 .items { margin-top: 2vw; font-size: 0; } .join-index-s3 .item { display: inline-block; vertical-align: top; width: 33.33%; overflow: hidden; } .join-index-s3 .item:nth-of-type(1), .join-index-s3 .item:nth-of-type(7) { width: 66.66%; } .join-index-s3 .item img { display: block; width: 100%; transition: transform .6s ease; } .join-index-s3 .item:hover img { transform: scale(1.1); } .join-index-s4 { padding: 6.25vw 0; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/join/img-4.jpg"); background-size: cover; } .join-index-s4 .items { margin-top: 2vw; font-size: 0; display: flex; justify-content: space-between; } .join-index-s4 .item { width: calc(50% - 1.5625vw); background-color: #fff; position: relative; transition: transform .3s ease; } .join-index-s4 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, #f7b42a, #f29803); opacity: 0; z-index: 1; transition: opacity .3s ease; } .join-index-s4 .item .img-box { overflow: hidden; position: relative; z-index: 2; } .join-index-s4 .item img { display: block; width: 100%; } .join-index-s4 .item .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 2vw; z-index: 3; } .join-index-s4 .item .box { height: 100%; position: relative; } .join-index-s4 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .join-index-s4 .item h4 { font-size: 12px; color: #808080; font-family: 'Arial'; text-transform: uppercase; margin-top: 5px; transition: color .3s ease; } .join-index-s4 .item span { position: absolute; bottom: 0; left: 0; font-size: 16px; color: #29489a; transition: color .3s ease; } .join-index-s4 .item span:after { content: ''; width: 8px; height: 15px; display: inline-block; vertical-align: middle; margin: -2px 0 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-2.png"); opacity: 0; transform: translateX(-10px); transition: all .3s ease; } .join-index-s4 .item:hover { transform: translateY(-10px); } .join-index-s4 .item:hover:before { opacity: 1; } .join-index-s4 .item:hover h3, .join-index-s4 .item:hover h4, .join-index-s4 .item:hover span { color: #fff; } .join-index-s4 .item:hover span:after { opacity: 1; transform: translateX(0); } .join-index-s5 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/join/img-7.jpg"); background-attachment: fixed; } .join-index-s5 .img-box { margin: 2vw auto; max-width: 300px; } .join-index-s5 .img-box img { display: block; width: 100%; } .join-index-s5 p { font-size: 16px; line-height: 24px; color: #fff; text-align: center; } .join-campus a.campus-more, .investor-index a.inverstor-more, .about-duty a.duty-more, .about-index a.about-more { display: block; width: 180px; font-size: 16px; line-height: 48px; color: #5c3e3e; text-align: center; background-image: linear-gradient(90deg, #f7b42a, #f29803); transition: all .3s ease; } .join-campus a.campus-more:hover, .investor-index a.inverstor-more:hover, .about-duty a.duty-more:hover, .about-index a.about-more:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3); } .join-campus a.campus-more { margin: 2vw auto 0; } .about-duty a.duty-more { margin: 3.125vw auto 0; } .join-campus-s1 { padding: 6.25vw 0; background-color: #f7f7f7; } .join-campus-s1 .items { font-size: 0; margin: 2vw -1.5625vw 0; } .join-campus-s1 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.125vw); margin: 3.125vw 1.5625vw 0; position: relative; transition: all .3s ease; } .join-campus-s1 .item:nth-of-type(1), .join-campus-s1 .item:nth-of-type(2), .join-campus-s1 .item:nth-of-type(3) { margin-top: 0; } .join-campus-s1 .item .img-box { overflow: hidden; } .join-campus-s1 .item img { display: block; width: 100%; transition: transform .6s ease; } .join-campus-s1 .item h3 { position: absolute; left: 0; right: 0; bottom: 0; font-size: 24px; color: #fff; padding: 3.125vw 1.5vw 1.5vw; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .join-campus-s1 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .join-campus-s1 .item:hover img { transform: scale(1.1); } .join-campus-s2 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/join/img-9.jpg"); background-attachment: fixed; } .join-campus-s2 .items { font-size: 0; margin: 2vw -1vw 0; } .join-campus-s2 .item { display: inline-block; vertical-align: top; width: calc(25% - 2vw); margin: 2vw 1vw 0; background-color: #fff; transition: all .3s ease; } .join-campus-s2 .item:nth-of-type(1), .join-campus-s2 .item:nth-of-type(2), .join-campus-s2 .item:nth-of-type(3), .join-campus-s2 .item:nth-of-type(4) { margin-top: 0; } .join-campus-s2 .item .img-box { overflow: hidden; } .join-campus-s2 .item .txt-box { padding: 1.5vw; } .join-campus-s2 .item img { display: block; width: 100%; transition: transform .6s ease; } .join-campus-s2 .item h3 { font-size: 18px; line-height: 32px; height: 64px; color: #333333; overflow: hidden; background-position: right top; background-repeat: no-repeat; background-image: url("../images/join/icon-3.png"); background-size: 53px auto; } .join-campus-s2 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .join-campus-s2 .item:hover img { transform: scale(1.1); } .join-campus-s3 { padding: 6.25vw 0; } .join-campus-s3 .items { font-size: 0; margin: 2vw -1vw 0; } .join-campus-s3 .item { display: inline-block; vertical-align: top; width: calc(25% - 2vw); margin: 2vw 1vw 0; background-color: #fff; transition: all .3s ease; } .join-campus-s3 .item:nth-of-type(1), .join-campus-s3 .item:nth-of-type(2), .join-campus-s3 .item:nth-of-type(3), .join-campus-s3 .item:nth-of-type(4) { margin-top: 0; } .join-campus-s3 .item .img-box { overflow: hidden; } .join-campus-s3 .item .txt-box { padding: 1.5vw; margin: -10px 10px 0; background-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); position: relative; z-index: 2; transition: all .3s ease; } .join-campus-s3 .item img { display: block; width: 100%; transition: transform .6s ease; } .join-campus-s3 .item h3 { font-size: 18px; line-height: 32px; height: 64px; color: #333333; overflow: hidden; } .join-campus-s3 .item:hover { transform: translateY(-10px); } .join-campus-s3 .item:hover .txt-box { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .join-campus-s3 .item:hover img { transform: scale(1.1); } .join-campus-s4 { padding: 6.25vw 0; background-color: #f7f7f7; } .join-campus-s4 .items { padding: 2vw 30px; margin: 0 -30px; } .join-campus-s4 .item { position: relative; background-color: #f0f0f3; cursor: pointer; transition: transform .3s ease; } .join-campus-s4 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, #001066, #2f50a2); box-shadow: 0 0.5vw 1.5vw rgba(15, 36, 121, 0.3); opacity: 0; transition: all .3s ease; } .join-campus-s4 .item .box { position: relative; padding: 2vw; z-index: 2; } .join-campus-s4 .item h3 { font-size: 24px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; } .join-campus-s4 .item .para { margin-top: 24px; } .join-campus-s4 .item p { font-size: 16px; line-height: 2; color: #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; } .join-campus-s4 .item span { display: block; width: 24px; height: 24px; margin-top: 3.125vw; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-5.png"); transition: all .3s ease; } .join-campus-s4 .item .hide { display: none; } .join-campus-s4 .item:hover { transform: translateY(-10px); } .join-campus-s4 .item:hover:before { opacity: 1; } .join-campus-s4 .item:hover h3, .join-campus-s4 .item:hover p { color: #fff; } .join-campus-s4 .item:hover span { background-image: url("../images/join/icon-5-on.png"); } .join-campus-s4 .pagination { font-size: 0; text-align: center; } .join-campus-s4 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; position: relative; cursor: pointer; } .join-campus-s4 .pagination span:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid #b7bed5; border-radius: 50%; transition: all .3s ease; } .join-campus-s4 .pagination span:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-4.png"); opacity: 0; transition: all .3s ease; } .join-campus-s4 .pagination span.active:before { opacity: 0; } .join-campus-s4 .pagination span.active:after { opacity: 1; animation: o-rotate 5s linear infinite; } .join-campus-s5 { padding: 6.25vw 0; } .join-campus-s5 .items { font-size: 0; margin-top: 3.125vw; } .join-campus-s5 .box { display: inline-block; vertical-align: top; width: calc(50% - 1.6vw); } .join-campus-s5 .box:nth-of-type(2) { margin-left: 3.125vw; } .join-campus-s5 .item { margin-top: 3.125vw; padding: 2vw 2vw 3.125vw; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transition: all .3s ease; } .join-campus-s5 .item:nth-of-type(1) { margin-top: 0; } .join-campus-s5 .item h3 { font-size: 24px; line-height: 28px; color: #333333; padding-left: 40px; background-position: left 2px; background-repeat: no-repeat; background-image: url("../images/join/icon-4.png"); } .join-campus-s5 .item p { font-size: 16px; line-height: 2; color: #808080; margin-top: 20px; } .join-campus-s5 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .campus-pop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; display: none; } .campus-pop .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.3); } .campus-pop .main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .campus-pop .close { width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-6.png"); position: absolute; top: 30px; right: 30px; border-radius: 50%; cursor: pointer; transition: all .3s ease; } .campus-pop .close:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); } .campus-pop .top-block { padding: 10vh 6.25vw 5vh; background-color: #0056a7; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/join/img-12.jpg"); } .campus-pop .top-block h3 { font-size: 48px; color: #fff; } .campus-pop .top-block .info { margin-top: 5vh; font-size: 0; } .campus-pop .top-block .info span { font-size: 16px; color: #fff; } .campus-pop .top-block .info span:before { content: ''; width: 18px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .campus-pop .top-block .info span.addr:before { background-image: url("../images/join/icon-7.png"); } .campus-pop .top-block .info span.date { font-family: 'DINPro-Light'; margin-left: 3.125vw; } .campus-pop .top-block .info span.date:before { background-image: url("../images/join/icon-8.png"); } .campus-pop .bot-block { padding: 7vh 6.25vw; background-color: #fff; } .campus-pop .bot-block .scroll { max-height: 36vh; overflow: auto; padding-right: 2vw; } .campus-pop .bot-block .box { padding-top: 2vw; margin-top: 2vw; border-top: 1px solid #e6e6e6; } .campus-pop .bot-block .box:nth-of-type(1) { padding-top: 0; margin-top: 0; border: none; } .campus-pop .bot-block .box h4 { font-size: 22px; color: #333333; } .campus-pop .bot-block .box .para { font-size: 16px; line-height: 32px; color: #808080; margin-top: 20px; } .campus-pop .bot-block a { display: block; font-size: 18px; line-height: 60px; color: #fff; background-color: #0056a7; text-align: center; margin-top: 7vh; } .join-social-s1 { padding: 6.25vw 0; font-size: 0; } .join-social-s1 .top-block { display: flex; justify-content: space-between; position: relative; z-index: 2; } .join-social-s1 .top-block .box { height: 90px; position: relative; border: 2px solid #e6e6e6; } .join-social-s1 .top-block .box.open ul { display: block; } .join-social-s1 .top-block .select { width: calc(25% - 24px); } .join-social-s1 .top-block .select input { cursor: pointer; position: relative; z-index: 2; } .join-social-s1 .top-block .select:after { content: ''; width: 14px; height: 9px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-9.png"); position: absolute; right: 20px; top: 50%; margin-top: -4px; z-index: 3; } .join-social-s1 .top-block .form { width: 50%; } .join-social-s1 .top-block input { display: block; width: 100%; height: 100%; padding: 0 20px; font-size: 16px; color: #808080; } .join-social-s1 .top-block button { width: 200px; height: 82px; position: absolute; top: 2px; right: 2px; background-image: linear-gradient(135deg, #f7b42a, #f29803); font-size: 24px; color: #5c3e3e; cursor: pointer; } .join-social-s1 .top-block ul { max-height: 300px; overflow: auto; position: absolute; left: -2px; right: -2px; top: calc(100% + 2px); background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); z-index: 1; display: none; } .join-social-s1 .top-block ul li { font-size: 16px; color: #333; line-height: 60px; padding: 0 20px; transition: all 0.3s ease; cursor: pointer; } .join-social-s1 .top-block ul li:hover { background-color: #f39b07; color: #fff; } .join-social-s1 .bot-block { margin-top: 3.5vw; } .join-social-s1 .head-box span { display: inline-block; vertical-align: top; width: 20%; padding: 0 1.5vw; font-size: 28px; color: #333; font-weight: bold; } .join-social-s1 .head-box span:nth-of-type(1) { width: 40%; } .join-social-s1 .items { margin: 2vw 0; } .join-social-s1 .item { position: relative; border-top: 2px solid #e6e6e6; border-bottom: 2px solid #e6e6e6; margin-top: -2px; z-index: 1; } .join-social-s1 .item:nth-of-type(odd) { background-color: #fff; } .join-social-s1 .item:nth-of-type(even) { background-color: #f7f7f7; } .join-social-s1 .item:before, .join-social-s1 .item:after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; background-image: linear-gradient(90deg, #5051f3, #c9449a); transform: scaleX(0); transition: transform .6s ease; } .join-social-s1 .item:before { top: -2px; transform-origin: left top; } .join-social-s1 .item:after { bottom: -2px; transform-origin: right top; } .join-social-s1 .item .show { position: relative; cursor: pointer; } .join-social-s1 .item .show:after { content: ''; width: 20px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-10.png"); position: absolute; right: 1.5vw; top: 50%; margin-top: -7px; transition: all .3s ease; } .join-social-s1 .item .show span { display: inline-block; vertical-align: top; width: 20%; padding: 2vw 1.5vw; font-size: 22px; color: #333333; } .join-social-s1 .item .show span:nth-of-type(1) { width: 40%; } .join-social-s1 .item .hide { position: relative; padding-right: 4vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/join/img-13.jpg"); display: none; } .join-social-s1 .item .hide .close { width: 20px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-11.png"); position: absolute; right: 1.5vw; top: 50%; margin-top: -7px; cursor: pointer; } .join-social-s1 .item .hide .block { margin-left: 40%; padding: 2vw 0; border-top: 1px solid #e6e6e6; } .join-social-s1 .item .hide .box { margin-top: 3.125vw; } .join-social-s1 .item .hide .box:nth-of-type(1) { margin-top: 0; } .join-social-s1 .item .hide h3 { font-size: 22px; color: #333333; } .join-social-s1 .item .hide .para { font-size: 16px; line-height: 2; color: #808080; margin-top: 20px; } .join-social-s1 .item.active { z-index: 2; } .join-social-s1 .item.active:before, .join-social-s1 .item.active:after { transform: scaleX(1); } .join-social-s1 .item.active .show:after { opacity: 0; } /* solution operation service */ .solution-s1 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .solution-s1.bg-1 { background-image: url("../images/solution/bg-1.jpg"); } .solution-s1.bg-2 { background-image: url("../images/operation/bg-1.jpg"); } .solution-s1.bg-3 { background-image: url("../images/service/bg-1.jpg"); } .solution-s1.bg-4 { background-image: url("../images/operation/bg-5.jpg"); } .solution-s1 .cont { margin-top: 2vw; font-size: 0; position: relative; background-color: #fff; box-shadow: 0 0 1.5vw rgba(58, 58, 58, 0.1); } .solution-s1 .cont.l .img-box { margin-left: 50%; } .solution-s1 .cont.l .txt-box { left: 0; } .solution-s1 .cont.r .txt-box { right: 0; } .solution-s1 .img-box { width: 50%; overflow: hidden; } .solution-s1 .img-box img { display: block; width: 100%; transition: transform .6s ease; } .solution-s1 .img-box:hover img { transform: scale(1.1); } .solution-s1 .txt-box { width: 50%; position: absolute; top: 0; bottom: 0; padding: 4vw 1vw 4vw 2vw; } .solution-s1 .txt-box h3 { font-size: 24px; color: #333333; line-height: 28px; } .solution-s1 .txt-box .para { height: calc(100% - 28px); padding-top: 20px; } .solution-s1 .txt-box .scroll { height: 100%; padding-right: 2vw; overflow: auto; font-size: 16px; line-height: 2; color: #808080; letter-spacing: 2px; } .solution-s2 { background-position: center; background-repeat: no-repeat; background-size: cover; } .solution-s2.small { padding: 6.25vw 0; } .solution-s2.large { padding: 6.25vw 0 15.625vw; } .solution-s2 .items { padding-top: 3vw; } .solution-s2 .item { position: relative; height: auto; transition: transform .3s ease; } .solution-s2 .item:before, .solution-s2 .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border-radius: 5px; transition: all .3s ease; } .solution-s2 .item:before { background-color: #fff; background-position: center bottom; background-repeat: no-repeat; background-image: url("../images/solution/bg-6.jpg"); background-size: 100% auto; } .solution-s2 .item:after { background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/solution/bg-7.jpg"); opacity: 0; } .solution-s2 .item .box { height: 100%; position: relative; padding: 7vw 2vw 2vw; z-index: 2; } .solution-s2 .item .txt:before, .solution-s2 .item .txt:after { content: attr(data-num); position: absolute; font-size: 20px; display: block; font-family: 'DINPro-Bold'; font-size: 4vw; line-height: 1; transition: all .3s ease; } .solution-s2 .item .txt:before { color: rgba(0, 0, 0, 0.1); top: 2vw; left: 2vw; } .solution-s2 .item .txt:after { right: 2vw; top: 0; transform: translateY(-50%); color: transparent; background-image: linear-gradient(152deg, #f7b42a, 80%, #f29803); -webkit-background-clip: text; background-clip: text; opacity: 0; } .solution-s2 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .solution-s2 .item h3:after { content: ''; width: 30px; height: 2px; display: block; margin: 15px 0 12px; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .solution-s2 .item p { font-size: 16px; line-height: 2; color: #808080; letter-spacing: 2px; transition: color .3s ease; margin: 0 -2px; } .solution-s2 .item p span { display: inline-block; } .solution-s2 .item:hover { transform: translateY(-10px); } .solution-s2 .item:hover:before { opacity: 0; } .solution-s2 .item:hover:after { opacity: 1; } .solution-s2 .item:hover .txt:before { opacity: 0; } .solution-s2 .item:hover .txt:after { opacity: 1; } .solution-s2 .item:hover h3, .solution-s2 .item:hover p { color: #fff; } .solution-s2 .pagination { margin-top: 2vw; text-align: center; } .solution-s2 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-3-1.png"); cursor: pointer; } .solution-s2 .pagination span.active { background-image: url("../images/index/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .solution-s3 { font-size: 0; position: relative; } .solution-s3.small { padding: 0 3.125vw; } .solution-s3.small-1 { padding: 6.25vw 3.125vw 0; background-color: #f7f7f7; } .solution-s3.large { padding: 6.25vw 0; } .solution-s3 .bg-box { position: absolute; top: 0; left: 0; right: 0; bottom: 9.375vw; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; } .solution-s3 .mt-box { margin-top: -9.375vw; padding: 6.25vw 0; background-color: #fff; } .solution-s3 .mt-box-1 { padding: 6.25vw 0; background-color: #fff; position: relative; z-index: 2; } .solution-s3 .items { margin-top: 2vw; } .solution-s3 .item { display: inline-block; vertical-align: top; width: 25%; max-width: 390px; position: relative; margin: -2px 0 0 -2px; cursor: pointer; z-index: 1; } .solution-s3 .item:before, .solution-s3 .item:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid; z-index: 1; } .solution-s3 .item:before { border-color: #dfe1e6; } .solution-s3 .item:after { border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; opacity: 0; transition: box-shadow .3s ease; } .solution-s3 .item .img-box { overflow: hidden; } .solution-s3 .item img { display: block; width: 100%; transition: transform .3s ease; } .solution-s3 .item:hover { z-index: 2; } .solution-s3 .item:hover:before { opacity: 0; } .solution-s3 .item:hover:after { opacity: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .solution-s3 .item:hover img { transform: scale(1.1); } .solution-s4 { padding: 6.25vw 0; background-color: #f7f7f7; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/solution/bg-3.jpg"); } .solution-s4 .items { margin: 0 -30px; padding: 3.125vw 30px 2vw; font-size: 0; } .solution-s4 .item { display: inline-block; vertical-align: top; width: calc(33.33% - 3.125vw); position: relative; transition: transform .3s ease, box-shadow .3s ease; } .solution-s4 .item a { display: block; } .solution-s4 .item h3 { font-size: 24px; color: #333333; } .solution-s4 .item p { font-size: 16px; line-height: 32px; color: #808080; margin-top: 24px; height: 64px; overflow: hidden; } .solution-s4 .item span { display: block; width: 13px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/solution/icon-1.png"); margin-top: 3.125vw; } .solution-s4 .item-1 { background-color: #fff; } .solution-s4 .item-1 a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/solution/bg-4.jpg"); transition: all .3s ease; z-index: 1; opacity: .1; } .solution-s4 .item-1 .box { position: relative; z-index: 3; padding: 3.125vw 2vw; } .solution-s4 .item-1:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(58, 58, 58, 0.1); } .solution-s4 .item-1:hover a:before { opacity: .5; } .solution-s4 .item-2 { border-radius: 10px 10px 0 0; padding: 3.125vw 1.5vw 0 0; overflow: hidden; background-position: top right; background-repeat: no-repeat; background-image: url("../images/operation/bg-3.jpg"); background-size: cover; } .solution-s4 .item-2 a:before { content: ''; position: absolute; top: 3.125vw; left: 0; right: 1.5vw; bottom: 0; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/solution/bg-4.jpg"); border-radius: 0 4vw 0 0; z-index: 2; opacity: .1; transition: all .3s ease; } .solution-s4 .item-2 a:after { content: ''; position: absolute; top: 3.125vw; left: 0; right: 1.5vw; bottom: 0; background-color: #fff; border-radius: 0 4vw 0 0; z-index: 1; } .solution-s4 .item-2 .box { position: relative; z-index: 3; padding: 3.125vw 2vw; } .solution-s4 .item-2:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(29, 49, 129, 0.2); } .solution-s4 .item-2:hover a:before { opacity: .5; } .solution-s4 .item-3 { padding: 10px 10px 0 0; background-position: top right; background-repeat: no-repeat; background-image: url("../images/service/bg-2.png"); background-size: cover; } .solution-s4 .item-3 .box { position: relative; z-index: 3; padding: 3.125vw 2vw; } .solution-s4 .item-3 h3, .solution-s4 .item-3 p, .solution-s4 .item-3 span { transition: all .3s ease; } .solution-s4 .item-3:hover { transform: translateY(-10px); background-image: url("../images/service/bg-3.png"); } .solution-s4 .item-3:hover h3, .solution-s4 .item-3:hover p { color: #fff; } .solution-s4 .item-3:hover span { background-image: url("../images/solution/icon-1-on.png"); } .solution-s4 .pagination { text-align: center; } .solution-s4 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/solution/icon-3-1.png"); cursor: pointer; } .solution-s4 .pagination span.active { background-image: url("../images/solution/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .solution-s5 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .solution-s5 .items { padding-top: 3vw; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } .solution-s5 .item { position: relative; height: auto; transition: transform .3s ease; border-radius: 10px 10px 0 0; background-image: linear-gradient(45deg, #132270, #2f50a2); padding: 2vw 1.5vw 0 0; } .solution-s5 .item:before, .solution-s5 .item:after { content: ''; position: absolute; width: 6.6vw; height: 6.6vw; max-width: 126px; max-height: 126px; background-position: center; background-repeat: no-repeat; background-size: contain; } .solution-s5 .item:before { top: 15px; right: 15px; background-image: url("../images/service/bg-5.png"); } .solution-s5 .item:after { right: -20px; bottom: -20px; background-image: url("../images/service/bg-6.png"); opacity: 0; } .solution-s5 .item .box { height: 100%; position: relative; padding: 7vw 2vw 2vw; z-index: 2; background-color: #fff; border-radius: 0 4.6vw 0 0; } .solution-s5 .item .txt:before, .solution-s5 .item .txt:after { content: attr(data-num); position: absolute; font-size: 20px; display: block; font-family: 'DINPro-Bold'; font-size: 4vw; line-height: 1; transition: all .3s ease; } .solution-s5 .item .txt:before { color: rgba(0, 0, 0, 0.1); top: 2vw; left: 2vw; } .solution-s5 .item .txt:after { right: 0; top: -2vw; transform: translateY(-50%); color: transparent; background-image: linear-gradient(152deg, #f7b42a, 80%, #f29803); -webkit-background-clip: text; background-clip: text; opacity: 0; } .solution-s5 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .solution-s5 .item h3:after { content: ''; width: 30px; height: 2px; display: block; margin: 15px 0 12px; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .solution-s5 .item p { font-size: 16px; line-height: 2; color: #808080; letter-spacing: 2px; transition: color .3s ease; margin: 0 -2px; } .solution-s5 .item p span { display: inline-block; } .solution-s5 .item:hover { transform: translateY(-10px); } .solution-s5 .item:hover:before { opacity: 0; } .solution-s5 .item:hover:after { opacity: 1; } .solution-s5 .item:hover .txt:before { opacity: 0; } .solution-s5 .item:hover .txt:after { opacity: 1; } .solution-s5 .pagination { margin-top: 2vw; text-align: center; } .solution-s5 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-3-1.png"); cursor: pointer; } .solution-s5 .pagination span.active { background-image: url("../images/index/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .solution-s6 { padding: 2vw 0 6.25vw; } .solution-s6 .info { font-size: 16px; color: #333; line-height: 2; text-align: center; margin-top: 2vw; } .solution-s6 .items { margin-top: 2vw; } .solution-s6 .item { margin-top: 3.125vw; padding: 2vw; border-radius: 10px 10px 0 0; background-position: center top; background-repeat: repeat-y; background-image: url("../images/operation/bg-4.jpg"); overflow: hidden; transition: all .3s ease; } .solution-s6 .item .txt { padding: 2vw; background-color: #fff; border-radius: 0 4.5vw 0 0; } .solution-s6 .item .txt:before { content: attr(data-num); font-size: 20px; display: block; font-family: 'DINPro-Bold'; font-size: 4vw; margin-bottom: 2vw; line-height: 1; transition: all .3s ease; } .solution-s6 .item .txt:before { color: rgba(0, 0, 0, 0.1); } .solution-s6 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .solution-s6 .item h3:after { content: ''; width: 30px; height: 2px; display: block; margin: 15px 0 12px; background-image: linear-gradient(90deg, #5051f3, #c9449a); } .solution-s6 .item p { font-size: 16px; line-height: 2; color: #808080; letter-spacing: 2px; transition: color .3s ease; margin: 0 -2px; } .solution-s6 .item p span { display: inline-block; } .solution-s6 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .solution-s7 { padding: 0 0 6.25vw; } .solution-s7 .items { margin: 0 -20px; padding: 2vw 20px; } .solution-s7 .item { height: auto; } .solution-s7 .item a { position: relative; display: block; height: 100%; padding: 2vw; background-color: #f5f5f5; border-radius: 5px; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; text-align: center; transition: all .3s ease; } .solution-s7 .item a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; border-image: linear-gradient(90deg, #5051f3, #c9449a) 1 1; opacity: 0; transition: all .3s ease; } .solution-s7 .item:nth-of-type(4n-3) a { background-image: url("../images/operation/img-4-1.png"); } .solution-s7 .item:nth-of-type(4n-2) a { background-image: url("../images/operation/img-4-2.png"); } .solution-s7 .item:nth-of-type(4n-1) a { background-image: url("../images/operation/img-4-3.png"); } .solution-s7 .item:nth-of-type(4n) a { background-image: url("../images/operation/img-4-4.png"); } .solution-s7 .item .cell { vertical-align: top; } .solution-s7 .item h3 { font-size: 24px; line-height: 1.5; color: #333; margin-bottom: 24px; } .solution-s7 .item p { font-size: 16px; line-height: 2; color: #808080; margin-bottom: 24px; } .solution-s7 .item span { position: absolute; bottom: 1.5vw; left: 0; right: 0; font-size: 14px; color: #808080; font-family: 'DINPro-Regular'; } .solution-s7 .item:hover a { background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .solution-s7 .item:hover a:after { opacity: 1; } .solution-s7 .pagination { text-align: center; } .solution-s7 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/solution/icon-3-1.png"); cursor: pointer; } .solution-s7 .pagination span.active { background-image: url("../images/solution/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .solution-s8 { padding: 6.25vw 0; background-color: #f7f7f7; } .solution-s8 .items { margin: 0 -10px; padding: 2vw 10px; } .solution-s8 .item { position: relative; height: auto; transition: transform .3s ease; } .solution-s8 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, #132270, #2f50a2); border-radius: 0 20px 0 20px; opacity: 0; z-index: 1; transition: all .3s ease; } .solution-s8 .item .box { height: 100%; position: relative; padding: 4vw 2vw 2vw; background-color: #fff; border-radius: 20px 0 20px 0; z-index: 3; transition: all .3s ease; } .solution-s8 .item .box:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url("../images/solution/bg-4.jpg"); opacity: .1; transition: all .3s ease; z-index: 1; } .solution-s8 .item .txt:before { content: attr(data-num); font-size: 2.5vw; line-height: 1; color: #eeeeee; font-family: 'DINPro-Bold'; position: absolute; left: 2vw; top: 2vw; } .solution-s8 .item .txt h3 { font-size: 24px; line-height: 1.5; color: #333; margin-top: 24px; } .solution-s8 .item .txt p { font-size: 16px; line-height: 2; color: #808080; margin-top: 24px; } .solution-s8 .item:hover:before { opacity: 1; } .solution-s8 .item:hover .box { transform: translate(-10px, -10px); } .solution-s8 .item:hover .txt:before { color: transparent; background-image: linear-gradient(90deg, #5051f3, #c9449a); -webkit-background-clip: text; } .solution-s8 .pagination { text-align: center; } .solution-s8 .pagination span { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/solution/icon-3-1.png"); cursor: pointer; } .solution-s8 .pagination span.active { background-image: url("../images/solution/icon-3-2.png"); animation: o-rotate 10s linear infinite; } .solution-new-page .c-nav { background-color: rgba(255, 255, 255, 0.9); } .solution-new-s1 { position: relative; overflow: hidden; font-size: 0; margin-top: -60px; } .solution-new-s1 img { display: block; width: 100%; } .solution-new-s1 .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-top: 60px; z-index: 3; background-image: linear-gradient(90deg, #29489a, 30%, rgba(41, 72, 154, 0)); } .solution-new-s1 h3 { font-size: 60px; color: #fff; } .solution-new-s1 p { font-size: 20px; line-height: 1.8; color: #fff; margin-top: 24px; max-width: 700px; } .solution-new-s1 .tip { margin-top: 3.125vw; } .solution-new-s1 .tip span { display: inline-block; vertical-align: top; background-color: #fff; font-size: 16px; color: #333333; padding: 15px 30px; margin-right: 24px; border-radius: 5px; } .solution-new-s2 .item { position: relative; } .solution-new-s2 .item .img-box { width: 50%; overflow: hidden; } .solution-new-s2 .item .img-box img { display: block; width: 100%; transition: transform .6s ease; } .solution-new-s2 .item .img-box:hover img { transform: scale(1.1); } .solution-new-s2 .item .txt-box { width: 50%; height: 100%; position: absolute; top: 0; padding: 0 9.375vw; } .solution-new-s2 .item h3 { font-size: 24px; color: #333333; } .solution-new-s2 .item h3:after { content: ''; width: 24px; height: 2px; background-image: linear-gradient(90deg, #5051f3, #c9449a); display: block; margin: 20px 0; } .solution-new-s2 .item .para { padding-right: 20px; font-size: 16px; line-height: 32px; color: #808080; max-height: 288px; overflow: auto; } .solution-new-s2 .item:nth-of-type(odd) .txt-box { right: 0; } .solution-new-s2 .item:nth-of-type(even) .img-box { margin-left: 50%; } .solution-new-s2 .item:nth-of-type(even) .txt-box { left: 0; } .solution-new-s3 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/solution-new/img-2.jpg"); background-attachment: fixed; } .solution-new-s3 .items { font-size: 0; margin-top: 2vw; } .solution-new-s3 .item { display: inline-block; vertical-align: top; width: 25%; position: relative; } .solution-new-s3 .item .img-box { overflow: hidden; } .solution-new-s3 .item img { display: block; width: 100%; transition: transform .3s ease; } .solution-new-s3 .item:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-top: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .solution-new-s3 .item:nth-of-type(4n) { border-right: none; } .solution-new-s3 .item:nth-of-type(1), .solution-new-s3 .item:nth-of-type(2), .solution-new-s3 .item:nth-of-type(3), .solution-new-s3 .item:nth-of-type(4) { border-top: none; } .solution-new-s3 .item:hover img { transform: scale(1.1); } /* investor */ .investor-index-s1 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-7.jpg"); } .investor-index-s1 .cont { margin: 2vw 0; display: flex; } .investor-index-s1 .img-box { width: 42%; max-width: 640px; overflow: hidden; } .investor-index-s1 .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .investor-index-s1 .img-box:hover img { transform: scale(1.1); } .investor-index-s1 .txt-box { width: 58%; padding-left: 3.125vw; } .investor-index-s1 .txt-box a { display: block; margin-top: 1.25vw; padding-right: 9.375vw; position: relative; font-size: 18px; line-height: 24px; color: #333333; transition: all .3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .investor-index-s1 .txt-box a:nth-of-type(1) { margin-top: 0; } .investor-index-s1 .txt-box a span { font-size: 24px; line-height: 1; font-family: 'NeutraTextLight'; position: absolute; right: 0; top: 50%; transform: translateY(-60%); } .investor-index-s1 .txt-box a:hover { color: #29489a; margin-left: -10px; margin-right: -10px; } .investor-index-s2 { padding: 6.25vw 0; background-color: #f7f7f7; } .investor-index-s2 .items { margin: 2vw 0; font-size: 0; } .investor-index-s2 .item { display: inline-block; vertical-align: top; width: calc((100% - 6.25vw) / 5); margin-left: 1.5625vw; position: relative; background-color: #fff; transition: all .3s ease; } .investor-index-s2 .item:nth-of-type(1) { margin-left: 0; } .investor-index-s2 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, #001066, #2f50a2); z-index: 1; opacity: 0; transition: all .3s ease; } .investor-index-s2 .item:after { content: ''; position: absolute; right: 1.5vw; bottom: 3.125vw; width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/investor/icon-1.png"); opacity: 0; transition: all .3s ease; z-index: 3; } .investor-index-s2 .item .img-box { position: relative; z-index: 2; overflow: hidden; } .investor-index-s2 .item img { display: block; width: 100%; } .investor-index-s2 .item span { font-size: 60px; font-family: 'NeutraTextBook'; color: #e5e5e5; line-height: 1; position: absolute; left: 1.5vw; top: 2vw; z-index: 3; transition: all .3s ease; } .investor-index-s2 .item .txt-box { position: absolute; left: 1.5vw; right: 1.5vw; top: calc(100% - 2.5vw); transform: translateY(-100%); transition: all .3s ease; z-index: 3; } .investor-index-s2 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .investor-index-s2 .item p { font-size: 16px; color: #808080; margin-top: 10px; transition: color .3s ease; } .investor-index-s2 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(19, 41, 126, 0.3); } .investor-index-s2 .item:hover:before, .investor-index-s2 .item:hover:after { opacity: 1; } .investor-index-s2 .item:hover .txt-box { top: 2.5vw; transform: none; transition-duration: .6s; } .investor-index-s2 .item:hover span { opacity: 0; } .investor-index-s2 .item:hover h3, .investor-index-s2 .item:hover p { color: #fff; } .investor-index-s3 { padding: 6.25vw 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-4.jpg"); background-attachment: fixed; } .investor-index-s3 .cont { margin-top: 2vw; width: 50vw; background-color: #fff; display: flex; } .investor-index-s3 .tab-tit { padding: 3.125vw 0; width: 9.375vw; } .investor-index-s3 .tab-tit .item { height: 33.33%; position: relative; text-align: center; cursor: pointer; } .investor-index-s3 .tab-tit .item:after { content: ''; width: 4px; height: 100%; background-color: #29489a; position: absolute; top: 0; right: -1px; transform: scaleX(0); } .investor-index-s3 .tab-tit .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .investor-index-s3 .tab-tit .item h4 { font-size: 14px; color: #bfbfbf; text-transform: uppercase; margin-top: 5px; transition: color .3s ease; } .investor-index-s3 .tab-tit .item:hover:after, .investor-index-s3 .tab-tit .item.active:after { transform: scaleX(1); transition: transform .6s ease; } .investor-index-s3 .tab-tit .item:hover h3, .investor-index-s3 .tab-tit .item:hover h4, .investor-index-s3 .tab-tit .item.active h3, .investor-index-s3 .tab-tit .item.active h4 { color: #29489a; } .investor-index-s3 .tab-cont { width: calc(100% - 9.375vw); border-left: 1px solid #e6e6e6; } .investor-index-s3 .child { display: none; position: relative; padding: 3.125vw 4.5vw 4vw; } .investor-index-s3 .child.active { display: block; } .investor-index-s3 .child .item { margin-top: 1.5vw; padding-top: 1vw; border-top: 1px solid #e6e6e6; } .investor-index-s3 .child .item:nth-of-type(1) { margin-top: 0; padding-top: 0; border: none; } .investor-index-s3 .child .item .year { font-size: 48px; line-height: 1; color: #29489a; font-family: 'NeutraTextBook'; } .investor-index-s3 .child .item h3 { font-size: 22px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10px; } .investor-index-s3 .child .item .btns { margin-top: 15px; } .investor-index-s3 .child .item a { display: inline-block; vertical-align: top; width: 180px; font-size: 16px; line-height: 48px; color: #808080; text-align: center; border: 1px solid #e6e6e6; } .investor-index-s3 .child .item a:nth-of-type(2) { margin-left: 20px; } .investor-index-s3 .child .item a:hover { color: #5c3e3e; border-color: transparent; background-image: linear-gradient(90deg, #f7b42a, #f29803); } .investor-index-s3 .child a.more { font-size: 16px; color: #29489a; position: absolute; right: 1.5vw; bottom: 1.5vw; } .investor-index-s4 { padding: 6.25vw 0; } .investor-index-s4 .cont { font-size: 0; display: flex; } .investor-index-s4 .cont.mt { margin-top: 2vw; } .investor-index-s4 .left-box { width: 24%; padding: 3.125vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-2.jpg"); } .investor-index-s4 .left-box .box { position: relative; padding-bottom: 9.375vw; } .investor-index-s4 .left-box h3 { font-size: 24px; color: #fff; } .investor-index-s4 .left-box .num { font-size: 60px; line-height: 1; font-family: 'NeutraTextBold'; margin-top: 3.125vw; } .investor-index-s4 .left-box .num:after { content: ''; width: 14px; height: 10px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: bottom; display: inline-block; vertical-align: middle; } .investor-index-s4 .left-box .num.up { color: #f40d00; } .investor-index-s4 .left-box .num.up:after { background-image: url("../images/investor/up.png"); } .investor-index-s4 .left-box .num.down { color: #0f990f; } .investor-index-s4 .left-box .num.down:after { background-image: url("../images/investor/down.png"); } .investor-index-s4 .left-box .para { font-size: 16px; line-height: 2; color: #fff; position: absolute; bottom: 0; left: 0; right: 0; } .investor-index-s4 .right-box { width: 76%; padding: 3.125vw; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-3.jpg"); } .investor-index-s4 .right-box .tip { font-size: 14px; color: #41434c; } .investor-index-s4 .right-box .item { display: inline-block; vertical-align: top; width: 25%; padding-top: 3.125vw; } .investor-index-s4 .right-box .item h3 { font-size: 16px; color: #41434c; } .investor-index-s4 .right-box .item .num { font-size: 48px; line-height: 1; color: #41434c; font-family: 'NeutraTextBook'; margin-top: 10px; } .investor-index-s4 .right-box .item .num:after { content: ''; width: 14px; height: 10px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: bottom; display: inline-block; vertical-align: middle; } .investor-index-s4 .right-box .item .num.up { color: #f40d00; } .investor-index-s4 .right-box .item .num.up:after { background-image: url("../images/investor/up.png"); } .investor-index-s4 .right-box .item .num.down { color: #0f990f; } .investor-index-s4 .right-box .item .num.down:after { background-image: url("../images/investor/down.png"); } .investor-index-s5 { position: relative; } .investor-index-s5 .img-box { overflow: hidden; } .investor-index-s5 .img-box img { display: block; width: 100%; } .investor-index-s5 .txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .investor-index-s5 .para { font-size: 16px; line-height: 2; color: #fff; margin-top: 2vw; } .investor-index-s5 a { margin-top: 2vw; } .investor-service-s1 { padding: 6.25vw 0; background-color: #f7f7f7; } .investor-service-s1 .items { font-size: 0; } .investor-service-s1 .item { display: inline-block; vertical-align: top; width: calc((100% - 3.2vw) / 2); position: relative; background-color: #fff; transition: all .3s ease; } .investor-service-s1 .item:nth-of-type(even) { margin-left: 3.125vw; } .investor-service-s1 .item:nth-of-type(3), .investor-service-s1 .item:nth-of-type(4) { margin-top: 3.125vw; } .investor-service-s1 .item:last-of-type a:after { content: ''; position: absolute; right: 3.125vw; bottom: 3.125vw; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/investor/icon-3.png"); opacity: 0; transition: all .3s ease; z-index: 3; } .investor-service-s1 .item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, #001066, #2f50a2); z-index: 1; opacity: 0; transition: all .3s ease; } .investor-service-s1 .item .img-box { position: relative; z-index: 2; overflow: hidden; } .investor-service-s1 .item img { display: block; width: 100%; } .investor-service-s1 .item span { width: 48px; height: 48px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; left: 2.5vw; top: 2vw; z-index: 3; transition: all .3s ease; } .investor-service-s1 .item:nth-of-type(1) span { background-image: url("../images/investor/icon-2-1.png"); } .investor-service-s1 .item:nth-of-type(1):hover span { background-image: url("../images/investor/icon-2-1-on.png"); } .investor-service-s1 .item:nth-of-type(2) span { background-image: url("../images/investor/icon-2-2.png"); } .investor-service-s1 .item:nth-of-type(2):hover span { background-image: url("../images/investor/icon-2-2-on.png"); } .investor-service-s1 .item:nth-of-type(3) span { background-image: url("../images/investor/icon-2-3.png"); } .investor-service-s1 .item:nth-of-type(3):hover span { background-image: url("../images/investor/icon-2-3-on.png"); } .investor-service-s1 .item:nth-of-type(4) span { background-image: url("../images/investor/icon-2-4.png"); } .investor-service-s1 .item:nth-of-type(4):hover span { background-image: url("../images/investor/icon-2-4-on.png"); } .investor-service-s1 .item .txt-box { position: absolute; left: 2.5vw; right: 2.5vw; bottom: 2.5vw; transition: all .3s ease; z-index: 3; } .investor-service-s1 .item h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .investor-service-s1 .item p { font-size: 16px; color: #808080; margin-top: 20px; transition: color .3s ease; } .investor-service-s1 .item:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(19, 41, 126, 0.3); } .investor-service-s1 .item:hover:before, .investor-service-s1 .item:hover a:after { opacity: 1; } .investor-service-s1 .item:hover h3, .investor-service-s1 .item:hover p { color: #fff; } .investor-notice-s1 { padding: 6.25vw 0; } .investor-notice-s1 .top-block { display: flex; justify-content: space-between; position: relative; z-index: 4; } .investor-notice-s1 .top-block .box { height: 60px; position: relative; border: 1px solid #e6e6e6; } .investor-notice-s1 .top-block .box.open ul { display: block; } .investor-notice-s1 .top-block .select { width: calc(25% - 24px); } .investor-notice-s1 .top-block .select input { cursor: pointer; position: relative; z-index: 2; } .investor-notice-s1 .top-block .select:after { content: ''; width: 14px; height: 9px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/join/icon-9.png"); position: absolute; right: 20px; top: 50%; margin-top: -4px; z-index: 3; } .investor-notice-s1 .top-block .form { width: calc(50% - 210px); margin-right: 210px; } .investor-notice-s1 .top-block input { display: block; width: 100%; height: 100%; padding: 0 20px; font-size: 16px; color: #808080; } .investor-notice-s1 .top-block button { width: 180px; height: 60px; position: absolute; top: -1px; right: -210px; background-image: linear-gradient(135deg, #f7b42a, #f29803); font-size: 20px; color: #5c3e3e; cursor: pointer; } .investor-notice-s1 .top-block ul { max-height: 300px; overflow: auto; position: absolute; left: -2px; right: -2px; top: calc(100% + 2px); background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); z-index: 1; display: none; } .investor-notice-s1 .top-block ul li { font-size: 16px; color: #333; line-height: 60px; padding: 0 20px; transition: all 0.3s ease; cursor: pointer; } .investor-notice-s1 .top-block ul li:hover { background-color: #f39b07; color: #fff; } .investor-notice-s1 .bot-block { margin: 3vw 0 2vw; } .investor-notice-s1 .bot-block .b-date { font-size: 24px; color: #333; } .investor-notice-s1 .bot-block .items { margin-top: 2vw; } .investor-notice-s1 .bot-block .item { margin-top: 10px; } .investor-notice-s1 .bot-block .item a { display: flex; width: 100%; } .investor-notice-s1 .bot-block .item .date { width: 120px; height: 120px; padding: 20px; background-color: #f2f2f2; position: relative; } .investor-notice-s1 .bot-block .item .date:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, #001066, #2f50a2); opacity: 0; transition: all .3s ease; z-index: 1; } .investor-notice-s1 .bot-block .item .date i { font-style: normal; font-size: 60px; line-height: 1; color: #0056a7; font-family: 'NeutraTextBold'; display: block; margin-top: -20px; position: relative; z-index: 2; transition: color .3s ease; } .investor-notice-s1 .bot-block .item .date span { position: absolute; left: 20px; right: 20px; bottom: 20px; font-size: 20px; color: #333333; font-family: 'NeutraTextLight'; z-index: 2; transition: color .3s ease; } .investor-notice-s1 .bot-block .item .box { width: calc(100% - 122px); margin-left: 2px; background-color: #f7f7f7; position: relative; padding: 0 9.375vw 0 3.125vw; } .investor-notice-s1 .bot-block .item .box:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, #001066, #2f50a2); opacity: 0; transition: all .3s ease; z-index: 1; } .investor-notice-s1 .bot-block .item .box:after { content: ''; width: 54px; height: 54px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/investor/icon-4-1.png"); position: absolute; right: 3.125vw; top: 50%; transform: translateY(-50%); transition: all .3s ease; z-index: 3; } .investor-notice-s1 .bot-block .item .box .cell-box { height: 100%; position: relative; z-index: 2; } .investor-notice-s1 .bot-block .item .box h3 { font-size: 24px; color: #333333; transition: color .3s ease; } .investor-notice-s1 .bot-block .item .box .info { margin-top: 15px; } .investor-notice-s1 .bot-block .item .box span { display: inline-block; vertical-align: top; font-size: 14px; color: #808080; margin-right: 2.5vw; transition: color .3s ease; } .investor-notice-s1 .bot-block .item .box span:last-of-type { margin-right: 0; } .investor-notice-s1 .bot-block .item:hover .date:before { opacity: 1; } .investor-notice-s1 .bot-block .item:hover .date i, .investor-notice-s1 .bot-block .item:hover .date span { color: #fff; } .investor-notice-s1 .bot-block .item:hover .box:before { opacity: 1; } .investor-notice-s1 .bot-block .item:hover .box:after { background-image: url("../images/investor/icon-4-2.png"); } .investor-notice-s1 .bot-block .item:hover .box h3, .investor-notice-s1 .bot-block .item:hover .box span { color: #fff; } .investor-governance-s1 { padding: 6.25vw 0; } .investor-governance-s1 .tip { font-size: 14px; color: #333333; margin-top: 20px; } .investor-governance-s1 .cont { margin-top: 2vw; font-size: 0; } .investor-governance-s1 .head-box { background-image: linear-gradient(90deg, #001066, #2f50a2); } .investor-governance-s1 .head-box span { display: inline-block; vertical-align: top; width: 17%; font-size: 24px; line-height: 3.75; color: #fff; } .investor-governance-s1 .head-box span:nth-of-type(1) { padding-left: 3.125vw; } .investor-governance-s1 .head-box span:nth-of-type(2) { width: 49%; } .investor-governance-s1 .item { border-bottom: 1px solid #e6e6e6; } .investor-governance-s1 .item:nth-of-type(even) { background-color: #f7f7f7; } .investor-governance-s1 .item span { display: inline-block; vertical-align: top; width: 17%; font-size: 20px; line-height: 3; color: #333333; } .investor-governance-s1 .item span:nth-of-type(1) { padding-left: 3.125vw; } .investor-governance-s1 .item span:nth-of-type(2) { width: 49%; } .investor-governance-s1 .item span.num { font-family: 'NeutraTextBook'; } .investor-governance-s2 { padding: 6.25vw 0; background-color: #f7f7f7; } .investor-governance-s2 .top-block { font-size: 0; text-align: center; border-bottom: 1px solid #d9d9d9; } .investor-governance-s2 .top-block span { display: inline-block; vertical-align: top; font-size: 24px; line-height: 40px; color: #333333; padding: 0 2vw 20px; margin: 0 1vw; position: relative; transition: all .3s ease; cursor: pointer; } .investor-governance-s2 .top-block span:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-image: linear-gradient(90deg, #5051f3, #c9449a); transform: scaleX(0); transition: transform .3s ease; } .investor-governance-s2 .top-block span:hover:after, .investor-governance-s2 .top-block span.active:after { transform: scaleX(1); } .investor-governance-s2 .top-block span.active { font-size: 36px; } .investor-governance-s2 .bot-block { margin-top: 2vw; font-size: 0; } .investor-governance-s2 .bot-block .child { display: none; } .investor-governance-s2 .bot-block .child.active { display: flex; flex-wrap: wrap; } .investor-governance-s2 .bot-block .box { display: inline-block; vertical-align: top; width: calc((100% - 6.2vw) / 4); position: relative; padding: 3.5vw 2.5vw; background-color: #eaeff3; margin-top: 2vw; margin-right: 2vw; transition: all .3s ease; } .investor-governance-s2 .bot-block .box:nth-of-type(1), .investor-governance-s2 .bot-block .box:nth-of-type(2), .investor-governance-s2 .bot-block .box:nth-of-type(3), .investor-governance-s2 .bot-block .box:nth-of-type(4) { margin-top: 0; } .investor-governance-s2 .bot-block .box:nth-of-type(4n) { margin-right: 0; } .investor-governance-s2 .bot-block .box:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-10.jpg"); z-index: 1; opacity: 0; transition: all .3s ease; } .investor-governance-s2 .bot-block .box h4 { font-size: 16px; color: #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; transition: color .3s ease; } .investor-governance-s2 .bot-block .box h3 { font-size: 24px; color: #333333; margin-top: 15px; position: relative; z-index: 2; transition: color .3s ease; } .investor-governance-s2 .bot-block .box:hover { box-shadow: 0 10px 30px rgba(9, 28, 113, 0.3); } .investor-governance-s2 .bot-block .box:hover:before { opacity: 1; } .investor-governance-s2 .bot-block .box:hover h4, .investor-governance-s2 .bot-block .box:hover h3 { color: #fff; } .investor-governance-s3 { padding: 6.25vw 0; } .investor-governance-s3 .cont { margin-top: 2vw; font-size: 0; } .investor-governance-s3 a { display: flex; width: 100%; } .investor-governance-s3 .img-box { width: 62%; max-width: 960px; overflow: hidden; } .investor-governance-s3 .img-box img { display: block; width: 100%; transition: transform .6s ease; } .investor-governance-s3 .img-box:hover img { transform: scale(1.1); } .investor-governance-s3 .txt-box { position: relative; width: 38%; padding: 6.25vw 3.125vw; background-image: linear-gradient(90deg, #001066, #2f50a2); text-align: center; color: #ffffff; } .investor-governance-s3 .txt-box h4 { font-size: 24px; } .investor-governance-s3 .txt-box h3 { font-size: 48px; margin-top: 1.5vw; } .investor-governance-s3 .txt-box .tip { position: absolute; bottom: 3.125vw; left: 3.125vw; right: 3.125vw; font-size: 14px; } .investor-report-s1 { padding: 6.25vw 0; font-size: 0; } .investor-report-s1 .inner-tit { padding-bottom: 2vw; border-bottom: 2px solid #333333; } .investor-report-s1 .inner-tit:after { display: none; } .investor-report-s1 .block { margin-top: 4vw; } .investor-report-s1 .block:nth-of-type(1) { margin-top: 0; } .investor-report-s1 .items { margin-top: 3.125vw; position: relative; } .investor-report-s1 .items .year { width: 18%; display: inline-block; vertical-align: top; font-size: 72px; line-height: 1; font-family: 'NeutraTextBook'; } .investor-report-s1 .items .lists { width: 82%; display: inline-block; vertical-align: top; } .investor-report-s1 .items .list { position: relative; padding: 2vw 0; border-bottom: 1px solid #e6e6e6; } .investor-report-s1 .items .list h3 { margin-right: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; color: #333333; } .investor-report-s1 .items .list .btns { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .investor-report-s1 .items .list a { display: inline-block; vertical-align: top; width: 180px; font-size: 16px; line-height: 48px; color: #808080; text-align: center; border: 1px solid #e6e6e6; } .investor-report-s1 .items .list a:nth-of-type(2) { margin-left: 20px; } .investor-report-s1 .items .list a:hover { color: #5c3e3e; border-color: transparent; background-image: linear-gradient(90deg, #f7b42a, #f29803); } /* other */ .copyright-s1 { padding: 6.25vw 0; font-size: 0; } .copyright-s1 .left-box { display: inline-block; vertical-align: top; position: sticky; top: 100px; width: 30%; padding: 1.5vw 0 4.5vw 0; border-left: 2px solid #e6e6e6; } .copyright-s1 .left-box h3 { font-size: 24px; color: #333; line-height: 1.5; padding: 0 4.5vw 0 2vw; position: relative; } .copyright-s1 .left-box h3:before { content: ''; width: 2px; height: 100%; background-image: linear-gradient(0deg, #5051f3, #c9449a); position: absolute; top: 0; left: -2px; } .copyright-s1 .left-box .para { margin-top: 1.5vw; padding: 0 4.5vw 0 2vw; font-size: 18px; line-height: 2; color: #808080; } .copyright-s1 .right-box { display: inline-block; vertical-align: top; width: 70%; padding: 4.5vw 3.125vw 6.25vw; border: 1px solid #e6e6e6; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-color: #fff; background-image: url("../images/other/img-1.jpg"); } .copyright-s1 .right-box .para { font-size: 18px; line-height: 2; color: #808080; } .disclaimer-s1 { padding: 6.25vw 0; font-size: 0; } .disclaimer-s1 .left-box { display: inline-block; vertical-align: top; position: sticky; top: 100px; width: 30%; padding: 1.5vw 0 1.5vw 0; border-left: 2px solid #e6e6e6; } .disclaimer-s1 .left-box span { display: block; font-size: 16px; line-height: 3; color: #333333; transition: all .3s ease; position: relative; padding: 0 2vw; cursor: pointer; } .disclaimer-s1 .left-box span:before { content: ''; width: 2px; height: 100%; background-image: linear-gradient(0deg, #5051f3, #c9449a); position: absolute; top: 0; left: -2px; transform: scaleY(0); transition: transform .3s ease; } .disclaimer-s1 .left-box span.active { color: #29489a; } .disclaimer-s1 .left-box span.active:before { transform: scaleY(1); } .disclaimer-s1 .right-box { display: inline-block; vertical-align: top; width: 70%; padding: 4.5vw 3.125vw 6.25vw; border: 1px solid #e6e6e6; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-color: #fff; background-image: url("../images/other/img-1.jpg"); } .disclaimer-s1 .right-box .para { font-size: 18px; line-height: 2; color: #808080; } .disclaimer-s1 .right-box .para b { color: #333; } .search-s2 { position: relative; background-color: #fff; padding: 6.25vw 0; } .search-s2 .tip { font-size: 18px; color: #333; } .search-s2 .tip b { color: #29489a; } .search-s2 .items { margin-bottom: 2vw; } .search-s2 .item { padding: 0 4vw; border-bottom: 8px solid #f5f5f5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .search-s2 .item a { display: block; padding: 3.125vw 0; } .search-s2 .item .date { font-size: 14px; color: #29489a; } .search-s2 .item h3 { font-size: 20px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 20px; } .search-s2 .item span { display: inline-block; font-size: 16px; color: #29489a; margin-top: 20px; } @media screen and (min-width: 1025px) { .search-s2 .item:hover { border-color: #29489a; } } .search-s2 .nocont { text-align: center; margin-top: 3vw; font-size: 16px; color: #808080; } .sitemap-s1 { padding: 6.25vw 0; font-size: 0; } .sitemap-s1 .left-box { display: inline-block; vertical-align: top; position: sticky; top: 100px; width: 30%; padding: 1.5vw 0 1.5vw 0; border-left: 2px solid #e6e6e6; } .sitemap-s1 .left-box span { display: block; font-size: 16px; line-height: 3; color: #333333; transition: all .3s ease; position: relative; padding: 0 2vw; cursor: pointer; } .sitemap-s1 .left-box span:before { content: ''; width: 2px; height: 100%; background-image: linear-gradient(0deg, #5051f3, #c9449a); position: absolute; top: 0; left: -2px; transform: scaleY(0); transition: transform .3s ease; } .sitemap-s1 .left-box span.active { color: #29489a; } .sitemap-s1 .left-box span.active:before { transform: scaleY(1); } .sitemap-s1 .right-box { display: inline-block; vertical-align: top; width: 70%; } .sitemap-s1 .box-1 { margin-top: 6.25vw; } .sitemap-s1 .box-1:nth-of-type(1) { margin-top: 0; } .sitemap-s1 .box-1 .tit { font-size: 32px; color: #333; padding-left: 40px; font-weight: bold; position: relative; } .sitemap-s1 .box-1 .tit:before { content: ''; width: 4px; height: 32px; background-image: linear-gradient(0deg, #5051f3, #c9449a); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .sitemap-s1 .box-1-cont { border: 1px solid #e6e6e6; margin-top: 2vw; padding: 0 3.125vw; } .sitemap-s1 .box-1-cont > div { border-bottom: 1px solid #e6e6e6; } .sitemap-s1 .box-1-cont > div:last-of-type { border: none; } .sitemap-s1 .box-2-1 h3 { font-size: 20px; color: #bfbfbf; padding: 1.5vw 0; } .sitemap-s1 .box-2-1-cont { border-top: 1px solid #e6e6e6; padding-left: 3.125vw; } .sitemap-s1 .box-2-1-cont > div { padding: 1.5vw 0; border-bottom: 1px solid #e6e6e6; } .sitemap-s1 .box-2-1-cont > div:last-of-type { border: none; } .sitemap-s1 .box-2-2 { padding: 1.5vw 0; } .sitemap-s1 .box-2-2 a { display: inline-block; vertical-align: top; font-size: 20px; color: #333; transition: color .3s ease; } .sitemap-s1 .box-2-2 a:hover { color: #29489a; } .sitemap-s1 .box-3-1 a { display: inline-block; vertical-align: top; font-size: 18px; color: #333; margin-right: 3.125vw; transition: color .3s ease; } .sitemap-s1 .box-3-1 a:before { content: ''; width: 6px; height: 6px; background-color: #333333; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .sitemap-s1 .box-3-1 a:hover { color: #29489a; } .sitemap-s1 .box-3-1 a:hover:before { background-color: #29489a; } .sitemap-s1 .box-3-2 h4 { font-size: 18px; color: #bfbfbf; } .sitemap-s1 .box-3-2 h4:before { content: ''; width: 6px; height: 6px; background-color: #bfbfbf; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .sitemap-s1 .box-4-1 a { display: inline-block; vertical-align: top; font-size: 16px; color: #333; margin-right: 3.125vw; margin-top: 15px; transition: color .3s ease; } .sitemap-s1 .box-4-1 a:hover { color: #29489a; } .sitemap-s1 .box-4-1 a:hover:before { background-color: #29489a; } .sitemap-s1 .box-4-2 h5 { font-size: 16px; color: #bfbfbf; margin: 15px 0; } .sitemap-s1 .box-5-1 { background-color: #f7f7f7; padding: 15px 2vw; } .sitemap-s1 .box-5-1 a { display: inline-block; vertical-align: top; font-size: 14px; color: #333; margin-right: 3.125vw; margin-top: 5px; margin-bottom: 5px; transition: color .3s ease; } .sitemap-s1 .box-5-1 a:hover { color: #29489a; } .sitemap-s1 .box-5-1 a:hover:before { background-color: #29489a; } .sitemap-s1 .box-5-2 { background-color: #f7f7f7; padding: 15px 2vw; } .sitemap-s1 .box-5-2 h6 { font-size: 14px; color: #bfbfbf; } .sitemap-s1 .box-6-1 { padding: 15px 2vw 0; margin-top: 15px; border-top: 1px solid #d9d9d9; } .sitemap-s1 .box-6-1 a { display: inline-block; vertical-align: top; font-size: 14px; color: #333; margin-right: 3.125vw; margin-top: 5px; margin-bottom: 5px; transition: color .3s ease; } .sitemap-s1 .box-6-1 a:hover { color: #29489a; } .sitemap-s1 .box-6-1 a:hover:before { background-color: #29489a; } .bank-s1 { padding: 6.25vw 0; font-size: 0; } .bank-s1 .left-box { display: inline-block; vertical-align: top; position: sticky; top: 150px; width: 30%; padding: 1.5vw 0 1.5vw 0; border-left: 2px solid #e6e6e6; } .bank-s1 .left-box span { display: block; font-size: 16px; line-height: 3; color: #333333; transition: all .3s ease; position: relative; padding: 0 2vw; cursor: pointer; } .bank-s1 .left-box span:before { content: ''; width: 2px; height: 100%; background-image: linear-gradient(0deg, #5051f3, #c9449a); position: absolute; top: 0; left: -2px; transform: scaleY(0); transition: transform .3s ease; } .bank-s1 .left-box span.active { color: #29489a; } .bank-s1 .left-box span.active:before { transform: scaleY(1); } .bank-s1 .right-box { display: inline-block; vertical-align: top; width: 70%; } .bank-s1 .item { display: inline-block; vertical-align: top; width: 33.33%; transition: all .3s ease; } .bank-s1 .item a { display: block; padding: 2vw; } .bank-s1 .item h3 { font-size: 18px; color: #29489a; } .bank-s1 .item p { font-size: 14px; line-height: 24px; color: #575d6c; margin-top: 10px; } .bank-s1 .item:hover { box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1); } .bank-s1 .box-1 { margin-top: 6.25vw; } .bank-s1 .box-1:nth-of-type(1) { margin-top: 0; } .bank-s1 .box-1:nth-of-type(10n-9) .box-1-cont { background-image: url("../images/other/bg-1.jpg"); } .bank-s1 .box-1:nth-of-type(10n-8) .box-1-cont { background-image: url("../images/other/bg-2.jpg"); } .bank-s1 .box-1:nth-of-type(10n-7) .box-1-cont { background-image: url("../images/other/bg-3.jpg"); } .bank-s1 .box-1:nth-of-type(10n-6) .box-1-cont { background-image: url("../images/other/bg-4.jpg"); } .bank-s1 .box-1:nth-of-type(10n-5) .box-1-cont { background-image: url("../images/other/bg-5.jpg"); } .bank-s1 .box-1:nth-of-type(10n-4) .box-1-cont { background-image: url("../images/other/bg-6.jpg"); } .bank-s1 .box-1:nth-of-type(10n-3) .box-1-cont { background-image: url("../images/other/bg-7.jpg"); } .bank-s1 .box-1:nth-of-type(10n-2) .box-1-cont { background-image: url("../images/other/bg-8.jpg"); } .bank-s1 .box-1:nth-of-type(10n-1) .box-1-cont { background-image: url("../images/other/bg-9.jpg"); } .bank-s1 .box-1:nth-of-type(10n) .box-1-cont { background-image: url("../images/other/bg-10.jpg"); } .bank-s1 .tit { font-size: 32px; color: #333; padding-bottom: 2vw; border-bottom: 1px solid #e6e6e6; font-weight: bold; position: relative; } .bank-s1 .tit:before { content: ''; width: 4px; height: 32px; background-image: linear-gradient(0deg, #5051f3, #c9449a); display: inline-block; vertical-align: middle; margin: -2px 2vw 0 0; } .bank-s1 .tit a:after { content: ''; width: 22px; height: 22px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/other/icon-1.png"); display: inline-block; vertical-align: middle; margin: -2px 0 0 2vw; } .bank-s1 .box-1-cont { border: 1px solid #e6e6e6; border-top: none; padding: 2vw; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; } .bank-s1 .tab-tit { border-bottom: 1px solid #e6e6e6; } .bank-s1 .tab-tit span { position: relative; display: inline-block; vertical-align: top; font-size: 18px; line-height: 30px; color: #808080; padding-bottom: 15px; margin-right: 5vw; cursor: pointer; transition: all .3s ease; } .bank-s1 .tab-tit span:after { content: ''; width: 100%; height: 4px; background-image: linear-gradient(90deg, #5051f3, #c9449a); position: absolute; bottom: -1px; left: 0; transition: all .3s ease; transform: scaleX(0); } .bank-s1 .tab-tit span:hover { color: #29489a; } .bank-s1 .tab-tit span.active { font-size: 24px; color: #29489a; } .bank-s1 .tab-tit span.active:after { transform: scaleX(1); } .bank-s1 .tab-cont { margin-top: 2vw; } .bank-s1 .tab-cont .child { display: none; } .bank-s1 .tab-cont .child.active { display: block; } .bank-s1 .box-3-2 { margin-top: 3.125vw; } .bank-s1 .box-3-2 .s-tit { border-bottom: 1px solid #e6e6e6; font-size: 18px; color: #808080; padding: 0 2vw 15px; margin-bottom: 2vw; } @media screen and (max-width: 1600px) { .index-s1 .item-1 h3 { font-size: 40px; } .index-s1 .item-1 p { font-size: 18px; } .index-s1 .item-1 a { width: 160px; line-height: 50px; font-size: 16px; } .index-tit h3 { font-size: 26px; } .index-tit p { font-size: 16px; margin-top: 10px; } .index-tit:after { margin-top: 20px; } .index-s2 .left-box .item span { font-size: 40px; } .index-s2 .left-box .item i { font-size: 26px; } .index-s2 .left-box .item h3 { font-size: 18px; margin: 10px 0; } .index-s2 .right-box .tip { font-size: 15px; } .index-s2 .right-box .tip span { font-size: 30px; } .index-s2 .right-box .dot .hide h3 { font-size: 18px; } .index-s2 .right-box .dot .hide .tel { font-size: 14px; } .index-s3 .item h3 { font-size: 20px; } .index-s3 .item p { font-size: 15px; } .index-s4 .tab-tit .item { font-size: 16px; line-height: 50px; } .index-s5 .bot-block .item .show { font-size: 20px; } .index-s5 .bot-block .item h3 { font-size: 20px; } .index-s5 .bot-block .item p { font-size: 15px; } .index-s6 .tab-tit .item { width: 160px; } .index-s6 .s-child h3 { font-size: 20px; } .index-s6 .s-child p { font-size: 15px; } .index-s5 a.more, .index-s7 a.more { width: 160px; top: 40px; } .index-s7 .item .date, .index-s7 .left-box .date { font-size: 16px; } .index-s7 .item h3, .index-s7 .left-box h3 { font-size: 18px; line-height: 26px; } .index-s7 .item h3 { height: 78px; } .index-s7 .left-box p { font-size: 15px; } .index-s8 .item h3 { font-size: 20px; } .index-s8 .item p { font-size: 15px; } .c-pd { padding-top: 80px; } .c-banner h4 { font-size: 20px; } .c-banner h3 { font-size: 50px; } .inner-tit h3 { font-size: 30px; } .inner-tit:after { width: 50px; } .solution-s1 .txt-box h3 { font-size: 20px; line-height: 24px; } .solution-s1 .txt-box .para { height: calc(100% - 24px); padding-top: 15px; } .solution-s1 .txt-box .scroll { font-size: 15px; } .solution-s2 .item h3, .solution-s5 .item h3, .solution-s4 .item h3, .solution-s6 .item h3, .solution-s7 .item h3, .solution-s8 .item .txt h3 { font-size: 20px; } .solution-s2 .item p, .solution-s5 .item p, .solution-s4 .item p, .solution-s6 .item p, .solution-s7 .item p, .solution-s8 .item .txt p { font-size: 15px; } .solution-s4 .item p { line-height: 30px; height: 60px; } .solution-s7 .item h3 { margin-bottom: 15px; } .solution-s8 .item .txt h3, .solution-s8 .item .txt p { margin-top: 15px; } .c-section-1 h3 { font-size: 36px; } .c-section-1 a { width: 200px; font-size: 18px; line-height: 50px; } .solution-new-s1 h3 { font-size: 50px; } .solution-new-s1 p { font-size: 18px; } .solution-new-s1 .tip span { font-size: 15px; padding: 10px 20px; } .solution-new-s2 .item h3 { font-size: 20px; } .solution-new-s2 .item .para { font-size: 15px; line-height: 28px; max-height: calc(28px * 8); } .c-banner p { font-size: 17px; } .about-contact-s1 .para { font-size: 15px; } .about-contact-s2 .item .img-box span { font-size: 40px; } .about-contact-s2 .item h3 { font-size: 20px; } .about-contact-s2 .item p { font-size: 15px; } .about-contact-s3 .item h3 { font-size: 20px; } .about-contact-s3 .item h3:after { margin: 15px 0; } .about-contact-s3 .item p { font-size: 15px; } .about-culture-s1 .item h3 { font-size: 20px; } .about-culture-s1 .item p { font-size: 17px; } .about-culture-s2 .para { font-size: 15px; } .about-culture-s3 .item h3 { font-size: 18px; line-height: 26px; height: 53px; } .about-culture-s3 .item p { margin: 15px 0; } .about-culture-s3 .item .date { font-size: 17px; } .about-culture-s4 .txt-box .para, .about-culture-s4 .tip-box .para { font-size: 15px; } .about-culture-s4 .tip-box h3 { font-size: 20px; } .about-culture-s4 .tip-box .para { margin-top: 15px; } .about-duty-s1 .logo img { height: 64px; } .about-duty-s1 .logo:after { width: 50px; } .about-duty-s1 .para { font-size: 15px; } .about-duty-s2 .s-items .item h3 { font-size: 20px; } .about-duty-s2 .s-items .item p { font-size: 15px; margin-top: 15px; } .about-duty-s3 .item h3 { font-size: 18px; } .about-duty-s3 .item .date { font-size: 17px; } .investor-index-s5 .para { font-size: 15px; } .join-campus a.campus-more, .investor-index a.inverstor-more, .about-duty a.duty-more, .about-index a.about-more { width: 160px; } .about-history-s1 .tip { font-size: 20px; } .inner-tit h4 { font-size: 20px; } .inner-tit h4 span { font-size: 30px; } .about-history-s1 .item .box .year { font-size: 50px; width: 160px; } .about-history-s1 .item .box .para { font-size: 15px; width: calc(100% - 160px); } .about-history-s1 .line-box .line { font-size: 14px; line-height: 34px; padding-right: 40px; } .about-history-s1 .line-box .line.active { font-size: 20px; padding-right: 60px; } .about-honor-s1 .item h3 { font-size: 17px; } .about-honor-s2 .tab-cont .txt-box .year { font-size: 100px; } .about-honor-s2 .tab-cont .txt-box .para { font-size: 17px; max-height: 170px; } .about-honor-s2 .tab-tit { background-size: 100% 3px; background-position: center 15px; } .about-honor-s2 .tab-tit .item .year { font-size: 20px; } .about-honor-s2 .tab-tit .item.active .year { font-size: 40px; } .about-honor-s2 .tab-tit .item { margin-left: 6vw; padding-bottom: 50px; } .about-honor-s2 .tab-tit .item:last-of-type { margin-right: 6vw; } .about-honor-s2 .tab-tit .item:before { width: 12vw; height: 3px; top: 15px; } .about-honor-s2 .tab-tit .item:after { width: 34px; height: 34px; } .about-index-s1 .right-box .top-tip h3 { font-size: 24px; line-height: 36px; } .about-index-s1 .left-box .tip span { font-size: 32px; } .about-index-s1 .left-box .tip p { font-size: 15px; } .about-index-s1 .left-box .para { font-size: 15px; } .about-index-s1 .right-box .bot-tip p { font-size: 15px; } .about-index-s2 .top-box .para { font-size: 15px; } .about-index-s2 .tab-tit .item:before { width: 32px; height: 32px; } .about-index-s2 .tab-tit { background-position: center 15px; } .about-index-s2 .tab-tit .item .year { font-size: 18px; } .about-index-s2 .bot-box .box span { font-size: 22px; } .about-index-s2 .bot-box .box .para { font-size: 15px; } .about-index-s4 .item h3 { font-size: 20px; } .about-index-s4 .item .num { font-size: 30px; } .about-index-s4 .item .num span { font-size: 60px; } .about-index-s4 .item p { font-size: 15px; } .about-index-s5 .item h3 { font-size: 20px; } .about-index-s5 .item p { font-size: 15px; } .about-index-s6 .item h3 { font-size: 20px; } .about-index-s6 .item h4 { font-size: 13px; } .about-index-s7 .para { font-size: 15px; } .about-index-s7 .tab-cont h3 { font-size: 20px; } .about-index-s7 .tab-cont p { font-size: 15px; } .about-index-s8 .left-box h3 { font-size: 20px; } .about-index-s8 .left-box .para { font-size: 15px; } .about-intro-s1 .para { font-size: 17px; } .about-intro-s1 .video-box .video-btn i { width: 70px; height: 70px; } .about-intro-s2 h3 { font-size: 26px; } .about-intro-s2 .para { font-size: 17px; } .about-intro-s3 .para { font-size: 17px; } .about-intro-s4 .item h3 { font-size: 17px; } .about-intro-s4 .item span { font-size: 50px; } .about-intro-s4 .item i { font-size: 40px; } .about-partner-s1 h3 { font-size: 20px; } .about-partner-s1 p { font-size: 15px; } .about-partner-s2 .tab-cont .txt-box p { font-size: 15px; } .about-partner-s2 .tab-cont .txt-box h3 { font-size: 20px; } .about-partner-s3 .txt-box h3 { font-size: 20px; } .about-partner-s3 .txt-box h4 { font-size: 13px; } .about-team-s1 .item .txt-box h3 { font-size: 26px; } .about-team-s1 .item .txt-box h4 { font-size: 15px; } .about-team-s1 .item .txt-box .para { font-size: 15px; max-height: calc(180px + 1.5vw); } .investor-governance-s1 .head-box span { font-size: 20px; } .investor-governance-s1 .item span { font-size: 18px; } .investor-governance-s2 .top-block span { font-size: 20px; } .investor-governance-s2 .top-block span.active { font-size: 28px; } .investor-governance-s2 .bot-block .box h4 { font-size: 15px; } .investor-governance-s2 .bot-block .box h3 { font-size: 20px; } .investor-governance-s3 .txt-box h4 { font-size: 20px; } .investor-governance-s3 .txt-box h3 { font-size: 40px; } .investor-governance-s3 .txt-box .tip { font-size: 13px; } .investor-index-s1 .txt-box a { font-size: 17px; } .investor-index-s1 .txt-box a span { font-size: 20px; } .investor-index-s2 .item span { font-size: 50px; } .investor-index-s2 .item h3 { font-size: 20px; } .investor-index-s2 .item p { font-size: 15px; } .investor-index-s2 .item:after { width: 30px; height: 30px; } .investor-index-s3 .tab-tit .item h3 { font-size: 20px; } .investor-index-s3 .tab-tit .item h4 { font-size: 13px; } .investor-index-s3 .tab-tit { width: 140px; } .investor-index-s3 .tab-cont { width: calc(100% - 140px); } .investor-index-s3 .child .item .year { font-size: 40px; } .investor-index-s3 .child .item h3 { font-size: 20px; } .investor-index-s3 .child .item a { width: 160px; } .investor-index-s3 .child a.more { font-size: 15px; } .investor-index-s4 .left-box h3 { font-size: 20px; } .investor-index-s4 .left-box .num { font-size: 50px; } .investor-index-s4 .left-box .para { font-size: 15px; } .investor-index-s4 .right-box .item h3 { font-size: 15px; } .investor-index-s4 .right-box .item .num { font-size: 40px; } .investor-notice-s1 .top-block .box { height: 50px; } .investor-notice-s1 .top-block button { width: 160px; height: 50px; font-size: 18px; right: -190px; } .investor-notice-s1 .top-block input { font-size: 15px; } .investor-notice-s1 .top-block .form { width: calc(50% - 190px); margin-right: 190px; } .investor-notice-s1 .bot-block .b-date { font-size: 20px; } .investor-notice-s1 .bot-block .item .date i { font-size: 50px; margin-top: -10px; } .investor-notice-s1 .bot-block .item .date span { font-size: 18px; } .investor-notice-s1 .bot-block .item .box h3 { font-size: 20px; } .investor-notice-s1 .bot-block .item .box:after { width: 48px; height: 48px; } .investor-report-s1 .items .year { font-size: 60px; } .investor-report-s1 .items .list h3 { font-size: 20px; margin-right: 360px; } .investor-report-s1 .items .list a { width: 160px; } .investor-service-s1 .item span { width: 40px; height: 40px; } .investor-service-s1 .item h3 { font-size: 20px; } .investor-service-s1 .item p { font-size: 15px; margin-top: 15px; } .join-campus-s1 .item h3 { font-size: 20px; } .join-campus-s2 .item h3, .join-campus-s3 .item h3 { font-size: 17px; line-height: 28px; height: 56px; } .join-campus-s4 .item h3 { font-size: 20px; } .join-campus-s4 .item p { font-size: 15px; } .join-campus-s5 .item h3 { font-size: 20px; } .join-campus-s5 .item p { font-size: 15px; } .campus-pop .top-block h3 { font-size: 40px; } .campus-pop .top-block .info span { font-size: 15px; } .campus-pop .bot-block .box h4 { font-size: 20px; } .campus-pop .bot-block .box .para { font-size: 15px; line-height: 28px; } .campus-pop .bot-block a { font-size: 17px; line-height: 50px; margin-top: 5vh; } .campus-pop .bot-block { padding: 5vh 6.25vw; } .campus-pop .top-block { padding: 8vh 6.25vw 3vh; } .c-banner .item { height: calc(100vh - 140px); } .join-index-s1 .para { font-size: 15px; } .join-index-s2 .item h3 { font-size: 20px; } .join-index-s2 .item span { font-size: 15px; line-height: 3; } .join-index-s4 .item h3 { font-size: 20px; } .join-index-s5 .img-box { max-width: 240px; } .join-index-s5 p { font-size: 15px; } .join-social-s1 .top-block .box { height: 70px; } .join-social-s1 .top-block input { font-size: 15px; } .join-social-s1 .top-block button { width: 160px; height: 62px; font-size: 20px; } .join-social-s1 .head-box span { font-size: 24px; } .join-social-s1 .item .show span { font-size: 20px; } .join-social-s1 .item .hide h3 { font-size: 20px; } .join-social-s1 .item .hide .para { font-size: 15px; } .comm-share { width: 80px; } .news-detail-s1 .top-block h3 { font-size: 40px; } .news-detail-s1 .top-block .date { font-size: 20px; } .news-detail-s1 a.back { width: 90px; height: 90px; } .news-detail-s1 a.back span:before { margin: 0 auto 5px; } .news-detail-s1 .bot-block a { font-size: 15px; } .c-banner form { height: 50px; } .c-banner button { width: 50px; height: 50px; } .news-list-s1 .item h3 { font-size: 20px; } .news-list-s1 .item p { font-size: 15px; } .news-list-s1 .item span { font-size: 18px; } .news-list-s2 .item h3 { font-size: 20px; } .news-list-s2 .item span { font-size: 18px; } .copyright-s1 .left-box h3 { font-size: 20px; } .copyright-s1 .left-box .para, .copyright-s1 .right-box .para, .disclaimer-s1 .right-box .para { font-size: 17px; } .disclaimer-s1 .left-box span { font-size: 15px; } .c-banner .tip a { font-size: 17px; } .search-s2 .tip { font-size: 17px; } .search-s2 .item h3 { font-size: 18px; } .search-s2 .item span { font-size: 15px; } .sitemap-s1 .left-box span, .bank-s1 .left-box span { font-size: 15px; } .sitemap-s1 .box-1 .tit, .bank-s1 .tit { font-size: 26px; } .sitemap-s1 .box-2-1 h3, .sitemap-s1 .box-2-2 a { font-size: 19px; } .sitemap-s1 .box-3-2 h4, .sitemap-s1 .box-3-1 a { font-size: 17px; } .sitemap-s1 .box-4-1 a, .sitemap-s1 .box-4-2 h5 { font-size: 15px; } .sitemap-s1 .box-5-1 a, .sitemap-s1 .box-5-2 h6, .sitemap-s1 .box-6-1 a { font-size: 13px; } .bank-s1 .tab-tit span { font-size: 16px; } .bank-s1 .tab-tit span.active { font-size: 20px; } .bank-s1 .tab-tit span:after { height: 3px; } .bank-s1 .box-3-2 .s-tit { font-size: 16px; } .bank-s1 .item h3 { font-size: 16px; } .bank-s1 .item p { font-size: 13px; line-height: 20px; } } @media screen and (max-width: 1366px) { .wrapper { width: 80%; } .index-s1 .item-1 h3 { font-size: 34px; } .index-s1 .item-1 p { font-size: 16px; } .index-s1 .item-1 a { width: 120px; line-height: 44px; font-size: 15px; } .index-s1 .item-1 .ani-box { width: 50vw; height: 50vw; margin-top: -24vw; } .index-s1 .item-1 .ani-box .circle-1, .index-s1 .item-1 .ani-box .circle-2 { width: 48vw; } .index-s1 .item-1 .ani-box .circle-3 { width: 34vw; } .index-tit h3 { font-size: 24px; } .index-tit p { font-size: 15px; line-height: 24px; } .index-tit::after { margin-top: 15px; width: 50px; height: 3px; } .index-s2 .left-box .item span { font-size: 30px; } .index-s2 .left-box .item i { font-size: 20px; } .index-s2 .left-box .item h3 { font-size: 16px; } .index-s2 .right-box { transform: translate(6vw, 6vw); } .index-s2 .right-box .tip { font-size: 14px; } .index-s2 .right-box .tip span { font-size: 24px; } .index-s2 .right-box .dot .hide .box { width: 260px; padding: 24px; } .index-s2 .right-box .dot .hide h3 { font-size: 16px; } .index-s2 .right-box .dot .hide p { font-size: 12px; } .index-s2 .right-box .dot .hide .tel { font-size: 12px; } .index-s3 .item::before { height: 8vw; } .index-s3 .item h3 { font-size: 18px; } .index-s3 .item p { font-size: 14px; } .index-s4 .tab-tit .item { font-size: 15px; line-height: 48px; } .index-s4 .tab-tit .item span { font-size: 16px; } .index-s4 .tab-tit { margin-top: 3vw; } .index-s5 .bot-block .item .show { font-size: 18px; } .index-s5 .bot-block .item h3 { font-size: 18px; } .index-s5 .bot-block .item h3::after { width: 50px; height: 3px; } .index-s5 .bot-block .item p { font-size: 14px; } .index-s6 .tab-tit .item, .index-s5 a.more, .index-s7 a.more { width: 120px; line-height: 40px; font-size: 15px; } .index-s6 .s-child h3 { font-size: 18px; } .index-s6 .s-child p { font-size: 14px; } .index-s7 .item .date, .index-s7 .left-box .date { font-size: 15px; } .index-s7 .item h3, .index-s7 .left-box h3 { font-size: 16px; } .index-s7 .left-box p { font-size: 14px; } .index-s8 .item h3 { font-size: 18px; } .index-s8 .item p { font-size: 14px; } .c-nav a.link { line-height: 50px; } .c-banner h4 { font-size: 18px; } .c-banner h3 { font-size: 40px; } .c-banner img { max-height: 400px; object-fit: cover; } .inner-tit h3 { font-size: 26px; } .inner-tit::after { width: 40px; height: 3px; margin-top: 15px; } .solution-s1 .txt-box h3 { font-size: 18px; } .solution-s1 .txt-box .para { padding-top: 10px; } .solution-s1 .txt-box .scroll { font-size: 14px; line-height: 24px; } .solution-s2 .item h3, .solution-s5 .item h3, .solution-s4 .item h3, .solution-s6 .item h3, .solution-s7 .item h3, .solution-s8 .item .txt h3 { font-size: 18px; } .solution-s2 .item p, .solution-s5 .item p, .solution-s4 .item p, .solution-s6 .item p, .solution-s7 .item p, .solution-s8 .item .txt p { font-size: 14px; line-height: 24px; } .solution-s7 .item h3 { margin-bottom: 10px; } .solution-s8 .item .txt h3, .solution-s8 .item .txt p { margin-top: 10px; } .solution-s4 .item p { height: 48px; } .c-section-1 h3 { font-size: 30px; } .c-section-1 a { width: 160px; font-size: 16px; line-height: 44px; } .solution-new-s1 h3 { font-size: 40px; } .solution-new-s1 p { font-size: 16px; } .solution-new-s1 .tip span { font-size: 14px; } .solution-new-s2 .item h3 { font-size: 18px; } .solution-new-s2 .item .para { font-size: 14px; line-height: 24px; max-height: calc(24px * 8); } .about-contact-s1 .para { font-size: 14px; line-height: 24px; } .about-contact-s1 .ewm img { max-width: 100px; } .about-contact-s2 .item .img-box span { font-size: 32px; } .about-contact-s2 .item h3 { font-size: 18px; } .about-contact-s2 .item p { font-size: 14px; line-height: 24px; } .about-contact-s3 .item h3 { font-size: 18px; } .about-contact-s3 .item h3:after { margin: 10px 0; height: 3px; } .about-contact-s3 .item p { font-size: 14px; } .about-culture-s1 .item .txt-box:after { height: 3px; } .about-culture-s1 .item h3 { font-size: 18px; } .about-culture-s1 .item p { font-size: 16px; } .about-culture-s2 .para { font-size: 14px; } .about-culture-s3 .item h3 { font-size: 16px; line-height: 24px; height: 48px; } .about-culture-s3 .item p { margin: 10px 0; } .about-culture-s3 .item .date { font-size: 16px; } .about-culture-s4 .tip-box h3 { font-size: 18px; } .about-culture-s4 .txt-box .para, .about-culture-s4 .tip-box .para { font-size: 14px; line-height: 24px; } .about-culture-s4 .tip-box .para { margin-top: 10px; } .about-duty-s1 .logo img { height: 50px; } .about-duty-s1 .logo:after { width: 40px; height: 3px; } .about-duty-s1 .para { font-size: 14px; } .about-duty-s2 .s-items .item h3 { font-size: 18px; } .about-duty-s2 .s-items .item p { font-size: 14px; line-height: 24px; margin-top: 10px; } .about-duty-s2:before { width: 140px; } .about-duty-s2 .s-items .item { min-height: 20vw; } .about-duty-s3 .item h3 { font-size: 16px; } .about-duty-s3 .item .date { font-size: 16px; } .investor-index-s5 .para { font-size: 14px; line-height: 24px; } .join-campus a.campus-more, .investor-index a.inverstor-more, .about-duty a.duty-more, .about-index a.about-more { width: 120px; line-height: 40px; font-size: 15px; } .about-history-s1 .tip { font-size: 18px; } .inner-tit h4 { font-size: 18px; } .inner-tit h4 span { font-size: 24px; } .about-history-s1 .item .box .year { font-size: 40px; width: 140px; } .about-history-s1 .item .box .para { font-size: 14px; line-height: 24px; width: calc(100% - 140px); } .about-history-s1 .item .box .para p:before { top: 10px; } .about-history-s1 .line-box .line { font-size: 14px; padding-right: 20px; } .about-history-s1 .line-box .line.active { font-size: 18px; padding-right: 40px; } .about-history-s1 .line-box .line:after { width: 10px; } .about-history-s1 .line-box .line.active:after { width: 30px; } .about-honor-s1 .item h3 { font-size: 16px; } .about-honor-s2 .tab-cont .txt-box .year { font-size: 70px; } .about-honor-s2 .tab-cont .txt-box .para { font-size: 16px; } .about-honor-s2 .tab-tit .item .year { font-size: 18px; } .about-honor-s2 .tab-tit .item.active .year { font-size: 36px; } .about-honor-s2 .tab-tit .item:after { width: 30px; height: 30px; } .about-index-s1 .right-box .top-tip h3 { font-size: 20px; line-height: 30px; } .about-index-s1 .left-box .tip span { font-size: 24px; } .about-index-s1 .left-box .tip p { font-size: 14px; } .about-index-s1 .left-box .para { font-size: 14px; line-height: 24px; } .about-index-s2 .top-box .para { font-size: 14px; line-height: 24px; } .about-index-s2 .tab-tit .item:before { width: 28px; height: 28px; } .about-index-s2 .tab-tit .item .year { font-size: 16px; } .about-index-s2 .tab-tit .item .year span { font-size: 20px; } .about-index-s2 .bot-box .box span { font-size: 20px; } .about-index-s2 .bot-box .box .para { font-size: 14px; line-height: 24px; } .about-index-s4 .item .num span { font-size: 50px; } .about-index-s4 .item h3 { font-size: 18px; } .about-index-s4 .item p { font-size: 14px; } .about-index-s5 .item h3 { font-size: 18px; } .about-index-s5 .item p { font-size: 14px; } .about-index-s6 .item h3 { font-size: 18px; } .about-index-s6 .item h4 { font-size: 12px; } .about-index-s7 .para { font-size: 14px; line-height: 24px; } .about-index-s7 .tab-cont h3 { font-size: 18px; } .about-index-s7 .tab-cont p { font-size: 14px; line-height: 24px; } .about-index-s8 .left-box h3 { font-size: 18px; } .about-index-s8 .left-box .para { font-size: 14px; line-height: 24px; } .about-index-s8 a.about-more { width: 160px; } .c-banner p { font-size: 16px; } .about-intro-s1 .para { font-size: 16px; } .about-intro-s2 h3 { font-size: 22px; } .about-intro-s2 .para { font-size: 16px; } .about-intro-s3 .para { font-size: 16px; } .about-intro-s4 .item .icon:before { width: 58px; height: 58px; } .about-intro-s4 .item h3 { font-size: 16px; } .about-intro-s4 .item span { font-size: 40px; } .about-partner-s1 h3 { font-size: 18px; } .about-partner-s1 p { font-size: 14px; line-height: 24px; } .about-partner-s2 .tab-cont .txt-box p { font-size: 14px; line-height: 24px; } .about-partner-s2 .tab-cont .txt-box h3 { font-size: 18px; } .about-partner-s3 .txt-box h3 { font-size: 18px; } .about-partner-s3 .txt-box h4 { font-size: 12px; } .about-team-s1 .item .txt-box h3 { font-size: 22px; } .about-team-s1 .item .txt-box h4 { font-size: 14px; } .about-team-s1 .item .txt-box .para { font-size: 14px; line-height: 24px; max-height: calc(192px + 1.5vw); } .investor-governance-s1 .head-box span { font-size: 18px; } .investor-governance-s1 .item span { font-size: 16px; } .investor-governance-s2 .top-block span { font-size: 18px; padding-bottom: 10px; } .investor-governance-s2 .top-block span.active { font-size: 24px; } .investor-governance-s2 .bot-block .box { padding: 3vw 20px; } .investor-governance-s2 .bot-block .box h4 { font-size: 14px; } .investor-governance-s2 .bot-block .box h3 { font-size: 18px; } .investor-governance-s3 .txt-box h4 { font-size: 18px; } .investor-governance-s3 .txt-box h3 { font-size: 32px; } .investor-governance-s3 .txt-box .tip { font-size: 12px; } .investor-index-s1 .txt-box a { font-size: 16px; } .investor-index-s1 .txt-box a span { font-size: 18px; } .investor-index-s2 .item span { font-size: 40px; } .investor-index-s2 .item h3 { font-size: 18px; } .investor-index-s2 .item p { font-size: 14px; } .investor-index-s2 .item:after { width: 24px; height: 24px; } .investor-index-s3 .tab-tit .item h3 { font-size: 18px; } .investor-index-s3 .tab-tit .item h4 { font-size: 12px; } .investor-index-s3 .child .item .year { font-size: 34px; } .investor-index-s3 .child .item h3 { font-size: 18px; } .investor-index-s3 .child .item a, .investor-report-s1 .items .list a { width: 120px; line-height: 40px; font-size: 15px; } .investor-index-s3 .child a.more { font-size: 14px; } .investor-index-s4 .left-box h3 { font-size: 18px; } .investor-index-s4 .left-box .num { font-size: 40px; } .investor-index-s4 .left-box .para { font-size: 14px; line-height: 24px; } .investor-index-s4 .right-box .item h3 { font-size: 14px; } .investor-index-s4 .right-box .item .num { font-size: 34px; } .investor-notice-s1 .top-block button { width: 120px; font-size: 16px; right: -150px; } .investor-notice-s1 .top-block .form { width: calc(50% - 150px); margin-right: 150px; } .investor-notice-s1 .bot-block .item .date i { font-size: 40px; } .investor-notice-s1 .bot-block .b-date { font-size: 18px; } .investor-notice-s1 .bot-block .item .box h3 { font-size: 18px; } .investor-notice-s1 .bot-block .item .box:after { width: 40px; height: 40px; } .investor-report-s1 .items .year { font-size: 50px; } .investor-report-s1 .items .list h3 { font-size: 18px; margin-right: 280px; } .investor-service-s1 .item span { width: 36px; height: 36px; } .investor-service-s1 .item h3 { font-size: 18px; } .investor-service-s1 .item p { font-size: 14px; margin-top: 10px; } .join-campus-s1 .item h3 { font-size: 18px; } .join-campus-s2 .item h3, .join-campus-s3 .item h3 { font-size: 16px; line-height: 24px; height: 48px; } .join-campus-s4 .item h3 { font-size: 18px; } .join-campus-s4 .item p { font-size: 14px; line-height: 24px; } .join-campus-s5 .item h3 { font-size: 18px; } .join-campus-s5 .item p { font-size: 14px; line-height: 24px; } .campus-pop .top-block h3 { font-size: 30px; } .campus-pop .top-block .info span { font-size: 14px; } .campus-pop .bot-block .box h4 { font-size: 18px; } .campus-pop .bot-block .box .para { font-size: 14px; line-height: 24px; } .campus-pop .bot-block a { font-size: 16px; } .c-banner .item { height: calc(100vh - 130px); } .join-index .c-banner img { max-height: 100%; } .join-index-s1 .para { font-size: 14px; line-height: 24px; } .join-index-s2 .item h3 { font-size: 18px; } .join-index-s2 .item span { font-size: 14px; } .join-index-s4 .item h3 { font-size: 18px; } .join-index-s4 .item span { font-size: 14px; } .join-index-s5 .img-box { max-width: 200px; } .join-index-s5 p { font-size: 14px; } .join-social-s1 .top-block .box { height: 60px; } .join-social-s1 .top-block input { font-size: 14px; } .join-social-s1 .top-block button { width: 120px; height: 52px; font-size: 18px; } .join-social-s1 .head-box span { font-size: 20px; } .join-social-s1 .item .show span { font-size: 16px; } .join-social-s1 .item .hide h3 { font-size: 18px; } .join-social-s1 .item .hide .para { font-size: 14px; line-height: 24px; } .news-detail-s1 .top-block h3 { font-size: 30px; } .news-detail-s1 .top-block .date { font-size: 18px; } .news-detail-s1 .bot-block a { font-size: 14px; } .news-list-s1 .item h3 { font-size: 18px; } .news-list-s1 .item p { font-size: 14px; line-height: 24px; } .news-list-s1 .item span { font-size: 16px; } .news-list-s2 .item h3 { font-size: 18px; line-height: 26px; height: 52px; } .news-list-s2 .item span { font-size: 16px; } .copyright-s1 .left-box h3 { font-size: 18px; } .copyright-s1 .left-box .para, .copyright-s1 .right-box .para, .disclaimer-s1 .right-box .para { font-size: 16px; } .disclaimer-s1 .left-box span { font-size: 14px; } .c-banner .tip a { font-size: 16px; line-height: 20px; } .c-banner .tip a:before { width: 20px; height: 20px; } .c-banner .tip a:after { width: 12px; height: 12px; } .search-s2 .tip { font-size: 16px; } .search-s2 .item span { font-size: 14px; } .sitemap-s1 .left-box span, .bank-s1 .left-box span { font-size: 14px; } .sitemap-s1 .box-1 .tit, .bank-s1 .tit { font-size: 22px; } .sitemap-s1 .box-2-1 h3, .sitemap-s1 .box-2-2 a { font-size: 18px; } .sitemap-s1 .box-3-2 h4, .sitemap-s1 .box-3-1 a { font-size: 16px; } .sitemap-s1 .box-4-1 a, .sitemap-s1 .box-4-2 h5 { font-size: 14px; } .sitemap-s1 .box-5-1 a, .sitemap-s1 .box-5-2 h6, .sitemap-s1 .box-6-1 a { font-size: 12px; } .bank-s1 .tab-tit span { font-size: 15px; line-height: 24px; padding-bottom: 10px; } .bank-s1 .tab-tit span.active { font-size: 18px; } .bank-s1 .box-3-2 .s-tit { font-size: 15px; } .bank-s1 .item h3 { font-size: 15px; } .bank-s1 .item p { font-size: 12px; } } /*# sourceMappingURL=bundle.css.map */