@charset "utf-8";
/* CSS Document */

:root {

  --blue: #44a8f2;

	--color-ffffff: #ffffff;
	--color-101828: #101828;
  --color-121212: #121212;
  --color-333333: #333333;
  --color-666666: #666666;
  --color-999999: #999999;

	--rem-0-4: clamp(2px, 0.217vw, 4px);
	--rem-0-6: clamp(3px, 0.417vw, 6px);
  --rem-0-8: clamp(4px, 0.556vw, 8px);
  --rem-1: clamp(5px, 0.694vw, 10px);
	--rem-1-2: clamp(6px, 0.833vw, 12px);
  --rem-1-6: clamp(7px, 1.111vw, 16px);
	--rem-2-2: clamp(10px, 1.528vw, 22px);
	--rem-2-4: clamp(12px, 1.667vw, 24px);
  --rem-2-6: clamp(13px, 1.806vw, 26px);
	--rem-3: clamp(14px, 2.083vw, 30px);
  --rem-3-2: clamp(14px, 2.222vw, 32px);
	--rem-3-5: clamp(16px, 2.431vw, 35px);
	--rem-4: clamp(18px, 2.778vw, 40px);
  --rem-4-5: clamp(22.5px, 3.125vw, 45px);
	--rem-5: clamp(20px, 3.472vw, 50px);
  --rem-5-5: clamp(22px, 3.819vw, 55px);
  --rem-6: clamp(24px, 4.167vw, 60px);
  --rem-7: clamp(35px, 4.888vw, 70px);
  --rem-8: clamp(40px, 5.556vw, 80px);
  --rem-12: clamp(50px, 8.333vw, 120px);



  --font-14: clamp(12px, calc(12px + (100vw - 768px) * 0.002), 14px);
  --font-15: clamp(13px, calc(12px + (100vw - 768px) * 0.0025), 15px);
  --font-16: clamp(14px, calc(12px + (100vw - 768px) * 0.0035), 16px);
  --font-18: clamp(15px, calc(13px + (100vw - 768px) * 0.004), 18px);
  --font-20: clamp(16px, calc(14px + (100vw - 768px) * 0.0045), 20px);

  --font-24: clamp(18px, calc(18px + (100vw - 768px) * 0.005), 24px);
  --font-28: clamp(20px, calc(20px + (100vw - 768px) * 0.0055), 28px);
  --font-30: clamp(22px, calc(22px + (100vw - 768px) * 0.0055), 30px);
  --font-32: clamp(22px, calc(22px + (100vw - 768px) * 0.006), 32px);

  --font-36: clamp(24px, calc(24px + (100vw - 768px) * 0.006), 36px);
  --font-40: clamp(26px, calc(26px + (100vw - 768px) * 0.0065), 40px);
  --font-46: clamp(28px, calc(28px + (100vw - 768px) * 0.007), 46px);
  --font-48: clamp(30px, calc(30px + (100vw - 768px) * 0.007), 48px);
  --font-56: clamp(32px, calc(32px + (100vw - 768px) * 0.0075), 56px);
  --font-60: clamp(36px, calc(36px + (100vw - 768px) * 0.0075), 60px);

}

/* 使用类 */
.f12 { font-size: 12px; }
.f14 { font-size: var(--font-14); }
.f15 { font-size: var(--font-15); }
.f16 { font-size: var(--font-16); }
.f18 { font-size: var(--font-18); }
.f20 { font-size: var(--font-20); }

.f24 { font-size: var(--font-24); }
.f28 { font-size: var(--font-28); }
.f30 { font-size: var(--font-30); }
.f32 { font-size: var(--font-32); }
.f36 { font-size: var(--font-36); }
.f40 { font-size: var(--font-40); }
.f46 { font-size: var(--font-46); }
.f48 { font-size: var(--font-48); }

.f56 { font-size: var(--font-56); }
.f60 { font-size: var(--font-60); }



