@font-face {
  font-family: "Ekachon-Bold";
  font-weight: Bold;
  src: url("../fonts/Ekachon-Bold.eot");
  src: url("../fonts/Ekachon-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Ekachon-Bold.woff2") format("woff2"),
    url("../fonts/Ekachon-Bold.woff") format("woff"),
    url("../fonts/Ekachon-Bold.ttf") format("truetype"),
    url("../fonts/Ekachon-Bold.svg#Ekachon") format("svg");
}

@font-face {
  font-family: "Ekachon-ExtraLight";
  font-weight: ExtraLight;
  src: url("../fonts/Ekachon-ExtraLight.eot");
  src: url("../fonts/Ekachon-ExtraLight.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Ekachon-ExtraLight.woff2") format("woff2"),
    url("../fonts/Ekachon-ExtraLight.woff") format("woff"),
    url("../fonts/Ekachon-ExtraLight.ttf") format("truetype"),
    url("../fonts/Ekachon-ExtraLight.svg#Ekachon") format("svg");
}

@font-face {
  font-family: "Ekachon-Light";
  font-weight: Light;
  src: url("../fonts/Ekachon-Light.eot");
  src: url("../fonts/Ekachon-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Ekachon-Light.woff2") format("woff2"),
    url("../fonts/Ekachon-Light.woff") format("woff"),
    url("../fonts/Ekachon-Light.ttf") format("truetype"),
    url("../fonts/Ekachon-Light.svg#Ekachon") format("svg");
}

@font-face {
  font-family: "Ekachon-Medium";
  font-weight: Medium;
  src: url("../fonts/Ekachon-Medium.eot");
  src: url("../fonts/Ekachon-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Ekachon-Medium.woff2") format("woff2"),
    url("../fonts/Ekachon-Medium.woff") format("woff"),
    url("../fonts/Ekachon-Medium.ttf") format("truetype"),
    url("../fonts/Ekachon-Medium.svg#Ekachon") format("svg");
}

@font-face {
  font-family: "Ekachon-Regular";
  font-weight: Regular;
  src: url("../fonts/Ekachon-Regular.eot");
  src: url("../fonts/Ekachon-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Ekachon-Regular.woff2") format("woff2"),
    url("../fonts/Ekachon-Regular.woff") format("woff"),
    url("../fonts/Ekachon-Regular.ttf") format("truetype"),
    url("../fonts/Ekachon-Regular.svg#Ekachon") format("svg");
}

body {
  line-height: 1.2pt;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
figure,
figcaption {
  margin: 0;
  padding: 0;
}

a,
a:hover,
a:active,
a:focus,
a:visited {
  text-decoration: none;
  outline: none;
  color: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container-main {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;

  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.container-center {
  margin: auto !important;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 576px) {
  .container-main {
    width: 540px;
  }
}

@media (min-width: 768px) {
  .container-main {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container-main {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container-main {
    width: 1170px;
  }
}

@media (min-width: 1330px) {
  .container {
    width: 1300px;
  }
}

html {
  overflow-x: hidden;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-family: "Ekachon-Light" !important;
  color: #000;
  background-color: #fff;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow-x: hidden;
  background-position: center center;
}

body.body-home {
  background-image: url("../images/bg-home.jpg");
  background-position: center center;
}
body.body-quiz-1 {
  background-image: url("../images/bg-quiz-1.jpg");
  background-position: center top;
}
body.body-quiz-2 {
  background-image: url("../images/bg-quiz-2.jpg");
}
body.body-quiz-3 {
  background-image: url("../images/bg-quiz-3.jpg");
}
body.body-quiz-4 {
  background-image: url("../images/bg-quiz-4.jpg");
}
body.body-quiz-5 {
  background-image: url("../images/bg-quiz-5.jpg");
}
body.body-quiz-6 {
  background-image: url("../images/bg-quiz-6.jpg");
}
body.body-quiz-7 {
  background-image: url("../images/bg-quiz-7.jpg");
}
body.body-quiz-8 {
  background-image: url("../images/bg-quiz-8.jpg");
}
body.body-quiz-9 {
  background-image: url("../images/bg-quiz-9.jpg");
}
body.body-result {
  background-image: url("../images/bg-result.jpg");
}

.site-header {
  /* position: fixed;
    left: 0; */
  top: 20px;
  display: flex;
  width: 100%;
  /* padding-top: 20px; */

  position: relative;
  z-index: 30;
}

.site-header .inner {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.site-branding {
  display: block;
  justify-content: center;
  width: 100%;
}

.site-branding img {
  display: block;
  max-width: 210px;
}

/*Audio*/
.audio-wrapper {
  position: relative;
  display: flex;
  justify-content: right;
  width: 28%;
}

.audio-wrapper .audio-inner {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 48px;
  background-color: #c8c8ce;
  border-radius: 30px;
  cursor: pointer;
}

.audio-wrapper .audio-inner .play,
.audio-wrapper .audio-inner .pause {
  position: absolute;
  top: -8px;
  display: block;
  width: 52px;
  height: 56px;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: ease-in-out 0.3s;
}

.audio-wrapper .audio-inner .play {
  left: 0;
  background-image: url("../images/sound-play.png");
}

.audio-wrapper .audio-inner .pause {
  left: 0;
  background-image: url("../images/sound-pause.png");
  opacity: 1;
}

.audio-wrapper .audio-inner.active .play {
  opacity: 1;
  left: calc(100% - 52px);
}
.audio-wrapper .audio-inner.active .pause {
  opacity: 0;
  left: calc(100% - 52px);
}

/*Banner*/
.banner-wrapper {
  position: fixed;
  z-index: 40;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 31%;
  padding: 10px;
  background-color: #2f2f35;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.banner-wrapper .arrow {
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -25px;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.banner-wrapper .arrow.active img {
  transform: scaleY(-1);
}

.banner-wrapper .banner-img-wrapper {
  display: block;
  max-height: 0;
}
.banner-wrapper .banner-img-wrapper img {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.banner-wrapper .banner-img-wrapper.active {
  max-height: 100%;
}

#btn-back-home {
  display: none;
  width: 100%;
}

.btn-back-home {
  margin-top: 5px;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 50px;
  background-color: #F05E21;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 6px solid #020966;
}

.btn-back-home:hover,
.btn-back-home:active {
  border-bottom: 6px solid #373F45;
}

.icon-back-home {
  width: 20px;
  height: 20px;
}

.header-wrap {
  width: 70%;
  display: flex;
  justify-content: space-around;
  flex-direction: column-reverse;
}

.button-quiz-wrapper {
  width: 100%;
}