@charset "utf-8";
/* 簡單流變媒體
   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {
	width:100%;
}
body, header, main, footer{ font-family: "微軟正黑體", "黑體-繁", "Helvetica", "Arial", "LiHei Pro",  sans-serif;}
a:active, a:visited, a:hover { outline: 0; text-decoration:none;}

form{ width:100%;}


/* 行動版面: 480px 以下。 */

.gridContainer {margin-left: auto;	margin-right: auto;	width: 90%; padding:0 5%;}
.gridContainer2 {margin-left: auto;	margin-right: auto;	width: 100%; padding:0;}
.LayoutDiv { clear: both; margin-left: 0; width: 100%; display: -webkit-flex; display: flex;}

.signin{ width:96%;	margin:20% 2% 0;}
	.signin_project{ width:100%; background-color:rgba(255, 255, 255, 0.4); padding:3% 8%; border-radius:10px;}
		.signin_title{color:#F0F0F0; font-size:1.8em; text-align:center; padding-bottom:20px; border-bottom:1px solid #DDD;}
		.signin_content{text-align:center; padding:20px 0 0;}
			#account_number-box{ width:96%; height:43px; margin:0 2%; font-size: 1em; background: #fff url('../images/signin/account_number.png') no-repeat 10px 4px; padding: 4px 4px 4px 55px; border:1px solid #f0f0f0;}
				#account_number-box:hover{ border:1px solid #e1c7bb;}
				#account_number-box:active{ border:1px solid #e1c7bb;}	
			#password-box{ width:96%; height:43px; margin:0 2%;	font-size: 1em;	background: #fff url('../images/signin/password.png') no-repeat 10px 4px; padding: 4px 4px 4px 55px;	border:1px solid #f0f0f0;}
				#password-box:hover{border:1px solid #e1c7bb;}
				#password-box:active{border:1px solid #e1c7bb;}
			#signin-button{	width:38%; height:40px; margin:20px 2% 0; border:1px #fd8181 none; border-radius:5px; background-color:#EBEEF0; color:#333;}
				#signin-button:hover{ background-color:#3694F8;
					transition:background-color 0.8s;
					-moz-transition:background-color 0.8s;
					-webkit-transition:background-color 0.8s;
					-o-transition:background-color 0.8s;
					color:#FFF;
				}
				
