@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* reset */
@media all {
    .clear:after { 
        content:""; 
        display:block; 
        clear:both;
    }
    * { margin:0; padding:0; outline:none; box-sizing:border-box; }
    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; }
    a:focus { outline:none; }
    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;
    }
}   

/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; float: none; }
.tabBox1 .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox1 .nav > li:hover > a { background: none; }
.tabBox1 .nav > li.active > a { border: none; background: none; }

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

	--main-color : #366d91; /* mainColor */
	--main-color2 : #1f1e42; /* mainColor2 */
    --basic-border-color: #366d91;	/* 게시판 및 게시판헤드 등 기타 버튼들 border 컬러 */
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: calc(var(--containerV1-width) * 1px); }
@media (max-width:1330px) {
	.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); }
}

.ikwrap { overflow-x: hidden; }

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


/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
@media all {
    #header {
        --inner-H: 350px;
        --head-font-color: #fff;
        --head-H: 100px;
        position: fixed; left: 0; top: 0; color: var(--head-font-color);
        width: 100%; height: var(--head-H); z-index: 1000; transition:0.4s; background: rgba(0,0,0,0.4);
        border-bottom: 1px solid transparent;
    }
    #header::before {
        content:''; position: absolute;
        bottom: 0; left: 0; width: 0; height: 1px;
        background: #ccc;
    }

    #header > .containerV1 {height: 100%;}
    
    /* 로고 */
    #logo {height: 100%; overflow: hidden;}
    #logo a {display: flex; align-items: center; height: inherit;}
    #logo svg {width: 154px; height: inherit;}
    #logo svg path {fill:#fff !important; transition: 0.5s;}

    #header .itemBox {
        width: 100%; height: 100%; display:flex; justify-content:space-between; align-items:center; 
        position: relative; z-index: 2; margin: 0 auto;
    }

    /*모바일 검은 배경*/
    #header .menuBox_bg {
        position: fixed; right: 0; top: 0; z-index: 8000;
        width: 100%; height: 100vh; background: rgba(0,0,0,0.5);
    }

    /* main_menu ---------------------------------------------------*/
    #nav {height: 100%;}
    #nav .nav_inner {display:flex; align-items:center; width: 100%; height: inherit; gap: 0 138px;}
    #nav .outer {display: flex; height: inherit;}
    #nav .outer > li {height: 100%; color: var(--head-font-color);}
    #nav .outer > li:not(:last-child) {padding-right: 40px;}
    #nav .outer > li > a {
        display: flex; color: inherit;  font-size: 18px; height: 100%; line-height: 1.3; align-items: center;
        position: relative; transition: all 0.3s;
    }
    #nav .outer > li > a > span {position: relative;}
    #nav .outer > li > a > span::before {
        content:''; position: absolute; bottom: -5px; left: 0;
        width: 100%; height: 2px; background: #fff; display: none;
    }

    /* sub_menu ---------------------------------------------------*/
    #nav .outer > li > .inner_box {
        position: absolute; z-index: -1; top: 90%; left: 0; transition: 0.1s;
        width: 100%; height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    }
    #nav .outer > li > .inner_box .inner {
        position: relative;
        display: grid; grid-template-columns: repeat(auto-fill, minmax(20%, auto));
        gap: 20px 60px; padding: 35px 20px 0; width: 60%; height: fit-content; margin: 0 auto;
    }
    #nav .outer > li > .inner_box .inner > li > a {
        display: flex; align-items: center; justify-content: space-between; 
        font-size: 16px; color: #343434; font-weight: 400; 
        padding: 10px 0; border-bottom: 3px solid var(--main-color);
        transition: 0.3s; position: relative;
    }
    #nav .outer > li > .inner_box .inner > li > a::before {
        content:""; position: absolute; top: 0; left: 0;
        width: 0; height: 100%; background: var(--main-color);
        transition: 0.5s; z-index: -1; opacity: 0;
    }

    #nav .outer > li > .inner_box .inner > li > a > i {
        color: var(--main-color); font-size: 1.2em; border-radius: 50%;
        transition: 0.3s;
    }

    /* inner menu 뒷배경 */
    #header .inner_bg {
        position: absolute; z-index: -1; left: 0;
        top: 50%; opacity: 0; visibility: hidden;
        width: 100%; height: var(--inner-H); background: #fff;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
        /* top: 100%; */
    }
    #header .inner_bg svg {
        width: 108%; height: calc(var(--inner-H) + 450px); position: absolute; 
        top: -52%; left: -5%; opacity: 0; transition: 0.2s;
    }

    


    /* 오른쪽 옵션 */
    #nav .nav_item {display: flex; align-items: center; gap: 20px;}
    #nav .nav_item label {margin-bottom: 0;}
    #nav .nav_item .link {display: block}
    #nav .nav_item .link > a {
        display: flex; align-items: center; justify-content: center;
        color: #fff; background: var(--main-color); border-radius: 40px;
        font-size: 14px; color: var(--head-font-color); width: 75px; height: 34px;
    }


    /* 헤드 효과---------------- */
    @media (min-width: 991px) {
        #nav .outer > li > a:hover {color: var(--main-color);}
        #header.header_full #nav .outer > li:hover > .inner_box {visibility: visible; height: var(--inner-H); opacity: 1; z-index: 2; top: 100%; transition: 0.3s;}
        /* transition-delay: 0.3s; */
        #nav .outer > li > .inner_box .inner > li:hover > a {padding: 10px; color: #fff;}
        #nav .outer > li > .inner_box .inner > li:hover > a::before {width: 100%; opacity: 1;}
        #nav .outer > li > .inner_box .inner > li:hover > a > i {background: #fff;}  
        
        #header.header_full::before {width: 100%; transition: 2.5s;}
        #header.header_full {--head-font-color: #000; background: #fff; }
        #header.header_full #logo svg .path-color1 {fill: #396C90 !important;}
        #header.header_full #logo svg .path-color2 {fill: #201E42 !important;}
        #header.header_full #logo svg .path-color3 {fill: #080A0A !important;}

        #header.header_full .inner_bg {top: 100%; opacity: 1; visibility: visible; z-index: 1; transition: 0.5s;}
        #header.header_full .inner_bg svg {opacity: 0.2; left: 0; transition: 1s 0.2s;}

        #header.header_full .nav_item .search img,
        #header.header_full .nav_item .map img {filter: brightness(0%);}
        #header.header_full .link > a {color: #fff;}
        #header.header_full #nav .outer > li > a.on > span::before {background: #000;}
    }

    /* 해당 페이지일때 */
    #nav .outer > li > a.on > span::before {display: block;}

}

