@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=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 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; }


/* html 폰트 사이즈 */
@media (max-width:1200px) {
	html { font-size: 9px; }
}
@media (max-width:991px) {
	html { font-size: 8.5px; }
}
@media (max-width:768px) {
	html { font-size: 7.5px; }
}
@media (max-width:580px) {
	html { font-size: 6px; }
}

@media (max-width:480px) {
	html { font-size: 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 : 1400;

	--main-color : #2d3a80; /* mainColor */
    
    --h-height : max(70px, 10rem); /* header height */
}

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


/* index scorollbar custom */
body::-webkit-scrollbar {
    width: 7px;
}
body::-webkit-scrollbar-thumb  {
    background: var(--main-color);
    border-radius: 20px;
}
body::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);
}
html { scroll-behavior: smooth; }

/* page_animation */

@media (max-width: 991px) {
    .fade_up {transition: 1s 0.3s;}
    .fade_up[data-scroll="out"] {transform: translateY(20%); opacity: 0;}
}


.Pop {font-family: 'Poppins', sans-serif !important;}
.Ptd {font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;}

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


@media all {
    #header { 
        --menu-font-color : #fff;
        position: fixed; left: 0; top: 0; width: 100%; height: var(--h-height); 
        z-index: 1000; transition:0.4s; background: transparent;
    }
    
    #header > .containerV1 {max-width: 1800px; height: 100%;}
    
    
    #header .itemBox {
        width: 100%; height: 100%; display:flex; align-items:center; 
        position: relative; z-index: 2; margin: 0 auto;
    }
    
    #logo {min-width: 235px;}
    #logo .logo_1 {display: block;}
    #logo .logo_2 {display: none;}
    #logo a {display: flex; align-items: center;}

    /* 버튼 */
    .close_btn {font-size: 50px; color: #fff; cursor: pointer;}
    #header .h-active_box .close_btn {display: none;}
    .open_btn {
		--bg: #fff;
        width: 16px; height: 13px; cursor:pointer;
		position: relative; margin-left: 24px;
    }
	.open_btn::before, .open_btn::after {
		content:''; position: absolute; 
		background: var(--bg); left: 0;
		width: 100%; height: 3px;
	}

	.open_btn::before {top: 0;}
	.open_btn::after {bottom: 0;}
    
    
    
    /*main_menu---------------------------------------------------------------------------*/
    #nav {display: flex; width: 100%; max-width: 1160px; margin-left: 22rem;}
    #nav .nav_logo {display: none;}
    #nav .nav_inner { display:flex; align-items:center; width: 100%; gap: 0 50px;}
    #nav .outer {display: flex; position: relative;}
    #nav .outer > li {position: relative; margin-left: 8rem; height: var(--h-height);}
    #nav .outer > li:first-child {margin-left: 0;}
    #nav .outer > li > a {
        display: flex; color: var(--menu-font-color); font-size: 18px; height: 100%;
        line-height: 1.3; align-items: center; position: relative;
        transition: all 0.3s; font-weight: 500; letter-spacing: 1px;
    }
    #nav .outer > li > a > span {position: relative;}
    #nav .outer > li > a > i {color: var(--main-color); display: none;}
    #nav .outer > li > a > span:after {
        content: ''; position: absolute; bottom: -8px; width: 0; 
        height: 3px; background: var(--main-color); transition:0.4s; right: 0;
    }	

    

    @media (min-width: 991px) {
		
		/*sub_menu---------------------------------------------------------------------------*/
		#header #nav .inner {
			display: block; position: absolute; left: 50%; transform: translateX(-60%); top: 90%; width: 12em;
			opacity: 0; visibility: hidden; z-index: 1; text-align: center; background: #fff; padding: 10px 0;
			box-shadow: 1px 2px 6px -2px #aaa; height: 0; overflow: hidden;
		}
		#header #nav .inner > li {position: relative; color: #000; line-height: 1.3; transition: all 0.3s;}
		#header #nav .inner::after {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--main-color);}
		#header #nav .inner > li > a { display: block; font-size: 16px; color: inherit; transition: all 0.3s; position: relative; left: 0; padding: 10px 15px;}
		#header #nav .outer > li:nth-child(1) .inner { z-index: 10;}
		#header #nav .outer > li > a > span:after {
			content: ''; position: absolute;  bottom: -10px; width: 0; height: 3px; background: #fff; transition:0.4s; right: 0;
		}


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

        /* 해당페이지일 때 */
        #header #nav .outer > li > a.on > span::after {width: 100%;}
    }
    
    /* 해드 스크롤 했을 때 */
    #header.scroll #logo .logo_2 {display: block;}
    #header.scroll #logo .logo_1 {display: none;}
    #header.scroll #nav .outer > li > a {color: #000;}
    #header.scroll .open_btn {--bg: #000;}
    #header.scroll .langBox {--color: #000;}
    
    
    /*모바일에서 피씨 로고 클래스 지움.*/
    #logo.logo_hide {opacity: 1; visibility: visible;}
    
}
    