.top-box-bg{ width:100%; padding:20px 0 50px; color:#FFF; background-color:#333; border-bottom:6px #666 solid;}
	.top-box{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content:center; width:100%; text-align:center;}
		.top-box p{ width:96%; margin:0 2% 10px;}
			.top-box img{ width:100%; max-width:500px;}
		.top-box span{ width:100%; margin:0 0 10px; font-size:1.2em; letter-spacing:1px;}
			.top-box font{ margin-left:5px; font-size:1.3em;}
		.top-box h2{ width:100%; margin:0 0 10px; font-size:1.45em; letter-spacing:1px;}

.step-box{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content:space-between; width:100%; margin:0 0 50px;}
	.step-box div{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:center; width:25%; position:relative; margin:-30px 0 0;}
	.step-box span{ width:50px; height:50px; margin:0 calc(50% - 25px); box-sizing: border-box; padding:12px 0 0; text-align:center; border-radius:50%; text-align:center; color:#FFF; font-size:1.6em;}
		.step-inprogress{background-color:#048AC7;}
		.step-notprogress{background-color:#ADADAD;}
		.step-inprogress::before, .step-inprogress::after{ content:''; position:absolute; top:24px; width:calc(50% - 25px); height:6px; background-color:#048AC7;}
		.step-notprogress::before, .step-notprogress::after{ content:''; position:absolute; top:24px; width:calc(50% - 25px); height:6px; background-color:#ADADAD;}
		.step-inprogress::before, .step-notprogress::before{ left:0;}
		.step-inprogress::after, .step-notprogress::after{ right:0;}
	.step-box p{ width:100%; margin:5px 0 0; text-align:center; font-size:0.8em; letter-spacing:1px; color:#666;}
	
.form-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:90%; margin:0 5%;}
	.form-box p{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:center; width:100%; margin:0 0 20px;}
	.form-box label{ width:80px; margin:8px 5px 5px; font-size:1.05em;}
	.form-box input, .form-box textarea{ width:100%; margin:0; padding:12px; font-size:1.05em; letter-spacing:1px; color:#999; background-color:#e5ebf4; border:2px #D8D8D8 solid; border-radius:4px;}
	.form-box textarea{ height:80px;}
	
.template-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; width:100%; margin:0 0 30px;}
	.template-box-select{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:99%; margin:0 0.5% 20px; padding:8px; text-align:center; border:1px #DDD solid; border-radius:4px;}
		.template-box-select:hover{border:1px #048AC7 solid;}
		.template-box-select p{ width:100%; margin:8px 0; text-align:center; font-size:1.1em; color:#666;}
			.template-box-select p font{ font-weight:bold; color:#F00;}
		.template-box-select-img{ width:100%; margin:3px 0 0;}
			.template-box-select-img a{ margin:0 !important; padding:0 !important;}
			.template-box-select-img a:visited{ color:#048AC7}
				.template-box-select-imgmore, .template-box-select-link{ width:50%;}
				.template-box-select-imgmore a{ display:none;}
.template-box2{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; width:100%; margin:0 0 50px; padding:10px; border:1px #DDD solid; border-radius:4px;}
		.template-box2:hover{border:1px #048AC7 solid;}
	.template-box2 div{ width:100%; font-size:1.2em;}
	.template-box2 h4{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:20px 0; font-size:1.1em;}
	.template-box2 span{ width:100%; margin:0 0 5px; color:#666; letter-spacing:1px;}
	.template-box2 p{ width:100%; margin:0 0 20px;}
		.template-box2 h4 input, .template-box2 textarea{ width:100%; margin:0; padding:8px; border:1px #D8D8D8 solid; border-radius:4px;}
		 .template-box2 textarea{ height:110px;}

.selection-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 30px;}
	.selection-box-project{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 50px;}
	.selection-box-project h3{ width:96%; margin:15px 2%; position:relative; text-align:center; font-size:1.25em; font-weight:bold; letter-spacing:2px; color:#212121;}
	.selection-box-project h3::before, .selection-box-project h3::after{ content:''; position:absolute; width:18%; height:1px; top:10px; background-color:#AAA;}
	.selection-box-project h3::before{ left:2%;}
	.selection-box-project h3::after{ right:2%;}
	.selection-box-project-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; align-items:flex-start;}
		.selection-box-project-box div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:99%; margin:0 0.5% 10px;}
		.selection-box-project-box h5, .selection-box-project-box h6{ width:100%; margin:5px 0 10px; padding:15px 0; text-align:center; font-size:1.15em; color:#666;}
		.selection-box-project-box h5{ background-color:#DDEBF7;}
		.selection-box-project-box h6{ background-color:#E2EFDA;}
		.selection-box-project-box p, .selection-box-project-box aa{ display: -webkit-flex; display: flex; flex-wrap:wrap;justify-content:space-between; width:100%; margin:0 5px; padding:0 0 10px 10px; font-size:1.05em; color:#666; border-bottom:1px #F0F0F0 solid;}
			.selection-box-project-box p label, .selection-box-project-box aa label{ width:calc(99% - 70px); margin:3px 1% 3px 0;}
			.selection-box-project-box p input, .selection-box-project-box aa input{ margin:0 6px 0 0;}
			.selection-box-project-box p span, .selection-box-project-box aa span{ width:100%; margin:0 0 0 20px; font-size:0.88em;  color:#980F27;}
			.selection-box-project-box p font, .selection-box-project-box aa font{ width:70px; margin:3px 0; padding:0; text-align:right; font-size:0.95em; color:#F00;}
		.selection-box-project-box h4{ width:100%; margin:10px 0 5px 23px; padding:0 0 10px; display:none; font-weight:normal; font-size:0.95em; font-weight:normal;}
			.selection-box-project-box h4 p{ border-bottom:none; font-size:1em;}
	.selection-box-project-addbox{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:10px 0 50px;}
		.selection-box-project-addbox-content{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:98%; margin: 0 1% 30px; border-bottom:1px #DDD solid; font-size:1.05em; color:#666;}
			.selection-box-project-addbox-content span{ width:100%; margin:8px 0 10px 0; padding:0; text-align:left;}
			.selection-box-project-addbox-content p{ width:100%; margin:0 0 20px 0; padding:0;}
				.selection-box-project-addbox-content p textarea{ width:100%; height:80px; margin:0; padding:10px; letter-spacing:1px; border:1px #D8D8D8 solid; border-radius:4px;}
				.selection-box-project-addbox-content p input{ width:100%; margin:0; padding:8px; border:1px #D8D8D8 solid; border-radius:4px;}
				.selection-box-project-addbox-delete{ width:80px; margin:15px 2% 15px calc(98% - 80px); padding:8px 0; text-align:center; font-size:0.8em; letter-spacing:5px; color:#FFF; background-color:#048AC7; border-radius:5px; transition:0.3s ease-in-out;cursor: pointer; }
				#addVar{ width:120px; margin:25px calc(50% - 60px); padding:12px 0; text-align:center; font-size:1em; letter-spacing:2px; color:#FFF; background-color:#900; border-radius:5px; transition:0.3s ease-in-out;cursor: pointer;}
					.selection-box-project-addbox-delete:hover{ background-color:#048AC7;}
					#addVar:hover{ background-color:#900;}	
					
.order-confirmation{ display: -webkit-flex; display: flex; flex-wrap:wrap; align-items: flex-start; justify-content:space-between; width:100%; margin:0 0 50px;}
	.order-confirmation h2{ width:100%; margin:10px 0 30px; text-align:center; font-size:1.5em; color:#212121;}
	.order-confirmation-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
			.order-confirmation a{ width:120px; margin:15px 2% 5px calc(98% - 110px); padding:10px 0; text-align:center; font-size:0.9em; letter-spacing:5px; color:#FFF; background-color:#048AC7; border-radius:5px; transition:0.3s ease-in-out;}
			.order-confirmation a:visited{ color:#FFF; background-color:#048AC7; text-decoration:none;}
			.order-confirmation a:hover{ background-color:#212121; text-decoration:none;}
			.order-confirmation font{ margin-left:5px; font-weight:bolder; color:#F00;}
		.order-confirmation-information div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 10px; padding:6px; font-size:1.05em; color:#212121; border-bottom:1px #DDD solid;}
			.order-confirmation-information div span{ width:100%; margin:0 0 3px; padding:0;}
			.order-confirmation-information div p{ width:100%; margin:0; padding:0;}
	.order-confirmation-template{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
		.order-confirmation-template div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 10px; padding:6px; font-size:1.05em; color:#212121;}
			.order-confirmation-template div span{ width:100%; margin:0 0 3px; padding:0;}
			.order-confirmation-template div p{ width:100%; margin:0; text-align:center; padding:0;}
			.order-confirmation-template div img{ width:100%; max-width:100px; margin:10px 0; border:1px #EEE solid; }
	.order-confirmation-selection{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
		.order-confirmation-selection div:not(:first-child){ border-bottom:1px #DDD solid;}
		.order-confirmation-selection-div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 10px; padding:6px; font-size:1.05em; color:#212121; border-bottom:1px #DDD solid; position:relative;}
			.order-confirmation-selection-div p{ width:100%; margin:0 0 3px; padding:0;}
			.order-confirmation-selection-div span{ width:100%; margin:0; padding:0; text-align:left;}
			.order-confirmation-selection-div input{ width:120px; height: 30px; margin:0; padding:5px; box-sizing: border-box; border: 1px #AAA solid;}
		.order-confirmation-selection-basicskills{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; width:100%; margin:-2px 0 10px; padding:0 8px 20px;}
			.order-confirmation-selection-basicskills h4{ width:48%; margin-bottom:0; padding:10px 4px; text-align:center;vertical-align:middle; font-size:0.75em; line-height:1.25em; color:#666; border:1px #DDD solid; border-radius:3px;}
			.order-confirmation-selection-basicskills-title{ width: 100%; margin: 0 0 8px; font-size: 1.25em; font-weight: bolder; letter-spacing: 1px; color: #212121;}
			.order-confirmation-selection-basicskills-project{ display: -webkit-flex; display: flex; flex-wrap:wrap; width: 96%; margin: 0 2% 15px;}
				.order-confirmation-selection-basicskills-project TT{ display: -webkit-flex; display: flex; flex-wrap:wrap; align-items: center; width: auto; margin: 0 0 5px; font-size: 1.05em; color: #666;}
					.order-confirmation-selection-basicskills-project TT:not(:last-child)::after{ content: "、"; font-size: 1.25em;}
					.order-confirmation-selection-basicskills-project XX{ font-size: 0.8em; color: #900;}
						.order-confirmation-selection-basicskills-project XX::before{ content: "【";}
						.order-confirmation-selection-basicskills-project XX::after{ content: "】";}
	.order-confirmation-price{ width:245px; margin:20px 0 20px calc(100% - 245px); padding:0 10px 10px 0; text-align:right; font-size:1.15em; font-weight:bold; letter-spacing:1px; color:#212121; border-bottom:1px #999 solid;}
	
.print-order{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:calc(100% - 40px); min-width:1000px; margin:20px; padding:50px; color:#212121; overflow: auto;}
	.print-order h2{ width:100%; margin: 0 0 50px; text-align:center; font-size:2.2em;}
	.print-order-content{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; padding:50px; border:1px #212121 solid;page-break-inside: avoid;}
		.print-order-content h3{ width:100%; margin:0 0 20px; font-size:1.8em;}
		.company-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:space-between; align-content:space-between; width:100%; margin:0 0 50px;}
		.print-order-content h4{ width:100%; margin:0 0 20px; font-size:1.8em;}
			.print-order-content h4 img{ width:100%; max-width:280px; margin:0; padding:0;}
		.print-order-content-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:49%;}
			.print-order-content-information div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:5px 0; font-size:1.15em;}
			.print-order-content-information span{ margin:0; padding:0; width:100px;}
			.print-order-content-information p{ margin:0; padding:0; width:calc(100% - 100px);}
		.print-order-content-quotation{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 30px; border:1px #212121 solid;}
			.print-order-content-quotation div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; padding:10px 15px; font-size:1.15em;}
			.print-order-content-quotation div:not(:last-child){ border-bottom:1px #212121 solid;}
			.print-order-content-quotation p{ margin:0; padding:0; width:calc(100% - 140px);}
			.print-order-content-quotation span{ margin:0; padding:0; width:140px;}
			.print-order-content-quotation-title{ width: 100%;}
			.print-order-content-quotation-remark{  width: 96%; margin: 8px 2%; font-size: 0.9em;}
		.print-order-content-price{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-end; width:360px; margin:20px 0 20px calc(100% - 360px);}
			.print-order-content-price p, .print-order-content-price span{ font-size:1.3em;}
		.print-order-content-signature-display-style{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content: center; align-items: center; width:100%;}
		.print-order-content-signature{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:49%; margin:30px 0 20px; padding: 0 5%; box-sizing:border-box; font-size:1.2em;}	
			.print-order-content-signature p{ width:120px; margin:0; text-align:right;}	
			.print-order-content-signature span{ width:180px; border-bottom:1px #212121 solid;}
			
			
				
.button-style{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content:center; width:100%; margin:20px 0 50px;}
	.button-style p, .button-style button{ width:100px; margin:0 10px; padding:12px 0; text-align:center; font-size:1.05em; font-weight:bolder; letter-spacing:2px; color:#333; border-radius:8px; transition:0.2s ease-in-out;}
	.button-previous{ background-color:#FFF; border:2px #DDD solid;}
	.button-next{ background-color:#FFBA00; border:2px #d4a119 solid;}
	.button-style p:hover, .button-style button:hover{ background-color:#666; color:#FFF; border:2px #FFF solid;}
	.button-style a, .button-style a:visited, .button-style a:hover{ text-decoration:none; color:#333;}
	

footer{ width:100%; padding:10px 0; text-align:center; font-size:0.55em; color:#FFF; background-color:#333;}

/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */

@media only screen and (min-width: 481px) {
.gridContainer{width: 96%; padding:0 2%;}
.gridContainer2{width: 100%; padding:0;}
.LayoutDiv { clear: both; margin-left: 0; width: 100%; display: -webkit-flex; display: flex;}

.signin{ width:96%;	margin:15% 2% 0;}
	.signin_project{ width:100%; background-color:rgba(255, 255, 255, 0.4);	padding:3% 8%; border-radius:10px;}
		.signin_title{ color:#F0F0F0; font-size:1.8em; text-align:center; padding-bottom:20px; border-bottom:1px solid #DDD;}
		.signin_content{ text-align:center; padding:20px 0 0;}
			#account_number-box{ width:60%; height:43px; margin:0 20%; font-size: 1em; background: #fff url('../images/signin/account_number.png') no-repeat 10px 4px; padding: 4px 4px 4px 55px; border:1px solid #f0f0f0;}
				#account_number-box:hover{ border:1px solid #e1c7bb;}
				#account_number-box:active{	border:1px solid #e1c7bb;}	
			#password-box{ width:60%; height:43px; margin:0 20%; font-size: 1em; background: #fff url('../images/signin/password.png') no-repeat 10px 4px; padding: 4px 4px 4px 55px; border:1px solid #f0f0f0;}
				#password-box:hover{ border:1px solid #e1c7bb;}
				#password-box:active{ border:1px solid #e1c7bb;}
			#signin-button{	width:38%; height:40px;	margin:20px 2% 0; border:1px #fd8181 none; border-radius:5px; background-color:#EBEEF0; color:#333;}
				#signin-button:hover{background-color:#3694F8;				
					transition:background-color 0.8s;
					-moz-transition:background-color 0.8s;
					-webkit-transition:background-color 0.8s;
					-o-transition:background-color 0.8s;
					color:#FFF;
				}

.top-box-bg{ width:100%; padding:20px 0 50px; color:#FFF; background-color:#333; border-bottom:6px #666 solid;}
	.top-box{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content:center; width:100%; text-align:center;}
		.top-box p{ width:80%; margin:0 10% 10px;}
			.top-box img{ width:100%; max-width:500px;}
		.top-box span{ width:100%; margin:0 0 15px; font-size:1.2em; letter-spacing:1px;}
			.top-box font{ margin-left:5px; font-size:1.5em;}
		.top-box h2{ width:100%; margin:0 0 20px; font-size:1.8em; letter-spacing:2px;}

.step-box{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content:space-between; width:100%; margin:0 0 50px;}
	.step-box div{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:center; width:25%; position:relative; margin:-35px 0 0;}
	.step-box span{ width:60px; height:60px; margin:0 calc(50% - 30px); box-sizing: border-box; padding:12px 0 0; text-align:center; border-radius:50%; text-align:center; color:#FFF; font-size:2.2em;}
		.step-inprogress{background-color:#048AC7;}
		.step-notprogress{background-color:#ADADAD;}
		.step-inprogress::before, .step-inprogress::after{ content:''; position:absolute; top:29px; width:calc(50% - 30px); height:6px; background-color:#048AC7;}
		.step-notprogress::before, .step-notprogress::after{ content:''; position:absolute; top:29px; width:calc(50% - 30px); height:6px; background-color:#ADADAD;}
		.step-inprogress::before, .step-notprogress::before{ left:0;}
		.step-inprogress::after, .step-notprogress::after{ right:0;}
	.step-box p{ width:100%; margin:5px 0 0; text-align:center; font-size:1.05em; letter-spacing:1px; color:#666;}
.form-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:90%; margin:0 5%;}
	.form-box p{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:0 0 30px;}
	.form-box label{ width:100px; margin:15px 5px 0; font-size:1.2em;}
	.form-box input, .form-box textarea{ width:100%; margin:0; padding:15px; font-size:1.05em; letter-spacing:1px; color:#999; background-color:#e5ebf4; border:2px #D8D8D8 solid; border-radius:4px;}
	.form-box textarea{ height:80px;}
	
.template-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; width:100%; margin:0 0 50px;}
	.template-box-select{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:32.3%; margin:0 0.5% 20px; padding:8px; text-align:center; border:1px #DDD solid; border-radius:4px;}
		.template-box-select:hover{border:1px #048AC7 solid;}
		.template-box-select p{ width:100%; margin:8px 0; text-align:center; font-size:1em; color:#666;}
			.template-box-select p font{ font-weight:bold; color:#F00;}
		.template-box-select-img{ width:100%; margin:3px 0 0;}
			.template-box-select-img a{ margin:0 !important; padding:0 !important;}
			.template-box-select-img a:visited{ color:#048AC7}
				.template-box-select-imgmore, .template-box-select-link{ width:50%;}
				.template-box-select-imgmore a{ display:none;}	
.template-box2{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; width:90%; margin:0 5% 50px;}
	.template-box2 div{ width:100%; font-size:1.2em;}
	.template-box2 h4{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:20px 0; font-size:1.1em;}
	.template-box2 span{ width:90px; margin:8px 10px 20px 0; color:#666; letter-spacing:1px;}
	.template-box2 p{ width:calc(100% - 100px); margin:0 0 20px;}
		.template-box2 h4 input, .template-box2 textarea{ width:100%; margin:0; padding:8px; border:1px #D8D8D8 solid; border-radius:4px;}
		 .template-box2 textarea{ height:110px;}

.selection-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 50px;}
	.selection-box-project{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 50px;}
	.selection-box-project h3{ width:96%; margin:15px 2%; position:relative; text-align:center; font-size:1.35em; font-weight:bold; letter-spacing:2px; color:#212121;}
	.selection-box-project h3::before, .selection-box-project h3::after{ content:''; position:absolute; width:28%; height:1px; top:10px; background-color:#AAA;}
	.selection-box-project h3::before{ left:2%;}
	.selection-box-project h3::after{ right:2%;}
	.selection-box-project-box{ display: -webkit-flex; display: flex; flex-wrap:nowrap; align-items:flex-start;}
		.selection-box-project-box div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:48%; margin:0 1%;}
		.selection-box-project-box h5, .selection-box-project-box h6{ width:100%; margin:5px 0 10px; padding:15px 0; text-align:center; font-size:1.15em; color:#666;}
		.selection-box-project-box h5{ background-color:#DDEBF7;}
		.selection-box-project-box h6{ background-color:#E2EFDA;}
		.selection-box-project-box p, .selection-box-project-box aa{ display: -webkit-flex; display: flex; flex-wrap:wrap;justify-content:space-between; width:100%; margin:0 5px; padding:0 0 10px 10px; font-size:1.05em; color:#666; border-bottom:1px #F0F0F0 solid;}
			.selection-box-project-box p label, .selection-box-project-box aa label{ width:calc(98% - 70px); margin:3px 2% 0 0;}
			.selection-box-project-box p input, .selection-box-project-box aa input{ margin:0 6px 0 0;}
			.selection-box-project-box p span, .selection-box-project-box aa span{ width:calc(98% - 70px); margin:0 0 0 20px; font-size:0.88em;  color:#980F27;}
			.selection-box-project-box p font, .selection-box-project-box aa font{ width:70px; margin:3px 0 0; padding:0; text-align:right; font-size:0.95em; color:#F00;}
		.selection-box-project-box h4{ width:100%; margin:10px 0 5px 23px; padding:0 0 10px; display:none; font-weight:normal; font-size:0.95em; font-weight:normal;}
			.selection-box-project-box h4 p{ border-bottom:none; font-size:1em;}
	.selection-box-project-addbox{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:10px 0 50px;}
		.selection-box-project-addbox-content{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:90%; margin: 0 5% 30px; border-bottom:1px #DDD solid; font-size:1.05em; color:#666;}
			.selection-box-project-addbox-content span{ width:100px; margin:8px 20px 20px 0; padding:0; text-align:right;}
			.selection-box-project-addbox-content p{ width:calc(100% - 120px); margin:0 0 20px 0; padding:0;}
				.selection-box-project-addbox-content p textarea{ width:100%; height:60px; margin:0; padding:12px; letter-spacing:1px; border:1px #D8D8D8 solid; border-radius:4px;}
				.selection-box-project-addbox-content p input{ width:100%; margin:0; padding:8px; border:1px #D8D8D8 solid; border-radius:4px;}
				.selection-box-project-addbox-delete{ width:100px; margin:15px 2% 15px calc(98% - 100px); padding:10px 0; text-align:center; font-size:0.9em; letter-spacing:5px; color:#FFF; background-color:#048AC7; border-radius:5px; transition:0.3s ease-in-out;cursor: pointer; }
				#addVar{ width:120px; margin:25px calc(50% - 60px); padding:12px 0; text-align:center; font-size:1em; letter-spacing:2px; color:#FFF; background-color:#900; border-radius:5px; transition:0.3s ease-in-out;cursor: pointer;}
					.selection-box-project-addbox-delete:hover, #addVar:hover{ background-color:#212121;}
					
.order-confirmation{ display: -webkit-flex; display: flex; flex-wrap:wrap; align-items: flex-start; justify-content:space-between; width:100%; margin:0 0 50px;}
	.order-confirmation h2{ width:100%; margin:10px 0 30px; text-align:center; font-size:1.8em; color:#212121;}
	.order-confirmation-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
			.order-confirmation a{ width:120px; margin:15px 2% 5px calc(98% - 110px); padding:10px 0; text-align:center; font-size:0.9em; letter-spacing:5px; color:#FFF; background-color:#048AC7; border-radius:5px; transition:0.3s ease-in-out;}
			.order-confirmation a:visited{ color:#FFF; background-color:#048AC7; text-decoration:none;}
			.order-confirmation a:hover{ background-color:#212121; text-decoration:none;}
			.order-confirmation font{ margin-left:5px; font-weight:bolder; color:#F00;}
		.order-confirmation-information div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:0 0 10px; padding:8px 8px 15px; font-size:1.05em; color:#212121; border-bottom:1px #DDD solid;}
			.order-confirmation-information div span{ width:100px; margin:0 10px 0 0; padding:0;}
			.order-confirmation-information div p{ width:calc(100% - 130px); margin:0 10px 0 0; padding:0;}
	.order-confirmation-template{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
		.order-confirmation-template div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 10px; padding:8px 8px 15px; font-size:1.05em; color:#212121;}
			.order-confirmation-template div span{ width:100px; margin:60px 10px 0 0; padding:0;}
			.order-confirmation-template div p{ width:calc(100% - 130px); margin:0 10px 0 0; padding:0;}
			.order-confirmation-template div img{ width:100%; max-width:100px; margin:10px 0; border:1px #EEE solid; }
	.order-confirmation-selection{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
		.order-confirmation-selection div:not(:first-child){ border-bottom:1px #DDD solid;}
		.order-confirmation-selection-div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:0 0 10px; padding:8px 8px 15px; font-size:1.05em; color:#212121; border-bottom:1px #DDD solid;}
			.order-confirmation-selection-div p{ width:calc(100% - 140px); margin:0 0 0 10px; padding:0;}
			.order-confirmation-selection-div span{ width:120px; margin:0; padding:0; text-align:right;}
		.order-confirmation-selection-basicskills{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; align-content:center; width:100%; margin:-2px 0 10px; padding:0 8px 20px;}
			.order-confirmation-selection-basicskills h4{ width:32%; margin-bottom:0; padding:12px 8px; text-align:center;vertical-align:middle; font-size:0.9em; line-height:1.15em; color:#666; border:1px #DDD solid; border-radius:3px;}
			.order-confirmation-selection-basicskills-title{ width: 100%; margin: 0 0 8px; font-size: 1.25em;}
			.order-confirmation-selection-basicskills-project{ width: 96%; margin: 0 2% 15px;}
				.order-confirmation-selection-basicskills-project TT{ width: auto; margin: 0 0 3px; font-size: 1em;}
					.order-confirmation-selection-basicskills-project XX{ font-size: 0.8em;}
	.order-confirmation-price{ width:300px; margin:20px 0 20px calc(100% - 300px); padding:0 10px 10px 0; text-align:right; font-size:1.25em; font-weight:bold; letter-spacing:1px; color:#212121; border-bottom:1px #999 solid;}
	
.print-order{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:calc(100% - 40px); min-width:1000px; margin:20px; padding:50px; color:#212121; overflow: auto;}
	.print-order h2{ width:100%; margin: 0 0 50px; text-align:center; font-size:2.2em;}
	.print-order-content{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; padding:50px; border:1px #212121 solid;page-break-inside: avoid;}
		.print-order-content h3{ width:100%; margin:0 0 20px; font-size:1.8em;}
		.company-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:space-between; align-content:space-between; width:100%; margin:0 0 50px;}
		.print-order-content h4{ width:100%; margin:0 0 20px; font-size:1.8em;}
			.print-order-content h4 img{ width:100%; max-width:280px; margin:0; padding:0;}
		.print-order-content-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:49%;}
			.print-order-content-information div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:5px 0; font-size:1.15em;}
			.print-order-content-information span{ margin:0; padding:0; width:100px;}
			.print-order-content-information p{ margin:0; padding:0; width:calc(100% - 100px);}
		.print-order-content-quotation{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 30px; border:1px #212121 solid;}
			.print-order-content-quotation div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; padding:10px 15px; font-size:1.15em;}
			.print-order-content-quotation div:not(:last-child){ border-bottom:1px #212121 solid;}
			.print-order-content-quotation p{ margin:0; padding:0; width:calc(100% - 140px);}
			.print-order-content-quotation span{ margin:0; padding:0; width:140px;}
			.print-order-content-quotation-title{ width: 100%;}
			.print-order-content-quotation-remark{  width: 96%; margin: 12px 2%; font-size: 0.9em;}
		.print-order-content-price{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-end; width:360px; margin:20px 0 20px calc(100% - 360px);}
			.print-order-content-price p, .print-order-content-price span{ font-size:1.3em;}
		.print-order-content-signature{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:50%; margin:30px 0 20px; padding: 0 5%; font-size:1.2em;}	
			.print-order-content-signature p{ width:120px; margin:0; text-align:right;}	
			.print-order-content-signature span{ width:180px; border-bottom:1px #212121 solid;}
			
			
				
.button-style{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content:center; width:100%; margin:20px 0 50px;}
	.button-style p, .button-style button{ width:130px; margin:0 20px; padding:13px 0; text-align:center; font-size:1.15em; font-weight:bolder; letter-spacing:2px; color:#333; border-radius:8px; transition:0.2s ease-in-out;}
	.button-previous{ background-color:#FFF; border:2px #DDD solid;}
	.button-next{ background-color:#FFBA00; border:2px #d4a119 solid;}
	.button-style p:hover, .button-style button:hover{ background-color:#666; color:#FFF; border:2px #FFF solid;}
	.button-style a, .button-style a:visited, .button-style a:hover{ text-decoration:none; color:#333;}
	

footer{ width:100%; padding:10px 0; text-align:center; font-size:0.55em; color:#FFF; background-color:#333;}
}

/* 桌面版面: 769px 到最大 1024px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 769px) {
.gridContainer, .gridContainer2{width: 100%; max-width: 1232px;	padding-left: 0.9%;	padding-right: 0.9%; margin: auto;}
.LayoutDiv { clear: both; margin-left: 0; width: 100%; display: -webkit-flex; display: flex;}

.signin{ width:96%; margin:8% 2% 0;}
	.signin_project{ width:100%; background-color:rgba(255, 255, 255, 0.4);	padding:3% 8%; border-radius:10px;}
		.signin_title{color:#F0F0F0; font-size:1.8em; text-align:center; padding-bottom:20px; border-bottom:1px solid #DDD;}
		.signin_content{ text-align:center; padding:20px 0 0;}
			#account_number-box{width:60%; height:43px; margin:0 20%; font-size: 1em; background: #fff url('../images/signin/account_number.png') no-repeat 10px 4px; padding: 4px 4px 4px 55px; border:1px solid #f0f0f0;}
				#account_number-box:hover{border:1px solid #e1c7bb;}
				#account_number-box:active{border:1px solid #e1c7bb; }	
			#password-box{ width:60%; height:43px; margin:0 20%; font-size: 1em; background: #fff url('../images/signin/password.png') no-repeat 10px 4px; padding: 4px 4px 4px 55px;	border:1px solid #f0f0f0;}
				#password-box:hover{border:1px solid #e1c7bb;}
				#password-box:active{border:1px solid #e1c7bb;}
			#signin-button{ width:38%; height:40px;	margin:20px 2% 0; border:1px #fd8181 none; border-radius:5px; background-color:#EBEEF0; color:#333;}
				#signin-button:hover{background-color:#3694F8;
					transition:background-color 0.8s;
					-moz-transition:background-color 0.8s;
					-webkit-transition:background-color 0.8s;
					-o-transition:background-color 0.8s;
					color:#FFF;
				}

.top-box-bg{ width:100%; padding:20px 0 50px; color:#FFF; background-color:#333; border-bottom:6px #666 solid;}
	.top-box{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content:center; width:100%; text-align:center;}
		.top-box p{ width:100%; margin:0 0 10px;}
			.top-box img{ width:100%; max-width:500px;}
		.top-box span{ width:100%; margin:0 0 15px; font-size:1.2em; letter-spacing:1px;}
			.top-box font{ margin-left:5px; font-size:1.5em;}
		.top-box h2{ width:100%; margin:0 0 20px; font-size:1.8em; letter-spacing:2px;}

.step-box{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content:space-between; width:750px; margin:0 calc(50% - 375px) 50px;}
	.step-box div{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:center; width:25%; position:relative; margin:-35px 0 0;}
	.step-box span{ width:60px; height:60px; margin:0 calc(50% - 30px); box-sizing: border-box; padding:10px 0 0; text-align:center; border-radius:50%; text-align:center; color:#FFF; font-size:2em;}
		.step-inprogress{background-color:#048AC7;}
		.step-notprogress{background-color:#ADADAD;}
		.step-inprogress::before, .step-inprogress::after{ content:''; position:absolute; top:29px; width:calc(50% - 30px); height:6px; background-color:#048AC7;}
		.step-notprogress::before, .step-notprogress::after{ content:''; position:absolute; top:29px; width:calc(50% - 30px); height:6px; background-color:#ADADAD;}
		.step-inprogress::before, .step-notprogress::before{ left:0;}
		.step-inprogress::after, .step-notprogress::after{ right:0;}
	.step-box p{ width:100%; margin:5px 0 0; text-align:center; font-size:1.05em; letter-spacing:1px; color:#666;}
	
.form-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:80%; margin:0 10%;}
	.form-box p{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:0 0 30px;}
	.form-box label{ width:80px; margin:15px 10px 0; font-size:1.2em;}
	.form-box input, .form-box textarea{ width:100%; margin:0; padding:15px; font-size:1.05em; letter-spacing:1px; color:#999; background-color:#e5ebf4; border:2px #D8D8D8 solid; border-radius:4px;}
	.form-box textarea{ height:80px;}
	
.template-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; width:100%; margin:0 0 50px;}
	.template-box-select{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:19%; margin:0 0.5% 20px; padding:8px; text-align:center; border:1px #DDD solid; border-radius:4px;}
		.template-box-select:hover{border:1px #048AC7 solid;}
		.template-box-select p{ width:100%; margin:8px 0; text-align:center; font-size:1.1em; color:#666;}
			.template-box-select p font{ font-weight:bold; color:#F00;}
		.template-box-select-img{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:3px 0 0;}
			.template-box-select-img a{ margin:0 !important; padding:0 !important;}
			.template-box-select-img a:visited{ color:#048AC7}
				.template-box-select-imgmore, .template-box-select-link{ width:50%;}
				.template-box-select-imgmore a{ display:none;}
.template-box2{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; width:60%; margin:0 20% 50px;}
	.template-box2 div{ width:100%; font-size:1.2em;}
	.template-box2 label{ width:100%;}
	.template-box2 input{ width: 25px;}
	.template-box2 h4{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:20px 0; font-size:1.1em;}
	.template-box2 span{ width:90px; margin:8px 10px 20px 0; color:#666; letter-spacing:1px;}
	.template-box2 p{ width:calc(100% - 100px); margin:0 0 20px;}
		.template-box2 h4 input, .template-box2 textarea{ width:100%; margin:0; padding:8px; border:1px #D8D8D8 solid; border-radius:4px;}
		.template-box2 textarea{ height:110px;}

.selection-box{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 50px;}
	.selection-box-project{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 50px;}
	.selection-box-project h3{ width:96%; margin:15px 2%; position:relative; text-align:center; font-size:1.55em; font-weight:bold; letter-spacing:2px; color:#212121;}
	.selection-box-project h3::before, .selection-box-project h3::after{ content:''; position:absolute; width:33%; height:1px; top:12px; background-color:#AAA;}
	.selection-box-projectx h3::before{ left:2%;}
	.selection-box-project h3::after{ right:2%;}
	.selection-box-project-box{ display: -webkit-flex; display: flex; flex-wrap:nowrap; align-items:flex-start; width:100%;}
		.selection-box-project-box div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:48%; margin:0 1%;}
		.selection-box-project-box h5, .selection-box-project-box h6{ width:100%; margin:5px 0 10px; padding:15px 0; text-align:center; font-size:1.25em; color:#666;}
		.selection-box-project-box h5{ background-color:#DDEBF7;}
		.selection-box-project-box h6{ background-color:#E2EFDA;}
		.selection-box-project-box p, .selection-box-project-box aa{ display: -webkit-flex; display: flex; flex-wrap:wrap;justify-content:space-between; width:100%; margin:0 5px; padding:0 0 10px 10px; font-size:1.15em; color:#666; border-bottom:1px #F0F0F0 solid;}
			.selection-box-project-box p label, .selection-box-project-box aa label{ width:calc(98% - 70px); margin:3px 2% 0 0;}
			.selection-box-project-box p input, .selection-box-project-box aa input{ margin:0 6px 0 0;}
			.selection-box-project-box p span, .selection-box-project-box aa span{ width:calc(98% - 70px); margin:0 0 0 20px; font-size:0.85em; color:#980F27;}
			.selection-box-project-box p font, .selection-box-project-box aa font{ width:70px; margin:3px 0 0; padding:0; text-align:right; font-size:0.95em; color:#F00;}
		.selection-box-project-box h4{ width:100%; margin:10px 0 5px 5px; padding:0 0 10px; display:none; font-weight:normal; font-size:0.95em; font-weight:normal;}
			.selection-box-project-box h4 p{ border-bottom:none; font-size:1em;}
	.selection-box-project-addbox{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:10px 0 50px;}
		.selection-box-project-addbox-content{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:80%; margin: 0 10% 30px; border-bottom:1px #DDD solid; font-size:1.15em; color:#666;}
			.selection-box-project-addbox-content span{ width:100px; margin:8px 20px 20px 0; padding:0; text-align:right;}
			.selection-box-project-addbox-content p{ width:calc(100% - 120px); margin:0 0 20px 0; padding:0;}
				.selection-box-project-addbox-content p textarea{ width:100%; height:60px; margin:0; padding:12px; letter-spacing:1px; border:1px #D8D8D8 solid; border-radius:4px;}
				.selection-box-project-addbox-content p input{ width:100%; margin:0; padding:8px; border:1px #D8D8D8 solid; border-radius:4px;}
				.selection-box-project-addbox-delete{ width:100px; margin:15px 2% 15px calc(98% - 100px); padding:10px 0; text-align:center; font-size:0.9em; letter-spacing:5px; color:#FFF; background-color:#048AC7; border-radius:5px; transition:0.3s ease-in-out;cursor: pointer; }
				#addVar{ width:120px; margin:25px calc(50% - 60px); padding:12px 0; text-align:center; font-size:1em; letter-spacing:2px; color:#FFF; background-color:#900; border-radius:5px; transition:0.3s ease-in-out;cursor: pointer;}
					.selection-box-project-addbox-delete:hover, #addVar:hover{ background-color:#212121;}
					
.order-confirmation{ display: -webkit-flex; display: flex; flex-wrap:wrap; align-items: flex-start; justify-content:space-between; width:80%; margin:0 10% 50px;}
	.order-confirmation h2{ width:100%; margin:10px 0 30px; text-align:center; font-size:2.5em; color:#212121;}
	.order-confirmation-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
			.order-confirmation a{ width:120px; margin:15px 2% 5px calc(98% - 110px); padding:10px 0; text-align:center; font-size:0.9em; letter-spacing:5px; color:#FFF; background-color:#048AC7; border-radius:5px; transition:0.3s ease-in-out;}
			.order-confirmation a:visited{ color:#FFF; background-color:#048AC7; text-decoration:none;}
			.order-confirmation a:hover{ background-color:#212121; text-decoration:none;}
			.order-confirmation font{ margin-left:5px; font-weight:bolder; color:#F00;}
		.order-confirmation-information div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:0 0 10px; padding:8px 8px 15px; font-size:1.15em; color:#212121; border-bottom:1px #DDD solid;}
			.order-confirmation-information div span{ width:100px; margin:0 10px 0 0; padding:0;}
			.order-confirmation-information div p{ width:calc(100% - 130px); margin:0 10px 0 0; padding:0;}
	.order-confirmation-template{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:40%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
		.order-confirmation-template div{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 10px; padding:8px 8px 15px; font-size:1.15em; color:#212121;}
			.order-confirmation-template div span{ width:100px; margin:60px 10px 0 0; padding:0;}
			.order-confirmation-template div p{ width:calc(100% - 130px); margin:0 10px 0 0; padding:0;}
			.order-confirmation-template div img{ width:100%; max-width:100px; margin:10px 0; border:1px #EEE solid; }
	.order-confirmation-selection{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 20px; padding:30px; border:1px #DDD solid; border-radius:5px;}
		.order-confirmation-selection div:not(:first-child){ border-bottom:1px #DDD solid;}
		.order-confirmation-selection-div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:0 0 10px; padding:8px 8px 15px; font-size:1.15em; color:#212121;}
			.order-confirmation-selection-div p{ width:calc(100% - 140px); margin:0 0 0 10px; padding:0;}
			.order-confirmation-selection-div span{ width:120px; margin:0; padding:0; text-align:right;}
		.order-confirmation-selection-basicskills{ display: -webkit-flex; display: flex; flex-wrap:wrap;vertical-align:middle; justify-content:space-between; align-items:stretch; width:100%; margin:-2px 0 10px; padding:0 8px 20px;}
			.order-confirmation-selection-basicskills h4{ width:32%; margin-bottom:0; padding:12px 8px; text-align:center;  font-size:0.9em; line-height:1.15em; color:#666; border:1px #DDD solid; border-radius:3px;}
			.order-confirmation-selection-basicskills-title{ width: 100%; margin: 0 0 8px; font-size: 1.25em;}
			.order-confirmation-selection-basicskills-project{ width: 96%; margin: 0 2% 15px;}
				.order-confirmation-selection-basicskills-project TT{ width: auto; margin: 0 0 5px; font-size: 1.05em;}
					.order-confirmation-selection-basicskills-project XX{ font-size: 0.8em;}
	.order-confirmation-price{ width:300px; margin:20px 0 20px calc(100% - 300px); padding:0 10px 10px 0; text-align:right; font-size:1.25em; font-weight:bold; letter-spacing:1px; color:#212121; border-bottom:1px #999 solid;}
	
	
.print-order{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:calc(100% - 40px); min-width:1000px; margin:20px; padding:50px; color:#212121; overflow: auto;}
	.print-order h2{ width:100%; margin: 0 0 50px; text-align:center; font-size:2.2em;}
	.print-order-content{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; padding:50px; border:1px #212121 solid;page-break-inside: avoid;}
		.print-order-content h3{ width:100%; margin:0 0 20px; font-size:1.8em;}
		.company-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:space-between; align-content:space-between; width:100%; margin:0 0 50px;}
		.print-order-content h4{ width:100%; margin:0 0 20px; font-size:1.8em;}
			.print-order-content h4 img{ width:100%; max-width:280px; margin:0; padding:0;}
		.print-order-content-information{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:49%;}
			.print-order-content-information div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; margin:5px 0; font-size:1.15em;}
			.print-order-content-information span{ margin:0; padding:0; width:100px;}
			.print-order-content-information p{ margin:0; padding:0; width:calc(100% - 100px);}
		.print-order-content-quotation{ display: -webkit-flex; display: flex; flex-wrap:wrap; width:100%; margin:0 0 30px; border:1px #212121 solid;}
			.print-order-content-quotation div{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:100%; padding:10px 15px; font-size:1.15em;}
			.print-order-content-quotation div:not(:last-child){ border-bottom:1px #212121 solid;}
			.print-order-content-quotation p{ margin:0; padding:0; width:calc(100% - 140px);}
			.print-order-content-quotation span{ margin:0; padding:0; width:140px;}
		.print-order-content-price{ display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: flex-end; width:360px; margin:20px 0 20px calc(100% - 360px);}
			.print-order-content-price p, .print-order-content-price span{ font-size:1.3em;}
		.print-order-content-signature{ display: -webkit-flex; display: flex; flex-wrap:nowrap; width:50%; margin:30px 0 20px; padding: 0 5%; font-size:1.2em;}	
			.print-order-content-signature p{ width:120px; margin:0; text-align:right;}	
			.print-order-content-signature span{ width:180px; border-bottom:1px #212121 solid;}
			

	
.button-style{ display: -webkit-flex; display: flex; flex-wrap:nowrap; justify-content:center; width:100%; margin:20px 0 50px;}
	.button-style p, .button-style button{ width:150px; margin:0 20px; padding:15px 0; text-align:center; font-size:1.15em; font-weight:bolder; letter-spacing:2px; color:#333; border-radius:8px; transition:0.2s ease-in-out;}
	.button-previous{ background-color:#FFF; border:2px #DDD solid;}
	.button-next{ background-color:#FFBA00; border:2px #d4a119 solid;}
	.button-style p:hover, .button-style button:hover{ background-color:#666; color:#FFF; border:2px #FFF solid;}
	.button-style a, .button-style a:visited, .button-style a:hover{ text-decoration:none; color:#333;}
	

footer{ width:100%; padding:10px 0; text-align:center; font-size:0.55em; color:#FFF; background-color:#333;}
	
}