@charset "utf-8";

/* 폰트 불러오기 Pretendard
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('../fonts/woff2-subset/Pretendard-Black.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Black.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../fonts/woff2-subset/Pretendard-ExtraBold.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-ExtraBold.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../fonts/woff2-subset/Pretendard-Bold.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Bold.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../fonts/woff2-subset/Pretendard-SemiBold.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-SemiBold.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../fonts/woff2-subset/Pretendard-Medium.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Medium.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../fonts/woff2-subset/Pretendard-Regular.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Regular.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('../fonts/woff2-subset/Pretendard-Light.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Light.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('../fonts/woff2-subset/Pretendard-ExtraLight.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-ExtraLight.subset.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('../fonts/woff2-subset/Pretendard-Thin.subset.woff2') format('woff2'), url('../fonts/woff-subset/Pretendard-Thin.subset.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/S-CoreDream-9Black.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/S-CoreDream-8Heavy.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/S-CoreDream-7ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/S-CoreDream-6Bold.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/S-CoreDream-5Medium.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/S-CoreDream-4Regular.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/S-CoreDream-3Light.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 200;
	font-display: swap;
	src: url('../fonts/S-CoreDream-2ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 's-core';
	font-weight: 100;
	font-display: swap;
	src: url('../fonts/S-CoreDream-1Thin.woff') format('woff');
}

/* 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, font, img, ins, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button { margin:0; padding:0; border:0; }
ol, ul, li, dl, dt, dd { list-style:none; margin:0; padding:0;}
a, a:link, a:visited, a:active { text-decoration: none; }
table { border-spacing:0; border-collapse: collapse; width: 100%; }
img { -ms-interpolation-mode: bicubic; vertical-align: top; max-width: 100%; }
select { color:#05152C; vertical-align:middle; padding: 5px; font-family: Pretendard; }
input { color:#05152C; font-family: Pretendard; vertical-align:middle; font-family: Pretendard; }
input[type='text'],input[type='password'],input[type='submit'],input[type='number'],input[type='search'] { -webkit-appearance:none; border-radius:0 }
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:1em; }
button { border: none; background: none; cursor: pointer; }
textarea { resize: none; font-family: Pretendard; width: 100%; line-height: 1.5; }
::placeholder { opacity: 0.75; }
:focus::placeholder { color: transparent; }
.noclick { pointer-events: none; cursor: default; }

.ellipsis { text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100%; font-size: 62.5%; }
.body_wrap { line-height: 1.5; font-family: Pretendard, HelveticaNeue-Light, AppleSDGothicNeo-Light, Arial, sans-serif; height: 100%; color: #05152C; min-height: 100%; height: auto !important; position: relative; max-width: 800px; margin: 0 auto; }

.cert_wrap { background: url(../images/bg_cert.jpg) center no-repeat; background-size: cover; }
.cert { text-align: center; max-width: 90%; margin: 0 auto; padding-top: 10rem; }
.cert .tit1 { font-family: "s-core"; font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1.1; padding-bottom: 1rem; }
.cert .tit1 span { display: block; color: #FFD200; font-size: 1.4rem; font-weight: 300; line-height: 1.1; }
.cert .tit2 { font-family: "s-core"; font-weight: 600; font-size: 3.5rem; color: #fff; line-height: 1.1; padding-bottom: 3rem; }

.sel_box { text-align: center; padding: 3rem 2.5rem 5rem 2.5rem; background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border-radius: 2rem; position: relative; }
.sel_box input[type=radio] { appearance: none; position: absolute; }
.sel_box input[type=radio] + label { display: inline-block; width: 8rem; border-radius: 50%; background-color: #C8C8C8; position: relative; cursor: pointer; }
.sel_box input[type=radio]:checked + label { background-color: #FFD200; }
.sel_box label p { position: absolute; top: 100%; padding-top: 0.7rem; font-size: 1.6rem; color: #fff; width: 100%; font-family: "s-core"; font-weight: 800; } 
.sel_wrap > p { font-size: 1.3rem; color: #fff; padding-top: 0.5rem; }
.sel_wrap > p > span { color: #FFD200; }
.sel_wrap .sel { display: flex; justify-content: center; gap: 2rem; }
.cert_input { padding-top: 3rem; text-align: left; }
.cert_input .input_wrap { border: 2px solid #fff; border-radius: 1rem; margin: 1rem 0; position: relative; padding-right: 10rem; }
.cert_input .input_wrap input { height: 4rem; border: none; background: none; padding-left: 2rem; font-size: 1.4rem; color: #fff; width: 100%; }
.cert_input .input_wrap button { font-family: "s-core"; height: 4rem; background-color: #fff; font-size: 1.2rem; color: #46443C; font-weight: 500; width: 10rem; position: absolute; top: 0; right: 0; }

.top { position: fixed; top: 0; left: 0; width: 100%; background-color: #45443C; padding: 2rem; z-index: 33; }
.top .tit { display: flex; align-items: center; }
.top .tit .tit1 { font-family: "s-core"; font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1.1; padding-right: 1rem; position: relative; }
.top .tit .tit1::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #707070; }
.top .tit1 span { display: block; color: #FFD200; font-size: 1.4rem; font-weight: 300; line-height: 1.1; text-align: center; }
.top .tit2 { font-family: "s-core"; font-size: 1.6rem; color: #fff; line-height: 1.3; padding-left: 1rem; }

.container { position: relative; padding-top: 9rem;  }
.sel_std { display: flex; flex-wrap: wrap; padding: 3rem 2rem; justify-content: center; gap: 1.5rem; }
.sel_std a { display: block; text-align: center; font-family: "s-core"; font-weight: 600; font-size: 2rem; color: #9D9C98; }
.sel_std a .icon { display: block; width: 8rem; border-radius: 50%; background-color: #C8C8C8; position: relative; margin-bottom: 1rem; }
.sel_std a.selected { color: #45443C; }
.sel_std a.selected .icon { background-color: #FFD200; }

.brf { padding: 2rem; }
.brf_box { display: flex; flex-direction: column; background-color: #45443C; border-radius: 1.5rem; justify-content: center; align-items: center; padding: 3rem 0; margin: 1rem 0; }
.brf_info span { font-family: "s-core"; font-weight: 500; color: #fff; font-size: 1.8rem; margin: 0 1rem; }
.brf_info .pin { background: url(../images/icon_pin.png) center left no-repeat; background-size: auto 2rem; padding-left: 2rem; }
.brf_info .date { background: url(../images/icon_calendar.png) center left no-repeat; background-size: auto 2rem; padding-left: 2.5rem; }
.brf_box > a { display: block; width: 75%; text-align: center; background-color: #FFD200; border-radius: 1rem; line-height: 5rem; font-family: "s-core"; font-weight: 600; font-size: 1.8rem; color: #46443C; margin: 1.5rem 0 3rem 0; }
.pct_wrap { text-align: center; }
.pct_wrap .item { color: #fff; opacity: 0.6; font-size: 2.6rem; }
.pct_wrap .pct { color: #fff; font-size: 3.6rem; font-weight: 700; }

.pct_wrap .bar_wrap { height: 1rem; border-radius: 999px; position: relative; background-color: #272620; margin-top: 1rem; }
.pct_wrap .bar_wrap .bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #FFD200; border-radius: 999px; }

.top > select { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; width: 10rem; line-height: 3.5rem; background-color: #FFD200; font-family: "s-core"; font-weight: 600; font-size: 1.6rem; border-radius: 999px; }
.dtl_hd { background-color: #45443C; padding: 2rem 2rem 0 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.dtl_hd .name { font-family: "s-core"; font-weight: 600; font-size: 3.5rem; text-align: center; color: #fff; }
.dtl_hd > select { width: 100%; height: 5rem; line-height: 5rem; border-radius: 1rem; background-color: #21201B; padding-left: 2rem; font-size: 2rem; font-weight: 700; color: #fff; margin: 1.5rem 0 3rem 0; }
.dtl_hd .goals { width: 96%; display: flex; justify-content: space-between; position: relative; gap: 10px; }
.dtl_hd .goals .pct_wrap { padding-bottom: 3rem; position: relative; }

.tab_menu { background-color: #45443C; display: flex; }
.tab_menu li { width: 50%; }
.tab_menu li a { display: block; text-align: center; line-height: 5.5rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; background-color: #21201C; }
.tab_menu li a span { font-family: "s-core"; font-weight: 600; font-size: 1.8rem; color: #fff; padding-left: 3rem; background: url(../images/icon_crt_01.png) center left no-repeat; background-size: auto 1.8rem; }
.tab_menu li a.selected { background-color: #f4f4f4; }
.tab_menu li a.selected span { color: #000; background-image: url(../images/icon_crt_02.png);}
.panel { background-color: #f4f4f4; padding: 2rem; }
.class_hd { background-color: #fff; border-radius: 1.5rem; margin: 1.5rem 0; }
.class_info { background-color: #45443C; border-radius: 1.5rem; padding: 2rem; }
.class_info .tit { font-family: "s-core"; font-weight: 700; font-size: 2rem; color: #fff; margin-bottom: 1rem; }
.class_info .teacher { font-weight: 500; font-size: 1.3rem; color: #fff; }
.class_hd .comment { padding: 2rem; }
.class_hd .comment h3 { font-size: 2rem; font-weight: 700; color: #000; margin-bottom: 1rem; padding-left: 3.5rem; background: url(../images/icon_comment.png) center left no-repeat; background-size: auto 2.6rem; }
.class_hd .comment p { font-size: 1.4rem; color: #000; }

.cert_box { margin: 1.2rem 0; border-radius: 1.5rem; border: 2px solid #45443C; background-color: #fff; padding: 1rem 2rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
.cert_hd { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.cert_hd .date { font-weight: 700; font-size: 2rem; color: #000; padding-left: 3rem; background: url(../images/icon_calendar_bk.png) center left no-repeat; background-size: auto 2rem; }
.cert_hd .stat { display: inline-block; border-radius: 999px; background-color: #45443C; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 2.7rem; padding: 0 1.5rem; }
.cert_hd .stat.black { background-color: #45443C; }
.cert_hd .stat.red { background-color: #ff5640; }
.cert_hd .stat.green { background-color: #00b386; }
.cert_hd .stat.gray { background-color: #6d6d6d; }
.clr_red { color: #ff5640; }
.cert_hd .right span { font-size: 1.5rem; font-weight: 600; line-height: 2.7rem; padding: 0 1.5rem; }
.cert_prog { display: flex; align-items: center; }
.cert_prog .item { width: 6.5rem; font-size: 1.4rem; font-weight: 500; color: #000; }
.cert_prog .bar_wrap { flex: 1; height: 0.8rem; background-color: #E2E2E2; position: relative; border-radius: 999px; }
.cert_prog .bar_wrap .bar { position: absolute; top: 0; left: 0; background-color: #006CFF; width: 0; height: 100%; border-radius: 999px; }
.cert_prog .pct_val { font-size: 1.8rem; font-weight: bold; color: #006CFF; padding: 0 1rem; }
.cert_prog .open { width: 2rem; height: 2rem; }
.cert_prog .open img { vertical-align: middle; height: 10px; }
.cert_prog .open.on img { transform: rotate(180deg); }
.cert_prog .bar_wrap .bar.blue { background-color: #006CFF; }
.cert_prog .bar_wrap .bar.red { background-color: #ff5640; }
.cert_prog .bar_wrap .bar.green { background-color: #00b386; }
.cert_prog .bar_wrap .bar.gray { background-color: #6d6d6d; }
.cert_prog .pct_val.blue { color: #006CFF; }
.cert_prog .pct_val.red { color: #ff5640; }
.cert_prog .pct_val.green { color: #00b386; }
.cert_prog .pct_val.gray { color: #6d6d6d; }

.cert_conts1 dl { display: flex; align-items: center; line-height: 3rem; }
.cert_conts1 dl dt { width: 6.5rem; font-size: 1.4rem; font-weight: 500; color: #000; }
.cert_conts1 dl dd { font-size: 2rem; font-weight: 800; color: #000; line-height: 1.2; }
.cert_conts2 { margin-top: 2rem; padding-top: 2rem; border-top: 1px dotted #C6C6C6; }
.cert_conts2 .item { font-size: 1.7rem; font-weight: 800; color: #000; margin-bottom: 1rem; }
.cert_conts2 ul li { font-size: 1.4rem; color: #000; }
.cert_conts2 p { font-size: 1.4rem; color: #000; }

.cert_box .cert_conts { display: none; }
.bg_wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 55; }
.pop_schedule { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; border-radius: 1.5rem; }
.pop_hd { height: 6rem; line-height: 6rem; padding: 0 2rem; background-color: #45443C; position: relative; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.pop_hd .tit { font-family: "s-core"; font-weight: 500; font-size: 2rem; color: #fff; }
.pop_hd button { position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); width: 3rem; height: 3rem; }
.pop_hd button img { height: 2rem;}
.pop_conts { background-color: #fff; padding: 2rem; display: flex; flex-direction: column; max-height: 600px; }
.pop_conts .item { display: flex; justify-content: space-around; text-align: center; }
.pop_conts .item img { height: 3rem; margin-bottom: 1rem; }
.pop_conts .item p { font-family: "s-core"; font-weight: 600; font-size: 2rem; color: #45443C; }
.sel_schedule { display: flex; justify-content: space-around;  }
.sel_schedule input[type=radio] { appearance: none; position: absolute; }
.sel_schedule input + label { display: block; font-size: 1.4rem; font-weight: 700; color: #45443C; line-height: 3.5rem; padding-left: 3rem; background: url(../images/check.png) center left no-repeat; background-size: auto 1.8rem; cursor: pointer; position: relative; }
.sel_schedule input[type=radio]:checked + label { background-image: url(../images/checked.png); }
.sel_schedule > div { width: 50%; max-height: 300px; overflow-y: auto; padding: 2rem; }
.pop_btn { background-color: #fff; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; padding: 2rem 0; }
.pop_btn button { display: block; width: 75%; margin: 0 auto; height: 5rem; line-height: 5rem; background-color: #FFD200; border-radius: 1rem; color: #46443C; font-family: "s-core"; font-weight: 600; font-size: 1.7rem; text-align: center; }

.agree_wrap { display: flex; justify-content: center; align-items: center; gap: 2rem; margin: 2rem 0; }
.agree_wrap label { font-size: 1.4rem; color: #fff; line-height: 3rem; }
.agree_wrap label input { width: 1.6rem; height: 1.6rem; border: 1px solid #fff; }
.agree_wrap button { font-size: 1.4rem; color: #fff; text-decoration: underline; line-height: 3rem; }
.trms { text-align: center; }
.trms a { font-size: 1.4rem; color: #fff; text-decoration: underline; }
.pop_terms { background-color: #fff; display: flex; flex-direction: column; width: 90%; max-width: 600px; max-height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 1.5rem; }
.pop_terms .hd .tit { padding: 2rem; font-size: 1.6rem; color: #000; }
.pop_terms .conts { flex: 1; padding: 2rem; overflow-y: auto; }
.pop_terms .conts .terms > p { font-size: 1.3rem; }
.pop_terms .conts .terms .clause { margin: 1.2rem 0; font-size: 1.3rem; }
.pop_terms .conts .terms .clause h4 { font-weight: 500; margin-bottom: 0.5rem;}
.pop_terms .btn { text-align: center; padding: 2rem; }
.pop_terms .btn button { width: 10rem; height: 5rem; line-height: 5rem; background-color: #FFD200; border-radius: 1rem; color: #46443C; font-family: "s-core"; font-weight: 600; font-size: 1.7rem; text-align: center; }

.terms { padding: 2rem; }
.terms h3 { font-size: 1.6rem; font-weight: bold; margin-bottom: 1rem; }
.terms > p { font-size: 1.4rem; font-weight: 500; margin-bottom: 1rem; }
.terms .clause { margin: 1.2rem 0; }
.terms .clause h4 { font-size: 1.4rem; font-weight: bold; margin-bottom: 0.6rem; }
.terms .clause p { font-size: 1.4rem; margin-bottom: 0.6rem; }
.terms ul, .terms ol { margin: 0.6rem; }
.terms ul li, .terms ol li { font-size: 1.4rem; }

.int_wrap .q_logo { width: 60%; margin: 0 auto; padding-top: 10rem; }
.int_wrap .tit { position: absolute; bottom: 6rem; left: 0; width: 100%; text-align: center; }
.int_wrap .tit p { font-family: "s-core"; font-size: 2.2rem; }

.logout{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    width: 10rem;
    line-height: 3.5rem;
    background-color: #FFD200;
    font-family: "s-core";
    font-weight: 600;
    font-size: 1.6rem;
    border-radius: 999px;
}

@media (max-width: 800px){
	.pct_wrap .item { color: #fff; opacity: 0.6; font-size: 3vw; }
	.pct_wrap .pct { color: #fff; font-size: 3.6vw; font-weight: 700; }
}