/* dashboard_flexible
* -----------------------------------------------
* Standard:	1.0.0
* File:		frontend.css
* Name:		frontend
* Version:	1.2.9
* Create:	2025-07-07 || 1404-04-16
* Update:	2025-12-29 || 1404-10-08
* Purpose:	
* -----------------------------------------------
*/
/*---------------- import ----------------*/
	/*------------ framework ------------*/
		@import "../freamwork/css/reset.css";
		@import "../freamwork/css/value.css";
		@import "../freamwork/css/global.css";
		@import "../freamwork/css/col.css";
		
		@import "../freamwork/css/text_color.css";
		@import "../freamwork/css/text_weight.css";
		@import "../freamwork/css/text_align.css";
		@import "../freamwork/css/text_font_framework_icon.css";
		@import "../freamwork/css/text_font_iranSansX_num_fa.css";
		
		@import "../freamwork/css/color_background.css";
		@import "../freamwork/css/color_border.css";
		@import "../freamwork/css/color_hover.css";
		
		@import "../freamwork/css/component_tag.css";
		@import "../freamwork/css/component_table_responsive.css";
		@import "../freamwork/css/component_tooltip.css";
		@import "../freamwork/css/component_breadcrumb.css";
		@import "../freamwork/css/component_pagination.css";
		@import "../freamwork/css/component_tab.css";
		@import "../freamwork/css/component_modal.css";
		@import "../freamwork/css/component_alert.css";
		@import "../freamwork/css/component_sortable.css";
		@import "../freamwork/css/component_tag_manager.css";
		
		@import "../freamwork/css/form.css";
	/*------------ //framework ------------*/
	/*------------ other ------------*/
		@import "./text_font_dashboard_flexible_icon.css";
		@import "./pocomarket.css";
	/*------------ //other ------------*/
/*---------------- //import ----------------*/




/*---------------- framework:change ----------------*/
	/*------------ component_tab ------------*/
		.f_tab_s1 .f_header .f_active {
			border-bottom: 5px solid var(--local-color-003);
		}
	/*------------ //component_tab ------------*/
/*---------------- //framework:change ----------------*/




/*---------------- scrollbar ----------------*/
html, body {
	scrollbar-width: thin;           /* برای Firefox */
	scrollbar-color: rgba(0,0,0,0.3) transparent;
}
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 4px;
}
html:hover::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.25);
}
/*---------------- //scrollbar ----------------*/




/*---------------- body ----------------*/
body{
	font-family: iranSansX_num_fa;
}
body > main{
	display: flex;
	align-items: flex-start;
}
body.no_scroll {
	overflow: hidden;
}
/*---------------- //body ----------------*/




/*---------------- header ----------------*/
body > header {
	display:none;
	width:100%;
	height:70px;
	background:var(--local-gradient-001);
	padding:0px 4% 0px 4%;
}
@media screen and (max-width: 1200px) {
	body > header {
		display:flex;
		justify-content: space-between;
		align-items:center;
	}
}
	/*------------ hamberger ------------*/
		body > header .hamberger{
			width:30px;
			height:30px;
		}
		body > header .hamberger:hover{
			cursor: pointer;
		}
		body > header .hamberger .icon_he__hamberger{
			color:var(--color-white);
			font-size:30px;
		}
	/*------------ //hamberger ------------*/
	/*------------ logo ------------*/
		body > header .logo{
			height:30px;
		}
		body > header .logo img{
			width:100%;
			height:100%;
		}
		@media screen and (max-width: 992px) {
			body > header .logo{
				height:28px;
			}
		}
		@media screen and (max-width: 768px) {
			body > header .logo{
				height:24px;
			}
		}
	/*------------ //logo ------------*/
/*---------------- //header ----------------*/




