/* 변수 */
._sub{
	--borderRadius:26px;
	--borderRadiusMini:18px;
}
@media screen and (max-width:1024px) {
	._sub{
		--borderRadius:18px;
		--borderRadiusMini:10px;
	}
}

/* 탭 */
._sub ._tabList{
	margin: 20px 0;
	display: flex; flex-wrap: wrap;
}
._sub ._tabList > div{box-sizing: border-box;}
._sub ._tabList > div a{
	display: block; position: relative;
	background: #fff; height: 50px;
	border-radius: 25px; display: flex; justify-content: space-between; align-items: center;
	padding: 0 24px; box-sizing: border-box; transition: background 0.3s,color 0.3s;
	overflow: hidden;
}
._sub ._tabList > div a::before{
	content:''; display: block; width: 100%; height: 100%; background: #626262;
	position: absolute; top: 0; left: 0; width: 0; transition: all 0.4s;
}
._sub ._tabList > div a p{position: relative; transition: color 0.4s;}
._sub ._tabList > div a img{filter: brightness(0); transition: filter 0.4s;}
/* 호버 */
._sub ._tabList > div a:hover::before{width: 100%;}
._sub ._tabList > div a:hover p{color: #fff;}
._sub ._tabList > div a:hover img{filter: brightness(1);}
/* 온 */
._sub ._tabList > div.on a{color: #fff;}
._sub ._tabList > div.on a::before{display: none;}
._sub ._tabList > div.on a img{filter: brightness(1);}

/* 5개일경우 (커뮤니티 > 수강후기,알림e) */
._sub ._tabList.tab5{width: calc(100% + 16px); transform: translateX(-8px);}
._sub ._tabList.tab5 > div{width: calc(100% / 5); padding: 0 8px;}
/* 4개일경우 (과정안내 index) */
._sub ._tabList.tab4{width: calc(100% + 6px); transform: translateX(-3px); font-family: 'Geologica'; font-weight: 600;}
._sub ._tabList.tab4 > div{width: calc(100% / 4); padding: 0 3px;}
/* 3개일경우 (과정 안내 > 입시전략) */
._sub ._tabList.tab3{width: calc(100% + 8px); transform: translateX(-4px);}
._sub ._tabList.tab3 > div{width: calc(100% / 3); padding: 0 4px;}

/* 색상 */
._sub ._tabList.orange > div.on a{background: #ff6000;}
._sub ._tabList.green > div.on a{background: #008723;}
._sub ._tabList.pink > div.on a{background: #fa89a8;}
._sub ._tabList.purple > div.on a{background: #8b52e9;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	._sub ._tabList{width: calc(100% + 6px) !important; transform: translateX(-3px) !important; margin: 12px 0 !important;}
	._sub ._tabList > div{width: 50% !important; padding: 0 3px !important; margin-bottom: 8px;}
	._sub ._tabList > div:last-child{margin-bottom: 0;}
}
@media screen and (max-width:820px) {
	._sub ._tabList > div a{height: 46px;}
}
@media screen and (max-width:500px) {
	._sub ._tabList > div{width: 100% !important;}
	._sub ._tabList > div a{height: 40px; font-size: 14px;}
}
@media screen and (max-width:320px) {}






/* 호버 효과 */
.btnHoverEffect .effectBtn{transition: background-color 0.5s; cursor: pointer; position: relative; border-radius: 50px; overflow: hidden; text-align: center;}
.btnHoverEffect .effectBtn::before,
.btnHoverEffect .effectBtn::after{content:''; display: block; position: absolute; top: 0; left: 0;}
.btnHoverEffect .effectBtn::before{width: 100%; height: 100%; box-sizing: border-box; border-radius: 50px;}
.btnHoverEffect .effectBtn::after{width: 0; height: 100%; transition: all 0.5s;}
.btnHoverEffect .effectBtn p{position: relative; transition: all 0.5s; z-index: 2;}
@media screen and (min-width:1025px) {
	.btnHoverEffect .effectBtn:hover::after{width: 100%;}
}

/* 배경색 */
.btnHoverEffect.bgOrange .effectBtn{background-color: #ff6000;}
.btnHoverEffect.bgWhite .effectBtn{background-color: #fff;}
.btnHoverEffect.bgBlack .effectBtn{background-color: #000;}
/* 호버 */
.btnHoverEffect.orange .effectBtn::after{background-color: #ff6000;}
.btnHoverEffect.white .effectBtn::after{background-color: #fff;}
.btnHoverEffect.black .effectBtn::after{background-color: #000;}
.btnHoverEffect.gray .effectBtn::after{background-color: #626262;}
@media screen and (min-width:1025px) {
	.btnHoverEffect.colorWhite .effectBtn:hover p{color: #fff !important;}
	.btnHoverEffect.colorBlack .effectBtn:hover p{color: #000 !important;}
}
/* 테두리가 있다면 */
.btnHoverEffect[class*='border'] .effectBtn::before{ border: 1px solid;}
.btnHoverEffect.borderBlack .effectBtn::before{border-color: #000;}
.btnHoverEffect.borderOrange .effectBtn::before{border-color: #ff6000;}

/* 온 */
.btnHoverEffect .effectBtn.on::after{display: none;}
.btnHoverEffect.orange .effectBtn.on{background-color: #ff6000;}
.btnHoverEffect.black .effectBtn.on{background-color: #000;}
.btnHoverEffect.gray .effectBtn.on{background-color: #000;}
.btnHoverEffect.white .effectBtn.on{background-color: #fff;}