@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500&subset=korean');

*{margin:0;padding:0;font-family:'Noto Sans KR' ,Sans-serif;}
body{width:100%; height:100%; word-break: keep-all; word-wrap: break-word;}
::selection{background:#509b89; color:white;}
#wrapper{width:100%; min-height:calc(100% - 130px); z-index:1000; padding-bottom:130px; position:relative; overflow: hidden; background:url('/theme/coursemosv2/pix/newlogin/sso_bg.jpg') no-repeat; background-size:cover; background-position:center;}
.wrap{position:relative; display:flex; flex-direction:column;}

table{padding:0;border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
caption, legend{visibility:hidden; width:0; height:0; line-height:0; font-size:0; overflow:hidden;}

.txtL{text-align:left;}
.txtR{text-align:right;}
.txtC{text-align:center;}

.mT5{margin-top:5px;}
.mT10{margin-top:10px;}
.mT20{margin-top:20px;}
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.mT50{margin-top:50px;}

.mB5{margin-bottom:5px;}
.mB10{margin-bottom:10px;}
.mB20{margin-bottom:20px;}
.mB30{margin-bottom:30px;}
.mB40{margin-bottom:40px;}
.mB50{margin-bottom:50px;}

.mR5{margin-right:5px;}
.mR10{margin-right:10px;}
.mR20{margin-right:20px;}
.mR30{margin-right:30px;}
.mR40{margin-right:40px;}
.mR50{margin-right:50px;}

.mL5{margin-left:5px;}
.mL10{margin-left:10px;}
.mL20{margin-left:20px;}
.mL30{margin-left:30px;}
.mL40{margin-left:40px;}
.mL50{margin-left:50px;}

.txtC{text-align:center;}
.txtR{text-align:right;}
.txtL{text-align:left;}

.const_Tit{text-align:center; color:#fff; font-size:18px;}

#ssoHeader{width:100%; height:100px; line-height:80px; text-align:center; box-sizing:border-box; background:rgba(0,0,0,.15);}
#ssoHeader img{vertical-align:middle;}
#ssoHeader span{position:relative; font-size:36px; font-weight:bold; color:#fff; padding-left:30px; margin-left:30px;}
#ssoHeader span::before{content:"";  position:absolute; left:0; top:50%; margin-top:-10px; display:block; width:2px; height:32px; background:rgba(255,255,255,.5);}

#content{position:relative; max-width:1000px; margin:auto; display:flex; flex-direction:column;}

/*tab*/
#content .js-tabs{padding-top:30px;}
#content .js-tabs .tabs-content{position:relative; margin:0 0 20px; overflow:hidden;}
#content .js-tabs .tabs-content .tabs-content{margin:0;}
#content .js-tabs .tabs-nav{overflow:hidden; text-align:center;}
#content .js-tabs .tabs-nav__list{display:block;}
#content .js-tabs .tabs-nav__list li{float:left; list-style:none; width:50%;}
#content .js-tabs .tabs-nav__list li a{text-decoration:none; font-size:28px; color:rgba(255,255,255,.4); position:relative; display:block; padding:18px 0 10px;}
#content .js-tabs .tabs-nav__list li.active a{color:rgba(255,255,255,1);}
#content .js-tabs .tabs-nav__list li.active a::before{content:""; display:block; width:8px; height:8px; background:#fff; border-radius:8px; position:absolute; top:0; left:50%; margin-left:-4px;}
#content .js-tabs .tabs-nav__list li.active a::after{content:""; display:block; width:240px; height:3px; background:#fff; margin-top:10px; position:absolute; bottom:0; left:50%; margin-left:-120px;}
#content .js-tabs .tabs-nav__list.itemCol01 li{width:100%;}
#content .js-tabs .tab{width:100%; position:absolute; top:0; left:0; display:none;}
#content .js-tabs .tab.active{position:relative; display:block;}

#content .js-tabs .js-tabs-wrap{background:#fff; margin-top:35px; box-shadow:0px 0px 25px rgba(0,0,0,.2)}

/*NormalLogin*/
.loginBox.itemCol01{padding:40px;}

.loginBox.itemCol01 .loginItem{max-width:515px; margin:auto; text-align:center; overflow:hidden;}
.loginBox.itemCol01 .loginItem .loginBody{float:left; max-width:400px; height:auto; box-sizing:border-box;}
.loginBox.itemCol01 .loginItem .loginBtnBody{float:left; position:relative; margin:0 0 0 5px}
.loginBox.itemCol01 .loginItem .loginFoot{}

input.formControl{width:98%; height:50px; line-height:50px; border:1px solid #e0e0e0; padding:0 12px; box-sizing:border-box; box-shadow:0;}

.btnGroup .btnCol02 button{float:left;width:calc(50% - 5px);}
.btnGroup .btnCol02 button:first-child{margin-right:10px;}
.balloon {position:absolute; top:-10px; left:90%; background-color:lightblue; padding:5px 5px 6px 5px; line-height:15px; text-align:left; display:none; font-size:12px; width:100%;}

.checkList{width:100%; float:right; display:block; padding:5px 0;}
.checkList label{position:relative;}
.checkList .txt{font-size:15px; color:#444; padding-left:5px; cursor:pointer;}
.checkList .ico{background:url('/theme/coursemosv2/pix/newlogin/ico/ico_check_Off.jpg') no-repeat; width:16px; height:16px; display:inline-block; vertical-align:middle; margin: -2px 0 0 0px; cursor:pointer; position:relative; z-index:5;}

input.check{width: 16px; min-width: 16px; font-size:0; height:16px; position:absolute; top:50%; left:0; z-index:6; margin-top:-6px;}
input.check:checked + .ico{background:url('/theme/coursemosv2/pix/newlogin/ico/ico_check_On.jpg') no-repeat;z-index:7;}

.loginBtn{position: relative; border:0;background:#000; color:#fff; font-size:16px; cursor:pointer; display:inline-block; text-decoration:none;}
.loginBtn.type02{width:110px; height:110px; line-height:56px;}
.loginBtn.type03{width:160px; line-height:50px;}

.loginBtn.type02_1{width:100%; line-height:45px; background:#fff; color:#000; border:2px solid #000;}
.loginBtn.type02_2{width:100%; line-height:45px; background:#ececec; color:#000; border:2px solid #b0b0b0;}

/*exList*/
.tabInner{position:relative; overflow:hidden; border-top:1px solid #e0e0e0; padding:40px; clear:both;}
.tabInner .exList{list-style:none;}
.tabInner .exList li{position:relative; color:#333; font-size:14px; padding-left:15px; line-height:28px;}
.tabInner .exList li::before{position:absolute; left:0; content:"-"; display:inline-block;}

/*Footer*/
.ssoFooter{position:absolute; bottom:0; width:100%; height:40px; background-color:#202020; display:inline-block; padding:10px}/*position:absolute;bottom:15px;*/
.menu_footer{position:relative; max-width:1000px; margin:auto; vertical-align:middle}
.copy{color:#b0b0b0; font-size:12px; text-align:center; display:inline-block;}
.menu_footer ul{float:right;}
.menu_footer li{list-style:none; display:inline-block; padding:10px 0;}
.menu_footer li.home{background:url('/theme/coursemosv2/pix/newlogin/ico/home.gif')no-repeat left; padding-left:5px;}
.menu_footer li:before{content:"ㅣ"; color:gray; font-size:11px; padding:0 5px}
.menu_footer li:first-child:before {content:"";}
.menu_footer li a{color:#e0e0e0; text-decoration:none; font-size:12px;}
.menu_footer li.point a{color:#c59c40; text-decoration:none}

.img_welcome{border:1px solid #e0e0e0; display:block; margin:0 0 20px 0; text-align:center; color:#fff; font-size:24px; padding:49px 0; background: url('/theme/coursemosv2/pix/newlogin/img_welcomeBg.png') no-repeat center;} 

/*borderGrayCirList*/
.borderGrayCirList {height:auto; margin:30px auto 40px 4%; font-size:0;}
.borderGrayCirList>li {display:inline-block; position:relative; width:calc(25% - 6%); margin-left:35px; text-align:center; vertical-align:top; font-size:0; box-sizing:border-box;}
.borderGrayCirList>li span{display:none;}
.borderGrayCirList>li:not(:last-child)::before {content:''; position:absolute; top:50%; left:calc(100% + 10px); width:13px; height:25px; background:url('/theme/coursemosv2/pix/newlogin/ico/ico_arrR.png') no-repeat center; transform:translateY(-50%);}
.borderGrayCirList>li>.cir {display:table; width:160px; height:160px; border-radius:50%; border:1px solid #ddd; box-sizing:border-box; text-align:center;}
.borderGrayCirList>li>.cir>div {display:table-cell; vertical-align:middle;}
.borderGrayCirList>li>.cir>div>p {display:block; font-size:15px;}
.borderGrayCirList>li>.cir>div>img+p {margin-top:5px;}
.borderGrayCirList>li>.cir>div>p+p {margin-top:5px;}
.borderGrayCirList>li>.cir>div>p+a {margin-top:5px;}
.borderGrayCirList>li>p {display:block; position:absolute; top:0; left:0; width:100%; font-size:15px; text-align:center;}
.borderGrayCirList>li>p.txt {display:block; margin-top:20px; font-size:12px; color: #666;}
p.txt {display:block; margin-top:20px; font-size:12px; color: #666;}

/*borderGrayCirList_login*/
.borderGrayCirList_login {height:auto;font-size:0;}
.borderGrayCirList_login>li {display:inline-block; position:relative; text-align:center; vertical-align:top;font-size:0; box-sizing:border-box;}
.borderGrayCirList_login>li>.cir {display:table; width:200px; height:200px; border-radius:50%; border:1px solid #ddd; box-sizing:border-box; text-align:center;}
.borderGrayCirList_login>li>.cir>div {display:table-cell; vertical-align:middle;}
.borderGrayCirList_login>li>.cir>div>p {display:block; font-size:15px;}
.borderGrayCirList_login>li>.cir>div>img+p {margin-top:5px;}
.borderGrayCirList_login>li>.cir>div>p+p {margin-top:5px;}
.borderGrayCirList_login>li>.cir>div>p+a {margin-top:5px;}
.borderGrayCirList_login>li>p {display:block; position:absolute; top:0; left:0; width:100%; font-size:15px; text-align:center;}
.borderGrayCirList_login>li>p.txt {display:block; margin-top:20px; font-size:12px; color: #666;}
p.txt {display:block; margin-top:20px; font-size:12px; color: #666;}

@media(max-width:1200px){
	#content{padding:0 20px;}
	.tabInner .settingList{right:0; top:0; padding-top:15px; border-top:1px solid #e0e0e0; margin-top:15px; overflow:hidden; position:inherit;list-style:none;}	
	/*Footer*/
	.ssoFooter{position:absolute; bottom:0; width:100%; background-color:#202020; display:inline-block; padding:15px 0}
	.menu_footer li{padding:10px 10px 10px 0;}
}
@media(max-width:1024px){
	#ssoHeader{height:70px; line-height:70px;}
	#ssoHeader h1{margin-top:-5px;}
	#ssoHeader span{font-size:26px;}
	#ssoHeader span::before{height:26px;}
	#ssoHeader img{max-width:200px;}
	#content .js-tabs{padding-top:35px;}
	#content .js-tabs .tabs-nav__list li a{font-size:22px;}
	#content .js-tabs .tabs-nav__list li.active a::after{width:80%; left:50%; margin-left:-40%;}
	#content .js-tabs .js-tabs-wrap{margin-top:28px;}
	
	/*borderGrayCirList*/
	.borderGrayCirList {height:auto; margin:20px auto 20px auto; font-size:0;}
	.borderGrayCirList>li:not(:last-child)::before {left:calc(100% + 11px);}
	.borderGrayCirList>li>.cir {width:140px; height:140px;}
	.borderGrayCirList>li>.cir>div>p {font-size:12px;}
	.borderGrayCirList>li>.cir>div>img {width:30%;}

	/*borderGrayCirList_login*/
	.borderGrayCirList_login>li>.cir {width:153px; height:153px;}
	.borderGrayCirList_login>li>p {position:absolute; top:0;left:0; width:100%;}
	.borderGrayCirList_login>li>p.txt {display:block; margin-top:20px; font-size:12px; color: #666;}
}
@media(max-width:865px){
    .loginBox.itemCol01{padding:20px}
	#content .js-tabs .tabs-nav__list li{float:left; list-style:none; width:50%;}	
	/*borderGrayCirList*/
	.borderGrayCirList {height:auto; margin:30px auto 31px auto; font-size:0;}
	.borderGrayCirList>li {width:calc(23% - 2%); margin-left:4%;}
	.borderGrayCirList>li:not(:last-child)::before {left:calc(90% + 19px);}
	.borderGrayCirList>li>.cir {width:120px; height:120px;}
    .borderGrayCirList>li>.cir>div>p {font-size:12px;}
}
@media(max-width:768px){
	html, body{background-position:center -300px;}
	.tabTable{width:100%;overflow:hidden; overflow-x:scroll;}
	.loginBox.itemCol01{padding:20px;}	
	input.formControl{width:100%;}
	.img_welcome{padding:42px 0 43px 0;}		
	.borderGrayCirList {margin:20px auto 21px auto;}	
	.borderGrayCirList_login>li>.cir {width:120px; height:120px;}	
}
@media(max-width:700px){
	.borderGrayCirList>li {width:calc(23% - 5%); margin-left:6%;}
	.borderGrayCirList>li>.cir{width:95px; height:95px;}
}
@media(max-width:660px){
	.borderGrayCirList>li>.cir>div>img{display:none;}
	.borderGrayCirList>li {width:18%;}
	.img_welcome{padding:30px 10px; font-size:16px}
}
@media(max-width:615px){
	input.formControl{width:49.5%}
	.img_welcome{padding:60px 0 60px 0;}	
    .loginBtn.type02{display:block; width:100%; height:100%; line-height: 56px;}
	.loginBox.itemCol01 .loginItem .loginBody{max-width:100%; float:unset; margin:10px 0 0 0;}
	.loginBox.itemCol01 .loginItem .loginBtnBody{width:100%; margin:10px auto;}
	input.formControl{height:40px; line-height:40px; padding:0 10px;}
	.loginBtn.type02_1, .loginBtn.type02_2{line-height:40px; font-size:14px;}
}
@media(max-width:600px){
	.borderGrayCirList>li>.cir>div>img{display:none;}
	.borderGrayCirList>li {width:20%;}
	.borderGrayCirList>li:first-child {margin-left:0}	
	.borderGrayCirList>li:not(:last-child)::before{background:none;}
	.borderGrayCirList>li span{display:block; position:absolute; top:5px; left:0; width:18px; height:18px; border-radius:50%; background-color:#a70638; text-align:center; color:#fff; font-size:11px}
}
@media(max-width:468px){
	html, body{background-size:cover; background-position:center 0;}
	#ssoHeader span{font-size:24px;padding-left:10px;margin-left:5px;}
	.borderGrayCirList>li>.cir{width:80px; height:80px; letter-spacing:-1px; font-size:11px}
	input.formControl{width:100%}
	
}
@media(max-width:355px){
   #ssoHeader h1{padding:16px}
   #ssoHeader span{display:none;}
}