.icon-1:before {
    background-position: 0% 0
}

.icon-2:before {
    background-position: 2.04% 0
}

.icon-3:before {
    background-position: 4.08% 0
}

.icon-4:before {
    background-position: 6.12% 0
}

.icon-5:before {
    background-position: 8.16% 0
}

.icon-6:before {
    background-position: 10.2% 0
}

.icon-7:before {
    background-position: 12.24% 0
}

.icon-8:before {
    background-position: 14.29% 0
}

.icon-9:before {
    background-position: 16.33% 0
}

.icon-10:before {
    background-position: 18.37% 0
}

.icon-11:before {
    background-position: 20.41% 0
}

.icon-12:before {
    background-position: 22.45% 0
}

.icon-13:before {
    background-position: 24.49% 0
}

.icon-14:before {
    background-position: 26.53% 0
}

.icon-15:before {
    background-position: 28.57% 0
}

.icon-16:before {
    background-position: 30.61% 0
}

.icon-17:before {
    background-position: 32.65% 0
}

.icon-18:before {
    background-position: 34.69% 0
}

.icon-19:before {
    background-position: 36.73% 0
}

.icon-20:before {
    background-position: 38.78% 0
}

.icon-21:before {
    background-position: 40.82% 0
}

.icon-22:before {
    background-position: 42.86% 0
}

.icon-23:before {
    background-position: 44.9% 0
}

.icon-24:before {
    background-position: 46.94% 0
}

.icon-25:before {
    background-position: 48.98% 0
}

.icon-26:before {
    background-position: 51.02% 0
}

.icon-27:before {
    background-position: 53.06% 0
}

.icon-28:before {
    background-position: 55.1% 0
}

.icon-29:before {
    background-position: 57.14% 0
}

.icon-30:before {
    background-position: 59.18% 0
}

.icon-31:before {
    background-position: 61.22% 0
}

.icon-32:before {
    background-position: 63.27% 0
}

.icon-33:before {
    background-position: 65.31% 0
}

.icon-34:before {
    background-position: 67.35% 0
}

.icon-35:before {
    background-position: 69.39% 0
}

.icon-36:before {
    background-position: 71.43% 0
}

.icon-37:before {
    background-position: 73.47% 0
}

.icon-38:before {
    background-position: 75.51% 0
}

.icon-39:before {
    background-position: 77.55% 0
}

.icon-40:before {
    background-position: 79.59% 0
}

.icon-41:before {
    background-position: 81.63% 0
}

.icon-42:before {
    background-position: 83.67% 0
}

.icon-43:before {
    background-position: 85.71% 0
}

.icon-44:before {
    background-position: 87.76% 0
}

.icon-45:before {
    background-position: 89.8% 0
}

.icon-46:before {
    background-position: 91.84% 0
}

.icon-47:before {
    background-position: 93.88% 0
}

.icon-48:before {
    background-position: 95.92% 0
}

.icon-49:before {
    background-position: 97.96% 0
}

.icon-50:before {
    background-position: 100% 0
}

.footer_careers .btn_careers,
.inpage .btn-back {
    width: clamp(200px, 13.75vw, 300px);
    background-color: var(--color-btn-back);
    height: clamp(50px, 3.85vw, 98px);
    border-radius: var(--size-radius);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding-left: clamp(15px, 1.3vw, 30px);
    padding-right: clamp(15px, 1.3vw, 30px);
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    transition: all .4s ease
}

@media (min-width: 0) and (max-width: 575px) {
    .footer_careers .btn_careers,
    .inpage .btn-back {
        width: 100%
    }
}

@media (min-width: 0) and (max-width: 1499px) {
    .footer_careers .btn_careers .fz-C,
    .inpage .btn-back .fz-C {
        font-size: 16px
    }
}

.footer_careers .btn_careers:before,
.inpage .btn-back:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url("../../images/new/layout/inpage_iconset.svg");
    background-size: auto 100%;
    background-position: 51.02% 0;
    width: 16px;
    height: 16px;
    transform: rotate(-180deg)
}

@media (min-width: 1500px) {
    .footer_careers .btn_careers:before,
    .inpage .btn-back:before {
        width: 18px;
        height: 18px
    }
}

@media (min-width: 1800px) {
    .footer_careers .btn_careers:before,
    .inpage .btn-back:before {
        width: 20px;
        height: 20px
    }
}

.footer_careers .btn_careers span,
.inpage .btn-back span {
    color: var(--color-btn-cart-text)
}

.footer_careers .btn_careers:hover,
.inpage .btn-back:hover,
.footer_careers .btn_careers:active,
.inpage .btn-back:active {
    background-color: var(--color-main)
}

.footer_map {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    height: var(--height-map-footer);
    min-height: var(--min-height-map-footer)
}

.footer_map iframe {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100%
}

.footer_map img {
    height: 100%;
    width: auto;
}

.footer_careers {
    height: 29.42vw;
    min-height: 500px;
    background-size: cover;
    background-color: var(--color-bg-careers-footer)
}

.footer_careers .container_inside {
    height: 100%
}

