con-cover,
body,
body>.outter-view,
html {
    width: 100%;
    display: block
}
@font-face {
    font-family: 'Modern No. 20';
    src: url('/font/Modern No. 20.eot');
    src: url('/font/Modern No. 20.eot?#iefix') format('embedded-opentype'), url('/font/Modern No. 20.ttf') format('truetype')
}
body,
html {
    position: relative;
    margin: 0;
    padding: 0;
    height: auto;
    overflow: visible
}
body {
    overflow: auto!important
}
.cssimg {
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(/img/transparent_1px.png);
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
    opacity: 0
}
.cssimg.active {
    opacity: 1
}
.css100ms {
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -o-transition: .1s;
    transition: .1s
}
.css300ms {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}
.css500ms {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}
.css600ms {
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    transition: .6s
}
.css700ms {
    -webkit-transition: .7s;
    -moz-transition: .7s;
    -o-transition: .7s;
    transition: .7s
}
.css800ms {
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
    transition: .8s
}
.css900ms {
    -webkit-transition: .9s;
    -moz-transition: .9s;
    -o-transition: .9s;
    transition: .9s
}
.css1000ms {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}
.css1200ms {
    -webkit-transition: 1.2s;
    -moz-transition: 1.2s;
    -o-transition: 1.2s;
    transition: 1.2s
}
.cssimg.cssbg {
    background-size: cover
}
.con-cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}
body>.outter-view {
    position: relative;
    text-align: center;
    height: auto;
    overflow: hidden;
    margin-bottom: -1px;
    transition: .3s
}
body>.outter-view>.con {
    overflow: hidden;
    height: 100%
}
body>.outter-view.footer {
    background-color: #000;
    height: 160px
}
body>.outter-view.footer .con {
    width: 975px;
    padding-top: 10px;
    box-sizing: border-box
}
body>.outter-view.footer .con::before {
    width: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    content: ' ';
    height: 100%
}
body>.outter-view.footer .con .logo {
    width: 64px;
    position: relative;
    display: inline-block;
    vertical-align: top
}
body>.outter-view.footer .con .logo .after {
    padding-bottom: 199.0384615384615%;
    width: 100%;
    position: relative;
    display: inline-block
}
body>.outter-view.footer .con .logo .after.active {
    background-image: url(/img/logo-cht-white.png);
    opacity: 1
}
body>.outter-view.footer .con .text {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: 110px;
    margin-left: 25px;
    float: right
}
body>.outter-view.footer .con .text .col {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 75px;
    text-align: left;
    height: 100%
}
body>.outter-view.footer .con .text .col::before {
    position: absolute;
    height: 100%;
    display: inline-block;
    width: 1px;
    background-color: rgba(255, 255, 255, .2);
    content: ' ';
    margin-left: -50px
}
body>.outter-view.footer .con .text .col .name {
    position: relative;
    display: block;
    vertical-align: top;
    color: #a12c42;
    font-size: 28px;
    font-family: "Times New Roman";
    text-align: left
}
body>.outter-view.footer .con .text .col .list {
    position: relative;
    display: block;
    vertical-align: top;
    margin-top: 5px;
    text-align: left
}
body>.outter-view.footer .con .text .col .list .item {
    position: relative;
    display: block;
    font-family: '微軟正黑體';
    font-size: 12px;
    line-height: 22px;
    color: #fff;
    opacity: 1
}
body>.outter-view.copyright,
body>.outter-view.main>.con>.row .header {
    font-family: "微軟正黑體", "Microsoft JhengHei"
}
body>.outter-view.footer .con .text .col.content .list .item {
    line-height: 18px
}
body>.outter-view.footer .con .text .col.content .list .item a {
    text-decoration: inherit;
    color: inherit
}
body>.outter-view.footer a {
    text-decoration: inherit;
    color: inherit
}
body>.outter-view.footer .con .text .col .list .item.dot::before,
body>.outter-view.footer .con .text .col .list .item.global::before,
body>.outter-view.footer .con .text .col .list .item.home::before,
body>.outter-view.footer .con .text .col .list .item.mail::before {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    content: ' ';
    position: relative;
    display: inline-block;
    margin: 0 5px;
    background-image: url(/img/transparent_1px.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0;
    transition: opacity .5s
}
body.about>.outter-view.main>.con>.row.ourmission-cont,
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .icon.active,
body.contact>.outter-view.main>.con>.row.text-area.active,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel.active,
body>.outter-view.footer .con .text .col .list .item.active::before {
    opacity: 1
}
body>.outter-view.footer .con .text .col .list .item.active.home::before {
    background-image: url(/img/footer_home.png)
}
body>.outter-view.footer .con .text .col .list .item.active.mail::before {
    background-image: url(/img/footer_mail.png)
}
body>.outter-view.footer .con .text .col .list .item.active.global::before {
    background-image: url(/img/footer_global.png)
}
body>.outter-view.footer .con .text .col .list .item.active.dot::before {
    background-image: url(/img/footer_dot.png)
}
body>.outter-view.copyright {
    background-color: #2d2d2d;
    height: 40px;
    font-size: 10px;
    text-align: center;
    font-weight: 600;
    color: rgba(255, 255, 255, .18);
    line-height: 40px;
    word-spacing: 2px
}
body>.outter-view.main>.con {
    width: 100%;
    max-width: 10000px;
    text-align: center;
    font-size: 0;
    margin: 0;
    left: 0
}
body>.outter-view.main>.con>.row {
    display: inline-block;
    max-width: 1366px;
    width: 100%;
    position: relative;
    transition: .5s
}
body>.outter-view.main>.con>.row.full {
    max-width: 10000px
}
body>.outter-view.main>.con>.row.text-area {
    padding-top: 20px;
    padding-bottom: 30px
}
body>.outter-view.main>.con>.row .header {
    font-weight: 400;
    font-size: 40px;
    border-bottom: 3px solid #a82252;
    display: inline-block
}
body>.outter-view.main>.con>.row .header::after {
    position: relative;
    bottom: -4px;
    border-bottom: 1px solid #a82252;
    display: block;
    content: ' ';
    width: 100%;
    height: 1px;
    left: 0
}
@media screen and (min-width: 1280px) {
    body>.outter-view.nav,
    body>.outter-view.nav:hover {
        background-color: rgba(255, 255, 255, 1);
        border-bottom: 1px solid rgba(235, 214, 225, 1)
    }
    body>.outter-view .mobile {
        display: none
    }
    body>.outter-view>.con {
        position: relative;
        left: 50%;
        width: 100%;
        max-width: 1280px;
        min-width: 1200px;
        margin-left: -640px;
        display: block
    }
    body>.outter-view.nav {
        height: 90px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        opacity: 1
    }
    body>.outter-view.main {
        background-color: transparent;
        height: 100%;
        margin-top: 90px
    }
    body>.outter-view.nav .com {
        font-size: 0
    }
    body>.outter-view.nav .con::before {
        position: relative;
        vertical-align: middle;
        width: 0;
        height: 100%;
        content: ' ';
        display: inline-block
    }
    body>.outter-view.nav .nav-logo {
        position: relative;
        width: 69px;
        display: inline-block;
        vertical-align: middle;
        float: left;
        margin-top: 10.5px;
        margin-left: 25px
    }
    body>.outter-view.nav .nav-logo .after {
        padding-bottom: 100%;
        position: relative;
        display: inline-block;
        width: 100%
    }
    body>.outter-view.nav .nav-logo .after.active {
        background-image: url(/img/nav-logo.png);
        opacity: 1
    }
    body>.outter-view.nav .link {
        position: relative;
        display: inline-block;
        font-size: 0;
        width: auto;
        float: right;
        height: 100%
    }
    body>.outter-view.nav .link::before {
        position: relative;
        display: inline-block;
        width: 0;
        height: 100%;
        content: ' ';
        vertical-align: middle
    }
    body>.outter-view.nav .link a {
        position: relative;
        text-decoration: none;
        margin: 0 50px;
        display: inline-block
    }
    body>.outter-view.nav .link .entry {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        border-bottom: 3px solid transparent
    }
    body>.outter-view.nav .link .entry.active,
    body>.outter-view.nav .link .entry:hover {
        border-bottom: 3px solid #da1864
    }
    body>.outter-view.nav .link .entry .cht {
        position: relative;
        display: block;
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 600;
        font-size: 16px;
        color: #000
    }
    body>.outter-view.nav .link .entry .eng {
        position: relative;
        display: block;
        font-family: "Times New Roman";
        font-weight: 700;
        font-size: 10.42px;
        line-height: 15px;
        color: #c94281
    }
}
@media screen and (max-width: 1279px) {
    body>.outter-view .desktop {
        display: none
    }
    body>.outter-view.nav {
        position: fixed;
        z-index: 10000;
        width: 390px;
        margin-left: -390px;
        background-color: #000;
        height: 100%;
        transition: .3s
    }
    body>.outter-view.nav.active {
        margin-left: 0
    }
    body>.outter-view.nav-open {
        margin-left: 389px
    }
    body>.outter-view.nav .link {
        position: relative;
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 20px
    }
    body>.outter-view.nav .link a {
        position: relative;
        display: block;
        text-decoration: none
    }
    body>.outter-view.nav .link .entry {
        position: relative;
        margin-top: 25px;
        margin-bottom: 10px;
        border-right: 9px solid transparent
    }
    body>.outter-view.nav .link .entry.active {
        border-right: 9px solid #dd287d
    }
    body>.outter-view.nav .link .entry .cht {
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 400;
        font-size: 36px;
        line-height: 36px;
        color: #fff
    }
    body>.outter-view.nav .link .entry .eng {
        font-family: "Times New Roman";
        font-size: 24px;
        line-height: 36px;
        color: #c94281
    }
    body>.outter-view.footer {
        height: auto
    }
    body>.outter-view.footer .con {
        text-align: left;
        width: 100%
    }
    body>.outter-view.footer .con .text {
        float: left;
        margin-left: 0;
        height: auto;
        padding: 10px 30px;
        box-sizing: border-box
    }
    body>.outter-view.footer .con .text .col {
        margin: 0;
        width: 100%;
        padding: 10px 0
    }
    body>.outter-view.footer .con .text .col::before {
        content: '';
        display: none
    }
    body>.outter-view.footer .con .text .col .list .item {
        font-family: 'Century Gothic', DFHeiStd-W3;
        font-size: 22px;
        line-height: 40px
    }
    body>.outter-view.copyright {
        font-size: 22px;
        line-height: 90px;
        height: 90px;
        font-family: DFHeiStd-W3, Arial
    }
    body>.outter-view.navFloat {
        position: fixed;
        width: 16.25%;
        max-width: 130px;
        height: auto;
        top: 4%;
        left: 2%;
        cursor: pointer;
        display: block;
        z-index: 1000
    }
    body>.outter-view.navFloat .con {
        padding-bottom: 100%;
        position: relative;
        display: block;
        width: 100%
    }
    body>.outter-view.navFloat.active {
        background-image: url(/img/nav-btn.png);
        opacity: 1
    }
}
@media screen and (max-width: 600px) {
    body>.outter-view.footer .con .text .col .list .item {
        font-size: 16px;
        line-height: 30px
    }
}
@media screen and (max-width: 480px) {
    body>.outter-view.nav {
        width: 200px;
        margin-left: -200px
    }
    body>.outter-view.nav-open {
        margin-left: 199px
    }
    body>.outter-view.nav .link .entry .cht {
        font-size: 20px
    }
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content {
    position: relative;
    display: block;
    margin: 0 auto
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back,
body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front,
body.about>.outter-view.main>.con>.row.ourmission-cont .content .canvas {
    display: none
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .icon {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    background-image: url(/img/transparent_1px.png)
}
body.about>.outter-view.main>.con>.row.aboutus-cont .cont {
    font-family: "微軟正黑體", "Microsoft JhengHei";
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    display: block
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-creative .icon.active {
    background-image: url(/img/icon-creative.png)
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-design .icon.active {
    background-image: url(/img/icon-design.png)
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-content .icon.active {
    background-image: url(/img/icon-content.png)
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-execution .icon.active {
    background-image: url(/img/icon-execution.png)
}
body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-technology .icon.active {
    background-image: url(/img/icon-technology.png)
}
@media screen and (min-width: 1280px) {
    body.about>.outter-view.main>.con>.row.full.aboutus {
        padding-bottom: 22.05882352941176%
    }
    body.about>.outter-view.main>.con>.row.full.aboutus.active {
        background-image: url(/img/aboutus.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.full.ourmission {
        padding-bottom: 10.58823529411765%
    }
    body.about>.outter-view.main>.con>.row.full.ourmission.active {
        background-image: url(/img/ourmission.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element {
        transition: .5s;
        position: absolute;
        top: 0;
        left: 0
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-creative {
        top: 7%;
        left: 3%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-design {
        top: 12%;
        left: 89%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-content {
        top: 38%;
        left: -4%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-execution {
        top: 55%;
        left: 89%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-technology {
        top: 69%;
        left: 2%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content {
        height: 460px;
        width: 800px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .icon {
        position: relative;
        display: inline-block;
        width: 84px;
        height: 84px;
        background-image: url(/img/transparent_1px.png)
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .icon::after {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 5px;
        margin-top: 11px;
        content: ' ';
        height: 62px;
        width: 11px;
        background-image: url(/img/transparent_1px.png)
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .icon.active::after {
        background-image: url(/img/icon-left.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.right .icon::after {
        position: absolute;
        top: 0;
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 5px;
        margin-top: 11px;
        content: ' ';
        height: 62px;
        width: 11px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.right .icon.active::after {
        background-image: url(/img/icon-right.png);
        opacity: 1
    }
    @keyframes shake {
        0%, 50% {
            margin-top: 30px;
            margin-left: -210px;
            opacity: 1
        }
        52% {
            margin-top: 25px;
            margin-left: -205px;
            opacity: 1
        }
        52.5% {
            margin-top: 35px;
            margin-left: -215px;
            opacity: 1
        }
        53% {
            margin-top: 28px;
            margin-left: -213px;
            opacity: 1
        }
        100%,
        55% {
            margin-top: 30px;
            margin-left: -210px;
            opacity: 1
        }
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back {
        width: 420px;
        height: 395px;
        margin-left: -210px;
        left: 50%;
        position: absolute;
        display: block;
        margin-top: 30px;
        animation-name: shake;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back.active {
        background-image: url(/img/icon-main.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back::before {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        content: ' ';
        width: 0;
        height: 100%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back .text {
        position: relative;
        vertical-align: middle;
        width: auto;
        height: auto;
        display: inline-block;
        z-index: 100;
        margin-top: 20px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back .first {
        text-align: center;
        color: #fff
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back .first .eng {
        font-family: 'Modern No. 20';
        font-size: 63px;
        display: inline;
        font-style: italic
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back .first .cht {
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 500;
        font-size: 30px;
        display: inline;
        margin-left: 10px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.back .second {
        font-family: 'Modern No. 20';
        font-size: 66px;
        display: inline;
        color: #fff;
        font-style: italic;
        line-height: 30px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front {
        width: 420px;
        height: 395px;
        margin-left: -210px;
        left: 50%;
        position: absolute;
        display: block;
        margin-top: 30px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front.active {
        background-image: url(/img/icon-line.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front .point.p01 {
        width: 15px;
        height: 15px;
        position: absolute;
        top: 42%;
        left: 55%;
        z-index: 500
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front .point.p01.active {
        background-image: url(/img/icon-point01.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front .point.p02 {
        width: 17px;
        height: 18px;
        position: absolute;
        top: 69%;
        left: 33%;
        z-index: 500
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .bg.front .point.p02.active {
        background-image: url(/img/icon-point02.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 20px;
        text-align: left;
        width: 180px;
        margin-top: 4px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.right .text {
        left: auto;
        margin-left: 0;
        right: 100%;
        margin-right: 20px;
        text-align: right
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .eng {
        position: relative;
        display: block;
        font-size: 29px;
        color: #000;
        font-family: "Times New Roman";
        width: 100%;
        font-style: oblique;
        letter-spacing: -1px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .first {
        position: relative;
        display: block;
        font-size: 14px;
        color: #000;
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 600;
        width: 100%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .second {
        position: relative;
        display: block;
        font-size: 20px;
        color: #000;
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 800;
        width: 100%
    }
}
@media screen and (max-width: 1279px) {
    body.about>.outter-view.main>.con>.row.full.aboutus {
        padding-bottom: 22.125%
    }
    body.about>.outter-view.main>.con>.row.full.aboutus.active {
        background-image: url(/img/aboutus-mb.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.aboutus-cont .cont {
        width: 90%;
        display: inline-block;
        font-size: 26px;
        line-height: 40px
    }
    body.about>.outter-view.main>.con>.row.full.ourmission {
        padding-bottom: 18%
    }
    body.about>.outter-view.main>.con>.row.full.ourmission.active {
        background-image: url(/img/ourmission-mb.png);
        opacity: 1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont {
        background-image: url(/img/aboutus-bg-mb.jpg)
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 250px;
        margin: 25px 15px 75px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .icon {
        background-size: contain;
        padding-bottom: 101%
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text {
        position: relative;
        top: 0;
        text-align: center;
        width: 100%;
        margin-top: 10px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .eng {
        position: relative;
        display: block;
        font-size: 54px;
        color: #000;
        font-family: "Times New Roman";
        width: 80%;
        margin: 0 auto 20px;
        border-bottom: 1px solid currentColor
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .first {
        position: relative;
        display: block;
        font-size: 32px;
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 600;
        width: 100%;
        color: #000
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .second {
        position: relative;
        display: block;
        font-size: 39px;
        font-family: "微軟正黑體", "Microsoft JhengHei";
        font-weight: 800;
        width: 100%;
        color: #000
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-creative .text .eng {
        border-bottom-color: #d35058;
        color: #d35058
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-design .text .eng {
        color: #75c4af
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-content .text .eng {
        color: #f68e2f
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-execution .text .eng {
        color: #7f88c1
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element.ele-technology .text .eng {
        color: #094e77
    }
}
@media screen and (max-width: 700px) {
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element {
        max-width: 220px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element .text .eng {
        font-size: 32px
    }
}
@media screen and (max-width: 600px) {
    body.about>.outter-view.main>.con>.row.aboutus-cont .cont {
        font-size: 22px;
        line-height: 30px
    }
}
@media screen and (max-width: 450px) {
    body.about>.outter-view.main>.con>.row.aboutus-cont .cont {
        font-size: 20px;
        line-height: 30px
    }
    body.about>.outter-view.main>.con>.row.ourmission-cont .content .element {
        max-width: 180px
    }
}
body.contact>.outter-view.main>.con>.row.text-area {
    padding-bottom: 80px
}
body.contact>.outter-view.main>.con>.row.text-area>.form {
    position: relative;
    width: 100%;
    display: inline-block;
    font-size: 0;
    text-align: center
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel {
    position: relative;
    display: inline-block;
    font-size: 0;
    text-align: left;
    margin-right: 0;
    vertical-align: top;
    transition: .2s
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 17px
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row:first-child {
    margin-top: 0
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.line {
    position: relative;
    width: 100%;
    display: inline-block;
    background-color: #d6465d;
    height: 3px;
    margin-bottom: 1px
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 0
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.icon {
    position: relative;
    margin-right: 3px;
    width: 55px;
    height: 100%;
    display: inline-block;
    vertical-align: top
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.button,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea {
    position: relative;
    width: calc(100% - 58px);
    background-color: #3f3f3f;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    padding: 5px 15px;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
    font-family: 微軟正黑體, "Microsoft JhengHei";
    transition: .3s
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input:-moz-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input:-ms-input-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input::-moz-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input::-webkit-input-placeholder {
    color: #a5999b
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input.warning,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea.warning {
    background-color: #f75b4c
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input.warning:-moz-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input.warning:-ms-input-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input.warning::-moz-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input.warning::-webkit-input-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea.warning:-moz-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea.warning:-ms-input-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea.warning::-moz-placeholder,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea.warning::-webkit-input-placeholder {
    color: #222
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.button,
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.icon.active {
    opacity: 1;
    background-color: #d6465d
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.button {
    color: #fff;
    cursor: pointer
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.name>.icon.active {
    background-image: url(/img/contact-icon-name.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.company>.icon.active {
    background-image: url(/img/contact-icon-company.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.mail>.icon.active {
    background-image: url(/img/contact-icon-mail.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.tel>.icon.active {
    background-image: url(/img/contact-icon-tel.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.subject>.icon.active {
    background-image: url(/img/contact-icon-subject.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.msg>.icon.active {
    background-image: url(/img/contact-icon-msg.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.icon.active {
    background-image: url(/img/contact-icon-send.png)
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.image {
    position: relative;
    display: inline-block;
    margin-right: 0;
    vertical-align: top
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.button {
    opacity: .9!important;
    transition: .4s
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.button:hover {
    opacity: 1!important
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row.final {
    margin-top: 21px
}
body.contact>.outter-view.main>.con>.row.text-area>.form>.image.active {
    opacity: 1;
    background-image: url(/img/contact-mb-img00.jpg);
    margin-right: 10px
}
@media screen and (min-width: 1280px) {
    body.contact>.outter-view.main>.con>.row.full.contact {
        padding-bottom: 22.05882352941176%
    }
    body.contact>.outter-view.main>.con>.row.full.contact.active {
        background-image: url(/img/contact.png);
        opacity: 1
    }
    body.contact>.outter-view.main>.con>.row.text-area {
        max-width: 1280px;
        text-align: center
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form {
        width: 1150px;
        margin: 0 25px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.image {
        width: 560px;
        height: 632px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel {
        width: 563px;
        height: auto;
        min-height: 100px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry {
        height: auto
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.button,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.icon,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input {
        height: 54px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.button {
        line-height: 54px;
        padding: 0;
        text-align: center
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea {
        height: 172px
    }
}
@media screen and (max-width: 1279px) {
    body.contact>.outter-view.main>.con>.row.full.contact {
        padding-bottom: 22.15269086357947%
    }
    body.contact>.outter-view.main>.con>.row.full.contact.active {
        background-image: url(/img/contact-mb.png);
        opacity: 1
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form {
        width: 87.5%
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.image,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel {
        width: 100%
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.image.active {
        margin-bottom: 20px;
        margin-right: 0
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.image::before {
        padding-bottom: 54.53257790368272%;
        content: ' ';
        position: relative;
        display: inline-block;
        width: 100%;
        height: 0
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.button,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.icon,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input {
        height: 70px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.icon {
        width: 70px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>.button,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>input,
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea {
        width: calc(100% - 73px);
        font-size: 25px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry>textarea {
        height: 300px
    }
    body.contact>.outter-view.main>.con>.row.text-area>.form>.panel>.data-row>.data-entry.send>.button {
        line-height: 70px;
        padding: 0;
        text-align: center
    }
}
@media screen and (min-width: 1280px) {
    body.home>.outter-view.main::before {
        position: relative;
        width: 0;
        height: 100%;
        content: ' ';
        vertical-align: middle;
        display: inline-block
    }
    body.home>.outter-view.main>.con {
        height: 778px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 0;
        left: 0
    }
    body.home>.outter-view.main>.con>.container {
        position: relative;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%
    }
    body.home>.outter-view.main {
        background-color: #f8ebf2;
        font-size: 0;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: auto;
        margin-top: 0;
        background-image: url(/img/transparent_1px.png)
    }
    body.home>.outter-view.main.active {
        opacity: 1;
        background-image: url(/img/index_bg.jpg)
    }
    body.home>.outter-view.main>.height-bg {
        position: relative;
        width: 0;
        padding-bottom: 57.68667642752562%;
        display: inline-block;
        vertical-align: middle
    }
    body.home>.outter-view.main .word.cht.area {
        width: 15.22693997071742%;
        padding-bottom: 30.30746705710102%;
        position: absolute;
        left: 75%;
        top: 22%
    }
    @keyframes wire {
        0% {
            margin-top: 0;
            margin-left: 0;
            opacity: 1
        }
        12.5% {
            margin-top: 3px;
            margin-left: 6px;
            opacity: .4
        }
        25% {
            margin-top: 20px;
            margin-left: 20px;
            opacity: .7
        }
        37.5% {
            margin-top: 17px;
            margin-left: 5px;
            opacity: .85
        }
        50% {
            margin-top: 40px;
            margin-left: 6px;
            opacity: .3
        }
        62.5% {
            margin-top: 12px;
            margin-left: -15px;
            opacity: .8
        }
        75% {
            margin-top: 20px;
            margin-left: -20px;
            opacity: .5
        }
        87.5% {
            margin-top: 8px;
            margin-left: -12px;
            opacity: .8
        }
    }
    body.home>.outter-view.main .wire-con {
        position: absolute;
        width: 88.79941434846266%;
        height: auto;
        left: 0;
        top: 0
    }
    body.home>.outter-view.main .cssimg.wire.active {
        background-image: url(/img/wire.png)
    }
    body.home>.outter-view.main .cssimg.wire {
        padding-bottom: 60.6760098927756%;
        opacity: 1;
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        animation-name: wire;
        animation-duration: 15s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }
    body.home>.outter-view.main .wire-con .entry.option {
        position: absolute;
        left: auto;
        top: 50%;
        right: 50%;
        display: block;
        width: auto;
        height: auto
    }
    body.home>.outter-view.main .wire-con .entry.option.showcase {
        top: 30%;
        right: 62%
    }
    body.home>.outter-view.main .wire-con .entry.option.contactus {
        top: 60%;
        right: 74%
    }
    body.home>.outter-view.main .wire-con .entry.option.aboutus {
        top: 37%;
        right: 43%
    }
    body.home>.outter-view.main .wire-con .entry.option.ourproduct {
        top: 80%;
        right: 54%
    }
    body.home>.outter-view.main .wire-con .entry.option a {
        position: relative;
        display: block;
        text-decoration: none
    }
    body.home>.outter-view.main .wire-con .entry.option .dot {
        position: relative;
        display: block;
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, .8);
        border-radius: 100%;
        transition: .5s
    }
    body.home>.outter-view.main .wire-con .entry.option .text {
        text-align: right;
        position: absolute;
        top: -70px;
        right: 12px;
        left: auto;
        font-size: 15px;
        display: block;
        width: 0;
        opacity: 0
    }
    body.home>.outter-view.main .wire-con .entry.option.active .text {
        width: 200px;
        transition: width .5s 1s, opacity .5s;
        opacity: .6
    }
    body.home>.outter-view.main .wire-con .entry.option.active:hover .text {
        opacity: 1
    }
    body.home>.outter-view.main .wire-con .entry.option .text>* {
        overflow: hidden;
        white-space: nowrap;
        width: auto;
        position: relative;
        display: block
    }
    body.home>.outter-view.main .wire-con .entry.option .text>.eng {
        font-family: "Times New Roman";
        font-size: 22px;
        color: #000
    }
    body.home>.outter-view.main .wire-con .entry.option .text>.cht {
        font-size: 18px;
        color: #000
    }
    body.home>.outter-view.main .wire-con .entry.option .line {
        width: 3px;
        height: 63px;
        background-image: url(/img/transparent_1px.png);
        background-position: 0 63px;
        background-repeat: no-repeat;
        position: absolute;
        right: 3px;
        bottom: 13px;
        z-index: 1;
        transition-delay: .5s;
        transition-duration: .3s
    }
    body.home>.outter-view.main .wire-con .entry.option.active .line {
        background-position: 0 0;
        background-image: url(/img/option_line.png)
    }
    body.home>.outter-view.main .wire-con .entry.option.active .dot {
        background-color: rgba(255, 255, 255, 0)
    }
    @keyframes dot {
        0% {
            opacity: .6
        }
        100% {
            opacity: 1
        }
    }
    body.home>.outter-view.main .wire-con .entry.option .dot::after {
        position: absolute;
        top: 8px;
        left: 8px;
        margin-left: 8px;
        margin-top: 0;
        width: 0;
        height: 0;
        background-image: url(/img/transparent_1px.png);
        background-size: 32px 32px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 0;
        transition: .2s;
        content: ' '
    }
    body.home>.outter-view.main .wire-con .entry.option.active .dot::after {
        margin-left: -16px;
        margin-top: -16px;
        width: 32px;
        height: 32px;
        background-image: url(/img/option_point.png);
        animation-name: dot;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
        animation-direction: alternate
    }
    body.home>.outter-view.main .cssimg.wire:hover {
        opacity: 1!important
    }
    body.home>.outter-view.main .cssimg.der.active {
        background-image: url(/img/cht-der.png);
        margin-left: 00px;
        opacity: 1
    }
    body.home>.outter-view.main .cssimg.der {
        padding-bottom: 120.1923076923077%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin-left: -50px;
        opacity: .3
    }
    body.home>.outter-view.main .cssimg.ron.active {
        background-image: url(/img/cht-ron.png);
        margin-left: 00px;
        opacity: 1
    }
    body.home>.outter-view.main .cssimg.ron {
        padding-bottom: 108.1730769230769%;
        position: absolute;
        left: 18%;
        top: 45%;
        width: 100%;
        margin-left: 50px;
        opacity: .3
    }
    body.home>.outter-view.main .cssimg.word.eng.active {
        background-image: url(/img/logo-eng-mb.png);
        margin-top: 0;
        opacity: 1
    }
    body.home>.outter-view.main .cssimg.word.eng {
        position: absolute;
        width: 15.66617862371889%;
        left: 66%;
        top: 39.5%;
        padding-bottom: 12.298682284041%;
        opacity: .5;
        margin-top: 30px
    }
}
@media screen and (max-width: 1279px) {
    body.home>.outter-view.main>.height-bg {
        padding-bottom: 152.5%
    }
    body.home>.outter-view.main {
        background-image: url(/img/index_bg_mobile.jpg);
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 1;
        height: auto
    }
    body.home>.outter-view.main>.con {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
    body.home>.outter-view.main>.con>.container {
        position: relative;
        width: 100%;
        height: 100%
    }
    body.home>.outter-view.main>.con>.container .nav-btn {
        position: absolute;
        width: 16.25%;
        height: auto;
        top: 4%;
        left: 2%;
        cursor: pointer
    }
    body.home>.outter-view.main>.con .word.cht {
        position: absolute;
        width: 53.125%;
        left: 42.5%;
        top: 14.5%
    }
    body.home>.outter-view.main>.con .word.cht .after {
        position: relative;
        width: 100%;
        display: block;
        padding-bottom: 198.8452655889145%;
        transition: 1.5s;
        opacity: 1;
        background-image: url(/img/logo-cht-mb.png);
        margin-left: 0
    }
    body.home>.outter-view.main>.con .word.eng {
        position: absolute;
        width: 55.5%;
        left: 6%;
        top: 38%
    }
    body.home>.outter-view.main>.con .word.eng .after {
        margin-left: -50px;
        position: relative;
        width: 100%;
        display: block;
        padding-bottom: 78.37837837837838%;
        opacity: 0;
        background-image: url(/img/transparent_1px.png);
        transition: 1.5s
    }
    body.home>.outter-view.main>.con .word.eng .after.active {
        opacity: 1;
        background-image: url(/img/logo-eng-mb.png);
        margin-left: 0
    }
}
body.product>.outter-view.main.active {
    background-image: url(/img/ourproduct-bg.png);
    opacity: 1
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item .image>.entry.active {
    opacity: 1
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item.digit .image>.entry.active {
    background-image: url(/img/op-da.jpg)
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item.social .image>.entry.active {
    background-image: url(/img/op-sm.jpg)
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item.inter .image>.entry.active {
    background-image: url(/img/op-in.jpg)
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item.plan .image>.entry.active {
    background-image: url(/img/op-mp.jpg)
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item.production .image>.entry.active {
    background-image: url(/img/op-pro.jpg)
}
body.product>.outter-view.main>.con>.row.text-area>.list {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 1020px;
    font-size: 0
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-bottom: 25px;
    padding-top: 25px;
    border-bottom: 1px solid #424242
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item .image {
    position: relative;
    width: 480px;
    max-width: 100%;
    margin-right: 40px;
    display: inline-block;
    vertical-align: top
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item .image>.entry {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 66.66666666666667%;
    transition: 1s
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item .text {
    position: relative;
    width: 500px;
    display: inline-block;
    vertical-align: top
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item .text .title {
    position: relative;
    display: block;
    width: 100%;
    font-family: "Times New Roman";
    color: #000;
    font-size: 60px;
    line-height: 50px;
    border-bottom: 5px solid #e63258;
    padding: 0 0 20px;
    margin: 0;
    text-align: left;
    text-transform: uppercase
}
body.product>.outter-view.main>.con>.row.text-area>.list>.item .text .cont {
    position: relative;
    display: block;
    width: 100%;
    font-family: "微軟正黑體", "Microsoft JhengHei";
    font-weight: 600;
    font-size: 20px;
    color: #000;
    text-align: left;
    line-height: 40px
}
@media screen and (min-width: 1280px) {
    body.product>.outter-view.main>.con>.row.full.ourproduct {
        padding-bottom: 22.05882352941176%
    }
    body.product>.outter-view.main>.con>.row.full.ourproduct.active {
        background-image: url(/img/ourproduct.png);
        opacity: 1
    }
    body.product>.outter-view.main>.con>.row.text-area {
        max-width: 1280px;
        text-align: center
    }
}
@media screen and (max-width: 1279px) {
    body.product>.outter-view.main>.con>.row.full.ourproduct {
        padding-bottom: 22.15269086357947%
    }
    body.product>.outter-view.main>.con>.row.full.ourproduct.active {
        background-image: url(/img/ourproduct-mb.png);
        opacity: 1
    }
    body.product>.outter-view.main>.con>.row.text-area>.list {
        width: 95%;
        max-width: 480px
    }
    body.product>.outter-view.main>.con>.row.text-area>.list>.item {
        padding-bottom: 40px;
        padding-top: 40px
    }
    body.product>.outter-view.main>.con>.row.text-area>.list>.item .image {
        padding-bottom: 20px
    }
}
@media screen and (max-width: 500px) {
    body.product>.outter-view.main>.con>.row.text-area>.list>.item .text .title {
        font-size: 40px
    }
}
body.case>.outter-view.main.active {
    background-image: url(/img/ourproduct-bg.png);
    opacity: 1
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .image>.entry.active {
    opacity: 1
}
body.case>.outter-view.main>.con>.row.text-area>.list {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 1020px;
    font-size: 0
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .sub-title,
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .title {
    font-family: "Times New Roman", "微軟正黑體", "Microsoft JhengHei";
    font-weight: 800;
    font-size: 34px;
    text-transform: uppercase;
    position: relative;
    text-align: left;
    line-height: 40px
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-bottom: 25px;
    padding-top: 25px;
    border-bottom: 1px solid #424242
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .image {
    position: relative;
    width: 790px;
    max-width: 100%;
    padding-right: 8px;
    display: inline-block;
    vertical-align: top;
    border-right: 5px solid #e63258
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .image>.entry {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 75%;
    transition: 1s;
    border: 1px solid #c7c7c7;
    box-sizing: border-box
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text {
    position: relative;
    width: 210px;
    display: inline-block;
    vertical-align: top;
    margin-left: 7px;
    margin-right: 0
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .title {
    display: block;
    width: 100%;
    color: #000;
    padding: 0;
    margin: 0
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .sub-title {
    display: block;
    width: 100%;
    color: #4e4d4d;
    padding: 0;
    margin: 0
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .link {
    position: relative;
    display: block;
    width: 100%;
    font-family: arial, "Times New Roman", "微軟正黑體", "Microsoft JhengHei";
    color: #000;
    font-size: 14px;
    line-height: 40px;
    border-bottom: 1px solid #424242;
    padding: 0;
    margin: 0;
    text-align: left;
    font-weight: 100
}
body.case>.outter-link {
    text-decoration: none
}
body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .cont {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 15px;
    font-family: "微軟正黑體", "Microsoft JhengHei";
    font-weight: 600;
    font-size: 16px;
    color: #000;
    text-align: left;
    line-height: 40px
}
@media screen and (min-width: 1280px) {
    body.case>.outter-view.main>.con>.row.full.ourproduct {
        padding-bottom: 22.05882352941176%
    }
    body.case>.outter-view.main>.con>.row.full.ourproduct.active {
        background-image: url(/img/ourproduct.png);
        opacity: 1
    }
    body.case>.outter-view.main>.con>.row.text-area {
        max-width: 1280px;
        text-align: center
    }
}
@media screen and (max-width: 1279px) {
    body.case>.outter-view.main>.con>.row.full.ourproduct {
        padding-bottom: 22.15269086357947%
    }
    body.case>.outter-view.main>.con>.row.full.ourproduct.active {
        background-image: url(/img/ourproduct-mb.png);
        opacity: 1
    }
    body.case>.outter-view.main>.con>.row.text-area>.list {
        width: 95%;
        max-width: 1000px
    }
    body.case>.outter-view.main>.con>.row.text-area>.list>.item {
        padding-bottom: 40px;
        padding-top: 40px
    }
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .image {
        padding-bottom: 20px;
        width: 100%
    }
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .text {
        width: 95%;
        margin-left: 0
    }
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .sub-title,
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .title {
        font-size: 48px;
        line-height: 52px
    }
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .link {
        font-size: 18px;
        line-height: 36px;
        border-bottom: 0
    }
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .cont {
        margin-top: 24px;
        font-size: 30px
    }
}
@media screen and (max-width: 500px) {
    body.case>.outter-view.main>.con>.row.text-area>.list>.item .text .title {
        font-size: 40px
    }
}