/*  [2021-02-24] 업데이트 안내 / 점검 안내 팝업창 css 시작 by 미영 */

@font-face {
    font-family: 'NanumSquareRoundOTFB';
    font-weight: bold;
    src: url("/appv2/resources/fonts/NanumSquareRoundOTFB.woff2") format('woff2');
}
@font-face {
    font-family: 'NanumSquareRoundOTFEB';
    font-weight: bold;
    src: url("/appv2/resources/fonts/NanumSquareRoundOTFEB.woff2") format('woff2');
}
@font-face {
    font-family: 'NanumSquareRoundEB';
    font-weight: bold;
    src: url("/appv2/resources/fonts/NanumSquareRoundEB.woff2") format('woff2');
}
@font-face {
    font-family: 'NanumSquareRoundR';
    font-weight: bold;
    src: url("/appv2/resources/fonts/NanumSquareRoundR.woff2") format('woff2');
}
@font-face {
    font-family: 'YoonSofunny';
    font-weight: bold;
    src: url("/appv2/resources/main/fonts/YoonSofunny.woff") format('woff');
}	
@font-face {
    font-family: 'NanumGothic';
    font-weight: bold;
    src: url("/appv2/resources/fonts/NanumGothic.woff2") format('woff2');
}
@font-face {
    font-family: 'NanumGothicB';
    font-weight: bold;
    src: url("/appv2/resources/fonts/NanumGothicBold.woff2") format('woff2');
}
@font-face {
    font-family: 'bmjua_otf';
    font-weight: bold;
    src: url("/appv2/resources/fonts/bmjua_otf.OTF");
}
 /* 留덉씠�럹�씠吏� �븯�떒 濡쒓렇�븘�썐 踰꾪듉 & �뙘�뾽李� css */
.header-logout {
    /* bottom:6px; */ /* 21-06-29 미영 수정 */
    bottom:15px;
    position: absolute;
    width: 100%;
    top:auto;
    right:0px;
}
.header-logout > a {
    display: block;
    width: 100%;
    background: url(../img/mypage/logoutBtn.png) 50% 50% no-repeat;
    height:67px;
}
.logout-recheck-box {
	display: none;
   	position: absolute;
   	z-index: 9999;
   	background-color: #fff;
   	top: 50%;
   	left: 50%;
   	width: 510px;
   	border-radius: 20px;
   	padding: 40px;
   	transform: translate(-50%, -50%);
   	background: url(../img/mypage/logout_bg.png) 50% 50% no-repeat;
}
.logout-recheck-box.open {
    display:block;
}
.logout-recheck-title {
    display: block;
    height:135px;
    background: url(../img/mypage/logout_text_title.png) 50% 50% no-repeat;
}
.logout-recheck-box .logout-pw-wrap {
    height: 83px;
    text-align: center;
}
.logout-recheck-box .logout-input-wrap {
	display:inline-block;
   	padding: 11px 26px;
   	margin-top: 8px;
   	width: 100%;
   	border-radius: 30px;
   	height: 55px;
   	background-color:#fff;
}
.logout-recheck-box .logout-recheck-pw {
	border: none;
   	outline: none;
   	width: 83%;
   	padding: 0 5px;
   	font-size:18px;
}
.logout-recheck-box .logout-recheck-pw::placeholder {
	color: #d5d0d0;
	font-size:20px;
	letter-spacing: -1.5px; 
	font-family: 'NanumSquareRoundOTFB'
}
.logout-recheck-box .warning-msg {
    font-size: 14px;
    padding-top: 6px;
    display:none;
    color: red;
    padding-left: 50px;
    display:none;
    font-family: 'NanumSquareRoundR';
} 
.logout-recheck-box .warning-msg.open {
    display:block;
    text-align:left;
}
.logout-recheck-buttons {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 16px;
}
.logout-recheck-buttons a {
    display: block;
    width:135px;
    padding:36px;
   	border-radius: 60%;
   	transition: all 200ms ease-in-out;
}
.logout-recheck-buttons a.logout-cancel-btn {
	background: url(../img/mypage/logout_cancelBtn.png) 50% 50% no-repeat;
}
.logout-recheck-buttons a.logout-yes-btn {
	background: url(../img/mypage/logout_okBtn.png) 50% 50% no-repeat;
} 

.logout-recheck-buttons a:nth-child(1) {
   margin-right: 20px;
}	
/* //濡쒓렇�븘�썐 �걹 */

