/* Header 배너영역 */
#spobee_container .header-banner-container { width:100%; height: 490px; position: relative; background:url("../../../img/sub/community/community-bg.png") no-repeat center; background-size: cover; }
#spobee_container .header-banner-container .title {width:100%; height:330px; margin:0 auto; padding-top:167px; padding-bottom:167px; text-align: center;}
#spobee_container .header-banner-container .title .text-area {color: #fff;}
#spobee_container .header-banner-container .title .text-area p:nth-child(1) {font-size:1.4rem; letter-spacing: 0.86em; color: #b6b6b6; font-weight: lighter; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-left:9px;}
#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:4rem; letter-spacing: -0.02em; color: #fff;text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px;}

#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:2rem; letter-spacing: -0.025em; color: #fff; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px; font-weight: lighter; line-height:32px; margin:10px auto; width:600px;}

/* Header 2depth */
#spobee_container .header-banner-container .sub-gnb {position:absolute; bottom:0; left:0; width:100%; height:80px; border-top:1px solid rgba(255,255,255,0.25);}
#spobee_container .header-banner-container .sub-gnb ul {width:900px; margin:0 auto;}
#spobee_container .header-banner-container .sub-gnb ul li { position:relative; float:left; width:50%; height: 100%; line-height: 80px; font-size:1.8rem; letter-spacing: -0.025em; text-align: center;}
#spobee_container .header-banner-container .sub-gnb ul li:after {display: block; content: ""; width:0; height:1px; background:#2ea7e0; position:absolute; top:-1px; left:50%; transition: left 0.25s ease, width 0.25s ease;}
#spobee_container .header-banner-container .sub-gnb ul li:hover:after { width: 100%; left: 0%; }
#spobee_container .header-banner-container .sub-gnb ul li a {color: #e6e6e6;display: block; width:100%; height:100%;}
#spobee_container .header-banner-container .sub-gnb ul li a:hover, #spobee_container .header-banner-container .sub-gnb ul li a.select {color: #2ea7e0;}
#spobee_container .header-banner-container .sub-gnb ul li.select_top_line:before {display: block; content: ""; width:100%; height:1px; background:#2ea7e0; position:absolute; top:-1px; left:0;}
@media all and (max-width: 1100px)
{
	#spobee_container .header-banner-container .sub-gnb ul {width:100%;}
}
@media all and (max-width: 640px)
{
	#spobee_container .header-banner-container .title {padding: 167px 20px 0;}
	#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:1.8rem; width:85%;}
}
@media all and (max-width: 540px)
{
	#spobee_container .header-banner-container .title {padding: 160px 10px 0;}
	#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:3rem;}	
	#spobee_container .header-banner-container .title .text-area p:nth-child(3) {font-size:1.6rem;}
	#spobee_container .header-banner-container .sub-gnb ul li {font-size:1.5rem; letter-spacing: -0.05em;}
}

