/* Lato */

@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-Light.woff') format('woff');

    font-weight: 300;

    font-style: normal;

}

@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-LightItalic.woff') format('woff');

    font-weight: 300;

    font-style: italic;

}



@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-Regular.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-Italic.woff') format('woff');

    font-weight: normal;

    font-style: italic;

}



@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-Medium.woff') format('woff');

    font-weight: 500;

    font-style: normal;

}

@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-MediumItalic.woff') format('woff');

    font-weight: 500;

    font-style: italic;

}



@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-BoldItalic.woff') format('woff');

    font-weight: bold;

    font-style: italic;

}

@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-Black.woff') format('woff');

    font-weight: 900;

    font-style: normal;

}

@font-face {

    font-family: 'Lato';

    src: url('fonts/Lato-BlackItalic.woff') format('woff');

    font-weight: 900;

    font-style: italic;

}



/* Noto */

@font-face {

    font-family: 'Noto Sans TC';

    font-style: normal;

    font-weight: 100;

    src: url(fonts/NotoSansTC-Thin.woff2) format('woff2');

}

@font-face {

    font-family: 'Noto Sans TC';

    font-style: normal;

    font-weight: 300;

    src: url(fonts/NotoSansTC-Light.woff2) format('woff2');

}

@font-face {

    font-family: 'Noto Sans TC';

    font-style: normal;

    font-weight: 400;

    src: url(fonts/NotoSansTC-Regular.woff2) format('woff2');

}

@font-face {

    font-family: 'Noto Sans TC';

    font-style: normal;

    font-weight: 500;

    src: url(fonts/NotoSansTC-Medium.woff2) format('woff2');

}

@font-face {

    font-family: 'Noto Sans TC';

    font-style: normal;

    font-weight: 700;

    src: url(fonts/NotoSansTC-Bold.woff2) format('woff2');

}

@font-face {

    font-family: 'Noto Sans TC';

    font-style: normal;

    font-weight: 900;

    src: url(fonts/NotoSansTC-Black.woff2) format('woff2');

}



body {

    font-family: 'Lato', 'Noto Sans TC', '微軟正黑體';

    padding-top: 100px;

}

h1, h2, h3, h4, h5, h6 {

    font-family: 'Lato', 'Noto Sans TC', '微軟正黑體';

}

p {

    font-family: 'Lato', 'Noto Sans TC', '微軟正黑體';

}

img,iframe {

    max-width: 100%;

    vertical-align: top;

}

.navbar-collapse.in {

    overflow: visible;

}

.navbar-logo {

    padding: 0;

    margin-top: 22px;

}

/*.navbar-logo img {

    height: 34px;

}*/

.navbar-default .navbar-nav>li>a {

    font-family: 'Lato', 'Noto Sans TC', '微軟正黑體';

    color: #333!important;

    font-size: 18px;

    font-weight: 400;

    line-height: 1;

    padding: 41px 16px;

}

.navbar-default .navbar-nav>li>a.active,

.navbar-default .navbar-nav>li>a:hover,

.navbar-default .navbar-nav>li>a:focus {

    color: #04a9f4!important;

}

.navbar-tiny {

    height: auto;

}

.navbar-tiny .nav li a {

    margin: 0;

}

.navbar-tiny .navbar-logo {

    padding: 0;

    margin-top: 12px;

}

.navbar-tiny .navbar-nav>li>a {

    padding: 31px 16px;

}

.container {

    position: relative;

}

.slick-dotted.slick-slider {

    margin: 0;

}

.slick-dots {

    bottom: 30px;

}

.slick-dots li.slick-active button:before,

.slick-dots li button:before {

    color: #04a9f4;

}

.indexslider .slick-prev {

    width: 32px;

    height: 50px;

    left: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #222;

}

.indexslider .slick-prev::before {

    content: '';

    display: block;

    width: 14px;

    height: 14px;

    background-image: url(../images/common/arrow_left.png);

}

.indexslider .slick-next {

    width: 32px;

    height: 50px;

    right: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #222;

}

.indexslider .slick-next::before {

    content: '';

    display: block;

    width: 14px;

    height: 14px;

    background-image: url(../images/common/arrow_right.png);

}