.update-bg-dim,
.error-bg-dim {
	position:relative;
	width:100%;
	height:100%;
	z-index:7777;
}
.update-bg-dim::after,
.error-bg-dim::after {
	position:absolute;
	content:'';
	top:0;
	left:0;
	width:1280px;
	height: 800px;
	background: #050505;
	opacity: 0.6;
}
.check-bg-dim {
	position:relative;
	width:100%;
	height:100%;
	z-index:8888;
}
.check-bg-dim::after {
	position:absolute;
	content:'';
	top:0;
	left:0;
	width:1280px;
	height: 800px;
	background: #050505;
	opacity: 0.6;
}
.update-popup {
	position:absolute;
	top: 45%;
	left: 50%;
	width: 630px;
	height:650px;
	background:url(../img/popup/update_bg.png) 50% 50% no-repeat;
	z-index:7777;
	transform:translate(-50%,-50%);
}	
.check-popup {
	position:absolute;
	top: 45%;
	left: 50%;
	width: 630px;
	height:650px;
	background:url(../img/popup/check_bg.png) 50% 50% no-repeat;
	z-index:8888;
	transform:translate(-50%,-50%);
}
.error-popup {
	position:absolute;
	top: 45%;
	left: 50%;
	width: 630px;
	height:650px;
	background:url(../img/popup/error_bg.png) 50% 50% no-repeat;
	z-index:9999;
	transform:translate(-50%,-50%);
}

.update-popup-inner {
    text-align: center;
    padding:20px;
    padding-top: 230px;
}
.check-popup-inner {
    text-align: center;
    padding:20px;
    padding-top: 210px;
}
.error-popup-inner {
	text-align:center;
	padding:20px;
    padding-top: 210px;
}
.check-popup-inner .check-popup-title {
   display: block;
    height: 60px;
    font-size: 43px;
    margin-top: 35px;
    font-family: 'YoonSofunny';
}    

.update-popup-inner .update-popup-title {
    display: block;
    height: 100px;
    margin-top: 3px;
    font-size: 38px;
    line-height: 60px;
    font-family: 'YoonSofunny';
}

.update-popup-bottom {
   text-align: center;
    display: block;
    color: red;
    font-size:23px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    padding-right:5px;
    padding-left:5px;
    font-family: 'YoonSofunny';
     word-break: break-word;
     line-height: 1.5;
}

/* 
.update-popup-inner .update-popup-title {
    display: block;
    background: url(../img/popup/update_text_title.png) 50% 50% no-repeat;
    height: 100px;
    margin-top: 15px;
    font-family: 'YoonSofunny';
    font-size: 41px;
} */
.error-popup-title {
	background:url(../img/popup/error_title.png) 50% 50% no-repeat;
	text-align: center;
    display: block;
    height: 70px;
}
.update_inner {
	background-color:#fafafa;
	border-radius: 22px;
    padding: 10px 0;
    width: 93%;
    margin: auto;
    margin-top: 30px;
}

.update-popup-content {
   text-align: left;
    height: 69px;
    background-color: #fafafa;
    overflow: auto;
    width: 96%;
    margin: auto;
}

    
.update-popup-content_bk {
	text-align: left;
    height: 103px;
    background-color: #fafafa;
    overflow: auto;
    width: 96%;
    margin: auto;
}
.error-popup-content {
	background:url(../img/popup/error_text.png) 50% 50% no-repeat;
	height: 120px;
    margin: 15px;
}
.update-popup-content::-webkit-scrollbar,
.check-popup-content::-webkit-scrollbar {
	width:7px;
	background-color:transparent;
}
.update-popup-content::-webkit-scrollbar-thumb,
.check-popup-content::-webkit-scrollbar-thumb {
	background-color:#e8dccb;
	border-radius: 10px;
}
.update-popup-content::-webkit-scrollbar-track,
.check-popup-content::-webkit-scrollbar-track {
	background-color:#fafafa;
} 
.check-inner {
	border-radius: 22px;
    background-color: #fafafa;
    padding: 10px;
    width: 92%;
    margin: auto;
    margin-top: 25px;
}
.check-popup-content {
	text-align: left;
    height: 184px;
    background-color: #fafafa;
    overflow: auto;
    width: 100%;
    font-family: 'NanumSquareRoundOTFB';
    font-size: 20px;
    color: #ef4141;
    line-height: 1.8;
    letter-spacing: -1.8px;
    padding: 0 15px;
}	
.update-popup-content .title,
.check-popup-content .title {
	display: block;
    font-weight: 550;
    color: #000;
    margin-bottom: 5px;
    text-align: center;
}
.check-popup-content .time {
    text-align: center;
   	display: block;
   	font-size: 15px;
   	font-weight: 550;
   	color: #b32020;
}
.update-popup-content > ul {
	list-style-type: disc;
}	


