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

/* 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 : #262e6c; /* mainColor */	
    
    --header-height:95px;
}
@media (max-width:992px) {
    :root { --header-height:80px; }
}

@media (max-width:768px) {
    :root { --header-height: 4em; }
}


/* 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.01); }
}
@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; }


/* 헤드 pc & mob */
@media all {
    /* 사이트맵 */
    .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%;
        z-index: 9999;
        display: flex; transform: translateX(100%);
        transition: 0.5s;
    }
    .box-siteMap:before {
        content: ''; position: absolute; left: 50%; top: 50%;
        transform:translate(-50%,-50%);
        width: 100%; height: 100%;
        background: url(./img/sitemap_background.jpg) no-repeat center / cover;
        z-index: 1; 
        opacity: 0.3;
    }
    .box-siteMap:after {
        content: ''; position: absolute; left: 0; top: 0;
        background: var(--main-color);
        width: 100%; height: 100%;
    }
    .box-siteMap > * { position: relative; z-index: 2; }
    .box-siteMap.active { transform: translateX(0%); }
    .box-siteMap a { color: inherit; }
    .box-siteMap .logoBox {
        position: absolute; left: 50px; top: 50px;
    }
    .box-siteMap .logoBox a { display: block; max-width: 130px; }
    .box-siteMap .logoBox svg {
        width: 100%; height: auto;
    }
    .box-siteMap .logoBox svg * {
        fill:#fff;
    }
    .box-siteMap .closeBtn {
        position: absolute; right: 50px; top: 50px;
        font-size: 50px; width: 1em; height: 1em;
        line-height: 1; color: #fff;
    }
    .box-siteMap .outer { 
        color: #fff; display: flex; justify-content: center;
        width: 100%; height: 65%; margin-top: auto;
        font-size: 44px;
        gap:clamp(0.5em,calc(100 / 1920 * 100vw),100px);
    }
    .box-siteMap .outer > li > .text {
        margin-bottom: 0.8em; display: block;
    }
    .box-siteMap .outer > li > .text > a {
        font-weight: bold;
    }
    .box-siteMap .outer .inner {
        font-size: 0.5em; display: grid; gap:1em;
        color: rgba(255,255,255,0.6);
    }

    #header {
        /* 높이값 :
            각 그룹 중 가장 갯수가 많은 소메뉴 * 3.3em
        */
        --inner-height: calc(var(--i) * 3.3em);
        --menu-font-size-pc:20;
        --menu-font-size-mob:15;
        --bg-color:transparent;
        --item-color:#fff;
        font-size: min( calc( var(--menu-font-size-mob) / 350 * 100vw ), calc(var(--menu-font-size-pc) * 1px) );
        position: fixed; left: 0; top: 0; width: 100%; z-index: 8000; 
        transition:0.2s; background: var(--bg-color); height: var(--header-height);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        transition:0.4s;
    } 
    #header .logo a { display: block; max-width: 130px; }
    #header .logo svg {
        width: 100%; height: auto;
    }
    /* #header .logo svg * {
        --color1:#00A0E9;
        --color2:#08287F;
        fill:var(--item-color);
        transition:0.4s;
    } */
    #header.scroll {
        --bg-color:#fff;
        --item-color:#000;
        box-shadow:0 5px 5px rgba(0,0,0,0.1);
    }
	#header .logo .logo_1 {display: block;}
	#header .logo .logo_2 {display: none;}
	 #header.scroll .logo .logo_1 {display: none;}
	 #header.scroll .logo .logo_2 {display: block;}
    /* #header.scroll .logo .color1 {
        fill:var(--color1);
    }
    #header.scroll .logo .color2 {
        fill:var(--color2);
    } */
}
@media (min-width:992px) {/* pc */
    #header > .containerV1 { 
        display: flex; justify-content: space-between;
        align-items: center;
    }
    
    
    /* menu */
    #header .menu .outer { 
        display:flex; height: 100%; 
    }
    #header .menu .outer > li { 
        position: relative; padding:0 0.5em; width: 8em;
        height: 100%; text-align: center;
    }
    #header .menu .outer > li:after {
        content: ''; position: absolute; left: 50%; transform: translateX(-50%);
        bottom: 0; width: 0; height: 2px;
        background: #fff; transition: 0.4s;
    }
    #header .menu .outer > li > span > a { 
        display: block; color: var(--item-color);
        height: calc(var(--header-height)); 
        line-height: calc(var(--header-height));
        transition:0.4s;
    }
    #header .menu .inner { 
        position: absolute; left: 0; top: 100%; 
        width: 100%; padding-top: 1em;
        z-index: -1; transition: 0.4s;
        height: 0; overflow: hidden;
    }
    #header .inner_bg { 
        position: absolute; left: 0; top: 100%; width: 100%; background: #fff; 
        z-index: -2; transition: 0.4s; height: 0; box-shadow: 0 5px 5px rgba(0,0,0,0.05);
    }
    #header .menu .inner > li { 
        text-align: center; padding: 0 0.3em; position: relative;
    }
    #header .menu .inner > li > a { 
        display: block; color: #212020; font-size: 0.8em; line-height: 1.4;
        background: transparent; padding: 0.5em 1em; transition: 0.2s;
		border: 1px solid #bebdbd;
    }
    #header .menu .inner > li > a > span { display: block; }
    #header .menu .inner > li:not(:last-child) > a { margin-bottom: 0.8em; }

    #header .btn_siteMap {
        font-size: 34px; color: var(--item-color);
    }

    /* outer > li mouseover, .menu mouseleave */
    #header.showMenu {
        --bg-color:#fff;
        --item-color:#000;
    }
    #header.showMenu .logo .color1 {
        fill:var(--color1);
    }
    #header.showMenu .logo .color2 {
        fill:var(--color2);
    }
    #header.showMenu .menu .inner { height: var(--inner-height); }
    #header.showMenu .inner_bg { height: var(--inner-height); }
    /* hover */
    #header .menu .outer > li:hover:after { width: 100%; background: var(--main-color); }
	#header .menu .inner > li > a:hover {background: var(--main-color); color: #fff; border-color: transparent;}

    #header .menu .outer > li.on:after { width: 100%; }
}
@media (992px <= width <= 1400px) {
    .box-siteMap .outer { font-size: 35px; }
    #header { --menu-font-size-pc:16;}
}
@media (max-width:991px) { /* mob */
    .box-siteMap { display: none; }
    #header {
        height: var(--header-height);
    }
    
    #header > .containerV1 { 
        display: flex; justify-content: space-between; 
        height: 100%; align-items: center;
    }
    #header .logo svg * {
        fill:#fff;
        transition:0.4s;
    }

    /* openBtn & closeBtn */
    #header .btn_menu { 
        --btn-icon-height:3px;
        --btn-icon-gap:5px;
        width: 2em; height: 2em;
        color: var(--item-color); font-size: 2em;
        
    }
    #header .closeBtn { 
        position: absolute; left: 0; top: 0; transform: translateX(-100%);
        width: var(--close-size); height: var(--close-size); background: #fff;
        color: #000; font-size: 1.4em;
        background: #e5e5e5;
    }

    /* itemBox */
    #header .itemBox { 
        --close-size:35px;
        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;
    }
    #header .itemBox.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;
    }
    #header .itemBox > div {
        width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0;
        display: grid; align-content: start;
    }

    #header .menu { order:2; padding: 0 1em; }
    #header .menu .outer { padding: 0 5px; }
    #header .menu .outer > li { border-bottom: 1px solid var(--line-color); position: relative; }
    #header .menu .outer > li > .arrow { position: absolute; right: 0; top: 0.5em; width: 2em; height:2em; }
    #header .menu .outer > li > .arrow:after { 
        content: '\f107'; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); color: #000; font-family: fontAwesome;
        transition: 0.3s;
    }
    #header .menu .outer > li > .text { display: inline-block; }
    #header .menu .outer > li > .text > a { display: inline-block; padding: 1em 0; pointer-events: none; }
    #header .menu .inner { 
        background: #f2f2f2; font-size: 0.9em; padding:0 1em; height: 0; overflow: hidden; transition: 0.5s;
        }
    #header .menu .inner > li {     
        border-top: 1px solid #fff;
        border-bottom: 1px solid #d9d9d9; 
    }
    #header .menu .inner > li:first-child { border-top: none; }
    #header .menu .inner > li:last-child { border-bottom: none; }
    #header .menu .inner > li > a { 
        display: block; padding: 0.7em 0; height: 2.4em; color: #000; 
    }

    
    
    /* hover */
    #header .menu .outer > li:hover .inner {
        /* 높이값:
            소메뉴 갯수 * (.inner {padding-top-bottom} + .inner > li {border-top-bottom}) + .inner > li > a {height})      
        */
            height: calc(var(--i) * (2.4em + 2px) + 1em ); padding: 0.5em 1em;
    }
    #header .menu .outer > li:hover > .arrow:after { transform:translate(-50%,-50%) rotate(180deg); }
    #header .menu .outer > li:hover > .arrow:hover:after { transform:translate(-50%,-50%) rotate(180deg); }
    
}

