@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@font-face {
  font-family: "pretendard-semibold";
  src: url("./font/Pretendard-SemiBold.woff") format("truetype");
}
@font-face {
  font-family: "pretendard-Light";
  src: url("./font/Pretendard-Light.woff") format("truetype");
}
/*
    font-family: 'Baloo Thambi 2', cursive;
    font-family: 'Noto Sans KR', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Open Sans', sans-serif;
*/
.engT1{font-family: 'Oswald', sans-serif; font-weight: bold; color: #000; font-size: 4vw;}
.engT2{font-family: 'Oswald', sans-serif; font-weight: bold; color: #000; font-size: 3.85vw;}
.engT3{font-family: 'Oswald', sans-serif; font-weight: bold; color: #626466; font-size: 6vw;}
.engS{ font-family: 'Open Sans', sans-serif; color: #626466;}

.flex_sb{display: flex; align-items: center; justify-content: space-between; color: #626466;}
.flex_jst{display: flex;}

.pd_bt20{padding-bottom: 0.4vw;}
.pd_top130{padding-top: 110px;}
.pd_titleTxt{padding: 0 0 10px 140px;}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
          outline: none;
          font-family: 'Noto Sans KR', sans-serif;
}

html {
  font-size: 62.5%;
}

body, html {
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */
}

ul, ol, li{
    list-style: none;
}

ul, ol, li, dl, dt, dd, p, h1, h2, h3, h3, h4, h5, h6, address, em, span, strong, div, header, nav, aside, section, article, footer, video, figure, figcaption {
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none !important;
  color: #000;
}

li {
  list-style: none;
}

table, tr, td, th {
  border-collapse: collapse;
}

th {
  font-weight: normal;
  text-align: left;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

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

legend {
  display: none;
}



.sectionbox{
  width: 100%; height: 100vh;

}

body{
 
}

/* scrollBar view & hide & custom*/
body::-webkit-scrollbar {
  width: 8px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
  height: 30%; /* 스크롤바의 길이 */
  background: #555; /* 스크롤바의 색상 */
  
  border-radius: 10px;
}

body::-webkit-scrollbar-track {
  background: rgba(58, 54, 54, 0.1);  /*스크롤바 뒷 배경 색상*/
}

/******************** popup ********************/
main{
  position: relative;
}
.dark{
  position: fixed; top: 0; 
  background: rgba(0,0,0,0.8);
  z-index: 501;
  width: 100%; height: 100%;
}

.pop{
  position: fixed; width: 550px; height: 550px; background: #fff;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; justify-content: center;
  align-items: center; text-align: center; z-index: 500;
  flex-direction: column; box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.pop .close{
  display: flex; position: absolute; display: flex; align-items: center;
  top: 20px; right: 15px; z-index: 1000; cursor: pointer;
}
.pop .close p{
  font-family: 'Jost'; font-size: 12px;
  padding-right:10px; cursor: pointer;
  
}
.pop .close p label{
  font-size: 12px; font-weight: 300;
}
.pop .close img{
  cursor: pointer; width: 13px;
}
.pop .imgsection{
  position: absolute; top: 60px;
  width: 100%; min-height: 300px;
  background-image: url(../img/_1088633.png);
  background-size: cover; background-position: 50% 50%;
}
.pop .imgsection .txt img{
  width: 450px; 
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%,-50%);
}
.pop .imgsection .txt .title, .pop .imgsection .txt .sub{
  font-weight: 500;
}
.pop .imgsection .txt .title{
  font-size: 50px;
}
.pop .imgsection .txt .sub{
  font-size: 43px; padding-top: 5px;
}
.pop .imgsection .btnBox{
  display: flex; 
  position: absolute; bottom: 40px;
  left: 50%; transform: translateX(-50%);
}
.pop .imgsection .btnBox button{
  margin: 0 10px; padding: 8px;
  width: 140px; border: none;
  background: #fff; 
  font-size: 15px;  font-family: "pretendard-Light";
}

.bottomInfo{
  position: absolute; bottom: 25px;
}
.bottomInfo p{
  color: #707070; font-size: 12px;
  line-height: 17px;
}
.bottomInfo .contact p{
  color: #000; padding-top: 20px;
  font-weight: 700; font-family: "pretendard-Light";
  letter-spacing: 0.1px; font-size: 13px;
}

.bottomInfo .contact ul{
  display: flex;
  padding-top: 5px;
}
.bottomInfo .contact ul li a{
  color: #000; font-size: 13px;
  font-weight: 300; letter-spacing: 1px;
}
.bottomInfo .contact ul li a span{
  font-size: 13px; padding: 0 3px 0 6px;
  font-weight: 700;


}


/******************** header ********************/


header{
  height: 80px;
  width: 100%;
  background: #fff;
  position: fixed; top: 0; left: 0;
  z-index: 1000;
  border-bottom: 1px solid #ccc;

}
header .logo{
  padding-left: 140px; 
  cursor: pointer;
}
header .logo img{
  width: 45px;
}
header nav.mobile{
  display: none;
}
header nav.pc{
  display: block;
}
header nav.pc{
  height: 100%;
}
header nav.pc > ul{
  height: 100%;
}
header nav.pc > ul > li{
  padding: 0 20px; 
  cursor: pointer; 
  height: 100%;
  display: flex; align-items: center;
  font-size: 20px;  font-weight: 500; color: #626466; 
  overflow: hidden;
}
header nav.pc > ul > li a{
  color: #000;
  font-weight: 200;
  font-size: 0.8vw;
  letter-spacing: 0.6px;
  font-family: 'Noto Sans KR', sans-serif;
}




header nav.pc > ul > li.active a{
  color: #000;
  position: relative;

}

header nav.pc > ul > li:last-child{
  padding-right: 40px;
}
header nav.pc > ul > li:hover a{



}
header nav.pc > ul > li > a{
  position: relative;

}
header nav.pc > ul > li > a:after{
  position: absolute; content: "";
  width: 0%; height: 1px; background: #000;
  right: 50%; bottom: -7px; transition: width 0.5s;
}
header nav.pc > ul > li > a:before{
  position: absolute; content: "";
  width: 0%; height: 1px; background: #000;
  left: 50%; bottom: -7px; transition: width 0.5s;
}


header nav.pc > ul > li:hover> a:after, header nav.pc > ul > li:hover> a:before{
   width: 50%; 
}


/******************** main ********************/


section#Main{
  padding: 110px 140px;
  height: calc(100vh + 80px);
  background-image: url(../img/mainImg.png);
  background-size: cover; background-position: 50% 50%;

  display: flex; justify-content: space-between; 
  position: relative;
}
section#Main .wrap{
  width: 100%; height: 100%;
  position: relative;
}
section#Main .linkBtn{
  display: flex; flex-direction: column;
  position: absolute; bottom: 130px; left: 140px;
}
section#Main .linkBtn button{
  width: 182px; height: 40px; color: #fff;
  background: #000; margin-bottom: 10px;
  transition: background, color 1s; font-size: 1vw;
}
section#Main .linkBtn button:hover{
  background: #fff; color: #000;
  border: 1px solid #000;
}


