@charset "UTF-8";

/*
* 기본 UI 영역(스마트폰 포함)
*/


/* title */
[class*="section-"] h3 {padding-bottom:19px; font-weight:400; font-size:24px; border-bottom:4px solid #000}
[class*="section-"] h3 > span {position:relative; margin-left:47px}
[class*="section-"] h3 > span:before {display:inline-block; content:""; position:absolute; left:-26px; top:50%; width:8px; height:12px; margin-top:-6px; background:url(/img/common/icon-tit-arr.gif) no-repeat; }
[class*="section-"] h4 {padding-bottom:18px; font-weight:400; font-size:24px}
[class*="section-"] h4.type2 {font-size:20px}

/* point color */
.point-color {color:#1468c2}

/* hidden */
.hidden {font-size:0; color:#fff; text-indent:-9999px}

/* paginate */
/* .paginate {margin-top:30px; font-weight:700; font-size:18px; text-align:center}
.paginate > *{display:inline-block; vertical-align:middle; padding:0 1px; min-width:26px; height:26px; line-height:26px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
.paginate strong {position:relative; color:#186bb9}
.paginate strong:after {display:inline-block; content:""; position:absolute; left:50%; bottom:0; width:14px; height:3px; margin-left:-6px; background:#186bb9}
.paginate a:hover,
.paginate a:focus {position:relative; color:#186bb9;}
.paginate a:hover:after,
.paginate a:focus:after {display:inline-block; content:""; position:absolute; left:50%; bottom:0; width:14px; height:3px; margin-left:-6px; background:#186bb9}
.paginate .skip {padding:0; text-align:left; text-indent:-9999px; font-size:0; color:#fff;}
.paginate a.skip:after {display:none}
.paginate .skip.prev {margin-right:30px; background:url(/img/common/btn-paginate-prev.gif) 50% 50% no-repeat}
.paginate .skip.prev10 {margin-right:11px; background:url(/img/common/btn-paginate-prev10.gif) 50% 50% no-repeat}
.paginate .skip.next {margin-left:30px; background:url(/img/common/btn-paginate-next.gif) 50% 50% no-repeat}
.paginate .skip.next10 {margin-left:11px; background:url(/img/common/btn-paginate-next10.gif) 50% 50% no-repeat} */
/* paginate */
.paginate {margin:30px 0px; font-weight:700; font-size:12px; text-align:center; margin-bottom:0px; }
.paginate > *{display:inline-block; vertical-align:middle; padding:0 1px; min-width:20px; height:20px; line-height:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
.paginate strong {position:relative; color:#186bb9}
.paginate strong:after {display:inline-block; content:""; position:absolute; left:50%; bottom:0; width:14px; height:3px; margin-left:-6px; background:#186bb9}
.paginate a:hover,
.paginate a:focus {position:relative; color:#186bb9;}
.paginate a:hover:after,
.paginate a:focus:after {display:inline-block; content:""; position:absolute; left:50%; bottom:0; width:14px; height:3px; margin-left:-6px; background:#186bb9}
.paginate .skip {padding:0; text-align:left; text-indent:-9999px; font-size:0; color:#fff;}
.paginate a.skip:after {display:none}
.paginate .skip.prev {margin-right:5px; background:url(/img/common/btn-paginate-prev.gif) 50% 50% no-repeat}
.paginate .skip.prev10 {margin-right:0px; background:url(/img/common/btn-paginate-prev10.gif) 50% 50% no-repeat}
.paginate .skip.next {margin-left:5px; background:url(/img/common/btn-paginate-next.gif) 50% 50% no-repeat}
.paginate .skip.next10 {margin-left:0px; background:url(/img/common/btn-paginate-next10.gif) 50% 50% no-repeat}

/* paginate - small (상위 태그에 pop class 추가 필요)*/
.pop .paginate > * {display:inline-block; vertical-align:middle; padding:0 3px; min-width:20px; height:20px; line-height:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
.pop .paginate strong:after {display:inline-block; content:""; position:absolute; left:50%; bottom:0; width:13px; height:2px; margin-left:-6px; background:#186bb9}
.pop .paginate a:hover:after,
.pop .paginate a:focus:after {display:inline-block; content:""; position:absolute; left:50%; bottom:0; width:13px; height:2px; margin-left:-6px; background:#186bb9}
.pop .paginate a.skip:after {display:none}
.pop .paginate .skip.prev {margin-right:12px; background:url('/img/common/btn-paginate-prev-s.gif') 50% 50% no-repeat}
.pop .paginate .skip.prev10 {margin-right:0; background:url('/img/common/btn-paginate-prev10-s.gif') 50% 50% no-repeat}
.pop .paginate .skip.next {margin-left:12px; background:url('/img/common/btn-paginate-next-s.gif') 50% 50% no-repeat}
.pop .paginate .skip.next10 {margin-left:0; background:url('/img/common/btn-paginate-next10-s.gif') 50% 50% no-repeat}
/* button */
[class*="btn-"] {display:inline-block; height:24px; line-height:24px; min-width:90px; text-align:center; padding:0 8px; vertical-align:middle; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
.no-rgba [class*="btn-"] {min-width:70px}
[class*="btn-"] span {display:block; height:inherit; line-height:inherit; margin-top:-1px; margin-bottom:-1px}
[class*="btn-"].m {min-width:86px; height:27px; line-height:27px; font-size:12px}
.no-rgba [class*="btn-"].m {min-width:66px}
[class*="btn-"].l {height:39px; line-height:39px; padding:0 18px;}
.no-rgba [class*="btn-"].l {min-width:50px}
[class*="btn-"].xl {height:50px; line-height:50px; padding:0 18px;}
.no-rgba [class*="btn-"].xl {min-width:50px}
.btn-g {color:#000; background:#ccd1d5; border:1px solid #ccd1d5}
.btn-b {color:#fff; background:#272727; border:1px solid #272727}
.btn-blue {color:#fff; background:#186bb9; border:1px solid #186bb9}
.btn-w {color:#000; background:#fff; border:1px solid #000}
/* button with an icon */
[class*="btn-"] span.arr {padding-right:18px; background:url(/img/common/btn-arr.png) right center no-repeat}/*x*/
[class*="btn-"] span.plus {padding-left:18px; background:url(/img/common/icon-btn-plus.gif) 0 center no-repeat}
[class*="btn-"] span.pdf {padding-left:49px; font-weight:700; background:url(/img/common/icon-btn-pdf.gif) 0 center no-repeat}/*o*/
[class*="btn-"] span.list {padding-left:24px; background:url(/img/common/icon-btn-list.gif) 0 center no-repeat}  /*o*/
[class*="btn-"] span.switch {padding-left:30px; background:url(/img/common/icon-btn-switch.gif) 0 center no-repeat}
[class*="btn-"] span.xls {padding-left:39px; background:url(/img/common/icon-btn-xls.png) 0 center no-repeat}
[class*="btn-"] span.txt {padding-left:39px; background:url(/img/common/icon-btn-txt.png) 0 center no-repeat}
[class*="btn-"] span.result {padding-left:33px; background:url(/img/common/icon-btn-result.gif) 0 center no-repeat}
[class*="btn-"] span.down {padding-left:33px; background:url(/img/common/icon-btn-down.png) 0 center no-repeat}/*x*/
[class*="btn-"] span.down2 {padding-left:33px; background:url(/img/common/icon-btn-down2.gif) 0 center no-repeat}
.btn-g.arrow span {padding-right:14px; font-size:12px; background:url(/img/common/btn-detail.gif) right center no-repeat}
.btn-g.arrowUpDown span {padding-right:14px; font-size:12px;}
.btn-g.arrowUpDown{position: relative}
.btn-g.arrowUpDown:after{content: "";display: inline-block;position: absolute;top: 50%;right: 6px;width: 7px;height: 4px;margin-top: -2px;background: url(/img/content/ico-arr-updown.gif) 0 0 no-repeat}
.btn-g.arrowUpDown.on:after{background-position:0 -4px}
/* button area */
.btns-submit {margin-top:30px; text-align:right}
.btns-submit:after {display:block; content:""; clear:both}
.btns-submit.center {text-align:center}
.btns-submit a ~ a {margin-left:5px}
.btns-submit a.left {float:left}

/* table */
table td.nodata {padding:50px 0; text-align:center}
/* table by block element */
.tbl {display:table; width:100%}
.tbl .row {display:table-row}
.tbl .row .cell {display:table-cell}
/* table-gray */
.tbl-gray {width:100%; border-top:1px solid #ddd;}
.tbl-gray th {padding:20px; font-weight:400; text-align:left; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; background:#f7f7f7}
.tbl-gray td {padding:20px; border-right:1px solid #ddd; border-bottom:1px solid #ddd}
/* table-basic */
.tbl-basic {width:100%; border-bottom:1px solid #ddd}
.tbl-basic th {height:50px; font-weight:400; border:2px solid #fff; background:#efefef}
.tbl-basic td {padding:18px 10px; line-height:1.25; border-top:1px solid #ddd}
.tbl-basic td.center {text-align:center}
/* table-black */
.tbl-black {width:100%; border-top:1px solid #000}
.tbl-black thead.hide *{height:0; padding:0; line-height:0; font-size:0; color:#fff; text-indent:-9999px; border:none}
.tbl-black thead.hide th:before {display:none}
.tbl-black thead th {position:relative; padding:20px 0; font-weight:400; border-bottom:1px solid #000}
.tbl-black thead th:before {display:inline-block; content:""; position:absolute; left:0; top:50%; width:1px; height:14px; margin-top:-7px; background:#999}
.tbl-black thead th:first-child:before {display:none}
.tbl-black tbody th {border-bottom:1px solid #ddd}
/*.tbl-black td {padding:20px 0 20px 20px; line-height:1.25; border-bottom:1px solid #ddd}*/
.tbl-black td {padding:15px 0 15px 20px; line-height:1; border-bottom:1px solid #ddd}
.tbl-black td.center {padding-left:0; text-align:center}
.tbl-black td .down {padding-left:26px; font-weight:700; color:#1468c2; text-decoration:underline;  background:url(/img/common/icon-list-down.gif) 0 center no-repeat;}
.tbl-black td .delete {padding-left:24px; text-decoration:underline; background:url(/img/common/icon-list-delete.gif) 0 center no-repeat;}
.tbl-black td.file a {padding: 3px 0;display: inline-block}
.tbl-black td.file span {font-weight:700; color:#1468c2}
.tbl-black td.file span > span.icon {display:inline-block; width:16px; height:16px; margin-right:12px; vertical-align:middle; background:url(/img/common/icon-file.gif) 0 -128px no-repeat}
.tbl-black td.file span > span.icon.zip {background-position:0 0}
.tbl-black td.file span > span.icon.word {background-position:0 -16px}
.tbl-black td.file span > span.icon.txt {background-position:0 -32px}
.tbl-black td.file span > span.icon.ppt {background-position:0 -48px}
.tbl-black td.file span > span.icon.pdf {background-position:0 -64px}
.tbl-black td.file span > span.icon.jpg {background-position:0 -80px}
.tbl-black td.file span > span.icon.hwp {background-position:0 -96px}
.tbl-black td.file span > span.icon.xls {background-position:0 -112px}
.tbl-black td.file span > span.icon.etc {background-position:0 -128px}
.tbl-black td.file span > span.icon.png {background-position:0 -128px}
.tbl-black td.file span > span.icon.empty {background-position:0 -144px}
.tbl-black tr.attachment td > ul {margin-top:12px}
.tbl-black tr.attachment td > ul > li {font-size:12px; line-height:1.7}
.tbl-black tr.attachment td > ul > li em {font-style:normal; text-decoration:underline}
.tbl-black tr.attachment td span.cap-file {padding:0 5px 0 0; font-weight:700; font-size:13px; line-height:24px; vertical-align:top}
.tbl-black tr.attached td {line-height:19px}
.tbl-black tr.attached .added-file a > span {display:inline-block; width:19px; height:19px; margin-left:10px; font-size:0; vertical-align:top; background:url(/img/common/icon-file-delete.gif) no-repeat}
[id*=display_item] {padding-bottom:10px; line-height: 22px}
[id*=display_item] a > span {display:inline-block; width:19px; height:10px; margin-left:10px; font-size:0; vertical-align:middle; background:url(/img/common/icon-list-delete2.gif) no-repeat}

.tbl-black.board {border-collapse:separate}
.tbl-black.board td {padding:17px 5px}
.tbl-black.board td span.attach {display:inline-block; width:18px; height:16px; font-size:0; color:#fff; text-indent:-9999px; vertical-align:middle; background:url(/img/common/icon-attach.png) right center no-repeat}
.tbl-black.board tr.notice td {position:relative; background:#f7f7f7}
.tbl-black.board tr.notice td:after {display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#fff}
.tbl-black.board tr.notice td:before {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:#fff}
.tbl-black.board tr.notice td > span.note {display:inline-block; width:14px; height:18px; font-size:0; color:#fff; text-indent:-9999px; vertical-align:middle; background:url(/img/common/icon-note.gif) no-repeat}
.tbl-black.board td.writer {padding:0;}
.tbl-black.board td.writer .name {padding:17px 12px 17px 22px}
.tbl-black.board td.writer .icon {padding:15px; text-align:center; vertical-align:middle}
.tbl-black.board td > a > span.new {display:inline-block; width:36px; height:20px; margin-left:4px; font-size:0; color:#fff; text-indent:-9999px; vertical-align:middle; background:url(/img/admin/icon_new.gif) 0px 3px no-repeat; }
.tbl-black.board td > a {display:inline-block; line-height:20px}
.tbl-black.board td > a:hover,
.tbl-black.board td > a:focus {text-decoration:underline}
.tbl-black.view tbody th {position:relative; border-bottom:1px solid #000}
.tbl-black.view tbody th:before {display:inline-block; content:""; position:absolute; right:0; width:1px; height:14px; /* margin-top:-7px; */ background:#999}
.tbl-black.view tbody td {padding:19px 30px 18px; border-bottom:1px solid #000}
.tbl-black.view tbody th.titles,
.tbl-black.view tbody td.titles {border-bottom:1px solid #ddd}
.tbl-black.view tbody td.content {padding:40px 30px;line-height:1.5}
.tbl-black.view tbody td.content p ~ p {margin-top:10px}
.tbl-black.view tbody td.content div ~ div {margin-top:10px}

/* fake form - select */
.select-title {text-align:left; vertical-align:middle; padding:10px 15px; border:1px solid #ccc; background:#fff url(/img/common/icon-select.png) no-repeat 91% center; display:inline-block; box-sizing:border-box;color: #000}
.select-title ~ .select-title {margin-left:5px}
.select-title strong {width:100%; height:1.25em; word-break:break-all; line-height:1.2em; padding:1px 0 2px; display:block; overflow:hidden}
.select-title.focus,
.select-title.active {color:#000; border-color:#666}
/* .select-title.focus {background-position:100% -22px}
.select-title.active {background-position:100% -44px} */
.select-title.disabled {color:#000; text-shadow:1px 1px 0 #fff; border-color:#ccc;}
.select-option {border:1px solid #ccc; background:#fff; overflow:auto}
.select-option ul {margin:0; padding:0}
.select-option li {list-style:none}
.select-option span,
.select-option strong {height:1.1em; white-space:nowrap; /* text-overflow:ellipsis; */ line-height:1.0; text-decoration:none; padding:4px; display:block; overflow:hidden; cursor:default}
.select-option strong {font-weight:bold; color:#000; border-top:1px solid #ccc; border-bottom:1px solid #ccc}
.select-option li li span {padding-left:10px}
.select-option span:hover,
.select-option span.selected {color:#000; background:#eee;}
.select-option .disabled span,
.select-option .disabled strong {text-decoration:line-through; background:none}

/* popup */
.section-pop {/* display:inline-block */ width:auto; padding-top:0; padding-bottom:0; background:#fff; -webkit-box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5); box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}
.section-pop .header {position:relative}
.section-pop .header h1,
.section-pop .header h2,
.section-pop .header h3 {width:100%; height:55px; padding-left:20px; font-weight:700; font-size:21px; color:#fff; line-height:55px; border:none; background:#186bb9}
.section-pop .header .close {position:absolute; top:50%; right:20px; width:21px; height:21px; margin-top:-10px; text-indent:-9999px; font-size:0; color:#186bb9; background:url(/img/common/btn-pop-close.gif) no-repeat; text-decoration:none}
.section-pop .header .close:hover,
.section-pop .header .close:focus {text-decoration:none}
.section-pop .content {padding:15px 30px}
.section-pop .content ul.guide {margin:10px 0 0 0}
.section-pop .content ul.guide li {font-size:14px; font-weight:normal}
.section-pop .content ul.guide li span {font-weight:700; color:#186bb9}
.section-pop .content ul.guide li {position:relative; padding-left:13px; line-height:1.25}
.section-pop .content ul.guide li:before {display:inline-block; content:""; position:absolute; left:0; top:7px; width:3px; height:3px; border-radius:3px; background:#000}
.section-pop .content .btns-submit {margin-top:20px; text-align:center}
.section-pop .content .btns-submit a span {padding-right:18px; background:url(/img/common/btn-arr.png) right center no-repeat}
.wrap-pop {display:none; position:fixed; z-index:10000; background:rgba(0,0,0,.7); left:0; top:0; right:0; bottom:0; overflow-y:auto; text-align:center; margin:0px !important;}
.wrap-pop:after {content:""; display:inline-block; vertical-align:middle; width:0; height:100%}
.wrap-pop .section-pop {display:inline-block; vertical-align:middle; text-align:left}

/* list */
/* black dot list */
ul.dot-b > li {position:relative; padding-left:10px; line-height:2.3}
ul.dot-b > li:before {display:inline-block; content:""; position:absolute; left:0; top:14px; width:3px; height:3px; border-radius:3px; background:#000}
ul.dot-b > li > span {display:block; margin-bottom:3px; font-size:12px}
ul.dot-b > li > strong {font-weight:400; color:#1468c2}
/* blue dot list */
ul.dot-blue > li {position:relative; padding-left:18px; line-height:2.4}
ul.dot-blue > li:before {display:inline-block; content:""; position:absolute; left:0; top:14px; width:8px; height:8px; background:url(/img/common/dot-cir-b.png) no-repeat}
ul.dot-blue > li strong {color:#1468c2}
ul.dot-blue > li > ul {margin-bottom:5px}
ul.dot-blue > li > ul > li {font-weight:400; line-height:1.7}
ul.dot-blue.strong > li {font-weight:700}

/* tab */
.tab-basic {width:100%; margin-top:40px; text-align:center}
.tab-basic:after {display:block; content:""; clear:both}
.tab-basic a {float:left; position:relative; padding:24px 0; border-bottom:2px solid #000; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
.tab-basic a:before {content:""; display:inline-block; position:absolute; left:-2px; top:50%; width:2px; height:50px; margin-top:-25px; background:#d7d7d7}
.tab-basic a:first-child:before {display:none}
.tab-basic a > strong {font-weight:400; font-size:21px;}
.tab-basic a > span {display:block}
.tab-basic a > span > span {display:block}
.tab-basic a.on {z-index:1; border-top:2px solid #000; border-right:2px solid #000; border-bottom:none; border-left:2px solid #000}
.tab-basic a.on:before {display:none}
.tab-basic a.on > strong {font-weight:700; color:#1468c2}
.tab-basic.two a {width:50%}
.tab-basic.three a {width:33.3%}
.tab-basic.three a > strong {display:inline-block; padding-bottom:32px}
.tab-basic.three a > span {display:block; position:absolute; left:0; top:53px; width:100%; line-height:1.25}

/* input */
 input[type="text"] {height:39px; padding-left:18px; border:1px solid #ccc; background:#f7f7f7}
/*input[type="radio"] {position:absolute; left:-1000em}
input[type="radio"] + label {display:inline-block; position:relative; padding-left:27px; height:15px; line-height:15px; color:#333; text-align:left}
input[type="radio"] + label:after {content:""; position:absolute; left:0; top:-3px; width:19px; height:19px; background:url(/img/common/icon-radio.png) 0 0 no-repeat; vertical-align:middle}
input[type="radio"]:checked + label:after {background-position:-19px 0}
.no-checked input[type="radio"] {position:relative; left:auto; vertical-align:middle; width:15px; height:15px}
.no-checked input[type="radio"] + label {padding-left:0}
.no-checked input[type="radio"] + label:after {display:none} */
.wrap-file {display:inline-block; position:relative; height:24px; padding:0 76px 0 0; cursor:pointer}
.wrap-file input[type="file"] {position:absolute; left:0; top:0; width:100%; height:24px; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border:none; cursor:pointer}
/* .wrap-file input[type="file"] {position:absolute; left:0; top:0; width:100px; height:24px;border:0; cursor:pointer} */
.wrap-file > strong {position:absolute; left:0; top:1px; display:block; height:24px; line-height:22px; padding:0 25px 0 0; font-weight:700; vertical-align:middle}
.wrap-file > a {position:absolute; right:0; top:50%; min-width:74px; margin-top:-12px}
.wrap-file > label.btn-g {min-width:74px;cursor: pointer}
.no-rgba .wrap-file > label.btn-g {min-width:58px}
.wrap-file.alone {padding-right:0}
.wrap-wide select,
.wrap-wide .select-title {width:100% !important}

/* top Button */
.gototop { display:none; background:url(/img/common/btn-top.png) no-repeat center center; width: 45px; height: 45px; text-indent: -99999px; position: fixed; z-index: 999; bottom: 20px; right: 15px; background-size: 45px; }

/*
* 태블릿 전용 UI 영역
*/
@media screen and (min-width:768px) {
	.paginate {margin:35px 0px; font-size:18px; }
	.paginate > *{ min-width:26px; height:26px; line-height:26px; }
	.paginate .skip.prev {margin-right:30px; background:url(/img/common/btn-paginate-prev.gif) 50% 50% no-repeat}
	.paginate .skip.prev10 {margin-right:11px; background:url(/img/common/btn-paginate-prev10.gif) 50% 50% no-repeat}
	.paginate .skip.next {margin-left:30px; background:url(/img/common/btn-paginate-next.gif) 50% 50% no-repeat}
	.paginate .skip.next10 {margin-left:11px; background:url(/img/common/btn-paginate-next10.gif) 50% 50% no-repeat}
	
	.gototop { width: 60px; height: 60px; bottom: 30px; right: 30px; background-size: 60px; }
}

/*
* PC 전용 UI 영역
*/
@media screen and (min-width:1025px) {
	.tbl-black.board td > a > span.new { background:url(/img/common/icon-new.gif) no-repeat; margin-left:10px; }
	.paginate {margin:0px; margin-top:40px; font-size:18px; }
	.paginate > *{ min-width:26px; height:26px; line-height:26px; }
	.paginate .skip.prev {margin-right:30px; background:url(/img/common/btn-paginate-prev.gif) 50% 50% no-repeat}
	.paginate .skip.prev10 {margin-right:11px; background:url(/img/common/btn-paginate-prev10.gif) 50% 50% no-repeat}
	.paginate .skip.next {margin-left:30px; background:url(/img/common/btn-paginate-next.gif) 50% 50% no-repeat}
	.paginate .skip.next10 {margin-left:11px; background:url(/img/common/btn-paginate-next10.gif) 50% 50% no-repeat}
	.gototop { display:none !important; }
}