.update-popup-content > ul > li {
	font-size: 20px;
    padding: 2px 5px;
    color: #b5b2b2;
    font-family: 'NanumSquareRoundOTFEB';
}
    /*
.update-popup-content > ul > li {
	font-size: 20px;
    padding: 5px 10px;
  	color:#ef4141;
  	font-family: 'NanumSquareRoundOTFEB';
}*/
.update-popup-button {
	text-align:center;
}
.update-popup-button > a {
	display: block;
    border-radius: 60%;
    background:url(../img/popup/okBtn.png) 50% 50% no-repeat;
    transition:all 200ms ease-in-out; 
    height: 90px;
    width: 170px;
    margin:auto;
}
.check-popup-button > a {
	display: block;
    border-radius: 60%;
    background:url(../img/popup/okBtn.png) 50% 50% no-repeat;
    transition:all 200ms ease-in-out; 
    height: 90px;
    width: 170px;
    margin:auto;
}
.error-popup-button > a {
	display: block;
    border-radius: 60%;
    background:url(../img/popup/okBtn.png) 50% 50% no-repeat;
    transition:all 200ms ease-in-out; 
    height: 90px;
    width: 170px;
    margin:auto;
}

.comp-wrap {
    width:0;
    height: 0;
}
.comp-wrap.invisible {
    display: none;
}
.comp-bg {
    width:1280px;
    height: 800px;
    position: relative;
}
.comp-bg::after {
    width:100%;
    height: 100%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    content: '';
    z-index:8888;
}
.comp-box {
    background:url(../img/popup/study_comp_bg.png);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 631px;
    height: 527px;
    text-align: center;
    border-radius: 8px;
   	z-index:8889;
}
.comp-box .comp-title {
   	display: block;
    font-size: 45px;
    font-family: 'YoonSofunny';
    color: #000000;
    line-height: 30px;
    margin-top:213px;
}
.comp-box .comp-content {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: #fff;
    height: 95px;
    border-radius: 20px;
    width: 85%;
    margin: auto;
    margin-top:35px;
}
.comp-content > p {
   	font-family: 'NanumGothicB';
    font-size: 18px;
    color:#f15f5f;
    line-height: 30px;
}
.comp-button > button {
    margin-top:30px;
}



.jindan-pop-wrap {
    width: 0;
    height: 0;
}
.open-bg {
    width:1280px;
    height: 800px;
    position: relative;
}
.open-bg::after {
    width:100%;
    height: 100%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    content: '';
    z-index: 8888;
}
.open-box {
    background:url(../img/popup/ppopup.png) center center no-repeat;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 400px;
    text-align: center;
    border-radius: 8px;
    z-index: 8889;
}
.open-box h2 {
    font-size: 27px;
    font-family: 'NanumGothicB';
    margin-top:60px;
}
.open-box .open-content {
    height: 320px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    padding-top: 0;
}
.open-content > p {
    font-family: 'NanumGothic';
    color:#414141;
    font-size: 20px;
    margin:0;
    margin-bottom: 20px;
    line-height: 1.5;
}
.open-content > span {
    font-family: 'NanumGothic';
    font-size: 20px;
    color:#00A89C;
}
.open-content > p.open-date {
    font-family: 'NanumGothicB';
    color:#414141;
    font-size: 18px;
    letter-spacing: -0.5px;
    margin: 10px 0;
}
.open-button {
    display: flex;
}
.open-button > button {
    padding:0;
}
.open-button img {
    width:100%;
    height: 100%;
}

@media screen and (width: 412px) {
.open-box h2    {
    font-size: 22px;
}
.open-content > p {
    font-size: 18px;
}
.open-content > span {
    font-size: 18px;
}
.open-content > p.open-date {
    font-size: 18px;
}
}
    
@media screen and (width: 320px) {
.open-box h2    {
    font-size: 16px;
}
.open-content > p {
    font-size: 14px;
}
.open-content > span {
    font-size: 14px;
}
.open-content > p.open-date {
    font-size: 14px;
}
}


/* 시스템 점검 팝업창 */
.system-check-wrap {
	width:0;
	height:0;
}
.sys-check-bg {
    width:1280px;
    height: 800px;
    position: relative;
}
.sys-check-bg::after {
    width:100%;
    height: 100%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    content: '';
    z-index:9998;
}
.sys-check-box {
    background:url(../img/popup/study_comp_bg.png);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 631px; 
    height: 527px;
    text-align: center;
    border-radius: 8px;
    z-index:9999;
}
.sys-check-box .sys-check-title {
    display: block;
    font-size: 45px;
    font-family: 'YoonSofunny';
    color: #000000;
    line-height: 30px;
    margin-top:213px;
}
.sys-check-box .sys-check-content {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: #fff;
    height: 120px;
    border-radius: 20px;
    width: 85%;
    margin: auto;
    margin-top:35px;
}
.sys-check-content > p {
    font-family: 'NanumGothicB';
    font-size: 18px;
    color:#f15f5f;
    line-height: 30px;
}

