@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;}

.layer-nav{ display: grid; grid-gap: 1rem; margin: auto; padding: 0 10vw; counter-reset:num; opacity: 0; display: none;}
.layer-nav .itm{ counter-increment:num; display: grid; border-bottom: 1px solid var(--line);}
.layer-nav .itm>a{ display: flex; padding-bottom: 1rem;}
.layer-nav .itm>a:before{content: "0" counter(num); font-size: 1.5rem; line-height: 1; font-family: 'Samsung Sharp Sans Bold'; color: var(--secondary); padding-right: .5rem;}
.layer-nav .itm .parents{ font-size: 1.5rem; line-height: 1; font-family: 'Samsung Sharp Sans Bold'; color: var(--primary);}
.layer-nav .itm .sub{ padding-left: 2.5rem; padding-bottom: 1rem;}
.layer-nav .itm .sub .link{ display: flex; flex-flow: row wrap; gap: .5rem 2rem;}
.layer-nav .itm .sub .link a{ font-size: 1rem; line-height: 2;}
.layer-nav+.close{ position: absolute; top: 1.25vw; right: 1.25vw; cursor: pointer; opacity: 0; display: none;}
.layer-nav+.close i{ position: relative; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;}
.layer-nav+.close i::before,
.layer-nav+.close i::after{ content: ''; position: absolute; width: 2rem; height: 2px; background: #000;}
.layer-nav+.close i::before{ transform: rotate(45deg);}
.layer-nav+.close i::after{ transform: rotate(-45deg);}

.layer-nav-container .layui-layer-content{ display: flex; align-items: center; justify-content: center; height: 100vh!important;}
.layer-nav-container .close{ opacity: 1; display: block;}
.layer-nav-container .layer-nav{ opacity: 1; display: grid;}

/* menu */
.menu{ position: fixed; top: 50%; left: 1.25vw; z-index: 999; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 10px; width: 2.5vw; height: 4rem; border-radius: 5px; background: #003b94; opacity: 1; transform: translateY(-50%) scale(1); transition: all .3s;}
.menu i{ position: relative; width: 1.125rem; height: 1.125rem; border-top: 2px solid white; border-bottom: 2px solid white;}
.menu i:before{ content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: white; transform: translateY(-50%);}
.menu span{ font-size: 1rem; line-height: 1; color: white;}

.menu.hide{ opacity: 0; transform: translateY(-50%) scale(0);}

/* header */
header{ position: fixed; top: 0; left: 0; z-index: 999; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 0; padding: 0 6.25vw; background: url('/img/header.webp') center bottom no-repeat white; opacity: 0; transition: all 0.3s;}
header.show{ display: flex; opacity: 1; height: 6rem;}

header .logo{ display: flex; justify-content: center; align-items: center;}
header .logo img{ height: 4.5rem;}

nav{ position: relative; display: flex; height: 100%;}
nav .itm{ width: auto; height: 100%; padding:0 10px;}
nav .itm>a{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width:auto; padding:0 10px; height: 100%;}
nav .itm>a .cn{ font-size: 1.125rem; line-height: 2; color: var(--text)}
nav .itm>a .en{ font-size: 0.75rem; line-height: 1.5; color: #ccc;}

nav .itm .sub{ position: absolute; top: 6rem; left: 0; display: flex; align-items: center; width: 100%; height: 0; padding: 0 1.5rem; background: var(--primary); opacity: 0; overflow: hidden; transition: .35s;}
nav .itm .sub .cover{ flex-shrink: 0; width: 10rem; height: 5rem; border: 4px solid white;}
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: 1.05rem; line-height: 2; margin: .5em 0 .5em 4em; color: #000;}
nav .itm .sub .link a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--secondary); transition: .35s;}

nav .itm.hover>a,
nav .itm:hover>a{ background: var(--primary);}
nav .itm.hover>a .cn,
nav .itm:hover>a .cn{ color: #000}
nav .itm.hover>a .en,
nav .itm:hover>a .en{ color: #000}
nav .itm:hover>a+.sub{ height: 8rem; opacity: 1;}
nav .itm .sub .link a:hover{ color: var(--secondary)}
nav .itm .sub .link a:hover:after{ width: 100%;}

header .button{ display: flex; align-items: center; gap: 1rem;}
header .button a:first-child{ padding: 0 2em; border: 2px solid #dfcbb8; border-radius: var(--rounded); background: #fff9f3; font-size: 1.125rem; line-height: 2; color: #a16525;}
header .button a:last-child{ display: flex; justify-content: center; align-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--text); border-radius: 50%;}

header .wap-button{ display: none; gap: 1rem;}
header .wap-button .wap-login{ padding: 0 2em; border: 2px solid #dfcbb8; border-radius: var(--rounded); background: #fff9f3; font-size: 1rem; line-height: 1.5; color: #a16525;}
header .wap-button .wap-menu{ display: flex; align-items: center; cursor: pointer;}
header .wap-button .wap-menu i{ position: relative; width: 1.5rem; height: 1.5rem; border-top: 2px solid #eb5808; border-bottom: 2px solid #eb5808;}
header .wap-button .wap-menu i:before{ content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #eb5808; transform: translateY(-50%);}

.swiper-container{ width: 100vw; height: 100vh;}

.swiper-container .swiper-slide{ position: relative; display: flex; align-items: center; justify-content: center;}
.swiper-container .swiper-slide .column{ position: relative; z-index: 1; display: grid; width: 100%; padding: 0 6.25vw;}
.swiper-container .swiper-slide .background-image{ position: absolute; top: 0; left: 0; z-index: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.swiper-container .swiper-slide .background-image img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transition: 3s}
.swiper-container .swiper-slide-active .background-image img{ transform: scale(1);}

/* slideshow */
.slideshow{ position: relative; width: 100%; overflow: hidden;}
.slideshow-swiper{ width: 100%; height: 100%; overflow: hidden;}
.slideshow-swiper .swiper-slide{ width: 100%; overflow: hidden;}
.slideshow-swiper .item{ position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.slideshow-swiper .item .font{ position: absolute; z-index: 1;}
.slideshow-swiper .item .font .text{ position: relative; display: flex; align-items: center; justify-content: space-between; width: 62.5vw; height: 15vw; padding: 0 2.5vw 2.5vw;}
.slideshow-swiper .item .font .text img{ position: relative;}
.slideshow-swiper .item .font .text img:nth-child(1){ position: absolute; top: 0; left: 8.33333vw; width: 3.3333vw; height: 5vw;}
.slideshow-swiper .item .font .text img:nth-child(2){ width: 7.5vw; height: 2.5vw;}
.slideshow-swiper .item .font .text img:nth-child(3){ right: 1vw; width: 10vw; height: 12.5vw;}
.slideshow-swiper .item .font .text img:nth-child(4){ width: 7.5vw; height: 7.5vw;}
.slideshow-swiper .item .font .text img:nth-child(5){ width: 6.66666vw; height: 7.5vw;}
.slideshow-swiper .item .font .text img:nth-child(6){ width: 5.625vw; height: 6.66666vw;}
.slideshow-swiper .item .font .text img:nth-child(7){ top: 1.25vw; width: 15vw; height: 12.5vw;}
.slideshow-swiper .item .font .text img:nth-child(8){ right: 5.625vw; width: 11.25vw; height: 6.25vw;}
.slideshow-swiper .item .font .text img:nth-child(9){ position: absolute; right: 0; bottom: 2.5vw; left: 0; width: 26.25vw; height: 1.5625vw; margin: auto;}
.slideshow-swiper .item .cover{ position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.slideshow-swiper .item .cover img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: 10s}
.slideshow-swiper .swiper-slide-active .cover img{ transform: scale(1);}

.notice-box{ position: absolute; bottom: 0; left: 6.25vw; z-index: 2; display: grid; grid-template-columns: auto 1fr; background: #479652;}
.notice-box .title{ display: flex; justify-content: center; align-items: center; padding: 1em .25em 0; background: url('/img/ico-notice.webp') top .25em center no-repeat white; font-size: 1.125rem; line-height: 1; font-weight: bold; color: #479652;}
.notice-swiper{ width: 35vw; height: 4.5rem; overflow: hidden;}
.notice-swiper .item{ position: relative; display: grid; grid-gap: 0.25rem; align-items: center; width: 100%; padding: 0 1rem; color: white;}
.notice-swiper .item .tit{ font-size: 1rem; width: 85%;}
.notice-swiper .item .date{ font-size: 0.75rem;}
.notice-swiper .item .more{ position: absolute; right: 1rem; padding: .25em 1em; border: 1px solid white; border-radius: var(--rounded); font-size: 0.875rem;}

/* information */
.information .column{ grid-template-columns: repeat(12,1fr); grid-gap: 3vw 2.5vw;}

  .information-caption{ grid-column: span 2; display: flex;}
  .information-caption h1{ position: relative; font-size: 1.875rem; line-height: 1.25;}
  .information-caption h1::after{ content: ''; position: absolute; bottom: 0; left: 0; z-index: -1; display: block; width: 100%; height: 7px; background: #c6af8e;}

  .information-sort{ grid-column: 3 / 13; display: flex; align-items: center; justify-content: flex-end;}
  .information-sort a{ font-size: 1.25rem;}
  .information-sort i{ font-size: 1rem; padding: 0 1em; color: #ccc;}

  .information-list{ grid-column: span 12; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw 2vw;}
  .information-list .item{ position: relative; display: grid; grid-gap: .5rem; justify-items: start; padding: 2vw 1.5vw 2vw 4vw; box-shadow: 0 2px 18px rgba(0, 0, 0, .1); background: url('/img/item-information.webp') left center no-repeat; background-size: cover;}
  .information-list .item .num{ position: absolute; top: 2vw; left: 1.5vw; display: flex; justify-content: center; align-items: center;}
  .information-list .item .num::after{ content: ''; position: absolute; z-index: 0; width: 2.5rem; height: 2.5rem; box-shadow: 0 2px 18px rgba(0, 0, 0, .1); transform: rotate(45deg); background: white;}
  .information-list .item .num i{ z-index: 1; font-size: 1.875rem; line-height: 1; font-weight: bold; font-style: normal;}
  .information-list .item .tit{ font-size: 1.375rem; font-weight: bold;}
  .information-list .item .date,
  .information-list .item .address,
  .information-list .item .unit{ display: grid; grid-template-columns: 6.5rem 1fr; font-size: 1rem; color: #666;}
  .information-list .item .date::before{ content: '活动时间：'; color: #ccc; background: url('/img/ico-date.webp') left top .25rem no-repeat; background-size: .875rem; padding-left: 1.25em;}
  .information-list .item .address::before{ content: '活动地址：'; color: #ccc; background: url('/img/ico-address.webp') left top .25rem no-repeat; background-size: .875rem; padding-left: 1.25em;}
  .information-list .item .unit::before{ content: '主办单位：'; color: #ccc; background: url('/img/ico-unit.webp') left top .25rem no-repeat; background-size: .875rem; padding-left: 1.25em;}
  .information-list .item .details{ font-size: 1rem; line-height: 2; padding: 0 1em; border: 2px solid #c6af8e; border-radius: var(--rounded); margin-top: 1.5rem; color: #c6af8e;}

/* live */
.live .column{ grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw 2.5vw;}

  .live-ico{ display: flex; align-items: center; grid-column: span 4;}
  .live-ico img{ width: auto; height: 8.75vw;}

  .live-cover{ position: relative; grid-column: 5 / 13; grid-row: span 4; height: 100%; overflow: hidden;}
  .live-cover::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); background: #c6af8e; border-radius: 10px;}
  .live-cover .cover{ position: relative; display: block; width: calc(100% - 20px); height: 0; padding-bottom: calc((100% / 16 * 9) - 20px); margin: 10px; overflow: hidden;}
  .live-cover .cover::before{ content: '更多视频'; position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 10rem; height: 4.5rem; background: url('/img/ico-play.webp') center center no-repeat; font-size: 1.25rem; color: white; transform: translate(-50%, -50%);}
  .live-cover .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden; border-radius: 5px;}

  .live-info{ grid-column: span 4; display: grid; grid-gap: 1rem; color: white; padding-left: 1.25vw; overflow: hidden;}
  .live-info .tit{ font-size: 1.875rem; font-weight: bold;}
  .live-info .date::before{ content: '时间：'; background: url('/img/ico-time.webp') left center no-repeat; background-size: 1.125rem; padding-left: 1.5em;}

  .live-more{ align-self: end; grid-column: span 3; display: flex; padding-left: 1.25vw;}
  .live-more a{ position: relative; color: white; padding-top: .5em;}
  .live-more a::before{ content: ''; position: absolute; top: 0; left: 0; display: block; width: 1.5rem; height: 3px; border-radius: 1.5px; background: white;}

  .live-more-swiper{ align-self: end; grid-column: span 4; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);}
  .live-more-swiper .swiper-slide{ width: 100%;}
  .live-more-swiper .swiper-slide a{ display: flex; justify-content: center; align-items: center; width: 100%;}
  .live-more-swiper .swiper-slide a .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); border: 3px solid #c6af8e; border-radius: 10px; overflow: hidden;}
  .live-more-swiper .swiper-slide a .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden; border-radius: 5px;}

  .live-swiper-button{ position: absolute; z-index: 2; top: 50%; width: 4rem; height: 4rem; border-radius: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0!important;}
  .live-swiper-prev{ left: 2.5rem; background: url('/img/arrow-prev.webp') center center no-repeat rgba(255, 255, 255, 0.4);}
  .live-swiper-next{ right: 2.5rem; background: url('/img/arrow-next.webp') center center no-repeat rgba(255, 255, 255, 0.4);}
  .live-swiper-pagination{ position: absolute; right: 6.25vw; bottom: -5vw; z-index: 2; display: flex; gap: 10px; justify-content: center; width: 57.5vw;}
  .live-swiper-pagination .swiper-pagination-bullet{ width: 30px; height: 4px; border-radius: 0; background: white;}
  .live-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;}

/* bulletin */
.bulletin{ background: url('/img/bg-bulletin.webp');}
.bulletin .column{ grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.bulletin .background-left-image{ position: absolute; top: 0; left: 0; z-index: 0; display: flex; max-width: 62.5%; height: 100%;}
.bulletin .background-left-image img{ width: 100%; height: 100%;}

  .bulletin-swiper{ grid-column: 2 / 3; overflow: hidden; background: url('/img/theme.webp') right 2.5vw top no-repeat;}
  .bulletin-swiper a{ position: relative; top: 0; display: grid; justify-items: start; padding: 0.5rem 5vw 0 7.5vw; color: white;}
  .bulletin-swiper .date{ position: relative; font-size: 1.5rem; padding: .5em .5em 0 .5em; border: 3px solid white; border-radius: 10px; margin-bottom:30px;}
  .bulletin-swiper .date::before,
  .bulletin-swiper .date::after{ content: ''; position: absolute; top: -0.85rem; right: .75em; width: 3px; height: 1.5rem; background: white;}
  .bulletin-swiper .date::before{ left: .75em; right: auto;}
  .bulletin-swiper .session{ font-size: 1.5rem; line-height: 2;}
  .bulletin-swiper .tit{ font-size: 2.5rem; font-weight: bold; line-height: 1.25;}
  .bulletin-swiper .desc{ font-size: 1.125rem; line-height: 2; margin: 3rem 0 6rem; -webkit-line-clamp: 3;}

  .bulletin-swiper-control{ grid-column: 2 / 3; display: flex; align-items: center; justify-content: space-between; width: 100%;}
  .bulletin-swiper-button{ width: 4rem; height: 4rem; border-radius: 50%;}
  .bulletin-swiper-button.bulletin-swiper-prev{background: url('/img/arrow-prev.webp') center center no-repeat rgba(255, 255, 255, 0.4);}
  .bulletin-swiper-button.bulletin-swiper-next{background: url('/img/arrow-next.webp') center center no-repeat rgba(255, 255, 255, 0.4);}
  .bulletin-swiper-pagination{ display: flex; gap: 40px; justify-content: center;}
  .bulletin-swiper-pagination .swiper-pagination-bullet{ width: 18px; height: 18px; border: 2px solid white; background: none; opacity: 1;}
  .bulletin-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: white;}

/* dance */
.dance .column{ grid-template-columns: 22.5vw 25vw 1fr; height: 100%;}
.swiper-container .swiper-slide.dance .column{ padding: 0;}

  .dance-banner{ position: relative; width: 100%; height: 100%; background: #d54701; overflow: hidden;}
  .dance-banner::after{ content: ''; position: absolute; z-index: 0; bottom: -25vw; right: -5vw; width: 40vw; height: 40vw; border: 6.25vw solid #eb5808; border-radius: 50%;}
  .dance-banner-bg{ position: absolute; top: 1.25vw; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 5vw); overflow: hidden;}
  .dance-banner-bg img{ position: absolute; width: auto; height: 100%;}
  .dance-banner-dancer{ position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; width: 18.75vw; height: 30vw; margin: auto;}
  .dance-banner-dancer img{ width: 100%; height: 100%;}

  .dance-more{ display: grid; align-content: space-between; justify-items: center; width: 100%; height: 100%; padding: 5vw 0;}
  .dance-more a.more{ font-size: 1rem; line-height: 2; padding: 0 1em; border: 2px solid #896100; border-radius: var(--rounded); color: #896100;}

  .dance-list{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 2px;}
  .dance-list .item{ position: relative; display: grid; justify-items: center; align-content: start; position: relative;}
  .dance-list .item::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 100%; background: #ccc;}
  .dance-list .item::after{ content: ''; position: absolute; right: 0; bottom: 0; width: 1px; height: 100%; background: #ccc;}
  .dance-list .item:not(:first-child)::before{ display: none;}
  .dance-list .item:nth-child(1) .cover{ height: 60vh;}
  .dance-list .item:nth-child(2) .cover{ height: 50vh;}
  .dance-list .item:nth-child(3) .cover{ height: 80vh;}
  .dance-list .item:nth-child(4) .cover{ height: 70vh;}
  .dance-list .item:nth-child(5) .cover{ height: 60vh;}
  .dance-list .item .cover{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
  .dance-list .item .cover img{ position: absolute; top: 50%; right: 50%; width: 100%; height: auto; transform: translate(50%,-50%);}
  .dance-list .item .cover img:nth-child(1){ z-index: 1; opacity: 1;}
  .dance-list .item .cover img:nth-child(2){ z-index: 2; opacity: 0;}
  .dance-list .tit{ z-index: 1; display: flex; justify-content: center; padding-top: 2rem;}
  .dance-list .item:nth-child(1) .tit{ position: absolute; top: 60vh;}
  .dance-list .item:nth-child(2) .tit{ position: absolute; top: 50vh;}
  .dance-list .item:nth-child(3) .tit{ position: absolute; top: 10vh;}
  .dance-list .item:nth-child(4) .tit{ position: absolute; top: 70vh;}
  .dance-list .item:nth-child(5) .tit{ position: absolute; top: 60vh;}
  .dance-list .cn{ position: relative; writing-mode: vertical-lr; font-size: 1.875rem; line-height: 1.25;}
  .dance-list .cn::before{ content: ''; position: absolute; top: -1rem; right: 0; left: 0; width: 7px; height: 7px; margin: auto; border: 2px solid #000; border-radius: 50%;}
  .dance-list .item:nth-child(3) .cn{ color: white;}
  .dance-list .item:nth-child(3) .cn::before{ border: 2px solid white;}
  .dance-list .en{ writing-mode: vertical-lr; font-size: 1.5rem; line-height: 1.25; text-transform: uppercase; font-family: serif; color: #c6b39c;}
  .dance-list .more{ position: absolute; bottom: 5vw; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border: 2px solid #c6af8e; border-radius: 50%; font-size: 1rem; font-weight: bold; line-height: 1; color: #c6af8e;}

/* stage */
.stage .column{ grid-template-columns: 22.5vw 1fr; grid-gap: 2.5vw;}

  .stage-more{ grid-row: span 3; display: grid; justify-items: start;}
  .stage-more .stage-more-col{ display: grid; align-content: space-between; justify-items: center; height: 100%;}
  .stage-more a.more{ font-size: 1rem; line-height: 2; padding: 0 1em; border: 2px solid white; border-radius: var(--rounded); color: white;}

  .stage-sort{ display: grid; grid-template-columns: repeat(5,1fr);}
  .stage-sort .item{ position: relative; top: 0; display: grid; grid-template-columns: 7rem 1fr; align-items: center;}
  .stage-sort .item::before{ content: ''; position: absolute; left: calc(7rem - 5px); top: 50%; z-index: 1; display: block; width: 10px; height: 10px; border-radius: 50%; background: white; transform: translateY(-50%);}
  .stage-sort .item .name{ position: relative; display: flex; justify-content: center; align-items: center;}
  .stage-sort .item .name::before{ content: ''; position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; height: 1px; background: #74afe4; transform: translateY(-50%);}
  .stage-sort .item .name i{ position: relative;background: white; padding: 0 .5em; border: 2px solid #74afe4; border-radius: var(--rounded); font-size: 1.125rem; line-height: 2; font-style: normal;}
  .stage-sort .item .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 2); border-radius: 5px; overflow: hidden;}
  .stage-sort .item .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}

  .stage-swiper{ width: 100%; overflow: hidden; }
  .stage-swiper .swiper-slide{}
  .stage-swiper .item{ display: grid; grid-template-columns: 2fr 1fr;}
  .stage-swiper .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 2); overflow: hidden;}
  .stage-swiper .cover img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
  .stage-swiper .info{ display: grid; align-content: space-between; padding: 2rem; color: white; background: url('/img/stage-swiper-bg.webp') right center no-repeat; background-size: 100%;}
  .stage-swiper .info .tit{ display: grid; grid-gap: 1rem;}
  .stage-swiper .info .tit span{ font-size: 1.375rem;}
  .stage-swiper .info .tit i{ font-size: 1rem; font-style: normal;}
  .stage-swiper .info .view{ justify-self: start; padding: .25em 1em; border: 2px solid white; border-radius: var(--rounded);}
  .stage-swiper .info .data{ display: grid; grid-template-columns: repeat(3,1fr); width: 100%; padding: 1rem 0; border-radius: 5px; background: white;}
  .stage-swiper .info .data span{ display: grid; justify-items: center; padding-top: 2.5rem;}
  .stage-swiper .info .data span:nth-child(1){ background: url('/img/ico-count.webp') top center no-repeat;}
  .stage-swiper .info .data span:nth-child(2){ background: url('/img/ico-comment.webp') top center no-repeat;}
  .stage-swiper .info .data span:nth-child(3){ background: url('/img/ico-forward.webp') top center no-repeat;}
  .stage-swiper .info .data span b{ font-size: 0.875rem; font-weight: normal; color: var(--text);}

  .stage-list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw;}
  .stage-list .item{ position: relative; top: 0;}
  .stage-list .item .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 2); overflow: hidden;}
  .stage-list .item .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
  .stage-list .item .info{ position: absolute; bottom: 0; left: 0; display: grid; width: 100%; padding: .5rem 1rem; background: rgba(0, 0, 0, .5); color: white;}
  .stage-list .item .info span{ width: 100%;}
  .stage-list .item .info b{ font-size: 0.875rem; font-weight: normal;}

/* video */
.video .column{ grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; grid-gap: 2.5vw;}

  .video-caption{ display: flex;}
  .video-caption h1{ position: relative; font-size: 1.875rem; line-height: 1.25; color: white;}
  .video-caption h1::after{ content: ''; position: absolute; bottom: 0; left: 0; z-index: -1; display: block; width: 100%; height: 7px; background: #a298d2;}

  .video-sort{ display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .25em 1.5em; border: 2px solid white; border-radius: var(--rounded);}
  .video-sort a{ font-size: 1.125rem; color: white}
  .video-sort i{ font-size: 0.875rem; color: white}

  a.video-more{ display: flex; padding: .25em 1.5em; border: 2px solid white; border-radius: var(--rounded); font-size: 1.125rem; color: white;}
  
  .video-list{ grid-column: span 3; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 100%;}
  .video-list .item{ position: relative; top: 0;}
  .video-list .item .cover{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: calc(100% / 4 * 3); overflow: hidden;}
  .video-list .item .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
  .video-list .item .date{ position: absolute; z-index: 1; left: 1rem; padding: .25em .5em; background: #6759a9; color: white; transform: translateY(-70%);}
  .video-list .item .tit{ position: relative; z-index: 0; width: 100%; padding: 1.5rem 1rem .5rem; background: white; font-size: 1.125rem;}
  .video-list .item .details{ width: 100%; padding: .25rem 1rem 1rem; background: white; text-align: right; color: white;}
  .video-list .item:nth-child(2n-1){ top: 2.5vw;}

/* footer */
.swiper-container .swiper-slide.footer .column{ height: 100%; padding: 5vw 6.25vw; grid-template-columns: repeat(3,1fr);}
.foot-logo{ grid-column: span 3; align-self: center; justify-self: center;}
.foot-logo img{ width: auto; height: 9rem;}
.foot-contact{ align-self: center;}
.foot-contact .item{ display: flex; align-items: center; font-size: 1rem; line-height: 2;}
.foot-contact .item i{ margin-right: 0.5em;}
.foot-qrcode{ display: flex; justify-content: space-between; align-items: center;}
.foot-qrcode .item{ display: grid; justify-items: center;}
.foot-qrcode .item span{ text-align: center;}
.foot-nav{ align-self: center; justify-self: center; display: grid; grid-template-columns: 1fr 3rem 1fr 3rem 1fr; justify-items: center; grid-gap: 1rem 0;}
.copyright{ grid-column: span 3; align-self: end; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border: 1px solid #eee6cf; background: white;}
.copyright::after{ content: '百航科技：专业网络品牌设计';}

/* login-box */
#login-box{ display: none;}
.login-box{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 60px; width: 300px; height: 410px; background: #474747;}
.login-box .close{ position: absolute; top: 1.5rem; right: 1.5rem; cursor: pointer;}
.login-box .close i{ position: relative; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;}
.login-box .close i::before,
.login-box .close i::after{ content: ''; position: absolute; width: 1rem; height: 2px; background: white;}
.login-box .close i::before{ transform: rotate(45deg);}
.login-box .close i::after{ transform: rotate(-45deg);}
.login-box h1{ font-size: 1.5rem; font-weight: normal; color: white;}
.login-box .qrcode{ width: 12rem; height: 12rem; background: white;}