@media (max-width: 768px) {
	#header .logo {width: 7em;}
}


/* index - all */
@media all {
    #index {
        --index-font-size-pc: 10;
        --index-font-size-mob: 10;
        font-size: min( calc( var(--index-font-size-mob) / 550 * 100vw ), calc(var(--index-font-size-pc) * 1px) );
    }
}

/* index - section4 */
#index .section4 { 
    position: relative; 
    padding: 10em 0 13em;
}
#index .section4 .line { 
    position: absolute !important; left: 50%; top: 50%; 
    transform:translate(-50%,-50%);
    width: 100%; height: 100%;
    display: flex; z-index: 1 !important;
}
#index .section4 .line > li {
    flex:1; border-right: 1px solid #eaeaea;
}
#index .section4 .line > li:first-child {
    border-right: none;
}
#index .section4 .bg { 
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
#index .section4 .bg :is(.left,.right) {
    position: absolute; top: 0; width: 50%;
    height: 100%;
}
#index .section4 .bg .left {
    --icon-size:20px;
    background: var(--main-color); left: 0;
    height: calc(100% + var(--icon-size));
}
#index .section4 .bg .left:after {
    content: ''; position: absolute; right: 0; bottom: 0;
    width: var(--icon-size); height: var(--icon-size);
    transform: translateX(100%); background: #1c214e;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}
