@font-face {
    font-family: 'Cafe24Shiningstar';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* initiating */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body { margin: 0; padding: 0; font-size:17px;}
ul,ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li { list-style: none !important }
:root {
    --primary : #1F31EB;
    --secondary : #2191ff;

    --navy : #04034b;

    --dark : #111;
    --inner : 1500px;
    --p : "Pretendard", sans-serif;
    --handwrite : 'Cafe24Shiningstar', "Pretendard", sans-serif;
}

.txt-primary { color:var(--primary); }
.txt-secondary { color:var(--secondary); }
.txt-dark { color:var(--dark); }

.handwrite { font-family:var(--handwrite); }


.bg-primary { background-color:var(--primary); }
.bg-secondary { background-color:var(--secondary); }
.bg-dark { background-color:var(--dark); }

.txt-white { color:#fff }
.bg-white { background-color:#fff }

/* fonts */
*,  input, textarea { font-family: "Poppins", "Pretendard", sans-serif; word-break: keep-all; margin: 0; text-align: left; line-height:1.6; letter-spacing: -0.01em; color:var(--dark); font-weight: 400; }
input:focus,  textarea:focus,  select:focus,  a:focus { outline: none; }
a { color: inherit; text-decoration: none;}
a:hover { color:inherit; }
div,nav,footer,header,ul,li,a { box-sizing:border-box; }

img { max-width: 100% }

h1, h2, h3, h4, h5, h6 { font-weight:700; color:inherit; line-height:1.7; }
h1 { font-size:3em }
h2 { font-size:2.8em }
h3 { font-size:2.3em }
h4 { font-size:2.0em }
h5 { font-size:1.5em }
h6 { font-size:1.2em }

small { font-size:0.6em }

b { font-weight: bold; }
strong { font-weight: bolder; font-family: inherit;}
u { font-style:normal; font-weight:normal; font-family:inherit; color:inherit; }
i { font-style:normal; font-weight:lighter; font-family:inherit; color:inherit; }
span { font-style:inherit; font-weight:inherit; font-family:inherit; color:inherit; }

p, strong, b, span { font-family: inherit; color:inherit; letter-spacing:inherit; line-height:inherit; }


h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { line-height:inherit; font-weight:inherit; }


section.guide .bg-box {
    display: flex;
    padding: 30px 15px;
    justify-content: center;
    justify-content: center;
}
section.guide .bg-box + .bg-box {
    font-weight: 800;
}

section.guide strong {
    display: block;
    margin-top: 50px;
    padding: 1em 0;
    margin-bottom: 1em;
}

/* text effect */
.highlight {
    display: inline-block;
    position: relative;
}
.highlight::after {
    content: '';
    display: inherit;
    position: absolute;
    width: 100%;
    height: 0.5em;
    left: 0;
    bottom: 0;
    border-radius: 3em;
    z-index: -1;
}
.hl-yellow::after { background-color: #FFFBE9; }

.hl-sky::after { background-color: #C4F1FF; }




/* drag area */
::-moz-selection {
    background-color: rgba(255, 255, 255, .9);
    color: var(--secondary);
/*    color: #CB7DB0;*/
    text-shadow: 1px 1px 1px #fff, 2px 2px 0.1em rgba(20, 35, 30, .1);
}
::selection {
    background-color: rgba(255, 255, 255, .9);
    color: var(--secondary);
/*    color: #CB7DB0;*/
    text-shadow: 1px 1px 1px #fff, 2px 2px 0.1em rgba(20, 35, 30, .1);
}

/* scroll styling
::-webkit-scrollbar {
    width: 5px;
  }
::-webkit-scrollbar-thumb {
    background-color: var(--dark);
    background-clip: padding-box;
  }
::-webkit-scrollbar-track {
    background-color: #fff;
}*/



/* font size */
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f26 { font-size: 26px; }
.f28 { font-size: 28px; }
.f30 { font-size: 30px; }
.f32 { font-size: 32px; }
.f36 { font-size: 36px; }
.f38 { font-size: 38px; }
.f40 { font-size: 40px; }
.f42 { font-size: 42px; }
.f60 { font-size: 60px; }

/* signiture external fonts */
.Anek { font-family: var(--a); }


/* layout */
#wrapper { margin:0; padding: 0; }

/* static class */
.width-full { width: 100vw; }
.width-full-percent { width: 100%; }
.width-fit { width: fit-content; }

/* position */
.sticky { position: fixed; }
.position-rel { position: relative; }
.position-abs { position: absolute; }

/* flex layout  */
.flex { display:flex; }
.flex.row { flex-direction: row; }
.flex.col { flex-direction: column; }
.center-center { justify-content:center; align-items: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-stretch { align-items: stretch; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-start { align-items: flex-start; }
.align-stretch { align-items: stretch; }

/* bg  */
.bg { background-size:cover; background-repeat:no-repeat; background-position:center; }


/* grid layout */
.grid { display:grid }
.half { grid-template-columns:1fr 1fr }
.trio { grid-template-columns:repeat(3, 1fr); }
.quater { grid-template-columns:repeat(4, 1fr); }
.five { grid-template-columns:repeat(5, 1fr); }

/* text-style */
.txt-center { text-align: center; }
.txt-left { text-align: left; }
.txt-right { text-align: right; }
.fw900 { font-weight: 800; }
.fw700 { font-weight:700; }
.fw600 { font-weight:600; }
.fw500 { font-weight:500; }
.fw400 { font-weight:400; }
.fw300 { font-weight: 300; }
.fw100 { font-weight: 100; }
.uppercase { text-transform: uppercase; font-family: var(--outfit) }


pre { background-color:#f5f5f5; border-radius:10px; padding:1em; font-family: var(--p); color: #999; font-weight: 500; letter-spacing: 0.01em; font-size: 0.9em; margin: 1em auto 0; width: 80%; }

/* img */
figure { overflow:hidden; display:block; }
figure img { max-width: 100%; }

/* opacity */
.op60 { opacity: 0.6; }
.op50 { opacity: 0.5; }
.op40 { opacity: 0.4; }
.op30 { opacity: 0.3; }
.op20 { opacity: 0.2; }
.op10 { opacity: 0.1; }

img {
    -webkit-user-select: none !important;
    -moz-user-select: -moz-none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}