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


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

	--main-color : rgb(0,207,167); /* mainColor */

    --theme-bg-color : #fff;
    --theme-item-color: #000;
    --theme-item-color-rgb1 : 0;
    --theme-item-color-rgb2 : 0;
    --theme-item-color-rgb3 : 0;

    --header-height: 100px;
}
@media (max-width:991px) {
    :root { 
        --header-height: 60px;
    }
}

.clear:after { 
    content:""; 
    display:block; 
    clear:both;
}
* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px; }
body {
line-height:1; font-size:14px; font-weight:400; font-family: 'Noto Sans KR', sans-serif; word-wrap: break-word; word-break: keep-all;
overflow-x: hidden;
background: var(--theme-bg-color); color: var(--theme-item-color);
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1; font-size: 1em; }
ul, ol { list-style:none; margin:0; padding: 0; }
a { outline:0; text-decoration:none; color: var(--theme-item-color); }
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; }

/* 탭 초기화 */
.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; }


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

/* 스크롤 막기 (모바일 메뉴 열었을 때 적용) */
.scrollDisable { height:100%; min-height:100%; overflow:hidden !important; touch-action:none; }

/* 애니메이션 - 확대/축소 */
@keyframes ani-scale1 {
    50% { transform: scale(1.01); }
}


/* 해드세팅 */
    .header_wrap { 
        --transtion:0.4s;
        --head-font-size-pc: 18;
        --head-font-size-mob: 15;
        font-size: min(calc(var(--head-font-size-mob) / 350 * 100vw), calc(var(--head-font-size-pc) * 1px));
        position:sticky; right:0; top:0; width:100%; z-index:2000; transition:var(--transtion);
        box-shadow:0 0 10px rgba(0,0,0,0.2); 
        background: var(--theme-bg-color);
		font-family: 'Poppins', sans-serif;
    }

