
.main{
  width: 100%;
  height: 100%;
  position: relative;
}
.body{
  width: 100%;
  height: 100%;
  background: #599b43;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 0;
}
.pager{
  text-align: center;
  font-size: 14px;
  color: #cacaca;
}
.lens{
  background: #0dbafa;
  color: #fff;
  font-size: 28px;
  padding: 2px .75em;
  border-radius: 8px;
  position: relative;
  top: -4px;
  font-family: 'ABlack';
}
.title{
  margin-left: 80px;
  margin-bottom: 16px;
  flex: 0 auto;
  color: #fff;
  font-size: 36px;
  font-family: ABlack;
}
.content{
  /*background: url(../../assets/play/rectangle@2x.png), url(../../assets/play/rectangle@2x.png);*/
  /*background-size: 100%, contain;*/
  /*background-repeat: no-repeat, no-repeat;*/
  /*background-position: center top, center bottom;*/
  background: url(../../assets/play/bg2.jpg);
  background-size: 100%;
  background-repeat: repeat-y;
  background-position: center;
  border-radius: 72px 72px 0 0;
  flex: 1 auto;
  font-size: 22px;
  color: #000;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.lesson-text-container{
  flex: 1 auto;
  /*overflow-y: auto;*/
  overflow: hidden;
  padding: 50px 72px 0 72px;
  position: relative;
}
.lesson-text{font-family: ASans; font-size: 22px;}
.questions{
  flex: 0 auto;
  height: 280px;
  margin-bottom: 48px;
}
:host ::ng-deep   .question-card-box{
  width: 100%;
  height: 100%;
  padding: 24px 6px 36px;
  position: relative;
  /*transform: scale(.9);*/
}
:host ::ng-deep   .bscroll-indicator {
  /*position: absolute;*/
  /*right: 82px;*/
  /*height: 100%;*/
  /*width: 8px;*/
  background: #3e9e33!important;
  /*margin-top: 50px;*/
}


.questions-container{
  height: 100%;
  overflow: hidden;
}
:host ::ng-deep   .question-card{
  height: 100%;
  background: #fff;
  box-shadow: 0 5px 11px #eaddbe;
  border-radius: 20px;
}
:host ::ng-deep   .question-submit-card{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.question-card-box.is-active > .question-card{
  transform: scale(1);
}
.question-card-box > .question-card{
  transform: scale(.85);
}
.submit-btn-shadow{
  position: absolute;
  z-index: 0;
  height: 96px;
  margin-top: 48px;
}
.submit-btn{
  z-index: 1;
  height: 72px;
}

.result{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255, .8);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.result-body {
  padding: 3.5em 5em 2em 5em;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.guagou{
  background: url(../../assets/play/guagou.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  width: 100%;
  height: 75px;
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -50%;
}
.body-board{
  height: 100%;
  width: 100%;
  background: #3e9e33;
  border-radius: 3rem;
  padding-top: 66px;
  padding-left: 2em;
  padding-right: 2em;
  flex: 1 auto;
  margin-bottom: 2em;
  box-shadow: 0px 14px 20px 0px #3e9e3399;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.body-board-container{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.btn-text{
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  line-height: 72px;
  font-size: 30px;
  font-weight: 700;
}
.btn-wen{
  z-index: 999;
  width: 56px;
  height: 56px;
  /*background: url(/assets/play/btn2.png);*/
  /*background-size: contain;*/
  /*background-repeat: no-repeat;*/
  /*background-position: center;*/
  position: absolute;
  right: 8px;
  bottom: 128px;
  color: #fff;
  font-size: 28px;
  line-height: 53px;
  text-align: center;
  box-shadow: -1px 20px 8px -10px #dfac4866;
  border-radius: 28px;
}

.btn-jie{
  z-index: 999;
  width: 48px;
  height: 48px;
  /*background: url(/assets/play/btn1.png);*/
  /*background-size: contain;*/
  /*background-repeat: no-repeat;*/
  /*background-position: center;*/
  position: absolute;
  right: 12px;
  bottom: 40px;
  color: #fff;
  font-size: 24px;
  line-height: 48px;
  text-align: center;
  box-shadow: 0px 20px 8px -10px #3e9e3366;
  border-radius: 26px;
}
.btn-help{
  width: 48px;
  height: 48px;
  /*box-shadow: 0px 20px 8px -10px #3e9e3366;*/
  border-radius: 26px;
  z-index: 999;
  position: absolute;
}
.btn-help.wen{
  right: 12px;
  bottom: 128px;
  box-shadow: -1px 20px 8px -10px #dfac4866;
}
.btn-help.wen.big{

}
.btn-help.jie{
  right: 12px;
  bottom: 40px;
  box-shadow: -1px 20px 8px -10px #3e9e3366;
}
.btn-help.big{
  right: 8px;
  width: 56px;
  height: 56px;
  text-align: center;
  /*box-shadow: -1px 20px 8px -10px #dfac4866;*/
  border-radius: 28px;
}
.btn-help.wen:active{
  bottom: 124px;
  box-shadow: 0px 12px 8px -10px #dfac4866;
}
.btn-help.jie:active{
  bottom: 36px;
  box-shadow: 0px 12px 8px -10px #3e9e3366;
}
.load-more{
  flex: 0 auto;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load-more-btn-box{
  position: relative;
  margin: 0 2em;
}
.load-more-btn-box .submit-btn-shadow{
  position: absolute;
  z-index: -1;
  height: 96px;
  margin-top: 18px;
  width: 100%;
}
.load-more-btn-box .submit-btn {
  width: 100%;
  box-shadow: 0 23px 24px -20px #dfac48;
}
.load-more-btn-box .submit-btn:active {
  box-shadow: 0 15px 24px -20px #dfac48;
  position: relative;
  top: 4px;
}
.question-row{
  border-bottom: 4px solid #2c8520;
  padding-bottom: 1.2em;
  margin-bottom: 1.2em;
}
.q-wrapper{

}
.q-info{
  /*display: flex;*/
  color: #fff;
  font-size: 24px;
  font-family: 'ASans';
}
.q-answer{
  padding: 0px 12px;
  border-radius: 8px;
  margin-right: 8px;
  font-size: 22px;
  line-height: 35px;
  font-family: 'ABLACK';
}
.q-answer.r{
  background: #007b3e;
}
.q-answer.w{
  background: #d71818;
}
.q-title{

}
.explain-bubble{
  width: 1.5em;
  height: 1.5em;
  margin-right: 4px;
  position: absolute;
  left: 1.5em;

}
.q-disabled{
  pointer-events: none;
}
.q-explain{
  background: #3b962e;
  padding: .5em 1.5em .5em 3.5em;
  border-radius: 16px;
  color: #ffe9b1;
  font-size: 16px;
  margin-top: 13px;
  font-weight: 500;
  position: relative;
  font-family: 'ABLACK';
}



@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
.splide__container{position:relative;box-sizing:border-box}
.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform}
.splide.is-active .splide__list{display:flex}
.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}
.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}
.splide{visibility:hidden}
.splide,.splide__slide{position:relative;outline:none}
.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}
.splide__slide img{vertical-align:bottom}
.splide__slider{position:relative}
.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}
.splide__track{position:relative;z-index:0;overflow:hidden}
.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}
.splide--fade>.splide__track>.splide__list{display:block}
.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}
.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}
.splide--rtl{direction:rtl}
.splide--ttb>.splide__track>.splide__list{display:block}
.splide--ttb>.splide__pagination{width:auto}

