.breakTime{
  height: 50px;
}

.headnav{
    /* height: 10%; */
    width: 100vw;
    /* background-color: rgba(165, 42, 42, 0.233); */
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    top: 0;
    z-index: 99;
    transform: translateX(15px);
    /* margin: 0; */
}
.logo{
    margin: 0.5rem;
}
.logo img{
  max-height: 60px;
}
.navbar_w,.navbar_m{
  justify-content: flex-end;
}
.navbar_w{
  width: 100%;
}
.navbar{
    /* background-color: burlywood; */
    padding:1rem 0;
    display: flex;
}
ul.navbar li{
  text-align: center;
  /* border: 1px solid cornflowerblue; */
}
a.top_btn{
  text-decoration: none;
}
ul a.linear{
  /* background-color: rgba(127, 255, 212, 0.514); */
  text-decoration: none;
  font-weight: 700;
  color: rgba(240, 255, 255, 0.7);
  transition: .5s;
}
ul.navbar li a:hover,.top_btn{
  color: #fff;
  text-shadow: 0px 0px 10px rgb(255 255 255);
}
ul.navbar li a:hover .dot,.top_btn .dot{
  background-color: #fff;
  box-shadow: 1px -3px 39px 30px rgba(255 255 255,0.75);
-webkit-box-shadow: 1px -3px 39px 30px rgba(255 255 255,0.75);
-moz-box-shadow: 1px -3px 39px 30px rgba(255 255 255,0.75);
}
.dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 1rem auto 0 auto;
  transition: .5s;

}
ul.topnav li span{
    width: 20%;
}
.navbar_menu{
  display: flex;
  justify-content: space-evenly;
}
.navbar_m{
  display: none;
}
.nav_mobile{
  justify-content: flex-end;
  flex-flow: row;
}
.bar {
  width: 36px;
  height: 4px;
  background: #ffffff;
  margin: 6px 0;
  border-radius: 2px;
}
.active .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 7px);
  transform: rotate(-45deg) translate(-9px, 5px);
}

.active .bar2 {
  opacity: 0;
}

.active .bar3 {
  -webkit-transform: rotate(45deg) translate(-9px, -8px);
  transform: rotate(45deg) translate(-9px, -5px);
}
@media screen and (max-width: 768px){

  .navbar_w{
    display: none;
  }
  .navbar_menu{
    justify-content: flex-end;
  }
  .navbar_m{
    display: block;
    margin:5px 15px;
  }
  .logo{
    padding: 0;
  }
  .navbar_m ul {
    position: absolute;
    right: 20px;
    top: 2.5rem;
    background: rgba(0, 0, 0, 0.5);
    width: 180px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    color: #000000;
    padding: 0;
  }
  .navbar_m.active ul {
    opacity: 1;
    max-height: 400px;
  }
  .navbar_m ul li {
    /* border: 1px solid #000000; */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .navbar_m ul li a {
    display: block;
    padding: 20px 12px;
    font-weight: 600;
    color: #fff;
    font-size: 20px;
  }
  .navbar_m ul li a:hover{
    color: #ffc341;
    transition: .4s ease;
  }
  .navbar_m li.active a {
    color: #ffc341;
    text-shadow: 0px 0px 10px rgba(255, 195, 65, 1);
  }
  
}
/* ---------------------------------------------------------- */
#top {
  width: 100%;
  height: 95vh;
  /* background-color: aquamarine; */
  margin-bottom: 5vh;
}
#myVideo{
   width: 100%;
   height: 100%;
}

.top_cover{
  z-index: 2;
  bottom: -1px;
  width: 100%;
  height: auto;
}

#top a  {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  top: 65%;
  z-index: 3;
}
#top a:hover{
  text-decoration: none;
} 
#top a span {
	position: absolute;
	top: 65%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb07 2s infinite;
	animation: sdb07 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