/* 영역 공통 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 1100px; margin: 0 auto; padding: 80px 0; position:relative;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { display: block; text-align: center; margin: 0 auto 40px; position: relative; padding: 10px; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4 {position:relative; font-size:2.7rem; letter-spacing: -0.015em;color:#222;padding:25px 0; margin:0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4:after {display:block;content:""; position:absolute; top:0; left:50%; margin-left:-15px;width:30px; height:3px; background:#2ea7e0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area  .title-area p {letter-spacing: -0.015em; font-size: 1.7rem; color: #939393; }
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 100%; padding: 80px 20px; }
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { width: 100%; padding: 15px; height: auto; }
}


/************** 단체 소개 ***************/ 
.contents-area-container {position: relative;}
.contents-area-container .background {position:absolute; top:0; left:0; width:100%; height:100%; background:#f8f8f8; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area .line {width: 1px;height: 50px;background: #d0d0d0;margin: 30px auto 0;}

.group-nav {position: relative;}
.group-nav .arrow {position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; opacity:0.3; transition:opacity .3s ease;}
.group-nav .arrow:hover {opacity:0.7;}
.group-nav .arrow img {width:27px; height:27px;}
.group-nav .arrow.left {left:-40px}
.group-nav .arrow.right {right:-40px;}
.group-nav ul {white-space: nowrap; overflow-y: auto;-ms-overflow-style: none; scrollbar-width: none;}
.group-nav ul::-webkit-scrollbar {display: none; }
.group-nav ul li {display: inline-block; text-align: center; cursor:pointer; padding:12px 15px; border-radius: 5px;min-width: 84px;}
.group-nav ul li p {font-size:1.3rem;padding-top:10px; font-weight:600;}
.group-nav ul li .logo {height:20px; width:auto;}
.group-nav ul li:hover, .group-nav ul li.on {background:#f4f5f9}
.group-box {margin-top:20px; border-top:1px solid #d7d7d7; padding-top:20px;}
.group-box ul li {float:left; width:calc(25% - 15px); margin-right:20px; margin-bottom:30px; cursor:pointer;}
.group-box ul li:hover .logo-area {border-color:#2ea7e0}
.group-box ul li:nth-child(4n) {margin-right:0;}
.group-box .logo-area {position:relative; overflow:hidden; margin-right:50px;height:130px; width:100%;background:#fff; border:1px solid #d7d7d7;}
.group-box .logo-area img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);max-width: 90%; width:105px}
.group-box .txt-area {text-align: center; font-size:1.4rem; padding-top:10px; font-weight:600; }
.group-box .txt-area .tit {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

@media(max-width:1100px) {
	.group-nav ul {margin:0 40px;}
	.group-nav .arrow.left {left:0px}
	.group-nav .arrow.right {right:0px;}
}


@media(max-width:768px) {
	.group-nav ul li {min-width:60px;}
	.group-nav ul li .logo {height:17px;}
	.group-nav ul li p {padding-top:7px;}
	.group-box ul li {width:calc(33.3% - 14px); }	
	.group-box ul li:nth-child(4n) {margin-right:20px;}
	.group-box ul li:nth-child(3n) {margin-right:0;}
	.group-box .logo-area img {width:78px;}
}

@media(max-width:500px) {
	.group-nav ul {margin:0}
	.group-nav .arrow {display: none;}
	.group-box ul li {width:calc(50% - 8px);margin-right:15px;}	
	.group-box ul li:nth-child(5n) {margin-right:15px;}
	.group-box ul li:nth-child(4n) {margin-right:15px;}
	.group-box ul li:nth-child(3n) {margin-right:15px;}
	.group-box ul li:nth-child(2n) {margin-right:0;}
	.group-box .txt-area {font-size:1.3rem;}
}

/** 단체소개 단체 상세 페이지 **/
.group-info-wrap .group-info .left-area {float:left; width:450px;}
.group-info-wrap .group-info .left-area .main-image-wrap {position:relative;height:255px; overflow:hidden;}
.group-info-wrap .group-info .left-area .main-image-wrap img {position: absolute;top: 50%;left: 50%;width: 100%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);	-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.group-info-wrap .group-info .left-area .thumbnail {position:relative; margin-top:15px;}
.group-info-wrap .group-info .left-area .thumbnail .arrow {position:absolute; top:50%; transform:translateY(-50%); cursor:pointer}
.group-info-wrap .group-info .left-area .thumbnail .arrow img {width:25px; height:25px; opacity:0.4;}
.group-info-wrap .group-info .left-area .thumbnail .arrow img:hover {opacity:0.7}
.group-info-wrap .group-info .left-area .thumbnail .arrow.left {left:-30px}
.group-info-wrap .group-info .left-area .thumbnail .arrow.right {right:-30px}
.group-info-wrap .group-info .left-area .thumb-list {overflow: hidden; width: 450px; white-space: nowrap;}
.group-info-wrap .group-info .left-area .thumb-list li {position: relative;display: inline-block;	width: 145px;	margin-right: 7.5px;margin-bottom: 7.5px;overflow: hidden;border: 1px solid #d7d7d7;	height: 80px;}
.group-info-wrap .group-info .left-area .thumb-list li:hover {opacity:0.8;}
.group-info-wrap .group-info .left-area .thumb-list li:nth-child(3n) {margin-right: 0;}

.group-info-wrap .group-info .left-area .thumb-list li img {position: absolute;top: 50%;left: 50%; width: 100%;	-webkit-transform: translate(-50%, -50%);	-moz-transform: translate(-50%, -50%);	-ms-transform: translate(-50%, -50%);	-o-transform: translate(-50%, -50%);	transform: translate(-50%, -50%);
}
.group-info-wrap .group-info .right-area {float:left; width:calc(100% - 450px); padding-left:70px;}
.group-info-wrap .group-info .right-area .tit {font-weight:600; padding-bottom:30px; font-size: 2rem;letter-spacing: -0.025em;}
.group-info-wrap .group-info .right-area p {font-size:1.5rem; line-height:27px;    letter-spacing: -0.025em; color:#626262;}
.board-wrap.group-board .board-head {background:#f7f7f7;}

@media(max-width:1024px) {
	.group-info-wrap .group-info .right-area {padding-left:40px; width:calc(100% - 350px)}
	.group-info-wrap .group-info .left-area {width:350px; }
	.group-info-wrap .group-info .left-area .main-image-wrap {height:200px;}
	.group-info-wrap .group-info .left-area .thumb-list {width:350px; overflow:auto; -ms-overflow-style: none; scrollbar-width: none;}
	.group-info-wrap .group-info .left-area .thumb-list::-webkit-scrollbar {display: none; }
	.group-info-wrap .group-info .left-area .thumbnail .arrow {display: none;}
}

@media(max-width:768px) {
	.group-info-wrap .group-info .left-area {width:100%; float:none;}
	.group-info-wrap .group-info .left-area .thumb-list {width:100%;}
	.group-info-wrap .group-info .left-area .thumb-list li {width:calc(33.3% - 7px);}
	.group-info-wrap .group-info .right-area {width:100%; text-align: center; padding-left:0; padding-top:20px; float:none;}
	.group-info-wrap .group-info .right-area .tit {padding-bottom:20px;}
}

@media(max-width:400px) {
	.group-info-wrap .group-info .left-area .main-image-wrap {height:155px;}
	.group-info-wrap .group-info .left-area .thumb-list li {height:70px}
}