abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

* {
    -webkit-text-size-adjust: none
}

a {
    text-decoration: none
}

em {
    font-style: normal
}

fieldset,
img {
    border: 0
}

ol,
ul {
    list-style: none
}

abbr,
acronym {
    border: 0
}

.CLEAR {
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

* html .clearfix {
    height: 1%
}

:first-child+html .clearfix {
    min-height: 1%
}

[class*=grid-] {
    float: left;
    padding: 10px;
    width: 100%
}

.clear-grid {
    clear: both;
    float: inherit
}

.row {
    margin: 0 -10px
}

.grid-m-12 {
    width: 100%
}

.grid-m-11 {
    width: 91.666663%
}

.grid-m-10 {
    width: 83.33%
}

.grid-m-9 {
    width: 74.999997%
}

.grid-m-8 {
    width: 66.66666664%
}

.grid-m-7 {
    width: 58.333%
}

.grid-m-6 {
    width: 50%
}

.grid-m-5 {
    width: 41.6665%
}

.grid-m-4 {
    width: 33.33%
}

.grid-m-3 {
    width: 24.99%
}

.grid-m-2 {
    width: 16.66666%
}

.grid-m-1 {
    width: 8.33%
}

@media (min-width:720px) {
    .grid-12 {
        width: 100%
    }

    .grid-11 {
        width: 91.666663%
    }

    .grid-10 {
        width: 83.33%
    }

    .grid-9 {
        width: 74.999997%
    }

    .grid-8 {
        width: 66.66666664%
    }

    .grid-7 {
        width: 58.333%
    }

    .grid-6 {
        width: 50%
    }

    .grid-5 {
        width: 41.6665%
    }

    .grid-4 {
        width: 33.33%
    }

    .grid-3 {
        width: 24.99%
    }

    .grid-2 {
        width: 16.66666%
    }

    .grid-1 {
        width: 8.33%
    }

    .grid-t-12 {
        width: 100%
    }

    .grid-t-11 {
        width: 91.666663%
    }

    .grid-t-10 {
        width: 83.33%
    }

    .grid-t-9 {
        width: 74.999997%
    }

    .grid-t-8 {
        width: 66.66666664%
    }

    .grid-t-7 {
        width: 58.333%
    }

    .grid-t-6 {
        width: 50%
    }

    .grid-t-5 {
        width: 41.6665%
    }

    .grid-t-4 {
        width: 33.33%
    }

    .grid-t-3 {
        width: 24.99%
    }

    .grid-t-2 {
        width: 16.66666%
    }

    .grid-t-1 {
        width: 8.33%
    }
}

@media only screen and (min-width:1024px) {
    .grid-tl-12 {
        width: 100%
    }

    .grid-tl-11 {
        width: 91.666663%
    }

    .grid-tl-10 {
        width: 83.33%
    }

    .grid-tl-9 {
        width: 74.999997%
    }

    .grid-tl-8 {
        width: 66.66666664%
    }

    .grid-tl-7 {
        width: 58.333%
    }

    .grid-tl-6 {
        width: 50%
    }

    .grid-tl-5 {
        width: 41.6665%
    }

    .grid-tl-4 {
        width: 33.33%
    }

    .grid-tl-3 {
        width: 24.99%
    }

    .grid-tl-2 {
        width: 16.66666%
    }

    .grid-tl-1 {
        width: 8.33%
    }
}

@media only screen and (min-width:1200px) {
    .grid-d-12 {
        width: 100%
    }

    .grid-d-11 {
        width: 91.666663%
    }

    .grid-d-10 {
        width: 83.33%
    }

    .grid-d-9 {
        width: 74.999997%
    }

    .grid-d-8 {
        width: 66.66666664%
    }

    .grid-d-7 {
        width: 58.333%
    }

    .grid-d-6 {
        width: 50%
    }

    .grid-d-5 {
        width: 41.6665%
    }

    .grid-d-4 {
        width: 33.33%
    }

    .grid-d-3 {
        width: 24.99%
    }

    .grid-d-2 {
        width: 16.66666%
    }

    .grid-d-1 {
        width: 8.33%
    }
}

img.rwd {
    max-width: 100%;
    height: auto
}

body {
    background-color: #fff;
    font-family: Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 13px;
    overflow-x: hidden
}

body.show {
    overflow: hidden
}

.overline {
    position: relative
}

.overline:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #f3d3d5
}

.overline.bottom:before {
    top: auto;
    bottom: 0
}

.overline.left:before {
    right: auto;
    left: 0
}

.overline.center:before {
    right: auto;
    left: calc((-100vw + 1380px)/ 2)
}

.textEditor {
    clear: both;
    padding: 0 10px;
    font-size: 16px;
    color: #2f2f2f;
    line-height: 2
}

.textEditor img {
    max-width: 100%;
    max-height: 100%;
    min-width: auto;
    min-height: auto;
    width: auto;
    height: auto
}

.textEditor hr {
    clear: both;
    border: 0;
    height: 1px;
    background: #c3c3c3;
    margin: 10px 0
}

.textEditor ol {
    list-style: decimal outside;
    padding-left: 30px
}

.text_title1 {
    font-size: 64px;
    color: #32b3c6;
    line-height: 1;
    font-weight: 700;
    word-break: break-all;
    word-wrap: break-word
}

.text_title2 {
    font-size: 30px;
    color: #ed5c40;
    line-height: 1.5
}

.text_title3 {
    font-size: 25px;
    color: #00a8e9
}

.text_title4 {
    font-size: 45px;
    color: #ef2f72;
    line-height: 1.2
}

.text_title5 {
    font-size: 24px;
    color: #f16752
}

.text_note1 {
    font-size: 20px;
    color: #000
}

.text_color1 {
    color: #32b3c6
}

.text_color2 {
    color: #ed5c40
}

.text_color3 {
    color: #00a8e9
}

.text_color4 {
    color: #ef2f72
}

.text_color5 {
    color: #0074c5
}

.text_size64 {
    font-size: 64px
}

.text_size43 {
    font-size: 43px
}

.text_size35 {
    font-size: 35px
}

.text_bold {
    font-weight: 700
}

.lineH2 {
    line-height: 2
}

.button {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid #06f
}

.button:hover {
    color: #fff;
    background: #06f
}

a {
    color: #000;
    cursor: pointer;
    transition: all .4s ease
}

a:hover {
    color: #c4252b
}

a.btn_color2 {
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid #bd3d39;
    font-size: 15px;
    color: #bd3d39
}

a.btn_color2:hover {
    background: #bd3d39;
    color: #fff
}

[class*=col-] {
    float: left
}

input[type=text] {
    -webkit-appearance: none
}

textarea {
    -webkit-appearance: none
}

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

:focus {
    outline: 0
}

address {
    font-style: normal
}

.outerWrap {
    position: relative;
    overflow-x: hidden
}

.outerWrap:after {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -700px;
    z-index: -1;
    width: 100%;
    max-width: 1400px;
    height: 100vh;
    background: -webkit-repeating-linear-gradient(left, #f2f3f4 0, #f2f3f4 1px, transparent 1px, transparent 233px, #f2f3f4 233px);
    background: -o-repeating-linear-gradient(left, #f2f3f4 0, #f2f3f4 1px, transparent 1px, transparent 233px, #f2f3f4 233px);
    background: repeating-linear-gradient(90deg, #f2f3f4 0, #f2f3f4 1px, transparent 1px, transparent 233px, #f2f3f4 233px)
}

@media (max-width:1180px) {
    .outerWrap:after {
        display: none
    }
}

.bgLine:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -700px;
    z-index: -1;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    background: -webkit-repeating-linear-gradient(left, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, .03) 1px, transparent 1px, transparent 233px, rgba(0, 0, 0, .03) 233px);
    background: -o-repeating-linear-gradient(left, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, .03) 1px, transparent 1px, transparent 233px, rgba(0, 0, 0, .03) 233px);
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, .03) 1px, transparent 1px, transparent 233px, rgba(0, 0, 0, .03) 233px)
}

@media (max-width:1180px) {
    .bgLine:after {
        display: none
    }
}

.wrap {
    width: 100%;
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto
}

.wrap.full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0
}

.wrapBox {
    width: 100%;
    max-width: 1440px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto
}

.wrapBox.full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0
}

.label {
    padding: 5px 7px;
    color: #fff;
    background-color: rgba(0, 0, 0, .8)
}

header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    width: 100%;
    border-bottom: 1px solid #fcf4f4;
    background-color: #fff;
    transition: all .5s
}

header .wrapBox {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

header .logo {
    display: flex;
    align-items: center;
    min-height: 77px;
    padding-left: 10px;
    padding-right: 22px;
    border-top: 3px solid #c4252b
}

header .logo a {
    display: block;
    width: 188px;
    height: 50px;
    background-image: url(/static/images/logo1.png);
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9999px
}

.menuMask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(49, 49, 49, .65);
    opacity: 0;
    pointer-events: none;
    transition: all .5s
}

