/* html */
*,
*::before,
*::after {box-sizing: border-box;padding: 0;margin: 0;}
html {-ms-overflow-style: var(--scroll); scrollbar-width: var(--scroll);-webkit-text-size-adjust: 100%;}
body {margin: 0;min-height: 100vh;display: flex;flex-direction: column;padding-top: var(--site-header-height);font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;font-size: 16px;line-height: 1.5;color: #111827;background-color: #ffffff;-webkit-font-smoothing: antialiased;}
a {color: inherit;text-decoration: none;}
ul {margin: 0;padding: 0;list-style: none;}
button {font: inherit;border: 0;background: transparent;cursor: pointer;padding: 0;}
.container {width: 100%;max-width: 1280px;margin-left: auto;margin-right: auto;padding-left: 16px;padding-right: 16px;}
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}


@font-face { 
    font-family: 'RedHatDisplay'; 
    font-weight: 300; 
    src: url(/fonts/RedHatDisplay/RedHatDisplay-300.ttf) format('truetype'); 
    unicode-range: U+0041-005A, U+0061-007A;
}

@font-face { 
    font-family: 'RedHatDisplay'; 
    font-weight: 400; 
    src: url(/fonts/RedHatDisplay/RedHatDisplay-400.ttf) format('truetype'); 
    unicode-range: U+0041-005A, U+0061-007A;
}

@font-face { 
    font-family: 'RedHatDisplay'; 
    font-weight: 500; 
    src: url(/fonts/RedHatDisplay/RedHatDisplay-500.ttf) format('truetype'); 
    unicode-range: U+0041-005A, U+0061-007A;
}

@font-face { 
    font-family: 'RedHatDisplay'; 
    font-weight: 600; 
    src: url(/fonts/RedHatDisplay/RedHatDisplay-600.ttf) format('truetype'); 
    unicode-range: U+0041-005A, U+0061-007A;
}

@font-face { 
    font-family: 'RedHatDisplay'; 
    font-weight: 700; 
    src: url(/fonts/RedHatDisplay/RedHatDisplay-700.ttf) format('truetype'); 
    unicode-range: U+0041-005A, U+0061-007A;
}

@font-face { 
    font-family: 'RedHatDisplay'; 
    font-weight: 800; 
    src: url(/fonts/RedHatDisplay/RedHatDisplay-800.ttf) format('truetype'); 
    unicode-range: U+0041-005A, U+0061-007A;
}

:root {
    --font-point: 'RedHatDisplay', sans-serif;

    --color-primary: #002A78;
    --color-sub-1: #80C1E4;
    --color-sub-2: #A1D7CE;
    --color-sub-3: #39A2DB;
    --color-sub-4: #49BBA8;
    --color-sub-5: #5856D6;
    --color-bg-1: #fdfcfa;
    --color-bg-2: #f6f6f6;
    --color-neutral-1: #ffffff;
    --color-neutral-2: #ebebeb;
    --color-neutral-3: #cccccc;
    --color-neutral-4: #999999;
    --color-neutral-5: #737373;
    --color-neutral-6: #525252;
    --color-neutral-7: #333333;
    --color-neutral-8: #1e1e1e;
    --color-neutral-9: #0a0a0a;
    --color-neutral-10: #000000;
    --color-icon-1: #eeeeee;
    --color-icon-2: #949494;
    --color-icon-3: #121212;
    
    --size-wrap-padding: 50px;
    --site-header-height: 100px;
}

@media all and (max-width: 1440px) {
    :root { --size-wrap-padding: 30px; }
}

@media all and (max-width: 767px) {
    :root {
        --size-wrap-padding: 16px;
        --site-header-height: 65px;
    }
}



/* wrap */
.wrap-max { width: 100%;padding-inline: var(--size-wrap-padding);}
.wrap-large { max-width: 1700px; width: 100%; margin: 0 auto; padding-inline: var(--size-wrap-padding);} 
.wrap-medium { max-width: 1400px; width: 100%; margin: 0 auto; padding-inline: var(--size-wrap-padding);} 
.wrap-small { max-width: 740px; width: 100%; margin: 0 auto; padding-inline: var(--size-wrap-padding);} 
.wrap-tiny { max-width: 480px; width: 100%; margin: 0 auto; padding-inline: var(--size-wrap-padding);} 
.wrap-order { max-width: 1180px; width: 100%; margin: 0 auto; } 

@media all and (max-width:1180px){
 .wrap-order { width: 100%; margin: 0; } 
}
@media all and (max-width:999px){
 .wrap-order { width: 528px; margin: 0 auto; } 
}
@media all and (max-width:660px){
 .wrap-order { width: 100%; margin: 0; } 
}

