:root {
   --cst-alpha-rgb:255, 255, 255;
   --card-gap:1.5rem;
   --card-image-radius:0.75rem;
   --card-content-padding:1.5rem;
   --card-content-color:var(--bulma-text);
   --card-smallGap:0.5rem;
   --card-fontSize:1rem;
}

/*
fontawesome图标的样式，由 font-weight 属性控制：
实心（Solid）：font-weight: 900
双色（Duotone）：font-weight: 600
常规（Regular）：font-weight: 400
轻体（Light）：font-weight: 300
细体（Thin）：font-weight: 100
*/

/* 
.-revOrder  反转子元素的order次序

 */


#query_init #query_txt::before{
  content: "本系统之数据只用于客户查询核对证书及报告真伪，请勿作他用！";
}
#query_forInput #query_txt::before{
  content: "请输入你要查询的报告编号！";
}
#query_exist #query_txt::after{
  content: "查询到以下报告编号：";
}
#query_exist #query_No::after{
  content: "";
}
#query_notExist #query_txt::after{
  content: "报告编号：";
}
#query_notExist #query_No::after{
  content: " 不存在。";
}
#query_searching #query_txt::after{
  content: "正在查询";
}



/* 给提示类信息加侧边符号 */
.has-dot-aside{
   position: relative;
   display: inline-block;   
   padding: 0 calc(var(--cst-dot-size) - 1rem);
   --cst-dot-size: 5rem;
}
ol.has-dot-aside, ol.has-dot-aside{
   position: relative;
   display: inline-block;
   margin-left: 0;
   padding-left: var(--cst-dot-size);
}

.has-dot-aside::before, .has-dot-aside::after{
   font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
   font-size: var(--cst-dot-size);
   line-height: 100%;
   color: var(--bulma-text);
   opacity: 0.2;
   position: absolute;
}
.has-dot-aside::before{
   content: "“";
   left: 0;
   top: 0;
}
.has-dot-aside::after{
   content: "”";
   line-height: 0;
   right: 0;
   bottom: 0;
}


/*
.swiper-container {
   width: 100%;
   height: 100%;
}
*/

.swiper {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;

    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
}
/* 去掉ul的默认margin */
ul.swiper-wrapper{
   margin: 0 !important;
   list-style-type: none !important;
}

.swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
}
.swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* Optional: for better fit if you want to cover the slide */
}

/* 给父元素上面加渐变层（要求父元素 position:relative） */
.-alpha { 
   position:absolute;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(to right, rgba(var(--cst-alpha-rgb), 1) 0%, rgba(var(--cst-alpha-rgb), 0) 20%, rgba(var(--cst-alpha-rgb), 0) 80%, rgba(var(--cst-alpha-rgb), 1) 100%);
}


/* 当启用swiper缩略图时，以下swiper_thumbs才生效 */
.swiper_thumbs {
    box-sizing: border-box;
    padding: 0;
}
.swiper_thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.6;
    margin: 0 !important;
}
.swiper_thumbs .swiper-slide-thumb-active {
    opacity: 1;
}


/* 给swiper外围添加wrap_swiperHTML，并增加自定义的pre和next按钮 */
.wrap_swiperHTML{
   display: flex;
   gap: 0.5rem;
}
.wrap_swiperHTML .swiperHTML{
   flex-grow: 1;
   display: block;
}
.wrap_swiperHTML .swiper-aside-prev, .wrap_swiperHTML .swiper-aside-next{
   display: flex;
   align-items: center;
}
.wrap_swiperHTML .swiper-aside-prev a::before{
   content: '◀';
   font-size: 2rem;
}
.wrap_swiperHTML .swiper-aside-next a::before{
   content: "▶";
   font-size: 2rem;
}



/* swiperHTML：滚动不是图片，是html内容
.swiperHTML.swiper {
   display: block;
}
.swiperHTML.swiper li {
   display: block;
   box-sizing: border-box;
   margin:0;
}
.swiperHTML.swiper ul{
   list-style: 0;
   margin: 0;
}
.swiperHTML.swiper li h5{
   margin-top:1rem;
   margin-bottom: 0.5rem;
}
.swiperHTML.swiper li img{
   height: 10rem;
}
 */

