/* CSS Document */
@font-face {
    font-family: "Microsoft JhengHei";
    src: url("Microsoft-JhengHei.ttf") format("truetype");
}
/*==【基本設定】==*/
body {
    font: 1em/1.231 Verdana, "SF Pro Text", "Myriad Set Pro", "SF Pro Icons",
        "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial",
        sans-serif;
    overflow-x: hidden;
    font-display: swap;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #303030;
}
body a {
    cursor: pointer;
}
body a:hover {
    text-decoration: none;
}
* {
    box-sizing: border-box;
}
.title,
b {
    margin: 0;
    padding: 0;
    font-size: var(--font-size27);
    line-height: 1.3;
    font-weight: 500;
}
.Txt ul,
.Txt ol {
    margin: 0 !important;
}
ul.ulli,
.ulli > ul,
.ulli > ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.Txt {
    text-align: justify;
    word-break: break-all;
}
::-webkit-input-placeholder {
    color: #999;
}
::-moz-placeholder {
    color: #999;
}
:-ms-input-placeholder {
    color: #999;
}
option:disabled {
    color: #999;
}
:focus,
button:focus,
select:focus {
    outline: none;
}
.xxx {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}
body.fixed #header .hdbox,
#header .hdbox,
.is-down .gotop,
.gotop.is-down .logomain .l,
.logomain .l,
.slidemnav.open,
.slidemnav,
.list01 ul li:hover,
.list01 ul li,
.mnav ul > li > a::after,
.mnav ul > li > a:hover::after,
.listbox ul li:hover,
.listbox ul li,
.is-down #header,
#header,
.is-down .logomain .inbox::after,
.logomain .inbox::after,
.is-down .logomain .inbox::before,
.logomain .inbox::after {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
:root {
    --bg-red: #cd070a;
    --bg-darkred: #9e2a2a;
    --bg-black: #303030;
    --bg-grey: #404040;
    --bg-pink: #eee4d7;
    --bg-lightyellow: #f6dbbb;
    --bg-lightyellow2: #fef9f2;
    --color-blue: #3085d6;
    --color-darkblue: #195a97;
    --color-grey: #e4e4e4;
    --color-grey2: #fffcfb;
    --color-grey3: #b6b6b6;
    --bg-white: #fff;
    --font-size15: 0.9375em;
    --font-size16: 1em;
    --font-size18: 1.125em;
    --font-size20: 1.25em;
    --font-size22: 1.375em;
    --font-size23: 1.437em;
    --font-size24: 1.5em;
    --font-size27: 1.688em;
    --font-size27-18: 0.74em;
    --font-size18-30: 1.666em;
}

#wrap {
    overflow-x: hidden;
    padding: 146px 0 0 0;
}
.inbox {
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#header {
    z-index: 20;
    width: 100%;
    background-color: var(--bg-white);
    position: fixed;
    top: 0;
}
#header .hdbox {
    background-color: var(--bg-lightyellow2);
    position: relative;
    z-index: 10;
}
#header .hdbox .inbox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 1245px;
}
#header .bdbox {
    background: #fff;
}
/* logomain */
.logomain {
    padding: 5px 0;
    width: 100%;
    position: relative;
    z-index: 10;
}
.logomain .l {
    width: 145px;
}
.logomain .l a {
    display: inline-block;
}
.logomain img {
    max-width: 100%;
}
.logomain .inbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 1245px;
}
.logomain .inbox::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 34%;
    left: -450px;
    z-index: 2;
    background-color: var(--bg-red);
}
.logomain .inbox::before {
    content: "";
    position: absolute;
    height: 5px;
    width: 34%;
    right: -450px;
    z-index: 2;
    background-color: var(--bg-red);
}
.logomain .r {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.toplink {
    background: #ffffff;
    border-radius: 50px;
    border: 3px solid var(--bg-red);
    position: relative;
}
.toplink ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.toplink ul > li > a {
    color: var(--bg-black);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 10px;
}
.is-down .toplink ul > li > a:hover,
.toplink ul > li > a:hover {
    color: #767676;
}
.toplink ul li {
    position: relative;
}
.toplink .subnav ul li:first-child a,
.toplink .subnav ul li:first-child.on a {
    border-radius: 10px 10px 0 0;
}
.toplink > ul > li:last-child::after {
    display: none;
}
.toplink li {
    position: relative;
}
.toplink li.on .subnav {
    display: block;
}
.toplink .subnav li a {
    padding: 10px 20px;
}
.toplink .subnav ul {
    background: var(--color-grey2);
    border-radius: 10px 10px;
    margin: 5px 0 0 0;
}
.toplink li.nomb {
    display: flex;
    padding: 0 0 0 15px;
}
.toplink ul li.nomb a {
    padding: 6px 0;
}
/* shbox */
.shbox label {
    background: #fff;
    display: flex;
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 2px solid var(--color-grey);
}
.shbox .tf {
    border: none;
    background: none;
    padding: 8px;
    font-size: var(--font-size14);
    flex: 1;
}
.shbox .btn_sh {
    background: none;
    border: none;
    padding: 7px;
}
.shbox .btn {
    min-width: 0px;
}
/*mnav*/
.mnav {
    background-color: var(--bg-red);
}
.mnav .inbox {
    max-width: 1245px;
}
.mnav ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.mnav ul a {
    display: block;
}
.mnav ul > li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: stretch;
    flex-grow: 1;
}
.mnav ul > li::after {
    content: "";
    position: absolute;
    height: 11px;
    width: 1px;
    background-color: #ff6c6c;
    top: 50%;
    transform: translate(0, -50%);
}
.mnav ul > li::before {
    content: "";
    position: absolute;
    height: 11px;
    width: 1px;
    background-color: #ff6c6c;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}
.mnav ul > li.on .m_open {
    transform: scaleY(-1);
}
.mnav ul > li > a {
    display: flex;
    align-items: center;
    color: var(--bg-black);
    padding: 15px 8px;
    font-size: var(--font-size16);
    font-weight: 500;
    color: #fff;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.mnav ul > li > a:hover {
    background-color: var(--bg-darkred);
    color: #fff;
}
.mnav ul li li::after,
.mnav ul li li::before {
    display: none;
}
.mnav ul .subnav ul li .m_open {
    color: #333;
    transform: rotate(-90deg);
}
.mnav ul .subnav ul li.on .m_open {
    color: #fff;
    transform: rotate(-90deg);
}
.mnav .phone_m {
    display: none;
}
.subnav {
    width: 100%;
    position: absolute;
    z-index: 3;
    top: 100%;
    display: none;
}
.subnav ul {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    border-radius: 0 0 10px 10px;
    background: #fff;
}
.subnav li {
    border-bottom: 1px solid #d7d4d4;
}
.subnav li:last-child {
    border: 0;
    border-radius: 0 0 10px 10px;
}
.subnav ul > li.on > a {
    background-color: var(--bg-black);
    color: #fff;
    position: relative;
    position: relative;
    width: 100%;
}
.subnav li.on ul {
    display: block;
    position: absolute;
    width: 100%;
    left: 100%;
    top: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.subnav ul li:last-child a {
    border-radius: 0 0 10px 10px;
}
.subnav ul li a {
    color: var(--bg-black);
    padding: 15px 15px;
    font-size: var(--font-size16);
    width: 100%;
    word-break: break-all;
}
.subnav ul ul {
    background-color: #efeeee;
}
.subnav ul ul li.on {
    background-color: var(--bg-black);
}
.subnav ul li a:hover .m_open {
    color: #fff;
}
.subnav ul ul li.on a {
    color: #fff;
}
.subnav ul ul a {
    color: var(--bg-grey);
    font-size: var(--font-size16);
}
.subnav ul li a:last-child {
    border: none;
}
.hassub.on > .subnav {
    display: block;
}
.hassub ul ul {
    display: none;
    position: absolute;
    left: 100%;
    width: 100%;
}
.hassub.on > ul {
    display: block;
}
.mb_img {
    width: 28px;
    border-radius: 50px;
    overflow: hidden;
}
.mb_img + span {
    max-width: 70px;
    height: 20px;
    overflow: hidden;
}
.mb_img img {
    max-width: 100%;
}

#content {
    z-index: 20;
}
.err {
    color: var(--bg-red);
    display: block;
}
.imp {
    font-size: 12px;
    background: var(--bg-red);
    padding: 5px 10px;
    color: #fff;
    border-radius: 50px;
    margin: 0 0px 0px 7px;
}
input:valid {
    font-size: var(--font-size16);
}
p {
    line-height: 1.6;
}
p.txtlist {
    text-align: justify;
}
p.txtlist .btn01 {
    width: 10px;
    padding: 0 8px;
    min-width: 66px;
}
.Txt p {
    margin: 0.9em 0 0.9em 0;
    font-size: 20px;
    line-height: 1.7em;
    letter-spacing: 0.4px;
}
/* gotop */
.gotop {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    bottom: 108px;
    z-index: 5;
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 1px solid var(--bg-red);
    color: var(--bg-red);
    border-radius: 50px;
    cursor: pointer;
    font-size: 13px;
    transform: translate(300px, 0px);
}
.is-down .gotop {
    display: flex;
    transform: translate(-8px, 0px);
    text-align: center;
}
/* Icon */
.icon {
    display: inline-block;
    background: no-repeat scroll center;
    background-size: 100% auto;
    width: 25px;
    height: 25px;
    text-indent: -99999px;
}
.i_go {
    background-image: url(../images/content/i_go.svg);
    width: 18px;
}
.i_pepper {
    background-image: url(../images/content/i_peper.svg);
}
.i_more {
    background-image: url(../images/content/i_plus.svg);
}
.i_namebook {
    background-image: url(../images/content/i_namebook.svg);
}
.i_eye {
    background-image: url(../images/content/icon_eye_show.svg);
}
.i_eye.show {
    background-image: url(../images/content/icon_eye_hide.svg);
}
.i_mail {
    background-image: url(../images/content/i_mail.svg);
}
.i_fb {
    background-image: url(../images/content/i_fb.svg);
}
.i_line {
    background-image: url(../images/content/i_line.svg);
}
.i_sh {
    background-image: url(../images/header/icon_sh.svg);
    width: 20px;
    height: 20px;
}
.i_txt {
    text-indent: 0;
    width: auto !important;
    font-style: normal;
}

/* Phone Menu */
.slidemnav {
    display: inline;
}
.slidemnav .mbarea,
.slidemnav .shbox,
.phone_menu + .mbarea,
.slidemnav .toplink {
    display: none;
}
.phone_menu {
    display: none;
}

.i_menu {
    width: 50px;
    height: 50px;
    position: relative;
    display: block;
    margin: 0 0 0 10px;
    border-radius: 3px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    cursor: pointer;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.i_menu span {
    display: block;
    position: absolute;
    height: 3px;
    width: 28px;
    background: var(--bg-white);
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    opacity: 1;
    left: 10px;
    text-indent: -99999px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}
.i_menu span:nth-child(1) {
    top: 12px;
}
.i_menu span:nth-child(2),
.i_menu span:nth-child(3) {
    top: 23px;
}
.i_menu span:nth-child(4) {
    top: 34px;
}
.i_menu.open {
    background: inherit;
    z-index: 5;
}
.i_menu.open span {
    background: var(--bg-black);
}
.i_menu.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}
.i_menu.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 40px;
    left: 10px;
    top: 29px;
}
.i_menu.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 40px;
    left: 10px;
    top: 29px;
}
.i_menu.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}
.m_open {
    color: #ffffff;
    text-align: center;
    margin: 2px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    display: none;
}
.artclebox {
    width: 100%;
}
.article {
    padding: 30px 40px;
    border-radius: 8px;
    background-color: #fff;
}
.article h3.title {
    padding: 0 0 10px 0;
    font-size: 32px;
    font-weight: bold;
}
.article figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f4f4f4;
}
.article figure small {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 17px;
    line-height: 1.2em;
    margin: 10px auto 10px auto;
    letter-spacing: 0.7px;
    padding: 0 15px;
    line-height: 1.4em;
}
.additem {
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--color-grey);
}
.additem li {
    border: 2px solid var(--color-grey);
    background: #fff;
    border-radius: 10px;
    padding: 20px 70px 20px 20px;
    position: relative;
    margin: 0 0 15px 0;
}
.additem li:last-child {
    margin: 0;
}
.additem li.mg0 {
    margin: 0;
}
.additem .btnbox {
    padding: 20px 0 0;
}
div[class^="additem"] .btnbox {
    padding: 15px 0 0 0;
}
.additem ul li:first-child .js_del {
    display: none;
}
/* btn */
.btnbox .money_btn {
    position: relative;
    font-weight: 500;
    transition: none;
    padding: 6px 25px;
}
.btnbox .i_money {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btnbox .i_money svg {
    width: 25px;
    height: 25px;
}
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    white-space: nowrap;
    min-width: 100px;
    gap: 6px;
    font-size: var(--font-size16);
}
.btn01 {
    background: var(--bg-white);
    color: var(--bg-red);
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid var(--bg-red);
}
.btn01:hover {
    color: var(--bg-darkred);
}
.btn02 {
    background: var(--bg-red);
    color: var(--bg-white);
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid var(--bg-red);
    border: 1px solid var(--bg-red);
}
.btn02.btn02-big {
    min-width: 230px;
    font-size: var(--font-size20);
}
.btn02.btn_w {
    background-color: #fff;
    color: var(--bg-red);
}
.btn03 {
    border-radius: 50px;
    background: var(--bg-red);
    color: var(--bg-white);
    padding: 7px 14px;
    border: 1px solid var(--bg-red);
}
.btn03.disable {
    background: #b4b4b4;
}
.btn.btn_w {
    background-color: #fff;
    color: var(--bg-black);
}
.btn.btn_b {
    background-color: #3b5998;
    color: #fff;
}
.btn.btn_g {
    background-color: #409e1d;
    color: #fff;
}
button[disabled] {
    background-color: #b4b4b4;
    border-color: #b4b4b4;
    cursor: not-allowed;
}
/* bnrbox */
.bnrbox .list01 ul li {
    border: 4px solid var(--bg-red);
}
.bnrbox .list01 .list_txt .btn01 {
    margin: 0;
}
.bnrbox .list01 .list_txt h3.title {
    font-size: var(--font-size24);
    color: var(--color-blue);
}
.bnrbox .list01.listflex .imgbox {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-height: inherit;
    position: relative;
    height: initial;
}
.bnrbox .list01.listflex .artclebox .imgbox img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: unset;
}
.bg_y {
    background: #fff9f2;
}
.bg_y.pd50 {
    padding: 50px 0;
}
.bg_r {
    background: var(--bg-darkred);
}
.bg_r.pd50 {
    padding: 50px 0;
}

