@charset "utf-8";

/* 사용자 반응형 폰트설정 */
html {
	font-size:62.5%;
	
	/* 모바일 웹폰트 크기 자동조정 문제 */
	-webkit-text-size-adjust:none; /* 크롬/사파리/오페라 신버전 */
	-moz-text-size-adjust:none; /* 파이어폭스 */
	-ms-text-size-adjust:none; /* 익스 */
	-o-text-size-adjust:none; /* 오페라 구버전 */
	text-size-adjust:none;
}

/* 사용자 반응형 레이아웃 최소넓이 지정 */
body {min-width:280px;}



/* 기본 레이아웃[틀]  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.innerUsr {max-width:1320px; margin:0 auto; box-sizing:border-box; padding:0 20px; overflow:hidden;}
#contSect { font-size: 1.5rem; }
@media all and (max-width: 1200px){
	
}

@media all and (max-width: 991px){
	.innerUsr {width:100%;}
}

@media all and (max-width: 769px){
}

@media all and (max-width: 481px){
}



/* 상단영역 */
#headerUsr {position:relative; width:100%; border-bottom:1px solid #ddd;}

.gnbUsr {width:100%; box-sizing:border-box; border-bottom:1px solid #ddd; background:#fff; overflow:hidden;}
.gnbUsr > div > h1 {float:left; margin:20px 0;}
.gnbUsr > div > h1 a {display:block;}
.gnbUsr > div > div.topNavi {float:right; margin:20px 0; overflow:hidden;}
.gnbUsr > div > div.topNavi span {float:left; display:block;}
.gnbUsr > div > div.topNavi span a {position:relative; font-size:1.5rem; line-height:4rem; color:#494e61; margin-left:10px; padding-left:12px;}
.gnbUsr > div > div.topNavi span a:hover {color:#3366cc;}
.gnbUsr > div > div.topNavi span a:after {content:""; display:inline-block; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50%; background:#c4c6ca;}
.gnbUsr > div > div.topNavi span a:first-child {padding:0; margin:0;}
.gnbUsr > div > div.topNavi span a:first-child:after {display:none;}
.gnbUsr > div > div.topNavi > a {float:left; display:block; width:120px; height:40px; font-size:1.6rem; line-height:4rem; font-weight:500; color:#3366cc; text-align:center; border-radius:2rem; margin-left:20px; background:#f2f3f8;}
.gnbUsr > div > div.topNavi > a:hover {color:#fff; background:#3366cc;}

.menuUsr {width:100%; overflow:hidden;}

.menuBoxPC {padding:10px 0; overflow:hidden;}
.menuBoxPC > li {float:left; width:16.6667%; height:40px;}
.menuBoxPC > li > a {display:block; width:100%; height:100%; font-size:1.8rem; line-height:4rem; font-weight:500; color:#333; text-align:center;}
.menuBoxPC > li > a:hover {color:#3366cc;}

/* 모바일 메뉴선택시 배경 */
.coverBG {display:none; position:fixed; width:100vw; height:100vh; top:0; left:0; margin:0; background:rgba(0,0,0,0.6);}

/* 모바일 메뉴영역 */
#mobMENU {display:none; position:fixed; top:0; right:0; width:100vw; height:100vh; font-size:1.6rem; background:#fff; /* overflow-y:scroll; */ -ms-overflow-style:none;}
#mobMENU::-webkit-scrollbar {display:none;} 

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
	#headerUsr {position:fixed; z-index:999;}
	
	.gnbUsr {border-bottom:none;}
	.gnbUsr > div > h1 {margin:15px 0;}
	.gnbUsr > div > h1 a img {height:30px;}
	
	/* 모바일 햄버거메뉴 */
	.hmgBtn, .hmgBtn span {display:inline-block; transition:all 0.4s; box-sizing:border-box; cursor:pointer;}
	.hmgBtn {position:fixed; right:20px; z-index:999; width:20px; height:20px; padding:0; margin:20px 0; border:none; background:none;}
	.hmgBtn span {position:absolute; right:0; height:4px; background:#333;}
	.hmgBtn span.bar-one {top:0; width:10px;}
	.hmgBtn span.bar-two {top:8px; width:100%;}
	.hmgBtn span.bar-three {top:16px; width:100%;}
	
	.hmgBtn.view span.bar-one {width:100%; transform:translateY(8px) rotate(-45deg);}
	.hmgBtn.view span.bar-two {opacity:0;}
	.hmgBtn.view span.bar-three {transform:translateY(-8px) rotate(45deg);}
	
	.coverBG.view {display:block;}
	
	/* 모바일 메뉴영역 */
	#mobMENU.view {display:block;}
	#mobMENU {width:50vw;}
	#mobMENU .mobBox1 {width:100%; height:60px; box-sizing:border-box; padding:10px 55px 10px 15px; border-bottom:1px solid #eee; background:#fff;}
	#mobMENU .mobBox1 a.loginout {float:left; line-height:4rem; color:#333;}
	#mobMENU .mobBox1 a.univ {float:right; display:block; width:120px; height:40px; line-height:4rem; font-weight: 500; color:#3366cc; text-align:center; border-radius:2rem; background:#f2f3f8;}
	#mobMENU .mobBox1 a i {font-weight:bold; color:#3366cc; margin-left:5px;}
	
	.menuBoxMob {position:relative; display:block; min-height:100%; padding-right:calc(100% - 140px); background:#eff3fc;}
	.menuBoxMob > li {position:static; display:block; height:auto; vertical-align:top; transition:all 0.2s ease-in-out;}
	.menuBoxMob > li > a {display:block; position:relative; font-size:1.6rem; text-align:center; color:#202020; box-sizing:border-box; padding:20px 10px;}
	.menuBoxMob > li > a.on {color:#fff; background:#3366cc;}
	.menuBoxMob > li:nth-child(1) > ul {display:block !important;}
	.menuBoxMob > li > ul {position:absolute; top:0; right:0; width:calc(100% - 140px); height:100%; box-sizing:border-box; padding:10px 20px; background:#fff;}
	.menuBoxMob > li > ul > li {padding:20px 5px; box-sizing:border-box; border-bottom:1px dashed #ddd;}
	.menuBoxMob > li > ul > li > a {display:block; font-size:1.5rem; word-break:keep-all; cursor:pointer;}
	.menuBoxMob > li > ul > li.on > a, .menuBoxMob > li > ul > li:hover > a {color:#3366cc;}
	.menuBoxMob > li > ul > li > ul {margin-top:10px; box-sizing:border-box; padding:5px 10px; background:rgba(237,109,1,0.05);}
	.menuBoxMob > li > ul > li > ul > li {position:relative; box-sizing:border-box; padding:5px 0 5px 10px;}
	.menuBoxMob > li > ul > li > ul > li:after {content:""; display:inline-block; position:absolute; left:0; top:13px; width:3px; height:5px; background:url('../images/common/leftMenu_dot.gif') no-repeat;}
	.menuBoxMob > li > ul > li > ul > li  a {font-size:1.4rem;}
	.menuBoxMob > li > ul > li > ul > li  a:hover {text-decoration:underline;}
}

@media all and (max-width: 769px){
	#mobMENU {width:70vw;}
}

@media all and (max-width: 481px){
	#mobMENU {width:100vw;}
}



/* 하단영역 */
#footerUsr {width:100%; box-sizing:border-box; padding:30px 0 20px 0; border-top:1px solid #ddd; background:#fff;}

.footerMenu {overflow:hidden;}
.footerMenu > div > h1 {float:left;}
.footerMenu > div > div {float:right; overflow:hidden;}
.footerMenu > div > div a {position:relative; font-size:1.5rem; line-height:4.8rem; color:#494e61; margin-left:10px; padding-left:12px; word-break:keep-all;}
.footerMenu > div > div a:hover {color:#3366cc;}
.footerMenu > div > div a:after {content:""; display:inline-block; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50%; background:#c4c6ca;}
.footerMenu > div > div a:first-child {color:#3366cc; padding:0; margin:0;}
.footerMenu > div > div a:first-child:after {display:none;}

.footerCopy {margin-top:20px;}
.footerCopy p {font-size:1.5rem; line-height:1.3; letter-spacing:-0.5px; color:#8893a9; margin-bottom:5px; word-break:keep-all;}
.footerCopy p:last-child {margin:0; letter-spacing:0;}
.footerCopy p span {margin-left:25px;}
.footerCopy p strong {color:#3366cc;}

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
}

@media all and (max-width: 769px){
	.footerMenu > div > h1 {display:none;}
	.footerMenu > div > div {float:none; width:100%; text-align:center;}
	.footerMenu > div > div a {line-height:1.4;}
	
	.footerCopy p {text-align:center;}
	.footerCopy p span {display:block; margin:5px 0 0 0;}
}

@media all and (max-width: 481px){
}



/* 본문 영역 */
.contUsr {max-width:1320px; margin:0 auto 60px auto; box-sizing:border-box; padding:50px 20px 0 20px; overflow:hidden;}
.contUsr #left {float:left; width:200px;}
.contUsr #right {float:right; width:calc(100% - 250px);}

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
	.contUsr {padding:20px 20px 0 20px;}
	.contUsr #left {display:none;}
	.contUsr #right {float:none; width:100%;}
}

@media all and (max-width: 769px){
}

@media all and (max-width: 481px){
}

/* 좌측메뉴 */
.leftMenu {width:100%; height:100%;}
.leftMenu p {position:relative; width:100%; height:60px; font-size:2.6rem; font-weight:500; color:#222; word-break:keep-all; box-sizing:border-box; padding:5px 0 10px 0; border-bottom:6px solid #f2f3f8; background:#fff;}
.leftMenu p:before {content:""; display:block; position:absolute; left:0; bottom:-6px; width:40%; height:6px; background:#feae4b;}
.leftMenu p:after {content:""; display:block; position:absolute; left:0; bottom:-6px; width:20%; height:6px; background:#454e79;}
.leftMenu p.leftMENU0037 {height:90px; padding:5px 20px 10px 0;}


.leftMenu dl {width:100%; overflow:hidden;}
.leftMenu dl dt {width:100%;}
.leftMenu dl dt a {position:relative; display:block; padding:18px 0 19px 5px; font-size:1.5rem; line-height:1.5rem; font-weight:500; color:#555; border-bottom:1px solid #ddd; background:#fff;}
.leftMenu dl dt a:after {content:""; display:inline-block; position:absolute; right:10px; top:25px; width:13px; height:3px; background:url('../images/common/icn_left_menu.png') no-repeat;}
.leftMenu dl dt a:hover {color:#355cb9;}
.leftMenu dl dt a.on {color:#355cb9;}
.leftMenu dl dd {padding:7px 0; border-bottom:1px solid #ddd; background:#f7f8fc;}
.leftMenu dl dd a {display:block; padding:8px 0 8px 20px; font-size:1.3rem; background:url('../images/common/leftMenu_dot.png') 10px 12px no-repeat;}
.leftMenu dl dd a:hover {color:#222; text-decoration:underline;}
.leftMenu dl dd a.on {color:#222; text-decoration:underline;}

/* 서브이미지 */
#subVisual {width:100%; height:120px; background-size:cover; background:url('../images/common/subVisualBg.png') center center no-repeat, linear-gradient(to right,#444bc0,#3e99e1); background-size:cover;}
#subVisual > div > h2 {font-size:3.2rem; font-weight:bold; color:#fff; text-align:center; margin:41px 0;}

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
	#subVisual {margin-top:61px;}
}

@media all and (max-width: 769px){
}

@media all and (max-width: 481px){
	#subVisual > div > h2 {font-size:2.8rem; margin:43px 0;}
}


/* 타이틀/네비 */
.titleNaviNew {margin-bottom:40px; padding:10px 0 40px 0; border-bottom:1px dashed #ddd; overflow:hidden;}
.titleNaviNew > h3 {display:none; float:left; font-size:2.8rem; line-height:3.2rem; color:#222; font-weight:500;}
.titleNaviNew > div {font-size:1.8rem; word-break:keep-all;}
.titleNaviNew > div > span {font-weight:500; color:#333;}

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
	.titleNaviNew {margin-bottom:30px; padding:10px 0 30px 0;}
	.titleNaviNew > div {font-size:1.6rem;}
}

@media all and (max-width: 769px){
}

@media all and (max-width: 481px){
}



/* 로그인 */
.loginLayer {left:50%; top:50%; width:640px; border-top:5px solid #3366cc; background:#fff; z-index:10;}
.loginLayer > p {position:absolute; margin:-5px 0 0 640px;}
.loginLayer > div > h1 {margin-top:70px; text-align:center; font-size:36px; color:#333; font-weight:500;}
.loginLayer > div > h1 span {color:#3366cc;}
.loginLayer > div > h2 {margin-top:20px; text-align:center; font-size:16px; color:#555; font-weight:normal;}
.loginLayer > div > div {width:90%; margin:50px auto 0 auto; padding-top:20px; text-align:center; border-top:1px solid #e5e5e5;}
.loginLayer dl {width:330px; margin:10px auto 60px auto; overflow:hidden;}
.loginLayer dl dt {margin-bottom:15px;}
.loginLayer dl dt p {margin-bottom:15px; font-size:1.6rem; font-weight:500; letter-spacing:-1px;}
.loginLayer dl dt ul {width:100%; overflow:hidden;}
.loginLayer dl dt ul li {margin-bottom:5px; width:328px; border:1px solid #ddd;}
.loginLayer dl dt ul li input {width:100%; height:50px; border:none;box-sizing:border-box;}
.loginLayer dl dt ul li input.lgID {background:url('../images/content/icn_id.jpg') 15px center no-repeat; padding-left:45px;}
.loginLayer dl dt ul li input.lgPW {background:url('../images/content/icn_pwd.jpg') 15px center no-repeat; padding-left:45px;}
.loginLayer dl dt div {width:330px; margin-top:10px;}
.loginLayer dl dt div a {display:block; width:100%; text-align:center; padding:15px 0; color:#fff; font-size:18px; border:none; background:#3366cc;}
.loginLayer dl dd {text-align:center; font-size:16px;}

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
}

@media all and (max-width: 769px){
	.login_pop_inner {width:100% !important; min-width:100% !important; height:auto !important;}
	.loginLayer {width:100%; height:100%; min-height:500px; box-sizing:border-box; padding:0 20px; text-align:center;}
	.loginLayer > p {left:10px; margin:-5px 0 0 0;}
	.loginLayer > div > div {margin-top:30px;}
	.loginLayer > div > h1 {font-size:32px; word-break:keep-all;}
	.loginLayer > div > h2 {font-size:15px; word-break:keep-all;}
	.loginLayer > div > h2 br {display:none;}
	.loginLayer dl {width:80%; margin:0 auto 70 auto;}
	.loginLayer dl dt ul li {width:100%; box-sizing:border-box;}
	.loginLayer dl dt div {width:100%; margin-top:10px;}
}

@media all and (max-width: 481px){
	.loginLayer {padding:0 15px;}
	.loginLayer > div > h1 {font-size:22px;}
	.loginLayer > div > h2 {font-size:14px;}
}



/* 학습성과 자가평가-박스형 레이아웃 */
.selfEvl_list_box {overflow:hidden;}
.selfEvl_list_box > ul {width:100%; box-sizing:border-box; padding:5px 0; overflow:hidden;}
.selfEvl_list_box > ul > li {float:left; width:23%; margin:10px 1%; border-radius:1rem; box-sizing:border-box; padding:20px; background:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.1);}
.selfEvl_list_box > ul > li > p {font-size:1.5rem; text-align:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed #ccc;}
.selfEvl_list_box > ul > li > p strong {font-size:1.8rem; color:#333; margin-left:5px;}
.selfEvl_list_box > ul > li > dl {overflow:hidden;}
.selfEvl_list_box > ul > li > dl dt {font-size:1.3rem;}
.selfEvl_list_box > ul > li > dl dd {height:18px; font-size:1.5rem; color:#333; letter-spacing:0; margin-top:5px;}
.selfEvl_list_box > ul > li > div {margin-top:15px;}
.selfEvl_list_box > ul > li > div a {display:block; width:100%; height:40px; font-size:1.5rem; line-height:4rem; color:#fff; text-align:center; border-radius:3px;}
.selfEvl_list_box > ul > li > div a.btnY {background:#5f6578;}
.selfEvl_list_box > ul > li > div a.btnN {background:#ff9f27;}

@media all and (max-width: 1200px){
}

@media all and (max-width: 991px){
}

@media all and (max-width: 769px){
	.selfEvl_list_box > ul > li {width:48%;}
}

@media all and (max-width: 481px){
	.selfEvl_list_box > ul > li {float:none; width:80%; margin:15px auto;}
}


/* 학습성과 안내 > 학습성과 시스템 안내 > 프로그램 학습성과 */
.po_01 * {box-sizing: border-box;}
.po_01 li {margin-bottom:6px;}
.po_01 li:last-child {margin-bottom:0;}
.po_01 li p {display:flex; align-items:center; align-items:stretch;}
.po_01 li p > * {display:flex; align-items:center; justify-content:center;}
.po_01 li dfn {min-width:65px; font-size:14px; font-style:normal; font-weight:500; letter-spacing:0; text-transform:uppercase; text-align:center; color:#fff; padding:6px 16px; margin-right:8px; border-radius:6px; background:#355cb9;}
.po_01 li span {line-height:1.4em; word-break:keep-all;}
@media all and (max-width: 769px){
	.po_01 li {margin-bottom:10px;}
	.po_01 li p {flex-direction:column;}
	.po_01 li dfn {padding:10px 16px; margin:0 0 8px 0;}
	.po_01 li span {align-self:start;}
}



/* 학습성과 안내 > 학습성과 시스템 안내 > 프로그램 설정 단계 */
.po_02 { font-size: 1.5rem; }
.po_02_wrap { display: flex; padding-bottom: 80px; align-items: center; }
.po_02_wrap.bg { position: relative; background: url('../images/content/po_0201.png') no-repeat center bottom; background-size: contain; }
.po_02_wrap div { padding: 15px; margin-right: 30px; border: 1px solid #eaeaea; border-radius: 6px; background: #fff; word-break: keep-all; }
.po_02_wrap > div:last-of-type { margin-right: 0; }

.po_02_wrap div.arr { position: relative; }
.po_02_wrap div.arr::after { content: "\f061"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-family: "FontAwesome"  }
.po_02_wrap p { width: 100%; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #e5e5e5; text-align: center; font-weight: 500; color: #363636; }
.po_02_wrap .group { border: 1px solid #e9effc; background: #f7f8fc; }
.po_02_wrap .boxnone { padding: 0; margin-right: 0; border: none; background: transparent; }
.po_02_wrap .boxnone div { margin-bottom: 10px; }
.po_02_wrap .boxnone div:last-child { margin-bottom: 0; }
.po_02_wrap .laBox { min-width: 215px; }
.po_02_wrap .laBox { display: flex; position: relative; justify-content: center; }
.po_02_wrap .laBox::before { content: ""; position: absolute; width: 100%; height: 200%; bottom:103%; background: #fff; }
.po_02_wrap .feedback { position: absolute; padding: 6px 16px; right: 37%; bottom: 0; transform: translateY(-25%); border: 1px solid #eaeaea; border-radius: 50rem;  background: #fff; }

@media all and (max-width: 991px){
	.po_02_wrap { flex-wrap: wrap; padding: 0 8vw 0 0; }
	.po_02_wrap.bg { background: url('../images/content/po_0202.png') no-repeat right bottom; }
	.po_02_wrap div { width: 100%; padding: 10px; margin-right: 0; margin-bottom: 30px; }
	.po_02_wrap > div:last-of-type{ margin-bottom: 0; }
	.po_02_wrap div.arr::after { content: "\f063"; right: 50%; top: auto; bottom: -25px; transform: translateX(50%); }
	.po_02_wrap .boxnone { display: flex; }
	.po_02_wrap .boxnone div { margin-bottom: 0; margin-right: 10px; }
	.po_02_wrap .boxnone div:last-child { margin-right: 0; }
	.po_02_wrap .laBox::before { content: none; }
	.po_02_wrap .feedback { transform: rotate(90deg); height: 30px; right: -40px; top: 60%; font-size: 13px; }
}