/*20160930 by kevin*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Reset 開始-------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dt, dd, li,
fieldset, form, label, legend,
 caption, tbody, tfoot, thead, th,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;*//*修改部分 by kevin 20140822*/
	/*vertical-align: baseline;*//*修改部分 by kevin 20140822*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	/*list-style: none;*//*修改部分 by kevin 20140822 會影響到網邊*/
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	/*border-collapse: collapse;
	border-spacing: 0;*/
}

body{ 
	margin: 0; 
	padding: 0;
	background-color: #fff;
	color: #333;
	font-family: Arial, Helvetica, sans-serif, "Century Gothic", "Times New Roman", Times, serif, "微軟正黑體", "新細明體";
	/*overflow-x: hidden;*/
	letter-spacing: 1px;
	-webkit-text-size-adjust: none;/*解決iphone橫平轉豎屏時字變大的問題*/
}

/* ~~ 元素/標籤選取器 ~~ */
ul, ol, dl { /* 由於瀏覽器之間的差異，最佳作法是在清單中使用零寬度的欄位間隔及邊界。為了保持一致，您可以在這裡指定所要的量，或在清單包含的清單項目 (LI、DT、DD) 上指定所要的量。請記住，除非您寫入較為特定的選取器，否則在此執行的作業將重疊顯示到 .nav 清單。 */
	padding: 0;
	margin: 0;
}

/*-----↓↓↓↓新增部分 by kevin 20150108 為了網編↓↓↓↓-----*/
ul, ol {
	padding-left:40px;
}
/*-----↑↑↑↑新增部分 by kevin 20150108 為了網編↑↑↑↑-----*/

/*h1, h2, h3, h4, h5, h6,*/ p {	margin: 0; padding: 0;}

/*img{ display:block;}*//*清除IE7下方溢位*/

a img { /* 這個選取器會移除某些瀏覽器在影像由連結所圍繞時，影像周圍所顯示的預設藍色邊框 */
	border: none;}

.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果從 #container 移除或取出 #footer) */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
a{ 
	/*color:#ccc;*//*修改部分 by kevin 20140814 會影響到網編區 不宜使用*/
	text-decoration: none;
	outline: none;/* for Firefox Google Chrome  *//*讓a點擊時不會出現框線*/
  	behavior:expression(this.onFocus=this.blur());  /* for IE *//*讓a點擊時不會出現框線*/
}
a:hover { 
	/*color:#ccc;*//*修改部分 by kevin 201450108 太醜了所以刪掉*/
	text-decoration:underline;
	/*opacity:0.9;新增部分 by kevin 20150121*//*會影響到輪播 刪除 by kevin 20150324*/
}
	
a:active, a:focus {/* 這個選取器群組可以讓使用鍵盤導覽的使用者，也和使用滑鼠的使用者一樣擁有相同的滑過體驗。 */
	text-decoration: none; }
	
area {
	outline:none;
}
/*------------------------------------------CSS Reset 結束-------------------------------*/

/*------------------------------------------icon-字型 開始-------------------------------*/
@font-face {
    font-family: 'LigatureSymbols';
    src: url('../icon_fonts/ligature_symbols/LigatureSymbols-2.11.eot');
    src: url('../icon_fonts/ligature_symbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('../icon_fonts/ligature_symbols/LigatureSymbols-2.11.woff') format('woff'),
         url('../icon_fonts/ligature_symbols/LigatureSymbols-2.11.ttf') format('truetype'),
         url('../icon_fonts/ligature_symbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('../icon_fonts/ligature_symbols/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.lsf, .lsf-icon:before {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}

.lsf-icon:before {
  content:attr(title);
  /*margin-right:0.3em;*/
}
/*------------------------------------------icon-字型 結束-------------------------------*/




.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/*--------------------------------------loading畫面 開始---------------------------------*/
.loading {
 	position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background-color: #FFF;
	text-align:center;
	
	/*新增by pekey 20171211*/
	padding-top:250px;
 } 
 
	
	/*Loading畫面CSS開始*/
	#circularG{
		position:relative;
		width:58px;
		height:58px;
		margin: auto;
	}
	
	.circularG{
		position:absolute;
		background-color:rgb(201,9,21);  /*此為Loding的點點顏色*/
		width:14px;
		height:14px;
		border-radius:9px;
			-o-border-radius:9px;
			-ms-border-radius:9px;
			-webkit-border-radius:9px;
			-moz-border-radius:9px;
		animation-name:bounce_circularG;
			-o-animation-name:bounce_circularG;
			-ms-animation-name:bounce_circularG;
			-webkit-animation-name:bounce_circularG;
			-moz-animation-name:bounce_circularG;
		animation-duration:1.1s;
			-o-animation-duration:1.1s;
			-ms-animation-duration:1.1s;
			-webkit-animation-duration:1.1s;
			-moz-animation-duration:1.1s;
		animation-iteration-count:infinite;
			-o-animation-iteration-count:infinite;
			-ms-animation-iteration-count:infinite;
			-webkit-animation-iteration-count:infinite;
			-moz-animation-iteration-count:infinite;
		animation-direction:normal;
			-o-animation-direction:normal;
			-ms-animation-direction:normal;
			-webkit-animation-direction:normal;
			-moz-animation-direction:normal;
	}
	
		#circularG_1{
			left:0;
			top:23px;
			animation-delay:0.41s;
				-o-animation-delay:0.41s;
				-ms-animation-delay:0.41s;
				-webkit-animation-delay:0.41s;
				-moz-animation-delay:0.41s;
		}
		
		#circularG_2{
			left:6px;
			top:6px;
			animation-delay:0.55s;
				-o-animation-delay:0.55s;
				-ms-animation-delay:0.55s;
				-webkit-animation-delay:0.55s;
				-moz-animation-delay:0.55s;
		}
		
		#circularG_3{
			top:0;
			left:23px;
			animation-delay:0.69s;
				-o-animation-delay:0.69s;
				-ms-animation-delay:0.69s;
				-webkit-animation-delay:0.69s;
				-moz-animation-delay:0.69s;
		}
		
		#circularG_4{
			right:6px;
			top:6px;
			animation-delay:0.83s;
				-o-animation-delay:0.83s;
				-ms-animation-delay:0.83s;
				-webkit-animation-delay:0.83s;
				-moz-animation-delay:0.83s;
		}
		
		#circularG_5{
			right:0;
			top:23px;
			animation-delay:0.97s;
				-o-animation-delay:0.97s;
				-ms-animation-delay:0.97s;
				-webkit-animation-delay:0.97s;
				-moz-animation-delay:0.97s;
		}
		
		#circularG_6{
			right:6px;
			bottom:6px;
			animation-delay:1.1s;
				-o-animation-delay:1.1s;
				-ms-animation-delay:1.1s;
				-webkit-animation-delay:1.1s;
				-moz-animation-delay:1.1s;
		}
		
		#circularG_7{
			left:23px;
			bottom:0;
			animation-delay:1.24s;
				-o-animation-delay:1.24s;
				-ms-animation-delay:1.24s;
				-webkit-animation-delay:1.24s;
				-moz-animation-delay:1.24s;
		}
		
		#circularG_8{
			left:6px;
			bottom:6px;
			animation-delay:1.38s;
				-o-animation-delay:1.38s;
				-ms-animation-delay:1.38s;
				-webkit-animation-delay:1.38s;
				-moz-animation-delay:1.38s;
		}
		
		
		
		@keyframes bounce_circularG{
			0%{
				transform:scale(1);
			}
		
			100%{
				transform:scale(.3);
			}
		}
		
		@-o-keyframes bounce_circularG{
			0%{
				-o-transform:scale(1);
			}
		
			100%{
				-o-transform:scale(.3);
			}
		}
		
		@-ms-keyframes bounce_circularG{
			0%{
				-ms-transform:scale(1);
			}
		
			100%{
				-ms-transform:scale(.3);
			}
		}
		
		@-webkit-keyframes bounce_circularG{
			0%{
				-webkit-transform:scale(1);
			}
		
			100%{
				-webkit-transform:scale(.3);
			}
		}
		
		@-moz-keyframes bounce_circularG{
			0%{
				-moz-transform:scale(1);
			}
		
			100%{
				-moz-transform:scale(.3);
			}
		}
	/*Loading畫面CSS結束*/

.loading_tit{
	padding:20px 0px 0px 15px;
	display:inline-block;
	font-size: clamp( .875rem, 2.1333vw, 1rem ); /* 14 16 */
	font-weight:bold;
	color:#333;
	font-family:微軟正黑體;
	text-align:center;
}
/*-------------------------------------loading畫面 結束---------------------------------*/


/*Webkit,Opera9.5+,Ie9+ 控制文字選取時的顏色*/
::selection {
	background-color:#d70010;
	color:#fff;
}

/*Mozilla Firefox 控制文字選取時的顏色*/
::-moz-selection {
	background-color:#d70010;
	color:#fff;
}

.wrap {
	width:auto;
	margin:0 auto;
	padding: 0 20px;
}

@media (max-width: 768px){
	.wrap {
		padding: 0 15px;
	}
}

/*-------input reset--------------------------------------------------------*/
input, textarea, select {
	font-family: Arial, Helvetica, sans-serif, "Century Gothic", "Times New Roman", Times, serif, "微軟正黑體", "Microsoft JhengHei", "新細明體";
	font-size: clamp( .8125rem, 2vw, .9375rem ); /* 13 15 */
	border-radius:3px;
	border: solid 1px #aeaeae;
}
input[type="text"], .input, input[type="password"], .input, input[type="search"] {
	margin: 0;
    padding: 0;
    outline: none;
    vertical-align: middle;
    height: 42px;
    line-height: 42px;
    width: 100%;
    transition: 0.2s ease all;
    padding: 0px 6px 0px 6px;
    box-sizing: border-box;
	border: 1px solid #e7e7e7;
}
	input[type="text"]:focus, input[type="password"]:focus {
		border: solid 1px #d5d5d5;
	}
	
input[type="button"], input[type="submit"], input[type="reset"] {
	-webkit-appearance:none;
	-webkit-border-radius:0px;
	margin:0;
	padding:0;
	outline:none;
	cursor:pointer;
	vertical-align: middle;
	border:none;
	width:162px;
	height:42px;
	background-color:#de484d;
	color:#fff;
	border-radius:5px;
	line-height:42px;
	transition: 0.2s ease all;
	letter-spacing:1px;
}
	input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
		opacity:0.7;
	}
	
	input[type="reset"] {
		background-color:#555;
	}
	
input[type="radio"], input[type="checkbox"] {
	margin:0px;
	padding:0px;
	outline:none;
	vertical-align: baseline;
	cursor:pointer;
}
textarea {
	margin: 0;
    padding: 0;
    outline: none;
    vertical-align: middle;
    line-height: 24px;
    width: 100%;
    resize: none;
    height: 117px;
    transition: 0.2s ease all;
    box-sizing: border-box;
    padding: 3px;
}
	textarea:focus {
		border: solid 1px #d5d5d5;
	}
	