/*반응형-------------------------------------------------------------*/

@media (max-width: 1850px) {
	body::after {display: none;}
    #header > .containerV1 {padding: 0 15px;}
    #header .itemBox {justify-content: space-between; gap: 20px;}
    #nav .outer > li {margin-left: 5rem;}
    #nav {margin: 0; gap: 30px; padding-left: 3rem;}
	#nav .nav_inner {justify-content: end; margin-right: 5rem;}
}


@media (max-width: 1430px) {
    /* #logo {min-width: 20rem;} */ 
    #header > .containerV1 {padding: 0 15px;}
}


/*모바일*/
@media all and (max-width: 991px) {
    
    #header {--menu-font-color: #222;}
    #header .itemBox {justify-content: unset;}


    #logo {width: max(160px, 25rem); min-width: auto;}

    #nav {display: none;}

    .btn_off {display: none;}
    .btn_on {display: block !important;}

	.open_btn {margin-left: 0;}
	.close_btn {font-size: 30px;}

    /* 헤드 스크롤 했을 때 */
    #header.scroll {
        box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background: #fff;
    }
}



/* 사이트맵 -----------------------------------------------------------------------------*/
#siteMap {
    position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1020;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden;

    transition: 0.5s;
}
#siteMap .close_btn {position: absolute; top: 3rem; right: 3rem; z-index: 2;}
#siteMap .site_menu {width: 100%; height: 100%;}
#siteMap .site_menu .outer {display: grid; grid-template-columns: repeat(5, 1fr); width: inherit; height: inherit;}
#siteMap .site_menu .outer > li {
    --transition: 0.3s;
    display: flex; flex-direction: column;
    color: #fff; 
}
#siteMap .site_menu .outer > li > a {
    position: relative; font-size: max(20px, 3.2rem); color: inherit; font-weight: 500;
    letter-spacing: 1px;
}

#siteMap .site_menu .outer > li > .inner > li {padding: 15px 0;}
#siteMap .site_menu .outer > li > .inner > li > a {
    display: block; font-size: max(14px, 2rem); color: inherit;
    opacity: 0.3; transition: var(--transition); font-weight: 500;
}

/* hover */
#siteMap .site_menu .outer > li > .inner > li > a:hover {opacity: 1;}

@media (min-width: 992px) {
    #siteMap .site_menu .outer > li {
        padding-top: 35rem; align-items: center; text-align: center;
        transform: translateY(-5%); opacity: 0;
        transition: var(--transition), 
                    transform 0.3s calc(var(--index) * 0.1s),
                    opacity 0.3s calc(var(--index) * 0.1s);
    }
    #siteMap .site_menu .outer > li:not(:last-child) {border-right: 1px solid rgba(255,255,255,0.3);}
    #siteMap .site_menu .outer > li > .inner {padding-top: 4rem;}
    #siteMap .site_menu .outer > li > a::before {
        content:''; position: absolute; left: 50%; bottom: -10px;
        transform: translateX(-50%); width: 0; height: 3px;
        background: #fff; transition: var(--transition) 0.2s;
    }
    #siteMap .site_menu .outer > li > a > i {display: none;}


    /* hover */
    #siteMap .site_menu .outer > li:hover {background: #007ac5;}
    #siteMap .site_menu .outer > li:hover > a::before {width: 100%;}
}


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

    /* menu 클릭시 header 효과 */
    #header.menu_active {background: #fff;}
    #header.menu_active .logo_1 {display: none !important;}
    #header.menu_active .logo_2 {display: block !important;}
    #header.menu_active .langBox {--color: #000 !important;}
	#header.menu_active .h-active_box .close_btn {color: #000;}

    #siteMap .close_btn {display: none;}

    #siteMap {height: calc(100% - var(--h-height)); top: var(--h-height);}
    #siteMap .site_menu .outer {
        display: flex; flex-direction: column; padding: 20px 20px 0;
        transform: translateY(-5%); transition: 0.3s;
    }
    #siteMap .site_menu .outer > li {
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding: max(20px, 3rem) 0;
    }
    #siteMap .site_menu .outer > li > a {display: flex; justify-content: space-between; font-size: 25px;}
    #siteMap .site_menu .outer > li > a {pointer-events: none;}
    #siteMap .site_menu .outer > li > a > i {transition: 0.3s;}

    #siteMap .site_menu .outer > li > .inner {
        height: 0; opacity: 0; visibility: hidden;
    }
    #siteMap .site_menu .outer > li > .inner > li > a {font-size: 20px;}

    /* 메뉴 클릭 시 */
    #siteMap .site_menu .outer > li.on_sub > .inner {
        padding-top: 2rem; transition: 0.3s;
        height: auto; opacity: 1; visibility: visible;
    }
    #siteMap .site_menu .outer > li.on_sub > a > i {transform: rotate(180deg);}

}

