@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic:wght@400;700&family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
	margin:0;
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*
    Summernote 설정
*/
.note-editable p,
#passage p{
	margin-bottom:0rem;
}
.note-editable ul li,
#passage ul li{
	position:relative;
	padding-left:25px;
}
.note-editable ul li:before,
#passage ul li:before{
	content:'';
	width:.3rem;
	height:.3rem;
	display:inline-block;
	border-radius:50%;
	background-color:#121212;
	margin-right:.5rem;
	float:left;
	position:absolute;
	top:12px;
	left:1rem;
}



b{
    font-weight:bold;
}

select,
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;  /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
}
img{
	vertical-align:bottom;
}
div:after,
section:after,
figure:after{
    content:'';
    display:block;
    clear:both;
}
html{
    font-size:16px;
}
body{
    font-family:'Noto Sans KR',sans-serif;
    line-height:1.4;
}
table{
    width:100%;
    border-collapse:collapse;
}
.hide{
    display:none;
}
li{
    list-style:none;
}
.align-left{
    justify-content:flex-start;
    text-align:left!important;
}
.align-center{
    justify-content:center;
    text-align:center!important;
}
.align-right{
    justify-content:flex-end;
    text-align:right!important;
}
button{
    cursor:pointer;
    background-color:transparent;
    border:1px solid transparent;
}
.container{
    width:100%;
    min-width:1400px;
    max-width:1400px;
    margin:0 auto;
    padding:0 1rem;
}
strong{
    font-weight:700;
}

.link{
    color:var(--color-primary);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
}
.link:hover{
    text-decoration:underline;
}
.link .material-symbols-outlined{
    font-size:1.4em;
    padding-right:.25rem;
    font-variation-settings:
    'wght' 400
}

.padding{
    padding:1rem!important;
}
.padding-left{
    padding-left:1rem!important;
}
.margin-top{
    margin-top:1rem!important;
}
.margin-top-x2{
    margin-top:2rem!important;
}
.margin-bottom{
    margin-bottom:1rem;
}
.margin-bottom-x2{
    margin-bottom:2rem;
}
.margin-right{
    margin-right:1rem!important;
}
.margin-bottom{
    margin-bottom:1rem;
}
.padding-none{
    padding:0!important;
}

.float-right{
    float:right;
}

/*
    Root Set
*/
:root{
    --color-primary:#314DC7;
    --color-primary-bg:rgba(28,120,200,.12);
    --color-primary-bg2:rgba(28,120,200,.05);
    --color-secondary:#848F98;
    --color-success:#58B259;
    --color-danger:#DB3645;
    --color-danger-bg:rgba(219,82,75,.2);
    --color-warning:#F59E0A;
    --color-tag:#2A6BA6;
}

/*
    Color
*/
.color-primary{
    color:var(--color-primary)!important;
}
.color-secondary{
    color:var(--color-secondary)!important;
}
.color-warning{
    color:var(--color-warning)!important;
}
.color-danger{
    color:var(--color-danger)!important;
}
.color-success{
    color:var(--color-success)!important;
}
.color-tag{
    color:var(--color-tag)!important;
}
/*
    Alert
*/
.alert{
    border-radius:.25rem;
    padding:1rem;
    text-align:center;
    background-color: #FCF8E3;
    border-color: #F7F0D6;
    color: #847142;
}

/*
    loading
*/
.ajax-result{
    position:relative;
}
.ajax-result::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
    background-color:rgba(255,255,255,.9);
    text-align:center;
    display:none;
}
.ajax-result.active::before{
    display:block;
}
.ajax-result.active::after{
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:11;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
    Heading
*/
.heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}
.heading .heading__col{
    white-space:nowrap;
    width:100%;
}
.heading .heading__col:last-child{
    display:flex;
    justify-content:flex-end;
    text-align:right;
}
.heading .heading__col .title,
.heading .heading__col h1,
.heading .heading__col h2,
.heading .heading__col h3,
.heading .heading__col h4,
.heading .heading__col h5{
    margin:0;
}

/*
    more
*/
.more{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:1rem;
    background-color:rgba(255,255,255,.6);
    z-index:8000;
    background:red;
    width:100%;
    display:none;
}

/*
    Input
*/
.input,
.select,
.textarea{
    border:1px solid #dfdfdf;
    padding:1rem;
    font-size:1rem;
    background-color:#fff;
    border-radius:.25rem;
    display:inline-flex;
    width:100%;
}
input[type="checkbox"]{
    width:1rem;
    height:1rem;
    border:1px solid #dfdfdf;
    border-radius:.2rem;
    line-height:1;
    position:relative;
    transition:.3s;
}
input[type="checkbox"]:checked{
    background-color:var(--color-primary);
    border:1px solid var(--color-primary);
    color:#fff;
    text-align:center;
    border-radius:.2rem;
}
input[type="checkbox"]:checked::after{
    content:'';
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'><path d='M383-214 130-467l86.5-86.5L383-387l360.5-360.5L830-661 383-214Z'/></svg>");
    background-size:cover;
    position:absolute;
    text-align:center;
    width:100%;
    height:100%;
    display:inline-flex;
    align-items:center;
    left:0;
    top:0;
    justify-content:center;
}
.select{
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
    background-repeat:no-repeat;
    background-position:calc(100% - 1rem) center;
    min-width:100px;
}
input[type="button"]{
    cursor:pointer;
}
[disabled="disabled"] + label{
    opacity:.8;
    cursor:not-allowed!important;
}

