*{margin:0;padding:0;-webkit-text-size-adjust:none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
a{text-decoration:none;margin:0;padding:0;}
a:hover,a:focus,a:link,a:visited{text-decoration:none;}

ul, li{list-style:none;}
img{border:none;max-width:100%;height:auto;}
a img {border:none;max-width:100%;height:auto;}


html {
  margin: 0;padding:0;
  background:#ffffff;
  background-attachment: fixed;
  background-size: auto 100%;
    background-repeat: no-repeat;
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     -ms-text-size-adjust: none;
     -o-text-size-adjust: none;
}

body {margin:0px;padding:0px;overflow-x:hidden;}


/* 데스크탑 */

@media only screen and (min-width : 1320px) {

#mainImg{background-color:#00043b;}

.Menu{position:absolute;width:100%;height:100%;}

.Hambeger-icon{display:none;position:absolute;width:70px;right:30px;top:30px;z-index:5;}
.Hambeger-icon span {height:7px;width:70px;background:black;display:block;margin: 7px 0px 7px 0px;transition: 0.4s ease-in-out;transform: none;border-radius:5px;}

input.hamburger-checkbox {position: absolute;z-index: 10;top: 10px;right: 20px;width: 40px;opacity: 0;height: 25px;display:none;}
#openmenu:checked ~ .menu-pane {
  width: 450px;
  right: 0;
  transform: translateX(0px);
  transition: 0.6s ease-in-out;
}
#openmenu:checked ~ .body-text {
display: none;
}
#openmenu:checked ~ .Hambeger-icon{
  position:fixed;
}
#openmenu:checked ~ .Hambeger-icon span:nth-of-type(1) {
  transform: translate(0%, 200%) rotate(-45deg);
  background-color: black;
}
#openmenu:checked ~ .Hambeger-icon span:nth-of-type(2) {
  transform: scale(0,0);
}
#openmenu:checked ~ .Hambeger-icon span:nth-of-type(3) {
  transform: translate(0%, -190%) rotate(45deg);
  background-color: black;
}

div.menu-pane {
  background-color: #555555;
  position: fixed;
  transform: scale(0,0) translateX(100vw);
  top: 0;
  right: 0;
  width: 0px;
  height: 100vh;
  transition: 0.6s ease-in-out;
  z-index:4;
}