/* box01 */
.box01 {
    padding: 30px 0;
}
.box01 h2.title {
    color: var(--bg-red);
    position: relative;
    padding: 0 0 15px 0;
}
.box01 h2.title::after {
    content: "";
    position: absolute;
    width: 100%;
    background-color: var(--bg-red);
    height: 3px;
    bottom: 0;
    left: 0;
    border-radius: 50px;
    -webkit-animation: scale-up-hor-left 2s cubic-bezier(0.39, 0.575, 0.565, 1);
    animation: scale-up-hor-left 2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.box01 .btnbox {
    padding: 35px 0 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* box02 */
.box02 {
    padding: 30px 0;
}
.box02 .hdbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 15px 0;
}
.box02 .btn02 {
    border-radius: 10px;
}
.box02 h2.title {
    color: var(--bg-red);
}
.box02 .shbox {
    margin: -15px 0 15px 0;
}
.box02 .shbox label {
    width: 235px;
}
.box02 .shbox form {
    display: flex;
    justify-content: flex-end;
}
.box02 .shbox .btn:hover {
    background-color: var(--bg-black);
    animation: none;
}
/* coninfo */
.coninfo {
    font-size: var(--font-size18);
    line-height: 1.6;
    padding: 60px 0 0 0;
    text-align: justify;
}
.card.text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card .formbox.fb_comfirm .tbar b {
    flex-basis: 130px;
}
.card .tbar:first-child {
    padding-top: 0;
}
.card .tbar:last-child {
    padding-bottom: 0;
}
.card .tf_wrap .tbar {
    padding: 10px 0;
}
.card .tf_wrap {
    padding: 5px 15px;
}
.card .tf_wrap .tbar b {
    flex-basis: 110px;
}

/* 捐款進度報告 */
.donabox {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    border: 2px solid var(--bg-red);
    border-radius: 10px;
    padding: 20px 0;
    background: #fff;
}
.donabox a {
    color: var(--bg-black);
}
.donabox a:hover {
    color: var(--color-darkblue);
}
.donabox .list_txt {
    flex: 1;
    border-right: 2px solid var(--color-grey);
    padding: 0 20px;
    height: auto;
    text-align: center;
    gap: 3px;
}
.donabox .list_txt h3.title {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 25px;
    margin: 5px 0;
}
.donabox .proj_list {
    flex: 3;
}
.donabox .list_txt em {
    color: var(--bg-red);
}
.donabox h5.title {
    text-align: center;
    color: var(--bg-black);
    border-radius: 20px;
    font-size: inherit;
}
.donabox .list_txt:last-child {
    border: none;
}
.f_style {
    font-size: 26px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0;
}
.finreport .btnbox.flex {
    display: none;
}
.finreport .tabcont {
    background-color: #fff;
}
/* list_txt */
.list_txt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    flex-grow: 1;
}
.list_txt h3.title {
    margin: 10px 0;
    text-align: justify;
    font-size: var(--font-size27);
}
.list_txt .btnbox {
    position: absolute;
    width: 100%;
    bottom: 0;
}
/* listbox-最新消息列表 */
.listbox ul li {
    padding: 25px 20px;
    border-bottom: 1px solid var(--color-grey);
    position: relative;
    background: #fff;
    display: flex;
    align-items: flex-start;
}
.listbox ul li a {
    display: flex;
    align-items: flex-start;
}
.listbox ul li a p {
    color: var(--color-blue);
}
.listbox ul li:hover small {
    color: var(--bg-black);
}
.listbox ul li a:hover {
    color: #3085d6;
}
.listbox ul li::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 80%;
    background-color: var(--color-grey);
    left: 0px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    z-index: 1;
}
.listbox small {
    color: var(--bg-black);
    padding: 4px 20px 0 0;
}

