html body {
    position: relative;

    font-family: "42dot Sans", sans-serif; 
    font-weight: 400;
    line-height: 1.6;

    word-break: keep-all;
    white-space: normal;

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
    overflow-x: hidden;

    background-color: #FFFBFF;
}

html {overflow-x: hidden;}


hr {
    border: none;

    margin: 0;
}

header {
    background-color: #FFFBFF;
}

strong {
    font-weight: 400;
    animation: blink 2s infinite;
}

i {
    color: #797979;
}

/* class */

.wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;

    width: 1000px;
    margin: 0 auto;
}

/* atlas 버튼 */

.atlas-button {
    position: fixed;
    display: flex;

    top: 0;
    left: 0;
    margin: 0;
    padding: 0;

    justify-content: center;
    align-items: center;

    width: 110px;
    height: 110px;
    border-radius: 50%;

    background-color: #FFFBFF;
    border: 2px solid #131B23;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    z-index: 1000;

    transition: all 0.3s ease;
}

.atlas-button a {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: left;

    color: #131B23;

    text-decoration: none;

    padding-right: 30px;
}

.atlas-button:hover {
    background-color: #FFFA75;
    border: 2px solid #131B23;
}

.atlas-button:hover a {
    
}

/* what is MWA? 버튼 */

.whatis-button {
    position: fixed;
    display: flex;

    top: 0;
    left: 0;
    margin: 0;
    padding: 0;

    justify-content: center;
    align-items: center;

    width: 110px;
    height: 110px;
    border-radius: 50%;

    background-color: #FFFBFF;
    border: 2px solid #131B23;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    z-index: 1000;

    transition: all 0.3s ease;
}

.whatis-button a {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: left;

    color: #131B23;

    text-decoration: none;

    padding-right: 30px;
}

.whatis-button:hover {
    background-color: #FFFA75;
    border: 2px solid #131B23;
}


/* 팝업 */

.popup {
    display: none;
    position: fixed;
    z-index: 1000;

    left: 0;
    top: 0;
    
    width: 300px;
    height: auto;
    
    background-color: white;
    border: 2px solid #131B23;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;

    transform: none;
}

.popup-content {
    position: relative;
    
    width: 100%;
    height: 100%;
}

.popup-close {
    position: absolute;
    display: flex;
    right: 0px;
    top: 0px;

    width: 20px;
    height: 20px;

    justify-content: center;
    align-items: center;

    font-size: 1rem;

    color: #FFFBFF;

    cursor: pointer;

    background-color: #131B23;
    border-radius: 50px;
}

/* 사이즈 가이드 팝업 */

.sgpopup {
    display: none;
    position: fixed;
    z-index: 1000;

    left: 100px;
    top: 400px;

    width: 200px;
    height: auto;
    
    background-color: white;
    border: 2px solid #131B23;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;

    transform: none;
}

.sgpopup-content {
    position: relative;
    
    width: 100%;
    height: 100%;
}

.sgpopup-content p {
    font-size: 1rem;

    line-height: 2;
}

.sizeguide-dash {
    width: 200px;
    border: none;
    border-top: 2px dashed #131b2372;

    margin: 10px 0;
}

/* 오브젝트 팝업 */

.objpopup {
    display: none;
    position: fixed;
    z-index: 1000;

    left: 0;
    top: 0;
    
    width: auto;
    height: auto;
    
    background-color: white;
    border: 2px solid #131B23;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;

    transform: none;
}

.objpopup-content {
    position: relative;
    
    width: 100%;
    height: 100%;
}

.objpopup-close {
    position: absolute;
    display: flex;
    right: 0px;
    top: 0px;

    width: 20px;
    height: 20px;

    justify-content: center;
    align-items: center;

    font-size: 1rem;

    color: #FFFBFF;

    cursor: pointer;

    background-color: #131B23;
    border-radius: 50px;
}

.objpopup-title {
    display: flex;
    flex-direction: row;

    gap: 10px;
    padding-bottom: 20px;
}

.objpopup-title h1 {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
}

.objpopup-title h2 {
    font-size: 1rem;
    font-weight: 500;
    margin: 5px 0 0 0;
}

.objpopup-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* 링크 팝업 */