.footer_careers .item {
    display: flex;
    padding-top: var(--padding-top-careers-footer);
    padding-bottom: var(--padding-bottom-careers-footer);
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    position: relative
}

.footer_careers .item .box {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.footer_careers .item .title {
    width: 100%;
    color: var(--color-text-careers-footer);
    font-family: var(--font-family);
    position: relative;
    align-self: center;
    padding-bottom: 1.125em;
    font-size: 14px;
    display: block;
    font-weight: bold
}

@media (min-width: 1100px) {
    .footer_careers .item .title {
        font-size: 16px
    }
}

@media (min-width: 1500px) {
    .footer_careers .item .title {
        font-size: 18px
    }
}

@media (min-width: 1800px) {
    .footer_careers .item .title {
        font-size: 0.9375vw
    }
}

.footer_careers .item .content {
    position: relative;
    width: 100%
}

.footer_careers .item .content+.content {
    border-top: 1px solid var(--color-border-careers-footer);
    margin-top: 2.29vw;
    padding-top: 2.29vw
}

@media (min-width: 740px) {
    .footer_careers .item .content h3 {
        font-size: 36px
    }
}

.footer_careers .item .content h3 {
    color: var(--color-title-careers-footer);
    display: block
}

@media (min-width: 980px) {
    .footer_careers .item .content h3 {
        width: 50%
    }
}

@media (min-width: 1500px) {
    .footer_careers .item .content h3 {
        width: 35%
    }
}

.footer_careers .item .content p {
    font-size: 14px;
    color: var(--color-text-careers-footer);
    display: block
}

@media (min-width: 980px) {
    .footer_careers .item .content p {
        width: 50%
    }
}

@media (min-width: 1500px) {
    .footer_careers .item .content p {
        width: 35%
    }
}

.footer_careers .btn_careers {
    background-color: var(--color-btn-careers-bg-footer);
    flex-direction: row-reverse
}

@media (min-width: 980px) {
    .footer_careers .btn_careers {
        position: absolute;
        right: 0;
        top: var(--padding-top-careers-footer);
        margin-top: 7.5em
    }
}

@media (min-width: 980px) and (min-width: 1500px) {
    .footer_careers .btn_careers {
        margin-top: 5.5em
    }
}

.footer_careers .btn_careers:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url("../../images/new/layout/inpage_iconset.svg");
    background-size: auto 100%;
    background-position: 51.02% 0;
    transform: none
}

.footer_careers .btn_careers span {
    color: var(--color-btn-careers-text-footer)
}

.footer_careers .btn_careers:hover,
.footer_careers .btn_careers:active {
    background-color: var(--color-btn-careers-hover-bg)
}

.footer_careers .btn_careers:hover span,
.footer_careers .btn_careers:active span {
    color: var(--color-btn-careers-hover-text)
}

.footer.inpage {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
    padding-top: 60px;
    padding-bottom: 60px;
    background-size: cover;
    background-position: center;
}

@media (min-width: 740px) {
    .footer.inpage {
        padding-top: var(--padding-top-footer);
        padding-bottom: var(--padding-bottom-footer)
    }
}

.footer.inpage .logo img {
    display: block;
    width: auto;
    max-width: 50%;
}

@media (min-width: 980px) and (max-width: 1499px) {
    .footer.inpage .logo {}
}

.footer.inpage .container_inside {
    position: relative;
    z-index: 3
}

@media (min-width: 980px) {
    .footer.inpage .container_inside {
        display: flex
    }
}

.footer.inpage .ft-block {
    margin-bottom: 30px
}

.footer.inpage .ft-block a:hover {
    color: var(--color-text-footer);
}

@media (min-width: 0) and (max-width: 739px) {
    .footer.inpage .ft-block {
        margin-bottom: 20px;
        margin-top: 20px
    }
}

@media (min-width: 1500px) {
    .footer.inpage .ft-block {
        margin-bottom: 50px
    }
}

@media (min-width: 0) and (max-width: 1099px) {
    .footer.inpage .ft-left {
        font-size: 14px
    }
}

@media (min-width: 980px) {
    .footer.inpage .ft-left {
        width: 100%
    }
}

@media (min-width: 1500px) {
    .footer.inpage .ft-left {
        width: 100%
    }
}

@media (min-width: 0) and (max-width: 575px) {
    .footer.inpage .value {
        line-height: 1.75em
    }
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .value.df {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 80px)
    }
}

@media (min-width: 740px) and (max-width: 979px) {
    .footer.inpage .value.df {
        width: 100%
    }
}

@media (min-width: 980px) {
    .footer.inpage .value.df span {
        display: block;
        padding-top: 1em
    }
}

.footer.inpage .field {
    width: 100px;
    color: var(--color-title-footer);
    font-size: 16px
}

@media (min-width: 0) and (max-width: 1099px) {
    .footer.inpage .field {
        font-size: 14px
    }
}

@media (min-width: 0) and (max-width: 575px) {
    .footer.inpage .field {
        margin-bottom: 0
    }
}

@media (min-width: 1500px) {
    .footer.inpage .field {
        font-size: 18px
    }
}

.footer.inpage .ft-right h6 {
    font-weight: bold;
    margin-bottom: 20px
}

