html {
    font-size: 12px !important; /*�S�j:16px �j: 14px  �з�:12px*/
}

body {
    font-family: Noto Sans TC,PingFangTC-Regular,Asap,PingFang TC,LiHei Pro,WenQuanYi Micro Hei,Microsoft JhengHei,Arial,sans-serif !important;
    /*font-family: crimson text,wcl-06,lisong pro,simsun," 蘋果儷中黑 ", " 微軟正黑體 " !important;*/
    font-weight: 400;
    color: #888;
    line-height: 2rem;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
}
.name{
    font-family: Century Gothic , Noto Sans TC,PingFangTC-Regular,Asap,PingFang TC,LiHei Pro,WenQuanYi Micro Hei,Microsoft JhengHei,Arial,sans-serif !important;
    text-transform:capitalize !important;
    font-weight: 500;

}

.ErrInp{
    border:red solid 1px !important;
    background-color:#FFF0F5 !important;
}    
/***** Loader *****/

.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden !important;
    z-index: 99999;
}

.loader-img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    background: url(../IMG/loading.gif) center center no-repeat;
}
/*-----logo img-----*/
.navbar-brand img {
    width: auto;
    max-height: 37px;/*logo與socialbook與menu 垂直置中*/
    margin-right: 5px;
}

.navbar-brand a {
    color: white;
    font-size: 1.5rem;
}
.navbar-brand a:hover {
    color: white;
}
/*/.-----logo img-----*/

