:root {
   --ratio: 4.8/1,center;
   --ratio-00: 50/13,50% 50%;
   --ratio-03: auto,center;
   --ratio-03_children: auto,center;

   --ratio-33_children: auto,center;  /* 下面所有子菜单 */
   --ratio-22_children: 3/1,center;  /* 下面所有子菜单 */
   --ratio-23: 4/1,center;

   --bulma-primary: #015198; 


   --cst-body-background:#f1f3f5;
   --cst-second:#019cdc;
   
   --cst-alpha-rgb:0, 54, 101;


   --cst-heading-color:#015198;
   --cst-title-color:blue;

   --is-mobile:"false";
}




#query_init #query_txt::before{
  /*
   content: "欢迎进入证书/报告查询系统，\A本系统以维护客户资料保密性为前提，便于客户快速核验证书/报告有效性。";
   white-space: pre-line;
  */
  content: "";
}
#query_forInput #query_txt::before{
  content: "请输入你要查询的报告或证书编号！";
}
#query_exist #query_txt::after{
  content: "▼ 已查询到以下报告信息，请您核对！";
}
#query_exist #query_No{
   display: none;
}


/* rewrite bulma */
.breadcrumb {
   /* --bulma-breadcrumb-item-padding-vertical: 0; */
   --bulma-breadcrumb-item-padding-horizontal: 0.3em;
}
.breadcrumb li + li::before {
   color: var(--bulma-primary);
   content: "›";
}
.breadcrumb .is-active{
   display: none;
}

.button.cst-prim{
   border-color: var(--bulma-primary);
   background-color: var(--bulma-primary);
   color: #ffffff;
}
.button.cst-prim:hover{
   border-color: #333333;
   background-color: #333333;
}
.button.is-rounded.cst-prim{
   border-color: var(--bulma-primary);
   background-color: transparent;
   color: var(--bulma-primary);
}
.button.is-rounded.cst-prim:hover{
   background-color: var(--bulma-primary);
   color: #ffffff;
}
.button.cst-sec{
   border-color: red;
   color: red;
}
.button.cst-sub{
   border-color: red;
   color: red;
}

.title{
   font-weight: normal;
}

#home_aboutInfo div:nth-child(1) {
   padding-right: 2.5rem;
}



main h4 small{
   font-weight: normal;
   font-style: italic;
   font-size: 0.8rem;
   margin-left: 0.3rem;
}

main #aside{
   margin-right: 3rem;
}
main #aside > ul{
   /* 高度是4rem, #banner margin-bottom 是1.5rem */
   margin-top: -5.5rem;
   position: relative;
   z-index: 2;
   border-radius: 1rem 1rem 0 0;
   box-shadow: 0 0.5em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1);
}
main #aside > ul > li > a {
   line-height: 4rem;
   height: 4rem;
   font-size: 1.8em;
   display: block;
   text-align: center;
   background: var(--cst-second);
   border-radius: 1rem 1rem 0 0;   
   color: white;
}
main #aside ul ul {
   margin: 0;
}


body:not(.service, .about) main #aside {   
   background: url("../images/aside_contact.jpg") no-repeat;
   position: relative;
   background-position: center center;
   background-size: cover;
}
body.news main #aside {   
   background-image: url("../images/pic_culture.jpg");
}
main #aside .-alpha {
   background-image: linear-gradient(to bottom, rgba(241, 243, 245, 1), rgba(241, 243, 245, 0));
}












main .content_title{
   display: none;
}


main #aside ul ul li a {
   display: block;
   border-bottom: solid 1px var(--cst-second);
   padding: 0.8rem;
}
main #aside ul ul li a:hover, main #aside ul ul li.selected a {
   border-color: var(--bulma-primary);
   background: white;
}
main #aside ul ul li a::after {
   content: "\f101";
   float:right;
   font-family: "Font Awesome 6 Pro";
   font-weight: 900;
   margin-right: 5px;
   color:var(--bulma-primary);
}

main #aside ul li::marker {
   content: "";
}

















#head{   
   padding: 0.8rem 0;
}


