/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; font-size: .9rem;}
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}
button {font-family: 'Pretendard', 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';}

/********************************************************
■ 헤더변경
********************************************************/


#header .header-inn {width:1720px;margin:0 auto;position:relative;display:flex;justify-content:space-between;}

/*헤더 상단 영역*/
#header .header-top {background: linear-gradient(to right, #B0ABBC 0%, #AFACBD 23%, #C9A5BB 50%, #B6ACC2 76%, #87C3CE 100%);height:3rem;display:flex;align-items: center;justify-content: center;font-size:1rem;color:#fff;text-align:center;}



#header {z-index:999;position:relative; }
/*헤더 왼쪽영역*/
#header .header-inn .header-left{display:flex;align-items: center;}
#header .header-inn #nav ul{display:flex;margin-left:2.5rem;}
#header .header-inn #nav ul > li{padding:0 1.425rem;}
#header .header-inn #nav ul > li:first-child{padding-left:0;}
#header .header-inn #nav ul > li:last-child {padding-right:0;}
#header .header-inn #nav ul > li > div > a {font-size:.9rem;color:#333;font-weight:600;position:relative;}
#header .header-inn #nav ul > li > div > a:after{content:'';display:block;position:absolute;width:100%;height:2px;left:0;bottom:-5px;background:#603D82;opacity:0;}
#header .header-inn #nav ul > li > div > a:hover{color:#603D82;font-weight:700;}
#header .header-inn #nav ul > li > div > a:hover:after{opacity: 1;}



/*헤더 오른쪽영역*/
#header .header-inn .header-right{display:flex;align-items: center;}
#header .header-inn .header-right a.link-btn {background:#000;color:#fff;width:5rem;height:2rem;display:flex;align-items: center;justify-content: center;border-radius:100px;z-index: 9999;}
#header .header-inn .header-right a.link-btn .link-box {display: flex;align-items: center;overflow: hidden;position: relative;}
#header .header-inn .header-right a.link-btn .link-box span {display:flex;align-items:center;transition: all .2s;  transform: translateY(0) rotate(0.00001deg);    --animation-bounce: 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);font-size:0.8rem;font-weight:500;}
#header .header-inn .header-right a.link-btn .link-box span.duplicate {position: absolute;transform: translateY(100%) rotate(0.00001deg);     transition: all .2s;}
#header .header-inn .header-right a.link-btn .link-box span img{margin-left:0.5rem;}
#header .header-inn .header-right a.link-btn:hover .link-box span {    transform: translateY(-100%) rotate(0.0001deg);}
#header .header-inn .header-right a.link-btn:hover .link-box span.duplicate {    transform: translateY(0) rotate(0.0001deg);}

#header .header-inn .header-right a.write-btn {width:6rem;height:2.25rem;}
#header .header-inn .header-right a.login-btn{display:inline-block;width:1.25rem;height:1.4rem;background:url(/images/default/main/login-icon.svg)no-repeat center center;background-size:cover;margin-left:1.3rem;border-radius:0;}


#header.open .header-inn .header-right a.write-btn {opacity:0;}
#header.open .header-inn .header-right a.login-btn{opacity:0;}

.sign-up-btn {display:flex;gap:0.5rem;margin-top:-2.5rem;}
.sign-up-btn img{width:1rem;}

/*로그인 후 헤더 오른쪽 영역*/
#header .header-inn .header-right a.link-btn-login {z-index:0;}





/*사이트맵 버튼*/
#header .btn-gnb-menu{ margin-left:2rem;height:4rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}
#header .btnAll {position:relative; display:block; width:1.6rem; height:1.4rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #181818; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 0.42rem; right:0;}
#header .btnAll > span:nth-child(3) { top: 0.84rem; right:0;}
#header .btnAll > span:nth-child(4) { top: 1.26rem; right:0;}
#header.open .btnAll > span{}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(3) { top: 0; opacity: 0; width: 1.5rem;}
#header.open .btnAll > span:nth-child(4) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;}


/*전체메뉴 펼쳐짐*/

#header #navi{position: fixed;right:-29.35rem;top:0;width:29.35rem;background:#fff;z-index:20;padding:7rem 4rem 0 4rem;height:100%;transition-duration: 0.5s;}
#header #navi .mbtop li {height:5rem;display:flex;align-items: center;}
#header #navi .mbtop li a{color:#000;font-size:1.5rem;font-weight:600;}

/*전체메뉴 클릭했을경우 */
#header.open .bg_box {position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.4);top:0;left:0;}
#header.open #navi {right:0;transition-duration: 0.5s;}
#header #navi .link-box{}

#header #navi a.link-btn {background:#000;color:#fff;width:5rem;height:2rem;display:flex;align-items: center;justify-content: center;border-radius:100px;z-index: 9999;margin-top:1.1rem;}
#header #navi a.link-btn .link-box {display: flex;align-items: center;overflow: hidden;position: relative;}
#header #navi a.link-btn .link-box span {transition: all .2s;  transform: translateY(0) rotate(0.00001deg);    --animation-bounce: 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);font-size:1rem;font-weight:500;}
#header #navi a.link-btn .link-box span.duplicate {position: absolute;transform: translateY(100%) rotate(0.00001deg);     transition: all .2s;}
#header #navi a.link-btn .link-box span img{margin-left:0.5rem;vertical-align: middle;}
#header #navi a.link-btn:hover .link-box span {    transform: translateY(-100%) rotate(0.0001deg);}
#header #navi a.link-btn:hover .link-box span.duplicate {    transform: translateY(0) rotate(0.0001deg);}

#header #navi a.write-btn {width:9rem;height:3rem;font-size:1rem;}


/* 1720px보다 클 때 적용될 스타일 */
@media (min-width: 1921px) {
	#header .header-inn{width:100%;padding:0 1rem;}
}

@media (max-width:1720px){
	#header .header-inn{width:100%;padding:0 1rem;}
}
@media (max-width:1030px){
	#header #nav {display:none;}
	#header #navi{width:80%;right:-80%;}
	#header #navi .mbtop li{padding:0;}
	#header #navi{padding:7rem 1rem 0 2rem;}

}
@media (max-width:500px) {
	#header .header-inn .header-right a.write-btn {display:none;}
	#header .header-inn .header-right a.login-btn{display:none;}
	#header.open .header-inn .header-right a.login-btn{opacity:1;display:block;}
}

/*로그인 이후 전체메뉴*/
#header .login-after .profile{display:flex;align-items: center;}
#header .login-after .profile .profile-img {width:3rem;height:3rem;position:relative;}
#header .login-after .profile .profile-img img{position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);}
#header .login-after .profile p{font-size:.8rem;color:#333;padding-left:0.5rem;}
#header .login-after .tab_2ul{flex-wrap:wrap;display:flex;border-top:1px solid #603D82;border-bottom:1px solid  #603D82;margin-top:1.25rem;}
#header .login-after .tab_2ul li{height:auto;display:block;width:calc(100% / 3);border-right:1px solid #603D82;text-align:center;}
#header .login-after .tab_2ul li a {font-size:.8rem;color:#603D82;text-align:center;padding:1.25rem 2rem;display:flex;width:100%;height:100%;position:relative; flex-direction:column;
	align-items: center;justify-content: center;gap:0.4rem;}