#link-popup .objpopup-content > div {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#link-popup-iframe {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 225px;
    border: none;
}

/* 헤더 */

    /* 라인 */

    .title-line{
        height: 12px;
        width: 620px;

        background-color: #840032;
    }

    .nav-line{
        height: 12px;
        width: 190px;
    }

    .header-end-line{
        height: 12px;
        width: 1000px;
    }


    /* 타이틀 */

    .title-box {
        display: flex;
        justify-content: center;

        width: 620px;
        height: 290px;

        background-color: #EEEEEE;
    }

    .title-text {
        font-family: "Doto", sans-serif;
        font-weight: 400;
        font-size: 6rem;
        line-height: 1;
        color: #840032;

        text-align: left;
    }


    /* 네비게이션 */

    .nav-box {
        width: 190px;
        height: 290px;
        
        background-color: #FFFBFF;
    }

    .nav-to-1, .nav-to-2 {
        width: 190px;
        height: 35px;

        display: flex;
        align-items: center;
        justify-content: right;

        transition: all 0.3s ease;
    }

    .nav-to-1 a, .nav-to-2 a {
        text-decoration: none;
        color: #131B23;

        font-weight: 400;
        font-size: 1rem;

        width: 100%;
        text-align: right;
    }

    .nav-to-1 {
        background-color: #FFFBFF;
        color: #131B23;
    }

    .nav-to-1:hover {
        background-color: #131B23;
    }

    .nav-to-1 a:hover {
        color: #FFFBFF;
    }

    .nav-to-2 {
        background-color: #FFFBFF;
        color: #131B23;

        text-decoration: underline; 
    }

    .nav-to-2:hover {
        background-color: #FFFA75;
    }

/* 어바웃 */

.about-wrap {
    position: relative;
    width: 1000px;
    height: 2000px;
    margin: 0 auto;
    
}

.about-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    text-align: center;
    font-weight: 400;
    z-index: 2;


    padding-top: 380px;
    padding-bottom: 380px;
}

/* 이미지 캐러셀 */
.img-rotate-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 2000px;
    transform-origin: center center;
    animation: rotate 20s linear infinite;
}

.rotate-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
}

.image-frame {
    width: 120px;
    height: 120px;
    

    display: flex;
}

.image-frame img {
    width: 200%;
    height: 100%;


    margin: 0 auto;
}

.rotate-item:nth-child(1) { transform: translate(-50%, -50%) translate(0, -700px); }
.rotate-item:nth-child(2) { transform: translate(-50%, -50%) rotate(21.18deg) translate(0, -700px); }
.rotate-item:nth-child(3) { transform: translate(-50%, -50%) rotate(42.35deg) translate(0, -700px); }
.rotate-item:nth-child(4) { transform: translate(-50%, -50%) rotate(63.53deg) translate(0, -700px); }
.rotate-item:nth-child(5) { transform: translate(-50%, -50%) rotate(84.71deg) translate(0, -700px); }
.rotate-item:nth-child(6) { transform: translate(-50%, -50%) rotate(105.88deg) translate(0, -700px); }
.rotate-item:nth-child(7) { transform: translate(-50%, -50%) rotate(127.06deg) translate(0, -700px); }
.rotate-item:nth-child(8) { transform: translate(-50%, -50%) rotate(148.24deg) translate(0, -700px); }
.rotate-item:nth-child(9) { transform: translate(-50%, -50%) rotate(169.41deg) translate(0, -700px); }
.rotate-item:nth-child(10) { transform: translate(-50%, -50%) rotate(190.59deg) translate(0, -700px); }
.rotate-item:nth-child(11) { transform: translate(-50%, -50%) rotate(211.76deg) translate(0, -700px); }
.rotate-item:nth-child(12) { transform: translate(-50%, -50%) rotate(232.94deg) translate(0, -700px); }
.rotate-item:nth-child(13) { transform: translate(-50%, -50%) rotate(254.12deg) translate(0, -700px); }
.rotate-item:nth-child(14) { transform: translate(-50%, -50%) rotate(275.29deg) translate(0, -700px); }
.rotate-item:nth-child(15) { transform: translate(-50%, -50%) rotate(296.47deg) translate(0, -700px); }
.rotate-item:nth-child(16) { transform: translate(-50%, -50%) rotate(317.65deg) translate(0, -700px); }
.rotate-item:nth-child(17) { transform: translate(-50%, -50%) rotate(338.82deg) translate(0, -700px); }