/* active */
#siteMap.inactive {opacity: 1; visibility: visible;}
#siteMap.inactive .outer {transform: translateY(0);}
@media (min-width: 992px) {
    #siteMap.inactive .outer > li {transform: translateY(0%); opacity: 1;}   
}

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



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
main > .section {
    width: 100%;
    font-size: min( calc(10 / 1820 * 100vw ), 10px);
}

@media (max-width: 1430px) {
    main > .section {font-size: min( calc(10 / 1230 * 100vw ), 10px);}
}

@media (max-width: 991px) {
    main > .section {
        font-size: min( calc(10 / 500 * 100vw ), 10px);
    }

    main > .section:not(:first-child, :last-child) {padding: 10em 0;}
}

@media (min-width: 992px) {
	main > .section {
		height: 100vh;
    }
}

main > .section .sub {
    font-size: max(16px, 1.8em); font-weight: bold;
    text-transform: uppercase;
    font-family: 'GmarketSansBold', sans-serif !important;
    letter-spacing: 1px;
}
main > .section .title-V1 {
    font-size: 5em; font-weight: bold; color: #fff;
}
main > .section .titleBox p.text1 {font-size: max(14px, 1.6em); line-height: 1.8;}


/* item_btn */
main > .section .item_btn {
    color: #434343; transition: 0.3s;
    display: flex; align-items: center; gap: 5px;
    position: relative; padding-left: 2.4em; width: fit-content;
}

main > .section .item_btn > * {position: relative; z-index: 2;}
main > .section .item_btn > span {font-size: 16px; mix-blend-mode: color-dodge; text-transform: uppercase;}
main > .section .item_btn::before {
    content:''; position: absolute;
    width: max(20px, 3.2em); height: max(20px, 3.2em); background: #b2d3ea;
    border-radius: 50%; z-index: 1; left: 0; top: 50%;
    transform: translateY(-60%);
    transition: 0.5s;
}

@media (min-width: 992px) {
    main > .section .item_btn:hover:before {
        left: 55%; transform: translate(-50%, -50%) scale(1.3);
    }
}

/* 모바일 스크롤 애니메이션 */
@media (max-width: 991px) {
    main > .section .fade-up {transition: 1s;}
    main > .section .fade-up[data-scroll="out"] {opacity: 0; transform: translateY(10%);}

    main > .section .fade-left {transition: 1s;}
    main > .section .fade-left[data-scroll="out"] {opacity: 0; left: 35%;}
}

 



/* section2 */
main > .section2 {position: relative; --active-transition: 1s;}
main > .section2 .containerV1 {position: relative; z-index: 2; max-width: 100%;}
main > .section2 .itemBox {
    width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
}
main > .section2 .itemBox > .item {position: relative; transition: 0.3s;}
main > .section2 .itemBox > .item .text_box {
	width: 100%; height: 100%; position: relative;
	display: flex; justify-content:center; align-items: center;
}
main > .section2 .itemBox > .item .text_box .bg {
    position: absolute; top: 0; left: 0;
    z-index: 1; width: 100%; height: 105%;
	transition: all 0.8s;
}
main > .section2 .itemBox > .item .text_box .bg::after {
	content:''; position: absolute; top: 0; left: 0;
	z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.2);
	transition: all 0.8s;
}
main > .section2 .itemBox > .item01 .text_box .bg {background: url(../img/sec2_img01.jpg) no-repeat center center / cover;}
main > .section2 .itemBox > .item02 .text_box .bg {background: url(../img/sec2_img02.jpg) no-repeat center center / cover;}
main > .section2 .itemBox > .item03 .text_box .bg {background: url(../img/sec2_img03.jpg) no-repeat center center / cover;}
main > .section2 .itemBox > .item04 .text_box .bg {background: url(../img/sec2_img04.jpg) no-repeat center center / cover;}
main > .section2 .itemBox > .item05 .text_box .bg {background: url(../img/sec2_img05.jpg) no-repeat center center / cover;}