select {
	margin:0;
	padding:0;
	outline:none;
	vertical-align: middle;
	padding: 9px 0px 10px 7px;
	transition: 0.2s ease all;
	background-color:#fff;
	letter-spacing:1px;
	-webkit-appearance: none;	/* Safari 和 Chrome */
       -moz-appearance: none;	/* Firefox */
        -ms-appearance: none;	/*for Internet Explorer*/
         -o-appearance: none;	/*for Opera*/
            appearance: none;
	background: #fff url(../images/select_arrow.png) no-repeat;
	background-size: 13px;
	background-position:right;
	padding-right:18px !important;
	border: 1px solid #e7e7e7;
}
	select::-ms-expand {	/*for Internet Explorer*/
		display: none;
	}
	select:focus {
		border: solid 1px #d5d5d5;
	}
	
label {
	cursor:pointer;
}

				
/*-------頁次--RWD版 by kevin 20150921------------------------------------------------------------------------*/			
.page_area_rwd {
	text-align:center;
	padding:25px 0px 0px 0px;
}
	.page_left_arrow, .page_right_arrow {
		width:83px;
		font-size:15px;
		font-weight:bold;
		text-align:center;
		display: inline-block;
		vertical-align: top;
	}
		.page_left_arrow a, .page_right_arrow a {
			text-decoration:none;
			display:block;
			transition:0.2s ease all;
			color:#fff;
			line-height:40px;
			background-color:#de484d;
			border-radius:2px;
		}
			.page_left_arrow a:hover, .page_right_arrow a:hover {
				background-color:#f39800;
			}
	.page_select {
		display:inline-block;
		padding:0px 7px;
		vertical-align: top;
	}
		.page_select select {
			width: auto !important;
			font-size:15px !important;
			padding:8px 18px 7px 16px !important;
			border: solid 1px #a4a4a4 !important;
			height:40px !important;
			box-sizing:border-box;
			border-radius:3px;
		}

/*-------頁次--置中版--修改 by kevin 20150328------------------------------------------------------------------------*/			
.page_area {
	margin: 0px 0px 0px 0px;
}
	.page_area table {
		margin: 0 auto;/*置中*/
		/*margin: 0px 0px 0px auto;*//*靠右*/
	}
	.page_area table td {
		vertical-align:top;
	}
	.page_bot {
		float:left;
		padding-top: 3px;
		margin-right:5px;
	}
	.page_pages {
		float: left;
		font-size: 12px;
		text-align: center;
		color: #000;
		line-height: 17px;
		margin-top: -5px;
		width: 55px;
	}
	.page_text {
		float: left;
		margin: 0;
		padding: 0;
		border: solid 1px #b5b5b5 !important;
		background-color: #fff !important;
		width: 54px !important;
		height: 19px !important;
		line-height:17px !important;
		margin-left: 8px !important;
		margin-right: 5px !important;
	}
	
	.page_area a {
		transition:0.2s ease all;
	}
	
	.page_area a:hover {
		opacity:0.7;
		filter:alpha(opacity=70); /* 针对 IE8 以及更早的版本 */
	}


/*-------頁籤------------------------------------------------------------------------*/
.tab_area {
}
	.tabs_btn_now {
		transition:0.3s ease all;
		font-size: clamp( .875rem, 2.1333vw, 1rem ); /* 14 16 */
		line-height:39px;
		padding:0px 36px 0px 36px;
		text-align:center;
		display:none;
		position:relative;
		background-color:#fff;
		border-bottom: solid 1px #e3e3e3;
		font-weight:bold;
	}
		.tabs_btn_now:hover {
			background-color:#fff;
		}
		.tabs_btn_now_arrow {
			position: absolute;
			border-top: solid 5px #333;
			top: 17px;
			right: 20px;
			border-left: solid 5px rgba(255, 255, 255, 0);
			border-right: solid 5px rgba(255, 255, 255, 0);
		}
		
	.img-scroll { 
		height:39px; 
		position:relative;
	}
		.img-list { 
			position:relative; 
		}
			ul.tabs {
				margin:0; 
				padding:0; 
				list-style:none;
			}
				.tabs li { 
					line-height: 38px;
					float:left;
					position: relative;
					font-size: clamp( .8125rem, 2vw, .9375rem ); /* 13 15 */
					/*width: auto;*/
					min-width: 96px;
					box-sizing: border-box;
				}
						
				.tabs li.active {
					/*當前模式*/
				}
				
					.tabs li.active:after {
						/*content:url(../product/images/tabs_arrow.png);*/
						position:absolute;
						bottom:-6px;
						left:50%;
						margin:0px 0px 0px -10px;
					}
		
					.tabs span { 
						text-decoration:none;
						display:block;
						padding:0px 15px;
						transition:0.3s ease all;
						background-color: transparent;
						text-align:center;
						cursor:pointer;
						border-right: 1px solid #e7e7e7;
						font-weight: bold;
						box-sizing: border-box;
						height: 37px;
					}
					
					.tabs li:nth-of-type(1) span{
						/*border-top-left-radius: 5px;*/
					}
					.tabs li:last-of-type span{
						/*border-top-right-radius: 5px;*/
					}
						
					.tabs li span:hover {
						background-color:#fff;
						border-left: 0;
						/*border: 1px solid #e7e7e7;*/
					}
					
					.tabs li.active span {
						background-color:#fff;
						border-left: 0;
						border: 1px solid #e7e7e7;
					}
		
		#tab1{}
		.tab_content{}

/*產品內頁頁籤的網編區*/
.p_tab_text_area {
	/*background-color:#fff;*/
	/*padding:10px;*/
}



@media (max-width: 768px){
	/*頁籤*/
	.tab_area {
		position:relative;
	}
		.tabs_btn_now {
			display:block;
		}
		
		.img-scroll {
			display:none;
			height:auto;
			/*position: absolute;*/
			width: 100%;
			z-index: 999;
		}
			.tabs li, .img-scroll1 .tabs li, .img-scroll2 .tabs li, .img-scroll3 .tabs li, .img-scroll4 .tabs li, .img-scroll5 .tabs li {
				float:none;
				text-align:center;
				width:100%;
				font-size:15px;
				border-radius:0px;
			}
				.tabs li.active:after {
					content:"";
				}
}








/*-------驗證碼----------------------------------------------------------------------------*/
.captcha {
	line-height: 37px;
    padding: 0px 0px 5px 0px !important;
}
	.captcha input[type="text"] {
		width:80px;
		margin-right:5px;
	}
	.captcha a {
		transition: 0.5s ease all;
		color: #fff;
		background-color: #333;
		border-radius: 5px;
		padding: 0px 11px;
		font-size: 14px;
		display: inline-block;
		margin: 7px 0px;
		line-height: 29px;
		text-decoration:none;
	}
		.captcha a:hover {
		}
		
	.captcha img {
		vertical-align:middle;
	}
	.captcha a img {
		vertical-align:top;
	}
	.captcha span {
		color:#c30000;
	}






/*-------hack----------------------------------------------------------------------------*/
.hack {
	padding:20px;
}
	.hack_demo {
		float:left;
		width:50%;
		line-height:200px;
		text-align:center;
		box-sizing:border-box;
		border: solid 1px #CCC;
	}
	
/* IE10、11、edge模式 */
@media all and (-ms-high-contrast:none) {
	.ie10Up {
		color: #fff;
		background-color:#06F;
	}
	*::-ms-backdrop, .ie10Up {
		color: #fff;
		background-color:#06F;
	}
}

/*firefox*/
@-moz-document url-prefix() { 
	.firefox {
		color: #fff;
		background-color: #C00;
	}
}

/*Safari和chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.safariAndChrome {
		color: #fff;
		background-color: #333;
	}
}




body{
	width: 100vw;
    height: 100vh;
    position: relative;
    overflow-x: hidden;
	background-color: #f8f8f8;
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

.textArea {
    font-size: 14px;
    line-height: 24px;
    color: #333;
    word-wrap: break-word;
    word-break: break-all;
}



/*/////////////////////////////////////////////////////////*/
/*-------共用區塊--------*/
/*/////////////////////////////////////////////////////////*/

/*全站共用樣式*/
:root {

	/*全站外文字型*/
	--foreign_font: 'Quicksand', sans-serif;

	/*全站中文字型*/
	/*--mandarin_font:'Noto Serif TC', sans-serif;*/ /* 思源宋體 */
	--mandarin_font2: 'Noto Sans TC', sans-serif; /* 思源黑體 */

	/*全站色碼*/
	--primary_color: #2B5B89;
	--second_color: #65A3C6;
	--third_color: #42429b;
	--fourth_color: #1ec3b2;

	--black_color: #000000;
	--white_color: #ffffff;
	--hover_word: all .2s ease-in;
}

.main{
	padding: 51px 0px 0px;
	position: relative;
	min-height: 90vh;	
}

.main_content{
	min-height: 857px;
}

@media (max-width: 1024px){
	
	.main{
		overflow-x: hidden;
		height: auto;
	}
}
	
	/*左側*/
	.main > .left{
		width: 270px;
		background-color: var(--primary_color);
		position: fixed;
		top: 0px;
		bottom: 0;
		left: 0px;
		z-index: 5;
		padding: 10px 3px 10px 0px;
    	box-sizing: border-box;
	}
		
		.main_funtionBg{
			overflow-x: hidden;
			overflow-y: scroll;
			height: 100%;
			/*padding-bottom: 30px;*/
			box-sizing: border-box;
			position: relative;
		}
		
			/*用戶資訊區塊*/
			/*.main > .left .personal_area{*/
			.personal_area{
				padding: 30px 0px 10px;
				display: table;
				width: 100%;
				/*position: absolute;*/
				bottom: 0;
			}
			
			@media (max-width: 640px){
			.main > .left .personal_area{
				/*position: static;*/
			}
			}
				
			
				/*大頭貼*/
				.main > .left .personal_img{
					display: table-cell;
					vertical-align: middle;
					
					width: clamp( 2.8125rem, 8vw, 3.75rem );
					height: clamp( 1.25rem, 4.6667vw, 2.1875rem );
					border-radius: 50%;
					
					margin: 0px auto;
					text-align: center;
					/*background-color: #232a32;*/
					background-color: #fff;
					padding: 5px 5px;
					box-sizing: border-box;
				}
					.main > .left .personal_img img{
						width: 100%;
						height: auto;
					}
						
						
				/*系統名稱*/	
				.system_name{
					padding-left: 10px;	
					display: table-cell;
					vertical-align: middle;
				}
					/*標題*/
					.main > .left .system_name .title{
						color: #fff;
						font-size: 14px;
					}
					/*內容*/
					.main > .left .system_name .content{
						padding-top: 7px;
						color: var(--white_color);
						font-size: 13px;
					}
			
			
			
			/*主按鍵區塊*/
			.navbar{
				margin-top: 20px;
			}	
				.nav{
					position: relative;
					box-sizing: border-box;
				}
					.nav > a{
						display: block;
						padding: 13px 45px 13px 35px;
						color: var(--white_color);
						font-size: clamp( .75rem, 1.8667vw, .875rem ); /* 12 14 */
						line-height: 22px;
						transition: 0.3s ease all;
						position: relative;
						box-sizing: border-box;
					}
			
					/*hover*/
					.nav > a:hover {
						background-color: var(--second_color);
						color: var(--white_color);
						text-decoration:none;
						transition: 0.3s ease all;
					}
						/*代表性標誌*/
						.nav_icon.first{
							position: absolute;
							left: 15px;
							top: 16px;
						}
							.nav_icon i{
								font-size: clamp( .9375rem, 2.2667vw, 1.0625rem ); /* 15 17 */
    							line-height: 17px;
								color: #D3D6DB;
							}
						
						/*功能名稱*/	
						.nav_title{
							display: inline-block;
							vertical-align: bottom;
						}
						
						/*方向標誌*/
						.nav_icon.direction{
							position: absolute;
							right: 15px;
							top: 16px;
						}
							/*方向標誌_向下展開*/
							.nav_icon.direction i.down{
								display: block;
							}
							/*方向標誌_向上收合*/
							.nav_icon.direction i.up{
								display: none;
							}
							
							
						/*active*/ /*方向標誌_向下展開*/
						.nav.active .nav_icon.direction i.down{
							display: none;
						}
						/*active*/ /*方向標誌_向上收合*/
						.nav.active .nav_icon.direction i.up{
							display: block;
						}
						
						
						/*主按鍵_下拉選單*/
						.navOpen.pc {
							display:none;
							width: 100%;
							margin:0px;
							z-index: 10000;
						}
							
							.navOpenBg {
								position:relative;    
								box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.5) inset;
								background-color: var(--third_color);
							}
					
								.navOpen.pc .navOpenList{
									text-align: left;
								}
								
									.navOpen.pc  .navOpenList a {
										display:block;
										box-sizing: border-box;
										font-size: clamp( .75rem, 1.8667vw, .875rem ); /* 12 14 */
										line-height: 18px;
										color: var(--white_color);
										
										padding: 13px 45px 13px 35px;
										transition:0.3s ease all;
										text-decoration:none;
										word-break: break-all;
									}
									
									.navOpen.pc  .navOpenList:last-child a {
										border-bottom: 0px;
									}
									
									/*hover*/
									.navOpen.pc  .navOpenList a:hover {
										background-color: var(--third_color);
										text-decoration:none;
										transition: 0.3s ease all;
									}
								
									/*active*/
									.navOpen.pc  .navOpenList.active a {
										background-color: var(--second_color);
										text-decoration:none;
										transition: 0.3s ease all;
									}
								
								
								
