@charset "UTF-8";

/** 기존 inc/common.reaction.css 에 있던 내용 - 우선 수정하지 않음. */

@media all and (max-width:1440px) {
    /* 스폰서 배너 슬라이더 */
    #footer .fsb_title {width:110px;}
    #footer .fsb_slide {width:740px;}
}

@media all and (max-width: 1024px) {
    /* Search */
    .search { width: 100%; }
    .search > div { width: 100%; }
    .search > select,
    .search > input[type=text],
    .search > button, .search > a.btn { width: 100%; margin-bottom: 5px; }

}


@media all and (max-width: 1100px)
{
    /* 스폰서 배너 슬라이더 */
    #footer .fsb_title {float:left; width:150px; font-size:16px; font-weight:700; color:#006c3e; line-height:30px; text-align:left;}
    #footer .fsb_slide {float:none; width:100%;}
    #footer .fsb_slide img {width:90%; max-width:140px; height:auto; margin-bottom:0;}
    #footer .fsb_slide .owl-nav {right:0; top:-30px; width:100px;}
    #footer .fsb_slide .owl-nav div {width:28px; height:28px;}
    #footer .fsb_slide .owl-nav div:before {width:6px; height:6px; margin-top:-4px;}
    #footer .fsb_slide .owl-nav .owl-prev:before {margin-left:-3px;}
    #footer .fsb_slide .owl-nav .owl-next:before {margin-left:-6px;}
    #footer .fsb_control {right:35px; top:0;}
    #footer .fsb_control .fsb_btn {width:30px; height:30px;}
}

