/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/

/* header */
header#header {
  position: fixed;
  z-index: 99;
  background: transparent;
}
.user-logged-in header#header {
  position: relative;
}
#header-inner {
  flex-direction: row !important;
  justify-content: center;
  padding-top: 0;
  align-items: center;
}
header#header .branding-wrapper .site-logo img {
  max-width: 200px;
  width: 100%;
  height: auto;
}
#block-solo-subtheme-account-menu {
  display: none;
}
.user-logged-in #block-solo-subtheme-account-menu {
  display: flex;
}
#block-solo-subtheme-main-menu li.nav__menu-item > a {
  background-color: transparent;
}
section#block-solo-subtheme-advancedlanguageselectorblock select {
  line-height: normal;
  border: none;
}
section#block-solo-subtheme-advancedlanguageselectorblock select:focus-visible {
  border: none;
}
header button.en-link.dropdown-toggler.dropdown-toggler-parent {
  background: transparent;
}
#block-solo-subtheme-main-menu {
  margin: auto;
}
.user-logged-in #block-solo-subtheme-main-menu {
  margin: unset;
}
.header-inner .block-system-branding-block {
  margin-inline-end:unset !important;
}
.user-logged-in .header-inner .block-system-branding-block {
  margin-inline-end:auto !important;
}
/*common*/
p.btn-link {
  display: flex;
  justify-content: space-around;
}
.d-flex {
  display: flex;
}

/*.custom-div.top-banner*/
.custom-div.top-banner {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 100%;
}
.custom-div.top-banner .banner-bg {
  width: 100%;
}
.custom-div.top-banner img {
  max-width: 100%;
  width: 100%;
}
.custom-div.top-banner .banner-div.d-flex {
  z-index: 3;
  position: relative;
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  height: calc(100% - 15px);
  top: 0;
  left: 0;
}
.custom-div.top-banner .banner-div.d-flex p {
  font-size: 14px;
  line-height: normal;
}
.custom-div.top-banner .banner-div.d-flex p strong {
  font-size: 18px;
}
.custom-div.top-banner .banner-div.d-flex .banner-content {
  max-width: 600px;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}
.custom-div.top-banner .banner-div.d-flex .banner-content .bn-item {
  max-width: 450px;
  margin: 0 auto;
}
.custom-div.top-banner .banner-div.d-flex .banner-content p.btn-link a {
  padding: 10px 28px;
  display: block;
  /*background-color: #000000;
  border-radius: 30px; */
  margin-bottom: 15px;
  background-image: url(/themes/custom/solo_subtheme/imgs/bg-tel.png);
  background-position: center;
  background-size: cover;
  min-width: 189px;
}
.custom-div.top-banner .banner-div.d-flex .banner-form {
  width: 100%;
}
.custom-div.top-banner .banner-div.d-flex .banner-form form {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 40px;
  background-color: rgba(239,239,239, .2);
  border-radius: 30px;
}
.custom-div.top-banner .banner-form form input {
  background-color: transparent !important;
  border: unset;
  border-bottom: solid 1px #efefef;
  padding: 0 5px;
}
.custom-div.top-banner .banner-form form label.form-item__label a{
  color: #a9984f;
}
.custom-div.top-banner .form-type-webform-terms-of-service {
  line-height: normal;
  font-weight: 500;
  margin-top: 10px;
}
.custom-div.top-banner .form-type-webform-terms-of-service label{
  margin-top: 10px;
  display: block;
  font-size: 16px;
  line-height: 22px;
}
.custom-div.top-banner form input.webform-button--submit {
  background-color: #ffde59 !important;
  border: unset;
  color: #000000;
  font-weight: 600;
  padding: 0 30px;
  border-radius: 10px;
  margin-block: 0 !important;
  margin-block-start: 0 !important;
}
/*.custom-div.top-banner*/