main > .section2 .itemBox > .item .text_box a {
	position: relative; z-index: 2;
	width: fit-content; height: fit-content; display: block; color: #fff;
}
main > .section2 .itemBox > .item .text_box a > h5 {
	font-weight: 500; font-size: max(15px, 2rem); color: inherit; margin-bottom: 0.25em;
	text-transform: uppercase;
}
main > .section2 .itemBox > .item .text_box a > h3 {font-weight: bold; font-size: max(25px, 5.5rem); color: inherit;}


/* hover */
@media (min-width: 992px) {
	main > .section2 .itemBox > .item .text_box a:hover + .bg {height: 100%; transition: all 0.5s;}
	main > .section2 .itemBox > .item .text_box a:hover + .bg::after {background: rgba(0,0,0,0.5);}

    /* animation */
    main > .section2 .itemBox > .item .text_box a {transition: 0.2s 0.5s; opacity: 0; transform: translateY(60%);}

    main > .section2.on .itemBox > .item .text_box a {opacity: 1; transform: translateY(0);}
    main > .section2.on .itemBox > .item01 .text_box a {transition: 0.8s 0.4s;}
    main > .section2.on .itemBox > .item02 .text_box a {transition: 0.8s 0.6s;}
    main > .section2.on .itemBox > .item03 .text_box a {transition: 0.8s 0.8s;}
    main > .section2.on .itemBox > .item04 .text_box a {transition: 0.8s 1s;}
	
}

@media (max-width: 1530px) {
	main > .section2 .itemBox > .item .text_box {justify-content: center;}
    main > .section2 .itemBox > .item .text_box a {text-align: center;}
}

@media (max-width: 1330px) {
    main > .section2 .itemBox {grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(2, 1fr);}
    main > .section2 .itemBox > .item01 {grid-area: 1 / 1 / 2 / 4;}
	main > .section2 .itemBox > .item01 .text_box .bg {background-position: center 75%;}
    main > .section2 .itemBox > .item02 {grid-area: 1 / 4 / 2 / 7;}
    main > .section2 .itemBox > .item03 {grid-area: 2 / 1 / 3 / 3;}
    main > .section2 .itemBox > .item04 {grid-area: 2 / 3 / 3 / 5;}
    main > .section2 .itemBox > .item05 {grid-area: 2 / 5 / 3 / 7;}
}


@media (max-width: 991px){
    main > .section2 {padding: 0 !important;}
    main > .section2 .itemBox{grid-template-columns: 1fr;grid-template-rows: repeat(5, 1fr);grid-auto-rows: minmax(40em, auto);}
	main > .section2 .itemBox > .item .text_box .bg {height: 100%;}

    main > .section2 .itemBox > .item01 {grid-area: 1 / 1 / 2 / 2;}
    main > .section2 .itemBox > .item02 {grid-area: 2 / 1 / 3 / 2;}
    main > .section2 .itemBox > .item03 {grid-area: 3 / 1 / 4 / 2;}
    main > .section2 .itemBox > .item04 {grid-area: 4 / 1 / 5 / 2;}
    main > .section2 .itemBox > .item05 {grid-area: 5 / 1 / 6 / 2;}

    main > .section2 .itemBox > .item .text_box a {padding:5rem 0;}
    
    /* data-scroll */
    main > .section2 .itemBox > .item .text_box .bg {transition: all 1s 0.2s;}
    main > .section2 .itemBox > .item01 .text_box .bg {transition-delay: 0.2s;}
    main > .section2 .itemBox > .item02 .text_box .bg {transition-delay: 0.4s;}
    main > .section2 .itemBox > .item03 .text_box .bg {transition-delay: 0.6s;}
    main > .section2 .itemBox > .item04 .text_box .bg {transition-delay: 0.8s;}
}

@media (max-width: 680px) {
    main > .section2 .itemBox{grid-auto-rows: minmax(20em, auto);}
}