.slick-initialized .slick-slide.indexslider__slide {

    position: relative;

    height: 600px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}

.slick-initialized .slick-slide.indexslider__slide::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    opacity: .4;

}

.indexslider__title {

    color: #fff;

    font-size: 45px;

    font-weight: bold;

    line-height: 1.33;

    letter-spacing: .1em;

    text-align: center;

    margin: 0;

}

.indexslider__subtitle {

    color: #fff;

    font-size: 25px;

    font-weight: 400;

    line-height: 2;

    text-align: center;

    margin: 0;

}

.indexslider__title + .indexslider__subtitle {

     margin: 20px 0 0;

}

.common__section {

    padding: 65px 0;

}

.common__title {

    color: #333;

    font-size: 38px;

    font-weight: 400;

    line-height: 1;

    margin: 0;

}

.common__subtitle {

    color: #9b9b9b;

    font-size: 22px;

    font-weight: bold;

    line-height: 1;

    margin: 15px 0 0;

}

.simple-title {

    margin-bottom: 45px;

}

.service {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

.service__item {

    width: calc(33.333% - 48px);

    text-align: center;

    margin-top: 40px;

}

.service__item:nth-child(-n + 3) {

    margin: 0;

}

.service__title {

    color: #333;

    font-size: 22px;

    font-weight: 400;

    line-height: 1.2;

    margin: 24px 0 0;

}

.service__text {

    color: #777;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.5625;

    letter-spacing: .05em;

    text-align: justify;

    margin: 22px 0 0;

}

.small-bg-info-section {

    padding: 60px 0;

    background-image: url(../images/index/parallax-new.jpg);

}

.small-bg-info-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    opacity: .7;

}

.small-bg-info-section h4 {

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    margin: 0;

}

.small-bg-info-section p {

    max-width: 720px;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.75;

    letter-spacing: .05em;

    text-align: justify;

    margin: 15px 0 0;

    padding: 0;

}

.common__btn {

    display: block;

    width: 160px;

    height: 42px;

    color: #fff;

    font-size: 17px;

    line-height: 40px;

    text-align: center;

    padding: 0;

    margin: 10px auto 0;

    border-radius: 21px;

    border: 1px solid #04a9f4;

    background-color: #04a9f4;

    -webkit-transition: color .4s, border-color .4s, background-color .4s;

    -moz-transition: color .4s, border-color .4s, background-color .4s;

    transition: color .4s, border-color .4s, background-color .4s;

}

.common__btn:hover,

.common__btn:focus {

    color: #04a9f4;

    background-color: transparent;

    border-color: #04a9f4;

}

.small-bg-info-section p + .common__btn {

    margin: 30px 0 0;

}

.common__flexbox {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}

.flexbox__img {

    width: 650px;

    max-width: 650px;

}

.flexbox__content {

    width: calc(100% - 650px);

    padding: 15px 30px 15px 0;

}

.flexbox__title {

    color: #333;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    margin: 0;

}

.flexbox__text {

    color: #777;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.75;

    letter-spacing: .05em;

    margin: 20px 0 0;

}

.common__btn-reverse {

    color: #04a9f4;

    background-color: transparent;

    margin: 25px 0 0;

}

.common__btn-reverse:hover {

    color: #fff;

    background-color: #04a9f4;

}

.footer__mainblock {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    padding: 50px 0 45px;

}

.footer__item:first-child {

    width: 39%;

}

.footer__item:nth-child(2) {

    width: 36%;

}

.footer__item:last-child {

    width: 25%;

}

.footer__logo-text {

    color: #b5b5b6;

    font-size: 14px;

    font-weight: 300;

    line-height: 1.57;

    letter-spacing: .05em;

    margin: 16px 0 0;

}

.social-icon {

    margin: 20px 0 0;

}

.social-icon li a {

    opacity: .5;

}

.social-icon li a:hover {

    opacity: 1;

}

.footer__item-title {

    color: #fff;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: .05em;

    margin: 0;

}

.footer__linkbox {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    margin: 30px 0 0;

}

.footer__links {

    width: 145px;

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    flex-direction: column;

}

.footer__link {

    display: inline-flex;

    align-items: center;

    color: #b5b5b6;

    font-size: 14px;

    font-weight: 300;

    line-height: 1;

    margin: 15px 0 0;

}

