@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* reset */
*{margin:0; padding:0; box-sizing:border-box;}
body {background-color: #fff; width: 100%; height: 100%; font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', dotum, sans-serif; font-size: 20px; font-weight:100; color: #666; word-break: keep-all; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust:none;}
h1,h2,h3,h4,h5,h6 { font-size:1em; }
ol,ul{list-style:none; }
hr{display:none;}
fieldset, img { border:0;}
img {max-width:100%;}
a{ font-size:0.8em; color:#666; text-decoration:none;}
img,input,select,label{vertical-align:middle;}
html,body {height:100%;}

/*PC */
html {scroll-behavior: smooth;}
#wrap {position: relative; width: 100vw; min-width: 1280px; height: auto; overflow: hidden;}
#floating {position: fixed; left: 0px; bottom:200px; z-index: 999; display: inline-block; width: 160px; height: 68px; background:url(../img/btn_down.png) center top no-repeat;}
#floating a {display:block; width: 160px; height: 68px; text-indent:-9999px;}
/* header */
#header {
    position: absolute;
    z-index: 999;
    width:100%;
    background-color: transparent;
    top:0;
    left:0;
    text-align: center;
  }
  #header .menu_bg {z-index: 1;
    opacity:0; width: 100%; height: 60px;
    background: url(../img/menu_bg.png) center top repeat-x;
  -webkit-transition-duration:0.4s;
  -webkit-transition-timing-function:ease;
  transition-duration:0.4s;
  transition-timing-function:ease;
}
#header.scrollA {
    position:fixed;}
#header.scrollA .menu_bg {opacity:1;}
#header .menu_txt{z-index: 10; position: absolute;left: 0; top:0; width: 100%; overflow-y:auto;}
#header .menu_txt ul{margin:0 auto; padding-top: 38px; width: 1280px; text-align: center;
  -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease;
  transition-duration:0.4s; transition-timing-function:ease;}
#header.scrollA .menu_txt ul {padding-top: 10px;}
#header .menu_txt ul li{display: inline-block; margin: 0 30px;}
#header .menu_txt ul li a{font-size:18px; color:#fff;}
/*visual*/
#visual{position: relative; width:100%; max-width:100%; height:870px; margin:0 auto; background:url(../img/main_img.png) center top no-repeat; text-align: center;}
#visual .vImg03_01 {z-index: 10; opacity: 1; animation-name: aOpac01; animation-duration: 1.2s; animation-iteration-count: infinite;
  position: absolute; width:100%; height:100%; background:url(../img/main_img_03_sign01.png) center top no-repeat;}
#visual .vImg03_02 {animation-name: aCurs01; animation-duration: 1s; animation-iteration-count: infinite;
  position: absolute; width:100%; height:100%; background:url(../img/main_img_03_sign02.png) center top no-repeat;}
#visual .btn_goto_08 {z-index: 100; position: absolute; top:518px; left:50%; margin-left: -130px; display:block; width: 260px; height: 64px; text-indent:-99999px; background:url(../img/btn_goto_08.png) center top no-repeat;}
.bannaer {position: absolute; top:624px; left:0; width:100%; height:156px; background:url(../img/banner_txt.png) center no-repeat; background-color: rgba(68,127,255,0.4);}
#visual .vImgcoV {opacity: 1; animation-name: aOpac02; animation-duration: 2s; animation-iteration-count: infinite;
  position: absolute; width:100%; height:100%; background:url(../img/main_img_coV.png) center top no-repeat;}