/*////////////////////////////*/
/*---左側選單_滾動條樣式 start---*/
/*////////////////////////////*/			

.main .main_funtionBg::-webkit-scrollbar {/*滾動條整體樣式*/
	width: 7px;     /*高寬分別對應橫豎滾動條的尺寸*/
	height: 1px;
	margin: 7px 0px;
	border-radius: 7px;
}
.main .main_funtionBg::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	background-color: rgb(0,0,0); 
	border-radius: 7px;
}
.main .main_funtionBg::-webkit-scrollbar-track {/*滾動條裡面軌道*/
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	/*background-color: #333;*/
	background-color: transparent;
	border-radius: 7px;
}

/*///////////////////////////*/
/*---左側選單_滾動條樣式 end---*/
/*///////////////////////////*/	

	
	/*右側*/
	.main > .right{
		position: unset;
    width: calc(100% - 270px);
    margin-left: auto;
	}
		.main > .right > .content {
			position: unset;
			left: 0;
    		right: 0;
			top: 0;
			bottom: 0px;
			background-color: #f8f8f8;
			padding: 20px 0px ;
			font-size: 14px;
			
			overflow-x: hidden;
			overflow-y: auto;
			height: 100%;
			box-sizing: border-box;
		}

		
		/*內容區塊_上半部*/
		.content_topBg{
		}
					
			
/*///////////////*/
/*---麵包屑 start---*/
/*///////////////*/	
			
.crumb_bg {
	padding: 10px 0px;
}
	.crumb_bg .list_area{
		color: #777777;
		font-size: 14px;
		padding: 13px 0px;
		border-bottom: 1px solid #e3e3e3;
	}
		.crumb_bg .list_area .list{
			float: left;
			padding-right: 6px;
		}
			
			.crumb_bg .list_area i{
				display: inline-block;
				vertical-align: middle;
				font-size: 18px;
				
				position: relative;
				top: -1px;
			}
			.crumb_bg .list_area .list:nth-of-type(1) i{
				color: var(--primary_color);
			}
			
			.crumb_bg .content{
				display: inline-block;
				vertical-align: middle;
				font-size: 14px;
				margin-right: -1px;
				line-height: 22px;
			}
			
				.crumb_bg a{
					text-decoration: none;
					display: inline-block;
					vertical-align: middle;
					color: var(--primary_color);
					font-size: 14px;
					line-height: 22px;
					transition: 0.3s ease all;
				}
				
				/*hover*/
				.crumb_bg a:hover{
					/*color: #252525;*/
					text-decoration: underline;
					transition: 0.3s ease all;
				}

/*///////////////*/
/*---麵包屑 end---*/
/*///////////////*/	
			
			


/*內容區塊_下半部*/
.content_bottomBg{
	margin: 30px 0px 0px;
}


	/*標題區塊*/
	.right .content .content_titleBg{
		margin-bottom: 30px;
	}
	
		/*標題*/
		.right .content_titleBg .title{
			font-weight: bold;
			font-size: clamp( 1.25rem, 2.9333vw, 1.375rem ); /* 20 22 */
			color: #333;
			width: 100%;
			box-sizing: border-box;
			/*padding: 10px 15px;
			margin-bottom: 15px;
			border-bottom: 1px solid #ccc;*/
			position: relative;
		}
		.right .content_titleBg .title_two{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}


		/*文字區塊*/
		.main > .right .text_area{
			position: relative;
			padding: 15px;
			background-color: #fff;
			color: #5b5b5b;
			border: 1px solid #e7e7e7;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			margin-top: 20px;
			}
				.main > .right .text_area section{
					font-size: 14px;
					line-height: 20px;
				}
				
				
	/*其他功能區塊*/
	.other_bg{
		/*padding-top: 25px;*/
	}
		.other_listArea{
			/*margin: 0px -3px;*/
			margin: 0px -10px;
		}
			.other_list{
				float: left;
				min-width: 96px;
				/*padding: 0px 3px;*/
				padding: 10px;
				box-sizing: border-box;
			}
				.other_bg .other_list input{
					color: #000;
					text-decoration: none;
					width: 100%;
					height: auto;
					text-align: center;
					
					line-height: 35px;
					font-size: clamp( .8125rem, 2vw, .9375rem ); /* 13 15 */
					background-color: #fff;
					color: #000;
					font-weight: bold;
					border: 1px solid #e7e7e7;
					padding: 2px 15px 0px;
					
					border-radius: 0px;
					box-sizing: border-box;
					transition: 0.3s ease all;
				}

				.other_bg .other_list input.add{
					border-color: #e71f19;
					background-color: #e71f19;
					color: #fff;
				}

			.other_list.member_add{
				/*float: left;*/
			}
				.other_bg .other_list.member_add input{
					/*background-color: #f9a605;
					color: #fff;*/
				}
			.other_list.search{
				/*float: right;*/
			}

				.other_list.search .search_in{
					position: relative;
					width: 240px;
					display: inline-block;
					transition: 0.4s ease all;
					box-sizing: border-box;
					padding-right: 35px;
					border: 1px solid #e7e7e7;
					background-color: #fff;
				}
					.other_list.search .search_in input[type='text'] {
						border: none;
						background: none;
						height: 36px;
						line-height: 36px;
						transition: 0.4s ease all;
						padding: 9px 15px;
						text-align: left;
						font-weight: normal;
					}
					.other_list.search .search_in label {
						display: block;
						position: absolute;
						top: -2px;
						right: 0px;
						color: #a3a3a3;
						height: 36px;
						border-radius: 0px 3px 3px 0px;
						box-sizing: border-box;
						padding: 12px 8.5px 10px;
						transition:0.4s ease all;
						/*border-left: 1px solid #e7e7e7;*/
					}
						.other_list.search .search_in label i {
							position: relative;
    						top: -4px;
						}
						.other_list.search .search_in label input {
							display:none;
						}
				

/*modify by pekey 20180119 start*/
.other_list.search .search_in input[type='text']::-webkit-input-placeholder { /* WebKit browsers */
  	/*color: rgba(255,255,255,0.7);*/
	color: #a3a3a3;
}
.other_list.search .search_in input[type='text']:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  	/*color: rgba(255,255,255,0.7);*/
	color: #a3a3a3;
}
.other_list.search .search_in input[type='text']::-moz-placeholder { /* Mozilla Firefox 19+ */
  	/*color: rgba(255,255,255,0.7);*/
	color: #a3a3a3;
}
.other_list.search .search_in input[type='text']:-ms-input-placeholder { /* Internet Explorer 10+ */
  	/*color: rgba(255,255,255,0.7);*/
	color: #a3a3a3;
}
/*modify by pekey 20180119 end*/




@media (max-width: 640px){
	
	.other_list{
		float: none;
		/*display: inline-block;*/
		display: block;
		padding: 10px 0;
	}
	.other_list.search{
		display: block;
		/*padding: 5px 3px 0px;*/
		padding: 5px 0px 0px;
	}
		.other_list.search .search_in{
			width: 100%;
		}
}


