@charset "utf-8";

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
        format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 공통 메인 컨텐츠 */

#mcontainer{position:relative; background:#f5f5f5; }
#mcontainer .layout{max-width:1240px;}

.moving { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
#mvisual {position:relative; width:100%; }
#mvisual .visual-wrap {width:1240px;  margin:0 auto; text-align:center; position:relative;}

#mvisual .obj_wrap li .text_1 {
    padding: 125px 0 0;
    color: #fff;
    font-family: "Pretendard", "Malgun Gothic", sans-serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.04em;
    text-align: left;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

#mvisual .obj_wrap {width:100%; height:850px; vertical-align: top;  margin:0 auto; display:inline-block;  }
#mvisual .obj_wrap li {height:850px; display:inline-block; width:100%; position:absolute; left:0px; top:0px}
#mvisual .obj_wrap li#main_vi1 {background:linear-gradient(rgba(0, 23, 57, 0.2), rgba(0, 23, 57, 0.2)), url('/images/sm_gamsa/main/main_visual_1.jpg') no-repeat center; background-size:cover;}
#mvisual .obj_wrap li#main_vi2 {background:linear-gradient(rgba(0, 23, 57, 0.2), rgba(0, 23, 57, 0.2)), url('/images/sm_gamsa/main/main_visual_2.jpg') no-repeat center; background-size:cover;}
#mvisual .obj_wrap li .layout {color:#fff; width:1240px; margin:0 auto; }
#mvisual .obj_wrap li .br_2 {display:none}


#mvisual .control {position:absolute; top:405px; width:100%;  margin:0 auto; text-align:left; z-index:100} 
#mvisual .control button {background:none; background-image:url('/images/stu_lab/main/main_visual_icon.png'); background-repeat:no-repeat;  font-size: 0; position: static;display: inline-block; width:21px;height:21px; vertical-align: middle;}
#mvisual .control .count button.ov {background-position:left bottom;}
#mvisual .control .count button { background-position:left top; margin:0 1px 0 0}
#mvisual .control .count {display:inline-block; margin:0 0 0 5px}
#mvisual .control .state {display:inline-block; margin:0 0 0 5px}
#mvisual .control .state button.stop  { background-position:right top;}
#mvisual .control .state button.play  { background-position:right bottom;}

#scene1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 850px;
}

#scene1 #vi_btn {
    position: absolute;
    top: 71px;
    right: 0;
    width: 484px;
    height: 484px;
}

#scene1 #vi_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    display: inline-block;
    width: 1px;
    height: 152px;
    background: #b1b4b6;
    opacity: 0.7;
}

#scene1 #vi_btn::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    display: inline-block;
    width: 152px;
    height: 1px;
    background: #b1b4b6;
    opacity: 0.7;
}

#scene1 #vi_btn li {
    position: absolute;
    display: inline-block;
    width: 153px;
    height: 152px;
    overflow: hidden;
    isolation: isolate;
}

/* 흐리게 처리할 배경 이미지 */
#scene1 #vi_btn li::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image: url("/images/sm_gamsa/main/main_btn_bg.png");
    background-repeat: no-repeat;
    background-position: var(--bg-position);

    transition: background-position 0.3s ease;
}

/* 버튼별 색상 오버레이 */
#scene1 #vi_btn li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--overlay-color);
    transition: background-color 0.3s ease;
}

/* 링크와 글씨 */
#scene1 #vi_btn li > a {
    position: relative;
    z-index: 1;

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

    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    color: #fff;
    font-family: "Pretendard", "nsr", "Malgun Gothic", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.05em;
    text-align: center;
    word-break: keep-all;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 5px rgba(0, 0, 0, 0.25);
}

/* 감사안내 */
#scene1 #vi_btn li.btn1 {
    top: 24px;
    left: 25px;

    --bg-position: 0 top;
    --overlay-color: rgba(24, 69, 151, 0.38);
}