/* listbox02-更多暖流與個案追蹤列表 */
.listbox02 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.listbox02 .list01 .morebox {
    top: 193px;
}
.listbox02 .list01 .list_txt .btn01 {
    margin: 0;
}
.listbox02 .list01 .artclebox a {
    padding: 0;
}
.listbox02 .list01 .list_txt {
    padding: 15px;
}
.listbox02 .list01 .imgbox {
    width: 100%;
}
.listbox02 .list01 .imgbox img {
    max-width: 100%;
}
.listbox02 .list01.listflex .imgbox {
    width: 320px;
    align-items: center;
    justify-content: center;
    max-height: revert;
    height: revert;
}
.listbox02 .list01.listflex .morebox {
    top: 135px;
}
.listbox02 .list01.listflex ul {
    flex-direction: column;
}
.listbox02 .list01.listflex p.txtlist {
    -webkit-line-clamp: 3;
}
.listbox02 .list01.listflex .list_txt h3.title {
    word-wrap: break-word;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* list01 上圖片 下方文字*/
.list01 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.list01 .btn02 {
    border-radius: 10px;
    width: 100%;
    font-size: var(--font-size23);
}
.list01 .btn01 {
    border-radius: 10px;
    padding: 5px 15px;
    width: 110px;
}
.list01 ul {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}
.list01 ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--bg-white);
    border-radius: 5px;
    border: 2px solid var(--color-grey);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    width: 323px;
}
.list01 .btnbox {
    position: absolute;
    bottom: 10px;
    width: 93%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
}
.list01 .list_txt {
    padding: 15px 15px 125px 15px;
}
.list01 .list_txt h3.title {
    font-size: var(--font-size23);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: var(--bg-black);
}
.list01 .list_txt .btn01 {
    margin: 24px 0 10px 0;
}
.list01 .imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
}
.list01 .list_txt .morebox .btn01 {
    min-width: 75px;
    margin: 0;
}
.list01 .list_txt .morebox .btn {
    animation: none;
    cursor: pointer;
}
.list01 .artclebox .imgbox {
    max-height: 199px;
    overflow: hidden;
    position: relative;
    height: 199px;
    width: 100%;
}
.list01 .artclebox .imgbox img {
    position: absolute;
    max-height: 199px;
}
.list01 .artclebox a:hover .list_txt h3.title {
    color: var(--color-darkblue);
}
.list01 p.txtlist {
    line-height: 1.6;
    padding: 0;
    color: var(--bg-black);
    position: relative;
}
.list01.list01_2 ul {
    flex-wrap: nowrap;
}
.list01.list01_2 ul li {
    width: 48.7%;
}
.list01.list01_2 .imgbox {
    max-height: 260px;
    height: 260px;
}
.list01.list01_2 .artclebox .imgbox img {
    max-height: 350px;
}
.morebox .btn:hover {
    color: var(--bg-darkred) !important;
    text-decoration: none;
}
.morebox {
    background: #fff;
}
/* list01.listflex 左圖片 右文字 */
.list01.listflex .artclebox {
    width: 100%;
}
.list01.listflex .artclebox a {
    display: flex;
}
.list01.listflex .list_txt {
    width: 44%;
}
.list01.listflex ul li {
    flex-direction: row;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: inherit;
}
.list01.listflex .btnbox {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 44%;
    align-items: flex-end;
    padding: 0 15px;
}
.list01.listflex .btnbox .btn02 {
    width: 100%;
}
.list01.listflex .imgbox {
    width: 56%;
}
.list01.list01_2 {
    padding: 30px;
    border-radius: 10px;
    border: 2px solid var(--bg-red);
    background: #f9f9f9;
}
.list01.listflex .artclebox .imgbox img {
    max-height: revert;
}
/* 會員專區 */
.logbox {
    padding: 50px 0;
}
.loginbox {
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    background-color: #fff;
    padding: 25px 30px;
    max-width: 520px;
    width: 95%;
}
.loginbox .hd {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loginbox .bd {
    padding: 25px 0 0;
}
.loginbox .logo {
    width: 100%;
    padding: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--bg-red);
}
.loginbox .formbox .tbar b {
    flex-basis: 60px;
}
.loginbox .formbox .tbar {
    border: none;
    padding: 7px 0;
}
.loginbox .formbox .tf {
    padding: 14px 10px;
}
.loginbox .formbox .tf_cont.tf_flex {
    flex-wrap: nowrap;
}
.loginbox .formbox .btnbox {
    padding: 0 0 15px;
}
.loginbox .formbox .btn {
    width: 100%;
    border-radius: 10px;
}
.loginbox .formbox .ps a {
    color: var(--bg-red);
}
.loginbox .formbox .oth_log .btnbox {
    width: 100%;
    padding: 0;
}
.loginbox .errtxt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 8px;
}
.loginbox .ps {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-grey3);
    gap: 5px;
    padding: 4px 0;
}
.loginbox .tf_cont .field {
    display: flex;
    flex-flow: column-reverse;
    border-radius: 5px;
    position: relative;
    z-index: 2;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
}
.loginbox .tf_cont .field input {
    background: none;
    border: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 15px 15px;
    cursor: text;
    max-width: 100%;
    position: relative;
    z-index: 3;
}
.loginbox .tf_cont .field input:focus {
    outline: 0;
}
.loginbox .tf_cont .field label,
.loginbox .tf_cont .field input {
    transition: all 0.2s;
    touch-action: manipulation;
}
.loginbox .tf_cont .field label {
    position: absolute;
    left: 7px;
    top: 15px;
    padding: 0 8px;
    background: #fff;
    width: 85%;
    z-index: 4;
}
.loginbox .tf_cont .field input:placeholder-shown + label {
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left top;
}
.loginbox .tf_cont .field input:not(:placeholder-shown) + label,
.loginbox .tf_cont .field input:focus + label {
    transform: scale(1);
    cursor: pointer;
    top: -10px;
    left: 8px;
    background: #fff;
    font-weight: 700;
    width: initial;
}
.tftitle {
    font-size: 16px;
    margin: 27px 0 20px 0;
    text-align: center;
    color: var(--color-grey3);
    position: relative;
}
.tftitle:before {
    content: "";
    height: 1px;
    background: #e8e8e8;
    width: 111px;
    margin: 0 5px;
    position: absolute;
    left: 0;
    top: 10px;
}
.tftitle::after {
    content: "";
    height: 1px;
    background: #e8e8e8;
    width: 111px;
    margin: 0 5px;
    position: absolute;
    right: 0;
    top: 10px;
}
.oth_log {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.oth_log a {
    padding: 14px 0;
    border-radius: 10px;
}
.codebox img {
    max-width: 100%;
}
.codebox {
    width: 120px;
}
.codebox + small {
    display: flex;
    align-items: center;
}
.codebox + small a {
    color: var(--bg-red);
    text-decoration: underline;
}
.ps.pd8 {
    padding: 0 0 8px 0;
    display: none;
}
.ps {
    font-size: 14px;
    padding: 6px 0 0 0;
    display: block;
    line-height: 1.4;
}
.ps a {
    text-decoration: underline;
    color: var(--color-grey3);
}
/* tablewrap */
table {
    border-collapse: collapse;
}
.tablewrap {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--bg-white);
}
.tablewrap thead {
    background: var(--bg-red);
    color: var(--bg-white);
}
.tablewrap thead th {
    padding: 6px 6px;
    font-weight: inherit;
}
.tablewrap tbody tr {
    border-bottom: 1px solid var(--color-grey);
}
.tablewrap tbody tr:last-of-type {
    border-bottom: none;
}
.tablewrap tbody tr:nth-child(even) {
    background-color: var(--color-grey2);
}
.tablewrap tbody td {
    padding: 15px;
    line-height: 1.5em;
    border-left: 1px solid var(--color-grey);
}
.tablewrap tbody td:first-child {
    border-left: none;
}
.tablewrap tbody tr td p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    box-sizing: border-box;
}
.tablewrap a {
    color: var(--bg-black);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    box-sizing: border-box;
}
.tablewrap a:hover {
    color: var(--color-darkblue);
}
.tablewrap .btn01 {
    border-radius: 10px;
    min-width: 80px;
    padding: 5px 15px;
    color: var(--bg-red);
}
.tablewrap .btn01:hover {
    color: var(--bg-darkred);
}
.tablewrap.rads0 {
    border-radius: 10px 10px 0 0;
}
.formbox .tablewrap .tbar {
    border-bottom: none;
}
.time {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.time small {
    color: var(--color-grey3);
    font-size: var(--font-size16);
}
.state {
    background: var(--bg-darkred);
    color: var(--bg-white);
    padding: 6px 15px;
    border-radius: 50px;
    max-width: 128px;
    font-size: 15px;
}
.state.gray {
    background-color: var(--color-grey3);
}
/* tabbox */
.mgtop10 {
    margin-top: 10px;
}
.tabcont {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tabcont .txtbox {
    font-size: var(--font-size18);
}
.tabcont .btnbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.tab_bd {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
}
.tab_hd {
    padding: 15px 0;
}
.tab_hd ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.tab_hd ul li {
    background-color: #fff;
    min-width: 160px;
}
.tab_hd ul li.on a {
    background: var(--bg-red);
    color: #fff;
}
.tab_hd ul li a {
    border: 2px solid #cd090b;
    border-radius: 10px;
    padding: 7px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-red);
    color: var(--bg-red);
    font-size: var(--font-size18);
}
.tab_hd ul li a:hover {
    background: var(--bg-red);
    color: #fff;
}

/* inpage */
.inpage .box02 {
    padding: 20px 0 50px;
}
.inpage .box02 h2.title {
    position: relative;
    width: 100%;
    padding: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inpage .box02 h2.title::after {
    content: "";
    position: absolute;
    width: 100%;
    background-color: var(--bg-red);
    height: 3px;
    bottom: 0;
    left: 0;
    border-radius: 50px;
    -webkit-animation: scale-up-hor-center 0.5s
        cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: scale-up-hor-center 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.inpage .txtbox {
    line-height: 1.7;
    text-align: justify;
    font-size: var(--font-size18);
}
.inpage .txtbox ol {
    margin: 7px 0;
}
.inpage .txtbox.flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
}
.inpage .txtbox + .flexlist01 {
    margin: 20px 0;
}
.inpage .tablewrap {
    margin: 20px 0 0;
}
.inpage .tablewrap.mg0 {
    margin: 0;
}
.inpage .txtbox b {
    font-size: var(--font-size18);
}
.inpage .tabbox ol {
    margin: 0 !important;
}
.inpage .tabbox .tab_hd {
    display: flex;
    align-items: center;
    position: relative;
}
.inpage .tabbox .tab_hd.pd0 {
    padding: 0 0 15px 0;
}
.txtbox .formbox {
    background-color: var(--bg-pink);
    padding: 20px;
    border-radius: 10px;
    margin: 10px 0 0 0;
}
.txtbox .formbox .tbar b {
    flex-basis: 130px;
    font-size: var(--font-size16);
    padding: 5px 15px 0 0;
}
.txtbox .formbox.nb_form .btn02.btn02-big {
    font-size: inherit;
}
.txtbox .Txt ul {
    padding: 0 0 0 20px;
    margin: 5px 0 10px 0 !important;
    padding-left: 20px !important;
}

/* tabplan */
.tabplan .tab_hd ul {
    justify-content: center;
}
.tabplan .tab_hd {
    justify-content: center;
}
.tabplan .btnbox {
    padding: 0 0 15px 0;
}
.tabplan .btn_w {
    color: var(--bg-red);
}
.tabplan .formbox .tf_s {
    padding: 8px;
}
.tabplan .formbox .tbar {
    border-bottom: none;
}
.tabplan .Txt p {
    margin: 0em 0 0.9em 0;
    padding: 0;
}
/* 404page */
#wrap.page404 {
    padding: 0 0 0 0;
    height: 100vh;
    background-color: #f1f1f1;
}
.page404 #content {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    position: relative;
}
.box404 {
    background: #fff;
    max-width: 700px;
    width: 700px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    border-radius: 15px;
    height: 450px;
    max-height: 450px;
    overflow: hidden;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.2));
    position: relative;
}
.box404 .l {
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 23px;
}
.box404 .r {
    background-color: var(--bg-red);
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.box404 .r {
    color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px;
    gap: 10px;
}
.box404 .r em {
    font-size: 35px;
    font-weight: bold;
}
.box404 .r p {
    font-size: 18px;
}
.box404 .imgbox img {
    max-width: 100%;
}
.item404_01 .imgbox {
    width: 285px;
}
.item404_02 .imgbox {
    width: 300px;
}
.page404::after {
    content: "";
    background: url(../images/content/404_item01.svg) no-repeat scroll center
        bottom/100% auto;
    width: 300px;
    height: 300px;
    position: absolute;
    left: -120px;
    bottom: -100px;
    -webkit-animation: rotate-center 10s ease-in-out infinite both;
    animation: rotate-center 10s ease-in-out infinite both;
}
.page404::before {
    content: "";
    background: url(../images/content/404_item01.svg) no-repeat scroll center
        bottom/100% auto;
    width: 300px;
    height: 300px;
    position: absolute;
    right: -120px;
    top: -100px;
    -webkit-animation: rotate-center 10s ease-in-out infinite both;
    animation: rotate-center 10s ease-in-out infinite both;
}
form h3.title {
    color: var(--bg-red);
    font-size: 27px;
    padding: 0px 0px 17px;
}
form h3.title p {
    font-size: var(--font-size27-18);
    color: var(--color-grey3);
}
form .coninfo h3.title {
    padding: 0px 0px 4px;
}
.formbox.fb_comfirm .tbar {
    padding: 10px 0;
}
.formbox.fb_comfirm .tbar .tf {
    border: none;
}
.formbox .total {
    background: #f5f5f5;
    padding: 20px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.formbox {
    font-size: var(--font-size18);
    position: relative;
}
.formbox .tablewrap .btn {
    min-width: initial;
}
.formbox .btnbox {
    padding: 30px 0 0;
    display: block;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.formbox .btnbox.flex,
.btnbox.flex {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.formbox .btn {
    min-width: 180px;
}
.formbox .tf {
    background-color: #fff;
    width: 100%;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    padding: 10px 10px;
    font-size: 16px;
}
.formbox .tf[readonly] {
    color: #999;
    cursor: default;
}
.formbox .tf[readonly]:focus {
    outline: none;
}
.formbox .tf.noborder[readonly] {
    color: var(--bg-black);
    border: 0;
    padding: 10px 0;
}
.formbox .tf_cont {
    flex: 1;
    flex-grow: 1;
    position: relative;
    width: 100%;
}
.formbox .tf_cont.tf_flex {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.formbox .tf_icon {
    position: relative;
}
.formbox .tferr {
    border: 1px solid var(--bg-red);
}
.formbox .tf[disabled] {
    background-color: #222;
    background-color: #eeeeee;
}
.formbox .tbar {
    border-bottom: 1px solid #e3e3e3;
    position: relative;
    padding: 17px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.formbox .tbar:last-child {
    border: none;
}
.formbox .tbar.pd_top0 {
    padding: 0 0 17px;
}
.formbox .tbar.pd_bm0 {
    padding: 17px 0 0;
}
.formbox .tbar b label {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
.formbox .tbar b {
    flex-basis: 200px;
    padding: 7px 15px 0 0;
    position: relative;
    font-size: var(--font-size16);
    text-align: left;
}
.formbox .tbar b.w90 {
    flex-basis: 90px;
}
.formbox .tbar a:hover {
    text-decoration: underline;
}
.formbox .tf_s.w60 {
    width: 60px;
    padding: 5px;
}
.formbox .tf_s {
    width: 200px;
    border: 1px solid #e3e3e3;
    padding: 10px;
    background: #fff;
}
.formbox .tf_s.tferr {
    border: 1px solid var(--bg-red);
}
.formbox .tf_cont.tf_block .tf_s {
    border: 0;
    text-align: center;
    width: 45px;
}
.formbox .tf_code {
    width: 120px;
}
.formbox .form_hd {
    padding: 35px 0 0;
}
.formbox .form_hd:first-child {
    padding: 0 0 0;
}
.formbox .form_hd b {
    font-size: var(--font-size18);
    border-left: 9px solid var(--bg-red);
    padding: 0 0 0 10px;
}
.formbox select.seltype {
    width: 100%;
}
.formbox select.seltype.w185 {
    width: 185px;
}
.formbox .i_eye {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    z-index: 20;
}
.formbox .tf_psw {
    padding: 10px 45px 10px 10px;
    position: relative;
}
.formbox .tflist {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}
.formbox .tflist li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.formbox .tflist .btn {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}
.formbox .tflist .btn + span {
    color: var(--color-grey3);
}
.formbox .tflist .btn + span.bind {
    color: var(--bg-red);
}
.formbox .btn02.btn_w,
.formbox .btn.btn_w {
    border: 1px solid var(--color-grey3);
}
.formbox .form_hd span {
    padding: 0 10px;
    color: var(--bg-red);
}
.formbox.nb_form .tbar {
    padding: 0;
}
.formbox h4.title {
    color: var(--bg-red);
    font-size: 23px;
    padding: 20px 0 10px 0;
}
.formbox.fb_flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}
.formbox.fb_flex .tbar b {
    padding: 7px 7px 0 0;
}
.formbox .btn.js_del {
    min-width: 55px;
    position: absolute;
    right: 6px;
    top: 25px;
    height: 30px;
    width: 20px;
    font-size: 15px;
}
.formbox .in_tf {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.formbox .in_tf .btnbox {
    padding: 0;
    margin: 0 0 0 10px;
}
.formbox .in_tf .btn {
    min-width: 100px;
}
.txtbox .formbox.nb_form {
    padding: 30px 25px;
}
.tf_cont .upload {
    padding: 5px 0 0 0;
}
.tf_wrap {
    display: flex;
    text-align: center;
    justify-content: flex-start;
    gap: 32px;
    background: #fff;
    border-radius: 10px;
    padding: 15px 15px;
    border: 2px solid var(--color-grey);
    align-items: center;
}
.tf_wrap .l {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
}
.tf_wrap .l img {
    max-width: 100%;
}
.tf_wrap .r {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.tf_wrap .tbar {
    padding: 16px 0;
}
.tfbtns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0 0 0;
}
.tfbtns .btnbox {
    padding: 0;
}
.tfbtns .err {
    padding: 0 0 0 38px;
}
.tbar .tficon .i_icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.remind {
    padding: 15px;
    border: 2px solid var(--bg-red);
    border-radius: 5px;
    margin: 10px 0 0;
}
.errtxt {
    color: var(--bg-red);
    font-size: 16px;
}
.mbbox .formbox .tf_wrap .tbar b {
    flex-basis: 115px;
}
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset !important;
    border: 2px solid #666;
}

/* finlist財務報告列表單 */
.finreport {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.finreport .tab_hd {
    padding: 15px 0 30px;
}
.finreport .tab_hd ul {
    justify-content: center;
}
.finreport .tabbox {
    width: 100%;
}
.finreport .tabbox .tab_bd {
    gap: 10px;
    display: flex;
    background-color: transparent;
    padding: 0;
}
.finreport .tabcont {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    gap: 0;
    border: 2px solid #eee;
}
.finreport .tabcont h3.title {
    background-color: var(--bg-red);
    width: 100%;
    color: #fff;
    padding: 10px;
    font-size: 22px;
}
.finreport .tabcont .bdbox {
    background: #fff;
    padding: 0 15px;
}
.finreport .tabcont .bdbox ul li {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-grey);
}
.finreport .tabcont .bdbox ul li:last-child {
    border-bottom: none;
}
.finreport .tabcont .bdbox ul li a {
    color: var(--bg-black);
    display: flex;
}
.finreport .tabcont .bdbox ul li a:hover {
    color: var(--bg-red);
}
.finreport .tabcont .hdbox {
    padding: 0;
}
.phone .finreport {
    display: none;
}
.phone .finreport .tabbox .tab_bd {
    padding: 0;
}
/* 彈跳視窗f_list列表 */
.formbox .f_list h4.title {
    text-align: left;
    padding: 0;
    color: var(--bg-black);
    font-size: 19px;
}
.f_list ul {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 16px;
}
.f_list ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    padding: 0 0 15px 12px;
    border-bottom: 1px solid var(--color-grey);
}
.f_list ul li::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 20px;
    left: 0;
    background-color: #a9a9a9;
    left: 0;
    top: 4px;
    border-radius: 10px;
}
.f_list small {
    display: block;
    text-align: left;
    font-size: 16px;
    padding: 4px 0 0 0;
    color: #a9a9a9;
    font-weight: normal;
}
.f_list small.err {
    color: var(--bg-red);
    display: block;
}
.formbox .f_list .btnbox {
    padding: 0;
}
.f_box {
    padding: 10px 0 0;
}
/* paybox */
.paybox .tab_hd {
    margin: 0 0;
    padding: 0 0 15px;
    flex-direction: column;
}
.paybox .tab_hd ul {
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    justify-content: center;
    overflow-x: inherit;
    width: 100%;
    border: 1px solid var(--color-grey);
    background: #fff;
    padding: 35px 20px 20px 20px;
    margin: 0;
    border-radius: 10px;
}
.paybox .tab_hd h3.title {
    text-align: center;
    font-size: 18px;
    background: var(--bg-black);
    padding: 8px 17px;
    color: #fff;
    border-radius: 50px;
    width: 100%;
    position: relative;
    z-index: 2;
    top: 17px;
    background: #952424;
}
.paybox .tab_hd ul li {
    min-width: 187px;
    flex: 1;
}
/* gopath */
.gopath {
    padding: 25px 0 0;
}
.gopath span {
    background: url(../images/content/i_arrow02.svg) no-repeat scroll 2px center;
    background-size: 8px auto;
    padding: 0 0 0 18px;
}
.gopath span:first-child {
    background: none;
    padding: 0;
}
.gopath span a {
    color: var(--bg-black);
}
/* media */
.media {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.mbbox .formbox .tbar b {
    flex-basis: 180px;
    padding: 9px 15px 0 0;
    position: relative;
    font-size: var(--font-size16);
}

#footer {
    background: #f6dbbb;
    position: relative;
    color: var(--bg-black);
}
#footer .hdbox h4.title {
    font-size: var(--font-size16);
    color: var(--bg-red);
}
#footer .hdbox {
    padding: 25px 0;
}
#footer .bdbox {
    padding: 10px 0;
    background-color: var(--bg-black);
    color: #fff;
    text-align: center;
}
.ft_info {
    background: var(--bg-white);
    border-radius: 5px;
    margin: 10px 0;
}
.ft_info a:hover {
    color: var(--color-darkblue);
}
.ft_info ul {
    display: flex;
    padding: 15px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
}
.ft_info ul li {
    width: 32.8%;
    background: var(--color-grey2);
    padding: 18px;
    border-radius: 10px;
}
/* owl */
.owl-item .item a {
    display: block;
    height: 240px;
}
.owl-carousel .owl-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0;
    background-color: var(--bg-black);
    text-align: center;
}
.owl-carousel .owl-nav button:nth-of-type(1) {
    margin: 0 13px 0 0;
}
.owl-carousel .owl-nav button:nth-of-type(2) {
    margin: 0 0 0 13px;
}
.owl-carousel .owl-nav button span {
    display: none;
    color: var(--bg-white);
    width: 65px;
    height: 20px;
    background: url(../images/content/icon_arrow_w_r.svg) no-repeat scroll
        center;
    text-indent: -9999px;
}
.owl-carousel .owl-nav button.owl-prev span {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background: white;
    border: none;
    padding: 0px 0 !important;
    font: inherit;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    color: var(--bg-white) !important;
}

