@import url("font.css");
/* //@import url("default.css"); */

/****** 헤더 { ******/

/* 질문 답변 롤링 { */
#MyQuestions {width:100%; background-color:#173846; overflow:hidden;}
#MyQuestionsList {max-width:1400px; margin:auto; position:relative; height:42px;}
#MyQuestionsList ul {position:absolute; width:100%;}
#MyQuestionsList ul li {color:var(--white); padding:5px; display:flex; width:60%; margin:auto;
	/* position:absolute;
	left:20%;
	background-color:#173846; 
	-moz-transition:all 300ms linear;
	-o-transition:all 300ms linear;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;*/
}
#MyQuestionsList ul li span {padding:5px;}
#MyQuestionsList ul li span.mqTitle {color:#6fdd4c; font-weight:600; width:100px;}
#MyQuestionsList ul li span.mqSubject {width:calc(100% - 300px)}
#MyQuestionsList ul li span.mqUser {width:100px;}
#MyQuestionsList ul li span.mqGoPost {padding:0 !important;}
#MyQuestionsList ul li span.mqGoPost > a {border:1px solid var(--white); color:var(--white); width:100px; float:right; text-align:center; padding:5px;}
/* } 질문 답변 롤링 */


/* 강사 슬라이드 배너 */
#InstructorSlide {background-color:#173846; position:relative; height:150px; overflow:hidden;}
#InstructorSlide ul {max-width:1400px; margin:auto;}
#InstructorSlide ul li {
	/* position:absolute;
	left:calc(50% - 500px); */
	-moz-transition:all 300ms linear;
	-o-transition:all 300ms linear;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;
}
#InstructorSlide ul li a {display:block; text-align:center; height:150px; overflow:hidden;}
#InstructorSlide ul li a img {}


/* 로그인 */
#Login {display:flex; max-width:1400px; margin:auto;}
#Login > div {width:33.33%; padding:30px 0;}

#LoginCsCenter {}
#LoginCsCenter ul {}
#LoginCsCenter ul li {font-weight:600; margin-bottom:5px; }
#LoginCsCenter ul li > a {}
.oneCs {position:relative;}
.oneCs::before {
	content:"\f107";
	position:absolute;
	font:var(--fa-font-light);
	top:calc(50% - 6px);
	left:85px;
	font-size:0.8rem;
}
.oneCs > a {border:1px solid var(--lgray); display:inline-block; padding:5px 30px 5px 10px;}

#LoginHome {text-align:center;}
#LoginHome img {margin-top:10%;}

#LoginSearch {margin-top:52px;}
#LoginSearch div {display:inline-block; margin-bottom:17px;}

#LoginSearchSelect {float:right;}
#LoginSearchSelect ul {display:flex;}
#LoginSearchSelect ul li {width:250px; border:1px solid var(--black); border-radius:5px;}

#LoginViewSearchTxtBtn {width:40px !important; height:40px; text-align:right; border-radius:50% !important; margin-left:10px; background-color:#ffc107;}
#LoginViewSearchTxtBtn > a {text-align:center; line-height:40px; font-size:1.5rem;}


/*#LoginBtnSection {width:100%; display:block;}
#LoginBtnSection ul {float:right; margin-right:54px;}
#LoginBtnSection ul li {position:relative; float:left; margin-left:20px;}
#LoginBtnSection ul li::before {
	content:"";
	position:absolute;
	height:10px;
	width:1px;
	background-color:var(--lgray);
	right:-10px;
	top:5px;
}
#LoginBtnSection ul li:last-child::before {width:0;}
#LoginBtnSection ul li a {color:#888; font-size:0.9rem;}
.redPopup{position:absolute; top:19px; left:5px; background-color:red; color:white; font-size:11px; white-space:nowrap; padding:5px;}
.redPopup::before {content:""; background-color:red; position:absolute; top:-2px; left:8px; width:10px; height:10px; transform:rotateZ(45deg); z-index:-1;}*/

/****** } 헤더 ******/


/* 회원가입 시작 */
.joinSection {background-color:var(--white); padding:35px 30px; border-radius:10px; position:relative;}
.joinSection h4 {font-size:1.7rem; font-weight:600; margin:0;}
.joinSection h4 > span {font-size:1rem; font-weight:normal; float:right; margin-top:10px;}
.joinSection h4 > span > b {color:var(--red);}

