@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;900&display=swap');
/* reset */
@media all {
    html {scroll-behavior: smooth;}
    .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', serif !important; word-wrap: break-word; word-break: keep-all;
    }
    h1, h2, h3, h4, h5, h6 {margin:0; font-family: 'Noto Sans KR', 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', 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', 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;}

/* html 폰트 사이즈 */
@media (max-width:1200px) {
	html { font-size: 8.5px; }
}
@media (max-width:991px) {
	html { font-size: 8px; }
}
@media (max-width:768px) {
	html { font-size: 7.5px; }
}
@media (max-width:580px) {
	html { font-size: 6.5px; }
}
@media (min-width:1200px) and (max-height:800px) {/* 너비 1200이상 높이 800이하 */
html { font-size: 8px; }
}
@media (min-width:1200px) and (max-height:650px) {/* 너비 1200이상 높이 650이하 */
html { font-size: 7.5px; }
}
@media (min-width:1200px) and (max-height:500px) {/* 너비 1200이상 높이 500이하 */
html { font-size: 6.5px; }
}

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

	--main-color : #004097; /* mainColor */
	--main-color2 : #e50012; /* mainColor */
	--main-color3 : #00a63c; /* mainColor */
    --basic-border-color: #004097;	/* 게시판 및 게시판헤드 등 기타 버튼들 border 컬러 */

    --em-font : min(calc(10 / 450 * 100vw), 10px);

    --logoarea-height:100px;
    --header-height:95px;
}

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