/*------- 按鈕- ------------*/
.instal .btn-link-1 {
    display: inline-block;
    height: 50px;
    margin: 0 5px;
    width:50%;
    padding: 16px 40px 16px 40px;
    border: 0;
    background: #b4df5b; /* Old browsers */
    background: -moz-linear-gradient(top, #4776b4 0%, #498dab 50%, #50aca3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4776b4 0%, #498dab 50%, #50aca3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4776b4 0%, #498dab 50%, #50aca3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4776b4', endColorstr='#50aca3',GradientType=0 ); /* IE6-9 */

    /*-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;*/
    font-size: 15px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    text-transform: uppercase;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    z-index: 99999;
    box-shadow: 5px 5px 10px #000000;    
    text-shadow: rgba(0,0,0,0.5) 0.5rem 0.5rem 0.5rem;
}


.btn-link-1 {
    display: inline-block;
    height: 50px;
    margin: 0 5px;
    padding: 16px 40px 16px 40px;
    border: 0;
    background: #b4df5b; /* Old browsers */
    background: -moz-linear-gradient(top, #4776b4 0%, #498dab 50%, #50aca3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4776b4 0%, #498dab 50%, #50aca3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4776b4 0%, #498dab 50%, #50aca3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4776b4', endColorstr='#50aca3',GradientType=0 ); /* IE6-9 */

    /*-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;*/
    font-size: 15px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    text-transform: uppercase;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    z-index: 99999;
    box-shadow: 5px 5px 10px #000000;    
    text-shadow: rgba(0,0,0,0.5) 0.5rem 0.5rem 0.5rem;
}

.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active {

    background: -moz-linear-gradient(top, #ffb24b 0%, #ff8a38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#ff8a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffb24b 0%,#ff8a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffb24b 0%,#ff8a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffb24b 0%,#ff8a38 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffb24b 0%,#ff8a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#ff8a38',GradientType=0 ); /* IE6-9 */
    background: #34A494; /* Old browsers */
    outline: 0;
    opacity: 1;
    color: #fff;
}

.btn-link-2 {
    display: inline-block;
    height: 50px;
    margin: 0 5px;
    padding: 16px 40px 0 40px;
    background: #444;
    background: rgba(0, 0, 0, 0.3);
    border: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    text-transform: uppercase;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    z-index: 99999;
}

.btn-link-2:hover, .btn-link-2:focus,
.btn-link-2:active, .btn-link-2:active:focus {
    outline: 0;
    opacity: 1;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.btn-link-3 {
    display: inline-block;
    border: 0;
    background: #b4df5b; /* Old browsers */
    background: -moz-linear-gradient(top, #4776b4 0%, #498dab 50%, #50aca3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4776b4 0%, #498dab 50%, #50aca3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4776b4 0%, #498dab 50%, #50aca3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4776b4', endColorstr='#50aca3',GradientType=0 ); /* IE6-9 */
    color: #fff;
    text-transform: uppercase;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    z-index: 99999;
    box-shadow: 5px 5px 10px #000000;    
    text-shadow: rgba(0,0,0,0.5) 0.5rem 0.5rem 0.5rem;
}
.btn:hover, .btn:focus, .btn:active ,
.btn-link-3:hover, .btn-link-3:focus, .btn-link-3:active {

    background: -moz-linear-gradient(top, #ffb24b 0%, #ff8a38 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#ff8a38)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffb24b 0%,#ff8a38 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffb24b 0%,#ff8a38 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffb24b 0%,#ff8a38 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffb24b 0%,#ff8a38 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#ff8a38',GradientType=0 ); /* IE6-9 */
    background: #34A494; /* Old browsers */
    outline: 0;
    opacity: 1;
    color: #fff;
}



/*-------/ 按鈕- ------------*/

/***** Top menu *****/
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
    /*手機版選單最大高度*/
    max-height: 800px;
}

.navbar {
    margin-bottom: 0;
    background: #444;
    border: 0;
    -o-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
}

.navbar.navbar-no-bg {
    background: #444;
    background: rgba(0, 0, 0, 0.2);
}

.navbar-right {
    margin-right: 0;
}

ul.navbar-nav {
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    margin-left: 0px;
    margin-right: 0px;
    width:100%;/*--ipod /phone / ipod pro   與pc nav 的設定*/
}

.navbar-inverse ul.navbar-nav li a {
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    opacity: 0.8;
}

.navbar-inverse ul.navbar-nav li a:hover {
    color: #fff;
    opacity: 1;
    background: #fff;
    color: #444;
}

.navbar-inverse ul.navbar-nav li a:focus {
    color: #444;
    outline: 0;
    opacity: 1;
}

.navbar-text a {
    margin: 0 8px;
    font-size: 26px;
    color: #fff;
    line-height: 28px;
    opacity: 0.8;
}

.navbar-text a:hover {
    opacity: 1;
}

.navbar-toggle {
    margin-top: 13px;
    margin-bottom: 13px;
}

.nav_a_hover{
    opacity: 1 !important;
    background: #fff !important;
    color: #444 !important;    
}

/***** Top content  *****/

.inner-bg {
    padding: 5rem 0;
}
.top-content{
    background-image:url('../IMG/backgrounds/bg2.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
.top-content .text {
    color: #fff;
}

.top-content .text .logo {
    padding-bottom: 20px;
}

.top-content .text .logo a {
    display: inline-block;
    width: 130px;
    height: 120px;
    background: url(../IMG/logo.png) center center no-repeat;
}

.top-content .text h1 {
    margin-top: 25px;
    color: #fff;
}



.top-content .top-big-link {
    margin-top: 45px;
}


.carousel-indicators {
    position: absolute;
    margin-bottom: -50px;
}

/*廣告區 - 扶青免費*/
.ad{
    margin:0 auto;
    padding-bottom: 5rem;
    padding-top: 5rem;
    background-color:  #51aca0;

}
/***---/. 廣告區 - 扶青免費****/
/********提案簡報*******************/
/*分享群組 區塊*/
.share_position{
    position: relative;
}
.share_box{
    position: absolute;
    right: 4rem;
    width: 70%;
    top: 1rem;
    height: 6rem;
    background-color: #ffffff;
    padding: 1rem 1rem;
    box-shadow: 0px 3px 5px rgba(20%,20%,20%,0.5);
    /* border: 1px #cccccc solid; */
    overflow: hidden;
    z-index: 9999999;

}
.sharebutton{
    width:2rem;
}


.share_box .svg_size{
    /*控制svg 的圖大小*/
    width:30px;

    margin:0rem 3px;
    cursor: pointer;    
}
img.svg_size{
    /*控制svg 的圖大小 : 用在前台>設定*/
    width:50px;
    height:50px;
    margin:0rem 3px;
    cursor: pointer;    
}
/**----------/.提案簡報*******************/


/***** 財務總帳模組 *****/
/*財務首頁*/
.finance-container{
    background: #0a244e;
    width:100%;
    height:46rem;
    position: relative;
    top:0px;
    left:0px;
    display: block;
}
.finace-container-main{    
    width:-moz-calc(100% - 50px); 
    width:-webkit-calc(100% - 50px); 
    width: calc(100% - 50px);
    height:46rem;
    position: absolute;
    top:50px;
    left:50px;
    display: block;
    border-radius:0px;
    border-bottom-left-radius:40px;
    box-shadow: -9px 8px 40px rgba(0,0,0,.4);
    background-image:url('../IMG/backgrounds/bg_finance_content.jpg');
    background-position: inherit;
    background-repeat: no-repeat;
    background-attachment : fixed;
    z-index: 0;
}
.finace-container-main:after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: rgba(6,44,106,0.8);    
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius:0px;
    border-bottom-left-radius:40px;
}
.bg_finance_content{
    background-image:url('../IMG/backgrounds/bg2.jpg');
    background-position: inherit;
    background-repeat: no-repeat;
    background-attachment : fixed;
    background-size: cover;
}
/*--------財務曲線圖-------------*/
.curve_graph_postion_rel{
    position:relative;
    top:0px;
    left:0px;
    display: block;
}
.curve_graph_postion_abs{
    position: absolute;
    top:50px;
    right:0px;
    /*left:200px;*/
    width:auto;
    display: block;
    background-color: rgba(0,0,0,.0);
}
.curve_graph{
    position: relative;
    top:0px;
    left: 0px;
    display: block;
    width:888px;
    height:550px;
    z-index: 2;

}
.path {
    stroke-dashoffset:1940;
    stroke-dasharray:1940;
    animation: draw 5s linear infinite;
    fill-opacity: 0;
}

@keyframes draw {
    30%{fill-opacity: 1;}
    /*31%{fill-opacity: 1;}
    32%{fill-opacity: 0;}
    33%{fill-opacity: 1;}
    34%{fill-opacity: 0;}
    35%{fill-opacity: 1;}*/
    50%{stroke-dashoffset:0;}
    90%{stroke-dashoffset:0; fill-opacity: 1;}
}
/*
.ball {
 width: 10px;
 height: 10px;
 background-color: red;
 border-radius: 50%;

 offset-path: path('M36,341.5c0,0,24.5-0.5,50-40c0,0,18-11.5,49.5,13.5c0,0,23.5,24,46.5-18.5c0,0,22.5-48.5,60.5-35c0,0,19,7.5,48-46c0,0,6-22.5,36.5-15.5c0,0,18.8,1.5,40.9-35c0,0,6.6-10.5,12.1-34.5c0,0,17-21.5,31.5-13c0,0,6.5-8,23,40c0,0,17,49.5,52,50');
 offset-distance: 0%;

 animation: red-ball 2s linear alternate infinite;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
}
@keyframes red-ball {
from {
   offset-distance: 0%;
}
 to {
   offset-distance: 100%;
}
}
*/
/*------------/ 財務曲線圖--------------------*/

/*----/.財務首頁------------------*/
/***** /.財務總帳模組 *****/



/***** colud : 雲端社管模組 *****/
/*---雲端首頁 ： 圈圈---*/
.bg_cloud_content{
    background-image:url('../IMG/backgrounds/bg2.jpg');
    background-position: inherit;
    background-repeat: no-repeat;
    background-attachment : fixed;
    background-size: cover;
}
.bubble_block{
    width:100%;
    position: relative;
    display: block;
    margin-left: -3%;
    margin-top: 5rem;
}
.bb1{
    position: absolute;
    top:10px;
    left: 50%;
    border-radius: 50%; 

}
.bb2{
    position: absolute;
    top: 90px;
    left: 70%;
    border-radius: 50%; 

}
.bb3{
    position: absolute;
    top: 283px;
    left: 85%;
    border-radius: 50%;      
}
.bb4{
    position: absolute;
    top: 460px;
    left: 75%;
    border-radius: 50%;   

}
.bb5{
    position: absolute;
    top: 580px;
    left: 50%;
    border-radius: 50%;  

}
.bb6{
    position: absolute;
    top: 460px;
    left: 25%;
    border-radius: 50%;  

}
.bb7{
    position: absolute;
    top: 283px;
    left: 15%;
    border-radius: 50%;  

}
.bb8{
    position: absolute;
    top: 87px;
    left: 28%;
    border-radius: 50%;  

}
.bb9{
    margin:0 auto;
    margin-top: 20rem ;
    margin-bottom: 30rem;

}
.bb{
    border-radius: 50%; 
    padding:1rem 1rem 1.5rem 1rem !important;
    font-size: 3rem ;
}
.bubble{
    background: -webkit-linear-gradient(top right,#59a0a3,#18467d);
    background: -o-linear-gradient(top right,#59a0a3,#18467d);
    background: -moz-linear-gradient(top right,#59a0a3,#18467d);
    background: linear-gradient(to top right,#59a0a3,#18467d);
    padding:0.5rem ;

}
.bubble_gotop{
    background:rgba(0,0,0,0.3);
    padding:0.5rem ;

}
/*手機版 bb*/
.bb_phone_img_size{
    max-height:50px;
    max-width: 50px;
}
.bb10{
    position: absolute;
    top: 3px;
    left: 60%;
    border-radius: 50%; 

}
.bb11{
    position: absolute;
    top: 60px;
    left: 85%;
    border-radius: 50%; 

}
.bb12{
    position: absolute;
    top: 165px;
    left: 100%;
    border-radius: 50%;      
}
.bb13{
    position: absolute;
    top: 265px;
    left: 90%;
    border-radius: 50%;   

}
.bb14{
    position: absolute;
    top: 300px;
    left: 55%;
    border-radius: 50%;  

}
.bb15{
    position: absolute;
    top: 265px;
    left: 25%;
    border-radius: 50%;  

}
.bb16{
    position: absolute;
    top: 160px;
    left: 15%;
    border-radius: 50%;  

}
.bb17{
    position: absolute;
    top: 60px;
    left: 34%;
    border-radius: 50%;  

}
.bb18{
    margin:0 auto;
    margin-top: 15rem ;
    margin-bottom: 17rem;
}
/*---/ 彈跳圈圈---*/


.cloudgroup-container{
    background: #0a244e;
    width:100%;
    height:46rem;
    position: relative;
    top:0px;
    left:0px;
    display: block;
}
.cloudgroup_postion_rel{
    position: relative;
    top:0px;
    left: 0px;
}
.cloudgroup-container-main{
    width:-moz-calc(100% - 50px); 
    width:-webkit-calc(100% - 50px); 
    width: calc(100% - 50px);
    height:43rem;
    position: absolute;
    top:50px;
    right:50px;
    display: block;
    border-radius:0px;
    border-bottom-right-radius: 40px;
    box-shadow: 9px 8px 40px rgba(0,0,0,.4); 
    background: #19477d; /* Old browsers */
    background: -moz-linear-gradient(left, #19477d 0%, #589fa3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #19477d 0%,#589fa3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #19477d 0%,#589fa3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19477d', endColorstr='#589fa3',GradientType=1 ); /* IE6-9 */

    background-position: inherit;
    background-repeat: no-repeat;
    /*background-attachment : fixed;*/
    z-index: 0;
}
.cloudgroup-container-main:after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    /*background: rgba(24, 70, 125,0.8);*/
    /*background:#59a0a3;*/
    /* background:linear-gradient(top,#59a0a3,rgba(24, 70, 125,0.8)),url('../IMG/backgrounds/2.png') center bottom no-repeat; */
    background-image:url('../IMG/backgrounds/2.png');
    background-position: right;
    background-repeat: no-repeat;
    z-index: -1;
    width: 100%;
    height: 100%; 
    border-radius:0px;
    border-bottom-right-radius: 40px;
}
.cloudgroup_size{
    overflow: hidden;
    width:auto;
    height:450px;
}
/*----/.首頁 : 雲端社管 圈圈*/
/***** /. 雲端社管 *****/

/***** 推廣價 *****/

/*-----------字體------------*/

#price h1 {
    font-size: 4rem;
    color: #133b76;
    line-height: 10rem;
}

#price h2 {
    margin-top: 3rem;
    font-size: 2.5rem;
    color: #333333;
    line-height: 5rem; 
    /* font-style: italic;*/
}
#price h3 {
    font-size: 1.5rem;
    font-weight: normal;
    color: #333333;
    line-height: 2rem;  
    /* font-style: italic;*/
}

#price p {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    color: #333333;
    line-height: 2rem;
    text-align: left;
}
.offer_price{
    color:tomato;
    font-size: 3rem;
    font-weight: 900;

    margin-top: -12px;
    margin-bottom: -26px;

}

.content_block{
    height:110rem;
    width:auto;
    border: 1px solid #175492;
    border-radius: 10px 10px 10px 10px;
    padding-top:  10rem;
    margin: 0 auto;
    position: relative;
    color: #154595;
    background: white;
    margin-top: 1rem;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
.content_block_finance{
    height:110rem;
    width:auto;
    border: 1px solid #175492;
    border-radius: 10px 10px 10px 10px;
    padding-top:  10rem;
    margin: 0 auto;
    position: relative;
    color: #154595;
    background: white;
    margin-top: 1rem;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
.content_block_cloud{
    height:110rem;
    width:auto;
    border: 1px solid #175492;
    border-radius: 10px 10px 10px 10px;
    padding-top:  10rem;
    margin: 0 auto;
    position: relative;
    color: #154595;
    background: white;
    margin-top: 1rem;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
.content_price h3 ,.content_price h2,.content_price h1{
    color:white !important;
    font-weight: normal;
    line-height: 1rem;
    margin:0rem !important;
}

.content_price{
    position:absolute;
    bottom:0px;
    left: 0px;
    right:0px;
    padding:2rem;
    border-radius: 10px 10px 10px 10px;
    background: #154595; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #154595 0%, #009894 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #154595 0%,#009894 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #154595 0%,#009894 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#154595', endColorstr='#009894',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.price_star{
    position: absolute;
    top:0px;
    left: 48%;
    width:40px;
    height:60px;
    padding-top: 2rem;
    color:white;
    background: #154595; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #154595 0%, #009894 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #154595 0%,#009894 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #154595 0%,#009894 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#154595', endColorstr='#009894',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.price_star::after{

    content: url('../IMG/price_star.png');

}
/***** /. 推廣價 *****/



/*****  footer*****/
.footer-bottom {
    padding-top: 5rem;
    padding-bottom: 3rem;
    background: #3d3d3d;
    text-align: left;
    position: relative;

}

.footer-bottom a {
    color: #666;
    line-height: 1rem;
}

.footer-bottom a:hover, .footer-bottom a:focus {
    color: #888;
}
.go-top{
    position:fixed;
    bottom: 35px;
    right: 35px;
    z-index: 999999999;

}

.qr_code_size{
    position: absolute;
    top:-11rem; 
    width:10%;
    left: calc( 45% );
}
.qr_code_popup_size{
    width:30%;
}
/***** ���� : �X�u���W�Ҳ� *****/


/*----------------字體---------------------*/
/*finance-container*/
.finance-container h1 {
    margin-top: 10px;
    font-size: 4rem;
    line-height: 4.5rem;
    color: #fffefe;
    font-weight: lighter !important;
    text-align: left;
    text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
}

.finance-container h2 {
    margin-top: 10px;
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 300;
    color: #fff;

    /*font-style: italic;*/
}

.finance-container h3 {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    line-height: 2rem;
}
/*財務內頁*/

#finance h1 {
    font-size: 4rem;
    color: #133b76;
    line-height: 10rem;
}

#finance h2 {
    margin-top: 3rem;
    font-size: 2.5rem;
    color: #133b76;
    line-height: 5rem;    
    text-align: center;
    /* font-style: italic;*/
}
#finance h3 {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: normal;
    color: #333333;
    line-height: 2.5rem;    
    text-align: left;
    /* font-style: italic;*/
}

#finance p {
    display: block;
    font-size: 2rem;
    font-weight: 300;
    color: #333333;
    line-height: 4.5rem;
    text-align: left;
}

.img-circle{

}
/*--/.財務內頁---*/
/*--/ finance-container*/


/*線上申裝 - 報價試算*/
.flex_box{
    display: -webkit-flex;
    display: flex;
}
.flex_1{
    -webkit-flex: 1;
    flex: 1;
}
.flex_5rem{
    -webkit-flex: none;
    flex: none;
    width:5rem;
}
.flex_10{
    -webkit-flex: 10 ;
    flex: 10 ;
}
.flex_center{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.instal input[type=text],.instal input[type=tel],.instal input[type=email]{
    margin: 1rem auto;
    width:100%;
    background-color: #ffffff;
    height:3rem;   
    padding: 0 20px;
    vertical-align: middle;
    border: 2px solid #fff;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 3rem;
    color: #333333;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.instal input[type=text].trys{
    margin: 1rem auto;
    width:100%;
    background-color: #ffffff;
    height:3rem;   
    padding: 0 20px;
    vertical-align: middle;
    border: 1px solid #cccccc;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 3rem;
    display: inline-block;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.instal input[type=checkbox]{
    margin: 1rem auto;
    width:4rem;
    background-color: #ffffff;
    height:2rem;   
    padding: 0 20px;
    vertical-align: middle;
    border: 2px solid #fff;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 3rem;

    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.instal h2 span{
    font-size: 1rem;
}
.instal em{
    color:red;
}
.instal strong{
    font-size: 2.5rem;
}
.col-xs-12>[class^="col-xs"]{
    padding-right: 0;
    padding-left: 0;
    margin-bottom: -0.5rem;
}
.instal_checkinfo{    
    font-weight: bold;
    background:#e5e5e5;
    padding:0.3rem 1rem;
}

/*----/.線上申裝*/
/***** /. 付款方式 *****/
.ex_search{
    margin-top: 0rem;
    width:100%;
    margin-left: 0%; 
    padding:0.5rem 0.8rem;
}
.ex_search button {
    border: 0px;
    background: transparent;
}
.payment_input{
    border:1px solid #154595;
}
.payment_step{
    padding:1rem;
    background:white;
    border: 1px solid #cccccc;
    color: #333333;
    font-size: 1.5rem;    
    display: inline-block;
    cursor: pointer;
}
.payment_step_now{
    padding:1rem;
    background: #ff8a38;
    border: 1px solid #ff8a38;
    color: #ffffff;
    font-size: 1.5rem;
    margin-top: -0.5rem;
}
.payment_step .payment_step_no{
    font-size: 3rem;
}
.payment_step_now .payment_step_no{
    font-size: 5rem;
}
.payment_left_step_no{
    display: inline;
    width: 1em;
}
.payment_left_step_text{
    display: inline-block;
    width: calc( 100% - 7rem );
    vertical-align: middle;
}
.payment_step_header{
    position: sticky;
    top: 5rem;
    z-index: 5;
    background-image:url('../IMG/backgrounds/bg2.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.inStep .payment_step_left_no{
    color:#ff8a38 !important;
}
.inStep .payment_step_right_block{
    border:5px solid  #ff8a38;
    padding:2rem;
}
.PreviewImgBlock{
    padding: 15px;
    margin: 10px auto;
    border: #aaa 2px dashed;
    /*color: #ccc;*/
    text-align: center;
    position: relative;
    color: #777;
    background-color: #efefef;
}
.PreviewImg{
    width: 100%;
    height: 180px;
}
.PreviewImgBlock img{
    object-fit: scale-down;
    width: 100% !important;
    height: 100% !important;
    max-height: 320px !important;
    max-width: 180px !important;
}
.PreviewImgBlock .fa-times{
    position: absolute;
    top:0;
    right: 5px;
    cursor: pointer;
    font-size: 20px;
}
.PreviewImgBlock .fa-times:hover{
    color: red;
}
.mark{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,40%);
    z-index: 5;
    display: none;
}
.progress{
    position: relative;
    top: calc( 100% - 20px);
    width: 100%;
    height: 16px;
}
/***** /. 付款方式 *****/

/*支援問與答*/
/*---/.支援問與答---*/


/*使用效益*/
/*使用效益內頁*/
#benefit h1 {
    font-size: 4rem;
    color: #133b76;
    line-height: 10rem;
}

#benefit h2 {
    margin-top: 3rem;
    font-size: 2.5rem;
    color: #333333;
    line-height: 4rem; 
    /* font-style: italic;*/
}
#benefit h3 {
    margin-top: 3rem;
    font-size: 1.5rem;
    font-weight: normal;
    color: #333333;
    line-height: 2rem;  
    /* font-style: italic;*/
}

#benefit p {
    display: block;
    font-size: 2rem;
    font-weight: 300;
    color: #333333;
    line-height: 4.5rem;
    text-align: left;
}
#benefit_img h3{
    text-align: center;
}
.benefit_img{
    display:block;
}

/*/--使用效益*/
/*線上申裝*/
.instal h1 {
    font-size: 4rem;
    color: #133b76 !important;
    line-height: 10rem;
}

.instal h2 {
    margin-top: 3rem;
    font-size: 2.5rem;
    color: #333333;
    line-height: 4rem; 
    /* font-style: italic;*/
}
.instal h3 {
    font-size: 1.3rem;
    font-weight: normal;
    color: #333333;
    line-height: 2rem;  
    /* font-style: italic;*/
}

.instal p {
    display: block;
    font-size: 1.2rem;
    font-weight: 300;
    color: #333333;
    text-align: left;
}
/*---/.線上申裝*/

/*--cloudgroup-container--*/
.cloudgroup-container h1 {
    margin-top: 10px;
    font-size: 4rem;
    line-height: 4.5rem;
    color: #fffefe;
    font-weight: lighter !important;
    text-align: left;
    text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
}

.cloudgroup-container h2 {
    margin-top: 10px;
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-weight: 300;
    color: #fff;

    /*font-style: italic;*/
}

.cloudgroup-container h3 {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    line-height: 2rem;
}
/*--/ cloudgroup-container--*/




@media screen and ( max-width: 1023px) and ( min-width: 768px) {
    /*寬度1023~768時 (ipad pro 尺吋)*/
    /*財務曲線圖*/
    .curve_graph_postion_abs{
        display: none;
    }
    .qr_code_size{
        position: absolute;
        top:-4rem; 
        width:10%;
        left: calc( 45% );
    }
    /*----------------字體---------------------*/
    h1{
        font-size: 3rem;
        line-height: 4.5rem;
    }
    h2{
        font-size: 2rem;
        line-height: 2.5rem;
    }
    h3{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    /*finance-container*/
    .finance-container h1 {
        margin-top: 10px;
        font-size: 4rem;
        line-height: 4.5rem;
        color: #fffefe;
        font-weight: lighter !important;
        text-align: left;
        text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
    }

    .finance-container h2 {
        margin-top: 10px;
        font-size: 2.5rem;
        line-height: 3rem;
        font-weight: 300;
        color: #fff;

        /*font-style: italic;*/
    }

    .finance-container h3 {
        margin-top: 10px;
        font-size: 1.5rem;
        font-weight: 300;
        color: #fff;
        line-height: 2rem;
    }
    /*財務內頁*/
    #finance h1 {
        font-size: 3rem;
        color: #133b76;
        line-height: 4.5rem;
    }

    #finance h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #133b76;
        line-height: 2.5rem;    
        text-align: center;
        /* font-style: italic;*/
    }
    #finance h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;    
        text-align: left;
        /* font-style: italic;*/
    }

    #finance p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }
    /*--/.財務內頁---*/
    /*--/ finance-container*/

    /*使用效益*/
    #benefit h1 {
        font-size: 3rem;
        color: #133b76;
        line-height: 4.5rem;
    }
    #benefit h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #333333;
        line-height: 2.5rem; 
        /* font-style: italic;*/
    }
    #benefit h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;    
        text-align: left;
        /* font-style: italic;*/
    }

    #benefit p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }
    /*/--使用效益*/

    /*--cloudgroup-container--*/
    .cloudgroup-container h1 {
        margin-top: 10px;
        font-size: 4rem;
        line-height: 4.5rem;
        color: #fffefe;
        font-weight: lighter !important;
        text-align: left;
        text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
    }
    .cloudgroup-container h2 {
        margin-top: 10px;
        font-size: 2.5rem;
        line-height: 3rem;
        font-weight: 300;
        color: #fff;

        /*font-style: italic;*/
    }
    .cloudgroup-container h3 {
        margin-top: 10px;
        font-size: 1.5rem;
        font-weight: 300;
        color: #fff;
        line-height: 2rem;
    }
    /*--/ cloudgroup-container--*/
    /*推廣價 字體*/
    .offer_price{
        color:tomato;
        font-size: 2rem;
        margin-bottom: 1rem;
        font-weight: normal;

    }

}