figure{
   overflow: hidden;
   border-radius: 0;
}

figure img{
   width: 100%;
   height: auto;
   border-radius: 0;
   object-fit: cover;
}
/* 覆盖bulma的默认设置 */
.card-image:first-child img {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}
figure.full{
   width: 100%;
   height: 100%;
   margin:0;
}
figure.full img{
   height: 100%;
}
figure.box {
   padding: 0;
   border:solid 0 transparent;
}
figure.box.radius img {
    /* 应用.box前提下才有可能添加了border-width空隙 */
    border-radius: calc(0.5*var(--card-image-radius));
}
figure.radius {
    border-radius: var(--card-image-radius);
    overflow: hidden;
}
figure.radiusTop {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
figure.radiusBottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
figure.radiusLeft {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
figure.radiusRight {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

figure.icon{
   width: 100%;
   display: inline;
   align-items: flex-start;
   justify-content: center;
   color: var(--bulma-primary);
}
figure.icon i{   
   /* margin:1rem 0; */
}





.navbar-start li.navbar-item {
   padding: 0;
   flex: 1;
}
.navbar-brand .navbar-item:hover{
   background-color: transparent;
}





/* 如果是html内容 */
.swiper-content{
   position:absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   /*
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   */
}
.swiper-content .swiper-body{
   text-align: center;
}
.swiper-content .subtitle{
   margin-top: 0.5em;
}


[data-url] :is(h5,img,a) {
    cursor: pointer;
}


.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: var(--cst-heading-color);
}

.content h1 a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a {
  color: var(--cst-heading-color);
}


.button.is-text{
   padding: 0;
}
.button.cst-prim{
   border-color: var(--bulma-primary);
   background-color: var(--bulma-primary);
   color: #ffffff;
}


.title, .title a{
   color: var(--bulma-text-title);
}
.title small{
   font-size: 1rem;
   padding-left: 0.5rem;
   font-style: italic;
}

#banner{
   margin-bottom: 1.5rem;
}

/* 带title 的当前位置position */
#position {
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   border-bottom: solid 1px var(--bulma-primary);
}
#position .breadcrumb {
   margin: 0.5rem 0;
}
#position .title{
   display: none;
   line-height: 50%;
}

.truncated-text {
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   /* height: calc(var(--bulma-body-line-height) * var(--bulma-body-font-size) * 5); */
 }

/* .tabs li 默认是等宽的，这里改成自动  */
.content .tabs li{
   width: auto !important;
}




.card {
   width: 100%;
   font-size: var(--card-fontSize);
}
.card .card-header{
   width: 100%;
   padding: var(--card-smallGap) var(--card-gap);
   gap: var(--card-smallGap);
}

.card.noshadow{
   background-color: transparent;
}
.card.noshadow .card-header{
   padding: var(--card-smallGap);   
}

.card h5{
   font-size: 1em; 
}

.card .card-header > *{
   padding-left: 0;
   padding-right: 0;
}
.card .card-header-title{
   margin-bottom: 0;
   color: var(--bulma-primary);
}
.card .card-header-icon::before{
   content: "\f107";
   font-weight: 400;
   font-family: "Font Awesome 6 Pro";
   color:var(--bulma-primary);
}


.card .card-content{
   width: 100%;
   color: var(--card-content-color);
   padding: var(--card-content-padding);
   overflow: hidden; /* 为了修正里面.button is-pulled-right 浮动造成的高度丢失 */
}
.card .card-content:has(h5:only-child){
   padding: 1rem;
   text-align: center;   }

.card.noshadow .card-content{
   padding-left: var(--card-smallGap);
   padding-right: var(--card-smallGap);
}

.card .title, .card h5{
   font-weight: bold;
   color: var(--bulma-primary);
   margin-bottom: 0;
}

.card .card-content * + *{
   margin-top: var(--card-smallGap);
}

/* 覆盖bulma中 .content p:not(:last-child) 的 margin-bottom 设置*/
.card .card-content p:last-of-type{
   margin-bottom: 0;
}
.card .card-content time{
   float: right;
   font-style: italic;
}
.card .card-footer{
   width: 100%;
   border-top:solid 1px #cccccc;
}

