@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
:root{
  /* font-family: ANWE, ANWT, PingFang SC, Microsoft YaHei, Arial, sans-serif; */
	scroll-behavior: smooth;
	font-variant-ligatures: common-ligatures;
  --width: 1440px;
  --navH: 71px;
  --transition: all .2s ease;
  --headerH: 70vh;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, 'PingFang SC',sans-serif,Apple Color Emoji,Segoe UI Emoji;  
}
::selection{
  background:#a23d3d;
  color: #fff;
}
.wrapper{
  background: #000 url(bg.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 0%;
  background-size: 100% auto;
  /* min-height: 200vh; */
  text-align: center;
  --transition: all .2s ease;  
}
.t-store{
  
}
header{
  height: var(--headerH);
  transition: var(--transition);
  overflow: hidden;
}
.t-store header{
  height: 20vh;
  background: rgba(88,37,8,.4);
  backdrop-filter: blur(15px);  
}
.download{
  display: block;
  position: absolute;
  left: 0;
  top: calc( .66 * var(--headerH));
  background: #002;
  width: calc(150px + 6vw);
  aspect-ratio: 350 / 108;
  background: url(download.png);
  background-size: contain;
  transition: var(--transition);
}
.download:hover{
  filter: brightness(1.3);
}
nav{
  background: linear-gradient(to bottom, rgba(88,37,8,.7), transparent);
}
nav > .inner{
  position: relative;
  display: flex;
  align-items: center;
  width: var(--width);
  margin: 0 auto;
  padding: 2em 0;
}
.nav-item{
  width: calc(var(--navH) / 71 * 150); height: var(--navH);
  /* background: url(nav-home.png); */
  /* background-size: cover; */
  cursor: pointer;
  position: relative;
  transition: var(--transition);  
}
.nav-item.current{
  pointer-events: none;
}
.nav-item:hover{
  filter: brightness(1.2);
  /* transform: scale(1.05); */
}
.nav-item::before,
.nav-item::after{
  content: "";
  display: block;
  top: 0; left: 0;
  width: 100%; height: 100%;
  position: absolute;
  background-size: cover;
  transition: var(--transition);
}
.nav-item::before{
  opacity: 0;
  background-image: url(current.png);
}
.nav-store::before{
  background-image: url(current2.png);
}
.nav-item.current::before{
  opacity: 1;
}
.nav-home::after{
  background-image: url(nav-home.png);
}
.nav-news::after{
  background-image: url(nav-news.png);
}
.nav-store::after{
  background-image: url(nav-store.png);
}
.logo{
  width: auto; height: calc(var(--navH) * 1.3);
  flex: 1 0 auto;
  background: url(logo.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}
main{
  min-height: 30vh;
  /* background: rgba(31, 42, 62, 0.6); */
  background: rgba(255, 250, 226, 0.6);
  background: #19222B url(pattern.png) repeat;
  /* width: var(--width); */
  width: 100%;
  color: #c46d6d;
}
main > .inner{
  width: var(--width);
  margin: 0 auto;
  padding: 3rem 0 4rem;  
}
.tagline{
  font-size: 2rem;
  padding: 0 0 3rem;
  font-family: Songti SC;
  font-weight: 700;
}

h2{
  font-family: Dongfang, Songti SC, serif;
  font-weight: 700;
  color: antiquewhite;
  font-size: 2rem;
  text-align: center;
  display: flex;
  justify-content: center; align-items: center;
  margin: 0 0 3rem;
  --sh: #a23d3d;
  --sz: 2px;
  text-shadow:
    var(--sz) 0 var(--sh),
    calc(var(--sz) * -1) 0 var(--sh),
    0 var(--sz) var(--sh),
    0 calc(var(--sz) * -1) var(--sh);
}
h2::before,
h2::after{
  content: "";
  display: block;
  flex: 1 1 auto;
  height: 3rem;
  background: url(title.png) no-repeat;
  background-size: contain;
}
h2::before{
  background-position: right top;
  background-image: url(title2.png);
}
.p ~ .p{
  margin-top: 5rem;
}
.sss{
  width: var(--width);
  display: flex;
  gap: 3rem;
  justify-content: center; align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.ss{
  flex: 1 0 37%;
  aspect-ratio: 16 / 9;  
}
.ss img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;


}
footer{
  color: #aaa;
  background: #000;
  padding: 2em;
  font-size: .875rem;
}

.items{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:2em;
  width: 100%;
  margin: 0 auto;
}
.item{
  background: rgba(0, 0, 0, .45);
  flex: 1 1 20%;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  position: relative;
  overflow: hidden;
}
/* .item::after{
  content: "";
  display: block;
  position: absolute;
  background: rgba(255, 219, 175, 0.15);
  width: 20%; height: 100%;
  top: 0; left: 0;
  opacity: 0;
  mix-blend-mode: hard-light;
}
.item:hover::after{
  animation: .4s blink ease-in both;
  opacity: 1;
} */
@keyframes blink{
  from{transform: skew(20deg) translateX(-200%);}
  to{transform: skew(20deg) translateX(600%);opacity: 0;}
}
.item:hover{
  transform: scale(1.03);
  filter: brightness(1.4);
}
.item-img{
  aspect-ratio: 260 / 172;
}
.item-img img{
  width: 100%; height: 100%;
  object-fit: contain;
}
.item-meta{
  background:#a23d3d;
  padding: 1em 1em;  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1rem;
}
.item-title{
  font-weight: 700;
  color: #fff;
}
.item-price{
  opacity: .6;
  color: #fff;  
}

.mask{
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.6);
  pointer-events: none;
  opacity: 0;  
  transition: var(--transition);  
}
.mask.show{
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(15px);  
}
.sheet{
  position: fixed;
  left: 20vw; top: 10vh;
  width: 60vw; height: 80vh;
  background: #19222B;
  pointer-events: none;
  opacity: 0;
  transition: var(--transition);
  transform: translateY(10vh);
  box-shadow: 0 2rem 3rem rgba(0, 0, 0, .45);
  color: #ccc;
}
.sheet.show{
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.sheet > .inner{
  position: relative;
  padding: 0 0 2em;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 100%;
}
.sheet-title{
  background:#a23d3d;
  color: #fff;
  padding: 1em;
  font-size: 1.5rem;
  font-weight: 700;
}
.sheet-meta{
  flex: 1 0 auto;
  display: flex;
  width: 100%;
  padding:1em;
  justify-content: center; align-items: center;
}
.sheet-desc{
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.7;
}
.btn{
  font-size: 1.25em;
  padding: .3em 2em;
  font-weight: 700;
  color: #fff;
  background:#a23d3d;
  text-decoration: none;
  margin-top: 1em;
  display: inline-block;
  cursor: pointer;
}
.sheet-close{
  position: absolute;
  right: -1rem; top: -1rem;
	width: 3rem; height: 3rem;
	transition: var(--transition);
  cursor: pointer;
  background:rgba(0, 0, 0, .65);
  border-radius: 50%;
}
.sheet-close svg{
	width: 100%; height: 100%;
	fill: none;
	transform: scale(1.01);
	transform-origin: center center;
}
.sheet-close svg *{
  fill: none;
  stroke-width: 2px;
  stroke: #fff;
}
@media (min-width: 2000px){
  :root{
    --width: 1800px;
  }
}
@media (max-width: 1600px){
  :root{
    --width: 1100px;
    --navH: 55px;
  }
}
@media (max-width: 1200px){
  :root{
    --width: 90vw;
    --navH: 45px;
    --headerH: 50vh;    
  }
  .ss{
    flex: 1 0 80%;
  }
  .item{
    flex: 1 1 30%;
  }
  .sheet{
    left: 10vw; width: 80vw;
  }
  .sheet-meta{
    flex-direction: column;
  }
  .sheet-desc{
    font-size: 1rem;
  }
}
@media (max-width: 900px){
  :root{
    --width: 90vw;
    --navH: 35px;
    --headerH: 30vh;
  }  
  .item{
    flex: 1 1 50%;
  }
}
@font-face {
  font-family: "Dongfang";
  font-weight: 700;
  src: url("dongfang.woff2") format("woff2");
  font-display: swap;
}