@media (max-width: 540px) {
	.right .content_titleBg .title_two{
		display: block;
	}

}




	/*主內容*/
	/*.right .content_mainBg, .right .table_mainBg{*/
	.right .content_mainBg{	
		position: relative;
		padding: 15px;
		background-color: #fff;
		color: #5b5b5b;
		border: 1px solid #e7e7e7;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		
		margin-top: 5px;
	}	
		
		/*表格_標題區塊*/
		.right .table_mainBg .table_titleArea{
			
		}
			.right .table_mainBg .table_titleArea table{
				width: 100%;
			}
				.right .table_mainBg .table_titleArea tbody{
				}
					.right .table_mainBg table_titleArea tr{
					}
					.right .table_mainBg table_titleArea tr:nth-of-type(1){
					}
						.right .table_mainBg .table_titleArea td{
							font-weight: bold;
							padding: clamp( .3125rem, 1.3333vw, .625rem );
							vertical-align: middle;
							border-bottom: 1px solid #e7e7e7;
							font-size: 15px;
						}
							.right .table_mainBg .table_titleArea a{
								font-weight: bold;
								font-size: 15px;
								color: #000;
								text-decoration: none;
								cursor: inherit;
							}
							.right .table_mainBg .table_titleArea .button{
								width: 55px;
								height: 26px;
								margin: 0px auto;
							}
								.right .table_mainBg .table_titleArea .button input[type="button"]{
									/*color: #000;
									text-decoration: none;
									cursor: initial;
									width: 100%;
									height: auto;
									line-height: 26px;
									background-color: transparent;
									cursor: inherit;
									font-weight: bold;*/
									display: none;
								}
								
								/*hover*/
								.right .table_mainBg .table_titleArea .button input[type="button"]:hover{
									opacity: 1;
								}
				
			
			/*表格_內容區塊*/
			.right .table_mainBg > .table_contentArea{
			}
				.right .table_mainBg > .table_contentArea table{
					width: 100%;
				}
					.right .table_mainBg > .table_contentArea tbody{
					}
						.right .table_mainBg > .table_contentArea tr{
						}
							.right .table_mainBg > .table_contentArea td{
								padding: clamp( .3125rem, 1.3333vw, .625rem );
								vertical-align: middle;
								border-bottom: 1px solid #e7e7e7;
								box-sizing: border-box;
								
								font-size: clamp( .75rem, 1.8667vw, .875rem ); /* 12 14 */
    							line-height: 18px;
							}

							/* 商品圖設定 */
							.table_contentArea td .product_image{
								display: block;
								position: relative;
								padding-top: 80%;
							}
							.table_contentArea td .product_image img{
								width:100%;
								height:auto;
								transition: all 0.3s ease-out;
								position: absolute;
								top: 0;
								left: 0;
								bottom: 0;
								right: 0;
								float: none;
								width: 100% !important;
								height: 100% !important;
								object-fit: cover;
								transition: all 0.3s ease-out;
							}


							.right .table_mainBg > .table_contentArea td.price{
								font-weight: bold;
								padding: 10px 0px;
								vertical-align: middle;
								border-bottom: 1px solid #e7e7e7;
								font-size: clamp( .8125rem, 2vw, .9375rem ); /* 13 15 */
								color: #e71f19;
							}

							.right .table_mainBg > .table_contentArea td:last-of-type{
								/*text-align: center;*/
							}
							
							.right .table_mainBg .table_contentArea a{
								font-size: 15px;
								color: #000;
								cursor: inherit;
								/*text-decoration: none;*/
							}
							
							.right .table_mainBg .table_contentArea .button {
								/* width: 55px; */
								/* height: 26px; */
								/* margin: 0px auto; */
								margin: 2px auto;  /*20231103*/
								
								display: inline-block;
								vertical-align:middle;
							}
								.right .table_mainBg .table_contentArea .button input[type="button"]{
									color: #000;
									text-decoration: none;
									width: 100%;
									height: auto;
									line-height: 26px;
									font-size: clamp( .6875rem, 1.7333vw, .8125rem ); /* 11 13 */
									background-color: var(--fourth_color);
									color: #fff;
									cursor: pointer;
									border-radius: 5px;
									padding: 0px 5px;
									box-sizing: border-box;
								}

								.right .table_mainBg .table_contentArea .button:first-of-type input[type="button"] {
									background-color: var(--second_color);
								}

								.right .table_mainBg .table_contentArea .again .button input[type="button"]{
									background-color: var(--primary_color);
								}

								.right .table_mainBg .table_contentArea .button.modify input[type="button"]{
									background-color: #e71f19;
								}
								
								/*hover*/
								.right .table_mainBg .table_contentArea .button input[type="button"]:hover{
									opacity: 1;
								}
				
		
	

/*返回上一頁按鈕*/
.button_area {
	font-size:0px;
	text-align:center;
	
	padding: 50px 0px 20px;
	box-sizing: border-box;
}

	
	.button_area input {
		margin:0px 30px;
		background-color: var(--primary_color);
		transition: 0.6s ease all;
		border-radius: 42px;
	}
	
	.button_area input:nth-child(2n){
		background-color:var(--third_color);
	}
	
		.button_area input:hover {
			background-color: var(--second_color);
			transition: 0.6s ease all;
			opacity: 1;
		}



@media (max-width: 1024px){
	
	/*左側*/
	.main > .left{
		left: -270px;
		
		transition: 0.3s ease all;
	}
	.main > .left.active{
		left: 0px;
		
		transition: 0.3s ease all;
	}
	
	/*右側*/
	.main > .right{
		left: 0px;
		
		transition: 0.3s ease all;
		width: 100%;
	}
	.main > .right.active{
		left: 270px;
		right: -270px;
		
		transition: 0.3s ease all;
	}
}

@media (max-width: 768px){

	/*表格_標題區塊*/
	.right .table_mainBg .table_titleArea{
		display: none;
	}
	
	/*表格_內容區塊*/
	.right .table_mainBg > .table_contentArea td{
		display: block;
		width: 100%;
	}
	.right .table_mainBg > .table_contentArea td:nth-of-type(1){
		text-align: center;
		padding: 20px 15px;
	}
	.right .table_mainBg > .table_contentArea td:last-of-type{
		border-bottom: 2px solid #777;
		padding: 20px 15px;
	}
	
		.table_contentArea td:before {
			content:attr(data-name);
			font-weight: bold;
			color: #000;
		}
			.right .table_mainBg .table_contentArea .read_button {
				width: 50%;
				height: 30px;
			}
				.right .table_mainBg .table_contentArea .read_button input[type="button"]{
					line-height: 30px;
				}
		
}

@media (max-width: 640px){

	.right .table_mainBg > .table_contentArea td{
		padding: 10px 0px;
	}
	.right .table_mainBg > .table_contentArea td:nth-of-type(1){
		padding: 20px 0px;
	}
	.right .table_mainBg > .table_contentArea td:last-of-type{
		padding: 20px 0px;
	}
		.table_contentArea td:before {
			display: block;
			/*padding-bottom: 2px;*/
			padding-bottom: 7px;
		}
}

@media (max-width: 474px){
/*返回上一頁按鈕*/
.button_area {
	font-size:0px;
	text-align:center;
	
	padding: 50px 0px 20px;
	box-sizing: border-box;
}
	
	.button_area input {
		margin: 0;
		background-color: #666;
		width: 49%;
	}
	
}





/*///////////////*/
/*---頁數列區塊 start---*/
/*///////////////*/	

.number_pageArea{
	text-align:center;
	padding-top: 50px;
}
	/*左側區塊*/
	.numberPage_leftArea{
		display: inline-block;
		vertical-align: middle;
	}	
		.numberPage_leftList{
			display: inline-block;
			vertical-align: middle;
		}
			.numberPage_leftList a{
				display: block;
				text-decoration: none;
			}
		
	/*中間區塊*/
	.numberPage_middleArea{
		display: inline-block;
		vertical-align: middle;
		padding: 0px 8px;
	}
		.numberPage_middleList{
			display: inline-block;
			vertical-align: middle;
			padding: 0px 4px;
		}
			.numberPage_middleList a{
				display: block;
				text-decoration: none;
				width: 32px;
				height: 32px;
				line-height: 19px;
				border-radius: 100%;
				background-color: transparent;
				color: #808080;
				padding: 7.5px 0px;
				box-sizing: border-box;
			}
			
			/*active*/
			.numberPage_middleList.active a{
				background-color: var(--third_color);
				color: #fff;
			}
			
			/*hover*/
			.numberPage_middleList a:hover{
				background-color: var(--second_color);
				color: #fff;
			}
	
	/*右邊區塊*/	
	.numberPage_rightArea{
		display: inline-block;
		vertical-align: middle;
	}
		.numberPage_rightList{
			display: inline-block;
			vertical-align: middle;
		}
			.numberPage_rightList a{
				display: block;
				text-decoration: none;
			}
		
	
@media (max-width: 640px){
	
		.numberPage_leftList:first-child{
			display: none;
		}
		
	.numberPage_middleArea{
		padding: 0px;
	}
		.numberPage_middleList{
			padding: 0px;
		}
		
		.numberPage_rightList:last-child{
			display: none;
		}
		
}

/*///////////////*/
/*---頁數列區塊 end---*/
/*///////////////*/	



/*/////////////////////////////////////////////////////////*/
/*-------首頁內容--------*/
/*/////////////////////////////////////////////////////////*/



/*////////////////////////////*/
/*-------客戶資料維護頁面--------*/
/*////////////////////////////*/

/*頁籤區塊*/
.right .form_mainBg.customer_tab{
	position: relative;
	/*padding: 15px;*/
	
	/*background-color: #fff;
	color: #5b5b5b;
	border: 1px solid #e7e7e7;*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	
	margin: 5px 0px;
}
.right .form_mainBg.customer_basicPage{
	position: relative;
	padding: 15px;
	background-color: #fff;
	color: #5b5b5b;
	border: 1px solid #e7e7e7;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	
	margin-bottom: 30px;
	
	/*border-top-left-radius: 0px;
	border-top-right-radius: 0px;*/
}

	/*標題*/
	.right .form_mainBg.customer_basicPage .title{
		font-weight: bold;
		/*color: #000;*/
		color: #19aee7;
		font-size: 18px;
		border-bottom: 1px solid #777;
		padding: 10px 0px;
		margin: 0px 0px 15px;
	}
	
	/*表單區塊*/
	.right .form_mainBg.customer_basicPage .form_area{
		text-align: center;
	}
		.right .form_mainBg.customer_basicPage .form_list{
			/*padding: 10px 10px 10px 0px;*/
			padding: 10px 5px;
			font-size: 14px;
			line-height: 18px;
		}
		.right .form_mainBg.customer_basicPage .form_list:nth-of-type(2n){
			/*padding: 10px 0px;*/
			padding: 10px 5px;
		}
		
		
		/*半則樣式*/
		.form_list.half_type50{
			/*display: inline-block;
			vertical-align: top;
			width: 49%;*/
			float: left;
			width: 50%;
			box-sizing: border-box;
			margin: 0px auto;
		}
		/*三等份樣式*/
		.form_list.half_type33{
			float: left;
			width: 33.3%;
			box-sizing: border-box;
			margin: 0px auto;
		}
			.right .form_mainBg.customer_basicPage .form_listIn{
				border-bottom: 1px solid #e7e7e7;
			}
			
			
			/*標題*/
			.form_listTitle{
				font-weight:bold;
				padding: 7.5px 0px;			
				font-size: 15px;	
				text-align: left;
			}
	
			/*內容*/
			.form_listContent{
				padding: 7.5px 0px;		
				font-size: 14px;
				line-height: 18px;
				
				text-align: left;
				min-height: 33px;
				box-sizing: border-box;
			}
			
				/*維護時間樣式*/
				.form_listContent.time {
					color: red;
				}
				/*網址連結樣式*/
				.form_listContent.internet a{
					color: blue;
					text-decoration: underline;
				}
				/*網址連結樣式*/
				.form_listContent.dns a{
					color: blue;
					text-decoration: underline;
				}
				
				.form_listContent label{
					display: inline-block;
    				padding: 5px 10px;
					box-sizing: border-box;
				}
				
				/*維運項目class加operation*/
				.form_listContent.operation label{
					width: 19%;
				}
				
				.form_listContent input[type="text"]{
					padding: 7.5px 5px;
					font-size: 14px;
					line-height: 18px;
					text-align: left;
					height: 33px;
					line-height: 33px;
					box-sizing: border-box;
				}
				.form_listContent input[type="checkbox"]{
					padding: 7.5px 0px;
					height: 12px;
					box-sizing: border-box;
				}




	.right .table_mainBg.customer_basicPage > .table_contentArea td:nth-of-type(1){
		text-align: left;
		padding: 10px 10px;
	}





@media (max-width: 640px){
	
	.right .form_mainBg.customer_basicPage .form_list{
		padding: 10px 0px;
	}
	.right .form_mainBg.customer_basicPage .form_list:nth-of-type(2n){
		padding: 10px 0px;
	}
	
	/*半則樣式*/
	.right .form_mainBg.customer_basicPage .form_list.half_type50{
		float: none;
		width: 100%;
	}
	/*三等份樣式*/
	.form_list.half_type33{
		float: none;
		width: 100%;
	}
	
		/*維運項目class加operation*/
		.form_listContent.operation label{
			width: 49%;
		}
	
	
	.right .table_mainBg.customer_basicPage > .table_contentArea td:nth-of-type(1){
		padding: 10px 0px;
	}
}




