/* CSS Document */
@media only screen and (min-width: 1442px) {
	#main_frame .frame_content ul.t_list li.m_item {
    	width: 22.5%;
    	margin: 0 0 2% 2%;
    }
    
    #main_frame .frame_content ul.t_list li.m_item:nth-child(4n+4) {
    	margin-right: 2%;
    }
    
    #main_frame .frame_content ul.t_list li.m_item:nth-child(4n+1) {
    	clear: left !important;
    }
    
    #main_frame .frame_content ul.t_list li.m_item:nth-child(3n+3) {
    	margin-right: 0;
    }
    
    #main_frame .frame_content ul.t_list li.m_item:nth-child(3n+1) {
    	clear: none;
    }
}

@media only screen and (max-width: 1200px) {
	/*** LIST ITEM : TASK ***/
	#main_frame .frame_content ul.t_list li.m_item { width: 46.25%; margin: 0 0 2.5% 2.5%; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(3n+3) { margin-right: 0; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(3n+1) { clear: none; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(2n+2) { margin-right: 2.5%; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(2n+1) { clear: left; }
	
	/*** FORM HEADER ***/
	.wrap_info .info_content ul.c_form li.qpay_width { /* quater */
		width: 32.33%;
		margin-right: 1%;
	}
	
	/*** FORM HEADER ***/
	.wrap_info .info_content ul.c_form li.qimg_width { /* quater */
		width: 32.33%;
		margin-right: 1%;
	}
	
	/*** NEW TASK : CART LIST ***/
	.wrap_info .info_content ul.c_form .cart_btm .cart_details { width: 33.33%; margin-bottom: 10px; }
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.cola { width: 18%; }
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.colc { width: 80%; }
	
	/*** NEW TASK : PAYMENT LIST */
	.wrap_info .info_content ul.c_form li.f_pay { width: 32.33%; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(4n+1) { clear: none; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(3n+1) { clear: left; }
	
	/*** LOCKER INFO : ITEM LIST ***/
	.wrap_info .info_content ul.c_form li.s_item span.cart_img { width: 24%; margin: 5px 0.5%; }
}

@media only screen and (max-width: 986px) {
   /*** GLOBAL MENU ***/
    #global_menu { left: -60px; }
    #global_menu .menu_wrap .menu_btn { position: fixed; top: 0px; left: 0px; width: 60px; background: rgba(243,245,249,1); }
    #global_menu .menu_wrap ul.menu_list { background: #fff; }

	/*** SIDE BAR ***/
	#global_sidebar { left: 0px; }
}

@media only screen and (max-width: 985px) {
    html { -webkit-tap-highlight-color:rgba(255, 255, 255, 0.2); }
    /*** MENU ***/
    #global_menu .menu_wrap a.a_menu { background: rgba(243,245,249,1) url("../images/icon/ico_menu.png") center no-repeat; background-size: 20px; }

    /*** PAGE CONTAIN ***/
	#global_container { min-width: auto; min-height: auto; }
	
	/*** SIDE BAR ***/
	#global_sidebar { width: 90%; left: -100%; box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; }
	
	/*** CONTENT ***/
	#global_content { padding-left: 0px; }
	#global_content .app_header { width: 100%; padding: 0 2% 0 60px; box-sizing: border-box; }
	
	/*** DASHBOARD ***/
	#global_dash { padding-left: 0px; }
	#global_dash .app_header a.app_logo { margin: 6px 0 6px 60px; }
	
	#main_frame .t_dashboard { overflow: hidden; padding-bottom: 520px !important; }
	#main_frame .t_dashboard .dash_stats { top: 320px; width: 96%; height: 460px; }
    #main_frame .t_dashboard .dash_stats .dash_wrap { width: 96%;	padding-right: 0; }
    #main_frame .t_dashboard .dash_header { padding-left: 0 }
    #main_frame .t_dashboard .dash_items { padding-left: 0; }
	
	#main_frame .t_dashboard .dash_header { margin: 0 0 10px 0; }
	#main_frame .t_dashboard .dash_header h3 { margin-top: 10px; font: 500 14px/20px 'Noto Sans SC', sans-serif; }
    #main_frame .t_dashboard .dash_header h3 small { font: 500 8px/14px 'Noto Sans SC', sans-serif; }
    #main_frame .t_dashboard .dash_header .dash_time { float: left; margin-left: 10px; font: 500 12px/20px 'Noto Sans SC', sans-serif; }

	#main_frame .frame_content .b_dashboard { width: 96%; max-width: 96%; margin: 10px 0 0 0; padding: 2%; overflow: hidden; }
    #main_frame .b_dashboard .scroll_tbl { width: 90%; margin: 15em 0 0 -5.5em; padding: 0 0 6em 8.5em; overflow-x: auto; }

    #main_frame .b_dashboard .sel_graph { position: relative; top: 0; left: 20px; float: left; }
	#main_frame .b_dashboard .sel_graph a.btn_sel { min-width: 0; }
	#q-graph { float: left; margin: 140px 0 0; }
	#ticks { float: left; top: -420px; }
	.dash_tbl { position: relative; float: left; top: 70px; right: 0; width: 100%; margin-bottom: 40px; }
	
	/*** FORM HEADER ***/
	.wrap_info .info_content ul.c_form li.qpay_width { /* quater */
		width: 49%;
		margin-right: 1%;
	}
	
	/*** FORM HEADER ***/
	.wrap_info .info_content ul.c_form li.qimg_width { /* quater */
		width: 49%;
		margin-right: 1%;
	}
	
	/*** NEW ACCOUNT PAGES ***/
	#global_content .app_list .overview_list ul.list_item li { width: 32%; margin-bottom: 20px; }
    #global_content .app_list .overview_list ul.list_item li:nth-child(3n+3) { margin-right: 0; }
    
    #global_content .app_list .summary_left { width: 100%; margin-right: 0; }
    #global_content .app_list .summary_left .left_body .body_item span.h_val { width: 150%; font: 700 10px/16px 'Noto Sans SC', sans-serif; }
    #global_content .app_list .summary_right { width: 100%; margin-top: 30px; }
    #global_content .app_list .summary_right ul.list_item li { width: 48%; margin: 0 4% 20px 0; }
}

@media only screen and (max-width: 769px) {
	/* bigger screens */	
	body {
		min-width: 100%;
		padding: 0px !important;
	}
	
	/* POPUP PAGE : Security Page */
	#popup_page .sec_info { width: 96%; max-width: 96%; min-width: 96%; }
	#popup_page .sec_info .sec_header { width: 90%; padding: 0 5%; }
	#popup_page .sec_info .sec_wrap { width: 90%; padding: 45px 5% 15px 5%; }
	#popup_page .sec_info .sec_wrap .sec_content input.sec_input { width: 90%; padding: 5px 0 5px 10%; }
	
	/* POPUP PAGE : error page */
	#popup_page .err_info { left: 2%; width: 96%; height: 340px; margin: -170px 0 0 0; }
	#popup_page .err_info .err_wrap { width: 90%; padding: 45px 5% 15px 5%; }
	#popup_page .err_info .err_wrap .err_content span.info {width: 90%; padding: 5% 0 5% 40px;}
    #popup_page .err_info .err_wrap a.err_close { left: 5%; width: 42.5%; }
    #popup_page .err_info .err_wrap a.err_view { right: 5%; width: 42.5%; }
    
	/* LOGIN PAGE */
	#global_login .login_wrap { top: 50%; left: 50%; width: 90%; margin: 0; padding: 20px 3%; }
	#global_login .login_wrap input { width: 78%; margin: 20px 5% 0 5%; background-position: 2% center; padding: 15px 2% 15px 10%; }
	
	/*** DROP DOWN LIST [NO BORDER] ***/
	.selection .opt_btn { font: 500 10px/26px 'Noto Sans SC', sans-serif; }	
	
	/*** LIST ITEM : FRAME HEADER ***/
	#main_frame .frame_header .search_wrap input[name=keyword] { width: 80px; }
	#main_frame .frame_header .nav_wrap { right: 1%; font: 500 10px/40px 'Noto Sans SC', sans-serif; }
	#main_frame .frame_header .nav_wrap ul.header_nav { margin: 5px 0 0 5px; }
	
	/*** LIST ITEM : TASK ***/
	#main_frame .frame_content ul.t_list li.m_item { width: 95%; margin: 0 2.5% 2.5% 2.5%; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(3n+3) { margin-right: 0; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(3n+1) { clear: none; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(2n+2) { margin-right: 0; }
	#main_frame .frame_content ul.t_list li.m_item:nth-child(2n+1) { clear: none; }
	
	/*** FORM HEADER ***/
	.wrap_info .info_content ul.c_header { margin-top: 0; }
	
	.wrap_info .info_content ul.c_form li.qpay_width { /* quater */
		width: 49%;
		margin-right: 1%;
	}
	
	/*** FORM INPUT FONT SIZE ***/
	.wrap_info .info_content ul.c_form li.s_item { font: 400 11px/20px 'Noto Sans SC', sans-serif; }
	.wrap_info .info_content ul.c_form input { font-size: 10px !important; }
	.wrap_info .info_content ul.c_form a.btn_info { padding: 3px 10px 3px 25px; font: 700 8px/18px 'Noto Sans SC', sans-serif; }
    
	/*** NEW TASK : TASK TOTAL */
	.wrap_info .info_header h2.b_title { position: absolute; top: 0; left: 10px; width: 90%; font: 500 16px/49px 'Noto Sans SC', sans-serif; }
	.wrap_info .info_header ul.b_panel h2.b_total { display: none; }
	
    .wrap_info .info_header ul.b_panel h2.b_new_total .b_top { height: 12px; padding: 14px 0 1px 0; font: 500 10px/10px 'Noto Sans SC', sans-serif; }
    .wrap_info .info_header ul.b_panel h2.b_new_total .b_btm { height: 10px; padding: 3px 0 10px 0; font: 500 8px/8px 'Noto Sans SC', sans-serif; }
	
	.wrap_info .info_header ul.b_panel a.btn_save {	padding: 5px 10px; font-weight: 11px; }
	.wrap_info .info_header ul.b_panel a.btn_cancel { padding: 5px 10px; font-weight: 11px; }
	.wrap_info .info_header ul.b_panel a.btn_close { width: 20px; height: 20px; margin: 15px 0; }
    
	.wrap_info .info_content ul.c_security h2.b_total { float: left; width: 100%; margin-left: -20px; font-size: 11px; text-align: center; }
	.wrap_info .info_content ul.c_security h2.b_total strong { font-size: 11px; }
	.wrap_info .info_content ul.c_security h4.b_outstanding { float: left; width: 96%; margin: 0 2%; text-align: center; }
	.wrap_info .info_content ul.c_security a.btn_save { min-width: 46%; margin: 10px 2%; padding: 5px 0; }
	.wrap_info .info_content ul.c_security a.btn_cancel { min-width: 46%; margin: 10px 2%; padding: 5px 0; }
	.wrap_info .info_content ul.c_form span.b_logo { display: none; }
	
	/*** NEW TASK : NEW CART CARD ***/
    .wrap_info .info_content ul.c_form .f_cart_card { padding: 10px; }
	
	/*** NEW TASK : CART LIST ***/
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.cola { width: 28%; }
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.colc { width: 70%; }
	
	/*** NEW TASK : PAYMENT LIST ***/
	.wrap_info .info_content ul.c_form li.f_pay { width: 49%; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(4n+1) { clear: none; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(3n+1) { clear: none; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(2n+1) { clear: left; }
	
	/*** LOCKER INFO : ITEM LIST ***/
	.wrap_info .info_content ul.c_form li.s_item span.cart_img { width: 24%; margin: 5px 0.5%; }
	
	/*** ACCOUNT INFO ***/
	#main_frame .frame_header .title_wrap h3 { display: none; }
	
	#global_content .app_list ul.v2_list li.v_stats .cola { width: 80%; height: 100px; margin: 20px 10% 0 10%; }
	#global_content .app_list ul.v2_list li.v_stats .colb { width: 80%; height: 100px; margin: 20px 10%; border-left: none; border-top: 1px solid #f2bdc9; }
	
	#global_content .app_list ul.v2_list li.account_box { width: 96%; margin: 0 2% 10px 2%; }
	#global_content .app_list ul.v2_list li.account_box:nth-child(3n+3) { margin-right: 2%; }
	
	/* PANEL CONTENT */
    #global_content .app_panel { right: -70%; width: 70%; }
    
    /* FOOTER PAGINATION */
    .frame_content .app_paging { margin: 0 0 60px 0; }

} 

@media only screen and (max-width: 640px) {
	/*** GLOBAL CONTENT ***/
	#global_content .app_header h2.app_title {
		font-size: 14px;
	}
	
	#main_frame .frame_header .nav_wrap span.title_nav {
		display: none;
	}

	#main_frame .frame_header .nav_wrap ul.header_nav {
		display: none;
	}
	
	.wrap_info .info_content ul.c_form {
		margin-top: 20px;
		margin-bottom: 0;
	}
	
	/*** FORM HEADER ***/
	.wrap_info .info_content ul.c_list { margin-top: 20px !important; }
	.wrap_info .info_content ul.c_input { margin-top: 0px !important; margin-bottom: 0px !important; }
	
	.wrap_info .info_content ul.c_form li.h_width { /* half */
		width: 100%;
		margin-right: 0%;
	}

	.wrap_info .info_content ul.c_form li.tq_width { /* 3 quaters */
		width: 100%;
		margin-right: 0%;
	}

	.wrap_info .info_content ul.c_form li.q_width { /* quater */
		width: 100%;
		margin-right: 0%;
	}
	
	.wrap_info .info_content ul.c_form li.qpay_width { /* quater */
		width: 100%;
		margin-right: 0%;
	}
	
	.wrap_info .info_content ul.c_form li.qimg_width { /* quater */
		width: 100%;
		margin-right: 0%;
	}
	
	/*** NEW TASK : CART LIST ***/
	.wrap_info .info_content ul.c_form .cart_btm .cart_details { width: 50%; margin-bottom: 10px; }
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.cola { width: 38%; }
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.colc { width: 60%; }
	
	/*** LOCKER INFO : ITEM LIST ***/
	.wrap_info .info_content ul.c_form li.s_item span.cart_img { width: 46%; margin: 5px 2%; }
}

@media only screen and (max-width: 480px) {
	/* POPUP PAGE : Security Page */
	#popup_page .sec_info .sec_wrap .sec_content span.s_title { font: 400 11px/22px 'Noto Sans SC', sans-serif; }
	#popup_page .sec_info .sec_wrap .sec_content input.sec_user { background-position: left center; background-size: 16px; }
	#popup_page .sec_info .sec_wrap .sec_content input.sec_input { background-position: left center; background-size: 16px; }
	
	/*** NEW TASK : CART LIST ***/
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.cola { width: 38%; }
	.wrap_info .info_content ul.c_form .cart_top .cart_title td.colc { width: 60%; }
	
	/*** NEW TASK : PAYMENT LIST ***/
	.wrap_info .info_content ul.c_form li.f_pay { width: 100%; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(4n+1) { clear: none; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(3n+1) { clear: none; }
	.wrap_info .info_content ul.c_form li.f_pay:nth-child(2n+1) { clear: none; }
}

@media only screen and (max-width: 320px) {
	/*** NEW TASK : CART LIST */
	.wrap_info .info_content ul.c_form .cart_btm .cart_details { width: 100%; margin-bottom: 10px; }
}

/*** VERSION 2.0 ***/
@media only screen and (max-width: 1280px) {
    .grid-layout-landing {grid-template-columns: repeat(4, 1fr);}
}

@media only screen and (max-width: 1024px) {
    .grid-layout-landing {grid-template-columns: repeat(3, 1fr);}
    
    /* POS CONTENT */
    .pos_left_content .pos_wrap .pos_cola {width: 35%;}
    .pos_left_content .pos_wrap .pos_colb {width: 65%;}
}

@media only screen and (max-width: 985px) {
    /*** NEW DASHBOARD ***/
	#global_dash .app_header, #global_content .app_header {padding: 0 0 0 60px;}
	.new_global_content {padding-left: 0px !important;}
	
	/* POS CONTENT */
	.pos_left {padding: 60px 0 0 0;}
	.pos_left .pos_left_header {padding: 0;}
}

@media only screen and (max-width: 768px) {
    .new_global_content {padding-left: 0px !important;}
    .new_app_header a.a_logo {width: 48px; height: 24px; padding: 18px 10px; background: url("../images/logo_1000x479.png") no-repeat center center; background-size: 48px auto;}
    .new_app_header ul.user_list li {margin-left: 10px !important;}
    .new_app_header ul.user_list a.m_item {padding: 15px 0; font: 500 11px/18px 'Noto Sans SC', sans-serif !important; color: #262626 !important;}
    .new_app_header ul.user_list a.m_item small {font: 500 9px/12px 'Noto Sans SC', sans-serif; color: #777;}
    .new_app_header .search_wrap {margin: 10px 0 0 0;}
    
    .new_frame_header .header_col_left {width: 20%;}
    .new_frame_header .header_col_left h3 {font: 500 12px/75px 'Noto Sans SC', sans-serif;}
    .new_frame_header .header_col_left .col_left_items {height: 24px; margin: 30px 0 0 10px;}
    .new_frame_header .header_col_right {width: 80%;}
    .new_frame_header .header_col_right a.btn_new {margin: 22px 0 0 10px; padding: 6px 10px 8px 30px; font: 700 8px/20px 'Noto Sans SC', sans-serif;}
    
    .grid-layout-landing {grid-template-columns: repeat(2, 1fr);}
    
    .new_frame_middle .landing_middle_wrap .bar_yesterday {padding: 50px 30px;}
    .new_frame_middle .bar_yesterday img.ytd_img {left: auto; right: 0; opacity: 0.25;}
    .new_frame_middle .bar_yesterday ul.bar_s_items {top: 0px; padding: 20px;}
    .new_frame_middle .bar_yesterday ul.bar_s_items li {width: 50%; margin: 0 0 5px 0;}
    .new_frame_middle .bar_yesterday ul.bar_s_items li:first-child {width: 100%; margin: 0 0 15px 0;}
    
    .app_list .horiz_t_list {display: block; grid-template-columns: 1fr; grid-gap: 0; padding: 0; position: relative; float: left; max-width: 100%; overflow: auto; white-space: nowrap;}
    .app_list .horiz_t_list .m_item {display: inline-block; position: inherit; float: none; width: auto; vertical-align: top; max-width: 310px; padding: 14px; text-decoration: none;}

    /* NEW ACCOUNT V2 */
    .new_app_header h2.a_title {float: right; font: 700 20px/40px 'Noto Sans SC', sans-serif;}
    .new_app_header ul.user_list li.in_selection:first-child {margin-left: 60px !important;}
    
    .new_frame_header .header_acc_wrap .acc_wrap_inner {margin: 50px 0 0 0;}
    .new_frame_header .header_acc_wrap .acc_hlwrap {width: 100%; padding: 20px;}
    .new_frame_header .header_acc_wrap .acc_hrwrap {width: 100%; padding: 20px; border-left: none;}
    .new_frame_header .acc_overview {width: 100%; padding: 280px 0 0 0;}
    .new_frame_header .body_acc_wrap .overview_list ul.list_item li {width: 49%; margin: 0 2% 10px 0;}
    .new_frame_header .body_acc_wrap .overview_list ul.list_item li:nth-child(2n+2) {margin-right: 0;}
    .new_frame_header .body_acc_wrap .overview_list ul.list_item li:last-child {margin-right: 0;}
    .new_frame_header .body_acc_wrap .summary_btm .left_footer a.s_item h3.m_title {font: 700 12px/22px 'Noto Sans SC', sans-serif;}

    /* POS CONTENT */
    .new_global_pos {padding-left: 0px !important;}
    .pos_left {width: 100%; border-right: none;}
    .pos_left_content .pos_list {padding: 20px 0 60px 0;}
    
    #pos_right_container {display: none;}
    .pos_right {z-index: 999; top: 100%; width: 100%; padding: 44px 0 0 0;}
    .pos_right .pos_mb_footer {display: block; position: absolute; z-index: 999; top: -50px; left: 50%; width: 400px; height: 50px; margin: 0; transform: translateX(-50%);}
    .pos_right .pos_mb_footer span.f_btn {position: absolute; z-index: 2; top: -30px; left: 50%; width: 50px; height: 50px; transform: translateX(-50%);}
    .pos_right .pos_mb_footer span.f_btn a.f_add {position: relative; float: left; width: 100%; height: 100%; background: #0f5ef7; border: 5px solid rgba(243, 245, 249, 0.35);}
    .pos_right .pos_mb_footer span.f_btn a.f_add {background: #0f5ef7; background: -moz-linear-gradient(-45deg, #0f5ef7 0%, #627eea 100%); background: -webkit-linear-gradient(-45deg, #0f5ef7 0%, #627eea 100%); background: linear-gradient(135deg, #0f5ef7 0%, #627eea 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0f5ef7', endColorstr='#627eea', GradientType=1);}
    .pos_right .pos_mb_footer span.f_btn a.f_add img {float: left; width: 50%; padding: 25%;}
    .pos_right .pos_mb_footer a.pos_open_btn {position: relative; float: left; width: 100%; height: 50px; padding: 15px 25px; background: #0f5ef7; font: 700 14px/20px 'Noto Sans SC', sans-serif; color: #fff; text-align: left; box-shadow: rgba(0, 0, 0, 0.2) 0px -50px 36px -28px inset;}
    .pos_right .pos_mb_footer a.pos_open_btn em {float: right;}
    .pos_right .pos_mb_footer a.pos_open_btn:hover {background-color: #0c4dc9;}
    
    .pos_right {padding: 0;}
    .pos_right .pos_right_container {padding: 0;}
    .pos_right .pos_right_header {top: 0; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
    .pos_right .pos_right_header a.pos_close_btn {display: block; position: absolute; z-index: 2; bottom: -30px; left: 50%; width: 80px; height: 30px; margin-left: -40px; background: #fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; text-align: center;}
    .pos_right .pos_right_header a.pos_close_btn img {width: 16px; height: 16px; margin: 7px 0;}
    .pos_right .pos_right_header a.pos_close_btn:hover {background-color: rgba(219, 223, 229, 0.45);}
}

@media only screen and (max-width: 507px) {
    /* POS CONTENT */
    .pos_left_content .pos_wrap .pos_cola {width: 45%;}
    .pos_left_content .pos_wrap .pos_colb {width: 55%;}
    
    .pos_left_content .pos_wrap .pos_qty a.btn_qty {width: 25%;}
    .pos_left_content .pos_wrap .pos_qty a.btn_minus {margin-right: 25%;}
    .pos_left_content .pos_wrap .pos_qty a.btn_plus {margin-left: 25%;}
    .pos_left_content .pos_wrap .pos_qty .pos_input {left: 30%; width: 40%;}
}

@media only screen and (max-width: 414px) {
    #global_menu .menu_wrap .menu_btn { position: fixed; top: 0px; left: 0px; width: 60px; background: none; box-shadow: none; }
    #global_dash .app_header, #global_content .app_header {height: 100px; background:rgba(243,245,249,1); box-shadow: none;}
    #global_footer {display: block;}
    
    .new_app_header a.a_logo {position: absolute; top: 0; left: 60px; width: 68px; height: 24px; padding: 18px 0; border: none; background: url("../images/logo_1000x479.png") no-repeat center center; background-size: 68px auto;}
    .new_app_header ul.user_list {position: relative !important; float: right; right: 0px; width: auto;} 
    .new_app_header .search_wrap {position: absolute; top: 50px; left: 0px; width: 100%; margin: 10px 0 0 0; background: #fff; padding: 0 15px; box-sizing: border-box;}
    
    .new_frame_header .header_col_left {width: 50%; height: 80px;}
    .new_frame_header .header_col_left h3 {width: 100%; margin-top: 14px; font: 500 12px/20px 'Noto Sans SC', sans-serif;}
    .new_frame_header .header_landing_left h3 small {font: 500 10px/16px 'Noto Sans SC', sans-serif;}
    .new_frame_header .header_landing_left {padding: 0 0 0 60px;}
    .new_frame_header .header_landing_left .dash_img {top: 15px; left: 20px;width: 36px;}
    .new_frame_header .header_landing_left .dash_img img {width: 36px;}
    .new_frame_header .header_col_right {width: 50%;}
    
    .new_frame_middle {padding: 0;}
    .new_frame_middle .grid_wrapper {float: left; width: 100%; overflow: auto;}
    .new_frame_middle .grid_wrapper {-ms-overflow-style: none;  /* Internet Explorer 10+ */ scrollbar-width: none;  /* Firefox */}
    .new_frame_middle .grid_wrapper::-webkit-scrollbar {display: none;  /* Safari and Chrome */}
    .new_frame_middle .landing_top_wrap {width: 1280px; grid-gap: 15px; margin: 0 0 30px 15px; padding: 0 15px 10px 0; overflow: auto;}
    
    .new_frame_middle .landing_middle_wrap {padding: 0 15px 40px 15px;}
    .new_frame_middle .landing_middle_wrap ul.bar_panel a.btn_menu {padding: 5px 10px; font: 700 8px/20px 'Noto Sans SC', sans-serif;}
    .new_frame_middle .landing_middle_wrap .bar_header .bar_header_menu h3.b_title {font: 700 10px/26px 'Noto Sans SC', sans-serif;}
    .new_frame_middle .landing_middle_wrap .bar_items {padding: 20px 20px 70px 0;}
    .new_frame_middle .bar_pointer ul.s_bar_point li {font: 500 6px/20px 'Noto Sans SC', sans-serif;}
    .new_frame_middle .landing_middle_wrap .bar_items ul.bar_list .s_bar_val {bottom: -30px; left: -155%; width: 400%; font: 400 6px/8px 'Noto Sans SC', sans-serif; color: #001847; text-align: center; transform: rotate(-90deg);}
    .new_frame_middle .landing_middle_wrap .bar_items ul.bar_list .s_bar_date {bottom: 15px; left: -155%; width: 400%; font: 400 6px/8px 'Noto Sans SC', sans-serif; text-align: center; transform: rotate(-90deg);}
    
    .grid-layout-landing {grid-template-columns: repeat(5, 1fr);}
    
    .new_frame_middle .landing_middle_wrap .bar_header .bar_header_val {width: 27.5%; margin: 0 5% 0 0; text-align: right;}
    .new_frame_middle .landing_middle_wrap .bar_header .header_1 {width: 35% !important; text-align: left;}
    .new_frame_middle .landing_middle_wrap .bar_header .header_3 {margin: 0;}
    .new_frame_middle .landing_middle_wrap .bar_header h4.s_bar_title {font: 700 8px/16px 'Noto Sans SC', sans-serif;}
    .new_frame_middle .landing_middle_wrap .bar_header span.s_bar_val {font: 500 14px/24px 'Noto Sans SC', sans-serif;}
    .new_frame_middle .landing_middle_wrap .bar_header span.s_bar_val small {font-size: 10px;}
    
    /*** TASK LIST V2 ***/
    #global_content .new_frame_header .header_col_left {width: 100%; height: auto; margin-bottom: 5px; padding: 0 0 0 20px;}
    #global_content .new_frame_header .header_col_right {position: relative; float: left; width: 100%; height: auto; padding: 0 20px 0 0;}
    #global_content .new_frame_header .header_col_right a.btn_create {display: none;}
    #global_content .new_frame_header .header_col_right a.btn_create_customer {display:block !important;}
    
    #global_content .new_frame_middle {display: none;}
    #global_content .new_frame_header_mb {display: none; /* Here */ position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 24, 71, 0.5); overflow: auto;}
    
    .new_frame_header_mb .mb_header {position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 150px;}
    .new_frame_header_mb .mb_wrap {position: relative; z-index: 1; float: left; width: 100%; margin: 150px 0 0 0; background: rgba(255,255,255,1);}
    
    .new_frame_header_mb .header_col {position: relative; float: right; width: 100%; margin: 20px 0 0 0; padding: 0 20px;}
    .new_frame_header_mb .header_col a.btn_new {position: relative; float: left; width: 100%; margin: 10px 0 0 0; padding: 6px 10px 8px 30px; background: #0f5ef7; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; font: 700 10px/20px 'Noto Sans SC', sans-serif; color: #f2f5fd; letter-spacing: .1em; text-align: center; transition: all 0.7s;}
    .new_frame_header_mb .header_col a.btn_new:hover {color: #fff;}
    .new_frame_header_mb .header_col a.btn_new span.t_img {position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; padding: 2px; overflow: hidden; transition: all 0.7s;}
    .new_frame_header_mb .header_col a.btn_new span.t_img img {width: 100%;}
    .new_frame_header_mb .header_col a.btn_new:hover span.t_img { transform: rotate(360deg); }
    .new_frame_header_mb .header_col a.btn_delete {background: #e12925 !important;}
    
    .new_frame_header_mb .middle_col {position: relative; float: left; width: 100%; margin: 20px 0 0 0;}
    .new_frame_header_mb .middle_col .category_wrap {position: relative; float: left; margin-left: 20px;}
    .new_frame_header_mb .middle_col .category_wrap ul.category_list {position: relative; float: left; margin: 0;}
    .new_frame_header_mb .middle_col .category_wrap ul.category_list li {position: relative; float: left; margin: 0 10px 10px 0;}
    .new_frame_header_mb .middle_col .category_wrap ul.category_list li a.m_item {position: relative; float: left; padding: 0 10px; background: rgba(235,238,247,0.9); font: 700 10px/30px 'Noto Sans SC', sans-serif; color: #262626;}
    .new_frame_header_mb .middle_col .category_wrap ul.category_list li a.m_item span.status_dot {position: relative; float: left; width: 8px; height: 8px; margin: 11px 5px 0 0;}
    .new_frame_header_mb .middle_col .category_wrap ul.category_list li a.m_item em {font: 700 10px/30px 'Noto Sans SC', sans-serif; color: #777;}
    .new_frame_header_mb .middle_col .category_wrap ul.category_list li a.m_item:hover {background-color: #0f5ef7;}
    
    .new_frame_header_mb .middle_col .nav_wrap {position: relative; float: right; right: 0; margin-right: 20px;}
    .new_frame_header_mb .middle_col .nav_wrap span.title_nav {float: left; font: 500 10px/40px 'Noto Sans SC', sans-serif; color: #666;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav {position: relative; float: left; margin: 10px 0 0 10px;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.nav {position: relative; float: left; width: 20px; height: 20px; margin-left: 10px;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.no_prev {background: #dbdfe5 url("../images/icon/ico_prev_g.png") center no-repeat; background-size: 16px;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.no_next {background: #dbdfe5 url("../images/icon/ico_next_g.png") center no-repeat; background-size: 16px;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.prev {background: #7987a2 url("../images/icon/ico_prev_w.png") center no-repeat; background-size: 16px;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.next {background: #7987a2 url("../images/icon/ico_next_w.png") center no-repeat; background-size: 16px;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.prev:hover {background-color: #0f5ef7;}
    .new_frame_header_mb .middle_col .nav_wrap ul.header_nav a.next:hover {background-color: #0f5ef7;}
    .new_frame_header_mb .middle_col .nav_wrap .page_list {width: auto !important; min-width: 80px; margin-left: 10px;}
    .new_frame_header_mb .middle_col .nav_wrap .page_list .opt_btn {margin: 6px 0; padding: 0 10%; background: url(../images/icon/ico_down_sb.png) 95% center no-repeat; background-size: 12px; border: none; color: #001847;}
    .new_frame_header_mb .middle_col .nav_wrap .page_list .opt_menu {top: 40px;}
    .new_frame_header_mb .middle_col .nav_wrap .page_list .opt_items {background-color: rgba(235,238,247,0.9); border-color: rgba(235,238,247,0.9);}
    .new_frame_header_mb .middle_col .nav_wrap .page_list .opt_items a.s_item {width: 100%; padding: 0 10%; color: #001847;}
    .new_frame_header_mb .middle_col .nav_wrap .page_list .opt_items a.s_item:hover {color: #fff;}
    
    .new_frame_header_mb .middle_col .filter_wrap {position: relative; float: left; left: 0; margin-left: 20px; padding: 20px 0;}
    .new_frame_header_mb .middle_col .filter_wrap .filter_list {width: auto !important; min-width: 150px; border: 1px solid #e3e3e3;}
    .new_frame_header_mb .middle_col .filter_wrap .filter_list .opt_btn {margin: 6px 0; padding: 0 10%; background: url(../images/icon/ico_down_sb.png) 95% center no-repeat; background-size: 12px; border: none; font: 500 10px/26px 'Noto Sans SC', sans-serif; color: #262626;}
    .new_frame_header_mb .middle_col .filter_wrap .filter_list .opt_menu {top: 40px;}
    .new_frame_header_mb .middle_col .filter_wrap .filter_list .opt_items {background-color: rgba(235,238,247,0.9); border-color: rgba(235,238,247,0.9);}
    .new_frame_header_mb .middle_col .filter_wrap .filter_list .opt_items a.s_item {width: 100%; padding: 0 10%; font-size: 10px; color: #001847;}
    .new_frame_header_mb .middle_col .filter_wrap .filter_list .opt_items a.s_item:hover {color: #fff;}
    
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel {position: relative; float: left; margin: 5px 0 0 0;}
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel li.s_item {position: relative; float: left; margin: 0 0 0 10px; font: 700 8px/30px 'Noto Sans SC', sans-serif; color: #262626;}
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel li.s_item a.clear_filtered {position: relative; float: left; width: 30px; height: 30px; background: url(../images/icon/ico_del.png) center no-repeat; background-size: 24px;}
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel li.s_item a.clear_filtered:hover {background-color:#ebeef7;}
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel li.s_item div.filtered_item {position: relative; float: left; padding: 0 10px; background-color:#ebeef7;}
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel li.s_item div.filtered_item span.filtered_name {float: left; padding: 0 20px; background: url(../images/icon/ico_filter.png) left center no-repeat; background-size: 12px; font: 700 8px/30px 'Noto Sans SC', sans-serif; color: #262626; text-align: center;}
    .new_frame_header_mb .middle_col .filter_wrap ul.filtered_sel li.s_item div.filtered_item a.del_filtered {position: absolute; right: 0; width: 30px; height: 30px; background: url(../images/icon/ico_cross.png) center no-repeat; background-size: 12px;}
    
    .new_frame_header_mb .middle_col .sort_wrap {position: relative; float: left; right: auto; margin: 0 0 0 20px; padding: 20px 0;}
    .new_frame_header_mb .middle_col .sort_wrap .sort_list {width: auto !important; min-width: 150px; border: 1px solid #e3e3e3;}
    .new_frame_header_mb .middle_col .sort_wrap .sort_list .opt_btn {margin: 6px 0; padding: 0 10%; background: url(../images/icon/ico_down_sb.png) 95% center no-repeat; background-size: 12px; border: none; font: 500 10px/26px 'Noto Sans SC', sans-serif; color: #262626;}
    .new_frame_header_mb .middle_col .sort_wrap .sort_list .opt_menu {top: 40px;}
    .new_frame_header_mb .middle_col .sort_wrap .sort_list .opt_items {background-color: rgba(235,238,247,0.9); border-color: rgba(235,238,247,0.9);}
    .new_frame_header_mb .middle_col .sort_wrap .sort_list .opt_items a.s_item {width: 100%; padding: 0 10%; font-size: 10px; color: #001847;}
    .new_frame_header_mb .middle_col .sort_wrap .sort_list .opt_items a.s_item:hover {color: #fff;}
    
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales {position: relative; float: left; margin: 10px 0;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item {position: relative; float: left; width: 100%; margin: 0 0 10px 0; padding: 0 20px;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_full {background: url(../images/icon/ico_folder_with_item.png) 20px center no-repeat;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_empty {background: url(../images/icon/ico_folder_no_item.png) 20px center no-repeat;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_item {position: relative; float: left; width: 100%; padding: 5px 0 5px 55px; background-color: rgba(235,238,247,0.9); background-size: 24px; font: 700 10px/16px 'Noto Sans SC', sans-serif; color: #262626; transition: background-color 0.3s;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_item:hover {background-color:rgba(0, 3, 92, 0.24);}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_item strong {float: left; width: 100%;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_item small {float: left; width: 100%; font: 700 8px/8px 'Noto Sans SC', sans-serif; color: #777;}
    .new_frame_header_mb .middle_col .filter_sales_wrap ul.filter_sales li.s_item a.m_item.active {background-color:rgba(0, 3, 92, 0.12);}
    
    /* NEW ACCOUNT V2 */
    .new_app_header h2.a_title {font: 700 18px/40px 'Noto Sans SC', sans-serif;}
    
    /* POS CONTENT */
    .new_pos_header {height: 60px !important;}
    .pos_left {padding: 60px 0 0 0;}
    .pos_left .pos_left_header {top: 60px; padding: 0;}
    
    .pos_search_wrap .b_ico {top: 12px; width: 40px;}
    .pos_search_wrap .search_left {padding: 0 10px 0 40px;}
    .pos_search_wrap .pos_selection {padding: 0 10px 0 40px;}
    .pos_search_wrap .pos_selection .pos_opt_btn {background-size: 16px; font: 700 12px/40px 'Noto Sans SC', sans-serif;}
    
    .pos_right .pos_mb_footer {left: 0; width: 100%; margin: 0; padding: 0; transform: translateX(0);}
    .pos_right .pos_mb_footer a.pos_open_btn {width: 100%; padding: 15px 25px; background: #0f5ef7; font: 700 14px/20px 'Noto Sans SC', sans-serif; color: #fff; text-align: left; -moz-box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);}
}

@media only screen and (max-width: 320px) {
    .app_list .new_t_list {grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));}
    
    /* NEW ACCOUNT V2 */
    .new_app_header h2.a_title {font: 700 12px/40px 'Noto Sans SC', sans-serif;}
}