.project_wrap { margin:4rem 0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:50px; }
.project_wrap section { max-width:896px; width:100%; }
.project_wrap .logo_box { display:flex; align-items:center; justify-content:center; gap:5px; }
.project_wrap .logo_box img { width:28px; }
.project_wrap .logo_box h1 { font-size:25px; font-weight:700; }
.project_wrap .search_box .input_box { height:60px; padding:0 30px; display:flex; align-items:center; border:2px solid #00ffca; border-radius:10px; }
.project_wrap .search_box .input_box .left { display:flex; align-items:center; }
.project_wrap .search_box .input_box .left img { width:35px; }
.project_wrap .search_box .input_box .left p { margin:0 30px; font-size:18px; font-weight:500; }
.project_wrap .search_box .input_box .right { display:flex; align-items:center; flex:1 1 auto; gap:20px; }
.project_wrap .search_box .input_box .right input { font-size:16px; text-indent:35px; border:0; border-left:1px solid #ddd; flex:1 1 auto; }
.project_wrap .search_box .input_box .right button { border:0; background:none; }
.project_wrap .search_box .input_box .right button img { width:20px; }
.project_wrap section .table_top { display:flex; justify-content:space-between; align-items:center; }
.project_wrap section .table_top p { margin-bottom:10px; font-size:18px; font-weight:700; }
.project_wrap section .table_top p.service_center { font-size:14px; font-weight:400; }
.project_wrap section .table_top p.service_center span { font-weight:700; }
.project_wrap section table tr th { padding:10px; text-align:center; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-weight:500; background:#F8F9FB; } 
.project_wrap section table tr td { padding:10px; text-align:center; border-bottom:1px solid #ddd; }
.project_wrap section table tr td:nth-child(2) { width:60%; text-align:left; }
.project_wrap .info_box table tr td:nth-child(2) p { text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.project_wrap .progress_details table tr td:nth-child(2) { width:70%; }
.project_wrap .progress_box { padding:0 1rem; }
.project_wrap .progress_box ul { display:flex; justify-content:space-between; align-items:center; }
.project_wrap .progress_box ul li { width:100px; height:100px; border:1px solid #ddd; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.project_wrap .progress_box ul li span { width:50px; height:50px; display:inline-block; background:url('/image/home/icon.svg')no-repeat; background-size:200px; }
.project_wrap .progress_box ul li p { color:#504F53; }
.project_wrap .progress_box ul li:nth-child(1) span { background-position:0 0; }
.project_wrap .progress_box ul li:nth-child(3) span { background-position:-50px 0; }
.project_wrap .progress_box ul li:nth-child(5) span { background-position:-100px 0; }
.project_wrap .progress_box ul li:nth-child(7) span { background-position:-150px 0; }
.project_wrap .progress_box ul li.on { border:1px solid #D02124; }
.project_wrap .progress_box ul li.on p { color:#D02124; }
.project_wrap .progress_box ul li.on:nth-child(1) span { background-position:0 -50px; }
.project_wrap .progress_box ul li.on:nth-child(3) span { background-position:-50px -50px; }
.project_wrap .progress_box ul li.on:nth-child(5) span { background-position:-100px -50px; }
.project_wrap .progress_box ul li.on:nth-child(7) span { background-position:-150px -50px; }
.project_wrap .progress_box ul li.line.on div { background:#D02124; }
.project_wrap .progress_box ul li.line { width:calc((100% - 400px) / 3); border:0; }
.project_wrap .progress_box ul li.line div { width:80%; height:1px; position:absolute; top:50%; right:10%; transform:translateY(-50%); background:#ddd; }
.project_wrap .link_box ul { display:flex; gap:10px; }
.project_wrap .link_box ul li a { display:block; width:100%; height:100%; position:relative; }
.project_wrap .link_box ul li a img { width:100%; }
.project_wrap .link_box ul li a .text { position:absolute; top:50%; left:4rem; transform:translateY(-50%); }
.project_wrap .link_box ul li a .text span:first-child { font-size:24px; font-weight:800; line-height:32px; }
.project_wrap .link_box ul li a .text span:last-child { margin-top:10px; font-size:16px; display:block; }

@media only screen and (max-width:1280px){ 
    .project_wrap section { max-width:640px; }
    .project_wrap .link_box ul li a .text { left:2rem; }
    .project_wrap .link_box ul li a .text span:first-child { font-size:18px; font-weight:700; line-height:24px; }
    .project_wrap .link_box ul li a .text span:last-child { margin-top:5px; font-size:13px; display:block; }
}

@media only screen and (max-width:768px){
    .project_wrap { gap:30px; }
    .project_wrap .logo_box img { width:25px; }
    .project_wrap .logo_box h1 { font-size:22px; }
    .project_wrap section { max-width:none; width:95%; }
    .project_wrap .search_box .input_box { height:50px; padding:0 10px; }
    .project_wrap .search_box .input_box .left p { margin:0 10px; font-size:14px; } 
    .project_wrap .search_box .input_box .left img { width:25px; }
    .project_wrap .search_box .input_box .right { gap:10px; }
    .project_wrap .search_box .input_box .right input { text-indent:10px; font-size:14px; }
    .project_wrap section .table_top p { font-size:14px; }
    .project_wrap section table tr td:nth-child(2) { width:45%; }
    .project_wrap .progress_details table tr td:nth-child(2) { width:60%; }
    .project_wrap .progress_box ul li { width:70px; height:70px; }
    .project_wrap .progress_box ul li p { font-size:12px; }
    .project_wrap .progress_box ul li span { width:35px; height:35px; background-size:140px; }
    .project_wrap .progress_box ul li:nth-child(1) span { background-position:0 0; }
    .project_wrap .progress_box ul li:nth-child(3) span { background-position:-35px 0; }
    .project_wrap .progress_box ul li:nth-child(5) span { background-position:-70px 0; }
    .project_wrap .progress_box ul li:nth-child(7) span { background-position:-105px 0; }
    .project_wrap .progress_box ul li.on:nth-child(1) span { background-position:0 -35px; }
    .project_wrap .progress_box ul li.on:nth-child(3) span { background-position:-35px -35px; }
    .project_wrap .progress_box ul li.on:nth-child(5) span { background-position:-70px -35px; }
    .project_wrap .progress_box ul li.on:nth-child(7) span { background-position:-105px -35px; }
    .project_wrap .progress_box ul li.line { width:10px; }
    .project_wrap .link_box ul { flex-direction:column; gap:10px; }
    .project_wrap .info_box table tbody { display:flex; }
    .project_wrap .info_box table tr { display:flex; flex-direction:column; }
    .project_wrap .info_box table tr:first-child { width:110px; border-top:1px solid #ddd; }
    .project_wrap .info_box table tr:last-child { width:calc(100% - 110px);  }
    .project_wrap .info_box table tr th { border:0; border-bottom:1px solid #ddd; }
    .project_wrap .info_box table tr th:nth-child(2) { height:61px; line-height:41px; }
    .project_wrap .info_box table tr td { text-align:left; }
    .project_wrap .info_box table tr td:first-child { border-top:1px solid #ddd; }
    .project_wrap .info_box table tr td:nth-child(2) { width:100%; height:61px; }
}