.joinSection dl {margin-top:37px;}
.joinSection dl dt {font-size:1.1rem; margin-bottom:10px;}
.joinSection dl dt > b {color:var(--red);}
.joinSection dl dd {position:relative;}

#gender {}
#gender ul {display:flex;}
#gender ul li {
	border:1px solid var(--dgray);
	text-align:center;
	width:100%;
	padding:12px 0;
	font-size:1.1rem;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	cursor:pointer;
}

#gender ul li.gAct {background-color:var(--dgray); color:var(--white);}
#gender ul li:hover {background-color:var(--basic); color:var(--white); border:1px solid var(--basic);}

.multipleIpt {}
.multipleIpt ul {display:flex;}
.multipleIpt ul li {text-align:center; width:100%; padding:12px 0 0; font-size:1.1rem;}


.multipleSelect {}
.multipleSelect ul {}
.multipleSelect ul li {text-align:center; width:100%; padding:12px 0 0; font-size:1.1rem;}

.multipleBtn {
	background-color:var(--lgray);
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	color:var(--white);
	padding:10px 18px;
}
/*.multipleBtn:hover {
	background-color:var(--basic);
	color:var(--white) !important;
}*/

.multipleBtnAct {background-color:var(--basic); color:var(--white) !important;}

#FindInterest {
	margin:0; width:100%; 
	padding:11px 30px 11px 10px;
	-webkit-appearance:none; 
	-moz-appearance:none;
	appearance:none;
	background:url('/images/find_icon.png') no-repeat calc(100% - 15px) 50%/16px auto; 
	box-sizing:border-box; 
}

#InterestRes {height:210px; overflow-y:auto; background-color:var(--ajxbgc);}
#InterestRes ul {padding:10px;}
#InterestRes ul li {
	cursor:pointer;
	color:var(--dgray);
	padding:5px 10px;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
}
#InterestRes ul li:hover {
	color:var(--white) !important;
	background-color:var(--ajxbgch);
}

/* 스크롤 */
#InterestRes::-webkit-scrollbar {width:8px;}
#InterestRes::-webkit-scrollbar-thumb {background-color:var(--dgray); border-radius:25px;}
#InterestRes::-webkit-scrollbar-track {background-color:var(--placeholder); border-radius:25px; box-shadow:inset 0px 0px 5px var(--white);}

.reSelectBtn {
	width:calc(50% - 87px);
	text-align:center;
	padding:10px;
	box-sizing:border-box;
	border:1px solid var(--basic);
	color:var(--basic);
	cursor:pointer;
	float:right;
	background-color:var(--basic);
	color:var(--white);

}

.multipleSelectBtn {
	border:1px solid var(--basic);
	color:var(--basic);
	background-color:var(--white);
}

.multipleSelectBtnAdd {
	color:var(--white);
	background-color:var(--basic);
}


.multipleFind {display:flex;}

#TermsOfUse {border:1px solid #e8e7ed;}
#TermsOfUse > dt {background-color:#f3f2f9; padding:17px; border-bottom:1px solid #e8e7ed;}
#TermsOfUse > dt label > span {}
#TermsOfUse > dd {padding:17px; display:inline-block; width:calc(100% - 34px);}
#TermsOfUse > dd > p {
	float:right;
	cursor:pointer;
	color:var(--lgray);
	text-decoration:underline;
	text-underline-position:under;
}

#JoinCompleteBtn {
	width:100%;
	border-radius:3px;
	background-color:var(--lgray);
	margin-top:25px;
	padding:17px;
	color:var(--white);
	font-size:1.2rem;
	font-weight:600;
}
#JoinCompleteBtn:hover {background-color:var(--basic);}

#ModalPopup {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:rgb(0 0 0 / 50%);}

#ModalPopupInfo {
	max-width:500px;
	height:80vh;
	background-color:var(--white);
	border-radius:10px;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding:20px;
	box-sizing:border-box;
}
#ModalPopupInfo h2 {}
#ModalPopupInfo ul {height:calc(100% - 150px); overflow:hidden; margin-top:10px;}
#ModalPopupInfo ul li {}
#ModalPopupInfo ul li select {border:1px solid var(--lgray); border-radius:5px;}
/* 스크롤 */
#AgreeText {border:1px solid var(--lgray); border-radius:5px; height:calc(100% - 110px); margin-top:20px; overflow-y:scroll; white-space:pre-wrap; padding:20px;}

