/* ////////////////////////////////////
    메인화면에 글자 애니메이션 부분1
////////////////////////////////////// */
:root {
    --primary-value: 50px;
    /* --postion-value: 250px; */
    --rightpostion-value: 50px;
    /* 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 --primary-color라는 변수 이름으로 저장한다. */
}

section {
    margin-top: 65px;
    /* 상단에서 50px 위치에 설정 */
    height: 400px;
    /* 높이는 400정도 */
    background: url('/static/img/image_fx4.jpg');
    background-size: cover;
    position: relative;
    background-position: center center;
    /* 이미지가 중앙 정렬 */
}

section .anilettersdown {
    /* display: none; */
    font-size: 1em;
    width: 258px;
    color: white;
    font-family: sans-serif;
    position: absolute;
    top: 340px;
    /* 낙하지점 */
    left: var(--primary-value);
}

/* section .m_con {
    width: 300px;
    color: white;
    background-color: rgba(203, 200, 200, 0.5);
    border: 1px solid #030303;
    border-radius: 12px;
    font-family: sans-serif;
    position: absolute;
    top: var(--postion-value);
    right: var(--rightpostion-value);
} */

section .m_banner_text {
    color: white;
    height: 200px;
    /* font-family: sans-serif; */
    font-family: "Noto Sans KR", Sans-serif;
    position: absolute;
    top: 50%;
    left: 40%;
    /* 화면정중으로오게 */
    transform: translate(-50%, -50%);
}

section .m_banner_text .m_banner_title1 {
    font-family: sans-serif;
    font-size: 1em;
}

section .m_banner_text .m_banner_title2 {
    font-family: "Noto Sans KR", Sans-serif;
    font-size: 45px;
    font-weight: 700;
    color: rgb(234, 196, 5);
    text-shadow: 0px 0px 7px;
    /* font-size: 3em; */
}

section .m_banner_text .m_banner_title3 {
    font-family: sans-serif;
    font-size: 1em;
}

/* 새글작성버튼임 임시요 지울것 */
section .new-write {
    font-size: 1em;
    width: 150px;
    color: white;
    font-family: sans-serif;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 20px;
    /* 위치지점 */
    left: 0px;
}

/* 새글작성버튼임 임시요 지울것 */
section .new_notice {
    font-size: 1em;
    width: 100px;
    color: white;
    font-family: sans-serif;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 20px;
    /* 위치지점 */
    left: 220px;
}

/* 임시요 지울것 */
section .wrap {
    /* position: absolute; */
    height: 30px;
    /* width: 100px; */
    padding-top: 10px;
    /* display: inline-block; */
    background-color: red;
    font-size: 1rem;
    /* 1은 16px입니다*/
    text-align: center;
    line-height: 10px;
}

/* 부모 컨테이너 */
.slider-container {
    width: 100%;
    /* 화면 전체 너비 */
    /* max-width: 900px; */
    height: 400px;
    /* aspect-ratio: 16 / 9; */
    /* 가로 세로 비율 유지 */
    /* position: relative; */
    position: absolute;
    /* overflow: hidden; */
    margin: 0 auto;
    border: 2px solid black;
}

/*
section .m_con .m_con_title {
    font-size: 16px;
    color: #030303;
    width: 100%;
    height: 40px;
    padding: 2px;
    line-height: 40px;
    border-bottom: 1px solid #727070;
    font-weight: 500;
} */

/* section .m_con .m_con_title span {
    font-size: 14px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #c5ae12;
    ;
    font-weight: 400;
    margin: 0 0 0 10px;
} */

/* section .m_con .con_wrap2 {
    text-align: center;
} */

/* .m_con .title1 {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #333;
    margin: 2px 0 0;
}

section .m_con .title2 {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #061992;
    margin: 0 0 10px;
}

section .m_con .title3 {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: -0.04em;
    color: #333;
} */



