@charset "utf-8";
.ell{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.clamp{ display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

.wrapper{ overflow: hidden;}

header{ position: fixed; z-index: 999; top: 0; right: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 6.25vw;}

header .logo{ display: flex;}
header .logo a{ display: flex;}
header .logo a img{ width: auto; height: 1.75rem;}

nav{ position: relative; display: flex;}
nav .itm{ display: flex; }
nav .itm>a{ position: relative; font-size: 1rem; line-height: 2; padding: 2rem 2rem; color: white;}
nav .itm>a:after{ content: ''; position: absolute; bottom: 0; left: calc(50% - .5rem); width: 0; height: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-bottom: 0 solid white; transition: .35s;}
nav .itm .sub{ position: absolute; top: 6rem; left: 0; display: flex; align-items: center; width: 100%; height: 0; padding: 0 1.5rem; background: white; opacity: 0; overflow: hidden; transition: .35s;}
nav .itm .sub .cover{ flex-shrink: 0; width: 15rem; height: 8.4375rem;}
nav .itm .sub .cover img{ width: 100%; height: 100%; object-fit: cover;}
nav .itm .sub .link{ display: flex; flex-flow: row wrap;}
nav .itm .sub .link a{ position: relative; font-size: 1rem; line-height: 2; margin: .5em 0 .5em 4em; color: var(--text);}

nav .itm.hover>a{ font-weight: bold;}

.hamburger-btn { cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; width: 1.5rem; height: 1.25rem; display: none;}
.hamburger-btn span { display: block; width: 100%; height: 1px; background: white; transition: 0.3s; }
.hamburger-btn span:nth-child(2) { width: 100%; margin-left: -20%; }

header.full{ background: white;}
header.full .logo a img{ filter: invert(100%);}
header.full nav .itm>a{ color: var(--text);}

header.full .hamburger-btn span{background: var(--dark);}

.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: auto; padding-bottom: 5vw; background-color: white; z-index: 1000; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease-in-out; }
.menu-overlay.show { opacity: 1; visibility: visible; transform: translateY(0); }

.popup-header { display: flex; justify-content: space-between; align-items: center; padding: 5vw; }
.popup-header .logo a{ display: flex;}
.popup-header .logo a img{ width: auto; height: 1rem; filter: invert(1);}

.close-btn { font-size: 1rem; cursor: pointer; user-select: none; }

.menu-list { flex: 1; overflow-y: auto; padding: 0 5vw; }
.menu-item { border-bottom: 1px solid var(--gray); }

.menu-title { display: flex; justify-content: space-between; align-items: center; padding: .5em 0; font-size: 1.125rem; cursor: pointer; user-select: none; }
.menu-title .icon { font-size: 1.5rem; font-weight: 300; }

.menu-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; }
.menu-item.active .menu-collapse { grid-template-rows: 1fr; }
.menu-body { overflow: hidden; }
.sub-menu { padding-bottom: 10px; }
.sub-menu li { padding: .5em 0; font-size: 1rem; color: var(--info); border-bottom: 1px solid #f9f9f9; }
.sub-menu li:last-child { border-bottom: none; }
.menu-item.static .menu-title { cursor: default; }

.menu-overlay-bottom { grid-column: span 12; width: 100%; height: auto; padding-bottom: 5vw; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease-in-out; opacity: 1; visibility: visible; transform: translateY(0); display: none;}
.menu-overlay-bottom .menu-item{ border-bottom: 1px solid #505050;}
.menu-overlay-bottom .menu-list{ padding: 0;}
.menu-overlay-bottom .sub-menu li{ border-bottom: 1px solid #505050; color: #cbcbcb;}
.menu-overlay-bottom .sub-menu li a{ color: #cbcbcb;}
.menu-overlay-bottom .sub-menu li:last-child { border-bottom: none; }

.container{ position: relative; width: 100%;}

.row{ display: grid; grid-gap: 2.5vw;}
.row .row-tit{ display: grid; grid-gap: 0.3125vw; align-content: center; justify-items: start;}
.row .row-tit .cn{ font-size: 1.875rem; line-height: 1.5;}
.row .row-tit .desc{ font-size: 1rem; text-align: justify;}
.row .row-tit .more{ font-size: 0.875rem; line-height: 1.75; color: white; padding: .25em 1.5em; background: var(--dark);}
.row .row-con{ position: relative; width: 100%; overflow: hidden;}

.slideshow{ position: relative; z-index: 1; width: 100vw; height: 100vh; background: var(--gray);}
.slideshow swiper-container swiper-slide{ position: relative; width: 100%; height: 100vh; overflow: hidden;}
.slideshow swiper-container swiper-slide .slide-inner{ width: 100%; height: 100%;}
.slideshow swiper-container swiper-slide .slide-inner .bg{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
.slideshow swiper-container swiper-slide .slide-inner .bg img{display: block; width: 100%; height: 100%; object-fit: cover;}
.slideshow swiper-container swiper-slide .slide-inner .font{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; text-align: center; color: white;}
.slideshow swiper-container swiper-slide .slide-inner .font h1{ font-size: 2.5vw; font-weight: 500; text-indent: .25em; letter-spacing: .25em;}
.slideshow swiper-container swiper-slide .slide-inner .font h2{ font-size: 1.875vw; font-weight: 200; text-indent: .25em; letter-spacing: .25em;}
.slideshow .swiper-arrow{ position: absolute; z-index: 2; left: 6.25vw; bottom: 2.5vw; display: grid; grid-auto-flow: column;grid-gap: 1.5rem;}
.slideshow .swiper-arrow div{ width: 2.5vw; height: 2.5vw; cursor: pointer;}

.slideshow .swiper-arrow .prev{ left: 0; background: url('../img/long-arrow-left.svg') center center no-repeat; background-size: 50%;}
.slideshow .swiper-arrow .next{ right: 0; background: url('../img/long-arrow-right.svg') center center no-repeat; background-size: 50%;}
.slideshow .swiper-number{ position: absolute; z-index: 2; right: 6.25vw; bottom: 2.5vw; font-size: 1.5rem; font-style: italic; color: white;}
.slideshow .swiper-number b{ font-weight: normal;}
.slideshow .swiper-number span{ font-size: 1rem;}

.vrshow{ position: relative; width: 100%; padding: 5vw 6.25vw; padding-right: 0;}
.vrshow .row{ grid-template-columns: 12.5vw 1fr;}
.vrshow .swiper-arrow{ position: absolute; z-index: 2; top: calc(50% - 1.25vw); display: flex; justify-content: center; align-items: center; color: white; font-size: 1.125rem; width: 2.5vw; height: 2.5vw; border-radius: var(--rounded); background: rgba(0,0,0,.2); cursor: pointer;}
.vrshow .swiper-arrow.prev{ left: 2.5vw;}
.vrshow .swiper-arrow.next{ right: 6.25vw;}
.vrshow swiper-container swiper-slide{ width: 27.5vw; margin-right: 2.5vw; height: auto;}
.vrshow swiper-container swiper-slide .itm{ position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(100%/ 16 * 9); cursor: default;}
.vrshow swiper-container swiper-slide .itm .cover{ position: absolute; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
.vrshow swiper-container swiper-slide .itm .cover img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .35s;}
.vrshow swiper-container swiper-slide .itm .info{ position: absolute; z-index: 1; bottom: 0; left: 0; display: flex; align-items: center; width: 100%; padding: .5rem 1rem; font-size: 1.125rem; line-height: 2; color: white; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2));}
.vrshow swiper-container swiper-slide .itm .info::before{ content: ''; width: 1.125rem; height: 1.125rem; margin-right: 0.5em; background: url('../img/ico-loc.svg') center center no-repeat; background-size: cover;}

.product{ position: relative; width: 100%; padding-top: 3.125vw; background: var(--gray);}
.product .row{ grid-gap: 1.25vw;}
.product .row .row-tit{ justify-items: center;}
.pro-swiper{ position: relative; z-index: 0;}
.pro-swiper swiper-slide .itm{ display: block; width: 100vw; height: 45vw; cursor: default;}
.pro-swiper swiper-slide .itm img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.pro-tit-swiper{ position: absolute; z-index: 1; bottom: 3.125vw; left: calc(6.25vw - 3rem); width: auto;}
.pro-tit-swiper swiper-slide{ position: relative; top: 0; width: auto; padding: .75em 0; font-size: 1.5rem; cursor: pointer; transition: all .35s;}
.pro-tit-swiper swiper-slide:before{ content: ''; position: absolute; top: 1.75em; left: 0; width: 1px; height: 0; background: white; transition: all .35s;}
.pro-tit-swiper swiper-slide:after{ content: ''; position: absolute; bottom: 0; left: 2em; width: 0; height: 1px; background: white; transition: all .35s;}
.pro-tit-swiper swiper-slide span{ position: relative; display: block; padding: 0 2em; border-left: 1px solid white; font-size: 1.5rem; line-height: 1; font-weight: 300; color: white;}
.pro-tit-swiper swiper-slide:first-child:before{ background: transparent;}
.pro-tit-swiper swiper-slide:first-child span{ border-left: 1px solid transparent;}
.pro-tit-swiper swiper-slide.swiper-slide-thumb-active{ top: -.75em;}
.pro-tit-swiper swiper-slide.swiper-slide-thumb-active:before{ height: .75em;}
.pro-tit-swiper swiper-slide.swiper-slide-thumb-active:after{ width: 1.5em;}

.product .swiper-arrow{ position: absolute; z-index: 2; right: 6.25vw; bottom: calc(3.125vw + .75em); display: flex; width: auto; font-size: 1.5rem;}
.product .swiper-arrow .prev,
.product .swiper-arrow .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 1.5rem; border: 1px solid white; border-radius: var(--rounded); font-size: 1rem; line-height: 1; color: white; cursor: pointer;}

.case{ position: relative; width: 100%; padding: 5vw 6.25vw;}
.case .row{ grid-template-columns: repeat(12,1fr);}
.case .row .row-tit{ grid-column: span 4;}
.case .row .row-tit .other{ display: grid; margin: 12vw 0 2vw;}
.case .row .row-tit .other i{ font-size: 0.875rem; font-style: normal;}
.case .row .row-tit .other b{ font-size: 4.5rem; line-height: 1; font-weight: 500;}
.case .row .row-con{ grid-column: span 8;}
.case swiper-container swiper-slide .itm{ position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(100%/ 16 * 9); cursor: default;}
.case swiper-container swiper-slide .itm .cover{ position: absolute; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
.case swiper-container swiper-slide .itm .cover img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.case swiper-container swiper-slide .itm .info{ position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: .5rem 1rem; font-size: 1.125rem; line-height: 2; color: white; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2));}

.service{ position: relative; width: 100%; padding: 5vw 6.25vw; padding-right: 0; background: var(--gray);}
.service .row{ grid-template-columns: 20vw 1fr;}
.service .row .row-tit .more{ margin-top: 5vw;}
.service .row .row-con{ background: url('../img/service.webp') center center no-repeat; background-size: cover;}

.service .swiper-arrow{ position: absolute; z-index: 2; top: calc(50% - 1.5625vw); display: flex; justify-content: center; align-items: center; color: white; width: 3.125vw; height: 3.125vw; cursor: pointer;}
.service .swiper-arrow.prev{ left: 0; background: url('../img/long-arrow-left.svg') center center no-repeat; background-size: 50%;}
.service .swiper-arrow.next{ right: 0; background: url('../img/long-arrow-right.svg') center center no-repeat; background-size: 50%;}

.service swiper-container swiper-slide{ width: 25%; height: auto;}
.service swiper-container swiper-slide .itm{ position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(100% * 2); border-right: 1px solid rgba(255,255,255,.3); overflow: hidden; cursor: default;}
.service swiper-container swiper-slide .itm .info{ position: absolute; z-index: 1; bottom: 0; left: 0; display: grid; align-content: start; justify-items: center; width: 100%; height: 100%; padding: 10vw 2.5vw 2.5vw; text-align: center; transition: all .35s;}
.service swiper-container swiper-slide .itm .info .ico{ display: flex; justify-content: center; align-items: center; font-size: 1.5rem; line-height: 1; color: white; width: 7.5vw; height: 7.5vw; background: rgba(255,255,255,.2); border-radius: var(--rounded); margin-bottom: 2vw; transition: all .35s;}
.service swiper-container swiper-slide .itm .info .ico img{ width: 3.25vw; height: 3.25vw;}
.service swiper-container swiper-slide .itm .info .tit{ font-size: 1.5rem; line-height: 2.5; color: white;}
.service swiper-container swiper-slide .itm .info .dsc{ font-size: 1rem; line-height: 1.75; color: white; font-weight: 100;}
.service swiper-container swiper-slide .itm:before{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); backdrop-filter:blur(5px); transition: all .35s;}
.service swiper-container swiper-slide .itm:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; opacity: 0; transition: all .35s;}
.service swiper-container swiper-slide:nth-child(1) .itm:after,
.service swiper-container swiper-slide:nth-child(5) .itm:after{ background: url('../img/service.webp') 0 0 no-repeat; background-size: cover;}
.service swiper-container swiper-slide:nth-child(2) .itm:after,
.service swiper-container swiper-slide:nth-child(6) .itm:after{ background: url('../img/service.webp') calc(100% / 3) 0 no-repeat; background-size: cover;}
.service swiper-container swiper-slide:nth-child(3) .itm:after,
.service swiper-container swiper-slide:nth-child(7) .itm:after{ background: url('../img/service.webp') calc(100% / 3 * 2) 0 no-repeat; background-size: cover;}
.service swiper-container swiper-slide:nth-child(4) .itm:after,
.service swiper-container swiper-slide:nth-child(8) .itm:after{ background: url('../img/service.webp') 100% 0 no-repeat; background-size: cover;}