@media screen and ( max-width: 767px) and ( min-width: 577px) {
    /*寬度767~577時 (ipad 尺吋)*/
    /*財務曲線圖*/
    .curve_graph_postion_abs{
        display: none;
    }
    .qr_code_size{
        position: absolute;
        top:-4rem; 
        width:20%;
        left: calc( 40% );
    }
    /*----------------字體---------------------*/
    h1{
        font-size: 3rem;
        line-height: 4.5rem;
    }
    h2{
        font-size: 2rem;
        line-height: 2.5rem;
    }
    h3{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    /*finance-container*/
    .finance-container h1 {
        margin-top: 10px;
        font-size: 4rem;
        line-height: 4.5rem;
        color: #fffefe;
        font-weight: lighter !important;
        text-align: left;
        text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
    }

    .finance-container h2 {
        margin-top: 10px;
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-weight: 300;
        color: #fff;

        /*font-style: italic;*/
    }

    .finance-container h3 {
        margin-top: 10px;
        font-size: 1.5rem;
        font-weight: 300;
        color: #fff;
        line-height: 2rem;
    }
    /*財務內頁*/
    #finance h1 {
        font-size: 3rem;
        color: #133b76;
        line-height: 4.5rem;
    }

    #finance h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #133b76;
        line-height: 2.5rem;    
        text-align: center;
        /* font-style: italic;*/
    }
    #finance h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;    
        text-align: left;
        /* font-style: italic;*/
    }

    #finance p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }
    /*--/.財務內頁---*/
    /*--/ finance-container*/
    /*使用效益*/
    #benefit h1 {
        font-size: 3rem;
        font-weight: bolder;
        color: #133b76;
        line-height: 4.5rem;
    }
    #benefit h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #333333;
        line-height: 2.5rem;   
        /* font-style: italic;*/
    }
    #benefit h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;    
        text-align: left;
        /* font-style: italic;*/
    }
    #benefit p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }
    /*/--使用效益*/

    /*--cloudgroup-container--*/
    .cloudgroup-container h1 {
        margin-top: 10px;
        font-size: 4rem;
        line-height: 4.5rem;
        color: #fffefe;
        font-weight: lighter !important;
        text-align: left;
        text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
    }
    .cloudgroup-container h2 {
        margin-top: 10px;
        font-size: 2.5rem;
        line-height: 3rem;
        font-weight: 300;
        color: #fff;

        /*font-style: italic;*/
    }
    .cloudgroup-container h3 {
        margin-top: 10px;
        font-size: 1.5rem;
        font-weight: 300;
        color: #fff;
        line-height: 2rem;
    }
    /*--/ cloudgroup-container--*/
    /*推廣價 字體*/
    .offer_price{
        color:tomato;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        font-weight: normal;

    }

}