/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
@media all {


    /* logo 영역*/
    #logo_area {
        position: sticky; top: 0; left: 0; width: 100%;
        width: 100%; height: var(--logoarea-height); background: #32353e;
        display: flex; align-items: center; justify-content: center; transition: 0.2s;
        overflow: hidden;
    }
    #logo_area #logo {width: 15.5rem;}
    #logo_area #logo svg {width: 100%;}

    /* 사이트맵 버튼 모바일 */
    #logo_area .sitemap_mob_btn {color: #fff; font-size: 40px;}

    #header {
        --menu-font-color : #fff; 
        position: sticky; left: 0; top: 0; width: 100%; height: var(--header-height); z-index: 1000; transition:0.4s; background: transparent;
    }

    #header > .containerV1 {height: 100%;}

    /* menu 영역 */
    #header .menu_area {height: 100%; background: #fff;}
    #header .menu_area > .containerV1 {height: 100%;} 
    #header .menu_area .itemBox {
        display: flex; justify-content: space-between; align-items: center; height: 100%;
    }
    #header .menu_area .itemBox .main_menu {
        --menu-font: 16px;
        --menu-lh: 1.2;
        --menu-color: #000;
        display: flex; height: 100%; align-items: center; gap: 3.4rem;
    }
    #header .menu_area .itemBox .main_menu .cs_menu {
        display: flex; align-items: center; font-size: 14px; line-height: 1.2;
        height: 100%; position: relative; padding-right: 17px;
    }
    #header .menu_area .itemBox .main_menu .cs_menu::after {
        content:''; position: absolute; top: 50%; transform: translateY(-50%);
        right: 0; height: 60px; width: 1px;
        background: #959595;
    }
    #header .menu_area .itemBox .main_menu .cs_menu h3 {font-size: inherit; line-height: inherit; color: #32353e; margin-right: 4px;}
    #header .menu_area .itemBox .main_menu .cs_menu span {font-size: inherit; line-height: inherit; color: #858585;}

    #header .menu_area .itemBox .main_menu .outer {
        display: flex; align-items: center; height: inherit;
    }
    #header .menu_area .itemBox .main_menu .outer > li {padding: 0 3rem; position: relative; display: flex; align-items: center; height: 100%;}
    #header .menu_area .itemBox .main_menu .outer > li > a {
        font-size: 16px; color: var(--menu-color); line-height: var(--menu-lh); font-weight: 500;
    }
    #header .menu_area .itemBox .main_menu .outer > li > a > span {position: relative;}
    #header .menu_area .itemBox .main_menu .outer > li > a > span:after {
        content: ''; position: absolute;  bottom: -10px; width: 0; height: 3px; background: var(--main-color); transition:0.4s; right: 0;
    }

    @media (992px <= width <= 1630px) {
        #header .menu_area .itemBox {position: relative; justify-content: center;}
        #header .menu_area .itemBox .main_menu .outer > li {padding: 0 4rem;}
        #header .menu_area .login_box {position: absolute; top: -50px; right: 0;}
        #header .menu_area .login_list > li > a {color: #fff;}
    }
    @media (992px <= width <= 1330px) {
        #header .menu_area .itemBox .main_menu .cs_menu {flex-direction: column; justify-content: center;}
        #header .menu_area .itemBox .main_menu .outer > li {padding: 0 3rem;}
    }
    @media (992px <= width <= 1130px) {
        #header .menu_area .itemBox .main_menu .cs_menu {flex-direction: column; justify-content: center;}
        #header .menu_area .itemBox .main_menu .outer > li {padding: 0 2rem;}
    }

    /* inner 부분 */
    #header .main_menu .outer > li > .inner {
        display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 85%; width: 16rem;
        opacity: 0; visibility: hidden; z-index: -1; text-align: center; background: #fff;
        border-radius: 0 0 0 15px; box-shadow: 0px 5px 12px -2px #ccc; height: 0; overflow: hidden;
    }
    #header .main_menu .outer > li > .inner::after {
        content:''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--main-color);
    }
    #header .main_menu .outer > li > .inner > li {
        position: relative; color: #000; line-height: 1.3; transition: all 0.3s;
    }
    #header .main_menu .outer > li > .inner > li:first-child {margin-top: 10px;}
    #header .main_menu .outer > li > .inner > li:last-child {margin-bottom: 15px;}

    #header .main_menu .outer > li > .inner > li > a {
        display: block; font-size: 14px; color: inherit; transition: all 0.3s; position: relative; left: 0; padding: 10px 15px;
        color: #000;
    }
    #header .main_menu .outer > li:first-child > .inner {z-index: 10;}


    /* login 영역 */
    #header .menu_area .login_list {
        display: flex; align-items: center; gap: 3rem;
        font-size: var(--menu-font); color: var(--menu-color); line-height: var(--menu-lh);
        font-weight: 500;
    }

    /* 사이트맵 버튼 */
    #header .menu_area .itemBox .main_menu .sitemap_btn {font-size: 20px; color: #858585;}

    /* hover */
    #header .menu_area .itemBox .main_menu .outer > li:hover > a > span:after {width: 100%; right: auto; left: 0;}
    #header .main_menu .outer > li > .inner > li:hover > a {background: var(--main-color); color: #fff;}
    #header .main_menu .outer > li:hover > .inner {opacity: 1; visibility: visible; z-index: 2; top: 95%; height: auto; transition: all 0.3s;}

    /* scroll */
    #header.scroll {box-shadow: 0 3px 15px -8px #000;}
    #logo_area.scroll {transition: all 0.2s;}

    /* 서브메뉴일때 */
    #header .menu_area .itemBox .main_menu .outer > li > a.on > span::after {width: 100%;}
    .box-siteMap .outer > li.on > span::after {
        content:''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 3px;
        background: #fff;
    }

    /* 모바일 메뉴 버튼 */
    @media (min-width: 991px) {
        /* #header.scroll {height: 70px;} */
        #logo_area.scroll {z-index: -99;}
        #logo_area .sitemap_mob_btn {display: none;}
    }

    /* 사이트맵 ----------------------------------------------*/
    #siteMap {
        position: fixed; top: 0; left: 0; z-index: 99999;
        width: 100%; height: 100%; display: flex;
        font-size: var(--em-font);
    }
    .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: -999;
        display: flex; transform: translateX(10%); 
        opacity: 0; visibility: hidden;
        transition: 0.5s;
    }
    .box-siteMap:after {
        content: ''; position: absolute; left: 0; top: 0;
        background: #0d2f5e;
        width: 100%; height: 100%;
    }
    .box-siteMap > * { position: relative; z-index: 2;}
    .box-siteMap.active { transform: translateX(0%); opacity: 1; z-index: 9999; visibility: visible;}
    .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 .mob_cs_box {display: none;}

    .box-siteMap .closeBtn {
        position: absolute; right: 50px; top: 50px;
        font-size: 5em; width: 1em; height: 1em;
        line-height: 1; color: #fff; z-index: 100;
    }
    .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: 600;
    }
    .box-siteMap .outer .inner {
        font-size: 0.5em; display: grid; gap:1em;
        color: rgba(255,255,255,0.6);
        text-align: center;
    }

    /* 서브메뉴일때 */
    .box-siteMap .outer > li.on > span > a {position: relative;}
    .box-siteMap .outer > li.on > span > a::after {
        content:''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px;
        background: #fff;
    }

    
}

