/* wrapper */
.wrapper {position:relative; height:100%; margin:0;	padding:0;}
/* wrapper */

/* wrapper */
.detail--pop {position:absolute; top:0; left:0;	bottom:0; right:0; background:#ebeef0; z-index:999;}
/* wrapper */

/* container */
.container-body {height:auto; margin:0 auto; width:1208px; position:relative;}

.container-body:after {content: '';	clear:both;	height:0; display:block; overflow:hidden;}

.container--1200 {width:1200px;	height:auto; margin:0 auto;	position:relative;}
/* container */

/* header */
.header {width:100%; height:60px; background-color:#fff; display:block;	z-index:999;}
/* header */

/* gnb */
.gnb {width:100%; height:60px; background-color:#fff; display:block; z-index:999; box-sizing:border-box; border-top:1px solid #d3d6d8; border-bottom: 1px solid #d3d6d8;}

.gnb:after {content: ''; clear:both; height:0; display:block; overflow:hidden;}
/* gnb */


/* deatila__pop */
.deatila__pop {margin-top:80px;}

/* gnb */
.gnb--pop {width:100%; height:80px; background-color:#fff; /*display:table; z-index:999;*/ box-sizing:border-box; border-top:1px solid #d3d6d8; border-bottom:1px solid #d3d6d8; z-index: 1; position:fixed; top:0;}

.gnb--pop:after {content: ''; clear:both; height:0; display:block; overflow:hidden;}

.gnb--user {width: 100%;
	height: 70px;
	padding: 10px 0 11px;
	background-color: #ebeef0;
	display: block;
	z-index: 999;
	box-sizing: border-box;
	border-bottom: 1px solid #d3d6d8;
	overflow: hidden;
}

.gnb--user:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
	overflow: hidden;
}

.gnb--user .container-body .user--id__btn {
	width: 130px;
	min-width: 130px;
	position: relative;
	bottom: inherit;
	left: inherit;
	transform: inherit;
	-webkit-transform: inherit;
	display: block;
	float: left;
	margin-left: 8px;
	margin-bottom: 12px;
}

.gnb--user .container-body .user--id__btn:first-of-type {
	margin-left: 0;
}


.gnb--pop__output {
	width: 100%;
	height: 80px;
	background-color: #fff;
	display: table;
	z-index: 999;
	box-sizing: border-box;
	border-top: 1px solid #d3d6d8;
	border-bottom: 1px solid #d3d6d8;
}

.gnb--pop__output:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
	overflow: hidden;
}

.gnb--pop__output .container-body .gnb--popup__tag {
	margin: 19px 0;
}
/* gnb */



/* body */
.body {
	width: 1208px;
	position: fixed;
	top: 200px;
	left: 50%;
	bottom: 150px;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
}

.body--pop__reply {
	width: 1208px;
	min-height: 100%;
	margin: -150px auto 0px;
}

.body--pop__reply .page--popup {
	/* footer height */
	padding-top: 150px;
}

.body--pop__reply .page--popup__write {
	padding-top: 35px;
}

.body--pop {
	width: 1280px;
	min-height: 100%;
	margin: 0 auto 0px;
}

.body--pop .page--popup {
	/* gnb height */
	/*padding-top: 80px;*/
	overflow-y: auto;
	overflow-x: hidden;
	height: 650px;
}

.body--pop.create {
	width: 1280px;
	/*min-height: 100%;*/
	/*margin: -150px auto 0px;*/
	margin: 0 auto 0;
}

.body--pop.create .page--popup {
	/*padding-top: 150px;*/

}

.body--pop.creat--tag {
	/*width: 1208px; �룬른�� 藥닸젎�� �딁깧 �곮짍渦묊뺐 1280*/
	width: 1280px;
	min-height: 100%;
	margin: -220px auto 0px;
}

.body--pop.creat--tag .page--popup {
	/* gnb height */
	padding-top: 220px;
}

.body--pop.write {
	width: 1208px;
	min-height: 100%;
	margin: -80px auto 0;
}

.body--pop.write:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
	overflow: hidden;
}

.body--pop.write .page--popup {
	/* gnb height */
	padding-top: 80px;
}

.body--pop.view--full {
	width: 1208px;
	min-height: 100%;
	margin: -70px auto 0px;
}

.body--pop.view--full .page--popup {
	/* gnb height */
	padding-top: 70px;
}


.left__contents {
}

.center__contents {
	width: 1208px;
	margin: 0 auto;
	/*overflow: hidden;*/
}

.right__contents {
}
/* body */



/* page */
.page--card {
	width: 112%;
	height: auto;
}

.page--card.columns {
	width: 100%;
	column-width: 284px;
	column-count: 4;
	display: block;
	float: left;
}

.page--card figure {
	display: inline-block;
	float: left;
	margin-right: 24px;
	margin-bottom: 24px;
}

.page--num {
	display: block;
	box-sizing: border-box;
	border: 1px solid #263547;
	border-radius: 6px;
	background-color: inherit;
	padding: 10px 50px;
	margin: 0 auto 40px;
  font-family:'Pretendard', sans-serif;
}

.page--popup__link {
	width: 520px;
	height: 142px;
	background-color: #fff;
	border-radius: 4px;
	padding: 20px;
}

.dialog--link {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%) ;
	-webkit-transform: translate(-50%, -50%);
}

