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

@font-face {
    font-family: 'Bazzi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/Bazzi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
@media all {
    .clear:after { 
        content:""; 
        display:block; 
        clear:both;
    }
    * { 
        margin:0; padding:0; outline:none; box-sizing:border-box; 
        /* 모바일 클릭시 배경색 생기는 효과 */
        -webkit-tap-highlight-color: transparent !important;
    }
    body {
    line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif !important; word-wrap: break-word; word-break: keep-all;
    }
    h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif !important; line-height:1; font-size: 1em; }
    ul, ol { list-style:none; margin:0; padding: 0; }
    a { 
        outline:0; text-decoration:none; color: #000; font-family: 'Noto Sans KR', sans-serif !important;
        background: none;
    }
    a:focus,
    a:active,
    a:hover {
        outline: 0 !important;
        text-decoration: none !important;
    }
    figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
    img { border:none; outline:none; max-width: 100%; }
    p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all; }
    button, input, submit { border: none ; background: none; }
    dt { font-weight: normal; }
    ::placeholder { font-family: 'Noto Sans KR', sans-serif !important; }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        box-shadow: none !important;
        -webkit-text-fill-color: none !important;
    }
    select {
        /* -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none; */
    }
    button:focus{ 	
        border: none;
        outline:none;
    }
}   



:root {
	/* 컨텐츠 너비 */
	--containerV1-width : 1400;

	--main-color : #367dff; /* mainColor */		

    /* 해드 높이 */
    --header-height:100px;
}
@media (1200px <= width <= 1530px){
    :root { --header-height:65px; }
}
@media (max-width:1200px){
    :root { --header-height:60px; }
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: calc(var(--containerV1-width) * 1px); }
@media (max-width:1430px) {
	.containerV1 { padding: 0 15px; }
}

/* 확대 축소 애니메이션 */
@keyframes ani_scale1 {
	50% { transform:scale(1.005); }
}
@keyframes ani_scale2 {
	50% { transform:scale(1.04); }
}
@keyframes ani_scale3 {
	50% { transform:scale(1.00); }
}

.wrapper { overflow-x: hidden; }

/* 게시판 글 없을 때 */
.post-none { font-size: 16px; }

