@charset "utf-8";


@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:180px;width:180px;}
h1 img {width:100%;}

.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 {padding:40px 40px; position: relative;text-align:center; width:200xp; }
.header .dep1:hover {text-shadow: 3px 3px 6px #7bc1e1}
.header a {color:#fff; font-size:20px; display: block; width: 100%;}


/*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:890px;}
.con1 .inner {max-width:1280px;}
.con1 { height:900px; position:relative; 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.png) no-repeat 0 0 / cover}
.con2 p {color: #fff;}
.con2 .inner > div:nth-child(1) {margin-bottom: 100px;}
.con2 .inner > div:nth-child(n+2) {margin-bottom: 100px;}

.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; margin-bottom: 30px; text-align: center; color: #d3d3d3;}
.con2 .inner div:nth-child(1) .bfbar {position:relative;top:-5px;font-size:16px; line-height:28px; text-align: center;}
.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:flex;position:relative;max-height:370px;overflow:hidden; align-items: center; justify-content: space-between;}
.con2 .inner div .contsli  {width:50%; display:flex;flex-direction: column; align-items: flex-start}
.con2 .inner div:nth-child(3) .contsli, .con2 .inner div:nth-child(5) .contsli {text-align: right; align-items: flex-end;}
.con2 .inner div .contsli  p:nth-child(1) {font-size:35px; font-weight:800; margin-bottom:20px; line-height: 1.3;}
.con2 .inner div .contsli  p:nth-child(2) { font-size:17px;line-height:30px; color: #d3d3d3;}
.con2 .inner div:nth-child(2) img, .con2 .inner div:nth-child(3) img, .con2 .inner div:nth-child(4) img, .con2 .inner div:nth-child(5) img {position:relative; width: 400px; height: 270px; object-fit: cover;}

.con3 { width: 100%; background: #102946; height: 800px; position: relative; overflow:hidden}
.con3 .circle_wrap > div {border-radius: 100%; border: 1px dashed #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.con3 .circle_wrap .circle1 {width: 250px; height: 250px; opacity: 0.2;}
.con3 .circle_wrap .circle2 {width: 450px; height: 450px; opacity: 0.35;}
.con3 .circle_wrap .circle3 {width: 650px; height: 650px; opacity: 0.5;}
.con3 .title_wrap {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center;}
.con3 .list_wrap {width: 720px; height: 652px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.con3 .title_wrap h4 {font-size: 20px; font-weight: 700; color: #76a4f2; margin-bottom: 23px;}
.con3 .title_wrap p {font-size: 25px; font-weight: 600; color: #fff; line-height: 1.4;}
.con3 .list_wrap ul li {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; letter-spacing: -1.2px; font-weight: 600; white-space: nowrap;}

.con3 .list_wrap ul li:nth-child(1) {font-size: 20px; top: 8%; left: 78%; color: #bbb;}
.con3 .list_wrap ul li:nth-child(2) {font-size: 24px; top: 15%; left: 38%; color: #ccc;}
.con3 .list_wrap ul li:nth-child(3) {font-size: 22px; top: 23%; left: 74%;}
.con3 .list_wrap ul li:nth-child(4) {font-size: 24px; top: 32%; left: 21%;}
.con3 .list_wrap ul li:nth-child(5) {font-size: 20px; top: 38%; left: 86%;}
.con3 .list_wrap ul li:nth-child(6) {font-size: 20px; top: 53%; left: 9%; color: #ccc;}
.con3 .list_wrap ul li:nth-child(7) {font-size: 26px; top: 58%; left: 93%;}
.con3 .list_wrap ul li:nth-child(8) {font-size: 26px; top: 74%; left: 28%;}
.con3 .list_wrap ul li:nth-child(9) {font-size: 20px; top: 71%; left: 74%;}
.con3 .list_wrap ul li:nth-child(10) {font-size: 22px; top: 98%; left: 37%; color: #ccc;}
.con3 .list_wrap ul li:nth-child(11) {font-size: 22px; top: 91%; left: 75%;}
  

.con4 {padding:100px 0; background:#fff}
.con4 .inner {max-width:1000px; display: flex; justify-content: space-between; align-items: center;}
.con4 .inner > div > p:nth-child(1) {font-size:40px; font-weight: 800; margin-bottom: 8px; color: #0a3686;}
.con4 .inner > div > p:nth-child(2) {font-size:40px; font-weight: 800; margin-bottom: 30px;}
.con4 .inner > div > p:nth-child(3) {font-size:20px; line-height: 32px; letter-spacing: -0.5px;}
.con4 .inner > div:nth-child(2) {display:grid; grid-template-columns: repeat(2, 1fr); gap: 40px 50px;}
.con4 .inner > div:nth-child(2) > div{text-align: center;}
.con4 .inner > div:nth-child(2) > div > p:nth-child(1) {font-size:18px;font-weight:600;letter-spacing: -1px; margin-bottom: 15px;}
.con4 .inner > div:nth-child(2) > div > p:nth-child(2) {font-size:40px;font-weight:800; color:#113796}
.con4 .inner > div:nth-child(2) > div:nth-child(4) {margin:0}


.con5 { margin:0; width: 100%;background: linear-gradient(to bottom, #001925, #051128);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; top: 50%; left:50%; transform:translateX(-50%) translateY(-50%);}
.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:50%; font-size: 52px; font-weight:bold; left:50%; transform:translateX(-50%) translateY(-50%); text-align: center; line-height: 1.2;}
.con5 > div > div > p:nth-child(2) {left:100px; top:180px;}
.con5 > div > div > span:nth-child(3) {top:194px; left:252px; transform:rotateZ(-52deg)}
.con5 > div > div > p:nth-child(4) {left:680px; top:115px ;}
.con5 > div > div > span:nth-child(5) {top:150px; left:835px; transform:rotateZ(0); height:70px;}
.con5 > div > div > p:nth-child(6) {left:600px; top:510px ;}
.con5 > div > div > span:nth-child(7) {top:445px; left:755px; transform:rotateZ(-140deg)}


@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}