.sys-check-button label {
	display: block;
    text-align: right;
    margin-right: 40px;
    margin-top: 10px;
    user-select: none;
}
.sys-check-button span {
	font-size:14px;
	user-select: none;
	font-family: 'NanumSquareRoundOTFB';
}

/* 다중 로그인 제한 */
#login-limit {
    position:absolute;
    top:0;
    left:0;
    width:1280px;
    height: 800px;
    background: url(../img/popup/login_limit_bg.png);
    text-align: center;
    padding: 68px;
    z-index: 999;
    display: flex;
    flex-direction: column;
}

/* 다중 로그인 제한 */
#login-limit {
    position:absolute;
    top:0;
    left:0;
    width:1280px;
    height: 800px;
    background: url(../img/popup/login_limit_bg.png);
    text-align: center;
    padding: 68px;
    z-index: 999;
    display: flex;
    flex-direction: column;
}
.login-limit-title > p.title-first {
    color: #3A3737;
    font-size: 46px;
    font-family: 'bmjua_otf';
    margin-top: 50px;
    margin-left: 60px;
}
.login-limit-title > span.title-second {
    color:#3A3737;
    font-size: 24px;
    font-family: 'NanumSquareRoundOTFB';
    margin-top: 20px;
    display: inline-block;
    letter-spacing: -0.6px;
}
#login-limit .content {
    height: 300px;
    width: 100%;
    margin-top: 70px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'NanumSquareRoundOTFB';
    font-size: 22px;
    overflow: auto;
    padding: 20px 60px;
    line-height: 1.8;
}

.login-limit-footer {
    margin-top: 90px;
}
.login-limit-footer > p {
    font-family: 'NanumSquareRoundOTFB';
    margin-bottom: 5px;
    font-size: 18px;
}
.login-limit-footer > p > a {
    font-family: 'NanumSquareRoundOTFEB';
}


/* 회원가입 학습 기기 시리얼넘버 안내 팝업창 */
#device-info-wrap {
	width:1280px;
    height:800px;
    top:0;
    left:0;
    display:none;
    align-items: center;
    justify-content: center;
    position: absolute;
}
.device-info-dim {
	width:100%;
    height:100%;
    z-index:0;
    position:absolute;
    top: 0;
    left: 0;
}
.device-info-dim::after {
    width:100%;
    height: 100%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    content: '';
 	z-index:1;
}
.device-info {
	position:static;
	width: 821px;
    height: 713px;
	background:url(../img/popup/device_info_bg.png) 50% 50% no-repeat;
	z-index:8889;
}
.device_info_icon {
	margin-left: -29px;
    margin-top: 2px;
}
.device-info-inner {
	text-align:center;
    padding-top: 196px;
    padding-bottom: 0;
}
.device-info-title {
	font-family: 'YoonSofunny';
}
.device-info-text {
    margin-top: 15px;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.device-info-text > p {
	font-family: 'YoonSofunny';
	line-height:1.4;
    font-size: 30px;
}
.device-info-text > img {
	margin-top:21px;
}
.device-info-button {
	text-align: center;
	margin-top: 8px;
}
.device-info-button > a {
	display: inline-block;
}



/* notice */

#notice-wrap {
    width:0;
    height:0;
}
.notice-bg {
   position:relative;
	width:100%;
	height:100%;
	z-index:6666;
}
.notice-bg::after {
   width:1280px;
	height: 800px;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    content: '';
    top:0;
	left:0;
}
.notice-box {
    background:url(../img/popup/study_comp_bg.png);
    position: absolute;
    top:45%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 631px; 
    height: 527px;
    text-align: center;
    border-radius: 8px;
    z-index:6666;
}
.notice-box h2.notice-title {
    display: block;
    font-size: 33px;
    font-family: 'YoonSofunny';
    color: #000000;
    line-height: 30px;
    margin-top: 200px;
    margin-bottom: 21px;
}
.notice-box .notice-content {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: #fff;
    height: 155px;
    border-radius: 20px;
    width: 85%;
    margin: auto;
    position: relative;
}
.notice-box .notice-content > p {
    font-family: 'NanumSquareRoundOTFB';
    font-size: 16px;
    color:rgb(61, 61, 61);
    line-height: 1.5;
    padding:10px 25px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    text-align: left;
}
.notice-content .notice-content-title {
    display: block;
    font-size: 18px;
    color: #333;
    padding:8px 0;
    font-family: 'NanumSquareRoundOTFEB';
}

.notice-wrap .notice-box label {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 45px;
    font-size: 14px;
    font-family: 'NanumSquareRoundOTFB';
    margin-top: 10px;
}