/******************************************* 基础样式 *******************************************/
/***********************************************
	全局属性
***********************************************/
@charset "utf-8";
@font-face {
  font-family: 'HELVETICANEUELTPRO-THEX';
  src: url('fonts/HELVETICANEUELTPRO-THEX.OTF');
  font-weight: normal;
  font-style: normal;
}

::-webkit-scrollbar-thumb {
  background-color: #e6e6e6;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #fff;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, 'Microsoft Yahei';
  font-size: 16px;
  line-height: 1.7;
  font-weight: normal;
  color: #fff;
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* H1 - H6 font */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
}

/* General Links */
a {
  outline: none;
  text-decoration: none;
}

small {
  font-size: 12px;
}

/* ul */
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.with-point li::before {
  content: '• ';
  color: #ccc;
}

dl {
  margin-bottom: 0;
}

hr {
  border-color: rgba(0, 0, 0, 0.05);
}

button, input, a {
  outline: none !important;
}

/***********************************************
	APPENDDING
***********************************************/
/****** MARGIN & PADDING & POSITION ******/
.no-margin {margin: 0 !important;}
.no-padding {padding: 0 !important;}
.p-1 {padding: .25rem;}
.p-2 {padding: .5rem;}
.p-3 {padding: .75rem;}
.p-4 {padding: 1rem;}
.p-6 {padding: 1.5rem;}
.p-8 {padding: 2rem;}
.p-12 {padding: 3rem;}
.p-16 {padding: 4rem;}
.py-4 {padding: 1rem 0;}
.py-6 {padding: 1.5rem 0;}
.py-8 {padding: 2rem 0;}
.py-12 {padding: 3rem 0;}
.py-16 {padding: 4rem 0;}
.mt-1 {margin-top: .25rem;}
.mt-2 {margin-top: .5rem;}
.mt-3 {margin-top: .75rem;}
.mt-4 {margin-top: 1rem;}
.mt-6 {margin-top: 1.5rem;}
.mt-8 {margin-top: 2rem;}
.mt-12 {margin-top: 3rem;}
.mt-16 {margin-top: 4rem;}
.mr-1 {margin-right: .25rem;}
.mr-2 {margin-right: .5rem;}
.mr-3 {margin-right: .75rem;}
.mr-4 {margin-right: 1rem;}
.mr-6 {margin-right: 1.5rem;}
.mr-8 {margin-right: 2rem;}
.mr-12 {margin-right: 3rem;}
.mr-16 {margin-right: 4rem;}
.mb-1 {margin-bottom: .25rem;}
.mb-2 {margin-bottom: .5rem;}
.mb-3 {margin-bottom: .75rem;}
.mb-4 {margin-bottom: 1rem;}
.mb-6 {margin-bottom: 1.5rem;}
.mb-8 {margin-bottom: 2rem;}
.mb-12 {margin-bottom: 3rem;}
.mb-16 {margin-bottom: 4rem;}
.ml-1 {margin-left: .25rem;}
.ml-2 {margin-left: .5rem;}
.ml-3 {margin-left: .75rem;}
.ml-4 {margin-left: 1rem;}
.ml-6 {margin-left: 1.5rem;}
.ml-8 {margin-left: 2rem;}
.ml-12 {margin-left: 3rem;}
.ml-16 {margin-left: 4rem;}
.mx-40 {margin-left: 10rem;margin-right: 10rem;}
.my-16 {margin-top: 4rem;margin-bottom: 4rem;}
.my-20 {margin-top: 5rem;margin-bottom: 5rem;}
.my-24 {margin-top: 6rem;margin-bottom: 6rem;}
.my-32 {margin-top: 8rem;margin-bottom: 8rem;}
.my-40 {margin-top: 10rem;margin-bottom: 10rem;}