/* 드래그 선택 금지 */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
@media all { /* pc & mob */
    /* 사이트맵 */
    .box-siteMap {
        /* 사이트맵 기준 폰트 */
        --font-size-standard : 10;
        font-size: 
        min(calc(var(--font-size-standard) / 1920 * 100vw),
        calc(var(--font-size-standard) * 1px));
        position: fixed; left: 0; top: 0; width: 100%; height: 100%;
        background: #fff; z-index: 9999;
        display: flex; transform: translateX(100%);
        transition: 0.5s;
    }
    .box-siteMap.active { transform: translateX(0%); }
    .box-siteMap a { color: inherit; }
    .box-siteMap .closeBtn {
        position: absolute; right: 0.5em; top: 1em;
        font-size: 50px; width: 1em; height: 1em;
        line-height: 1; 
    }
    .box-siteMap .box-left {
        /* 사이즈 최고 최저 값 기준 1920 */
        --box-left-size-max: 50em;
        --box-left-size-min: 350px;
        padding: 5em; color: #fff;
        width: max(var(--box-left-size-min),var(--box-left-size-max)); 
        background: var(--main-color);
        display: grid; align-content: space-between;
    }
    .box-siteMap .box-left .inner-start {
        display: flex; flex-wrap: wrap; gap:15px;
        justify-content: space-between;
        align-items: baseline;
    }
    .box-siteMap .box-left .inner-start .logo-siteMap {
        /* 사이즈 최고 최저 값 기준 1920 */
        --logo-siteMap-size-max: 19.9em;
        --logo-siteMap-size-min: 160px;
        width: max(var(--logo-siteMap-size-min),var(--logo-siteMap-size-max)); 
    }
    .box-siteMap .box-left .inner-start .box1 {
        /* 사이즈 최고 최저 값 기준 1920 */
        --box1-size-max: 1.8em;
        --box1-size-min: 12px;
        font-size: max(var(--box1-size-min),var(--box1-size-max)); 
        font-weight: bold;
    }
    .box-siteMap .box-left .inner-start .box1 .link-kakao {
        display: flex; padding-bottom: 0.4em; margin-bottom: 0.4em;
        border-bottom: 1px solid rgba(255,255,255,0.5);
        align-items: center; gap:7px;
    }
    .box-siteMap .box-left .inner-start .box1 .link-kakao img { 
        width: 1.27778em; 
    }
    .box-siteMap .box-left .inner-center {
        /* 사이즈 최고 최저 값 기준 1920 */
        --inner-center-size-max: 4em;
        --inner-center-size-min: 30px;
        font-size: max(var(--inner-center-size-min),var(--inner-center-size-max)); 
        font-weight: bold;
        line-height: 1.5;
    }
    .box-siteMap .box-left .inner-end {
        display: flex; justify-content: space-between;
        gap:15px; align-items: center;
    }
    .box-siteMap .box-left .inner-end .wrap-login {
        display: flex; font-size: 14px; gap:1.2em;
    }
    .box-siteMap .box-left .inner-end .list-sns {
        display: flex; gap:1.7em; 
    }
    .box-siteMap .box-left .inner-end .list-sns > li {
        width: 29px;
    }
    .box-siteMap .box-right {
        flex:1; display: grid; align-content: center;
    }
    .box-siteMap .box-right .main_menu {
        padding-left: 11.6em; display: grid;
        gap:38px;
    }
    .box-siteMap .box-right .main_menu > li {
        display: flex; align-items: baseline;
    }
    .box-siteMap .box-right .main_menu > li > a {
        color: var(--main-color); font-size: 3.6em;
        font-weight: bold; width: 7.41em;
    }
    .box-siteMap .box-right .sub_menu {
        flex:1;
        display: flex; flex-wrap: wrap; gap:25px 22px;
    }
    .box-siteMap .box-right .sub_menu > li > a {
        /* 사이즈 최고 최저 값 기준 1920 */
        --sub_menu-size-max: 1.8em;
        --sub_menu-size-min: 15px;
        display: block; cursor: pointer;
        font-size: max(var(--sub_menu-size-min),var(--sub_menu-size-max)); 
    }
    

    #header {
        /* 해드 폰트 사이즈 */
        --font-size-pc: 18;
        --font-size-mob:15;

        /* 로고 너비 */
        --logo-width:191;

        /* 소메뉴 폰트 사이즈 */
        --sub-menu-font-size-pc: 16;
        --sub-menu-font-size-mob: 12;
        --sub-menu-line-height:3.2;
        --sub-menu-top-bottom-gap:2;
        
    
        /* 
            ((가장 높은 소메뉴 갯수) * (소메뉴lineheight) * 1em) +
            ((소메뉴상하패딩) * 2 * 1em) 
        */
        --sub-menu-bg-height:
        calc((var(--i) * var(--sub-menu-line-height) * 1em) + (var(--sub-menu-top-bottom-gap) * 2 * 1em));
        font-size: min( calc( var(--font-size-mob) / 350 * 100vw ), calc(var(--font-size-pc) * 1px) );
        position: sticky; top: 0; left: 0; z-index: 2001; width: 100%;
        background: #fff;
        box-shadow: 0 0 1em rgba(0,0,0,0.1);
    }
    /* (모바일) 메뉴 배경 */
    #header .mob_menu_bg.noneV1 { display: none; }
    /* pc mob 보이는 유무 설정 */
    #header :is(.pc,.mob) { display: none; }
}

