@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&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 : 1200;

	--main-color : #546aa4; /* mainColor */	
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: calc(var(--containerV1-width) * 1px); }
@media (max-width:1230px) {
	.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 { /* pc & mob */
    #header {
        --menu-font-size-pc:17;
        --menu-font-size-mob:15;
        --menu-height:100px;
        --padding-bottom:1.1em;
        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: 2000;
        transition: 0.2s;
    }
    #header > .containerV1 {
        max-width: 1400px;
    }

    

    #header .box-lang { 
        --lang-color:#fff;
        --lang-option-color:#000;
        font-size: 0.78em; position: relative; color: var(--lang-color); 
    }
    #header .box-lang:before {
        content: '\f57d'; font-family: fontAwesome; 
        position: absolute; left: 0.3em; top: 50%; transform:translateY(-87%);
        font-size: 1.2em;
    }
    #header .box-lang:after {
    content: '\f0d7'; font-family: fontAwesome; 
    position: absolute; right: 0.7em; top: 50%; transform:translateY(-110%); 
    }
    #header .box-lang select {
    width: 100%;
    padding: 1em 2em;
    border: none;
    color: inherit;
    background: transparent;
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
    }
    #header .box-lang select option { color: var(--lang-option-color); }

    #header .mob_menu_bg.noneV1 { display: none; }

    /* scroll */
    #header.scroll { 
        background: var(--main-color); 
    }
}