/* 让headNavi 靠右 */
.navbar-menu{
   flex-grow: 0; /* 如果存在剩余空间，也不放大  */
}
.navbar-start {
   align-items: center;
   gap: 1.5rem;
}
.navbar-start > li.navbar-item > a {
   color: var(--bulma-link);
   font-size: 1.2rem;
   padding-left: 0;
   padding-right: 0;
   background-color: transparent;
   border-bottom: solid 0.2rem transparent;
}
.navbar-start > li.navbar-item > a:hover,
.navbar-start > li.navbar-item.selected  > a {
   border-bottom-color: var(--cst-second);
}
.navbar-brand .navbar-item #logo{
   width: 10.5rem;
   height: auto;
   max-height: 3.5rem;
}
.navbar-start .navbar-dropdown{
   padding: 0.5rem;
   background: white;
   border-top-width: 0;
}
.navbar-end{
   display: none;
}


body .card h5{
   font-size: 1.2em;
   font-weight: normal; 
}
.card {
   background: #ffffff;
}
#home_serviceHTML .card-content{
   background: #ffffff;
   padding-left: calc(0.75*var(--card-content-padding));
   padding-right: calc(0.75*var(--card-content-padding));
}
.card.lrm .card-header {
   flex-direction: row-reverse;
}

#position{
   margin-bottom: 2rem;
}
#position .title{
   display: block;
}




body.home #position {
   display: none;
}

#component #com_aside{
   display: none;
}
#readme {
   margin:2rem 0;
}
#content > .title{
   display: none;
}
#content h3, .imgs_title{
   font-size: 1.2rem;
   background: linear-gradient(to left, var(--bulma-primary), var(--cst-second));
   color: white;
   font-weight: normal;
   padding: 0.6rem 0.8rem;
   border-radius: 0.5rem;
   margin-bottom: 1.5rem;
}
#content h3 .icon, .imgs_title .icon{
   float: right;
}





.swiper-button-prev, .swiper-button-next{
   color: var(--cst-second);
}

.wrap_swiperHTML .swiper-aside-prev a::before{
   content: "\f060";
   font-family: "Font Awesome 6 Pro";
   margin-right: 5px;
   color:var(--bulma-primary);
}
.wrap_swiperHTML .swiper-aside-next a::before{
   content: "\f061";
   font-family: "Font Awesome 6 Pro";
   margin-right: 5px;
   color:var(--bulma-primary);
}


.swiper_thumbs .swiper-slide {
    width: auto;
    height: auto;
    opacity: 1;
}
.swiper_thumbs .swiper-slide-thumb-active a,.tabs a:hover {
    border-bottom-color: var(--bulma-primary);
    color: var(--bulma-primary);
}


.tabs a {
    border-bottom-width: 2px;
}

.tabsTitle {
   color: var(--bulma-primary);
   font-size: 2rem;
}
.tabsTitle::before {
   content: "\f138";
   font-family: "Font Awesome 6 Pro";
   margin-right: 10px;
   color:var(--bulma-primary);
   font-weight: 900;
}

#home_serviceHTML .swiper-button-next, #home_serviceHTML .swiper-button-prev{
   display: none;
}





.swiperHTML.swiper li {
   padding: 0.5rem;
}
.swiperHTML.swiper li h5{
   color:var(--bulma-primary);
   font-weight: normal;
}
#home_lab.swiperHTML.swiper li img{
   height: 15rem;
}
#home_service.swiperHTML.swiper li img{

}






#home_serviceHTML .truncated-text {
   -webkit-line-clamp: 2;
 }
 #home_serviceHTML .swiper-pagination {
   display: none;
 }
 




#footer {
   margin-top: 2em;
   padding-top: 2em;
   background: #003665;
}
#footer #footBar {
   display: flex;
}
#footer #footBar #foot_navi {
   flex: 2;
}
#footer #footBar #advantage {
   flex: 1;
}
#footer #copyright {
   border-top:solid 1px var(--bulma-primary);
   padding:0.5em;
   margin-top: 1.5em;
   color: var(--cst-second);
}
#footer .level {
   gap: 0;
   margin-top: 1em;
}
#footer .level .icon {
   color: white;
   display: block;
   width: 4rem;
   height: 4rem;
   display: flex;
   border-radius: 5rem;
   padding: 0.5rem;
   box-sizing: border-box;
   background: var(--cst-second);
}
#footer .level img {
   width: 80%;
   height: 80%;
   object-fit: cover;
}
#footer .level figcaption {
   margin-top: 0.5em;
   color: #eeeeee;
}


#footer li.home,
#footer li.contact,
#footer li.news,
#footer li.query {
   display: none;
}

#foot_navi.expand ul ul{
   max-height: 6em;
}
#foot_navi.expand ul ul li{

}
#foot_navi.expand > ul > li > a, #advantage h3{
   font-size: 1.4em;
   color: #ffffff;
}
#foot_navi.expand > ul ul li a::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--cst-second);
}

