:root{

    --red : #e60021;
    
}

/* 임시폰트 */
html{font-family: 'Pretendard';}

.wrap[max="1824"] {max-width: 1824px;}
.wrap[max="1680"] {max-width: 1680px;}
.wrap[max="1600"] {max-width: 1600px;}
.wrap[max="1560"] {max-width: 1560px;}
.wrap[max="1440"] {max-width: 1440px;}
.wrap[max="1280"] {max-width: 1280px;}
.wrap[max="800"] {max-width: 800px;}

.wrap{width: 95%;margin: 0 auto;position: relative;z-index: 1;}

@media screen and (max-width:820px) {.wrap{width: 90%;}} 


/* 헤더 */
header{position: fixed; top: 0;left: 0;width: 100%;z-index: 100;padding: 40px 0;box-sizing: border-box;color: #fff;}
header .wrap{display: flex;align-items: center;justify-content: space-between;}
header .logo{width: 56px;}
header .gnb ul{display: flex;align-items: center;gap: 25px;}
header .gnb ul li span{font-size: 18px;font-weight: 600;display: block;font-family: 'helvetica-lt-pro';}

header .hamMenu {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;
}

header.is-open .hamMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
header .hamMenu .wrap{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;padding-top: 140px;}
header .hamMenu ul{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;width: 100%;}
header .hamMenu ul li{border-bottom: 1px solid rgba(255, 255, 255, 0.3);width: 100%;}
header .hamMenu ul li:last-child{border-bottom: none;}
header .hamMenu ul li a span{font-size: 32px;font-weight: 600;display: block;font-family: 'helvetica-lt-pro';padding: 30px 0;box-sizing: border-box;}
header .ham{display: none;position: relative;}
header .ham i{display: none;position: relative;}
header .ham::before{
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}



@media screen and (max-width: 1024px) {
    header {padding: 30px 0;}
    /* header .logo {width: 150px;} */
    header .gnb ul li span {font-size: clamp(14px, 14/1024*100vw, 16px);}
}
@media screen and (max-width: 820px) {
    header .gnb {display: none;}

    header .hamMenu ul li a span{font-size: clamp(26px, 26 / 500 * 100vw, 32px);}

    header .ham {
        display: block;
        position: relative;
        width: 20px;
        height: 19px;
        cursor: pointer;
        z-index: 101; 
    }
    
    header .ham div {
        width: 20px;height: 2px;background-color: #fff;border-radius: 2px;margin-bottom: 5px;
    }
    header .ham div:last-child { margin-bottom: 0; }

    header .ham i {
        font-size: 24px; color:#fff; display:none;
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    }

    header.is-open .ham div { display: none; }
    header.is-open .ham i { display: block; }

}

@media screen and (max-width: 500px) {
    header .hamMenu ul li a span{font-size: clamp(22px, 22 / 500 * 100vw, 26px);
    padding: 25px 0;
    }
}


/* 푸터 */
footer{padding-top: 80px;padding-bottom:30px;box-sizing: border-box;background-color: #000;} 
footer .cont{}

/* 푸터 top */
footer .cont .top{display: flex;align-items: flex-end;justify-content: space-between;padding-bottom: 45px;box-sizing: border-box;}
footer .cont .left{display: flex;flex-direction: column;gap: 50px;}
footer .cont .left .info{display: flex;flex-direction: column;gap: 12px;}
footer .cont .left .info p{display: flex;font-size: 16px;font-weight: 300;letter-spacing: -0.02em;}
footer .cont .left .info em{color: #7c7c7c;min-width: 80px;font-family: 'helvetica-lt-pro';}
footer .cont .left .info span{color: #fff;display: block;}

footer .cont .right{}
footer .cont .right .btnBx{}
footer .cont .right .btnBx a{display: flex;align-items: center;gap: 10px;padding: 1.4em 3em;;box-sizing: border-box;background-color: var(--red);border-radius: 9px;color: #fff;font-size: 14px;}
footer .cont .right .btnBx a span{}

/* 푸터 bottom */
footer .cont .bottom{
    display: flex;align-items: flex-end;justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);padding-top: 15px;box-sizing: border-box;}
footer .cont .copy{}
footer .cont .copy p{font-size: 14px;font-weight: 300;color: #7c7c7c;letter-spacing: -0.03em;font-family: 'helvetica-lt-pro';}
footer .cont .sns{}
footer .cont .sns ul{display: flex;align-items: center;gap: 20px;}
footer .cont .sns ul li{color: #fff;}
footer .cont .sns ul li a{display: flex;align-items: center;justify-content: center;
    background-color: #969696;
    width: 38px;height: 38px;border-radius: 50%;
}
footer .cont .sns ul li a i{font-size: 20px;}
footer .cont .sns ul li a span{font-size: 18px;font-weight: 300;}

@media screen and (max-width: 1024px) {
    footer {padding-top: 60px;}
    footer .cont .right .btnBx a {font-size: clamp(14px, 14 / 820 * 100vw, 16px);}
    footer .cont .left .info p {font-size: clamp(14px, 14 / 820 * 100vw, 16px);}
}
@media screen and (max-width: 820px) {
    footer {padding-top: 50px;}
    footer .cont .top {flex-direction: column; align-items: flex-start; gap: 50px; padding-bottom: 40px;}
    footer .cont .left {gap: 35px;}
    footer .cont .bottom {flex-direction: column-reverse; align-items: center; padding-top: 30px; gap: 10px;}
    footer .cont .copy p { line-height: 1.4;text-align: center; word-break: keep-all; font-size: clamp(14px, 16/480*100vw, 16px);}
}
@media screen and (max-width: 500px) {
    footer .cont .top {gap: 35px;}
    footer .cont .left .info {gap: 12px}
    footer .cont .left .info p {flex-direction: column; gap: 7px;}
    footer .cont .right {width: 100%;}
    footer .cont .right .btnBx a {justify-content: center;}
}


aside{
    position: fixed;
    top: 50%; right: 0;
    background-color: var(--red);
    z-index: 999;
    transform-origin: center top;
    transform: translateX(50%) translateY(-50%) rotate(90deg);
    padding: 0 15px;
    box-sizing: border-box;
}
aside .logoBx{
    position: absolute;
    top: 0.4vw; left: .5vw;
    width: 30px;
    transform: rotate(-90deg);
}
aside .aside_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 50px;
}
aside .aside_wrap a{
    width: 102px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
}
aside .aside_wrap a i{
    rotate: -135deg;
    font-size: 16px;
}

aside .st0{fill:#EEEFEF;}
aside .st1{fill:#FEFEFE;}
aside .st2{display:none;}
aside .st3{display:inline;}
aside .st4{fill:#AA182C;}
aside .st5{display:inline;fill:#EA0029;}


@media screen and (max-width: 820px){
    aside {display: none;}
}