@media all and (max-width: 1024px)
{
    .pc {display:none;}
    .tablet {display:block;}

    #wrap {min-width:320px;}
    #wrap * {box-sizing:border-box;}
    .wrap {box-sizing:border-box;}

    /* 로그인 */
    #login_wrap .login_area {position:inherit; left:inherit; top:inherit; width:100%; height:100%; margin:0;}
    .login_area {width:100%;}

    /* font */
    .h2_title {margin-bottom:20px; padding-bottom:15px; font-size:26px; line-height:26px;}
    .h2_title span:before {bottom:-10px; width:30px;}
    .h3_title {margin-bottom:15px; font-size:20px; line-height:20px;}
    .h4_title {margin-bottom:10px; font-size:16px; line-height:16px;}
    .txt_big {font-size:16px; line-height:24px;}
    .txt_middle {font-size:14px; line-height:22px;}
    .txt_small {font-size:12px; line-height:20px;}
    .title {font-size:18px; line-height:24px;}
    /* button */
    .btn {font-size:13px; height:40px; padding:0 5px; line-height:40px;}
    .btn_area .btn {width:100% !important; margin-bottom:10px;}

    /* box */
    .box {padding:15px;}

    /* list */
    .list li {margin-bottom:5px; padding-left:10px; font-size:13px; line-height:17px;}
    .list li:before {top:8px;}
    .list.circle li::before {top:8px; width:2px; height:2px;}
    .list.square li::before {top:8px; width:2px; height:2px;}

    /* table */
    /* table thead th, table tbody th, table tbody td {padding:8px 0;}
    table tbody td {padding:8px 5px;}
    table.type01 thead th, table.type01 tbody th, table.type01 tbody td {padding:8px 5px;}
    table thead th.align {padding:8px 18px 8px 5px}
    table thead th.align button {top:8px; right:0px;} */

    /* tab */
    /* .tab li {height:34px; line-height:34px;}
    .tab li a {line-height:34px;}
    .tab_wrap {width:100% !important;}
    .tab_wrap .tab.small {font-size:12px;} */
    .tab { gap: 10px; }
    .tab li
    {
        font-size: 13px;
        height: 30px;
        padding: 0 5px;
        line-height: 30px;
    }
    .btn_choice li a { line-height: unset; }

    /* label */
    label.ib {width:100% !important; padding:5px 0;}

    /* board */
    .b_wrap .b_title > span {height:40px; line-height:40px; font-size:12px; text-align:center; font-weight:400;}
    .b_wrap .b_area > span {height:40px; line-height:40px; font-size:12px;}
    .b_wrap .b_area > span.link a {max-width:88%;}
    .b_wrap .b_area > span.link .ba_comment {margin-top:10px;}
    .b_wrap .b_area > span .i_notice {height:40px;}

    /* paging */
    .paging, .paging.type01 {margin-top:10px;}
    .paging a, .paging.type01 a {width:30px; height:30px;line-height:30px;}
    .paging a.p_prev:before, .paging.type01 a.p_prev::before {right:10px; top:12px;}
    .paging a.p_next:before, .paging.type01 a.p_next::before {left:10px; top:12px;}

    /* view */
    .v_wrap .v_title {padding:15px;}
    .v_wrap .v_title .vt_title {font-size:16px; line-height:22px;}
    .v_wrap .v_title .vt_title::before {top:7px;}
    .v_wrap .v_title ul li {font-size:12px; line-height:16px;}
    .v_wrap .v_txt {padding:15px; font-size:13px; line-height:18px;}
    .v_wrap .v_list > a {padding:10px 10px 10px 45px; font-size:14px; line-height:18px;}
    .v_wrap .v_list > a:before {left:5px;}
    .v_wrap .v_list > .vl_next::after {left:15px; bottom:12px;}
    .v_wrap .v_list > .vl_prev::after {left:15px; top:12px;}
    .v_wrap .v_comment {padding:10px;}
    .v_wrap .v_comment .vc_list li{padding:10px;}
    .v_wrap .v_comment .vc_list .vcl_edit {top:15px;}
    .v_wrap .v_comment .vc_list .vc_list {padding-left:20px;}
    .v_wrap .v_comment .vc_list .vc_list li::before {left:-20px;}
    .v_wrap .v_comment .vc_list .vc_list li::after {left:-12px;}
    .v_wrap .v_comment .vc_list .vcl_txt {font-size:13px; line-height:16px;}
    .v_wrap .v_list .vl_box {padding:10px 10px 10px 55px; font-size:13px;}
    .v_wrap .v_list .vl_box i {width:20px; height:20px; margin-top:-10px;}
    .v_wrap .v_list .vl_box.vl_next i::after {left:5px; bottom:3px;}
    .v_wrap .v_list .vl_box.vl_prev i::after {left:5px; top:3px;}
    .v_wrap .v_list .vl_box span {left:45px; top:10px; margin-top:0px;}
    .v_wrap .v_list .vl_box a, .v_wrap .v_list .vl_box > p {padding-left:40px;}

    /* Search */
    .search {width:100%;}
    .search > div {width:100%;}

    .btn.w200 {width:100px;}
    label.fta_txt {margin-top:5px;}

    /* div_table */
    .div_table .tr .th, .div_table .tr .td {display:inline-block !important; width:100%; padding:10px;}

    /* 학술행사 모바일형 컨텐츠 (pc에서는 숨김) */
    .mobile_card {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
    .mobile_card > ul {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
    .mobile_card > ul > li {
        display: inline-block;
        vertical-align: middle;
        float: left;
        margin-bottom: 5px;
    }
    .mobile_card > ul > li:last-child { margin-bottom: 0 }
    .mobile_card > ul > li > div {
        width: auto;
        margin: 2px;
        padding: 10px;
        background-color: #f5f5f5;
    }
    .mobile_card > ul > li .mcb_list li {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        width: 100%;
        min-height: 20px;
    }
    .mobile_card > ul > li .mcb_list li span {
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        font-weight: 600;
    }
    .mobile_card > ul > li .mcb_list li span i {
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -3px;
        font-size: 16px;
        /** 아이콘 사용안함 - 숨김처리 */
        display: none;
    }
    .mobile_card > ul > li .mcb_list li p {
        display: block;
        margin-left: 120px;
        font-size: 16px;
        line-height: 20px;
    }


    /*20190917 박동식 추가*/
    .cs_body > .btn_area > a:last-child {
        margin-left:0;
    }
    /*20190917 박동식 추가*/
    .mW100 {width:100%;}

    }

@media all and (max-width: 840px)
{
    .tablet {display:none;}
    /* Search */
    .search .s_contents {height:inherit;}
    .search .s_contents select {width:45%; margin-bottom:5px;}
    .search .s_contents input, .search .s_contents button {width:100%; margin-bottom:5px;}

    .btn {
        line-height: 34px;
        height: 34px;
        min-width: 50px;
    }

    /* 학술행사 모바일형 컨텐츠 (pc에서는 숨김) */
    .mobile_card > ul > li .mcb_list li {
        padding: 5px 0;
        border-bottom: 1px dashed #ddd;
    }
    .mobile_card > ul > li .mcb_list li:last-of-type { border-bottom: 0 }
    .mobile_card > ul > li .mcb_list li span {
        position: inherit;
        width: 100%;
    }
    .mobile_card > ul > li .mcb_list li p { margin-left: 0 }
    table tbody td.link { max-width: 244px }
    .fileIcon { display: none }
}

@media all and (max-width: 480px)
{
	.dp_option {
        bottom: inherit !important;
        top: -40px;
    }
}


/** DEMO header에서 이동. 전체 적용 위함. - 240903 정규호 */

/* 1. common subpage - 서브페이지 표준 CSS 이동 */

/* ! 1) 인사말 */

/* 작은 사진형 반응형 */
@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; }
}

