@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1440px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;}
	.link{position: absolute; inset: 0; z-index: 5;}
	#wrap [class*="swiper-button"]::after{display: none;}

    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .w_custom{width: calc(100% - 20px);}
    }



/*───────────────────────────────────────────────────────────

    HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
	#header{position: sticky;top:0;z-index: 100;width: 100%;height: clamp(55px, 8vw, 80px);background: var(--point-white);margin-bottom: 10px; transition: all 0.4s;}
		#header.on{box-shadow: inset 0 -1px 0 var(--border-color01);}
	#header .w_custom{display: flex;align-items: center;justify-content: space-between;height: 100%;gap: 15px;}
	#header .logo{height: 100%;}
	#header .logo a{display:flex;align-items: center;max-width: clamp(160px, 25vw, 234px);height: 100%;padding-block: 17px;}
	#header .gnb{position: absolute;top: 0;left: 50%;translate: -50%;display: flex;justify-content: center;text-align: center;width: calc(100% - 500px);height: 100%;}
	#header .gnb > li{position: relative;height: 100%;font-size: var(--text-20);font-weight: 600;color: var(--black-color01);letter-spacing: 0;}
	#header .gnb > li > a{position: relative;display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(15px, 3.2vw, 60px);}
	#header .gnb .dep02{position: absolute;top: 85%;left: 50%;width: max-content;min-width: 150px;max-width: 300px;translate: -50%;background: var(--point-color01);border-radius: var(--radius-10);padding-block: 18px;opacity: 0;pointer-events: none;transition: all 0.4s;}
	#header .gnb .dep02 > li{position: relative;font-size: 90%; transition: all 0.4s;}
	#header .gnb .dep02 > li > a{display: block;padding: 8px 25px;filter: var(--filter-white);}
	#header .utility{display: flex; align-items: center; gap: clamp(15px, 3vw, 30px);}
	#header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: clamp(30px, 4.5vw, 40px);aspect-ratio: auto 1.8;}
	#header .allCate span{width: 100%; height: 2px; background: var(--black-color01);}

		@media (hover:hover) and (pointer:fine) {
			#header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;}
			#header .gnb .dep02:has(> li:hover) > li:not(:hover){opacity: 0.4;}
		}

	@media (max-width:1023px) {
		#header .gnb{display: none;}
	}


/*───────────────────────────────────────────────────────────

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
        #aside.on{opacity: 1;clip-path: inset(0);}
        body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;display: grid;align-items: start;justify-content: center;grid: auto / repeat(3, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--black-color01);font-size: var(--text-20);text-align: center;}
        
        @media (min-width:861px) {
            #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;}
            #aside.on .gnb > li{opacity:1;translate:0;}
            #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
            #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
            #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
            #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
            #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
        }
    #aside .gnb > li > a{position: relative;display: block;font-size: var(--text-40);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;}
        #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;}
    #aside .gnb .dep02{position: relative;}
    #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;}
    #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;}
    #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
				#aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color: var(--point-color02);}
            }

    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);}
        #aside .gnb > li > a{padding-block: 0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:479px){
        #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);}
    }
    

/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
	
	/* 인트로 */
		.intro{position: fixed; inset: 0; background: var(--black-color00); z-index: 300;}
			.intro:not(.on){opacity: 0; pointer-events: none;}
			body:has(.intro){background: var(--black-color00); overflow: clip;}
			body:has(.intro) :is(#header, #footer){display: none;}
		.intro .line{position: absolute;width: 0;max-width: 1800px;height: 4px;background: var(--point-grad01);top: 60.5%;left: 50%;translate: -50%;z-index: 5;}
		.intro .item-list{display: grid;grid: auto / repeat(2, 1fr);height: 100%;}
		.intro .item-list > li{position: relative; }
		.intro .thumb{position: relative;width: 100%;height: 100%;overflow: hidden;clip-path: inset(0 0 0 100%);}
			.intro .thumb::before{position: absolute;content:'';inset: 0;background: rgb(0 0 0 / 50%);z-index: 1;transition: all 0.4s;}
		.intro .thumb img{width:100%; height:100%; object-fit:cover; transition: all 0.4s;}
		.intro .cont{position: absolute;z-index: 1;display: grid;gap: clamp(35px, 6.2vw, 62px);top: 49dvh;left: 50%;translate:0 28%;opacity: 0;width: 100%;padding-inline: 30px;}
		.intro .desc{color: var(--point-white);text-align: center;display: grid;gap: clamp(15px, 3.2vw, 32px);}
		.intro .desc dt{font-size: var(--text-60);font-weight: 600;line-height: 1.2;letter-spacing: -0.03em;}
		.intro .desc dd{font-size: var(--text-26);line-height: 1.38;color: rgb(255 255 255 / 70%);letter-spacing: -0.03em;opacity: 0;}
		.intro .more-box{opacity: 0; translate: 0 -95px;}

			.intro .item-list > li:nth-child(2) .cont{top: 65dvh;left: -50%;translate:0 -28%;}
			.intro .item-list > li:nth-child(2) .thumb{clip-path: inset(0 100% 0 0);}

			/* over */
			@media (hover:hover) and (pointer:fine) {
				.intro .item-list > li:hover .thumb img{scale: 1.08;}
				.intro .item-list:has(> li:hover) > li:not(:hover) .thumb::before{background: rgb(0 0 0 / 70%);}
			}

		.more-box{display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;}
		.view-more{display: flex;align-items: center;justify-content: space-between;gap: 30px;border: 1px solid rgb(255 255 255 / 40%);border-radius: var(--radius-04);color: var(--point-white);min-width: clamp(180px, 25vw, 240px);min-height: clamp(42px, 5.3vw, 48px);padding: 10px clamp(20px, 2.5vw, 25px) 10px clamp(20px, 3vw, 30px);font-size: var(--text-16);font-weight: 400;color: var(--black-color01);letter-spacing: 0;transition: all 0.4s;}
		.view-more span{position: relative;filter: var(--filter-white); transition: inherit;}
		.view-more .plus{display: block;width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1;}
		.view-more .plus{&::before, &::after{position: absolute;content:'';width: 100%;height: 2px;background: var(--black-color01);top: 50%;left: 0;margin-top: -1px;}}
		.view-more .plus::after{width: 2px;height: 100%;top: 0;left: 50%;margin: 0 0 0 -1px;}


			/* over */
			@media (hover:hover) and (pointer:fine) {
				.view-more:hover{background: var(--point-white); border-color: var(--point-white);}
				.view-more:hover span{filter: none;}
			}

		@media (max-width:640px) {
			.intro .item-list{grid: auto / repeat(1, 1fr);}
			.intro .item-list > li{overflow:hidden;}
			.intro .line{top:50%; height: 3px;}
			.intro .cont{top: 40dvh;translate: -50% 33%;}
			.intro .item-list > li:nth-child(2) .cont{top: 5dvh;left: 50%;translate: -50% -32%;}
		}

	/* 비주얼 */
		.main_visual{position: relative;transition: all 1.2s;margin-bottom: clamp(100px, 21vw, 210px);}
		.main_visual .slick-list{width: calc(100% - 60px); max-width: 1440px; margin-inline: auto; transition: all 1.2s; border-radius: var(--radius-30); overflow: hidden;}
		.main_visual:not(.on) .slick-list{width: 100%; max-width: 100%; border-radius: 0;}
		.main_visual .slick-track{position: relative;overflow: hidden;width: 100% !important;height: clamp(200px, 72vw, 720px);}
		.main_visual .slick-slide{overflow: hidden;width: 100% !important;height: 100% !important;position: absolute !important;left: 0 !important;display: block !important;opacity: 0 !important;transition: all 1.2s;}
		.main_visual .slick-slide.slick-active{opacity: 1 !important;}
		.main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover;}
		.main_visual .slick-dots{display: flex;justify-content: center;flex-wrap: wrap;font-size: 0;gap: clamp(10px, 2vw, 20px);margin-top: clamp(20px, 5vw, 50px);position: absolute;top: 100%;left: 50%;translate: -50%;}
		.main_visual .slick-dots li button{width: clamp(6px, 1.5vw, 10px);aspect-ratio: auto 1;border-radius: 100%;background: var(--gray-bg04);transition: all 0.4s;}
		.main_visual .slick-dots li.slick-active button{background: var(--black-color01);}
		.main_visual .scr-dwn{position: absolute;left: 50%;bottom: clamp(5px, 1vw, 10px);translate: -50%;width: calc(100% - 120px);max-width: 1590px;pointer-events: none;}
		.main_visual .scr-dwn .desc{display: flex;align-items: center;gap: clamp(15px, 2vw, 20px);width: fit-content;margin-left: auto;writing-mode: tb;pointer-events: auto; cursor: pointer;}
		.main_visual .scr-dwn .desc dt{font-size: var(--text-16);font-weight: 600;color: var(--black-color01);font-family: var(--font-type02);opacity: 0.8;letter-spacing: 0.025em;}
		.main_visual .scr-dwn .desc dd{position: relative;width: 2px;height: clamp(80px, 12vw, 120px);background: rgb(17 17 17 / 10%);overflow: hidden;}
		.main_visual .scr-dwn .desc dd::before{position: absolute;content:'';width: 100%;height: 20%;background: var(--black-color01);}

		.main_visual .scr-dwn .desc dd::before{animation: scrDwn 2s linear infinite;}

		.visualSwiper{position: relative; overflow: hidden; transition: all 1.2s; border-radius: var(--radius-30); }
			.main_visual:not(.on) .visualSwiper{max-width: 100%;}
		.visualSwiper .swiper-slide{height: 720px;overflow: hidden;}
			.visualSwiper .swiper-slide:not(.swiper-slide-active){opacity: 0 !important; pointer-events: none !important;}
		.visualSwiper .swiper-slide[data-swiper-slide-index="0"] .thumb{background-image: url('../images/skin/main_visual01.jpg');}
		.visualSwiper .swiper-slide[data-swiper-slide-index="1"] .thumb{background-image: url('../images/skin/main_visual02.jpg');}
		.visualSwiper .swiper-slide[data-swiper-slide-index="2"] .thumb{background-image: url('../images/skin/main_visual03.jpg');}
		.visualSwiper .swiper-slide[data-swiper-slide-index="3"] .thumb{background-image: url('../images/skin/main_visual04.jpg');}

		.main_visual .swiper-pagination{display: flex;justify-content: center;flex-wrap: wrap;font-size: 0;gap: clamp(10px, 2vw, 20px);margin-top: clamp(20px, 5vw, 50px);position: absolute;top: 100%;left: 50%;translate: -50%;}
		.main_visual .swiper-pagination .swiper-pagination-bullet{width: clamp(6px, 1.5vw, 10px); height: auto; aspect-ratio: auto 1;border-radius: 100%;background: var(--gray-bg04);transition: all 0.4s; opacity: 1; margin:0;}
		.main_visual .swiper-pagination .swiper-pagination-bullet-active{background: var(--black-color01);}

		@keyframes scrDwn {0% {top:-20%;} 100% {top:110%;}}

		@media (max-width:1400px) {
			.visualSwiper .swiper-slide{height: auto; aspect-ratio: auto 2;}
		}
		@media (max-width:1023px) {
			.main_visual .scr-dwn{display: none;}
		}
		@media (max-width:860px) {
			.main_visual .slick-list{width: calc(100% - 30px);}
			.visualSwiper .swiper-slide{aspect-ratio: auto 1.13;}
			.visualSwiper .swiper-slide[data-swiper-slide-index="0"] .thumb{background-image: url('../images/skin/main_visual01_m.jpg');}
			.visualSwiper .swiper-slide[data-swiper-slide-index="1"] .thumb{background-image: url('../images/skin/main_visual02_m.jpg');}
			.visualSwiper .swiper-slide[data-swiper-slide-index="2"] .thumb{background-image: url('../images/skin/main_visual03_m.jpg');}
			.visualSwiper .swiper-slide[data-swiper-slide-index="3"] .thumb{background-image: url('../images/skin/main_visual04_m.jpg');}
		}
		@media (max-width:320px) {
			.main_visual .slick-list{width: calc(100% - 20px);}
		}

	/* main-title */
		.main-title{position: relative;display: grid;gap: var(--row-gap25);}
		.main-title.cen{text-align: center;}
		.main-title h2{font-size: var(--text-80);font-weight: 700;color: var(--black-color00);line-height: 1.25;font-family: var(--font-type03);letter-spacing: 0.01em;}
			.main-title h2 + h5{margin-top: 9px;}
		.main-title h3{font-size: var(--text-22);font-weight: 600;}
			.main-title h3 + h4{margin-top: clamp(8px, 1.4vw, 14px);}
		.main-title h3 em{color: var(--point-color01);letter-spacing: 0;}
		.main-title h4{font-size: var(--text-60);font-weight: 700;color: var(--black-color00);line-height: 1.16;letter-spacing: 0;}
		.main-title h5{font-size: var(--text-20);font-weight: 500;color: var(--black-color06);line-height: 1.52;letter-spacing: 0;}
		.main-title p{font-size: var(--text-16); color: var(--black-color06); line-height: 1.5; letter-spacing: 0;}
		.main-title .more-arw{margin-top: clamp(20px, 4.7vw, 47px);}

	/* more-arw */
		.more-arw{position: relative;font-size: var(--text-16);font-weight: 600;color: var(--black-color00);border: 1px solid var(--black-color00);border-radius: var(--radius-10);display: flex;align-items: center;justify-content: center;text-align: center;padding: clamp(10px, 1.9vw, 14px) 20px;width: fit-content;min-width: clamp(130px, 19vw, 180px);gap: clamp(12px, 2vw, 20px);letter-spacing: 0; transition: all 0.4s;}
		.more-arw::after{display: inline-flex;content:'';width: clamp(13px, 2.1vw, 16px);aspect-ratio: auto 1;background: url('../images/skin/more_arw.svg') no-repeat center / 100% auto; transition: inherit;}
		.more-arw span{transition: inherit;}
		.more-arw.wh{border-color: var(--point-white);}
		.more-arw.wh{&::after, & span{filter: var(--filter-white);}}


		.more-plus{position: relative;width: clamp(34px, 4.5vw, 40px);aspect-ratio: auto 1;box-shadow: inset 0 0 0 2px var(--border-color01);border-radius: var(--radius-10);background: var(--point-white); transition: all 0.4s;}
		.more-plus{&::before, &::after{position: absolute;content:'';width: clamp(13px, 2.1vw, 16px);height: 2px;background: var(--point-color06);top: 50%;left: 50%;translate: -50% -50%; transition: inherit;}}
		.more-plus::after{width: 2px;height: clamp(13px, 2.1vw, 16px);}

			/* over */
			@media (hover:hover) and (pointer:fine) {
				.more-arw:hover{background: var(--black-color00);}
				.more-arw:hover {&::after, & span{filter: var(--filter-white);}}
				.more-arw.wh:hover{border-color: var(--black-color00);}
				.more-plus:hover{background: var(--point-color06); box-shadow: inset 0 0 0 2px var(--point-color06);}
				.more-plus:hover{&::before, &::after{filter: var(--filter-white);}}
			}

	/* 서비스 */
		.service-meta{display: flex;align-items: flex-start;padding-bottom: clamp(150px, 30vw, 300px);}
		.service-meta .main-title{width: 100%; padding-right: 50px;}
		.service-meta .controller{position: relative;display: flex;gap: clamp(12px, 2vw, 20px);margin-top: clamp(30px, 7vw, 70px);}
		.service-meta [class*="swiper-button"]{position: relative;inset: auto;margin: 0;width: clamp(28px, 4.5vw, 40px);height: auto;aspect-ratio: auto 1;background: url('../images/skin/swiper_arw.svg') no-repeat center / 100% auto;}
		.service-meta [class*="swiper-button"].swiper-button-next{scale: -1 -1;}
		.servSwiper{position: relative;width:calc(100% - clamp(400px, 25vw, 460px));flex-shrink: 0;clip-path: inset(-200% -200% -200% 0);padding-top: clamp(0px, 5vw, 50px);}
		.servSwiper .swiper-slide{position: relative;width: clamp(240px, 54vw, 540px); height: auto;}
		.servSwiper .desc{display: grid;gap: clamp(15px, 2.1vw, 21px);text-align: center;scale: 0.778;translate: clamp(-25px, -2.5vw, 0px);margin-inline: auto;transition: all 1s;}
		.servSwiper .desc dt{position: relative; border-radius: 100%; background:#006FFF; overflow: hidden;}
		.servSwiper .desc dt::before{position: absolute;content: attr(title);inset: 0;font-size: var(--text-27);font-weight: 500;color: var(--point-white);display: flex;align-items: center;justify-content: center;text-align: center;transition: all 0.6s;}
		.servSwiper .desc dt img{width: 100%;height: 100%;object-fit: cover;opacity: 0;transition: all 0.8s;}
		.servSwiper .desc dd{font-size: var(--text-26);font-weight: 600;color: var(--black-color01);opacity: 0;transition: all 0.6s;letter-spacing: 0;}

		.servSwiper .swiper-slide.on .desc{width: 100%;translate:0 clamp(70px, 17vw, 170px);scale: 1;}
		.servSwiper .swiper-slide.on .desc dt::before{opacity: 0;}
		.servSwiper .swiper-slide.on .desc dt img{opacity: 1;}
		.servSwiper .swiper-slide.on .desc dd{opacity: 1;}
		.servSwiper .swiper-slide.on + .swiper-slide + .swiper-slide .desc{translate: clamp(-20px, -2vw, 0px) clamp(50px, 15.5vw, 155px);scale: 1;}

			/* over */
			@media (hover:hover) and (pointer:fine) {
				.servSwiper .swiper-slide:hover .desc dt img{scale: 1.08;}
			}

		@media (max-width:1023px) {
			.service-meta{flex-wrap: wrap;}
			.service-meta .main-title{width:100%;padding-right: 0;}
			.servSwiper{width: 100%;flex-shrink: unset;}
		}

	/* core-values */
		.core-values{position:relative;overflow: hidden;padding-block: var(--row-gap120) clamp(70px, 20.2vw, 202px);}
		.core-values .front{position: static;display: flex;align-items: center;gap: clamp(100px, 8.4vw, 160px);}
		.core-values .front .main-title{padding-right: 50px;position: absolute;top: 50%;left: 50%;width: calc(100% - 60px);max-width: 1440px;translate: -50% -50%;padding-right: 40%;}
		.core-values .front .thumb{position: absolute;width: calc(100% + 2px);max-width: 1440px;height: 320px;transition: all 1.2s 3s;position: absolute;top: 50%;right: 50%;translate: 50% -50%;}
		.core-values .front .thumb::before{position: absolute;content:'';inset: 0;background: rgb(0 0 0 / 60%);opacity: 0;transition: all 1.2s 3.8s;}
		.core-values .front .thumb img{width: 47.3%;height: 100%;object-fit: cover;margin-left: auto;transition: inherit;max-width: none;max-height: none;}
			.core-values .front.aos-animate .thumb{width: calc(100vw + 2px); max-width:  calc(100vw + 2px);height: 100%;top: 50%;right: 50%;translate: 50% -50%;}
			.core-values .front.aos-animate .thumb::before{opacity: 1;}
			.core-values .front.aos-animate .thumb img{width:100%;}
		.core-values .back .main-title{filter: var(--filter-white); opacity: 0; translate: 0 -100px; transition: all 1.2s 4s;}
			.core-values .back.aos-animate .main-title{opacity: 1; translate: 0;}
		.core-values .info-list{display: grid;grid: auto / repeat(4, 1fr);margin-top: clamp(40px, 14.7vw, 147px);opacity: 0;translate: 0 100px;gap: var(--row-gap60) 0;transition: all 1.2s 4s;}
			.core-values .back.aos-animate .info-list{opacity: 1; translate: 0;}
		.core-values .info-list > li{display: flex;flex-direction: column;gap: clamp(20px, 3vw, 30px);padding-inline: 15px;}
		.core-values .info-list .icon{display: flex;justify-content: center;height: clamp(55px, 10.5vw, 100px);}
		.core-values .info-list .desc{display: grid;gap: clamp(15px, 2vw, 20px);text-align: center;filter: var(--filter-white);}
		.core-values .info-list .desc dt{font-size: var(--text-26);font-weight: 600;line-height: 1.3;}
		.core-values .info-list .desc dd{font-size: var(--text-16);opacity: 0.8;line-height: 1.625;}

		@media (max-width:1023px) {
			.core-values .front .main-title{top:var(--row-gap100);translate: -50%;padding-right: 0;}
			.core-values .front .thumb{right: 50%;top: clamp(280px, 46vw, 450px);translate: 50%;}
			.core-values .front .thumb img{width:100%;}
		}
		@media (max-width:640px) {
			.core-values .info-list{grid: auto / repeat(2, 1fr);}
		}
		@media (max-width:479px) {
			.core-values .info-list{grid: auto / repeat(1, 1fr);}
		}

	/* City Story */
		.main-story{padding-block: clamp(70px, 13.3vw, 133px);}
		.story-wrap{max-width: 1550px;padding-inline: clamp(35px, 5.5vw, 55px);margin-top: clamp(30px, 5.4vw, 54px);}
		.storySwiper{overflow: hidden;}
		.storySwiper .swiper-slide{position: relative;}
		.storySwiper .desc{display: grid;gap: clamp(15px, 2.5vw, 25px);}
		.storySwiper .desc dt{position: relative;border-radius: var(--radius-10);overflow: hidden;aspect-ratio: auto 1.58;}
		.storySwiper .desc dt img{width:100%; height:100%; object-fit:cover; transition: all 0.4s;}
		.storySwiper .desc dd{font-size: var(--text-18);font-weight: 500;color: var(--black-color00);line-height: 1.44;padding-inline: 10px;letter-spacing: 0;white-space: normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
		.story-wrap [class*="swiper-button"]{position: absolute;top: 47%;left: 0;width: clamp(45px, 5.5vw, 50px);aspect-ratio: auto 1;height: auto;margin: 0;translate: 0 -50%;}
		.story-wrap [class*="swiper-button"]::before{position: absolute;content:'';width: 50%;aspect-ratio: auto 1;border: 2px solid rgb(41 45 50 / 40%);clip-path: var(--clip-poly02);rotate: 135deg;top: 50%;left: 38%;translate: -50% -50%;border-radius: 4px;}
		.story-wrap [class*="swiper-button"].swiper-button-next{left: auto;right: 0;scale: -1 -1;}

		/* over */
			@media (hover:hover) and (pointer:fine) {
				.storySwiper .swiper-slide:hover .desc dt img{scale: 1.08;}
			}

	/* webtoon_contest */
		.webtoon_contest{background: url('../images/skin/webtoon_contest.jpg') no-repeat center / cover;padding-block: clamp(70px, 15vw, 150px) clamp(70px, 12.6vw, 126px);}
		.webtoon_contest.building{background-image: url('../images/skin/building_contest.jpg');}
		.webtoon_contest .main-title{gap: 15px;}
		.webtoon_contest .main-title :is(h4, p){filter: var(--filter-white);}

	/* main-board */
		.main-board{padding-block: clamp(70px, 11.5vw, 115px) clamp(70px, 14vw, 140px);}
		.board-meta{display: grid;grid: auto / repeat(2, 1fr);gap: var(--row-gap80) clamp(15px, 4.2vw, 80px);margin-top: clamp(50px, 9.3vw, 93px);}
		.board-meta .title h5{font-size: var(--text-32);font-weight: 600;color: var(--black-color00);}
		.board-meta .notice-list{margin-top: clamp(20px, 3.7vw, 37px);border-top: 1px solid var(--border-color01);}
		.notice-list > li{position: relative;border-bottom: 1px solid var(--border-color01);padding: clamp(18px, 3vw, 30px) clamp(15px, 2vw, 20px) 15px; transition: all 0.4s;}
		.notice-list .desc{position: relative;display: flex;flex-direction: column;gap: clamp(12px, 2.1vw, 21px);}
		.notice-list .desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color00);letter-spacing: 0;white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
		.notice-list .desc dd{font-size: var(--text-15);color: var(--black-color06);}

			/* over */
			@media (hover:hover) and (pointer:fine) {
				.notice-list > li:hover{background: var(--point-color07);}
			}

		@media (max-width:1023px) {
			.board-meta{grid: auto / repeat(1, 1fr);}
		}

/*───────────────────────────────────────────────────────────

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	#footer{position: relative;background: var(--point-color08);font-size: var(--text-16);font-weight: 300;color: var(--black-color10);padding-block: clamp(45px, 5.7vw, 57px) clamp(30px, 3.8vw, 38px);}
	#footer .w_custom{display: grid;gap: clamp(20px, 3.4vw, 34px);}
	#footer .top-sec{display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 30px;border-bottom: 1px solid rgb(255 255 255 / 10%);padding-bottom: 30px;}
	#footer .logo{max-width: clamp(150px, 23vw, 220px);}
	#footer .link-list{display: flex;flex-wrap: wrap;gap: 12px clamp(20px, 4vw, 40px);}
	#footer .link-list > li{color: rgb(255 255 255 / 70%);}
	#footer .link-list strong{color: var(--point-white); font-weight: inherit;}
	#footer .addr-list{display: grid;gap: clamp(12px, 1.6vw, 14px);}
	#footer .addr-list > li{display: flex;flex-wrap: wrap;gap: clamp(12px, 1.6vw, 14px) 18px;}
	#footer .addr-list .desc{display: flex;align-items: baseline;gap: 10px;}
	#footer .addr-list .desc dt{font-weight: 500;color: var(--point-white);flex-shrink: 0;}
	#footer .addr-list .desc dd{letter-spacing: 0;}
	#footer .copy{display: flex;flex-wrap: wrap;gap: 5px clamp(15px, 2vw, 20px);font-size: var(--text-14);color: rgb(255 255 255 / 50%);font-family: var(--font-type04);margin-top: clamp(20px, 3.7vw, 37px);letter-spacing: -0.02em;}

	.quick-list{position: fixed;left: 50%;bottom: 30px;translate: -50%;z-index: 150;max-width: 1860px;display: grid;justify-items: end;gap: clamp(8px, 1.5vw, 10px); opacity: 0; pointer-events: none; transition: all 0.4s;}
	body:has(#header.on:not(.end)) .quick-list{opacity: 1;}
	body:has(#header.on:not(.end)) .quick-list > li{pointer-events: auto;}
	.quick-list > li{position: relative;}
	.quick-list > li > a{display: flex;align-items: center;justify-content: center;width: clamp(55px, 7.3vw, 68px);min-height: clamp(55px, 7.3vw, 68px);text-align: center;border-radius: var(--radius-15);background: var(--point-color11);font-size: var(--text-14);font-weight: 500;color: var(--point-white);padding: 10px 5px;}
		.quick-list > li:nth-child(1) > a{background: var(--point-color09);}
		.quick-list > li:nth-child(2) > a{background: var(--point-color01);}
		.quick-list > li:nth-child(3) > a{background: var(--point-color10);}