#header .login-after .tab_2ul li a:before{content:'';display:block;width:1.75rem;height:1.75rem;background:#603D82;border-radius:50%;}
#header .login-after .tab_2ul li:nth-child(1),
#header .login-after .tab_2ul li:nth-child(2),
#header .login-after .tab_2ul li:nth-child(3) {border-bottom:1px solid #603D82;}
#header .login-after .tab_2ul li:nth-child(3n) {border-right:none;}
#header #navi:has(.login-after ) {padding:3.75rem 4rem 0 4rem;}

#header .login-after .tab_2ul li:first-child a:before{background:#603D82 url(/images/default/content/tab_2ul-icon01.svg)no-repeat center center;}
#header .login-after .tab_2ul li:nth-child(2) a:before{background:#603D82 url(/images/default/content/tab_2ul-icon02.svg)no-repeat center center;}
#header .login-after .tab_2ul li:nth-child(3) a:before{background:#603D82 url(/images/default/content/tab_2ul-icon03.svg)no-repeat center center;}
#header .login-after .tab_2ul li:nth-child(4) a:before{background:#603D82 url(/images/default/content/tab_2ul-icon04.svg)no-repeat center center;}
#header .login-after .tab_2ul li:nth-child(5) a:before{background:#603D82 url(/images/default/content/tab_2ul-icon05.svg)no-repeat center center;}
#header .login-after .tab_2ul li:nth-child(6) a:before{background:#603D82 url(/images/default/content/tab_2ul-icon06.svg)no-repeat center center;}