/* 큰 사진형 반응형 */
@media all and (max-width: 1024px) {
    .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; }
}


/* ! 2) 연혁 */

/* 작은 레이아웃 반응형 */
@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; }
}

/* 큰 레이아웃 반응형 */
@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: 768px) {
    .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; }
}


/* ! 3) 관련사이트 */

/* 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. 오픈형 -> 반응형 */
@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%; }
}


/* ! 4) 정관2 */

@media all and (max-width: 1000px) {
    #contents .rule .r_history li {width:33.333%;}
}

@media all and (max-width: 768px) {
    #contents .rule .r_head {margin-bottom:15px;}
    #contents .rule .r_history {margin-top:10px; padding:10px 20px;}
    #contents .rule .r_history li {width:50%; height:25px; font-size:13px; line-height:25px;}
    
    #contents .rule .r_body section {margin:15px 0;}
    #contents .rule .r_body h4 {font-size:16px; line-height:26px;}
    #contents .rule .r_body strong {margin-top:10px; font-size:14px; line-height:22px;}
    #contents .rule .r_body p {padding-left:15px; font-size:13px; color:#60656a; line-height:20px;}
    #contents .rule .r_body > section > ul, #contents .rule .r_body > section > ol {margin-top:3px;}
    #contents .rule .r_body li {margin-bottom:7px; font-size:12px; line-height:16px;}
    #contents .rule .r_body li ul, #contents .rule .r_body li ol {margin-top:3px;}
    #contents .rule .r_body li li {font-size:11px;}
}


/* ! 5) 이용약관 & 개인정보처리방침 */

@media all and (max-width:1000px) {
    .aoi_area {padding-left: 15px;}
    .aoi_tab ul{display:flex;flex-wrap:wrap;}
    .aoi_tab ul li{display:block;width:calc(25% - 8px);}
}

/* @media all and (max-width:980px){
    #contents .contents .cs_body { margin-top: 5%;}
} */

@media all and (max-width:768px) {
    .aoi_tab ul li{width:calc(25% - 4px);margin:2px;}
    .aoi_tab {padding:10px;}
    .aoi_area {margin-bottom:30px; padding-bottom:30px;}
    .aoi_area .aoi_top {top:inherit; bottom:5px; line-height:20px;}
    .aoi_area .aoi_top:before {top:8px;}
    .aoi_area h3 {margin-bottom:5px; font-size:20px; line-height:26px;}
    .aoi_area div h4 {margin-bottom:5px; font-size:18px; line-height:24px;}
    /*#contents .contents .cs_body p,
     .aoi_area .list_ul > li {font-size:16px;} */
}

@media all and (max-width:768px){
    .aoi_tab ul li{width:calc(33.3% - 4px);margin:2px;}
    .pagenum {font-size: 20px; margin-bottom: 20px;}
    .aoi_area div h4 {font-size: 16px;}
    .aoi_area > div {margin-bottom: 25px;}
}

@media all and (max-width:640px){
    .aoi_tab li {padding:2px 5px;}
    .aoi_tab li a {font-size:16px;}
    .aoi_area {
        margin-top: -130px;
        padding-top: 130px;
    }
}

@media all and (max-width:520px){
    .aoi_tab ul li{width:calc(50% - 4px);margin:2px;}
}

@media all and (max-width:480px){
    .aoi_area {padding-left:0;}
    .aoi_area div h4 {font-size: 17px;}
    .aoi_area .list_ul > li{line-height:26px;}
    /* #contents .contents .cs_body p, .aoi_area .list_ul > li {font-size: 15px;} */
    .wpwjd {margin-bottom: 10px;}
}


/* ! 6) 가입동의 */
@media screen and (max-width: 768px) {
    .box.scroll_y { height: 200px; }
    .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: 10px; }
    .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%; }

    .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: 0;
        font-size: 12px;
        letter-spacing: -0.5px;
    }
}


/* ! 7) 정관 (기본 정관) */
@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; }
}


/*? 2. 기본 스타일 CSS */


/* ! 1) 테이블 */

/** f_table */
@media all and (max-width: 599px) {
    .f_table { font-size: 13px; }
    .f_table .ft_area .fta_label {
        display: inline-block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 20px !important;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    .f_table .ft_area .fta_input {
        display: inline-block !important;
        width: 100% !important;
    }
    .f_table .ft_area .fta_input .fta_txt {
        padding: 0 !important;
        text-align: left !important;
    }
}

/* ! 2) 탭 */

@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; }
}

/**
    *? 3. 로그인 페이지 레이아웃 3종류
    - common.css에 첨부된 내용은 demo의 레이아웃 확인용으로 사용되며, 실제 로그인 스킨 선택시 적용되는 css는 모듈 css입니다.
    - (modules/member/memberList/user/core/view/inc/css/login.css)
    - (modules/member/memberList/user/core/view/inc/css/login.reaction.css)  
*/