#index .section4 .bg .right {
    background: #f7f7f7; right: 0;
}
#index .section4 .containerV1 {
    position: relative; z-index: 2;
}
#index .section4 .titleBox { 
    display: flex; gap:1em; justify-content: space-between;
    align-items: flex-end; transition: 1.5s; color: #fff;
}
#index .section4 .sub-v1 {
    font-size: 2em; line-height: 1.5;
    text-transform: uppercase; margin-bottom: 0.2em;
}
#index .section4 .title-v1 {
    font-weight: bold; font-size: 4em; line-height: 1.4;
    text-transform: uppercase; font-family: 'NanumSquare' !important;
    margin-bottom: 0.5em;
}
#index .section4 .sub-v2 {
    font-size: 1.8em; line-height: 1.6;
}
#index .section4 .box1 { width: 100%; }

#index .section4 .titleBox[data-scroll="out"] {
    opacity: 0; transform: translateY(-5%);
}
#index .section4 .widget_box {
    transition: 1.5s;
}
#index .section4 .widget_box[data-scroll="out"] {
    opacity: 0; transform: translateY(5%);
}
@media (max-width:991px) {
    #index .section4 .containerV1 {
        padding: 0;
    }
    #index .section4 .line > li {
        display: none;
    }
    #index .section4 .titleBox {
        padding: 0 15px;
    }
    #index .section4 .titleBox .title-v1 {
        font-size: 3.5em;
    }
}
@media (max-width:768px) {
    #index .section4 { background: var(--main-color); }
    #index .section4 .bg { display: none; }
}



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
#footer {
    background: #313131; color: #fff;
    font-size: 18px;
    overflow: hidden;
}
#footer a { color: inherit; }
#footer .box1 {
    padding: 75px 0;
}
#footer .box1 .outer {
    display: flex; justify-content: space-between;
}
#footer .box1 .outer > li:last-child {
    padding-right: min(calc(80 / 1920 * 100vw),80px);
}
#footer .box1 .outer > li > .text {
    display: block; position: relative;
}
#footer .box1 .outer > li > .text:after {
    content: ''; display: block; width: 1.2em; height: 3px;
    background: var(--main-color); margin: 1em 0;
}
#footer .box1 .outer > li > .text > a {
    font-weight: bold;
}
#footer .box1 .inner {
    font-size: 0.89em; display: grid; gap:1em;
    color: rgba(255,255,255,0.6);
}

