@charset "UTF-8";
/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    min-width: 320px;
}

.main.main--bg, .main.main--finance {
    padding-top: 0px;
    background: none;
}

.docking .menu {
    position: absolute;
    background: url(/Images/bg-menu.png) repeat 0 0;
    z-index: 90;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    /*.menu__wrap {
  			padding-left: 50px;
  
  			&:before {
  				content: "";
  				display: inline-block;
  				width: 32px;
  				height: 32px;
  				position: absolute;
  				margin-left: -40px;
  				margin-top: 20px;
  				background: url(~/Images/icon-logo.png) no-repeat 0 center;
  				vertical-align: middle;
  			}
  		}
  
  		.mm1 {
  			.mm1__item {
  				color: #fff;
  
  				&:hover {
  					color: $font-color__gn;
  				}
  
  				&:after {
  					background-position: -20px -10px;
  				}
  			}
  		}*/
}

.nav-open {
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
}

.nav-open .menu {
    width: 100%;
    left: 0;
}

.nav-open .header .header__burger {
    background-color: #f0f0f0;
}

.nav-open .header .header__burger:before {
    background-position: 0 -24px;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 50px 10px 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 100;
}

.header + * {
    margin-top: 50px;
}

.header .header__logo {
    float: none;
    margin-left: 0;
}

.header .header__logo .logo__company {
    width: 123px;
    height: 30px;
    background-image: url(/Images/logo-mobile@3x.png);
    background-size: contain;
}

.header .header__logo .logo__site {
    margin-top: 12px;
    margin-left: 15px;
    width: 120px;
    height: 18px;
    background-image: url(/Images/site-mobile@3x.png);
    background-size: contain;
}

.header .header__link {
    position: absolute;
    right: 0;
    top: 0;
    /*display: none;*/
}

.header .header__link .link__item {
    display: none;
}

.header .header__burger {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
    margin-left: -4px;
    border-left: 1px solid #149a88;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
}

.header .header__burger:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/Images/icon-burger@3x.png) no-repeat 0 0;
    background-size: 24px;
    vertical-align: middle;
}

#btnBurger {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
    margin-left: -4px;
    /*border-left: 1px solid #149a88;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
}

#btnBurger:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/Images/icon-burger@3x.png) no-repeat 0 0;
    background-size: 24px;
    vertical-align: middle;
}

.lang {
    vertical-align: middle;
    margin-left: 0;
    float: none;
    margin-right: 0px;
}

.lang .transformSelect.trans-element li span {
    padding: 11px 40px 11px 10px;
}

.lang .lang__switch {
    margin-right: 0;
    padding: 15px 18px;
}

.lang .lang__switch:before, .lang .lang__switch:after {
    content: none;
}

.lang .lang__list {
    width: 180px;
    font-size: 17px;
    text-align: center;
}

.lang .lang__list > li > a {
    padding: 15px 10px;
}

.menu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    min-width: 0;
    height: 100%;
    margin-top: 0;
    border-bottom: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    -moz-transition: left ease 0.3s;
    -o-transition: left ease 0.3s;
    -webkit-transition: left ease 0.3s;
    transition: left ease 0.3s;
    z-index: 90;
}

.menu .menu__wrap {
    position: relative;
    height: 100%;
}

.menu .identity {
    position: relative;
    display: block;
    padding: 25px 17px;
    border-bottom: 1px solid #ccc;
    background-color: #e7eeef;
    z-index: 110;
    height: 0px; /*讓登出div不會中間白色*/
}

.menu .identity .identity__btn {
    float: right;
    margin-left: 0;
}