.footer__link:first-child {

    margin: 0;

}

.footer-menu-icon {

    color: #b5b5b6;

    font-size: 22px;

    margin-right: 12px;

    -webkit-transform: translateY(-1px);

    -moz-transform: translateY(-1px);

    transform: translateY(-1px);

}

.footer-address {

    margin: 25px 0 0;

}

.footer-address li {

    padding: 0 0 15px 32px;

}

.footer-address li:last-child {

    padding-bottom: 0;

}

.footer-address li p {

    color: #b5b5b6;

    font-size: 14px;

    font-weight: 300;

    line-height: 1.43;

}

.footer-address li i {

    width: 15px;

    font-size: 18px;

}

.copyright__block {

    padding: 20px 0;

    border-top: 1px solid #777;

}

.copyright__block p {

    color: #777;

    font-size: 14px;

    font-weight: 300;

    line-height: 1.71;

    text-align: center;

    margin: 0;

}

.copyright__block p a {

    color: #777;

}

.copyright__block p a:hover {

    color: #04a9f4;

}

@media (max-width:1199px) {

    .common__flexbox {

        flex-direction: column-reverse;

    }

    .flexbox__content {

        width: 100%;

        text-align: center;

        padding: 30px 0;

    }

    .flexbox__content .common__btn {

        margin: 15px auto 0;

    }

    .footer__item:nth-child(2) {

        display: none;

    }

}

@media (max-width:1199px) and (min-width:768px) {

    .footer__item:first-child,

    .footer__item:last-child {

        width: 50%;

    }

}

@media (max-width:1140px) {

    .slick-initialized .slick-slide.indexslider__slide {

        height: 52.63vw;

        min-height: 360px;

    }

}

@media (max-width:991px) {

    body {

        padding-top: 78px;

    }

    .navbar-header {

        padding: 0 15px;

    }

    .navbar-logo,

    .navbar-tiny .navbar-logo {

        width: 220px;

        margin: 15px 0;

    }

    .navbar-toggle {

        margin: 20px 0 0;

    }

    .navbar-default .navbar-nav>li>a {

        padding: 20px 10px;

    }

    .indexslider__title {

        font-size: 36px;

        line-height: 1.1;

    }

    .indexslider__subtitle {

        font-size: 22px;

        line-height: 1.2;

    }

    .common__section {

        padding: 30px 0;

    }

    .common__title {

        font-size: 30px;

    }

    .common__subtitle {

        font-size: 18px;

    }

    .simple-title {

        margin-bottom: 20px;

    }

    .service__item:nth-child(3) {

        margin-top: 40px;

    }

    .service__title {

        font-size: 20px;

        margin: 15px 0 0;

    }

    .service__text {

        margin: 12px 0 0;

    }

    .small-bg-info-section {

        padding: 40px 0;

    }

    .small-bg-info-section h4 {

        font-size: 22px;

        padding: 0 15px;

    }

    .small-bg-info-section p {

        padding: 0 15px;

    }

    .small-bg-info-section p + .common__btn {

        margin: 15px 0 0 15px;

    }

    .flexbox__title {

        font-size: 22px;

    }

    .flexbox__text {

        margin: 14px 0 0;

    }

    .footer__mainblock {

        padding: 30px 0;

    }

}

@media (max-width:991px) and (min-width:576px) {

    .service__item {

        width: calc(50% - 15px);

    }

}

@media (max-width:767px) {

    .footer__logo-text {

        margin: 10px 0 0;

    }

    .footer__item {

        text-align: center;

    }

    .footer__item:first-child {

        width: 100%;

        margin-bottom: 15px;

    }

    .footer__item:last-child {

        width: 100%;

    }

    .footer-address {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        flex-direction: column;

        margin: 15px 0 0;

    }

    .social-icon {

        margin: 10px 0 0;

    }

    .footer-address li {

        padding-left: 30px;

        padding-bottom: 0;

    }

    .footer-address li i {

        left: 5px;

        width: auto;

    }

}