/* ! 1) 로그인디자인 1 (loginnew1) */
@media all and (max-width: 1360px) {
    .loginnew1_wrap .l_form { padding: 10px 20px 10px 0; }
    .loginnew1_wrap .l_form::after {
        height: 350px;
        right: 4px;
    }

    .loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 5px;
    }

    .loginnew1_wrap .l_link a.l_link_dir {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
        height: auto;
        padding: 10px 0;
    }
    .loginnew1_wrap .l_link a.l_link_dir .imgBox,
    .loginnew1_wrap .l_link a.l_link_dir .l_link_join_text { margin-left: 0; }

    .loginnew1_wrap .l_link a.l_link_dir .l_link_join_text { gap: 5px; }
}

@media all and (max-width: 768px) {
    .loginnew1_wrap .l_form::after { height: 315px; }
    .loginnew1_wrap .l_form .l_form_main .l_form_title h4 { font-size: 20px; }
    .loginnew1_wrap .l_form .l_form_main .l_form_title span { margin-top: 0; }

    .loginnew1_wrap .l_form .l_form_main input {
        padding: 3px;
        margin-bottom: 13px;
        height: 40px;
    }

    .loginnew1_wrap .l_link a.l_link_dir .l_link_join_text h6 { font-size: 17px; }
    .loginnew1_wrap .l_link a.l_link_dir .l_link_join_text p { font-size: 13px !important; }
}

@media all and (max-width: 620px) {
    .loginnew1_wrap .l_form::after {
        width: 100%;
        height: 2px;
        right: 0;
        top: auto;
        bottom: -28px;
    }
    .loginnew1_wrap { flex-direction: column; gap: 60px; }

    .loginnew1_wrap .l_form,
    .loginnew1_wrap .l_link { width: 100%; padding: 0; }


    .loginnew1_wrap .l_link a.l_link_dir {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 20px;
    }
    .loginnew1_wrap .l_link a.l_link_dir .imgBox { margin-left: 25px; }
    .loginnew1_wrap .l_link a.l_link_dir .l_link_join_text { margin-top: 8px; }

    .loginnew1_wrap .l_form .l_form_main .l_form_title { margin-top: 18px; }

    .loginnew1_wrap .l_form .l_form_sub .l_form_sub_wrap { margin-top: 18px; }
    .loginnew1_wrap .l_form .l_form_sub::before { display: none; }
}

/* ! 2) 로그인디자인 2 (loginnew2) */
@media all and (max-width: 1360px) {
    .loginnew2_wrap { justify-content: space-between; }
    .loginnew2_wrap .l_form { width: 43%; padding: 0; }
    .loginnew2_wrap .l_link { width: 43%; padding: 30px; }
    .loginnew2_wrap .l_link h4 { font-size: 26px; }

    .loginnew2_wrap .l_link .l_link_btns a { padding: 25px; }
    .loginnew2_wrap .l_link p.l_link_info { margin-top: 20px; }
}

@media all and (max-width: 1000px) {
    .loginnew2_wrap .l_form { width: 48%; padding: 20px 0; }
    .loginnew2_wrap .l_link { width: 48%; }
}

@media all and (max-width: 650px) {
    .loginnew2_wrap { flex-direction: column; }
    .loginnew2_wrap .l_form,
    .loginnew2_wrap .l_link { width: 100%; }

    .loginnew2_wrap .l_form .forgotAccount { margin-bottom: 20px; }
    .loginnew2_wrap .l_link h4 { font-size: 22px; }
}


/* ! 3) 로그인디자인 3 (loginnew3) */
@media all and (max-width: 1360px) {
    .loginnew3_wrap
    {
        flex-direction: column;
        gap: 35px;
        align-items: flex-start;
        padding: 25px 0;
        border: none;
    }
    .loginnew3_wrap h4 { font-size: 24px; }
    .loginnew3_wrap .l_form { width: 100%; }

    .loginnew3_wrap .l_form .l_form_sub
    {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .loginnew3_wrap .l_form .l_form_subJoin
    {
        flex-wrap: wrap;
        gap: 22px;
    }
}

@media all and (max-width: 480px) {
    .loginnew3_wrap .l_form .l_form_login
    {
        flex-direction: column;
        height: auto;
    }
    .loginnew3_wrap .l_form .l_form_login .l_form_login_input { width: 100%; }
    .loginnew3_wrap .l_form .l_form_login .l_form_login_input .input_wrapper { margin-bottom: 10px; }
    .loginnew3_wrap .l_form .l_form_login button
    { 
        width: 100%;
        height: 45px;
    }
}