/*---------------- sidebar ----------------*/
.sidebar {
	display: flex;
	width: 416px;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	transform: none;
	transition: transform var(--transition-slow) ease;
	z-index: 1000;
}
.sidebar [data-f-toggle="tooltip_js"]{
	border:none;
}
@media screen and (max-width: 1200px) {
	.sidebar {
		width:100%;
		transform: translateX(100%);
	}
	.sidebar.open {
		width:100%;
		transform: translateX(0);
	}
}
	/*------------ right ------------*/
		.sidebar > .right {
			position:relative;
			display: flex; 
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			flex: 0 0 24%; 
			max-width: 100px;
			height: 100vh;
			overflow:hidden;
			background: var(--local-gradient-001);
			box-shadow: var(--local-shadow-001);
			z-index: 2;
		}
		.sidebar > .right::before {
			content: "";
			position: absolute;
			width: 1920px;
			height: 524px;
			bottom: -100px;
			right: -5px;
			opacity: 1;
			background: url(../image/pattern.svg) no-repeat;
			background-size: 1920px 524px;
			background-position: 1164px bottom;
			pointer-events: none;
			z-index: 1;
		}
		@media screen and (max-width: 576px) {
			.sidebar > .right {
				max-width: 80px;
			}
		}
		/*-------- logo --------*/
			.sidebar > .right .logo {
				width: 66px;
				height: 66px;
				border-radius: 18px;
				background-color: var(--color-white);
				margin: 20px 0px 28px 0px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.sidebar > .right .logo img {
				width: 40px;
				height: 40px;	
			}
			@media screen and (max-width: 576px) {
				.sidebar > .right .logo {
					width: 56px;
					height: 56px;
				}
				.sidebar > .right .logo img {
					width: 38px;
					height: 38px;	
				}
			}
		/*-------- //logo --------*/
		/*-------- shortcut -------- */
			.sidebar > .right .shortcut{
				display: flex;
				flex-direction: column;
				align-items: center;
				width:60px;
				overflow-x: hidden;
				overflow-y: auto;
			}
			.sidebar > .right .shortcut .item{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center; 
				position: relative;
				width:24px;
				height:24px;
				margin: 22px 0px 22px 0px;
			}
			.sidebar > .right .shortcut .item[class*="icon_"]{
				color:var(--color-white);
				font-size:25px;
			}
			.sidebar > .right .shortcut .item a{
				color: var(--color-black-400);
			}
			.sidebar > .right .shortcut .item:hover .f_tag{
				background:var(--color-white);
			}
			.sidebar > .right .shortcut .item img{
				z-index: 1;
			}
			.sidebar > .right .shortcut .item .f_tag{
				position: absolute;
				top:-50%;
				right:-50%;
				width:22px;
				height:22px;
				background:var(--local-color-004);
				border-radius:50%;
				font-size:12px;
				font-weight: 900;
				font-family:iranSansX_num_fa;
				color:var(--color-black-400);
				padding:2px 0px 0px 0px;
				outline: 3px solid #32529e;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
				line-height:20px;
			}
		/*--------  //shortcut -------- */
	/*------------ //right ------------*/	
	/*------------ left ------------*/
		.sidebar > .left {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center; 
			flex: 1;
			height:100dvh;
			overflow-x: hidden;
			overflow-y: auto;
			box-shadow: var(--local-shadow-002);
			background-color: var(--color-white);
			border-left: 1px solid var(--local-color-007);
			z-index: 1;
		}
		@media screen and (max-width: 1200px) {
			.sidebar > .left {
				box-shadow: none;
			}
		}
		/*-------- header --------*/
			.sidebar > .left .header{
				display:none;
				justify-content: space-between;
				width:82%;
				min-height:66px;
				margin:20px 0px 0px 0px;
				border-bottom:1px solid var(--local-color-007);
			}
			.sidebar > .left .header .title{
				color:var(--local-color-009);
				font-size:21px;
				font-weight: 500;
				line-height:44px;
			}
			.sidebar > .left .header .exit,
			.sidebar > .left .header .back{
				display: flex;
				justify-content: center;
				align-items: center;
				width:46px;
				height:46px;
				border-radius:50%;
				background:var(--local-color-005);
				color:var(--local-color-009);
			}
			.sidebar > .left .header .exit:hover,
			.sidebar > .left .header .back:hover{
				background:var(--color-black-500);
				color:var(--color-white);
				cursor: pointer; 
			}
			.sidebar > .left .header .exit::before{
				content: "\e801";
				font-family: framework_icon;
				font-size: 24px;
			}
			.sidebar > .left .header .back::before{
				content: "\e909";
				font-family: dashboard_flexible_icon;
				font-size: 24px;
			}
			@media screen and (max-width: 1200px) {
				.sidebar > .left .header{
					display:flex;
				}
			}
		/*-------- //header --------*/
		/*-------- avatar --------*/
			.sidebar > .left .avatar {
				position: relative;
				width: 120px;
				height: 120px;
				margin: 20px 0px 8px 0px;
				border-radius:50%;
			}
			/*---- image ----*/
				.sidebar > .left .avatar .image {
					width: 100%;
					height: 100%;
					border-radius:50%;
					overflow:hidden;
				}
				.sidebar > .left .avatar .image img {
					width: 100%;
				}
				.sidebar > .left .avatar .f_tag {
					position: absolute;
					bottom: -4px;
					right: -23px;
					width: 56px;
					height: 56px;
					color:var(--color-black-500);
					background: var(--local-color-004);
					border: 8px solid var(--color-white);
				}
				.sidebar > .left .avatar .f_tag[class*="icon_"]{
					line-height:40px;
					font-size:20px;
				}
				.sidebar > .left .avatar .f_tag:hover {
					color:var(--color-white);
					background: var(--color-black-500);
				}
			/*---- //image ----*/
			/*---- info ----*/
				.sidebar > .left > .info {
					display: flex; 
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin: 10px 0px 10px 0px;
				}
				.sidebar > .left > .info .name {
					white-space: nowrap;
					margin: 0px 105px 0px 105px;
					font-size: 22px;
					font-weight: 700;
					color: var(--local-color-001);
				}
				.sidebar > .left > .info .phone {
					margin: 2px 0px 0px 0px;
					font-size: 16px;
					font-weight: 600;
					direction: ltr;
					color: var(--local-color-009);
				}
			/*---- //info ----*/
		/*-------- //avatar --------*/
		/*-------- nav --------*/
			.sidebar > .left nav {
				display: flex; 
				justify-content: flex-start;
				align-items: center;
				flex-direction: column;
				width:100%;
			}
			/*---- filter ----*/
				.sidebar > .left nav .filter {
					width:82%;
					margin:10px 0px 10px 0px;
				}
				.sidebar > .left nav .filter:focus-within { 
					width: 100%;
					padding:0px 9% 0px 9%; 
					background-color: var(--local-color-005);
				}
				.sidebar > .left nav .filter .f_form {
					margin:0px;
				}
				.sidebar > .left nav .filter .f_o_feature {
					border:none;
					background-color: var(--local-color-005);
				}
				.sidebar > .left nav .filter .f_o_feature:focus-within {
					box-shadow: none;
				}
				.sidebar > .left nav .filter .f_o_feature .f_tooltip{
					border:none;
				}
				.sidebar > .left nav .filter .f_o_feature input {
					width:100%;
					height: 55px;
					background-color: var(--local-color-005);
					padding:5px;
				}
				.sidebar > .left nav .filter .f_o_feature input:focus {
					color: var(--color-black-500);
				}
				.sidebar > .left nav .filter .f_o_feature .f_o_box{
					margin:0px 6px 0px 6px;
				}
				/*search*/
					.sidebar > .left nav .filter .f_o_feature .f_o_box .search{
						position:relative;
						display:flex;
						justify-content:center;
						align-items: center;
						width:40px;
						height:40px;
						border-radius:50%;
						text-align:center;
						line-height:23px;
						color:var(--local-color-006);
						margin:0px 0px 0px 0px;
					}
					.sidebar > .left nav .filter .f_o_feature .f_o_box .search:hover{
						cursor: pointer;
					}
					.sidebar > .left nav .filter .f_o_feature .f_o_box .search::before{
						content: '\e907';
						font-family: "dashboard_flexible_icon";
						font-size:20px;
					}
					.sidebar > .left nav .filter:focus-within .f_o_feature .f_o_box .search {
						color: var(--local-color-002);
					}
				/*clear*/
					.sidebar > .left nav .filter .f_o_feature .f_o_box .f_o_clear{
						width:40px;
						height:40px;
						background:none;
					}
					.sidebar > .left nav .filter .f_o_feature .f_o_box .f_o_clear::before{
						font-size:24px;
					}
					.sidebar > .left nav .filter:focus-within .f_o_feature .f_o_box .f_o_clear{
						color: var(--local-color-002);
					}
			/*---- //filter ----*/
			/*---- line ----*/
				.sidebar > .left nav .line {
					width: 82%;
					height:1px;
					background:var(--local-color-007);
					margin:24px 0px 24px 0px;
				}
			/*---- //line ----*/
			/*---- ul ----*/
				.sidebar > .left nav ul {
					display: flex; 
					justify-content: flex-start;
					align-items: center;
					flex-direction: column;
					width:100%;
				}
				.sidebar > .left nav ul li {
					width:100%;
				}
				.sidebar > .left nav ul li:hover,
				.sidebar > .left nav .dropdown.open:hover {
					background-color: var(--local-color-010);
				}
				/*mother*/
					.sidebar > .left nav ul li .mother {
						position: relative;
						padding:9px 9% 9px 9%;
						font-size: 17px;
						font-weight: 500;
						line-height: 36px;
						color: var(--color-black-400);
						cursor: pointer;
					}
					.sidebar > .left nav ul li .mother::after {
						content: "\e800";
						font-family: framework_icon;
						font-size: 15px;
						position: absolute;
						top: 50%;
						left: 9%;
						transform: translateY(-50%);
						color: var(--local-color-002);
						transition: transform var(--transition-normal) ease;
						pointer-events: none;
					}
					.sidebar > .left nav ul li.open .mother::after {
						transform: translateY(-50%) rotate(-90deg);
					}
				/*dropdown*/
					.sidebar > .left nav .dropdown > ul {
						position: relative;
						padding: 0px 12% 0px 12%;
						margin: 0px 0px 20px 0px;
					}
					.sidebar > .left nav .dropdown ul::after {
						position: absolute;
						content: "";
						top: 12px;
						right: 12%;    
						width: 2px;     
						height: calc(100% - 29px);
						background: var(--local-color-008);
					}
					.sidebar > .left nav .dropdown.open {
						background-color: var(--local-color-005);
					}
					.sidebar > .left nav .dropdown > ul {
						display: none;
					}
					.sidebar > .left nav .dropdown.open > ul {
						display: block;
					}
					/*child*/
						.sidebar > .left nav .dropdown ul .child {
							position: relative;
							padding: 0px 6% 0px 0%;
							line-height:36px;
						} 
						.sidebar > .left nav .dropdown ul .child::before {
							position: absolute;
							content: "";
							width: 8px;
							height: 8px;
							border-radius: 50%;
							outline: 2px solid var(--local-color-005);
							background: var(--local-color-002);
							top: 50%;
							right: 0%;
							transform: translate(40%, -50%);
							pointer-events: none;
							z-index: 1;
						}
					/*child_mother*/
						.sidebar > .left nav .dropdown ul .child_mother{
							position: relative;
							padding: 0px 8% 0px 0%;
							line-height:36px;
						} 
						.sidebar > .left nav .dropdown ul .child_mother::before {
							position: absolute;
							content: "";
							width: 18px;
							height: 18px;
							border-radius: 50%;
							outline: 2px solid var(--local-color-005);
							background: var(--local-color-002);
							top: 50%;
							right: 0%;
							transform: translate(44%, -50%);
							pointer-events: none;
							z-index: 1;
						}  
						.sidebar > .left nav .dropdown ul .child_mother::after {
							position: absolute;
							content: "\e800";
							font-family: framework_icon;
							font-size: 10px;
							top: 50%;
							right: 0%;
							pointer-events: none;
							color:var(--color-white);
							transform: translate(22%, -50%);
							z-index: 2;
							transition: transform var(--transition-normal) ease;
						} 
						.sidebar > .left nav .dropdown ul .open .child_mother::after{
							transform: translate(22%, -50%) rotate(-90deg);
						}
						.sidebar > .left nav .dropdown ul li ul{
							display:none;
						}
						.sidebar > .left nav .dropdown ul li.open ul{
							display: block;
						}
					/*grandchild*/
						.sidebar > .left nav .dropdown ul .grandchild {
							position: relative;
							padding: 0px 20% 0px 0%;
							line-height:36px;
						}
						.sidebar > .left nav .dropdown ul .grandchild::before {
							position: absolute;
							content: "";
							width: 8px;
							height: 8px;
							border-radius: 50%;
							outline: 2px solid var(--local-color-005);
							background: var(--local-color-002);
							top: 50%;
							right: 16%;
							transform: translate(40%, -50%);
							pointer-events: none;
							z-index: 1;
						}
						.sidebar > .left nav .dropdown ul .grandchild::after {
							content: "";
							position: absolute;
							top: 46%;
							right: 0px;
							width: 16%;
							height: 2px; 
							background: var(--local-color-008);
						}
					/*hover*/
						.sidebar > .left nav .dropdown ul a{
							color:var(--local-color-006);
						}
						.sidebar > .left nav .dropdown ul a:hover{
							color:var(--color-black-500);
						}
						.sidebar > .left nav .dropdown ul .child:hover,
						.sidebar > .left nav .dropdown ul .child_mother:hover,
						.sidebar > .left nav .dropdown ul .grandchild:hover{
							cursor: pointer;
						}
						.sidebar > .left nav .dropdown ul .child:hover::before,
						.sidebar > .left nav .dropdown ul .child_mother:hover::before,
						.sidebar > .left nav .dropdown ul .grandchild:hover::before{
							cursor: pointer;
							outline: 2px solid var(--color-white);
							background:var(--color-black-500);
						}
			/*---- //ul ----*/
		/*-------- //nav --------*/
		/*-------- setting --------*/
			.sidebar > .left .setting {
				position: absolute;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				top: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100vh;
				background: var(--color-white);
				transform: translateX(100%);
				transition: transform var(--transition-slow) ease;
				overflow-x: hidden;
				overflow-y: auto;
				z-index:100;
			}
			.sidebar > .left .setting.open {
				display:flex;
				transform: translateX(0%);
			}
			.sidebar > .left .setting .header{
				display:flex;
			}
			/*---- box -----*/
				.sidebar > .left .setting .box{
					width:82%;
					margin:0px 0px 20px 0px;
				}
				.sidebar > .left .setting .box .info{
					margin:20px 0px 20px 0px;
				}
				.sidebar > .left .setting .box .info .title{
					font-size:18px;
					font-weight: 500;
					line-height:30px;
					color:var(--color-black-400);
				}
				.sidebar > .left .setting .box .info .description{
					font-size:14px;
					color:var(--local-color-011);
				}
			/*---- //box -----*/
		/*-------- //setting --------*/
	/*------------ //left ------------*/
/*---------------- //sidebar ----------------*/




/*---------------- main_body ----------------*/
.main_body{
	width:100%;
	height: auto;
	overflow:hidden;
	margin-right:416px;
	padding:20px 4% 20px 4%;
}
.main_body .f_row {
	--local-gutter-x: 30px;
	--local-gutter-y: 30px;
}
@media screen and (max-width: 1200px) {
	.main_body{
		padding-top:0px;
		margin-right:0px;
	}
}
@media screen and (max-width: 992px) {
	.main_body .f_row {
		--local-gutter-x: 25px;
		--local-gutter-y: 25px;
	}
}
@media screen and (max-width: 768px) {
	.main_body .f_row {
		--local-gutter-x: 20px;
		--local-gutter-y: 20px;
	}
}
@media screen and (max-width: 576px) {
	.main_body .f_row {
		--local-gutter-x: 15px;
		--local-gutter-y: 15px;
	}
}
	/*------------ header ------------*/
		.main_body > .header{
			display:flex;
			justify-content:space-between;
			height:auto;
			min-height:46px;
			padding:0px 0px 20px 0px;
			margin:0px 0px 30px 0px;
			border-bottom:1px solid var(--local-color-007);
		}
		@media screen and (max-width: 1200px) {
			.main_body > .header{
				align-items:center;
				min-height:60px;
				padding:10px 0px 10px 0px;
			}
		}
		/*-------- breadcrumb --------*/
			.main_body > .header .f_breadcrumb_s1{
				display:flex;
				align-items:center;
			}
			@media screen and (max-width: 1200px) {
				.main_body > .header .f_breadcrumb_s1{
					margin:0px;
				}
			}
			.main_body > .header .f_breadcrumb_s1 .f_item a{
				color:var(--local-color-009);
			}
			.main_body > .header .f_breadcrumb_s1 .f_item a:hover{
				color:var(--color-black-500);
			}
		/*-------- //breadcrumb --------*/
		/*-------- shortcut --------*/
			.main_body > .header .shortcut{
				position:relative;
				display:flex;
				justify-content:end;
				flex-wrap: wrap; 
				gap: 12px;
				width:auto;
			}
			.main_body > .header .shortcut [data-f-toggle="tooltip_js"]{
				border:none;
			}
			.main_body > .header .shortcut a{
				font-weight: bold;
			}
			.main_body > .header .shortcut .item{
				display: flex;
				justify-content: center;
				align-items: center; 
				width:46px;
				height:46px;
				background:var(--local-color-005);
				color:var(--local-color-009);
				border-radius:50%;
			}
			.main_body > .header .shortcut .item.phone_number{
				width:auto;
				background:none;
				color:var(--color-black-200);
				direction: ltr;
				font-weight: 500;
			}
			.main_body > .header .shortcut .item.phone_number:hover{
				background:none;
				color:var(--color-black-500);
			}
			.main_body > .header .shortcut .item.phone:before{
				content: "\e910";
				font-family: dashboard_flexible_icon;
				font-size: 24px;
			}
			.main_body > .header .shortcut .item.help:before{
				content: "\e90f";
				font-family: dashboard_flexible_icon;
				font-size: 24px;
			}
			.main_body > .header .shortcut .item.credit{
				width:auto;
				white-space: nowrap;
				background:var(--local-color-004);
				color:var(--color-black-500);
				border-radius:var(--local-radius-001);
				padding:0px 24px 0px 24px;
				font-weight: bold;
			}
			.main_body > .header .shortcut .item:hover{
				background:var(--color-black-500);
				color:var(--color-white);
				cursor: pointer;
			}
			@media screen and (max-width: 1200px) {
				.main_body > .header .shortcut{
					gap: 0px;
					padding:0px 12px 0px 0px;
				}
				.main_body > .header .shortcut .item{
					width:30px;
					height:30px;
				}
				.main_body > .header .shortcut .item.phone_number{
					display:none;
				}
				.main_body > .header .shortcut .item.phone{
					display:none;
				}
				.main_body > .header .shortcut .item.help:before{
					font-size: 16px;
				}
				.main_body > .header .shortcut .item.credit{
					display:none;
				}
			}
		/*-------- //shortcut --------*/
	/*------------ //header ------------*/
	
	/*------------ footer ------------*/
		.main_body .footer{
			display:flex;
			justify-content:space-between;
			min-height:66px;
			padding:20px 0px 0px 0px;
			margin:0px 0px 0px 0px;
			border-top:1px solid var(--local-color-007);
		}
		/*-------- copyright --------*/
			.main_body .footer .copyright{
				display:flex;
				gap:30px;
			}
			/*---- barnd ----*/
				.main_body .footer .copyright .barnd .f_left{
					display:flex;
					align-items:center;
					justify-content:center;
					padding-right:10px;
					padding-left:10px;
				}
				.main_body .footer .copyright .barnd .f_left .name{
					position:relative;
					padding:0px 20px 0px 0px;
				}
				.main_body .footer .copyright .barnd .f_left .name::before{
					content: "|";
					position:absolute;
					top:0px;
					right:8px;
				}
			/*---- //barnd ----*/
			/*---- version ----*/
				.main_body .footer .copyright .version .f_left{
					display:flex;
					align-items:center;
					justify-content:center;
					padding-right:10px;
					padding-left:10px;
				}
				.main_body .footer .copyright .version .f_left .name{
					position:relative;
					padding:0px 20px 0px 0px;
				}
				.main_body .footer .copyright .version .f_left .name::before{
					content: "|";
					position:absolute;
					top:0px;
					right:8px;
				}
			/*---- //version ----*/
		/*-------- //copyright --------*/
	/*------------ //footer ------------*/
	
	/*------------ box ------------*/
		.main_body .box {
			justify-content:start;
			align-items:center;
			background:var(--color-white);
			box-shadow:var(--local-shadow-003);
			border-radius:var(--local-radius-002);
			border:1px solid var(--local-color-012);
			margin: 0px 0px 30px 0px;
			padding: 30px 30px;
			box-sizing: border-box;
		}
		@media screen and (max-width: 992px) {
			.main_body .box {
				margin: 0px 0px 25px 0px;
				padding: 25px 25px;
			}
		}
		@media screen and (max-width: 768px) {
			.main_body .box {
				margin: 0px 0px 20px 0px;
				padding: 20px 20px;
			}
		}
		@media screen and (max-width: 576px) {
			.main_body .box {
				margin: 0px 0px 15px 0px;
				padding: 15px 15px;
			}
		}
		/*-------- header --------*/
			.main_body .box .header{
				display:flex;
				justify-content:space-between;
				padding: 0px 0px 15px 0px;
				flex-wrap: wrap;
			}
			/*---- title ----*/
				.main_body .box .header .title{
					display:flex;
					justify-content:center;
					align-items:center;
					color:var(--local-color-001);
					gap:14px;
					padding: 0px 0px 15px 0px;
				}
				.main_body .box .header .title .icon{
					font-size:26px;
				}
				.main_body .box .header .title .text{
					font-size:18px;
					font-weight: 600;
					margin: 0;
					height: 26px;
					line-height:30px;
				}
			/*---- //title ----*/
			/*---- action ----*/
				.main_body .box .header .action{
					display:flex;
					justify-content:center;
					align-items:center;
					gap:7px;
					padding: 0px 0px 15px 0px;
				}
				.main_body .box .header .action .btn{
					font-size:14px;
					background:var(--local-color-005);
					border-radius:var(--local-radius-001);
					color:var(--local-color-006);
					padding:5px 10px 5px 10px;
					min-height:32px;
				}
				.main_body .box .header .action .btn:hover{
					background:var(--color-black-500);
					color:var(--color-white);
					cursor: pointer; 
				}
				/*f_button*/
					.main_body .box .header .action .f_button{
						margin:0px;
					}
				/*active*/
					.main_body .box .header .action .btn.active{
						background:var(--local-color-004);
						color:var(--color-black-500);
					}
				/*insert*/
					.main_body .box .header .action .btn.insert{
						background:var(--color-blue-500);
						color:var(--color-white);
					}
				/*update*/
					.main_body .box .header .action .btn.update{
						background:var(--color-green-500);
						color:var(--color-white);
					}
				/*delete*/
					.main_body .box .header .action .btn.delete{
						background:var(--color-red-500);
						color:var(--color-white);
					}
				/*hover (active && insert && update && delete)*/
					.main_body .box .header .action .btn.active:hover,
					.main_body .box .header .action .btn.insert:hover,
					.main_body .box .header .action .btn.update:hover,
					.main_body .box .header .action .btn.delete:hover{
						background:var(--color-black-500);
						color:var(--color-white);
						cursor: pointer; 
					}
				/*arrow*/
					.main_body .box .header .action .btn.arrow {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						aspect-ratio: 1 / 1; 
						border:1px solid var(--local-color-007);
						background:var(--color-white);
						color:var(--local-color-006);
						box-sizing: border-box;
						transition: transform var(--transition-normal) ease;
					}
					.main_body .box .header .action .btn.arrow::before{
						content: "\e800";
						font-family:framework_icon;
						display: inline-block;
					}
					.main_body .box .header .action .btn.arrow:hover {
						background:var(--color-black-500);
						border:none;
						color:var(--color-white);
						cursor: pointer; 
					}
					.main_body .box.dropdown.open .header .action .btn.arrow {
						transform: rotate(-90deg);
					}
					.main_body .box.dropdown_responsive.open .header .action .btn.arrow {
						transform: rotate(-90deg);
					}
			/*---- //action ----*/
		/*-------- //header --------*/
		/*-------- dropdown --------*/
			.main_body .box.dropdown{
				padding: 30px 30px 15px 30px;
			}
			@media screen and (max-width: 992px) {
				.main_body .box.dropdown{
					padding: 25px 25px 10px 25px;
				}
			}
			@media screen and (max-width: 768px) {
				.main_body .box.dropdown{
					padding: 20px 20px 5px 20px;
				}
			}
			@media screen and (max-width: 576px) {
				.main_body .box.dropdown{
					padding: 15px 15px 0px 15px;
				}
			}
			.main_body .box.dropdown .body{
				display:none;
			}
			.main_body .box.dropdown .header{
				padding:0px;
			}
			/*---- open ----*/
				.main_body .box.dropdown.open{
					padding: 30px 30px;
				}
				@media screen and (max-width: 992px) {
					.main_body .box.dropdown.open{
						padding: 25px 25px;
					}
				}
				@media screen and (max-width: 768px) {
					.main_body .box.dropdown.open{
						padding: 20px 20px;
					}
				}
				@media screen and (max-width: 576px) {
					.main_body .box.dropdown.open{
						padding: 15px 15px;
					}
				}
				.main_body .box.dropdown.open .body{
					display:block;
				}
				.main_body .box.dropdown.open .header{
					padding:0px 0px 15px 0px;
				}
				@media screen and (max-width: 992px) {
					.main_body .box.dropdown.open .header{
						padding:0px 0px 10px 0px;
					}
				}
				@media screen and (max-width: 768px) {
					.main_body .box.dropdown.open .header{
						padding:0px 0px 5px 0px;
					}
				}
				@media screen and (max-width: 576px) {
					.main_body .box.dropdown.open .header{
						padding:0;
					}
				}
			/*---- //open ----*/
		/*-------- //dropdown --------*/
		/*-------- dropdown_responsive --------*/
			.main_body .box.dropdown_responsive .header .action{
				display:none;
			}
			@media screen and (max-width: 1200px) {
				.main_body .box.dropdown_responsive{
					padding:30px 30px 15px 30px;
				}
				@media screen and (max-width: 992px) {
					.main_body .box.dropdown_responsive{
						padding:25px 25px 10px 25px;
					}
				}
				@media screen and (max-width: 768px) {
					.main_body .box.dropdown_responsive{
						padding:20px 20px 5px 20px;
					}
				}
				@media screen and (max-width: 576px) {
					.main_body .box.dropdown_responsive{
						padding:15px 15px 0px 15px;
					}
				}
				.main_body .box.dropdown_responsive .body{
					display:none;
				}
				.main_body .box.dropdown_responsive .header{
					padding:0;
				}
				.main_body .box.dropdown_responsive .header .action{
					display:flex;
				}
				/*---- open ----*/
					.main_body .box.dropdown_responsive.open{
						padding:30px;
					}
					@media screen and (max-width: 992px) {
						.main_body .box.dropdown_responsive.open{
							padding:25px;
						}
					}
					@media screen and (max-width: 768px) {
						.main_body .box.dropdown_responsive.open{
							padding:20px;
						}
					}
					@media screen and (max-width: 576px) {
						.main_body .box.dropdown_responsive.open{
							padding:15px;
						}
					}
					.main_body .box.dropdown_responsive.open .header{
						padding: 0px 0px 15px 0px;
					}
					@media screen and (max-width: 992px) {
						.main_body .box.dropdown_responsive.open .header{
							padding: 0px 0px 10px 0px;
						}
					}
					@media screen and (max-width: 768px) {
						.main_body .box.dropdown_responsive.open .header{
							padding: 0px 0px 5px 0px;
						}
					}
					@media screen and (max-width: 576px) {
						.main_body .box.dropdown_responsive.open .header{
							padding: 0px 0px 0px 0px;
						}
					}
					.main_body .box.dropdown_responsive.open .body{
						display:block;
					}
				/*---- //open ----*/
			}
		/*-------- //dropdown_responsive --------*/
		/*-------- f_tab_s1 --------*/
			.main_body .box .f_tab_s1 .f_header{
				padding-bottom: 0px !important;
				justify-content: start !important;
			}
			.main_body .box .f_tab_s1 .f_body .header{
				border:none;
			}
		/*-------- //f_tab_s1 --------*/
	/*------------ //box ------------*/
/*---------------- //main_body ----------------*/



/*---------------- line ----------------*/
.line_s1{
	width:100%;
	height:1px;
	background:var(--local-color-007);
}
.line_s1.ma_5{
	margin:5px 0px 5px 0px;
}
.line_s1.ma_10{
	margin:10px 0px 10px 0px;
}
.line_s1.ma_15{
	margin:15px 0px 15px 0px;
}
.line_s1.ma_20{
	margin:20px 0px 20px 0px;
}
.line_s1.ma_25{
	margin:25px 0px 25px 0px;
}
.line_s1.ma_30{
	margin:30px 0px 30px 0px;
}
/*---------------- //line ----------------*/



/*---------------- space ----------------*/
.space_s1.he_80{
	width:100%;
	height:80px;
}
/*---------------- //space ----------------*/




/*---------------- //list ----------------*/
	/*------------ s1 ------------*/
		.list_s1{
			display:flex;
			flex-wrap: wrap;
		}
		.list_s1 .item{
			position:relative;
			padding:5px 0px 5px 21px;
		}
		.list_s1 .item::after{
			content: "";
			position:absolute;
			top:8px;
			left:10px;
			width:1px;
			height:20px;
			background:var(--local-color-007);
		}
		.list_s1 .item:last-child::after {
			content: none;
		}
		.list_s1 .item a{
			color:var(--color-black-500);
		}
		.list_s1 .item a:hover{
			color:var(--color-blue-500);
		}
	/*------------ //s1 ------------*/
	/*------------ s2 ------------*/
		.list_s2{
			display:flex;
			flex-direction: column;
		}
		.list_s2 .item{
			display:flex;
			flex-wrap: wrap;
			margin:5px 0px 5px 0px;
		}
		.list_s2 .item .title{
			display:flex;
			align-items:center;
			margin:0px 0px 0px 10px;
			font-weight:500;
		}
		.list_s2 .item .f_tag{
			background:var(--local-color-005);
			color:var(--color-black-500);
		}
	/*------------ //s2 ------------*/
	/*------------ s3 ------------*/
		.list_s3{
			display:flex;
			flex-direction: column;
		}
		.list_s3 .item{
			display:flex;
			flex-wrap: wrap;
			margin:8px 0px 8px 0px;
			gap:10px;
		}
		.list_s3 .item .title{
			flex: calc(50% - 10px);
			font-weight:500;
		}
		.list_s3 .item .value{
			flex:50%;
		}
	/*------------ //s3 ------------*/
	/*------------ s4 ------------*/
		.list_s4{
			display:flex;
			flex-direction: column;
		}
		.list_s4 .item{
			display:flex;
			flex-wrap: wrap;
			padding:12px 0px 12px 0px;
			gap:10px;
		}
		.list_s4 .item:nth-child(even) {
			background: var(--local-color-005);
		}
		.list_s4 .item .title{
			flex: calc(50% - 10px);
			font-weight:500;
		}
		.list_s4 .item .value{
			flex:50%;
		}
	/*------------ //s4 ------------*/
/*---------------- //list ----------------*/




/*---------------- widget ----------------*/
	/*------------ widget__time ------------*/
		.widget__time{
			position:relative;
			display: flex;
			flex-wrap: nowrap;
			height:70px;
			overflow-x: auto;
			overflow-y: hidden;
		}
		.widget__time .item{
			position:relative;
			display:flex;
			flex-shrink: 0;
			white-space: nowrap;
			padding:0px 0px 0px 56px;
		}
		.widget__time .item::after{
			content: "";
			position:absolute;
			top:0px;
			left:28px;
			width:1px;
			height:20px;
			background:var(--local-color-007);
		}
		.widget__time .item:last-child {
			padding:0px;
		}
		.widget__time .item:last-child::after {
			content: none;
		}
		.widget__time .item .title{
			position:relative;
		}
		.widget__time .item .title::after{
			content: ":";
			position:absolute;
			top:0px;
			left:-10px;
		}
		.widget__time .item .value{
			margin:0px 20px 0px 0px;
		}
	/*------------ //widget__time ------------*/

	/*------------ widget__summary ------------*/
		.widget__summary{
			margin:0px 0px 30px 0px;
		}
		@media screen and (max-width: 992px) {
			.widget__summary{
				margin:0px 0px 25px 0px;
			}
		}
		@media screen and (max-width: 768px) {
			.widget__summary{
				margin:0px 0px 20px 0px;
			}
		}
		@media screen and (max-width: 576px) {
			.widget__summary{
				margin:0px 0px 15px 0px;
			}
		}
		.widget__summary .box{
			position:relative;
			display:flex;
			justify-content:center;
			align-items:center;
			min-height:152px;
			margin:0px;
		}
		.widget__summary .box .icon{
			position:absolute;
			top:30px;
			right:30px;
			font-size:30px;
			color:var(--local-color-013);
		}
		@media screen and (max-width: 992px) {
			.widget__summary .box .icon{
				top:25px;
				right:25px;
			}
		}
		@media screen and (max-width: 768px) {
			.widget__summary .box .icon{
				top:20px;
				right:20px;
			}
		}
		@media screen and (max-width: 576px) {
			.widget__summary .box .icon{
				top:15px;
				right:15px;
			}
		}
		.widget__summary .box .info .number{
			font-size:50px;
			font-weight:bold;
			text-align:center;
			line-height:50px;
			color:var(--local-color-001);
		}
		.widget__summary .box .info .title{
			font-size:17px;
			text-align:center;
			line-height:22px;
			color:var(--local-color-009);
		}
	/*------------ //widget__summary ------------*/

	/*------------ widget__chart ------------*/
		/*-------- stats --------*/
			.widget__chart .stats {
				display:flex;
				flex-wrap: nowrap;
				width:calc(100% + 60px);
				height:80px;
				margin-left: -30px;
				margin-right: -30px;
				margin-bottom: 30px;
				background:var(--local-color-005);
				overflow-x: auto;
				overflow-y: hidden;
			}
			@media screen and (max-width: 992px) {
				.widget__chart .stats {
					width:calc(100% + 50px);
					margin-left: -25px;
					margin-right: -25px;
					margin-bottom: 25px;
				}
			}
			@media screen and (max-width: 768px) {
				.widget__chart .stats {
					width:calc(100% + 40px);
					margin-left: -20px;
					margin-right: -20px;
					margin-bottom: 20px;
				}
			}
			@media screen and (max-width: 576px) {
				.widget__chart .stats {
					width:calc(100% + 30px);
					margin-left: -15px;
					margin-right: -15px;
					margin-bottom: 15px;
				}
			}
			.widget__chart .stats .item{
				display:flex;
				justify-content:center;
				align-items:center;
				flex-direction: column;
				flex:1;
				white-space: nowrap;
				min-width:220px;
			}
			.widget__chart .stats .item .number{
				font-size:20px;
				font-weight: 600;
				color:var(--local-color-001);
			}
			.widget__chart .stats .item .title{
				font-size:14px;
				color:var(--local-color-006);
			}
		/*-------- //stats --------*/
		/*-------- chart --------*/
			.widget__chart .chart {
				width: 100%;
				height: 360px;
				position: relative;
			}
		/*-------- //chart --------*/
	/*------------ //widget__chart ------------*/
/*---------------- //widget ----------------*/




/*---------------- page ----------------*/
	/*------------ user_file ------------*/
		.page__user_file {
			margin: 0 0 30px 0;
		}
		.page__user_file .box {
			margin: 0;
		}
		/*-------- profile --------*/
			.page__user_file .box.profile {
				overflow:hidden;
				position: relative;
				padding: 0;
			}
			/*---- avatar ----*/
				.page__user_file .box.profile .avatar {
					position: relative;
					height: 160px;
					background: var(--local-gradient-001);
					display: flex;
					justify-content: center;
					align-items: flex-end;
				}
				.page__user_file .box.profile .avatar::before {
					content: "";
					position: absolute;
					width: 1920px;
					height: 524px;
					bottom: -100px;
					right: 0;
					opacity: 1;
					background: url(../image/pattern.svg) no-repeat;
					background-size: 1920px 524px;
					background-position: 400px bottom;
					pointer-events: none;
					z-index: 1;
				}
				/*image*/
					.page__user_file .box.profile .avatar .image {
						width: 120px;
						height: 120px;
						border-radius: 50%;
						overflow: hidden;
						outline: 8px solid var(--color-white);
						margin: 0 0 -24px 0;
						z-index: 2;
					}
					.page__user_file .box.profile .avatar .image img {
						width: 100%;
					}
				/*btn*/
					.page__user_file .box.profile .avatar .btn {
						position: absolute;
						width: 40px;
						height: 40px;
						color: var(--color-black-500);
						background: var(--local-color-004);
						outline: 8px solid var(--color-white);
						border: none;
						margin: -20px -10px 0 0;
						z-index: 3;
						border-radius: 50%;
					}
					.page__user_file .box.profile .avatar .btn[class*="icon_"] {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24px;
					}
					.page__user_file .box.profile .avatar .btn:hover {
						color: var(--color-white);
						background: var(--color-black-500);
					}
			/*---- //avatar ----*/
			/*---- info ----*/
				.page__user_file .box.profile .info {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					padding: 0 30px;
					margin: 40px 0 10px;
				}
				.page__user_file .box.profile .info .name {
					white-space: nowrap;
					margin: 0 105px;
					font-size: 22px;
					font-weight: 700;
					color: var(--local-color-001);
				}
				.page__user_file .box.profile .info .phone {
					margin-top: 2px;
					font-size: 16px;
					font-weight: 600;
					direction: ltr;
					color: var(--local-color-009);
				}
				.page__user_file .box.profile .info a {
					width: 100%;
				}
				.page__user_file .box.profile .info .credit {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 46px;
					background: var(--local-color-004);
					color: var(--color-black-500);
					border-radius: var(--local-radius-001);
					padding: 0 24px;
					font-weight: bold;
					margin-top: 20px;
				}
				.page__user_file .box.profile .info .credit:hover {
					background: var(--color-black-500);
					color: var(--color-white);
				}
			/*---- //info ----*/
			/*---- body ----*/
				.page__user_file .box.profile .body {
					padding: 30px;
				}
				.page__user_file .box.profile .body .f_tab_s1 .f_header li{
					width:50%;
				}
				@media screen and (max-width: 1700px) {
					.page__user_file .box.profile .body .f_tab_s1 .f_header li{
						width:100%;
					}
				}
			/*---- //body ----*/
			@media screen and (max-width: 1399px) {
				.page__user_file .box.profile {
					min-height: auto;
				}
				.page__user_file .box.profile .avatar {
					height: 120px;
					padding: 30px;
					justify-content: flex-start;
					align-items: flex-start;
				}
				@media screen and (max-width: 992px) {
					.page__user_file .box.profile .avatar {
						height: 110px;
						padding: 25px;
					}
				}
				@media screen and (max-width: 768px) {
					.page__user_file .box.profile .avatar {
						height: 100px;
						padding: 20px;
					}
				}
				@media screen and (max-width: 576px) {
					.page__user_file .box.profile .avatar {
						height: 90px;
						padding: 15px;
					}
				}
				.page__user_file .box.profile .avatar .image {
					width: 44px;
					height: 44px;
					margin: 8px 8px 0 0;
					outline: none;
				}
				.page__user_file .box.profile .avatar .btn {
					display: none;
				}
				.page__user_file .box.profile .avatar .btn[class*="icon_"] {
					display: none;
				}
				.page__user_file .box.profile .info {
					height: 60px;
					position: absolute;
					top: 30px;
					right: 30px;
					background: var(--color-white);
					border-radius: 50px;
					padding: 0 70px 0 30px;
					margin: 0;
					align-items: start;
				}
				@media screen and (max-width: 992px) {
					.page__user_file .box.profile .info {
						top: 25px;
						right: 25px;
					}
				}
				@media screen and (max-width: 768px) {
					.page__user_file .box.profile .info {
						top: 20px;
						right: 20px;
					}
				}
				@media screen and (max-width: 576px) {
					.page__user_file .box.profile .info {
						top: 15px;
						right: 15px;
					}
				}
				.page__user_file .box.profile .info .name {
					margin: 0;
				}
				.page__user_file .box.profile .info .credit {
					display: none;
				}
				.page__user_file .box.profile .body {
					display: none;
				}
				.page__user_file .box.profile .body .f_tab_s1 .f_header li{
					width:50%;
				}
				.page__user_file .box.profile .arrow {
					position: absolute;
					top: 44px;
					left: 30px;
					width: 32px;
					height: 32px;
					background: var(--color-white);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					transition: transform var(--transition-normal) ease;
				}
				@media screen and (max-width: 992px) {
					.page__user_file .box.profile .arrow {
						top: 39px;
						left: 25px;
					}
				}
				@media screen and (max-width: 768px) {
					.page__user_file .box.profile .arrow {
						top: 34px;
						left: 20px;
					}
				}
				@media screen and (max-width: 576px) {
					.page__user_file .box.profile .arrow {
						top: 29px;
						left: 15px;
					}
				}
				.page__user_file .box.profile .arrow:hover {
					color: var(--color-white);
					background: var(--color-black-500);
				}
				.page__user_file .box.profile .arrow::before {
					content: "\e800";
					font-family: framework_icon;
					font-size: 16px;
				}
				/*---- open ----*/
					.page__user_file .box.profile.open .arrow {
						transform: rotate(-90deg);
					}
					.page__user_file .box.profile.open .avatar {
						height: 160px;
						padding: 0;
						display: flex;
						justify-content: center;
						align-items: flex-end;
					}
					.page__user_file .box.profile.open .avatar .image {
						width: 120px !important;
						height: 120px !important;
						margin: 0 0 -24px 0 !important;
						outline: 8px solid var(--color-white);
					}
					.page__user_file .box.profile.open .avatar .btn {
						display: flex;
					}
					.page__user_file .box.profile.open .info {
						position: static;
						background: none;
						border-radius: 0;
						padding: 0 30px;
						margin: 40px 0 10px;
						height: auto;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.page__user_file .box.profile.open .info .credit {
						display: flex;
					}
					.page__user_file .box.profile.open .body {
						display: block;
						padding: 30px;
					}
				/*---- //open ----*/
			}
		/*-------- //profile --------*/
	/*------------ //user_file ------------*/
/*---------------- //page ----------------*/




/*---------------- login ----------------*/
	.login {
		height: 100dvh;
		overflow: hidden;
	}
	.login main {
		display: flex;
		justify-content: center;
		align-items: center;
		width:100%;
		height: 100dvh;
		gap: 0;
	}
	@media screen and (max-width: 1200px) {
		.login {
			height: auto;
			overflow: scroll;
		}
		.login header{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.login main {
			height: auto;
			min-height: 80dvh;
		}
	}
	/*------------ right ------------*/
		.login main > .right{
			position:relative;
			flex: 0 0 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: var(--local-gradient-001);
			height:100%;
		}
		.login main > .right::before {
			content: "";
			position: absolute;
			width: 1920px;
			height: 524px;
			bottom: -100px;
			right: -5px;
			opacity: 1;
			background: url(../image/pattern.svg) no-repeat;
			background-size: 1920px 524px;
			background-position: 800px bottom;
			pointer-events: none;
			z-index: 1;
		}
		@media screen and (max-width: 1200px) {
			.login main > .right{
				display:none;
			}
		}
		/*-------- logo --------*/
			.login main > .right .logo{
				width:50%;
				max-width:300px;
			}
			.login main .right .logo img{
				width:100%;
			}
		/*-------- //logo --------*/
	/*------------ //right ------------*/
	/*------------ left ------------*/
		.login main > .left{
			flex: 0 0 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height:100%;
		}
		@media screen and (max-width: 1200px) {
			.login main > .left {
				display: block;
				padding:50px 0 50px 0;
				flex: 0 0 80%;
			}
		}
		/*-------- box --------*/
			.login main > .left .box{
				width:60%;
			}
			@media screen and (max-width: 1200px) {
				.login main > .left .box{
					width:100%;
				}
			}
			/*---- f_alert ----*/
				.login main > .left .box .f_alert:not(:has(+ .f_alert)) {
					margin: 0 0 30px 0;
				}
			/*---- //f_alert ----*/
			/*---- header ----*/
				.login main > .left .box .header .title{
					font-size:36px;
					font-weight: bold;
					color:var(--local-color-001);
				}
				.login main > .left .box .header .description{
					font-size:18px;
					color:var(--local-color-011);
					margin:10px 0 0 0;
				}
				@media screen and (max-width: 1200px) {
					.login main > .left .box .header .title{
						font-size:30px;
					}
					.login main > .left .box .header .description{
						font-size:16px;
					}
				}
			/*---- //header ----*/
			/*---- form ----*/
				.login main > .left .box .form{
					margin:60px 0 0px 0;
				}
				.login main > .left .box .form .f_button{
					width:100%;
					height:46px;
					margin:0;
					background:var(--local-color-003);
				}
				.login main > .left .box .form .f_button:hover{
					background:var(--color-black-500);
				}
			/*---- //form ----*/
		/*-------- //box --------*/
	/*------------ //left ------------*/
/*---------------- //login ----------------*/