@charset "UTF-8"; * { padding: 0px; margin: 0px; } *, ::after, ::before { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, button, input, textarea, th, td { margin: 0; padding: 0; list-style: none; } html { font-family: Arial; color: #666; background-color: #fff; font-size: 10px; } h3, h4, h5, h6, a, span, p { color: #666; font-family: "寰蒋闆呴粦", Arial; font-weight: normal; display: block; } img { width: 100%; object-fit: cover; transition: 0.3s; display: block; } li { list-style: none; } a { text-decoration: none; display: block; } body, html { height: 100%; width: 100%; } .imgbox { overflow: hidden; position: relative; } :root { --dex: rgba(26, 72, 155, 1); } .clearfix { zoom: 1; } .clearfix:after { content: " "; display: block; clear: both; } .fl { float: left; } .fr { float: right; } input { -webkit-appearance: none; } /* pc */ .pc-1200px { display: none; } @media only screen and (max-width:1260px) { .pc-1200px { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #333; z-index: 10000; display: block; } .pc-1200px p { position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; top: 50%; left: 0; } .pc-1200px p img { display: block; margin: 0 auto 2em; height: 50px; } .pc-1200px p strong { display: block; color: #fff; text-align: center; font-size: 2em; letter-spacing: 1px; line-height: 1em; margin-bottom: 2em; } .pc-1200px p span { display: block; text-align: center; color: #eee; letter-spacing: 1px; font-size: 16px; } } /* h5 */ .drawer-nav { display: none; } .drawer-hamburger { display: none; } /* icenter */ .icenter { width: 1600px; margin: auto; position: relative; } /* more */ .more:hover { border-color: var(--dex); background-color: transparent; } .more { border-radius: 4rem; background-color: var(--dex); border: 1px solid var(--dex); overflow: hidden; -webkit-transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); position: relative; z-index: 1; width: 16.5rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; } .more > span { vertical-align: middle; font-size: 1.6rem; color: #fff; } .more:hover > span { opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } .more::after, .more > span { -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .more:hover::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .more::after { color: var(--dex); font-size: 1.6rem; content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); } .more.more2 { background-color: transparent; border-color: #fff; } .more.more2 span { color: #fff; } .more.more2::after { color: #fff; } .more.more2:hover { background-color: var(--dex); border-color: var(--dex); } .lay--flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .lay--absolute { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .text-center { text-align: center; } .font-bold { font-weight: 700; } .lay--flex { display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; } .lay--flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .lay--absolute { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .text-center { text-align: center; } .font-bold { font-weight: 700; } .i05_content .icenter, .ibanner .sc, .ibanner .text { display: flex; justify-content: center; align-items: center; flex-direction: column; } .i02 .icenter .top .content ul li, .ibanner .sc .dot { display: flex; justify-content: center; align-items: center; flex-direction: column; } .ibanner .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .lay--flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .lay--absolute { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .text-center { text-align: center; } .font-bold { font-weight: 700; } .about01_4, .about01_3, .about01_2, .about01_1, .about02_3, .about02_2, .about02_1, .about04, .about03_1, .app04_1, .app03-4_3, .app03-4_2, .app03-4_1, .app03-3_2, .app03_6, .app03_5, .app03_4, .app03_3, .app03_2, .app03_1, .app01_3, .app01_1, .cul09, .cul08, .cul07, .cul06, .cul05, .cul04, .cul03, .cul02, .cul01, .join07, .join06, .join05, .join04, .join03, .join02, .join01, .con03, .con02, .con01, .bui01, .innerbanner { position: relative; overflow: hidden; } .about05_1 .bot .text, .about01_3 .bot dd .text, .about02_2 .icenter, .app03-4_2 .icenter2 dl dd, .app03_4 .icenter .right dd, .app03_3 .icenter dl dd, .app03_1 .icenter .bot, .cul09 .icenter, .cul06 .icenter dl dd, .cul04 .icenter dl dd, .cul02 .bot .swiper .box, .join06 .right dd, .join01 .icenter .top { display: flex; justify-content: center; align-items: center; flex-direction: column; } .about05_3 .bot .content .tips .icon, .about05_3 .bot .content .text .icon, .about05_1 .bot .text .g .icon, .app03-4_2 .icenter2 dl dd .icon, .app03_6 .icenter .left .text .ri { display: flex; justify-content: center; align-items: center; flex-direction: column; } .about01_4 .content .swiper .box .container .imgbox, .about01_3 .bot dd .text, .app03Bannerr h3, .cul05 .icenter .left h3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* head */ .div1 { position: fixed; top: 0px; width: 100%; z-index: 99; transition: 0.3s; } .div1 .head.icenter { width: 90%; } .head { box-sizing: border-box; height: 9rem; margin: auto; display: flex; justify-content: space-between; align-items: center; } .head .right { display: flex; align-items: center; width: 68%; justify-content: space-between; } .head .logo img { transition: 0s; width: 14.9rem; filter: grayscale(1000) brightness(1000); } .head .right ul { display: flex; } .head .right li { margin: 0 2.2rem; position: relative;} .head .right li h3 a { line-height: 9rem; text-transform: uppercase; height: 9rem; font-size: 18px; color: #fff; } .head .op { display: flex; align-items: center; } .head .op .more { background-color: transparent; border-color: #fff; height: 3.8rem; } .head .op .more::after { color: #fff; } .head .op .more span { color: #fff; } .head .op .more:hover { background-color: var(--dex); border-color: var(--dex); } .head .op .search { font-size: 1.5rem; line-height: 2.4rem; margin-right: 2.3rem; padding-right: 2.3rem; color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.3); } .head .op .lang { display: flex; align-items: center; margin-right: 2rem; } .head .op .lang h4 { font-size: 16px; line-height: 24px; color: #fff; font-weight: 500; } .head .op .lang img { transition: 0s; width: 2.2rem; margin-right: 0.5rem; } .head .op .lang span { font-size: 16px; font-family: arial; color: #fff; margin-left: 5px; position: relative; top: 2px; } /* n-nav02 */ .nav li {position: relative;} .n-nav02{width: 200px;position: absolute;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);padding-top: 10px;opacity: 0;visibility: hidden;transition: all .3s;} .n-nav02:before{content: '';display: block;width: 0;height: 0;border: 10px solid transparent;border-bottom-color: rgba(26, 72, 155, 0.9);position: absolute;top: -10px;left: 50%;margin-left: -10px;} .n-nav02 .min{width: 100%;overflow: hidden;border-radius: 10px;} .n-nav02 a{display: block;width: 100%;line-height: 50px;text-align: center;border-bottom: 1px solid rgba(255,255,255,0.3);font-size: 14px;color: #ffffff;background-color:rgba(26, 72, 155, 0.9);} .n-nav02 a:last-of-type{border-bottom: 0px;} .nav li:hover .n-nav02{opacity: 1;visibility: visible;} .n-nav02 a:hover{color: rgba(255,255,255,0.8);} .div1:hover, .div2 ,.div3{ background-color: #fff; -webkit-box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.2); } .div1:hover .head .logo img, .div2 .head .logo img ,.div3 .head .logo img, .div2 .head .logo img{ filter: none; } .div1:hover .head .op .lang img, .div2 .head .op .lang img ,.div3 .head .op .lang img{ filter: invert(1); } .div1:hover .head .right li h3 a, .div2 .head .right li h3 a ,.div3 .head .right li h3 a{ color: #333; } .div1:hover .head .op .lang, .div2 .head .op .lang ,.div3 .head .op .lang{ color: rgba(0, 0, 0, 0.6); } .div1:hover .head .op .search, .div2 .head .op .search ,.div3 .head .op .search{ color: #333; border-right: 1px solid rgba(0, 0, 0, 0.6); } .div1:hover .head .op .lang h4, .div2 .head .op .lang h4 ,.div3 .head .op .lang h4{ color: #333; } .div1 .head .right li h3 a:hover, .div1 .head .op .lang:hover span ,.div3 .head .op .lang:hover span{ color: var(--dex); } .ibanner { position: relative; overflow: hidden; height: 100vh; } .ibanner::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .ibanner .imgbox { height: 100vh; } .ibanner .imgbox video { height: 100%; width: 100%; object-fit: cover; } .ibanner .text { z-index: 2; width: 94%; } .ibanner .text h3 { font-weight: bold; text-align: center; font-size: 80px; line-height: 1; color: #fff; } .ibanner .text h4 { font-size: 26px; line-height: 1; color: #fff; text-align: center; margin-top: 3rem; } .ibanner .sc { z-index: 2; cursor: pointer; position: absolute; left: 50%; transform: translateX(-50%); bottom: 8rem; } .ibanner .sc .dot { border: 1px solid #fff; border-radius: 50%; width: 4.4rem; height: 4.4rem; font-size: 30px; line-height: 1; color: #fff; } .ibanner .sc .dot i { animation: down 1.3s linear infinite; display: block; position: relative; } .ibanner .sc span { font-size: 14px; line-height: 1; color: #fff; margin-top: 1.7rem; } @keyframes down { 0% { top: 10%; } 25% { top: 0%; } 50% { top: -10%; } 75% { top: 0%; } 100% { top: 10%; } } .i_top span { font-size: 20px; line-height: 1; color: #fff; margin-bottom: 2.4rem; } .i_top h3 { font-size: 56px; line-height: 68px; color: #fff; font-weight: bold; } .i01 { padding: 17.1rem 0 18.5rem; } .i01 .icenter { display: flex; justify-content: space-between; } .i01 .icenter .bg { position: absolute; left: 50%; transform: translateX(-50%); top: 0px; width: 90%; } .i01 .icenter .left { width: 42.0625%; } .i01 .icenter .left .i_top span { color: var(--dex); } .i01 .icenter .left .i_top h3 { color: #333; } .i01 .icenter .left p { margin: 4rem 0 8rem; font-size: 20px; line-height: 34px; color: #666; } .i01 .icenter .right { width: 42.0625%; } .i01 .icenter .right dd { position: relative; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 4rem; padding-bottom: 1.9rem; border-bottom: 1px solid #ddd; } .i01 .icenter .right dd:hover::after { width: 100%; } .i01 .icenter .right dd:last-child h5 sup { font-size: 2.1rem; } .i01 .icenter .right dd::after { height: 0.3rem; bottom: -0.15rem; content: ""; position: absolute; left: 0px; width: 0%; transition: 0.3s; background-color: var(--dex); } .i01 .icenter .right dd span { font-size: 20px; line-height: 1; color: #333; } .i01 .icenter .right dd h5 strong { font-family: "arial"; font-size: 110px; line-height: 1; color: var(--dex); font-weight: bold; } .i01 .icenter .right dd h5 sup { font-size: 4rem; line-height: 1; color: var(--dex); height: 2rem; display: inline-block; position: relative; top: -7rem; } .i02 { position: relative; padding: 12.1rem 0 12.9rem; } .i02 .i02Swiper .swiper-wrapper { position: relative; } .i02 .i02Swiper .swiper-wrapper::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(9, 20, 33, 0.6); position: absolute; left: 0; bottom: 0px; } .i02 .bg { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } .i02 .bg img { display: none; height: 100%; } .i02 .bg .swiper-slide-active img { display: block; animation: i02_fade 0.3s linear forwards; } .i02 .icenter { z-index: 2; } .i02 .icenter .top { display: flex; justify-content: space-between; margin-bottom: 26.4rem; } .i02 .icenter .top .i_top { width: fit-content; } .i02 .icenter .top .content { width: 30.75%; } .i02 .icenter .top .content ul { display: flex; align-items: center; margin-bottom: 3rem; } .i02 .icenter .top .content ul li { margin-right: 1.4rem; width: 6rem; height: 6rem; border-radius: 50%; border: 1px solid #fff; } .i02 .icenter .top .content ul li:first-child img { width: 3.4rem; height: auto; } .i02 .icenter .top .content ul li img { width: auto; height: 2.7rem; } .i02 .icenter .top .content .text p { display: none; font-size: 18px; line-height: 30px; color: #fff; margin-bottom: 4rem; } .i02 .icenter .top .content .text p.active { display: block; animation: i02_fade 0.3s linear forwards; } .i02 .icenter .top .content .lianjie { width: 5.5rem; } .i02 .icenter .top .content .lianjie a { display: none; position: relative; transition: 0.3s; left: 0px; } .i02 .icenter .top .content .lianjie a:hover { left: 1rem; } .i02 .icenter .top .content .lianjie a.active { display: block; animation: i02_fade 0.3s linear forwards; } .i02 .icenter .bot { display: flex; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.6); } .i02 .icenter .bot dd { transition: 0.3s; padding: 4rem; width: 25%; border-right: 1px solid rgba(255, 255, 255, 0.6); } .i02 .icenter .bot dd:hover, .i02 .icenter .bot dd.active { background-color: rgba(255, 255, 255, 0.3); } .i02 .icenter .bot dd:last-child { border-right: 0px; } .i02 .icenter .bot dd h4 { font-size: 30px; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 1.2rem; } .i02 .icenter .bot dd h5 { font-size: 18px; line-height: 1; color: #fff; } @keyframes i02_fade { 0% { opacity: 0.6; } 100% { opacity: 1; } } .i03 { padding: 14.4rem 0 16.6rem; } .i03 .top { align-items: flex-end; display: flex; justify-content: space-between; padding-bottom: 2.7rem; border-bottom: 1px solid #ddd; margin-bottom: 4.3rem; } .i03 .top .i_top h3 { color: #333; } .i03 .bot { display: flex; justify-content: space-between; } .i03 .bot .le { width: 44.5625%; } .i03 .bot .le:hover .imgbox img { transform: scale(1.1); } .i03 .bot .le:hover .text h3 { color: var(--dex); } .i03 .bot .le:hover .text .more { background-color: var(--dex); } .i03 .bot .le:hover .text .more span { color: #fff; } .i03 .bot .le .imgbox img { height: 40.6rem; } .i03 .bot .le .text { margin-top: 2.5rem; } .i03 .bot .le .text .date { display: flex; align-items: center; margin-bottom: 2.2rem; } .i03 .bot .le .text .date img { width: 1.5rem; } .i03 .bot .le .text .date span { font-size: 18px; line-height: 1; color: #666; margin-left: 1rem; } .i03 .bot .le .text h3 { font-size: 32px; line-height: 42px; color: #333; font-weight: bold; margin-bottom: 1.3rem; } .i03 .bot .le .text p { font-size: 18px; line-height: 30px; color: #666; margin-bottom: 6.5rem; } .i03 .bot .le .text .more { background-color: transparent; } .i03 .bot .le .text .more span { color: var(--dex); } .i03 .bot .le .text .more::after { color: #fff; } .i03 .bot .ri { width: 49.125%; } .i03 .bot .ri a { display: flex; justify-content: space-between; align-items: center; padding: 3.5rem 0; border-top: 1px solid #ddd; } .i03 .bot .ri a:hover .imgbox img { transform: scale(1.1); } .i03 .bot .ri a:hover .text p { color: var(--dex); } .i03 .bot .ri a:hover .text .gengduo i { left: 1rem; } .i03 .bot .ri a:first-child { border-top: 0px; padding-top: 0px; } .i03 .bot .ri a:last-child { border-bottom: 1px solid #ddd; } .i03 .bot .ri a .text { width: 48.2802547771%; } .i03 .bot .ri a .text .date { display: flex; align-items: center; margin-bottom: 1rem; } .i03 .bot .ri a .text .date img { width: 1.5rem; } .i03 .bot .ri a .text .date span { font-size: 18px; line-height: 1; color: #666; margin-left: 1rem; } .i03 .bot .ri a .text p { font-size: 24px; line-height: 36px; color: #333; font-weight: bold; margin-bottom: 5.6rem; } .i03 .bot .ri a .text .gengduo { display: flex; align-items: center; } .i03 .bot .ri a .text .gengduo span { font-size: 16px; line-height: 1; color: var(--dex); } .i03 .bot .ri a .text .gengduo i { margin-left: 0.6rem; position: relative; left: 0px; transition: 0.3s; font-size: 16px; line-height: 1; color: var(--dex); } .i03 .bot .ri a .imgbox { width: 40.6369426752%; } .i03 .bot .ri a .imgbox img { height: 19.1rem; } .i05_content { position: relative; height: 100vh; background: url("../img/sy_bjsp.mp4"); background-size: cover; display: flex; align-items: center; } .i05_content::after { z-index: 2; content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; left: 0; bottom: 0px; } .i05_content .icenter { z-index: 3; opacity: 1; } .i05_content .icenter .i_top span { text-align: center; } .i05_content .icenter .i_top h3 { text-align: center; } .i05_content .icenter p { font-size: 18px; line-height: 30px; color: #fff; margin: 1.9rem 0 4.6rem; text-align: center; } .i05_content video { z-index: 1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; object-fit: cover; } .i05 .i05_wen { transition: 0.5s; opacity: 0; position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%); } .i05 .i05_wen h3 { font-size: 50px; line-height: 1; color: #333; font-weight: bold; margin-bottom: 2.2rem; } .i05 .i05_wen p { font-size: 18px; line-height: 29px; text-align: center; margin-bottom: 5.2rem; } .i05 .i05_wen .more { margin: auto; background-color: transparent; } .i05 .i05_wen .more::after { color: #fff; } .i05 .i05_wen .more span { color: var(--dex); } .i05 .i05_wen .more:hover { background-color: var(--dex); } .i05 .mc_bs3_videobox.end .mc_bs3_svg { opacity: 1; pointer-events: all; } .i05 .mc_bs3_videobox.start .i05_wen { opacity: 1; bottom: 12%; } .i05 .mc_bs3_videobox.start .i05_content .icenter { opacity: 0; } .mc_b_s3 { height: 220vh; } .mc_bs3_videobox { position: sticky; position: -webkit-sticky; width: 100%; height: 100vh; top: 0px; z-index: 1; } .mc_bs3_videowrap { position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 100vw; height: 100vh; max-width: none; overflow: hidden; } .mc_bs3_svg { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); text-align: center; width: 100%; max-width: none; opacity: 0; } .mc_b_s3 { height: 220vh; width: 100%; } .mc_bs3_videobox { position: sticky; position: -webkit-sticky; width: 100%; height: 100vh; top: 0px; z-index: 1; } .mc_bs3_videowrap { position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 100%; height: 100vh; max-width: none; overflow: hidden; } .i05_content { height: auto; width: 100%; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; min-height: 100vh; transition: inherit; object-fit: cover; } .mc_bs3_svg { pointer-events: none; position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); text-align: center; width: 100%; max-width: none; /* transition: all 0.36s; */ min-height: 100vh; } .footer .fo01 { background: url("../img/fo01_bg.jpg"); background-size: cover; padding: 6.7rem 0; } .footer {position: relative; z-index: 1;} .footer .fo01 .icenter { display: flex; justify-content: space-between; align-items: center; } .footer .fo01 .le { width: fit-content; padding-right: 3.7rem; border-right: 1px solid rgba(255, 255, 255, 0.3); } .footer .fo01 .le .le__t { display: flex; align-items: center; } .footer .fo01 .le .le__t h3 { font-size: 44px; line-height: 1; color: #fff; margin-right: 1.8rem; font-weight: bold; } .footer .fo01 .le .le__t h4 { font-size: 46px; line-height: 1; color: #fff; font-weight: bold; } .footer .fo01 .le .le__b { margin-top: 1.6rem; } .footer .fo01 .le .le__b h4 { font-size: 18px; line-height: 1; color: #fff; opacity: 0.7; } .footer .fo01 .ri { display: flex; } .footer .fo01 .ri .num { display: flex; align-items: center; width: fit-content; margin-right: 11.2rem; } .footer .fo01 .ri .num:nth-of-type(3) { margin-right: 0px; } .footer .fo01 .ri .num .fuhao { font-size: 48px; line-height: 1; color: #fff; margin-right: 0.5rem; font-weight: bold; } .footer .fo01 .ri .num .shuzi { font-size: 48px; line-height: 1; color: #fff; font-weight: bold; margin-right: 1.5rem; } .footer .fo01 .ri .num .text span { font-size: 14px; line-height: 1; color: #fff; margin-top: 0.6rem; } .footer .fo01 .ri .num .text span:nth-of-type(1) { margin-top: 0px; } .footer .fo02 { padding: 9rem 0; background-color: rgb(0, 11, 34); display: flex; justify-content: space-between; } .footer .fo02 .fo02_1 { margin-bottom: 10.4rem; display: flex; justify-content: space-between; } .footer .fo02 .fo02_1 dd { width: 14.5%; } .footer .fo02 .fo02_1 dd h3 { position: relative; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer .fo02 .fo02_1 dd h3::after { width: 4rem; height: 0.2rem; position: absolute; content: ""; background-color: #fff; left: 0px; bottom: -0.1rem; } .footer .fo02 .fo02_1 dd h3 a { width: fit-content; font-size: 22px; line-height: 1; color: #fff; font-weight: bold; } .footer .fo02 .fo02_1 dd .min a { width: fit-content; margin-bottom: 2.2rem; font-size: 18px; line-height: 1; color: rgba(255, 255, 255, 0.6); } .footer .fo02 .fo02_1 dd .min a:last-child { margin-bottom: 0px; } .footer .fo02 .fo02_1 dd .min a:hover { color: rgb(255, 255, 255); } .footer .fo02 .fo02_2 { display: flex; align-items: center; } .footer .fo02 .fo02_2 li { padding-right: 6.8rem; margin-right: 6.8rem; border-right: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; } .footer .fo02 .fo02_2 li:nth-of-type(3) { padding-right: 0px; margin-right: 0px; border-width: 0px; } .footer .fo02 .fo02_2 li:nth-of-type(3) span { font-weight: 400; } .footer .fo02 .fo02_2 li img { width: 2.4rem; margin-right: 1.1rem; } .footer .fo02 .fo02_2 li span { font-size: 20px; line-height: 1; color: #fff; font-weight: bold; } .footer .fo02 .fo02_3 { padding-top: 2.8rem; margin-top: 2.8rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: space-between; } .footer .fo02 .fo02_3 .le { display: flex; align-items: center; } .footer .fo02 .fo02_3 a { margin-right: 1.8rem; display: flex; align-items: center; font-size: 18px; line-height: 1; color: rgba(255, 255, 255, 0.6); } .footer .fo02 .fo02_3 a img { width: 2.2rem; margin-left: 1.8rem; } .innerbanner .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .innerbanner .imgbox img { height: 80rem; } .innerbanner .text { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; } .innerbanner .text h4 { font-size: 24px; line-height: 1; color: #fff; margin-bottom: 2rem; } .innerbanner .text h3 { font-size: 60px; line-height: 74px; color: #fff; font-weight: bold; } .innerbanner .nav { width: 100%; position: absolute; bottom: 0px; left: 0px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .innerbanner .nav .icenter { margin: auto; display: flex; align-items: center; } .innerbanner .nav .icenter a { font-size: 20px; line-height: 1; color: #fff; height: 8.9rem; line-height: 8.9rem; margin-right: 7.4rem; opacity: 0.6; } .innerbanner .nav .icenter a:last-child { margin-right: 0px; } .innerbanner .nav .icenter a.active, .innerbanner .nav .icenter a:hover { opacity: 1; } .common_h3 { font-size: 42px; line-height: 1; color: #333; font-weight: bold; } .bui01 { padding: 15.4rem 0 14rem; } .bui01 .icenter { display: flex; justify-content: space-between; align-items: center; } .bui01 .icenter .left { width: 49.6875%; } .bui01 .icenter .left img { height: 57.8rem; } .bui01 .icenter .right { width: 42.8125%; } .bui01 .icenter .right h4 { position: relative; margin-bottom: 4rem; padding-bottom: 2.4rem; } .bui01 .icenter .right h4::after { position: absolute; width: 9.4rem; height: 0.4rem; background-color: var(--dex); left: 0px; bottom: 0px; content: ""; } .bui01 .icenter .right h5 { font-size: 34px; line-height: 1; color: #333; font-weight: bold; margin-bottom: 4rem; } .bui01 .icenter .right p { font-size: 18px; line-height: 30px; color: #333333; } .bui02 a { background-color: rgb(245, 245, 245); padding: 14.8rem 0; } .bui02 a:nth-of-type(2n) { background-color: #fff; } .bui02 a:hover .icenter .content .ri h4 { color: var(--dex); } .bui02 a:hover .icenter .imgbox img { transform: scale(1.1); } .bui02 a .icenter { display: flex; justify-content: space-between; align-items: center; } .bui02 a .icenter .content { width: 67.5%; display: flex; justify-content: space-between; } .bui02 a .icenter .content .le { width: fit-content; } .bui02 a .icenter .content .le .num h4 { font-size: 60px; line-height: 1; color: var(--dex); font-weight: bold; margin-bottom: 1.2rem; } .bui02 a .icenter .content .le .num span { font-size: 22px; line-height: 1; color: var(--dex); width: fit-content; position: relative; left: 0.8rem; } .bui02 a .icenter .content .ri { width: 68%; } .bui02 a .icenter .content .ri h4 { font-size: 30px; line-height: 36px; color: #333; font-weight: bold; margin-bottom: 2.6rem; } .bui02 a .icenter .content .ri p { font-size: 18px; line-height: 26px; color: #666; margin-bottom: 4.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; } .bui02 a .icenter .content .ri h5 { display: flex; align-items: center; margin-right: 1.4rem; position: relative; } .bui02 a .icenter .content .ri h5 span { position: relative; width: 3.8rem; height: 1px; background-color: #999; } .bui02 a .icenter .content .ri h5 span::after {transition: 0.3s; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #999; content: ""; left: 0px; top: 50%; transform: translateY(-50%); } .bui02 a .icenter .content .ri h5 strong { font-size: 16px; line-height: 1; color: #666; margin-left: 1.5rem; } .bui02 a:hover .icenter .content .ri h5 span::after {left: 3.8rem;} .bui02 a:hover .icenter .content .ri h5 span{background-color: var(--dex);} .bui02 a:hover .icenter .content .ri h5 span::after {background-color: var(--dex);} .bui02 a:hover .icenter .content .ri h5 strong {color: var(--dex);} .bui02 a .icenter .imgbox { width: 25.5%; } .bui02 a .icenter .imgbox img { height: 26.1rem; } /* page */ .page_f { padding: 6rem 0 13.2rem; background-color: rgb(245, 245, 245); } .page { display: flex; justify-content: flex-start; align-items: center; width: fit-content; margin: auto; margin-top: 5rem; } .page h2 { display: none; } .page .pagination .nav-links { display: flex; justify-content: center; align-items: center; } .page span { border-radius: 5px; width: 4.4rem; height: 4.4rem; border: 1px solid #cbcbcb; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #464647; margin-right: 1.5rem; } .page a, .page .dots { border-radius: 5px; width: 4.4rem; height: 4.4rem; border: 1px solid var(--dex); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #464647; margin-right: 1.5rem; background: transparent; } .page a:last-child { margin-right: 0px; } .page span:hover { color: #fff; background-color: var(--dex); border-color: var(--dex); } .page span, .page .active { color: #fff; background-color: var(--dex); border-color: var(--dex); } .page a:hover { color: #fff; background-color: var(--dex); border-color: var(--dex); } .news01 { padding: 14rem 0; } .news01 .icenter { background-color: rgb(245, 245, 245); display: flex; align-items: center; } .news01 .icenter:hover .left img { transform: scale(1.1); } .news01 .icenter:hover .right h4 { color: var(--dex); } .news01 .icenter .left { width: 50%; } .news01 .icenter .left img { height: 54rem; } .news01 .icenter .right { padding: 9rem; width: 50%; } .news01 .icenter .right .num { margin-bottom: 4.4rem; } .news01 .icenter .right .num h4 { font-size: 60px; line-height: 1; color: var(--dex); font-weight: bold; margin-bottom: 1.2rem; } .news01 .icenter .right .num span { font-size: 22px; line-height: 1; color: var(--dex); width: fit-content; position: relative; left: 0.8rem; } .news01 .icenter .right h4 { font-size: 30px; line-height: 36px; color: #333; font-weight: bold; margin-bottom: 2.8rem; } .news01 .icenter .right p { font-size: 18px; line-height: 26px; color: #666; margin-bottom: 6.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; } .news01 .icenter .right h5 { display: flex; align-items: center; margin-right: 1.4rem; position: relative; } .news01 .icenter .right h5 span { position: relative; width: 3.8rem; height: 1px; background-color: #999; } .news01 .icenter .right h5 span::after { transition: 0.3s; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #999; content: ""; left: 0; top: 50%; transform: translateY(-50%); } .news01 .icenter .right:hover h5 span::after {left: 3.8rem;} .news01 .icenter .right:hover h5 span{background-color: var(--dex);} .news01 .icenter .right:hover h5 span::after {background-color: var(--dex);} .news01 .icenter .right:hover h5 strong {color: var(--dex);} .news01 .icenter .right h5 strong { font-size: 16px; line-height: 1; color: #666; margin-left: 1.5rem; } .con01 { padding-bottom: 0rem; top: -18rem; margin-bottom: -2rem; } .con01 .icenter .top { display: flex; margin-bottom: 12rem; padding: 10.6rem 8.8rem; border-radius: 1rem; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .con01 .icenter .top dd { border-right: 1px solid #ddd; padding-right: 9.4rem; margin-right: 9.4rem; } .con01 .icenter .top dd:last-child { margin-right: 0px; padding-right: 0px; border-right: 0px; } .con01 .icenter .top dd:hover img { transform: rotateY(180deg); } .con01 .icenter .top dd img { height: 4.5rem; width: auto; } .con01 .icenter .top dd span { font-size: 16px; line-height: 1; color: #666; margin: 3rem 0 2rem; } .con01 .icenter .top dd h4 { font-size: 20px; line-height: 1; color: #333; } .con01 .icenter .bot h4 { margin-bottom: 4.3rem; } .con01 .icenter .bot .map { position: relative; } .con01 .icenter .bot .map .content img { height: 53.5rem; } .con01 .icenter .bot .map .icon { width: 40.6rem; padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 14rem; left: 27rem; } .con01 .icenter .bot .map .icon .bg { width: 53.1rem; height: auto; position: absolute; left: -25px; } .con01 .icenter .bot .map .icon .bg img { width: 100%; height: auto; } .con01 .icenter .bot .map .icon:hover .le img { transform: scale(1.1); } .con01 .icenter .bot .map .icon:hover .ri h5 { color: var(--dex); } .con01 .icenter .bot .map .icon:hover .ri h6 span { left: 1rem; } .con01 .icenter .bot .map .icon .le { z-index: 2; width: 50.7389162562%; } .con01 .icenter .bot .map .icon .le img { height: 13rem; } .con01 .icenter .bot .map .icon .ri { z-index: 2; width: 39.6551724138%; } .con01 .icenter .bot .map .icon .ri h5 { font-size: 20px; line-height: 30px; color: #333; font-weight: bold; margin-bottom: 2.5rem; } .con01 .icenter .bot .map .icon .ri h6 { display: flex; align-items: center; font-size: 16px; line-height: 1; color: var(--dex); } .con01 .icenter .bot .map .icon .ri h6 span { font-size: 16px; line-height: 1; color: var(--dex); margin-left: 0.7rem; position: relative; transition: 0.3s; left: 0px; } .con02 { padding: 15.7rem 0 7.7rem; background: url("/style/img/con02_bg.jpg"); background-size: cover; } .con02::after { content: ""; display: inline-block; width: 100%; height: 100%; background: #1a489b; position: absolute; left: 0; bottom: 0px; opacity: 0.9; } .con02 .icenter { z-index: 1; } .con02 .icenter h4 { color: #fff; margin-bottom: 6.2rem; } .con02 .icenter dl { display: flex; flex-flow: wrap; } .con02 .icenter dl dd {margin-right: 22rem; margin-bottom: 8rem; width: 38.6rem; } .con02 .icenter dl dd:nth-of-type(3n) { margin-right: 0px; } .con02 .icenter dl dd h5 { font-size: 24px; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 2.5rem; } .con02 .icenter dl dd ul li { display: flex; align-items: center; margin-bottom: 2rem; } .con02 .icenter dl dd ul li img { height: auto; width: 2.2rem; margin-right: 1.5rem; } .con02 .icenter dl dd ul li span { font-size: 16px; line-height: 1; color: #fff; opacity: 0.7; } .con03 { padding: 20rem 0 15rem; } .con03 .icenter { display: flex; align-items: center; height: 76.1rem; } .con03 .icenter .left { height: 100%; width: 65.625%; background-color: rgb(246, 247, 249); padding: 9.5rem 8.5rem; } .con03 .icenter .left h3 { margin-bottom: 3rem; } .con03 .icenter .right { height: 100%; width: 34.375%; } .con03 .icenter .right img { height: 100%; } .con03 form .label { display: flex; justify-content: space-between; margin-bottom: 3rem; } .con03 form .label:nth-child(1) .g { width: 49%; } .con03 form .label:nth-child(3) { margin-bottom: 2rem; } .con03 form .label:nth-child(2) .g { width: 49%; } .con03 form .label:nth-child(3) .g { width: 100%; } .con03 form .label .g span { font-size: 15px; line-height: 1; color: #666; margin-bottom: 1.6rem; } .con03 form .more { cursor: pointer; } .con03 form .label .g input { background-color: #fff; padding-left: 2rem; height: 5rem; line-height: 5.8rem; font-size: 16px; line-height: 1; color: #666; outline: none; border-radius: 0.2rem; border: none; width: 100%; } .con03 form .label .g input::placeholder { color: #999; font-size: 14px; } .con03 form .label .g textarea { border: none; background-color: #fff; width: 100%; outline: none; border-radius: 0.5rem; padding-top: 2.2rem; padding-left: 2.6rem; font-size: 16px; line-height: 1; color: #333333; height: 10.1rem; resize: none; margin-bottom: 4rem; } .con03 form .label .g textarea::placeholder { color: #999; font-size: 14px; } /* biaodan */ .screen-reader-response { display: none; } .wpcf7-not-valid-tip { color: red !important; margin-top: 1rem; } .wpcf7-response-output { color: red !important; font-size: 14px !important; margin-top: -5rem; } .join01 { padding-top: 13.5rem; } .join01 .icenter .top { margin-bottom: 10.9rem; } .join01 .icenter .top h4 { text-align: center; margin-bottom: 2.8rem; line-height: 60px; } .join01 .icenter .top p { text-align: center; font-size: 22px; line-height: 36px; color: #333; width: 90rem; } .join01 .bot { display: flex; justify-content: space-between; height: 63rem; } .join01 .bot .left { width: 50%; height: 100%; } .join01 .bot .left img { height: 100%; } .join01 .bot .right { background-color: rgb(245, 245, 245); width: 50%; height: 100%; padding: 15rem 10.6rem; padding-right: calc((100% - 1600px) / 2); } .join01 .bot .right h4 { margin-bottom: 3.8rem; } .join01 .bot .right p { font-size: 18px; line-height: 30px; color: #333; } .join01 .bot .right .wen { font-size: 200px; line-height: 30px; color: #666; position: absolute; right: calc((100% - 1600px) / 2); bottom: 8.5rem; opacity: 0.2; font-family: 寰蒋闆呴粦; font-weight: bold; } .join02 { padding: 15rem 0; } .join02 .icenter { display: flex; justify-content: space-between; } .join02 .icenter dl { height: 69rem; } .join02 .icenter dl dd { padding: 6.4rem 5.4rem; } .join02 .icenter dl dd h4 { font-size: 36px; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 2.4rem; } .join02 .icenter dl dd p { font-size: 18px; line-height: 30px; color: #fff; } .join02 .icenter dl:nth-of-type(1) { width: 32.5%; display: flex; align-items: center; flex-direction: column; justify-content: space-between; } .join02 .icenter dl:nth-of-type(1) dd { height: 33.4rem; width: 100%;} .join02 .icenter dl:nth-of-type(1) dd:nth-of-type(1) { background-color: var(--dex); margin-bottom: 0.6%; } .join02 .icenter dl:nth-of-type(1) dd:nth-of-type(2) { background: url("/style/img/join02_bg1.jpg"); background-size: cover; } .join02 .icenter dl:nth-of-type(2) { width: 66.25%; display: flex; justify-content: space-between; } .join02 .icenter dl:nth-of-type(2) dd { width: 49%; position: relative; height: 100%; } .join02 .icenter dl:nth-of-type(2) dd .imgbox { position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; } .join02 .icenter dl:nth-of-type(2) dd .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .join02 .icenter dl:nth-of-type(2) dd .imgbox img { height: 100%; } .join02 .icenter dl:nth-of-type(2) dd h4 { z-index: 1; position: relative; } .join02 .icenter dl:nth-of-type(2) dd p { position: relative; z-index: 1; } .join03 { padding: 20rem 0; background: url("/style/img/join03_bg.jpg"); background-size: cover; background-attachment: fixed; } .join03::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .join03 .icenter { z-index: 1; } .join03 .icenter h4 { color: #fff; text-align: center; margin-bottom: 2.5rem; } .join03 .icenter p { text-align: center; font-size: 22px; line-height: 36px; color: #fff; } .join04 { padding: 15rem 0; } .join04 .top { margin-bottom: 5.4rem; } .join04 .top .icenter { display: flex; justify-content: space-between; } .join04 .top .icenter h3 { position: relative; padding-bottom: 2.8rem; } .join04 .top .icenter h3::after { position: absolute; bottom: 0px; left: 0px; width: 10rem; height: 0.4rem; background-color: var(--dex); content: ""; } .join04 .top .icenter .nav { width: fit-content; display: flex; align-items: center; height: fit-content; } .join04 .top .icenter .nav .fa { margin-top: 0px; position: unset; width: 5.8rem; height: 5.8rem; border-radius: 50%; background-color: var(--dex); font-size: 4rem; background-image: none; color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; background-size: unset; margin-right: 1rem; } .join04 .top .icenter .nav .fa:last-child { margin-right: 0px; } .join04 .bot { position: relative; width: 1600px; left: calc((100% - 1600px) / 2); } .join04 .bot .imgbox { overflow: hidden; border-radius: 1rem; position: relative; z-index: 1; } .join04 .bot .imgbox img { overflow: hidden; border-radius: 1rem; position: relative; z-index: 1; } .join04 .bot .imgbox img { height: 34.7rem; } .join04 .bot .swiper { overflow: hidden; margin-bottom: 7.4rem; } .join04 .bot .content { margin: 0 auto; text-align: center; width: 98.2rem; font-size: 20px; line-height: 34px; color: #666; } .join05 { padding: 12.5rem 0 20rem; background-color: rgb(246, 247, 249); } .join05 .top { margin-bottom: 3rem; } .join05 .top h3 { text-align: center; margin-bottom: 2.1rem; } .join05 .top p { text-align: center; font-size: 20px; line-height: 22px; color: #666; } .join05 .bot { position: relative; } .join05 .bot .imgbox img { height: auto; } .join05 .bot .swiper-pagination { left: 50%; transform: translateX(-50%); bottom: -17%; } .join05 .bot .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--dex); } .join05 .bot .swiper-pagination .swiper-pagination-bullet { margin-right: 1rem; } .join05 .bot .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0px; } .join06 { height: 75.5rem; background: url("/style/img/join06_bg.jpg"); background-size: cover; background-attachment: fixed; height: 100%; display: flex; justify-content: space-between; z-index: 1; position: relative; } .join06::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .join06 .left { z-index: 1; width: fit-content; position: relative; padding-left: calc((100% - 1600px) / 2); padding-top: 17rem; } .join06 .left h3 { color: #fff; position: relative; padding-bottom: 2.8rem; margin-bottom: 2.8rem; } .join06 .left h3::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 10rem; height: 0.4rem; background-color: #fff; } .join06 .left p { font-size: 22px; line-height: 36px; color: #666; color: #fff; width: 50rem; } .join06 .right { z-index: 1; position: relative; height: 100%; display: flex; flex-flow: wrap; justify-content: space-between; margin-bottom: 1px; width: 43.4210526316%; } .join06 .right dd { background-color: rgba(255, 255, 255, 0.2); width: 33%; height: 33%; } .join06 .right dd:hover{background-color: var(--dex);} .join06 .right dd:hover img { transform: rotateY(180deg); } .join06 .right dd img { height: 4rem; margin-bottom: 1.3rem; width: auto; } .join06 .right dd span { font-size: 20px; line-height: 1; color: #fff; font-weight: bold; } .join07 { padding: 14rem 0; } .join07 .icenter{ display: flex; justify-content: space-between; flex-flow: wrap; height: 45rem; } .join07 .icenter .left{ width: 50%; height: 100%;} .join07 .icenter .left img { height: 100%; } .join07 .icenter .right{ width: 50%; padding: 10rem 12rem; background-color: rgba(246, 247, 249,1); height: 100%;} .join07 .icenter .right h3{ line-height: 40px; } .join07 .icenter .right dl{ margin-top: 3rem; } .join07 .icenter .right dl dd { display: flex; flex-flow: wrap; align-items: center; margin-bottom: 1.2rem;} .join07 .icenter .right dl dd img{ width: 2rem; margin-right: 1.3rem; } .join07 .icenter .right dl dd h4{ font-size: 20px; color: #666; } .cul01 { padding: 14rem 0; } .cul01 .icenter .top { margin-bottom: 6.5rem; } .cul01 .icenter .top h3 { position: relative; width: 107.5rem; text-align: center; margin: auto; margin-bottom: 4rem; padding-bottom: 3.6rem; border-bottom: 1px solid #ddd; } .cul01 .icenter .top h3::after { position: absolute; content: ""; width: 8.5rem; height: 0.6rem; bottom: -0.3rem; left: 50%; transform: translateX(-50%); background-color: var(--dex); } .cul01 .icenter .top h4 { font-size: 26px; line-height: 1; color: #333; text-align: center; } .cul01 .icenter .bot h3 { text-align: center; margin-bottom: 2.7rem; font-size: 40px; line-height: 1; color: #333; font-weight: bold; } .cul01 .icenter .bot dl { display: flex; justify-content: space-between; align-items: flex-start; } .cul01 .icenter .bot dl dd { background-color: rgb(246, 247, 249); width: 32%; } .cul01 .icenter .bot dl dd:nth-of-type(2) { display: flex; flex-direction: column-reverse; } .cul01 .icenter .bot dl dd:hover .imgbox img { transform: scale(1.1); } .cul01 .icenter .bot dl dd .imgbox img { height: 41rem; } .cul01 .icenter .bot dl dd .text { position: relative; padding: 6rem; background-color: rgb(246, 247, 249); } .cul01 .icenter .bot dl dd .text h4 { font-size: 26px; line-height: 1; color: var(--dex); text-align: center; margin-bottom: 1.3rem; font-weight: bold; } .cul01 .icenter .bot dl dd .text h5 { font-size: 20px; line-height: 1; color: #666; text-align: center; line-height: 28px; } .cul01 .icenter .bot dl dd .text .wen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 140px; line-height: 1; color: #333; opacity: 0.1; font-weight: bold; font-family: "arial"; } .cul02 { padding: 15rem 0 17rem; background: url("/style/img/cul02_bg.jpg"); background-size: cover; } .cul02 h3 { text-align: center; margin-bottom: 3.5rem; text-align: center; color: #fff; } .cul02::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .cul02 .icenter { position: relative; z-index: 1; } .cul02 .bot .swiper { overflow: hidden; } .cul02 .bot .swiper .box { height: 37.8rem; border: 2px solid #fff; padding-top: 6.7rem; justify-content: flex-start; } .cul02 .bot .swiper .box:hover img { transform: rotateY(180deg); } .cul02 .bot .swiper .box img { height: 4rem; width: auto; margin-bottom: 2.4rem; } .cul02 .bot .swiper .box h4 { font-size: 24px; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.65); } .cul02 .bot .swiper .box p { font-size: 16px; line-height: 30px; color: #fff; } .cul02 .bot .fa { margin-top: 0px; width: 4.5rem; height: 4.5rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); font-size: 3.5rem; background-image: none; color: var(--dex); display: flex; justify-content: center; align-items: center; flex-direction: column; background-size: unset; } .cul02 .bot .fa:hover { background-color: #fff; } .cul02 .bot .fa.fa-angle-left { left: -4%; } .cul02 .bot .fa.fa-angle-right { right: -4%; } .cul03 { padding: 13rem 0; } .cul03 h3 { width: 107.5rem; text-align: center; position: relative; margin: auto; margin-bottom: 4.5rem; padding-bottom: 3.6rem; border-bottom: 1px solid #ddd; } .cul03 h3::after { position: absolute; content: ""; width: 8.5rem; height: 0.6rem; bottom: -0.3rem; left: 50%; transform: translateX(-50%); background-color: var(--dex); } .cul03 dl { display: flex; justify-content: space-between; margin-bottom: 3.5rem; } .cul03 dl dd { padding: 5.5rem 9.5rem; background: url("/style/img/cul03_bg.jpg"); background-size: cover; display: flex; align-items: center; border-radius: 1rem; width: 32.5%; } .cul03 dl dd img { width: 7rem; height: auto; margin-right: 4.2rem; padding-right: 2.7rem; border-right: 1px solid rgba(255, 255, 255, 0.4); } .cul03 dl dd span { font-size: 22px; line-height: 1; color: #fff; } .cul03 p { font-size: 26px; line-height: 1; color: #333; font-weight: bold; text-align: center; } .cul04 { padding: 14.2rem 0; background: url("/style/img/cul04_bg.jpg"); background-size: cover; background-attachment: fixed; } .cul04::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .cul04 .icenter { z-index: 1; position: relative; } .cul04 .icenter h3 { position: relative; width: 107.5rem; text-align: center; color: #fff; margin: auto; margin-bottom: 5rem; padding-bottom: 3.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .cul04 .icenter h3::after { position: absolute; content: ""; width: 8.5rem; height: 0.6rem; bottom: -0.3rem; left: 50%; transform: translateX(-50%); background-color: var(--dex); } .cul04 .icenter dl { position: relative; width: 100%; height: 32.8rem; } .cul04 .icenter dl dd { border-radius: 50%; position: absolute; width: 17.7rem; height: 17.7rem; border: 1px solid #fff; } .cul04 .icenter dl dd h4 { margin-top: 1rem; font-size: 24px; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 1.5rem; } .cul04 .icenter dl dd span { font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.6); } .cul04 .icenter dl dd::after { position: absolute; content: ""; width: 10.7rem; height: 1px; background-color: #fff; } .cul04 .icenter dl dd:nth-of-type(1) { left: 0%; top: 0%; } .cul04 .icenter dl dd:nth-of-type(1)::after { left: 89%; top: 91%; transform: rotate(34deg); } .cul04 .icenter dl dd:nth-of-type(2) { left: 15%; bottom: 0%; } .cul04 .icenter dl dd:nth-of-type(2)::after { left: 91%; top: 10%; transform: rotate(-32deg); } .cul04 .icenter dl dd:nth-of-type(3) { left: 30%; top: 0%; } .cul04 .icenter dl dd:nth-of-type(3)::after { left: 89%; top: 91%; transform: rotate(34deg); } .cul04 .icenter dl dd:nth-of-type(4) { left: 45%; bottom: 0%; } .cul04 .icenter dl dd:nth-of-type(4)::after { left: 79%; top: -3%; transform: rotate(-32deg); width: 9.7rem; } .cul04 .icenter dl dd:nth-of-type(5) { right: 30%; top: 0%; } .cul04 .icenter dl dd:nth-of-type(5)::after { left: 89%; top: 92%; transform: rotate(34deg); } .cul04 .icenter dl dd:nth-of-type(6) { right: 15%; bottom: 0%; } .cul04 .icenter dl dd:nth-of-type(6)::after { left: 91%; top: 10%; transform: rotate(-32deg); } .cul04 .icenter dl dd:nth-of-type(7) { right: 0%; top: 0%; } .cul04 .icenter dl dd:nth-of-type(7)::after { display: none; } .cul05 { padding: 15rem 0; } .cul05 .icenter { display: flex; align-items: center; justify-content: space-between; } .cul05 .icenter::after { position: absolute; content: ""; height: 130%; width: 80%; right: 0px; top: 50%; transform: translateY(-50%); background-color: var(--dex); } .cul05 .icenter .left { z-index: 1; width: 48.125%; } .cul05 .icenter .left::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .cul05 .icenter .left img { height: 55rem; } .cul05 .icenter .left h3 { color: #fff; z-index: 2; white-space: nowrap; } .cul05 .icenter .right { z-index: 1; width: 45.875%; padding-right: 12.2rem; } .cul05 .icenter .right dd { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; padding: 1.8rem 0; } .cul05 .icenter .right dd::before { position: absolute; content: ""; width: 2rem; height: 0.3rem; top: -0.15rem; left: 0px; background-color: #fff; } .cul05 .icenter .right dd:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .cul05 .icenter .right dd:last-child::after { position: absolute; content: ""; width: 2rem; height: 0.3rem; bottom: -0.15rem; left: 0px; background-color: #fff; } .cul05 .icenter .right dd h4 { font-size: 18px; line-height: 1; color: #fff; font-family: "arial"; margin-right: 2.5rem; } .cul05 .icenter .right dd h5 { font-size: 16px; line-height: 24px; color: #fff; } .cul06 { padding: 12rem 0; background-color: rgb(246, 247, 249); } .cul06 .icenter h3 { text-align: center; margin-bottom: 3.1rem; } .cul06 .icenter dl { display: flex; justify-content: space-between; } .cul06 .icenter dl dd { height: 49.4rem; background-color: #fff; position: relative; width: 24%; justify-content: flex-start; transition: 0.3s; border-radius: 1rem; padding-top: 7.9rem; } .cul06 .icenter dl dd::before { position: absolute; content: ""; width: 92%; height: 92%; border: 1px solid #ddd; border-radius: 1rem; left: 50%; top: 50%; transform: translate(-50%, -50%); } .cul06 .icenter dl dd:hover { padding-top: 10.5rem; background-color: var(--dex); } .cul06 .icenter dl dd:hover::before { border-color: rgba(255, 255, 255, 0.3); } .cul06 .icenter dl dd:hover h5 { display: block; } .cul06 .icenter dl dd:hover h4 { color: #fff; margin: 0 auto 3.9rem; } .cul06 .icenter dl dd:hover .logo { display: none; } .cul06 .icenter dl dd:hover .icon img { filter: grayscale(10) brightness(10); } .cul06 .icenter dl dd .logo { display: flex; align-items: center; margin: 0 auto 13rem; position: relative; position: relative; } .cul06 .icenter dl dd .logo img { transition: 0s; width: 7.4rem; margin: 0 1.4rem; } .cul06 .icenter dl dd .logo::before { content: ""; position: relative; display: block; width: 9rem; height: 1px; background-color: #999; } .cul06 .icenter dl dd .logo::after { content: ""; position: relative; display: block; width: 9rem; height: 1px; background-color: #999; } .cul06 .icenter dl dd .icon { margin-bottom: 2.4rem; } .cul06 .icenter dl dd .icon img { height: 5.4rem; width: auto; transition: 0s; } .cul06 .icenter dl dd h4 { font-size: 30px; line-height: 1; color: #333; font-weight: bold; margin-bottom: 3.9rem; } .cul06 .icenter dl dd h5 { display: none; font-size: 18px; line-height: 30px; color: #fff; } .cul07 { padding: 13rem 0; background: url("/style/img/cul07_bg.jpg"); background-size: cover; } .cul07 .top h3 { line-height: 60px; margin-bottom: 2.8rem; } .cul07 .top p { width: 114.5rem; font-size: 22px; line-height: 40px; color: #666; margin-bottom: 6.9rem; } .cul07 .bot { overflow: hidden; position: relative; width: calc(100% - (100% - 1600px) / 2); left: calc((100% - 1600px) / 2); margin-bottom: 6rem; } .cul07 .bot .imgbox { overflow: hidden; border-radius: 1rem; position: relative; z-index: 1; } .cul07 .bot .imgbox img { overflow: hidden; border-radius: 1rem; position: relative; z-index: 1; } .cul07 .bot .imgbox img { height: 38.9rem; } .cul07 .dao { justify-content: space-between; display: flex; align-items: center; } .cul07 .dao .cul07Swiper-pagination { position: unset; height: 0.5rem; width: 89.0625%; background-color: rgb(232, 232, 232); border-radius: 1rem; } .cul07 .dao .cul07Swiper-pagination .swiper-pagination-progressbar-fill { background: var(--dex); border-radius: 1rem; } .cul07 .dao .nav { width: fit-content; display: flex; align-items: center; height: fit-content; } .cul07 .dao .nav .fa { margin-top: 0px; position: unset; width: 5.8rem; height: 5.8rem; border-radius: 50%; background-color: rgb(232, 232, 232); color: #666666; font-size: 4rem; background-image: none; display: flex; justify-content: center; align-items: center; flex-direction: column; background-size: unset; margin-right: 1rem; } .cul07 .dao .nav .fa:hover { background-color: var(--dex); color: #fff; } .cul07 .dao .nav .fa:last-child { margin-right: 0px; } .cul08 { background: url("/style/img/cul08_bg.jpg"); background-size: cover; padding: 18rem 0; } .cul08::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .cul08 .icenter { position: relative; z-index: 1; display: flex; justify-content: space-between; } .cul08 .icenter h3 { color: #fff; height: fit-content; line-height: 60px; } .cul08 .icenter dl { height: 59.2rem; overflow-y: scroll; /* 杞ㄩ亾 */ /* 婊戝潡 */ width: 65.1875%; } .cul08 .icenter dl::-webkit-scrollbar { width: 0.8rem; } .cul08 .icenter dl::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.1); } .cul08 .icenter dl::-webkit-scrollbar-thumb { background-color: var(--dex); } .cul08 .icenter dl dd { padding: 3rem 0; border-top: 1px solid rgba(255, 255, 255, 0.5); font-size: 18px; line-height: 28px; color: #fff; font-weight: bold; } .cul08 .icenter dl dd:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .cul09 { padding: 12.5rem 0; } .cul09 h3 { text-align: center; } .cul09 p { font-size: 22px; line-height: 40px; color: #666; text-align: center; width: 115rem; margin: 2.5rem 0 4rem; } .app01_1 { padding: 15rem 0; } .app01_1 .icenter { display: flex; justify-content: space-between; } .app01_1 .icenter h3 { width: fit-content; position: relative; padding-bottom: 3rem; line-height: 6rem; height: fit-content; } .app01_1 .icenter h3::after { position: absolute; content: ""; width: 8rem; height: 0.3rem; bottom: 0rem; left: 0%; background-color: var(--dex); } .app01_1 .icenter p { width: 62.875%; font-size: 18px; line-height: 30px; color: #666; } .app01_2 { height: 69.7rem; background: url("/style/img/ys_bj1.jpg"); background-size: cover; } .app02_2 { background: url("/style/img/app02_2.jpg"); background-size: cover; } .app01_3 { padding: 15rem 0 13rem; } .app01_3 .icenter dd { margin-bottom: 10rem; display: flex; justify-content: space-between; } .app01_3 .icenter dd:nth-of-type(2n) { flex-flow: row-reverse; } .app01_3 .icenter dd .text { width: 29.0625%; } .app01_3 .icenter dd .text img { height: 7.9rem; width: auto; } .app01_3 .icenter dd .text h4 { font-size: 30px; line-height: 1; color: #333; font-weight: bold; margin: 2.4rem 0 3.3rem; } .app01_3 .icenter dd .text p { font-size: 18px; line-height: 30px; color: #666; margin-bottom: 3.6rem; } .app01_3 .icenter dd .text h5 { display: flex; align-items: center; position: relative; } .app01_3 .icenter dd .text h5::after { position: relative; content: ""; width: 4.9rem; height: 1px; background-color: var(--dex); margin-left: 1.5rem; } .app01_3 .icenter dd .text h5 span { font-size: 18px; line-height: 30px; color: #666; } .app01_3 .icenter dd .imgbox { width: 62.8125%; } .app01_3 .icenter dd .imgbox img { height: 42rem; } .app03_1 { padding: 10rem 0 18rem; background: url("/style/img/app03_1_bg.jpg"); background-size: cover; } .app03_1 .icenter .top { margin: auto; display: flex; align-items: center; width: fit-content; margin-bottom: 10.5rem; } .app03_1 .icenter .top .more { height: 5.1rem; margin-right: 1.1rem; width: 24.5rem; background-color: transparent; } .app03_1 .icenter .top .more span { color: var(--dex); } .app03_1 .icenter .top .more::after { color: #fff; } .app03_1 .icenter .top .more:hover { background-color: var(--dex); } .app03_1 .icenter .top .more.active { background-color: var(--dex); } .app03_1 .icenter .top .more.active span { color: #fff; } .app03_1 .icenter .top .more.active::after { color: #fff; } .app03_1 .icenter .bot h3 { position: relative; width: 67.3rem; text-align: center; margin: auto; margin-bottom: 4rem; padding-bottom: 3.6rem; border-bottom: 1px solid #bdb8b8; } .app03_1 .icenter .bot h3::after { position: absolute; content: ""; width: 6.5rem; height: 0.5rem; bottom: -0.25rem; left: 50%; transform: translateX(-50%); background-color: var(--dex); } .app03_1 .icenter .bot p { font-size: 18px; line-height: 30px; color: #666; text-align: center; width: 119.7rem; margin-bottom: 6.1rem; } .app03_1 .icenter .bot a { height: 5.1rem; width: 24.6rem; background-color: transparent; } .app03_1 .icenter .bot a span { color: var(--dex); position: relative; left: -1rem; } .app03_1 .icenter .bot a::after { color: #fff; left: -1rem; } .app03_1 .icenter .bot a:hover { background-color: var(--dex); } .app03_1 .icenter .bot a:hover img { filter: grayscale(10) brightness(10); } .app03_1 .icenter .bot a img { position: absolute; width: 1.8rem; right: 6.5rem; top: 50%; transform: translateY(-50%); } .app03_2 { padding: 15rem 0; } .app03_2 .icenter h3 { text-align: center; margin-bottom: 2.6rem; } .app03_2 .icenter dl { display: flex; justify-content: space-between; } .app03_2 .icenter dl dd { width: 32%; position: relative; } .app03_2 .icenter dl dd:hover .imgbox img { transform: scale(1.1); } .app03_2 .icenter dl dd .imgbox img { height: 34.8rem; } .app03_2 .icenter dl dd .text { font-size: 18px; line-height: 1; color: #fff; text-align: center; width: 100%; height: 6.8rem; line-height: 6.8rem; position: absolute; bottom: 0px; left: 0px; background-color: rgba(10, 46, 112, 0.6); } .app03_3 { padding: 13.3rem 0 15rem; background: url("/style/img/app03_3_bg.jpg"); background-size: cover; } .app03_3 .icenter h3 { color: #fff; text-align: center; margin-bottom: 12rem; } .app03_3 .icenter dl { display: flex; justify-content: space-between; } .app03_3 .icenter dl dd { width: 30%; padding-right: 6.9rem; margin-right: 6.9rem; border-right: 1px solid rgba(255, 255, 255, 0.5); } .app03_3 .icenter dl dd:last-child { padding-right: 0px; margin-right: 0px; border-right: 0px; } .app03_3 .icenter dl dd img { height: 5.7rem; width: auto; } .app03_3 .icenter dl dd h4 { font-size: 20px; line-height: 1; color: #fff; margin: 2.2em 0 1.1rem; } .app03_3 .icenter dl dd p { font-size: 18px; line-height: 30px; color: #fff; } .app03_4 { padding: 14.4rem 0; background: url("/style/img/app03_4_bg.jpg"); background-size: cover; } .app03_4 .icenter .g { margin-bottom: 4.2rem; display: flex; justify-content: space-between; } .app03_4 .icenter .g:last-child { margin-bottom: 0px; } .app03_4 .icenter .left { width: fit-content; } .app03_4 .icenter .left h3 { font-size: 38px; line-height: 50px; color: #333; font-weight: bold; margin-bottom: 3.8rem; } .app03_4 .icenter .left img { width: 28.2rem; } .app03_4 .icenter .right { width: 121.6rem; display: flex; } .app03_4 .icenter .right dd { position: relative; margin-right: 8rem; width: 22.8rem; height: 22.8rem; border-radius: 50%; border: 1px solid var(--dex); } .app03_4 .icenter .right dd:last-child .arrow { display: none; } .app03_4 .icenter .right dd span { font-size: 18px; line-height: 1; color: var(--dex); font-weight: bold; text-align: center; } .app03_4 .icenter .right dd h4 { height: 3.7rem; width: 14.5rem; font-size: 18px; line-height: 26px; color: #333; margin: 1.8rem 0 1.7rem; text-align: center; } .app03_4 .icenter .right dd img { height: 5.8rem; width: auto; } .app03_4 .icenter .right dd .arrow { position: absolute; right: -7rem; top: 50%; transform: translateY(-50%); width: 3.2rem; } .app03_5 { padding: 15.6rem 0; } .app03_5 .icenter .swiper { overflow: hidden; } .app03_5 .icenter .g { margin-bottom: 12.9rem; } .app03_5 .icenter .g:last-child { margin-bottom: 0px; } .app03_5 .icenter .g .top { margin-bottom: 3.4rem; display: flex; justify-content: space-between; align-items: center; } .app03_5 .icenter .g .top .nav { width: fit-content; display: flex; align-items: center; height: fit-content; } .app03_5 .icenter .g .top .nav .fa { margin-top: 0px; position: unset; width: 4.1rem; height: 4.1rem; border-radius: 50%; border: 1px solid var(--dex); color: var(--dex); font-size: 3.6rem; background-image: none; display: flex; justify-content: center; align-items: center; flex-direction: column; background-size: unset; margin-right: 1rem; } .app03_5 .icenter .g .top .nav .fa:hover { background-color: var(--dex); color: #fff; } .app03_5 .icenter .g .top .nav .fa:last-child { margin-right: 0px; } .app03_5 .icenter .g dd img { height: 23.8rem; } .app03_5 .icenter .g dd span { margin-top: 1.9rem; font-size: 24px; line-height: 1; color: #333; } .app03_6 { padding: 13rem 0; background: url("/style/img/app03_6_bg.jpg"); background-size: cover; background-attachment: fixed; } .app03_6::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .app03_6 .icenter { display: flex; justify-content: space-between; align-items: center; z-index: 1; } .app03_6 .icenter .left h4 { font-size: 36px; line-height: 44px; color: #fff; font-weight: bold; margin-bottom: 3.8rem; } .app03_6 .icenter .left .text { display: flex; align-items: center; } .app03_6 .icenter .left .text .le { padding-right: 2.4rem; margin-right: 1.8rem; border-right: 1px solid rgba(255, 255, 255, 0.5); } .app03_6 .icenter .left .text .le .t { width: fit-content; margin-bottom: 3.2rem; display: flex; align-items: center; } .app03_6 .icenter .left .text .le .t img { height: 3rem; margin-right: 0.8rem; width: auto; } .app03_6 .icenter .left .text .le .t span { font-size: 20px; line-height: 1; color: #fff; } .app03_6 .icenter .left .text .le .b h4 { font-size: 22px; line-height: 1; color: #fff; margin-bottom: 0.8rem; } .app03_6 .icenter .left .text .le .b h5 { font-size: 26px; line-height: 1; color: #fff; font-weight: bold; font-family: "arial"; } .app03_6 .icenter .left .text .ri { width: 13.2rem; height: 13.2rem; border: 1px solid rgba(255, 255, 255, 0.5); } .app03_6 .icenter .left .text .ri img { height: 11.1rem; width: auto; } .app03_6 .icenter .right a { width: 20.7rem; display: none; } .app03-3_2 { padding: 15rem 0 18rem; } .app03-3_2 .top { margin-bottom: 18.8rem; } .app03-3_2 .top h3 { text-align: center; margin-bottom: 5.1rem; } .app03-3_2 .top .top_b { position: relative; width: fit-content; margin: auto; } .app03-3_2 .top .top_b .fa { margin-top: 0px; width: 4.5rem; height: 4.5rem; border-radius: 50%; background-color: transparent; font-size: 3.5rem; background-image: none; color: var(--dex); border: 1px solid var(--dex); display: flex; justify-content: center; align-items: center; flex-direction: column; background-size: unset; } .app03-3_2 .top .top_b .fa:hover { background-color: var(--dex); color: #fff; } .app03-3_2 .top .top_b .fa.fa-angle-left { left: -4%; } .app03-3_2 .top .top_b .fa.fa-angle-right { right: -4%; } .app03-3_2 .top .top_b .top_b_sha { padding: 1.5rem 0; width: 1630px; margin: auto; overflow: hidden; } .app03-3_2 .top .top_b .top_b_sha .box { box-shadow: 0 0 10px #ddd; padding: 4.5rem; } .app03-3_2 .top .top_b .top_b_sha .box:hover .imgbox img { transform: scale(1.1); } .app03-3_2 .top .top_b .top_b_sha .box:hover .imgbox::after { width: 100%; } .app03-3_2 .top .top_b .top_b_sha .box:hover .text h4 { color: var(--dex); } .app03-3_2 .top .top_b .top_b_sha .box .imgbox { padding-bottom: 5.2rem; margin-bottom: 2.9rem; border-bottom: 1px solid #ddd; overflow: unset; } .app03-3_2 .top .top_b .top_b_sha .box .imgbox img { margin: auto; height: 15.3rem; width: auto; } .app03-3_2 .top .top_b .top_b_sha .box .imgbox::after { width: 0%; height: 1px; bottom: 0px; left: 0px; content: ""; position: absolute; background-color: var(--dex); transition: 0.3s; } .app03-3_2 .top .top_b .top_b_sha .box .text h4 { font-size: 26px; line-height: 1; color: #333; font-weight: bold; height: 52px;} .app03-3_2 .top .top_b .top_b_sha .box .text p { font-size: 16px; line-height: 26px; color: #333; margin: 2rem 0 2.9rem; } .app03-3_2 .top .top_b .top_b_sha .box .text h5 { font-size: 16px; line-height: 1; color: var(--dex); display: flex; align-items: center; } .app03-3_2 .top .top_b .top_b_sha .box .text h5 span { font-size: 16px; line-height: 1; color: var(--dex); position: relative; left: 0px; transition: 0.3s; } .app03-3_2 .bot { height: 65.8rem; display: flex; justify-content: space-between; } .app03-3_2 .bot .left { position: relative; height: 100%; width: 64.5625%; } .app03-3_2 .bot .left .imgbox { height: 100%; } .app03-3_2 .bot .left .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .app03-3_2 .bot .left .imgbox img { height: 100%; } .app03-3_2 .bot .left .text { z-index: 1; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 72rem; } .app03-3_2 .bot .left .text h3 { color: #fff; margin-bottom: 2.7rem; } .app03-3_2 .bot .left .text p { font-size: 18px; line-height: 30px; color: #fff; } .app03-3_2 .bot .right { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 33.5%; } .app03-3_2 .bot .right .g { position: relative; height: 48%; } .app03-3_2 .bot .right .g .imgbox { height: 100%; } .app03-3_2 .bot .right .g .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.3); position: absolute; left: 0; bottom: 0px; } .app03-3_2 .bot .right .g .imgbox img { height: 100%; } .app03-3_2 .bot .right .g h4 { z-index: 1; position: absolute; bottom: 2.6rem; left: 3.9rem; font-size: 28px; line-height: 1; color: #fff; font-weight: bold; } .icenter2 { width: 1200px; position: relative; margin: auto; } .app03Bannerr { position: relative; } .app03Bannerr .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.6); position: absolute; left: 0; bottom: 0px; } .app03Bannerr .imgbox img { height: 49.6rem; } .app03Bannerr h3 { color: #fff; } .app03-4_1 { padding: 11.7rem 0 14.2rem; } .app03-4_1 .icenter2 { display: flex; justify-content: space-between; align-items: center; } .app03-4_1 .icenter2 .imgbox { width: 43.1666666667%; } .app03-4_1 .icenter2 .imgbox img { height: 37.2rem; width: auto; margin: auto; } .app03-4_1 .icenter2 .text { width: 46.75%; } .app03-4_1 .icenter2 .text h4 { font-size: 40px; line-height: 1; color: #333; font-weight: bold; padding-bottom: 2.9rem; margin-bottom: 2.8rem; border-bottom: 1px solid #ddd; position: relative; } .app03-4_1 .icenter2 .text h4::after { position: absolute; content: ""; width: 6.5rem; height: 1px; bottom: -0.15rem; left: 0%; background-color: var(--dex); } .app03-4_1 .icenter2 .text p { font-size: 18px; line-height: 30px; color: #666; margin-bottom: 5rem; } .app03-4_1 .icenter2 .text a { height: 4.4rem; width: 17.6rem; } .app03-4_1 .icenter2 .text a span { position: relative; left: -1rem; } .app03-4_1 .icenter2 .text a::after { left: -1rem; } .app03-4_1 .icenter2 .text a:hover { background-color: transparent; } .app03-4_1 .icenter2 .text a:hover img { filter: none; } .app03-4_1 .icenter2 .text a img { filter: grayscale(10) brightness(10); position: absolute; width: 1.8rem; right: 4rem; top: 50%; transform: translateY(-50%); } .app03-4_2 { padding: 11.5rem 0 12.2rem; background: url("/style/img/app03-4_2bg.jpg"); background-size: cover; } .app03-4_2 .icenter2 h3 { text-align: center; margin-bottom: 3.1rem; } .app03-4_2 .icenter2 dl { display: flex; justify-content: space-between; } .app03-4_2 .icenter2 dl dd { width: 19%; border-radius: 1rem; background-color: #fff; padding: 3rem; } .app03-4_2 .icenter2 dl dd:hover { background-color: var(--dex); } .app03-4_2 .icenter2 dl dd:hover .icon { background-color: var(--dex); } .app03-4_2 .icenter2 dl dd:hover .icon::before { background-color: #fff; border-color: #fff; } .app03-4_2 .icenter2 dl dd:hover h4 { color: #fff; } .app03-4_2 .icenter2 dl dd:hover h4::after { background-color: #fff; } .app03-4_2 .icenter2 dl dd:hover p { color: #fff; } .app03-4_2 .icenter2 dl dd .icon { position: relative; margin-bottom: 2.7rem; width: 6.9rem; height: 6.9rem; background-color: #fff; border-radius: 50%; z-index: 1; } .app03-4_2 .icenter2 dl dd .icon img { width: 3.2rem; z-index: 1; transition: 0s; } .app03-4_2 .icenter2 dl dd .icon::before { border-radius: 50%; width: 130%; height: 130%; border: 1px dashed #ddd; position: absolute; content: ""; background-color: rgb(248, 248, 248); } .app03-4_2 .icenter2 dl dd h4 { position: relative; font-size: 19px; line-height: 1; color: #333; font-weight: bold; padding-bottom: 1.2rem; margin-bottom: 1rem; } .app03-4_2 .icenter2 dl dd h4::after { position: absolute; content: ""; width: 2.5rem; height: 0.3rem; bottom: 0rem; left: 50%; transform: translateX(-50%); background-color: var(--dex); } .app03-4_2 .icenter2 dl dd p { font-size: 14px; line-height: 24px; color: #666; text-align: center; } .app03-4_3 { padding: 11.8rem 0 13rem; } .app03-4_3 .icenter2 h3 { text-align: center; margin-bottom: 3.1rem; } .app03-4_4 .icenter2 .right a { margin-bottom: 2.4rem; } .app03-4_4 .icenter2 .right a:last-child { margin-bottom: 0px; } .app04_1 { padding: 14.6rem 0; background: url("/style/img/app04_1_bg.jpg"); background-size: cover; } .app04_1 .icenter { display: flex; justify-content: space-between; } .app04_1 .icenter .left { width: 29.9375%; } .app04_1 .icenter .left h3 { line-height: 60px; margin-bottom: 3rem; } .app04_1 .icenter .left a { margin-bottom: 15rem; background-color: transparent; } .app04_1 .icenter .left a span { color: var(--dex); } .app04_1 .icenter .left a::after { color: #fff; } .app04_1 .icenter .left a:hover { background-color: var(--dex); } .app04_1 .icenter .left .bot dd { margin-bottom: 4rem; } .app04_1 .icenter .left .bot dd h5 { display: flex; margin-bottom: 1.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #ddd; align-items: flex-end; } .app04_1 .icenter .left .bot dd h5 strong { font-size: 70px; line-height: 1; color: var(--dex); } .app04_1 .icenter .left .bot dd h5 sup { font-size: 30px; line-height: 1; color: var(--dex); position: relative; top: -3px; } .app04_1 .icenter .left .bot dd span { font-size: 18px; line-height: 1; color: #666; } .app04_1 .icenter .right { width: 62.8125%; } .app04_1 .icenter .right h4 { font-size: 28px; line-height: 1; color: #333; font-weight: bold; margin-bottom: 2.8rem; } .app04_1 .icenter .right p { font-size: 18px; line-height: 30px; color: #666; margin-bottom: 6.4rem; } .app04_1 .icenter .right img { height: 45.6rem; } .app04_2 { background: rgb(246, 247, 249); } .about03_1 { padding: 13rem 0; } .about03_1 .icenter h3 { text-align: center; margin-bottom: 5rem; } .about04 { padding: 15.2rem 0 23.5rem; background: url("/style/img/about04.jpg"); background-size: cover; background-attachment: fixed; } .about04 .icenter h3 { text-align: center; margin-bottom: 2.5rem; } .about04 .icenter dl { width: 73.8rem; padding: 17rem 0 9.5rem; display: flex; justify-content: center; flex-direction: column; margin: auto; position: relative; } .about04 .icenter dl .line { position: absolute; content: ""; height: 0%; background-color: var(--dex); left: 50%; transform: translateX(-50%); width: 1px; top: 0px; max-height: 100%; } .about04 .icenter dl::before { position: absolute; content: ""; left: 50%; top: 0px; width: 1px; height: 100%; background-color: #ddd; transform: translateX(-50%); } .about04 .icenter dl::after { position: absolute; content: ""; width: 2rem; height: 2rem; border-radius: 50%; left: 50%; top: 0px; border: 3px solid var(--dex); background-color: #fff; transform: translateX(-50%); } .about04 .icenter dl dd { height: fit-content; position: relative; margin-bottom: 15rem; width: 100%; height: 10.5rem; position: relative; display: flex; justify-content: space-between; align-items: center; } .about04 .icenter dl dd::after { transition: 0.1s; position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: var(--dex); } .about04 .icenter dl dd:last-child { margin-bottom: 0px; } .about04 .icenter dl dd:nth-of-type(2n) { flex-flow: row-reverse; } .about04 .icenter dl dd:nth-of-type(2n) .num { text-align: end; } .about04 .icenter dl dd:nth-of-type(2n) .text { left: auto; right: 48.7rem; justify-content: flex-end; } .about04 .icenter dl dd .num { position: relative; width: 50%; font-size: 104px; line-height: 1; color: #333; font-family: "arial"; font-weight: bold; text-align: start; } .about04 .icenter dl dd .text { position: absolute; width: 48.1rem; font-size: 18px; line-height: 32px; color: #666; left: 48.7rem; top: 50%; transform: translateY(-50%); height: 22rem; overflow-y: auto; display: flex; align-items: center; /* 瀹氫箟婊氬姩鏉$殑瀹藉害鍜岄鑹 */ /* 瀹氫箟婊氬姩鏉¤建閬撶殑鑳屾櫙鑹 */ /* 瀹氫箟婊氬姩鏉$殑婊戝潡棰滆壊 */ } .about04 .icenter dl dd.on .num{color: var(--dex);} .about04 .icenter dl dd.on::after{ border: 3px solid var(--dex); background-color: #fff; width: 2rem; height: 2rem;} .about04 .icenter dl dd .text::-webkit-scrollbar { width: 3px; } .about04 .icenter dl dd .text::-webkit-scrollbar-track { background-color: #f1f1f1; } .about04 .icenter dl dd .text::-webkit-scrollbar-thumb { background-color: var(--dex); } .about04 .icenter .load { display: flex; align-items: center; margin: 15.9rem auto 0; width: fit-content; } .about04 .icenter .load span { width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--dex); margin-right: 0.7rem; } .about04 .icenter .load span:nth-of-type(1) { animation: load_span 1s 0.2s linear infinite; } .about04 .icenter .load span:nth-of-type(2) { animation: load_span 1s 0.3s linear infinite; } .about04 .icenter .load span:nth-of-type(3) { animation: load_span 1s 0.4s linear infinite; } .about04 .icenter .load span:nth-of-type(4) { animation: load_span 1s 0.5s linear infinite; } .about04 .icenter .load span:nth-of-type(5) { animation: load_span 1s 0.6s linear infinite; } .about04 .icenter .load span:nth-of-type(6) { animation: load_span 1s 0.7s linear infinite; } .about04 .icenter .load span:last-child { margin-right: 0px; } @keyframes load_span { 0% { opacity: 1; } 100% { opacity: 0; } } .about04 { overflow: unset; } .about04 .icenter {z-index: 2;} .about04 .bgbox{ position: sticky; position: -webkit-sticky; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; } .about04 .bgbox .img1{ position: absolute; width: 30rem; right: 6%; top: 12rem;animation: xb1 5.9s linear infinite; -webkit-animation: xb1 5.9s linear infinite; } .about04 .bgbox .img2{ position: absolute; width: 8rem; right: 20%; top: 42rem;animation: xb1 6.1s linear infinite; -webkit-animation: xb1 6.1s linear infinite; } @keyframes xb1 { 25% { transform: translate(7%, -7%); } 50% { transform: translate(14%, 0%); } 75% { transform: translate(7%, 7%); } 100% { transform: translate(0%, 0%); } } @-webkit-keyframes xb1 { 0% { transform: translate(0%, 0%); } 25% { transform: translate(7%, -7%); } 50% { transform: translate(14%, 0%); } 75% { transform: translate(7%, 7%); } 100% { transform: translate(0%, 0%); } } .about02_1 { padding: 18rem 0 15.7rem; } .about02_1 .icenter { display: flex; justify-content: space-between; } .about02_1 .icenter .left { width: 40.3125%; } .about02_1 .icenter .left p { font-size: 18px; line-height: 30px; color: #666; margin: 2.7rem 0 6.5rem; } .about02_1 .icenter .left .tips { width: fit-content; margin-left: auto; display: flex; align-items: center; } .about02_1 .icenter .left .tips span { width: 6.8rem; height: 1px; background-color: var(--dex); margin-right: 1.6rem; } .about02_1 .icenter .left .tips img { width: 10rem; } .about02_1 .icenter .right { width: 51.625%; } .about02_1 .icenter .right img { height: 54.4rem; } .about02_2 { padding: 20rem 0; background: url("/style/img/about02_2_bg.jpg"); background-size: cover; background-attachment: fixed; } .about02_2::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 14, 49, 0.6); position: absolute; left: 0; bottom: 0px; } .about02_2 .icenter { z-index: 1; } .about02_2 .icenter h3 { text-align: center; color: #fff; line-height: 60px; margin-bottom: 4.2rem; } .about02_2 .icenter p { font-size: 18px; line-height: 30px; color: #fff; text-align: center; width: 96rem; } .about02_3 { padding: 18rem 0; background: url("/style/img/about02_3_bg.jpg"); background-size: cover; } .about02_3 h3 { text-align: center; margin-bottom: 4.2rem; } .about02_3 dl { display: flex; flex-flow: wrap; } .about02_3 dl dd { margin-bottom: 2.66%; position: relative; width: 23%; margin-right: 2.66%; } .about02_3 dl dd:nth-of-type(4n) { margin-right: 0px; } .about02_3 dl dd .imgbox img { height: 53rem; } .about02_3 dl dd:hover .imgbox img {transform: scale(1.1);} .about02_3 dl dd .text { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 2.2rem 2.7rem; background-color: rgba(33, 76, 164, 0.6); display: block; } .about02_3 dl dd .text h4 { font-size: 20px; line-height: 24px; color: #fff; font-weight: bold; margin-bottom: 16px; } .about02_3 dl dd .text h5 { font-size: 16px; line-height: 24px; color: #fff; min-height: 50px;} .about02_3 .load { display: flex; align-items: center; margin: 4rem auto 0; width: fit-content; } .about02_3 .load span { width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--dex); margin-right: 0.7rem; } .about02_3 .load span:nth-of-type(1) { animation: load_span 1s 0.2s linear infinite; } .about02_3 .load span:nth-of-type(2) { animation: load_span 1s 0.3s linear infinite; } .about02_3 .load span:nth-of-type(3) { animation: load_span 1s 0.4s linear infinite; } .about02_3 .load span:nth-of-type(4) { animation: load_span 1s 0.5s linear infinite; } .about02_3 .load span:nth-of-type(5) { animation: load_span 1s 0.6s linear infinite; } .about02_3 .load span:nth-of-type(6) { animation: load_span 1s 0.7s linear infinite; } .about02_3 .load span:last-child { margin-right: 0px; } .about01_1 { padding: 13.4rem 0 45.6rem; margin-bottom: -33rem; background: url("/style/img/about01_1_bg.jpg"); background-size: cover; } .about01_1 .icenter { display: flex; justify-content: space-between; } .about01_1 .icenter h3 { width: fit-content; position: relative; height: fit-content; } .about01_1 .icenter h3::after { position: absolute; top: 50%; transform: translateY(-50%); right: -9.8rem; width: 6.7rem; height: 0.6rem; content: ""; background-color: black } .about01_1 .icenter .text { width: 74.25%; } .about01_1 .icenter .text h4 { display: flex; align-items: center; } .about01_1 .icenter .text h4 span { font-size: 46px; line-height: 1; color: #333; font-weight: bold; } .about01_1 .icenter .text h4 span:nth-of-type(1) { color: black} .about01_1 .icenter .text h5 { font-size: 26px; line-height: 1; color: #333; font-weight: bold; margin: 2.5rem 0 4.8rem; } .about01_1 .icenter .text p { font-size: 18px; line-height: 30px; color: #666; } /* vi_box */ .vi_box { top: 0px; left: 0px; display: none; position: fixed; width: 100%; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.8); } .vi_box .box { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .vi_box .box video { width: 100%; height: auto; position: relative; object-fit: cover; display: block; } .vi_box .box .video { position: relative; width: 60%; height: auto; } .vi_box .box .video img.close { cursor: pointer; width: auto; position: absolute; right: -40px; top: -40px; transition: all 0.3s; pointer-events: painted; } .vi_box .box .video .close:hover { transform: rotate(135deg); } .about01_2 { padding: 0rem 0 36.6rem; } .about01_2 .bg { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 80%; } .about01_2 .bg img { height: 100%; } .about01_2 .icenter .top { position: relative; overflow: hidden; width: 100%; margin-bottom: 17.4rem; } .about01_2 .icenter .bot { display: flex; justify-content: space-between; } .about01_2 .icenter .bot .left { width: 34%; } .about01_2 .icenter .bot .left h4 { font-size: 36px; line-height: 50px; color: #fff; } .about01_2 .icenter .bot .left p { font-size: 20px; line-height: 30px; color: #fff; margin: 5.3rem 0 7.5rem; } .about01_2 .icenter .bot .right { width: 52.75%; display: flex; flex-flow: wrap; justify-content: space-between; } .about01_2 .icenter .bot .right dd { width: 48%; margin-bottom: 8.8rem; } .about01_2 .icenter .bot .right dd:nth-of-type(3), .about01_2 .icenter .bot .right dd:nth-of-type(4) { margin-bottom: 0px; } .about01_2 .icenter .bot .right img { height: 4.9rem; width: auto; } .about01_2 .icenter .bot .right h5 { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.4); display: flex; align-items: flex-end; margin-bottom: 2.5rem; } .about01_2 .icenter .bot .right h5 strong { font-size: 80px; line-height: 1; color: #fff; font-weight: bold; margin-right: 1rem; } .about01_2 .icenter .bot .right h5 sup { font-size: 24px; line-height: 1; color: #fff; } .about01_2 .icenter .bot .right h6 { font-size: 24px; line-height: 1; color: rgba(255, 255, 255, 0.7); } .about01_2 .top video { width: 100%; height: 58.4rem; position: relative; object-fit: cover; } .about01_2 .top .bo { cursor: pointer; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; } .about01_2 .top .bo img { width: 7.3rem; } .about01_2 .mask { -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: 1; } .about01_2 .top .mask:before { position: relative; content: ""; display: block; margin-top: 100%; } .about01_2 .top .mask:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .about01_2 .top:hover .mask { -webkit-animation: anim-out 1s; animation: anim-out 1s; } .about01_2 .top:hover .mask:after { -webkit-animation: anim-out-pseudo 1s; animation: anim-out-pseudo 1s; } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(255, 255, 255, 0.5); } 100% { background: 0 0; } } @keyframes anim-out-pseudo { 0% { background: rgba(255, 255, 255, 0.5); } 100% { background: 0 0; } } .about01_3 { padding: 13.7rem 0 13.4rem; } .about01_3 .bg { width: calc(100% - (100% - 1600px) / 2); position: absolute; left: 0px; bottom: 0px; height: 62.9rem; } .about01_3 .wen { font-size: 26.4rem; line-height: 171px; color: #666; opacity: 0.05; position: absolute; left: 3%; top: 3rem; font-weight: bold; z-index: 3; text-transform: uppercase; } .about01_3 .top { margin-bottom: 10rem; } .about01_3 .top h4 { font-size: 26px; line-height: 1; color: #666; margin: 2.5rem 0 4.3rem; } .about01_3 .top p { font-size: 18px; line-height: 30px; color: #666; } .about01_3 .bot { left: calc((100% - 1600px) / 2); width: calc(100% - (100% - 1600px) / 2); position: relative; height: 71.8rem; display: flex; } .about01_3 .bot .imgbox { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; } .about01_3 .bot .imgbox img {height: 100%;} .about01_3 .bot dd { position: relative; width: 25%; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.5); position: relative; } .about01_3 .bot dd:hover .text img {transform: rotateY(180deg);} .about01_3 .bot dd:last-child { border-right: 0px; } .about01_3 .bot dd .text img { height: 6.8rem; width: auto; } .about01_3 .bot dd .text .line { width: 1px; height: 4.8rem; margin: 2rem 0; background-color: rgba(255, 255, 255, 0.4); } .about01_3 .bot dd .text h4 { font-size: 30px; line-height: 1; color: #fff; font-weight: bold; margin-bottom: 1.6rem; } .about01_3 .bot dd .text h5 { font-size: 18px; line-height: 1; color: #fff; } .about01_4 { padding: 13.5rem 0 15.8rem; } .about01_4 h3 { text-align: center; margin-bottom: 2.7rem; } .about01_4 .content { width: fit-content; margin: auto; position: relative; } .about01_4 .content .fa { margin-top: 0px; width: 4.5rem; height: 4.5rem; border-radius: 50%; font-size: 3.5rem; background-image: none; color: var(--dex); display: flex; justify-content: center; align-items: center; flex-direction: column; background-size: unset; border: 1px solid var(--dex); top: 40%; } .about01_4 .content .fa:hover { background-color: #fff; } .about01_4 .content .fa.fa-angle-left { left: -4%; } .about01_4 .content .fa.fa-angle-right { right: -4%; } .about01_4 .content .content_s { width: 1630px; position: relative; margin: auto; overflow: hidden; } .about01_4 .content .swiper { padding: 1.5rem 0; } .about01_4 .content .swiper .box .container { box-shadow: 0 0 14px rgba(0, 0, 0, 0.15); position: relative; } .about01_4 .content .swiper .box .container .imgbox img { height: 21.9rem; width: auto; } .about01_4 .content .swiper .box .container .bg { width: 100%; } .about01_4 .content .swiper .box span { font-size: 20px; line-height: 1; color: #333; text-align: center; margin-top: 2.5rem; } .about05_1 { padding: 12rem 0 0; position: relative; } .about05_1 .icenter { position: relative; } .about05_1 .icenter .bg { position: absolute; left: -12rem; top: -2rem; } .about05_1 .icenter .bg img { width: 77.3rem; } .about05_1 .icenter .top { margin-bottom: 9rem; } .about05_1 .icenter .top h3 { margin-bottom: 2rem; padding-bottom: 3rem; position: relative; } .about05_1 .icenter .top h3::after { position: absolute; content: ""; left: 0px; bottom: 0px; width: 10.2rem; height: 0.4rem; background-color: var(--dex); } .about05_1 .icenter .top p { font-size: 20px; line-height: 40px; color: #666; width: 127rem; } .about05_1 .bot { width: calc(100% - (100% - 1600px) / 2); left: calc((100% - 1600px) / 2); display: flex; justify-content: flex-end; position: relative; } .about05_1 .bot .text { background-color: #fff; z-index: 1; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 58.6rem; height: 50.2rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .about05_1 .bot .text .g { width: 40rem; display: flex; align-items: flex-end; } .about05_1 .bot .text .g:nth-of-type(1) { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid #ddd; } .about05_1 .bot .text .g .icon { position: relative; margin-right: 3.3rem; width: 7.4rem; height: 7.4rem; border-radius: 50%; background-color: var(--dex); } .about05_1 .bot .text .g .icon::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ""; width: 120%; height: 120%; border-radius: 50%; border: 1px dashed var(--dex); } .about05_1 .bot .text .g .icon img { width: 3.6rem; } .about05_1 .bot .text .g .num { margin-right: 1.8rem; } .about05_1 .bot .text .g .num h5 { display: flex; align-items: flex-end; margin-bottom: 1.6rem; } .about05_1 .bot .text .g .num h5 strong { font-size: 50px; line-height: 1; color: var(--dex); margin-right: 1rem; } .about05_1 .bot .text .g .num h5 span { font-size: 20px; line-height: 1; color: var(--dex); } .about05_1 .bot .text .g .num img { height: 0.6rem; } .about05_1 .bot .text .g h6 { font-size: 16px; line-height: 1; color: #666; } .about05_1 .bot .imgbox { width: 89.9375%; } .about05_1 .bot .imgbox img { height: 75rem; } .about05_2 { padding: 16rem 0 13.7rem; position: relative; overflow: hidden; } .about05_2 .swiper-slide { transition: 0.3s; } .about05_2 .swiper-slide:hover { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .about05_2 .swiper { padding-top: 5rem; } .about05_2 .top p { width: 90rem; text-align: center; font-size: 19px; color: #666666; line-height: 3rem; margin-top: 4rem; margin: auto;} .about05_2 .top h3 { height: fit-content; text-align: center; margin-bottom: 2rem;} .about05_2 .bot .swiper .box { overflow: hidden; z-index: 1; position: relative; border-radius: 8px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .about05_2 .bot .swiper .box .text { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .about05_2 .bot .swiper .box .text img { width: 80%; margin: auto; } .about05_2 .bot .swiper .box .text span { font-size: 18px; color: #fff; margin-top: 3.2rem; text-align: center; line-height: 2.6rem; font-weight: bold; } .about05_2 .bot {/* width: calc(100% - (100% - 1600px) / 2); left: calc((100% - 1600px) / 2); */ width: 1600px; margin:0 auto; position: relative; overflow: hidden; } .about05_2 .bot .swiper { position: relative; } .about05_2 .bot .b_so { width: 1600px; display: flex; align-items: center; justify-content: space-between; margin-top: 5rem; } .about05_2 .bot .b_so .swiper-pagination { position: unset; width: 87%; height: 5px; border-radius: 5px; } .about05_2 .bot .b_so .fa { background-color: #e8e8e8; position: unset; width: auto; height: auto; margin: 0px; padding: 0px; width: 6rem; height: 6rem; font-size: 3.6rem; color: #797979; display: flex; justify-content: center; align-items: center; background-image: none; border-radius: 50%; } .about05_2 .bot .b_so .faf { width: 8.5%; display: flex; justify-content: space-between; align-items: center; } .about05_2 .bot .b_so .fa:hover { color: #fff; background-color: var(--dex); } .about05_2 .bot .b_so .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.05); } .about05_2 .bot .b_so .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--dex); border-radius: 12px; } .about05_3 { padding: 0 0 16.8rem; position: relative; } .about05_3 .top { background: url("/style/img/about05_3_top.jpg"); background-size: cover; background-attachment: fixed; position: relative; padding: 15.9rem 0 24.2rem; } .about05_3 .top::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; left: 0; bottom: 0px; } .about05_3 .top h3 { z-index: 1; position: relative; text-align: center; width: 100.9rem; font-size: 42px; line-height: 60px; color: #fff; font-weight: bold; margin: auto; } .about05_3 .bot { margin-top: -17rem; } .about05_3 .bot .content { border-radius: 1.5rem; height: 62.2rem; position: relative; overflow: hidden; } .about05_3 .bot .content .imgbox { height: 100%; } .about05_3 .bot .content .imgbox img { height: 100%; } .about05_3 .bot .content .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; left: 0; bottom: 0px; } .about05_3 .bot .content .bg { z-index: 1; position: absolute; right: 0px; top: 0px; height: 100%; } .about05_3 .bot .content .bg img { height: 100%; } .about05_3 .bot .content .text { z-index: 1; position: absolute; top: 50%; right: 15.6rem; width: 44.4rem; transform: translateY(-50%); } .about05_3 .bot .content .text .icon { border-radius: 50%; width: 65px; height: 65px; background-color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); } .about05_3 .bot .content .text .icon img { width: 3.3rem; } .about05_3 .bot .content .text h4 { font-size: 30px; line-height: 1; color: #fff; margin: 2.9rem 0 2.2rem; } .about05_3 .bot .content .text p { font-size: 16px; line-height: 30px; color: #fff; opacity: 0.7; } .about05_3 .bot .content .tips { z-index: 1; width: 19.4rem; right: 51%; position: absolute; bottom: 11.4rem; border-radius: 4rem; background-color: rgba(255, 255, 255, 0.3); padding: 0.8rem 1.3rem; display: flex; align-items: center; } .about05_3 .bot .content .tips .icon { border-radius: 50%; margin-right: 1.5rem; background-color: rgb(175, 175, 175); width: 5rem; height: 5rem; border: 0.2rem solid var(--dex); } .about05_3 .bot .content .tips .icon img { width: 2rem; } .about05_3 .bot .content .tips span { font-size: 16px; line-height: 1; color: #fff; } .news_banner {position: relative; overflow: hidden; background-color: #f1f2f3; padding: 200px 0 80px;} .news_banner .text{width: 900px;position: unset;margin: auto;} .news_banner h4 { font-size: 34px; margin-bottom: 14px; font-weight: bold;color: #333333;} .news_banner h5 { font-size: 16px; display: flex;} .news_banner h5 span {color: #888888;} .news_banner h5 span:nth-of-type(1){margin-right: 44px;} .newshowtt{ display: block; overflow: hidden; background: #f5f5f5; padding: 100px 0; width: calc(100% - 200px); margin: 100px auto;} .newshowtt dd{ display: block; width: 900px; margin: 0 auto; overflow: hidden;} .newshowtt dd strong{ display: block; color: #333; font-size: 40px; line-height: 1em; margin-bottom: 20px;} .newshowtt dd p{ display: block; overflow: hidden; } .newshowtt dd p span{font-family: Montserrat-Bold; display: block; float: left; color: #666; margin: 0 30px 0 0; line-height: 30px;} .newshowtxt{ display: block; overflow: hidden; width: 900px; margin: 100px auto 130px;} .newshowtxt .wp-video {margin: auto;width: fit-content!important;} .newshowtxt .wp-video video {width: auto!important; height: auto!important; max-width: 100%!important;} .newshowtxt tr td{color: #666;} .newshowtxt p{ display: block; color: #333; font-size: 18px; line-height: 30px; margin-bottom: 20px;} .newshowtxt p strong a{ display: inline-block; color: #333; font-weight:bold} .newshowtxt p a{ display: inline-block; color: #333; font-weight:bold;} .newshowtxt img{ display: block; width: auto; max-width: 100%; margin: auto; height: auto;} .newshowtxt p b {color: #333;} .newshowtxt p span{display: inline-block;} .newshowtxt section{ display: block; color: #333; font-size: 18px; line-height: 30px; margin-bottom: 20px;} .newshowtxt section b {color: var(--dex);} .sxy{ display: block; overflow: hidden; margin-top: 80px; border-top: 1px solid #ddd; } .sxy a{ display: block; color: #666; border-bottom: 1px solid #ddd; padding: 16px 0; font-size: 18px;} .sxy a:hover {color: var(--dex);} .bottomfx{ margin-top: 50px; display: flex; justify-content: space-between; align-items: center;} .bottomfx dd{} .bottomfx dd span{color: #666; display: block; float: left; font-size: 20px; line-height: 40px; margin-right: 20px;} .bottomfx dd .share{ display: block;float: left;} .bottomfx dd .share a{ display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; background: rgb(176, 176, 176); border-radius: 50%; float: left; margin-right: 10px; font-size: 17px; color: #fff;} .bottomfx dd .share a:hover{color: #fff; background: var(--dex);} /* ding */ .ding { position: absolute; top: -10rem; left: 0px; height: 1px; } .tzlx01{ padding: 11.6rem 0 14.8rem; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; } .tzlx01 .left{ width: 38%; padding-left: calc((100% - 1600px)/2); top: 2rem; position: relative; } .tzlx01 .left h3{ margin-bottom: 3rem; } .tzlx01 .left dl{ } .tzlx01 .left dl dd{ padding: 2.6rem 0; border-top: 1px solid #ddd; font-size: 18px; color: #666; position: relative; } .tzlx01 .left dl dd::before{ position: absolute; left: 0px; content: ""; background-color: var(--dex); width: 8.6rem; height: 0.4rem; top: -0.2rem; } .tzlx01 .left dl dd:last-child{ border-bottom: 1px solid #ddd; } .tzlx01 .left dl dd:last-child::after{ left: 0px; position: absolute; content: ""; background-color: var(--dex); width: 8.6rem; height: 0.4rem; bottom: -0.2rem; } .tzlx01 .right{ width: 55.7%; } .tzlx01 .right img{ height: 71.1rem; } .fo02_3 .wei {position:relative;} .fo02_3 .wei .ewm { position: absolute; left: 2rem; top: -11rem; width: 10rem; display: none; } .fo02_3 .wei .ewm img { width: 100%!important; margin: 0px!important; } .fo02_3 .wei:hover .ewm {display: block;} @media screen and (max-width:1800px) and (min-width:1601px) { .head .right { display: flex; align-items: center; width: 72%; justify-content: space-between; } .head .right li { margin: 0 2rem; } .about01_4 .content .fa.fa-angle-left { left: -2.2%; } .about01_4 .content .fa.fa-angle-right { right: -2.2%; } .app03-3_2 .top .top_b .fa.fa-angle-left { left: -2.2%; } .app03-3_2 .top .top_b .fa.fa-angle-right { right: -2.2%; } .cul02 .bot .fa.fa-angle-left { left: -4%; } .cul02 .bot .fa.fa-angle-right { right: -4%; } } @media screen and (max-width:1600px) { html { font-size: 7.3px; } .head .right li h3 a { font-size: 15px; } .head .right { width: 74%; } .head .op .lang h4 { font-size: 13px; line-height: 22px; } .ibanner .text h3 { font-size: 68px; } .ibanner .text h4 { font-size: 20px; } .ibanner .sc span { font-size: 12px; } .icenter { width: 1160px; } .i_top span { font-size: 16px; } .i_top h3 { font-size: 43px; line-height: 55px; } .i01 .icenter .left p { font-size: 16px; line-height: 30px; } .i01 .icenter .right dd span { font-size: 17px; } .i01 .icenter .right dd h5 strong { font-size: 90px; } .i02 .icenter .top .content .text p { font-size: 15px; line-height: 27px; } .i02 .icenter .bot dd h4 { font-size: 24px; } .i02 .icenter .bot dd h5 { font-size: 15px; } .i03 .bot .le .text h3 { font-size: 26px; line-height: 38px; } .i03 .bot .le .text .date span { font-size: 15px; } .i03 .bot .le .text p { font-size: 16px; line-height: 28px; } .i03 .bot .ri a .text .date span { font-size: 15px; } .i03 .bot .ri a .text p { font-size: 20px; line-height: 31px; } .i03 .bot .ri a .text .gengduo span { font-size: 14px; } .i03 .bot .ri a .text .gengduo i { font-size: 14px; } .i05_content .icenter p { font-size: 15px; line-height: 27px; } .i05 .i05_wen h3 { font-size: 38px; } .i05 .i05_wen p { font-size: 15px; line-height: 26px; } .i05 .mc_bs3_videobox.start .i05_wen { bottom: 9%; } .footer .fo01 .le .le__t h3 { font-size: 27px; } .footer .fo01 .le .le__t h4 { font-size: 38px; } .footer .fo01 .le { padding-right: 9.7rem; } .footer .fo01 .le .le__b h4 { font-size: 15px; } .footer .fo01 .ri .num .fuhao { font-size: 38px; } .footer .fo01 .ri .num .shuzi { font-size: 38px; } .footer .fo01 .ri .num .text span { font-size: 12px; } .footer .fo01 .ri .num { margin-right: 9.2rem; } .footer .fo02 .fo02_1 dd h3 a { font-size: 19px; } .footer .fo02 .fo02_1 dd .min a { font-size: 15px; } .footer .fo02 .fo02_2 li span { font-size: 17px; } .footer .fo02 .fo02_3 a { font-size: 15px; } .innerbanner .text h4 { font-size: 20px; } .innerbanner .text h3 { font-size: 48px; line-height: 59px; } .innerbanner .nav .icenter a { font-size: 16px; } .common_h3 { font-size: 30px; } .app01_1 .icenter p { font-size: 15px; line-height: 26px; } .app01_3 .icenter dd .text h4 { font-size: 25px; } .app01_3 .icenter dd .text p { font-size: 15px; line-height: 26px; } .app01_3 .icenter dd .text h5 span { font-size: 15px; line-height: 27px; } .app03_1 .icenter .bot p { font-size: 15px; line-height: 28px; } .app03_2 .icenter dl dd .text { font-size: 16px; } .app03_3 .icenter dl dd p { font-size: 15px; line-height: 27px; height: 108px; } .app03_4 .icenter .left h3 { font-size: 32px; line-height: 42px; } .app03_4 .icenter .right dd h4 { height: 4.7rem; width: 17.5rem; font-size: 15px; line-height: 20px; } .app03_4 .icenter .right dd img { height: 4.8rem; } .app03_5 .icenter .g dd span { font-size: 20px; } .app03_6 .icenter .left h4 { font-size: 30px; line-height: 40px; } .app03_6 .icenter .left .text .le .t span { font-size: 17px; } .app03_6 .icenter .left .text .le .b h4 { font-size: 18px; } .app03_6 .icenter .left .text .le .b h5 { font-size: 22px; } .app03-3_2 .top .top_b .top_b_sha { width: 1190px; } .app03-3_2 .top .top_b .fa.fa-angle-left { left: -3%; } .app03-3_2 .top .top_b .fa.fa-angle-right { right: -3%; } .app03-3_2 .top .top_b .top_b_sha .box .text h4 { font-size: 23px; } .app03-3_2 .top .top_b .top_b_sha .box .text p { font-size: 14px; line-height: 24px; } .app03-3_2 .top .top_b .top_b_sha .box .text h5 { font-size: 13px; } .app03-3_2 .top .top_b .top_b_sha .box .text h5 span { font-size: 13px; } .app03-3_2 .bot .left .text p { font-size: 15px; line-height: 27px; } .app03-3_2 .bot .right .g h4 { font-size: 24px; } .app03-4_1 .icenter2 .text p { font-size: 15px; line-height: 27px; } .app03-4_2 .icenter2 dl dd h4 { font-size: 17px; } .app03-4_2 .icenter2 dl dd p { font-size: 12px; line-height: 21px; } .app04_1 .icenter .left { width: 31.9375%; } .app04_1 .icenter .right h4 { font-size: 24px; } .app04_1 .icenter .right p { font-size: 15px; line-height: 27px; } .app04_1 .icenter .left .bot dd span { font-size: 15px; } .app04_1 .icenter .left .bot dd h5 strong { font-size: 60px; } .join01 .icenter .top h4 { line-height: 50px; } .join01 .icenter .top p { font-size: 18px; line-height: 30px; } .join01 .bot .right h4 { margin-bottom: 2.8rem; } .join01 .bot .right p { font-size: 15px; line-height: 26px; } .join01 .bot .right { padding-right: calc((100% - 1160px) / 2); } .join02 .icenter dl dd h4 { font-size: 25px; margin-bottom: 2rem; } .join02 .icenter dl dd p { font-size: 15px; line-height: 27px; } .join03 .icenter p { font-size: 18px; line-height: 30px; } .join04 .bot { width: 1160px; left: calc((100% - 1160px) / 2); } .join04 .bot .content { font-size: 17px; line-height: 30px; } .join05 .top p { font-size: 17px; line-height: 20px; } .join06 .left p { font-size: 18px; line-height: 31px; } .join06 .left { padding-left: calc((100% - 1160px) / 2); } .join06 .right dd span { font-size: 17px; } .cul01 .icenter .top h4 { font-size: 21px; } .cul01 .icenter .bot dl dd .text .wen { font-size: 105px; } .cul01 .icenter .bot dl dd .text h4 { font-size: 22px; } .cul01 .icenter .bot dl dd .text h5 { font-size: 17px; line-height: 25px; } .cul02 .bot .swiper .box h4 { font-size: 18px; } .cul02 .bot .swiper .box p { font-size: 13px; line-height: 26px; } .cul03 dl dd span { font-size: 19px; } .cul03 p { font-size: 22px; } .cul04 .icenter dl dd h4 { font-size: 19px; } .cul05 .icenter .right dd h5 { font-size: 14px; line-height: 22px; } .cul05 .icenter .right dd h4 { font-size: 15px; } .cul06 .icenter dl dd .icon img { height: 4.4rem; } .cul06 .icenter dl dd h4 { font-size: 24px; } .cul06 .icenter dl dd h5 { font-size: 14px; line-height: 28px; } .cul07 .top h3 { line-height: 54px; } .cul07 .top p { font-size: 18px; line-height: 33px; } .cul07 .bot { width: calc(100% - (100% - 1160px) / 2); left: calc((100% - 1160px) / 2); } .cul08 .icenter h3 { line-height: 54px; } .cul08 .icenter dl dd { font-size: 16px; line-height: 25px; } .cul09 p { font-size: 18px; line-height: 31px; } .bui01 .icenter .right h5 { font-size: 27px; } .bui01 .icenter .right p { font-size: 15px; line-height: 28px; } .bui02 a .icenter .content .le .num h4 { font-size: 50px; } .bui02 a .icenter .content .le .num span { font-size: 19px; } .bui02 a .icenter .content .ri h4 { font-size: 24px; line-height: 31px; } .bui02 a .icenter .content .ri p { font-size: 15px; line-height: 24px; } .bui02 a .icenter .content .ri h5 strong { font-size: 14px; } .about01_1 .icenter .text h4 span { font-size: 37px; } .about01_1 .icenter .text h5 { font-size: 22px; } .about01_1 .icenter .text p { font-size: 15px; line-height: 27px; } .about01_2 .icenter .bot .left h4 { font-size: 30px; line-height: 42px; } .about01_2 .icenter .bot .left p { font-size: 16px; line-height: 27px; } .about01_2 .icenter .bot .right img { height: 4rem; } .about01_2 .icenter .bot .right h5 strong { font-size: 60px; } .about01_2 .icenter .bot .right h5 sup { font-size: 18px; } .about01_2 .icenter .bot .right h6 { font-size: 18px; } .about01_3 .top h4 { font-size: 21px; } .about01_3 .top p { font-size: 15px; line-height: 27px; } .about01_3 .bot { left: calc((100% - 1160px) / 2); width: calc(100% - (100% - 1160px) / 2); } .about01_3 .bg { width: calc(100% - (100% - 1160px) / 2); } .about01_3 .bot dd .text img { height: 6rem; } .about01_3 .bot dd .text h4 { font-size: 24px; } .about01_3 .bot dd .text h5 { font-size: 16px; line-height: 24px; } .about01_3 .bot dd .text { width: 100%; } .about01_3 .bot .imgbox img { height: 100%; } .about01_4 .content .swiper .box span { font-size: 16px; } .about01_4 .content .content_s { width: 1190px; } .about01_4 .content .fa.fa-angle-left { left: -3%; } .about01_4 .content .fa.fa-angle-right { right: -3%; } .about02_1 .icenter .left p { font-size: 15px; line-height: 28px; } .about02_2 .icenter h3 { line-height: 51px; } .about02_2 .icenter p { font-size: 15px; line-height: 28px; } .about02_3 dl dd .text h4 { font-size: 18px; } .about02_3 dl dd .text h5 { font-size: 12px; min-height: 36px; line-height: 18px; } .about04 .icenter dl dd .num { font-size: 80px; } .about04 .icenter dl dd .text { width: 52.1rem; font-size: 16px; line-height: 24px; } .about05_1 .icenter .top p { font-size: 16px; line-height: 32px; } .about05_1 .bot { width: calc(100% - (100% - 1160px) / 2); left: calc((100% - 1160px) / 2); } .about05_1 .bot .text .g .num h5 strong { font-size: 40px; } .about05_1 .bot .text .g .num h5 span { font-size: 15px; } .about05_1 .bot .text .g h6 { font-size: 14px; } .about05_1 .bot .text .g {width: 45rem;display: flex;align-items: flex-end;} .about05_2 .top p { font-size: 16px; line-height: 30px;} .about05_2 .bot { /*width: calc(100% - (100% - 1160px) / 2); left: calc((100% - 1160px) / 2);*/ width: 1160px; margin:0 auto; } .about05_2 .bot .swiper .box .text span { font-size: 16px; } .about05_2 .bot .b_so { width: 1160px; } .about05_3 .top h3 { font-size: 36px; line-height: 50px; } .about05_3 .bot .content .tips span { font-size: 13px; } .about05_3 .bot .content .text h4 { font-size: 24px; } .about05_3 .bot .content .text p { font-size: 12px; line-height: 26px; } .news01 .icenter .right .num h4 { font-size: 50px; } .news01 .icenter .right .num span { font-size: 18px; } .news01 .icenter .right h4 { font-size: 24px; line-height: 32px; } .news01 .icenter .right p { font-size: 15px; line-height: 23px; } .news01 .icenter .right h5 strong { font-size: 13px; } .con01 .icenter .top dd span { font-size: 14px; } .con01 .icenter .top dd h4 { font-size: 15px; } .con01 .icenter .bot .map .icon .ri h5 { font-size: 15px; line-height: 21px; margin-bottom: 2rem; } .con01 .icenter .bot .map .icon .ri h6 { font-size: 13px; } .con01 .icenter .bot .map .icon .ri h6 span { font-size: 13px; } .con02 .icenter dl dd h5 { font-size: 20px; } .con02 .icenter dl dd ul li span { font-size: 14px; } .con02 .icenter dl dd { margin-right: 16rem; margin-bottom: 6rem; width: 42.2rem;} .con03 form .label .g span { font-size: 13px; } .div1 .head.icenter { width: 1160px; } .join07 .icenter .right h3 { line-height: 40px; } .tzlx01 .left { padding-left: calc((100% - 1160px)/2);} .tzlx01 .left dl dd { font-size: 15px;} } /*# sourceMappingURL=huaqin.css.map */