@import url(default.css);
@import url(reset.css);
@import url(layout.css);

#hd_login_msg{
    display: none;
}

#hd_login_msg{
    display: none;
}

.tap_sec{
    margin: 10rem auto;
    font-family: "SUITE Variable", Sans-serif;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;}

.tap_sec .main_page_btn,
.tap_sec .admin_page_btn {
    display: block;
    padding: 1.5rem 2rem;
    border-radius: 2rem;
    width: 18%;
    margin: 3rem auto}

.tap_sec .main_page_btn{
    border: 0.1rem solid #999999;
}

.tap_sec .admin_page_btn{
    color: #fbfbfb;
    background-color: #0a2b1d;
}

.tap_sec span{
    display: block;
    font-weight: 400;
    font-size: 1.6rem;
    margin-top: 0.5rem;}

.tap_sec .cs_info{
    margin-top: 7rem;
}

.tap_sec .cs_info .cs_title{
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.sub_tit{
    font-size: 3.8rem;
    font-weight: 700;
    margin-top: 7rem;
    margin-bottom: 6rem;
    position: relative;
    text-align: center;
}

.sub_tit::after{
    position:absolute;
    bottom: -2rem;
    left: calc(50% - 2rem);
    background-color: #ccc;
    width: 4rem;
    height: 0.1rem;
    content: "";

}

.sec_tit_kr,
.sec_tit_en{
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
}

.sec_tit_en{
    margin-top: 1rem;
}
.msn_stmt span{
    text-align: center;

    display: block;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 4rem;
    margin-bottom: 7rem;
    line-height: 3rem;
    position: relative;}


.msn_stmt span:after{
    position:absolute;
    bottom: -4rem;
    left: calc(50% - 2rem);
    background-color: #ccc;
    width: 4rem;
    height: 0.1rem;
    content: "";
}
.purpose{
    margin: 0 30rem 15rem 30rem;
}
.purpose .sec_tit_en{
    margin-bottom: 10rem
}
.purpose ul{
    display: grid;
    grid-gap: 10rem;

}
.info_tit{
    font-size: 2rem;
    font-weight: 700;
    line-height: 3rem;
}
.info_txt{
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 2rem;
    line-height: 3rem;
    position: relative;
}
.info01 .info_txt:after{
    position: absolute;
    top: -16rem;
    left: 0;
    width: 35rem;
    height: 35rem;
    background-image: url('./../images/info01.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.info02 .info_txt:after{
    position: absolute;
    top: -18rem;
    left: -8rem;
    width: 35rem;
    height: 35rem;
    background-image: url('./../images/info02.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.info03 .info_txt:after{
    position: absolute;
    top: -15rem;
    left: -7rem;
    width: 32rem;
    height: 32rem;
    background-image: url('./../images/info03.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.info04 .info_txt:before{
    position: absolute;
    top: -15rem;
    left: -7rem;
    width: 32rem;
    height: 32rem;
    background-image: url('./../images/info04.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.info05 .info_txt:after{
    position: absolute;
    top: -12rem;
    left: -4rem;
    width: 32rem;
    height: 32rem;
    background-image: url('./../images/info06.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
}

.purpose ul li:nth-child(even){
    display: grid;
    justify-content: end;
    grid-template-columns: 0.6fr 1fr;
    grid-template-rows: 1fr auto;
    & .info_tit{
        grid-column-start: 2;
        grid-row-start: 1;
    }
    & .info_txt{
        grid-column-start: 2;
        grid-row-start: 2; }
}

.purpose ul li:nth-child(odd){
    display: grid;
    justify-content: end;
    grid-template-columns: 1fr 0.6fr;
    grid-template-rows: 1fr auto;
    & .info_tit{
        grid-column-start: 1;
        grid-row-start: 1;
    }
    & .info_txt{
        grid-column-start: 1;
        grid-row-start: 2; }
}

@media screen and (max-width: 1600px) {
    .purpose{
    margin: 0 20rem 15rem 20rem;
    }
}
@media screen and (max-width: 1440px) {
    .purpose{
        margin: 0 15rem 15rem 15rem;
    }
}

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

    html,
    body {
        font-size: 9px;
    }
}

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

    html,
    body {
        font-size: 8px;
    }
    .purpose{
        margin: 0 auto 10rem auto;
    }
    .purpose ul li:nth-child(even),
    .purpose ul li:nth-child(odd)
    {
        display: inline-block;
    }

}


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

    html,
    body {
        font-size: 7px;
    }
}


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

    html,
    body {
        font-size: 6px;
    }
}