.menuMask.show {
    opacity: 1;
    pointer-events: auto
}

.menuBtn {
    width: 34px;
    height: 20px;
    cursor: pointer;
    display: none;
    position: relative;
    transition: all .5s
}

.menuBtn:after,
.menuBtn:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #c4252b;
    transition: all .6s cubic-bezier(.9, 0, .1, 1)
}

.menuBtn:before {
    top: 0
}

.menuBtn:after {
    bottom: 0
}

.menuBtn span {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.5px;
    width: 100%;
    height: 1px;
    background: #c4252b;
    transition: all .6s cubic-bezier(.9, 0, .1, 1)
}

.menuBtn.open:before {
    top: 9.5px;
    transform: rotate(45deg)
}

.menuBtn.open:after {
    bottom: 9.5px;
    transform: rotate(-45deg)
}

.menuBtn.open span {
    transform: translateX(10px);
    opacity: 0
}

.menuBtnAmp {
    position: relative;
    display: none;
    width: 34px;
    height: 34px;
    border: 0
}

.menuBtnAmp:after,
.menuBtnAmp:before {
    content: "";
    position: absolute
}

.menuBtnAmp:before {
    left: -5%;
    top: -5%;
    width: 110%;
    height: 110%;
    background-color: #fff
}

.menuBtnAmp:after {
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    background-image: url(//ibest.tw/images/menuBtn.png);
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.menuBtnAmp:checked:after {
    background-image: url(//ibest.tw/images/menuBtnClose.png)
}

.menuBtnAmp:checked~.menuBox {
    top: 100%;
    opacity: 1;
    pointer-events: auto
}

.menuAmpCheck {
    display: none
}

.menuBox {
    /* display: flex; */
    /* justify-content: space-between; */
    flex-grow: 1
}

.menu {
    display: flex
}

/* .menu.left,
.menu.right {
margin-left: -15px;
margin-right: -15px
} */

.menu.left .link {
    border-top: 3px solid #c4252b;
    padding-left: 15px;
    padding-right: 15px
}

.menu.right .link {
    padding-left: 15px;
    padding-right: 15px
}

.menu .link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 77px;
    font-size: 15px;
    letter-spacing: .03em;
    color: #343434
}

.menu .link:hover {
    color: #c4252b
}

.menu .contact {
    background-color: #c4252b;
    color: #fff;
    position: relative
}

.menu .contact::before {
    content: '';
    width: 85%;
    height: 85%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 7.5%;
    left: 7.5%;
    z-index: 1
}

.menu .contact:hover {
    background-color: #343434;
    color: #fff
}

.menu .current .link {
    color: #c4252b
}

@media (max-width:1180px) {
    .menu .contact {
        background-color: transparent
    }

    .menu .current .link {
        color: #fff
    }
}

.menu > li {
    flex: 1;
}

.menu li {
    position: relative
}

.menu li:hover .subMenu {
    top: 100%;
    opacity: 1;
    pointer-events: auto
}

.menu .subMenu {
    position: absolute;
    top: 115%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    opacity: 0;
    pointer-events: none;
    transition: all .5s ease-in-out
}

.menu .subMenu.share {
    left: auto;
    right: 0;
    transform: translateX(0)
}

.menu .subMenu span a {
    position: relative;
    display: block;
    padding: 10px 15px;
    letter-spacing: .05em;
    color: #fff;
    background-color: #1b1b1b
}

.menu .subMenu span a:after,
.menu .subMenu span a:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    transition: all .5s
}

.menu .subMenu span a:before {
    top: 0;
    background-color: #141414
}

.menu .subMenu span a:after {
    top: 1px;
    background-color: #252525
}

.menu .subMenu span a:hover {
    background-color: #e50011
}

.menu .subMenu span a:hover:after,
.menu .subMenu span a:hover:before {
    opacity: 0
}

.menu .large {
    display: flex;
    justify-content: center;
    padding: 35px;
    background-color: rgba(187, 27, 33, .9);
    color: #fff;
    letter-spacing: .05em
}

.menu .large a {
    color: #fff
}

.menu .large.type1 {
    width: 1000px
}

.menu .large.type2 {
    width: 530px
}

.menu .large.type3 {
    width: 1015px;
    right: 0;
}

.menu .list {
    position: relative;
    flex: 1;
    max-width: 230px;
    padding: 0 20px
}

.menu .list:not(:last-child):after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, .2)
}

.menu .list dt {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700
}

.menu .list dt a {
    display: block;
    padding: 0;

}

.menu .list dd a {
    display: block;
    padding: 7px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .9)
}

.menu .list dd a:hover {
    color: #fff
}

footer {
    padding-top: 50px
}

footer .wrapBox {
    padding-left: 20px;
    padding-right: 20px
}

footer .leftItem {
    width: 100%;
    max-width: 466px;
    flex-shrink: 0;
    padding-left: 10px
}

footer .rightItem {
    width: calc(100% - 466px)
}

footer .topBox {
    display: flex;
    margin-bottom: 25px
}

footer .topBox .note {
    padding-right: 25px;
    padding-top: 25px;
    font-size: 14px;
    letter-spacing: .02em;
    line-height: 1.8
}

footer .bottomBox {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px
}

.downLogo {
    width: 187px;
    margin-bottom: 25px
}

.downLogo img {
    display: block;
    width: 100%
}

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

.infoList li {
    width: 50%;
    padding-bottom: 25px;
    padding-left: 10px
}

.infoList li.flex {
    display: flex;
    justify-content: space-between;
    margin: 0 -5px;
}

.infoList li.flex .item{
    width: 50%;
    padding: 0 5px;
}

.infoList .list {
    display: flex;
    padding-right: 5px
}

.infoList .title {
    font-weight: 700;
    padding-bottom: 5px;
    font-size: 18px
}

.infoList a {
    font-size: 14px
}

.infoList .Txt {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.infoList .right {
    padding-right: 10px
}

.infoList .right .item {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.infoList .socailBtn {
    margin-right: auto
}

.footBtnBox {
    display: flex;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 50px
}

.backToTop {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Lato, "微軟正黑體", sans-serif;
    text-transform: uppercase;
    padding-top: 60px;
    font-size: 12px;
    letter-spacing: .07em;
    color: #c4252b;
    border: none;
    background: 0 0;
    cursor: pointer
}

.backToTop:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #bb1b21;
    box-shadow: 0 0 0 20px #fff, 0 0 0 21px rgba(196, 37, 43, .2)
}

.footerText {
    font-size: 13px;
    letter-spacing: .02em;
    color: #131111;
    line-height: 1.7;
    margin-bottom: 40px
}

.footArticleList {
    display: flex;
    margin-bottom: 25px
}

.footArticleList li {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px
}

.footArticleList .title {
    margin-bottom: 27px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .02em;
    color: #454545
}

.footArticleList .box a {
    display: block;
    padding-bottom: 8px;
    font-size: 14px;
    letter-spacing: .02em;
    color: #3f3f3f
}

.footArticleList .box a:hover {
    color: #c4252b
}

.footArticleList .link a {
    display: block;
    padding-bottom: 25px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .02em;
    color: #454545
}

.footArticleList .link a:hover {
    color: #c4252b
}

.bannerArea .wrap {
    padding-left: 0;
    padding-right: 0
}

.articleTitle {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 25px
}

.articleTitle h1 {
    font-weight: 400;
    font-size: 19px;
    color: #717171
}

.articleTitle h2 {
    font-weight: 400;
    font-size: 36px;
    color: #3c3c3c
}

.titleBox em {
    display: block;
    padding-bottom: 10px;
    font: 300 20px Lato, 微軟正黑體, sans-serif;
    letter-spacing: .025em;
    text-transform: uppercase;
    color: #1b1b1b;
    text-align: center
}

.titleBox span {
    font-weight: 700;
    color: red
}

.titleBox h2 {
    font: 800 44px "Noto Sans TC", 微軟正黑體, sans-serif;
    letter-spacing: .1em;
    color: #3c3c3c;
    text-align: center
}

.titleBox.ins {
    margin-bottom: 40px
}

.titleBox.ins h2 {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 30px;
    font-size: 29px;
    letter-spacing: .075em;
    color: #626262
}

.titleBox.ins h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -34px;
    width: 68px;
    height: 1px;
    background: #e5e5e5
}

.titleBox.ins h2.noLine:after {
    display: none
}

.titleBox.ins .note {
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 1.8;
    color: #717171;
    text-align: center
}

.titleBox2 .en {
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: 900;
    font-family: Lato, "微軟正黑體", sans-serif;
    font-size: 45px;
    color: #bb1b21
}