@media screen and ( max-width: 576px) {
    /*寬度小於576px時 (手機尺吋)*/

    /*財務曲線圖*/
    .curve_graph_postion_abs{
        display: none;
    }
    .bubble{
        font-size: 1.5rem;        
    }
    .finance-container{
        height:40rem;
    }
    .finace-container-main{
        height:40rem;
    }
    .qr_code_size{
        position: absolute;
        top:-4rem; 
        width:20%;
        left: calc( 40% );
    }
    /*----------------字體---------------------*/
    h1{
        font-size: 1.9rem;
        line-height: 2.5rem;
    }
    h2{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h3{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    /*finance-container*/
    .finance-container h1 {
        margin-top: 10px;
        font-size: 2rem;
        line-height: 2.5rem;
        font-weight: lighter !important;
        text-align: left;
        text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
    }
    .finance-container h2 {
        margin-top: 10px;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 300;
        color: #fff;

        /*font-style: italic;*/
    }
    .finance-container h3 {
        margin-top: 10px;
        font-size: 1rem;
        font-weight: 300;
        color: #fff;
        line-height: 1.5rem;
    }
    /*財務內頁*/
    #finance h1 {
        font-size: 3rem;
        color: #133b76;
        line-height: 4.5rem;
    }
    #finance h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #133b76;
        line-height: 2.5rem;    
        text-align: center;
        /* font-style: italic;*/
    }
    #finance h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;    
        text-align: left;
        /* font-style: italic;*/
    }
    #finance p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }
    /*--/.財務內頁---*/
    /*--/ finance-container*/

    /*使用效益*/
    #benefit h1 {
        font-size: 3rem;
        font-weight: bolder;
        color: #133b76;
        line-height: 4.5rem;
    }
    #benefit h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #333333;
        line-height: 2.5rem;  
        /* font-style: italic;*/
    }
    #benefit h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;  
        /* font-style: italic;*/
    }
    #benefit p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }
    /*/--使用效益*/

    /*--cloudgroup-container--*/
    .cloudgroup-container h1 {
        margin-top: 10px;
        font-size: 2rem;
        line-height: 2.5rem;
        color: #fffefe;
        font-weight: lighter !important;
        text-align: left;
        text-shadow: rgba(0,0,0,0.3) 0.5rem 0.5rem 0.5rem;
    }
    .cloudgroup-container h2 {
        margin-top: 10px;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 300;
        color: #fff;

        /*font-style: italic;*/
    }
    .cloudgroup-container h3 {
        margin-top: 10px;
        font-size: 1rem;
        font-weight: 300;
        color: #fff;
        line-height: 1.5rem;
    }
    /*--/ cloudgroup-container--*/

    /*********推廣價******************/
    .content_block_finance{
        height:75rem;
    }
    .content_block_cloud{
        height:80rem;
    }
    .offer_price{
        color:tomato;
        font-size: 2.5rem;
        margin-bottom: 1rem;
        font-weight: normal;

    }
    #price h1 {
        font-size: 3rem;
        color: #133b76;
        line-height: 4.5rem;
    }
    #price h2 {
        margin-top: 3rem;
        font-size: 2rem;
        color: #333333;
        line-height: 2.5rem;  
        /* font-style: italic;*/
    }
    #price h3 {
        margin-top: 3rem;
        font-size: 1.5rem;
        font-weight: normal;
        color: #333333;
        line-height: 2rem;  
        /* font-style: italic;*/
    }
    #price p {
        display: block;
        font-size: 1rem;
        font-weight: 300;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
    }


}