/* section3 */
main > .section3 {position: relative;}
main > .section3 .containerV1 {display: flex; align-items: center;}
main > .section3 .itemBox {display: flex; gap: 4rem; justify-content: space-between; width: 100%; align-items: center;}
main > .section3 .itemBox .textBox h5 {color: #434343; font-size: max(15px, 2rem); line-height: 1.2; margin-bottom: 0.5em; font-weight: 550;}
main > .section3 .itemBox .textBox h3 {color: #0068b7; font-size: max(35px, 6.5rem); line-height: 1.2; margin-bottom: 0.7em; font-weight: bold;}
main > .section3 .itemBox .textBox h4 {color: #1b1b1b; font-size: max(25px, 3.5rem); line-height: 1.2; margin-bottom: 0.4em; font-weight: 550;}
main > .section3 .itemBox .textBox p {color: #626262; font-size: max(13px, 1.8rem); line-height: 1.4; margin-bottom: 2em;}
main > .section3 .itemBox .textBox .list {
	display: grid; grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(160px, auto);
	gap: 2.6em; width: 100%; max-width: 560px;
	margin-top: 7em;
}

main > .section3 .itemBox .textBox .list > li {box-shadow: 10px 11px 6px -6px #ccc;}
main > .section3 .itemBox .textBox .list > li a {
	width: 100%; height: 100%; display: flex; flex-direction: column; 
	align-items: center; justify-content: center; text-align: center;
	background: #f7f7f7; padding: 1.5em; color: #434343;

	transition: all 0.2s;
}
main > .section3 .itemBox .textBox .list > li a p {
	color: inherit; font-size: max(12px, 1.6rem); line-height: 1.2; white-space: nowrap;
	margin-bottom: 0.3em;
}
main > .section3 .itemBox .textBox .list > li a h5 {
	color: inherit; font-size: max(15px, 2rem); line-height: 1.2; white-space: nowrap;
	margin-bottom: 0.8em;
}


@media (min-width: 992px) {
	main > .section3 .itemBox .textBox .list > li:first-child a:hover {background: #68c7f2;}
	main > .section3 .itemBox .textBox .list > li:nth-child(2) a:hover {background: #007ac5;}
	main > .section3 .itemBox .textBox .list > li:nth-child(3) a:hover {background: #004492;}
	main > .section3 .itemBox .textBox .list > li a:hover {color: #fff;}
	main > .section3 .itemBox .textBox .list > li a:hover img {filter: brightness(10);}

    /* animation */
    main > .section3 .itemBox > .textBox > *:not(.list) {transition: 0.2s 0.5s; opacity: 0; transform: translateY(40%);}

    main > .section3.on .itemBox > .textBox > *:not(.list) {opacity: 1; transform: translateY(0);}
    main > .section3.on .itemBox > .textBox > h5 {transition: 0.8s 0.4s;}
    main > .section3.on .itemBox > .textBox > h3 {transition: 0.8s 0.6s;}
    main > .section3.on .itemBox > .textBox > h4 {transition: 0.8s 0.8s;}
    main > .section3.on .itemBox > .textBox > p {transition: 0.8s 1s;}
    main > .section3.on .itemBox > .textBox > a {transition: 0.8s 1.2s;}
    
    main > .section3 .itemBox .list > li {transition: 0.2s 0.5s; opacity: 0; transform: translateY(20%);}

    main > .section3.on .itemBox .list > li {opacity: 1; transform: translateY(0);}
    main > .section3.on .itemBox .list > li:first-child {transition: 0.8s 1.4s;}
    main > .section3.on .itemBox .list > li:nth-child(2) {transition: 0.8s 1.6s;}
    main > .section3.on .itemBox .list > li:last-child {transition: 0.8s 1.8s;}

    main > .section3 .itemBox .img {transition: 0.2s 0.5s; opacity: 0; transform: translateX(10%);}

    main > .section3.on .itemBox .img {opacity: 1; transform: translateX(0); transition: 1s 0.5s;}
    /* animation 끝*/
}

@media (992px <= width <= 1380px) {
	main > .section3 .itemBox .textBox {flex: 1;}
	main > .section3 .itemBox .textBox p br {display: none;}
	main > .section3 .itemBox .img {width: 50%;}
}

@media (max-width: 991px) {
	main > .section3 .itemBox {flex-direction: column; align-items: start; gap: 6em;}
	main > .section3 .itemBox .img {align-self: end;}
	main > .section3 .item_btn > span {mix-blend-mode: unset;}
	main > .section3 .itemBox .textBox {width: 100%;}
	main > .section3 .itemBox .textBox .list {grid-auto-rows: minmax(16em, auto);}
	main > .section3 .itemBox .textBox .list > li {min-width: 90px;}
	main > .section3 .itemBox .textBox .list > li:first-child img {width: 4em;}
	main > .section3 .itemBox .textBox .list > li:nth-child(2) img {width: 4em;}
	main > .section3 .itemBox .textBox .list > li:nth-child(3) img {width: 3.2em;}

    /* data-scroll */
    main > .section3 .fade_up {transition: all 1s 0.2s;}
    main > .section3 .itemBox .textBox h5 {transition-delay: 0.2s;}
    main > .section3 .itemBox .textBox h3 {transition-delay: 0.4s;}
    main > .section3 .itemBox .textBox h4 {transition-delay: 0.6s;}
    main > .section3 .itemBox .textBox p {transition-delay: 0.8s;}
    main > .section3 .itemBox .textBox a {transition-delay: 1s;}

    main > .section3 .itemBox .textBox .list > li:first-child {transition-delay: 1.2s;}
    main > .section3 .itemBox .textBox .list > li:nth-child(2) {transition-delay: 1.4s;}
    main > .section3 .itemBox .textBox .list > li:last-child {transition-delay: 1.6s;}

    main > .section3 .itemBox .img {transition-delay: 1s;}
}

@media (max-width: 500px) {
	main > .section3 .itemBox .textBox p br {display: none;}
}



/* section4 */
main > .section4 {position: relative;}
main > .section4::before {
	content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; z-index: 1;
	background: #e5f0f8;
}
main > .section4 .containerV1 {position: relative; z-index: 2;}
main > .section4 .titleBox {margin-bottom: 4rem; display: flex; align-items: end; justify-content: space-between; gap: 4rem;}
main > .section4 .titleBox .title {display: flex; align-items: end; gap: 10px; flex-wrap: wrap;}
main > .section4 .titleBox .title > h3 {font-size: max(35px, 6.5rem); font-weight: 600; white-space: nowrap; color: #0068b7;}
main > .section4 .titleBox .title > h5 {font-size: max(15px, 2rem); font-weight: 400; color: #707070; line-height: 1.3;}

main > .section4 .itemBox {
	width: 100%; overflow: hidden;
    height: 630px; display: flex;
    align-items: center; justify-content: center;
}
main > .section4 .itemBox > div {width: 100%; padding: 56.25% 0 0 0; position:relative;}


@media (min-width: 992px) {
    /* animation */
    main > .section4::before {transition: 0.2s 0.5s; opacity: 0; height: 30%;}
    main > .section4.on::before {transition: 1.5s 0.3s; opacity: 1; height: 50%;}

    main > .section4 .titleBox > * {transition: 0.2s 0.5s; opacity: 0; transform: translateY(10%);}
    main > .section4 .itemBox {transition: 0.2s 0.5s; opacity: 0; transform: translateY(5%);}

    main > .section4.on .titleBox > * {opacity: 1; transform: translateY(0%);}
    main > .section4.on .titleBox > .title {transition: 0.8s 0.5s;}
    main > .section4.on .titleBox > a {transition: 0.8s 0.7s;}

    main > .section4.on .itemBox {transition: 1.2s 0.9s; opacity: 1; transform: translateY(0%);}
}

@media (max-width: 1430px) {
	main > .section4 .itemBox {height: 43.3vw;}
}

@media (max-width: 991px) {
    main > .section4 {padding: 10em 0 15em !important;}
	main > .section4 .titleBox {flex-direction: column; align-items: start; margin-bottom: 8rem; gap: 6em;}
	main > .section4 .titleBox .item_btn {align-self: end;}
    main > .section4 .titleBox .title {align-items: start; flex-direction: column;}
	
	main > .section4 .itemBox {height: 42vw;} 
	main > .section4 .itemBox > div {padding: 56.25% 0 0 0;}


    /* data-scroll */
    main > .section4 .fade_up {transition: all 1s 0.2s;}
    main > .section4 .title h3 {transition-delay: 0.2s;}
    main > .section4 .title h5 {transition-delay: 0.4s;}
    main > .section4 .titleBox a {transition-delay: 0.6s;}
    main > .section4 .itemBox {transition-delay: 0.8s;}
}

@media (max-width: 500px) {
	main > .section4 .itemBox {height: 40vw;}
}





/* section5 */
main > .section5 {position: relative;}
main > .section5::before {
    content:''; position: absolute; z-index: 1;
    top: 0; left: 0; height: 100%; width: 36.5%;
    background: url(../img/sec5_img01.jpg) no-repeat center center / cover;
}
main > .section5 .itemBox {
    position: relative; z-index: 2;
    display: flex; gap: 4.5em; 
    
}
main > .section5 .itemBox .img {
    width: 100%; max-width: 700px; height: 100%;
    display: flex; flex-direction: column;
    padding: 17em 7em 0 0;
}
main > .section5 .itemBox .img .titleBox {align-self: end;}
main > .section5 .itemBox .img .titleBox h5 {
    font-size: max(15px, 2rem); color: #0068b7;
    font-weight: 550; line-height: 1.2; text-transform: uppercase;
}
main > .section5 .itemBox .img .titleBox h3 {
    font-size: max(35px, 5.5rem); color: #313131;
    font-weight: 500; line-height: 1.3;
}

main > .section5 .itemBox .list {width: 100%; max-width: 900px; flex: 1;}
main > .section5 .itemBox .list > .press {transform: translateY(40px); width: 100%;}

@media (min-width: 992px) {
    /* animation */
    main > .section5::before {transition: 0.2s 0.5s; opacity: 0;}
    main > .section5.on::before {transition: 1s 0.5s; opacity: 1;}

    main > .section5 .img .titleBox > * {transition: 0.2s 0.5s; opacity: 0; transform: translateY(10%);}
    main > .section5.on .img .titleBox > * {opacity: 1; transform: translateY(0%);}
    main > .section5.on .img .titleBox > h5 {transition: 0.8s 0.7s;}
    main > .section5.on .img .titleBox > h3 {transition: 1s 0.9s;}

    main > .section5 .itemBox .list {transition: 0.2s 0.5s; opacity: 0; transform: translateX(5%);}
    main > .section5.on .itemBox .list {transition: 0.8s 1.1s; opacity: 1; transform: translateX(0%); padding-right: 15px;}
  
}

@media (min-width: 1921px) {
    main > .section5 .itemBox {margin: 0 auto; width: fit-content;}
    main > .section5 .itemBox .list {min-width: 900px; flex: 1;}
}

@media (992px <= width <= 1430px) {
    main > .section5.on .img .titleBox > h3 {font-size: 4rem;}
}

@media (max-width: 1430px) {
    main > .section5::before {width: 100%; max-width: 700px;}
    main > .section5 .itemBox .list {max-width: 700px;}
    main > .section5 .itemBox .img {max-width: 400px; padding: 17em 0 0 15px;}
}

@media (max-width: 991px) {
    main > .section5 .itemBox {flex-direction: column;}
    main > .section5 .itemBox .img {max-width: 100%; padding: 5em 15px 0 5em;}
    main > .section5 .itemBox .img .titleBox {align-self: unset;}
    main > .section5 .itemBox .list {max-width: 100%; padding: 0 15px;}


    /* data-scroll */
    main > .section5 .fade_up {transition: all 1s 0.2s;}
    main > .section5 .titleBox h5 {transition-delay: 0.2s;}
    main > .section5 .titleBox h3 {transition-delay: 0.4s;}
    main > .section5 .list .press {transition-delay: 0.6s;}
    main > .section5 .list .news {transition-delay: 0.8s;}
}



/* section6 */
main > .section6 {position: relative; background: #fff;}
main > .section6::before {
	content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	background: url(../img/sec6_bg.jpg) no-repeat center center / cover;
}
main > .section6 .containerV1 {display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;}
main > .section6 .titleBox {text-align: center; display: flex; flex-direction: column; align-items: center; color: #fff;}
main > .section6 .titleBox > h5 {font-size: max(15px, 2rem); font-weight: 550; line-height: 1.2; color: inherit; margin-bottom: 1em;}
main > .section6 .titleBox > h3 {font-size: max(30px, 5rem); font-weight: bold; line-height: 1.4; color: inherit; margin-bottom: 1em;}
main > .section6 .titleBox .item_btn {color: #fff;}
main > .section6 .titleBox .item_btn span {color: #fff;}
main > .section6 .item_btn::before {background: #c9c9c9;}

@media (min-width: 992px) {
	main > .section6::before {opacity: 0; transition: 0.3s 0.5s;}
	main > .section6.on::before {opacity: 1; transition: 2s 0.5s;}

	main > .section6 .titleBox > * {transform: translateY(20%); opacity: 0; transition: 0.3s 0.5s;}
	main > .section6.on .titleBox > * {transform: translateY(0); opacity: 1;}
	main > .section6.on .titleBox > h5 {transition: 1s 1.3s;}
	main > .section6.on .titleBox > h3 {transition: 1s 1.6s;}
	main > .section6.on .titleBox > .item_btn {transition: 1s 1.9s;}
}

@keyframes sec6_ani {
	to {opacity: 1;}
}

@media (max-width: 991px) {
	main > .section6 {padding: 20em 0 !important;}

    /* data-scroll */
    main > .section6::before {transition: 1s 0.2s;}
    main > .section6[data-scroll="out"]::before {opacity: 0;}
    main > .section6 .fade_up {transition: all 1s 0.2s;}
    main > .section6 .titleBox h5 {transition-delay: 0.2s;}
    main > .section6 .titleBox h3 {transition-delay: 0.4s;}
    main > .section6 .titleBox a {transition-delay: 0.6s;}
}

@media (max-width: 500px) {
	main > .section6 .titleBox > h3 br {display: none;}
}


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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
footer {
	--footer-font-color: #dcdcdc;
	font-size: min(calc(10 / 500 * 100vw ), 10px);
	background: #313131;
}

footer .containerV1 {padding: 15px 0 0; max-width: 1680px;}
footer .contents {display:flex; width: 100%; padding: 5em 0; justify-content: space-between;}
footer .item1 {display: flex; flex-direction: column; flex: 1;}

footer .item1 > .ft_logo {margin-bottom: 2em;}
footer .item1 > div { line-height: 1.4; font-size: 1.5em; color: var(--footer-font-color); margin-bottom: 5px;}
footer .item1 > .text {display: flex; gap: 0 2.5em; flex-wrap: wrap;}
footer .item1 > div a { color: inherit; }
footer .item1 > .text > span { position: relative; font-weight: inherit;}
footer .item1 > .copy { text-transform: uppercase; color: var(--footer-font-color); font-size: 1.5em;}
footer .item1 > .copy a {color: inherit;}

footer .item2 {width: 100%; max-width: 250px;}
footer .item2 > .list {display: flex; flex-direction: column; gap: 13px;}
footer .item2 > .list > li {border-bottom: 1px solid var(--footer-font-color);}
footer .item2 > .list > li a {
	color: var(--footer-font-color); padding: 12px 10px 12px 5px;
	display: flex; align-items: center; justify-content: space-between;
	font-size: max(13px, 1.6em); line-height: 1.2;

	transition: 0.2s;
}


@media (min-width: 992px) {
	footer .item2 > .list > li:hover a {color: #fff; transform: translateX(1%);}
}

@media (max-width: 1730px) {
	footer .containerV1 {padding: 0 15px;}
}

@media (max-width:991px) {
	footer .contents {flex-direction: column; gap: 4em; padding: 10px 0 50px;}
	footer .top_info_box .containerV1 {justify-content: center;}
	footer .item1 {order: 2;}
	footer .item1 > .copy {display: block;}
	footer .item2 {width: 100%; order: 1; max-width: 100%;}
	footer .item2 > .list {display: grid; grid-template-columns: repeat(2, 1fr);}
}

@media (max-width:680px) {
	footer .item1 > .ft_logo {width: 23em;}
	footer .contents {padding: 3em 0 4em;}
	footer .item1 > .text > span {line-height: 1.6;}
	footer .item1 > .text b {display: none;}
	footer .item2 {display: none;}
}

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


/* 페이지 탭 */
.page_frame {font-size: min(calc(10 / 500 * 100vw), 10px);}

.page_frame .nav-tabs {
    display: grid; grid-template-columns: repeat(2, 1fr);
    margin: 0 auto 7em auto; border-bottom: none; width: 100%; max-width: 850px; padding: 0 15px;
}
.page_frame .nav-tabs:before {display: none;}

.page_frame .nav-tabs:after {border: 1px solid #cdcdcd; margin-right: -1px; margin-bottom: -1px; display: none;}
.page_frame .nav-tabs>li {margin-bottom: 0; text-align: center; font-size: 1.8em;}
.page_frame .nav-tabs>li>a {
	border-radius: 0; border: 1px solid #cdcdcd; 
	margin-right: -1px; margin-bottom: -1px; 
	transition: 0.2s; height: 102%;
	display: flex; justify-content: center; align-items: center;
}
.page_frame .nav-tabs>li>a:hover {color: var(--main-color);}

.page_frame .nav-tabs>li.active>a{
    background-color: var(--main-color); color: #fff; border: 1px solid var(--main-color);
}



/* 페이지 테이블 안내문 */
.page_frame .scroll_txt {
    font-size: 13px !important; color: #ff0000 !important; text-align: center !important;
    margin: 1em auto !important; line-height: 1.4 !important; display: none !important;
}

@media (max-width: 768px) {
    .page_frame .scroll_txt {display: block !important;}
}

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

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


.lang_active a {color: #57cced !important;}

/* 게시판 스타일 조정 */
.board-list {font-size: 16px;}
.btn-sm, .btn-group-sm>.btn {font-size: 14px;}
/* .write-wrap .form-group  {font-size: 16px;} */
.div-head {padding:  20px 0; border-top: 3px solid #333 !important; border-bottom: 1px solid #333 !important;}
.div-head span {font-weight: 500;}
.list-board .list-body li > div {padding: 20px 0; color: #000;}
.list-board .list-body .wr-subject .item-subject {font-weight: 300;}
.list-board .list-body .wr-name {font-weight: 500;}

.faq_subject {font-size: 16px;}
.div-panel.panel-group .panel-heading a {padding: 20px 15px; padding-left: 0;}