footer{ width: 100vw; background: url('../img/footer.webp') left bottom no-repeat var(--dark);}
.footer{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: start; padding: 4vw 6.25vw 0; color: white}
.footer a{ color: white;}
.footer .contact{ grid-column: span 3; display: grid; grid-gap: 1rem; width: 100%;}
.footer .contact .logo{ display: flex; padding-bottom: 1rem;}
.footer .contact .logo img{ width: auto; height: 1.75rem;}
.footer .nav-bottom{ grid-column: span 6; display: flex; justify-content: space-between;}
.footer .nav-bottom dl{ display: grid; grid-gap: 1rem; align-content: start;}
.footer .nav-bottom dl dd{ font-size: 0.875rem; opacity: 0.5;}
.footer .qrcode{ grid-column: span 3; display: grid; grid-template-columns: 1fr auto; grid-gap: 2.5vw;}
.footer .qrcode .itm{ display: grid; grid-gap: 0.5rem; justify-items: center;}
.footer .qrcode .itm .cover{ display: flex; border-radius: 0.5rem; overflow: hidden;}
.footer .qrcode .itm .cover img{ width: 6rem; height: 6rem;}
.footer .qrcode .itm .info{ display: grid; justify-items: center; font-size: 0.875rem;}
.footer .qrcode .itm .info b{ opacity: 0.5;}
.footer:after{ content: ''; grid-column: 4 / 13; width: 100%; height: 1px; background: white; opacity: 0.1;}
.copyright{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 3.125vw 6.25vw; font-size: 0.875rem; color: white;}
.copyright p{ grid-column: 4 / 10;}
.copyright:after{ content: "百航科技-专业网络品牌设计"; grid-column: 10 / 13; opacity: 0.2; text-align: right;}

