@charset "utf-8";

:root{ --header-height: clamp(60rem, calc( 100 / var(--inr) * 100vw ), 80rem); }

/* inner */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }

header{ --shadow: 10rem 10rem 30rem rgba(255, 212, 212, 0.15); position: fixed; inset: 0 0 auto; z-index: 10; background: #fff;
	.inr{ display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; height: var(--header-height); }
	.logo{
		.link{ position: relative; display: block; width: fit-content; }
		/* .link::before{ content: ''; position: absolute; inset: 0; background: url('/images/common/logo-white.png') no-repeat 50% / contain; } */
		.img{ display: block; height: clamp(30rem, calc( 42 / var(--inr) * 100vw ), 42rem); opacity: 0; }
		i { display: block; background-image: url(/images/common/logo-innom.svg); background-size: contain; background-repeat: no-repeat; width: 270rem; height: 40rem; }
		.en & i { background-image: url(/images/common/logo-innom-en.svg); }
		@media(max-width: 767px){
			/* i { width: 200rem; height: 40rem; } */
			i { width: 160rem; height: 30rem; }
		}
	}
	nav {
		display: flex;
		gap: 40rem;
	}
	.gnb{ display: flex; margin-right: 50rem;
		.drawerExpanded &{ visibility: hidden; opacity: 0; }
		& > li{ position: relative; }
		.lv1{ display: block; padding: 20rem 44.3rem; font-size: 18rem; color: #222;font-weight: 600; }
		.en & .lv1{ padding-inline: 20rem; white-space: nowrap; }
		.box{ position: absolute; top: 100%; left: 50%; translate: -50%; min-width: 160rem; padding: 20rem; background: #fff; border:1px solid #e0e0e0;  box-shadow: var(--shadow); font-size: 17rem; color: #444; text-align: center; white-space: nowrap; }
		.box > ul{ display: grid; gap: 20rem; }
	}
	.util{display: flex;position: relative;align-items: center;justify-content: flex-end;color: #222;}
	.lang-selector{ position: relative; translate: 0 1rem; font: 16rem var(--font-pop);
		.lang-btn{ display: flex; align-items: center; gap: 15rem; color: #222; font-weight: 600;}
		.arrow{ translate: 0 1rem; display: inline-block; width: 11rem; aspect-ratio: 11/6; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
		.lang-list:not(.isExpanded){ opacity: 0; visibility: hidden; }
		.lang-list{ position: absolute; top: 100%; left: 50%; translate: -50% 8rem; padding: 16rem 30rem; background: #fff; border-radius: 8rem; box-shadow: var(--shadow); font: 15rem var(--font-pre); color: #444; }
	}
	.lang-switch {
        @media(max-width:767px) {
            font-size: 12rem;
        }
    }
	.lang-switch ul { display: flex; gap: 10rem; padding: 6rem 20rem; border: 1px solid; border-radius: 50rem; }
	.lang-switch ul li.active { font-weight: 700; color: #06467a; }
	.drawer-btn{ position: relative; display: grid; gap: 8rem; justify-items: end; border-left: 1px solid #a3a3a357; width: 110rem; height: var(--header-height); align-items: center; align-content: center; justify-content: center;justify-items: center; 
		.drawerExpanded &{ color: var(--black); border: none; }
		.dot{ display: block; height: 100%; background: #222; border-radius: 2rem; width: 50rem; height: 2rem; }
		.dot.d2 {width: 30rem; background: var(--primary);}

		@media(min-width: 1280px){
			&{display: none;}
		}
	}
	.drawer{ position: fixed; inset: var(--header-height) 0 0; z-index: 10; display: grid; background: #fff; color: var(--black);
		&:not(.isExpanded){ opacity: 0; visibility: hidden; }
		nav{ overflow: auto; display: grid; place-items: center; padding: calc(var(--header-height) + 30rem) }
		.drawer-gnb{ display: grid; gap: clamp(60rem, calc(76 / var(--inr) * 100vw), 76rem) clamp(20rem, calc(78 / var(--inr) * 100vw), 78rem); width: 100%; }
		.lv1{ font: 700 26rem var(--font-pre); }
		.box{ margin-top: 20rem; border-top: 1px solid #ddd; padding-top: 27rem; font: 300 var(--fs20) var(--font-pre); color: #666; }
		.box > ul{ display: flex; flex-wrap: wrap; gap: 17rem; }
		.util {display: none;}
        @media(max-width:767px) {
            nav {padding: 40rem;}
        }
	}
	@media(prefers-reduced-motion:no-preference){
		&, &::before, .logo .img, .logo .link::before, .gnb .box, .lang-list, .drawer{ transition: .3s; }
		.gnb{ transition: opacity .3s, visibility .3s; }
		.drawer-btn .bar{ transition: translate .3s, scale .3s, rotate .3s; }
		.drawer:not(.isExpanded){ scale: .9; }
	}
	@media(any-hover:none){
		.gnb .box{ display: none; }
	}
	@media(any-hover){
		:where(.gnb li:not(:hover) .box, .lang-list:not(.isExpanded)){ transform: translateY(10rem); opacity: 0; visibility: hidden; }
		.gnb .box a:hover{ color: var(--primary); }
	}
	@media(min-width:768px){
		.drawer-gnb{ grid-template-columns: repeat(3, 1fr); }
		.drawer-gnb .box > ul{ flex-direction: column; }
	}
	@media(min-width:1280px){
		&{ position: absolute;position: absolute; max-width: 1650rem; margin: 0 auto; top: 30rem; }
		body:not(.drawerExpanded) &{ color: #fff; border-bottom: 1px solid rgba(163, 163, 163, 0.34);}
		.drawer{grid-template-columns: 60fr 130fr;}
		.drawer-gnb{ grid-template-columns: repeat(3, 1fr); }
		.drawer-img{ background: url('/images/main/img_mVisual-02.jpg') no-repeat 50% / cover; }
	}
	@media(max-width:1279px){
		body:not(.isScrolled, .drawerExpanded) &{ color: #fff; }
		&::before{ content: ''; position: absolute; inset: 0; background: #fff; border-bottom: 1px solid #e5e5e5; }
		body:not(.isScrolled) &::before{ opacity: 0; }
		:where(.drawerExpanded, .isScrolled) & .logo{
			.link::before{ opacity: 0; }
			.img{ opacity: 1; }
		}
		.inr{ grid-template-columns: 1fr auto; }
		.inr > nav{ overflow: auto; position: absolute; inset: 100% -4vw auto; justify-content: center; padding: 10rem 10rem; background: #3a3a3a; color: #fff;
			.gnb{ margin: 0; display: flex; justify-content: center; gap: 2ch; }
			.gnb .lv1{ padding: 0; font: 400 14rem var(--font-pre); color: inherit; }
			.box{ display: none; }
		}

		.drawer-img{ display: none; }
		.drawer-btn {border: 0; width: 80rem;}
		/* .drawer {padding-top: var(--header-height)} */
	}
	@media(max-width:767px){
		.util{gap: 0;}
		.drawer-btn .dot {width: 40rem;} 
		.en & .inr > nav{ justify-content: start; }
	}

}

footer{padding-bottom: 80rem;padding-top: 60rem;background: #ffffff;color: #656565; border-top: 1px solid #eee;
	.logo{width: auto;position: relative;right: 0;height: clamp(35rem, calc(42 / var(--inr)* 100vw), 45rem);}
	.btn-group{display: flex;align-items: center;gap: 20rem; padding: 40rem 0;}
	.btn{display: block;border-radius: 5em;font-size: 16rem;color: #656565;text-align: center;padding: 10rem 20rem;border: 1px solid #B8B8B8;}
	.info{}
	address {display: flex; flex-wrap: wrap; gap: 20rem; font-size: 16rem; }
	address b{ margin-right: 11rem; font-weight: 600; }
	.separation{ display: none; font-weight: 100; }
	.copyright{ margin-top: 25rem; }
	@media(min-width:768px){
		.inr{display: flex;align-items: flex-start;gap: 70rem;}
		.btn-group{ margin-top: 0; }
		.info{ grid-column: 1/-1; }
		address{ flex-direction: row; }
		.separation{ display: block; }
		.separation:nth-child(8){ display: none; } 
	}
	@media(min-width:1280px){
		.info{ display: flex; flex-direction: column; }
	}
	@media(max-width:767px) {
		.logo{position: relative; margin-bottom: 30rem;}
        .copyright{font-size: 14rem;margin-top: 20rem;}
        address {gap: 12rem 20rem;}
	}
}

.scrollTop {position: fixed;right: 30rem;bottom: 30rem;z-index: 9;display: grid;place-items: center;width: 70rem;aspect-ratio: 1;background: rgba(89, 89, 89, 0.6);border: 1px solid #fff;border-radius: 50%;
	body:not(.isScrolled) &{ opacity: 0; visibility: hidden; }
	.arrow{ width: 16rem; fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.5px; }
	@media(prefers-reduced-motion:no-preference){
		&{ transition: .6s; }
		.isScrolled &{ transition-delay: .3s; }
	}
} 


@media(max-width: 1280px) {
	.isScrolled .logo i, .drawerExpanded .logo i {
		background-image: url(/images/common/logo-innom.svg); 
	}
}


/* 2025-02-05  */
@media(any-hover){
    header .gnb .box a:hover {
        color: var(--white);
        background-color: var(--primary);
        width: 100%;
        display: block;
    }
}
header .gnb .box {padding: 10rem 5rem;
    &>ul{gap:0}
    &>ul li a{display: block;padding-block:6rem;}
}