/*/////////////////////////////////////////////////////////*/
/*-------登入頁面內容--------*/
/*/////////////////////////////////////////////////////////*/

.login_page{
	 /*Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ca4300+0,f9a605+100 */
	/*background: #ca4300; 
	background: -moz-linear-gradient(45deg,  #ca4300 0%, #f9a605 100%); 
	background: -webkit-linear-gradient(45deg,  #ca4300 0%,#f9a605 100%);
	background: linear-gradient(45deg,  #ca4300 0%,#f9a605 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca4300', endColorstr='#f9a605',GradientType=1 ); */
	
	background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	
}
	.login_pageContent{
	}
	
	/*內容區塊*/
	.login_page .main{
		padding: 5% 0px 0%;
		box-sizing: border-box;
		position: relative;
		
		/*overflow-y:auto;*/

		min-height: 899px;
	}
		.login_page .logo{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin: 0px auto;
			/*background-color: #fff;*/
			position: relative;
		}
			.login_page .logo img{
				width: 80%;
				height: auto;
				
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translateX(-50%)  translateY(-50%) ;
				transform: translateX(-50%) translateY(-50%) ;

			}
	
		/*表單區塊*/
		.login_page .form_bg{
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
			max-height: 100%;
			max-width: 100%;
			box-shadow: 1px 1px 5px #333333;
		}	
			
			/*表單清單區塊*/
			.login_page .form_area{
				width: 450px;
				margin: 0px auto;
				padding: 30px 50px;
				box-sizing: border-box;
				
				/*background-color: rgba(255,255,255,0.1);*/
				background-color: rgba(255,255,255,1);
				border-radius: 6px;
				/*border: 1px solid rgba(202, 67, 0, 0.7);
				box-shadow: #ca4300 0.1em 0.3em 0.9em;*/
				border: 1px solid #eee;
				display: block;
			}
	
		
				/*logo*/
				.login_logo{
					width: 190px;
					text-align: center;
					margin: 0px auto 15px;
				}
					.login_logo img{
						width: 100%;
						height: auto;
					}
			
				/*標題*/
				.login_page .form_area .title{
					text-align: center;
					font-weight: bold;
					font-size: clamp( 1.125rem, 2.6667vw, 1.25rem ); /* 18 20 */
					color: #000;
					margin: 0 auto;
				}
				
				/*簡述*/
				.login_page .form_area .text{
					text-align: center;
					font-size: 13px;
					/*color: rgba(255,255,255,0.7);*/
					color: rgba(0,0,0,1);
					padding-top: 20px;
				}
				
				/*表單清單區塊*/
				.login_page .form_content{
					padding: 10px 0px 0px;
				}
				
				/*表單清單區塊*/
				.login_page .form_content.forgot{
					padding: 10px 0px 0px;
					width: 100%;
				}
					
					
					/*欄位*/
					.login_page .form_content .form_list{
						padding: 10px 0px;
					}
						/*內容bg*/
						.login_page .form_content .form_listIn{
							/*border-bottom: 1px solid rgba(255,255,255,0.7);*/
							border-bottom: 1px solid #999;
							position: relative;
							border-radius: 0;
						}
							
							/*圖塊*/
							.login_page .form_content .form_listIn .icon{
								position: absolute;
								left: 10px;
								top: 50%;
								-webkit-transform: translateY(-50%);
								transform: translateY(-50%);
								width: 25px;
								padding-right: 10px;
								/*border-right: 1px solid #fff;*/
								border-right: 1px solid #999;
							}
								.login_page .form_content .form_listIn .icon img{
									width: 100%;
									height: auto;
								}
							
							
										
							/*表單*/
							.login_page .form_content .form_listIn .input{
								/*padding-left: 90px;*/
								padding-left: 60px;
								box-sizing: border-box;
								border: 0px solid #e7e7e7;
							}
								.login_page .form_content .form_listIn input[type="text"]:focus, input[type="password"]:focus {
									border: solid 0px #d5d5d5;
								}
								.login_page .form_content .form_listIn .input input[type="text"], input[type="password"]{
									border: 0px;
									
									outline: none;
									z-index: 1;
									position: relative;
									background: none;
									width: 100%;
									/*height: 60px;*/
									border: 0;
									/*color: #fff;*/
									color: #000;
									font-size: 15px;
									font-weight: 400;
									padding: 0px;
								}
								
					.contact_tit{
						padding:10px 0px;
						font-size: 12px;
						color:#999;
						line-height: 16px;
					}
					
					.contact_tit > a{
						color:#666;
						font-weight:bold;
						text-decoration: underline;
					}
					
					.contact_tit > a:hover{
						opacity: 0.7;
					}
					
					.contact_titArea .contact_tit:nth-of-type(1) {
						float: left;
					}
					
					.contact_titArea .contact_tit:nth-of-type(2) {
						float: right;
					}
						.contact_titArea .contact_tit:nth-of-type(2) a{
							text-decoration: none;
							font-weight: normal;
						}
								
	
/*modify by pekey 20200304 start*/
.login_page .form_content .form_listIn .input ::-webkit-input-placeholder { /* WebKit browsers */
    /*color: rgba(255,255,255,0.7);*/
	color: #999;
	font-size: 13px;
}
.login_page .form_content .form_listIn .input :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    /*color: rgba(255,255,255,0.7);*/
	color: #999;
	font-size: 13px;
}
.login_page .form_content .form_listIn .input ::-moz-placeholder { /* Mozilla Firefox 19+ */
    /*color: rgba(255,255,255,0.7);*/
	color: #999;
	font-size: 13px;
}
.login_page .form_content .form_listIn .input :-ms-input-placeholder { /* Internet Explorer 10+ */
    /*color: rgba(255,255,255,0.7);*/
	color: #999;
	font-size: 13px;
}
/*modify by pekey 20200304 end*/					

			
				
						
/*登入頁驗證碼樣式*/
.login_page .form_content .form_list.captcha{
	text-align: left;
	padding: 10px 0px!important;
}	
								
	/*登入頁驗證碼樣式*/
	.login_page .form_content .form_list.captcha .form_listIn{
		border-bottom: 0;
	}	
		
		/*標題*/	
		.login_page .captcha_tit{
			font-size: 14px;
			line-height: normal;
			/*color: #fff;*/
			color: #000;
		}
		
		/*欄位區塊*/
		.login_page .captcha_list{
		}
			.login_page .captcha_list input[type="text"]{
				width: 35%;
				height: 30px;
				line-height: 30px;
				display: inline-block;
				background-color: transparent;
				border: 0;
				/*border-bottom: 1px solid rgba(255,255,255,0.7);*/
				border-bottom: 1px solid #999;
				border-radius: 0;
				/*color: #fff;*/
				color: #999;
				font-size: 13px;
			}
			.login_page .captcha_list input[type="text"]:focus {
				border-bottom: 1px solid #999;
			}
			.login_page .captcha_list span{
				display: inline-block;
			}
				.login_page .captcha_list a{
					background-color: transparent;
					/*color: #fff;*/
					color: #999;
				}		
				.login_page .captcha_list a span{
					/*color: #fff;*/
					color: #999;
				}						
						

				.login_page .captcha img {
					vertical-align:middle;
					width: 60px;
					height: auto;
				}
				.login_page .captcha a img {
					vertical-align:top;
					width: 25px;
				}	
							
				
				
				/*會員登入按鈕區塊*/
				.button_area.login {
					padding: 20px 0px 0px;
				}
						
					.button_area.login input {
						background-color: transparent;
						/*color: #fff;*/
						color: var(--primary_color);
						font-weight: bold;
						/*border: 1px solid #fff;*/
						border: 1px solid var(--primary_color);;
						transition: 0.6s ease all;
					}
					
					.button_area.login input:hover {
						background-color: var(--primary_color);
						color: #fff;
						transition: 0.6s ease all;
						opacity: 1;
					}
							
						
/*modify by pekey 20180119 start*/
.login_page .captcha_list input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */
  	/*color: rgba(255,255,255,0.7);*/
	color: #999;
}
.login_page .captcha_list input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  	/*color: rgba(255,255,255,0.7);*/
	color: #999;
}
.login_page .captcha_list input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */
  	/*color: rgba(255,255,255,0.7);*/
	color: #999;
}
.login_page .captcha_list input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */
  	/*color: rgba(255,255,255,0.7);*/
	color: #999;
}
/*modify by pekey 20180119 end*/					
					
					
		
		.login_page .footer{
			padding: 15px 0px;
			text-align: center;
			background-color: var(--second_color);
			/*border-top: 1px solid rgba(255,255,255,0.7);*/
			font-size: 12px;
			line-height: 16px;
			color: var(--primary_color);
		}
		
		.login_page .footer a{
			color: #fff;
		}
			
		

@media (max-width: 640px){
	.login_page .form_bg{
		width: 90%;
	}
		.login_page .form_area{
			width: 100%;
			padding: 25px 25px;
		}
			.login_logo {
    			width: 160px;
			}
			
			.login_page .captcha_list input[type="text"]{
				width: 30%;
				margin: 0px;
			}
			.login_page .captcha_list a{
				padding: 0px;
			}
			.login_page .captcha_list a span{
				font-size: 12px;
			}
			.login_page .captcha_list a img{
				width: 20px;
				vertical-align: middle;
			}
}



/*////////////////////////////*/
/*-----公佈欄頁面 (最新消息)------*/
/*////////////////////////////*/			

/*最新消息區塊*/	
.news_listBg{

}
	.news_listArea{
	}
		.news_list{
			padding: 10px 0px;
			border-bottom: 1px solid #e7e7e7;
			box-sizing: border-box;
			font-size: 14px;
			line-height: 18px;
		}
		
		.news_list:first-of-type{
			padding: 0px 0px 10px;
		}
			.news_listIn{
				position: relative;
				padding-left: 100px;
			}
				.news_listIn .time{
					position: absolute;
					left: 0px;
				}
				
				.news_listIn .title{
				}
					.news_listIn .title a{
						display: block;
						color: #5b5b5b;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						transition: color 0.3s ease, font-weight 0.3s ease, transform 0.3s ease;
					}
					.news_listIn .title a:hover{
						text-decoration: none;
						color: var(--third_color);
						font-weight: bold;
						transform: translateX(2px);
					}
		

				.other_list.time .timeSearch_area {
					font-size: 0px;
					letter-spacing: 3px;
					padding-left: 20px;
					border-left: 1px solid #e2e2e2;
					box-sizing: border-box;
				}
				.other_list.time .time_area{
					text-align: right;
					padding:0px ;
				}
					.other_list.time .time_range {
						font-size:15px;
						display:inline-block;
						vertical-align:middle;
						padding: 0px 5px 0px 0px;
					}
						.other_list.time .time_range select {
							border: 1px solid #e7e7e7;
							border-radius: 0px;
						}
						
					.other_list.time .timeSearch_area span {
						font-size:15px;
						display:inline-block;
						padding: 0px 5px 4px 0px;
						vertical-align:middle;
					}
					
					
					.other_list.time label.timeSearch_btn  {
						font-family: 'LigatureSymbols';
						-webkit-text-rendering: optimizeLegibility;
						-moz-text-rendering: optimizeLegibility;
						-ms-text-rendering: optimizeLegibility;
						-o-text-rendering: optimizeLegibility;
						text-rendering: optimizeLegibility;
						-webkit-font-smoothing: antialiased;
						-moz-font-smoothing: antialiased;
						-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
						font-smoothing: antialiased;
						-webkit-font-feature-settings: "liga" 1, "dlig" 1;
						-moz-font-feature-settings: "liga=1, dlig=1";
						-ms-font-feature-settings: "liga" 1, "dlig" 1;
						-o-font-feature-settings: "liga" 1, "dlig" 1;
						font-feature-settings: "liga" 1, "dlig" 1;
						
						font-size: 25px;
						width: 42px;
						height: 38px;
						line-height: 38px;
						display: inline-block;
						border-radius: 4px;
						background: #fff;
						color: #a3a3a3;
						vertical-align: top;
						text-align: center;
						transition: 0.3s ease all;
						letter-spacing: 0px;
						border: 1px solid #e7e7e7;
					}
					.other_list.time label.timeSearch_btn  input[type='submit'] {
						display:none;
					}
					.other_list.time label.timeSearch_btn  input[type='button'] {
						display:none;
					}
					/*hover*/
					.other_list.time label.timeSearch_btn :hover {
						opacity:0.7;
					}
					
					/*hover*/
					.other_list.time .timeSearch_area input[type='submit']:hover {
						opacity:0.7;
					}
					/*hover*/
					.other_list.time .timeSearch_area input[type='button']:hover {
						opacity:0.7;
					}
						
						
