@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;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;
        margin-bottom: calc(var(--form-height) * 1px);
    }
    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 : 1400;

	--main-color : #fe2d06; /* mainColor */
    --basic-border-color: #333;	/* 게시판 및 게시판헤드 등 기타 버튼들 border 컬러 */
    
    --h-height : 100px; /* head 높이값 */
}


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

.ikwrap { overflow-x: hidden; }

/* 게시판 글 없을 때 */
.post-none { font-size: 16px; }

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

.font-em500 {font-size: min(calc(10 / 500 * 100vw), 10px);}


/* 애니메이션 */

main .char {
  display: inline-block;
  /* animation-delay: calc(0.25s + var(--char-index) * 0.1s); */
  transition: transform 1s calc(var(--char-index) * 0.05s),
                opacity 1s calc(var(--char-index) * 0.05s);
}


@media (min-width: 992px) {
    .fade_up {opacity: 0; transform: translateY(15%); transition: 0.8s;}
    #index .section.on .fade_up {opacity: 1; transform: translateY(0);}

	main .char {
	  transition: transform 1s calc(var(--char-index) * 0.02s),
					opacity 1s calc(var(--char-index) * 0.02s);
	}
	#index .section.on .char {
	  transition: transform 1s calc(var(--char-index) * 0.08s),
					opacity 1s calc(var(--char-index) * 0.08s);
	}
}

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


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

@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 .itemBox {
        width: 100%; height: 100%; display:flex; align-items:center; 
        position: relative; z-index: 2; justify-content: space-between;
    }
    
    #logo .logo_1 {display: block;}
    #logo .logo_2 {display: none;}
    #logo a {display: flex; align-items: center;}
    
    
    
    /*main_menu---------------------------------------------------------------------------*/
    #nav {display: flex; font-size: 10px;}
    #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: 11em; 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; text-align: center;
        transition: all 0.3s; font-weight: bold; letter-spacing: 1px;
    }
    #nav .outer > li > a > span {position: relative;}
    #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: 992px) {

        /* 버튼 */
        #header .h-active_box {display: none;}
        .close_btn {font-size: 50px; color: #fff; cursor: pointer;}
        #header .h-active_box .close_btn {display: none;}
        .open_btn {
            font-size: 40px; color: #fff; cursor:pointer;
            padding: 0 4.3em; height: 100%; display: flex; align-items: center;
            justify-content: center;
        }
        #nav .outer > li > a {z-index: 2; position: relative;}
        #nav .outer > li > a > i {color: var(--main-color); display: none;}
		
		/*sub_menu---------------------------------------------------------------------------*/
		#header #nav .inner {
			display: block; position: absolute; left: 50%; top: -10%; width: 18em; transform: translateX(-50%); left: 50%;
			opacity: 0; visibility: hidden; z-index: 1; text-align: center; background: rgba(30, 30, 30, 0.9); padding: 0px 0 15px;
			backdrop-filter: blur(10px); z-index: -10;
			border-radius: 0 0 15px 15px; height: auto; overflow: hidden; 
            padding-top: calc(var(--h-height) - 15px);

            transition: all 0.3s;
		}
		#header #nav .inner > li {
            position: relative; color: rgba(255,255,255,0.5); line-height: 1.3; opacity: 0; 
            transition: 0.3s;
        }
		#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 > a > span:after {
			content: ''; position: absolute;  bottom: -10px; width: 0; height: 2px; background: var(--main-color); transition:0.4s; left: 50%;
			transform: translateX(-50%);
		}


		/* hover */
        #header #nav .outer > li:hover > a > span {color: #fff;}
        #header #nav .outer > li:hover > a > span:after {width: 100%;}
		#header #nav .outer > li > .inner > li:hover > a {color: #fff;}
		#header #nav .outer > li:hover .inner {
		    opacity: 1; visibility: visible; height: auto;
		    transition: all 0.4s 0.1s; top: 0; z-index: 1;
		}
        #header #nav .outer > li:hover .inner > li {opacity: 1; transition: 0.3s;}

        /* 해당페이지일 때 */
        #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 .outer > li > a {color: #000;}
    #header.scroll .open_btn {color: #000;}
    
    
    /*모바일에서 피씨 로고 클래스 지움.*/
    #logo.logo_hide {opacity: 1; visibility: visible;}
    
}
    
/*반응형-------------------------------------------------------------*/

@media (max-width: 1850px) {
    #header .itemBox {justify-content: space-between; gap: 20px;}
}


@media (max-width: 1430px) {
    .open_btn {padding: 0;}
    #nav .outer > li {margin-left: 6em;}
}

@media (992px <= width <= 1431px) {
	#header #nav .inner {width: 180px;}
    #header #nav .nav_inner {margin-right: 4em;}
}