/* sub */

/* common */
.banner{ position: relative; width: 100vw; height: 31.25vw;}
.banner .cover{ position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.banner .cover img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.banner .cover h1{ position: absolute; z-index: 1; top: calc(50% - 2.5rem); left: 0; right: 0; font-size: 2.5rem; line-height: 2; font-weight: bold; text-align: center; color: white;}
.banner .bread{ position: absolute; bottom: 0; left: 0; z-index: 2; display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center; width: 100%; height: auto; padding: 0 6.25vw; background: rgba(0,0,0,.5);}
.banner .bread .tab{ display: grid; grid-auto-flow: column; grid-gap: 2em; height: 100%; font-size: 1.125rem; }
.banner .bread .tab li{ display: flex; justify-content: center; align-items: center;}
.banner .bread .tab a{ position: relative; display: flex; align-items: center; justify-content: center; height: 100%; color: white;}
.banner .bread .tab a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 0.25rem; background: white;}
.banner .bread .tab li.act a:after{ width: 100%;}
.banner .location{ display: flex; align-items: center; height: 100%; padding: 1.5rem 0; font-size: 0.875rem; color: white;}
.banner .location::before{ content: '位置：';}
.banner .location a{ color: white;}
.banner .location a:not(:last-child):after{ content: '>'; padding: 0 .5em;}