.w-1 {width: .25rem;}
.w-2 {width: .5rem;}
.w-3 {width: .75rem;}
.w-4 {width: 1rem;}
.w-6 {width: 1.5rem;}
.w-8 {width: 2rem;}
.w-12 {width: 3rem;}
.w-16 {width: 4rem;}
.h-1 {height: .25rem;}
.h-2 {height: .5rem;}
.h-3 {height: .75rem;}
.h-4 {height: 1rem;}
.h-6 {height: 1.5rem;}
.h-8 {height: 2rem;}
.h-12 {height: 3rem;}
.h-16 {height: 4rem;}

.text-3 {font-size: .75rem;line-height: .75rem;}
.text-4 {font-size: 1rem;line-height: 1rem;}
.text-5 {font-size: 1.25rem;line-height: 1.25rem;}
.text-6 {font-size: 1.6rem;line-height: 1.6rem;}
.text-7 {font-size: 1.75rem;line-height: 1.75rem;}
.text-8 {font-size: 2rem;line-height: 2rem;}
.text-10 {font-size: 2.5rem;line-height: 2.5rem;}
.leading-3 {line-height: .75rem;}
.leading-4 {line-height: 1rem;}
.leading-5 {line-height: 1.25rem;}
.leading-6 {line-height: 1.5rem;}
.leading-7 {line-height: 1.75rem;}
.leading-8 {line-height: 2rem;}
.leading-9 {line-height: 2.25rem;}
.leading-10 {line-height: 2.5rem;}
.leading-none {line-height: 1;}
.leading-tight {line-height: 1.25;}
.leading-snug {line-height: 1.375;}
.leading-normal {line-height: 1.5;}
.leading-relaxed {line-height: 1.625;}
.leading-loose {line-height: 2;}