/******************** overview ********************/

section#Overview{
  width: 100%; height: 100vh;
  padding-top: 80px;
}
section#Overview .wrapOverview{

  display: flex;
  align-items: flex-start;
  width: 100%; height: 100%;

}
section#Overview .wrapOverview > div{
 /* width: 50%; */
 height: calc(100% - 114px);
 width: calc(50% - 68px);
}
section#Overview .wrapOverview > div.leftTxt{
  height: 100%;
  padding: 30px 140px 70px;
  display: flex; flex-direction: column; 
  justify-content: space-between; color: #626466;
}
section#Overview .wrapOverview > div.leftTxt p{ 
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.85vw;
  line-height: 2vw;
  font-weight: 300;
}
section#Overview .wrapOverview > div.rightPic{
  background-image: url(../img/overviewImg.png);  
  background-position-y: center;
  background-size: cover;
  margin-top: 40px;
}

/******************** videos ********************/

section#Videos{
  height: 100vh;
  position: relative; background: #000;
  display: flex; justify-content: center;

}
section#Videos .titleTxt{
  padding: 0 0 20px 40px;
}
section#Videos .videoPlayer{
  width: 100%; height: calc(100% - 120px);

}
.playerBtn{
  width: 100%; height: 100%;
  position: absolute; top: 0;
  
}
.playBtn{
  width: 100%; height: 100%; 
  position: absolute; left: 0; top: 0;
  cursor: pointer; z-index: 100;

}
.soundBtn{
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.5); cursor: pointer;
  position: absolute; bottom: -9px; left: -113px;
  border-radius: 20px; display: flex;
  align-items: center; justify-content: center;
  z-index: 200;
}
.soundBtn img{
  width: auto; height: 80px;
}