.menu .mm1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding-top: 80px;
    background-color: #fff;
    text-align: left;
    z-index: 100;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu .mm1 .mm1__list {
    display: block;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.menu .mm1 .mm1__list > li {
    display: block;
    /*float: none;*/
    width: auto;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
}

.menu .mm1 .mm1__list > li:hover .mm1__item {
    box-shadow: none;
}

.menu .mm1 .mm1__list > li:hover .mm1__item:after {
    background-position: -10px -30px;
}

.menu .mm1 .mm1__list > li:hover .mm2 {
    max-height: none;
}

.menu .mm1 .mm1__list > li.on .mm1__item {
    background-color: transparent;
    color: #149a88;
}

.menu .mm1 .mm1__list > li.on .mm1__item:after {
    background-position: -10px -30px;
}

.menu .mm1 .mm1__list > li.on:hover .mm1__item:after {
    background-position: -10px -30px;
}

.menu .mm1 .mm1__item {
    font-size: 19px;
    padding: 16px 17px;
}

.menu .mm1 .mm1__item:after {
    float: right;
    margin: 9px 0;
    background-position: -10px -30px;
}

.menu .mm1 .mm1__item.active + .mm2 {
    left: 0;
    max-height: none;
}

.menu .mm2 {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    padding-top: 80px;
    max-height: 0;
    height: 100%;
    -moz-transition: left ease 0.3s;
    -o-transition: left ease 0.3s;
    -webkit-transition: left ease 0.3s;
    transition: left ease 0.3s;
    z-index: 110;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: transparent;
}

.menu .mm2 .mm2__wrap {
    height: 100%;
    background-color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.menu .mm2 .mm2__list {
    padding: 0;
}

.menu .mm2 .mm2__list > li {
    float: none;
    width: auto;
    padding-right: 0;
    background-color: #e5e5e5;
    border-bottom: 1px solid #fff;
}

.menu .mm2 .mm2__list > li:hover .mm2__item {
    color: #333;
}

    .menu .mm2 .mm2__list > li:hover .mm2__item:after {
        background-position: -30px -30px;
    }

.menu .mm2 .mm2__list > li:nth-of-type(5) ~ li {
    margin-top: 0;
}

.menu .mm2 .mm2__item {
    position: relative;
    padding: 18px 17px;
    font-size: 16px;
}

.menu .mm2 .mm2__item:after {
    position: absolute;
    margin: 7px 0;
    width: 10px;
    height: 10px;
    right: 17px;
    top: 50%;
    margin-top: -5px;
    background: url(/Images/icon-arrow_10px@3x.png) no-repeat -30px -30px;
    background-size: 40px;
}

.menu .mm2 .mm2__item > span {
    display: inline;
}

.menu .mm2 .mm2__item.active + .mm3 {
    left: 0;
}

.menu .mm3 {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    margin-top: 0;
    -moz-transition: left ease 0.3s;
    -o-transition: left ease 0.3s;
    -webkit-transition: left ease 0.3s;
    transition: left ease 0.3s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 120;
}

.menu .mm3 .mm3__wrap {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
}

.menu .mm3 .mm3__list > li {
    position: relative;
    background-color: #e5e5e5;
    border-bottom: 1px solid #fff;
}

.menu .mm3 .mm3__list > li:hover .mm3__item {
    color: #333;
    text-decoration: none;
}

.menu .mm3 .mm3__item {
    display: inline-block;
    padding: 18px 17px;
    font-size: 16px;
    color: #333;
    width: 100%;
}

.menu .mm3 .mm3__item:before {
    content: none;
}

.menu .mm3 .mm3__tip {
    position: static;
    float: right;
    right: 17px;
    margin: 16px 19px 22px;
}

.menu .mm3 .mm3__popup {
    display: none;
    top: auto;
    padding: 10px 17px;
}

.menu .mm3 .mm3__popup .popup__wrap {
    width: auto;
    margin-left: 0;
}

.menu .mm3 .mm3__popup .popup__wrap:before {
    top: -7px;
    left: auto;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #149a88;
    border-top: none;
}

.menu .mm__back {
    display: block;
    padding: 16px 17px;
    font-size: 19px;
    color: #fff;
    background-color: #009f8b;
    text-decoration: none;
}

.menu .mm__back:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    margin-top: -2px;
    background: url(/Images/icon-arrow_10px.png) no-repeat -20px -20px;
    vertical-align: middle;
}

.menu .mm__title {
    display: block;
    padding: 16px 17px;
    font-size: 19px;
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    text-decoration: none;
}

.menu .mm__link {
    color: #149a88;
}

.menu .mm__hide {
    overflow: hidden !important;
}

.footer {
    margin-top: 30px;
}

.footer .footer__link {
    float: none;
    text-align: center;
}

.footer .footer__link > li {
    display: inline-block;
    float: none;
    margin-left: -5px;
}

.footer .footer__copyright {
    float: none;
    margin-top: 13px;
    text-align: center;
}

.footer .footer__copyright span {
    display: block;
}

.main-top {
    padding: 1px 15px;
    border-bottom: 1px solid #dfdfdf;
}

    .main-top .main-top__info {
        display: none;
    }

.breadcrumb .breadcrumb__item {
    font-size: 14px;
}

.content {
    margin: 0px 0 0;
}

.master {
    margin: 17px;
}

.master.master--large {
    font-size: 14px;
}

.master.master--medium {
    font-size: 14px;
}

.master.master--small {
    font-size: 14px;
}

.submenu {
    margin-top: 55px;
    z-index: 80;
}

.submenu__list > li {
    margin-top: 0;
    border-top: 0;
}

.submenu--open {
    position: fixed;
    height: 100%;
}

.submenu--open .submenu {
    z-index: 120;
}

.submenu--open .submenu + .content {
    margin-left: 0;
}

.submenu--open .submenu + .content .submenu-ctrl {
    margin-top: 55px;
    left: 273px;
    z-index: 120;
}

.submenu--open .submenu--s + .content .submenu-ctrl {
    left: 208px;
}

.submenu--open .submenu-mask {
    display: block;
    z-index: 110;
}

.submenu-ctrl {
    left: 0;
    margin-top: 55px;
    z-index: 80;
}

.submenu-mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    background: url(/Images/bg-mask.png) repeat;
}