@media (min-width:1200px) { /* pc */
    #header .pc { display: block; }
    #header {
        height: var(--header-height);
    }

    #header .wrapV1 {
        display: flex; justify-content: space-between; align-items: center;
    }

    #header .logo {
        padding-left: min(calc(73 / 1920 * 100vw),73px);
    }

    #header #gnb-main { 
        display: flex; justify-content: space-between; 
        align-items:center;
    }

    #header #gnb-main .menu_box {
        position: relative;
        display: flex; justify-content: space-between; 
        align-items:center;
    }
    /* 대메뉴 */
    #header #gnb-main .menu_box ul.main_menu {
        display: flex;
    }
    #header #gnb-main .menu_box ul.main_menu > li {
        text-align: center; position: relative;
    }
    #header #gnb-main .menu_box ul.main_menu > li > a {
        line-height: var(--header-height); padding: 0 clamp(1em, calc(30 / 1920 * 100vw),30px); 
        display: block; height: 100%; width: 100%; font-size: 1em;
        color: #000; font-weight: 500; transition:0.4s; 
        min-width: 8em; text-align: center; cursor: pointer;
        position: relative;
    }
    #header #gnb-main .menu_box ul.main_menu > li > a:after {
        content: ''; opacity: 0; transition:0.4s;
        position: absolute; left: 0; top: 0; width: 100%; height: 3px;
        background: var(--main-color);
    }
    #header #gnb-main .menu_box ul.main_menu > li:hover > a { 
        color: var(--main-color);
    }
    #header #gnb-main .menu_box ul.main_menu > li:hover > a:after {
        opacity: 1;
    }
    #header #gnb-main .menu_box ul.main_menu > li.on > a { 
        color: var(--main-color);
    }
    #header #gnb-main .menu_box ul.main_menu > li.on > a:after {
        opacity: 1;
    }
    /* 소메뉴 */
    #header .sub_menu { 
        font-size: min( calc( var(--sub-menu-font-size-mob) / 350 * 100vw ), calc(var(--sub-menu-font-size-pc) * 1px) );
        position: absolute; left: 0; top: 100%; text-align: center; width: 100%;
        padding:0; z-index: 1000; height: 0; transition: 0.2s; overflow: hidden;
        /* 작업용 */
        /* padding: calc(var(--sub-menu-top-bottom-gap) * 1em) 0; 
        height: var(--sub-menu-bg-height); */
    }
    #header .sub_menu > li > a {
        display: block;
        color: #000; padding: 0 0.8em; 
        cursor: pointer; transition:0.4s;
    }
    #header .sub_menu > li > a span.txt {
        display: block; line-height: var(--sub-menu-line-height);
    }
    #header .sub_menu > li > a span.txt.big {
        line-height: 1.5; margin: 0.1em 0;
    }
    #header .sub_menu > li > a:hover {
        color: rgba(255,255,255,1); background: var(--main-color);
    }
    #header .sub_menu_bg {
        font-size: min( calc( var(--sub-menu-font-size-mob) / 350 * 100vw ), calc(var(--sub-menu-font-size-pc) * 1px) );  
        height: 0; transition: 0.2s;
        /* 작업용 */
        /* height: var(--sub-menu-bg-height); */
    }
    #header .sub_menu_bg > div { 
        background: #fff; height: 100%; 
    }

    /* 로그인 회원가입 */
    #header .wrap-login {
        font-size: 0.78em; margin-left: 40px;
        display: flex; gap:1em;
    }

    /* 버튼 사이트맵 */
    #header .btn-siteMap {
        width: var(--header-height);
        background: var(--main-color);
        height: var(--header-height);
        margin-left: 30px;
        position: relative; z-index: 2001;
    }
    #header .btn-siteMap i { 
        color: #fff; font-size: 2.2em;
    }

    /* mouseover & mouseleave */
    #header.showMenu {
        box-shadow:none;
    }
    #header.showMenu .sub_menu {
        padding: calc(var(--sub-menu-top-bottom-gap) * 1em) 0; 
        height: var(--sub-menu-bg-height);
    }
    #header.showMenu .sub_menu_bg {
        height: var(--sub-menu-bg-height);
        box-shadow:0 10px 10px rgba(0,0,0,0.05);
        border-top: 1px solid #eee;
    }


}
@media (1200px <= width <= 1530px) {
    #header {
        --font-size-pc: 16;
        --sub-menu-font-size-pc: 14;
    }
    #header .wrapV1 { gap:1em; }
    #header .logo { padding-left: 15px; }
    #header .wrap-login { margin-left: 15px; }
    #header .btn-siteMap { margin-left: 15px; }
    #header #gnb-main .menu_box ul.main_menu > li > a {
        padding: 0 15px; min-width: 7.3em;
    }
}
@media (max-width:1200px) { /* mob */
    #header .mob { display: block; }
    .box-siteMap { display: none; }
    #header { 
        height: var(--header-height); 
    }
    #header .wrapV1 {
        display: flex; justify-content: space-between;
        align-items: center; height: 100%;
        padding: 0 15px;
    }

    #header .logo {
        width: max(180px,calc(var(--logo-width) / 991 * 100vw));
    }

    /* 모바일 메뉴 열기 버튼 */
    #header .btn_menu { 
        --btn-icon-height:3px;
        --btn-icon-gap:5px;
        width: 1em; height: 1em; line-height: 1;
        color: #000; font-size: 2em;
    }
    
    #header #gnb-main { 
        --close-size:45px;
        position: fixed; right: 0; top: 0; 
        width: 80%; max-width: 580px; height: 100%; background: #fff;
        transform: translateX(calc(100% + var(--close-size)));
        transition: 0.4s;
        /* 작업용 */
        /* transform:translateX(0); z-index: 8600; */
    }
    /* 닫기 버튼 */
    #header .closeBtn { 
        position: absolute; left: 0; top: 0; transform: translateX(-100%);
        width: var(--close-size); height: var(--close-size);
        line-height:var(--close-size); 
        background: var(--main-color);
        color: #fff; font-size: calc(var(--close-size) - 5px ); display: block;
    }
    #header #gnb-main.showMenu { transform:translateX(0); z-index: 8600; }
    .mob_menu_bg { 
        position: fixed; left: 0; top: 0; width: 100%; height: 100vh; 
        background: rgba(0,0,0,0.8); z-index: 8500;
        /* 작업용 */
        /* display: block !important; */
    }
    #header .menu_box {
        width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; 
        position: absolute; top:0;
        display: grid; align-content: start; padding: 0 1em;
    }

    /* 상단 텍스트 박스 */
    #header .textBox-top {
        order:1;
        margin: 0 -1em 1.5em; background: var(--main-color);
        padding: 1.5em 0; text-align: center;
    }
    #header .textBox-top .text1 {
        font-size: 1.5em; line-height: 1.4; font-weight: bold;
        color: #fff; margin-bottom: 0.5em;
    }
    #header .textBox-top .list-sns {
        display: flex; gap:0.8em; justify-content: center;
    }
    #header .textBox-top .list-sns > li {
        width: 25px;
    }

    #header .menu_all { order:3; }
    #header .main_menu {  padding: 0 5px; }
    #header .main_menu > li { 
        border-bottom: 1px solid #eee; position: relative; 
    }
    
    #header .main_menu > li > .arrow { 
        position: absolute; right: 0; top: 0.5em; width: 2em; height:2em; 
    }
    #header .main_menu > li > .arrow:after { 
        content: '\f107'; position: absolute; left: 50%; top: 50%; 
        transform:translate(-50%,-50%); color: #000; font-family: fontAwesome;
        transition: 0.3s;
    }
    #header .main_menu > li > .text { 
        display: inline-block; pointer-events: none; 
        font-weight: 500;
    }
    #header .main_menu > li > .text > * { 
        display: inline-block; padding: 1em 0;  
    }
    #header .sub_menu { 
        background: #f2f2f2; font-size: 0.9em; padding:0 1em; 
        height: 0; overflow: hidden; transition: 0.5s;
    }
    #header .main_menu > li.g07 .sub_menu {
        --j:1 !important;
    }
    #header .sub_menu > li {     
        border-top: 1px solid #fff;
        border-bottom: 1px solid #d9d9d9; 
    }
    #header .main_menu > li.g07 .sub_menu > li { border-bottom: none; border-top: none; }
    #header .sub_menu > li:first-child { border-top: none; }
    #header .sub_menu > li:last-child { border-bottom: none; }
    #header .sub_menu > li > a { 
        display: block; padding: 1.2em 0; height: 3.4em; color: #000; 
    }

    
    /* 로그인 회원가입 */
    #header .wrap-login {
        order:2; display: flex; gap:0.3em; margin-bottom: 1.5em;
    }
    #header .wrap-login > li {
        flex:1;
    }
    #header .wrap-login > li > a {
        display: block; text-align: center; color: var(--main-color);
        border:2px solid var(--main-color); padding: 0.5em 0 0.65em;
        font-weight: bold;
    }

    /* hover */
    #header .main_menu > li:hover .sub_menu {
        /* 높이값:
            소메뉴 갯수 * (.inner {padding-top-bottom} + .inner > li {border-top-bottom}) + .inner > li > a {height})      
        */
        height: calc(var(--j) * (3.4em + 2px) + 1em ); padding: 0.5em 1em; 
    }
    #header .main_menu > li:hover .arrow:after { 
        transform:translate(-50%,-50%) rotate(180deg); 
    }
}
/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
#index {
    --font-size-pc: 10;
    --font-size-mob: 10;
    font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) );
}