section p a {
    color: rgb(219, 142, 8);
    font-family: "Arial", sans-serif;
    /* 폰트 설정 */
    font-weight: bold;
    /* 글자 굵게 */
    text-decoration: none;
    background-color: rgba(203, 200, 200, 0.2);
    /* 글자웨서 아래로 낙하하는 백그라운드색생및투명도 */
    border-radius: 7px;
    padding: 3px 5px;
    /* 모서리 둥글게 */
    /* display: inline-block; */
}

.animate__bounceInDown {
    animation-duration: 5s;
    /* 애니메이션 지속 시간 */
}



/* //기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동 됩니다.  */
/* // 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용)  */


/* // 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)  */
@media screen and (max-width: 1200px) {
    section p {
        font-size: 1rem;
    }

    :root {
        --primary-value: 50px;
        /* --postion-value: 250px; */
        --rightpostion-value: 50px;
    }
}

@media screen and (max-width: 960px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
        /* 작은 화면에서도 동일한 비율 유지 */
        grid-template-rows: repeat(2, 1fr);
        /* 동일한 행 비율 유지 */
        width: 100%;
        /* 화면 너비에 맞게 조정 */
    }

    .gallery-item {
        padding: 5px;
        /* 작은 화면에서 내부 여백 줄이기 */
    }

    .gallery-text1 .text-content .t1,
    .gallery-text2 .text-content .t1,
    .gallery-text3 .text-content .t1,
    .gallery-text4 .text-content .t1 {
        font-size: 12px;
        /* 작은 화면에서 텍스트 크기 줄이기 */
    }

    .gallery-text1 .text-content .t2,
    .gallery-text2 .text-content .t2,
    .gallery-text3 .text-content .t2,
    .gallery-text4 .text-content .t2 {
        font-size: 10px;
        /* 작은 화면에서 텍스트 크기 줄이기 */
    }

    .gallery-text1 .icon,
    .gallery-text2 .icon,
    .gallery-text3 .icon,
    .gallery-text4 .icon {
        width: 60px;
        /* 아이콘 크기 줄이기 */
    }
}

/* // 테스크탑 (가로 해상도가 992px 보다 큰 화면에 적용)  */
@media screen and (max-width: 800px) {
    .slider-container {
        max-width: 100%;
        aspect-ratio: 4 / 3;
        /* 모바일에서 비율 조정 */
    }

    section p {
        font-size: 1rem;
    }

    section .m_banner_text .m_banner_title1 {
        font-size: 2vw;
    }

    section .m_banner_text .m_banner_title2 {
        font-size: 5vw;
    }

    section .m_banner_text .m_banner_title3 {
        font-size: 2vw;
    }

    :root {
        --primary-value: 50px;
        /* --postion-value: 250px; */
        --rightpostion-value: 50px;
    }

    .flex-wrapper {

        flex-direction: column;
    }

    .flex-wrapper a:hover {
        flex: 1;
    }

    /* .flex-wrapper .one {
        margin-top: 200px;
    } */

    .flex-wrapper a:hover .overlay {
        background: none;
    }

    .overlay-inner h2,
    .overlay-inner p {
        opacity: 1;
        transform: none;
        /* font-size: 24px; */
        /* vw는 모바일이나태블릿일때만사용하라 */
        /* font-size: 1vw; */
    }
}


@media screen and (max-width: 480px) {
    section p {
        font-size: 1rem;
        /* display: none; */
    }

    :root {
        --primary-value: 5px;
        /* --postion-value: 80px; */
        --rightpostion-value: 5px;
    }

    .flex-wrapper a:hover {
        flex: 1;
    }

    .flex-wrapper a:hover .overlay {
        background: none;
    }

    .overlay-inner h2,
    .overlay-inner p {
        opacity: 1;
        transform: none;
        /* font-size: 24px; */
        /* vw는 모바일이나태블릿일때만사용하라 */
        /* font-size: 1vw; */
    }
}

/* @media screen and (max-width: 400px) {
    section p {
        font-size: 1.5rem;
    }

    :root {
        --primary-value: 90px;
        --postion-value: 80px;
        --rightpostion-value: 5px;
    }
} */