@media (max-width:575px) {

    .indexslider__title {

        font-size: 30px;

    }

    .indexslider__subtitle {

        font-size: 18px;

    }

    .indexslider__title + .indexslider__subtitle {

        margin: 10px 0 0;

    }

    .service__item {

        width: 100%;

    }

    .service__item:nth-child(2) {

        margin-top: 40px;

    }

}

/* 關於我們 */

.page-banner-section-dark {

    padding: 80px 0;

    margin: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.page-banner-section-dark::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #0d1016;

    opacity: .65;

}

.page-banner-section-dark .page-title {

    font-size: 35px;

    line-height: 1.2;

    margin: 0;

}

.page-banner-section-dark .title-description {

    font-size: 16px;

    font-weight: 300;

    line-height: 1.2;

    margin: 30px 0 0;

}

.aboutimgbox {

    text-align: center;

}

.abouttitle {

    color: #333;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .05em;

    margin: 0;

}

.abouttext {

    color: #777;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.875;

    letter-spacing: .02em;

    text-align: justify;

    margin: 20px 0 0;

}

.aboutinfo .common__btn {

    margin: 20px 0 0;

}

.charts-section {

    padding: 40px 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.charts-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    opacity: .8;

}

.charts-section .section-shade {

    background-image: none;

    padding: 0;

}

.chart {

    margin: 0;

}

.lead {

    font-family: 'Noto Sans TC', 微軟正黑體;

    color: #fff;

    font-size: 20px;

    font-weight: 300;

    line-height: 1;

    letter-spacing: .05em;

    margin: 0 0 0 35px;

}

.percent {

    font-weight: 400;

}

.percent:after {

    font-size: 18px;

    margin: 0;

}

.servicetitle {

    color: #333;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .05em;

    margin: 0 0 30px;

}

.servicetext {

    max-width: 445px;

    color: #777;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.5625;

    letter-spacing: .05em;

    text-align: justify;

    margin: 0 0 30px;

}

.info-features {

    padding: 0;

}

.simple-list li {

    color: #555;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.5625;

}

.simple-list .fa {

    padding-right: 14px;

}

.servicelist {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

}

.servicelist > div:nth-child(n + 2) {

    margin-left: 35px;

}

.servicelist ul {

    margin: 0;

}

.servicelist ul li:nth-child(n + 2) {

    margin-top: 5px;

}

.servicelist + .common__btn {

    margin: 38px 0 0;

}

.accordion {

    margin: 10px 0 0;

}

.accordion-section-title {

    line-height: 1.5625;

    padding: 13px 15px;

}

.accordion-section-content p {

    margin: 0;

}

.chart__itembox {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}

.chart__itembox-img {

    max-width: 100%;

}

.chart__box {

    width: calc(100% - 556px);

    padding-right: 140px;

}

.chart__title {

    color: #333;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    margin: 0 0 35px;

}

.chart__box-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    color: #323232;

    font-size: 17px;

    font-weight: 300;

    line-height: 1.2;

    letter-spacing: .05em;

    padding-bottom: 8px;

    margin-bottom: 12px;

    border-bottom: 1px solid #c9caca;

}

.chart__box-row:last-child {

    padding: 0;

    margin: 0;

    border: 0;

}

.chart__box-row span {

    color: #0273d3;

    display: block;

    width: 100px;

}

@media (max-width:1199px) {

    .chart__itembox {

        flex-direction: column;

        align-items: center;

    }

    .chart__box {

        width: 100%;

        flex-direction: row;

        justify-content: center;

        margin: 0 0 20px;

        padding: 0;

    }

    .chart__title {

        margin: 0 0 20px;

    }

}

@media (max-width:991px) {

    .abouttitle {

        font-size: 24px;

    }

    .abouttext {

        margin: 10px 0 0;

    }

    .aboutinfo .common__btn {

        margin-top: 10px;

    }

    .aboutimgbox img {

        width: 100%;

        margin: 0 0 20px;

    }

    .charts-section {

        padding: 30px 0;

    }

    .servicetitle {

        font-size: 24px;

        margin: 0 0 15px;

    }

    .servicetext {

        margin: 0 0 15px;

    }

    .servicelist + .common__btn {

        margin: 15px 0 30px;

    }

}

@media (max-width:767px) {

    .servicetext {

        max-width: 100%;

    }

}

@media (min-width:576px) {

    .chart__itembox-img.mobile {

        display: none;

    }

}

