@charset "UTF-8"; 

.white{background:#fff;}
.black{background:#000;}

/* --- header --- */
#header{ position: fixed; width: 100%; height: 13rem; z-index:100; background-color: rgba(0, 0, 0, 0.15);  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); transition: all .5s;}
.header_inwrap{ width: 100%;  max-width: 164rem; padding:0 2rem;  height:100%;  margin: 0 auto; display:flex; align-items:center; justify-content:space-between;}
#logo{width:14rem; transition:all .5s;}
#logo a{display:block; width:100%;}
#logo a img{width:100%;}
.gnb-pc{display: flex;align-items: center;gap: 6rem;height: 100%;}
#gnb{ height: 100%; align-content: center;}
.gnb_ul{ display: flex; align-items: center;  gap: 8rem; height: 100%;}
.gnb_ul .mn_l1{position:relative; height: 100%; align-content: center;}
.gnb_ul .mn_l1 .mn_a1{display:block;}
.gnb_ul .mn_l1 .mn_a1 span{color:#fff; font-size:1.8rem; font-weight:500; text-transform: uppercase;}
.gnb_ul .depth2_wrap{display:none; position:absolute;  top:10rem;  left: -5.5rem; width: 20rem; background: var(--point-color);  text-align:center;}
.gnb_ul .depth2_wrap .depth2{padding:2rem 1.5rem;}
.gnb_ul .depth2_wrap .mn_l2 + .mn_l2{margin-top:1.5rem;} 
.gnb_ul .depth2_wrap .mn_l2 .mn_a2 span{color:#fff; opacity:0.7;}

.sitemapMenu{width:2rem; height:2rem; }
.sitemapMenu a{display:block; width:100%; height:100%; background:url(../img/layout/ico_menu.svg) no-repeat center center / 2rem;}
.mobileMenu{display:none; width:2rem; height:2rem; }
.mobileMenu a{display:block; width:100%; height:100%; background:url(../img/layout/ico_menu.svg) no-repeat center center / 2rem;}

.gnb_ul .mn_l1.on .mn_a1 span{color:var(--point-color);}

#header.fixed{height:10rem;}
#header.fixed #logo{width:12rem;}
#header.fixed .gnb_ul .depth2_wrap{top:8rem;}
	
	@media screen and (max-width:1200px){		
		#header{height:10rem;}
		/* #header.fixed{height:8rem;} */
		#logo{width:12rem;}
		#gnb{display:none;}
		.sitemapMenu{display:none;}
		.mobileMenu{display:block;}
	}
	@media screen and (max-width:640px){		
		#logo{width:10rem;}
	}
	
/* --- mobile --- */
.gnbMobile{width: 100%; height: 100%; position: fixed; top: 0; right:-100%; padding: 4rem; background: rgba(0, 0, 0, 85%); backdrop-filter: blur(10px); z-index: 200; transition:all .3s;}
.gnbMobile.open{right:0;}
.gnbMobile .wrap{position: relative; width: 100%;;}
.gnbMobile .gnbBox{margin-top:5rem;}
.gnbMobile .gnbBox #gnb{display:block;}
.gnbMobile .gnbBox .gnb_ul{flex-direction:column;  align-items: flex-start; gap:3rem;  height: calc(100vh - 22rem); padding-right:1rem; overflow-y: auto;}
.gnbMobile .gnbBox .gnb_ul .mn_l1{width:100%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 3rem;}
.gnbMobile .gnbBox .gnb_ul .mn_l1:last-child{border-bottom:0;}
.gnbMobile .gnbBox .gnb_ul .mn_l1 .mn_a1 span{font-size:2.2rem;}
.gnbMobile .gnbBox .gnb_ul .depth2_wrap{display: block; background: none;  width:100%; position: static;}
.gnbMobile .gnbBox .gnb_ul .depth2_wrap .depth2{ display: flex; flex-wrap: wrap; gap:2rem 4rem; padding:2rem 0 0;}
.gnbMobile .gnbBox .gnb_ul .mn_l2{}
.gnbMobile .gnbBox .gnb_ul .depth2_wrap .mn_l2 + .mn_l2{margin-top:0;}
.gnbMobile .gnbBox .gnb_ul .depth2_wrap .mn_l2 .mn_a2 span{font-size:1.8rem;}
.gnbMobile .mobilegnbClose{ width: 3rem; height: 3rem; position: absolute; top: 1rem; right:0;}
.gnbMobile .mobilegnbClose .icon{position:relative;}
.gnbMobile .mobilegnbClose .icon:after,
.gnbMobile .mobilegnbClose .icon:before{content: ""; position: absolute; top: 50%; left: 50%; margin: 0 0 0 -1.5rem; display: block; width: 3rem; height: 0.2rem; background: #fff;}
.gnbMobile .mobilegnbClose .icon:before{transform: rotate(45deg);}
.gnbMobile .mobilegnbClose .icon:after{transform: rotate(-45deg);}



/* --- sitemap --- */
.sitemap{display:none;width: 100%; height: 100%; position: fixed; top: 0; left: 0; padding: 3.9rem 5rem; background: rgba(0, 0, 0, 85%); backdrop-filter: blur(10px); z-index: 200; overflow: auto;}
.sitemap .wrap{position:relative; width: 100%;  max-width: 164rem;  padding: 0 2rem; margin: 0 auto;}
.sitemap .logoBox{opacity: 0; transition: all .6s; transition-delay: 0.2s; transform: translate(0, -10rem);}
.sitemap .gnbBox{width: 100%; max-width: 120rem; margin: 18rem auto 0;}
.sitemap .gnbBox .gnb_ul{justify-content: space-between;align-items: flex-start; height: 35rem;}
.sitemap .gnbBox .gnb_ul .mn_l1 {align-content: center;  width: calc(100% / 6); text-align: center; align-content: flex-start;}
.sitemap .gnbBox .gnb_ul .mn_l1:after{content:''; display:block; width:1px; height:100%; position:absolute; top:0; left:-4rem; background:rgba(255,255,255,0.2);}
.sitemap .gnbBox .gnb_ul .mn_l1:first-child:after{display:none;}
.sitemap .gnbBox .gnb_ul .mn_l1:nth-child(2){width:27rem;}
.sitemap .gnbBox .gnb_ul .mn_l1 .mn_a1 span{font-size:2.2rem; font-weight:600;}
.sitemap .gnbBox .gnb_ul .depth2_wrap{ position: static; display:block; width:100%; background:none; margin-top: 5rem;}
.sitemap .gnbBox .gnb_ul .depth2_wrap .depth2{padding:0;}
.sitemap .gnbBox .gnb_ul .depth2_wrap .mn_l2 + .mn_l2{margin-top:2rem;}
.sitemap .gnbBox .gnb_ul .depth2_wrap .mn_l2 .mn_a2 span{ font-size: 1.8rem;}
.sitemap .sitemapClose{ opacity: 0; transition: all .6s; transition-delay: 0.2s; transform: translate(0, -10rem); width: 3rem; height: 3rem; position: absolute; top: 1rem; right: 2rem;}
.sitemap .sitemapClose .icon{position:relative;}
.sitemap .sitemapClose .icon:after,
.sitemap .sitemapClose .icon:before{content: ""; position: absolute; top: 50%; left: 50%; margin: 0 0 0 -1.5rem; display: block; width: 3rem; height: 0.2rem; background: #fff;}
.sitemap .sitemapClose .icon:before{transform: rotate(45deg);}
.sitemap .sitemapClose .icon:after{transform: rotate(-45deg);}
.sitemap .gnbBox .gnb_ul li{position:relative; opacity: 0; transition: all .6s; transition-delay: 0.2s; transform: translate(0, -8rem);}
.sitemap .gnbBox .gnb_ul li:nth-child(1){transition-delay:.0s;}
.sitemap .gnbBox .gnb_ul li:nth-child(2){transition-delay:.1s;}
.sitemap .gnbBox .gnb_ul li:nth-child(3){transition-delay:.2s;}
.sitemap .gnbBox .gnb_ul li:nth-child(4){transition-delay:.3s;}
.sitemap .gnbBox .gnb_ul li:nth-child(5){transition-delay:.4s;}
.sitemap .gnbBox .gnb_ul li:nth-child(6){transition-delay:.5s;}
.sitemap.open .logoBox{opacity: 1; transform: none;}
.sitemap.open .gnb_ul li{opacity: 1; transform: none;}
.sitemap.open .sitemapClose{opacity: 1; transform: none;}
.sitemap.closeAni .gnb_ul li:nth-child(1){transition-delay:.5s;}
.sitemap.closeAni .gnb_ul li:nth-child(2){transition-delay:.4s;}
.sitemap.closeAni .gnb_ul li:nth-child(3){transition-delay:.3s;}
.sitemap.closeAni .gnb_ul li:nth-child(4){transition-delay:.2s;}
.sitemap.closeAni .gnb_ul li:nth-child(5){transition-delay:.1s;}
.sitemap.closeAni .gnb_ul li:nth-child(6){transition-delay:.0s;}

/* --- quick --- */
.quick{position: fixed; bottom: 26rem; right: 15rem; z-index:10;}
.quick .round{display:flex;justify-content: center;align-items: center;width: 8.6rem;height:8.6rem;background:var(--point-color);border-radius:50%;}
.quick .arrow{width:3rem; height:3rem; background:url(../img/default/ico_arrow_right-top.svg) no-repeat center center / 3rem;}
.quick .txt{position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);}
.quick .marqee{display:block; animation: spin 15s linear infinite; background:url(../img/default/quick_spin.svg) no-repeat center center / 14.5rem;width: 14.5rem;height: 14.5rem;}
@keyframes quick_spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1);}
  50%      { transform: scale(0.85); }
}

	@media screen and (min-width:1200px){		
		.quick:hover .round{}
		.quick:hover .arrow{animation: pulse 1.5s ease-in-out infinite;}
	}
	@media screen and (max-width:1640px){		
		.quick{bottom: 16rem; right: 5rem;}
	}

	@media screen and (max-width:980px){		
		.quick{display:none;}
	}


/* --- footer --- */
.pageTop{position:fixed; bottom:4rem; right:10.5rem; transition: bottom 0.3s ease; z-index:100;}
.pageTop .topBtn{display:none; width:4.4rem; height:4.4rem; background:url(../img/layout/ico_pageTop.svg) no-repeat center center / 4.4rem;}

#footer{width:100%; background:#000; padding:5rem 0;}
.footer_inwrap{ width: 100%; max-width: 164rem; padding:0 2rem;  height: 100%;  margin: 0 auto;  display: flex;  align-items: flex-end;  justify-content: space-between;}
.footer_info{display:flex; gap:5rem;}
.footer_logo a{ display: block;  width: 9rem; filter: brightness(0.6);}
.footer_logo a img{width:100%;}
.footer_info .address{font-style:normal;}
.footer_info .address ul{max-width:77rem; display:flex; align-items:center; flex-wrap:wrap;}
.footer_info .address li{width:50%;}
.footer_info .address li + li{margin-top:0.5rem;}
.footer_info .address li .txt,
.footer_info .address li .txt span{color:#fff;}
.footer_info .address li .txt .desc{color:rgba(255,255,255,0.4); margin-right:1.5rem;}
.footer_info .address .copyright{width:100%; margin-top:3rem; font-size:1.3rem; color:rgba(255,255,255,0.4);}
.footer_fmaily-collection{display: flex; align-items: center; gap: 3.5rem;}
.footer_fmaily-collection li a{display:block; filter: grayscale(1);}
.footer_fmaily-collection .betteron{width: 16rem; height: 4rem; background:url(../img/layout/logo_betteron.svg) no-repeat center center / 16rem;}
.footer_fmaily-collection .hrus{width:10rem; height:2.2rem; background:url(../img/layout/logo_hrus.svg) no-repeat center center / 10rem;}
.footer_fmaily-collection .blog{width:3.2rem; height:3.2rem; background:url(../img/layout/logo_blog.svg) no-repeat center center / 3.2rem;}


	@media screen and (min-width:1200px){		
		.gnb_ul .depth2_wrap .mn_l2:hover .mn_a2 span{opacity:1;}
	}

	@media screen and (max-width:1640px){		
		.pageTop{right:2rem;}
	}
	
	@media screen and (max-width:1200px){		
		.footer_info .address li{width:100%;}
		.footer_info .address li:nth-child(2){order: -1; margin-bottom: 2rem;}
	}

	@media screen and (max-width:768px){		
		.footer_inwrap{flex-wrap:wrap; gap:3rem;}
		.footer_fmaily-collection{margin-left:14rem;}
	}

	@media screen and (max-width:480px){		
		.footer_info{flex-direction: column;}
		.footer_fmaily-collection{margin-left:0;}
	}
	
	

/* --- sub layout --- */
.sub_inwrap{width: 100%; max-width: 152rem;  padding: 0 2rem;  margin: 0 auto;}
.sub-header-wrap{position:relative; z-index: 1;width:100%; height: 45rem; background:#000;  border-bottom: 1px solid #333;}
.sub-header-wrap.only{border-bottom:0;}
.sub-header-wrap.only:before{content:''; display:block; position:absolute; bottom:0; right:0; background:url(../img/default/uxis_emblem.svg) no-repeat center center / 45rem; width:45rem; height:30rem;}
.sub-header-wrap.white{background:#fff;  border-bottom: 1px solid #e6e6e6;}
.sub-header-wrap.white:before{background:url(../img/default/uxis_emblem_op.svg) no-repeat center center / 45rem; }
.sub-header-wrap .sub_inwrap{height:100%;}
#sub-header{ width:100%; height:100%;}
#sub-header h2{position:relative;display:inline-flex; color:#fff; font-family: "poppins";  font-size: 8rem;  font-weight: 700;  text-transform: uppercase;}
#sub-header h2:after{content:''; display:block; position:absolute;bottom: 2rem; right: -3rem;; width:1.2rem; height:1.2rem; background:var(--point-color);}
.sub-header-wrap.white #sub-header h2{color:#000;}
.sub-header-wrap.only #sub-header h2{margin-top:22rem;}
#sub-header .breadcrumb{display:flex; align-items:center; gap:3rem; padding-top:20rem;}
#sub-header .breadcrumb li{position:relative; font-weight:500;}
#sub-header .breadcrumb li:nth-child(2){margin-right:1rem;}
#sub-header .breadcrumb li:nth-child(2):after{content:''; display:block; width:2rem; height:2rem; background:url(../img/default/ico_arrow_right.svg) no-repeat center center / 2rem; position:absolute; top:50%; right:-3rem; transform:translateY(-50%);}
#sub-header .breadcrumb .home a{display:block; width:2rem; height:2rem; background:url(../img/layout/ico_home.svg) no-repeat center center / 2rem;}
#sub-header .breadcrumb .home:after{content:''; display:block; width:0.4rem; height:0.4rem; background:#000; border-radius:50%; position:absolute; top:50%; right:-1.5rem; transform:translateY(-50%);}
#sub-header .breadcrumb.change li{filter: invert(1);}
.sub-navi{margin-top:6.5rem;}
.sub-navi ul{display:flex; align-items:center; gap:5.5rem; height:6rem;}
.sub-navi ul li{}
.sub-navi ul li a{position:relative; display:block; padding:0 1rem;}
.sub-navi ul li a span{font-size:2rem; font-weight:500; color:#888;}
.sub-navi ul li.active a:before{content:''; display:block; width:100%; height:0.4rem; background:#fff; position:absolute; bottom:-1.7rem; left:0; }
.sub-navi ul li.active a span{color:#fff;}
.sub-header-wrap.white .sub-navi ul li.active a:before{background:#000;}
.sub-header-wrap.white .sub-navi ul li.active a span{color:#000;}
.m_sub-navi{display:none;}
	
	@media screen and (min-width:1200px){		
	}
	
	@media screen and (max-width:1200px){		

		#sub-header h2{font-size:7rem;}
		.sub-header-wrap.white{border-bottom:0;}
		.sub-navi{display:none;}
		.m_sub-navi{position:relative; display:block; margin-top:6.5rem;}
		.m_sub-navi .sub-list{display:flex; align-items: center; justify-content: space-between; gap:1rem; width: 100%; padding: 2rem;  border-radius:1rem 1rem 0 0; background: #000; text-align: left;  cursor: pointer;}
		.m_sub-navi .sub-list span{font-size: 2rem; font-weight: 500; color:#fff;}
		.m_sub-navi .sub-list .arrow{width:2.4rem; height:2.4rem; background:url(../img/default/ico_dropdown_arrow_bottom.svg) no-repeat center center / 2.4rem; filter: invert(1);}
		.m_sub-navi ul{display:none; width:100%; background:#000;border-radius:0 0 1rem 1rem;}
		.m_sub-navi ul li{}
		.m_sub-navi ul li{border-top:1px solid rgba(255,255,255,0.2);}
		.m_sub-navi ul li a{display:block; padding:1.5rem 2rem;}
		.m_sub-navi ul li a span{font-size: 2rem;color:#fff;}
		.m_sub-navi ul.active{display:block;}
	}


/* --- white일때 --- */
.white #logo{ filter: invert(1);}
.white .gnb_ul .mn_l1 .mn_a1 span{color:#000;}
.white .gnb_ul .mn_l1.on .mn_a1 span{color:var(--point-color);}
.white .sitemapMenu{filter: invert(1);}
.white .mobileMenu{filter: invert(1);}
.white .sitemap .logoBox{filter: invert(1);}
.white .sitemap .gnbBox .gnb_ul .mn_l1 .mn_a1 span{color:#fff;}
.white .gnbMobile .logoBox{filter: invert(1);}
.white .gnbMobile .gnbBox .gnb_ul .mn_l1 .mn_a1 span{color:#fff;}
.white .pageTop .topBtn{ filter: invert(1);}

.white #header{ background-color: rgba(255, 255, 255, 0.15);  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);} 
.black #header{ background-color: rgba(0, 0, 0, 0.15);  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);}