@charset "utf-8";

:root{--header-height:110rem;}
@media(max-width:1279px){
	:root{--header-height:80rem;}
}
@media(max-width:767px){
	:root{--header-height:70rem;}
}

/* inner */
:where(.inr, .wrapper){ 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); }
.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem); }

/* header */
header{position:fixed; top:0; left:0; height:var(--header-height); width:100%; z-index: 10; transition:0.3s ease;}
.isScrolled header{height:calc(var(--header-height) - 40rem); background:#fff; border-bottom:1px solid #ddd;}
.headerInr{display:flex; position:relative; justify-content:space-between; align-items:center; padding:0 60rem; height:100%; z-index:13;}
.logo{position:relative; display:inline-block; margin-top:5rem; height:40rem;}
.isScrolled .logo{height:35rem;}
.logoImg{display:block; position:absolute; left:0; top:0; width:auto; height:100%; transition:0.3s ease;}
.logoImg_b{opacity:0;}
.isScrolled .logoImg_b,
.mGnb-open .logoImg_b{opacity:1;}
.isScrolled .logoImg_w,
.mGnb-open .logoImg_w{opacity:0;}

/* gnb */
.hdRight{display:flex; align-items:center; height:var(--header-height);}
.hdRight_tel{display:flex; align-items:center; margin-right:50rem; font-size:18rem; font-family:var(--font-rhd); color:#fff; line-height:1; font-weight:600; transition:0.3s ease;}
.hdRight_tel svg{display:block; margin-right:10rem; height:24rem;}
.hdRight_tel path{fill:#fff; transition:0.3s ease;}
.isScrolled .hdRight_tel,
.mGnb-open .hdRight_tel{color:#222;}
.isScrolled .hdRight_tel path,
.mGnb-open .hdRight_tel path{fill:var(--primary);}
header nav{display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; transition:0.3s ease;}
header .gnb{ position: relative; display: flex; height: 100%; }
header .gnb > li{position:relative; display:inline-block; height:100%; }
header .gnb [data-gnb="1"]{ display:flex; align-items:center; height:100%; padding:0 40rem; font-size:18rem; font-weight:500; color:#fff; transition:0.3s ease;}
header .gnb .sub_menu{ visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); min-width: 120rem; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
header .gnb li:hover .sub_menu{ visibility: visible; top: 85%; opacity: 1; }
header .gnb [data-gnb="2"]{ display: block; padding: 14rem; color: #333; border-top: 1px solid #ddd; font-size:16rem; text-align: center; transition:0.2s;}
header .gnb [data-gnb="2"]:hover{ background: var(--primary); color: #fff; }
header .gnb .sub_menu li:first-child [data-gnb="2"]{ border-top: 0; }
.mGnb-open header nav{opacity:0; visibility:hidden;}
.isScrolled header .gnb [data-gnb="1"]{color:#111;}
@media(prefers-reduced-motion:no-preference){
	.gnb .sub_menu{ transition: .4s; }
}

/* mobile-menu */
.menu-btn{position:relative; width:34rem; height:34rem; background:0; color: inherit; z-index: 1;}
.menu-btn .bar{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin-left:auto; width: 100%; height:2px; background:#fff; transition:0.3s ease;}
.menu-btn .bar:nth-child(1){margin-top:-11rem;}
.menu-btn .bar:nth-child(3){margin-top:11rem;}
.isScrolled .menu-btn .bar{background:#333;}
.mGnb-open .menu-btn .bar{background:#333;}
.mGnb-open .menu-btn .bar:nth-child(1){margin-top:0rem; transform:translate(-50%,-50%) rotate(45deg);}
.mGnb-open .menu-btn .bar:nth-child(2){opacity:0;}
.mGnb-open .menu-btn .bar:nth-child(3){margin-top:0rem; transform:translate(-50%,-50%) rotate(-45deg);}
@media(prefers-reduced-motion:no-preference){
	.btn-menu .bar{ transition: .4s; }
}
@media(max-width:1279px){
    .headerInr{padding:0 4%;}
    .logo{height:36rem;}
    .isScrolled .logo{height:30rem;}
    .isScrolled header{height:calc(var(--header-height) - 25rem);}
    
    header nav{display:none;}
    
    .menu-btn .bar:nth-child(1){margin-top:-9rem;}
    .menu-btn .bar:nth-child(3){margin-top:9rem;}
}
@media(max-width:767px){
    .logo{height:30rem;}
    .isScrolled .logo{height:27rem;}
    .isScrolled header{height:calc(var(--header-height) - 20rem);}
    .menu-btn{width:30rem; height:30rem;}
    .headerInr .hdRight_tel{display:none;}
}


/* 모바일 메뉴 */
.mGnb-open{overflow:clip;}
.mGnb{overflow: hidden auto; position:fixed; top: 0; right:0; width:100%; height: 100%; background: var(--white); z-index: 3; }
body:not(.mGnb-open) .mGnb{ transform: translateX(100%); visibility: hidden; }
.mGnb__header{ display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); }

.mGnb_tel{margin-right:0; margin-bottom:20rem; padding:20rem 25rem; background:#eaeaf5;}

.mGnb_all{display:none; align-items:center; justify-content:center; height:calc(100% - var(--header-height));}
.mGnb_all__ul{display:flex; margin-top:-100rem;}
.mGnb_all__ul > li+li{margin-left:120rem;}
.mGnb_all__ul > li > a{display:block; margin-bottom:35rem; font-size:var(--fs30); color:#111; font-weight:bold;}
.mGnb_all__sub > li+li{margin-top:15rem;}
.mGnb_all__sub > li > a{display:block; font-size:var(--fs20); color:#888; transition:0.2s ease;}

.mGnb__ul li+li{margin-top:15rem;}
.mGnb [data-gnb="1"]{ position: relative; display: block; width: 100%; padding:10rem 25rem; text-align: left; font-size:20rem; color:#111; }
.mGnb [data-gnb="1"]:has(+[aria-expanded]){ display: none; }
.mGnb [data-gnb="1"][aria-expanded]::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 10rem; display: block; width:14rem; height: 9rem; background: url('/images/common/menu_button.svg') no-repeat 50% 0 / contain; }
.mGnb [data-gnb="1"][aria-expanded="true"]::before{ transform: translateY(-50%) rotate(180deg); }
.mGnb .sub_menu{padding:15rem 0; background:#f5f5f5;}
.mGnb .sub_menu:not(.isVisible){display:none;}
.mGnb .sub_menu li+li{margin-top:5rem;}
.mGnb [data-gnb="2"]{position:relative; display:block; padding:5rem 25rem; font-size:18rem; color:#666; }

.cover{ position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; z-index: 2; }
.mGnb-open .cover{ visibility: visible; opacity: 1; }
@media(prefers-reduced-motion: no-preference){
	.mGnb{ transition: .5s ease-out, visibility 0s .5s; }
	.mGnb-open .mGnb{ transition-delay: 0s; }
	.mGnb .close-btn{ transition: .8s; }
	.mGnb [data-gnb="1"]{ transition: .3s; }
	.mGnb [data-gnb="1"][aria-expanded]::before{ transition: .4s; }
	.cover{ transition: .4s; }
}
@media(hover:hover){
    .mGnb_all__sub > li > a:hover{color:var(--primary);}
}
@media(min-width:768px){
    .mGnb__ul{display:none;}
    .mGnb_all{display:flex;}
    .mGnb_tel{display:none;}
}
@media(max-width:1279px){
    .mGnb_all__ul > li+li{margin-left:80rem;}
    .mGnb_all__ul > li > a{font-size:25rem;}
}
    

/* footer */
footer{padding:80rem 0; background:#ececec;}
footer .inr{display:flex; justify-content:space-between;}
.ftCnt1{padding-right:80rem;}
.ftCnt1_logo{display:block; width:fit-content; height:40rem;}
.ftCnt1_logo img{display:block; height:100%; filter:grayscale(1); opacity:0.5;}
.ftCnt1_link{display:flex; margin:40rem 0 45rem;}
.ftCnt1_link li{position:relative; padding:0 20rem;}
.ftCnt1_link li:first-child{padding-left:0;}
.ftCnt1_link li:before{content:''; display:block; position:absolute; top:5rem; left:0; height:12rem; width:1px; background:#bbb;}
.ftCnt1_link li:first-child:before{display:none;}
.ftCnt1_link a{display:block; font-size:16rem; color:#777; transition:0.2s;}
.ftCnt1_info{font-size:0;}
.ftCnt1_info span{display:inline-block; margin:4rem 25rem 4rem 0; font-size:14rem; color:#888;}
.ftCnt1_info b{color:#555;}
.ftCnt2_link{display:flex; justify-content:flex-end;}
.ftCnt2_link li{margin-left:30rem;}
.ftCnt2_link a{display:block; height:24rem;}
.ftCnt2_link img{display:block; height:100%; transition:0.2s;}
.ftCnt2_fmsite{position:relative; margin:50rem 0 50rem auto; width:230rem;}
.ftCnt2_fmsite span{display:flex; align-items:center; justify-content:space-between; padding:2rem 20rem 0; width:100%; height:44rem; font-size:16rem; color:#555; background:#ddd; cursor:pointer;}
.ftCnt2_fmsite img{display:block; width:14rem; transform-origin:center; transition:0.2s;}
.ftCnt2_fmsite span.active img{transform:rotate(-180deg);}
.ftCnt2_fmsite ul{display:none; padding:20rem 0; width:100%; background:#fff; border:1px solid #ddd;}
.ftCnt2_fmsite li+li{margin-top:10rem;}
.ftCnt2_fmsite a{display:block; padding:0 20rem; font-size:16rem; color:#666; transition:0.2s;}
.ftCnt2_copy{font-size:13rem; color:#999; text-transform:uppercase; text-align:end;}
@media(hover:hover){
    .ftCnt1_link a:hover{color:#333;}
    .ftCnt2_link a:hover img{filter:grayscale(1); opacity:0.4;}
    .ftCnt2_fmsite a:hover{opacity:.6;}
}
@media(max-width:1279px){
    footer{padding: 60rem 0;}
    .ftCnt1_logo{height:32rem;}
    .ftCnt1_link{margin:30rem 0 35rem;}
    .ftCnt1_info > br{display:none;}
    .ftCnt2_fmsite{margin:40rem 0 40rem auto;}
}
@media(max-width:767px){
    footer{padding:50rem 0;}
    footer .inr{display:block;}
    .ftCnt1{padding-right:0;}
    .ftCnt1_logo{margin:auto; height:28rem;}
    .ftCnt1_link{margin:20rem 0 25rem; justify-content:center;}
    .ftCnt1_link li{padding:0 12rem !important;}
    .ftCnt1_link a{font-size:15rem;}
    .ftCnt1_info{text-align:center;}
    .ftCnt1_info span{margin:2rem 10rem;}
    .ftCnt2_link{justify-content:center;}
    .ftCnt2_link li{margin:0 25rem;}
    .ftCnt2{margin-top:35rem;}
    .ftCnt2_link a{height:20rem;}
    .ftCnt2_fmsite{margin:30rem auto; width:100%;}
    .ftCnt2_copy{text-align:center;}
}