@keyframes aOpac01 {
  from {opacity: .8;}
  to {opacity: 1;}
}
@keyframes aCurs01 {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes aOpac02 {
  from {opacity: 1;}
  to {opacity: 0.4;}
}
@keyframes aMove {
  0% {margin-top: 0px;}
  25% {margin-top: 5px;}
  50% {margin-top: -20px;}
  75% {margin-top: 10px;}
  100% {margin-top: 0px;}
}

/*01 service*/
.mainC01 {position: relative; width:100%; max-width:100%; height:884px; background:url(../img/main_01.png) center top no-repeat;}

/*02 infra*/
.mainC02 {position: relative; width:100%; max-width:100%; height:983px; background:url(../img/main_02.png) center top no-repeat;}

/*03 semantic*/
.mainC03 {position: relative; width:100%; max-width:100%; height:836px; background:url(../img/main_03.png) center top no-repeat;}

/*04 process*/
.mainC04 {position: relative; width:100%; max-width:100%; height:757px; background:url(../img/main_04.png) center top no-repeat;}

/*05 function*/
.mainC05 {position: relative; width:100%; max-width:100%; height:1085px; background:url(../img/main_05.png) center top no-repeat;}

/*06 rule*/
.mainC06 {position: relative; width:100%; max-width:100%; height:859px; background:url(../img/main_06.png) center top no-repeat;}

/*07 partner*/
.mainC07 {position: relative; width:100%; max-width:100%; height:928px; background:url(../img/main_07.png) center top no-repeat;}

/*08 contact*/
.mainC08 {position: relative; width:100%; max-width:100%; height:1500px; background:url(../img/main_08.png) center top no-repeat;}
  #popMainInq {margin:0 auto; padding-top: 240px; width: 100%; max-width: 760px; font-size: 20px !important;}
  #popMainInq .btn_PMI_close_box {position: relative; margin: 0; padding: 0; width: 100%;}
  #popMainInq .btn_PMI_close {position: absolute; top:-40px; right: -35px; width: 27px; height: 27px; text-indent:-9999999999px; background: url('../img/pMI_icon_close.png') center no-repeat;}
  #popMainInq .st_tt {visibility: hidden;}
  #popMainInq .st_tt h1 {padding: 70px 0 10px; font-weight: normal; text-align: center; background: url('../img/img_popMainInq_tt01.png') center top no-repeat;}
  #popMainInq .st_tt .line_out .line_in {width: 24px; height: 2px; margin: 0 auto 28px; background-color: #3db5fa;}
  #popMainInq .form_box .PMI_ul_form {clear: both; margin-bottom: 20px; padding-bottom: 20px; width: 100%; height: auto; overflow: hidden; border-bottom: 1px dashed #c0c4cc;}
  #popMainInq .form_box .PMI_ul_form li {margin-bottom: 1rem; width: calc(50% - 12px); min-height: 52px; float: left;}
  #popMainInq .form_box .PMI_ul_form li.st_phone,
  #popMainInq .form_box .PMI_ul_form li.st_sum {margin-left: 24px;}
  #popMainInq .form_box .PMI_ul_form li.st_inq {width: 100%;}
  #popMainInq .form_box .PMI_ul_form li .icon {display: block; position: absolute; width: 40px; height: 40px; overflow: hidden; background: url('../img/pMI_icon.png') no-repeat;}
    #popMainInq .form_box .PMI_ul_form li.st_email .icon {background-position: 0 0;}
    #popMainInq .form_box .PMI_ul_form li.st_phone .icon {background-position: 0 -40px;}
    #popMainInq .form_box .PMI_ul_form li.st_cpn .icon {background-position: 0 -80px;}
    #popMainInq .form_box .PMI_ul_form li.st_sum .icon {background-position: 0 -120px;}
    #popMainInq .form_box .PMI_ul_form li.st_inq .icon {background-position: 0 -160px;}
  #popMainInq .form_box .PMI_ul_form li > input {margin-left: 46px; padding: 12px 20px; width: calc(100% - 46px); font:18px "Noto Sans KR", sans-serif !important;/*.9rem*/; border: 1px solid #c0c4cc;}
  #popMainInq .form_box .PMI_ul_form li > textarea {resize: none; margin-left: 50px; padding: 12px 20px; width: calc(100% - 52px); height: 10em; font:18px "Noto Sans KR", sans-serif !important;/*.9rem*/; border: 1px solid #c0c4cc;}
  #popMainInq .form_box .chk_con {position: relative; width: 100%; height: auto; overflow: hidden; }
  #popMainInq .form_box .chk_con .chk_con_chk {text-align: center;}
  #popMainInq .form_box .chk_con > table {margin: 20px 0 40px; line-height: 1.5em; font-size: 1rem; border: 1px solid #cfcfcf; border-left: 0; border-spacing:0;}
  #popMainInq .form_box .chk_con > table th {padding: 10px; border-left: 1px solid #cfcfcf; background: #eee;}
  #popMainInq .form_box .chk_con > table td {padding: 20px; line-height: 1.4em; font-size: 1rem; border-left: 1px solid #cfcfcf; text-align: center;}
    #popMainInq .form_box .chk_con > table td:last-child {text-align: left;}
  #popMainInq .form_box .btn_con {text-align: center;}
  #popMainInq .form_box .btn_con > button {white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: 0; margin: 0; transition: .1s; padding: 12px 20px; font-size: 14px;}
  #popMainInq .form_box .btn_con > .pMI_btn01 {width: 204px; height: 54px; overflow: hidden; background: url('../img/btn_contact.png') no-repeat; text-indent:-99999px;}
/*Footer*/
#footer{z-index: 1; position: absolute; bottom: 0; width:100%; max-width:100%; height:auto; overflow:hidden; text-align: center; background-color:#202224;}





/*block*/
.blockCon {
  position: fixed; left:50%; bottom: -3405px; height: 3405px;
  margin-left:-607px;
  width: 1214px;
  transition:.5s ease-in-out /*느렸다빨리짐*/;
}

.blockCon .block {transition:.3s ease-in-out /*느렸다빨리짐*/;}

.blockCon.block_lTor,
.blockCon.block_rTol {display: block; bottom: -605px; height: 910px; opacity: .2; transition: .3s ease-in-out /*느렸다빨리짐*/; }
.blockCon.block_lTor.lTorOn,
.blockCon.block_rTol.rTolOn {display: block; bottom: 0; height: 605px; opacity: .6; transition: .3s ease-in-out /*느렸다빨리짐*/; }
.blockCon.block_lTor.lTorOff,
.blockCon.block_rTol.rTolOff {display: block; bottom: -605px; height: 910px; opacity: 0; transition: .3s ease-in-out /*느렸다빨리짐*/;}

.block_lTor .block {margin-top: -62px; position: absolute;
  background: url('../img/block_lTor.png') no-repeat;
  width: 140px; height: 125px;
}
  .block_lTor .block.nthC01 {top: 0%; left: 0px; opacity: .1;}
  .block_lTor .block.nthC02 {top: 10%; left: 105px; opacity: .2;}
  .block_lTor .block.nthC03 {top: 20%; left: 210px; opacity: .4;}
  .block_lTor .block.nthC04 {top: 30%; left: 315px; opacity: .6;}
  .block_lTor .block.nthC05 {top: 40%; left: 420px; opacity: .8;}
  .block_lTor .block.nthC06 {top: 50%; left: 525px; opacity: 1;}
  .block_lTor .block.nthC07 {top: 60%; left: 630px; opacity: .8;}
  .block_lTor .block.nthC08 {top: 70%; left: 735px; opacity: .6;}
  .block_lTor .block.nthC09 {top: 80%; left: 840px; opacity: .4;}
  .block_lTor .block.nthC10 {top: 90%; left: 945px; opacity: .2;}
  .block_lTor .block.nthC11 {top: 100%; left: 1050px; opacity: .1; width: 164px; height: 125px; background: url('../img/block_lTor_last.png') no-repeat;}

  .block_rTol .block {margin-top: -62px; position: absolute;
    background: url('../img/block_rTol.png') no-repeat;
    width: 164px; height: 125px;
  }
    .block_rTol .block.nthC01 {top: 100%; left: 0px; opacity: .1; width: 164px; height: 125px; background: url('../img/block_rTol_last.png') no-repeat;}
    .block_rTol .block.nthC02 {top: 90%; left: 105px; opacity: .2;}
    .block_rTol .block.nthC03 {top: 80%; left: 210px; opacity: .4;}
    .block_rTol .block.nthC04 {top: 70%; left: 315px; opacity: .6;}
    .block_rTol .block.nthC05 {top: 60%; left: 420px; opacity: .8;}
    .block_rTol .block.nthC06 {top: 50%; left: 525px; opacity: 1;}
    .block_rTol .block.nthC07 {top: 40%; left: 630px; opacity: .8;}
    .block_rTol .block.nthC08 {top: 30%; left: 735px; opacity: .6;}
    .block_rTol .block.nthC09 {top: 20%; left: 840px; opacity: .4;}
    .block_rTol .block.nthC10 {top: 10%; left: 945px; opacity: .2;}
    .block_rTol .block.nthC11 {top: 0%; left: 1050px; opacity: .1; background: url('../img/block_rTol.png') no-repeat;}
  /*off*/
  .off .block.nthC01,
  .off .block.nthC02,
  .off .block.nthC03,
  .off .block.nthC04,
  .off .block.nthC05,
  .off .block.nthC06,
  .off .block.nthC07,
  .off .block.nthC08,
  .off .block.nthC09,
  .off .block.nthC10,
  .off .block.nthC11 {margin-top: -62px; top: auto; bottom:0;}
 .mainC04Z {z-index: 100;}