@charset "utf-8"; @font-face { font-family: 'Gilroy'; src: url('../font/Gilroy-Regular.woff2') format('woff2'), url('../font/Gilroy-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'GilroyB'; src: url('../font/Gilroy-Bold.woff2') format('woff2'), url('../font/Gilroy-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'GilroyM'; src: url('../font/Gilroy-Medium.woff2') format('woff2'), url('../font/Gilroy-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } .main-center { width: 75vw; margin: 0 auto; } .c1 { width: 78.1vw; margin: 0 auto; } .c2 { width: 80.2%; margin: 0 auto; } .pl10 { padding-left: 10.95vw; } .pr10 { padding-right: 10.95vw; } .pt120 { padding-top: 120px; } .pb120 { padding-bottom: 120px; } .pb149 { padding-bottom: 149px; } .fx { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .as { -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; } .ac { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .ae { -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; } .jsb { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } .jsa { -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; } .fc { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .jcc { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; } .fw { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .tar { text-align: right; } .tac { text-align: center; } img { width: 100%; display: block; } .transition { transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .lt50 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .l50 { position: absolute; left: 50%; transform: translateX(-50%); } .t50 { position: absolute; top: 50%; transform: translateY(-50%); } .fs120 { font-size: 120px; } .fs100 { font-size: 100px; } .fs50 { font-size: 50px; } .fs45 { font-size: 45px; } .fs40 { font-size: 40px; } .fs36 { font-size: 36px; } .fs32 { font-size: 32px; } .fs30 { font-size: 30px; } .fs28 { font-size: 28px; } .fs24 { font-size: 24px; } .fs20 { font-size: 20px; } .fs18 { font-size: 18px; } .fs16 { font-size: 16px; } .fs15 { font-size: 15px; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .head-pc { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 80px; background-color: #fff; transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); z-index: 999; } .head-pc .li-1 { position: relative; height: 80px; } .head-pc .li-1:not(:last-of-type) { margin-right: 22px; } .head-pc .li-1 > a { position: relative; display: inline-block; height: 80px; padding: 0 29px; line-height: 80px; font-size: 16px; color: #666666; font-weight: bold; overflow: hidden; } .head-pc .li-1 > a::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background-color: #0058A5; transition: 0.3s; -webkit-transition: 0.3s; z-index: -1; } .head-pc .li-1 > a.active { color: #fff; } .head-pc .li-1 > a.active::after { top: 0; } .head-pc .li-1:hover > a { color: #fff; } .head-pc .li-1:hover > a::after { top: 0; } .head-pc .subNav { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding: 17px 0 14px; min-width: 130px; width: 100%; box-sizing: border-box; background-color: #fff; box-shadow: 0.99px 0.99px 6.9px hsla(0, 0%, 53.3%, 0.12941176); text-align: center; display: none; } .head-pc .subNav a { position: relative; padding: 12px 0; font-size: 16px; display: block; overflow: hidden; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .head-pc .subNav a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background-color: #0058A5; transition: 0.3s; -webkit-transition: 0.3s; z-index: -1; } .head-pc .subNav a:hover { color: #fff; } .head-pc .subNav a:hover::before { top: 0; height: 100%; } .head-pc .tel { position: relative; padding-right: 30px; margin-right: 30px; margin-left: 77px; } .head-pc .tel::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 19px; background-color: #999999; } .head-pc .tel span { font-family: 'GilroyM'; color: #0058A5; } .head-pc .tel i { font-size: 21px; color: #0058A5; margin-left: 31px; } .head-pc .wechat { position: relative; } .head-pc .wechat i { display: inline-block; height: 80px; line-height: 80px; font-size: 25px; color: #999999; } .head-pc .wechat .img { position: absolute; top: 150%; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background-color: #fff; opacity: 0; visibility: hidden; transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .head-pc .wechat .img::before { content: ''; position: absolute; left: 50%; top: -16px; width: 0; height: 0; border-width: 8px 5px; border-color: transparent transparent #fff transparent; border-style: solid; } .head-pc .wechat:hover .img { top: 120%; opacity: 1; visibility: visible; } .head-pc.on { box-shadow: 0.99px 0.99px 6.9px hsla(0, 0%, 53.3%, 0.12941176); } #mb-header { display: none; } #mb-header #navbar-main { position: fixed; top: 0; left: 0; width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; background-color: #fff; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); z-index: 999; padding: 0 2.5%; box-sizing: border-box; } #mb-header #navbar-main #logo { display: block; height: 80%; } #mb-header #navbar-main #logo img { width: auto; height: 100%; max-width: none; } #mb-header #navbar-main #sidebar-main-trigger { width: 30px; height: 30px; } #mb-header #navbar-main #sidebar-main-trigger img { width: 100%; } #mb-header #sidebar-main { position: fixed; right: -100%; top: 50px; bottom: 0px; width: 100%; background-color: #fff; transition: right 0.3s ease; z-index: 3000; } #mb-header #sidebar-main li:last-of-type a { border-bottom: none; } #mb-header #sidebar-main a { position: relative; display: block; padding: 16px 5%; } #mb-header #sidebar-main a::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 90%; height: 1px; background-color: #F0F0F0; } #mb-header #sidebar-main-trigger { position: absolute; right: 2.5%; top: 50%; transform: translateY(-50%); width: 30px; background-clip: content-box; cursor: pointer; } #mb-header #sidebar-main-trigger p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 2px; background: #333; margin: auto; position: relative; vertical-align: middle; -webkit-transition-duration: 0.3s, 0.3s; -moz-transition-duration: 0.3s, 0.3s; -ms-transition-duration: 0.3s, 0.3s; -o-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0s; -moz-transition-delay: 0.3s, 0s; -ms-transition-delay: 0.3s, 0s; -o-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; } #mb-header #sidebar-main-trigger p::before, #mb-header #sidebar-main-trigger p::after { content: ""; position: absolute; display: inline-block; width: 100%; height: 2px; left: 0; background-color: #333; -webkit-transition-duration: 0.3s, 0.3s; -moz-transition-duration: 0.3s, 0.3s; -ms-transition-duration: 0.3s, 0.3s; -o-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0s; -moz-transition-delay: 0.3s, 0s; -ms-transition-delay: 0.3s, 0s; -o-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; } #mb-header #sidebar-main-trigger p::before { top: -10px; -webkit-transition-property: top,transform; -moz-transition-property: top,transform; -ms-transition-property: top,transform; -o-transition-property: top,transform; transition-property: top,transform; } #mb-header #sidebar-main-trigger p::after { bottom: -10px; -webkit-transition-property: bottom,transform; -moz-transition-property: bottom,transform; -ms-transition-property: bottom,transform; -o-transition-property: bottom,transform; transition-property: bottom,transform; } #mb-header .mb-ej-ul { background-color: #F7F7F7; display: none; } #mb-header .mb-ej-ul a { color: #333; } #mb-header .mb-ul .fir-nav { position: relative; padding: 16px 5%; } #mb-header .mb-ul .fir-nav i { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); font-size: 12px; font-family: 'iconfont' !important; transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); } #mb-header .mb-ul .fir-nav::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 90%; height: 1px; background-color: #F0F0F0; } #mb-header .mb-ul .fir-nav a { display: inline !important; padding: 16px 0 !important; } #mb-header .mb-ul .fir-nav a::after { width: 0; height: 0; display: none; } #mb-header .mb-ul .mb-ej-li.mb-active { background-color: #eee; } #mb-header .mb-ul .mb-ej-li.mb-active .fir-nav i { transform: translateY(-50%) rotate(90deg); transition: all 0.3s; } #mb-header .mb-ul .mb-ej-li.mb-active .mb-ej-ul a::after { background-color: rgba(255, 255, 255, 0.8) !important; } #mb-header #sidebar-main-trigger.active p { background-color: transparent; -webkit-transition-delay: 0s,0s; -moz-transition-delay: 0s,0s; -ms-transition-delay: 0s,0s; -o-transition-delay: 0s,0s; transition-delay: 0s,0s; } #mb-header #sidebar-main-trigger.active p::before, #mb-header #sidebar-main-trigger.active p::after { -webkit-transition-delay: 0s, 0.3s; -moz-transition-delay: 0s, 0.3s; -ms-transition-delay: 0s, 0.3s; -o-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; } #mb-header #sidebar-main-trigger.active p::before { top: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #mb-header #sidebar-main-trigger.active p::after { bottom: 0px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #mb-header #sidebar-main.open { position: fixed; right: 0px; top: 50px; bottom: 0px; z-index: 3000; } #mb-header #navbar-main.on { background-color: #fff; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); } #mb-header #navbar-main.on #sidebar-main-trigger i { color: #b51c22; } ::-webkit-scrollbar { width: 6px; background-color: #F7F8FB; } ::-webkit-scrollbar-track { background-color: #F7F8FB; } ::-webkit-scrollbar-thumb { background-color: #0058A5; } footer { background-color: #0058A5; overflow: hidden; } footer a { transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); } footer a:hover { color: #fff; } .foot-t { padding: 44px 0 72px; } .footL .logo { width: 13.8vw; } .footL .items { margin-top: 53px; margin-bottom: 22px; } .footL .item { display: none; } .footL .item * { line-height: 1; } .footL .item p { font-family: 'GilroyM'; color: #fff; } .footL .item.selected { display: block; } .footL ul li { position: relative; color: rgba(255, 255, 255, 0.5); padding-bottom: 9px; cursor: pointer; } .footL ul li::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 2px; background-color: #fff; transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .footL ul li:not(:last-of-type) { margin-right: 30px; } .footL ul li.active { color: #fff; } .footL ul li.active::after { left: 0; right: auto; width: 100%; } .footR { margin-top: 41px; } .footR dl * { line-height: 1; } .footR dl:not(:last-of-type) { margin-right: 4.8vw; } .footR dt { color: #fff; font-weight: bold; margin-bottom: 26px; } .footR dd { color: rgba(255, 255, 255, 0.5); } .footR dd:not(:last-of-type) { margin-bottom: 15px; } .foot-b { padding: 26px 0 33px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .foot-b * { color: rgba(255, 255, 255, 0.5); } .foot-b .blogroll * { font-size: inherit; } .foot-b .blogroll a { position: relative; margin-left: 30px; } .foot-b .blogroll a::before { content: ''; position: absolute; left: -15px; top: 56%; transform: translateY(-50%); width: 1px; height: 75%; background-color: rgba(255, 255, 255, 0.5); } .foot-b .copyR { margin-left: 24px; } .in-banner { position: relative; overflow: hidden; margin-top: 80px; } .in-banner .img img { transform: scale(1.1); animation: scale 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; } .in-banner .txt * { text-align: center; color: #fff; } .in-banner .txt p { text-transform: uppercase; } .in-banner .line { position: relative; width: 1px; height: 100px; background-color: rgba(255, 255, 255, 0.23); overflow: hidden; margin: 22px auto 0; } .in-banner .line::before { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background-color: #fff; animation: roll 3s ease-out infinite; z-index: 2; } .in-tit { position: relative; padding-bottom: 19px; } .in-tit::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 4px; background-color: #CCCCCC; } .in-tit p { font-family: 'GilroyM'; color: #0058A5; text-transform: uppercase; } .in-tit.in-tc::after { left: 50%; transform: translateX(-50%); } .paging a { display: inline-block; line-height: 39px; } .paging a:not(:last-of-type) { margin-right: 34px; } .paging a.active { font-weight: bold; color: #0058A5; } .paging .page-btn { width: 39px; height: 39px; border: 1px solid #CCCCCC; box-sizing: border-box; transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .paging .page-btn:hover { border-color: #0058A5; background-color: #0058A5; } .paging .page-btn:hover i { color: #fff; } @-webkit-keyframes scale { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes roll { 100% { top: 100%; } } @media only screen and (max-width: 1024px) { .head-pc { display: none; } #mb-header { display: block; } } @media only screen and (max-width: 1680px) { .fs120 { font-size: 100px; } .fs100 { font-size: 80px; } .fs50 { font-size: 42px; } .fs45 { font-size: 40px; } .fs40 { font-size: 36px; } .fs36 { font-size: 32px; } .fs32 { font-size: 28px; } .fs30 { font-size: 26px; } .fs28 { font-size: 24px; } .fs24 { font-size: 20px; } .fs20 { font-size: 18px; } .pt120 { padding-top: 100px; } .pb120 { padding-bottom: 100px; } .pb149 { padding-bottom: 129px; } .head-pc .li-1:not(:last-of-type) { margin-right: 15px; } .head-pc .li-1 > a { padding: 0 22px; } .head-pc .tel { margin-left: 50px; padding-right: 20px; margin-right: 20px; } .foot-b .blogroll a { margin-left: 20px; } .foot-b .blogroll a::before { left: -10px; } .foot-b .copyR { margin-left: 15px; } .in-banner .line { height: 90px; } } @media only screen and (max-width: 1560px) { .head-pc .li-1 > a { padding: 0 18px; } .head-pc .tel { margin-left: 45px; } } @media only screen and (max-width: 1440px) { .fs120 { font-size: 80px; } .fs100 { font-size: 70px; } .fs50 { font-size: 38px; } .fs45 { font-size: 34px; } .fs40 { font-size: 32px; } .fs36 { font-size: 28px; } .fs32 { font-size: 26px; } .fs30 { font-size: 24px; } .fs28 { font-size: 22px; } .fs24 { font-size: 18px; } .fs18 { font-size: 16px; } .fs15 { font-size: 14px; } .c1 { width: 85vw; } .pl10 { padding-left: 7.5vw; } .pr10 { padding-right: 7.5vw; } .head-pc .tel { margin-left: 35px; padding-right: 15px; margin-right: 15px; } .head-pc .tel i { margin-left: 20px; } .foot-t { padding: 40px 0 60px; } .foot-b .blogroll a { margin-left: 10px; } .foot-b .blogroll a::before { left: -7px; } .foot-b .copyR { margin-left: 10px; } .in-banner .line { height: 80px; } .paging a:not(:last-of-type) { margin-right: 30px; } } @media only screen and (max-width: 1280px) { .head-pc .tel { padding-right: 10px; margin-right: 10px; } .head-pc .tel i { margin-left: 10px; } .foot-b .blogroll a { margin-left: 5px; } .foot-b .blogroll a::before { left: -5px; } .foot-b .copyR { margin-left: 5px; } } @media only screen and (max-width: 1260px) { .head-pc .li-1:not(:last-of-type) { margin-right: 5px; } .head-pc .li-1 > a { font-size: 15px; padding: 0 10px; } .head-pc .tel { margin-left: 15px; } .foot-b { flex-direction: column; padding: 20px 0; } .foot-b .blogroll { margin-bottom: 5px; } .foot-b .footBR span { display: block; } .foot-b .copyR { margin-left: 0; margin-top: 5px; } } @media only screen and (max-width: 1024px) { .c1, .c2 { width: 90vw; } .fs120 { font-size: 70px; } .fs100 { font-size: 60px; } .fs50 { font-size: 32px; } .fs45 { font-size: 30px; } .fs40 { font-size: 28px; } .fs36 { font-size: 26px; } .fs32 { font-size: 24px; } .fs30 { font-size: 22px; } .fs28 { font-size: 20px; } .fs18 { font-size: 14px; } .fs24 { font-size: 16px; } .pl10 { padding-left: 5vw; } .pr10 { padding-right: 5vw; } .pt120 { padding-top: 80px; } .pb120 { padding-bottom: 80px; } .pb149 { padding-bottom: 100px; } .foot-t { padding: 35px 0 50px; } .footL .items { margin-top: 40px; margin-bottom: 15px; } .footR dt { margin-bottom: 20px; } .in-banner .img img { min-height: 300px; object-fit: cover; } .in-banner .line { height: 60px; } .paging a { line-height: 35px; } .paging a:not(:last-of-type) { margin-right: 20px; } .paging .page-btn { width: 35px; height: 35px; } .paging .page-btn i { font-size: 14px; } } @media only screen and (max-width: 860px) { .fs120 { font-size: 60px; } .fs100 { font-size: 64px; } .fs50 { font-size: 30px; } .fs45 { font-size: 28px; } .fs40 { font-size: 26px; } .fs36 { font-size: 24px; } .fs32 { font-size: 22px; } .fs28 { font-size: 18px; } .fs20 { font-size: 16px; } .fs16 { font-size: 14px; } .foot-t { padding: 30px 0; } .pt120 { padding-top: 60px; } .pb120 { padding-bottom: 60px; } .pb149 { padding-bottom: 80px; } .footL .logo { width: 20.8vw; } .footL .items { margin-top: 30px; } .footR { display: none; } .in-tit { padding-bottom: 10px; } .in-tit::after { height: 2px; } .paging a { line-height: 30px; } .paging a:not(:last-of-type) { margin-right: 15px; } .paging .page-btn { width: 30px; height: 30px; } } @media only screen and (max-width: 640px) { .fs100 { font-size: 50px; } .footL .logo { width: 30.8vw; } .footL .items { margin-top: 25px; } .footL ul li:not(:last-of-type) { margin-right: 20px; } .in-banner .img img { min-height: 260px; } .in-banner .line { height: 50px; } .paging a { line-height: 28px; } .paging a:not(:last-of-type) { margin-right: 10px; } .paging .page-btn { width: 28px; height: 28px; } } @media only screen and (max-width: 560px) { .fs120 { font-size: 50px; } .fs100 { font-size: 40px; } .fs50 { font-size: 26px; } .fs45 { font-size: 24px; } .fs40 { font-size: 22px; } .fs36, .fs32 { font-size: 20px; } .footL .logo .logo { width: 40.8vw; } } @media only screen and (max-width: 320px) { .paging a { line-height: 26px; } .paging a:not(:last-of-type) { margin-right: 5px; } .paging .page-btn { width: 26px; height: 26px; } .paging .page-btn i { font-size: 12px; } }