@import url(/assets/css/common.css);
@import url(/assets/css/animation.css);

body::-webkit-scrollbar {
    display:none;
}

/* ---------------------------
    Side Nav
--------------------------- */
#fixed-nav {
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    mix-blend-mode:difference;
}

#fixed-nav ul li {
    display:flex;
    align-items:center;
    cursor:pointer;
    transition:all .2s ease;
}

#fixed-nav .dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255, 255, 255, .4);
    transition:all .2s ease;
}

#fixed-nav ul li:not(:last-child) {
    margin-bottom:6px;
}

#fixed-nav .label {
    color:#fff;
    margin-left:18px;
    font-size:14px;
    font-weight:bold;
    opacity:0;
    transition:all .2s ease;

}

#fixed-nav li.active .dot {
    outline:1px solid #fff;
    outline-offset:3px;
    background:#fff;
    transform:scale(1.4);
    /* box-shadow:0 0 0 4px rgba(100, 79, 157, .25); */
}

#fixed-nav li.active .label {
    opacity:1;
}

/* ---------------------------
    Visual Section
--------------------------- */
#visual {
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

#visual .black-filter { 
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .3);
}

#visual .visual-video video {
    width:100%;
    height:100%;
}

#visual .visual-wrap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
}

#visual .visual-content {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-align:center;
}

#visual .visual-title-wrap {    
    width:100%;
}

#visual .visual-title-list {
    position:relative;
    width:100%;
}

#visual .visual-item {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%);
    pointer-events:none;
    opacity:0;
    color:#fff;
}

#visual .visual-item h1 {
    font-size:4rem;
    font-weight:900 !important;
}

#visual .visual-item h1 br {
    display:none;
}

#visual .visual-item h5 {
    font-size:1.5rem;
    margin-top:12px;
    opacity:0.5;
}

#visual .visual-item.active {
    pointer-events:auto;
}

/* ---------------------------
    We are
--------------------------- */
#we-are {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-align:center;
    background:#222;
    color:#fff;
}

#we-are .container {
    position:relative;
    width:100%;
    height:100%;
}

#we-are .inner {
    position:absolute;
    top:0;
    left:50%;
    width:100%;
    height:100%;
    transform:translateX(-50%);
}

#we-are .title-wrap {
    position:relative;
    width:100%;
    height:100%;
    margin-bottom:0px;
}

#we-are .title-wrap > h1.title-lg {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:block;
    font-size:100px;
    margin:0;
}

#we-are .title-wrap .title-content {
    height:100%;
    padding-top:5.5%;
}

#we-are .line {
    display:flex;
    justify-content:center;
    width:100%;
    height:40px;
    margin:12px 0px;
}

#we-are .line hr {
    width:2px;
    /* height:100%; */
    border:1px solid #000;
    background:#000;
    margin:0;
    opacity:.5;
    margin:0;
}

#we-are h2 {
    margin-top:42px;
}

#we-are .core-items {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:4%;
}

/* #we-are .core-item {
    position:relative;
    border:1px solid rgba(255, 255, 255, .4);
    border-radius:50px;
    box-shadow:0px 0px 16px rgba(100, 79, 157, 0.3);
    background:radial-gradient(rgba(100, 79, 157, .5), rgba(255, 255 ,255, 1));
    backdrop-filter:blur(5px);
    padding:50px;
    text-align:left;
} */

#we-are .core-item {
    position:relative;
    border:1px solid rgba(255, 255, 255, .4);
    border-radius:50px;
    background-color:rgba(255, 255, 255, 0.6);
    backdrop-filter:blur(6px);
    box-shadow:0px 10px 20px 0px rgba(100, 79, 157, 0.25), inset 0px -8px 16px 0px rgba(100, 79, 157, 0.45), inset 0px 11px 28px 0px rgb(255, 255, 255);
    padding:50px;
    text-align:left;
    transform-style:preserve-3d;
    transition:box-shadow 0.3 ease;
    will-change:transform;
}

/* #we-are .core-item {
    position:relative;
    border:1px solid rgba(0, 0, 0, 1);
    border-radius:24px 24px 100px 24px;
    padding:50px;
    text-align:left;
} */

#we-are .core-item:hover {
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    cursor: pointer;
}

#we-are .core-item > * {
    margin:0;
}

#we-are .core-item h3 {
    margin-bottom:4px;
}

#we-are .core-item p {
    color:var(--main-purple);
    margin-bottom:40px;
}

#we-are .core-item h5 {
    opacity:.5;
}

#we-are .core-item img {
    position:absolute;
    right:30px;
    top:40px;
    height:80px;
    z-index:-1;
    cursor:default;
}

/* ---------------------------
    Service
--------------------------- */
#business .col-5 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

#business .content-item {
    display:none;
}   

