@charset "utf-8";

.float-left{ float: left;}
.float-right{ float: right;}
.margin-top-20 { margin-top: 20px;}
.margin-top-50 { margin-top: 50px;}
.margin-top-80 { margin-top: 80px;}
.btn-style-printer-service:hover,
.btn-style-printer-service:focus{
	background-color: #1C9C5E;
}
.text-underline{ text-decoration: underline;}

.page-nav-box{}

/* Banner */
.main-banner-panel{ margin: 0 auto; border-bottom: #E8F9F4 solid 24px;}
.ele-printer-service-banner-box{ position: relative; width: 100%; height: 350px; display: block;}
.ele-printer-service-banner-box .banner-img{ position: absolute; left: 0; top: 0; z-index: 90; width: 100%; height: inherit; overflow: hidden; padding-left: 15px;}
.ele-printer-service-banner-box .product-img{ position: absolute; right: 60px; top: 60px; z-index: 91;}
.ele-printer-service-banner-box .printer-service-slogan{position: absolute; left: 0; top: 0; z-index: 99; padding-left: 60px; padding-top: 60px;}
.ele-printer-service-banner-box .printer-service-slogan img.sharp-logo{ height: 40px;}
.ele-printer-service-banner-box .printer-service-slogan strong{ width: 420px; display: block; font-family: "graphik2", "courier new", "Arial"; font-size: 36px; line-height: 50px; font-weight: 600; color: #1C9C5E;}
.ele-printer-service-banner-box .printer-service-slogan p{ width: 80%; font-family: "graphik", Helvetica, Arial, sans-serif; font-size: 20px; line-height: 26px; color: #333; }


.printer-service-desc{ width: 100%; max-width: 1080px; margin: 0 auto; font-size: 14px; color: #666; line-height: 24px;}
.printer-service-desc h3{ font-size: 20px; line-height: 28px; font-weight: 600; font-family: "graphik2", "courier new", "Arial"; color: #1C9C5E;}
.printer-service-desc p{ margin-top: 5px; margin-bottom: 15px;}
.printer-service-desc ul{ list-style: disc outside; padding-left: 20px;}
.printer-service-desc h4,
.printer-service-desc b,
.printer-service-desc strong{ color: #444;}

/* 3 Steps */
.process-step{ width: 100%; margin: 0 auto; text-align: right; padding-right: 12px;}
.process-step .ele-process-step-btn{ width: 60%; position: relative;}
.process-step .ele-process-step-btn:before{width: 38px; height: 38px; content: ''; display: block; border-top: #fff solid 15px;border-right: #fff solid 15px; position: absolute; top: -3px; right: -8px; transform: rotate(45deg);}
.process-step .ele-process-step-btn:after{width: 38px; height: 38px; content: ''; display: block; background-color: #fff; position: absolute; top: -3px; left: -17px; transform: rotate(45deg);}
.process-memo{ width: 100%; height: auto; margin: 0 auto; margin-top: 12px; margin-bottom: 12px; border: #1C9C5E solid 2px; border-radius: 12px; padding: 15px; text-align: center;}
.process-memo .step-image-box{ width: inherit; text-align: center; margin: 0 auto; display: block; overflow: hidden;}
.process-memo .step-image-box img{ width: inherit; margin: 0 auto;}
.process-memo strong{ display: block; color: #1C9C5E; font-size: 20px; margin: 0 auto; margin-top: 12px;}
.process-memo p{ width: inherit; height: 54px; overflow: hidden; color: #666; font-size: 14px; line-height: 18px; margin-top: 5px; margin-bottom: 0;}


.ele-service-form-panel{width: 100%; max-width: 1180px; margin: 0 auto; margin-top: 45px; margin-bottom: 145px; padding-top: 45px; padding-bottom: 45px; background-color: #E8F9F4;}
.ele-service-ui{ width: 100%; max-width: 1080px; margin: 0 auto;}
.ele-service-ui .product-img-box{ width: 100%; text-align: center; margin: 0 auto; display: block;}
.ele-service-ui .product-img-box img{ width: inherit; margin: 0 auto;}
.ele-service-ui .product-img-box strong{display: block; color: #1C9C5E; font-size: 20px; margin: 0 auto; margin-top: 12px;}
.ele-service-ui .product-img-box .product-desc{ width: 100%; padding: 8px; margin: 0 auto; text-align: left; font-size: 14px; color: #555;}

/*accordion for form UI*/
#ele-accordion .panel-heading .panel-title a{ color: #1C9C5E; font-size: 16px; line-height: 24px;}
#ele-accordion .panel-heading .accordion-sign a{ font-size: 22px; line-height: 24px; text-underline: none; color: #1C9C5E;}
#ele-accordion .panel-heading .accordion-sign a:not(.collapsed) .glyphicon-plus-sign{ display: none;}
#ele-accordion .panel-heading .accordion-sign a:not(.collapsed) .glyphicon-minus-sign{ display: inline-block;}
#ele-accordion .panel-heading .accordion-sign a.collapsed .glyphicon-plus-sign{ display: inline-block;}
#ele-accordion .panel-heading .accordion-sign a.collapsed .glyphicon-minus-sign{ display: none;}

#ele-accordion .collapse.in{ padding-top: 15px; padding-bottom: 15px;}
#ele-accordion .panel-default{ border: #1C9C5E solid 1px;}
#ele-accordion .panel-default>.panel-heading{ border: 0; background-color: transparent;}

.ele-product-row{ width: inherit; margin: 0 auto; margin-top: 8px; font-size: 14px;}
.product-head-title{ font-size: 12px; color: #1C9C5E; font-family: "graphik2", "courier new", "Arial"; margin-top: 0;}
.ele-product-row .glyphicon{ color: #1C9C5E;}
.ele-product-row label{ font-weight: normal; cursor: pointer;}
.ele-product-row .glyphicon-check{ display: none;}
.ele-product-row input[type="radio"]:checked ~ .glyphicon-unchecked{ display: none;}
.ele-product-row input[type="radio"]:checked ~ .glyphicon-check{ display: block;}
.ele-product-row input[type="radio"]:disabled ~ .glyphicon-unchecked,
.ele-product-row input[type="radio"]:disabled ~ .glyphicon-check{ color: #eee;}

.ele-product-row input[type="checkbox"]:checked ~ .glyphicon-unchecked{ display: none;}
.ele-product-row input[type="checkbox"]:checked ~ .glyphicon-check{ display: block;}
.ele-product-row input[type="checkbox"]:disabled ~ .glyphicon-unchecked,
.ele-product-row input[type="checkbox"]:disabled ~ .glyphicon-check{ color: #eee;}

.ele-view-checked-unit{ display: block!important; height: auto!important;}
.ele-view-checked-unit .ele-product-row{ display: none;}

.ele-delivery-detail .form-group label{ font-size: 12px; color: #1C9C5E;}

.ele-delivery-detail .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%;}

#ele-accordion .panel-heading label.error{ font-size: 12px; color: #ff3300; font-weight: normal;}
#ele-accordion .panel-collapse label.error{ font-size: 12px; color: #ff3300; font-weight: normal;}

@media (max-width: 1200px) {
	/* Banner */
	.ele-printer-service-banner-box .banner-img{ padding-left: 0;padding-right: 0;}
	.ele-printer-service-banner-box .product-img img{ width: 350px; right: 30px;}
	.ele-printer-service-banner-box .printer-service-slogan{ padding-left: 30px; padding-top: 50px;}

	.process-memo p{ height: 48px; font-size: 12px; line-height: 16px;}

	.ele-service-ui .product-img-box .product-desc{ font-size: 12px;}

	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		padding-right: 8px;
		padding-left: 8px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	/* Banner */
	.ele-printer-service-banner-box{ height: 280px;}
	.ele-printer-service-banner-box .product-img img{ width: 280px; }
	.ele-printer-service-banner-box .printer-service-slogan{ padding-left: 30px; padding-top: 40px;}
	.ele-printer-service-banner-box .printer-service-slogan strong{ font-size: 28px; line-height: 38px;}
	.ele-printer-service-banner-box .printer-service-slogan p{width: 60%;}

	/* 3 Steps */
	.process-memo{padding: 5px;}
	.process-memo strong{ font-size: 16px; margin-top: 8px;}
	.process-memo p{ height: 48px; font-size: 12px; line-height: 12px;}

	/*accordion for form UI*/
	#ele-accordion .collapse.in{ padding-top: 8px; padding-bottom: 12px;}
	.ele-product-row{ font-size: 12px;}
}
@media (max-width: 767px) {
	.page-nav-box{ background-color: #f8f8f8;}
	/* Banner */
	.main-banner-panel{ border-bottom: #E8F9F4 solid 10px;}
	.ele-printer-service-banner-box{ height: 280px;}
	.ele-printer-service-banner-box .product-img{ display: none;}
	.ele-printer-service-banner-box .printer-service-slogan{ padding-left: 30px; padding-top: 30px; }

	/* 3 Steps */
	.process-memo{padding: 5px;}
	.process-memo strong{ font-size: 16px; margin-top: 2px;}
	.process-memo p{ height: 48px; font-size: 12px; line-height: 12px;}

	/*accordion for form UI*/
	#ele-accordion{ margin-top: 30px;}
	#ele-accordion .collapse.in{ padding-top: 8px; padding-bottom: 12px;}
	.ele-product-row{ font-size: 12px;}

	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		padding-right: 5px;
		padding-left: 5px;
	}
}

@media (max-width: 540px) {
	/* Banner */
	.ele-printer-service-banner-box{ height: 160px;
		background: #333 url(../images/printer_bg_mobile.jpg) no-repeat top center;
	}
	.ele-banner-uber-review .banner-img{ display: none;}
	.ele-printer-service-banner-box .printer-service-slogan{ position: relative; padding: 0; padding-top: 8px; text-align: center;}
	.ele-printer-service-banner-box .printer-service-slogan strong{ width: 100%; font-size: 22px; line-height: 24px; margin: 0 auto; margin-top: 10px;}
	.ele-printer-service-banner-box .printer-service-slogan p{ margin-top: 8px;width: 100%; text-align: center; font-size: 12px; line-height: 18px; }

	/* 3 Steps */
	.process-step{ text-align: left;}
	
	#ele-accordion .panel-heading .panel-title a{ font-size: 12px;}
}