/* initiating */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body { margin: 0; padding: 0; font-size:20px; }
ul,ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li { list-style: none !important }

:root {
    --primary : #214E9E;
    --secondary: #E8DC98;
    --tertiary:  #DADF6B;

/*    #636717#BFC720#DCF3FF#51BDF6*/

    --dark : #333;
    --black : #0F244B;

    --p : 'Pretendard';

    --inner : 1500px;
}

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

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


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

/* fonts */
*,  input, textarea { font-family: "42dot Sans", "Pretendard", sans-serif; word-break: keep-all; margin: 0; text-align: left; line-height:1.6; letter-spacing: -0.01em; color:var(--dark); font-size:1em; }
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:800; color:inherit; line-height:1.3; }
h1 { font-size:3em }
h2 { font-size:2.5em }
h3 { font-size:2.2em }
h4 { font-size:1.75em }
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: #F7F5F3;
    color: var(--primary);
}
::selection {
    background-color: #F7F5F3;
    color: var(--primary);
}


/* 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; }

/* 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; }

/* 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: 900; }
.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(--raleway); font-size:1.5em; font-weight:300; letter-spacing:0.1em; filter: opacity(0.5); }
.uppercase.txt-secondary { filter: opacity(1); }


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;
}
*/





div.table table.noborder th { font-weight:bolder }
/*div.table table.noborder th,*/
div.table table.noborder td {
    text-align: justify;
    line-height: 0;
}
div.table table.noborder td::before,
div.table table.noborder td::after {
/*div.table table.noborder th::before,*/
/*div.table table.noborder th::after {*/
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
    font-size: 0;
}
div.table table.noborder td {
    padding: 0.1em 1.5em;
    padding-right: 0;
    letter-spacing: 0.01em;
    line-height: 0.5;
    font-weight: 400 !important;
    letter-spacing: -0.03em;
}



/* footer subpage template */
div.section-wrapper.footer {
    margin-bottom: 8em;
}

div.section-wrapper.footer .elementor-widget-container > p {
    margin-bottom: 0.2em;
    padding: 0.2em 1.5em;
    line-height: 1.6;
    text-align: justify;
    font-size: 0.9em;
}
div.section-wrapper.footer .elementor-widget-container > p strong{
    font-size: 1.1em;
    margin-top: 2em;
    display: inline-block;
    font-weight: 600;
    letter-spacing: -0.05em;
}
div.section-wrapper.footer .elementor-widget-container h5 {
    text-align-last: center;
    font-size: 1.3em;
    letter-spacing: -0.04em;
    font-weight: 400;
}

div.section-wrapper.footer .elementor-widget-container p + h5 {
    padding: 3em 1.5em 1em;
}
div.section-wrapper.footer .elementor-widget-container > p.op60 {
    display: inline-block;
    width: 100%;
    margin: 3em auto 0;
    font-size:0.9em;
    text-align: center;
 }

div.section-wrapper.footer .elementor-widget-container blockquote {
    border: 1px solid rgba(20, 20, 20, .05);
    background-color: #f5f5f5;
    margin: 2em 1.6em 4em;
    padding: 1.5em 2em ;
    width: calc(100% - 3em);
    box-sizing: border-box;
}
div.section-wrapper.footer .elementor-widget-container blockquote p { line-height: 2.2; letter-spacing:0.01em; font-size: 0.85em; opacity:0.8 }



/* tables  */
table.table {
    border-collapse: collapse;
    border: 1px solid rgba(10, 10, 10, 0.1);
    width: fit-content;
    margin: 2em auto;
    overflow: hidden;
}
table.table tr > * {
    border: transparent;
    padding: 0.75em 1.5em;
}
table.table th {
    color: #fff;
    text-align: center;
    background-color: var(--primary);
}
table.table tbody td {
    background-color: #fefefe;
    font-weight: 400;
    font-size: 0.9em;
    border: 1px solid rgba(10, 10, 10, 0.1);
}

table.table tbody td small { opacity:0.6 }




/* 스타일가이드 */
section.style-guide {
    padding: 100px 0;
}
section.style-guide p strong {
    display: block;
    margin-bottom: 0.75em;
}
section.style-guide p strong::before {
    content: '|';
    font-weight: 900;
    color: var(--primary);
    margin-right: 1em;
}

section.style-guide div.color .grid {
    grid-gap: 10px;
}
section.style-guide div.color .grid > div {
    aspect-ratio: 4 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
section.style-guide .inner {
    display: flex;
    flex-direction: column;
    grid-gap: 100px;
}

div.title {}
div.title h2,
div.title h3,
div.title h4 {
    font-weight: 300;
    letter-spacing: -0.035em;
}

div.title h2 b,
div.title h3 b,
div.title h4 b {
    font-weight: 700;
    color: var(--primary);
}