/* about */

.about-title{ position: relative; display: grid; grid-gap: 2.5vw;}
.about-title .cn{ position: relative; z-index: 1; font-size: 1.875rem; line-height: 1; font-weight: bold; text-indent: .75em;}
.about-title .cn:before{ content: ''; position: absolute; top: calc(50% - .5rem); left: 0; width: 1rem; height: 1rem; border: 2px solid var(--primary); border-radius: var(--rounded); background: var(--dark);}
.about-title .en{ position: absolute; z-index: 0; top: .5rem; font-size: 3.75rem; line-height: 1; font-weight: bold; color: var(--gray);}
.about-title .desc{ font-size: 2.25rem; color: var(--text); font-weight: bolder;}
.about-title .desc span{ color: var(--primary);}

  .page-about{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; align-items: end; padding: 6.25vw; padding-bottom: calc(6.25vw + 56.25vw);}
  .page-about:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100vw; height: 56.25vw; background: url('../img/page-about-bg.webp') no-repeat; background-size: cover;}
  .page-about .about-title{ grid-column: span 5;}
  .page-about .content{ grid-column: 7 / 13; font-size: 1rem; line-height: 2; text-align: justify;}

  .page-history{ position: relative; display: grid; grid-gap: 5vw; align-items: end; padding: 6.25vw; padding-bottom: 25vw;}
  .page-history:after{ content: ''; position: absolute; z-index: 0; left: 0; bottom: 6.25vw; width: 100vw; height: 25vw; background: url('../img/page-history-bg.webp') no-repeat; background-size: cover;}

  .page-history .content{ position: relative; z-index: 1; display: flex; flex-flow: column-reverse; width: 100%; overflow: hidden;}
  .page-history .content swiper-container{ width: 100%; height: auto;}
  .page-history .content swiper-container swiper-slide{ width: calc(100% / 6);}
  .page-history .content .itm{ position: relative; display: grid; grid-gap: 1rem; padding: 0 2.5vw 5vw;}
  .page-history .content .itm::before{ content: ''; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: var(--rounded); background: var(--dark);}
  .page-history .content .itm::after{ content: ''; position: absolute; top: 0; left: calc(.5rem - .5px); width: 1px; height: 100%; border-left: 1px dashed var(--dark);}
  .page-history .content .itm .year{ font-size: 3rem; line-height: 1;}
  .page-history .content .itm .info{ text-align: justify;}
  .page-history .content .swiper-arrow{ display: flex; width: auto; font-size: 1.5rem; padding-top: 2.5vw;}
  .page-history .content .swiper-arrow .prev,
  .page-history .content .swiper-arrow .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 1.5rem; border: 1px solid var(--dark); border-radius: var(--rounded); font-size: 1rem; line-height: 1; color: var(--dark); cursor: pointer;}

