@charset 'UTF-8';

@import url(base.css);
@import url(font.css);

* { font-family: 'Noto Sans KR','Noto Sans CJK KR','Roboto','나눔고딕','맑은 고딕',sans-serif; font-weight: 400; letter-spacing: -.5px;}
*,*:before,*:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
b, h1, h2, h3, h4, h5, h6, strong { font-weight: 700; }
html,body { height: 100%; }
body { overflow: hidden; }
a { color: #676767; }

/* Skip to Content */
.skipToContent {position: absolute;top: -60px;right: 0;left: 0;z-index: 1000;min-width: 360px;height: 60px;color: #fff; font-size: 1.875rem;text-align: center;letter-spacing: -1.5px;line-height: 60px;background-color: #f27835;background-color: rgba(242, 120, 53, .8);transition: .1s ease-in-out;}
.skipToContent:hover,.skipToContent:focus {top: 0;text-decoration: none;}

/* Dimmed layer */
.dimmedLayer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 95; background:rgba(0,0,0,0.5); }

/* Clear Fix */
.clearFix:before,.clearFix:after { content: ''; display: table;}
.clearFix:after { clear: both;}

/* Hide visually */
.hideEl { overflow: hidden; position: absolute; width: 1px; height: 1px; border: none; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);}
.hideTxt { overflow: hidden; color: transparent; text-indent: 100%;	white-space: nowrap; }
.clear-both { clear:both; }
.floatL { float:left !important; }
.floatR { float:right !important; }
.alignC { text-align: center !important; }
.alignL { text-align: left !important; }
.alignR { text-align: right !important; }
.inBlock { display: inline-block; vertical-align: middle; }
.space { margin:0 5px; }

.w65 { width: 65px !important; }
.w95 { width: 95px !important; }
.w105 { width: 105px !important; }
.w310 { width: 310px !important; }
.w327 { width: 327px !important; }

.w10p { width: 10% !important; }
.w15p { width: 15% !important; }
.w20p { width: 20% !important; }
.w25p { width: 25% !important; }
.w35p { width: 35% !important; }
.w40p { width: 40% !important; }
.w45p { width: 45% !important; }
.w50p { width: 50% !important; }
.w55p { width: 55% !important; }
.w60p { width: 60% !important; }
.w70p { width: 70% !important; }
.w80p { width: 80% !important; }
.w100p { width: 100%; }

.mt20 { margin-top:20px; }

.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.ml05 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px !important; }

.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }

[class*='gridCol'] { float:left; position: relative;}
.gridCol02 { width: 50%; }
.gridCol03 { width: 33.333%; }
.gridCol04 { width: 25%; }