#AgreeText::-webkit-scrollbar {width:8px;}
#AgreeText::-webkit-scrollbar-thumb {background-color:var(--dgray); border-radius:25px;}
#AgreeText::-webkit-scrollbar-track {background-color:var(--placeholder); border-radius:25px; box-shadow:inset 0px 0px 5px var(--white);}
#PopupCloseBtn {
	width:100%;
	border-radius:3px;
	background-color:var(--basic);
	margin-top:25px;
	padding:13px;
	color:var(--white);
	font-size:1.2rem;
	font-weight:600;
}

#UseEyes {
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
	color:var(--dgray);
}

#JoinResultRtn {
	content:'';
	cursor:pointer;
	position:relative;
	display:block;
	width:100px;
	height:100px;
	border-radius:50%;
	cursor:pointer;
	margin-left:calc(50% - 50px);
	margin-top:40px;
	overflow:hidden;
	background-color:var(--basic);
}

#JoinResultRtn::before {
	content:'\f00c';
	position:absolute;
	font-family:"FontAwesome";
	top:calc(50% - 20px);
	left:calc(50% - 15px);
	font-size:2.5rem;
	color:var(--white);
}

#ReturnUrlBtn {margin-top:137px;}
#ReturnUrlBtn > dd {}
#ReturnUrlBtn > dd > a {
	border:1px solid var(--basic);
	padding:18px;
	font-size:1.2rem;
	text-align:center;
	margin:17px 0;
	border-radius:3px;
	color:var(--basic);
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
}

#ReturnUrlBtn > dd > a:hover {
	border:1px solid var(--dgray);
	background-color:var(--dgray);
	color:var(--white);
}

.readonly {color:var(--dgray);}



#ModifyPassword {}
#ModifyPassword ul {display:flex;}
#ModifyPassword ul li {
	border:1px solid var(--dgray);
	text-align:center;
	width:100%;
	padding:12px 0;
	font-size:1.1rem;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	cursor:pointer;
}

#ModifyPassword ul li.pAct {background-color:var(--dgray); color:var(--white);}
#ModifyPassword ul li:hover {background-color:var(--basic); color:var(--white); border:1px solid var(--basic);}


#SecureAccess {
	content:'';
	position:relative;
	text-indent:20px;
}

#SecureAccess::before {
	content:'\f30d';
	position:absolute;
	font:var(--fa-font-light);
	top:calc(50% - 6px);
	left:calc(50% - 58px);
	font-size:0.8rem;
	/* color:var(--basic); */
}
/*#SecureAccess:hover::before {
	color:var(--white) !important;
}*/

#LoginRememberId {display:flex;}
#LoginRememberId > dd {padding:17px 0; display:inline-block; width:calc(100% - 34px);}
#LoginRememberId > dd > p {
	float:right;
	cursor:pointer;
	color:var(--lgray);
	text-decoration:underline;
	text-underline-position:under;
}


#SignUpBtn {
	width:100%;
	border-radius:3px;
	margin-top:100px;
	padding:17px;
	font-size:1.2rem;
	font-weight:600;
	border:1px solid var(--lgray);
	background-color:var(--white);
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	cursor:pointer;
	color:var(--dgray);
}


#fixedBanner_wrap {background-color:var(--b002354); display:flex;}
#fixedBanner_wrap img {margin:auto;}


/* 메인 대배너 */
#movSlide {width:100%; position:relative; overflow:hidden;}

#set {width:100%; overflow:hidden; display:block; position:relative; height:450px; margin:0;}
.paperbanner {width:100%; text-transform:uppercase; text-align:center; background-color:white; position:absolute; display:none;}
.db {display: block; z-index: 1;}
.zi0 {z-index: 0;}

#movSlide span {
	position: absolute;
	top: calc(50% - 25px);
	background-color:rgb(204 204 204 / 50%);
	cursor: pointer;
	width: 50px;
	height: 50px;
	display: block;
	overflow: hidden;
	line-height: 50px;
	text-align: center;
	color: var(--white);
	font-size: 30px;
	border-radius: 25px;
}
#movSlide li {
	width:100%;
	position:absolute;
	text-align:center;
	background-color:var(--black);
	list-style:none;
	left:0;
	height:inherit;
	transition:all 0.3s;
}

#left {position:absolute; left:10px; top:0; z-index:10;}
#right {position:absolute; right:10px; top:0; z-index:10;}