/* service */
.page-service{ position: relative; display: grid; grid-gap: 2.5vw; padding: 6.25vw;}
.page-service .svc-row{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
.page-service .svc-tit{ grid-column: span 5; display: grid; grid-gap: 2rem; align-content: start;}
.page-service .svc-tit .cap{ position: relative; font-size: 1.5rem; font-weight: bold; padding-bottom: 0.5em;}
.page-service .svc-tit .cap:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 1em; height: 0.25rem; background: var(--dark);}
.page-service .svc-tit .dsc{ line-height: 1.75;}
.page-service .svc-row .svc-tit{ padding-top: 5vw; background: url('../img/svc-tit.webp') left bottom 5vw no-repeat;}
.page-service .svc-cover{ grid-column: span 7; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;}
.page-service .svc-cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

  .page-service .svc-con{ grid-column: span 12;}
  .svc-list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
  .svc-list .cover-xxl{ position: relative; grid-column: span 3; display: grid;}
  .svc-list .cover-xxl i{ width: 100%; height: 31.25vw;}
  .svc-list .cover-xxl i img{ width: 100%; height: 100%; object-fit: cover;}
  .svc-list .cover-xxl span{ position: absolute; top: calc(50% - 3rem); left: calc((100% - 13em) / 2); display: grid; justify-items: center; font-size: 1.5rem;}
  .svc-list .cover-xxl span h4{ font-size: 1.5rem; color: white;}
  .svc-list .cover-xxl span h5{ font-size: 1.125rem; color: white;}
  .svc-list .cover-l{ display: grid;}
  .svc-list .cover-l i{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3); overflow: hidden;}
  .svc-list .cover-l i img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
  .svc-list .cover-l span{ position: relative; font-size: 1.125rem; text-indent: 1em; padding: 0.5em 0; background: url('../img/svc-tit-sm.webp') right .5em center no-repeat;}
  .svc-list .cover-l span:before{ content: ''; position: absolute; left: 0; top: calc(50% - .25rem); width: 0; height: 0; border-top: .25rem solid transparent; border-bottom: .25rem solid transparent; border-left: .5rem solid var(--primary);}
  .svc-list .cover-xl{ display: grid; grid-gap: 1rem; overflow: hidden;}
  .svc-list .cover-xl i{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 21 * 9);}
  .svc-list .cover-xl i img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

  .page-service.install{ grid-gap: 5vw;}
  .page-service.install .svc-cover{ padding-bottom: calc(100% / 2);}
  .page-service.install .wty-row{ display: grid; grid-gap: 3.125vw;}
  .page-service.install .wty-row .svc-list{ grid-template-columns: repeat(2,1fr); }

  .page-service.package .svc-tit{ grid-column: span 2; background: none;}
  .page-service.package .svc-cover{ grid-column: 4 / 13; padding-bottom: 31.25vw;}
  .page-service.package .svc-list .cover-l span{ font-size: 1rem; text-indent: 0; background: linear-gradient(to right,white,#FAEEE1);}
  .page-service.package .svc-list .cover-l span:before{ display: none;}
  .page-service.package .svc-list .cover-l span:after{ content: '→'; position: absolute; right: 1.125rem; bottom: 0; font-size: 1.875rem; line-height: 2.5rem; color: var(--primary);}

  .page-service.cases{ grid-gap: 1.25vw;}
  .page-service-cases{ width: 100%; overflow: hidden;}
  .page-service-cases .itm{ width: 100%; height: 100%;}
  .page-service-cases .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 21 * 9); overflow: hidden;}
  .page-service-cases .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
  .page-service-cases-thumb{ width: 100%; overflow: hidden;}
  .page-service-cases-thumb .itm{ width: 100%; height: 100%;}
  .page-service-cases-thumb .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 21 * 9); overflow: hidden;}
  .page-service-cases-thumb .cover::after{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
  .page-service-cases-thumb .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
  .page-service-cases-thumb .swiper-slide-thumb-active .cover::after{ background: rgba(0,0,0,0);}

/* join */
.page-join{ position: relative; display: grid;}
.page-join .join-row{ display: grid; grid-gap: 2.5vw; padding: 5vw 6.25vw;}
.page-join .join-row .title{ display: grid; justify-content: center;}
.page-join .join-row .title .cap{ position: relative; font-size: 1.5rem; font-weight: bold; padding-bottom: 0.5em;}
.page-join .join-row .title .cap:after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 1em; height: 0.25rem; margin: auto; background: var(--dark);}

  .join-list-1{ display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr); border: 1px solid #f2f2f2;}
  .join-list-1 li{ display: grid; align-content: start; justify-items: center; padding: 2.5vw; background: url('../img/join-list.webp') right 1.25vw bottom 1.25vw no-repeat white;}
  .join-list-1 li:nth-child(1),
  .join-list-1 li:nth-child(3),
  .join-list-1 li:nth-child(6),
  .join-list-1 li:nth-child(8){ background: url('../img/join-list.webp') right 1.25vw bottom 1.25vw no-repeat #fafafa;}
  .join-list-1 .ico{ display: flex; justify-content: center; align-items: center; width: 8.75vw; height: 8.75vw; border-radius: var(--rounded); font-size: 1.5rem; font-weight: bold; color: var(--primary); overflow: hidden; background: #fafafa;}
  .join-list-1 li:nth-child(1) .ico,
  .join-list-1 li:nth-child(3) .ico,
  .join-list-1 li:nth-child(6) .ico,
  .join-list-1 li:nth-child(8) .ico{ background: white;}
  .join-list-1 .ico img{ width: 3.25vw; height: 3.25vw; object-fit: cover; filter:  brightness(0) saturate(100%) invert(86%) sepia(21%) saturate(740%) hue-rotate(343deg) brightness(94%) contrast(92%);}
  .join-list-1 .tit{ font-size: 1.5rem; padding: 1em 0 .5em; text-align: center;}
  .join-list-1 .dsc{ text-align: center;}

  .join-list-2{ position: relative; display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1.25vw;}
  .join-list-2:after{content: ''; position: absolute; z-index: 0; top: 50%; left: 0; width: 100%; height: 1px; background: #9d9d9d;}
  .join-list-2 li{ position: relative; display: grid; grid-template-rows: repeat(2,1fr); grid-gap: 2.5vw;z-index: 1;}
  .join-list-2 li:nth-child(2n) .itm{ grid-row: 2 / 3;}
  .join-list-2 .itm{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-gap: 0.5em; margin-top: 15px;}
  .join-list-2 .ico{ grid-row: span 2; display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; overflow: hidden;}
  .join-list-2 .ico img{ width: 100%; height: 100%; object-fit: cover;}
  .join-list-2 .tit{ grid-column: 2 / 3; font-size: 1.125rem; font-weight: bold;}
  .join-list-2 .dsc{ text-align: justify; }
  .join-list-2 .num{ position: absolute; z-index: 1; top: calc(50% - 3.375rem / 2); left: 0; display: flex; justify-content: center; align-items: center; font-weight: bold; width: 3.375rem; height: 3.375rem; border: 2px solid white; border-radius: var(--rounded); background: #efdfcb;}

  .accordion-container { grid-column: span 5; display: grid; grid-gap: 1.25vw;}
  .accordion-container .accordion-item { background-color: #fafafa; overflow: hidden;}
  .accordion-container .accordion-item.active { background-color: #fffbf7;}
  .accordion-container .accordion-header { position: relative; display: flex; justify-content: space-between; cursor: pointer; padding: 1rem 2rem;}
  .accordion-container .accordion-item.active .accordion-header { background: #FAEEE1;}
  .accordion-container .accordion-header .dot { position: absolute; top: 0; left: 1em; bottom: 0; width: 0.5rem; height: 0.5rem; margin: auto; border-radius: var(--rounded); background: var(--primary);}
  .accordion-container .accordion-header .cap { flex: 1; font-weight: bold;}
  .accordion-container .accordion-header .icon { color: var(--primary); font-weight: bold;}
  .accordion-container .accordion-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out;}
  .accordion-container .accordion-item.active .accordion-collapse { grid-template-rows: 1fr;}
  .accordion-container .accordion-body { overflow: hidden;}
  .accordion-container .content-inner { padding: 1rem 2rem; line-height: 2;}

  .accordion-cover{ grid-column: span 7; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 23.75vw; overflow: hidden;}
  .accordion-cover img{ width: 100%; height: 100%; object-fit: cover;}

/* contact */
.page-contact{ position: relative; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; align-items: start; padding: 5vw 6.25vw;}

  .contact-list{ display: grid; grid-gap: 1.25vw;}
  .contact-list dt{ position: relative; display: grid; grid-gap: 0.5em; padding-left: 1rem; margin-bottom: 2.5vw;}
  .contact-list dt::before{ content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--primary);}
  .contact-list dt h1{ font-size: 1.5rem; line-height: 1;}
  .contact-list dt h5{ font-size: 0.875rem; line-height: 1;}
  .contact-list dd{ display: flex; align-items: center;}
  .contact-list dd i{ display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--rounded); background: #f7f7f7;}
  .contact-list dd i img{ width: 100%; height: 100%; object-fit: cover;}
  .contact-list dd span{ text-indent: 0.5em;}

  .gbook-list{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw; padding: 2.5vw; background: #f7f7f7;}
  .gbook-list dt{ position: relative; grid-column: span 2; display: grid; grid-gap: 0.5em; margin-bottom: 2.5vw;}
  .gbook-list dt b{ font-size: 1.5rem; line-height: 1;}
  .gbook-list dt span{ font-size: 0.875rem; line-height: 1;}
  .gbook-list dd{ display: flex; align-items: center;}
  .gbook-list input,
  .gbook-list textarea{ box-sizing: border-box; width: 100%; background: white;}
  .gbook-list input{ font-size: 1rem; line-height: 1.5; padding: .5em;}
  .gbook-list textarea{ height: calc(1rem * 8 + 1em); padding: 0.5em;}
  .gbook-list input[type="submit"],
  .gbook-list button{ justify-self: end; text-align: center; color: white; background: var(--dark); cursor: pointer;}

/* list */
.page-list{ display: grid; grid-gap: 5vw; padding: 5vw 6.25vw;}
.page-line{ width: 100%; height: 1px; background: var(--gray);}

  .list-picture{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
  .list-picture .itm{ display: grid; grid-gap: 1rem;}
  .list-picture .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
  .list-picture .itm .cover::after{ content: '+'; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0,0,0,.5); font-size: 5rem; font-weight: 100; color: white; opacity: 0;}
  .list-picture .itm .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
  .list-picture .itm .info{ display: flex; align-items: center; justify-content: space-between;}
  .list-picture .itm .info::after{ content: '→'; font-size: 1.185rem;}

  .list-news{ display: grid; grid-gap: 5vw;}
  .list-news .itm{ position: relative; display: grid; grid-template-columns: 1fr 3fr; grid-gap: 2.5rem;}
  .list-news .itm::after{ content: ''; position: absolute; top: -5vw; left: 0; z-index: 0; width: 100%; height: 0; background: #fafafa;}
  .list-news .itm .cover{ position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
  .list-news .itm .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
  .list-news .itm .info{ position: relative; z-index: 1; display: grid; align-content: start; padding: 1rem 0;}
  .list-news .itm .info h4{ font-size: 1.5rem; line-height: 1;}
  .list-news .itm .info p{ margin-top: 1rem; line-height: 1.75;}
  .list-news .itm .info b{ position: absolute; bottom: 0;}
  .list-news .itm .info i{ position: absolute; right: 0; bottom: 0;}
  .list-news .list-line{ width: 100%; height: 1px; background: var(--gray);}

/* pagination */
.pagination{ display: grid; grid-template-columns: auto 1fr auto; align-items: center;}
.pagination .num{ display: grid; grid-auto-flow: column; justify-content: center; grid-gap: 2rem;}
.pagination .num a,
.pagination .num span{ padding: .5em 1em; cursor: pointer;}
.pagination .num span{ color: var(--primary);}
.pagination .button{ display: flex; justify-content: center; align-items: center; padding: .5em 3em; border: 1px solid var(--dark);}
.pagination span.button{ border: 1px solid var(--gray); background: var(--gray); color: #999;}


/* details */
.details{ background: #f2f3f6;}
.details .banner{ height: 5vw;}
.details .bread{ padding: 0 6.25vw;}
.details .location{ display: flex; align-items: center; height: 100%; padding: 1.5rem 0; font-size: 0.875rem; color: var(--text);}
.details .location::before{ content: '位置：';}
.details .location a{ color: var(--text);}
.details .location a:not(:last-child):after{ content: '>'; padding: 0 .5em;}

.page-details{ padding: 0 6.25vw 5vw;}

  .article{ display: grid; grid-gap: 2.5vw; padding: 2.5vw; background: var(--white);}
  .article .title{ font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text); text-align: center;}
  .article .content{ font-size: 1.125rem; line-height: 2; color: var(--text); text-align: justify;}
  .article .content p:not(:last-child){ margin-bottom: 1em;}
  .article .content img{ max-width: 100%;margin-bottom: 20px;}

  .related{ display: grid; grid-gap: 2.5vw; padding: 5vw 6.25vw; background: white;}
  .related .title{ display: grid; justify-content: center;}
  .related .title .cap{ position: relative; font-size: 1.5rem; font-weight: bold; padding-bottom: 0.5em;}
  .related .title .cap:after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 1em; height: 0.25rem; margin: auto; background: var(--dark);}
  .related .content{ width: 100%; overflow: hidden;}
  .related swiper-container .itm{ display: grid; grid-gap: 1rem;}
  .related swiper-container .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
  .related swiper-container .itm .cover::after{ content: '+'; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0,0,0,.5); font-size: 5rem; font-weight: 100; color: white; opacity: 0;}
  .related swiper-container .itm .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
  .related swiper-container .itm .info{ display: flex; align-items: center; justify-content: space-between;}
  .related swiper-container .itm .info::after{ content: '→'; font-size: 1.185rem;}