﻿@charset "utf-8";
/* CSS Document */
html{
	font-size: 16px;
	line-height: 150%;
}
body{
	margin:0px;
	padding:0px;
	font-family: Montserrat,'Heiti TC','microsoft jhenghei';
	-webkit-text-size-adjust: none;
	font-weight: 400;
	word-break: break-all;
	word-wrap: break-word;
}
img{
	max-width:100%;
	width:100%\0;
	height: auto;
}
a{
	font-size:inherit;
	cursor: pointer;
	color:inherit;
	line-height: inherit;
	text-decoration: none;
	transition: all ease .5s;
}
input[type="text"],input[type="password"],input[type="number"],input[type="tel"],textarea,button,input[type="button"]{
	font-family: Montserrat,'Heiti TC','microsoft jhenghei';
	-webkit-appearance: none;
	appearance:none;
	font-size: 1rem;
	outline: none;
}
select{
	font-family: Montserrat,'Heiti TC','microsoft jhenghei';
	font-size: 1rem;
}
a:hover{
	text-decoration:underline;
}
section{
	display:block;
	clear: both;
}
header{
	background:#f0f1f1;
	margin:0px;
	padding:10px;
}
.header{
	margin:0px;
	padding:0px;
	width:100%;
	display: table;
}
.header > div{
	display:table-cell;
	text-align: left;
	vertical-align: middle;
}
.header .logo{
	width:100px;
}
.header .context{
	text-align:right;
}
.container{
	margin:0px;
	padding:20px 10px;
}
.product-info .picture{
	width:65%;
	text-align: center;
	margin:0px auto;
}
.product-info .name{
	color:#323232;
    text-align: center;
    font-size: 1.5rem;
	line-height: 150%;
}
.product-info .context{
	font-size:1rem;
	color:#0085ca;
	line-height: 150%;
}
.product-info .context .highlight{
	color:#d52b1e;
}
.product-info .checkout-btn{
	width:60%;
	margin:20px auto;
}
.product-info .checkout-btn .btn{
	background-color: #d52b1e;
	color:#FFFFFF;
	padding:10px 0px;
	width:100%;
	border-radius: 100px;
	border:1px solid #d52b1e;
}
.product-info .description{
	border-top:1px solid #000000;
	margin:40px 0px 20px 0px;
	padding:0px;
}
.product-info .description .title{
	display:table-cell;
	padding:10px 5px 10px 0px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	border-bottom: 1px solid #d9d9d9;
	width:30%;
}
.product-info .description .context{
	display:table-cell;
	padding:10px 0px;
	text-align: left;
	vertical-align: top;
	color:#323232;
	border-bottom: 1px solid #d9d9d9;
}
.product-info .description > div{
	display:table;
	width:100%;
	font-size: 1rem;
	line-height: 150%;
}
.product-info .noticed .title{
	display:block;
	border-bottom: none;
}
.product-info .noticed ul{
	margin:0px 0px 0px 1.1rem;
	padding:0px;
}
.product-info .noticed ul li{
	list-style: decimal;
	font-size: .875rem;
	margin:5px 0px;
	color:#323232;
}
.product-info .noticed ul li a{
	color:#D52B1E;
	margin: 0px 5px;
	text-decoration: underline;
}
footer{
	margin:0px;
	padding:20px 10px;
	background-color: #f0f1f1;
}
.footer .logo{
	display:block;
}
.footer .logo img{
	width:60px;
}
.footer .contact-info{
	font-size:.875rem;
	margin:10px 0px;
	word-break:normal;
	word-wrap:break-word;
}
.footer .contact-info a{
	color:#0085ca;
	text-decoration: underline;
}
.leadsform-link{
	font-size:.875rem;
	color:#0085ca;
	margin:0px;
}


