/** FONT **/
@font-face {font-family: PT; src: url(../fonts/PretendardVariable.woff2) format('woff2'); font-weight: 45 920; font-style: normal; font-display: swap;}
@font-face {font-family: NM; src: url(../fonts/NanumMyeongjo-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: NM; src: url(../fonts/NanumMyeongjo-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: NM; src: url(../fonts/NanumMyeongjo-ExtraBold.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap;}
@font-face {font-family: KPD; src: url(../fonts/KoPubWorld\ Dotum\ Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap;}
@font-face {font-family: KPD; src: url(../fonts/KoPubWorld\ Dotum\ Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: MC; src: url(../fonts/Marcellus-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
/* 시안 폰트 (Athena / Quiche Sans) : 폰트 파일 전달 시 assets/fonts 에 추가. 없으면 Jost / Marcellus 로 대체 */
@font-face {font-family: AT; src: local('Athena Light'), local('Athena-Light'), url(../fonts/Athena-Light.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap;}
@font-face {font-family: AT; src: local('Athena Regular'), local('Athena-Regular'), url(../fonts/Athena-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: AT; src: local('Athena SemiBold'), local('Athena-SemiBold'), url(../fonts/Athena-SemiBold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap;}
@font-face {font-family: QS; src: local('Quiche Sans Bold'), local('QuicheSans-Bold'), url(../fonts/QuicheSans-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap;}

/** RESET **/
*, *::before, *::after{margin : 0;padding : 0; box-sizing: border-box;}
html{-webkit-text-size-adjust:100%; font-size: 62.5%; scroll-behavior : smooth;}
body{line-height:1; font-family: PT, sans-serif; color:#000; font-size: 1.6rem; word-break: keep-all;}
ul, ol, li{list-style: none;}
a{text-decoration: none; color : inherit}
img, picture, svg, video, canvas{display: block;max-width: 100%;}
button, input, textarea, select{font:inherit; color:inherit; border:none; background:none; outline:none;}
button{cursor:pointer;}
table{border-collapse:collapse; border-spacing:0;}
/** RESET END **/

.moView{display : none !important;}
body.fixed{overflow: hidden;}

@keyframes rotate-text {
	100%{transform: rotate(360deg);}
}

/** HEADER **/
.header{position : fixed; left : 0; top : 0; width : 100%; height : 10rem; padding : 0 8.8rem; z-index: 10000; transform: translateY(-100%); transition : transform 1s, background .5s;
	&.show{transform: translateY(0);}
	&.hide{transform: translateY(-100%);}
	&.sub{position : absolute;}

	/* 우측 관심고객등록/전화 영역은 흰 박스라 white 모드에서도 색 유지 */
	&.white{
		.main-logo-mark{background-image: url(../images/common/logo-prugio-white.svg);}
		.main-logo-txt,
		.header-nav > ul > li > a{color : #fff;}
		.header-nav > ul > li:hover > a{color : #d9c3ac;}
		.header-nav > ul > li > a::before{background : #d9c3ac;}
	}
}
.header-inner{display: flex; justify-content: space-between; align-items: center; width : 100%; height : 100%; position : relative;}

.main-logo > a{display: flex; align-items: center; gap : 1.2rem;}
.main-logo-mark{display: block; width : 15rem; height : 2.4rem; background: url(../images/common/logo-prugio.svg) no-repeat center / contain; transition : background .5s;}
.main-logo-txt{font-size: 2rem; font-weight: 600; letter-spacing: -0.06em; color : #000; white-space: nowrap; transition : color .5s;}

.header-nav{position : absolute; left : 50%; top : 0; height : 100%; transform: translateX(-50%); white-space: nowrap;}
.header-nav > ul{display: flex; height : 100%;}
.header-nav > ul > li > a{display: flex; align-items: center; justify-content: center; height : 100%; padding : 0 2.1rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; color : #1a1a1a; position : relative; transition : color .5s;}
.header-nav > ul > li > a::before{clip-path : inset(0 50%);position : absolute;content : '';transform: translateY(-16px) scale(1) rotate(0deg); width : 3rem; height : 1px; background : #8d817b;opacity : 0; transition : opacity .5s, transform .5s, background .5s, width .5s, height .5s, clip-path .5s;}
.header-nav > ul > li:hover > a{color : #8d817b; font-weight: 700;}
.header-nav > ul > li:hover > a::before{clip-path : inset(0); width : 0.5rem;height : 0.5rem; transform: translateY(-1.6rem) scale(1) rotate(45deg); opacity : 1; transition : opacity .5s, transform .5s .5s, background .5s, width .3s .5s, height .3s .5s, clip-path .5s;}

.header-right{display: flex; align-items: center; height : 5.5rem; padding : 0 1.6rem 0 1.4rem; background: #fff; border-radius: 2.8rem; box-shadow: 0 1rem 0.5rem rgba(0,0,0,0.16);}
.customer{display: flex; align-items: center; justify-content: center; gap : 0.4rem; width : 13rem; height : 3.1rem; border-radius: 1.6rem; background: #8d817b; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; color : #fff; transition : background .4s;
	&:hover{background: #6f645f;}
}
.customer-icon{width : 1.8rem; height : 1.7rem; background: url(../images/common/icon-customer-white.svg) no-repeat center / contain;}
.header-tel{display: flex; align-items: center; gap : 0.6rem; position : relative; margin-left: 1.5rem; padding-left: 1.6rem; font-family: futura-pt, Jost, sans-serif; font-size: 2.2rem; font-weight: 500; color : #000;
	&::before{position : absolute; content : ''; left : 0; top : 50%; width : 1px; height : 1.5rem; background: #b9b9b9; transform: translateY(-50%);}
}
.header-tel-icon{width : 3.1rem; height : 3.1rem; border-radius: 50%; background: url(../images/common/icon-tel-brown.svg) no-repeat center / 1.6rem #efefef;}

.hamburger, .hamburger-nav, .hamburger-dim{display : none;}


/** VIEW MORE **/
.view-more{display: block; width : 16.5rem; height : 16.5rem;
	img{width : 100%; height : 100%; animation : rotate-text 16s linear infinite; transition : scale .5s cubic-bezier(.4,0,.3,1);}
	.view-more-arrow{position : absolute; left : 0; top : 0; animation : none; transition : transform .5s;}
	&:hover img:not(.view-more-arrow){scale: 0.88;}
	&:hover .view-more-arrow{transform: translateX(1rem);}
}

/** FOOTER **/
.footer{background: #151515; color : #fff; padding : 8.5rem 10.8rem 5.8rem;}
.footer-inner{display: flex; justify-content: space-between; gap : 4rem;}
.footer-logo{display: flex; align-items: center; gap : 1.2rem;
	span{font-size: 2rem; font-weight: 600; letter-spacing: -0.06em;}
}
.footer-p{margin-top: 3.2rem; font-size: 1.4rem; color : #aaa; letter-spacing: -0.04em;}
.footer-info{margin-top: 2.4rem; font-size: 1.4rem; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.06em; color : #656565;
	li{position : relative; padding-left: 1.4rem;}
	li::before{position : absolute; content : '※'; left : 0; font-size: 1.1rem;}
}
.footer-copy{margin-top: 3.8rem; font-size: 1.4rem; font-weight: 500; color : #f0f0f0;}
.footer-right{display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; margin-top: -2.8rem;}
.footer-top{display: block; width : 4.1rem; height : 4.1rem; border : 1px solid #707070; border-radius: 50%; position : relative; transition : border-color .4s;
	&::before{position : absolute; content : ''; left : 50%; top : 1.5rem; width : 1px; height : 5.9rem; background: #ddd; transition : transform .4s;}
	&::after{position : absolute; content : ''; left : 50%; top : 1.5rem; width : 0.7rem; height : 0.7rem; border-top : 1px solid #ddd; border-left : 1px solid #ddd; transform: translate(-50%, 0) rotate(45deg); transform-origin: center; margin-left: 0.05rem; transition : transform .4s;}
	&:hover{border-color : #fff;}
	&:hover::before{transform: translateY(-0.6rem);}
	&:hover::after{transform: translate(-50%, -0.6rem) rotate(45deg);}
}
.footer-cs{display: flex; align-items: center; gap : 3rem; margin-top: auto;}
.footer-tel{font-family: Jost, sans-serif; font-size: 3.7rem; font-weight: 600; line-height: 1;}
.infomation{display: flex; align-items: center; padding : 0 1.5rem; width : 18rem; height : 4.1rem; border : 1px solid rgba(240,240,241,0.3); color : #fff; letter-spacing: -0.025em; font-size: 1.4rem; position : relative;
	&::after{position : absolute; content : ''; width : 0.5rem; height : 0.5rem; border-top : 1px solid #fff; border-right : 1px solid #fff; right : 1.6rem; transform: rotate(45deg); transition : right .3s;}
	&:hover::after{right : 1.1rem;}
	&::before{position : absolute; content : ''; background : rgba(255,255,255,0.1); width : 100%; height : 0%; left : 0; bottom : 0; transition : height .5s;}
	&:hover::before{height : 100%;}
}
.footer-company{display: flex; align-items: center; margin-top: 2.6rem;
	li{display: flex; align-items: center; gap : 1.6rem;}
	li + li{margin-left: 1.3rem; padding-left: 1.3rem; position : relative;}
	li + li::before{position : absolute; content : ''; left : 0; top : 50%; width : 1px; height : 1rem; background: #aaa; transform: translateY(-50%);}
	span{font-family: KPD, PT, sans-serif; font-size: 1.4rem; font-weight: 500; color : #aaa; letter-spacing: -0.06em;}
	b{font-family: KPD, PT, sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -0.06em;}
	img{width : 10.3rem;}
}


@media (max-width : 1200px){
	.moView{display : block !important;}
	.pcView{display : none !important;}


	/* header */
	.header{height : 70px; padding : 0 20px; background: #fff; border-bottom : 1px solid #ddd;
		&.white{
			.main-logo-mark{background-image: url(../images/common/logo-prugio.svg);}
			.main-logo-txt{color : #000;}
		}
	}
	.header-inner{justify-content: center;}
	.header-nav{display: none;}
	.main-logo > a{gap : 8px;}
	.main-logo-mark{width : 96px; height : 16px;}
	.main-logo-txt{font-size: 14px;}
	.header-right{position : absolute; right : 0; top : 50%; height : auto; padding : 0; background: none; box-shadow: none; transform: translateY(-50%);}
	.header-tel{gap : 0; margin-left: 0; padding-left: 0;
		&::before{display: none;}
		span{display: none;}
	}
	.header-tel-icon{width : 35px; height : 35px; background: url(../images/common/icon-tel-white.svg) no-repeat center / 17px #d3cbc6;}

	.hamburger{display: flex; align-items: center; justify-content: center; position : absolute; left : 0; top : 50%; width : 40px; height : 40px; border-radius: 50%; background: #004e50; transform: translateY(-50%);
		span{position : absolute; width : 15px; height : 1px; background: #fff; transition : transform .5s, opacity .5s;}
		span:nth-child(1){transform: translateY(-5px);}
		span:nth-child(3){transform: translateY(5px);}
	}
	.header.active .hamburger{
		span:nth-child(1){transform: rotate(-45deg);}
		span:nth-child(2){opacity: 0;}
		span:nth-child(3){transform: rotate(45deg);}
	}
	.hamburger-nav{display: block; position : fixed; left : 0; top : 0; width : 80vw; max-width : 360px; height : 100%; padding : 110px 0 0; background: #fff; z-index: 9999; transform: translateX(-100%); transition : transform .7s;
		& > ul > li > a{display: block; padding : 12px 24px; font-size: 16px; font-weight: 500; letter-spacing: -0.04em; color : #004e50;}
	}
	.header.active + .hamburger-nav{transform: translateX(0);}
	.hamburger-dim{display: block; position : fixed; left : 0; top : 0; width : 100%; height : 100%; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; pointer-events: none; transition : opacity .7s;}
	.header.active ~ .hamburger-dim{opacity: 1; pointer-events: all;}


	/* footer */
	.footer{padding : 40px 20px 30px;}
	.footer-inner{flex-direction: column; gap : 30px;}
	.footer-logo{gap : 8px;
		.main-logo-mark{width : 100px; height : 16px;}
		span{font-size: 14px;}
	}
	.footer-p{margin-top: 20px; font-size: 12px; line-height: 1.5;}
	.footer-info{margin-top: 16px; font-size: 11px; line-height: 18px; letter-spacing: -0.04em;
		li{padding-left: 12px;}
		li::before{font-size: 10px;}
	}
	.footer-copy{margin-top: 20px; font-size: 11px; line-height: 1.5;}
	.footer-right{align-items: flex-start; margin-top: 0;}
	.footer-top{display: none;}
	.footer-cs{gap : 16px;}
	.footer-tel{font-size: 26px;}
	.infomation{padding : 5px 10px; width : 130px; height : 25px; font-size: 10px;}
	.footer-company{flex-wrap: wrap; gap : 10px 0; margin-top: 14px;
		li{gap : 10px;}
		span{font-size: 12px;}
		b{font-size: 14px;}
		img{width : 80px;}
	}
}

@media (max-width : 768px){
	.header{height : 60px; padding : 0 15px;}
	.hamburger{width : 38px; height : 38px;}
	/* 로고 : 좁은 화면에서 햄버거/전화 버튼과 겹치지 않도록 화면 폭에 맞춰 축소 */
	.main-logo > a{gap : min(1.4vw, 8px);}
	.main-logo-mark{width : min(23vw, 96px); height : min(3.8vw, 16px);}
	.main-logo-txt{font-size: min(3.4vw, 14px);}
}