*, *::after, *::before { box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; }
html, body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; word-break: keep-all; }

.no-scroll::-webkit-scrollbar { display: none; } 
.no-scroll { overflow: hidden; } 

::selection { background: var(--bg-color); color: var(--bi-color); }
:root {
    --bg-color: #fff;
    --font-color: rgba(0, 0, 0, .7);
    --h2-color: rgba(0, 0, 0, 1);
    --check-color: #749ed7;
    --nav-link-color: #000;
    --bi-color: #000;
    --main-txt-color: #000;
    --sub-txt-color: #000;
    --card-txt-color: rgba(0, 0, 0, .5);
    --top-btn-color: rgba(0, 0, 0, .2);
    --foot-bi: #000;
    --more-btn: #076232;
    --col-hr: #f5f5f5;
    --sep-line: #d9d9d9;
    --ac-arrow: url(../images/ac_arrow1.svg);


    --contact-color1: #f5f5f5;
    --contact-color2: #ddd;
    --contact-color3: #202020;
    --contact-bg1: url('../images/contact_up_bk.svg');
    --contact-bg2: url('../images/contact_add_bk.svg');
}

.darkmode {
    --bg-color: #202020;
    --font-color: rgba(255, 255, 255, .3);
    --h2-color: rgba(255, 255, 255, 1);
    --check-color: #fff;
    --nav-link-color: #fff;
    --bi-color: #fff;
    --main-txt-color: #fff;
    --sub-txt-color: #fff;
    --card-txt-color: rgba(255, 255, 255, .3);
    --top-btn-color: rgba(255, 255, 255, .1);
    --foot-bi: #fff;
    --more-btn: #076232;
    --col-hr: #2f2f2f;
    --sep-line: #444;
    --ac-arrow: url(../images/ac_arrow2.svg);
    
    --contact-color1: #2a2a2a;
    --contact-color2: #3a3a3a;
    --contact-color3: #fff;
    --contact-bg1: url('../images/contact_up_wh.svg');
    --contact-bg2: url('../images/contact_add_wh.svg');
}




#loader-wrap { height: 100vh; overflow: hidden; }