/*receipt page*/
.receipt-content > .title{
	font-size:1.25rem;
	text-align: center;
	margin:20px 0px 30px 0px;
	color:#162056;
}
.receipt-form > div > label.title{
	color: #000000;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 150%;
}
.receipt-form span.required{
	color:#d52b1e;
	vertical-align: top;
}
.receipt-form input[type="text"] ,.receipt-form input[type="number"],.receipt-form input[type="tel"]{
	border:1px solid #d9d9d9;
	border-radius: 5px;
	background-color: transparent;
    padding: 5px 10px;
    color: #808080;
    margin: 5px 0px;
}
.receipt-form input[type="text"]::placeholder,.receipt-form input[type="number"]::placeholder,.receipt-form input[type="tel"]::placeholder{
	color:#c8c8c8;
	font-weight: 300;
}
.receipt-form input[type="text"].qty{
	border-radius:0px;
	width:calc( 100% - 78px );
	display: inline-block;
	vertical-align: top;
}
.receipt-form .qtyminus{
	border:1px solid #d9d9d9;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-right:none;
	background-color: transparent;
	padding:3px 10px 4px 10px;
	padding:3px 10px 2px 10px\0;
	margin:5px -5px 5px 0px;
	font-size: 1rem;
	line-height: 150%;
	font-weight: 400;
	color:#808080;
	display: inline-block;
	vertical-align: top;
}
.receipt-form .qtyplus{
	border:1px solid #d9d9d9;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-left:none;
	background-color: transparent;
	padding:3px 10px 4px 10px;
	padding:3px 10px 2px 10px\0;
	margin:5px 0px 5px -5px;
	font-size: 1rem;
	line-height: 150%;
	font-weight: 400;
	color:#808080;
	display: inline-block;
	vertical-align: top;
}
.receipt-form .set-qty .context select{
	width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 10px;
    color: #808080;
    margin: 5px 0px;
}
.receipt-form input[type="text"].phone-number,.receipt-form input[type="number"].phone-number,.receipt-form input[type="tel"].phone-number{
	width:calc( 100% - 22px );
}
.receipt-form .danger-msg{
	display:block;
	clear:both;
	margin:0px 0px 10px 0px;
	line-height: 0px;
	font-size: 0px;
}
.receipt-form .danger-msg.error{
	margin:5px 0px 10px 0px;
	color: #d52b1e;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 150%;
}
.receipt-form .receiptpage-choose-vehicle{
	margin:10px 0px;
	padding:10px 0px;
	border-top:1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
}
.receipt-form .receiptpage-choose-vehicle > div{
	margin:10px 0px;
}
.receipt-form .receiptpage-choose-vehicle > div > input[type="radio"]{
	display:inline-block;
	vertical-align: top;
	margin:9px 0px 3px 3px;
	width:14px;
	height: 14px;
}
.receipt-form .receiptpage-choose-vehicle > div > label.title{
	display:inline-block;
	margin:5px 0px 0px 2px;
	color:#555555;
	font-size: 1rem;
}
.receipt-form .receiptpage-choose-vehicle > div > .context{
	padding:5px 20px;
	font-size: .875rem;
	color:#555555;
	display: none;
}
.receipt-form .receiptpage-choose-vehicle .context .input-content  label.title{
	display:inline-block;
	vertical-align: middle;
	width:73px;
	font-size: .875rem;
	color:#888888;
}
.receipt-form .receiptpage-choose-vehicle .context .input-content .context{
	display:inline-block;
	vertical-align: middle;
	width:calc( 100% - 78px );
}
.receipt-form .receiptpage-choose-vehicle .context .input-content .context input[type="text"],.receipt-form .receiptpage-choose-vehicle .context .input-content .context input[type="tel"],.receipt-form .receiptpage-choose-vehicle .context .input-content .context input[type="number"]{
	width:calc( 100% - 22px );
}
.receipt-form .policy-n-term .input-content{
	color:#323232;
	font-size: .825rem;
}
.receipt-form .policy-n-term .input-content input[type="checkbox"]{
	display:inline-block;
	vertical-align: top;
	margin:5px 0px 0px 0px;
}
.receipt-form .policy-n-term .input-content input[type="checkbox"][name="policy_check"]{
	margin:5px 0px 0px 0px;
}
.receipt-form .policy-n-term .input-content .title{
	display:inline-block;
	vertical-align: top;
	margin:0px 0px 0px 2px;
	font-weight: 600;
}
.receipt-form .policy-n-term .input-content .title .required{
	color:#d52b1e;
	vertical-align: top;
	margin:0px 0px 0px 3px;
}
.receipt-form .policy-n-term .text{
	margin:10px 0px;
	color:#b2b2b2;
	font-size: .875rem;
}
.receipt-form .policy-n-term .text a{
	color:#80c2d0;
	text-decoration: underline;
}
.receipt-form .receiptpage-choose-vehicle > div > .context .danger-msg{
	display: none;
}
.receipt-form .receiptpage-choose-vehicle > div > .context .danger-msg.error{
	margin:5px 0px 10px 0px;
	display:block;
}
.receipt-form .confirm-n-send{
	margin:0px;
	text-align: center;
	position: relative;
	width:100%;
	padding:0px;
}
.receipt-form .confirm-n-send .send-btn{
	border:none;
	background: #d52b1e;
	color:#FFFFFF;
	padding:10px 0px;
	width:100%;
	font-size: 1rem;
	line-height: 150%;
	border-radius: 500px;
	letter-spacing: 1px;
	-webkit-appearance: none;
}
.receipt-form .receiptpage-choose-vehicle > div > .context > input[type="text"]{
	width:calc( 100% - 22px );
}
.receipt-form .receipt-product-info{
	display:table;
	width:100%;
	margin:20px 0px;
}
.receipt-form .receipt-product-info .picture{
	display:table-cell;
	width:30%;
	text-align: left;
	vertical-align: top;
	padding:5px;
}
.receipt-form .receipt-product-info .context{
	display:table-cell;
	text-align: left;
	vertical-align: top;
	padding:10px 0px 0px 10px;
}
.receipt-form .receipt-product-info .context .name{
	color: #162056;
	line-height: 150%;
}
.receipt-form .receipt-product-info .context .price{
	color:#d52b1e;
	line-height: 150%;
	margin:10px 0px;
}
.receipt-form .receiptpage-choose-vehicle .member-vehicle .context .input-content .context select{
	width: 100%;
	border: 1px solid #d9d9d9;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 10px;
    color: #808080;
    margin: 5px 0px;
}
.receipt-form .receiptpage-choose-vehicle .member-vehicle .context .input-content label.title{
	vertical-align: top;
	margin:9px 0px 0px 0px;
}


