*{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 (max-width : 640px){

.font_toptitle{font-family:Gothic;font-size:110%;color:#202863;font-weight:bold;}
.font_Digital{font-family:Gothic;font-size:130%;font-weight:bold;color:#5d5218;}

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

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

.Hambeger-icon{position:absolute;width:40px;right:15px;top:20px;z-index:5;}
.Hambeger-icon span {height:5px;width:45px;background:white;display:block;margin: 5px 0px 5px 0px;transition: 0.4s ease-in-out;transform: none;border-radius:5px;}
input.hamburger-checkbox {display:none;position: absolute;z-index: 10;top: 10px;right: 20px;width: 40px;opacity: 0;height: 25px;}
#openmenu:checked ~ .menu-pane {
  width: 100vw;
  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: #fff;
  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;}
.category{width:100%;padding:10px 0px 10px 50px; text-align:left;}
.category li{width:100%;padding-bottom:20px;}
.category li:hover span{color:#0d6efd;}
div.menu-pane ul li label{display:inline-block;width:100%;}
div.menu-pane ul li label span{font-size:150%;color:black;;}
.updown1{position:absolute; right:10px;}

#updown1{position:absolute;display:none;}
#updown2{position:absolute;display:none;}
#updown3{position:absolute;display:none;}
#updown4{position:absolute;display:none;}
.category1{height:0px;opacity: 0;transform: translateY(0px);transition: 0.2s ease-in-out;}
.category1 li{padding:20px 0 10px 0;display:none;color:black;cursor:pointer;}
.category1 li:hover{text-decoration:underline;}
.category2{height:0px;opacity: 0;transform: translateY(0px);transition: 0.2s ease-in-out;}
.category2 li{padding:20px 0 10px 0;display:none;color:black;cursor:pointer;}
.category2 li:hover{text-decoration:underline;}
.category3{height:0px;opacity: 0;transform: translateY(0px);transition: 0.2s ease-in-out;}
.category3 li{padding:20px 0 10px 0;display:none;color:black;cursor:pointer;}
.category3 li:hover{text-decoration:underline;}
label{cursor:pointer;}

#updown1:checked ~ .category1 {
  opacity: 1;
  height:100px;
  transform: translateY(5px);
  transition: 0.6s ease-in-out;
}
#updown1:checked ~ .category1 li {display:block;}
#updown2:checked ~ .category2 {
  opacity: 1;
  height:100px;
  transform: translateY(5px);
  transition: 0.6s ease-in-out;
}
#updown2:checked ~ .category2 li {display:block;}
#updown3:checked ~ .category3 {
  opacity: 1;
  height:200px;
  transform: translateY(5px);
  transition: 0.6s ease-in-out;
}
#updown3:checked ~ .category3 li {display:block;}

#HeadDump{margin:0 auto;padding:0;width:100%;height:50px;}
#Head{position:fixed;width:100%;height:70px;top:0;text-align:center;background:transparent;border-bottom:2px solid transparent;z-index:999;}
#Head span.LogoLink{position:absolute;left:10px;}
.Logo{width:100%;margin-top:10px;}
.Head_Menu{display:none;}

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

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

.fitCover{height:100vh;}

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

.textMessage{width:100%;position:absolute; top:30vh; left:-5%;}
.textMessage ul{color: white;text-align:left; padding:20px 0 10px 40px;font-weight: bold;}
.textMessage ul:nth-child(1) li{font-size: 160%;}
.textMessage ul:nth-child(2) li{font-size:110%;}
.textMessage1 ul:nth-child(1) li{font-size: 100%;}
.textMessage1 ul:nth-child(2) li{font-size:160%;}
.boxOne{height:50px;}
.boxTwo{height:40px;}
.blank{height:80px;}

ul li > h3{font-size:100%;}
ul li > h1{font-size: 150%;}

#Main .blank{height:0;}
.subProduct0{padding:20px;}
.subProduct3{padding:20px;}
.subContent1{font-size: 120%;font-weight:bold;color:white;}
.subContent2{font-size: 90%;font-weight:bold;color:white;}
.Product1{padding-bottom:30px;}
#product2{display:flex;flex-direction:column-reverse;}
.more{background:#fff;width:150px;height:40px;margin:0 auto;border-radius:20px;cursor:pointer;border:1px solid #0071D0;}
.more p{font-weight:bold; color:#0071D0;font-size:90%;height:40px;display:flex;justify-content:center;align-items:center;}

#introduce{width:100%;}
.intro1{width:100%; font-size: 150%; font-weight: bold; padding: 0 20px 10px 20px;}
.intro2{width:100%; font-size: 90%; padding: 10px 20px;}
.menuBox{margin:0 auto;}
.submenuBox{display:flex; justify-content:center;flex-wrap:wrap;}
.submenuBox div > div{width:100%;display:flex; justify-content:center;padding-top:10px;}
.submenuBox div{width:50%;}
.submenuBox div:nth-child(1), .submenuBox div:nth-child(2){padding-bottom: 20px;}
.submenuBox a img{width: 100%; padding:0 20px;}
.submenuBox > div >div > a{display:flex;justify-content:center;align-items:center;width: 140px; height:40px;border-radius:20px; border:1px solid #0071D0; color:#0071D0;font-size:90%;}
.organImages{padding: 0 40px;}

.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:30px;width:120px;display:flex;justify-content:center;align-items:center;font-weight:bold;font-size:80%; z-index:5;bottom:10%;border-radius:15px;}

.techn{display:flex;flex-wrap:wrap;}
.techn div{padding: 20px;}
.Patent{width:50%;}
.techn01 div{text-align:center; padding-bottom: 15px;}
.technIntroduce ul li{text-align:left; padding: 0 20px;font-size:90%;}
.technIntroduce ul li:nth-child(1){text-align:center;font-size: 150%;font-weight:bold;}
.subTitle{text-align:center;}
.subTitle p:nth-child(1){color:#0EACE4; font-size: 110%;font-weight: bold; padding:10px 0;}
.subTitle p:nth-child(2){font-weight: bold; font-size:150%;padding:0 0 20px 0;}

#companyRoad{padding:30px;}
.companyRoad1{width:100%; padding:5px;}
.companyRoad1 p:nth-child(1){font-weight:bold;font-size:140%;padding-bottom:10px;}
.companyRoad2{width:100%; padding:20px 5px;}
.companyRoad2 img{width:50%;}
.subRoad1{padding-top:20px;width:100%;}
.subRoad2{padding-top:20px;width:70%;}
.subRoad2 ul li{padding:5px 0;}
.subRoad2 ul li font{font-weight: bold;font-size:120%;}
.companyRoad3{width:100%;}
.companyRoad3 iframe{width:100%;}

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

#Footer{position:relative; width:100%; bottom:0;text-align:center;border-top:1px solid black;}
.copyright{font-size:80%;color:#555555; height:50px;display:flex;justify-content:center;align-items:center;}
.footerBox{display:flex; justify-content: center; flex-wrap:wrap;}
.footerMenu{padding:30px 40px;text-align:left; width:50%;}
.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;}

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

#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);
    }
}