@media (max-width:575px) {

    .chart__itembox-img {

        display: none;

    }

    .chart__itembox-img.mobile {

        display: block;

        margin: 0 0 20px;

    }

    .chart__box-row span {

        width: 100%;

        margin: 0 0 5px;

    }

}

/* 關於我們 end */



/* 最新消息 */

.col__two {

    display: flex;

    flex-wrap: wrap;

    margin: 0 -15px;

}

.flex__half {

    width: 50%;

    padding: 0 15px;

    margin-top: 30px;

}

.flex__half:nth-child(-n + 2) {

    margin: 0;

}

.post__img {

    display: block;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.post__img::before {

    content: '';

    display: block;

    padding-top: 50%;

}

.blog-article-details h2 {

    margin: 0;

}

.blog-article-details h2 a {

    display: block;

    max-height: 2.4em;

    color: #333;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.2;

    overflow: hidden;

}

.blog-article-details h2 a:hover {

    color: #04a9f4;

}

.entry-meta-header {

    line-height: 1;

}

.blog-article-details .entry-meta-header span:after {

    display: none;

}

.posted-on {

    display: block;

    color: #555;

    font-size: 15px;

    font-weight: 300;

}

.posted-on .fa {

    margin-right: 10px;

}

.blog-article-details {

    margin: 0;

}

.blog-article-details .entry-meta-header {

    margin-bottom: 0;

}

.blog-article-details + p {

    max-height: 4.8em;

    color: #555;

    font-size: 15px;

    font-weight: 300;

    line-height: 1.6;

    margin: 15px 0 0;

    overflow: hidden;

}

.blog-article {

    margin: 0;

}

.pager {

    margin: 48px 0 0;

}

.pager li>a {

    color: #777;

    font-size: 18px;

    font-weight: 400;

    line-height: 34px;

    border-width: 1px;

    border-color: #dcdddd;

}

.pager li>a:hover,

.pager li>a:focus {

    border-color: #04a9f4;

}

.pager li> span {

    font-size: 18px;

    line-height: 34px;

    border-width: 1px;

}

@media (max-width:991px) {

    .blog-article-thumbnail {

        margin-bottom: 15px;

    }

    .blog-article-details .entry-meta-header {

        margin-top: 10px;

    }

    .blog-article .common__btn-reverse {

        width: 140px;

        height: 40px;

        line-height: 38px;

        margin-top: 10px;

    }

    .pager {

        margin-top: 20px;

    }

    .blog-article-details h2 a {

        font-size: 22px;

    }

}

@media (max-width:767px) {

    .flex__half {

        width: 100%;

    }

    .flex__half:nth-child(2) {

        margin-top: 40px;

    }

}

/* 最新消息 end */



/* 最新消息內頁 */

.post__single {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

}

.post__main {

    width: calc(100% - 260px);

    padding-right: 35px;

}

.post__banner {

    width: 100%;

}

.post__title {

    color: #333;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .025em;

    margin: 40px 0 0;

}

.entry-meta-header i {

    color: #555;

}

.post__title + .entry-meta-header {

    margin: 17px 0 16px;

}

.sidebar {

    width: 260px;

}

.sidebar__title {

    color: #333;

    font-size: 20px;

    font-weight: 400;

    line-height: 1;

    margin: 0 0 40px;

}

.sidebar__news-item {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    margin: 31px 0 0;

}

.sidebar__news-item::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: calc(100% + 15px);

    width: 100%;

    border-top: 1px solid #dcdddd;

}

.sidebar__news-item:first-child {

    margin: 0;

}

.sidebar__news-item:first-child::before {

    display: none;

}