.custom-div.top-banner-2 {
  max-width: 1300px;
  margin: 0 auto;
}
.custom-div.top-banner-2 .view-content {
  padding: 20px 30px;
}
.custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul {
  display: flex;
}
.custom-div.top-banner-2 .view-content .solo-clear.item-list .solo-li-list .paragraph {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}
.custom-div.top-banner-2 .icons-content {
  position: absolute;
  width: 100%;
  padding: 5px 30px;
}
.custom-div.top-banner-2 .icons-content .field--name-field-icon-title {
  margin-block-end: 0;
  min-height: 50px;
  line-height: normal;
}
.custom-div.top-banner-2 .view-content .field--name-field-icon-content .field__item {
  font-size: 13px;
  line-height: normal;
}
.custom-div.filed_jisuanqi {
  padding: 0 1.5rem;
  font-size: 0.8rem;
}
.custom-div.filed_contact_info {
  padding: 40px;
}
.custom-div.filed_contact_info .contact-info {
  display: flex;
  justify-content: space-between;
}
.custom-div.filed_contact_info .contact-info p {
  line-height: normal;
}
.custom-div.filed_content_with_bg_img .pb__content-title {
  text-align: center;
}
.custom-div.filed_content_with_bg_img .field--name-pb-content-body {
  padding: 20px 0;
}
.custom-div.filed_content_with_bg_img .field--name-pb-content-body p {
  text-align: center;
  line-height: normal;
}
.custom-div.filed_content_with_bg_img .field--name-pb-content-body ul {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}
.custom-div.filed_our_service_bio p {
  line-height: normal;
}
.custom-div.filed_our_service {
  padding: 30px;
}
.paragraph.paragraph--type--wo-men-de-fu-wu .pb__content-full {
  display: flex;
  margin: 30px 0;
}
.paragraph.paragraph--type--wo-men-de-fu-wu .pb__content-full > div {
  width: 0;
  flex: 0 0 50%;
}
.custom-div.filed_our_service .field--name-field-media-image img {
  /*max-width: 800px;*/
  width: 100%;
  height: auto;
}
.custom-div.filed_our_service .field--name-field-services-content {
  padding: 0 15px;
}
.custom-div.view-teams {
  padding: 30px;
}
.custom-div.view-teams .views-view-responsive-grid__item {
  margin-bottom: 30px;
}