.card .card-footer-item{
   display: flex;
   justify-content: right;   /* 设置按钮居左中右 */
   align-items: center;
}




/* 将圆角设置为直角 */
.card.rightangle, .card.rightangle .card-header, .card.rightangle .card-footer{
   border-radius: 0;
}

/* 设置不要阴影  */
.card.noshadow, .card.noshadow .card-header, .card.noshadow .card-footer, .card.noshadow .card-image figure:not(.box){
   box-shadow:none;
}



/* .lrm 从左到右到底排版，.lrm.reverse 从右到左到底排版 */
.card.lrm{
   display: flex;
   flex-wrap: wrap;
   column-gap: var(--card-gap);    /* 仅横向间距生效 */
   row-gap: calc(0.5*var(--card-gap));          /* 确保纵向间距为 0 */
   padding: var(--card-gap);
   padding-bottom: calc(0.5*var(--card-gap));
}
.card.lrm.reverse{
   flex-direction: row-reverse;  /* 子元素水平方向从右到左排列 */
}
.card.lrm .card-header{
   /* flex:flex-grow flex-shrink flex-basis */
   flex: 1 1 0;
   padding: 0;
   box-shadow: none;
}
.card.lrm .card-header > *{
   padding: 0;
}

.card.lrm .card-header .card-header-title,
.card.lrm .card-header .card-header-icon{
   /* 需要可覆盖bulma默认值 padding: var(--bulma-card-header-padding)  */
}

.card.lrm .card-image{
   flex: 0 1 40%;
}

.card.lrm .card-content{
   flex: 0 1 100%;
   padding: 0;
}

.card.lrm.noshadow{
   padding: 0;
}


/* .ltr 从左到右排版，.ltr.reverse 从右到左排版 */
.card.ltr{   
   display: flex;
   flex-wrap: wrap;
   gap: 0 var(--card-gap);
}
.card.ltr.reverse{   
   flex-direction: row-reverse;  /* 子元素水平方向从右到左排列 */
}
.card.ltr .card-header{
   flex: 0 1 100%;
   box-shadow:none;
   border-bottom: solid 1px var(--bulma-primary);
}

.card.ltr .card-image figure, .card.ltr .card-content{
   /* 先设置上下margin */
   margin: var(--card-gap) 0;
}

.card.ltr .card-image{
   /* flex:flex-grow flex-shrink flex-basis */
   flex: 0 1 30%;
}


.card.ltr .card-image figure{
   /* 再设置左右margin */
   margin-left:var(--card-gap);
   margin-right:0;  
}
.card.ltr .card-content {
   /* flex:flex-grow flex-shrink flex-basis */
   flex: 1 1 0;
   padding: 0;
   padding-right: var(--card-content-padding);
}
.card.ltr.reverse .card-image figure{
   margin-left:0;
   margin-right:var(--card-gap);
}
.card.ltr.reverse .card-content {
   padding: 0;
   padding-left: var(--card-content-padding);
}

.card.ltr.noshadow .card-image figure{
   margin:0;
/*
   margin-left:0;
   margin-right:0;
*/
}

.card.ltr.noshadow .card-content{
   padding-left: var(--card-smallGap);
   padding-right: var(--card-smallGap);
}










/* .card-image:first-child 确保第一个元素是.card-image (即前面没有.card-header元素) */
.card.ltr.noshadow .card-image:first-child, .card.ltr.noshadow .card-image:first-child + .card-content {
   margin-top: 0;
}

.card.ltr .card-footer{
   flex-basis: 100%;
   border-top: solid 1px var(--bulma-primary);
}

.card.ltr .card-footer-item{
   justify-content: right;
}





#rptResult{
   margin-bottom: 1.5rem;
}
#rptResult table th::after {
   content: "：";
}



#foot_navi ul.navbar-dropdown{
   display: none;
}
/* 底部菜单展开 */
#foot_navi.expand ul.navbar-dropdown{
   display: block;
}

#foot_navi.expand ul{
   display: flex;
}