@media (min-width: 980px) {
    .footer.inpage .ft-right {
        width: 32%
    }
}

@media (min-width: 1500px) {
    .footer.inpage .ft-right {
        width: 23.7%
    }
}

.footer.inpage .copyright {
    flex-wrap: wrap;
    line-height: 70px;
    font-size: 14px
}

.footer.inpage .copyright a,
.footer.inpage .copyright span {
    color: #606060
}

.footer.inpage .copyright [class^="col-"] {
    margin-bottom: 0 !important
}

@media (min-width: 0) and (max-width: 739px) {
    .footer.inpage .copyright {
        margin-top: 40px;
        line-height: 40px;
        font-size: 12px
    }
    .footer.inpage .copyright span,
    .footer.inpage .copyright a {
        font-size: 12px
    }
}

@media (min-width: 740px) and (max-width: 1499px) {
    .footer.inpage .copyright {
        font-size: 13px
    }
}

.footer.inpage .copyright:before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    border-top: 1px solid var(--color-border-footer)
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .copyright:before {
        margin-bottom: 15px
    }
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .copyright .ft-left {
        padding-bottom: 15px;
        font-size: 11px;
        letter-spacing: -0.5px
    }
    .footer.inpage .copyright .ft-left a {
        text-align: right
    }
}

@media (min-width: 980px) and (max-width: 1099px) {
    .footer.inpage .copyright .ft-left {
        width: 65%
    }
}

.footer.inpage .copyright .ft-right {
    white-space: nowrap
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .copyright .ft-right {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

@media (min-width: 980px) and (max-width: 1099px) {
    .footer.inpage .copyright .ft-right {
        width: 35%
    }
}

@media (min-width: 980px) {
    .footer.inpage .copyright .ft-right {
        display: flex;
        justify-content: flex-end;
        align-items: center
    }
}

@media (min-width: 1100px) {
    .footer.inpage .copyright .ft-right {
        justify-content: space-between
    }
}

@media (min-width: 740px) and (max-width: 979px) {
    .footer.inpage .ft-top {
        padding-bottom: 50px
    }
}

@media (min-width: 980px) {
    .footer.inpage .ft-top {
        padding-bottom: 1.82vw
    }
}

@media (min-width: 980px) and (max-width: 1499px) {
    .footer.inpage .ft-top .ft-right {
        padding-top: calc(var(--height-logo-footer) + 30px);
    }
}

.footer.inpage strong {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em
}

@media (min-width: 1800px) {
    .footer.inpage strong {
        font-size: 18px
    }
}

.footer.inpage a,
.footer.inpage span {
    display: block;
    color: var(--color-text-footer)
}

.footer.inpage a {
    transition: all .35s ease
}

.footer.inpage a:hover,
.footer.inpage a:active {
    color: var(--color-title-footer)
}

.footer.inpage .social {
    display: inline-flex;
    margin-left: -18px
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .social {
        margin-top: 10px;
        margin-left: -18px
    }
}

.footer.inpage .social a {
    display: flex;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    opacity: 0.5;
    transition: all .35s ease;
    align-items: center;
    justify-content: center;
    object-fit: contain
}

@media (min-width: 1100px) {
    .footer.inpage .social a {
        width: 50px;
        height: 40px;
        margin: 0 5px
    }
}

.footer.inpage .social a:hover,
.footer.inpage .social a:active {
    opacity: 1
}

.footer.inpage .social a img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 22px
}

@media (min-width: 1500px) {
    .footer.inpage .social a img {
        max-width: 26px
    }
}

.footer.inpage .subscription {
    border-radius: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--color-input-bg-footer)
}

@media (min-width: 0) and (max-width: 739px) {
    .footer.inpage .subscription {
        margin-top: 10px
    }
}

@media (min-width: 740px) {
    .footer.inpage .subscription {
        max-width: 360px
    }
}

@media (min-width: 1500px) {
    .footer.inpage .subscription {
        max-width: 480px
    }
}

.footer.inpage .subscription input {
    line-height: 43px;
    color: var(--color-input-text-footer);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding-left: 20px;
    flex: auto;
    font-weight: bold;
    font-size: 16px
}

@media (min-width: 1100px) {
    .footer.inpage .subscription input {
        font-size: 14px
    }
}

@media (min-width: 1500px) {
    .footer.inpage .subscription input {
        height: 60px
    }
}

@media (min-width: 1800px) {
    .footer.inpage .subscription input {
        line-height: 70px
    }
}

.footer.inpage .subscription input:focus,
.footer.inpage .subscription input:hover {
    outline: none
}

.footer.inpage .subscription button {
    font-weight: bold;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    color: var(--color-input-text-footer);
    height: 43px;
    line-height: 43px;
    padding: 0 20px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer
}

@media (min-width: 1500px) {
    .footer.inpage .subscription button {
        font-size: 14px
    }
}

.footer.inpage .subscription button:focus,
.footer.inpage .subscription button:hover {
    outline: none
}

@media (min-width: 1500px) {
    .footer.inpage .subscription button {
        height: 60px;
        line-height: 60px
    }
}

