:root{
    --header-height:8rem;
    --header-font-size: clamp(2rem, 2vw + 1rem, 2.5rem);  /* 20px ~ 30px */
    --body-font-size: clamp(1.4rem, 1vw + 0.5rem, 2rem); /* 14px ~ 20px */
    --footer-font-size: clamp(1rem, 0.5vw + 0.5rem, 1.6rem); /* 10px ~ 16px */
    --gnb-gap:clamp(3rem,1vw + 0.5rem, 4rem);
    --layout-padding:0 6rem;
    --full-max-with:1920px;
}



*{
    box-sizing: border-box;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    word-break: keep-all;
    margin: 0;padding: 0;
}
html,body{display:block;position: relative;width: 100%;overflow-x: hidden;}
html{
    font-size: 62.5%;  /* 1rem = 10px 기준설정값  */
    height: 100%;
}
body{
    background: rgba(0,0,0,0.8); 
    max-width: var(--full-max-with);
    width:100%;
    margin: 0 auto;
    font-size: var(--body-font-size);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color:#fff;
    min-height: 100%;
}
main{width: 100%;}


.gmarketSans{ font-family: 'GMarketSans';font-weight: 300;}
.pretendard{font-family: 'Pretendard';font-weight: 400;}



/* skip-menu */
#skip-menu{
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 999999;
}
#skip-menu .skip-link{position:absolute; top:-100px; left: 0; padding: 20px; background-color: #fff;white-space: nowrap;}
#skip-menu .skip-link:focus{ position:absolute;  top:0}



/* sub content common */
.sub-content{padding: 15rem 0;}
.sc-con{padding: var(--layout-padding);}
.sc-title{font-size: 6rem;font-family: "Pretendard"; font-weight: bold;letter-spacing: 0.2rem; margin: 15rem 0 10rem 0;}

/* contact-skip_btn */
.contact-skip_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 2rem;
    bottom: 10%;
    position: fixed;
    z-index: 80;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    /* 배경 그라디언트  */
    background:linear-gradient(135deg,#A8E278 30%,#FFC309 );
    background-size: 300%;
    background-position: 0% 0%;
    transform: scale(1);
    transition: background-position 0.3s ease;
    overflow: hidden;
  
}

@keyframes gradient-ani {
    0%{ background-position: 0% 0%;}
    100%{ background-position: 100% 100%;}
}

.contact-skip_btn:hover,
.contact-skip_btn:focus {
    transform: scale(1.2);
    animation:gradient-ani;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


.contact-skip_btn .phone{
    user-select: none; /*커서 깜박임 방지*/
    display: inline-block; width: 25px;height: 25px; 
    transform-origin: center center; 
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00130463 34.4158V41.3358C-0.00130844 41.9782 0.130547 42.6141 0.388416 43.2027C0.64629 43.7913 1.0245 44.3197 1.49882 44.754C1.97314 45.1883 2.53311 45.5189 3.14288 45.7247C3.75264 45.9305 4.39876 46.007 5.03984 45.9492C12.1519 45.1779 18.9836 42.7524 24.9859 38.8677C30.5703 35.3262 35.3049 30.601 38.8535 25.0276C42.7595 19.01 45.1904 12.1587 45.949 5.02877C46.0068 4.3909 45.9308 3.74802 45.726 3.14105C45.5211 2.53408 45.1919 1.97633 44.7593 1.5033C44.3266 1.03028 43.8 0.652342 43.213 0.393562C42.6259 0.134783 41.9914 0.000826785 41.3496 0.000223637H34.4159C33.2942 -0.0107941 32.2068 0.385619 31.3563 1.11558C30.5058 1.84553 29.9503 2.85922 29.7934 3.9677C29.5007 6.18226 28.958 8.35667 28.1755 10.4495C27.8645 11.2751 27.7972 12.1723 27.9816 13.035C28.1659 13.8976 28.5941 14.6894 29.2155 15.3165L32.1508 18.246C28.8606 24.0209 24.0696 28.8024 18.2833 32.0861L15.348 29.1566C14.7196 28.5364 13.9262 28.109 13.0619 27.925C12.1976 27.7411 11.2985 27.8082 10.4713 28.1186C8.37434 28.8995 6.19561 29.4412 3.97666 29.7332C2.85393 29.8913 1.82858 30.4557 1.09561 31.3191C0.362637 32.1824 -0.0268211 33.2845 0.00130463 34.4158Z' fill='white'/%3E%3C/svg%3E%0A");
    }


.contact-skip_btn:hover .phone,.contact-skip_btn:focus .phone{
    animation: phone-ring 0.6s cubic-bezier(.68,-1,.90,1.6) infinite;}

@keyframes phone-ring {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(-15deg); }
    30%  { transform: rotate(12deg); }
    50%  { transform: rotate(-8deg); }
    70%  { transform: rotate(6deg); }
    90%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}


@media (max-width: 1100px) {
    :root {
        --layout-padding:0 3rem;
    }
    .sub-content{padding-top: 9rem;}
    .sc-title{margin-bottom:8rem;font-size: 4rem}

}
@media (max-width: 768px) {
    :root {
        --header-height: 7rem; 

    }
}

@media (max-width: 400px) {
    :root {
        --layout-padding:0 2rem;
    }
}