/********************************************************************************************************************************************************************
	HEADER
********************************************************************************************************************************************************************/

#header {border-bottom:1px solid #e1e1e1;}
#header .header-inner {height:70px; display:flex; align-items:center; position:relative;}
#header .header-inner h1.logo a {display:block;}
#header .header-inner h1.logo a img {vertical-align:middle;}

#header .header-inner .nav.pcVer {height:100%; margin-left:20px;}
#header .header-inner .nav.pcVer .gnb {height:100%; display:flex;}
#header .header-inner .nav.pcVer .gnb li {position:relative;}
#header .header-inner .nav.pcVer .gnb > li.on > a {color: var(--primary);}
#header .header-inner .nav.pcVer .gnb >  li > a {display:flex; align-items:center; height:100%; color:#4a4a4a; padding:0 18px; font-size:1.125rem; font-weight:600;}
#header .header-inner .nav.pcVer .gnb >  li > a.active {color: var(--primary);}

#header .header-inner .nav.pcVer .nav-dropdown {position:absolute; top:100%; transform:translateX(-50%); left:50%; width:140px; padding:6px 0; background:#fff; box-shadow: 8px 5px 8px 1px rgba(0,10,18,.1), 0 0 0 1px rgba(0,10,18,.1); display:none; z-index:2;}
#header .header-inner .nav.pcVer .nav-dropdown.active {top:100%; opacity:1; display:block;}
#header .header-inner .nav.pcVer .nav-dropdown:before {content:""; display:block; width:18px; height:14px; background:url("/images/common/polygon.png")no-repeat; position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:1;}
#header .header-inner .nav.pcVer .nav-dropdown li {margin:6px 0;}
#header .header-inner .nav.pcVer .nav-dropdown li a {display:block; padding:6px 16px; width:100%; text-align:center; color:#666;}
#header .header-inner .nav.pcVer .nav-dropdown li a.active {color: var(--primary);}
#header .header-inner .nav.pcVer .nav-dropdown li a:hover {font-weight:600;}


#header .header-inner .user-menu {display:flex; position:absolute; right:0;}
#header .header-inner .user-menu li {position:relative;}
#header .header-inner .user-menu li a {display:block; padding:0 12px; font-weight:600;}
#header .header-inner .user-menu li:not(:last-child):before {content:""; display:block; width:1px; height:0.875rem; border-right:1px solid #ddd; position:absolute; top:50%; transform:translateY(-50%); right:0;}

#header .header-inner .user-menu li .total-menu {cursor:pointer;}
#header .header-inner .user-menu li .total-menu span {display:inline-block; padding:0 12px; position:relative; color:#222; font-weight:600;}

#header .header-inner .user-menu li .total-menu span:hover {color: var(--primary);}
#header .header-inner .user-menu li .total-menu span:first-child:after {content:""; display:block; width:1px; height:0.875rem; border-right:1px solid #ddd; position:absolute; top:50%; transform:translateY(-50%); right:-2px;}






