html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}


:root {
  font-size: 62.5%;
body{
  margin: 0;
  font-size: 1.6rem;
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
  font-family:Helvetica, Arial, sans-serif;
  /* overflow: hidden; */
 }
}

#bg-canvas{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: fixed;
  z-index: 1;
  background-color: white;
}


#container{
  z-index: 1;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  text-indent: 0；
}

.out-div{
  position: relative;
  /* margin: 5%; */
  /* background-color: white; */
  padding: 5%;
  margin-bottom: 250%;
}

.trigger{
  /* background: rgb(255, 255, 255, 180); */
  padding: 0;
}

.text-bg{
  /* display: block; */
  margin-left: 0;
  background-color: rgba(172, 160, 160, 0.9);
  line-height: 1.6;
  text-indent: 0;
}

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#div0{
    padding: 4%;
    padding-top: 0;
    position: relative;
    color: rgb(101, 90, 86);
    margin-top: 5%;
    border: 2px solid #aca0a0;
    /* margin-top: 80%; */
}

.first-mark{
  color: rgb(110, 56, 35);
   font-weight: 600;
}


#out-div0{
  margin-bottom: 60%;
  background-color: white;
  text-align: justify;
  /* text-indent: 2.2rem; */
  padding-top: 1%;
}

#out-div8{
  margin-bottom: 50%;
  padding-bottom: 220%;
}

#para-box1{
  margin: 0;
  padding: 0;
}

#credit{
  position: fixed;
  margin: 10%;
  padding: 5%;
  -webkit-box-shadow: 18px 23px 54px -20px #655a56;
  -moz-box-shadow: 18px 23px 54px -20px #655a56;
  box-shadow: 18px 23px 54px -20px #655a56;
  /* padding-top: 10%; */
  top: 5%;
  background-color: rgb(83, 99, 95);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  z-index: 999;
  border: 5px solid #aca0a0;
}

#close{
  width: 9%;
  position: relative;
  left: 90%;
}

.close-color{
  margin: 0;
  padding: 0;
  color: rgb(244, 253, 255)
}
.exclamation-mark{
  position: fixed;
  top: 95%;
  padding: 0;
  margin: 0;
  right: -35%;
}

.head-content{

    /* background-color: rgba(172, 160, 160, 0.9); */
    text-align: left;
    text-indent: 0;
    font-size: 3.0rem;
    line-height: 1.6;
    color: rgb(172, 160, 160);
    /* font-family: cursive; */
}
.mark{
  width: 10%;
}

.para-content{
  color: rgb(54, 30, 20);
  font-weight: 500;

}

.para-content2{
  font-size: 1.2rem;
  color: white;
  letter-spacing: 0.1rem;
  margin:0;
  padding:0;
}

.big-title{
  /* font-size: 1.0rem; */
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 3%;
    text-align: center;
    border: 6px solid rgb(172,160, 160);
    border-left: 0px;
    border-right: 0px;
    color: #6e3823;
    letter-spacing: .3rem;
    text-indent: 0;
    background: #2f3a34;
}

#paike{
   position: absolute;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   bottom: 2%;
}

/* .deco-line{
  display: block;
  width:100%;
  padding:0;
  margin: 0;
  /* margin:0.2rem; */
  /* margin-right: 0.2rem; */
  /* color: rgb(172,160, 160); */
  /* border: 0.5px solid rgb(172,160, 160);

} */

.underline-text{
  color: black;
  margin: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  background-color: #a0857b;
}

/* selector areas*/
.custom-select {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  /* font-size: 1.6rem; */
  padding: 2% 5%;
  margin: auto;
  margin-bottom: 4%;
  -webkit-box-shadow: 1px 33px 24px -35px rgba(0,0,0,0.16);
  -moz-box-shadow: 1px 33px 24px -35px rgba(0,0,0,0.16);
  box-shadow: 1px 33px 24px -35px rgba(0,0,0,0.16);
}

.sel{
  /* font-size: 1.6rem; */

}


select {
  /* font-size: 1.6rem; */
  position: sticky;
  display: inline-block;

  width: 100%;
  padding: 2% 5%;
  margin-bottom: 2%;
  outline: 0;
  text-align: center;
  border-color: #aca0a0;
  /* height: 34px; */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0px;
  border-bottom-width: 2px;
  border-radius: 0;
  background: white;
  background: url("data/png/menu.png") 99% / 6% no-repeat;
  color: #361e14;

}

