@media all and (min-width:320px) and (max-width:1024px){
    #wrap #header{
        width: 100%;
    }

    #wrap .nav_li:nth-child(2){
        display: none;
    }

    #wrap .nav_li{
        width: 33%;
    }

    #wrap #visual_valup_wrap{
        height: auto;
    }

    #wrap #container{
        padding-top: 180px;
    }

    #wrap #visual_valup{
        width: 100%;
        padding-top: 100px;
        position: static;
        transform: translateY(0);
    }

    #wrap #visual_img{
        width: 100%;
        height: auto;
        margin-left: 0;
    }

    #wrap #visual_desc{
        width: 90%;
        margin:0 auto;
        position: static;
        transform: translateY(0);
    }

    #wrap #visual_desc h3{
        height: 120px;
        font-size: 5em;
    }

    #wrap #desc_title, #desc_link{
        padding-bottom: 40px;
        font-size: 18px;
    }

    #wrap #about_valup_wrap{
        padding: 0;
    }

    #wrap #desc_link .valup_link1,
    #wrap #desc_link .valup_link2{
        width: 50%;
        max-width: 155px;
        margin-right: 0;
    }

    #wrap #about_valup{
        width: 95%;
        padding: 0;
    }

    #wrap #about_desc{
        width: 100%;        
    }

    #wrap #about_desc .title{
        padding-top:45px;
        text-align: center;
        font-size: 55px;
    }

    #wrap #about_list{
        width: 100%;
    }

    #wrap #about_list li{
        width: 300px;
        margin:0 auto 50px;
        float: none;
    }

    #wrap #about_bg{
        top: 0;
    }

    #wrap #about_bg p{
        font-size: 28vw;
    }

    #wrap .valup_section{
        width: 95%;
        padding: 30px 0;
    }

    #wrap .valup_section .title,    
    #wrap #valup_solution h3{
        font-size: 46px;        
    }

    #wrap .cont_left{
        max-width: 400px;        
        width: 100%;
        height: auto;
        margin: 0 auto;
        float: none;
    }
    
    #wrap .cont_left p img,
    #wrap .list3_desc p{
        width: 100%;      
    }

    #wrap .valup_list1{
        width: 95%;
    }

    #wrap .cont_right{
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        padding:15px 0 100px;
        float: none;
    }

    #wrap .cont_right p{
        font-size: 13px;
    }

    #wrap #valup_education_wrap .cont_right h3{
        font-size: 16px;
    }

    #wrap .cont_right h4{
        font-size: 17px;
    }

    #wrap #valup_solution{
        width: 90%;
    }

    #wrap .valup_list_wrap{
        width: 220px;
    }

    #wrap #solution_list ul{
        max-width: 375px;
        width: 100%;
        margin: 0 auto;
    }

    #wrap #solution_list li{
        width: 94%;
        height: 135px;
        padding: 20px 3% 10px;
    }

    #wrap #solution_list li h4{
        font-size: 18px;
    }

    #wrap #solution_list li:nth-child(2), #wrap #solution_list li:nth-child(5){
        margin:30px 0 0 0;
    }

    #wrap .valup_list_wrap li:nth-child(2){
        padding: 0 5px;
    }

    #wrap #valup_education_wrap .valup_list_wrap li:nth-child(3){
        padding-right: 5px;
    }

    #wrap #valup_education_wrap .valup_list_wrap{
        width: 304px;
    }

    #wrap #footer{
        width: 100%;
        padding: 20px 0;
    }

    #wrap .footer_fix{
        position: static;
        margin-top: 50px;
    }
    #wrap #footer_img{
        width: 150px;
        margin: 0 auto;
        float:none;
    }

    #wrap #footer_desc{
        padding-top: 30px;
    }

    #wrap #footer_desc p{
        font-size: 12px;
        line-height: 24px;
        padding-bottom: 20px;
    }

    /* board */
    #wrap #notice_wrap{
        padding: 50px 0;
    }

    #wrap #notice_desc{
        max-width: 700px;
        width: 95%;
    }

    #wrap .table{
        margin-bottom: 50px;
    }

    #wrap #notice_desc th:nth-child(1), #wrap #notice_desc td:nth-child(1){
        width: 11%;
    }

    #wrap #notice_desc th:nth-child(2), #wrap #notice_desc td:nth-child(2){
        width: 28%;
    }
    #wrap #notice_desc th:nth-child(3), #wrap #notice_desc td:nth-child(3){
        width: 26%;
    }

    #wrap #notice_desc th:nth-child(4), #wrap #notice_desc td:nth-child(4){
        width: 15%;
    }

    td a{        
        display: block;
        width: 21vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #wrap #notice_paging li{
        font-size: 12px;
        padding: 3px;
        margin: 0;
    }

    #wrap #notice_paging a{
        display: block;
        width: 100%;
        font-size: 12px;        
    }

    #wrap .page_top h3{
        word-break:break-all;
    }

}


