/**************************************************/
/************************PC************************/
/**************************************************/
.mi_pc{
    display:block;
}
.mi_tablet{
    display:none;
}
.mi_mob{
    display: none;
}
.mainslider{
    height:100vh;
    width:100%;
}
.mainslider li{
    height:100%;
}
.mainslider li img{
    height:100%;
    width:100%;
    display:block;
}

/*comon*/
.fs25 {font-size:25px!important; }
.fs16 {font-size:16px!important; }
.fs30{ font-size:30px; text-transform: uppercase; font-weight:bold; color:#000;}
.nomr{margin-right:0 !important;}

/*main.css*/
.section{
    width:100%;
    display:block;
}

/*section1 : mainImg*/
.mainImg{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
}
.mainbx{
    width:90%;
    height:85%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999;
}

.mainbx .slogan{
}

.mainbx .slogan .slog_img1{
    position:  absolute;
    top:40%;
    left:50%;
    transform: translateX(-50%);
    opacity:0;
    max-width:380px;
}

.mainbx .slogan .slog_img2{
    position:  absolute;
    top:49%;
    left:50%;
    transform: translateX(-50%);
    opacity:0;
    max-width:664px;
}

.mainbx .slogan .fs16{
    position:  absolute;
    top:65%;
    left:50%;
    transform: translateX(-50%);
    opacity:0;
    color:#ffffff;
    text-align: center;
    font-size:16px;
    line-height:25px;
    font-weight: lighter;
}



.main_sns{
    position:absolute;
    right:-30px;
    top:50%;
    transform:translateY(-50%);
}
.main_sns p{
    transform: rotate(90deg);
    width:90px;
    height:25px;
    line-height:25px;
    text-transform: uppercase;
    color:#fff;
    letter-spacing: 3px;
}
.main_sns .par_line{
    width:1px;
    height:40px;
    margin:20px auto;
    background:#c2c2c2;
}
.main_sns a{
    width:25px;
    height:25px;
    margin:0 auto;
    display:block;
}
.main_sns .snsbtn1{
    background:url(../img/ft_sns_hover.png) no-repeat center;
    margin-bottom:15px;
}
.main_sns .snsbtn2{
    background:url(../img/ft_sns2_hover.png) no-repeat center;
    background-size:100%;
}



.mainbx .main_bot{
    position:  absolute;
    width:100%;
    bottom:0;
}

.mainbx .main_bot .slidenumb{
    position: absolute;
    left:0;
    bottom:0;
    text-align: center;
    color:#fff;
}
.mainbx .main_bot .slidenumb a{
    
}
.mainbx .main_bot .slidenumb .prebtn a{
    background:url(../img/main/slide_pre.png) no-repeat center;
    border:1px solid #ccc;
    width: 56px;
    height: 66px;
    text-indent: -9999px;
}

.mainbx .main_bot .slidenumb .nextbtn a{
    background:url(../img/main/slide_next.png) no-repeat center;
    border:1px solid #ccc;
    width: 56px;
    height: 66px;
    text-indent: -9999px;
}
.mainbx .main_bot .slidenumb .prebtn2 a{
    display:none;
}

.mainbx .main_bot .slidenumb .nextbtn2 a{
     display:none;
}

.mainbx .main_bot .main_sth{
    position:absolute;
    right:0;
    bottom:0;
    color:rgba(255,255,255,0.75);
    font-size:15px; 
    line-height:30px;
    text-transform: uppercase;
    font-weight:lighter;
    text-align: right;
    letter-spacing:2px;
}




/*mouse animation*/
.scrollbx{
    width:200px;
    margin:0 auto;
}
/*마우스애니메이션*/
.mouse p {
      margin-top: 65px;
    margin-left:-13px;
    text-align: center;
      letter-spacing: 4px;
    
      text-transform: uppercase;
      color: #ffffff;
      -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
              animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
}


 .mouse {
      background: #aeb6bc -webkit-linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
      background: #aeb6bc linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
      position: absolute;
    bottom:0;
    right:50%;
    z-index: 9;
      width: 39px;
      height: 59px;
      background-size: 100% 100%;
      border-radius: 100px;
      background-size: 225%;
      -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
          animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}
 .mouse:before,  .mouse:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
}
 .mouse:before {
      width: 35px;
      height: 55px;
      background-color: #aeb6bc;
      border-radius: 100px;
}
 .mouse:after {
      background-color: #ffffff;
      width: 8px;
      height: 8px;
      border-radius: 100%;
      -webkit-animation: trackBallSlide 5s linear infinite;
              animation: trackBallSlide 5s linear infinite;
}

