/* 공통 */
.t-public h1{
    font-size: 5.2rem; /*52px*/
}
.t-public h2{
    font-size: 4.8rem; /*48px*/
}
.t-public h3 {
    font-size: 2.8rem; /*32px*/
}
.t-public h4 {
    font-size: 2.2rem; /*22px*/
}
.t-public .sub-text {
    font-size:2.0rem;
}

.space-box {
    padding:160px 0;
}

/* 컨텐츠 영역 */
.cnt-area {
    box-sizing: border-box;    
    padding: 160px 0;
}
/* 버튼 타입 */
.btn-type {
    height: 80px;
    width: 360px;
    font-size: 2.4rem;
    border-radius: 999px;
    margin-top: 6vh;
}
.btn-type-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #0E0E0E;
    box-sizing: border-box;
}
.btn-type-1:hover{
    background: #005BE3;
}
.btn-type-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #121212;
    border : 1px solid #121212;
    box-sizing: border-box;
}
.btn-type-2:hover{
    color: #fff;
    background: #121212;
}
.btn-type-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #005BE3;
    box-sizing: border-box;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), 
    linear-gradient(to bottom right, #009D86, #005BE3);
    background-origin: border-box;
    background-clip: content-box, border-box;
    transition: all 0.3s;
}
.btn-type-3:hover {
    background: linear-gradient(to bottom right, #009D86, #005BE3);
    color: #fff;
}
.btn-type-3 .arrow-ico {
    width: 20px;
    right: 30px;
}
.btn-type-3 .arrow-ico img.on {
    display: none;
}
.btn-type-3:hover .arrow-ico img {
    display: none;
}
.btn-type-3:hover .arrow-ico img.on {
    display: block;
}

.btn-type-3-1 {
    background-image: linear-gradient(#fafafa, #fafafa), 
    linear-gradient(to bottom right, #009D86, #005BE3);
}

.btn-type-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
}
.btn-type-4:hover{
    background: #fff;
    color:#000
}

/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* 헤더 영역 */
.header-area {
    height: 96px;
    transition: all 0.3s;
    background: transparent;
}
.header-area.active {
    /* background: rgba(0, 0, 0, 0.2) */
    background: #fff;
}
.header-area .logo-box {
    width: 172px;
}
.header-area .logo-box img.on {
    display: none;
}
.header-area.active .logo-box img {
    display: none;
}
.header-area.active .logo-box img.on {
    display: block;
}
.header-area .menu-box {
    margin-right: 48px;
}
.header-area .menu-box li:not(:first-child) {
    margin-left: 36px;
}
.header-area .menu-box li a {
    font-size: 18px;
    box-sizing: border-box;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    color: #ddd
}
.header-area .menu-box li a.set-c {
    color: #999;
}

.header-area.active .menu-box li a {
    color: #000;
}
.header-area .menu-box li a.active {
    color: #005BE3;
    font-family: "AppleSDGothicNeoB";
    border-bottom: 1px solid #005BE3;
}
.header-area .menu-box li a:hover {
    color:#005BE3;
}
.header-area .support-btn {
    width: 180px;
    height: 50px;
    font-size: 18px;
}
.header-area .support-btn .arrow-ico {
    width: 16px;
    right: 16px;
}
.header-area .ham-btn {
    width: 32px;
    right: 28px;
    display: none;
}
.header-area .ham-btn img.on {
    display: none;
}
.header-area.active .ham-btn img {
    display: none;
}
.header-area.active .ham-btn img.on {
    display: block;
}


/* ------------------------------------------------------------------------------- */
/* 사이드 메뉴 영역 */
.side-menu-area {
    top: 0;
    right: -150%;
    transition: all 0.3s;
    box-sizing: border-box;
}
.side-menu-area.active {
    right: 0;
}
.side-menu-area .top-box {
    height: 80px;
    box-sizing: border-box;
    padding: 0 28px;
}
.side-menu-area .top-box .logo-box {
    width: 216px;
}
.side-menu-area .top-box .x-btn {
    width: 32px;
}
.side-menu-area .middle-box .menu-box-1 {
    box-sizing: border-box;
    padding: 44px 0;
}
.side-menu-area .middle-box .menu-box-1 li {
    text-align: center;
}
.side-menu-area .middle-box .menu-box-1 li:not(:first-child) {
    margin-top: 36px;
}
.side-menu-area .middle-box .menu-box-1 li a {
    font-size: 18px;
    color: #000;
    display: inline-block;
    box-sizing: border-box;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
}
.side-menu-area .middle-box .menu-box-1 li a.active {
    color: #005BE3;
    border-bottom: 1px solid #005BE3;
}
.side-menu-area .middle-box .support-btn {
    width: 180px;
    height: 50px;
    font-size: 18px;
    margin: 0 auto;
}
.side-menu-area .middle-box .support-btn .arrow-ico {
    width: 16px;
    right: 16px;
}

/* ------------------------------------------------------------------------------- */
/* 메인 비주얼 영역 */
.text-box-m{
    display: none;
}
.text-box-pc{
    display: block;
}
.main-visual-area {
    /* margin-top:-100px; */
}
.main-visual-area .down-btn {
    text-align: center;
    margin-bottom: 10px;
    width: 32px;
    height: 32px;
    left:50%;
    top:92%;
    cursor: pointer;
}
.main-visual-area .text-area {
    /* height: 100vh; */
    top: 0;
    left: 0;
    
}
.main-visual-area .text-area.active {
    position: absolute;
    top: auto;
    bottom: 0;
}
.main-visual-area .text-area .text-box {
    position: absolute;
    lefT:0;
    top: 40%;
    white-space: nowrap;
    color:#fff;
    text-align: center;
}
.main-visual-area .text-area .text-box .text-1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
    text-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05);

}
.main-visual-area .text-area .text-box .text-2 {
    font-size: 6.0rem;
    font-family: Pretendard-Bold;
    text-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05);

}