/*password-page*/
.password-page .container{
	padding:0px;
	text-align: center;
}
.password-content .title{
	background: url(../Content/img/password_BN12_20180510.jpg) left top no-repeat;
	background-size: cover;
	padding:10vh 0px;
}
.password-content .title h1{
	margin:0px;
	padding:0px;
	color:#FFFFFF;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 150%;
	text-shadow: 0px 0px 10px rgba(0,125,125,0.35),0px 0px 10px rgba(0,125,125,0.35),0px 0px 5px rgba(0,125,125,0.35),0px 0px 10px rgba(0,125,125,0.35);
}
.password-content .title h1 en{
	font-weight: 400;
	display: block;
}
.password-content .title h3{
	margin:0px;
	padding:10px 0px;
	color:#FFFFFF;
	font-size: 1.2rem;
	font-weight: 200;
	line-height: 150%;
	text-shadow: 0px 0px 10px rgba(0,125,125,0.35),0px 0px 10px rgba(0,125,125,0.35),0px 0px 5px rgba(0,125,125,0.35),0px 0px 10px rgba(0,125,125,0.35);
}
.password-content .remind{
	margin:20px 0px;
	color:#162056;
	font-size: 1rem;
}
.password-form .password{
	border:1px solid #b2b2b2;
	border-radius: 5px;
	padding:5px 10px;
	font-size: 1rem;
	color:#808080;
	text-align: center;
	font-weight: 200;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}
