@import url(fonts.css);

@media (pointer: coarse) {
    .slider-div {
      cursor: default;
    }
  }

  *::-webkit-scrollbar {
    display: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
body{
  height: 78vh;
  overflow: hidden;
  font-family: 'Yakan';
}

  .slider-div{
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 10px;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
    background-position: center;
    background-size: contain;
  }
  .slider-div::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
  .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in-out;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
    background-position: center;
    background-size: contain;
  }
  .slider::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
  .down .slider {
    transform: scale(0.9);
  }
  .down .slider .item .tit {
    opacity: 0;
  }
  .slider * {
    outline: none;
  }
  .slider .item {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
  }
  .slider .item svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background-position: center;
    background-size: contain;
  }
  
  .slider .item svg image{
    background-position: center;
    background-size: contain;
  }
  .slider .item svg image[mask="url(#donutmask)"]{
    background-position: center;
    background-size: contain;
  }
  
  .slider .item .tit {
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    letter-spacing: 2rem;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 7vw;
    transition: all 0.3s ease-in-out;
  }
  
  #slider-1 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
  }
  #slider-1 .tit {
    display: none;
  }
  
  #slider-2 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    transform: scale(1) !important;
    pointer-events: none;
  }
  
  .cursor {
    pointer-events: none;
    position: absolute;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05);
    transition: transform ease-in-out 0.2s, background ease-in-out 0.2s;
    background-image: url(../img/element.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(0);
    z-index: 100;
    left: -9999px;
  }
  .cursor:before, .cursor:after {
    content: "";
    position: absolute;
    border-left: 6px solid rgba(255, 255, 255, 0.5);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    top: 10px;
    left: 52px;
    opacity: 0;
    transition: left ease-in-out 0.1s, opacity ease-in-out 0.2s;
  }
  .cursor:after {
    border-left: none;
    border-right: 6px solid rgba(255, 255, 255, 0.5);
    left: -27px;
  }
  .down .cursor {
    transform: scale(0.7) translateZ(0);
    background: rgba(255, 255, 255, 0.4);
  }
  .down .cursor:before, .down .cursor:after {
    opacity: 1;
    left: 49px;
  }
  .down .cursor:after {
    left: -24px;
  }
  @media (pointer: coarse) {
    .cursor {
      display: none;
    }
  }
  
  .the-most {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 50vw;
    max-width: 100px;
    padding: 10px;
  }
  .the-most img {
    max-width: 100%;
    background-position: center;
  }

  .buttons{
    position: relative;
    width: auto;
    left: 50%;
    top: 100%;
    z-index: 1000000;
    transform: translateX(-50%);
    text-align: center;
    font-size: 34px;
    color: #ffffffbd;
  }
  .buttons #slider-prev{
    padding-right: 20px;
    text-shadow: 0px 0px 3px black;
    cursor: pointer;
  }
  .buttons #slider-next{
    padding-left: 20px;
    text-shadow: 0px 0px 3px black;
    cursor: pointer;
  }

  /* Tabs */
  /* Tabs */
  /* Tabs */
  /* Tabs */
  /* Tabs */

  .r-box{
    position: absolute;
    height: 60vh;
    z-index: 1000;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Yakan';
    direction: rtl;
    right: 0;
  }
  .l-box{
    position: absolute;
    height: 60vh;
    z-index: 1000;
    top: 55%;
    transform: translateY(-50%);
    font-family: 'Yakan';
    direction: rtl;
  }
  
ul {
  position: relative;
  padding-right: 0;
  width: 500px;
  height: 100%;
  margin-bottom: 0;
}
.r-box ul{
  width: 180px;
}

.r-box ul li{
  list-style: none;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 10%;
  overflow: hidden;
  transform: translateX(30%);
  transition: all 1s ease-in;
  padding-bottom: 5%;
  }  

  .r-box ul li:hover{
    transform:  translateX(0%);
  }
  .r-box ul li:hover i{
    transform: rotate3d(0,1,0,360deg) translateY(-50%);
    margin-left: 10px;
  }
