@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');



html {
    font-size: 62.5%;
}

body {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    font-size: 1em;
}

#wrap {
    overflow: hidden;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    display: block;
}

#header {
    width: 100%;
    height: 100%;
}

#header .h_cont {
    width: 100%;
    height: 8rem;
    background-color: #fff;
}

#header .gnb {
    z-index: 9;
    position: fixed;
    padding: 0 7.5%;
    height: 8rem;
    width: 100%;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
    box-sizing: border-box;
    background-color: #fff;
}


#header .gnb ul {
    width: 100%;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    
}

#header .gnb ul li {
    cursor: pointer;
}


#header .gnb ul li a {
    font-size: 2.5rem;
    color: rgb(0, 0, 247);
    font-weight: 500;
}

#header .gnb ul .menu_herstory a {
    font-size: 2.5rem;
    color: rgb(0, 0, 0);
    font-weight: 500;
}

#header .gnb ul li:hover a {}


#container .c_cont {
    padding: 0 7.5%;
    height: 730rem;
    /* overflow-y: scroll; */
    position: relative;
}

.c_cont::-webkit-scrollbar {
    /* display: none; */
}

/* .c_cont .c_box .tab .c_text {
    font-size: 10rem;
    z-index: 99;
    color: rgb(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s !important;
} */




/* 큰글자 tab 1*/

.c_cont .c_box .tab .c1_text_1 {
    position: absolute;
    top: 11%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c1_text_2 {
    position: absolute;
    top: 26%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(255, 255, 255);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c1_text_3 {
    position: absolute;
    top: 40%;
    left: 14%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(105, 105, 105);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c1_text_4 {
    position: absolute;
    top: 54%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(0, 0, 0);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c1_text_5 {
    position: absolute;
    top: 72%;
    left: 14%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(65, 17, 17);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

/* 큰글자 tab 2*/

.c_cont .c_box .tab .c2_text_1 {
    position: absolute;
    top: 11%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c2_text_2 {
    position: absolute;
    top: 26%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(255, 255, 255);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c2_text_3 {
    position: absolute;
    top: 40%;
    left: 14%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(105, 105, 105);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c2_text_4 {
    position: absolute;
    top: 54%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(0, 0, 0);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}




/* 큰글자 tab 3*/

.c_cont .c_box .tab .c3_text_1 {
    position: absolute;
    top: 11%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c3_text_2 {
    position: absolute;
    top: 26%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(255, 255, 255);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c3_text_3 {
    position: absolute;
    top: 40%;
    left: 13%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(105, 105, 105);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c3_text_4 {
    position: absolute;
    top: 54%;
    left: 24%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(0, 0, 0);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}

.c_cont .c_box .tab .c3_text_5 {
    position: absolute;
    top: 72%;
    left: 14%;
    font-size: 5.3vw;
    z-index: 99;
    color: rgb(65, 17, 17);
    /* visibility: hidden; */
    opacity: 0;
    transition: 0.5s !important;
    text-shadow: 0 0 1px rgb(138, 138, 138), 0 0 5px rgb(182, 182, 182), 0 0 10px rgb(170, 170, 170), 0 0 20px #616161, 0 0 40px #333333;

}








.on {
    visibility: visible !important;
    opacity: 1 !important;
}

.c_cont .c_box {
    width: 100%;
    height: 300rem;
    position: relative;
    display: flex;
}

.c_box .h2class {
    position: fixed;
    width: 28.33%;
    height: 7%;
    z-index: 49;
    /* background-color: #fff; */
    backdrop-filter: saturate(180%) blur(15px);
}

.c_box .h2class1 {
    left: 7.5%;
}

.c_box .h2class2 {
    left: 51.91%;
    transform: translateX(-56.66%);
}
.c_box .h2class3 {
    right: 7.5%;
}

.c_box h2 {
    /* padding: 0 7.5%; */
    /* width: 33.333%; */
    height: 6rem;
    font-size: 3rem;
    box-sizing: border-box;
    /* background-color: rgb(135, 133, 150); */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* color: antiquewhite; */
}

.c_box h2.active {
    color: black;
    letter-spacing: 1.8vw;
    /* position: fixed; */
}

.c_box .tab {
    width: 100%;
    height: 730rem;
    position: absolute;
    top: 6rem;
    z-index: 9;
}

.c_box .hidden {
    height: 600rem;
}

.c_box .tab.hidden {
    /* display: none !important; */
    opacity: 0;
    visibility: hidden;
}


/* ---------figure관련---------- */

#container .c_cont .c_box .tab  {
    display: flex;
}

.tab figure {
    width: 33.3%;
}

.tab figure .image {
    position: relative;
}

.tab figure .image img {
    width: 100%;
    padding: 2% 2%;
    box-sizing: border-box;
    position: relative;
}

figure .image .description {

    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    bottom: 4%;
    font-size: 2.5rem;
    padding: 0 4%;
    color: aliceblue;
}

figure .image:hover .description {
    opacity: 1;
    visibility: visible;
}







/* #container .c_cont .c_cont1 {
    padding: 2% 7.5%;
    height: 3%;
    background-color: rgba(137, 43, 226, 0.281);
    box-sizing: border-box;
    position: fixed;
}

.c_cont1 ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c_cont1 ul li {
    width: 33.3%;
    display: flex;
    justify-content: center;
}

.c_cont1 ul li a {
    font-size: 2rem;
    color: black;
    transition: 0.5s;
}

.c_cont1 ul li:hover a {
    font-size: 2rem;
    letter-spacing: 2vw;
    color: black;
} */