@-webkit-keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #aeb6bc;
  }
  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  30% {
    background-color: #aeb6bc;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #aeb6bc;
  }
  59.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  60% {
    background-color: #aeb6bc;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #aeb6bc;
  }
  89.99%, 100% {
    background-color: #ffffff;
  }
}

@keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #aeb6bc;
  }
  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  30% {
    background-color: #aeb6bc;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #aeb6bc;
  }
  59.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  60% {
    background-color: #aeb6bc;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #aeb6bc;
  }
  89.99%, 100% {
    background-color: #ffffff;
  }
}
@-webkit-keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  6% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  14% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  15%, 19% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
            transform: scale(0.4) translateY(-20px);
  }
  28%, 29.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  36% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  44% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  45%, 49% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
            transform: scale(0.4) translateY(-20px);
  }
  58%, 59.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  66% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  74% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  75%, 79% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
            transform: scale(0.4) translateY(-20px);
  }
  88%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
}
@keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  6% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  14% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  15%, 19% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
            transform: scale(0.4) translateY(-20px);
  }
  28%, 29.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  36% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  44% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  45%, 49% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
            transform: scale(0.4) translateY(-20px);
  }
  58%, 59.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
  66% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  74% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  75%, 79% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
            transform: scale(0.4) translateY(-20px);
  }
  88%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
            transform: scale(1) translateY(-20px);
  }
}
@-webkit-keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes nudgeText {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes nudgeText {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes colorText {
  21% {
    color: #aeb6bc;
  }
  30% {
    color: #ffffff;
  }
  51% {
    color: #aeb6bc;
  }
  60% {
    color: #ffffff;
  }
  81% {
    color: #aeb6bc;
  }
  90% {
    color: #ffffff;
  }
}
@keyframes colorText {
  21% {
    color: #aeb6bc;
  }
  30% {
    color: #ffffff;
  }
  51% {
    color: #aeb6bc;
  }
  60% {
    color: #ffffff;
  }
  81% {
    color: #aeb6bc;
  }
  90% {
    color: #ffffff;
  }
}










/*section2:about*/
.sec2{
    padding:100px 0;
    position:relative;
    overflow:hidden;
    min-height:1500px;
}
.sec2 .layout{
    position:relative;
    z-index:22;
}

.ab_top{
    width: 100%;
    position:absolute;
    top:0;
    clear:both;
}

.ab_top .ab_txt{
    padding:79px 70px;
    width: 465px;
    height: 413px;
    box-sizing: border-box;
    overflow:hidden;
    background: #fff;    
    box-shadow: 2px 5px 10px rgba(0,0,0,0.1);
    position:absolute;
    top:257px;
    left:45px;
    z-index:10;
}

.ab_top .ab_txt .fs14{
    font-size:14px;
    color:#9a9a9a;
    text-transform: uppercase;
    letter-spacing: 5;
    margin-bottom:15px;
    
}
.ab_top .ab_txt .grline{
    width:25px;
    height:1px;
    background: #9a9a9a;
    margin:30px 0 23px;
}

.ab_top .ab_txt .fs16{
    font-size:16px;
    line-height:32px;
    color:#555555;   
}

.ab_top .ab_txt .ab_sns{
    margin-top:20px;
}
.ab_top .ab_txt .ab_sns li{
    float:left;
    margin-right:15px;
    width:25px;
    height:25px;
}
.ab_top .ab_txt .ab_sns li a{
    width:100%;
    height:100%;
    transition:all 0.3s;
}
.ab_top .ab_txt .ab_sns li .fb_btn{
    background: url(../img/ft_sns.png) no-repeat center;
}
.ab_top .ab_txt .ab_sns li .ins_btn{
    background: url(../img/ft_sns2.png) no-repeat center;
    background-size:100%; 
}
.ab_top .ab_txt .ab_sns li .fb_btn:hover{
    background: url(../img/ft_sns_hover2.png) no-repeat center;
}
.ab_top .ab_txt .ab_sns li .ins_btn:hover{
    background: url(../img/ft_sns2_hover2.png) no-repeat center;
    background-size:100%; 
}

.ab_top .ab_img{
    width:791px;
    height:781px;
    background:url(../img/main/about1.png) no-repeat;
    position:absolute;
    top:0;
    right:0;
    z-index:5;
}

.ab_bot{
    position:absolute;
    top:900px;
    width: 100%;
}
.ab_bot li{
    float:left;
    width: 391px;
    overflow:hidden;
    margin-right:13px;
    transition: all 0.3s;
    margin-top:30px;
}
.ab_bot li:hover{
    box-shadow: 2px 5px 10px rgba(0,0,0,0.1);
    margin-top:0;
}
.ab_bot li img{
    width:100%;
}
.ab_bot li .abot_bx{
    width:100%;
    background:#fff;
    padding:30px;
    box-sizing: border-box;
}
.ab_bot li .abot_bx .fs22{
    font-size:22px;
    text-transform: uppercase;
    text-align: center;
    font-weight:bolder;
    color:#222222;
    margin-bottom:10px;
}
.ab_bot li .abot_bx .fs15{
    font-size:14px;
    text-transform: uppercase;
    text-align: center;
    color:#757575;
    width:95%;
    margin:0 auto;
    word-break: keep-all;
}
.letter_s{
    position:absolute;
    top:431px;
    right:0;
}
.letter_o{
    position:absolute;
    top:1013px;
    left:0;
}

.letter_m{
    position:absolute;
    top:1324px;
    left:30px;
}




/*section3:midImg*/
.midImg{
    width:100%; 
    padding:185px 0;
    background:url(../img/main/midImg.jpg) no-repeat center;
    background-attachment: fixed;   
    background-size:100%;
}
.midImg .wtline{
    width: 1px;
    height: 24px;
    background:#fff;
    margin:24px auto;
}
.midImg p{
    text-align: center;
    color:#fff;
    font-size:19px;
    line-height:30px;
    font-weight:lighter;
}

.gotobtn_wt{
    color:#ffffff;
    border:2px solid #fff;
    width:270px;
    height:62px;
    font-size:15px;
    line-height:62px;
    text-transform: uppercase;
    padding-left:79px;
    box-sizing: border-box;
    background:url(../img/arrow.png) no-repeat 180px 50%;
    transition: all 0.3s;
    margin:64px auto 0;
    display:block;
    font-weight:bold;
}
.gotobtn_wt:hover{
    color:#222;
    background:#fff url(../img/arrow_bk.png) no-repeat 200px 50%;
}






/*section4:portfolio*/
.port{
    padding:120px 0;
    box-sizing: border-box;
}
.port .port_list{
    width:100%;
    clear:both;
    margin-top:60px;
    overflow:hidden;
}

.port .port_list li{
    float:left;
    margin-bottom:0;
    margin-right:10px;
    position:relative;
}
.port .port_list li img{
    width:100%;
}
.port .port_list li:hover{
    cursor:pointer;
    
}
.port .port_list .p_big{
    float:left;
    width:595px;
    height: 547px;
    margin-right:10px;
    margin-bottom:10px;
}


.port .port_list li .port_desc{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    transition:all 0.3s;
}
.port .port_list li:hover .port_desc{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:1;
    
}


/*list p_big*/
.port .port_list .p_big .port_desc .fs14{
    font-size:14px!important;
    text-transform: uppercase;
    color:#a4a4a4;
    letter-spacing: 3;
    font-weight:bold;
    position:absolute;
    top:34%;
    left:50%;
    transform: translateX(-50%);
}

.port .port_list .p_big .port_desc .fs27{
    font-size:27px;
    color:#ffffff;
    font-weight:bolder;
    position:absolute;
    top:40%;
    left:50%;
    transform: translateX(-50%);
    word-break: keep-all;
    text-align: center;
    line-height:33px;
    
}

/*common port list*/
.port .port_list li .port_desc .fs14{
    font-size:12px;
    text-transform: uppercase;
    color:#a4a4a4;
    letter-spacing: 3;
    font-weight:bold;
    position:absolute;
    top:34%;
    left:50%;
    transform: translateX(-50%);
}


.port .port_list li .port_desc .fs27{
    font-size:23px;
    color:#ffffff;
    font-weight:bolder;
    position:absolute;
    top:40%;
    left:50%;
    transform: translateX(-50%);
    word-break: keep-all;
    text-align: center;
    line-height:30px;
    text-transform:uppercase;
}

.port .port_list li .port_desc .view_btn{
    font-size:12px;
    color:#ffffff;
    position:absolute;
    top:63%;
    left:50%;
    letter-spacing: 4;
    transform: translateX(-50%);
    padding:5px 30px;
/*    border:1px solid #fff;*/
    word-break: keep-all;
    text-align: center;
    text-transform:uppercase;
    background:url(../img/plus.png) no-repeat 90% 200%;
    transition:all 0.3s;
}

.port .port_list li .port_desc .view_btn:hover{
    background:url(../img/plus.png) no-repeat 90% 50%;
}

.more_btn{
    color:#222;
    border:2px solid #222;
    width:200px;
    height:62px;
    line-height:62px;
    text-transform: uppercase;
    padding-left:64px;
    box-sizing: border-box;
    background:url(../img/arrow_bk.png) no-repeat 120px 50%;
    transition: all 0.3s;
    margin:64px auto 0;
    display:block;
    font-weight:bold;
}
.more_btn:hover{
    color:#fff;
    border:2px solid #222;
    background:#222 url(../img/arrow.png) no-repeat 140px 50%;
}



/*section5:contact*/
.m_cont{
    width:100%;
    max-height:560px;
    overflow:hidden;
    background:#f6f6f6;
}
.cont_l{
    width:50%;
    height:100%;
    float:left;
    background:url(../img/main/contact_l.png) no-repeat;
    background-size: 100%;
}
.cont_r{
    width:50%;
    float:right;
    padding:120px 90px;
    background:#f6f6f6;
    box-sizing: border-box;
}
.cont_r .fs17{
    font-size:17px;
    line-height:30px;
    margin:40px 0;
    width: 415px;
    word-break: keep-all;
}
.cont_r .cont_bx{
    margin-bottom:35px;
}
.cont_r .cont_bx:last-child{
    margin-bottom:0;
}
.cont_r .cont_bx p{
    font-size:12px;
    color:#787878;
    letter-spacing: 5;
    text-transform:uppercase;
}
.cont_r .cont_bx a{
    font-size:28px;
    color:#222222;
    font-weight:bolder;
}




/**************************************************/
/**********************TABLET**********************/
/**************************************************/
@media ( max-width: 1023px ) {
.mi_pc{
    display:none;
}
.mi_tablet{
    display:block;
}
.mi_mob{
    display: none;
}

.mainslider2{
    height:100vh;
}
.mainslider2 li{
    height:100%;
}
.mainslider2 li img{
    height:100%;
    width:100%;
    display:block;
}
.bx-viewport{height:auto!important;}
    
/*comon*/
.fs25 {font-size:23px!important; }
.fs16 {font-size:16px!important; }
.fs30{ font-size:28px; text-transform: uppercase; font-weight:bold; color:#000;}




/*section1 : mainImg*/

.mainbx{
    width:90%;
    height:90%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999;
}

.mainbx .slogan .slog_img1{
    width:45%;
}

.mainbx .slogan .slog_img2{
    width:75%;
    top:50%;
}

.mainbx .slogan .fs16{
    position:  absolute;
    top:65%;
    text-align: center;
    font-size:16px;
    line-height:25px;
    font-weight: lighter;
    width:100%;
}



.main_sns{
    position:absolute;
    right:-30px;
    top:50%;
    transform:translateY(-50%);
}




.mainbx .main_bot .main_sth{
    font-size:13px; 
    line-height:28px;
}

.mainbx .main_bot .slidenumb .prebtn a{
    display:none;
}

.mainbx .main_bot .slidenumb .nextbtn a{
     display:none;
}
   
.mainbx .main_bot .slidenumb .prebtn2 a{
    display:block;
    background:url(../img/main/slide_pre.png) no-repeat center;
    border:1px solid #ccc;
    width: 56px;
    height: 66px;
    text-indent: -9999px;
}

.mainbx .main_bot .slidenumb .nextbtn2 a{
    display:block;
    background:url(../img/main/slide_next.png) no-repeat center;
    border:1px solid #ccc;
    width: 56px;
    height: 66px;
    text-indent: -9999px;
}
   
 
/*마우스애니메이션*/
.mouse p {
      margin-top: 60px;
    margin-left:-10px;
    font-size:12px;
    text-align: center;
      letter-spacing: 3px;    
      text-transform: uppercase;
      color: #ffffff;
      -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
              animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
}

 .mouse {
      background: #aeb6bc -webkit-linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
      background: #aeb6bc linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
      position: absolute;
    bottom:25px;
    right:50%;
    z-index: 9;
      width: 32px;
      height: 52px;
      background-size: 100% 100%;
      border-radius: 100px;
      background-size: 225%;
      -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
          animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}
 .mouse:before,  .mouse:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
}
 .mouse:before {
      width: 30px;
      height: 50px;
      background-color: #aeb6bc;
      border-radius: 100px;
}

    
/*section2:about*/
.sec2{
    padding:60px 0;
    position:relative;
    overflow:hidden;
    min-height:2150px;
}
.sec2 .layout{
    position:relative;
    z-index:22;
    width:96%;
    margin:0 auto;
}

.ab_top{
    width: 100%;
    position:absolute;
    top:0;
    clear:both;
}

.ab_top .ab_txt{
    padding:60px;
    min-width: 350px;
    min-height: 250px;
    width:auto;
    height:auto;
    top:280px;
    left:10px;
    z-index:10;
}

.ab_top .ab_txt .fs14{
    font-size:14px;
    color:#9a9a9a;
    text-transform: uppercase;
    letter-spacing: 5;
    margin-bottom:12px;
    
}

.ab_top .ab_txt .fs16{
    line-height:30px;
}

.ab_top .ab_txt .ab_sns{
    margin-top:20px;
}


.ab_top .ab_img{
    width:90%;
    height:750px;
    background:url(../img/main/about1.png) no-repeat;
    position:absolute;
    top:0;
    right:0;
    z-index:5;
}

.ab_bot{
    position:absolute;
    top:900px;
    width:100%;
}
.ab_bot li{
    float:left;
    width: 49%;
    overflow:hidden;
    margin-right:2%;
    margin-top:0;
    box-shadow: 2px 5px 10px rgba(0,0,0,0.1);
    margin-bottom:20px;
}
.ab_bot li:nth-of-type(2n){
    margin-right:0;
}
.ab_bot li:hover{    
    margin-top:0;
}
.ab_bot li img{
    width:100%;
}
.ab_bot li .abot_bx{
    padding:20px 30px;
}
.ab_bot li .abot_bx .fs22{
    font-size:20px;
    margin-bottom:10px;
}
.ab_bot li .abot_bx .fs15{
    font-size:15px;
}
.letter_s{
    top:730px;
    width:17%;
    max-width:330px;
}
.letter_o{
    top:1650px;
    left:45%;
    width:25%;
    max-width:342px;
}

.letter_m{
    position:absolute;
    top:1790px;
    left:65%;
    width:35%;
    max-width:472px;    
}



/*section3:midImg*/
.midImg{
    width:100%; 
    padding:150px 0;
    background:url(../img/main/midImg.jpg) no-repeat center;
    background-attachment:inherit;   
}
.midImg .imgcenter{
    width:65%; 
    max-width:478px;   
}    
    
.midImg .wtline{
    display:none;
}
.midImg p{
    font-size:17px;
    line-height:25px;
    font-weight:lighter;
    margin-top:25px;
}

.gotobtn_wt{
    width:250px;
    font-size:15px;
    padding-left:70px;
    margin:35px auto 0;
}




/*section4:portfolio*/
.port{
    padding:80px 0;
    box-sizing: border-box;
}
.port .imgcenter{
    width:40%;
    max-width:248px;
}
.port .port_list{
    width:100%;
    clear:both;
    margin-top:50px;
    overflow:hidden;
}

.port .port_list li{
    float:left;
    width:49%;
    margin-bottom:20px;
    margin-right:2%;
    position:relative;
}
.port .port_list li:nth-of-type(2n){
    margin-right:0;
}
 
.port .port_list li:last-child{
    display:none;
}
    
.port .port_list li img{
    width:100%;
}
.port .port_list li:hover{
    cursor:pointer;
    
}
.port .port_list .p_big{
    float:left;
    width:49%;
    height:auto;
    margin-right:2%;
    margin-bottom:20px;
}




/*list p_big*/

.port .port_list .p_big .port_desc .fs27{
    font-size:23px;
    color:#ffffff;
    font-weight:bolder;
    position:absolute;
    top:40%;
    left:50%;
    transform: translateX(-50%);
    word-break: keep-all;
    text-align: center;
    line-height:32px;
    text-transform:uppercase;
    
}


/*section5:contact*/
.m_cont{
    width:100%;
    max-height:570px;
    background:#fff;
    overflow:hidden;
}
.cont_l{
    width:50%;
    height:570px;
    float:left;
    background:url(../img/main/contact_l.png) no-repeat;
    background-size: cover;
}
.cont_r{
    width:50%;
    float:right;
    max-height:570px;
    padding:120px 50px;
    background:#f6f6f6;
    box-sizing: border-box;
}
.cont_r .fs17{
    font-size:17px;
    line-height:30px;
    margin:40px 0;
    width: 100%;
    word-break: keep-all;
}
.cont_r .cont_bx{
    margin-bottom:35px;
}
.cont_r .cont_bx:last-child{
    margin-bottom:0;
}
.cont_r .cont_bx p{
    font-size:12px;
    color:#787878;
    letter-spacing: 5;
    text-transform:uppercase;
}
.cont_r .cont_bx a{
    font-size:25px;
    color:#222222;
    font-weight:bolder;
}


    
    
    
}






/**************************************************/
/**********************MOBILE**********************/
/**************************************************/
@media ( max-width: 767px ) {
.mi_pc{
    display:none;
}
.mi_tablet{
    display:none;
}
.mi_mob{
    display: block;
}
    
/*comon*/
.fs25 {font-size:20px!important; }
.fs30{ font-size:25px!important;}

    
.mouse{left:45%;}    
    
/*section1 : mainImg*/

.main_sns{
    display:none;
}



.mainbx .main_bot{
    position:  absolute;
    width:100%;
    bottom:0;
}

.mainbx .main_bot .slidenumb{
    display:none;
}
.mainbx .main_bot .slidenumb a{
     display:none;
}

.mainbx .main_bot .slidenumb .prebtn a, .mainbx .main_bot .slidenumb .nextbtn a, .mainbx .main_bot .slidenumb .prebtn2 a, .mainbx .main_bot .slidenumb .nextbtn2 a,
    .mainbx .main_bot .main_sth{
    display:none;
}


.mainslider3{
    height:100vh;
}
.mainslider3 li{
    height:100%;
}
.mainslider3 li img{
    height:100%;
    width:100%;
    display:block;
}

/*section1 : mainImg*/
.mainImg{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
}
.mainbx{
    width:90%;
    height:85%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999;
}

.mainbx .slogan .slog_img1{
    width:65%;
}

.mainbx .slogan .slog_img2{
   width:80%;
}


   
/*section2:about*/
.sec2{
    min-height:1650px;
}
.sec2 .layout{
    position:relative;
    z-index:22;
    width:96%;
    margin:0 auto;
}


.ab_top .ab_txt{
    padding:50px;
    min-width: 90px;
    width:80%;
    min-height: 200px;
    top:450px;
    left:10%;
    transform:none;
    z-index:10;
}
.ab_top .ab_txt img{
    width:85%;
    max-width: 305px;
    display:block;
    margin:0 auto;
}
    
.ab_top .ab_txt .fs14{
    font-size:13px;
    margin-bottom:10px;
    text-align: center;
    
}

.ab_top .ab_txt .grline{
    margin:20px auto;
}
    
.ab_top .ab_txt .fs16{
    text-align: center;
    font-size:14px!important;
    line-height:25px;
    
}
    
.ab_top .ab_txt .ab_sns{
   display:none;
}  

    

.ab_top .ab_img{
    width:100%;
    height:500px;
    background:url(../img/main/about1.png) no-repeat top center;
    background-size:cover;
    position:absolute;
    top:0;
    right:0;
    z-index:5;
}

.ab_bot{
    position:absolute;
    top:800px;
    width:100%;
}
.ab_bot li{
    float:none;
    width: 100%;
    height:220px;
    overflow:hidden;
    margin-right:0;
    margin-top:0;
    margin-bottom:15px;
    position:relative;
}

.ab_bot li:hover{    
    margin-top:0;
}
.ab_bot li img{
    width:40%;
    height:100%;
    float:left;
}
.ab_bot li .abot_bx{
    padding:0;
    width:45%;
    box-sizing:border-box;
    float:left;
/*    margin-top: 20px;*/
    background:#fff;
    position:absolute;
    top:50%;
    left:45%;
    transform:translateY(-50%);
}
.ab_bot li .abot_bx .fs22{
    text-align:left;
    font-weight:bold;
}
.ab_bot li .abot_bx .fs15{
    font-size:14px;
    text-align:left;
    width:100%;
}
.letter_s{
    top:670px;
    width:25%;
    max-width:330px;
}
.letter_o{
    top:1500px;
    left:0;
    width:35%;
    max-width:342px;
}

.letter_m{
    position:absolute;
    top:1600px;
    left:25%;
    width:45%;
    max-width:472px;    
}



/*section3:midImg*/
.midImg{
    width:100%; 
    padding:150px 0;
    background:url(../img/main/midImg.jpg) no-repeat center; 
}

.midImg p{
    font-size:14px;
    line-height:25px;
    width:85%;
    word-break: keep-all;
    margin:30px auto 0;
    
}

/*section4:portfolio*/
.port{
    padding:100px 0;
    box-sizing: border-box;
}
.port .port_list{
    width:96%;
    margin:50px auto 0;
}

.port .port_list li{
    float:none;
    margin-bottom:10px;
    margin-right:0;
    position:relative;
    width:100%;
    height: auto;
}
.port .port_list li img{
    width:100%;
}

.port .port_list .p_big{
    float:none;
    width:100%;
    height:auto;
    margin-right:0;
    margin-bottom:10px;
}
 
.port .port_list li .port_desc{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;    
    background:rgba(0,0,0,0.7);
    opacity:0;
}
.port .port_list li:hover .port_desc{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:1;    
}

.port .port_list li:last-child{
    display:block;
}

.port .port_list li .port_desc .fs14{
    font-size:12px!important;
    letter-spacing: 2;
    top:32%;
}

.port .port_list li .port_desc .fs27{
    font-size:20px;
    top:40%;
    line-height:25px;
    
}
.port .port_list .p_big .port_desc .fs14{
    font-size:12px!important;
    letter-spacing: 2;
    top:32%;
}

.port .port_list .p_big .port_desc .fs27{
    font-size:20px;
    top:40%;
    line-height:25px;
    
}


.more_btn{
    margin:35px auto 0;
}

/*section5:contact*/
.m_cont{
    max-height: none;
}    
.cont_l{
    width:96%;
    max-width: auto;
    height: 320px;
    min-height:320px;
    margin:0 auto;
    background:url(../img/main/contact_l.png) no-repeat  top center;
    background-size: cover;
    float:none;
}

.cont_r{
    width:100%;
    float:none;
    padding:50px 0;
    overflow:hidden;
    background:none;
    
}
.cont_r img{
    display:block;
    margin:0 auto;
    width:30%;
    max-width:206px;
}
.cont_r .fs17{
    font-size:15px;
    line-height:25px;
    margin:30px auto;
    text-align:center;
    width:80%;
    word-break: keep-all;
}
.cont_r .cont_bx{
    margin-bottom:0;
    width:50%;
    float:left;
}
.cont_r .cont_bx:last-child{
    margin-bottom:0;
}
.cont_r .cont_bx p{
    font-size:12px;
    color:#787878;
    letter-spacing: 5;
    text-transform:uppercase;
    text-align: center;
}
.cont_r .cont_bx a{
    font-size:16px;
    text-align: center;
    display:block;
    width:100%;
    margin:0 auto;
    word-break: break-all;
    line-height:25px;
    
}
    
    
    

}