@charset 'utf-8';
@import url(/css/fonts.css);

/* -- date : 2020-01-06 Soobin Lee -- */

/* z-index 설정
기본 화면 : none / 0
GNB / 기타 메뉴 및 header 영역이 화면 위에 위치할 경우: 100
기타 event 적 요소 (select / calendar 등) : 500
레이어팝업 : 1000
*/

/*##  common  -------------------------------------------------------##*/
[v-cloak] {display: none !important;}

* {letter-spacing: -0.5px; outline: 0; font-family:'Noto Sans KR','Nanum Gothic','맑은 고딕', 'malgun Gothic','돋움',Dotum,AppleGothic,sans-serif;}
body {color: #333; font-size:14px; word-break: break-all;}
.hide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter:alpha(opacity=0); zoom:1; text-indent:-9999px; z-index:0; overflow:hidden; }
caption { height: 1px; overflow: hidden; line-height: 0; margin-top: -1px; color: transparent; }
.skipNav {display: none;}
strong {font-weight: 700;}

a {display: inline-block;}

h4 {                                                                                                                                                                                                                                                                                                                                                                                     
	margin: 20px 0 10px;
	padding: 0 16px;
	line-height: 28px;
	font-size: 17px;
}
h5 {
	margin: 15px 0 6px;
	padding: 0 16px;
	line-height: 26px;
	font-size: 17px;
}
.boardView+h5 {
	margin-top: 25px;
}


h5 > span {
	font-size: 13px;
}

h6 {
	line-height: 26px;
	font-size: 17px;
}

.fl {float: left !important;}
.fr {float: right !important;}
.tc {text-align: center !important;}
.tl {text-align: left !important;}
.tr {text-align: right !important;}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"] {
	height: 35px;
	padding: 0 8px;
	border: 1px solid #ccc;
	border-radius: 2px;
	font-size: 14px;
	background: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input.full {width: 100%;}


textarea:disabled,
select:disabled,
input[type="text"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled {
	color: #888;
	background: #e5e5e5;
}

input::placeholder,
textarea::placeholder {
  color: #888;
}

textarea {
	width: 100%;
	height: 140px;
	padding: 8px;
	line-height: 20px;
	border: 1px solid #ccc;
	border-radius: 2px;
	line-height: 20px;
	font-size: 14px;
	background: #fff;
}
.selectBox {
	position: relative;
	display: inline-block;
	min-width: 80px;
}
.selectBox:before {
	content:" ";
	position: absolute;
	top: 50%;
	right: 6px;
	border-top: 7px solid #555;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	margin-top: -3px;
}
select {
	width: 100%;
	height: 35px;
	padding: 0 18px 0 4px;
	border: 1px solid #ccc;
	border-radius: 2px;
	font-size: 14px;
	background: #fff;
	-webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand  {
	display: none;
}
.selectBox > a {
	position: relative;
	width: 100%;
	height: 35px;
	line-height: 33px;
	padding: 0 18px 0 4px;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #fff;
}
.selectBox > a:before {
    content: " ";
    position: absolute;
    top: 13px;
    right: 6px;
    width: 0;
    height: 0px;
    vertical-align: top;
    line-height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 7px solid #333;
}
.selectBox > ul {
	display: none;
	position: absolute;
	top: 37px;
	right: 0;
	padding:  4px 0;
	max-height: 200px;
	overflow-y:auto;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #fff;
	z-index: 10;
}
.selectBox > ul li {
    display: inline-block;
    width: 100%;
	min-width: 140px;
	padding: 0 10px 0 7px;
	line-height: 31px;
	text-align: left;
	font-weight: 400;
	cursor: pointer;
}
.selectBox > ul li label {
	display: block;
	cursor: pointer;
}
.selectBox > ul li label i {
	float: right;
    margin-top: 8px;
}
.radio input[type="radio"],
.checkBox input[type="checkbox"] {
	display:none;
}
.radio input[type="radio"]::-ms-expand,
.checkBox input[type="checkbox"]::-ms-expand  {
	display: none;
}
.radio > span,
.checkBox > span {
	line-height: 21px;
	padding-left: 6px;
}
.radio input[type="radio"]+i,
.checkBox input[type="checkbox"]+i {
	display: inline-block;
	width: 15px;
	height: 15px;
	vertical-align: -2px;
	background: url(/images/bg/bg_checkbox.png) 0 0 no-repeat;
}
.checkBox input[type="checkbox"]:checked+i {
	background: url(/images/bg/bg_checkbox.png) -15px 0 no-repeat;
}
.radio input[type="radio"]+i {
	background: url(/images/bg/bg_radio.png) 0 0 no-repeat;
}
.radio input[type="radio"]:checked+i {
	background: url(/images/bg/bg_radio.png) -15px 0 no-repeat;
}
.inpRCBox > label {
	padding-right: 15px;
}

/* text */
.em { color: #e91b4d !important; }
.infoTxt {
	display: inline-block;
	line-height: 25px;
}
.infoTxt:before {
    content: " ";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    background: url(/images/icon/icon_msg.png) 0 0 no-repeat;
}

.noteTxtBox {
	margin: 16px 0 10px;
	padding: 0 16px;
}

/* icon */
.icon {
	display: inline-block;
}
.icon.notice {
	width: 18px;
	height: 13px;
	text-indent: -99999px;
	background: url(/images/icon/icon_notice.png) 0 0 no-repeat;
	background-size: 17px 13px;
}
.icon.new {
	padding:  0 2px;
	line-height: 13px;
	vertical-align: middle;
	color: #f7295b;
	font-size: 11px;
	font-weight: 700;
}

/* button */
button {
	display: inline-block;
	border-radius: 2px;
	background: transparent;
	transition: all .3s;
}
.btnArea {
	position: relative;
/* 	min-height: 43px; */  
	margin-top: 16px;
	padding: 0 16px;
	text-align: center;
	font-size: 0;
}
.btnArea button { /* large */
	 min-width: 80px;
	 height: 43px;
	 padding: 0 13px; 
	 font-size: 14px;
	 font-weight: 700;
     letter-spacing: -1.5px;
}

.groupBox .btnArea button,
.clubCon .clubBoard .btnArea button,
.noteBox button,
.searchBox button,
 table td button,
 .thumbList ul li button { /* medium */
 	min-width: 70px;
 	height: 35px;
 	padding: 0 11px; 
 	font-size: 14px;
 	font-weight: 700;
 }
 
.noteBox .guide .titleBox > button,
 .btnArea.frqc button,
 .frqcStreamMap > .btnArea  button,
  .topArea button,
 .comList li .box button,
 .feedBox .findBox > button,
 h5 > button,  .btnWrite,
.search .fl button, .feed .box .txtBox  button, 
.memberList li > div > button,
.boardList li button { /* small */
	min-width: 37px;
	height: 23px;
	line-height: 21px;
	padding: 0 5px;
	font-size: 14px;
	font-weight: 400;
}


.fr-toolbar .fr-command.fr-btn, 
.fr-popup .fr-command.fr-btn {min-width: 0px !important;}
 
 .searchBox button {
 	vertical-align: middle; 
 }

 .btnArea.frqc {
 	margin: 0;
 	min-height: 0;
 	padding: 16px 16px 0;
 	text-align: right;
 }
 
.btnArea button+button {
	margin-left: 6px;
} 
.search .fl button+button {
	margin-left: 4px;
} 
h5 > button {
	margin-left: 5px;
	vertical-align: 3px;
}  
h5 > button.fr {
	margin-top: 5px;
}
.searchBox .btnReset, .btnDelete, .btnWrite,
.btnNormal {
	border: 1px solid #555;
	background: #fff;
}
/* .searchBox .btnReset:active, .btnDelete:active, .btnWrite:active,
.btnNormal:active {
	color: #fff;
	background: #555;
	transition: all .3s;
} */
.searchBox .btnSearch,
.btnEmps {
	color: #fff;
	border: 1px solid #f7295b;
	background: #f7295b;
}
/* .searchBox .btnSearch:active,
.btnEmps:active {
	border-color: #b81b3e;
	background: #b81b3e;
	transition: all .3s;
} */
.btnEmps.disable {
	color: #f499aa !important;
	border-color: #fedfe7 !important;
	background: #fedfe7 !important;
	cursor: default;
}
.btnApply,
.btnSilver {
	border: 1px solid #e5e5e5;
	background: #e5e5e5;
}
/* .btnApply:active,
.btnSilver:active {
	color: #fff;
	border-color: #555;
	background: #555;
	transition: all .3s;
} */
.btnNormal.disable,
.btnApply.disable,
.btnSilver.disable {
	color: #aaa;
	border: 1px solid #e5e5e5;
	background: #e5e5e5;
	cursor: default;
}
.btnCalendar,
.btnGray {
	color: #fff;
	border: 1px solid #555;
	background: #555;
}
/* .btnCalendar:active,
.btnGray:active {
	color: #fff;
	border-color: #333;
	background: #333;
	transition: all .3s;
} */
.btnDelete:before {
	content:" ";
	display: inline-block;
	width: 14px;
	height: 15px;
	margin-right: 10px;
	background-image: url(/images/btn/btn_delete.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
/* .btnDelete:active:before {
	background-position: -14px 0;
} */
.btnWrite:before {
	content:" ";
	display: inline-block;
	width: 12px;
	height: 14px;
	margin-right: 5px;
	vertical-align: -1px;
	background: url(/images/btn/btn_write.png) 0 0 no-repeat;
	background-size: 100%;
}

/* search */
.search {
	width: 100%;
	padding: 0 16px;	
	margin-bottom: 12px;
}
.search:first-child {
	margin-top: 16px;
}
#boardListDiv .search,
#tabContentsDiv .search {
	margin-top: 0;
}



.search .btnMn {
	margin-top: 10px;
}
.search.write .inp {
	width: calc(100% - 85px);
}
.search.write  .btnWrite {
	float: right;
	margin-top: 10px;
}
.topArea .selectBox,
.search .selectBox {
	display: inline-block;
	margin-left: 6px;
    padding-right: 15px;
	border-bottom: 2px solid #ddd;
}
.topArea .selectBox select,
.search .selectBox select {
	border: none;
	border-radius: 0px;
	height: 31px;
}
.search .inp {
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: left;
	border-bottom: 2px solid #ddd;
}
.search .inp label {
	position:absolute; top:0; left:0;
	width: 1px;
	height: 1px;
	text-indent: -99999px;
	visibility: hidden;
}
.search .inp input[type="text"] {
	width: 100%;
	height: 31px;
	padding-right: 43px;
	border: none;
}
.search .inp .btnSearch {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 31px;
	padding: 0;
	text-indent: -99999px;
	background: url(/images/btn/btn_search_black.png) center center no-repeat;
	background-size: 14px 14px;
}
.searchBox {
	padding: 16px;
	background: #f5f5f5;
}
.searchBox .itemBox {
	display: inline-block;
	width: 100%;
}
.searchBox .itemBox > div  {
	float: left;
	width: calc(50% - 9px);
	margin-bottom: 10px;
	margin-left: 18px;
}
.searchBox .itemBox > .item.period,
.searchBox .itemBox > .item.period+div,
.searchBox .itemBox > .item:nth-child(2n+1) {
	margin-left: 0;
}
.searchBox .itemBox > .item.period {
	width: 100%;
}
.searchBox .itemBox > div.wd100 {
	width: 100%;
	margin-bottom: 0;
	margin-left: 0;
}
.searchBox .itemBox > div > label {
	position: relative;
	display: inline-block;
	width: 72px;
	padding-right: 17px;
	line-height: 35px;
	text-align: right;
	font-size: 14px;
}
.searchBox .itemBox > div > label:before {
	content:" ";
	position: absolute;
	top: 50%;
	right: 8px;
	height: 12px;
	margin-top: -6px;
	border-left: 1px solid #ccc;
}
.searchBox .itemBox > .item > input[type="text"], 
.searchBox .itemBox > div .selectBox {
	vertical-align: top;
	min-width: 0;
	width: calc(100% - 75px);
    text-align: left;
}
.searchBox .itemBox > .year .selectBox {
	width: 64px; 
}
.searchBox .itemBox > div.wd100 .selectBox {
	width: 80px !important;
}
.searchBox .itemBox > div .inpPeriod {
	display: inline-block;
    vertical-align: top;
}
.searchBox .itemBox > div .inpPeriod > span {
	vertical-align: -9px;
}
.searchBox .itemBox > div input {
	vertical-align: top;
}
.searchBox .inp {
	position: relative;
	width: 100%;
}
.searchBox .itemBox > div .inp {
    display: inline-block;
    width: calc(100% - 158px);
    vertical-align: top;
}
.searchBox .itemBox+.inp {
	margin-top: 2px;
}
.searchBox .inp label {
	position:absolute; top:0; left:0;
	width: 1px;
	height: 1px;
	text-indent: -99999px;
	visibility: hidden;
}
.searchBox .inp input {
	width: 100%;
}
.searchBox > .btnArea {
	display: inline-block;
	width: 100%;
	margin-top: 10px;
	min-height: 0;
	padding: 0;
	text-align: right;
}
.searchBox .btnArea button+button {
	margin-left: 4px;
}
.searchBox .btnArea .btnReset {
	float: left;
    min-width: 0;
    width: 60px;
	padding: 0;
    margin-left: 0;
	border: none;
	background: none;
}
.searchBox .btnArea button:before {
	content:"";
	display: inline-block;
	margin-right: 6px;
}
.searchBox .btnSearch:before {
	width: 14px;
	height: 14px;
	vertical-align: -1px;
	background: url(/images/btn/btn_search_white.png) 0 0 no-repeat;
	background-size: 14px 14px;
}
.searchBox .btnReset:before {
	width: 13px;
	height: 15px;
	vertical-align: -1px;
	background: url(/images/btn/btn_reset_black.png) 0 0 no-repeat;
	background-size: 13px 15px;
}
.searchBox .btnReset:active:before {
	background: url(/images/btn/btn_reset_white.png) 0 0 no-repeat;
	background-size: 13px 15px;
}
.searchBox .btnCalendar {
	margin-left: 10px !important;
}
.searchBox .btnCalendar:before {
	width: 14px;
	height: 15px;
	vertical-align: -1px;
	background: url(/images/btn/btn_calendar.png) 0 0 no-repeat;
}
.searchBox  .checkArea {
	margin-top: 6px;
}
.searchBox  .checkArea .checkBox > span {
	color: #e91b4d;
}
.searchBox label .selectBox {
	min-width: 75px;
	padding: 0 13px 0 0 ;
	border: none;
	background: transparent;
}
.searchBox label .selectBox:before {
	right: 0;
	border-top-color: #f7295b;
}
.searchBox label select {
	position: relative;
    min-width: 0px;
    padding: 0;
    border: none;
    border-radius: 0px;
    vertical-align: top;
    font-size: 14px;
    letter-spacing: -1px;
    background: transparent;
}
.searchBox.type2 {
	display: inline-block;
	width: 100%;
}
.searchBox.type2 .itemBox {
	float: left;
	width: 157px;
}
.searchBox.type2 .itemBox+.inp {
    float: left;
    margin-top: 0;
    margin-left: 2px;
    width: calc(100% - 159px);
} 
.searchBox.type2 .itemBox > div .selectBox {
	width: 80px;
}
.searchBox.type2 .itemBox > div {
	width: 100%;
	padding-right: 0px;
	margin-bottom: 0;
}
.searchBox.type2 .itemBox > div .selectBox > a,
.searchBox.type2 .itemBox > div .selectBox select {
	width: 100%;
}

.checkSrch {
    position: relative;
    margin-top: 4px;
    margin-bottom: 25px;
    display: inline-block;
    width: 100%;
    padding: 44px 16px 14px 16px;
/*     border: solid #ddd; */
/*     border-width: 1px 0px; */
}
.checkSrch > span {
    position: absolute;
    top: 16px;
    left: 16px;
    line-height: 21px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
}
/* .checkSrch > span:before {
    content: " ";
    position: absolute;
    top: 50%;
    right: -12px;
    height: 12px;
    margin-top: -6px;
    border-left: 1px solid #ccc;
} */
.checkSrch .inpRCBox {
	display: inine-block;
	width: 100%;
}
.checkSrch .inpRCBox > label {
	float: left;
	display: inline-block;
	width: 50%;
	padding-right: 5px;
	margin-bottom: 4px ;
	font-size: 13px;
}
.checkSrch .inpRCBox > label:first-child {
	width: 100%;
}
.checkSrch .inpRCBox > label:first-child > span {
	font-weight: 700;
}



.fileList > li {
	line-height: 22px;
	padding-left: 22px;
	background: url(/images/icon/icon_file.png) 0 2px no-repeat;
}
.fileList > li a:active {
	text-decoration: underline;
}
.fileList > li.noData {
	padding-left: 0;
	color: #888;
	background: none;
}
.findBox button {
	margin-right: 15px;
}
.findBox .list {
	display: inline-block;
    vertical-align: top;
}
.findBox .list  > span {
	display: inline-block; 
	line-height: 21px;
	margin-top: 7px; 
	padding-right: 15px; 
	vertical-align: top;
	font-size: 14px;
}
.findBox .list  > span:last-child {
	padding-right: 0;
}
.findBox .list .btnDel {
	display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    text-indent: -9999px;
    vertical-align: -2px;
	background: url(/images/btn/btn_del_mini.png) 0 0 no-repeat; 
}

/*##  layout  -------------------------------------------------------##*/
#wrap.intro {
	padding-bottom: 0;
}

#header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 57px;
	border-bottom: 1px solid #e5e5e5;
	z-index: 300;
}
#header.main {
	position: absolute;
}

#header > .headerWrap {
	position: relative;
	height: 100%;
	background: #fff;
	padding: 0 52px;
	text-align: center;
}
#header.main {
	border-bottom-color: transparent;
}
#header.main.bg {
	position: fixed;
	border-bottom-color: #e5e5e5;
}
#header.main > .headerWrap {
	background: transparent;
	transition: all 0.3s;
}
#header.main.bg > .headerWrap {
	background: #fff;
}
#header > .headerWrap h1 {
	display: inline-block;
    height: 100%;
	padding: 18px 0;
}
#header > .headerWrap h1 img {
	height: 20px;
}
#header > .headerWrap .btnMenu {
	position: absolute;
	top: 0;
	left: 0;
	width: 52px;
	height: 56px;
	font-size: 0;
	background: url(/images/btn/btn_header_menu.png) center center no-repeat;
	background-size: 20px 17px;
}
#header > .headerWrap .btnPush {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 56px;
	font-size: 0;
	background: url(/images/btn/btn_header_push.png) center center no-repeat;
	background-size: 17px 20px;
}
#header > .headerWrap .btnPush .badge {
	position: absolute;
	top: 10px;
	right: 24px;
    display: inline-block;
    min-width: 15px;
    height: 15px;
    padding: 0 5px;
    line-height: 14px;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    background: #f7295b;
}
#header > .headerWrap .btnQr {
	position: absolute;
	top: 14px;
	right: 50px;
	width: 28px;
	height: 28px;
	font-size: 0;
	background: url(/images/btn/btn_header_qr.png) center center no-repeat;
	background-size: 20px 20px;
}

#gnbWrap {
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
    height: 100%;
	min-height: 100vh;
	z-index: 1000;
	transition: left .3s;
}
#header.open #gnbWrap {
	left: 0;
}
#header:before {
	content:" ";
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;
	visibility:hidden;
	opacity: 0;
	z-index: 900;
	transition: opacity .7s;
}
#header.open:before {
	visibility:visible;
	opacity: 0.5;
}
#gnbWrap > .box {
	width: 90%;
    height: 100%;
    min-height: 100vh;
	background: #fff;
}
#gnbWrap > .box .user {
 position: relative;
 padding: 18px 56px 17px;
 text-align: center;
 background: #9bdcb7;
}
#gnbWrap > .box .user p {
	line-height: 21px;
	color: #999;
	font-size: 15px;
}
#gnbWrap > .box .user p > span {
	color: #fff;
}
#gnbWrap > .box .user .btnHome {
	position: absolute;
	top: 0;
	left: 0;
	width: 53px;
	height:100%;
	font-size: 0;
	background: url(/images/btn/btn_home.png) center center no-repeat;
	background-size: 22px 20px;
}
#gnbWrap > .box .user .btnClosed {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 100%;
	font-size: 0;
	background: url(/images/btn/btn_gnb_closed.png) center center no-repeat;
	background-size: 16px 16px;
}
.gnb > ul {
	position: absolute;
    width: 90%;
    height: calc(100% - 56px);
	min-height: calc(100vh - 56px);
	background: #eee;
}
.gnb > ul > li > a {
	position: relative;
	width: 126px;
	padding: 59px 0 9px;
	line-height: 21px;
	border-bottom: 1px solid #e0e0e0;
	text-align: center;
	color: #767676;
	font-size: 14px;
}
.gnb > ul > li.on > a {
	background: #fff;
}
.gnb > ul > li > a:before {
	content:" ";
	position: absolute;
	top: 13px;
	left: 50%;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border-radius: 50%;
	background-color: #fff;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100%;
}
.gnb > ul > li.menu01 > a:before {
	background-image: url(/images/icon/icon_header_menu01.png);
}
.gnb > ul > li.menu02 > a:before {
	background-image: url(/images/icon/icon_header_menu02.png);
}
.gnb > ul > li.menu03 > a:before {
	background-image: url(/images/icon/icon_header_menu04.png);
}
.gnb > ul > li.menu04 > a:before {
	background-image: url(/images/icon/icon_header_menu05.png);
}
.gnb > ul > li.menu05 > a:before {
	background-image: url(/images/icon/icon_header_menu06.png);
}
.gnb > ul > li.menu06 > a,
.gnb > ul > li.menu07 > a {
	display: inline-block;
	height: 60px;
	padding: 0;
	background: url(/images/common/menu_suni.png) center center no-repeat;
	background-size: 81px 34px;
}
.gnb > ul > li.menu07 > a {
	height: 40px;
	background: url(/images/common/logo_pple.png) center center no-repeat;
	background-size: 36px 16px;
}
.gnb > ul > li.menu06 > a:before,
.gnb > ul > li.menu07 > a:before {
	display: none;
}
.gnb > ul > li.menu06.on > a,
.gnb > ul > li.menu07.on > a {
	background: transparent; 
}
.gnb > ul > li.on > a:before {
	background-color: #eee;
} 
.gnb > ul > li .twoDepth {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: calc(100% - 126px);
	height: 100%;
    overflow-y: auto;
	padding: 12px 0 0 20px;
	border-top: 1px solid #e5e5e5;
	background: #fff;
}
.gnb > ul > li.on .twoDepth {
	display: block;
}
.gnb > ul > li .twoDepth > li  {
	position: relative;
}
.gnb > ul > li .twoDepth > li > a {
	display: block;
	padding: 11px 40px 12px 0;
	line-height: 26px;
	border-top: 1px solid #eee;
	font-size: 15px;	
}
.gnb > ul > li .twoDepth > li:first-child > a {
	border-top: none;
}
.gnb > ul > li .twoDepth > li .btnToggle {
	position: absolute;
	top: 16px;
	right: 11px;
	width: 29px;
	height: 16px;
	font-size: 0;
	background: transparent;
}
.gnb > ul > li .twoDepth > li .btnToggle:before {
	content:" ";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 6px;
	margin-left: -5px;
	margin-top: -3px;
	background: url(/images/btn/btn_gnb_two_depth.png) 0 0 no-repeat;
	background-size: 100%;
	transition: transform .3s;
}
.gnb > ul > li .twoDepth > li.on .btnToggle:before {
    transform: rotate(180deg);
} 
.gnb > ul > li .treeDepth {
	padding: 6px 0;
	border-top: 1px solid #eee;
}
.gnb > ul > li .treeDepth > li > a {
	position: relative;
	display: block;
	padding: 10px 16px 9px;
	line-height: 21px;
	color: #767676;
	font-size: 14px;
}
.gnb > ul > li .treeDepth > li > a:before {
	content:"-";
	position: absolute;
	top: 11px;
	left: 6px;
	line-height: 21px;
}

#container.sub #contents {
	padding-bottom: 30px;
}
#container .pageTit  {
    position: fixed;
    top: 57px;
    left: 0;
    width: 100%;
    padding: 0 42px;
    min-height: 37px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    z-index: 200;
}
#container .pageTit  .btnPrev {
	position: absolute;
	top: 0;
	left: 6px;
	width: 36px;
	height: 36px;
	font-size: 0;
	background: url(/images/btn/btn_page_prev.png) center center no-repeat;
	background-size: 16px 14px;
}
#container .pageTit h3 {
	display: inline-block;
	margin: 0;
	padding: 5px 0;
	line-height: 26px;
	font-size: 15px;
}
#footer {
	position:relative;	
} 
#footer .footerWrap .logo {
	margin-bottom: 15px;
	height: 14px;
}
#footer .footerWrap .logo img {
	height: 100%;
}

#quickMenu {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	border-top: 1px solid #d4d4d4;
	background: #fff;
	z-index: 200;
}
#quickMenu > ul {
	display: inline-block;
	width: 100%;
}
#quickMenu > ul > li.disabled {
	opacity: 0.5;
}
#quickMenu > ul > li.quickHome > a:before {
	background-image: url(/images/icon/icon_quick_home.png);
}
#quickMenu > ul > li.quick01 > a:before {
	background-image: url(/images/icon/icon_quick01.png);
}
#quickMenu > ul > li.quick02 > a:before {
	background-image: url(/images/icon/icon_quick02.png);
}
#quickMenu > ul > li.quick03 > a:before {
	background-image: url(/images/icon/icon_quick03.png);
}
#quickMenu > ul > li.quickMore > a:before {
	background-image: url(/images/icon/icon_quick_more.png);
}

#quickMenu > ul > li.quickHome.on > a:before {
	background-image: url(/images/icon/icon_quick_home_on.png);
}
#quickMenu > ul > li.quick01.on > a:before {
	background-image: url(/images/icon/icon_quick01_on.png);
}
#quickMenu > ul > li.quick02.on > a:before {
	background-image: url(/images/icon/icon_quick02_on.png);
}
#quickMenu > ul > li.quick03.on > a:before {
	background-image: url(/images/icon/icon_quick03_on.png);
}
#quickMenu > ul > li.quickMore.on > a:before {
	background-image: url(/images/icon/icon_quick_more_on.png);
}




#quickMenu > ul > li.on > a {
	color: #e91b4d;
}
#quickMenu > ul li.quickMore .list {
	display: none;
	position: absolute;
	bottom: 70px;
	right: 15px;
	width: 180px;
	z-index: 200;
}
#quickMenu > ul li.quickMore.on .list {
	display: block;
}
#quickMenu > ul li.quickMore .list:before {
	content:" ";
	position: absolute;
	bottom: -6px;
	right: 18px;
	margin-left: -7px; 
	border-top: 6px solid #fff;
	border-left: 7px solid transparent; 
	border-right: 7px solid transparent;
    z-index: 10;
}
#quickMenu > ul li.quickMore .list ul {
	position: relative;
	width: 100%;
	max-height: 112px;
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: 4px;
	padding: 1px 0;
	background: #fff;
	box-shadow: 0px 7px 12px rgba(0,0,0,0.3);
}
#quickMenu > ul li.quickMore .list:after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 14px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background: url(/images/bg/bg_quick_more.png) 0 0 no-repeat;
}