@media (max-width: 1025px) {
    /*修正bootstrap 漢堡選單第二行*/
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav>li {
        float: none !important;
    }
    .navbar-nav>ul {
        text-align: center;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

/*--共用--*/

.bg_system_blue_green{
    background: #154595; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #154595 0%, #009894 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #154595 0%,#009894 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #154595 0%,#009894 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#154595', endColorstr='#009894',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.hr1{
    width:70%;
    border: 0px;
    border-top: 2px #cccccc solid;
}
.hr2{
    width: 100%;
    border: 0px;
    border-top: 2px #cccccc solid;
}

.font_size_h1{
    font-size: 3rem;
    color: #133b76;
    line-height: 4.5rem;
}
.font_size_h2{
    margin-top: 3rem;
    font-size: 2rem;
    color: #333333;
    line-height: 2.5rem;  
}
.font_size_h3{
    margin-top: 3rem;
    font-size: 1.5rem;
    font-weight: normal;
    color: #333333;
    line-height: 2rem;  
}
.ws_rwd_gap_u_d{
    margin-top: 5rem;
    margin-bottom: 8rem;
}
.ws_margin_l_1{
    margin-left: 4rem;
}
#finance li{
    list-style-image:url('../IMG/item.png');
}
.inline{
    display: inline-block;
    text-align: left !important;
}
/*--字體
h1{
    font-size: 4rem;
    line-height: 4.5rem;
}
h2{
    font-size: 2.5rem;
    line-height: 3rem;
}
h3{
    font-size: 1.5rem;
    line-height: 2rem;
}
--*/
/*--圖示--*/
.icon_q::before{
    content: '\f059';
    font-size: 1.5rem;
    color: #0454ad;
    font-family: FontAwesome;
}
.icon_checkon::before {
    content: '\f046';
    font-size: 2.5rem;
    color: #999;
    font-family: FontAwesome;
}
.icon_checkon_blue_dark::before {
    content: '\f046';
    font-size: 2.5rem;
    color: #0c254e;
    font-family: FontAwesome;
}

.icon_star::before {
    content: '\f005';
    font-size: 1rem;
    font-family: FontAwesome;
}
.icon_download::before {
    content: '\f019';
    font-size: 1rem;
    font-family: FontAwesome;
}
.icon_share::before {
    content: '\f1e0';
    font-size: 1rem;
    font-family: FontAwesome;
}


/*--/圖示--*/
select{
    width:100%;
    color:#333333;
    margin: 1rem auto;
    height: 3rem;
    padding: 0 20px;
    vertical-align: middle;
    border: 2px solid #fff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 3rem;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

input{
    width:100%;
    background-color: #ffffff;
    height:3rem;   
    padding: 0 20px;
    vertical-align: middle;
    border: 2px solid #fff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 3rem;

    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;

}

placeholder{
    color:#ffffff;
}
.system_img_height{
    height:20rem;
    margin-bottom: 3rem;
}
.height{
    height:10rem;
}
.text_right{
    text-align:right;
}
.text_left{
    text-align: left;
}
.text_center{
    text-align: center;
}
h3 .text_center{
    text-align: center;
}
.font_box{
    padding: 1rem 0rem;
    width: 100%;    
}
.border_d_gray{    
    border-bottom: 1px #a2a2a2 solid;
    width:90%;
}
.bg_blue_dark{
    background-color: #0c254e;
}
.bg_gray{
    background: #f0f0f0;
}
.bg_white{
    background-color: white;
}
.bg_orang{
    background: #ff8a38;
}
.border_r_10px{
    border-radius: 10px;
}
.border_d_gray1:after{
    content: "";
    border-bottom: 1px #cccccc;
}
.font_italic{
    font-style: italic;
}
.border_orang{
    border:5px solid  #ff8a38;
}

.left{
    float:left;
}
.row_width_set{
    /*bootstrap3 修正row的寬預設多出15px*/
    width:calc(100% - 15px);
}
.color_orang,.instal .color_orang{
    color:#ff8a38 !important;
}
.color_green,.instal .color_green{
    color:#009894 !important;
}
.color_purple,.instal .color_purple{
    color:#3a00b7 !important;
}
.color_blue_dark{
    color:#0c254e;
}
.color_blue_0454ad{
    color:#0454ad;
}
.color_white{
    color:#ffffff;
}
.color_red {
    color: #bc1101;
}
.color_pink{
    color:#ff029f
}

.color_block {
    color: #333333;
}

.color_green {
    color: forestgreen;
}
.color_gray{
    color:#cccccc;
}

.width_100{
    width:100%;
}
.max_width_80 {
    max-width: 80%;
}
.width_75 {
    width: 75%;
}
.width_24 {
    width: 24%;
}

.width_15rem{
    width: 15rem;
}
.width_3rem{
    width: 3rem;
}
.margin_u_d_3{
    margin-top: 3rem;
    margin-bottom: 3rem;

}
.margin_d_3{
    margin-bottom: 3rem;
}
.margin_l_3{
    margin-left: 3rem;
}
.margin_r_1{
    margin-right: 1rem;
}
.margin_l_r_0{
    margin-left: 0px;
    margin-right: 0px;
}
.margin_l_r_1{
    margin: 0 1rem;
}
.margin_l_r_3{
    margin: 0 3rem;
}
.margin_l_r_5{
    margin: 0 5rem;
}
.margin_l_r_15{
    margin: 0 15rem;
}
.margin_auto {
    margin: 0 auto;
}
.margin_u_d_3{
    margin:3rem 0;
}
.margin_u_0 {
    margin-top: 0rem;
}
.margin_u_2{
    margin-top: 2rem;
}
.margin_u_5 {
    margin-top: 5rem;
}
.margin_u_10 {
    margin-top: 10rem;
}
.margin_u_d_5_10 {
    margin-top: 5rem;
    margin-bottom: 10rem;
}
.margin_l_1{
    margin-left: 1rem;
}
.padding_gap_2{
    padding:2rem;
}
.padding_l_3{
    padding-left: 3rem;
}
.padding_gap_u_d_1{
    padding: 1rem 0rem;
}
.padding_gap_u_d_015{
    padding: 1.5rem 0rem;
}
.padding_gap_u_d_4{
    padding: 4rem 0rem;
}
.padding_gap_10{
    padding:10rem;
}
.padding_16px_40px_50px_40px{
    padding: 16px 40px 50px 40px;
}
strong {
    font-weight: 600;
}

.font_size_5{
    font-size: 5rem;   
}
.font_size_3{
    font-size: 3rem;
}
.font_size_1{
    font-size: 1rem;
}
.font_size_015{
    font-size: 1.5rem;
}
.font_size_7{
    font-size: 7rem;   
}

a, a:hover, a:focus {
    color: #34a494;
    text-decoration: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}


img {
    max-width: 100%;
}
#film a:hover{
    color: #175492 !important;
}
#film a:active{
    color: #3e6eb5 !important;
}
.film_box{
    position: relative;

}
.film_more{
    position: absolute;
    height:10rem;
    width:10rem;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    content:" 更多影片 ";
}
/*影片介紹*/
.video{
    margin-bottom: 10rem;
    margin-top: 5rem;
    width:90%;
}
/*---/.影片介紹*/
/*youtube ifrom 嵌入html*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed , .video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-container div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    justify-content: center;
    color: white;
    padding-top: 30%;
}
/*---/.youtube ifrom 嵌入html*/


