/*landing*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* { 
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    letter-spacing: -0.04em;
}

img {
    max-width: 100%;
}
/* landing */
#landing {
    height: 100svh;
    width: 100svw;
    overflow: hidden;
    background-color: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 48%, #000000 0%, #000000 28%, #060300 58%, #000000 100%);
}
#landing::after {
    content: "";;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: .05;
    background-image: radial-gradient(circle at 10% 20%,#000 0 1px,transparent 1.2px);
    background-size: 3px 3px;
    mix-blend-mode: soft-light
}
#landing::before {
    content: "";
    position: absolute;

    width: 80svw;
    height: 80svw;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(circle, rgb(133 118 45 / 20%) 0%, rgb(95 93 24 / 10%) 35%, rgb(26 19 4 / 0%) 70%);

    filter: blur(15px);
    pointer-events: none;
}
/* 전체 영역 */
.landingWrap {
    width: min(90vw, 900px);
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* 마스터컴퍼니 로고 */
.afterLogo {
    /* opacity: 0;
    transform: scale(0);
    height: 0; */
    will-change: transform, opacity;
}
.afterLogo img {
    display: block;
    width: 100%;
    height: auto;
}

/* TO BE */
.landingTxt {
    width: min(50vw, 700px);
    /* transform: scale(1); */
    /* transform: scale(0.45) translateY(-20%); */
    will-change: transform;
    overflow: hidden;
}
.landingTxt::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 60%,
        transparent 100%
    );

    background-size: 80% 100%;
    background-repeat: no-repeat;

    -webkit-mask-image: url("http://webmastercom.web4in1.com/landing_img/tobe.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("http://webmastercom.web4in1.com/landing_img/tobe.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    pointer-events: none;
    mix-blend-mode: screen;

    animation: lightMove 3s linear infinite;
}
@keyframes lightMove {
    0% {
        background-position: -500% 0;
    }
    100% {
        background-position: 500% 0;
    }
}
.landingTxt img {
    display: block;
    width: 100%;
    height: auto;
}