@charset "UTF-8";
/* CSS Document */
/* 排版樣式 */
.static       {position: static;}
.absolute     {position: absolute;}
.relative     {position: relative;}
.block        {display: block         !important;}
.inline       {display: inline-block  !important;}
.div_center   {margin:      0 auto    !important;}
.margin_0     {margin:           0    !important;}
.padding_0    {padding:          0    !important;}
.padding_w5   {padding:     0  5px    !important;}
.padding_w10  {padding:     0 10px    !important;}
.padding_w20  {padding:     0 20px    !important;}
.padding_5    {padding:        5px    !important;}
.padding_10   {padding:       10px    !important;}
.padding_15   {padding:       15px    !important;}
.padding_20   {padding:       20px    !important;}

/* 上間距 */
.margin_t0    {margin-top:       0    !important;}
.margin_t5    {margin-top:     5px    !important;}
.margin_t10   {margin-top:    10px    !important;}
.margin_t15   {margin-top:    15px    !important;}
.margin_t20   {margin-top:    20px    !important;}
.margin_t30   {margin-top:    30px    !important;}
.margin_t40   {margin-top:    40px    !important;}
.margin_t50   {margin-top:    50px    !important;}
.margin_t60   {margin-top:    60px    !important;}
.margin_t70   {margin-top:    70px    !important;}
.margin_t80   {margin-top:    80px    !important;}
.margin_t90   {margin-top:    90px    !important;}
.margin_t100  {margin-top:    100px   !important;}

/* 右間距 */
.margin_r0    {margin-right:   0px    !important;}
.margin_r5    {margin-right:   5px    !important;}
.margin_r10   {margin-right:  10px    !important;}
.margin_r15   {margin-right:  15px    !important;}
.margin_r20   {margin-right:  20px    !important;}
.margin_r25   {margin-right:  25px    !important;}
.margin_r30   {margin-right:  30px    !important;}
.margin_r35   {margin-right:  35px    !important;}
.margin_r40   {margin-right:  40px    !important;}
.margin_r45   {margin-right:  45px    !important;}
.margin_r50   {margin-right:  50px    !important;}
.margin_r60   {margin-right:  60px    !important;}
.margin_r70   {margin-right:  70px    !important;}
.margin_r80   {margin-right:  80px    !important;}
.margin_r100  {margin-right: 100px    !important;}
.margin_r110  {margin-right: 110px    !important;}
.margin_r120  {margin-right: 120px    !important;}

/* 下間距 */
.margin_b5    {margin-bottom:  5px    !important;}
.margin_b10   {margin-bottom: 10px    !important;}
.margin_b15   {margin-bottom: 15px    !important;}
.margin_b20   {margin-bottom: 20px    !important;}
.margin_b30   {margin-bottom: 30px    !important;}
.margin_b40   {margin-bottom: 40px    !important;}
.margin_b50   {margin-bottom: 50px    !important;}
.margin_b70   {margin-bottom: 70px    !important;}

/* 左間距 */
.margin_l0    {margin-left:      0    !important;}
.margin_l5    {margin-left:    5px    !important;}
.margin_l10   {margin-left:   10px    !important;}
.margin_l15   {margin-left:   15px    !important;}
.margin_l20   {margin-left:   20px    !important;}
.margin_l25   {margin-left:   25px    !important;}
.margin_l30   {margin-left:   30px    !important;}
.margin_l35   {margin-left:   35px    !important;}
.margin_l40   {margin-left:   40px    !important;}
.margin_l45   {margin-left:   45px    !important;}
.margin_l50   {margin-left:   50px    !important;}
.margin_l60   {margin-left:   60px    !important;}
.margin_l80   {margin-left:   80px    !important;}
.margin_l100  {margin-left:  100px    !important;}
.margin_l110  {margin-left:  110px    !important;}
.margin_l120  {margin-left:  120px    !important;}
.margin_l150  {margin-left:  150px    !important;}

/* 對齊 */
.middle       {vertical-align: middle !important;}
.align_r      {text-align: right      !important;}
.align_l      {text-align: left       !important;}
.align_c      {text-align: center     !important;}
.float_r      {float: right           !important;}
.float_l      {float: left            !important;}

