@charset "utf-8";

/* 메인 */
.skip_navigation, .skip_navigation ul {height:0; position:absolute;z-index:200;left:0px;top:0px;width:100%;}
.skip_navigation a{position:absolute; top:-9999px; background:#000; width:100%; height: 30px; text-align: center; color: #fff; line-height: 30px; font-weight: bold; z-index: 100; opacity: 0.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); }
.skip_navigation a:focus,.skip_navigation a:hover,.skip_navigation a:active{top:0;}
.header{position:fixed; left:0; top:0;z-index:30;width:100%;border-top:3px solid #9cb0cd; }
.gnbWrap{overflow:hidden; height:70px; background:#fff; position:relative; border-bottom:1px solid rgba(0,0,0,.1)}
.gnbArea{width:1200px; padding:0 20px; height:100%; margin:0 auto; display:flex; position:relative}
.gnbArea h1{position:absolute; top:50%; transform:translate(0,-50%);}
.gnbArea .gnb{position:absolute; top:50%; right:0; transform:translate(0,-50%); display:flex; justify-content:space-between; width: 630px;}
.gnbArea .gnb > li > a{font-family:'notokr-medium'; display: inline-block; font-size:15px; color: #222; text-decoration:none;}
.gnbArea .gnb > li.on > a{color:#4959f6; }


.mainWrap{ position:relative;min-width:980px;min-height:680px;height:100%; overflow:hidden;}
.sectionWrap{ position:absolute; left:0; top:0; width: 100%;}
.section{ position:relative; overflow:hidden}
.section .sectionCon{max-width:1250px; width:65%; min-width:1100px; position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); }

.section01{z-index:10; background:linear-gradient(#161838, #212555 78.5%, #fff 20%); }
.section01 .section00Wrap{overflow:hidden; width:100%; height:100% !important; position:relative; background:url("../images/main/section00_back.png") no-repeat; background-position-y:65%; background-position-x:center; background-size:110%;  border:1px solid blue}
.section01 .section00Wrap-01{height:20%; background:#fff;}
.section01 .btn_main_down{ display: block; position: absolute; left: 50%;bottom:40px;margin:0 0 0 -45px;}

.sectionCon .title{font-family:'notokr-bold'; font-size:80px; color:#fff; line-height:1.05em}
.sectionCon .title span.grdient{background:linear-gradient(to right, #7df6ff, #1b72ff); background-clip:text; webkit-background-clip:text; color:transparent;}
.sectionCon .explain{font-family:'notokr-light'; font-size:20px; color:#fff; line-height:1.5em}
.sectionCon .title .yellow{color:yellow}
.sectionCon .m-manu{width:660px; color:#fff; font-size:14px; font-family:'notokr-bold';}
.sectionCon .m-manu span{font-stretch:ultra-condensed}
.sectionCon .m-manu span::before {content: "🔗"; }

.section02{background:url('../images/main/section01_back.jpg') no-repeat center; background-color:#000; background-size:cover}
.section02 .title{font-family:'notokr-bold'; font-size:80px; color:#74acff; line-height:1.15em}
.w-card{width:22%; border:2px solid rgba(255,255,255,1); padding:40px; background:rgba(255,255,255,.08); border-radius:10px; font-size:20px; color:#fff; font-family:'notokr-regular'}
.card-title{font-size:30px; line-height:1.2em; font-family:'notokr-bold'}
span.bullet{margin-right:7px; width:6px; height:6px; border-radius:4px; background:#fff; opacity:.4; display:inline-block; vertical-align:middle}

.section03{background:url('../images/main/section02_back.jpg') no-repeat center; background-color:#ca73fe; background-size:cover}
.section03 .sectionCon .title{font-family:'notokr-light'; font-size:50px; color:#fff; line-height:1.15em; text-align:center}
.section03 .sectionCon .sys-title{line-height:1.3em; width:24%; border-bottom:4px solid #fff; text-align:center; font-size:18px; font-family:'notokr-bold'; color:#fff; padding:4px}
.dim-title{opacity:.5}
.sys-bg{border-radius:15px; background:url('../images/main/sys_bg.png') no-repeat; width:100%; height:379px; background-size:cover}
.sys-copy{padding:40px; font-size:30px; font-family:'notokr-regular'; text-shadow:2px 3px 4px rgba(0,0,0,.6); color:#fff; line-height:1.4em}
.sys-detail ul li{font-size:18px; line-height:1.8em;}
.sys-detail ul li::before{content:"● "; font-size:6px; vertical-align:middle; opacity:.6; width:10px; display:inline-block;}

.section04{z-index:10;background:linear-gradient(#122f71 10%, #1c53b1 50%, #1c53b1); }
.do-copy{font-size:22px; font-family:'notokr-demilight'; color:#fff; line-height:1.5em}

.port-box{width:100%; height:300px; position:absolute; top:50%;}
.port-card{float:left; display:inline-block; width:470px; height:300px; overflow:hidden; border-radius:10px; background:#fff; margin:0 25px; box-sizing:border-box}

.section05, .section06{z-index:10;background:linear-gradient(#c7c7c7 10%, #f3f3f3 50%, #f3f3f3); }
.section05 .title, .section06 .title{font-family:'notokr-light'; font-size:44px; color:#000; line-height:1.15em; text-align:center}
.work-img-area{width:500px}
.work-text-area{width:600px; text-align:left; padding:30px; font-size:17px; line-height:1.5em; text-align:justify}
.work-text-area .title{font-family:'notokr-bold'; font-size:30px; }

.section07{background:url('../images/main/section07_back.jpg') no-repeat center; background-color:#101626; background-size:cover}
.contact-copy-01{font-family:'notokr-medium'; font-size:25px; color:#fff; line-height:1.45em;}
.contact-copy-02{font-family:'notokr-regular'; font-size:16px; color:#fff; line-height:1.6em;}
.btn-pink{background:#c02fff}

.section08-bg{position:relative; width:100%; height:100%}
.section08 .btn_main_top{ display: block; position: absolute; right: 17%; bottom: 0; margin-left:439px;}
.section08 .section08-bg-left{position:absolute; width:50%; height:100%; left:0; background:url("../images/main/section08_back.png") no-repeat; background-position-y:bottom; background-position-x:right; background-color:#ececec}
.section08 .section08-bg-right{position:absolute; width:50%; height:100%; right:0; background:linear-gradient(#40548d 20%, #5977c3, #5977c3); }
.section08 .title-01{font-size:75px; font-family:'notokr-bold'; color:#000; text-align:center; line-height:1.02em}
.section08 .s-copy-01{font-size:18px; font-family:'notokr-regular'; color:#000; text-align:center}
.section08 .title-02{font-size:75px; font-family:'notokr-bold'; color:#fff; text-align:center; line-height:0.9em}
.section08 .s-copy-02{font-size:18px; font-family:'notokr-regular'; color:#fff; text-align:center}
.icon-tit{font-size:15px; color:#fff; font-family:'notokr-light'; line-height:1.2em; margin-top:6px}
.icon-tit span{font-size:16px; font-family:'notokr-bold'}
button.btn-download{background:#008ec0}
button.btn-apply{background:#323b8e}
.section09{background-color:#212e50}
.section09 .foot-cont{width:65%; min-width:1100px; color:#fff; margin:0 auto; text-align:center}
.foot-add{font-size:18px; font-family:'notokr-regular'; line-height:1.4em}
.copyright{font-size:12px; font-family:'notokr-light'; }

.port-img{background:#fff; border-radius:10px; overflow:hidden; box-sizing:border-box; box-shadow:20px 20px 15px rgba(0,0,0,.4);}
.slide{border:0px solid lightgray; width:100%;  margin: auto;  position: relative;}
.slide-wrap {height:250px;}
.btn {padding:0; border:0px solid skyblue;  border-radius: 0.5rem;}
.btn,.slider-dot {position: absolute;  cursor: pointer;}
.btn {top:50%; display:inline-block; width:50px; height:50px; border-radius:25px; background:rgba(0,0,0,.6); border:0}
.prev {left:30px;}
.next {right:30px;}
.sliderUl {display: flex;  transition: transform 0.5s ease; /* 애니메이션 효과 추가 */}
.slider {flex: 0 0 700px;  width:700px;  width: calc(100% / 3); /* 3등분 상태 */ border:0px solid blue}
.slider > div {position: relative;  padding-top: 35%;}
.slider > div > * {  position: absolute;  top: 0;  left: 0;}
.slider > div img {width: 470px;  height: 300px; object-fit: cover;}
.slider > div > div.port-copy{top:311px; font-size:15px; z-index:10; color:#fff; padding:8px 10px; vertical-align:middle}
.port-copy span{margin-right:5px; width:6px; height:6px; border-radius:4px; background:yellow; opacity:.8; display:inline-block; vertical-align:middle}
.slider-dot {  left: 40%;  bottom: -30px;}
.slider-dot > span {  position: absolute;  width: 25px;  height: 25px;  border-radius: 50%;  background-color: rgb(209, 223, 228);  text-align: center;}
.slider-dot > span:first-of-type {  /* 화면 정중앙에 보이는 사진이 first child*/  background-color: skyblue;  color: white;}

.mainStep{ position:fixed; left:50%;top:50%;margin:-108px 0 0 535px;z-index:19; display: none; width: 120px;}
.mainStep ul{ margin: 30px 0 13px 0;}
.mainStep li{height:36px;}
.mainStep li:first-child{ margin-top:0px;}
.mainStep li a{ font-size: 13px; color: #bbb; display:inline-block; border-bottom:1px solid #8c8c8c; height:22px; text-decoration:none;}
.mainStep li a .txt{ display: none;}
.mainStep li a:hover,
.mainStep li a:focus,
.mainStep li.on a{color: #33aeff; border-bottom: 2px solid #3684b7}
.mainStep li a:hover .txt,
.mainStep li a:focus .txt,
.mainStep li.on a .txt{ display: inline-block; margin-left: 5px;}
.mainStep .btn_main_top{ margin-left:-2px;}

.section2 .mainStep li a{color:#000}
.section2 .mainStep li a:hover, .section2 .mainStep li a:focus, .section2 .mainStep li.on a, .section3 .mainStep li a:hover, .section3 .mainStep li a:focus, .section3 .mainStep li.on a{color:#fff; border-bottom:2px solid rgba(255,255,255,.6)}

.section4 .mainStep li a, .section5 .mainStep li a{color:#666}
.section4 .mainStep li.on a, .section5 .mainStep li.on a{color:#000; border-bottom: 2px solid #00b4ff}
.section4 .mainStep li a:hover, .section4 .mainStep li a:focus, .section4 .mainStep li.on a, .section5 .mainStep li a:hover, .section5 .mainStep li a:focus, .section5 .mainStep li.on a{color:#000; border-bottom:2px solid rgba(0,0,0,.3)}

.section6 .mainStep li a{color:#fff}
.section6 .mainStep li.on a{color:#000; border-bottom:2px solid #4083f1}
.section6 .mainStep li a:hover, .section6 .mainStep li a:focus, .section6 .mainStep li.on a{color:#fff; border-bottom:2px solid rgba(255,255,255,.3)}

.section7 .mainStep li a, .section8 .mainStep li a{color:#fff}
.section7 .mainStep li.on a, .section8 .mainStep li.on a{color:#000; border-bottom:2px solid #4083f1}
.section7 .mainStep li a:hover, .section7 .mainStep li a:focus, .section7 .mainStep li.on a,
.section8 .mainStep li a:hover, .section8 .mainStep li a:focus, .section8 .mainStep li.on a{color:#fff; border-bottom:2px solid rgba(255,255,255,.3)}