main{}
/* ============================= 첫 화면 시작 */
#elim_construction_top{
    width: 100%; height: calc(100vh - 100px); 
    background: url(../../img/construction/bg.jpg) center/cover;
    display: flex; flex-flow: column;
    justify-content: center; align-items: center;
    position: relative;
}
#elim_construction_top .title_text{}
#elim_construction_top .title_text *{font-weight: 800; text-align: center;}
#elim_construction_top .title_text>p{
    font-size: 0.625rem; letter-spacing:1.2em; font-weight: 200;
    margin-bottom: 10px; margin-left: 10px; color: #fff;
    text-shadow: 1px 1px 3px #000;/* 글자 그림자 */
    /* text-shadow: 가로 세로 번짐 색상 */
}
#elim_construction_top .title_text h1{
    font-size: 3.75rem; color: #fff;
    text-shadow: 1px 1px 3px #000;/* 글자 그림자 */
    /* text-shadow: 가로 세로 번짐 색상 */
}
#elim_construction_top .construction_page_move{
    display: flex; justify-content: center; align-items: center;
    width: 80%; padding: 30px 0 ; background-color: #fff;
    border-radius: 30px 30px 0 0 ;
    position: absolute; bottom: -1px; left: 50%;
    transform: translateX(-50%);
}
#elim_construction_top .construction_page_move li{position: relative;}
#elim_construction_top .construction_page_move li>a{margin: 0 30px;font-size: 1.25rem;}
#elim_construction_top .construction_page_move li>a::after{
    content: ""; position: absolute; width: 1px; height: 100%; background-color: #a7a7a7;
    bottom: 0; left: 0;
}
#elim_construction_top .construction_page_move li:first-child>a::after{display: none;}
#elim_construction_top .construction_page_move li>a:hover{font-weight: 600;}
/* ============================= 첫 화면 끝 */
#construction_box{
    width: 100%; padding: 100px 0; height: max-content;
}
#construction_box .container{ 
    width: 1400px; margin: 0 auto; 
}
/* ===================================맨 위 카테고리 시작 */
#construction_box .container .category_menu{
    display: flex; justify-content: center; width: 100%; padding: 0 10px;
} /* 상단 카테고리 메뉴 */
#construction_box .container .category_menu>a{
    display: block; padding: 30px 0;
    font-size: 1.25rem; margin-bottom: 30px;
    transition: all 0.5s; margin-right: 10px; border-radius: 5px;
    background-color: #fff; border: 1px solid #a7a7a7;
    width: calc(100% / 6); text-align: center;
}
#construction_box .container .category_menu>a:last-child{margin-right: 0;}
#construction_box .container .category_menu>a:hover{
    background-color: #0153A6; color: #fff; font-weight: 500;
}
/* ===================================맨 위 카테고리 끝 */


/* ========================검색 시작*/
#construction_box .container form{
    padding: 0 5px; text-align: right; margin-bottom: 60px;
    display: flex; justify-content: end; align-items: center;
}
#construction_box .container form .search_img{
    width: 40px; height: 40px; background-color: #a7a7a7; 
    padding: 10px; border-radius: 5px; margin-right: 3px;
}
#construction_box .container form .search_img img{width: 100%;}
#construction_box .container form #searchInput{
    padding: 10px; border: 1px solid #a7a7a7; border-radius: 5px;
}
#construction_box .container form #searchInput[id="searchInput"]{width: 300px;}
/* ========================검색 끝*/


#construction_box .container .category_content{ 
    width: 100%; height: 1050px; display: flex; flex-flow: row wrap; 
    
}
#construction_box .container .category_content .categorytab{ 
    height: auto; width: 100%; display: flex; flex-flow: row wrap; justify-content: start;
}
#construction_box .container .category_content .categorytab > .case{
    width: calc((100% - 80px) / 4); height: 500px; margin: 10px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 효과 추가 */
    position: relative; padding: 10px;
}
#construction_box .container .category_content .categorytab > .case > .img{
    width: 100%; height: 300px; background-color: #a7a7a7; 
}
#construction_box .container .category_content .categorytab > .case > .img>img{ width: 100%; height: 100%;}
#construction_box .container .category_content .categorytab > .case > h3{
    font-size: 1.25rem; line-height: 1.5; font-weight: 600;
    text-align: center; margin-top: 10px;
}
#construction_box .container .category_content .categorytab > .case > a{
    font-size: 1.25rem; display: block; width: calc(100% - 20px); padding: 30px 0; background-color: #0153A6;
    position: absolute; bottom: 10px; text-align: center; border-radius: 10px; color: #fff;
    border: 2px solid #0153A6; font-weight: 600; transition: all 0.5s;
}
#construction_box .container .category_content .categorytab > .case > a:hover{
    background-color: #fff; color: #0153A6; border: 2px solid #0153A6;
}

/* ==============================전체 메뉴(자바스크립트로 생성된 영역) 시작  */
.all { display: flex; flex-wrap: wrap;}
.all>div { /* 자바스크립트 생성영역 */
    width: calc((100% - 80px) / 4); height: 500px; margin: 10px; 
    position: relative; padding: 10px; display: block; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.all>div>.img{width: 100%; height: 300px;  background-color: #a7a7a7; }
.all>div>.img>img{height: 100%; width: 100%;}
.all>div>h3{
    font-size: 1.25rem; line-height: 1.5; font-weight: 600;
    text-align: center; margin-top: 10px;
}
.all>div>a{
    font-size: 1.25rem; display: block; width: calc(100% - 20px); padding: 30px 0; background-color: #0153A6;
    position: absolute; bottom: 10px; text-align: center; border-radius: 10px; color: #fff; border: 2px solid #0153A6;
    font-weight: 600; transition: all 0.5s;
}
.all>div>a:hover{
    background-color: #fff; color: #0153A6; border: 2px solid #0153A6;
}

/* ==============================전체 메뉴 끝  */
/* ==============================페이지 숫자(pc기준 6개 이상 되었을때 페이지 숫자 자동 생성 자바스크립트) 시작  */
#construction_box .pagination{
    padding: 30px 0;  text-align: center;
    font-size: 1.25rem;
}
#construction_box .pagination>button{margin: 5px;}
/* ==============================페이지 숫자 끝  */