.pop_alert {background-color:#fff; position:absolute; top:50%;}

/* page */

.body--pop .page--popup .page--card {margin-top:24px; padding-left:30px; box-sizing:border-box;}

/* footer */
footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 150px;
	display: block;
	background-color: orange;
}
/* footer */



/* footer--pop */
.footer--pop {
	width: 100%;
	height: 70px;
	display: block;
	padding: 10px 0;
	text-align: center;
	background-color: #ebeef0;
	box-sizing: border-box;
	border-top: 1px solid #d3d6d8;
	border-bottom: 1px solid #d3d6d8;
}

.footer--pop:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
	overflow: hidden;
}

.footer--pop__tag {
	width: 100%;
	padding: 14px 0 3px;
	text-align: center;
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	border-top: 1px solid #d3d6d8;
	height: 70px;
	position: fixed;
	bottom: 0;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

.footer--pop__tag .button {
	margin-right: 12px;
	margin-bottom: 12px;
}

.footer--pop__button {
	width: 100%;
	padding: 10px 0 11px;
	text-align: center;
	display: block;
	background-color: #ebeef0;
	box-sizing: border-box;
	border-top: 1px solid #d3d6d8;
}

.footer--pop__reply {
	width: 100%;
	min-height: 70px;
	display: block;
	background-color: #ebeef0;
	box-sizing: border-box;
	border-top: 1px solid #d3d6d8;
	border-bottom: 1px solid #d3d6d8;
}

.footer--pop.create {
	
}

.footer--pop.create .container-body {
	position: relative;
}

.footer--pop.create .radio {
	position: absolute;
	top: 0;
	right: 0;
}
/* footer--pop */




.scrollbar::-webkit-scrollbar {
	background-color: transparent;
}

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
	background-color: #babac0;
	border-radius: 16px;
	border: 5px solid #ffffff;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
	background-color: #babac0;
	border: 5px solid #ffffff;
}

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {
	display: none
}


.globalMain {
	min-width:1280px;
	min-height:100%;
	background:url("../img/main/globalmain_bg.png") no-repeat center top;
	background-size:cover;
}

/*202009 add*/
.globalMain .contentBox {width:1208px; margin:0 auto;}
.globalMain .contentBox .text {display:inline-block; margin-top:165px;}
.globalMain .contentBox .loginBox {width:605px; padding:65px 50px; margin:130px auto 0; box-sizing:border-box; background-color:rgba(255, 255, 255, 0.3); border:2px solid rgba(0,0,0,.06); border-radius:0.5rem;}
.globalMain .contentBox .loginBox select {width:100%; padding:15px 20px; font-size:1.12em; margin-top:12px; background-color:rgba(255, 255, 255, 0.5); border:1px solid #e0e0e0;}
.globalMain .contentBox .loginBox input {width:100%; height:54px; margin-top:40px; background-color:#00babb; color:#fff; border:0;}
.globalMain .contentBox .loginBox a {display:block; height:54px; padding-top:17px; margin-top:40px; background-color:#c20027; color:#fff; text-align:center; box-sizing:border-box;}
.globalMain .contentBox .copyrights {text-align:center; color:#7e7d7d; font-size:95%; margin-top:260px; padding-bottom:70px;}

.trainingCenter {width:100%; background-color:#fff; color:#7b7c7d; padding-bottom:50px; border-top:1px solid #d3d6d8;}
.trainingCenter .classList {padding-top:34px; box-sizing:border-box; margin-bottom:30px;}
.trainingCenter .classList h2 {color:#1db4c3; font-size:18px; padding-bottom:15px; padding-left:30px;}
.trainingCenter .classList table {width:100%; font-size:1.1em; border:1px solid #a6a6a6; border-radius:0.5em; overflow:hidden; border-collapse:separate;}
.trainingCenter .classList table th {width:25%; background-color:#1db4c3; color:#fff; height:54px; vertical-align:middle;}
.trainingCenter .classList table th:first-child {width:290px;}
.trainingCenter .classList table th:last-child {width:260px;}
.trainingCenter .classList table td {height:58px; border-bottom:1px solid #c3c3c3; font-size:.9em; text-align:center; vertical-align:middle;}
.trainingCenter .classList table tr:last-child td {border-bottom:0px;}
.trainingCenter .classList button {width:106px; height:40px; border:1px solid #ff6559; color:#ff6559; font-size:.95em; box-sizing:border-box;}
.trainingCenter .classList button.Start {border:1px solid #ff6559; background-color:#ff6559; color:#fff;}
.trainingCenter .classList button:disabled, .trainingCenter .classList button.disabled {border:1px solid #d1d1d1; background-color:#d1d1d1; color:#fff; opacity:1;}
.trainingCenter .classList .noData {padding:163px 0;}