/* 감사결과 */
#scene1 #vi_btn li.btn2 {
    top: 24px;
    left: 178px;

    --bg-position: -153px top;
    --overlay-color: rgba(30, 39, 43, 0.4);
}

/* 온라인신고 */
#scene1 #vi_btn li.btn3 {
    top: 176px;
    left: 178px;

    --bg-position: -306px top;
    --overlay-color: rgba(142, 94, 0, 0.46);
}

/* 공익신고 */
#scene1 #vi_btn li.btn4 {
    top: 176px;
    left: 331px;

    --bg-position: -459px top;
    --overlay-color: rgba(61, 65, 68, 0.48);
}

/* 국민권익위원회 */
#scene1 #vi_btn li.btn5 {
    top: 328px;
    left: 331px;

    --bg-position: -612px top;
    --overlay-color: rgba(55, 61, 67, 0.4);
}

#scene1 #vi_btn li.btn1:hover::after,
#scene1 #vi_btn li.btn1:focus-within::after {
    background-color: rgba(24, 69, 151, 0.22);
}

#scene1 #vi_btn li.btn2:hover::after,
#scene1 #vi_btn li.btn2:focus-within::after {
    background-color: rgba(30, 39, 43, 0.25);
}

#scene1 #vi_btn li.btn3:hover::after,
#scene1 #vi_btn li.btn3:focus-within::after {
    background-color: rgba(142, 94, 0, 0.3);
}

#scene1 #vi_btn li.btn4:hover::after,
#scene1 #vi_btn li.btn4:focus-within::after {
    background-color: rgba(61, 65, 68, 0.32);
}

#scene1 #vi_btn li.btn5:hover::after,
#scene1 #vi_btn li.btn5:focus-within::after {
    background-color: rgba(55, 61, 67, 0.25);
}

/* 버튼 안쪽의 빛나는 테두리 */
#scene1 #vi_btn li > a > .hover-glow {
    position: absolute;
    inset: 5px;
    z-index: 5;
    display: block;
    box-sizing: border-box;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0);
    background: transparent;
    pointer-events: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 마우스 hover 및 키보드 포커스 */
#scene1 #vi_btn li > a:hover > .hover-glow,
#scene1 #vi_btn li > a:focus-visible > .hover-glow {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.55),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    #scene1 #vi_btn li > a > .hover-glow {
        transition: none;
    }
}


#mcontainer #notice_box h2 a{display:inline-block;color:#6c6c6c; font-size:20px;font-weight:normal;  font-family:"nsr"}
#mcontainer #notice_box .list {display:none;width:100%;position:absolute;left:0;top:65px; height:130px; overflow:hidden}
#mcontainer #notice_box .list li {overflow:hidden;padding:0 33px 0 35px;box-sizing:border-box; vertical-align:top; height:24px}
#mcontainer #notice_box .list li a {position:relative;width:100%; display:inline-block;  position: relative;} 
#mcontainer #notice_box .list li a span.text {padding:0 0 0 13px; background:url('/images/stu_lab/main/board_li_bg.gif') no-repeat 3px center} 
#mcontainer #notice_box .list li a .text {font-size:15px; width:100%;  display:inline-block; color:#666; letter-spacing:-0.05em;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;}
#mcontainer #notice_box .list li a .date {position:absolute;right:0;top:1px;font-size:15px;color:#666;}

#mcontainer #notice_box .list li:first-child {margin:0 0 5px 0;  height:75px}
#mcontainer #notice_box .list li:first-child .date {position:absolute; top:5px; right:auto; left:0px; color:#1e1e1e; font-size:14px; line-height:1.2em; padding:3px 10px; text-align:center;; border:3px solid #d0d0d0}
#mcontainer #notice_box .list li:first-child .date em {font-size:26px; width:100%; display:block; line-height:1.15em}
#mcontainer #notice_box .list li:first-child .text { float:left; width:100%; color:#000; background:url('/images/stu_lab/main/board_icon.gif') no-repeat 94px 6px; padding:0 0 0 117px; text-align:left; font-size:18px; margin:0px; }
#mcontainer #notice_box .list li:first-child .text_2 { float:left; height:38px; text-overflow:ellipsis; overflow:hidden; line-height:1.3em; width:100%;  color:#858585; padding:0 0 0 97px; font-size:14px;text-align:left; margin:0px; }