#footer #foot_navi ul > li.about{
   flex:2;
}
#footer #foot_navi ul > li.service{
   flex:5;
}

.light > ul ul li a{
   color: #eeeeee;
}




#component h3{
   font-weight: bold;
   font-size: 1.25rem;
   color: var(--bulma-primary);
}

#component #body{
   padding-top: 0;
}


#rptResult{
   margin-top: 1rem;
}
#rptResult strong{
   margin: 0 0.3rem;
}

#rptResult table {
   font-size: 0.9em;
}
#rptResult table th {
   white-space: nowrap;
   width: fit-content;
   text-align: right;
   padding-right: 0;
}
#rptResult table td {
   padding-left: 0;
}
#rptResult table th::after {
   content: "：";
}

#rptResult table{
   margin-top: 1rem;
   border:solid 1px var(--bulma-primary);
}

#rptResult table tr:nth-child(even) {
   background-color: #ffffff;
}




#layout_contact ul li::marker{
   font-family: "Font Awesome 6 Pro";
   font-weight: 900;
   color:var(--bulma-primary);
}
#layout_contact ul li.company::marker{
   content: "\f015";
}
#layout_contact ul li.addr::marker{
   content: "\f14e";
}
#layout_contact ul li.http::marker{
   content: "\e5d5";
}
#layout_contact ul li.email::marker{
   content: "\f0e0";
}
#layout_contact .company_en, #layout_contact .addr_en {
   list-style-type: none;
   color: #999999;
}
#layout_contact .company_en::marker, #layout_contact .addr_en::marker {
   content: "";
}

.content #advantage{
   padding-top: 1rem;
   text-align: center;
}

#advantage .title{
   font-size: 2.2rem;
   margin-bottom: 1rem;
   background: linear-gradient(to left, var(--bulma-primary), var(--cst-second));
   padding: 0.7rem;
   color: white;
   border-radius: 0.5rem;
}



#advantage .subTitle{
   display: inline-block;
   font-size: 1.3rem;
   font-style: italic;
   color: var(--bulma-primary);
   margin-bottom: 1rem;
}
#advantage article{
   padding: 0 0.5rem;
}











/*以下是扩展的css*/
.truncated-text {
   display: -webkit-box;
   -webkit-line-clamp: 25; /* 指定显示的行数，这里是 3 行 */
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 @media screen and (min-width: 1024px) {
   #head{
      display: flex;
      justify-content: space-between;
   }
   header, main, #foot_navi, #footBar, #copyright {
      width: 80%;
      max-width: 1280px;
      margin: 0 auto;
   }

   body #banner {
      background: rgba(var(--cst-alpha-rgb), 1);
   }

   body #banner > div {
      max-width: 1600px;
      margin: 0 auto;
   }

   body.home #banner{
      margin-bottom: 3rem;
   }
   .navbar-start > li > a.navbar-item:hover {

   }
}



@media screen and (max-width: 1023px) {
   :root {
      --ratio: 3/1,center;
      --ratio-00: 3/1,center;
      --ratio-03: 3/1,center;
      --ratio-03_children: 3/1,center;
   } 

   #head .navbar-menu{
      padding: 1rem;
   }

   .navbar-brand{
      background-image: none;
   }

   .has-dot-aside{
      --cst-dot-size: 4rem;
   }


   #container > *{
      width: 100%;
      margin: 0 auto;
   }

   #home_aboutInfo{
      display:flex;
      /* 手机端竖排反转次序 */
      flex-direction: column-reverse;
   }

   #home_aboutInfo div:nth-child(1) {
      padding-right: 0;
      margin-top:1rem;
   }
   #home_aboutInfo .title {
      text-align: center;
      margin-top: 0 !important;
   }

   #footer {
      margin-top: 1em;
   }

   #footer #foot_navi ul ul li a{
      font-size: 0.9em;
   }
   #footBar {
      padding-left: 1em;
      padding-right: 1em;
   }
   #footer #copyright span {
      display: none;
   }

   #foot_navi .has-logo{
      display: none;
   }
   #advantage .title{
      font-size: 2rem;
   }
   #advantage .subTitle{
      font-size: 1.2rem;
   }

   #home_lab.content_list li img{
      width: 100%;
      height: 15rem;
   }
   #home_service.content_list li img{
      width: 100%;
      height: 13rem;
   }

   #position .title{
      font-size: 1.4rem;
   }

}