#quickMenu > ul li.quickMore .list li.noData {
	line-height: 20px;
	padding: 10px 20px;
}
#quickMenu > ul li.quickMore .list ul li+li {
	border-top: 1px solid #e5e5e5;
}
#quickMenu > ul li.quickMore .list ul li > a {
	display: block;
	padding: 9px 20px;
	line-height: 21px;
	text-align: left;
}
#quickMenu > ul li.quickMore .list ul li > a:active {
	background: #eee;
}

/*##  table  -------------------------------------------------------##*/
table th,
table td {
	height: 53px;
	line-height: 21px;
	vertical-align: middle;
	padding: 9px 11px;
}
table th {
	height: 43px;
	padding: 5px;
	font-weight: 700;
	text-align: center;
	background: #eff8ff;	
}
thead th {
	border-bottom: 1px solid #ccdfed;
}
tbody tr+tr th {
	border-top: 1px solid #ccdfed;
}
tbody tr+tr td {
	border-top: 1px solid #e5e5e5;
}
tbody th:first-child {
	border-left: none;
}
tbody th.borLeft {
	border-left: 1px solid #ccdfed;
}
tbody td.borLeft {
	border-left: 1px solid #e5e5e5 !important;
}
.ui-datepicker th,
.ui-datepicker td  {
	height: auto;
	background: #fff;
}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year {
    min-width: 0;
    height: 25px;
}

.boardView {
	clear: both;
	border-top: 2px solid #454545;
	border-bottom: 1px solid #555;
}
.boardView tbody th {
	padding: 9px 10px 9px 16px;
	text-align: left;
}
.boardView tbody th > span {
	display: inline-block;
}
.boardView tbody th.asterisk:after {
	content: "*";
    margin-left: 4px;
    vertical-align: middle;
	color: #d90033;
	font-size: 17px;
}
.boardView td input.pay {
	text-align: right;
	width: 150px;
}
.boardView td input.numP {
	text-align: right;
	width: 60px;
}
.boardView td input.time {
	width: 80px;
}
td input {
	width: 100%;
}
td .selectBox+input {
/* 	margin-top: 8px; */
}
.inpPeriod {
	vertical-align: top;
}
.inpPeriod > input {
	padding-right: 25px;
	width: 104px;
	background: #fff url(/images/icon/icon_datepicker.png) right center no-repeat;
	background-size: 20px 14px;
}
.inpPeriod > span {
	display: inline-block;
	padding: 0 3px;
}
.boardView td .testScore > .selectBox {
    display: block;
    width: 107px;
    margin-bottom: 6px;
}
.boardView td .testScore > label {
	display: inline-block;
	padding-right: 5px;
}
.boardView td .testScore > label+label+label {
	margin-top: 6px;
}
.boardView td .testScore > label > span {
	display: inline-block;
	width: 30px;
}
.boardView td .testScore > label > input {
	width: 77px;
}
.boardView td .info {
	display: block;
    color: #767676;
    font-size: 13px;
    line-height: 20px;
    margin-top: 9px;
}
.boardView td .selectBox {
	vertical-align: middle;
}
.boardView td .selectBox+.selectBox, 
.boardView td .selectBox+input[type="text"],
.boardView td .selectBox+.checkBox {
	margin-left: 2px;
}
.boardView td .selectBox+.checkBox {
	vertical-align: middle;
}
.boardView td.selectRecm .item {
	display: block;
	padding-right: 15px;
}
.boardView td.selectRecm .item+.item {
	margin-top: 8px;
}
.boardView td.selectRecm .item label {
	position: relative;
	line-height: 35px;
	padding-right: 24px;
}
.boardView td.selectRecm .item label:before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 12px;
    height: 12px;
    margin-top: -6px;
    border-left: 1px solid #ccc;
}
.boardView td.selectRecm .item .selectBox a {
	width: 120px;
}
.boardView td .selBtnWrap .selectBox {
    width: calc(100% - 85px);
    margin-right: 4px;
}
.boardView.vt .titBox {
	padding: 11px 16px;
	text-align: left;
}
.boardView.vt .titBox.share {
	position: relative;
	padding-right: 70px;
}
.boardView.vt .titBox strong {
	line-height: 24px;
	font-size: 16px;
}
.boardView.vt .titBox .icon.new {
	vertical-align: 1px;
}
.boardView.vt .titBox .sort {
	margin-top: 7px;
}
.boardView.vt .titBox .sort > span {
	display: inline-block;
	line-height: 23px;
	font-weight: 400;
}
.boardView.vt .titBox .sort > span+span {
	position: relative;
	margin-left: 13px;
}
.boardView.vt .titBox .sort > span+span:before {
	content: " ";
	position: absolute;
	top: 50%;
	left: -7px;
	height: 13px;
	margin-top: -7px;
	border-left: 1px solid #ccdfed;
}
.boardView.vt .titBox .sort > span.date {
	padding-left: 20px;
	background: url(/images/icon/icon_sort_date.png) 0 center no-repeat;
	background-size: 14px 13px;
}
.boardView.vt .titBox .sort > span.writer {
	padding-left: 15px;
	background: url(/images/icon/icon_sort_writer.png) 0 center no-repeat;
	background-size: 11px 13px;
}
.boardView.vt .titBox .sort > span.hit {
	padding-left: 23px;
	background: url(/images/icon/icon_sort_hit.png) 0 center no-repeat;
	background-size: 16px 10px;
}
.boardView.vt .titBox .sort > span.comment {
	padding-left: 22px;
	background: url(/images/icon/icon_sort_comment.png) 0 center no-repeat;
	background-size: 16px 14px;
}
.boardView.vt .txtBox {
	height: 200px;
	padding: 20px 16px;
	line-height: 21px;
	vertical-align: top;
}
.boardView.vt .fileBox {
	padding: 9px 16px;
}
.boardView .shareBox {
	position: absolute;
	right: 16px;
	bottom: 11px;
}
.shareBox > a {
	display: inline-block;
	min-width: 42px;
	height: 23px;
	line-height: 21px;
	padding: 0 5px;
	border: 1px solid #ddd;
	border-radius: 2px;
	text-align: center;
	font-weight: 400;
	background: #fff;
}
.shareBox > a:active {
	border-color: #e5e5e5;
	background: #e5e5e5;
}
.iconHart {
	position: relative;
    display: inline-block;
    height: 11px;
    margin-right: 6px;
    line-height: 1;
    vertical-align: 1px;
    color: #bbb;
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
}
.iconHart:before {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	color: red;
	font-family: "fontello";
	transform: scale(0);
    opacity: 0;
}
.shareBox > a.on .iconHart:before {
	transform: scale(1);
    opacity: 1;
    transition-delay: 0.2s;
    transition: all .0.3s;
}
.iconHart:after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	color: red;
	font-family: "fontello";
	transform: scale(0);
    opacity: 0;
}
.shareBox > a.on .iconHart:after {
	-webkit-animation: scaleFade 0.7s ;
	-moz-animation: scaleFade 0.7s ;
	animation: scaleFade 0.7s ;
} 

@-webkit-keyframes scaleFade {
	0% { opacity: 1;}
	100% {opacity: 0; -webkit-transform: scale(2.5);}
}

@-moz-keyframes scaleFade {
	0% { opacity: 1;}
	100% {opacity: 0; -webkit-transform: scale(2.5);}
}

@keyframes scaleFade {
	0% { opacity: 1;}
	100% {opacity: 0; -webkit-transform: scale(2.5);}
}

.table  {
	border-top: 1px solid #889aac;
	border-bottom: 1px solid #ccdfed;
	background: #fff;
}
.paging+.table {
	margin-top: 30px;
} 
.table table th {
	height: 37px;
	border-left: 1px solid #ccdfed;
	border-bottom: 1px solid #ccdfed;
}
.table table th > span {
	display: inline-block;
}
.table table td  {
	height: 43px;
	border-top: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	text-align: center;
}
.table table th:first-child,
.table table td:first-child  {
	border-left: none;
}
.table table tr:first-child td {
	border-top: none;
}
.table table td.title {
	text-align: left;
}
.table tr.myTeam td {
	color: #ff537d;
	font-weight: 700;
	background: #fef6f8;
}

/*##  list  -------------------------------------------------------##*/
.listSort {
	display: inline-block;
}
.listSort > a {
	float: left;
	position: relative;
	padding-left: 24px;
	color: #888;
	font-size: 14px;
	font-weight: 400;
}
.listSort > a+a:after {
	content: " ";
    position: absolute;
    top: 50%;
    left: 12px;
    height: 12px;
    margin-top: -5px;
    border-left: 1px solid #e5e5e5;
}
.listSort > a.on {
	color: #333;
	font-weight: 700;
}
.listSort > a.on:before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 9px;
	margin-right: 3px;
	background: url(/images/common/list_sort_on.png) 0 0 no-repeat;
}
.topArea {
	display: inline-block;
	width: 100%;
	padding: 0 16px;
	margin-bottom:10px ;
}
.lineBar+#educationDiv,
.searchBox+.topArea,
.lineBar+.topArea {
	margin-top: 20px;
}
.topArea .category {
	display: inline-block;
	padding-top: 7px;
}
.topArea .category .selectBox {
	margin-left: 0;
}
.topArea .numBox {
	display: inline-block;
	line-height: 23px;
	margin-top: 6px;
}
.topArea .numBox .boardNum {
	padding-right: 6px;
    vertical-align: top;
    line-height: 23px;
}
.topArea .numBox .boardState {
	display: inline-block;
	min-height: 21px;
    vertical-align: -5px;
}
.topArea .numBox .boardState li {
	float: left;
	 line-height: 21px;
}
.topArea .numBox .boardState li+li {
	position: relative;
	margin-left: 13px;
}
.topArea .numBox .boardState li+li:before {
    content: " ";
    position: absolute;
    top: 5px;
    left: -7px;
    height: 13px;
    border-left: 1px solid #e5e5e5;
}
.topArea .numBox .boardState li .txt {
	color: #888;
}
.topArea .numBox .boardState li .detail {
	margin-top: 3px;
}
.topArea .numBox .boardState li .detail > span {
	position: relative;
	display: block;
	line-height: 14px;
	padding-left: 9px;
	color: #888;
	font-size: 12px;
}
.topArea .numBox .boardState li .detail > span:before {
	content: "";
	position: absolute;
	top: 4px;
	left: 2px;
	width: 5px;
	height: 5px;
	border: solid #aaa;
	border-width: 0px 0px 1px 1px;
}

.listTab {
	display: inline-block;
	vertical-align: top;
	font-size: 0;
}
.listTab > a {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-left: 4px;
	border-radius: 2px;
	background-color: #e5e5e5;
	background-image: url(/images/btn/btn_list_tab.png);
	background-repeat: no-repeat;
	background-size: 200%;
}
.listTab > a.on {
	background-color: #454545;
}
.listTab > a.btnThumb {
	background-position: 0 -40px ;
}
.listTab > a.btnList {
	background-position: -40px -40px ;
}
.listTab > a.btnThumb.on {
	background-position: 0 0;
}
.listTab > a.btnList.on {
	background-position: -40px 0;
}