@media (992px <= width <= 1400px) {
    .box-siteMap .outer { font-size: 35px;}
    #header { --menu-font-size-pc:16;}
}

/* 사이트맵 끝------------------------------------------*/


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

    #logo_area {
        --mob-height: 60px;
        justify-content: space-between; padding: 0 15px; z-index: 999; height: var(--mob-height);
    }

    #header, #header.scroll {height: calc(var(--h-height) - 10rem);}
    #header .menu_area {display: none;}

    /* 사이트맵 */
    .box-siteMap {font-size: min(calc(var(--font-size-standard) / 550 * 100vw), calc(var(--font-size-standard) * 1px));}
    .box-siteMap .outer {flex-direction: column; margin-top: 1em; height: 100%; font-size: 3.5em; margin-left: 1em;}
    .box-siteMap .outer .inner {display: flex;}

    .box-siteMap .logoBox {
        left: 3em; top: 2.5em; z-index: 100; display: flex; gap: 15px; flex-direction: column;
    }
    .box-siteMap .logoBox svg {width: 90px;}
    .box-siteMap .logoBox .mob_cs_box {
        display: flex; gap: 15px; color: #fff; font-size: 14px; align-items: center;
    }
    .box-siteMap .logoBox .mob_cs_box .cs_text a {color: #fff !important;}
    .box-siteMap .logoBox .mob_cs_box .login_list {display: flex; gap: 10px;}
    .box-siteMap .closeBtn {right: 0.6em; top: 0.6em; font-size: 4em;}

    #logo_area.scroll {height: var(--mob-height);}
}

@media (768px <= width <= 991px) {
    .box-siteMap .outer {align-items: center; margin-left: 0;}
    .box-siteMap .outer > li > .text {text-align: center;}
}

@media (max-width: 500px) {
    .box-siteMap .outer {gap: clamp(1em,calc(100 / 1920 * 100vw),100px); margin-top: 2em;}
}
/* 모바일 끝-----------------------------------------------------*/



/* 서브페이지는 noto-sans인데 헤드는 serif 유지하려고 적어놓음 */
#header a, #header span, #header h3 {font-family: 'Noto Serif KR', serif !important;}
.box-siteMap a, .box-siteMap span {font-family: 'Noto Serif KR', serif !important;}


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



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

/* 공통 */
#index {
    --index-font-size-pc: 10;
    --index-font-size-mob: 10;
    font-size: min( calc( var(--index-font-size-mob) / 450 * 100vw ), calc(var(--index-font-size-pc) * 1px) );
    background: #fff;
}




/* 230317 전체적으로 줄여달라 해서 메인만 .containerV1 사이즈 줄여줌.
-> 230318 containerV1 1400으로 한번 더 줄임 */
#index > section .containerV1 {max-width: 1400px;}

@media (max-width: 1430px) {
    #index > section .containerV1 {padding: 0 15px;}
}
/* ----------------------------- */

#index .title-V1 {font-size: 3.5em; font-weight: bold; color: #000; line-height: 1.2;}
#index .text_sub {font-size: 1.6em; line-height: 1.6; color: #434343; font-weight: 400;}

/* Title */
#index .section .titleBox {
    text-align: center; display: flex; flex-direction: column; align-items: center;
    gap: 1em; margin-bottom: 6em;
}
#index .section .titleBox .down_icon {
    font-size: 2em; color: #000;
    animation: down_icon_move 0.5s infinite alternate;
}
#index .section .titleBox .sub_title-V2 {padding: 8px 16px; border-radius: 20px; margin-top: 0.5em;}