.signUp-modal {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999992; max-width:440px; width:100%; background:#fff; border-radius:6px; padding:24px 42px 60px; box-sizing:border-box; display:none;}
.signUp-modal i {position:absolute; top:12px; right:12px; display:flex; justify-content:flex-end; font-size:1.5rem; cursor:pointer;}
.signUp-modal .inner-logo {width:156px; margin:24px 0;}

.signUp-modal .kakaoBtn {display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border-radius:4px; background:#FEE500; color:#2E2E2E; font-weight:600; margin-top:60px;}


/*모바일메뉴*/
#header nav.moVer {display:none;}
#header nav.moVer .gnb {height:100%; display:flex; justify-content: space-around; transition:.2s; background:#fff; width: 95%;margin: 0 auto;gap: 1rem;overflow-x:scroll;padding:10px 0}
/*#header nav.moVer .gnb.on {height:90px;}*/
/*#header nav.moVer .gnb li {position:relative;}*/
#header nav.moVer .gnb > li.on > a {color: var(--primary);}
#header nav.moVer .gnb >  li > a {display:flex; align-items:center; /*height:100%; */ height:40px; color:#4a4a4a; font-size:1.125rem; font-weight:600;}
#header nav.moVer .gnb >  li > a.active {color: var(--primary);}
#header nav.moVer .nav-dropdown {width:100%; height:40px; position:absolute; /*top:50px;*/ left:0; z-index:10; background:#F8F9FB; display:none;}
#header nav.moVer .nav-dropdown li {display:inline-block; height:100%; line-height:40px; margin:0 12px; box-sizing:border-box;}
#header nav.moVer .nav-dropdown li:first-child {margin-left:40%;}
#header nav.moVer .nav-dropdown li a {display:block; width:100%; height:100%;}
#header nav.moVer .nav-dropdown li a.active {color: var(--primary);}
/********************************************************************************************************************************************************************
	FOOTER
********************************************************************************************************************************************************************/
/*.floatingQuick {position:fixed; bottom:20px; right:20px;}*/

#footer {border-top:1px solid #ddd; padding:20px 0 64px;}

#footer .foot-top {display:flex; align-items:center; justify-content:space-between;}
#footer .foot-top .foot-left {display:flex; align-items:center;}
#footer .foot-top .foot-left .foot-logo img {vertical-align:middle;}
#footer .foot-top .foot-left .foot-member {display:flex; margin-left:48px; color:var(--gry1);}
#footer .foot-top .foot-left .foot-member li:not(:last-child) {margin-right:32px;}

#footer .foot-top .foot-sns {display:flex;}
#footer .foot-top .foot-sns a {opacity:0.3; display:block; width:28px;}
#footer .foot-top .foot-sns a img {vertical-align:middle;}
#footer .foot-top .foot-sns a:hover {opacity:0.5; transition:.2s;}
#footer .foot-top .foot-sns a:not(:last-child) {margin-right:24px;}

#footer .foot-info{display:flex; justify-content:space-between; margin-top:20px; padding-top:24px; border-top:1px solid #e1e1e1;}

#footer .foot-info .txt-copy {width:calc(100% - 263px);}
#footer .foot-info .txt-copy .txt-row {display:flex; align-items:center; margin:4px 0;}
#footer .foot-info .txt-copy .txt-row p {font-size:0.875rem; color:var(--gry1);}
#footer .foot-info .txt-copy .txt-row p:not(:last-child):after {content:""; display:inline-block; width:1px; height:0.875rem; border-right:1px solid #aaa; margin:0 8px; vertical-align:middle;}
#footer .foot-info .form-btn {display:flex; align-items:center; justify-content:center; width:263px; height:54px; line-height:54px; font-size:1.25rem; color:#fff; background:var(--primary); border:1px solid var(--primary); border-radius:4px;}
#footer .foot-info .form-btn span {margin-right:8px;}
#footer .foot-info .form-btn:hover {background:#fff; color:var(--primary); transition:.2s;}

#footer .foot-copy {font-size:0.875rem; color:#999; margin-top:24px;}

.user-thumbnail:not(.notClick) {
	cursor: pointer;
}

.productBy {
	color: #ddd;
	font-size: 0.75rem;
	margin-left: 4px;
}

/********************************************************************************************************************************************************************
	MAIN SLIDER
********************************************************************************************************************************************************************/
.slide-banner {position:relative; width:100%; overflow:hidden;}
.slide-banner .swiper-slide {height:100%;}
.slide-banner .swiper-controller {position:absolute; left:50%; transform:translateX(-50%); bottom:20px; z-index:10; display:flex; align-items:center; justify-content: space-between; padding:0.3rem 0.7rem 0.3rem 1rem; background-color: rgba(0,0,0,.3); gap: 10px; border-radius:20px;}
.slide-banner .swiper-pagination {position:static; top:50%; bottom:0; color: #fff; font-size:0.875rem; margin-right:6px;}
.slide-banner .swiper-btn {display:flex; align-items:center; color:#fff; cursor: pointer;}
.slide-banner .swiper-stop i {font-size:0.875rem;}

.slide-banner.moVer {display:none;}


/********************************************************************************************************************************************************************
	MAIN 
********************************************************************************************************************************************************************/
.club-review {padding:48px 0 34px;}
.title-area {display:flex; justify-content:space-between; align-items:center;}
.title-area h2 {font-size:1.75rem; font-weight:700; color:var(--blk1);}
.title-area h2 span {display:inline-block; width:1.5rem; height:1.5rem; vertical-align:middle; margin-right:12px;}
.title-area h2.h2-1 span {background:url("/images/common/emoji_pencil.svg")no-repeat center center / cover;}
.title-area h2.h2-2 span {background:url("/images/common/emoji_search.svg")no-repeat center center / cover;}


.title-area .list-more-btn {display:flex; align-items:center; font-weight:600; color:var(--gry1);}
.title-area .list-more-btn span {font-size:1.375rem;}

.club-list {padding:34px 0 120px;}
.club-list .list-tab {display:flex;}
.club-list .list-tab li {width:50%; padding:12px 0; font-size:1.125rem; text-align:center; color:var(--blk1); border:1px solid var(--primary); cursor:pointer;}
.club-list .list-tab li.active {background:var(--primary); color:#fff;}

.club-list .list-tab li:first-child {border-radius:4px 0 0 4px;}
.club-list .list-tab li:last-child {border-radius:0 4px 4px 0;}

.club-list .list-tab-content {padding:20px 0;}



/********************************************************************************************************************************************************************
	메인리뷰
********************************************************************************************************************************************************************/
.review-cont {position:relative;}
.review-cont .review-slide {padding:20px; overflow:hidden;}
.review-cont .review-slide .review-box {padding:32px 24px 24px; border-radius:12px; box-shadow:0px 1px 20px rgba(9,15,22,.1); cursor:pointer; min-height:306px;}

/*슬라이드 버튼 커스텀*/
.review-cont .swiper-prev, .review-cont .swiper-next {position:absolute; top:50%; transform:translateY(-50%); z-index:10; display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50px; background-color:#fff; box-shadow:1px 1px 6px rgba(0,0,0,0.1); cursor:pointer;}
.review-cont .swiper-prev span, .review-cont .swiper-next span {font-size:1.25rem;}
.review-cont .swiper-prev {left:-44px; }
.review-cont .swiper-next {right:-44px;}
/**/

.user-info {display:flex; border-bottom:1px solid #ddd; padding-bottom:16px;}
.user-info .user-profile {width:100%; padding-left:20px;}
.user-info .user-thumbnail {width:60px; height:60px; border-radius:50%;flex: 0 0 auto}
.user-profile .user {display:flex; margin-bottom:8px;}
.user-profile .user .name {font-size:1.125rem; font-weight:700; color:var(--blk2);}
/*.user-profile .user .name:after {content:""; display:inline-block; width:1px; height:1rem; border-right:1px solid #ddd; margin:0 8px; vertical-align:middle;}*/
.user-info .user-profile .user .age {font-size:1.125rem; color:var(--gry1);}
.user-profile .user .age:before,
.user-profile .user .age:after {content:""; display:inline-block; width:1px; height:1rem; border-right:1px solid #ddd; margin:0 8px; vertical-align:middle;}
.user-profile .user-job {font-weight:600; color:var(--blk2); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

.review-box .issue-date {margin:8px 0 24px; font-size:0.875rem; color:var(--gry2); text-align:right;}
.review-box .post {display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; color:#666; word-break:initial;}

/* 퀵배너 */

.fixBtnWrap {
	position: fixed;
	width:55px;
	right: 2%;
	bottom:5%;
	z-index: 30;
}

.fixBtnWrap .mediaWrap .mediaToggle {
	width: 100%;
	box-sizing: border-box;
}

.fixBtnWrap .mediaWrap .mediaToggle li {
	position:relative;
	width:55px;
	height:55px;
	background: url("/images/common/k_icon.png") #fde500;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: inherit;
	cursor: pointer;
	border-radius:50%;
	box-shadow: 0px 0px 20px 0px rgba(9, 15, 22, 0.10);
	border:1px solid #e1e1e1;
	box-sizing:border-box;
}

.fixBtnWrap .mediaWrap .mediaToggle li:before {
	content: "톡상담";
	width: 0;
	height: 55px;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 25px;
	z-index: -99;
	transition: all 0.3s;
	overflow: hidden;
	font-weight: 800;
	font-size: 1.125rem;
	background: #fde500;
	color: #333;
	border-radius: 55px 0 0 55px;
}

.fixBtnWrap .mediaWrap .mediaToggle li:hover:before {
	width: 100px;
	background:#fff;
	padding-left: 20px;
	box-shadow: 0px 0px 20px 0px rgba(9, 15, 22, 0.10);
	border:1px solid #e1e1e1;
	box-sizing:border-box;
}

.fixBtnWrap .mediaWrap .mediaToggle li > a {
	display:block;
	width:100%;
	height:100%;
}

.fixBtnWrap .mediaWrap .mediaToggle .goTop {
	display:flex;
	align-items:center;
	justify-content:center;
	width:55px;
	height:55px;
	background:#fff;
	box-shadow: 0px 0px 20px 0px rgba(9, 15, 22, 0.10);
	border:1px solid #e1e1e1;
	box-sizing:border-box;
	border-radius:50%;
	margin-top:8px;
	cursor:pointer;
}

.fixBtnWrap .mediaWrap .mediaToggle .goTop i {
	font-size:1.5rem;
	color:#878787;
	margin-top:-2px;
}

.fixBtnWrap .mediaWrap .mediaToggle .goWrite {
	display:flex;
	align-items:center;
	justify-content:center;
	width:55px;
	height:55px;
	background:#e6367f;
	box-shadow: 0px 0px 20px 0px rgba(9, 15, 22, 0.10);
	border:1px solid #e1e1e1;
	box-sizing:border-box;
	border-radius:50%;
	margin-bottom:8px;
	cursor:pointer;
}

.fixBtnWrap .mediaWrap .mediaToggle .goWrite i {
	font-size:1.5rem;
	color:#fff;
	margin-top:-2px;
}

@media (max-width:540px){
	.fixBtnWrap {width:55px;}
	.fixBtnWrap .mediaWrap .mediaToggle li, .fixBtnWrap .mediaWrap .mediaToggle .goTop{width:55px; height:55px;}
	.fixBtnWrap .mediaWrap .mediaToggle li, .fixBtnWrap .mediaWrap .mediaToggle .goWrite{width:55px; height:55px;}
	.fixBtnWrap .mediaWrap .mediaToggle li {background-size:24px;}
}


.club-list {
	padding: 34px 0;
}
.club-review {
	margin-bottom: 130px;
}
.hover-effect {
	position: relative;
	transition: all 0.3s ease;
	padding: 8px 16px;
}

.hover-effect::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 50%;
	background-color: #e63e7f;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.hover-effect:hover::after {
	width: calc(100% - 32px); /* padding 값을 고려한 너비 */
}

.animate-arrow {
	transition: transform 0.3s ease;
}

.hover-effect:hover .animate-arrow {
	transform: translateX(8px);
}

.hover-effect:hover {
	opacity: 0.7;
}

@media screen and (max-width: 480px) {
	.hover-effect {
		padding: 6px 12px;
	}
	.hover-effect:hover::after {
		width: calc(100% - 24px);
	}
}