/*모바일*/
@media all and (max-width: 991px) {
    :root {
        --h-height: 70px;
    }
    #header {--menu-font-color: #222;}
    #header .containerV1 {height: 100%;}
    #header .itemBox {height: 100%;}


    #logo {width: 150px;}

    /* 버튼 */
    .close_btn {font-size: 40px; color: #000; cursor: pointer;}
    #header .h-active_box .close_btn {display: none;}
    .open_btn {
        font-size: 40px; color: #fff; cursor:pointer;
        height: 100%; display: flex; align-items: center;
        justify-content: center;
    }

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



    #nav {
        position: fixed; width: 100%; left: 0; z-index: 100;
        background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; 
        height: calc(100% - var(--h-height)); top: var(--h-height); overflow-y: auto;

        font-size: min(calc(10 / 991 * 100vw), 10px);
    }
    #nav .nav_inner {margin-right: 0; align-items: unset; gap: 0; opacity: 0; position: relative; top: -3%; transition: 0.2s;}
    #nav .nav_inner .outer {
        display: flex; flex-direction: column; padding: 20px 20px 0;
        transform: translateY(-5%); transition: 0.3s; width: 100%;
    }

    #nav .nav_inner .outer > li {
        --transition: 0.3s; height: auto;
        display: flex; flex-direction: column;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding: max(20px, 3em) 0; color: #fff; margin-left: 0;
    }
    #nav .nav_inner .outer > li > a {
        display: flex; justify-content: space-between; font-size: 25px;
        position: relative; font-size: max(20px, 3.2em); color: inherit; font-weight: 500;
    }
    #nav .nav_inner .outer > li > a {pointer-events: none;}
    #nav .nav_inner .outer > li > a > i {transition: 0.3s;}

    #header #nav .inner {
        height: 0; opacity: 0; visibility: hidden;
    }
    
    #header #nav .inner > li {padding: 10px 0;}
    #header #nav .inner > li > a {
        display: block; font-size: max(17px, 2.5em); color: inherit;
        opacity: 0.3; transition: var(--transition); font-weight: 500;
    }
    

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


    /* inactive */
    #header.menu_active {background: #fff;}
    #header.menu_active #logo .logo_2 {display: block;}
    #header.menu_active #logo .logo_1 {display: none;}
    #header.menu_active .open_btn {color: #000;}
    #header.menu_active .langBox {--color: #000;}

    #nav.inactive {opacity: 1; visibility: visible;}
    #nav.inactive .nav_inner {top: 0; opacity: 1; transition: 0.5s 0.1s;}
    #nav.inactive .nav_inner .outer {transform: translateY(0);}

    /* hover */
    #header #nav .inner > li > a:hover {opacity: 1;}

    /* scroll */
    #header.scroll {background: #fff;}
}


/* fullpage navigation */
#nav_menu {
	--active-color: #fe2d06;
	position: fixed; right: 20px; top: 40%; z-index: 999;
}
#nav_menu .nav_list {display: flex; flex-direction: column; gap: 15px;}
#nav_menu .nav_list > li {position: relative;}
#nav_menu .nav_list > li > a {
	width: 25px; height: 25px; display: flex; border-radius: 50%; 
    align-items: center; justify-content: center;
	position: relative; z-index: 2;
}
#nav_menu .nav_list > li > a::before {
	content:""; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%); width: 0; height: 0;
	border: 2px solid #434343; box-sizing: border-box; transition: all 0.5s;
	border-radius: 50%;
}

#nav_menu .nav_list > li > a > span {
	display: block; border-radius: inherit; width: 10px; height: 10px; background: #434343;
	transition: all 0.5s;
}

#nav_menu .nav_list > li small {
	color: #fff; font-size: 16px; position: absolute; z-index: 1; font-weight: 400;
	transition: all 0.5s; top: 50%; transform: translateY(-50%); white-space: nowrap;
	right: 140%; width: fit-content; display: block; text-align: right; 
}
#nav_menu .nav_list > li.active > a > span {background: var(--active-color);}
#nav_menu .nav_list > li.active > a::before {
    width: 100%; height: 100%; border-color: var(--active-color);
}
#nav_menu .nav_list > li.active small {font-weight: bold;}


/* 배경 하얀 구간일때 */
#nav_menu.page_on .nav_list > li small {color: #000;}


@media (max-width: 991px) {
	#nav_menu {display: none;}
}

@media (max-width: 500px) {
	#logo {width: 120px;}
}

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



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

@media (992px <= width <= 1560px) {
    .font-em500 {font-size: min(calc(10 / 500 * 100vw), 8px);}
}


@media (max-width: 991px) {
    main .section:not(:first-child, :last-child) {padding: 12em 0 7em;}
}
main .section .titleBox h5 {font-size: max(16px, 2.5em); line-height: 1.2; font-weight: 400; letter-spacing: 1px;}
main .section .titleBox h3 {font-size: max(20px, 4em); line-height: 1.25; font-weight: bold;}

/* 버튼 */
main .section .item_btn {
    border-radius: 40px; width: 100%; max-width: 20.5em; height: 6em;
    border: 1.5px solid var(--main-color); position: relative;
    display: flex; justify-content: center; align-items: center;
    gap: 7px; overflow: hidden; background: #fff;
}
main .section .item_btn span {
    color: #434343; font-size: max(13px, 1.6em); position: relative; 
    z-index: 2; transition: 0.5s 0.2s;
}

main .section .item_btn::before {
    content: ''; position: absolute; z-index: 1;
    top: 50%; left: -100%; transform: translateY(-50%);
    width: 100%; height: 100%; background: var(--main-color);

    transition: 0.5s 0.2s;
}