@media (max-width:1430px) {
    #header .containerV1 {
        padding: 0 15px;
    }    
    #header .box-lang { display: none; }
}
@media (max-width:1200px) and (min-width:991px) {
    #header {
        --menu-font-size-pc:14;
    }
}
@media (min-width:991px) { /* pc */
    #header > .containerV1 .itemBox {
        display: grid; grid-template-columns: auto 1fr; align-items:end;
    }
    #header .logo {
        padding-bottom: var(--padding-bottom);
    }
    #header .mob { display: none; }

    /* menu */
    #header .menu .innerBox {
        display: flex; justify-content: flex-end; align-items:flex-end;
        gap:1em;
    }
    #header .menu .outer {
        display: flex; color: #fff; 
    } 
    #header .menu .outer a { color: inherit; }
    #header:not(.scroll) .menu .outer > li { 
        position: relative; 
    }
    #header .menu .outer > li {
        width: 9em;
    }
    #header .menu .outer > li:after {
        content: '';
        position: absolute; left: 50%; bottom: 0; 
        transform: translate(-50%,50%);
        width: 40%; height: 3px; z-index: 1;
        background: #fff; opacity: 0; transition: 0.2s;
    }
    #header .menu .outer > li > .text > a {
        height: var(--menu-height);
        display: flex; align-items: flex-end; 
        justify-content: center;
        padding-bottom: calc(8px + var(--padding-bottom)); 
        position: relative; z-index: 1;
        transition: 0.2s;
    }  
    #header .menu .inner-wrap { 
        position: absolute; left: 0; top: 100%; width: 100%; 
        transition: 0.2s;
    }
    #header .menu .inner {
        --inner-line-height:2em;
        position: absolute; left: 0; top: 0;
        width: 100%; height: 0; overflow: hidden;
        background: var(--main-color);
        display: grid; align-content: center;
        transition: 0.2s;
        padding: 0 0.5em;
    }
    #header:not(.scroll) .menu .inner > li > a {
        display: block; text-align: center; 
        line-height: var(--inner-line-height);
        font-size: 0.8em;
    }
    #header:not(.scroll) .menu .inner > li > a.line1 {
        line-height: 1.4; margin: 0.3em 0;
    }
    #header .menu .box-lang {
        padding-bottom: var(--padding-bottom);
    }

    /* hover */
    #header .menu .outer > li:hover:after {
        opacity: 1;
    }
    #header .menu .outer > li:hover > .text > a {
        background: var(--main-color);
    }
    #header:not(.scroll) .menu .outer > li:hover .inner {
        height: calc(var(--i) * var(--inner-line-height) + 2em);
    } 
    #header:not(.scroll) .menu .outer > li.g01:hover .inner {
        height: calc(var(--i) * var(--inner-line-height));
    } 
    #header:not(.scroll) .menu .outer > li.g03:hover .inner {
        height: calc(var(--i) * var(--inner-line-height) + 3em);
    } 

    #header .menu .outer > li.on:after {
        opacity: 1; bottom: 0.8em;
    }

    /* scroll */
    #header.scroll .menu .outer > li:after { display: none; }
    #header.scroll .menu .outer > li > .text > a {
        height: calc(var(--menu-height) - 20px);
    }
    #header.scroll .menu .inner-wrap {
        background: var(--main-color); width: 100%; 
        height: calc( 1em + 2em); display: none;
    }
    #header.scroll .menu .inner {
        max-width: 1400px; left: 50%; transform: translateX(-50%);
        display: flex; justify-content: flex-start; align-items: center;
        height: 100%;
    }
    /* scroll - 소메뉴 위치 잡기 */
    #header.scroll .menu .g01 .inner {
        padding-left: calc(405 / 1920 * 100vw);
    }
    #header.scroll .menu .g02 .inner {
        padding-left: calc(560 / 1920 * 100vw); 
    }
    #header.scroll .menu .g03 .inner {
        padding-left: calc(709 / 1920 * 100vw);
    }
    #header.scroll .menu .g06 .inner {
        padding-left: calc(709 / 1920 * 100vw);
    }
    #header.scroll .menu .g04 .inner {
        padding-left: calc(1010 / 1920 * 100vw);
    }
    #header.scroll .menu .g05 .inner {
        padding-left: calc(1100 / 1920 * 100vw);
    }
    #header.scroll .menu .inner > li > a {
        font-size: 0.9em; display: flex;
    }
    #header.scroll .menu .inner > li:not(:last-child) > a:after {
        content: '|'; display: block; margin: 0 1em; font-size: 0.8em;
        transform:translateY(0.1em);
    }
    #header.scroll .menu .outer > li:hover .inner-wrap {
        display: block; border-top: 1px solid #fff;
    }
}
@media (max-width:991px) { /* mob */
    #header { height: 100px; }

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

    /* openBtn & closeBtn */
    #header .btn_menu { 
        --btn-icon-height:3px;
        --btn-icon-gap:5px;
        width: 1em; height: 1em;
        color: #fff; 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;
    }

    #header > .containerV1 { height: 100%; }
    #header > .containerV1 .itemBox {
        display: grid; grid-template-columns: auto auto;
        align-items: center; justify-content: space-between;
        height: 100%;
    }
    #header .menu { 
        --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 .menu.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 .menu > .innerBox {
        width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; 
        position: absolute; top:0;
        display: grid; align-content: start; padding: 0 1em;
    }

    #header .menu .outer { order:2; padding: 0 5px; }
    #header .menu .outer > li { 
        border-bottom: 1px solid #eee; 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; 
    }

    #header .box-lang { 
        order:1;
        --lang-color:#000;
        --lang-option-color:#000;
        margin-top: 1em;
        margin-bottom: 0.8em;
        max-width: 120px;
        display: block;
    }
    #header .box-lang:before {
        transform: translateY(-50%);
    }
    #header .box-lang:after {
        transform: translateY(-50%);
    }
    #header .box-lang select { border: 1px solid #000; }
    
    /* hover */
    #header .menu .outer > li:hover .inner-wrap .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); 
    }
}
@media (max-width:580px) {
    #header { height: 50px; }
}
/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/* index - all */
@media all {
    #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) );
    }

    #index .titleBox > .title {
        display: flex; align-items: center;
    }
    #index .titleBox > .title .icon { margin-right: 2em; }
    #index .titleBox > .title .title_logo {
        transition: 1s;
    }
    #index .titleBox > .title .text {
        font-weight: 900; font-size: 6em; text-transform: uppercase;
    }
    #index .titleBox[data-scroll="out"] > .title .title_logo {
        opacity: 0;
    }
}
@media (max-width:768px) {
    #index .titleBox > .title .icon { width: 3.8em; }
    #index .titleBox > .title .title_logo { width: 28em; }
    #index .titleBox > .title .text { font-size: 3.8em; }
}


