/* header */
#header .sns{ position: absolute; top: 50%; right: 60px; transform: translateY(-50%); margin-right: 0; opacity: 0; transition: opacity 0.5s; pointer-events: none; }

#header .shop{ background: #fff; border: 1px solid #fff; border-radius: 99px; padding: 3px; transition: border 0.5s 0.3s, opacity 0.5s; }
#header .shop a{ display: flex; align-items: center; }
#header .shop .icon{ width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; padding: 7px; }
#header .shop span{ display: inline-block; font-size: 1.8rem; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1; padding-left: 8px; padding-right: 13px; }

#header .login{ position: relative; }
#header .login button{ background: none; border: none; font-family: var(--baseFont); font-size: 1.8rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; padding: 20px; transition: color 0.5s 0.3s, opacity 0.5s; }
#header .login .depth02{ width: max-content; left: 50%; transform: translateX(-50%); }
#header .login .depth02 > li > button{ padding: 15px; }

/* header - scroll */
#header.scroll .shop{ border: 1px solid #DDD; transition-delay: unset; }
#header.scroll .login button{ color: #111; transition-delay: unset; }

/* header - hover */
#header.hover .shop{ border: 1px solid #DDD; transition-delay: unset; }
#header.hover .login button{ color: #111; transition-delay: unset; }

@media screen and (max-width: 1600px){
	#header .depth01 > li > a{ width: 160px; }
	#header .depth02 > li > a{ padding: 17px 10px; }

	#header .shop .icon{ width: 30px; height: 30px; }
	#header .shop span{ font-size: 1.7rem; }
	#header .login button{ font-size: 1.7rem; }
}

@media screen and (max-width: 1280px){
	#header .shop span{ font-size: 1.6rem; padding-left: 5px; padding-right: 10px; }

	#header .login button{ font-size: 1.6rem; padding: 15px; }
	#header .login .depth02 > li > button{ padding: 10px; }
}

@media screen and (max-width: 900px){
	#header .logo img{ height: 40px; }

	#header .shop .icon{ width: 25px; height: 25px; }
	#header .shop span{ font-size: 1.5rem; padding-left: 5px; padding-right: 8px; }
	#header .menu{ padding: 15px; margin-right: -15px; }  
}


/* body - open */
body.open #header .sns{ opacity: 1; pointer-events: auto; }
body.open #header .shop{ opacity: 0; pointer-events: none; }
body.open #header .login{ opacity: 0; pointer-events: none; }