/********** color **********/
.color01 { color: #da1530 !important; }

.button {background-image:none; display:inline-block; height:40px; line-height: 38px; padding:0 20px; border: 1px solid #3d65b1; border-radius:2px; background-color: #3d65b1; vertical-align: middle; font-size:15px; color: #fff; cursor: pointer; }
.button:focus {outline: none;}
.button + .button { margin-left: 5px; }
.button-type01 { height:30px; line-height: 28px; padding: 0 15px; background-color: #f5f5f1; color: #3d3d3d; border: 1px solid #ccc; } 
.button-color01 { background-color:#565656; border-color:#565656; }
.button-color02 { background-color:#133072; border-color:#133072; } 
.btnWrap { margin-top: 20px; overflow: hidden; }
.btnWrap:after { content: ''; display: block; clear: both; } 
.btnRight { text-align: right; margin-top: 20px; }
.btnCenter { text-align: center; }

.boardHead { position: relative;}
.boardHead:before, .boardHead:after { content: ''; display: table; clear: both; }
.boardHead p { margin-bottom:15px; font-size: 15px; font-weight: 500; } 
.boardHead .total { color: #474747; }
.boardHead .guideTxt { text-align: right; color: #da1530; } 
.boardTable table { table-layout:fixed; border-top: 2px solid #565656; }
.boardTable table tr th { height:50px; line-height: 1.4; background-color: #e9ecf3; border-bottom: 1px solid #ccc; border-right:1px solid #ccc; text-align: center; font-size: 15px; font-weight: 500; vertical-align: middle; position: relative; }
.boardTable table tr td { height:48px; text-align: center; padding:5px 7px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; font-size: 15px; vertical-align: middle; position: relative; } 
.boardTable table tr th:last-child, .boardTable table tbody tr td:last-child { border-right:none; }
.boardTable table tr td.alignL { padding-left: 20px; }
.boardTable table tr td a { font-weight: 500; }
.boardTable table tr td a:hover { padding-bottom: 1px; border-bottom: 1px solid #a7a7a7; }
.boardTable table tfoot { background-color:#f2f3ee; border-top:1px solid #163082; }
.boardTable table tfoot tr td:last-child { border-right:none; } 
.boardTable-type01 table { border-bottom:1px solid #565656; }
.boardTable-type01 table tr th { border-bottom:1px solid #ccc; }
.boardTable-type01 table tr td { text-align: left; padding:0 20px; }
.boardTable-type01 table tr td.ptb { padding:8px 20px 5px; }
.boardBottom { height:50px; padding:10px 20px; background-color: #e9ecf3; border:1px solid #ccc; border-top:0; box-sizing: border-box;}
.boardBottom select { width: 65px; margin-left: 30px; }
.boardBottom label, .boardBottom p { font-size:15px; color:#676767; }
.boardBottom p { padding-top: 4px; }

/**********  Datepicker **********/
input[type=text].useDatepicker { width:127px; padding:0 10px; background:#fff url('../img/img_date.png') no-repeat 95% 2px; cursor:pointer; }
#ui-datepicker-div { display:none; width:180px; background:#fff; border:1px #ccc solid; z-index:102 !important; }
.ui-datepicker { position:relative; padding:5px; }
.ui-datepicker table { width:100%; font-size:12px; }
.ui-datepicker table thead th { height:24px; color:#777; line-height:24px; text-align:center; }
.ui-datepicker table tbody td {	width:14.2857%;	text-align:center; height:22px;	}
.ui-datepicker table tbody td a { display:block; height:22px; color:#4b4b4b; line-height:22px; text-align:center;}
.ui-datepicker table tbody td span { color:#aaa; }
.ui-datepicker table tbody td.date-holiday a{ color:#eb3c3c; }
.ui-datepicker tr td:first-child *{ color:#eb3c3c; }
.ui-datepicker tr td:last-child *{ color:#4084d2;}
.ui-datepicker th{ padding:0; }
.ui-datepicker td a.ui-state-active{ color:#fff !important;	background:#4b4b4b;	}
.ui-datepicker td a.ui-state-highlight{	color:#4b4b4b; background:#dfdfdf; }
.ui-datepicker .ui-datepicker-header{ position:relative; padding:0;	}
.ui-datepicker .ui-datepicker-title{ margin:0; height:30px; line-height:30px; font-size:14px; font-weight:normal; color:#242424; letter-spacing:-1px; text-align:center; }
.ui-datepicker .ui-datepicker-title select{ width:55px; min-width: auto; height:25px; line-height:25px; padding:0 0 0 8px; border-radius: 0; font-size:0.75rem; color:#666; background:#fff url('../img/bg_picker.png') right 9px no-repeat;
 border:1px solid #a7a7a7;	box-sizing:border-box; -webkit-appearance:none;appearance:none; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{	position:absolute; left:50%; top:4px; width:23px; height:23px; line-height:26px; text-indent:-9999em; cursor:pointer; }
.ui-datepicker .ui-datepicker-prev{	margin-left:-85px; background:url('../img/btn_calendarPrev.png') no-repeat center center; }
.ui-datepicker .ui-datepicker-next{	margin-left:60px; background:url('../img/btn_calendarNext.png') no-repeat center center; }
.ui-datepicker-trigger{	cursor:pointer;	}

select {min-width: 105px; height:30px; padding: 3px 10px 4px 10px; border: 1px solid #ccc; background:#fff url('../img/select_arrow01.png') no-repeat 100% 50%; border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 15px; color: #676767; }
select::-ms-expand { display: none; }
select:readonly, select:disabled { background-color: #f3f3f3; }
select:focus { outline: none; } 
.selectW01 { min-width: 150px; }
.selectW02 { min-width: 220px; }


input[type=text],input[type=password] { height:30px; line-height: 28px; padding: 0 10px; border-radius: 2px; border: 1px solid #ccc; box-sizing: border-box; font-size: 15px; color: #676767; }
input[type='text']:readonly, input[type='text']:disabled { background-color: #f3f3f3; }
input:focus { outline: none; }

/********** file **********/
.file_inline { display:inline-block; height:30px; line-height:30px; margin-left:5px; padding:0 15px; color:#fff; font-weight:700; text-align:center; background-color:#3d3d3d; vertical-align:middle; border-radius:3px; }
#for_file1 input[type='text'] { width:330px; padding:0; border:1px solid #ccc; background-color: transparent; }

/********** checkbox **********/
input[type='checkbox']{ width:0; height:0; border:0 none; overflow:hidden; clip:rect(0,0,0,0); position: relative;}
input[type='checkbox'] + label{ display:inline-block; position:relative; width:22px; height:22px; line-height:22px; font-size:1rem; color:#676767; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
input[type='checkbox'] + label:before{ display:inline-block; content:''; position: relative; top:4px; left:0; width:18px; height:18px; background-color:#fff;border:1px solid #717171;}
input[type='checkbox']:checked + label:before{background:#205ab8 url('../img/bg_check_on.png') center center no-repeat; border:1px solid #717171;}
input[type='checkbox']:focus + label:before{border:1px solid #666;}
input[type='checkbox']:readonly + label:before,
input[type='checkbox'].readonly + label:before{background:#f0f1f2;border:1px solid #ccc;}
input[type='checkbox']:disabled + label:before,input[type='checkbox'].disabled + label:before{background:#e2e2e2;border:1px solid #ccc;}
input[type='checkbox']:checked:disabled + label:before{background:#e2e2e2 url('../img/bg_check_off.png') center center no-repeat;} 
.chk {display:inline-block; margin-right:10px; font-size:0; vertical-align:middle;}
.chk input[type='checkbox'] + label{ width:auto; padding-left: 30px; } 

/********** radio **********/
input[type='radio']{ width:0; height:0; border:0 none; overflow:hidden; clip:rect(0,0,0,0);   }
input[type='radio'] + label { display:inline-block; position:relative; height:22px; line-height:22px; padding-left: 23px; font-size:1rem; color:#676767; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
input[type='radio'] + label:before { display:inline-block; content:''; position:absolute; top:4px; left:0; width:18px; height:18px; background-color: #fff; border:1px solid #717171; border-radius:50%;}
input[type='radio']:checked + label:before{ background:#fff url('../img/bg_radio_on.png') center center no-repeat; border:1px solid #717171;}
input[type='radio']:focus + label:before{border:1px solid #717171;}
input[type='radio']:readonly + label:before,input[type='radio'].readonly + label:before{background-color:#f3f3f3;border:1px solid #ccc;}
input[type='radio']:disabled + label:before,input[type='radio'].disabled + label:before{background-color:#f3f3f3;border:1px solid #ccc;}
input[type='radio']:checked:disabled + label:before,input[type='radio'].checked.disabled + label:before{background:#e2e2e2 url('../img/bg_radio_off.png') center center no-repeat;} 

textarea { width:100%; padding:10px; border: 1px solid #ccc; }
textarea:disabled { background-color: #f3f3f3; }
textarea:focus { outline: none; }
.textBox01 { min-height:100px; }

/********** paging **********/
.paging { float:left; padding-top: 2px; }
.paging li { display: inline-block; margin-right: 19px; vertical-align: middle; }
.paging li:last-child { margin-right: 0; } 
.paging a { display: block; position: relative; }
.paging .first,.paging .prev,.paging .next,.paging .last { width: 7px; height: 8px; background-repeat: no-repeat; background-position: center center; }
.paging .first { background-image: url(../img/paging_first.png); }
.paging .prev { background-image: url(../img/paging_prev.png); }
.paging .next {	background-image: url(../img/paging_next.png); }
.paging .last { background-image: url(../img/paging_last.png); }

/********** tooltip **********/
.tooltip { display: inline-block; margin-left: 10px; position: relative; }
.tooltip.tooltip01 { position: absolute; top:5px; right:7px; }
.tooltip button { background: none; }
.tooltip .tooltip-contnet { display:block; min-width:230px; visibility: hidden; background-color: #e7465f; padding:20px 20px 30px; border-radius:10px; position: absolute; bottom: 148%; left: 50%; margin-left: -43px; font-size:0.875rem; color: #fff; z-index: 10; }
.tooltip .tooltip-contnet:after { display:block; content: ''; position: absolute; top:100%; left: 50%; margin-left: -80px; border-width: 10px; border-style:solid; border-color:#e7465f transparent transparent transparent; }
.tooltip .tooltip-contnet strong { display: block; margin-bottom: 20px; padding-left:25px; font-size: 0.9375rem; font-weight: 500; background: url(../img/icon_tooltip.png) no-repeat 0 center; }
.tooltip:hover .tooltip-contnet { visibility: visible; } 
.tooltip .tooltip-contnet.tooltip-contnet01 { margin-left: -120px; } 

/********** layerPop  **********/
.modal { display: none; width:520px; position: absolute; top:50%; left: 50%; margin:0 0 0 -175px; box-sizing:border-box; z-index: 100; }
.modal .modalCont { padding:30px 10px 40px 20px; overflow-y: auto; }
.modal.modal-sizeL { width: 1000px; margin:-328px 0 0 -500px; } 
.modal.modal-sizeM { width: 800px; margin:-328px 0 0 -324px; } 
.modal.modal-sizeL .modalCont { height:635px; padding:30px 10px 40px 20px; overflow-y: auto; }
.modal.emailCertifiedModal .modalCont { height: 382px; overflow:hidden; }
.modal.changeHistoryPop { width: 800px; top:138px; left:178px; margin:0; }
.modal.attachPop { width:500px; margin:-139px 0 0 -243px; }
.modalTop { height:55px; line-height:55px; padding:0 30px; background-color:#205ab8; border-radius:20px 20px 0 0; }
.modalTop h4 { font-size:1.125rem; font-weight:500; color:#fff;  }
.modalCont { padding:30px 30px 40px; background-color: #fff; border:1px solid #717171; border-top:none; border-radius:0 0 20px 20px; }
.modalCont h5 { margin-bottom:20px; font-size:1rem; font-weight: 500; }
.modalCont .scroll { height: 600px; overflow-y: auto; }
.modalCont .boardTable table tbody tr:last-child td { border-bottom:1px solid #ccc; }
.modalClose { width:32px; height: 32px; background-image: url('../img/modalCloseBtn.png'); background-position: 0 0; background-repeat: no-repeat; background-color: transparent !important; position: absolute; top:12px; right:25px; cursor: pointer; }

/********** windowPop **********/
.popWrap {position: relative;}
.popWrap button { padding:0 20px; cursor: pointer; }
.popWrap .buttonImg { padding:0; }
.popHeader{ padding:0 20px; background-color:#205ab8; position: relative; }
.popHeader h4 { line-height:55px; font-size: 1.125rem; font-weight: 500; color: #fff; }
.popHeader .btnRight { position: absolute; top:10px; right: 10px; margin:0;}
.popArea { padding:30px 15px; }
.popArea h5 { margin-bottom:20px; font-size: 16px; font-weight: 500; }
.popArea .pop-section { margin-bottom: 30px; }
.popArea .boardTable table tbody tr:last-child th, .popArea .boardTable table tbody tr:last-child td { border-bottom: 1px solid #ccc; }
.popArea input[type=text] { width: 100%; }
.popArea input[type=text]+.button { margin-left: 5px; }
.popArea input.useDatepicker { width:127px; padding:0 10px; background:#fff url('../img/img_date.png') no-repeat 92% 2px; font-size: 0.9375rem; cursor:pointer; }
.popArea .boardTable .button { height:30px; line-height: 23px; padding:0 15px; border:1px solid #a7a7a7; background-color: #f5f5f1; color: #676767; font-weight: 500;}  
.postCode { width: 82px; text-align: center; }
.editorArea { padding:20px; border: 1px solid #ccc; }
.attachmentBox { margin-top:30px; padding:20px 50px; border: 1px solid #ccc; }

#wrap { width:100%; min-width:1200px; overflow: auto; color: #676767;}
.container { position: relative; height: 100vh; background-color: #e0e5eb; overflow: auto; }
.lnb { width: 300px; height: 100vh; position: fixed; top:0; left:0; background-color: #0c1f49;}
.lnbTop { height:160px; padding:25px 15px 30px 20px; background-color: #0c1f49; box-sizing: border-box; position: relative;}
.lnbTop .logo { margin-bottom: 45px; } 
.lnbTop p { font-size: 14px; color: #fff; }
.lnbTop .login { float: right; }
.lnbTop .user { float: left; }
.lnbList { width: 100%; height: 100%; background-color: #0c1f49; position: relative; }
.lnb-depth01  { width:90px; height: 100%; background-color: #3d4b55; }
.lnb-depth01 > ul > li > a { display: block; height: 76px; padding:40px 0 14px 0; border-bottom: 1px solid #021133; box-sizing: border-box; text-align: center; font-size: 15px; font-weight:500; color: #818e99; background-color: #3d4b55; background-position: center 15px; background-repeat: no-repeat; }
.lnb-depth01 > ul > li:nth-child(1) > a { background-image: url("../img/sms-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(2) > a { background-image: url("../img/sms-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(3) > a { background-image: url("../img/palette-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(4) > a { background-image: url("../img/sms-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(5) > a { background-image: url("../img/account-balance-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(6) > a { background-image: url("../img/local-play-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(7) > a { background-image: url("../img/perm-contact-calendar-black-24-dp.png"); }
.lnb-depth01 > ul > li:nth-child(8) > a { background-image: url("../img/fact-check-black-18-dp.png"); }
.lnb-depth01 > ul > li:nth-child(9) > a { background-image: url("../img/dns-black-24-dp-copy.png"); }
.lnb-depth01 > ul > li:nth-child(10) > a { background-image: url("../img/analytics-black-24-dp.png"); }
.lnb-depth01 > ul > li > a span { display: block; margin-bottom:5px; text-align:center; }
.lnb-depth01 > ul > li > a.active { color: #fff; background-color: #021133; }
.lnb-depth01 > ul > li > a.active span { color: #fff; }
.lnb-depth02 { display:none; width: 210px; position: absolute; top:0; left: 90px; }
#lnb01 {display:block;}
.lnb-depth02 > ul > li > a { display: block; height: 45px; line-height: 45px; padding: 0 0 0 15px; background:#0c1f49 url("../img/lnb_arrow.png") calc(100% - 15px) 15px no-repeat; border-bottom: 1px solid #25365c; box-sizing: border-box; font-size: 15px; font-weight:400; color: #ffffff; } 
.lnb-depth02 > ul { border-top: 1px solid #25365c; } 
.lnb-depth02 > ul > li > a.active { background-image: url("../img/lnb_arrow_on.png") } 
.lnb-depth03 { display:none; padding:10px 15px; background-color: #021133; }
.lnb-depth03 > li { margin-bottom: 15px; width:170px;}
.lnb-depth03 > li > a:before{content:"▪ "}
.lnb-depth03 > li > a { display:block; font-size:15px; color:#818e99; }
.lnb-depth03 > li > a:hover, .lnb-depth03 > li > a:focus, .lnb-depth03 > li > a.on { color:#29d6c4; transition: 0.3s; }

 

.lnbBtn { width: 30px; height: 35px; position: absolute; top:33px; right: 17px; background: url(../img/menu-off.png) no-repeat 0 0; cursor: pointer; z-index:200; }
.lnbBtn.open { background: url(../img/menu-on.png) no-repeat 0 0;}
.content { margin-left: 300px; padding:20px 20px 20px 20px; background-color: #e0e5eb; }
.breadcrumb { position: absolute; top:30px; right: 20px; } 
.breadcrumb span { display:inline-block; font-size: 15px; color: #676767; }
.breadcrumb span:before { display: inline-block; content: '>'; font-size: 15px; color:#676767; margin:0 4px; } 
.breadcrumb span:first-child:before { display: none; }
.section { background-color: #fff; padding:0 20px 50px; position: relative; }
.serchBox:after { content: ''; display: table; clear: both;}
.section h3 { margin-bottom:60px; padding:25px 0 20px 0; border-bottom: 1px solid #9c9fa7; font-size: 22px; font-weight: 700; color: #313131; }
.section h4 { margin-bottom:20px; font-size: 18px; font-weight: 700; color: #313131; }
.searchArea { margin-bottom: 30px; }
.searchArea .button { height:30px; line-height: 28px; }
.serchBox { margin-bottom:20px; padding:30px 30px 15px 30px; border-radius: 2px; background-color: #e9ecf3; border:1px solid #ccc; }
.serchBox .inner {padding:0 30px; border-left: 1px solid #ccc; }
.serchBox .gridCol02 .inner { /* padding: 0 0 0 70px; */ text-align: center; }
.serchBox .gridCol02:first-child > .inner { border-left: 0 none; }
.serchBox .gridCol03:first-child > .inner { border-left: 0 none; padding-left: 0; }
.serchBox .gridCol03:last-child > .inner { padding-right: 0; }
.serchBox .gridCol04 > .inner { padding:0 10px; text-align: center; }
.serchBox .gridCol04:first-child > .inner { border-left: 0 none; }
.serchBox span { display: block; margin-bottom: 15px; text-align: center; }
.serchBox span label { display: inline-block; width: 75px; }
.serchBox .gridCol03 label { display:inline-block; width:20%; font-size: 15px; font-weight: 500; color: #474747; }
.serchBox .gridCol03 input.useDatepicker { width:127px; }
.listTable table td { cursor: pointer; }
.detailCont { display: none; margin-top: 50px; }
.modal.reasonLimitPop,.modal.withdrawalPop { margin-top: -123px; }
.modal.reasonLimitPop .modalCont,.modal.withdrawalPop .modalCont { min-height: 280px }
.modal.alertPop02 { width: 800px; }


.sendTxt { padding-top: 5px; }
.moveField { margin-bottom: 20px; }
.moveField select { width: 250px; height:40px; background-image: url(../img/select_arrow02.png); background-position: 95% 50%;}

.boxType01 { padding:20px 0; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; }
.secondary { margin-top: 50px }

@media screen and (max-width: 2560px) {
	.section { min-height: 1257px }
}

@media screen and (max-width: 1920px) {
	.section { min-height: 920px }
}