@charset "utf-8";

/* button */
.btn {display:inline-block;padding:0 12px;color:#fff;text-align:center;line-height:30px;border:none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.btn i {font-size:14px;}

.btn.btn_submit,
.btn.btn_act,
.btn.btn_frmline {background:#15aacf;border:none;}

.btn.btn_normal {background:#5e6170;}
.btn.btn_normal:hover {color:#fff;background:#5bc0de;}

.btn.btn_close {background:#5e6170;}
.btn.btn_close:hover {color:#fff;background:#5bc0de;}

.btn.btn_cancel {background:#5e6170;}
.btn.btn_cancel:hover {color:#fff;background:#5bc0de;}

.btn.btn_admin {background:#f63941;}
.btn.btn_admin:hover {background:#222;}

.btn_confirm {}
.btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.btn_confirm input,
.btn_confirm button,
.btn_confirm span,
.btn_confirm img,
.btn_confirm a {vertical-align:middle;}


/* form */
.frm_input {display:block;width:100%;height:33px;text-indent:10px;line-height:33px;background:#999;border:solid 1px #db0618;border-radius:3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.zip_input {display:inline-block;width:120px;}
.frm_address {margin:5px 0 0 0;}

.frm_info {display:block;margin:6px 0 0 0;color:#f63941;line-height:normal;}
.frm_info strong {font-weight:400;}

.frm_input2x {float:left;width:49%;margin:0 2% 0 0;}
.frm_input2x_last {float:left;width:49%;margin:0;}

.frm_input3x {float:left;width:32%;margin:0 2% 0 0;}
.frm_input3x_last {float:left;width:32%;margin:0;}

.frm_select3x {float:left;width:32%;height:40px;margin:0 2% 0 0;text-indent:8px;line-height:40px;border:solid 1px #ddd;}


/* checkbox, radio*/
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;opacity:0;outline:0;z-index:-1;}

.chk_box {position:relative;}
.chk_box input[type="checkbox"] + label {position:relative;padding-left:28px;vertical-align:baseline;cursor:pointer;}
.chk_box input[type="checkbox"] + label:hover{}
.chk_box input[type="checkbox"] + label span {display:block;position:absolute;left:0;top:0px;width:22px;height:22px;background:url(../img/chk_off.png) no-repeat 50% 50%;border:solid 1px #ddd;}

.write_div .chk_box input[type="checkbox"] + label, 
.bo_vc_w .chk_box input[type="checkbox"] + label {padding-left:28px;}
.write_div .chk_box input[type="checkbox"] + label span,
.bo_vc_w .chk_box input[type="checkbox"] + label span {display:block;position:absolute;left:0;top:0px;width:22px;height:22px;margin:0;background:url(../img/chk_off.png) no-repeat 50% 50%;border:solid 1px #ddd;}

.chk_box input[type="checkbox"]:checked + label {color:#ff7700}
.chk_box input[type="checkbox"]:checked + label span {background:url(../img/chk.png) no-repeat 50% 50% #5bc0de;}

.all_chk.chk_box input[type="checkbox"] + label span {}

.chk_box input[type="radio"] + label {position:relative;padding-left:28px;vertical-align:baseline;cursor:pointer;}
.chk_box input[type="radio"] + label:hover{}
.chk_box input[type="radio"] + label span {display:block;position:absolute;left:0;top:0px;width:22px;height:22px;background:url(../img/chk_off.png) no-repeat 50% 50%;border-radius:50%;border:solid 1px #ddd;}

.write_div .chk_box input[type="radio"] + label, 
.bo_vc_w .chk_box input[type="radio"] + label {padding-left:28px;}
.write_div .chk_box input[type="radio"] + label span,
.bo_vc_w .chk_box input[type="radio"] + label span {display:block;position:absolute;left:0;top:0px;width:22px;height:22px;margin:0;background:url(../img/chk_off.png) no-repeat 50% 50%;border:solid 1px #ddd;}

.chk_box input[type="radio"]:checked + label {color::#ff7700}
.chk_box input[type="radio"]:checked + label span {background:url(../img/chk.png) no-repeat 50% 50% #5bc0de;border:solid 1px #5bc0de}


/* add file */
.file_wr {position:relative;}
.file_wr label {display:block;position:absolute;width:120px;height:40px;left:0;top:0;padding:0;color:#fff;line-height:40px;font-weight:300;text-align:center;background:#3f424b;border:none;cursor:pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.file_wr label:hover {background:#5bc0de;}
.file_wr label input {position:absolute;width:0;height:0;overflow:hidden;}
.file_wr label i {font-size:24px;}
.file_wr input[type=text] {display:block;width:100%;height:40px;line-height:40px;text-indent:130px;border:solid 1px #ccc;}

.form_type ul li,
.form_type ul li label,
.form_type ul li textarea,
.form_type ul li .label {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


/* 페이징 커뮤니티 */
.pg_wrap {display:block;margin:0 0 20px 0;text-align:center;}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;font-size:12px;text-align:center;background:#fff;border:1px solid #ddd;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {width:30px;min-width:30px;height:30px;font-family:'roboto';color:#666;font-size:12px;line-height:28px;padding:0 5px;text-decoration:none;}
.pg_page:hover {background-color:#eee}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #ddd}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #ddd}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #ddd}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #fff;padding:0;border:1px solid #ddd}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#eee}

.pg_current {display:inline-block;width:30px;min-width:30px;height:30px;padding:0 5px;font-family:'roboto';color:#fff;font-size:12px;font-weight:normal;line-height:28px;background:#3f424b;border:1px solid #ddd;}


/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#999;text-align:center}
.empty_li {padding:40px 0 !important;color:#999;text-align:center}


/* sns */
.kakaotalk {color:#3c1e20;}
.kakaotalk_bg {background-color:#fce000;}
.naver {color:#00c73c;}
.naver_bg {background-color:#00c73c;}
.google {color:#e84134;}
.google_bg {background-color:#e84134;}
.facebook {color:#3a589e;}
.facebook_bg {background-color:#3a589e;}
.twitter {color:#1da1f3;}
.twitter_bg {background-color:#1da1f3;}
.instagram {color:#f4555a;}
.instagram_bg {
background: #f5cf00;
background: -moz-linear-gradient(45deg,  #f5cf00 0%, #e90b22 51%, #803db0 100%, #803db0 100%);
background: -webkit-linear-gradient(45deg,  #f5cf00 0%,#e90b22 51%,#803db0 100%,#803db0 100%);
background: linear-gradient(45deg,  #f5cf00 0%,#e90b22 51%,#803db0 100%,#803db0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5cf00', endColorstr='#803db0',GradientType=1 );
}
.telegram {color:#31ade0;}
.telegram_bg {background-color:#31ade0;}
.youtube {color:#ee1c1b}
.youtube_bg {background-color:#ee1c1b;}
.payco {color:#fa2829}
.payco_bg {background-color:#fa2829;}

.linkedin_bg {background-color:#007bb5;}
.tumblr_bg {background-color:#36465d;}
.reddit_bg {background-color:#ff4500;}
.odnok_bg {background-color:#f7931e;}
.vk_bg {background-color:#507299;}
.mail_bg {background-color:#777777;}


/* ifrma response */
.embed-container {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed {position:absolute;top:0;left:0;width:100%;height:100%;}

.clb {clear:both;}





@media screen and (max-width:750px) {
.pg_wrap {text-align:center;}
}