/* 寬度% */
.width_10     {width: 10%             !important;}
.width_15     {width: 15%             !important;}
.width_20     {width: 20%             !important;}
.width_25     {width: 25%             !important;}
.width_30     {width: 30%             !important;}
.width_33     {width: 33%             !important;}
.width_35     {width: 35%             !important;}
.width_40     {width: 40%             !important;}
.width_45     {width: 45%             !important;}
.width_50     {width: 50%             !important;}
.width_55     {width: 55%             !important;}
.width_60     {width: 60%             !important;}
.width_65     {width: 65%             !important;}
.width_70     {width: 70%             !important;}
.width_75     {width: 75%             !important;}
.width_80     {width: 80%             !important;}
.width_85     {width: 85%             !important;}
.width_90     {width: 90%             !important;}
.width_95     {width: 95%             !important;}
.width_100    {width: 100%            !important;}
.width200p    {width:200px            !important;}
/* 寬度px */
.w120         {width:120px            !important;}
.w150         {width:120px            !important;}
.w200         {width:200px            !important;}
.w250         {width:250px            !important;}

/* 字體 */
.text_small  {font-size:  13px !important;}
.text_normal {font-size:  14px !important;}
.text_middle {font-size:  16px !important;}
.text_large  {font-size:  18px !important;}
.text_xl     {font-size:  22px !important;}
.text_bold   {font-weight:bold !important;}