/* font-family: 'Poppins', sans-serif; */

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

    /* 로고 */
    @keyframes logo_text_ani1 {
        0% { stroke-dashoffset:400; fill-opacity:0; }
        70% { stroke-dashoffset:0; fill-opacity:0; }
        100%{ stroke-dashoffset:0; fill-opacity:1; }
    }
    .logo {margin-left: calc(20 / 1920 * 100vw); width: 26rem;}
	/* height: calc(var(--header-height) - 53px); */
    .logo a { display: block; height: inherit; }
    .logo #logo { height: inherit; }
    .logo #logo .logo_text path { 
        stroke: var(--theme-item-color); fill:var(--theme-item-color); fill-opacity:0; stroke-dasharray: 400; stroke-dashoffset:400; 
        animation: logo_text_ani1 2s linear forwards;
    }
    .logo #logo .logo_img > * { fill:var(--theme-item-color); }
    

    /* menu */
    /*---------------------------------------- outer ---------------------------------------------*/
    #h_menu .outer > li { position: relative; }
    #h_menu .outer > li > a { display:block; font-size:inherit; }
    /*---------------------------------------- //outer ---------------------------------------------*/


    /*---------------------------------------- inner ---------------------------------------------*/

    #h_menu .outer > li > .inner > li > a  { display:block; font-size:0.83em; }
    /*---------------------------------------- //inner ---------------------------------------------*/


    /* 스크롤 했을 때 해드 효과 */
    .header_wrap.scroll { box-shadow:0 0 10px rgba(0,0,0,0.2); }


    @media (min-width:991px) {/* pc */
        @keyframes head-inner-ani1 {
            0%{ transform:translateX(-10%); }
            70%{ transform:translateX(10%); }
            100%{ transform:translateX(0); }
        }

        /* pc - menu */
        /*---------------------------------------- pc - outer ---------------------------------------------*/
        #h_menu { display:flex; align-items:center; }
        #h_menu .outer { -ms-display:flex; display:flex; gap:3.88em }
        
        #h_menu .outer > li > a {
        transition:var(--transtion); color: var(--theme-item-color); 
        height: var(--header-height); 
        line-height: var(--header-height); font-weight: bold;
        }
        #h_menu .outer > li > a .icon { display: none; }
        #h_menu .outer > li > a::before{
            content: "";
            position: absolute;
            width: 0%;
            height: 1px;
            background: var(--theme-item-color);
            top: 70%;
            transform: translateY(70%);
            transition: all 0.3s;
        }
        /*---------------------------------------- // pc -outer ---------------------------------------------*/


        /*---------------------------------------- pc - inner ---------------------------------------------*/
        #h_menu .outer > li > .inner {
        --inner-border-color:#dfdfdf;
        position:absolute; left:50%; top:100%; transform:translateX(-50%); z-index:1;
        width:11.111em; visibility:hidden; opacity: 0; 
        }
        #h_menu .outer > li > .inner > li {
        position: relative;
        box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);
        background-color: #fff;
        border: 1px solid var(--inner-border-color);
        visibility:hidden; opacity: 0;
        }
        #h_menu .outer > li > .inner > li > a  { transition:var(--transtion); padding:0.83em 1.1em; text-align:center; color: #888; }
        /*---------------------------------------- // pc - inner ---------------------------------------------*/

        /* pc - hover */
		#h_menu .outer > li:hover > a {color: var(--main-color);}
        #h_menu .outer > li:hover > a::before { width: 100%; }
        #h_menu .outer > li.hover > a { color: rgba(var(--theme-item-color-rgb1),var(--theme-item-color-rgb2),var(--theme-item-color-rgb3),0.4); }
        #h_menu .outer > li:hover > .inner { visibility:visible; opacity: 1; z-index: 2; } 
        #h_menu .outer > li:hover > .inner > li { 
        visibility:visible; opacity: 1; animation:head-inner-ani1 0.3s; animation-fill-mode:forwards; animation-delay:calc( var(--i) * 0.1s );
        transition:var(--transtion); transition-delay:calc( var(--i) * 0.1s );
        } 
        #h_menu .outer > li > .inner > li > a:hover { color:#fff; background:var(--main-color);} 
        

        /* pc - 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
        #h_menu .outer > li > a.on::before{width: 100%;}
		#h_menu .outer > li > a.on {color: var(--main-color);}

        /* pc - 스크롤 */
    }

    @media (max-width:1200px) and (min-width:991px) {
        #h_menu .outer { gap: 2.72em; } 
    }

    @media (max-width:991px) {/* 모바일 */
        #header { height: var(--header-height); }

        .logo {width: 20rem; }

        /* 모바일 열기 버튼 */
        .header_wrap .open_btn { cursor:pointer; color:var(--theme-item-color); font-size: 25px; }

        .menu_box { 
        --size-close-font:22px;
        --transition:0.4s;
        position: fixed; right: 0; top: 0; width: 15em; height: 100%; z-index:9999; background: #fff; transform:translateX(120%); transition:var(--transition); 
        }

        /* 모바일닫기버튼 */
        .close_btn { 
            font-size: var(--size-close-font);
            position: absolute; left: -0.2em; top: 0.2em; transform: translateX(-100%);
            width:1.6em; height:1.6em; cursor:pointer; background: #fff; border-radius:0.2em; z-index: 9999;
        }
        .close_btn > i { display:block; color:#000; text-align:center; line-height:1.65em; font-size:1em; }


        #h_menu { 
        width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0;
        display:grid; align-items:start; align-content:start; padding: 0 15px;
        }
        .menu_box_bg { position: absolute; right: 0; top: 0; z-index:8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); }

        .menu_box #h_menu .mob_logo_icon { display: grid !important; justify-content: center; padding-top: 20px; }
        .menu_box #h_menu .mob_logo_icon .logo_icon1 { transform: scale(1.5); transition: 1.4s; width: 85px;}

        .menu_box #h_menu .outer { display:grid; padding-top: 1.5em; }
		#h_menu .outer > li {padding: 17px 0; border-bottom: 1px solid #ddd;}
        .menu_box #h_menu .outer > li > a { text-align: center; font-weight: 500; font-size: 15px;}
        
        

        .menu_box #h_menu .inner {
        padding: 1.2em 1.5em 1.6em; margin-bottom: 1.4em;
        display:grid; grid-template-columns:1fr; gap:0.8em 1em; position: relative; text-align: center; justify-content: center;
        }
        .menu_box #h_menu .inner:after {
        content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ddd; 
        }

        /* 모바일메뉴박스 보이게 하는 클래스 */
        .menu_box.inactive { transform:translateX(0); } 
        .menu_box.inactive #h_menu .mob_logo_icon .logo_icon1 { transform: scale(1); }

        /* on */
        .menu_box #h_menu .outer > li > a.on { color: var(--main-color); }
    }

	@media (max-width: 600px) {
		.logo {width: 16rem; } 
		.header_wrap .open_btn {font-size: 20px;}
	}



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


