@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:1600px;
    height:100%;
    margin:0 auto;
}
#header h1 a {
    width:242px;
    height:42px;
    background: url('../../../images/web/reb/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;
}

/*header query*/
@media (max-width: 1620px){
    header,
    #contents,
    footer {
       padding:0 16px;
    }

}
@media (max-width: 1200px){
    header {
        height:96px;
    }
}
@media (max-width: 768px){
    header,
    #contents,
    footer {
        padding:0 16px;
    }
    header {
        height:67px;
    }
    #header h1 a {
        width:173px;
        height:30px;
    }
    #header .csWrap span {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px; /* 150% */
        letter-spacing: -0.36px;
    }
    #header .csWrap strong {
        font-size: 20px;
        font-weight: 700;
        line-height: 20px; /* 100% */
        letter-spacing: -0.6px;
    }

}



/*=================
    contents
    =================*/
#contents {
    width:100%;
    max-width:1600px;
    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: right 20px center;
    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/web/reb/hub/img-notice.png');
}
#contents .hubWrap .hub:nth-of-type(2) a {
    background-image:url('../../../images/web/reb/hub/ico-hub-1.png');
}
#contents .hubWrap .hub:nth-of-type(3) a {
    background-image:url('../../../images/web/reb/hub/ico-hub-2.png');
}
#contents .hubWrap .hub:nth-of-type(4) a {
    background-image:url('../../../images/web/reb/hub/ico-hub-3.png');
}
#contents .hubWrap .hub:nth-of-type(5) a {
    background-image:url('../../../images/web/reb/hub/ico-hub-4.png');
}
#contents .hubWrap .hub:nth-of-type(6) a {
    background-image:url('../../../images/web/reb/hub/ico-hub-5.png');
}
#contents .hubWrap .hub:nth-of-type(7) a {
    background-image:url('../../../images/web/reb/hub/ico-hub-6.png');
}
#contents .hubWrap .hub:nth-of-type(8) a {
    background-image:url('../../../images/web/reb/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:20px;
}
#contents .hub .titleArea .shortcut {
    display: flex;
    align-items: center;
}
#contents .hub .titleArea .shortcut::after {
    content:'';
    width:16px;
    height:16px;
    background:url('../../../images/web/reb/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:25px;
}
#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;
}



/*content query*/
@media (max-width: 1200px){
    #contents {
        margin:60px auto 40px;
    }
    #contents .introWrap strong {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -0.68px;
    }
    #contents .introWrap p {
        font-size: 18px;
        letter-spacing: -0.36px;
    }
    #contents .hubWrap {
        grid-gap:16px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 160px);
        grid-template-areas:
        'a  b'
        'a  c'
        'a  d'
        'e  f'
        'g  h'
    ;
    }
    #contents .hubWrap .hub:nth-of-type(1) .title {
        font-size: 29px;
        letter-spacing: -0.87px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .desc {
        font-size: 16px;
        letter-spacing: -0.16px;
        margin-top:22px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .shortcut {
        font-size:18px;
        margin-top:28px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .shortcut::after {
        width:19px;
        height:19px;
    }
    #contents .hubWrap .hub:nth-of-type(1) a {
        background-size: 486px 380px;
        background-position: center bottom;
    }
    #contents .hub a {
        padding:30px 32px;
        background-position: right 20px bottom 20px;
        background-size:120px;
    }

}
@media (max-width: 768px){
    #contents {
        margin:28px auto 52px;
    }
    #contents .introWrap strong {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.52px;
    }
    #contents .introWrap p {
        width:280px;
        font-size: 15px;
        font-weight: 500;
        line-height: 130%; /* 19.5px */
        letter-spacing: -0.3px;
        margin-bottom:22px;
    }
    #contents .hubWrap {
        display: flex;
        flex-direction: column;
    }
    #contents .hubWrap .hub {
        height:130px;
    }
    #contents .hubWrap .hub:first-of-type {
        height:214px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .title {
        font-size: 22px;
        font-weight: 700;
        line-height: 150%; /* 33px */
        letter-spacing: -0.66px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .desc {
        font-size: 14px;
        font-weight: 500;
        line-height: 150%; /* 21px */
        letter-spacing: -0.14px;
        margin-top:5px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .shortcut {
        font-size: 15px;
        font-weight: 600;
        line-height: 150%; /* 22.5px */
        margin-top:75px;
    }
    #contents .hubWrap .hub:nth-of-type(1) .shortcut::after {
        width:14px;
        height:14px;
    }
    #contents .hubWrap .hub:nth-of-type(1) a {
        background-size:275px 215px;
        background-position:right -24px top 60px;
    }
    #contents .hub a {
        padding:22px 28px 18px;
        background-size:100px;
        background-position:right 20px center;
    }
    #contents .hub:first-of-type a {
        padding:32px 24px;
    }
    #contents .hub .titleArea .title {
        font-size: 20px;
        font-weight: 700;
        line-height: 150%; /* 30px */
        letter-spacing: -0.4px;
    }
    #contents .hub .titleArea .sub {
        font-size: 20px;
        font-weight: 700;
        line-height: 150%; /* 30px */
        letter-spacing: -0.4px;
    }

}



/*=================
    footer
    =================*/
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    max-width:1600px;
    margin:0 auto 24px;
}
footer h2 a {
    width:138px;
    height:24px;
    background:url('../../../images/web/reb/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/web/reb/ico-instagram.svg') no-repeat;
    background-size:contain;
}
.snsWrap li:nth-of-type(2) a {
    background:url('../../../images/web/reb/ico-youtube.svg') no-repeat;
    background-size:contain;
}
.snsWrap li:nth-of-type(3) a {
    background:url('../../../images/web/reb/ico-kakao.svg') no-repeat;
    background-size:contain;
}
.snsWrap li:nth-of-type(4) a {
    background:url('../../../images/web/reb/ico-facebook.svg') no-repeat;
    background-size:contain;
}

@media (max-width: 768px){
    footer {
        flex-direction: column;
        align-items: flex-start;
    }
    footer .infoWrap p {
        font-size: 13px;
        font-weight: 400;
        line-height: 150%; /* 19.5px */
    }
    .snsWrap {
        margin-top:32px;
    }
}