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

/***** s1設定 *****/
#s1,#s2,#s3,#info{ background:#fefae5 width:100%; overflow:hidden;}
#s2,#s3,#info{margin-top:-50px; padding-top:50px;}
#s2{ background:#fefae5; padding-bottom:50px;}
#s3,#info{ background:#fefae5; padding-bottom:50px;}
.bg{ width:100%;}
.dk{display:block}
.mb{display:none}

.s1-kv{ width:100%;}

.s2-hd{ width:50%; margin:10px auto 10px;}
.s2-main{ position:relative; width:100%; margin:auto; overflow:hidden;}
.s2-main-1,.s2-main-2{float:left; width:35%; margin-top:30px;}
.s2-main-1{ margin-left:15%;}
.s2-main-2{ margin-right:15%;}

.btn1,.btn2{ position:absolute; z-index:99; width:8.6%; margin-top:27.9%;}
.btn1{ margin-left:28%;}
.btn2{ margin-left:63%;}
.btn1-2{ position:absolute; z-index:99; width:6%; margin-top:23.8%;  margin-left:36.5%;}

.s3-step{position:relative; width:82%; margin:50px auto 0; overflow:hidden;}
.s3-main{ width:100%; margin:auto;}
.step-btn1,.step-btn2{ position:absolute; z-index:99; width:13.5%; margin-top:33%;}
.step-btn1{ margin-left:14.8%;}
.step-btn2{ margin-left:41.3%;}


@media (max-width: 767px) {
#s2{ padding-bottom:30px;}
#s3{ padding-bottom:30px;}
.dk{display:none}
.mb{display:block}

.s2-hd{ width:82%; margin:20px auto 0;}
.s2-main{ width:98%; margin:20px auto; overflow:hidden;}
.s2-main-1{ clear:both ; width:100%; margin:auto;}
.s2-main-2{ clear:both ; width:100%; margin:15px auto 0;}

.btn1,.btn2{ width:24%;}
.btn1{ margin-top:73%; margin-left:38%;}
.btn2{ margin-top:165%; margin-left:38%;}
.btn1-2{width:18%; margin-top:61%;  margin-left:60%;}

.s3-step{ margin:20px auto 0;}
.step-btn1,.step-btn2{ width:30%; margin-top:73%;}
.step-btn1{ margin-left:12.5%;}
.step-btn2{ margin-left:57.6%;}
}



/***** 注意事項 *****/
.info-hr{ width:82%; margin:auto; border-top:3px solid #fff;}
.info-btn{ width:20%; margin:auto}
.info-cont {width:80%; margin:30px auto 0;}
.info-w2{ font-size:15px; letter-spacing:1px; line-height:150%; text-align:left; color:#000;}
.info-cont td { vertical-align:text-top; padding-top:3px}

@media (max-width: 767px) {
.info-cont {width:90%;}
.info-w2{ font-size:14px;line-height:140%;}
}


/***** p1 *****/
#p1,#p1-info{ background:#f7f1d1; margin-top:-50px; padding-top:50px; padding-bottom:50px; }
#p1-info{ padding-top:10px; padding-bottom:50px;}
.p1-hd{ position:absolute; width:50%; margin-top:90px; margin-left:26%;}

.p1-cont{ width:82%; margin:150px auto 30px; padding:80px 10%; border-radius:30px; background:#ffffff}
.p1-sub1,.p1-sub2{ width:68%; margin:10px auto;}
.p1-sub2{ margin-top:80px;}
.p1-sec{ width:96%; margin:30px auto; overflow:hidden;}
.p1-phone,.p1-web{ float:left; width:48%; margin-right:2%; margin-top:10px;}

.p1-sec1,.p1-sec2{ float:left; width:20%; margin-right:8%;}
.p1-sec1{ margin-left:4%;}
.p1-sec3{ float:left; width:40%;}


@media (max-width:767px) {
#p1{ margin-top:-50px; padding-top:50px; padding-bottom:20px; }
#p1-info{padding-top:10px; padding-bottom:50px;}

.p1-hd{ width:70%; margin-top:50px; margin-left:15%;}
.p1-cont{ width:92%; margin:100px auto 30px; padding:80px 20px 60px; border-radius:20px;}

.p1-sub1,.p1-sub2{ width:90%; margin:20px auto;}
.p1-sub2{ margin-top:15%;}
.p1-sec{ width:96%; margin:0 auto;}

.p1-sec1,.p1-sec2{ float:left; width:35%; margin-right:0;}
.p1-sec1{ margin-left:10%; margin-right:10%;}
.p1-sec3{ clear:both; width:70%;margin-left:15%; margin-top:5%;}

.p1-phone,.p1-web{ clear:both; width:100%; margin:0;}
.p1-web{ margin-top:50px;}
}



/***** 自訂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:55px; 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;}
.nav-bar li a {height:55px; 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:4px; margin-left:0; margin-right:22px; opacity:0.7}
.nav-txt{float:left; padding-right:28px;}


@media screen and (max-width: 768px) {
.nav-head {width:30%; height:48px; 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:3px; margin-left:0; margin-right:4px;}
.nav-txt{float:left; padding-right:8px;}
}


/***** modal彈窗 *****/
.modal{ overflow:hidden !important}
.m-box{ height:100vh; display: flex; }/** 固定居中 **/
.modal-dialog{width: 35%; margin: 20px 50% 20px; }
.modal-content{width: 100%; padding:20px 5px 30px; margin:auto; border-radius:20px ;background:#fff;}
.modal-body{width: 100%; padding:0px 50px 0px;}
.pre-scrollable{overflow-y:auto; max-height:65vh}
.info-close{ position:absolute; width:40px; right:2%; top:2%; cursor: pointer; z-index:99;}
.w2{ font-size:17px;font-weight:bold; line-height:250%;}
.w3{ font-size:14px; line-height:150%;}


@media (max-width:767px) {
.modal-dialog{ width:60%; margin: 10px auto;}
.info-close{width:30px; right:5%; top:1%;}
.modal-content{ padding:40px 10px 30px;}
.modal-body{padding:0px 15px 0px 10px}
.pre-scrollable{overflow-y:auto; max-height:75vh}
}

.ad-code{ background:#fefae5; width:100%; padding-right:2%; font-size:12px; text-align:right; }
@media (max-width:767px) {.ad-code{font-size:10px;}}