﻿@charset "utf-8";
/* CSS Document */

.top_box{
	border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
	margin-top:-20px;
}

/*匯款獨用*/
@media (min-width: 769px){
.top_box_remit{
	border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
	margin-top:-20px;
}}

    @media (min-width: 480px){
.top_box_remit{
	border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
	margin-top:20px;
}}


/*沒有麵包屑*/
.No_breadcrumb_Box{
    border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
    margin-top:-2em;
}

@media (min-width:768px) {
    .No_breadcrumb_Box{
    border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
    margin-top:-2em;
}
}

@media (min-width:320px) {
    .No_breadcrumb_Box{
    margin-top:2.5em;
}
}
/*有麵包屑-靜態網頁*/
    .Static_top_box{
margin-top:-1.3em;
}

@media (min-width:768px) {
  .Static_top_box{
  margin-top:-1.3em;
}
}

@media (max-width:767px) {
  .Static_top_box{
  margin-top:1em;
}
}
.common_box{
	border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
}

.common-box-square-bg {
	background-image: url(../image/square_bg.png);
	background-repeat: repeat;

}

.common_big_hr {
	border: 0.15em solid #bed4f6;
	margin-top: -0.7em;
}



.col-xs-12.box_title_bg {
	background-image: url(../image/title_bg.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 90px;
}

.col-xs-11.box_myproduct{
    margin-left:4%;
}

.box_title_bg {
	background-image: url(../image/title_bg.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 90px;
}

.box_title {
	position: absolute;
	top: 41%;
	left:20%;
	font-size: 1.7em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}

/*shadow*/
.box_shadow{
	background-image: url(../image/shadow.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:29px;
}

@media (min-width:319px) {
    .box_shadow{
	background-image: url(../image/shadow_S.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:18px;
}
}

@media (min-width:481px) {
    .box_shadow{
	background-image: url(../image/shadow_M.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:26px;
}
}

@media (min-width:769px) {
    .box_shadow{
	background-image: url(../image/shadow.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:29px;
}
}


.pay_success{
	color: #18D1A3;
	text-align: center;
	font-size: 2em;
	text-shadow: 0px 1px 2px #0D6A53;
	font-weight: bolder;
}



@media (max-width:320px){
	.box_title {
	position: absolute;
	top: 41%;
	left:15%;
	font-size: 1.4em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}
@media (min-width:375px){

.common_hr {
	border-color: #bed4f6; margin-top:-0.7em;
}
	.box_title {
	position: absolute;
	top: 41%;
	left:15%;
	font-size: 1.4em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}

@media (min-width:415px){
	.box_title {
	position: absolute;
	top: 41%;
	left:15%;
	font-size: 1.4em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}
@media (min-width:480px){
	.box_title {
	position: absolute;
	top: 41%;
	left:15%;
	font-size: 1.4em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}
@media (min-width:768px){
	.box_title {
	position: absolute;
	top: 41%;
	left:20%;
	font-size: 1.7em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}
@media (min-width:991px){
	.box_title {
	position: absolute;
	top: 41%;
	left:20%;
	font-size: 1.7em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}
@media (min-width:1200px){
	.box_title {
	position: absolute;
	top: 41%;
	left:30%;
	font-size: 1.7em;
	line-height: 0.5em;
	color: #FFFFFF;
	font-weight: bolder;
	text-shadow: 0px 1px 2px #515151;
}
}


/*麵包屑*/
@media (max-width:480px){
.breadcrumb{
	display: none;
}

.top_box{
	border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
	margin-top:0.5em;
	margin-left:0.5em;
	margin-right:0.5em;
}

.top_box_remit{
	border: solid 1px #ccc;
	background: #fff;
	padding-bottom: 1em;
	margin-top:0.5em;
	margin-left:0.5em;
	margin-right:0.5em;
}

.common_box{
	margin-left:0.5em;
	margin-right:0.5em;
}
}


/*apply_steps*/

	.apply_steps{
	margin:1em auto;
}

.container-fluid .search_box {
	width: 100%;
	background-color:#fff;
    max-height: 25em;
}

/*---------------------------------------------step1---------------------------------------------*/
@media (min-width:320px){
	.step1_search{
	background-image: url(../image/apply_steps/step1_search_s.jpg);
	background-repeat: no-repeat;
	min-height:46px;
	background-size: cover;
	margin:1.9em auto;
}}

@media (min-width:375px){
	.step1_search{
		min-height:52px;
}}

@media (min-width:414px){
	.step1_search{
		min-height:59px;}
}

@media (min-width:768px){
.step1_search{
	background-image: url(../image/apply_steps/step1_search.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:150px;
	margin:1em auto;
	}}

@media (min-width:1024px){
.step1_search{
	background-image: url(../image/apply_steps/step1_search.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:160px;
	margin:1em auto;
	}}

/*---------------------------------------------step2---------------------------------------------*/
@media (min-width:320px){
	.step2_on_line{
	background-image: url(../image/apply_steps/step2_on_line_s.jpg);
	background-repeat: no-repeat;
	min-height:46px;
	background-size: cover;
	margin:1.9em auto;
}}

@media (min-width:375px){
	.step2_on_line{
		min-height:52px;
}}

@media (min-width:414px){
	.step2_on_line{
		min-height:59px;}
}

@media (min-width:768px){
.step2_on_line{
	background-image: url(../image/apply_steps/step2_on_line.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:150px;
	margin:1em auto;
	}}

@media (min-width:1024px){
.step2_on_line{
	background-image: url(../image/apply_steps/step2_on_line.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:160px;
	margin:1em auto;
	}}

/*---------------------------------------------step3---------------------------------------------*/
@media (min-width:320px){
	.step3_invoice{
	background-image: url(../image/apply_steps/step3_invoice_s.jpg);
	background-repeat: no-repeat;
	min-height:46px;
	background-size: cover;
	margin:1.9em auto;
}}

@media (min-width:375px){
	.step3_invoice{
		min-height:52px;
}}

@media (min-width:414px){
	.step3_invoice{
		min-height:59px;}
}

@media (min-width:768px){
.step3_invoice{
	background-image: url(../image/apply_steps/step3_invoice.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:150px;
	margin:1em auto;
	}}

@media (min-width:1024px){
.step3_invoice{
	background-image: url(../image/apply_steps/step3_invoice.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:160px;
	margin:1em auto;
	}}

/*---------------------------------------------step4---------------------------------------------*/
@media (min-width:320px){
	.step4_coin{
	background-image: url(../image/apply_steps/step4_coin_s.jpg);
	background-repeat: no-repeat;
	min-height:46px;
	background-size: cover;
	margin:1.9em auto;
}}

@media (min-width:375px){
	.step4_coin{
		min-height:52px;
}}

@media (min-width:414px){
	.step4_coin{
		min-height:59px;}
}

@media (min-width:768px){
.step4_coin{
	background-image: url(../image/apply_steps/step4_coin.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:150px;
	margin:1em auto;
	}}

@media (min-width:1024px){
.step4_coin{
	background-image: url(../image/apply_steps/step4_coin.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:160px;
	margin:1em auto;
	}}

/*---------------------------------------------step5---------------------------------------------*/
@media (min-width:320px){
	.step5_finish{
	background-image: url(../image/apply_steps/step5_finish_s.jpg);
	background-repeat: no-repeat;
	min-height:46px;
	background-size: cover;
	margin:1.9em auto;
}}

@media (min-width:375px){
	.step5_finish{
		min-height:52px;
}}

@media (min-width:414px){
	.step5_finish{
		min-height:59px;}
}

@media (min-width:768px){
.step5_finish{
	background-image: url(../image/apply_steps/step5_finish.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:150px;
	margin:1em auto;
	}}

@media (min-width:1024px){
.step5_finish{
	background-image: url(../image/apply_steps/step5_finish.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height:160px;
	margin:1em auto;
	}}




/* styles for validation helpers */
.field-validation-error {
    color: red;
}
 
.field-validation-valid {
    display: none;
}
 
input.input-validation-error {
    border: 1px solid red;
}
 
input[type="checkbox"].input-validation-error {
    border: 0 none;
}
 
.validation-summary-errors {
    color: red;
}
 
.validation-summary-valid {
    display: none;
}
