:root { --primary-color: #2b2b2b; --secondary-color: #01b169; --accent-color: #f59c1a; --text-color: #333; --light-gray: #f5f5f5; --medium-gray: #e0e0e0; --dark-gray: #4a4a4a; --white: #ffffff; --shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; --neutral-light: #f5f7fa; --neutral-dark: #263238; --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-cn: "宋体","Microsoft YaHei","黑体", "仿宋体", "Hiragino Sans GB",sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --gap-z1: 0.25rem; --gap-z2: 0.5rem; --gap-1: 1rem; --gap-2: 1.5rem; --gap-3: 3rem; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; word-wrap: break-word; overflow-wrap: break-word; vertical-align: baseline; } a { color: var(--primary-color);text-decoration:none; } a.active, a:hover { color: var(--accent-color); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-size: 16px; } body { font-family: var(--font-primary), var(--font-cn); line-height: 1.6; color: var(--dark-gray); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } .media-img img,.content-text img { max-width: 100%; height: auto; display: inline-block; } ul{ list-style: none; margin: 0; padding: 0; } a { color: inherit; background-color: transparent; } .red, a.red{color:red;} .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .none{display: none;} button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } .h2{ font-size: 1.6rem; } .nav-link { font-size: 1.2rem; } .page-title .title-text .title-menu li { position: relative; color: #eee; font-size: 17px; display: inline-block; line-height: 30px; text-transform: capitalize; } @media (max-width: 767px) { html { font-size: 0.9rem; } a, img { -webkit-touch-callout: none; } input, textarea, select { font-size: 16px !important; } button, [type="button"], [type="submit"] { min-height: 44px; min-width: 44px; } } .container { width: 100%; padding-right: var(--gap-1); padding-left: var(--gap-1); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .flex { display: flex; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .top-right { text-align: right; } @media (max-width: 768px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .top-right { text-align: center; } } .ml-z2 { margin-left: var(--gap-z2); } .hidden { display: none !important; } .white { color: var(--white); } .bg-grey { background-color: var(--light-gray); } .bg-white { background-color: var(--white); } .side-bar { background-image: linear-gradient(to bottom, #f8f9fa, #fff); border-radius: 0 0 var(--gap-1) 0; margin-top:4rem; position: relative; } .side-bar .top-title{position: absolute; top:-4rem;line-height: 3rem; left: 0; width: 100%; white-space: nowrap;overflow:hidden;} @media (max-width: 767px) { .hidden-mobile { display: none !important; } } @media (min-width: 768px) { .hidden-desktop { display: none !important; } } @media print { .site-header, .site-footer, .product-actions { display: none; } .product-container { grid-template-columns: 1fr; } body { font-size: 12pt; line-height: 1.5; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .fa-1 { font-size: calc(1.375rem + 1.5vw)!important; } .form-control:focus { border-color: #f59c1a; box-shadow: 0 0 0 0.25rem rgba(245, 156, 26, 0.25); } .heading-border { width: 60px; height: 5px; background-color: #f59c1a; margin: 0 auto 20px auto; } .section-title span { color: #f59c1a; } .section-title h2, .filter-title { position: relative; line-height: 3rem; color: #666; font-weight: 700; font-family: "Source Sans Pro", sans-serif; } .section-title.text-left h2:before, .filter-title:before { position: absolute; bottom: 0; left: 0; content: ""; height: 2px; width: 40px; background: #f59c1a; } .shadow { box-shadow: var(--shadow); } .text-right { text-align: right; } .text-left { text-align: left; } .text-accent { color: var(--accent-color); } .clean { margin: 0; padding: 0; } .heading-border-light { width: 30px; height: 5px; background-color: #f59c1a; margin: 0 0 20px 0; } .bg-gray { background-color: var(--light-gray); } .bg-white { background-color: var(--white); } .section { padding: var(--gap-3) 0px; } .bg-contact { background-image: url(../images/background/promo-video.webp); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } .footer { opacity: 0.8; color: var(--white); } .footer .item { position: relative; padding-left: 30px; margin-bottom: var(--gap-1); } .footer p { margin-bottom: 0; } .footer .item i { position: absolute; top: 3px; left: 0; } .footer .footer-2, .footer .footer-1 { background-color: rgba(1, 1, 1, 0.8); padding-bottom: var(--gap-2); } .footer .footer-1 { padding-top: 0; } .footer .copyright-text { padding-top: var(--gap-2); } .section hr { height: 1px; padding: 0; margin: 0; border: none; text-align: center; background-image: linear-gradient( to right, rgba(1, 177, 105, 0), rgba(1, 177, 105, 0.75), rgba(1, 177, 105, 0) ); } .footer hr { height: 1px; padding: 0; margin: 0; border: none; text-align: center; background-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) ); } .back-to-top { position: fixed; bottom: var(--gap-2); right: var(--gap-2); z-index: 999; height: var(--gap-3); width: var(--gap-3); background: #f59c1a; border-radius: 50%; text-align: center; line-height: var(--gap-3); color: #fff; cursor: pointer; transition: 0.3s; display: none; } .footer-link li { display: block; min-width: 5rem; } .menu-link { line-height: 2.8rem; } .header-top { background: #ffffff; border-bottom: 1px solid #ececec; } .header-top .top-left h6 { font-size: 15px; line-height: 26px; color: #777777; font-weight: 400; padding: 14px 0px; font-family: "Roboto", sans-serif; } .header-top .top-left .contact-links { position: relative; display: inline-block; margin-bottom: 0px; } .header-top .top-left .contact-links li { display: inline-block; font-size: 15px; font-weight: 400; line-height: 26px; color: #b2b2b7; margin-right: 40px; font-family: "Open Sans", sans-serif; } .header-top .top-right .social-links { position: relative; display: inline-block; margin-bottom: 0px; margin-top: 1em; } @media (max-width: 767px) { .header-top .top-right .social-links { padding-left: 0; } } .header-top .top-right .social-links li { display: inline-block; } .header-top .top-right .social-links li i { width: 27px; height: 27px; line-height: 27px; margin: -1px; font-size: 16px; color: #777777; text-align: center; border: 1px solid #ececec; border-radius: 50%; transition: 0.3s; } .header-top .top-right .social-links li:hover i { color: #f59c1a; border-color: #f59c1a; } .header-top .top-right .contact-info { margin-bottom: 0 !important; } .header-top .top-right .contact-info .item { position: relative; display: inline-block; padding-left: 30px; margin-right: 0px; } .header-top .top-right .contact-info .item .icon-box { position: absolute; top: 0px; left: 0px; width: 27px; height: 27px; border-radius: 50%; text-align: center; line-height: 27px; border: 1px solid #f59c1a; } .header-top .top-right .contact-info .item .icon-box i:before { color: #f59c1a; font-size: 15px; } .header-top .top-right .contact-info .item strong { font-size: 16px; line-height: 26px; font-weight: 600; text-transform: capitalize; font-family: "Roboto", sans-serif; } .header-top .top-right .contact-info .item span { font-size: 15px; line-height: 26px; font-weight: 400; color: #777777; font-family: "Roboto", sans-serif; } .header-top .top-right .contact-info .item a strong { color: #f59c1a; } .header-top .top-right .contact-info .item a:hover { color: #f59c1a; border-color: #f59c1a; } .header-uper { padding: 40px 0px; } .header-uper .contact-info { float: left; } .subbanner_main_search { position: absolute; border-radius: 6px; right: 2%; } @media (max-width: 767px) { .subbanner_main_search { top: 2px !important; } } .page-title { position: relative; padding: 80px 0; background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--white); } .page-title:before { content: ""; left: 0; top: 0; width: 100%; height: 100%; position: absolute; background: rgba(25, 168, 101, 0.6); } @media (max-width: 991px) { .header-uper .contact-info { text-align: center; } .header-uper .contact-info .item { margin: 0 20px; } } .header-uper .contact-info .item { position: relative; display: inline-block; padding-left: 70px; margin-right: 40px; } .header-uper .contact-info .item .icon-box { position: absolute; top: 0px; left: 0px; width: 53px; height: 53px; border-radius: 50%; text-align: center; line-height: 57px; border: 1px solid #f59c1a; } .header-uper .contact-info .item .icon-box i:before { color: #f59c1a; font-size: 22px; } .header-uper .contact-info .item strong { font-size: 16px; line-height: 26px; font-weight: 600; color: #222222; text-transform: capitalize; font-family: "Roboto", sans-serif; } .header-uper .contact-info .item span { font-size: 15px; line-height: 26px; font-weight: 400; color: #777777; font-family: "Roboto", sans-serif; } .header-uper .right-side .link-btn { margin-left: 20px; margin-top: 5px; } .nav { border-radius: var(--gap-z2); padding: var(--gap-z2); background-color: var(--light-gray); margin: 0; } .nav .location { padding: 0 var(--gap-z2); } .nav .location::after { content: " : "; } .navbar { margin-bottom: 0; background: #01b169; border: none; border-radius: 0; } @media (max-width: 991px) { .navbar .navbar-nav { padding: 15px 0; } } .navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: var(--accent-color); } .lang { color: #666; } .lang.active { font-weight: 700; color: #f59c1a; } @media (max-width: 991px) { .navbar .navbar-nav li > .nav-link { padding: 6px 18px !important; } .navbar-dark .navbar-toggler { margin-left: 30px; } } .navbar-dark .dropdown-menu { margin-top: 8px; background-color: #01b169; } .navbar-shrink .navbar-toggler { color: #f59c1a; background-color: #f59c1a; border-radius: 0; padding-left: 8px; padding-right: 8px; margin: 0px 10px 0 50px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } #mainNav.navbar-shrink { background: #fff; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(1, 177, 105, 0.6); } #mainNav.navbar-shrink .dropdown-menu { margin-top: 8px; background-color: #fff; } #mainNav.navbar-shrink .container { background: url("../images/logo.webp") 0rem 0.3rem no-repeat; background-size: 113px 40px; align-items: normal; } @media (max-width: 767px) { #mainNav.navbar-shrink .container { background: url("../images/logo-1.webp") 0rem 0 no-repeat; background-size: 40px; align-items: normal; } } #mainNav.navbar-shrink #navbarLinks .navbar-nav { padding-left: 20px; } #mainNav.navbar-shrink .navbar-brand { color: #212529; } #mainNav.navbar-shrink .navbar-brand:hover { color: #f59c1a; } .dropdown-menu { padding: 0 20px 0 5px; min-width: auto; border: 1px solid rgba(1, 177, 105, 0.6); border-top: none; box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.15); } @media (max-width: 991px) { .dropdown-menu { padding: 0; border: none; padding-left: 2rem; background-color: transparent; } } .dropdown-menu li:last-child { margin-bottom: 10px; } .dropdown-menu .dropdown-item { font-size: 16px; transition: 0.3s; text-align: left; } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background-color: transparent; color: var(--accent-color); } .dropdown-menu .dropdown-item.active { text-decoration: underline; font-weight: 500; } .dropdown-submenu a.dropdown-toggle { color: var(--accent-color); } .dropdown-submenu a.dropdown-toggle::after { margin-left: 7px; vertical-align: 0.255em !important; transform: scale(1.3); } .dropdown-submenu .dropdown-menu { transform: initial; top: -15px; } @media (min-width: 1200px) { .navbar .dropdown-menu { display: block; transition: 0.2s; left: 50%; transform: translateX(-50%); border-radius: 0; background-color: #01b169; z-index: 1; opacity: 0; visibility: hidden; border: 1px solid rgba(1, 177, 105, 0.6); border-top: none; color: #fff; } .navbar .dropdown-menu .dropdown-item { padding-top: 5px; padding-bottom: 5px; } .navbar .dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; margin-top: 8px; } } @media (max-width: 991px) { .dropdown-submenu .dropdown-menu { margin: 0 10px !important; } } .dropdown-submenu.dropright .dropdown-menu { left: calc(100% + 10px); margin-left: 0; } .dropdown-submenu.dropleft .dropdown-menu { left: auto; right: 100%; margin-right: 0; } #mainNav.navbar-shrink .container, #mainNav.navbar-dark .container { align-items: normal; } .navbar-dark .nav-link, .navbar-dark .dropdown-item { color: #fff; padding: 0.5rem !important; } .navbar-shrink .nav-link, .navbar-shrink .dropdown-item { color: #333; } .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .nav-link:hover, .nav-link:focus, .nav-link.active { color: var(--accent-color); } @media (max-width: 991px) { .dropdown-item { text-align: center; } } .navbar-shrink .navbar-toggler { color: #f59c1a; background-color: #f59c1a; border-radius: 0; padding-left: 8px; padding-right: 8px; margin: 0px 10px 0 3rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .searchinput2 { position: relative; } .searchinput2 input { height: 40px; width: 200px; padding-left: 20px; border-radius: 6px 10px 10px 6px; border: 1px solid rgba(245, 156, 26, 0.48); } .searchinput2 #searchimg { height: 40px; width: 40px; position: absolute; top: 0; right: 0; border-radius: 6px; transition: all 0.3s; background-color: rgba(245, 156, 26, 0.7); display: flex; justify-content: center; align-items: center; color: var(--white); cursor: pointer; } .story img { border-radius: 1rem; width: 100%; box-shadow: var(--shadow); margin-bottom: var(--gap-1); } .promo-video { position: relative; padding: 150px 0; background: url(../images/background/research_place.webp); background-size: cover; background-position: center center; margin-top: var(--gap-3); } .promo-video:before { position: absolute; top: 0; content: ""; height: 100%; width: 100%; background: linear-gradient(to bottom, transparent, rgba(1, 177, 105, 0.8)); } .promo-video h2 { font-size: 60px; text-transform: uppercase; font-family: "Source Sans Pro", sans-serif; font-weight: 700; margin-bottom: 30px; } .promo-video a { display: block; height: 80px; width: 80px; margin: 0 auto; border: 5px solid #fff; transition: all 0.3s ease; border-radius: 100%; } .promo-video h2, .promo-video h6, .promo-video i { color: #fff; } .gallery .gallery-item { margin-top: 30px; border-radius: 6px; overflow: hidden; position: relative; box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.2); } .gallery .gallery-item:before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5)); top: 0; opacity: 1; transition: all 0.3s ease; } .gallery .gallery-item:hover { opacity: 0.7; transform: translateY(-10px); } .gallery .gallery-item h2 { position: absolute; z-index: 5; bottom: 85px; color: #fff; font-weight: 700; opacity: 1; transition: all 0.3s ease; padding: 30px; font-family: "Source Sans Pro", sans-serif; transform: translateY(0); } .gallery .gallery-item p { position: absolute; z-index: 5; bottom: 20px; color: #fff; font-weight: 400; opacity: 1; transition: all 0.3s ease; padding: 30px; font-size: 14px; line-height: 20px; transform: translateY(0); transition-delay: 0.1s; } .gallery .gallery-item img { width: 100%; height: 100%; } .item-holder { margin: var(--gap-1) 0; } .py-5 hr { height: 1px; padding: 0; border: none; text-align: center; background-image: linear-gradient( to right, rgba(60, 122, 198, 0), rgba(60, 122, 198, 0.75), rgba(60, 122, 198, 0) ); } .image-box { overflow: hidden; background-color: var(--white); margin-bottom: var(--gap-1); } .image-box img { width: 100%; border-radius: var(--gap-z2); box-shadow: var(--shadow); border: 1px solid var(--light-gray); } @media only screen and (max-width: 991px) { .py-5 .image-box img { width: 100%; } } .desc { font-family: var(--font-cn); color: var(--dark-gray); margin-top:1rem; } .bg-main { border-radius: var(--gap-1) var(--gap-1) 0 var(--gap-1); } .media-img img { border-radius: var(--gap-z1); } .media { margin: var(--gap-1) 0; text-align: center; } .contact-cont { width: 100%; padding: 3rem; background: rgba(1, 177, 105, 0.65); } .media-post-wrap .thumb { position: relative; border-radius: 5px; } .media-post-wrap .thumb img { width: 100%; border-radius: 5px; } @media (min-width: 992px) { .contact-cont { padding: 3rem; margin: 2rem 0; } .img-container, .img-container-r { display: flex; align-items: center; justify-content: space-between; } .img-container-r { flex-direction: row-reverse; } } .contact-area form { margin-top: 60px; } .contact-area .form-group { position: relative; margin-bottom: 20px; } .contact-area input, .contact-area textarea { position: relative; width: 100%; height: 50px; color: #777; padding: 10px 25px; background: #f4f4f4; display: block; border: 1px solid #ececec; } .contact-area .form-group select { -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; -o-appearance: none; height: 50px; width: 100%; padding: 10px 20px; border: 1px solid #ececec; background: #f4f4f4 url(../images/icons/icon-select.png) right center no-repeat; cursor: pointer; } .contact-area .form-group option { font-weight: 400; display: block; white-space: pre; height: 50px; padding: 20px; } .contact-area .form-group option:hover { background: #7b64cb; } .contact-area textarea { height: 190px; resize: none; padding-top: 15px; } .contact-area button { width: 100%; height: 50px; } .contact-area .form-group i { position: absolute; top: 16px; right: 20px; font-size: 15px; } .btn-style-one { font-size: 14px; font-weight: 600; color: #fff; line-height: 27px; padding: 8px 36px; background: #f59c1a; border: 1px solid #f59c1a; display: inline-block; text-transform: uppercase; font-family: "Source Sans Pro", sans-serif; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; border-radius: 0.375rem; } .btn-style-one:hover { color: #f59c1a; border: 1px solid #f59c1a; background: #fff; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .from{color:#999;}