@media (min-width: 992px) {
    main .section .item_btn:hover:before {left: 0;}
    main .section .item_btn:hover span {color: #fff;}
}

@media (max-width: 991px) {
    main .section .item_btn {background: var(--main-color);}
    main .section .item_btn::before {display: none;}
    main .section .item_btn span {color: #fff;}
}
/* 버튼 끝 */



/* sec2 */
main .sec2 .itemBox {display: flex; align-items: center; justify-content: space-between;}
main .sec2 .textBox h3 {
    font-size: max(25px, 7em); font-weight: 900; line-height: 1.2;
    color: var(--main-color); margin-bottom: 0.3em;
}
main .sec2 .textBox h4 {
    font-size: max(16px, 2.5em); font-weight: bold; line-height: 1.3;
    color: #313131; margin-bottom: 0.5em;
}
main .sec2 .textBox h5 {
    font-size: max(14px, 1.8em); font-weight: 500; line-height: 1.4;
    color: #434343; position: relative;
}
main .sec2 .textBox .item_btn {margin-top: 7.5em;}


main .sec2 .itemBox .img {position: relative;}
main .sec2 .itemBox .img img {width: 60.5em;}
main .sec2 .itemBox .img .unit2 {position: absolute; top: 0; left: 0;}



@media (min-width: 992px) {

    /* full_animation */
    main .sec2 .textBox > * {transition: 0.2s 0.4s;}
	main .sec2 .textBox .char {opacity: 0; transform: translateY(20%);}
	main .sec2.on .textBox .char {
		opacity: 1; 
		transform: translateY(0%);
	}
    main .sec2.on .textBox h4 {transition-delay: 1.2s;}
    main .sec2.on .textBox h5 {transition-delay: 1.5s;}
    main .sec2.on .textBox .item_btn {transition: 0.8s 1.8s;}
	
	main .sec2 .itemBox .img {transition: 0.2s 0.4s;}
	main .sec2 .itemBox .img .unit2 {transition: 0.2s 0.4s;}
	main .sec2 .itemBox .img {transform: translateX(-30%);}

	main .sec2.on .itemBox .img {transform: translateX(0%); transition: 2s;}
	main .sec2.on .itemBox .img .unit2 {opacity: 0; transition: 1s 1s;}
    /* full_animation end*/
}

@media (992px <= width <= 1430px) {
    main .sec2 .itemBox .img {width: 40%; min-width: 450px;}
    main .sec2 .itemBox .img img {width: 100%;}
}

@media (992px <= width <= 1050px) {
    main .sec2 .textBox h5 br {display: none;}
}

@media (max-width: 991px) {
    main .sec2 .itemBox {flex-direction: column; align-items: start; gap: 5em;}
    main .sec2 .itemBox .img {align-self: end; margin-right: 6em;}
    main .sec2 .itemBox .img img {width: 100%; max-width: 50em;}

    main .sec2 .itemBox .img .unit2 {display: none;}


    /* animation-delay */
	main .sec2 .textBox[data-scroll="out"] .char {
		opacity: 0; 
		transform: translateY(20%);
	}
    main .sec2 .textBox h3 {transition-delay: 0.8s;}
    main .sec2 .textBox h4 {transition-delay: 1.2s;}
    main .sec2 .textBox h5 {transition-delay: 1.5s;}
    main .sec2 .textBox .item_btn {transition: 0.8s 1.8s;}

    main .sec2 .itemBox .img {transition: 1.2s 1s;}
    main .sec2 .itemBox .img[data-scroll="out"] {transform: translateY(10%); opacity: 0.5;}
}

@media (max-width: 768px) {
    main .sec2 .itemBox .img img {max-width: 30em;}
}

@media (max-width: 600px) {
    main .sec2 .textBox h5 br {display: none;}
}


/* sec3 */
main .sec3 {position: relative;}
main .sec3 .containerV1 {max-width: 100%; padding: 0;}
main .sec3 .itemBox {
    display: grid; grid-template-columns: repeat(2, 1fr);
    align-items: center;
}
main .sec3 .itemBox .img {
    width: 100%; height: 100vh;
}
main .sec3 .itemBox .img .slide1 {background: url(../img/sec3_img01.jpg) no-repeat center center / cover;}
main .sec3 .itemBox .img .slide2 {background: url(../img/sec3_img02.jpg) no-repeat center center / cover;}
main .sec3 .itemBox .img .slide3 {background: url(../img/sec3_img03.jpg) no-repeat center center / cover;}

main .sec3 .textBox .title {margin-bottom: 5em;}
main .sec3 .textBox h3 {
    font-size: max(25px, 7em); font-weight: 900; line-height: 1.2;
    color: var(--main-color); margin-bottom: 0.3em;
}
main .sec3 .textBox h4 {
    font-size: max(16px, 2.5em); font-weight: bold; line-height: 1.3;
    color: #000; margin-bottom: 0.5em;
}
main .sec3 .textBox h5 {
    font-size: max(14px, 1.8em); font-weight: 500; line-height: 1.4;
    color: #434343; position: relative;
}
main .sec3 .textBox .item_btn {margin-top: 7.5em;}

main .sec3 .textBox .link_box {
    width: 100%; max-width: 594px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6em;
}

main .sec3 .textBox .link_box > li {
    overflow: hidden; border-radius: 3em;
}
main .sec3 .textBox .link_box > li a {
    background: #ffab9b; padding: 3.7em 10px; display: flex;
    flex-direction: column; align-items: center; gap: 2em;
    color: #fff; text-align: center; transition: 0.3s;
}
main .sec3 .textBox .link_box > li a .icon {
    position: relative; transform-style:preserve-3d;
    width: fit-content;
}
main .sec3 .textBox .link_box > li a img {
    width: 8.4em; backface-visibility:hidden;
    transition: 0.7s 0.2s;
}
main .sec3 .textBox .link_box > li a .unit02 {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    transform:rotateY(-180deg);
}

main .sec3 .textBox .link_box > li a h5 {
    font-size: max(14px, 1.8em); color: inherit; line-height: 1.2;
    font-weight: bold;
}
main .sec3 .textBox .link_box > li a span {
    font-size: max(13px, 1.6em); color: inherit; line-height: 1.2;
    font-weight: 400;
}
main .sec3 .textBox .link_box > li a span > i {margin-left: 2px;}

@media (min-width: 992px) {
    main .sec3 .textBox {padding-left: 14.5em; padding-right: 15px;}

    main .sec3 .textBox .link_box > li:hover a {background: #111;}
    main .sec3 .textBox .link_box > li:hover .unit01 {transform:rotateY(-180deg);}
    main .sec3 .textBox .link_box > li:hover .unit02 {transform:rotateY(0deg);}

    /* full_animation */
    main .sec3 .textBox .title > * {transition: 0.2s 0.4s;}
    /* main .sec3.on .textBox h3 {transition: 0.8s 0.8s;} */
	main .sec3 .textBox .char {opacity: 0; transform: translateY(20%);}
	main .sec3.on .textBox .char {
		opacity: 1; 
		transform: translateY(0%);
	}
    main .sec3.on .textBox h4 {transition: 0.8s 1.2s;}
    main .sec3.on .textBox h5 {transition: 0.8s 1.5s;}

	main .sec3 .link_box > li {transition: 0.2s 0.4s;}
	main .sec3.on .link_box > li:nth-child(1) {transition: 0.7s 1.7s;}
	main .sec3.on .link_box > li:nth-child(2) {transition: 0.7s 1.9s;}
	main .sec3.on .link_box > li:nth-child(3) {transition: 0.7s 2.1s;}
    /* full_animation end*/
}

@media (992px <= width <= 1050px) {
    main .sec3.on .textBox h5 br {display: none;}
}

@media (max-width: 991px) {
    main .sec3 .itemBox {grid-template-columns: 1fr; position: relative;}
    main .sec3 .itemBox .img {height: 60em;}

    /* animation_delay */
    main .sec3 .itemBox .img {transition: 1.2s 0.5s;}
    main .sec3 .itemBox .img[data-scroll="out"] {opacity: 0; transform: translateY(10%);}
    /* main .sec3 .textBox h3 {transition: 0.8s 0.8s;} */
	main .sec3 .textBox[data-scroll="out"] .char {
		opacity: 0;
		transform: translateY(20%);
	}
    main .sec3 .textBox h4 {transition: 0.8s 1.2s;}
    main .sec3 .textBox h5 {transition: 0.8s 1.5s;}

    main .sec3 .link_box > li:nth-child(1) {transition: 0.7s 1.7s;}
	main .sec3 .link_box > li:nth-child(2) {transition: 0.7s 1.9s;}
	main .sec3 .link_box > li:nth-child(3) {transition: 0.7s 2.1s;}
    /* animation_delay*/
}

@media (681px <= width <= 991px) {
    main .sec3 .itemBox {padding-bottom: 27em;}
    main .sec3 .textBox {
        position: absolute; z-index: 2; background: #fff;
        bottom: 0; right: 0; width: 90%;
        padding: 2em 15px 0 4em;
    }
}

@media (max-width: 680px) {
    main .sec3 .itemBox {gap: 3em;}
    main .sec3 .itemBox .img {height: 35em;}
    main .sec3 .textBox {padding: 0 15px;}
    main .sec3 .textBox .link_box {max-width: 100%;}
    main .sec3 .textBox .link_box > li a {padding: 3em 10px;}
}

@media (max-width: 550px) {
    main .sec3 .textBox h5 br {display: none;}
    main .sec3 .textBox .link_box {grid-template-columns: repeat(2, 1fr);}
    /* main .sec3 .textBox .link_box > li:nth-child(3) {grid-column: 2 / 3;} */
}



/* sec4 */
main .sec4 {position: relative;}
main .sec4 .containerV1 {position: relative; z-index: 2;}

/* 배경 */
main .sec4 .slide_bg {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;}
main .sec4 .slide_bg > div {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: 0.4s;}
main .sec4 .slide_bg > div.active {opacity: 1;}
main .sec4 .slide_bg > div:nth-child(1) {background: url('../img/sec4_bg_01.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(2) {background: url('../img/sec4_bg_02.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(3) {background: url('../img/sec4_bg_03.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(4) {background: url('../img/sec4_bg_04.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(5) {background: url('../img/sec4_bg_05.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(6) {background: url('../img/sec4_bg_06.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(7) {background: url('../img/sec4_bg_07.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(8) {background: url('../img/sec4_bg_08.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(9) {background: url('../img/sec4_bg_09.jpg') no-repeat center center / cover;}
main .sec4 .slide_bg > div:nth-child(10) {background: url('../img/sec4_bg_10.jpg') no-repeat center center / cover;}

/* 탭형 도트네비 */
main .sec4 .swiper-pagination {
    position: relative; width: 100%; display: grid;
	grid-template-columns: repeat(5, 1fr);
}
main .sec4 .swiper-pagination .swiper-pagination-bullet {
    width: 100%; height: 3em; display: flex; align-items: center;
    text-align: center; padding: 10px; justify-content: center;
    background: rgba(255,255,255,0.4); color: #fff;
    font-size: max(14px, 1.8em); font-weight: 400;
    opacity: 1; border-radius: 0; margin: 0; line-height: 1.2;

    transition: 0.3s;
}

@media (min-width: 681px) {
	main .sec4 .swiper-pagination .swiper-pagination-bullet:not(:last-child, :nth-child(5)) {
		border-right: 2px solid rgba(255,255,255,0.5);
	}
	main .sec4 .swiper-pagination .swiper-pagination-bullet:nth-child(-n+5) {
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}

}

main .sec4 .swiper-pagination .swiper-pagination-bullet-active {
    font-weight: 900; background: var(--main-color);
}


/* 슬라이드 */
main .sec4 .itemBox {margin: 5em auto 7em;}
main .sec4 .itemBox .swiper-slide {
    text-align: center; display: flex; color: #fff;
    flex-direction: column; align-items: center;
}
main .sec4 .itemBox .swiper-slide h3 {
    font-size: max(20px, 3.5em); font-weight: bold;
    line-height: 1.2; margin-bottom: 0.8em; padding-bottom: 0.7em;
    position: relative;

    opacity: 0; transform: translateY(10%);
    transition: 0.8s 0.4s;
}
main .sec4 .itemBox .swiper-slide h3::before {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 2.8571em; height: 5px;
    background: var(--main-color);

    width: 0; transition: 1s 0.7s;
}
main .sec4 .itemBox .swiper-slide h5 {
    font-size: max(14px, 1.8em); color: inherit; line-height: 1.5;
    font-weight: 400;

    opacity: 0; transform: translateY(5%);
    transition: 0.8s 1s;
}
main .sec4 .itemBox .swiper-slide .item_btn {
    margin-top: 4.5em; background: transparent;

    opacity: 0; transform: translateY(5%);
    transition: 0.8s 1.3s; 
}
main .sec4 .itemBox .swiper-slide .item_btn span {color: #fff;}

/* slide-active */
main .sec4 .itemBox .swiper-slide-active h3 {opacity: 1; transform: translateY(0);}
main .sec4 .itemBox .swiper-slide-active h3::before {width: 2.8571em;}
main .sec4 .itemBox .swiper-slide-active h5 {opacity: 1; transform: translateY(0);}
main .sec4 .itemBox .swiper-slide-active .item_btn {opacity: 1; transform: translateY(0);}


/* 하단 컨트롤러 */
main .sec4 .controller {
    position: relative;
    width: 100%; max-width: 19em; display: flex;
    justify-content: space-between; align-items: center;
    margin: 0 auto;
}

main .sec4 .controller :is(.swiper-button-prev, .swiper-button-next) {
	position: relative; left: unset; right: unset; bottom: unset; top:unset; margin-top: 0;
	width: max(20px, 4em); height: max(20px, 4em); border-radius: 50%; border: 2px solid #fff;
	color: #fff;
}
main .sec4 .controller .swiper-button-prev:after,
main .sec4 .controller .swiper-button-next:after {font-size: max(10px, 1.5em);}

main .sec4 .controller .page_count {color: #fff; font-size: max(14px, 2.2em); line-height: 1; font-weight: 400;}
main .sec4 .controller .page_count b {font-size: 1.1em;}
/* 하단 컨트롤러 끝*/

@media (min-width: 992px) {
    main .sec4 .containerV1 {transition: 0.2s 0.4s; opacity: 0; transform: translateY(-5%);}
    main .sec4.on .containerV1 {opacity: 1; transform: translateY(0); transition: 0.8s 0.5s;}
}

@media (max-width: 991px) {
    main .sec4 {padding: 14em 0 12em !important;}
    main .sec4 .itemBox .swiper-slide h5 br {display: none;}
    main .sec4 .itemBox .swiper-slide .item_btn {background: var(--main-color);}
}

@media (max-width: 680px) {
    main .sec4 .itemBox {margin: 4em auto 7em;}
    main .sec4 .swiper-pagination {grid-template-columns: repeat(2, 1fr);}
    main .sec4 .swiper-pagination .swiper-pagination-bullet:nth-child(odd) {border-right: 1px solid rgba(255,255,255,0.5);}
    main .sec4 .swiper-pagination .swiper-pagination-bullet {border-bottom: 1px solid rgba(255,255,255,0.5);}
	main .sec4 .swiper-pagination :is(.swiper-pagination-bullet:nth-child(9), .swiper-pagination-bullet:last-child) {border-bottom: none;}
}




/* sec5 */
main .sec5 {position: relative;}
main .sec5 .hexagon_box {position: absolute;}
main .sec5 .hexagon_box img {position: absolute;}
main .sec5 .hexagon_box .img1 {width: 34em;}
main .sec5 .hexagon_box .img2 {width: 30.1em;}

main .sec5 .hex1 {left: 0; top: 19.2em; width: 100%; max-width: 48em; padding-bottom: 40em;}
main .sec5 .hex1 .img1 {top: 0; left: 0; transform: rotate(45deg);}
main .sec5 .hex1 .img2 {bottom: 0; right: 0; transform: rotate(45deg);}

main .sec5 .hex2 {right: 0; bottom: 4.5em; width: 100%; max-width: 56em; padding-bottom: 36em;}
main .sec5 .hex2 .img1 {top: 0; left: 0; transform: rotate(-47deg);}
main .sec5 .hex2 .img2 {bottom: 0; right: 0; transform: rotate(-52deg);}


main .sec5 .itemBox {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4em;
}

main .sec5 .titleBox > h5 {margin-bottom: 0.8em; color: var(--main-color);}
main .sec5 .titleBox > h3 {color: #000;}
main .sec5 .titleBox > .item_btn {margin-top: 4.5em;}

main .sec5 .widget_box {width: 100%; max-width: 900px;}

@media (min-width: 992px) {    
    /* full_animation */
    main .sec5 .hexagon_box > * {transition: 0.2s 0.4s; opacity: 0;}
    main .sec5 .hex1 .img1 {transform: rotate(32deg); left: 3em;}
    main .sec5 .hex1 .img2 {transform: rotate(0deg); right: 3em;}
    main .sec5 .hex2 .img1 {transform: rotate(20deg); top: -3em;}
    main .sec5 .hex2 .img2 {transform: rotate(-90deg); right: 3em;}

    main .sec5.on .hexagon_box > * {transition: 0.8s; opacity: 1;}
    main .sec5.on .hex1 .img1 {transform: rotate(45deg); left: 0; transition-delay: 0.5s;}
    main .sec5.on .hex1 .img2 {transform: rotate(45deg); right: 0; transition-delay: 1.2s;}
    main .sec5.on .hex2 .img1 {transform: rotate(-47deg); top: 0;  transition-delay: 1.5s;}
    main .sec5.on .hex2 .img2 {transform: rotate(-52deg); right: 0; transition-delay: 1.8s;}


    main .sec5 .titleBox > * {transition: 0.2s 0.4s;}
    main .sec5.on .titleBox h5 {transition: 0.8s 0.8s;}
    main .sec5.on .titleBox h3 {transition: 0.8s 1.2s;}
    main .sec5.on .titleBox .item_btn {transition: 0.8s 1.5s;}

    main .sec5 .widget_box {
        opacity: 0; transform: translateX(2%); 
        transition: 0.2s 0.4s;
    }
	main .sec5.on .widget_box {opacity: 1; transform: translateX(0%);  transition: 1s 1.2s;}
    /* full_animation end*/
}

@media (max-width: 1430px) {
    main .sec5 .widget_box {max-width: 700px;}
}

@media (992px <= width <= 1080px) {
    main .sec5.on .titleBox h3 br {display: none;}
}

@media (max-width: 991px) {
    main .sec5 {padding: 12em 0 !important;}
    main .sec5 .itemBox {flex-direction: column; align-items: start;}
    main .sec5 .widget_box {max-width: 100%;}

    /* animation_delay */
    main .sec5 .hexagon_box img {transition: 0.8s;}
    main .sec5 .hex1 .img1 {transition-delay: 0.5s;}
    main .sec5 .hex1 .img2 {transition-delay: 1.2s;}
    main .sec5 .hex2 .img1 {transition-delay: 1.5s;}
    main .sec5 .hex2 .img2 {transition-delay: 1.8s;}

    main .sec5 .hexagon_box[data-scroll="out"] img {opacity: 0;}
    main .sec5 .hex1[data-scroll="out"] .img1 {transform: rotate(32deg); left: 3em;}
    main .sec5 .hex1[data-scroll="out"] .img2 {transform: rotate(0deg); right: 3em;}
    main .sec5 .hex2[data-scroll="out"] .img1 {transform: rotate(20deg); top: -3em;}
    main .sec5 .hex2[data-scroll="out"] .img2 {transform: rotate(-90deg); right: 3em;}

    main .sec5 .titleBox h5 {transition: 0.8s 0.8s;}
    main .sec5 .titleBox h3 {transition: 0.8s 1.2s;}
    main .sec5 .titleBox .item_btn {transition: 0.8s 1.5s;}

    main .sec5 .widget_box {transition: 1s 1.7s;}
	main .sec5 .widget_box[data-scroll="out"] {opacity: 0; transform: translateY(2%);}
    /* animation_delay end*/
}



/* sec6 */
main .sec6 {background: url('../img/sec6_bg.jpg') no-repeat center center / cover; position: relative;}
main .sec6::before {
    content: ''; position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%; background: #7b8185;
}
main .sec6 .containerV1 {position: relative; z-index: 2;}
main .sec6 .titleBox {color: #fff; text-align: center; margin-bottom: 6em;}
main .sec6 .titleBox > * {color: inherit;}
main .sec6 .titleBox > h5 {margin-bottom: 0.7em;}

main .sec6 .itemBox {
    width: 100%; max-width: 1055px; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 2em;
    grid-auto-rows: minmax(28.5em, auto); margin: 0 auto;
}
main .sec6 .itemBox > li  a {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    width: 100%; height: 100%; color: #fff; gap: 1.7em; text-align: center;
    background: url('../img/sec6_icon_bg.png') no-repeat center center / cover;
}

main .sec6 .itemBox > li a h5 {font-size: max(15px, 2.5em); font-weight: bold; color: inherit; line-height: 1.2;}


@media (min-width: 992px) {
    main .sec6::before {transition: 0.2s 0.4s;}
    main .sec6.on::before {opacity: 0; transition: 1.2s 1.5s;}

    main .sec6 .itemBox > li {transition: 0.3s;}
    main .sec6 .itemBox > li:hover {transform: translateY(-5%);}

    /* full_animation */
    main .sec6 .titleBox > * {transition: 0.2s 0.4s;}
    main .sec6.on .titleBox > * {transition: 0.8s;}
    main .sec6.on .titleBox h5 {transition-delay: 0.8s;}
    main .sec6.on .titleBox h3 {transition-delay: 1s;}

	main .sec6 .itemBox > li a {transition: 0.2s 0.4s;}
    main .sec6.on .itemBox > li a {transition: 0.8s;}

    main .sec6 .itemBox > li a {opacity: 0; transform: translateX(-10%);}
    main .sec6.on .itemBox > li a {opacity: 1; transform: translateX(0);}

    main .sec6.on .itemBox > li:first-child a {transition-delay: 1.4s;}
    main .sec6.on .itemBox > li:nth-child(2) a {transition-delay: 1.5s;}
    main .sec6.on .itemBox > li:nth-child(3) a {transition-delay: 1.6s;}
    main .sec6.on .itemBox > li:nth-child(4) a {transition-delay: 1.7s;}
}

@media (992px <= width <= 1560px) {
    main .sec6 .itemBox {grid-auto-rows: minmax(36.3em, auto);}
}

@media (max-width: 991px) {
    main .sec6 {padding: 12em 0 14em !important;}    

    main .sec6 .itemBox {
        max-width: 600px;
        font-size: min(calc(10 / 650 * 100vw), 10px);
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(34em, auto);
    }


    /* animation */
    main .sec6::before {transition: 1.2s 1.4s; opacity: 0;}
    main .sec6[data-scroll="out"]:before {opacity: 1;}

    main .sec6 .titleBox h5 {transition-delay: 0.8s;}
    main .sec6 .titleBox h3 {transition-delay: 1.2s;}

    main .sec6 .itemBox > li a {transition: 0.8s;}
    main .sec6 .itemBox > li a[data-scroll="out"] {opacity: 0; transform: translateY(10%);}
    main .sec6 .itemBox > li:first-child a {transition-delay: 1.4s;}
    main .sec6 .itemBox > li:nth-child(2) a {transition-delay: 1.6s;}
    main .sec6 .itemBox > li:nth-child(3) a {transition-delay: 1.8s;}
    main .sec6 .itemBox > li:nth-child(4) a {transition-delay: 2s;}
}

@media (max-width: 680px) {
    main .section .titleBox h3 br {display: none;}
}

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer {background: #2d2d2d; padding: 8.4em 0 6.3em;}

footer .contents {display:flex; width: 100%; justify-content: space-between;}
footer .contents > li:last-child {display: flex; gap: 5em; flex: 1; justify-content: end;}
footer .contents > li .item {width: 100%; max-width: 270px;}

footer .item1 {width: auto;}
footer .item1 img {width: max(150px, 19em);}
footer .item .item_title {margin-bottom: 1.6em; padding-bottom: 1.6em; border-bottom: 1px solid #4571a7;}
footer .item .item_title h3 {
    font-size: 16px; color: #fff; font-weight: bold;
    letter-spacing: 1px;
}

footer .item {display: flex; flex-direction: column;}
footer .item > div.text {line-height: 1.6; font-size: max(13px, 1.6em); color: #fff; display: flex; flex-wrap: wrap;}
footer .item > div a { color: inherit;}
footer .item > .text > span { position: relative; font-weight: 400;}
footer .item > .text > span:last-child:after { display: none; }
footer .copy {color: #fff; font-size: 1.5em; text-transform: uppercase; margin-top: 10px; line-height: 1.4;}
footer .copy a { color: inherit;}

footer .contents :is(.item2, .item3) > .text > span::after {display: none;}
footer .contents :is(.item2, .item3) > .text {flex-direction: column;}
footer .contents :is(.item2, .item3) > .text > span {margin-right: 0;}

footer .item2 .customer_box {text-align: right;}
footer .item2 .customer_box h3 {font-size: 2em; font-weight: bold; color: #8a4b2d; line-height: 1.2; margin-bottom: 5px; padding-right: 5px;}
footer .item2 .customer_box > span {font-size: 5em; font-weight: bold; color: #ad0316;}

@media (max-width: 1430px) {
    footer .contents > li:last-child {flex: unset;}
}

@media (max-width: 991px) {
    footer {padding: 35px 0;}
    footer .contents {flex-wrap: wrap; gap: 3em 5em;}
    footer .contents > li:last-child {width: 100%;}
    footer .copy {margin-top: 3em;}
}

@media (max-width: 680px) {
	footer .contents > li:last-child {flex-direction: column;}
    footer .contents > li .item {max-width: 100%;}
}

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



/* 서브페이지 패딩 */
.sub_wrap {margin: 20px 0 80px; min-height: 70vh;}

/* 서브페이지 타이틀 */
@media all {
    .titleBox_sub {  
        --sub-font-size-pc:20;
        --sub-font-size-mob:15;
        font-size: min( calc( var(--sub-font-size-mob) / 350 * 100vw ), calc(var(--sub-font-size-pc) * 1px) );     
        color: #fff; position: relative; padding-bottom: calc(500 / 1920 * 100vw);
    }
    .titleBox_sub:before {
        content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;   
        background: url('../img/title_sub01.jpg') no-repeat center center / cover;

        opacity: 0.5;
        animation: sub_ani 1s 0.1s forwards;
    }
    #sub_banner_g01::before {background: url('../img/title_sub01.jpg') no-repeat center center / cover;}
    #sub_banner_g02::before {background: url('../img/title_sub02.jpg') no-repeat center center / cover;}
    #sub_banner_g03::before {background: url('../img/title_sub03.jpg') no-repeat center center / cover;}
    #sub_banner_g04::before {background: url('../img/title_sub04.jpg') no-repeat center center / cover;}
    #sub_banner_g05::before {background: url('../img/title_sub05.jpg') no-repeat center center / cover;}

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

    /* .titleBox_sub:after {
        content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
        background: #ccc;
    } */
    .titleBox_sub > .containerV1 {
        display:flex; justify-content: center; align-items: flex-end;
        position: absolute; left: 50%; top:50%; transform: translate(-50%,0%);
        width: 100%; z-index: 3;
    }
    .titleBox_sub h2 {
        font-size: 2em; font-weight: bold; line-height: 1.4; letter-spacing: 2px;
    }
    .titleBox_sub small {
        font-size: 0.6em; margin-left: 0.6em; font-weight: 500;
        font-family: 'Poppins', sans-serif;
    }
    .titleBox_sub .location {
        font-size: 0.8em; font-weight: 500;
    }
    .titleBox_sub .location .icon {
        margin: 0 0.4em;
    }

    .sub_title_box {
        --font-size-pc: 10;
        --font-size-mob: 10;
        font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) );
        margin: 7em 0; 
		/* border-bottom: 1px solid #dfdfdf; */
    }
    .sub_title_box .title {
        font-size: 3.5em; font-weight: bold; color: #1b1b1b;
        line-height: 1.4; margin-bottom: 0.6em; text-align: center;
    }
    .sub_title_box .title .bar {
        display: block; width: 1.2em; height: 4px;
        background: #333; margin: 0.5em auto 0;
    }
    .sub_title_box .sub_text {
        font-size: 1.8em; color: #666;
    }

}

@media (max-width: 1230px) {
    .titleBox_sub { padding-bottom: 20em; }
}

@media (max-width:768px) {
    /* .titleBox_sub { padding-bottom: calc(600 / 768 * 100vw); } */
    .titleBox_sub .location { display: none; }
}


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn-primary {border: 1px solid var(--main-color); background-color: var(--main-color);}
.btn-primary:hover {border-color: var(--main-color); background-color: var(--main-color);}
.bg-primary {border: 1px solid var(--main-color); background-color: var(--main-color) !important;}
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {background-color: var(--main-color); border-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--basic-border-color);}
.btn-primary.focus, .btn-primary:focus {background-color: var(--main-color); border-color: var(--main-color);}

/* 하단 페이지 네비게이션 */
.paging-nav {font-size: 15px !important; color: #000;}
.paging-nav .page-link {display: flex; border: 1px solid transparent; box-sizing: border-box;  font-weight: bold;}
.page-item.active .page-link {background: #eee !important; color: #000; border-color: #cdcdcd !important;}
.paging-nav .page-item.disabled .page-link {height: 100%; color: inherit; border-color: transparent; height: 100%;}
.page-item:first-child .page-link {
	border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.page-link:hover, .page-link:focus {background: transparent; color: #ff0000; box-shadow: none;}


/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }

/*modal*/
.modal-backdrop {z-index: 2000;}
.modal {z-index: 2001;}
#myModal .modal-body {height: 400px; position: relative;}
#myModal .modal-body > * {position: absolute; left: 0; top: 0; padding: 0 15px 30px; overflow-y: auto; height: 400px; }
#myModal .modal-title { font-size: var(--font-size5,max(15px,2em)); color: #000;}



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