@charset "UTF-8";
/*basic/blue*/
/********** 탭메뉴 모듈 *****************/
/********** clBoard_common.css 구조를 따라옴 ******/
/* 
@latest 2022.04.22 SSJ 
@latest 2023.02.02 SSJ 
@latest 2024.12.10 OSY 
*/



/********** Tab Menu **********/
.subCon #cl_regist_form_btn {display:none;}
.subCon .TabBoxWrap {padding-left:0; padding-right:0; margin-bottom:30px;}
.subCon .TabBoxWrap ul.tabsTrack {justify-content:space-between; overflow:hidden;}
.subCon .rollingList {width:100%!important;}
.subCon .tabListbox > div {padding:0!important;}
.subCon .tab_container > div {padding:0!important;}
.subCon .basic {border-bottom:1px solid #fff !important;}

.tabListbox {width:100%; position:relative; overflow:hidden;}
.rollingList {width:100%; float:left; display:block;}

ul.tabsTrack {float:left; width:100%; list-style:none; margin:0; padding:0; padding-left:0 !important; background:#fff;}
ul.tabsTrack li {float:left;position:relative;min-width:15%;max-width:20%;list-style:none !important;cursor:pointer;text-align:center;word-break:keep-all;box-sizing:border-box;overflow:hidden;border: 1px solid #ddd;margin-left: -1px;}
ul.tabsTrack li:first-child {margin-left:0 !important;}
ul.tabsTrack li.active {box-sizing:border-box;}
ul.tabsTrack li button, ul.tabsTrack li a {display:inline-block; width:100%; height:100%; font-family:NanumSquareR; font-size:17px; line-height:1.4em; padding:15px; box-sizing:border-box;}
ul.tabsTrack li.active button, ul.tabsTrack li.active a {/* padding-top: 12px !important; */}
ul.tabsTrack li a {display:block;}
ul.tabsTrack li.active button, ul.tabsTrack li.active a {font-weight:600;}



/********** Tab Style **********/
/***** tabWide *****/
@media (min-width:800px){
	[class*='Wide'] ul.tabsTrack li:only-child {width:100% !important; max-width:none !important;}
	[class*='Wide'] ul.tabsTrack li:nth-last-child(2), [class*='Wide'] ul.tabsTrack li:nth-last-child(2)+li {width:50% !important; max-width:none !important;}
	[class*='Wide'] ul.tabsTrack li:nth-last-child(3), [class*='Wide'] ul.tabsTrack li:nth-last-child(3)~li {width:33.33333333333333% !important; max-width:none !important;}
	[class*='Wide'] ul.tabsTrack li:nth-last-child(4), [class*='Wide'] ul.tabsTrack li:nth-last-child(4)~li {width:25% !important; max-width:none !important;}
	[class*='Wide'] ul.tabsTrack li:nth-last-child(n+5), [class*='Wide'] ul.tabsTrack li:nth-last-child(n+5)~li {width:20% !important;}
	[class*='Wide'] ul.tabsTrack li:nth-child(5n+1) {clear:both !important;}

	/* tabSt_btn */
	[class*='Wide'].tabSt_btn ul.tabsTrack li:only-child {margin:0;}		
	[class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(2), [class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(2)+li {width:calc(99% / 2) !important;}
	[class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(3), [class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(3)~li {width:calc(98.5% / 3) !important;}
	[class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(4), [class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(4)~li {width:calc(98% / 4) !important;}
	[class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(n+5), [class*='Wide'].tabSt_btn ul.tabsTrack li:nth-last-child(n+5)~li {width:calc(97.5% / 5) !important;}
}


/***** tabStyle - line *****/
.tabSt_line ul.tabsTrack {display:flex; flex-flow:wrap; border-bottom:1px solid #333;}
.tabSt_line ul.tabsTrack li {border:1px solid #ccc; margin-right:-1px; background-image:linear-gradient(to bottom, #fff, #fafafa, #f9f9f9);}
.tabSt_line ul.tabsTrack li:not(.active) {margin-top: 1px; /* border-bottom:0; */margin-bottom: -1px;}
.tabSt_line ul.tabsTrack li button, .tabSt_line ul.tabsTrack li a {padding:14px 15px;}
.tabSt_line ul.tabsTrack li.active {bottom:-1px; z-index:1; margin-right:0; margin-bottom:-1px; background:#fff; border-top: 1px solid #333; border-bottom-color:#fff;}
.tabSt_line:not(.reverse) ul.tabsTrack li.active {border-top-width:3px !important;}
.tabSt_line ul.tabsTrack li.active button, .tabSt_line ul.tabsTrack li.active a {padding:15px; font-size:17.5px;}

	/*아래에 굵은선*/
	.tabSt_line.reverse ul.tabsTrack {/* border-bottom:0; */ /* border-top:1px solid #333; */}
	.tabSt_line.reverse ul.tabsTrack li {/* margin-top:-1px; */ /* border-top:0; */}
	.tabSt_line.reverse ul.tabsTrack li:not(.active) {/* margin-top:0; */ /* margin-bottom: 2px; */ /* border-bottom:1px solid #ccc; */}
	.tabSt_line.reverse ul.tabsTrack li.active {/* bottom:0; */ border-top-color: #ccc;/* border-bottom-color: #333; */ /* border-bottom-width:3px; */ /* border-top-width: 1px !important; */ /* padding:0 !important; */ /* margin-bottom:0; */border-bottom: 4px solid #333 !important;}
		
		
	/* line curve */
	.tabSt_line.CvS ul.tabsTrack li.active, .tabSt_line.CvM ul.tabsTrack li.active, .tabSt_line.CvL ul.tabsTrack li.active {border-width: 2px 2px 0;border-top-width: 2px !important;border-color: #333;}
	.tabSt_line.CvS ul.tabsTrack li {border-radius:5px 5px 0 0;}
	.tabSt_line.CvM ul.tabsTrack li {border-radius:10px 10px 0 0;}
	.tabSt_line.CvL ul.tabsTrack li {border-radius:20px 20px 0 0;margin-top: 0;}
	
	.tabSt_line.reverse.CvS ul.tabsTrack li.active, .tabSt_line.reverse.CvM ul.tabsTrack li.active, .tabSt_line.reverse.CvL ul.tabsTrack li.active {border-width: 1px 1px 4px 1px !important;border-color: #ccc;}
	.tabSt_line.reverse.CvS ul.tabsTrack li {/* border-radius:0 0 5px 5px; *//* margin-bottom: 0; */border: 1px solid #ccc;border-top-width: 1px !important;}
	.tabSt_line.reverse.CvM ul.tabsTrack li {/* border-radius:0 0 10px 10px; *//* margin-bottom: 0; */}
	.tabSt_line.reverse.CvL ul.tabsTrack li {/* border-radius:0 0 20px 20px; *//* margin-bottom: 0; */}
	
	
	

/***** tabStyle - button *****/
.tabSt_btn ul.tabsTrack {display:flex; flex-flow:wrap;}
.tabSt_btn ul.tabsTrack li {min-width:19.4%; max-width:none !important; margin:0.25%; border:1px solid #ccc;}
.tabSt_btn ul.tabsTrack li.active {border:1px solid #333; box-sizing:border-box;}
.tabSt_btn ul.tabsTrack li.active button, .tabSt_btn ul.tabsTrack li.active a {background:#333; color:#fff;}

	/* button curve */
	.tabSt_btn.CvS ul.tabsTrack li {border-radius:5px;}	
	.tabSt_btn.CvM ul.tabsTrack li {border-radius:12px;}
	.tabSt_btn.CvL ul.tabsTrack li {border-radius:25px;}
	.tabSt_btn.Line ul.tabsTrack li.active button, .tabSt_btn.Line ul.tabsTrack li.active a {background:#fff !important; color:#000 !important;}



/***** tabStyle - box *****/
.tabSt_Widebox ul.tabsTrack {display:flex; flex-flow:wrap; border:1px solid rgb(0 0 0 / 0.15); box-sizing:border-box;}
.tabSt_Widebox ul.tabsTrack li:nth-last-child(n+6), 
.tabSt_Widebox ul.tabsTrack li:nth-last-child(n+6)~li:nth-child(-n+5) {border-bottom:1px solid rgba(0 0 0 / 0.15);}
.tabSt_Widebox ul.tabsTrack li:not(:nth-child(5n)) {border: none;border-right:1px solid rgba(0 0 0 / 0.15);}

	/* box curve */
	.tabSt_Widebox.CvS, .tabSt_Widebox.CvS ul.tabsTrack {border-radius:10px;}	
	.tabSt_Widebox.CvM, .tabSt_Widebox.CvM ul.tabsTrack {border-radius:25px;}
	.tabSt_Widebox.CvL, .tabSt_Widebox.CvL ul.tabsTrack {border-radius:50px;}
	
	
	
/***** tabStyle - bullet *****/
.tabSt_Wideblt ul.tabsTrack {padding:20px 30px !important; border-top:2px solid #333; background:#f5f5f5; box-sizing:border-box;}
.tabSt_Wideblt ul.tabsTrack li::before {position:absolute; left:0; top:17px; content:''; width:3px; height:3px; border-radius:50%; background:#333;}
.tabSt_Wideblt ul.tabsTrack li button, .tabSt_Wideblt ul.tabsTrack li a {text-align:left; padding: 10px 30px 10px 15px;}
.tabSt_Wideblt ul.tabsTrack li, .tabSt_Wideblt ul.tabsTrack li.active button, .tabSt_Wideblt ul.tabsTrack li.active a {background:transparent !important;border: none;}
	
	/* curve */
	.tabSt_Wideblt.CvS, .tabSt_Wideblt.CvS ul.tabsTrack {border-radius:0 0 10px 10px;}	
	.tabSt_Wideblt.CvM, .tabSt_Wideblt.CvM ul.tabsTrack {border-radius:0 0 20px 20px;}
	.tabSt_Wideblt.CvL, .tabSt_Wideblt.CvL ul.tabsTrack {border-radius:0 0 30px 30px;}



/********** Media Queries **********/
	@media (min-width:800px){
		.tabListbox {margin-bottom:30px;}
		.tabSt_Widebox ul.tabsTrack li:last-child {border-right:0 !important;}
	}
	
	@media (max-width:799px){
		.tabListbox:not(.tabSt_line):not(.tabSt_btn) ul.tabsTrack li:not(:nth-child(-n+2)) {border-top:0;}	
		ul.tabsTrack li {width:50% !important; max-width:none; vertical-align:middle; background-image:linear-gradient(to bottom, #fff, #fafafa, #f9f9f9);}
		ul.tabsTrack li:nth-child(odd) {margin-left:0 !important;}
		ul.tabsTrack li:nth-child(2n+1) {clear:both !important;}
		ul.tabsTrack li button, ul.tabsTrack li a {font-size:14px !important;}

			.tabSt_line ul.tabsTrack li {margin-left:-1px; margin-right:0; border-radius:0 !important;}
			.tabSt_line ul.tabsTrack li.active {bottom:0; margin-bottom:0; /* padding:14px; */}
			.tabSt_line ul.tabsTrack li:not(.active) {margin-top:0;}
			.tabSt_line.reverse ul.tabsTrack li:not(.active) {margin-bottom:0;}	
			.tabSt_btn ul.tabsTrack li {width:calc(99% / 2) !important;}
			.tabSt_Widebox ul.tabsTrack li:nth-child(odd) {border-right:1px solid rgba(0 0 0 / 0.15);}
			.tabSt_Widebox ul.tabsTrack li:nth-child(even) {border-right:0;}
			.tabSt_Widebox ul.tabsTrack li:nth-last-child(-n+2) {border-bottom:0 !important;}
	}



/********** Tab Color **********/
/* blue01 */
.tab_blue01 ul.tabsTrack, .tab_blue01 ul.tabsTrack li.active,.tab_blue01.tabSt_line.reverse ul.tabsTrack li.active {border-color:#2091cb !important;}
.tab_blue01:not(.tabSt_line) ul.tabsTrack li.active button, .tab_blue01 ul.tabsTrack li::before {background:#2091cb; color:#fff;}
.tab_blue01[class*='blt'] ul.tabsTrack li.active button, .tab_blue01[class*='blt'] ul.tabsTrack li.active a {color:#2091cb !important;}

/* navy01 */
.tab_navy01 ul.tabsTrack, .tab_navy01 ul.tabsTrack li.active,.tab_navy01.tabSt_line.reverse ul.tabsTrack li.active {border-color:#223152 !important;}
.tab_navy01:not(.tabSt_line) ul.tabsTrack li.active button, .tab_navy01 ul.tabsTrack li::before {background:#223152; color:#fff;}
.tab_navy01[class*='blt'] ul.tabsTrack li.active button, .tab_navy01[class*='blt'] ul.tabsTrack li.active a {color:#223152 !important;}

/* green01 */
.tab_green01 ul.tabsTrack, .tab_green01 ul.tabsTrack li.active,.tab_green01.tabSt_line.reverse ul.tabsTrack li.active {border-color:#4e850d !important;}
.tab_green01:not(.tabSt_line) ul.tabsTrack li.active button, .tab_green01 ul.tabsTrack li::before {background:#4e850d; color:#fff;}
.tab_green01[class*='blt'] ul.tabsTrack li.active button, .tab_green01[class*='blt'] ul.tabsTrack li.active a {color:#4e850d !important;}

/* orange01 */
.tab_orange01 ul.tabsTrack, .tab_orange01 ul.tabsTrack li.active,.tab_orange01.tabSt_line.reverse ul.tabsTrack li.active {border-color:#ED5902 !important;}
.tab_orange01:not(.tabSt_line) ul.tabsTrack li.active button, .tab_orange01 ul.tabsTrack li::before {background:#ED5902; color:#fff;}
.tab_orange01[class*='blt'] ul.tabsTrack li.active button, .tab_orange01[class*='blt'] ul.tabsTrack li.active a {color:#ED5902 !important;}

/* yellow01 */
.tab_yellow01 ul.tabsTrack, .tab_yellow01 ul.tabsTrack li.active,.tab_yellow01.tabSt_line.reverse ul.tabsTrack li.active {border-color:#f5b702 !important;}
.tab_yellow01:not(.tabSt_line) ul.tabsTrack li.active button, .tab_yellow01 ul.tabsTrack li::before {background:#f5b702;}
.tab_yellow01 ul.tabsTrack li.active button, .tab_yellow01 ul.tabsTrack li.active a {color:#000;}