.password-form .password::placeholder{
	color:#b2b2b2;
	font-weight: 200;
}
.password-form .remeber-psw{
	display:block;
	margin:20px 0px;
}
.password-form .remeber-psw input{
	display:inline-block;
	vertical-align: middle;
}
.password-form .remeber-psw .context{
	display:inline-block;
	vertical-align: middle;
	font-size: .75rem;
	color:#808080;
}
.password-form .send-btn-content{
	margin:20px 0px;
	text-align: center;
}
.password-form .send-btn-content .send-btn{
	border-radius: 500px;
	background-color: #d52b1e;
	border:none;
	text-align: center;
	color:#FFFFFF;
	padding:10px 0px;
	width:60%;
	display: inline-block;
	cursor: pointer;
}
.danger-msg{
	margin: 5px 0px 10px 0px;
    color: #d52b1e;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 150%;
	display:none;
}
.danger-msg.error{
	display:block;
}
.error-page .container{
	background-color: #dcdcdc;
}
.error-section{
	min-height: calc( 100vh - 270px );
	text-align: center;
}
.error-section .icon{
	width:40%;
	margin:20px auto;
	max-width:250px;
}
.error-section .icon img{
	filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.15));
}
.error-section h1{
	color:#162056;
	font-size: 2rem;
	line-height: 100%;
	margin:20px 0px;
}
.error-section .text{
	color: #162056;
    font-size: 1.25rem;
    line-height: 100%;
    font-weight: 600;
}
.error-section .context{
	color:#666666;
	font-size: .85rem;
	line-height:150%;
	margin:20px 0px;
	font-weight: 600;
}
@media screen and (min-width:350px) {
	.error-section .text {
		font-size:1.5rem;
		line-height:150%;
	}
	.error-section .context {
		font-size: .95rem;
		line-height: 150%;
	}
}
@media screen and (min-width:400px) {
	.error-section .text {
		font-size: 1.75rem;
		line-height: 150%;
	}

	.error-section .context {
		font-size: 1.15rem;
		line-height: 150%;
	}
}
.error-section .context ul{
	margin:10px 0px 0px 0px;
	padding:0px;
	color:#666666;
	font-weight:400;
}
.error-section .context ul li{
	margin:5px 0px 0px 20px;
	padding:0px;
	list-style:decimal;
	text-align:left;
	letter-spacing:-0.03rem;
}
.remind-msg{
	margin: 10px 0px 10px 0px;
    color: #d52b1e;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 150%;
	text-align: center;
}
.voucher-iframe{
	width:100%;
	height:100vh;
	border: none;
	webkit-overflow-scrolling: touch;
}
.term-of-use{
	font-size:.8rem;
	color:#162056;
	line-height: 180%;
}
.term-of-use .description{
	color:#000000;
}
.term-of-use h3{
	font-size: 1.25rem;
	line-height: 150%;
}
.term-of-use h5{
	font-size: 1rem;
	line-height: 150%;
	margin:0px 0px 5px 0px;
}
.term-of-use ul{
	margin:0px 0px 0px 20px;
	padding:0px;
}
.term-of-use ul li{
	margin:0px 0px 5px 0px;
	padding:0px;
	list-style:cjk-ideographic;
	color:#323232;
}
.term-of-use ul li ul{
	margin:20px 0px 20px 15px;
}
.term-of-use ul li li{
	list-style: decimal;
	padding:0px 0px 0px 5px;
	color:#555555;
}
.dsar-link {
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	margin: 40px 0px 0px 0px;
}

.dsar-link a {
	font-size: 12px;
	color: #80c2d0;
	text-decoration: underline;
	line-height: 100%;
}