:root{
	--default-bg : #e8e8e8;
	--default-color : #111;
	--point-bg :  skyblue;
	--point-color : #fff;
	--max-width : 1200px;
}
.tabs {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 0 auto 2em;
}
.tabs li{
	display : flex;
	align-items : center;
	justify-content : center;
	flex : 1;
	text-align: center;
	font-weight: 500;
	padding: 10px 0;
	letter-spacing : -0.04em;
	background : var(--default-bg);
	color: var(--default-color);
	/* border-top-width: 1px; */
	/* border-top-style: solid; */
	/* border-bottom-width: 1px; */
	/* border-bottom-style: solid; */
	/* border-color: var(--point-bg); */
	cursor: pointer;
	transition: background .3s, color .3s;
}
.tabs li:hover,
.tabs li.current{
	background:  var(--point-bg); 
	color: var(--point-color); 
}
.tab-area{display: none;}
.tab-area.current{display: block; clear:both;}

/*탭메뉴2*/
.tabs2 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 4em auto;
	position : relative;
}
.tabs2::after{
	position : absolute;
	content : '';
	width : 100%;
	height : 1px;
	background : #ddd;
	top : -2em;
	left : 0;
}
.tabs2 li{
	display : flex;
	align-items : center;
	justify-content : center;
	flex : 1;
	text-align: center;
	font-weight: 500;
	padding: 10px 0;
	letter-spacing : -0.04em;
	background : var(--default-bg);
	color: var(--default-color);
	/* border-top-width: 1px; */
	/* border-top-style: solid; */
	/* border-bottom-width: 1px; */
	/* border-bottom-style: solid; */
	/* border-color: var(--point-bg); */
	cursor: pointer;
	transition: background .3s, color .3s;
}
.tabs2 li:hover,
.tabs2 li.current{
	background:  var(--point-bg); 
	color: var(--point-color); 
}
.tab-content{display: none;}
.tab-content.current{display: block; clear:both;}

@media(max-width : 1200px){
	.tabs li, .tabs2 li{font-size : 14px; padding : 7px 0;}
}