/*header*/ .wrap_head { display: block; width: 100%; height: 120px; z-index: 5; position: absolute; left: 0; top: 0; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; } .wrap_head .head_con { display: block; width: 1200px; height: 110px; margin: 0 auto; position: relative; z-index: 2; } .wrap_head .head_con .logo { display: block; height: 76px; width: 114px; position: absolute; left: 0; top: 17px; } .wrap_head .head_con .logo h1 { display: block; height: 76px; width: 114px; background: url(../../images/revision3.0/pc-header-logo.png?t=20210817) no-repeat 0 0; text-indent: -9999px; overflow: hidden; background-size: 100% 100%; /*&:hover { background: url(../../images/revision3.0/pc-header-high-logo.png) no-repeat 0 0; }*/ } /*menu*/ .menu_list { display: block; height: 110px; position: absolute; right: 143px; top: 0; cursor: pointer; opacity: 1; transition: opacity 0.3s linear; transform: translate(0px, 0); } .menu_list .menu_item { display: inline-block; height: 110px; float: left; margin-left: 72px; position: relative; /*.txt { display: block; height: 110px; line-height: 110px; font-size: 20px; color: #fff; opacity: 0.95; -webkit-transition: color 0.3s linear; position: relative; z-index: 2; top: -10px; font-family: NotoSansHans-Light; !*current page nav style*! &.current_tab:after { display: block; content: ""; height: 4px; width: 100%; position: absolute; //bottom: 19px; bottom: 30px; left: 0; background: #ffffff; opacity: 1; -webkit-transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform-origin: 100% 100%; transform: scale(1, 1); } &:hover { opacity: 1; //color: #0056b8; //font-family: NotoSansHans-Bold !important; font-weight: bold; &.current_tab:after { background: #0056b8; } } &:after { display: block; content: ""; height: 4px; width: 100%; position: absolute; //bottom: 19px; bottom: 30px; left: 0; background: #0056b8; opacity: 0; -webkit-transition: transform 0.2s ease-out, opacity 0.2s ease-out; !*line from center to two sides animation style*! transform-origin: 50% 0%; transform: scale(0.01, 1); } &:before { display: none; content: ""; height: 400px; width: 100%; position: absolute; //top: 19px; top: 30px; left: -10px; background: #194ac3; opacity: 1; } }*/ /*&:hover .txt:after { transform: scale(1, 1); opacity: 1; }*/ /* &.menu_item_lan { display: none; }*/ } .menu_list .menu_item .title_area { height: 110px; line-height: 110px; } .menu_list .menu_item .title_area .txt { display: block; /*height: 110px; line-height: 110px;*/ font-size: 20px; color: #fff; opacity: 0.95; -webkit-transition: color 0.3s linear; position: relative; z-index: 2; top: -10px; font-family: NotoSansHans-Light; /*current page nav style*/ } .menu_list .menu_item .title_area .txt.current_tab:after { display: block; content: ""; height: 4px; width: 100%; position: absolute; bottom: 30px; left: 0; background: #ffffff; opacity: 1; -webkit-transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform-origin: 100% 100%; transform: scale(1, 1); } .menu_list .menu_item .title_area .txt:hover { opacity: 1; font-family: NotoSansHans-Bold !important; } .menu_list .menu_item .title_area .txt:hover.current_tab:after { background: #0056b8; } .menu_list .menu_item .title_area .txt:after { display: block; content: ""; height: 4px; width: 100%; position: absolute; bottom: 30px; left: 0; background: #fff; opacity: 0; -webkit-transition: transform 0.2s ease-out, opacity 0.2s ease-out; /*line from center to two sides animation style*/ transform-origin: 50% 0%; transform: scale(0.01, 1); } .menu_list .menu_item .title_area .txt:before { display: none; content: ""; height: 400px; width: 100%; position: absolute; top: 30px; left: -10px; background: #ffffff; opacity: 1; } .menu_list .menu_item:hover .title_area .txt:after { transform: scale(1, 1); opacity: 1; } .menu_list .menu_item .sub_list { display: none; position: absolute; width: 160px; left: 50%; margin-left: -80px; text-align: center; z-index: 2; } .menu_list .menu_item .sub_list li a { display: block; font-size: 16px; color: #2b2e2e; opacity: 0.7; padding: 13px 0; } .menu_list .menu_item .sub_list li a:hover { opacity: 1; } .menu_list .menu_item_lan { display: none; } .menu_list .mobile_menu_logo_title { position: absolute; left: 50%; top: 18px; /*width: 134px; height: 20px;*/ width: 150px; height: 23px; background: url(../../images/revision3.0/menu_logo_hover.png?t=20210817) no-repeat center center; background-size: 100%; -webkit-background-size: 100%; z-index: 99; transform: translateX(-50%); display: none; } /*language*/ .lang_area { display: block; position: absolute; right: 0; top: 32px; } .lang_area a { display: inline-block; font-size: 16px; color: #fff; font-family: "NotoSansHans-Light"; opacity: 0.7; cursor: pointer; } .lang_area a:hover { opacity: 0.95; } .lang_area a.current { opacity: 1; color: #fff; font-family: NotoSansHans-Medium; } .lang_area .s_line { display: inline-block; font-size: 12px; margin: 0 3px; position: relative; top: -2px; opacity: 0.7; color: #ffffff; } .head_white { background: #fff; } /*.submenu_show .logo h1, .head_white .logo h1 { background-image: url(../../images/revision3.0/pc-header-high-logo.png) !important; background-size: 100% 100% !important; }*/ .head_white .logo h1 { background-image: url(../../images/revision3.0/pc-header-high-logo.png?t=20210817) !important; background-size: 100% 100% !important; } .head_white .menu_list .menu_item .txt { color: #2b2e2e; /*current page nav style*/ } .head_white .menu_list .menu_item .txt.current_tab:after { display: block; content: ""; height: 4px; width: 100%; position: absolute; bottom: 30px; left: 0; background: #0056b8; opacity: 1; -webkit-transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform-origin: 100% 100%; transform: scale(1, 1); } .submenu_show .menu_list .menu_item .txt:hover, .head_white .menu_list .menu_item .txt:hover { font-family: NotoSansHans-Bold; } .submenu_show .menu_list .menu_item .txt:hover:after, .head_white .menu_list .menu_item .txt:hover:after { background: #0056b8; } .submenu_show .menu_list .menu_item .txt:hover:before, .head_white .menu_list .menu_item .txt:hover:before { background: #0056b8; } /*.submenu_show .lang_area a, .head_white .lang_area a { //color: #2b2e2e; color: #c9c9c9; &.current{ color: #0055b8; } }*/ .head_white .lang_area a { color: #c9c9c9; } .head_white .lang_area a.current { color: #0055b8; } .submenu_show .lang_area .s_line, .head_white .lang_area .s_line { color: #2b2e2e; } .submenu_show .bg_hover { display: block !important; width: 100%; height: 445px; background: white; z-index: 1; position: absolute; top: 0px; left: 0px; -webkit-animation: a_bg_hover_show 0.2s ease-out both; -webkit-transform-origin: 50% 0%; } .submenu_show .menu_list .menu_item.sublist_show .sub_list, .head_white .menu_list .menu_item.sublist_show .sub_list { -webkit-animation: a_menu_item_show 0.2s ease-out both; } .submenu_show .menu_list .menu_item.sublist_hide .sub_list, .head_white .menu_list .menu_item.sublist_hide .sub_list { -webkit-animation: a_menu_item_hide 0.15s ease-out both; } .submenu_show .menu_list .menu_item .menu_hook { display: block; } .submenu_hide, .sublist_hide { pointer-events: none; } .submenu_hide .bg_hover { -webkit-animation: a_bg_hover_hide 0.15s ease-out both; -webkit-transform-origin: 50% 0%; } /*footer*/ .wrap_footer { width: 100%; height: 708px; background: #f2f3f3; position: relative; z-index: 4; } .wrap_footer .footer_con { width: 1200px; margin: 0 auto; height: 708px; position: relative; padding-top: 106px; box-sizing: border-box; font-family: NotoSansHans-Light; } .wrap_footer .footer_con .focus_us { display: block; height: 55px; width: 212px; position: absolute; top: 260px; } .wrap_footer .footer_con .focus_us .focus_list { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .wrap_footer .footer_con .focus_us .focus_list li { margin-top: 13px; } .wrap_footer .footer_con .focus_us .focus_list li a { display: block; height: 28px; width: 28px; /*.email-detail, .tel-detail { width: 211px; position: absolute; left: 0; top: 76px; z-index: 2; display: none;; opacity: 0; transition: opacity 0.2s linear; pointer-events: none; } &:hover .email-detail, &:hover .tel-detail { display: block; opacity: 1; }*/ } .wrap_footer .footer_con .focus_us .focus_list li a .icon { display: block; height: 28px; width: 28px; background: url(../../images/revision3.0/icon_wechat.png) no-repeat center; background-size: 100% 100%; position: relative; transition: background 0.2s ease-in-out; } .wrap_footer .footer_con .focus_us .focus_list li a:hover .icon { background: url(../../images/revision3.0/icon_wechat_hover.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a .i_weibo { background: url(../../images/revision3.0/icon_weibo.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a:hover .i_weibo { background: url(../../images/revision3.0/icon_weibo_hover.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a .i_twitter { background: url(../../images/revision3.0/icon_twitter.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a:hover .i_twitter { background: url(../../images/revision3.0/icon_twitter_hover.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a .i_in { background: url(../../images/revision3.0/icon_in.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a:hover .i_in { background: url(../../images/revision3.0/icon_in_hover.png) no-repeat center; background-size: 100% 100%; } .wrap_footer .footer_con .focus_us .focus_list li a .wechat-code { width: 176px; position: absolute; left: 18px; top: 76px; z-index: 2; display: none; opacity: 0; transition: opacity 0.2s linear; pointer-events: none; } .wrap_footer .footer_con .focus_us .focus_list li a:hover .wechat-code { display: block; opacity: 1; } .wrap_footer .footer_con .focus_us .focus_list li a .email-detail-bg, .wrap_footer .footer_con .focus_us .focus_list li a .tel-detail-bg { width: 211px; height: 63px; position: absolute; left: 0; top: 76px; z-index: 2; display: none; opacity: 0; transition: opacity 0.2s linear; pointer-events: none; } .wrap_footer .footer_con .focus_us .focus_list li a .email-detail-bg { background: url("../../images/revision3.0/email-detail.png") no-repeat center center; background-size: cover; -webkit-background-size: cover; } .wrap_footer .footer_con .focus_us .focus_list li a .tel-detail-bg { background: url("../../images/revision3.0/tel-detail.png") no-repeat center center; background-size: cover; -webkit-background-size: cover; } .wrap_footer .footer_con .focus_us .focus_list li a:hover .email-detail-bg, .wrap_footer .footer_con .focus_us .focus_list li a:hover .tel-detail-bg { display: block; opacity: 1; } .wrap_footer .footer_con .footer_nav_box { position: relative; float: right; } .wrap_footer .footer_con .footer_nav_box .footer_nav { float: left; width: 180px; } .wrap_footer .footer_con .footer_nav_box .footer_nav .tit_area .tit { display: block; font-size: 20px; color: #4d4d4d; font-weight: normal; margin-bottom: 30px; cursor: pointer; } .wrap_footer .footer_con .footer_nav_box .footer_nav .tit_area .tit a { color: #4d4d4d; } .wrap_footer .footer_con .footer_nav_box .footer_nav .tit_area .tit:hover a { color: #0055b8; } .wrap_footer .footer_con .footer_nav_box .footer_nav ul li a { position: relative; display: inline-block; font-size: 16px; color: #4d4d4d; font-weight: normal; margin-bottom: 18px; font-family: NotoSansHans-Light; } .wrap_footer .footer_con .footer_nav_box .footer_nav ul li a:after { display: block; content: ""; height: 2px; width: 100%; position: absolute; bottom: 0; left: 0; background: #4382c8; opacity: 0; -webkit-transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform-origin: 50% 0%; transform: scale(0.01, 1); } .wrap_footer .footer_con .footer_nav_box .footer_nav ul li a:hover:after { transform: scale(1, 1); opacity: 1; } .wrap_footer .footer_con .footer_nav_box .anti_check { width: 100px; } .wrap_footer .footer_con .logo_btn { display: block; height: 28px; width: 212px; position: absolute; left: 0; top: 106px; } .wrap_footer .footer_con .logo_btn img { width: 100%; } .wrap_footer .footer_con .other-info { position: absolute; width: 100%; bottom: 70px; } .wrap_footer .footer_con .other-info .grey-line { width: 100%; height: 2px; background: #4b4b4b; } .wrap_footer .footer_con .other-info .info-detail { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 30px; font-size: 14px; } .wrap_footer .footer_con .other-info .info-detail .copyright { text-align: right; line-height: 22px; } .wrap_footer .footer_con .back_to_top { display: none; } /*subpage top banner and big title*/ .wrap { display: block; width: 100%; position: relative; overflow-x: hidden; } .wrap .wrap_content { position: relative; z-index: 2; } .wrap .wrap_content .banner_ad_area, .wrap .wrap_content .banner_ad_area1 { width: 100%; height: 601px; overflow: hidden; background: url("../../images/revision3.0/brand-service/top-banner-bg-pc1.png?t=1") no-repeat center bottom; background-size: cover; -webkit-background-size: cover; } .wrap .wrap_content .banner_ad_area .banner_con, .wrap .wrap_content .banner_ad_area1 .banner_con { width: 1200px; margin: 0 auto; text-align: right; color: #ffffff; font-family: 'NotoSansHans-Light'; } .wrap .wrap_content .banner_ad_area .banner_con h2, .wrap .wrap_content .banner_ad_area1 .banner_con h2 { font-size: 45px; letter-spacing: 2px; margin-bottom: 8px; margin-top: 440px; font-weight: 400; } .wrap .wrap_content .banner_ad_area .banner_con h3, .wrap .wrap_content .banner_ad_area1 .banner_con h3 { font-size: 20px; font-weight: 400; } .wrap .wrap_content .banner_ad_area1 { background: url("../../images/revision3.0/brand-service/top-banner-bg-pc.png?t=1") no-repeat center bottom; } .wrap .wrap_content .title { font-family: "NotoSansHans-Light"; font-size: 40px; font-weight: normal; letter-spacing: 2px; color: #000000; display: inline-block; position: relative; } .wrap .wrap_content .title:after { display: block; content: ""; height: 2px; width: 100%; position: absolute; bottom: -3px; left: 0; background: #0056b8; } .wrap .wrap_content .title-new { font-family: "NotoSansHans-Light"; font-size: 40px; font-weight: normal; letter-spacing: 2px; color: #000000; display: inline-block; position: relative; } .wrap .wrap_content .title-new:after { display: block; content: ""; height: 5px; width: 100%; position: absolute; bottom: -10px; left: 0; background: #0056b8; } .wrap .wrap_content .read_more { display: block; width: 1050px; margin: 24px auto 0 auto; text-align: right; color: #000000; font-family: "NotoSansHans-Light"; cursor: pointer; } .wrap .wrap_content .read_more:hover { color: #0056b8; } /*pc*/ /*.fixed-cover { position: fixed; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; z-index: 100; display: none; .fixed-dashboard { width: 632px; height: 300px; background: #ffffff; position: absolute; left: 0; right: 0; font-size: 22px; top: 0; bottom: 0; margin: auto; font-family: "NotoSansHans-Light"; p { margin-top: 50px; text-align: left; letter-spacing: 1px; padding-left: 30px; } .ctrlBtn { margin-top: 80px; text-align: right; .leftBtn { width: 160px; line-height: 45px; box-sizing: border-box; border-radius: 2px; text-align: center; color: #666666; border: 1px solid #999999; display: inline-block; letter-spacing: 2px; margin-right: 19px; cursor: pointer; } .rightBtn { width: 160px; line-height: 45px; box-sizing: border-box; border-radius: 2px; text-align: center; color: #ffffff; background: #0056b8; display: inline-block; letter-spacing: 2px; border: 1px solid #0056b8; margin-right: 30px; cursor: pointer; } } } }*/ /*pc end*/ .fixed-cover { position: fixed; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; z-index: 100; display: none; } .fixed-cover .fixed-dashboard { width: 632px; height: 300px; background: #ffffff; position: absolute; left: 0; right: 0; font-size: 22px; top: 0; bottom: 0; margin: auto; font-family: "NotoSansHans-Light"; } .fixed-cover .fixed-dashboard p { margin-top: 50px; text-align: center; letter-spacing: 1px; } .fixed-cover .fixed-dashboard .ctrlBtn { margin-top: 80px; text-align: right; display: flex; flex-direction: row; justify-content: space-between; padding: 0 117px; } .fixed-cover .fixed-dashboard .ctrlBtn .leftBtn { width: 160px; line-height: 45px; box-sizing: border-box; border-radius: 2px; text-align: center; color: #666666; border: 1px solid #999999; display: inline-block; letter-spacing: 2px; cursor: pointer; } .fixed-cover .fixed-dashboard .ctrlBtn .rightBtn { width: 160px; line-height: 45px; box-sizing: border-box; border-radius: 2px; text-align: center; color: #ffffff; background: #0056b8; display: inline-block; letter-spacing: 2px; border: 1px solid #0056b8; cursor: pointer; } /*others*/ .bg_box { width: 100%; background: #f5f5f5; } @keyframes a_menu_item_show { 0% { -webkit-transform: translate(0px, -30px); opacity: 0; } 100% { -webkit-transform: translate(0px, 0px); opacity: 1; } } @keyframes a_menu_item_hide { 0% { -webkit-transform: translate(0px, 0px); opacity: 1; } 100% { -webkit-transform: translate(0px, -30px); opacity: 0; } } @keyframes a_bg_hover_show { 0% { -webkit-transform: scale(1, 0.5); opacity: 0; } 100% { -webkit-transform: scale(1, 1); opacity: 1; } } @keyframes a_bg_hover_hide { 0% { -webkit-transform: scale(1, 1); opacity: 1; } 100% { -webkit-transform: scale(1, 0.5); opacity: 0; } }