@charset "utf-8";
::-webkit-scrollbar{ width: 6px; height: 1px;}
::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--color-theme);}
::-webkit-scrollbar-track { border-radius: 3px; background: transparent}

.header,
.slide,
.container,
.footer{ width: 100%; overflow: hidden;}

.header{ padding: 18px 48px;}

.header .logo{ float: left; width: auto; height: 60px;}
.header .logo a,
.header .logo a p,
.header .logo a img{ display: block; width: auto; height: 100%;}

.header .hotline{ float: right; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 20px; line-height: 1.5; color: var(--color-sub);}
.header .hotline:before{ content: '\f8d3'; margin-right: 1em; font-family: 'Font Awesome 5 Pro'; font-weight: bold;}
.header .menu{ float: right; padding-left: 2em; padding-right: 1em; font-size: 20px; color: #fff; text-transform: uppercase; background: url('../img/menu.svg') left center no-repeat; cursor: pointer; display: none;}

.header-first{ position: absolute; top: 0; right: 0; z-index: 9; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.header-first:after{ display: none;}
.header-first .menu{ display: block;}

.header-fixed{ position: fixed; top: -96px; right: 0; z-index: 9; background: #fff; transition: .25s cubic-bezier(0.4, 0.0, 0.2, 1);}
.header-fixed:after{ content: ''; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: #f3f4f5;}
.header-fixed .menu{ background: var(--color-theme); -webkit-mask: url('../img/menu.svg') center center no-repeat;}

.navgation{ float: right; justify-content: flex-end; }
.nav-list{ font-size: 16px; padding: 5px 2em;}
.nav-list:after{ content: ''; display: block; clear: both;}
.nav-list li{ float: left;}
.nav-list li a{ display: block; padding: 0 2em; line-height: 50px; color: var(--color-text);}
.nav-list li a:hover{ color: #fff; background: var(--color-theme);}

.slide{ width: 100%; height: 50vw;}
.slide:after{ content: ''; position: absolute; right: 0; bottom: -1px; z-index: 2; width: 100%; height: 25%; background: url('../img/lang.png') center bottom no-repeat; background-size: cover; display: none;}
.slide .swiper-slide .info{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; flex-flow: column nowrap; justify-content: center; max-width: 1440px; height: 100%; margin: auto; text-transform: uppercase; cursor: default;}
.slide .swiper-slide .info .group-1{ line-height: 1.5; color: #fff;}
.slide .swiper-slide .info .group-1 .cn{ font-size: 24px;}
.slide .swiper-slide .info .group-1 .en{ font-size: 18px;}
.slide .swiper-slide .info .group-2{ padding: 40px 0 70px; line-height: 1.3; font-weight: bold; color: #fff}
.slide .swiper-slide .info .group-2 .en{ font-size: 30px;}
.slide .swiper-slide .info .group-2 .cn{ font-size: 60px;}
.slide .swiper-slide .info .group-3{ margin-bottom: 70px; font-size: 18px; overflow: hidden;}
.slide .swiper-slide .info .group-3 .hotline{ float: left; padding: 0 1em; font-size: 28px; line-height: 2; color: #fff; background: var(--color-sub);}
.slide .swiper-slide .info .group-3 .hotline i{ font-size: 24px;}

.slide .swiper-slide .thumb{ display: block; width: 100%; height: 100%; transition: 1s linear 2s; transform:scale(1.1);}
.slide .swiper-slide-active .thumb, 
.slide .swiper-slide-duplicate-active .thumb{ transition: 6s linear; transform:scale(1); }

.slide .swiper-slide .info .group-1{ opacity: 0; transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;}
.slide .swiper-slide .info .group-2{ opacity: 0; transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1) .5s;}
.slide .swiper-slide .info .group-3{ opacity: 0; transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s;}

.slide .swiper-slide .info .group-1{ transform: translate3D(0,-100%,0);}
.slide .swiper-slide .info .group-2{ transform: translate3D(100%,0,0);}
.slide .swiper-slide .info .group-3{ transform: translate3D(0,100%,0);}

.slide .swiper-slide-active .info .group-1,
.slide .swiper-slide-active .info .group-2,
.slide .swiper-slide-active .info .group-3{ transform: translate3D(0,0,0); opacity: 1;}

.slide .button{ position: absolute; bottom: 10%; z-index: 4; width: 48px; height: 48px; font-size: 20px; text-align: center; line-height: 54px; color: #fff; cursor: pointer;}
.slide .button:after{ color: #fff;}
.slide .button:hover{ color: var(--color-theme);}
.slide .button:hover:after{ color: var(--color-theme);}
.slide .prev{ right: 96px;}
.slide .prev:after{ content: '\f053'; font-family: 'Font Awesome 5 Pro';}
.slide .next{ right: 48px;}
.slide .next:after{ content: '\f054'; font-family: 'Font Awesome 5 Pro';}

.slide .pagination{ position: absolute; bottom: 10%; left: 48px; z-index: 4; width: auto; padding: 20px 0; font-size: 0;}
.slide .pagination span{ display: inline-block; width: 8px; height: 8px; margin: 0 !important; margin-right: 48px !important; border: 2px solid var(--color-theme); border-radius: 50%; background: transparent; opacity: 1 !important;}
.slide .pagination span.swiper-pagination-bullet-active{ background: var(--color-theme);}

.row{ position: relative; width: 100%; padding: 80px 0; margin: auto;}
.row:after{ content: ''; display: block; clear: both;}

.row-title{ position: relative; max-width: 1440px; margin: auto; font-weight: bold;}
.row-title .en{ font-size: 42px; line-height: 50px; font-family: AgB; text-transform: uppercase; color: var(--color-sub);}
.row-title .cn{ position: relative; font-size: 24px; line-height: 40px; color: var(--color-text);}
.row-title .cn:before{ content: ''; position: absolute; top: 0; bottom: 0; left: -30px; width: 20px; height: 5px; margin: auto; background: var(--color-theme);}
.row-title .more{ position: absolute; top: 0; right: 0; bottom: 0; height: 40px; padding: 0 2em; margin: auto; border: 1px solid var(--color-line); font-size: 14px; line-height: 38px; text-transform: uppercase; color: var(--color-gray); cursor: pointer;}
.row-title .more i:before{ color: var(--color-gray);}
.row-title .more:hover{ color: #fff; background: var(--color-theme);}
.row-title .more:hover i:before{ color: #fff;}

.row-title .category{ position: absolute; right: 0; bottom: 0; overflow: hidden;}
.row-title .category a{ position: relative; float: left; padding: 0 .5em; margin: 0 1em; font-size: 14px; line-height: 2.5; color: var(--color-gray); font-weight: normal;}
.row-title .category a:hover{ color: var(--color-theme)}
.row-title .category a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-theme);}
.row-title .category a:hover:after{ width: 100%;}

.row-content{ max-width: 1440px; margin: auto; padding-top: 50px;}

.about .row-content{ position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; background: url('../img/about.png') right top no-repeat;}
.about .row-content .cover{ position: relative; width: 32.25%;}
.about .row-content .cover:after{ content: ''; position: absolute; right: -24px; bottom: -24px; width: 50%; height: calc( 100% - 72px); background: var(--color-sub);}

.cover-list{ background: var(--color-bg);}
.cover-list .swiper-slide a{ display: block;}
.cover-list .swiper-slide a .thumb{ height: 560px;}
.cover-list .button{ position: absolute; bottom: 0; z-index: 2; width: 54px; height: 54px; font-size: 18px; text-align: center; line-height: 54px; color: var(--color-gray); background: #fff; cursor: pointer;}
.cover-list .button:after{ color: var(--color-gray);}
.cover-list .button:hover{ color: #fff; background: var(--color-theme);}
.cover-list .button:hover:after{ color: #fff;}
.cover-list .prev{ left: 0;}
.cover-list .prev:after{ content: '\f053'; font-family: 'Font Awesome 5 Pro';}
.cover-list .next{ left: 54px;}
.cover-list .next:after{ content: '\f054'; font-family: 'Font Awesome 5 Pro';}

.about .row-content .infomation{ width: 57.75%; padding-top: 40px;}
.about .row-content .infomation .caption{ font-size: 20px; font-weight: bold; line-height: 1.5;}
.about .row-content .infomation .line{ width: 4em; height: 4px; margin: 40px 0; font-size: 20px; background: var(--color-theme);}
.about .row-content .infomation .desc{ font-size: 14px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; word-break: break-word; overflow: hidden;}
.about .row-content .infomation .more{ display: block; width: 8em; margin-top: 40px; font-size: 18px; line-height: 2.25; text-align: center; text-transform: uppercase; color: #fff; background: var(--color-theme); cursor: pointer;}
.about .row-content .infomation .more:hover{ background: var(--color-sub);}
.about .row-content .number{ position: absolute; right: 0; bottom: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 50%;}
.about .row-content .number:before,
.about .row-content .number:after{ content: ''; position: absolute; top: 0; bottom: 0; width: 1px; height: 35%; margin: auto; background: #ccc;}
.about .row-content .number:before{ left: 33.33333%;}
.about .row-content .number:after{ right: 33.33333%;}
.about .row-content .number .item{ display: flex; flex-flow: column nowrap; width: 33%; padding: 10px 0 20px; text-align: center;}
.about .row-content .number .item b{ position: relative; font-size: 60px; line-height: 1.25;}
.about .row-content .number .item b i{ position: absolute; bottom: 15px; padding-left: .5em; font-size: 12px; color: #999;}
.about .row-content .number .item span{ font-size: 18px; line-height: 1.5; font-weight: bold;}

.album{ background: url('../img/album-bg.png') center bottom no-repeat; background-size: cover;}
.album-list .swiper-slide .thumb{ height: 257px; background: var(--color-bg);}

.product-list .swiper-slide a .thumb{ height: 228px; background: var(--color-bg);}
.product-list .swiper-slide a .info{ margin: .75em 0; font-size: 16px; line-height: 1.5; text-align: center; color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.case{ background: url('../img/case-bg.png') center top no-repeat; background-size: cover;}
.case-button{ position: absolute; right: 0; bottom: 0; z-index: 2; overflow: hidden;}
.case-button .button{ float: left; width: 36px; height: 36px; margin: 0 3px; font-size: 18px; text-align: center; line-height: 36px; color: var(--color-gray); background: #fff; cursor: pointer;}
.case-button .button:after{ color: var(--color-gray);}
.case-button .button:hover{ color: #fff; background: var(--color-theme);}
.case-button .button:hover:after{ color: #fff;}
.case-button .prev{ left: 0;}
.case-button .prev:after{ content: '\f053'; font-family: 'Font Awesome 5 Pro'; font-weight: 100;}
.case-button .next{ left: 54px;}
.case-button .next:after{ content: '\f054'; font-family: 'Font Awesome 5 Pro'; font-weight: 100;}
.case .row-content{ max-width: 100%;}
.case-list .swiper-slide .thumb{ height: 340px; background: var(--color-bg);}

.news-list .swiper-slide a .thumb{ height: 116px; background: var(--color-bg);}
.news-list .swiper-slide a .info{ padding: 30px 0;}
.news-list .swiper-slide a .info .caption{ margin-bottom: 1em; font-size: 16px; line-height: 1.5; color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.news-list .swiper-slide a .info .desc{ font-size: 14px; line-height: 2; color: var(--color-gray); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; overflow: hidden;}
.news-list .swiper-slide a .info .date{ margin-top: 1.25em; font-size: 14px; line-height: 1.5; color: var(--color-second);}

.contact{ background: url('../img/contact-bg.png') center top no-repeat; background-size: cover;}
.contact .row-content{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.contact .row-content #map{ width: 42.5%; height: 305px; background: #000;}

.contact-list{ overflow: hidden;}
.contact-list dt{ padding-bottom: 20px;}
.contact-list dt strong{ display: block; font-size: 24px; line-height: 1.5; font-weight: bold; color: var(--color-text);}
.contact-list dt i{ display: block; font-size: 18px; line-height: 1.5; text-transform: uppercase; color: var(--color-gray);}
.contact-list dd{ font-size: 14px; line-height: 2; color: var(--color-second); overflow: hidden;}
.contact-list dd a{ float: left; width: 48px; height: 48px; border-radius: 50%; margin-top: 1em; margin-right: 1em; font-size: 24px; text-align: center; line-height: 2; color: #fff; background: var(--color-theme);}
.contact-list dd a:hover{ background: var(--color-sub);}

.qcode-list{ overflow: hidden;}
.qcode-list .item{ float: left; width: 122px; height: auto;}
.qcode-list .item:first-child{ margin-right: 64px;}
.qcode-list .item .thumb{ width: 100%; height: 122px; background: #fff;}
.qcode-list .item .thumb img{ display: block; width: 100%; height: 100%;}
.qcode-list .item .info{ padding: 20px 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--color-second);}

.footer{ border-top: 1px solid #f9fafb;}
.copyright{ max-width: 1440px; padding: 1.5em 0; margin: auto; font-size: 14px; line-height: 1.5; text-transform: uppercase; color: var(--color-second);}
.copyright:after{content: 'Design by 百航科技-专业网络品牌设计'; float: right;}
.copyright a{ color: var(--color-second);}

.navgation-fixed{ position: fixed; top: -100vh; right: 0; z-index: 10; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: #fff; transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);}
.navgation-fixed .close{ position: absolute; top: 33px; right: 48px; z-index: 11; height: 30px; padding-right: 1em; padding-left: 2em; font-size: 20px; text-transform: uppercase; cursor: pointer;}
.navgation-fixed .close:before,
.navgation-fixed .close:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 5px; display: block; width: 30px; height: 2px; margin: auto; background: var(--color-theme);}
.navgation-fixed .close:before{ transform: rotate(45deg);}
.navgation-fixed .close:after{ transform: rotate(-45deg);}

.nav-fixed{ display: flex; flex-flow: row nowrap; justify-content: space-around; width: 80%;}
.nav-fixed li>a{ position: relative; display: block; padding-bottom: 15px; font-size: 20px; line-height: 1.5; color: var(--color-text);}
.nav-fixed li:hover>a{ color: var(--color-theme)}
.nav-fixed li dl{ position: relative; padding-top: 15px;}
.nav-fixed li dl:before{ content: ''; position: absolute; top: 0; left: 0; width: 2em; height: 2px; background: var(--color-theme);}
.nav-fixed li dl:hover:before{ width: 100%;}
.nav-fixed li dl dd>a{ display: block; padding: .25em 0; font-size: 16px; line-height: 1.5; color: var(--color-gray);}
.nav-fixed li dl dd>a:hover{ color: var(--color-theme)}

.convenient-btn{ position: fixed; right: 0; bottom: 10%; z-index: 9; display: flex; flex-flow: column nowrap;}
.convenient-btn a{ position: relative; right: -5.5em; display: flex; flex-flow: row nowrap; align-items: stretch; margin-top: 20px; font-size: 14px; color: #fff; transition: .3s;}
.convenient-btn a i{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50% 0 0 50%; font-size: 16px; text-align: center; background: var(--color-sub);}
.convenient-btn a span{ padding-right: .75em; padding-left: 0.25em; line-height: 40px; background: var(--color-sub);}
.convenient-btn a:hover{ right: 0;}

/* sub */
  /* common */
  .banner{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 570px;}
  .banner .info{ position: relative; z-index: 2; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; color: #fff; text-transform: uppercase;}
  .banner .info .en{ font-size: 60px; line-height: 1.5; font-weight: bold;}
  .banner .info .cn{ position: relative; padding-bottom: 1em; font-size: 40px; line-height: 1.5; font-weight: bold;}
  .banner .info .cn:after{ content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 100px; height: 2px; margin: auto; background: #fff;}
  .banner .info .slogan{ padding: 2.5em 0; font-size: 16px; line-height: 1.5; letter-spacing:5px}
  .banner .bg{ position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; }
  .banner .bg p{ display: block; width: 100%; height: 100%;}

  .column{ position: relative; width: 100%; max-width: 1440px; padding: 80px 0; margin: auto;}
  .column:after{ content: ''; display: block; clear: both;}

  .column-category{ width: 100%; background: #f9fafb;}
  .list-category{ width: 100%; max-width: 1440px; margin: auto;}
  .list-category .swiper-slide a{ position: relative; display: block; padding: 1em 0; border-bottom: 1px solid transparent; font-size: 15px; line-height: 1.75; text-align: center; color: var(--color-text); transition: .25s;}
  .list-category .swiper-slide a:before,
  .list-category .swiper-slide a:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; height: 30%; margin: auto; background: var(--color-line);}
  .list-category .swiper-slide a:after{ right: 0; left: auto;}
  .list-category .swiper-slide a.active,
  .list-category .swiper-slide a:hover{ border-bottom: 1px solid var(--color-theme); color: var(--color-theme);}

  .page-number{ position: relative; clear: both; margin-top: 60px; overflow: hidden; }
  .page-number a,
  .page-number span{ float: left; display: block; width: 40px; height: 40px; margin-right: 10px; font-size: 16px; line-height: 40px; text-align: center; color: #666; background: #f4f4f4; cursor: pointer; }
  .page-number a:hover{ color: #fff; background: var(--color-sub); }
  .page-number span{ color: #fff; background: var(--color-theme); }
  .page-number .prev,
  .page-number .next{ position: absolute; font-family: 'Font Awesome 5 Pro'; width: 100px; margin: auto; font-size: 16px; font-weight: 100; }
  .page-number .prev{ right: 100px;  }
  .page-number .next{ right: 0; }
  .page-number a.prev{ color: #fff; background: var(--color-theme);}
  .page-number a.next{ color: #fff; background: var(--color-theme); }
  .page-number span.prev{ color: #666; background: #f4f4f4; }
  .page-number span.next{ color: #666; background: #f4f4f4; }

  /* about */

  .header-sub{position: relative; top: 0; right: 0; z-index: 9; background: #fff;}

  /* product */
  .list-product{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 48px 24px;}
  .list-product li a{ display: block;}
  .list-product li a .thumb{ height: 170px;}
  .list-product li a .info{ padding: 1em 0; font-size: 14px; line-height: 1.75; color: var(--color-text); transition: .25s;}
  .list-product li a:hover .info{ color: var(--color-theme); padding-left: 1em;}

  /* album */
  .list-album{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 48px 24px;}
  .list-album li a{ display: block; transition: .25s;}
  .list-album li a .thumb{ height: 192px;}
  .list-album li a .info{ padding: 15px; line-height: 1.75; text-align: center; color: var(--color-text); background: #fff; transition: .25s;}
  .list-album li a .info .en{ font-size: 12px; color: var(--color-gray);}
  .list-album li a .info .caption{ font-size: 14px;}
  .list-album li a:hover{ box-shadow: 0 5px 5px rgba(0,0,0,.05);}
  .list-album li a:hover .info{ color: var(--color-theme);}
  
  /* news */
  .list-news{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 48px 24px;}
  .list-news li a{ display: grid; grid-template-columns: 180px 1fr; grid-column-gap: 15px; transition: .25s; background: #f9fafb;}
  .list-news li a .thumb{ width: 100%; height: 135px;}
  .list-news li a .info{ display: flex; flex-flow: column nowrap; justify-content: center; padding-right: 15px; line-height: 1.5;}
  .list-news li a .info .caption{ font-size: 16px; color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
  .list-news li a .info .desc{ margin: 1em 0; font-size: 13px; color: var(--color-gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; overflow: hidden;}
  .list-news li a .info .date{ font-size: 12px; color: var(--color-text);}


  /* about */
  .column-title{ position: relative; }
  .column-title .en{ font-size: 30px; line-height: 1.5; font-weight: bold; text-transform: uppercase; color: var(--color-sub);}
  .column-title .cn{ position: relative; font-size: 20px; line-height: 1.5; font-weight: bold; color: var(--color-text);}
  .column-title .desc{ position: absolute; top: 0; right: 0; bottom: 0; width: 40%; height: 5.25em; margin: auto; font-size: 12px; line-height: 1.75; color: var(--color-gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; overflow: hidden;}

  .column-line{ width: 100%; height: 1px; margin: 40px auto; background: var(--color-line);}

  .column-content{ font-size: 15px; line-height: 2; text-align: justify; color: var(--color-text);}
  .column-content p{ padding-bottom: 1em;}
  .column-content a{ color: var(--color-text);}
  .column-content img{ display: inline-block; max-width: 100%;}

  /* show */
  .article-title{ position: relative;}
  .article-title h1{ padding-bottom: 10px; font-size: 24px; line-height: 1.7;}
  .article-title span{ display: block; font-size: 13px; line-height: 1.5; color: var(--color-gray);}

  .article-line{ width: 100%; height: 1px; margin: 40px auto; background: var(--color-line);}

  .article-content{ font-size: 15px; line-height: 2; text-align: justify; color: var(--color-text);}
  .article-content p{ padding-bottom: 1em;}
  .article-content a{ color: var(--color-text);}
  .article-content img{ display: inline-block; max-width: 100%;}