@charset "utf-8";
/* 모든 페이지 공통 스타일 */
.center_inner { width: 100%; max-width: 1300px; margin: 0 auto; }
.sub_page { font-size: 18px; }
.sub_page article .center_inner { max-width: 1300px; }
.Stxtred{font-size:14px;line-height:1.6;color:red;text-align:left;}
/* simple style */
.w22 { width: 22%; }
.w25 { width: 25%; }
.w33 { width: 33.3%; }
.margin_b10 { margin-bottom: 10px; }
.margin_b15 { margin-bottom: 15px; }

/* text style */
h2 { margin-bottom: 45px; padding-bottom: 35px; font-size: 40px; font-weight: bold; text-align: center; /*background-image: url(../image/icon_dot.png);*/ background-size: 50px; background-position: center bottom; background-repeat: no-repeat;  }
/*h3 { margin-bottom: 35px; font-size: 30px; text-align: center; font-weight: 900;  }*/
h4 { margin-bottom: 15px; font-size: 24px; display: flex; align-items: center; font-weight: bold; }
h4 > img { width: 30px; margin-right: 10px; }
b { font-weight: bold; }
.point_color { color: #06aed2; }
.blue_color { color: #0173ba; }
.deep_blue_color { color: #000369; }
.green_color { color: #01ba01; }
.red_color { color: #f70e0e; }
.s_txt { color: #2f33fc; font-size: 14px; padding-top: 1px;}
.word_keep { word-break: keep-all; }


/* input style */
input, select { box-sizing: border-box; font-size: 16px; }
.checkbox_wrap_style { display: flex; align-items: flex-start; justify-content: center; cursor: pointer; }
.checkbox_wrap_style > input { margin-right: 5px; }

.input_styleA { width: 100%; height: 50px; margin-right: 5px; padding: 2px 10px; border: 1px solid #859cbf; }

.table_wrap .chk_box { display: flex; flex-wrap: wrap; }
.table_wrap .chk_box > span { margin: 10px 20px; }
.table_wrap .chk_box > span.etc { display: flex; align-items: center; margin: 0 20px; }
.table_wrap .chk_box > span.etc label { display: flex; }

.table_wrap .chk_box2 > span { margin: 10px 20px; display: flex; }

/* text box */
.sub_content_box { margin-bottom: 50px; }
.text_box_style { width: 100%; padding: 35px 10px; border: 3px solid #c1c4d5; font-size: 20px; color: #444444; background-color: #f9f9f9; line-height: 1.4; }
.text_box_style_B { width: 100%; padding: 30px; border-top: 2px solid #0dace6; border-bottom: 1px solid #d1d1d1; line-height: 1.6; }


/* table_style */
.table_scroll_box { width: 100%; max-width: 100%; margin-bottom: 10px; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none; }
.table_scroll_box::-webkit-scrollbar { display: none; }

.table_poster_box { display: flex; }
.table_poster_box .poster_wrap { width: 28%; padding-right: 10px; }
.table_poster_box .poster_wrap > img { width: 100%; border: 1px solid #d1d1d1; }
.table_poster_box .table_wrap { width: 72%; }

.table_style_A { width: 100%; margin-bottom: 10px; border-top: 2px solid #0dace6; font-size: 18px;line-height:1.8; }
.table_style_A th { padding: 10px 10px; border-bottom: 1px solid #d1d1d1; background-color: #f3f8fd; vertical-align: middle; font-weight: bold; font-size:13px;}
.table_style_A td { padding: 10px 10px; border-bottom: 1px solid #d1d1d1; vertical-align: middle;  font-size:12px;}

.table_style_B { width: 100%; min-width: 800px; border-top: 2px solid #0dace6; font-size: 18px;line-height:1.8; }
.table_style_B th { padding: 10px 10px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; background-color: #f3f8fd; vertical-align: middle;  font-weight: bold; font-size:13px;}
.table_style_B td { padding: 10px 10px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; vertical-align: middle;  font-size:12px;}
.table_style_B tr > *:last-child { border-right: none; }

table { line-height: 1.5; line-height:1.8; }
table .table_title { font-size: 20px; color: #ffffff; font-weight: bold; background-color: #0dace6; }
table .green_column { background-color: #eefbe1; }
table .blue_column { background-color: #f3f8fd; }
table .gray_column { background-color: #f9f9f9; }
table .img_wrap { display: flex; flex-wrap: wrap; align-items: center; }
table .img_wrap > img { width: 25%; max-width:200px; }
table .list_style_A { margin: 0; }
table .list_style_B { margin: 0; }
table .border_right { border-right: 1px solid #d1d1d1!important; }
.radio-buttons {
    display: flex;
    align-items: center;
    padding: 18px;
    background-color: #f1f1f1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: background-color 0.4s;
    justify-content: space-between;
}

.radio-buttons h4 {
    margin: 0;
    margin-right: 20px;
    flex-shrink: 0;
}

.radio-options {
    display: flex;
    align-items: center;
}

.radio-options label {
    margin-right: 15px;
}

.radio-buttons.active {
    background-color: #007BFF;
    color: #fff;
}

.radio-buttons.inactive {
    background-color: #f1f1f1;
    color: #000;
}

.panel {
    padding: 0 0px;
    background-color: white;
    display: none;
    overflow: hidden;
    box-sizing: border-box;
}

.panel.show {
    display: block;
}

.panel-container {
    margin-top: 10px;
}

@media (max-width: 600px) {
    .radio-buttons {
        flex-direction: column;
        align-items: flex-start;
        font-size:14px;
    }

    .radio-options {
        margin-top: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .radio-options label {
        margin-bottom: 10px;
    }
}

@media all and (max-width:1400px) {
    .center_inner { padding: 0 4%; }
    .sub_page { font-size: 16px; }

    /* list style */
    .list_style_A > li { background-size: 12px 12px; }
    .list_style_B > li { background-size: 12px 12px; background-position: top 6px left; }


    /*############ header ############*/
    /*----- nav -----*/
    header nav .main_menu > li > a { font-size: 20px; }
    header nav .sub_menu > li > a { width: 110%; font-size: 16px; }

    /*----- my menu -----*/
    header .my_menu > a { font-size: 15px; }
    header .my_menu > a > img { width: 22px; }


    /*############ sub 공통 사용 ############*/
    /* sub_side_link_wrap */
    .sub_side_link_wrap { display: none; }
}

@media all and (max-width:1300px) {
    section { padding-top: 80px; }

    /* text style */
    h2 { font-size: 30px; }
    h3 { font-size: 30px; }
    h4 { font-size: 18px; }
    h4 > img { width: 20px; }

    /* text box */
    .text_box_style { font-size: 18px; }

    /* table_style */
    .table_poster_box { flex-direction: column; align-items: center; }
    .table_poster_box .poster_wrap { width: 100%; max-width: 500px; }
    .table_poster_box .table_wrap { width: 100%; }


    /*############ header ############*/
    header { height: 80px; }

    /*----- main logo -----*/
    header .main_logo { width: 180px; }

    /*----- nav -----*/
    header nav { z-index: 1100; width: 300px; height: 100%; padding: 0; max-height: 100%; background-color: #ffffff; overflow: scroll; position: fixed; top: 0; right: -300px; transition: right 0.3s; -ms-overflow-style: none; scrollbar-width: none; }
    header nav::-webkit-scrollbar { display: none; }
    header nav.on { right: 0; transition: right 0.3s; }
    header nav::after { display: none; }

    /* main_menu */
    header nav .main_menu { height: auto; text-align: left; display: block; }
    header nav .main_menu > li { height: auto; display: block; }
    header nav .main_menu > li > a { padding: 15px 4%; display: block; }
    header nav .main_menu > li.on::after { display: none; }
    header nav .main_menu > li.on > a { color: #000000; }

    /* sub_menu */
    header nav .sub_menu { width: 100%; height: 0; background-color: #1176b0; position: relative; top: 0; opacity: 1; visibility: visible; }
    /* header nav .sub_menu > li > a { padding: 10px 6%; color: #ffffff; text-align: left; opacity: 0; visibility: hidden; } */
    header nav .sub_menu > li > a { padding: 10px 6%; color: #ffffff; text-align: left; }
    header nav .sub_menu > li > a:hover { color: #ffffff; }

    /* sub_menu open */
    header nav .main_menu > li.open .sub_menu { height: auto; transition: 0.3s; }
    header nav .main_menu > li.open .sub_menu > li > a { opacity: 1; visibility: visible; transition: 0.6s; }
    header nav .main_menu > li.open .sub_menu.menu2 { height: 88px; }
    header nav .main_menu > li.open .sub_menu.menu3 { height: 132px; }
    header nav .main_menu > li.open .sub_menu.menu4 { height: 176px; }
    header nav .main_menu > li.open .sub_menu.menu5 { height: 220px; }

    header nav .main_menu > li > a { width: fit-content; }
    header nav .main_menu > li .sub_menu > li > a { opacity: 0; visibility: hidden; display: none; }
    header nav .main_menu > li.open .sub_menu > li > a { opacity: 1; visibility: visible; transition: 0.6s; display: block; }

    /*----- my menu -----*/
    header .my_menu { display: none; }

    /*----- mobile menu -----*/
    header .mobile_menu { width: 42px; display: block; cursor: pointer; }
    header .mobile_menu > img { width: 100%; }

    header nav .mobile_btn_wrap { padding: 10px 2%; border-bottom: 1px solid #727272; display: flex; align-items: center; justify-content: flex-end; }
    header nav .mobile_btn_wrap > div { width: 28px; margin: 0 5px; cursor: pointer; }
    header nav .mobile_btn_wrap > div > a { width: 100%; display: block; }
    header nav .mobile_btn_wrap > div img { width: 100%; }

    header .nav_bg { z-index: 900; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); }
    header .nav_bg.on { display: block; }


    /*############ footer ############*/
    footer .center_inner { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
    footer .link_wrap { margin-top: 20px; }


    /*############ sub 공통 사용 ############*/
   
    /* sub_button_container */
    .sub_button_container .title { font-size: 33px; }
    .sub_button_container .btn_wrap > li > a { font-size: 18px; }
}

@media all and (max-width:920px) {
    /* text style */
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h4 > img { width: 15px; }

    /* text box */
    .text_box_style { font-size: 16px; padding: 20px 10px; }

    /* button style */
    .btn_style_A > a {  height: 50px; border-radius: 25px; font-size: 18px; }
    .btn_style_B > a { font-size: 17px; }

    /* info list */
    .info_list_style > li { padding: 10px 0; flex-direction: column; }
    .info_list_style > li .img_wrap { width: 100%; margin-bottom: 15px; }
    .info_list_style > li .txt_wrap { width: 100%; }
    .info_list_style > li .txt_wrap .list_style_A { padding: 10px 0; font-size: 16px; }
    .info_list_style > li .txt_wrap .list_style_B { padding: 10px 0; font-size: 16px; }

    /* img box */
    .img_box_style2 .title { font-size: 18px; transform: translate(0, -20px); }


    /*############ sub 공통 사용 ############*/
    /* sub_button_container */
    .sub_button_container { padding: 30px 0; }
    .sub_button_container .title { margin-bottom: 25px; font-size: 28px; }
    .sub_button_container .btn_wrap > li > a { height: 45px; font-size: 16px; }

    /* sub_bottom_sponsor_wrap */
    .sub_bottom_sponsor_wrap .center_inner { justify-content: space-between; }
    .sub_bottom_sponsor_wrap .sponsor_wrap ul img { width: 120px; }
}

@media all and (max-width:620px) {
    body { font-size: 14px; }
    section { padding-top: 60px; }
    .sub_page { font-size: 14px; }

    /* text style */
    h2 { margin-bottom: 30px; padding-bottom: 25px; font-size: 25px; background-size: 40px; }
    h3 { font-size: 20px; }
    h4 { font-size: 17x; }

    /* input style */
    input, select { font-size: 14px!important; }
    .input_styleA { height: 40px; }

    /* table_style */
    .table_style_A { font-size: 12px; }
    .table_style_A th { padding: 10px 5px; }
    .table_style_A td { padding: 10px 5px; }

	.table_style_B { font-size: 12px; }
    .table_style_B th { padding: 10px 5px; }
    .table_style_B td { padding: 10px 5px; }

    table .img_wrap > img { width: 33%; }

    /* button style */
    .btn_style_A { flex-direction: column; }
    .btn_style_A > a { margin: 3px 0; font-size: 14px; }
    .btn_style_B  { flex-direction: column; }
    .btn_style_B > a { margin: 5px 0; font-size: 14px; }

    /* list style */
    .list_style_A > li { background-size: 10px 10px; padding-left: 15px; }
    .list_style_B > li { background-size: 10px 10px; padding-left: 15px; background-position: top 6px left; }

    /* info list */
    .info_list_style > li .txt_wrap .tit { font-size: 17px; }
    .info_list_style > li .txt_wrap .list_style_A { font-size: 14px; }
    .info_list_style > li .txt_wrap .list_style_B { font-size: 14px; }

    /* img box */
    .img_box_style2 .title { font-size: 15px; }


    /*############ header ############*/
    header { height: 60px; }
    header .main_logo { width: 125px; }
    header nav .main_menu > li > a { font-size: 18px; }
    header .mobile_menu { width: 32px; }


    /*############ footer ############*/
    footer { padding: 40px 0 25px 0; font-size: 13px; }

    footer .info_wrap .tit { font-size: 15px; }
    footer .info_wrap .info > img { width: 20px; }
    footer .info_wrap .info_set { flex-direction: column; }

    footer .link_wrap > div > a::after { margin: 0 5px; }


    /*############ sub 공통 사용 ############*/

    /* sub_button_container */
    .sub_button_container .title { font-size: 23px; }
    .sub_button_container .btn_wrap > li > a { font-size: 14px; }

    /* sub_bottom_sponsor_wrap */
    .sub_bottom_sponsor_wrap .center_inner { flex-direction: column; justify-content: center; }
    .sub_bottom_sponsor_wrap .sponsor_wrap { margin: 5px 0; }
    .sub_bottom_sponsor_wrap .sponsor_wrap > div { font-size: 12px; }
    .sub_bottom_sponsor_wrap .sponsor_wrap ul img { width: 100px; }
}

@media all and (max-width:480px) {
    /* table_style */
    table .img_wrap > img { width: 45%; }

    /*############ sub 공통 사용 ############*/
    /* sub_bottom_sponsor_wrap */
    .sub_bottom_sponsor_wrap .sponsor_wrap ul img { width: 80px; }
}