#business .content-item.active {
    display:block;
}

#business .slide-btn {
    display:flex;
    align-items:center;
}

#business .slide-btn button {
    width:50px;
    height:50px;
    border:1px solid #fff;
    border-radius:6px;
    background:transparent;
}

#business .slide-btn button.next img {
    transform:rotate(180deg);
}

#business .slide-btn span {
    margin:0px 22px;
}

#business .slide-item {
    display:none;
}

#business .slide-item.active {
    display:block;
}

#business .slide-item {
    width:100%;
    height:68vh;
}

#business .slide-item img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ---------------------------
    Customer
--------------------------- */
#customer .title-wrap .title-sm {
    color:var(--gray);
}
#customer .partner-title,
#customer .client-title {
    display:flex;
    align-items:end;
    margin-bottom:16px;
}

#customer .partner-title hr,
#customer .client-title hr {
    width:30px;
    margin-left:6px;
    border:1px solid #000;
    background:#000;
    opacity:.4;
    transform:rotate(-45deg);
}

#customer .content-wrap {
    position:relative;
}

#customer .partners,
#customer .clients {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}

#customer .partners {
    margin-bottom:40px;
}

#customer .partner-title .title-sm,
#customer .client-title .title-sm {
    color:#000;
}

#customer .partner-item,
#customer .client-item {
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0, 0, 0, .3);
    border-radius:6px;
    padding:4px 24px;
}

#tooltip {
    position:absolute;
    display:none;
    padding:6px 10px;
    font-size:14px;
    background:var(--main-purple);
    border-radius:6px;
    color:#fff;
    white-space:nowrap;
    pointer-events:none;
    z-index:999;
}

.panel:nth-child(3) .partner-title .title-sm,
.panel:nth-child(3) .client-title .title-sm  {
    color:#fff;
}

.panel:nth-child(3) .partner-title hr,
.panel:nth-child(3) .client-title hr {
    border:1px solid #000 !important;
    background:#000 !important;
}

/* ---------------------------
    Contact
--------------------------- */
#contact .title-wrap .title-lg {
    margin-bottom:24px;
}

#contact .title-wrap .title-md {
    margin-bottom:12px;
}

#contact .title-wrap .text-md {
    color:rgba(255, 255, 255, .5);
}

#contact .info-item {
    display:flex;
    align-items:center;
}

#contact .info-item:not(:first-child) {
    padding-top:24px;
}

#contact .info-item:not(:last-child) {
    padding-bottom:24px;
    border-bottom:1px solid #fff;
}

#contact .info-icon {
    display:inline-block;
    padding:12px;
    margin-right:18px;
    background:rgba(255, 255, 255, .5);
    border:1px solid #fff;
    border-radius:6px;
}

#contact .info-icon img {
    height:30px;
}

#contact .info-text .title-sm {
    color:#fff;
}

/* ---------------------------
    Map
--------------------------- */
#map {
    border-radius:12px;
    overflow:hidden;
}

.custom-overlay {
    padding:6px 12px;
    background:#fff;
    border-radius:20rem;
}

.custom-overlay:after {
    content: '';
    position: absolute;
    margin-left: -12px;
    left: 50%;
    bottom: -12px;
    width: 22px;
    height: 12px;
    background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}

/* ---------------------------
    반응형
--------------------------- */
@media screen and (max-width:768px) {
    .custom-container {
        padding:0px 12px;
    }

    .swipe-section {
        position:relative;
        width:100%;
        height:100vh;
        overflow-y:scroll;
    }

    #nav {
        background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
        padding:20px 10px;
    }

    #nav .logo {
        width:30%;
    }

    #visual .visual-item h1 {
        font-size:2.5rem;
    }

    #visual .visual-item h1 br {
        display:inline-block;
    }

    #visual .visual-item h5 {
        font-size:1.25rem;
    }

    #visual .visual-video video {
        height:100vh;
        object-fit:cover;
    }

    #fixed-nav {
        display:none !important;
    }

    #we-are {
        background:#fff;
        color:#222;
        padding-bottom:0px;
    }

    #we-are .inner {
        position:static;
        transform:translateX(0%);
    }

    #we-are .title-wrap > h1.title-lg {
        position:static;
        transform:none;
        font-size:30px;
    }

    #we-are .core-items {
        grid-template-columns:repeat(1, 1fr);
        margin-top:10%;
    }

    #we-are .core-item p {
        margin-bottom:12px;
    }

    #we-are .core-item span {
        display:none !important;
    }

    #customer .partners,
    #customer .clients {
        grid-template-columns:repeat(1, 1fr);
        gap:12px;
    }

    #customer .partner-item,
    #customer .client-item {
        padding:6px 0px;
    }

    #contact .col-sm-12:has(#map) {
        margin-top:32px;
    }
}