@media (max-width: 1330px) {
    #logo svg {width: 120px;}
    #nav .nav_inner {gap: 0 40px;}
    #nav .outer > li > a {font-size: 16px;}
    #nav .outer > li:not(:last-child) {padding-right: 30px;}
    #nav .outer > li > .inner_box .inner {width: 80%;}
}

@media (min-width: 991px) {
    #nav .svg_bg {display: none;}
    #nav .outer > li > a > i {display: none;}
    #header .menuBox_bg {display: none;}
    #header .nav_topBox {display: none;}
}


/* 모바일 ---------------------------------------------------------*/
@media (max-width: 991px) {

    #header {--head-H: 65px;}

    /* 모바일 열기 버튼 */
    .open_btn { font-size: 40px; color: #fff; cursor:pointer;}

    #nav {
        --mob-bg : #fff;
        --nav_width: 30em;
        background-color: var(--mob-bg); width: var(--nav_width); height: 100%;  display: block;
        position: fixed; right:0; top: 0; z-index:9999; margin-right:-30em;  transition: margin-right 0.3s;
        overflow: hidden;
    }

    #nav .svg_bg {position: absolute; bottom: 0; left: 0; } 
    #nav .svg_bg svg {
        font-size: min(calc(10 / 680 * 100vw), 10px);
        opacity: 0.2; width: 160em; height: calc(var(--inner-H) + 20em);
    }

    #nav .nav_inner .nav_topBox {display: flex; align-items: center; width: 100%; background: var(--mob-bg); padding: 20px; position: relative;}
    #nav .nav_inner .nav_logo {display: flex; align-items: center; width: 120px;}
    #nav .nav_inner { 
    width: var(--nav_width); height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; 
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    }

    /* 모바일닫기버튼 */
    .close_btn {
        width: 30px; height: 30px; margin-right:0; margin-left:auto; cursor:pointer;
        position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    }
    .close_btn::before, .close_btn::after {
        content:''; position: absolute; background: #555; width: 1px; height: 100%;
        left: 50%;
        
    }
    .close_btn::before {transform: rotate(45deg);}
    .close_btn::after {transform: rotate(-45deg);}


    #header .menuBox_bg {display: block;}/*	menubox_bg가 메뉴를 연 상태로 바로 pc화면으로 바꿀 경우 그대로 남아서 pc에서 none 처리해둔 걸 모바일에서 푸는 용도*/

    /* 메인메뉴 ------------------------------------------------------------------------------------ */
    #nav .outer { display: block; margin-top: 10px; padding: 0 20px; order: 3;}
    #nav .outer > li {
        width: 100%; overflow: hidden; height: auto;
        position: relative;
    }
    #nav .outer > li:not(:last-child) {padding-right: 0;}
    #nav .outer > li > a { 
        font-weight: 500; padding:20px 0; color: #000; position: relative;
        pointer-events:none; height: auto; line-height: 1; font-size: 20px;
        cursor: pointer;
    }
    #nav .outer > li > a > i.plus_icon {
        width: 20px; height: 20px; border-radius: 50%; display: flex; 
        align-items: center; justify-content: center; position: relative; left: 7px;
        font-size: 20px; background: var(--main-color); color: #fff;
        opacity: 0; visibility: hidden;
    }
    

    #nav .outer > li > a > i.fa-angle-right {
        color: var(--menu-font-color); display: inline-block;
        position: absolute; right: 10px; top: 20px; transform: rotate(90deg); transition: all 0.3s;
    }

    /* 서브메뉴 -------------------------------------------------------------------------------------------- */

    #header .inner_bg {display: none;}

    #nav .outer > li > .inner_box {top: unset; position: relative; z-index: 1; opacity: 0; visibility: hidden; height: 0; transition: 0.5s;}
    #nav .outer > li > .inner_box .inner {
        position: relative; padding: 0; display: block;
        width: 100%; height: 100%;
    }
    #nav .outer > li > .inner_box .inner > li {
        display: block; margin-bottom:0; position: relative; padding: 0;
    }

    #nav .outer > li > .inner_box .inner > li > a {
        padding: 12px 10px; position: relative; transition: all 0.3s;
        border-bottom: unset; font-size: 18px; border-bottom: 1px solid #eee;
    }
    #nav .outer > li > .inner_box .inner > li > a > i {display: none;}


    /* nav-item ---------------------------------------------------------------------*/
    #header .nav_item {padding: 10px 15px; justify-content: end; gap: 30px;}
    #header .nav_item .search img,
    #header .nav_item .map img {filter: brightness(0%);}
    #nav .nav_item .link > a {width: 125px;}




    /* 해당페이지 일때 */
    #nav .outer > li > a.on > span::before {display: none;}
    #nav .outer > li > a.on > i.plus_icon {opacity: 1; visibility: visible;}

    /* outer 클릭시 inner보이는 효과 */
    #nav .outer > li.on_sub > .inner_box {opacity: 1; visibility: visible; height: auto;}
    #logo.logo_hide {opacity: 0; visibility: hidden;}
    #nav .outer > li.on_sub > a > i.fa-angle-right {transform: rotate(-90deg);}


    #header.header_full::before {display: none;}
    #header.header_full .inner_bg {opacity: 0; visibility: hidden; display: none;}

    /* 모바일메뉴박스 보이게 하는 클래스 */
    #nav.inactive { margin-right: -1px; }
}


