.lwtEyeTestResultContainer {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f6f6f6;
  position: relative;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox {
  width: 0%;
  height: 620px;
  background: #0099FF;
  position: absolute;
  animation: openlwtEyeTestResultBox 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__img {
  /* width: 600px; */
  position: absolute;
  left: 20px;
  top: 20px;
  opacity: 0;
  animation: fadeImg 1s ease-in-out forwards;
  animation-delay: 1s;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc {
  width: 0px;
  height: 430px;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0px;
  top: 50px;
  animation: showDisc 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
}
.lwtEyeTestResultContainer .lwtEyeTestResultlwtEyeTestResultBox .product__disc .product__disc--content {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  animation: fadeContent 1s ease-in-out forwards;
  animation-delay: 1s;
  opacity: 0;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .disc__content--about {
  width: 100%;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .disc__content--about h1 {
  font-size: 32px;
  font-family: 'Poppins';
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .disc__content--about span {
  font-family: 'Lato';
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  opacity: 0.5;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .disc__content--about p {
  margin-top: 35px;
  font-size: 14px;
  font-family: 'Poppins';
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .product__view--more {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .product__view--more:hover .view__more--block {
  width: 220px;
  height: 35px;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .product__view--more .view__more--block {
  width: 10px;
  height: 15px;
  position: absolute;
  background: #f6f6f6;
  z-index: 1;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms;
}
.lwtEyeTestResultContainer .lwtEyeTestResultBox .product__disc .product__disc--content .product__view--more p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  z-index: 2;
  margin-left: 15px;
  font-family: 'Poppins';
}

/*
  keyframes
 */
@keyframes openlwtEyeTestResultBox {
  0% {
    width: 0px;
    left: 15%;
  }
  100% {
    width: 900px;
    left: 15%;
  }
}
@keyframes fadeImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showDisc {
  0% {
    width: 0px;
    left: 450px;
  }
  100% {
    width: 500px;
    left: 450px;
  }
}
@keyframes fadeContent {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes top {
  0% {
    opacity: 0;
    bottom: -80px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}
@keyframes icon {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(-2deg);
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}


.rating {
  height:87px;
  margin-left:60px;
  display: flex;
  flex-direction: row-reverse;
  font-family: "Ionicons";
}
.rating input {
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.rating input[name="read"]:checked ~ label::before {
  opacity: 1;
}
.rating input[name="rain"]:checked ~ label::before {
  opacity: 1;
}
.rating input[name="glare"]:checked ~ label::before {
  opacity: 1;
}
.rating label {
  position: relative;
  margin-right: 6px;
  font-size: 5em;
  color: gold;
  transition: 0.5s;
}
.rating label:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.rating label::before {
  position: absolute;
  content: "\f384";
  opacity: 0;
  transition: 0.5s;
}
@font-face {
	font-weight:400;
	font-style:normal;
	font-family:Ionicons;
	src:url(./fonts/ionicons.eot?v=4.5.5);
	src:url(./fonts/ionicons.eot?v=4.5.5#iefix) format("embedded-opentype"),
	url(./fonts/ionicons.woff2?v=4.5.5) format("woff2"),
	url(./fonts/ionicons.woff?v=4.5.5) format("woff"),
	url(./fonts/ionicons.ttf?v=4.5.5) format("truetype"),
	url(./fonts/ionicons.svg?v=4.5.5#Ionicons) format("svg")
}

.ion-md-star:before {
	content: "\f384"
}

.ion-md-star-half:before {
	content: "\f382"
}

.ion-md-star-outline:before {
	content: "\f383";
	font-style: normal;
}

#read:before {
	content: "阅读";
	font-size:30px;
	position:absolute;
	left:25px;
	top:160px;
}
#rain:before {
	content: "雨雾";
	font-size:30px;
	position:absolute;
	left:25px;
	top:250px;
}
#glare:before {
	content: "夜晚";
	font-size:30px;
	position:absolute;
	left:25px;
	top:340px;
}