@media (min-width: 1800px) {
    .footer.inpage .subscription button {
        font-size: 18px;
        height: 70px;
        line-height: 70px
    }
}

.footer.inpage .link-copyright {
    font-weight: bold;
    display: block
}

.footer.inpage .link-copyright+.link-copyright:before {
    content: "";
    display: inline-block;
    height: 1em;
    width: 1px;
    top: 10%;
    border-left: 1px solid var(--color-border-footer);
    margin: 0 1.5em
}

.footer.inpage .gotop {
    width: 50px;
    height: 50px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    margin-left: 2vw;
    -webkit-mask: url("../../images/new/layout/icon_top.svg")no-repeat;
    -webkit-mask-size: contain;
    background-color: #D0D0D0;
    width: 16px;
    height: 16px;
    margin-left: auto;
}

.footer.inpage .gotop:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    /* background-image: url("../../images/new/layout/inpage_iconset.svg");
    background-size: auto 100%;
    background-position: 16.33% 0; */
}

.inpage {
    color: var(--color-text);
    line-height: 2em;
    font-family: var(--font-family)
}

@media (min-width: 2200px) {
    .inpage {
        font-size: 0.9375vw
    }
}

@media (min-width: 980px) {
    .inpage.v3_border {
        position: relative
    }
    .inpage.v3_border>section,
    .inpage.v3_border>div:not(.popup_gallery) {
        z-index: 2;
        position: relative
    }
    .inpage.v3_border:after {
        content: "";
        display: block;
        height: 150vh;
        width: 1px;
        left: 30vw;
        top: var(--height-nav-md);
        border-left: 1px solid var(--color-border);
        z-index: 0;
        position: absolute
    }
}

.inpage .container,
.inpage.container {
    max-width: 100% !important;
    padding-left: var(--pd-xs);
    padding-right: var(--pd-xs)
}

@media (min-width: 740px) {
    .inpage .container,
    .inpage.container {
        padding-left: var(--pd-md);
        padding-right: var(--pd-md)
    }
}

@media (min-width: 980px) {
    .inpage .container,
    .inpage.container {
        padding-left: var(--pd-lg);
        padding-right: var(--pd-lg)
    }
}

@media (min-width: 1500px) {
    .inpage .container,
    .inpage.container {
        padding-left: var(--pd-xxl);
        padding-right: var(--pd-xxl)
    }
}

.inpage .container_inside,
.inpage.container_inside {
    padding-left: var(--pd-inside-xs);
    padding-right: var(--pd-inside-xs)
}

@media (min-width: 740px) {
    .inpage .container_inside,
    .inpage.container_inside {
        padding-left: var(--pd-inside-md);
        padding-right: var(--pd-inside-md)
    }
}

@media (min-width: 980px) {
    .inpage .container_inside,
    .inpage.container_inside {
        padding-left: var(--pd-inside-lg);
        padding-right: var(--pd-inside-lg)
    }
}

@media (min-width: 1500px) {
    .inpage .container_inside,
    .inpage.container_inside {
        padding-left: var(--pd-inside-xxl);
        padding-right: var(--pd-inside-xxl)
    }
}

.inpage .img-group {
    margin-right: -15px;
    margin-left: -15px
}

.inpage .img-group [class^='col-'] {
    padding-left: 15px;
    padding-right: 15px
}

.inpage p {
    line-height: 2em;
    color: var(--color-text);
    font-size: 16px;
    text-align: justify;
    text-justify: distribute
}

@media (min-width: 2200px) {
    .inpage p {
        font-size: 0.9375vw
    }
}