/* hide */
#container h2{
    width:1px;
    height:1px;
    position:absolute;
    top:0;
    left:-9999px;
    overflow: hidden;
    line-height:0px;    
}

/* container */
    /*visual*/
    #visual_valup_wrap{
        width:100%;
        height:100vh;
        background-image: url("./../img/main_back.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color:#aabf5e;  
    }

    #visual_valup{
        width:85%;
        position:relative;
		margin:0 auto;
		transform:translateY(35%);
    }

    /*img*/
	#visual_img{
		width:75%;
		height:650px;
        margin-left:25%;
        overflow: hidden;
	}

	#visual_img img{
		width:100%;
	}

    /*desc*/
    #visual_desc{
        width:50%;
        height:auto;
        position:absolute;
        left:0;
        top:50%;
        transform:translateY(-50%);
        z-index:1;
    }
    #visual_desc h3{
        font-size:110px;
        color:#fff;
    }

    #visual_desc h3::after{
        content: '';
        display: block;
        width: 48px;
        height: 1px;
        background: #b0b0b0;
        opacity: 0.5;
        margin: 33px 0;
    }

    #desc_title{
        padding-bottom:85px;
        font-size: 25px;
        font-weight: 300;
        color: #dddddd;
    }

    #desc_link .valup_link1, #desc_link .valup_link2{
        float:left;
    }

    #desc_link::after{
        content:"";
        display:block;
        clear: both;
    }

    #desc_link .valup_link1{
        margin-right:10px;
    }

    /* A_link1 */
    .valup_link1{
        width:155px;
        height:45px;
        background: #f28a2e;
    }
    .valup_link1 a{
        display: block;
        width:100%;
        height:100%;
        position:relative;
        overflow: hidden;
    }
    .link_title{
        width:auto;
        height:auto;
        padding-left:15px;        
        position:absolute;
        left:0;
        top:0;
        z-index:1;
        line-height:45px;
        color:#111;  
        font-size:14px;
        letter-spacing: 0.08em;
    }
    .link_arrow{
        display:none;
    }

    /* A_link1 hover */
    .valup_link1 a:hover .link_hide, .valup_link1 a:focus .link_hide{
        left:0;
    }
    .link_hide{        
        display: block;        
        width:100%;
        height:100%;
        position:absolute;
        left:-100%;
        top:0;
        background-color:#fff; 
        transition:left .3s linear;
    }

    /* A_link2 */
    .valup_link2{
        width:155px;
        height:45px;
    }
    .valup_link2 a{
        display: block;
        width:100%;
        height:100%;
        position:relative;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 50%);
    }

    .link2_desc{
        display:block;
        width:100%;
        height:100%;
        position:relative;
    }

    .link2_top, .link2_right, .link2_bottom, .link2_left{
        display: block;
        position:absolute;   
        background-color: #f25d27;     
    }

    .link2_top{
        width:60%;
        height:1px;
        right:0;
        top:0;
        transition:width .2s linear;
    }
    .link2_right{
        width:1px;
        height:100%;
        right:0;
        top:0;
    }
    .link2_bottom{
        width:30%;
        height:1px;
        right:0;
        bottom:0;
        transition:width .2s linear;
    }
    .link2_left{
        width:1px;
        height:100%;
        left:0;
        top:0;
        opacity: 0;
        transition:opacity .2s linear .1s;
    }

    /* A_link2 hover */
    .valup_link2 a:hover .link2_top, .valup_link2 a:focus .link_top,.valup_link2 a:hover .link2_bottom, .valup_link2 a:focus .link_bottom{
        width:100%;
    }
    .valup_link2 a:hover .link2_left, .valup_link2 a:focus .link_left{
        opacity: 1;
    }

    /*about*/
    #about_valup_wrap{
        width:100%;
        padding:70px 0; 
        position:relative;
        overflow: hidden;
    }

    #about_valup{
        width:75%;
        position:relative;
        padding:50px 0;
		margin:0 auto;
    }
    #about_bg{
        width: 100%;    
        position: absolute;
        top: -40px;
        left: 30px;
        z-index: -1;   
        opacity: .2;
        letter-spacing: .2em;
    }

    #about_bg p{        
        font-size: 500px;
        line-height: 1;
        color: #ccc;
    }

    /*왼*/
    #about_desc{
        width:30%;
        float:left;
    }
    .title{
        font-size: 70px;
        letter-spacing: 4px;
        padding-bottom:45px;
    }    
    .content{        
        font-size: 25px;
        font-weight: 300;
        color: #767676;
    }
    #about_desc .content{        
        margin-bottom: 75px;
    }

    /*오*/
    #about_list{
        width:70%;
        float:left;
    }
    #about_list ul{
        width:100%;
        height:100%;
        padding:20px 0 60px;
    }
    #about_list li{
        width:30%;
        margin-right:3%;
        height:100%;
        float:left;
    }
    #about_list a{
        display: block;
        width:100%;
        height:100%;
        position:relative;
    }
    .about_img{
        width: 100%;
        height:450px;
        position: relative;
        background-color:skyblue;
    }
    .about_img, .about_title{
        display:block;
        width:100%;
    }
    
    .about_img img{
        width:100%;
        height:100%;
    }
    .about_title{
        text-align: center;
        padding:10px 0;
        color:#111;
    }

    /* about_link*/
    #about_list .link2_top, #about_list .link2_bottom{        
        transition:width .4s linear;
        height:2px;
    }
    #about_list .link2_right, #about_list .link2_left{
        transition:height .4s linear;
        width:2px;
    }
    #about_list .link2_top{
        width:0px;
        right:unset;
        left:0;
    }
    #about_list .link2_right{
        height:0;
        top:unset;
        bottom:0;
    }
    #about_list .link2_bottom{
        width:0px;
    }
    #about_list .link2_left{
        height:0;
        opacity:1;
    }

    /* about_hover */
    #about_list a:hover .link2_top, #about_list a:focus .link2_top, #about_list a:hover .link2_bottom, #about_list a:focus .link2_bottom{
        width:100%;
    }
    #about_list a:hover .link2_left, #about_list a:focus .link2_left, #about_list a:hover .link2_right, #about_list a:focus .link2_right{
        height:100%;
    }

    #about_list a:hover .text_desc_bg, #about_list a:hover .about_text_desc{
        opacity: 1;
    }

    /*about_text_desc*/
    .text_desc_bg{
        opacity: 0;
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background-color:rgb(0,0,0,.4);
        transition: opacity linear .4s;
    }

    .about_text_desc{
        opacity: 0;
        width: 100%;
        position: absolute;
        left:0;
        top:50%;
        transform: translateY(-60%);
        color:#fff;
        transition: opacity linear .4s;
    }

    .about_text_desc span{
        display: block;
        padding:7px 0;
        text-align: center;
        font-size:14px;
    }

    #about_valup::after, #about_valup ul::after{
        content:"";
        display: block;
        clear: both;
    }

    /* 공통 */
    #valup_technology_wrap, #valup_education_wrap{
        width:100%;
    }

    .valup_section{
        width:1280px;
        padding:170px 0;
        margin:0 auto;
    }
    .valup_section .title{
        text-align: center;
    }

    /* 아이콘 */
    .valup_list_wrap{
        width:300px;        
        margin:0 auto;
        padding-bottom:65px;
    }
    .valup_list_wrap ul{
        width:100%;
        height:70px;
    }
    .valup_list_wrap li{
        width:70px;
        height:100%;
        float:left;
    }
    .valup_list_wrap li:nth-child(2){
        padding:0 45px;
    }
    .valup_list_wrap li a{
        display: block;
        width:100%;
        height:100%;
        border-radius: 50%;
        background-color:#808080;
        transition: background-color linear .3s;
    }
    .valup_list_wrap .list1_link a{
        background-color: #e84e2c;
    }
    .valup_list_wrap li a:hover{
        background-color:#ec7a61;
    }
    .valup_list_wrap ul::after{
        content:"";
        display: block;
        clear: both;
    }

    /* 리스트 */
    .valup_list2, .valup_list3{
        display: none;
        width:80%;
        margin:0 auto;
    }
    .valup_list1{
        width:80%;
        margin:0 auto;
    }
    .cont_left{
        width:40%;
        height:350px;
        background-color: #fff;
        float:left;
    }

    .cont_left p{
        width: 100%;
        overflow: hidden;
    }
    

    .cont_right{
        width:55%;
        padding:15px 0 15px 5%;
        float:left;
    }    

    .cont_right h4{
        font-size:20px;
        padding-bottom:20px;
        text-align: center;
    }
    .cont_right p{
        padding:7px 0;
        font-size:18px;
        color:#5b5b5b;
    }
    .cont_right p::after{
        content:"";
        display: block;
        clear: both;
    }
    #valup_technology_wrap .valup_list1 .cont_right p:last-child{
        padding:20px 0 0 0;
    }

    .cont_right p span{
        display: block;    
        float:left;
    }
    .cont_right p span:first-child{
        width: 5px;
        height: 5px;
        margin:12px 10px;
        background: #6e6e6e;
        border-radius: 100%;
        transform: translateY(-50%);
    }
    /* 개별*/
    .valup_list2 h4{
        padding-bottom:0;
    }
    .valup_list2 p{
        font-size:14px;
    }
    .list2_desc p{
        padding:0;
    }
    .list2_desc p:nth-child(3){
        padding-top:10px;
    }

    .valup_list3 p{
        width:100%;
        overflow: hidden;
        text-align: center;
    }

    .valup_list3 p img{
        width: 100%;
    }

    /* list3 */
    .list3_desc p{
        width: 75%;
        margin: 0 auto;
    }
    .list3_desc p img{
        width:100%;
    }

    /* education */
    #valup_education_wrap .line2 p{
        width:50%;
        float:left;
    }
    #valup_education_wrap .valup_list1{
        display: none;
    }
    #valup_education_wrap .valup_list div:nth-child(1){
        display: block;
    }
    #valup_education_wrap .cont_right h3{
        color:#5b5b5b;
        padding-bottom:10px;
    }

    .valup_list1::after, .valup_list2::after, .valup_list3::after, .cont_right::after{
        content:"";
        display: block;
        clear: both;
    }

    /* education 개별 작업 */
    #valup_education_wrap .valup_list_wrap{
        width:415px;
    }
    .valup_list_wrap a span{
        display: block;
        width:60%;
        margin:0 auto;
        padding: 18% 0;
    }
    .valup_list_wrap a img{
        width: 100%;
    }

    #valup_education_wrap .valup_list_wrap li:nth-child(3){
        padding-right:45px;
    }
    #valup_education_wrap{
        padding-bottom:40px;
    }

    /* solution */
    #valup_solution_wrap{
        width:100%;
        padding:170px 0;
        background-image: url("./../img/solution.jpg");
    }

    #valup_solution{
        width:1250px;
        margin:0 auto;
    }

    #valup_solution h3{
        padding-bottom:10px;
        color:#fff;
        text-align:center;
    }

    #valup_solution .content{
        text-align: center;
    }

    /* 리스트 */
    #solution_list{
        width:100%;
    }

    #solution_list ul{
        width:100%;
    }

    #solution_list li{
        width:30%;
        height:150px;
        margin-top:30px;
        padding:30px 1%;
        background-color: rgb(255 255 255 / 80%);
        border-radius: 5px;
        float:left;
    }
    #solution_list li:nth-child(2),#solution_list li:nth-child(5){
        margin:30px 2% 0 2%;
    }
    #solution_list li h4{
        font-size: 22px;
        font-weight:700;
        padding-bottom: 15px;
    }

    .solution_text p{
        font-size: 15px;
        color: #646464;
    }

    #solution_list img{
        display: none;
    }

    #solution_list ul::after{
        content:"";
        display: block;
        clear: both;
    }

    /* bg_line*/
    #bg_line{        
        width: 100%;
        height: 100vh;
        position: fixed;       
        left:0;
        top:0;
        z-index:-1;
    }

    #bg_line p{    
        float: left;
        width: 20%;
        height: 100vh;
        border-right: 1px solid #ececec;
    }

    /* notice */
    #notice_wrap{
        padding:250px 0 25px;
        position: relative;
    }

    #notice_desc{
        width:60%;
        margin:0 auto;
    }

    #notice_desc th:nth-child(1), td:nth-child(1){
        width:10%;
        text-align: center;
    }

    #notice_desc th:nth-child(2){
        width:65%;
        text-align: center;
    }
    #notice_desc td:nth-child(2){
        cursor: pointer;
    }

    #notice_desc th:nth-child(3), td:nth-child(3){
        width:15%;
        text-align: center;
    }

    #notice_desc th:nth-child(4), td:nth-child(4){
        width:10%;
        text-align: center;
    }

    #notice_desc:hover td:nth-child(1){
        color:#e84e2c;
    }
    
    /* paging */
    #notice_paging{
        margin:0 auto;
        position: absolute;
        left:50%;        
        bottom:0;
        transform: translateX(-50%);     
    }

    #notice_paging li{
        cursor: pointer;
        margin:0 5px;
        float:left;
    }

    #notice_paging li:hover{
        color:#e84e2c
    }

    #notice_paging .paging_prev{
        padding:0 10px;
        margin-right:10px;
    }
    #notice_paging .paging_next{
        padding:0 10px;
        margin-left:10px;
    }

    #notice_paging ul::after{
        display: block;
        content:"";
        clear: both;
    }