.applyPs,
.applyIps {
	display: inline-block;
	width: 64px;
	height: 26px;
	line-height: 24px;
	border: 1px solid #f7295b;
	border-radius: 13px;
	text-align: center;
	color: #e91b4d;
	font-size: 13px;
	background: #fff;
}
.applyIps {
	border-color: #aaa;
	color: #999;
	background: #fff;
}
.btnArea + .boardList {
	margin-top: 25px;
}
.boardList  {}
.searchBox+.boardList {
	border-top: none;
}
.boardList > ul {
	border-top: 1px solid #e5e5e5;
}
.boardList.push > ul {
	border-top: none;
}
.boardList > ul > li {
	padding: 8px 16px 16px 16px;
	border-bottom: 1px solid #e5e5e5;
}
.boardList > ul > li > p.date {
    width: 100px;
    margin: 3px auto 2px;
    line-height: 24px;
    text-align: center;
    color: #aaa;
    border-radius: 13px;
    font-size: 13px;
    background: #f5f5f5;
}
.boardList > ul > li .tbBox {
	display: table;
	width: 100%;
	padding-top: 8px;
}
.boardList > ul > li .tbBox > div {
	display: table-cell;
}
.boardList > ul > li .tbBox .txtBox {
	vertical-align: top;
}
.boardList > ul > li .tbBox .txtBox > .sort {
	font-size: 0;
}
.boardList > ul > li .tbBox .txtBox .title > .sort,
.boardList > ul > li .tbBox .txtBox > .sort > span {
	display: inline-block;
	height: 20px;
	line-height:18px;
	padding: 0 5px;
	margin-right: 3px;
	margin-bottom: 4px;
	border: 1px solid #bbb;
	color: #888;
	font-size: 13px;
	background: #fff;
}
.boardList > ul > li .tbBox .txtBox > .sort > span {
	vertical-align: top;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.diy100 {
	border-color: #468cfa;
	color: #468cfa;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.dvsEm {
	border-color: #333;
	color: #333;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.recm {
	border-color: #4b8cfa;
	color: #fff;
	background: #4b8cfa;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.deadline {
	border-color: #c66dde;
	color: #fff;
	background: #c66dde;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.program {
	color: #e91b4d;
	border-color: #e91b4d;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.idea {
	color: #ff7700;
	border-color: #ff7700;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.move {
	color: #55677a;
	border-color: #55677a;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.mento {
	color: #ff8e16;
	border-color: #ff8e16;
}
.boardList > ul > li .tbBox .txtBox > .sort > span.mentee {
	color: #4b8cfa;
	border-color: #4b8cfa;
}
.boardList > ul > li .tbBox .txtBox > .sort .userInfo {
	display: inline-block;
	color: #555;	
	font-size: 13px;
}
.boardList > ul > li .tbBox .txtBox > .sort span+.userInfo {
	margin-left: 6px;
}
.boardList > ul > li .tbBox .txtBox > .sort .userInfo span {
	position: relative;
	display: inline-block;
	font-weight: 400;
}
.boardList > ul > li .tbBox .txtBox .title {
	display: block;
	font-size: 14px;
	line-height: 21px;
}
.boardList > ul > li .tbBox .txtBox .title .notice {
	margin-right: 5px;
    vertical-align: -3px;
}
.boardList > ul > li .tbBox .txtBox .dvsTit+p,
.boardList > ul > li .tbBox .txtBox .title+p {
	margin-top: 5px;
}
.boardList > ul > li .tbBox .txtBox .title > .sort {
	margin-right: 4px;
	border-color: #333;
	color: #333;
	font-weight: 400;
}
.boardList > ul > li .tbBox .txtBox p {
	line-height: 20px;
	color: #888;
	font-size: 13px;
}
.boardList > ul > li .tbBox .txtBox p > span {
	display: inline-block;
	position: relative;
	margin-right: 15px;
}
.boardList > ul > li .tbBox .txtBox p span.mento {
	margin-right: 0;
	color: #ff8e16;
}
.boardList > ul > li .tbBox .txtBox p span.mentee {
	margin-right: 0;
	color: #4b8cfa;
}
.boardList > ul > li .tbBox .txtBox > .sort .userInfo span:before,
.boardList > ul > li .tbBox .txtBox p > span:before {
	content:" ";
	position: absolute;
	top: 4px;
	right: -9px;
	height: 12px;
	border-left: 1px solid #e5e5e5;
}
.boardList > ul > li .tbBox .txtBox > .sort .userInfo span:last-child:before,
.boardList > ul > li .tbBox .txtBox p > span:last-child:before {
	display: none;
} 
.boardList > ul > li .tbBox .txtBox p > .date {
	padding-left: 20px;	
	background: url(/images/icon/icon_sort_date.png) 0 3px no-repeat;
	background-size: 14px 13px;
}
.boardList > ul > li .tbBox .txtBox .dvsTit > strong {
	position: relative;
	display: inline-block;
	margin-right: 13px;
	line-height: 21px;
	color: #333;
	font-size: 14px;
}
.boardList > ul > li .tbBox .txtBox .dvsTit > strong:before {
	content:" ";
	position: absolute;
	top: 4px;
	right: -9px;
	height: 12px;
	border-left: 1px solid #e5e5e5;
}
.boardList > ul > li .tbBox .txtBox .dvsTit > strong > span {
	font-weight: 400;
}
.boardList > ul > li .tbBox .txtBox .dvsTit > span {
	display: inline-block;
	color: #555;
	line-height: 21px;
}
.boardList > ul > li .tbBox .txtBox .dvsHalf {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.boardList > ul > li .tbBox .txtBox .dvsHalf > span {
	float: left;
	display: inline-block;
	width: 50%;
	line-height: 20px;
	color: #888;
}
.boardList > ul > li .tbBox .imgBox {
	width: 124px;
	padding-right: 16px;
}
.boardList > ul > li .tbBox .imgBox img {
	width: 100%;
}
/* .boardList > ul > li .tbBox .imgBox .img {
	width: 108px;
	height: 108px;
	background-image: url(/images/default/default.jpg);
    background-position: center center;
	background-size: cover;
} */

.boardList > ul > li .tbBox .cosSort {
	width: 60px;
}
.boardList > ul > li .tbBox .cosSort .dDay {
	width: 45px;
	margin-top: 6px;
	line-height: 19px;
	text-align: center;
	color: #e91b4d;
	font-size: 12px;
}
.boardList > ul > li .tbBox .cosSort > span {
	display: inline-block;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	line-height: 16px;
	padding: 7px 6px;	
	text-align: center;
	color: #fff;
	font-size: 13px;
	background: #55677a;
}
.boardList > ul > li .tbBox .cosSort > span.language {
	background: #889aac;
}
.boardList > ul > li .tbBox .cosSort > span.osdCos {
	background: #fa6666;
}
.boardList > ul > li .tbBox .cosSort > span.eLearning {
	background: #3ec78c;
	line-height: 45px;
	padding: 0;
}
.boardList > ul > li .tbBox .asideBox {
	width: 86px;
	padding-left: 8px;
	vertical-align: middle;
	text-align: center; 
}
.boardList > ul > li .tbBox .asideBox button {
	min-width: 60px;
}
.boardList > ul > li .tbBox .asideBox p {
	line-height: 20px;
	color: #888;
	font-size: 13px;
}
.boardList > ul > li .tbBox .asideBox button+button,
.boardList > ul > li .tbBox .asideBox p+p,
.boardList > ul > li .tbBox .asideBox strong+p,
.boardList > ul > li .tbBox .asideBox p+strong,
.boardList > ul > li .tbBox .asideBox p+button,
.boardList > ul > li .tbBox .asideBox  strong+button {
	margin-top: 4px;
}
.boardList > ul > li .tbBox .asideBox strong {
	display: block;
	line-height: 20px;
	font-size: 13px;
}
.boardList > ul > li .tbBox .asideBox .finish,
.boardList > ul > li .tbBox .asideBox .return,
.boardList > ul > li .tbBox .asideBox .cancel {
	color: #aaa;	
}
.boardList > ul > li .tbBox .asideBox .stay {
	color: #cbb984;	
}
.boardList > ul > li .tbBox .asideBox .comp {
	color: #79acfb;	
}
.boardList > ul > li .tbBox .asideBox .normal,
.boardList > ul > li .tbBox .asideBox .ing {
	color: #555;	
}
.boardList > ul > li .tbBox .asideBox.type2 {
	width: 58px;
	text-align: left;
}
.boardList > ul > li .tbBox .asideBox p.comment {
	padding-left: 22px;
	background: url(/images/icon/icon_sort_comment.png) 0 3px no-repeat;
	background-size: 16px 14px;
}
.boardList > ul > li .tbBox .asideBox p.file {
	padding-left: 22px;
	background: url(/images/icon/icon_list_file.png) 1px 2px no-repeat;
	background-size: 13px 15px;
}
.boardList > ul > li .btnApply {
	margin-top: 12px;
	width: 100%;
	height: 33px;
	font-size: 14px;
	font-weight: 700;
}
.boardList > ul > li .shareTxtBox {
	padding: 11px 15px;
	line-height: 22px;
	background: #f5f5f5;
}
.boardList > ul > li strong+.shareTxtBox,
.boardList > ul > li p+.shareTxtBox {
	margin-top: 10px;
}
.boardList li.noData {
    padding: 0 16px;
	line-height: 50px;
	text-align: center;
	color: #888;
}

.thumbList {
	padding: 8px 16px 0;
}
.thumbList ul {
	display: inline-block;
	width: 100%;
	font-size: 0;
}
.thumbList ul li {
	display: inline-block;
	width:  47.6%;
	margin-left: 4.8%;
	vertical-align: top;
}
.thumbList ul li:nth-child(2n+1) {
	margin-left: 0;
}
.thumbList ul li+li+li {
	margin-top: 30px;
}
.thumbList ul li .imgBox {
	position: relative;
	padding-top: 56.25%;	
}
.thumbList ul li .imgBox a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.thumbList ul li .imgBox a:before {
	content: " ";
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	transition: all .3s;
}
.thumbList ul li .imgBox a:after {
	content: " ";
	position: absolute;
	top:40%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin-left: -23px;
	background: url(/images/icon/icon_thum_list_view.png) 0 0 no-repeat;
	opacity: 0;
	transition: all .3s;
}
.thumbList ul li .imgBox:active a:before {
	opacity: 0.4;
	transition: all .3s;
}
.thumbList ul li .imgBox:active a:after {
    top: 36%;
    opacity: 1;
    transition: all .3s;
}
.thumbList ul li .imgBox a img {
	width: 100%;
	height: 100%;
}
.thumbList ul li .imgBox .categoryBox {
	z-index: 11;
}
.thumbList ul li .imgBox .iconRecm {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	font-size: 11px;
	background: url(/images/icon/icon_recm.png) 0 0 no-repeat;
	background-size: 100%;
	z-index: 11;
}
.thumbList ul li .imgBox .clubInfo {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 21px;
	height: 21px;
	padding: 0 9px 0 6px;
	border-bottom-right-radius:  13px;
	color: #fff;
	background: #4686fa; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #4686fa 0%, #5190fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #4686fa 0%,#5190fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #4686fa 0%,#5190fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4686fa', endColorstr='#5190fa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.thumbList ul li .imgBox .clubInfo.cos {
	background: #ff8814; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ff8814 0%, #ff921a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #ff8814 0%,#ff921a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #ff8814 0%,#ff921a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8814', endColorstr='#ff921a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.thumbList ul li .imgBox .clubInfo > strong {
	font-size: 12px;
}
.thumbList ul li .imgBox .clubState {
	position: absolute;
	top: 0;
	right: 0;
	display: table;
	width: 36px;
	height: 36px;
	background: #454545;
}
.thumbList ul li .imgBox .clubState  > span {
	display: table-cell;
	padding:  0 2px;
	line-height: 15px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.thumbList ul li .imgBoxB {
	position: relative;
	padding-top: 56.25%;	
}
.thumbList ul li .imgBoxB a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.thumbList ul li .imgBoxB a:before {
	content: " ";
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	transition: all .3s;
}

.thumbList ul li .imgBoxB a:after {
	content: " ";
	position: absolute;
	top:40%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin-left: -23px;
	background: url(/images/icon/icon_thum_list_view.png) 0 0 no-repeat;
	opacity: 0;
	transition: all .3s;
}
.thumbList ul li .imgBoxB:hover a:before {
	opacity: 0.4;
	transition: all .3s;
}
.thumbList ul li .imgBoxB:hover a:after {
    top: 36%;
    opacity: 1;
    transition: all .3s;
}
.thumbList ul li .imgBoxB a img {
	width: 100%;
	height: 100%;
}

.thumbList ul li .imgBoxB .categoryBox {
	z-index: 11;
}
.thumbList ul li .imgBoxB .iconRecm {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	background: url(/images/icon/icon_recm.png) 0 0 no-repeat;
	z-index: 11;
}
.thumbList ul li .imgBoxB .clubInfo {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 28px;
	height: 29px;
	padding: 0 10px;
	border-bottom-right-radius:  13px;
	color: #fff;
	background: #4686fa; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #4686fa 0%, #5190fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #4686fa 0%,#5190fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #4686fa 0%,#5190fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4686fa', endColorstr='#5190fa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.thumbList ul li .imgBoxB .clubInfo.cos {
	background: #ff8814; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ff8814 0%, #ff921a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #ff8814 0%,#ff921a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #ff8814 0%,#ff921a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8814', endColorstr='#ff921a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.thumbList ul li .imgBoxB .clubInfo > strong {
	font-size: 13px;
}
.thumbList ul li .imgBoxB .clubInfo > span {
	position: relative;
	font-size:13px;
	margin-left: 20px;
}
.thumbList ul li .imgBoxB .clubInfo > span:before {
	content:" ";
	position: absolute;
	top: 50%;
	left: -12px;
	width: 3px;
	height: 3px;
	margin-top: -2px;
	background: #fff;
}


.thumbList ul li .imgBoxB .clubState {
	position: absolute;
	top: 0;
	right: 0;
	display: table;
	width: 46px;
	height: 46px;
	background: #454545;
}
.thumbList ul li .imgBoxB .clubState  > span {
	display: table-cell;
	padding:  5px 7px;
	line-height: 15px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.thumbList ul li .imgBoxB:before { 
 content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    z-index: 15;
 }
.thumbList ul li .imgBoxB a>img { opacity: 0.3; }
.thumbList ul li .imgBoxB:hover:before { 
    display: none;
 }
.thumbList ul li .imgBoxB:hover a>img { opacity: 1; }


.thumbList ul li .txtBox {
	padding-top: 9px;	
}
.thumbList ul li .txtBox a {
	display: block;
	line-height: 21px;
	max-height: 42px;
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.thumbList ul li .txtBox p {
	margin-top: 4px;
}
.thumbList ul li .txtBox p > span {
	display: block;
	line-height: 21px;
	color: #888;
	font-size: 13px;
}
.thumbList ul li .txtBox .infoBox {
	margin-bottom: 4px;
}
.thumbList ul li .txtBox .infoBox > span {
	position: relative;
	display: inline-block;
	padding-right: 17px;
	line-height: 19px;
	font-size: 12px;
}
.thumbList ul li .txtBox .infoBox > span:before {
	content:" ";
	position: absolute;
	top: 3px;
	right: 8px;
	height: 12px;
	border-left: 1px solid #ddd;
}
.thumbList ul li .txtBox .infoBox > span:last-child {
	padding-right: 0;
}
.thumbList ul li .txtBox .infoBox > span:last-child:before {
	display: none;
}
.thumbList ul li .txtBox .infoBox > .sort {
	font-weight: 700;
}
.thumbList ul li .txtBox .infoBox > .member {
	color: #888;
}
.thumbList ul li button {
	width: 100%;
	margin-top: 12px;
}
.thumbList.slide {
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
	overflow-y: hidden;
	overflow-x: auto;
}
.thumbList.slide ul {
	padding: 0 16px;
}
.thumbList.slide ul li {
	width: 156px;
	margin-right: 8px;
	margin-left: 0;
}
.thumbList.slide ul li:last-child {
	margin-right: 0;
}
.thumbList.slide ul li+li+li {
	margin-top: 0;
}
.thumbList.slide ul li .txtBox a {
	height: 52px;
	white-space: inherit;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
  	-webkit-box-orient: vertical;
 	 -webkit-line-clamp: 2;
}
.thumbList.mn ul li .txtBox a {
	height: 42px;
}
.thumbList ul li.noData {
	width: 100%;
	padding: 0 16px;
	line-height: 50px;
	border: solid #e5e5e5;
	border-width: 1px 0;
	text-align:center;
	color: #888;
    font-size: 13px;
}

/*##  contents  -------------------------------------------------------##*/
div.tab {
	display: inline-block;
	width: 100%;
	height: 40px;
	margin-bottom: 20px;
	margin-top: 16px;
	padding: 0 16px;
}
div.tab ul {
	height: 40px;
	border-bottom: 1px solid #ddd;
}
div.tab li {
	float: left;
	display: inline-block;
}
div.tab li .new {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 4px;
    vertical-align: -7PX;
    font-size: 0px;
    background: url(/images/icon/icon_club_lnb_new.png) 0 0 no-repeat;
    background-size: 13px 13px;
}
div.tab.half li {
	width: 50%;
}
div.tab.wd03 li {
	width: calc(100% / 3);
}
div.tab.wd03 li+li {
	width: calc(100% / 3 + 1px);
}
div.tab.type2 ul {
	display: table;
	width: 100%;
}
div.tab.type2 li {
	display: table-cell;
	width: 17%;
	min-width: 0px;
}
div.tab.type2 li+li {
	width: calc(16.6% + 1px);
}
div.tab li+li {margin-left: -1px;}
div.tab li > a  {
	position: relative;
	display: block;	
	padding: 0 5px;
	height: 40px;
	line-height: 40px;
	border: solid #ddd;
	border-width: 1px 1px 0px 1px;
	text-align: center;
	font-size: 15px;
	z-index: 5;
}
div.tab li.on > a  {
	position: relative;
	border-color: #454545;
    border-bottom: 1px solid #fff;
	z-index: 10;
}
.faqTabBox {
	position: relative;
}
.faqTab {
	padding: 0 6px;
	background: #f5f5f5;
	overflow-x: auto;
}
.faqTab:before,
.faqTab:after {
	content:" ";
	position: absolute;
	bottom: 0;
	width: 16px;
	height: 37px;
}
.faqTab:before {
	left: 0;
	background: url(/images/bg/bg_faq_tab_left.png) 0 0  no-repeat;
	background-size: 100%;
}
.faqTab:after {
	right: 0;
	background: url(/images/bg/bg_faq_tab_right.png) 0 0  no-repeat;
	background-size: 100%;
}
.faqTab span {
	padding: 0 10px;
	display: inline-block;
}
.faqTab span > a {
	display: block;
	padding-top: 11px;
	line-height: 35px;
	border-bottom: 2px solid transparent;
	font-size: 14px;
}
.faqTab span.on > a {
	border-color: #f7295b;
	font-weight: 700;
}

.miniTab {
	text-align: center;
	margin-bottom: 10px;
}
.miniTab > a {
	display: inline-block;
	margin: 0 19px;
	line-height: 24px;
	font-size: 14px;
	border-bottom: 2px solid transparent;
}
.miniTab > a.on {
	border-color: #f7295b;
	font-weight: 700; 
}

.tabSelect {
	position: relative;
	margin: 12px auto;
	width: 200px;
	height: 36px;
	border: 1px solid #555;
	border-radius: 18px;
	text-align: center;
	background: #fff;
	z-index: 15;
}
.tabSelect > span {
	display: inline-block;
	height: 34px;
	line-height: 34px;
}
.tabSelect > span:after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    margin-left: 9px;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 6px solid #333;
}
.tabSelect > ul {
	display: none;
	position: absolute;
	top: 37px;
	left: 0;
	padding:  4px 0;
	max-height: 200px;
	overflow-y:auto;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #fff;
	z-index: 10;
}
.tabSelect > ul li {
	min-width: 200px;
	padding: 0 10px 0 7px;
	line-height: 31px;
	text-align: left;
	font-weight: 400;
	cursor: pointer;
}
.tabSelect > ul li:active {
	background: #eee;
}

/* 사내과정 홈 */
.cosBox .calendarBox .box .titBox {
	position: relative;
	line-height: 57px;
	text-align: center;
	background: #404e5c;
}
.cosBox .calendarBox .box .titBox > span,
.cosBox .calendarBox .box .titBox > strong {
	display: inline-block;
	padding: 0 6px;
	vertical-align: middle;
}
.cosBox .calendarBox .box .titBox > span {
	color: #e8f5ff;
	font-size: 16px;
	font-weight: 700;	
}
.cosBox .calendarBox .box .titBox > strong {
	color: #fff;
	font-size: 30px;
}
.cosBox .calendarBox .box .titBox > a {
	position: absolute;
	display: inline-block;
	top: 50%;
	width: 31px;
	height: 31px;
	margin-top: -15px;
	border-radius: 50%;
	text-indent: -99999px;
}
.cosBox .calendarBox .box .titBox > a:active {
	background: #364350;
}
.cosBox .calendarBox .box .titBox > a.btnPrev {
	left:18px;
}
.cosBox .calendarBox .box .titBox > a.btnNext {
	right:18px;
}
.cosBox .calendarBox .box .titBox > a:before {
	content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -5px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
}
.cosBox .calendarBox .box .titBox > a.btnPrev:before {
	margin-left: -2px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.cosBox .calendarBox .box .titBox > a.btnNext:before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.cosBox .calendar {
	padding: 0px 16px 9px;
	background: #fff;
}
.cosBox .calendar th,
.cosBox .calendar td {
	height: auto;
	border: none;
	padding: 0;
	text-align: center;
	background: transparent;
}
.cosBox .calendar th {
	height: 46px;
}
.cosBox .calendar td {
	height: 40px;
	vertical-align: top;
}
.cosBox .calendar td > span {
	position: relative;
	display: block;
	min-height: 40px;
	line-height: 1;
	padding: 4px;
	border: 2px solid transparent;
}
.cosBox .calendar th.sun,
.cosBox .calendar td.sun {
	color: #e91b4d;
}
.cosBox .calendar th.sat,
.cosBox .calendar td.sat {
	color: #767676;
}
.cosBox .calendar td.on> span,
.cosBox .calendar td:active > span {
	border-color: #555;
}
.cosBox .calendar td.toDay > span {
	color: #fff !important;
	border-color: #f7295b;
	background: #f7295b;
}
.cosBox .calendar td.toDay.on > span:before {
	content:" ";
	position: absolute;
	border: 1px solid #fff;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.cosBox .calendar td > span > a {
	position: relative;
	display: block;
	padding-left: 1px;
	height: 14px;
	text-align: center;
	font-size: 0;
}
.cosBox .calendar td > span > a:before {
	content:"";
	display:inline-block;
	width: 7px;
	height: 7px;
	margin-top: 6px;
	border-radius: 50%;
	background: #4b8cfa;
}
.cosBox .calendar td.toDay > span > a:before {
	background: #fff;
}
.cosBox .calendar td.cosList {
	padding: 10px 0;
	text-align: left;
}
.cosBox .calendar td.cosList .boardList {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    background: #fafafa;
}
.cosBox .calendar td.cosList .boardList > ul > li {
/* 	padding: 16px; */
}
.cosBox .calendarBox .infoTxt {
	display: block;
	padding: 7px 16px;
	line-height: 21px;
	text-align: left;
	word-break: keep-all;
	background: #e8f5ff;
}
.cosBox .calendarBox .infoTxt:before {
	content:" ";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 6px;
	vertical-align: 3px;
	background: #454545;
}
.cosBox .calendarBox .infoTxt .iBlue {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 4px;
	border-radius: 50%;
	font-size: 0;
	background: #4b8cfa;
}
.categoryBox {
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 0;
}
.categoryBox >span {
	display: inline-block;
	padding: 0 5px;
	line-height: 18px;
	border:1px solid #404040;
	font-size: 13px;
}
.categoryBox >span.cosSort {
	color: #fff;
	background: #404040;
}
.categoryBox >span.case {
	background: #fff;
}

.processBox {
	margin: 16px;
	padding: 16px;
	text-align: center;
	background: #eee;
}
.processBox > strong {
	display: block;
	margin-bottom: 15px;
	color: #888;
	font-size: 17px;
	font-weight: 400;
}
.processBox > .step {
    font-size: 0;
}
.processBox > .step > span {
	position: relative;
	display: inline-block;
    min-width: 88px;
	line-height: 29px;
	padding: 0 13px;
	margin: 4px 0 4px 20px;
	border-radius: 14px;
	vertical-align: middle;
	color: #fff;
	font-size: 14px;
	background:  #6a8198;
}
.processBox > .step > span:first-child {
	margin-left: 0;
}
.processBox > .step > span:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	width: 20px;
	height: 12px;
	margin-top: -6px;
	background: url(/images/bg/bg_process_step.png) center 0 no-repeat;
}
.processBox > .step > span:first-child:before {
	display: none;
}
.processBox > .step > span.start {
	min-width: 76px;
	background:  #404e5c;
}
.processBox > .step > span.complete {
	min-width: 76px;
	margin-right: 0;
	background:  #4b8cfa;
}
.processBox > .step > span.stay {
	line-height: 25px;
	border: 2px dashed #889aac;
	color: #555;
	background: #fff;	
}
.processBox > .step > span.stay:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 2px;
    margin-top: -1px;
    background: #bbb;
}
.processBox > .step > p {
	text-align: right;
	color: #767676;
	font-size: 13px;
}
.processBox .typeTit {
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
.processBox .typeTit:after {
	content: "";
	position: absolute;
	top: 52px;
    left: 48px;
    right: 48px;
	border-top: 2px solid #bbb;
}
.processBox .typeTit > span {
    position: relative;
    display: inline-block;
    min-width: 90px;
    height: 42px;
    padding: 4px 10px;
    margin: 0 4px;
    line-height: 16px;
    vertical-align: top;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    font-size: 13px;
}
.processBox .typeTit > span:before {
	content:" ";
	position: absolute;
	top: 42px;
	left: 50%;
	margin-left: -1px;
	height: 10px;
	border-left: 2px solid #bbb;
}
.processBox .typeTit > span.tit01 {
	background: #f7295b;
}
.processBox .typeTit > span.tit02 {
	line-height: 34px;
	background: #ff7700;
}
.processBox .typeTit > span.tit03 {
	line-height: 34px;
	background: #55677a;
}
.processBox > .step > span.choice {
	display: block;
	padding: 8px;
    background: transparent;
    text-align: center;
    margin: 20px 0;
}
.processBox > .step > span.choice > span {
	position: relative;
	display: inline-block;
    width: 74px;
    height: 74px;
    padding: 16px 0 0 0;
	line-height: 21px;
	border-radius: 50%;
	background: #6a8198;
	z-index: 10;
}
.processBox > .step > span.choice > span:before {
	content:" ";
	position: absolute;
	top: -8px;;
	left: -8px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #6a8198;
	opacity: 0.2;
	z-index: -1;
}
.processBox > .step > span.choice:after {
    content: " ";
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    bottom: 0;
    margin-left: -1px;
    border-left: 2px solid #bbb;
    z-index: 1;
}
.processBox.type2  {
	margin-top: 0;
}
.processBox.type2 > .step > span:before {
	top: -10px;
    left: 50%;
    margin-left: -10px;
    transform: rotate(90deg);
}
.processBox.type2 > .step > span {
	display: block;
    margin: 20px auto 0;
    width: 200px;
}

.lineBar {
	border-top: 12px solid #e5e5e5;
}

.guideTable {
	padding-top: 8px;
}
.guideBox {
	position: relative;
    overflow: hidden;
	padding: 12px 16px 20px ;
	background: #e8f5ff;
}
.guideBox .tabSelect {
	margin-top: 0;
}
.guideBox:before {
	content:" ";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 217px;
	max-height: 50%;
	background: url(/images/bg/bg_guide_box.png) 0 0 no-repeat;
	background-size: cover;
    z-index: 0;
}
.guideBox.contest {
	padding-top: 20px;
	background: #eee;
}
.guideBox.contest:before {
	display: none;
}
.guideBox > div {
	position: relative;
}

.myMoneyState .titleBox {
	text-align: center;	
}
.myMoneyState .titleBox  strong {
	display: inline-block;
    padding: 4px 0 5px 47px;
	line-height:1;
	font-size: 22px;
	background: url(/images/icon/icon_money_state_title.png) 0 0 no-repeat;
	background-size: 30px 30px;
}
.myMoneyState .graphBox {
	width: 100%;
}
.myMoneyState .graphBox .unitTxt {
	line-height: 21px;
	text-align: right;
	color: #a8b0b6;
	font-size:12px;
}
.myMoneyState .graphBox .graph {
	position: relative;
	width: 100%;
	height: 20px;
	font-size: 0;
	background: url(/images/bg/bg_money_graph.png) 0 0 repeat;
	box-shadow: 2px 6px 13px rgba(0,0,0,0.2);
}
.myMoneyState .graphBox .graph > div {
	position: relative;
	display: inline-block;
	height:20px;
	z-index: 10;
}
.myMoneyState .graphBox .use {
	border-right: 1px solid #fff;
	background: #ff537d;
}
.myMoneyState .graphBox .rqst {
	background: #79acfb;
}
.myMoneyState .graphBox .value {
	position: relative;
	width: 100%;
	height: 20px;
}
.myMoneyState .graphBox .value > span {
	position: absolute;
	top: 0;
	display: inline-block;
	width: 34px;
	height: 20px;
	margin-left: -17px; 
	text-align: center;
    line-height: 1;
    color: #888;
    padding-top: 11px;
	font-size: 12px;
}
.myMoneyState .graphBox .value > span:before {
	content:" "; 
	position: absolute;
	top: 0;
	left: 50%;
	height: 6px;
	border-left: 1px solid #bbb;
}
.myMoneyState .graphBox .value > span:nth-child(1) {left: 0;}
.myMoneyState .graphBox .value > span:nth-child(2) {left: 10%;}
.myMoneyState .graphBox .value > span:nth-child(3) {left: 20%;}
.myMoneyState .graphBox .value > span:nth-child(4) {left: 30%;}
.myMoneyState .graphBox .value > span:nth-child(5) {left: 40%;}
.myMoneyState .graphBox .value > span:nth-child(6) {left: 50%;}
.myMoneyState .graphBox .value > span:nth-child(7) {left: 60%;}
.myMoneyState .graphBox .value > span:nth-child(8) {left: 70%;}
.myMoneyState .graphBox .value > span:nth-child(9) {left: 80%;}
.myMoneyState .graphBox .value > span:nth-child(10) {left: 90%;}
.myMoneyState .graphBox .value > span:nth-child(11) {left: 100%;}
.myMoneyState .graphBox .value > span:nth-child(11):before {
	margin-left: -1px;
}

.graphState {
	margin-top: 20px;
}
.graphState > div {
	position: relative;
	padding: 6px 20px;
	border: solid #e5e5e5;
	border-width: 1px 1px 1px 0px;
	background: #fff;
}
.graphState > div+div {
	margin-top: 4px;
}
.graphState > div:before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	bottom: -1px;
	width: 4px;
}
.graphState > div.use:before {
	background: #ff537d;
}
.graphState > div.rqst:before {
	background: #79acfb;
}
.graphState > div.remain:before {
	width: 2px;
	border: 1px solid #a6a6a6;
	background: url(/images/bg/bg_money_graph.png) 0 0 repeat;
}
.graphState > div.comp:before {
	background: #79acfb;
}
.graphState > div.stay:before {
	background: #e0d2a9;
}
.graphState > div.cancel:before {
	background: #ccc;
}
.graphState > div.time.type1:before {
	background: #fc7a7a;
}
.graphState > div.time.type2:before {
	background: #7ddefc;
}
.graphState > div.time.type3:before {
	background: #96e55b;
}
.graphState > div.time.type4:before {
	background: #f9a51f;
}
.graphState > div.time.type5:before {
	background: #79acfb;
}
.graphState > div.time.type6:before {
	background: #dc96ee;
}
.graphState > div.time.type7:before {
	background: #fce67a;
}
.graphState > div.time.type8:before {
	background: #b0c1c2;
}
.graphState > div.time.type9:before {
	background: #1ca49d;
}

.graphState > div > div {
	position: relative;
	padding-left: 72px;
	line-height: 25px;
	text-align: right;
}
.graphState > div > div .title {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 25px;
}
.graphState > div .moneyBox {
    padding-top: 0;
    padding-right: 0;
	padding-bottom: 6px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 6px;
}
.graphState > div .moneyBox .money {
	color: #767676;
	font-size: 15px;
} 
.graphState > div .moneyBox .money > strong {
	padding-right: 5px;
}
.graphState > div.use .moneyBox .money > strong {
	color: #ff537d;
}
.graphState > div.rqst .moneyBox .money > strong {
	color: #79acfb;
}
.graphState > div.remain .moneyBox .money > strong {
	color: #333;
}
.graphState > div .percent {
	position: relative;
	padding-right: 20px;
	font-size:13px;
	color: #999;
}
.graphState > div .percent:before {
	content:" ";
	position: absolute;
	top: 50%;
	right: 10px;
	height: 12px;
	margin-top: -6px;
	border-left: 1px solid #e5e5e5;	
}
.graphState > div .num > span {
	display: inline-block;
	min-width: 35px;
	color: #767676;
	font-size: 15px;
}
.graphState > div .num .title {
    width: 80px;
    font-size: 14px;
	text-align: left;
}
.graphState > div .num .title:before {
	content:" ";
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 10px;
	margin-top: -5px;
	background: url(/images/common/arrow_graph_num_tit.png) 0 0 no-repeat;
	background-size: 100%;
}
.graphState > div .num > span > strong {
	color: #333;
	padding-right: 5px;
}
.graphState > div.program .num,
.graphState > div.idea .num,
.graphState > div.move .num {
	padding-left: 80px;
}
.graphState > div.program .num .title,
.graphState > div.idea .num .title,
.graphState > div.move .num .title {
	width: 85px;
}
.graphState > div.time .num {
	padding-left: 95px;
}
.graphState > div.time .num .title {
    width: 105px;
}
.graphState > div.time .num > span {
    min-width: 62px;
}

.mnyCld {
	border: solid #555;
	border-width: 2px 0px 1px;
}
.mnyCld .trBox {
	display: table;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #e5e5e5;
}
.mnyCld .trBox > div {
	position: relative;
	display: table-cell;
	width: 25%;
	text-align: center;
	padding: 7px 9px;
	border-left: 1px solid #e5e5e5;
}
.mnyCld .trBox > div:first-child {
	border-left: none;
}
.mnyCld .trBox  .month {
	display: inline-block;
	width: 31px;
	height: 31px;
	margin-bottom: 5px;
	border-radius: 50%;
	line-height: 31px;
	text-align: center;
	color: #4b8cfa;
	font-size: 12px;
	background: #e8f5ff;
}
.mnyCld .trBox  .month > strong{
	font-size: 13px;
}
.mnyCld .trBox > div .line {
	text-align: left;
	margin-bottom: 3px;
}
.mnyCld .trBox > div .line .title {
	line-height:22px;
	color: #888;
}
.mnyCld .trBox > div .line .num {
	line-height: 19px;
	color: #333;
	font-size: 14px;
}
.mnyCld .sum {
	padding: 0 16px;
	line-height: 30px;
	text-align: right;
	background: #eee;
}
.mnyCld .sum .title {
	float: left;
	color:#767676;
}
.mnyCld .sum .num {
	color: #333;
	font-size:14px;
}
.mnyCld .trBox > div.thisMonth {
	background: #fafafa;
}
.mnyCld .trBox > div.thisMonth .month {
	color: #fff;
	background: #888;
}  

.rqstGraph {
	position: relative;
	text-align: center;
	z-index: 10;
}
.rqstGraph > div {
	display: inline-block;
}
.rqstGraph > .graphTit {
	position: absolute;
    top: 50%;
    left: 50%; 
    display: block;
    width: 160px;
    height: 160px;
    line-height: 160px;
    margin-top: -80px;
    margin-left: -80px;
    border-radius: 50%;
    color: #aaa;
    font-size: 17px;
    background: #fff;
    box-shadow: 4px 7px 20px rgba(0,0,0,0.2);
    z-index: -1;
}

/* 멘토링 */
.mentoState {
	font-size: 0;
}
.mentoState +.boardList {
	border-top: none;
}
.mentoState > .box {
	position: relative;
	padding: 0 16px 16px;
	vertical-align: top;
	z-index: 10;
}
.mentoState > .box.type1 {
	background: url(/images/bg/bg_mentoring_01.jpg) center center no-repeat;
	background-size: cover;
}
.mentoState > .box.type2{
	background: url(/images/bg/bg_mentoring_02.jpg) center center no-repeat;
	background-size: cover;
}
.mentoState > .box > strong {
	display: block;
	line-height: 36px;
	text-align: center;
	color: #fff;
	font-size: 15px;
}
.mentoState > .box .item {
	display: inline-block;
	width: calc(50% - 6px);
	padding: 9px 0 11px;
    vertical-align: top;
	text-align: center;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	text-align: center;
	background: #fff;
}
.mentoState > .box .item+.item {
	margin-left: 12px;
}
.mentoState > .box .item p {
    margin-bottom: 6px;
	line-height: 20px;
    font-size: 13px;
}
.mentoState > .box .item .num {
	display: inline-block;
	color: #999;
	line-height: 26px;
	font-size: 13px; 
}
.mentoState > .box .item .num:before {
	content:" ";
	display: inline-block;
	width:32px;
	height: 28px;
	margin-right: 12px;
	vertical-align: middle;
}
.mentoState > .box .item.group .num:before {
	background: url(/images/icon/icon_mentoring_group.png) center center no-repeat;
	background-size: 29px 28px;
}
.mentoState > .box .item.person .num:before {
	background: url(/images/icon/icon_mentoring_person.png) center center no-repeat;
	background-size: 30px 23px;
}
.mentoState > .box .item.mento .num:before {
	background: url(/images/icon/icon_mentoring_mento.png) center center no-repeat;
	background-size: 32px 28px;
}
.mentoState > .box .item.mentee .num:before {
	background: url(/images/icon/icon_mentoring_mentee.png) center center no-repeat;
	background-size: 29px 28px;
}
.mentoState > .box .item .num > strong {
	padding-right: 5px;
	color: #333;
	font-size: 15px;
}

/* 학습소모임 - 멤버*/
.memberList {
	font-size: 0;
}
.memberList li {
	display: table;
	width: 100%;
	padding: 0 16px;
	vertical-align: top;
}
.memberList li+li {
	margin-top: 10px;
}
.memberList li > div {
	display: table-cell;
}
.memberList li .imgBox {
	width: 34px;
}
.memberList li .imgBox.mento:before {
	content:" ";
	position: absolute;
	top: -4px;
	left: -4px;
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(/images/icon/icon_member_mento.png) 0 0 no-repeat;
}
.memberList li .imgBox img {
	width: 34px;
	height: 34px;
	border:1px solid #dfdfdf;
	border-radius: 50%;
}
.memberList li .txtBox {
	padding: 6px 0 6px 16px;
}
.memberList li .txtBox .name {
	margin-bottom: 7px;
	line-height: 20px;
	font-size: 15px;
}
.memberList li .txtBox .name .mem {
	display: inline-block;
	margin-right: 8px;
	padding: 0 6px;
	line-height: 20px;
	border-radius: 2px;
	color: #fff;
	font-size:13px;
	font-weight: 700;
	background: #44d697;
}
.memberList li .txtBox .name .mem.cap {
	background: #ee6e9c;
}
.memberList li .txtBox .name .mem.staff {
	background: #4ecbf1;
}
.memberList li .txtBox .name .iconMentee,
.memberList li .txtBox .name .iconMento {
	margin-right: 3px;
}
.iconMento,
.iconMentee {
	display: inline-block;
	height :20px;
	line-height: 18px;
	padding: 0 5px;
	border-radius: 2px;
	border: 1px solid #ff8e16;
	color: #ff8e16;
	font-size: 13px;
	font-weight: 700;
}
.iconMentee {
	border-color: #4b8cfa;
	color: #4b8cfa;
}
.memberList li .txtBox  .team {
	margin-bottom: 5px;
	line-height: 18px;
	color: #888;
	font-size: 13px;
}
.memberList li .txtBox .date {
	padding-left: 21px;
	line-height: 18px;
	color: #888;
	font-size: 12px;
	background: url(/images/icon/icon_club_member_date.png) 0 center no-repeat;
}
.memberList li .txtBox .date > span {
	padding-right: 10px;
}
.memberList li .asideBox {
	width: 60px;
	padding-left: 8px;
	vertical-align: middle;
	text-align: center; 
}
.memberList li .asideBox button+button {
    margin-top: 4px;
}
.mtrView {
	position: relative;
	padding: 12px 16px;
	border-bottom: 1px solid #ddd;
	text-align: center;
	background: #eee;
}
.mtrView:after {
	content:" ";
	display: block;
	clear: both;
}
.mtrView .imgBox {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url(/images/bg/img_mentoring_view_person.png) 0 0 no-repeat;
	background-size: 100%;
}
.mtrView.group .imgBox {
	background: url(/images/bg/img_mentoring_view_group.png) 0 0 no-repeat;
	background-size: 100%;
}
.mtrView .txtBox {
	margin-top: 5px;
}
.mtrView .txtBox .sort {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	padding: 0 15px;
	line-height: 26px;
	border-bottom-right-radius: 11px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	background: #c3af77;
    background: -moz-linear-gradient(-45deg, #c3af77 0%, #d0bf8e 100%);
    background: -webkit-linear-gradient(-45deg, #c3af77 0%,#d0bf8e 100%);
    background: linear-gradient(135deg, #c3af77 0%,#d0bf8e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3af77', endColorstr='#d0bf8e',GradientType=1 );
}
.mtrView.group .txtBox .sort {
	background: #869b9e;
    background: -moz-linear-gradient(-45deg, #869b9e 0%, #9bafb1 100%);
    background: -webkit-linear-gradient(-45deg, #869b9e 0%,#9bafb1 100%);
    background: linear-gradient(135deg, #869b9e 0%,#9bafb1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#869b9e', endColorstr='#9bafb1',GradientType=1 );
}
.mtrView .txtBox .title {
	display: block;
	line-height: 26px;
	font-size: 15px;
}
.mtrView .txtBox .mtInfo > span {
	position: relative;
	display: inline-block;
	margin-right: 30px;
	line-height: 21px;
	color: #767676;
	font-size: 13px;
}
.mtrView .txtBox .mtInfo > span:before {
	content:" ";
	position: absolute;
	right: -16px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-left: 2px solid #888;
}
.mtrView .txtBox .mtInfo > span:last-child:before {
	display: none;
}
.mtrView .txtBox .mtInfo > span > strong {
	margin-right: 10px;
}

.clubView {
	position: relative;
	padding: 12px 20px;
	background: #eee;
}
.clubView .imgBox {
	margin: 0 auto;
	width: 60px;
	height: 60px;
	border: 1px solid #fff;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.clubView .txtBox {
	padding: 6px 0 0 0; 
	text-align: center;
}
.clubView .txtBox .sort {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	margin-bottom: 9px;
	padding: 0 15px;
	line-height: 26px;
	border-bottom-right-radius: 11px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	background: #407ff9;
    background: -moz-linear-gradient(-45deg, #5896fa 0%, #5190fa 100%);
    background: -webkit-linear-gradient(-45deg, #5896fa 0%,#5190fa 100%);
    background: linear-gradient(135deg, #407ff9 0%,#5896fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#407ff9', endColorstr='#5896fa',GradientType=1 );
}
.clubView .txtBox .sort.cos {
	background: #ff8112;
    background: -moz-linear-gradient(-45deg, #ff8112 0%, #ff981f 100%);
    background: -webkit-linear-gradient(-45deg, #ff8112 0%,#ff981f 100%);
    background: linear-gradient(135deg, #ff8112 0%,#ff981f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8112', endColorstr='#ff981f',GradientType=1 );
}
.clubView .txtBox .title {
	display: block;
	margin-bottom: 2px;
	line-height: 26px;
	font-size: 15px;
}
.clubView .txtBox .clubInfo > span {
	position: relative;
	display: inline-block;
	margin-right: 30px;
	line-height: 20px;
	color: #767676;
}
.clubView .txtBox .clubInfo > span:before {
	content:" ";
	position: absolute;
	right: -16px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-left: 2px solid #888;
}
.clubView .txtBox .clubInfo > span:last-child {
	margin-right: 0;
}
.clubView .txtBox .clubInfo > span:last-child:before {
	display: none;
}
.clubView .txtBox .clubInfo > span > strong {
	margin-right: 10px;
}
.clubView .joinRqst {
	position: absolute;
	top: 8px;
	right: 16px;
}
.clubView .joinRqst > .num {
	display: inline-block;
	line-height: 17px;
	border-bottom: 1px solid #767676;
	color: #767676;
}
.clubView .joinRqst > .new {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: middle;
    font-size: 0px;
    background: url(/images/icon/icon_club_lnb_new.png) 0 0 no-repeat;
    background-size: 100%;
}
.clubCon  {
	display: inline-block;
	width: 100%;
}
.clubCon .search {
	margin-top: 0;
}
.clubCon > .txtBox {
	padding: 0 16px;
	line-height: 20px;
}
.clubCon img {
	max-width: 100%;
}
.clubCon .clubJoinTxt {
	margin-top: 20px;
	line-height: 24px;
	text-align: center;
	font-size: 15px;
}
.clubCon .clubJoinTxt + .btnArea {
	margin-top: 20px;
}
.clubView+.clubCon .memberList {
	margin-top: 20px;
}
.clubCon .clubBoard .btnArea {
	padding: 0;
}
.clubCon .clubBoard .titleBox {
	padding: 0 16px;
    margin-bottom: 10px;
}
.clubCon .clubBoard .titleBox .btnClubMenu {
	display: inline-block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
	font-size: 0;
	background: #f7295b url(/images/btn/btn_club_menu.png) 0 0 no-repeat;
	background-size: 100%;
}
.clubCon .clubBoard .titleBox > strong {
	display: inline-block;
	line-height: 26px;
	font-size: 17px;
	vertical-align: middle;
}
.clubCon .clubBoard .titleBox > strong:after {
	content:" ";
	display: inline-block;
	margin-left: 5px;
    vertical-align: 3px;
	border-top: 7px solid #333;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
}
.clubCon .clubBoard .menuListPop {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    z-index: 1000;
}
.clubCon .clubBoard .menuListPop .title {
	position: relative;
}
.clubCon .clubBoard .menuListPop .title > strong {
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0 50px;
	border-bottom: 1px solid #e5e5e5;
	text-align: center;
	color: #333;
	font-size: 15px;
	background: #fff;
}
.clubCon .clubBoard .menuListPop .title .btnClosed {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	font-size: 0;
	background: url(/images/btn/btn_pop_closed.png) center center no-repeat;
	background-size: 18px 18px;
}
.clubCon .clubBoard .menuListPop ul li {
	border-bottom: 1px solid #e5e5e5;
}
.clubCon .clubBoard .menuListPop ul li > a {
	position: relative;
	display: block;
	line-height: 21px;
	padding: 12px 58px 12px 16px;
	font-size:14px;
}
.clubCon .clubBoard .menuListPop ul li > a:active,
.clubCon .clubBoard .menuListPop ul li > a:active {
	background: #eee;
}
.clubCon .clubBoard .menuListPop ul li > a .num {
	position: absolute;
	top: 50%;
	right: 16px;
	display: inline-block;
	min-width: 29px;
	padding: 0 8px;
	height: 29px;
	line-height: 27px;
	margin-top: -15px;
	border: 1px solid #e6e6e6;
	border-radius: 15px;
	text-align: center;
	color: #888;
	font-size:12px;
	background: #fff;
}

.feedBox .feedNum {
	padding: 11px 16px;
	border-top: 2px solid #454545;
	text-align: center;
}
.feedBox .feedNum > strong {
	display: inline-block;
	line-height: 24px;
	font-size: 14px;
}
.feedBox .feedNum > strong+strong {
	margin-left: 20px;
}
.feedBox .feedNum > strong > span {
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	margin-right: 10px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 14px;
	background: #999;
}
.feedBox .feedNum > strong > span.answer {
	background: #ff7700;
}
.feedBox .imgBox {
	position: relative;
	width: 34px;
	height: 34px;
}
.feedBox .imgBox img {
	width: 100%;
	height: 100%;
	border: 1px solid #dedede;
	border-radius: 50%;
}
.feed li > .box .imgBox .iconMe {
	position: absolute;
    top: -10px;
    left: -10px;
}
.feed li > .box .iconMe,
.feed li > .box .txtBox .userInfo span.iconMe {
	display: inline-block;
	width: 22px;
	height:22px;
	line-height:22px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	background: #c66dde;
}
.feed .reply li .box .txtBox .userInfo span.iconMe {
    margin-left: -2px;
    margin-right: 5px;
}
.feedBox .feedWrite {
	padding: 16px; 
	background: #eee;
}
.feedBox .feedWrite .box {
	display: inline-block;
	width: 100%;
}
.feedBox .feedWrite .box .imgBox {
	float: left;
	margin-top: 5px;
}
.feedBox .feedWrite .box .txtBox { 
	float: right;
	width: calc(100% - 44px);
    border-bottom: 1px solid #ddd;
}
.feedBox .feedWrite .box .txtBox input[type="text"] {
	width: 145px;
    width: calc(100% - 97px);
}
.feedBox .feedWrite .box .txtBox .num {
	color: #555;
}
.feedBox .feedWrite .box .txtBox > .checkBox {
	float: right;
	color: #333;
	margin-top: 6px;
}
.feedBox .write {
	position: relative;
	margin-top: 6px;
	margin-bottom :10px;
	padding-bottom: 39px;
	border-radius: 2px;
	border: 1px solid #ccc;
	background: #fff;
}
.feedBox .write  textarea {
	height: 73px;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #eee;
}
.feedBox .write .num {
	position: absolute;
	bottom: 0;
	left: 8px;
	line-height: 39px;
	color: #999;
	font-size: 13px;	
}
.feedBox .write .num > strong {
	color: #333;
}
.feedBox .write .btnArea {
	position: absolute;
	bottom: 8px;
	right: 8px;
	margin: 0;
	padding: 0;
	min-height: 0;
}
.feedBox .write .btnArea label {
	margin-right: 10px;
	font-size: 13px;
}
.feedBox .write .btnArea button+button {
	margin-left: 4px;
}
.feedBox .feedWrite .write .btnArea  button {
	min-width: 61px;
	height: 23px;
	padding: 0;
	font-size: 13px;
}
.feedBox .file {
	position: relative;
    padding: 0 70px 0 0;
}
.feedBox .feedWrite .file {
		padding: 10px 70px 0 44px;
}
.feedBox .file .checkBox {
	position: absolute;
	top: 2px;
	right: 0;
}
.feedBox .feedWrite .file .checkBox {
	top: 12px;
}

.feedBox .file > strong {
	display: inline-block;
	padding-right: 10px;
	line-height: 23px;
	text-align: center;
	color: #999;
}
.feedBox .file .findBox,
.feedBox .file .findBox .list {
	display: inline;
}
.feedBox .file .findBox .list > span {
	display: inline-block;
	margin-top: 0;
    margin-bottom: 4px;
	line-height: 23px;
}
.feedBox .file .findBox .list .btnDel {
    vertical-align: -4px;
}
.feed > li {
	position: relative; 
	padding-left: 60px;
	padding-right: 16px;
	padding-bottom: 20px;
}
.feed > li.noData {
	padding: 0;
	line-height: 50px;
	color: #888;
	text-align: center;
}
.feed > li+li > .box {
	border-top: 1px dashed #ccc;
}
.feed li > .box {
	display: inline-block;
	width: 100%;
	padding: 20px 0 10px;
}
.feed li > .box .imgBox {
	position: absolute;
	top: 20px;
	left: 16px;
} 
.feed li > .box .txtBox .userInfo {
	position: relative;
	margin-bottom: 4px;
	padding: 10px 30px 0 0;
}
.feed li > .box .txtBox .userInfo .name {
	display: inline-block;
    padding-right: 5px;
    margin-bottom: 12px;
}
.feed li > .box .txtBox .userInfo .tcrName {
	margin-right: 7px;
}
.feed li > .box .txtBox .userInfo p {
	display: block;
	color: #888;
	font-size: 13px;
}
.feed li > .box .txtBox .userInfo .iconTcr {
	padding: 0 11px;
	line-height: 19px;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	background: #767676;
}
.feed li > .box .txtBox .userInfo .lock {
	display: inline-block;
	width: 11px;
	height: 15px;
	font-size: 0;
    vertical-align: 13px;
    background: url(/images/icon/icon_lock.png) 0 0 no-repeat;
}
.feed li > .box .txtBox .userInfo .right {
	position: absolute;
	top: 0;
	right: 0;
}
.feed li > .box .txtBox .userInfo .right .more {
	width: 22px;
	height: 22px;
	border-radius: 2px;
    vertical-align: top;
	font-size: 0;
	background: #ddd url(/images/btn/btn_feed_more.png) center center no-repeat;
	background-size: 100%;
}
.feed li > .box .txtBox .userInfo .right ul {
	display: none;
	position: absolute;
	top: 26px;
	right: 0;
	width: 80px;
	padding: 4px 0;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #fff;
}
.feed li > .box .txtBox .userInfo .right ul li > a {
	display: block;
	line-height: 31px;
	text-align: center;
	font-size: 14px;
}
.feed li > .box .txtBox .userInfo .right ul li > a:active {
	background: #eee;
}
.feed .box .txtBox > button {
	margin-top: 10px;
	margin-right: 10px;
}
.feed li > .box .txtBox > .date {
    display: inline-block;
    margin-top: 10px;
    line-height: 23px;
    vertical-align: bottom;
    color: #aaa;
    font-size: 12px;
}
.feed .box .txtBox > .btnArea {
	min-height: 0;
	margin-top: 10px;
	padding: 0;
	text-align: left;
}
.feed .box .txtBox > .btnArea button+button {
	margin-left: 4px;
}
.feed li textarea {
	height: 80px;
}
.feed li > .box .txtBox  p {
	padding-bottom: 5px;
	line-height: 20px;
	font-size: 13px;
}
.feed li > .box .txtBox  .rtName {
	display: inline-block;
	padding-right: 10px;
	color: #69aaeb;
}
.feed li .fileList li:first-child  {
	margin-top: 12px;
}
.feed li .fileList > li a {
	color: #888;
}
.feed li .fileList > li+li {
	margin-top: 7px;
}
.feed .reply .reply {
	margin-top: 20px;
	padding-left: 20px;
}
.feed .reply li > .box {
	position: relative;
    padding: 0 0 0 17px;
}
.feed .reply li > .box:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-left: 4px solid #eee; 
}
.feed .reply > li+li {
	margin-top: 20px;
}

.comment > .writeBox {
    margin-top: 16px;
    padding: 16px;
}
.comment  div.write {
    position: relative;
    padding-bottom: 39px;
    border-radius: 2px;
    border: 1px solid #ccc;
    background: #fff;
}
.comment .write textarea {
	height: 73px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #eee;
}
.comment .write .num {
    position: absolute;
    bottom: 0;
    left: 8px;
    line-height: 39px;
    color: #999;
    font-size: 13px;
}
.comment .write .num > strong {
	color: #333;
}
.comment  > .writeBox .btnNormal {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 61px;
    height: 23px;
    padding: 0;
    font-size: 13px;
}
.comment .comList > li {
    padding: 20px 16px 12px 60px;
    border-top: 1px solid #e5e5e5;
    background: url(/images/icon/icon_comment.png) 16px 14px no-repeat;
    background-size: 34px 34px;
 }
 .comment .comList > li.noData {
 	padding: 0;
 	line-height: 50px;
 	text-align: center;
 	color: #888;
 	background: transparent !important;
 }
.comment .comList > li .box  {
  	position: relative;
  }
   .comment .comList > li .box > button {
	margin-top: 10px;
    margin-right: 10px;
}
 .comment .comList > li .box .date {
 	display: inline-block;
    margin-top: 3px;
    line-height: 23px;
    vertical-align: bottom;
    color: #aaa;
    font-size: 12px;
 }
/* .comment .comList > li .write { */
/* 	margin-top: 10px; */
/* } */
.comment .comList > li .write .btnArea {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 0;
	margin: 0;
	min-height: 0;
}
.comment .comList > li .write .btnArea  button+button {
	margin-left: 4px;
}
.comment .comList > li .write .btnArea  label {
	margin-right: 10px;
	font-size: 14px;
}
.comment .comList > li .comInfo {
	padding-right: 32px;
}
.cosDetail .comment .comList > li .comInfo,
.comment.grade .comList > li .comInfo {
	padding-right: 0;
}
.comment .comList > li .comInfo .date {
	float: right;
	margin-top: 0;
	padding: 0;
	vertical-align: middle;
}
.comment .comList > li .comInfo .right {
	position: absolute;
	top: 0;
	right: 0;
}
.comment .comList > li .comInfo .right .more {
	width: 22px;
	height: 22px;
	border-radius: 2px;
    vertical-align: top;
	font-size: 0;
	background: #ddd url(/images/btn/btn_feed_more.png) center center no-repeat;
	background-size: 100%;
}
.comment .comList > li .comInfo .right ul {
	display: none;
	position: absolute;
	top: 26px;
	right: 0;
	width: 80px;
	padding: 4px 0;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #fff;
}
.comment .comList > li .comInfo .right ul li > a {
	display: block;
	line-height: 31px;
	text-align: center;
	font-size: 14px;
}
.comment .comList > li .comInfo .right ul li > a:active {
	background: #eee;
}
.comment .comList > li .comInfo .rating {
	line-height: 21px;
} 
.comment .comList > li .comInfo > span {
	display: inline-block;
 	line-height: 21px;
 	padding-right: 15px;
 }
.comment .comList > li .comInfo > span.write {
 	font-weight: 700;
 }
.comment .comList > li .txtBox {
  	margin-top: 9px;
  	line-height: 21px;
    color: #555;
  	font-size: 14px;
  }
.comment .comList .reply {
	position: relative;
	padding-left: 17px;
	margin-top: 20px;
}
.comment .comList .reply:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-left: 4px solid #eee;
}
.comment .btnMore {
	display: block;
 	margin: 0 16px;
 	border: 1px solid #ccc; 
 	line-height: 33px;
 	color: #767676;
 	text-align: center;
 }
 .comment.grade {
 	border-top: 2px solid #454545;
 }
 .comment.grade .gradeBox {
 	position: relative;
 	padding: 15px 0 15px 78px;
 }
.comment.grade .gradeBox > strong {
	position: absolute;
    left: 26px;
    line-height: 20px;
    font-size: 15px;
}
.comment.grade .gradeBox .rating  .star > span {
	width: 21px;
	height: 20px;
	margin-right: 3px; 
 	background-image: url(/images/common/star_big.png);
	background-position:  0 0;
	background-size: 63px 20px;
}
 .comment.grade .gradeBox .rating  .star > span.half {
	background-position:  -21px 0;
}
 .comment.grade .gradeBox .rating  .star > span.on {
 	background-position:  -42px 0;
}
 .comment.grade .gradeBox .rating .num {
    vertical-align: 2px;
 	font-size: 20px;
 }

.rating {
	display: inline-block;
	vertical-align: -1px;
	margin-right: 15px;
}
.rating .star {
	display: inline-block;
	font-size: 0;
	line-height: 1;
}
.rating  .star > span {
	display: inline-block;
	width: 16px;
	height: 15px;
	margin-right: 2px;
	background-image: url(/images/common/star.png);
	background-position:  0 0;
	background-repeat: no-repeat;
    background-size: 48px 15px;
}
.rating  .star > span.half {
	background-position:  -16px 0;
}
.rating  .star > span.on {
	background-position:  -32px 0;
}
.rating .num {
	line-height: 1;
	color: #888;
	font-size: 15px;
}
.boardView td .rating {
	margin-right: 0;
}
.boardView td .rating  .star > span {
	cursor: pointer;
	vertical-align: top;
}

.cosView  {
	padding: 12px 16px 20px;
}
.cosView .box .titBox {
	position: relative;
	margin-bottom: 10px;
	padding: 0  0 5px 0;
	border-bottom: 2px solid #333;
}
.cosView .box .titBox  h3 {
	display: block;
	line-height: 26px;
	font-size: 17px;
}
.cosView .box .titBox .sort {
	margin-bottom: 3px;
	padding-right: 55px;
	font-size: 0;
}
.cosView .box .titBox .sort > span {
	display: inline-block;
	height: 20px;
	line-height:18px;
	padding: 0 5px;
	margin-right: 3px;
	margin-bottom: 4px;
	border: 1px solid #bbb;
	color: #888;
	font-size: 13px;
	background: #fff;
}
.cosView .box .titBox .sort > span.recm {
    border-color: #4b8cfa;
    color: #fff;
    background: #4b8cfa;
}
.cosView .box .titBox .sort > span.deadline {
	border-color: #c66dde;
    color: #fff;
    background: #c66dde;
}
.cosView .box .titBox .shareBox {
	position: absolute;
	right: 0;
	top: 0;
}
.cosView .box .conBox {
	position: relative;
	display: inline-block;
	width: 100%;
}
.cosView .box .conBox .imgBox {
	position: relative;
	margin-bottom: 15px;
	width: 100%;
	padding-top: 56.25%;
}
.cosView .box .conBox .imgBox img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cosView .box .conBox .imgBox .btnView {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
}
.cosView .box .conBox .imgBox .btnView:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
	box-shadow: 2px 3px 12px rgba(0,0,0,0.2);
	opacity: 0.9;
}
.cosView .box .conBox .imgBox .btnView > span {
	position: absolute;
	width: 100%;
	height: 100%;
	padding-top: 43px;
	text-align:center;
	font-size: 13px;
	font-weight: 700;
	background: url(/images/btn/btn_view.png) 29px 18px no-repeat;
	z-index: 10;
}
.cosView .box .conBox .bx-pager {
	margin-top: 12px;
	text-align: center;
	font-size: 0;
}
.cosView .box .conBox .bx-pager > div {
	display: inline-block;
	margin: 0 5px;
}
.cosView  .box .conBox .bx-pager > div > a {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #bbb;
}
.cosView .box .conBox .bx-pager > div > a.active {
	width: 20px;
	background: #f7295b;
}
.cosView .box .conBox .txtBox {
	padding:  0 15px;
}
.cosView .box .conBox .txtBox ul li {
	position: relative; 
	line-height: 21px;
	min-height: 21px;
	padding: 3px 0 3px 110px;
	font-size: 14px;
}
.cosView .box .conBox .txtBox ul li > strong {
	position: absolute;
	top: 3px;
	left: 0;
	line-height: 21px;
}
.cosView .box .conBox .txtBox ul li span {
	display: inline-block;
	color: #555;    
}
.cosView .box .conBox .satftBox {
	width: 100%;
	height: 140px;
	padding: 16px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
}
.satftBox .title {
	display: inline-block;
	margin-bottom: 5px;
	line-height: 26px;
	font-size: 15px;
	background: url(/images/bg/bg_quote.png) right center no-repeat;
}
.satftBox .rating {
	float: right;
	margin-top: 4px;
	margin-right: 0;
}
.satftBox .list p {
	position: relative;
	display: block;
	width: 100%;
	padding-left: 12px;
	line-height: 25px;
	color: #767676;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.satftBox .list p:before {
	content:" ";
	position: absolute;
	top: 11px; 
	left: 2px;
	width: 2px;
	height: 2px;
	background: #888;
}
.satftBox .list .noData > span {
	display: block;
	font-size: 13px;
	line-height: 20px;
	color: #888;
}
.cosView  .btnArea {
	padding: 0;
	margin-top: 20px;
}
.cosView  .btnArea button {
	width: 100%;
}
.cosDetail .tab {
	display: inline-block;
	width: 100%;
	padding: 0 16px;
	border: solid #e5e5e5;
	border-width: 1px 0px;
}
.cosDetail .tab li {
	float: left;
	position: relative;
	margin-right: 44px;
}
.cosDetail .tab li+li:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
	width: 4px;
	margin-top: -1px;
	border-top: 4px solid #ccc;
}
.cosDetail .tab li > a {
	position: relative;
	display: block;
    height: 38px;
    line-height: 40px;
	color: #555;
	font-size: 15px;
}
.cosDetail .tab li > a > span {
	vertical-align: 0px;
	font-size: 12px;
}
.cosDetail .tab li:active > a > span > span {
	color: #e91b4d
}
.cosDetail .tab li:active > a, 
.cosDetail .tab li.on > a {
	color: #333;
	font-weight: 700;
}
.cosDetail .tab li:active > a:before, 
.cosDetail .tab li.on > a:before {
	content:" ";
	position: absolute;
	top: 0;
	width: 100%;
	border-bottom: 4px solid #f7295b;
	border-bottom-right-radius: 4px;
}
.cosDetail .conBox {
	padding: 0 16px;
	border-bottom: 1px solid #e5e5e5;
}
.cosDetail .conBox img {
	max-width: 100% !important;
}
.cosDetail .conBox .box,
.cosDetail .editeBox {
	padding: 20px 0;
	line-height: 21px;
}
.cosDetail .spotBox,
.cosDetail .box+.box,
.cosDetail .box+.editeBox,
.cosDetail .editeBox+.dataBox {
	background: url(/images/common/border_view_division.png) 0 0 repeat-x;
} 
.cosDetail .conBox .boardList {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}


.cosDetail .box > .bult {
	margin: 0 0 12px 0;
	line-height: 26px;
	padding-left: 36px;
	font-size: 17px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 26px 26px;
}
.cosDetail .box > .bult.schedule {
	background-image: url(/images/common/bult_cos_view_schedule.png);
}
.cosDetail .box > .bult.guide {
	background-image: url(/images/common/bult_cos_view_guide.png);
}
.cosDetail .box > .bult.object {
	background-image: url(/images/common/bult_cos_view_object.png);
}
.cosDetail .box > .bult.target {
	background-image: url(/images/common/bult_cos_view_target.png);
}
.cosDetail .box > .bult.comp {
	background-image: url(/images/common/bult_cos_view_comp.png);
}
.cosDetail .box  .txtBox {
	line-height: 21px;
	font-size: 14px;
}


.cosDetail .fileBox,
.cosDetail .spotBox {
	padding: 20px 0;
	min-height: 32px;
} 
.cosDetail .fileBox {
	padding-bottom: 15px;
	background: url(/images/common/border_view_division.png) 0 bottom repeat-x;
}
.cosDetail .fileBox > h5,
.cosDetail .spotBox > h5 {
	margin: 0 0 5px 0;
	line-height: 26px;
	padding-left: 36px;
	font-size: 17px;
}
.cosDetail .fileBox > h5 {
	background: url(/images/common/bult_cos_view_file.png) 0 0 no-repeat;
	background-size: 26px 26px;
}
.cosDetail .spotBox > h5 {
	background: url(/images/common/bult_cos_view_spot.png) 0 0 no-repeat;
	background-size: 26px 26px;
}


.fileList > a {
	position: relative;
	display: inline-block;
	line-height: 33px;
	max-width: 100%;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 0 37px 0 11px;
	border: 1px solid #ddd;
	border-radius: 2px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.fileList > a:active {
	border-color: #e5e5e5;
	background: #e5e5e5;
}
.fileList > a:before {
	content:" ";
	display: inline-block;
	position: absolute;
	top: 9px;
	right: 11px;
	width: 16px;
	height: 15px;
	background: url(/images/icon/icon_cosview_file.png) 0 0 no-repeat;
}
.spotBox .txt {
	padding: 8px 0;
	line-height: 21px;
}
.cosDetail .comment {
	padding-bottom: 30px;
}
.cosDetail .comment .comList {
	border: none
}
.cosDetail .comment .comList > li:first-child {
	border-top: none;
}
.comment.grade .comList > li,
.cosDetail .comment .comList > li {
 	background: url(/images/icon/icon_satisfaction.png) 16px 14px no-repeat;
    background-size: 34px 34px;
 }

/* 사내공모 */
.contestList {
	padding: 0 16px;
}
.contestList ul {
	display: inline-block;
	width: 100%;
}
.contestList ul li {
	position: relative;
	width: 100%;
	height: 260px; 
	border: 2px solid #e5e5e5;
	transition: all .3s;
}
/* .contestList ul li:active {
	border-color: #ccc;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
} */
.contestList ul li+li {
	margin-top: 20px;
}
.contestList ul li > a {
	display: block;
	height: 100%;
	padding: 20px 33px 0;
	text-align: center;
}
.contestView .group,
.contestList ul li .group {
	position: absolute;
	top: -5px;
	right: 8px;
	width: 31px;
	height: 51px;
	line-height: 51px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	background: #888;
}
.contestView .group.all,
.contestList ul li .group.all {
	background: #404e5c;
}
.contestView .group:before,
.contestList ul li .group:before {
	content:" ";
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 7px solid #fff;
	border-left: 15.5px solid transparent;
	border-right: 15.5px solid transparent;
}
.contestList ul li .sort {
	display: block;
	margin-bottom: 7px;
	padding-top: 106px;
	line-height:20px;
	font-size: 13px;
}
.contestList ul li .sort.program {
	color: #e91b4d;
	background: url(/images/icon/icon_contest_program.png) center 1px no-repeat;
}
.contestList ul li .sort.idea {
	color: #ff7700;
	background: url(/images/icon/icon_contest_idea.png) center 1px no-repeat;
}
.contestList ul li .sort.move {
	color: #55677a;
	background: url(/images/icon/icon_contest_move.png) center 6px no-repeat;
}
.contestList ul li .title {
	display: block;
	margin-bottom: 10px;
	display: -webkit-box;
	line-height: 26px;
	height: 52px;
	font-size: 17px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
/* .contestList ul li:active .title {
	text-decoration: underline;
} */
.contestList ul li .period {
	line-height: 20px;
	color: #999;
	font-size: 13px;
} 
.contestList ul li.noData {
	width: 100%;
	height: auto;
	border: solid #e5e5e5;
	border-width: 1px 0px;
	line-height: 50px;
	text-align: center;
	color: #888;
	box-shadow: none;
}

.contestView {
	position: relative;
	margin-bottom: 20px;
	padding: 20px 25px;
	text-align: left;
	background: url(/images/bg/bg_contest_view.png) 0 0 repeat;
}
.contestView:before {
	content:" ";
	position: absolute;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
	background: #fff;
} 
.contestView > div {
	position: relative;
	min-height: 94px;
	display: inline-block;
	padding-bottom: 5px;
	text-align: left;
	z-index: 10;
}
.contestView .group {
	top: 0px;
	right: 20px;
}
.contestView .title {
	margin: 0;
    line-height: 26px;
    font-size: 17px;
}
.contestView .period {
	margin-top: 8px;
	line-height: 21px;
	color: #767676;
	font-size: 14px;
}
.contestView .sort {
	display: block;
	margin: 4px 0;
	line-height:20px;
	font-size: 13px;
}
.contestView .program {
	padding-left: 95px;
	background: url(/images/icon/icon_contest_program.png) 0 2px no-repeat;
}
.contestView .idea {
	padding-left: 103px;
	background: url(/images/icon/icon_contest_idea.png) 8px 2px no-repeat;
}
.contestView .move {
	padding-left: 109px;
	background: url(/images/icon/icon_contest_move.png) 2px 8px no-repeat;
}
.contestView .program .sort {
	color: #e91b4d;
}
.contestView .idea .sort {
	color: #ff7700;
}
.contestView .move .sort {
	color: #55677a;
}
.contestBox .item {
	position: relative;
	background: url(/images/common/border_view_division.png) 0 bottom repeat-x;
} 
.contestBox .item h5 {
	display: block;
    min-height: 28px;
    margin: 20px 16px 0;
	padding-left: 40px;
}
.contestBox .item h5.guide {
	background: url(/images/common/bult_contest_guide.png) 0 1px no-repeat;
}
.contestBox .item h5.file {
	background: url(/images/common/bult_contest_file.png) 0 1px no-repeat;
}
.contestBox .item h5.form {
	background: url(/images/common/bult_contest_form.png) 0 1px no-repeat;
}
.contestBox .item .box {
	padding:16px 16px 20px;
	min-height: 90px;
    line-height: 24px;
}
.contestBox .item .fileBox {
	padding: 16px 16px 15px 16px;
	min-height: 90px;
}
.guideTxt {
	padding: 0 25px;
	margin-top: 20px;
	line-height: 24px;
	text-align: center;
	font-size: 15px;
}
.guideTxt+.btnArea {
	margin-top: 20px;
}
.graphState > div.program:before {
	background: #f7295b;
}
.graphState > div.idea:before {
	background: #ff8e16;
}
.graphState > div.move:before {
	background: #6a8198;
}

/*멘토링*/
.mentoHome {
	display: inline-block;
/* 	margin-bottom: 16px; */
}
.mentoHome .item {
	width: 100%;
	padding: 20px 30px 30px;
	text-align: center;
	background: url(/images/bg/bg_mento_home_person.jpg) 0 0 no-repeat;
	background-size: cover;
}
.mentoHome .item.group {
	background: url(/images/bg/bg_mento_home_group.jpg) 0 0 no-repeat;
	background-size: cover;
}
.mentoHome .item+.item {
	margin-top: 16px;
}
.mentoHome .item .txtBox {
	padding-top: 210px;
	background: url(/images/common/mento_img_person.png) center 15px no-repeat;
}
.mentoHome .item.group .txtBox {
	background: url(/images/common/mento_img_group.png) center 15px no-repeat;
}
.mentoHome .item .txtBox p {
	line-height: 24px;
	color: #fff;
	word-break: keep-all;
	font-size: 15px;
}

/* 사내전문가 */
.expertList ul {
	padding: 0 16px;
}
.expertList li {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 0 16px 16px; 
	border: 1px solid #ccdfed;
	background: #e8f5ff;
	transition: all .3s;
}
.expertList li:before {
	content:" ";
	position: absolute;
	top: 34px;
	left: 0;
	border-top-left-radius: 77px;
	background: #fff;
	width: 100%;
	height: 100%;
	background: #fff;
}
.expertList li+li {
	margin-top: 16px;
}
.expertList li > a {
	position: relative;
	display: block;
	height: 100%;
	z-index: 10;
}
.expertList li .userInfo {
	position: relative;
	padding: 46px 0 13px 45px;
	border-bottom: 1px solid #e5e5e5;
}
.expertList li .userInfo .imgBox {
	position: absolute;
	top: 38px;
	left: -3px;
	width: 42px;
	height: 42px;
	border: 4px solid #fff;
	border-radius: 50%;
}
.expertList li .userInfo  .imgBox img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.expertList li .userInfo  .imgBox .consulting {
    position: absolute;
    top: -36px;
    right: -68px;
    width: 76px;
    height: 45px;
    padding: 11px 0 0 28px;
    line-height: 1;
    color: #767676;
    font-size: 13px;
    background: url(/images/bg/bg_expert_consulting.png);
    background-size: 100%;
}
.expertList li .userInfo  .txtBox .name {
	display: block;
	line-height: 26px;
	font-size: 15px;	
}
.expertList li .userInfo  .txtBox .team {
	margin-top: 4px;
	line-height: 18px;
	color: #999;
	font-size: 12px;
}
.expertList li .userInfo .state {
	position:  absolute;
	top: 6px;
	right: 0;
}
.expertList li .userInfo .state span {
	display: inline-block;
	padding-left: 21px;
	margin-left: 16px;
	line-height: 21px;
}
.expertList li .userInfo .state span.like {
	background: url(/images/icon/icon_like.png) 3px 6px no-repeat;
	background-size: 12px 10px;
}
.expertList li .userInfo .state span.like.on {
	background: url(/images/icon/icon_like_on.png) 3px 6px no-repeat;
	background-size: 12px 10px;
}
.expertList li .userInfo .state span.question {
	background: url(/images/icon/icon_expert_question.png)  0 3px no-repeat;
	background-size: 15px 15px;
}
.expertList li .userInfo .state span.answer {
	background: url(/images/icon/icon_expert_answer.png) 0 3px no-repeat;
	background-size: 15px 15px;
}
.expertList li .career {
	display: table;
	width: 100%;
	margin-top: 15px;
}
.expertList li .career >.box {
	display: table-cell;
	vertical-align: top;
}
.expertList li .career >.box .item {
	position: relative;
	padding-left: 46px;
}
.expertList li .career >.box .item+.item {
	margin-top: 7px;
}
.expertList li .career >.box .item .title {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 20px;
	color: #69aaeb;
	font-size: 13px;
}
.expertList li .career >.box .item p {
	line-height: 20px;	
}
.expertList li .career >.box .item p > span {
	position: relative;
	display: inline-block;
	padding-right: 18px;
	color: #555;
	font-size: 13px;
}
.expertList li .career >.box .item p > span:before {
	content:" ";
	position: absolute;
	top: 50%;
	right: 8px;
	margin-top: -6px;
	height: 12px;
	border-left: 1px solid #e5e5e5;
}
.expertList li .career >.box .item p > span:last-child:before {
	display: none;
}
.expertView {
	position: relative;
	overflow: hidden;
	padding: 12px 16px;
	border-bottom: 1px solid #555;
	background: #e8f5ff;
}
.expertView:before {
	content:" ";
	position: absolute;
	top: 47px;
	left: 0;
	width: 100%;
	height: 100%;
	border-top-left-radius: 90px;
	background: #fff;
}
.expertView .career,
.expertView .userInfo {
	position: relative;
	z-index: 10;
}
.expertView .userInfo .imgBox {
	margin: 0 auto;
	position: relative;
	width: 86px;
	height: 86px;
	border: 5px solid #fff;
	border-radius: 50%;
}
.expertView .userInfo .imgBox img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.expertView .userInfo  .imgBox .consulting {
    position: absolute;
    top: 22px;
    right: -84px;
    width: 76px;
    height: 45px;
    padding: 11px 0 0 28px;
    line-height: 1;
    color: #767676;
    font-size: 13px;
    background: url(/images/bg/bg_expert_consulting.png);
    background-size: 100%;
}
.expertView .userInfo .txtBox {
	padding: 5px 0 16px;
	text-align: center;
}
.expertView .userInfo .txtBox .name {
	display: block;
	line-height: 28px;
	font-size: 17px;
}
.expertView .userInfo .txtBox .team {
	display: block;
	line-height: 20px;
	color: #767676;
	font-size: 13px;
}
.expertView .userInfo .shareBox {
	position: absolute;
	top: 0px;
	right: 0; 
}  
.expertView .career  {
	padding: 0 0 16px 16px;
}
.expertView .career .item+.item {
	margin-top: 12px;
}
.expertView .career .item .title {
	line-height: 20px;
	padding-left: 28px;
	color: #69aaeb;
	font-size: 13px;
}
.expertView .career .item.email .title {
	background: url(/images/icon/icon_expert_view_email.png) 0 3px no-repeat;
	background-size: 18px 14px;
}
.expertView .career .item.sort .title {
	background: url(/images/icon/icon_expert_view_sort.png) 0 2px no-repeat;
	background-size: 18px 17px;
}
.expertView .career .item.position .title {
	background: url(/images/icon/icon_expert_view_position.png) 0 3px no-repeat;
	background-size: 18px 15px;
}
.expertView .career .item p {
	padding-left: 28px;
	line-height: 20px;
}
.expertView .career .item p > span {
	position: relative;
	display: inline-block;
	padding-right: 18px;
	line-height: 20px;
}
.expertView .career .item p > span:before {
	content: " ";
	position: absolute;
	top: 50%;
	right: 9px;
	height :12px;
	margin-top: -6px;
	border-left: 1px solid #e5e5e5;
}
.expertView .career .item p > span:last-child:before {
	display: none;
}
.expertCon {
	padding-bottom: 20px;
}
.expertCon > h4 {
	display: block;
	margin: 0;
	padding: 0 24px;
	line-height: 54px;
	font-size: 20px;
	font-weight: 400;
}
.expertCon > h4 > .btnToggle {
	float: right;
	width: 50px;
	height: 23px;
	line-height: 23px;
	padding: 0;
	margin-top: 16px;
	color: #767676;
	font-size: 13px;
	background: #e5e5e5;
}
.expertCon > h4 > .btnToggle:before {
	content:"";
	display: inline-block;
	width: 11px;
	height: 7px;
	margin-right: 4px;
    vertical-align: 2px;
	background: url(/images/btn/btn_expert_con_toggle.png) 0 0 no-repeat;
	background-size: 100%;
	transition: all .2s
}
.expertCon > h4 > .btnToggle.active:before {
	transform: rotate(180deg);
}
.expertCon > .box  {
	padding: 20px 16px 0; 
	border-top: 1px solid #e5e5e5;
}
.expertCon > .box h5 {
	padding: 0;
}
.expertCon > .box .item {
	margin-bottom: 40px;
}
.expertCon h5+.txtBox {
	padding-top: 25px;
	line-height: 21px;
	border-top: 1px solid #ddd;
} 
.expertCon .boardList {
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
}

.rqstGuide {
	padding: 20px 0;
	text-align: center;
	background: #eff8ff;
}
.rqstGuide .systemGuide {
    padding: 0 30px 16px;
    text-align: left;
}
.rqstGuide .systemGuide .tipBox .txtBox {
	top: 31px;
}

.tab+.rqstGuide {
	margin-top: -20px;
}
.rqstGuide > .title {
    display: block;
    margin: 0 30px 15px;
    line-height: 40px;
    padding: 0 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: center;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    background: #475666;
}
.rqstGuide > .title > span {
	padding-left: 10px;
	color: #ffa41f;
}
.rqstTipBox {
	position: relative;
	margin-top: 25px;
	padding: 0 16px;
	text-align: left;
}
.rqstTipBox > .title  {
    position: relative;
    margin: 0 0 10px;
    padding-left: 15px;
	line-height: 28px;
	text-align: center;
	font-size: 18px;
}
.rqstTipBox > .title > span {
	display: inline-block;
}
.rqstTipBox > .title .em {
	position: relative;
	margin-right: 5px;
	color: #e91b4d;	
}
.rqstTipBox > .title .em:before {
    content: " ";
    position: absolute;
    top: -2px;
    left: -27px;
    width: 25px;
    height: 26px;
    background: url(/images/common/tit_rqst_tip.png) 0 0 no-repeat;
}
.rqstTipBox .rqstTip {
	padding: 15px 15px 20px 15px;
	border: 5px solid #ccdfed;
	border-radius: 18px;
	background: #fff;
}
.rqstTipBox .rqstTip ul {
	margin-bottom: 14px;	
}
.rqstTipBox .rqstTip li {
	position: relative;
	padding-top: 30px;
	line-height: 26px;
	font-size:15px;
}
.rqstTipBox .rqstTip li+li {
	margin-top: 11px;
}
.rqstTipBox .rqstTip li > span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    line-height: 23px;
    padding: 0 6px 0 4px;
    font-size: 17px;
    z-index: 10;
}
.rqstTipBox .rqstTip li > span:before {
	content: " ";
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: #ffc879;
    z-index: -1;
}
.rqstTipBox .rqstTip li > span > strong {
	padding-left: 3px;
}
.rqstTipBox .rqstTip .info {
	line-height: 20px;
	color: #6a8198;
	font-size: 13px;
}
.rqstStep {
	position: relative;
	padding: 5px 30px; 
	text-align: center;
	z-index: 10;
}
.rqstStep li {
	position: relative;
	display: block;
	min-height: 90px;
	padding-left: 106px;
    padding-top: 28px;
	text-align: left;
}
.rqstStep li+li {
	margin-top: 15px;
}
.rqstStep li:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	box-shadow: 0px 10px 18px rgba(105, 170, 235, 0.1);
}
.rqstStep li.step01:before {
	background: #fff url(/images/icon/icon_rqst_step01.png) center center no-repeat;
}
.rqstStep li.step02:before {
	background: #fff url(/images/icon/icon_rqst_step02.png) center center no-repeat;
}
.rqstStep li.step03:before {
	background: #fff url(/images/icon/icon_rqst_step03.png) center center no-repeat;
}
.rqstStep li.step04:before {
	background: #fff url(/images/icon/icon_rqst_step04.png) center center no-repeat;
}
.rqstStep li.step05:before {
	background: #fff url(/images/icon/icon_rqst_step05.png) center center no-repeat;
}
.rqstStep li > strong {
	display: block;
	margin-bottom: 7px;
    color: #e91b4d;
    font-size: 15px;
}
.rqstStep li p {
	line-height: 24px;
	font-size: 15px;
	word-break: keep-all;
}

.faqBox {
	border-bottom: 1px solid #ddd;
}
.faqBox li+li {
	border-top: 1px solid #ddd;
}
.faqBox li.noData {
    padding: 0 16px;
	line-height: 50px;
	text-align: center;
	color: #888;
}
.faqBox li.on {
	border-top: none;
}
.faqBox li .titBox {
	position: relative;
}
.faqBox li .titBox > a {
	position: relative;
    display: block;
    min-height: 65px;
    padding: 20px 60px;
    line-height: 24px;
    font-size: 15px;
}
.faqBox li .titBox > a:before {
	content: " ";
	position: absolute;
	top: 28px;
	right: 20px;
	width: 16px;
	height:2px;
	background: #bbb;
	transition: all .3s;
}
.faqBox li .titBox > a:after {
	content: " ";
	position: absolute;
    top: 21px;
    right: 27px;
	width: 2px;
	height: 16px;
	background: #bbb;
	transition: all .3s;
}
.faqBox li.on .titBox > a:before {
	transform: rotate(360deg);
	background: #fff;
	transition: all .3s;
}
.faqBox li.on .titBox > a:after {
	transform: rotate(450deg);
	background: #fff;
	transition: all .3s;
}
.faqBox li.on .titBox > a {
	color: #fff;
	background: #404e5c;
}
.faqBox li .conBox {
	position: relative;
    min-height: 85px;
	padding: 20px 20px 20px 60px;
    font-size: 14px;
    line-height: 21px;
	background: #eee;
}
.faqBox li .conBox img {
	max-width: 100%;
	height: auto !important;
}
.faqBox li .titBox:before,
.faqBox li .conBox:before {
	position: absolute;
	left: 16px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
    z-index: 10;
}
.faqBox li .titBox:before {
	content:"Q";
	top: 16px;
	background: #ccdfed;
}
.faqBox li .conBox:before {
	content:"A";
	top: 15px;
	background: #e91b4d;
}
.faqBox li.on .titBox:before {
	color: #e91b4d;
	background: #fff;
}
.faqBox+.msgBox {
	margin-top: 16px;
}
.msgBox  {
	position: relative;
	padding: 16px;
	margin: 0 16px;
	text-align: center;
	background: url(/images/bg/bg_msg_box.png) 0 0 repeat;	
}
.msgBox:before {
	content:" ";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	background: #fff;
	z-index: 10;
}
.msgBox > span {
	position: relative;
	line-height: 26px;
	font-size: 15px;
	word-break: keep-all;
	z-index: 10;
}
.msgBox > span:before {
	content:" ";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: middle;
	background: url(/images/icon/icon_msg.png) 0 0 no-repeat;
}
.msgBox > span > a {
	color: #4b8cfa;
	text-decoration: underline;
}

.msgBox .txtBox {
	position: relative;
	z-index: 10;
}
.msgBox .mento .title {
	font-size: 15px;
	margin-right: 35px;
}
.msgBox .mento .info {
	color: #767676;
	font-size: 13px;
}
.msgBox .mento > .inpRCBox {
	display: inline-block;
	margin-right: 15px;
 }

.noteBox {
	margin: 0 16px;
	padding: 5px;
	background: url(/images/bg/bg_msg_box.png) 0 0 repeat;	
}
.noteBox:first-child {
	margin-top: 16px;
}
.noteBox > .box {
	position: relative;
	min-height: 118px;
	padding: 16px 20px;
	line-height: 21px;
	font-size: 14px;
	background: #fff;
    word-break: keep-all;
}
.noteBox > .box > strong {
	display: block;
	line-height: 24px;
	padding: 6px 0 5px 45px;
	margin-bottom: 12px;
	font-size: 15px;
	background: url(/images/icon/icon_note_box.png) 0 0 no-repeat;
	background-size: 35px 35px;
}
.noteBox > .box p+p {
	margin-top: 8px;
}
.noteBox > .box button {
	display: block;
    margin: 12px auto 0;
}

.noteBox .guide {
	position: relative;
	min-height: 90px;
	padding: 17px 16px;
	background: #fff;
	word-break: keep-all;
}
.noteBox .guide .titleBox {
	margin-bottom: 10px;
}
.noteBox .guide .titleBox > strong {
	line-height: 23px;
	font-size: 17px;
}
.noteBox .guide .titleBox > button {
	float: right;
}
.tipBox .txtBox,
.noteBox .guide .txtBox {
	padding-top: 3px;
	line-height: 21px;
	color: #555;
	font-size: 14px;
}
.tipBox .txtBox .item,
.noteBox .guide .txtBox .item {
	display: block;
	padding: 10px 0 0 16px;
	vertical-align: top;
}
.noteBox .guide .txtBox .item:first-child {
	padding-top: 0;
	padding-bottom: 0;
}
.tipBox .txtBox .item > strong,
.noteBox .guide .txtBox .item > strong {
	position: relative;
	display: block;
}
.tipBox .txtBox .item+p,
.tipBox .txtBox .item > ul+strong,
.tipBox .txtBox .item > strong+strong,
.noteBox .guide .txtBox .item+p,
.noteBox .guide .txtBox .item > ul+strong,
.noteBox .guide .txtBox .item > strong+strong {
	margin-top: 10px;
}
.tipBox .txtBox .item > strong > span,
.noteBox .guide .txtBox .item > strong > span {
	font-weight: 400;
}
.tipBox .txtBox .item > strong:before, 
.noteBox .guide .txtBox .item > strong:before {
	content:"";
	position: absolute;
	top: 4px;
	left: -16px;
	width: 10px;
	height: 10px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	background: #ff7700;
	z-index: 5;
}
.tipBox .txtBox .item > strong:after,
.noteBox .guide .txtBox .item > strong:after {
	content:"";
	position: absolute;
	top: 7px;
	left: -13px;
	width: 4px;
	height: 4px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	background: #fff;
	z-index: 6;
}
.tipBox .txtBox .item ul li,
.noteBox .guide .txtBox .item ul li {
	position: relative;
	padding-left: 11px;
}
.tipBox .txtBox .item ul li:before,
.noteBox .guide .txtBox .item ul li:before {
	content:"-";
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	line-height: 18px;
}

.systemGuide {
	position: relative;
	padding: 16px 10px;
/* 	margin-bottom: 12px; */
	text-align: center;
}
.search .systemGuide {
    padding: 10px 0px 5px;
    text-align: left;
}
.tipBox {
	display: inline-block;
}

.tipBox .txtBox {
	display: none;
	position: absolute;
    top: 47px;
	left: 2vw;
	width: 96vw;
	padding: 17px 28px 17px 20px;
	border: 1px solid #767676;
	border-radius: 7px; 
	text-align: left;
	background: #fff;
	word-break: keep-all;
	z-index: 20;
}
.moneyDiy .tipBox .txtBox {
	left: 0;
	width: 100%;
}
.search .systemGuide .tipBox .txtBox {
	top: 40px;
	left: 0;
	width: 100%;
}
.tipBox.active .txtBox {
	display: block;
}

.tipBox .txtBox .btnClosed {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0;
	background: #e2e2e2 url(/images/btn/btn_closed_20_black.png) center center no-repeat;
	background-size: 10px 10px;
}



.tipBox .txtBox .item {
	padding: 10px 0 0 16px;
}
.tipBox > a {
	position: relative;
	line-height: 24px;
	padding: 0 8px 0 25px;
	border: 1px solid #ddd;
	border-radius: 13px;
	font-size: 15px;
	background: #fff;
}
.tipBox > span {
    position: relative;
    display: inline-block;
    vertical-align: -4px;
    width: 16px;
    height: 16px;
}
.tipBox > span:before,
.tipBox > a:before {
	content:" ";
	position: absolute;
	top:50%;
	left: 5px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: url(/images/icon/icon_syitem_tip.png) 0 0 no-repeat;
	background-size: 100%;
}




/* 학습현황 */
.topFive {
	padding: 20px 16px;
}
.topFive .box .item+.item {
	margin-top: 30px;
}
.topFive .box .item > strong {
	display: block;
	margin-bottom: 10px;
	line-height: 21px;
	text-align: center;
	font-size: 17px;
}
.topFive .box .item .graph {
	border: 1px solid #e5e5e5;
}


/* my page */
.myPageWrap {
	background: #e5e5e5;
}
.myPageWrap > div {
	background: #fff;
}
.myPageUser {
	padding: 11px 16px;
	background: #404f5e !important;
}
.myPageUser .imgBox {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-right: 15px;
	border: 1px solid #fafbfb;
	border-radius: 50%;
	overflow: hidden;
}
.myPageUser .imgBox img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.myPageUser  .name {
	display: inline-block;
	margin-right:13px;
	vertical-align: top;
	line-height: 34px;
	color:#fff;
	font-size: 14px;
}
.myPageUser  .userInfo {
	display: inline-block;
	vertical-align: top;
	line-height: 34px;
}
.myPageUser  .userInfo > span {
	display: inline-block;
	color: #e8f5ff;
}
.myPageUser  .userInfo > span+span {
	position: relative;
	margin-left: 15px;
}
.myPageUser  .userInfo > span+span:before {
	content:" ";
	position: absolute;
	top: 50%;
	left: -7px;
	height: 13px;
	border-left: 1px solid #5c6876;
	margin-top: -7px;
}


.myState {
	margin-bottom: 12px;
}
.myTab {
	background: #f5f5f5;
}
.myTab > ul {
	display: table;
	width: 100%;
	padding: 0 16px;
}
.myTab > ul > li {
	display: table-cell;
	width: 33.33%;
    text-align: center;
}
.myTab > ul > li > a {
	display: inline-block;
	line-height: 36px;
	border-bottom: 2px solid transparent;
}
.myTab > ul > li.on > a {
	border-color: #f7295b;
	font-weight: 700;
}

.myCosList > .txtBox {
	display: inline-block;
	width: 100%;
	padding: 25px 16px 18px;
}
.myCosList > .txtBox p {
	position: relative;
	float: left;
	width: 50%;
	padding: 0 16px;
	line-height: 21px;
	margin-bottom: 7px;
	text-align: right;
	color: #888;
	font-size: 15px;
}
.myCosList > .txtBox p > span {
	position: absolute;
	top: 0;
	left: 16px;
}
.myCosList > .txtBox p > strong {
	color: #333;
}

.myCosList .noData {
	text-align: center;
}
.myCosList .noData p:before {
    content: "";
    display: inline-block;
    width: 51px;
    height: 54px;
    vertical-align: middle;
    margin-right: 15px;
    background: url(/images/bg/bg_my_cos_list_nodata.png) 0 0 no-repeat;
    background-size: 100%;
}
.myCosList .noData p { 
	line-height: 1;
	color: #888;
}

.myCosList .boardList > ul > li .tbBox .asideBox button {
	min-width: 0;
	padding: 0 3px;
	border-color: #555;
	color: #555;
	font-size: 12px;
	font-weight: 700;
}
.myCosList .boardList > ul > li .tbBox .txtBox p.period {
	padding-left: 24px;
	background:  url(/images/icon/icon_period.png) 0 3px no-repeat;
	background-size: 17px 13px;
}


.myCosList .linkBox {
	padding: 12px 16px;
	text-align: right;
}
.myCosList .linkBox > a {
	display: inline-block;
	line-height:23px;
	padding: 0 6px;
	border-radius: 2px;
	color: #fff;
	background: #f7295b;
	transition: all .3s;
}
.myCosList .linkBox > a:active {
	background: #b81b3e;
}
.myCosList .linkBox > a:after {
	content:"";
	display: inline-block;
	width: 5px;
	height: 9px;
	margin-left: 6px;
    vertical-align: 1px;
	background: url(/images/btn/btn_my_cos_link.png) 0 0 no-repeat;
	background-size: 100%;
}

.timeGraph {
	display: inline-block;
	width: 100%;
	padding: 30px 16px;
}
.timeGraph > .txtBox {
	padding: 0 16px;
	text-align: right;
}
.timeGraph > .txtBox p {
	color: #888;
}
.timeGraph > .txtBox p > span {
	float: left;
	width: 106px;
	text-align: left;
}
.timeGraph > .txtBox p .num {
	color: #333;
	padding-right: 4px;
}
.timeGraph > .txtBox ul {
	position: relative;
	margin: 5px 0;
	padding-left: 16px;
}
.timeGraph > .txtBox ul:before {
	content:" ";
	position: absolute;
	top: 5px;
	left: 5px;
	bottom: 5px;
	border-left: 2px solid #ddd;
}
.timeGraph > .txtBox ul > li {
	line-height: 24px;
	color: #888;
}
.timeGraph > .txtBox ul > li > span {
	float: left;
	display: inline-block;
	width: 90px;
	text-align: left;
}
.timeGraph > .txtBox ul > li > .num {
	color: #333;
	padding-right: 4px;
}
.timeGraph > div.monthBox,
.timeGraph > div.sumBox {
	border: 1px solid #ddd;
}
.timeGraph > div.monthBox {
	margin-top: 20px;
	padding-bottom: 10px;
	border-width: 1px 1px 0px 1px;
}
.timeGraph > div.sumBox {
	position: relative;
	padding: 20px 0;
	border-top-color: #e5e5e5;
}
.timeGraph > div.sumBox > .graph {
	position: relative;
	margin: 0 auto;
	width: 183px; 
	height: 189px;
}
.timeGraph > div.sumBox > .graph:before {
	content: " ";
	position: absolute;
	top: -4px;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(/images/bg/bg_time_graph.png) center center no-repeat;
	z-index: 10;
}
.sumBox .graphTxt {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	width: 110px;
 	height: auto;
 	margin-left: -55px;
 	margin-top: -59px;
 }
.sumBox .graphTxt > div {	
	padding: 6px 0;
	text-align: center;
}
.sumBox .graphTxt > .allTime {
	border-top: 1px solid #ccc;
}
.sumBox .graphTxt > div > p {
	line-height: 20px;
	color: #555;
	font-size: 13px;
}
.sumBox .graphTxt > div > span {
	display: block;
	line-height: 25px;
	color: #767676;
	font-size: 13px;
}
.sumBox .graphTxt > .sumTime .num {
	color: #ff7700;
	font-size: 22px;
}
.sumBox .graphTxt > .allTime .num {
	color: #889aac;
	font-size: 22px;
}
.timeGraph > .btnMore {
	display: block;
	line-height: 24px;
	border: 1px solid #ccc;
	border-top: none;
	text-align: center;
	color: #767676;
	font-weight: 700;
	background: #f5f5f5;
}

.moneyBox {
	display: inline-block;
	width: 100%;
	padding: 20px 16px;
}
.moneyBox >.txtBox {
	display: inline-block;
	margin-bottom: 13px;
	width: 100%;
	text-align: right;
}
.moneyBox >.txtBox > p {
	color: #888;
	padding: 0 16px;
}
.moneyBox >.txtBox p > span {
	float: left;
}
.moneyBox >.txtBox p > strong {
	font-size: 15px;
}
.moneyBox >.txtBox p > strong.num {
	color: #333;
}
.moneyBox >.txtBox .moneyDiy {
	position: relative;
	margin-top: 16px;
	padding: 17px 16px 0;
	border-top: 1px solid #e5e5e5;
}
.moneyBox >.txtBox .moneyDiy p {
	color: #888;
}
.moneyBox >.txtBox .moneyDiy .diyTit {
	float: left;
	display: inline-block;
	margin-bottom: 4px;
	padding: 0 10px;
	line-height: 19px;
	border-top-left-radius: 6px;
	border-bottom-right-radius: 6px;
	color: #fff;
	background: #888;
}
.moneyBox >.txtBox .moneyDiy .tipBox {
	float: left;
}
.moneyBox > div.moneyGraph,
.moneyBox > div.moneyState {
	border: 1px solid #ddd;
}
.moneyBox > div.moneyGraph {
	padding: 20px 15px 20px;
	
	text-align: center;
	border-width: 1px 1px 0px 1px;
}
.moneyGraph .titleBox {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid #555;
	text-align: left;
}
.moneyGraph .titleBox .title {
	display: inline-block;
	margin-right: 15px;
	line-height: 1;
	font-size: 17px;
}
.moneyGraph .graphBox,
.moneyGraph .graph {
	position: relative;
	display: inline-block;
	margin-right: 30px;
	width: 90px;
	height: 90px;
	vertical-align: top;
}
.moneyGraph .graphBox .txt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height :100%;
	padding-top: 40px;
	line-height: 1;
	text-align: center; 
	color: #bbb;
	font-size: 12px;
	font-weight: 700;
/* 	background: url(/images/icon/icon_money_graph.png)  center 23px no-repeat; */
}

.moneyGraph .diyTxt {
	padding: 22px 13px 18px;
	text-align: left;
}
.moneyGraph .diyTxt .txtBox {
	display: inline-block;
	width: 140px;
}
.moneyGraph .moneyTxt {
	display: block;
	padding-left: 33px;
	line-height: 38px;
	border: 1px solid #eee;
	vertical-align: top;
	text-align: left;
}

.moneyGraph .numTxt {
	display: inline-block;
}
.moneyGraph .numTxt+.numTxt {
	margin-top: 12px;
}
.moneyGraph .diyTxt .numTxt {
	display: block;
	padding-left: 42px;
	text-align: left;
	background: url(/images/icon/icon_mypage_diy.png) 0 7px no-repeat;
	background-size: 22px 22px;
}
.moneyGraph .diyTxt .numTxt.use {
	background: url(/images/icon/icon_mypage_diy_use.png) 0 7px no-repeat;
	background-size: 22px 22px;
}
.moneyGraph .moneyTxt .numTxt {
	background: url(/images/icon/icon_mypage_money.png) 0 10px no-repeat;
	background-size: 22px 17px;
}
.moneyGraph .moneyTxt .numTxt.nonCourse {
	background: url(/images/icon/icon_mypage_money_01.png) 0 10px no-repeat;
}
.moneyGraph .moneyTxt .numTxt.ai {
	background: url(/images/icon/icon_mypage_money_03.png) 0 10px no-repeat;
}


.moneyGraph .numTxt > strong {
	display: block;
	line-height: 17px;
	color: #555;
}
.moneyGraph .numTxt > span {
	line-height: 20px;
	color: #bbb;
}

.moneyGraph .numTxt .num {
	line-height: 24px;
	font-size: 15px;
	color: #4b8cfa;
}
.moneyGraph .numTxt.use .num {
	color: #f7295b;
}
.moneyGraph .moneyTxt .numTxt .num {
	color: #6a8198;
}
.moneyGraph .moneyTxt .numTxt > strong {
	display: inline-block;
	padding: 0 25px 0 42px;
}


.moneyBox > div.moneyState {
	padding: 16px;
	border-top-color: #e5e5e5;
	border-bottom: none;
}
.moneyState > div {
	display: inline-block;
	width: 100%;
	padding: 11px 0 11px 82px;
}
.moneyState .item .titleBox {
	float: left;
}
.moneyState .item .title {
	display: block;
	line-height: 21px;
	font-size: 13px;
}
.moneyState .item+.item {
	margin-top: 10px;
}
.moneyState .item.type1 {
	background: url(/images/icon/icon_my_money01.png) 5px 0 no-repeat;
	background-size: 60px 60px;
}
.moneyState .item.type2 {
	background: url(/images/icon/icon_my_money02.png) 5px 0 no-repeat;
	background-size: 60px 60px;
}
.moneyState .item.type3 {
	background: url(/images/icon/icon_my_money03.png) 5px 0 no-repeat;
	background-size: 60px 60px;
}
.moneyState .item.type4 {
	background: url(/images/icon/icon_my_money04.png) 5px 0 no-repeat;
	background-size: 60px 60px;
}
.moneyState .item .txtBox {
	float: right;
}
.moneyState .item .txtBox > span {
	display: block;
	margin-top: 6px;
	line-height: 26px;
	color: #bbb;
	font-weight: 700;
}
.moneyState .item .txtBox > span > strong {
	font-size: 15px;
	color: #333;
}
.moneyBox .btnMore {
	display: inline-block;
	line-height: 18px;
	color: #888;
}
.moneyBox .btnMore:after {
	content:"";
	display: inline-block;
	width: 5px;
	height: 9px;
	vertical-align: 1px;
	margin-left: 4px;
	background: url(/images/btn/btn_my_money_more.png) 0 0 no-repeat;
	background-size: 100%;
}
.moneyBox .btnMore:active {
	text-decoration: underline;
}

.moneySum {
	padding: 9px 25px;
	text-align: center;
	border: 1px solid #ddd;
	border-top: none;
	background: #eee;
}
.moneySum > span {
	display: inline-block;
	line-height: 30px;
	padding-left: 35px;
	font-size: 14px;
	background: url(/images/icon/icon_money.png) 0 4px no-repeat;
}
.moneySum > span > strong {
	margin-left: 5px;
	font-size: 17px;
}
.myState > .tab1,
.myState > .tab2,
.myState > .tab3 {
	display: none;
}
.myState > .tab1.active,
.myState > .tab2.active,
.myState > .tab3.active {
	display: inline-block;
	width: 100%;
}
.aprvBox {
	display: inline-block;
	width: 100%;
	padding: 16px;
	margin-bottom: 12px;
}
.aprvBox h4 {
	margin: 0 0 7px 0;
	padding: 0;
	line-height: 23px;
	font-size: 15px;
	font-weight: 400;
}
.aprvBox .box {
	display: inline-block;
	width: 100%;
}
.aprvBox .box > a {
	float: left;
	position: relative;
	margin-left: 8px;
	width: 78px;
	height: 35px;
	line-height: 35px;
	border-radius: 2px;
	text-align: center;
	font-size: 14px;
	background: #e8f5ff;
}
.aprvBox .box > a:active {
	background: #ccdfed;
}
.aprvBox .box > a.btnAprvBox {
	width: calc(100% - 172px);
	margin-left: 0; 
	background: #eee;
}
.aprvBox .box > a.btnAprvBox:active {
	background: #dbdbdb;
}
.aprvBox .box > a.btnAprvBox > strong {
	color: #e91b4d;
	padding-left: 11px;
}
.aprvBox .box > a .new {
	position: absolute;
	top: -5px;
	right: -5px;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 10px;
    background: #f7295b;
}
.rqstBox {
	display: inline-block;
	width: 100%;
	margin-bottom: 12px;
	padding: 16px;
}
.rqstBox h4 {
	margin: 0 0 17px 0;
	padding: 0;
	line-height: 23px;
	font-size: 17px;
	font-weight: 400;
}
.rqstBox ul {
	display: inline-block;
	width: 100%;
}
.rqstBox ul li {
	position: relative;
	float: left;
	width: calc(50% - 8px);
	min-height: 50px;
	margin-bottom: 15px;
	padding: 3px 0 3px 66px;	
}
.rqstBox ul li:nth-child(even) {
	margin-left: 16px;
}
.rqstBox ul li:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #f5f5f5;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.rqstBox ul li.sts01:before {
	background-image: url(/images/icon/icon_rqst_01.png);
}
.rqstBox ul li.sts02:before {
	background-image: url(/images/icon/icon_rqst_02.png);
}
.rqstBox ul li.sts03:before {
	background-image: url(/images/icon/icon_rqst_03.png);
}
.rqstBox ul li.sts04:before {
	background-image: url(/images/icon/icon_rqst_04.png);
}
.rqstBox ul li.sts05:before {
	background-image: url(/images/icon/icon_rqst_05.png);
}
.rqstBox ul li.sts06:before {
	background-image: url(/images/icon/icon_rqst_06.png);
}
.rqstBox ul li.sts07:before {
	background-image: url(/images/icon/icon_rqst_07.png);
}
.rqstBox ul li.sts08:before {
	background-image: url(/images/icon/icon_rqst_08.png);
}
.rqstBox ul li.sts09:before {
	background-image: url(/images/icon/icon_rqst_09.png);
}
.rqstBox ul li.sts10:before {
	background-image: url(/images/icon/icon_rqst_10.png);
}
.rqstBox ul li > span {
	display: block;
	line-height: 22px;
}
.rqstBox ul li .title {
	color: #555;
}
.rqstBox ul li .num > a {
	display: inline-block;
	color: #333;
	font-size: 14px;
	font-weight: 700;
}
.rqstBox ul li .num > a > span {
	padding-left: 5px;
	vertical-align: 0;
	color: #767676;
	font-size: 15px;
	font-weight: 400;
}
.rqstBox ul li .num > a:active {
	border-bottom: 1px solid #474747;
}
.pushBox {
	position: relative;
	line-height: 23px;
	margin: 0 8px 8px;
	margin-top: -4px;
	padding: 10px 12px;
	border-radius: 2px;
	color: #555;
	background: #fff2f5 !important;
}
.pushBox+.pushBox { 
	margin-top: 0;
}
.pushBox  > .title {
	padding-left :25px;
	line-height: 23px;
	color: #e91b4d;
	font-size: 13px;
	background: url(/images/icon/icon_bell.png) 0 1px no-repeat;
}
.pushBox > .btnClosed {
	position: absolute;
	top: 4px;
	right: 3px;
	width: 24px;
	height: 24px;
	font-size: 0;
	background: url(/images/btn/btn_closed_20_black.png) center center no-repeat;
	background-size: 10px 10px;
}
.pushBox > button {
	position: absolute;
	top: 7px;
	right: 37px;
	padding: 0;
	border: none;
	color: #888;  
	font-size: 12px;
	background: transparent;
}
.pushBox  > button:after {
    content: " ";
    position: absolute;
    top: 50%;
    right: -9px;
    height :10px;
    margin-top: -5px;
    border-left: 1px solid #eed8de;
}
.pushBox  p .sort {
	display: inline-block;
	padding: 0 6px;
	margin-right: 4px;
	line-height:17px;
	color: #767676;
	font-size: 12px;
	background: #fff;
}
.pushBox  p .sort+strong {
	margin-left: 6px;
}

.myClubBox {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 12px;
	padding: 16px;
}
.myClubBox h4 {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 23px;
	font-size: 17px;
	font-weight: 400;
}
.myClubBox > .box {
	position: relative;
	padding: 0 25px 0 65px;
}
.myClubBox > .box+.box {
	margin-top: 20px;
}
.myClubBox > .box .titBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
}
.myClubBox > .box .sort {
	display: table;
	width: 50px;
	height: 50px;
	border-top-left-radius: 14px;
	border-bottom-right-radius: 14px;
	background: #407ff9;
    background: -moz-linear-gradient(-45deg, #5896fa 0%, #5190fa 100%);
    background: -webkit-linear-gradient(-45deg, #5896fa 0%,#5190fa 100%);
    background: linear-gradient(135deg, #407ff9 0%,#5896fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#407ff9', endColorstr='#5896fa',GradientType=1 );
}
.myClubBox > .box.cos .sort {
	background: #ff8112;
    background: -moz-linear-gradient(-45deg, #ff8112 0%, #ff981f 100%);
    background: -webkit-linear-gradient(-45deg, #ff8112 0%,#ff981f 100%);
    background: linear-gradient(135deg, #ff8112 0%,#ff981f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8112', endColorstr='#ff981f',GradientType=1 );
}
.myClubBox > .box .sort > strong {
	display: table-cell;
	line-height :17px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size :13px;
}
.myClubBox > .box .titBox .num {
	display: block;
	margin-top: 16px;
	line-height:21px;
	text-align: center;
	color: #767676;
	font-size: 13px;
}
.myClubBox > .box .titBox .num > strong {
	color: #333;
	font-size: 13px;
}
.myClubBox > .box li+li {
	margin-top :12px;
}
.myClubBox > .box li a {
	display: block;
	margin-bottom: 2px;
	line-height: 21px;
	font-size: 14px;
	font-weight: 700;
}
.myClubBox > .box li a:active {
	text-decoration: underline;
}
.myClubBox > .box li .period {
	line-height: 20px;
	color: #999;
	font-size:13px;
}
.myClubBox > .box .noData {
    padding-top: 70px;
    padding-bottom: 10px;
    line-height: 1;
    text-align: center;
    color: #888;
	background: url(/images/icon/icon_mypage_nodata_club.png) center 0 no-repeat;
	background-size: 60px 60px;
}
.myClubBox > .box.cos .noData {
	background: url(/images/icon/icon_mypage_nodata_cos.png) center 0 no-repeat;
	background-size: 60px 60px;
}

.myPageLink {
	display: table;
	width: 100%;
	margin-bottom: 12px;
}
.myPageLink > .item {
	display: table-cell;
	width: 50%;
	height: 166px;	
	text-align: center;
}
.myPageLink > .item+.item {
	border-left: 2px solid #e5e5e5;
}
.myPageLink > .item > a {
	display: block;
    height: 100%;
	padding: 25px 10px 0;
	background: #f5f5f5;
}
.myPageLink > .item a:active {
	background: #eee;
}
.myPageLink > .item a.noData {
	cursor: default;
	background: #f5f5f5 !important;
}
.myPageLink > .item .title {
	display: block;
	padding-top: 48px;
	line-height: 1; 
	font-size: 20px;
}
.myPageLink > .item.counsel .title  {
	background: url(/images/icon/icon_mypage_counsel.png) center 0 no-repeat;
}
.myPageLink > .item.like .title  {
	background: url(/images/icon/icon_mypage_like.png) center 0 no-repeat;
}
.myPageLink > .item .box {
	position: relative;
	display: table;
	width: 100%;
	height: 105px;
	padding: 15px 0;
}
.myPageLink > .item ul {
	display: table-cell;
	vertical-align: middle;
}
.myPageLink > .item ul li {
	line-height: 23px;
	color: #888;
}
.myPageLink > .item ul li > .num {
	display: inline-block;
	width: 40px;
	text-align: right;	
	color: #333;
}
.myPageLink > .item ul li > .txt {
	display: inline-block;
	width: 75px;
	text-align: left;
}

.myMentoBox {
	display: inline-block;
	width: 100%;
	margin-bottom: 12px;
	padding: 16px;
}
.myMentoBox h4 {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 23px;
	font-size: 15px;
	font-weight: 400;
}
.myMentoBox > .box {
	position: relative;
	padding: 0 25px 0 65px;
}
.myMentoBox > .box .sort {
	position: absolute;
	top: 0;
	left: 0;
	display: table;
	width: 50px;
	height: 50px;
	border-top-left-radius: 14px;
	border-bottom-right-radius: 14px;
	background: #c3af77;
    background: -moz-linear-gradient(-45deg, #c3af77 0%, #d0bf8e 100%);
    background: -webkit-linear-gradient(-45deg, #c3af77 0%,#d0bf8e 100%);
    background: linear-gradient(135deg, #c3af77 0%,#d0bf8e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3af77', endColorstr='#d0bf8e',GradientType=1 );
}
.myMentoBox > .box.group .sort {
	background: #869b9e;
    background: -moz-linear-gradient(-45deg, #869b9e 0%, #9bafb1 100%);
    background: -webkit-linear-gradient(-45deg, #869b9e 0%,#9bafb1 100%);
    background: linear-gradient(135deg, #869b9e 0%,#9bafb1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#869b9e', endColorstr='#9bafb1',GradientType=1 );
}
.myMentoBox > .box .sort > strong {
	display: table-cell;
	line-height :12px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-size :13px;
}
.myMentoBox > .box .sort > strong > span {
	display: inline-block;
	padding-left: 10px;
	padding-right: 3px;
	margin-top: 4px;
	background: url(/images/common/mento_group_slash.png) 0 1px no-repeat;
}
.myMentoBox > .box+.box {
	margin-top: 20px;
}
.myMentoBox > .box .txtBox a {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.myMentoBox > .box .txtBox a:active {
	text-decoration: underline;
}
.myMentoBox > .box .txtBox .mtTit {
	display: block;
	margin-bottom: 10px;
	line-height: 22px;
	font-size: 14px;
	font-weight: 700;
}
.myMentoBox > .box .txtBox ul li {
	position: relative;
	padding-right: 65px; 
}
.myMentoBox > .box .txtBox ul li > a {
	display: block;
	line-height: 23px;
	color: #555;
	font-size: 13px;
}
.myMentoBox > .box .txtBox ul li .date {
	position: absolute;
	top: 0;
	right: 0;
	line-height: 23px;
	color: #999;
	font-size: 13px;
}
.myMentoBox > .box .txtBox ul li.noData {
	padding-right: 0;
	line-height: 46px;
	text-align: center;
	color: #888;
}
.myMentoBox > .box >.noData {
	padding-top: 70px;
    padding-bottom: 10px;
    line-height: 1;
    text-align: center;
    color: #888;
	background: url(/images/icon/icon_mypage_nodata_group.png) center 0 no-repeat;
	background-size: 60px 60px;
}
.myMentoBox > .box.person >.noData {
	background: url(/images/icon/icon_mypage_nodata_person.png) center 0 no-repeat;
	background-size: 60px 60px;
}

.itrstBox {
	position: relative;
    padding: 16px 16px 0;
	background: #e8f5ff !important;
}
.itrstBox:before {
	content:" ";
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 100%;
	height: 30px;
	background: #e8f5ff; 
}
.itrstBox h4 {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 23px;
	font-size: 17px;
	font-weight: 400;
}
.itrstBox ul {
	font-size: 0;
}
.itrstBox ul li {
	display: inline-block;
	height: 26px;
	margin: 4px 6px 4px 0;
	padding:  0 10px;
	line-height: 26px;
	border-radius: 13px;
	text-align: center;
	color: #767676;
	font-size: 13px;
	background: #fff;
}
.itrstBox .item  {
	min-height: 34px;
}
.itrstBox .item > strong {
	display: block;
	margin-bottom: 7px;
	line-height: 14px;
	font-size :13px;
	font-weight: 400;
}
.itrstBox .item+.item {
	margin-top: 7px;
}
.itrstBox .noData {
	padding: 9px 0;
	line-height: 21px;
	text-align: center;
	color: #888;
}
.itrstBox .btnSetting {
	position: absolute;
	top: 16px;
	right: 16px;
	height: 22px;
	line-height: 20px;
	padding: 0 5px;
	border: 1px solid #ddd;
	border-radius: 2px;
	vertical-align: -1px;
	font-size: 13px;
	background: #fff;
}
.itrstBox .btnSetting:active {
	border-color: #69aaeb;
}
.itrstBox .btnSetting:after {
	content:" ";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 4px;
    vertical-align: -1px;
	background: url(/images/btn/btn_mypage_itrst_setting.png) 0 0 no-repeat;
}
.itrstSetting {
	border-bottom: 1px solid #e5e5e5;
	font-size: 0;
}
.itrstSetting  .item {
	display: inline-block;
	width: 100%;
	margin-bottom: 17px;
}
.itrstSetting  .item > strong {
	display: block;
	line-height: 34px;
	font-size: 15px;
	margin-bottom: 17px;
	text-align: center;
	background: #eee;
}
.itrstSetting .item.type2 .box+.box {
	padding-top: 5px;
	margin-top: 5px;
	border-top: 1px solid #e5e5e5;
}
.itrstSetting .item.type2 .box > strong {
	display: block;
	margin-bottom: 10px;
	line-height: 23px;
	font-size: 14px;
}

.itrstSetting ul {
	display: inline-block;
	width: 100%;
}
.itrstSetting ul li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 10px;
	font-size:13px;
}
.itrstSetting ul li:nth-child(odd) {
	padding-right: 10px;
}
.itrstSetting .item ul li {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.itrstSetting ul li .checkBox > span {
	display: inline-block;
	padding: 0;
	line-height: 20px;
}
.itrstSetting ul li .checkBox i {
	position: absolute;
	top: 3px;
	left: 0;
}

/* E-Frequency */
.frqcGuideBox {
	background: #404e5c url(/images/bg/bg_freauency.png) 0 0 no-repeat;
	background-size: 100% auto;	
}
.frqcGuideBox .imgBox img {
	max-width: 100%;
}
.frqcGuideBox .conBox {
	padding: 0 0px 50px;
}
.frqcGuideBox .conBox .titBox img {
	width: 100%;
}
.frqcGuideBox .conBox .txtBox {
	margin-bottom: 18px;
	text-align: center;
}
.frqcGuideBox .conBox .txtBox p {
	line-height: 20px;
	color: #fff;
	font-size: 13px;
}
.frqcGuideBox .conBox .txtBox .pink {
	color: #ff688d;
}
.frqcGuideBox .conBox .txtBox .yellow {
	color: #ffa41f;
}
.frqcGuideBox .conBox .itemBox {
	position: relative;
	margin-bottom: 20px;
	word-break: keep-all;
	background: #fff;
}
.frqcGuideBox .conBox .itemBox:before,
.frqcGuideBox .conBox .itemBox:after {
	content: "";
	position: absolute;
	top: 2px;
	width: 3px;
	height: 100%;
	z-index: 10;
}
.frqcGuideBox .conBox .itemBox:before {
	left: 0;
	background: url(/images/bg/bg_frequency_item_left.png) 0 0 repeat-y;
    background-size: 3px 12px;
}
.frqcGuideBox .conBox .itemBox:after {
	right: 0;
	background: url(/images/bg/bg_frequency_item_right.png) 0 0 repeat-y;
    background-size: 3px 12px;
}
.frqcGuideBox .conBox .itemBox .title {
	line-height: 45px;
    padding-left: 32px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-shadow: 2px 2px 9px #0000002e;
}
.frqcGuideBox .conBox .itemBox .title:before {
	content:" ";
	display: inline-block;
	width: 23px;
	height: 18px;
	margin-right: 6px;
    vertical-align: -2px;
	background: url(/images/common/bult_frequency_title.png) 0 0 no-repeat;
	background-size: 100%;
}
.frqcGuideBox .conBox .itemBox.type1 .title {
	background: #ff537d;
} 
.frqcGuideBox .conBox .itemBox.type2 .title {
	background: #ffa41f;
} 
.frqcGuideBox .conBox .itemBox.type1 .list {
	padding: 20px 40px;
	background: url(/images/bg/bg_frequency_item_type1.png) right 42px no-repeat;
	background-size: 90px 70px;
}
.frqcGuideBox .conBox .itemBox.type2 .list {
	padding: 20px 10px 20px 26px;
	background: url(/images/bg/bg_frequency_item_type2.png) right 14px no-repeat;
	background-size: 73px 65px;
}
.frqcGuideBox .conBox .itemBox .guideTxtBox {
	position: absolute;
	top: 9px;
	right: 10px;
	width: 87px;
	height: 74px;
	padding: 20px 14px 0 16px;
	line-height: 15px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	background: url(/images/bg/bg_frequency_guide_txt.png) 0 0 no-repeat;
	background-size: 100%;
}
.frqcGuideBox .conBox .itemBox .guideTxtBox  > span {
	color: #f7295b;
}
.frqcGuideBox .conBox .itemBox .list {
	position: relative;
}
.frqcGuideBox .conBox .itemBox .list:before,
.frqcGuideBox .conBox .itemBox .list:after {
	content:"";
	position: absolute;
	top: 50%;
	width:17px;
	height: 35px;
    margin-top: -39px;
	background: #404e5c;
}
.frqcGuideBox .conBox .itemBox .list:before {
	left: 0;
	border-top-right-radius: 17px;
	border-bottom-right-radius: 17px;
}
.frqcGuideBox .conBox .itemBox .list:after {
	right: 0;
	border-top-left-radius: 17px;
	border-bottom-left-radius: 17px;
}
.frqcGuideBox .conBox .itemBox .list > strong {
	position: relative;
	display: block;
    line-height: 26px;
	margin-bottom: 13px;
	font-size: 16px;
}
.frqcGuideBox .conBox .itemBox.type2 .list > strong:before {
	content:" ";
	position: absolute;
	bottom: -9px;
	left: -18px;
	width: 242px;
	height: 36px;
	background: url(/images/bg/bg_frequency_item_list_title.png) 0 0 no-repeat;
}
.frqcGuideBox .conBox .itemBox .list ul {
	display: inline-block;
	width: 100%;
}
.frqcGuideBox .conBox .itemBox .list ul li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 14px;
	line-height: 21px;
	font-size: 14px;
}
.frqcGuideBox .conBox .itemBox .list ul li:before {
	content:"";
	position: absolute;
	top: 10px;
	left: 0;
	width: 5px;
	border-top: 2px solid #ccc;
}
.frqcGuideBox .conBox .itemBox .list ol li {
	position: relative;
	padding-left: 30px;
	line-height: 18px;
	font-size: 14px;
}
.frqcGuideBox .conBox .itemBox .list ol li > span.num {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 13px;
	background: #ffa41f;
}
.frqcGuideBox .conBox .itemBox .list ol li > .red {
	color: #e91b4d;
}
.frqcGuideBox .conBox .itemBox .list ol li+li {
	margin-top: 6px;
}
.frqcGuideBox .conBox .itemBox .list ol li p {
	font-size: 12px;
}
.frqcGuideBox .btnArea {
	margin-top: 0;
}
/* .frqcGuideBox .btnArea button {
	padding: 0 40px;
	height: 48px;
	font-size: 20px;
} */


.frqcStreamMap {
	position: relative;
	background: #eee;
}
.frqcStreamMap > .btnArea {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 15px 16px 17px;
    z-index: 10;
}
.frqcStreamMap > .titleBox {
	position: absolute;
	top: 53px;
	left: 0;
	width: 100%;
	max-width: 360px;
	padding: 0 16px;
	z-index: 10;
}
.frqcStreamMap > .titleBox img {
	width: 100%;
}
.frqcStreamMap .conBox {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 325px 16px 98px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.frqcStreamMap .conBox.type1 {
	background-image: url(/images/bg/bg_stream_map_stage1.jpg);
}
.frqcStreamMap .conBox.type2 {
	background-image: url(/images/bg/bg_stream_map_stage2.jpg);
}
.frqcStreamMap .conBox.type3 {
	background-image: url(/images/bg/bg_stream_map_stage3.jpg);
}
.frqcStreamMap .conBox.type4 {
	background-image: url(/images/bg/bg_stream_map_stage4.jpg);
}

.frqcStreamMap .conBox > .title {
	position: absolute;
	top: 115px;
	right: 16px;
    display: inline-block;
	width: 110px;
	height: 27px;
	line-height: 27px;
	border-radius: 14px;
	text-align: center;
	color: #fff;
	font-size: 15px;
	background: #f7295b;
}


.frqcStreamMap .stageBox {
    margin: 0 auto;
    max-width: 330px;
}
.stageBox .stageStap {
	padding-top: 11px;
	text-align: center;
	background: #fff;
}
.stageBox .stageStap ul {
	display: inline-block;
}
.stageBox .stageStap li {
	float: left;
	line-height: 27px;
	color: #aaa;
	font-size: 13px;
}
.stageBox .stageStap li.on {
	color: #333;
}
.stageBox .stageStap li+li {
	position: relative;
	margin-left: 30px;
}
.stageBox .stageStap li+li:before {
	content:" ";
	position: absolute;
	top: 7px;
	left: -34px;
	width: 10px;
	height: 14px;
	background: url(/images/common/arrow_stage_step.png) 0 0 no-repeat;
}
.stageBox .stageStap li > strong {
	padding-left: 4px;
	font-size: 17px;
}
.frqcStreamMap .stageBox .empty {
	width: 100%;
/* 	height: 26px; */
	padding-top: 8.1%;
	background: url(/images/bg/bg_stage_empty.png) 0 0 no-repeat;
	background-size: 100%;
}
.stampArea {
    padding: 10px 16px 20px;
	text-align: center;
	background: #fff;
}
.stampArea ul {
	margin: 0 auto;
	max-width: 270px;
	display: inline-block;
}
.stampArea ul li {
	float: left;
	width: 40px;
	height: 40px;
	margin-left: 17px;
	margin-bottom: 10px;
	font-size: 0;
	background: url(/images/bg/bg_stap.png) center center no-repeat;
	background-size: 100%;
}
.conBox.type1 .stampArea ul li.on1 {
	background-image: url(/images/bg/bg_stap_stage1_on1.png);
}
.conBox.type1 .stampArea ul li.on2 {
	background-image: url(/images/bg/bg_stap_stage1_on2.png);
}
.conBox.type2 .stampArea ul li.on1 {
	background-image: url(/images/bg/bg_stap_stage2_on1.png);
}
.conBox.type2 .stampArea ul li.on2 {
	background-image: url(/images/bg/bg_stap_stage2_on2.png);
}
.conBox.type3 .stampArea ul li.on1 {
	background-image: url(/images/bg/bg_stap_stage3_on1.png);
}
.conBox.type3 .stampArea ul li.on2 {
	background-image: url(/images/bg/bg_stap_stage3_on2.png);
}
.conBox.type4 .stampArea ul li.on1 {
	background-image: url(/images/bg/bg_stap_stage4_on1.png);
}
.conBox.type4 .stampArea ul li.on2 {
	background-image: url(/images/bg/bg_stap_stage4_on2.png);
}
.stampArea ul li.special {
	background: url(/images/bg/bg_stap_special.png) center center no-repeat;
	background-size: 100%;
}
.conBox.type1 .stampArea ul li.special.on {
	background-image: url(/images/bg/bg_stap_stage1_special_on.png);
}
.conBox.type2 .stampArea ul li.special.on {
	background-image: url(/images/bg/bg_stap_stage2_special_on.png);
}
.conBox.type3 .stampArea ul li.special.on {
	background-image: url(/images/bg/bg_stap_stage3_special_on.png);
}
.conBox.type4 .stampArea ul li.special.on {
	background-image: url(/images/bg/bg_stap_stage4_special_on.png);
}

.stampArea ul li:nth-child(5n+1) {
	margin-left: 0;
}
.stageBox .btnArea button.prev:before,
.stageBox .btnArea button.next:after {
	content: " ";
    display: inline-block;
    width: 5px;
    height: 11px;
    vertical-align: -1px;
    background-image: url(/images/btn/btn_large_arrow_black.png);
    background-repeat: no-repeat;
    background-size: 10px 11px;
}
.stageBox .btnArea button.prev:active:before,
.stageBox .btnArea button.next:active:after {
    background-image: url(/images/btn/btn_large_arrow_white.png);
    background-size: 10px 11px;
}

.stageBox .btnArea button.prev:before {
    margin-right: 10px;
    background-position: 0 0;
}
.stageBox .btnArea button.next:after {
    margin-left: 10px;
    background-position: -5px 0;
}

h4.frqc {
	font-weight: 400;
}
h4.frqc > strong {
	font-weight: 700;
}

/* 역량경가 항목 */
.cpbtGuide {
	padding: 20px 16px 0 36px;
	background: #f5f5f5;
}
.cpbtGuide .titleBox {
	display: none;
}
.cpbtGuide .titleBox > strong {
	display: inline-block;
	line-height: 44px;
	color: #999;
	text-align: center;
}
.cpbtGuide .titleBox > .tit01 {
	float: left;
	width: 250px;
}
.cpbtGuide .titleBox > .tit02 {
	width: calc(100% - 250px);
	padding-left: 80px;
	padding-right: 35px;
}
.cpbtGuide  dl {
	position: relative;
	display: inline-block;
	width: 100%;
/* 	min-height: 75px; */
    padding-bottom: 20px;
}
.cpbtGuide  dl:before {
	content:" ";
	position: absolute;
	top: 0;
	bottom: 0;
    left: -18px;
	border-left: 1px solid #f5ccd6;
}
.cpbtGuide  dl.item01:before {
    top: 18px;
}
.cpbtGuide  dl:last-child:before {
    bottom: auto;
    height: 20px;
}
.cpbtGuide  dl dt {
	position :relative;
	width: 100%;
	height: 40px;
	margin-bottom: 15px;
	line-height: 40px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0px 7px 12px rgba(106, 129, 152, 0.3);
}
.cpbtGuide  dl.item01 dt {
	background: #2b353e;
}
.cpbtGuide  dl.item02 dt {
	background: #404e5c;
}
.cpbtGuide  dl.item03 dt {
	background: #55677a;
}
.cpbtGuide  dl.item04 dt {
	background: #6a8198;
}
.cpbtGuide  dl.item05 dt {
	background: #889aac;
}
.cpbtGuide  dl dt:before,
.cpbtGuide  dl dt:after {
	content:"";
	position: absolute;
	border-radius: 50%;
	background: #f7295b;
}
.cpbtGuide  dl dt:before {
	top: 10px;
	left: -26px;
	width: 17px;
	height: 17px;
	opacity: 0.1;
}
.cpbtGuide  dl dt:after {
	top: 15px;
    left: -21px;
	width: 7px;
	height: 7px;
}
.cpbtGuide  dl dd {
	display: table;
    width: 100%;
    padding-left: 10px;
}
.cpbtGuide  dl dd ul {
	display: table-cell;
	height: 50px;
	vertical-align: middle;
	text-align: left;
}
.cpbtGuide  dl dd ul > li {
	position: relative;
	padding-left:12px;
	line-height: 25px;
	color: #555; 
	font-size: 14px;
}
.cpbtGuide  dl dd ul > li:before {
	content:" ";
	position: absolute;
	top: 13px;
	left: 0;
	width: 2px;
	border-top: 2px solid #888;
}
.cpbtGuide  dl dd ul > li p {
	position: relative;
	padding-left: 10px;
	line-height: 20px;
	color: #888;
	font-size: 13px;
}
.cpbtGuide  dl dd ul > li p:before {
	content:"-";
	position: absolute;
	top: 0;
	left: 0;
	line-height: 20px;
}

/* 교육체계 */
.guideTabTit h4 {
	margin: 10px 0 7px;
}
.guideTabTit .legend {
    text-align: center;
	font-size: 0;
	margin-bottom: 12px;
}
.guideTabTit .legend > span {
	position: relative;
	display: inline-block;
	margin: 0 10px;
	padding-left: 26px;
	line-height: 16px;
	font-size: 12px;
}
.guideTabTit .legend > span:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 18px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid #ffa41f;
	background: #fff8ef;
}
.guideTabTit .legend > span.item02:before {
	border-color: #a6b4c1 ;
	background: #fff;
}
.guideTabTit .legend > span.item03:before {
	width: 16px;
	height: 12px;
	border: 2px solid #f75c03;
	background: #fff;
}

.guideTab { 
	padding: 5px 10px;
	text-align: center;
	font-size: 0;
	background: #f5f5f5;
}
.guideTab li { 
	display: inline-block;
	min-width: 24px;
	border-bottom: 2px solid transparent; 
	text-align:center; 
}
.guideTab li+li {
	margin-left: 20px;
}
.guideTab li > a {
	display: block;
	line-height: 25px;
	font-size: 14px;
}
.guideTab li.on { 
	border-color: #f7295b;
}
.guideTab li.on  > a {
	font-weight: 700;
}
.guideTabCon div { 
	display:none;
	text-align:center; 
}
.guideTabCon div img {
	max-width: 100%;
} 

/*##  main  -------------------------------------------------------##*/
#container {
	position: relative;
}
#container.sub {
	padding-top: 94px;
    min-height: calc(100vh - 158px);
}
.mainConBox {
	position: relative;
	text-align: left;
} 

.mainConBox .myInfo .cosInfo .sort > span {
	position: relative;
	display: inline-block;
	line-height: 20px;
	font-size: 13px;
	margin-right: 12px;
}

.mainConBox .myInfo .cosInfo .sort > span:last-child {
	margin-right: 0;
}
.mainConBox .myInfo .cosInfo .sort > span:last-child:before {
	display: none;
}

.mainConBox .myInfo .cosInfo .box.frqBox .disabledTxt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 48px;
	text-align: center;
	color: #888;
	z-index: 10;
}
.mainConBox .myInfo .cosInfo .box.frqBox > .btnMore:after{
    content: " ";
    margin-left: 3px;
    border: solid #888;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
  	vertical-align: 1px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.mainConBox .myInfo .cosInfo .box.frqBox > .btnMore:active {
	color: #69aaeb;	
}
.mainConBox .myInfo .cosInfo .box.frqBox > .btnMore:active:after {
	border-color: #69aaeb;	
}
.mainConBox .myInfo .timeInfo > a+a {
	border-left: none;
}
.mainConBox .myInfo .timeInfo > a .txtBox .item {
	display: inline-block;
	text-align: left;
}
.mainConBox .myInfo .timeInfo > a .txtBox p > strong.ens {
	color: #5a97e8;
}
.mainConBox .myInfo .timeInfo > a .txtBox p+.title {
	margin-top: 9px;
}
.mainConBox .cosRecm .infoTxtBox {
	padding: 0 16px;
	margin-bottom: 10px;
	text-align: center;
	color: #a6b4c1;
	font-size: 13px;
	word-break: keep-all;
}
.mainConBox .cosRecm .infoTxtBox p {
	display: inline-block;
	padding-left: 26px;
    text-align: left;
    line-height: 18px;
	background: url(/images/common/bult_main_info_txt.png) 0 0 no-repeat;
	background-size: 18px 18px;
}

/* .mainConBox .cosRecm .btnMore {
	position: absolute;
	top: 31px;
	right: 30px;
	width: 20px;
	height: 20px;
	text-indent: -99999px;
}
.mainConBox .cosRecm .btnMore:before,
.mainConBox .cosRecm .btnMore:after {
	content:" ";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #87929d;
}
.mainConBox .cosRecm .btnMore:before {
	width: 14px;
	height: 2px;
	margin-top: -1px;
	margin-left: -7px;
}
.mainConBox .cosRecm .btnMore:after {
	width: 2px;
	height: 14px;
	margin-top: -7px;
	margin-left: -1px;
} */
.mainConBox .cosRecm .tab {
	display: inline-block;
	margin-bottom: 13px;
	width: 100%;
	text-align: center;
	font-size: 0;
}
.mainConBox .cosRecm .tab li {
	display: inline-block;
	width: 92px;
	height: 35px;
}
.mainConBox .cosRecm .tab li+li {
	margin-left: 6px;
}
.mainConBox .cosRecm .tab li a {
	display: block;
	line-height: 35px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	background: #5b6a79;
	transition: all .3s;
}
.mainConBox .cosRecm .tab li:active a,
.mainConBox .cosRecm .tab li.on a {
	background: #f7295b;
	transition: all .3s;
}
/* .mainCos {
	margin-top: 10px;
	background: #fff;
} */
/* .mainTab {
	border-bottom: 1px solid #ddd;
	font-size: 0;
}
.mainTab > a {
	position: relative;
	display: inline-block;
	width: 50%;
	text-align: center;
	line-height: 50px;
	color: #767676;
	font-size: 15px;
}
.mainTab > a.on {
	color: #333;
	font-weight: 700;
}
.mainTab > a.on:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-top: 2px solid #454545;
} */
.mainCosList li+li > a {
	border-top: 1px solid #5a646e;
}
.mainCosList li > a {
	display: inline-block;
	width: 100%;
	padding: 16px;
}
.mainCosList li .imgBox {
	float: left;
	overflow: hidden;
	position: relative;
	width: 108px;
	height: 61px;
}
.mainCosList li .imgBox img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}
.mainCosList li .txtBox {
	float: right;
	width: calc(100% - 124px);
}
.mainCosList li .txtBox .sort {
	font-size: 0;
	margin-bottom: 2px;
}
.mainCosList li .txtBox .sort > span {
	display: inline-block;
	height: 20px;	
	padding: 0 5px;
	margin-right: 3px;
	margin-bottom: 3px;
	line-height: 18px;
	border: 1px solid #bbb;
	color: #fff;
	font-size: 13px;
}
.mainCosList li .txtBox .sort > span:last-child {
	margin-right: 0;
}
.mainCosList li .txtBox .title {
	display: block;
	margin-bottom: 3px;
	line-height: 21px;
	color: #fff;
	font-size:14px;
	font-weight: 700;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.mainCosList li .txtBox p {
	line-height: 20px;
	color: #ccdfed;
	opacity: 0.4;
}
.mainCosList li .txtBox button {
	float: right;
	min-width: 60px;
	height:23px;
	margin-top: 8px;
	padding: 0 5px;
	line-height: 21px;
	font-size: 14px;
}

.mainCosList li.noData {
    padding: 190px 0 40px;
    background: url(/images/common/img_main_cos_nodata.png) center 20px no-repeat;
    background-size: 140px 142px;
}
.mainCosList li.noData p {
	line-height: 21px;
	text-align: center;
	color: #a6b4c1;
}



.mainCosList .btnMore {
	display: block;
	line-height: 31px;
	border-bottom: 1px solid #e5e5e5;
	text-align: center;
	color: #767676;
	font-weight: 700;
}
/* .mainCos .mainCosList li {
	display: inline-block;
	width: 100%;
	padding: 16px;
}
.mainCos .mainCosList li {
	border-bottom: 1px solid #e5e5e5;
}
.mainCos .mainCosList li .txtBox .sort > span {
	color: #888;
}
.mainCos .mainCosList li .txtBox .title {
	color: #333;
}
.mainCos .mainCosList li .txtBox p {
	color: #888;
	opacity: 1;
} */

.mainClubList li .txtTopBox {
	position: relative;
}
.mainClubList li .txtTopBox .imgBox {
	position: relative;
}
.mainClubList li .txtTopBox .imgBox img {
	width: 100%;
}
.mainClubList li .txtTopBox .imgBox:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(/images/bg/bg_main_club_list.png) center center no-repeat;
	background-size: cover;
	z-index: 5;
}
.mainClubList li .txtTopBox .titBox {
	position: absolute;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.mainClubList li .txtTopBox .titBox > a {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 9% 16px;
}
.mainClubList li .txtTopBox .titBox > a .title {
	display: block;
	max-height: 52px;
	line-height: 26px;
	color: #fff;
	font-size:16px;
	font-weight: 400;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.mainClubList li .txtTopBox .titBox > a .sort {
	display: inline-block;
	margin-bottom: 8px;
	padding: 0 10px;
	height: 29px;
	line-height: 27px;
    color: #ff416f;
	font-size: 14px;
	border: 1px solid #ff4270;
}
.mainClubList li .txtTopBox .titBox > a .sort.my {
	color: #99d2fe;
	border-color: #99d2fe;
}
.mainClubList li .txtTopBox .titBox > a .group {
	position: absolute;
	top: 8px;
	right: -8px;
	width: 50px;
	height: 50px;
	padding-top: 9px;
	line-height: 16px;
	border-top-left-radius: 12px;
	border-bottom-right-radius: 12px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	background: #407ff9;
    background: -moz-linear-gradient(-45deg, #5896fa 0%, #5190fa 100%);
    background: -webkit-linear-gradient(-45deg, #5896fa 0%,#5190fa 100%);
    background: linear-gradient(135deg, #407ff9 0%,#5896fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#407ff9', endColorstr='#5896fa',GradientType=1 );
}
.mainClubList li .txtTopBox .titBox > a .group.cos {
	background: #ff8112;
    background: -moz-linear-gradient(-45deg, #ff8112 0%, #ff981f 100%);
    background: -webkit-linear-gradient(-45deg, #ff8112 0%,#ff981f 100%);
    background: linear-gradient(135deg, #ff8112 0%,#ff981f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8112', endColorstr='#ff981f',GradientType=1 );
}
.mainClubList li .txtBox {
	position: relative;
	min-height: 48px;
	padding: 8px 0 14px;
}
.mainClubList li .txtBox p {
	line-height: 20px;
	color: #888;
	font-size: 13px;
}
.mainClubList li .txtBox button {
	position: absolute;
	right: 0;
	bottom: 17px;
	min-width: 60px;
	height:23px;
	margin-top: 8px;
	padding: 0 5px;
	line-height: 21px;
	font-size: 14px;
}

/*##  intro  ---------------------------------------------------------##*/
.introHeader  {
    position: relative;
    background: #fff;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    z-index: 10;
}
.introHeader > .box {
	margin: 0 auto;
	max-width: 1200px;
	height: 56px;
	padding: 18px 16px;
	text-align: left;
}
.introHeader > .box .logo a {
	display: inline-block;
	height: 20px;
	color: #888;
	font-size: 15px;
	font-weight: 400;
}
.introHeader > .box .logo a img {
	height: 100%;
	margin-right: 17px;
	vertical-align: bottom;
}
.introBox {
	position: relative;
	min-height: 100vh;
	min-height: calc(100vh - 56px); 
    padding-top: 50px;
	background: #eee url(/images/bg/bg_intro.jpg) center bottom no-repeat;
    background-size: auto 30%; 
}
.introBox .item {
	position: absolute;
	top: 33%;
	left: 0;
	width: 100%;
	text-align: center;	
}
.introBox .item .logo {
	color: #888;
	font-size: 12px;
}
.introBox .item .logo img {
	margin-right: 10px;
	vertical-align: bottom;
	width: 60px;
}
.introBox .item .txtBox {
	margin-top: 25px;
	font-size: 24px;
}
.checkKey  {
	padding-bottom: 40px;
}
/* .addKey  { */
/* 	position: relative; */
/* 	top: 25%; */
/* } */
/* .addKey .txtBox, */
.checkKey .txtBox {
    margin-bottom: 30px;
    line-height: 26px;
    font-size: 17px;
    text-align: center;
}
.checkKey  .txtBox .em {
	box-shadow: 0 -1px 0 0 #e91b4d inset, 0 -2px 0 0 #e91b4d inset ; 
}
.checkKey  .txtBox > span {
	font-size: 14px;
}
.checkKey .itrstCheckList {
	margin: 0 auto;
	width: 100%;
    padding: 0 16px;
}
/* .checkKey .itrstCheckList .bx-wrapper {
	position: relative;
}
.checkKey .itrstCheckList .bx-wrapper .bx-controls-direction > a {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -23px;
	border-radius: 50%;
	font-size: 0;
	background: #fff;	
}
.checkKey .itrstCheckList .bx-wrapper .bx-controls-direction > a.bx-prev {
	left: -46px;
}
.checkKey .itrstCheckList .bx-wrapper .bx-controls-direction > a.bx-next {
	right: -46px;
}
.checkKey .itrstCheckList .bx-wrapper .bx-controls-direction > a:before {
	content:" ";
	position: absolute;
	top: 50%;
	margin-top: -6px;
	border-top: 6px solid transparent;;
	border-bottom: 6px solid transparent;
}
.checkKey .itrstCheckList .bx-wrapper .bx-controls-direction > a.bx-prev:before {
	left: 12px;
	border-right: 10px solid #f7295b;
}
.checkKey .itrstCheckList .bx-wrapper .bx-controls-direction > a.bx-next:before {
	right: 12px;
	border-left: 10px solid #f7295b;
} */
.checkKey .itrstSlider {
	display: inline-block;
	width: 100%;
}

.checkKey .itrstSlider strong.title {
	display: block;
	margin-bottom: 10px;
	padding: 0 10px;
	line-height: 34px;
	border-bottom: 2px solid #e1e1e1;
	text-align: left;
	font-size: 15px;
}
.checkKey .itrstSlider .box.type2 {
	display: inline-block;
	width: 100%;
}
.checkKey .itrstSlider .box > .checkBox {
	position: relative;
	float: left;
	display: table;
	width: 48%;
	height: 50px;
	margin-bottom: 15px;
	overflow: hidden; 
	border-radius: 25px;
	background: #fff;
    box-shadow: 2px 2px 9px rgba(0,0,0,0.1);
}
.checkKey .itrstSlider .box > .checkBox:nth-child(even) {
	margin-left: 4%;
}
.checkKey .itrstSlider .box > .checkBox > label {
	padding: 0 30px;
	display: table-cell;
    line-height: 20px;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
	cursor: pointer;
}
 .checkKey .itrstSlider .box .checkBox input[type="checkbox"]+label:before {
 	content:" ";
 	position: absolute;
 	top: 50%;
 	left: 10px; 
 	width: 18px;
 	height: 18px;
 	margin-top: -9px;
 	background: transparent;
 }
 .checkKey .itrstSlider .box .checkBox input[type="checkbox"]:checked+label:before {
 	background: url(/images/common/intro_checkbox.png) 0 0 no-repeat;
 	background-size: 100%;
 }
.checkKey .itrstSlider .box .checkBox:active,
.checkKey .itrstSlider .box .checkBox input[type="checkbox"]:checked+label {
  	border-radius: 25px;
 	color: #fff;
	background: #455361;
} 
/* .checkKey #slideCut {
	margin-top: 10px;
	color: #888;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}
.checkKey #slideCut .pageNum {
	color: #333;
}
.addKey .inpTxt {
	padding: 0 20px;
}
.addKey .inpTxt input {
    width: 100%;
    height: 45px;
    padding: 0 20px;
    border: none;
    border-bottom: 2px solid #333;
    font-size: 15px;
} */
/* .addKey .btnArea, */
.checkKey .btnArea {
	padding: 0 16px;
	text-align: center;
}
/* .addKey .btnArea { */
/* 	margin-top: 50px; */
/* } */
/* .addKey .btnArea button, */
.checkKey .btnArea button {
	width: 120px;
}
.checkKey .btnArea button.next:after {
	content: " ";
    display: inline-block;
    border: solid #fff;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 4px;
    margin-left: 10px;
    vertical-align: 1px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.checkKey .btnArea button.prev:before {
	content: " ";
    display: inline-block;
    border: solid #333;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 4px;
    margin-right: 10px;
    vertical-align: 1px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

/*##  errorPage  ---------------------------------------------------------##*/
.errorPage {
	padding: 20% 20px;
	text-align: center;
}
.errorPage .imgBox > img {
	width: 120px;
}
.errorPage .txtBox {
    margin: 25px auto 0;
    padding: 0 10px;
    max-width: 320px;
}
.errorPage .txtBox > strong {
	display: block;
	margin-bottom: 16px;
	line-height: 26px;
	font-size: 20px;
    word-break: keep-all;
}
.errorPage .txtBox > p {
	display: inline;
	line-height: 21px;
	color: #888;
	font-size: 13px;
	word-break: keep-all;
}
.errorPage .btnArea button {
	vertical-align: top;
}

/*##  popup  -------------------------------------------------------##*/
.popDim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1000;
}
.popDim:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
}
.popWrap {
	color: #333;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: -0.5px;
}
.popDim .popWrap {
	position: absolute;
	top:0;
	left: 0;
	width: 100% !important;
	height: 100vh !important;
	border-top: 1px solid #555;
	overflow: hidden;
    background: #fff;
}
.popWrap .popTit {
	position: relative;
}
.popWrap .popTit h1 {
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0 50px;
	border-bottom: 1px solid #e5e5e5;
	text-align: center;
	color: #333;
	font-size: 15px;
	background: #fff;
}
.popWrap .popTit .btnClosed {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	font-size: 0;
	background: url(/images/btn/btn_pop_closed.png) center center no-repeat;
	background-size: 18px 18px;
}
.popWrap .popCon {
	overflow-y: auto;
	max-height: calc(100vh - 50px);
	padding: 0 0 16px 0;
	text-align: left;
	background: #fff;
}
.popWrap .popCon > .btnArea {
	margin-bttom: 35px;
}
.popWrap .popCon .searchBox {
	position: relative;
/* 	margin-top: -20px; */
}

.popWrap .popCon .searchBox .item {
	min-width: 0px;
}

.dvsHalf ,
.groupBox  {
	display: inline-block;
	width: 100%;
}
.groupBox .left {
	float: left;
	width: 63%;
}
.dvsHalf > .box,
.groupBox .left > .box {
	float: left;
	width: 50%;
	padding: 0 5px 0 0;
}
.dvsHalf > .box+.box,
.groupBox .left > .box+.box {
	padding: 0 0 0 5px;
}
.groupBox .treeBox {
	height: 250px;
	overflow-y: auto;
	border: 1px solid #ccc;
}
.groupBox .btnArea {
	padding: 0;
	margin-top: 15px;
	text-align: right;
}
.groupBox .right {
	position: relative;
	float: left;
	width: 37%;
	padding-left: 48px;
}
.groupBox .right  .treeBox {
	border: 1px solid #555;
}
.groupBox .right:before {
	content:" ";
	position: absolute;
	top: 50%;
	left: 16px; 
	width: 16px;
	height: 30px;
	margin-top: -15px;
	background: url(/images/common/arrow_share.png) 0 0 no-repeat;
}
.groupList {
	padding: 0 10px;
}
.groupList+.groupList {
	margin-top: 10px;
}
.groupList.groupTit {
	display: inline; line-height: 24px; font-size: 13px;
}
.groupList .groupTit:before {
	content: "▶ "; line-height: 24px;
}
.groupList ul li {
	line-height: 24px;
}
.groupList ul li input[type="radio"],
.groupList ul li input[type="checkbox"] {
	display:none;
} 
.groupList ul li input[type="radio"]::-ms-expand,
.groupList ul li input[type="checkbox"]::-ms-expand  {
	display: none;
}
.groupList ul li input[type="radio"]+label,
.groupList ul li input[type="checkbox"]+label {
	position: relative; display: block; padding-left: 24px;
}
.groupList ul li input[type="radio"]+label:before,
.groupList ul li input[type="checkbox"]+label:before {
	content:" "; 
	position: absolute; 
	top: 0; 
	left: 0; 
	display: inline-block; 
	width: 24px; 
	height: 24px; 
	vertical-align: middle; 
	background-image: url(/js/jstree/themes/default/32px.png);	 
	background-position: -164px -4px; background-repeat: no-repeat;
}
.groupList ul li input[type="checkbox"]+label:active:before {
	background-position: -164px -36px;
}
.groupList ul li input[type="checkbox"]:checked+label:before {
	background-position: -228px -4px;
}
.groupList ul li input[type="checkbox"]:checked+label:active:before {
	background-position: -228px -36px;
}
.groupList ul li input[type="radio"]+label:before {background-image: url(/js/jstree/themes/default/radio_32px.png); background-position: 0 0; background-repeat: no-repeat;}
.groupList  ul li input[type="radio"]+label:active:before {background-position: 0 -24px;}
.groupList  ul li input[type="radio"]:checked+label:before {background-position: -24px 0;}
.groupList  ul li input[type="radio"]:checked+label:active:before {background-position: -24px -24px;}
.shareTxt {
	margin-top: 30px;
}
.shareTxt textarea {
	height: 77px;
}
.graphArea {
	padding:  20px 0;
}
.graphArea  > .title {
	display: block;
	margin-bottom: 20px;
	line-height: 1;
	text-align: center;
	font-size: 17px;
}

.popWrap .popInfoBox {
	padding: 16px;
	border-bottom: 1px solid #ddd;
	background: #f5f5f5;
}
.popWrap .popInfoBox ul {
	display: inline-block;
	width: 100%;
}
.popWrap .popInfoBox ul li {
	position: relative;
	float: left;
	min-width: 50%;
	min-height: 26px;
	line-height: 26px;
	padding-left: 84px;
}
.popWrap .popInfoBox ul li.title,
.popWrap .popInfoBox ul li.full {
	min-width: 100%;
}
.popWrap .popInfoBox ul li+li {
	margin-top: 6px;
}
.popWrap .popInfoBox ul li > strong {
	position: absolute;
	top: 0;
	left: 0;
	width: 84px;
	padding: 0 14px 0 0;
	text-align: right;
	color: #555;
	font-size: 15px;
	font-weight: 400;
}
.popWrap .popInfoBox ul li > strong:before {
	content:" ";
	position: absolute;
	top: 50%;
	right: 7px;
	height: 12px;
	margin-top: -6px;
	border-left: 1px solid #ccc;
}
.popWrap .popInfoBox ul li > span {
	display: block;
	font-size: 15px;
}
.popWrap .popInfoBox ul li.title > span {
	font-weight: 700;
}
.popInfoBox ul+.table {
	margin-top: 15px;
}
.popWrap .popCon .qustionBox {
    overflow-x: hidden;
	overflow-y: auto;
	padding: 0 20px 0 35px;
}
.popWrap .popCon .qustionBox .timeBox,
.popWrap .popCon .qustionBox .scoreBox {
	text-align: right;
}
.popWrap .popCon .qustionBox .timeBox > strong,
.popWrap .popCon .qustionBox .scoreBox > strong {
	display: inline-block;
	padding-right: 10px;
	line-height: 30px;
}
.popWrap .popCon .qustionBox .scoreBox > .score {
	display: inline-block;
	width: 90px;
	line-height: 30px;
	text-align: center;
	color: #bbb;
	font-size: 17px;
	background: #666;
}
.popWrap .popCon .qustionBox .timeBox > .time {
	display: inline-block;
	padding: 0 10px;
	line-height: 30px;
	color: #fff;
	font-size: 17px;
	background: #e91b4d;
}
.popWrap .popCon .qustionBox .scoreBox > .score > span {
	color: #fff;
}
.popWrap .popCon .qustionBox  .qustionItem {
	padding-top: 15px;
}
.popWrap .popCon .qustionBox  .qustionItem+.qustionItem {
	margin-top: 25px;
}
.popWrap .popCon .qustionBox .txtQst {
	position: relative;
	padding-left: 10px;
	line-height: 26px;
	font-size: 15px;
	font-weight: 400;
}
.popWrap .popCon .qustionBox .txtQst .txt {
	font-size: 13px;
}
.popWrap .popCon .qustionBox .txtQst .txt.em {
	color: #e91b4d;
}
.popWrap .popCon .qustionBox .txtQst .num {
	position: absolute;
	top: 0;
	left: -35px;
	width: 35px;
	line-height: 26px;
	text-align: center;
	font-size: 22px;
}
.popWrap .popCon .qustionBox .imgQst {
	max-width: 100%;
	padding-left: 10px;
	margin-top: 10px;
}
.popWrap .popCon .qustionBox .imgEp {
	max-width: 100%;
	margin-top: 5px;
}
.popWrap .popCon .qustionBox .imgQst img,
.popWrap .popCon .qustionBox .imgEp img {
	max-width: 100%;
	border: 1px solid #ddd;
}
.popWrap .popCon .qustionBox .qstInfo {
	margin-top: 10px;
	padding: 0 10px;
	font-size: 0;
}
.popWrap .popCon .qustionBox .qstInfo > div {
	position: relative;
	display: inline-block;
	line-height: 21px;
	font-size: 14px;
	margin-right: 24px;
}
.popWrap .popCon .qustionBox .qstInfo > div+div:before {
	content:" ";
	position: absolute;
	top: 50%;
	left: -12px;
	margin-top: -6px;
	height: 13px;
	border-left: 1px solid #ddd;
}
.popWrap .popCon .qustionBox .qstInfo > div .correct {
	color: #4b8cfa;
	font-weight: 700;
}
.popWrap .popCon .qustionBox .qstInfo > div .wrong {
	color: #e91b4d;
	font-weight: 700;
}
.popWrap .popCon .qustionBox .expList {
	margin-top: 12px;
}
.popWrap .popCon .qustionBox .expList li {
	padding: 4px  30px 4px 10px;
}
.popWrap .popCon .qustionBox .expList li.correct {
	background: #e8f5ff url(/images/user/bg_qustion_correct.png) right center no-repeat;
}
.popWrap .popCon .qustionBox .expList li.wrong {
	background: #fef0f3 url(/images/user/bg_qustion_wrong.png) right center no-repeat;
}
.popWrap .popCon .qustionBox .expList li+li {
	margin-top: 2px;
}
.popWrap .popCon input[type="checkbox"],
.popWrap .popCon input[type="radio"] {
	display: none;
	width: 0px;
	height: 0px;
	-webkit-appearance: none;
	appearance: none;	
}
.popWrap .popCon input[type="checkbox"]::-ms-expand ,
.popWrap .popCon input[type="radio"]::-ms-expand  {
	display:none;
}
.popWrap .popCon input[type="checkbox"]+i,
.popWrap .popCon input[type="radio"]+i {
	overflow: hidden;
	display: inline-block;
	width: 15px;
	height: 15px;
}
.popWrap .popCon input[type="checkbox"]+i {
	background: url(/images/bg/bg_checkbox.png) 0 0 no-repeat;
}
.popWrap .popCon input[type="checkbox"]:checked+i {
	background: url(/images/bg/bg_checkbox.png) -15px 0 no-repeat;
}
.popWrap .popCon input[type="radio"]+i {
	background: url(/images/bg/bg_radio.png) 0 0 no-repeat;
}
.popWrap .popCon input[type="radio"]:checked+i {
	background: url(/images/bg/bg_radio.png) -15px 0 no-repeat;
}
.popWrap .popCon .qustionBox .expList li label {
	position: relative;
    display: block;
	padding-left: 43px;
	line-height: 21px;
}
.popWrap .popCon .qustionBox .expList li label i {
	position: absolute;
	top: 3px;
	left: 0px;
}
.popWrap .popCon .qustionBox .expList li label .num {
	position: absolute;
	top: 0;
	left: 25px;
	line-height: 21px;
}
.popWrap .popCon .qustionBox .writeBox {
	margin-top: 15px;
	margin-left: 10px;
}
.popWrap .popCon .qustionBox .writeBox input[type="text"],
.popWrap .popCon .qustionBox .writeBox textarea {
	width: 100%;
	border: 1px solid #ccc;
}
.popWrap .popCon .qustionBox .answerBox {
	margin-top: 15px;
	margin-left: 10px;
	padding: 10px 25px;
	background: #eee;
}
.popWrap .popCon .qustionBox .answerBox .correct {
	position: relative;
	min-height: 21px;
	line-height: 21px;
	padding-left: 38px;
}
.popWrap .popCon .qustionBox .answerBox .correct > strong {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 21px;
}
.popWrap .popCon .qustionBox .answerBox .exTxt {
    margin: 14px 0 8px;
	line-height: 21px;
	font-size: 14px;
}

/* 공지사항 팝업 */
.noticePop {
	border-bottom: 1px solid #ddd;
}
.noticePop .title {
	padding: 10px 16px 0;
	line-height: 18px;
	font-size: 14px;
	font-weight: 700;
}
.noticePop .title:before {
	content:"";
	display: inline-block;
	width: 12px;
	height: 13px;
	margin-right: 6px;
    vertical-align: -2px;
	background: url(/images/icon/icon_pop_notice.png) 0 0 no-repeat;
	background-size: 100%;
}
.noticePop ul {
	padding: 7px 16px;
}
.noticePop ul li {
	position: relative;
	padding-right: 60px;
}
.noticePop ul li a {
	display: block;
	line-height: 26px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.noticePop ul li .date {
	position: absolute;
	top: 0;
	right: 0;
	line-height: 26px;
	color: #aaa;
	font-size:12px;
}
.noticePop .toDayClosed {
	height: 27px;
	line-height: 27px;
	padding: 0 16px;
	border-top: 1px solid #eee;
	text-align: right;
}
.noticePop .toDayClosed .btnClosed {
	display: inline-block;
	text-decoration: underline;
	margin-left: 20px;
}


/* 승인요청 팝업 */
.popLay {
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
}
.popLay .popCon {
	padding: 0;
}
.popLay .popCon > .btnClosed {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40px;
	background: #e5e5e5;
}

.rqstPop {
	padding-top: 30px;
	text-align: center;
}
.rqstPop > p {
	display: inline-block;
	min-height: 44px;
    padding: 70px 0 0;
	line-height: 26px;
	text-align: left;
	font-size: 15px;
	background: url(/images/icon/icon_pop_rqst.png) center 0 no-repeat;
	background-size: 60px 60px;
}
.rqstPop > p > .num {
	color: #e91b4d;
}

.rqstPop .layBtn {
	position: absolute;
	width: 100%;
	bottom: 0;
}
.rqstPop .layBtn button {
	float: left;
	width: 208px;
	height: 40px;
	border-radius: 0px;
	background: #e5e5e5;
}
.rqstPop .layBtn .btnClosed {
	float: right;
	width: 86px;
}



.btnArea.medium {
	margin-top: 15px;
}

/* app down */
.appDown {
	position: relative;
	height: 100vh;
	background: #f5f5f5;
}
.appDown > .box {
    position: absolute;
    top: 28%;
    width: 100%;
    text-align: center;
}
.appDown .logo {
	margin-bottom: 40px;
	text-align: center;
}
.appDown .logo img {
	width: 160px;
}
.appDown .appLink {
	display: inline-block;
	width: 260px;
}
.appDown .appLink > a {
	position: relative;
	display: block;
	margin-bottom: 20px;
	padding: 0 41px 0 47px;
	line-height: 58px;
	border: 1px solid #555;
	border-radius: 2px;
	text-align: center;
	font-size: 14px;
}
.appDown .appLink > a.linkAndroid {
	background: #fff url(/images/icon/icon_android.png) 19px center no-repeat;
	background-size: 28px 25px;
}
.appDown .appLink > a.linkIos {
	background: #fff url(/images/icon/icon_ios.png) 20px center no-repeat;
	background-size: 26px 32px;
}
.appDown .appLink > a:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 41px;
	height: 24px;
	margin-top: -12px;
	border-left: 1px solid #e5e5e5;
	background: url(/images/common/arrow_app_down.png) 14px center no-repeat;
	background-size: 13px 12px;
}
.appDown .appLink > a > strong {
	font-size: 18px;
}



@media screen and (max-width: 375px) {
	.ctfTxt .txtBox {
	    bottom: 26%;
	}
}

@media screen and (max-width: 359px) {
	.btnArea button {
		min-width: 60px;
		padding: 0 10px;
	}
	.searchBox .itemBox > div {
	    width: calc(50% - 5px);
	    margin-left: 10px;
	}
	.searchBox .itemBox > div .selectBox {
		width: 60px;
	}
	.searchBox .itemBox > div .inp {
	    width: calc(100% - 112px);
	}
	
	.processBox {
	    padding: 16px 10px;
	}
	.processBox > .step > span.start {
   	    min-width: 50px;
   	}
	
	.inpPeriod > input {
		padding-right: 8px;
    	width: 88px;
		background: #fff;
	}
	.systemGuide .tipBox > a {
		font-size: 13px;
	}
	
	.rqstBox ul li {
		padding: 3px 0 3px 60px;
	}
	.rqstBox ul li > span {
		font-size: 13px;
	}
	
	.miniTab > a {
	    margin: 0 13px;
	}
	.stampArea ul li {
    	margin-left: 14px;
    }
	
	.moneyGraph .diyTxt {
	    padding: 22px 0px 18px;
	}
	.moneyGraph .graphBox, 
	.moneyGraph .graph {
		margin-right: 10px;
	}
	.moneyGraph .diyTxt .numTxt {
		padding-left: 35px;
	}
	.moneyGraph .moneyTxt {
		padding-left: 20px;
	}
	.moneyGraph .moneyTxt .numTxt > strong {
	    padding: 0 15px 0 35px;
	}
	
}



/* 20210928 수정 및 추가 */
#container.main {
	padding-bottom: 30px;
	background: #f6f9dd;
}
.mainConBox .myInfo .cosInfo {
	padding: 73px 16px 10px;
	background: url(/images/bg/bg_main_cos_info_new.png) 16px 73px no-repeat;
	background-size: 24px 20px;
    position: relative;
} 
.mainConBox .myInfo .cosInfo h3 {
	display: block;
	line-height: 28px;
    margin: 22px 0 0 18px;
	font-size: 18px;
	font-weight: 400;
} 
.mainConBox .myInfo .cosInfo h3 strong {
	color:#286fb7;
    cursor: pointer;
}
.mainConBox .myInfo .cosInfo .sort {
	font-size: 0;
    margin-left: 20px;
    color: #6d6d6d;
}
.mainConBox .myInfo .cosInfo .sort > span:before {
	content: "·";
	position: absolute;
	right: -8px;
	height: 11px;
	margin-top: 0px;
}

.mainConBox .myInfo .cosInfo .imgBox {
    position: absolute;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	overflow: hidden;
	border: 8px solid #edf3c0;
    top: 73px;
    right: 16px;
	background: #edf3c0;
}
.mainConBox .myInfo .cosInfo .imgBox div { 
    position: absolute;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #fff;
    top: 0px;
    left: 0px;
    cursor: pointer;
}
.mainConBox .myInfo .cosInfo .imgBox img{ 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.mainConBox .myInfo .cosInfo .box {
	display: inline-block;
	width: 100%;
}
.mainConBox .myInfo .cosInfo .box.cosBox {
	margin-top: 35px;
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox ul {
    display: flex;
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox li {
    background: #fff;
    width: 33.3%; 
    height: 64px;
	line-height: 19px;
	font-size: 13px; 
    border-radius: 4px;
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox li+li {
	margin-left: 6px;
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox li > a {
	position: relative;
	display: block;
    width: 100%;
    padding-top: 40px;
    text-align: center;
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox li.cosIng > a {
	background: url(/images/icon/icon_main_ing.png) center 3px  no-repeat;
	background-size: 40px 40px;	
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox li.cosStay > a {
	background: url(/images/icon/icon_main_stay.png) center 3px  no-repeat;	
	background-size: 40px 40px;
}
.mainConBox .myInfo .cosInfo .box.cosBox .txtBox li.cosComp > a {
	background: url(/images/icon/icon_main_complete.png) center 3px  no-repeat;
	background-size: 40px 40px;	
}
.mainConBox .myInfo .cosInfo .box.frqBox {
	position: relative;
	padding: 11px 16px 10px 75px;
	margin-top: 10px;
    background: #e2f3c0 url("/images/bg/bg_main_gFrequency.png") left top no-repeat;
    background-size: contain;
    border-radius: 4px;
}
.mainConBox .myInfo .cosInfo .box.frqBox > .title {
	display: inline-block;
	font-size: 12px;
    color: #66b387;
}
.mainConBox .myInfo .cosInfo .box.frqBox > .frqNum {
    margin-left: 5px;
    font-size: 15px;
    text-align: left;
    color: #66b387;
    font-weight: 700;
    vertical-align: -1px;
}
.mainConBox .myInfo .cosInfo .box.frqBox > .btnMore {
    position: absolute;
    top: 12px;
    right: 14px;
	color: #787878;
	font-size: 12px;
}
.mainConBox .myInfo .cosInfo .box.frqBox .disabledTxt:before {
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.85;
	z-index: -1;
    border-radius: 4px;
}
.mainConBox .myInfo .timeInfo {
	display: inline-block;
	width: 100%;
	padding: 0 16px 14px;
    border-radius: 4px;
} 
.mainConBox .myInfo .timeInfo .timeWrap {
	background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.mainConBox .myInfo .timeInfo .timeWrap > a {
	float: left;
	width: 50%;
	display: block;
}
.mainConBox .myInfo .timeInfo .timeWrap > a.mytime {
	padding: 13px 0 15px 15px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a.myMoney {
	padding: 13px 15px 15px 15px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a > h3 {
    display: block;
    margin: 0 0 20px 0;
    line-height: 1;
    text-align: left;
    font-size: 12px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a > .box {
    display: flex;    
}
.mainConBox .myInfo .timeInfo .timeWrap > a .graphBox {
    flex: 0 auto;
	position: relative;
	margin: 0 auto;
	width: 58px;
	min-width: 58px;
	padding: 5px 0;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .graphBox .txt {
	position: absolute;
	top: 5px;
	left: 0;
	width:58px;
	height: 58px;
	line-height: 58px;
	text-align: center;
	color: #aaa;
    font-size: 10px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .graphBox .txt  > strong {
	font-size: 14px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox {
    padding-left: 10px;
    flex-grow: 1;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .title {
	display: block;
	line-height: 10px;
	font-size: 10px;	
    margin-bottom: 5px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox p > strong > span {
	font-size: 13px;
	font-weight: 400;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox p > strong {
	display: inline-block;
	padding-right: 3px;
	color: #f7295b;
	font-size: 13px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox p {
	color: #999;
	font-size: 10px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .item+.item {
    margin-top: 12px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a.myMoney .txtBox {
    margin-top: 16px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .usM,
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .sumM {
	display: inline-block;
    width: 50px;
    text-align: center;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .usM {
	line-height: 20px;
	color: #687181;
	font-size: 10px;
	font-weight: 700;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .usM > span {
	font-size: 13px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .sumM > span {
	font-size:13px;
}
.mainConBox .myInfo .timeInfo .timeWrap > a .txtBox .sumM {
    display: block;
	border-top: 1px solid #ccc;
	color: #999;
	line-height: 20px;
}
.mainClub {
    padding: 0 16px 14px;
}
.mainClubList {
	display: inline-block;
    background: #fff;
    border-radius: 4px;
	width: 100%;
    padding: 18px 15px 5px;
}
.mainClubList > .header {
    position: relative;
	width: 100%;
    text-align: center;
}
.mainClubList > .header > .tit {
    color:#48c3c8;
    font-size: 15px;
    text-align: center;
    font-weight: 700;
}
.mainClubList .btnMore {
	display: inline-block;
    position: absolute;
    top: 3px;
    right: 0px;
	padding: 0 3px;
    color: #000000;
    font-size: 12px;
}
.mainClubList .btnMore:after {
    content: " ";
    margin-left: 3px;
    border: solid #888;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    vertical-align: 1px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.clubBox { }
.clubBox .item {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 8px 0;
    cursor: pointer;
}
.clubBox .category-img {
    display: table-cell;
    width: 54px;
}
.clubBox .category-img > span {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-indent: -10000px;
}
.clubBox .category-img > .experience {
    background: url(/images/icon/icon_experience.png) 0 0 no-repeat;
    background-size: 50px 50px;
}
.clubBox .category-img > .language {
    background: url(/images/icon/icon_language.png) 0 0 no-repeat;
    background-size: 50px 50px;
}
.clubBox .category-img > .course {
    background: url(/images/icon/icon_course.png) 0 0 no-repeat;
    background-size: 50px 50px;
}
.clubBox .category-img > .study {
    background: url("../images/icon/icon_study.png") 0 0 no-repeat;
    background-size: 50px 50px;
}
.clubBox .category-img > .betterTeam {
    background: url("../images/icon/icon_betterTeam.png") 0 0 no-repeat;
    background-size: 50px 50px;
}
.clubBox .info {
    display: table-cell;
    font-size: 13px;
    line-height: 1.4;
    padding-left: 10px;
    padding-top: 5px;
}
.clubBox .info > div {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    height: 18px;
}
.clubBox .category {
    font-weight: 600;
}
.clubBox .category-tit {
    font-weight: 400;
}
.clubBox .date {
    font-size: 11px;
    color: #a4a4a4;
}
.mainClub.data .item {
    border-bottom: 1px dashed #dddddd;
}
.mainClub.data .item:last-child {
    border-bottom: none;
}

.mainConBox .cosRecm {
	position: relative;
	z-index: 10;
    padding-top: 10px;
}
.mainConBox .cosRecm >.title {
	padding: 0 16px;
	text-align: center;
    position: relative;
}
.mainConBox .cosRecm > .title h3 {
	display: block;
	color: #000000;
	font-size: 15px;
    text-align: left;
}
.mainConBox .cosRecm > .title a {
	line-height: 18px;
	color: #000;
	font-size: 12px;
    position: absolute;
    top: 0px;
    right: 36px;
}
.mainConBox .cosRecm > .title a:before {
    content: '';
    display: inline-block;
	width: 16px;
    height: 12px;
    background: url("/images/btn/btn_main_elearning_more.png") left top no-repeat;
    background-size: 16px 12px;
    position: absolute;
    top: 3px;
    right: -20px;
}
.mainConBox .cosRecm .box {
}
.mainConBox .cosRecm .box .tit {
    height: 34px;
    margin: 20px 16px 0;
}
.mainConBox .cosRecm .box .tit > h3 {
    width: 78px;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(to right, #75dda6 0%, #13c6c2 100%);
    padding: 1px;
}
.mainConBox .cosRecm .box .tit > h3 > span {
    display: block;
    width: 76px;
    height: 22px;
    border-radius: 11px;
    background: #fff;
    font-size: 14px;
    color: #18c7c1;
    text-align: center;
    line-height: 20px;
}
.mainConBox .cosRecm .box .listWrap {
    width: 100%;
    overflow: hidden;
}
.mainConBox .cosRecm .box .listWrap ul {
    display: flex;
    wdith: 100%;
}
.mainConBox .cosRecm .box .listWrap li.list {
    margin-left: 10px;
    min-width: 200px;
    width: 200px;
    border-radius: 4px;
    background: #fff;
}
.mainConBox .cosRecm .box .listWrap li.list:first-child {
    margin-left: 16px;
}
.mainConBox .cosRecm .box .listWrap li.list .list-img {
    height: 100px;
    background: #323232;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.mainConBox .cosRecm .box .listWrap li.list .list-img img {
	width: 100%;
	height: 100%;	
}

.mainConBox .cosRecm .box .listWrap li.list .txt {
    padding: 13px 23px;
}
.mainConBox .cosRecm .box .listWrap li.list .txt .list-tit {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    font-size: 13px;
}
.mainConBox .cosRecm .box .listWrap li.list .txt .list-date {
    padding: 5px 0;
    font-size: 11px;
    color: #969696;
}
.mainConBox .cosRecm .box .listWrap li.list .txt .list-tag {
    padding: 3px 0;
    font-size: 13px;
    font-style: italic;
    color: #749fcf;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 12px;
}
#footer .footerWrap {
	padding: 19px 16px 16px;
	text-align: center;
	background: #cfe0c9;
}
#footer .footerWrap p {
	line-height: 18px;
	color: #fff; 
	font-size: 12px;
} 
.btnTop {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 105px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 0;
	background: #48c3c8 url(/images/btn/btn_top.png) center center no-repeat;
	background-size: 36px 36px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
	opacity: 0.95;
	z-index: 10;
}
/* 20210930 추가 수정 */
#wrap {
	position: relative;
    padding-bottom: 71px;
}
.main #quickMenu {
	border-top: 1px solid #d4d4d4;
}
#quickMenu > ul > li {
	position: relative;
	float: left;
	width: 20%;
}
#quickMenu > ul > li+li {
}
#quickMenu > ul > li > a {
	position: relative;
	display: block;
	padding: 50px 0 6px;
	line-height: 15px; 
	text-align: center;
	color: #888;
	font-size: 10px;
    letter-spacing: -1px;
}
#quickMenu > ul > li > a:before {
	content:" ";
	display: inline-block;
	position: absolute;
	top: 4px;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-left: -22px;
	background-position: 0 0 ;
	background-repeat: no-repeat;
	background-size: 100%;
}
@media screen and (max-width: 359px) {
	.mainConBox .myInfo .cosInfo .box {
	    padding: 0;
	}    
    .mainConBox .myInfo .timeInfo > a .txtBox {
        padding-left: 5px;
    }    
    .mainConBox .myInfo .timeInfo .timeWrap > a.myMoney {
        padding: 15px 15px 25px 10px;
    }
    .mainConBox .myInfo .cosInfo .box.frqBox {
        background-size: cover;
    }
    #wrap {
    padding-bottom: 86px;
}
}