#mcontainer #notice_box  .more {display:none;position:absolute; top:30px; right:31px;}

#mcontainer #notice_box  .more a {width:29px; height:29px; display:inline-block;font-size:0;background:url('/images/stu_lab/main/more_icon.gif') no-repeat 0 0;vertical-align:top;}
#mcontainer #notice_box  > ul > li:first-child h2:after {content: ''; display:inline-block;  width:2px; height: 16px;margin:-1px 13px 0;vertical-align:middle; background-color: #a3a3a3;}


#content_box {position:absolute; bottom:0; left:0; display:flex; width:100%; height:230px;}
#mcontainer #notice_box {position:relative; flex:1; width:auto; height:215px; padding:30px 35px; box-sizing:border-box; background:#fff}
#notice_box .notice_header{display:flex; align-items:center; justify-content:space-between;}
#notice_box h2 {margin: 0; color: #111; font-family: "nsr"; font-size: 22px; font-weight: 700;}
#notice_box .more {position: static; display: inline-block;}
#notice_box .more a,
#notice_box a.more {display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: #555; font-size: 14px;}

#m_info {position: relative; flex: 0 0 390px; width: 390px; height: 215px; padding: 28px 30px; box-sizing: border-box; color: #fff; background:linear-gradient(rgba(0, 51, 91, 0.88), rgba(0, 51, 91, 0.88)), url("/images/sm_gamsa/main/info_bg.jpg") no-repeat center center; background-size: cover;}
#m_info h2 {margin: 0 0 10px; color: #fff; font-family: "nsr"; font-size: 18px;}
#m_info .call_info {margin-bottom: 15px;}
#m_info .call_info a {color: #fff; font-size: 25px; font-weight: 700;}
#m_info .location_info {margin: 0; text-align: left;}
#m_info .location_info li {display: flex; padding: 3px 0; color: #fff;}
#m_info .location_info .title {flex: 0 0 55px; width: 55px; font-weight: 700;}
#m_info .location_info .text,
#m_info .location_info a {color: #fff;}

@media (max-width: 1280px) {
    #mvisual .obj_wrap li .layout,
    #mvisual .visual-wrap {
        width: calc(100% - 40px);
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}

@media (max-width: 1000px) {
    #content_box {
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }

    #mcontainer #notice_box {
        flex: 0 0 100%;
        width: 100%;
        height: 200px;
    }

    #mcontainer #m_info {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        min-height: 155px;
    }
}

@media (min-width: 601px) and (max-width: 1280px) {
    #scene1 #vi_btn {
        right: 20px;
    }
}

/* 모바일 버튼 간격 및 위치 조절 */
@media screen and (max-width: 600px) {

    /* 버튼 전체 위치 */
    #scene1 #vi_btn {
        position: absolute;
        top: 185px;             /* 버튼 전체 위아래 위치 */
        left: 50%;
        right: auto;

        width: 100%;
        max-width: 425px;
        height: auto;

        margin: 0;
        padding: 0;

        transform: translateX(-50%);
    }

    /* 버튼 배치 */
    #scene1 #vi_btn > ul {
        display: grid;
        grid-template-columns: repeat(2, 90px);
        gap: 15px;              /* 버튼 사이 간격 */

        justify-content: center;

        margin: 0;
        padding: 0;
    }

    /* 개별 버튼 */
    #scene1 #vi_btn > ul > li {
        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 90px;
        height: 90px;
        aspect-ratio: auto;

        margin: 0;
        padding: 0;
    }

    /* 마지막 버튼도 같은 크기 */
    #scene1 #vi_btn > ul > li:last-child {
        grid-column: auto;
        width: 90px;
        height: 90px;
        aspect-ratio: auto;
    }

    /* 글자 크기 */
    #scene1 #vi_btn li > a {
        font-size: 14px;
        padding: 8px;
    }

}