#pager {text-align:center;}
#pager > li {
	width: 25%;
	height: 30px;
	background-color: var(--b002354);
	position: relative;
	cursor: pointer;
	line-height: 2rem;
	color: var(--white);
	float: left;
}
#pager > li::before {
	content:"";
	position:absolute;
	width:1px;
	height:100%;
	background-color:var(--lgray);
	right:0;
}
#pager > li.Active {background-color:var(--basic);}


/* 에듀피디 분류 바로가기 */
#AllOccupation {display:flex; padding:60px 0;}
#AllOccupation ul {width:23%; text-align:right;}
#AllOccupation ul:nth-of-type(2) {width:calc(100% - 46%); padding:0 10px; text-align:center;}
#AllOccupation ul:nth-of-type(3) {text-align:left;}
#AllOccupation ul li {}
#AllOccupation ul li a {}

.collect {text-align:center; width:115px; font-size:1.1rem; font-weight:bold;}
.collect dl {}
.collect dl dt {border-radius:9px 0 9px 9px; padding:10px 0; color:#fff;}
.collect dl dd {border:1px solid var(--lgray); box-sizing:border-box; margin-top:-1px; padding:30px 0;}
.collect dl dd:nth-of-type(1) {border-radius:9px 9px 0 0;}
.collect dl dd:last-child {border-radius:0 0 9px 9px;}
.collect dl dd a {
	color:var(--ajxbgch);
	-moz-transition:all 300ms linear;
	-o-transition:all 300ms linear;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;
}
.collect dl dd a:hover {color:var(--b002354);}

/* 배너2 */
#movSlide2 {width:100%; position:relative; overflow:hidden; background:url('/images/intro2022/top-bg.png') no-repeat 50%; border-radius:9px;}

#set2 {width:100%; overflow:hidden; display:block; position:relative; height:515px; margin:0; /*margin-left:-40px;*/}
.paperbanner2 {width:33.33%; box-sizing:border-box; padding:0.5rem; text-transform:uppercase; float:left; list-style:none;}

.db2 {}
.zi02 {z-index:0;}

#movSlide2 span {
	position: absolute;
	top: calc(50% - 25px);
	background-color:rgb(204 204 204 / 50%);
	cursor: pointer;
	width: 50px;
	height: 50px;
	display: block;
	overflow: hidden;
	line-height: 50px;
	text-align: center;
	color: var(--white);
	font-size: 30px;
	border-radius: 25px;
}
#movSlide2 li {text-align:center; list-style:none; height:inherit;}

#left2 {position:absolute; left:0; top:0; z-index:10;}
#right2 {position:absolute; right:0; top:0; z-index:10;}

#pager2 {text-align:center;}
#pager2 > li {width:20px; height:20px; border-radius:20px; display:inline-block; position:inherit; cursor:pointer;}
#pager2 > li.Active2 {background-color:#f00;}

/* 배너3 */
#movSlide3 {width:100%; position:relative; overflow:hidden; }

#set3 {width:100%; overflow:hidden; display:block; position:relative; margin:0; height:145px;}
.paperbanner3 {width:33.33%; box-sizing:border-box; padding:0.2rem; text-transform:uppercase; float:left; list-style:none;}
.paperbanner3 > a > img {width:100%;}

#movSlide3 span {
	position: absolute;
	top: calc(50% - 25px);
	background-color:rgb(204 204 204 / 50%);
	cursor: pointer;
	width: 50px;
	height: 50px;
	display: block;
	overflow: hidden;
	line-height: 50px;
	text-align: center;
	color: var(--white);
	font-size: 30px;
	border-radius: 25px;
}
#movSlide3 li {text-align:center; list-style:none; height:inherit;}

#left3 {position:absolute; left:0; top:0; z-index:10;}
#right3 {position:absolute; right:0; top:0; z-index:10;}

#pager3 {text-align:center;}
#pager3 > li {width:20px; height:20px; border-radius:20px; display:inline-block; position:inherit; cursor:pointer;}
#pager3 > li.Active2 {background-color:#f00;}


#RecommendedEvent {max-width:1016px; margin:auto;}

@media screen and (max-width:900px) {

}


@media screen and (max-width:768px) {

}

@media screen and (max-width:767px) {

}

@media screen and (max-width:480px) {
	#ModalPopupInfo {width:90%;}
}