:root{
	--default-bg : #fff;
	--default-color : #134139;
	--point-bg :  #134139;
	--point-color : #fff;
	--max-width : 1408px;
}
.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); 
}
.tab2-area{display: none;}
.tab2-area.current{display: block; clear:both;}

.tab-content{display: none;}
.tab-content.current{display: block; clear:both;}

/*탭메뉴3*/
.tabs3 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 4em auto;
	position : relative;
}
.tabs3::after{
	position : absolute;
	content : '';
	width : 100%;
	height : 1px;
	background : #ddd;
	top : -2em;
	left : 0;
}
.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 : 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;
}
.tabs3 li:hover,
.tabs3 li.current{
	background:  var(--point-bg); 
	color: var(--point-color); 
}
.tab3-area{display: none;}
.tab3-area.current{display: block; clear:both;}

/*탭메뉴4*/
.tabs4 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 4em auto;
	position : relative;
}
.tabs4::after{
	position : absolute;
	content : '';
	width : 100%;
	height : 1px;
	background : #ddd;
	top : -2em;
	left : 0;
}
.tabs4 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;
}
.tabs4 li:hover,
.tabs4 li.current{
	background:  var(--point-bg); 
	color: var(--point-color); 
}
.tab4-area{display: none;}
.tab4-area.current{display: block; clear:both;}

/*탭메뉴5*/
.tabs5 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 4em auto;
	position : relative;
}
.tabs5::after{
	position : absolute;
	content : '';
	width : 100%;
	height : 1px;
	background : #ddd;
	top : -2em;
	left : 0;
}
.tabs5 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;
}
.tabs5 li:hover,
.tabs5 li.current{
	background:  var(--point-bg); 
	color: var(--point-color); 
}
.tab5-area{display: none;}
.tab5-area.current{display: block; clear:both;}

/*탭메뉴4*/
.tabs6 {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width : var(--max-width);
	margin: 4em auto;
	position : relative;
}
.tabs6::after{
	position : absolute;
	content : '';
	width : 100%;
	height : 1px;
	background : #ddd;
	top : -2em;
	left : 0;
}
.tabs6 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;
}
.tabs6 li:hover,
.tabs6 li.current{
	background:  var(--point-bg); 
	color: var(--point-color); 
}
.tab6-area{display: none;}
.tab6-area.current{display: block; clear:both;}

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