@keyframes logoBg { 
  0%{transform: translateY(-25px)} 
  50%{transform: translateY(0px)} 
  100%{transform: translateY(-25px)} 
}

@keyframes cursor { 
  0%{border-right: 1px solid transparent} 
  50%{border-right: 1px solid #000} 
  100%{border-right: 1px solid transparent} 
}

@keyframes scrollMain { 
  0%{transform: translateY(-100px)} 
  50%{transform: translateY(-85px)} 
  100%{transform: translateY(-100px)} 
}

@keyframes grain {
  0% { transform:translate(-1%, 1%); }
  10% { transform:translate(-5%, -10%); }
  20% { transform:translate(-15%, 5%); }
  30% { transform:translate(7%, -15%); }
  40% { transform:translate(-5%, 15%); }
  50% { transform:translate(-15%, 10%); }
  60% { transform:translate(15%, 5%); }
  70% { transform:translate(7%, 12%); }
  80% { transform:translate(3%, 18%); }
  90% { transform:translate(-10%, 10%); }
  100% { transform:translate(-2%, 2%); }
}

.typing-txt{display: none;}
.typing ul li.on { display: inline-block; animation: cursor 0.4s infinite; } 

.grainBox{background-color: rgb(245, 249, 251); -webkit-font-smoothing: antialiased;}
.grainBox::before { animation: grain 8s steps(10)  infinite; background-image: url(/images/noise.png); content: ''; height: 300%; left: -50%; opacity: 0.6; position: fixed; top: -100%; width: 300%; }

.mainTop{ height: 100vh; box-sizing:border-box; position:relative; width:100%;}
.mainTopBg{height:100vh; background:url(/images/mainBg.png) right top no-repeat; background-size:contain; width:100%; animation: logoBg 4s infinite; position:absolute;}
.mainTopBg2{height:100vh; background:url(/images/mainBg.png) right top no-repeat; background-size:contain; width:100%; animation: logoBg 4s infinite; position:fixed;}
/*ALL Using CSS*/

/*지도*/
.root_daum_roughmap .cont .section.lst {display: none;}

@media screen and (max-width:767px) {
    .mainTextBox{width:85vw; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); height:332px;}
    .mainTextBox .typing ul li{font-size:50px; font-weight:200; margin-bottom:15px; padding-right:5px; border-right: 1px solid transparent}
    .mainTextBox .typing ul li:first-of-type{font-size:25px;}
    .mainTextBox .typing ul li:nth-of-type(2){font-weight:900;}
    .mainTextBox .typing ul li:last-of-type{color:#ed1b24; margin-bottom:0;}
    
    .mainTop > ul{position:absolute; bottom:20px; left:20px;}
    .mainTop > ul li{display:inline-block; margin-right:30px; }
    .mainTop > ul li a{ font-size:17px; position:relative; padding-left:30px; transition-duration:0.3s;}
    .mainTop > ul li a:hover{padding-left:40px;}
    .mainTop > ul li a:before{position:absolute; content:''; width:20px; height:1px; left:0; top:10px; display:block; background-color:#444; transition-duration:0.3s;}
    .mainTop > ul li a:hover:before{ width:30px;}
    
    .gridQ{position:absolute; top:48%; right:-121px; background:#333; padding:10px 70px 5px 70px; transform:rotate(90deg); transition-duration:0.4s;}
    .gridQ a{color:#fff; position:relative; padding-left:50px; font-size:19px;}
    .gridQ a:before{position:absolute; content:''; width:35px; height:1px; left:0; top:11px; display:block; background-color:#fff;}    
    
    #mainImg p{text-align:center; width:80px; margin:0 auto; font-size:18px; font-weight:200; color:#666; line-height:22px; animation: scrollMain 0.6s infinite; }     
    
    .mainImgBox{background: linear-gradient(rgba(255,255,255,1) 0%, rgba(241,241,252,1) 4%, rgba(94,94,124,1) 24%, rgba(67,52,93,1) 38%, rgba(31,28,61,1) 53%, rgba(22,32,60,1) 70%, rgba(12,14,37,1) 90%, rgba(17,12,50,1) 100%);}
    
    #mainImg{background-position:center; background-repeat:no-repeat; background-size:85%; background-attachment:fixed;}
    #mainImg.img1{background-image:url(/images/main01.jpg);}
    #mainImg.img2{background-image:url(/images/main02.jpg);}
    #mainImg.img3{background-image:url(/images/main03.jpg);}
    #mainImg.img4{background-image:url(/images/main04.jpg);}
    #mainImg.img5{background-image:url(/images/main05.jpg);}
    #mainImg.img6{background-image:url(/images/main06.jpg);}
    #mainImg.img7{background-image:url(/images/main07.jpg);}
    
    .listArea{margin:0px auto; background:url(/images/mainBar.png)repeat-y center center; }
    .listArea li{padding:100px 0 200px 0; background-position:center; background-repeat:no-repeat; background-size:auto; background-attachment:fixed;
                 font-size:55px; font-weight:900; color: #000; -webkit-text-stroke: 1.5px #fff; -webkit-text-fill-color: transparent; transition-duration:0.5s; text-shadow:rgba(22, 32, 60, 0.2) 3px 3px 12px;
                 text-align:center;    }
    .listArea li b{padding-top:20px; font-size:20px; font-weight:900; color: #000; display:block; line-height:40px; -webkit-text-stroke: 1px #fff;	-webkit-text-fill-color: transparent; transition-duration:0.5s; text-shadow:rgba(22, 32, 60, 0.2) 3px 3px 12px;}
    .listArea li:first-child{padding:200px 0 200px 0;}
    .img1 .listArea li:first-child ,.img2 .listArea li:nth-child(2) ,.img3 .listArea li:nth-child(3) ,.img4 .listArea li:nth-child(4) ,
    .img5 .listArea li:nth-child(5) ,.img6 .listArea li:nth-child(6) ,.img7 .listArea li:nth-child(7),
    .img1 .listArea li:first-child b, .img2 .listArea li:nth-child(2) b, .img3 .listArea li:nth-child(3) b,.img4 .listArea li:nth-child(4) b,
    .img5 .listArea li:nth-child(5) b, .img6 .listArea li:nth-child(6) b, .img7 .listArea li:nth-child(7) b {color:#fff; -webkit-text-stroke:transparent; -webkit-text-fill-color: #fff; }
    
    .contactBox{width:100%;}
    .contactBox h2{font-size:60px; font-weight:900; color: #000; -webkit-text-stroke: 1.5px #000; -webkit-text-fill-color: transparent; transition-duration:0.5s; text-align:center; padding-top:100px; margin-bottom:30px;}
    .contactBox ul{width:90%; margin:0 auto 40px auto;}
    .contactBox ul li{margin-bottom:20px;}
    .contactBox ul li dt{font-size:22px; font-weight:900; margin-bottom:5px;}
    .contactBox ul li dd{font-size:17px; line-height:20px;}
    .mapBox{border-bottom:1px solid #ddd;}

    
}
/*mobile*/

@media screen and (min-width:768px) and (max-width:1240px) {
    .mainTextBox{width:80vw; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); height:270px;}
    .mainTextBox .typing ul li{font-size:60px; font-weight:200; margin-bottom:15px; padding-right:5px; border-right: 1px solid transparent}
    .mainTextBox .typing ul li:first-of-type{font-size:30px;}
    .mainTextBox .typing ul li:nth-of-type(2){font-weight:900;}
    .mainTextBox .typing ul li:last-of-type{color:#ed1b24; margin-bottom:0;}
    
    .mainTop > ul{position:absolute; bottom:30px; left:35px;}
    .mainTop > ul li{display:inline-block; margin-right:40px; }
    .mainTop > ul li a{ font-size:22px; position:relative; padding-left:50px; transition-duration:0.3s;}
    .mainTop > ul li a:hover{ padding-left:70px;}
    .mainTop > ul li a:before{position:absolute; content:''; width:35px; height:1.5px; left:0; top:12px; display:block; background-color:#444; transition-duration:0.3s;}
    .mainTop > ul li a:hover:before{ width:50px;}
    
    .gridQ{position:absolute; top:48%; right:-76px; background:#333; padding:30px 30px 7px 30px; transform:rotate(90deg); transition-duration:0.4s;}
    .gridQ a{color:#fff; position:relative; padding-left:50px; font-size:22px;}
    .gridQ a:before{position:absolute; content:''; width:35px; height:1.5px; left:0; top:11px; display:block; background-color:#fff;}    
    
    #mainImg p{text-align:center; width:100px; margin:0 auto; font-size:18px; font-weight:200; color:#666; line-height:22px; animation: scrollMain 0.6s infinite; }     
    
    .mainImgBox{background: linear-gradient(rgba(255,255,255,1) 0%, rgba(241,241,252,1) 4%, rgba(94,94,124,1) 24%, rgba(67,52,93,1) 38%, rgba(31,28,61,1) 53%, rgba(22,32,60,1) 70%, rgba(12,14,37,1) 90%, rgba(17,12,50,1) 100%);}
    
    #mainImg{background-position:center; background-repeat:no-repeat; background-size:600px; background-attachment:fixed;}
    #mainImg.img1{background-image:url(/images/main01.jpg);}
    #mainImg.img2{background-image:url(/images/main02.jpg);}
    #mainImg.img3{background-image:url(/images/main03.jpg);}
    #mainImg.img4{background-image:url(/images/main04.jpg);}
    #mainImg.img5{background-image:url(/images/main05.jpg);}
    #mainImg.img6{background-image:url(/images/main06.jpg);}
    #mainImg.img7{background-image:url(/images/main07.jpg);}
    
    .listArea{margin:0px auto; background:url(/images/mainBar.png)repeat-y center center; }
    .listArea li{padding:50px 0 400px 0; background-position:center; background-repeat:no-repeat; background-size:auto; background-attachment:fixed;
                 font-size:55px; font-weight:900; color: #000; -webkit-text-stroke: 1.5px #fff; -webkit-text-fill-color: transparent; transition-duration:0.5s; text-shadow:rgba(22, 32, 60, 0.2) 3px 3px 12px;}
    .listArea li b{padding-top:20px; font-size:20px; font-weight:900; color: #000; display:block; line-height:40px; -webkit-text-stroke: 1px #fff;	-webkit-text-fill-color: transparent; transition-duration:0.5s; text-shadow:rgba(22, 32, 60, 0.2) 3px 3px 12px;}
    .listArea li:first-child{padding:400px 0 400px 0;}
    .listArea li:nth-child(odd) {margin:0 50.5% 0 0; text-align:right;}
    .listArea li:nth-child(even) {margin:0 0 0 50.5%;}
    .img1 .listArea li:first-child ,.img2 .listArea li:nth-child(2) ,.img3 .listArea li:nth-child(3) ,.img4 .listArea li:nth-child(4) ,
    .img5 .listArea li:nth-child(5) ,.img6 .listArea li:nth-child(6) ,.img7 .listArea li:nth-child(7),
    .img1 .listArea li:first-child b, .img2 .listArea li:nth-child(2) b, .img3 .listArea li:nth-child(3) b,.img4 .listArea li:nth-child(4) b,
    .img5 .listArea li:nth-child(5) b, .img6 .listArea li:nth-child(6) b, .img7 .listArea li:nth-child(7) b {color:#fff; -webkit-text-stroke:transparent; -webkit-text-fill-color: #fff; }
    
    .contactBox{width:100%;}
    .contactBox h2{font-size:80px; font-weight:900; color: #000; -webkit-text-stroke: 1.5px #000; -webkit-text-fill-color: transparent; transition-duration:0.5s; text-align:center; padding-top:140px; margin-bottom:40px;}
    .contactBox ul{width:90%; margin:0 auto;}
    .contactBox ul:after{content: ''; display: block; clear: both; visibility: hidden;}
    .contactBox ul li:nth-child(odd) {float:left; width:40%; margin-bottom:40px; }
    .contactBox ul li:nth-child(even) {float:left; width:60%; margin-bottom:40px;}
    .contactBox ul li dt{font-size:28px; font-weight:900; margin-bottom:12px;}
    .contactBox ul li dd{font-size:17px; line-height:20px;}
    .mapBox{border-bottom:1px solid #ddd;}
}
/*tablet*/

@media screen and (min-width:1241px) {       
    
    .mainTextBox{width:1230px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); height:465px;}
    .mainTextBox .typing ul li{font-size:120px; font-weight:200; margin-bottom:15px; padding-right:5px; border-right: 1px solid transparent}
    .mainTextBox .typing ul li:first-of-type{font-size:60px;}
    .mainTextBox .typing ul li:nth-of-type(2){font-weight:900;}
    .mainTextBox .typing ul li:last-of-type{color:#ed1b24; margin-bottom:0;}
    
    .mainTop > ul{position:absolute; bottom:35px; left:65px;}
    .mainTop > ul li{display:inline-block; margin-right:80px; }
    .mainTop > ul li a{ font-size:22px; position:relative; padding-left:50px; transition-duration:0.3s;}
    .mainTop > ul li a:hover{ padding-left:70px;}
    .mainTop > ul li a:before{position:absolute; content:''; width:35px; height:1.5px; left:0; top:12px; display:block; background-color:#444; transition-duration:0.3s;}
    .mainTop > ul li a:hover:before{ width:55px;}
    
    .gridQ{position:absolute; top:48%; right:-71px; background:#333; padding:40px 30px 7px 30px; transform:rotate(90deg); transition-duration:0.4s;}
    .gridQ:hover{right:-81px; }
    .gridQ a{color:#fff; position:relative; padding-left:50px; font-size:22px;}
    .gridQ a:before{position:absolute; content:''; width:35px; height:1.5px; left:0; top:11px; display:block; background-color:#fff;}    
    
    #mainImg p{text-align:center; width:100px; margin:0 auto; font-size:18px; font-weight:200; color:#666; line-height:22px; animation: scrollMain 0.6s infinite; }     
    
    .mainImgBox{background: linear-gradient(rgba(255,255,255,1) 0%, rgba(241,241,252,1) 4%, rgba(94,94,124,1) 24%, rgba(67,52,93,1) 38%, rgba(31,28,61,1) 53%, rgba(22,32,60,1) 70%, rgba(12,14,37,1) 90%, rgba(17,12,50,1) 100%);}
    
    #mainImg{background-position:center; background-repeat:no-repeat; background-size:auto; background-attachment:fixed;}
    #mainImg.img1{background-image:url(/images/main01.jpg);}
    #mainImg.img2{background-image:url(/images/main02.jpg);}
    #mainImg.img3{background-image:url(/images/main03.jpg);}
    #mainImg.img4{background-image:url(/images/main04.jpg);}
    #mainImg.img5{background-image:url(/images/main05.jpg);}
    #mainImg.img6{background-image:url(/images/main06.jpg);}
    #mainImg.img7{background-image:url(/images/main07.jpg);}
    
    .listArea{margin:0px auto; background:url(/images/mainBar.png)repeat-y center center; }
    .listArea li{padding:50px 0 400px 0; background-position:center; background-repeat:no-repeat; background-size:auto; background-attachment:fixed;
                 font-size:120px; font-weight:900; color: #000;	-webkit-text-stroke: 1.5px #fff;	-webkit-text-fill-color: transparent; transition-duration:0.5s; text-shadow:rgba(22, 32, 60, 0.2) 3px 3px 12px;}
    .listArea li b{padding-top:20px; font-size:30px; font-weight:900; color: #000; display:block; line-height:40px; -webkit-text-stroke: 1px #fff;	-webkit-text-fill-color: transparent; transition-duration:0.5s; text-shadow:rgba(22, 32, 60, 0.2) 3px 3px 12px;}
    .listArea li:first-child{padding:400px 0 400px 0;}
    .listArea li:nth-child(odd) {margin:0 50.5% 0 0; text-align:right;}
    .listArea li:nth-child(even) {margin:0 0 0 50.5%;}
    .img1 .listArea li:first-child ,.img2 .listArea li:nth-child(2) ,.img3 .listArea li:nth-child(3) ,.img4 .listArea li:nth-child(4) ,
    .img5 .listArea li:nth-child(5) ,.img6 .listArea li:nth-child(6) ,.img7 .listArea li:nth-child(7),
    .img1 .listArea li:first-child b, .img2 .listArea li:nth-child(2) b, .img3 .listArea li:nth-child(3) b,.img4 .listArea li:nth-child(4) b,
    .img5 .listArea li:nth-child(5) b, .img6 .listArea li:nth-child(6) b, .img7 .listArea li:nth-child(7) b {color:#fff; -webkit-text-stroke:transparent; -webkit-text-fill-color: #fff; }
    
    .contactArea{height:900px; }
    .contactBox{position:absolute; top:200px; width:100%;}
    .contactBox h2{font-size:120px; font-weight:900; color: #000; -webkit-text-stroke: 1.5px #000; -webkit-text-fill-color: transparent; transition-duration:0.5s; padding-left:65px; margin-bottom:220px;}
    .contactBox ul{width:50%; position:absolute; top:15px ; right:65px;}
    .contactBox ul:after{content: ''; display: block; clear: both; visibility: hidden;}
    .contactBox ul  li:nth-child(odd) {float:left; width:35%; margin-bottom:40px; }
    .contactBox ul  li:nth-child(even) {float:left; width:65%; margin-bottom:40px;}
    .contactBox ul li dt{font-size:28px; font-weight:900; margin-bottom:15px;}
    .contactBox ul li dd{font-size:17px; }
    .mapBox{border-bottom:1px solid #ddd;}
}    
/*pc*/