section#Videos .wrap{
  width: 75%; height: 70%;
  position: absolute; z-index: 300;
  top: calc(50%); transform: translateY(-50%); background: #000;
}

#wrapper_video{
  z-index: 50;
}


section#Videos #video{ 


}

/******************** visitors ********************/

section#Visitors{

}
section#Visitors .titleTxt{
 padding-bottom: 1.2rem;
}
section#Visitors .wrapVisitor{
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-end;
}
section#Visitors .wrapVisitor .leftPic{
  width: 50%; height: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;

}
section#Visitors .wrapVisitor .leftPic img{
  width: 25vw; height: 35.7vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  box-shadow: 1px 4px 4px 2px rgba(0,0,0,0.1);
}
section#Visitors .wrapVisitor .rightInfo{
  width: 50%; height: calc(100% + 80px);
  padding-right: 140px;
  display: flex;
  /* padding-top: 110px; */
  flex-direction: column;
  justify-content: center;
}
section#Visitors .wrapVisitor .rightInfo .toptit:last-child{
  border: none;
}
section#Visitors .wrapVisitor .rightInfo .toptit{
  border-bottom: 1px solid #707070;
  padding: 2rem 0;display: flex;
  align-items: flex-start;
}
section#Visitors .wrapVisitor .rightInfo .toptit .txt{
  width: 30rem; font-size: 1vw;
   color: #626466;
}
section#Visitors .wrapVisitor .rightInfo .toptit ul > li{
  font-size: 1rem; color: #626466;
}
section#Visitors .wrapVisitor .rightInfo .toptit ul > li > span{
  font-size: 0.75vw; color: #626466; width: 60px;
  padding-right: 10px;line-height: 24PX;
}
section#Visitors .wrapVisitor .rightInfo .toptit ul > li > p{
  font-size: 0.7vw; color: #626466; line-height: 20px;
}
section#Visitors .wrapVisitor .rightInfo .toptit ul > li > ul > li{
  font-size: 0.7vw; color: #626466; line-height: 20px;
}


/******************** floor plan ********************/

section#FloorPlan{
  background:  #d4dbe5; 
  position: relative; width: 100%; height: 100vh;

}
section#FloorPlan .leftCont{
width: 100%; height: 100vh;
position: absolute; padding-top: 80px; padding-left: 140px;
}
section#FloorPlan .leftCont .button{
  padding-top: 25px;
}
section#FloorPlan .leftCont .button li{
  font-size: 15px; color: #453E87;
  padding-top: 10px; cursor: pointer;
}
section#FloorPlan .leftCont .button li.active{
  font-weight: bold;
}
.btn_boothImg {
  display: flex; align-items: center;
  justify-content: center;
  height: 100vh; width: 100%; background: #fee;
}
.btn_boothImg img{
  width: 100%; height: 100%;
  background-size: cover; background-position: 50% 50%;
}

/******************** exhibitors ********************/
section#Exhibitors{
  background: #fff;
  height: calc(100vh + 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section#Exhibitors .wrapExhibitors{
  width: 100%; 
}
section#Exhibitors .wrapExhibitors .exArtist{
  width: 100%; height: 100%;
}
section#Exhibitors .wrapExhibitors .exArtist .top{ 
  margin: 0 140px; 
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #707070;
  padding-bottom: 7px;
}
section#Exhibitors .wrapExhibitors .exArtist .top .title{
  display: flex;
}
section#Exhibitors .wrapExhibitors .exArtist .top .title > li{
  padding-right: 15px;
}
section#Exhibitors .wrapExhibitors .exArtist .top .title > li > p{
  font-size: 1.2vw; font-weight: 500;
}
section#Exhibitors .wrapExhibitors .exArtist .top .title > li:first-child > p{
 color: #626466; padding: 5px 0;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item{
  width: 100%; height: 100%;
  padding: 15px 0;
  position: relative;
}

/* exhibitor slick-dot custom*/
section#Exhibitors .wrapExhibitors .exArtist .single-item .slick-dots{
  position: absolute; top: -1.2vw; z-index: 10;
  right: 170px; display: flex; align-items: center;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .slick-dots li{
  width: 0.5vw; height: 0.5vw;
  margin: 0.2vw; cursor: pointer;
  background: #000; border-radius: 1vw;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .slick-dots li.slick-active{
  background: #fff; background: #000; width: 1.3vw; height: 0.6vw;
  animation: longBtn 0.5s ease forwards;
}

@keyframes longBtn {
  0%{
    width: 0.5vw;
 
  }
  100%{
    width: 1.3vw;
 
  }
}

