:root{
	--default-bg : #efefef;
	--default-color : #111;
	--point-bg :  #379EA3;
	--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:  #0A2C59; 
	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;}




/*탭메뉴2*/
.tabs3 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 10px auto;
	position : relative;
}
.tabs3 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 : #EBE8DE;
	color: #000000;
	font-size: 15px;
	cursor: pointer;
	margin-right: 10px;
	transition: background .3s, color .3s;
}
.tabs3 li:last-child {
	margin-right: 0px;
}
.tabs3 li:hover,
.tabs3 li.current{
	background:  #8C8074; 
	color: #FFFFFF; 
}
.tab-wrap{display: none;}
.tab-wrap.current{display: block; clear:both;}


.tabs4 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 0px auto;
	position : relative;
}
.tabs4 li{
	display : flex;
	align-items : center;
	justify-content : center;
	flex : 1;
	text-align: center;
	font-weight: 400;
	padding: 10px 0;
	letter-spacing : -0.04em;
	background : #F0F0F0;
	color: #000000;
	font-size: 15px;
	cursor: pointer;
	margin-right: 10px;
	transition: background .3s, color .3s;
}
.tabs4 li a {
	display: block;
	width: 100%;
       height: 100%;
}
.tabs4 li:last-child {
	margin-right: 0px;
}
.tabs4 li:hover,
.tabs4 li.current{
	background:  #134139; 
	color: #FFFFFF; 
}



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