@charset "UTF-8";
button { border: none; padding: 0; margin: 0; display: inline-block; vertical-align: middle; cursor: pointer; background: none; }

.btn-popup { display: inline-block; border: 1px solid #282E38; height: 30px; line-height: 28px; padding: 0 20px; margin: 0 5px; font-size: 14px; text-align: center; }

.btn-popup.primary { background-color: #282e38; color: #fff; }

.btn-popup.secondary { background-color: #fff; color: #333; }

.ui-layer-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; }

.ui-layer-popup * { box-sizing: border-box; }

.ui-layer-popup:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.5; }

.ui-layer-popup.active { display: block; }

.ui-layer-popup .layer-popup-content { width: 600px; position: absolute; top: 50%; left: 50%; background-color: #fff; transform: translate(-50%, -50%); }

.ui-layer-popup .header { height: 60px; background-color: #3f3f3f; padding: 0 20px; position: relative; }

.ui-layer-popup .header h1 { font-family: "Spoqa Han Sans Neo", sans-serif; font-size: 18px; color: #fff; font-weight: 400; line-height: 60px; margin: 0; }

.ui-layer-popup .header .btn-close { display: block; width: 20px; height: 20px; background: url("/images/common/spr-layer-popup.png") 0 0 no-repeat; position: absolute; top: 50%; right: 20px; text-indent: -9999px; overflow: hidden; margin-top: -10px; }

.ui-layer-popup .body { max-height: 410px; overflow: hidden; overflow-y: auto; padding: 30px 20px; }

.ui-layer-popup .footer { font-size: 0; text-align: center; padding: 0 20px 30px 20px; margin-top: 0; height: auto; }

.ui-layer-popup .pagination { font-size: 0; text-align: center; display: block; }

.ui-layer-popup .pagination button, .ui-layer-popup .pagination a { display: inline-block; border: 1px solid #9c9c9c; height: 24px; padding: 0 8px; vertical-align: top; margin: 0 5px; line-height: 22px; font-size: 13px; color: #000; }

.ui-layer-popup .pagination button:hover, .ui-layer-popup .pagination button.active, .ui-layer-popup .pagination a:hover, .ui-layer-popup .pagination a.active { background-color: #3f3f3f; border-color: #3f3f3f; color: #fff; font-weight: 700; }

#personal-bookmark .layer-popup-content { width: 618px; }

#personal-bookmark .layer-popup-content .body { max-height: unset; }

#personal-bookmark .round-item-wrap { font-size: 0; margin: -5px; }

#personal-bookmark .round-item-wrap li { display: inline-block; position: relative; }

#personal-bookmark .round-item-wrap li input { display: block; position: absolute; top: 0; left: 0; opacity: 0; }

#personal-bookmark .round-item-wrap li label { cursor: pointer; }

#personal-bookmark .round-item-wrap.middle li input:checked:checked + label { background-color: #7836ff; border-color: #7836ff; color: #fff; }

#personal-bookmark .round-item-wrap.high li input:checked + label { background-color: #4272D2; border-color: #4272d2; color: #fff; }

#personal-bookmark .round-item { display: inline-block; height: 24px; line-height: 22px; background-color: #fff; border: 1px solid #707070; padding: 0 15px; font-size: 12px; font-weight: 700; letter-spacing: -0.075em; color: #707070; border-radius: 24px; position: relative; margin: 5px; }

#personal-bookmark .round-item.middle { background-color: #7836ff; border-color: #7836ff; color: #fff; }

#personal-bookmark .round-item.high { background-color: #4272D2; border-color: #4272d2; color: #fff; }

#personal-bookmark .round-item .btn-delete { display: block; width: 20px; height: 20px; text-indent: -9999px; overflow: hidden; background: url("/images/header/spr-personal.png") 0 -50px no-repeat; position: absolute; top: -8px; right: -5px; }

#personal-bookmark .selected-item-wrap { margin-bottom: 30px; }

#personal-bookmark .selected-item-wrap p { font-family: "Spoqa Han Sans Neo"; text-align: center; font-size: 18px; color: #000; line-height: 22px; font-weight: 500; margin-bottom: 20px; }

#personal-bookmark .selected-item-wrap p span { color: #6ba701; }

#personal-bookmark .selected-item-wrap .round-item-wrap { padding: 0 20px; }

#personal-bookmark .select-item-list p { margin-bottom: 10px; font-size: 0; }

#personal-bookmark .select-item-list p span { display: inline-block; font-family: "Spoqa Han Sans Neo"; font-size: 18px; color: #000; line-height: 20px; vertical-align: middle; margin-right: 8px; }

#personal-bookmark .select-item-list .list-tab { font-size: 0; border-right: 1px solid #D4D4D4; }

#personal-bookmark .select-item-list .list-tab button { display: inline-block; text-align: center; width: calc(100% / 6); font-family: "Spoqa Han Sans Neo"; font-size: 18px; font-weight: 300; letter-spacing: -0.075em; height: 40px; line-height: 39px; color: #b4b4b4; border-top: 1px solid #D4D4D4; border-left: 1px solid #D4D4D4; background-color: #ececec; }

#personal-bookmark .select-item-list .list-tab button.active { background-color: #3f3f3f; border-color: #3f3f3f; color: #fff; font-weight: 500; }

#personal-bookmark .select-item-list .list-tab-content { border: 1px solid #707070; padding: 24px 20px; overflow: hidden; overflow-y: auto; max-height: 278px; }

#personal-bookmark .select-item-list .list-tab-content .group + .group { margin-top: 20px; }

#personal-schedule .layer-popup-content { width: 492px; }

#personal-schedule .layer-popup-content .body p { font-family: "Spoqa Han Sans Neo"; font-size: 18px; color: #000; line-height: 22px; text-align: center; margin-bottom: 25px; }

#personal-schedule .layer-popup-content .body .input-wrap { position: relative; padding-left: 85px; }

#personal-schedule .layer-popup-content .body .input-wrap + .input-wrap { margin-top: 12px; }

#personal-schedule .layer-popup-content .body .input-wrap strong, #personal-schedule .layer-popup-content .body .input-wrap input, #personal-schedule .layer-popup-content .body .input-wrap span { display: block; }

#personal-schedule .layer-popup-content .body .input-wrap strong { height: 32px; line-height: 32px; position: absolute; top: 0; left: 0; font-family: "Spoqa Han Sans Neo"; font-size: 18px; color: #000; font-weight: 400; }

#personal-schedule .layer-popup-content .body .input-wrap input { width: 100%; height: 32px; line-height: 30px; border: 1px solid #707070; font-weight: 700; font-size: 14px; padding-left: 10px; }

#personal-schedule .layer-popup-content .body .input-wrap span { font-size: 11px; color: #666; line-height: 15px; margin-top: 3px; }

#personal-schedule .layer-popup-content .body .input-wrap .ui-datepicker-trigger { display: block; position: absolute; top: 50%; right: 10px; margin-top: -13px; }

#personal-preview .layer-popup-content { width: 1020px; top: 89px; left: 50%; background: none; transform: translate(-50%, 0); }

#personal-preview .layer-popup-content img { display: block; box-shadow: 0px 3px 6px #00000029; }

#personal-preview .layer-popup-content .btn-wrap { font-size: 0; margin-top: 27px; text-align: center; }

#personal-preview .layer-popup-content .btn-wrap button, #personal-preview .layer-popup-content .btn-wrap a { display: inline-block; height: 45px; line-height: 45px; text-align: center; font-family: "Spoqa Han Sans Neo"; font-size: 18px; box-shadow: 0px 3px 6px #00000029; margin: 0 10px; vertical-align: top; }

#personal-preview .layer-popup-content .btn-wrap button { background-color: #fff; color: #000; width: 110px; }

#personal-preview .layer-popup-content .btn-wrap a { background-color: #2680eb; color: #fff; width: 250px; }

#about-xfile { position: absolute; top: 35px; right: 0; left: auto; width: 561px; }

#about-xfile:before { display: none; }

#about-xfile .layer-popup-content { width: 100%; position: static; left: 0; top: 0; transform: translate(0, 0); }

#about-xfile .layer-popup-content .body { border: 1px solid #3F3F3F; }

#about-xfile .layer-popup-content .body p { font-size: 14px; line-height: 18px; color: #000; }

#about-xfile .layer-popup-content .body .btn-wrap { margin: 12px -5px 0; }

.new-induce-pop.ui-layer-popup.parentspop .layer-popup-content { width: 1000px; }

.new-induce-pop.ui-layer-popup.parentspop .layer-popup-content .todayLDiv { right: 36px; top: 10px; }

.new-induce-pop.ui-layer-popup.parentspop .layer-popup-content .popClose { right: 8px; top: 7px; }

.new-induce-pop.ui-layer-popup .layer-popup-content { width: 500px; height: 500px; }

.new-induce-pop.ui-layer-popup .layer-popup-content .qgo { width: 100%; height: 59px; position: absolute; left: 0; bottom: 0; background: url(/Images/zocbo_rn/common/blankRn.png) repeat; z-index: 9; }

.new-induce-pop.ui-layer-popup .layer-popup-content .qgo1 { width: 326px; height: 47px; position: absolute; left: 87px; bottom: 22px; background: url(/Images/zocbo_rn/common/blankRn.png) repeat; z-index: 9; }

.new-induce-pop.ui-layer-popup .layer-popup-content .qgo2 { width: 326px; height: 47px; position: absolute; right: 86px; bottom: 22px; background: url(/Images/zocbo_rn/common/blankRn.png) repeat; z-index: 9; }

.new-induce-pop.ui-layer-popup .layer-popup-content .todayLDiv { position: absolute; right: 51px; top: 24px; font-family: 'Dotum', 'Arial', sans-serif; font-size: 11px; line-height: 13px; color: #707070; letter-spacing: 0; word-spacing: 0; }

.new-induce-pop.ui-layer-popup .layer-popup-content .todayLDiv input[type="checkbox"] { width: 1px; height: 1px; padding: 0; border: 0 none; margin: 0; position: absolute; left: 0; top: 0; overflow: hidden; clip: rect(0 0 0 0); }

.new-induce-pop.ui-layer-popup .layer-popup-content .todayLDiv label { display: inline-block; height: 13px; line-height: 13px; padding-left: 19px; background: url(/Images/zocbo_rn/common/popup/chbox_h13_gray.jpg) no-repeat left top; cursor: pointer; }

.new-induce-pop.ui-layer-popup .layer-popup-content .popClose { position: absolute; right: 21px; top: 21px; }

#personal-info-agree-popup .layer-popup-content { width: 320px; height: 544px; }

#personal-info-agree-popup .layer-popup-content .info-list dd { padding-right: 10px; }

#personal-info-agree-popup .layer-popup-content .info-list span { display: block; position: relative; padding-left: 10px; }

#personal-info-agree-popup .layer-popup-content .info-list span:before { display: block; content: '-'; position: absolute; top: 0; left: 0; }

.warning-popup .layer-popup-content { height: 800px; display: flex; flex-direction: column; justify-content: space-between; }

.warning-popup .btn-arrow { padding: 0px 34px 0px 22px; height: 32px; background: #FFFFFF; border: 1px solid #333333; border-radius: 50px; font-size: 14px; line-height: 30px; color: #333333; display: inline-block; position: relative; font-family: "Spoqa Han Sans Neo", Sans-Serif; }

.warning-popup .btn-arrow:before { content: ''; display: block; width: 7px; height: 12px; background: url("/images/common/spr-cleancenter.png") -100px 0 no-repeat; position: absolute; top: 50%; right: 22px; margin-top: -6px; }

.warning-popup h2 { font-weight: 700; font-size: 16px; line-height: 20px; color: #333333; margin-bottom: 8px; }

.warning-popup table { border-top: 2px solid #DB7777; table-layout: fixed; border-collapse: collapse; width: 100%; }

.warning-popup table th, .warning-popup table td { border: 1px solid #DB7777; text-align: left; padding: 8px 10px 8px 10px; }

.warning-popup table th { border-left: none; background-color: #ffeded; font-size: 14px; line-height: 20px; letter-spacing: -0.015em; color: #8B2A2A; }

.warning-popup table td { border-right: none; font-size: 14px; line-height: 20px; letter-spacing: -0.015em; color: #222222; }

.warning-popup table + .scroll-wrap { overflow: hidden; overflow-y: auto; margin-bottom: 26px; }

.warning-popup table + .scroll-wrap table { border-top-width: 1px; }

.warning-popup table + .scroll-wrap table th, .warning-popup table + .scroll-wrap table td { border-right: none; border-left: none; }

.warning-popup table + .scroll-wrap table td { padding: 10px 20px; }

.warning-popup .header { background-color: #E33626; padding-left: 54px; }

.warning-popup .header:before { content: ''; display: block; width: 24px; height: 23px; background: url("/images/common/spr-cleancenter.png") -150px 0 no-repeat; position: absolute; top: 50%; left: 20px; margin-top: -12px; }

.warning-popup .body { padding-bottom: 0; overflow: hidden; max-height: none; display: flex; flex-direction: column; height: 100%; justify-content: space-between; }

.warning-popup .body .info-wrap { text-align: center; padding-bottom: 16px; flex: auto 0 0; }

.warning-popup .body .info-wrap .info-text { font-size: 14px; line-height: 25px; text-align: center; letter-spacing: -0.015em; color: #000000; margin-bottom: 14px; }

.warning-popup .body .info-wrap .info-text strong { font-weight: 700; color: #8B2A2A; }

.warning-popup .body .user-info { display: flex; flex-direction: column; height: calc(100% - 222px); }

.warning-popup .body .cancellation-info { overflow: hidden; flex: auto 0 0; }

.warning-popup .body .cancellation-info .block { font-size: 14px; line-height: 25px; letter-spacing: -0.015em; color: #8B2A2A; height: auto; }

.warning-popup .body .cancellation-info p { float: left; font-size: 14px; line-height: 32px; height: 32px; letter-spacing: -0.015em; color: #4B4B4B; vertical-align: top; }

.warning-popup .body .cancellation-info button { float: right; }

.warning-popup .footer { padding-top: 30px; }

.warning-popup .footer .btn { background-color: #282E38; border: 1px solid #282E38; }

#block-usage-restrictions-popup .body .user-info { height: calc(100% - 247px); }

#permanent-block-popup .header { padding-left: 51px; }

#permanent-block-popup .header:before { content: ''; display: block; width: 21px; height: 21px; background: url("/images/common/spr-cleancenter.png") -200px 0 no-repeat; position: absolute; top: 50%; left: 20px; margin-top: -10px; }

#permanent-block-popup table + table { margin-bottom: 16px; }

#check-attendance-popup .layer-popup-content { width: 520px; }

#check-attendance-popup .image-wrap { position: relative; }

#check-attendance-popup .image-wrap img { display: block; }

#check-attendance-popup .image-wrap button { display: block; width: 260px; height: 52px; overflow: hidden; text-indent: -9999px; background: url("/images/event/check_attendance_2208/spr-attendance.png") 0 -50px no-repeat; position: absolute; bottom: 84px; left: 50%; margin-left: -130px; }

#check-attendance-popup .no-today { display: flex; justify-content: space-between; align-items: center; background-color: #a0d3ff; height: 47px; padding: 0 21px 0 25px; }

#check-attendance-popup .no-today .checkbox { position: relative; }

#check-attendance-popup .no-today .checkbox input { width: 15px; height: 15px; opacity: 0; position: absolute; top: 0; left: 0; }

#check-attendance-popup .no-today .checkbox input:checked + label:before { background-position: 0 -15px; }

#check-attendance-popup .no-today .checkbox label { display: flex; align-items: center; }

#check-attendance-popup .no-today .checkbox label:before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 6px; background: url("/images/event/check_attendance_2208/spr-attendance.png") 0 0 no-repeat; }

#check-attendance-popup .no-today .checkbox label span { font-size: 15px; line-height: 15px; color: #000; }

#check-attendance-popup .no-today .btn-close { display: block; width: 15px; height: 15px; overflow: hidden; text-indent: -9999px; background: url("/images/event/check_attendance_2208/spr-attendance.png") -50px 0 no-repeat; }

#is_pro30_promotion_target1 .layer-popup-content { width: 500px; }

#is_pro30_promotion_target1 .image-wrap { position: relative; }

#is_pro30_promotion_target1 .image-wrap img { display: block; }

#is_pro30_promotion_target1 .image-wrap a[class^="btn"], #is_pro30_promotion_target1 .image-wrap button[class^="btn"] { display: block; overflow: hidden; text-indent: -99999px; opacity: 0; }

#is_pro30_promotion_target1 .image-wrap a.btn-close, #is_pro30_promotion_target1 .image-wrap button.btn-close { width: 21px; height: 21px; position: absolute; top: 18px; right: 17px; }

#is_pro30_promotion_target1 .image-wrap a.btn-link, #is_pro30_promotion_target1 .image-wrap button.btn-link { width: 406px; height: 60px; position: absolute; bottom: 149px; left: 47px; }

#is_pro30_promotion_target1 .no-today { display: flex; justify-content: space-between; align-items: center; background-color: #a8a8a8; height: 47px; padding: 0 21px 0 25px; }

#is_pro30_promotion_target1 .no-today .checkbox { position: relative; }

#is_pro30_promotion_target1 .no-today .checkbox input { width: 15px; height: 15px; opacity: 0; position: absolute; top: 0; left: 0; }

#is_pro30_promotion_target1 .no-today .checkbox input:checked + label:before { background-position: 0 -15px; }

#is_pro30_promotion_target1 .no-today .checkbox label { display: flex; align-items: center; }

#is_pro30_promotion_target1 .no-today .checkbox label:before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 6px; background: url("/images/event/check_attendance_2208/spr-attendance.png") 0 0 no-repeat; }

#is_pro30_promotion_target1 .no-today .checkbox label span { font-size: 15px; line-height: 15px; color: #000; }

#is_pro30_promotion_target1 .no-today .btn-close { display: block; width: 15px; height: 15px; overflow: hidden; text-indent: -9999px; background: url("/images/event/check_attendance_2208/spr-attendance.png") -50px 0 no-repeat; }

#is_pro30_promotion_target2 .layer-popup-content { width: 560px; }

#is_pro30_promotion_target2 .image-wrap { position: relative; }

#is_pro30_promotion_target2 .image-wrap img { display: block; }

#is_pro30_promotion_target2 .image-wrap a[class^="btn"], #is_pro30_promotion_target2 .image-wrap button[class^="btn"] { display: block; overflow: hidden; text-indent: -99999px; opacity: 0; }

#is_pro30_promotion_target2 .image-wrap a.btn-close, #is_pro30_promotion_target2 .image-wrap button.btn-close { width: 21px; height: 21px; position: absolute; top: 18px; right: 17px; }

#is_pro30_promotion_target2 .image-wrap a.btn-link, #is_pro30_promotion_target2 .image-wrap button.btn-link { width: 100%; height: 80px; position: absolute; bottom: 0; left: 0; }

#pro30-toast { position: absolute; top: 1107px; left: calc(50% - 596px); width: auto; height: auto; }

#pro30-toast:before { display: none; }

#pro30-toast .layer-popup-content { background: none; width: 253px; transform: none; position: static; }

#pro30-toast .layer-popup-content .header { height: 20px; background: none; }

#pro30-toast .layer-popup-content .header .btn-close { top: 0; right: 0; margin-top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15px' height='15px'%3E%3Cpath fill-rule='evenodd' fill='rgb(0, 0, 0)' d='M14.264,13.747 L13.697,14.311 L7.501,8.69 L1.338,14.351 L0.751,13.804 L6.937,7.500 L0.734,1.252 L1.302,0.688 L7.497,6.929 L13.661,0.648 L14.247,1.194 L8.62,7.498 L14.264,13.747 Z'/%3E%3C/svg%3E"); }

#pro30-toast .layer-popup-content .body { background-color: rgba(214, 231, 255, 0.95); border-radius: 20px; display: flex; flex-direction: column; align-items: center; padding: 15px 22px 20px; font-family: "Spoqa Han Sans Neo", Sans-Serif; color: #222; text-align: center; max-height: none; }

#pro30-toast .layer-popup-content .body .loading-bar { width: 100%; height: 6px; background-color: #fff; border-radius: 6px; overflow: hidden; margin-bottom: 22px; }

#pro30-toast .layer-popup-content .body .loading-bar:before { content: ''; display: block; width: 100%; height: 100%; background-color: #2699ff; animation-name: loading; animation-duration: 12s; animation-iteration-count: 1; animation-timing-function: unset; }

#pro30-toast .layer-popup-content .body h2 { font-weight: 700; font-size: 16px; line-height: 20px; }

#pro30-toast .layer-popup-content .body h2 span { color: #6e34f2; }

#pro30-toast .layer-popup-content .body h2 + p { font-size: 13px; line-height: 14px; margin: 12px 0 17px; }

#pro30-toast .layer-popup-content .body .pro30-voucher { width: 100%; border-radius: 20px; background-color: #fff; padding: 16px 0; }

#pro30-toast .layer-popup-content .body .pro30-voucher h3 { font-size: 20px; line-height: 24px; color: #0d4fb9; }

#pro30-toast .layer-popup-content .body .pro30-voucher h3 + p { font-size: 14px; margin: 6px 0 11px; }

#pro30-toast .layer-popup-content .body .pro30-voucher h3 + p span { color: #dc8508; }

#pro30-toast .layer-popup-content .body .pro30-voucher i { display: block; width: 69px; height: 69px; margin: 0 auto; background-image: url("data:image/svg+xml,%3Csvg width='69' height='69' viewBox='0 0 69 69' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_195_16)'%3E%3Cpath d='M5.87464 8.27087H63.1254C65.6666 8.27087 67.7325 10.3418 67.7325 12.8891V63.1113C67.7325 65.6586 65.6666 67.7295 63.1254 67.7295H5.87464C3.3334 67.7295 1.26746 65.6586 1.26746 63.1113V12.8891C1.26746 10.3418 3.3334 8.27087 5.87464 8.27087Z' fill='white'/%3E%3Cpath d='M63.1254 69H5.87463C2.6363 69 0 66.3574 0 63.1113V12.8891C0 9.64297 2.6363 7.00037 5.87463 7.00037H63.1254C66.3637 7.00037 69 9.64297 69 12.8891V63.1113C69 66.3574 66.3637 69 63.1254 69V69ZM5.87463 9.54133C4.03049 9.54133 2.5349 11.0405 2.5349 12.8891V63.1113C2.5349 64.9599 4.03049 66.459 5.87463 66.459H63.1254C64.9695 66.459 66.4651 64.9599 66.4651 63.1113V12.8891C66.4651 11.0405 64.9695 9.54133 63.1254 9.54133H5.87463Z' fill='%233E3A39'/%3E%3Cpath d='M59.9631 14.4963H9.03699V41.3035H59.9631V14.4963Z' fill='%23FFFF5D'/%3E%3Cpath d='M59.9631 42.5803H9.03698C8.33988 42.5803 7.76953 42.0086 7.76953 41.3098V14.4963C7.76953 13.7975 8.33988 13.2258 9.03698 13.2258H59.9631C60.6602 13.2258 61.2306 13.7975 61.2306 14.4963V41.3035C61.2306 42.0022 60.6602 42.574 59.9631 42.574V42.5803ZM10.3044 40.0393H58.6957V15.7667H10.3044V40.033V40.0393Z' fill='%233E3A39'/%3E%3Cpath d='M63.1254 20.1626H46.94L39.6332 29.1894H1.26746V63.1113C1.26746 65.6586 3.3334 67.7295 5.87464 67.7295H63.1254C65.6666 67.7295 67.7325 65.665 67.7325 63.1113V24.7808C67.7325 22.2335 65.6729 20.1626 63.1254 20.1626V20.1626Z' fill='white'/%3E%3Cpath d='M63.1254 69H5.87463C2.6363 69 0 66.3574 0 63.1113V29.1894C0 28.4906 0.570353 27.9189 1.26745 27.9189H39.0248L45.9514 19.3622C46.1922 19.0636 46.5535 18.8921 46.9337 18.8921H63.119C66.3574 18.8921 68.9937 21.5347 68.9937 24.7808V63.1113C68.9937 66.3574 66.3574 69 63.119 69H63.1254ZM2.5349 30.4598V63.1113C2.5349 64.9598 4.03049 66.459 5.87463 66.459H63.1254C64.9695 66.459 66.4651 64.9598 66.4651 63.1113V24.7808C66.4651 22.9322 64.9695 21.4331 63.1254 21.4331H47.5421L40.6154 29.9898C40.3746 30.2883 40.0134 30.4598 39.6332 30.4598H2.5349V30.4598Z' fill='%233E3A39'/%3E%3Cpath d='M12.6935 34.6842L23.0486 48.6532L33.4036 34.6842H27.6304V1.27051H18.4731V34.6842H12.6935Z' fill='%2394C5FF'/%3E%3Cpath d='M23.0485 49.9237C22.6493 49.9237 22.2691 49.7331 22.0282 49.4091L11.6732 35.4465C11.388 35.059 11.3436 34.5445 11.5591 34.1189C11.7746 33.6869 12.2118 33.4201 12.6935 33.4201H17.1993V1.27048C17.1993 0.571718 17.7696 0 18.4667 0H27.624C28.3211 0 28.8915 0.571718 28.8915 1.27048V33.4137H33.3973C33.8789 33.4137 34.3162 33.6869 34.5316 34.1125C34.7471 34.5445 34.7027 35.0527 34.4176 35.4402L24.0625 49.4028C23.8217 49.7267 23.4478 49.9173 23.0422 49.9173L23.0485 49.9237ZM15.2157 35.9611L23.0485 46.5251L30.8814 35.9611H27.6304C26.9333 35.9611 26.3629 35.3893 26.3629 34.6906V2.54097H19.7405V34.6842C19.7405 35.383 19.1701 35.9547 18.473 35.9547H15.2157V35.9611Z' fill='%233E3A39'/%3E%3Cpath d='M41.342 52.38H38.183V62H40.107V58.581H41.394C41.914 58.581 42.3993 58.5203 42.85 58.399C43.3007 58.269 43.6907 58.074 44.02 57.814C44.358 57.554 44.6223 57.2247 44.813 56.826C45.0123 56.4187 45.112 55.942 45.112 55.396C45.112 54.824 45.0123 54.3473 44.813 53.966C44.6223 53.576 44.358 53.264 44.02 53.03C43.682 52.796 43.2833 52.6313 42.824 52.536C42.3647 52.432 41.8707 52.38 41.342 52.38ZM41.264 57.06H40.107V53.901H41.199C41.8663 53.901 42.369 54.0093 42.707 54.226C43.0537 54.4427 43.227 54.8327 43.227 55.396C43.227 56.5053 42.5727 57.06 41.264 57.06ZM50.1169 58.36L52.0929 62H54.2379L51.9889 58.061C52.5436 57.8443 52.9856 57.515 53.3149 57.073C53.6529 56.6223 53.8219 56.0287 53.8219 55.292C53.8219 54.7373 53.7266 54.2737 53.5359 53.901C53.3539 53.5283 53.0982 53.2293 52.7689 53.004C52.4482 52.7787 52.0669 52.6183 51.6249 52.523C51.1916 52.4277 50.7192 52.38 50.2079 52.38H46.8539V62H48.7779V58.36H50.1169ZM50.0259 56.839H48.7779V53.901H50.0259C50.6499 53.901 51.1222 54.005 51.4429 54.213C51.7722 54.4123 51.9369 54.772 51.9369 55.292C51.9369 55.812 51.7722 56.202 51.4429 56.462C51.1222 56.7133 50.6499 56.839 50.0259 56.839ZM59.5372 62.182C60.1786 62.182 60.7592 62.0693 61.2792 61.844C61.8079 61.61 62.2629 61.2763 62.6442 60.843C63.0256 60.401 63.3202 59.8723 63.5282 59.257C63.7362 58.633 63.8402 57.931 63.8402 57.151C63.8402 56.371 63.7362 55.6733 63.5282 55.058C63.3202 54.4427 63.0256 53.927 62.6442 53.511C62.2629 53.0863 61.8079 52.7613 61.2792 52.536C60.7592 52.3107 60.1786 52.198 59.5372 52.198C58.9046 52.198 58.3239 52.3107 57.7952 52.536C57.2666 52.7527 56.8116 53.0733 56.4302 53.498C56.0489 53.9227 55.7542 54.4427 55.5462 55.058C55.3382 55.6733 55.2342 56.371 55.2342 57.151C55.2342 57.931 55.3382 58.633 55.5462 59.257C55.7542 59.8723 56.0489 60.401 56.4302 60.843C56.8116 61.2763 57.2666 61.61 57.7952 61.844C58.3239 62.0693 58.9046 62.182 59.5372 62.182ZM59.5372 60.518C59.1819 60.518 58.8569 60.44 58.5622 60.284C58.2762 60.1193 58.0292 59.894 57.8212 59.608C57.6219 59.3133 57.4659 58.958 57.3532 58.542C57.2492 58.126 57.1972 57.6623 57.1972 57.151C57.1972 56.1023 57.4009 55.292 57.8082 54.72C58.2242 54.1393 58.8006 53.849 59.5372 53.849C60.2739 53.849 60.8459 54.1393 61.2532 54.72C61.6692 55.292 61.8772 56.1023 61.8772 57.151C61.8772 57.6623 61.8209 58.126 61.7082 58.542C61.6042 58.958 61.4482 59.3133 61.2402 59.608C61.0409 59.894 60.7939 60.1193 60.4992 60.284C60.2132 60.44 59.8926 60.518 59.5372 60.518Z' fill='%23494645'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_195_16'%3E%3Crect width='69' height='69' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }

#pro30-toast .layer-popup-content .body .btn-go { width: 137px; height: 38px; margin-top: 13px; color: #ffff5d; font-size: 15px; background: #0389c1; background: linear-gradient(90deg, #0389c1 0%, #0d51bc 100%); border-radius: 50px; display: flex; align-items: center; justify-content: center; }

#pro30-toast .layer-popup-content .body .btn-go:after { content: ''; display: block; width: 6px; height: 11px; margin-left: 10px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_238_14)'%3E%3Cpath d='M6 5.5L1.1145 11L0 9.71609L3.75064 5.5L0 1.27813L1.1145 0L6 5.5Z' fill='%23FFFF5D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_238_14'%3E%3Crect width='6' height='11' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }

@-webkit-keyframes loading { 0% { width: 0%; }
  100% { width: 100%; } }

/* 레이블 */
em[class^="label grade"] { border-radius: 0; color: #fff; font-size: 11px; padding: 0 8px; vertical-align: baseline; }

em[class^="label grade"] + em[class^="label grade"] { margin-left: 5px; }

em[class^="label new"] + em[class^="label new"] { margin-left: 5px; }

.label { display: inline-block; padding: 0 5px; height: 16px; line-height: 16px; font-size: 12px; font-weight: 700; letter-spacing: -0.025em; background-color: #f00; color: #fff; border-radius: 16px; vertical-align: middle; word-spacing: normal; white-space: nowrap; }

.label.pro, .label.soopring { height: 18px; line-height: 18px; font-size: 10px; border-radius: 0; padding: 0 4px; }

.label.pro { color: #392301; background-color: #fcdf55; }

.label.soopring { background-color: #25BFD2; }

.label.ranking { height: 14px; line-height: 14px; padding: 0 2px; font-size: 8px; color: #fff; font-weight: 400; letter-spacing: 0; border-radius: 0; margin-top: -2px; }

.label.ranking.elementary { background-color: #fe697e; }

.label.ranking.teacher { background-color: #7dbe0a; }

.label.ranking.elementary { background-color: #fe697e; }

.label.premium { border-radius: 0; background-color: #a786cc; border: 1px solid #9472ba; color: #fff; font-size: 11px; vertical-align: text-top; margin-right: 5px; font-weight: 400; }

.label.hakgi { border-radius: 0; background-color: #fff; border: 1px solid #d7d7d7; color: #6e6e6e; font-size: 11px; vertical-align: text-top; margin-right: 5px; font-weight: 400; }

.label.new2 { border-radius: 0; background-color: #EAAE54; border: 1px solid #E0982B; color: #fff; font-size: 11px; vertical-align: text-top; margin-right: 5px; font-weight: 400; }

.label.eng { height: 16px; border: 1px solid #b2bacd; color: #666; border-radius: 0; font-size: 11px; vertical-align: text-top; text-align: center; font-weight: 400; }

.label.eng.basic { background-color: #fbfae5; }

.label.eng.foundation { background-color: #def1e7; }

.label.eng.severe { background-color: #f1e8de; }

.label.eng.completion { background-color: #deeaf1; }

.label.concept { padding: 9px 17px; border: 1px solid #b2bacd; border-radius: 0; font-size: 15px; text-align: center; font-weight: 600; background-color: #fff; }

.label.concept.basics { color: #db71aa; }

.label.concept.type { color: #4e89da; }

.label.concept.study { color: #9471db; }

.label.concept.problem { color: #17a7a7; }

.label.concept.basic { color: #cf9257; }

.label.concept.deep { color: #9471db; }

.label.elemconcept { padding: 8px 17px; border: 1px solid #b2bacd; border-radius: 0; font-size: 13px; text-align: center; font-weight: 600; background-color: #fff; }

.label.elemconcept.concept { color: #3aada8; }

.label.elemconcept.basic { color: #85a133; }

.label.elemconcept.representative { color: #4a8dd4; }

.label.elemcranking { padding: 0px 2px; border: none; background-color: #eb6a01; border-radius: 0; font-size: 10px; text-align: center; font-weight: 600; color: #fff; margin-left: 5px; }

.label.literature { padding: 8px 17px; border: 1px solid #b2bacd; border-radius: 0; font-size: 13px; text-align: center; font-weight: 600; background-color: #fff; }

.label.literature.times { font-weight: 400; color: #db71aa; }

.label.literature.work { font-weight: 400; color: #4e89da; }

.label.new { font-size: 10px; height: 18px; border-radius: 0; background-color: #5fa8e6; padding: 0 12px; margin-top: 5px; }

.label.free { font-size: 10px; height: 18px; border-radius: 0; background-color: #75CA88; padding: 0 12px; margin-top: 5px; letter-spacing: 0.6px; }

.label.comscore_best { font-size: 10px; border-radius: 0; background-color: #e85454; padding: 0 5px; }

.label.new_menu { width: 10px; height: 11px; background: #e86d18; padding: 0; border-radius: 0; font-size: 10px; font-weight: 100; line-height: 9px; text-align: center; }

.label.new_event { width: 11px; height: 11px; background: #447cd9; padding: 3px; border-radius: 2px; font-size: 13px; font-weight: 700; line-height: 10px; }

.label.new_letter { width: 14px; height: 14px; background: #0161eb; padding: 3px; border-radius: 4px; font-size: 14px; font-weight: 700; line-height: 13px; text-align: center; }

.label.grade1 { background-color: #98b4cb; }

.label.grade2 { background-color: #9CCB98; }

.label.grade3 { background-color: #C4CB98; }

.label.gradeall { background-color: #a798cb; }

.label.gradeelem3 { background-color: #e5ac99; }

.label.gradeelem4 { background-color: #e599cd; }

.label.gradeelem5 { background-color: #a380de; }

.label.gradeelem6 { background-color: #809ade; }

.label.gradekor { background-color: #67c6ce; }

.label.gradeeng { background-color: #6786ce; }

.label.grademath { background-color: #3e8bd1; }

.label.gradesocial { background-color: #91ac69; }

.label.gradescience { background-color: #68c592; }

.label.notice { padding: 0px 4px; background: #f74966; font-size: 11px; font-weight: 100; letter-spacing: -0.5px; border-radius: 0; }

.label.lnbunit { padding: 0px 1px; background: #fff; font-size: 10px; font-weight: 100; letter-spacing: -0.5px; border-radius: 0; text-align: center; }

.label.lnbunit.teacher { background: #7dbe0a; border: 1px solid #7dbe0a; }

.label.lnbunit.elem { background: #ff6d84; border: 1px solid #f35775; }

.label.gnb { background-color: #fff; border: 1px solid #437DDB; border-radius: 50px; padding: 0 12px; font-family: "Spoqa Han Sans Neo", Sans-Serif; font-size: 12px; line-height: 26px; height: 28px; color: #437ddb; box-sizing: border-box; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

.label.gnb span { color: #c72314; }

.pb0 { padding-bottom: 0; }

header * { box-sizing: border-box; }

.tooltip { position: relative; z-index: 110; }

.tooltip .tooltip-content { display: none; background-color: #fff; position: absolute; top: 0; left: 0; border-color: 1px solid #437DDB; }

.tooltip .tooltip-content:before { content: ''; display: block; }

.inner { width: 1020px; margin: 0 auto; position: relative; }

aside { width: 167px; float: left; }

#util { border-bottom: 1px solid #efefef; }

#util:after { content: ''; display: block; clear: both; }

#util a { display: inline-block; height: 40px; line-height: 40px; font-size: 12px; color: #696969; vertical-align: top; }

#util a:hover, #util a.active { color: #e33626; }

#util a.active { font-weight: 700; }

#util a.home { width: 13px; text-indent: -9999px; overflow: hidden; position: relative; }

#util a.home:before { content: ''; display: block; width: 13px; height: 12px; background: url("/images/header/spr-personal.png") -500px 0 no-repeat; position: absolute; top: 50%; left: 0; margin-top: -6px; }

#util a.home:hover:before, #util a.home.active:before { background-position: -550px 0; }

#util > div { font-size: 0; }

#util .left { float: left; }

#util .left a + a { margin-left: 30px; }

#util .right { float: right; }

#util .right a + a { margin-left: 20px; }

#header-logo { border-bottom: 1px solid #EFEFEF; text-align: center; height: 101px; }

#header-logo .inner { text-align: center; }

#header-logo h1 { display: inline-block; }

#header-logo h1 a { display: block; }

#search-wrap { font-size: 0; position: absolute; top: 50%; right: 0; margin-top: -16px; z-index: 130; }

#search-wrap > span { display: inline-block; position: relative; vertical-align: top; }

#search-wrap > span input { display: block; position: absolute; top: 0; left: 0; opacity: 0; }

#search-wrap > span input:checked + label { background-color: #282E38; color: #fff; }

#search-wrap > span input:checked + label:before { content: ''; display: inline-block; width: 16px; height: 16px; background: url("/images/header/spr-personal.png") -750px 0 no-repeat; vertical-align: middle; }

#search-wrap > span label { display: block; height: 32px; padding: 0 10px; font-size: 12px; border: 1px solid #282E38; color: #282E38; line-height: 30px; border-radius: 16px; cursor: pointer; }

#search-wrap .middle { margin-right: 2px; }

#search-wrap .input-wrap { display: inline-block; position: relative; vertical-align: top; margin-left: 5px; }

#search-wrap .input-wrap .input-search { display: block; width: 150px; border: 1px solid #666; height: 32px; padding: 0 32px 0 10px; font-size: 14px; color: #000; }

#search-wrap .input-wrap .btn-search { display: block; width: 32px; height: 100%; background: url("/images/header/icon-search.svg") 50% 50% no-repeat; background-size: 18px; position: absolute; top: 0; right: 0; }

#search-wrap .input-wrap .autocomplete-list { position: absolute; top: 31px; left: 0; width: 100%; border: 1px solid #666; background-color: #fff; box-sizing: border-box; visibility: hidden; }

#search-wrap .input-wrap .autocomplete-list li { line-height: 20px; height: auto; color: #666; font-size: 12px; text-align: left; padding: 6px 10px; cursor: pointer; }

#search-wrap .input-wrap .autocomplete-list li:hover { background-color: #f5f5f5; }

#search-wrap .input-wrap .autocomplete-list li strong { font-weight: 700; color: #437ddb; }

#gnb { position: relative; z-index: 120; }

#gnb * { box-sizing: border-box; }

#gnb nav { width: 1020px; margin: 0 auto; }

#gnb nav.nav-middle > ul li { width: 20%; }

#gnb nav.nav-middle > ul li.active > a { color: #B38EFF !important; }

#gnb nav.nav-middle > ul li.active:hover > a { color: #B38EFF !important; }

#gnb nav.nav-middle .subject-wrap button.active { background-color: #7836FF; }

#gnb nav.nav-middle .link-wrap dd a:hover { background-color: #7836FF; }

#gnb nav.nav-high > ul li.active > a { color: #66BEFF !important; }

#gnb nav.nav-high > ul li.active:hover > a { color: #66BEFF !important; }

#gnb nav.nav-high .subject-wrap button.active { background-color: #4395D1; }

#gnb nav.nav-high .link-wrap dd a:hover { background-color: #4395D1; }

#gnb nav.nav-teacher > ul li.active > a { color: #a3ff00 !important; }

#gnb nav.nav-teacher > ul li.active:hover > a { color: #a3ff00 !important; }

#gnb nav.nav-teacher .subject-wrap button.active { background-color: #7dbe0a; }

#gnb nav.nav-teacher .link-wrap dd a:hover { background-color: #7dbe0a; }

#gnb nav.nav-elementary > ul li:last-child { width: 250px; }

#gnb nav.nav-elementary > ul li.active > a { color: #fe697e !important; }

#gnb nav.nav-elementary > ul li.active:hover > a { color: #fe697e !important; }

#gnb nav.nav-elementary .subject-wrap button.active { background-color: #fe697e; }

#gnb nav.nav-elementary .link-wrap dd a:hover { background-color: #fe697e; }

#gnb nav.nav-soopring > ul li.active > a { color: #1DB4C8 !important; }

#gnb nav.nav-soopring > ul li.active:hover > a { color: #1DB4C8 !important; }

#gnb nav.nav-soopring .subject-wrap button.active { background-color: #1DB4C8; }

#gnb nav.nav-soopring .link-wrap dd a:hover { background-color: #1DB4C8; }

#gnb nav.nav-soopring .link-wrap dd .label { margin: 4px 8px; height: 18px; background-color: #fff; color: #4395D1; border: 1px solid #4395D1; }

#gnb nav.nav-soopring .link-wrap dd .label.mt10 { margin-top: 10px; }

#gnb nav.nav-main > ul li.active, #gnb nav.nav-main > ul li:hover { background-color: #282e38; }

#gnb nav.nav-main > ul li.active > a, #gnb nav.nav-main > ul li:hover > a { color: #fff !important; }

#gnb nav.nav-main > ul li.active:hover, #gnb nav.nav-main > ul li:hover:hover { background-color: #282e38; }

#gnb nav.nav-main > ul li.active:hover > a, #gnb nav.nav-main > ul li:hover:hover > a { color: #fff !important; }

#gnb nav > ul { display: table; width: 100%; table-layout: fixed; position: relative; }

#gnb nav > ul li { display: table-cell; text-align: center; position: relative; vertical-align: middle; }

#gnb nav > ul li.align-right .sub-menu-wrap { left: auto; right: 0; }

#gnb nav > ul li.active { background-color: #282e38; }

#gnb nav > ul li.active a { color: #fff; }

#gnb nav > ul li.active:hover { background-color: #282e38; }

#gnb nav > ul li:hover { background-color: rgba(40, 46, 56, 0.15); }

#gnb nav > ul li:hover .sub-menu-wrap { display: block; }

#gnb nav > ul li:hover > a { color: #000 !important; }

#gnb nav > ul li > a { display: block; font-size: 22px; font-weight: 500; color: #000; font-family: "Spoqa Han Sans Neo"; height: 68px; line-height: 68px; }

#gnb nav > ul li.full { position: static; }

#gnb nav > ul li.full .subject-wrap ~ .link-wrap { margin-left: 0; padding-left: 150px; }

#gnb nav > ul li.full .link-wrap dl { width: 20%; padding-right: 15px; }

#gnb nav > ul li.full .link-wrap dl + dl { margin-left: 0; }

#gnb nav > ul li.full .link-wrap dl.wa { width: auto; }

#gnb nav > ul li.soopring { font-size: 0; }

#gnb nav > ul li.soopring > a { font-size: 22px; }

#gnb nav > ul li.soopring > a:before { content: ''; display: inline-block; width: 24px; height: 24px; background: url("/images/header/spr-personal.png") -650px 0 no-repeat; vertical-align: middle; margin: -4px 5px 0 0; }

#gnb nav > ul li.cloud:hover a { background-image: url(/images/common/logo-cloud-hover.svg); }

#gnb nav > ul li.cloud a { overflow: hidden; text-indent: -9999px; background: url(/images/common/logo-cloud.svg) 50% 50% no-repeat; background-size: 120px; }

#gnb nav .sub-menu-wrap { display: none; min-width: 100%; width: auto; position: absolute; top: 68px; left: 0; padding: 20px; background-color: #fff; border: 1px solid #000; box-shadow: 0px 3px 6px #00000029; white-space: nowrap; }

#gnb nav .sub-menu-wrap:after { content: ''; display: block; clear: both; }

#gnb nav .sub-menu-wrap.ex .link-wrap dl { display: block; padding-top: 0; }

#gnb nav .subject-wrap { width: 120px; float: left; }

#gnb nav .subject-wrap button { display: block; height: 28px; width: 100%; padding-left: 10px; font-size: 12px; text-align: left; color: #333; border-bottom: 1px solid #EFEFEF; position: relative; }

#gnb nav .subject-wrap button.active { background-color: #ccc; font-weight: 700; color: #fff; }

#gnb nav .subject-wrap button.active:before { content: ''; display: block; width: 16px; height: 16px; background: url("/images/header/spr-personal.png") -250px 0 no-repeat; position: absolute; top: 50%; right: 0; margin-top: -8px; }

#gnb nav .subject-wrap ~ .link-wrap { margin-left: 150px; }

#gnb nav .link-wrap { display: none; text-align: left; }

#gnb nav .link-wrap.active { display: block; }

#gnb nav .link-wrap.revision09 dl { width: calc(100% / 6) !important; }

#gnb nav .link-wrap dl { display: inline-block; vertical-align: top; min-width: 110px; position: relative; }

#gnb nav .link-wrap dl + dl { margin-left: 15px; }

#gnb nav .link-wrap dl dt, #gnb nav .link-wrap dl dd { text-align: left; }

#gnb nav .link-wrap dl dt { padding-left: 8px; height: 28px; line-height: 26px; font-size: 14px; font-weight: 700; color: #333; }

#gnb nav .link-wrap dl dt span { vertical-align: middle; }

#gnb nav .link-wrap dl dd { font-size: 0; }

#gnb nav .link-wrap dl dd.new a:after { content: ''; display: inline-block; width: 8px; height: 8px; vertical-align: middle; background: url("/images/header/spr-personal.png") -700px 0 no-repeat; margin-top: -4px; margin-left: 4px; }

#gnb nav .link-wrap dl dd a { padding: 0 8px; display: block; height: 26px; line-height: 26px; color: #333; font-size: 12px; vertical-align: middle; }

#gnb nav .link-wrap dl dd a:hover { background-color: #ccc; color: #fff; }

#personal { width: 100%; min-width: 1020px; border-bottom: 1px solid #e9e9e9; border-top: 1px solid #292C31; box-sizing: border-box; }

#personal * { box-sizing: border-box; }

#personal > .inner { padding: 10px 0; }

#personal button { border: none; padding: 0; margin: 0; display: inline-block; vertical-align: middle; cursor: pointer; background: none; }

#personal .btn { display: inline-block; vertical-align: middle; border: none; height: 32px; line-height: 32px; padding: 0 22px; background-color: #515560; color: #fff; font-size: 14px; }

#personal .btn.btn-purchase { background-color: #e33626; margin-right: 20px; color: #fff; }

#personal .btn.btn-point { background-color: #FFED48; color: #000; }

#personal .btn.xxs { height: 16px; line-height: 16px; font-size: 10px; padding: 0 3px; }

#personal .btn-school { background: none; position: relative; font-size: 12px; font-weight: 700; color: #437ddb; margin-left: 20px; padding-right: 24px; }

#personal .btn-school:before { content: ''; display: block; width: 24px; height: 24px; background: url("/images/header/spr-personal.png") -350px -50px no-repeat; position: absolute; top: 50%; right: 0; margin-top: -12px; }

#personal .label { display: inline-block; padding: 0 5px; height: 16px; line-height: 16px; font-size: 12px; font-weight: 700; letter-spacing: -0.025em; background-color: #f00; color: #fff; border-radius: 16px; vertical-align: middle; }

#personal .label.pro, #personal .label.soopring { height: 18px; line-height: 18px; font-size: 10px; border-radius: 0; padding: 0 4px; }

#personal .label.pro { color: #392301; background-color: #fcdf55; }

#personal .label.soopring { background-color: #25BFD2; }

#personal .login-wrap { font-size: 0; }

#personal .login-wrap:after { content: ''; display: block; clear: both; }

#personal .login-wrap input, #personal .login-wrap a, #personal .login-wrap label { display: inline-block; vertical-align: middle; line-height: 32px; font-size: 13px; }

#personal .login-wrap input[type=text], #personal .login-wrap input[type=password] { width: 132px; height: 32px; padding: 0 10px 0 10px; border: 1px solid #c2c2c2; font-size: 12px; color: #696969; margin-right: 5px; }

#personal .login-wrap input[type=checkbox] { margin-left: 10px; margin-right: 5px; }

#personal .login-wrap a { margin: 0 20px; color: #696969; }

#personal .login-wrap button { color: #696969; font-size: 13px; }

#personal .login-wrap button[type=submit] { color: #fff; }

#personal .login-wrap .btn-purchase { float: right; margin: 0; }

#personal .default-info:after { content: ''; display: block; clear: both; }

#personal .default-info.associate-member:before { content: url("/images/header/btn-personal-preview.png"); display: block; position: absolute; top: -53px; right: -87px; z-index: 121; }

#personal .default-info.associate-member .txt-voucher a { font-size: 0; }

#personal .default-info.associate-member .txt-voucher a strong { margin-right: 0; }

#personal .default-info.associate-member .txt-voucher a:after { content: ''; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("/images/header/spr-personal.png") -600px 0 no-repeat; vertical-align: middle; }

#personal .default-info.associate-member .personal-opener { position: relative; }

#personal .default-info .info-wrap { font-size: 0; float: left; margin-top: 1px; }

#personal .default-info .info-wrap > * { display: inline-block; line-height: 32px; vertical-align: middle; }

#personal .default-info .info-wrap > [class^="txt"] { font-size: 0; }

#personal .default-info .info-wrap > [class^="txt"] span, #personal .default-info .info-wrap > [class^="txt"] strong { font-size: 12px; display: inline-block; vertical-align: top; }

#personal .default-info .info-wrap > [class^="txt"] span { color: #000; margin-right: 10px; }

#personal .default-info .info-wrap > [class^="txt"] strong { font-weight: 700; color: #437ddb; margin-right: 10px; }

#personal .default-info .personal-opener, #personal .default-info .personal-opener-preview { display: block; float: right; width: 34px; height: 34px; background: url("/images/header/spr-personal.png") -50px -50px no-repeat; text-indent: -9999px; overflow: hidden; }

#personal .default-info .btn-associate-member-logout { float: right; margin: 1px 10px 0 0; }

#personal .default-info .tooltip { display: inline-block; vertical-align: middle; height: 32px; margin-right: 3px; }

#personal .default-info .tooltip .tooltip-content { top: 47px; left: -26px; width: 280px; border: 1px solid #437DDB; padding: 15px 0 15px 80px; background: #fff url("/images/header/img-personal-notice.png") 13px 50% no-repeat; }

#personal .default-info .tooltip .tooltip-content p { font-size: 12px; color: #000; line-height: 16px; }

#personal .default-info .tooltip .tooltip-content p strong { margin-right: 0; }

#personal .default-info .tooltip .tooltip-content a { display: block; position: relative; text-decoration: underline; padding-right: 20px; margin-top: 4px; line-height: 16px; font-size: 11px; color: #000; font-weight: 700; }

#personal .default-info .tooltip .tooltip-content a:after { content: ''; display: inline-block; width: 16px; height: 16px; background: url("/images/header/spr-personal.png") -300px 0 no-repeat; vertical-align: top; }

#personal .default-info .tooltip .tooltip-content:before { width: 16px; height: 17px; background: url("/images/header/spr-personal.png") 0 -100px no-repeat; position: absolute; top: -17px; left: 25px; }

#personal .default-info .tooltip:hover .tooltip-content { display: block; }

#personal .default-info .tooltip i { cursor: pointer; display: block; width: 16px; height: 16px; text-indent: -9999px; overflow: hidden; background: url("/images/header/spr-personal.png") -200px 0 no-repeat; margin-top: 8px; }

#personal .detail-info { display: none; position: absolute; top: -1px; left: 0; z-index: 100; border: 1px solid #292C31; background-color: #fff; width: 100%; min-width: 1020px; z-index: 1000; }

#personal .detail-info.active { display: table; table-layout: fixed; }

#personal .detail-info .btn-close { display: block; width: 24px; height: 24px; text-indent: -9999px; overflow: hidden; background: url("/images/header/spr-personal.png") -100px -50px no-repeat; position: absolute; top: 12px; right: 12px; }

#personal .detail-info.parent .profile-wrap-tab { display: block; }

#personal .detail-info.teacher .bookmark-list { margin-bottom: 25px; }

#personal .detail-info.teacher .bookmark-list .list-item-wrap .item { height: 60px; }

#personal .detail-info.teacher .bookmark-list .list-item-wrap .item:nth-child(7) { display: inline-block; }

#personal .detail-info.teacher .bookmark-list .list-item-wrap .item:nth-child(8) { display: inline-block; }

#personal .detail-info.teacher .bookmark-list .list-item-wrap .item:nth-child(9) { display: inline-block; }

#personal .detail-info.teacher .recommend-list .list-item-wrap .defalut-link { display: none; }

#personal .detail-info.teacher .recommend-list .list-item-wrap .teacher-link { display: block; }

#personal .detail-info.teacher .recommend-list .list-item-wrap .item { width: 110px; height: 30px; }

#personal .detail-info.teacher .news-list .news-list-wrap { max-height: 297px; overflow-y: auto; }

#personal .detail-info.teacher .schedule-list { display: none; }

#personal .detail-info > div { display: table-cell; height: 200px; vertical-align: top; position: relative; }

#personal .detail-info-box1 { width: 320px; }

#personal .detail-info-box2 { width: 290px; padding: 19px 30px 0 30px; }

#personal .detail-info-box2:before { content: ''; display: block; width: 1px; height: calc(100% - 51px); background-color: #dadada; position: absolute; top: 19px; right: 0; }

#personal .detail-info-box2.teacher .bookmark-list .item { height: 60px; }

#personal .detail-info-box3 { padding: 19px 37px 0 30px; width: 100%; }

#personal .detail-info .profile-wrap { text-align: center; background-color: #f7f7f7; padding: 38px 0 25px; }

#personal .detail-info .profile-wrap:before { content: ''; display: block; width: 70px; height: 70px; margin: 0 auto 10px; background-color: #fff; border-radius: 50%; }

#personal .detail-info .profile-wrap-tab { display: none; position: absolute; top: 6px; left: 0; width: 100%; font-size: 0; }

#personal .detail-info .profile-wrap-tab button { display: inline-block; width: 33.33%; text-align: center; height: 20px; line-height: 20px; font-size: 12px; color: #000; }

#personal .detail-info .profile-wrap-tab button.active { color: #15a1e9; font-weight: 700; }

#personal .detail-info .profile-wrap-tab button + button { border-left: 1px solid #707070; }

#personal .detail-info .profile-wrap .name { font-size: 18px; color: #000; line-height: 24px; }

#personal .detail-info .profile-wrap .name strong { font-weight: 700; }

#personal .detail-info .profile-wrap .btn-school { font-size: 16px; }

#personal .detail-info .profile-wrap.student-m:before { background: url("/images/header/img-profile-student-m.png") 0 0 no-repeat; }

#personal .detail-info .profile-wrap.student-f:before { background: url("/images/header/img-profile-student-f.png") 0 0 no-repeat; }

#personal .detail-info .profile-wrap.parent-m:before { background: url("/images/header/img-profile-parent-m.png") 0 0 no-repeat; }

#personal .detail-info .profile-wrap.parent-f:before { background: url("/images/header/img-profile-parent-f.png") 0 0 no-repeat; }

#personal .detail-info .profile-wrap.teacher-m:before { background: url("/images/header/img-profile-teacher-m.png") 0 0 no-repeat; }

#personal .detail-info .profile-wrap.teacher-f:before { background: url("/images/header/img-profile-teacher-f.png") 0 0 no-repeat; }

#personal .detail-info .point-wrap { background-color: #515560; padding: 10px 16px 16px; }

#personal .detail-info .point-wrap .buy-wrap { overflow: hidden; padding: 0 12px; margin-bottom: 5px; }

#personal .detail-info .point-wrap .buy-wrap .btn-mypoint { display: inline-block; float: left; color: #fff; font-size: 0; }

#personal .detail-info .point-wrap .buy-wrap .btn-mypoint:after { content: ''; display: inline-block; width: 16px; height: 16px; background: url("/images/header/spr-personal.png") -250px 0 no-repeat; vertical-align: middle; }

#personal .detail-info .point-wrap .buy-wrap .btn-mypoint strong { font-size: 14px; font-weight: 700; display: inline-block; vertical-align: middle; }

#personal .detail-info .point-wrap .buy-wrap .btn-mypoint span { display: inline-block; font-size: 12px; vertical-align: middle; margin-left: 4px; }

#personal .detail-info .point-wrap .buy-wrap .btn { float: right; margin-right: 0; }

#personal .detail-info .point-wrap .point-info-wrap { background-color: #6d7078; box-shadow: inset 0px 2px 3px #0000001A; border-radius: 50px; padding: 8px 12px; overflow: hidden; margin-bottom: 12px; }

#personal .detail-info .point-wrap .point-info-wrap:last-child { margin-bottom: 0; }

#personal .detail-info .point-wrap .point-info-wrap strong, #personal .detail-info .point-wrap .point-info-wrap span { display: block; font-size: 12px; letter-spacing: -0.025em; line-height: 16px; }

#personal .detail-info .point-wrap .point-info-wrap strong { font-weight: 700; color: #6dcdff; float: left; }

#personal .detail-info .point-wrap .point-info-wrap em { float: right; color: #fff891; }

#personal .detail-info .btn-wrap { font-size: 0; }

#personal .detail-info .btn-wrap button { width: 50%; display: inline-block; vertical-align: top; background-color: #15a1e9; text-align: center; padding: 12px 0; }

#personal .detail-info .btn-wrap button:after { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url("/images/header/spr-personal.png") 0 0 no-repeat; }

#personal .detail-info .btn-wrap button span { display: inline-block; color: #fff; font-size: 14px; letter-spacing: -0.025em; vertical-align: middle; }

#personal .detail-info .btn-wrap button.btn-alarm { border-right: 1px solid #007AB9; position: relative; }

#personal .detail-info .btn-wrap button.btn-alarm:after { background-position: -400px 0; }

#personal .detail-info .btn-wrap button.btn-alarm .label { position: absolute; top: 6px; right: calc(50% - 36px); }

#personal .detail-info .btn-wrap button.btn-logout { border-left: 1px solid #63CAFF; }

#personal .detail-info .btn-wrap button.btn-logout:after { background-position: -450px 0; }

#personal .detail-info .list-title { overflow: hidden; position: relative; margin-bottom: 15px; }

#personal .detail-info .list-title:before { content: ''; display: block; width: 100%; height: 1px; background-color: #000; position: absolute; bottom: 0; left: 0; }

#personal .detail-info .list-title p { background-color: #fff; position: relative; font-family: "Spoqa Han Sans Neo"; font-size: 18px; font-weight: 500; color: #000; letter-spacing: -0.025em; line-height: 24px; float: left; padding-right: 5px; }

#personal .detail-info .list-title p:before { content: ''; display: inline-block; width: 24px; height: 24px; background: url("/images/header/spr-personal.png") 0 0 no-repeat; vertical-align: top; margin-right: 3px; }

#personal .detail-info .list-title button { display: block; float: right; }

#personal .detail-info .list-title button.btn-edit { display: inline-block; width: 24px; height: 24px; background: url("/images/header/spr-personal.png") -300px -50px no-repeat; text-indent: -9999px; overflow: hidden; }

#personal .detail-info .list-title button.btn-save { display: inline-block; width: auto; height: 22px; padding: 0 22px; font-size: 10px; color: #fff; background-color: #3c3f4a; border-radius: 22px; }

#personal .detail-info .list-item-wrap { font-size: 0; margin: -5px; }

#personal .detail-info .list-item-wrap .item { display: inline-block; width: 70px; height: 70px; margin: 5px; position: relative; vertical-align: top; background-color: #eee; }

#personal .detail-info .list-item-wrap .item .label.pro, #personal .detail-info .list-item-wrap .item .label.soopring { position: absolute; top: -8px; right: -4px; }

#personal .detail-info .list-item-wrap .item .label.grade { height: 14px; line-height: 14px; font-size: 10px; font-weight: 400; color: #fff; background-color: #000; border-radius: 0; padding: 0 2px; position: absolute; top: 0; left: 0; }

#personal .detail-info .list-item-wrap .item a, #personal .detail-info .list-item-wrap .item button { width: 100%; height: 100%; vertical-align: middle; text-align: center; word-break: keep-all; }

#personal .detail-info .list-item-wrap .item a span, #personal .detail-info .list-item-wrap .item button span { vertical-align: middle; }

#personal .detail-info .bookmark-list { margin-bottom: 35px; }

#personal .detail-info .bookmark-list .list-title p:before { background-position: -50px 0; }

#personal .detail-info .bookmark-list .list-item-wrap .item { background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; }

#personal .detail-info .bookmark-list .list-item-wrap .item a { display: table; }

#personal .detail-info .bookmark-list .list-item-wrap .item a span { display: table-cell; font-size: 11px; letter-spacing: -0.025em; font-weight: 700; color: #000; }

#personal .detail-info .bookmark-list .list-item-wrap .item button { display: none; background-color: #fff; border: 1px dashed #888888; position: relative; text-indent: -9999px; overflow: hidden; }

#personal .detail-info .bookmark-list .list-item-wrap .item button:before { content: ''; display: block; width: 16px; height: 16px; background: url("/images/header/spr-personal.png") -200px -50px no-repeat; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; }

#personal .detail-info .bookmark-list .list-item-wrap .item.empty a { display: none; }

#personal .detail-info .bookmark-list .list-item-wrap .item.empty button { display: block; }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(1) { background-image: url("/images/header/bg-bookmark1.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(2) { background-image: url("/images/header/bg-bookmark2.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(3) { background-image: url("/images/header/bg-bookmark3.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(4) { background-image: url("/images/header/bg-bookmark4.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(5) { background-image: url("/images/header/bg-bookmark5.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(6) { background-image: url("/images/header/bg-bookmark6.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(7) { display: none; background-image: url("/images/header/bg-bookmark7.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(8) { display: none; background-image: url("/images/header/bg-bookmark8.png"); }

#personal .detail-info .bookmark-list .list-item-wrap .item:nth-child(9) { display: none; background-image: url("/images/header/bg-bookmark9.png"); }

#personal .detail-info .recommend-list .list-item-wrap .defalut-link { display: block; }

#personal .detail-info .recommend-list .list-item-wrap .teacher-link { display: none; }

#personal .detail-info .recommend-list .list-item-wrap .item { border-bottom: 2px solid #777; }

#personal .detail-info .recommend-list .list-item-wrap .item:before { content: ''; display: block; width: 16px; height: 16px; background: url("/images/header/spr-personal.png") -350px 0 no-repeat; position: absolute; top: 1px; right: 1px; }

#personal .detail-info .recommend-list .list-item-wrap a, #personal .detail-info .recommend-list .list-item-wrap button { display: table; width: 100%; height: 100%; border-color: #15A1E9; border-width: 1px 1px 5px 1px; border-style: solid; background-color: #fff; }

#personal .detail-info .recommend-list .list-item-wrap a span, #personal .detail-info .recommend-list .list-item-wrap button span { display: table-cell; text-align: center; font-size: 12px; letter-spacing: -0.025em; font-weight: 700; }

#personal .detail-info .recommend-list .list-item-wrap button span { display: inline-block; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #personal .detail-info .recommend-list .list-item-wrap button span { display: table-cell; } }

#personal .detail-info .news-list .list-title { margin-bottom: 12px; }

#personal .detail-info .news-list .list-title p:before { background-position: -100px 0; }

#personal .detail-info .news-list-wrap { max-height: 180px; overflow: hidden; }

#personal .detail-info .news-list-wrap li { padding-bottom: 14px; }

#personal .detail-info .news-list-wrap li + li { border-top: 1px solid #E4E4E4; padding-top: 14px; }

#personal .detail-info .news-list-wrap li a { letter-spacing: -0.025em; color: #000; word-break: keep-all; }

#personal .detail-info .news-list-wrap li a em, #personal .detail-info .news-list-wrap li a strong, #personal .detail-info .news-list-wrap li a span { display: block; }

#personal .detail-info .news-list-wrap li a em { font-size: 11px; color: #777; }

#personal .detail-info .news-list-wrap li a strong { font-size: 14px; font-weight: 700; margin-bottom: 4px; }

#personal .detail-info .news-list-wrap li a span { font-size: 11px; }

#personal .detail-info .schedule-list { position: absolute; bottom: 34px; left: 30px; width: calc(100% - 67px); height: 107px; }

#personal .detail-info .schedule-list.edit .list-title .btn-edit { display: none; }

#personal .detail-info .schedule-list.edit .list-title .btn-save { display: block; }

#personal .detail-info .schedule-list.edit .schedule-list-wrap p .btn-delete { margin-left: 0; }

#personal .detail-info .schedule-list.edit .schedule-list-add { display: none; }

#personal .detail-info .schedule-list .list-title { z-index: 1; }

#personal .detail-info .schedule-list .list-title .btn-edit { display: block; }

#personal .detail-info .schedule-list .list-title .btn-save { display: none; }

#personal .detail-info .schedule-list .list-title p:before { background-position: -150px 0; }

#personal .detail-info .schedule-list-wrap { padding-bottom: 7px; position: relative; z-index: 1; background-color: #fff; }

#personal .detail-info .schedule-list-wrap p { overflow: hidden; font-size: 0; padding-bottom: 8px; margin-bottom: 8px; position: relative; }

#personal .detail-info .schedule-list-wrap p:after { content: ''; display: block; width: 100%; height: 1px; background-color: #e4e4e4; position: absolute; bottom: 0; left: 0; }

#personal .detail-info .schedule-list-wrap p .btn-delete { display: block; float: left; text-indent: -9999px; overflow: hidden; width: 20px; height: 20px; display: block; background: url("/images/header/spr-personal.png") -150px -50px no-repeat; margin: 1px 10px 0 0; margin-left: -30px; transition: all .3s ease-in-out; }

#personal .detail-info .schedule-list-wrap p strong, #personal .detail-info .schedule-list-wrap p span, #personal .detail-info .schedule-list-wrap p em { font-size: 12px; display: block; float: right; height: 22px; line-height: 22px; color: #000; }

#personal .detail-info .schedule-list-wrap p strong { float: left; font-weight: 700; }

#personal .detail-info .schedule-list-wrap p span { font-weight: 700; color: #fff; background-color: #15a1e9; padding: 0 11px; border-radius: 22px; margin-left: 10px; }

#personal .detail-info .schedule-list-add { position: absolute; top: 0; left: 0; padding-top: 48px; width: 100%; }

#personal .detail-info .schedule-list-add p { font-size: 12px; letter-spacing: -0.025em; text-align: center; line-height: 16px; padding-top: 5px; margin-bottom: 15px; }

#personal .detail-info .schedule-list-add .btn-add { display: block; width: 20px; height: 20px; margin: 0 auto; background: url("/images/header/spr-personal.png") -250px -50px no-repeat; text-indent: -9999px; overflow: hidden; }

#snb { width: 167px; float: left; }

#snb.middle dl dd a:hover, #snb.middle dl dd a.active { color: #7836ff; }

#snb.middle .label.ranking { background-color: #7836ff; }

#snb.high dl dd a:hover, #snb.high dl dd a.active { color: #4395D1; }

#snb.high .label.ranking { background-color: #4395D1; }

#snb.teacher-middle .label.ranking, #snb.teacher-high .label.ranking { background-color: #7dbe0a; }

#snb.teacher-middle dl dd a:hover, #snb.teacher-middle dl dd a.active, #snb.teacher-high dl dd a:hover, #snb.teacher-high dl dd a.active { color: #7dbe0a; }

#snb.elementary > div.last { border-bottom: none; }

#snb.elementary > div.last + a { display: block; margin-top: 5px; }

#snb.elementary dl dd a:hover, #snb.elementary dl dd a.active { color: #fe697e; }

#snb.elementary .label.ranking { background-color: #fe697e; }

#snb.pre-middle div { border-bottom: none; }

#snb.pre-middle div + a { display: block; margin-top: 5px; }

#snb.pre-middle div a { display: block; font-size: 16px; font-weight: 700; color: #000; height: 45px; line-height: 45px; padding-left: 10px; }

#snb.pre-middle div a + a { border-top: 1px solid #E0E0E0; }

#snb h2 { width: 100%; height: 60px; line-height: 58px; text-align: center; font-family: 'Spoqa Han Sans Neo', Sans-Serif; font-size: 20px; font-weight: 500; color: #282e38; border: 1px solid #ccc; }

#snb > div { border-bottom: 1px solid #000; }

#snb dl { padding-bottom: 14px; }

#snb dl + dl { border-top: 1px solid #E0E0E0; }

#snb dl dt { font-size: 16px; font-weight: 700; color: #000; height: 45px; line-height: 45px; padding: 0 10px; }

#snb dl dt.pro { background-color: #f9f9f9; }

#snb dl dt.pro + dd { margin-top: 14px; }

#snb dl dt.pro .label { margin-top: -2px; }

#snb dl dd:first-child { margin-top: 14px; }

#snb dl dd a { display: block; font-size: 12px; line-height: 23px; padding: 0 10px; }

#snb dl dd a:hover, #snb dl dd a.active { font-weight: 700; }

#snb .x-mini-class { padding: 0; }

#snb .x-mini-class dd { margin: 0 !important; }

#snb .x-mini-class dd a { padding: 0; }

/* PC 수학 단계별 학습관 콘텐츠리스트 스텝 컬러 */
.math-step4 td { background-color: #fbfae5; }

.math-step5 td { background-color: #def1e7; }

.math-step6 td { background-color: #f1e8de; }

/*# sourceMappingURL=header-personal.css.map */