@import url('/common/css/fontfamily.css');

body,table,table td, table th,h2,h3,h4,h5,p,span,label,li,a, {font-family:'Nanum Gothic, sans-serif';}
table {font-family: "NanumBarunGothic","Noto sans KR", sans-serif;}

/* LAYOUT */
.mypage.MGSTYLE {margin:15px auto;}
.mypage_left.MGSTYLE {margin-right:15px;}
.bokji.MGSTYLE {margin:15px auto;}
.bokji_left.MGSTYLE {margin-right:15px;}
.lh27 {line-height: 27px;}
.lh20 {line-height: 20px;}
.underline {text-decoration: underline;}
.sub_wrap {overflow: hidden; width:1200px;  margin:15px auto;}
.sub_left { margin-right:15px; width:220px; float:left;}
.sub_content {float:left; width:965px; position: relative;}

/* �������� ��ü�ڽ� */
.info_centents{	margin-left: 233px; padding: 0 0 0 10px; text-align: left;overflow: hidden;}

/* �������� ��ü���� */
.subTT{	font-size: 25px; color:#444; text-indent: 15px; margin-top:15px; text-align: left; font-family: 'NanumBarunGothic', sans-serif; margin-bottom: 40px; position:relative;}
.subTT > .fa {display: none;}
.subTT:after {content:""; border-bottom: 1px solid #bfbfbf; display: block;  position: absolute;  bottom: -20px; width: 965px; }

/* �������� ������ */
.subTT.md {font-size: 19px; text-indent: 10px; line-height: 20px; text-indent: 0; border-left:0; margin-bottom:10px; }
.subTT.md:after {content:""; border-bottom: none; }
.subTT.noborder {border-left: none;}

/* ������ �ڽ� */
.contentBox{font-size: 15px; padding: 10px; line-height: 27px;}
.contentBox.gray{position: relative; padding:10px 30px; background:#f5f5f5}
.contentBox.gray.border{position: relative; padding:10px 30px; border:2px solid #ccc;}
.contentBox .img1{margin: 54px auto; width: 500px; display: block;}
.contentTT {font-weight: bold; position: relative; text-indent: 20px; text-align: left; line-height: 27px; font-size: 16px;}
.contentTT:before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:10px; height:10px; background:#0067ad;}
.contentBox li {display: block; text-indent: 10px;}
.listyle li {list-style: inside; display: block; display:list-item;}

/* ���������̼� ������*/
.page_wrap{ text-align: center; padding:27px 0; margin:0 auto;}
.page_wrap .ptext {cursor: pointer;transition:0.2s;border-radius: 50%;    font-size: 16px;}
.page_wrap .ptext font, .page_wrap .ptext a { vertical-align: top; width: 30px; height: 30px; display: inline-block;line-height: 30px; text-align: center; margin:0 2px; transition: 0.2s; border:1px solid #e4e4e4;}
.arrow{ padding: 4px 8px; cursor: pointer;font-size: 14px;}
.arrow:hover { font-weight: bold;}
.ptext .active{ background: #3F9ADC; color: #fff; }
.ptext:hover *:not(.active){ background: #ebebeb; color: #666;}

/* ǥ ������ */
.table_wrap {margin: 20px 0;}
table {border-spacing: 0; border-collapse: collapse;}
.list {width: 100%;}
.list th, .list td{ border-bottom: 1px solid #e4e4e4; height: 35px; vertical-align: middle; text-align: center; line-height: 20px; padding:0 20px; font-size: 14px;}
.list th {background: #f7f7f7; padding: 5px 0; }
.list thead th {border-top:2px solid #666; border-bottom: 1px solid #444;}
.list tr:hover {background: #f5f5f5}
.list tr:not(:first-child) th {border-top:none;}
.list.pd_sm th, .list.pd_sm td {padding-left:10px; padding-right:10px;}
.list.sm th  {height:25px; font-size: 15px;}
.list.sm td {font-size: 13px;}
.listEllipsis {	text-overflow: ellipsis;white-space: nowrap; overflow: hidden; width: 519px; display: inline-block; vertical-align: middle;}
.listEllipsis:hover{color:#2c2c2c; text-decoration: underline;}
.borderR {border-right:1px solid #ccc}
.borderB {border-bottom:1px solid #ccc}
.borderBN {border-bottom:none !important;}
.table_basic{margin:20px 0;}
.table_basic th,.table_basic td  {padding-top:10px; text-align: center;}
.table_basic th {background:#868686; height: 35px; color:#fff;border:1px solid #868686}
.table_basic td {background:#fff; border:1px solid #868686}
.tableTT {position: relative; font-size: 16px; text-align: left; line-height: 27px; text-indent: 11px; margin-bottom: 5px; font-weight: bold; background:##dbeaf3; display: inline-block; padding-right:10px;}

/* TABLE CELL ���� */
th.blue {background: #def1fd;}
td.blue {background: #f2f9fd;}
th.green {background: #bceebc;}
td.green {background: #eafbea;}
tfoot td.blue {color:#056eab; font-weight: bold; background: none;}
tfoot td.green {color:#0a700a; font-weight: bold; background: none;}

/* TABLE - VIEW */
.table {width:100%;}
.table.view {margin-bottom:27px; border-top:2px solid #444; border-bottom:1px solid #ddd;}
.table.view th, .table.view td {height:40px; border-bottom:1px solid #ccc;}
.table.view th {background: #f1f3f1; font-weight: bold; color:#2c2c2c;}
.table.view th.required {background:#eaeff7; color:#002524;} /* �����Ķ� */
.table.view td {padding-left:10px;padding-right:10px;}
.add_height {height:120px !important;}
.table.view.height_sm th, .table.view.height_sm td {height:30px;}

.table .bg_yw {background: #f7eeb1;}
.table .bg_gr {background: #deffdf;}
.table .bg_rd {background: #f7cdcd;}

/* ������� �̹��� �ڽ�  */
.imgBox { text-align: center; padding:20px; width: 100%; box-sizing: border-box; border: 5px solid #f9f9f9;}
.imgBox dd {display: inline-block; margin:0 5px}
.imgBox dt {color:#ff3636; font-weight: bold; font-size: 17px; padding: 0 0 10px;}

/* FORM  */
.inputBox, .selBox {border:1px solid #ccc;height:30px;padding:0 10px; max-width: 140px;}
.inputBox.email {width:200px; max-width:200px;}
.inputBox.address {width:80%;max-width:80%; box-sizing: border-box;}
.inputBox.half {width:90px;}
.textArea {border:1px solid #ccc; font-size: 14px; padding:20px; width:95%; margin: 5px 0;;}
button {border:none; background:none;}
.btn_wrap{ float:right;}
.btn { padding:6.5px 14px; border:none; border-radius: 3px; cursor: pointer; background:#ddd;  transition:0.2s; text-decoration: none; max-height:38px; font-size: 15px; vertical-align: middle; text-transform: capitalize; font-weight: bold;}
.btn:hover{ background:#0f86b1; color:#fff;}
a.btn { font-size: 14px; display: inline-block; padding:7px 14px;}
a.btn:hover{ background:#0f86b1; color:#fff;}
.btn.click{ background:#0067ad; color:#fff; font-weight: bold;}

/* BUTTON */
.btn_area {padding:20px 0; overflow: hidden;}
.flex_wrap {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between;}
.btn.primery,.btn.primary {background:#4092d9; color:#fff; border:1px solid #518ec3;}
.btn.white {background:#fff; color:#2c2c2c !important; border:1px solid #ccc;}
.btn.green {background: #2ba791; color: #fff; border:1px solid #40978e;}
.btn.red {background:#e04141; color:#fff; border:1px solid #e80808;}
.btn.orange {background:#f0ad4e; color:#fff; border:1px solid #eea236;}
.btn.skyblue {background:#5bc0de; color:#fff; border:1px solid #46b8da;}
.btn.darkgray {background:#444; color:#fff;}

.btn.primary:hover {background: #0e7bd8; border:1px solid #337ab7;}
.btn.primery:hover {background: #0e7bd8; border:1px solid #337ab7;}
.btn.white:hover {background:#f5f5f5; border:1px solid #444;}
.btn.green:hover {background: #009721; }
.btn.red:hover {background: #b92323; border:1px solid #8c1f1f;}
.btn.orange:hover {background: #ff9600; }
.btn.skyblue:hover {background: #30a8cc;}
.btn.darkgray:hover {background:#666; color:#fff;}

/* TABLE ICON BUTTON */
.icon_btn {font-size: 17px; width:30px; height:30px; border-radius: 50%; text-align: center; color:#a7a7a7; transition:0.3s;}
.icon_btn.blue {color:#0089ff;}
.icon_btn.red {color:#ff5341;}
.icon_btn.green {color:#39b32a}
.icon_btn.orange {color:#ff9900}

.icon_btn.blue:hover {background:#c8e1f7;}
.icon_btn.red:hover {background:#ffe8e6;}
.icon_btn.green:hover {background:#ceefca}
.icon_btn.orange:hover {background:#ffebe1}

/* BUTTON SIZE */
.btn.font_sm {font-size: 12px;}
.btn.font_big {font-size: 20px;}
.btn.pd_sm {padding:2px 5px;}
.btn.pd_md {padding:5px 10px;}
.btn.pd_big {padding:10px 20px;}

/* BUTTON STYLE */
.btn.square {border-radius: 0;}
.btn.mround {border-radius: 100px;}

/* ALIGN */
.tar {text-align: right !important;}
.tac {text-align: center;}
.tal {text-align: left !important;}

/* FONT SIZE */
.fz_sm {font-size: 12px;}
.fz_md {font-size: 14px;}
.fz_lg {font-size: 16px;}

/* MARGIN */
.mg_left_20 {margin-left: 20px;}
.mg_bt_10 {margin-bottom: 10px;}
.mg_15 {margin:15px; }

.search_wrap { border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4; width:100%; padding:20px 20px 12px; overflow: hidden; box-sizing: border-box; margin-bottom:20px;background: #f7f7f7;}
.search_wrap.borderFull {border-right:1px solid #e4e4e4; border-left:1px solid #e4e4e4;}
.search_el { float:left;}
.search_el label {font-weight: bold; vertical-align: middle; font-family: "Nanum Gothic",sans-serif; margin-right:7px; font-size: 14px;}
.search_wrap > div:not(.btn_wrap) { float:left;margin:0 20px 8px;}

/* member_store.asp ����������Ʈ ������ ��� */
.cardBtn{ padding:5px 20px; border:1px solid #e4e4e4; font-size: 13px; float:left; margin-right:10px ; margin-bottom:10px;}
.cardBtn img { margin-right: 20px; vertical-align: middle; height:20px;}
.cardBtn:hover {background:#f0f2f9;}

/* ���¾ː� �� */
.lbl { font-style:normal; padding:5px 7px; border-radius: 50px; color:#fff; background:#D8D8D8; font-size: 12px;}
.lbl.orange {background:#FFA800;}
.lbl.gray {background:#878787; }
.lbl.blue {background:#0091EA;}
.lbl.green {background:#2CBD9F;}
.lbl.red {background:#f44336;}
.lbl.pd_sm {padding: 2px 5px;}
.lbl.square {border-radius: 2px;}

/* �ܼ� ��� CLASS */
.MG20{margin:20px 0;}
.alig {text-align: left !important;}
.around{padding:1px 8px;font-size: 12px; background:#fff; border:1px solid #666; border-radius: 40px; }
.bg_fff {background: #fff;}
.font_xsm {font-size: 12px;}
.font_sm {font-size: 15px;}
.font_md {font-size: 17px;}
.bold {font-weight: bold;}
.pd_sm {padding:3px 5px;}
.linehieght_27 {line-height: 27px;}
.linehieght_20 {line-height: 20px;}
.cblue {color:#0067ad}
.cred {color:#f44336 !important;}
.cgray {color:#888;}
.flex {display: -webkit-flex; display: -ms-flex; display: flex;}
.between {justify-content: space-between;}
.around {justify-content: space-around;}
.alignCenter {align-items: center;}

/* ������ ���� */
.pen{position: relative;}
.pen:after{content:''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 12px; z-index: -1; border-radius: 10px;}
.pen.purple:after{background: #E5E8FF;}
.pen.green:after{background: #E5E8FF;}
.pen.yellow:after{background: #fff4d4;}

/* ���� �缱 CSS */
.hatch { padding:20px; box-sizing: border-box; position: relative;}
.hatch:after {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background:url('/images/2021/pattern/pat2.png'); z-index: -2;}
.hatch:before { z-index: -1; content:""; position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; background: #fff;}

/* ����ī�� ȯ�� CSS /welfareCard/apcardTransfer.asp */
.desc_box {text-align: left; margin-bottom:20px;}
.desc_box:last-child {margin-bottom: 0;}
.desc_box.gray {background: #f5f5f5; padding:15px;}
.desc_box.gray ul {margin:10px 0; border:1px solid #ccc;}
.desc_box.gray li {font-size: 14px; overflow: hidden; line-height: 35px; display: block; border-bottom:1px solid #ccc;}
.desc_box.gray li:last-child {border-bottom:none;}
.desc_box.gray li span {float:left; display: inline-block; background: #fff; text-indent: 10px;  }
.desc_box.gray li span.tt {font-weight: bold; width:30%; background: #878787; color:#fff;}
.desc_box.gray li span.ct {width:70%; }
.desc_box.gray p {font-size: 12px; line-height: 16px;}
.desc_box.gray .desc_list {background-color: #fff; padding:2px 10px;}
.desc_box.gray .desc_list li {line-height:24px; border: none;}

.desc_title {font-size: 17px; color:#444; line-height: 27px;}
.desc_title.info:before {content:"\f05a   "; font-family:"Font Awesome 5 Free"; color:#4caf50; font-size: 14px; font-weight: bold;}
.desc_text {font-size: 14px; line-height: 20px; margin-left:20px; display: inline-block; letter-spacing: 0.07em; margin-top:5px;}

.srch_wrap .label {position: relative;}
.srch_wrap .label span {position: absolute; right: 20px; top: 2px; cursor: pointer; transition:0.2s; color:#444;}
.srch_wrap .label span:after {transition:0.2s;}
.srch_wrap .label span:hover .fa {color:#186cb5;}
.srch_wrap .label span:hover:after {content:""; position: absolute; width:25px; height:25px; top:50%; left:50%; transform:translate(-50%,-50%); background: rgba(51,122,183,0.1); border-radius: 50%;}

.ad_reject {cursor: pointer; transition: 0.3s;}
.ad_reject:hover {background: #ff6a00;}

/* �����Ļ��� �� tab menu */
.refund .tab_wrap, .ctab_wrap {display: -webkit-flex; display: -ms-flex; display: flex; padding-left:10px; border-bottom:1px solid #ccc;}
.refund .tab_menu, .ctab_menu {display: inline-block; padding:10px 15px 10px; background: #fff; font-size: 14px; border:1px solid #ccc;margin-left: 7px; transform:translateY(1px);}
.refund .tab_menu:first-child, .ctab_menu:first-child {margin-left: 0;}
.refund .tab_menu.active,.ctab_menu.active {border-top:3px solid #1d2c6f; border-bottom:none;}
.refund .content_wrap {background: #fff; padding:20px 0;}


/* ����ī�� ȯ�� �ݷ���ư Ŭ�� �� ������ �ݷ����� ��Ÿ���� */
.trans_wrap {position: relative;}
.ad_wrap {position: absolute; left:0; top:0; width:100%; height:100%; z-index: 500; display: none;}
.ad_content {position: fixed; width:500px; height:430px; top:50%; left:55%; transform:translate(-50%,-50%); background: #fff; padding:30px; box-sizing: border-box; overflow:hidden; -webkit-box-shadow: 4px 4px 10px rgb(0 0 0 / 10%), -4px -4px 10px rgba(0,0,0,0.1); box-shadow: 4px 4px 10px rgb(0 0 0 / 10%), -4px -4px 10px rgba(0,0,0,0.1); border-radius:10px;}
.ad_content p {font-size: 14px; line-height: 20px; margin: 20px 0; text-align: left;}
.ad_content > div {background: #f9f9f9; border:1px solid #e4e4e4; min-height:200px; overflow-y: scroll; padding:10px; box-sizing: border-box; line-height: 27px; font-size: 14px; text-align:left;}
.ad_content .btn {margin-top : 20px; float:right;}