.custom-div.view-comments {
  display: flex;
  justify-content: center;
  position: relative;
}
.custom-div.view-comments .bg-overload {
  position: absolute;
  height: 100%;
  top: 0;
  width: 20%;
  pointer-events: none;
  z-index: 3;
}
.custom-div.view-comments .bg-overload.overload-left {
  background-image: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.5),rgba(0,0,0,0.02));
  left: 0;
}
.custom-div.view-comments .bg-overload.overload-right {
  background-image: linear-gradient(to left,rgba(0,0,0,0.8),rgba(0,0,0,0.5),rgba(0,0,0,0.02));
  right: 0;
}
.custom-div.view-comments .comments-item {
  width: 300px;
  padding: 0 15px;
}
.custom-div.view-comments .swiper-slide {
  height: 100% !important;
}
.custom-div.view-comments .com-div {
  padding: 15px;
  font-size: 12px;
  line-height: normal;
  border-radius: 20px;
  border: 1px solid #efefef;
}
.custom-div.view-comments .com-div .com-text {
  margin-bottom: 15px;
}
.custom-div.view-comments .com-div .info-headshot {
  margin-right: 8px;
}
.custom-div.view-comments .com-div .info-headshot img {
  height: 40px;
  width: 40px;
}
.custom-div.view-comments .com-div .com-info.com-item{
  display: flex;
  align-items: center;
}
.custom-div.view-comments .comments-item .view-content {
  height: 500px;
  overflow: hidden;
}
.custom-div.filed_content_blog {
  margin: 30px auto;
  color: #efefef;
  line-height: normal;
  max-width: 1200px;
  width: 100%;
}
.custom-div.elements_blog {
  color: #efefef;
  line-height: normal;
  max-width: 960px;
  width: 100%;
  padding: 10px 30px;
  margin: 0 auto;
}
.custom-div.elements_blog .solo-ul li{
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #5a5a5a;
}
.custom-div.elements_blog h1,
.custom-div.elements_blog h2,
.custom-div.elements_blog h3,
.custom-div.elements_blog h4 {
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.custom-div.elements_blog .solo-ul li p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.custom-div.elements_blog .blog-title {
  font-weight: 600;
  margin: 10px 0;
}


.custom-div.elements_block_3 .data-imgs {
  width: 100%;
  position: relative;
}

.custom-div.elements_block_3 .data-img {
  width: 100%;
  transition: height 0.3s ease;
}

.custom-div.elements_block_3 .custom-image {
  width: 100%;
  height: auto;
  object-fit: cover; 
}

/* 使用CSS变量动态控制其他元素 
.custom-div.elements_block_3 .data-imgs::after {
  content: '';
  display: block;
  height: var(--dynamic-height, 0);
}*/

.custom-div.view-videos {
  position: relative;
}
.custom-div.view-videos .bg-overload {
  position: absolute;
  height: 100%;
  top: 0;
  width: 30%;
  pointer-events: none;
  z-index: 3;
}
.custom-div.view-videos .bg-overload.overload-left {
  background-image: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.5),rgba(0,0,0,0.02));
  left: 0;
}
.custom-div.view-videos .bg-overload.overload-right {
  background-image: linear-gradient(to left,rgba(0,0,0,0.8),rgba(0,0,0,0.5),rgba(0,0,0,0.02));
  right: 0;
}
.custom-div.filed_content3 .custom-imgs {
  justify-content: space-around;
}
.custom-div.filed_content3 .custom-imgs .custom-img-item {
  text-align: center;
}
.custom-div.filed_content3 .custom-imgs img {
  max-width: 200px;
  width: 100%;
}
.custom-div.blog_with_img {
  display: flex;
  justify-content: space-around;
  margin-bottom: 3rem;
  padding: 0 15px;
}
.custom-div.elements_blog2 {
  width: 100%;
  max-width: 510px;
}
.custom-div.elements_blog2 .view-content {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
}
.custom-div.elements_blog2 .view-content img {
  width: 150px;
}
.custom-div.elements_blog2 .view-content .solo-clear {
  padding: 0 10px;
  width: 0;
  flex: 1 1 33.33%;
}
.custom-div.blog_with_img p,
.custom-div.blog_with_img div {
  line-height: normal;
}
div.blog_with_img .blog-img-div,
div.blog-with-img .blog-img-div {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}
div.blog_with_img .blog-link,
div.blog-with-img .blog-link {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 1.4rem;
  height: 2rem;
  width: 2rem;
  display: flex;
  border-radius: 50%;
  border: 2px solid;
  justify-content: center;
  align-items: center;
}
.custom-div.filed_contact_us .field {
  display: flex;
  font-size: 13px;
  line-height: normal;
  justify-content: space-around;
}
.custom-div.filed_contact_us .contact-item {
  flex: 0 0 25%;
  padding: 0 15px;
}
div#our-services-content p.btn-link a {
    padding: 10px;
}
div#our-services-content p.btn-link a:first-of-type {
    background: url(/themes/custom/solo_subtheme/imgs/icon03.png);
    border-radius: 8px;
    background-size: cover;
}
div#page-wrapper {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.custom-div {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.custom-div.top-banner .banner-div.d-flex .banner-content p.btn-link a:first-of-type {
  background-image: url(/themes/custom/solo_subtheme/imgs/bg-whatsapp.png);
}
.custom-div.top-banner .banner-div.d-flex .banner-content p.btn-link a:last-of-type {
  min-width: 200px;
  padding: 10px;
  text-align: right;
}
.page-wrapper #block-solo-subtheme-main-menu li.nav__menu-item > button {
  background-color: transparent;
}
.page-wrapper #block-solo-subtheme-main-menu ul.navigation__menubar {
  background-color: transparent;
}
.breadcrumb {
  margin-top: 80px;
}
.path-frontpage .breadcrumb,
.path-node-11 .breadcrumb {
  margin-top: 0;
}
.path-node-72 .page-wrapper {
  padding: 0 60px;
}
.path-node-72 .page-wrapper .blog-items img {
  max-width: 100%;
  width: 100%;
}
.path-node-72 .block-views-blockhome-page-elements-block-6 {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
.page-node-type-blog .main-container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}
body.page-node-type-page .active-main-1 > .solo-inner > div {
  width: 100%;
  max-width: 100%;
}
body.page-node-type-page .solo-outer .region-inner {
  padding: 0;
}
div#footer-menu-inner {
  padding: 0;
}
div#primary-menu-inner {
  display: none;
}
div#primary-menu.solo-outer,
div#primary-menu .solo-button-menu {
  background-color: transparent !important;
  display: block;
  flex-grow: 0;
}
@media screen and (max-width: 1399.98px) {
  .custom-div {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
  }
  .page-node-type-blog .main-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
  .path-node-72 .page-wrapper {
    padding: 0 30px;
  }
  .path-node-72 .block-views-blockhome-page-elements-block-6 {
    max-width: 100%;
  }
}
@media screen and (max-width: 1199.98px) {
  h3 span, h3, h2, span, h2 span {
    white-space: pre-wrap;
  }
  .custom-div.top-banner .banner-div.d-flex {
    margin-top: 40px;
  }
  .custom-div.top-banner .banner-div.d-flex .banner-content {
    width: 0;
    flex: 0 0 50%;
  }
}
@media screen and (max-width: 991.98px) {
  .custom-div.top-banner {
    height: 500px;
  }
  .custom-div.top-banner .banner-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .custom-div.top-banner .banner-bg img{
    width: auto;
    height: 100%;
    max-width: unset;
    margin-left: -30%;
  }
  .custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul {
    flex-wrap: wrap;
  }
  .custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul li {
    width: 0;
    flex: 0 0 33.33%;
  }
}
@media screen and (max-width: 767.98px) {
  .custom-div.top-banner {
    min-height: 660px;
    height: 100%;
  }
  .custom-div.top-banner .banner-div.d-flex {
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .custom-div.top-banner .banner-div.d-flex .banner-content {
    flex: 0 0 90%;
  }
  .paragraph.paragraph--type--wo-men-de-fu-wu .pb__content-full {
    flex-wrap: wrap;
    justify-content: center;
  }
  .paragraph.paragraph--type--wo-men-de-fu-wu .pb__content-full > div {
    width: 0;
    flex: 1 1 80%;
  }
  .d-flex.custom-imgs {
    flex-wrap: wrap;
    justify-content: unset !important;
  }
  .custom-div.filed_content3 .custom-imgs .custom-img-item {
    width: 0;
    flex: 0 0 33.33%;
    text-align: center;
    margin-bottom: 30px;
  }
  .custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul li {
    width: 0;
    flex: 0 0 50%;
  }
  .page-wrapper #block-solo-subtheme-main-menu li.nav__menu-item > button {
    background-color: transparent;
  }
  .custom-div.blog_with_img {
    flex-wrap: wrap;
  }
  .path-node-72 .page-wrapper {
    padding: 0 15px;
  }
  .breadcrumb {
    margin-top: 120px;
  }
  .path-frontpage .breadcrumb,
  .path-node-11 .breadcrumb {
    margin-top: 0;
  }
  .sm-icons a > span {
    position: relative;
  }
  #block-solo-subtheme-main-menu {
    display: none;
    position: absolute;
    width: 100%;
  }
  #block-solo-subtheme-main-menu.mobile-active {
    display: block;
  }
  #block-solo-subtheme-main-menu ul { 
    display: block;
  }
  .solo-inner #block-solo-subtheme-main-menu .navigation__default>li>ul.sub__menu {
    position: relative;
    inset-block-start: unset;
    inset-inline-start: 0;
  }
  div#primary-menu-inner {
    display: block;
    background-color: transparent;
    position: fixed;
    right: 0;
    pointer-events: all;
    width: auto;
  }
  .user-logged-in div#primary-menu-inner {
    display: none;
  }
  div#primary-menu-inner .navigation__menubar {
    width: 100vw;
  }
  #copyright {
    min-height: 150px;
    display: block;
  }
}
@media screen and (max-width: 575.98px) {
  .custom-div.top-banner {
    min-height: 1000px;
  }
  #block-solo-subtheme-main-menu .solo-inner ul.navigation__menubar {
    background-color: transparent;
  }
  .custom-div.top-banner .banner-div.d-flex .banner-form {
    padding: 0 15px;
  }
  #block-solo-subtheme-main-menu .solo-clear.solo-menu.navigation-default {
    background: rgba(225, 225, 225, 0.3);
  }
  .custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul li {
    width: 0;
    flex: 0 0 50%;
  }
  .custom-div.filed_content3 .custom-imgs .custom-img-item {
    flex: 0 0 50%;
  }
  .custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul {
    justify-content: center;
  }
  .custom-div.top-banner-2 .view-content .solo-clear.item-list > ul.solo-ul li {
    width: 0;
    flex: 0 0 80%;
  }
  .custom-div.top-banner .banner-div.d-flex .banner-content p.btn-link {
    flex-wrap: wrap;
  }
  section#block-solo-subtheme-site-branding {
    order: 1;
  }
  nav#block-solo-subtheme-main-menu {
    order: 3;
  }
  section#block-solo-subtheme-advancedlanguageselectorblock {
    order: 2;
    margin-right: 12px;
  }
  div#header-inner {
    justify-content: space-between;
  }
  .custom-div.top-banner .banner-div.d-flex {
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .custom-div.top-banner .banner-div.d-flex > div {
    flex: 0 0 auto !important;
    width: unset !important;
    padding: 0 15px !important;
  }
  .custom-div.filed_contact_us .field {
    justify-content: start;
  }
  .custom-div.filed_contact_us .contact-item {
    flex: 0 0 50%;
  }
}
@media screen and (max-width: 600px) {
    .ePMqfs {
        width: 48px;
        height: 48px;
        bottom: 100px !important;
        right: 20px;
    }
}