:root {
    --FONT-SIZE : 14px;
    --FONT-FAMILY : "neue-haas-grotesk-display", "Pretendard", sans-serif;
    --FONT-WEIGHT : 500;
    --FONT-COLOR : rgba(0, 0, 0, 0.85);
    --FONT-COLOR-INVERT : #ffffff;

    --HEADER-HEIGHT: 100px;
    --COMMON-PADDING: 15px;
    --COMMON-PADDING-20: 20px;
    --COMMON-PADDING-50: 50px;
    --COMMON-PADDING-60: 60px;
    --COMMON-PADDING-100: 100px;
    --COMMON-PADDING-120: 120px;
    --COMMON-PADDING-150: 150px;
    --COMMON-PADDING-200: 200px;
    --COMMON-PADDING-350: 350px;

    --BASE-COLOR: #ffffff;
    --BASE-COLOR-INVERT: #000000;
    --COLOR-EF: #efefef;
    --COLOR-E0: #e0e0e0;
    --COLOR-B0: #b0b0b0;
}

/* IOS DEFAULT CSS */
    input,button,select,textarea
    {outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
    #root a:active,#root a:focus,#root input:active,#root input:focus,#root button:active,#root button:focus,#root select:active,#root select:focus,#root textarea:active,#root textarea:focus
    {outline: none !important; box-shadow: none !important;}


/* COMMON */
    * {box-sizing: border-box;}
    html,body
    { width: 100%; font-size: var(--FONT-SIZE); line-height: 1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust: none; -o-text-size-adjust: none; }
    body,p,strong,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select
    { margin:0; padding:0; font-family:var(--FONT-FAMILY); font-weight:var(--FONT-WEIGHT); }
    body { position: relative; background-color: var(--BASE-COLOR); color:var(--FONT-COLOR); overflow-x: hidden; }
    table { border-collapse: collapse; }
    img,fieldset { border: 0; }
    img { vertical-align: top; }
    ul,ol,li { list-style: none; padding: 0; margin: 0; }
    em,address { font-style: normal; }
    a { color: inherit; text-decoration: none; }
    a:hover,a:visited,a:link,a:active { color: inherit; text-decoration: none; }

    label {
        position: relative;
        display: inline-block;
        width: fit-content;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    section { position: relative; }
    main { position: relative; }

    .bold {
        font-weight: bold;
    }

    .thumb {
        img {
            width: 100%;
        }

        &.cover {
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .figtree {
        font-family: 'Figtree';
    }

/* font-size */
    .font-size-160 {font-size: 160px;}
    .font-size-120 {font-size: 120px;} .font-size-100 {font-size: 100px;} .font-size-80 {font-size: 80px;} 
    .font-size-70 {font-size: 70px;} .font-size-60 {font-size: 60px;} .font-size-50 {font-size: 50px;} .font-size-40 {font-size: 40px;}
    .font-size-34 {font-size: 34px;} .font-size-30 {font-size: 30px;} .font-size-28 {font-size: 28px;} .font-size-24 {font-size: 24px;}
    .font-size-20 {font-size: 20px;} .font-size-18 {font-size: 18px;} .font-size-16 {font-size: 16px;} .font-size-14 {font-size: 14px;}

/* padding class 설정 */
    .pt-10 {padding-top:10px !important;} .pb-10 {padding-bottom:10px !important;}
    .pt-20 {padding-top:20px !important;} .pb-20 {padding-bottom:20px !important;}
    .pt-30 {padding-top:30px !important;} .pb-30 {padding-bottom:30px !important;}
    .pt-50 {padding-top:50px !important;} .pb-50 {padding-bottom:50px !important;}
    .pt-100 {padding-top:100px !important;} .pb-100 {padding-bottom:100px !important;} 
    .pt-130 {padding-top:130px !important;} .pb-130 {padding-bottom:130px !important;} 
    .pt-150 {padding-top:150px !important;} .pb-150 {padding-bottom:150px !important;} 
    .pt-200 {padding-top:200px !important;} .pb-200 {padding-bottom:200px !important;}

/* margin class 설정 */
    .mt-10 {margin-top:10px !important;} .mb-10 {margin-bottom:10px !important;}
    .mt-20 {margin-top:20px !important;} .mb-20 {margin-bottom:20px !important;}
    .mt-30 {margin-top:30px !important;} .mb-30 {margin-bottom:30px !important;}
    .mt-50 {margin-top:50px !important;} .mb-50 {margin-bottom:50px !important;}
    .mt-100 {margin-top:100px !important;} .mb-100 {margin-bottom:100px !important;}
    .mt-200 {margin-top:200px !important;} .mb-200 {margin-bottom:200px !important;}

/* 반응형에 따른 br 설정 */
    br.pc {display: inline;}
    br.m {display: none;}
    @media (max-width:1023.98px){
        br.pc {display: none;}
        br.m {display: inline;}
    }

/* Scrollbar */
    body::-webkit-scrollbar { width: 6px; }
    body::-webkit-scrollbar-track { background-color: var(--BASE-COLOR); }
    body::-webkit-scrollbar-thumb { background-color: var(--BASE-COLOR-INVERT); }
    body::-webkit-scrollbar-thumb:hover { background-color: var(--BASE-COLOR-INVERT); }

    body.open::-webkit-scrollbar-track { background-color: var(--BASE-COLOR) !important; }
    body.open::-webkit-scrollbar-thumb { background-color: var(--BASE-COLOR) !important; }

/* 애니메이션 */
    .dot {
        position: relative;
        top: 0;
        transition: 0.6s;
        display: inline-block;
        margin-left: 22px;
        vertical-align: middle;

        i {
            display: block;
            background: #c9252c;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            transition: 0.6s;
            animation: dots2 2s alternate infinite;
            animation-delay: 0.4s;
            transition: all .35s cubic-bezier(0.33, 1, 0.68, 1);
        }

        &::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: -11px;
            background: #c9252c;
            border-radius: 50%;
            animation: dots2 2s alternate infinite;
            transition: all .35s cubic-bezier(0.33, 1, 0.68, 1);
        }

        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: -6px;
            background: #c9252c;
            border-radius: 50%;
            animation: dots2 2s alternate infinite;
            animation-delay: 0.2s;
            transition: all .35s cubic-bezier(0.33, 1, 0.68, 1);
        }
    }

    @keyframes dots2 {
        0% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes move-left {
        to { transform: translateX(calc((-100% - 30px) / 5)); }
    }