@keyframes down_icon_move {
    to {transform: translateY(5px);}
}

/* button-style ------------------*/
@media all {
    #index .btn_box {margin: 0 auto; width: fit-content;}
    #index .btn_box .link_btn {display: flex; align-items: center; gap: 0.5em;}
    #index .btn_box .link_btn > span {
        font-size: 1.5em; color: #606060;
        line-height: 1.2; font-weight: 400;
        position: relative;
    }
    #index .btn_box .link_btn > span::before {
        content:''; position: absolute; bottom: -3px;
        right: 0; width: 0%; height: 1px; background: #000;
        transition: 0.3s;
    }
    #index .btn_box .link_btn .circle_box {
        position: relative; padding-left: 1.9em;
    }
    #index .btn_box .link_btn .circle_box .line {
        position: absolute; top: 50%; left: 0;
        height: 1px; width: 60%; transition: 0.3s;
        background: var(--main-color); z-index: 2;
    }
    #index .btn_box .link_btn .circle_box .line::after {
        content:''; position: absolute; right: 1px; bottom: -1px;
        width: 1px; height: 7px; background: #89939f;
        transform: rotate(-45deg);
    }
    #index .btn_box .link_btn .circle_box .circle {
        border-radius: 50%; width: 4em; height: 4em;
        background: #bbd9ff; display: block; position: relative;
        z-index: 1;
    }
    
    #index .btn_box .link_btn .circle_box .circle > span {
        position: absolute; width: 2.7em; height: 2.7em;
        border-radius: 50%; left: 15%; top: 50%; transform: translate(-50%, -50%);
        transition: 0.3s; opacity: 0;
    }
    #index .btn_box .link_btn .circle_box .circle > span::before{
        content:''; position: absolute; width: inherit; height: inherit;
        border-radius: inherit;
    }
    #index .btn_box .link_btn .circle_box .cir-blue::before {
        background: var(--main-color); animation: circleOrbit 3s linear infinite;
    }
    #index .btn_box .link_btn .circle_box .cir-red::before {
        background: var(--main-color2); animation: circleOrbit 3s 1s linear infinite;
    }
    #index .btn_box .link_btn .circle_box .cir-green::before {
        background: var(--main-color3); animation: circleOrbit 3s 2s linear infinite;
    }
    
    #index .btn_box .link_btn .circle_box .cir-center {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        background: #fff; border-radius: 50%; width: 2em; height: 2em; opacity: 0;
        transition: 0.3s;
    }
}
/* 버튼 hover 효과 */
@media (min-width: 991px) {
    /* #index .btn_box .link_btn .circle_box .circle > span {opacity: 0.5;}
    #index .btn_box .link_btn .circle_box .cir-center {opacity: 0.5;} */

    #index .btn_box .link_btn:hover > span::before {left: 0; right: unset; width: 100%;}
    #index .btn_box .link_btn:hover .line {left: 0.5em;}
    #index .btn_box .link_btn:hover .circle > span {opacity: 0.5; transition-delay: 0.3s;}
    #index .btn_box .link_btn:hover .circle > .cir-center {opacity: 1; transition-delay: 0.3s;}
    
    @keyframes circleOrbit {
        0%{
          transform: rotate(0deg) translateX(10px) rotate(0deg);
        }
        100%{
          transform: rotate(360deg) translateX(10px) rotate(-360deg);
        }
    }
}

/* button-style end------------------*/



/* 공용스크롤아웃 */
#index .title-V1 {opacity: 1; transition: 1s 0.2s;}
#index .title-V1[data-scroll="out"] {transform: translateY(20%); opacity: 0;}

#index .titleBox .text_sub{opacity: 1; transition: 1s 0.4s;}
#index .titleBox .text_sub[data-scroll="out"] {transform: translateY(20%); opacity: 0;}

#index .section .titleBox .down_icon {opacity: 1; transition: 1s 0.2s;}
#index .section .titleBox .down_icon[data-scroll="out"] { opacity: 0;}

#index .btn_box {opacity: 1; transition: 1s;}
#index .section1 .btn_box {transition-delay: 0.8s;}
#index .section5 .btn_box {transition-delay: 0.4s;}
#index .btn_box[data-scroll="out"] {transform: translateY(20%); opacity: 0;}