/* index - section1 */
@media all {
    #index .section1 {
        padding: 9em 0 14em;
    }
    #index .section1 .titleBox {
        text-align: center; margin-bottom: 7.3em;
    }
    #index .section1 .titleBox > .title {
        justify-content: center;
    }
    #index .section1 .titleBox > .title .icon {
        transition: 0.8s;
    }
    #index .section1 .titleBox > .title .text {
        color: var(--main-color); 
    }
	@media (min-width:768px) {
		#index .section1 .titleBox > .title .text {
			font-size: 5.5em;
		}
	}
    #index .section1 .titleBox[data-scroll="out"] > .title .icon {
        transform: scale(0.6);
    }

    #index .section1 .itemBox {
        display: grid; grid-template-columns: repeat(4,1fr); gap:1em;
    }
    #index .section1 .itemBox > li { transition: 0.4s; }
    #index .section1 .itemBox > li > a {
        position: relative; display: block;
        padding-bottom: calc(563 / 1920 * 100vw);
        overflow: hidden;
    }
    #index .section1 .itemBox > li > a > .bg {
        content: ''; position: absolute; transition:0.4s;
    }
    #index .section1 .itemBox > li > a > .textBox {
        position: absolute; padding: 7.7em 2em; color: #fff;
        height: 100%; width: 100%;
    }
    #index .section1 .itemBox > li > a > .textBox > .title {
        font-weight: 900; font-size: 3.5em; line-height: 1.4;
    }
    #index .section1 .itemBox > li > a > .textBox > .title_en {
        font-size: 1.8em; line-height: 1.4; text-transform: uppercase;
        padding-bottom: 1em;
    }
    #index .section1 .itemBox > li > a > .textBox > .text1 {
        font-size: 1.6em; line-height: 1.6;
    }
    #index .section1 .itemBox > li > a > .textBox > .more {
        width: 1.65em; height: 1.65em; background: var(--main-color);
        position: absolute; left: 50%; bottom: 1.1em; transform:translateX(-50%);
        font-size: 4em; border-radius: 50%; 
        box-shadow: 0 0 15px rgba(255,255,255,0.5);
        transition: 0.4s;
    }
    #index .section1 .itemBox > li > a > .textBox > .more:before {
        content: '\2b'; position: absolute; left: 50%; top: 50%;
        transform: translate(-50%,-55%);
    }

    /* animation */
    @keyframes index_section1_ani_down {
        50% { transform: translateY(0.5em); }
    }
    @keyframes index_section1_ani_up {
        50% { transform: translateY(3.5em); }
    }
    #index .section1 .itemBox > li:nth-child(odd) {
        animation: index_section1_ani_down 1s infinite;
    }
    #index .section1 .itemBox > li:nth-child(even) {
        transform: translateY(4em);
        animation: index_section1_ani_up 1s infinite;
    }
    


    /* hover */
    #index .section1 .itemBox > li > a:hover > .bg {
        transform: scale(1.1);
    }
    #index .section1 .itemBox > li > a:hover > .textBox > .more {
        font-size: 3.6em;
    }
}
@media (max-width:1400px) {
    #index .section1 .itemBox > li > a {
        padding-bottom: calc(563 / 1400 * 100vw);
    }
}
@media (max-width:1200px) {
    #index .section1 .itemBox > li > a > .textBox > .title {
        font-size: 3.3em;
    }
}
@media (max-width:991px) {
    #index .section1 .itemBox {
        grid-template-columns: repeat(2,1fr);
        max-width: 600px; margin: 0 auto;
    }
    #index .section1 .itemBox > li > a {
        padding-bottom: calc(563 / 991 * 100vw);
    }
}
@media (max-width:768px) {
    #index .section1 .itemBox > li > a {
        padding-bottom: calc(563 / 768 * 100vw);
    }
}
@media (max-width:580px) {
    #index .section1 .itemBox { font-size: 0.86em; }
    #index .section1 .itemBox > li > a > .textBox > .title {
        font-size: 3em;
    }
}


/* 글씨체 */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700;800;900&family=Rajdhani:wght@700&display=swap');

