@font-face {
 font-family: NanumSquare;;
 font-weight: 400;
 src: url(Font/NanumSquareR.eot);
 src: url(Font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(Font/NanumSquareR.woff) format('woff'),
      url(Font/NanumSquareR.ttf) format('truetype');
}
@font-face {
 font-family: NanumSquare;;
 font-weight: 700;
 src: url(Font/NanumSquareB.eot);
 src: url(Font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(Font/NanumSquareB.woff) format('woff'),
      url(/Font/NanumSquareB.ttf) format('truetype');
}
@font-face {
 font-family: NanumSquare;;
 font-weight: 800;
 src: url(Font/NanumSquareEB.eot);
 src: url(Font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(Font/NanumSquareEB.woff) format('woff'),
      url(Font/NanumSquareEB.ttf) format('truetype');
}
@font-face {
 font-family: NanumSquare;;
 font-weight: 300;
 src: url(Font/NanumSquareL.eot);
 src: url(Font/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(Font/NanumSquareL.woff) format('woff'),
      url(Font/NanumSquareL.ttf) format('truetype');
}


* { font-family: NanumSquare !important}
.inner {max-width:1280px; height:100%;margin:0 auto; position:relative;}
.warpper {position:relative}


h1 {min-width:250px;width:250px;}
h1 img {width:70%;}

.scroll .header {background:rgba(0,0,0,0.7); transition:2s;}
.header {z-index:100; height:100px;position:fixed; width:100%;transition:1s;}
.header .inner { display: flex;position: relative; left:50%; transform:translateX(-50%);width: 100%;height: 100px;margin:0;align-items: center;justify-content: space-between; z-index:100}
.header .nav {display:flex; flex-direction: row; align-items: center;}
.header .dep1 {position: relative;text-align:center; width:200xp; }
.header .dep1:hover {text-shadow: 3px 3px 6px #7bc1e1}
.header .dep1 a {color:#fff; font-size:20px; padding: 40px 40px;}


/*bg 애니메이션*/
.bgbg img{ animation: visualImage 2s forwards; transform: scale(1.0); position: absolute; top: 0; left: 0;}
@keyframes visualImage {0% {transform: scale(1.2);}100% {transform: scale(1.0);}}



/*contents*/

.contents .inner {max-width:860px;}
.con1 .inner {max-width:1280px;}
.con1 { height:900px; position:relative; left:50%;transform:translateX(-50%); z-index:-1; overflow:hidden}
.con1 .inner > div {position:absolute; top:42%; }
.con1 .inner > div > *{color:#fff}
.con1 .inner > div p:nth-child(1) {font-size:19px;}
.con1 .inner > div p:nth-child(3) {font-size:20px;margin-top:25px; line-height:30px}
.con1 .inner > div h2 {font-size:65px; font-weight:bold; line-height:80px;}


.con2 {padding:100px 0 ;background:url(img/mibg2.webp) no-repeat center / cover;}
.con2 .inner div {display:flex;max-height:370px; overflow:hidden}
.con2 .inner div:nth-child(1) {align-items:center;justify-content:space-between;margin-bottom:20px;}
.con2 .inner div:nth-child(1) > div {flex-direction: column;margin-right:70px; align-items:flex-start}
.con2 .inner div:nth-child(1) > div > div { margin: 0;margin-right:0;flex-direction: row; align-items: flex-start;}
.con2 .inner div:nth-child(1) > div > p { font-size:35px;font-weight:800; padding: 1rem 0;}
.con2 .inner div:nth-child(1) .bfbar {position:relative;top:-5px;font-size:16px; line-height:1.5rem;}
.con2 .inner div:nth-child(1) .bfbar:before {content:""; background:#333; width:3px;height:50px;position:absolute; top:50%; transform:translateY(-50%); left:-30px;}
.con2 .inner div:nth-child(2),.con2 .inner div:nth-child(3),.con2 .inner div:nth-child(4), .con2 .inner div:nth-child(5) {display:block;position:relative;max-height:370px;overflow:hidden}
.con2 .inner div:nth-child(2) {background:linear-gradient(#cdcdcd ,#e4e4e4);}
.con2 .inner div .contsli  {width:50%;position:absolute; display:flex;flex-direction: column; align-items: flex-start;left: 50px;;top: 50%;transform: translateY(-50%); }
.con2 .inner div .contsli  p:nth-child(1) {font-size:35px; font-weight:800; margin-bottom:20px;}
.con2 .inner div .contsli  p:nth-child(2) { font-size:19px;line-height:1.5rem;}
.con2 .inner div:nth-child(3) {background:#d8d9de;}
.con2 .inner div:nth-child(4) {background:#d3cdbd}
.con2 .inner div:nth-child(5) {background:#fae2e5;}
.con2 .inner div:nth-child(2) img, .con2 .inner div:nth-child(4) img{position:relative; left:35%}
.con2 .inner div:nth-child(3) .contsli {position:absolute; left:auto;right:50px;width:auto;}
.con2 .inner div:nth-child(5) .contsli {position:absolute; left:auto; right:50px;width:auto;}

.con3 { width: 100%; background: #102946; height: 800px; position: relative;overflow:hidden}
.con3 > div.conIG {max-width:1280px;position:relative;height:100%; left:50%; transform:translateX(-50%); top:-35px;}
.con3 > div > img{height:104%}
.con3 > div:nth-child(2) {position:absolute; top:0; background:rgba(0,0,0,0.4); width:100%; height:100%;}
.con3 > div:nth-child(2) > p {color:#fff;text-shadow: 2px 2px 6px #000; margin-top:133px; text-align:center; font-size: 40px;  font-weight:bold}

.con3 .cont3wp{  position:absolute; width:100%; height: 100%;  font-size: 40px; font-weight: 700;top:0;left:50%; transform:translateX(-50%);}
.reveal{ overflow: hidden; position:absolute;color:#fff;text-shadow: 2px 2px 4px #7bc1e1;}
.reveal:nth-child(1) {font-size:70px; top:70%}
.reveal:nth-child(2) {font-size: 60px;left:24%;top:31%}
.reveal:nth-child(3) {left:32%;top:54%}
.reveal:nth-child(4) {left:74%;top:61%}
.reveal:nth-child(5) {left:82%;top:28%;font-size:25px}
.reveal:nth-child(6) {left:0%;top:59%;font-size:30px;}
.reveal:nth-child(7) {left:77%;top:88%}
.reveal:nth-child(8) {left:25%;top:85%}
.reveal:nth-child(9) {left:0;top:41%}
.reveal:nth-child(10) {left:61%;top:75%}
.reveal:nth-child(11) {left:68%;top:45%}


.reveal_content {opacity:0}
.on .reveal_content{ transform: translateY(100%); animation: reveal 0.5s cubic-bezier(1, 0, 0.3, 0.9) forwards; opacity:1; }
.reveal:nth-child(2).on .reveal_content{animation-delay: 0.6s }
.reveal:nth-child(3).on .reveal_content{animation-delay: 1.2s}
.reveal:nth-child(4).on .reveal_content{animation-delay: 1.8s}
.reveal:nth-child(5).on .reveal_content{animation-delay: 2.4s}
.reveal:nth-child(6).on .reveal_content{animation-delay: 3.0s}
.reveal:nth-child(7).on .reveal_content{animation-delay: 3.6s}
.reveal:nth-child(8).on .reveal_content{animation-delay: 4.2s}
.reveal:nth-child(9).on .reveal_content{animation-delay: 4.8s}
.reveal:nth-child(10).on .reveal_content{animation-delay: 5.4s}
.reveal:nth-child(11).on .reveal_content{animation-delay: 6.0s}



@keyframes reveal{ from{ transform: translateY(100%)} to{ transform: translateY(0);}}
  
  




.con4 {padding:100px 0 ; background:#EFF2F4}
.con4 .inner {max-width:1000px}
.con4 .inner > div:nth-child(1) {text-align:center;}
.con4 .inner > div > p:nth-child(1) {font-size:35px}
.con4 .inner > div > p:nth-child(2) {font-size:45px; font-weight:bold; margin-bottom:30px}
.con4 .inner > div > p:nth-child(3) {font-size:20px; line-height:25px;}
.con4 .inner > div:nth-child(2) {display:flex;justify-content:space-between;margin-top:35px;}
.con4 .inner > div:nth-child(2) > div{ width: 200px;height: 200px;background: #fff;border-radius: 50%;text-align: center;margin: 0 30px 0 0;border: px solid #cfd7ec}
.con4 .inner > div:nth-child(2) > div > p:nth-child(1) {font-size:25px; margin-top:40px; font-weight:600}
.con4 .inner > div:nth-child(2) > div > p:nth-child(2) {font-size:56px; margin-top:10px; font-weight:800; color:#113796}
.con4 .inner > div:nth-child(2) > div:nth-child(4) > p:nth-child(1) {margin-top:56px}
.con4 .inner > div:nth-child(2) > div:nth-child(4) {margin:0}
.up_dw {  position:relative;  top:0;  width:100px;  height:100px;  border-radius:50%;  background:#000;  animation:ball 1s ease-in Infinite Alternate;}
@keyframes ball {0% {top:0px;}95% {width: 200px;}to {top:20px;width:200px;height:200px}}


.con5 { margin:0; width: 100%;background: #001329;height: 700px;position: relative;overflow:hidden}
.con5 > div.conIG {max-width:1000px;position:relative;height:100%;left:50%; transform:translateX(-50%); }
.con5 > div.conIG > img {width:85%; position:absolute;left:50%; transform:translateX(-50%);bottom:0;}
.con5 > div > div > p {color:#fff; position:absolute;font-size: 30px; }
.con5 > div > div > span { position:absolute; width:4px; height:62px; background:#fff}
.con5 > div > div > span:before {content:"";position:absolute; width:10px; height:10px; border-radius:10px; background:#fff; left:-3px; top:-6px}
.con5 > div > div > p:nth-child(1) {top:75px; font-size: 40px; font-weight:bold; left:50%; transform:translateX(-50%)}
.con5 > div > div > p:nth-child(2) {left:180px; top:195px ;}
.con5 > div > div > span:nth-child(3) {top:220px; left:330px; transform:rotateZ(-52deg)}
.con5 > div > div > p:nth-child(4) {left:683px; top:274px ;}
.con5 > div > div > span:nth-child(5) {top:318px; left:813px; transform:rotateZ(0);height:100px;}
.con5 > div > div > p:nth-child(6) {left:219px; top:600px ;}
.con5 > div > div > span:nth-child(7) {top:586px; left:374px; transform:rotateZ(-90deg)}


@keyframes blink-effect { 50% {opacity: 0.4; }}




/* footer */
.footer {background:#444;position:relative;}
.footer .inner {width:1000px;padding:50px 0 30px 0 ; }
.footer .inner > div { color:#fff; line-height:25px;font-size:14px;}
.footer .inner > div > p > span {margin-left:30px;}

/* side bar */

.sideB {position:fixed; right:20px ;top:50%; transform:translateY(-50%);opacity:0; transition:0.5s}
.sideB li {margin:9px; font-size:20px; font-weight:800; text-align:center; padding:17px 19px; background:#585858c2;border-radius:5px}
.sideB li > a {color:#fff;} 
.sideB li.on > a  {color:#8edcff;}
.sideB li:hover > a {color:#8edcff;}
.scroll .sideB {opacity:1; transition:3s}