@charset "euc-kr";
/* CSS Document */

body{ letter-spacing:-1px;}
body.sub_pop{ letter-spacing:0;}
.box1{ width:95%; min-width:304px; margin:0 auto}
.pc_hide{ display:block}
.phone_hide{ display:none}

.box_wrap{}
.box_wrap.left.main{ float:none; width: auto;}
.box_wrap.right{ float:none; width: auto;}
.box_wrap.right .box_st{ height:auto !important; margin-left:0}
.box_wrap.right2{ float:none; width: auto;}
.box_wrap.left.main .box_st,
.box_wrap.right2 .box_st{ height:auto !important; min-height:inherit !important}
.box_wrap.right2 .box_st{ margin:1em 0 0 0}

.box_wrap.left.lnb{ position: fixed; z-index:1000; width:100%; left:0; top:0; height:100%; display:none}
.box_wrap.left.lnb .lnb_bg{ position:fixed; z-index:inherit; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.6}
.box_wrap.left.lnb .lnb_btn_close{ position:fixed; z-index:inherit; width:3em; height:3em; background:#111; right:80%; margin-right:1.5em; top:0.5em; border-radius:3em;; text-align:center; border:1px solid #444}
.box_wrap.left.lnb .lnb_btn_close .xi{ font-size:1.5em; line-height:2em; color:#fff}
.box_wrap.left.lnb .box_st{ border:none; background:none; border-radius:0; box-shadow:none; position:fixed; z-index:inherit; width:80%; height:100% !important; right:-80%; top:0; background:#fff; border-left:3px solid #111}
.box_wrap.left.lnb.on{ display:block}
.box_wrap.left.lnb .logo{ text-align:center; width:6em; margin:0.5em auto}
.box_wrap.left.lnb .user_name{ background:#222; border-radius:5px; padding:0.5em; text-align:center; color:#fff; margin:1em 0}

#header{ height:4.5em; position:fixed; z-index:99; width:100%; left:0; top:0;}
#header .gnb_wrap{ display:none}
#header .icon_wrap{ top:0.8em}
#header .icon_wrap > li{ vertical-align:middle}
#header .icon_wrap > li.lnb_btn{ display: inline-block; margin-left:1em; margin-right:1em}
#header .icon_wrap > li.lnb_btn a{ background:none;background:none; width:3em; height:3em}
#header .icon_wrap > li.lnb_btn a .xi{ font-size:3em; color:#fff; line-height:1em}

#footer{}

#contents{ padding-top:5.5em; padding-bottom:4px}
#contents .user_wrap .user_tit{ letter-spacing:0}
#contents .user_wrap .user_name{ text-align:center}
#contents .user_wrap .user_name br{ display:none}
#contents .user_wrap .user_name .xi{ margin-right:3px}
#contents .user_wrap .user_info{ text-align:center}
#contents .user_wrap .user_info dl{ display:inline-block; border-top:none; margin-top:0.2em; padding-top:0; padding-left:1em}
#contents .user_wrap .user_info dl:first-child{ padding-left:0; margin-top:0.2em}

#contents .quick_wrap{ margin-top:0.5em; overflow:hidden}
#contents .quick_wrap > li{ float:left; width:33.33%; margin:0}
#contents .quick_wrap > li > a{ margin:0.2em; padding:1em 0.5em}
#contents .quick_wrap > li > a .xi{ padding-right:1px; vertical-align:top; font-size:1.125em}
#contents .quick_wrap > li > a .xi.arrow,
#contents .quick_wrap > li:hover > a .xi.arrow{ right:0.2em;}

.list_st .list_wrap .list{min-height:9.2em; height:auto}

/**/
.w_hide{ display:none}
.w_row_th2{ width:20%}
.iw_2{ width:56px}
.iw_3{ width:100%}
.iw_4{ width:100%}
.iw_search{width:121px}
.iw_select{width:79px}
.iw_select2{width:242px}

.form_tt{ display:inline-block; margin-top:5px}
.form_tt:first-child{ margin-top:0}

/**/

.login_wrap .input_area .inp{ line-height:3em; height:3em; text-align:left; padding:0 1em; box-sizing: border-box}
.login_wrap .input_area .btn{ line-height:10em; height:16em}
.login_wrap .input_area .label_st{ font-size:1.125em; margin-top:.7em}

@media screen and (max-device-width:1280px){
body{ font-family:sans-serif;}
}

@media screen and (max-width:767px){
body{ font-size:12px;}

/**/
.login_wrap .top_area{ padding-top:1em}
.login_wrap .tit_area{ padding-top:3em}

.login_wrap .visual_slide{ height:120px;}
.login_wrap .visual_slide .slides > li{height:120px;}

.login_wrap .login{width: auto; margin:0 auto; padding:0.5em; text-align:center}
.login_wrap .login .bg{border-radius:0 0 5px 5px; opacity:1}
.login_wrap .login label{ width:38%; margin-right:0}
.login_wrap .login .inp{ max-width:70%}
.login_wrap .login .inp.btn{ max-width:20%; margin-left:0.5em}
.login_wrap .notice{ width:auto}
.login_wrap .notice .tit > a{ font-size:.938em;}
.login_wrap .notice .flex-direction-nav{ top:0.2em}
.login_wrap .notice .flex-direction-nav a{ height:1.2em; line-height:1.2em;}

.login_wrap .login.st1{ font-size:1.5em}
.login_wrap .login.st1 .bg{border-radius:5px 5px 0 0; opacity:1}
.login_wrap .login.st1 label{ width:100%}
.login_wrap .login.st1 .inp{ width:90%}
.login_wrap .login.st1 select.inp{}
.login_wrap .login.st1 .inp.btn{ max-width:100%}

.login_wrap .login_con_wrap{ width:100%}
.login_wrap .login_con_wrap .notice_wrap,
.login_wrap .login_con_wrap .login_btn_wrap{ float:none; width:100%}
.login_wrap .login_con_wrap .notice_wrap .notice{ min-height:inherit; margin-bottom:1em}
.login_wrap .notice .swiper-container{ height:auto}
.login_wrap .login_con_wrap .login_btn_wrap .list{ padding:0}
.login_wrap .login_con_wrap .login_btn_wrap .list > li{ width:50%;}
.login_wrap .login_con_wrap .login_btn_wrap .list > li .btn:before{ right:10px}

.login_wrap .tit_area{ font-size:.75em}
.login_wrap .st1.login{ font-size:1em; margin-top:1em; padding-left:2em; padding-top:2em; padding-right:2em}
.login_wrap .st1.login .inp_tit{ width:90%; margin-bottom:10px}
.login_wrap .st1.login .inp{ width:100%; max-width:100%; box-sizing:border-box; height:2.5em; line-height:2.5em}
.login_wrap .st1.login .inp.w1{ width:25%}
.login_wrap .st1.login .btn.inp{ bottom:-10px}

.list_st .list_wrap .list li span.emo{ width:50px}
.list_st .list_wrap .list li span.date{ margin-left:0}

.tab_st > li{ margin-right:0}
.tab_st > li > a{ padding:0.3em 0.3em;}
.tab_st > li > a .xi{ vertical-align:top; line-height:1.3}

#contents .sub_tit_wrap .sub_tit{ float:none; text-align:center; padding:0}
#contents .sub_tit_wrap .sub_tit .xi{ vertical-align: text-top}
#contents .sub_tit_wrap .sub_nav{ float:none; text-align:center; margin-top:0; letter-spacing:0; margin-bottom:0.5em}

#footer .info{letter-spacing:0}
#footer .info dd{ display:none;}
#footer .info dd.copyright{ display:block;}

.table_st{font-size:.625rem}
table.response{ }
table.response,
table.response tbody,
table.response thead,
table.response tr,
table.response td{ display:block; box-sizing:border-box}
table.response th,
table.response .w_hide{ display:none}
table.response tr{ margin-top:1em; border-top:2px solid #666; overflow:hidden}
table.response thead tr{border-top:none}
table.response tr:first-child{ margin-top:0}
table.response td{ position:relative; width:100%; padding-left:22%; border-radius:0; text-align:left; border-top:none; line-height:22px; min-height:20px}
table.response td:before{ content: attr(data-th); box-sizing:border-box; position:absolute; width:20%; height:100%; left:0; top:0; background:#f1f1f1; color:#333; padding:.5em 0; text-align:center;}
table.response td.sec2{ float:left; width:50%; border-right:none; border-bottom:none}
table.response td.sec2:before{ width:40%;}
table.response td.sec2.w_tit{ width:100%}
table.response td.sec2.w_tit:before{ width:20%}
table.response tr.st1{ border-color:#0f7e0f}
table.response tr.st2{ border-color:#0057b8}

table.response.row{ border-top:2px solid #333; border-right:1px solid #ccc}
table.response.row tr{ margin-top:0; border-top:none}
table.response.row td{ padding-left:22%; border-bottom:1px solid #ccc; clear:left; border-right:none; border-left:none}
table.response.row td.sec2{ clear: none}
table.response.row td:before{ background:#999; color:#fff}

.login_wrap .table_st{ font-size:.813rem}
.login_wrap .table_st caption{ font-weight:bold; padding:.3em 0; margin-top:.3em; font-size:1.313em; text-align:left; border-top:1px solid #ddd; overflow:hidden}
.login_wrap .table_st caption input.input_st{ font-size:.813em; height:18px}

/**/
.board_paging button{ width:20px; height:20px; line-height:20px;}

/**/
.scroll.auto{ height:auto !important}
.calendar .calendar_tit .month{ font-size:1.75em}
.calendar .calendar_tit .btn{ margin:0 1em}

.page_total .total{ line-height:30px}

.search_wrap .search_con .tit{ min-width:50px}
}

@media screen and (max-device-width:767px){
/**/
.label_st{display:inline-block; *display:inline; zoom:1;}
.label_st > *{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; cursor:pointer;}
.label_st span{ padding-left:3px}

input[type=text].input_st,
input[type=password].input_st,
input[type=tel].input_st{line-height:1; height:20px; padding:0 2px}
select.input_st{ height:20px;}
input[type=button].input_st,
input[type=submit].input_st{border-radius:3px; line-height:1; height:20px; background-repeat:no-repeat;background-position:10px center; font-weight:600; padding:0 1em}
input[type=button].input_st.s1,
input[type=submit].input_st.s1{line-height:1; height:12px; padding:0 .5em; font-size:.938em}
input[type=button].input_st.s2,
input[type=submit].input_st.s2{ line-height:1; height:16px; padding:0 .5em}
}

@media screen and (min-width:1025px) and (max-width:1280px){
body{ font-size:16px;}
}

@media all and (orientation:landscape) and (max-width:1024px){
/*.login_wrap{ height:auto !important}*/

.login_wrap .top_area{ padding-top:0.5em}
.login_wrap .tit_area{ padding-top:0}

.login_wrap .visual_slide{ height:200px;}
.login_wrap .visual_slide .slides > li{height:200px;}
}

@media screen and (min-width:768px) and (max-width:1024px){
body{ font-size:13px;}

.login_wrap .top_area{ padding-top:2em}
.login_wrap .tit_area{ padding-top:4em}

.table_st th,
.table_st td{ padding-left:0; padding-right:0}
}