.titleBox2 .title {
    margin-bottom: 30px;
    font-size: 26px;
    color: #363636
}

.titleBox2 .subTitle {
    font-size: 18px;
    letter-spacing: .02em;
    color: #454545
}

.titleBox2 .note {
    padding-top: 25px;
    font-size: 18px;
    color: #363636
}

.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer
}

.radio input[type=radio] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.radio input[type=radio]:checked+span {
    border-color: #000;
    background: #000
}

.radio input[type=radio]:checked+span:before {
    opacity: 1
}

.radio span {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    transition: all .5s
}

.radio span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(//ibest.tw/images/icon_check.svg) no-repeat center center/10px 8px;
    opacity: 0;
    transition: all .5s
}

.checkbox2,
.radio2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 35px;
    padding-right: 8px;
    cursor: pointer
}

.checkbox2 input[type=checkbox],
.checkbox2 input[type=radio],
.radio2 input[type=checkbox],
.radio2 input[type=radio] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0
}

.checkbox2 input[type=checkbox]:checked~span:before,
.checkbox2 input[type=radio]:checked~span:before,
.radio2 input[type=checkbox]:checked~span:before,
.radio2 input[type=radio]:checked~span:before {
    background-color: #c4252b
}

.checkbox2 span,
.radio2 span {
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    list-style-position: .05em;
    color: #636363
}

.checkbox2 span:before,
.radio2 span:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #dadada
}

.checkbox2 span {
    padding-left: 17px;
    font-size: 15px;
    color: #383838
}

.checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer
}

.checkbox input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.checkbox input[type=checkbox]:checked+span {
    border-color: #000;
    background: #000
}

.checkbox input[type=checkbox]:checked+span:before {
    opacity: 1
}

.checkbox span {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    transition: all .5s
}

.checkbox span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(//ibest.tw/images/icon_check.svg) no-repeat center center/10px 8px;
    opacity: 0;
    transition: all .5s
}

.captchaArea {
    position: relative;
    width: 230px;
    height: 46px
}

.captchaArea.unlocking .sliderBtn {
    transition: none
}

.captchaArea .note {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;
    background-color: #ebebeb;
    pointer-events: none
}

.captchaArea .note:after {
    content: '請往右滑動解鎖';
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 45px);
    height: 100%;
    font-family: '微軟正黑體';
    font-size: 15px;
    letter-spacing: .08em;
    color: #444
}

.sliderBtn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: none;
    outline: 0;
    background-color: #bd2228;
    cursor: pointer;
    -o-transition: all .6s;
    transition: all .6s
}

.sliderBtn:after {
    content: '';
    width: 27px;
    height: 5px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none
}