::-moz-selection {
    background: #ff8a38;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #ff8a38;
    color: #fff;
    text-shadow: none;
}

/*--/共用--*/


.LoadingSpinner {
    margin-top: 0px;
    margin-left: -40px;
    position: absolute;
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid #0460b5;
    border-radius: 50%;
    animation: spin .75s infinite linear;
}
.LoadingSpinner::before {
    transform: rotate(120deg);
}
.LoadingSpinner::after {
    transform: rotate(240deg);
}
.LoadingSpinner::after,.LoadingSpinner::before {
    left: -2px;
    top: -2px;
    display: none;
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit;
}
.LoadingSpinner,.LoadingSpinner::after,.LoadingSpinner::before {
    display: inline-block;
    border-color: transparent;
    border-top-color: #0460b5;
    animation-duration: 1.2s;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#LoadingMark{
    display:table; 
    text-align:center; 
    font-weight:700; 
    font-size:30px; 
    left:0; top:0;
    position:fixed; 
    z-index: 9999999;
    color: #0460B5; 
    width: 100%; 
    height: 100%; 
    background-color:rgba(255,255,255,.9);
    transition: opacity .3s ease;
}
#LoadingMark>div{
    display:table-cell;
    vertical-align:middle;
    padding-bottom:100px;
}