div.menu-pane ul.dump{width:100%;height:120px;padding:0;}
div.menu-pane ul{width:100%;padding:10px;}
div.menu-pane ul li{width:100%;padding:10px 0px 10px 0px;}
div.menu-pane ul li span{font-size:200%;color:#F7F8E0;}


#HeadDump{margin:0 auto;padding:0;width:100%;height:100px;}
#Head{position:fixed;width:100vw;height:120px;top:0;z-index:999;background:transparent;border-bottom:1px solid transparent;}
#Head span.LogoLink{position:absolute;left:30px;top:20px;z-index:6;cursor:pointer;}
.Logo{width:100%;margin-top:15px;}

.Head_Menu{position:absolute;margin:0 auto;padding:0;;width:100%;}
.Head_Menu >ul{width:100%;padding:0;display:flex; justify-content:flex-end;}
.Head_Menu > ul >li{float:left;text-align:center;width:180px;cursor:pointer;line-height:115px;}
.Head_Menu > ul > li::after {content:""; display: block; border-bottom: 3px solid #0d6efd; transition: all 250ms ease-out; left: 50%;width:0px;}
.Head_Menu > ul > li span:hover{color:#0d6efd;}
.Head_Menu > ul > li:hover::after {transition: all 250ms ease-out; left: 0%;width:180px;}
.Head_Menu>ul>li >span{font-family:Gothic;font-size:1em;font-weight:bold;color:white;padding:0 25px;}
.subHeadMenu{width:100%;display:none;position:absolute;padding:3px 0;;}
.Head_Menu > ul > li:hover >ul{display:block;}
.subHeadMenu li{text-align:center;width: 180px;padding:10px 0;background:white;line-height:30px;}
.subHeadMenu li span{color:black;font-weight:bold;}

#Main{text-align:center;margin-bottom:0 auto;padding:0;width:100vw;}
#Main ul.MiddleBox{position:absolute;float:left;text-align:center;margin:0 auto;padding:0px 20vw 0px 20vw;width:100vw;top:30vw;}
#Main ul.MiddleBox li{position:absolute;margin:0 auto;padding:10px;width:500px;height:300px;}
#Main ul.MiddleBox li.tl{top:0;right:50%;}
#Main ul.MiddleBox li.tr{top:0;left:50%;}
#Main ul.MiddleBox li.bl{top:300px;right:50%;}
#Main ul.MiddleBox li.br{top:300px;left:50%;}
a.line{display: flex;justify-content:center;align-items:center;border: 3px solid #000;margin:0 auto;padding:0;width:100%;height:280px;color:#555555;}
a.line:hover{border: 8px solid #000;transition: all 250ms ease-out; left: 0%; width: 100%;height:280px;cursor:pointer;}
.MainBackImg {margin: 0 auto;padding:0;width:100vw;}
.MainBackImgStar {position:absolute;top:0;left:0;margin: 0 auto;padding:0;width:100vw;}

@keyframes StarfadeIn {
    from {        opacity:0;    }
    to {        opacity:1;    }
}
@keyframes StarfadeDown {
    from {        opacity:1;    }
    to {        opacity:0;    }
}

#Main1{background-image: url('../images/subMainImg.png');height:700px;  background-repeat:no-repeat;background-size:cover;}
.textMessage1{width:100%;display:flex;justify-content:center;align-items:center;height:700px;}
#Main2{background-image: url('../images/technology.png'); height:700px;  background-repeat:no-repeat; background-size:cover;}
#Main3{background-image: url('../images/contactImg.png'); height:700px;  background-repeat:no-repeat; background-size:cover;}
#Main4{background-image: url('../images/solution.png'); height:700px;  background-repeat:no-repeat; background-size:cover;}

.boxOne{height:150px;}
.boxTwo{height:100px;}
.blank{height:80px;}
.blank1{height:30px;}
.Product1{display: flex;justify-content:center; width:100%;}
.productImg{width:100%;}
.subProduct0{width:35%;}
.subProduct1{width:35%; display:flex;text-align:left;align-items:center;margin-left:50px;}
.subProduct2{width:35%; display:flex;text-align:left;align-items:center;}
.subProduct3{width:35%; margin-left:50px;}

.subContent1{color:white;font-size:200%;font-weight:bold;}
.subContent2{color:white;font-size:110%;}
.more{background:#fff; cursor:pointer;height:50px;width:200px;border-radius:25px;text-align:center;border:1px solid #0071D0;}
.more p{padding: 13px 0; color: #0071D0;font-weight:bold;}

.backgr{width:100%;position:relative;text-align:center;}
.backgr img{width:100%;}
.contactButton{position:absolute;bottom:10%;width:100%;display:flex;justify-content:center;align-items:center;}
.contactButton a{color:#0071D0;;background:#fff;height:60px;width:220px;display:flex;justify-content:center;align-items:center;font-weight:bold;font-size:120%; z-index:5;bottom:10%;border-radius:30px;}

.textMessage{width:60%;position:absolute; top:30%; }
.textMessage ul{color: white;text-align:left; padding:20px 50px;font-weight: bold;}
.textMessage ul:nth-child(1) li{font-size: 300%;}
.textMessage ul:nth-child(2) li{font-size:120%;}
.textMessage1 ul{color: white; padding:20px 50px;font-weight: bold;text-align:center;}
.textMessage1 ul:nth-child(1){display:flex;justify-content: center;}
.textMessage1 ul:nth-child(1) li{font-size: 150%; width:100%;}
.textMessage1 ul:nth-child(1) li a{color:black;width: 200px; height: 70px;background:linear-gradient(to right, #0071D0 0%, #00BCFF 100%);}
.textMessage1 ul:nth-child(2) li{font-size:250%;}

#Footer{position:relative; width:100%; bottom:0;text-align:center;}
.copyright{font-size:80%;color:#555555; height:50px;display:flex;justify-content:center;align-items:center;}
.container{max-width:1320px; margin:0 auto;}
.footerBox{display:flex; justify-content: center;}
.footerMenu{padding:30px 100px;text-align:left;}
.subMenuTitle span{color:black;font-weight:bold;}
#Footer p{border-top: 1px solid black;}
.subMenuTitle1 span{color: white;font-weight:bold;}
.subMenuTitle2{padding: 20px 0 0 0;text-align:left;}
.subMenuTitle2 span{cursor:pointer;font-size:80%; font-weight:bold;}
.subMenuTitle2 span:hover{color:#0d6efd;}
.subMenuTitle3{padding:20px 0 0 0;text-align:left;}
.subMenuTitle3 span{cursor:pointer;font-size:80%; font-weight:bold;color:white;}
.subMenuTitle3 span:hover{color:#0d6efd;}
.colorhover:hover{color:#0d6efd;}

#introduce{width:100%;}
.introduceBox{display:flex;padding:0 20px;}
.intro1{width:50%; font-size: 160%; font-weight: bold;}
.intro2{width:50%; font-size: 90%; padding-left:5%;}
.menuBox{max-width:1320px;margin:0 auto;}
.submenuBox{display:flex; justify-content:center;}
.submenuBox div > div{display:flex; justify-content:center;}
.submenuBox a img{width: 50%; padding:0 20px;}
.submenuBox > div >div > a{display:flex;justify-content:center;align-items:center;width: 180px; height:60px;border-radius:30px; border:1px solid #0071D0; color:#0071D0;}
.organImages{padding:0 300px;}

#companyRoad{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;padding:30px;}
.companyRoad1{width:70%; padding:20px;}
.companyRoad1 p:nth-child(1){font-weight:bold;font-size:150%;padding-bottom:20px;}
.companyRoad1 p:nth-child(2), .companyRoad1 p:nth-child(3){padding: 5px 0;}
.companyRoad2{width:30%; padding:0 0 50px 0; display:flex; flex-wrap:wrap;}
.companyRoad2 img{width:50%;}
.subRoad1{padding-top:20px;width:100%;}
.subRoad1 p{float:right;}
.companyRoad3{width:100%;}
.companyRoad3 iframe{width:100%;}

.techn{display:flex;}
.techn div{padding: 20px;}
.subTitle{text-align:center;}
.subTitle p:nth-child(1){color:#0EACE4; font-size: 120%;font-weight: bold; padding:10px 0;}
.subTitle p:nth-child(2){font-weight: bold; font-size:180%;padding:0 0 20px 0;}
.Patent{width:25%;}

.giveContainer > .container{display:flex;justify-content:center;}
.giveContainer{padding-top: 50px;}
.mainHistory{position:relative;}
.mainHistory h2{position:relative;font-size:200%; color: #000; line-height:3; left:-210px; top:-35px;}
.mainHistory h2::before{content: "";position:absolute;left:174px; top:0%;width:10px;height:10px;
border-radius:50%;background:#0071D0; transform:translateY(400%);  box-sizing:border-box;}
.mainHistory div{position:relatvie; padding: 0 0 0 40px;}
.history01{position:relative; width:250px;bottom:95px;left:30px;}
.mainHistory li{font-size: 15px; color:#6B6F72;}
.mainHistory > div::before{content: ""; position:absolute; left: 8px; top: 0px; height:100%; border-left:2px solid #0071D0;}
.mainHistory div:first-child::before{top: 10px;height:clac(100%-10px);}


.techn01{display:flex;}
.techn01 > div{width:50%;text-align:center;}
.techn01 img{width: 70%;}
.technIntroduce{margin-top:100px;}
.technIntroduce li{text-align:left;}
.technIntroduce li{font-size: 120%;}
.technIntroduce li:nth-child(1){font-size: 200%;font-weight:bold;}

.solutionTitle{text-align:center;}
.boxThree{height:30px;}
.solutionTitle p:nth-child(1){color:#0EACE4;font-weight:bold;font-size: 120%;padding:10px 0;}
.solutionTitle p:nth-child(2){font-weight:bold;font-size:200%;}

#wrap{text-align:center;margin:0 auto;padding:0;width:100%;}
#wrap ul.box{float:left;text-align:center;margin:0 auto;padding:0;width:100%;}
#wrap ul.box li.tbox{float:left;text-align:center;margin:0 auto;padding:0;width:100%;}

}

@media only screen and (min-width : 1024px) and (max-width : 1320px) {
#mainImg{background-color:#00043b;}

.Menu{position:absolute;width:100%;height:100%;}

.Hambeger-icon{display:none;position:absolute;width:70px;right:30px;top:30px;z-index:5;}
.Hambeger-icon span {height:7px;width:70px;background:black;display:block;margin: 7px 0px 7px 0px;transition: 0.4s ease-in-out;transform: none;border-radius:5px;}

input.hamburger-checkbox {position: absolute;z-index: 10;top: 10px;right: 20px;width: 40px;opacity: 0;height: 25px;display:none;}
#openmenu:checked ~ .menu-pane {
  width: 450px;
  right: 0;
  transform: translateX(0px);
  transition: 0.6s ease-in-out;
}
#openmenu:checked ~ .body-text {
display: none;
}
#openmenu:checked ~ .Hambeger-icon{
  position:fixed;
}
#openmenu:checked ~ .Hambeger-icon span:nth-of-type(1) {
  transform: translate(0%, 200%) rotate(-45deg);
  background-color: black;
}
#openmenu:checked ~ .Hambeger-icon span:nth-of-type(2) {
  transform: scale(0,0);
}
#openmenu:checked ~ .Hambeger-icon span:nth-of-type(3) {
  transform: translate(0%, -190%) rotate(45deg);
  background-color: black;
}

div.menu-pane {
  background-color: #555555;
  position: fixed;
  transform: scale(0,0) translateX(100vw);
  top: 0;
  right: 0;
  width: 0px;
  height: 100vh;
  transition: 0.6s ease-in-out;
  z-index:4;
}

div.menu-pane ul.dump{width:100%;height:120px;padding:0;}
div.menu-pane ul{width:100%;padding:10px;}
div.menu-pane ul li{width:100%;padding:10px 0px 10px 0px;}
div.menu-pane ul li span{font-size:200%;color:#F7F8E0;}


#HeadDump{margin:0 auto;padding:0;width:100%;height:100px;}
#Head{position:fixed;width:100vw;height:120px;top:0;z-index:999;background:transparent;border-bottom:1px solid transparent;}
#Head span.LogoLink{position:absolute;left:30px;top:20px;z-index:6;cursor:pointer;}
.Logo{width:100%;margin-top:15px;}

.Head_Menu{position:absolute;margin:0 auto;padding:0;;width:100%;}
.Head_Menu >ul{width:100%;padding:0;display:flex; justify-content:flex-end;}
.Head_Menu > ul >li{float:left;text-align:center;width:180px;cursor:pointer;line-height:115px;}
.Head_Menu > ul > li::after {content:""; display: block; border-bottom: 3px solid #0d6efd; transition: all 250ms ease-out; left: 50%;width:0px;}
.Head_Menu > ul > li span:hover{color:#0d6efd;}
.Head_Menu > ul > li:hover::after {transition: all 250ms ease-out; left: 0%;width:180px;}
.Head_Menu>ul>li >span{font-family:Gothic;font-size:1em;font-weight:bold;color:white;padding:0 25px;}
.subHeadMenu{width:100%;display:none;position:absolute;padding:3px 0;;}
.Head_Menu > ul > li:hover >ul{display:block;}
.subHeadMenu li{text-align:center;width: 180px;padding:10px 0;background:white;line-height:30px;}
.subHeadMenu li span{color:black;font-weight:bold;}


#Main{text-align:center;margin-bottom:0 auto;padding:0;width:100vw;}
#Main ul.MiddleBox{position:absolute;float:left;text-align:center;margin:0 auto;padding:0px 20vw 0px 20vw;width:100vw;top:30vw;}
#Main ul.MiddleBox li{position:absolute;margin:0 auto;padding:10px;width:500px;height:300px;}
#Main ul.MiddleBox li.tl{top:0;right:50%;}
#Main ul.MiddleBox li.tr{top:0;left:50%;}
#Main ul.MiddleBox li.bl{top:300px;right:50%;}
#Main ul.MiddleBox li.br{top:300px;left:50%;}
a.line{display: flex;justify-content:center;align-items:center;border: 3px solid #000;margin:0 auto;padding:0;width:100%;height:280px;color:#555555;}
a.line:hover{border: 8px solid #000;transition: all 250ms ease-out; left: 0%; width: 100%;height:280px;cursor:pointer;}
.MainBackImg {margin: 0 auto;padding:0;width:100vw;}
.MainBackImgStar {position:absolute;top:0;left:0;margin: 0 auto;padding:0;width:100vw;}

@keyframes StarfadeIn {
    from {        opacity:0;    }
    to {        opacity:1;    }
}
@keyframes StarfadeDown {
    from {        opacity:1;    }
    to {        opacity:0;    }
}

#Main1{background-image: url('../images/subMainImg.png'); height:600px;  background-repeat:no-repeat; background-size:cover;}
.textMessage1{width:100%;display:flex;justify-content:center;align-items:center;height:600px;}
.textMessage1 ul{color: white; padding:20px 50px;font-weight: bold;text-align:center;}
#Main2{background-image: url('../images/technology.png'); height:600px;  background-repeat:no-repeat; background-size:cover;}
#Main3{background-image: url('../images/contactImg.png'); height:600px;  background-repeat:no-repeat; background-size:cover;}
#Main4{background-image: url('../images/solution.png'); height:600px;  background-repeat:no-repeat; background-size:cover;}

.boxOne{height:150px;}
.boxTwo{height:100px;}
.blank{height:100px;}
.Product1{display: flex;justify-content:center; width:100%;}
.productImg{width:100%;}
.subProduct0{width:35%;}
.subProduct1{width:35%; display:flex;text-align:left;align-items:center;margin-left:50px;}
.subProduct2{width:35%; display:flex;text-align:left;align-items:center;}
.subProduct3{width:35%; margin-left:50px;}

.subContent1{color:white;font-size:200%;font-weight:bold;}
.subContent2{color:white;font-size:110%;}
.more{background:#fff; cursor:pointer;height:50px;width:200px;border-radius:25px;text-align:center;border:1px solid #0071D0;}
.more p{padding: 13px 0; color: #0071D0;font-weight:bold;}

.backgr{width:100%;position:relative;}
.backgr img{width:100%;}
.contactButton{position:absolute;bottom:10%;width:100%;display:flex;justify-content:center;align-items:center;}
.contactButton a{color:#0071D0;;background:#fff;height:55px;width:200px;display:flex;justify-content:center;align-items:center;font-weight:bold;font-size:110%; z-index:5;bottom:10%;border-radius:30px;}

.textMessage{width:60%;position:absolute; top:30%;}
.textMessage ul{color: white;text-align:left; padding:20px 50px;font-weight: bold;}
.textMessage ul:nth-child(1) li{font-size: 300%;}
.textMessage ul:nth-child(2) li{font-size:120%;}
.textMessage1 ul:nth-child(1) li{font-size: 120%;}
.textMessage1 ul:nth-child(2) li{font-size:250%;}

#Footer{position:relative; width:100%; bottom:0;text-align:center;}
.copyright{font-size:80%;color:#555555; height:50px;display:flex;justify-content:center;align-items:center;}
.container{max-width:1024px; margin:0 auto;}
.footerBox{display:flex; justify-content: center;}
.footerMenu{padding:30px 70px;text-align:left;}
.subMenuTitle span{color:black;font-weight:bold;}
#Footer p{border-top: 1px solid black;}
.subMenuTitle1 span{color: white;font-weight:bold;}
.subMenuTitle2{padding: 20px 0 0 0;text-align:left;}
.subMenuTitle2 span{cursor:pointer;font-size:80%; font-weight:bold;}
.subMenuTitle2 span:hover{color:#0d6efd;}
.subMenuTitle3{padding:20px 0 0 0;text-align:left;}
.subMenuTitle3 span{cursor:pointer;font-size:80%; font-weight:bold;color:white;}
.subMenuTitle3 span:hover{color:#0d6efd;}
.colorhover:hover{color:#0d6efd;}

#introduce{width:100%;}
.introduceBox{display:flex; padding: 0 20px;}
.intro1{width:50%; font-size: 170%; font-weight: bold;}
.intro2{width:50%; font-size: 80%; padding-left:5%;}
.menuBox{max-width:1024px;margin:0 auto;}
.submenuBox{display:flex; justify-content:center;}
.submenuBox div > div{display:flex; justify-content:center;}
.submenuBox a img{width: 100%; padding:0 20px;}
.submenuBox > div >div > a{display:flex;justify-content:center;align-items:center;width: 160px; height:50px;border-radius:25px; border:1px solid #0071D0; color:#0071D0;}
.organImages{padding:0 180px;}

#companyRoad{max-width:1024px;margin:0 auto;display:flex;flex-wrap:wrap;padding:30px;}
.companyRoad1{width:65%; padding:20px;}
.companyRoad1 p:nth-child(1){font-weight:bold;font-size:120%;padding-bottom:20px;}
.companyRoad2{width:35%; padding:20px; display:flex; flex-wrap:wrap;}
.companyRoad2 img{width:50%;}
.subRoad1{padding-top:20px;width:100%;}
.subRoad1 p{font-size:90%;float:right;}
.companyRoad3{width:100%;}
.companyRoad3 iframe{width:100%;}

.techn{display:flex;}
.techn div{padding: 20px;}
.subTitle{text-align:center;}
.subTitle p:nth-child(1){color:#0EACE4; font-size: 120%;font-weight: bold; padding:10px 0;}
.subTitle p:nth-child(2){font-weight: bold; font-size:180%;padding:0 0 20px 0;}
.Patent{width:25%;}

.giveContainer > .container{display:flex;justify-content:center;}
.giveContainer{padding-top: 50px;}
.mainHistory{position:relative;}
.mainHistory h2{position:relative;font-size:200%; color: #000; line-height:3; left:-210px; top:-35px;}
.mainHistory h2::before{content: "";position:absolute;left:174px; top:0%;width:10px;height:10px;
border-radius:50%;background:#0071D0; transform:translateY(400%);  box-sizing:border-box;}
.mainHistory div{position:relatvie; padding: 0 0 0 40px;}
.history01{position:relative; width:250px;bottom:95px;left:30px;}
.mainHistory li{font-size: 15px; color:#6B6F72;}
.mainHistory > div::before{content: ""; position:absolute; left: 8px; top: 0px; height:100%; border-left:2px solid #0071D0;}
.mainHistory div:first-child::before{top: 10px;height:clac(100%-10px);}

.techn01{display:flex;}
.techn01 > div{width:50%;text-align:center;}
.techn01 img{width: 70%;}
.technIntroduce{margin-top:100px;}
.technIntroduce li{text-align:left;}
.technIntroduce li{font-size:90%;}
.technIntroduce li:nth-child(1){font-size: 180%;font-weight:bold;}

.solutionTitle{text-align:center;}
.boxThree{height:30px;}
.solutionTitle p:nth-child(1){color:#0EACE4;font-weight:bold;font-size: 120%;padding:10px 0;}
.solutionTitle p:nth-child(2){font-weight:bold;font-size:200%;}

#wrap{text-align:center;margin:0 auto;padding:0;width:100%;}
#wrap ul.box{float:left;text-align:center;margin:0 auto;padding:0;width:100%;}
#wrap ul.box li.tbox{float:left;text-align:center;margin:0 auto;padding:0;width:100%;}
}

@font-face {
  font-family: 'Gothic';
   font-style: normal;
   font-weight: 100;
   src: url(font/NotoSansKR-Bold.woff2) format('woff2'),
        url(font/NotoSansKR-Bold.woff) format('woff'),
        url(font/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Shedding';
    font-weight:100;
    font-style: normal;
    src: url('font/Nanum DaeHanMinGugYeorSaCe.woff2') format('woff2'),
         url('font/Nanum DaeHanMinGugYeorSaCe.woff') format('woff');
         url('font/Nanum DaeHanMinGugYeorSaCe.ttf') format('truetype');
}

@font-face {
    font-family: 'Graffiti';
    font-weight:100;
    font-style: normal;
    src: url('font/Nanum DaHaengCe.woff2') format('woff2'),
         url('font/Nanum DaHaengCe.woff') format('woff');
         url('font/Nanum DaHaengCe.ttf') format('truetype');
}

@font-face {
  font-family: 'DotumChe';
  font-style: normal;
  font-weight: 100;
  src: url(font/NotoSansKR-Regular.woff2) format('woff2'),
       url(font/NotoSansKR-Regular.woff) format('woff'),
       url(font/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
  font-family: 'OldBody';
  font-style: normal;
  font-weight: 100;
  src: url(font/JejuHallasan-Regular.eot);
  src: url(font/JejuHallasan-Regular.eot?#iefix) format('embedded-opentype'),
       url(font/JejuHallasan-Regular.woff2) format('woff2'),
       url(font/JejuHallasan-Regular.woff) format('woff'),
       url(font/JejuHallasan-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'BatangChe';
  font-style: normal;
  font-weight: 100;
       url(font/Nanum DaeHanMinGugYeorSaCe.woff2) format('woff2'),
       url(font/Nanum DaeHanMinGugYeorSaCe.woff) format('woff'),
       url(font/Nanum DaeHanMinGugYeorSaCe.ttf) format('truetype');
}


@font-face {
    font-family: 'Digital Dismay';
    src: url('font/Digital Dismay.otf');
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-100px);
        -moz-transform: translatey(-100px);
        -o-transform: translatey(-100px);
        transform: translatey(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-100px);
        -moz-transform: translatey(-100px);
        -o-transform: translatey(-100px);
        transform: translatey(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-100px);
        -moz-transform: translatey(-100px);
        -o-transform: translatey(-100px);
        transform: translatey(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}