.color-tag {color: var(--main-color);}

#index { 
    --index-font-size-pc: 16;
    --index-font-size-mob: 11;
    font-size: min(calc(var(--index-font-size-mob) / 350 * 100vw), calc(var(--index-font-size-pc) * 1px));
    overflow: hidden;
}
#index .text-catagory { font-size: 2.1875em; text-transform: uppercase; line-height: 1.4; font-family: 'Poppins', sans-serif; font-weight: 300; }
#index .titleV1 { font-size: 2.8125em; font-weight: bold; line-height: 1.4; padding: 0.2em 0 0.3em; }
#index .text-sub { font-size: 1.125em; line-height: 1.6; }

/* guide_scroll */
    @keyframes guide_scroll_ani1 {
        50% { width: 4em; }
    }
    .guide_scroll { 
        --box-size: calc( ( 100vw - var(--containerV1-width) * 1px ) / 2 );
        position: fixed; right: 0; bottom: 0; color: var(--theme-item-color); z-index: 1000; width: var(--box-size); height: var(--box-size); 
        transform: rotate(90deg) translateX(100%); transform-origin: right top; font-family: 'Poppins', sans-serif; font-size: 12px;
        opacity: 0.3;
    }
    .guide_scroll .inner { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap:0.8em; height: 100%; }
    .guide_scroll .inner .text { text-transform: uppercase; }
    .guide_scroll .inner .line { width: 0; height: 1px; background: var(--theme-item-color); animation: guide_scroll_ani1 2s ease-in-out infinite; }

/* 타이틀이미지 */
    #title_img { height: calc( 100vh - var(--header-height) ); background: var(--theme-bg-color); }
    #title_img > .containerV1 { height: 100%; padding: calc(80 / 1920 * 100vw) calc(140 / 1920 * 100vw) calc(150 / 1920 * 100vw); }
    #title_img > .containerV1 .movie { height: 100%; }
    #title_img > .containerV1 .movie > * { width: 100%; height: 100%; }
    @media (max-width:768px) {
        #title_img { height: auto; }
        #title_img > .containerV1 .movie { position: relative; padding-bottom: 56.25%; height: 0; }
        #title_img > .containerV1 .movie > * { position: absolute; left: 0; top: 0; }
        
    }