@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 유저 가이드 */

.slogan-box {
    width: 400px;
    height: 430px;
}

.guide-box {
    display: flex;
    flex-wrap: wrap;

    width: 600px;
    height: 410px;

    gap: 10px;
}

.slogan-box, .guide-box {
    padding-top: 100px;
    padding-bottom: 100px;
}

.slogan-text {
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 1.2;
    

    color: #FFFBFF;
}

.guide-content {
    height: 140px;
    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;

    background-color: #FFFBFF;
    border-radius: 2px;

    gap: 30px;
    transition: transform 0.3s ease;
}

.guide-content:hover {
    animation: shake 0.3s ease-in infinite;
    transform-origin: center center;
}

.guide-content:hover img {
    animation: none;
}

.guide-content-img {
    width: 65px;
    height: 65px;

    object-fit: contain;
    padding-left: 40px;
}

.guide-content-img img {
    width: 100%;

    animation: blink 1.5s infinite;
}

.guide-content-text {
    width: 440px;
    height: 65px;

    text-align: left;
    font-size: 1.15rem;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

/* 바로가기 */

.content-box {
    position: relative;
    overflow: visible;

    width: 500px;
    height: 500px;
}

.content-background {
    background-color: #131B23;
    width: 1000px;
    height: 400px;
}

.content-box-text {
    width: 500px;

    font-size: 1.15rem;

    padding-top: 100px;
}

.content-box-text a {
    color: #840032;
}

.content-box-img {
    position: absolute;
    bottom: 0px;
    right: 40px;

    width: 550px;
    
}

.content-box-img img {
    width: 100%;
    height: auto;

    object-fit: cover;
}

/* 푸터 */

.footer-line-1{
    height: 12px;
    width: 235px;

    background-color: #840032;
}

.footer-line-2{
    height: 12px;
    width: 765px;

    background-color: #131B23;
}

    /* 세로 단 */
    .footer-box-1 {
        display: flex;

        justify-content: space-between;

        height: 180px;
        width: 1000px;

        padding-top: 30px;
    }

    .footer-box-2 {
        display: flex;

        height: 50px;
        width: 1000px;
    }

    .footer-box-3 {
        display: flex;

        justify-content: space-between;

        height: 30px;
        width: 1000px;

        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* 가로 단 1 */
    .footer-box-1-1 {
        width: 235px;

        font-family: "Doto", sans-serif;
        font-size: 2.2rem;
        line-height: 1;

        color: #840032;
    }

    .footer-box-1-2 {
        display: flex;
        text-align: right;

        justify-content: flex-end;
        align-items: flex-start;

        width: 730px;

        gap: 30px;
    }

    .footer-box-1-2 a {
        text-decoration: none;
        color: #131b2383;
    }

    .footer-box-1-2-1 {
        font-size: 0.7rem;
        font-weight: 300;

        color: rgb(136, 136, 136);
    }

    .footer-box-1-2-2 {
        display: flex;
        flex-wrap: wrap;

        width: 350px;
        justify-content: flex-end;

        gap: 15px;
    }

    .footer-box-1-2-2-1 {
        font-size: 0.7rem;
        font-weight: 300;

        color: rgb(180, 180, 180);
    }

    /* 가로 단 2 */

    .footer-box-2-1 {
        padding-top: 20px;

        font-size: 0.8rem;
        font-weight: 300;

        color: rgb(180, 180, 180);
    }

    /* 가로 단 3 */

    .footer-box-3-1 {
        padding-top: 20px;

        font-size: 0.8rem;
        font-weight: 300;

        color: #840032;
    }

    .footer-box-3-2 {
        padding-top: 20px;

        font-size: 0.8rem;
        font-weight: 300;

        color: #840032;

        justify-content: flex-end;
    }
    
/*Atlas*/

.atlas-wrap {
    position: relative;
    display: flex;

    flex-wrap: wrap;

    margin: 0 auto;
    width: 1000px;
    height: 100%;

    margin: 0 auto;
    z-index: 2;
}
    /* 1 */

    .top-frame {
        display: flex;
        justify-content: space-between;
        align-items: center;

        flex-direction: row;

        width: 100%;
        height: 20px;

        padding-top: 50px;
        padding-bottom: 20px;
    }

    .top-left {}

    .top-left a{
        font-size: 1rem;
        color: #131B23;

        text-decoration: none;
    }

    .top-center {
        font-family: "Doto", sans-serif;
        font-size: 1.5rem;
        text-align: center;

        padding-left: 100px;
    }

    .top-right {
        font-size: 0.8rem;
        font-weight: 300;
    }


    /* 메인 */

    .top-line {
        width: 100%;
        height: 12px;

        background-color: #131B23;
    }

    .middle-line {
        width: 100%;
        height: 2px;

        background-color: #131B23;
    }

        /* atlas 네비게이션 */
        
        .atlas-nav-box {
            display: flex;
            align-items: center;

            flex-wrap: wrap;

            width: 100%;
            height: auto;

            background-color: #FFFBFF;
        }

        .atlas-nav {
            width: 20%;
            height: 30px;

            background-color: #FFFBFF;

            align-items: center;

            transition: all 0.3s ease;
        }

        .atlas-nav a{
            font-size: 0.8rem;
            color: #131B23;

            text-decoration: none;
            text-align: center;

            padding-left: 10px;
            padding-top: 5px; padding-bottom: 5px;
        }

        .atlas-nav:hover {
            background-color: #840032;
        }

        .atlas-nav:hover a {
            color: #FFFBFF;
        }

        /* 뷰포트 */

        .viewport-box {
            position: relative;
            display: flex;

            width: 100%;
            height: 550px;

            background-color: #FFFA75;

            margin: 0 auto;
            
        }

        .viewport-scroll-frame {
            position: sticky;
            display: flex;

            margin: 0 auto;

            top: 100;

            flex-direction: column;

            justify-content: flex-start;

            width: 800px;
            height: auto;
            overflow-y: scroll;

            gap: 1200px;
        }

        .viewport-scroll-img {
           
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .viewport-scroll-img img {
            max-width: 100%;
            height: 50%;

            
            
            padding-top: 70px;
            padding-bottom: 70px;

            z-index: 999;
        }

        /* size */
        
        .basketball::after {
            content: "box: 1*1 meter\A diameter: 24.6 cm \A Occupies approx. 4.75% of the box";
        }
         .basketball img:hover {
            transform: scale(0.25);
        }


        .microwave::after {
            content: "box: 1*1 meter \A wavelength: 12.2 cm \A Occupies approx. 1.49% of the box";
        }
        .microwave img:hover {
            transform: scale(0.5);
        }


        .match::after {
            content: "box: 10*10 centimeter\A size: 4.5 * 0.2 cm \A Occupies approx. 0.9% of the box";
        }
        .match img:hover {
            transform: scale(0.5);
        }
       

        .ant::after {
            content: "box: 1*1 centimeter\A size: 0.5 * 0.2 cm \A Occupies approx. 10% of the box";
        }
        .ant img:hover {
            transform: scale(0.4);
        }


        .sand::after {
            content: "box: 1*1 millimeter\A size: 0.5 * 0.5 mm \A Occupies approx. 25% of the box";
        }
        .sand img:hover {
            transform: scale(0.9);
        }


        .rbc::after {
            content: "box: 10*10 micrometer\A size: 7 * 2 μm \A Occupies approx. 4.4% of the box";
        }
        .rbc img:hover {
            transform: scale(0.9);
        }


        .x::after {
            content: "box: 10*10 micrometer\A size: 6 * 1.5 μm \A Occupies approx. 9% of the box";
        }
        .x img:hover {
            transform: scale(0.7);
        }


        .backteriophage::after {
            content: "box: 500*500 nanometer\A size: 200 * 100 nm \A Occupies approx. 8% of the box";
        }
        .bacteriophage img:hover {
            transform: scale(0.3);
        }


        .dna::after {
            content: "box: 10*10 nanometer\A size: 2 * 3.4 nm \A Occupies approx. 0.68% of the box";
        }
        .dna img:hover {
            transform: scale(0.5);
        }


        .carbon::after {
            content: "box: 0.5*0.5 nanometer\A diameter: 0.14 nm \A Occupies approx. 7.8% of the box";
        }
        .carbon img:hover {
            transform: scale(0.5);
        }

        .gamma::after {
            content: "box: 10*10 picometer\A wavelength: 10 pm \A Occupies approx. 100% of the box";
        }
        .gamma img:hover {
            transform: scale(1.16);
        }


        .nucleus::after {
            content: "box: 10*10 femtometer\A diameter: 2.7 fm \A Occupies approx. 7.3% of the box";
        }
        .nucleus img:hover {
            transform: scale(0.7);
        }


        .proton::after {
            content: "box: 10*10 femtometer\A diameter: 1.6 fm \A Occupies approx. 2% of the box";
        }
        .proton img:hover {
            transform: scale(0.4);
        }


        .neutron::after {
            content: "box: 10*10 femtometer\A diameter: 1.6 fm \A Occupies approx. 2% of the box";
        }
        .neutron img:hover {
            transform: scale(0.4);
        }

        .up::after {
            content: "box: 10*10 attometer\A diameter: 5 am \A Occupies approx. 25% of the box";
        }
        .up img:hover {
            transform: scale(1.6);
        }


        .down::after {
            content: "box: 10*10 attometer\A diameter: 5 am \A Occupies approx. 25% of the box";
        }
        .down img:hover {
            transform: scale(1.6);
        }


        .superstring::after {
            content: "box: 1*1 Plancklength\A diameter: 1 ℓₚ  \A Occupies approx. 100% of the box";
        }
        .superstring img:hover {
            transform: scale(1.3);
        }




        .basketball,
        .match,
        .microwave,
        .ant,
        .sand,
        .rbc,
        .x,
        .bacteriophage,
        .dna,
        .carbon,
        .gamma,
        .nucleus,
        .proton,
        .neutron,
        .up,
        .down,
        .superstring {
            transition: transform 0.3s ease;
            transform-origin: center center;
        }

        .basketball::after,
        .match::after,
        .microwave::after,
        .ant::after,
        .sand::after,
        .rbc::after,
        .x::after,
        .bacteriophage::after,
        .dna::after,
        .carbon::after,
        .gamma::after,
        .nucleus::after,
        .proton::after,
        .neutron::after,
        .up::after,
        .down::after,
        .superstring::after {
            position: absolute;

            z-index: -1;

            width: 400px;
            height: 400px;

            border: 3px solid #840032;

            font-size: 0.8rem;
            font-weight: 400;
            color: #840032;

            text-align: right;
            padding: 10px;

            opacity: 0;
            transition: opacity 0.3s ease;

            white-space: pre-line;
        }

        .basketball:hover::after,
        .match:hover::after,
        .microwave:hover::after,
        .ant:hover::after,
        .sand:hover::after,
        .rbc:hover::after,
        .x:hover::after,
        .bacteriophage:hover::after,
        .dna:hover::after,
        .carbon:hover::after,
        .gamma:hover::after,
        .nucleus:hover::after,
        .proton:hover::after,
        .neutron:hover::after,
        .up:hover::after,
        .down:hover::after,
        .superstring:hover::after {
            opacity: 1;
        }

    /* 2 */


    .bottom-frame {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-direction: row;

    width: 100%;
    height: 20px;

    padding-top: 20px;
    
    }

    .bottom-left {
        font-size: 0.8rem;
    }

    .bottom-center {
        font-size: 0.8rem;

        position: absolute;
        left: 45%;
        top: 50%;
    }

    .bottom-right {
        font-size: 0.8rem;
    }

    .bottom-left a {
        display: flex;
        gap: 5px;

        text-decoration: none;

        color: #131b2377;

        align-items: center;
        justify-content: center;
    }

    .bottom-left img {
        width: 13px;
        height: auto;
    }

    /* 회색 배경 */

    .atlas-background {
        position: fixed;
        
        width: 100%;
        height: 697px;

        top: 90px;
        left: 0;
        background-color: #EEEEEE;
        
        z-index: 1;
    }

.viewport-scroll-img::after {
    /* ... */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.viewport-scroll-img:hover::after {
    opacity: 1;
}