@-ms-viewport {
    width: device-width
}

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,
*::before,
*::after {
    box-sizing: inherit
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.ft-row {
    display: flex;
    flex-wrap: wrap;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0
}

.col-12,
.col-md-6,
.col-lg-8,
.col-xxl-4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 40px;
    padding-left: 40px
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.footer.inpage .col-social {
    order: 3;
}

@media (min-width: 740px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .footer.inpage .copyright .ft-left .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media (min-width: 980px) {
    .col-md-6 {
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
    .footer.inpage .copyright .ft-left .col-md-6 {
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
    .footer.inpage .col-social {
        order: initial;
    }
}

@media (min-width: 980px) {
    .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .footer.inpage .copyright .ft-left {
        width: 68%;
    }
    .footer.inpage .copyright .ft-left .col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .footer.inpage .copyright .ft-left .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
}

@media (min-width: 980px) and (max-width: 1099px) {
    .footer.inpage .copyright .ft-left {
        width: 65%;
    }
}

@media (min-width: 1500px) {
    .col-xxl-4 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .offset-xxl-4 {
        margin-left: 25%
    }
    .footer.inpage .copyright .ft-left {
        width: 76.3%;
    }
    .footer.inpage .copyright .ft-left .col-xxl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
}

.footer.inpage .ft-left {
    position: relative;
}


/* 20211216 聯絡資訊區塊編排細節調整 */

.inpage p {
    text-align: inherit;
}

.icon-1:before {
    background-position: 0% 0
}

.icon-2:before {
    background-position: 2.04% 0
}

.icon-3:before {
    background-position: 4.08% 0
}

.icon-4:before {
    background-position: 6.12% 0
}

.icon-5:before {
    background-position: 8.16% 0
}

.icon-6:before {
    background-position: 10.2% 0
}

.icon-7:before {
    background-position: 12.24% 0
}

.icon-8:before {
    background-position: 14.29% 0
}

.icon-9:before {
    background-position: 16.33% 0
}

.icon-10:before {
    background-position: 18.37% 0
}

.icon-11:before {
    background-position: 20.41% 0
}

.icon-12:before {
    background-position: 22.45% 0
}

.icon-13:before {
    background-position: 24.49% 0
}

.icon-14:before {
    background-position: 26.53% 0
}

.icon-15:before {
    background-position: 28.57% 0
}

.icon-16:before {
    background-position: 30.61% 0
}

.icon-17:before {
    background-position: 32.65% 0
}

.icon-18:before {
    background-position: 34.69% 0
}

.icon-19:before {
    background-position: 36.73% 0
}

.icon-20:before {
    background-position: 38.78% 0
}

.icon-21:before {
    background-position: 40.82% 0
}

.icon-22:before {
    background-position: 42.86% 0
}

.icon-23:before {
    background-position: 44.9% 0
}

.icon-24:before {
    background-position: 46.94% 0
}

.icon-25:before {
    background-position: 48.98% 0
}

.icon-26:before {
    background-position: 51.02% 0
}

.icon-27:before {
    background-position: 53.06% 0
}

.icon-28:before {
    background-position: 55.1% 0
}

.icon-29:before {
    background-position: 57.14% 0
}

.icon-30:before {
    background-position: 59.18% 0
}

.icon-31:before {
    background-position: 61.22% 0
}

.icon-32:before {
    background-position: 63.27% 0
}

.icon-33:before {
    background-position: 65.31% 0
}

.icon-34:before {
    background-position: 67.35% 0
}

.icon-35:before {
    background-position: 69.39% 0
}

.icon-36:before {
    background-position: 71.43% 0
}

.icon-37:before {
    background-position: 73.47% 0
}

.icon-38:before {
    background-position: 75.51% 0
}

.icon-39:before {
    background-position: 77.55% 0
}

.icon-40:before {
    background-position: 79.59% 0
}

.icon-41:before {
    background-position: 81.63% 0
}

.icon-42:before {
    background-position: 83.67% 0
}

.icon-43:before {
    background-position: 85.71% 0
}

.icon-44:before {
    background-position: 87.76% 0
}

.icon-45:before {
    background-position: 89.8% 0
}

.icon-46:before {
    background-position: 91.84% 0
}

.icon-47:before {
    background-position: 93.88% 0
}

.icon-48:before {
    background-position: 95.92% 0
}

.icon-49:before {
    background-position: 97.96% 0
}

.icon-50:before {
    background-position: 100% 0
}

.footer_careers .btn_careers,
.inpage .btn-back {
    width: clamp(200px, 13.75vw, 300px);
    background-color: var(--color-btn-back);
    height: clamp(50px, 3.85vw, 98px);
    border-radius: var(--size-radius);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding-left: clamp(15px, 1.3vw, 30px);
    padding-right: clamp(15px, 1.3vw, 30px);
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    transition: all .4s ease
}

@media (min-width: 0) and (max-width: 575px) {
    .footer_careers .btn_careers,
    .inpage .btn-back {
        width: 100%
    }
}

@media (min-width: 0) and (max-width: 1499px) {
    .footer_careers .btn_careers .fz-C,
    .inpage .btn-back .fz-C {
        font-size: 16px
    }
}

.footer_careers .btn_careers:before,
.inpage .btn-back:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url("../../images/new/layout/inpage_iconset.svg");
    background-size: auto 100%;
    background-position: 51.02% 0;
    width: 16px;
    height: 16px;
    transform: rotate(-180deg)
}

@media (min-width: 1500px) {
    .footer_careers .btn_careers:before,
    .inpage .btn-back:before {
        width: 18px;
        height: 18px
    }
}

@media (min-width: 1800px) {
    .footer_careers .btn_careers:before,
    .inpage .btn-back:before {
        width: 20px;
        height: 20px
    }
}

.footer_careers .btn_careers span,
.inpage .btn-back span {
    color: var(--color-btn-cart-text)
}

.footer_careers .btn_careers:hover,
.inpage .btn-back:hover,
.footer_careers .btn_careers:active,
.inpage .btn-back:active {
    background-color: var(--color-main)
}

.footer_map {
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    height: var(--height-map-footer);
    min-height: var(--min-height-map-footer)
}

.footer_map iframe {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100%
}

.footer_careers {
    height: 29.42vw;
    min-height: 500px;
    background-size: cover;
    background-color: var(--color-bg-careers-footer)
}

.footer_careers .container_inside {
    height: 100%
}

.footer_careers .item {
    display: flex;
    padding-top: var(--padding-top-careers-footer);
    padding-bottom: var(--padding-bottom-careers-footer);
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    position: relative
}

.footer_careers .item .box {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.footer_careers .item .title {
    width: 100%;
    color: var(--color-text-careers-footer);
    font-family: var(--font-family);
    position: relative;
    align-self: center;
    padding-bottom: 1.125em;
    font-size: 14px;
    display: block;
    font-weight: bold
}

@media (min-width: 1100px) {
    .footer_careers .item .title {
        font-size: 16px
    }
}

@media (min-width: 1500px) {
    .footer_careers .item .title {
        font-size: 18px
    }
}

@media (min-width: 1800px) {
    .footer_careers .item .title {
        font-size: 0.9375vw
    }
}

.footer_careers .item .content {
    position: relative;
    width: 100%
}

.footer_careers .item .content+.content {
    border-top: 1px solid var(--color-border-careers-footer);
    margin-top: 2.29vw;
    padding-top: 2.29vw
}

@media (min-width: 740px) {
    .footer_careers .item .content h3 {
        font-size: 36px
    }
}

.footer_careers .item .content h3 {
    color: var(--color-title-careers-footer);
    display: block
}

@media (min-width: 980px) {
    .footer_careers .item .content h3 {
        width: 50%
    }
}

@media (min-width: 1500px) {
    .footer_careers .item .content h3 {
        width: 35%
    }
}

.footer_careers .item .content p {
    font-size: 14px;
    color: var(--color-text-careers-footer);
    display: block
}

@media (min-width: 980px) {
    .footer_careers .item .content p {
        width: 50%
    }
}

@media (min-width: 1500px) {
    .footer_careers .item .content p {
        width: 35%
    }
}

.footer_careers .btn_careers {
    background-color: var(--color-btn-careers-bg-footer);
    flex-direction: row-reverse
}

@media (min-width: 980px) {
    .footer_careers .btn_careers {
        position: absolute;
        right: 0;
        top: var(--padding-top-careers-footer);
        margin-top: 7.5em
    }
}

@media (min-width: 980px) and (min-width: 1500px) {
    .footer_careers .btn_careers {
        margin-top: 5.5em
    }
}

.footer_careers .btn_careers:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url("../../images/new/layout/inpage_iconset.svg");
    background-size: auto 100%;
    background-position: 51.02% 0;
    transform: none
}

.footer_careers .btn_careers span {
    color: var(--color-btn-careers-text-footer)
}

.footer_careers .btn_careers:hover,
.footer_careers .btn_careers:active {
    background-color: var(--color-btn-careers-hover-bg)
}

.footer_careers .btn_careers:hover span,
.footer_careers .btn_careers:active span {
    color: var(--color-btn-careers-hover-text)
}

.footer.inpage {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
    padding-top: 60px;
    padding-bottom: 60px;
    background-size: cover;
    background-position: center;
}

@media (min-width: 740px) {
    .footer.inpage {
        padding-top: var(--padding-top-footer);
        padding-bottom: var(--padding-bottom-footer)
    }
}

.footer.inpage .logo img {
    display: block;
    width: auto;
    max-width: 50%;
}

@media (min-width: 980px) and (max-width: 1499px) {
    .footer.inpage .logo {}
}

.footer.inpage .container_inside {
    position: relative;
    z-index: 3
}

@media (min-width: 980px) {
    .footer.inpage .container_inside {
        display: flex
    }
}

.footer.inpage .ft-block {
    margin-bottom: 30px
}

.footer.inpage .ft-block a:hover {
    color: var(--color-text-footer);
}

@media (min-width: 0) and (max-width: 739px) {
    .footer.inpage .ft-block {
        margin-bottom: 20px;
        margin-top: 20px
    }
}

@media (min-width: 1500px) {
    .footer.inpage .ft-block {
        margin-bottom: 50px
    }
}

@media (min-width: 0) and (max-width: 1099px) {
    .footer.inpage .ft-left {
        font-size: 14px
    }
}

@media (min-width: 980px) {
    .footer.inpage .ft-left {
        width: 100%
    }
}

@media (min-width: 1500px) {
    .footer.inpage .ft-left {
        width: 100%
    }
}

@media (min-width: 0) and (max-width: 575px) {
    .footer.inpage .value {
        line-height: 1.75em
    }
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .value.df {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 80px)
    }
}

@media (min-width: 740px) and (max-width: 979px) {
    .footer.inpage .value.df {
        width: 100%
    }
}

@media (min-width: 980px) {
    .footer.inpage .value.df span {
        display: block;
        padding-top: 1em
    }
}

.footer.inpage .field {
    width: 100px;
    color: var(--color-title-footer);
    font-size: 16px
}

@media (min-width: 0) and (max-width: 1099px) {
    .footer.inpage .field {
        font-size: 14px
    }
}

@media (min-width: 0) and (max-width: 575px) {
    .footer.inpage .field {
        margin-bottom: 0
    }
}

@media (min-width: 1500px) {
    .footer.inpage .field {
        font-size: 18px
    }
}

.footer.inpage .ft-right h6 {
    font-weight: bold;
    margin-bottom: 20px
}

@media (min-width: 980px) {
    .footer.inpage .ft-right {
        width: 32%
    }
}

@media (min-width: 1500px) {
    .footer.inpage .ft-right {
        width: 23.7%
    }
}

.footer.inpage .copyright {
    flex-wrap: wrap;
    line-height: 70px;
    font-size: 14px
}

.footer.inpage .copyright a,
.footer.inpage .copyright span {
    color: #606060
}

.footer.inpage .copyright [class^="col-"] {
    margin-bottom: 0 !important
}

@media (min-width: 0) and (max-width: 739px) {
    .footer.inpage .copyright {
        margin-top: 40px;
        line-height: 40px;
        font-size: 12px
    }
    .footer.inpage .copyright span,
    .footer.inpage .copyright a {
        font-size: 12px
    }
}

@media (min-width: 740px) and (max-width: 1499px) {
    .footer.inpage .copyright {
        font-size: 13px
    }
}

.footer.inpage .copyright:before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    border-top: 1px solid var(--color-border-footer)
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .copyright:before {
        margin-bottom: 15px
    }
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .copyright .ft-left {
        padding-bottom: 15px;
        font-size: 11px;
        letter-spacing: -0.5px
    }
    .footer.inpage .copyright .ft-left a {
        text-align: right
    }
}

@media (min-width: 980px) and (max-width: 1099px) {
    .footer.inpage .copyright .ft-left {
        width: 65%
    }
}

.footer.inpage .copyright .ft-right {
    white-space: nowrap
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .copyright .ft-right {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

@media (min-width: 980px) and (max-width: 1099px) {
    .footer.inpage .copyright .ft-right {
        width: 35%
    }
}

@media (min-width: 980px) {
    .footer.inpage .copyright .ft-right {
        display: flex;
        justify-content: flex-end;
        align-items: center
    }
}

@media (min-width: 1100px) {
    .footer.inpage .copyright .ft-right {
        justify-content: space-between
    }
}

@media (min-width: 740px) and (max-width: 979px) {
    .footer.inpage .ft-top {
        padding-bottom: 50px
    }
}

@media (min-width: 980px) {
    .footer.inpage .ft-top {
        padding-bottom: 1.82vw
    }
}

@media (min-width: 980px) and (max-width: 1499px) {
    .footer.inpage .ft-top .ft-right {
        padding-top: calc(var(--height-logo-footer) + 30px);
    }
}

.footer.inpage strong {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em
}

@media (min-width: 1800px) {
    .footer.inpage strong {
        font-size: 18px
    }
}

.footer.inpage a,
.footer.inpage span {
    display: block;
    color: var(--color-text-footer)
}

.footer.inpage a {
    transition: all .35s ease
}

.footer.inpage a:hover,
.footer.inpage a:active {
    color: var(--color-title-footer)
}

.footer.inpage .social {
    display: inline-flex;
    margin-left: -18px
}

@media (min-width: 0) and (max-width: 979px) {
    .footer.inpage .social {
        margin-top: 10px;
        margin-left: -18px
    }
}

.footer.inpage .social a {
    display: flex;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    opacity: 0.5;
    transition: all .35s ease;
    align-items: center;
    justify-content: center;
    object-fit: contain
}

@media (min-width: 1100px) {
    .footer.inpage .social a {
        width: 50px;
        height: 40px;
        margin: 0 5px
    }
}

.footer.inpage .social a:hover,
.footer.inpage .social a:active {
    opacity: 1
}

.footer.inpage .social a img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 22px
}

@media (min-width: 1500px) {
    .footer.inpage .social a img {
        max-width: 26px
    }
}

.footer.inpage .subscription {
    border-radius: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--color-input-bg-footer)
}

@media (min-width: 0) and (max-width: 739px) {
    .footer.inpage .subscription {
        margin-top: 10px
    }
}

@media (min-width: 740px) {
    .footer.inpage .subscription {
        max-width: 360px
    }
}

@media (min-width: 1500px) {
    .footer.inpage .subscription {
        max-width: 480px
    }
}

.footer.inpage .subscription input {
    line-height: 43px;
    color: var(--color-input-text-footer);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding-left: 20px;
    flex: auto;
    font-weight: bold;
    font-size: 16px
}

@media (min-width: 1100px) {
    .footer.inpage .subscription input {
        font-size: 14px
    }
}

@media (min-width: 1500px) {
    .footer.inpage .subscription input {
        height: 60px
    }
}

@media (min-width: 1800px) {
    .footer.inpage .subscription input {
        line-height: 70px
    }
}

.footer.inpage .subscription input:focus,
.footer.inpage .subscription input:hover {
    outline: none
}

.footer.inpage .subscription button {
    font-weight: bold;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    color: var(--color-input-text-footer);
    height: 43px;
    line-height: 43px;
    padding: 0 20px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer
}

@media (min-width: 1500px) {
    .footer.inpage .subscription button {
        font-size: 14px
    }
}

.footer.inpage .subscription button:focus,
.footer.inpage .subscription button:hover {
    outline: none
}

@media (min-width: 1500px) {
    .footer.inpage .subscription button {
        height: 60px;
        line-height: 60px
    }
}

@media (min-width: 1800px) {
    .footer.inpage .subscription button {
        font-size: 18px;
        height: 70px;
        line-height: 70px
    }
}

.footer.inpage .link-copyright {
    font-weight: bold;
    display: block
}

.footer.inpage .link-copyright+.link-copyright:before {
    content: "";
    display: inline-block;
    height: 1em;
    width: 1px;
    top: 10%;
    border-left: 1px solid var(--color-border-footer);
    margin: 0 1.5em
}

.footer.inpage .gotop {
    width: 50px;
    height: 50px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    margin-left: 2vw;
    -webkit-mask: url("../../images/new/layout/icon_top.svg")no-repeat;
    -webkit-mask-size: contain;
    background-color: #D0D0D0;
    width: 16px;
    height: 16px;
    margin-left: auto;
}

.footer.inpage .gotop:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    /* background-image: url("../../images/new/layout/inpage_iconset.svg");
    background-size: auto 100%;
    background-position: 16.33% 0; */
}

