@charset "UTF-8";

/* -------------------------------------------------------------------------------- 전체 제어 --------------------------------------------------------------------------------  */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#wrap * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    outline: none;
}
#wrap strong { font-weight: 700; }


body
{
    /* Pretendard 기본폰트 */
    font-family: 'Paperlogy', 'Pretendard-Regular', 'Noto Sans KR', 'Roboto', 'Rubik';
    font-weight: normal;
    font-size: 18px;
    letter-spacing: -0.02rem;
}

/* -------------------------------------------------------------------------------- font --------------------------------------------------------------------------------  */

/* Font 1. Pretendard */
@font-face
{
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.medsoft.co.kr/fonts/Pretendard/Pretendard-Regular.ttf');
    font-weight: 400;
}
@font-face
{
    font-family: 'Pretendard-Medium';
    src: url(../font/Pretendard-Medium.ttf);
}
@font-face
{
    font-family: 'Pretendard-Bold';
    src: url(../font/Pretendard-Bold.ttf);
}
@font-face
{
    font-family: 'Pretendard-SemiBold';
    src: url(../font/Pretendard-SemiBold.ttf);
}
@font-face
{
    font-family: 'Pretendard-ExtraBold';
    src: url(../font/Pretendard-ExtraBold.ttf);
}
@font-face
{
    font-family: 'Pretendard-Black';
    src: url(../font/Pretendard-Black.ttf);
}
@font-face
{
    font-family: 'Pretendard-Light';
    src: url(../font/Pretendard-Light.ttf);
}

@font-face
{
    font-family: 'Paperlogy';
    font-weight: 100;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-1Thin.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 200;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-2ExtraLight.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-3Light.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-4Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-5Medium.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-6SemiBold.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-7Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-8ExtraBold.ttf') format('truetype');
    font-display: swap;
}
@font-face
{
    font-family: 'Paperlogy';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.medsoft.co.kr/fonts/paperlogy/Paperlogy-9Black.ttf') format('truetype');
    font-display: swap;
}

/** 
    * Font 2. Noto Sans KR
    * Font 3. Rubik
    * Font 4. Roboto
*/


@font-face {
    font-family: 'EliceDX-Bold';
    src: url(../font/EliceDXNeolli-Bold.ttf);
}

.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* ---------------------------------------- 공통 부분 common으로 옮김 230530 추경림 ---------------------------------------- */

.tablet {display:block;}
.mobile {display:none;}

