html, body{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:#D5C3AF;
    font-family:serif;;
}
.v-enter-from, /* vue3*/
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}

.viewer-close{
  bottom:.2rem;
  right:.2rem;
  top:auto;
  width:.8rem;
  height:.8rem;
}
.viewer-close:before {
  bottom: .1rem;
  left: .1rem;
  background-size: calc(2.80rem* 3);
  background-position: calc(-2.6rem* 3) 0;
  height: calc(.2rem * 3);
  width: calc(.2rem * 3);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgb(166,118,70, 0.3);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgb(166,118,70);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(166,118,70);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:active {
  background: rgb(166,118,70);
  border-radius: 8px;
}

#app{
    position: relative;
    width:19.20rem;
    height:10.80rem;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#FBF9EA;
    background-size: cover;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-page{
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  width:100%;
  height:100%;
  background: url(main/bg.jpg) no-repeat 0 0;
  background-size:cover;
  display:flex;
}
.main-page .button.button1{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 17rem;
  top: 8.77rem;
  width:.75rem;
  height:.75rem;
  background-image:url(main/btn_enter.png);
  background-size:cover;
  cursor:pointer;
}

.page{
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  width:100%;
  height:100%;
  display:flex;
  background-image:url(main/bg2.jpg);
  background-size:cover;
  z-index:100;
  display:none;
}
.page.page-show{
  display:block;
}
.page.top{
  z-index:1000;
}
@keyframes ani-page-show {
  0%{
    pointer-events: none;
    opacity:0;
  }
  100%{
    opacity: 1;
    pointer-events: all;
  }
}
.page .page-body{
  flex: 1;
  position: absolute;
  overflow: hidden;
  left: 1.32rem;
  top: 0;
  right: 0;
  bottom: 0;
}
.page .btn-home{
  background:url(btn-home.png) no-repeat center center;
  background-size:cover;
  position: absolute;
  z-index:900;
  width:0.84rem;
  height: 0.84rem;
  top:.4rem;
  right:1.14rem;
}

.intro-page{
  background: url(intro/bg.jpg) no-repeat 0 0;
  background-size:cover;
}
.intro-page .side{
  width:3.59rem;
  height:10.80rem;
  background: url(side.png) no-repeat 0 0;
  background-size:cover;
  box-shadow:0 0 30px 0 rgba(0,0,0,0.1);
  position:relative;
}

.intro-page .side-logo{
  position:absolute;
  width:3.75rem;
  height:3.08rem;
  left:0;
  top:.3rem;
  background: url(side-logo.png) no-repeat 0 0;
  background-size:cover;
}

.intro-page .side-nav{
  position:absolute;
  top:4.0rem;
  left:.8rem;
}
.intro-page .side-nav .nav-item{
  font-size:.26rem;
  line-height:.8rem;
  width:2rem;
  text-align:center;
  display:block;
  font-family:simsun;
  font-weight:700;
  position:relative;
  cursor:pointer;
}
.intro-page .side-nav .nav-item + .nav-item:after{
  content:'';
  position:absolute;
  display:block;
  left:50%;
  margin-left:-.25rem;
  width:.5rem;
  height:1px;
  top:0;
  background-color:#a18173;
}
.intro-page .side-nav .nav-item.on{
  color:#85312e;
}

.intro-page .button.button1{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 17rem;
  top: 8.77rem;
  width:1.4rem;
  height:1.4rem;
  background-image:url(intro/btn_enter.png);
  background-size:cover;
  z-index:10;
}

.intro-page .text{
  text-align: justify;
  font-family: simsun;
  color:#feefdc;
  position:absolute;
  top:2.0rem;
  left: 4.7rem;
  width:13.3rem;
  line-height:1.5;
  font-size:.22rem;
}
.intro-page .text p{
  text-indent: 2em;
  margin:0;
}
.intro-page .text p + p{
  margin-top:.5em;
}
.intro-page .qy{
  position:absolute;
  left: 4.7rem;
  top: .7rem;
  width:1.61rem;
  height:.82rem;
  background-image:url(intro/qy.png);
  background-size:cover;
  z-index:100;
}
.intro-page .btn-back{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 1.13rem;
  bottom: .8rem;
  width:1.33rem;
  height:.54rem;
  background-image:url(menu/btn-back.png);
  background-size:cover;
  z-index:100;
  cursor:pointer;
}
.intro-page .timeline{
  position:absolute;
  bottom:0;
  right:0;
  width:15.61rem;
  height:5.45rem;
  background:url(intro/bg2.png) repeat-x;
  background-size:1.10rem 5.45rem;
}
.intro-page .timeline-title{
  position:absolute;
  top:.88rem;
  left:.54rem;
  width:.64rem;
  height:2.44rem;
  overflow:hidden;
  font-size:.1rem;
  text-indent:-100rem;
  background:url(intro/timeline-title.png) no-repeat;
  background-size:cover;
}
.intro-page .timeline-items{
  position:absolute;
  left:1.38rem;
  top:.32rem;
  right:0;
  height:4.10rem;
  overflow:hidden;
}
.intro-page .timeline-items-scroll{
  transition: all .3s;
}
.intro-page .timeline-item{
  position:relative;
  float:left;
  width:2.56rem;
  height:4.10rem;
}
.intro-page .timeline-item .item-time{
  position:absolute;
  color:#fff;
  background-color:rgba(161, 129, 115, 0.5);
  font-size:.20rem;
  width:1.04rem;
  height:1.04rem;
  top:1.2rem;
  left:.1rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content: center;
  z-index:100;
}
.intro-page .timeline-item .item-time:before{
  position:absolute;
  z-index:99;
  content:'';
  color:#fff;
  background-color:rgba(161, 129, 115, 1);
  font-size:.20rem;
  width:.84rem;
  height:.84rem;
  border-radius:50%;
}
.intro-page .timeline-item .item-time span{
  position:absolute;
  z-index:100;
}
.intro-page .timeline-item .item-line{
  position:absolute;
  top:1.2rem;
  display:block;
  height:.38rem;
  width:2.56rem;
  margin-top:.36rem;
  margin-left:.8rem;
  background:url(intro/timeline-line.png) repeat-x;
  background-size:.01rem .38rem;
}
.intro-page .timeline-item .item-title{
  position:absolute;
  font-size:.2rem;
  line-height:.3rem;
  left:0.82rem;
  padding:0 .05rem;
  color:#fff;
  background-color:#527585;
  font-family:simsun;
}
.intro-page .timeline-item .item-title:before{
  position:absolute;
  margin-left:-.07rem;
  left:-.2rem;
  top:.08rem;
  content:'';
  display:block;
  width:.14rem;
  height:.14rem;
  border-radius:50%;
  background-color:#a18173;
}
.intro-page .timeline-item .item-title:after{
  position:absolute;
  margin-left:0rem;
  left:-.2rem;
  top:.08rem;
  content:'';
  display:block;
  width:1px;
  height:1.24rem;
  background-color:#a18173;
}
.intro-page .timeline-item .item-desc{
  position:absolute;
  left:0.82rem;
  margin-top:.4rem;
  font-size:.18rem;
  width:4.7rem;
  color:#333;
  text-align: justify;
  line-height: .25rem;
  
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示2行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.intro-page .timeline-item:nth-child(2n) .item-title{
  top:2.60rem;
}
.intro-page .timeline-item:nth-child(2n) .item-title:after{
  top:-1.1rem;
}
.intro-page .timeline-item:nth-child(2n) .item-desc{
  top:2.60rem;
}
.intro-page .timeline-item:last-child .item-line{
  display:none;
}

.intro-page .timeline-prev{
  position:absolute;
  width:.43rem;
  height:.43rem;
  background:url(intro/btn-next.png) no-repeat;
  background-size:cover;
  bottom:.38rem;
  left:50%;
  transform: rotate(180deg);
  margin-left:-.50rem;
  cursor:pointer;
}
.intro-page .timeline-next{
  position:absolute;
  width:.43rem;
  height:.43rem;
  background:url(intro/btn-next.png) no-repeat;
  background-size:cover;
  bottom:.38rem;
  left:50%;
  margin-left:.10rem;
  cursor:pointer;
}
.intro-page .btn-product{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  right: .44rem;
  top: .44rem;
  width:.5rem;
  height:.5rem;
  background-image:url(menu/btn-product.png);
  background-size:cover;
  z-index:100;
  cursor:pointer;
}

.menu-page{
  background: url(menu/bg.jpg) no-repeat 0 0;
  background-size:cover;
}
.menu-page .mask{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0);
}
.menu-page .menu-list{
  position: absolute;
  top: 0.86rem;
  left: 3.8rem;
  width: 14.50rem;
  padding:.2rem;
  display: flex;
  overflow: auto;
  font-family: simsun;
}
.menu-page .menu-list .menu-column{
  line-height: 1.6;
  text-align: center;
  background-repeat:no-repeat;
  background-size:cover;
  margin-left:.15rem;
  cursor:pointer;
  box-shadow:0 0 .1rem 0 rgba(0,0,0,.1);
}
.menu-page .menu-list .menu-column.menu1{
    width:2.25rem;
    height:8.66rem;
    background-image:url(menu/menu-1.png);
}
.menu-page .menu-list .menu-column.menu2{
    width:2.27rem;
    height:8.66rem;
    background-image:url(menu/menu-2.jpg);
}
.menu-page .menu-list .menu-column.menu3{
    width:2.27rem;
    height:8.66rem;
    background-image:url(menu/menu-3.png);
}
.menu-page .menu-list .menu-column.menu4{
    width:2.26rem;
    height:8.66rem;
    background-image:url(menu/menu-4.png);
}
.menu-page .menu-list .menu-column.menu5{
    width:2.27rem;
    height:8.66rem;
    background-image:url(menu/menu-5.png);
}
.menu-page .menu-list .menu-column.menu6{
    width:2.27rem;
    height:8.66rem;
    background-image:url(menu/menu-6.jpg);
}
.menu-page .btn-back{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 1.4rem;
  bottom: .8rem;
  width:1.33rem;
  height:.54rem;
  background-image:url(menu/btn-back.png);
  background-size:cover;
  z-index:100;
  cursor:pointer;
}
.menu-page .btn-product{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  right: .44rem;
  top: .44rem;
  width:.5rem;
  height:.5rem;
  background-image:url(menu/btn-product.png);
  background-size:cover;
  z-index:100;
  cursor:pointer;
}


.item-page{
  background: url(item/bg.jpg) no-repeat 0 0;
  background-size:cover;
  
  --swiper-navigation-sides-offset:-45px;
  --swiper-pagination-bottom:-40px;
  --swiper-theme-color:#7C5740;
}
.item-page .item-list{
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  width: 17rem;
  height: 9rem;
}
.item-page .item-container{
  display:flex;
  height: 9rem;
}
.item-page .item-list img{
  max-height: 100%;
}
.item-page .btn-back{
    
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 1.0rem;
  bottom: .6rem;
  width:.7rem;
  height:.7rem;
  background-image:url(item/btn_back.png);
  background-size:cover;
  z-index:100;
}
.item-page .caption{
  text-align: justify;
  font-family: simsun;
  position:absolute;
  color:#feefdc;
  top:0.2rem;
  left: 2.7rem;
  width:13.4rem;
  text-align: center;
  line-height:1.4;
  font-size:.54rem;
}
.item-page .caption::after {
	content: attr(data-text);
	-webkit-text-stroke: 6px rgba(124, 87, 64, 0.5);
	position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
	z-index: -1;
}

.swiper-slide{
    width:auto;
    height:auto;
}








/**  outro  **/

.outro-page{
  background: url(outro/bg.jpg) no-repeat 0 0;
  background-size:cover;
}
.outro-page .side{
  width:3.59rem;
  height:10.80rem;
  background: url(side.png) no-repeat 0 0;
  background-size:cover;
  box-shadow:0 0 30px 0 rgba(0,0,0,0.1);
  position:relative;
}

.outro-page .side-logo{
  position:absolute;
  width:3.75rem;
  height:3.08rem;
  left:0;
  top:.3rem;
  background: url(side-logo.png) no-repeat 0 0;
  background-size:cover;
}

.outro-page .side-nav{
  position:absolute;
  top:4.0rem;
  left:.8rem;
}
.outro-page .side-nav .nav-item{
  font-size:.26rem;
  line-height:.8rem;
  width:2rem;
  text-align:center;
  display:block;
  font-family:simsun;
  font-weight:700;
  position:relative;
  cursor:pointer;
}
.outro-page .side-nav .nav-item + .nav-item:after{
  content:'';
  position:absolute;
  display:block;
  left:50%;
  margin-left:-.25rem;
  width:.5rem;
  height:1px;
  top:0;
  background-color:#a18173;
}
.outro-page .side-nav .nav-item.on{
  color:#85312e;
}

.outro-page .button.button1{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 17rem;
  top: 8.77rem;
  width:1.4rem;
  height:1.4rem;
  background-image:url(outro/btn_enter.png);
  background-size:cover;
  z-index:10;
}

.outro-page .text-container{
  position:absolute;
  width:12.45rem;
  height:4.07rem;
  left: 5.15rem;
  top: 3.40rem;
  background-image:url(outro/bg2.png);
  background-size:cover;
  z-index:10;
  
}
.outro-page .text{
  text-align: justify;
  font-family: simsun;
  color:#feefdc;
  position:absolute;
  top: 0.6rem;
  left: 0.8rem;
  width: 10.8rem;
  line-height: 1.7;
  font-size: 0.24rem;
}
.outro-page .text p{
  text-indent: 2em;
  margin:0;
}
.outro-page .text p + p{
  margin-top:.5em;
}
.outro-page .jy{
  position:absolute;
  left: 10.10rem;
  top: 2.00rem;
  width:2.44rem;
  height:1.10rem;
  background-image:url(outro/jy.png);
  background-size:cover;
  z-index:100;
}
.outro-page .btn-back{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  left: 1.13rem;
  bottom: .8rem;
  width:1.33rem;
  height:.54rem;
  background-image:url(menu/btn-back.png);
  background-size:cover;
  z-index:100;
  cursor:pointer;
}
.outro-page .btn-product{
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  text-indent: -100rem;
  right: .44rem;
  top: .44rem;
  width:.5rem;
  height:.5rem;
  background-image:url(menu/btn-product.png);
  background-size:cover;
  z-index:100;
  cursor:pointer;
}


.product.product-3d:after{
  content:'';
  display:block;
  position:absolute;
  width:.3rem;
  height:.3rem;
  background:url(product/ico-3d.png) no-repeat 0 0;
  background-size:cover;
  right:.15rem;
  top:.15rem;
  opacity:.35;
}