@media (max-width: 980px){
	.other_list.time label.timeSearch_btn  {
		margin:0px;
	}
}

@media (max-width: 895px){
.other_list.time .timeSearch_area {
    padding-left: 0px;
    border-left: 0px solid #e2e2e2;
}
}

@media (max-width: 780px){
	.other_list.time .timeSearch_area {
		letter-spacing:1px;
	}
		.other_list.time .time_range {
			padding: 0px 10px 0px 0px;
		}
		.other_list.time .timeSearch_area span {
			padding: 0px 10px 4px 0px;
		}	
}


@media (max-width: 640px){
	.other_list.time .timeSearch_area {
		padding:0px;
		margin:0px;
		text-align:center;
	}
	.other_list.time .time_range, .timeSearch_area span {
		display:block;
		padding: 0px 0px 10px 0px;
	}
	.other_list.time .timeSearch_area span {
		text-align:center;
	}
		
	.other_list.time label.timeSearch_btn  {
		width:100%;
		height:42px;
		line-height:42px;
	}
}

@media (max-width: 350px){
	.other_list.time .time_range {
		font-size:14px;
		letter-spacing:0px;
		white-space:nowrap;
	}
		.other_list.time .time_range select {
			width: 75px;
		}
}	
	
	
	
/*////////////////////////////*/
/*-----公佈欄頁面_內頁 (最新消息)------*/
/*////////////////////////////*/	
	
.news_titArea{
	font-size: 24px;
    line-height: 30px;
	color: #2e282a;
	padding-bottom: 25px;
}
	.news_titArea > h1 {
		display:inherit;
		font-size: 20px;
		line-height: 26px;
		padding-top: 10px;
		margin-block-start:inherit;
		margin-block-end:inherit;
		margin-inline-start:inherit;
		margin-inline-end:inherit;
		font-weight:inherit;
		font-weight: bold;
	}
	.tit_list {
		color: #5f6267;
		font-size: 14px;
		line-height: 14px;
		border-right: 1px solid #808080;
		display: inline-block;
		padding-right: 8px;
	}
	.tit_list:nth-of-type(2) {
		border-right: 0px solid #808080;
	}
	
	
/*////////////////////////////*/
/*-----訂貨專區------*/
/*////////////////////////////*/	

/*----第一頁----*/
.right .table_mainBg.join_orderingPage > .table_contentArea td:nth-of-type(6) {
    /* font-weight: bold;
    padding: 10px 0;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e7;
    font-size: 15px;
	color: #e71f19; */
}

@media (max-width: 768px){
.right .table_mainBg.join_orderingPage > .table_contentArea td:nth-of-type(6) {
    display: block;
    width: 100%;
}
.right .table_mainBg.join_orderingPage input {
	margin: 5px 0 0;
}

.right .table_mainBg.join_orderingPage > .table_contentArea td:last-of-type {
    border-bottom: 2px solid #777;
    padding: 10px 0px 20px;
	text-align: center;
}
}

@media (max-width: 640px){
.right .table_mainBg.join_orderingPage > .table_contentArea td:nth-of-type(6) {
    padding: 10px 0px;
}
.right .table_mainBg.join_orderingPage input {
	margin: 0;
}	
}

/*----第二頁----*/
/*按鈕*/
.right .table_mainBg.join_orderingPage_2 > .table_contentArea td:nth-of-type(8) {
    text-align: right;
}

/*紅字含稅價*/
.right .table_mainBg.join_orderingPage_2 > .table_contentArea td:nth-of-type(5) {
    /* font-weight: bold;
    padding: 10px 0;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e7;
    font-size: 15px;
    color: #e71f19; */
}

@media (max-width: 768px){
.right .table_mainBg.join_orderingPage_2 > .table_contentArea td:nth-of-type(1) {
    text-align: left;
    padding: 10px 0px;
}

/*按鈕*/
.right .table_mainBg.join_orderingPage_2 > .table_contentArea td:nth-of-type(8) {
    text-align: center;
}
}

/*表格_備註區塊*/
.tracking_numberkArea,
.order_statusArea,
.order_remarkArea {
	padding-top: 15px;
}

	.order_remarkArea textarea {
		border: 1px solid #e7e7e7;
	}

	.logistics_btn{
		background-color: var(--second_color);
		border-radius: 5px;
		width: 100%;
    	max-width: 90px;
    	text-align: center;
	}

	.logistics_btn a{
		display: block;
		padding: 10px 10px;
		text-decoration: none;
		color: #fff;
	}

	.logistics_btn:hover{
		background-color: var(--primary_color);
	}










/*////////////////////////////*/
/*-----文件下載------*/
/*////////////////////////////*/	

.right .table_mainBg.file_downloadPage > .table_contentArea td:nth-of-type(1) {
    text-align: left;
    padding: 10px 0px;
}

.right .table_mainBg.file_downloadPage > .table_contentArea td:last-of-type {
    text-align: center;
}

@media (max-width: 640px){
	.right .table_mainBg.file_downloadPage > .table_contentArea td:nth-of-type(1) {
		padding: 10px 0px;
	}
}







/*////////////////////////////*/
/*-----門市服務------*/
/*////////////////////////////*/	

	/*表單區*/
	.form_area {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		vertical-align: top;
		justify-content: space-between;
		align-content: flex-start;
	}
	.form_area.store_services textarea, .form_area.store_services select, .form_area.store_services label{
		border: 1px solid #e7e7e7;
	}
		/*活動期間下拉選單*/
		.form_area.store_services .timeSearch_area{
			padding-bottom: 17px;
		}
			.form_list {
				box-sizing:border-box;
				font-size: clamp( .8125rem, 2vw, .9375rem ); /* 13 15 */
				line-height:21px;
				width:100%;
			}
			
			.form_list.fLType2 {
				width: 49%;
			}
			.form_list.fLType3{
				width: 250px;
			} 
				.fL_tit {
					padding:3px 0px 6px 0px;
					position:relative;
					font-weight: 700;
					color: var(--primary_color);

					display: flex;
					align-items: center;
					gap: 5px;
				}
				.fL_tit  i {
					font-size: clamp(.9375rem, 2.2667vw, 1.0625rem);
					line-height: 17px;
					color: var(--primary_color);
				}
					
				.fL_info {
					padding:0px 0px 9px 0px;
					padding:0px 0px 17px 0px;
				}
				.order_search_area .fL_info{
					padding-bottom: 0;
				}
					.fL_info select{
						width:100%;
					}
					
				
					/*沒有輸入框時*/
					.fL_info.no_input {
						padding: 10px 0px 25px 0px;
    					line-height: 24px;
					}
					
					.fL_info label {
						display:inline-block;
					}
					
					/*地址樣式*/
					.fL_info.address select {
						margin:0px 5px 0px 0px;
					}
					.fL_info.address input[type='text']:last-of-type {
						margin:12px 0px 0px 0px;
					}
					
					.fL_right.address input[type='text']:nth-of-type(1) {
						width: 80px;
					}
					
					.fL_right.address input[type='text']:last-of-type {
						margin:12px 0px 17px 0px;
					}

			/*檔案上傳樣式*/
			.inputFile {
				position:relative;
				background:#fff;
				border-radius: 3px;
				padding:0px 80px 0px 0px;
				margin: 0px 0px 17px;
			}
				.inputFile input[type='text'] {
					border:none;
					background:none;
				}
				.inputFile label {
					position: absolute;
					top: 0px;
					left:0px;
					width:100%;
					text-align:right;
				}
					.inputFile label div {
						background: #333f48;
						color: #fff;
						font-size: 15px;
						line-height: 42px;
						text-align:center;
						width:80px;
						display: inline-block;
						transition:0.3s ease all;
					}
						.inputFile label:hover div {
							background: #ca0000;
						}
				.inputFile input[type='file'] {
					display:none;
				}
				
								
			.form_list_remark {
				font-size: 15px;
				line-height: 21px;
				color: #c13e42;
				padding: 12px 0px 0px 0px;
			}
			
			.requirde_icon {
				display: inline-block;
				/* border-radius: 3px; */
				font-size: 15px;
				line-height: 18px;
				/* padding: 0px 5px; */
				color: #cb2923;
				background: #ffffff00;
				padding: 0px;
			}
				.timeSearch_area {
					font-size:0px;
					letter-spacing: 3px;
				}
				time_area{
					text-align: right;
					padding:0px ;
				}
					.time_range {
						font-size:15px;
						display:inline-block;
						vertical-align:middle;
						padding: 0px 5px 0px 0px;
					}
						.time_range select {
							border: 1px solid #e7e7e7;
							border-radius: 0px;
						}
						
					.timeSearch_area span {
						font-size:15px;
						display:inline-block;
						padding: 0px 5px 4px 0px;
						vertical-align:middle;
					}
					
					
					label.timeSearch_btn  {
						font-family: 'LigatureSymbols';
						-webkit-text-rendering: optimizeLegibility;
						-moz-text-rendering: optimizeLegibility;
						-ms-text-rendering: optimizeLegibility;
						-o-text-rendering: optimizeLegibility;
						text-rendering: optimizeLegibility;
						-webkit-font-smoothing: antialiased;
						-moz-font-smoothing: antialiased;
						-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
						font-smoothing: antialiased;
						-webkit-font-feature-settings: "liga" 1, "dlig" 1;
						-moz-font-feature-settings: "liga=1, dlig=1";
						-ms-font-feature-settings: "liga" 1, "dlig" 1;
						-o-font-feature-settings: "liga" 1, "dlig" 1;
						font-feature-settings: "liga" 1, "dlig" 1;
						
						font-size: 25px;
						width: 42px;
						height: 38px;
						line-height: 38px;
						display: inline-block;
						border-radius: 4px;
						background: #fff;
						color: #a3a3a3;
						vertical-align: top;
						text-align: center;
						transition: 0.3s ease all;
						letter-spacing: 0px;
						border: 1px solid #e7e7e7;
					}
					label.timeSearch_btn  input[type='submit'] {
						display:none;
					}
					label.timeSearch_btn  input[type='button'] {
						display:none;
					}
					/*hover*/
					label.timeSearch_btn :hover {
						opacity:0.7;
					}
					
					/*hover*/
					.timeSearch_area input[type='submit']:hover {
						opacity:0.7;
					}
					/*hover*/
					.timeSearch_area input[type='button']:hover {
						opacity:0.7;
					}
						
						
