@font-face {
  font-family: 'Sanomat';
  src: url('../fonts/Sanomat Sans VN-Regular.otf');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Sanomat';
  src: url('../fonts/Sanomat Sans VN-Thin.otf');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Sanomat';
  src: url('../fonts/Sanomat Sans VN-Medium.otf');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Sanomat';
  src: url('../fonts/Sanomat Sans VN-Light.otf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Sanomat';
  src: url('../fonts/Sanomat Sans VN-Bold.otf');
  font-weight: 700;
  font-style: normal;
}*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  line-height: 30px;
  margin: auto;
  font-family: 'Sanomat', sans-serif;
  font-weight:300;
  color: #1f2d42;
  background-color: #fff;
  font-size: 23px;
}
ul{
  list-style: none;
  padding: 0;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
img {
  max-width: 100%;
}
.wrapper{
  position: relative;
  margin-top:44px;
}
.slide-1 .inner{
  position: absolute;
  top: 0;
  width: 50vw;
  left: 24vw;
  padding-top:34.052vw;
  font-size: 1.21vw;
  line-height: 1.782vw;
}
.slide1-icon{
  position: absolute;
  top:4.166vw;
  left: 27.796vw;
}
.slide1-icon img{
  width: 40.085vw;
}
.btn-start{
  position: absolute;
  top:48.7vw;
  left:0;
  right:0;
}
.btn-start a{
  background-image: url(../images/button-1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width:17.631vw;
  height: 4.052vw;
  display: block;
  margin:0 auto;
  font-size: 2.105vw;
  color:#fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 4.421vw;
  text-decoration: none;
  font-weight: 700;
}
.slide{
  min-height: 0;
}
img.bg{
  width: 100%;
}
.slide .content{
  position: absolute;
  top: 0;
  width: 29.473vw;
  left: 34.416vw;

}
.slide-2 .content{
  padding-top:7.552vw;
}
.slide-3 .content{
  padding-top:8.114vw;
}
.slide-4 .content{
  padding-top:10.937vw;
}
.slide-5 .content{
  padding-top:9.537vw;
}
.slide-6 .content{
  padding-top:8.812vw;
}
.question{
  font-size: 1.979vw;
  line-height: 2.3vw;
  font-weight: 500;
  color:#850507;
  text-align: center;
}
.slide-2 .answer{
  margin-top:4.166vw;
}
.slide-3 .answer{
  margin-top:4.687vw;
}
.slide-4 .answer{
  margin-top:4.927vw;
}
.slide-5 .answer{
  margin-top:3.385vw;
}
.slide-6 .answer{
  margin-top:3.645vw;
}
.slide8-icon{
  position: absolute;
  top:3.385vw;
  left:5.589vw;
}
.slide8-icon img{
  width: 37.239vw;
}
.alpha{
  background-color: #5a9e12;
  font-weight: 500;
  color:#fff;
  border-radius: 50%;
  display: inline-block;
  padding: 0.4vw 1.252vw;
  margin-right: 1.315vw;
  width: 3.906vw;
  height: 3.906vw;
  line-height: 3.157vw;
  font-size: 2.343vw;
  margin-left: -2.4vw;
  position: relative;
  z-index: 10;
}
.answer{
  padding-left: 2.4vw;
}
.answer li{
  display: flex;
  margin-bottom: 0.885vw;
  cursor: pointer;
  border:1px solid #fff;
  border-radius: 0 50px 50px 0;
  padding:0.26vw;
  align-items: center;
  -webkit-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
}
.answer li:hover, .answer li.active{
  background-color: #fff;
}
.answer.selected li:not(.active):before{
  content: '';
  background-color: rgba(49, 61, 89, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 50px 50px 0;
  z-index: 1;
}
.result{
  min-height: 0;
}
.result .content{
  position: absolute;
  width: 35vw;
  padding-top:26.912vw;
  top:0;
  left:15.425vw;
  font-size: 1.315vw;
  line-height: 1.71vw;
}
.result .btn-discover{
  position: absolute;
  top: 41.295vw;
  font-weight: 700;
  left: 11.197vw;
}
.result .btn-discover a{
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  font-size:1.74vw;
}
.list-item{
  position: absolute;
  top:0;
  left: 42vw;
  padding-top:12.61vw;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
.list-item .item{
  width: 16.95vw;
  margin-right:1.2vw;
  height:12.9vw;
  position: relative;
}
.list-item .item .txt{
  color:#8d290a;
  background-color: #fff;
  border-radius: 10px;
  width: 16.95vw;
  padding:1.3vw;
  font-size: 1vw;
  line-height:1.28vw;
  height:12.9vw;
  display: flex;
  align-items: center;
  opacity: 0;
  text-align: center;
  position: absolute;
  top:5.208vw;
  z-index: 9;
}
.list-item .photo img{
  width: 17.187vw;
  height: 18.229vw;
}
.list-item .item .txt:hover{
  opacity: 1;
}
.list-item .item1{
  margin-left: 0.9vw;
  margin-bottom:6.8vw;
}
.ans-question{
  font-size: 1.458vw;
  line-height: 1.862vw;
  padding-right: 2.085vw;
}
.control{
  position: absolute;
  bottom: 4.947vw;
  text-align: center;
  display:flex;
  width: 7.812vw;
  margin:0 auto;
  left: 0;
  right: 0;
}
.row-next img, .row-back img{
  width: 3.645vw;
  height: 3.645vw;
  cursor: pointer;
  animation: i-zoominout 1.5s linear infinite;
}
.slide-3 .control{
  bottom: 6.947vw
}
.slide-4 .control{
  bottom: 7.147vw
}
.slide-5 .control{
  bottom: 7.447vw
}
.slide-6 .control{
  bottom: 7.147vw
}
@media (min-width:1600px){
  .result .btn-discover{
    top:41.65vw;
  }
}
@keyframes i-zoominout {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}