@charset "UTF-8";
@import url(c62b2f70eb6b4dd190334b431300e3c1.css);

.facArea .Txt {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.listContentArea {
    display: none
}

.featureData {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 400px;
    width: 280px;
    z-index: 1003;
    overflow-y: auto;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .6s linear;
    -o-transition: all .6s linear;
    transition: all .6s linear;
    text-align: center;
    pointer-events: none;
    opacity: 0
}

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

.featureData h3 {
    font-size: 18px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 20px
}

.featureData .btnBox a {
    margin: 5px 0;
    display: inline-block;
    width: 165px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #fff;
    border: 1px solid rgba(234, 234, 234, 0.3);
    letter-spacing: 1px
}

.featureData .dataCloseStyle {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(234, 234, 234, 0.3);
    background-color: transparent;
    cursor: pointer;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    outline: none
}

.featureData .icon {
    position: relative;
    width: 15px;
    height: 1px
}

.featureData .icon:after,
.featureData .icon:before {
    content: "";
    position: absolute;
    left: 0;
    width: 15px;
    height: 2px;
    background-color: #fff;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.featureData .icon:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.featureData .icon:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.outerWrap {
    padding-top: 0
}

.bannerArea {
    background-color: #000
}

.bannerArea .wrap {
    width: 100%
}

.bannerArea .bannerTop {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    -webkit-transition: all .6s linear;
    -o-transition: all .6s linear;
    transition: all .6s linear
}

.bannerArea .bannerTop.hide {
    pointer-events: none;
    opacity: 0
}

.bannerArea .bannerTop.show .title span {
    -webkit-transition: all 1s 0s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1s 0s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1s 0s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea .bannerTop.show .deck {
    -webkit-transition: all 1.3s 0.5s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1.3s 0.5s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1.3s 0.5s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea .bannerTop.show .enTitle {
    -webkit-transition: all 1.6s 0.7s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1.6s 0.7s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1.6s 0.7s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea .bannerTop.show .company {
    -webkit-transition: all 1.9s 0.9s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1.9s 0.9s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1.9s 0.9s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea .bannerTop.show .Txt p {
    -webkit-transition: all 2.2s 1.1s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 2.2s 1.1s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 2.2s 1.1s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea .incense {
    position: absolute;
    top: 25.3%;
    left: 49.8%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none
}

.bannerArea .incense:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100px;
    height: 220px;
    z-index: -1;
    background-repeat: repeat-y;
    background-image: url(../images/smoke.png);
    background-size: 100px auto;
    -webkit-transform: translate(-50%, 0%) perspective(5px) rotate3d(1, 0, 0, -4deg);
    transform: translate(-50%, 0%) perspective(5px) rotate3d(1, 0, 0, -4deg);
    -webkit-animation: smoke 100000s infinite linear;
    animation: smoke 100000s infinite linear;
    opacity: 0.5
}

.bannerArea .incense:after {
    content: '';
    position: absolute;
    top: 23%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    background: #ff7000;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    -webkit-animation: fireShake .1s linear infinite;
    animation: fireShake .1s linear infinite;
    z-index: -1
}

.bannerArea #banner.hide {
    -webkit-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
    opacity: 0
}

.bannerArea #banner .Txt.active .title span {
    -webkit-transition: all 1s 0s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1s 0s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1s 0s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea #banner .Txt.active .deck {
    -webkit-transition: all 1.3s 0.5s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1.3s 0.5s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1.3s 0.5s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea #banner .Txt.active .enTitle {
    -webkit-transition: all 1.6s 0.7s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1.6s 0.7s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1.6s 0.7s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea #banner .Txt.active .company {
    -webkit-transition: all 1.9s 0.9s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1.9s 0.9s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1.9s 0.9s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea #banner .Txt.active p {
    -webkit-transition: all 2.2s 1.1s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 2.2s 1.1s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 2.2s 1.1s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.bannerArea .Img img {
    display: block;
    width: 100%
}

.bannerArea .Txt {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1500px;
    height: 100%;
    font-weight: 400;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    line-height: 1.8
}

.bannerArea .Txt p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    width: 410px;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.bannerArea .deck {
    font-size: 16px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.8);
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.bannerArea .title {
    padding-bottom: 10px;
    font-size: 40px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 8px
}

.bannerArea .title span {
    display: inline-block;
    -webkit-transform: rotate(45deg) translateY(100px);
    -ms-transform: rotate(45deg) translateY(100px);
    transform: rotate(45deg) translateY(100px);
    opacity: 0;
    -webkit-filter: blur(20px);
    filter: blur(20px)
}

.bannerArea .enTitle {
    font-size: 18px;
    font-family: "Unna", sans-serif;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    width: 370px;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.bannerArea .company {
    padding-bottom: 15px;
    font-size: 28px;
    font-family: "Unna", sans-serif;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.9);
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.bannerArea .mark {
    position: absolute;
    bottom: 30px;
    left: 0;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 400;
    font-family: "Unna", sans-serif;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    line-height: 1.5
}

.bannerArea .mark:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ab8b70
}

.bannerArea .selectBox a {
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    background-color: #000;
    border-radius: 50%
}

.bannerArea .selectBox a:hover {
    background-color: #ab8b70
}

.bannerArea .selectBox a:before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 7px);
    width: 14px;
    height: 2px;
    background-color: #fff
}

.bannerArea .selectBox .prev {
    left: 10px
}

.bannerArea .selectBox .prev:after {
    content: "";
    position: absolute;
    top: calc(50%);
    left: 9px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.bannerArea .selectBox .next {
    right: 10px
}

.bannerArea .selectBox .next:after {
    content: "";
    position: absolute;
    top: calc(50%);
    right: 9px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.productArea {
    background-color: #fff;
    position: relative;
    z-index: 1
}

.productArea.show .productList,
.productArea.show .productTitle {
    -webkit-transition: all 0.6s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 0.6s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 0.6s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.productArea.show .productList {
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.productArea.show .selectBox {
    display: none;
    -webkit-transition: all 0.6s 0.6s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 0.6s 0.6s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 0.6s 0.6s cubic-bezier(0, 0, 0.53, 1.03);
    opacity: 1
}

.productArea .wrap {
    position: relative;
    padding: 80px 120px 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.productArea .productTitle {
    margin-bottom: 20px;
    text-align: center;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.productArea .productTitle .subTitle {
    font-size: 12px;
    font-weight: 400;
    font-family: "Unna", sans-serif;
    color: rgba(0, 0, 0, 0.8)
}

.productArea .productTitle .title {
    font-size: 36px;
    font-weight: 500;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    letter-spacing: 2px
}

.productArea .productList {
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0
}

.productArea .Img img {
    display: block;
    width: 100%
}

.productArea .Txt {
    padding: 10px;
    text-align: center
}

.productArea .Txt h3 a {
    font-size: 16px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif
}

.productArea .Txt .subTitle {
    padding: 5px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    font-family: "Unna", sans-serif;
    color: rgba(0, 0, 0, 0.55)
}

.productArea .selectBox {
    opacity: 0
}

.productArea .selectBox a {
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    background-color: #cecece;
    border-radius: 50%
}

.productArea .selectBox a:hover {
    background-color: #ab8b70
}

.productArea .selectBox a:before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 7px);
    width: 14px;
    height: 2px;
    background-color: #fff
}

.productArea .selectBox .prev {
    left: 0
}

.productArea .selectBox .prev:after {
    content: "";
    position: absolute;
    top: calc(50%);
    left: 9px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.productArea .selectBox .next {
    right: 0
}

.productArea .selectBox .next:after {
    content: "";
    position: absolute;
    top: calc(50%);
    right: 9px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.mainArea {
    position: relative;
    z-index: 1;
    padding: 0;
    background-color: #e8e8e8;
    background-repeat: no-repeat;
    background-image: url(../images/deck01.png), url(../images/deck02.png), url(../images/deck03.png), url(../images/deck04.png);
    background-position: 0 140px, 100% 90px, 100% 670px, 0% calc(100% - 300px)
}

.featureArea {
    padding-top: 90px
}

.featureArea .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.featureArea .leftBox {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr
}

.featureArea .leftBox.show .textEditor .title,
.featureArea .leftBox.show .textEditor .Txt,
.featureArea .leftBox.show .titleBox {
    -webkit-transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
}

.featureArea .leftBox.show .textEditor .title {
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.featureArea .leftBox.show .textEditor .Txt {
    -webkit-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.featureArea .leftBox .textEditor .title,
.featureArea .leftBox .textEditor .Txt,
.featureArea .leftBox .titleBox {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.featureArea .rightBox {
    padding-bottom: 140px;
    position: relative;
    max-width: 1100px;
    width: 75%;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0
}

.featureArea .rightBox.show {
    -webkit-transition: all 0.8s 1.2s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 0.8s 1.2s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 0.8s 1.2s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    opacity: 1
}

.featureArea .rightBox .featureList {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-right: 427px;
    padding-right: 38.39%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.featureArea .rightBox li {
    position: relative;
    margin: 5px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: calc(33% - 10px)
}

@media (min-width:1181px) {
    .featureArea .rightBox li .Txt {
        pointer-events: visible;
        top: 20px;
        opacity: 0
    }

    .featureArea .rightBox li:hover .Txt {
        top: 0;
        opacity: 1
    }
}

.featureArea .rightBox li:before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 25px;
    bottom: 25px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1
}

.featureArea .rightBox li:first-of-type {
    width: calc(34% - 20px)
}

/* .featureArea .rightBox li:first-of-type:before {
    background-image: url(../images/text01.png)
} */

.featureArea .rightBox li:nth-of-type(2) {
    width: 66%
}

/* .featureArea .rightBox li:nth-of-type(2):before {
    background-image: url(../images/text02.png)
} */

.featureArea .rightBox li:nth-of-type(3) {
    width: 66%
}

/* .featureArea .rightBox li:nth-of-type(3):before {
    background-image: url(../images/text03.png)
} */

.featureArea .rightBox li:nth-of-type(4) {
    width: calc(34% - 20px)
}

/* .featureArea .rightBox li:nth-of-type(4):before {
    background-image: url(../images/text04.png)
} */

.featureArea .rightBox li:nth-of-type(5) {
    width: 100%
}

/* .featureArea .rightBox li:nth-of-type(5):before {
    background-image: url(../images/text05.png)
} */

.featureArea .rightBox li:nth-of-type(6) {
    position: absolute;
    top: 0;
    right: 5px;
    width: calc(38.39% - 13px);
    height: calc(100% - 10px)
}

/* .featureArea .rightBox li:nth-of-type(6):before {
    background-image: url(../images/text06.png)
} */

.featureArea .rightBox .item {
    overflow: hidden;
    position: relative;
    height: 100%
}

.featureArea .rightBox .Img {
    background-color: #000;
    height: 100%
}

.featureArea .rightBox .Img img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.featureArea .rightBox .Txt {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
    opacity: 0;
    z-index: 1;
    pointer-events: none
}

.featureArea .rightBox h3 {
    font-size: 18px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    letter-spacing: 3px;
    color: #fff
}

.featureArea .Txt {
    font-size: 14px;
    font-weight: 400;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #000;
    letter-spacing: 1px;
    line-height: 2.5
}

.featureArea .moreBox {
    margin-right: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.featureArea .moreBox .title {
    font-size: 23px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #000;
    letter-spacing: 2px
}

.featureArea .btn {
    margin-top: 20px
}

.featureArea .btn a {
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.7)
}

.featureArea .btn a:hover {
    color: #fff;
    background-color: #ab8b70;
    border-color: transparent
}

.featureArea .btnBox a {
    margin: 5px 0;
    display: inline-block;
    width: 165px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #fff;
    border: 1px solid rgba(234, 234, 234, 0.3);
    letter-spacing: 1px
}

.featureArea .btnBox a:hover {
    background-color: #ab8b70
}

.facArea.show li {
    -webkit-transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    opacity: 1
}

.facArea .wrap {
    width: 100%
}

.facArea li {
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
    padding: 0
}

.facArea .item {
    position: relative;
    overflow: hidden
}

.facArea .Img {
    background-color: #000;
    overflow: hidden
}

.facArea .Img img {
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.facArea .Txt {
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 30px 20px;
    text-align: center
}

.facArea .Txt p {
    display: block;
    width: 100%;
    height: 50px;
    font-size: 14px;
    color: #fff;
    line-height: 1.8;
    letter-spacing: 1px;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.facArea h3 a {
    display: inline-block;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #fff
}

.facArea h3 .title {
    font-size: 35px;
    font-weight: 600
}

.facArea h3 .subTitle {
    position: relative;
    padding: 5px 0 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
    font-family: "Unna", sans-serif
}

.facArea h3 .subTitle:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5)
}

@media (min-width:1181px) {
    .facArea li {
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }

    .facArea li:first-of-type {
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s
    }

    .facArea li:nth-of-type(2) {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s
    }

    .facArea li:nth-of-type(3) {
        -webkit-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        transition-delay: 0.4s
    }

    .facArea li:nth-of-type(4) {
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s
    }

    .facArea li:nth-of-type(5) {
        -webkit-transition-delay: 0.8s;
        -o-transition-delay: 0.8s;
        transition-delay: 0.8s
    }

    .facArea .item .Img img {
        opacity: 1
    }

    .facArea .item .Txt p {
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }

    .facArea .item:hover .Img img {
        opacity: 0.7
    }

    .facArea .item:hover .Txt p {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        opacity: 1
    }
}

.aboutArea {
    padding-top: 135px
}

.aboutArea.show .btnBox,
.aboutArea.show .Img,
.aboutArea.show .titleBox,
.aboutArea.show .Txt .title,
.aboutArea.show .Txt p {
    -webkit-transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    -o-transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    transition: all 1s cubic-bezier(0, 0, 0.53, 1.03);
    -webkit-transform: translat(0px);
    -ms-transform: translat(0px);
    transform: translat(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1
}

.aboutArea.show .Txt .title {
    -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s
}

.aboutArea.show .Txt p {
    -webkit-transition-delay: .8s;
    -o-transition-delay: .8s;
    transition-delay: .8s
}

.aboutArea.show .btnBox {
    -webkit-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.aboutArea.show .Img {
    -webkit-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s
}

.aboutArea .btnBox,
.aboutArea .titleBox,
.aboutArea .Txt .title,
.aboutArea .Txt p {
    -webkit-transform: translat(20px);
    -ms-transform: translat(20px);
    transform: translat(20px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0
}

.aboutArea .Img {
    -webkit-transform: translat(20px);
    -ms-transform: translat(20px);
    transform: translat(20px);
    opacity: 0
}

.aboutArea .wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.aboutArea .leftBox {
    padding-left: 10%;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr
}

.aboutArea .rightBox {
    padding-bottom: 155px;
    width: 67%
}

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

.aboutArea .Txt {
    font-size: 14px;
    font-weight: 400;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #000;
    letter-spacing: 1px;
    line-height: 2.5
}

.aboutArea .Txt .title {
    margin-right: 20px;
    font-size: 23px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #000;
    letter-spacing: 2px
}

.aboutArea .btnBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 40px;
    margin-right: 20px
}

.aboutArea .btnBox a {
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    color: #000
}

.aboutArea .btnBox a:hover {
    color: #b89868
}

.aboutArea .btnBox a:hover span {
    color: #fff;
    background-color: #b89868;
    border-color: transparent
}

.aboutArea .btnBox span {
    margin-bottom: 10px;
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "Noto Serif TC", "微軟正黑體", sans-serif;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.7);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

@media (max-width:1550px) {
    .bannerArea .Txt {
        width: 100%;
        padding: 0 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .bannerArea .mark {
        left: 40px
    }

    .aboutArea .wrap,
    .bannerArea .wrap,
    .facArea .wrap {
        padding: 0
    }

    .productArea .selectBox .prev {
        left: 20px
    }

    .productArea .selectBox .next {
        right: 20px
    }
}

@media (max-width:1366px) {
    .featureArea .rightBox {
        width: 70%
    }

    .featureArea .rightBox .featureList {
        height: 600px
    }

    .featureArea .btnBox a {
        width: 120px
    }
}

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

    .bannerArea {
        margin-top: 0
    }

    .bannerArea .bannerTop {
        display: none
    }

    .featureArea {
        padding: 50px 0
    }

    .featureArea .wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .featureArea .leftBox {
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        padding: 20px
    }

    .featureArea .rightBox {
        max-width: 1112px;
        width: 100%;
        margin: 0 auto;
        padding: 0
    }

    .featureArea .rightBox.show {
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s
    }

    .featureArea .rightBox .featureList {
        height: auto
    }

    .featureArea .titleBox .title {
        padding: 10px 35px;
        margin-right: 0;
        margin-bottom: 25px
    }

    .featureArea .titleBox .subTitle {
        margin-bottom: 10px;
        width: auto
    }

    .featureArea .titleBox .insDeckLine:before {
        top: 50%;
        left: -140px;
        height: 1px;
        width: 125px;
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0)
    }

    .featureArea .titleBox .deckLine span {
        margin: 0;
        margin-left: 10px;
        width: 100%;
        height: 1px
    }

    .featureArea .btn {
        margin-top: 0;
        margin-left: 20px
    }

    .aboutArea .leftBox {
        padding-left: 50px
    }
}

@media (max-width:960px) {
    .bannerArea .deck {
        font-size: 14px
    }

    .bannerArea .title {
        font-size: 26px;
        letter-spacing: 6px
    }

    .bannerArea .enTitle {
        font-size: 16px
    }

    .bannerArea .company {
        font-size: 22px;
        letter-spacing: 2px
    }

    .bannerArea .Txt p {
        font-size: 12px;
        width: 40%
    }

    .featureArea .rightBox .featureList {
        height: 600px
    }

    .featureArea .rightBox li:first-of-type,
    .featureArea .rightBox li:nth-of-type(4) {
        width: 160px
    }

    .featureArea .rightBox li:nth-of-type(2),
    .featureArea .rightBox li:nth-of-type(3) {
        width: calc(100% - 180px)
    }

    .aboutArea {
        padding-top: 50px
    }

    .aboutArea .wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .aboutArea .leftBox {
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb
    }

    .aboutArea .rightBox {
        padding: 0;
        width: 100%
    }

    .aboutArea .titleBox .title {
        padding: 10px 35px;
        margin-right: 0;
        margin-bottom: 25px
    }

    .aboutArea .titleBox .subTitle {
        margin-bottom: 10px;
        width: auto
    }

    .aboutArea .titleBox .insDeckLine:before {
        top: 50%;
        left: -140px;
        height: 1px;
        width: 125px;
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0)
    }

    .aboutArea .titleBox .deckLine span {
        margin: 0;
        margin-left: 10px;
        width: 100%;
        height: 1px
    }

    .aboutArea .btnBox {
        margin: 20px 0 20px
    }

    .aboutArea .btnBox a {
        margin: 0;
        padding: 0;
        padding-right: 20px
    }

    .aboutArea .btnBox span {
        margin-bottom: 0;
        margin-right: 10px
    }
}

@media (max-width:767px) {
    .bannerArea .deck {
        font-size: 12px;
        letter-spacing: 2px
    }

    .bannerArea .title {
        font-size: 20px;
        letter-spacing: 2px
    }

    .bannerArea .enTitle {
        font-size: 14px;
        line-height: 1.5
    }

    .bannerArea .company {
        font-size: 16px
    }

    .bannerArea .Txt p {
        display: none
    }

    .featureArea .rightBox {
        max-width: 675px;
        margin: 0 auto
    }

    .featureArea .rightBox .featureList {
        padding-right: 0;
        height: auto
    }

    .featureArea .rightBox li:first-of-type {
        width: 211px
    }

    .featureArea .rightBox li:nth-of-type(2) {
        position: relative;
        width: calc(100% - 231px)
    }

    .featureArea .rightBox li:nth-of-type(3) {
        position: relative;
        width: calc(100% - 231px)
    }

    .featureArea .rightBox li:nth-of-type(4) {
        position: relative;
        width: 211px
    }

    .featureArea .rightBox li:nth-of-type(5) {
        position: relative;
        width: 100%
    }

    .featureArea .rightBox li:nth-of-type(6) {
        position: relative;
        right: 0;
        width: 100%
    }

    .featureArea .rightBox li:nth-of-type(6) .Img img {
        width: 100%;
        height: auto
    }
}

@media (max-width:640px) {
    .productArea .wrap {
        padding: 45px 10px 40px
    }

    .aboutArea .leftBox {
        padding: 0 0px 0 20px
    }
}

@media (max-width:580px) {
    .bannerArea .title {
        padding-bottom: 5px
    }

    .bannerArea .enTitle {
        display: none
    }

    .bannerArea .mark {
        bottom: 20px;
        font-size: 12px
    }

    .featureArea .rightBox li {
        height: 180px
    }

    .featureArea .rightBox li:first-of-type,
    .featureArea .rightBox li:nth-of-type(4) {
        width: 170px
    }

    .featureArea .rightBox li:nth-of-type(2),
    .featureArea .rightBox li:nth-of-type(3) {
        width: calc(100% - 190px)
    }
}

@media (max-width:440px) {
    .bannerArea .deck {
        font-size: 12px
    }

    .bannerArea .title {
        font-size: 16px
    }

    .bannerArea .company {
        display: none
    }

    .bannerArea .mark {
        display: none
    }

    .featureArea .rightBox li {
        height: 130px
    }

    .featureArea .rightBox li:first-of-type,
    .featureArea .rightBox li:nth-of-type(4) {
        width: 120px
    }

    .featureArea .rightBox li:nth-of-type(2),
    .featureArea .rightBox li:nth-of-type(3) {
        width: calc(100% - 140px)
    }
}

@media (max-width:320px) {
    .productArea .selectBox .prev {
        left: 10px
    }

    .productArea .selectBox .next {
        right: 10px
    }

    .productArea .wrap {
        padding: 35px 50px 20px
    }
}

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

.flex>* {
    display: block;
}

.flex>.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

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

.dir-left {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.dir-right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: end;
}

.dir-top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.dir-bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: end;
}

.main-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.main-right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.main-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

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

.cross-top {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.cross-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.cross-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.cross-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.cross-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.box-mean>*,
.box-first>*,
.box-last>*,
.box-justify>* {
    width: 0;
    height: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

.box-first>:first-child,
.box-last>:last-child,
.box-justify>:first-child,
.box-justify>:last-child {
    width: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.dir-top.box:mean>*,
.dir-top.box-first>*,
.dir-top.box-last>*,
.dir-top.box-justify>*,
.dir-bottom.box-mean>*,
.dir-bottom.box-first>*,
.dir-bottom.box-last>*,
.dir-bottom.box-justify>* {
    width1: auto;
    height: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

.dir-top.box-first>:first-child,
.dir-top.box-last>:last-child,
.dir-top.box-justify>:first-child,
.dir-top.box-justify>:last-child,
.dir-bottom.box-first>:first-child,
.dir-bottom.box-last>:last-child,
.dir-bottom.box-justify>:first-child .dir-bottom.box-justify>:last-child {
    height: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.flex-box-0 {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.flex-box-1 {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

.flex-box-2 {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -webkit-flex-shrink: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2;
}

.flex-box-3 {
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    -webkit-flex-shrink: 3;
    -ms-flex-negative: 3;
    flex-shrink: 3;
}

.flex-box-4 {
    -webkit-box-flex: 4;
    -webkit-flex-grow: 4;
    -ms-flex-positive: 4;
    flex-grow: 4;
    -webkit-flex-shrink: 4;
    -ms-flex-negative: 4;
    flex-shrink: 4;
}

.flex-box-5 {
    -webkit-box-flex: 5;
    -webkit-flex-grow: 5;
    -ms-flex-positive: 5;
    flex-grow: 5;
    -webkit-flex-shrink: 5;
    -ms-flex-negative: 5;
    flex-shrink: 5;
}

.flex-box-6 {
    -webkit-box-flex: 6;
    -webkit-flex-grow: 6;
    -ms-flex-positive: 6;
    flex-grow: 6;
    -webkit-flex-shrink: 6;
    -ms-flex-negative: 6;
    flex-shrink: 6;
}

.flex-box-7 {
    -webkit-box-flex: 7;
    -webkit-flex-grow: 7;
    -ms-flex-positive: 7;
    flex-grow: 7;
    -webkit-flex-shrink: 7;
    -ms-flex-negative: 7;
    flex-shrink: 7;
}

.flex-box-8 {
    -webkit-box-flex: 8;
    -webkit-flex-grow: 8;
    -ms-flex-positive: 8;
    flex-grow: 8;
    -webkit-flex-shrink: 8;
    -ms-flex-negative: 8;
    flex-shrink: 8;
}

.flex-box-9 {
    -webkit-box-flex: 9;
    -webkit-flex-grow: 9;
    -ms-flex-positive: 9;
    flex-grow: 9;
    -webkit-flex-shrink: 9;
    -ms-flex-negative: 9;
    flex-shrink: 9;
}

.flex-box-10 {
    -webkit-box-flex: 10;
    -webkit-flex-grow: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    -webkit-flex-shrink: 10;
    -ms-flex-negative: 10;
    flex-shrink: 10;
}

.home1 {
    color: #fff;
    background: url(../images/bg3.png) center center no-repeat;
    background-size: cover;
    padding: 80px 0;
}

.home1 a {
    color: #fff;
}

.home1 .d1 {
    padding: 50px 60px;
    position: relative;
    overflow: hidden;
    width: calc(60% - 10px);
    box-sizing: border-box;
}

.home1 .d1:before {
    content: "";
    background: url(../images/bg2.jpg) center center no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(1.1);
    transform-origin: left bottom;
    transition: all 3s ease-out 0s;
    background-size: cover;
}

.home1.showd .d1:before {
    transform: none;
}

.home1 .d1 .inner {
    position: relative;
}

.home1 .d1 .list {
    margin-top: 45px;
}

.home1 .d1 .item {
    margin-top: 15px;
    line-height: 1.2;
}

.home1 .d1 .item a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.home1 .d1 .item span {
    margin-left: 15px;
}

.home1 .d2 {
    width: calc(40% - 10px);
    background: #6b9d96;
    padding: 35px 60px;
    box-sizing: border-box;
}

.home1 .d2 .t1 {
    margin-top: 30px;
    font-size: 18px;
    line-height: 1;
}

.home1 .d2 .t1 strong {
    font-size: 56px;
    font-family: Impact;
    margin-left: 10px;
}

.home1 .d2 .t1 .item {
    margin-left: 40px;
}

.home1 .d2 .t1 .item:first-child {
    margin-left: 0;
}

.home1 .d2 .t2 {
    margin-top: 20px;
}

.home1 .d2 .t3 .item {
    margin-top: 10px;
}

.home1 .d2 .t3 .item img {
    margin-right: 20px;
}

.home1 .d2 .line {
    margin: 25px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.home1 .d3 {
    background: #6a94b8;
    padding: 30px 60px;
    margin-top: 20px;
    width: calc(60% - 10px);
    box-sizing: border-box;
}

.home1 .d3 .text {
    margin-top: 15px;
}

.home1 .d3 .text .list .item {
    margin-top: 18px;
    line-height: 1;
}

.home1 .d4 {
    width: calc(40% - 10px);
    margin-top: 20px;
    box-sizing: border-box;
}

.home1 .d4 .list {
    height: 100%;
}

.home1 .d4 .item {
    position: relative;
}

.home1 .d4 .item .ico {
    position: relative;
    height: 144px;
    line-height: 144px;
}

.home1 .d4 .item .ico:before {
    content: "";
    background: url(../images/img3.png) center center no-repeat;
    width: 63px;
    height: 144px;
    opacity: 0.1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -72px 0 0 -31.5px;
    transform-origin: center bottom;
}

.home1 .d4 .item:hover .ico:before {
    animation: fire3 1.2s ease-out 0s 1 both;
}

@keyframes fire3 {
    0% {
        transform: scale(1, 1);
        opacity: 0.1;
    }

    40% {
        transform: scale(1.25, 1.07);
        opacity: 0.2;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0.1;
    }
}

.home1 .d4 .item .ico img {
    max-width: 70px;
}

.home1 .d4 .item:hover .ico img {
    transform: rotateY(360deg);
    transition: all 0.5s ease-out 0s;
}

.home1 .d4 .item:nth-child(1) {
    background: #5b8d86;
}

.home1 .d4 .item:nth-child(2) {
    background: #8aacc9;
}

.home1 .d4 .item:nth-child(3) {
    background: #9c806a;
}

.home1 .d4 .item:nth-child(4) {
    background: #a42323;
}

.home1 .d4 .item .h {
    font-size: 18px;
}

@media screen and (max-width:768px) {
    .home1 .d1 {
        padding: 20px;
        width: 100%;
    }

    .home1 .d1 .list {
        margin-top: 10px;
    }

    .home1 .d1 .item {
        margin-top: 10px;
    }

    .home1 .d1 .item:nth-child(3)~.item {
        display: none;
    }

    .home1 .d2 {
        margin-bottom: 20px;
        padding: 20px;
        width: 100%;
        order: -1;
    }

    .home1 .d2 .t1 {
        margin-top: 10px;
    }

    .home1 .d2 .t1 strong {
        font-size: 40px;
    }

    .home1 .d2 .t3 .item {
        position: relative;
        padding-left: 30px;
    }

    .home1 .d2 .t3 .item img {
        position: absolute;
        left: 0;
        top: 0;
        margin-right: 0;
    }

    .home1 .d3 {
        padding: 20px;
        width: 100%;
    }

    .home1 .d3 .text .list .item a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .home1 .d4 {
        width: 100%;
    }

    .home1 .d4 .item {
        padding-bottom: 10px;
    }

    .home1 .d4 .item .ico img {
        max-width: 40px;
    }
}

.wrap-w {
    max-width: 1440px;
    margin: auto;
    position: relative;
    height: 100%;
}

@media screen and (max-width:1500px) {
    .wrap-w {
        width: auto;
        margin-left: 30px;
        margin-right: 30px;
    }
}
.h-1 {
    font-size: 36px;
}