.inpage {
    color: var(--color-text);
    line-height: 2em;
    font-family: var(--font-family)
}

@media (min-width: 2200px) {
    .inpage {
        font-size: 0.9375vw
    }
}

@media (min-width: 980px) {
    .inpage.v3_border {
        position: relative
    }
    .inpage.v3_border>section,
    .inpage.v3_border>div:not(.popup_gallery) {
        z-index: 2;
        position: relative
    }
    .inpage.v3_border:after {
        content: "";
        display: block;
        height: 150vh;
        width: 1px;
        left: 30vw;
        top: var(--height-nav-md);
        border-left: 1px solid var(--color-border);
        z-index: 0;
        position: absolute
    }
}

.inpage .container,
.inpage.container {
    max-width: 100% !important;
    padding-left: var(--pd-xs);
    padding-right: var(--pd-xs)
}

@media (min-width: 740px) {
    .inpage .container,
    .inpage.container {
        padding-left: var(--pd-md);
        padding-right: var(--pd-md)
    }
}

@media (min-width: 980px) {
    .inpage .container,
    .inpage.container {
        padding-left: var(--pd-lg);
        padding-right: var(--pd-lg)
    }
}

@media (min-width: 1500px) {
    .inpage .container,
    .inpage.container {
        padding-left: var(--pd-xxl);
        padding-right: var(--pd-xxl)
    }
}