/* 모바일 */
#index .btnBox_mob {
    display: grid; grid-template-columns: repeat(3,1fr);
    color: #313131;
}
#index .btnBox_mob > li > a {
    display: block; text-align: center; padding: 3.5em 0.5em;
    color: inherit;
}
#index .btnBox_mob > li:nth-child(odd) > a {
    background: #eee;
}
#index .btnBox_mob > li > a .icon {
    width: 6em; margin: 0 auto 1.5em;
}
#index .btnBox_mob > li > a .text { 
    font-size: 2.1em; font-weight: 500; line-height: 1.4;
}
#index .box1_mob { padding: 5em 0; color: #313131; }
#index .box1_mob .cs { 
    text-align: center; 
    display: flex; justify-content: center; align-items:center;
    padding-bottom: 4em; gap:2em;
}
#index .box1_mob .cs a { color: inherit; }
#index .box1_mob .cs .text1 { 
    font-size: 2.4em; line-height: 1.2; font-weight: 500;
}
#index .box1_mob .cs .tel {
    font-size: 5em; font-weight: bold;
}
#index .box1_mob .list-sns {
    display: flex; font-size: 1.6em; gap:1em;
    justify-content: center;
}
#index .box1_mob .list-sns > li > a {
    display: flex; align-items:center; background: #ddd;
    gap:0.6em; border-radius: 0.5em; color: inherit;
}
#index .box1_mob .list-sns img { font-size: 1em; width: 2.2em; }
#index .box1_mob .list-sns p { padding-right: 1em; }

