:root {
    --color-bk: #101010;
    --color-gy: #909090;
    --color-wh: #ffffff;

    --color-bg: #FAFAFA;
    --color-line: #FAFAFA;

    --color-1: #004793;
    --color-2: #17A6E1;
    --color-3: #A669A9;
    --color-4: #ED7C94;
    --color-5: #0E8F9F;
    --color-6: #2BA739;
    --color-7: #555C72;
    --color-8: #D7724F;

}

/* ---------------- COMMON ---------------- */

@font-face {
    font-family: 'HakgyoansimAllimjang';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'HakgyoansimAllimjang';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

::selection {
    color: var(--color-wh);
}

.main::selection{
    background-color: var(--color-bk);
}

.se::selection {
    background-color: var(--color-1);
}

.se > div{
    border: 20px solid var(--color-1);
}

.se table{
    border: 2px solid var(--color-1);
}

.se thead > tr > th > span{
    background-color: var(--color-1);
}

.se th{
    border-bottom: 2px solid var(--color-1) !important;
}

.se label > input{
    accent-color: var(--color-1);
}

.se .dropdown-menu {
    border: 2px solid var(--color-1);
}

.se .dropdown-toggle {
    background-color: var(--color-1);
}

.jb::selection {
    background-color: var(--color-2);
}

.jb > div{
    border: 20px solid var(--color-2);
}

.jb table{
    border: 2px solid var(--color-2);
}

.jb thead > tr > th > span{
    background-color: var(--color-2);
}

.jb th{
    border-bottom: 2px solid var(--color-2) !important;
}

.jb label > input{
    accent-color: var(--color-2);
}

.jb .dropdown-menu {
    border: 2px solid var(--color-2);
}

.jb .dropdown-toggle {
    background-color: var(--color-2);
}

.gn::selection {
    background-color: var(--color-3);
}

.gn > div{
    border: 20px solid var(--color-3);
}

.gn table{
    border: 2px solid var(--color-3);
}

.gn thead > tr > th > span{
    background-color: var(--color-3);
}

.gn th{
    border-bottom: 2px solid var(--color-3) !important;
}

.gn label > input{
    accent-color: var(--color-3);
}

.gn .dropdown-menu {
    border: 2px solid var(--color-3);
}

.gn .dropdown-toggle {
    background-color: var(--color-3);
}

.gw::selection {
    background-color: var(--color-4);
}

.gw > div{
    border: 20px solid var(--color-4);
}

.gw table{
    border: 2px solid var(--color-4);
}

.gw thead > tr > th > span{
    background-color: var(--color-4);
}

.gw th{
    border-bottom: 2px solid var(--color-4) !important;
}

.gw label > input{
    accent-color: var(--color-4);
}

.gw .dropdown-menu {
    border: 2px solid var(--color-4);
}

.gw .dropdown-toggle {
    background-color: var(--color-4);
}

.bs::selection {
    background-color: var(--color-5);
}

.bs > div{
    border: 20px solid var(--color-5);
}

.bs table{
    border: 2px solid var(--color-5);
}

.bs thead > tr > th > span{
    background-color: var(--color-5);
}

.bs th{
    border-bottom: 2px solid var(--color-5) !important;
}

.bs label > input{
    accent-color: var(--color-5);
}

.bs .dropdown-menu {
    border: 2px solid var(--color-5);
}

.bs .dropdown-toggle {
    background-color: var(--color-5);
}

.dg::selection {
    background-color: var(--color-6);
}

.dg > div{
    border: 20px solid var(--color-6);
}

.dg table{
    border: 2px solid var(--color-6);
}

.dg thead > tr > th > span{
    background-color: var(--color-6);
}

.dg th{
    border-bottom: 2px solid var(--color-6) !important;
}

.dg label > input{
    accent-color: var(--color-6);
}

.dg .dropdown-menu {
    border: 2px solid var(--color-6);
}

.dg .dropdown-toggle {
    background-color: var(--color-6);
}

.gj::selection {
    background-color: var(--color-7);
}

.gj > div{
    border: 20px solid var(--color-7);
}

.gj table{
    border: 2px solid var(--color-7);
}

.gj thead > tr > th > span{
    background-color: var(--color-7);
}

.gj th{
    border-bottom: 2px solid var(--color-7) !important;
}

.gj label > input{
    accent-color: var(--color-7);
}

.gj .dropdown-menu {
    border: 2px solid var(--color-7);
}

.gj .dropdown-toggle {
    background-color: var(--color-7);
}

.dj::selection {
    background-color: var(--color-8);
}

.dj > div{
    border: 20px solid var(--color-8);
}

.dj table{
    border: 2px solid var(--color-8);
}

.dj thead > tr > th > span{
    background-color: var(--color-8);
}

.dj th{
    border-bottom: 2px solid var(--color-8) !important;
}

.dj label > input{
    accent-color: var(--color-8);
}

.dj .dropdown-menu {
    border: 2px solid var(--color-8);
}

.dj .dropdown-toggle {
    background-color: var(--color-8);
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 360px;
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--color-wh);
}