@media (max-width: 768px) {
    #nav {--nav_width: 100%; margin-right: -100%;}
    #nav .svg_bg svg {height: 100%;}
    #nav .outer > li:not(:last-child) {margin-bottom: 10px;}
}




/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/


/* 검색창  */
#search_box {
    font-size: min(calc(10 / 650 * 100vw), 10px);
    position: fixed; top: -100%; left: 0;
    z-index: 100000; width: 100%; padding: 1em 15px 4em;
    background: #fff; transition: top 0.8s;
    box-shadow: 0px 3px 35px -17px #bbb;
}
#search_box .search_logo {width: fit-content; margin: 0 auto;}
#search_box svg {width: 25em; height: 10em;}

#search_box .search_wrap {width: 100%; max-width: 600px; margin: 5em auto 0;}
#search_box .search_wrap .input-group {display: flex; gap: 10px; align-items: center;}
#search_box .search_wrap .input-group .form-control {height: max(45px, 3.4375em); font-size: max(14px, 1.6em);}
#search_box .search_wrap .btn {font-size: 2.5em;}

#search_box .sch_close {
    width: max(30px, 5em); height: max(30px, 5em); margin-right:0; margin-left:auto; cursor:pointer;
    position: absolute; right: 3%; top: 15%; transform: translateY(-50%);
}
#search_box .sch_close::before, 
#search_box .sch_close::after {
    content:''; position: absolute; background: #555; width: 1px; height: 100%;
    left: 50%;
}
#search_box .sch_close::before {transform: rotate(45deg);}
#search_box .sch_close::after {transform: rotate(-45deg);}