section#Exhibitors .wrapExhibitors .exArtist .single-item .slick-dots li button{
  font-size: 0; cursor: pointer; 
}

section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider{
  width: 100%; height: auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; padding: 5px 100px;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box{
  width: calc(20% - 80px);
  height: 16vw;
  margin: 15px 20px;
  transition: border-radius 0.5s;
  cursor: pointer;
  overflow: hidden;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box:hover{
 border-radius: 15px 15px 0 0;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box:hover .cont{
 transform: scale(1.04); transition: transform 0.5s;  display: flex; align-items: center; justify-content: center;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box .cont{
  width: 100%; height: 100%; background-size: cover; background-position: 50% 50%;
  position: relative; transition: transform 0.5s; transition: border-radius 0.5s;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box .bottom{
  position: absolute; background: #fff; bottom: 0; transition: transform 0.7s,  border-radius 0.7s; 
  width: 100%; height: 47%; padding: 20px; 
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box .bottom a{
  font-size: 1vw; font-family: 'Oswald', sans-serif; position: relative;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box .bottom p.name{
  font-size: 0.7vw;  color: #707070; padding-top: 5px; font-weight: 500; 
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box p.region{
  position: absolute; bottom: 30px; font-weight: 400;
  font-size: 0.7vw; color: #707070; left: 20px;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box:hover .bottom{
  transform: translateY(40px); border-radius: 30px 30px 0 0; 
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .lineTwo:hover .bottom{
  transform: translateY(18px); transition: transform 0.7s;
}
section#Exhibitors .wrapExhibitors .exArtist .single-item .ArtistSlider .box:hover .bottom p.name{
  opacity: 0; transition: opacity 0.2s;
}

section#Exhibitors .slick-prev{
  top: 30%; position: absolute; left: 140px; z-index: 10;

}
section#Exhibitors .slick-next{
  top: 30%; position: absolute; right: 140px; z-index: 10;

}




/******************** press ********************/

section#Press{
  background: #F2F2F2;
  position: relative;
}
section#Press ul{
  padding: 120px 300px 40px 300px;
}
section#Press ul > li.flex_jst{
  display: flex; justify-content: space-between;
  font-size: 1.6rem; line-height: 20px;
  font-weight: 500;
  border-bottom: 1px solid #707070; margin-bottom: 40px;
}
section#Press ul > li p, section#Press ul > li span{
  color: #626466; padding-left: 15px;
}

section#Press .slick-dots{
  position: absolute;
  left: 50%; display: flex; 
  transform: translateX(-50%);
  bottom: 8%;
}

section#Press .slick-dots li{
  padding-right: 20px;
}

section#Press .slick-dots li.slick-active button{
 font-weight: bold;  
}

section#Press .slick-prev{
  top: 48%; position: absolute; left: 140px; z-index: 10;
  cursor: pointer;

}
section#Press .slick-next{
  top: 48%; position: absolute; right: 140px; z-index: 10;
  cursor: pointer;

}
.pressSlider li > a{
  font-weight: 300;
}



/******************** contact ********************/

section#Contact {
  background: #FFE6DE;
  position: relative;
  height: 120vh;
}

#ContactWrap{
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 80px;
  justify-content: center;
}
#ContactWrap .inner{
  display: flex;
}
#ContactWrap .inner h2.title{
  font-size: 100px;
  font-weight: bold;
}
#ContactWrap .inner .optionBtn button{
  width: 97px; height: 65px;
  color: #626466; font-size: 20px;
  background: #fff; border-radius: 20px;
  margin: 25px 10px;
}
#ContactWrap .inner .info{
  display: flex; flex-direction: column;
}
#ContactWrap .inner .info p{
  font-size: 19px;
  padding: 2px;
}
#ContactWrap .inner .info a{
  font-size: 15px; font-weight: 300;
  padding: 2px;
}
#ContactWrap .inner .info a span{
  font-weight: bold; margin-right: 4px;
}
.contactTitle{
  margin-right: 80px;
}
.formField .inputBox{
  display: flex; flex-direction: column;
}
.formField .inputBox input{
  width: 600px; height: 65px;
  border-radius: 20px; background: #fff;
  color: #626466; font-size: 15px;
  padding: 20px; border: none;
  margin: 10px 0;
}
.formField textarea{
  width: 600px; height: 200px;
  border-radius: 20px; background: #fff;
  color: #626466; font-size: 15px;
  resize: none; border: none; margin-top: 20px;
  padding: 20px;
}
.submitBox{
  text-align: right; margin-top: 20px;
}
.submitBox button{
  width: 180px; height: 40px;
  background: #000; color: #fff;
}
.successField{
  width: 600px; height: 200px;
  background: #fff; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  position: absolute; 
  display: flex; border-radius: 20px;
  align-items: center; flex-direction: column; justify-content: center;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.1);
}
.successField p{
  font-size: 15px;
  margin-bottom: 40px;
}
.successField button{
  width: 150px; height: 30px; 
  background: #000; color: #fff;
}
/******************** organizer ********************/