.splide{
  margin: 0 auto;
  height: 100%;
}
.splide__track{
  height: 100%;
}
.splide__list{
  height: 100%;
}
.q-index{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: 'ABlack';
  font-size: 22px;
}
.q-index.even{
  background: #f3dcdf;
  color: #d7437c;
}
.q-index.odd{
  background: #e3e9f0;
  color: #3692be;
}
.question-card-body{
  height: 100%;
  margin: 16px 56px;
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}
.lesson-text-wrapper{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /*overflow: hidden;*/
  position: relative;
}
.question-card-body .qt{
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  flex: 1 auto;
  font-family: 'ASans';
}
.question-answer{
  height: 140px;
  /*display: flex;*/
  /*flex: 0 auto;*/
}
.btn-box{
  /*flex: 1;*/
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: start;*/
  width: 49%;
  float: left;
  width: calc(50% - 32px);
  float: left;
  margin: 5px 16px;
  position: relative;
}
.btn-box .option{
  background-image: url(../../assets/play/opt-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 56px;
  line-height: 44px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  z-index: 1;
  position: relative;
}
.btn-box .option .lbl{
  background-image: url(../../assets/play/rectangle-56@3x.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 18px;
  line-height: 32px;
  font-weight: bolder;
  color: #82d7ff;
  text-align: center;

}
.btn-box.selected .option{
  background-image: url(../../assets/play/opt-bg-sel.png);
  top: 8px;
}

.btn-box.selected .option .lbl{
  color: #fff;
}


.btn-box img.btn{
  height: 56px;
  z-index: 1;
}
.btn-box img.shadow{
  position: absolute;
  height: 104px;
  z-index: 0;
  position: absolute;
  height: 72px;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}
.btn-box.pressed img.btn{
  margin-top: 6px;
}
.btn-box.pressed img.shadow{
  height: 84px;
}

.btn-true{
  background: url(../../assets/play/rectangle-8-copy@3x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  text-align: center;
  line-height: 48px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}
.btn-false{
  background: url(../../assets/play/rectangle-8@3x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  text-align: center;
  line-height: 48px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}


:host ::ng-deep  nz-carousel{
  /*position: absolute;*/
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
  position: static;
  /*margin: 0 auto;*/
}
:host ::ng-deep  .slick-slider{
  width: 100%;
  position: static;
}

:host ::ng-deep  .ant-carousel .slick-list{
  /*overflow-x: auto;*/
  width: 800px;

}

:host ::ng-deep  .ant-carousel .slick-initialized .slick-slide{
  height: 200px!important;
}
:host ::ng-deep  .ant-carousel .slick-list .slick-slide.slick-active{
  height: 220px!important;
}

@font-face {
  font-family: 'ABlack';
  src: url("../../assets/font/Aileron-Black.ttf") ;
}

@font-face {
  font-family: 'ABold';
  src: url("../../assets/font/Aileron-Bold.ttf") ;
}

@font-face {
  font-family: 'ASans';
  src: url("../../assets/font/DroidSansFallback.ttf") ;
}
.analysis{
  position: relative;
  width: 100%;
}
.analysis-content{
  background: #54c348;
  margin: 8px;
  padding: 12px;
  color: #fff;
}
.analysis:before{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-top: 1px solid #54c348;
  border-left: 1px solid #54c348;
}
.analysis:after{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-bottom: 1px solid #54c348;
  border-right: 1px solid #54c348;
  right: 0;
  bottom: 0;
}