/* section1 */
    #index .section1 { padding: max(60px, calc(222 / 1920 * 100vw)) 0 max(80px, calc(158 / 1920 * 100vw)); }
    #index .section1 .itemBox { display: grid; justify-content: center; text-align: center; }
    #index .section1 .itemBox > .logoWrap { transition: 1s; }
    #index .section1 .itemBox .logo_icon1 { margin: 0 auto 2em; width: 10.6875em; height: auto; }
    #index .section1 .itemBox > .titleBox > .text-catagory { padding: 0.5em 0 0.2em; transition:1s; }
    #index .section1 .itemBox > .titleBox > .logo_text_wrap { transition:1s; }
    #index .section1 .itemBox > .titleBox > .logo_text_wrap .logo_text {font-size: 4.4em; margin: 0 auto 0.5em; font-family: 'Poppins', sans-serif; font-weight: 500; }
    #index .section1 .itemBox > .titleBox > .text-sub { padding: 1.2em 0; transition:1s; }
    #index .section1 .itemBox > .textBox > .text1 { padding: 1em 0 2em; line-height: 1.6; transition:1s; font-size: 1.125em;}
	#index .section1 .itemBox > .imgBox {transition:1s;}
    #index .section1 .itemBox > .moreV1 { margin-top: 2em; transition:1s; }
    #index .section1 .itemBox > .moreV1 > a { display: inline-block; color: var(--theme-item-color); border: 1px solid #959595; padding: 1em 3.3475em; transition: 0.4s; }
    #index .section1 .itemBox > .moreV1 > a:hover { background: #fff; color: #000; }

    /* animation */
    #index .section1 .itemBox > .logoWrap[data-scroll='out'] { transform: scale(0.4); }
    #index .section1 .itemBox > .titleBox > .text-catagory[data-scroll='out'] { opacity: 0; transform:translateY(20%); }
    #index .section1 .itemBox > .titleBox > .logo_text_wrap[data-scroll='out'] { transform: translateY(30%); opacity: 0;}
    #index .section1 .itemBox > .titleBox > .text-sub[data-scroll='out'] { opacity: 0; transform:translateY(20%); }
    #index .section1 .itemBox > .textBox > .text1[data-scroll='out'] { opacity: 0; transform:translateY(10%); }
	#index .section1 .itemBox > .imgBox[data-scroll='out'] {opacity: 0; transform:translateY(10%); }
    #index .section1 .itemBox > .moreV1[data-scroll='out'] { opacity: 0; transform:translateY(20%); }

    @media (max-width:768px) {
        #index .section1 .itemBox > .textBox > .text1 br:last-child { display: none; }
    }

