.hidden.menu {
    display: none;
}

body {
    font-family: 'Noto Sans TC';
    font-size: 16px;
}

.masthead.segment {
    min-height: 720px;
    padding: 1em 0em;
}
.masthead .logo.item img {
    margin-right: 1em;
}
.masthead .ui.menu .ui.button {
    margin-left: 0.5em;
}

.masthead h1.ui.header {
    margin-top: 3.0em;
    margin-bottom: 0em;

    color: #ffffff;
    text-align: left;
    font-size: 3.3em;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
}
.masthead h2.ui.header {
    color: #ffffff;
    text-align: left;
    font-size: 1.6em;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
}
.masthead #header-contact {
    width: 280px;
    height: 2.8em;
    margin-top: 3em;
    padding-top: 0.85em;

    font-size: 1.1em;
    color: #ffffff;

    background-image: linear-gradient(103deg, #34c6df, #0090ff);
    border-radius: 0;
}

.ui.vertical.stripe {
    padding: 2em 0em;
}
.ui.vertical.stripe h3 {
    font-size: 2em;
}
.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
    margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
    clear: both;
}
.ui.vertical.stripe p {
    font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
    margin: 3em 0em;
}

.quote.stripe.segment {
    padding: 0em;
}
.quote.stripe.segment .grid .column {
    padding-top: 5em;
    padding-bottom: 5em;
}

.footer.segment {
    padding: 3em 0em;
}

.secondary.pointing.menu .toc.item {
    display: none;
}

@media only screen and (max-width: 700px) {
    .ui.fixed.menu {
        display: none !important;
    }
    .secondary.pointing.menu .item,
    .secondary.pointing.menu .menu {
        display: none;
    }
    .secondary.pointing.menu .toc.item {
        display: block;
    }
    .masthead.segment {
        min-height: 350px;
    }
    .masthead h1.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
    }
    .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
    }

    .mobile-hide {
        display: none;
    }

    .region-contact .content {
        width: 100%!important;
        left: 0!important;
    }

    .prod-char {
        width: 100%!important;
        height: auto!important;
    }
}

.ui.secondary.inverted.pointing.menu {
    border: 0px;
}
.ui.secondary.inverted.menu a.item{
    color:#EEE!important;
}
.ui.secondary.inverted.menu a.active.item {
    //color:#97BD3B!important;
    color: #FFFFFF;
}
.ui.top.fixed.menu a.active.item {
    //color: #1F5BA2!important;
    color: #ffffff!important;
    background-color: rgba(0, 154, 255, 0.7);
}
.ui.secondary.inverted.pointing.menu .active.item{
    background-color: #0090ff;
    border-color: #0090ff;
}
.ui.secondary.inverted.pointing.menu .item:active{
    border-color:#FFF;
}
.ui.menu .item:before {
    width: 0px;
}
.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
    border-left: 0px;
}

.item.title {
    font-size: 1.3em;
}

#sub-slogan {
    color: #EEE;
    text-align: justify;
}

#float-menu {
    height: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 0;
}
#float-menu a{
    color: rgba(255, 255, 255, 0.9);
}

.content {
    text-align: justify;
}

.ui.vertical.stripe .horizontal.narrow.divider {
    margin: 1.5em 0em;
}

.ui.cards>.card>.content.header {
    //padding: 0.7em 0.7em 0.5em 0.7em;
    padding: 0.7em;
}
.ui.cards>.card>.content {
    padding: 0.8em;
}

.ui.container>.item.title:hover {
}

@media only screen and (min-width: 700px) {
    .row.index-ps-item {
        height: 200px;
    }
}

#white-logo img {
    margin: 0px;
    margin-bottom: 4px;
    width: 5.0em !important;
}

#white-logo {
    padding: .85714286em 1.14285714em .51714286em 1.14285714em;
    font-size: 1em;
}

#index-about-logo {
    width: 100%;
    padding: 5px 50px;
}

#banner {
    background: url('homepage_bg.jpg') repeat center center;
    background-color: #101010;
    background-size: 1920px 1530px;
}

#banner-camera {
    display: none;
}

.key-characteristic {
    margin-bottom: 10px;
}
.key-characteristic .ui.big.label {
    background-color: #1F5BA2;
    color: #EEE;
    width: 7.7em;
    text-align: center;
    margin-right: 3px;
}

#product-menu {
    text-align: right;
    position: absolute;
    right: 30px;
    top: 30px;
}

a.anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