nav ul{
    width: 100%;
}
.top-pc-content{
    display: block;
}
.top-phone-content{
    display: none;
}
.benefit_img{
    display: block;
}
.ws_pc{
    display:block;
}
.ws_phone{
    display:none;
}
.ws_rwd_gap_l_r_benefit{
    margin-left: 1rem;
    margin-right: 1rem;
}
.ws_margin_l_1{
    margin-left: 0rem;
}
.bb9{
    margin-top: 15rem;
    margin-bottom: 15rem;
}
.ws_index_image{
    height:50rem;    
}
.ws_finance_main{
    margin: 0 3rem;
}
@media screen and ( max-width: 769px){
    .ws_index_image{
        height:50rem !important;
    }
    .img_f{
        width:70% !important;
    }
    .bb9{
        margin-top: 15rem !important;
        margin-bottom: 30rem !important;
    }
    .bubble_block{
        margin-left:-5rem !important;
    }
    .ws_rwd_gap_l_r{
        margin-left: 1rem !important;
        margin-right: 0rem !important;
    }
    .further{
        padding: 1rem !important;
        padding-top: 10rem !important;
    }
    .ws_benefit_rwd_gap_u_d{
        margin-top: 5rem !important;
        margin-bottom: 2rem !important;
    }
    .ws_margin_l_1{
        margin-left:0rem !important;
    }
}
@media screen and ( max-width: 577px){
    .top-pc-content{
        display: none !important;
    }
    .top-phone-content{
        display: block !important;
    }
    .img_f{
        width: 65% !important;
    }
    .ws_pc{
        display: none !important;
    }
    .ws_phone{
        display:block !important;
    }
    .ws_rwd_gap_u_d{
        margin-top: 3rem !important;
        margin-bottom: 15rem !important;
    }
    .ws_rwd_gap_l_r_benefit{
        margin-left: 0rem !important;
        margin-right: 0rem !important;
    }
    .benefit_img{
        display: none !important;
    }
    .ws_margin_l_1{
        margin-left: 0rem !important;
    }
    nav ul{
        margin-right: 0;
    }
    .ws_index_image{
        height:20rem;
    }
    .ws_finance_main{
        margin: 0 1rem;
    }
}
@media screen and ( min-width: 770px){
    .img_f{
        width: 60% !important;
    }
    .ws_rwd_gap_l_r{
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }
    .further{
        padding: 3rem !important;
        padding-top: 10rem !important;
    }
    .ws_benefit_rwd_gap_u_d{
        margin-top: 5rem !important;
        margin-bottom: 4rem !important;
    }
}
@media screen and ( min-width: 1200px){
    .img_f{
        width: 50% !important;
    }
    .ws_rwd_gap_u_d{
        margin-top: 5rem !important;
        margin-bottom: 20rem !important;
    }
    .ws_rwd_gap_l_r{
        margin-left: 20rem !important;
        margin-right: 20rem !important;
    }
    .ws_rwd_gap_l_r_benefit{
        margin-left: 15rem !important;
        margin-right: 15rem !important;
    }
    .further{
        padding: 10rem !important;
        padding-top: 10rem !important;
    }
    .ws_benefit_rwd_gap_u_d{
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }
    nav ul{
        width: auto !important;
        margin-right: 0;
    }
}