.mod-bner{
  height: 400px;
  background-size: cover;
  position: relative;
  color: var(--color-ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.mod-bner::before, .mod-bner-information::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.mod-bner > *{
  z-index: 1;
  height: 13%;
}
.mod-bner .pic{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.mod-bner .pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mod-bner h1{
  font-weight: 700;
}
.mod-bner p{
  display: flex;
  align-items: flex-end;
}

.container, .page-blog{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px
}


.filter-shell {
  display: flex;
  align-items: center;
  gap: var(--rem-1-2);
  margin: var(--rem-1-2) auto;
}

.filter-viewport {
  display: flex;
  justify-content: center;
  position: relative;
  flex: 1;
  min-width: 0;
}

.filter-viewport::before,
.filter-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(20px, 3vw, 44px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.filter-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-ffffff) 35%, rgba(255, 255, 255, 0));
}

.filter-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-ffffff) 35%, rgba(255, 255, 255, 0));
}

.filter-shell.is-overflowing:not(.is-at-start) .filter-viewport::before,
.filter-shell.is-overflowing:not(.is-at-end) .filter-viewport::after {
  opacity: 1;
}

.filter-track {
  display: flex;
  align-items: center;
  gap: var(--rem-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  position: relative;
  padding-bottom: var(--rem-0-6);
  --line-x: 0px;
  --line-width: 0px;
}

.filter-track::-webkit-scrollbar {
  display: none;
}

.filter-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.filter-chip {
  cursor: pointer;
  flex: 0 0 auto;
  padding: var(--rem-1);
  border: 0;
  background: transparent;
  color: var(--color-666666);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.25s ease;
  overflow: hidden;
}

.filter-chip:hover,
.filter-chip:focus-visible,
.filter-chip.is-active {
  color: var(--color-101828);
}


.filter-arrow {
  --filter-arrow-size: clamp(28px, 3vw, 40px);
  width: var(--filter-arrow-size);
  height: clamp(28px, 3vw, 40px);
  max-width: var(--filter-arrow-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(16, 24, 40, 0.55);
  transition:
    max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s ease;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center;
  will-change: max-width, opacity, transform;
}

.filter-arrow:hover,
.filter-arrow:focus-visible {
  color: var(--color-101828);
}

.filter-arrow span {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.filter-arrow--prev span {
  transform: rotate(-135deg);
}

.filter-arrow--next span {
  transform: rotate(45deg);
}

.filter-arrow[disabled] {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

.filter-arrow--prev[disabled] {
  transform: translateX(-8px) scale(0.84);
}

.filter-arrow--next[disabled] {
  transform: translateX(8px) scale(0.84);
}


/* 黑色活动条 */
.filter-track::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--line-width);
  height: 2px;
  background: var(--color-101828);
  transform: translate3d(var(--line-x),0,0);
  transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    width .35s cubic-bezier(.4,0,.2,1);
  z-index: 2;
  will-change: transform, width;
}

.blog-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rem-4-5);
  margin: var(--rem-7) auto var(--rem-6) auto;
  width: 100%;
}
.blog-list li{
  background-color: var(--color-ffffff);
}
.pic_auto{
  width: 100%;
  background-color: var(--color-ffffff);
  aspect-ratio: 386 / 218;
  position: relative;
  overflow: hidden;
}
.pic_auto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  transition: all .5s ease;
  transform: scale(1.001);
}
.blog-list a
{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-list .text{
  display: flex ;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.08);
  flex: 1;
  transition: all .3s ease;
  padding: var(--rem-2-4);
}
.blog-list li:hover .text{
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.16);
}
.blog-list li:hover .pic_auto img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}



.blog-list h3{
  color: var(--color-121212);
  font-weight: 700;
  line-height: 1.6em;
  max-height: 3.2em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.blog-list p{
  color: var(--color-999999);
  flex: 1;
  line-height: 1.25em;
  max-height: 5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  margin: var(--rem-0-8) 0;
}
.blog-list .date{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-999999);
}
.blog-list .date .icon{
 display: none;
}


.more2{
  display: flex;
  align-items: center;
}
.more2::after{
  content:' ';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--color-999999);
  border-bottom: 1px solid var(--color-999999);
  transform: rotate(-45deg);
  margin-left: 4px;
}



