@charset "utf-8";

/* ==========================================================================
    기존 코드
   ========================================================================== */

/* 공통 레이아웃 */
.inner-lg {
    position: relative; width: 100%; /* max-width: 1780px; */ margin: 0 auto; padding: 0 70px;
    
    @media (width <= 1800px) {
        padding: 0 20px;
    }
}
.inner-sm {
    position: relative; width: 100%; max-width: 1500px; margin: 0 auto;
    
    @media (width <= 1560px) {
        padding: 0 20px;
    }
}


/* header */
#header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 3001; background-color: rgba(0,0,0,0.2);

    & .inner-lg {
        display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: none; padding: 0 70px; height: var(--header-height); opacity: 1; transition: all 0.2s ease;
        &::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 0; background: #fff; opacity: 0; transition: all 0.2s ease;}

        & .hm {
            position: relative; z-index: 10;
            /* ▼ 모바일 화면 터치 사용성 개선 위해 영역 확장 용으로 추가 작성 */
            &:before{content: "터치 사용성 개선"; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); height: calc(100% + 20px); cursor: pointer;}

            & .hm-bt {
                display: flex; align-items: center; gap: 10px; cursor: pointer;
                
                & .ico {
                    position: relative; width: 20px; height: auto; aspect-ratio: 1; background-color: transparent;
                    & span {
                        position: absolute; left: 50%; transform: translateX(-50%); display: block; width: 100%; height: 1px; background: #fff; transition: 0.2s;
                        &:nth-child(1) {top: 7px;}
                        &:nth-child(2) {top: 12px;}
                    }
                }
            }

            &.on{
                & .hm-bt{
                    & .ico{
                        & span{
                            &:nth-child(1){top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
                            &:nth-child(2){top: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
                            #header.white & {background: #fff;}
                        }
                    }
                }
            }
        }
        & .logo {
            position: absolute; top: 50%; left: 50%;

            & a {
                position: absolute; top: 50%; left: 50%; display: block; transition: all 0.2s ease;
                &.txt {width: 140px; transform: translate(-50%, -50%);}
                &.symbol {width: 42px; transform: translate(-50%, calc(-50% - 20px)); opacity: 0;}
                &:before{content: ""; position: absolute; inset: -12px; opacity: 0;}

                & img {display: block; width: 100%; filter: brightness(0) invert(1);}
            }
        }
    }
    & .snb {
        position: fixed; top: 0; left: 0; width: 100%; max-width: 390px; height: var(--view-height); z-index: 9; transform: translateX(-100%); transition: 0.6s;

        & .snb-wrap {
            position: relative; width: 100%; height: 100%; background: #a6a6a7;
            &:before{content: ""; position: absolute; top: 0; left: 0; width: 320px; height: 100%; background: #a6a6a7; transition: 0.6s;}
            &.expand:before{left: 100%;}
            
            & .snb-con {
                position: relative; height: 100%; display: flex; flex-direction: column; background: #a6a6a7;
                
                & .snb-top {
                    flex: 0 0 auto; min-height: 0; display: flex; justify-content: space-between; align-items: center; padding: 24px 70px 0;

                    & a {}
                    & a img {height: 13px;}
                    & button {
                        /* 미사용으로 변경 -> 숨겨만 놓음 */ 
                        &.close{position: relative; opacity: 0; visibility: hidden; pointer-events: none;}
                        /* ▼ 모바일 화면 터치 사용성 개선 위해 영역 확장 용으로 추가 작성 */
                        &:before{content: "터치 사용성 개선"; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); height: calc(100% + 20px); cursor: pointer;}
                    }
                    & button img {width: 15px; filter: brightness(0) invert(1);}
                }
                & .snb-list {
                    flex: 1; min-height: 0; padding: 55px 70px 40px; overflow-y: auto;
                    
                    & > ul {
                        display: flex; flex-direction: column; /* gap: 6px; */ gap: 0;
                        
                        & > li {
                            &.seperator{height: 15px; display: none;}
                            & .depth1 {
                                transition: 1.0s; opacity: 0;

                                & p {display: flex; flex-wrap: wrap; align-items: center; font-size: 16px; font-weight: 400; color: #ccc; /* color: #fff; */ cursor: pointer; padding: 12px 0;}
                                & p:not(:has(span)){padding: 15px 0;}
                                & p.ready{color: #fff;}
                                & p:after{content: ""; display: inline-block; margin: 0 0 0 auto; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #ccc; border-right: 2px solid #ccc; transform: rotate(45deg);}
                                & p.ready:after{border-color: #fff;}
                                & p > span{font-size: 24px;}
                                & p:hover{color: #fff;}
                                & p:hover:after{border-color: #fff;}
                                
                                &.on p {color: #fff !important; }
                                &.on p:after{border-color: #fff !important;}
                            }
                            &:nth-child(1) .depth1{transform: translateX(-20px);}
                            &:nth-child(2) .depth1{transform: translateX(-40px);}
                            &:nth-child(3) .depth1{transform: translateX(-60px);}
                            &:nth-child(4) .depth1{transform: translateX(-80px);}
                            &:nth-child(5) .depth1{transform: translateX(-100px);}
                            &:nth-child(6) .depth1{transform: translateX(-120px);}
                            &:nth-child(7) .depth1{transform: translateX(-140px);}
                            &:nth-child(8) .depth1{transform: translateX(-160px);}
                            &:nth-child(9) .depth1{transform: translateX(-180px);}
                            &:nth-child(10) .depth1{transform: translateX(-200px);}
                            
                            & .depth2 {
                                position: absolute; top: 0; left: 100%; 
                                display: flex; flex-direction: column; gap: 0; width: 320px; height: 100%; padding: 102px 70px 0 0; pointer-events: none; opacity: 0; transform: translateX(-60px);
                                transition: 0.6s; background-color: #a6a6a7;
                                
                                & a {display: block; font-size: 17px; font-weight: 400; color: #ccc; padding: 15px 0; opacity: 0;}
                                & a.ready{color: #fff;}
                                & a:hover {color: #fff;}
                                & a.on{color: #fff;}

                                & a:nth-child(1){transform: translateX(-20px);}
                                & a:nth-child(2){transform: translateX(-40px);}
                                & a:nth-child(3){transform: translateX(-60px);}
                                & a:nth-child(4){transform: translateX(-80px);}
                                & a:nth-child(5){transform: translateX(-100px);}
                                & a:nth-child(6){transform: translateX(-120px);}
                                & a:nth-child(7){transform: translateX(-140px);}
                                & a:nth-child(8){transform: translateX(-160px);}
                                & a:nth-child(9){transform: translateX(-180px);}
                                & a:nth-child(10){transform: translateX(-200px);}

                                &.on{
                                    pointer-events: initial; opacity: 1; transform: translateX(0px);
                                    & a{transform: translateX(0); opacity: 1; transition: transform 0.6s, opacity 0.6s;}
                                }
                            }
                        }
                    }
                }
            }
        }

        &.on{
            transform: translateX(0);
            & .snb-wrap{
                & .snb-con{

                    & .snb-list{
                        & > ul{
                            & > li{
                                & .depth1{
                                    transform: translateX(0) !important; opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* &.header-scroll {
        & .inner-lg {
            &::before {height: 100%; opacity: 1;}
            & .logo {
                & a {
                    &.txt {transform: translate(-50%, calc(-50% + 20px)); opacity: 0;}
                    &.symbol {transform: translate(-50%, -50%); opacity: 1;}
                }
            }
            & .hm{
                & .hm-bt{
                    & .ico{
                        & span{background-color: #111;}
                    }
                }
                &.on{
                    & .hm-bt{
                        & .ico{
                            & span{background-color: #fff; width: 90%;}
                        }
                    }
                }
            }
        }
    } */
    &.header-hide {
        & .inner-lg {opacity: 0; transform: translateY(-100%);}
    }
    &.white{
        background-color: #fff;
        & .inner-lg{
            & .hm{
                & .hm-bt{
                    color: #fff;
                    & .ico{
                        & span{background: #000;}
                    }
                }
            }
            & .logo{
                & a{
                    & img{filter: brightness(0) saturate(100%);}
                }
            }
        }
    }

    @media (width <= 1800px) {
        & .inner-lg {padding: 0 20px;}
        & .snb {
            & .snb-wrap {
                & .snb-con {
                    & .snb-top{
                        padding: 24px 20px 0;
                    }
                    & .snb-list{
                        padding: 55px 40px 40px 20px;
                        & > ul{
                            & > li{
                                & .depth2{
                                    padding: 102px 40px 0 0;
                                    &.on{}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .snb {
            max-width: none;
            & .snb-wrap {
                &:before{display: none;}
                & .snb-con {
                    & .snb-top{
                        position: relative; z-index: 2;

                        & .depth-back{
                            display: none; width: 15px; height: auto; aspect-ratio: 1; background: url("../img/common/depth-back.svg") no-repeat center;
                            filter: brightness(0) invert(1); margin: -8px 0 0 0;
                        }
                    }
                    & .snb-list{
                        padding: 25px 40px 40px 20px;
                        & > ul{
                            & > li{
                                & .depth1{
                                    & p{color: #fff;}
                                    & p:after{border-color: #fff;}
                                }
                                & .depth2{
                                    left: 0; width: 100%; transform: translateX(0); background: #a6a6a7; z-index: 1; padding: 72px 40px 0 20px;
                                    & a{opacity: 1; transform: translate(0) !important; color: #fff;}
                                }
                            }
                        }
                    }
                }

                &.expand{
                    & .snb-con{
                        & .snb-top{
                            & .depth-back{display: block;}
                            & .close{opacity: 0;}
                        }
                    }
                }
            }
        }
        &:has(.snb-wrap.expand){
            & .inner-lg {
                & .hm {
                    opacity: 0;
                }
            }
        }
    }
    @media (width <= 819px) {
        & .inner-lg {
            & .hm {
                & .hm-bt {
                    & .txt {display: none;}
                }
            }
            & .logo {
                & a {
                    &.symbol {width: 34px;}
                }
            }
        }
    }
}

/* footer */
footer {
    padding: 185px 0 76px;
    & .f-logo {padding: 0 0 36px; border-bottom: 1px solid #222;
        & a {display: block; width: 100%; max-width: 140px;
            & img {width: 100%;}
        }
    }
    & .f-con {display: flex; justify-content: space-between; align-items: flex-start; padding: 75px 0 72px;
        & .f-link {
            > ul {display: flex; gap: 70px;
                > li {display: flex; flex-direction: column; gap: 21px;
                    & a {display: block; font-size: 14px; font-weight: 400;}
                }
            }
        }
        & .f-sns {display: flex; align-items: center; gap: 63px; margin: -5px 0 0;
        /* & .f-sns {display: none; */
            & a {display: flex; align-items: center; gap: 8px;
                & img {width: 26px; filter: brightness(0) saturate(100%);}
                & p {font-size: 12px;}
                &.in img {width: 28px;}
                &.nb img {width: 28px;}
            }
        }
    }
    & .f-desc {display: flex; justify-content: space-between; align-items: flex-end;
        & .f-info {
            > ul {
                > li {display: flex; gap: 12px;
                    &:last-child {margin: 34px 0 0;}
                    & p {font-size: 11px;}
                    & span {font-size: 12px;}
                }
            }
        }
        & .f-guide {
            display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 0 0 3px;

            & .f-etc {
                display: flex; flex-wrap: wrap; gap: 30px;
                > li {
                    & a {display: block; font-size: 14px;}
                }
            }
        }
        & .f-sns {
            display: flex; flex-wrap: wrap; gap: 24px;
            & > li{
                & a{
                    font-size: 0; display: block; width: 27px; height: auto; aspect-ratio: 1; text-align: center; align-content: center;
                    & p{width: 0; height: 0; overflow: hidden;}
                    & img{filter: brightness(0) saturate(100%); object-fit: cover; width: 100%; height: 100%;}
                }
            }
        }
    }
    @media (width <= 1200px){
        & .f-con {
            & .f-sns {
                gap: 30px;
            }
        }
    }
    @media (width <= 1024px) {padding: 100px 0 30px;
        & .f-logo {padding: 0 0 24px;}
        & .f-con {padding: 20px 0 20px;
            & .f-link {display: none;}
            & .f-sns {
                gap: 20px; margin: 0;

                & a {gap: 4px;}
                & a img {width: 24px;}
                & a.in img {width: 24px;}
                & a.nb img {width: 24px;}
            }
        }
        & .f-desc {flex-wrap: wrap; gap: 20px;
            & .f-info {width: 100%;
                > ul {
                    > li {flex-wrap: wrap; gap: 0 12px;}
                    > li:last-child {margin: 12px 0 0;}
                }
            }
            & .f-guide {width: 100%; padding: 0;}
        }
    }
    @media (width <= 640px) {
        margin: 40px 0 0; padding: 40px 0 20px;
    }
}
/* body.sub footer{margin-top: 100px;} */

/* floater */
#floater{
    position: fixed; right: 70px; right: calc( (100vw - 1780px) / 2 ); bottom: 30px; z-index: 8; transition: 0.3s;

    & .floater-list{
        display: flex; flex-direction: column; gap: 12px;

        & > li{

            & a{
                font-size: 0; background-repeat: no-repeat; background-position: center; background-size: auto;
                display: block; width: 56px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; background-color: #222;

                & span{}
            }
            & a.to-top{background-image: url("../img/common/floater-totop.png.html"); border-color: #222; background-color: rgba(255,255,255,0.2); background-position: top center;}
            & a.to-top:hover{background-position: top -56px center; transition: background 0.3s ease-out;}
            & a.navertalktalk{background-image: url("../img/common/floater-navertalktalk.png.html");}
            & a.kakao{background-image: url("../img/common/floater-kakao.png.html");}
        }
    }

    &.hide{opacity: 0; transform: translateY(30px); pointer-events: none;}

    @media (width <= 1800px){
        right: 20px;
    }
    @media (width <= 1200px){
        bottom: 15px; right: 15px;
        & .floater-list{
            gap: 8px;
            & > li{
                & a{width: 44px;}
                & a.to-top{background-size: 56px; background-position: top  -6px center;}
                & a.to-top:hover{background-position: top -62px center;}
            }
        }
    }
}

body:has(.custom-wrap) footer {display: none;}
body:has(.custom-wrap) #floater {display: none;}

/* 서브 공통 레이아웃 */
.sub-container {position: relative; padding: var(--header-height) 0 0;
    &:has(.product-detail) {padding: 0;}
    &:has(.sub-top) {padding: 0;}
    & .sub-contents {
        overflow: hidden;
        & .sub-tit {text-align: center; padding: 50px 0;
            & p {font-size: 36px; font-weight: 500;}
        }
    }
    @media (width <= 768px) {
        & .sub-contents {
            & .sub-tit {padding: 30px 0;}
            & .sub-tit p {font-size: 24px;}
        }
    }

    & .page-tit{
        display: flex; flex-wrap: wrap; padding: 115px 0 34px; font-size: 14px;
        & .depth{
            flex: 0 0 auto; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
            & .cont{
                position: relative; color: #a6a6a7;
            }
            & .cont + .cont{
                padding: 0 0 0 35px;
                &:before{content: ""; position: absolute; top: 6px; left: 12px; width: 7px; aspect-ratio: 1; border-top: 2px solid #a6a6a7; border-right: 2px solid #a6a6a7; transform: rotate(45deg);}
            }
            & .cont:last-child{color: #111;}
        }
        & .tit{
            margin: 0 0 0 auto; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.6em;
            & > p{color: #111; font-weight: 400;}
            & .total{color: #111;}
            & .total em{font-style: normal; margin: 0 0 0 0.6em;}
        }
        &.atBoard{
            & .tit{
                & p{font-size: inherit;}
            }
        }

        @media (width <= 1280px){
            padding: 100px 0 25px;
        }
        @media (width <= 768px){
            padding: 50px 0 20px;
            & .tit{
                & p{/* font-size: 24px; */}
            }
            & .depth{display: none;}
        }
    }
}

/* sub-top */
.sub-top{
    position: relative; height: var(--view-height); display: flex; align-items: center; justify-content: center; text-align: center; max-height: 100svh; overflow: hidden; 
    & .img{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        & img{width: 100%; height: 100%; object-fit: cover;}
    }
    & .txt{
        position: relative; color: #fff;
        & .sub-top-tit{
            font-size: 32px; font-weight: 400; line-height: 1; 
            transform: scale(0.94); animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
            & em{opacity: 0; font-style: normal;}
            & em:nth-child(1){animation: fade-in 0.8s 0.15s forwards cubic-bezier(0.11, 0, 0.5, 0);}
            & em:nth-child(2){animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);}
        }
        & .sub-top-des{
            font-size: 16px; padding: 21px 0 0;
            transform: scale(0.94); animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
            & em{opacity: 0; font-style: normal;}
            & em:nth-of-type(1){animation: fade-in 0.8s 0.45s forwards cubic-bezier(0.11, 0, 0.5, 0);}
            & em:nth-of-type(2){animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);}
            & em:nth-of-type(3){animation: fade-in 0.8s 0.75s forwards cubic-bezier(0.11, 0, 0.5, 0);}
            & em:nth-of-type(4){animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);}
            & em:nth-of-type(5){animation: fade-in 0.8s 1.05s forwards cubic-bezier(0.11, 0, 0.5, 0);}
        }
        & .m-only{display: none;}
    }
    & .sub-top-menu{
        position: absolute; bottom: 81px; display: flex; flex-wrap: wrap; gap: 34px;
        & > li{
            & a{
                position: relative; display: block; font-size: 14px; color: #999; padding: 0 0 6px; font-weight: 400;
                &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #999;}
                &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #999;}
                & span{}

                &:hover{
                    &:before{width: 100%; transition: 0.4s ease;}
                }

                &.current{
                    color: #fff;
                    &:before{width: 100%; background-color: #999;}
                    &:hover{
                        /* &:before{opacity: 0; transition: 0.1s;}
                        &:after{width: 100%; transition: 0.2s ease; transition-delay: 0.15s;} */
                        &:before{opacity: 0; transition: 0.3s;}
                        &:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
                    }
                }
            }
        }
    }

    @media (width <= 1280px){
        width: 100%; height: auto; aspect-ratio: 16 / 13;
    }
    @media (width <= 860px){
        /* height: 760px; */ height: auto; width: 100%; aspect-ratio: 2 / 1.2;
        & .txt{
            & .sub-top-tit{font-size: clamp(20px,4vw,36px);}
            & .sub-top-des{font-size: 14px;}
        }
        & .sub-top-menu{
            display: none;
        }
    }
    @media (width <= 640px){
        /* height: 620px; min-height: auto; */ aspect-ratio: initial; height: 260px;
        & .txt{
            & .sub-top-tit{font-size: 24px;}
            & .m-only{display: block;}
        }
    }
}

/* sub-top-type2 */
.sub-top-type2{
    position: relative; z-index: 2; text-align: center; padding: 170px 0 0; /* margin: 0 0 -47px; */ /* margin: 0 0 -27px; */ margin: 0;
    & .txt{
        .sub-top-tit{
            font-size: 32px; font-weight: 400;
            & em{font-style: normal;}
        }
    }
    & .sub-top-menu-type2{
        display: flex; flex-wrap: wrap; justify-content: center; gap: 45px; padding: 24px 0 0;
        & > li{
            & a{
                position: relative; display: block; font-size: 14px; color: #999; padding: 0 0 7px; font-weight: 400;
                &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #999;}
                &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #000;}
                & span{}

                &:hover{
                    &:before{width: 100%; transition: 0.2s ease;}
                }

                &.current{
                    color: #000; font-weight: 400;
                    &:before{width: 100%; background-color: #000;}
                    &:hover{
                        &:before{opacity: 0; transition: 0.1s;}
                        &:after{width: 100%; transition: 0.2s ease; transition-delay: 0.15s;}
                    }
                }
            }
        }
    }
    
    @media (width <= 1280px){
        padding: 80px 0 0;  margin: 0;
        & .sub-top-menu-type2{
            padding: 40px 0 0;
        }
    }
    @media (width <= 1024px){
        padding: 60px 0 0; 
    }
    @media (width <= 767px){
        padding: 40px 0 0; margin: 0;
        & .sub-top-menu-type2{
            padding: 20px 0 0; gap: 20px; 
            & > li{
                & a{padding: 0 0 4px;}
            }
        }
    }
    @media (width <= 640px){
        & .txt{
            .sub-top-tit{
                font-size: 24px;
            }
        }
    }
}


/* popup */
.div_popup {min-width: 320px; border: 1px solid rgba(0,0,0,.1); box-sizing: border-box; z-index: 99 !important;
    & table {width: 100%;}
    & .divpop-img img {width: 100%;}
    & .divpop-bottom {background: #fff;}
    & .divpop-bottom a{display: inline-block; color: #222; font-size: 14px; letter-spacing: -0.5px; vertical-align: middle; margin: 0 20px; line-height: 40px; transition: all .2s cubic-bezier(.08, .03, .22, .87); -webkit-transition: all .2s cubic-bezier(.08, .03, .22, .87); -moz-transition: all .2s cubic-bezier(.08, .03, .22, .87); -o-transition: all .2s cubic-bezier(.08, .03, .22, .87);}
    & .divpop-bottom a:hover {color: #999;}
    & .divpop-bottom a.close {float: right; position: relative; padding: 0 25px 0 0;}
    & .divpop-bottom a.close::before {content: ''; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transition: all .2s cubic-bezier(.08, .03, .22, .87); -webkit-transition: all .2s cubic-bezier(.08, .03, .22, .87); -moz-transition: all .2s cubic-bezier(.08, .03, .22, .87); -o-transition: all .2s cubic-bezier(.08, .03, .22, .87); width: 17px; height: 1px; background: #222;}
    & .divpop-bottom a.close::after {content: ''; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-45deg); -webkit-transform: translateY(-50%) rotate(-45deg); -moz-transform: translateY(-50%) rotate(-45deg); -o-transform: translateY(-50%) rotate(-45deg); transition: all .2s cubic-bezier(.08, .03, .22, .87); -webkit-transition: all .2s cubic-bezier(.08, .03, .22, .87); -moz-transition: all .2s cubic-bezier(.08, .03, .22, .87); -o-transition: all .2s cubic-bezier(.08, .03, .22, .87); width: 17px; height: 1px; background: #222;}
    & .divpop-bottom a.close:hover::before, .divpop-bottom a.close:hover::after {background: #999;}
    & .divpop-bottom a.today {float: left;}
    & .divpop-bottom a td::after {content: ''; display: block; clear: both;}
    @media screen and (max-width:640px) {z-index: 999999 !important; width: 90% !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);}
}


/* dim */
.dim{
    position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.0); 
    transition: 0.5s; opacity: 0; visibility: hidden;

    &.on{z-index: 1; opacity: 1; visibility: visible;}
}

/* 페이지 스크롤 비활성화 */
.scr-disable{/* overflow: hidden !important; */ touch-action: none;}


/* CSS ANIMAIONS */
@keyframes ring{
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 100.5; }
}
@keyframes textFadeup{
    0%   { transform: translateY(30%); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}
@keyframes textFadeup2{
    0%   { transform: translateY(40px); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}
@keyframes slideLeave {
    to {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
}
@keyframes slideEnter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(1.05);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}