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



/********** Tab Menu **********/
.subCon #cl_regist_form_btn {display:none;}
.subCon .TabBoxWrap {padding-left:0; padding-right:0; margin-bottom:30px; overflow:hidden;}
.subCon .TabBoxWrap ul.tabsTrack {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; display:flex; flex-wrap:wrap; width:100%; list-style:none; margin:0; padding:0 !important; background:#fff; box-sizing:border-box;}
ul.tabsTrack li {position:relative; min-width:15%; list-style:none !important; text-align:center; word-break:keep-all; margin-left:-1px; border:1px solid #ddd; box-sizing:border-box; overflow:hidden;}
ul.tabsTrack li button, ul.tabsTrack li a {display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; width:100%; height:100%; font-family:NanumSquareR; font-size:17px; line-height:1.4em; padding:15px 20px; word-wrap:break-word; word-break:keep-all; overflow-wrap:anywhere; box-sizing:border-box;}
ul.tabsTrack li.active button, ul.tabsTrack li.active a {position:relative; font-weight:600;}
ul.tabsTrack li.active button:focus:after, ul.tabsTrack li.active a:focus:after {position:absolute; top:2px; left:2px; content:''; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #fff; box-sizing:border-box;}
.tabListbox:not([class*='tabSt_']) ul.tabsTrack li.active:after {position:absolute; top:0; left:0; content:''; width:100%; height:100%; border-style:solid; border-color:#333; border-width:2px; box-sizing:border-box;}

.CvS:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li,
.CvS:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li.active:after,
.CvS:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus,
.CvS:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus:after {border-radius:5px;}
.CvM:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li,
.CvM:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li.active:after,
.CvM:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus,
.CvM:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus:after {border-radius:10px;}
.CvL:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li,
.CvL:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li.active:after,
.CvL:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus,
.CvL:not(.tabSt_Widebox, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus:after {border-radius:20px;}


/********** 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:calc(100% / 3) !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(98% / 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(97% / 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(96% / 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(95% / 5) !important;}
		
}


/***** tabStyle - line *****/
.tabSt_line ul.tabsTrack {display:flex; flex-flow:wrap; border-bottom:1px solid #333; overflow:initial !important;}
.tabSt_line ul.tabsTrack li {border:1px solid #ccc; background-image:linear-gradient(to bottom, #fff, #fafafa, #f9f9f9);}
.tabSt_line ul.tabsTrack li button, .tabSt_line ul.tabsTrack li a {padding:14px 20px;}
.tabSt_line ul.tabsTrack li.active {z-index:1; 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 li.active {border-top-color:#ccc; 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 {margin-bottom:-1px; border-width:2px 2px 0 !important; border-color:#333;}
	
	.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:1px solid #ccc; border-top-width:1px !important;}
	
	
	

/***** tabStyle - button *****/
.tabSt_btn ul.tabsTrack {display:flex; flex-flow:wrap;}
.tabSt_btn ul.tabsTrack li {min-width:19%; max-width:none !important; margin:0.5%; border:1px solid #ccc;}
.tabSt_btn ul.tabsTrack li.active {border:2px 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,
	.tabSt_btn.CvS ul.tabsTrack li :is(a, button):focus,
	.tabSt_btn.CvS ul.tabsTrack li :is(a, button):focus:after {border-radius:5px;}	
	.tabSt_btn.CvM ul.tabsTrack li,
	.tabSt_btn.CvM ul.tabsTrack li :is(a, button):focus,
	.tabSt_btn.CvM ul.tabsTrack li :is(a, button):focus:after {border-radius:12px;}
	.tabSt_btn.CvL ul.tabsTrack li,
	.tabSt_btn.CvL ul.tabsTrack li :is(a, button):focus,
	.tabSt_btn.CvL ul.tabsTrack li :is(a, button):focus:after {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.active {background-color:#333; background-image:none;}
.tabSt_Widebox ul.tabsTrack li.active button, .tabSt_Widebox ul.tabsTrack li.active a {color:#fff;}

	/* box curve */
	.tabSt_Widebox.CvS, .tabSt_Widebox.CvS ul.tabsTrack {border-radius:10px;}	
	.tabSt_Widebox.CvM, .tabSt_Widebox.CvM ul.tabsTrack {border-radius:20px;}
	.tabSt_Widebox.CvL, .tabSt_Widebox.CvL ul.tabsTrack {border-radius:30px;}
	
	
	
/***** tabStyle - bullet *****/
.tabSt_Wideblt ul.tabsTrack {display:flex; flex-wrap:wrap; align-items:flex-start; padding:20px 30px !important; border-top:2px solid #333; background:#f5f5f5; box-sizing:border-box;}
.tabSt_Wideblt ul.tabsTrack li {text-align:left;}
.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 {justify-content:flex-start; width:auto; 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 (max-width:1299px){
		.subCon .rollingList {margin-left:auto; margin-right:auto;}
	}
	@media (min-width:800px){
		.tabListbox:not([class*='tabSt_']) ul.tabsTrack {margin-left:1px; padding-left:1px !important;}
		
		.tabListbox {margin-bottom:30px;}
		.tabSt_Widebox ul.tabsTrack li {border:0; margin-left:0;}
		.tabSt_Widebox ul.tabsTrack li:not(:nth-child(5n+5)) {border-right:1px solid rgba(0 0 0 / 0.15);}
		.tabSt_Widebox ul.tabsTrack li:nth-child(5n+6) {overflow:initial;}
		.tabSt_Widebox ul.tabsTrack li:nth-child(5n+6):after {position:absolute; top:0; left:0; content:''; width:100vw; border-top:1px solid rgb(0 0 0 / 0.15);}
		
		.tabSt_line ul.tabsTrack {position:relative; border-bottom:0; margin-left:1px; padding-left:1px !important;}
		.tabSt_line ul.tabsTrack:after {position:absolute; bottom:-1px; left:1px; content:''; width:calc(100% - 2px); height:1px; border-style:solid; border-color:inherit; border-width:0 0 1px 0;}
		.tabSt_line ul.tabsTrack li {margin-top:15px; margin-left:0;}
		.tabSt_line ul.tabsTrack li:not(.active) {margin-bottom:-1px;}
		
		.tabSt_line:not(.reverse) ul.tabsTrack li.active {border-bottom:0; overflow:initial !important;}
		.tabSt_line:not(.reverse) ul.tabsTrack li.active:before {position:absolute; bottom:0; left:0; content:''; width:100%; height:1px; background-color:#fff !important;}
		.tabSt_line.tabWide ul.tabsTrack li:not(:nth-child(5n+1)):not(.active) {border-left:0;}
		.tabSt_line.tabWide ul.tabsTrack li.active {width:calc(100% + 1px); margin-left:-1px;}
	
		:not([class*='Wide']).tabSt_line ul.tabsTrack li {max-width:none; margin-left:-1px;}
		
		.tabSt_line.CvS ul.tabsTrack li,
		.tabSt_line.CvS ul.tabsTrack li :is(a, button):focus,
		.tabSt_line.CvS ul.tabsTrack li :is(a, button):focus:after {border-radius:5px 5px 0 0;}
		.tabSt_line.CvM ul.tabsTrack li, 
		.tabSt_line.CvM ul.tabsTrack li :is(a, button):focus,
		.tabSt_line.CvM ul.tabsTrack li :is(a, button):focus:after {border-radius:10px 10px 0 0;}
		.tabSt_line.CvL ul.tabsTrack li,
		.tabSt_line.CvL ul.tabsTrack li :is(a, button):focus,
		.tabSt_line.CvL ul.tabsTrack li :is(a, button):focus:after {border-radius:20px 20px 0 0;}
	}
	
	@media (max-width:799px){
		.tabListbox:is(.tabSt_line, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus,
		.tabListbox:is(.tabSt_line, .tabSt_Wideblt) ul.tabsTrack li :is(a, button):focus:after {border-radius:0 !important;}
		.tabListbox:is(.tabSt_line, .tabSt_Wideblt) 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);}
		.tabListbox:not(.tabSt_btn) ul.tabsTrack li:nth-child(n+3) {border-top:0 !important;}
		ul.tabsTrack li:nth-child(odd) {margin-left:0 !important;}
		ul.tabsTrack li button, ul.tabsTrack li a {font-size:14px !important;}

			.tabSt_line ul.tabsTrack li {position:relative; border-width:0 1px; border-radius:0 !important; overflow:inherit;}
			.tabSt_line ul.tabsTrack li:nth-child(-n+2) {border-top-width:1px;}
			.tabSt_line ul.tabsTrack li:nth-child(2n+3):before {position:absolute; top:0; left:0; z-index:1; content:''; width:calc(200% + 2px); height:1px; background:rgba(0 0 0 / 0.15);}
			.tabSt_line ul.tabsTrack li.active {margin-bottom:0; border:0;}
			.tabSt_line ul.tabsTrack li.active:before {width:calc(200% - 1px);}
			.tabSt_line ul.tabsTrack li.active:after {position:absolute; top:0; content:''; width:calc(100% + 2px); height:100%; border-style:solid; border-color:#333; border-width:2px; border-radius:0 !important; box-sizing:border-box;}
			.tabSt_line ul.tabsTrack li:nth-child(odd).active:after {left:-1px;}
			.tabSt_line ul.tabsTrack li:nth-child(even).active:after {right:-1px;}
			.tabSt_line.reverse ul.tabsTrack li:not(.active) {margin-bottom:0;}	
			.tabSt_line.reverse ul.tabsTrack li.active:after {height:calc(100% + 4px);}
			
			.tabSt_btn ul.tabsTrack {justify-content:space-between;}
			.tabSt_btn ul.tabsTrack li {width:calc(98% / 2) !important; margin:0.5% !important;}
			
			.tabSt_Widebox ul.tabsTrack {border:1px solid rgb(0 0 0 / 0.15);}
			.tabSt_Widebox ul.tabsTrack li {border:0; margin-left:0; overflow:initial !important;}
			.tabSt_Widebox ul.tabsTrack li:nth-child(odd) {border-right:1px solid rgb(0 0 0 / 0.15);}
			.tabSt_Widebox ul.tabsTrack li:nth-child(even) {border-left:0;}
			.tabSt_Widebox ul.tabsTrack li:nth-child(2n+3):before {position:absolute; top:0; left:0; z-index:1; content:''; width:calc(200% + 2px); height:1px; background:rgba(0 0 0 / 0.15);}
	}



/********** Tab Color **********/

/* blue01 */
.tab_blue01:not(.tabSt_Widebox) ul.tabsTrack, .tab_blue01 ul.tabsTrack li.active, .tab_blue01.tabSt_line.reverse ul.tabsTrack li.active, .tab_blue01 ul.tabsTrack li.active:after {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:not(.tabSt_Widebox) ul.tabsTrack, .tab_navy01 ul.tabsTrack li.active, .tab_navy01.tabSt_line.reverse ul.tabsTrack li.active, .tab_navy01 ul.tabsTrack li.active:after {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:not(.tabSt_Widebox) ul.tabsTrack, .tab_green01 ul.tabsTrack li.active, .tab_green01.tabSt_line.reverse ul.tabsTrack li.active, .tab_green01 ul.tabsTrack li.active:after {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:not(.tabSt_Widebox) ul.tabsTrack, .tab_orange01 ul.tabsTrack li.active, .tab_orange01.tabSt_line.reverse ul.tabsTrack li.active, .tab_orange01 ul.tabsTrack li.active:after {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:not(.tabSt_Widebox) ul.tabsTrack, .tab_yellow01 ul.tabsTrack li.active, .tab_yellow01.tabSt_line.reverse ul.tabsTrack li.active, .tab_yellow01 ul.tabsTrack li.active:after {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;}