/* swl */
.swal2-container.swal2-shown {
    background: rgba(0, 0, 0, 0.8) !important;
}
.swal2-popup.popout {
    width: 32em;
    padding: 23px;
    border-radius: 10px;
}
.swal2-popup.popout #swal2-content {
    padding: 5px 10px;
    font-size: 25px;
}
.swal2-popup.popout .swal2-title,
.swal2-popup.popout2 .swal2-title {
    font-size: 25px;
    font-weight: 500;
    margin: 5px 0;
    padding: 0 0 7px;
    border-bottom: 5px solid var(--bg-red);
}
.swal2-popup.popout .swal2-actions {
    margin: 1em auto 5px;
    width: 100%;
}
.swal2-popup.popout .swal2-styled:focus {
    box-shadow: none;
}
.swal2-popup.popout .swal2-styled:not([disabled]) {
    color: #303030;
    width: 45%;
    padding: 0.625em 0;
    margin: 0 5px;
}
.swal2-popup.popout .swal2-styled.swal2-confirm,
.swal2-popup.popout2 .swal2-styled.swal2-confirm {
    background-color: var(--bg-black) !important;
    color: #fff;
}
.swal2-popup.popout .swal2-styled.swal2-cancel {
    background-color: #fff !important;
    border: 1px solid #c9c9c9;
}
.swal2-popup.popout .swal2-styled.swal2-cancel:hover {
    background-color: var(--bg-grey);
}
.swal2-popup.popout .swal2-styled.swal2-confirm:hover {
    background-color: var(--bg-red) !important;
}
.swal2-popup.popout .formbox {
    padding: 5px 0 0;
}
.swal2-popup.popout .tfbar {
    padding-left: 45px;
    position: relative;
}
.swal2-popup.popout .tfbar b {
    position: absolute;
    left: 0;
    top: 13px;
}
.swal2-popup.popout .swal2-content p {
    font-size: 18px;
    font-weight: 500;
    padding: 30px 0;
    line-height: 1.6em;
}
.swal2-popup.popout .popcont small {
    display: block;
    color: var(--bg-red);
}
.swal2-popup.popout .formbox .tbar b {
    flex-basis: inherit;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 115px;
    font-size: 18px;
}
.swal2-popup.popout .formbox .tbar p {
    padding: 0;
    display: inline-block;
    font-weight: 400;
    margin: -2px 0 0 0;
    flex: 1;
}
.swal2-popup.popout .formbox .tbar02 {
    justify-content: space-between;
}
.swal2-popup.popout .formbox .inbar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.swal2-popup.popout .formbox .download a {
    font-size: 15px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--bg-red);
    padding: 5px 10px;
    border-radius: 25px;
}
.swal2-popup.popout .swal2-content p.txtleft {
    text-align: left;
    font-size: 18px;
}
.swal2-popup.popout .popcont .imgbox {
    margin: 0 auto;
}
.swal2-popup.popout.popout_l .swal2-content p {
    text-align: left;
    font-size: 20px;
}
.swal2-popup.popout.popout_l .imgbox {
    width: auto;
    padding: 20px 0 0 0;
}
.swal2-popup.popout.popout_l .imgbox img {
    max-width: 100%;
}
.swal2-popup.popout2 {
    width: 75em;
}
.swal2-popup.popout2 .formbox {
    font-size: 18px;
}
.swal2-popup.popout2 .formbox .tbar p {
    text-align: left;
}
.swal2-popup.popout2 h3.title {
    font-size: 23px;
    padding: 10px 10px 10px 0;
    text-align: left;
    color: var(--bg-red);
}
.swal2-popup.popout2 .tablewrap {
    font-size: 18px;
}
.swal2-popup.popout2 .tablewrap .tb_tt {
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.swal2-popup.popout2 .swal2-styled.swal2-confirm {
    width: 250px;
}
.swal2-popup.popout2 .formbox .tbar {
    padding: 11px 0;
}
.swal2-popup.popout2 .formbox .f_list .tbar {
    padding: 0;
}
.swal2-popup.popout .cont {
    background: var(--color-grey2);
    padding: 20px 20px;
    border-radius: 10px;
    text-align: left;
    font-size: 17px;
    margin: -15px 0 0 0;
}
.swal2-popup.popout .cont ul {
    margin: 0;
    padding: 0 0 0 19px;
    text-align: justify;
}
/* 頁數 */
.pagerlist {
    text-align: center;
    padding: 30px 0 0;
}
.pagerlist ul {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-item.first,
.page-item.last {
    text-indent: -9999px;
    display: none;
}
.page-item.first a,
.page-item.last a {
    background: url("../images/content/i_headpagearrow.svg") no-repeat scroll
        center;
    width: 50px;
    height: 50px;
    color: #fff;
}
.page-item.first a {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
.page-item.next .page-link,
.page-item.prev .page-link {
    background: url("../images/content/i_pagearrow.svg") no-repeat scroll center;
    width: 50px;
    height: 50px;
    color: #fff;
    text-indent: -9999px;
    background-color: #fff;
}
.page-item.prev .page-link {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
    z-index: 2;
    background: var(--bg-red);
    color: #fff;
    border: 2px solid var(--bg-red);
}
.page-item.disabled .page-link,
.page-item.disabled .page-link:focus,
.page-item.disabled .page-link:hover {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #fff;
}
.page-link {
    position: relative;
    float: left;
    color: #bcbcbc;
    width: 50px;
    height: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #bcbcbc;
    margin: 0 5px;
    background-color: #fff;
}
.page-link:hover {
    background: var(--bg-red);
    color: #fff;
    border: 2px solid var(--bg-red);
}

/* form type */
select.seltype {
    width: 100%;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    display: block;
    font-size: 16px;
    padding: 8px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}
select.seltype {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 16px) calc(1em + -1px),
        calc(100% - 11px) calc(1em + -1px), calc(100% - 1.8em) 0.25em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}
select.seltype:focus {
    background-image: linear-gradient(45deg, gray 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, gray 50%),
        linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 9px) calc(1em + -1px),
        calc(100% - 14px) calc(1em + -1px), calc(100% - 1.8em) 0.4em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    border-color: var(--bg-red);
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
.ckratype {
    margin: 6px 5px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: baseline;
}
.ckratype-default input:checked + span:after {
    background-color: #00ffff;
}
.ckratype input,
.ckratype input:disabled {
    position: absolute;
    opacity: 0;
}
.ckratype span {
    background: #fff;
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid #c9c9c9;
    vertical-align: bottom;
    margin: 0px 7px -2px 0;
    border-radius: 4px;
}
.ckratype i {
    font-style: normal;
}
.ckratype span:after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background-color: #fff;
    background-size: cover;
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
.ckratype input:checked + span:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.ckratype ~ a,
.ckratype ~ a:hover {
    color: var(--bg-red);
    text-decoration: underline;
}
.ckratype-default input:checked + span:after {
    background-color: var(--bg-red);
}
.ratype input:checked + span:after {
    background-color: var(--bg-red);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.ratype span {
    webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.ckratype-danger input:checked + span:after {
    background-color: #de815c;
}
.ckratype-info input:checked + span:after {
    background-color: #5ccdde;
}
.ckratype-success input:checked + span:after {
    background-color: #afde5c;
}
.cktype input:checked + span:after {
    background-color: var(--bg-red);
}
.ckflex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.ckra_box {
    flex-direction: column;
    align-items: flex-start;
}
.ckra_box select.seltype {
    width: 100px;
}
.ckra_box .ckratype {
    display: flex;
    align-items: center;
    margin: 6px 0;
}
.ckra_box .ckratype p {
    padding: 0 5px;
}
.ra_group {
    background: #fff;
    border: 3px solid #666;
    display: flex;
    width: 100px;
    margin: 3px 0 3px;
    border-radius: 5px;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
    font-size: 0.8125em;
}
.ra_group label {
    padding: 0;
    flex-grow: 2;
    width: 50%;
}
.ra_group input[type="radio"] {
    position: absolute;
    visibility: hidden;
    display: none;
}
.ra_group i {
    color: #c1c1c1;
    display: block;
    cursor: pointer;
    padding: 5px 5px;
    font-style: normal;
    text-align: center;
}
.ra_group input[type="radio"]:checked + i {
    color: #fff;
    background: #fe6150;
}
.ra_group label + input[type="radio"] + i {
    border-left: solid 3px #675f6b;
}
.tfbar2 .ckflex {
    display: flex;
    justify-content: space-between;
}
.tfbar2 .ckratype2 {
    width: 30%;
    padding: 7px 0;
    margin: 5px 0;
}
.tfbar2 .ckratype2 span {
    width: 100%;
    height: 40px;
}
.tfbar2 b {
    padding: 0 0 10px 0;
    display: inline-block;
}

/* chosen-container */
.tf_cont .chosen-container {
    max-width: 100%;
    position: relative;
}
.tf_cont .chosen-container::after {
    content: "";
    position: absolute;
}
.tf_cont .chosen-container-multi .chosen-choices {
    background-image: linear-gradient(#fff 0%, #fff 0%);
}

/* RWD iframe */
.rwdbox {
    position: relative;
    padding-bottom: 40.25%;
    padding-top: 25px;
    height: 0;
    width: 100%;
}
.rwdbox iframe,
.rwdbox object,
.rwdbox embed,
.rwdbox video,
.rwdbox audio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.rwdbox .map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/* 動畫進場 */
.anibox {
    opacity: 0;
}
.come-in {
    opacity: 1;
    transform: translateY(50px);
    transform: translateY(0px) \9;
    animation: come-in 2s ease forwards;
}
.come-in:nth-child(odd) {
    animation-duration: 1.5s;
}
.already-visible {
    transform: translateY(0);
    animation: none;
}
@keyframes come-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

/* 404動畫*/
@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media (max-width: 1500px) {
    .formbox .tbar {
        padding: 17px 0;
    }
    .tablewrap tbody td {
        padding: 15px;
    }
}

@media (max-width: 1400px) {
    .formbox .tbar {
        padding: 17px 0;
    }
}

@media (max-width: 1300px) {
    #header .hdbox .inbox,
    .mnav .inbox,
    .logomain .inbox {
        width: 90%;
    }
    .logomain .inbox::after,
    .logomain .inbox::before {
        display: none;
    }
}

@media (max-width: 1200px) {
    :root {
        --font-size18: 17px;
    }

    .inbox {
        width: 90%;
    }
    .list01 ul {
        gap: 20px 0;
    }
    .list01 ul li {
        width: 31%;
        margin: 0 1%;
    }
}

@media (max-width: 1150px) {
    :root {
        --font-size24: 22px;
    }

    #wrap {
        padding: 50px 0 0 0;
    }
    body.fixed {
        overflow: hidden;
    }
    body.fixed #header .hdbox {
        height: 0;
        opacity: 0;
    }
    body.fixed .btnbox .money_btn {
        display: none;
    }
    body.fixed .toplink {
        display: none;
    }
    .is-down #header {
        top: 0;
    }
    .is-down .gotop {
        transform: translate(-8px, 40px);
    }
    .is-down .logomain .r .btnbox {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        align-items: flex-end;
    }
    #header .hdbox {
        background-color: var(--bg-red);
        height: 50px;
    }
    #header .hdbox .shbox {
        display: none;
    }
    .toplink > ul > li::after {
        background-color: #fff;
    }
    .toplink ul li.nomb a:last-child {
        display: none;
    }
    .is-down .toplink ul > li > a:hover,
    .toplink ul > li > a:hover {
        color: #fff;
    }
    .phone_menu {
        display: block;
        position: absolute;
        top: 0;
        z-index: 99;
        left: 5px;
    }
    .slidemnav {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        width: 630px;
        background: #fafafa;
        transform: translateX(-100%);
        flex-direction: column;
        padding-top: 50px;
    }
    .slidemnav.open {
        transform: translateX(0);
    }
    .slidemnav .mnav {
        overflow: auto;
        position: relative;
        background: #fff;
        height: 100vh;
    }
    .slidemnav .mnav ul {
        padding: 15px 15px 55px 15px;
        flex-direction: column;
        overflow: auto;
        justify-content: space-around;
    }
    .slidemnav .mnav ul > li {
        width: 100%;
        border-bottom: 1px solid #e4e4e4;
        display: block;
    }
    .slidemnav .mnav ul > li::after {
        display: none;
    }
    .slidemnav .mnav ul > li > a {
        color: var(--bg-black);
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .slidemnav .mnav ul > li > a:hover {
        color: #fff;
    }
    .slidemnav .mnav ul > li.on > a {
        background-color: #9e2a2a;
        color: #fff;
    }
    .slidemnav .mnav ul > li.on > a .m_open {
        transform: scaleY(-1);
        color: #d0d0d0;
    }
    .slidemnav .mnav ul li .subnav ul li.on ul li a {
        background-color: #f4f4f4;
        color: #333;
    }
    .slidemnav .mnav ul li .subnav ul li a:hover,
    .slidemnav .mnav ul li .subnav ul li.on a {
        color: #333;
        background: #e4e4e4;
    }
    .slidemnav .subnav {
        position: initial;
        border-radius: 0 0 10px 10px;
    }
    .slidemnav .subnav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        background: var(--color-grey2);
        position: revert;
    }
    .slidemnav .subnav ul li a {
        text-align: center;
    }
    .slidemnav .subnav > li.on > ul {
        background: #f3f3f3;
        position: initial;
        display: block;
    }
    .slidemnav .subnav li ul li.on ul {
        display: block;
    }
    .slidemnav .subnav ul li {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .slidemnav.open {
        transform: translateX(0);
        z-index: 1;
        display: block;
        overflow: scroll;
        z-index: 20;
        box-shadow: 525px 0px 0 rgba(0, 0, 0, 0.7);
    }
    .slidemnav.open .shbox {
        display: block;
        width: 250px;
        margin: 0 auto;
        border-radius: 10px;
        margin: 30px auto 0;
    }
    .slidemnav.open .toplink {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slidemnav.open .toplink ul {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
    }
    .slidemnav.open .toplink ul li a::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 1px;
        background-color: #dedede;
        top: 97%;
        right: 50%;
        transform: translate(50%, 0);
    }
    .slidemnav.open .toplink ul li a {
        padding: 10px 10px;
        font-size: 14px;
    }
    .slidemnav.open .mnav .phone_m {
        display: block;
    }
    .mnav ul .subnav ul li .m_open {
        transform: rotate(0deg);
        color: #d0d0d0;
    }
    .mnav ul .subnav ul li.on .m_open {
        color: #d0d0d0;
    }
    .mnav ul > li::before {
        display: none;
    }
    .subnav ul li a:hover .m_open {
        transform: inherit;
    }
    .subnav li.on ul {
        position: static;
    }
    .logomain {
        padding: 0;
        position: absolute;
        z-index: 22;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        background: var(--bg-red);
    }
    .logomain .inbox {
        align-items: flex-start;
        width: 87%;
    }
    .logomain .inbox::after,
    .logomain .inbox::before {
        display: none;
    }
    .logomain .l {
        background: #fff;
        padding: 15px;
        width: 147px;
        height: 71px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 20px 20px;
        box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    .logomain img {
        width: 100px;
        max-width: initial;
    }
    .logomain .l a {
        display: block;
    }
    .logomain .r {
        margin: 5px 0 0 0;
    }
    .logomain .r .shbox {
        display: none;
    }
    .logomain .r .btnbox {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        align-items: flex-end;
    }
    .logomain .btnbox {
        position: fixed;
        right: 10px;
        bottom: 140px;
    }
    .logomain .btn {
        justify-content: flex-start;
        flex-direction: column;
        min-width: 57px;
        width: 57px;
        text-align: center;
        white-space: unset;
    }
    .i_menu.open span:nth-child(2) {
        left: 4px;
        top: 22px;
    }
    .i_menu.open span:nth-child(3) {
        left: 4px;
        top: 22px;
    }
    .i_menu.open span {
        background: #fff;
    }
    .m_open {
        color: #b4b4b4;
        width: 15px;
        height: 15px;
        text-align: center;
        margin: 0 0 0 11px;
        padding: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        position: absolute;
        right: 20px;
    }
    .txtbox .Txt {
        width: 100% !important;
    }
    .box02 .hdbox {
        padding: 0 0 15px 0;
    }
    .mnav ul > li {
        min-width: 97px;
    }
    .mnav ul > li > a {
        padding: 15px 12px;
    }
    .finreport .tabcont .hdbox {
        padding: 0;
    }
    .tab_hd ul {
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
    .hassub.on .hassub ul {
        display: none;
    }
}

@media (min-width: 1150px) {
    /* is-down */
    .is-down #header .hdbox {
        height: 48px;
    }
    .is-down #header {
        top: 0px;
    }
    .is-down .logomain .btnbox {
        position: fixed;
        right: 10px;
        top: 150px;
    }
    .is-down .logomain .btn {
        width: 105px;
        justify-content: flex-start;
        flex-direction: column;
        min-width: 57px;
        width: 57px;
        text-align: center;
        white-space: unset;
    }
    .is-down .logomain .r {
        z-index: 2;
    }
    .is-down .logomain .r .btnbox {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        align-items: flex-end;
    }
    .is-down .logomain .inbox::after {
        width: 34%;
    }
    .is-down .logomain .inbox::before {
        width: 122%;
    }
    .is-down .logomain {
        padding: 5px 0;
        align-items: flex-end;
    }
    .is-down .nmav {
        background-color: var(--bg-black);
    }
    .is-down .btnbox .i_money svg {
        width: 30px;
        height: 30px;
    }
    .is-down .btnbox .money_btn {
        padding: 10px 20px;
        margin: 0;
    }
    .is-down .toplink {
        background: #ffffff;
        border-radius: 50px;
        border: 3px solid var(--bg-red);
    }
    .is-down .toplink ul > li > a {
        color: var(--bg-black);
    }
    .is-down .toplink > ul > li::after {
        background-color: var(--bg-black);
    }
    .is-down .toplink ul .subnav ul li a {
        padding: 10px 20px;
    }
    .is-down .toplink ul .subnav ul li.on a {
        color: #fff;
    }
    .is-down .toplink ul li.nomb a {
        padding: 6px 0;
    }
    .is-down .toplink ul .subnav ul li:first-child a:hover {
        border-radius: 10px 10px 0 0;
    }
}

@media (max-width: 1000px) {
    .logomain .l {
        left: 16px;
    }
}

@media (max-width: 950px) {
    .btnbox .i_money svg {
        width: 30px;
        height: 30px;
    }
    .txtbox .Txt {
        display: flex;
        flex-direction: column;
    }
    .txtbox img {
        margin: 0 !important;
    }
    .btnbox .money_btn {
        padding: 10px 20px;
        margin: 0;
    }
    .bnrbox .list01.listflex .list_txt {
        padding: 15px 15px 82px 15px;
    }
    .list01.listflex .artclebox .imgbox img {
        max-width: 100%;
    }
    .list01.listflex .list_txt {
        padding: 15px 15px 15px;
    }
    .list01 .artclebox .imgbox img {
        max-height: 260px;
    }
    .list01 .list_txt {
        padding: 15px 15px 109px 15px;
    }
    .list01 ul li {
        width: 48%;
        margin: 0 1%;
    }
    .list01 p.txtlist {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }
    .tablewrap {
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .tablewrap tbody td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 479px;
    }
    .ps.pd8 {
        display: block;
    }
    .gopath {
        padding: 45px 0 0;
    }
    .finreport {
        display: none;
    }
    .finreport .tabcont#tab2 {
        display: none;
    }
    .phone .finreport {
        display: block;
    }
    .formbox select.seltype.w185 {
        width: 31%;
    }
    .swal2-popup.popout2 .tablewrap table {
        width: 950px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: wrap;
    }
    .swal2-popup.popout2 .tablewrap {
        font-size: 16px;
    }
    .formbox.fb_flex .tbar {
        width: 48%;
    }
    .formbox.fb_flex select.seltype.w185 {
        width: 100%;
    }
    .formbox.fb_flex .tbar b {
        flex-basis: 118px;
    }
    .formbox.fb_flex .tbar b label {
        justify-content: flex-end;
    }
    .imp {
        padding: 2px 7px;
    }
    .box404 {
        width: 100%;
    }
    .box404 .r {
        width: 55%;
        position: relative;
    }
    .box404 .l {
        width: 45%;
    }
    .f_box {
        font-size: 16px;
    }
    .listbox02 .list01 .imgbox img {
        max-width: inherit;
    }
    .list01.list01_2 .artclebox .imgbox img {
        max-width: 100%;
    }
}