/* index - section2 */
@media all {
    #index .section2 {
        padding: 14em 0; 
        background: url(./img/index_section2_bg.jpg) no-repeat center / cover;
        background-attachment: fixed;
    }
    /* titleBox */
    #index .section2 .titleBox {
        text-align: center; margin-bottom: 4.3em;
    }
    #index .section2 .titleBox > .title {
        justify-content: center; margin-bottom: 1.4em; align-items: center;
    }
    #index .section2 .titleBox > .title .text {
        margin-right: 0.4em; transition: 1s; font-family: 'Barlow', sans-serif;
        transform: translateY(-3%); font-weight: 800;
    }
	@media (min-width:768px) {
		#index .section2 .titleBox > .title .text {
			font-size: 6.8em;
		}
	}

	/* 2,3번 중 글씨체 선택하기 */
/*    #index .section2 .titleBox > .title2 .text {*/
/*        margin-right: 0.4em; transition: 1s; font-family: 'Barlow', sans-serif;*/
/*        transform: translateY(-3%); font-weight: 800; font-size: 6.8em;*/
/*    }*/
/*    #index .section2 .titleBox > .title3 .text {*/
/*        margin-right: 0.4em; transition: 1s; font-family: 'Rajdhani', sans-serif;*/
/*        transform: translateY(3%); font-weight: 700; font-size: 7em;*/
/*    }*/


    #index .section2 .titleBox[data-scroll="out"] > .title .text {
        opacity: 0; transform: translateX(0.4em);
    }
    #index .section2 .titleBox > .sub {
        font-size: 2em; font-weight: bold; line-height: 1.6;
        color: var(--main-color); transition: 1s;
    }
    #index .section2 .titleBox[data-scroll="out"] > .sub {
        opacity: 0; transform: translateY(50%);
    }

    #index .section2 .itemBox {
        display: grid; grid-template-columns: repeat(2,1fr); gap:2em;
        grid-template-rows: 547px; overflow: hidden;
    }
    /* itemBox - img1 */
    #index .section2 .itemBox .img1 {
        transition: 1s;
    }
    #index .section2 .itemBox[data-scroll="out"] .img1 {
        transform: translateX(-100%);
    }
    #index .section2 .itemBox .img1 a { 
        display: block; height: 100%; color: #fff;
        background: url(./img/index_section2_img1.jpg) no-repeat center / cover;
        padding: 4.4em; position: relative; overflow: hidden;
    }
    #index .section2 .itemBox .img1 a::before {
        content: ''; position: absolute; left: 0; top: 0;
        width: 100%; height: 100%; background: rgba(0,0,0,0.3);
        transform: translateX(-100%); transition: 0.4s;
    }
    #index .section2 .itemBox .img1 a:hover::before {
        transform: translateX(0%);
    }
    #index .section2 .itemBox .img1 a > * {
        position: relative;
    }
    #index .section2 .itemBox .img1 a > .title {
        display: inline-block; font-size: 2.3em; font-weight: bold;
        border-bottom: 2px solid #fff; padding-right:0.8em; padding-bottom: 0.5em;
        margin-bottom: 0.7em;
    }
    #index .section2 .itemBox .img1 a > .text1 {
        font-weight: 300; font-size: 1.6em; line-height: 1.5;
        padding-bottom: 1.4em;
    }
    #index .section2 .itemBox .img1 a > .more {
        display: inline-block;
        font-size: 1.3em; border: 2px solid #fff;
        padding:0.69em 2.46em 0.79em; margin-top: 0.6em;
    }

    /* itemBox - list-card */
    #index .section2 .itemBox .list-card {
        display: grid; grid-template-columns: repeat(2,1fr); gap:2em;
        grid-template-rows: repeat(2,1fr);
    }
    #index .section2 .itemBox .list-card > li {
        transition: 1s; 
        transition-delay: calc( var(--i) * 0.15s );
    }
    #index .section2 .itemBox[data-scroll="out"] .list-card > li {
        transform: scale(0.6);
    }
    #index .section2 .itemBox .list-card > li > a {
        position: relative; display: block; padding: 4.5em 2.6em 6em; 
        background: #fff; height: 100%;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        display: flex; flex-direction: column;
        transition: 0.4s;
    }
    #index .section2 .itemBox .list-card > li > a .title {
        font-size: 2.3em; font-weight: bold; color: #000;
        line-height: 1.4; margin-bottom: 0.6em;
    }
    #index .section2 .itemBox .list-card > li > a .text1 {
        font-weight: 300; font-size: 1.6em; line-height: 1.5;
        padding-bottom: 1.4em; color: #626262;
    }
    #index .section2 .itemBox .list-card > li > a .more {
        font-size: 1.3em; color: #959595; margin-top: auto;
        transition: 0.4s; position: relative; z-index: 1;
    }
    #index .section2 .itemBox .list-card > li > a .icon {
        position: absolute; right: 1em; bottom: 1em;
        transition: 0.4s;
    }

    /* itemBox - list-card hover */
    #index .section2 .itemBox .list-card > li > a:hover {
        padding: 4.5em 2.6em 5.2em; 
    }
    #index .section2 .itemBox .list-card > li > a:hover .more {
        font-size: 1.8em;
    }
    #index .section2 .itemBox .list-card > li > a .icon-hover {
        position: absolute; right: 1em; bottom: 1em;
        transition: 0.4s; opacity: 0; font-size: 4em;
        color: var(--main-color);
    }
    #index .section2 .itemBox .list-card > li > a:hover .icon {
        opacity: 0;
    }
    #index .section2 .itemBox .list-card > li > a:hover .icon-hover {
        opacity: 1; transform: translateX(-80%);
    }
}
@media (max-width:1200px) {
    #index .section2 .itemBox .list-card > li > a:hover .more {
        font-size: 1.5em;
    }
    #index .section2 .itemBox .list-card > li > a:hover .icon-hover {
        opacity: 1; transform: translateX(-35%);
    }
}
@media (max-width:991px) {
    #index .section2 {
        background-attachment: initial;
    }
    #index .section2 .itemBox {
        grid-template-columns: 1fr;
    }
}
@media (max-width:768px) {
    #index .section2 .itemBox {
        grid-template-rows: auto; gap:1em;
    }
    #index .section2 .itemBox .list-card { gap:1em; }
    #index .section2 .itemBox .list-card > li > a .icon {
        width: 70px;
    }
    #index .section2 .itemBox .list-card > li > a:hover .icon {
        opacity: 1;
    }
    #index .section2 .itemBox .list-card > li > a .icon-hover {
        display: none;
    }
}
@media (max-width:580px) {
    #index .section2 .itemBox .list-card > li > a .icon {
        width: 60px; right: 1em; bottom: 0;
    }
    #index .section2 .itemBox .list-card > li > a:hover {
        padding: 4.5em 2.6em 6em; 
    }
    #index .section2 .itemBox .list-card > li > a:hover .more {
        font-size: 1.3em;
    }
}