.head_banner {width: 100%;height: 250px;background-size: cover;border-bottom: 1px solid #eee;background-image:url(../images/head-voice-bg.jpg); background-position:50% 0; background-repeat:no-repeat;}

/* options
======================================================================================== */
.options h1 {font-size: 24px;color: #2383D0;text-align: center;margin-top: 30px;}
.options .word {color: #69686C;font-size: 15px;font-weight: bold;text-align: center;}
.options .menu_op {margin: 25px auto;width: 100%;padding-left: 5px;}
.personal,.small-company{background: none repeat scroll 0 0 #F9F9F9;border: 1px solid #ccc;float: left;margin: 25px -1px 0px;padding: 55px 20px 10px;position: relative;width: 460px; height:500px;}
input.login_in{ width:220px;}
.personal .title, .small-company .title{width: 95px;height: 100px;position: absolute;top: 40px; left:90px; text-indent: -9999px;}
.personal .title {background: rgba(0, 0, 0, 0) url(../images/options_title.png) no-repeat scroll 0 0;}
.small-company .title {background: rgba(0, 0, 0, 0) url(../images/options_title.png) no-repeat scroll -115px 0;}
.large-company .title {background: rgba(0, 0, 0, 0) url(../images/options_title.png) no-repeat scroll -140px 0;}
.title-detail {position: absolute;top: 37px;left: 200px; width: 190px;}
.title-detail h3 {font-size: 36px; color: #333;}
.container .menu_op ul {border-top: 1px dashed #717071; margin-top: 110px;}
.container .menu_op ul li {font-size: 14px;padding: 12px 0;}
.container .menu_op ul li i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  background-repeat: no-repeat;}
i.icon_options {background: rgba(0, 0, 0, 0) url(../images/options_icon.png);}
.container .menu_op ul li a {color:#2383D0;display: block;font-size: 14px; margin-left: 22px;}

.container .menu_op ul.opmember li {text-indent: -28px;
    margin-left: 28px;}

.op {color:#2383D0;}
.sent{ margin: 20px 0 0 0;}
.marginTop20 {margin-top: 20px;}
.marginBot80 {margin-bottom: 80px;}
.pos{ position:absolute; bottom:50px; left:110px;}

/* hire 人才招募
======================================================================================== */
.hire .head_bg {margin-top: -6px;padding-top: 30px;background: url(../images/header_bg_hire.jpg) repeat-x 0 30px #FFF;background-size: inherit;}
.hire .head_banner {height: 200px;border-bottom: 1px solid #BBB;background-image: url(../images/header_hire.jpg);background-repeat: no-repeat;background-size: inherit;}
.hire .content {float: left;width: 680px;}
.hire .aside {float: right;width: 300px;padding-top: 20px;}
.hire .aside img {margin-bottom: 30px;}
.hire h2, h3, h4 {font-weight: normal;text-shadow: none;}
.hire h2 {margin: 40px 0 10px 0;font-size: 2em;font-weight: normal;}
.hire h3 {padding: 20px 0;font-size: 20px;border-top: 1px solid #CCC;color: #227BBB;}
.hire h3:first-child {border: none;}
.hire h3.mail_hr {padding-left: 20px;font-size: 18px;}
.hire h4 {margin-left: 20px;margin-bottom: 15px;font-size: 18px;}
.hire ul {margin-left: 20px;margin-bottom: 20px;}
.hire ol {margin-left: 50px;margin-bottom: 20px;}
.hire ol li {list-style: decimal;}
.hire li {font-size: 16px;}
.hire p.highlight {margin: 0 20px 20px;font-size: 1.3em;color: #F00;}

/* about_合作銀行and商家
======================================================================================== */
.partner_inner { padding-top: 2em 0 1em 0.5em; margin:2em 0 1em 0; overflow:hidden;}
.partner_inner ul li { float: left; width: 160px; background-color:#FFF; border:1px solid #CCC; padding:5px 8px; margin:10px 8px;}
.partner_inner ul li img {text-align: center; margin:0em 0 0.5em 0 ;}
.partner_inner ul li p{ margin-left:10px;}
.partner_inner ul li.store1 { float: left; width: 25%; text-align: left; border:none;margin:0; padding:0;}
.partner_inner ul .store1 ul li { width:100%; float:none; border:none; margin:0; padding:0;}
.partner_inner ul .store1 ul li h3 {  color: #227bbb;}
.partner_inner ul .store1 ul .final { padding-bottom: 2em;}
.part .sidebar{ position:fixed; width:180px; top:200px;}
.part .contents{ margin: 0 0 0 210px;}
.banklist ul li { float: left; width: 160px; height:180px; background-color:#FFF; border:1px solid #CCC; padding:5px 8px; margin:10px 8px;}
.banklist ul li img {text-align: center; margin:0em 0 0.5em 0 ; border-bottom:1px solid #CCC;}

.tbw-partner {
  width: 100%;
  box-sizing: border-box;
}
.tbw-partner * {
  box-sizing: border-box;
}
.tbw-partner .tpn-tabs {
  width: 100%;
  height: 42px;
  padding: 3px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tbw-partner .tpn-tabs li {
  width: 20%;
  height: 100%;
  padding: 10px 10px;
  border-radius: 13px;
  background: transparent;
  color: #555;
  font-size: 16px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  border: none;
  margin: 0;
  transition: .3s;
  cursor: pointer;
}
.tbw-partner.tpn-payway .tpn-tabs li {
  width: 25%;
}
.tbw-partner .tpn-tabs li {
  width: 20%;
  height: 100%;
  padding: 10px 10px;
  border-radius: 13px;
  background: transparent;
  color: #555;
  font-size: 16px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  border: none;
  margin: 0;
  transition: .3s;
  cursor: pointer;
}
.tbw-partner .tpn-tabs li + li {
  margin-left: 4px;
}
.tbw-partner .tpn-tabs li:hover,
.tbw-partner .tpn-tabs li.active {
  background: #FFF;
  color: #333;
  font-weight: bold;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10);
}
.tbw-partner .tpn-tbc {
  width: 100%;
}
.tbw-partner .tpn-title {
  color: #555;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.tbw-partner .tpn-list {
  width: 100%;
  padding: 0 39px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.tbw-partner .tpn-list li {
  float: none;
  width: 160px;
  height: 60px;
  border: 1px solid #D9D9D9;
  background: #FFF;
  margin: 0 24px 32px 0;
  padding: 0;
  overflow: hidden;
}
.tbw-partner .tpn-list li:nth-child(4n) {
  margin-right: 0;
}
.tbw-partner .tpn-list li a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tbw-partner .tpn-list li img {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
}

/* about
----------------------------------------------------------------------------- */
.about .main{ min-height:600px;}
.about .sidebar{ float:left; position: static;}
.about .contents { float:left; margin:0;}
.about .about-table td{ padding:10px 5px; text-align:justify; font-size:14px; line-height:20px; vertical-align:top;}
.about .about-table td.year{ color:#F30; font-size:20px;}
/* 選單 Sidebar 
----------------------------------------------------------------------------- */
.menu ul li:last-child{border-bottom: 1px solid #33373d;}
.menu > li > a.active {border-bottom: 1px solid #1a638f;}
.menu > li > ul li:hover a, .menu > li > ul li.current:hover, .menu > li > ul li:hover a span, .menu > li > ul li:hover a:before {color:#227BBB;}
.about_inner{ margin:1.5em 0 0;}
.about_inner p{ font-size:1.15em; line-height:1.8em; margin:0.5em 0 0.5em 0.8em;}
.about_inner h3{ color:#227BBB; font-size:1.3em;}
.about_inner h4{ color:#227BBB; font-size:1.2em; margin-left:1.4em;}
.about_inner .no3{ width: 625px; margin:0.5em auto 1.5em auto;}
.about_inner ul.company li{ list-style:none;}
.about_inner ul{ margin:0.5em 0 0.5em 1em;}
.about_inner ul li{ margin:0.3em 0 0.3em 1.5em;list-style: decimal; font-size:1.15em;}
.about_inner ul li a {font-size: 1em;color: #227BBB;}
.about_inner ul li a:hover {text-decoration: none;}
.about_inner ul ul li{ list-style: disc; font-size:1em; margin-left:0.5em;}
.about_inner ul ul ul li{ list-style: lower-alpha; font-size:1em; margin-left:0.5em;}
p.link_old{ float:right; margin:-30px 0px 0 0;}
p.link_old a{ background-image:url(../images/icon_1.png); background-position: 70px -1px; background-repeat:no-repeat; padding-right:20px;}
p.link_old a:hover{ text-decoration:underline;}
p.date{ padding-top:1em;}
p.date + p.link_old{ margin-top:-65px;}
.conditions_box {margin:1.5em 0;}
.conditions_box tr td{ border:1px solid #CCC; padding:0.8em 1em; font-size:1.10em;}
.conditions_box tr td.hd{ background-color:#EBF5FF;}
.computing p{color:#FF7676; font-size:1em; margin:0.5em;}
.conditions_box tr td.hd_blue{ background-color:#227BBB; color:#FFF;}
.center tr td{ text-align:center;}
span.note{ color:#F05555; vertical-align:super; margin-left:3px;}
.tipBox {margin: 1em auto 2em auto;width: 90%;}
.tipBox ul li {line-height: 1.8em; list-style:none;}
.tipBox ul li span.red {width: 25px;display: inline-block;}
.tipBox ul li li {list-style: decimal outside;margin-left: 2.5em;}

/*專業證書
================================================================================================*/
.line_1{clear:both; border:1px dashed #CCC; padding: 1em 2em;margin-bottom: 2em; overflow: hidden;}
.img_s a .boxs_img {border: 8px solid #DFDFDF;float: left;}
.about_inner div .title_1 h3 {margin-left: 10px;float: left;}

/*銀行揭露事項
=================================================================================*/
.banks .about_inner .title {border: 1px solid #CCC; padding:0.5em; margin:1em 0; width:200px;}
h3.title .logo {background-image: url(../images/atm_bank.png);  background-repeat: no-repeat;background-position: -67px -8px;  height: 29px;width: 31px; float:left;}
h3.title .logo1 {background-position: -278px -8px;}
h3.title .logo2 {background-position: -100px -8px;}
h3.title .logo3 {background-position: -242px -47px;}
h3.title .megabank {background-position: -246px -46px;}
.computing {border: 1px solid #CCC;  padding: 10px 30px 10px 30px;margin: 10px auto 20px auto;height: auto;  width: 30%;  border-radius: 8px;}

/* ebill繳費平台
======================================================================================== */
.pay_nav ul.menu > li > a{ background-image:none;}
ul.pay{ overflow:hidden; padding-top:1em;}
ul.pay li{width:215px;height:180px; border:1px solid #CCC;margin:1.2em;float:left; padding:0.5em;}
.pay li a{display:block;width:215px;height:180px;}
.pay li span{display:block;padding:10px 0;margin-bottom:15px;text-align:center;font-size:16px;color:#FFF; background-color:#5399E3;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.pay li img{display:block;margin:auto;}
.pay_box{margin:20px auto;padding:20px 0 20px 120px;}
.paybtn_box{width:500px;margin:auto;}
.pay_step{height:80px;}
.pay_step li{float:left;}
.pay_step li select{margin-right:20px;}
.pay_step li .stbor{width:200px;}
.bor_pay2{margin-left:130px!important;}
.bor_pay2 label{ width:130px;}
.bor_pay5 label{padding-left:20px;width:100px;}
.bor_r{ margin-left:130px;}
.bor_pay3{width:20px!important; margin-left:6px!important;}
.bor_pay4{width:800px;text-align:center;}
.paybg{width:95%;margin:1em auto 2em auto;padding:1em; text-align:center;}
.paybg li{ padding:10px 10px 20px;}
.paybg li.payok{border-bottom:dashed #999 1px;font-size:30px;color:#F00;}
.paybg li.payok img{ padding-top:0px; width:71px; height:60px; margin-bottom:-15px;}
.payxok_box{width:350px;margin:0 auto;}

/*record*/
.recordbg{border:1px dashed #CCC;padding:1em 2em;margin:10px 0;}
.recordbtn_box{margin:10px 60px;}
.bortxt{text-align:center;}
.recordbg h3{font-size:18px;color:#227BBB;}
.btn_record{width:100px; margin:auto;}

/*about security*/
.security-content .sub-title-h5 { font-size: 15px; color: #111; margin-top: 5px; }
.security-content p {margin-left: 31px;}

.bankk_st { background: #d9d7d7; padding: 10px 4px 2px 4px; }


/* 法定公開揭露事項 */
.legal-item-inner h3 { color: #111; }
.legali-box { width: 100%; position: relative; margin: 10px 0 15px; }
.legali-btn { height: 36px; line-height: 36px; padding: 0 15px; margin: 0 15px 15px 0; text-align: center; color: white; font-size: 15px; background: #555; display: inline-block; cursor: pointer; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; }
.legali-btn:hover { color: white; background: #222; }


/*--歷史沿革--*/
.company-history-box {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  margin-top: 6px;
  padding-bottom: 32px;
}
.company-history-box:before {
  content: '';
  display: block;
  border-right: 1px solid #e8e8e8;
  position: relative;
  left: 10px;
  top: 13px;
  margin-right: 40px;
}
.company-history-box .chb-list {
  width: calc(100% - 41px);
  position: relative;
  padding-bottom: 22px;
}
.company-history-box .cbl-box {
  width: 100%;
  /*padding: 16px 18px;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  background-color: #f5f5f5;*/
  margin-bottom: 56px;
  box-sizing: border-box;
  position: relative;
}
.company-history-box .cbl-box:before {
  content: '';
  width: 20px;
  height: 20px;
  display: block;
  /*border: 5px solid #036eb8;*/
  position: absolute;
  left: -40px;
  top: 13px;
  border-radius: 50%;
  background: #e8e8e8;
  box-sizing: border-box;
}
.company-history-box .cbl-box:last-child {
  margin-bottom: 0px;
}
.company-history-box .cbl-box.cb-g:before {
  border-color: #32a071;
}
.company-history-box .cbl-box.cb-g .cb-title {
  /*color: #32a071;
  border-color: #32a071;*/
}
.company-history-box .cbl-box.cb-g .cbc-mon {
  /*background-color: #32a071;*/
}
.company-history-box .cbl-box .cb-title {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.5;
  color: #036eb8;
  /*padding-bottom: 6px;*/
  margin-bottom: 16px;
  /*border-bottom: 3px solid #036eb8;*/
  display: inline-block;
}
.company-history-box .cbl-box .cb-list {
  width: 100%;
}
.company-history-box .cbl-box .cb-content {
  width: 100%;
  border-bottom: 1px solid #dfdfdf;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 16px;
  padding: 0px 0 16px 0;
}
.company-history-box .cbl-box .cb-content:last-child {
  margin-bottom: 0;
}
.company-history-box .cbl-box .cbc-mon {
  width: 40px;
  /*min-height: 33px;
  border-radius: 6px;
  background-color: #036eb8;*/
  display: flex;
  align-items: baseline;
  justify-content: left;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #036eb8;
}
.company-history-box .cbl-box .cbc-intro {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  padding-left: 8px;
}
.about_inner .company-history-box .cbl-box .cci-list {
  margin: 0;
  padding-left: 16px;
}
.about_inner .company-history-box .cbl-box .cci-list li {
  margin: 0 0 5px;
  list-style: disc;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.about_inner .company-history-box .cbl-box .cci-list li:last-child {
  margin-bottom: 0;
}
/*----*/