/* section2 */
    #index .section2 { 
        --transition:0.4s;
        padding: max(60px, calc(122 / 1920 * 100vw)) 0 max(80px, calc(134 / 1920 * 100vw));
    }
    #index .section2 .titleBox { text-align: center; padding-bottom: max(40px,calc( 80 / 1920 * 100vw )); }
    #index .section2 .text-catagory { transition:1s; }
    #index .section2 .titleV1 { transition:1s; }
    #index .section2 .text-sub { transition:1s; }
    
    #index .section2 .itemBox { 
        display:grid; grid-template-columns:repeat(3,1fr); gap:3em; text-align: center;
    }
    #index .section2 .itemBox > li { position: relative; padding-bottom: 100%; transition:1s; transition-delay: calc(var(--i) * 0.1s); cursor: default;}
    #index .section2 .itemBox > li > .hover_box { 
        position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; 
        color: var(--theme-item-color); transition:var(--transition); border: 1px solid #383838; border-radius: 2em;
        display: grid; align-items: center;
    }
    #index .section2 .itemBox > li > .hover_box > div { 
        transition:var(--transition); display: grid; justify-items:center; align-content:center; width: 100%; height: 100%; border-radius: 1.75em; margin: 0 auto;
    }
    #index .section2 .itemBox > li > .hover_box .icon { 
         margin: 0 auto 0.5em; transition: var(--transition); border-radius:1em;
        display:flex; justify-content: center; align-items: center; overflow: hidden;
		/* width: 5.4375em; height: 5.4375em; */
    }
	#index .section2 .itemBox > li > .hover_box .icon img {transform: scale(1); transition: var(--transition);}
    #index .section2 .itemBox > li > .hover_box .text1 { font-weight: 500; font-size: 1.4375em; line-height: 1.4; padding: 0.4em 0 0.3em; }
    #index .section2 .itemBox > li > .hover_box .text2 { line-height: 1.6; padding-top: 0.3em; }
    
    /* hover */
	#index .section2 .itemBox > li > .hover_box:hover .icon img {transform: scale(1.1);}
    /* #index .section2 .itemBox > li > a:hover { color: #000; border-color: #fff; } */
    /* #index .section2 .itemBox > li > a:hover > div { background: #fff; width: 96%; height: 96%; } */
    /* #index .section2 .itemBox > li > a:hover .icon { background: #000; height: 5.4375em; padding: 1em; border-radius:1em; } */

    /* animation */
    #index .section2 .text-catagory[data-scroll='out'] { opacity: 0; transform:translateY(30%); }
    #index .section2 .titleV1[data-scroll='out'] { opacity: 0; transform:translateY(20%); }
    #index .section2 .text-sub[data-scroll='out'] { opacity: 0; transform:translateY(40%); }
    #index .section2 .itemBox > li[data-scroll='out'] { opacity: 0; transform:translateY(20%); }
    
    @media (max-width:1400px) {
        #index .section2 { font-size: 0.9em; }
        #index .section2 .itemBox { gap:1em; } 
    }
    @media (max-width:1200px) {
        #index .section2 { font-size: 0.8em; }
        #index .section2 .itemBox { gap:0.7em; } 
    }
    @media (max-width:991px) {
        #index .section2 { font-size: 1em; }
        #index .section2 .itemBox { grid-template-columns:repeat(2,1fr); max-width: 768px; margin: 0 auto; gap:1em; }
        #index .section2 .itemBox > li > .hover_box > div { padding: 0.5em; width: 96%; height: 96%; }
    }
    @media (max-width:768px) {
        #index .section2 .titleBox > .titleV1 { padding: 0.1em 0 0.6em; }
        #index .section2 .itemBox { grid-template-columns:1fr; max-width: 320px; }
        #index .section2 .itemBox > li > .hover_box.text2 br { display: none; }
    }

/* section3 */
    #index .section3 { 
        --transition:0.4s;
        padding: max(60px, calc(134 / 1920 * 100vw)) 0 max(80px, calc(160 / 1920 * 100vw));
    }
    #index .section3 .titleBox { text-align: center; padding-bottom: max(40px,calc( 80 / 1920 * 100vw )); }
    #index .section3 .text-catagory { transition:1s; }
    #index .section3 .titleV1 { transition:1s; }
    #index .section3 .text-sub { transition:1s; }

	#index .section3 .img {width: 100%; max-width: 960px; margin: 0 auto;  transition:1s; }
	#index .section3 .img img {width: 100%;}

	@media (max-width: 600px) {
		#index .section3 .text-sub br {display: none;}
	}

    /* animation */
    #index .section3 .text-catagory[data-scroll='out'] { opacity: 0; transform:translateY(30%); }
    #index .section3 .titleV1[data-scroll='out'] { opacity: 0; transform:translateY(20%); }
    #index .section3 .text-sub[data-scroll='out'] { opacity: 0; transform:translateY(40%); }
	#index .section3 .img[data-scroll='out'] {opacity: 0; transform:translateY(20%);}


/* section4 */
    #index .section4 .containerV1 { border-top: 1px solid #535353; border-bottom: 1px solid #535353; padding-top: 55px; padding-bottom: 85px; }
    #index .section4 .moreV1 { margin-top: 3em; text-transform: uppercase; text-align: center; }
    #index .section4 .moreV1 > a { display: inline-block; color: var(--theme-item-color); border: 1px solid #959595; padding: 1em 4.5em; transition: 0.4s; }
    #index .section4 .moreV1 > a:hover { background: #fff; color: #000; }



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


footer .copy { color: var(--theme-item-color); text-transform: uppercase; font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1.6; text-align: center; padding: 1em 0; }
@media (max-width:580px) {
    footer .copy { font-size: 10px; }
}









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


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


.at-go .go-btn { z-index: 3000; }