/* write*/
.write_btn{
    width: auto;
    height: auto;
    padding-top: 10px;
    float: right;
}

.write_btn a{
    display: block; 
    width: 80px;
    padding:10px;    
    border-radius: 5px;   
    text-align: center;
    background-color:black;
    color:#fff;
}

.write_btn a:hover{
    color: #ddd;
}

#notice_desc::after{
    content: "";
    display: block;
    clear: both;
}

/* page */
.page_top{
    padding:25px;
    text-align:center;
    border-top: 2px solid #000;
    border-bottom:1px solid #ddd;
    color:#555;
}

.page_top h3{
    font-size:28px;
    padding-bottom:7px;
}

.page_bottom{
    padding:30px;
}

.page_top p, .page_bottom p{
    font-size:14px;
}
.page_btn{
    padding-bottom:10px;
}
.page_btn span{
    display: block; 
    border:none;
    width: 80px;
    margin:0 auto;
    padding:10px;    
    border-radius: 5px;   
    text-align: center;
    background-color:black;
    color:#fff;
}

.page_btn input:hover{
    opacity: .8;
}

/* notice */
#notice_desc .page_top input{
    width:500px;
    padding:10px;
    margin-left:10px;
}

textarea{
	resize: none;
}

#notice_desc .page_bottom textarea{
    width: 99%;
    height:500px;
    padding:1%;
}

/* board */
.board #notice_wrap{
    padding:250px 0 0;
}

.board #notice_desc{
    padding-bottom: 90px;
}

.page_cont:focus{
    outline: none;
}