.mod-bner-information{
  height: 400px;
  background-size: cover;
  position: relative;
  color: var(--color-ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.mod-bner-information .container{
  z-index: 1;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.mod-bner-information .intor {
  margin: 0 auto;
  padding: 0 20px;
  margin-top: -20px;
  max-width: 900px;
}
.mod-bner-information::before{
  background: rgba(0, 0, 0, 0.8);
}
.mod-bner-information h1{
  font-weight: 700;
  line-height: 1.25;
  margin-top: 32px;
  margin-bottom: 50px;
}
.bner-crumbs{
  color: var(--color-999999);
}

.page-blog{
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: var(--rem-4-5);
  margin-bottom: var(--rem-12);
}

.page-blog .left{
  width: 340px;
  min-width: 340px;
  min-height: 50vh;
  background-color: var(--color-ffffff);
}

.page-blog .right{
  width: calc(100% - 370px);
  flex: 1;
  background-color: var(--color-ffffff);
  padding: var(--rem-5-5) var(--rem-2-6);
}



/* 文本块样式开始 */

.blog-txt{
  line-height: 1.7;
  color: var(--color-333333);
}
.blog-txt p{
  margin-bottom: 1.25rem;
}


.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
}

.table-scroll table{
  min-width: 600px;
}
.table-scroll::-webkit-scrollbar{
  height: 6px;
}

.table-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 999px;
}

.blog-txt table {
  border-collapse: collapse;
  overflow-x: auto;
  padding: 1em 0;
}

.blog-txt table td,.content table th {
  border: 1px solid var(--color-333333);
  padding: .4em .6em;
  line-height: 1.2em
}
.blog-txt table td p,.content table th p{
  margin: 0; padding: 0;
}
.blog-txt table th {
  font-weight: bolder
}
.blog-txt img, .blog-txt video, .blog-txt iframe{
  max-width: 100%;
  margin-bottom: 1.25rem;
}
.blog-txt video{
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
.blog-txt h2{
  font-size: var(--font-24);
  margin-bottom: 1.25rem;
  font-weight: 700;
  color: var(--color-333333);
}

.blog-txt h3{
  font-size: var(--font-20);
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--color-333333);
}

.blog-txt h4{
  font-size: var(--font-18);
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: var(--color-333333);
}
.blog-txt ul, .blog-txt ol{
  padding-left: 24px;
}
.blog-txt li{
  list-style-position: outside;
  list-style-type: disc;
  margin-bottom: 1rem;
}
.blog-txt li p,.content li p{
  margin: 0; padding: 0;
}
.blog-txt strong, .blog-txt b{
  font-weight: 700;
}
.blog-txt em, .blog-txt i{
  font-style: italic;
  color: var(--color-666666);
}

.right .share{
  flex-direction: row;
  justify-content: space-between;
  padding-right: var(--rem-3);
  color: var(--color-121212);
}


.right .share_list li:nth-child(1) svg{
  fill: #3d57a1;
}
.right .share_list li:nth-child(2) svg{
  fill: #f40000;
}
.right .share_list li:nth-child(3) svg{
  fill: #0274b3;
}
.right .share_list li:nth-child(4) svg path{
  fill: url(#igGradient);
}
.right .share .share_list li:hover svg{
  fill: var(--color-121212);
}
.right .share_list li:nth-child(4):hover svg path{
  fill: var(--color-121212);
}

/* 文本块样式- end */


/* 左导航 */
.page-blog .left{
  padding: var(--rem-5-5) var(--rem-3);
  position: sticky;
  top: 30px;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.page-blog .left .title{
  color: var(--color-121212);
}
.share, .share_list{
  display: flex;
  gap: 20px;
}
.share{
  flex-direction: column;
  margin-top: auto;
}
.share_list li svg{
  width: 24px;
  height: 24px;
  fill:var(--color-999999);
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.share_list li:nth-child(1):hover svg{
  fill: #3d57a1;
}
.share_list li:nth-child(2):hover svg{
  fill: #f40000;
}
.share_list li:nth-child(3):hover svg{
  fill: #0274b3;
}
.share_list li:nth-child(4):hover svg path{
  fill: url(#igGradient);
}


/* 左导航 目录列表 */
.blog-nav{
  margin-top: var(--rem-3);
  margin-bottom: var(--rem-3);
  padding-left: var(--rem-1);
  line-height: 1.4;
  max-height: calc(100vh - 300px);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.blog-nav .is-active{
  color: var(--color-121212);
  font-weight: 700;
}


.blog-nav ul{
  padding-left: 20px;
  font-size: var(--font-16);
}
.blog-nav > ul{
  border-left: 2px solid var(--gray_light2);
}
.blog-nav .blog-nav-line{
  position: absolute;
  left: calc(var(--rem-1) - 1px);
  top: 0;
  width: 4px;
  height: 30px;
  background: var(--color-121212);
  transition: top .5s ease, height .5s ease;
}

.blog-nav li{
  margin-bottom: var(--rem-1);
}
.blog-nav ul ul{
  margin-top: var(--rem-1);
}
.blog-nav ul ul li{
  font-size: var(--font-14);
  font-weight: 400;
}
.blog-nav .is-active-h2 > a{
  font-weight: 700;
  color: var(--color-121212);
}
.blog-nav .is-active-h3 a{
  color: var(--color-121212);
}
.blog-nav .is-active-h2 a:hover, .blog-nav .is-active-h3 a:hover{
  color: var(--blue);
}

.blog-nav::-webkit-scrollbar {
  width: 0;
}
.blog-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
}
.blog-nav::-webkit-scrollbar-track {
  background: transparent;
}
/* 左导航-end */


.read_more{
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--rem-8);
}
.read_more .title{
  font-weight: 700;
  text-align: center;
  width: 100%;
  color: var(--color-121212);
}

.blog-form {
  height: 320px;
  background: url(../images/form_bg.jpg) #000 no-repeat center;
  color: var(--color-ffffff);
  display: flex;
  align-items: center;
}
.blog-form .container{
  display: grid;
  align-items: start;
  grid-template-columns: 1fr auto;
  gap: var(--rem-8);
}
.blog-form .botton{
  padding: var(--rem-1-2) var(--rem-8);
  background-color: var(--color-ffffff);
  color: var(--color-121212);
  border-radius: 4px;
  cursor: pointer;
  margin-top: 5px;
}
.blog-form .title{
  font-weight: 700;
  margin-bottom: var(--rem-3);
  line-height: 1.3;
}
.blog-form .title strong{
  color: var(--blue);
  font-weight: 700;
}
.blog-form .text p{
  line-height: 1.5;
}


/* 弹窗 */
#hubspot-popup-wrapper{display:flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; }
#hubspot-popup-wrapper.on{display: flex; }
.hubspot-popup-mask{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5);}
.hubspot-popup-content {
  position: relative;
  max-width: 1060px;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  padding: 2vh;
  max-height: 90%;
  overflow-y: auto;
}
.hubspot-popup-content .hubspot-popup-close{
  position: absolute;
  width: 30px;
  height: 30px;
  right: 8px;
  top: 8px;
	background-color: #ececec;;
	z-index: 1;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
}

.hubspot-popup-close::before, .hubspot-popup-close::after { position:absolute; content:''; background: #000; border-radius: 2px; transform:rotate(45deg);}
.hubspot-popup-close::before { width: 1px; height: 21px; left: 14px; top: 4px; }
.hubspot-popup-close::after { width: 21px; height: 1px; left:4px; top:14px; }
#dosubmit {
  background-color: var(--color-121212);
  color: #fff;
  border: none;
  padding: 12px 72px;
  border-radius: 6px;
  font-size: var(--font-16);
  cursor: pointer;
  transition: opacity 0.3s;
}
.success-icon img{width: 100%;}
.nav-bnt-m{
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  overflow: auto;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius:4px ;
  border: 1px solid var(--color-999999);
}
.nav-bnt-m svg{width: 50%; height: 50%;}
.blog-nav-close{
  display: none;
}
.nav-bnt-m.no-left{display: none;}

.page-blog.no-left{
  max-width: 900px;
}

.no-left .left{
  display: none;
}

.no-left .right{
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}


















/* 大于 1920px */
@media screen and (min-width: 1921px) {
  .mod-bner, .mod-bner-information{
    height: 500px;
  }
}



@media (max-width: 768px) {
  body {
    background: var(--color-ffffff);
  }

  .mod-bner::before{
    background: rgba(0, 0, 0, 0.7);
  }
  .filter-shell {
    gap: var(--rem-0-8);
    margin-bottom: var(--rem-3-2);
  }

  .filter-track {
    gap: var(--rem-2-4);
  }

  .filter-chip {
    font-size: var(--font-18);
  }

  .filter-arrow {
    width: 28px;
    height: 28px;
  }
  .blog-list{
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-form{
    background-image: url(../images/form_bg_m.jpg);
    aspect-ratio: 375 / 420;
    width: 100%;
    height:auto;
  }

  .mod-bner h1, .mod-bner p{
    padding-left: 8.8%;
    padding-right: 8.8%;
  }
  .mod-bner .intor h1, .mod-bner .intor p{
    padding-left: 0;
    padding-right: 0;
  }

  .mod-bner > *{
    height: auto;
    margin-bottom: 20px;
  }
  .mod-bner{
    height: auto;
    aspect-ratio: 375 / 240;
  }
  .mod-bner-information{
    height: auto;
    aspect-ratio: 375 / 480;
  }
  .mod-bner-information .intor{
    padding: 0 28px;
  }
  .mod-bner-information h1{
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 80px;
  }
  .mod-bner-information .intor .f14{
    font-size: 16px;
    color: var(--gray_light2);
  }
  .page-blog .left {
    position: fixed;
    top: auto;
    max-height: 50vh;
    bottom: 0;
    width: 100%;
    z-index: 2;
    left: 0;
    padding: 24px 34px;
    opacity: 0;
    visibility: hidden;
  }
  .right .share_list li:nth-child(4) svg path{
    fill: #cc2366;
  }

  .blog-nav {
    line-height: 1.7;
    max-height: calc(50vh - 80px);
  }
  .page-blog .left .share{
    display: none;
  }
  .blog-nav .nav-item-h2{
    font-size: 14px;
  }
  .blog-nav .is-active-h2 a:hover, .blog-nav .is-active-h3 a:hover{
    color: var(--color-121212);
  }
  .page-blog .left > *{
    position: relative;
    z-index: 1;
  }
  .page-blog{
    display: block;
    margin: 0;
    padding-top: 24px;
    background-color: var(--color-ffffff);
  }
  .page-blog .right{
    width: 100%;
    padding: 22px 8px;
  }
  .blog-txt{
    font-size: 16px;
  }
  .blog-list .text{
    padding: 20px 25px 12px 20px;
  }
  .blog-list h3{
    display: block;
    font-weight: 400;
    max-height:unset;
  }
  .blog-list p{
    font-size: 14px;
  }

  .read_more{
    margin-top: 80px;
    margin-bottom: 80px;
    padding-left: 28px;
    padding-right: 28px;
  }


  .read_more a{
    gap: 24px;
    flex-direction: row;
  }
  .read_more .text{
    box-shadow:none;
    padding: 0;
  }
  .read_more .pic_auto{
    width: 32%;
  }
  .read_more p, .read_more .date .more2{
    display: none;
  }
  .read_more h3{
      max-height: 3.2em;
      display: -webkit-box;
  }
  .read_more .date{
    margin-top: 5px;
  }
  .read_more .date .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    fill: var(--gray_light2);
    margin-top: 1px;
    margin-left: -4px;
  }
  .read_more .date span {
    display: flex ;
    align-items: center;
    gap: 6px;
    color: var(--gray_light2);
  }
  .blog-form .container {
    display: flex;
    align-items: start;
    flex-direction: column;
    padding: 0 12.8% 0 12.8%;
    margin-top: -5%;
  }
  .nav-bnt-m{
    display: flex;
    transition: all .3s ease;
  }
  .blog-mask{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
  }
  /* 显示 */
  .page-blog .left.show,
  .blog-mask.show{
    opacity: 1;
    visibility: visible;
  }



  .page-blog .left .blog-nav-close{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    right: 10px;
    top: -50px;
    pointer-events: none;
  }

  /* 两条线 */
  .blog-nav-close::before,
  .blog-nav-close::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background: var(--color-ffffff);
    transform-origin: center;
  }

  .blog-nav-close::before{
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .blog-nav-close::after{
    transform: translate(-50%, -50%) rotate(-45deg);
  }

















}
@media (max-width: 475px) {
  .blog-list{
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
  .blog-form .title{
    font-size: 26px;
  }
  .blog-form .text p{
    font-size: 14px;
  }
  .blog-form .botton{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 12px 0;
  }
  .read_more{
    gap: 32px;
    grid-template-columns: repeat(1, 1fr);
  }
  #dosubmit{
    width: 100%;
  }
}