#top a span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#top a span:nth-of-type(2) {
	top: calc(65% + 16px);
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}
#top a span:nth-of-type(3) {
  top: calc(65% + 32px);
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
@-webkit-keyframes sdb07 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb07 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@media screen and (max-width: 768px){
  #top a ,#top a span {
    top: 70%;
  }
}
/* ---------------------------------------------------------- */
.wrapper{
  width: 100%;
  /* max-width: 1440px; */
  margin: 0 auto;
}
section{
    /* background-color: cadetblue; */
    position: relative;
    /* line-height: 0!important; */
}
.headline{
  width: 100%;
  /* max-width: 1440px; */
  margin: 8vh auto 2vh auto;
  height: auto;
  display: flex;
  align-items: center;
  /* background-color: aquamarine; */
  /* position: absolute; */
  /* top: 1.5rem; */
}
.title{
    font-size: 2rem;
    font-weight: 500;
    margin:0 2rem 0 1rem;
}
.subtitle{
    font-size: 1rem;
}
@media screen and (max-width: 1024px){
  .headline img.mobile{
    padding:0 15px 10px 15px;
  }
}
/* ---------------------------------------------------------- */


.game_flex{
  display: flex;
  flex-flow: column;
}
.game_slider{
  background: no-repeat url("../images/index_sention1.png");
  background-position-x:right;
  background-position-y:bottom;
  background-size: cover;
  flex-flow: row;
}
.aside{
  flex: 1;
}
.tab {
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.tab_btn{
  flex: 1;
  /* background: no-repeat url("/images/tab.png");
  background-position: center;
  background-size: contain; */
  padding: 10px 25px;
}
.slider{
  /* background-color: rgba(210, 30, 186, 0.397); */
  /* height: 50vh; */
  flex: 5;
  /* padding: 0 5%; */
  margin: 0 5% 5% 2%;
  display: flex;
  flex-flow: column;

}
.slider_main{
  display: flex;
  flex-flow: row;
  padding: 0 60px;
}
.slide_column{
  display: flex;
  flex-flow: column;
  filter: brightness(1);
}
.small_slide{
  /* border: 2px solid red; */
  transform: translateX(30%);
}
.slide_column button:hover{
  filter: brightness(1.2);
  transition: 0.4s ease-out;
  background: #ffae00;
  background: radial-gradient(ellipse farthest-side at center center, #ffae00 0%, transparent 100%);
  background: -webkit-radial-gradient(ellipse farthest-side at center center, #ffae00 0%, transparent 100%);
  background: -moz-radial-gradient(ellipse farthest-side at center center, #ffae00 0%, transparent 100%);
}
.slider_btn{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  top: 40%;
}
.next, .prev{
  background-color: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
}
.next .arrow{
	-webkit-transform: rotate(135deg);
  margin-right: 12px;
  margin-top: 7px;
}
.prev .arrow{
	-webkit-transform: rotate(-45deg);
  margin-left: 12px;
  margin-top: 7px;
}
.carousel-indicators{
  bottom: -50px;
  /* background-color: blue; */
}
.pagination{
  margin: 3% auto ;
}
.carousel-indicators li {
  padding: 5px 10px;
  background-color: #8b8b8b;
  margin: 10px;
  border-radius: 13px;
}
.carousel-indicators li.active{
    background-color: #ffae00;
    padding: 5px 20px; 
}
.carousel-control-prev, .carousel-control-next {
  background: rgb(0, 0, 0);
  height: 30px;
  width: 30px;
  top: 50%;
}
/* popup */
.close{
  color: #fff;
  opacity: .8;
}
.close:hover {
  color: #ffae00;
}
/* .modal-open .modal{
  background-color: rgba(0, 0, 0, 0.6);
} */
.modal-dialog{
  max-width: 70vw;
  margin: 0 auto;
}
.modal-content{
  /* background-color: #62b1ffcb; */
  background-color: transparent;
  border: 0px solid rgba(0,0,0,.2);
  border-radius:0%;
}
.modal-header{
  padding: 0;
  border-bottom:0px;
}

.modal-footer{
  justify-content: center;
  border-top: 0px;
  padding: 0;
}
.modal-footer a:hover{
  filter: brightness(1.5);
  transition: 0.4s ease-out;
  background: radial-gradient(ellipse farthest-side at center center, #ffae0048 0%, transparent 100%);
  background: -webkit-radial-gradient(ellipse farthest-side at center center, #ffae0048 0%, transparent 100%);
  background: -moz-radial-gradient(ellipse farthest-side at center center, #ffae0048 0%, transparent 100%);
}
.modal-backdrop{
  /* background-color: #000000a6; */
  height: 100%;
}

.modal-backdrop.show{
  opacity: .7;
}

@media screen and (max-width: 480px){
  .slider_main{
    padding: 0 20px;
  }
  .small_slide{
    transform: translateX(20%);
    margin-top: 5px;
  }
  .modal-body{
    padding: 0;
  }
  .modal-dialog{
    max-width: 100vw;
    margin: 0;
  }
  .game_slider{
    flex-flow: column;
  }
  .slider{
    margin: 0 2% 10% 2%;
  }
  .aside{
    background-color: #ffffff;
    /* opacity: 0.3; */
    background: repeating-linear-gradient( -45deg, #c2c2c275 , #c2c2c275 2px, #ffffff 2px, #ffffff 6px );
  }
  .tab {
    flex-flow: row;
  }
  .tab_btn{
    padding: 10px 5px;

  }
  .carousel-indicators li {
    padding:2px;
    margin: 0;
  }
  .carousel-indicators li.active{
      padding:2px; 
  }
}
/* ---------------------------------------------------------- */

.profession_flex{
  display: flex;
  flex-flow: column;
}
.girl{
  margin: 2% auto 12%  auto;
}
.profession_box{
  /* background-color: rgba(30, 210, 69, 0.397); */
  /* top: 50%;
  transform:translate(15px,-50%); */
  background: no-repeat url("../images/index_sention2.png");
  background-position-x:right;
  background-position-y:bottom;
  background-size: cover;
  flex-flow: row;
}
.block_left,.block_right{
  flex-flow: column;
  justify-content: center;
  align-items: center;
  /* flex: 1; */
  padding-bottom: 11%;
}
.block{
  /* background-color: rgba(165, 42, 42, 0.486); */
  position: relative;
  /* padding: 5% 10% 5% 15%; */
  
}
.block2,.block3{
  animation: blockMove 2.9s infinite;
}
.block1,.block4{
  animation: blockMove2 3.6s infinite;
}
.b_content{
  display: flex;
  flex-flow: column;
  justify-content: center;
  top: 9%;
  left: 15%;
  display: none;
}
.b_title{
  padding: 10px 0;
}
.block1 .b_title{
  border-bottom:2px solid #63e4ef;
  
}
.block2 .b_title{
  border-bottom:2px solid #f56e6e;
}
.block3 .b_title{
  border-bottom:2px solid #ffce5a;
}
.block4 .b_title{
  border-bottom:2px solid #b4a5ff;
}
.b_text{
  list-style: none;
  /* background-color: rgba(42, 165, 69, 0.164); */
}
.b_text li{
  padding-top: 5px;
  font-weight: 500;
}
@media screen and (max-width: 1024px){
  .block_left{
    padding-right: 0;
  }
  .block_right{
    padding-left: 0;
  }
}
/* ---------------------------------------------------------- */
#efficient{
  position: relative;
  z-index: 100;
  line-height: 0!important;
  background: no-repeat url("../images/index_sention4_bg_g.png");
  background-position: bottom;
  background-size: cover;
}
.efficient_info{
      /* background-color: rgba(210, 105, 30, 0.397); */
      top: 50%;
      transform:translateY(-50%);
}
.progress_bar{
  display: flex;
  padding: 0 0 15% 13%;
}
.progress_bar_img{
  max-height: 450px;
}
@media screen and (max-width: 1440px){
  .progress_bar{
    display: flex;
    padding: 0 20% 0 5%;
  }
}
@media screen and (max-width: 1024px){
  .efficient_info{
    right: 0;
  }
  .progress_bar{
    padding: 20% 0 20% 20% ;
  }
}
/* ---------------------------------------------------------- */
#contact{
  /* max-height: 728px; */
  /* background-color: #4a3f7a; */
  background: repeat url("../images/index_sention4_bg.png");
  background-position: bottom;
  background-size: cover;
  /* position: relative; */
  /* padding-top: 2rem; */
  /* margin: 0 auto; */
  /* padding: 50%; */
}
#contact .headline{
  margin-top: 0;
  width: 100%;
}
.contact_flex{
  display: flex;
  flex-flow: column;
  z-index: 90;
  background: repeat url("../images/index_sention4_4.png");
  background-position: center;
  background-size: cover;
}
.contact_box{
  
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto;
  width: auto;
  /* width: 100%;
  height: auto; */
  /* transform: translateX(15px); */
  /* background-color: rgba(210, 105, 30, 0.397); */
  /* overflow: hidden; */
}
.contact_info{
  flex: 2;
  padding:3% 5%;
  align-items: flex-start;
  display: flex;
  flex-flow: column;
}
.contact_li{
  display: flex;
  flex-flow: row;
  align-items: center;
  list-style: none;
  line-height: 30px;
}
.table{
  flex: 4;
  /* background: no-repeat url("../images/table.png");
  background-position: center;
  background-size: contain; */
  /* background-color: rgba(96, 210, 30, 0.397); */
  padding: 30px 0;
  /* margin:0 10%; */
}
.contact_info li{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  margin: 10px 0;
    /* background-color: rgba(210, 105, 30, 0.397); */
}
.QR{
  padding: 10px 0;
}
.table_content{
  /* background-color: rgba(222, 184, 135, 0.479); */
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  /* padding: 5%; */
  /* flex-flow: column; */
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.table_content li{
  /* padding: 10px 0; */
  border-bottom: 2px solid rgb(184, 184, 184) ;
}
.table_btn{
  background-color: #ffae00;
  border-radius: 5px;
  padding: 8px 35px;
}
.sention4_bg{
  bottom: 0;
  opacity: 0.8;
  mix-blend-mode:hard-light;
}
.sention4_bg2{
  bottom: 0;
  opacity: .5;
  mix-blend-mode:overlay;
  position: absolute;
  z-index: 10;
}
.table_bg{
  /* max-height: 500px;
  padding: 15px; */
  padding: 10%;
}
.QRcode{
  max-width: 200px;
  /* width: 40%; */
}
.contact_icon{
  max-width: 30px;
  object-fit: contain;
  padding-right: 10px;
}
@media screen and (max-width: 1440px){
  .contact_flex{
    background: repeat url("../images/index_sention4_4.png");
    background-position: bottom;
    background-size: cover;
  }
}
@media screen and (max-width: 1024px){
  .table{
    display: none;
  }
  .contact_box{
    width: 100%;
    margin-bottom: 100px;
  }
  .contact_info{
    flex-flow: row-reverse;
    justify-content: space-evenly;
  }
}
/* ---------------------------------------------------------- */
.footer{
  width: 100%;
  bottom: 1rem;
  text-align: center;
}
/* ---------------------------------------------------------- */
@keyframes blockMove {
  0%{
      top:-5px;
  }
  50%{
      top:0px;
  }
  100%{
      top:-5px;
  }
}
@keyframes blockMove2 {
  0%{
      top:-5px;
  }
  50%{
      top:0px;
  }
  100%{
      top:-5px;
  }
}