@charset 'utf-8';
/* common */
:root{
	--baseF: 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--out: "Outfit", sans-serif; 
	--pre: 'Pretendard', sans-serif;
	--mainC: #014190; 
	--mainC2: #8EC31F; 
	--vh: 100%;
}

.w1600{ max-width:1600px; margin: 0 auto; width: 100%;}
.w1700{ max-width:1700px; margin: 0 auto; width: 100%;}
.out{ font-family: var(--out) ;}

figure.fitBox{ position: relative; width: 100%; height: 100%; overflow: hidden;}
figure.fitBox img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width: 100%; min-height:100%; object-fit: cover;}

.titleBox.ani > *{ overflow: hidden;}
.titleBox.ani span{ transform:  translateY(100%); opacity: 0; font-family: var(--out);}
.titleBox.ani.aos-animate span{ display:block; animation: fadeUp both 1.2s; }

#topBtn{ position: relative; position: fixed; bottom: 50px; right: 40px; z-index: 1000; width: 60px; height: 60px; background: transparent; border-radius:50%; display:flex; justify-content:center; align-items:center; box-shadow:0 0 0 1px inset #999; transition:all 0.5s;  }
#topBtn img{ position: relative; z-index: 5; filter: invert(0.3); transition:all 0.5s; }
#topBtn:after{ position: absolute; content:''; display:block; top: 0; left: 0; width: 100%; height: 100%; border-radius:50%; background: linear-gradient(267deg, #3E76BB 1.85%, #1DA7D2 94.39%);
opacity: 0; transition:all 0.7s; }
#topBtn:hover:after{ opacity: 1; }
#topBtn:hover img{ filter: invert(0)}

#topBtn.on{ bottom: 40%;}

#gnb > li.hidden{ display:none !important; }

.tl{ text-align: left; }

/* header */
header{ position: relative; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition:all 0.5s; opacity: 1; }
header .logo svg path{ transition:all 0.5s; }
header .headerBox{ position: relative; margin: 20px 40px 0; padding: 0 50px; height: 100px; display:flex; align-items:center; justify-content:space-between; }
header .headerBox:before{ content:''; display:block; width: 100%; height: 100%;position: absolute; top: 0; left: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.60); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); backdrop-filter: blur(17px); z-index: -1; opacity: 0; transition:all 0.7s;  }
header .headerBox nav{ height: 100%; margin-right: 70px;}
header .headerBox .wrapBox,
header .headerBox #gnb{ display:flex; height: 100%; }
header .headerBox #gnb > li{ position: relative; height: 100%; }
header .headerBox #gnb > li > a{ position: relative; display:flex; justify-content:center; align-items:center; padding: 0 50px; height: 100%; font-family: var(--out); color:#fff; font-size:18px; font-weight: 600; text-transform: uppercase; transition:all 0.5s; }
header .headerBox #gnb > li > a:after{ content:''; display:block; width: 6px; height: 6px; border-radius:50%; background: var(--mainC2); position: absolute; bottom: 18px; left: 50%; transform:translateX(-50%); opacity: 0; transition:all 0.5s; }
header .headerBox #gnb > li .depth2{ position: absolute; transform:translateX(-50%); top: calc(100% + 10px); left: 50%; text-align: center; width: 230px; border-radius:10px; overflow: hidden; border: 1px solid rgba(1, 65, 144, 0.30); opacity: 0; visibility: hidden; transition:all 0.7s;}
header .headerBox #gnb > li .depth2 li a{ display:flex; justify-content:center; align-items:center; height: 55px; backdrop-filter: blur(17px);}
header .headerBox #gnb > li .depth2 > li > a{ font-weight: 600; color:#333; background: #fff; }
header .headerBox #gnb > li .depth2 > li:not(:first-child) > a{ margin-top: -1px; border-top: 1px solid rgba(1, 65, 144, 0.30); }
header .headerBox #gnb > li .depth3 li a{ background: var(--mainC); color:#fff; letter-spacing: -0.32px; margin-top: -1px;}
header .headerBox #sideBox{ display:flex; align-items:center; }
header .headerBox #sideBox .loginBox{ position: relative; margin: 0 35px; cursor:pointer; display: flex;  justify-content: center; align-items: center; height: 100%; }
header .headerBox #sideBox .loginBox figure{ position: relative; }
header .headerBox #sideBox .loginBox figure:after{ content:''; display:block; position: absolute; transform:translateX(-50%); left: 50%; top: calc(100% + 15px); width: 6px; height: 6px; border-radius:50%; background: var(--mainC2); z-index: 5; opacity: 0; transition:all 0.5s; }
header .headerBox #sideBox .loginBox .wrapBox{ position: absolute; transform:translateX(-50%); left: 50%; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; transition:all 0.7s; }
header .headerBox #sideBox .loginBox ul{ text-align: center; padding: 15px 20px; border-radius: 10px; border: 1px solid rgba(1, 65, 144, 0.30); background: #FFF; backdrop-filter: blur(17px);}
header .headerBox #sideBox .loginBox ul li:not(:last-child){ margin-bottom: 15px; }
header .headerBox #sideBox .loginBox ul li a{ color:#111; font-size:16px; font-weight: 500;  }