.btn01 a {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 17px 50px;
    font-family: Lato, "微軟正黑體", sans-serif;
    font-size: 17px;
    color: #fff;
    letter-spacing: .05em;
    border-radius: 3px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ec3849), to(#f35844));
    background-image: -webkit-linear-gradient(left, #ec3849 0, #f35844 100%);
    background-image: -o-linear-gradient(left, #ec3849 0, #f35844 100%);
    background-image: linear-gradient(to right, #ec3849 0, #f35844 100%);
    transition: all .5s
}

.btn01 a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #d61619;
    transition: all .5s
}

.btn01 a:hover {
    box-shadow: 0 3px 15.84px .16px rgba(79, 79, 79, .25)
}

.btn01 a:hover:after {
    opacity: 0
}

.btn02 a {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 17px 54px;
    font: 300 15px "Noto Sans TC", 微軟正黑體, sans-serif;
    color: #fff;
    letter-spacing: .2em;
    border-radius: 3px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #d61619), color-stop(50%, #d61619));
    background: -webkit-linear-gradient(left, #d61619 0, #d61619 50%);
    background: -o-linear-gradient(left, #d61619 0, #d61619 50%);
    background: linear-gradient(to right, #d61619 0, #d61619 50%)
}

.btn02 a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ec3749), to(#f25445));
    background: -webkit-linear-gradient(left, #ec3749 0, #f25445 100%);
    background: -o-linear-gradient(left, #ec3749 0, #f25445 100%);
    background: linear-gradient(to right, #ec3749 0, #f25445 100%);
    opacity: 0;
    transition: all 1s
}

.btn02 a:hover:after {
    opacity: 1
}

.btn03 a {
    display: inline-block;
    min-width: 150px;
    margin: 0 18px;
    padding: 18px 20px;
    font-size: 15px;
    letter-spacing: .2em;
    color: #1b1b1b;
    text-align: center;
    background-color: #fff;
    border-radius: 3px
}

.btn03 a:hover {
    transform: translateY(-5px)
}

.btn03 a.dark {
    color: #fff;
    background-color: #1b1b1b
}

.btn04 a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Lato, "微軟正黑體", sans-serif;
    color: #fff;
    min-width: 200px;
    padding: 12px 60px 12px 35px;
    font-size: 14px;
    letter-spacing: .05em;
    background-color: #c4252b
}

.btn04 a:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 27px 5px, 1px 100%;
    transition: all .3s
}

.btn04 a:hover {
    background-color: #000
}

.btn04 a:hover:after {
    background-size: 27px 5px, 100% 100%
}

.btn04.fb a {
    letter-spacing: .1em;
    padding: 14px 60px 14px 50px
}

.btn04.fb a:before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 13px;
    margin-right: 13px;
    background-image: url(https://www.ibest.tw/images/icon_fb2.png);
    background-repeat: no-repeat;
    background-size: contain
}

.btnBackStyle svg {
    width: 19px;
    height: 9px;
    margin-right: 12px;
    color: #b3b3b3;
    transition: all .5s
}

.btnBackStyle:hover {
    color: #c4252b
}

.btnBackStyle:hover svg {
    color: #c4252b
}

.fixContact {
    position: fixed;
    z-index: 49;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    background-color: #bb1b21;
    letter-spacing: .2em
}

.fixContact:before {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    background-image: url(https://www.ibest.tw/images/icon_contact.svg);
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: 50%;
    background-color: #bb1b21;
    transition: all .5s
}

.fixContact:hover {
    background-color: #1c1c1c;
    color: #fff
}

.fixContact:hover:before {
    background-color: #1c1c1c
}

@media (min-width:481px) {
    .fixContact {
        right: 0;
        top: 50%;
        margin-top: -95px;
        width: 45px;
        height: 145px;
        writing-mode: vertical-lr
    }
}

@media (max-width:480px) {
    .fixContact {
        right: 0;
        bottom: 0;
        width: 100px;
        height: 45px;
        font-size: 14px;
        background-color: #bb1b21
    }
}

@media (min-width:481px) {
    .fixContact:before {
        left: 0;
        top: -45px;
        border-bottom: 1px solid rgba(255, 255, 255, .2)
    }
}

@media (max-width:480px) {
    .fixContact:before {
        left: -45px;
        top: 0;
        border-right: 1px solid rgba(255, 255, 255, .2);
        background-color: #bb1b21
    }
}

@media (max-width:414px) {
    .fixContact:before {
        display: none
    }
}

@media (min-width:481px) {
    .fixedBottomBtn {
        position: fixed;
        right: 30px;
        bottom: 30px;
        z-index: 45;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 90px;
        background: #b60000;
        color: #fff;
        font-size: 15px;
        border-radius: 50%;
        padding: 10px;
        text-align: center;
        border: 3px solid #fff;
        box-shadow: 0 0 0 7px #b60000;
        transition: all .4s ease
    }

    .fixedBottomBtn:hover {
        transform: scale(1.2);
        color: #fff
    }
}

@media (max-width:1366px) {
    .menu .large {
        transform: translateX(-30%)
    }
}

@media (max-width:1440px) {
    .overline.center:before {
        left: 0;
        width: 100%
    }
}

@media (min-width:1181px) {
    .bannerArea.ins {
        margin-top: 78px
    }
}

@media (max-width:1180px) {
    .wrap {
        width: 100%;
        padding: 0 25px
    }

    .titleBox2 .en {
        margin-bottom: 10px
    }

    .fixContact {
        display: flex
    }

    .wrapBox {
        padding-left: 20px;
        padding-right: 20px
    }

    header {
        border-top: 3px solid #c4252b
    }

    header .logo {
        border-top: none;
        padding-left: 0;
    }

    header .wrapBox {
        justify-content: space-between;
    }

    footer .topBox {
        flex-wrap: wrap;
    }

    footer .leftItem {
        max-width: 100%;
        padding-left: 0;
        padding-bottom: 20px
    }

    footer .rightItem {
        width: 100%
    }

    footer .bottomBox .leftItem {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        order: 2
    }

    .footerText {
        margin-bottom: 0
    }

    .footArticleList {
        margin-left: -10px;
        margin-right: -10px
    }

    .footArticleList .title {
        margin-bottom: 10px
    }

    .infoList {
        margin-left: -10px;
        margin-right: -10px
    }

    .infoList li {
        padding-right: 10px
    }

    .footBtnBox {
        padding-top: 30px;
        padding-bottom: 30px
    }

    .outerWrap {
        padding-top: 80px
    }

    .menuBtn,
    .menuBtnAmp {
        display: block
    }

    .menuBox {
        position: absolute;
        left: 0;
        top: 120%;
        width: 100%;
        height: 100vh;
        background: #bb1b21;
        opacity: 0;
        pointer-events: none;
        transition: all .6s ease-in-out;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 0 250px;
        display: block
    }

    .menuBox.show {
        top: 100%;
        opacity: 1;
        pointer-events: auto
    }

    .menu > li {
        flex: auto;
    }

    .menu li {
        width: 100%;
        transition: all .5s
    }

    .menu li .link {
        min-height: auto;
        font-size: 20px;
        color: #fff;
        display: block;
        letter-spacing: .1em
    }

    .menu li .link:hover {
        color: #fff
    }

    .menu li .link:before {
        display: none
    }

    .menu .dropDown {
        position: relative
    }

    .menu .dropDown .link {
        position: relative
    }

    .menu .dropDown .link:after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-size: contain
    }

    .menu .subMenu {
        display: none;
        position: static;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0)
    }

    .menu .subMenu a {
        padding: 12px
    }

    .menu .subMenu.show {
        display: block
    }

    .menu .large {
        padding: 0
    }

    .menu .large.type1,
    .menu .large.type2 {
        width: 100%
    }

    .menu .large.type3 {
        width: 100%;
        right: 0;
    }

    .menu .list {
        max-width: 100%;
        padding: 12px 15px 5px
    }

    .menu .list:after {
        display: none
    }

    .menu .list:not(:last-child) {
        border-bottom: 1px solid #282828;
        margin-bottom: 5px
    }

    .menu.left .link {
        border-top: none
    }

    .menu {
        width: 100%;
        flex-wrap: wrap
    }

    .menu.left {
        margin-left: 0;
        margin-right: 0
    }

    .menu.left .link {
        border-top: none;
        color: #f99ca0
    }

    .menu.right .link {
        font-size: 16px
    }

    .menu .link {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 5px
    }

    .menu .subMenu {
        background-color: #000
    }

    .menuAmpCheck {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 67px;
        opacity: 0;
        padding: 0
    }

    .menuAmpCheck:checked~.subMenu {
        display: block
    }
}

@media (max-width:767px) {

    .titleBox h2,
    .titleBox.ins h2 {
        font-size: 40px
    }

    .infoList li.flex {
        display: block;
        margin: 0;
    }

    .infoList li.flex .item {
        width: 100%;
        padding: 10px 0;
    }
}

@media (max-width:640px) {
    .footArticleList {
        flex-wrap: wrap;
        margin-bottom: 0
    }

    .footArticleList li {
        width: 33.333%
    }

    .footArticleList li:last-child {
        width: 100%
    }

    .footArticleList .link {
        display: flex;
        flex-wrap: wrap;
        padding-top: 10px
    }

    .footArticleList .link a {
        margin-right: 25px
    }

    .infoList li {
        width: 100%;
        padding-bottom: 15px
    }

    .infoList .right .item {
        justify-content: flex-start
    }
}

@media (max-width:480px) {
    header .logo a{
        width: 175px;
        height: 42px;
    }

    .titleBox h2 {
        font-size: 28px
    }

    .titleBox2 .en {
        font-size: 36px
    }

    .titleBox2 .title {
        font-size: 22px
    }

    .fixedBottomBtn {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 999;
        display: inline-block;
        font-size: 14px;
        color: #fff;
        padding: 0 20px;
        line-height: 35px;
        text-align: center;
        background-color: #f74b54;
        border: 1px solid #b31018;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .05)
    }

    .fixedBottomBtn:hover {
        color: #fff;
        transform: scale(1.2)
    }

    footer .bottomBox .leftItem {
        flex-direction: column;
        align-items: flex-start
    }

    .footerText {
        margin-bottom: 15px
    }

    .footBtnBox {
        justify-content: flex-start;
        padding-bottom: 10px
    }
}

@media (max-width:440px) {
    .footArticleList li {
        width: 100%;
        padding-bottom: 20px
    }
}

@media (max-width:414px) {
    .titleBox2 .en {
        margin-bottom: 10px;
        font-size: 30px
    }

    .titleBox2 .title {
        margin-bottom: 12px
    }

    .infoList .right .item {
        flex-direction: column;
        align-items: flex-start
    }

    .infoList .socailBtn {
        margin-bottom: 12px
    }
}

:target:before {
    content: "";
    display: block;
}

/* 評論 */
.reviewArea {
    padding: 100px 0 120px;
    position: relative;
}
@media (max-width: 1180px) {
    .reviewArea {
        padding: 100px 0;
    }
}
.reviewArea .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    background-image: url("../images/about-webrec/circleBg.png");
    -moz-background-size: cover;
    background-size: cover;
    background-position: center top;
}
.reviewArea .wrap {
    position: relative;
    z-index: 2;
}
.reviewArea .titleBox {
    margin-bottom: 65px;
}
@media (max-width: 480px) {
    .reviewArea .titleBox {
        margin-bottom: 40px;
    }
}
.reviewArea .titleBox .title{
    color: #fff;
}
.reviewArea .titleBox.white .title .mark{
    color: #fff;
}
.reviewArea .reviewBox {
    position: relative;
}
.reviewArea .arrow {
    position: absolute;
    width: 52px;
    height: 100px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}
@media (max-width: 820px) {
    .reviewArea .arrow {
        display: none;
    }
}
.reviewArea .arrow.prev {
    left: 0;
}
.reviewArea .arrow.next {
    right: 0;
}
.reviewArea .arrow svg {
    width: 100%;
    height: 100%;
    color: #fff;
}
.reviewArea .reviewList {
    max-width: 1120px;
    margin: 0 auto;
}
.reviewArea .reviewList .slick-list {
    padding: 45px 0;
    margin: 0 -30px;
}
.reviewArea .reviewList .slick-slide {
    padding: 0 15px;
}
.reviewArea .slick-slider .slick-dots .slick-active button:before {
    background-color: #fff;
    opacity: 1;
}
.reviewArea .slick-slider .slick-dots li:not(.slick-active) button:before {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}
.reviewItem {
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #fff;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.04);
    -moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.04);
}
@media (max-width: 1180px) {
    .reviewItem {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    }
}
.reviewItem .item {
    padding: 60px 45px 45px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
@media (max-width: 1180px) {
    .reviewItem .item {
        padding: 50px 30px 30px;
    }
}

.reviewItem .item::before {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid rgb(209, 37, 66);
    border-right: 2px solid rgb(209, 37, 66);
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
}
.reviewItem .item .avatar {
    position: absolute;
    top: -42.5px;
    right: 45px;
    width: 85px;
    height: 85px;
}
@media (max-width: 640px) {
    .reviewItem .item .avatar {
        top: -30px;
        width: 60px;
        height: 60px;
    }
}
.reviewItem .item .avatar img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.reviewItem .item .subtitle {
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 992px) {
    .reviewItem .item .subtitle {
        margin-bottom: 15px;
    }
}
.reviewItem .item .star {
    margin-bottom: 20px;
}
.reviewItem .item .title {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 24px;
    margin-bottom: 25px;
    border-bottom: 1px solid #dedede;
    max-height: 46px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
@media (max-width: 1280px) {
    .reviewItem .item .title {
        padding-bottom: 19px;
        margin-bottom: 20px;
    }
}
.reviewItem .item .text {
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #717171;
    letter-spacing: 0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.moduleBox .reviewItem .item::before{
    opacity: 0;
}
.moduleBox .reviewItem .item .title {
    white-space: initial;
    max-height: auto;
}
.moduleBox .reviewItem .text {
    display: block;
}
.moduleBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1005;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition-property: top, opacity, visibility;
    -o-transition-property: top, opacity, visibility;
    -moz-transition-property: top, opacity, visibility;
    transition-property: top, opacity, visibility;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.moduleBox.show {
    opacity: 1;
    visibility: visible;
}
.moduleBox.show .moduleWrap {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
}
.moduleBox .moduleWrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    pointer-events: none;
    padding-top: 60px;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.moduleBox .moduleTitle {
    color: #000;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.05em;
    padding-bottom: 10px;
    text-align: center;
}
.moduleBox .moduleContent {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}
.moduleBox .moduleContent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    background-color: #f1f1f1;
}
.moduleBox .moduleContent::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #f1f1f1;
}
.moduleBox .moduleContent::-webkit-scrollbar-thumb {
    background: #cf253e;
}
@media (max-width: 640px) {
    .moduleBox .moduleContent {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.moduleBox .moduleClose {
    width: 50px;
    height: 50px;
    background: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #cf253e;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.moduleBox .moduleClose:after,
.moduleBox .moduleClose:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -0.5px;
    width: 30px;
    height: 1px;
    background-color: #fff;
}
.moduleBox .moduleClose:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.moduleBox .moduleClose:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media (min-width: 1201px) {
    .moduleBox .moduleClose:hover {
        background-color: #fff;
    }
    .moduleBox .moduleClose:hover:after,
    .moduleBox .moduleClose:hover:before {
        background-color: #cf253e;
    }
}

.moduleMask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1003;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.moduleMask.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.controlBox .slick-arrow,
.slick-slider .slick-arrow {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff !important;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    z-index: 2;
    margin: 10px 5px;
}
.controlBox .slick-arrow:before,
.slick-slider .slick-arrow:before {
    content: "";
    border-style: solid;
    display: block;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
    width: 0;
    height: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.controlBox .slick-arrow.slick-prev:before,
.slick-slider .slick-arrow.slick-prev:before {
    border-width: 5px 9px 5px 0;
    border-color: transparent #cf253e transparent transparent;
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
    transform: translateX(-2px);
}
.controlBox .slick-arrow.slick-next:before,
.slick-slider .slick-arrow.slick-next:before {
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #cf253e;
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
    transform: translateX(2px);
}
@media (min-width: 1201px) {
    .controlBox .slick-arrow:hover,
    .slick-slider .slick-arrow:hover {
        background-color: #cf253e !important;
    }
    .controlBox .slick-arrow:hover.slick-prev:before,
    .slick-slider .slick-arrow:hover.slick-prev:before {
        border-color: transparent #fff transparent transparent;
    }
    .controlBox .slick-arrow:hover.slick-next:before,
    .slick-slider .slick-arrow:hover.slick-next:before {
        border-color: transparent transparent transparent #fff;
    }
}
.controlBox .slick-dots,
.slick-slider .slick-dots {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
}
.controlBox .slick-dots.center,
.slick-slider .slick-dots.center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.controlBox .slick-dots.vertical,
.slick-slider .slick-dots.vertical {
    width: 16px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
}
.controlBox .slick-dots.vertical li,
.slick-slider .slick-dots.vertical li {
    margin: 8px 0;
}
.controlBox .slick-dots:not(.vertical) li,
.slick-slider .slick-dots:not(.vertical) li {
    margin: 0 8px;
}
.controlBox .slick-dots.large li,
.slick-slider .slick-dots.large li {
    width: 16px;
    height: 16px;
}
.controlBox .slick-dots.white li button:before,
.slick-slider .slick-dots.white li button:before {
    background-color: #fff;
}
.controlBox .slick-dots li,
.slick-slider .slick-dots li {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}
.controlBox .slick-dots li button,
.slick-slider .slick-dots li button {
    width: 100%;
    height: 100%;
    border: none;
    color: transparent;
    display: block;
    padding: 0;
    position: relative;
}
.controlBox .slick-dots li button:before,
.slick-slider .slick-dots li button:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.controlBox .slick-dots li.slick-active button:before,
.slick-slider .slick-dots li.slick-active button:before {
    background-color: #cf253e;
    opacity: 1;
}
@media (min-width: 1201px) {
    .controlBox .slick-dots li:hover button:before,
    .slick-slider .slick-dots li:hover button:before {
        background-color: #cf253e;
        opacity: 1;
    }
}
.slickClsList:not(.slick-slider) {
    overflow: hidden;
}
.slickClsList:not(.slick-slider) .slickClsItem:not(:first-child) {
    display: none;
}footer{padding-top:90px}.materialBox{position:absolute;left:0;top:0;z-index:3;width:100%;height:100%}.materialBox img{position:absolute;left:0;top:0;display:block;width:100%}.bannerArea{position:relative;margin-bottom:100px}.bannerArea .item{position:relative}.bannerArea .Img{position:relative;z-index:1}.bannerArea .Img img{display:block;width:100%}.bannerArea .Img.full{display:none}.bannerArea .Txt{position:absolute;left:50%;top:0;z-index:20;display:flex;align-items:center;width:100%;max-width:1400px;height:100%;margin-left:-700px}.bannerArea .ins{position:relative;width:100%;max-width:465px;padding-left:10px;margin-top:115px}.bannerArea .ibestTitle{line-height:1;margin-bottom:20px;font-size:68px;font-family:Lato,"微軟正黑體",sans-serif;font-weight:900;color:#c4252b}.bannerArea .ibestTitle .i{position:relative}.bannerArea .ibestTitle .i:before{content:'';position:absolute;left:5px;top:27px;top:33%;width:12px;height:5px;background-color:#fff}.bannerArea .text{position:absolute;right:0;top:0;width:233px;padding-top:5px;color:#484848;font-size:16px}.bannerArea .text strong{display:flex;align-items:center;padding-bottom:5px;font-size:20px;letter-spacing:.05em}.bannerArea .text strong:after{content:'';flex-grow:1;height:1px;margin-left:15px;background-color:#e7a8aa}.bannerArea .black{color:#454545}.bannerArea .title{padding-bottom:5px;font-size:32px;color:#454545}.bannerArea .subTitle{margin-bottom:30px;font-size:24px}.bannerArea .note{padding-top:30px;margin-bottom:40px;font-size:14px;letter-spacing:.05em;color:#585858;line-height:1.8}.bannerArea .rightBox{position:absolute;z-index:20;right:calc((100% - 1400px)/ 2);top:65%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end}.bannerArea .rightBox .btn04{margin-right:10px;font-size:16px;font-family:Lato,"微軟正黑體",sans-serif;text-transform:uppercase;letter-spacing:.02em;font-weight:700;line-height:1.6}.bannerArea .rightBox .btn04 a{padding-top:30px;padding-bottom:30px;padding-left:18px}.bannerArea .btn04 a{margin-right:10px}#holder{position:absolute;left:50%;transform:translateX(-50%);bottom:-150px;z-index:-1;width:100%;height:300px}#holder:after,#holder:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:repeat-x}#holder:before{background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(20%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 20%);background-image:-o-linear-gradient(top,#fff 0,rgba(255,255,255,0) 20%);background-image:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 20%)}#holder:after{background-image:-webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(20%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 20%);background-image:-o-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 20%);background-image:linear-gradient(to top,#fff 0,rgba(255,255,255,0) 20%)}.sideDot{width:20px;padding-top:10px;padding-bottom:1px;margin-bottom:60px}.sideDot a{position:relative;display:block;width:100%;height:21px;cursor:pointer}.sideDot a:after{content:'';position:absolute;right:0;top:50%;margin-top:-.5px;width:100%;height:1px;background-color:#edbdbf;transition:all .5s}.sideDot a.current:after,.sideDot a:hover:after{width:120%;height:2px;margin-top:-1px;background-color:#c5242a}.sideText{position:relative;margin-right:10px;margin-bottom:60px;font-size:14px;letter-spacing:.02em;color:#333;text-transform:uppercase;white-space:pre;text-align:right;line-height:1.8;font-weight:700}.sideText:before{content:'';position:absolute;right:0;top:0;width:10px;height:2px;background-color:#c5242a}.scrollDown{position:absolute;z-index:25;bottom:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;background:0 0;padding:0;border:none;font-weight:700;font-size:12px;letter-spacing:.07em;font-family:Lato,"微軟正黑體",sans-serif;text-transform:uppercase;color:#c4252b;cursor:pointer}.scrollDown i{position:relative;width:48px;height:48px;margin-bottom:10px;border-radius:50%;border:1px solid rgba(196,38,44,.2)}.scrollDown i:after,.scrollDown i:before{content:'';position:absolute;left:50%;top:50%;border-radius:50%;background-color:#bb1b21}.scrollDown i:before{margin-top:-4px;margin-left:-4px;width:8px;height:8px}.scrollDown i:after{content:'';position:absolute;z-index:-1;width:110%;height:110%;border-radius:50%;background-color:rgba(187,27,33,.4);animation:scrollDown 1.5s .2s both infinite}@keyframes scrollDown{0%{transform:translate(-50%,-50%) scale(0)}20%{transform:translate(-50%,-50%) scale(1.2)}38%,to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}.aboutArea{padding-bottom:80px}.aboutArea .mainTitle{position:relative;padding-bottom:20px;font-size:36px;color:#be242a;letter-spacing:.02em}.aboutArea .mainTitle span{color:#000}.aboutArea .wrapBox{display:flex;flex-wrap:wrap;max-width:1200px}.aboutArea .topBox .leftItem{width:100%;padding-bottom:50px;text-align:center}.aboutArea .topBox .note{font-size:16px}.aboutArea .topBox .note .text{position:relative;padding-bottom:18px;margin-bottom:18px;font-size:20px;line-height:1.8;}.aboutArea .topBox .note .text:after{content:'';position:absolute;left:50%;bottom:0;margin-left:-5px;width:10px;height:3px;background-color:#bb1b21}.aboutArea .topBox .link{margin-bottom:10px}.aboutArea .topBox .link a{padding-bottom:10px;letter-spacing:.02em;color:#bf282d;line-height:1.6}.aboutArea .topBox .link a:hover{color:#285cbf}.aboutArea .topBox .underline{background-image:-webkit-gradient(linear,left top,right top,to(#edbdbf));background-image:-webkit-linear-gradient(left,#edbdbf 100%);background-image:-o-linear-gradient(left,#edbdbf 100%);background-image:linear-gradient(to right,#edbdbf 100%);background-repeat:no-repeat;background-size:100% 1px;background-position:0 20px}.aboutArea .topList{display:flex;flex-wrap:wrap;flex-grow:1}.aboutArea .topList li{width:50%;margin-bottom:30px}.aboutArea .topList .item{padding-left:10px;padding-right:30px}.aboutArea .topList .top{display:flex;align-items:center;padding-bottom:8px;min-height:72px}.aboutArea .topList .Img{display:flex;justify-content:center;width:50px;height:65px}.aboutArea .topList .Img amp-img{width:100%}.aboutArea .topList .Img img{display:block;max-width:100%}.aboutArea .topList .right{width:calc(100% - 50px);padding-left:15px;font-family:Archivo,"微軟正黑體",sans-serif}.aboutArea .topList .en{padding-bottom:5px;font-size:13px;letter-spacing:.05em;color:#b2b2b2}.aboutArea .topList .title{font-size:20px;letter-spacing:.05em}.aboutArea .topList .text{font-size:14px;letter-spacing:.05em;color:#585858;line-height:1.7}.aboutArea .bottomBox{padding-top:250px;padding-bottom:80px;overflow:hidden}.aboutArea .bottomBox:after,.aboutArea .bottomBox:before{content:'';position:absolute;top:110px;width:100%;height:100vh;opacity:.35}.aboutArea .bottomBox:before{z-index:-2;left:0;background:linear-gradient(to right,#e2e2e2 0,#e9f9f7 100%);transform:skewY(6deg)}.aboutArea .bottomBox:after{z-index:-1;right:0;background:linear-gradient(to right,#dcdcdc 0,#f5eff9 100%);transform:skewY(-6deg)}.aboutArea .bottomBox .mainTitle{width:100%;font-size:45px}.aboutArea .bottomBox .leftItem{display:flex;flex-wrap:wrap;width:100%;max-width:500px;padding-right:50px}.aboutArea .bottomBox .btn04{width:100%;margin-top:25px}.aboutArea .bottomBox .overline.left:before{left:-10px}.aboutArea .priceBox{width:50%}.aboutArea .priceBox .title{font-size:14px;padding-bottom:6px;color:#585858;letter-spacing:.05em}.aboutArea .priceBox .price{display:inline-flex;font-weight:600;font-size:43px;color:#c4252b;line-height:1}.aboutArea .priceBox .odometer:before{content:'$'}.aboutArea .priceBox.original .title{padding-bottom:12px}.aboutArea .priceBox.original .price{position:relative;font-weight:400;font-size:40px;color:#969696}.aboutArea .priceBox.original .price:after{content:'';position:absolute;left:0;top:50%;margin-top:-.5px;width:100%;height:1px;background-color:#bcbcbc}.aboutArea .bottomWrap{width:calc(100% - 500px);padding:50px;background:#fff;box-shadow:0 0 20px #ccc}.aboutArea .bottomWrap h3{font-size:25px;font-weight:400;margin-bottom:50px}.aboutArea .bottomList li{width:100%;padding-left:10px;padding-bottom:18px}.aboutArea .bottomList .item{position:relative;padding-left:20px;font-size:15px;letter-spacing:.05em;color:#3c3c3c}.aboutArea .bottomList .item:before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;background-color:#ca5054;border-radius:50%}.workArea{margin-bottom:110px}.workArea .wrapBox{position:relative}.workArea .count{position:absolute;right:20px;top:0;text-align:right}.workArea .count .no{position:relative;padding-top:15px;font-weight:600;font-family:Archivo,"微軟正黑體",sans-serif;font-size:50px;color:#c4252b}.workArea .count .no:before{content:'';position:absolute;right:0;top:0;width:13px;height:13px;background-image:-webkit-gradient(linear,left top,left bottom,from(#c4252b)),-webkit-gradient(linear,left top,left bottom,from(#c4252b));background-image:-webkit-linear-gradient(#c4252b),-webkit-linear-gradient(#c4252b);background-image:-o-linear-gradient(#c4252b),-o-linear-gradient(#c4252b);background-image:linear-gradient(#c4252b),linear-gradient(#c4252b);background-size:100% 2px,2px 100%;background-position:left center,center top;background-repeat:no-repeat}.workArea .countTitle{margin-bottom:30px;font-size:16px;color:#363636}.workList{display:flex;flex-wrap:wrap;margin-left:-4px;margin-right:-4px}.workList li{width:25%;padding-left:4px;padding-right:4px;margin-bottom:8px}.workList .item{position:relative}.workList .item:hover .Txt{opacity:1}.workList .item:hover .enTitle,.workList .item:hover .link,.workList .item:hover .logo,.workList .item:hover .twTitle{opacity:1;transform:translateY(0)}.workList .item:hover .twTitle{transition-delay:.2s}.workList .item:hover .enTitle{transition-delay:.3s}.workList .item:hover .link{transition-delay:.4s}.workList .Img a{display:block}.workList .Img img{display:block;width:100%;height:auto}.workList .Txt{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:rgba(187,27,33,.8);transition:all .5s}.workList .logo img{display:block;width:100%;max-width:170px;height:auto}.workList .title{letter-spacing:.025em}.workList .twTitle{display:block;font-weight:400;padding-bottom:5px;font-size:18px;color:#fff}.workList .enTitle{display:block;font-weight:400;font-size:13px;font-family:Archivo,"微軟正黑體",sans-serif;color:rgba(255,255,255,.5);text-transform:uppercase}.workList .link{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid #fff;border-radius:50%;color:#fff}.workList .link:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);width:110%;height:110%;border-radius:50%;background-color:#fff}.workList .link:hover:after{animation:linkHover 1.5s .2s both infinite}.workList .link .icon-link2{width:16px;height:16px}.workList .last .item{display:flex;align-items:center;justify-content:center;height:100%;border:1px solid #ecc6c7;transition:all .5s}.workList .last .item:hover{border-color:#c4252b}.workList .last .btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:20px;font-size:18px;letter-spacing:.02em;text-transform:uppercase;font-family:Lato,"微軟正黑體",sans-serif;font-weight:700;color:#bb1b21;transition:all .5s}.workList .last .btn:before{content:'';display:inline-block;width:34px;height:34px;margin-bottom:17px;background-image:-webkit-gradient(linear,left top,left bottom,from(#c4252b)),-webkit-gradient(linear,left top,left bottom,from(#c4252b));background-image:-webkit-linear-gradient(#c4252b),-webkit-linear-gradient(#c4252b);background-image:-o-linear-gradient(#c4252b),-o-linear-gradient(#c4252b);background-image:linear-gradient(#c4252b),linear-gradient(#c4252b);background-size:34px 6px,6px 34px;background-position:left center,center top;background-repeat:no-repeat;transition:all .5s}@keyframes linkHover{0%{transform:translate(-50%,-50%) scale(0)}20%{transform:translate(-50%,-50%) scale(1.2)}38%,to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}.partnerArea{margin-bottom:100px}.partnerArea .overline.left:before{left:-10px}.partnerArea .wrapBox{position:relative}.partnerArea .titleBox2{display:flex;align-items:flex-end;width:calc(66.666% + 4px);padding-bottom:30px;margin-bottom:30px}.partnerArea .titleBox2 .item{width:50%;padding-right:15px}.partnerArea .titleBox2 .title{color:#454545;margin-bottom:0}.partnerArea .titleBox2 .en{text-transform:uppercase}.partnerArea .titleBox2 .top{font-weight:700;font-size:16px;letter-spacing:.02em;color:#454545;line-height:1.5}.partnerArea .titleBox2 .note{padding-top:10px;font-size:14px;line-height:1.8;color:#585858}.partnerArea .bottomBox{display:flex}.partnerText{display:flex;flex-direction:column;justify-content:flex-end;flex-grow:1;padding-bottom:25px}.partnerText .title{margin-bottom:20px;padding-bottom:20px;font-size:16px;letter-spacing:.02em;color:#454545;line-height:1.5}.partnerText .tel{margin-bottom:45px;font-size:16px;color:#bf282d}.partnerText .tel a{color:#bf282d}.partnerList{display:flex;flex-wrap:wrap;flex-direction:column;margin-left:-10px;margin-right:-10px;height:560px}.partnerList li{width:calc(100% / 6);min-height:50px;padding-left:10px;padding-right:10px}.partnerList .item{width:100%}.partnerList .Img{display:flex;justify-content:center}.partnerList .Img a{display:block;width:100%}.partnerList .Img img{display:block;max-width:100%;height:auto}.partnerList .Img img:hover{opacity:.5}.communicationArea{overflow:hidden;background-color:#f8f8f8}.communicationArea .wrapBox{display:flex;align-items:center}.communicationArea .insBox{position:relative;z-index:1;width:50%;padding-top:100px;padding-bottom:100px}.communicationArea .titleBox2{margin-bottom:30px}.communicationArea .titleBox2 .title{margin-bottom:5px}.communicationArea .titleBox2 .note{padding-top:0;padding-bottom:35px}.communicationArea .noteBox{margin-bottom:50px;font-size:14px;letter-spacing:.05em;color:#555;line-height:1.8}.communicationArea .rightImg{position:relative;width:50%}.communicationArea .rightImg:after,.communicationArea .rightImg:before{content:'';position:absolute;background-repeat:no-repeat;background-size:contain}.communicationArea .rightImg:before{left:-350px;top:-155px;width:600px;height:475px;background-image:url(/static/images/index/communicationTop.png)}.communicationArea .rightImg:after{right:-220px;bottom:-200px;width:490px;height:460px;background-image:url(/static/images/index/communicationBottom.png)}.groupList{display:flex;margin-bottom:30px}.groupList li{width:33.333%}.groupList .title{margin-bottom:3px;font-size:14px;color:#363636}.groupList .no{font-size:45px;color:#bb1b21;font-family:Archivo,"微軟正黑體",sans-serif;font-weight:500}.contactArea{padding-top:100px;padding-bottom:50px;background-color:#fff}.contactArea .wrapBox{display:flex;flex-wrap:wrap}.contactArea .titleBox2 .note{padding-top:0;margin-bottom:60px;font-size:14px;letter-spacing:.02em;color:#454545;line-height:1.8}.contactArea .titleBox2 .bottomText{position:relative;padding-top:24px;color:#454545;font-size:16px;letter-spacing:.02em;font-weight:700}.contactArea .titleBox2 .bottomText:before{content:'';position:absolute;left:0;top:0;width:10px;height:3px;background-color:#bb1b21}.contactArea .titleBox2 .bottomText .tel{display:block;padding-top:15px;color:#bf282d;font-weight:400}.contactArea .titleBox2 .bottomText .tel a{color:#bf282d}.contactArea .titleBox2 .bottomText .tel a:hover{text-decoration:underline}.contactArea .leftItem{width:35%;max-width:466px;padding-right:20px}.contactArea .rightItem{width:65%}.contactArea .btn04{width:100%;max-width:220px}.contactArea .btn04 a{justify-content:center;width:100%;padding-top:13px;padding-bottom:13px}.formTitle{margin-bottom:30px;padding-bottom:15px;font-size:18px;letter-spacing:.05em;color:#383838;border-bottom:1px solid #df9597}.formList{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px;padding-bottom:20px}.formList li{width:33.333%;padding-left:15px;padding-right:15px;padding-bottom:30px}.formList .focus .title{font-size:12px;transform:translateY(-12px)}.formList .full{width:100%}.formList .item{position:relative;display:flex}.formList .name .inputBox input{padding-right:120px}.formList .title{position:absolute;left:0;top:3px;font-size:14px;color:#444;letter-spacing:.05em;pointer-events:none;-o-transition:all .4s;transition:all .4s}.formList .title em{color:#bb1b21}.formList .sexBox{position:absolute;right:0;top:3px;width:120px}.formList .inputBox{flex-grow:1}.formList input[type=text],.formList select,.formList textarea{width:100%;font-size:16px;font-weight:300;border:none;background:0 0;border-bottom:1px solid #dbdada;border-radius:0;-o-transition:all .5s;transition:all .5s}.formList input[type=text].error,.formList select.error,.formList textarea.error{border-bottom-color:#bb1b21}.formList input[type=text]:focus,.formList select:focus,.formList textarea:focus{outline:0}.formList input[type=text]{height:40px}.formList select{height:40px}.formList textarea{margin-top:12px;height:100px}.formList .checkArea{display:flex}.formList .checkArea .captchaArea{margin-right:10px}.knowledgeArea{position:relative;padding-top:130px;padding-bottom:120px;background-color:#f8f8f8}.knowledgeArea .wrapBox{display:flex}.knowledgeArea .titleBox2{padding-right:20px}.knowledgeArea .titleBox2 .title{margin-bottom:10px}.knowledgeArea .titleBox2 .subTitle{margin-bottom:25px}.knowledgeArea .titleBox2 .note{margin-bottom:40px;font-size:14px;color:#555;line-height:1.8}.knowledgeArea .titleBox2 .overline:before{right:-20px}.knowledgeArea .leftItem{width:35%;max-width:466px}.knowledgeArea .rightItem{width:65%}.knowledgeList{display:flex;flex-wrap:wrap;margin-left:-7px;margin-right:-7px}.knowledgeList li{width:33.333%;padding-left:7px;padding-right:7px}.knowledgeList .item:hover .title{color:#c4252b}.knowledgeList .item:hover .Img img{opacity:.4}.knowledgeList .Img{background-color:#bb1b21}.knowledgeList .Img img{display:block;width:100%;height:auto;transition:all .5s}.knowledgeList .Txt{padding-top:25px;letter-spacing:.02em}.knowledgeList .title{display:block;padding-bottom:10px;font-size:18px;color:#454545;font-weight:400}.knowledgeList .text{font-size:14px;color:#646464;line-height:1.8}@media (max-width:1480px){.bannerArea .rightBox{right:20px}.bannerArea .ins{padding-left:20px;padding-right:20px;max-width:500px}.bannerArea .Txt{left:0;margin-left:0}.partnerList{flex-direction:row;height:auto}.partnerText{flex-direction:row;padding-bottom:0}.partnerText .item{display:flex;justify-content:space-between;width:100%;padding-top:20px}.partnerText .title:before{display:none}}@media (max-width:1366px){.contactArea{padding-top:50px}.knowledgeArea{padding-top:50px;padding-bottom:50px}.workList .logo{display:none}}@media (max-width:1280px){.aboutArea{padding-bottom:50px}.workArea{margin-bottom:30px}.partnerArea{margin-bottom:50px}.partnerList .partnerText{width:100%}.partnerText .item{flex-direction:column;justify-content:center;text-align:center}}@media (min-width:1181px){.workArea .titleBox2{position:absolute;left:0;top:0;width:50%;padding-left:30px}.workList li:first-child{margin-left:50%}.formList .mid{width:calc((100% / 3) * 2)}}@media (max-width:1180px){.scrollDown{display:none}.materialBox{display:none}.bannerArea .Img{position:absolute;left:0;top:0;width:100%;opacity:.5}.bannerArea .Img.full{display:none}.bannerArea .Img.pc{display:none}.bannerArea .Txt{position:relative}.bannerArea .ins{margin-top:40px}.bannerArea .rightBox{display:none}.partnerArea .titleBox2{flex-wrap:wrap;width:100%;text-align:center;padding-bottom:15px}.partnerArea .titleBox2 .item{width:100%;padding-right:0;padding-bottom:5px}.workArea .titleBox2{margin-bottom:20px}.workList li{width:33.333%}.workList .last{width:100%}.workList .link:after{display:none}.aboutArea{padding-bottom:30px}.formList li{width:50%}footer{padding-top:50px}}@media (max-width:1023px){.aboutArea .leftItem{margin-bottom:20px}.aboutArea .topBox .wrapBox{flex-wrap:wrap}.aboutArea .topList .item{padding-right:10px}.aboutArea .bottomBox{padding-top:100px}.aboutArea .bottomBox:after,.aboutArea .bottomBox:before{top:60px}.aboutArea .bottomBox .leftItem{justify-content:center;max-width:100%;text-align:center;padding:0}.aboutArea .bottomWrap{width:100%;padding:20px;margin-top:20px}.aboutArea .bottomWrap h3{margin-bottom:20px}.aboutArea .bottomBox .btn04{margin-top:12px}.aboutArea .bottomList{width:100%}.knowledgeArea .wrapBox{flex-wrap:wrap}.knowledgeArea .titleBox2{padding-right:0}.knowledgeArea .leftItem{width:100%;max-width:100%;padding-bottom:30px}.knowledgeArea .rightItem{width:100%}.partnerList li{width:calc(100% / 3)}}@media (max-width:960px){.communicationArea .wrapBox{position:relative}.communicationArea .insBox{width:100%;padding-top:50px;padding-bottom:50px}.communicationArea .rightImg{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:.2}.communicationArea .rightImg img{min-height:100%;object-fit:cover}.communicationArea .rightImg:after,.communicationArea .rightImg:before{display:none}.contactArea{padding-top:30px;padding-bottom:0}.contactArea .leftItem{width:100%;max-width:100%;text-align:center;padding-right:0}.contactArea .rightItem{width:100%;padding-left:0;padding-top:20px}.contactArea .titleBox2 .note{display:none}.contactArea .titleBox2 .bottomText:before{left:50%;margin-left:-5px}}@media (min-width:768px){.workList .Txt{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0}.workList .enTitle,.workList .link,.workList .logo,.workList .twTitle{opacity:0;transform:translateY(5px);transition:all .5s}.workList .link,.workList .title{pointer-events:auto}.workList .title{position:absolute;left:20px;top:20px}.workList .link{position:absolute;right:20px;bottom:20px}}@media (max-width:767px){.workList .last,.workList li{width:50%}.workList .Txt{justify-content:space-between;padding-top:10px;padding-bottom:10px;background-color:#fff}.workList .title{width:calc(100% - 45px);padding-right:10px}.workList .twTitle{font-size:15px;color:#000}.workList .enTitle{display:none}.workList .link{border-color:#666;color:#666}}@media (max-width:640px){.bannerArea .ibestTitle{font-size:50px;margin-bottom:15px}.bannerArea .ibestTitle .i:before{left:4px;width:9px}.bannerArea .text{right:auto;left:180px;font-size:14px;width:185px}.bannerArea .text strong{font-size:16px;padding-bottom:0}.bannerArea .note{padding-top:0;margin-bottom:20px}.aboutArea .mainTitle{font-size:26px}.aboutArea .topList{text-align:center}.aboutArea .topList .top{flex-direction:column;align-items:center}.aboutArea .topList .Img{margin-bottom:10px}.aboutArea .topList .right{width:100%;padding-left:0}.workArea .titleBox2{text-align:center}.workArea .countTitle{margin-bottom:0;font-size:20px}.workArea .count{position:relative;right:0;text-align:center;padding-top:15px}.workArea .count .no{font-size:70px}.workArea .count .no:before{display:none}.formList li{width:100%}.formList .checkArea{flex-direction:column}.contactArea .btn04{margin-top:10px}.knowledgeList .Txt{padding-top:15px}}@media (max-width:580px){.partnerList li{width:50%}}@media (max-width:480px){.bannerArea .btn04{display:flex}.bannerArea .btn04 a{min-width:130px;padding-right:20px;padding-left:20px;text-align:center}.bannerArea .btn04 a:after{display:none}.bannerArea .title{font-size:26px}.bannerArea .subTitle{font-size:16px}.aboutArea .bottomList li{width:100%}.aboutArea .mainTitle{font-size:22px}.workList .title{width:calc(100% - 32px)}.workList .twTitle{font-size:14px}.workList .link{width:32px;height:32px}.workList .link .icon-link2{width:12px;height:12px}.knowledgeList li{width:100%;padding-bottom:12px}.groupList .no{font-size:32px}}@media (max-width:440px){.bannerArea .ibestTitle{font-size:41px}.bannerArea .ibestTitle .i:before{left:2.5px;width:8.5px}.bannerArea .title{font-size:20px}.bannerArea .subTitle{margin-bottom:15px}.bannerArea .text{top:-3px;left:155px;font-size:12px;width:160px}.bannerArea .text strong{font-size:14px}.aboutArea .topBox{padding-bottom:0}.aboutArea .topList li{width:100%}.aboutArea .priceBox{width:100%;padding-bottom:10px}.aboutArea .priceBox .price{font-size:52px}.groupList .no{font-size:24px}}@media (min-width:1181px){.communicationArea .rightImg:after,.communicationArea .rightImg:before{opacity:0;transition:all 1.5s}.communicationArea .rightImg:before{transform:translate(-50px,-50px)}.communicationArea .rightImg:after{transform:translate(50px,50px)}.communicationArea.show .aniItem{transform:translateY(0);opacity:1}.communicationArea.show .rightImg:after,.communicationArea.show .rightImg:before{opacity:1}.communicationArea.show .rightImg:before{transform:translate(0,0)}.communicationArea.show .rightImg:after{transform:translate(0,0)}}        @media (min-width:1181px){.partnerList li:not(.partnerText){opacity:0;transform:translateY(0) scale(1.2);transition:all 1s}.partnerText{opacity: 0;transition:all 1s}.partnerList.show li{opacity:1;transform:translateY(0) scale(1)}.partnerList.show .partnerText{opacity: 1}}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* 淺灰色背景 */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 將內容從頂部開始排列 */
    min-height: 100vh; /* 確保至少佔據整個視口高度 */
}

/* 服務區域容器 */
.serviceArea {
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    width: 100%; /* w-full */
    max-width: 80rem; /* max-w-7xl (Approx. 1280px) */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
}

/* 服務列表 (網格容器) */
.serviceList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
}

/* 中等螢幕斷點 (md:grid-cols-2) */
@media (min-width: 768px) {
    .serviceList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 大螢幕斷點 (lg:grid-cols-3) */
@media (min-width: 1024px) {
    .serviceList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 服務項目卡片 */
.item {
    background-color: #ffffff; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 1rem; /* rounded-2xl (16px) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    transition: box-shadow 0.3s ease; /* transition-shadow duration-300 */
    display: flex;
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
    text-align: center; /* text-center */
    height: 100%; /* h-full */
}

.item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-xl */
}

/* 圖片容器 */
.Img {
    margin-bottom: 1rem; /* mb-4 */
}

/* SVG 圖示尺寸 */
.Img svg {
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    fill: currentColor; /* 讓 SVG 顏色繼承父元素文本顏色 */
    color: #3b82f6; /* 藍色，作為圖示的預設顏色 */
}

/* 文字內容區塊 */
.Txt {
    flex-grow: 1; /* flex-grow */
}

/* 標題樣式 */
.Txt h3 {
    font-size: 1.5rem; /* text-2xl (24px) */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #374151; /* text-gray-800 */
}

/* 段落文字樣式 */
.Txt p {
    font-size: 1rem; /* 預設字體大小 */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.625; /* leading-relaxed */
}

/* 連結樣式 */
.Txt a {
    color: #3b82f6; /* text-blue-500 */
    text-decoration: none;
}

.Txt a:hover {
    text-decoration: underline; /* hover:underline */
}

/* 價格區塊的特殊樣式 */
.priceBox {
    background-color: #1e3a8a; /* 深藍色背景 */
    color: white;
    padding: 2.5rem 1.5rem; /* 增加內邊距 */
    border-radius: 1.5rem; /* 更圓的邊角 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 更明顯的陰影 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* 確保價格方塊與其他服務項高度一致 */
    text-align: center;
}

/* 價格區塊標題 */
.priceBox h3 {
    font-size: 1.875rem; /* text-3xl (30px) */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
    line-height: 1.3;
    color: #ffffff; /* 確保白色字體 */
}

/* 價格文字 */
.priceBox .price {
    font-size: 3rem; /* text-5xl (48px) */
    font-weight: 800; /* font-extrabold */
    color: #fca5a5; /* text-red-300 */
    margin-bottom: 1.5rem; /* mb-6 */
    text-decoration: line-through; /* line-through */
}

/* 聯絡按鈕 */
.priceBox .btnContact {
    display: inline-block;
    background-color: #fcd34d; /* bg-yellow-300 */
    color: #1e3a8a; /* text-blue-900 */
    padding: 0.875rem 2.5rem; /* px-10 py-3 */
    border-radius: 9999px; /* rounded-full */
    text-decoration: none;
    font-weight: 600; /* font-semibold */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: background-color 0.3s ease, transform 0.3s ease; /* transition-all duration-300 */
}

.priceBox .btnContact:hover {
    background-color: #fbbf24; /* hover:bg-yellow-400 */
    transform: scale(1.05); /* hover:scale-105 */
}

/* 響應式佈局調整 - 讓第10個項目跨列 */
/* 手機螢幕 (col-span-1) - 預設單列，無需特殊處理 */

/* 中等螢幕 (md:col-span-2) */
@media (min-width: 768px) {
    .serviceList li:last-child { /* 選取最後一個 li 元素 */
        grid-column: span 2 / span 2;
    }
}

/* 大螢幕 (lg:col-span-3) */
@media (min-width: 1024px) {
    .serviceList li:last-child { /* 選取最後一個 li 元素 */
        grid-column: span 3 / span 3;
    }
}

/* 隱藏 SVG 定義 */
.svg-definitions {
    display: none;
}