select:hover,
select:focus{
  /* color:#000000; */
  color:#361e14;
  background: white;
  background: url("data/png/menu.png") 98% / 6% no-repeat;

}

/* CAUTION: IE hackery ahead */
select::-ms-expand {
    display: none; /* remove default arrow on ie10 and ie11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    }
}

#selector-container{
  /* position: fixed;
  overflow-y: scroll; */
}

#selProvince{
  /* padding-left: 40%; */
  /* font-size: 1.6rem; */
}

#selAge{
  display: inline-block;
  /* padding-left: 12%; */
  width: 40%;
  left: 0;
}

#selType{
  display: inline-block;
  position: relative;
  /* padding-left: 12%; */
  width: 50%;
  left: 10%;

}


#select-tips{
  position: absolute;
 top: 30%;
 right: 0;
 left: 0;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 color: rgb(172,160, 160);
 font-size: initial;
}
/* antiques-box setting */

#antiques-box{
  position: relative;
  width: 90%;
  margin: auto;
  padding: 0.2rem;
  background: white;

}

#btn{
  background-color: #655a56;
    border: 0;
    color: #ffffff;
    padding: 0rem 0.3rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.4rem;
    margin: 0rem 0.3rem;
    letter-spacing: 0.2rem;
}

.antiques-card{

   position: relative;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);

   padding: 0.2rem;
   font-size: 1.2rem;
   margin-bottom: 5%;
}


.antiques-card::after {
  content: "";
  clear: both;
  display: table;
}

.antiques-img{
  float: left;
  /* display: inline-block; */
  width: 40%;
  margin-left: 1%;
  margin-top: 1%;


}

.card-info{
   width: 50%;
   float: left;
}
.antiques-museum{
  /* position: relative;
  padding-right: 2%; */
  position: relative;
  left: 4%;
  color:#a0857b;
  /* color:rgb(76, 96, 92); */
  font-size: 1.4rem;
}

.antiques-title{
  position: relative;
  padding-right: 2%;
  left: 4%;
  font-size: 1.5rem;
  font-weight: 400;
}

span{
  /* display: inline-block; */
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.antiques-accurateAge{
  position: relative;
  left: 5%;
}

.antiques-found{
  position: relative;
  left: 5%;
}
.icon-scroll {
	position: absolute;
	top: 93%;
	left: 50%;
  width: 1em;
	height: 3.125em;
	transform: translateX(-50%) scale(2);
	z-index: 999;
}


.icon-arrows::after,
.icon-arrows::before {
  content: '';
}
.icon-arrows span,
.icon-arrows::after,
.icon-arrows::before {
	display: block;
	width: 0.315em;
	height: 0.315em;
	border-right: 1px solid #a0857b;;
	border-bottom: 1px solid #a0857b;;
	margin: 0 0 0.125em 0.315em;
	transform: rotate(45deg);
  animation: mouse-scroll 1s infinite;
	animation-direction: alternate;
}

.icon-arrows::before {
	margin-top: 0.315em;
	animation-delay: .1s;
}

.icon-scroll span {
	animation-delay: .2s;
}

.icon-arrows::after {
	animation-delay: .3s;
}

.icon-scroll .mouse {
	height: 1.375em;
	width: .875em;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 2em;
}

@keyframes mouse-wheel {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(.375em);
	}
}

@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

/* loading加在这里 */
.loading-page {
	position: fixed;
	top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: rgb(172, 160, 160);
	/*background: #0d0d0d;*/
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 999999;
	}

  .loading-page .counter {
	text-align: center;
	position: relative;
	width: 65%;
	}

  .loading-page .counter p {

	position: absolute;
	top: -3.0rem;
	left: 0;
	font-size: 2rem;
	font-weight: 100;
	color: #f1f1f1;
	margin-left: 0%;
  }

  .loading-page .counter h1 {
	color: #fff;
	font-size: 2.5rem;

	position: absolute;
	bottom: 0.2rem;
	right: 0;
  }

  .bg_hr {
	position: relative;
	background: #fff;
	border: none;
	height: 0.1rem;
	}


  .loading_hr {
	position: absolute;
	left: 0%;
	width: 0%;
	background: rgb(83, 99, 95);
	border: none;
	height: 0.3rem;
	top: 0px;
	z-index: 9999;
}

.coverpaike{

    display: block;
    position: absolute;
    bottom: 2.5rem;
}