@charset "UTF-8";

/*=================
    header
    =================*/
header {
    width:100%;
    height:104px;
    background: #EDF1F5;
}
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
    max-width:1280px;
    height:100%;
    margin:0 auto;
}
#header h1 a {
    width:242px;
    height:42px;
    background: url('../images/logo.svg') no-repeat;
    background-size: contain;
}
#header .csWrap {
    text-align: right;
}
#header .csWrap span {
    color:#1D1D1D;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px; /* 128.571% */
    letter-spacing: -0.42px;
}
#header .csWrap strong {
    display: block;
    color: #0058A2;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px; /* 114.286% */
    letter-spacing: -0.84px;
}


/*=================
    contents
    =================*/
#contents {
    width:100%;
    max-width:1280px;
    margin:64px auto 67px;
}
#contents .introWrap strong {
    color: #000;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.88px;
}
#contents .introWrap p {
    color: #2D2D2D;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.4px;
    margin-top:12px;
    margin-bottom:48px;
}

#contents .hubWrap {
    display: grid;
    grid-gap:20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 200px);
    grid-template-areas:
        'a  b  c'
        'a  d  e'
        'f  g  h'
    ;
}
#contents .hubWrap .hub {
    border-radius:12px;
}
#contents .hubWrap .hub:nth-of-type(1) {
    grid-area:a;
}
#contents .hubWrap .hub:nth-of-type(2) {
    grid-area:b;
}
#contents .hubWrap .hub:nth-of-type(3) {
    grid-area:c;
}
#contents .hubWrap .hub:nth-of-type(4) {
    grid-area:d;
}
#contents .hubWrap .hub:nth-of-type(5) {
    grid-area:e;
}
#contents .hubWrap .hub:nth-of-type(6) {
    grid-area:f;
}
#contents .hubWrap .hub:nth-of-type(7) {
    grid-area:g;
}
#contents .hubWrap .hub:nth-of-type(8) {
    grid-area:h;
}
#contents .hub a {
    height:100%;
    padding:40px 36px;
    border-radius:12px;
    background-size:140px 140px;
    background-position:250px 40px;
    background-color:#EDF1F5;
    background-repeat: no-repeat;
}
#contents .hub a:hover {
    background-color:#DEEFFF;
}
#contents .hub:first-of-type a:hover {
    background-color:#102F6E;
}
#contents .hubWrap .hub:nth-of-type(1) a {
    background-color:#102F6E;
    background-size:326px 235px;
    background-position:bottom right;
    background-image:url('../images/hub/img-notice.png');
}
#contents .hubWrap .hub:nth-of-type(2) a {
    background-image:url('../images/hub/ico-hub-1.png');
}
#contents .hubWrap .hub:nth-of-type(3) a {
    background-image:url('../images/hub/ico-hub-2.png');
}
#contents .hubWrap .hub:nth-of-type(4) a {
    background-image:url('../images/hub/ico-hub-3.png');
}
#contents .hubWrap .hub:nth-of-type(5) a {
    background-image:url('../images/hub/ico-hub-4.png');
}
#contents .hubWrap .hub:nth-of-type(6) a {
    background-image:url('../images/hub/ico-hub-5.png');
}
#contents .hubWrap .hub:nth-of-type(7) a {
    background-image:url('../images/hub/ico-hub-6.png');
}
#contents .hubWrap .hub:nth-of-type(8) a {
    background-image:url('../images/hub/ico-hub-7.png');
}

#contents .hub .titleArea {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
}
#contents .hubWrap .hub:nth-of-type(1) .titleArea {
    display: block;
}
#contents .hub .titleArea .title {
    font-size: 26px;
    font-weight: 700;
    line-height: 150%; /* 39px */
    letter-spacing: -0.52px;
}
#contents .hubWrap .hub:nth-of-type(1) .title {
    color: #FFF;
    font-size: 30px;
    font-weight: 700;
    line-height: 150%; /* 45px */
    letter-spacing: -0.9px;
}
#contents .hubWrap .hub:nth-of-type(1) .desc {
    color: rgba(255, 255, 255, 0.90);
    font-size: 18.5px;
    font-weight: 500;
    line-height: 150%; /* 27.75px */
    letter-spacing: -0.185px;
    margin-top:12px;
}
#contents .hub .titleArea .shortcut {
    display: flex;
    align-items: center;
}
#contents .hub .titleArea .shortcut::after {
    content:'';
    width:16px;
    height:16px;
    background:url('../images/hub/ico-arrow-right.png') no-repeat;
    background-size:contain;
    margin-left:4px;
}
#contents .hubWrap .hub:nth-of-type(1) .shortcut {
    color:#FFF;
    font-size: 19.5px;
    font-weight: 600;
    line-height: 150%; /* 29.25px */
    margin-top:43px;
}
#contents .hubWrap .hub:nth-of-type(1) .shortcut::after {
    width:20px;
    height:20px;
    margin-left:6px;
}
#contents .hub .titleArea .sub {
    display: block;
    color:#008FC5;
    font-size: 26px;
    font-weight: 700;
    line-height: 150%; /* 39px */
    letter-spacing: -0.52px;
    margin-top:-5px;
}
#contents .hubWrap .hub:nth-of-type(6) .sub {
   display: inline;
}





/*=================
    footer
    =================*/
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    max-width:1280px;
    margin:0 auto 24px;
}
footer h2 a {
    width:138px;
    height:24px;
    background:url('../images/logo.svg') no-repeat;
    background-size: contain;
    margin-bottom:12px;
}
footer .infoWrap p {
    color:#717171;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}
.snsWrap {
    display: flex;
    gap:8px;
}
.snsWrap li a {
    width:40px;
    height:40px;
}
.snsWrap li:nth-of-type(1) a {
    background:url('../images/ico-instagram.svg') no-repeat;
    background-size:contain;
}
.snsWrap li:nth-of-type(2) a {
    background:url('../images/ico-youtube.svg') no-repeat;
    background-size:contain;
}
.snsWrap li:nth-of-type(3) a {
    background:url('../images/ico-kakao.svg') no-repeat;
    background-size:contain;
}
.snsWrap li:nth-of-type(4) a {
    background:url('../images/ico-facebook.svg') no-repeat;
    background-size:contain;
}