/* ------------------------------------------ */


/* 비디오 */
#index .video_section {padding: 10em 0 5em;}
#index .video_section .containerV1 {max-width: 1000px;}
#index .video_section #video_frame {overflow: hidden; border-radius: 10px; will-change: transform;}
#index .video_section .title-V1 {font-size: 2.5em; text-align: center; margin-top: 0.7em;}


/* index - section1 */
@media all {
    #index .section1 {
        padding: 11em 0;
        background: #fff;
    }
    #index .section1 .itemBox {
        display: flex; gap: 6em; align-items: center;
    }
    #index .section1 .itemBox .item_text {flex: 1; text-align: center;}
    #index .section1 .itemBox .text_box {
        padding: 3.4em 0 8em; display: flex; flex-direction: column; gap: 2em;
    }
	#index .section1 .itemBox .text_box svg {
		width: 14em; margin: 0 auto;
	}
    #index .section1 .itemBox .item_img {
        overflow: hidden;
        border-radius: 20px;
    }

    /* data-scroll */
    #index .section1 .text_box .text_sub:first-child{opacity: 1; transition: 1s 0.4s;}
    /* #index .section1 .text_box .text_sub:last-child{opacity: 1; transition: 1s 0.6s;} */
	#index .section1 .itemBox .text_box .img {opacity: 1; transition: 1s 0.6s;}
	#index .section1 .itemBox .text_box .img[data-scroll="out"] {transform: translateY(20%); opacity: 0;}
    #index .section1 .text_box .text_sub[data-scroll="out"] {transform: translateY(20%); opacity: 0;}
    
    #index .section1 .itemBox .item_img {transition: 3s;}
    #index .section1 .itemBox .item_img[data-scroll="out"] {transform: translateY(20%);}

	
}
@media (991px <= width <= 1330px) {
    #index .section1 .itemBox .text_box br {display: none;}
}

@media (min-width: 991px) {
    #index .section1 .itemBox .item_img {
        width: min(calc(750 / 1430 * 100vw), 750px);
    }   
}

@media (max-width:991px) {
    #index .section1 {padding: 5em 0 11em;}
    #index .section1 .itemBox {flex-direction: column; gap:5em;}
    #index .section1 .itemBox .item_text {order: 2; text-align: center;}
    #index .section1 .itemBox .item_img {width: 100%; max-width: 750px;}
}


/* index - section2 */
@media all {
    #index .section2 {padding: 11em 0 12em;}
    #index .section2 .itemBox {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 5em 55px; width: 100%; max-width: 1500px; margin: 0 auto;
    }
    #index .section2 .itemBox .item {
        display: flex; flex-direction: column;
        align-items: center; gap: 3em;
    }
    #index .section2 .itemBox .item .item_img {overflow: hidden; border-radius: 10px; transform: translateZ(0); will-change: transform;}
    #index .section2 .item .item_text {text-align: center;}
    #index .section2 .item .item_text h3 {
        font-size: 2.2em; color: #000; font-weight: bold; line-height: 1.2;
        margin-bottom: 1em; text-transform: uppercase;
    }
    #index .section2 .item .item_text .btn_box {margin-top: 4em;}

    /* data-scroll */
    #index .section2 .itemBox .item .item_img {overflow: hidden;}
    #index .section2 .itemBox .item .item_img img {transition: 2s;}
    #index .section2 .itemBox .item .item_img[data-scroll="out"] img {transform: scale(1.1);}
}

/* data-scroll */
@media (min-width: 650px) {
    #index .section2 .itemBox .item {transition: 3s;}
    #index .section2 .itemBox .item:nth-child(even)[data-scroll="out"] {transform: translateY(-5%);} 
    #index .section2 .itemBox .item:nth-child(odd)[data-scroll="out"] {transform: translateY(5%);}
}

@media (650px <= width <= 1630px) {
    #index .section2 .item .item_text .text_sub br {display: none;}
    #index .section2 .item .item_text .text_sub_box {
        min-height: 9em;
    }
}