.main-bg-1 {
    background: url(/img/main-bg-1.jpg) no-repeat center center/cover;
}
.main-bg-2 {
    height: 100%;
    background: url(/img/main-bg-2.jpg) no-repeat center center/cover;
}

.main-bg-3 {
    height: 100%;
    background: url(/img/main-bg-3.jpg) no-repeat center center/cover;
}
.main-bg-4 {
    height: 100%;
    background: url(/img/main-bg-4.jpg) no-repeat center center/cover;
}
/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* 푸터 영역 */
.footer-area {
    box-sizing: border-box;
    padding: 12px 0 24px 0;
    border-top:1px solid #eee
}
.footer-area .ft-box .logo-box {
    width: 154px;
}
.footer-area .ft-box h1 {
    font-size: 16px;
    margin-top: 20px;
}
.footer-area .ft-box p {
    font-size: 13px;
    margin-top: 12px;
}


/* ------------------------------------------------------------------------------- */
/* ------------------------------------ABOUT-------------------------------------- */
/* ------------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------------- */

/* ~1320 */
@media (max-width:1320px) {
    .con {
        padding: 0 32px;
    }
    .t-public h1{
        font-size: 4.8vw; /*60px*/
    }
    .t-public h2{
        font-size: 3.6vw; /*48px*/
    }
    .t-public h3 {
        font-size: 2.8vw; /*32px*/
    }
    .t-public h4 {
        font-size: 1.6vw; /*24px*/
    }
    .t-public .sub-text {
        font-size:1.8rem
    }
}
/* //~1320 */

/* ------------------------------------------------------------------------------- */
/* ~1200 */
@media (max-width:1200px) {

    /* 공통 */

    .main-title {
        font-size: 5.0vw;
    }
    .t-public h1{
        font-size: 4.8vw; /*60px*/
    }
    .t-public h2{
        font-size: 4.6vw; /*48px*/
    }
    .t-public h3 {
        font-size: 3.2vw; /*32px*/
    }
    .t-public h4 {
        font-size: 1.7vw; /*24px*/
    }
    .t-public .sub-text {
        font-size:1.7rem
    }
    
    /* 컨텐츠 영역 */
    .cnt-area {
        padding: 148px 0;
    }

    /* 헤더 영역 */
    .header-area {
        height: 80px;
    }
    .header-area .support-btn {
        display: none;
    }
    .header-area .menu-box {
        display: none;
    }
    .header-area .ham-btn {
        display: block;
    }


    /* 메인 비쥬얼 영역 */
    .main-visual-area .text-area .text-box {
        /* left: 12%; */
    }
    .main-visual-area .text-area .text-box .text-1 {
        font-size: 3.6rem;
    }
    .main-visual-area .text-area .text-box .text-2 {
        font-size: 4.8rem;
    }

    /* 푸터 영역 */
    .footer-area .con {
        align-items: flex-end;
    }
    .footer-area .ft-box .logo-box {
        width: 154px;
    }
    .footer-area .ft-box h1 {
        font-size: 14px;
    }
    .footer-area .ft-box p {
        font-size: 12px;
    }

}
/* //~1200 */