/* Checkmark style starts */
@-moz-keyframes dothabottomcheck {
    0% {
        height: 0;
    }

    100% {
        height: 50px;
    }
}
@-webkit-keyframes dothabottomcheck {
    0% {
        height: 0;
    }

    100% {
        height: 50%;
    }
}
@keyframes dothabottomcheck {
    0% {
        height: 0;
    }

    100% {
        height: 50%;
    }
}
@keyframes dothatopcheck {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: 120%;
    }
}
@-webkit-keyframes dothatopcheck {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: 120%;
    }
}
@-moz-keyframes dothatopcheck {
    0% {
        height: 0;
    }

    50% {
        height: 0;
    }

    100% {
        height: 120%;
    }
}

.check-box {
    height: 3rem;
    width: 3rem;
    background-color: transparent;
    border: 2px solid #34b93d;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
}
.check-box::before, .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: 20%;
    background-color: #34b93d;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: ' ';
    -webkit-transition: opacity ease .5;
    -moz-transition: opacity ease .5;
    transition: opacity ease .5;
}
.check-box::before {
    top: 72%;
    left: 41%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    height: 120%;
    -moz-animation: dothatopcheck 0.4s ease 0s forwards;
    -o-animation: dothatopcheck 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
    animation: dothatopcheck 0.4s ease 0s forwards;
}
.check-box::after {
    top: 37%;
    left: 5%;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    height: 50%;
    -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
    animation: dothabottomcheck 0.2s ease 0s forwards;
}

.middle{
    /*水平垂直置中*/
    text-align: center;
    letter-spacing: -1em;
}
.middle:after,.middle:before{
    content: ' ';
    height: 100%;
    width: 0;
    background: none;
    display:inline-block;
    vertical-align: middle; 
}
.middle > *{
    display:inline-block;
    vertical-align: middle;  
    letter-spacing: initial;
}