@charset "utf-8";
/* font */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); /* font-family: 'Noto Sans KR', sans-serif; */
@import url(https://fonts.googleapis.com/earlyaccess/jejumyeongjo.css); /* font-family: 'Jeju Myeongjo', serif; */
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* font-family : 'Nanum Gothic' */
/* Basc Custom */
body { font-family: 'Nanum Gothic','Malgun Gothic', '맑은고딕', 'Dotum', '돋움', 'Montserrat', 'Arial', 'sans-serif'; font-size: 0.8em; line-height: 1.7em; color:#555; }
/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:35px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:35px}
#schKeyword.required { background-image: none !important; padding-left: 10px !important; }
.jconfirm-box { min-width: 300px; margin: 0 auto; border: 4px solid #428bca; }
.jconfirm-box .title-c { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default { height: 31px; display: inline-block; font-size: 12px; padding: 5px 15px; cursor: pointer; text-decoration: none; color: #fff !important; background: #34a4e1; border: 1px solid #1e8bc7; border-radius: 5px; }
.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default:hover { text-decoration: none; background: #1e8bc7 !important; border-color: #1a7eb5; }
.cfm-style-box { position: relative; max-width: 350px; margin: 20px auto; border: 4px solid #e1e2e3; padding: 20px; }
.cfm-style-box > h3 { text-align: center; font-size: 18px !important; font-weight: 600 !important; border-bottom: 1px solid #d1d2d3; padding: 0 0 20px 0 !important; margin-bottom: 20px !important }
.cfm-style-box > h3:before { display: none !important; }
.cfm-style-box > h3 span { display: block; font-size: 12px; color: #888; line-height: 1.2em; padding-top: 10px; font-weight: 400; max-width:230px; margin: 0 auto; }
.cfm-style-box > h3 span.full { max-width: 100%; }
.cfm-style-box fieldset { text-align: center; }
.cfm-style-box fieldset label { display: block; position: absolute; top: 0; left: 0; overflow: hidden; z-index: -100; width: 1px; height: 1px; }
.cfm-style-box fieldset input[type="text"],
.cfm-style-box fieldset input[type="password"] { width: 100%; border: 1px solid #d1d2d3; height: 30px; border-radius: 3px; }
.cfm-style-box button { display: block; width: 100%; margin-top: 10px; text-decoration: none; padding: 10px 0; background: #4666a6; color: #fff; }
.cfm-style-box button:hover { background: #375394; }
.cfm-style-box .login .ui-user-id { display: block; position: relative; margin-bottom: 5px; }
.cfm-style-box .login .ui-user-pw { display: block; position: relative; }
.cfm-style-box .login .ui-user-id:before { content: ""; display: block; position: absolute; top: 50%; margin-top: -8px; left: 10px; width:16px; height: 16px; background: url('/resources/images/cmm/ico-login-id.png') no-repeat 50% 50%; }
.cfm-style-box .login .ui-user-pw:before { content: ""; display: block; position: absolute; top: 50%; margin-top: -8px; left: 10px; width:16px; height: 16px; background: url('/resources/images/cmm/ico-login-pw.png') no-repeat 50% 50%; }
.cfm-style-box .login #userid { text-indent: 35px; background: #fff; }
.cfm-style-box .login #passwd { text-indent: 35px; background: #fff; }
.ui-style-title { position: relative; margin-bottom: 20px; font-size: 18px; font-weight: 300; padding-left: 10px;}
.ui-style-title:before { content: ""; display: block; position: absolute; left: 0; width: 5px; top:0; bottom: 0; background:#49a5bf; }
/* table 버튼 */
table .ui-btn { border-radius: 2px; }
.ui-page-tab { position: relative; overflow: hidden; padding-bottom: 0px; }
.ui-page-tab li { float: left; width: 20%; text-align: center;}
.ui-page-tab li a { display: block; height: 30px; line-height: 30px; padding: 0 10px; background: #f8f8f8; margin: 1px; border: 1px solid #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-page-tab li.on a,
.ui-page-tab li a:hover { background: #be222f; color: #fff; border: 5px solid #be222f; text-decoration: none; }
.ui-board-info { position: relative; margin-bottom: 20px; clear: both; }
.ui-board-info:after { content: ""; display: block; position: relative; clear: both; }
.ui-board-info .ui-fl,
.ui-board-info .fl-left { line-height: 20px; }
@media all and (max-width: 580px) {
.ui-board-info .ui-fl,
.ui-board-info .fl-left { display: none; }
}
.form-group { display: inline-block; vertical-align: middle; }
.form-group.margin.top { margin-top: 5px; }
.form-group.margin.bottom { margin-bottom: 5px; }
/*** Button Style */
.ui-btn { display: inline-block; font-size: 12px; padding: 5px 15px; cursor: pointer; text-decoration: none; color: #fff; background: #484848; border: 1px solid #1d1d1d; border-radius: 5px; text-decoration: none; vertical-align: middle; }
.ui-btn:hover { background: #000000; }
.ui-btn:active,
.ui-btn:link,
.ui-btn:visited { }
button.ui-btn { height: 31px; }
input.ui-btn { height: 31px; }
/* icon */
.ui-btn:hover { text-decoration: none; background: #388fa7; border-color: #2b798f; }
.ui-btn.ui-ico:before { padding-right: 8px; }
.ui-btn.no-text { position: relative; text-indent: -999px; overflow: hidden; border-radius: 9.0em; padding: 0; width: 20px; height: 20px; }
.ui-btn.no-text:before { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-indent: 0; text-align: center; line-height: 20px; padding: 0; }
.ui-btn.no-text.squer { border-radius: 2px; }
/* color */
.ui-btn.black {background: #464646;border-color: #3c3c3c;color: #ffffff;}
.ui-btn.black:hover {background: #333333;border-color: #222222;}
.ui-btn.blue { background: #1b84be; border-color: #1378b0; color: #ffffff;}
.ui-btn.blue:hover { background: #1573a6; border-color: #0e6596; color: }
.ui-btn.darkblue { background: #1b84be; border-color: #1378b0; color: #ffffff; }
.ui-btn.darkblue:hover { background: #1573a6; border-color: #0e6596; color: }
.ui-btn.red { background: #d03131; border-color: #b31b1b; color: #ffffff;}
.ui-btn.red:hover { background: #a61313; border-color: #990b0b; color: }
.ui-btn.green { background: #7ac257; border-color: #5aad32; color: #ffffff;}
.ui-btn.green:hover { background: #6db44b; border-color: #3a8814; color: }
.ui-btn.gray { background: #747681; border-color: #5f616c; color: #ffffff;}
.ui-btn.gray:hover { background: #5c5e6a; border-color: #4e505e; color: }
.ui-btn.white { background: #fefefe; border-color: #cacaca; color: #555; }
.ui-btn.white:hover { background: #efefef; border-color: #c1c1c1; color: ;}
.ui-btn.disable { background: #eaeaea; border-color: #e1e1e1; color: #999; cursor: default; }
.ui-btn.disable:hover { background: #eaeaea; border-color: #e1e1e1; }
/* Size */
.ui-btn.small { padding: 2px 8px; }
button.ui-btn.small { height: 25px; }
input.ui-btn.small { height: 25px; }
.ui-btn.big { padding: 10px 25px; font-size: 14px; }
button.ui-btn.blg { height: 41px; }
input.ui-btn.big { height: 41px; }
.ui-btn.wrap { box-sizing: border-box; width: 100%; text-align: center; }
.fl-left { float: left !important; }
.fl-right { float: right !important; }
.fl-center { margin-left: auto !important; margin-right: auto !important; }
.txt-left { text-align: left !important; }
.txt-right { text-align: right !important; }
.txt-center { text-align: center !important; }
.single-title { padding-bottom: 10px; font-size: 18px; text-align: center; }
.single-title span { display: block; font-size: 12px; color: #d1d1d1; }
.single-box { position: relative; max-width: 250px; margin: 0 auto; padding: 10px; }
.single-box input[type="text"],
.single-box input[type="password"] { height: 30px; border: 1px solid #d1d1d1; border-radius: 3px; box-sizing: border-box; width: 100%; padding: 0 10px; margin-bottom: 5px; }
/** Form Table */
.search label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}
.search input[type="text"], .search input[type="file"], .search input[type="password"] {
height: 27px;
border: 1px solid #d1d1d1;
text-indent: 10px;
}
/*** Gallery Style */
.ui-gallery { display: block; position: relative; padding: 25px 0; border-top: 3px solid #616263; border-bottom: 1px solid #e1e2e3; margin-top: 10px; }
.ui-gallery:after { content: ""; display: block; position: relative; clear: both; }
.ui-gallery li { display: block; position: relative; float: left; width: 25%; text-align: center; margin-bottom: 20px; box-sizing: border-box; overflow: hidden; }
.ui-gallery li img { max-height: 100%; }
.ui-gallery li > a { display: block; position: relative; max-width: 150px; padding: 1px; height: 100px; line-height: 100px; margin: 0 auto; text-align: center; overflow: hidden; }
.ui-gallery li > a p { position: absolute; bottom: 0; left: 0; right: 0; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-gallery li > a:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 156px; background: #fafafa; border: 1px solid #e1e1e1; z-index: -1; }
.ui-gallery li .ui-control-box { display: inline-block; }
.ui-gallery li .data-list { font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 150px; margin: 0 auto; line-height: 1.4em; text-align: left; }
.ui-gallery li .data-list strong { padding-right: 5px; }
.ui-gallery li i { display: block; position: absolute; left: -22px; top: 10px; width: 80px; line-height: 1.5em; background-color: #a00; overflow: hidden; white-space: nowrap; color: #fff; }
.ui-gallery li i.ready { background: #971515; }
.ui-gallery li i.ing { background: #f5a211; }
.ui-gallery li i.com { background: #9a9fa8; }
.ui-gallery li i {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0 0 3px #888;
-moz-box-shadow: 0 0 3px #888;
box-shadow: 0 0 3px #888;
}
@media all and (max-width: 645px) {
.ui-gallery li { width: 33.3%; }
}
@media all and (max-width:480px) {
.ui-gallery li { width: 50%; }
}
/** Web Zine Style */
.ui-webzin { display: block; position: relative; padding: 0; border-top: 3px solid #49a5bf; border-bottom: 1px solid #49a5bf; margin-top: 10px; }
.ui-webzin li { display: block; position: relative; padding: 25px 0 50px 170px; min-height: 100px; border-bottom: 1px solid #cacaca; }
.ui-webzin img { position: absolute; top: 25px; left: 0; width: 150px; height: 100px; }
.ui-webzin p strong { display: inline-block; width: 50px; }
.ui-webzin p { line-height: 20px; margin-bottom: 7px; }
.ui-webzin p.data-E { display: block; display: -webkit-box; height: 40px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.ui-webzin a p { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; margin-bottom: 10px; border-bottom: none; }
.ui-webzin p.data-date { position: absolute; bottom: 20px; right: 0; border: none; color: #777; }
@media all and (max-width: 580px) {
.ui-webzin li { padding-left: 120px; min-height: 67px; }
.ui-webzin img { width: 100px; height: 67px; }
}
@media all and (max-width: 500px) {
.ui-webzin li { padding-left: 0; min-height: 0; }
.ui-webzin img { position: relative; top: auto; width: 150px; height: 100px; }
.ui-webzin a p { margin-top: 15px; }
}
/*************************************************************
Viewer Style
**************************************************************/
.ui-view { position: relative; }
.ui-view h5.ui-title { text-align: left; padding: 10px 0; font-size: 20px; font-weight: 800; }
.ui-view h5.ui-title:before { content: "-"; font-family: '궁서'; font-size: 25px; padding-right: 5px; color: #34a4e1; }
/* Viewer */
table.ui-view { width: 100%; padding:0; border-spacing:0px; border:0; border-collapse:collapse; }
table.ui-view th,
table.ui-view td { padding: 8px 10px; }
table.ui-view th { background: #49a5bf; color: #fff; border-bottom: 1px solid #89c8da; font-weight: 300; }
table.ui-view td { border: 1px solid #d8dada; }
table.ui-view tr:first-child { border-top: 1px solid #d8dada; }
table.ui-view.white { border-top: 3px solid #49a5bf; }
table.ui-view.white th { background: #f1f6f7; color: #333; border: 1px solid #d8dada; }
table.ui-view.white td { background: #fff;}
@media all and (max-width: 740px) {
table.ui-view,
table.ui-view tbody,
table.ui-view tfoot,
table.ui-view tr,
table.ui-view td,
table.ui-view th { display: Block; }
table.ui-view .ta_N { display: none !important; }
table.ui-view .ta_Y { display: block !important; }
table.ui-view { border-bottom: 1px solid #d8dada; }
table.ui-view tr { margin-bottom: 10px; border: 1px solid #d1d1d1; border-radius: 5px; background: #fff; overflow: hidden;}
table.ui-view td,
table.ui-view th { text-align: left; }
table.ui-view th { position: relative; background: transparent; background: #77c3d8; color: #fff; padding: 4px 15px; }
table.ui-view td { border: none; }
table.ui-view td input[type="text"] + input[type="button"],
table.ui-view td input[type="text"] + button,
table.ui-view td input[type="text"] + button + button,
table.ui-view td input[type="text"] + input[type="button"] + input[type="button"] { width: 100%; margin-top: 5px; }
table.ui-view input[type="text"],
table.ui-view input[type="file"],
table.ui-view input[type="password"],
table.ui-view select { width: 100%; }
table.ui-view.white { border: none; margin-top: 10px; }
table.ui-view.white tr:first-child { border-top-width: 1px; }
table.ui-view.white th { border: 0px solid #d8dada; border-bottom-width: 1px; }
}
#board_page_info { position: relative; padding: 10px; margin-bottom: 10px; border-top: 1px solid #e1e1e1; text-align: right; }
#board_page_info p { display: inline; position: relative; padding: 0 5px; font-size: 11px; }
#board_page_info p:before { font-family: 'icon'; }
#board_page_info p strong { display: block; position: absolute; width: 0; height: 0; overflow: hidden; top: 0; left: 0; }
#board_page_info p.name:before { content: ""; }
#board_page_info p.date:before { content: ""; }
#board_page_info p.hit:before { content: "View "; }
#board_item_list { position: relative; border: 1px solid #e1e1e1; border-left-width: 0px; border-right-width: 0px;overflow: hidden; background: #fff; }
#board_item_list.no-top-line { border-top: none; }
#board_item_list hr { display: block; position: relative; clear: both; margin: 0; padding: 0; border: none; height: 0px; border-bottom: 1px solid #e1e1e1; z-index: 2; }
#board_item_list hr.padding { height: 30px; }
#board_item_list hr + hr { display: none; }
#board_item_list dl { display: table; position: relative; width: 50%; float: left; min-height: 25px; line-height: 25px; margin: 0; z-index: 1; }
#board_item_list.mov dl iframe { height:600px}
#board_item_list dt { display: table-cell; position: relative; width: 100px; padding: 5px 10px; font-weight: bold; color: #333; font-size: 12px; font-weight: normal; }
#board_item_list dd { display: table-cell; position: relative; vertical-align: top; padding: 5px; }
#board_item_list dd input[type="text"],
#board_item_list dd input[type="password"],
#board_item_list dd textarea { width: 100%; }
#board_item_list dd input[type="text"].small,
#board_item_list dd input[type="password"].small { width: 30%; }
#board_item_list dd input[type="text"],
#board_item_list dd input[type="password"],
#board_item_list dd textarea,
#board_item_list dd select { height: 25px; border: 1px solid #ddd; padding: 0 5px; box-sizing: border-box; }
#board_item_list dd textarea { height: 200px; padding: 5px; }
#board_item_list:before,
#board_item_list:after { content:""; display: block; position: absolute; width: 120px; top: 0; bottom: 0; left: 0; background: #fafafa; z-index: 0; }
#board_item_list:after { left: 50%; }
#board_item_list dl.single { width: 100%; float: none; clear: both; }
#board_item_list dl.single dd { background: #fff; }
#board_item_list dl.both { display: block; width: 100%; float: none; clear: both; }
#board_item_list dl.both dt,
#board_item_list dl.both dd { display: block; }
#board_item_list dl.both dt { width: auto; background: #fafafa; border-bottom: 1px solid #e1e1e1; text-align: left; }
#board_item_list dl.both dt:after { bottom: 0; top: auto; left: 10px; width: 150px; height: 1px; }
#board_item_list dl.both dd { padding: 10px; background: #fff; }
#board_item_list.no-top-line dl.both dd { padding-bottom: 50px; }
#board_item_list + .txt-right,
.ui-view .buttonBox { padding: 15px 0; }
@media all and (max-width: 740px) {
#board_item_list:before,
#board_item_list:after { display: none; }
#board_item_list hr { display: none; }
#board_item_list dl { display: block; width: 100%; float: none; border-bottom: 1px solid #e1e1e1; }
#board_item_list dl.single { display: flex; }
#board_item_list dl.single dd { width: 75%; }
#board_item_list dl dt,
#board_item_list dl dd { display: block; }
#board_item_list.mov dl iframe { height:300px}
#board_item_list dl dt { width: 25%; padding-bottom: 10px; padding-top: 10px; background: #eaeaea; border-bottom: 1px solid #e1e1e1; line-height: 1.3em; }
#board_item_list dl dt:after { display: none; }
#board_item_list dl dd { padding: 10px; min-height: 30px; }
#board_item_list dl.both dt { background: #eaeaea; }
/* table 버튼 */
table .ui-btn { padding: 3px 5px; border-radius: 3px; }
}
.buttonBox { padding: 20px 0 50px; text-align: right; }
.single-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 20px; background: #fff; border: 5px solid #dadbdc; box-sizing: border-box; overflow: auto; }
.single-page h1 { padding-bottom: 20px; margin-bottom: 20px; text-align: center; font-size: 18px; border-bottom: 1px solid #dadbdc; }
.single-page section fieldset { position: relative; text-align: center; }
.single-page section fieldset.check-id { max-width: 300px; margin: 0 auto; padding-right: 70px; }
.single-page section fieldset.check-id input[type="submit"] { position: absolute; top: 0; right: 0; padding: 0; height: 25px; padding: 0 20px; background: #1b84be; border: 1px solid #1378b0; color: #fff; cursor: pointer; font-size: 12px; }
.single-page section fieldset.check-id input[type="text"] { width: 100%; height: 25px; border: 1px solid #ddd; padding: 0 5px; box-sizing: border-box; }
.single-page section article { text-align: center; }
.single-page section article p { padding: 30px 0; }
.single-page section article input[type="button"] { padding: 0; height: 25px; padding: 0 20px; background: #1b84be; border: 1px solid #1378b0; color: #fff; cursor: pointer; font-size: 12px; }
/*************************************************************
Paging Style
**************************************************************/
.pageBox { margin:30px 0 20px; text-align:center; font-family:Tahoma, Geneva, '돋움', Dotum, sans-serif; font-size:1em; }
.pageBox a,
.pageBox strong { display:inline-block; padding:0 10px; height:25px; line-height:25px; color:#555; text-decoration: underline; }
.pageBox strong { color:#000}
.pageBox button { width:35px; height:35px; border:1px solid #c8cacf; }
.pageBox button.pgFirst { background-position: center 12px; }
.pageBox button.pgPrev { background-position: center -51px;}
.pageBox button.pgNext { background-position: center -115px;}
.pageBox button.pgEnd { background-position: center -178px;}
.pageBox button span {position:absolute; left:-9999px; width:0; height:0; overflow:hidden; font-size:0; line-height:0; z-index:-1;}
.pageBox span { display:inline-block; width:35px; height:35px; }
.pageBox span:hover, .pageBox span:active, .pageBox span:focus { background:#f5f6f8}
/*** Page Navi Style */
.pageNavi { padding: 24px 0px; }
.pageNavi > * { display: inline-block; position: relative; padding: 8px 13px; background: #fff; box-sizing: border-box; }
.pageNavi > *:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ccc; }
.pageNavi > strong:before { border: 4px solid #be222f; color:#be222f; }
.pageNavi > strong:hover,
.pageNavi > strong:focus,
.pageNavi > a:hover { background: #be222f; color: #ffffff; border: 0px solid #be222f; }
/*************************************************************
File Box Style
**************************************************************/
.fileBox { position: relative; border: 4px solid #ddd; margin: 10px 0 30px; padding: 15px; background: #fafafa; }
.fileBox>span {display:block;word-break:break-word;}
.fileBox p { display: block; position: relative; padding: 3px 10px; margin-top: 10px; background: #fff; border: 1px solid #eaeaea; }
.fileBox input[type="file"] { background: #fff; border: 1px solid #eaeaea; width: 100%; box-sizing: border-box; }
.fileBox em { display: block; position: relative; margin-right: 90px; }
.fileBox #addFile { position: absolute; right: 15px; top: 15px; }
.fileList li { padding: 3px 0; }
.fileList li:first-child { padding-top: 0; }
/*************************************************************
Social Comment Style
**************************************************************/
.sCommentTop { overflow:hidden; height:60px; padding:10px 25px; position:relative; border-bottom:1px solid #d4d6db; }
.sCommentTop .title { display:inline-block; padding-top:10px; font-size:16px; font-weight:bold}
.socialMediaWrap { border:4px solid #e2e4e8; /*margin-left:60px; */ margin-bottom: 50px; }
.socialMediaWrap * { box-sizing:border-box;}
.sCommentBlock { background:#f6f6f7; padding-bottom:20px; border-bottom:1px solid #d4d6db;}
.sCommentBlock .sCommentTop .logSNSWrap { float:right;}
.sCommentBlock .sCommentTop .logSNSWrap p { display: none; }
.sCommentBlock .logSNS { float:left;}
.sCommentBlock .logSNS li { position:relative; float:left; width:40px; height:40px; }
.sCommentBlock .logSNS button { width:40px; height:40px; background:url(/resources/images/cmm/icon_social_cmt_full.png) no-repeat; border:3px solid rgba(255, 255, 255, 0); overflow: hidden; text-indent: -999px; }
.sCommentBlock .logSNS button:hover, .socialMediaWrap .logSNS button:focus, .socialMediaWrap .logSNS li.active button { width:40px; height:40px; border:3px solid #b4b7bd; border-radius:50%;}
.sCommentBlock .logSNS li.log_active button { border:3px solid #ec3636; border-radius:50%;}
.sCommentBlock .logSNS li.log_active:before { content:""; display:block; width:23px; height:20px; position:absolute; top:-5px; right:-5px; background:url(/resourceS/images/cmm/active.png) right 0;}
.sCommentBlock .logSNS .bs button { background-position: -239px 2px; }
.sCommentBlock .logSNS .fb button { background-position: 2px 2px; }
.sCommentBlock .logSNS .tw button { background-position: -38px 2px;}
.sCommentBlock .logSNS .kkt button { background-position: -78px 2px;}
.sCommentBlock .logSNS .nbg button { background-position: -118px 2px;}
.sCommentBlock .logSNS .gp button { background-position: -157px 2px;}
.sCommentBlock .logSNSWrap .btn-logout { display: block; position: relative; float: left; width: 40px; height: 40px; overflow: hidden; text-indent: -999px; background:url(/resources/images/cmm/icon_social_cmt_full.png) no-repeat -198px 2px; border:3px solid rgba(255, 255, 255, 0); }
.sCommentBlock .logSNSWrap .btn-logout:hover { border:3px solid #b4b7bd; border-radius:50%;}
.sCommentBlock .sCommentBlockInner { padding:20px 25px 0;}
.sCommentBlock .sCommentBlockInner .sCommentWrite { overflow:hidden; margin-top:10px;}
.sCommentBlock .sCommentBlockInner .sCommentWrite .socialID { padding:10px 20px; background:#61646c; color:#fff; font-weight:bold; border-radius:5px 5px 0 0;}
.sCommentBlock .sCommentBlockInner .sCommentWrite textarea { margin-bottom:5px; border-radius:0 0 5px 5px; border-top:none;}
.sCommentBlock .sCommentBlockInner .sCommentWrite .textCount { float:right; font-size:12px;}
.sCommentBlock .sCommentBlockInner .btnArea { overflow:hidden; margin:0}
.socialMediaWrap .sListBlock { overflow:hidden}
.socialMediaWrap .sListBlock .alignCmt { float:right; margin-top:15px;}
.socialMediaWrap .sListBlock .alignCmt li { float:left; padding:0 8px; background:url(/resourceS/images/cmm/board/line_th.gif) no-repeat left 0 ; }
.socialMediaWrap .sListBlock .alignCmt li:first-child { background:none;}
.socialMediaWrap .sListBlock .sCommentList { position:relative; overflow:hidden; margin:15px 25px 20px; padding-top:15px; border-top:1px dashed #d4d6db}
.socialMediaWrap .sListBlock .sCommentTop + div.sCommentList { margin-top:0; border:none;}
.socialMediaWrap .sListBlock .sCommentList .socialID_2 { float:left; width:120px; margin-top:15px; padding-right:20px; font-weight:bold; color:#000;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt { float:left; padding-left:120px; margin-left:-120px; width:100%; _border:1px solid}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm { float:right}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm li { float:left; margin:0 3px; }
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm li button { display:inline-block; height:30px; padding:0 0 0 30px; border-radius:5px;font-family: 'Nanum Gothic', '나눔고딕','Malgun Gothic', '맑은고딕', 'Dotum', '돋움', 'Arial', 'sans-serif';
font-size:12px; cursor:pointer; background:url(/resourceS/images/cmm/icon_thum.png) no-repeat 7px -48px #5e626b; color:#fff;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm li:first-child button { background-position: 7px 6px;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm li button i { display:inline-block; margin-left:5px; padding:0 10px; background:#fff; height:30px; border:1px solid #5e626b; border-width:1px 1px 1px 0; border-radius:0 5px 5px 0; color:#5e626b;
line-height:28px; font-weight:bold; font-size:11px;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt time { display:inline-block; margin-top:15px; font-size:12px;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt time span { padding-right:10px;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt time span:first-child { margin-right:10px; border-right:1px solid #d4d6db}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt p.contText { margin:15px 0;}
@media all and (max-width:1024px) {
.socialMediaWrap { margin-left:0; }
}
@media all and (max-width:640px) {
/* 소셜댓글 */
.sCommentTop { height:auto; }
.sCommentTop .title { padding-bottom: 10px; }
.socialMediaWrap .sCommentBlock .sCommentTop .logSNSWrap { float:none; }
.socialMediaWrap .sCommentBlock .sCommentTop .logSNSWrap p { position:absolute; top:10px; right:20px;}
.socialMediaWrap .sCommentBlock .logSNS { float: none; }
.socialMediaWrap .sListBlock .alignCmt { float:none; margin-top:15px;}
.socialMediaWrap .sListBlock .sCommentList .socialID_2 { float:none; width:100%; padding-top:0;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt { float:none; padding-left:0; margin-left:0; width:100%;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm li:first-child a:hover span { position: absolute; right:35px; top:85px;}
.socialMediaWrap .sListBlock .sCommentList .sCommentTxt .iconRcm li a:hover span { position: absolute; right:0; top:85px;}
}
#comment { display: block; position: relative; width: 100%; overflow: hidden; margin-top: 20px; }
#comment label[for="comments"] { display: block; position: relative; padding: 0 15px; font-weight: bold; line-height: 40px; border-top: 2px solid #49a5bf ; }
#comment textarea { display: block; border: 2px solid #e1e1e1; box-sizing: border-box; width: 100%; height: 100px; margin: 0; }
#comment input[type="submit"] { display: block; position: relative; width: 100%; margin: 0; padding: 0 15px; font-weight: bold; line-height: 30px; background: #aaabac ; color: #fff; border: none; margin-bottom: 10px; }
#comment table { width: 100%; }
#comment table tr td { padding: 10px; border: 1px solid #e1e2e3; }
#comment table tr td:first-child { background: #f1f2f3; width: 100px; text-align: left; border: 1px solid #e1e2e3; }
@media all and (max-width: 640px) {
#comment table,
#comment table tbody,
#comment table tr,
#comment table td,
#comment table th,
#comment table tr td:first-child { display: block; position: relative; width: 100%; box-sizing: border-box; max-width: 100%; text-align: left; }
#comment table tr td:first-child { margin-bottom: 5px; }
#comment table tr { padding-bottom: 20px; }
}
.bullet { display: inline-block; position: relative; font-size: 11px; font-family: 'dotum'; overflow: hidden; text-indent: -999px; width: 18px; line-height: 18px; border-radius: 3px; vertical-align: middle; margin-right: 3px; margin-left: 5px; }
.bullet:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: 0; text-align: center; color: #fff; }
.bullet.online:before { content: "온"; background: #ff822b; }
.bullet.offline:before { content: "오"; background: #535353; }
.bullet.ready:before { content: "대"; background: #49a5bf; }
.bullet.all:before { content: "정"; background: #a40000; }
.ui-box { position: relative; margin-right: 1%; margin-bottom: 2%; border: 1px solid #d8dada; padding: 25px; background: #fff; width: 48%; display: inline-flex; }
.ui-box h4 { position: absolute; display: block; margin: 0 auto; width:100%;}
.ui-box p { width:100%; margin-top: 45px;}
.ui-box.small { padding: 5px; margin-bottom: 10px; border-radius: 3px; }
.ui-box.gray { font-family: 'Dotum'; color: #666; }
.ui-box.gray strong { color: #f26c00; }
.ui-list-title { display: block; font-weight: 800; margin-bottom: 5px; font-size: 14px; }
.ui-progress { display: block; position: relative; overflow: hidden; }
.ui-progress li p span { display: inline-block; position: relative; line-height: 1.2em; vertical-align: middle; word-break: break-all; }
.ui-progress.col-3 li { width: 33.33%; }
@media all and (min-width: 841px) {
.ui-progress { padding-right: 25px; }
.ui-progress li { position: relative; float: left; margin-right: -25px; padding-left: 25px; z-index: 0; }
.ui-progress li:before { content: ""; display: block; position: absolute; top: 0px; left: 0px; border: 25px solid transparent; border-top-color: #e1e1e1; border-bottom-color: #e1e1e1; }
.ui-progress li.last:after { content: ""; display: block; position: absolute; top: 0px; right: -20px; border: 25px solid transparent; border-left-color: #e1e1e1; z-index: 0; }
.ui-progress li p { position: relative; border: 1px solid #e1e1e1; border-left-width: 0px; border-right-width: 0px; box-sizing: border-box; text-align: center; height: 50px; line-height: 50px; z-index: 1; padding-right: 25px; }
.ui-progress li p span { z-index: 1; }
.ui-progress li.last p { margin-right: 30px; text-indent: 0; }
.ui-progress li p:before { content: ""; display: block; position: absolute; top: 0px; left: -23px; border: 24px solid transparent; border-top-color: #fff; border-bottom-color: #fff; }
.ui-progress li.last p:after { content: ""; display: block; position: absolute; top: 0px; right: -48px; border: 24px solid transparent; border-left-color: #fff; }
.ui-progress li.on:before { border-top-color: #127b98; border-bottom-color: #127b98; }
.ui-progress li.on p:before { border-top-color: #49a5bf; border-bottom-color: #49a5bf; }
.ui-progress li.on p { color: #fff; background: #49a5bf; border-color: #127b98; }
}
@media all and (max-width: 840px) {
.ui-progress.col-3 li { position: relative; float: left; }
.ui-progress.col-3 li:before { content: ""; display: block; position: absolute; top: 50%; left: -5px; margin-top: -10px; border: 10px solid transparent; border-left-color: #e1e1e1; }
.ui-progress.col-3 li:first-child:before { display: none; }
.ui-progress.col-3 li p { margin: 0 20px; height: 80px; line-height: 80px; text-align: center; border: 1px solid #e1e1e1; border-radius: 3px; }
.ui-progress.col-3 li.on p { border-color: #127b98; color: #fff; background: #49a5bf; }
.ui-progress.col-3 li p span { padding: 0 10px; }
.ui-box {width:100%; padding: 15px;}
}
@media all and (max-width: 588px) {
.ui-progress.col-3 li p { margin: 0 10px; }
.ui-progress.col-3 li p span { padding: 0 5px; }
}
#survey_page { }
#survey_page header { background: #49a5bf; padding: 10px 15px; text-align: center; color: #fff; font-size: 18px; }
#survey_page .survey-tab { position: relative; padding: 10px 0; overflow: hidden; }
#survey_page .survey-tab li { position: relative; float: left; width: 25%; height: 50px; text-align: center; }
#survey_page .survey-tab li:before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100%; }
#survey_page .survey-tab li:after { content: ""; display: block; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border: 1px solid #c1c1c1; background: #e1e2e3; }
#survey_page .survey-tab li a { display: inline-block; position: relative; width: 95%; vertical-align: middle; z-index: 2; text-decoration: none; }
#survey_page .survey-tab li a:hover { font-weight: 800; }
#survey_page .survey-tab li.on:after { background: #49a5bf; border-color: #284580; }
#survey_page .survey-tab li.on a { color: #fff; }
#survey_page .tabArea .ui-item { display: none; background: #fff; padding: 20px; border: 1px solid #e1e2e3; }
#survey_page .tabArea .ui-item.on { display: block; }
#survey_page .ui-descript { line-height: 1.5em; padding-bottom: 30px; border-bottom: 1px solid #e1e2e3; margin-bottom: 30px; }
#survey_page .ui-item input[type="text"],
#survey_page .ui-item input[type="password"],
#survey_page .ui-item textarea { width: 100%; }
#survey_page .ui-item input[type="text"],
#survey_page .ui-item input[type="password"],
#survey_page .ui-item textarea,
#survey_page .ui-item select { height: 25px; border: 1px solid #ddd; padding: 0 5px; box-sizing: border-box; }
#survey_page .ui-item textarea { height: 200px; padding: 5px; }
#survey_page .ui-item dl { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed #e1e2e3; }
#survey_page .ui-item dt { position: relative; margin-bottom: 5px; padding-left: 20px; color: #333; }
#survey_page .ui-item dt:after { content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -2px; width: 13px; height: 4px; background: #49a5bf; }
#survey_page .btnBox { text-align: center; padding: 10px 0 20px; }
#survey_page .btnBox input[type="button"] { cursor: pointer; width: 100%; box-sizing: border-box; line-height: 40px; color: #fff; text-align: center; border: none; background: #49a5bf; }
/*************************************************************
Category Style
**************************************************************/
.ui-page-total-category { display: block; position: relative; margin-bottom: 20px; overflow: hidden; margin: 0 10px; }
.ui-page-total-category > ul { display: none; }
.ui-page-total-category li { display: inline-block; line-height: 20px; }
.ui-page-total-category li a { display: block; position: relative; line-height: 20px; /*margin: 3px 0; border-radius: 3px; padding: 0 10px; color: #333333; text-decoration: none;*/border:5px solid #bcbcbc; border-bottom:0!important; border-radius:0; color:#0b0000; font-size:20px; font-weight:400!important; height:100%; letter-spacing: -0.05em ; padding: 10px 21px ; }
.ui-page-total-category li.on a { /*background: #fff; color: #333;*/border:5px solid #be222f; background-color:#be222f; color:#ffffff; }
.ui-page-total-category > div { padding: 0; margin: 0; border-radius: 2px; }
/*.ui-page-total-category .box-0 { background: #49a5bf; }*/
.ui-page-total-category .box-1 { background: #7dc6db; }
.ui-page-total-category .box-2 { background: #609332; }
.ui-page-total-category .box-3 { background: #d9dada; }
.ui-page-total-category .box-4 { background: #f2f2f2; }
.ui-page-total-category .box-4 li a { color: #333; }
.ui-date-info { text-align: center; }
.ui-date-info p { display: inline-block; position: relative; vertical-align: middle; padding: 30px 0; }
.ui-date-info p > a { display: block; position: absolute; left: 0; right: 0; height: 30px; line-height: 30px; }
.ui-date-info p span { display: block; padding: 8px 10px; border: 1px solid #d1d1d1; background: #fff; font-size: 15px; border-radius: 5px; min-width: 100px; text-align: center;}
.ui-date-info p .btn-prev { opacity: 0.5; top: 0; text-indent: -999px; overflow: hidden; background: url('/resources/images/cmm/ico_date_up.png') no-repeat 50% 50%; }
.ui-date-info p .btn-next { opacity: 0.5; bottom: 0; text-indent: -999px; overflow: hidden; background: url('/resources/images/cmm/ico_date_down.png') no-repeat 50% 50%; }
.ui-date-info p .btn-prev:hover,
.ui-date-info p .btn-next:hover { opacity: 1.0; }
/* 미리보기버튼추가 2021-11 */
.p-button{display:inline-block;margin:2px 0;padding:7px 20px 7px;border:1px solid #989898;border-radius:4px;line-height:inherit;text-align:center;font-weight:300;vertical-align:middle;text-decoration:none;transition-property:background, box-shadow;transition-duration:.3s;white-space:nowrap;box-sizing:border-box;-webkit-appearance:none;}
.p-button:active,.p-button:hover{text-decoration:none}
.p-button:hover{box-shadow:0 0 20px rgba(82,82,82,0.15);}
.p-attach_preview{font-size:15px; margin:0 0 0 12px; padding:0 10px; border-width:1px;border-color:#989898;border-radius:3px;box-sizing:border-box;background-color:#fff; line-height:30px;color:#5d5d5d;text-align:center;font-weight:300;transition-property:color, border, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:ease-in-out;vertical-align:middle;}
.p-attach_preview:after{content: ''; display:inline-block; position:relative; width:16px; height:16px; margin-left:2px; vertical-align:-2px; background:url(/resources/images/icon/p-attach_preview.png) no-repeat;}
.p-attach_preview:after{content: '';background-position:left 71.42%;}