/* 태블릿 : 601px ~ 768px */
@media screen and (min-width: 601px) and (max-width: 768px) {

    /* 버튼 묶음 위치 */
    #scene1 #vi_btn {
        position: absolute;
        top: 42px;                /* 전체 상하 위치 */
        left: auto;
        right: 20px;              /* 오른쪽 여백 */
        width: 360px;
        height: auto;
        margin: 0;
        transform: none;
    }

    /* 버튼 배치 */
    #scene1 #vi_btn > ul {
        display: grid;
        grid-template-columns: repeat(2, 120px);
        grid-template-rows: repeat(3, 120px);
        gap: 0;

        justify-content: end;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 모든 버튼 공통 */
    #scene1 #vi_btn > ul > li {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 120px;
        height: 120px;
        margin: 0;
        padding: 0;

        transform: none;
        overflow: hidden;
    }

    /* 1행 */
    #scene1 #vi_btn > ul > li.btn1 {
        grid-column: 1;
        grid-row: 1;
    }

    #scene1 #vi_btn > ul > li.btn2 {
        grid-column: 2;
        grid-row: 1;
    }

    /* 2행 */
    #scene1 #vi_btn > ul > li.btn3 {
        grid-column: 1;
        grid-row: 2;
    }

    #scene1 #vi_btn > ul > li.btn4 {
        grid-column: 2;
        grid-row: 2;
    }

    /* 3행 */
    #scene1 #vi_btn > ul > li.btn5 {
        grid-column: 2;
        grid-row: 3;
        aspect-ratio: auto;
    }

    /* 링크 영역 */
    #scene1 #vi_btn > ul > li > a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
        padding: 8px;

        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    #scene1 #vi_btn li.btn1{top:0; left:0;}
    #scene1 #vi_btn li.btn2{top:0; left:0;}
    #scene1 #vi_btn li.btn3{top:0; left:0;}
    #scene1 #vi_btn li.btn4{top:0; left:0;}
    #scene1 #vi_btn li.btn5{top:0; left:0;}

}

/* 최종 권장 코드 */
@media screen and (max-width: 600px) {

    #scene1 #vi_btn > ul > li.btn1,
    #scene1 #vi_btn > ul > li.btn2,
    #scene1 #vi_btn > ul > li.btn3,
    #scene1 #vi_btn > ul > li.btn4,
    #scene1 #vi_btn > ul > li.btn5 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0;
    }

    /* 버튼 간격 */
    #scene1 #vi_btn > ul {
        column-gap: 15px;
        row-gap: 15px;
    }
    
    /* 버튼 전체 위치 조절 */
    #scene1 #vi_btn {
        top: 189px;       /* 숫자가 작을수록 위로 이동 */
        left: auto;
        right: 10px;      /* 오른쪽 여백 */
        transform: none;

        width: auto;
        max-width: calc(100% - 30px);
        margin: 0;
    }

    /* 버튼 오른쪽 정렬 */
    #scene1 #vi_btn > ul {
        display: grid;
        grid-template-columns: repeat(3, 90px);

        column-gap: 15px;
        row-gap: 15px;

        justify-content: end;
        margin: 0;
        padding: 0;
    }
    
     #mvisual .obj_wrap li .text_1 {
        /* 글자 크기 */
        font-size: 34px;

        /* 줄 간격 */
        line-height: 1.4;

        /* 위치 조절 */
        padding-top: 22px;
        padding-left: 0px;

        /* 기존 스타일 유지 */
        letter-spacing: -0.5px;
    }

}