body {
background-color: #e8e8e8;
font-size: 16px;
width: 100%;
}
header {
background-color: #ed6c1e;
overflow: auto;
}
main {
padding: 0 !important;
}
/* 整個網站連結樣式設定 */
a,
a:hover,
a:active {
color: inherit;
text-decoration: none;
}
/* 置頂麵包屑 */
nav#header-breadcrumb-nav {
/* background: rgba(181, 143, 77, 0.3); */
background-color: rgba(181, 143, 77, 0.3);
}
/* footer { */
/* background-color: #ed6c1e; */
/* color: #fff; */
/* padding-top: 2%; */
/* margin: 0 !important; */
/* font-size: .875rem; */
/* width: 100%; */
/* } */
/* mobile menu */
.header-container div.header-content {
background-color: #f9f9f9;
}
.mobile-login {
text-align: center;
margin: 30px auto;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li {
display: block;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li {
vertical-align: middle;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li a {
display: block;
color: #000;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li.sub-nav-ul-li-1 a {
padding: 23px 30px;
border-bottom: 1px solid #696a6c;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li.sub-nav-ul-li-1 a img {
width: 31px;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li.sub-nav-ul-li-2 {
width: 80%;
margin: 0 30px;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li.sub-nav-ul-li-2 a {
padding: 30px 1px 9px 1px;
border-bottom: 1px solid #e3e3e3;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li.sub-nav-ul-li-3 a {
margin: 20px 2px;
padding: 0;
color: #696a6c;
border: none;
}
.header-container div.sub-nav .sub-nav-ul>li:last-child {
border-bottom: none;
}
.header-container div.sub-nav .sub-nav-ul .sub-nav-ul-li .sub-nav-link {
font-size: 1rem;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 1.3px;
text-align: left;
color: #4a4a4a;
}
.sub-nav-link.no-collapsed::after {
content: "";
}
.sub-nav-link.collapsed::after {
content: url('../img/menu-arrow-grey.svg');
;
float: right;
}
.sub-nav-link::after {
content: url('../img/menu-arrow-orange.svg');
;
float: right;
}
.mobile-footer {
display: block;
padding: 10px;
position: relative;
background-color: #ed6d00;
}
.mobile-footer ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.mobile-footer ul li {
display: inline-block;
flex: 1 0 33%;
margin: 10px 0;
padding-left: 11px;
text-align: center;
}
.mobile-footer ul li a {
font-size: .875rem;
letter-spacing: 1px;
color: #ffffff;
}
/* login page*/
.container.login-container {
max-width: none;
}
.login-container a {
color: unset;
}
/* 桌面置頂區 */
#desk-header {
width: 100%;
margin: 0 auto;
}
/* 置頂logo */
.header-logo {
display: flex;
align-items: center;
line-height: 78px;
}
.header-logo img {
width: 248px;
height: 36px;
}
.header-logo span {
color: #ffffff;
margin-left: 31px;
}
/* 置頂menu 外部連結系列 */
#desk-header a {
font-size: 0.875rem;
letter-spacing: 1.22px;
color: #FFFFFF;
margin: auto 20px;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 999;
line-height: 78px;
font-size: 0.875rem;
letter-spacing: 1.22px;
color: #FFFFFF;
background: transparent url(../img/chevron-down-solid.svg) no-repeat right 10px center;
background-size: 10px;
padding: 0px 24px 0px 9px;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #ed6c1e;
line-height: 1rem;
border-top: none;
z-index: 999;
box-shadow: 0px 3px 6px #00000029;
margin-left: -20px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content ul {
margin: 0;
}
.dropdown-content ul li {
padding: 8px 12px;
}
#desk-header .dropdown-content ul li a {
margin: 0;
}
/* 置頂上方會員區 */
#id-and-fast {
margin: 12px 0px 10px;
width: 100%;
text-align: right;
}
#id-fast-name{
width:60%;
}
#id-block {
display: inline-flex;
vertical-align: middle;
align-items:center;
}
#id-button{
width:100%;
}
span.id-name {
display: inline-block;
color: #ed6d00;
font-size: 1.25rem;
font-weight: lighter;
margin-right: 10px;
}
span.id-time {
display: block;
color: #696a6c;
font-size: .875rem;
font-weight: lighter;
text-align: left;
}
#id-and-fast button,
.mobile-login button {
height: 30px;
padding: 2px 15px;
margin: 0px 5px;
border-radius: 20px;
border: none;
color: #ffffff;
font-size: .75rem;
letter-spacing: 1.6px;
text-align: center;
align-self: center;
}
#id-block-switch {
height: 34px;
background-color: #eda15f;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
text-align: center;
}
#id-block-switch a {
color: #fff;
}
#id-block-switch p i {
padding-left: 10px;
}
/* 快速選單 */
select.fast-select {
width: 120px;
}
.fast-div {
position: absolute;
top: 10%;
left: 0;
right: 0;
margin: auto;
width: 338px;
border-radius: 5px;
background-color: #ffffff;
background-size: cover;
z-index: 20;
max-height: 80vh;
overflow: auto;
}
.fast-div p {
margin: 40px auto 20px;
text-align: center;
font-size: 1.25rem;
color: #696a6c;
font-weight: 700;
text-decoration: none solid rgb(105, 106, 108);
}
.fast-div ul li {
margin: 8px auto;
padding-left: 10px;
width: 319px;
height: 60px;
line-height: 60px;
border: 1px solid #e3e3e3;
border-radius: 4px;
background-size: cover;
}
.fast-div ul a {
width: 130px;
height: 28px;
font-size: 1rem;
color: #000000;
text-decoration: none solid rgb(0, 0, 0);
line-height: 28px;
text-align: left;
}
.fast-div ul li img {
position: relative;
top: 20px;
bottom: 20px;
right: 10px;
width: 20px;
height: 20px;
fill: #000000;
}
.fast-div input[type="button"].bottom-close-btn {
display: block;
width: 150px;
height: 40px;
margin: 10px auto;
font-size: 1rem;
border-radius: 20px;
background-color: #ababab;
background-size: cover;
color: #ffffff;
}
.fast-div button.top-close-btn {
position: absolute;
top: 10px;
right: 0px;
}
.fast-div img.top-close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: gray;
border-radius: 50%;
padding: 5px;
}
.fast-div button img {
background-color: gray;
border-radius: 50%;
padding: 5px;
}
.fast-div-grey {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
margin: auto;
background-color: rgba(148, 148, 148, 0.8);
background-size: cover;
}
/* 快速選單 小版的標題 */
.mobile-fast-menu-title {
display: none;
}
/* 0619 首頁 快速選單 */
.fast-features-div {
position: absolute;
top: 190px;
right: 0px;
z-index: 10;
}
.fast-features-div .open-fast-features-btn {
float: right;
width: 40px;
color: #fff;
background-color: #ff8000;
box-shadow: 0 2px 10px 0 #eda15f;
outline: inherit;
border: none;
position: fixed;
}
.fast-features-div #fast-features-content {
float: right;
width: 280px;
overflow-y: scroll;
min-height: 420px;
padding: 10px 0px;
background-color: #fff;
border: 1px solid #ff8000;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
@media screen and (max-width: 500px) {
body {
overflow-x: hidden;
}
.fast-features-div #fast-features-content {
max-height: 65vh;
}
}
.fast-features-div #fast-features-content div {
padding: 10px 15px 0px;
}
.fast-features-div #fast-features-content div:not(:last-of-type) {
border-color: #cbcbcc;
border-style: solid;
border-width: 0px 0px 1px 0px;
}
.fast-features-div #fast-features-content div .title {
color: #ed6d00;
font-size: 1.25rem;
margin: 0 0 8px 0;
}
.fast-features-div #fast-features-content div ul.content {
font-size: 1.25rem;
margin: 0 0 10px 0;
}
.fast-features-div #fast-features-content div ul.content li {
margin-bottom: 5px;
position: relative;
line-height: 1.75rem;
}
.fast-features-div #fast-features-content div ul.content li button {
position: absolute;
right: 0px;
line-height: normal;
border: none;
color: #eda15f;
background-color: transparent;
}
.fast-features-div #fast-features-content div ul.content li button:hover, .fast-features-div #fast-features-content div ul.content li button:focus {
outline: none;
background-color: transparent;
color: #f5c9a4;
}
/* 中間內容 非主要功能區 */
.content {
position: relative;
margin: auto auto 30px auto;
}
/* 含icon menu */
#ttb-menu {
width: 100%;
background-color: #ffffff;
display: flex;
justify-content: space-between;
}
#ttb-menu a {
color: inherit;
padding: 20px 18px 10px;
}
#ttb-menu ul.menu-list {
margin: 0px auto;
overflow: scroll;
white-space: nowrap;
letter-spacing: -8px;
text-align: center;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
/*add20200206解決firefox scrollbar顯示的問題 */
#ttb-menu ul.menu-list {
overflow: auto;
-ms-overflow-style: none;
/* IE 11 */
scrollbar-width: none;
/* Firefox 64 */
}
#ttb-menu ul.menu-list::-webkit-scrollbar {
display: none;
}
#ttb-menu ul.menu-list li {
display: inline-flex;
text-align: center;
letter-spacing: normal;
color: #707070;
}
#ttb-menu ul.menu-list li:hover,
#ttb-menu ul.menu-list li a:not(.collapsed) {
box-shadow: 0px 0px 6px #00000029;
background: #F5F5F5 0% 0% no-repeat padding-box;
color: #ED6D00;
}
.menu-img-block {
margin: 0 auto;
}
.menu-img-block img {
height: 39px;
}
.menu-title {
margin-bottom: 0px;
font-size: 1.125rem;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 27px;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
#ttb-sec-menu {
left: 0px;
right: 0px;
width: 100%;
margin: 0 auto;
z-index: 5;
position: absolute;
}
.sec-menu {
background-color: #F5F5F5;
padding: 31px 52px 37px;
box-shadow: 0px 15px 15px #00000029;
}
.sec-menu.collapse.show .sec-menu-list {
animation-name: show-menu;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
@keyframes show-menu {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.sec-menu-list {
display: block;
opacity: 0;
}
.sec-menu-title {
margin-bottom: 18px;
}
.third-menu-list {
margin: 0px;
}
.third-menu-list li {
display: block;
margin: 16px 0px 16px 24px;
font-size: .9375rem;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 20px;
letter-spacing: 1.4px;
color: #707070;
padding: 0px;
text-indent: -24px;
}
.third-menu-list li a::before {
content: " ";
display: inline-block;
height: 20px;
width: 8px;
margin-right: 10px;
vertical-align: sub;
background-image: url(../img/caret-right-solid-gray.svg);
background-repeat: no-repeat;
}
.third-menu-list li:hover::before {
background-image: url(../img/caret-right-solid-orange.svg);
}
.third-menu-list li a {
color: inherit;
}
.third-menu-list li a:active,
.third-menu-list li a:hover {
color: #ff8000;
}
/* 左右滑動 */
.triangle-left,
.triangle-right {
width: 0;
height: 0;
line-height: 0px;
border-style: solid;
background-color: #f2f2f2;
align-self: center;
}
.triangle-left {
margin-right: 16px;
border-width: 14.5px 16px 14.5px 0;
border-color: #f2f2f2 #cccccc #f2f2f2 #f2f2f2;
}
.triangle-right {
margin-left: 16px;
border-width: 14.5px 0 14.5px 16px;
border-color: #f2f2f2 #f2f2f2 #f2f2f2 #ccc;
}
/* 列印下拉選單 */
div.print-block {
display: inline-block;
position: absolute;
right: 15px;
}
select.minimal {
/* styling */
background-color: #ed6d00;
color: #fff;
border: thin solid #ed6d00;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 5px 2em 5px 6px;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
/* custom */
background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
background-position: calc(100% - 15px) calc(1em), calc(100% - 10px) calc(1em);
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
}
select.minimal:focus {
background-image: linear-gradient(45deg, #fff 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, #fff 50%);
background-position: calc(100% - 15px) calc(1em), calc(100% - 10px) calc(1em);
background-size: 5px 5px, 5px 5px, 1px 1.5em;
}
select.minimal:focus {
background-repeat: no-repeat;
outline: 0;
}
#asied-menu {
padding-left: 3%;
z-index: 2;
}
/* 主要功能區 */
#main-content {
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
}
#main-content h2 {
display: inline-block;
/* max-width: calc(100% - 100px); */
margin: 0px 0px 30px;
font-size: 2rem;
font-weight: bold;
letter-spacing: 1px;
color: #000000;
}
/* 我的最愛icon */
#main-content h2 span.favorite-icon {
display: inline-block;
width: 22px;
height: 22px;
vertical-align: initial;
margin-left: 8px;
background-image: url(../img/icon-star-grey.svg);
}
#main-content h2 span.favorite-icon.favorite {
background-image: url(../img/icon-star-orange.svg);
}
h2~.fa-star, h2~.fa-star-o {
display: none;
cursor: pointer;
}
#main-content .home-title {
font-size: 1.3125rem;
color: #ed6d00;
border-bottom: 2px solid #ed6d00;
margin-bottom: 30px;
font-weight: 100;
}
.main-content-block {
margin: 0px 0 50px 0;
padding: 0px 0px 20px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.16);
text-align: center;
position: relative;
}
.main-content-block>div>div.ttb-input-block {
margin: 30px 40px;
}
.terms-pup-blcok {
text-align: center;
background-color: #ffffff;
}
.main-content-block div.terms-block h4 {
margin: 0;
}
.terms-block div.terms-items {
width: 100%;
height: 210px;
margin: 20px auto 0px auto;
border: 1px solid #D7D7D7;
border-radius: 6px;
}
.main-content-left,
.main-content-right {
display: inline-flex;
width: 50%;
max-height: 560px;
-ms-overflow-style: none;
}
.main-content-left {
float: left;
}
.main-content-right {
float: right;
}
.main-content-left .ttb-todolist-checkbox,
.main-content-right #calendar {
max-height: 500px;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
}
#calendar {
padding: 0px 20px;
}
.pie-tab-content.tab-content>.active {
display: flex;
}
.pie-tab-content svg {
width: 300px;
height: 230px;
}
.pie-tab-content .card-select-block {
z-index: 4;
padding: 0 15px;
margin: 0 -15px;
display: flex;
justify-content: center;
}
.pie-tab-content .card-select-block input.ttb-sm-btn {
margin: 0;
}
.pie-chart-table-block {
margin: 10px 0px;
}
table.pie-chart-table {
width: 100%;
margin: 0 auto;
border: 1px solid #f2f2f2;
border-radius: 8px;
border-collapse: separate;
}
table.pie-chart-table thead tr {
background-color: #696A6C;
color: #FFFFFF;
letter-spacing: 0.83px;
}
table.pie-chart-table thead tr th,
table.pie-chart-table tbody tr td {
padding: 10px 18px;
}
table.pie-chart-table tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
table.pie-chart-table tbody tr:nth-child(odd) {
background-color: #ffffff;
}
table.pie-chart-table tbody tr td:first-of-type {
font-size: 1rem;
color: #000000;
text-align: left;
padding-left: 10px;
}
table.pie-chart-table tbody tr td:first-of-type::before {
content: "";
width: 17px;
height: 17px;
display: inline-block;
margin-right: 12px;
border-radius: 50%;
vertical-align: middle;
}
table.pie-chart-table tbody tr:nth-child(1) td:first-of-type::before {
background-image: linear-gradient(#ffb9bb, #ff4747);
}
table.pie-chart-table tbody tr:nth-child(2) td:first-of-type::before {
background-image: linear-gradient(#9fe4d3, #4bafba);
}
table.pie-chart-table tbody tr:nth-child(3) td:first-of-type::before {
background-image: linear-gradient(#fffa7f, #ff8e00);
}
table.pie-chart-table tbody tr:nth-child(4) td:first-of-type::before {
background-image: linear-gradient(#d5fbae, #d5fbae);
}
table.pie-chart-table tbody tr td:first-of-type::after {
display: inline-block;
margin-left: 12px;
color: #aaaaaa;
}
table.pie-chart-table tbody tr td:first-of-type::after {
content: attr(data-chart-per);
}
table.pie-chart-table tbody tr td:last-of-type {
color: #000000;
font-weight: bold;
text-align: right;
padding-right: 10px;
}
table.pie-chart-table tbody tr td:last-of-type::after {
content: "元";
color: #aaaaaa;
margin-left: 6px;
}
table.pie-chart-table thead tr th:first-of-type {
border-top-left-radius: 8px;
}
table.pie-chart-table thead tr th:last-of-type {
border-top-right-radius: 8px;
}
table.pie-chart-table tbody tr:last-of-type td:first-of-type {
border-bottom-left-radius: 8px;
}
table.pie-chart-table tbody tr:last-of-type td:last-of-type {
border-bottom-right-radius: 8px;
}
.pie-chart-table-block .d-flex {
justify-content: space-between;
padding: 8px 15px;
}
.pie-chart-table-block .d-flex span:first-of-type {
color: #aaaaaa;
}
.pie-chart-table-block .d-flex span:last-of-type {
color: #eda15f;
}
.pie-chart-table-block .d-flex span:last-of-type img {
margin-left: 3px;
width: 15px;
height: 15px;
vertical-align: baseline;
}
.pie-chart-table-block button {
appearance: button;
-webkit-appearance: button;
-moz-appearance: button;
outline: none;
background-color: transparent;
border: none;
}
/* 行事曆 */
.main-content-block .fc-toolbar.fc-header-toolbar {
margin-bottom: 0;
}
.main-content-block .fc-toolbar.fc-header-toolbar div:nth-child(1),
.main-content-block .fc-toolbar.fc-header-toolbar div:nth-child(3) {
flex: 1 0 auto;
}
.main-content-block .fc-toolbar.fc-header-toolbar div:nth-child(2) {
flex: 0 1000 auto;
}
.main-content-block .fc-toolbar.fc-header-toolbar div:nth-child(3) {
text-align: right;
}
#main-content .main-content-block .fc-toolbar h2 {
display: inline-block;
margin: 20px 5px;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
color: #000000;
}
#main-content .main-content-block .fc-toolbar>*> :not(:first-child) {
margin: 0;
}
.main-content-block .fc-button-primary {
color: #aaaaaa;
background-color: transparent;
border-color: transparent;
}
.main-content-block .fc-button-primary:disabled {
background-color: #ff8000;
border-color: #ff8000;
opacity: 0.5;
}
.main-content-block .fc-button-primary:hover,
.main-content-block .fc-button-primary:not(:disabled):active,
.main-content-block .fc-button-primary:focus,
.main-content-block .fc-button-primary:not(:disabled):active:focus {
color: #ff8000;
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.main-content-block .fc-button-primary:not(:disabled).fc-button-active {
background-color: #ff8000;
border-color: #ff8000;
border-radius: 20px;
}
#main-content .fc-day-grid-event {
font-size: 0.875rem;
color: #ffffff;
font-weight: normal;
}
#main-content .fc-more {
font-size: 0.875rem;
color: #696a6c;
font-weight: normal;
}
/* 呈現結果的選單 */
.ttb-result-block {
text-align: center;
}
.ttb-result-block p {
margin-top: 30px;
font-size: 1.3rem;
font-weight: bold;
letter-spacing: 1.2px;
color: #4a4a4a;
}
.ttb-result-list {
display: flex;
margin: 15px 20px 0px 0px;
text-align: left;
flex-wrap: wrap;
}
.ttb-result-list.d-block {
display: block;
margin: 0px;
}
.ttb-result-list li {
flex: 0 0 50%;
margin-top: 15px;
margin-bottom: 15px;
}
/*20190905*/
.ttb-result-list li.full-list,
.ttb-result-list.terms li {
flex: 0 0 100%;
}
/*20190905*/
.ttb-result-list.terms ul.decimal-inside {
list-style: decimal;
list-style-position: inside;
}
/*20190905*/
.ttb-result-list.terms li span.input-subtitle {
display: inline-block;
margin-left: 1rem;
}
/*20190905*/
.ttb-result-list.terms>li {
padding-bottom: 10px;
padding-left: 0;
}
/*20190905*/
.ttb-result-list.terms ul,
.ttb-result-list.terms ol {
margin-left: 1rem;
}
.ttb-result-list.terms li {
line-height: 1.5rem;
}
.ttb-result-list.terms li::before {
content: attr(data-num);
color: #696a6c;
margin-left: -1rem;
}
.ttb-result-list li h3 {
margin: 0;
font-size: .875rem;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #424242;
}
.ttb-result-list li p {
margin: 3px 0;
font-size: 1rem;
letter-spacing: 0.9px;
line-height: 1.5;
font-weight: bold;
font-style: normal;
font-stretch: normal;
word-wrap: break-word;
color: #000000;
}
/* 條款內表格 */
.terms-table {
border: 1px solid #000000;
width: 100%;
}
.terms-table th,
.terms-table td {
border: 1px solid #000000;
white-space: inherit;
vertical-align: top;
padding: 3px;
}
.terms-table th {
text-align: center;
vertical-align: middle;
}
.ttb-terms div {
margin: 2rem;
}
.ttb-terms p.terms-version {
float: right;
}
.ttb-terms .ttb-result-list.terms {
display: block;
}
.ttb-terms .ttb-result-list.terms li::before {
color: inherit;
}
/* 條款內樣式 */
.terms-text-red,
.terms-text-red span,
.terms-text-red p,
.terms-text-red::before {
color: #E2231A !important;
}
.terms-text-blue,
.terms-text-blue span,
.terms-text-blue p,
.terms-text-blue::before,
.ttb-terms a {
color: #1e24f0 !important;
}
.terms-text-orange,
.terms-text-orange span,
.terms-text-orange p,
.terms-text-orange::before {
color: #EC6100
}
.terms-text-bold,
.terms-text-bold span,
.terms-text-bold p,
.terms-text-bold::before {
font-weight: 600 !important;
}
/*
.terms-text-underline, .terms-text-underline span, .terms-text-underline p, .terms-text-underline::before {
text-decoration: underline !important;
}
*/
.terms-text-center,
.terms-text-center span,
.terms-text-center p,
.terms-text-center::before {
text-align: center !important;
}
/* 表格 */
table.ttb-table {
min-width: 100%;
white-space: nowrap;
border-right: 0px;
}
table.ttb-table.stripe tbody tr.odd {
background-color: #ffffff;
}
table.ttb-table.stripe tbody tr.even {
background-color: #f2f2f2;
}
table.ttb-table thead th,
table.ttb-table tbody td {
vertical-align: middle;
border-right: 1px solid #BEBEC0;
border-bottom: 1px solid #BEBEC0;
}
table.ttb-table thead th {
background-color: #696A6C;
color: #FFFFFF;
letter-spacing: 0.83px;
text-align: center;
}
table.ttb-table.tb-orange thead th {
background-color: #ED6C1E;
padding: 20px 5px;
font-size: 18px;
}
.DTFC_ScrollWrapper {
border: 1px solid #BEBEC0;
border-radius: 8px;
border-bottom: 0;
}
table.ttb-table thead th:first-child,
div.DTFC_LeftWrapper table.dataTable.no-footer,
.dataTables_scrollHead {
border-top-left-radius: 8px;
}
table.ttb-table thead th:last-child,
div.DTFC_RightWrapper table.dataTable.no-footer,
.dataTables_scrollHead {
border-top-right-radius: 8px;
}
table.ttb-table tbody tr:last-child td:first-child,
.dataTables_scrollBody,
.DTFC_LeftBodyLiner {
border-bottom-left-radius: 8px;
}
table.ttb-table tbody tr:last-child td:last-child,
.dataTables_scrollBody {
border-bottom-right-radius: 8px;
}
div.DTFC_LeftWrapper table.dataTable.no-footer thead th:last-child,
div.DTFC_LeftWrapper table.dataTable.no-footer tbody tr:last-child td:last-child {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.main-content-block .dataTables_wrapper .dataTables_paginate .paginate_button.current {
color: #ffffff !important;
border: none;
background: #ED6D00 !important;
border-radius: 20px !important;
;
}
.main-content-block .dataTables_paginate .paginate_button:hover {
color: #ffffff !important;
border: none !important;
background-color: #ED6D00 !important;
border-radius: 20px !important;
}
.main-content-block .dataTables_wrapper .dataTables_paginate .paginate_button {
color: #696a6c !important;
}
a.paginate_button {
border-radius: 20px !important;
}
a.paginate_button.previous,
a.paginate_button.next {
background-color: transparent !important;
cursor: pointer;
}
.paginate_button.disabled {
color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
display: flex;
justify-content: center;
margin-top: 10px
}
.dataTables_scrollBody {
border: none;
}
.table-striped.row-border {
border: none;
}
.dataTables_wrapper no-footer {
border-radius: 8px;
border: 2px #f2f2f8 solid;
}
.dataTables_wrapper.no-footer .table thead th {
border-bottom: none;
}
.dataTables_wrapper.no-footer .table th {
border-top: none;
}
.table.tbb-table thead th:first-child {
border-top-left-radius: none;
}
.table.tbb-table thead th:last-child {
border-top-right-radius: none;
}
/* footer */
footer {
/*display: inline-flex; */
align-items: center;
background-color: #ed6c1e;
color: #fff;
width: 100%;
padding: 16px 20px;
display:flex;
}
footer>div {
margin: 0 auto;
}
footer a {
color: #ffffff;
}
footer div ul {
display: inline-block;
margin-left: 20px;
margin-bottom: 0px;
}
footer div ul li {
display: inline-block;
padding: 0px;
font-size: 14px;
}
footer div div {
display: inline-block;
vertical-align: middle;
margin-bottom: 15px;
}
footer div div p {
margin: 0;
font-size: 16px;
}
footer div span.facebook-icon {
display: inline-block;
margin-left: 20px;
position: absolute;
margin-top: 10px;
}
footer div ul li:last-of-type {
border: none;
}
footer div ul li:first-child:after {
content: "|";
margin-left: 12px;
height: 19px;
}
/*add footer 20200203*/
footer div ul li:last-of-type:before {
content: "|";
margin-right: 12px;
height: 19px;
}
.footer-p {
height: 20px;
margin: 0 auto;
padding: 0;
margin-bottom: 2px;
letter-spacing: 1.57px;
font-size: 18px;
}
footer div span {
display: inline-block;
margin-bottom: 19px;
}
/* footer */
/* 置底麵包屑 */
nav#footer-breadcrumb-nav {
background: rgba(181, 143, 77, 0.3);
}
nav#footer-breadcrumb-nav ul {
margin: 0 auto;
text-align: center;
}
nav#footer-breadcrumb-nav ul li {
display: inline-block;
margin: 8px 25px;
}
nav#footer-breadcrumb-nav ul li a {
color: #000000;
font-size: .875rem;
text-decoration: none;
}
/*20190905*/
nav#footer-breadcrumb-nav ul li.top-btn {
display: inline;
margin: 8px 0 0 0;
float: right;
}
/*20190905*/
nav#footer-breadcrumb-nav ul li.top-btn button {
-webkit-appearance: none;
background-color: transparent;
border: none;
}
/* 輸入選單 */
div.ttb-input-block {
text-align: left;
margin: 30px 0 40px 0;
}
/* 階段提示條 */
#step-bar {
margin: 0px auto 30px auto;
font-size: 1rem;
font-weight: bold;
letter-spacing: 0.9px;
text-align: center;
}
#step-bar ul li {
display: inline-block;
margin-right: 28px;
color: #aaaaaa;
}
#step-bar ul li:last-child {
margin-right: 0;
}
#step-bar ul li.active {
color: #ed6d00;
}
#step-bar ul li.active::before {
border: solid 3px #ed6d00;
color: #ed6d00;
}
#step-bar ul li.finished {
color: #eda15f;
}
#step-bar ul li.finished::before {
content: "\2713" !important;
border: solid 3px #eda15f;
color: #eda15f;
}
#step-bar ul li::before {
display: inline-block;
width: 39px;
height: 39px;
font-size: 1.25rem;
border: solid 3px transparent;
border-radius: 50%;
margin-right: 11px;
}
#step-bar ul li:last-child::after {
margin: 0;
}
#step-bar ul li:nth-child(1)::before {
content: "01";
}
#step-bar ul li:nth-child(2)::before {
content: "02";
}
#step-bar ul li:nth-child(3)::before {
content: "03";
}
#step-bar ul li:nth-child(4)::before {
content: "04";
}
#step-bar ul li:nth-child(5)::before {
content: "05";
}
#step-bar ul li:nth-child(6)::before {
content: "06";
}
#step-bar ul li::after {
content: ">>";
margin-left: 28px;
}
#step-bar ul li:last-child::after {
content: "";
}
p.form-description {
text-align: left;
font-weight: bold;
letter-spacing: 0;
color: #000000;
margin-top: 30px;
margin-bottom: 10px;
}
/* 上傳照片的輸入欄位 */
.photo-block {
display: flex;
justify-content: center;
}
.photo-block div {
position: relative;
margin: auto 15px;
}
.photo-block img {
width: 324px;
height: 204px;
border-radius: 15px;
}
.photo-block p {
margin-top: 10px;
text-align: center;
color: #696A6C;
}
.photo-block .photo-close-btn {
position: relative;
top: -10px;
}
.photo-block .photo-close-btn:hover {
opacity: 1;
}
.photo-block .photo-close-btn:before {
position: absolute;
left: -15px;
content: url(../img/upload_delete.svg);
}
.photo-block .photo-error-message {
position: absolute;
top: calc(204px - 26px);
left: 2px;
margin: 0 0 0 0;
width: 320px;
background-color: #E2231A;
color: #FFFFFF;
border-radius: 0px 0px 13px 13px;
z-index: 10;
}
/* 輸入匡tab */
.nav-item {
flex: 1 1 auto;
color: #696A6C;
background-color: #e8e8e8;
font-size: 1rem;
font-weight: normal;
letter-spacing: 2.3px;
}
.nav-item:hover {
color: #696a6c;
}
.triple-nav-item {
width: 33.33%;
color: #696a6c;
background-color: #aaaaaa;
font-size: 1rem;
font-weight: normal;
letter-spacing: 2.3px;
border-color: #F2F2F2;
}
.nav-tabs {
height: 70px;
background-color: #e8e8e8;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.nav-tabs .nav-link {
line-height: 70px;
padding: 0;
}
.nav-tabs .nav-link.active {
color: #696a6c;
font-size: 1.25rem;
letter-spacing: 2.9px;
font-weight: 600;
border-color: #ffffff;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* 頁籤 tab 圓弧調整 */
.main-content-block.radius-50 {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.main-content-block.radius-50 .nav-tabs {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom: 5px solid #ffa640;
background-color: #e8e8e8;
}
.main-content-block.radius-50 .nav-tabs .nav-item.show .nav-link,
.main-content-block.radius-50 .nav-tabs .nav-link.active {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-color: #ffa640;
background-color: #ffa640;
color: #ffffff;
}
.main-content-block.radius-50 .nav-tabs .nav-item {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom: 5px solid #ffa640;
background-color: #ffffff;
}
/* 我的帳戶 */
.main-content-block.container {
min-height: unset;
padding: 0px 15px;
margin: 0px 0px 30px 0px;
}
.nav-tabs.account-nav {
border: none;
letter-spacing: -8px;
line-height: 30px;
height: auto;
}
.nav-tabs.account-nav .nav-item {
flex: 0 0 150px;
text-align: center;
}
.nav-tabs.account-nav .nav-item:first-of-type {
margin-left: 8px;
}
.nav-tabs.account-nav .nav-item .nav-link {
line-height: 30px;
font-size: 1rem;
font-weight: normal;
letter-spacing: 0px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-top-width: 0;
border-bottom-width: 30px;
border-right-width: 8px;
border-left-width: 8px;
border-top-color: #fff;
border-right-color: transparent;
border-bottom-color: #fff;
border-left-color: transparent;
border-style: solid;
height: 0px;
}
.nav-tabs.account-nav .nav-item .active{
color: #fff;
border-top-color: #ffa640;
border-right-color: transparent;
border-bottom-color: #ffa640;
border-left-color: transparent;
background-color: transparent;
}
.nav-tabs.account-nav .nav-item .active,.nav-tabs.account-nav .nav-item:hover a {
font-size: 1.25rem;
}
.nav-tabs.account-nav .nav-item a {
padding: 0px;
}
.nav-tabs.account-nav~.main-content-block {
box-shadow: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-color: #ffa640 transparent transparent transparent;
border-style: solid;
border-width: 5px 0px 0px 0px;
}
.account-left, .account-right {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.account-left {
display: none;
flex-flow: wrap;
align-content: baseline;
justify-content: space-around;
-ms-flex: 0 0 71%;
flex: 0 0 71%;
max-width: 71%;
padding: 20px 30px 20px 50px;
}
.account-left.show {
display: flex;
}
.account-right {
-ms-flex: 0 0 29%;
flex: 0 0 29%;
max-width: 29%;
}
.main-account, .account-item {
flex: 1 1 100%;
font-size: 1.25rem;
}
.main-account, .account-item>div {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
.main-account {
padding-bottom: 5px;
margin-top: 0px;
border-color: #cbcbcc;
border-style: solid;
border-width: 0px 0px 1px 0px;
align-content: center;
align-items: center;
}
.main-account .title {
font-size: 1.5rem;
color: #6c757d;
}
.main-account .title span.description {
display: block;
font-size: 1rem;
text-align: left;
}
.main-account .content {
color: #ed6d00;
max-width: none;
margin: 0px;
font-size: 1.5rem;
}
.main-account .content img {
margin-left: 5px;
height: 25px;
fill: currentColor;
}
.account-item div.account-item-show span:first-child::before {
content: url(../img/caret-right-solid-gray.svg);
height: auto;
width: 8px;
margin-left: -15px;
position: absolute;
}
.account-item div span:first-child {
text-align: left;
color: #6c757d;
}
.account-item div span:nth-child(2) {
text-align: right;
flex: 1 1 auto;
}
.account-item div span:nth-child(2) a {
color: #ed6d00;
text-decoration: underline;
margin-left: 20px;
}
.account-item div span:last-child {
padding-left: 10px;
text-align: right;
flex-basis: 100px;
}
.account-item div span:last-child a {
display: inline-block;
width: 100%;
text-align: center;
border: 1px solid #ed6d00;
border-radius: 30px;
padding: 5px 0px;
color: #ed6d00;
}
.account-announcement-block {
margin: 20px 0px;
padding: 10px 0px;
min-height: 300px;
width: calc(100% - 40px);
border-radius: 15px;
text-align: left;
background: linear-gradient(23deg, #ED6C1E 16%, #EDCF63 66%);
background: -moz-linear-gradient(23deg, #ED6C1E 16%, #EDCF63 66%);
background: -webkit-linear-gradient(23deg, #ED6C1E 16%, #EDCF63 66%);
background: -o-linear-gradient(23deg, #ED6C1E 16%, #EDCF63 66%);
}
.account-announcement-block .title {
color: #fff;
margin-left: 20px;
font-size: 1.25rem;
}
.account-announcement-block .title img {
margin-right: 5px;
height: 20px;
}
.account-announcement-block .content {
background-color: #f1f1f1;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
min-height: 200px;
width: 90%;
margin: 10px 0px 0px 0px;
padding: 0px;
}
.account-announcement-block .content ul {
padding: 0px 0px 10px 0px;
}
.account-announcement-block .content ul li {
padding: 10px 20px;
border-bottom: 1px solid #6f6969;
}
.account-announcement-block .content ul li span {
color: #6c757d;
}
.account-announcement-block .content ul li a {
display: block;
width: 90px;
text-align: center;
border: 1px solid #ed6d00;
border-radius: 30px;
padding: 5px 0px;
margin: 0px 0px 0px auto;
color: #ed6d00;
}
/* 新手上路 */
.guide-nav {
display: flex;
flex: 1 1 auto;
justify-content: center;
border-bottom: 1px solid #f2f2f2;
}
.guide-tab {
border: 1px solid #efefef;
border-left: 5px solid #f4f4f4;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.17);
padding: 5px 5%;
margin: 10px 5px;
background: #f4f4f4;
color: #666;
font-size: 13px;
font-weight: bold;
text-decoration: none;
display: block;
letter-spacing: 2px;
}
.guide-tab.active {
background-color: #ffa345;
border: 1px solid #ffa345;
color: #ffffff;
}
.guide-function-title {
font-size: 2rem;
font-weight: bold;
letter-spacing: 3.55px;
color: #000000;
}
.guide-function-title~p {
font-size: 0.875rem;
letter-spacing: 0;
color: #000000;
margin: 20px 0;
}
.carousel.guide-carousel {
display: inline-block;
margin: 60px auto 0px;
}
.carousel.guide-carousel {
width: 70%;
}
.carousel.guide-carousel+.carousel.guide-carousel {
width: 28%;
}
.guide-carousel .carousel-inner .carousel-item {
height: inherit;
}
.guide-carousel .carousel-inner .carousel-item img {
width: inherit;
height: auto;
background: transparent url('img/Image 41.png') 0% 0% no-repeat padding-box;
box-shadow: 0px 2px 5px #00000029;
border: 3px solid #696A6C;
}
.guide-carousel .carousel-inner .carousel-item .carousel-caption {
position: inherit;
top: auto;
right: auto;
bottom: auto;
left: auto;
color: #000000;
line-height: 1.5;
letter-spacing: 0.89px;
font-weight: normal;
text-align: left;
padding: 0 20px 20px;
}
.guide-carousel .carousel-inner .carousel-item .carousel-caption h5 {
font-size: 1rem;
letter-spacing: 0.93px;
color: #ED6D00;
}
.guide-carousel .carousel-inner .carousel-item .carousel-caption h5~p {
font-size: 1rem;
letter-spacing: 0;
color: #000000;
}
.guide-carousel input.guide-btn {
width: 98px;
border-radius: 21px;
color: #FFFFFF;
font-size: .875rem;
padding: 2px 25px;
border: none;
}
.guide-carousel input.guide-btn~input.guide-btn {
margin-left: 25px;
}
.carousel-control-next,
.carousel-control-prev {
color: red;
}
.guide-carousel .carousel-control-prev-icon {
background-image: url(../img/arrow-left.svg);
}
.guide-carousel .carousel-control-next-icon {
background-image: url(../img/arrow-right.svg);
}
/* 提示訊息 */
.ttb-message {
text-align: center;
margin: 30px auto;
}
.ttb-message p {
margin-bottom: 30px;
font-size: 1.25rem;
font-weight: bold;
letter-spacing: 2.9px;
color: #4a4a4a;
}
.ttb-message i {
display: block;
margin: 30px auto 18px auto;
}
.ttb-message i.success-color {
color: #37A447;
}
.ttb-message i.fail-color {
color: #E2231A;
}
.ttb-message span {
font-size: 1rem;
font-weight: normal;
letter-spacing: 2.9px;
color: #000000;
}
/* 輸入欄位分類區塊 */
.classification-block {
border-bottom: 1px solid #E3E3E3;
margin-top: 30px;
margin-bottom: 30px;
}
.classification-block p:first-child {
display: inline-block;
margin-bottom: 10px;
}
.classification-block p:nth-child(2) {
display: inline-block;
float: right;
margin-bottom: 10px;
}
a.classification-edit-btn {
position: relative;
left: unset;
top: 60px;
float: right;
width: 55px;
text-align: center;
color: #FFFFFF;
background: #AAAAAA 0% 0% no-repeat padding-box;
box-shadow: 0px 4px 10px #00000029;
border-radius: 21px;
}
.CN19-caption1,
#CN19-how-apply table>tbody>tr>td:not(:first-child) {
font-size: 1.25em;
color: #FF6600;
font-weight: bold;
}
.CN19-caption2 {
margin-left: 10px;
color: #333399;
font-weight: bold;
font-size: 1em;
}
#CN19-how-apply table>thead>tr>th,
#CN19-how-apply table>tbody>tr>td {
vertical-align: middle;
}
.CN19-caption3 {
margin-left: 30px;
}
.CN19-caption3>ul {
list-style-type: disc;
font-size: 1em;
color: #FF6600;
font-weight: bold;
}
#CN19-how-apply>div>div {
margin-bottom: 10px;
}
.ttb-input-block>.CN19-caption2:nth-child(even) {
padding-top: 10px;
border-top: 2px #EEEEEE solid;
}
.ttb-input-block>div>div>ol {
list-style-type: decimal;
padding-left: 20px;
}
/* 每行輸入 */
div.ttb-input-block .ttb-input-item {
width: 100%;
display: flex;
align-items: baseline;
margin: 30px 0 30px 0;
}
div.ttb-input-block .ttb-input-item>span:nth-child(1) {
flex: 0 0 30%;
margin-right: 3%;
}
div.ttb-input-block .ttb-input-item>span:nth-child(2) {
flex: 0 0 67%;
}
.ttb-input.d-flex {
max-width: 230px;
justify-content: space-around;
}
.ttb-input.d-flex div {
flex: 1 1 50%;
}
.ttb-input.d-flex div input {
width: 110px;
}
/* 輸入標題 */
.input-title {
text-align: right;
color: #000000;
}
.input-title label {
margin-bottom: 0;
}
.input-title h4 {
font-size: 1rem;
font-weight: normal;
letter-spacing: 0.9px;
color: #000000;
margin-bottom: 0;
}
/* 輸入欄位 */
.ttb-input-item input[type="text"],
.ttb-input-item input[type="password"],
.ttb-input-item select,
.error-block input {
width: 230px;
/* text-overflow: ellipsis; */
}
.ttb-input-item .input-width-60 {
width: 62px !important;
padding: 10px 0 10px 3px;
}
.ttb-input-item .input-width-85 {
width: 85px !important;
padding: 10px 0 10px 3px;
}
.ttb-input-item .input-width-100 {
width: 100px !important;
padding: 10px 0 10px 3px;
}
.ttb-input-item .input-width-115 {
width: 115px !important;
padding: 10px 0 10px 3px;
}
.ttb-input-item .input-width-125 {
width: 125px !important;
padding: 10px 0 10px 3px;
}
.ttb-input-item .input-width-165 {
width: 165px !important;
padding: 10px 0 10px 3px;
}
.ttb-input-item .input-width-100percent {
width: 100% !important;
padding: 10px 0 10px 3px;
}
input[type="text"]:disabled,
.ttb-input-item select:disabled {
background-color: #d8d8d8;
cursor: no-drop;
color: #000;
}
/* .sm-ttb-input input[type="text"] { */
.ttb-input-item input[type="text"].sm-input {
width: 60px;
}
.ttb-input+.ttb-input {
margin-top: 20px;
}
.sen-input {
margin-left: 20px;
margin-top: 0px !important;
}
.text-input,
.select-input,
.sm-text-input {
font-size: 1rem;
padding: .625rem;
color: #000000;
background-color: #fff;
border-radius: 4px;
border: solid 1px #bebec0;
letter-spacing: 0.8px;
font-weight: 400;
}
/*20190905*/
.text-input,
.select-input {
font-size: .875rem;
padding: 10px 7px;
color: #000000;
background-color: #fff;
border-radius: 4px;
border: solid 1px #bebec0;
letter-spacing: 0.8px;
font-weight: 400;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.text-input::placeholder,
.text-input:-ms-input-placeholder,
.text-input::-ms-input-placeholder {
color: #aaaaaa;
opacity: 1;
/* Firefox */
}
.card-input {
width: 55px !important;
}
/*20190905*/
.ttb-input-item .card-input {
width: 55px !important;
}
/*20240912*/
.ttb-input-item .card-input_100 {
width: 100px !important;
}
/* 多輸入欄位含副標題 單排顯示 */
div.ttb-input-block .ttb-input-item>span.input-block.one-line {
display: flex;
}
div.ttb-input-block .ttb-input-item>span.input-block.one-line div {
margin: 0px 5px 0px 0px;
}
/*20190905*/
/* 表格下方說明欄位 */
ol.description-list {
list-style-position: outside;
margin-left: 0 !important;
}
/*20190905*/
.description-list p {
font-size: .875rem;
color: #696a6c;
margin-bottom: 2px;
}
/*20190905*/
.description-list li {
margin-left: 1.5rem;
font-size: 1rem;
color: #000000;
line-height: 1.5;
letter-spacing: 0.89px;
text-indent: none;
}
/* ul li 有數字樣式 */
ul.list-decimal,
ol.list-decimal {
list-style-type: decimal;
list-style-position: outside;
margin-left: 2rem;
}
/* 顏色 */
.must-color {
color: #e2231a;
border: solid 1.5px #e2231a;
}
.subtitle-color {
color: #696a6c;
}
.subtitle-colorb {
color: #000000;
}
.high-light {
color: #ed6d00;
letter-spacing: 1.1px;
font-weight: bold;
}
.ttb-input span {
word-wrap: break-word;
}
/* 輸入欄位後面的單位 */
.d-lg-flex .fit-unit-height {
flex: 0 0 auto;
height: fit-content;
max-height: 43px;
}
.ttb-input span.input-unit {
margin-left: 8px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.8px;
color: #000000;
}
.ttb-input span.input-unit.margin-4 {
margin: auto 4px;
}
/* 輸入欄位下方的備註 */
.ttb-input span.input-remarks {
display: block;
margin-top: 5px;
font-size: 0.7rem;
letter-spacing: 0;
color: #AAAAAA;
}
.ttb-input span.input-remarks-red {
display: block;
margin-top: 5px;
font-size: 0.7rem;
letter-spacing: 0;
color: #E2231A;
}
.ttb-input span.input-correct-remarks,
.ttb-input span.input-error-remarks {
display: block;
font-size: .75rem;
margin: 10px auto;
letter-spacing: 0;
}
.ttb-input span.input-correct-remarks {
color: #37A447;
}
.ttb-input span.input-error-remarks {
color: #E2231A;
}
/* 申請帳號成功、失敗 */
.application-correct-prompt,
.application-error-prompt {
display: inline-block;
vertical-align: top;
margin-left: 32px;
}
.application-correct-prompt {
color: #37A447;
}
.application-error-prompt {
color: #E2231A;
}
.application-correct-prompt i,
.application-error-prompt i {
margin-right: 11px;
}
.application-error-prompt .application-error-code {
display: block;
color: #AAAAAA;
margin-left: 27px;
}
/* 輸入欄位的副標題 */
.ttb-input span.input-subtitle {
display: block;
margin-bottom: 13px;
font-size: .875rem;
font-weight: normal;
}
/* select */
/*20190905*/
.custom-select {
position: relative;
width: auto;
height: 40px;
line-height: 1rem;
padding: 10px 18px 10px 7px;
background-image: url('data:image/svg+xml;utf8,');
background-position-x: right 0.75rem;
background-position-y: center;
background-size: 10px 14px;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
}
/*20190905*/
.custom-select select {
-webkit-appearance: none;
appearance: none;
border: none;
background-color: transparent
}
.custom-select select:focus {
outline: none;
}
/* radio and check */
/* Customize the label (the container) */
.radio-block,
.check-block {
display: inline-block;
position: relative;
margin-bottom: 0;
margin-right: 8px;
padding-left: 26px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-block,
.check-block {
font-size: .875rem;
}
/* Hide the browser's default checkbox */
.radio-block input[type="radio"],
.check-block input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.check-block input[type="checkbox"]:focus~span.ttb-check {
outline: 2px solid #EDA15F;
}
/* radio */
/* Create a custom radio */
span.ttb-radio {
position: absolute;
top: 2px;
left: 0;
height: 18px;
width: 18px;
margin: 0;
background-color: #fff;
border-radius: 50%;
border: 2px solid #aaa;
}
/* When the radio is checked, add a blue background */
.radio-block input:checked~.ttb-radio {
border-color: #ff8000;
background-color: #fff;
}
/* Create the radio/indicator (hidden when not checked) */
.ttb-radio:after {
content: "";
position: absolute;
display: none;
}
/* Show the radio when checked */
.radio-block input:checked~.ttb-radio:after {
display: block;
}
/* Style the radio/indicator */
.radio-block .ttb-radio:after {
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff8000;
}
/* check */
/* Create a custom radio */
span.ttb-check {
position: absolute;
top: 2px;
left: 0;
height: 18px;
width: 18px;
margin: 0;
background-color: #fff;
border-radius: 3px;
border: solid 1px #bebec0;
}
span.ttb-Pwdcheck {
position: absolute;
top: 2px;
left: 0;
height: 18px;
width: 18px;
margin: 0;
background-color: #fff;
border-radius: 3px;
border: solid 1px #bebec0;
}
/* When the radio is checked, add a blue background */
.check-block input:checked~.ttb-check {
background-color: #fff;
}
/* Create the radio/indicator (hidden when not checked) */
.ttb-check:after {
content: "";
position: absolute;
display: none;
}
/* Show the radio when checked */
.check-block input:checked~.ttb-check:after {
display: block;
}
/* Style the radio/indicator */
.check-block .ttb-check:after {
left: 5px;
top: 2px;
width: 7px;
height: 11px;
border: solid #ff8000;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* todo list checkbox */
.ttb-todolist-checkbox {
padding-top: 5px;
text-align: left;
}
.ttb-todolist-checkbox li {
margin: 10px auto;
border-bottom: 1px solid #eaeaea;
}
.ttb-todolist-checkbox li:last-child {
border-bottom: none;
}
.ttb-todolist-checkbox li label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ttb-todolist-checkbox li label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.ttb-todolist-checkbox li label span.ttb-todolist-mark {
position: absolute;
top: 6px;
left: 10px;
height: 13px;
width: 13px;
background-color: #fff;
border: 1px solid #000;
}
.ttb-todolist-checkbox li label.ttb-todolist-priority span.ttb-todolist-mark {
border: 1px solid #e2231a;
}
.ttb-todolist-checkbox li label.ttb-todolist-priority span.ttb-todolist-label {
color: #e2231a;
}
.ttb-todolist-checkbox li label:hover input~span.ttb-todolist-mark {
background-color: #fff;
border: 1px solid #000;
}
.ttb-todolist-checkbox li label input:checked~span.ttb-todolist-mark {
border: 1px solid #e3e3e3;
}
.ttb-todolist-checkbox li label span.ttb-todolist-mark:after,
.ttb-todolist-checkbox li label span.ttb-todolist-mark::before {
content: ' ';
position: absolute;
left: 5px;
height: 12px;
width: 2px;
}
.ttb-todolist-checkbox li label input:checked~span.ttb-todolist-mark:after,
.ttb-todolist-checkbox li label input:checked~span.ttb-todolist-mark::before {
display: block;
background-color: #e3e3e3;
}
.ttb-todolist-checkbox li label input:checked~span.ttb-todolist-mark::before {
transform: rotate(45deg);
}
.ttb-todolist-checkbox li label input:checked~span.ttb-todolist-mark:after {
transform: rotate(-45deg);
}
.ttb-todolist-checkbox li label input:checked~span.ttb-todolist-label {
color: #e3e3e3;
}
/* 按鈕 */
button:hover,
input:hover {
cursor: pointer;
}
input:focus,
select:focus {
outline: solid #EDA15F;
outline-offset: -2px;
border: none;
box-shadow: none;
}
.ttb-sm-btn {
height: 25px;
line-height: normal;
border-radius: 12.5px;
border-color: transparent;
padding: 0 14px;
color: #fff;
font-size: .875rem;
vertical-align: middle;
}
.ttb-pup-btn {
width: 150px;
height: 41px;
margin: 0 25px;
border-radius: 20.5px;
border-color: transparent;
color: #fff;
}
input.component-download-link {
background-color: transparent;
border: none;
-webkit-appearance: none;
appearance: none;
color: #007bff;
}
.ttb-button {
position: relative;
bottom: -40px;
width: 150px;
height: 41px;
margin: 0 25px;
border-radius: 20.5px;
border-color: transparent;
color: #fff;
}
.ttb-tb-btn{
height: 36px;
border-radius: 18px;
font-size: 1.125rem;
padding: 5px 18px;
line-height: 1rem;
color: #fff;
border-color: transparent;
vertical-align: middle;
margin: 0 3px;
}
.ttb-input button,
button.terms-btn {
height: 25px;
min-width: 55px;
margin-left: 3px;
padding: 0 7px;
font-size: .875rem;
border: none;
border-radius: 12.5px;
color: #fff;
vertical-align: middle;
}
.ttb-tb-btn{
height: 36px;
border-radius: 18px;
font-size: 1.125rem;
padding: 5px 18px;
line-height: 1rem;
color: #fff;
border-color: transparent;
vertical-align: middle;
margin: 0 3px;
}
.btn-flat-orange {
background-color: #ff8000;
box-shadow: 0px 4px 10px #00000029;
}
.btn-flat-gray {
background-color: #aaaaaa !important;
box-shadow: 0px 4px 10px #00000029 !important;
}
.btn-flat-darkgray {
background-color: #696a6c;
}
.btn-red-orange{
background-color: #EA5004;
}
.btn-red-orange.waiver{
background-color: #ffffff;
border: 1px solid;
color: #EA5004;
}
.btn-red-orange.disabled{
background-color: #f5f5f5;
color: #000000;
}
/* 網路投保按鈕 */
.btn-solid-orange {
display: flex;
padding: 5px 15px;
justify-content: center;
align-items: center;
border-radius: 25px;
background: var(--prim-main, #EA5004);
}
.btn-outline-orange {
display: flex;
width: 121px;
padding: 5px 15px;
justify-content: center;
align-items: center;
border-radius: 25px;
border: 1px solid #EA5004;
color: #EA5004;
background-color: #fff;
}
/* 卡片風格選擇區 */
.card-block {
margin: 20px 0px;
border-radius: 8px;
}
.card-block>div {
margin: 0 auto;
padding: 1px 50px 0px;
}
.card-select-block {
margin: 30px auto;
}
.card-select-block input[type="button"] {
height: 25px;
-webkit-appearance: none;
appearance: none;
border: none;
color: #EDA15F;
background-color: #ffffff;
margin: 0px;
vertical-align: middle;
flex: none;
}
.card-select-block input[type="button"].active {
color: #ffffff;
background-color: #ff8000;
box-shadow: 0px 4px 10px #00000029;
}
input[type="button"]:focus {
outline: none;
}
.card-detail-block {
margin: 27px auto 0px;
}
.card-detail-block img {
width: 200px;
height: 129px;
}
.card-detail-block>div {
vertical-align: top;
}
.card-detail-block div.card-center-block {
margin: 0 auto;
width: auto;
max-width: inherit;
}
.card-detail-block .card-detail-title {
font-size: 2rem;
margin: 0;
}
div.card-detail-block .ttb-input-item {
margin: 25px auto 30px auto;
}
.card-block .tab-content .ttb-button {
bottom: -20px;
}
/* 網站導覽 */
.card-detail-block div.card-center-block.d-flex {
flex-wrap: wrap;
justify-content: center;
}
.card-detail-block div.card-center-block.d-flex .ttb-pup-block {
flex: 0 1 30%;
margin: 60px 10px 0px;
padding: 0;
box-shadow: 0px 2px 8px #00000029;
border-radius: 10px;
}
.card-detail-block div.card-center-block.d-flex .ttb-pup-block:hover {
box-shadow: 0px 4px 8px #00000029;
}
.ttb-guide-btn {
color: #FFFFFF;
position: absolute;
right: 50px;
}
.ttb-pup-block.ttb-guide-block h3 {
font-size: 2rem;
color: #000000;
letter-spacing: 3.55px;
padding: 20px;
}
.ttb-pup-block.ttb-guide-block h4 {
font-size: 1rem;
line-height: 1.25rem;
padding: 5px 20px;
letter-spacing: 0.9px;
color: #404040;
}
.ttb-pup-block.ttb-guide-block h4 a {
color: #000000;
}
.ttb-pup-block.ttb-guide-block h4 a::after {
content: "";
display: inline-block;
margin-left: 8px;
width: 15px;
height: 18px;
vertical-align: bottom;
background-repeat: no-repeat;
}
.ttb-pup-block.ttb-guide-block h4 a[aria-expanded="true"]::after {
background-image: url(../img/minus-square-solid.svg);
}
.ttb-pup-block.ttb-guide-block h4 a[aria-expanded="false"]::after,
.ttb-pup-block.ttb-guide-block h4 a.collapsed[aria-expanded="true"]::after {
background-image: url(../img/plus-square-solid.svg);
}
.ttb-pup-block.ttb-guide-block h4:before {
content: " ";
display: inline-block;
height: 20px;
width: 11px;
vertical-align: sub;
background-image: url(../img/caret-right-solid.svg);
background-repeat: no-repeat;
}
.ttb-guide-list {
list-style-type: none;
list-style-position: inside;
margin: auto 30px 27px;
}
.ttb-guide-list li {
margin: 16px auto;
font-size: 15px;
line-height: 22px;
}
.ttb-guide-list li a {
font-size: 0.9375rem;
letter-spacing: 0;
color: #707070;
opacity: 1;
}
.ttb-guide-list li a:active,
.ttb-guide-list li a:focus,
.ttb-guide-list li a:hover {
color: #ED6D00;
}
.ttb-guide-list li a:active::after,
.ttb-guide-list li a:focus::after,
.ttb-guide-list li a:hover::after {
content: " ";
display: inline-block;
height: 14px;
width: 7px;
margin-left: 10px;
vertical-align: sub;
background-image: url(../img/chevron-right-solid.svg);
background-repeat: no-repeat;
}
/* 選單匡整體 */
.panel {
padding: 0 1%;
margin-top: -100px;
margin-right: 15%;
}
.panel-heading p {
padding: 0 16px 0 0;
margin: 0;
}
.panel-heading a {
font-size: 1.125rem;
font-weight: normal;
}
/* 選單匡標題文字 */
/* 選單匡標題文字 選定時 */
.panel-title,
a.panel-title:hover,
a.panel-title:active {
color: #ed6d00;
border-bottom: 1px solid #ed6d00;
padding-bottom: 9px;
margin-top: 30px;
}
/* 選單匡標題文字 收合時 */
.panel-title.collapsed {
color: #aaaaaa;
border-bottom: 1px solid #e9e9e9;
}
/* 選單匡內容 */
.panel-body ul {
padding-left: 10%;
}
.panel-body ul li {
margin-top: 5%;
}
.panel-body a {
color: #696a6c;
font-size: 1rem;
font-weight: normal;
}
.panel-body a:hover {
color: #000;
}
/* 麵包屑 */
nav#header-breadcrumb-nav {
background-color: rgba(181, 143, 77, 0.3);
}
.ttb-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 3px 15px;
margin: 0 auto;
color: #424242;
font-size: 0.875rem;
}
.ttb-breadcrumb a {
color: #424242;
}
.ttb-breadcrumb-item {
padding-right: .5rem;
}
.ttb-breadcrumb-item+.ttb-breadcrumb-item::before {
content: ">";
display: inline-block;
padding-right: .5rem;
color: #424242;
}
/* 彈出視窗 */
.modal-dialog {
max-width: 50%;
}
.modal-dialog.calendar-modal {
max-width: 50%;
max-height: 500px;
}
.popup-windows {
width: 400px;
height: 400px;
margin: 0 auto;
background: #fff;
}
.popup-close-btn {
float: right;
margin: 10px;
height: 33px;
width: 33px;
border-radius: 50%;
border-color: transparent;
background-color: #aaa;
color: #fff;
padding: 0px;
font-size: 1.5rem;
font-weight: 100;
text-shadow: none;
opacity: 1;
}
.ttb-pup-block {
border: solid 1.2px #e3e3e3;
border-radius: 4px;
padding: 20px 24px;
margin: 0 auto 10px auto;
}
.card-detail-block div.card-center-block.d-flex .ttb-pup-block.square-style {
position: relative;
height: 128px;
display: inline-block;
flex: 0 0 128px;
margin: auto 15px 15px;
padding: inherit;
box-shadow: 0px 2px 5px #00000029;
}
.card-detail-block div.card-center-block.d-flex .ttb-pup-block.square-style:hover {
box-shadow: 0px 4px 8px #00000029;
}
/* 金融資訊 彈出視窗 */
#main-content .pupup-block {
align-items: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background-color: rgba(148, 148, 148, 0.8);
width: 100%;
height: 100%;
text-align: center;
}
#main-content .pupup-block .card-block {
max-width: 1040px;
margin: 10% auto;
}
/* 彈出視窗 的 標題 */
#main-content .ttb-pup-h2 {
margin: 30px auto 0px;
font-size: 1.25rem;
font-weight: normal;
letter-spacing: 0;
color: #696A6C;
opacity: 1;
}
.modal-header {
border: none;
margin: 60px 0;
padding: 0;
}
.modal-body {
margin: 0 auto;
padding: 0px;
max-width: 570px;
align-self: center;
}
.modal-body ul,
.modal-body ol {
margin: 0 auto;
}
.modal-body ul li,
.modal-body ol li {
margin: 20px 0;
}
.modal-body ul.more-news-list li,
.modal-body ol.more-news-list li {
display: flex;
}
.modal-body ul.more-news-list li span:first-of-type,
.modal-body ol.more-news-list li:first-of-type {
margin-right: 10px;
}
.modal-body ul label~span,
.modal-body ol label~span {
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
.ttb-pup-header {
margin: 0 auto;
font-size: 1.25rem;
font-weight: bold;
letter-spacing: 1.1px;
color: #696a6c;
}
.ttb-pup-title {
color: #000;
letter-spacing: 0.9px;
}
.ttb-pup-title>div>span {
text-align: right;
}
.ttb-pup-title>div>div.col-11 {
padding-right: 3%;
}
.ttb-pup-title::after {
float: right;
position: relative;
top: -25px;
}
.ttb-pup-title.collapsed[aria-expanded="true"]::after,
.ttb-pup-title[aria-expanded="false"]::after {
content: url(../img/menu-arrow-grey.svg);
}
.ttb-pup-title[aria-expanded="true"]::after {
content: url(../img/menu-arrow-orange.svg);
}
.ttb-pup-title.ttb-pup-link::after {
content: url(../img/icon-10.svg);
color: #ed6d00;
}
.square-style .ttb-pup-title::after {
content: url(../img/external-link-alt-solid.svg);
float: none;
position: static;
display: block;
width: 20px;
height: 20px;
margin: 5px auto 0;
}
.ttb-pup-title:hover {
color: #000;
}
.ttb-pup-block.square-style .ttb-pup-title {
position: absolute;
bottom: 25px;
width: 128px;
text-align: center;
letter-spacing: 0;
}
.ttb-pup-block.square-style .ttb-pup-title span {
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.ttb-pup-title-sub {
color: #696a6c;
}
.ttb-pup-body {
font-size: .875rem;
font-weight: bold;
line-height: 1.31;
letter-spacing: 0.9px;
color: #000000;
}
.ttb-pup-body ul.ttb-pup-list {
margin-bottom: 0;
}
.ttb-pup-body ul.ttb-pup-list li {
margin: 10px auto;
color: #696a6c;
}
.ttb-pup-body ul.ttb-pup-list>li {
margin: 20px 0 10px 9.3%;
}
.ttb-pup-body ul li p {
margin-bottom: 10px;
}
.ttb-pup-body ul.ttb-pup-item li {
display: inline-block;
margin: 10px 5px;
}
.ttb-pup-item.d-flex {
flex-wrap: wrap;
}
.ttb-pup-item.d-flex li {
flex: 0 1 33%;
}
.ttb-pup-body .ttb-pup-table {
min-width: inherit !important;
width: auto;
font-size: 0.875rem;
word-break: break-all;
border: 1px solid #bebec0;
text-align: center;
}
.ttb-pup-body .ttb-pup-table thead th,
.ttb-pup-body .ttb-pup-table tbody td {
border: solid 1px #000000;
vertical-align: middle;
}
.ttb-pup-body .ttb-pup-table thead th {
color: #fff;
background-color: #696a6c;
border: 1px solid #bebec0;
}
.ttb-pup-body .ttb-pup-table tbody td {
background: rgba(0, 0, 0, .05);
font-weight: 400;
border: 1px solid #bebec0;
}
.ttb-pup-body .ttb-pup-table tbody td:nth-child(even) {
background: #f2f2f2;
}
/* 常見問題 table */
.question-table {
font-size: 0.875rem;
}
.question-table tr th:first-child,
.question-table tr td:first-child {
white-space: nowrap;
}
.question-table th {
background-color: #696a6c;
color: #fff;
}
.question-table tbody td {
background-color: #f2f2f2;
color: #696a6c;
}
.question-table td,
.question-table th {
vertical-align: middle;
white-space: nowrap;
text-align: center;
padding: 0.5rem;
border: 1px solid #dee2e6;
}
.question-table .white-spacing {
white-space: normal;
}
/* 常見問題 table */
.ttb-statement-content {
max-width: 570px;
font-size: 1rem;
font-weight: normal;
letter-spacing: 0;
color: #000000;
margin: 0 auto 30px;
}
.ttb-pup-footer {
margin-top: 0;
display: block;
text-align: center;
border: none;
padding-top: 0;
}
.modal-footer> :not(:first-child),
.modal-footer> :not(:last-child) {
margin: 10px 25px;
}
/* 問卷 */
.questionnaire-block {
margin: 0 auto;
}
.questionnaire-block h3 {
margin: 30px auto;
font-size: 1.25rem;
font-weight: bold;
letter-spacing: 2.9px;
text-align: center;
color: #696a6c;
}
.questionnaire-list {
text-align: left;
margin-top: 30px;
}
.questionnaire-title p {
margin-bottom: 20px;
font-size: 1rem;
font-weight: 100;
letter-spacing: 0;
color: #000000;
}
.questionnaire-answer {
font-size: .875rem;
font-weight: bold;
letter-spacing: 1.2px;
color: #000000;
margin-left: 1rem;
}
.questionnaire-answer ul li {
margin-bottom: 20px;
}
.questionnaire-result div p:nth-child(1) {
font-size: .875rem;
font-weight: 500;
color: #000000;
}
.questionnaire-result div p:nth-child(2) {
font-size: 1.875rem;
font-weight: 500;
letter-spacing: 2.2px;
color: #ed6d00;
}
/* login */
.login-top {
background-color: #cccccc;
}
/* 輸入欄位預設文字的顏色，三個瀏覽器不能寫在一起 */
/* for Chrome, Safari */
.login-input-block input::-webkit-input-placeholder {
color: #fff;
}
/* for IE 10+ */
.login-input-block input:-ms-input-placeholder {
color: #fff;
}
/* for Firefox 19+ */
.login-input-block input::-moz-placeholder {
color: #fff;
}
.header-area {
display: block;
margin: 0 auto;
}
.header-ele {
color: #4a4a4a;
}
.ele-info {
display: flex;
height: 43px;
align-items: center;
}
.ele-info+.ele-info {
background-color: #F86060;
color: #FFFFFF;
}
.ele-info::before {
content: "";
width: 23px;
height: 21px;
margin: 10px 6px 10px 20px;
background-color: transparent;
background-repeat: no-repeat;
}
.ele-info::before {
background-image: url(../img/icon-announcement.svg);
}
.ele-info+.ele-info::before {
background-image: url(../img/icon-announcement-white.svg);
}
.header-info {
display: inline-block;
font-size: 1rem;
letter-spacing: 1.57px;
font-weight: lighter;
word-break: keep-all;
margin-right: 32px;
}
.header-depiction {
display: inline-block;
font-size: 1.125rem;
font-weight: bold;
letter-spacing: 1.57px;
color: #4A4A4A;
overflow: hidden;
}
.ele-info a {
margin: 0px;
}
.ele-info+.ele-info .header-depiction {
color: #FFFFFF;
}
@keyframes ticker {
0% {
margin-top: 0;
}
25% {
margin-top: -43px;
}
50% {
margin-top: -86px;
}
75% {
margin-top: -129px;
}
100% {
margin-top: 0;
}
}
.tcontainer {
overflow: hidden;
}
.ticker-wrap {
width: 1200px;
padding-left: 100%;
background-color: transparent;
box-sizing: content-box;
height: 43px;
overflow: hidden;
padding: 0px;
}
.ticker-wrap ul:hover {
animation-play-state: paused;
}
.ticker-wrap ul {
padding: 0;
margin: 0;
list-style-type: none;
animation-name: ticker;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.ticker-wrap.one-ticker ul {
animation-name: none;
}
.ticker-wrap ul li {
font-size: 1rem;
line-height: 43px;
letter-spacing: 1.57px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 驗證碼這一塊div的設定 */
.login-input-block img {
width: 110px;
height: 28px;
display: block;
margin-right: 13px;
margin-left: 15px;
}
.login-checkbox {
display: flex;
justify-content: space-between;
width: 300px;
height: 20px;
margin: 10px auto;
padding: 0 15px;
color: #fff;
}
.login-input-block .code-update {
background: #4A4A4A url(../img/icon-refresh.png) no-repeat right 7px center;
width: 168px;
border-radius: 30px;
border: black 1px none;
position: relative;
left: 11px;
display: block;
margin: 2px 3px;
}
.login-submit-block {
text-align: center;
margin: 15px auto;
}
.login-btn {
display: inline-block;
padding: 8px 0px;
border-radius: 30px;
background-color: #fff;
font-size: 1.125rem;
border: none;
color: #ed6d00;
}
.login-submit-block a {
font-size: 0.875rem;
letter-spacing: 0;
color: #FFFFFF;
}
.login-submit-block .login-btn {
width: 181px;
margin-left: 16px;
}
.login-icon {
display: flex;
justify-content: space-between;
background-color: #e8e8e8;
padding: 0px 10px;
}
/* 登入後畫面的CSS */
#singIn-main-content {
width: 100%;
padding: 65px 0 60px 0;
}
.singIn-frist-banner {
width: 100%;
display: block;
align-content: center;
}
.singIn-frist-banner h2 {
display: inline-block;
}
.singIn-frist-banner i {
display: inline-block;
padding-left: 10px;
}
.assets {
padding: 30px 30px 0 0;
width: 100%;
}
.title {
display: inline-block;
font-size: 1.3rem;
color: #ed6d00;
}
.assets-btn {
display: float;
float: right;
}
.underLine {
height: 2px;
background-color: #ed6d00;
}
.print-btn {
border-radius: 12.5px;
display: inline-block;
width: 70px;
height: 25px;
background-color: #ed6d00;
/* padding: .5rem; */
text-align: center;
color: #fff;
}
.print-btn:hover {
color: #fff;
}
.assets-trial-btn {
border-radius: 12.5px;
display: inline-block;
width: 98px;
height: 25px;
background-color: #ed6d00;
/* padding: .5rem; */
text-align: center;
color: #fff;
}
.assets-trial-btn:hover {
color: #fff;
}
.assetDistri {
width: 100%;
height: 340px;
margin: 15px auto 0 auto;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
}
.account-overview-btn {
width: 260px;
height: 40px;
margin: 0 auto;
display: block;
border-radius: 20px;
background-image: linear-gradient(to right, #ed6d00, #f8e988);
text-align: center;
font-size: 1.375rem;
color: #fff;
position: relative;
top: -20px;
}
.account-overview-btn:hover {
color: #fff;
}
#singIn-main-content .bulletin-calendar {
width: 100%;
display: flex;
justify-content: space-between;
padding: 60px 30px 0 0;
}
#singIn-main-content .bulletin,
#singIn-main-content .calendar {
display: inline-block;
width: 46%;
}
#singIn-main-content #calendar,
#singIn-main-content .bulletin-contain {
height: 325px;
display: block;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
margin-top: 15px;
}
.icon-arrow {
display: flex;
align-items: center;
}
.icon-arrow img {
height: 47px;
}
.element-area {
width: 760px;
display: flex;
margin: 0px auto;
justify-content: space-around;
align-items: center;
background-color: #e8e8e8;
}
.element-item {
text-align: center;
margin: 8px 0px;
}
.element-item img {
max-height: 72px;
border-radius: 50%;
background-color: #ffffff;
}
.element-item span {
display: block;
font-size: 1rem;
font-weight: bold;
letter-spacing: 0;
color: #7A7A7A;
margin-top: 8px;
}
.login-news {
position: relative;
width: 100%;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0px 25px 20px;
/* 20200214修改 好康消息最小高度 */
min-height: 186px;
}
.login-news>p {
flex-basis: 100%;
color: #7A7A7A;
font-size: 1.25rem;
font-weight: bold;
max-height: 24px;
margin: 10px 0px;
}
.news-area {
width: 50%;
margin: 7px 0px;
}
.news-area a {
display: flex;
justify-content: left;
align-content: space-between;
}
.news-img {
margin-right: 15px;
display: inline-block;
}
.news-img img {
width: 185px;
height: 84px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0px 3px 6px #00000029;
border-radius: 15px;
}
.news-info {
display: inline-block;
color: #7A7A7A;
margin-right: 25px;
max-height: 85px;
}
.news-content {
font-weight: normal;
letter-spacing: 0;
text-overflow: ellipsis;
}
.login-news-more {
display: block;
flex-basis: 100%;
text-align: right;
max-height: 24px;
}
.login-bottom {
letter-spacing: 1.2px;
text-align: left;
color: #4a4a4a;
background-color: #cccccc;
}
.login-bottom img {
height: 22px;
margin: 11px 19px 12px;
}
.login-bottom ul {
display: inline-block;
color: #4A4A4A;
letter-spacing: 1.57px;
margin: 11px 0px 12px;
letter-spacing: -8px;
}
.login-bottom ul li {
display: inline-block;
font-size: 0.75rem;
font-weight: lighter;
letter-spacing: 0;
}
.login-bottom ul li::after {
content: "";
border-right: 1px solid #4a4a4a;
margin: 0px 10px;
}
.login-bottom ul li:last-child:after {
border-right: none;
}
.tbb-login-name {
display: inline-block;
margin: 15px 20px 15px 20px;
font-size: 1.125rem;
letter-spacing: 1.57px;
}
.lg-login {
background-image: url('../img/bg.png');
background-size: cover;
padding: 0;
}
img.more-btn {
width: 37px;
margin-right: 30px;
}
.login-news img.more-btn {
margin-right: 0px;
}
.login-title-block {
background-color: transparent
}
/* login language select */
/* 多語系選項 */
.multi-lang-select {
text-align: right;
}
.login-custom-select {
background: transparent url(../img/chevron-down-solid.svg) no-repeat right 10px center;
background-size: 10px 10px;
padding: 5px 24px 6px 9px;
margin: 8px 18px 0px;
border-radius: 0;
color: #ffffff;
border: 2px solid #FFFFFF;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
select.login-custom-select {
background-color: transparent
}
select.login-custom-select:focus,
select.login-custom-select:active {
outline: none;
border: 2px solid #FFFFFF;
}
select.login-custom-select option {
background-color: transparent;
color: black;
}
.login-logo {
display: block;
margin: 10px auto 27px;
max-width: 200px;
height: 43.33px;
}
.web-switch {
margin: 0 auto 28px;
width: 300px;
display: flex;
justify-content: center;
text-align: center;
border-bottom: solid 1px rgba(255, 255, 255, .5);
}
.web-switch a {
display: inline-block;
color: #fff;
margin: 0 25px;
padding-bottom: 7px;
font-size: 1.06rem;
font-weight: bold;
}
.web-switch a.active {
border-bottom: solid 2px #ffffff;
}
.lg-login .login-input-block {
display: flex;
position: relative;
justify-content: space-between;
width: 295px;
height: 44px;
margin: 20px auto;
padding: 0 15px;
border-radius: 22.5px;
background-color: rgba(255, 255, 255, 0.17);
border: solid 1px rgba(255, 255, 255, 0.46);
}
.lg-login .login-input-block input {
display: block;
font-size: 1.125rem;
font-weight: bold;
width: 100%;
background-color: transparent;
border: none;
padding-left: 10px;
color: #ffffff;
}
.lg-login .login-input-block .veri-code-input {
width: 100px;
}
.lg-login .login-input-block input:focus {
outline: none;
}
.lg-login .login-input-block input:focus::-webkit-input-placeholder {
color: transparent;
}
.lg-login .login-input-block input::-moz-placeholder,
.lg-login .login-input-block input::-ms-input-placeholder {
color: #ffffff;
}
/* login hidden/show password eye icon */
.lg-login .login-input-block.login-checkbox input:focus~.check-block {
display: block;
}
.lg-login .login-input-block.login-checkbox .check-block {
position: absolute;
top: 5.5px;
right: 8px;
width: 30px;
height: 30px;
background: #4A4A4A 0% 0% no-repeat padding-box;
border-radius: 15px;
border: none;
}
.login-input-block.login-checkbox .check-block {
display: block;
position: relative;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.login-input-block.login-checkbox .check-block input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.login-input-block.login-checkbox .check-block input:focus {
outline: none;
}
/* Create a custom checkbox */
.login-input-block.login-checkbox .check-block .ttb-check {
position: absolute;
top: 7px;
left: 6px;
background: url("../img/eye-solid.svg");
background-repeat: no-repeat;
border: none;
}
/* On mouse-over, add a grey background color */
.login-input-block.login-checkbox .check-block:hover input~.ttb-check {
outline: none;
}
/* When the checkbox is checked, add a blue background */
.login-input-block.login-checkbox .check-block #hid:checked~.ttb-check {
background: url("../img/eye-slash-solid.svg");
background-repeat: no-repeat;
}
.login-input-block.login-checkbox .check-block .ttb-Pwdcheck {
position: absolute;
top: 7px;
left: 6px;
background: url("../img/eye-slash-solid.svg");
background-repeat: no-repeat;
border: none;
}
/* Create the checkmark/indicator (hidden when not checked) */
.login-input-block.login-checkbox .check-block .ttb-check:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.login-input-block.login-checkbox .check-block input:checked~.ttb-check:after {
display: block;
}
.login-input-block.login-checkbox .check-block #hidCusidn:checked~.ttb-Pwdcheck {
background: url("../img/eye-solid.svg");
background-repeat: no-repeat;
}
.login-input-block.login-checkbox .check-block #hidPwd:checked~.ttb-Pwdcheck {
background: url("../img/eye-solid.svg");
background-repeat: no-repeat;
}
/* Style the checkmark/indicator */
.login-input-block.login-checkbox .check-block .ttb-check:after {
border: none;
}
.lg-login .login-input-block .login-input-btn.question-mark {
background: url("../img/icon-question-mark-01.png");
}
.login-menu {
display: block;
width: 336px;
margin: 0 auto;
background-color: rgba(209, 84, 0, 0.29);
border-radius: 10px;
}
.login-menu ul {
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: space-between;
padding: 21px 41px;
margin: 0 auto;
}
.login-menu ul li {
flex: 1 1 50%;
}
.login-menu ul li:nth-child(1),
.login-menu ul li:nth-child(2) {
margin-bottom: 13px;
}
.login-menu ul li:nth-child(even) {
text-align: right;
}
.login-menu ul a {
font-size: 1rem;
font-weight: bold;
color: #fff;
letter-spacing: 0;
}
.enterprise-info p {
max-width: 336px;
font-size: 0.75rem;
letter-spacing: 1.2px;
color: #ffffff;
text-align: center;
font-weight: lighter;
margin: 5px auto;
}
span.facebook-icon {
display: inline-block;
text-align: center;
width: 31px;
height: 31px;
margin: 0 auto;
background-image: url(../img/facebook-brands.svg);
background-repeat: no-repeat;
}
span.facebook-icon:hover {
background-image: url(../img/facebook-brands-blue.svg);
}
.password-miss-table tr td {
border: 1px solid #aaaaaa;
}
#password-miss {
width: auto;
}
#password-miss .modal-dialog {
max-width: none;
}
#password-miss .card-select-block {
justify-content: center;
}
#password-miss .btn-flat-orange {
margin: 0 10px;
}
.belongin-header,
#beLongin-header-nav,
.mobile-before-login,
.moblie-login-menu,
.footer-breadcrumb-nav,
.mobile-enterprise-info,
.mobile-icon {
display: none;
}
.fcy-balance {
display: flex;
}
.available-balance {
width: 49%;
margin-right: 1%
}
.account-balance {
width: 49%;
margin-left: 1%
}
ul.pagination li {
vertical-align: middle;
margin-right: 3px;
}
ul.pagination>li.footable-page a {
display: inline-block;
padding: 0px 7px;
text-decoration: none;
font-weight: bold;
color: #000;
}
ul.pagination>li.footable-page.visible.active {
border-radius: 50%;
background-color: #FF6600;
}
ul.pagination>li.footable-page.visible.active a {
color: #fff;
}
ul.pagination>li.footable-page.visible a {
color: #000;
}
.fooicon-plus:before {
content: url('../img/menu-arrow-grey.svg');
}
.fooicon-minus:before {
content: url('../img/menu-arrow-orange.svg');
}
/* 漢堡選單 */
.hamburger {
position: absolute;
right: 0;
}
.hamburger:focus {
outline: none;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: #ffffff !important;
}
/* 動態鍵盤 */
.keyboardBlock {
display: table;
position: relative;
left: 0;
right: 0;
margin: 0 auto;
width: fit-content;
background-color: #ffffff;
box-shadow: 0px 2px 30px #0000004D;
border: 2px solid #FE8002;
padding: 10px;
border-radius: 10px;
z-index: 99;
}
.keyboardBlock.login-keyboard {
position: absolute;
top: 40%;
}
.keyboardBlock p:first-child {
margin: 0 auto 10px;
font-size: 16px;
color: #404040;
font-weight: 500;
text-decoration: none solid rgb(64, 64, 64);
text-align: center;
}
.closeKeyboardBtn {
position: absolute;
right: 10px;
}
.openKeyboardBtn {
background-image: url(../img/keyboard-solid.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 41px;
width: 81px;
}
.keyboard {
display: inline-block;
margin: 0px 5px;
border-radius: 10px;
background-color: #ffffff;
background-size: cover;
vertical-align: top;
}
.letterKeyboard {
width: 400px;
}
.numberKeyboard {
width: 150px;
}
.keyboardButtons {
padding: 5px;
margin: 0;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
}
.keyboard .keyboardButtons>li {
display: inline-flex;
width: 36px;
height: 36px;
margin: 5px;
border-radius: 5px;
font-size: 20px;
font-weight: 700;
color: #f3720c;
background-color: #ffffff;
background-size: cover;
text-decoration: none solid rgb(243, 114, 12);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
border: 1px solid #ffffff;
text-align: center;
justify-content: center;
align-items: center;
}
.keyboard .keyboardButtons>li:hover {
border: 1px solid #FF8000;
}
.keyboard.numberKeyboard .keyboardButtons>li:last-child {
width: 134px;
}
.keyboard .keyboardButtons .btnConfirm {
width: 132px;
}
.keyboardInput {
width: 360px;
padding: 20px 15px 0 15px;
}
.keyboardInput input {
border: 1px solid #999;
font-size: 20px;
}
/* 提示訊息、錯誤訊息 */
.error-block {
display: flex;
align-items: baseline;
position: fixed;
z-index: 9999;
background-color: rgba(148, 148, 148, 0.8);
width: 100%;
height: 100%;
overflow: scroll;
text-align: center;
}
.error-block>div {
margin: 100px auto 50px;
padding: 40px 30px 60px 30px;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 2px 30px #0000004D;
font: Regular 1rem/1.5rem Noto Sans CJK TC;
}
.error-block div .keyboardBlock {
position: relative;
margin: 10px auto 0px auto;
}
.error-block div.keyboard {
display: block;
}
.error-block div .error-title {
margin-bottom: 40px;
font-size: 1.25rem;
font-weight: normal;
text-align: center;
letter-spacing: 0;
color: #696A6C;
}
.error-block div.error-for-code .error-content {
text-align: center;
}
.error-block div .error-content {
max-width: 570px;
margin: 1rem auto;
font-weight: normal;
letter-spacing: 0;
color: #000000;
text-align: left;
}
.error-block div .error-content:last-of-type,
.error-block div .error-info:last-of-type {
margin-bottom: 60px;
}
.error-block div .error-info .error-icon {
margin-right: 5px;
width: 22px;
}
/* logout */
.logout-block {
padding: 0px 75px;
}
.logout-block .logout-title {
font: Medium 20px/29px Noto Sans CJK TC;
font-size: 1.25rem;
line-height: 1.8125rem;
font-weight: normal;
letter-spacing: 0;
color: #696A6C;
opacity: 1;
text-align: center;
margin: 42px 0px 60px;
}
.logout-block .logout-content {
font-size: 1rem;
line-height: 1.5rem;
font-weight: normal;
letter-spacing: 0;
color: #000000;
opacity: 1;
text-align: left;
}
/*
* 移到登入頁做動態生成
*
.carousel-inner .carousel-item:nth-child(1) {
background: url('../img/banner-lg-01.png');
background-repeat: no-repeat;
background-size: cover;
}
.carousel-inner .carousel-item:nth-child(2) {
background: url('../img/banner-lg-02.png');
background-repeat: no-repeat;
background-size: cover;
}
.carousel-inner .carousel-item:nth-child(3) {
background: url('../img/banner-lg-03.png');
background-repeat: no-repeat;
background-size: cover;
}
.carousel-inner .carousel-item:nth-child(4) {
background: url('../img/banner-lg-04.png');
background-repeat: no-repeat;
background-size: cover;
}
.carousel-inner .carousel-item:nth-child(5) {
background: url('../img/banner-lg-05.png');
background-repeat: no-repeat;
background-size: cover;
}
*/
div.no-l-display-btn,
.no-l-display-btn {
display: none;
}
.print-block select::-ms-expand {
display: none;
}
.col-12 .cas-table {
margin: 20px auto;
justify-content: flex-start;
}
.cas-table>tbody>tr>td {
border: 1px solid #DDD;
padding: 5px 10px;
vertical-align: middle;
text-align: left;
}
.cas-table>tbody>tr>td .ttb-input {
display: inline-table;
}
.watermark {
position: relative;
}
.watermark:before {
content: "";
position: absolute;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(../img/watermark.png) 0 0/100% 100vh;
background-repeat: repeat-y;
}
.CN19-1-header {
margin: 20px 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-bottom: 2px;
border-bottom: #ed6d00 2px solid;
}
.CN19-1-header>.logo {
width: 200px;
display: block;
}
.CN19-1-header>.hyperlink {
width: 260px;
display: block;
}
.CN19-clause,
.NA01_7-update,
.NA02-clause,
.NA02_1-clause {
text-align: left;
height: 500px;
overflow: scroll;
}
.NA02_1-clause {
margin: 30px 1% 20px 1%;
}
.CN19-clause>div {
margin-left: 15px;
}
.NA02_1-clause>p {
font-size: 1.25em;
text-align: center;
margin-top: 10px;
}
#qaContent {
text-align: left;
margin-bottom: 20px;
}
#qaContent>ul>li>div:nth-child(odd) {
color: #FF6600;
}
.NA01_2 .head-line,
.NA01_3>.head-line,
.NA01_5>.head-line {
margin-top: 30px;
font-size: 1.25rem;
font-weight: bold;
letter-spacing: 2.9px;
text-align: center;
color: #4a4a4a;
}
.NA01_2>p {
font-size: 0.875rem;
font-weight: 500;
text-align: left;
color: #aaaaaa;
}
.NA01_2>ol>li {
font-size: 1rem;
;
line-height: 1.5;
letter-spacing: 0.9px;
text-align: left;
color: #000000;
}
.NA01_3>ol>li {
display: flex;
text-align: left;
font-size: 1rem;
margin-top: 20px;
}
.NA01_3-table>thead>tr>td {
text-align: center;
vertical-align: middle;
}
.NA01_3-table>tbody>tr>td {
text-align: left;
vertical-align: middle;
}
.NA01_3-inner-table td {
border: none;
padding: 0;
}
.NA01_3-header {
margin-top: 30px;
}
.NA01_3-inner-table>tbody>tr>td {
padding-left: 0;
text-align: left;
}
.NA01_3-table {
border: 1px block solid;
}
.input-title .IDimg {
background-image: url(../img/MissingPic.gif);
background-repeat: no-repeat;
background-size: cover;
width: 160px;
height: 120px;
display: inline-block;
JUSTIFY-CONTENT: flex-end;
}
.input-block .sm-ttb-button:nth-child(1) {
margin-bottom: 5px;
}
/* 下載多個檔案 如契約條款 */
.input-block.multi-download-block {
max-width: 270px;
}
.input-block.multi-download-block .ttb-input button {
float: right;
}
.sm-ttb-button {
width: 100px;
height: 30px;
border-radius: 15px;
border-color: transparent;
border: none;
}
.NA01_5 .content {
text-align: left;
margin: 20px 0;
}
.NA01_5 .ttb-input {
text-align: left;
}
#CN19-now-apply>div {
background-color: #f2f2f2;
margin: 30px 30px;
padding: 10px 0px;
border-radius: 25px;
}
.NA02_1-clause>div>div {
display: flex;
text-align: left;
font-size: 1em;
margin-top: 20px;
}
.NA02_1-clause .B1 {
margin-left: 20px;
}
.NA02_1-clause .B2 {
margin-left: 30px;
}
.NA02_1-clause .B3 {
margin-left: 40px;
}
/* 客戶資料變更 */
#update-content .modal-dialog .modal-content>div:not(:first-child) {
margin: 0 auto;
}
#update-content div.ttb-input-block .ttb-input-item>span:nth-child(1) {
flex: 1 1;
}
/* 驗證碼圖片 */
.verification-img {
width: 102px;
height: 28px;
}
/* 陰影框 */
.shadow-box {
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.16);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.container {
min-height: calc(100vh - 206px);
}
/*20190905*/
@media print {
#mobile-header {
display: none;
}
}
/* 取代 validationEngine css*/
.formError {
z-index: 3;
}
.formError.inline {
display: block !important;
}
.formError .formErrorContent {
background: transparent !important;
color: #e2231a !important;
font-size: 1rem !important;
}
.BHOInput input[type="text"] {
width: 30px;
text-align: center;
}
/* 列印頁使用 */
.bodymargin {
padding: 0% 5% 0% 10%;
}
table.print {
width: 100%;
}
table.print,
table.print th,
table.print td {
padding: 7px;
border: 1px groove #bfbfbf;
}
.print-head-center>tr>td:first-child {
text-align: center;
}
/* 暫時使用 for disabled checkbox 之後研究 BEN*/
span.ttb-check2 {
position: absolute;
top: 2px;
left: 0;
height: 18px;
width: 18px;
margin: 0;
background-color: #DCDCDC;
border-radius: 3px;
border: solid 1px #bebec0;
}
/* When the radio is checked, add a blue background */
.check-block input:checked~.ttb-check2 {
background-color: #DCDCDC;
}
/* Create the radio/indicator (hidden when not checked) */
.ttb-check2:after {
content: "";
position: absolute;
display: none;
}
/* Show the radio when checked */
.check-block input:checked~.ttb-check2:after {
display: block;
}
/* Style the radio/indicator */
.check-block .ttb-check2:after {
left: 5px;
top: 2px;
width: 7px;
height: 11px;
border: solid #696969;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* When the radio is disabled */
.radio-block input:disabled~.ttb-radio {
background-color: #d6d6d6;
}
.radio-block input:disabled~.ttb-radio-input {
color: #d6d6d6;
}
.select-input:disabled {
color: #d6d6d6;
}
/* When the checkbox is disabled */
.check-block input:disabled~.ttb-check {
background-color: #d6d6d6;
}
.check-block input:disabled~.ttb-check-input {
color: #d6d6d6;
}
/* Style the checkbox/indicator */
.check-block input:disabled~.ttb-check:after {
left: 5px;
top: 2px;
width: 7px;
height: 11px;
border: solid #696969;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 暫時end*/
/*解決edge的table跟列印問題*/
#header-nav {
float: right;
margin-right: 5%;
}
@media print {
#mobile-header {
display: none;
}
}
/* placeholder */
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile 12-12.1
- Android Browser 2.1-4.4.4
- Samsung Internet ≤6.2
- QQ Browser */
::-webkit-input-placeholder {
color: #AAAAAA;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: #AAAAAA;
}
/* Firefox 19-50 */
::-moz-placeholder {
color: #AAAAAA;
}
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #AAAAAA;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #AAAAAA;
}
/*Top scrollbar*/
.large-table-container-2 {
overflow-x: scroll;
overflow-y: auto;
transform: rotateX(180deg);
}
.large-table-container-2 table {
transform: rotateX(180deg);
}
/*Top and bottom scrollbar*/
.large-table-container-3 {
overflow-x: scroll;
overflow-y: auto;
scrollbar-color: yellow blue;
}
.large-table-fake-top-scroll-container-3 {
overflow-x: scroll;
overflow-y: auto;
scrollbar-color: yellow blue;
}
.large-table-fake-top-scroll-container-3 div {
background-color: red;
font-size: 1px;
line-height: 1px;
}
#tbb-sec-menu-bg {
position: absolute;
width: 100vw;
height: 100%;
top: 174px;
bottom: 0;
z-index: 9999999;
background-color: rgba(154, 154, 154, 0.7);
display: none;
}
#ttb-sec-menu {
overflow-x: hidden !important;
overflow-y: hidden !important;
padding-bottom: 10px !important;
}
#ttb-menu a {
padding: 20px 13px 10px;
}
.sec-menu-title {
color: #000000;
font-weight: bolder;
}
.menu-title {
font-weight: normal;
}
.third-menu-list {
padding-bottom: 15px;
}
.sec-menu {
padding: 30px 50px 0px 50px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: 0px 3px 6px #00000029;
}
.sec-menu-list {
min-height: 170px;
}
.sec-menu-list:after {
content: '';
display: block;
clear: both;
}
/* 信用卡menu寬度不夠，所以降低padding */
.sec-menu-list .sec-menu-item {
width: 200px;
float: left;
display: block;
padding-right: 20px;
}
.collapsing {
-webkit-transition: none;
transition: none;
display: none;
}
.menu-title {
font-size: 1rem;
}
#ttb-menu ul.menu-list li {
justify-content: center;
width: 95px;
}
#ttb-menu a {
padding: 20px 0px 10px 0px;
width: 100%;
}
#ttb-menu ul.menu-list li a:not(.collapsed) {
z-index: 99999;
}
#ttb-menu ul.menu-list li:hover {
box-shadow: none;
background: #FFFFFF 0% 0% no-repeat padding-box
}
#id-block div {
margin-right: 20px;
}
footer div ul {
margin-left: 0px;
}
.btn-flat-orange {
box-shadow: 0 2px 10px 0 #eda15f;
}
.btn-flat-orange:hover {
box-shadow: 0 4px 10px 0 #eda15f;
}
.btn-flat-darkgray {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
}
.btn-flat-gray:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.26);
}
.list-decimal a:not([tabindex]) {
color: #007bff;
}
.enterprise-info span.facebook-icon {
margin-top: 10px;
}
.enterprise-info a {
color: #FFFFFF;
}
/* 消除IE input text預設效果 */
::-ms-clear {
display: none;
}
/*20200123 add 基金損益餘額*/
#fundtable {
border: 1px solid #f2f2f8;
border-radius: 8px;
}
#fundtable thead {
background-color: #696a6c;
}
#fundtable thead th {
color: white;
text-align: center;
}
#fundtable thead tr:first-child th:first-child {
border-top-left-radius: 6px;
}
#fundtable thead tr:first-child th:last-child {
border-top-right-radius: 6px;
}
#fundtable tbody tr td {
border: 1px solid #BEBEC0;
white-space: nowrap;
font-size: 16px;
}
#fundtable tbody tr td:first-child {
border: 1px solid #BEBEC0;
white-space: normal;
padding-top: 7px;
padding-bottom: 7px;
}
div.dataTables_wrapper {
margin: 0 auto;
margin-top: 40px;
}
table.dataTable.nowrap td:first-child {
white-space: normal;
text-align: left;
}
table.dataTable.nowrap td {
font-size: 1rem;
}
.dataTables_scrollHead {
background-color: #696a6c;
color: white;
font-size: 17px;
}
.dataTables_scrollHead tr {
height: 20px;
}
table.dataTable thead th {
font-weight: normal;
font-size: 15px;
border-bottom: none;
}
div.DTFC_LeftHeadWrapper table.DTFC_Cloned tr {
background-color: #696a6c;
color: white;
font-size: 15px;
}
div.DTFC_LeftBodyWrapper table.dataTable.no-footer {
border-bottom: none;
}
fundtable #fundtable tbody tr td:nth-child(4) {
text-align: right;
}
#fundtable tbody tr td:nth-child(6) {
text-align: right;
}
#fundtable tbody tr td:nth-child(7) {
text-align: right;
}
#fundtable.fundtable-new tbody tr td:nth-child(5) {
text-align: right;
}
#fundtable.fundtable-new tbody tr td:nth-child(8) {
text-align: right;
}
#fundtable.fundtable-new tbody tr td:nth-child(9) {
text-align: right;
}
/*
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: none;
}
*/
table.dataTable {
margin-top: 0px !important;
}
table.dataTable thead th {
padding: 5px 10px;
}
table.dataTable tbody tr.even {
background-color: #F2F2F2;
border: 1px solid #F2F2F2;
}
table.dataTable tbody tr.even td:not(:first-of-type) {
margin-bottom: 2px;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
content: "";
right: 0;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
content: "";
right: 0;
}
.DTFC_LeftWrapper .dataTable tbody tr {
background-color: #89898a !important;
color: white;
height: 100%;
}
table.fixedHeader-floating th {
display: inline-block;
height: 100%;
}
.btn-filter {
font-size: 13px !important;
height: 25px !important;
min-width: fit-content;
padding: 0 15px;
outline: 0;
}
.btn-filter:active {
outline: 0;
}
.btn-filter:visited {
outline: 0;
}
.btn-filter:not(.current) {
background-color: transparent;
color: #ed6d00;
border: none;
cursor: pointer;
outline: 0;
}
.page-link {
color: #ed6d00;
border: none;
padding: 0.4rem 0.75rem;
}
.page-item.active .page-link {
border-radius: 25px;
background-color: #ed6d00;
color: white;
}
.page-item.active .page-link:hover {
border-radius: 25px;
background-color: #ed6d00;
color: white;
}
.paginate_button.page-item.active:hover {
background-color: none;
box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: #EDA15F !important;
}
.DTFC_LeftWrapper table thead th hr,
.DTFC_LeftWrapper table tbody tr hr {
border-bottom: 1px solid white;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
.dataTables_scrollHead table thead th hr {
border-bottom: 1px solid white;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
/* 強制使.dtable不大於外層 */
/* 解決dataTables初始化後, 比外層長導致出現scroll問題 */
.dataTables_scroll table {
width: 100%;
max-width: 100%;
}
.dataTables_scroll table tbody tr hr {
margin-top: 0;
margin-bottom: 0;
}
.table-select-btn {
text-align: left;
margin-bottom: -30px !important;
}
/*20200203 add 基金損益餘額*/
.btn {
font-size: 16px;
height: 41px;
text-align: center;
}
.btn.disabled,
.btn:disabled {
opacity: 1;
}
.home-qa .btn {
min-width: auto;
}
.btn-primary {
background-color: #ED6D00;
color: #ffffff;
border: none;
border-radius: 21px;
cursor: pointer;
text-decoration: none;
outline: none;
box-shadow: 0px 2px 10px #EDA15F;
}
.btn-primary:hover {
background-color: #ED6D00;
box-shadow: 0px 4px 15px #EDA15F;
}
.btn-primary:active {
background-color: #ED6D00;
box-shadow: 0px 2px 10px #EDA15F;
}
.btn-primary:disabled {
background-color: #EDA15F;
box-shadow: none;
border: none;
cursor: not-allowed;
}
.btn-primary:not(:disabled):not(.disabled):active {
background-color: #ED6D00;
box-shadow: none;
transform: translateY(1px);
}
.btn-secondary {
background: #AAAAAA 0% 0% no-repeat padding-box;
color: #ffffff;
border: none;
border-radius: 21px;
cursor: pointer;
text-decoration: none;
outline: none;
box-shadow: 0px 4px 10px #00000029;
font-weight: normal;
min-width: 150px;
}
.btn-secondary:hover {
background-color: #AAAAAA;
box-shadow: 0px 4px 15px #00000029;
}
.btn-secondary:active {
background-color: #AAAAAA;
box-shadow: 0px 4px 10px #00000029;
}
.btn-secondary:not(:disabled):not(.disabled):active {
background-color: #AAAAAA;
box-shadow: none;
transform: translateY(1px);
}
.btn-default {
font-size: 14px;
background-color: #AAAAAA;
color: #ffffff;
height: 25px;
border-radius: 20.5px;
box-shadow: 0px 4px 10px #00000029;
outline: none;
cursor: pointer;
text-decoration: none;
border: none;
padding-top: 0.20rem !important;
}
#mv_getSMSCode .modal-dialog {
z-index: 1041 !important;
}
.btn-square {
background-color: #ffffff;
width: 128px;
height: 128px;
border: none;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
outline: 0;
box-shadow: 0px 2px 5px #00000029;
}
.btn-square:hover {
box-shadow: 0px 4px 8px #00000029;
text-decoration: none;
}
.btn-square p {
color: #696A6C;
font-size: 12px;
}
.dataTables_filter {
position: absolute;
top: -40px;
right: 0;
}
.FxRemitQuery-table tbody tr td {
white-space: normal;
}
/* 公告 */
.announcement-block {
max-width: 375px;
min-height: 100px;
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 40%;
margin: 0 auto;
padding: 15px;
background-color: #eaeaea;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.announcement-block .announcement-title {
max-width: calc(375px);
position: fixed;
left: 0;
right: 0;
top: calc(40% - 1rem);
margin: 0 auto;
text-align: center;
color: #fff;
background-color: #ff8002;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.announcement-block .announcement-info {
text-align: center;
margin-top: 20px;
margin-bottom: 0px;
color: #ff8002;
letter-spacing: 1px;
}
.announcement-block .announcement-btn {
margin: 0 25px;
border-radius: 20.5px;
border-color: transparent;
color: #fff;
}
/* 公告 end */
/*寬度320px以下*/
@media screen and (max-width: 320px) {
footer {
height: 150px;
}
footer div span {
margin-bottom: 0px;
}
footer div span.facebook-icon {
margin-top: 25px;
margin-left: 8px;
position: absolute;
}
}
@media screen and (max-width: 500px) {
div.print-block {
top: 20px;
right: 10px;
}
}
@media screen and (min-width: 765px) and (max-width: 992px) {
div.print-block {
top: 2px;
right: 60px;
}
footer {
height: 120px;
}
footer div span {
margin-bottom: 0px;
}
footer div span.facebook-icon {
margin-left: 6px;
position: inherit;
}
}
@media screen and (min-width: 1000px) and (max-width: 1023px) {
div.print-block {
right: 25px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
div.print-block {
right: 20px;
}
}
/*寬度321以上 767以下的畫面*/
@media screen and (max-width: 767px) and (min-width: 321px) {
/* footer {
} */
footer div span {
margin-bottom: 0px;
}
footer div span.facebook-icon {
margin-left: 6px;
position: inherit;
}
}
@media screen and (max-width: 1142px) {
footer {
text-align: center;
}
}
@media screen and (max-width: 1024px) {
.news-img img {
width: 131px;
height: 59px;
}
.news-info {
margin-right: 16px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 992px) {
#password-miss .btn-flat-orange {
width: 100%;
max-width: unset;
margin: 2px auto 10px auto;
}
}
@media screen and (min-width: 767px) {
.error-block>div {
min-width: 720px;
}
}
/* 手機 */
@media screen and (max-width: 767px) {
.fast-div input[type="button"].bottom-close-btn {
margin-top: 60px;
margin-bottom: 60px;
}
.pie-tab-content svg {
height: 300px;
}
.card-select-block input[type="button"] {
font-size: 0.75rem;
}
.card-select-block input[type="button"].active {
font-size: 0.875rem;
}
.modal-footer {
padding-bottom: 60px;
}
.ttb-message p {
margin-bottom: 30px;
}
.error-block {
align-items: baseline;
}
.error-block>div {
padding: 0px 10px;
width: 85%;
}
.error-block div .error-title {
margin: 60px auto 30px auto;
}
.error-block div .ttb-pup-btn {
margin: 10px 0px;
}
/* login page */
.lg-login {
background-image: url(../img/bg-photo.png);
background-position: 46% 100%;
background-size: auto 420px;
background-repeat: no-repeat;
background-color:rgba(0, 0, 0, .2);
background-blend-mode: multiply;
}
.login-custom-select {
margin: 8px 5px 14px;
}
.login-logo {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 13px;
left: 0;
right: 0;
height: 26px;
margin: 0 auto;
}
.login-menu {
background: #ED6D00B3 0% 0% no-repeat padding-box;
opacity: 1;
border-radius: 0;
}
.login-menu ul {
display: block;
list-style-type: disc;
color: #FFFFFF;
}
.login-menu ul li {
margin: 0 auto;
}
.login-menu ul li:nth-child(1),
.login-menu ul li:nth-child(2) {
margin: 0;
}
.login-menu ul li:nth-child(even) {
text-align: left;
}
.web-switch {
/* margin: 35px auto 29px;*/
visibility: hidden;
height: 0px;
}
.login-submit-block {
margin: 45px auto 49px;
}
.login-submit-block a {
font-size: 0.875rem;
}
.login-submit-block .login-btn {
width: 149px;
padding: 8px 0px;
margin-left: 10px;
}
.enterprise-info {
vertical-align: middle;
}
.enterprise-info p {
text-align: left;
font-size: 0.75rem;
}
span.facebook-icon {
display: inline-block;
width: 19px;
height: 19px;
vertical-align: middle;
}
.icon-arrow {
display: none;
}
.login-bottom {
background-color: #E86C00;
color: #FFFFFF;
text-align: center;
}
.login-bottom ul {
color: #ffffff;
}
.login-bottom ul li {
font-size: 0.75rem;
border-color: #ffffff;
}
.login-bottom ul li::after {
border-color: #fff;
}
.ttb-breadcrumb {
margin-left: 9px;
padding: 0;
}
div.ttb-input-block,
.main-content-block>div>div.ttb-input-block {
margin: 30px 0px;
}
.content #main-content {
margin: 30px auto;
width: auto;
}
.main-content-left,
.main-content-right {
width: unset;
float: none;
}
/* pie chart */
.pie-tab-content .card-select-block {
position: absolute;
top: 270px;
bottom: auto;
}
.modal-body {
padding: 0px 25px;
}
/* mobile input 欄位 */
div.ttb-input-block .ttb-input-item {
margin-top: 30px;
}
.input-title {
text-align: left;
color: #aaa;
}
.input-title label {
margin: 0;
}
.input-title h4 {
font-size: .875rem;
margin-bottom: 10px;
}
div.ttb-input-block .ttb-input-item span:nth-child(1) {
flex: 0 0 100%;
margin: 0;
}
div.ttb-input-block .ttb-input-item span:nth-child(2) {
flex: 0 0 100%;
}
.ttb-input+.ttb-input {
margin-top: 15px;
}
.ttb-input-item input[type="text"],
.ttb-input-item select {
width: calc(100% - 40px);
}
.ttb-input button {
margin-top: 10px;
}
input+label.check-block {
margin-top: 10px;
}
span.input-subtitle+input,
span.input-subtitle+select {
margin-top: 10px;
}
/* 客製化radio checkbox */
.radio-block,
.check-block {
display: block;
}
.radio-block+.radio-block,
.check-block+.check-block {
margin-top: 15px;
}
/* 按鈕 */
/* 設計說字數限制，但在RWD寬度無法搭配 */
.ttb-button,
.ttb-pup-btn {
max-width: 120px;
margin: 0 10px;
}
/*20190905*/
/* 按鈕 小版變垂直 */
/* iphone 5E 會太寬 */
.ttb-button {
width: 100%;
max-width: unset;
margin: 2px auto 10px auto;
bottom: -20px;
}
.ttb-button:first {
margin-top: 100px;
}
/* 階段提示條 */
#step-bar {
font-size: .75rem;
margin: 0;
}
#step-bar ul {
margin-bottom: 30px;
}
#step-bar ul li {
/* margin-right: 18px; */
/* max-width: 90px; */
margin-right: 22px;
}
/* 呈現結果的選單 */
.ttb-result-block p {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: 2.6px;
color: #696a6c;
}
.ttb-result-list {
margin: 30px 12px 0px 12px;
}
.ttb-result-list li:nth-last-of-type(-n+2),
.ttb-result-list li:last-child {
margin: 0;
}
.ttb-result-list li {
flex: 0 0 50%;
}
.ttb-result-list li h3 {
font-size: .75rem;
letter-spacing: 0.2px;
}
.ttb-result-list li p {
font-size: .8rem;
letter-spacing: 0.7px;
line-height: 1.5;
}
/* 彈出視窗 */
.modal-dialog {
max-width: 100%;
margin-top: 50px;
}
.popup-windows {
width: 400px;
height: 400px;
margin: 0 auto;
background: #fff;
}
.popup-close-btn {
height: 32px;
width: 32px;
top: 5px;
right: 5px;
font-size: 1rem;
}
/* 暫時 手機消失 */
.mobile-none {
display: none;
}
/* beLogin頁面 */
.belongin-header {
display: flex;
height: 50px;
background-color: #ed6c1e;
justify-content: space-between;
}
.belongin-header::after {
content: '';
width: 0;
height: 100%;
display: inline-block;
position: relative;
vertical-align: middle;
background: #f00;
}
.belongin-header img,
#mobile-header a {
height: 23px;
vertical-align: middle;
align-self: center;
margin: 0 2%;
}
.belongin-header img.mobile-logo {
margin: 0 auto;
}
.header-ele {
display: block;
}
.header-info {
display: block;
margin: 0 2%;
width: 30%;
}
/*20190905*/
.header-depiction {
display: block;
width: 95%;
}
/*20190905*/
.login-banner {
display: none;
background-image: url('../img/bg-photo@2x.png');
background-position: 50% center;
padding: 40px 0 0 0;
}
/*20190905*/
.banner-slogan {
display: block;
padding: 0 0 20px 0;
}
.banner-slogan p {
display: block;
font-size: 1.35rem;
font-weight: 600;
line-height: 1;
letter-spacing: 2px;
text-align: center;
margin-bottom: 0.5rem;
}
.mobile-before-login {
/* padding-top: 150px; */
display: block;
}
.login-input-block {
display: flex;
justify-content: space-between;
margin: 0 auto 15px auto;
width: 300px;
height: 45px;
border-radius: 22.5px;
padding: 0 15px;
background-color: rgba(255, 255, 255, 0.2);
border: solid 1px rgba(255, 255, 255, 0.46);
}
.login-input-block input {
width: 200px;
display: block;
font-size: 1.125rem;
font-weight: bold;
height: 45px;
background-color: rgba(255, 255, 255, 0);
border: none;
}
.login-input-block .question-mark {
display: block;
position: relative;
width: 22px;
height: 22px;
top: 11.5px;
background: url("../img/icon-question-mark-01.png");
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.17);
border-radius: 11px;
border: none;
}
.login-input-block .veri-code-input {
width: 100px;
}
.mobile-icon {
width: 100%;
padding: 30px;
display: flex;
justify-content: space-between;
background-color: #f2f2f2;
}
/*20190905*/
.icon-arrow,
.login-icon {
display: none;
}
.element-area {
width: 310px;
display: block;
margin: 0 auto;
}
.element-row-1 {
display: flex;
justify-content: space-between;
}
.element-row-2 {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.element-item {
display: inline-block;
}
.login-news {
display: block;
padding: 0px 4%;
}
.login-news>p {
font-size: 1rem;
margin: 0px;
}
.news-area {
width: 100%;
}
.news-area:not(:last-child) {
margin-bottom: 30px;
}
.news-area:nth-child(4) {
margin-bottom: 0;
}
.news-img {
margin-right: 3%;
display: inline-block;
}
.news-info {
width: 100%;
display: block;
margin-right: 0px;
}
.news-day {
display: block;
width: 100%;
height: 16px;
font-size: 0.75rem;
letter-spacing: 1.2px;
color: #4a4a4a;
}
.news-content {
display: block;
width: 100%;
letter-spacing: 1.6px;
font-size: 0.75rem;
text-align: justify;
color: #4a4a4a;
}
/* 行事曆 */
.modal-dialog.calendar-modal {
max-width: 100%;
}
/* 置底麵包屑 */
/*20190905*/
.footer-breadcrumb-nav {
display: block;
width: 100%;
height: 40px;
background: rgba(181, 143, 77, 0.3);
padding: 0 30px;
margin: 270px 0 0 0;
}
.footer-breadcrumb-nav ul {
text-align: left;
display: flex;
justify-content: space-between;
}
.footer-breadcrumb-nav ul div {
text-align: left;
display: flex;
}
.footer-breadcrumb-nav ul div li {
display: inline-block;
justify-content: space-between;
/* margin: 8px 5%; */
}
.footer-breadcrumb-nav ul li a {
color: #000000;
text-decoration: none;
line-height: 40px;
margin-right: 10px;
display: block;
height: 16px;
font-size: 0.75rem;
letter-spacing: 1.2px;
text-align: center;
}
.enterprise-info-part-1 {
display: block;
justify-content: space-between;
color: #fff;
font-size: 0.75rem;
/* height: 42px; */
width: calc(100%- 230px);
font-weight: bold;
letter-spacing: 1.2px;
}
.enterprise-info-part-1 img {
display: block;
margin-bottom: 15px;
}
.enterprise-info-part-2 {
color: #fff;
font-size: 0.75rem;
font-weight: normal;
letter-spacing: 1.2px;
width: 100%;
border-top: #fff solid 1px;
margin-top: 10px;
padding-top: 10px;
}
div.print-block {
right: 10px;
display: block;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
}
.top-button img {
margin: 13px 0;
}
.main-content-block {
margin-top: 45px;
padding: 0;
}
.captcha {
display: none;
}
body:before {
background-size: 300px 100px;
top: 40%;
left: 5%;
}
.CN19-1-header {
display: block;
}
.CN19-1-header>.hyperlink {
margin-top: 5px;
width: 100%;
}
.login-icon {
height: 235px;
}
.login-icon>.icon-arrow {
display: none;
}
nav#footer-breadcrumb-nav ul li {
display: inline-block;
margin: 8px 10px;
float: none;
}
/* 首頁 */
.account-left {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.account-right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.main-account, .account-item>div {
flex-wrap: wrap;
}
.account-item div span:last-child {
flex-basis: 100%;
margin-top: 8px;
}
.account-announcement-block {
margin: 0 auto 20px;
}
.account-announcement-block .content {
width: 100%;
border-radius: 0px;
}
/* 首頁 帳戶總覽 */
.nav-tabs.account-nav {
flex-wrap: wrap;
}
.nav-tabs.account-nav .nav-item {
flex: auto;
}
.nav-tabs.account-nav .nav-item .nav-link {
font-size: 1rem;
border-radius: 0;
height: auto;
border-width: inherit;
background-color: #ffffff;
}
.nav-tabs.account-nav .nav-item .active {
background-color: #ffa640;
}
.nav-tabs.account-nav .nav-item:first-of-type {
margin-left: 0px;
}
.nav-tabs.account-nav .nav-item:not(:last-of-type) .nav-link {
border-right: 1px solid #ffa640;
}
.transaction_mechanism-mobile-only {
display: flex !important
}
.transaction_mechanism-desktop-only {
display: none !important
}
.transaction_mechanism-mobile-only input[type=password] {
width: calc(100% - 40px);
}
.flex-wrap {
width:100%; /* 手機版單排 */
}
}
/* 平板 */
@media screen and (min-width: 767px) and (max-width: 992px) {
/* login page */
.lg-login {
background-image: url(../img/bg-photo.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color:rgba(0, 0, 0, .2);
background-blend-mode: multiply;
}
.login-title-block {
padding: 12px 0px;
}
.login-title-block .multi-lang-select {
position: absolute;
top: 0px;
right: 0px;
left: auto;
text-align: right;
font-size: 0.8125rem;
margin: 0px;
}
.login-custom-select {
margin: 8px 18px 14px;
}
.login-logo {
margin-left: auto;
margin-right: auto;
height: 26px;
margin: 0 auto;
}
.login-menu {
background: #ED6D00B3 0% 0% no-repeat padding-box;
opacity: 1;
border-radius: 0;
padding: 12px 0px 12px 36px;
max-width: 173px;
}
.news-content {
font-size: 0.75rem;
}
.login-news>p {
font-size: 1rem;
margin: 19px 0px;
}
.login-menu ul {
display: block;
list-style-type: disc;
list-style-position: inside;
color: #FFFFFF;
padding: 0;
align-self: center;
}
.login-menu ul li {
margin: 0 auto;
}
.login-menu ul li:nth-child(1),
.login-menu ul li:nth-child(2) {
margin: 0;
}
.login-menu ul li:nth-child(even) {
text-align: left;
}
.web-switch {
margin: 35px auto 29px;
}
.login-submit-block {
margin: 45px auto 49px;
}
.login-submit-block a {
font-size: 0.875rem;
}
.login-submit-block .login-btn {
width: 149px;
padding: 8px 0px;
margin-left: 20px;
}
.enterprise-info {
vertical-align: middle;
}
.enterprise-info p {
text-align: left;
font-size: 0.75rem;
margin: 0px;
}
span.facebook-icon {
display: inline-block;
margin-left: 0px;
width: 19px;
height: 19px;
vertical-align: middle;
}
.icon-arrow {
display: none;
}
.login-bottom {
background-color: #E86C00;
color: #FFFFFF;
}
.login-bottom img {
margin-right: 16px;
}
.login-bottom ul {
color: #ffffff;
}
.login-bottom ul li {
font-size: 0.75rem;
border-color: #ffffff;
}
.login-bottom ul li::after {
border-color: #fff;
}
.ttb-breadcrumb {
margin-left: 30px;
}
.mobile-before-login {
padding-top: 200px;
}
.carousel-control-prev,
.carousel-control-next {
z-index: 2;
}
/* pie chart */
.pie-tab-content .card-select-block {
left: calc(-125px + 20.33%);
}
#ttb-menu ul.menu-list,
#desk-header,
.ttb-breadcrumb,
#ttb-sec-menu,
.content,
nav#footer-breadcrumb-nav ul,
footer>div {
max-width: 907px;
}
.container {
min-height: calc(100vh - 206px);
}
/* 首頁 */
.account-left {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.account-right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.account-announcement-block {
margin: 0 auto 20px;
}
.account-announcement-block .content {
width: 100%;
border-radius: 0px;
}
}
/* 手機和平板 */
@media screen and (max-width: 991px) {
.opacity-block {
background: rgba(80, 80, 80, 0.4);
height: 100%;
}
.login-title-block {
background-color: #ED6D00;
}
/* 下載選項 */
select.minimal {
display: none;
}
header {
padding: 0;
}
.header-container .header-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-top: 50px;
height: calc(100vh - 50px);
overflow-x: hidden;
overflow-y: auto;
z-index: 1050;
background-color: #fff;
}
nav#header-breadcrumb-nav {
margin-top: 50px;
}
#desk-header {
display: none;
}
#mobile-header {
display: flex;
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #ed6d00;
justify-content: space-between;
z-index: 1050;
}
#mobile-header::after {
content: '';
width: 0;
height: 100%;
display: inline-block;
position: relative;
vertical-align: middle;
background: #f00;
}
#mobile-header img,
#mobile-header a {
height: 23px;
vertical-align: middle;
align-self: center;
margin: 0 2%;
}
#mobile-header img.mobile-logo {
margin: 0 auto;
}
/*20190905*/
#mobile-header img,
#mobile-header a,
.belongin-header img {
height: 23px;
align-self: center;
margin: 0 auto;
text-align: center;
}
/*20190905*/
#mobile-header a {
position: absolute;
right: 10px;
}
select.custom-select.multi-lang-select {
display: block;
margin: 0 auto;
}
#header-nav,
/* #id-block, */
#asied-menu,
#ttb-menu,
#ttb-sec-menu {
display: none !important;
}
/*20190905*/
#header-nav,
/* #id-and-fast, */
/* #id-block, */
#asied-menu,
#ttb-menu,
#ttb-sec-menu {
display: none !important;
}
/* 20220830 更新瀏覽器畫面縮小時，計時器不會跑版 */
#id-and-fast,
#id-block{
display: block;
}
/* 行事曆 */
.main-content-block .fc-toolbar.fc-header-toolbar div:nth-child(2) {
text-align: center;
}
main {
padding: 0 !important;
}
#main-content h2 {
font-size: 1.25rem;
margin: 0 0 30px 0;
}
#main-content .ttb-pup-h2 {
margin: 20px 0;
}
/*20190905*/
.main-content-block {
margin-top: 0;
padding: 0px 0px 20px 0px;
}
/* 階段提示條*/
#step-bar ul li::before {
display: block;
/* margin: 0 auto; */
margin-left: 11px;
}
#step-bar ul li::after {
position: absolute;
top: unset;
left: unset;
margin-left: 10px;
}
/* beLogin頁面 */
.belongin-header {
display: flex;
height: 50px;
background-color: #ed6c1e;
justify-content: space-between;
}
.belongin-header::after {
content: '';
width: 0;
height: 100%;
display: inline-block;
position: relative;
vertical-align: middle;
background: #f00;
}
.belongin-header img,
#mobile-header a {
height: 23px;
vertical-align: middle;
align-self: center;
margin: 0 2%;
}
.belongin-header img.mobile-logo {
margin: 0 auto;
}
.tcontainer {
width: 100vw;
}
/*20190905*/
.login-banner {
display: none;
background-image: url('../img/bg-photo@2x.png');
background-position: 40% -80px;
}
.banner-slogan {
display: block;
color: #fff;
margin: 0 auto;
padding: 45px 0 0 0;
font-size: 1.375rem;
font-weight: 600;
line-height: 1.53;
letter-spacing: 2px;
text-align: center;
}
.header-info {
font-size: 0.875rem;
margin-right: 10px;
}
.ticker-wrap ul li {
font-size: 0.875rem;
letter-spacing: 0px;
}
img.more-btn {
width: 37px;
}
.element-item span {
font-size: 0.875rem;
}
.login-menu ul a {
font-size: 0.875rem;
font-weight: lighter;
}
.mobile-before-login {
display: block;
}
.login-input-block {
display: flex;
justify-content: space-between;
margin: 0 auto 20px auto;
width: 300px;
height: 45px;
border-radius: 22.5px;
padding: 0 15px;
background-color: rgba(255, 255, 255, 0.2);
border: solid 1px rgba(255, 255, 255, 0.46);
}
.login-input-block input {
display: block;
font-size: 1.125rem;
font-weight: bold;
width: 200px;
height: 45px;
background-color: rgba(255, 255, 255, 0);
border: none;
}
.login-input-block .veri-code-input {
width: 100px;
}
.login-input-block .question-mark {
display: block;
position: relative;
width: 22px;
height: 22px;
top: 11.5px;
background: url("../img/icon-question-mark-01.png");
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.17);
border-radius: 11px;
border: none;
}
.login-input-block:nth-child(4) {
margin-bottom: 20px;
}
/*
.login-bottom ul li:last-child a {
border-left: 1px solid #ffffff;
}
*/
/*20190905*/
.mobile-before-login .login-input-block:nth-child(4) {
margin-bottom: 20px;
}
.login-icon {
padding: 0px;
}
.news-more {
left: 92%;
}
/* 客戶資料變更 */
#update-content .modal-content .modal-body {
width: auto;
padding: 0 10px;
}
/* 置底麵包屑 */
.footer-breadcrumb-nav {
height: 40px;
background: rgba(181, 143, 77, 0.3);
padding: 0 30px;
display: block;
width: 100%;
}
.footer-breadcrumb-nav ul {
text-align: left;
display: flex;
justify-content: space-between;
}
.footer-breadcrumb-nav ul div {
text-align: left;
display: flex;
justify-content: space-between;
}
.footer-breadcrumb-nav ul div li {
display: inline-block;
justify-content: space-between;
/* margin: 8px 5%; */
}
.footer-breadcrumb-nav ul li a {
color: #4c4c4c;
text-decoration: none;
line-height: 40px;
margin-right: 10px;
display: block;
}
.footer-breadcrumb-nav button {
display: block;
background-repeat: no-repeat;
background-position: center;
background-image: url('../img/icon-top.png');
border: none;
position: left;
width: 50px;
height: 20px;
margin: 10px 0;
}
.mobile-icon,
.no-l-disappear-btn {
display: none;
}
.enterprise-info-part-1 {
display: flex;
justify-content: space-between;
color: #fff;
font-size: 0.75rem;
height: 65px;
width: calc(100%- 230px);
font-weight: bold;
letter-spacing: 1.2px
}
.enterprise-info-part-1 img {
display: inline-block;
}
.contact-info {
/* padding: 0 5%; */
padding: 0 1%;
width: 100%;
/* display: block; */
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.contact-info p {
height: 20px;
font-size: 0.75rem;
font-weight: bold;
letter-spacing: 1.2px;
display: block;
flex: 0 0 49%;
}
.enterprise-info-part-2 {
padding-top: 8px;
color: #fff;
font-size: 0.75rem;
font-weight: normal;
letter-spacing: 1.2px;
border-top: #fff solid 1px;
}
/* tab nav */
.nav-tabs {
height: auto;
flex-wrap: nowrap;
white-space: nowrap;
overflow: scroll;
}
.nav-tabs .nav-link {
padding: 10px;
line-height: 2rem;
}
.ttb-sm-btn {
height: auto;
}
/* pupup block */
#main-content .pupup-block .card-block {
width: 95%;
margin-top: 20%;
}
.card-block>div {
margin: 0 auto;
padding: 1px 10px 0px;
}
.ttb-guide-btn {
display: block;
position: inherit;
margin: 0 auto;
}
.card-detail-block div.card-center-block.d-flex .ttb-pup-block {
margin: 10px;
flex: 0 1 100%;
}
.card-detail-block div.card-center-block.d-flex .ttb-pup-block.square-style {
margin: 10px auto;
}
/*add20200227 login footer */
.tbb-login-name {
margin: 5px 0px;
}
.login-bottom ul {
margin: 5px 0px;
}
.enterprise-info {
margin: 5px 0px;
}
}
/* 手機 特別寫 */
@media screen and (max-width: 450px) {
.card-block .tab-content .ttb-button {
bottom: -30px;
}
.content #main-content {
margin: 30px 8px;
}
}
/* 桌機 */
@media screen and (min-width: 992px) {
#password-miss .modal-dialog,
.content-more .modal-dialog {
width: 80%;
max-width: 1040px;
padding: 0 25px;
}
#main-content .pupup-block {
padding: 0 25px;
}
#password-miss .modal-dialog .modal-body {
width: 552px;
margin: 0 auto;
}
header {
background-color: #ed6c1e;
overflow: auto;
padding: 0;
}
#mobile-header {
display: none;
}
.container.login-container .row>div:first-of-type {
-ms-flex: 0 0 calc(100% - 360px);
flex: 0 0 calc(100% - 360px);
max-width: calc(100% - 360px);
flex-basis: calc(100% - 360px);
}
.container.login-container .row>div:last-of-type {
-ms-flex: 0 0 360px;
flex: 0 0 360px;
max-width: 360px;
}
.container.login-container .row>div:first-of-type {
background-color: #ffffff;
}
.be-longin-header,
#be-longin-header-nav {
display: none;
}
/*20190905*/
.login-banner {
background-size: 100% 382px;
}
footer div>div:last-child {
padding: 0;
}
footer div>div:last-child ul {
float: right;
}
/* login */
.login-menu {
position: absolute;
bottom: 100px;
left: 0;
right: 0;
}
.enterprise-info {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
}
.modal-dialog {
min-width: 512px;
}
.container {
min-height: calc(100vh - 428px);
}
}
/* 桌機 特別寫 */
@media screen and (min-width: 992px) {
.carousel-item,
.banner-slogan {
height: calc(100vh - 86px - 154px - 284px - 57px);
min-height: 382px;
background-position: center;
}
}
@media screen and (min-width: 1440px) {
.news-info {
margin-right: 50px;
}
.carousel-item,
.banner-slogan {
height: calc(100vh - 86px - 154px - 186px - 57px);
background-position: center;
/* min-height: 382px; */
}
img.more-btn {
width: 50px;
height: 11.95px;
}
.element-item {
margin: 25px 0px;
}
.container.login-container .row>div:first-of-type {
-ms-flex: 0 0 calc(100% - 440px);
flex: 0 0 calc(100% - 440px);
max-width: calc(100% - 440px);
flex-basis: calc(100% - 440px);
}
.container.login-container .row>div:last-of-type {
-ms-flex: 0 0 440px;
flex: 0 0 440px;
max-width: 440px;
}
.keyboardBlock.login-keyboard {
top: 255px;
}
.element-area {
width: 1000px;
}
.login-news {
max-width: 1030px;
margin: 0 auto;
padding: 0px 25px 20px;
}
.login-logo {
max-width: 350px;
margin: 40px auto;
}
.login-submit-block {
margin-top: 46px;
}
.lg-login .login-input-block,
.web-switch {
width: 375px;
}
}
/*20190905*/
/* header width contorl */
@media screen and (max-width: 375px) {
#ttb-menu ul.menu-list,
#desk-header,
.ttb-breadcrumb,
#ttb-sec-menu,
.content,
nav#footer-breadcrumb-nav ul,
footer>div {
max-width: 358px;
}
}
@media screen and (min-width: 376px) and (max-width: 767px) {
#ttb-menu ul.menu-list,
#desk-header,
.ttb-breadcrumb,
#ttb-sec-menu,
.content,
nav#footer-breadcrumb-nav ul,
footer>div {
max-width: 720px;
}
}
@media screen and (min-width: 1142px) {
#ttb-menu ul.menu-list,
#desk-header,
.ttb-breadcrumb,
#ttb-sec-menu,
.content,
nav#footer-breadcrumb-nav ul,
footer>div {
max-width: 1142px;
}
footer div div {
margin-left: calc(1142px - 588px);
}
}
@media (max-width: 576px) {
#fundtable tbody tr td:nth-child(1) {
text-align: right;
}
#fundtable tbody tr td:nth-child(2) {
text-align: right;
}
#fundtable tbody tr td:nth-child(3) {
text-align: right;
}
#fundtable tbody tr td:nth-child(5) {
text-align: center;
}
#fundtable.fundtable-new tbody tr td:nth-child(1) {
text-align: center;
}
#fundtable.fundtable-new tbody tr td:nth-child(2) {
text-align: center;
}
#fundtable.fundtable-new tbody tr td:nth-child(3) {
text-align: center;
}
#fundtable.fundtable-new tbody tr td:nth-child(5) {
text-align: right;
}
}
@media screen and (max-width: 640px) {
.dataTables_filter {
position: inherit !important;
text-align: left !important;
top: 0;
}
}
/*add 20200413 刪除select ie樣式*/
select::-ms-expand {
display: none;
}
.login-custom-select {
/*將預設的select選擇框樣式清除*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
}
/*datatable 鎖定第一欄寬度*/
div.DTFC_LeftWrapper table.dataTable {
min-width: 100px;
}
/*dataTables scrollbar消除
div:not(.dataTables_scrollFoot)::-webkit-scrollbar {
display: none;
}
add 20200407 datatables 第一欄顏色透明
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody tbody tr td:first-child {
color: transparent;
}
*/
/*
.DTFC_LeftBodyLiner{
overflow:hidden !important;
}*/
/* 簡訊驗證碼 下方提示小字 */
.otp-hint{
color: #767676;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 1.4rem */
letter-spacing: 0.0525rem;
}
/* 簡訊驗證碼 下方提示小字 倒數時間 紅字 */
.otp-timeout{
color:#FF4000
}
.pipa {
height: 450px;
overflow-y: scroll;
border-radius: 6px;
}
#txncssslog{
right:-17px;
}
#txncssslog-1{
margin: 0px auto;
}
#MSGINPUT{
width:400%!important;
}
#MSG{
width:100%!important;
height:200px!important;
padding: 0px!important;
margin:10px 0 0 0!important;
}
@media screen and (min-width: 260px) and (max-width: 285px) {
#MSGINPUT{
width:100%!important;
}
}
@media screen and (min-width: 310px) and (max-width: 330px) {
#MSGINPUT{
width:100%!important;
}
}
@media screen and (min-width: 350px) and (max-width: 380px) {
#MSGINPUT{
width:100%!important;
}
}
@media screen and (min-width: 400px) and (max-width: 530px) {
#MSGINPUT{
width:100%!important;
}
}
@media screen and (min-width: 530px) and (max-width: 650px) {
#MSGINPUT{
width:100%!important;
}
}
@media screen and (min-width: 650px) and (max-width: 800px) {
#MSGINPUT{
width:110%!important;
}
}
@media screen and (min-width: 800px) and (max-width: 1010px) {
#MSGINPUT{
width:90%!important;
}
}
@media screen and (min-width: 1010px) and (max-width: 1080px) {
#MSGINPUT{
width:90%!important;
}
}
@media screen and (min-width: 1050px) and (max-width: 1250px) {
#MSGINPUT{
width:300%!important;
}
}
@media screen and (min-width: 1250px) and (max-width: 1360px) {
#MSGINPUT{
width:320%!important;
}
}
@media screen and (min-width: 1360px) and (max-width: 1420px){
#MSGINPUT{
width:340%!important;
}
}
@media screen and (min-width: 1420px){
#MSGINPUT{
width:350%!important;
}
}
/* 20220829 更新瀏覽器畫面縮小時，計時器不會跑版 */
@media screen and (max-width: 991px) {
.id-time-991 {
text-align: right;
}
.id-name-991{
text-align: right;
}
#id-fast-name,
#id-and-fast{
display:flex;
justify-content:center;
align-content:center;
}
}
@media screen and (max-width: 465px){
span.id-name{
font-size: 1.1rem;
}
}
@media screen and (max-width: 447px){
span.id-name{
font-size: .9rem;
}
span.id-time-991{
font-size: 0.8rem;
}
#id-and-fast button{
font-size: .6rem;
}
}
@media screen and (max-width: 379px){
span.id-name{
font-size: 0.8rem;
}
#id-and-fast button{
font-size: 0.3rem;
}
}
/* 20230330 CreditCard */
.creditcard-btn-group{
display:flex;
justify-content: space-around
}
.creditcard-btn {
border-radius: 5px;
border: none;
font-size: 18px;
width: 100%;
margin:0 5px;
background-color: #ed6c1e;
color: #ffffff;
}
.creditcard-btn:disabled {
background-color: #aaaaaa;
box-shadow: 0px 4px 10px #00000029;
opacity: 0.5;
box-shadow: none;
cursor: not-allowed;
}
.creditcard-btn1 {
border-radius: 5px;
border: none;
font-size: 18px;
width: 160px;
background-color: #ed6c1e;
color: #ffffff;
}
.flex-wrap {
display: flex; /* 容器變成 Flex，子元素橫向排列 */
flex-wrap: wrap; /* 子元素太多則自動排列 */
}
.flex-wrap li {
margin-left: 1rem;
}