#search_box.search_on {top: 0;}

@media (max-width: 650px) {
    #search_box .search_logo {margin: 0;}
}

@media (max-width: 500px) {
    #search_box svg {width: 23em; height: 8em;}
    #search_box .search_wrap .input-group {gap: 0;}
}





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

.index_wrap .section {
    font-size: min(calc(10 / 1920 * 100vw), 10px); /* 인덱스 전체 em 사이즈 표준 */
}


@media (max-width: 991px) {
    .index_wrap .section {/* 991은 1330부터 줄임 */
        font-size: min(calc(10 / 768 * 100vw), 10px);
    }
    .index_wrap .section:not(:last-child) {
        min-height: calc(var(--vh, 1vh) * 100);
        display: flex; align-items: center;
    }

    /* data-scroll-animation */
    .fade--up {transition: 1s 0.5s;}
    .fade--up[data-scroll="out"] {transform: translateY(10%); opacity: 0; transition: 0.5s;}
}

@media (max-width: 768px) {
    .index_wrap .section {
        font-size: min(calc(10 / 600 * 100vw), 10px);
    }
}


.index_wrap .section2 {
    background: url('img/section2_bg.jpg') no-repeat center center / cover;
    position: relative;
}

.index_wrap .section2.active::before {opacity: 0.9; transition: 1s 0.5s;}

