@font-face {
  font-family: 'Huninn';
  src: url('Huninn-Regular.ttf') format("truetype");
  font-style: normal;
  font-weight: 400;
}

body{ 
    font-family: "Huninn", Noto Sans TC, sans-serif;
    width: 100%;
    height: 100%;
    background-color: #132a4b;
    font-size: .4rem;
    font-weight: 400;
    font-style: normal;
}

* {
  margin: 0;
  padding: 0
}

@media screen and (min-width: 1024px) {
  html {
    width: 7.5rem !important
  }
  .header {
    width: 7.5rem !important
  }
}
@media screen and (min-width: 1024px)and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html {
    width: 750px !important
  }
  .header {
    width: 750px !important
  }
}
.newClass {
  width: 750px !important
}
html {
  max-width: 750px;
  width: 100%;
  height: 100%;
  margin: 0 auto
}
body {

}
li, div, a {
  color: #fff;
  user-select: none
}
i {
  display: inline-block
}
@keyframes rotateClockWise {
  0% {
    transform: rotate(0deg)
  }
  50% {
    transform: rotate(180deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
@keyframes rotateAnticlockwise {
  0% {
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg)
  }
}

@keyframes wipe-in-up {
  from {
    clip-path: inset(100% 0 0 0)
  }
  to {
    clip-path: inset(0 0 0 0)
  }
}
.loadbg{ 
	width: 100vw; height: 100vh; 
  display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
  align-content: center;      
  flex-wrap: wrap;
	background: url(../img/bg8.jpg) no-repeat center top;
}

.loadseer {
    width: 117px;
    height: 168px;
    background-image: url(../img/loadpic.png);
    position: relative;
    margin: .1rem 30%;
    animation-name: oxxo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}
@keyframes oxxo{
	0%   { background-position:0px 0;}
	12.5%{ background-position:117px 0;}
	25%  { background-position:234px 0;}
	37.5%{ background-position:351px 0;}
	50%  { background-position:468px 0;}
	62.5%{ background-position:585px 0;}
	75%  { background-position:702px 0;}
	87.5%{ background-position:819px 0;}
	100% { background-position:936px 0;}
}


.swiper-container {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.taomee-dialog__mask {
  background-color: rgba(0, 0, 0, .7) !important
}
.btn_group {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  width: 100%;
  padding: 0 .4rem
}
.dialog-alert .taomee-dialog__content {
  width: 4.87rem !important;
  height: 2.43rem;
  background: url(../img/bg_dialog.png) no-repeat center;
  background-size: 100% auto;
  margin-left: -2.44rem !important;
  margin-top: -0.23rem;
  text-align: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0)
}
.dialog-alert .taomee-dialog__header {
  padding-top: .25rem;
  margin-bottom: .22rem
}
.dialog-alert .taomee-dialog__title {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  color: #2f384f;
  font-size: .34rem;
  font-weight: bold
}
.dialog-alert .taomee-dialog__title::after {
  position: absolute;
  content: "";
  left: -0.35rem;
  top: .2rem;
  background-image: url(../img/p_12.png);
  width: 2.09rem;
  height: 0.14rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.dialog-alert .taomee-dialog__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.3rem;
  height: 1.3rem;
  color: #2f384f;
  font-size: .24rem;
  text-align: justify;
  text-wrap: wrap;
  text-align: center;
  box-sizing: border-box;
  padding: 0 .3rem
}
.dialog-alert .taomee-dialog__footer {
  display: none
}
.dialog-alert .taomee-dialog__btn {
  display: none
}
.dialog-alert .taomee-dialog__closebtn {
  top: .15rem;
  right: .2rem;
  background-image: url(../img/p_close.png);
  width: 0.22rem;
  height: 0.23rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  cursor: pointer
}
.dialog-alert .taomee-dialog__closebtn:hover {
  background-position: 0 0
}
.header {
  position: fixed;
  top: 0;
  left: 50%;
  max-width: 750px;
  width: 100%;
  z-index: 2;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: .1rem
}
.header .logo {
  display: inline-block;
  background: url(../img/logo_seer.png) no-repeat center;
  width: 1.84rem;
  height: 0.67rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-left: .2rem;
  cursor: pointer
}
.header__right {
  position: absolute;
  right: 0;
  top: .22rem
}
.header #J_loginContainer {
  display: inline-block;
  font-size: .24rem;
  vertical-align: middle;
  margin-right: .2rem;
  color: #8bafe5
}
.header #J_loginContainer a {
  color: #8bafe5
}
.header__icon {
  margin-right: .25rem;
  cursor: pointer;
  vertical-align: middle
}
.header__icon-login {
  background-image: url(../img/p_01.png);
  width: 0.49rem;
  height: 0.48rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.header__icon-music {
  background-image: url(../img/p_02b.png);
  width: 0.48rem;
  height: 0.48rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.header__icon-music--active {
  background-image: url(../img/p_02.png);
  width: 0.48rem;
  height: 0.48rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.header__icon-share {
  background-image: url(../img/p_03.png);
  width: 0.51rem;
  height: 0.48rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.pageSwiper {
  width: 100%;
  height: 100%;
  position: relative
}
.pageSwiper .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden
}

.pageSwiper .swiper-slide::after {
  position: absolute;
  left: 50%;
  bottom: .3rem;
  transform: translateX(-50%);
  background-image: url(../img/logo_taomee.png);
  width: 1.52rem;
  height: 0.44rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.pageSwiper .footerslide::after {
  background: none
}
.pageSwiper .swiper-slide-active .spirit__box {
  animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) wipe-in-up both 1s
}
.pageSwiper .wipedown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: .3rem;
  z-index: 999;
  width: 1rem;
  text-align: center
}
.pageSwiper .wipedown__arrow {
  height: .45rem;
  margin-bottom: .1rem;
  background: url(../img/p_up.png) no-repeat center;
  background-size: .28rem .45rem;
  animation: ship 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite
}
.pageSwiper .wipedown__text {
  color: #fff;
  font-size: .24rem
}
.text {
    font-size: .33rem;
    color: #fff;
    line-height: .5rem;
    z-index: 999;
    filter: drop-shadow(0px 0px 6px black);
}
.text span {
  color: #d8c397;
  font-size: .7rem;
  margin: 0 .1rem;
  line-height: .75rem;
	font-family: monospace;	
}
.text p {
	margin-top: 0;
	margin-bottom: 0rem; 
}
.text .na span {
	color: #ffffff;
	font-family:Huninn;
	line-height: .8rem;
}
/*page01*/
.homepage {
    background: #000 url(../img/bg1.jpg) no-repeat center top;
    width: 100%;
    height: 100vh;
    background-size: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.psup{ top:-.5rem; position: relative;}

.homepage__title {
    background: url(../img/maintitle.png) no-repeat center top;
    width: 6.6rem;
    height: 4rem;
    background-size: contain;
}
.homepage__btn {
    background-image: url(../img/btn_start.png);
    width: 6rem;
    height: 4.6rem;
    margin: .4rem auto 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    cursor: pointer;
    animation: ship 2s ease-in-out infinite;
}
@keyframes ship {
  0% {
    transform: translate(0, 0px)
  }
  50% {
    transform: translate(0, -15px)
  }
  100% {
    transform: translate(0, 0px)
  }
}
.homepage__input {
    color: #8bafe5;
    text-align: center;
    top: .1rem;
    position: relative;
}
.homepage__input input {
    width: 80%;
    height: 1rem;
    border-radius: 1rem;
    margin: 0 auto;
    font-size: .45rem;
    color: #fe74b1;
    padding: .08rem .1rem;
    text-align: center;
    box-shadow: inset 0 0 8px 2px #00d5ff;
    float: none;
    border: none;
}
.homepage__input label {
    margin-bottom: 0rem;
    color: #6ee7ff;
    padding: .1rem .2rem;
    font-size: .28rem;
}
/*冒險時數*/
.day {
  background: url(../img/bg2.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto;
  padding: 1.3rem 0 0 .8rem
}
/*冒險過程*/
.achievement {
  background: url(../img/bg4.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto;
  padding: 6.5rem .8rem 0 0
}
.achievement .text {
  text-align: right
}
.achievement__box {
  position: absolute;
  left: 0;
  top: 0
}
.achievement__icon1,.achievement__icon2,.achievement__icon3 {
    background: url(../img/achievement1.png) center center no-repeat;
    width: 5rem;
    height: 4.2rem;
    background-size: cover;
    margin: -.8rem auto 0;
}
.achievement__icon2 {
	background: url(../img/achievement2.png) center center no-repeat;
	background-size: cover;
}
.achievement__icon3 {
	background: url(../img/achievement3.png) center center no-repeat;
	background-size: cover;
}

.spirit {
  background: url(../img/bg4.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto;
  padding: 1.8rem 0 0 .8rem
}
.spirit__box {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/bg_line.png);
  width: 7.5rem;
  height: 16.67rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.spirit__pic1 {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/spiritpic1.png);
  width: 8.5rem;
  height: 8.6rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
	z-index: 9;	
	/*animation: spirit__pic1 1s ease-out;*/
}
@keyframes spirit__pic1 {
  0% {transform: translate(-100rem, 0px)}
  90% {transform: translate(1rem, 0px)}
	100% {transform: translate(0, 0px)}
}
.spirit__pic2 {
    position: absolute;
    right: 0;
    top: 5.4rem;
    background-image: url(../img/spiritpic2.png);
    width: 7.5rem;
    height: 10rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    z-index: 10;
		/*animation: spirit__pic2 1s ease-out;*/
}
@keyframes spirit__pic2 {
  0% {transform: translate(100rem, 0px)}
  90% {transform: translate(-1rem, 0px)}
	100% {transform: translate(0, 0px)}
}
.spirit .text1 {
    position: absolute;
    right: .6rem;
    top: 4rem;
    text-align: right;
}
.spirit .text2 {
    position: absolute;
    left: .6rem;
    top: 7.45rem;
}
.winning {
  background: url(../img/bg5.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto;
  padding: 1.4rem 0 0 0
}
.winning__title {
    background-image: url(../img/subtitle1.png);
    width: 4.5rem;
    height: 1.3rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    margin: 0 auto .3rem;
    z-index: 99;
    position: relative;
}
.winning__title1 {
  background-image: url(../img/subtitle4.png);
  width: 3.91rem;
  height: 1.14rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.winning__box {
  margin: 0 auto .8rem;
  width: 6.8rem;
  position: relative;
  text-align: center
}
.winning__box p {
  color: #d8c397;
  font-weight: bold;
  font-size: .52rem
}
.winning__box-season1 {
  background-image: url(../img/bg_season1.png);
  width: 3.62rem;
  height: 6.61rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  box-sizing: border-box;
  padding: 1.4rem 0 0 .6rem
}
.winning__box-season1 p {
  margin-bottom: .65rem
}
.winning__box-season2 {
  position: absolute;
  right: 0;
  top: -1.5rem;
  box-sizing: border-box;
  padding: 3.3rem 0 0 2.6rem;
  background-image: url(../img/bg_season2.png);
  width: 5.68rem;
  height: 9.09rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.winning__box-season2 p {
  margin-bottom: .65rem
}
.winning .fighttext {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 9rem;
    transform: translateX(-50%);
    filter: drop-shadow(0px 0px 6px black);
}
.winning .nofighttext {
  padding-top: .35rem;
  margin-left: .8rem;
  margin-bottom: .8rem;
  line-height: 2.5
}
.winning__text {
  color: #91baff;
  font-size: .3rem;
  margin-left: .8rem;
  line-height: 2
}
.winning .spirit__pic1{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../img/winningpic1.png);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    z-index: 9;
    animation: winningpic1 3s ease-in-out infinite;
}
@keyframes winningpic1 {
  0% {
    transform: translate(0, 0px)
  }
  50% {
    transform: translate(0, -10px)
  }
  100% {
    transform: translate(0, 0px)
  }
}
.winning .spirit__pic2{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../img/winningpic2.png);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    z-index: 8;
    animation: winningpic2 9s ease-in-out infinite;
}
@keyframes winningpic2 {
  0% {
    transform: translate(0, 0px)
  }
  50% {
    transform: translate(0, -10px)
  }
  100% {
    transform: translate(0, 0px)
  }
}
/*飛船啟航*/
.duration {
    background-image: url(../img/bg3.jpg);
    width: 7.5rem;
    height: 16.67rem;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    padding: 7.7rem .7rem 0 0;
    text-align: right;
}
.ship{
    background: url(../img/ship.png) no-repeat center top;
    width: 100%;
    height: 100vh;
    background-size: 100%;
    top: 0;
    position: absolute;
    animation: shipmove 7s ease-out infinite ;
}
@keyframes shipmove {
  0% {
    transform: translate(0, 0px)
  }
  50% {
    transform: translate(0, -18px)
  }
  100% {
    transform: translate(0, 0px)
  }
}

.ban {
  background: url(../img/bg6.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto;
  padding: 1.4rem 0 0 0
}
.ban__title {
  background-image: url(../img/subtitle2.png);
  width: 5.09rem;
  height: 1.32rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin: 0 auto .2rem
}
.ban__box {
  margin: 0 auto;
  width: 6.8rem;
  position: relative
}
.ban__box p {
  color: #2d3a4b;
  font-weight: bold;
  font-size: .28rem
}
.ban__box .ban__box-winning {
  text-align: right;
  margin-bottom: .05rem
}
.ban__box .ban__box-winning span {
  color: #d8c397;
  margin-left: .1rem;
  font-size: .32rem;
  line-height: .4rem;
  vertical-align: middle
}
.ban__box-season1 {
  background-image: url(../img/bg_seasonban1.png);
  width: 3.62rem;
  height: 7.39rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  box-sizing: border-box;
  padding: .7rem .6rem 0 1.15rem
}
.ban__box-season2 {
  position: absolute;
  right: 0;
  top: -1.5rem;
  box-sizing: border-box;
  padding: 2.5rem .3rem 0 3.3rem;
  background-image: url(../img/bg_seasonban2.png);
  width: 5.68rem;
  height: 9.27rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.ban .text {
  width: 100%;
  position: absolute;
  left: .4rem;
  top: 8.7rem
}
.friend {
  background: url(../img/bg7.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto;
  padding: 1.6rem 0 0 0
}
.friend .text {
  text-align: center
}
.friend__swiperbox {
  position: relative;
  height: 6rem;
  overflow: hidden;
  margin: 0 auto
}
.friend__swiperbox-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 7.5rem;
  height: 5.9rem;
  transition: all .5s;
  z-index: 9
}
.friend__swiperbox-item--active {
  transform: translateX(0%) translateY(0) scale(2);
  z-index: 10
}
.friend__swiperbox-item--next {
  transform: translateX(30%) translateY(0) scale(1);
  z-index: 9
}
.friend__swiperbox-item--other-next {
  transform: translateX(12%) translateY(-30%) scale(0.7);
  z-index: 5
}
.friend__swiperbox-item--other-prev {
  transform: translateX(-12%) translateY(-30%) scale(0.7);
  z-index: 5
}
.friend__swiperbox-item--prev {
  transform: translateX(-30%) translateY(0) scale(1);
  z-index: 9
}

.friend__swiperbox-item1 {
  background: url(../img/spirit1.png) no-repeat center center;
}
.friend__swiperbox-item1--active {
  background-image: url(../img/spirit1--active.png);
}
.friend__swiperbox-item2 {
  background: url(../img/spirit2.png) no-repeat center center;
}
.friend__swiperbox-item2--active {
  background-image: url(../img/spirit2--active.png);
}
.friend__swiperbox-item3 {
  background: url(../img/spirit3.png) no-repeat center center;
}
.friend__swiperbox-item3--active {
  background-image: url(../img/spirit3--active.png)
}
.friend__swiperbox-item4 {
  background: url(../img/spirit4.png) no-repeat center center;
}
.friend__swiperbox-item4--active {
  background-image: url(../img/spirit4--active.png);
}
.friend__swiperbox-item5 {
  background: url(../img/spirit5.png) no-repeat center center;
}
.friend__swiperbox-item5--active {
  background-image: url(../img/spirit5--active.png);
}
.friend__swiperbox-item1,.friend__swiperbox-item2,.friend__swiperbox-item3,.friend__swiperbox-item4,.friend__swiperbox-item5{
  background-size: 8.8rem 3.9rem; background-size: contain;
}
.friend__swiperbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: .3rem
}
.friend__swiperbtn-prev {
  background-image: url("../img/p_l.png");
  width: 0.31rem;
  height: 0.46rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  cursor: pointer
}
.friend__swiperbtn-next {
  background-image: url("../img/p_r.png");
  width: 0.32rem;
  height: 0.46rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  cursor: pointer
}
.friend__swiperbtn-line {
  background-image: url("../img/p_dash.png");
  width: 2.41rem;
  height: 0.02rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin: 0 .2rem
}
.friend__btn {
    background-image: url(../img/btn_generate.png);
    width: 3.81rem;
    height: 1.2rem;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    cursor: pointer;
    margin: 0 auto;
}
.friend__btn:hover{ transform: scale(.98);
}
.report {
  background: url(../img/bg8.jpg) no-repeat center top;
  width: 7.5rem;
  height: 16.67rem;
  background-size: 100% auto
}
.report__box {
  background-image: url(../img/bg_share.png);
  width: 6.68rem;
  height: 14.73rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  padding: 1.7rem 0 0 1.8rem
}
.report__box1 {
  background-image: url(../img/bg_share1.png);
  width: 6.68rem;
  height: 14.73rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}
.report__box1 .report__tips {
  bottom: 4.8rem
}
.report__left {
  position: absolute;
  left: -0.1rem;
  top: 1.3rem
}
.report__header {
  display: block
}
.report__header1 {
  background-image: url(../img/spirithead1.png);
  width: 1.53rem;
  height: 1.58rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-bottom: .3rem
}
.report__header2 {
  background-image: url(../img/spirithead2.png);
  width: 1.53rem;
  height: 1.58rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-bottom: .3rem
}
.report__header3 {
  background-image: url(../img/spirithead3.png);
  width: 1.53rem;
  height: 1.58rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-bottom: .3rem
}
.report__header4 {
  background-image: url(../img/spirithead4.png);
  width: 1.53rem;
  height: 1.58rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-bottom: .3rem
}
.report__header5 {
  background-image: url(../img/spirithead5.png);
  width: 1.53rem;
  height: 1.58rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-bottom: .3rem
}
.report__title {
  background-image: url(../img/15title.png);
  width: 0.72rem;
  height: 5.27rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-left: .38rem
}
.report__text, .report__share-text {
  margin-bottom: .9rem
}
.report__text p, .report__share-text p {
  color: #2f384f;
  font-size: .28rem
}
.report__text span, .report__share-text span {
  font-weight: bold;
  font-size: .36rem
}
.report__text > div, .report__share-text > div {
  display: inline-block;
  width: 2.3rem;
  vertical-align: top;
  margin: .4rem 0 0
}
.report__rookie,.report__legend {
	background: url(../img/bg_sharepic.png) center center no-repeat;
	width: 100%;
	height: 10rem;
	background-size: contain;
	margin-bottom: 13%;
	transform: translateY(6%);
	transform: scale(.96);
}
.reportbg{
    background:url(../img/bg8.jpg) center center no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: absolute;
    z-index: -2;
    top: 0;
}
.report__legend {
    background: url(../img/bg_legend.png) center center no-repeat;
    background-size: contain;
}
.frombox{ 
	padding: 1.7rem 1.1rem 0;
	margin-bottom: .75rem;
}
.fieldb{
	width: 100%;
	/*margin-bottom: .145rem;*/
	display: inline-block;
}
.field{ 
width: 46%;
height: .609rem;
background-color: #163871;
color: #ffffff;
/* padding: .085rem .1rem; */
float: left;
font-size: .4rem;
text-align: center;
}
.form-control{
    border: 0px;
    border-radius: 0;
    width: 54%;
    height: .609rem;
    font-size: .35rem;
    padding: .14rem;
    border: 2px #1f62a6 solid;
    float: right;
}
.lineh{	line-height: .8;}
.iconh{ margin: -1.65rem auto 0;}
.report__share-header {
  position: absolute;
  left: 0;
  top: .5rem
}
.report__share-tips {
  color: #7380a9;
  font-size: .2rem;
  position: absolute;
  left: 1.9rem;
  bottom: 1.27rem;
  width: 5rem !important
}
.report__tips {
  color: #2f384f;
  font-size: .2rem;
  position: absolute;
  bottom: 3rem;
  left: 1.8rem
}
.loading{}
.loading p{
    text-align: center;
    top: .9rem;
    position: relative;
    line-height: 0;
    font-size: .31rem;
}
.end {
  background-image: url(../img/bg8.jpg);
  width: 7.5rem;
  height: 16.67rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding: 1.6rem 0 0 0
}
.end .progress{
	width: 80%;
	height: 20px;
	margin: 0 auto;
	position: relative;
	border-radius: 0;
	top: 1.6rem;
}
.end__title {
  background-image: url(../img/finaltitle.png);
  width: 6.2rem;
  height: 4.19rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin: 0 auto .3rem
}
.end__text1, .end__text2 {
  color: #d8c397;
  font-size: .46rem;
  text-align: center;
  font-weight: bold
}
.end__text2 {
  font-size: .58rem;
  margin-bottom: .15rem
}
.end__text3 {
  background-image: url(../img/p_black.png);
  width: 4.99rem;
  height: 1.43rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin: 0 auto 1.2rem;
  text-align: center;
  color: #9fc2ff;
  font-size: .24rem;
  box-sizing: border-box;
  padding-top: .45rem
}
.end__btngroup {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0 .8rem
}
.end__share,.end__print {
    background-image: url(../img/btn_review.png);
    width: 2.51rem;
    height: 1.2rem;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    cursor: pointer;
}
.end__print {
  background-image: url(../img/btn_print.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;

}