section{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 1440px;
    width: 100%;
    padding: 40px 20px;
}

section > div{
    width: 100%;
    border-radius: 30px;
    margin-top: calc(108px * 0.5 - 20px * 0.5);
    padding: 108px 40px 40px 40px;
    overflow-x: auto;
    white-space: normal; /* �� 以꾨컮轅� �덉슜 */
}

.dropdown {
    top: calc((108px * 0.5 - 20px * 0.5) * 2 + 20px + 40px);
    left: calc(20px + 20px + 40px);
    position: absolute;
    display: inline-block;
}

.dropdown-toggle {
    font-family: 'HakgyoansimAllimjang', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.dropdown-menu {
    width: 100% ;
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    left: 0px;
    top: 48px;
    display: none;
    background-color: var(--color-wh);
    min-width: 160px;
    border-radius: 6px;
    z-index: 1000;
    padding: 12px;
    margin-top: 8px;
}

.dropdown-menu label {
    width: 100%;
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 16px;
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}

.dropdown.show .dropdown-menu {
    display: inline-block;
}

.col-1 { width: 5%; }    /* �쒕쾲 */
.col-2 { width: 15%; }   /* 紐낆묶 */
.col-3 { width: 7.5%; }   /* �쒗뻾�쒓린 */
.col-4 { width: 12.5%; }   /* �μ냼 */
.col-5 { width: 10%; }   /* ���� */
.col-6 { width: 22.5%; }   /* �댁슜 */
.col-7 { width: 12.5%; }   /* �곕씫泥� */
.col-8 { width: 15%; }   /* 鍮꾧퀬 */

/* �뚯씠釉� �곸뿭 �ㅽ겕濡� 媛��ν븯寃� */
section > div {
    overflow-x: auto important;
  }
  
  /* �뚯씠釉� 怨좎젙 �덉씠�꾩썐 + 以꾨컮轅� */
  section table {
    table-layout: fixed important;
    width: 100% important;
    min-width: 1024px;
  }
  
  /* �� �대� 以꾨컮轅� */
  section td, .se th {
    word-break: keep-all important;
    white-space: normal important; 
  }
  
  /* 留곹겕�� �대� �붿냼�� 以꾨컮轅� */
  section td a,
  section td div,
  section td p {
    word-break: break-word !important;
    white-space: normal important;
    max-width: 100%;
  }

  td a{
    color: var(--color-bk) !important;
  }
  
.title{
    position: absolute;
    top: 40px;
    height: 108px;
    object-fit: contain;
    z-index: 10;
}

.logo{
    position: absolute;
    right: 80px;
    bottom: calc(40px - 40px * 0.5 + 20px * 0.5);
    height: 40px;
    object-fit: contain;
    z-index: 10;
}

table{
    width: 100%;
    border-spacing: 0;
}

table, th, td{
    border: 1px solid var(--color-bk);
    border-collapse: collapse;
}

thead > tr > th{
    padding: 0 0.5px;
}

th{
    border-top: 2px solid var(--color-wh) !important;
    border-right: 2px solid var(--color-wh) !important;
    border-left: 2px solid var(--color-wh) !important;
    border-bottom: 2px solid var(--color-hl) !important;
}

thead > tr > th > span{
    min-width: 48px;
    display: inline-block;
    width: 100%;
    font-family: 'HakgyoansimAllimjang', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-wh);
    padding: 10px 0px 8px 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

tbody > tr:nth-of-type(odd){
    background-color: #F4F2EB;
}

tbody > tr:nth-of-type(even){
    background-color: #FFF;
}

tbody > tr > td{
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: calc(-0.025 * 18px);
    color: var(--color-bk);
    text-align: center;
    padding: 8px 4px;
    line-height: 125%;
    word-break: keep-all;
}

tbody > tr > td div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

tbody > tr > td div > p{
    color: var(--color-bk);
    line-height: 125%;
    word-break: keep-all;
}

tbody > tr > td div > img{
    width: 120px;
    object-fit: contain;
}

.main{
    background-color: #EBF1FF;
    line-height: 0;
}

.main > div{
    min-height: 100vh;
    background-color: #D0DCFF;
}

.main-wrapper > img{
    width: 100%;
    object-fit: contain;
}

.main-wrapper > div{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 0px 20px 40px 20px;
    background-color: #D0DCFF;
}

.main-wrapper > div > a{
    font-family: 'HakgyoansimAllimjang', sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    color: var(--color-wh);
    padding: 20px;
    border-radius: 8px;
    line-height: 100%;
}

.main-wrapper > div > a:nth-of-type(1){
    background-color: var(--color-1);
}

.main-wrapper > div > a:nth-of-type(2){
    background-color: var(--color-2);
}

.main-wrapper > div > a:nth-of-type(3){
    background-color: var(--color-3);
}

.main-wrapper > div > a:nth-of-type(4){
    background-color: var(--color-4);
}

.main-wrapper > div > a:nth-of-type(5){
    background-color: var(--color-5);
}

.main-wrapper > div > a:nth-of-type(6){
    background-color: var(--color-6);
}

.main-wrapper > div > a:nth-of-type(7){
    background-color: var(--color-7);
}

.main-wrapper > div > a:nth-of-type(8){
    background-color: var(--color-8);
}

.main-wrapper > div > a{
    transition: 0.2s;
}

.main-wrapper > div > a:hover{
    opacity: 0.75;
}

footer{
    max-width: 640px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #cecece;
    background-color: #D0DCFF;
    line-height: 100%;
}

footer > p{
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #909090;
}


@media screen and (max-width: 1320px) {

    section > div{
        width: 100%;
        border-width: 16px !important;
        border-radius: 24px;
        margin-top: calc(96px * 0.5 - 16px * 0.5);
        padding: 108px 32px 32px 32px;
    }


    .title{
        height: 96px;
        object-fit: contain;
        z-index: 10;
    }

    .logo{
        right: 64px;
        bottom: calc(40px - 36px * 0.5 + 16px * 0.5);
        height: 36px;
    }

    
.dropdown {
    top: calc((108px * 0.5 - 16px * 0.5) * 2 + 20px + 32px);
    left: calc(16px + 20px + 32px);
}

.dropdown-toggle {
    font-size: 16px;
}

.dropdown-menu {
    top: 45px;
}
}

@media screen and (max-width: 1024px) {

    section > div{
        width: 100%;
        border-width: 16px !important;
        border-radius: 24px;
        margin-top: calc(80px * 0.5 - 16px * 0.5);
        padding: 96px 30px 30px 30px;
    }


    .title{
        height: 80px;
        object-fit: contain;
        z-index: 10;
    }

    .logo{
        right: 60px;
        bottom: calc(40px - 36px * 0.5 + 16px * 0.5);
        height: 36px;
    }

        
    .dropdown {
        top: calc((96px * 0.5 - 16px * 0.5) * 2 + 18px + 32px);
        left: calc(16px + 18px + 32px);
    }

    .dropdown-toggle {
        font-size: 16px;
    }

    .dropdown-menu {
        top: 45px;
    }
}

@media screen and (max-width: 768px) {

    section > div{
        width: 100%;
        border-width: 14px !important;
        border-radius: 21px;
        margin-top: calc(56px * 0.5 - 14px * 0.5);
        padding: 80px 24px 24px 24px;
    }

    .dropdown {
        top: calc((80px * 0.5 - 16px * 0.5) * 2 + 18px + 24px);
        left: calc(16px + 18px + 24px);
    }

    .dropdown-toggle {
        font-size: 16px;
    }

    .dropdown-menu {
        
        margin-top: 6px;
        top: 45px;
    }

    .title{
        height: 56px;
        object-fit: contain;
        z-index: 10;
    }

    .logo{
        right: 48px;
        bottom: calc(40px - 32px * 0.5 + 14px * 0.5);
        height: 32px;
    }
    
    thead > tr > th > span{
        font-size: 15px;
    }

    tbody > tr > td{
        font-size: 15px;
    }

    
tbody > tr > td div > img{
    width: 80px;
    object-fit: contain;
}
}

@media screen and (max-width: 640px) {

    .main-wrapper > div{
        row-gap: 12px;
        padding: 0px 18px 36px 18px;
    }
    
    .main-wrapper > div > a{
        font-size: 22px;
        padding: 18px;
    }

    footer{
        padding: 16px;
    }
    
    footer > p{
        font-size: 15px;
    }
}

@media screen and (max-width: 576px) {

    section > div{
        width: 100%;
        border-width: 12px !important;
        border-radius: 18px;
        margin-top: calc(48px * 0.5 - 14px * 0.5);
        padding: 72px 20px 20px 20px;
    }

    
    .dropdown {
        top: calc((72px * 0.5 - 16px * 0.5) * 2 + 20px + 20px);
        left: calc(16px + 16px + 20px);
    }

    .dropdown-toggle {
        font-size: 14px;
        padding: 10px 16px;
    }

    .dropdown-menu {
        
        margin-top: 6px;
        top: 39px;
    }

    .dropdown-menu label{
        font-size: 14px;
    }

    .title{
        height: 48px;
        object-fit: contain;
        z-index: 10;
    }

    .logo{
        right: 40px;
        bottom: calc(40px - 32px * 0.5 + 12px * 0.5);
        height: 32px;
    }
    
    thead > tr > th > span{
        font-size: 14px;
    }

    tbody > tr > td{
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    
    section{
        padding: 24px 16px;
    }

    

    section > div{
        width: 100%;
        border-width: 8px !important;
        border-radius: 12px;
        margin-top: calc((100vw - 32px) * 0.1222 * 0.5 - 8px * 0.5);
        padding: 64px 16px 16px 16px;
    }

    .dropdown {
        top: calc(((100vw - 32px) * 0.1222 * 0.5 - 8px * 0.5) + 56px);
        left: calc(12px + 12px + 15px);
    }

    .dropdown-toggle {
        font-size: 14px;
        padding: 10px 16px;
    }

    .dropdown-menu {
        
        margin-top: 3px;
        top: 39px;
    }

    .dropdown-menu label{
        font-size: 14px;
    }


    .title{
        top: 24px;
        height: calc((100vw - 32px) * 0.1222);
        min-height: 40px;
        object-fit: contain;
        z-index: 10;
    }

    .logo{
        right: 40px;
        bottom: calc(24px - 28px * 0.5 + 8px * 0.5);
        height: 28px;
    }

    .main-wrapper > div{
        row-gap: 8px;
        padding: 0px 16px 24px 16px;
    }
    
    .main-wrapper > div > a{
        font-size: 20px;
        padding: 15px;
    }

    footer{
        padding: 12px;
    }
    
    footer > p{
        font-size: 13px;
    }
    
}