body { margin:0 auto; }    
header { max-width:1100px;width:100%;margin:0 auto;color:#FFF;height:80px;padding-top:30px; }

a { color:#333;text-decoration:none; }
a:hover { color:#333;text-decoration:none; }
a:active { color:#333;text-decoration:none; }
a:visited { color:#333;text-decoration:none; }

.gnb a { color:#FFF;text-decoration:none; }

.shadow { -webkit-box-shadow: 0px 7px 18px -1px rgba(226, 226, 226, 1);
        -moz-box-shadow: 0px 7px 18px -1px rgba(226, 226, 226, 1);
        box-shadow: 0px 7px 18px -1px rgba(226, 226, 226, 1); 
        position:fixed;top:0;background:#FFF;z-index:9
}

.logo { width:200px; }
.logo img { width:100%;line-height:80px; }
nav { float:right;height:110px; }
.gnb { list-style:none;width:600px;height:80px;margin-top:-50px; }
.gnb li { float:left;height:80px;color:#FFF;width:25%;text-align:center }
.gnb_active { width:8px;height:8px;background:#FFF;border-radius:50px;margin:0 auto;margin-top:-8px;display:none; }
.icon_bars { display:none; }    
.main_visual { position: absolute;top: 0;left: 0;right: 0;z-index: -1;display: flex;flex-direction: column;justify-content: center; }
.about_bg_01 { background:url('../img/about_bg_01.jpg') top center no-repeat;width:100%;height:800px;background-size:cover;}
.about_bg_02 { background:url('../img/about_bg_02.jpg') top center no-repeat;width:100%;height:800px;background-size:cover;}
.about_bg_03 { background:url('../img/about_bg_03.jpg') top center no-repeat;width:100%;height:800px;background-size:cover;}
.about_bg_04 { background:url('../img/about_bg_04.jpg') top center no-repeat;width:100%;height:800px;background-size:cover;}
.main_txt { color:#FFF;width:100%;text-align:center; }

.section_01 { margin-top:700px; }

.section_inner { max-width:1100px;width:100%;margin:0 auto; }
.flex-column { display:flex;flex-direction: column; }

.flex-row { display:flex;flex-direction:row; }    
.space_around { justify-content: space-around; }
.space_between { justify-content: space-between;  }
.flex_start { justify-content:flex-start; }
.justify_center { justify-content:center; }

.about_wrap { margin-top:150px; }
.about_obj_img_01 { background: url(../img/about_obj_img_01.jpg) center center no-repeat;width: 300px;height: 500px;background-size: cover;margin-right:15px; }
.about_obj_img_02 { background: url(../img/about_obj_img_02.jpg) center center no-repeat;width: 300px;height: 242.5px;background-size: cover; }
.about_obj_img_03 { background: url(../img/about_obj_img_03.jpg) center center no-repeat;width: 300px;height: 242.5px;background-size: cover;margin-top:15px; }

table { width:100%;border-spacing:0; }
table thead { background: #01b3cd;color: #FFF; }
table thead th { padding: 10px 0 10px 0;border-right:1px solid #CCC; }
table thead th:last-child { border-right:none; }
table tbody td { text-align:center;padding:15px;border-bottom:1px solid #CCC; }

.section_bg_02 { background: url('../img/section_02_bg.jpg') center center no-repeat;width:100%;height:400px;background-size: cover;margin-top:15px; }
.service_txt { color: #FFF;position: absolute;font-size: 16pt;margin-top: 60px;width: 200px;text-align: center; }
.service_img { width:60%;float:left; }
.service_info { width:40%;float:left; }

.section_bg_04 { background: url('../img/section_bg_04.jpg') center center no-repeat;width:100%;height:400px;background-size: cover;margin-top:15px; }
.section_bg_05 { background: url('../img/section_bg_05.jpg') center center no-repeat;width:100%;height:400px;background-size: cover;margin-top:15px; }

footer { background:#151515;color:#FFF; }
.footer_logo { float:left; }
footer ul { list-style:none }
footer ul li { float:left; }

.f_left { float:left; }
.f_right { float:right; }

.obj_info div { max-width:350px; }
.obj_info div img { width:100%; }
.obj_img_title { border-bottom:1px solid #bdbdbd;padding-bottom:10px; }

.btn_gnb_close { display:none;position: absolute;z-index:99999999;right: 22px;top: -55px;color: #00a6ba; }


.btn { padding:10px 25px 10px 25px;font-size:15pt;font-weight:500;cursor:pointer;border-radius:5px; }    
.btn_mint_outline { background:#FFF;border:2px solid #00a6ba;color:#00a6ba  }
.btn_mint_outline:hover { background:#00a6ba;color:#FFF; }    
.btn_round { border-radius:50px; }
.bg_mint { background:#00a6ba;color:#FFF;border:none; }
.bg_gray { background:#8f8f8f;color:#FFF;border:none; }
.bg_red { background:#b22424;color:#FFF;border:none; }

.pagination { width:100%; }
.pagination ul { list-style:none;margin:0 auto;text-align:center;padding-left:0 }
.pagination ul li { display:inline-block;width: 40px;height: 40px;line-height: 40px;font-size:14pt; }
.pagination ul .active { background:#00a6ba;border-radius:10px;color:#FFF; }
.pagination ul .active a { color:#FFF; }

.article_view_header { padding: 50px;background: #F7F7F7;border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc; }
.article_body { border-bottom:1px solid #CCC; }


@media (max-width: 768px) {
    .mobile_hidden { display:none; }

    header { padding-top:20px;z-index:9  }
    .logo { padding-left:20px; }
    
    nav { position:absolute;width:100%; }
    .gnb { display:none;position:fixed;right:0;top:50px;height:100vh;background:#FFF;z-index:1000000;padding-top:80px;-webkit-box-shadow: 0px 7px 18px -1px rgba(226, 226, 226, 1);
        -moz-box-shadow: 0px 7px 18px -1px rgba(226, 226, 226, 1);
        box-shadow: 0px 7px 18px -1px rgba(226, 226, 226, 1);  }
    .gnb li {width:80%;height:50px;background:#FFF;line-height:50px; }
    .gnb li a { color:#333 !important; }

    .icon_bars { display:block;z-index:9;position: absolute;right: 20px;top:-55px;cursor: pointer; }

    .section_01 { padding-top:150px;padding-bottom:150px; }
    .about_wrap { text-align:center;float:none;margin-top:0; }
    .about_img { float:none;margin-top:20px;padding:20px; }
    .about_img .flex-column { width:100%; }
    .about_obj_img_01 { width:100%;height:320px; }
    .about_obj_img_02 { width:100%;height:150px; } 
    .about_obj_img_03 { width:100%;height:150px; } 

    .section_02 { height:750px;padding-top:0; }
    .section_02 .section_inner { display:flex;flex-direction:column-reverse; }
    .section_02 .section_inner .flex-column { flex-direction:column }
    .service_img { float:none;width:100%; }
    .service_img .w_200 { width:180px; }
    .service_img .service_txt { width:180px; }
    .service_img .flex-row  { justify-content:center; }
    .service_txt .service_txt { font-size:14pt; }
    .service_info { float:none;width:100%;text-align:center;padding-bottom:60px; }

    .section_03 .obj_info { display:flex;flex-direction:column;max-width:350px;padding:20px; }
    .section_03 .obj_info p, .section_03 .obj_info div div { max-width:350px;width:100% !important; }
    .section_03 .obj_info > div { padding-bottom:20px; }

    .section_bg_04 { height:200px; }
    .section_04 div:nth-child(2) { padding:10px; }

    .footer_logo { float:right;margin-right:20px;margin-top:-20px; }
    footer .flex-column { padding-top:105px;display:block; }
    footer .flex-column ul { max-width:350px; }
    footer .flex-column ul li { width:100%;font-size:11pt; }        
    footer .flex-column ul li:last-child { height:40px; }


    .board_table { height:auto !important;overflow:hidden }
    .board_view { height:auto !important;overflow:hidden; }
    .article_body { padding:15px;}

    table {
        display: block;
        width: 100%;
      }
  
      thead {
        display: none; /* 작은 화면에서는 헤더를 숨김 */
      }
  
      tbody tr {
        display: grid;
        grid-template-columns: 80px 320px; /* 첫 번째 칸은 고정, 나머지는 1fr */
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
      }
  
      tbody tr td:first-child {
        font-weight: bold;
        font-size:16pt;
        border:none;
        border-top:1px solid #ddd;        
      }

      tbody tr td:nth-child(2) { font-weight:bold; }
      tbody tr td:nth-child(3) { font-weight:bold;font-size:14pt;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

      tbody tr td:not(:last-child) { border:none; }
  
      tbody tr td {
        display: flex;
        align-items: center;
        padding:3px;
		justify-content:center;
      }
  
      /* 번호 외의 셀을 세로로 나열 */
      tbody tr td:not(:first-child) {
        grid-column:2;
      }
  
  

}