/* warning */
.warning{width: 100%;height: 90vh;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 1.4;}
.warning svg{margin-bottom: 10px;color: red;}
.warning a{display: inline-block;font-size: 15px;background: #222327;color: #fff;padding: 8px 24px;border-radius: 42px;transition: all 0.4s;margin-top: 20px;}

/* text-align */
.text-left { text-align: left !important; } 
.text-center { text-align: center !important; } 
.text-right { text-align: right !important; } 

/* gap */
.gap { display: block; height: 50px; } 

/* float */
.float-start { float: left; } 
.float-end { float: right; } 

/* rwd */
.cf-pc {}
.cf-mo {display: none;}

@media all and (max-width:767px) {
  .cf-pc {display: none !important;}
  .cf-mo {display: block;}
}

/* state */
.cf-is-active { } 
.cf-is-disabled { } 

/* iframe 16:9 */
.video-embed { position: relative; width: 100%; height: auto; padding-bottom: 56.25%; } 
.video-embed iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } 

/* iframe 9:16 */
.video-shorts-embed { position: relative; width: 100%; max-width: 315px; margin: 0 auto; padding-bottom: 177.78%; } 
.video-shorts-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

/* grid */
.grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:40px 20px } 
.grid3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:40px 20px } 
.grid4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:40px 20px } 
.grid5 { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:40px 15px } 

@media all and (max-width:1023px){
 .grid4,
 .grid5 { grid-template-columns: repeat(3,minmax(0,1fr)); gap:40px 15px; } 
 }

@media all and (max-width:767px){
 .grid3,
 .grid4,
 .grid5 { grid-template-columns: repeat(2,minmax(0,1fr)); gap:40px 10px; } 
 }

.flex { display: flex; align-items: center; } 

/* font-size */
.fz-10 { font-size: 10px; } 
.fz-12 { font-size: 12px; } 
.fz-14 { font-size: 14px; } 
.fz-16 { font-size: 16px; } 
.fz-18 { font-size: 18px; } 
.fz-20 { font-size: 20px; } 

/* margin */
.mi-0 { margin-inline: 0; } 
.mbck-0 { margin-block: 0; } 
.mt-5 { margin-top: 5px; } 
.ml-5 { margin-left: 5px; } 

.mt-10 { margin-top: 10px; } 
.ml-10 { margin-left: 10px; } 

/* 우측 고정 배너 */
.fixed-menu { position: fixed; right: 20px; bottom: 20px; z-index: 10; display: none; transition: bottom 0.4s; } 
.fixed-menu.up { bottom: 85px; } 
.fixed-menu > ul {display: flex; flex-direction: column; gap: 8px;} 
.fixed-menu > ul > li { width: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer;  font-size: 0; }
.fixed-menu > ul > li > a {display: block;}
.fixed-menu > ul > li > a > img {width: 100%; filter: drop-shadow(0 0 16px rgb(50 50 50 / 12%));}

@media all and (max-width:767px){
 .fixed-menu { right: 10px; bottom: 10px; }
 .fixed-menu.up { bottom: 70px; }
 .fixed-menu > ul { }
 .fixed-menu > ul > li { width: 35px; }
}

/* ================================================
   SUB VISUAL (하위 페이지 공통 상단 배너)
   ================================================ */
.sub-visual{position: relative;width: 100%;}
.sub-visual__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.sub-visual__text{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;padding-inline: var(--size-wrap-padding);text-align: center;color: var(--color-neutral-1);line-height: 1.4;}
.sub-visual__text > span{display: inline-flex;align-items: center;justify-content: center;padding: 8px 16px;border-radius: 999px;background: var(--color-primary);font-size: 16px;white-space: nowrap;margin-bottom: 20px;}
.sub-visual__text > h3{font-size: 48px;font-weight: 600;margin-bottom: 10px;}
.sub-visual__text > p{font-size: 20px;font-weight: 500;}

@media all and (max-width:1440px) {
    .sub-visual__text > span{font-size: 14px;}
    .sub-visual__text > h3{font-size: 36px;}
    .sub-visual__text > p{font-size: 18px;}
}

@media all and (max-width:1024px) {
    .sub-visual__media{height: 350px;}
    .sub-visual__media > .cf-pc{height: 100%;}
    .sub-visual__text > span{font-size: 12px;padding: 7px 14px;margin-bottom: 10px;}
    .sub-visual__text > h3{font-size: 28px;}
    .sub-visual__text > p{font-size: 16px;}
}

@media all and (max-width:767px) {
    .sub-visual__media{height: auto;}
}