@charset "utf-8";
.red{color:#c30d23;}
.blue{color:#1f3667;}
.white{color:#ffffff;}
.yellow{color:#ffea00;}
.bold{font-weight:bold;}


/***** s1設定 *****/
#s1,#s2,#s3,#info,#qa{ width:100%; overflow:hidden}
#s3,#qa{ background:#fcfaf0; width:100%; overflow:hidden}
#s3,#qa{margin-top:-50px; padding-top:50px;}
#s2,#info{ background:#5395a8; width:100%; padding-bottom:2%; overflow:hidden}
.s1-kv{position:relative; width:100%; margin:0 auto;}
.kv1{ width:57%; float:left;}
.kv2{ width:43%; float:left;}

.s2-bg1,.s2-bg2{position:relative; width:78%; margin:auto;}
.s2-main{position:relative; background:#fff; width:78%; margin:auto; padding-top:3%; padding-bottom:2%;}
.s2-main1,.s2-main2,.s2-main3,.s2-step,.s2-line{position:relative;}
.s2-main1{ width:62%; margin:auto;}
.s2-main2{ width:80%; margin:4% auto;}
.s2-main3{ width:62%; margin:6% auto 5%;}
.s2-btn{ width:25%; margin:auto;}
.s2-step{width:66%; margin:7% auto 0;}
.s2-line{ width:86%; margin:6% auto;}
.s2-qrcode{ position:absolute; z-index:99; width:10.5%; margin-top:26%; margin-left:19.5%; overflow:hidden;}
.dk{display:block}
.mb{display:none}

@media (max-width: 767px) {
.s1-kv{ width:100%; margin:0 auto;}
.kv1{ clear:both; width:100%;}
.kv2{ clear:both; width:100%;}
#s2{ padding-bottom:5%;}
.s2-bg1,.s2-bg2{width:90%;}
.s2-main{width:90%; padding-top:1%; padding-bottom:3%;}
.s2-main1{ width:92%; margin:auto;}
.s2-main2{ width:58%; margin:5% auto;}
.s2-main3{ width:92%; margin:12% auto 10%;}
.s2-btn{ width:48%; margin:auto;}
.s2-step{width:66%; margin:7% auto 0;}
.s2-line{ width:88%; margin:12% auto;}
.s2-qrcode{ width:25%; margin-top:58%; margin-left:37%;}
.dk{display:none}
.mb{display:block}
}

/***** 下拉注意事項 *****/
#info{padding-bottom:9%}
.info-btn{ width:12%; cursor: pointer; margin:1.5% auto 1%; outline: none;}
.show-con {width:78%; margin:0 auto;}
.show-con td { vertical-align:text-top; padding-top:3px}
.info-w2{ font-size:16px; letter-spacing:1px; line-height:150%; text-align:left; color:#000;}

@media (max-width: 767px) {
#info{padding-bottom:20%}
.info-btn{ width:32%;cursor: pointer;margin:1.5% auto 1%;}
.show-con {width:90%;}
.info-w2{ font-size:14px;line-height:140%;}
}


/***** s3分期設定 *****/
.s3-hd{ width:46%; margin:2% auto 3%}
.main{ width:750px; margin:30px auto; overflow:hidden}
.part1{ float:left; width:340px;}
.part2{ float:right; width:350px; margin-right:30px; height:80px}

.am-name{ font-size:30px; font-weight:bold; line-height:55px; letter-spacing:2px; color:#1f3667; text-align:center; padding:5px}
.am-input{ font-family:Arial, Helvetica; font-size:29px; font-weight:normal; width:140px; padding:2px; text-align:center}

.min-step, .max-step{ font-size:16px; margin-top:33px; color:#1f3667;}
.min-step{ float:left; margin-left:-5px; }
.max-step{ float:right; margin-right:-10px;}

.calc-info{ width:65%; margin:30px auto; font-size:17px;line-height:160%; letter-spacing:1px; color:#1f3667}
.s3-btn{ width:13%; min-width:120px; cursor: pointer; margin:30px auto; outline: none; }


@media (max-width: 767px) {
.s3-hd{ width:76%; margin:2% auto 5%}
.main{ width:90%; margin-top:20px}
.part1{ clear:both; width:100%; margin-right:0; text-align:center}
.part2{ clear:both; width:100%; margin:10px 0; padding:0 30px 0 15px;  height:70px}

.am-name{ font-size:23px; line-height:35px; letter-spacing:1px;}
.am-input{ font-size:23px; width:100px; padding:3px;}

.min-step, .max-step{ font-size:15px; margin-top:20px;}
.min-step{ float:left; margin-left:-5px; }
.max-step{ float:right; margin-right:-10px;}

.calc-info{ width:90%; font-size:14px;}
.s3-btn{ width:40%; min-width:120px;}
}


/***** result 設定 *****/
#s3{ padding-bottom:30px;}
.s3-result{ width:68%; min-width:700px; margin:auto; background-color:#ffffff;  border:solid 1px #ffffff; border-radius:10px; }
.result-main{ width:70%; min-width:600px; margin:20px auto 5px; display: flex; align-items: center; }
.result-pic{ display:inline-block; width:130px;  margin:0 20px ; padding-top:15px }
.result-txt{ display:inline-block; margin-top:20px; font-size:33px; line-height:150%; color:#007c7d;}

.paytxt{ padding:2px 15px; font-family:Arial; font-size:42px; font-weight:bold; line-height:150%; color:#C03;}

.result-info{ clear:both; width:90%; margin:10px auto 20px; text-align:center; font-size:16px;line-height:120%;}
.result-close{ width:13%; min-width:120px; cursor: pointer; margin:30px auto}

@media (max-width: 767px) {
.s3-result{ width:90%; min-width:90%;}
.result-main{ width:90%; min-width:90%; margin:20px auto 5px; text-align:center;}
.result-pic{ margin:0 10px; padding-top:0 }
.result-txt{ font-size:23px; line-height:30px;}

.paytxt{ padding:1px 10px; font-size:31px; text-align:left;}
.result-info{ margin:10px auto; font-size:15px; text-align:left;line-height:130%;}
.result-close{ width:35%; min-width:100px; margin:20px auto}
}


/***** 滑塊 設定 *****/
.ui-widget.ui-widget-content{border:none;}

/* 滑塊 */
.ui-slider .ui-slider-handle {
	width: 30px;
	height:30px;
	outline: none;
	cursor: pointer;
	border:none;
	background:#acec40;
	border:5px solid #000;
	border-radius:30px;
	-ms-touch-action: none;
	touch-action: none;
}

/* 下方進度條 */
.ui-slider-horizontal {
	height:13px; 
	top:18px;
	border-radius:50px;
	background:#fc170e;
}
.ui-slider-horizontal .ui-slider-handle {
	top:-10px;
	margin-left:-5px;
	margin-right:10px;
}

/* 上方進度條 */
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
	border-radius:50px;
	background:#fd8c03;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

@media (max-width:767px){
.ui-slider .ui-slider-handle {
	-ms-touch-action: auto;
	touch-action: auto;
}
.ui-slider-horizontal {
	top:10px;
	
}
}


/***** QA *****/
#qa{ padding-bottom:80px}
.aq-hd{clear:both; width:25%; margin:60px auto 20px;}
.panel-group{clear:both; width:68%; margin:auto;}
.panel-group .panel{ margin-bottom:10px;}
.panel-group .panel,.panel-heading{border-radius:15px;}
.panel{ border:3px solid #e9eaea;}
.panel-heading{padding:15px 40px;}
.qa-title,.qa-title a{ font-size:21px; letter-spacing:1px; line-height:150%; color: #007c7d;}
.panel-body{ font-size:17px; letter-spacing:1px; line-height:140%; padding:15px 40px 15px 50px;}

.panel-heading .accordion-toggle:before { content: "-"; width:25px; height:25px;}
.panel-heading .accordion-toggle.collapsed:before {content: "+"; width:25px; height:25px;}


@media (max-width: 767px) {
#qa{ padding-bottom:50px}
.aq-hd{ width:50%; margin:50px auto 10px;}
.panel-group{ width:92%;}
.panel-heading{padding:13px;}
.qa-title,.qa-title a{ font-size:18px;}
.panel-body{ font-size:16px; padding:13px;padding-left:25px;}

}


/***** 自訂nav *****/
.nav {position:fixed; z-index:999; width:100%; background:#007c7d; border: 0; top:0; box-shadow:0 0 3px 0 #888; overflow:hidden}
.nav-head { float:left; width:20%; height:52px; margin-left:3%;}
.nav-logo { width:100%; height:45px; margin-top:5px; background:url(../img/logo.png) no-repeat left; background-size:contain;}

.nav-bar {float:right; margin-right:3%;}
.nav-bar li a {height:52px; display:flex; font-size: 17px; letter-spacing:1px; color:#fff; align-items:center;justify-content: center;}
.nav-bar li a:hover,.nav-bar li a.active,.nav-bar li a:focus{color:#fff ;background:#009395;}
.item-nav-btn {float:left; text-align:center; margin-right:0}
.nav-pic{float:left; width:5px; margin-left:0; margin-right:20px; opacity:0.7}
.nav-txt{float:left; padding-right:25px;}

@media screen and (max-width: 768px) {
.nav-head {width:30%; height:45px; margin-left:2%;}
.nav-logo {width:100%;  height:40px; margin-top:3px;}
.nav-bar li a {height:45px;  font-size: 15px;}
.nav-bar {float:right; margin-right:0%; margin-left:3%;}
.item-nav-btn {float:left; text-align:center; margin-right:0;}
.nav-pic{float:left; width:4px; margin-left:0; margin-right:8px;}
.nav-txt{float:left; padding-right:12px;}
}