@media (max-width: 980px){
	label.timeSearch_btn  {
		margin-right:15px;
		margin-top:15px;
	}
}
@media (max-width: 950px){
	label.timeSearch_btn {
		margin-top:0px;
	}
}
@media (max-width: 780px){
	.timeSearch_area {
		letter-spacing:1px;
	}
		.time_range {
			padding: 0px 10px 0px 0px;
		}
		.timeSearch_area span {
			padding: 0px 10px 4px 0px;
		}
		
.form_list.fLType2 {
    width: 100%;
}
		
}

@media (max-width: 640px){
.other_listArea{
	float: none;
	margin: 0px;
}
	.timeSearch_area {
		text-align:center;
	}
		.time_range {
			padding: 5px 20px 5px 0px;
		}
			.timeSearch_area span {
				padding: 0px 32px 4px 0px;
			}
			label.timeSearch_btn  {
				margin: 5px 0px;
			}
}

@media (max-width: 640px){
	.timeSearch_area {
		padding:0px;
		margin:0px;
		text-align:center;
	}
	.time_range, .timeSearch_area span {
		display:block;
		padding: 0px 0px 10px 0px;
	}
	.timeSearch_area span {
		text-align:center;
	}
		
	label.timeSearch_btn  {
		width:100%;
		height:42px;
		line-height:42px;
		margin:10px 0px 0px 0px;
	}
}
@media (max-width: 540px) {
	.form_list.fLType3 {
		width: 100%;
	}
}
@media (max-width: 350px){
	.time_range {
		font-size:14px;
		letter-spacing:0px;
		white-space:nowrap;
	}
		.time_range select {
			width: 65px;
		}
}	

/* 門市checkbox----------------------------------------------- */
    /* .item_Check_list  */
    .item_RadioCheckArea .item_Check_list{
      display: inline-flex ;
      align-items: center;
      cursor: pointer;
      gap: 0.4375rem;
    }
    
    /* .item_CheckArea .item_Check_list {
      display: inline-flex;
    } */
    .item_RadioCheckColumn .item_Check_list {
      align-items: unset;
    }
    
    .item_Check_list .item_check {
      position: absolute;
      opacity: 0;
    }
    
    .item_Check_list .custom-check {
      width: 1.25rem;
      aspect-ratio: 1;
      border-radius: 0.25rem; /* 圓角矩形 */
      border: 1px solid #c0c0c0;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .item_Check_list .custom-check .check-mark {
      width: 0.5rem; /* 勾選標記的寬度 */
      /* height: 8px; */
	  aspect-ratio: 1;
      border-radius: 0.125rem;
      /* width: 12px; 
      height: 12px; */
      background-color: transparent;
      /*clip-path: polygon(14% 44%, 0 28%, 50% 82%, 100% 0, 86% 14%, 50% 60%);  *//* 使用clip-path創建勾選標記 */
      transition: background-color 0.2s ease;
    }
    
    .item_Check_list .item_check:checked + .custom-check {
      border-color: var(--primary_color);
    }
    
    .item_Check_list .item_check:checked + .custom-check .check-mark {
      background-color: var(--primary_color);
    }
    
    .item_Check_list .check-text {
      font-size: inherit; /* 文字大小 */
      color: inherit;     /* 文字颜色 */
    }

    .store_area{
        border-radius: .9375rem; /*15*/
        padding:clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 12.90px , 1.3021vw , 25.00px */
        /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
		margin-bottom: clamp( .7813rem, 3.3333vw, 1.5625rem);
		border: 1px solid var(--fourth_color);
    }

        .store_area .form_area .fL_info>label{
            border: none;
        }

		.store_area .form_area {}

            .store_area .fL_tit{
                /* cursor: pointer; */
            }
             .store_area .fL_tit:hover{
                /* opacity: 0.7; */
            }
                .store_area .fL_tit i{
                    color: inherit;  
                    font-size: inherit;  
                }

				/* 20250806預設選單全部打開-------- */
                .store_area .fL_info{
                    display: flex;
					flex-wrap: wrap;
					gap: clamp( .3125rem, 1.3333vw, .625rem );
                }

				/* 註解-------------------------- */
				.InfoRemark {
					font-size: clamp( .625rem, 1.6vw, .75rem ); /* 10 12 */
				}
				.InfoRemark.type2 {
					color: #ff4040;
				}

@media (max-width: 990px){

     .store_area .item_RadioCheckArea {
        flex-direction: row;
    }

}






/*////////////////////////////*/
/*-----帳戶管理_訂單管理------*/
/*////////////////////////////*/

.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(3) {
    /* font-weight: bold;
    padding: 10px 0px;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e7;
    font-size: 15px;
    color: #e71f19; */
}

.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(6) {
	text-align: right;
}

.right .table_mainBg.order_in > .table_contentArea td.price {
    font-weight: bold;
    padding: 10px 0;
    vertical-align: middle;
    border-bottom: 1px solid #e7e7e7;
    font-size: 15px;
    color: #e71f19;
}

@media (max-width: 768px){
	.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(3) {
		display: block;
		width: 100%;
	}
	
	.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(1) {
		text-align: left;
		padding: 10px 0px;
	}
	
	.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(6) {
		text-align: center;
	}
	
	.right .table_mainBg.order_in > .table_contentArea td:nth-of-type(1) {
		text-align: left;
		padding: 10px 0px;
	}
}

@media (max-width: 640px){
	.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(3){
		padding: 10px 0px;
	}
	.right .table_mainBg.order_list > .table_contentArea td:nth-of-type(1){
		padding: 10px 0px;
	}
}




	

/*購物車合計區*/
.cart_total_area {
	padding: 22px 0px 0px;
}
	.cart_total_area table {
		font-size:15px;
		line-height:29px;
		border-top: solid 2px #707070;
	}
		.cart_total_area tr {
		}
			.cart_total_area td {
				padding:6px 15px;
				text-align:right;
				border-bottom: solid 1px #e7e7e7;
				font-weight: bold;
			}
				.cart_total_area td strong {
					font-size:20px;
					color:#de494a;
				}
				.cart_total_area td span {
					/*font-size:13px;*/
					color:#666;
				}
					/*每一行第一個td*/
					.cart_total_area td:first-of-type {
						border-right: solid 1px #e7e7e7;
					}
					/*每一行第二個td*/
					.cart_total_area td:last-of-type {
						width:200px;
					}
					
@media (max-width: 768px){	
.cart_total_area {
	padding: 0px;
}
	.cart_total_area table {
		border-top: solid 0px #707070;
	}
}
							
						
@media (max-width: 525px){
	.btn_area input {
		float: left;
		width: 48%;
		margin: 0px;
	}
	.btn_area.one input{
		float:none;
	}
	.btn_area input:nth-of-type(2) {
		float: right;
	}	
}


@media (max-width: 440px){
	/*每一行第二個td*/
	.cart_total_area td:last-of-type {
		width: 120px;
	}
}


/*////////////////////////////*/
/*-----帳戶管理_訂單管理內頁------*/
/*////////////////////////////*/

.order_complate_remark {
    font-size: 15px;
    line-height: 24px;
    padding: 10px 0 20px;
	border-bottom: 1px solid #e7e7e7;
}	
	.oCR_list {
		display: inline-block;
		padding: 0px 15px 0px 0px;
		font-weight: bold;
	}	
	.oCR_list span{
		font-weight: normal;
	}
	

/*////////////////////////////*/
/*-----帳戶管理_服務申請管理------*/
/*////////////////////////////*/	

@media (max-width: 640px){
	.right .table_mainBg.service_list > .table_contentArea td:nth-of-type(1) {
		padding: 10px 0px;
		text-align: left;
	}
	
	.right .table_mainBg.service_list > .table_contentArea td:nth-of-type(5) {
		text-align: center;
	}
}
	
	
	
	
/*////////////////////////////*/
/*-----帳戶管理_服務申請管理內頁------*/
/*////////////////////////////*/

.form_area.service_in {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    vertical-align: top;
    justify-content: space-between;
    align-content: flex-start;
	box-sizing: border-box;
	padding: 20px 0 0;
}	

	.form_area.service_in .fL_tit {
		padding: 3px 0px 6px 0px;
		position: relative;
		font-weight: bold;
	}
	
	.form_area.service_in .fL_info a {
		display: block;
		color: #5b5b5b;
	}






/*////////////////////////////*/
/*-----帳戶管理_意見反映------*/
/*////////////////////////////*/

.textArea.contactTextArea{
	padding-bottom: 30px;
    line-height: 30px;
    font-size: clamp( .875rem, 2.1333vw, 1rem ); /* 14 16 */
}

.form_area.contact_area textarea{
	border: 1px solid #e7e7e7;
}