strong {font-weight:700;}
p {font-size: 18px;line-height: 28px;color: #000; word-break: keep-all;}
ul li{word-break: keep-all;}
dd{word-break: keep-all;}
a {color:#000; word-break:keep-all;}
img {display: inline-block; vertical-align: middle; max-width: 100%; margin: 0;}
/* table { border-top: 0; border:1px solid #ddd;} */
table.type01 thead th, table.type01 tbody th, table.type01 tbody td {vertical-align:top; padding:8px; font-size:16px;}
/* table thead th, table tbody td { border-bottom: 0; border-right: 1px solid #ddd;} */
table thead th { font-weight: 800; padding: 15px 0; }
/* table thead tr{border-bottom: 1px solid #ddd;}
table tbody tr{border-bottom: 1px solid #ddd;} */
table thead td { padding: 3px 0; }

#wrap {position:relative; text-align:center; width:100%; min-width:320px; margin:0 auto;}
#header .wrap, #footer .wrap {display:inline-block; vertical-align:middle; position:relative; width:1400px; margin:0 auto;}
#contents {display:inline-block; vertical-align:middle; width:100%;}
#header .h_logo.mobile {display:inline-block; vertical-align:middle; width:210px; height:60px; transition:0.2s; display:none;}


/* -------------------------------------------------------------------------------- sitemap -------------------------------------------------------------------------------- */
.sitemap_list > li {height: 400px;}
.sitemap_list > li:hover > a {background-color:#3698d7;}
.sitemap_list > li > ul li a:hover {color: #3698d7;}



/* -------------------------------------------------------------------------------- box -------------------------------------------------------------------------------- */
.box1 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
}
.box2 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.box3 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    border-radius: 10px;
}
.box4 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:1px solid #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.box5 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:3px dashed #eee;
    background-color:#fafafa;
    box-sizing:border-box;
}
.box6 {
    display:inline-block;
    width:100%;
    padding:20px;
    border:3px dashed #eee;
    background-color:#fafafa;
    box-sizing:border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}



/* -------------------------------------------------------------------------------- btn size -------------------------------------------------------------------------------- */
.btn-v-big a {
    display: block; 
    margin-top: 20px;
    width: 300px; 
    height: 70px; 
    line-height: 70px;
    background: #fff; 
    color: #000; 
    font-size: 20px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-big a {
    display: block; 
    margin-top: 20px;
    width: 200px; 
    height: 50px; 
    line-height: 50px;
    background: #fff; 
    color: #000; 
    font-size: 16px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-basic a {
    display: block; 
    margin-top: 20px;
    width: 150px; 
    height: 45px; 
    line-height: 45px;
    background: #fff; 
    color: #000; 
    font-size: 16px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-small a {
    display: block; 
    margin-top: 20px;
    width: 100px; 
    height: 40px; 
    line-height: 40px;
    background: #fff; 
    color: #000; 
    font-size: 14px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}
.btn-v-small a {
    display: block; 
    margin-top: 20px;
    width: 70px; 
    height: 35px; 
    line-height: 35px;
    background: #fff; 
    color: #000; 
    font-size: 14px;
    text-align: center;
    border: 1px solid #000; 
    transition: all 0.7s ease;
}



/* -------------------------------------------------------------------------------- 버튼효과 (btn effect) -------------------------------------------------------------------------------- */
.btn-hover {display: flex; justify-content: space-between; margin: 60px auto;  max-width: 1280px;}
.btn-hover div {width: 20%; height: 100%; color: #000;}

/* btn1 */
.btn-hov1 a:hover { color: #fff; border: none; }

/* btn2 */
.btn-hov2 a:hover {
    color: #fff;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
    border-bottom-left-radius: 45px;
    border: none;
}

/* btn3 */
.btn-hov3 a {
    position: relative;
    /*background: #000;*/
    color: #fff;
    z-index: 1;
 }
 .btn-hov3 a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background: #fff;
    transition: all 0.3s ease;
    border: none;
 }
 .btn-hov3 a:hover {
    color: #000;
 }
 .btn-hov3 a:hover:after {
    left: 0;
    width: 100%;
 }

 /* btn4 */
.btn-hov4 a {
    position: relative;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn-hov4 a:hover {
    background: transparent;
    color: #222;
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
}
.btn-hov4 a:before,.btn-hov4 a::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: #000;
    transition: 400ms ease all;
}
.btn-hov4 a::after {
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
}
.btn-hov4 a:hover:before,.btn-hov4 a:hover:after{
    width:100%;
    transition: 800ms ease all;
}



/* -------------------------------------------------------------------------------- Button Background color -------------------------------------------------------------------------------- */

/**
    20240105 정규호 추가
    각 사이트 테마별로 버튼 배경색 설정
*/

.btn_cm:hover { background-color: #3698d7 !important; } /* 메인컬러 */
.btn_cm_l:hover { background-color:#53b1eb !important; } /* 메인컬러 */
.btn_cm_d:hover { background-color:#1076b6 !important; } /* 메인컬러 */
.btn_cr:hover { background-color:#b82626 !important; } /* 빨강, red*/
.btn_cr_l:hover { background-color:#ca4e4e !important; } /* 빨강, red*/
.btn_cr_d:hover { background-color:#8b1212 !important; } /* 빨강, red*/
.btn_cy:hover { background-color:#e2ba18 !important; } /* 노랑, yello */
.btn_cy_l:hover { background-color:#f1d35b !important; } /* 노랑, yello */
.btn_cy_d:hover { background-color:#da9604 !important; } /* 노랑, yello */
.btn_co:hover { background-color:#f7941d !important; } /* 오렌지, orange */
.btn_co_l:hover { background-color:#ffaf4e !important; } /* 오렌지, orange */
.btn_co_d:hover { background-color:#d36205 !important; } /* 오렌지, orange */
.btn_ce:hover { background-color:#27b0a5 !important; } /* 청녹, emerald */
.btn_ce_l:hover { background-color:#5bc9c0 !important; } /* 청녹, emerald */
.btn_ce_d:hover { background-color:#07978b !important; } /* 청녹, emerald */
.btn_cs:hover { background-color:#3589d1 !important; } /* 하늘, sky */
.btn_cs_l:hover { background-color:#75aee0 !important; } /* 하늘, sky */
.btn_cs_d:hover { background-color: #0a579b !important; } /* 하늘, sky */
.btn_cb:hover { background-color:#2b62b5 !important; } /* 파랑, blue */
.btn_cb_l:hover { background-color:#597db3 !important; } /* 파랑, blue */
.btn_cb_d:hover { background-color:#104594 !important; } /* 파랑, blue */
.btn_cn:hover { background-color:#2e3192 !important; } /* 남색, navy */
.btn_cn_l:hover { background-color:#5e60a8 !important; } /* 남색, navy */
.btn_cn_d:hover { background-color:#0d0f55 !important; } /* 남색, navy */
.btn_cc:hover { background-color:#737d94 !important; } /* 탁색, charcoal */
.btn_cc_l:hover { background-color: #a4a8b1 !important; } /* 탁색, charcoal */
.btn_cc_d:hover { background-color:#4a5266 !important; } /* 탁색, charcoal */
.btn_cd:hover { background-color:#222 !important; } /* 검정, dark */
.btn_cd_l:hover { background-color:#555 !important;} /* 검정, dark */
.btn_cd_d:hover { background-color:#000 !important; } /* 검정, dark */
.btn_cw:hover { background-color:#fff !important; } /* 화이트 */


/* btn_hov3 전용 배경색 클래스 */
.btn3_cm, .btn3_cm:hover { background-color: #104b56 !important; } /* 메인컬러 */
.btn3_cm_l, .btn3_cm_l:hover { background-color:#53b1eb !important; } /* 메인컬러 */
.btn3_cm_d, .btn3_cm_d:hover { background-color:#1076b6 !important; } /* 메인컬러 */
.btn3_cr, .btn3_cr:hover { background-color:#b82626 !important; } /* 빨강, red*/
.btn3_cr_l, .btn3_cr_l:hover { background-color:#ca4e4e !important; } /* 빨강, red*/
.btn3_cr_d, .btn3_cr_d:hover { background-color:#8b1212 !important; } /* 빨강, red*/
.btn3_cy, .btn3_cy:hover { background-color:#e2ba18 !important; } /* 노랑, yello */
.btn3_cy_l, .btn3_cy_l:hover { background-color:#f1d35b !important; } /* 노랑, yello */
.btn3_cy_d, .btn3_cy_d:hover { background-color:#da9604 !important; } /* 노랑, yello */
.btn3_co, .btn3_co:hover { background-color:#f7941d !important; } /* 오렌지, orange */
.btn3_co_l, .btn3_co_l:hover { background-color:#ffaf4e !important; } /* 오렌지, orange */
.btn3_co_d, .btn3_co_d:hover { background-color:#d36205 !important; } /* 오렌지, orange */
.btn3_ce, .btn3_ce:hover { background-color:#27b0a5 !important; } /* 청녹, emerald */
.btn3_ce_l, .btn3_ce_l:hover { background-color:#5bc9c0 !important; } /* 청녹, emerald */
.btn3_ce_d, .btn3_ce_d:hover { background-color:#07978b !important; } /* 청녹, emerald */
.btn3_cs, .btn3_cs:hover { background-color:#3589d1 !important; } /* 하늘, sky */
.btn3_cs_l, .btn3_cs_l:hover { background-color:#75aee0 !important; } /* 하늘, sky */
.btn3_cs_d, .btn3_cs_d:hover { background-color: #0a579b !important; } /* 하늘, sky */
.btn3_cb, .btn3_cb:hover { background-color:#2b62b5 !important; } /* 파랑, blue */
.btn3_cb_l, .btn3_cb_l:hover { background-color:#597db3 !important; } /* 파랑, blue */
.btn3_cb_d, .btn3_cb_d:hover { background-color:#104594 !important; } /* 파랑, blue */
.btn3_cn, .btn3_cn:hover { background-color:#2e3192 !important; } /* 남색, navy */
.btn3_cn_l, .btn3_cn_l:hover { background-color:#5e60a8 !important; } /* 남색, navy */
.btn3_cn_d, .btn3_cn_d:hover { background-color:#0d0f55 !important; } /* 남색, navy */
.btn3_cc, .btn3_cc:hover { background-color:#737d94 !important; } /* 탁색, charcoal */
.btn3_cc_l, .btn3_cc_l:hover { background-color: #a4a8b1 !important; } /* 탁색, charcoal */
.btn3_cc_d, .btn3_cc_d:hover { background-color:#4a5266 !important; } /* 탁색, charcoal */
.btn3_cd, .btn3_cd:hover { background-color:#222 !important; } /* 검정, dark */
.btn3_cd, .btn3_cd:hover { background-color:#555 !important;} /* 검정, dark */
.btn3_cd_d, .btn3_cd_d:hover { background-color:#000 !important; } /* 검정, dark */
.btn3_cw, .btn3_cw:hover { background-color:#fff !important; } /* 화이트 */



/* -------------------------------------------------------------------------------- table -------------------------------------------------------------------------------- */

/* 테이블 */
.tbl-wrap .tbl3 tbody tr td {border-right: 1px solid #eee;}
.tbl-wrap .tbl3 tbody tr td:last-child {border-right: none;}

/* 반응형 레이아웃 */
@media all and (max-width: 768px) {
    /* tbl1 (첫번째 테이블 예시) */
    .tbl-wrap .tbl1 col {
        width: 100% !important;
    }
    .tbl-wrap .tbl1 thead {
        display: none;
    }
    .tbl-wrap .tbl1 tbody tr {
        border-bottom: 1px solid #efefef;
    }
    .tbl-wrap .tbl1 tbody tr td {
        width: 100%;
        display: flex;
        margin-bottom: 2px;
        border-bottom: none;
        font-size: 14px;
        line-height: 18px;
    }
    .tbl-wrap .tbl1 tbody tr td:first-child,
    .tbl-wrap .tbl1 tbody tr th:first-child {
        padding-top: 16px;
    }
    .tbl-wrap .tbl1 tbody tr td:last-child,
    .tbl-wrap .tbl1 tbody tr th:last-child {
        padding-bottom: 15px;
    }


    /* tbl2 (두번째 테이블 예시) */
    .tbl-wrap .tbl2 col {
        width: 100% !important;
    }
    .tbl-wrap .tbl2 thead {
        display: none;
    }
    .tbl-wrap .tbl2 tbody tr {
        border-bottom: 1px solid #efefef;
    }
    .tbl-wrap .tbl2 tbody tr td {
        width: 100%;
        display: flex;
        margin-bottom: 2px;
        border-bottom: none;
        font-size: 14px;
        line-height: 18px;
    }
    .tbl-wrap .tbl2 tbody tr td:first-child,
    .tbl-wrap .tbl2 tbody tr th:first-child {
        padding-top: 16px;
    }
    .tbl-wrap .tbl2 tbody tr td:last-child,
    .tbl-wrap .tbl2 tbody tr th:last-child {
        padding-bottom: 10px;
    }
    .tbl-wrap .tbl2 tbody tr td:before {
        display: inline-block;
        margin-right: 12px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
        flex: 0 0 100px;
        font-weight: 700;
        content: attr(data-label);
    }


    /* tbl3 (세번째 테이블 예시) */
    .tbl-wrap .tbl3 col {
        width: 100% !important;
    }
    .tbl-wrap .tbl3 thead {
        display: none;
    }
    .tbl-wrap .tbl3 tbody tr {
        border-bottom: 1px solid #ccc;
    }
    .tbl-wrap .tbl3 tbody tr th {
        padding: 15px;
        width: 100%;
        display: flex;
        border-bottom: none;
        border-right: none;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        line-height: 16px;
    }
    .tbl-wrap .tbl3 tbody tr td {
        padding: 15px;
        width: 100%;
        display: flex;
        border-bottom: none;
        border-right: none;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        line-height: 24px;
    }
    .tbl-wrap .tbl3 tbody tr td:last-child,
    .tbl-wrap .tbl3 tbody tr th:last-child {
        border-bottom: none;
    } 
    /* .tbl-wrap .tbl3 tbody tr td:before {
        display: inline-block;
        margin-right: 12px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
        flex: 0 0 100px;
        font-weight: 700;
        content: attr(data-label);
    } */


    /* tbl4 (네번째 테이블 예시) */
    .tbl-scroll {width: 100%; overflow: hidden;}
    .tbl-scroll .tbl4 {overflow-x: scroll;}
    .tbl-scroll .tbl4 table {width: 100%; min-width: 768px;}
    .tbl-scroll .tbl4 tbody tr td {
        font-size: 14px;
        line-height: 18px;
    }
}

/* -------------------------------------------------------------------------------- Table Border color -------------------------------------------------------------------------------- */

/**
    20240104 정규호 추가
    각 사이트 테마별로 테이블 상단 Border 색상 적용 위함
*/

.tbl_cm { border-top: 2px solid #3698d7 !important; } /* 메인컬러 */
.tbl_cm_l { border-top: 2px solid #53b1eb !important; } /* 메인컬러 */
.tbl_cm_d { border-top: 2px solid #1076b6 !important; } /* 메인컬러 */
.tbl_cr { border-top: 2px solid #b82626 !important; } /* 빨강, red*/
.tbl_cr_l { border-top: 2px solid #ca4e4e !important; } /* 빨강, red*/
.tbl_cr_d { border-top: 2px solid #8b1212 !important; } /* 빨강, red*/
.tbl_cy { border-top: 2px solid #e2ba18 !important; } /* 노랑, yello */
.tbl_cy_l { border-top: 2px solid #f1d35b !important; } /* 노랑, yello */
.tbl_cy_d { border-top: 2px solid #da9604 !important; } /* 노랑, yello */
.tbl_co { border-top: 2px solid #f7941d !important; } /* 오렌지, orange */
.tbl_co_l { border-top: 2px solid #ffaf4e !important; } /* 오렌지, orange */
.tbl_co_d { border-top: 2px solid #d36205 !important; } /* 오렌지, orange */
.tbl_ce { border-top: 2px solid #27b0a5 !important; } /* 청녹, emerald */
.tbl_ce_l { border-top: 2px solid #5bc9c0 !important; } /* 청녹, emerald */
.tbl_ce_d { border-top: 2px solid #07978b !important; } /* 청녹, emerald */
.tbl_cs { border-top: 2px solid #3589d1 !important; } /* 하늘, sky */
.tbl_cs_l { border-top: 2px solid #75aee0 !important; } /* 하늘, sky */
.tbl_cs_d { border-top: 2px solid #0a579b !important; } /* 하늘, sky */
.tbl_cb { border-top: 2px solid #2b62b5 !important; } /* 파랑, blue */
.tbl_cb_l { border-top: 2px solid #597db3 !important; } /* 파랑, blue */
.tbl_cb_d { border-top: 2px solid #104594 !important; } /* 파랑, blue */
.tbl_cn { border-top: 2px solid #2e3192 !important; } /* 남색, navy */
.tbl_cn_l { border-top: 2px solid #5e60a8 !important; } /* 남색, navy */
.tbl_cn_d { border-top: 2px solid #0d0f55 !important; } /* 남색, navy */
.tbl_cc { border-top: 2px solid #737d94 !important; } /* 탁색, charcoal */
.tbl_cc_l { border-top: 2px solid #a4a8b1 !important; } /* 탁색, charcoal */
.tbl_cc_d { border-top: 2px solid #4a5266 !important; } /* 탁색, charcoal */
.tbl_cd { border-top: 2px solid #222 !important; } /* 검정, dark */
.tbl_cd_l { border-top: 2px solid #555 !important;} /* 검정, dark */
.tbl_cd_d { border-top: 2px solid #000 !important; } /* 검정, dark */
.tbl_cw { border-top: 2px solid #fff !important; } /* 화이트 */
.tbl_ca{border-top: 3px solid transparent ; background-image: linear-gradient(#fff, #fff), 
    linear-gradient(to right, #104b56 0%,  #1f1f48 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;}



/* -------------------------------------------------------------------------------- 반응형 -------------------------------------------------------------------------------- */

@media screen and (max-width: 1280px) {
    .btn-hover {flex-wrap: wrap;}
    .btn-hover div {width: 50%; margin-bottom: 30px;}
}
@media screen and (max-width: 768px) {
    .agree li {width:100% !important; margin-bottom:5px;}
    .agree li > div {display:inline-block; vertical-align:middle; width:100%; padding:10px 20px;}
    .agree li > div > i {float:left; width:20px; height:20px;}
    .agree li > div > i:before {left:5px; top:6px; width:9px; height:4px;}
    .agree li > div > p {display:inline-block; vertical-align:middle; float:right; margin-top:3px; font-size:12px; letter-spacing:-0.5px;}
    .box.scroll_y {height:100px;}
    .box.scroll_y h2 {font-size:16px; line-height:20px; font-weight:500; margin-bottom:5px;}
    .box.scroll_y h3 {font-size:14px; line-height:18px; font-weight:500; margin-bottom:5px;}
    .box.scroll_y p {font-size:12px; line-height:14px; margin-top:5px;}
    .box.scroll_y div {margin-bottom:5px;}
    .box.scroll_y ul {list-style: circle; padding-left:10px;}
    .box.scroll_y ul li {list-style-type: disc; font-size:12px; line-height:14px;}

    .btn-hover div {width: 100%;}

    /* .tab01 {padding: 10px;}
    .tab01 li {width: 22%;}

    .tab02 ul li {width: 47%;} */
}



/* -------------------------------------------------------------------------------- agree -------------------------------------------------------------------------------- */

.agree {display:inline-block; vertical-align:middle; width:100%;}
.agree.li1 li {width:100%;}
.agree.li2 li {width:50%;}
.agree.li3 li {width:33.3%;}
.agree.li4 li {width:25%;}
.agree li {display:inline-block; vertical-align:middle; position:relative; float:left;}
.agree li > div {display:inline-block; vertical-align:middle; width:95%; padding:20px 0; border:1px solid #999; border-radius:2px; text-align:center;}
.agree li > div > i {display:inline-block; vertical-align:middle; position:relative; width:30px; height:30px; background-color:#999; border-radius:30px;}
.agree li > div > i:before {content:''; position:absolute; left:9px; top:11px; width:12px; height:5px; border-bottom: solid 1px #fff; border-left: solid 1px #fff; transform: rotate(-45deg);}
.agree li > div > p {margin-top:15px; font-size:14px; line-height:16px; color:#999;}
.agree li.on > div {border-color:#3698d7; background-color:#f9fffe;}
.agree li.on > div > i {background-color:#3698d7;}
.agree li.on > div > i:before {border-color:#fff;}
.agree li.on > div > p {color:#222;}
.box.scroll_y {height:250px;}
.box.scroll_y h2 {font-size:18px; line-height:24px; font-weight:500; margin-bottom:5px;}
.box.scroll_y h3 {font-size:14px; line-height:20px; font-weight:500; margin-bottom:5px;}
.box.scroll_y p {font-size:14px; line-height:20px; margin-top:5px;}
/* .box.scroll_y div {margin-bottom:20px;} */
.box.scroll_y ul {list-style: circle; padding-left:10px;}
.box.scroll_y ul li {list-style-type: none;font-size:14px; line-height:18px;position:relative}
.box.scroll_y ul li:before{position:absolute;left:-10px;top:7px;content:'';display:'inline-block';width:6px;height:1px;background-color:#000;}


.text {
    font-size: 15px;
    font-weight: 300;
    line-height: 25px;
    word-wrap: normal;
    word-break: keep-all;
}
#c_contents .c_sub .cs_body {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.text.giant, .text .giant {
    font-size: 30px !important;
    line-height: 40px;
}
.text.middle, .text .middle {
    font-size: 18px !important;
    line-height: 28px;}
.line.bb {
    border-bottom-width: 1px;
}
.line {
    border-style: solid;
    border-color: #e5e5e5;
}
.text.medium, .text .medium {
    font-weight: 500;
}
.history {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
#c_contents .c_sub .cs_presidents.on {
    display: inline-block;
}
.text.bold, .text .bold {
    font-weight: 700;
}
.title.t1 {
    font-size: 25px;
    line-height: 30px;
    font-weight: bold;
}
.title.t2 {
    font-size: 21px;
    line-height: 30px;
    font-weight: bold;
}
.title.bar {
    position: relative;
    padding-bottom: 5px;
}

.history section {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-bottom: 60px;
}
.history .deco {
    display: inline-block;
    vertical-align: middle;
    width: 25%;
    padding-top: 20px;
    font-size: 22px;
    font-weight: 500;
    float: left;
}
.deco {
    position: relative;
    padding-top: 17px;
}
.deco:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 6px;
    top: 0;
    width: 5px;
    height: 14px;
    background: #13ab9e;
    transform: skewX(
            -30deg
    );
    -ms-transform: skewX(-30deg);
}
.r_contents {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
}
.r_contents ul {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: calc(100% + 60px);
    margin-left: -30px;
}
 .r_contents li {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    float: left;
    position: relative;
    width: 50%;
    padding: 30px;
}


/* 20231109 정규호 수정 */


/* -------------------------------------------------------------------------------- tab -------------------------------------------------------------------------------- */


* { scroll-behavior: smooth; }

/* 탭 스타일 1 */
.tab01 {
    margin-bottom: 20px;
    text-align: left;
}
.tab01 ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.tab01 li.on, .tab01 li:hover {
    /* 테마색상은 사이트 스타일에 맞게 변경 */
    background: linear-gradient(100deg, #104b56, #1f1f48);
    color: #fff;
}
.tab01 li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: 300px;
    padding: 15px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab01_contents_wrap {
    width: 100%;
    height: auto;
}
.tab01_contents_wrap > div:not(.tab01_content_1) { display: none; }

/* 탭 스타일 2 */
.tab02 {
    padding: 20px;
    text-align: left;
}
.tab02 ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tab02 ul li.on, .tab02 ul li:hover { border-bottom: 3px solid #1f1f48; }
.tab02 ul li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
}
.tab02_contents_wrap {
    width: 100%;
    height: auto;
}
.tab02_contents_wrap > div:not(.tab02_content_1) { display: none; }

/* 탭 스타일 3 */
.tab03 {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
    text-align: left;
}
.tab03 ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.tab03 li.on, .tab03 li:hover {
    /* 테마색상은 사이트 스타일에 맞게 변경 */
    background-color: #3698d7;
    color: #fff;
}
.tab03 li {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab03_contents_wrap {
    width: 100%;
    height: auto;
}
.tab03_contents_wrap > div:not(.tab03_content_1) { display: none; }

/* 탭 스타일 4 */
.tab04 {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
    text-align: left;
}
.tab04 ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.tab04 li.on, .tab04 li:hover {
    /* 테마색상은 사이트 스타일에 맞게 변경 */
    background-color: #3698d7;
    color: #fff;
}
.tab04 li {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab04_contents_wrap {
    width: 100%;
    height: auto;
}
.tab04_contents_wrap > div:not(.tab04_content_1) { display: none; }

@media all and (max-width: 1000px) {
    .tab04 ul { flex-wrap: wrap; }
    .tab04 li { width: 350px !important; }
}
@media all and (max-width: 400px) {
    .tab04 li { width: 100% !important; }
}

/* 탭 스타일 5 */
.tab05 {
    margin-bottom: 20px;
    padding: 10px;
    border: 2px dashed #eee;
    border-radius: 8px;
    scroll-behavior: smooth;
    position: relative;
    z-index: 10;
}
.tab05 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tab05 ul li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab05 ul li:hover { border-color: #007db8; }
.tab05 ul li:hover a { color: #007db8; }
.tab05 ul li a {
    display: block;
    color: #222;
    transition: all 0.2s linear;
    font-size: 14px;
}

/* 탭 스타일 4 */
.tab06 {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    scroll-behavior: smooth;
}
.tab06 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tab06 ul li {
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
    width: auto;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.tab06 ul li:hover { border-color: #007db8; }
.tab06 ul li:hover a { color: #007db8; }
.tab06 ul li a {
    display: block;
    color: #222;
    transition: all 0.2s linear;
    font-size: 14px;
}

/* -------------------------------------------------------------------------------- 인사말 -------------------------------------------------------------------------------- */

/* 작은 사진형 */

/* 작은 사진형 전체 */
.small_greeting_wrap { width: 100%; }

/* 작은 사진형 타이틀 (텍스트 및 이미지) */
.small_greeting_wrap .small_greeting_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 55px;
}
.small_greeting_wrap .small_greeting_title img {
    /* 가급적 이미지도 해당 사이즈로 맞춰주세요 */
    width: 204px;
    height: 250px;
}
.small_greeting_wrap .small_greeting_title .small_greeting_title_txt { width: calc(100% - 204px); padding-left: 40px; }
.small_greeting_wrap .small_greeting_title .small_greeting_title_txt h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
}
.small_greeting_wrap .small_greeting_title .small_greeting_title_txt p { font-size: 18px; }

/* 작은 사진형 컨텐츠 */
.small_greeting_wrap .small_greeting_content { width: 100%; }
.small_greeting_wrap .small_greeting_content p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 50px;
}
.small_greeting_wrap .small_greeting_content .final {
    text-align: right;
    font-size: 19px;
    margin-bottom: 70px;
}
.small_greeting_wrap .small_greeting_content .final span { font-weight: bold; }

/* 작은 사진형 반응형 */
@media all and (max-width: 650px) {
    .small_greeting_wrap .small_greeting_title img { display: none; }
    .small_greeting_wrap .small_greeting_title .small_greeting_title_txt {
        width: 100%;
        margin-top: 30px;
        padding-left: 0;
    }
    .small_greeting_wrap .small_greeting_title .small_greeting_title_txt h3 { font-size: 25px; line-height: 35px; }
}

/* 큰 사진형 */

/* 큰 사진형 전체 */
.big_greeting_wrap { width: 100%; margin-bottom: 100px }
.big_greeting_wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, #cce8ee, #1791dd);
    border-bottom-left-radius: 5px;
}

/* 큰 사진형 타이틀 (텍스트 및 이미지) */

/* 텍스트 */
.big_greeting_wrap .big_greeting_title {
    display: flex;
    position: relative;
    align-items: flex-end;
    margin-top: 35px;
}
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt { width: 75%; }
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div {
    background: linear-gradient(90deg, #e7f1f3, #fff);
    margin-top: 40px;
    padding-top: 110px;
    padding-left: 70px;
    height: 310px;
    border-radius: 10px;
}
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div h3 {
    font-size: 29px;
    margin-bottom: 40px;
    font-weight: 900;
}
.big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div p { font-size: 22px; margin-bottom: 27px; }

/* 이미지 */
.big_greeting_wrap .big_greeting_title .big_greeting_title_img { width: 38%; }

/* 작은 사진형 컨텐츠 */
.big_greeting_wrap .big_greeting_content { width: 100%; margin-top: 60px; }
.big_greeting_wrap .big_greeting_content p {
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: #333;
    margin-bottom: 30px;
}
.big_greeting_wrap .big_greeting_content .final { text-align: right; font-size: 19px; }
.big_greeting_wrap .big_greeting_content .final span { font-weight: bold; }

/* 작은 사진형 반응형 */
@media all and (max-width: 1080px) {
    .big_greeting_wrap .big_greeting_title {
        display: block;
        position: static;
        margin-top: 0 !important;
    }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt { width: 100%; }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div {
        margin-top: 0;
        padding-top: 100px;
        padding-left: 0;
        background: none;
    }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_img { display: none; }

    .big_greeting_wrap .big_greeting_content { margin-top: 0 !important; }
}

@media all and (max-width: 670px) {
    .big_greeting_wrap .big_greeting_title { height: 230px; }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div { padding-top: 70px; }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div h3 { font-size: 27px; }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div p { font-size: 19px; }
}

@media all and (max-width: 530px) {
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div h3 { line-height: 35px; margin-bottom: 10px; }
    .big_greeting_wrap .big_greeting_title .big_greeting_title_txt > div p { line-height: 32px; }
    .big_greeting_wrap .big_greeting_content { margin-top: 30px !important; }
    .big_greeting_wrap .big_greeting_content .final { font-size: 15.5px; }
}

/* -------------------------------------------------------------------------------- 연혁 -------------------------------------------------------------------------------- */

/* 작은 레이아웃 */
.small_history_wrap { width: 100%; }
.small_history_wrap .small_each_history { display: flex; margin-bottom: 50px; }
.small_history_wrap .small_each_history strong {
    margin-top: 12px;
    margin-right: 2.5%;
    width: 15%;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 27px;
    color: #333;
    line-height: 1.7em;
}
.small_history_wrap .small_each_history ol {
    position: relative;
    width: 85%;
    padding-left: 5%;
    margin-top: 25px;
}
.small_history_wrap .small_each_history ol::before {
    content: '';
    position: absolute;
    display: block;
    width: 3px;
    left: 0;
    height: 100%;
    background-color: #999;
}
.small_history_wrap .small_each_history ol li { position: relative; }
.small_history_wrap .small_each_history ol li + li { margin-top: 2%; }
.small_history_wrap .small_each_history ol li:first-child::before, .small_history_wrap .small_each_history ol li:last-child::before {
    content: '';
    position: absolute;
    left: -7%;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #3698d7;
    border-radius: 30px;
}
.small_history_wrap .small_each_history ol li:first-child::before { top: 0; }
.small_history_wrap .small_each_history ol li:last-child::before { bottom: 0; }
.small_history_wrap .small_each_history ol li p {
    width: 11%;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4em;
    float: left;
}
.small_history_wrap .small_each_history ol li em {
    margin-left: 5%;
    float: left;
    width: 84%;
    font-size: 16px;
    line-height: 1.7em;
}
.small_history_wrap .small_each_history ol li::after {
    content: '';
    display: block;
    clear: both;
}

/* 작은 레이아웃 반응형 */
@media all and (max-width: 1440px) {
    .small_history_wrap .small_each_history ol li:first-child::before, .small_history_wrap .small_each_history ol li:last-child::before { left: -7%; }
}

@media all and (max-width: 768px) {
    .small_history_wrap .small_each_history { flex-direction: column; }
    .small_history_wrap .small_each_history ol::before { display: none; }
    .small_history_wrap .small_each_history ol li:first-child::before, .small_history_wrap .small_each_history ol li:last-child::before { display: none; }
}

/* 큰 레이아웃 */
.big_each_history { width: 100%; }
.big_each_history .each_date {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-top: 40px;
    margin-bottom: 10px;
}
.big_each_history .each_date h2 {
    position: relative;
    background-image: url(../images/history_icon01.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 48px 48px;
    display: inline-block;
    vertical-align: top;
    width: 165px;
    padding: 12px 20px 12px 30px;
    font-size: 25px;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
    color: #222;
}
.big_each_history .each_date ul {
    width: 730px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-left: 50px;
}
.big_each_history .each_date ul li {
    position: relative;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}
.big_each_history .each_date ul li .big_date_title {
    background-color: #3698d7;
    width: 125px;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    font-size: 18px;
    text-align: center;
    word-break: keep-all;
    font-weight: 500;
    color: #000;
}
.big_each_history .each_date ul li .big_date_title p {
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
}
.big_each_history .each_date ul li .big_date_content {
    width: calc(100% - 120px);
    padding-top: 20px;
    line-height: 1.6;
    position: relative;
    top: -55px;
    left: 137px;
    padding-left: 90px;
    display: flex;
    flex-direction: column;
}
.big_each_history .each_date ul li .big_date_content p {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    word-break: keep-all;
    display: flex;
}
.big_each_history .each_date ul li .big_date_content span {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #666;
    word-break: keep-all;
    font-weight: 400;
}

/* 큰 레이아웃 반응형 */
@media all and (max-width: 1600px) {
    .big_each_history .each_date ul {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }
}

@media all and (max-width: 760px) {
    .big_each_history .each_date ul li .big_date_title {
        width: 100px;
        height: 30px;
        position: relative;
    }
    .big_each_history .each_date ul li .big_date_title p {
        font-size: 14px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .big_each_history .each_date ul li .big_date_content {
        width: 100%;
        padding-left: 0;
        top: -5px;
        left: 0;
    }
    .big_each_history .each_date ul li .big_date_content p { font-size: 15px; }
    .big_each_history .each_date ul li .big_date_content span { font-size: 13px; }
}

/* -------------------------------------------------------------------------------- 회칙 -------------------------------------------------------------------------------- */

/* 제정 (추가 자율) */
.enactment {
    text-align: right;
    width: 100%;
    color: #777;
    line-height: 24px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* 회칙 컨텐츠 부분 */
.rules-wrap {
    width: 100%;
    position: relative;
    margin-bottom: 50px;
    padding-bottom: 50px;
}
.rules-wrap h3 {
    color: #3698d7;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 30px;
    margin-top: -260px;
    padding-top: 260px;
}
.rules-wrap .rules-content { width: 100%; margin-bottom: 50px; }
.rules-wrap .rules-content .rule-subTitle {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}
.rules-wrap .rules-content p {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.7em;
    color: #333;
    text-align: justify;
    word-break: break-all;
}

/* 반응형 */
@media all and (max-width: 1200px) {
    .rules-wrap h3 { margin-top: -250px; padding-top: 250px; }
}

@media all and (max-width: 700px) {
    .rules-wrap h3 { margin-top: -170px; padding-top: 170px; }
}

@media all and (max-width: 480px) {
    .enactment { font-size: 15px; }
    .rules-wrap h3 { font-size: 20px; }
    .rules-wrap .rules-content .rule-subTitle { font-size: 16px; }
    .rules-wrap .rules-content p { font-size: 14px; }
}

/* -------------------------------------------------------------------------------- marginTop 마이너스 -------------------------------------------------------------------------------- */


/*
    2023-11-28 정규호 추가 
    -5 단위로 -300까지 적용가능
    마이너스 표기 규칙은 _(underbar)로 지정
*/

.mt_5 { margin-top: -5px !important; } .mt_10 { margin-top: -10px !important; } .mt_15 { margin-top: -15px !important; } .mt_20 { margin-top: -20px !important; } .mt_25 { margin-top: -25px !important; } .mt_30 { margin-top: -30px !important; } .mt_35 { margin-top: -35px !important; } .mt_40 { margin-top: -40px !important; } .mt_45 { margin-top: -45px !important; } .mt_50 { margin-top: -50px !important; }
.mt_55 { margin-top: -55px !important; } .mt_60 { margin-top: -60px !important; } .mt_65 { margin-top: -65px !important; } .mt_70 { margin-top: -70px !important; } .mt_75 { margin-top: -75px !important; } .mt_80 { margin-top: -80px !important; } .mt_85 { margin-top: -85px !important; } .mt_90 { margin-top: -90px !important; } .mt_95 { margin-top: -95px !important; } .mt_100 { margin-top: -100px !important; }
.mt_105 { margin-top: -105px !important; } .mt_110 { margin-top: -110px !important; } .mt_115 { margin-top: -115px !important; } .mt_120 { margin-top: -120px !important; } .mt_125 { margin-top: -125px !important; } .mt_130 { margin-top: -130px !important; } .mt_135 { margin-top: -135px !important; } .mt_140 { margin-top: -140px !important; } .mt_145 { margin-top: -145px !important; } .mt_150 { margin-top: -150px !important; }
.mt_155 { margin-top: -155px !important; } .mt_160 { margin-top: -160px !important; } .mt_165 { margin-top: -165px !important; } .mt_170 { margin-top: -170px !important; } .mt_175 { margin-top: -175px !important; } .mt_180 { margin-top: -180px !important; } .mt_185 { margin-top: -185px !important; } .mt_190 { margin-top: -190px !important; } .mt_195 { margin-top: -195px !important; } .mt_200 { margin-top: -200px !important; }
.mt_205 { margin-top: -205px !important; } .mt_210 { margin-top: -210px !important; } .mt_215 { margin-top: -215px !important; } .mt_220 { margin-top: -220px !important; } .mt_225 { margin-top: -225px !important; } .mt_230 { margin-top: -230px !important; } .mt_235 { margin-top: -235px !important; } .mt_240 { margin-top: -240px !important; } .mt_245 { margin-top: -245px !important; } .mt_250 { margin-top: -250px !important; }
.mt_255 { margin-top: -255px !important; } .mt_260 { margin-top: -260px !important; } .mt_265 { margin-top: -265px !important; } .mt_270 { margin-top: -270px !important; } .mt_275 { margin-top: -275px !important; } .mt_280 { margin-top: -280px !important; } .mt_285 { margin-top: -285px !important; } .mt_290 { margin-top: -290px !important; } .mt_295 { margin-top: -295px !important; } .mt_300 { margin-top: -300px !important; }

/* -------------------------------------------------------------------------------- 관련사이트 -------------------------------------------------------------------------------- */

/* 1. 탭형 */
.tab_relative_site {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
}
.tab_relative_site li {
    width: 32%;
    height: 170px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.tab_relative_site li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; 
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 25px 0;
}
.tab_relative_site li a img {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.15s linear;
}
.tab_relative_site li a span {
    display: block;
    font-size: 15.5px;
    color: #222;
    transition: all 0.15s linear;
}
.tab_relative_site li:hover a span,
.tab_relative_site li:hover a img { transform: scale(1.05); }

/* 1. 탭형 -> 반응형 */
@media all and (max-width: 768px) {
    .tab_relative_site li { width: 48%; }
}
@media all and (max-width: 480px) {
    .tab_relative_site li { width: 100%; }
}

/* 2. 오픈형 */
.open_relative_site {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.open_relative_site .open_relative_site_box {
    width: 30%;
    height: 220px;
    background-color: #f4f4f4;
    padding: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.open_relative_site .open_relative_site_box .figure,
.open_relative_site .open_relative_site_box .figcaption { width: 100%; text-align: center; }
.open_relative_site .open_relative_site_box .figcaption h6 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin-bottom: 20px;
}
.open_relative_site .open_relative_site_box .figcaption a {
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: #26304c;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 13px 10px;
    border-radius: 5px;
    transition: all 0.5s linear;
}

/* 2. 오픈형 -> 반응형 */
@media all and (max-width: 768px) {
    .open_relative_site .open_relative_site_box { width: 48%; }
}
@media all and (max-width: 480px) {
    .open_relative_site .open_relative_site_box { width: 100%; }
}

/* -------------------------------------------------------------------------------- 너비 Common CSS -------------------------------------------------------------------------------- */

/**
    20231208 정규호 추가 

    2부터 6개까지 넣었습니다
    (너비가 고정된 상태의 경우 탭 컨텐츠가 많아지면 탭 영역 밖으로 벗어나기 때문에 탭이 많아지면 너비 auto인 다른 탭 스타일로 사용 권장)
*/

.w_divide_2 { width: calc(100% / 2) !important; } .w_divide_3 { width: calc(100% / 3) !important; }
.w_divide_4 { width: calc(100% / 4) !important; } .w_divide_5 { width: calc(100% / 5) !important; }
.w_divide_6 { width: calc(100% / 6) !important; }


/**
    *** 솔루션 테마 색상 관련 적용
    --> cm 클래스에 메인 테마색 넣고 신규 세팅시 해당 컬러만 변경하는 식으로
    --> 기타 학술행사 및 게시판, 테이블 보더색은 cr cy 등의 클래스로 어떤 색을 할지 (공통 or 사이트 테마컬러) 회의 후 추후에 변경하기로
    (2023-12-08 정규호)
*/

.search { border-color:#000; background-color:#f9fffe; }
h3.title::after {background-color:#3698d7;}
.btn.bgcm {background:linear-gradient(100deg, #104b56, #1f1f48); border-color:#1f1f48;}
.btn.bgcm:hover {background-color:#454545; border-color:#454545;}
#contents .month_list ul li a span {background: #454545;}
#contents .month_list ul li a:hover span {background: #3698d7;}
.tab.type02 li.on:before {border-top:7px solid #3698d7;}
.hct_info{display:none;}



/* -------------------------------------------------------------------------------- 기본 color -------------------------------------------------------------------------------- */
.cm {color:#3698d7 !important;}/* 메인컬러 */
.cm_l {color:#53b1eb !important;}/* 메인컬러 */
.cm_d {color:#1076b6 !important;}/* 메인컬러 */
.cr {color:#b82626 !important;}/* 빨강, red*/
.cr_l {color:#ca4e4e !important;}/* 빨강, red*/
.cr_d {color:#8b1212 !important;}/* 빨강, red*/
.cy {color:#e2ba18 !important;} /* 노랑, yello */
.cy_l {color:#f1d35b !important;} /* 노랑, yello */
.cy_d {color:#da9604 !important;} /* 노랑, yello */
.co {color:#f7941d !important;} /* 오렌지, orange */
.co_l {color:#ffaf4e !important;} /* 오렌지, orange */
.co_d {color:#d36205 !important;} /* 오렌지, orange */
.ce {color:#27b0a5 !important;} /* 청녹, emerald */
.ce_l {color:#5bc9c0 !important;} /* 청녹, emerald */
.ce_d {color:#07978b !important;} /* 청녹, emerald */
.cs {color:#3589d1 !important;} /* 하늘, sky */
.cs_l {color:#75aee0 !important;} /* 하늘, sky */
.cs_d {color:#0a579b !important;} /* 하늘, sky */
.cb {color:#2b62b5 !important;} /* 파랑, blue */
.cb_l {color:#597db3 !important;} /* 파랑, blue */
.cb_d {color:#104594 !important;} /* 파랑, blue */
.cn {color:#2e3192 !important;} /* 남색, navy */
.cn_l {color:#5e60a8 !important;} /* 남색, navy */
.cn_d {color:#0d0f55 !important;} /* 남색, navy */
.cc {color:#737d94 !important;} /* 탁색, charcoal */
.cc_l {color:#a4a8b1 !important;} /* 탁색, charcoal */
.cc_d {color:#4a5266 !important;} /* 탁색, charcoal */
.cd {color:#222 !important;} /* 검정, dark */
.cd_l {color:#555 !important;} /* 검정, dark */
.cd_d {color:#000 !important;} /* 검정, dark */
.cw {color:#fff !important;} /* 화이트 */



/* -------------------------------------------------------------------------------- 배경 color -------------------------------------------------------------------------------- */
.bgcm {background-color:#3698d7 !important; border: 1px solid #1f1f48 !important;} /* 메인컬러 */
.bgcm_l {background-color:#53b1eb !important; border: 1px solid #53b1eb !important;} /* 메인컬러 */
.bgcm_d {background-color:#1076b6 !important; border: 1px solid #1076b6 !important;} /* 메인컬러 */
.bgcm:hover {background-color:#1076b6 !important; border: 1px solid #1076b6 !important;} /* 메인컬러 */

.bgcr {background-color:#b82626 !important; border: 1px solid #b82626 !important;}/* 빨강 */
.bgcr_l {background-color:#ca4e4e !important; border: 1px solid #ca4e4e !important;}/* 빨강 */
.bgcr_d {background-color:#8b1212 !important; border: 1px solid #8b1212 !important;}/* 빨강 */
.bgcr:hover {background-color:#8b1212 !important; border: 1px solid #8b1212 !important;}/* 빨강 */

.bgcy {background-color:#e2ba18 !important; border: 1px solid #e2ba18 !important;} /* 노랑 */
.bgcy_l {background-color:#f1d35b !important; border: 1px solid #f1d35b !important;} /* 노랑 */
.bgcy_d {background-color:#da9604 !important; border: 1px solid #da9604 !important;} /* 노랑 */
.bgcy:hover {background-color:#da9604 !important; border: 1px solid #da9604 !important;} /* 노랑 */

.bgco {background-color:#f7941d !important; border: 1px solid #f7941d !important;} /* 오렌지 */
.bgco_l {background-color:#ffaf4e !important; border: 1px solid #ffaf4e !important;} /* 오렌지 */
.bgco_d {background-color:#d36205 !important; border: 1px solid #d36205 !important;} /* 오렌지 */
.bgco:hover {background-color:#d36205 !important; border: 1px solid #d36205 !important;} /* 오렌지 */

.bgce {background-color:#27b0a5 !important; border: 1px solid #27b0a5 !important;} /* 청녹 */
.bgce_l {background-color:#5bc9c0 !important; border: 1px solid #5bc9c0 !important;} /* 청녹 */
.bgce_d {background-color:#07978b !important; border: 1px solid #07978b !important;} /* 청녹 */
.bgce:hover {background-color:#07978b !important; border: 1px solid #07978b !important;} /* 청녹 */

.bgcs {background-color:#169be1 !important; border: 1px solid #169be1 !important;} /* 하늘 */
.bgcs_l {background-color:#75aee0 !important; border: 1px solid #75aee0 !important;} /* 하늘 */
.bgcs_d {background-color:#0a579b !important; border: 1px solid #0a579b !important;} /* 하늘 */
.bgcs:hover {background-color:#0a579b !important; border: 1px solid #0a579b !important;} /* 하늘 */

.bgcb {background-color:#2b62b5 !important; border: 1px solid #2b62b5 !important;} /* 파랑 */
.bgcb_l {background-color:#597db3 !important; border: 1px solid #597db3 !important;} /* 파랑 */
.bgcb_d {background-color:#104594 !important; border: 1px solid #104594 !important;} /* 파랑 */
.bgcb:hover {background-color:#104594 !important; border: 1px solid #104594 !important;} /* 파랑 */

.bgcn {background-color:#2e3192 !important; border: 1px solid #2e3192 !important;} /* 남색 */
.bgcn_l {background-color:#5e60a8 !important; border: 1px solid #5e60a8 !important;} /* 남색 */
.bgcn_d {background-color:#0d0f55 !important; border: 1px solid #0d0f55 !important;} /* 남색 */
.bgcn:hover {background-color:#0d0f55 !important; border: 1px solid #0d0f55 !important;} /* 남색 */

.bgcc {background-color:#737d94 !important; border: 1px solid #737d94 !important;} /* 탁색 */
.bgcc_l {background-color:#a4a8b1 !important; border: 1px solid #a4a8b1 !important;} /* 탁색 */
.bgcc_d {background-color:#4a5266 !important; border: 1px solid #4a5266 !important;} /* 탁색 */
.bgcc:hover {background-color:#4a5266 !important; border: 1px solid #4a5266 !important;} /* 탁색 */

.bgcd {background-color:#222 !important; border: 1px solid #222 !important;} /* 검정 */
.bgcd_l {background-color:#555 !important; border: 1px solid #555 !important;} /* 검정 */
.bgcd_d {background-color:#000 !important; border: 1px solid #000 !important;} /* 검정 */
.bgcd:hover {background-color:#555 !important; border: 1px solid #555 !important;} /* 검정 */

.bgw {background-color:#fff;} /* 하얀배경 */
.bgcg {background-color:#fafafa;} /* 연회색 */
.justify {text-align:justify;}

.status-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
}
.status-box i {
    font-size: 20px;
    color: #104b56;
    margin-right: 10px;
}
.status-box p {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: 500;
    /* padding-top: 3px; */
}