.index_wrap .section2::before {
    content:''; position: absolute; z-index: 1;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--main-color); opacity: 0.4;
    transition: 0.5s;
}
.index_wrap .section2 .containerV1 {position: relative; z-index: 2;}
.index_wrap .section2 .titleBox {width: 100%; margin-bottom: 9em; text-align: center; color: #fff;}
.index_wrap .section2 .titleBox > h3 {
    font-size: 8em; font-family: 'Poppins', sans-serif !important;
    color: inherit; font-weight: 500; margin-bottom: 0.3em;
}
.index_wrap .section2 .titleBox > h4 {font-size: 3em; color: inherit; margin-bottom: 0.7em;}
.index_wrap .section2 .titleBox > p.text1 {
    font-size: 1.8em; color: inherit; line-height: 1.8; font-weight: 300;
}
.index_wrap .section2 .itemBox {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}
.index_wrap .section2 .itemBox .item {justify-self: center; color: #fff;}

.index_wrap .section2 .itemBox .item .img {
    display: flex; height: 12em; flex-direction: column; 
    justify-content: space-between; align-items: center;
    margin-bottom: 6em;
}
.index_wrap .section2 .itemBox .left .img img {width: 7.1em;}
.index_wrap .section2 .itemBox .right .img img {width: 6.3em;}
.index_wrap .section2 .itemBox .item .img span {
    font-size: 3em; font-weight: bold; line-height: 1.2; 
    color: inherit; text-align: center;
}
.index_wrap .section2 .itemBox .item > h1 {font-size: 5em; color: inherit;}
.index_wrap .section2 .itemBox .item > h1 > span {
    font-size: 3em; font-family: 'Nanum Myeongjo', serif; margin-right: 0.1em; display: inline-block;
}

@media (min-width: 991px) {
    /* fullpage-animation */
    .index_wrap .section2 .titleBox > p.text1 {transform: translateY(10%); opacity: 0; transition: 0.5s;}
    .index_wrap .section2.active .titleBox > p.text1 {transform: translateY(0%); opacity: 1; transition: 1s 0.5s;}

    .index_wrap .section2 .itemBox .item {transform: translateY(10%); opacity: 0; transition: 0.5s;}
    .index_wrap .section2.active .itemBox .item {transform: translateY(0%); opacity: 1; transition: 1s 0.7s;}
}



@media (max-width: 991px) {
    .index_wrap .section2 {padding: 16em 0 19em;}
    .index_wrap .section2::before {opacity: 0.9; transition: 1s 0.5s;}
    .index_wrap .section2[data-scroll="out"]::before {opacity: 0.4;}

    .index_wrap .section2 .itemBox {grid-template-columns: repeat(1, 1fr); gap: 6em;}
    .index_wrap .section2 .itemBox .item {
        display: flex; gap: 6em; justify-content: space-around; width: 100%;
        align-items: center;
    }
    .index_wrap .section2 .itemBox .item .img {margin-bottom: 0;}
    .index_wrap .section2 .itemBox .item > h1 > span {font-size: 2em;}
}

@media (max-width: 680px) {
	.index_wrap .section2 .itemBox .item > h1 > span {font-size: 1.5em;} 
    .index_wrap .section2 .titleBox > p.text1 {font-size: 2.2em;}
}


.index_wrap .section3 {
    position: relative;
    overflow: hidden;
}

.index_wrap .section3.active::before {
    transition: 2s 0.5s;
    width: 100%; height: 100%;
}

.index_wrap .section3::before {
    content:''; position: absolute; z-index: 1; width: 110%; height: 110%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: url('img/section3_bg.jpg') no-repeat center center / cover;
    transition: 0.5s;
}

.index_wrap .section3 .containerV1 {position: relative; z-index: 2;}

.index_wrap .section3 .titleBox {color: #fff;}
.index_wrap .section3 .titleBox > h3 {font-size: 3em; color: inherit; margin-bottom: 0.4em;}
.index_wrap .section3 .titleBox > h3 > span {
    font-family: 'Poppins', sans-serif !important; font-size: 2.666em;
    font-weight: 500; display: inline-block; margin-right: 0.15em;
}
.index_wrap .section3 .titleBox > p.text1 {font-size: 1.8em; color: inherit; line-height: 1.6;}

@media (min-width: 991px) {
    /* fullpage-animation */
    .index_wrap .section3 .titleBox > h3 {transform: translateY(10%); opacity: 0; transition: 0.5s;}
    .index_wrap .section3.active .titleBox > h3 {transform: translateY(0%); opacity: 1; transition: 1s 0.5s;}

    .index_wrap .section3 .titleBox > p.text1 {transform: translateY(10%); opacity: 0; transition: 0.5s;}
    .index_wrap .section3.active .titleBox > p.text1 {transform: translateY(0%); opacity: 1; transition: 1s 0.7s;}
}

@media (min-width: 991px) {
    .index_wrap .section3 .containerV1 {padding-top: 80px;}
    .index_wrap .section3 .titleBox {position: absolute; top: 0;}
}

@media (max-width: 991px) {
    .index_wrap .section3 {padding: 13em 0;}
    .index_wrap .section3 .titleBox {margin-bottom: 3em;}
}

@media (max-width: 680px) {
    .index_wrap .section3 .titleBox > p.text1 {font-size: 2.2em;}
    .index_wrap .section3 .titleBox p.text1 br {display: none;}
}

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



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








/* 서브페이지 패딩 */
.tmt_sub_frame { padding:40px 0 120px; min-height: 70vh; }


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--basic-border-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(--basic-border-color);}

/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }

#style-switcher .widget-setup { top: 155px !important; }