.loader {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.MuiCircularProgress-root {
    display: inline-block;
}
.MuiCircularProgress-static {
    transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.MuiCircularProgress-indeterminate {
    animation: MuiCircularProgress-keyframes-circular-rotate 1.4s linear infinite;
}
.MuiCircularProgress-svg {
    display: block;
}
.MuiCircularProgress-circle {
    stroke: rgba(8, 120, 61, 1);
}
.MuiCircularProgress-circleStatic {
    transition: stroke-dashoffset 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.MuiCircularProgress-circleIndeterminate {
    animation: MuiCircularProgress-keyframes-circular-dash 1.4s ease-in-out infinite;
    stroke-dasharray: 80px, 200px;
    stroke-dashoffset: 0px;
}
@keyframes MuiCircularProgress-keyframes-circular-rotate {
    0% {
        transform-origin: 50% 50%;
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes MuiCircularProgress-keyframes-circular-dash {
    0% {
        stroke-dasharray: 1px, 200px;
        stroke-dashoffset: 0px;
    }
    50% {
        stroke-dasharray: 100px, 200px;
        stroke-dashoffset: -10px;
    }
    100% {
        stroke-dasharray: 100px, 200px;
        stroke-dashoffset: -145px;
    }
}
.MuiCircularProgress-circleDisableShrink {
    animation: none;
}

.backcircle { width:40px; height:40px; display: flex; justify-content: center; align-items: center; background-color:transparent; position:absolute; z-index:1; border-radius:40px; border:8px solid var(--bi-color); opacity:0.1; }

.progress { position: fixed; z-index: 10; top: 0; left: 0; height: 8px; background-color: var(--progress-color, var(--bi-color)); transition: all linear 0.1s; min-width: 0%; }

#pointer-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; background-color: var(--bi-color); border-radius: 50%; z-index: 9999; pointer-events: none; box-sizing: border-box; transform-origin: center center; transition: background-color 0.3s ease; border: none; }
#pointer-ring { position: fixed; left: 0; top: 0; width: 40px; height: 40px; border: 2px solid var(--bi-color); border-radius: 50%; z-index: 9998; pointer-events: none; box-sizing: border-box; transform-origin: center center; background: transparent; }


body { font-family: Satoshi, Pretendard, sans-serif; transition: background-color 0.4s; animation: fadein 1.2s forwards; background-color: var(--bg-color); }
@keyframes fadein {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}


/* 사파리 전화번호 인식 관련 */
a[href^="tel"] { color: inherit; text-decoration: none; }

div, ol, ul { list-style: none; margin: 0; padding: 0; } 
img { max-width: 100%; } 
a { text-decoration: none; color: #111; cursor: pointer; } 
p { margin: 0; padding: 0; } 


.sortable { width: 100%; margin: 0 auto; position: relative; z-index: 2; overflow: hidden; background: var(--bg-color); transition: background-color 0.4s; }
.container { width: 100%; margin: 0 auto; padding: 0; }
.pic-wrap { overflow: hidden; }      
.card__picture { display: block; width: 100%; height: auto; transition: transform 0.5s ease-out; }
.card__picture:hover { transform: scale(1.04); }


video { 
    display: block; width: 100%; outline: none; border: 0;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;
}

#scroll-to-top { z-index: 3; margin: 0 auto; overflow: hidden; font-size: 16px; text-align: center; cursor: pointer; width: 82px; height: 82px; fill: var(--bi-color); position: relative; display: block; } 

.line6 { margin: 0; padding: 0; position: fixed; z-index: 10; right: 60px; bottom: 128px; } 
#dn { display: none; } 
.toggle2 { cursor: pointer; display: inline-block; position: relative; width: 48px; height: 48px; background-image: url("../images/icon_light.svg"); background-color: rgba(0, 0, 0, .2); background-repeat: no-repeat; background-position: center; border-radius: 84px; transition: transform 1s ease; } 
.toggle2:hover { transition: transform 1s ease; transform: rotate(180deg); } 
#dn:checked+.toggle2:hover { transition: transform 1s ease; transform: rotate(360deg); } 
.toggle2:after,
.toggle2:before { margin-top: 5px; } 
.toggle2:before { /*content: "Light"; */
position: absolute; color: #bbb; font-weight: bold; } 
.toggle2:after { /*content: "Dark"; */
position: absolute; color: #000; font-weight: bold; } 
.toggle__handler {  display: inline-block; position: relative; z-index: 2; background-size: 0; transition: transform 0.3s; margin: 0 0 0; } 
#dn:checked+.toggle2 { background-image: url("../images/icon_dark.svg"); background-color: rgba(255, 255, 255, .1); background-repeat: no-repeat; background-position: 50% 50%; } 
#dn:checked+.toggle2:before { color: var(--font-color); } 
#dn:checked+.toggle2:after { color: var(--check-color); } 
#dn:checked+.toggle2 .toggle__handler { display: inline-block; transform: translate3d(20px, 0, 0) rotate(0); transition: transform 0.3s ease-in-out, background 0.3s, border-color 0.3s; } 

header { margin-top: 60px; position: fixed; z-index: 9; left: 0; top: 0; width: 100vw; height: 40px; mix-blend-mode: difference; }

.bi_bk { position: fixed; z-index: 9; margin: 0; padding: 0; }
.bi_bk a { display: block; }
.bi_bk svg path { fill: #fff; will-change: transform; }




.menu { margin-right: 60px; float: right; margin-top: 6px; }

.menu ul li { display: inline-block; font-size: 24px; font-weight: 500; margin-left: 40px; }
.menu ul li:first-child { margin-left: 0; }
.menu ul li a { color: #fff; }

.isolde-default { position: relative; padding: 0; margin: 0; opacity: 0; margin-bottom: 0; }
[data-isolde-el] { opacity: 0; position: absolute; top: 0; left: 0; }

.card__title_en { color: var(--main-txt-color); text-transform: uppercase; }
.card__title_kr { color: var(--main-txt-color); }
.card__text { font-weight: 400; color: var(--card-txt-color); }
.card__more { border-bottom: 0.6vw solid var(--main-txt-color); }
.card__more a { color: var(--main-txt-color); }

.line_th { position: relative; overflow: hidden; display: inline-block; padding-bottom: 5px; }
.line_th::before { content: ""; position: absolute; left: -100%; bottom: 0px; width: 100%; height: 2px; opacity: 0.8; background-color: #fff; transition: left 0.25s ease-out; }
.line_th:hover::before { left: 0; }
.line_th.active::before { left: 0; }

.smooth-content { opacity: 0; transform: translateY(50px); will-change: opacity, transform; }