/* 로그인 팝업*/
div.popup_layer.login p {color:#fff; font-size: 20px;}
div.popup_layer.login ul.tab {display: flex; text-align: center; align-items: flex-end;}
div.popup_layer.login ul.tab > li {padding:5px 0; width:50%; background:#ddd; color:#999; transition:all 0.3s; list-style:none; border-radius: 5px 5px 0 0; font-weight: 500; cursor:pointer;}
div.popup_layer.login ul.tab > li.selected {border-bottom:1px solid #fff;}
div.popup_layer.login ul.tab > li.active {padding: 15px 0; background:var(--thema_color); color:#fff; border-bottom:0;}
div.popup_layer.login div.popup div.tabcont {box-sizing:border-box; background:#fff;}
div.popup_layer.login div.popup div.tabcont#integrated {padding:135px 55px;}
div.popup_layer.login div.popup div.tabcont#integrated div.save {padding:10px 0 15px;}
div.popup_layer.login div.popup div.tabcont#integrated div.save ul.login_help {display:none;}
div.popup_layer.login div.popup div.tabcont#common div.save {padding:10px 0;}
div[data-widget=member-login][data-templet=default] section.login div.save ul.login_help {display: flex;}
div[data-role=input][data-type=select] > ul > li:focus {background-color: var(--thema_color);}

div.popup_layer.login div[data-name=program] > div {display:none;}
div.popup_layer.login div[data-name=program] > div.show {display:block;}

div.popup_layer.login .tab li {font-size:15px; color:red;}
div.popup_layer.login .tabcont {display:none; padding:50px 55px;}
div.popup_layer.login .tabcont.on {display:block;}
div.popup_layer.login .tabcont p {font-size:20px; color:forestgreen;}

div.popup_layer.login  div[data-widget=member-login][data-templet=default] section div.sns {padding:28px; background:#f7f7f7;}
div.popup_layer.login  div[data-widget=member-login][data-templet=default] section div.sns ul[data-role=sns_login] {display:flex; align-items:center; justify-content:center; width:100%;}
div.popup_layer.login  div[data-widget=member-login][data-templet=default] section div.sns ul[data-role=sns_login] > li button {padding:10px 0; border:none;}

div.popup_layer.login  div[data-widget=member-login][data-templet=default] section div.sns {padding:28px; background:#f7f7f7;}
div.popup_layer.login  div[data-widget=member-login][data-templet=default] section div.sns ul[data-role=sns_login] {display:flex; align-items:center; justify-content:center; width:100%;}

div.popup_layer.login  div[data-widget=member-login][data-templet=default] section div.sns ul[data-role=sns_login] {display:flex; align-items:center; justify-content:center; width:100%;}

div[data-role=login_context].login div.sns p.sns_tit,
div.popup_layer.login div.sns p.sns_tit {color:#000; text-align:center; font-size:17px;}

div.sns ul[data-role=sns_login] {display:flex; align-items:center;}
div.sns ul[data-role=sns_login] > li {width:calc(100% / 3); border-radius:50%;}
div.sns ul[data-role=sns_login] > li > button:hover {background:#F0F2F7 !important;}
div.sns ul[data-role=sns_login] > li:last-child {margin-right:0px;}

div.sns ul[data-role=sns_login] > li > button {display:flex; flex-direction:column; align-items:center; justify-content:center; background: transparent;}
div.sns ul[data-role=sns_login] > li > button > i {display:inline-block; margin-right:0; position:relative; width:50px; height:50px; border-radius:50%; background:#fff; border:1px solid #dadce0;}
div.sns ul[data-role=sns_login] > li > button > i::before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:30px;}
div.sns ul[data-role=sns_login] > li > button[data-type=naver] > i::before {color:#03C75A;}
div.sns ul[data-role=sns_login] > li > button span.sns_txt {color:gray;}

div.sns ul[data-role=sns_login] > li  > button.kakao > i {background:url(../images/ico_sns_kakao.png) #fff center center no-repeat;}
div.sns ul[data-role=sns_login] > li  > button.kakao > i::before {content:none;}

div.sns ul[data-role=sns_login] > li.googl_login {padding:10px 0; height:97px; cursor:pointer;}
div.sns ul[data-role=sns_login] > li.googl_login:hover {background:#F0F2F7; border-radius:0;}
div.sns ul[data-role=sns_login] > li.googl_login a.custom_google_signin {display:block; height:100%;} 
div.sns ul[data-role=sns_login] > li.googl_login .custom_google_signin {position: relative; width:100%;} 
div.sns ul[data-role=sns_login] > li.googl_login .custom_google_signin .g_id_signin {opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
div.sns ul[data-role=sns_login] > li.googl_login .custom_google_signin .google-ico {position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%; z-index:1; width:50px; height:50px; border-radius:50%;  border:1px solid #dadce0; background:#fff url(../images/ico_sns_google.png) center  center no-repeat;}
div.sns ul[data-role=sns_login] > li.googl_login .custom_google_signin .google-txt {position:absolute; top:55px; left:50%; transform:translateX(-50%); color:gray; font-size:14px; text-align:center;}
div.sns ul[data-role=sns_login] > li.googl_login div.g_id_signin > div {width:100%; height:100%;}

#iModuleErrorForm div.sns ul[data-role=sns_login] > li.googl_login .custom_google_signin .google-txt {top:67px;}

div.sns ul[data-role=sns_login] > li button {border:none;}
div.popup_layer.login div#integrated div[data-widget=member-login][data-templet=default] section div.sns {display:none;}

div.popup_layer.login {display:none; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:200000; background-color:rgba(0,0,0,.5);}
div.popup_layer.login div.close {position:absolute; bottom:-45px; left:50%; transform:translateX(-50%); width:35px; height:35px; border-radius:50%; text-align:center; background:#049d55;}
div.popup_layer.login div.close i.xi-close {font-size:23px; color:#fff; line-height:35px; cursor:pointer;}
div.popup_layer.login div.popup {position:absolute; top:43%; left:50%; transform:translate(-50%, -50%); width:470px;  border-radius:15px;  background:transparent; z-index:30000;}


div[data-widget=coursemos-unifiedloginbar][data-templet=default] > span { display: inline-block; margin: 0px; opacity: 0.6; height:34px; line-height:34px; font-weight:bold; margin-right:12px; color:#000; font-size: 12px; vertical-align: middle;}
div[data-widget=coursemos-unifiedloginbar][data-templet=default] > i {width:30px; height:30px; margin:-2px 10px 0px 0px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; border-radius: 50%; cursor: pointer; }



div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] {}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile].popup {display:none; position:absolute; top: 50px; right:0px; left: -70px; z-index:100; box-shadow:0px 6px 12px rgba(0,0,0,0.175); background:#f7fafa; width:260px; }
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile].popup:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f7fafa; border-width: 10px; margin-left: -10px; }
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section {padding:12px; min-height: 200px; max-height: 400px; overflow-y: auto; }
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language {position:relative; text-align:right;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > button {height:16px; line-height:16px; border:0; background:transparent; font-size:12px; color:#999; cursor:pointer;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > button > i.flag {width:16px; height:16px; display:block; margin-right:5px; float:left;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > button > i.flag.ko {background-image:url(../images/ko.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > button > i.flag.en {background-image:url(../images/en.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > button > i.flag.ja {background-image:url(../images/ja.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > button > i.flag.zh {background-image:url(../images/zh.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul {list-style:none; border:1px solid rgba(0,0,0,0.15); background:#fff; box-shadow:0px 6px 12px rgba(0,0,0,0.175); padding:5px 0px; min-width:160px; position:absolute; top:20px; right:0; display:none;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a {display:block; height:26px; line-height:26px; font-size:12px; color:#333; text-align:left; text-decoration:none; padding:0px 10px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a > i {display:inline-block; float:left; margin:5px 8px 5px 0px; width:16px; height:16px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a > i.ko {background-image:url(../images/ko.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a > i.en {background-image:url(../images/en.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a > i.ja {background-image:url(../images/ja.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a > i.zh {background-image:url(../images/zh.png);}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language > ul > li > a:hover {background:#f5f5f5;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language.opened > ul {display:block;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.language.opened > button > i.fa:before {content:"\f0d8";}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > i.photo {width:68px; height:68px; display:block; margin:20px auto; border-radius:50%; background-position:50% 50%; background-size:cover;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > b {display:block; font-size:17px; color:#333; text-align:center; margin-bottom:8px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > b > a {text-decoration:none; color:#FF8F00;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > small {display:block; font-size:12px; color:#999; text-align:center;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.buttons {padding:30px 0px 10px 0px; text-align:center;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.buttons > i {display:inline-block; width:1px; height:10px; margin:2px 10px; background:#ddd; vertical-align:middle;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.buttons > button {border:0; background:transparent; padding:0px; color:#666; cursor:pointer; font-size:12px; height:14px; line-height:14px; vertical-align:middle; box-sizing:border-box;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section > div.buttons > button:hover {border-bottom:1px solid #666;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] {border-top:1px solid #dddfe2; background:#fff; padding:0; min-height:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 {font-size:0; height:30px; padding:0px 8px; margin:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 > div {display:inline-block; height:30px; line-height:30px; font-size:12px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 > div.button {float:right; font-size:0; line-height:1;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 > div.button > button {border:0; background:transparent; height:20px; line-height:20px; margin:5px; color:#2196F3; font-size:12px; position:relative; cursor:pointer;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 > div.button > button:after {width:2px; height:2px; background:#ccc; position:absolute; top:9px; right:-6px; content:" ";}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 > div.button > button:last-child {margin-right:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > h6 > div.button > button:last-child:after {display:none;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul {list-style:none; width:100%; display:block;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] {border-top:1px solid #dddfe2; background:#fff; padding:0; min-height:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 {font-size:0; height:30px; padding:0px 8px; margin:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 > div {display:inline-block; height:30px; line-height:30px; font-size:12px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 > div.button {float:right; font-size:0; line-height:1;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 > div.button > button {border:0; background:transparent; height:20px; line-height:20px; margin:5px; color:#2196F3; font-size:12px; position:relative; cursor:pointer;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 > div.button > button:after {width:2px; height:2px; background:#ccc; position:absolute; top:9px; right:-6px; content:" ";}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 > div.button > button:last-child {margin-right:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > h6 > div.button > button:last-child:after {display:none;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul {list-style:none; width:100%; display:block; min-height:100px; max-height:300px; overflow-y:auto;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li {border-top:1px solid #dddfe2; font-size:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li.title {background:#f5f6f7; padding-left:8px; height:24px; line-height:24px; color:#666; font-size:12px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li.loading {height:100px; line-height:100px; text-align:center; color:#999; font-size:16px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li.message {height:100px; line-height:100px; text-align:center; color:#999; font-size:12px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li > button {display:block; width:100%; border:0; padding:6px 8px; background:transparent; cursor:pointer; font-size:0; box-sizing:border-box; text-align:left;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li > button > i.icon {width:42px; height:42px; border-radius:50%; display:inline-block; border:1px solid #ccc; background-color:#fff; background-size:cover; background-repeat:no-repeat; background-position:50% 50%; box-sizing:border-box; margin-right:10px; vertical-align:top;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li > button > div.text {width:calc(100% - 52px); display:inline-block; line-height:20px; padding:1px 0px; font-size:12px; color:#222; vertical-align:top;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li > button > div.text > time {display:block; height:20px; line-height:20px; color:#666;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > ul > li > button.unread {background:#edf2fa;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=profile] > section[data-role=push] > *[data-action] {width:100%; height:30px; line-height:30px; text-align:center; text-decoration:none; color:#2196F3; font-size:12px; display:block; cursor:pointer; border:0; background:transparent; border-top:1px solid #dddfe2;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul {list-style:none; width:100%; display:block; min-height:100px; max-height:300px; overflow-y:auto;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li {border-top:1px solid #dddfe2; font-size:0;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li.title {background:#f5f6f7; padding-left:8px; height:24px; line-height:24px; color:#666; font-size:12px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li.loading {height:100px; line-height:100px; text-align:center; color:#999; font-size:16px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li.message {height:100px; line-height:100px; text-align:center; color:#999; font-size:12px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li > button {display:block; width:100%; border:0; padding:6px 8px; background:transparent; cursor:pointer; font-size:0; box-sizing:border-box; text-align:left;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li > button > i.icon {width:42px; height:42px; border-radius:50%; display:inline-block; border:1px solid #ccc; background-color:#fff; background-size:cover; background-repeat:no-repeat; background-position:50% 50%; box-sizing:border-box; margin-right:10px; vertical-align:top;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li > button > div.text {width:calc(100% - 52px); display:inline-block; line-height:20px; padding:1px 0px; font-size:12px; color:#222; vertical-align:top;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li > button > div.text > time {display:block; height:20px; line-height:20px; color:#666;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > ul > li > button.unread {background:#edf2fa;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=push] > *[data-action] {width:100%; height:30px; line-height:30px; text-align:center; text-decoration:none; color:#2196F3; font-size:12px; display:block; cursor:pointer; border:0; background:transparent; border-top:1px solid #dddfe2;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=course] {width:360px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=notification] {width:400px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=message] {width:400px;}
div[data-widget=coursemos-unifiedloginbar] > div[data-role=service] {width:240px; height:auto; max-height:none;}

div[data-widget=coursemos-unifiedloginbar] > div[data-role=service] > section {height:auto; max-height:none; overflow:visible;}