.index-title {
    text-align: center;
    padding-top: 25px;
    //border: 1px solid #A00;
    height: 80px;
    background: url('asserts/m-triangle.png') no-repeat center center;

    margin-bottom: 30px;

    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.39;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.prod-char-desc {
    padding: 2em!important;
}
.prod-char-desc h3 {
    font-size: 1.3em;
    font-weight: 400;
}
.prod-char-desc {
    font-size: 1.0em;
    font-weight: 300;
}
.prod-char-desc p {
    padding-left: 0.7em;
    text-align: justify;
}
.prod-char img{
    max-width: 500%!important;
    width: 100%;
    height: auto;
}
.prod-char.wm img {
    width: 100%!important;
    height: auto!important;
}
.prod-char.hm img {
    width: auto!important;
    height: 100%!important;
}
.prod-char {
    text-align: center;
    width: 100%;
    height: 278.4px;
    overflow: hidden!important;
}
.prod-char.bg {
    background-color: rgba(0, 0, 0, 0.1);
}
.prod-char-row {
    margin-bottom: 2em;
}

.wall {
    border: 0px solid #fff;
}

.wall img {
    width: 100%;
}

.wall-left {
    height: 22em;
    padding-right: 0!important;
}
.wall-right {
    height: 22em;
    padding-left: 0!important;
    padding-right: 0!important;
}
.wall-right .wall {
    height: 100%;
}
.wall-left .wall {
    height: 50%;
}
.wall .caption {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0.7em;
    //background-color: rgba(0, 0, 0, 0.6);
}
div.wall {
    overflow: hidden;
    position: relative;
}
.wall h3 {
    margin: 0;
}
.wall h4 {
    margin: 0;
    margin-top: 0.5em;
}

.ui.stackable.grid.prod-wide {
    margin-top: 3em;

}
.prod-wide-menu {
    height: 13em;
}
.prod-wide-menu.left {
    padding-right: 0!important;
}
.prod-wide-menu.right {
    padding-left: 0!important;
    padding-right: 0!important;
}
.prod-wide-menu div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.prod-wide-menu img {
    width: 100%;
}
.prod-wide-menu .caption {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 1.2em;
    padding-top: 0.15em;
    margin-top: -0.6em;
    color: #ffffff;
}
.prod-wide-menu.left .arrow {
    height: 1.5em;
    margin-top: -0.75em;
    position: absolute;
    top: 50%;
    left: 1em;
    background-image: url('asserts/ic_left.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.prod-wide-menu.right .arrow {
    height: 1.5em;
    margin-top: -0.75em;
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: -1.75em;
    background-image: url('asserts/ic_right.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.prod-wide-menu .mask {
    background-color: rgba(0, 0, 0, 0.5);
}

.prod-drop-menu {
    background-color: rgba(0, 0, 0, 0.6)!important;
    border-radius: 0!important;
    width: 53em;

    position: absolute;
    padding: 1em!important;
    display: none;
}
.prod-drop-menu a {
    width: 16em;
    float: left;
    display: block;
    border-right: 1px solid #fff!important;
    padding: 0!important;
    margin-right: 1em!important;
    border-bottom: 0!important;
    border-top: 0!important;
}
.prod-drop-menu a:last-child {
    border-right: 0!important;
}
.prod-drop-menu h4 {
    color: #ffffff!important;
    float: left;
    font-weight: 300;
    margin-left: 1em;
    margin-top: 0;
    margin-bottom: 0;
    display: inline;
    line-height: 5.1428em;
}
.prod-drop-menu .img {
    float: left;
    width: 8em;
    height: 5.1428em;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.8;
}
a.prod-menu-button:hover {
    background-color: #0090ff!important;
}

.back-tri {
    background: linear-gradient(149deg, rgba(0, 144, 255, 0.5), rgba(0, 0, 0, 0.0));
    position: absolute;
    left: 0;
    top: 1250px;
    height: 900px;
    width: 100%;
    transform:matrix(1, -0.3, 0, 1, 0, 0);
}

.service-desc {
    margin-bottom: 2em;
    margin-top: -0.5em;
    text-align: center;
}

.ui.card.service-card {
    color: #ffffff;
    border-radius: 0!important;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
    padding: 1.4em 0.6em 1.4em 0.6em;
}
.ui.card.service-card .ui.icon.header {
    text-align: center;
}
.ui.card.service-card h3 {
    color: #ffffff;
    font-size: 1em;
}
.ui.card.service-card .desc {
    height: 6em;
}
.ui.card.service-card .blue-under {
    border-radius: 0!important;
    background-image: linear-gradient(92deg, #34c6df, #0090ff);
    width: 2.5em;
    height: 2px;
    margin: 2.0em auto 0em auto;
}

.region-contact {
    margin-top: 4em;
    height: 26em;
    width: 100%;
    background-image: url('asserts/img-contact.jpg');
    background-position: center center;
}
.region-contact .content {
    position: relative;
    left: 50%;
    top: 25%;
    width: 50%;
    height: 50%;
    padding: 1.5em;
    background-image: linear-gradient(116deg, #34c6df, #0090ff);
}
.region-contact #button {
    color: #ffffff;
    padding: 0.6em 1.1em;
    width: 12em;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 2px #ffffff;

    position: absolute;
    bottom: 1.0em;
}

.contact-row #button {
    color: #ffffff;
    padding: 0.6em 1.1em;
    width: 12em;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 2px #ffffff;

    font-size: 0.9em;
    margin: 2.5em auto 1em auto;
}