label em{
    color:var(--color-danger);
    padding-left:.25rem;
    font-size:.6em;
    font-weight:400;
    position:relative;
    top:-.25rem;
}

input[type="radio"]{
    width:1rem;
    height:1rem;
    border:1px solid #dfdfdf;
    border-radius:50%;
    background-color:#fff;
}
input[type="radio"]:checked{
    background-color:var(--color-primary);
    border-color:var(--color-primary);
    position:relative;
}
input[type="radio"]:checked::after{
    content:'';
    width:calc(100% - 6px);
    height:calc(100% - 6px);
    border-radius:50%;
    position:absolute;
    left:3px;
    top:3px;
    background:#fff;
}

input[type="checkbox"] + label{
    padding-left:.5rem;
    font-size:.9rem;
    font-weight:400;
    position:relative;
    top:-1px;
    display:inline-flex;
    align-items:center;
}
input[type="checkbox"] + label > span{
    font-size:1.4em;
}
input[type="checkbox"]:checked + label{
    color:var(--color-primary);
}

.input-group{
    display:flex;
    align-items:center;
    margin-left:-.25rem;
}
.input-group > *{
    margin:0 .25rem;
    flex:0 1 auto;
    white-space:nowrap;
}

.input-group--sidecar{
    border:1px solid #dfdfdf;
    border-radius:.25rem;
    display:flex;
    align-items:center;
}
.input-group--sidecar input{
    border:0;
}
.input-group--sidecar span{
    white-space:nowrap;
    background-color:#f1f1f1;
    border-left:1px solid #dfdfdf;
    text-align:center;
    padding:1rem 2rem;
    line-height:1;
}
.input-group--box{
    display:inline-flex;
    align-items:center;
    margin:0 .25rem;
}
.input-group--box input[type="radio"]{
    display:none;
}
.input-group--box label{
    border-radius:.25rem;
    border:1px solid #dfdfdf;
    background-color:#fff;
    padding:1rem;
    min-width:60px;
    text-align:center;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
}
.input-group--box input[type="radio"]:checked + label{
    background-color:#121212;
    border-color:#121212;
    color:#fff;
    font-weight:700;
}

.input-group .btn-group--same{
    margin-left:.25rem;
}


.form-group{
    display:flex;
    align-items:center;
    margin-left:-.25rem;
    margin-right:-.25rem;
}
.form-group .form-title{
    font-size:1rem;
}
.form-group .form-title span{
    font-size:1.5rem;
}

.field{
    clear:both;
    margin-bottom:1rem;
    width:100%;
}
.field label{
    display:block;
    margin-bottom:.75rem;
    font-weight:600;
    font-size:.9rem;
    color:rgba(0,0,0,.8);
}
.field .input{
    clear:both;
    width:100%;
}

/*
    Field Message
*/
.field-message{
    color:var(--color-danger);
    margin-top:.5rem;
    font-size:.8rem;
    display:flex;
    align-items:center;
    font-weight:600;
}
.field-message span{
    font-size:1rem;
    padding-right:.25rem
}

.form-group--no-label label{
    display:none;
}

/*
    Nav
*/
.nav > ul{
    display:flex;
    align-items:center;
}
.nav > ul > li{
    margin:0 .25rem;
}
.nav > ul > li > a{
    display:block;
    padding:.4rem 1rem;
    text-align:center;
    text-decoration:none;
    color:rgba(0,0,0,.7);
    border:1px solid transparent;
    border-radius:100px;
    font-size:.85rem;
    transition:.3s;
}
.nav > ul > li > a:hover{
    border-color:#dfdfdf;
}
.nav > ul > li.active > a{
    background-color:#121212;
    color:#fff;
}

/*
    Grid
*/
.grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    margin:0 -1rem;
    margin-bottom:2rem;
}
.grid > .grid__col{
    padding:0 1rem;
}
.grid.grid-1{
    grid-template-columns:100%;
}
.grid.grid-3{
    grid-template-columns:repeat(3,33.333%);
}
.grid.grid-4{
    grid-template-columns:repeat(4,1fr);
}
.grid.grid-5{
    grid-template-columns:repeat(5,1fr);
}
.grid.grid-10-2{
    grid-template-columns:calc(8.333% * 10) calc(8.333% * 2);
}
.grid.grid-4-8{
    grid-template-columns:calc(8.333% * 4) calc(8.333% * 8);
}
.grid.grid-5-7{
    grid-template-columns:calc(8.333% * 5) calc(8.333% * 7);
}
.grid.grid-12{
    grid-template-columns:100%;
    margin:0;
}
.grid.grid-12 .grid__col{
    padding:0;
}