@media (max-width: 1230px) {
    #index .section2 .itemBox {
        grid-template-columns: repeat(2, 1fr);
        width: 100%; max-width: 1000px; margin: 0 auto;
    }
    #index .section2 .itemBox .item_img {width: 100%;}
    #index .section2 .itemBox .item_img img {width: inherit;}
}

@media (max-width: 991px) {
    #index .section2 .item .item_text {padding: 0 10px;}
}

@media (768px <= width <= 860px) {
    #index .section2 .item .item_text .text_sub_box {min-height: 9em;}
}

@media (max-width: 650px) {
    #index .section2 {padding: 6em 0;}
    #index .section2 .itemBox {grid-template-columns: repeat(1, 1fr); gap: 5em;}
    #index .section2 .itemBox .item_img {max-width: 400px;}
}



/* index - section3 */
@media all {
    #index .section3 {padding: 12em 0;}
    #index .section3 .titleBox .sub_title-V2 {background: #f9b2b8;}
    #index .section3 .btn_box {margin-top: 5.6em;}
    #index .section3 .btn_box .link_btn .circle_box .circle > span {left: 50%;}
}


/* index - section4 */
@media all {   
    #index .section4 {padding: 12em 0; background: #f7f7f7;}
    #index .section4 .titleBox .sub_title-V2 {background: #bbd9ff;} 
    #index .section4 .btn_box {margin-top: 5.6em;}
    #index .section4 .btn_box .link_btn .circle_box .circle > span {left: 50%;}
}


/* index - section5 */
@media all {
    #index .section5 {padding: 18em 0 12em;}
    #index .section5 .itemBox {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 6px; width: 100%; max-width: 1400px; margin: 0 auto;
    }
    #index .section5 .itemBox .item {
        display: flex; flex-direction: column;
        align-items: center; gap: 4.5em;
    }
    #index .section5 .itemBox .item .item_img {
        overflow: hidden; border-radius: 10px; transform: translateZ(0); will-change: transform;
        width: 100%; max-width: 70em;
    }
    #index .section5 .item .item_text {text-align: center;}
    #index .section5 .item .item_text h3 {
        font-size: 2.2em; color: #000; font-weight: bold; line-height: 1.2;
        margin-bottom: 1em;
    }
    #index .section5 .item .item_text .btn_box {margin-top: 4em;}


    /* data-scroll */
    #index .section5 .item .item_text h3 {transition: 1s; opacity: 1;}
    #index .section5 .item .item_text h3[data-scroll="out"] {transform: translateY(20%); opacity: 0;} 

    #index .section5 .item .text_sub_box p {transition: 1s 0.2s; opacity: 1;}
    #index .section5 .item .text_sub_box p[data-scroll="out"] {transform: translateY(20%); opacity: 0;} 

    #index .section5 .itemBox .item .item_img {overflow: hidden;}
    #index .section5 .itemBox .item .item_img img {transition: 2s;}
    #index .section5 .itemBox .item .item_img[data-scroll="out"] img {transform: scale(1.1);}
}

@media (max-width: 991px) {
    #index .section5 .item .item_text {padding: 0 10px;}
}

@media (max-width: 860px) {
    #index .section5 .item .item_text .text_sub br {display: none;}
}

@media (768px <= width <= 860px) {
    #index .section5 .item .item_text .text_sub_box {min-height: 9em;}
}

@media (max-width: 768px) {
    #index .section5 {padding: 12em 0;}
    #index .section5 .itemBox {grid-template-columns: repeat(1, 1fr); gap: 5em;}
}



/* index - section6 */
@media all {
	#index .section6 #map {width: 100%; position: relative; }

	#index .section6 iframe {
		width: 100% !important;
	}
}

@media (max-width: 991px) {
    #index .section6 iframe {
        width: 100% !important;
        height: 50vw !important;
    }
}