.sidebar__news-img {

    width: 74px;

    height: 74px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.sidebar__news-content {

    width: calc(100% - 74px);

    padding-left: 20px;

}

.sidebar__news-title {

    max-height: 2.625em;

    color: #444;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3125;

    letter-spacing: .025em;

    overflow: hidden;

    margin: 0;

}

.sidebar__news-date {

    color: #999;

    font-size: 15px;

    font-weight: 300;

    line-height: 1;

    margin: 15px 0 0;

}

@media (max-width:991px) {

    .post__single {

        flex-direction: column;

    }

    .post__main {

        width: 100%;

        padding: 0;

    }

    .sidebar {

        width: 100%;

        margin: 20px 0 0;

    }

    .post__title {

        margin-top: 20px;

    }

    .post__title + .entry-meta-header {

        margin: 10px 0;

    }

}

/* 最新消息內頁 end */



/* 產品介紹 */

.common__section-product {

    padding-bottom: 0;

}

.tabs {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

}

.tabs__btn {

    position: relative;

    display: block;

    color: #555;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.2;

    margin-left: 15px;

}

.tabs__btn:hover,

.tabs__btn:focus {

    color: #333;

}

.tabs__btn--active {

    color: #04a9f4;

}

.tabs__btn--active::after {

    content: '';

    position: absolute;

    top: calc(100% + 2px);

    left: 0;

    width: 100%;

    border-bottom: 2px solid #04a9f4;

}

.products {

    display: flex;

    flex-wrap: wrap;

    margin-top: 40px;

}

.products__box {

    display: block;

    width: 25%;

}

.products__item {

    position: relative;

    display: block;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.products__item::before {

    content: '';

    display: block;

    padding-top: 75%;

}

.products__overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding: 0 15px;

    background-color: rgba(0,0,0,.8);

    opacity: 0;

    -webkit-transition: opacity .5s;

    -moz-transition: opacity .5s;

    transition: opacity .5s;

}

.products__overlay:hover {

    opacity: 1;

}

.products__title {

    color: #fff;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.12;

    margin: 0;

}

.products__text {

    color: #27b7ff;

    font-size: 17px;

    font-weight: 300;

    line-height: 1.2;

    margin: 12px 0 20px;

}

@media (max-width:1199px) and (min-width:992px) {

    .products__box {

        width: 33.3333%;

    }

}

@media (max-width:991px) and (min-width:576px) {

    .products__box {

        width: 50%;

    }

}

@media (max-width:991px) {

    .products {

        margin-top: 15px;

    }

}

@media (min-width:576px) {

    .products__mobile-title {

        display: none;

    }

}

@media (max-width:575px) {

    .products {

        padding: 0 15px;

    }

    .products__box {

        width: 100%;

        margin-top: 20px;

    }

    .products__box:first-child {

        margin: 0;

    }

    .products__mobile-title {

        color: #555;

        font-size: 16px;

        font-weight: 400;

        line-height: 1.875;

        text-align: center;

        margin: 0;

    }

}

/* 產品介紹 end */



/* 產品內頁 */

.product__banner {

    width: 100%;

}

.product__title {

    color: #333;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.12;

    letter-spacing: .05em;

    margin: 45px 0 15px;

}

.product__btnbox {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin: 45px 0 0;

}

.product__btn {

    display: block;

    width: 174px;

    height: 45px;

    color: #fff;

    font-size: 17px;

    font-weight: 400;

    line-height: 41px;

    text-align: center;

    border-radius: 22px;

    margin-left: 24px;

    transition: background-color .5s, border-color .5s;

}

.product__btn:first-child {

    margin: 0;

}

.product__btn-return {

    border: 2px solid #adadad;

    background-color: #adadad;

}

.product__btn-return:hover {

    color: #fff;

    border-color: #04a9f4;

    background-color: #04a9f4;

}

.product__btn-contact {

    border: 2px solid #04a9f4;

    background-color: #04a9f4;

}

.product__btn-contact:hover {

    color: #fff;

    background-color: #adadad;

    border-color: #adadad;

}

@media (max-width:991px) {

    .product__title {

        font-size: 22px;

        margin: 20px 0 15px;

    }

    .product__btnbox {

        margin: 15px 0 0;

    }

}

/* 產品內頁 end */



/* 聯絡我們  */

.contact__title {

    color: #333;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.2;

    text-align: center;

    margin: 0 0 25px;

}

textarea {

    height: 100px;

    resize: none;

}

.contact__product {

    position: relative;

    padding: 50px 18px;

    border: 1px solid #dcdddd;

}

.contact__product-title {

    position: absolute;

    top: 15px;

    left: 18px;

    color: #777;

    font-size: 15px;

    font-weight: 300;

    line-height: 1;

    margin: 0;

}

.contact__product-box {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}

.contact__product-banner {

    width: 150px;

}

.contact__productblock {

    width: calc(100% - 150px);

    padding-left: 35px;

}

.contact__productblock-title {

    color: #333;

    font-size: 18px;

    font-weight: 300;

    line-height: 1.55;

    letter-spacing: .05em;

    margin: 0;

}

.contact__productblock-text {

    color: #777;

    font-size: 15px;

    font-weight: 300;

    line-height: 1.66;

    letter-spacing: .05em;

    margin: 10px 0 0;

}

.contact-form .common__btn {

    margin-top: 32px;

}

.company {

    display: flex;

    flex-wrap: wrap;

    padding: 55px 0;

}

.company__item {

    width: 25%;

    text-align: center;

    padding: 0 19px;

}

.company__item .fa {

    font-size: 33px;

}

.company__title {

    color: #333;

    font-size: 18px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: .05em;

    margin: 8px 0 0;

}

.company__text {

    display: block;

    font-family: 'Noto Sans TC', '微軟正黑體';

    color: #555;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.3;

    letter-spacing: .05em;

    word-break: break-all;

    margin: 15px 0 0;

}

@media (max-width:991px) {

    .contact-form {

        margin: 0;

    }

    .contact__title {

        font-size: 22px;

        margin: 0 0 20px;

    }

    .contact-form .common__btn {

        margin-top: 15px;

    }

    .company {

        padding: 20px 0;

    }

    .company__text {

        margin: 10px 0 0;

    }

    .company__item:nth-child(n + 3) {

        margin-top: 20px;

    }

    .contact__productblock {

        padding-left: 15px;

    }

}

@media (max-width:991px) and (min-width:576px) {

    .company__item {

        width: 50%;

    }

}

@media (max-width:575px) {

    .company__item {

        width: 100%;

    }

    .company__item:nth-child(2) {

        margin-top: 20px;

    }

    .contact__product-box {

        flex-direction: column;

    }

    .contact__productblock {

        width: 100%;

        padding: 20px 0 0;

    }

}

/* 聯絡我們 end */



/* google translate */

html, body {

    max-width: 100%;

    overflow-x: hidden;

}

a {

    cursor: pointer;

}

.langswitch {

    position: relative;

    display: inline-block;

    margin: 38px 0 0 30px;

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}

.navbar-tiny .langswitch {

    margin-top: 28px;

}

.langswitch::before {

    content: '';

    position: absolute;

    top: 0;

    right: calc(100% + 5px);

    width: 24px;

    height: 24px;

    background-image: url(../images/common/google_translate.png);

}

.langswitch__current {

    position: relative;

    display: flex;

    color: #888;

    font-size: 15px;

    font-weight: 300;

    line-height: 23px;

    padding: 0 27px 0 15px;

    border: 1px solid #dcdddd;

    cursor: pointer;

}

.langswitch__current:hover {

    color: #555;

}

.navbar-tiny .nav li .langswitch__current {

    padding: 0 27px 0 15px;

}

.langswitch__current .fa {

    position: absolute;

    top: 1px;

    right: 5px;

    font-size: 20px;

    color: #b5b5b6;

}

.langswitch__hiddenbox {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background-color: #fff;

    border: 1px solid #dcdddd;

}

.langswitch__hiddenbox--open {

    padding: 8px 10px;

    display: block

}

.langswitch__hiddenbox-btn {

    display: block;

    color: #888;

    font-size: 15px;

    font-weight: 300;

    line-height: 1;

    text-align: center;

    margin: 12px 0 0;

}

.langswitch__hiddenbox-btn:first-child {

    margin: 0;

}

.navbar-tiny .nav li .langswitch__hiddenbox-btn {

    margin: 12px 0 0;

    padding: 0;

}

.navbar-tiny .nav li .langswitch__hiddenbox-btn:first-child {

    margin: 0;

}

.langswitch__hiddenbox-btn:hover {

    color: #555;

}

.navbar-fixed-top .navbar-collapse {

    max-height: 100%;

}

@media (max-width:991px) and (min-width:768px) {

    .langswitch,

    .navbar-tiny .langswitch {

        margin-top: 20px;

    }

}

@media (max-width:767px) {

    .langswitch {

        margin: 20px 0 20px 38px;

    }

}

/* google translate end */



/* loading */

#loader-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1031;

  background-color: #FFF;

}