.grid.grid-inline{
    grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}

.grid__col.span-1{
    grid-column: span 1;
}
.grid__col.span-2{
    grid-column: span 2;
}
.grid__col.span-3{
    grid-column: span 3;
}

.grid.grid-gap-small{
    margin:0 -.5rem;
}
.grid.grid-gap-small > .grid__col{
    padding:0 .5rem;

}


/*
    Button
*/
.btn,
.btn.btn-primary{
    display:inline-flex;
    padding:1rem;
    text-align:center;
    border:1px solid var(--color-primary);
    font-size:1rem;
    text-decoration:none;
    background-color:var(--color-primary);
    color:#fff;
    font-weight:700;
    border-radius:.25rem;
    line-height:1;
    transition:.3s;
    align-items:center;
}
.btn > span{
    font-size:1.3em!important;
    position:relative;
    top:1px;
    padding-right:.25rem;
}
.btn.btn-outline{
    background-color:#fff;
    color:var(--color-primary);
    border-color:var(--color-primary);
}
.btn.btn-oval{
    border-radius:100px;
    padding-left:2rem;
    padding-right:2rem;
}
.btn.btn-small{
    font-size:.9rem;
    padding:.75rem 1rem;
}
.btn.btn-small > span{
    font-size:1rem;
    padding-right:.25rem;
}
.btn.btn-mini{
    font-size:.7rem;
    padding:.25rem .45rem;
}
.btn.btn-mini.btn-oval{
    padding-left:.45rem;
    padding-right:.6rem;
}
.btn.btn-mini > span{
    font-size:.9em;
}

.btn.disabled{
    opacity:.5;
}

.btn.btn-wide{
    padding-left:3rem;
    padding-right:3rem;
}

.btn.btn-light{
    background-color:#fff;
    border-color:#ddd;
    color:#121212;
}
.btn.btn-dark{
    background-color:#121212;
    border-color:#121212;
    color:#fff;
}
.btn.btn-danger{
    border-color:#DB3645;
    background-color:#DB3645;
    color:#fff;
}
.btn.btn-secondary{
    border-color:var(--color-secondary);
    background-color:var(--color-secondary);
    color:#fff;
}
.btn.btn-success{
    border-color:var(--color-success);
    background-color:var(--color-success);
    color:#fff;
}
.btn.btn-fluid{
    width:100%;
    text-align:center;
    justify-content:center;
    padding-left:0;
    padding-right:0;
}
.btn.btn-accent{
    background-color:#fada3c;
    color:#1e1e1e;
    border-color:#1e1e1e;
    border-radius:100px;
    font-weight:600;
    font-size:.9rem;
    min-width:150px;
    text-align:center;
    justify-content:center;
    padding:1.2rem 1.5rem;
    position:relative;
    transition:.3s;
}
.btn.btn-accent::after{
    opacity:0;
    transition: .3s;
}
.btn.btn-accent:hover::after{
    content:'';
    border:2px solid #1e1e1e;
    width:calc(100% - 1px);
    height:calc(100% - 1px);
    display:block;
    position:absolute;
    left:-1px;
    top:-1px;
    opacity:1;
    z-index:21;
    border-radius:100px;
    transition:.3s;
}

.btn > span{
    font-size:2em;
}

.btn-group--same{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    margin:0 -.25rem;
}
.btn-group--same > .btn{
    margin:0 .25rem;
    min-width:100px;
    justify-content:center;
}

.btn.btn-no-outline{
    border-color:transparent;
}



/*
    LOGIN
*/
#login .input{
    
    border:0;
    transition:.3s;
}
#login .input:focus{
    background-color:#fff;
}
#login .login__body{
    padding-top:1rem;
}
#login .message{
    color:rgba(255,255,255,.5);
    font-size:.7rem;
}
#login .message a{
    color:#fff;
    display:inline-flex;
    align-items:center;
}
#login .message  span{
    font-size:1.3em;
    color:#fff;
    position:relative;
    top:3px;
    padding-right:.25rem;
}
#login .message .message__head{
    display:flex;
    align-items:center;
    color:var(--color-danger);
    padding-bottom:.5rem;
}
#login .message .message__head span{
    font-size:1.8em;
    color:var(--color-danger);
    padding-right:.5rem;
}
#login .message li{
    margin:0;
    padding:.2rem 0;
}
#login .message li u{
    text-decoration:underline;
    color:#fff;
}