/* index - section3 */
@media all {
    #index .section3 { padding: 10em 0; overflow: hidden; }
    #index .section3 > .containerV1 {
        display: grid; grid-template-columns: repeat(2,1fr);
        align-items: center;
    }
    #index .section3 .titleBox > .title {
        margin-bottom: 1.4em;
    }
    #index .section3 .titleBox > .title > .text { 
        margin-left: 0.4em; transition: 1s;
    }
    #index .section3 .titleBox[data-scroll="out"] > .title > .text {
        transform: scale(0.6);
    }
    #index .section3 .titleBox > .sub {
        font-size: 1.8em; color: #000; line-height: 1.5;
        font-weight: 300;
        padding-bottom: 2em;
        transition: 1s;
    }
    #index .section3 .titleBox[data-scroll="out"] > .sub {
        opacity: 0; transform: translateX(-10%);
    }
    #index .section3 .titleBox > .more > a {
        display: inline-block; font-size: 13px; 
        background: var(--main-color);
        padding:1em 2.46em 1.1em;
        text-transform: uppercase; color: #fff;
        transition: 1s;
    }
    #index .section3 .titleBox[data-scroll="out"] > .more > a {
        transform: scale(1.2);
    }

    /* itemBox */
    #index .section3 .itemBox {
        display: grid; grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 17em; padding-left: 6em;
    }
    #index .section3 .itemBox > li {
        width: 19em; height: 19em;
        display: grid; align-content: center; justify-content: center;
        text-align: center; color: #fff; 
        position: relative;
        
    }
    #index .section3 .itemBox > li:after {
        content: '';
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%,-50%); width: 100%; height: 100%;
        background: var(--main-color); border-radius: 50%;
        animation: index_section3_ani1 2s ease-in infinite;
    }
    #index .section3 .itemBox > li.line2 {
        transform: translateX(75%);
    }
    #index .section3 .itemBox > li > * { position: relative; z-index: 1; }
    #index .section3 .itemBox > li > h2 {
        font-weight: 900; font-size: 3em; line-height: 1.4;
    }
    #index .section3 .itemBox > li > p {
        font-size: 1.6em; line-height: 1.5;
    }

    /* itemBox - animation */
    @keyframes index_section3_ani1 {
        50% {
            transform:translate(-50%,-50%) scale(1.05);
            box-shadow: 0 0 1em rgba(0,0,0,0.8);
        }
    }
    #index .section3 .itemBox > li.ani2:after {
        animation-delay: 1s;
    }
}
@media (max-width:1400px) {
    #index .section3 > .containerV1 {
        grid-template-columns: 1fr 1.3fr;
    }
    #index .section3 .titleBox > .sub br { display: none; }
    #index .section3 .itemBox { 
        width: 85%; margin: 0 auto; padding-left: 2vw;
    }
    #index .section3 .itemBox > li {
        font-size: 0.9em;
    }
}
@media (max-width:991px) {
    #index .section3 > .containerV1 {
        grid-template-columns: 1fr;
    }
    #index .section3 .titleBox {
        padding-left: 5vw; padding-right: 30vw;
    }
    #index .section3 .itemBox { 
        width: 100%; grid-template-columns: repeat(2,auto);
        grid-auto-rows: auto; gap:4em 6em;
        justify-content: center;
        padding-left: 15vw;
    }
    #index .section3 .itemBox > li {
        font-size: 1em; width: 22em; height: 22em;
    }
    #index .section3 .itemBox > li.line2 {
        transform: translateX(0);
    }
}
@media (max-width:768px) {
    #index .section3 > .containerV1 {  
        gap:6em;
    }
    #index .section3 .titleBox {
        padding-left: 0; padding-right: 0;
        justify-self: center;
    }
    #index .section3 .titleBox > .sub br { display: block; }
    #index .section3 .itemBox {
        padding-left: 0;
    }
    #index .section3 .itemBox > li {
        width: 19em; height: 19em;
    }
}
@media (max-width:630px) {
    #index .section3 .titleBox > .sub br { display: none; }
}
@media (max-width:480px) {
    #index .section3 .titleBox > .more {
        text-align: center;
    }
    #index .section3 .itemBox { gap:2em; }
    #index .section3 .itemBox > li {
        width: 18em; height: 18em;
    }
}