/****** COLOR ******/
.text-primary {color: #fff;}
.text-white {color: #fff;}
.text-ccc {color: #ccc;}
.text-999 {color: #999;}
.bg-primary {background-color: #f93;}
.bg-white {background-color: #fff;}
.bg-ccc {background-color: #ccc;}
.bg-999 {background-color: #999;}

/* hover- */
[class*='move-'],
[class*='text-'],
[class*='bg-'] {
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.hover\:text-primary:hover {color: #f93;}
.hover\:bg-primary:hover {background-color: #c60;}
.hover\:bg-darker:hover {background-color: #2b172b;}
.hover\:move-up:hover {transform: translateY(-5px);}
.hover\:move-right:hover {transform: translate3d(5px, 0, 0);}

/****** MISC ******/
.text-center {text-align: center;}

.square {
  position: relative;
  padding-bottom: 100%;
  width: 100%;
  height: 0;
}

img, video {
  max-width: 100%;
  height: auto;
}

.relative {position: relative;}
.absolute {position: absolute;}

.border {border: 1px solid #f4f4f4;}
.border-top {border-top: 1px solid rgba(0, 0, 0, 0.05);}
.border-bottom {border-bottom: 1px solid rgba(0, 0, 0, 0.05);}
.border-dashed-bottom {border-bottom: 1px dashed rgba(0, 0, 0, 0.05);}
.border-none {border: none !important;}
.border-transparent {border-color: rgba(0, 0, 0, 0) !important;}

/* x-ellipsis */
.x-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.x-ellipsis.with-w-100 {
  width: 100px;
}

.x-ellipsis.with-w-200 {
  width: 200px;
}

.x-ellipsis.with-w-300 {
  width: 300px;
}

.x-ellipsis.with-w-400 {
  width: 400px;
}

/****** LAYOUT ******/
.block {display: block;}
.inline-block {display: inline-block;}
.flex {display: flex;}
.grid {display: grid;}
.grid-cols-2 {grid-template-columns: repeat(2, 1fr);}
.grid-cols-4 {grid-template-columns: repeat(4, 1fr);}
.gap-6 {gap: 1.5rem;}
.place-content-center {place-content: center;}
.items-center {align-items: center;}

.x-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
  padding: 0 .75rem;
}

/****** HEADBAR ******/
.headbar {
  padding: 30px 0;
}

.headbar .logo-wrapper {
  position: absolute;
  top: -5px;
}

.headbar .logo-wrapper img {
  height: 48px;
}

/****** NAVBAR ******/
.navbar {
  margin: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
}

.navbar .navbar-brand {
  padding-top: 11px;
}

.navbar .navbar-brand img {
  height: 48px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* navbar li */
.navbar .navbar-nav > li {
  /*border-bottom: 2px solid rgba(0, 0, 0, 0);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;*/
}

/* navbar li a */
.navbar .navbar-nav > li > a {
  position: relative;
  display: block;
  padding: 25px 15px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* navbar narrow */
.navbar.narrow {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.navbar.narrow .navbar-brand {
  padding-top: 10px;
}

.navbar.narrow .navbar-brand img {
  height: 40px;
}

.navbar.narrow .navbar-nav li > a {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* navbar menus animation
.navbar.white .navbar-nav li.active > a:after,
.navbar.white .navbar-nav li > a:hover:after {
    background-color: #939;
} */

/* nav cat & cat-wrapper */
.navbar .navbar-nav > li.cat .cat-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  width: 100%;
}

.navbar .navbar-nav > li.cat:hover .cat-wrapper {
  display: block;
}

/****** FOOTER ******/
.footer {
}

.footer .section {
  padding-bottom: 30px;
}

.footer .copyright {
  padding: 15px 0;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/****** SECTION ******/
.section-bar {
  margin: 1.5rem auto 3rem;
  width: 50px;
  height: 2px;
}

/****** x-tile ******/
.x-tile {
  position: relative;
  display: block;
  margin-bottom: 0;
  background-color: #fff;
  color: #000;
  border-radius: 0px;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}

.x-tile .img.with-zoom {
  position: relative;
  overflow: hidden;
}

.x-tile .img.with-zoom img {
  transition: all 0.3s ease-in-out;
}

.x-tile .info {
  padding: 12px 15px;
  transition: all 0.3s ease 0s;
}

.x-tile .info.move {
  padding-left: 0;
  padding-right: 0;
}

.x-tile .info .title {
  display: block;
  padding: 0;
  margin-bottom: 2px;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all 0.3s ease 0s;
}

.x-tile .info .meta {
  font-size: 13px;
}

.x-tile .info .desc {
  margin-bottom: 0;
  font-size: 14px;
}

/* with-shadow */
.x-tile.with-shadow:hover {
  box-shadow: 0 12px 64px rgba(0, 0, 0, 0.1);
}

.x-tile:hover .img.with-zoom img {
  transform: scale(1.2);
}

.x-tile:hover .info.move {
  padding-left: 15px;
  padding-right: 15px;
}

/****** media ******/
@media (max-width: 640px) {
  .m\:p-1 {padding: .25rem;}
  .m\:p-2 {padding: .5rem;}
  .m\:p-3 {padding: .75rem;}
  .m\:p-4 {padding: 1rem;}
  .m\:p-6 {padding: 1.5rem;}
  .m\:p-8 {padding: 2rem;}
  .m\:p-12 {padding: 3rem;}
  .m\:p-16 {padding: 4rem;}
  .m\:py-4 {padding: 1rem 0;}
  .m\:py-6 {padding: 1.5rem 0;}
  .m\:py-8 {padding: 2rem 0;}
  .m\:py-12 {padding: 3rem 0;}
  .m\:py-16 {padding: 4rem 0;}
  .m\:mt-0 {margin-top: 0;}
  .m\:mt-1 {margin-top: .25rem;}
  .m\:mt-2 {margin-top: .5rem;}
  .m\:mt-3 {margin-top: .75rem;}
  .m\:mt-4 {margin-top: 1rem;}
  .m\:mt-6 {margin-top: 1.5rem;}
  .m\:mt-8 {margin-top: 2rem;}
  .m\:mt-12 {margin-top: 3rem;}
  .m\:mt-16 {margin-top: 4rem;}
  .m\:mr-1 {margin-right: .25rem;}
  .m\:mr-2 {margin-right: .5rem;}
  .m\:mr-3 {margin-right: .75rem;}
  .m\:mr-4 {margin-right: 1rem;}
  .m\:mr-6 {margin-right: 1.5rem;}
  .m\:mr-8 {margin-right: 2rem;}
  .m\:mr-12 {margin-right: 3rem;}
  .m\:mr-16 {margin-right: 4rem;}
  .m\:mb-1 {margin-bottom: .25rem;}
  .m\:mb-2 {margin-bottom: .5rem;}
  .m\:mb-3 {margin-bottom: .75rem;}
  .m\:mb-4 {margin-bottom: 1rem;}
  .m\:mb-6 {margin-bottom: 1.5rem;}
  .m\:mb-8 {margin-bottom: 2rem;}
  .m\:mb-12 {margin-bottom: 3rem;}
  .m\:mb-16 {margin-bottom: 4rem;}
  .m\:ml-1 {margin-left: .25rem;}
  .m\:ml-2 {margin-left: .5rem;}
  .m\:ml-3 {margin-left: .75rem;}
  .m\:ml-4 {margin-left: 1rem;}
  .m\:ml-6 {margin-left: 1.5rem;}
  .m\:ml-8 {margin-left: 2rem;}
  .m\:ml-12 {margin-left: 3rem;}
  .m\:ml-16 {margin-left: 4rem;}
  .m\:mx-40 {margin-left: 10rem;margin-right: 10rem;}
  .m\:my-16 {margin-top: 4rem;margin-bottom: 4rem;}
  .m\:my-20 {margin-top: 5rem;margin-bottom: 5rem;}
  .m\:my-24 {margin-top: 6rem;margin-bottom: 6rem;}
  .m\:my-32 {margin-top: 8rem;margin-bottom: 8rem;}
  .m\:my-40 {margin-top: 10rem;margin-bottom: 10rem;}

  .m\:w-1 {width: .25rem;}
  .m\:w-2 {width: .5rem;}
  .m\:w-3 {width: .75rem;}
  .m\:w-4 {width: 1rem;}
  .m\:w-6 {width: 1.5rem;}
  .m\:w-8 {width: 2rem;}
  .m\:w-12 {width: 3rem;}
  .m\:w-16 {width: 4rem;}
  .m\:h-1 {height: .25rem;}
  .m\:h-2 {height: .5rem;}
  .m\:h-3 {height: .75rem;}
  .m\:h-4 {height: 1rem;}
  .m\:h-6 {height: 1.5rem;}
  .m\:h-8 {height: 2rem;}
  .m\:h-12 {height: 3rem;}
  .m\:h-16 {height: 4rem;}

  .m\:text-3 {font-size: .75rem;line-height: .75rem;}
  .m\:text-4 {font-size: 1rem;line-height: 1rem;}
  .m\:text-5 {font-size: 1.25rem;line-height: 1.25rem;}
  .m\:text-6 {font-size: 1.6rem;line-height: 1.6rem;}
  .m\:text-7 {font-size: 1.75rem;line-height: 1.75rem;}
  .m\:text-8 {font-size: 2rem;line-height: 2rem;}
  .m\:leading-3 {line-height: .75rem;}
  .m\:leading-4 {line-height: 1rem;}
  .m\:leading-5 {line-height: 1.25rem;}
  .m\:leading-6 {line-height: 1.5rem;}
  .m\:leading-7 {line-height: 1.75rem;}
  .m\:leading-8 {line-height: 2rem;}
  .m\:leading-9 {line-height: 2.25rem;}
  .m\:leading-10 {line-height: 2.5rem;}
  .m\:leading-none {line-height: 1;}
  .m\:leading-tight {line-height: 1.25;}
  .m\:leading-snug {line-height: 1.375;}
  .m\:leading-normal {line-height: 1.5;}
  .m\:leading-relaxed {line-height: 1.625;}
  .m\:leading-loose {line-height: 2;}

  /****** LAYOUT ******/
  .m\:grid-cols-1 {grid-template-columns: repeat(1, 1fr);}
  .m\:grid-cols-2 {grid-template-columns: repeat(2, 1fr);}
  .m\:gap-3 {gap: .75rem;}

  .section-bar {
    margin: 1rem auto 2rem;
  }
}