@charset "utf-8";
/*
반응형 css
*/


@media (max-width: 1800px){

.content_group {padding-right: 30px;}
#footer .cont_in:first-child .f_t_time {padding-right: 30px;}
.go_top .btn_go_top {width: 60px;height: 60px;padding-top: 5px;font-size: 13px;}
.quick_area {right: 20px;}
ul.util {margin-right: 20px;}
.c_b_cont {margin-right: -90px;padding-right: 90px;}
.gnb > li > a {padding: 12px 7px 0;}
}


@media (max-width: 1500px){


.l_quick_link {right: 5px;top: inherit;}

#header {position: sticky;top: 0px;z-index: 9;padding-top: 0;min-height: 80px;}
.vis .vis_txt {width:100%;}
.cont_in2,
.main_board .cont_in {width: 90%;}
ul.util .head_util_user .list {position: absolute;right: 0;top: 100%;margin-top: 3px;border: 1px solid #ddd;padding: 10px 0px 0px 10px;background: #f7f7f7;width: auto;min-width: 100px;text-align: left;display: none;z-index: 1;border-radius: 10px;}
ul.util .head_util_user > a.hon {}
ul.util .head_util_select > a > i, 
ul.util .head_util_user > a > i {display: block;font-size: 20px;}
ul.util .head_util_select > a , 
ul.util .head_util_user > a   {padding: 7px 8px 5px;}
ul.util .head_util_select > a:after,
ul.util .head_util_user > a:after {line-height: 8px;}

ul.util .head_util_user > a {display: block;width: 100%;border-radius: 10px;/* padding: 12px 8px 6px; */min-width: 10px;font-size: 18px;display: inline-block;text-align: center;height: 66px;margin: 0;font-size: 14px;font-weight: 600;transform: skew(-0.001deg);}
ul.util .head_util_user .hon + .list {display: inline-block;text-align: center;min-width: 140px;padding: 5px 0px 0px 10px;}
ul.util .head_util_user .hon + .list span.login_type {width: max-content;}
#footer {padding: 0 20px 30px;}
#footer .cont_in {width:100%;position: relative;margin: 20px auto 0;}
.vis .vis_txt .vis_btn {
    flex-wrap: wrap;
}

}



@media (max-width: 1200px){

div#wrap {padding-right:0;}
.fav_menu_b {display:none;}
.m1200 {display:none;}
.sub_vis, .l_quick_link {display:none;}
div#middle {padding-right:0;}
div#leftMenu {display: none !important;}
.c_b_cont {margin-right: -30px;padding-right: 30px;}
.quick_area {top: inherit;bottom: 20px;}
.go_top .btn_go_top i {font-size: 16px;margin-right: 5px;}
.go_top .btn_go_top {width: 90px;height: 30px;font-size: 17px;}



.content_group {padding-left: 30px;margin-left: 0;}
div#wrap:before {display: none;}
body.m_menu_on {overflow: hidden;}
.menuchange {position: absolute;left: 0;z-index: 1;}
ul.gnb.on {position: fixed;padding: 0;display: inline-block;width: calc(100% - 80px);top: 80px;background: #fbe97d;box-shadow: -1px 10px 8px #6f6f6fad;}
.btn_menulist.on ~ ul.gnb.on ~ .m_t_bg  {display:block;}
.m_t_bg {display: none;content:"";background: #00000030;width: 80px;position: fixed;top: 80px;right: 0px;height: calc(100% - 80px);}
ul.gnb.on {display:none;}
.btn_menulist.on ~ ul.gnb.on {display:block;height: calc(100% - 80px);overflow-y: auto;}
.src_group {padding: 10px 20px 20px;}

ul.gnb.on li {display: block;}
ul.util {position: absolute;right: 83px;top: 7px;margin-right: -78px;margin-top: 0px;}
.cpu03_gallery {flex-direction: column;}

a.btn_menulist {position: absolute;left: 10px;top: 20px;width: 40px;height: 40px;background:  url(/app/img/common/top_menu.png) center center no-repeat;}
#header .logo {float: none;display: flex;margin: 0 auto;justify-content: center;}
.gnb > li > a {display: block;margin: 0;padding: 0 15px 0 15px;height: 50px;text-align: left;}
.gnb li.on :after {left: 0;width: 5px;height: 100%;}
.gnb > li:hover > a{padding-top: 15px;padding-left:50px;background-position: 20px center !important;} 
.gnb > li > a{padding-top: 15px;padding-left: 20px;background-position:0px center;} 

.gnb > li > div {display: block !important;text-align: left;padding: 0;}
.gnb > li > div > ul {display: flex;width: 100%;flex-wrap: wrap;background: #fff;padding:5px;}
.gnb > li > div > ul li {display: inline-block;width: 50%;margin: 0px 0 0 0;}
.gnb > li > div > ul li a {display: block;padding: 8px 20px;text-align: left;font-size:15px;}

.gnb > li:hover > div > ul {background:#f3f3f3;}
.gnb > li:hover > div > ul li a {color: #4b4b4b;}
.gnb > li:hover > div > ul li:hover {background: #e6e6e6;}






.edit_2line .input_w {width: 100%;padding-right: 20px;}
.vis .vis_txt .vis_btn a {margin: 0 5px;}
.src_group {padding: 10px 20px 30px;}
.src_group tr th, .src_group tr td {width: auto;padding:  10px 0;}
.src_group tr td {border-bottom:1px solid #eee;}
.src_group table,
.src_group table tbody, .src_group table tr ,
.src_group table tr th, .src_group table tr td {display: block;}
.src_group tr:last-child td:last-child {border-bottom:none;margin-bottom:10px;}
.src_group table tr  {border-bottom:none;}
::-webkit-scrollbar { width:5px; height:5px; }


.login01_pass_mail .box_whalf {margin-left: 0;width: 100%;}
label + a.btn_st.FloatRight.MAT-10 {margin-top: 10px !important;display: block;} /*약관동의*/

.pop241101 , .pop241126 {display: none !important;}
.footer_r {float: left;padding-left: 20px;}
.quick_area {display:none}
#footer .cont_in:first-child .f_a_list a {padding: 20px 10px;}
}



@media (max-width: 880px){

div#middle {padding-bottom: 30px;}
.content_group {padding-bottom:0;}

.code_DTtype {display: block;}
.code_DTtype span {width: 100%;display: block;height: auto;padding: 10px 15px;margin-top: 10px;}
.code_DTtype span br {display:none;}
.detail_view .detail_view_top .FloatLeft +.FloatRight,.detail_view .detail_view_top .FloatLeft {float: none;display: block;}
table.table_sp, 
table.table_sp tbody, 
table.table_sp tr, 
table.table_sp td, 
table.table_sp th {display: block;width: 100%;}
.vis .vis_txt .vis_btn {flex-direction: column;margin: 0 40px;}
.table_sp th{padding:10px 0 0;}
.table_sp td{padding:5px 0 10px;}
#middle .vis .vis_txt .vis_btn a {margin-bottom: 20px;width: 100%;height: auto;min-height: 220px;}
ul.list_de_01 li:after {right: 50%;bottom: -27px;top: inherit;margin-right: -10px;background: url(/app/img/common/icon_arw_down.png) 13px center no-repeat;}
ul.list_de_01 li {margin-bottom: 25px;min-width: 140px;}
ul.list_de_01 {flex-direction: column;}
.ct_danger_acs {flex-direction: column;}
.ct_danger_acs .list {margin-bottom: 50px;}
.ct_danger_acs ul li {text-align: left;}

ul.ul_st_2 {flex-direction: column;}
ul.ul_st_2 > li {margin: 0  0 25px;}
.box_whalf + .box_whalf {margin-left:0;}
.box_whalf {width:100%;}

.box_w50 {width:100%;}
.box_w25 {width:50%;}
    
.c_b_cont {padding: 50px;/* margin: 0 -50px 0px; */}
.vis .fav_menu_b {padding: 10px 20px 19px;}
.fav_menu_b .tit {display: inline-block;}
.fav_menu_b ul {display: block;margin-top: 5px;}
.fav_menu_b ul li .sub b {width: 100%;border-radius: 15px 15px 0 0;}
.fav_menu_b ul li a {min-width: 50px;display: inline-block;}
.fav_menu_b ul li .sub a {min-width: 50px;margin:0 10px;}
.alert_pop p.txt {position: relative;right: 0;margin: 15px auto 8px;width: auto;}
.line_B {display: flex;align-items: flex-start;flex-direction: column;}
.alert_pop p.txt:before {border-top: 10px solid #d7d7d7;border-left: 10px solid transparent;left: 50%;top: 100%;margin-top: 0px;margin-left: -10px;}
.alert_pop:hover > p.txt {margin-top: 15px;}
.line_B .FloatLeft {margin-bottom: 40px;}

.row {flex-wrap: wrap; }
.f_info {font-size: 13px;line-height: 20px;}
.f_info div {/* border-top: 1px solid #dddddd36; */padding: 0px 0;}
.f_info div:first-child {border-top:none;}
.user_3box {display: flex;flex-direction: column;}
.user_3box .def_m_block {border-top:1px solid #eee;border-left: none;width: 100%;}
.user_3box .def_m_block:first-child{border-top:none;}

.my_study_list_all .msl {width: 40%;}
.my_study_list_all {flex-wrap: wrap;justify-content: flex-start;}
#footer .cont_in:first-child .f_a_list {margin: 20px 0 0;width: 100%;}
.f_sub {position: absolute;right: 0;top: -10px;}
.footer_r {width: 100%;text-align: center;margin-top: 20px;}
.main_board .cont_in ul li {width: 100%;}
.main_board .cont_in ul {flex-direction: column;}
.fsite_banner{
    grid-template-columns: 1fr 1fr;
    padding: 0 20px;}
}





@media (max-width: 580px){
.quick_area {display:none;}
html, body {height:auto;}
#header .logo {margin: 0 70px 0 30px;width: auto;}
.gnb > li > div > ul li {width: 100%;}
#footer {height: auto;transform: translateY(0px);display: inline-block;width: 100%;padding-bottom: 30px;}
#footer .cont_in:first-child .f_t_time {height: auto;line-height: initial;padding: 13px 10px;}
#footer .cont_in:first-child .f_t_time i {position: relative;display: block;text-align: center;margin: 0;}
#footer .cont_in:first-child .f_t_time b {display:block;}
#footer .cont_in:first-child .f_a_list a {padding: 5px 10px;display: block;}
div#middle {padding-bottom: 20px;}

.go_top .btn_go_top {width: 40px;height: 40px;font-size: 20px;padding-top: 10px;}

.vis .vis_txt > b {font-size:30px;}
.vis .vis_txt .vis_btn {margin:0 0px;}
.src_dth_01 {width: 100%;}
.src_dth_02 {flex-wrap: wrap;}
.adminArea {position: relative;bottom: 0;right: 0;top: 10px;}
.content_group {padding-left: 20px;padding-right: 20px;}
.c_b_cont {display: none;padding-right: 20px;margin-right: -20px;}
.ib_box.ib_MoCut {display: flex;flex-direction: column;}





.pop241101 , .pop241126 {
left: 20px !important;
width: 90% !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-color: #f0f8ff00 !important;
}

.pop241101 .popup_closebtn,
.pop241126 .popup_closebtn {
top: -30px;
}
.popup_cont .input_w {padding-left: 0;}
.input_w:last-child {border-bottom: 0;}
.popup_cont .input_w p.tit {float: none;margin-left: 0;margin-bottom: 20px;}

.history > ul > li {width: 100%;}
.history > ul > li > b.tit {left: 50%;top: -85px;margin: 0 0 0 -70px;}
.history > ul > li.l > b.tit {left: 50%;}
.history > ul > li .box:before, .history > ul > li.l .box:before {left: 50%;right: 50%;top: -20px;margin-left: -10px;border: 10px solid #ffffff00;border-bottom: 10px solid #e7e7e7;}
.history > ul > li .box:after, .history > ul > li.l .box:after {left: 50%;margin-left: -10px;top: -35px;}


}





@media (max-width: 360px){

.p_h4 {margin-left: 0;}
h5.b_tit + .box_gray.MAL30 {margin-left: 0 !important;}
.cpf_ko_info07 > ul > li:first-child, .cpf_ko_info07 > ul > li > span {min-width: 200px;width: auto;}
.cpf_ko_info07 > ul > li > span + ul {flex-direction: column;margin-left: -20px;}
.table_st th, .table_st td {min-width: auto;padding: 10px;}

}