/*/////////////////////////////////////////////////////////*/
/*==========加入購物車==========*/
/*/////////////////////////////////////////////////////////*/
.right .table_mainBg .table_contentArea .button.add_cart{
	width: fit-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/*/////////////////////////////////////////////////////////*/
/*購物車模組*/
/*/////////////////////////////////////////////////////////*/
/* 數量 */
td.cart_quantity.specification .content_in{
	display: inline-block;
    vertical-align: middle;
    width: 105px;
    /* height: 42px; */
    border: 1px solid #000;
    /* padding: 5px 5px; */
    box-sizing: border-box;
    position: relative;
    background-color: #ffffff;
    display: table;
    border-spacing: 0;
}

	.specification .quantity_decrease{
		display: table-cell;
		vertical-align: middle;
		padding: 5px 5px;
		box-sizing: border-box;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
		color: #AEAEAE;
		/* height: 42px; */
	}

	.specification .quantity_content {
		display: table-cell;
		vertical-align: middle;
		box-sizing: border-box;
		/* border: 1px solid #cccccc; */
		width: 100%;
		/* height: 36px; */
	}
		.specification .quantity_content input{
			/* padding: 0 20px; */
			box-sizing: border-box;
			/* height: 34px; */

			font-size: 14px;
			text-align: center;
			color: #000000;
			background-color: #ffffff;
			border: 0;
			border-radius: 0;
			cursor: pointer;
		}

	.specification .quantity_increase{
		display: table-cell;
		vertical-align: middle;
		padding: 5px 5px;
		box-sizing: border-box;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
		color: #AEAEAE;
		/* height: 42px; */
	}
	.right .table_mainBg.join_orderingPage .specification .quantity_content input{
		margin-top: 0;
	}
	@media(max-width:768px){
		td.cart_quantity.specification .content_in {
			display: inline-block;
			
		}	
	}









/*已取消*/
.cancel {
	color:#929292;
	display: inline-block;
}

/*出貨中*/
.inShipment {
	color:#007be4;
	display: inline-block;
}

/*待出貨*/
.pendingShipment {
	color:#c6000b;
	display: inline-block;
}

/*已出貨*/
.shipped {
	color:#1eb1ad;
	display: inline-block;
}
/*補件*/
.add_documents {
	color:#c6000b;
	display: inline-block;
}




/*/////////////////////////////////////////////////////////*/
/*帳戶管理>訂單管理*/
/*/////////////////////////////////////////////////////////*/

/*20231106 Judy 修改*/
.account_table_titleArea{ 
}

.account_table_titleArea td{
	/* width: calc(100% / 8); */
	/* width: auto; */
}

.right .table_mainBg.order_list > .account_table_titleArea td:nth-of-type(6) {
    text-align: left;
}

@media (max-width: 640px){
	.right .table_mainBg > .account_table_titleArea td:last-of-type {
		padding: 10px 0px 20px;
	}
}



	










	
/*///////////////////////////*/
/*------- 燈箱 --------*/
/*///////////////////////////*/
	
	
/*燈箱*/
.lightboxArea {
	position:fixed;
	width:100%;
	z-index:99999;
	top:0px;
	left:0px;
	box-sizing:border-box;
	padding:124px 0px;
	display:none;
}
/*燈箱2*/
.lightboxArea2 {
	position:fixed;
	width:100%;
	z-index:99999;
	top:0px;
	left:0px;
	box-sizing:border-box;
	padding:124px 0px;
	display:none;
}
	/*燈箱黑底*/
	.lightboxBG {
		background:rgba(0,0,0,0.8);
		width:100%;
		height:100%;
		height: 100vh;
		position: absolute;
		top:0px;
	}
	
	/*燈箱主體*/
	.lightboxMain {
		height:360px;
		width:80%;
		margin:0 auto;
		background:#000;
		border-radius:5px;
		position: relative;
		transition:0.3s ease all;
		transform:scale(0);
		top:0px;
		box-sizing:border-box;
		font-size:0px;
	}
		/*關閉燈箱按鍵*/
		.lightboxCloseBtn {
			position: absolute;
			font-size: 15px;
			font-weight: bold;
			letter-spacing: 0px;
			text-align: center;
			width: 34px;
			height: 34px;
			line-height: 34px;
			color: #333;
			background: #515151;
			right: 20px;
			top: 20px;
			border: solid #515151 1px;
			box-shadow: 0px 0px 6px rgb(0 0 0 / 10%);
			cursor: pointer;
			transition: 0.3s ease all;
			display: flex;
			transition: 0.3s ease all;
		}
		.lightboxCloseBtn svg{
			fill: #fff;
			width: 25px;
			height: 25px;
			margin: auto;
			transition: 0.3s ease all;
		}
			.lightboxCloseBtn:hover {
				background: #e71f19;
				border-color: #e71f19;
				transition: 0.3s ease all;
			}
			.lightboxCloseBtn:hover svg{
				fill: #fff;
				transform: rotate(15deg);
				transition: 0.3s ease all;
			}
		/* .lightboxCloseBtn {
			font-weight: bold;
			width: 34px;
			height: 34px;
			line-height: 34px;
			font-size: 21px;
			font-weight: normal;
			color: #fff;
			text-align: center;
			background: #515151;
			cursor: pointer;
			position: absolute;
			top: -24px;
			right: -24px;
			transition: 0.3s ease all;
			z-index: 2;
		}
			.lightboxCloseBtn:hover {
				background:#8dc21f;
				color:#fff;
			} */
			
		/*燈箱資料區*/
		.lightboxContentArea {
			/* height: 100%; */
			height: 80vh;
		}

/*燈箱3*/
.lightboxArea3 {
	position:fixed;
	width:100%;
	z-index:99999;
	top:0px;
	left:0px;
	box-sizing:border-box;
	padding:124px 0px;
	display:none;
}
	/*燈箱黑底3*/
	.lightboxBG3 {
		background:rgba(0,0,0,0.8);
		width:100%;
		height:100%;
		position: absolute;
		top:0px;
	}
	
	/*燈箱主體3*/
	.lightboxMain3 {
		/* height:360px;
		width:80%; */
		width:80vh;
		margin:0 auto;
		background:#fff;
		border-radius:5px;
		position: relative;
		transition:0.3s ease all;
		transform:scale(0);
		top:0px;
		box-sizing:border-box;
		font-size:0px;
	}
		/*關閉燈箱按鍵3*/
		.lightboxCloseBtn3 {
			font-size:17px;
			font-weight:bold;
			width:48px;
			height:48px;
			line-height:48px;
			border-radius:100%;
			color:#fff;
			text-align:center;
			background: #515151;
			cursor: pointer;
			position:absolute;
			top:-24px;
			right:-24px;
			transition:0.3s ease all;
			z-index: 2;
		}
			.lightboxCloseBtn3:hover {
				background:#000000;
				color:#fff;
			}
			
		/*燈箱資料區3*/
		.lightboxContentArea3 {
			/* height: 100%; */
			height: 80vh;
		}
.index_video_list {
	position:relative;
	float:left;
	cursor:pointer;
	background:#000;
	margin:28px 0px 0px 0px;
}
	.index_video_list > img {
		opacity:0.6;
		transition:0.3s ease all;
		width:100%;
		height:auto;
	}
	.vL_text_area {
		position:absolute;
		width:100%;
		max-width:80px;
		text-align:center;
		left: 50%;
		top: 50%;
		-webkit-transform:translateX(-50%) translateY(-50%);
		transform:translateX(-50%) translateY(-50%);
		box-sizing: border-box;
		/*padding:70px 20px 20px 20px;*/
		/*font-size: clamp( .875rem, 2.1333vw, 1rem ); /* 14 16 */
		line-height:22px;*/
		color:#fff;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.75);
	}
		.vL_text_area img {
			width:100%;
			height:auto;
			/*padding:0px 0px 8px 0px;*/
		}
		/*hover*/
		.index_video_list:hover > img {
			opacity:1;
		}

.video_list_area {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
	font-size:0px;
	margin:0 -12px -30px;
	/*margin: 20px -15px 0px -14px;*/
}
/*firefox hack*/
@-moz-document url-prefix() { 
  .video_list_area {
	  padding:8px 0px 0px 0px;
  }
}

	.video_list {
		box-sizing:border-box;
		/*display:inline-block;
		vertical-align:top;*/
		padding: 0px 12px 30px;
		/*width:485px;*/
		width:33.3%;
	}

	.video_list2{
		width:100%;
		padding: 0px 0px 30px;
	}


	/*firefox hack*/
	@-moz-document url-prefix() { 
	  .video_list {
		  padding:65px 11px 0px 11px;
	  }
	}
		.video_list .index_video_list {
			float:none;
			margin:0px;
		}
			.video_list_remark {
				font-size: 18px;
				line-height: 24px;
				color: #3d3d3d;
				padding: 10px 0px 0px 0px;
				font-weight: bold;
			}
			
	/*影音燈箱顯示時才會加*/
	.video_use {
		padding: 100px 0px;
	}
		.video_use .lightboxMain {
			height:450px;
		}
	
	/*影音燈箱*/
	.video {
		height:100%;
	}
		.video iframe {
			height:1px;
			height:100%;
			width:100%;
		}

@media (max-width: 950px){	

	/*燈箱資料區*/
	.lightboxContentArea {
		height: 100%;
	}

	/*---Video---*/
	.video_list_area {
		margin: 0px 0px 0px 0px;
	}
		.video_list {
			/*width: 46%;*/
		}
		/*.video_list:nth-child(2n+1) {
			padding: 35px 25px 30px 0px;
		}
		.video_list:nth-child(2n+0) {
			padding: 35px 0px 30px 25px;
		}*/
}
@media (max-width:768px){
	
	
	.vL_text_area {
		max-width:50px;
	}	
		
	/*---Video---*/
	/*.video_list:nth-child(2n+1) {
		padding: 35px 20px 30px 0px;
	}
	.video_list:nth-child(2n+0) {
		padding: 35px 0px 30px 20px;
	}*/
}
@media (max-width: 600px){	

		
/*燈箱*/
.lightboxArea {
	padding:50px 0px;
}

/*關閉燈箱按鍵*/
.lightboxCloseBtn {
    right: 0px;
    top: 0px;
}

.video_list_area {
    display: block;
    flex-wrap: unset;
    flex-direction: unset;
}

	/*---Video---*/
	.video_list {
		width: 100%;
		padding:0 0 30px;
	}
	/*.video_list:nth-child(2n+1) {
		padding: 35px 0px 30px 0px;
	}
	.video_list:nth-child(2n+0) {
		padding: 35px 0px 30px 0px;
	}*/
	

	
	
}











/*///////////////////////////*/
/*------- 首頁網編燈箱 --------*/
/*///////////////////////////*/

.lightTextArea{	
	display: none ;
}
.lightTextArea.active{	
	display: block;
}
	.lightTextArea .lightboxMain {
		background: #fff;
		height: auto;
		/* transform: scale(0); */
	}
	.lightTextArea.active .lightboxMain {
		/* transform: scale(1); */
	}

		.lightTextArea .lightboxContentArea {
			/* height: 100%; */
			height: calc(80vh - 50px * 2);
			padding: 50px;
		}
			.lightTextArea .text_area{
				overflow-x: hidden;
				overflow-y: auto;
				max-height: 100%;
				/*max-height: calc(80vh - 50px * 2);*/
				padding-right:10px;	

				font-size: clamp( .875rem, 2.1333vw, 1rem ); /* 14 16 */
				line-height: 1.5;
				color: #000;
			}
					  
			.lightTextArea .text_area::-webkit-scrollbar {/*滾動條整體樣式*/
				width: 5px;     /*高寬分別對應橫豎滾動條的尺寸*/
				height: 1px;
			}
			.lightTextArea .text_area::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
				border-radius: 5px;
				 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				/*background: #535353;*/
				background-image: linear-gradient(to top, #afafaf 0%, #e5e5e5 100%);	
			}
			.lightTextArea .text_area::-webkit-scrollbar-track {/*滾動條裡面軌道*/
				-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				border-radius: 5px;
				background: #EDEDED;
			}


@media (max-width: 600px){	

	.lightTextArea .lightboxContentArea {
		height: calc(80vh - 20px * 2);
		padding: 20px;
	}
		.lightTextArea .text_area{
			/*max-height: calc(80vh - 20px * 2);*/
			padding-right:5px;	
		}

}



/*/////////////////////////////////////////////////////////*/
/*-------影音搜尋區塊--------*/
/*/////////////////////////////////////////////////////////*/
.order_search_Bg{
	
}
.order_search_area{
	display: flex;
	align-items: center;
	justify-content: center;
}
.order_search_icon svg{
	width: 20px;
    height: 20px;
    display: block;
    fill: var(--primary_color);
	margin:  0 auto;
}
.order_search_icon button{
	
    width: 50px;
    height: 50px;
    border-color: #fff0;
    text-align: center;
    cursor: pointer;
	background-color: transparent;
    
}
.form_list_search select{
	width: 100%;
}

@media (max-width: 540px) {
	.order_search_Bg {
		max-width: unset;
		width: 100%;
		margin: 20px auto 0px;
	}
	.order_search_area{
		/* display: block; */
		justify-content: flex-start;
	}
}






/*平板版*/
/*---------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/
@media (min-width: 541px) and  (max-width: 950px){
}


/*手機版*/
/*---------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/
@media (max-width: 540px){
}