header .headerBox #sideBox #menuBtn{ position: relative; width: 30px; height: 20px; cursor:pointer; display: flex; justify-content: space-between; align-items: center; flex-direction:column; }
header .headerBox #sideBox #menuBtn span,
header .headerBox #sideBox #menuBtn:after,
header .headerBox #sideBox #menuBtn:before{ content:''; width: 26px; height: 2px; background: #fff; display:block; transition:all 0.3s, background 0.3s; }

header.off .logo svg path{ fill:white; }

/* hover */
header .headerBox.on:before{ background: #fff;}
header .headerBox.on:before,
header .headerBox.active:before{ opacity: 1;}
header .headerBox.on #gnb > li > a,
header .headerBox.active #gnb > li > a{ color:#222; }
header .headerBox.on #gnb > li:hover > a,
header .headerBox.active #gnb > li:hover > a{ color:var(--mainC); }
header .headerBox.on #sideBox img,
header .headerBox.active #sideBox img{ filter:invert(1); }
header .headerBox.on #sideBox #menuBtn span,
header .headerBox.on #sideBox #menuBtn:after,
header .headerBox.on #sideBox #menuBtn:before,
header .headerBox.active #sideBox #menuBtn span,
header .headerBox.active #sideBox #menuBtn:after,
header .headerBox.active #sideBox #menuBtn:before{ background: #111; }
header .headerBox #sideBox .loginBox:hover .wrapBox{ opacity: 1;  visibility: visible; }
header .headerBox #sideBox .loginBox:hover figure:after{ opacity: 1;}
header .headerBox #gnb > li:hover > a:after{ opacity: 1;}
header .headerBox #gnb > li:hover .depth2{ opacity: 1;  visibility: visible;}

/* allMenu */
#allWrap{ position: relative; position: fixed; top: 0; left: 100%; width: 100%; height: 100vh; z-index: 10000; background: #fff; transition:all 0.7s;  }
#allWrap.on{ left: 0; }
#allWrap .bg{ position: absolute; bottom: 0; right: 0;}
#allWrap .allTop{ margin: 20px 80px 40px; display:flex; align-items:center; }
#allWrap .allTop .closeBtn{ cursor:pointer; }
#allWrap .allTop .logo{ flex-grow: 1; text-align: center; }
#allWrap #allGnb #gnb > li{ display:flex; padding: 50px 0;}
#allWrap #allGnb #gnb > li:not(:last-child){ border-bottom:1px solid #E6E6E6; }
#allWrap #allGnb #gnb > li > a{ font-family: var(--out); color:#111; font-weight: bold; min-width:290px; margin-right: 190px; font-size:50px; text-transform: uppercase;}
#allWrap #allGnb #gnb .depth2{ display:flex; align-items: center;}
#allWrap #allGnb #gnb .depth2 > li:not(:last-child){ margin-right: 90px;}
#allWrap #allGnb #gnb .depth2 > li > a{ color:#333; font-size:24px; font-weight: 600; transition:all 0.5s; }
#allWrap #allGnb #gnb .depth3{ margin-top: 20px;}
#allWrap #allGnb #gnb .depth3 li:not(:last-child){ margin-bottom: 18px; }
#allWrap #allGnb #gnb .depth3 li a{ color:#777; font-size:18px; letter-spacing: -0.36px; transition:all 0.5s; }
/* hover */
#allWrap #allGnb #gnb .depth2 > li:hover > a{ color:var(--mainC2); }
#allWrap #allGnb #gnb .depth3 li:hover a{ color:#111; }

/* footer */
footer .footer_in{ background: #111; }
footer .footer_in .ctnBox{ padding: 60px 0 55px; display:flex; justify-content:space-between; }
footer .footer_in .ctnBox .leftBox{}
footer .footer_in .ctnBox .leftBox .logo{ margin-bottom: 45px;}
footer .footer_in .ctnBox .leftBox ul{ display:flex; flex-wrap:wrap; gap:0 40px; }
footer .footer_in .ctnBox .leftBox ul.po{ font-family:var(--Poppins); margin-top: 25px;}
footer .footer_in .ctnBox .leftBox ul li{ display:flex; align-items:center; gap: 10px; color:#fff; }
footer .footer_in .ctnBox .leftBox ul li span{ color:#666; font-weight: 600;}
footer .footer_in .ctnBox .rightBox{ display:flex; flex-direction: column; justify-content:space-between; align-items:flex-end; }
footer .footer_in .ctnBox .rightBox .linkBox{ display:flex; }
footer .footer_in .ctnBox .rightBox .linkBox button{ height: 60px; background: #111; color:#fff; border:1px solid #474747; border-radius:10px;}
footer .footer_in .ctnBox .rightBox .linkBox button.policyBtn{ width: 185px; margin-right: 15px; transition:all 0.5s; letter-spacing: 1.12px;}
footer .footer_in .ctnBox .rightBox .linkBox button.policyBtn i{ font-size:10px; vertical-align: super;}
footer .footer_in .ctnBox .rightBox .linkBox button.policyBtn:hover{ background:var(--mainC2); }
footer .footer_in .ctnBox .rightBox .linkBox .familyBox{ position: relative; z-index: 5;}
footer .footer_in .ctnBox .rightBox .linkBox .familyBox > button{ width: 270px;  padding: 0 30px; display:flex; justify-content: space-between; align-items:center;}
footer .footer_in .ctnBox .rightBox .linkBox .familyBox > button img{ transition:all 0.5s; }
footer .footer_in .ctnBox .rightBox .linkBox .familyBox > button.on{ border-radius:0 0 10px 10px; }
footer .footer_in .ctnBox .rightBox .linkBox .familyBox > button.on img{ transform:rotate(180deg); }
footer .footer_in .ctnBox .rightBox .linkBox .familyBox ul{ position: absolute;  bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); border:1px solid #474747;  border-bottom:none;border-radius:10px 10px 0 0; overflow: hidden; width: 100%; display:none; }
footer .footer_in .ctnBox .rightBox .linkBox .familyBox ul li button{ border-radius:0; border:none; border-bottom:1px solid #474747; padding: 0 30px; width: 100%;text-align: left;  transition:all 0.5s; }
footer .footer_in .ctnBox .rightBox .linkBox .familyBox ul li:hover button{ background: #222;}
footer .footer_in .copyBox{ background: #1B1B1B; color:#666; line-height: 50px; height: 50px; text-align: right;}

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:18px;	line-height: 1.5; word-break:break-all; }
.privacy h2 { font-weight:bold; color:#000; text-align: left; margin:0 0 80px; text-align: center; }
.privacy h3 { display:inline-block; vertical-align:bottom;}
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:18px;color:var(--mainC); font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:18px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:17px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

/* intro */
#intro{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: #fff; }
#intro .capBox{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #fff; display:flex; justify-content:center; align-items:center; }
#intro .capBox figure{ position: relative; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path 2s 1.2s, transform 1s 1.2s, opacity 1s 1.2s; opacity: 1; } 
#intro .capBox figure img{ position: relative; transform:translateY(100%); transition:all 1s; }
#intro .capBox.active figure{ clip-path: inset(0 100% 0 0); transform:translateX(-60%); opacity: 0;}
#intro .capBox.active figure img{ transform:translateY(0%); }
#intro .content{ position: relative; width: 100%; height: 100%; background: #0065CB; padding: 40px; clip-path: circle(280px at 50% 50%); transition:all 1.2s; }
#intro .content.active{ clip-path: circle( 100% at 50% 50%);}
#intro .content .bgBox{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#intro .content .bgBox:after{ content:''; }
#intro .content .bgBox .circle{ position: absolute; opacity: 0.5; width: max-content; }
#intro .content .bgBox .circle1{ top: -30%; left: -15%; transform-origin: center 600px; animation: introMove 20s infinite;}
#intro .content .bgBox .circle2{ top: -10%; left: -15%; transform-origin: center 600px; animation: introMove 30s infinite;}
#intro .content .bgBox .circle3{ top: 15%; left: 15%; transform-origin: center 20vh; animation: introMove 25s 5s infinite;}
#intro .content .ctnBox{ position: relative; background: rgba(255,255,255,0.06); width: 100%; height: 100%; border-radius:40px; display: flex; flex-direction: column; align-items: flex-end; 
justify-content:flex-end; padding: 0 90px 190px; }
#intro .content .ctnBox .bgTxt{ position: absolute; bottom:0; left: 0; }
#intro .content .ctnBox .txtBox .btnBox{ display:flex; justify-content:flex-end; align-items:center; margin-bottom: 50px; }
#intro .content .ctnBox .txtBox .btnBox .btn{ position: relative; width: 200px; height: 60px; border:1px solid #fff; border-radius:50px; color:#fff; display:flex; justify-content:center; align-items: center; cursor:pointer; transition:background 0.5s; font-family: var(--pre); font-weight: 500;}
#intro .content .ctnBox .txtBox .btnBox .btn p{ position: relative; overflow: hidden; height: 26px;}
#intro .content .ctnBox .txtBox .btnBox .btn:not(:last-child){ margin-right: 10px;}
#intro .content .ctnBox .txtBox .btnBox .btn span{ position: relative; transition:all 0.7s; }
#intro .content .ctnBox .txtBox .btnBox .btn span.on{ top: 0;}
#intro .content .ctnBox .txtBox .btnBox .btn span.off{ position: absolute; transform:translateY(100%); }
#intro .content .ctnBox .txtBox .btnBox .btn:hover{ background: #fff; color:var(--mainC); }
#intro .content .ctnBox .txtBox .btnBox .btn:hover span.on{ top: -100%;}
#intro .content .ctnBox .txtBox .btnBox .btn:hover span.off{ transform:translateY(0); }
#intro .content .ctnBox .txtBox .titleBox span{ display:block; font-family: var(--pre); text-align: right; font-weight: 200; color:#fff; line-height: 1.5;}
#intro .content .ctnBox .txtBox .titleBox h1:last-child span{ font-weight: 600;}
/*#intro .content .ctnBox .txtBox .titleBox span{ display:block; animation: fadeUp both 1.2s; }*/
#intro .content .ctnBox .popWrap > div{ position: relative; position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; background: #fff; border-radius: 35px; font-family: var(--pre); display:none; }
#intro .content .ctnBox .popWrap > div .close{ position: absolute; top: 40px; right: 40px; cursor:pointer; }
#intro .content .ctnBox .popWrap .loginPop{ min-width:900px; padding: 100px 145px; }
#intro .content .ctnBox .popWrap .loginPop .logo{ text-align: center; }
#intro .content .ctnBox .popWrap .loginPop .inputBox{ margin: 40px 0 50px ;}
#intro .content .ctnBox .popWrap .loginPop .inputBox > div{ display:flex; align-items:center; width: 100%; height: 70px; border:1px solid #EFEFEF; border-radius:10px; padding: 0 30px; }
#intro .content .ctnBox .popWrap .loginPop .inputBox > div:not(:last-child){ margin-bottom: 10px;}
#intro .content .ctnBox .popWrap .loginPop .inputBox p{ position: relative; color:#222; font-weight: 500; letter-spacing: -0.34px; min-width:80px;  flex-shrink:0; }
#intro .content .ctnBox .popWrap .loginPop .inputBox p:after{ content:''; display:block; position: absolute; transform:translateY(-50%); top: 50%; right: 0; width: 1px; height: 10px; background: #ddd;}
#intro .content .ctnBox .popWrap .loginPop .inputBox i{ flex-shrink:0; margin-top: 3px; cursor:pointer; }
#intro .content .ctnBox .popWrap .loginPop .inputBox input{ color:#222; font-weight: 500; height: 100%; padding: 0 20px; width: 100%; }
#intro .content .ctnBox .popWrap .loginPop .inputBox input::placeholder{ color:#bbb; font-weight: 400;}
#intro .content .ctnBox .popWrap .loginPop .btnBox{ margin-bottom: 30px; display:flex; justify-content:center; }
#intro .content .ctnBox .popWrap .loginPop .btnBox button{ width: 170px; height: 50px; border-radius:50px; font-weight: 500; background: #F5F5F5; color:#bbb; }
#intro .content .ctnBox .popWrap .loginPop .btnBox button.on{ color:#fff; background: #0071D9; }
#intro .content .ctnBox .popWrap .loginPop .btnBox button:not(:last-child){ margin-right: 10px;}
#intro .content .ctnBox .popWrap .loginPop .bTxt{ color:#666; font-weight: 300; text-align: center; }
#intro .content .ctnBox .popWrap .joinPop{ min-width:1200px; max-height:760px; height: 100%; padding: 70px 100px; }
#intro .content .ctnBox .popWrap .joinPop .scrollWrap{ overflow-y:scroll; height: 100%; }
#intro .content .ctnBox .popWrap .joinPop .scrollWrap::-webkit-scrollbar{ display:none; }
#intro .content .ctnBox .popWrap .joinPop .titleBox{ text-align: center; color:#222; font-weight: 300; margin-bottom: 50px;}
#intro .content .ctnBox .popWrap .joinPop .titleBox .title{ color:#222; font-weight: bold; margin-bottom: 20px;}
#intro .content .ctnBox .popWrap .joinPop .inputBox{ border-top:1px solid #000; }
#intro .content .ctnBox .popWrap .joinPop .inputBox > div{ position: relative; display:flex; align-items:center; padding: 10px; border-bottom:1px solid #eee; }
#intro .content .ctnBox .popWrap .joinPop .inputBox > div:last-child{ padding: 20px 10px;}
#intro .content .ctnBox .popWrap .joinPop .inputBox .title{ min-width:200px; padding-left: 10px; color:#222;  }
#intro .content .ctnBox .popWrap .joinPop .inputBox .title .star{ color:#0071D9; }
#intro .content .ctnBox .popWrap .joinPop .inputBox i{ position: absolute; transform:translateY(-50%); top: 50%; right: 40px; cursor:pointer; }
#intro .content .ctnBox .popWrap .joinPop .inputBox input{ width: 100%; height: 60px; padding: 0 20px; border:1px solid #EFEFEF; border-radius:10px;  color:#222; font-weight: 500; }
#intro .content .ctnBox .popWrap .joinPop .inputBox input::placeholder{ color:#bbb; font-weight: 400;}
#intro .content .ctnBox .popWrap .joinPop .inputBox .wrapBox{ display:flex; align-items:center; }
#intro .content .ctnBox .popWrap .joinPop .inputBox .wrapBox input{ width: 150px; }
#intro .content .ctnBox .popWrap .joinPop .inputBox .wrapBox span{ display:block; width: 10px; height: 1px; background: #ddd; margin: 0 10px;}
#intro .content .ctnBox .popWrap .joinPop .policyBox{ height: 260px; padding: 30px; padding-right: 20px; border:1px solid #EFEFEF; border-radius:10px; }
#intro .content .ctnBox .popWrap .joinPop .policyBox .scrollBox{ overflow-y:scroll; height: 100%; }
#intro .content .ctnBox .popWrap .joinPop .policyBox .scrollBox::-webkit-scrollbar{ width: 5px; border-radius:50px; background: rgba(34,34,34,0.05); }
#intro .content .ctnBox .popWrap .joinPop .policyBox .scrollBox::-webkit-scrollbar-thumb{ border-radius:50px; background: rgba(34,34,34,0.2); }
#intro .content .ctnBox .popWrap .joinPop .policyBox .privacy{ padding: 0 ; color:#999; font-weight: 300; padding-right: 25px; margin-top: -15px;}
#intro .content .ctnBox .popWrap .joinPop .policyBox .privacy *{ font-size:16px !important;}
#intro .content .ctnBox .popWrap .joinPop .policyBox .privacy > dl > dt,
#intro .content .ctnBox .popWrap .joinPop .policyBox .privacy .sTxt h3{ font-weight: 400; color:#666; }
#intro .content .ctnBox .popWrap .joinPop .chkBox input { display: none;}
#intro .content .ctnBox .popWrap .joinPop .chkBox{ display:flex; justify-content:flex-end; } 
#intro .content .ctnBox .popWrap .joinPop .chkBox label { display: inline-flex; align-items: center; cursor: pointer; margin-top: 20px;}
#intro .content .ctnBox .popWrap .joinPop .chkBox label span { position: relative; display: inline-block; width: 18px; height: 18px; border: 2px solid #E9E9E9; border-radius: 50%; background: #fff; flex-shrink: 0;}
#intro .content .ctnBox .popWrap .joinPop .chkBox label span:after{ content: ''; display: block; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #0071D9; opacity: 0; transition:all 0.5s; }
#intro .content .ctnBox .popWrap .joinPop .chkBox label p { color: #222; margin-left: 5px; font-weight: 300;}
#intro .content .ctnBox .popWrap .joinPop .chkBox input:checked + label span{ border:2px solid rgba(0,113,217,0.5); }
#intro .content .ctnBox .popWrap .joinPop .chkBox input:checked + label span:after { opacity: 1; }
#intro .content .ctnBox .popWrap .joinPop .infoBox{ display:flex; justify-content:space-between; margin-top: 110px; }
#intro .content .ctnBox .popWrap .joinPop .infoBox ul{ margin-bottom: 20px;}
#intro .content .ctnBox .popWrap .joinPop .infoBox ul li{ color:#222; font-weight: 300; }
#intro .content .ctnBox .popWrap .joinPop .infoBox ul li:not(:last-child){ margin-bottom: 10px;}
#intro .content .ctnBox .popWrap .joinPop .infoBox ul li img{ margin-right: 5px;}
#intro .content .ctnBox .popWrap .joinPop .infoBox .txt{ color:#999; font-weight: 300;}
#intro .content .ctnBox .popWrap .joinPop .infoBox button{ transition:all 0.5s; width: 200px; height: 60px; border-radius:50px; background: #F5F5F5; color:#0071D9; font-weight: 500;}
#intro .content .ctnBox .popWrap .joinPop .infoBox button:hover{ color:#fff; background: #0071D9;}

/* animation */
@keyframes fadeUp {
	0%{transform:  translateY(100%); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}

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

@keyframes scrollBar{
	0%{ height: 0; }
	100%{ height: 100%; }
}

@keyframes introMove {
    to {
        -webkit-transform: translateZ(5px) rotate(1turn);
        -moz-transform: translateZ(5px) rotate(1turn);
        transform: translateZ(5px) rotate(1turn); 
    }
}