@charset "UTF-8";

@import url(../public/css/reset.css);
@import url(../public/css/font-awesome-4.7.0/font-awesome.min.css);
@import url(../public/css/rwdgrid.css);
@import url("https://fonts.googleapis.com/css?family=Amiri|Noto+Sans+TC:400,500,700|Noto+Serif+TC:400,500,700&display=swap");
@import url(../public/css/textEditor.css);
@import url(../public/css/contentbuilder.css);

[class*='col-'],
.b-box,
.wrap,
header .wrap,
.menu a,
.menu .submenu a,
.controlBox,
.controlBox .main,
.hideBox,
.mMenu>li>a,
.bannerBottomBox .textBox,
.footerLinkList .rectBtn,
.bannerTextBox,
.m_classLink .main,
.m_classLink>ul,
.tab a,
.side_share a,
.moreBtn,
.roundBtn,
.cardList>li,
.prevArrow,
.nextArrow,
.hImgScale .Img,
.searchArea,
.langArea,
.searchBox input,
.mobileFixedBox>.item,
#privacy,
#userTerms {
    box-sizing: border-box
}

a,
header,
.logo,
.logo svg,
.menu>li,
.menu .submenu,
.m_menu::before,
.controlBox,
.controlBox .main,
.controlBox .main span,
.controlBox .main::before,
.controlBox .main::after,
.mMenu>li>a::before,
.functionBox a svg,
.mFunctionBox a svg,
.bannerBottomBox .logoVerticalBox,
.bannerBottomBox p,
footer .logo,
footer .rightBox,
.bizList svg,
.footerLinkList,
.pageTitleBox em,
.pageTitleBox .textPiece span,
.bannerText h2,
.bannerText .textEditor,
.tab a::after,
.openAlbumBtn,
.btnBox,
.slick-dots button::before,
.hImgScale .Img img,
.prevArrow,
.nextArrow {
    transition: all .7s ease-out
}

footer .rightBox,
.bannerBottomBox p,
footer .logo,
.footerLinkList,
.pageTitleBox em,
.bannerText h2,
.bannerText .textEditor,
.bannerBottomBox .logoVerticalBox,
.pageTitleBox .textPiece span {
    opacity: 0
}

footer .rightBox {
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px)
}

.bannerBottomBox p,
footer .logo,
.footerLinkList {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px)
}

.pageTitleBox em,
.bannerText h2,
.bannerText .textEditor {
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px)
}

.menu>li:hover .submenu,
.bannerBottomBox.show .logoVerticalBox,
.bannerBottomBox.show p,
footer.show .logo,
footer.show .footerLinkList,
footer.show .rightBox,
.bannerTextBox.show .pageTitleBox .textPiece span,
.bannerTextBox.show .pageTitleBox em,
.bannerTextBox.show .bannerText h2,
.bannerTextBox.show .bannerText .textEditor {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    opacity: 1
}

.changePageArea {
    position: fixed;
    display: block;
    width: 100%;
    height: 100vh;
    z-index: 901;
    overflow: hidden;
    background-image: url("../images/pageBg.jpg");
    visibility: visible;
    transition: all 0.8s cubic-bezier(0.7, 0, 0.3, 1)
}

.changePageArea.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

body {
    background-color: #fff;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 14px;
    color: #767676
}

body>svg {
    display: none
}

a {
    color: #767676
}

@media (min-width: 1181px) {
    a:hover {
        color: #c8000a
    }
}

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

div.titan {
    display: none
}

.col-1 {
    width: 100%
}

.col-2 {
    width: 50%
}

.col-3 {
    width: 33.33%
}

.col-4 {
    width: 25%
}

.col-5 {
    width: 20%
}

a.btn_color1 {
    color: #fff;
    background-color: #c8000a
}

a.btn_color1:hover {
    background-color: #ab8546
}

a.btn_color2 {
    color: #fff;
    background-color: #ab8546
}

a.btn_color2:hover {
    background-color: #c8000a
}

#closeOrder,
#closeCart,
#closePrice,
#closeInquiry {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 18px;
    cursor: pointer
}

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

.outerWrap {
    position: relative;
    overflow: hidden
}

@media (min-width: 1181px) {
    .outerWrap {
        padding-top: 80px
    }
}

@media (max-width: 1180px) {
    .outerWrap {
        padding-top: 60px
    }
}

.outerWrap.noBanner .mainArea {
    padding-top: 50px
}

@media (max-width: 1180px) {
    .outerWrap.noBanner .mainArea {
        padding-top: 30px
    }
}

.outerWrap.noBanner .pageWrap {
    margin-top: 0
}