/* index - section4 */
@media all {
    #index .section4 {
        padding: 13em 0; background: #f9f9f9;
    }

    /* titleBox */
    #index .section4 .titleBox {
        text-align: center; margin-bottom: 4.3em;
    }
    #index .section4 .titleBox > .title {
        justify-content: center; margin-bottom: 1.4em;
    }
    #index .section4 .titleBox > .title .text {
        margin-left: 0.4em; transition: 1s;
    }
    #index .section4 .titleBox[data-scroll="out"] > .title .text {
        transform: translateX(0.4em); opacity: 0;
    }
    #index .section4 .titleBox > .sub {
        font-size: 2em; font-weight: bold; line-height: 1.6;
        color: var(--main-color); transition: 1s;
    }
    #index .section4 .titleBox[data-scroll="out"] > .sub {
        opacity: 0; transform: translateY(50%);
    }

    /* index - section4 - swiper */
    #section4-swiper { 
        --swiper-theme-color: var(--main-color);
        --swiper-pagination-bullet-size: 6px;
        --swiper-pagination-bullet-horizontal-gap: 12px;
        padding: 10px 10px 50px 10px; 
        margin-bottom: 4em;
    }
    #section4-swiper .swiper-slide > a {
        display: block; height: 380px; background: #fff; 
        box-shadow: 0 0 10px rgba(0,0,0,0.2);  
    }
    #section4-swiper .swiper-slide > a .img { text-align: center; }
    #section4-swiper .swiper-slide .textBox {
        display: grid; height: calc(100% - 165px);
        text-align: center; align-content: start;
        padding: 0 1em;
    }
    #section4-swiper .swiper-slide .textBox .text1 {
        font-size: 3em; color: var(--main-color); line-height: 1.1;
        font-weight: bold; height: 2.2em;
        display: flex; align-items: center;
        justify-content: center; margin-bottom: 0.4em;
    }
    #section4-swiper .swiper-slide .textBox .text2 {
        font-size: 1.6em; color: #777; height: 3em;
        line-height: 1.5; margin-bottom: 1.3em;
    }
    #section4-swiper .swiper-slide .textBox .more {
        font-size: 3em; width: 1.2em; height: 1.2em; 
        line-height: 1.1em;
        background: var(--main-color); color: #fff;
        display: inline-block; margin: 0 auto;
        border-radius: 50%;
    }

    .swiper-pagination-bullet-active {  
        transform: scale(1.2);
    }


    /* more */
    #index .section4 .more { text-align: center; }
    #index .section4 .more > a {
        display: inline-block; font-size: 13px; 
        background: var(--main-color);
        padding:1em 2.46em 1.1em;
        text-transform: uppercase; color: #fff;
        transition: 1s;
    }
    #index .section4 .titleBox1[data-scroll="out"] .more > a {
        transform: scale(1.2);
    }
}
@media (max-width:1200px) {
    #section4-swiper .swiper-slide .textBox .text2 {
        height: 4.5em;
    }
    #section4-swiper .swiper-slide .textBox .text2 br {
        display: none;
    }
}
@media (max-width:991px) {
    #index .section4 > .containerV1 {
        padding: 0;
    }
    #index .section4 .titleBox {
        padding: 0 15px;
    }
}
@media (max-width:580px) {
    #section4-swiper .swiper-slide > a { 
        height: max(350px, calc(480 / 580 * 100vw)); 
    }
    #section4-swiper .swiper-slide .textBox {
        align-content: center;
    }
    #section4-swiper .swiper-slide .textBox .text2 {
        margin-bottom: 0em;
    }
}

