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

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

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	body{background: var(--point-color01);}
	#wrap {position:relative;width:100%;box-sizing: border-box;overflow: clip;padding-left: clamp(40px, 12vw, 120px);}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1120px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-bottom:0; box-sizing: border-box;}
	.link{position: absolute; inset: 0; z-index: 5;}

    @media (max-width:1120px){
        br.for_pc{display: none;}
    }
    @media (max-width:1023px){
		#wrap{padding-left:0;}
        /* #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: fixed;top:0;left:0;width: clamp(40px, 12vw, 120px);height: 100%;background: var(--point-color01);z-index: 100;display: flex;flex-direction: column;align-items: center;justify-content: center;}
		#header:not(.active){translate: -100%;}
	#header .allCate{display: flex;justify-content: space-between;width: clamp(8px, 2vw, 15px);aspect-ratio: auto 0.375;}
	#header .allCate{&::before, &::after{display: block;content:'';width: 1px;height: 100%;background: var(--point-white);transition: all 0.6s 1.4s;clip-path: inset(-5px);}}
	body:has(#aside.on) #header .allCate{&::before, &::after{transition: all 0.6s;}}
	body:has(#aside.on) #header .allCate::before{clip-path: inset(-5px -5px 100% -5px);}
	body:has(#aside.on) #header .allCate::after{clip-path: inset(100% -5px -5px -5px);}

	@media (max-width:1023px) {
		#header{position: sticky;width: 100%;height: clamp(45px, 8vw, 80px);}
			#header:not(.active){translate:0 -100%;}
			#header.on{box-shadow: 3px 3px 5px rgb(0 0 0 / 5%);}
		#header .allCate{width: 30px;aspect-ratio: auto 2;flex-direction: column;}
		#header .allCate{&::before, &::after{width:100%; height: 1px;}}
		body:has(#aside.on) #header .allCate::before{clip-path: inset(-5px 100% -5px -5px);}
		body:has(#aside.on) #header .allCate::after{clip-path: inset(-5px -5px -5px 100%);}
	}


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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
	#aside{position: fixed;top:0;left:0;background: var(--point-color01);z-index: 150;width:0;height: 100%;display: flex;flex-direction: column;justify-content: center;overflow: hidden;overflow-y: auto;transition: all 0.8s 0.6s;opacity:0;translate: -100%;}
    #aside::-webkit-scrollbar{background:var(--point-color01);width:4px;}
        #aside::-webkit-scrollbar-thumb{background:var(--point-white);}
		#aside.on{translate: 0; transition:all 0.5s 0.4s;width: min(572px, 100%);opacity:1;}
		body:has(#aside.on){overflow: clip; touch-action: none;}
	#aside .w_custom{position: static;padding: 70px clamp(10px, 5vw, 50px);opacity: 0;transition: all 0.4s;}
		#aside.on .w_custom{opacity: 1;transition: all 0.5s;}
	#aside .logo{display:inline-flex;height: clamp(30px, 6vw, 50px);filter: var(--filter-white);margin-bottom: var(--row-gap25);position: relative;z-index:3;}
	#aside .gnb{display: grid;gap: clamp(20px, 3vw, 30px);padding-block: clamp(25px, 4.5vw, 45px);}
	#aside .gnb > li{font-size: var(--text-26);color: var(--point-white);font-family: var(--font-type02);transition: all 0.4s;}
	#aside .gnb > li > a{display: flex;align-items: center;flex-wrap: wrap;gap: 10px; transition: inherit;position: relative;}
	#aside .gnb > li > a img{max-width: clamp(24px, 5vw, 42px);}
    #aside .gnb > li.group_tit > a:after{width:clamp(8px, 1vw, 12px);aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:135deg;position: absolute;top:50%;right:0;translate:0 -50%;}
    #aside .gnb > li.group_tit.on > a:after{rotate:-45deg;}
	#aside .gnb .dep02{display: none;margin-top:var(--row-gap20);}
    #aside .gnb .dep02 li a{font-size: var(--text-20);}
	#aside .gnb.use{padding-block: clamp(15px, 3.5vw, 30px);}
	#aside .gnb.use > li{font-size: var(--text-20);}
	#aside .utility{position: absolute;top: 0;left: 0;padding: clamp(25px, 3vw, 30px);width: 100%;display: flex;align-items: center;justify-content: flex-end;gap: clamp(20px, 3vw, 30px);z-index: 3;}
	#aside .utility a{font-size: var(--text-16); color: var(--point-white);}
	#aside .close-btn{position: relative;width: clamp(24px, 3.8vw, 38px);aspect-ratio: auto 1;}
	#aside .close-btn{&::before, &::after{position: absolute;content:'';width: 100%;height: 1px;background: var(--black-color05);top: 50%;left: 50%;translate: -50% -50%;rotate: 45deg;}}
	#aside .close-btn::after{rotate:-45deg;}

		/* over */
		@media (hover:hover) and (pointer:fine) {
			#aside .gnb > li:hover > a{opacity: 0.4;}
		}

	@media (max-width:1023px) {
		#aside{justify-content: flex-start;}
		#aside:not(.on){translate:0 -100%;width: min(572px, 100%);}
		#aside .w_custom{padding-top: 30px;display: grid;gap: var(--row-gap40);}
		#aside .utility{position: relative;justify-content:flex-start;padding: 0;}
	}
    @media (max-width:640px) {
        #aside .gnb{gap:30px;}
        #aside .gnb > li > a{font-size:19px;}
        #aside .gnb .dep02{margin-top:30px;padding-left:15px;}
        #aside .gnb .dep02 li + li{margin-top:20px;}
        #aside .gnb .dep02 li a{font-size:14px;}
    }
/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
	#fullpage section{position: relative; overflow: hidden;}
	#fullpage section:has(#footer){height: auto !important;}
	#fullpage section:has(#footer) .fp-tableCell{height: auto !important;}
	@media (min-width:1024px) {
		#fullpage :is(section.active, section:has(~ section.active)) .aos-init{opacity: 1; transform: translate3d(0,0,0);}
	}
	/* 비주얼 */
		.main_visual{position: relative; overflow: hidden;}
		.main_visual .logo{position: absolute;top: var(--row-gap80);right: 100px;filter: var(--filter-white);max-width: clamp(100px, 28vw, 280px);z-index: 3;}
		.main_visual .slick-slide{position: relative;overflow: hidden;height: 100dvh;padding: var(--row-gap80) clamp(20px, 3.8vw, 38px);}
		.main_visual .thumb{position: absolute; inset: 0; background: no-repeat center / cover; scale: 1.08; transition: all 6s 0.2s;}
		.main_visual .active .thumb{scale: 1; }
		.main_visual .txt_box{position: relative;color: var(--point-white);display: grid;gap: var(--row-gap20);width: 50%;}
		.main_visual .txt_box h2{position: relative;font-size: var(--text-26);font-weight: 300;line-height: 1.4;font-family: var(--font-type02);letter-spacing: -0.03em;}
		.main_visual .txt_box h3{font-size: var(--text-14);line-height: 2;}
		.main_visual .txtAni{opacity: 0; translate:0 70px; transition: all 1.2s 0.2s;}
		.main_visual .txtAni:nth-child(2){transition-delay: 0.4s;}
		.main_visual .active .txtAni{opacity: 1; translate: 0;}
		.main_visual .scrDwn{position: absolute;right: clamp(30px, 2.1vw, 40px);bottom: clamp(30px, 2.1vw, 40px);z-index: 5;display: flex;flex-direction: column;align-items: center;text-align: center;cursor: pointer;}
		.main_visual .scrDwn dt{font-size: var(--text-20);font-weight: 300;color: var(--point-white);line-height: 1.4;font-family: var(--font-type02);}
		.main_visual .scrDwn dd{width: clamp(100px, 16vw, 160px);}

		
		.main_visual .scrDwn dd{animation: scrDwn 1s linear infinite alternate;}

		@keyframes scrDwn {0% {translate: 0 8px;}100% {translate: 0;}}


		@media (max-width:1023px) {
			.main_visual .logo{inset: auto;top:30px;left: clamp(20px, 3.8vw, 38px);}
			.main_visual .slick-slide{height: clamp(450px, 96.4vw, 964px);padding-top: clamp(90px, 16vw, 160px);}
			.main_visual .txt_box{width: 100%;}
		}
		@media (max-width:860px) {
			.main_visual .scrDwn{right: 15px; bottom: 15px;}
		}

	/* 컨텐츠 */
		#fullpage section.mid{min-height: 100dvh;padding-block: clamp(70px, 8vw, 80px);display: grid;grid: auto / minmax(0, 1fr);align-items: center;}
        #fullpage section.mid .fp-tableCell{height:100% !important}
		#fullpage .w_custom{max-width: 1520px;}

		@media (max-width:1023px) {
			#fullpage section.mid{min-height: auto;}
			#fullpage section.mid{align-items:start;}
		}

	/* half-divide */
		.half-divide > li{display: flex;min-height: 100dvh;}
			.half-divide > li.reverse{flex-direction: row-reverse;}
		.half-divide .thumb{position: relative; flex-shrink: 0;width: 46%;}
		.half-divide .thumb span{display: block;width: calc(100% + 140px);height: 100%;margin-left: -140px;}
		.half-divide .thumb img{width: 100%; height: 100%; object-fit: cover;}
		.half-divide .cont{width: 100%;display: flex;flex-direction: column;justify-content: flex-end;padding: var(--row-gap120) clamp(60px, 5.25vw, 100px);gap: var(--row-gap40);}
		.half-divide .copy-list{width: max-content;display: flex;flex-direction: column;align-items: flex-end;gap: clamp(0px, 1vw, 10px);position: absolute;top: 120px;right: 0;letter-spacing: -0.17em;text-align: right;}
		.half-divide .copy-list > li{font-size: clamp(42px, 5.1vw, 96px);line-height: 1.4;filter: var(--filter-white);font-family: var(--font-type02);}
		.half-divide .copy-list > li:nth-child(1){padding-right: clamp(50px, 16vw, 287px);}



			@media(min-width:1024px) {
				.half-divide .cont.center{justify-content: center;}
				.half-divide > li.reverse  .thumb{width: 54%;}
				.half-divide > li.reverse  .thumb span{width: calc(100% + 140px);margin-left: 0;}
				
				.half-divide.type02 > li{flex-direction: row-reverse;}
				.half-divide.type02 .thumb{width: 39.5%;}
				.half-divide.type02 .thumb span{margin-left: 0;}
				.half-divide.type02 .cont{padding-left: 0;}
			}
		@media (max-width:1400px){
			.half-divide .main-title h3.collabo{flex-direction: column;}
		}
		@media (max-width:1023px) {
			.half-divide > li{min-height: auto; flex-wrap: wrap;}
			.half-divide .thumb{width: 100%; flex-shrink: unset;}
			.half-divide .thumb span{width: calc(100% + 60px); margin-left: -30px;}
			.half-divide .cont{padding-inline: clamp(5px, 3.8vw, 38px);}
			.half-divide .copy-list{position: relative;inset: auto;width: auto;}
			.half-divide .main-title h3.collabo{flex-direction: row;}
		}
		@media (max-width:860px) {
			.half-divide .thumb span{width: calc(100% + 30px); margin-left: -15px;}
		}
		@media (max-width:640px) {
			.half-divide .copy-list{width: 100%;text-align: left;align-items: flex-start;}
			.half-divide .copy-list > li:nth-child(1){padding-right: 0;}
		}
        @media (max-width:479px) {
            .half-divide .cont{padding-block:90px;}
        }

	/* 타이틀 */
		.main-title{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);text-wrap: balance;}
		.main-title.hd{margin-bottom: var(--row-gap40);}
		.main-title.wh{filter: var(--filter-white);}
		.main-title.cen{text-align: center;}
		.main-title h3{font-size: var(--text-40);font-weight: 400;line-height: 1.4;color: var(--point-color01);font-family: var(--font-type02);letter-spacing: -0.03em;}
			.main-title h3.collabo{display: flex; align-items: center; flex-wrap: wrap; gap:10px;}
			.main-title h3.collabo .x{width: clamp(30px, 6.5vw, 61px);}
			.main-title h3.under-line{text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 11px;}
		.main-title h4{font-size: var(--text-30);font-weight: 400;line-height: 1.8;color: var(--point-color01);}
		.main-title p{font-size: var(--text-18);line-height: 2;color: var(--black-color05);}

		@media (max-width:640px) {
			.main-title p{line-height: 1.7;}
		}

		
	/* 버튼 */
		.btn-wrap{display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;margin-top: var(--row-gap40);}
			.btn-wrap.left{justify-content: flex-start;}
			.btn-wrap.right{justify-content: flex-end;}
		.com-btn{position: relative;display: flex;align-items: center;justify-content: center;gap: clamp(8px, 1.2vw, 12px);text-align: center;min-width: clamp(200px, 40vw, 392px);min-height: clamp(52px, 8.5vw, 75px);padding: 13px 20px;width: fit-content;box-shadow: inset 0 0 0 1px var(--black-color12);z-index: 1;font-size: var(--text-20);color: var(--black-color13);line-height: 1.6;font-family: var(--font-type02);transition: all 0.6s;overflow: hidden;}
			.com-btn::before{position: absolute;content:'';background: var(--point-color01);inset: 0;z-index: -1;clip-path: inset(0 100% 0 0);transition: inherit;}
			.com-btn::after{display: inline-flex;content:'';width: clamp(8px, 1.1vw, 9px);aspect-ratio: auto 1;border: 1px solid var(--black-color13);clip-path: var(--clip-poly02);rotate: -45deg;transition: inherit;}
			.com-btn.wh{box-shadow: inset 0 0 0 1px var(--point-white);}
			.com-btn.wh{&::before, &::after, & span{filter: var(--filter-white);}}
			.com-btn.wh{&::after, & span, & img{mix-blend-mode: exclusion;}}
		.btn-wrap span{position: relative;transition: inherit;}
		.com-btn img{margin-right: clamp(4px, 0.8vw, 8px);max-width: clamp(24px, 5vw, 42px);}

			/* over */
			@media (hover:hover) and (pointer:fine) {
				.com-btn:hover::before{clip-path: inset(-10px);}
			}

	/* prod-meta */
		.prod-meta{display: flex;gap: clamp(15px, 1.4vw, 26px);width: min(1120px, 100%);margin-inline: auto;}
		.prod-meta > li{position: relative;height: 590px;display: flex;align-items: center;justify-content: center;transition: all 0.6s;width: min(200px, 100%);}
		.prod-meta > li:nth-child(n+5){display: none;}
		.prod-meta .thumb{position: relative;width: 100%;height: 46%;overflow: hidden;transition: all 0.6s;}
		.prod-meta > li.on{width: min(442px, 40%);flex-shrink: 0;}
		.prod-meta > li.on .thumb{height: 100%;}
		.prod-meta .thumb img{width: 100%; height: 100%; object-fit: cover;}

        @media (min-width:1023px) and (max-height:900px) {
            .prod-meta > li{height:64vh;}
        }
        @media (min-width:1023px) and (max-height:850px) {
            .prod-meta > li{height:60vh;}
        }

		@media (max-width:1023px) {
			.prod-meta{display: grid; grid: auto / repeat(4, 1fr);}
			.prod-meta > li{height: auto;min-width: auto !important;width: 100% !important;flex-shrink: unset !important;}
			.prod-meta .thumb{height: 100%;}
		}
		@media (max-width:860px) {
			.prod-meta{grid: auto / repeat(2, 1fr);}
		}

	/* insta-list */
		.insta-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(10px, 2.1vw, 40px);width:min(1040px, 100%);margin-inline: auto;}
		.insta-list > li{position: relative; aspect-ratio: auto 1; overflow: hidden;}
		.insta-list a{display: block; width: 100%; height: 100%;}
		.insta-list img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}

			/* over */
			@media (hover:hover) and (pointer:fine) {
				.insta-list > li:hover img{scale: 1.08;}
			}

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	#footer{position: relative;padding-block: clamp(40px, 8vw, 80px) var(--row-gap120);font-size: var(--text-16);font-weight: 400;color: var(--point-white);text-align: center;}
	#footer .w_custom{display: grid; gap: var(--row-gap50);}
	#footer .logo{display: flex;align-items: center;justify-content: center;filter: var(--filter-white);max-height: clamp(50px, 8.5vw, 80px);}
	#footer .link-list{display: flex;justify-content: center;flex-wrap: wrap;gap: 12px clamp(25px, 3vw, 30px);}
	#footer .link-list > li{font-size: var(--text-20);letter-spacing: -0.03em;}
	#footer .link-list strong{font-weight:500;}
	#footer .sns-list{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(10px, 2vw, 20px);}
	#footer .sns-list a{display: flex;align-items: center;justify-content: center;width: clamp(32px, 4.5vw, 40px);height: clamp(32px, 4.5vw, 40px);border: 1px solid rgb(255 255 255 / 50%);border-radius: 100%;padding: 8px;}
	#footer .addr-list{display: flex;flex-direction: column;gap: clamp(10px, 1.6vw, 16px);}
	#footer .addr-list > li{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(10px, 1.6vw, 16px) clamp(25px, 4vw, 40px);}
	#footer .addr-list .desc{display: flex;align-items: baseline;justify-content: center;gap: 10px;line-height: 1.2;flex-wrap: wrap;}
	#footer .addr-list .desc dt{font-weight: 500;flex-shrink: 0;}
	#footer .addr-list .desc dd{font-weight: 200;opacity: 0.8;}
	#footer .copy{font-family: var(--font-type02);letter-spacing: 0;}

    .ft_quick{position: fixed;bottom:var(--row-gap30);right:clamp(15px, 3vw, 36px);z-index:10;}
    .ft_quick ul{display: flex;flex-direction: column;gap:var(--row-gap20);}
    .ft_quick ul li{width:clamp(50px, 6vw, 60px);aspect-ratio:auto 1;border-radius:100%;box-shadow: 0 0 20px 0 rgba(27, 33, 132, 0.15);overflow:hidden;}
    .ft_quick ul li a{display: flex;width:100%;height:100%;align-items: center;justify-content: center;background:var(--point-white);}
    .ft_quick ul li a.btn_top{background:var(--black-color02);}