#header .log-btn {position:absolute;right:4rem;bottom:3rem;font-size:.8rem;color:#333;border-bottom:1px solid #333;}

@media (max-width:1030px) {
	#header #navi:has(.login-after ) {padding:3.75rem 1rem 0 1rem;}
	#header .log-btn{right:1rem ;bottom:2rem;}
	#header .login-after .tab_2ul li a{padding:1rem;}
	#header .login-after .tab_2ul li a:before{background-size:90% !important;}
}

/************footer************/
#footer{background:#000000;padding:3rem 0;}
#footer .footer-inn{width:1720px;margin:0 auto;}
#footer .footer-inn .footer-top{display:flex;justify-content: space-between;border-bottom:1px solid #555;padding-bottom:0.9rem;}
#footer .footer-inn .footer-top ul {display:flex;}
#footer .footer-inn .footer-top ul li{padding:0 0.75rem;position:relative;}
#footer .footer-inn .footer-top ul li:after{content:'';display:block;position:absolute;width:4px;height:4px;background:#959595;border-radius:50%;right:0;top:50%;transform:translate(50%,-50%);}
#footer .footer-inn .footer-top ul li:last-child:after{display:none;}
#footer .footer-inn .footer-top ul li a{color:#959595;font-size:0.8rem;}
#footer .footer-inn .footer-top ul li a b{color:#fff;font-weight:600;}
#footer .footer-inn .footer-top ul li:first-child{padding-left:0;}
#footer .footer-inn .footer-top ul li:last-child{padding-right:0;}
#footer .footer-inn .footer-bottom {padding-top:1.4rem;display:flex;justify-content: space-between}
#footer .footer-inn .footer-bottom .bottom-left ul li {font-size:0.7rem;color:#959595;}
#footer .footer-inn .footer-bottom .bottom-left  ul li span{color:#fff;font-weight:400;}
#footer .footer-inn .footer-bottom .bottom-left ul li em {padding:0 5px;}
#footer .footer-inn .footer-bottom p.copy {color:#555;font-size:0.8rem;margin-top:2.5rem;}
#footer .footer-inn .footer-bottom  .bottom-left ul li:not(:last-child) {margin-bottom:1rem;}

#footer .footer-inn .footer-bottom .bottom-right ul.sns-list{display:flex;gap:0.5rem;}
#footer .footer-inn .footer-bottom .bottom-right ul.sns-list li a{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid #fff;display:flex;align-items: center;justify-content: center;}
#footer .footer-inn .footer-bottom .bottom-right ul.sns-list li a img{width:0.85rem;}
#footer .footer-inn .footer-bottom .bottom-right ul.sns-list li:nth-child(4) a img{width:0.35rem;}