/* 푸터 스타일 여기에 작업 */
	
	/* 약관박스 : infobox  */
    footer .infobox{ border-bottom: 1px solid rgba(255,255,255,0.3)}
    footer .info_box {display: flex; padding: 20px 0;}
    footer .info_box > li {position:relative;}
    footer .info_box > li:after {
        content:''; position:absolute; right: 13px; top:53%; transform:translateY(-50%); width:2px; height: 12px; background:#858585;
    }
    footer .info_box > li:last-child:after { display:none;}
    footer .info_box > li > a {
        font-weight: normal;
        display:block; color: #535353; font-size:  0.89em;
        line-height:1.8; margin-right:30px;
    }
    footer .info_box > li > a:hover {text-decoration: underline !important;}

/* footer  logo content   */
    footer .contents {padding: 48px 0 65px; display: flex; gap: 20px; justify-content: space-between;}

    footer .contents .item2 span{font-size: 0.89em; color: #b5b5b5;}
    footer .contents .item2 .copy{font-size: 0.89em; color: #b5b5b5; line-height: 1.8;}

    footer .contents .item2 .text span{margin-right: 18px; line-height: 1.8; position: relative;}
    footer .contents .item2 .text span::before{
    content:''; position:absolute; right:-11px; top:55%; transform:translateY(-50%);
    width:2px; height: 12px; background:#858585;}

    footer .contents .item2 .text span:last-child{margin-right: 0;}
    footer .contents .item2 .text span:last-child::before{display: none;}

    footer .ft_sitemap {position: relative;height: 100%;}
    footer .ft_sitemap > select {
        width: 180px; height: 50px; border-color: #cecece; background: #313131;
        padding: 10px 15px; font-size: 0.89em; color: #b5b5b5; 
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }
    footer .ft_sitemap::after {
        content:''; position: absolute; 
        top: 50%; right: 15px;
        transform: translateY(-5px);
        width: 17px;
        height: 17px;
        background: url("./img/footer_box.png") no-repeat;
    }
/*  미디어쿼리 */
@media (max-width: 1200px){
    footer .contents{flex-direction: column; align-items: center;}
    footer .contents .item2{text-align: center;}
}

@media (max-width: 991px) {
    #footer .box1 { display: none; }
    footer .info_box{padding: 40px 0 20px 0;}
}

@media (max-width: 768px){
    footer .contents .item2 .text span{display: block;}
    footer .contents .item2 .text span::before{display: none;}
    footer .ft_sitemap{display: none;}
    footer .info_box{justify-content: center; padding: 20px 0;}
    footer .info_box > li:last-child a{margin-right: 0;}
}
@media (max-width: 500px){
    footer .box2{display: none;}
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/









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


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.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; }
.modal-backdrop { z-index: 9998; }

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