@charset "UTF-8";
/* --reset------------ */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* --reset------------ */
/* --共用區------------------------------------------------- */
/*bootatrap*/
@font-face { font-family: 'Glyphicons Halflings'; src: url("../fonts/glyphicons-halflings-regular.eot"); src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
@font-face { font-family: "webfont"; src: url("../fonts/webfont.eot"); src: url("../fonts/webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/webfont.woff") format("woff"), url("../fonts/webfont.ttf") format("truetype"), url("../fonts/webfont.svg#webfont") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "NotoSans"; src: local("NotoSans"), local("NotoSans-Regular"), url("../fonts/NotoSans-Regular.ttf"); }
body { font: normal 100% Open Sans, 微軟正黑體, NotoSans, Helvetica, Arial, sans-serif; }
*{-webkit-box-sizing:border-box; /* ===針對舊版=== */ -moz-box-sizing:border-box;/* ===針對火狐=== */box-sizing:border-box;}
body {background-color:#FCFCFC;background-image:url(../img/bg.png);background-position:right 0;background-repeat:no-repeat;color:#222222;} 
a{-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;transition: all 0.2s ease-out;text-decoration: none;}
a:hover{text-decoration:none;color:#459c5d;}
.text-left{text-align: left;}.text-right{text-align:right;}
.text-list-1 {margin-left: 25px;}
.text-list-2 {margin-left: 55px;text-indent: -26px;}
.m-bottom50 {margin-bottom: 50px !important;}
.text-green{color:#459c5d; }
.text-size-s{font-size:14px; }
/*back-to-top*/
.back-to-top i{ font-size:18px; color: #fff;top:0px; }
.back-to-top{ position: fixed;right:34px;bottom:98px;z-index: 333;width:30px;height:30px;
    line-height: 20px;padding-top: 6px;border-radius:50px;background-color:rgba(208,208,208, 0.5);
    text-align:center;cursor: pointer;}
.back-to-top:hover{background-color:rgba(208,208,208, 0.9);}
.back-to-top:active{background-color:#3d678c;}
/*立即試算*/
.fixed-cycle-bt{font-size:24px;position: fixed;right:15px;bottom:15px;z-index: 333;width:80px;height:80px;
    border-radius:50px;background-color:#c79634;
    text-align: center;cursor: pointer;padding-top:12px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out;}
.fixed-cycle-bt i{display:block;}
.fixed-cycle-bt img{width:26px;height:26px;}
.fixed-cycle-bt span{line-height:30px;color: #fff;display:block; }
.fixed-cycle-bt:hover{background-color:#f15a24;bottom:18px;width:95px;height:95px;font-size:30px;}
.fixed-cycle-bt:active{background-color:#826442;}
.fixed-cycle-qabt{font-size:24px;position: fixed;right:15px;bottom:115px;z-index: 333;width:80px;height:80px;
    border-radius:50px;background-color:#c79634;
    text-align: center;cursor: pointer;padding-top:12px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out;}
.fixed-cycle-qabt i{display:block;}
.fixed-cycle-qabt img{width:26px;height:26px;}
.fixed-cycle-qabt span{line-height:30px;color: #fff;display:block; }
.fixed-cycle-qabt:hover{background-color:#f15a24;bottom:118px;width:95px;height:95px;font-size:30px;}
.fixed-cycle-qabt:active{background-color:#826442;}
#fixed-logo{position:fixed;top:15px;left:15px;z-index:9999;display:block;transition:all .2s ease;}
#fixed-logo img{width:120px;height:auto;display:block;}
#fixed-e-pay-logo{position:fixed;top:15px;left:150px;z-index:9999;display:block;transition:all .2s ease;}
#fixed-e-pay-logo img{width:120px !important;height:auto !important;display:block;}


/*.fixed-cycle-bt{animation: fixed-cycle-bt 2s infinite;}
@keyframes fixed-cycle-bt {
    0% {box-shadow: 0 0px 0px #ffffff;}
    50% {box-shadow: 0 0px 20px #ffcb7f;}
    100% {box-shadow: 0 0px 0px #ffffff;}
}
*/
/*popup公版*/
.remodal-box{display:none; }
.remodal-box{text-align: center; overflow: hidden;float: left;}
.remodal-box .popup-overlay-2 {float: left; width: 100%; height: 100%; position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); overflow: hidden; }
.remodal-box .pop-box { padding:10px;width:70%; float: left; background-color: #fff; border-radius: 5px; display: block; margin: 0 auto; 
    position: fixed; top: 12%; left:40%; margin-left: -25%; z-index: 10001; 
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); }
.remodal-box .popup-title-box b{padding-left:30px;}
.remodal-box .popup-title-box a{float:right;padding-right:10px;}
.remodal-box .popup-title-box a.close-bt{color: #86939c;cursor: pointer;} 
.remodal-box .popup-title-box a.close-bt:hover{color: #525e67;}
.remodal-box-s .pop-box{width:30%;left:60%;}
.popup-title-box {text-align: center;margin-bottom:10px;border-bottom:solid 2px #a1d9d4;line-height:40px;font-size:18px; display: block; color: #525e67; }
.popup-content{width: 100%;max-height:350px;overflow:auto;float: left;padding:10px;}
.popup-title { line-height:22px;font-size:18px; display: block; color: #525e67; }
.popup-text { line-height:30px;font-size:16px; display: block; color: #525e67; }
.popup-btn-box{width: 100%; float: left;padding:15px 10px 20px 10px;}

.btn-popup-main {width: 100%;line-height:45px;height:45px;float: left;color: #ffffff;
 background-color: #F9A62D;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f15a24+0,f7931e+100 */
background: #f15a24; /* Old browsers */
background: -moz-linear-gradient(left,  #f15a24 0%, #f7931e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f15a24 0%,#f7931e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f15a24 0%,#f7931e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f15a24', endColorstr='#f7931e',GradientType=1 ); /* IE6-9 */
}
.btn-popup-main:hover { background-color: #fb9500; color: #ffffff; }
.btn-popup-main:active { background-color: #c36310; color: #ffffff; }

.btn-popup-other{height:45px; line-height:45px;float: left; color: #F9A62D; border: 2px solid #F9A62D; background-color: #ffffff; }
.btn-popup-other:hover { background-color:#fff7eb; border: 2px solid #e0901b; color: #e0901b; }
.btn-popup-other:active { background-color: #ffe0b2; border: 2px solid #e0901b; color: #e0901b; }
.button {-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; 
    transition: all 0.1s ease-out; user-select: none; /* Standard syntax */ 
    text-align: center; border-radius:50px; box-sizing: border-box; display: inline-block; cursor: 
    pointer; margin-top: 0; position: relative;  width: 100%;font-size:18px; }
.button:active { top: 3px; }
.bt-next {float: right;width: 60%;}
.bt-center {margin: 0 auto !important;float: none !important;}

/* ------共用動態區------*/
.fade-in-1 {position: relative;opacity: 0.0;animation: port1 0.6s 1 forwards;-webkit-animation: port1 0.6s 1 forwards;}
@keyframes port1 {
  0%{transform: translateY(25%);opacity: 0.0;}
  100%{transform: translateY(0%);opacity: 1.0;}
}
.fade-in-2 {position: relative;opacity: 0.0;animation: port2 0.8s 1 forwards;-webkit-animation: port2 0.8s 1 forwards;}
@keyframes port2 {
  0%{transform: translateY(25%);opacity: 0.0;}
  100%{transform: translateY(0%);opacity: 1.0;}
}
.fade-in-2 {position: relative;opacity: 0.0;animation: port3 1s 1 forwards;-webkit-animation: port3 1s 1 forwards;}
@keyframes port3 {
  0%{transform: translateY(25%);opacity: 0.0;}
  100%{transform: translateY(0%);opacity: 1.0;}
}
.fade-open {position: relative;opacity: 0.0;animation: portimg 1s 1 forwards;-webkit-animation: portimg 1s 1 forwards;}
@keyframes portimg {
  0%{transform:rotateY(90deg) translateY(25%);opacity: 0.0;}
  100%{transform:rotateY(0deg) translateY(0%);opacity: 1.0;}
}
.fade-open-1{position: relative;opacity: 0.0;animation: open 1s 1 forwards;-webkit-animation: open 1s 1 forwards;}
@keyframes open {
  0%{opacity: 0.0;transform: translate(-50%, 0%);}
  100%{opacity: 1.0;transform: translate(-50%, -50%);}
}

/* --電腦版型------------------------------------------------- */
/*---------------------- navbar ----------------------*/
h1{display:none}
.header-fcb {background-color: #FFFFFF; width:100%; height:55px; padding: 5px 15px 0 15px; position:fixed; top:0px; z-index:500;box-shadow: 0 0 10px rgb(91 123 136 / 41%);}
.header-fcb .nav-bar { margin: 0px auto; padding: 0px;max-width:1200px;margin-top:2px; }
.header-fcb {-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
.header-fcb .box-L{float: left;}
.header-fcb .box-L .logo { width: auto; height:42px;width:200px;float: left;background:url(../img/logo-firstbank.png) no-repeat right 0px;background-size:200px 42px}
.header-fcb .box-L .logo1 { width: auto; height:42px;width:108px;float: left;background:url(../img/logo1-e.png) no-repeat right 0px;background-size:108px 42px}
.header-fcb .box-L .logo2 { width: auto; height:42px;width:108px;float: left;background:url(../img/logo2.png) no-repeat right 0px;background-size:108px 42px}
.header-fcb .box-L span {float:left;letter-spacing:1px;font:bold 16px 微軟正黑體; text-align:left; color:#667680;line-height:30px;height:30px;margin-top:6px;}
.header-fcb .box-L i {float:left;width:2px;height:20px;background-color:#dddddd;margin:0 8px;margin-top:11px;}
.header-fcb .box-R{float:right;line-height:25px;width:auto;margin-top:8px;}
.header-fcb .box-R a{padding:0px 8px 0px 8px;display:inline-block;color:#667680;
  font-size:16px;font-weight:bold;line-height:18px;border-right:2px solid #eeeeee;}
.header-fcb .box-R a:last-child{border-right:none;}
.header-fcb .box-R a:hover{color:#459c5d;}
/*手機navbar-開合選單按鈕*/
.nav-bt{display:none;}
.nav-bt a{float:right;display:block;width:40px;height:40px;padding:5px 0 0 4px;border-radius:5px;border:1px solid #dddddd;}
.nav-bt a:active{background-color:#eeeeee;}
.nav-bt a svg{width:30px;height:30px;color:#333333;}
/*手機navbar-開合選單*/
.nav-phone-menu{display:none;position:fixed;top:0;z-index:888;width:100%; /* 寬高 100% 整個蓋住 */height:100%;background-color:#e5e8e8;}
.nav-phone-menu b.box{float:left;width:100%;display:block;margin-top:10px;}
.nav-phone-menu .box a{background-color:rgba(255,255,255,0.5);float:left;width:100%;display:block;line-height:60px;text-align:center;font-size:18px;
    color:#0E385E;border-bottom:1px solid #c2dacd;font-weight:bold;}
.nav-phone-menu a:last-child{border-bottom:none;}
.nav-phone-menu a:active{background-color:#d5e8df;}
.nav-close-bt{display:block;padding:10px 15px 15px 0;}
.nav-close-bt a{font-size:18px;color:#ffffff;border-radius:50px;background-color:#179067;width:45px;height:45px;float:right;text-align:center;line-height:45px;}
.nav-close-bt a:active{background-color:#4b8070;}

/*-------------內容區開始-------------*/
/*-------------第一區-------------*/
.div-1-area{overflow:hidden;width:100%;height:720px;float:left;display:block;}
.div-1-area .bg{position:relative;overflow:hidden;margin-top:55px;height:660px;width:150%;border-radius:0 0 100% 100%;margin-left:-25%;background-color:#e0edf3;float: left;display:block;}
.div-1-area .bg{
background: #a1d9d4; /* Old browsers */
background: -moz-linear-gradient(top,  #effaff 0%, #a1d9d4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #effaff 0%,#a1d9d4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #effaff 0%,#a1d9d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#effaff', endColorstr='#a1d9d4',GradientType=0 ); /* IE6-9 */
}
/*--第一區圓形-------------*/
.div-1-area .title-img{z-index:20;width:55%;min-width:280px;
    max-width:440px;display:block;position:absolute;top:127px;left:50%;transform: translate(-50%, -50%);}
.div-1-area .a-img-1{z-index:10;width:30%;max-width:300px;display:block;position:absolute;top:410px;left:50%;transform: translate(-50%, -50%);}
.div-1-area .a-img-1{animation: a-img-flyL 6s infinite;}
@keyframes a-img-flyL {
    0% {top:400px;}
    50% {top:360px;left:49.6%;}
    100% {top:400px;}
}
.div-1-area .a-img-2{z-index:9;width:20%;max-width:110px;display:block;position:absolute;top:330px;left:40%;transform: translate(-50%, -50%);}

.div-1-area .a-img-3{z-index:8;width:20%;max-width:358px;min-width:200px;display:block;position:absolute;top:480px;left:40%;transform: translate(-80%, -50%);}
.div-1-area .a-img-3{animation: a-img-cloud-a 10s infinite;}
@keyframes a-img-cloud-a {
    0% {}
    50% {left:38%;}
    100% {}
}
.div-1-area .circle{z-index:7;width:820px;position:absolute;height:820px;top:820px;left:50%;transform: translate(-50%, -50%);display:block;background-color:#4b8070;border-radius:100%;}
.div-1-area .circle{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffc9ae+0,ffffdc+13 */
background: #ffc9ae; /* Old browsers */
background: -moz-linear-gradient(top,  #ffc9ae 0%, #ffffdc 13%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffc9ae 0%,#ffffdc 13%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffc9ae 0%,#ffffdc 13%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc9ae', endColorstr='#ffffdc',GradientType=0 ); /* IE6-9 */
}
.div-1-area .a-img-4{z-index:6;width:20%;max-width:378px;min-width:200px;display:block;position:absolute;top:420px;left:60%;transform: translate(-27%, -50%);}
.div-1-area .a-img-4{animation: a-img-cloud-b 10s infinite;}
@keyframes a-img-cloud-b {
    0% {}
    50% {left:61%;}
    100% {}
}
.div-1-area .a-img-5{z-index:5;width:20%;max-width:378px;min-width:200px;display:block;position:absolute;top:220px;left:50%;transform: translate(-50%, -50%);}
.div-1-area .a-img-5{animation: a-img-cloud-c 10s infinite;}
@keyframes a-img-cloud-c {
    0% {}
    50% {left:52%;}
    100% {}
}
.div-1-area .a-img-6{z-index:4;width:20%;max-width:120px;min-width:30px;display:block;position:absolute;top:302px;left:38%;transform: translate(-50%, -50%);}
.div-1-area .a-img-7-star{z-index:5;width:20%;max-width:15px;min-width:5px;top:220px;left:29%;transform: translate(-50%, -50%);display:block;position:absolute;}
.div-1-area .a-img-8-star{z-index:5;width:20%;max-width:20px;min-width:10px;top:300px;left:68%;transform: translate(-50%, -50%);display:block;position:absolute;}
.div-1-area .a-img-9-star{z-index:5;width:20%;max-width:15px;min-width:5px;top:180px;left:35%;transform: translate(-50%, -50%);display:block;position:absolute;}

/*.div-1-area .a-img-7-star,.a-img-8-star,.a-img-9-star{animation: a-img-star 4s infinite;}*/
@keyframes a-img-star {
    0% {opacity: 1.0;}
    50% {opacity: 0.0;}
    100% {opacity: 1.0;}
}
.div-1-area .bt-down{z-index:499;color:#ffffff;background-color:#ffb010;border-radius:30px;width:40px;height:40px;line-height:40px;text-align:center;position:absolute;top:580px;left:50%;transform: translate(-50%, -50%);}
.div-1-area .bt-down:hover{background-color:#ef9615;}
.div-1-area .bt-down:active{background-color:#f3a200;}
.div-1-area .bt-down{animation: bt-down 0.6s 2;}
@keyframes bt-down {
    0%{top:580px;}
    50% {top:585px;}
    100% {top:580px;}
}
/*-------------第二區-------------*/
.div-2-area{width:100%;float:left;display:block;position: relative;padding-bottom:50px;}
.div-2-area .title-img{z-index:20;width:30%;min-width:280px;max-width:400px;display:block;position:absolute;top:70px;left:50%;transform: translate(-50%, -50%);}
.content-box{width:800px;display:flex;flex-wrap:wrap;margin:0 auto;margin-top:130px;}
.box-1{position:relative;width:50%;display:block;padding:10px;}
.box-1 .area{z-index:3;position:relative;border-radius:15px;overflow:hidden;width:100%;float:left;display:block;background-color:#ffffff;border-radius:15px;box-shadow:0 0 10px rgb(91 123 136 / 41%);}
.box-1 .area{-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; 
    transition: all 0.1s ease-out;}
.box-1 .area:hover{transform: translateY(-15px);}
.box-1 .area .A1{height:157px;width:100%;float:left;}
.box-1 .area .A1{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,fff2b9+100 */
background-color:#FFF2B9;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #fff2b9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffffff 0%,#fff2b9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffffff 0%,#fff2b9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fff2b9',GradientType=1 ); /* IE6-9 */

}
.box-1 .area .A1{float:left;width:100%;}
.box-1 .area .A1 .note{position:absolute;left:30px;top:0px;border-radius:0 0 20px 20px;color:#ffffff;font-size:18px;font-weight:bold;text-align:center;line-height:35px;height:40px;width:40px;display:block;float:left;background-color:#f1c817;}
.box-1 .area .A1 .title{position:absolute;left:72px;top:55px;text-align:center;display:block;}
.box-1 .area .A1 .title b{color:#0e385e;font-size:30px;font-weight:bold;display:block;}
.box-1 .area .A1 .title i{color:#806d5c;font-size:17px;display:block;font-weight:bold;}
.box-1 .area .A1 .img{position:absolute;right:20px;top:60px;width:168px;height:125px;}
.box-1 .area .A1 .img img{width:168px;}

.box-1 .area .A2{float:left;width:100%;padding-top: 34px;}
.box-1 .area .A2 ul{padding:5px;float:left;}
.box-1 .area .A2 li{padding-left:54px;background-color:#ffffff;line-height:36px;width:100%;display:block;float:left;}
.box-1 .area .A2 li span{font-size:17px;letter-spacing:1px;}
.box-1 .area .A2 li .img{padding-top:9px;float: left;}
.box-1 .area .A2 li img{width:24px;height:24px;} 
.box-1 .area .A2 li .title{color:#009245;padding-left:5px;font-weight:bold;} 
.box-1 .area .A2 li .text{color:#0E385E;}
.box-1 .area .A2 li .text i{color:#826442;font-size:13px;font-weight:bold;} 
.box-1 .area .A2 li .text b{color:#F15A24;font-size:28px;padding:3px;font-weight:bold;} 
.button-box{float:left;width:100%;padding:22px 0 30px 0;cursor:pointer;}
.button-box a{font-weight:bold;max-width:190px;width:70%;border-radius:30px;margin:0 auto;display:block;background-color:#f15a24;line-height:50px;color:#ffffff;font-size:17px;text-align:center;}
.button-box a{
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f15a24+0,f7931e+100 */
background: #f15a24; /* Old browsers */
background: -moz-linear-gradient(left,  #f15a24 0%, #f7931e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f15a24 0%,#f7931e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f15a24 0%,#f7931e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f15a24', endColorstr='#f7931e',GradientType=1 ); /* IE6-9 */
}
.box-1 .area:hover .A2 .button-box a{max-width:230px;font-size:18px;}
.button-box a:hover{max-width:270px;font-size:18px;}
/*背景圖片*/
.B-bg-1-leo{position:absolute;top: 213px;left: -120px;z-index:2;}
.B-bg-1-leo img{width:200px;height:200px;}
.B-bg-1-leo-right{position:absolute;top: 150px;right: -120px;z-index:2;}
.B-bg-1-leo-right img{width:200px;height:200px;}
.B-bg-2-cloud{position:absolute;top: 100px;left: -260px;z-index:1;}
.B-bg-2-cloud img{width:310px;height:135px;}
.B-bg-3-cloud{position:absolute;top:150px;right:-190px;z-index:1;}
.B-bg-3-cloud img{width:300px;}
/*表單區塊*/
.box-2{float:left;width:100%;padding:8px;}
.form-L{box-shadow: 0 0 10px rgb(91 123 136 / 41%);border-radius:12px;overflow:hidden;float:left;width:100%;}
.form-L .box{float:left;width:33.3333%;background-color:#ffffff;}
.form-L .box .title{font-size:19px;text-align:center;color:#ffffff;line-height:60px;float:left;width:100%;}
.form-L .box ul{float:left;width:100%;}
.form-L .box ul li{padding:12px;float:left;width:100%;text-align:center;line-height:25px;font-size:15px;border-bottom:1px solid #d4e6e5;}
.form-L .box ul li:last-child{border-bottom:none;}
.form-L .box ul li i{padding-left:10px;float: left;color:#45879c;font-weight:bold;}
.form-L .box ul li b{color:#0e385e;}
.form-L .box ul li:hover b{font-size:18px;color:#F15A24;font-weight:bold;-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; 
    transition: all 0.1s ease-out;}
.form-L .box.a1 .title{background-color:#0C7552;}
.form-L .box.a2 .title{background-color:#39B54A;}
.form-L .box.a3 .title{background-color:#a7753c;}
.form-L .box.a1 ul{background-color:#f9fffe;}
.form-L .box.a2 ul{background-color:#f0fbf3;}
.form-L .box.a3 ul{background-color:#fffcf9;}
.form-L .box.a2 ul li i{display:none;}
.form-L .box.a3 ul li i{display:none;}
.button-box.popup-bt a{max-width:260px;}
.button-box.popup-bt a:hover{max-width:320px;font-size:18px;}

.box-1-image-area{
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 0 10px rgba(0,0,0,.15);
    text-align:center;
}

/* 上方文字 */
.box-1-image-top-area{
    padding:25px 20px;
    font-size:32px;
    font-weight:bold;
    color:#0e385e;
    text-align:center;

    background:linear-gradient(
        to right,
        #ffffff 0%,
        #fff2b9 100%
    );
}

/* 主圖 */
.box-1-image-main-image{
    padding:30px 20px;
    background:#ffffff;
}

.box-1-image-main-image img{
    width:100%;
    max-width:280px;
    display:block;
    margin:0 auto;
}

/* 下方文字 */
.box-1-image-bottom-area{
    padding:25px 20px 35px;

    font-size:18px;
    line-height:1.8;
    color:#555555;

    background:#fafafa;
}

/*-------------第三區-------------*/
.div-3-area{width:100%;float:left;display:block;position: relative;padding-bottom:50px;}
.title-3-area{width:100%;float:left;overflow:hidden;height:230px;}
.div-3-area .title-3-area .img-parachute{z-index:20;width:20%;max-width:130px;min-width:112px;display:block;position:absolute;top:62px;left:55%;transform: translate(-50%, -50%);}
.div-3-area .title-3-area .img-cloud{z-index:19;width:760px;display:block;position:absolute;top:70px;left:50%;transform: translate(-50%, -50%);}
.div-3-area .title-3-area .title-img{z-index:20;width:20%;min-width:280px;max-width:300px;display:block;position:absolute;top:170px;left:50%;transform: translate(-50%, -50%);}
.div-3-area .title-3-area .img-parachute{z-index:20;width:20%;max-width:130px;min-width:112px;display:block;position:absolute;top:62px;left:55%;transform: translate(-50%, -50%);}
.div-3-area .title-3-area .img-parachute{animation: c-img-parachute 2s infinite;}
@keyframes c-img-parachute {
    0% {top:62px;}
    50% {top:55px;}
    100% {top:62px;}
}

/*申請步驟*/
.step-box{width:100%;float:left;display:block;margin-bottom:50px;}
.step-box ul{max-width:600px;width:90%;margin:0 auto;display:block;}
.step-box ul li{width:20%;float:left;position:relative;}
.step-box ul li .img-1{width:100%;float:left;padding-top:10px;cursor:pointer;}
.step-box ul li .img-1 img{width:140px;margin:0 auto;display:block;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out;}
.step-box ul li .text{width:100%;float:left;display:block;text-align:center;}
.step-box ul li .text-more{width:100%;float:left;display:block;text-align:center;}
.step-box ul li .text b{font-size:25px;color:#f77148;font-weight:bold;padding-right:3px;}
.step-box ul li .text i{font-size:16px;}
.step-box ul li .img-2{position:absolute;top:60px;right:-10px;}
.step-box ul li .img-2 img{width:25px;}
.step-box ul li:nth-child(5) .img-2{display:none;}
.step-box ul li .img-2 {animation: img-2 1s infinite;-webkit-animation: img-2 1s infinite;}

.step-box ul:hover li .img-1 img{filter:contrast(80%);}
.step-box ul li:hover .img-1 img{filter:contrast(100%);}
.step-box ul li:hover .text i{font-size:17px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out;}
.step-box ul li:hover .text-more i{font-size:24px;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out;}
@keyframes img-2 {
  0% {}
  50% {right:-13px;}
  100% {}
}
/*-------------第四區-------------*/
.footer{padding-top:50px;font-size:18px;line-height:30px;color:#ffffff;
  text-align:center;height:300px;background-color:#00573D;width:100%;float:left;}
.footer b{display:block;}
.footer b span{font-size:14px;color:#ffffff;padding:1px 6px;border-radius:50px;margin-right:5px;}
.footer b a{font-size:14px;margin-left:5px;color:#ffffff;border-radius:50px;padding:5px 15px;line-height:40px;background-color:#f7931e;}
.footer b i{font-weight:bold;color:#ffffff;}
.footer b a{display:none;}
.footer div{font-size:14px;color:#c1ece9;}

@media screen and ( max-width:1196px) {
    .B-bg-3-cloud{display:none;}
}

/*------------------------------------平板------------------------------------------------- */
@media screen and ( max-width:888px) {
    /*-------------第一區-------------*/
    .div-1-area{height:620px;}
    .div-1-area .bg{height:540px;}
    .remodal-s{width:100%;}
    .header-fcb {height:55px;}
    .header-fcb .box-L .logo {}
    /*.header-fcb .box-L span{display:none;}
    .header-fcb .box-L i{display:none;}*/
    .header-fcb .box-R{display:none;}
    .nav-bt{display:block;}
    .div-1-area .title-img{}
    .div-1-area .a-img-2{left:34%;}
}
/*------------------------------------平板+手機過度------------------------------------------------- */
@media screen and ( max-width:900px) {
    /*-------------第二區-------------*/
    .content-box {width: 650px;}
    .box-1 .area .A2 li {padding-left: 15px;}
    .box-1 .area .A2 li span {font-size: 15px;}
    .box-1 .area .A1 .img img{width:117px;}
    .box-1 .area .A1 .img {right: -50px;top:102px;}
    .remodal-box .pop-box {width: 90%;left: 30%;}
}
@media screen and ( max-width:700px) {
    /*-------------第三區-------------*/
    .div-3-area .title-3-area .img-cloud{width:100%;}
    .step-box ul{max-width:300px;}
    .step-box ul li{width:50%;padding-bottom:10px;}
    .step-box ul li:nth-child(2) .img-2{display:none;}
}
/*------------------------------------手機------------------------------------------------- */
@media screen and ( max-width:670px) {
    /*-------------第一區-------------*/
    .div-1-bg{height:600px;}
    .div-1-bg .area{height:550px;}
    .div-1-area .circle{width:380px;height:380px;top:610px;}
    .div-1-area .title-img{top:85px;}
    
    .div-1-area .a-img-2{display:none;}
    .div-1-area .a-img-6{left:30%;}

    .div-1-area .bt-down{top: 472px;}
    .div-1-area .bt-down{animation: bt-down 0.6s 2;}
    @keyframes bt-down {
        0%{top:472px;}
        50% {top:468px;}
        100% {top:472px;}
    }
    .div-1-area .a-img-1{width:250px;top: 300px;}
    .div-1-area .a-img-1{animation: a-img-flyL 6s infinite;}
    @keyframes a-img-flyL {
          0% {top:300px;}
          50% {top:280px;left:49.6%;}
          100% {top:300px;}
      }
    /*-------------第二區-------------*/
    .box-1 .area .A2 {padding-top: 20px;}
    .div-2-area .title-img{top: 20px;}
    .content-box {width: 100%;margin-top: 77px}
    .box-1{width:100%;}
    .box-1 .area .A1 .title {top: 82px;left: 50%;transform: translate(-50%, -50%);}
    .box-1 .area .A1 .img {right: 0;}
    .box-1 .area .A2 li span {font-size: 16px;}
    .box-1 .area .A1 .img img {width: 168px;}
    .box-1 .area .A2 li {padding-left:0;}
    .box-1.box-for-1 .area .A2 ul {width: 225px;margin: 0 auto; float: none;}
    .box-1.box-for-2 .area .A2 ul {width: 225px;margin: 0 auto; float: none;}
    .box-1.box-for-3 .area .A2 ul {width: 225px;margin: 0 auto; float: none;}
    .box-1.box-for-4 .area .A2 ul {width: 225px;margin: 0 auto; float: none;}
    .box-1 .area .A2 .button-box a{max-width:unset;font-size:18px;}
    .box-1 .area:hover .A2 .button-box a{max-width:unset;}
    .box-1 .area .A2 li .img {display:none;}
    .box-1 .area .A2 li .title {color: #ffffff;font-size:14px;background-color:#3d678c;padding:2px 8px;border-radius:20px;}
    .box-1 .area .A1 .img img {width:130px;}
    .box-1 .area .A1 .img {right:-20px;top:85px;}
    .div-2-area {padding: 0 15px;}
    .box-1 .area .A2 li .text b {font-size: 22px;}
    .box-1 .area .A1 .title b {font-size: 27px;}
    .box-1 .area .A1 .title {top: 69px;}
    .box-1 .area .A1 .title i {font-size: 15px;}
    .box-1 .area .A1 {height: 130px;}
    /*背景圖片*/
    .B-bg-1-leo{display:none;}
    .B-bg-2-cloud{display:none;}
    .B-bg-3-cloud{display:none;}
    /*表格*/
    .form-L .box ul{padding:0px;}
    .form-L .box ul li{height:80px;padding:0px;}
    .form-L .box ul li i{float: left;display:block;width:100%;background-color:#e2f3f2;padding:0px;}
    .form-L .box.a1 ul li i{display:block;color:#e2f3f2; }
    .form-L .box.a2 ul li i{display:block;}
    .form-L .box.a3 ul li i{display:block;color:#e2f3f2;}
    .form-L .box ul li b{width:100%;float: left;padding:5px;line-height: normal;}
    /*-------------第三區-------------*/
    .step-box ul{width:100%;}
    /*-------------第四區-------------*/
    .footer b a{display: inline;}
}
/*------------------------------------小手機------------------------------------------------- */
@media screen and ( max-width:400px) {
    /*-------------第一區-------------*/
    .div-1-area .a-img-1 {width: 240px;}
    /*-------------第二區-------------*/
    .div-2-area {padding: 0 0px;}
    .box-1 .area .A2 li .text {display:block;}
    .box-1.box-for-1 .area .A2 ul {width:100%;}
    .box-1.box-for-2 .area .A2 ul {width:100%;}
    .box-1.box-for-3 .area .A2 ul {width:100%;}
    .box-1.box-for-4 .area .A2 ul {width:100%;}
    .box-1 .area .A2 li{text-align: center;}
    .box-1 .area .A2 li .title {padding: 2px 20px;}
    .box-1 .area .A2 li {line-height: 26px;padding-bottom:7px;}
    .box-1 .area .A1 .img img {width: 105px;}
    .box-1 .area .A1 .img {right: -60px;}
    .box-1 .area .A2 li span {letter-spacing:0px;}
    .box-1 .area .A2 .button-box{padding:10px 0 20px 0;}
    .box-1 .area .A1 {height: 135px;}
    .box-1 .area .A1 .title {top: 73px;}
    .form-L .box ul li{height:90px;}

}