#foot_navi.expand ul ul{
   flex-direction: column;
   flex-wrap: wrap;
   margin-top: 0.5em;
}
#foot_navi.expand ul ul li{
   box-sizing: border-box;
}

.light > ul li a{
   color: #ffffff;
}
.light > ul ul li a{
   color: #A0A0A0;
}
.light > ul ul li a:hover{
   color: var(--bulma-white);
}

.except_ul ul {
   margin-inline-start: 0;
}
.except_ul ul h5{
   margin-bottom: 0.5rem;
}
.except_ul ul li + li{
   margin-top: 1rem;
}
.except_ul ul li::marker {
   content: "";
}
body{
   background: var(--cst-body-background);
}




/* bulma中对.content li + li 设置了margin-top，这里恢复为0*/
ul.columns > li{
   margin-top: 0;
}
.columns .column > img{
   width: 100%;
   height: auto;
}





main #aside{
   display: none;
}
main #aside > ul > li {
   display: none;
}
main #aside > ul > li.selected {
   display: block;
}
main #aside > ul > li > a {
   font-size: 1.5em;
}
main #aside ul ul {
   margin-top: 1em;
}

/* -has-aside: 需要显示侧边aside */
main.-has-aside{
   display: flex;
}
main.-has-aside > *{
   box-sizing: border-box;
}
main.-has-aside #aside{   
   display: block;
   flex: 3;
}
main.-has-aside #body{
   flex: 9;
}










/* .level建议附加到ul */
ul.level{
   margin: 0;
   list-style:none;
}
/* .level中增加-equal-width子元素等宽属性 */
.level.-equal-width > * {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
}


.level article {
   text-align: center;
}

article{
    margin-block-end: 1em;
    margin-inline-end: 0px;
}






section + section{
   margin-top: 2rem !important;
}



/* 定义contact和query页面ul */
#com_content ul{
   list-style: none;
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-left: 2.5rem;
}
#com_content ul li{
   padding-left: 1rem;
}
#com_content ul li::marker{
   font-family: "Font Awesome 6 Pro";
   font-weight: 100;
   font-style: normal;
   color:var(--bulma-primary);
   content: "\e122";
}


ul li{
   box-sizing: border-box;
}
/* 由于bulma中已对.content ul做过定义，这里恢复.columns的默认值*/
ul.columns{
   margin-inline-start: calc(-1* var(--bulma-column-gap));
   margin-inline-end: calc(-1* var(--bulma-column-gap));
   margin-top: calc(-1* var(--bulma-column-gap));
   list-style-type: none;
}
ul.level, ul.swiper-wrapper {
   margin: 0;
   list-style:none;
}




/* 

自定义样式，用于覆盖 Bulma 默认样式
@media screen and (max-width: 1023px) 就是touch，用这个来作为小屏幕如手机的断点

 */

@media screen and (max-width: 1023px) {
   main{
      padding: 1rem;
   }

   ul.columns, main .columns{
      margin-inline-start: 0 !important;
      margin-inline-end: 0 !important;
   }

   /* 通过设置flex-direction: column，采用竖直方向排版 */
   .columns{
      flex-direction: column;
      /*
      margin-inline-start: 0;
      margin-inline-end: 0;
      */
   }
   .columns > .column {
      width: 100%;
      padding: 0;
   }
   .columns > .column + .column {
      margin-top:1rem;
   }


   article, article.column{
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
   }
   .title:has(+ article, + .content_info){
      /* margin-bottom: 1rem !important; */
   }

   /* 手机浏览不出现左右箭头 */
   .swiper-button-prev:after,
   .swiper-button-next:after {
      opacity: 0;
   }
   /* 
   .-is-hidden-touch{
      display: none;
   }
   */
}


/*
此为电脑等大屏幕
当小于1024px，菜单将默认隐藏，点击才展开*/
@media screen and (min-width: 1024px) {
   .navbar-start li a.navbar-item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
   }
   .navbar-start.is-center {
      flex: 1; /*宽度100%*/
      justify-content: space-around;
   }
   .navbar-start.is-center li a.navbar-item {
      justify-content: center;
   }
   .navbar-start.is-center li a.navbar-item {
      padding-left: 0;
      padding-right: 0;
   }
}