@charset "utf-8";

:root {
	--black: #111111;
	/* --mainColor: #BF3475; */
	--mainColor: #F885BB;
}

#wrap {width: 100%; min-width: 320px; font-size: 18px;} button {font-size: 1em;} a {color: var(--black);}
body, select, input,textarea, button {color: var(--black); font-family: 'pretendard', sans-serif; word-break: keep-all; letter-spacing: -.3px;}
input, textarea {background: transparent; border:none; outline: none; color: #fff; font-size: 1em;}
input:placeholder, textarea:placeholder {color: rgba(255, 255, 255, .6);}
.sec {position: relative;}
.inner {max-width: 1680px; padding: 0 30px; margin: 0 auto; width: 100%; box-sizing: border-box;}
body::-webkit-scrollbar {width: 0;}
.awFont {font-family: 'AW-Conqueror-Didot', serif;}


@keyframes spanTextUpMainColor {6% {transform: none;} 10% {transform: translateY(-2px); color: var(--mainColor);} 14% {transform: none;}  100% {transform: none;}}
@keyframes spanTextUp {0% {transform: translateY(10%);} 10% {transform: translateY(-10%);} 20%, 100% {transform: none;}}
@keyframes spanTextUp2 {10% {transform: rotateX(90deg);} 20%, 100% {transform: none;}}
@keyframes opacityMove {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes upMove {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downMove {0% {transform: translateY(-100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove100 {0% {transform: translateY(100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upMove2 {0% {transform: translateY(20px); opacity: 0;} 50% {transform: translateY(-10px);} 100% {transform: none; opacity: 1;}}
@keyframes leftMove {0% {transform: translateX(-20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes leftTranslateYMove  {0% {transform: translateX(-20px) translateY(-50%); opacity: 0;} 100% {transform: translateY(-50%); opacity: 1;}}
@keyframes rightMove {0% {transform: translateX(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes scaleMove {0% {transform: scale(.8); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes scaleZoomMove {0% {transform: scale(1.1);} 100% {transform: none;}}
@keyframes widthMove {0% {width: 0;} 100% {width: 100%;}}
@keyframes heightMove {0% {height: 0;} 100% {height: 100%;}}
@keyframes moveToZero {to {transform: translateX(0%); opacity: 1;}}


header {position: relative; position: fixed; top: 0; left: 0; width: 100%; z-index: 90;  animation: downMove 1s ease both;}
header .h-inner {transition: .5s cubic-bezier(0.33, -0.01, 0.2, 1); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.35em; padding: 1.35em 3%; background: linear-gradient(180deg, rgba(17, 17, 17, 0.80) 0%, rgba(17, 17, 17, 0.00) 100%);}
header .h-inner a {color: #fff;}
header .h-inner h1 a {font-size: 1.1em; display: flex; gap: .3em;}
header .h-inner h1 a span {font-weight: 200;}
header .h-inner nav {position: relative;}
header .h-inner nav ul {display: flex; position: relative; z-index: 1;}
header .h-inner nav ul a {font-size: .9em; padding: .5em .9em;}
header .h-inner nav .bg {position: absolute; left: -10%; height: 100%; border-radius: 25px; background: rgb(191, 52, 117); top: 50%; transform: translateY(-50%); transition: .5s cubic-bezier(0.33, -0.01, 0.2, 1); opacity: 0;}

footer {background: var(--black); color: #ddd;}
footer a {color: #fff;}
footer .inner {padding-top: 2.2em; padding-bottom: 2.2em; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2em;}
footer .logo {font-size: 1.8em; display: flex; gap: .3em;}
footer .logo p {font-weight: 200}
footer .left {display: flex; flex-direction: column; gap: 3.5em;}
footer .left address ul {display: flex; flex-direction: column; gap: .9em}
footer .left address ul li {display: flex; flex-wrap: wrap; gap: 1.1em;}
footer .left address ul li a {color: #ddd; position: relative;}
footer .left address ul li a:after {content: ""; position: absolute; width: 0; left: 0; bottom: 0; height: 30%; background: rgba(255, 255, 255, .2); transition: .3s ease;}
footer .right {text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .3em; height: auto;}
footer .right .snsBox {display: flex; gap: 1.1em;}
footer .right .snsBox .icon {width: 3em; height: 3em; border-radius: 1.1em; overflow: hidden;}
footer .right .snsBox .kakao .icon {background: url(../../images/sns_kakao.svg) no-repeat center / contain;}
footer .right .snsBox .insta .icon {background: url(../../images/sns_insta.svg) no-repeat center / contain;}
footer .right .tel {margin-bottom: .7em;}
footer .right .tel span {font-weight: 700; font-size: 2.2em;}


@media screen and (min-width: 1025px) {
	footer .left address ul li a:hover:after {width: 100%;}
}
@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1200px) {
	#wrap {font-size: 17px;}
	footer {font-size: .9em;}
}

@media screen and (max-width: 1024px) {
	footer .inner {gap: 3em; flex-direction: column;}
	footer .right {text-align: left; align-items: flex-start; gap: 1.5em;}
	footer .right .snsBox .icon {width: 2.5em; height: 2.5em;}
}

@media screen and (max-width: 768px) {
	#wrap {font-size: 16px;}
	header .h-inner nav {display: none;}
}
@media screen and (max-width: 640px) {
}

@media screen and (max-width: 480px) {
	#wrap {font-size: 15px;}
	.inner {padding-left: 20px; padding-right: 20px;}
}

@media screen and (max-width: 360px) {
	#wrap {font-size: 14px;}
	header .h-inner nav ul a {padding: .5em;}
}