ul li{
  list-style: none;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 19%;
  overflow: hidden;
  transform: translateX(-77%);
  transition: all 1s ease-in;
  }  

  ul li:hover{
    transform:  translateX(0%);
  }
  ul li:hover i{
    transform: rotate3d(0,1,0,180deg) translateY(-50%);
    margin-left: 10px;
  }
.r-box ul div.div-tab{
  box-sizing: border-box;
  position: relative;
  height: 100%;
  display: inline-block;
  float: right;
  left: 0;
  cursor: pointer;
  width: 30%;
  background: #0f65dd80;
  border: 1px solid #fff;
  border-right: none;
  border-left: 7px solid #dd160f;
}
ul div.div-tab{
  box-sizing: border-box;
  position: relative;
  height: 100%;
  display: inline-block;
  float: right;
  left: 0;
  cursor: pointer;
  width: 25%;
}

ul div.div-tab img{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: .8;
}

.r-box ul .img-arrow{
  left: 0 !important;
  float: left;
  right: unset;
  width: 100%;
  border-radius: 0;
  z-index: 4;
}

ul .img-arrow{
  position: absolute;
  width: 30%;
  height: 100%;
  background-color: rgba(1, 1, 1, 0.615);
  right: 0;
  display: inline;
  z-index: 1000;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  color: #0F66DD;
  font-size: 26px;
  text-align: center;
}

.r-box ul .img-arrow{
  background-color: rgba(1, 1, 1, 0.202);
}

ul .img-arrow i{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: all .5s linear;
}

.r-box ul .img-arrow i{
 transform:  rotate3d(0,1,0,180deg) translateY(-50%);
}


ul hr{
  margin: 5px 0;
}

ul li p{
  color: #eae8e8e2;
  font-size: 12px;
  margin: 0;
}

.r-box ul li span{
  width: 70%;
  text-align: center;
  border-left: none;
  border-right: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px solid #fff;
  border-right: none;
}
.r-box ul li span p{
  position: relative;
  font-size: 22px;
  top: 50%;
  transform: translateY(-50%);
}

ul li span{
  box-sizing: border-box;
  position: relative !important;
  width: 75%;
  height: 100%;
  display: inline-block !important;
  background-color: #0F66DD;
  color: #ffffff;
  padding-right: 5px;
  font-size: 13px;
  overflow: hidden;
  border-left: 7px solid #e40f0fa0;
  border-right: none;
}



 /* Tabs End */
  /* Tabs End */
  /* Tabs End */
  
  
/* Mouse Scroll */


.icon-scroll#slider-prev {
	position: absolute;
	top: 90%;
	left: 95%;
  width: 20px;
	height: 20px;
	transform: translateX(-50%) scale(2) rotate(-90deg);
	z-index: 199999;
  background-color: rgba(0, 0, 0, 0.129);
  border-radius: 50%;
}
.icon-scroll#slider-next {
	position: absolute;
	top: 90%;
	left: 5%;
  width: 20px;
	height: 20px;
	transform: translateX(-50%) scale(2) rotate(90deg);
	z-index: 199999;
  background-color: rgba(0, 0, 0, 0.129);
  border-radius: 50%;
}

.icon-arrows::before {
  content: '';
}
.icon-arrows span,
.icon-arrows::before {
	display: block;
	width: 9px;
	height: 9px;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
  margin: 3px 9px 3px 5px;
	transform: rotate(45deg);
}

.icon-arrows span:hover,
.icon-arrows::before:hover{
animation: mouse-scroll 1s infinite;
animation-direction: alternate;
}

.icon-arrows::before {
	margin-right: 0.315em;
	animation-delay: .1s;
}

.icon-scroll span {
	animation-delay: .2s;
}


@keyframes mouse-wheel {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(.375em);
	}
}

@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}