.more-btn {background:#000;color:#fff;width:7rem;height:2.5rem;display:flex;align-items: center;justify-content: center;border-radius:100px;z-index: 9999;margin:0 auto;margin-top:2.5rem;cursor:pointer;}
.more-btn .link-box {display: flex;align-items: center;overflow: hidden;position: relative;width:100%;text-align:center;width:100%;}
.more-btn .link-box span {color:#fff;transition: all .2s;  transform: translateY(0) rotate(0.00001deg);--animation-bounce: 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);font-size:0.8rem;font-weight:500;width:100%;text-align:center;height:100%;line-height:2.5rem;}
.more-btn .link-box span.duplicate {position: absolute;transform: translateY(100%) rotate(0.00001deg);     transition: all .2s;}
.more-btn:hover .link-box span {transform: translateY(-100%) rotate(0.0001deg);}
.more-btn:hover .link-box span.duplicate {transform: translateY(0) rotate(0.0001deg);}

.top-btn {width:2.25rem;height:2.25rem;border-radius:50%;background:url(/images/default/main/top.svg)no-repeat center center;background-size:cover;position:fixed;right:1rem;bottom:3rem;z-index:1;cursor:pointer;}

/********************************************************
■ 레이아웃 변경
********************************************************/
@media (max-width:1720px){
	#footer .footer-inn{width:100%;padding:0 1rem;}
	#footer .footer-inn .footer-bottom ul li:not(:last-child){margin-bottom:0.5rem;}
}



/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
	body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;}

	#footer .footer-inn .footer-bottom ul li {line-height:1.4;}

}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html,body,#wrap{height:auto;}
	html{font-size:15px;}
	body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}
	#header .header-inn .header-left h1 img,
	#footer .footer-inn .footer-top h1 img {height:1.2rem;}
	#footer .footer-inn .footer-bottom{display:block;}
	#footer .footer-inn .footer-bottom .bottom-right ul.sns-list{margin-top:1rem;}
}

@media (max-width:600px){
	#footer .footer-inn .footer-top{display:block;}
	#footer .footer-inn .footer-top ul{margin-top:1rem;}
}
@media (max-width:500px) {
	#header .header-top {font-size:0.9rem;}
}



/*멤버 헤더*/
.member-header {text-align: center;margin-bottom:6.65rem;}


/*구슬 상태값 */
.bead {font-size:12px;padding-left:21px;position:relative;line-height:18px;margin-bottom:8px;}
.bead:before{content:'';position:absolute;width:18px;height:18px;left:0;top:0;}

.bead01:before{background:url(/images/default/main/bead01.svg)no-repeat center center;background-size:cover;}
.bead02:before{background:url(/images/default/main/bead02.svg)no-repeat center center;background-size:cover;}
.bead03:before{background:url(/images/default/main/bead03.svg)no-repeat center center;background-size:cover;}
.bead04:before{background:url(/images/default/main/bead04.svg)no-repeat center center;background-size:cover;}
.bead05:before{background:url(/images/default/main/bead05.svg)no-repeat center center;background-size:cover;}
.bead06:before{background:url(/images/default/main/bead06.svg)no-repeat center center;background-size:cover;}
.bead07:before{background:url(/images/default/main/bead07.svg)no-repeat center center;background-size:cover;}
.bead08:before{background:url(/images/default/main/bead08.svg)no-repeat center center;background-size:cover;}
.bead09:before{background:url(/images/default/main/bead09.svg)no-repeat center center;background-size:cover;}
.bead10:before{background:url(/images/default/main/bead10.svg)no-repeat center center;background-size:cover;}



.bead-joy:before{background:url(/images/default/main/bead01.svg)no-repeat center center;background-size:cover;}
.bead-sad:before{background:url(/images/default/main/bead02.svg)no-repeat center center;background-size:cover;}
.bead-angry:before{background:url(/images/default/main/bead03.svg)no-repeat center center;background-size:cover;}
.bead-irritated:before{background:url(/images/default/main/bead04.svg)no-repeat center center;background-size:cover;}
.bead-anxious:before{background:url(/images/default/main/bead05.svg)no-repeat center center;background-size:cover;}
.bead-scared:before{background:url(/images/default/main/bead06.svg)no-repeat center center;background-size:cover;}
.bead-warm:before{background:url(/images/default/main/bead07.svg)no-repeat center center;background-size:cover;}
.bead-love:before{background:url(/images/default/main/bead08.svg)no-repeat center center;background-size:cover;}
.bead-memory:before{background:url(/images/default/main/bead09.svg)no-repeat center center;background-size:cover;}
.bead-blank:before{background:url(/images/default/main/bead10.svg)no-repeat center center;background-size:cover;}