.snake_boardbg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.initialScreen0{
  width: 100%;
  height: 100%;
  z-index: 5;
  background: #fff;
  position: absolute;
  top: 0;
}
.screen_1{
  width: 1280px;
  height: 720px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  box-sizing: border-box;
}
/* .screen_1 {
    width: 1280px;
    height: 720px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    box-sizing: border-box;
    gap: 1em;
} */
.screen_2{
  width: 600px;
  height: 300px;
  position: absolute;
  left: 130px;
  top: 25px;
}
.wns_logo{
  width: 150px;
  height: 150px;
  margin-right: 1.5em;
}
.ind_logo{
  width: 500px;
  height: 232px;
}
.ind_txt{
  width: 100%;
  color: #333333;
  text-align: center;
  font-size: 25px;
  font-family: SpartanMB_SemiBold;
  line-height: 40px;
}
.ind_txt b{
  font-size: 30px;
  font-family: SPARTANMB_BOLD;
}
.wns_logo2{
  width: 486px;
  height: 79px;
  /* margin-top: 4vh; */
}
.initialstrightStrip {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 663px;
  height: 550px;
}
.initialstrightStrip>* {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.initialstrightStrip div:nth-child(1){left: 8px;}
.initialstrightStrip div:nth-child(2){left: 5px;}
.initialstrightStrip div:nth-child(3){left: 3px;}
.initialstrightStrip div:nth-child(4){left: 0px;}

.initialstrightStrip>* >img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 663px;
    height: 550px;
}
.initialScreen1{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: #ffffff;
  background-image: url('../../../Media/eng/images/common/inti_1.jpg');
  background-size: 100% 100%;
  background-position: center center;
}
.initialScreen1_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
}
.inti_img1{
  width: 870px;
  height: 420px;
  position: absolute;
  left: 64px;
  top: 12px;
}
.inti_img1 img{
  width: 870px;
  height: 420px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img2{
  width: 95px;
  height: 50px;
  position: absolute;
  left: 222px;
  top: 172px;
}
.inti_img2 img{
  width: 95px;
  height:50px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img3{
  width: 240px;
  height: 95px;
  position: absolute;
  left: 301px;
  top: 135px;
}
.inti_img3 img{
  width: 240px;
  height: 95px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img4{
  width: 600px;
  height: 130px;
  position: absolute;
  left: 152px;
  top: 213px;
}
.inti_img4 img{
  width: 600px;
  height: 130px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img5{
  width: 45px;
  height: 15px;
  position: absolute;
  left: 319px;
  top: 115px;
}
.inti_img5 img{
  width: 45px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img6{
  width: 50px;
  height: 19px;
  position: absolute;
  left: 505px;
  top: 138px;
}
.inti_img6 img{
  width: 50px;
  height: 19px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img7{
  width: 50px;
  height: 19px;
  position: absolute;
  left: 534px;
  top: 130px;
}
.inti_img7 img{
  width: 50px;
  height: 19px;
  position: absolute;
  left: 0;
  top: 0;
}
.inti_img8{
  width: 210px;
  height: 195px;
  position: absolute;
  left: 583px;
  top: 137px;
}
.inti_img8 img{
  width: 210px;
  height: 195px;
  position: absolute;
  left: 0;
  top: 0;
}
.initialScreen1_bg img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
}
.initialScreen2{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: #ffffff;
}
.initialScreen2_bg{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.initialScreen2_bg img{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.initialScreen2_txt{
  width: 675px;
  height: 480px;
  position: absolute;
  right: 0;
  top: 0;
  /* background: #ffffff; */
}
.initialScreen2_txt_1{
  color: #333333;
  width: 592px;
  text-align: center;
  font-size: 18px;
  font-family: SpartanMB_SemiBold;
  position: absolute;
  left: -23px;
  top: 24px;
  line-height: 25px;
}
.initialScreen2_txt_2{
  color: #333333;
  width: 500px;
  text-align: center;
  font-size: 19px;
  font-family: SpartanMB_SemiBold;
  position: absolute;
  left: 14px;
  top: 186px;
  line-height: 25px;
}
.initialScreen2_txt2_2{
  color: #333333;
  width: 468px;
  text-align: center;
  font-size: 18px;
  font-family: SpartanMB_SemiBold;
  position: absolute;
  left: 50px;
  top: 252px;
  line-height: 25px;
}
.initialScreen2_txt_3{
  color: #333333;
  width: 500px;
  text-align: center;
  font-size: 25px;
  font-family: SpartanMB_ExtraBold;
  position: absolute;
  left: 34px;
  top: 340px;
}
.initialScreen3{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: #ffffff;
}
.initialScreen3_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.initialScreen3_txtarea{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #3E4C62;
  /* background-image: url("../../../Media/eng/images/common/demo.png"); */
}
.Instructin_headtxt{
  width: 500px;
  font-size: 56px;
  color: rgba(255, 255, 255, 0.2);
  font-family:SPARTANMB_BOLD;
  position: absolute;
  left: 117px;
  top: 87px;
}
.Instructin_txt_div{
  width: 1040px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 133px;
  right: 0;
  margin: 0 auto;
}
.Instructin_txt_div img{
  transform: scale(1.5);
}   
.Instructin_cont1{
  width: 1040px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0px;
}
.intr_cont1_headtxt{
  width: 900px;
  position: absolute;
  left: 52px;
  top: 19px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
}
.intr_cont1_txt1{
  width: 1000px;
  position: absolute;
  left: 53px;
  top: 72px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
}
.intr_img_div1{
  width: 220px;
  height: 300px;
  position: absolute;
  left: 44px;
  top: 167px;
}
.intrimgdiv1_img{
  width: 190px;
  height: 240px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intrimgdiv1_txt{
  width: 194px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intr_img_div2{
  width: 220px;
  height: 300px;
  position: absolute;
  left: 290px;
  top: 167px;
}
.intrimgdiv2_img{
  width: 149px;
  height: 198px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intrimgdiv2_txt{
  width: 153px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intr_img_div3{
  width: 220px;
  height: 371px;
  position: absolute;
  left: 538px;
  top: 167px;
}
.intrimgdiv3_img{
  width: 151px;
  height: 198px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intrimgdiv3_txt{
  width: 215px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intr_img_div4{
  width: 220px;
  height: 310px;
  position: absolute;
  left: 795px;
  top: 176px;
}
.intrimgdiv4_img{
  width: 150px;
  height: 185px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intrimgdiv4_txt{
  width: 133px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0;
  margin: 0 auto;
}
.Instructin_cont2{
  width: 1040px;
  height: 500px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.intr_cont2_headtxt{
  width: 873px;
  position: absolute;
  left: 50px;
  top: 14px;
  color: #ffffff;
  font-size: 19px;
  font-family: SPARTANMB-REGULAR;
}
.intr2_img_div1{
  width: 220px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 170px;
  right: 0;
  margin: 0 auto;
}
.intr2imgdiv1_img{
  width: 220px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.Instructin_cont3{
  width: 1040px;
  height: 500px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.intr_cont3_headtxt{
  width: 760px;
  position: absolute;
  left: 52px;
  top: 19px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
}
.intr3_img_div1{
  width: 260px;
  height: 300px;
  position: absolute;
  left: 47px;
  top: 114px;
}
.intr3imgdiv1_img{
  width: 226px;
  height: 211px;
  position: absolute;
  top: 0;
  left: -10px;
  right: 0;
  margin: 0 auto;
}
.intr3imgdiv1_txt{
  width: 240px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
}
.intr3_img_div2{
  width: 260px;
  height: 300px;
  position: absolute;
  left: 370px;
  top: 114px;
}
.intr3imgdiv2_img{
  width: 222px;
  height: 222px;
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intr3imgdiv2_txt{
  width: 241px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intr3_img_div3{
  width: 260px;
  height: 300px;
  position: absolute;
  left: 690px;
  top: 114px;
}
.intr3imgdiv3_img{
  width: 275px;
  height: 223px;
  position: absolute;
  top: -11px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.intr3imgdiv3_txt{
  width: 253px;
  color: #ffffff;
  font-size: 20px;
  font-family: SPARTANMB-REGULAR;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 0;
  margin: 0 auto;
}

.intr3imgdiv1_txt b{
  color: #FF9900;
  font-family: SPARTANMB_BOLD;
}
.intr3imgdiv2_txt b{
  color: #FF9900;
  font-family: SPARTANMB_BOLD;
}
.intr3imgdiv3_txt b{
  color: #FF9900;
  font-family: SPARTANMB_BOLD;
}
#intro_next_btn {
    position: absolute;
    top: 173px;
    right: -65px;
    cursor: pointer;
    transform: scaleX(-1);
}

#intro_back_btn {
    position: absolute;
    top: 173px;
    left: -61px;
    /* transform: scaleX(-1); */
    cursor: pointer;
}

.initialScreen3 .start_jornybtn{
  position: absolute;
  top: 457px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 180px;
  height: 45px;
  border-radius: 40px;
  border: 2px solid #FF9900;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s transform ease-in-out;
  transition: 0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;
  will-change: transform;
  z-index: 0;
  color: #FF9900;
}
.start_jornybtn span{
   /* color: #333333; */
   width: 180px;
   text-align: center;
   font-size: 22px;
   font-family: SPARTANMB_BOLD;
   position: absolute;
   left: 0px;
   top: 10px;
   transition: all 0.2s ease;
   line-height: 25px;
}
.start_jornybtn:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
    will-change: transform;
    color: #ffffff;
}

.start_jornybtn::after {
    content: '';
    background-color: #FF9900;
    border-radius: 3rem;
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translate(-100%, 0) rotate(10deg);
    transform: translate(-100%, 0) rotate(10deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: 0.2s -webkit-transform ease-out;
    transition: 0.2s -webkit-transform ease-out;
    transition: 0.2s transform ease-out;
    transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out;
    will-change: transform;
    z-index: -1;
}

.start_jornybtn:hover::after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    color: #ffffff;
}


.initialScreen2 .BeginGameBtn{
  position: absolute;
  top: 400px;
  left: 700px;
  width: 160px;
  height: 45px;
  border-radius: 40px;
  border: 2px solid #333333;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s transform ease-in-out;
  transition: 0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;
  will-change: transform;
  z-index: 0;
  color: #333;
}
.initialScreen2 .instructionBtn{
  position: absolute;
  top: 400px;
  left: 890px;
  width: 160px;
  height: 45px;
  border-radius: 40px;
  border: 2px solid #333333;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s transform ease-in-out;
  transition: 0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;
  will-change: transform;
  z-index: 0;
  color: #333;
}
.BeginGameBtn span{
   /* color: #333333; */
   width: 160px;
   text-align: center;
   font-size: 22px;
   font-family: SPARTANMB_BOLD;
   position: absolute;
   top: 10px;
   /* left: 0px;
   top: 10px */
   transition: all 0.2s ease;
   line-height: 25px;
}
.instructionBtn span{
  width: 160px;
  text-align: center;
  font-size: 22px;
  font-family: SPARTANMB_BOLD;
  position: absolute;
  left: 0px;
  top: 10px;
  line-height: 25px;
}
.BeginGameBtn:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
    will-change: transform;
    color: #ffffff;
}

.BeginGameBtn::after {
    content: '';
    background-color: #333333;
    border-radius: 3rem;
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translate(-100%, 0) rotate(10deg);
    transform: translate(-100%, 0) rotate(10deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: 0.2s -webkit-transform ease-out;
    transition: 0.2s -webkit-transform ease-out;
    transition: 0.2s transform ease-out;
    transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out;
    will-change: transform;
    z-index: -1;
}

.BeginGameBtn:hover::after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    color: #ffffff;
}
.instructionBtn:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
    will-change: transform;
    color: #ffffff;
}

.instructionBtn::after {
    content: '';
    background-color: #333333;
    border-radius: 3rem;
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translate(-100%, 0) rotate(10deg);
    transform: translate(-100%, 0) rotate(10deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: 0.2s -webkit-transform ease-out;
    transition: 0.2s -webkit-transform ease-out;
    transition: 0.2s transform ease-out;
    transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out;
    will-change: transform;
    z-index: -1;
}

.instructionBtn:hover::after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    color: #ffffff;
}
.initialScreen3_wns_logo{
  width: 165px;
  height: 65px;
  position: absolute;
  right: 13px;
  top: 30px;
}
.initialScreen3_wns_logo img{
  width: 145px;
  height: 60px;
  position: absolute;
  right: 0;
  top: 0;
}

.initialScreen_video{
  width: 1280px;
  height: 720px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.skip_btn {
  position: absolute;
  width: 100px;
  height: 42px;
  cursor: pointer;
  right: 16px;
  top: 25px;
  margin: 0 auto;
  border: 3px solid #FDC441;
  border-radius: 3rem;
  overflow: hidden;
  text-decoration: none;
  -webkit-transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s -webkit-transform ease-in-out;
  transition: 0.2s transform ease-in-out;
  transition: 0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;
  will-change: transform;
  z-index: 0;
  color: #FDC441;
}

.skip_btn:hover {
  border: 2px solid transparent;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  will-change: transform;
  color: #FFF;
}

.skip_btn::after {
  content: '';
  background-color: #FDC441;
  border-radius: 3rem;
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: translate(-100%, 0) rotate(10deg);
  transform: translate(-100%, 0) rotate(10deg);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: 0.2s -webkit-transform ease-out;
  transition: 0.2s -webkit-transform ease-out;
  transition: 0.2s transform ease-out;
  transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out;
  will-change: transform;
  z-index: -1;
}

.skip_btn:hover::after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.skip_btn span {
  position: absolute;
  font-family: arial_bold;
  font-size: 22px;
  text-align: center;
  left: 0;
  right: 0;
  top: 5px;
  transition: all 0.2s ease;
}

.skip_btn img {
  width: 8px;
  height: 14px;
  position: absolute;
  right: 0;
  top: 11px;
}