/* ------------------------------------------------------------------------------- */

/* ~920 */
@media (max-width:920px) {
    .t-public h1{
        font-size: 4.4rem; /*60px*/
    }
    .t-public h2{
        font-size: 3.8rem; /*48px*/
    }
    .t-public h3 {
        font-size: 2.8rem; /*32px*/
    }
    .t-public h4 {
        font-size: 1.8rem; /*24px*/
    }
    .t-public .sub-text {
        font-size:1.6rem
    }
    .main-visual-area .down-btn{
        display: none;
    } 

}
/* //~920 */

/* ------------------------------------------------------------------------------- */

/* ~767 */
@media (max-width:767px) {
    
    /* 공통 */
    /* .con {
        padding: 0 20px;
    } */
    .t-public h1{
        font-size: 3.8rem; /*60px*/
    }
    .t-public h2{
        font-size: 3.2rem; /*48px*/
    }
    .t-public h3 {
        font-size: 2.2rem; /*32px*/
    }
    .t-public h4 {
        font-size: 1.7rem; /*24px*/
    }
    .t-public .sub-text {
        font-size:1.5rem
    }
    
    .space-box {
        padding:100px 0;
    }
    .btn-type {
        height: 68px;
        width: 320px;
        font-size: 2.0rem;
    }

    /* 헤더 영역 */
    .header-area {
        height: 68px;
    }
    .header-area .logo-box {
        width: 128px;
    }
    .header-area .ham-btn {
        width: 28px;
    }
    /* 사이드 메뉴 영역 */
    .side-menu-area .top-box {
        height: 68px;
        padding: 0 20px;
    }
    .side-menu-area .top-box .logo-box {
        width: 154px;
    }
    .side-menu-area .top-box .x-btn {
        width: 28px;
    }
    /* 컨텐츠 영역 */
    .cnt-area {
        padding: 100px 0;
    }
    .cnt-area .title-box h1 {
        font-size: 28px;
        line-height: 140%;
    }
    .cnt-area .title-box h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    /* 메인 비쥬얼 영역 */
    .main-visual-area .text-area .text-box {
        top:42%;
    }
    .main-visual-area .text-area .text-box .text-1 {
        font-size: 4vw;
    }
    .main-visual-area .text-area .text-box .text-2 {
        font-size: 6vw;
    }
    /* 서브 비주얼 영역 */
    .sub-visual-area .text-box{
        padding:20px 0;
    }

}
/* //~767 */


/* ~ 540*/

@media (max-width:540px) {
    /*공통*/
    .t-public h1{
        font-size: 6vw; /*60px*/
    }
    .t-public h2{
        font-size: 2.2rem; /*48px*/
    }
    .t-public h3 {
        font-size: 1.8rem; /*32px*/
    }
    .t-public h4 {
        font-size: 1.4rem; /*24px*/
    }
    .t-public .sub-text {
        font-size:3.6vw
    }
    .space-box {
        padding:80px 0;
    }

    .btn-type {
        height: 52px;
        width: 300px;
        font-size: 1.8rem;
        margin-top:40px
    }
    .cnt-area {
        padding: 80px 0;
    }
    /*메인*/
    .text-box-m{
        display: block;
    }
    .text-box-pc{
        display: none;
    }
    .main-visual-area .text-area .text-box .text-1 {
        font-size:5vw;
    }
    .main-visual-area .text-area .text-box .text-2 {
        font-size: 6vw;
    }
    .main-visual-area .text-area .text-box {
        padding:0 20px 0 0;
        top: 40%;
    }
}
@media (max-width:400px) {
    .main-visual-area .text-area .text-box .text-1{
        font-size: 1.8rem;
    }

}