.wrap {
    width: 1200px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1240px) {
    .wrap {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

.moduleBox {
    position: fixed;
    left: 50%;
    top: 48%;
    z-index: 1005;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-property: top, opacity, visibility;
    transition-duration: .5s;
    transition-timing-function: ease-in-out
}

.moduleBox.show {
    top: 50%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.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;
    transition: all .5s ease-in-out
}

.moduleMask.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    background-color: #202020
}

@media (max-width: 1180px) {
    header {
        display: none
    }
}

header.isTop {
    box-shadow: 0 0 0 transparent
}

header .wrap {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 1800px
}

@media (max-width: 1840px) {
    header .wrap {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

.logo svg {
    width: 175px;
    height: 49px;
    fill: #fff;
    color: #c8000a
}

.menuBox {
    margin-left: auto
}

.menu {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.menu>li {
    position: relative
}

.menu>li:hover>a {
    color: #bdbdbd
}

.menu>li:hover .submenu {
    pointer-events: auto;
    visibility: visible
}

.menu>li>a {
    display: block;
    padding: 30px 10px;
    letter-spacing: 1.5px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(to bottom, #c8000a 0, #c8000a 100%) 50% 0/3px 0 no-repeat
}

.menu>li>a.current {
    color: #bdbdbd
}

.menu .submenu {
    position: absolute;
    top: 100%;
    left: -20px;
    z-index: 1;
    width: calc(100% + 40px);
    opacity: 0;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    pointer-events: none;
    visibility: hidden
}

.menu .submenu a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    letter-spacing: 0;
    background-color: #070707
}

.menu .submenu a:hover {
    color: #fff
}

.m_menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    display: block;
    width: 100%;
    background-color: #fff
}

@media (min-width: 1181px) {
    .m_menu {
        display: none
    }
}

.m_menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../images/mMenuBg.jpg") 100% 50%/cover no-repeat;
    opacity: 0
}

.m_menu.active {
    height: 100%
}

.m_menu.active::before {
    opacity: 1
}

.m_menu.active .m_logo {
    visibility: hidden;
    pointer-events: none;
    opacity: 0
}

.m_menu.active .controlBox {
    background-color: transparent
}

.m_menu.active .controlBox .main::before,
.m_menu.active .controlBox .main::after {
    top: 50%
}

.m_menu.active .controlBox .main::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.m_menu.active .controlBox .main::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.m_menu.active .controlBox .main span {
    opacity: 0
}

.m_menu.active .hideBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.controlBox {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background-color: #202020
}

.controlBox .main {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border: none
}

.controlBox .main span,
.controlBox .main::before,
.controlBox .main::after {
    content: '';
    position: absolute;
    left: 50%;
    z-index: 1;
    width: 20px;
    height: 2px;
    margin-left: -10px;
    margin-top: -.5px;
    background-color: #fff
}

.controlBox .main span {
    top: 50%
}

.controlBox .main::before {
    top: calc(50% - 7px)
}

.controlBox .main::after {
    top: calc(50% + 7px)
}

.m_logo svg {
    display: block;
    width: 154px;
    height: 39px;
    color: #c8000a;
    fill: #fff
}

.hideBox {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1;
    display: none;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 60px);
    padding-bottom: 60px;
    -webkit-overflow-scrolling: touch;
    overflow: auto
}

.mMenuOpenLogo {
    margin-bottom: 3vh
}

@media (max-height: 580px) {
    .mMenuOpenLogo {
        margin-bottom: 1.5vh
    }
}

.mMenuOpenLogo a {
    display: block;
    width: 125px;
    margin-left: auto;
    margin-right: auto
}

@media (max-height: 800px) and (min-height: 581px) {
    .mMenuOpenLogo a {
        width: 75px
    }
}

@media (max-height: 580px) {
    .mMenuOpenLogo a {
        width: 58px
    }
}

.mMenuOpenLogo img {
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.mMenu {
    width: 100%
}

.mMenu>li>a {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #b6b6b6;
    white-space: nowrap;
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
    text-indent: 4px
}

.mMenu>li>a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 100%;
    background-image: linear-gradient(to right, #b6b6b6 0, #b6b6b6 100%), linear-gradient(to right, #b6b6b6 0, #b6b6b6 100%);
    background-position: 0 0, 0 100%;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media (max-width: 420px) {
    .mMenu>li>a::before {
        max-width: calc(100% - 40px)
    }
}

.mMenu>li>a.current {
    color: #fff
}

.mMenu>li>a.current::before {
    width: 100%
}

.mMenu .submenu {
    display: none;
    width: 90px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px
}

.mMenu .submenu .wrap {
    padding-left: 0;
    padding-right: 0
}

.mMenu .submenu img {
    display: none
}

.mMenu .submenu a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #ab8546;
    text-align: center
}

.functionBox,
.mFunctionBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.functionBox a,
.mFunctionBox a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 1px;
    color: #bdbdbd
}

.functionBox a.current,
.functionBox a:hover,
.mFunctionBox a.current,
.mFunctionBox a:hover {
    color: #fff
}

.functionBox a.current svg,
.functionBox a:hover svg,
.mFunctionBox a.current svg,
.mFunctionBox a:hover svg {
    fill: #fff
}

.functionBox a svg,
.mFunctionBox a svg {
    margin-right: 7px;
    fill: #bdbdbd
}

.functionBox {
    margin-left: 25px
}

.functionBox a {
    padding: 11px;
    font-size: 12px
}

.iconMember svg {
    width: 17px;
    height: 17px
}

.iconInvoice svg {
    width: 17px;
    height: 18px
}

.iconRecruit svg {
    width: 19px;
    height: 16px
}

.mFunctionBox {
    margin-top: 10px
}

@media (max-width: 320px) {
    .mFunctionBox {
        width: 100%;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

    .mFunctionBox::before {
        content: '';
        width: 20px;
        height: 2px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: #fff
    }
}

.mFunctionBox a {
    padding-top: 10px;
    padding-bottom: 10px
}

@media (min-width: 321px) {
    .mFunctionBox a+a {
        margin-left: 15px
    }
}

@media (max-width: 320px) {
    .mFunctionBox a+a {
        margin-top: 5px
    }
}

.bannerBottomBox {
    position: relative;
    height: 800px;
    overflow: hidden
}

.bannerBottomBox.show p {
    transition-delay: .3s
}

@media (max-width: 1180px) {
    .bannerBottomBox {
        height: 500px
    }
}

@media (max-width: 480px) {
    .bannerBottomBox {
        display: none
    }
}

.bannerBottomBox .textBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #f1f1f1
}

@media (max-width: 768px) {
    .bannerBottomBox .textBox {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media (max-width: 1240px) {
    .bannerBottomBox .textBox {
        padding-left: 20px;
        padding-right: 20px
    }
}

.bannerBottomBox .logoVerticalBox {
    color: #c8000a
}

.bannerBottomBox .logoVerticalBox svg {
    width: 178px;
    height: 306px;
    fill: #fff
}

@media (max-width: 768px) {
    .bannerBottomBox .logoVerticalBox svg {
        width: 76px;
        height: 130px;
        margin-bottom: 20px
    }
}

.bannerBottomBox p {
    line-height: 2;
    letter-spacing: 3px
}

@media (min-width: 769px) {
    .bannerBottomBox p {
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        margin-top: 140px;
        margin-left: 25px
    }
}

@media (max-width: 768px) {
    .bannerBottomBox p {
        text-align: center
    }
}

.bannerBottomBox .parallaxImg {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%
}

.bannerBottomBox .parallaxImg img {
    width: auto
}

footer {
    padding-top: 55px;
    padding-bottom: 40px;
    color: #c2c2c2;
    background-color: #202020
}

@media (max-width: 1180px) {
    footer {
        padding-top: 25px;
        padding-bottom: 60px
    }
}

footer .topBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #4d493c
}

@media (max-width: 1180px) {
    footer .topBox {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

footer .topBox h2 {
    text-align: right;
    font-weight: 400;
    letter-spacing: 1.5px;
    font-size: 16px;
}

@media (max-width: 1180px) {
    footer .topBox h2 {
        text-align: center
    }
}

footer .bottomBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-top: 20px;
    text-align: right
}

@media (max-width: 1180px) {
    footer .bottomBox {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center
    }
}

footer .bottomBox .rightBox>p {
    margin-top: 5px;
    font-size: 12px;
    color: #fff
}

footer .logo svg {
    width: 175px;
    height: 49px;
    fill: #c2c2c2;
    color: #c2c2c2
}

@media (max-width: 1180px) {
    footer .logo svg {
        display: none
    }
}

.bizList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px
}

@media (min-width: 1181px) {
    .bizList {
        margin-right: -17px
    }
}

@media (max-width: 400px) {
    .bizList {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.bizList svg {
    fill: #7b7b7b;
    color: #7b7b7b
}

.bizList li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 17px;
    padding-right: 17px
}

@media (min-width: 1181px) {
    .bizList li.bizTOP:hover svg {
        fill: #af935c;
        color: #af935c
    }

    .bizList li.bizCY:hover svg {
        fill: #f0831e
    }

    .bizList li.bizTSP:hover svg {
        fill: #015c95
    }
}

@media (max-width: 1180px) {
    .bizList li.bizTOP svg {
        fill: #af935c;
        color: #af935c
    }

    .bizList li.bizCY svg {
        fill: #f0831e
    }

    .bizList li.bizTSP svg {
        fill: #015c95
    }
}

@media (min-width: 481px) and (max-width: 860px) {
    .bizList li {
        margin-top: 10px
    }
}

@media (max-width: 400px) {
    .bizList li {
        margin-top: 10px
    }
}

.bizList .bizTOP svg {
    width: 87px;
    height: 30px
}

.bizList .bizCY svg {
    width: 107px;
    height: 30px
}

.bizList .bizTSP svg {
    width: 88px;
    height: 27px
}

.footerLinkList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media (max-width: 1180px) {
    .footerLinkList {
        width: 100%;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media (max-width: 640px) {
    .footerLinkList {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media (max-width: 640px) {
    .footerLinkList li:not(.iconBtn) {
        margin-bottom: 10px;
        width: 100%
    }
}

.footerLinkList li+li a:not(.rectBtn) {
    margin-left: 8px
}

@media (min-width: 641px) {
    .footerLinkList li+li .rectBtn {
        margin-left: 15px
    }
}

.footerLinkList a {
    position: relative;
    height: 40px;
    line-height: 40px;
    text-align: center
}

@media (max-width: 640px) {
    .footerLinkList a {
        margin-left: auto;
        margin-right: auto
    }
}

.footerLinkList a:not(.rectBtn) {
    display: block;
    width: 28px;
    height: 28px;
    font-size: 30px;
    line-height: 28px
}

.footerLinkList a:not(.rectBtn):hover:after {
    opacity: 0
}

.footerLinkList a:not(.rectBtn):hover img {
    opacity: 1 !important
}

.footerLinkList a:not(.rectBtn) img {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .5s
}

.footerLinkList a:not(.rectBtn):after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .5s
}

.footerLinkList a:not(.rectBtn).fb {
    width: 25px;
    height: 25px
}

.footerLinkList a:not(.rectBtn).fb img {
    opacity: 0
}

.footerLinkList a:not(.rectBtn).fb:after {
    background-image: url(../images/fb_icon_a.png)
}

.footerLinkList a:not(.rectBtn).line {
    width: 25px;
    height: 25px
}

.footerLinkList a:not(.rectBtn).line img {
    opacity: 0
}

.footerLinkList a:not(.rectBtn).line:after {
    background-image: url(../images/line_icon_a.png)
}

.footerLinkList .rectBtn {
    display: block;
    width: 120px;
    color: #bababa;
    border: 1px solid #595959
}

@media (min-width: 1181px) {
    .footerLinkList .rectBtn:hover {
        color: #fff;
        border-color: #c8000a;
        background-color: #c8000a
    }
}

@media (max-width: 400px) {
    .footerLinkList .rectBtn {
        width: 100%
    }
}

@media (max-width: 1180px) {
    .footerInfoList {
        margin-bottom: 5px
    }
}

.footerInfoList li {
    position: relative;
    display: inline-block
}

.footerInfoList li+li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background-color: #bebebe
}

@media (max-width: 480px) {
    .footerInfoList li:last-child {
        width: 100%
    }

    .footerInfoList li:last-child a::before {
        display: none
    }
}

.footerInfoList a {
    position: relative;
    display: block;
    padding: 10px
}

@media (max-width: 768px) {
    .footerInfoList a {
        color: #fff
    }
}

.copyrightBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    font-size: 12px;
    color: #fff
}

@media (max-width: 1180px) {
    .copyrightBox {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.copyrightBox a {
    color: #fff
}

@media (min-width: 1181px) {
    .copyrightBox a:hover {
        color: #c8000a
    }
}

@media (max-width: 400px) {
    .copyrightBox {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

@media (min-width: 401px) {
    .design {
        margin-left: 5px;
        padding-left: 5px;
        background: linear-gradient(to bottom, #fff 0, #fff 100%) 0 50%/1px 12px no-repeat
    }
}

@media (max-width: 400px) {
    .design {
        margin-top: 5px
    }
}

.bannerArea {
    position: relative;
    max-height: 850px;
    overflow: hidden
}

@media (max-width: 1240px) {
    .bannerArea .bannerTextBox {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width: 640px) {
    .bannerArea .bannerTextBox {
        display: none
    }
}

.bannerBox img {
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#banner .current img {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    transition: all 20s linear
}

.bannerTextBox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #fff
}

.bannerTextBox.show .pageTitleBox em {
    transition-delay: .8s
}

.bannerTextBox.show .bannerText h2 {
    transition-delay: 1s
}

.bannerTextBox.show .bannerText .textEditor {
    transition-delay: 1.3s
}

@media (min-width: 1181px) {
    .bannerTextBox.offset {
        padding-bottom: 380px
    }
}

.bannerTextBox.inPage {
    position: static;
    margin-bottom: 50px
}

@media (max-width: 1180px) {
    .bannerTextBox.inPage {
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 30px;
        text-align: center
    }
}

.bannerTextBox.inPage em {
    padding-left: 0
}

.bannerTextBox.inPage,
.bannerTextBox.inPage em,
.bannerTextBox.inPage .bannerText {
    color: #333
}

@media (min-width: 641px) {
    .bannerTextBox.inPage.mobileType {
        display: none
    }
}

@media (max-width: 1180px) {
    .bannerTextBox {
        padding-left: 20px;
        padding-right: 20px
    }
}

.pageTitleBox {
    margin-bottom: 17px;
    font-family: "Noto Serif TC", serif
}

.pageTitleBox h2 {
    margin-bottom: 4px;
    font-size: 27px
}

.pageTitleBox em {
    display: inline-block;
    padding-left: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #9e9e9e
}

.pageTitleBox .textPiece {
    position: relative;
    z-index: 1
}

.pageTitleBox .textPiece::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(100% - 1px);
    height: 100%;
    background: linear-gradient(to left, #b2b2b2 1px, transparent 0, transparent 100%) 0 50%/47px 100% repeat-x
}

.pageTitleBox .textPiece span {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px
}

.bannerText {
    color: #cacaca
}

.bannerText h2 {
    display: inline-block;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    font: 400 16px "Noto Serif TC", serif
}

@media (min-width: 641px) {
    .bannerText h2 {
        letter-spacing: 10px;
        text-indent: 10px
    }
}

@media (max-width: 640px) {
    .bannerText h2 {
        letter-spacing: 3px;
        text-indent: 3px
    }
}

.bannerText .textEditor {
    font-size: 14px
}

.mainArea {
    padding-bottom: 100px
}

@media (max-width: 1180px) {
    .mainArea {
        padding-bottom: 50px
    }
}

.pageMainArea {
    position: relative;
    z-index: 1;
    padding-top: 100px
}

@media (max-width: 1180px) {
    .pageMainArea {
        padding-top: 50px
    }
}

@media (min-width: 1181px) {
    .pageMainArea.offset {
        margin-top: -360px;
        padding-top: 0
    }

    .pageMainArea.offset::before {
        top: 271px
    }

    .pageMainArea.offset::after {
        top: 360px;
        height: calc(100% - 360px)
    }
}

.pageMainArea::before,
.pageMainArea::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%
}

.pageMainArea::before {
    top: -89px;
    height: 90px;
    background: url("../images/inPageTopBar.png") 50% 100%/100% auto no-repeat
}

.pageMainArea::after {
    top: 0;
    height: 100%;
    background: url("../images/pageBg.jpg")
}

.titleArea {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 40px;
    color: #c8000a
}

@media (max-width: 1180px) {
    .titleArea {
        margin-bottom: 30px
    }
}

@media (max-width: 640px) {
    .titleArea {
        padding-top: 30px
    }
}

.titleArea .titleBox {
    margin-bottom: 0
}

.titleBox {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 20px
}

.titleBox h1[lang="en"],
.titleBox h2[lang="en"],
.titleBox em:not(.handText) {
    display: block;
    font: 700 17px "Amiri", serif;
    text-transform: uppercase;
    color: #252525
}

.titleBox h1:not([lang="en"]),
.titleBox h2:not([lang="en"]) {
    font-size: 20px;
    font-weight: 400;
    color: #111;
    letter-spacing: 2px
}

.bread {
    margin-bottom: 40px
}

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

.bread a,
.bread span {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .5px;
    color: #767676;
    text-transform: uppercase
}

.bread a+a::before,
.bread a+span::before,
.bread span+a::before,
.bread span+span::before {
    content: '/';
    display: inline-block;
    margin-left: 4px;
    margin-right: 7px;
    color: #767676
}

@media (min-width: 1181px) {
    .bread a:hover {
        color: #c8000a
    }
}

.contentBox {
    clear: both
}

.articleTitle {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 500;
    color: #111
}

@media (max-width: 480px) {
    .articleTitle {
        font-size: 20px
    }
}

.subTitle {
    position: relative;
    margin-bottom: 5px;
    padding-left: 13px
}

.subTitle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    background-color: currentColor
}

table.breakpoint>tbody>tr>td.expand {
    cursor: pointer;
    background: url("../images/plus.png") no-repeat 5px center;
    padding-left: 40px
}

.classBox {
    position: relative;
    z-index: 2;
    margin-bottom: 35px
}

.classBox>ul {
    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca
}

@media (max-width: 1180px) {
    .classBox>ul {
        display: none !important
    }
}

.classBox>ul:not(.slickClassLink) {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.classBox>ul>li>a,
.classBox>ul .slick-slide>a {
    display: block;
    padding: 10px 15px
}

.classBox .current {
    color: #c8000a
}

.m_classLink {
    position: relative;
    z-index: 1
}

@media (min-width: 1181px) {
    .m_classLink {
        display: none
    }
}

.m_classLink .main {
    position: relative;
    display: block;
    font-size: 16px;
    padding: 10px 30px 10px 10px;
    color: #fff;
    letter-spacing: 1px;
    cursor: pointer;
    background-color: #c8000a
}

.m_classLink .main::before {
    content: '\f107';
    position: absolute;
    right: 15px;
    top: 50%;
    z-index: 1;
    margin-top: -6px;
    line-height: 1;
    font-size: 15px;
    color: #fff;
    font-family: FontAwesome
}

.m_classLink>ul {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    z-index: 1;
    display: none;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

.m_classLink>ul>li+li {
    border-top: 1px solid #f2f2f2
}

.m_classLink>ul>li.current>a {
    color: #c8000a
}

.m_classLink>ul a {
    position: relative;
    z-index: 1;
    display: block;
    padding: 14px 20px;
    color: #000;
    font-size: 14px;
    background-color: #fff
}

.m_classLink .hasSubmenu {
    position: relative;
    padding-right: 40px
}

.m_classLink .hasSubmenu::after {
    content: '\f107';
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 1;
    line-height: 1;
    margin-top: -7px;
    font-family: FontAwesome
}

.m_classLink .hasSubmenu.open::after {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.m_classLink .submenuList {
    display: none;
    padding-left: 15px;
    padding-bottom: 10px;
    background-color: #efefef
}

.m_classLink .submenuList a {
    padding: 10px 20px;
    background-color: #efefef
}

.m_classLink .submenuList a.current {
    color: #c8000a
}

.sectionTitle {
    margin-bottom: 15px;
    font-weight: 400;
    font-family: "Noto Serif TC", serif
}

.tab {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #d7d7d7
}

@media (max-width: 1180px) {
    .tab {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.tab a {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 48px;
    padding-left: 30px;
    padding-right: 30px;
    color: #666
}

@media (min-width: 1181px) {
    .tab a:hover {
        color: #111
    }
}

@media (max-width: 1180px) {
    .tab a {
        padding-left: 10px;
        padding-right: 10px
    }
}

.tab a.current {
    color: #111
}

.tab a.current::after {
    height: 2px
}

.tab a+a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1px;
    z-index: 1;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    background-color: #d7d7d7
}

.tab a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    width: 100%;
    height: 0;
    pointer-events: none;
    background-color: #c8000a
}

.tabContent {
    margin-bottom: 70px
}

.tabContent>li {
    display: none
}

.side_album {
    margin-bottom: 30px
}

@media (min-width: 1024px) {
    .side_album {
        margin-top: 30px;
        margin-right: -10px
    }
}

@media (max-width: 1023px) {
    .side_album {
        margin-top: 10px
    }
}

.side_album li {
    float: left;
    max-width: 100px;
    width: 33.33%;
    padding: 0 10px 10px 0
}

.side_album a {
    display: block;
    box-shadow: 2px 2px 5px #c3c3c3
}

.side_album a img {
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media (min-width: 1024px) {
    .side_contactInfo {
        margin-top: 50px
    }
}

@media (max-width: 1023px) {
    .side_contactInfo {
        margin-top: 20px
    }
}

.side_contactInfo li {
    margin-bottom: 10px
}

.side_contactInfo a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 16px
}

.side_contactInfo i {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin-right: 10px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #c8000a
}

.side_contactInfo b {
    width: calc(100% - 45px);
    font-weight: 400;
    letter-spacing: 1px;
    word-break: break-all
}

.shareBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 30px
}

.shareBox p {
    margin-right: 20px;
    line-height: 40px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Noto Serif TC", serif
}

.shareBox a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    border-radius: 50%
}

.shareBox a svg {
    fill: #fff
}

.shareBox a+a {
    margin-left: 10px
}

.shareBox .fb {
    background-color: #3b5998
}

@media (min-width: 1181px) {
    .shareBox .fb:hover {
        background-color: #2d4373
    }
}

.shareBox .line {
    background-color: #00c300
}

@media (min-width: 1181px) {
    .shareBox .line:hover {
        background-color: #009000
    }
}

.shareBox .line svg {
    width: 20px;
    height: 22px
}

.side_share {
    clear: both;
    display: none;
    margin-top: 30px
}

.side_share a {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 15px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    text-align: center
}

.side_share i {
    padding-right: 5px;
    font-size: 18px
}

.side_share .line {
    box-shadow: 0 0 0 1px #22a00b;
    border-top: 1px solid #e1ffa9;
    background: #a7e732;
    background: linear-gradient(135deg, #a7e732 0%, #1fb50e 35%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a7e732', endColorstr='#1fb50e', GradientType=1)
}

.side_share .fb {
    box-shadow: 0 0 0 1px #235c9b;
    border-top: 1px solid #8DCFF5;
    background: #5da0ea;
    background: linear-gradient(to bottom, #5da0ea 0%, #3d8ce6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5da0ea', endColorstr='#3d8ce6', GradientType=0)
}

.newsClass {
    display: inline-block;
    padding: 5px 20px;
    font-size: 12px;
    font-weight: 300;
    color: #c8000a;
    background-color: #d7effb
}

.newsClass+.dateBox {
    margin-left: 15px
}

.openAlbumBtn {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    min-width: 50px;
    height: 50px;
    padding: 0 5px;
    font-size: 15px;
    font-family: "Noto Sans TC", sans-serif;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    background-color: #ab8546
}

@media (min-width: 1181px) {
    .openAlbumBtn:hover {
        background-color: #c8000a
    }
}

.dateBox {
    position: relative;
    padding-top: 4px;
    padding-bottom: 4px;
    border-top: 1px solid #454443;
    border-bottom: 1px solid #454443;
    font-size: 13px;
    font-family: "Noto Serif TC", serif;
    color: #454443
}

.dateBox[data-idx]::before {
    content: attr(data-idx);
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 1;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #9c9c9c
}

@media (min-width: 641px) {
    .dateBox .activity {
        margin-left: 20px
    }
}

@media (max-width: 640px) {
    .dateBox .activity {
        width: 100%
    }
}

.btnBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 35px
}

.btnBox.center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (max-width: 1180px) {
    .btnBox {
        margin-top: 20px;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.btnBox a+a {
    margin-left: 20px
}

.moreBtn {
    position: relative;
    z-index: 1;
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #747474
}

@media (min-width: 1181px) {
    .moreBtn:hover {
        color: #fff;
        border-color: #c8000a;
        background-color: #c8000a
    }
}

@media (max-width: 1180px) {
    .moreBtn {
        color: #fff;
        border-color: #c8000a;
        background-color: #c8000a
    }
}

.roundBtn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 36px;
    height: 36px;
    color: #c8000a;
    font-family: "Noto Serif TC", serif;
    border: 1px solid #c8000a;
    border-radius: 50%
}

@media (min-width: 1181px) {
    .roundBtn:hover {
        color: #fff;
        border-width: 18px;
        border-color: #c8000a
    }
}

@media (max-width: 1180px) {
    .roundBtn {
        color: #fff;
        border-width: 18px;
        border-color: #c8000a
    }
}

.slick-dots {
    text-align: center
}

.slick-dots .slick-active button::before {
    background-color: #c8000a
}

.slick-dots>li {
    display: inline-block
}

.slick-dots button {
    position: relative;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    color: transparent;
    background-color: transparent;
    cursor: pointer
}

.slick-dots button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    border-radius: 50%;
    background-color: #b2aead
}

.parallaxImg,
.parallaxText {
    position: absolute;
    z-index: -1
}

.parallaxText {
    line-height: 1
}

.cardList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media (min-width: 481px) {
    .cardList {
        margin-left: -15px;
        margin-right: -15px
    }
}

.cardList>li {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 40px
}

.cardList .item {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05)
}

.cardList img {
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media (min-width: 961px) {
    .cardItem-3 li {
        width: calc(100% / 3)
    }
}

@media (min-width: 481px) and (max-width: 960px) {
    .cardItem-3 li {
        width: 50%
    }
}

@media (max-width: 480px) {
    .cardItem-3 li {
        width: 100%
    }
}

@media (min-width: 961px) {
    .cardItem-4 li {
        width: calc(100% / 4)
    }
}

@media (min-width: 768px) and (max-width: 960px) {
    .cardItem-4 li {
        width: calc(100% / 3)
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .cardItem-4 li {
        width: 50%
    }
}

@media (max-width: 480px) {
    .cardItem-4 li {
        width: 100%
    }
}

.insCardList {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.insCardList .item {
    overflow: hidden
}

@media (min-width: 1181px) {
    .insCardList .item:hover h3 a {
        color: #c8000a
    }
}

.insCardList .Txt {
    padding: 10px 20px 40px
}

.insCardList h3 a {
    display: block;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 400;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.insCardList p {
    max-height: 60px
}

@media (min-width: 1181px) {
    .hImgScale:hover .Img img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.hImgScale .Img {
    overflow: hidden
}

.hImgScale .Img img {
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.arrowBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 15px;
    font-family: "Amiri", serif
}

.prevArrow,
.nextArrow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: transparent
}

@media (min-width: 1181px) {

    .prevArrow:hover,
    .nextArrow:hover {
        color: #b5a77c
    }
}

@media (min-width: 1181px) {
    .hImgScale:hover .Img img {
        -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
        transform: scale(1.03)
    }
}

.hImgScale .Img {
    position: relative;
    overflow: hidden
}

.newIcon {
    position: absolute;
    top: -17px;
    left: 0;
    z-index: 1;
    padding: 6px 30px;
    font-size: 16px;
    color: #fff;
    letter-spacing: 3px
}

.newIcon_green {
    background: #71c7ac
}

.newIcon_brown {
    background: #ed842e
}

.newIcon_pink {
    background: #f48daf
}

.newIcon_blue {
    background: #719dc7
}

.newIcon_navy {
    background: #3f4c6b
}

.newIcon_orange {
    background: #ecaf75
}

.newIcon_gold {
    background: #eab92d
}

.searchArea,
.langArea {
    max-width: 640px;
    min-width: 300px;
    padding: 40px;
    background-color: #fff
}

.searchArea .itemTitleBox,
.langArea .itemTitleBox {
    font-size: 16px;
    font-family: "Amiri", serif;
    text-align: center;
    text-transform: uppercase
}

.searchArea .itemTitleBox::after,
.langArea .itemTitleBox::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    margin: 10px auto;
    background-color: #c8000a
}

.searchArea .wrap,
.langArea .wrap {
    width: 100%
}

.searchBox {
    position: relative;
    border: 1px solid #ececec
}

.searchBox input {
    width: 300px;
    height: 50px;
    line-height: 50px;
    padding: 5px 50px 5px 5px;
    border: none;
    font-size: 14px;
    letter-spacing: 1px
}

.searchBox .searchBtn {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px
}

.langList {
    margin-top: 20px
}

.langList .current a {
    color: #c8000a
}

.langList a {
    display: block;
    padding: 10px;
    text-align: center
}

.mobileFixedBox {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

@media (min-width: 1181px) {
    .mobileFixedBox {
        display: none
    }
}

.mobileFixedBox>.item {
    position: relative;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    font-size: 13px;
    font-family: "Noto Serif TC", serif;
    color: #fff;
    border-top: 1px solid #ab8546;
    background-color: #202020;
    letter-spacing: 1px;
    text-transform: uppercase
}

.mobileFixedBox>.item+.item {
    border-left: 1px solid #ab8546
}

.mobileFixedBox>.item svg {
    fill: #000
}

.mobileFixedBox>.item>a {
    color: #FFF;
    display: block
}

.mobileFixedBox>.item.active .child {
    opacity: 1;
    bottom: 100%;
    transition: bottom .3s 0s, opacity .3s 0s, -webkit-transform 0s 0s;
    transition: transform 0s 0s, bottom .3s 0s, opacity .3s 0s;
    transition: transform 0s 0s, bottom .3s 0s, opacity .3s 0s, -webkit-transform 0s 0s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.mobileFixedBox .child {
    opacity: 0;
    position: absolute;
    width: 0;
    left: 50%;
    background-color: #CCC;
    bottom: 0%;
    transition: bottom .3s 0s, opacity .3s 0s, -webkit-transform 0s .3s;
    transition: transform 0s .3s, bottom .3s 0s, opacity .3s 0s;
    transition: transform 0s .3s, bottom .3s 0s, opacity .3s 0s, -webkit-transform 0s .3s;
    -webkit-transform: translateX(-300vw);
    -ms-transform: translateX(-300vw);
    transform: translateX(-300vw)
}

.mobileFixedBox .child .child-item {
    position: absolute;
    bottom: 10px;
    left: 2px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: #f0831e;
    color: #FFF
}

.mobileFixedBox .child .child-item svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: #fff
}

.mobileFixedBox .child .child-item.line {
    left: auto;
    right: 2px
}

@media (max-width: 480px) {

    .col-2,
    .col-3,
    .col-4,
    .col-5 {
        float: none;
        width: 100%
    }
}

#privacy,
#userTerms {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100vh;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 50px;
    background-color: #fff;
    background-image: url("../images/pageBg.jpg");
    overflow: auto
}

@media (max-width: 960px) {

    #privacy,
    #userTerms {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px
    }
}

#privacy .articleTitle,
#userTerms .articleTitle {
    font-size: 24px;
    text-align: center
}

#privacy .articleTitle::after,
#userTerms .articleTitle::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    margin: 20px auto 40px;
    background-color: currentColor
}

#privacy .moduleClose,
#userTerms .moduleClose {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #131313
}

#privacy .moduleClose::before,
#userTerms .moduleClose::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff);
    background-size: 1px 100%, 100% 1px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}