#loader {

  display: block;

  position: relative;

  left: 50%;

  top: 50%;

  width: 150px;

  height: 150px;

  margin: -75px 0 0 -75px;

  border: 3px solid transparent;

  border-top-color: #04a9f4;

  border-radius: 50%;

  animation: loader 2s linear infinite;

}

#loader::before {

  content: "";

  position: absolute;

  top: 5px;

  left: 5px;

  right: 5px;

  bottom: 5px;

  border: 3px solid transparent;

  border-top-color: #04a9f4;

  border-radius: 50%;

  animation: loader 3s linear infinite;

}

#loader::after {

  content: "";

  position: absolute;

  top: 15px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  border: 3px solid transparent;

  border-top-color: #04a9f4;

  border-radius: 50%;

  animation: loader 1.5s linear infinite;

}



@keyframes loader {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

/* loading end */



/* 0411 */

.slogan {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    padding: 70px 0;

}

.slogan__item {

    width: calc(33.3333% - 20px);

}

.slogan__title {

    color: #333;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.2;

    margin: 28px 0 0;

}

.slogan__text {

    color: #777;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.75;

    margin: 10px 0 0;

}

@media (max-width:991px) {

    .slogan {

        padding: 30px 0;

    }

    .slogan__item {

        width: 100%;

        margin: 20px 0 0;

    }

    .slogan__item:first-child {

        margin: 0;

    }

}

/* 0411 end */



/* 0628 CKE */



.cke_editable h1,

.cke_editable h2,

.cke_editable h3,

.cke_editable h4,

.cke_editable h5,

.cke_editable h6 {

    font-weight: 500;

    line-height: 1.4;

    margin: 0;

    color: #333;

}

.cke_editable h1 {

    font-size: 48px;

}

.cke_editable h2 {

    font-size: 40px;

}

.cke_editable h3 {

    font-size: 32px;

}

.cke_editable h4 {

    font-size: 28px;

}

.cke_editable h5 {

    font-size: 24px;

}

.cke_editable h6 {

    font-size: 20px;

}



.cke_editable p {

    margin: 0;

    font-size: 16px;

    font-weight: 300;

    color: #777;

    line-height: 1.7;

}

.cke_editable a {

    font-size: 16px;

    font-weight: 300;

    color: #04a9f4;

    line-height: 1.7;



    text-decoration: underline;



    -webkit-transition: opacity .3s;

       -moz-transition: opacity .3s;

        -ms-transition: opacity .3s;

         -o-transition: opacity .3s;

            transition: opacity .3s;

}

.cke_editable a:hover {

    opacity: .7;

}

.cke_editable ol {

    font-size: 15px;

    font-weight: 300;

    color: #777;

    line-height: 1.7;

    padding-left: 30px;



    list-style-type: decimal;

}

.cke_editable ul {

    font-size: 15px;

    font-weight: 300;

    color: #777;

    line-height: 1.7;

    padding-left: 30px;



    list-style-type: disc;

}

.cke_editable img {

    max-width: 100%;

    height: auto !important;

}



.cke_editable table {

    font-size: 16px;

    font-weight: 300;

    border-collapse: collapse;

    max-width: 100%;

}

.cke_editable td, .cke_editable th {

    padding: 10px 5px;

    white-space: normal !important;

    line-height: 1.7;

    border: 1px solid #ddd;

}



.cke_editable blockquote {

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;

    color: #333;



    padding: 5px 20px;

    margin: 10px 0px;

    border-style: solid;

    border-color: #ccc;

    border-width: 0 0 0 5px;

}



.cke_editable strong {

    font-weight: bold;

}



.cke_editable__table--scroll {

    width: 100%;



    overflow: auto;

}

.cke_editable__table--scroll::-webkit-scrollbar-track {

    background-color: #F5F5F5;

}

.cke_editable__table--scroll::-webkit-scrollbar {

    width: 8px;

    height: 8px;



    background-color: #F5F5F5;

}

.cke_editable__table--scroll::-webkit-scrollbar-thumb {

    background-color: #555;

}



/* /0628 CKE */