@media (max-width: 500px) {
    #index .section6 iframe {
        height: 350px !important;
    }
}



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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer {
    font-size: min(calc(10 / 520 * 100vw), 10px);
    background: #f9fafa; padding: 6em 0;
}
footer .contents { display:flex; justify-content: space-between; align-items:flex-start; }
footer .item1 > .ft_logo {margin-bottom: 2em;}
footer .item1 > .ft_logo a {width: 9.333em; display: block;}
footer .item1 > div { line-height: 1.6; font-size: 1.4em; color: #606060; }  /*211223폰트 사이즈 13에서 14로 수정.*/
footer .item1 > div a { color: inherit;}
footer .item1 > .text > span { position: relative; margin-right:20px; font-weight: inherit;  }
footer .item1 > .text > span:after { content:'/'; position:absolute; right:-15px; top:50%; transform:translateY(-45%); }
footer .item1 > .text > span:last-child:after { display: none; }
footer .item1 > .cs_center {margin: 3em 0;}
footer .item1 > .copy { text-transform: uppercase; font-weight: inherit; }

footer .item2 {display: flex; flex-direction: column; align-items: end;}
footer .item2 .sns_list {display: flex; gap: 10px; margin-bottom: 40px;}
footer .item2 .sns_list > li img {position: relative; bottom: 0; transition: 0.1s;}
footer .item2 .sns_list > li:hover img {bottom: 3px;}

footer .item2 .info_box {display: flex; flex-direction: column; gap: 10px;}
footer .item2 .info_box  > ul{display: flex; justify-content: right;}
footer .item2 .info_box  > ul > li {text-align: right; position: relative;}
footer .item2 .info_box  > ul > li:after{content:'/'; position:absolute; right:-6px; top:50%; transform:translateY(-45%); }
footer .item2 .info_box  > ul > li:last-child:after { display: none; }

footer .item2 .info_box  > ul > li:hover {text-decoration: underline;}
footer .item2 .info_box  > ul > li:not(:last-child) {margin-bottom: 5px; margin-right: 10px;}
footer .item2 .info_box  > ul > li > a {
    font-size: 1.4em; color: #606060; line-height: 1.5;
}

footer .item2 .partner_logo{display: flex; margin-bottom: 40px;}
footer .item2 .partner_logo > li > a > img{width: 70px;}
footer .item2 .partner_logo > li:not(:last-child) {margin-bottom: 5px; margin-right: 30px;}

@media (max-width:1130px) {
    footer {position: relative; padding: 12em 0 3em;}
    footer .contents {flex-direction: column; gap: 3em;}
    footer .contents > * {width: 100%;}
    footer .contents > .item1 {order: 2;}
    footer .contents > .item1 .ft_logo {position: absolute; top: 2em; left: 15px; margin-bottom: 0;}

    footer .contents > .item2 {order: 1; align-items: unset;}
    footer .item2 .info_box{align-items: start; gap: 0; flex-direction: initial;}
    footer .item2 .info_box > ul {display: flex; gap: 10px; }
    footer .item2 .info_box > ul > li {text-align: left;}
    footer .item2 .info_box > ul > li:after{right: -11px;}
    footer .item2 .sns_list {margin-bottom: 15px;}
}

@media (max-width:850px) {
    footer .item1 > .text {
        display: flex; flex-direction: column;
    }
    footer .item1 > .text > span {margin-right: 0;}
    footer .item1 > .text > span:after {display: none;}

}

@media (max-width:768px) {
footer .item2 > .text > span { display:block; margin-right:0; }
footer .item2 > .text > span:after { display:none; }

footer .item2 { margin-top: 20px; }
footer .item2 .info_box{flex-direction: column;}
}
@media (max-width:450px) {
footer .info > .item { width:50%; }
footer .info > .item:nth-child(1) { order:1; }
footer .info > .item:nth-child(2) { order:4; }
footer .info > .item:nth-child(3) { order:3; }
footer .info > .item:nth-child(4) { order:2; }
footer .info > .item:before { right: 0; }
footer .info > .item:nth-child(2n):before { display:none; }
footer .info > .item > a { margin-right: 0; }
}

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







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

/* 서브페이지 페이지 프레임들은 Sereif 폰트로. */
.tmt_sub_frame .page_frame :is(a, h1, h2, h3, h4, h5, p, span, b, div) {font-family: 'Noto Serif KR', serif !important;}

/* 각 페이지에 overflow : hidden */
.tmt_sub_frame .page_frame{overflow: hidden;}

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