#Organizer{
  width: 100%; height: auto;
  position: relative;
}
.organ_tit{
  font-size: 2rem; font-weight: 500;
  color: #707070; padding-bottom: 18px;
}
.organ_sub{
  font-size: 1rem; color: #707070;
}
#Organizer .listwrap{
  padding: 30px 140px; display: flex;
}
#Organizer .listwrap ul{
  padding-right: 55px;
}
#Organizer .listwrap ul > li{
  display: flex;
}
#Organizer .listwrap ul > li > ul > li > h1{
  font-size: 1.7rem;color: #000;
  padding-bottom: 10px;
}
#Organizer .listwrap ul > li > ul > li > p{
  font-size: 1.3rem;color: #707070;
  padding-bottom: 40px;
}
#Organizer .bottom{
  width: 60%; height: auto;
  display: flex; margin-left: 140px;
}
#Organizer .bottom ul{
  width: auto; padding-bottom: 40px;
}
#Organizer .bottom p{
  font-size: 1.3rem;
}
#Organizer .bottom p.fzb{
  font-size: 1.7rem; padding-top: 7px;
  font-weight: 600;
}
#Organizer .orgaLogo{
  position: absolute; bottom: 40px; right: 150px;

}


/******************** footer ********************/

footer{
  width: 100%; height: 480px;
  padding: 35px 150px 35px 140px;
  background: #000;
}
footer .top{
  display: flex; justify-content: space-between;
}
footer .top nav{
  display: flex;
}
footer .top nav > ul {
  padding-right: 179px;
}
footer .top nav > ul > li{
  font-size: 20px;  padding-bottom: 20px;
  color: #fff; cursor: pointer;
}
footer .top nav .IconWrap > ul > li{
  padding-right: 15px; cursor: pointer;
}
footer .bottom{
  display: flex; justify-content: space-between;
  height: 102px; margin-top: 188px;
}
footer .bottom .logo_info{
  display: flex;
}
footer .bottom .logo_info .info{
  color: #fff;
}
footer .bottom .logo_info .info h3{
  font-size: 1.7rem; padding-bottom: 5px;
}
footer .bottom .logo_info .info p{
  font-size: 12px; line-height: 18px;
}
footer .bottom .logo_info .info a{
  font-size: 12px; color: #fff;
}
footer .bottom .logo_info .info p a{
  color: #fff; margin-left: 4px;
}
.copy{
  display: flex; align-items: flex-end;
}
.copy ul{
  display: flex;
}
.copy ul > li{
  padding-right: 50px;
}
.copy ul > li:nth-child(4){
  position: relative; padding-right: 100px;
}
.copy ul > li:nth-child(4):after{
  position: absolute; content: "|";
  color: #fff;left: 160px;
}
.copy ul > li:nth-child(5){
  padding-right: 0;
}
.copy ul > li > a{
  font-size: 12px; color: #fff;

}
.copy ul > li > p{
  font-size: 12px; color:#fff;
  padding-top: 2px;
}


/* 하단 고정이미지 */

.fixedImg img.circle{
  position: fixed;
  bottom: 20px; right: 20px; cursor: pointer;
}
.fixedImg img.arrowTop{
  position: fixed;
  bottom: 55px; right: 44px;
  width: 30px; 
  animation: movingArrow 1s 1.3s infinite ease alternate;
}
.fixedImg img.arrowBottom{
  position: fixed;
  bottom: 44px; right: 46px;
  width: 26px;
  animation: movingArrow 1s 1.2s infinite ease alternate;  
}
.fixedImg img.circle{
  animation: rotate_image 6s linear infinite; transform-origin: 50% 50%;
  width: 80px; height: 80px; 
}

@keyframes rotate_image{
  100% {
      transform: rotate(360deg);
  }
}

@keyframes movingArrow{
 0%{
  opacity: 0;
  transform: translateY(1px);
 
 }
 100%{
  opacity: 1;
  transform: translateY(-3px);

 }

}