/* index - section5 */
@media all {
    #index .section5 { transition: 0.8s; }
    #index .section5 .root_daum_roughmap { width: 100%; }
    #index .section5 .root_daum_roughmap .wrap_map {
        height: max(300px,calc(610 / 1920 * 100vw));
    }
    #index .section5[data-scroll="out"] {
        transform: scale(0.95);
    }
}


/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { 
    background: #384b7e; font-size: 13px;
}
footer a { color: inherit; }

footer > .contents_box { padding: 0 0 35px 0; }
footer > .contents_box .info_box {
    display: flex; justify-content: center; 
    background: var(--main-color);
    padding: 1em 0;
}
footer > .contents_box .info_box .info {display: flex; text-align: center;}
footer .info > .item { position:relative; }
footer .info > .item:before { content:''; position:absolute; right:7px; top:55%; transform:translateY(-50%); width:1px; height:13px; background:#ddd; }
footer .info > .item:last-child:before { display:none; }
footer .info > .item > a { 
    display:block; color:#fff; font-weight:500; 
    line-height:1.8; margin-right:15px;  
}  /*211223폰트 사이즈 13에서 14로 수정.*/

footer .contents { display:flex; flex-wrap:wrap; justify-content: center; width: 100%; }
footer .item2 {
    display: flex; flex-direction: column; align-items: center; margin-top: 35px;
}


footer .item2 > div { line-height: 1.8; color: #fff; text-align: center;}  /*211223폰트 사이즈 13에서 14로 수정.*/
footer .item2 > div a { color: inherit; }
footer .item2 > .text > span { position: relative; margin-right:20px; font-weight: inherit;  }
footer .item2 > .text > span:after { content:'|'; position:absolute; right:-14px; top:50%; transform:translateY(-53%); }
footer .item2 > .text > span:last-child:after { display: none; }
footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; color: #fff; }
footer .item2 > .copy a { color: inherit; }






@media (max-width:768px) {
footer > .contents_box { padding: 35px 0; }
footer .item2 .info {justify-content: center;}
footer .item2 > .text > span { display:block; margin-right:0;}
footer .item2 > .text > span:after { display:none;}

footer .item2 { margin-top: 0; text-align: center;}

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








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


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