/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  max-width: 100%;
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* Safari seems to support, but seems deprecated and does the same thing as the others. */
  image-rendering: -webkit-optimize-contrast;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

html{
  position: relative;
  background: url(../img/backG.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
  body{
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
  }

.animated{
  transition: all 1s ease;
}
#clk{
  visibility: hidden;
  height: 0;
  position: absolute;
}
.portrait{
  display: none;
}
header{
  position: fixed;
  top: 0;
  right: 0;
  padding: 1% 2%;
  width: 96%;
  background: #fff;
  text-align: right;
  z-index: 100;
}
  header a, .ingame_header a{
    display: inline-block;
    margin: 5px 20px;
  }
    header a img, .ingame_header a img{
      height: 40px;
    }
    .ingame_header a{
      position: absolute;
      right: 0;
      top: 0;
      margin-top: 1.4%;
    }
.cat_space, .ingame_header{
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  padding: 0 5% 3%;
  z-index: 101;
}
.ingame_header{
  display: none;
  text-align: right;
  padding: 1% 0 0;
  width: 100%;
}
  .home_cat{
    position: absolute;
    width: 16%;
    top: 110%;
  }

/* content */
.content, .result{
  position: relative;
  overflow: hidden;
}
  .content > div{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: calc(96% - 70px);
    padding: 0 5% 3%;
    margin-top: 70px;
    overflow: hidden;
  }
  .content > div:not(.cover){
    margin-top: 0;
    padding: 3% 5%;
    height: 92%;
  }
  .content > .cover{
    background: url(../img/bg_home.jpg) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    display: block;
  }
    .cover > *{
      position: absolute;
      display: inline-block;
    }
    .home_title{
      width: 35%;
      left: 20%;
      top: 4%;
    }
    .home_txt{
      width: 45%;
      top: 26%;
      left: 10%;
    }
    .btn_start{
      width: 15%;
      right: 15%;
      top: 25%;
    }
    .home_item{
      bottom: 0;
      width: 11%;
    }
    .home_i1{
      bottom: 31%;
      left: 11%;
      animation: float_anim1 3s ease 0s infinite;
    }
    .home_i2{
      left: 36%;
      bottom: 41%;
      width: 10%;
      animation: float_anim1 3s ease .5s infinite;
    }
    .home_i3{
      right: 30%;
      bottom: 24%;
      width: 14%;
      animation: float_anim1 3s ease 1s infinite;
    }
    .home_i4{
      right: 15%;
      bottom: 44%;
      animation: float_anim1 3s ease 1.5s infinite;
    }
    .home_boy{
      left: 17%;
      width: 8%;
      bottom: 31%;
    }
    .home_girl{
      width: 9%;
      bottom: 35%;
      left: 43%;
    }

    .tnc{
      background: #F98A3C;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 90%;
      padding: 1.5% 5%;
      font-size: 12px;
    }
      .tnc b{
        margin-right: 5px;
      }
  

.ques{
  background-size: cover !important;
}
  .ques > *{
    position: absolute;
  }
  .ans_box{
    display: none;
    width: 50%;
    right: 5%;
    top: 10%;
  }
    .cat_s{
      position: absolute;
      width: 35%;
      right: -9%;
      bottom: -30%;
    }
    .cat_s.animate__swing {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation-name: swing;
      animation-name: swing;
  }
    .ans_box a{
      position: absolute;
      right: 3%;
      top: -13.5%;
      width: 128px;
    }
    .ques_box{
      font-size: clamp(10px, 3vw, 40px);
      width: 48%;
      background: #fff;
      padding: 5% 2%;
      border-radius: 15px;
      right: 2%;
      top: 18%;
    }
      .ques_box > img{
        position: absolute;
        left: 0%;
        width: 25%;
        bottom: 95%;
      }
      .ques_box b{
        display: block;
        margin-bottom: 4%;
        color: #005CB9;
        line-height: 1.2;
      }
        .ques_box b span{
          font-style: normal;
          color: #F98A3C;
        }
      .ques_box > div a{
        display: block;
        margin-bottom: 10px;
        cursor: pointer;
      }
        .ques_box > div a img{
          border-radius: 10px;
        }
      .ques_box ol{
        font-size: clamp(10px, 2vw, 32px);
        padding: 0;
      }
        .ques_box li{
          margin-bottom: 15px;
          background: #005CB9;
          list-style: none;
          position: relative;
          padding: 10px 30px 10px 40px;
          cursor: pointer;
          color: #fff;
        }
        .ans_opt.unchecked{
          opacity: 0.5;
        }

        .ques_box li::before {
          font-size: clamp(10px, 2vw, 40px);
          color: #fff;
          display: inline-block;
          content: "";
          position: absolute;
          left: 10px;
          top: 10px;
        }
        .ques_box li:nth-child(1)::before{
          content: "1";
        }
        .ques_box li:nth-child(2)::before{
          content: "2";
        }
        .ques_box li:nth-child(3)::before{
          content: "3";
        }
      .btn_confirm{
        width: 12%;
        bottom: 15%;
        right: 2%;
        display: none;
      }

  /* ques1 */
  .ques1{
    background: url(../img/bg_q1.jpg) no-repeat;
  }
    .q1_item{
      width: 23%;
      top: 27%;
      left: 4%;
    }
    .q1_item.animated_loop{
      animation: float_anim1 3s ease 1.5s infinite;
    }
    .q1_boy{
      width: 19%;
      left: 16%;
      top: 8%;
    }
    .q1_girl{
      width: 15%;
      left: 36%;
      top: 53%;
    }
    .ques1 .ani2{
      left: 26%;
      top: 40%;
    }
  /* ques2 */
  .ques2{
    background: url(../img/bg_q2.jpg) no-repeat;
  }
    .q2_item{
      width: 23%;
      top: 0%;
      left: 8%;
    }
    .q2_item.animated_loop{
      animation: float_anim1 3s ease 1.5s infinite;
    }
    .q2_boy{
      width: 13%;
      left: 34%;
      top: 17%;
    }
    .ques2 .ani2{
      left: 10%;
      top: 20%;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .ques2 .btn_confirm{
      bottom: 32%;
    }
  /* ques3 */
  .ques3{
    background: url(../img/bg_q3.jpg) no-repeat;
  }
    .q3_item{
      width: 27%;
      top: 16%;
      left: 8%;
    }
    .q3_item.animated_loop{
      animation: float_anim1 3s ease 1.5s infinite;
    }
    .q3_girl{
      width: 18%;
      left: 31%;
      top: 41%;
    }
    .ques3 .ani2{
      left: 23%;
      top: 33%;
      width: 20%;
    }
    .ques3 .btn_confirm{
      bottom: 16%;
    }
    /* ques4 */
    .ques4{
      background: url(../img/bg_q4.jpg) no-repeat;
    }
      .q4_item{
        width: 27%;
        top: 16%;
        left: 8%;
      }
      .q4_item.animated_loop{
        animation: float_anim1 3s ease 1.5s infinite;
      }
      .q4_guy{
        width: 20%;
        left: 32%;
        top: 41%;
      }
      .ques4 .ani2{
        left: 29%;
        top: 44%;
        width: 15%;
      }
      .ques4 .btn_confirm{
        bottom: 16%;
      }
    /* ques5 */
    .ques5{
      background: url(../img/bg_q5.jpg) no-repeat;
    }
      .q5_item{
        width: 18%;
        top: 20%;
        left: 13%;
      }
      .q5_item.animated_loop{
        animation: float_anim1 3s ease 1.5s infinite;
      }
      .q5_girl{
        width: 14%;
        left: 35%;
        top: 45%;
      }
      .ques5 .ani2{
        left: 27%;
        top: 35%;
      }
      .ques5 .btn_confirm{
        bottom: 16%;
      }
    /* ques6 */
    .ques6{
      background: url(../img/bg_q6.jpg) no-repeat;
    }
      .ques6 .ques_box{
        top: 10%;
        padding: 5% 2% 1%;
      }
      .q6_item{
        width: 26%;
        top: 13%;
        left: 7%;
      }
      .q6_item.animated_loop{
        animation: float_anim1 3s ease 1.5s infinite;
      }
      .q6_guy{
        width: 19%;
        left: 24%;
        top: 22%;
      }
      .ques6 .ani2{
        top: 20%;
      }
      .ques6 .btn_confirm{
        bottom: 3%;
      }
      .drag_box{
        padding-bottom: 85%;
        touch-action: none;
        width: 100%;
        position: relative;
      }
        .ques6 .drag_opt{
          display: inline-block;
          width: 25%;
          z-index: 10;
          position: absolute;
          left: 10%;
          transition: width 0.5s ease,
                      opacity 0.5s ease;
        }
        .ques6 .drag_opt.opt2{
          left: 40%;
        }
        .ques6 .drag_opt.opt3{
          left: 70%;
        }
        .ques6 .drag_opt.opt4{
          left: 10%;
          top: 30%;
        }
        .ques6 .drag_opt.opt5{
          left: 40%;
          top: 30%;
        }
        .ques6 .drag_opt.opt6{
          left: 70%;
          top: 30%;
        }
        .drag_opt.dropped{
          width: 20%;
        }
        .drag_opt.can-drop{
          opacity: 0.6;
        }
        .ques6 .drag_box > .dropZone{
          position: absolute;
          width: 42%;
          height: 32%;
          left: 3%;
          bottom: 0;
          background: url(../img/q6_box1.png) no-repeat;
          background-size: 100% 100%;
        }
        .ques6 .drag_box > .dropZone.dropZone2{
          background: url(../img/q6_box2.png) no-repeat;
          background-size: 100% 100%;
          left: 58%;
        }
        .ques6 .cat_s{
          right: -13%;
          bottom: 5%;
          width: 40%;
        }
        .ans_box a.btn_q6{
          top: -10%;
        }
    /* ques7 */
    .ques7{
      background: url(../img/bg_q7.jpg) no-repeat;
    }
      .q7_item{
        width: 39%;
        top: 20%;
        left: -2%;
      }
      .q7_item.animated_loop{
        animation: float_anim1 3s ease 1.5s infinite;
      }
      .q7_girl{
        width: 26%;
        left: 28%;
        top: 26%;
      }
      .ques7 .ani2{
        left: 31%;
        top: 32%;
        z-index: 10;
      }
      .ques7 .btn_confirm{
        bottom: 25%;
      }
    /* ques8 */
    .ques8{
      background: url(../img/bg_q8.jpg) no-repeat;
    }
      .q8_item{
        width: 30%;
        top: 17%;
        left: 12%;
      }
      .q8_item.animated_loop{
        animation: float_anim1 3s ease 1.5s infinite;
      }
      .q8_boy{
        width: 14%;
        left: 33%;
        top: 24%;
      }
      .ques8 .ani2{
        left: 31%;
        top: 32%;
        z-index: 10;
      }
      .ques8 .btn_confirm{
        bottom: 15%;
      }
    
/* survey */
.survey{
  background: rgba(0,0,0,0.6);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
  .survey_con{
    height: 80%;
    width: 90%;
    margin: 7.5% auto;
    background: url(../img/bg_result.jpg) no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 40px;
  }
    .survey_con > * {
      position: absolute;
    }
    .survey_txt1{
      width: 50%;
      right: 10%;
      top: 18%;
    }
    .survey_txt2{
      width: 50%;
      top: 50%;
      left: 25%;
    }
    .survey_cat{
      -webkit-transform: scaleX(-1) rotate(15deg);
      transform: scaleX(-1) rotate(15deg);
      width: 30%;
      top: -8%;
      left: 6%;
    }
    .rating_bar{
      /* background: url(../img/survey_bar.png) no-repeat;
      background-position: center center;
      background-size: 100% auto;
      padding: 1% 10% 1% 13%;
      display: grid;
      grid-template-columns: repeat(5,1fr);
      grid-gap: 20px; */
      bottom: 10%;
      left: 10%;
      width: 80%;
      text-align: center;
    }
      .rating_bar a{
        display: inline-block;
        width: 20%;
        margin: 0 5%;
      }
      .rating_bar a.unchecked{
        opacity: 0.5;
      }
        .input_con{
          cursor: pointer;
          font-size: clamp(10px, 4vw, 50px);
          color: #f6893b;
          animation: all 0.5s ease-in-out forwards;
        }
        .input_con.checked {
          color: #f6893b;
      }
/* result */
.result{
  background: url(../img/bg_result.jpg) no-repeat;
  background-size: cover;
  display: none;
}
  .result_con{
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: 86%;
    margin: 5%;
  }
    .result_con > * {
      position: absolute;
    }
    .result_icon{
      width: 40%;
      z-index: 2;
    }
    .result2 .result_icon, .result3 .result_icon{
      width: 39%;
      left: 2%;
      top: -3%;
    }
    .result_count{
      width: 50%;
      right: 11%;
      top: 7%;
    }
      .result_count b{
        font-size: 6vw;
        position: absolute;
        top: -16%;
        left: 35%;
        color: #fff;
        font-weight: normal;
      }
    .result_h{
      width: 42%;
      right: 15%;
      top: 17%;
      z-index: 3;
    }
    .result2 .result_h, .result3 .result_h{
      width: 54%;
      right: 8%;
      top: 20%;
    }
    .result_note{
      width: 23%;
      right: 25%;
      top: 40%;
    }
    .result3 .result_note{
      top: 44%;
    }
    .result_txt{
      width: 90%;
      left: 5%;
      bottom: 0;
    }
      .share_con{
        position: absolute;
        bottom: -5%;
        width: 80%;
        left: 5%;
      }
        .share_con a{
          margin-right: 2%;
          display: inline-block;
        }
          .share_con a img {
            height: 4.5vw;
            max-height: 60px;
            display: inline-block;
          }
    .result_pp{
      width: 20%;
      right: -4%;
      bottom: -5%;
    }

.share_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  padding: 2% 1%;
  background: #f6893b;
  color: #fff;
  text-align: justify;
  border-radius: 10px;
  font-size: 1.2rem;
  letter-spacing: 1.2;
  display: none;
  z-index: 100;
}
  .btn_close_share{
    position: absolute;
    width: 30px;
    right: 5%;
    top: 5%;
  }
  .share_box p{
    text-align: center;
  }
  .share_box p a{
    display: inline-block;
    margin: 10px;
    width: 50px;
  }
  .btn_ig{
    display: none;
  }

@keyframes float_anim1 {
  0%   {
    -ms-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* IE 9 */
    -webkit-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* Safari */
    transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1);

  }
  50%   {
    -ms-transform: translateY(30px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* IE 9 */
    -webkit-transform: translateY(30px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* Safari */
    transform: translateY(30px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1);

  } 
  100%   {
    -ms-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* IE 9 */
    -webkit-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* Safari */
    transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1);

  }
}
@keyframes float_anim2 {
  0%   {
    -ms-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* IE 9 */
    -webkit-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* Safari */
    transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1);
    filter: brightness(1);
  }
  50%   {
    -ms-transform: translateY(0px) translateX(30px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* IE 9 */
    -webkit-transform: translateY(0px) translateX(30px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* Safari */
    transform: translateY(0px) translateX(30px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1);
    filter: brightness(1.1);
  } 
  100%   {
    -ms-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* IE 9 */
    -webkit-transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1); /* Safari */
    transform: translateY(0px) translateX(0px) translateZ(0px) rotate(0deg) scaleY(1) scaleX(1);
    filter: brightness(1);
  }
    }
@keyframes float_anim3 {
  0%   {
    filter: brightness(1);
  }
  50%   {
    filter: brightness(1.3);
  } 
  100%   {
    filter: brightness(1);
  }
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 960px) {
  .ans_box a{
    right: 15%;
  }
}   
@media only screen and (max-width: 700px) {
  .tnc{
    font-size: 8px;
  }
}   

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}