.inpage .container_inside,
.inpage.container_inside {
    padding-left: var(--pd-inside-xs);
    padding-right: var(--pd-inside-xs)
}

@media (min-width: 740px) {
    .inpage .container_inside,
    .inpage.container_inside {
        padding-left: var(--pd-inside-md);
        padding-right: var(--pd-inside-md)
    }
}

@media (min-width: 980px) {
    .inpage .container_inside,
    .inpage.container_inside {
        padding-left: var(--pd-inside-lg);
        padding-right: var(--pd-inside-lg)
    }
}

@media (min-width: 1500px) {
    .inpage .container_inside,
    .inpage.container_inside {
        padding-left: var(--pd-inside-xxl);
        padding-right: var(--pd-inside-xxl)
    }
}

.inpage .img-group {
    margin-right: -15px;
    margin-left: -15px
}

.inpage .img-group [class^='col-'] {
    padding-left: 15px;
    padding-right: 15px
}

.inpage p {
    line-height: 2em;
    color: var(--color-text);
    font-size: 16px;
    text-align: justify;
    text-justify: distribute
}

@media (min-width: 2200px) {
    .inpage p {
        font-size: 0.9375vw
    }
}

@-ms-viewport {
    width: device-width
}

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,
*::before,
*::after {
    box-sizing: inherit
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.ft-row {
    display: flex;
    flex-wrap: wrap;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0
}

.col-12,
.col-md-6,
.col-lg-8,
.col-xxl-4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 40px;
    padding-left: 40px
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.footer.inpage .col-social {
    order: 3;
}

@media (min-width: 740px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .footer.inpage .copyright .ft-left .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media (min-width: 980px) {
    .col-md-6 {
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
    .footer.inpage .copyright .ft-left .col-md-6 {
        flex: 0 0 33.33%;
        max-width: 33.33%
    }
    .footer.inpage .col-social {
        order: initial;
    }
}

@media (min-width: 980px) {
    .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .footer.inpage .copyright .ft-left {
        width: 68%;
    }
    .footer.inpage .copyright .ft-left .col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .footer.inpage .copyright .ft-left .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
}

@media (min-width: 980px) and (max-width: 1099px) {
    .footer.inpage .copyright .ft-left {
        width: 65%;
    }
}

@media (min-width: 1500px) {
    .col-xxl-4 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .offset-xxl-4 {
        margin-left: 25%
    }
    .footer.inpage .copyright .ft-left {
        width: 76.3%;
    }
    .footer.inpage .copyright .ft-left .col-xxl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
}

.footer.inpage .ft-left {
    position: relative;
}


/* 20211216 聯絡資訊區塊編排細節調整 */

.inpage p {
    text-align: inherit;
}

@media (max-width: 700px) {
    .footer.inpage {
        padding-bottom: 0;
    }
    .footer.inpage .copyright .ft-left a {
        text-align: left;
    }
    .footer.inpage .copyright .ft-right {
        position: absolute;
        bottom: 20px;
        right: 40px;
    }
}