/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/








/* 서브페이지 패딩 */
.tmt_sub_frame { padding:100px 0 120px; min-height: 70vh;}
@media (max-width:768px) {
    .tmt_sub_frame { padding: 70px 0 80px; }
}


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--main-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--main-color);}

/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal { 
z-index: 9999; 
padding-right: 0px !important;
}
/* 모달창 열 때 padding-right:0 */
.modal-open { padding-right: 0px !important; }
.modal-dialog {z-index: 9999;}
.modal-backdrop { z-index: 9998;}
.onlineModal .modal-dialog { width: 90%; height: 90%; }
.onlineModal .modal-content { 
    height: 100%; display: grid;
    grid-template-rows: auto 1fr;
}
.onlineModal .modal-header {
    align-items:center;
}
.onlineModal .modal-header .close { margin: 0; }
@media (max-width:768px) {
    .onlineModal .modal-dialog { width: auto; }
}






/* 페이지 스타일 */
.page_frame {font-size: min(calc(10 / 500 * 100vw), 10px); width: 100%;}
.page_frame .SCD_titleBox {text-align: center; margin-bottom: 7em;}
.page_frame .SCD_titleBox > p { text-transform: uppercase; }
.page_frame .SCD_titleBox > p.SCD_sub_title {color: var(--main-color); font-size: 2em; font-weight: 300; line-height: 1.3;}
.page_frame .SCD_title-V1 {font-size: 5.5em; color: #000; line-height: 1.2; font-weight: bold;}

/* 공용탭 스타일 */
    /* 상단 탭상자 */
    .tab_frame .SCD_tab_box {
        /* 탭 너비 및 탭 갯수 */
        --item-width:232px;
        --item-length:3;
        width: 100%; max-width: calc(var(--item-width) * var(--item-length)); margin: 0 auto 4em; 
        display: grid; grid-template-columns: repeat(var(--item-length), 1fr);
    }
    .tab_frame .SCD_tab_box > li {
        padding: 1.9em 1em; display: flex; align-items: center; border: 1px solid #d2d2d2; text-align: center;
        justify-content: center; color: #434343; gap: 0.5em; transition: 0.3s; cursor: pointer;
    }
    .tab_frame .SCD_tab_box > li:not(:last-child) {border-right: none;}
    .tab_frame .SCD_tab_box > li > .tab_text {font-size: 1.8em; line-height: 1.2; transition: 0.3s;}

    /* tab_active */
    .tab_frame .SCD_tab_box > li.on_li {background: var(--main-color); border-color: transparent;}
    .tab_frame .SCD_tab_box > li.on_li > .tab_text {color: #fff;}


/* 게시판 검색창 */
.bo_sch { margin: 0 !important; transform:translate(-50%,-50%); }
/* 분실물 찾기 검색창 빼고 적용 */
.bo_sch:not(.loss) {
	width: 310px !important;
}
.bo_sch .sch_input { width: 235px !important; }