/* 钃濊壊 #02267e; #2c2a29; #00a3ea; */ html, body { font-size: 1vw; background-color: #eee; color: #666; font-weight: 400; background-color: #fff; } strong { font-weight: 500; color: #02267e; } span { display: inline-block; } * { background-repeat: no-repeat; background-position: center; background-size: cover; outline: none !important; } a, a:link { color: #2c2a29; text-decoration: none; transition: all 0.3s ease-in-out; } a:hover { color: #02267e; } a.button { color: #fff; } body { padding: 0; margin: 0; font-family: "Noto Sans SC", "PingFang SC", Arial, Helvetica, sans-serif; } .logo { width: 8vw; height: 4vw; } .logo img{ margin-top: -2vw; } img { max-width: 100%; } .nav a, .nav:link { color: #fff; } .nav a:hover { color: #00a3ea; } .nav { display: flex; justify-content: space-between; align-items: center; color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 9000; font-size: 1.1rem; background: -moz-linear-gradient( top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100% ); background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100% ); background: linear-gradient( to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100% ); transition: all 0.3s ease-in-out; } .nav:hover { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(0, 0, 0, 0.72); } .mid_menu, .right_menu { display: flex; align-items: center; } .right_menu { width: 8vw; justify-content: flex-end; } .mid_menu > a { display: block; } .mid_menu > div, .mid_menu > a, .logo, .right_menu { padding: 1.5vw; } .home_video { width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; position: absolute; z-index: 1; } .video_text { z-index: 20; display: block; position: absolute; color: #fff; bottom: 15vh; left: 10vw; } h1 { display: -webkit-box; position: relative; margin-bottom: 0.2em; font-size: 5rem; font-weight: 600; text-transform: uppercase; } h1 > span { position: relative; z-index: 2; line-height: 1; } h1::before { height: 1em; background-color: #da188d; content: ""; display: block; z-index: 0; position: absolute; top: 0.3em; left: -0.4em; width: 0.2em; border-bottom-left-radius: 0.8em; } h1.en::before { height: 1.5em; top: 0.0em; } .section.big_block { min-height: auto; height: auto; } .about::before, .big_block::before { content: ""; width: 100%; height: 100%; display: block; z-index: 0; position: absolute; background-color: rgba(0, 0, 0, 0.2); } .big_block::before { /* -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); */ background-color: rgba(0, 0, 0, 0.5); } .section.big_block .section_block:nth-of-type(even) { background-color: rgba(0, 0, 0, 0.2); } h1 + p { position: relative; z-index: 2; /* font-size: 1.4rem; */ color: #da188d !important; } .white_text, .white_text * { color: #fff; } h2 { font-size: 2.2rem; position: relative; margin-bottom: 0.5em; color: #2c2a29; margin-bottom: 1em; font-size: 3rem; } h2 > span { position: relative; z-index: 2; } h2::before { height: 1em; width: 0.2em; border-bottom-left-radius: 0.8em; background-color: #02267e; content: ""; display: block; z-index: 0; position: absolute; top: 0.3em; left: -0.6em; } h2 + p { position: relative; z-index: 2; color: #666; } .video_text h1::before { } .video_text p { position: relative; z-index: 2; font-size: 1.4rem; } .video_cover { display: block; position: absolute; z-index: 10; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); } .button { border: 1px #fff solid; padding: 10px 3em; display: inline-block; margin-top: 20px; cursor: pointer; transition: all 0.3s ease-in-out; } button { transition: all 0.3s ease-in-out; } .button:hover { background-color: #da188d; color: #fff; border-color: #da188d; } .button.right { float: right; color: #02267e; border-color: #02267e; } .button.right:hover { color: #fff; background-color: #02267e; } button:hover { background-color: #da188d; color: #fff; } .parallax { } .parallax2 { } .section { /* height: 90vh; */ min-height: 90vh; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; /*********/ min-height: 0; } .section.top { height: 100vh; } .section.data { min-height: unset; background-color: #fff; } .section_img_text { } .img_left, .img_right { position: absolute; width: 50vw; top: 20%; left: 10vw; box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05); /******/ position: static; height: 50vw; object-fit: cover; } .img_right { margin-left: 50vw; } .img_left.col2, .img_right.col2 { width: 40vw; } .img_right { left: 45vw; } .text_right, .text_left { position: absolute; left: 55vw; top: 40%; width: 40vw; z-index: 10; box-sizing: border-box; background-color: #fff; padding: 3vw; padding-left: 3vw; top: 20%; /* box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); background-color: rgba(255, 255, 255, 0.6); */ } .big_text, .sub_title { font-size: 1rem; margin-bottom: 1em; margin-top: 1.5em; color: #02267e; font-size: 1.4rem; font-weight: 500; } .large_text { font-size: 1.5rem; font-weight: 600; } .text_left { left: 10vw; left: 5vw; } .height150 { padding-top: 15vh; padding-top: 0; } .footer { background-color: #2c2a29; color: #fff; padding: 10vw; flex-wrap: wrap; padding-bottom: 2vw; padding-top: 5vw; } .footer_top { display: flex; flex-wrap: wrap; } .footer_col:first-of-type { width: 70%; } .footer_col:last-of-type { width: 30%; box-sizing: border-box; padding-left: 5vw; padding-top: 0.5em; } .footer_address { display: flex; border-top: 1px solid #999; margin-top: 2vw; justify-content: space-between; } .blue { color: #da188d; font-weight: bold; } .footer_address > div { padding-right: 2vw; padding-bottom: 3vw; padding-top: 2vw; box-sizing: border-box; } .footer_address > div:last-of-type { padding-right: 0; } .footer a { color: #fff; } .footer a:hover { color: #da188d; } .footer_logo { width: 6vw; } .footer_menu { display: flex; justify-content: space-between; align-items: center; } .footer_menu > div { padding: 0.5em; padding-left: 0; padding-right: 2em; } .footer_full { width: 100% !important; text-align: right; padding-top: 50px; } .section.about { height: 80vh; min-height: 80vh; overflow: hidden; } .section.about .full_width { position: relative; top: -10%; } .section.about .text_left, .section.about .text_right { top: 30%; } .full_width { width: 100%; filter: blur(3px); } .section_bg { background-position: top right; } .section_bg::before { display: block; z-index: 0; content: ""; /* 218 24 141 2 38 126 87 204 246 background-color: rgba(87, 204, 246, 0.9); */ background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; left: 0; top: 0; position: absolute; } .section_bg .time_line_text { color: #fff; } .section_block { position: relative; min-height: 60vh; padding-top: 10vh; } .footer_ico > a { margin-right: 0; margin-top: 0; font-size: 1.4rem; } .certificate_trophy, .ico_list { display: flex; } .certificate_trophy > div, .ico_list > div { text-align: center; padding: 20px; box-sizing: border-box; font-size: 0.8em; width: 33.33%; } .certificate_trophy .fa, .ico_list .fa { font-size: 2em; padding: 1em; padding-bottom: 0.5em; color: #999; } .gold { color: gold !important; } .silver { color: silver !important; } .center_box { padding: 8vw; box-sizing: border-box; padding-top: 0; } .center_text { padding: 5vw; box-sizing: border-box; margin: auto; width: 40vw; } .img_block { height: 35vw; width: 50vw; background-size: cover; } .text_block { width: 50vw; } .text_img_block { display: flex; align-items: center; } .section.center { height: 80vh; min-height: 80vh; } .width60 { width: 60vw; left: 35vw; /****/ width: 50vw; left: 50vw; height: 50vw; } .width40 { width: 40vw; } .arrow_down { position: absolute; z-index: 20; bottom: 3vw; left: 50%; transform: translate3d(-50%, 0, 0); width: 30px; animation-name: up_down; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; } @keyframes up_down { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(-50%, 20px, 0); } } input { border: 1px solid #fff; outline: none; } .newsletter { background-color: #fff; border: 1px solid #666; padding-left: 1em; border-radius: 0; white-space: nowrap; border: none; height: 100%; box-sizing: border-box; align-items: center; display: flex; } .newsletter:focus { border-color: #da188d; } button { padding: 0.7em; background-color: #fff; border: 1px solid #666; border-radius: 0; cursor: pointer; color: #2c2a29; } .newsletter::before { content: ""; display: block; } .newsletter .fa { color: #da188d; display: flex; align-items: center; } .newsletter .fa::before { display: block; margin-top: -0.3em; } .newsletter input { padding-left: 10px; width: 140px; } .newsletter_box { display: flex; align-items: center; display: inline-grid; grid-template-columns: auto auto; } .newsletter_box button { height: 100%; border: none; } .newsletter_box button svg { height: 1.8em; width: 2em; transform: rotate(-90deg); } .footer_bottom { display: flex; justify-content: space-between; align-items: center; } .animation_slide_up { transform: translateY(4vw); opacity: 0; } .animation_slide_up.show { transform: translateY(0); opacity: 1; transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1); transition: all 1s; transition-delay: 0.5s; } .number_grid { display: flex; padding: 6vw 10vw; flex-wrap: wrap; justify-content: center; } .number_grid > div { width: 33.33%; box-sizing: border-box; padding: 2.8vw; } .number_grid.col4 > div { width: 25%; } .number_grid.col5 > div { width: 20%; } .col4 .service_item { width: 25%; } .number_grid_title { font-size: 3rem; text-align: center; margin-bottom: 0.5em; font-weight: 300; } .number_grid_item { position: relative; z-index: 10; } .number_grid.white_text { padding-top: 3vw; } .ico_title, .ico_title::after, .ico_title::before { border-radius: 50%; font-size: 3rem; color: #fff; display: block; text-align: center; line-height: 9rem; width: 9rem; height: 9rem; position: relative; margin: auto; margin-bottom: 3rem; transition: all 0.5s ease-in-out; transition-delay: 0.5s; font-weight: 600; } .ico_title.small { line-height: 4rem; width: 4rem; height: 4rem; font-size: 1rem; margin-bottom: 0rem; } .ico_title::after, .ico_title::before { content: ""; background-color: #02267e; position: absolute; top: 0; left: 0px; z-index: 10; width: 100%; height: 100%; } .ico_title::after { background-color: #da188d; z-index: 0; transition-delay: 0.5s; } .show .ico_title::after { transform: translate3d(5px, 5px, 0); } .ico_title > span { position: relative; z-index: 20; } .ico_title.small_text span { font-size: 1.4rem !important; } .ico_title > div { font-size: 0.3em; z-index: 20; bottom: 6.4rem; position: relative; } .ico_title.small_left { line-height: 4rem; width: 4rem; height: 4rem; font-size: 0.8rem; margin-bottom: 0rem; } .ico_title.small_left::before { background-color: #2c2a29; } .ico_title.small_left::after { background-color: #00a3ea; } .ico_text { display: flex; align-items: center; align-content: center; } .ico_text > div { padding: 20px; } .number_grid_item_bg, .number_grid_bg { background-size: 50%; background-position: top left; background-repeat: repeat; /* filter: gray; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; opacity: 0.03; transition: all 0.5s ease-in-out; animation: bg_move_left; animation-duration: 500s; animation-iteration-count: infinite; animation-direction: alternate; } .number_grid_bg { width: 100% !important; background-size: 33.33%; } .number_grid:hover .number_grid_bg { } @keyframes bg_move_left { from { background-position-x: 0%; } to { background-position-x: -200%; } } /* .number_grid_item:hover .number_grid_item_bg { opacity: 0.6; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); } .number_grid_item:hover .number_grid_text, .number_grid_item:hover .number_grid_title { opacity: 0; } */ .time_line { /* height: 30vw; */ position: relative; width: 90%; display: flex; justify-content: space-around; margin: auto; margin-top: 10vh; } .time_line .fa { font-size: 2.5rem; } .ico_csic { background-size: auto 90%; height: 2.5rem; width: 10rem; } .time_line img { height: 3rem; } .time_line::before { content: ""; display: block; background-color: #00a3ea; width: 100%; height: 1; top: 2rem; left: 50%; position: absolute; transform: translate3d(-50%, 0, 0); } .time_line .ico_title::before { background-color: #2c2a29; } .time_line .ico_title::after { background-color: #00a3ea; } .time_line_text::before { content: ""; display: block; position: absolute; top: 0; left: 50%; width: 0; border-left: 1px solid #00a3ea; height: 45%; transition: all 0.5s ease-in-out; } .time_line_text.animation_slide_up { transition-delay: 0.8s; } .time_line_item { position: relative; width: 20%; } .time_line_item:nth-of-type(odd) .time_line_text { transform: translateY(-270%); } .time_line_item:nth-of-type(odd) .time_line_text::before { top: 110%; } .time_line .time_line_text { margin: 2vw; padding: 0; margin-top: 4vw; } .time_line_text { color: #2c2a29; } /* .time_line > div:nth-of-type(odd) .time_line_text { margin-left: 50vw; transform: translateY(-42%); } .time_line > div:nth-of-type(even) .time_line_text { margin-left: -50vw; transform: translateY(-42%); } .time_line > div:nth-of-type(even) .time_line_text::before { right: 38%; left: auto; } */ .animation_fade_in.show::before { opacity: 1; width: 5vw; } /* .time_line > div { margin-bottom: 5vw; display: flex; align-items: center; justify-content: flex-start; } .time_line > div > div { margin-right: 50px; } .time_line > div > div:first-of-type { margin-left: 45vw; } .time_line .number_grid_subtitle, .time_line .ico_title { margin-bottom: 0; } */ .time_line .swiper-slide::before { content: ""; display: block; position: absolute; height: 1px; background-color: #da188d; top: 32%; left: 0; width: 100%; transform: translateX(50%); } .time_line .swiper-slide:last-of-type::before { display: none; } .time_line .swiper-slide { display: flex; justify-content: center; align-items: center; } .swiper-pagination { position: relative !important; } .swiper-pagination-bullet { margin: 5px; } .number_grid.white_text > div { text-align: center; } span.swiper-pagination-bullet { background-color: #02267e; opacity: 0.5; } span.swiper-pagination-bullet-active { opacity: 1; } .number_grid.white_text .fa { font-size: 4rem; } .number_grid > div.width66, .width66 { width: 66.66%; } .number_grid_subtitle { font-size: 1rem; } .number_grid_subtitle { margin-bottom: 0.5em; min-height: 3em; } /* .time_line { display: table; } .time_line .number_grid { display: table-row; } .time_line .number_grid > div { display: table-cell; } */ .time_line { text-align: center; } .section.contact { display: flex; flex-wrap: wrap; min-height: 110vh; } .section.contact .text_right { width: 50vw; top: 20%; } select { background-image: url(../img/arraw_down.svg); background-size: auto 40%; background-position-x: 98%; background-position-y: center; } input[type="text"], input[type="button"], input[type="number"], input[type="submit"], select, .border_box, textarea { border: 1px solid #eee; display: block; width: 100%; box-sizing: border-box; padding: 1em; font-size: 16px; color: #666; line-height: 1.1; -webkit-appearance: none; -webkit-border-radius: 0; margin-bottom: 1rem; } form > *:last-child { margin-bottom: 0; } form { margin-bottom: 0; } textarea { } ::placeholder { padding: 0; line-height: 1.1; font-size: 16px; color: #666; text-align: left; } .border_box * { display: inline-block; width: auto; } input[type="submit"] { background-color: #fff; } input[type="submit"]:hover { background-color: #da188d; color: #fff; border-color: #da188d; } .width50 { width: 49% !important; background-color: #fff; } .width50_box { display: flex; justify-content: space-between; align-items: center; } .video_text strong, .white_text .sub_title { color: #fff; } .white_text strong { color: #da188d; } .title_text { text-align: center; } .footer_address_col, .footer_bottom { position: relative; font-size: 0.9rem; } .footer_address_col::before { left: 0; top: 2.3vw; display: block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #da188d; width: 1em; height: 1em; border-radius: 50%; text-align: center; line-height: 1em; padding: 0.4em; font-size: 1.4rem; } .footer_address_col.fa-map-marker::before { margin-left: -0.5em; } .footer_address_col.fa-phone::before { margin-left: -0.5em; } .footer_address_col.fa-envelope-o::before { margin-left: -0.4em; } .footer_address_col.fa-wechat::before { margin-left: -0.4em; } .footer_address_col.fa-wechat img { width: 80px; } .submenu { display: none; transition-delay: 0.5s; transition: opacity 0.5s ease-in-out; opacity: 0; font-size: 0.7rem; font-family: "Noto Sans SC", "PingFang SC", Arial, Helvetica, sans-serif; text-transform: uppercase; position: absolute; right: .8rem; padding: 0.3em; z-index: 0; width: 18em; top: 50%; transform: translateY(-50%); } .lang_menu { cursor: pointer; position: relative; } .lang_menu::before { font-size: 1.6rem; } .lang_menu:hover::before { color: #00a3ea; } .lang_menu:hover .submenu { display: block; opacity: 1; transition-delay: 0.5s; } .submenu a { margin: 0.3em; display: inline-block; } .news_list_item { display: flex; justify-content: space-between; box-sizing: border-box; padding: 2em; border: 1px #fff solid; background-color: #fff; align-items: center; width: 100%; flex-direction: column; } .news_item { width: 33.33%; } .news_date { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .news_date::before, .news_date::after { border-radius: 50%; border: 1px solid #02267e; height: 0.2em; width: 0.2em; background-color: #fff; content: ""; display: block; position: absolute; top: 0; left: 50%; transform: translate3d(-50%, -50%, 0); } .news_date::before { margin-left: 0.8em; } .news_date::after { margin-left: -0.8em; } .news_date { border: 1px solid #02267e; border-radius: 4px; padding: 5px 10px; } .news_date > span { display: block; } .news_date .date { font-size: 1.5em; line-height: 1.2; } .news_date .month { color: #999; font-size: 0.5em; } .news_date .year { color: #999; font-size: 0.5em; } .year_title { font-size: 1.5rem; } a.button.news_more { margin-top: 0; color: #da188d; } a.button.news_more:hover { color: #fff; } .job_list_error { width: 100%; padding: 1em; border: 1px #eee solid; background-color: #fff; display: none; color: #da188d; } .job_list_error.show { display: block; } .job_list_item.show { display: block; opacity: 1; } .job_item_position, .job_item_location { color: #000; font-size: 1rem; } .job_item_subtitle, .job_item_mail { margin-top: 1em; color: #000; font-size: 1rem; } .ico { background-color: #da188d; color: #fff; width: 1em; height: 1em; border-radius: 0.1em; position: relative; margin-right: 0.5em; vertical-align: middle; } .ico::before { position: absolute; top: 50%; left: 50%; transform: translate3d(-55%, -55%, 0) scale(0.6); } .job_item_text { padding-left: 1em; } .service_section { width: 60vw; position: relative; } .service_section_right { left: 35vw; } .service_item { width: 33.33%; background-color: #fff; float: left; position: relative; overflow: hidden; box-sizing: border-box; border: 2px solid #fff; border-color: transparent; } .col2 .service_item { width: 50%; } .service_section { border: 2px solid #fff; } .service_section2 .service_item { width: 50%; } .service_item .fa { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); font-size: 2.5rem; line-height: 2.5rem; opacity: 1; transition: all 0.3s ease-in-out; } .service_item:hover .fa { opacity: 0; } .service_item::before { width: 100%; display: block; padding-top: 100%; content: ""; background-color: rgba(0, 0, 0, 0.3); z-index: 0; transition: all 0.5s ease-in-out; } .service_item:hover::before { background-color: rgba(2, 38, 126, 0.9); /* R2G38B126 */ } .service_item > div { z-index: 1; position: absolute; color: #fff; } .service_item_title { padding: 2em; box-sizing: border-box; width: 100%; top: 0; } .service_item_text { padding: 2em; width: 100%; box-sizing: border-box; bottom: -100%; transition: all 0.5s ease-in-out; } .service_item:hover .service_item_text { bottom: 0; } .service_section_left { left: 5vw; } .service_text_right { left: 64vw; width: 30vw; } .service_text_left { width: 30vw; left: 6vw; } .button_mob_menu, .button_mob_menu_close { display: none; position: relative; width: 1em; height: 0.5em; flex-direction: column; justify-content: space-between; padding-right: 5vw; z-index: 9999; } .button_mob_menu_close { display: block; height: 1em; margin-bottom: 10vw; margin-left: auto; margin-right: 0; } .button_mob_menu > div, .button_mob_menu_close > div { height: 1px; width: 1em; background-color: #fff; } .button_mob_menu_close > div { top: 50%; position: absolute; } .button_mob_menu_close > div:first-of-type { transform: rotate(45deg) translateY(-50%); } .button_mob_menu_close > div:last-of-type { transform: rotate(-45deg) translateY(-50%); } .mob_menu { min-width: 20vw; transform: translateX(100%); background-color: #000; top: 0; right: 0; display: none; position: fixed; height: 100%; z-index: 9998; color: #fff; padding: 10vw; transition: all 0.3s ease-in-out; box-sizing: border-box; padding-top: 6.5vw; padding-right: 0; min-width: 40vw; } .mob_menu a, .mob_menu a:link { color: #fff; display: block; margin-bottom: 1em; } .mob_menu.show { transform: translateX(0); } .mob_lang_menu { font-size: 0.8em; padding-top: 3em; } .mob_lang_menu a { display: block; } .word_box { /* padding: 10vw 0; thank */ width: 300vw; position: relative; z-index: 2; animation: text_move_left; animation-duration: 5000s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; height: 100vh; opacity: 0.7; } @keyframes text_move_left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-300%, 0, 0); } } .word_box { /* */ background-color: rgba(2, 38, 126, 0.7); } .word_box a { display: inline-block; padding: 8px; font-weight: 200; color: #ccc; transition: all 0.5s ease-in-out; opacity: 0; font-size: 1em; } .word_box a:hover { color: #666; transform: scale(0.95); } .word_box.show { } .word_box.show a { opacity: 1; } .job_list, .news_list { margin: auto; padding-top: 1em; width: 80%; margin-bottom: 10vw; } .news_list { display: flex; flex-wrap: wrap; } .job_row1, .job_row2 { display: flex; } .job_row1 select { border: none; margin-bottom: 0; border: 1px #eee solid; width: 25%; } .job_row1 input, .job_row1 button { width: 25%; border: none; margin-bottom: 0; border: 1px #eee solid; } .job_row1 input { padding: 1em; } .section.jobs { /* padding-top: 10vw; */ } .section.jobs .text_left { /* position: relative; width: 80vw; */ } .list { display: flex; flex-wrap: wrap; } .job_list_item { width: 50%; box-sizing: border-box; padding: 4em; border: 1px #eee solid; background-color: #fff; font-size: 0.8em; display: none; opacity: 0; transition: opacity 0.5s ease-in-out; transition-delay: 0.5s; } .service_item_img { display: none; width: 100%; } .service_item > div.service_item_img { position: static; overflow: hidden; } .core_services > .service_item > div.service_item_title { font-size: 2rem; padding: 20px 0; } .core_services > .service_item > div.service_item_text { padding: 20px 0; } .service_item_img > div { transition: all 1s cubic-bezier(0.8, 0, 0.2, 1); } .service_item:hover .service_item_img > div { transform: scale(1.1); } .esg_popup_box{ position: fixed; left: 0px; top: 0px; background:rgba(0, 0, 0, 0.5); width: 100%; height: 100vh; z-index: 9005; display: none; } .esg_popup_box > .esg_popup, .esg_popup_box > .esg_info_message{ position: relative; background: #fff; width: 40%; max-width: 800px; min-width: 300px; /* height: 80%; */ border-radius: 5px; margin: 25vh auto ; padding: 1vw 1vw 3vw 1vw; } .esg_popup_header{ /* height: 40px; */ } .esg_popup_header > .title { margin: 0; padding: 0; color: #2c2a29; font-size: 1.5rem; font-weight: 600; } .esg_popup_header > .esg_popup_close{ position: absolute; width: 30px; height: 30px; border-radius: 5px; right: 1vw; top: 1vw; text-align: center; cursor: pointer; } .esg_popup_close:hover >path{ fill:#00a3ea; } .esg_popup_content { display: flex; width: 100%; justify-content: flex-start; align-items: center; margin: auto; flex-direction: column; } .esg_list { width: 100%; padding-left: 20px; justify-content: flex-start; align-items: center; flex-direction: row; position: relative; margin-top: 40px; } .pdf_logo { position: absolute; left: 20px; top: -4px; } .esg_pdf_download { position: absolute; right: 50px; top: -2px; } .esg_pdf_view { display: inline-block; line-height: 25px; cursor: pointer; } .esg_pdf_view { padding: 0 50px; width: 70%; } .esg_pdf_download .download_btn { width: 24px; } .esg_pdf_download:hover > .download_btn path { fill: #00a3ea; } .info_message_box{ margin-top: 30px; padding-left: 40px; } .info_message_box > .info_message_form > .info_message_input{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .info_message_input { margin-bottom: 20px; } .info_message_input p { margin: 0 20px 0 0; padding: 0; font-size: 18px; color: #2c2a29; min-width: 90px; text-align: center; } .info_message_input p span { font-size: 14px; margin-left: 4px; color: #00a3ea; } .info_message_input input { width: 70%; height: 40px; padding: 0 10px; margin: 0; border-radius: 3px; border: 1px solid #2c2a29; color: #2c2a29; } .info_message_submit { margin-left: calc(100% - 140px); margin-top: 40px; width: 120px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 18px; padding: 6px; } .info_message_submit:hover{ background-color: rgba(0, 0, 0, 1); } .honor-box { display: flex; flex-direction: row; width: 66vw; margin-top: 5vw; justify-content: space-between; /*align-items: center; */ } .honor-box .honor-box-left ,.honor-box .honor-box-right{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 47%; } .honor-box .honor-box-left .honor-provider, .honor-box .honor-box-left .honor-awards , .honor-box .honor-box-right .honor-enterprise , .honor-box .honor-box-right .honor-scientific { background-color: rgba(255, 255, 255, 0.2); /* background-color: rgba(0, 0, 0, 0.3); */ display: flex; flex-direction: column; padding: 20px 40px 20px 40px; border-radius: 30px; width: 100%; box-sizing: border-box; position: relative; } .honor-box .honor-box-right .honor-enterprise , .honor-box .honor-box-right .honor-scientific { flex: 1; } .honor-box .honor-box-left .honor-awards, .honor-box .honor-box-right .honor-scientific { margin-top: 6vw; } .honor-box .honor-box-left p , .honor-box .honor-box-right p{ color: #fff; /* color: #000; */ font-size: 16px; margin: 10px 0; } .honor-box .honor-box-left .honor-title, .honor-box .honor-box-right .honor-title { font-size: 22px; font-weight: 600; position: absolute; top: -55px; }