@media (max-width: 850px) {
    .f_list ul li {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .formbox .f_list .btnbox .btn {
        width: 100%;
    }
    .formbox .f_list .btnbox {
        width: 100%;
    }
    .swal2-popup .swal2-actions {
        margin: 0;
    }
    .swal2-popup.popout2 .swal2-styled.swal2-confirm {
        width: 100%;
    }
}

@media (max-width: 770px) {
    .listbox ul li a {
        flex-direction: column;
        gap: 3px;
    }
    .listbox ul li {
        flex-direction: column;
    }
    .list01.listflex .artclebox a {
        display: flex;
        flex-direction: column;
    }
    .list01.listflex .imgbox {
        width: 100%;
    }
    .list01.listflex .list_txt {
        width: 100%;
    }
    .list01.listflex .btnbox {
        width: 100%;
    }
    .ft_info ul {
        gap: 8px;
        padding: 15px;
    }
    .ft_info ul li {
        width: 100%;
        padding: 6px 18px;
    }
    .listbox02 .list01.listflex .imgbox {
        width: 100%;
        max-height: inherit;
        height: inherit;
    }
    .list01.listflex .artclebox .imgbox img {
        max-height: revert;
        height: revert;
        max-width: 100%;
        position: revert;
    }
    .list01.list01_2 {
        padding: 10px;
    }
    .formbox .tf_cont2.tf_flex {
        gap: 5px;
    }
    .bnrbox .list01.listflex .imgbox {
        height: 340px;
        max-height: 340px;
    }
    .tfbtns {
        padding: 10px 0 0 0;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .logomain .l {
        left: 23px;
    }
}

@media (max-width: 650px) {
    :root {
        --font-size18: 17px;
    }
    .formbox .tbar {
        flex-direction: column;
        padding: 18px 0;
    }
    .formbox .tbar b,
    .txtbox .formbox .tbar b,
    .mbbox .formbox .tbar b {
        flex-basis: 30px;
        padding: 0;
    }
    .card .formbox .tbar b,
    .mbbox .formbox .tf_wrap .tbar b {
        flex-basis: 30px;
    }
    .formbox.fb_comfirm .tbar {
        flex-direction: row;
        align-items: center;
    }
    .tf_wrap {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    .tf_wrap .r {
        width: 100%;
    }
    .tablewrap tbody td {
        padding: 10px;
    }
    .tab_bd {
        padding: 18px;
    }
    .finreport {
        flex-direction: column;
    }
    .finreport .tabcont {
        width: 100%;
    }
    .btnbox.flex {
        width: 100%;
    }
    .btnbox.flex .btn {
        width: 100%;
    }
    .finreport .btnbox.flex {
        padding: 0 0 20px 0;
        display: flex;
    }
    .btn02.btn02-big {
        min-width: initial;
        width: 100%;
    }
    .txtbox .formbox.nb_form {
        padding: 20px;
    }
    .formbox .tbar b,
    .txtbox .formbox .tbar b {
        flex-basis: 26px;
    }
    .formbox.nb_form .btnbox {
        padding: 20px 0 0;
    }
    .gopath {
        font-size: 15px;
        padding: 25px 0 0;
    }
    .btnbox .money_btn {
        padding: 11px 10px;
        margin: 0;
        font-size: 14px;
    }
    .btnbox .i_money svg {
        width: 25px;
        height: 25px;
    }
    .logomain .l {
        width: 121px;
        height: 53px;
    }
    .logomain img {
        width: 80px;
    }
    .logomain .btn {
        min-width: 40px;
        width: 40px;
    }
    .gotop {
        width: 38px;
        height: 58px;
    }
    .is-down .gotop {
        transform: translate(-11px, 40px);
    }
    .formbox.fb_flex .tbar b {
        flex-basis: 35px;
    }
    .formbox .btn.js_del {
        top: 14px;
        right: 20px;
    }
    .additem li {
        padding: 20px 20px 20px 20px;
    }
    .formbox .btnbox {
        padding: 16px 0 0;
    }
    .formbox .tbar b.w90 {
        flex-basis: 26px;
    }
    .box404 {
        flex-direction: column;
        height: inherit;
        max-height: inherit;
        border-radius: 0;
        background-color: #f4f4f4;
    }
    .box404 .l {
        width: 100%;
        flex: 2;
    }
    .box404 .r {
        width: 100%;
    }
    .item404_01 .imgbox {
        width: 200px;
    }
    .item404_02 .imgbox {
        width: 200px;
    }
    .page404::before {
        right: -150px;
        top: -100px;
        z-index: 99;
        width: 250px;
        height: 250px;
    }
    .page404::after {
        left: -160px;
        bottom: 260px;
        z-index: 99;
        width: 250px;
        height: 250px;
    }
    #wrap.page404 {
        background-color: transparent;
    }
    .donabox {
        flex-direction: column;
        padding: 0;
        padding: 3px 0;
    }
    .donabox .list_txt {
        padding: 11px 0;
        border-bottom: 1px solid var(--color-grey);
        margin: 0 20px;
        border-right: 0;
        flex-direction: row;
        align-items: center;
    }
    .donabox .list_txt h3.title {
        font-size: 23px;
        margin: 5px 0 0;
    }
    .f_style {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .slidemnav {
        width: 100%;
    }
    body.fixed .logomain .l {
        left: 37%;
    }
    .tfbtns {
        gap: 0;
    }
}

@media (max-width: 550px) {
    :root {
        --font-size18-30: 27px;
        --font-size18: 16px;
        --font-size16: 15px;
        --font-size27: 24px;
        --font-size27-18: 18px;
    }

    .list01 ul {
        flex-direction: column;
    }
    .list01 ul li {
        width: 100%;
    }
    .list01.list01_2 .artclebox .imgbox {
        max-height: 200px;
        height: 200px;
    }
    .list01.list01_2 .artclebox .imgbox img {
        height: initial;
        max-height: initial;
    }
    .list01.list01_2 {
        padding: 30px;
    }
    .list01.list01_2 ul li {
        width: 100%;
        margin: 0;
    }
    .listbox ul li {
        padding: 10px 20px;
    }
    .loginbox {
        background-color: transparent;
    }
    .loginbox {
        width: 100%;
    }
    .bg_r {
        background-color: #fff;
    }
    .bg_r.pd50 {
        padding: 0;
    }
    .formbox .btn {
        min-width: initial;
        width: 100%;
    }
    .formbox .btnbox.flex .btn {
        min-width: initial;
        width: 100%;
    }
    .formbox .tflist li {
        width: 100%;
    }
    .formbox .tflist .btn {
        min-width: 180px;
        width: 80%;
    }
    .formbox .tflist .btn + span {
        display: block;
        flex: 1;
        width: 20%;
    }
    .formbox.fb_comfirm .tbar .tf {
        padding: 0;
    }
    .formbox.fb_comfirm .tbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .card .formbox.fb_comfirm .tbar b {
        flex-basis: 25px;
    }
    .finreport .tabcont .bdbox ul li {
        padding: 12px 0;
    }
    .txtbox .formbox.nb_form {
        padding: 20px;
    }
    .ft_info ul li {
        padding: 8px 18px;
    }
    .ft_info ul {
        gap: 8px;
    }
    .box02,
    .box01 {
        padding: 30px 0;
    }
    .box01 .hdbox,
    .box02 .hdbox {
        padding: 0 0 15px 0;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .mnav .inbox {
        width: 100%;
    }
    .slidemnav .mnav ul {
        padding: 0;
    }
    .tab_bd {
        padding: 13px;
    }
    #footer {
        font-size: 15px;
    }
    #footer .hdbox {
        padding: 14px 0;
    }
    .pagerlist {
        padding: 25px 0 0;
    }
    .page-link {
        width: 45px;
        height: 45px;
        margin: 0 3px;
    }
    .page-item.next .page-link,
    .page-item.prev .page-link,
    .page-item.next .page-link,
    .page-item.prev .page-link,
    .page-item.disabled .page-link,
    .page-item.disabled .page-link:focus,
    .page-item.disabled .page-link:hover,
    .page-item.first a,
    .page-item.last a {
        width: 45px;
        height: 45px;
    }
    .swal2-popup.popout2 .swal2-styled.swal2-confirm {
        margin: 1.25em 0 0;
        width: 100%;
    }
    .swal2-popup.popout2 .formbox {
        font-size: 16px;
    }
    .tablewrap tbody td {
        font-size: 15px;
    }
    .article h3.title {
        padding: 0;
        font-size: 29px;
    }
    .oth_log {
        padding: 10px 0;
    }
    .loginbox .tf_cont .field input {
        padding: 15px 15px;
    }
    .loginbox .tf_cont .field label {
        top: 14px;
    }
    .coninfo {
        padding: 25px 0 0 0;
    }
    .coninfo.Txt p {
        font-size: 15px;
        padding: 0;
    }
    .remind {
        padding: 9px;
    }
    .inpage .box02 {
        padding: 20px 0 25px;
    }
    .tabbox.tabplan .tab_hd ul li {
        width: 100%;
    }
    .formbox .tf_cont2.tf_flex {
        font-size: 14px;
        gap: 5px;
    }
    .donabox .list_txt {
        flex-direction: column;
    }
    .bnrbox .list01.listflex .imgbox {
        height: 230px;
        max-height: 230px;
    }
    .list01 .artclebox .imgbox {
        max-height: 260px;
        height: 260px;
    }
    .list01 .artclebox .imgbox img {
        max-height: inherit;
        height: inherit;
    }
    .formbox .in_tf {
        flex-direction: column;
        width: 100%;
    }
    .formbox .in_tf .btnbox {
        width: 100%;
        margin: 10px 0 0;
    }
    .formbox .in_tf .tf_s {
        width: 100%;
    }
    .logomain .l {
        left: 42px;
    }
    body.fixed .logomain .l {
        left: 33%;
    }
    .Txt p {
        font-size: 18px;
    }
}

@media (max-width: 450px) {
    .logomain .l {
        height: 56px;
    }
    .list01.list01_2 {
        padding: 20px;
    }
    .formbox select.seltype.w185 {
        width: 100%;
    }
    .gopath {
        padding: 25px 0 0;
    }
    .formbox .tf_s {
        width: 45%;
    }
    .formbox .in_tf .tf_s {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .page-link {
        width: 40px;
        height: 40px;
        margin: 0 3px;
    }
    .page-item.next .page-link,
    .page-item.prev .page-link,
    .page-item.next .page-link,
    .page-item.prev .page-link,
    .page-item.disabled .page-link,
    .page-item.disabled .page-link:focus,
    .page-item.disabled .page-link:hover,
    .page-item.first a,
    .page-item.last a {
        width: 40px;
        height: 40px;
    }
}

/* 文字下方的線往外擴長動畫 */
@-webkit-keyframes scale-up-hor-center {
    0% {
        -webkit-transform: scaleX(0.4);
        transform: scaleX(0.4);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes scale-up-hor-center {
    0% {
        -webkit-transform: scaleX(0.4);
        transform: scaleX(0.4);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
/* 按鈕動畫 */
@-webkit-keyframes shadow-drop-2-top {
    0% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        -webkit-transform: translateZ(50px) translateY(-3px);
        transform: translateZ(50px) translateY(-3px);
        -webkit-box-shadow: 0 -12px 15px -12px rgba(0, 0, 0, 0.169);
        box-shadow: 0 -12px 15px -12px rgba(0, 0, 0, 0.169);
    }
}
@keyframes shadow-drop-2-top {
    0% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        -webkit-transform: translateZ(50px) translateY(-3px);
        transform: translateZ(50px) translateY(-3px);
        -webkit-box-shadow: 0 -12px 15px -12px rgba(0, 0, 0, 0.169);
        box-shadow: 0 -12px 15px -12px rgba(0, 0, 0, 0.169);
    }
}