.step-bar {
    font-size: 13px;
    border-top: 0px;
}

.step-bar__name {
    padding: 11px 10px 12px 35px;
}

.step-bar__btn {
    padding: 3px 1px;
}

.steps {
    padding: 15px 3px 16px 17px;
}

.steps > li {
    padding-left: 13px;
}

.steps > li:before {
    left: 2px;
}

.steps .steps__item--eps {
    display: inline-block;
    width: 12px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.fontsize {
    display: none;
}

.gotop {
    right: 0;
}

.helper,
.helper-mask {
    /*display: none !important;*/
}

.helper {
    top: 54px;
    width: 60px;
}

.helper .helper__btn {
    opacity: 0.8;
}

.helper .helper__btn:before {
    width: 60px;
    height: 60px;
    background-size: 60px;
}

.helper .helper__wrap {
    margin-top: -83px;
    padding-top: 50px;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.helper .helper__head {
    position: absolute;
    width: 100%;
    top: 0;
}

.helper .helper__content {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.helper--open .helper {
    height: 100%;
    margin-top: 30px;
}

/* ==========================================================================
   Main
   ========================================================================== */
/*---------- icon ----------*/
/*---------- icon - sample ----------*/
/*---------- button ----------*/
/*---------- button - color ----------*/
/*---------- widget ----------*/
.tab {
    padding-top: 0;
}

.tab .tab__nav {
    display: table;
    width: 100%;
    background-color: transparent;
}

.tab .tab__nav > li {
    float: none;
    display: table-cell;
    width: 360px;
    background-color: transparent;
}

.tab .tab__nav > li.active {
    background-color: #149a88;
}

.tab .tab__nav-a {
    display: block;
    padding: 3px;
    font-weight: bold;
    text-align: center;
}

.tab.tab--gn .tab__nav > li {
    border-top: 0;
}

.tab.tab--gn .tab__nav > li:before {
    content: none;
}

.tab.tab--gn .tab__nav > li.active .tab__nav-a {
    padding: 11px 13px;
}

.tab.tab--gn .tab__nav-a {
    padding: 11px 13px;
    font-size: 16px;
}

.tab.tab--horizon .tab__nav {
    float: none;
    width: auto;
}

.tab.tab--horizon .tab__panel {
    margin-left: auto;
}

/*---------- index ----------*/
.idx-login {
    padding: 0 17px;
}

.idx-login .idx-login__main,
.idx-login .idx-login__main--c {
    width: auto;
    position: static;
    right: auto;
    top: auto;
    margin-right: auto;
}

.bulletin .bulletin__wrap {
    padding: 0 17px;
}

.bulletin .bulletin__title {
    display: none;
}

.bulletin .bulletin__items-a {
    height: 41px;
}

.bulletin .bulletin__nav {
    width: 70px;
    text-align: center;
}

.bulletin ~ .main {
    padding-top: 0;
}

.idx-kv {
    height: 290px;
}

.idx-kv-small {
    height: 30px;
}

.idx-kv .bxslider > li {
    height: 290px;
}

.idx-kv.idx-kv--bg {
    position: absolute;
    width: 100%;
    height: 415px;
    margin-bottom: 20px;
}

.idx-kv.idx-kv--bg + .idx-login {
    padding: 40px 17px;
}

.idx-kv .bxslider .bxslider__item {
    background-size: cover;
}

.idx-cnt {
    margin-bottom: 0;
}

.idx-cnt .idx-cnt__news {
    float: none;
    width: auto;
    padding: 0 17px;
}

.idx-cnt .idx-cnt__links {
    float: none;
    width: auto;
    margin-top: 40px;
    padding-left: 0;
    background: url(/Images/bg-useful.png) no-repeat center center;
    background-size: cover;
}

.idx-cnt .idx-cnt__title {
    margin: 20px auto 10px;
}

.news {
    height: auto;
}

.news__list > li {
    height: 110px;
}

.news__date {
    width: 80px;
    height: 80px;
    padding: 17px 0;
}

.news__content {
    height: 70px;
    font-size: 16px;
}

.useful {
    padding: 0 20px;
    height: auto;
    background: none;
}

.useful .useful__list {
    background: none;
}

.useful .useful__item {
    font-size: 15px;
}

.useful .useful__item:before {
    margin: 0 auto;
}

/*---------- 帳戶總覽 ----------*/
.my {
    padding: 0 15px;
}

.my__info,
.my__chart {
    float: none;
    padding: 15px 0;
    width: auto;
}

    .my__info + .my__content,
    .my__chart + .my__content {
        float: none;
        padding: 15px 0;
        width: auto;
    }

.my--overview .collapse__tab {
    padding: 13px 15px;
    font-size: 16px;
}

    .my--overview .collapse__tab:after {
        right: 15px;
    }

.calendar .calendar__date {
    padding: 15px 15px 0;
}

.calendar .calendar__list > li {
    padding: 5px 15px;
}

.account .account__title {
    float: left;
    width: 55%;
}

.account .account__name {
    min-width: 72px;
}

.account .account__amount {
    float: right;
    width: 45%;
    padding-right: 25px;
}

.account .account__unit {
    min-width: 72px;
}

.account .account__action {
    clear: both;
    display: block;
    padding-left: 30%;
    margin: 50px 0 0;
}

.account.account--indent .account__title {
    padding-left: 15px;
}

.account-list > li {
    padding: 13px 15px;
}

.overview {
    margin: 0;
    /*.overview__link{
  		font-size: 15px;
  		font-weight: bold;
  		color: #666;
  
  		&:hover {
  			color: $font-color__gn;
  		}
  
  		&.active {
  			font-size: 18px;
  			color: $font-color__gn;
  			text-decoration: none;
  		}
  
  		& ~ .overview__link {
  			margin-left: 15px;
  		}
  	}*/
}

.overview .overview__links {
    text-align: center;
}

/*---------- other ----------*/
.cash-box > li {
    width: 33.33%;
    margin: 0 0 10px;
}

.cash-box .cash-box__item {
    width: 110px;
    height: 110px;
    padding: 17px 5px;
    font-size: 12px;
}

.cash-box .cash-box__item:before {
    margin-bottom: 12px;
}

.cash-box .cash-box__wrap {
    width: 110px;
    height: 110px;
    padding: 12px 5px;
}

.cash-box .cash-box__link {
    font-size: 12px;
}

.cash-box .cash-box__link:before {
    margin-bottom: 5px;
}

.cash-box .cash-box__link--add,
.cash-box .cash-box__link--edit {
    width: 110px;
    height: 110px;
    padding: 35px 5px;
}

.cash-box .cash-box__big {
    font-size: 17px;
}

.cash-box .cash-box__del {
    width: 25px;
    height: 25px;
}

.cash-box .cash-box__del:before {
    margin: 2.5px;
}

.tb--icon {
    width: auto;
}

.tb--icon--e {
    float: right;
    margin-left: 0px;
}

.tb--icon--e + span {
    display: block;
    margin-left: 0px;
}

.tb.tb--rwd {
    display: block;
    border: none;
}

.tb.tb--rwd thead {
    display: none;
}

.tb.tb--rwd tbody,
.tb.tb--rwd tfoot {
    display: block;
}

.tb.tb--rwd tbody tr,
.tb.tb--rwd tfoot tr {
    display: block;
}

.tb.tb--rwd tbody tr ~ tr,
.tb.tb--rwd tfoot tr ~ tr {
    margin-top: 25px;
}

.tb.tb--rwd tbody th,
.tb.tb--rwd tbody td,
.tb.tb--rwd tfoot th,
.tb.tb--rwd tfoot td {
    display: none;
}

.tb.tb--rwd tbody th[data-th],
.tb.tb--rwd tbody td[data-th],
.tb.tb--rwd tfoot th[data-th],
.tb.tb--rwd tfoot td[data-th] {
    display: inline-block;
}

.tb.tb--rwd tbody td[data-th],
.tb.tb--rwd tfoot td[data-th] {
    width: 100%;
    margin-top: -1px;
    padding: 0;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tb.tb--rwd tbody td[data-th]:first-of-type,
.tb.tb--rwd tfoot td[data-th]:first-of-type {
    margin-top: 0;
}

.tb.tb--rwd tbody td[data-th]:before,
.tb.tb--rwd tfoot td[data-th]:before {
    content: attr(data-th);
    display: table-cell;
    width: 130px;
    padding: 12px 10px;
    border-right: #dddddd 2px solid;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    vertical-align: middle;
    white-space: pre;
}

.tb.tb--rwd tbody td[data-th] > div,
.tb.tb--rwd tfoot td[data-th] > div {
    display: table-cell;
    padding: 12px 10px;
}

.tb.tb--rwd tfoot tr {
    margin-top: 25px;
}

.tb.tb--rwd tfoot td[data-th] {
    border: 0;
}

.tb.tb--rwd tfoot td[data-th]:before {
    float: left;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    text-align: left;
}

.tb.tb--rwd tfoot td[data-th] > div {
    display: block;
    padding: 15px 10px;
}

.tb.tb--rwd.tb--wt {
    background: none;
}

.tb.tb--rwd.tb--wt tr {
    background-color: #fff;
}

.tb.tb--rwd + .tb--rwd {
    margin-top: 25px;
}

.tb.tb--rwd tbody td.td-block {
    display: block !important;
    background-color: #e5f5f3;
}

.tb .td--currency {
    text-align: left;
}

.tb.tb--summary tbody tr ~ tr {
    margin-top: -1px;
}

.tb.tb--summary tbody th[data-th],
.tb.tb--summary tbody td[data-th] {
    border: 1px solid #dedede;
}

.tb.tb--summary tbody th[data-th]:before,
.tb.tb--summary tbody td[data-th]:before {
    float: left;
    width: 190px;
    border: 0;
}

.tb.tb--summary tbody th[data-th] div,
.tb.tb--summary tbody td[data-th] div {
    float: right;
    padding: 12px 17px;
}

.tb.tb--summary .tr--sum {
    display: table;
    width: 100%;
    margin-top: 25px;
}

.tb.tb--summary .tr--sum td[data-th] {
    display: table-cell;
    width: auto;
    border: 0;
    text-align: center;
}

.tb.tb--summary .tr--sum td[data-th]:before, .tb.tb--summary .tr--sum td[data-th] > div {
    float: none;
    display: inline-block;
    width: auto;
    padding: 12px 0;
    vertical-align: middle;
}

.tb.tb--summary .tr--sum td[data-th]:before {
    font-size: 18px;
}

.tb.tb--collapse tbody tr {
    background-color: transparent;
}

.tb.tb--collapse tbody tr ~ tr {
    margin-top: -1px;
}

.tb.tb--collapse tbody tr.active td[data-th] {
    display: block;
    background-color: #f6f6f6;
}

.tb.tb--collapse tbody tr.active td[data-th]:first-of-type > div:after {
    background-position: 0 0;
}

.tb.tb--collapse tbody tr.active td[data-th]:nth-of-type(2) {
    border-top-style: dashed;
}

.tb.tb--collapse tbody tr:first-of-type td[data-th]:first-of-type:before {
    content: attr(data-th);
    display: block;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #dedede;
    background-color: #fff;
    text-align: center;
}

.tb.tb--collapse tbody td[data-th] {
    display: none;
    background-color: #f6f6f6;
}

.tb.tb--collapse tbody td[data-th]:first-of-type {
    display: block;
    background-color: #fff;
}

.tb.tb--collapse tbody td[data-th]:first-of-type:before {
    content: none;
}

.tb.tb--collapse tbody td[data-th]:first-of-type > div {
    display: block;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.tb.tb--collapse tbody td[data-th]:first-of-type > div:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -7px;
    background: url(/Images/icon-news.png) 0 -15px;
    vertical-align: middle;
}

.tb.tb--rotate {
    /*display: block;*/
    border: 0;
}

.tb.tb--rotate:before, .tb.tb--rotate:after {
    content: "";
    display: table;
}

.tb.tb--rotate:after {
    clear: both;
}

.tb.tb--rotate tr {
    display: table-cell;
    width: 300px;
    border-right: 1px solid #dedede;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tb.tb--rotate tr:first-child {
    border-left: 1px solid #dedede;
}

.tb.tb--rotate tr:nth-of-type(even) {
    background-color: transparent;
}

.tb.tb--rotate th,
.tb.tb--rotate td {
    display: block;
    margin-top: -1px;
    padding: 10px 5px;
    min-height: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
}

.tb.tb--rotate th:nth-of-type(even),
.tb.tb--rotate td:nth-of-type(even) {
    background-color: #f6f6f6;
}

.tb-tip {
    margin: 10px 0;
}

.tb.tb--view.tb--view--50 {
    width: 100%;
    float: none;
}

.tb.tb--view.tb--view--50 + .tb--view--50 {
    margin-top: -1px;
}

.tb.tb--view.tb--view--50 tbody td:first-of-type {
    background-color: #f6f6f6;
}

/*TableEdit*/
.tb--mobile--only {
    display: normal;
}

.tb--mobile--hide {
    display: none;
}

.tb.tb--rwd.tb--edit input {
    height: 45px;
}

.tb.tb--rwd.tb--edit .form__field-row select {
    width: 100%;
    height: 45px;
}

.notes {
    margin-top: 17px;
    padding: 25px 17px 0;
    font-size: 13px;
}

.notes-half__item {
    float: none;
    margin: 10px 0 0;
    padding: 0;
    width: auto;
}

.notes-half__item ~ .notes-half__item {
    margin-top: -1px;
}

.notes-half__item ~ .notes-half__item thead {
    display: none;
}

.agreement {
    padding: 15px;
}

.verify .verify__input {
    display: block;
    width: auto;
}

.verify .verify__img {
    display: block;
    margin-top: 5px;
}

.immediately {
    position: static;
    display: block;
    margin: 5px 0;
    text-align: center;
}

.result__row {
    width: auto;
}

.result__title {
    width: auto;
}

.smap__mm1-name {
    display: block;
    padding: 5px 15px;
}

.smap__mm2--fluid .smap__mm2-list > li {
    width: auto;
    margin-left: 0;
}

.smap__mm2-list {
    padding: 0 15px;
}

.smap__mm2-list > li {
    float: none;
    width: auto;
    margin: 15px 0 25px;
}

.smap__mm3 {
    margin-top: 5px;
}

.smap__mm3-list > li {
    margin: 8px 0;
}

.smap__mm3-name:before {
    background-image: url(/Images/icon-arrow_10px@3x.png);
    background-size: 40px;
}

.view__list > li {
    width: 50%;
    padding: 0;
}

.view__list > li:nth-of-type(odd) {
    padding-right: 10px;
}

.view__list > li:nth-of-type(even) {
    padding-left: 10px;
}

.view__list > li:nth-of-type(2n+1) {
    clear: left;
}

.view__list > li:nth-of-type(2) ~ li {
    margin-top: 25px;
}

.exrate__name {
    font-size: 14px;
}

.exrate__inout, .exrate__rate {
    font-size: 14px;
}

.exchange__name {
    margin-left: 15px;
}

.exchange__wrap {
    display: block;
}

.exchange__flag {
    display: table;
    width: 100%;
}

.exchange__flag-img {
    display: table-cell;
}

.exchange__currency {
    display: table-cell;
    padding-left: 20px;
}

.exchange__rate {
    display: block;
    width: 100%;
}

.exchange__agent {
    line-height: 40px;
}

.exchange__cell {
    line-height: 45px;
}

.ercal ~ .ercal {
    margin-top: 15px;
}

.ercal__head {
    font-size: 16px;
    text-align: center;
}

.ercal__wrap {
    display: block;
    width: auto;
}

.ercal__side, .ercal__mid {
    display: block;
}

.ercal__side {
    width: auto;
    margin-top: -1px;
    padding: 5px 0;
    font-size: 15px;
}

.ercal__side .ercal__top {
    border-bottom: 1px solid #dedede;
}

.ercal__side:first-of-type .ercal__top {
    border-bottom: 0;
}

.ercal__mid {
    width: auto;
    height: 130px;
    margin-top: -1px;
    padding: 10px 30px;
}

.ercal__top {
    padding: 0 15px;
    line-height: 45px;
    border-bottom: 0;
}

.ercal__bottom {
    padding: 0 15px;
}

.pager {
    margin: 20px 0;
}

.op {
    /*position: relative;*/
    /*&__link {
  		display: block;
  		position: relative;
  		margin: 3px 0;
  		text-decoration: none;
  
  		&:hover {
  			color: $font-color__gn;
  		}
  	}
  
  	&__root {
  		font-size: 16px;
  		color: #525252;
  
  		&:after {
  			content: "";
  			display: inline-block;
  			width: 16px;
  			height: 16px;
  			margin-top: -3px;
  			margin-left: 5px;
  			background: url(~/Images/icon-arrow-round.png) no-repeat 0 -48px;
  			vertical-align: middle;
  		}
  
  		&:hover {
  			&:after {
  				background-position: -16px -48px;
  			}
  		}
  	}
  
  	&__child {
  		margin-left: 3px;
  		font-size: 14px;
  		color: #666;
  
  		&:before {
  			content: "";
  			display: inline-block;
  			width: 10px;
  			height: 10px;
  			background: url(~/Images/icon-arrow_10px.png) no-repeat -10px -30px;
  			vertical-align: middle;
  		}
  	}*/
    /*&__begin {
  		position: relative;
  		text-align: center;
  
  		&:before {
  			content: "";
  			display: inline-block;
  			width: 6px;
  			height: 12px;
  			position: absolute;
  			top: -12px;
  			left: 50%;
  			margin-left: -3px;
  			background-color: #00d3b4;
  		}
  
  		&:after {
  			content: "";
  			display: inline-block;
  			width: 20px;
  			height: 20px;
  			position: absolute;
  			bottom: -20px;
  			left: 50%;
  			margin-left: -10px;
  			background: url(~/Images/icon-op-arrow_gn.png) no-repeat 0 -20px;
  		}
  
  		&-ctx {
  			display: inline-block;
  			padding: 5px 45px;
  			font-size: 16px;
  			background-color: #00d3b4;
  			color: #fff;
  			border: 3px solid #fff;
  			border-radius: 20px;
  		}
  	}
  
  	&__arrow {
  		&--og,
  		&d--og,
  		&--gn,
  		&d--gn {
  			&:before {
  				content: "";
  				display: inline-block;
  				width: 20px;
  				height: 20px;
  				background-repeat: no-repeat;
  				vertical-align: middle;
  			}
  		}
  
  		&--og {
  			&:before {
  				background-image: url(~/Images/icon-op-arrow_og.png);
  			}
  		}
  
  		&d--og {
  			&:before {
  				background-image: url(~/Images/icon-op-arrowd_og.png);
  			}
  		}
  
  		&--gn {
  			&:before {
  				background-image: url(~/Images/icon-op-arrow_gn.png);
  			}
  		}
  
  		&d--gn {
  			&:before {
  				background-image: url(~/Images/icon-op-arrowd_gn.png);
  			}
  		}
  
  		&--top,
  		&--top-right,
  		&--east,
  		&--bottom,
  		&--bottom-right {
  			display: inline-block;
  			position: absolute;
  		}
  
  		&--top {
  			top: -10px;
  			left: 50%;
  			margin-left: -10px;
  		}
  
  		&--top-right {
  			top: -10px;
  			right: 20%;
  		}
  
  		&--bottom {
  			bottom: -10px;
  			left: 50%;
  			margin-left: -10px;
  		}
  
  		&--bottom-right {
  			bottom: -10px;
  			right: 20%;
  		}
  
  		&--east {
  			right: 0;
  			top: 50%;
  			margin-top: -10px;
  		}
  
  		&--up {
  			&:before {
  				background-position: 0 0;
  			}
  		}
  
  		&--down {
  			&:before {
  				background-position: 0 -20px;
  			}
  		}
  
  		&--up-right {
  			&:before {
  				background-position: 0 -100px;
  			}
  		}
  
  		&--down-right {
  			&:before {
  				background-position: 0 -140px;
  			}
  		}
  
  		&--down-left {
  			&:before {
  				background-position: 0 -120px;
  			}
  		}
  
  		&--right {
  			&:before {
  				background-position: 0 -60px;
  			}
  		}
  	}*/
}

.op__row {
    /*position: relative;
  display: table;
  width: 100%;
  margin: 20px 0;
  text-align: center;*/
}

.op__row--mo {
    display: block;
}

.op__row--mo.op__row {
    margin: 0;
}

.op__row--mo .op__col {
    display: block;
    width: auto;
}

.op__row--mo .op__root {
    text-align: center;
}

.op__row--mo .op__arrow--east {
    top: auto;
    right: 50%;
    margin-right: -10px;
    bottom: -10px;
}

.op__row--mo .op__arrow--right:before {
    background-position: 0 -20px;
}

.op__col {
    padding: 0 3px;
    /*position: relative;
  display: table-cell;
  padding: 0 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  vertical-align: top;*/
    /*&-2-1 {
  			width: 50%;
  
  			&:nth-of-type(odd) {
  				padding-right: 12px;
  				text-align: right;
  
  				.op__item {
  					display: inline-block;
  				}
  			}
  
  			&:nth-of-type(even) {
  				padding-left: 12px;
  				text-align: left;
  			}
  
  			.op__item {
  				display: inline-block;
  			}
  		}
  
  		&-3-1 {
  			width: 33.33%;
  		}
  
  		&-3-2 {
  			width: 66.66%;
  		}*/
    /*&--big {
  	padding: 38px 10px;
  	background-color: #fffee8;
  	border-radius: 10px;
  }*/
}

.op__item {
    display: block;
    /*padding: 25px 0 30px;*/
    text-align: center;
}

.op__item:before {
    float: none;
    display: block;
    margin: 0 auto;
}

.op__content {
    display: inline-block;
    margin-left: 0;
    min-height: 0;
    text-align: left;
    /*& > * {
  	margin-top: 0;
  }*/
}

.op__warning {
    /*margin: 3px 0;
  font-size: 14px;
  color: #ff0000;*/
    text-align: center;
}

.op__start {
    position: static;
    margin: 0 auto;
    /*top: 0;
  left: 50%;
  margin-left: -60px;
  display: inline-block;
  width: 120px;
  height: 120px;
  padding: 35px 0;
  font-size: 16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  border-radius: 60px;
  background-color: #f59d15;
  color: #fff;*/
}

.action-area {
    width: auto;
}

.action-2 {
    width: 50%;
    float: left;
}

.action-AcctID .action-2 span {
    width: 97%;
}

.action-3 {
    width: 33.33%;
    float: left;
}

.pc-hide {
    display: unset;
}

/*---------- popup ----------*/
.popup {
    width: auto;
    min-width: 360px;
}
/*jQuery UI Dialog */
.ui-dialog {
    max-width: calc(100vw - 40px);
}

.ui-dialog.ui-widget {
    min-width: 360px;
}

.ui-dialog .ui-dialog-content {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.ui-dialog .popup {
    width: 100%;
    max-width: 100%;
}

.ui-dialog .popup .popup__head {
    display: flex;
    align-items: center;
}

.ui-dialog .popup .popup__title {
    float: none;
    flex: 1 1 auto;
}

/*---------- page ----------*/
/*---------- list ----------*/
/*---------- background ----------*/
/*---------- link ----------*/
/*---------- form ----------*/
input[type="text"],
input[type="search"],
input[type="date"],
input[type="month"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="file"],
.textbox {
    font-size: 16px;
}

.form__ui--s input[type="text"], .form__ui--s input[type="search"], .form__ui--s input[type="date"], .form__ui--s input[type="month"], .form__ui--s input[type="number"], .form__ui--s input[type="tel"], .form__ui--s input[type="password"], .form__ui--s input[type="email"], .form__ui--s input[type="file"], .form__ui--s .textbox {
    padding: 8px 11px 9px;
}

.icon > input[type="text"], .icon > input[type="search"], .icon > input[type="date"], .icon > input[type="month"], .icon > input[type="number"], .icon > input[type="tel"], .icon > input[type="password"], .icon > input[type="email"], .icon > input[type="file"], .icon > .textbox {
    padding-left: 50px;
}

input[type="date"] {
    /*&::-webkit-calendar-picker-indicator,
  &::-webkit-inner-spin-button {
  	display: inline-block;
  	-webkit-appearance: unset;
  }*/
}

.form {
    padding: 17px;
}

.form.form--hor .form__row {
    display: block;
    margin: 13px 0;
}

.form.form--hor input[type="text"],
.form.form--hor input[type="search"],
.form.form--hor input[type="date"],
.form.form--hor input[type="month"],
.form.form--hor input[type="number"],
.form.form--hor input[type="tel"],
.form.form--hor input[type="password"],
.form.form--hor input[type="email"],
.form.form--hor input[type="file"],
.form.form--hor .textbox,
.form.form--hor select,
.form.form--hor .transformSelect {
    width: 100%;
}

.form.form--idx .form__row {
    margin: 10px 0;
    padding: 0;
}

.form.form--idx-h .form__title {
    display: none;
}

.form.form--idx-h .form__field {
    display: block;
    width: auto;
    vertical-align: top;
}

.form.form--idx-h .form__field-sk .form__ui {
    margin-right: auto;
}

.form__row {
    width: auto;
    margin: 0;
}

.form__row ~ .form__row {
    margin-top: 17px;
}

.form__row .verify .verify__input {
    display: inline-block;
    width: 70%;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
}

.form__row .verify .verify__img {
    display: inline-block;
    margin-top: 0;
    margin-left: -4px;
    padding-left: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
}

.form__title {
    float: none;
    display: block;
    width: auto;
    height: auto;
    padding: 5px 0;
    text-align: left;
}

.form__title + .form__field {
    margin-left: 0;
}

.form__label {
    padding: 0 0 5px;
}

.form__btn {
    width: auto;
}

.form__field-sk {
    position: relative;
}

.form__field-sk .form__ui {
    margin-right: auto;
}

.form__field-sk .form__ui-sk {
    display: none;
}

.form--desk .form__row {
    width: auto;
}

.form__ui--ab {
    padding-right: 0;
}

.form__ui--ab .form__ui-balance {
    position: static;
    width: auto;
    padding: 0;
    text-align: left;
}

.form__ui--ab .form__ui-sd {
    position: static;
    width: auto;
    padding: 5px 0;
}

.skn {
    padding: 0;
    border: 0;
}

.skn .skn__btn {
    display: none;
}

.skn .skn__field {
    margin-left: 0;
}

.skn .skn__tip {
    text-align: left;
    display: none;
}

.kyc-p > div {
    float: none;
}

/*---------- font & title ----------*/
/*---------- position ----------*/
/*---------- text align ----------*/
.h1 {
    margin: 20px 15px;
}

/*---------- display ----------*/
.mo-block {
    display: block;
}

/*---------- table-display ----------*/
.moTable-block {
    display: table-row !important;
}

/*---------- float ----------*/
/*---------- margin ----------*/
/*---------- padding ----------*/
/*---------- width ----------*/
/*---------- height ----------*/
/*---------- line height ----------*/

.line--dash.mob {
    margin: 10px 0 0;
}

.collapse .collapse__item.style {
    padding: 12px 0;
}

.tb-top-tip {
    text-align: left;
    padding-left: 10px;
}

.tb-top-tip.form__ui .form__ui-radio-inline {
    display: block;
}

/*給對帳單查詢使用*/
#action div {
    float: none;
    width: 60%;
    margin: 2% 0 2% 0 !important;
    padding: 0 !important;
}

.form__row.for__RWD {
    display: flex;
}

.form__row.for__RWD div {
    margin: 0px;
    padding: 0px;
    height: auto;
    white-space: nowrap;
}

.form__row.for__RWD div.form__title {
    width: auto;
    flex: 0 0 48%;
    text-align: right;
}

.form__row.for__RWD div.form__title.short__title {
    flex: 0 0 40%;
}

.form__row.for__RWD div.form__title.long__title_1 {
    flex: 0 0 77%;
}

.form__row.for__RWD div.form__title.long__title_2 {
    flex: 0 0 80%;
}