@charset "utf-8";

/* 
    Resource - 공통적으로 사용하는 것들을 모아두었습니다.
*/

/* ETC */
.btn_wrap{margin:25px 0; text-align:center}
.btn_wrap .btn{margin-left:6px; }
.btn_wrap .btn:first-child{margin-left:0}
.img_wrap{margin:10px 0; text-align:center}

.border_box{margin:5px 0; padding:15px 20px; border:3px solid #eee}
.full_box{margin:5px 0; padding:15px 20px; background:#fafafa}

.respon_table{overflow-x:auto; scrollbar-width:none;}
.requir{font-size:0.88em; color:#da030d; text-align:right;}

.clear{*zoom:1;}
.clear:after{display:block; clear:both; content:" ";}
.blind{position:absolute; left:-99999px;}
#wait{max-width:530px; width:90%; margin:0 auto; padding:100px 0;}
#wait img{width:100%; }

.ovh{overflow: hidden;}
.ovYs{overflow-y: scroll;}
.ovXs{overflow-x: scroll;}

/* magin_padding */
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt40{padding-top:40px}
.pt50{padding-top:50px}

.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr40{padding-right:40px}
.pr50{padding-right:50px}

.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}

.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl40{padding-left:40px}
.pl50{padding-left:50px}

/* width, height */
.w100p{width: 100%;}
.w80p{width: 80%;}
.w60p{width: 60%;}
.w50p{width: 50%;}
.w40p{width: 40%;}
.w30p{width: 30%;}
.w20p{width: 20%;}
.w10p{width: 10%;}

.h100p{height: 100%;}
.h80p{height: 80%;}
.h60p{height: 60%;}
.h50p{height: 50%;}
.h40p{height: 40%;}
.h30p{height: 30%;}
.h20p{height: 20%;}
.h10p{height: 10%;}

.h100px{height: 100px;}
.h150px{height: 150px;}
.h200px{height: 200px;}
.h250px{height: 250px;}
.h300px{height: 300px;}
.h350px{height: 350px;}
.h400px{height: 400px;}
.h450px{height: 450px;}
.h500px{height: 500px;}

/* float */
.fl{float:left}
.fr{float:right}

/* align */
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.taj{text-align:justify}

.vam{vertical-align: middle;}
.vat{vertical-align: top;}
.vabt{vertical-align: bottom;}
.vabs{vertical-align: baseline;}

/* color */
.black{color:#252525}
.white{color:#fff}
.blue {color:#0072bc}
.mint {color:#6fe1cd}
.sky_blue {color:#94e4f2}
.red{color:#f1131d}
.pink{color:#ffabb3}
.coral{color:#ff7676}
.orange{color:#ff9f52}
.yellow{color:#fdd741}
.purple{color:#7c51bb}
.gray{color:#7d7d78}
.light_gray{color:#bbbbb3}

/* Background Color */
.bg_black{background: #252525;}
.bg_white{background: #fff;}
.bg_blue{background: #0072bc;}
.bg_mint{background: #6fe1cd;}
.bg_skyBlue{background: #94e4f2;}
.bg_red{background: #f1131d;}
.bg_pink{background: #ffabb3;}
.bg_coral{background: #ff7676;}
.bg_orange{background: #ff9f52;}
.bg_yellow{background: #fdd741;}
.bg_purple{background: #7c51bb;}
.bg_gray{background: #7d7d78;}
.bg_lightGray{background: #bbbbb3;}

/* text_style */
.fb{font-weight:700}
.fn{font-weight:normal}
.tlt{text-decoration:line-through} 
.fi{font-style:italic} 
.tu{text-decoration:underline} 
b{font-family:'GMB';}

/* input */
input{border:1px solid #ccc}
input[type="text"] , input[type="password"] , input[type="tel"]{height:35px; padding:0 5px; line-height:33px;}
input[type="radio"]{margin-right:5px}
input[type="checkbox"]{margin-right:5px; }
input:disabled{background: #ddd;}
select{height:35px; padding:0 0 0 5px; background:#fff; border:1px solid #ccc; line-height:33px;}
option{padding:5px 0}
textarea{padding:15px; border:1px solid #ccc; resize: none; width: 100%;}


/* table */
.tbs{width:100%; border-spacing:5px 20px; /*border-bottom: 1px solid #eee;*/ margin-top: 5px;}
.tbs caption{height:0; text-indent:-9999px; overflow:hidden}
.tbs th, .tbs td{border: 1px solid #eee;}
.tbs th{padding:20px 10px; /* border-top:1px solid #ddd; border-left:1px solid #eee; */color:#434343; vertical-align:middle; background: #f9f9f9; font-family:'GMB';}
.tbs th:first-child{border-left:0}
.tbs th:last-child{border-right:0}
.tbs td{padding:20px; background:rgba(255,255,255,0.9);}
.tbs td:first-child{border-left:0}
.tbs td:last-child{border-right:0}
.tbs tfoot th{color:#222}
.tbs tfoot td{font-weight:600; text-align:center; vertical-align:middle}
.tbs .item{font-weight:bold}
.tbs .bg{background:#f9f9f9}


/* paging */
.paging{clear:both; padding:5px 0; text-align:center}
.paging strong{display:inline-block; width:30px; margin:0 2px; background:#222; border:1px solid #222; font-size:0.8em; line-height:30px; font-weight:bold; color:#fff}
.paging a.paging_num{display:inline-block; width:30px; margin:0 2px; border:1px solid #ddd; font-size:0.8em; line-height:30px; color:#aaa}
.paging a.paging_num:hover{color:#585858}
.paging img{padding:5px 0; vertical-align:top; opacity: .2;}
.paging .prev{margin:0 30px 0 20px}
.paging .next{margin:0 20px 0 30px}