@charset "UTF-8";
/* uo */
body{
    color:#262626 !important;
}
a{
    color:#262626 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    background: #1bb1dc;
    color: #fff;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 50%;
    right: 15px;
    bottom: 15px;
    transition: all 0.5s;
    z-index: 11;
  }
  .back-to-top i {
    padding-top: 12px;
    color: #fff;
  }
  /* main */

  .main{
    background: linear-gradient(140deg,#8dc63f ,#00aeef );
    width:100%;
    height:500px;
    position:fixed;
    transition: .5s linear;
    z-index: -1;
   
}

.main .inner{
    width:1200px;
    margin:0 auto;
    padding-top:110px;
}
.main .inner .txt_wrap{
    float:left;
    margin-top:80px;
    color:#fff;
}
.main .inner .txt_wrap .tit{
    font-size:20px;
    line-height: 28px;
    opacity: 0.7;
    margin-bottom: 30px;
}
.main .inner .txt_wrap .txt{
    font-size:55px;
    line-height:73px ;
}
.main .inner .txt_wrap .txt span{
    font-weight: bold;
    display:block;
}
.main .inner .img-wrap{
    float:right;
    
}
.mainvisual{
    height:0;
   padding-top:550px;
}

/* 탭 버튼 */

.baro-btn{
    position:absolute;
    top:525px;
   left:50%;
   transform: translatex(-50%);
  z-index: 10;
}

.baro-btn p{
    text-align: left !important;
    font-size:18px;
    margin-top:35px;
    color:#262626;
    line-height: 22px;
 }

.baro-btn ul{
   display:flex;
   width:1200px;
   justify-content:space-between;
   height:70px;
   border:solid 1px #262626;
   box-sizing: border-box;
}
.baro-btn ul li{
   line-height: 70px;
   text-align: center;
   width:100%;
   border-right:solid 1px #262626;
   box-sizing: border-box;
}
.baro-btn ul li:last-child{
    border:none;
}
.baro-btn ul li a{
    width:100%;
   color:#262626;
    display:block;
    text-align: center;
    font-size:20px;
}
.baro-btn ul li.on a{
     display:block;
     background:#262626;
     color:#fff !important;
 }
 .baro-btn ul li:hover a{

 }
 /* 이건뭐냐 */

#wrap .header .inner .logo_wrap a .logo_white{
    display:none;
}

/* 스크롤 헤더 반응 */

#wrap .header .menu_wrap>ul>li:hover>ul{
    background:#fff;
}

/* 헤더 */



.header:hover{
    background:#fff;
}
#wrap .header:hover .logo_wrap a img.logo_black{
    display:block;
}
#wrap .header:hover .logo_wrap a img.logo_white{
    display:none !important;
}
#wrap .header:hover .sns_wrap .social-links img.icoblack{
    display:block;
}
#wrap .header:hover .sns_wrap .social-links img.icowhite{
    display:none;
}
#wrap .header:hover .menu_wrap>ul>li>a{
    color:#000 !important;
}

.header.on{
    background:#fff;
}
#wrap .header.on .logo_wrap a img.logo_black{
    display:block;
}
#wrap .header.on .logo_wrap a img.logo_white{
    display:none !important;
}
#wrap .header.on .sns_wrap .social-links img.icoblack{
    display:block;
}
#wrap .header.on .sns_wrap .social-links img.icowhite{
    display:none;
}
#wrap .header.on .menu_wrap>ul>li>a{
    color:#000 !important;
}


.header{
    transition: all 0.4s;
    background:none;
 }

 #wrap .header .logo_wrap a img.logo_white{
     display:block !important;
 }

 #wrap .header .logo_wrap a img.logo_black{
     display:none ;
 }
 
 #wrap .header .menu_wrap>ul>li>ul>li>a{
     color:#000 !important;
 }

 .header li a{
     color:#fff !important;
 }
 .sns_wrap .social-links img{
     display:block;
 }
 .header .sns_wrap .social-links img.icoblack{
     display:none;
 }



.mainvisual{
    width:100%;
    height:600px;
    padding-top:150px;
    
    /* background:url(../img/subpagebg.jpg) no-repeat center/cover; */
}
.mainvisual .inner{
    width:1200px;
    margin:0 auto;
    height:100%;
}
/* .mainvisual .inner .img_wrap{
    background:url(../img/kdi_mo_img1.png) no-repeat center/cover;
    width:100%;
    height:100%;
    text-align: center;
} */

.mainvisual .inner .img_wrap img{
    text-align: center;
}

section .inner>p{
    text-align: left !important;
}

.section-bg{
    background:#fff;
}

dl, ol, ul{
    margin-bottom: 0;
}
@media all and (max-width:1200px){
    .mo_bt.plus button span{
        background:#262626;
    }
    .main .inner{
        width:100%;
        margin:0 auto;
        padding-top:110px;
    }
    .main .inner .txt_wrap{
        float:left;
        margin-top:80px;
        color:#fff;
        margin-left:10px;
    }
    .main .inner .txt_wrap .tit{
        font-size:20px;
        line-height: 28px;
        opacity: 0.7;
        margin-bottom: 30px;
    }
    .main .inner .txt_wrap .txt{
        font-size:55px;
        line-height:73px ;
    }
    .main .inner .txt_wrap .txt span{
        font-weight: bold;
        display:block;
    }
    .main .inner .img-wrap{
        float:right;
        margin-right:10px;
        
    }
    .mainvisual{
        height:0;
       padding-top:550px;
    }
    .baro-btn ul{
        width:100%;
    }
    .baro-btn{
        width:100%;
    }
}


@media all and (min-width:320px) and (max-width:700px){
    p{
        margin-bottom: 20px !important;
    }
    .baro-btn{
        width:100%;
     }
    
     .baro-btn p{
        text-align: center;
        font-size:16px;
        margin-top:30px;
        color:#262626;
        line-height: 20px;
        padding:0 10px;
        word-break: keep-all;
     }
    
     .baro-btn ul{
        width:100%;
        height:auto;
        border:solid 1px #262626;
        box-sizing: border-box;
      }
     .baro-btn ul li{
        line-height: 50px;
        text-align: center;
        justify-content: space-between;
        border-right:solid 1px #262626;
        box-sizing: border-box;
      
     }

     .baro-btn ul li:last-child{
         border-right:none;
     }
     /* .baro-btn ul li:nth-child(3){
         border-right:none;
     }
     .baro-btn ul li:nth-child(4),.baro-btn ul li:nth-child(5){
         border-top:solid 1px #000;
     } */

     .baro-btn ul li a{
         font-size:12px;
         letter-spacing: -1px;
     }

     .main .inner{
        width: 100%;
        margin: 0 auto;
        padding-top: 80px;
        
    }
    .main .inner .txt_wrap .txt{
        font-size:30px;
        line-height: 36px;
    }
    .main .inner .txt_wrap{
        margin-top:50px;
        margin-left:10px;
    }

    
    .main .inner{
        width:100%;
        
    }
    .main .inner h3{
        font-size:30px;
        line-height: 36px;
    }
    .main .inner p{
        font-size:14px;
        line-height: 20px;
        margin-top:20px;
    }

     .main .inner .img-wrap{
        float:none !important;
      
        width:100%;
        
        text-align: right;
    }
    .main .inner .img-wrap img{
        width:45%;
       margin-right:10px;
    }

    #wrap .header:hover{
        background:#fff !important;
    }
  
    .header.active{
        background:#fff !important;
    }
    .header.active .logo_wrap a img.logo_black{
        display:block !important;
    }
    #wrap .header.active .logo_wrap a img.logo_white{
        display:none !important; 
    }
    #wrap .header{
        background:none;
    }

    #wrap .mo_bt.on button span{
        background:#262626 !important;
    }

    .mo_bt button span{
        background:#fff;
    }
    .mo_bt.active button span{
        background:#000 ;
    }

    .inner>h3{
        font-size:30px;
        line-height: 36px;
    }
    .inner>p{
        font-size:16px;
        line-height: 22px;
        margin-top:30px;
    }

    #foot{
        clear:both;
        position:relative;
        padding-bottom:0px;
        background:#262626;
        height:140px !important;
        padding:25px 0 !important;
    }
        #foot .inner{
            width:100%;
            margin:0 auto;
            position: relative;
            color:#cfcfcf;
            font-size:10px;
            text-align: center;
        }

        #foot .inner .link_up{
            margin-bottom: 20px;
            padding-top:40px;
            margin-top:30px;
        }
        #foot .inner .link_up ul{}
        #foot .inner .link_up ul li{}
        #foot .inner .link_up ul li a{
            color:#cfcfcf !important;
            font-size:11px;
            font-weight: bold;
            
        }
        #foot .inner .link_down{
            
        }
        #foot .inner .link_down .address{
            margin-bottom: 10px;
        }
        #foot .inner .link_down .address p{
            display:inline-block;
        }
        #foot .inner .link_down .address .addr{
            margin-right:10px;
            position: relative;
        }
        #foot .inner .link_down .address .addr:after{
            display:block;
            clear:both;
            content:'';
            width:1px;
            height:100%;
            position: absolute;
            right:-7px;
            top:0;
            background:#cfcfcf;
        }
        #foot .inner .link_down .address .phone{}
        #foot .inner .link_down .address .phone a{
            color:#cfcfcf !important;
        }
        #foot .inner .f_logo{
            position: absolute;
            left:50%;
            top:0;
            transform: translate(-50%,-50%);
        }
    
}