Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/*-- reset code --*/
body{
background:#fff;
}
body a{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
input[type="button"],input[type="submit"]{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
h1,h2,h3,h4,h5,h6{
margin:0;	
padding:0;
}	
p{
margin:0;
}
ul{
margin:0;
padding:0;
}
label{
margin:0;
}
button{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.btn btn-default  {
font-family: 'Tinos', sans-serif;
font-size:12px;
font-weight:500;
background-color:black;	
border:2px solid #fff;
border-radius:30px;
text-transform:uppercase;
color:#fff;
text-align:left;
padding: -5em 2em 2em -2em;/*-- /get stated --*/
}
/* services section */
.service-w3l-bg {
background: url(../images/bg1.jpg) no-repeat center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
z-index: 1;
}
.service-w3l-bg:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
}
.logo {
    float: left; /* 使logo浮动到左侧 */
    margin-right: 20px; /* 设置logo与网址之间的间距 */
}
/*-- gallery --*/
div#gallery {
background: #fff;
}
.gallery_grids {
margin-top: 3.2em;
}
.gallery_grid1 {
margin: 3em 0 0;
}
.column .gallery_effect {
position: relative;
}
.gallery-img-grid.hover14 {
padding: 1em 0;
}
a.sb {
display: block;
}
.hover14 figure {
overflow: hidden;
position: relative;
}
.hover14 figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-17deg);
-moz-transform: skewX(-17deg);
-o-transform: skewX(-17deg);
-ms-transform: skewX(-17deg);
transform: skewX(-17deg);
}
.hover14 figure:hover::before {
-webkit-animation: shine .95s;
-moz-animation: shine .95s;
animation: shine .95s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
/*-- //gallery --*/
.title-main p {
font-size: 14px;
text-transform: uppercase;
}
.w3l-bottom-grids-6 .area-box {
padding: 50px 35px;
position: relative;
z-index: 1;
border-radius: 8px;
box-shadow: 0 1rem 3rem var(--box-shadow-color-2);
background-color: var(--bg-color);
overflow: hidden;
transition: all 0.3s ease-out 0s;
}
.w3l-bottom-grids-6 .area-box img {
border-radius: 50%;
border: 5px solid #fff;
width: 100%;
height: 110px;
}
.w3l-bottom-grids-6 .area-box:hover {
transition: .3s;
box-shadow: 0 25px 98px 0 rgba(0, 0, 0, 0.1);
}
.w3l-bottom-grids-6 h4 a.title-head {
display: block;
color: var(--heading-color);
font-weight: 600;
margin: 15px 0 0 16px;
font-size: 18px;
line-height: 32px;
text-transform: uppercase;
}
.w3l-bottom-grids-6 h4 a.title-head:hover {
color: var(--primary-color);
}
.w3l-bottom-grids-6 .area-box:before {
position: absolute;
content: "";
top: -20px;
left: -26px;
width: 185px;
height: 185px;
background-color: #c0c0c0;
border-radius: 0 50%;
z-index: -1;
transition: all 0.2s ease-out 0s;
}
.w3l-bottom-grids-6 .area-box:hover:before,
.w3l-bottom-grids-6 .area-box.active:before {
background-color: var(--primary-color);
}
.w3l-bottom-grids-6 .area-box:after {
position: absolute;
content: "";
height: 0;
width: 0;
border-right: 25px solid var(--bg-color);
border-left: 25px solid transparent;
border-top: 25px solid transparent;
border-bottom: 25px solid var(--bg-color);
bottom: 20px;
right: 20px;
z-index: -1;
transition: all 0.2s ease-out 0s;
}
.w3l-bottom-grids-6 .area-box:hover:after,
.w3l-bottom-grids-6 .area-box.active:after {
border-right: 25px solid var(--primary-color);
border-bottom: 25px solid var(--primary-color);
}
@media (max-width: 1280px) {
.w3l-bottom-grids-6 h4 a.title-head {
font-size: 20px;
line-height: 30px;
}
}
@media (max-width: 991px) {
.w3l-bottom-grids-6 h4 a.title-head {
font-size: 22px;
line-height: 32px;
}
}
@media (max-width: 415px) {
.w3l-bottom-grids-6 .area-box {
padding: 40px 30px;
}
}
/*--/index-banner-slider--*/
.welcome-wthree-agileinfo {
padding: 0em 0 0em;
}
.welcome-wthree-agileinfo h3 {
font-family: 'Ubuntu', sans-serif;
font-size: 4em;
text-align: center;
color: #222;
text-transform: capitalize;
font-weight: 400;
}
.welcome-wthree-agileinfo p {
font-size: 4.2em;
text-align: center;
color: #909090;
width: 60%;
margin: 1em auto 2em;
line-height: 1.9em;
}
.work-details {
margin: 1.7em 0 0;
}
.work-details h3 {
font-size: 2em;
margin-bottom: .5em;
color:#eb5424;
font-family: 'Ubuntu', sans-serif;
font
}
.work-details h3 i.glyphicon.glyphicon-chevron-up {
font-size: 23px;
margin-right: 8px;
color: #29c0ff;
margin-left: 10px;
}
.work-details p {
font-size: 1em;
line-height: 1.9em;
color: #A0A0A0;
width: 86%;
margin: 0 auto;
}
.work-wrapper {
margin-top: 0em;
padding: 0;
}
.work-wrapper img {
width: 100%;
}
/*-- about--*/
.about-agileits,.services-w3,.clients,.contact-wthree,.gallery,.skills-w3ls{
padding:50px 0;
}
.about-agileits h3,.services-w3 h3,.clients h3,.contact-wthree h3,.gallery h3,.skills-w3ls h3{
font-size:28px;
text-transform:uppercase;
color:#000;
font-weight:700;
}
label.line{
background:#df4914;
height:3px;
width:5%;
display:block;
margin:5px auto;
}
label.line1{
background:#df4914;
height:3px;
width:3%;
display:block;
}
p.top-p{
color:#999;
line-height:28px;
width:70%;
margin:0 auto 40px auto;
text-align:center;
}
.about-right{
background: linear-gradient(rgba(43, 44, 47, 0.2), rgba(43, 44, 47, 0)), url(../images/photo-1450101499163-c8848c66ca85.png);
background-size:cover;
min-height:500px;
}
.text-image {
display: flex;
align-items: center;
}
.image-block {
width: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 500px;
}
/*經營理念間距調整*/
.text-block {
width: 50%;
padding: 100px 40px 100px 40px;
height: 500px;
float: right;
}
.text-block h2
{
font-family: '微軟正黑體', serif;
margin: -0.5em 0 0 0;
color:#000000;
font-size:24px;
text-align:left;
font-weight:bold;
padding:0em 2.2em 0em 2.3em;
text-transform: uppercase;
}
.text-block p
{
color:#000000;
font-size:16px;
line-height:28px;
font-weight:00;
text-align:justify;
padding:0.5em 0.5em 1.5em 3.5em;
}
/* 鼠标悬停时整个区域的明暗变化 */
.text-block {
transition: opacity 0.3s ease-in-out;
}
.text-image {
transition: opacity 0.3s ease-in-out;
}
.text-image:hover, .text-block:hover {
opacity: 0.9; /* 明暗变化的效果 */
/* 其他样式，例如背景颜色或阴影 */
}
.text-image:nth-child(even) .text-block {
float: left;
padding-left: 40px;
padding-right: 80px;
}
.text-image:nth-child(even) .image-block {
left: auto;
right: 0;
}
.text-image:nth-child(even) {
text-align: right;
}
@media only screen and (device-width: 1024px) and (device-height: 1366px),
       only screen and (device-width: 1366px) and (device-height: 1024px) {
.text-block {
width: 50%;
padding: 55px 50px 100px 0px !important;
height: 500px;
float: right;
}

	   }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.text-block {
width: 50%;
padding: 55px 50px 100px 0px !important;
height: 500px;
float: right;
}

	   }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (max-device-height: 1024px) {
.text-image {
flex-direction: column;
}
.image-block,
.text-block {
width: 100%;
height:450px;
}
.text-block {
padding: 75px 10px 100px 10px;
height: 450px;
}
.text-block h2
{
font-family: '微軟正黑體', serif;
margin: -1.5em 0 0 0;
color:#000000;
font-size:24px;
text-align:left;
font-weight:bold;
margin:0% -5% 0% -5.2%;
padding:0em -10em 0em -10em;
text-transform: uppercase;
}
.text-block p
{
color:#000000;
font-size:15px;
line-height:28px;
text-align:justify;
margin:0% -5% 0% -5%;
padding:0.5em -10em 0em -10em;
font-weight:300;
}
}
@media only screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-min-device-pixel-ratio: 2) {

.text-image {
flex-direction: column;
}
.image-block,
.text-block {
width: 100%;
height:450px;
}
.text-block {
padding: 75px 10px 100px 10px;
height: 450px;
}
.text-block h2
{
font-family: '微軟正黑體', serif;
margin: -1.5em 0 0 0;
color:#000000;
font-size:24px;
text-align:left;
font-weight:bold;
margin:0% -5% 0% -5.5%;
padding:0em -10em 0em -10em;
text-transform: uppercase;
}
.text-block p
{
color:#000000;
font-size:15px;
line-height:28px;
text-align:justify;
margin:0% -5% 0% -5%;
padding:0.5em -10em 0em -10em;
font-weight:300;
}
}
/*ipad 10.9*/
@media only screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-min-device-pixel-ratio: 2) {

.text-image {
flex-direction: column;
}
.image-block,
.text-block {
width: 100%;
height:450px;
}
.text-block {
padding: 75px 10px 100px 10px;
height: 450px;
}
.text-block h2
{
font-family: '微軟正黑體', serif;
margin: -1.5em 0 0 0;
color:#000000;
font-size:24px;
text-align:left;
font-weight:bold;
margin:0% -5% 0% -5.5%;
padding:0em -10em 0em -10em;
text-transform: uppercase;
}
.text-block p
{
color:#000000;
font-size:15px;
line-height:28px;
text-align:justify;
margin:0% -5% 0% -5%;
padding:0.5em -10em 0em -10em;
font-weight:300;
}
}
@media (max-width: 480px) {
.text-image {
flex-direction: column;
}
.image-block,
.text-block {
width: 100%;
height:250px;
}
.text-block {
padding: 75px 10px 100px 10px;
height: 550px;
}
.text-block h2
{
font-family: '微軟正黑體', serif;
margin: -1.5em 0 0 0;
color:#000000;
font-size:20px;
text-align:left;
font-weight:bold;
padding:0em 0em 0em 0em;
text-transform: uppercase;
}
.text-block p
{
color:#000000;
font-size:14px;
line-height:28px;
text-align:justify;
padding:0.5em 0em 0em 0em;
width:300px;
font-weight:300;
}
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
*, ::before, ::after {
box-sizing: border-box;
}
#card-text{
color:#000000;
font-size:16px;
text-align:justify;
}
.about-right6{
-webkit-filter: grayscale(90%);
background: linear-gradient(rgba(43, 44, 47, 0.2), rgba(43, 44, 47, 0)), url(../equipment/grind_02.jpg);
background-size:cover;
min-height:450px;
}
#about-left{
opacity: 1;
background:linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.2)), url(../img/news_b.png) no-repeat 0px 0px;
background-size:cover;
min-height:500px;
}
#about-left6{
opacity: 1;
background: #fafafa;
background-size:cover;
min-height:450px;
}
#about-left h4{
font-family: '微軟正黑體', serif;
margin: -0.5em 0 0 0;
color:#000000;
font-size:24px;
text-align:left;
font-weight:bold;
padding:0em 3.5em 0em 2.3em;
text-transform: uppercase;
}
/* For width 400px and larger: */ 
@media (max-width: 768px) {
.about-right{
background: linear-gradient(rgba(43, 44, 47, 0.6), rgba(43, 44, 47, 0.6)), url(../images/photo-1450101499163-c8848c66ca85.png);
width: 100%;
height: 570px;
overflow: hidden;
background-position:  center center;
background-repeat: no-repeat;
background-size: contain;
-webkit-background-size: cover;
-moz-background-size: cover;
}
#card-text{
color:#000000;
font-size:14px;
line-height:28px;
text-align:justify;
padding:0.8em 2.2em 1.5em 2.2em;
}
#about-left{
-webkit-filter: grayscale(70%);
opacity: 1;
background: #f7f7f7;
background-size:cover;
min-height:500px;
}
#about-left h4{
font-family: '微軟正黑體', serif;
margin: 0.5em 0 0 0;
color:#000000;
font-size:20px;
text-align:left;
font-weight:600px;
padding:0em 1.5em 0em 1.5em;
text-transform: uppercase;
}
.about-right h4{
font-family: 'Raleway', serif;
color:#fff;
font-size:20px;
text-align:left;
font-weight:bold;
margin-left:10px;
margin-top:60px;
width:250px;
}
.about-right p{
font-family: '微軟正黑體', serif;
color:#eee;
font-size:14px;
line-height:28px;
text-align:justify;
padding-right:20px;
}
}
/* --- 1. 解決重疊與連在一起的問題 --- */
.row1 {
    width: 100%;
    position: relative;
    background: #fff;
    clear: both;
    margin-bottom: 80px; /* 確保與下方區塊有足夠距離 */
    display: block;
}

.wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* --- 2. Slider 佈局：確保文字空間與實體高度 --- */
.new-feature-slider {
    width: 100%;
    position: relative;
    z-index: 5; /* 提升整個 slider 的層級 */
}

.new-feature-slider .feature-slide {
    width: 100%;
    display: none; /* 由 JS 控制切換 */
    box-sizing: border-box;
}

/* 當 active 時，強制使用 flex 並讓它佔據實體空間 (relative) */
.new-feature-slider .feature-slide.active {
    display: flex !important; 
    align-items: center;
    position: relative; 
    z-index: 10;
}

/* --- 3. 圖片區塊 (左側 50%) --- */
.new-feature-image-wrap {
    width: 50%;
    flex: 0 0 50%; /* 防止被擠壓 */
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1; 
}

.feature-slide-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 4. 文字區塊 (右側 50%) --- */
.block-wrap.w50:not(.new-feature-image-wrap) {
    width: 50%;
    flex: 0 0 50%; /* 確保分到一半空間 */
    padding: 0 6%;
    box-sizing: border-box;
    position: relative;
    z-index: 20; /* 文字層級拉高 */
    background-color: #ffffff; /* 確保文字背景不透明 */
}

.fakeh1 {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
}

p.fakeh2 {
    font-size: 16px;
    line-height: 1.8;
	     text-align: justify;
    color: #333;
    display: block !important;
}

/* --- 5. 按鈕精準還原 (同時解決消失問題) --- */
.new-feature-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 核心定位：精確鎖定在圖片右側邊緣，往左移 80px */
    transform: translate(-100%, -50%); 
    
    /* 給予極高的 z-index，確保它在圖片、文字、甚至 JS 切換層級之上 */
    z-index: 99999 !important; 
    
    width: 80px;
    height: 160px;
    pointer-events: auto; /* 確保點擊有效 */
}

/* 確保按鈕本身不被父層隱藏屬性影響 */
.controls .control {
    width: 80px;
    height: 80px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3) !important; /* 透明灰 */
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    visibility: visible !important; /* 強制可見 */
}

/* 繪製箭頭 */
.controls .control:before, .controls .control:after {
    width: 20px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform-origin: left center;
    content: "";
    background-color: #ffffff;
}
.controls .control.button-prev:before { transform: translate(-50%, -50%) rotate(45deg); }
.controls .control.button-prev:after { transform: translate(-50%, -50%) rotate(-45deg); }

.controls .control.button-next { transform: rotate(180deg); }
.controls .control.button-next:before { transform: translate(-50%, -50%) rotate(45deg); }
.controls .control.button-next:after { transform: translate(-50%, -50%) rotate(-45deg); }

.controls .control:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* --- 響應式修正：針對 iPad Pro 與所有手機 --- */
@media screen and (max-width: 1024px) {
    .new-feature-slider .feature-slide.active {
        flex-direction: column !important;
        display: block !important;
        position: relative !important;
    }

    .new-feature-image-wrap {
        width: 100% !important;
        position: relative !important;
        display: block !important;
        line-height: 0;
    }

    .feature-slide-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 關鍵定位：使用 vw 單位鎖定圖片底部 */
    .new-feature-controls {
        position: absolute !important;
        /* 重點：假設圖片比例為 3:2 (大多數產品照比例)
           高度 = 寬度(100vw) * (2/3) = 66.6vw
           按鈕高度是 50px，所以減去 50px 就能完美貼齊下邊緣
        */
        top: calc(100vw * 0.666) !important; 
        margin-top: -50px !important; /* 將按鈕往回抽，貼在圖片內側 */
        
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        width: 100px !important;
        height: 50px !important;
        display: flex !important;
        flex-direction: row !important;
        z-index: 9999 !important;
    }

    /* 如果您的圖片比例更扁 (例如 16:9)，請將上面的 0.666 改為 0.5625 */

    .controls .control {
        width: 50px !important;
        height: 50px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    .block-wrap.w50:not(.new-feature-image-wrap) {
        width: 100% !important;
        padding: 30px 20px !important;
        /* 確保文字不會被絕對定位的按鈕蓋住 */
        position: relative;
        z-index: 1;
    }
	.fakeh1 {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
}

p.fakeh2 {
    font-size: 14px;
    line-height: 2;
	     text-align: justify;
    color: #333;
    display: block !important;
}
}
@import url("https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans+Condensed:300");
.wrapper1 {
width: 100%;
height: 100%;
font: normal 16px/26px Open Sans Condensed, sans-serif;
color: #000000;
padding: 30px 20px;
box-sizing: border-box;
position: relative;
background: linear-gradient(3deg, #f4f4f4 60%, #f9f9f9 40%);
}
.wrapper1::before,
.wrapper1::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px; /* 调整切割的高度 */
z-index: -1;
}
.wrapper1::before {
background-color: #f5f5fa; /* 上半部分的背景颜色 */
transform: skewY(5deg); /* 调整切割的角度 */
height: 150px;
}
.wrapper1::after {
background-color: #f5f5fa; /* 下半部分的背景颜色 */
transform: skewY(4deg); 
height: 40px;
}
.block1 {
z-index: 1;
position: relative;
}
/*年度線*/
.block1:before {
content: "";
position: absolute;
height: calc(100% - 40px);
width: 1px;
background-color: #e5e5e5;
left: 50%;
margin-top: 100px;
}
.title {
font: 100 42px/52px Open Sans Condensed, sans-serif;
text-align: center;
padding: 20px;
transition: all 0.8s ease-in-out;
/*font-style:italic;*/
}
.event-description h2
{
font-size: 22px;
font-family: '微軟正黑體', sans-serif;
font-style:normal;
display: block;
margin: 0px auto;
color: #000000;
font-weight: bold;
}
.event-description p
{
font-family: '微軟正黑體', 'Arial', sans-serif;
font-weight: 100px;
font-size: 15px;
padding-top: 0px;
line-height:20px;
text-align:justify;
color: #000000;
}
/*.event-description p{*/
/*position: relative;*/
/*line-height: 1;*/
/*padding:0em 0.5em;*/
/*display: inline-block;*/
/*}*/
/*.event-description p:before, .event-description p:after { */
/*content:'';*/
/*width: 10px;*/
/*height: 10px;*/
/*position: absolute;*/
/*display: inline-block;*/
/*}*/
/*.event-description p:before {*/
/*border-left: solid 1px #000000;*/
/*border-top: solid 1px #000000;*/
/*top:0;*/
/*left: 0;*/
/*}*/
/*.event-description p:after {*/
/*border-right: solid 1px #000000;*/
/*border-bottom: solid 1px #000000;*/
/*bottom:0;*/
/*right: 0;*/
/*}*/
.each-event {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px 60px;
width: 500px;
position: relative;
border:0.5px solid #000000;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
/*圓點設定*/
.each-event:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: -27px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
border:0.5px solid #000000;
}
.left-bg {
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
background-color: #ffffff; /* 设置左边背景颜色 */
z-index: -1;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); /* 添加左侧斜角 */
}
.right-bg {
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 100%;
background-color: #f8f8fc; /* 设置右边背景颜色 */
z-index: -1;
}
.left-bg1 {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background-color: #f8f8fc; /* 设置左边背景颜色 */
z-index: -1;
}
.right-bg1 {
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background-color: #ffffff; /* 设置右边背景颜色 */
z-index: -1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}
.each-event:nth-child(odd) {
margin-left: calc(50% + 20px);
}
.each-event:nth-child(even) {
margin-left: calc(50% - 521px);
}
.each-event:nth-child(even):before {
left: calc(100% + 14px);
}
.each-event1 {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px 60px;
width: 500px;
position: relative;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
border:0.5px solid #000000;
}
.each-event1:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: -28px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
border:0.5px solid #000000;
}
.each-event1 {
margin-left: calc(50% + 20px);
}
.each-event2 {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px 60px;
width: 500px;
position: relative;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
border:0.5px solid #000000;
}
.each-event2:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: 514px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
border:0.5px solid #000000;
}
.each-event2 {
margin-left: calc(50% - 521px);
}
.each-event .connector {
position: absolute;
top: 50%;
left: -10px; /* 調整連結點的位置 */
transform: translate(0, -50%);
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.each-event::after {
content: "";
position: absolute;
top: 50%;
right: -14px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 10px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event:not(:first-child)::after {
display: block;
}
.each-event1 .connector {
position: absolute;
top: 50%;
left: -10px; /* 調整連結點的位置 */
transform: translate(0, -50%);
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.each-event1::after {
content: "";
position: absolute;
top: 50%;
left: -11px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(2% + 0px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event1:not(:first-child)::after {
display: block;
}
.each-event2 .connector {
position: absolute;
top: 50%;
left: -10px; /* 調整連結點的位置 */
transform: translate(0, -50%);
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.each-event2::after {
content: "";
position: absolute;
top: 50%;
right: -15px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 10px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event2:not(:first-child)::after {
display: block;
}
.title.non-focus {
font-size: 24px;
line-height: 34px;
transition: all 0.8s ease-in-out;
color: #ececec;
}
.each-event.non-focus {
color: #000000;
background: #fff;
margin-top: 90px;
transform: rotateZ(0deg);
transition: all 0.8s ease-in-out;
opacity: 0;
}
.each-event.non-focus:before {
opacity: 0;
background-color: #aaa;
}
.each-event1.non-focus {
color: #000000;
background: #fff;
margin-top: 90px;
transform: rotateZ(0deg);
transition: all 0.8s ease-in-out;
opacity: 0;
}
.each-event1.non-focus:before {
opacity: 0;
background-color: #aaa;
}
.each-event2.non-focus {
color: #000000;
background: #fff;
margin-top: 90px;
transform: rotateZ(0deg);
transition: all 0.8s ease-in-out;
opacity: 0;
}
.each-event2.non-focus:before {
opacity: 0;
background-color: #aaa;
}
.start-wrapper {
position: relative;
margin-top: 0px; /* 調整 "Start" 文字與時間線底部的間距 */
}
.start-event {
font-size: 24px; /* 調整 "Start" 文字大小 */
font-weight: 100px; /* 調整 "Start" 文字的粗細 */
text-align: center;
/* 添加背景顏色 */
}
.end-wrapper {
position: relative;
margin-top: 0px; /* 調整 "Start" 文字與時間線底部的間距 */
}
.end-event {
font-size: 24px; /* 調整 "Start" 文字大小 */
font-weight: 100px; /* 調整 "Start" 文字的粗細 */
text-align: center;
/* 添加背景顏色 */
}
.start-event.non-focus {
color: #000000;
background: #fff;
margin-top: 0px;
transform: rotateZ(0deg);
transition: all 2.8s ease-in-out;
opacity: 0;
font-size:50px;
}
.start-event.non-focus:before {
opacity: 0;
background-color: none;
}
.end-event.non-focus {
color: #000000;
background: #fff;
margin-top: 0px;
transform: rotateZ(0deg);
transition: all 2.8s ease-in-out;
opacity: 0;
font-size:50px;
}
.end-event.non-focus:before {
opacity: 0;
background-color: none;
}
/* 隱藏事件內容 */
.event-hidden {
display: none;
}
/*展開讀取更多歷史沿革*/
.event-hidden.expanded {
display: block;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.event-description h2
{
font-size: 16px;
font-family: '微軟正黑體', sans-serif;
font-style:normal;
display: block;
margin: 0px auto;
color: #000000;
font-weight: bold;
}
.event-description p
{
font-family: '微軟正黑體', 'Arial', sans-serif;
font-weight: 100px;
font-size: 14px;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
line-height:15px;
text-align:left;
color: #000000;
}
.event-description p{
position: relative;
display: inline-block;
}
.each-event 
{
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px auto;
width: 300px;
position: relative;
border:0.5px solid #000000;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
/*圓點設定*/
.each-event:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: -97px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
border:0.5px solid #000000;
}
.each-event:nth-child(odd) {
margin-left: calc(50% + 20px);
}
.each-event:nth-child(even) {
margin-left: calc(50% - 325px);
}
.each-event:nth-child(even):before {
left: calc(100% + 18px);
}
.each-event::after {
content: "";
position: absolute;
top: 50%;
right: -18px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 15px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event1 {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px auto;
width: 300px;
position: relative;
border:0.5px solid #000000;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.each-event1:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: -33px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
border:0.5px solid #000000;
}
.each-event1 {
margin-left: calc(50% + 25px);
}
.each-event1::after {
content: "";
position: absolute;
top: 50%;
left: -17px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 15px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event2 {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px auto;
width: 300px;
position: relative;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
border:0.5px solid #000000;
}
.each-event2:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: 317px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
border:0.5px solid #000000;
}
.each-event2 {
margin-left: calc(50% - 325px);
}
.each-event2::after {
content: "";
position: absolute;
top: 50%;
right: -18px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 15px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
}
/*手機歷史沿革部分*/
@media (max-width: 480px) {
.event-description h2
{
font-size: 16px;
font-family: '微軟正黑體', sans-serif;
font-style:normal;
display: block;
margin: 0px auto;
color: #000000;
font-weight: bold;
}
.event-description p
{
font-family: '微軟正黑體', 'Arial', sans-serif;
font-weight: 100px;
font-size: 14px;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
line-height:15px;
text-align:left;
color: #000000;
}
.event-description p{
position: relative;
display: inline-block;
}
.each-event 
{
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px auto;
width: 125px;
position: relative;
border:0.5px solid #000000;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
/*圓點設定*/
.each-event:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: -97px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
border:0.5px solid #000000;
}
.each-event:nth-child(odd) {
margin-left: calc(50% + 20px);
}
.each-event:nth-child(even) {
margin-left: calc(50% - 146px);
}
.each-event:nth-child(even):before {
left: calc(100% + 14px);
}
.each-event::after {
content: "";
position: absolute;
top: 50%;
right: -14px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 13px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event1 {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px auto;
width: 125px;
position: relative;
border:0.5px solid #000000;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.each-event1:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: -28px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
border:0.5px solid #000000;
}
.each-event1 {
margin-left: calc(50% + 20px);
}
.each-event1::after {
content: "";
position: absolute;
top: 50%;
right: -14px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 11px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
.each-event2 {
background-color: none;
color: #000000;
padding: 20px 20px 20px 20px;
margin: 60px auto;
width: 125px;
position: relative;
border-radius: 0px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
border:0.5px solid #000000;
}
.each-event2:before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: 140px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
border:0.5px solid #000000;
}
.each-event2 {
margin-left: calc(50% - 148px);
}
.each-event2::after {
content: "";
position: absolute;
top: 50%;
right: -16px; /* 調整連結線的位置 */
transform: translateY(-50%);
width: calc(0.9% + 15px); /* 調整連結線的長度 */
height: 0.5px; /* 調整連結線的寬度 */
background-color: #d4d4d4;
}
}
.load-more-btn {
position: relative;
z-index: 2; /* 將按鈕的顯示層級提前 */
display: block;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin: 10px auto;
background-color: #007bff;
}
.load-more-btn {
background-color: transparent;
font-family: "Dosis", sans-serif;
font-size: 16px;
font-weight: 300;
color: #000000;
text-transform: uppercase;
letter-spacing: 1px;
height: 50px;
line-height: 50px;
padding: 0 25px;
border: none;
border-right: 1px solid #000000;
text-decoration:none;
transition: color 0.2s ease-in-out 0s;
}
.load-more-btn:before, .load-more-btn:after {
content: "";
position: absolute;
top: 0;
}
.load-more-btn:before {
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
background-color: #ffffff;
z-index: -1;
}
.load-more-btn:after {
right: -1px;
width: 1px;
height: 50px;
background-color: #000000;
transform: rotate(-90deg);
transform-origin: center;
z-index: 0;
transition: width 0.3s ease-in-out, transform 0.2s ease-in-out 0.3s, z-index 0.15s ease-in-out;
}
.load-more-btn:hover {
color: #ffffff;
transition: color 0.2s ease-in-out 0.25s;
}
.load-more-btn:hover:after {
z-index: -1;
transform: rotate(0deg);
width: 100%;
transition: transform 0.2s ease-in-out, width 0.3s ease-in-out 0.2s;
}
.new-feature-controls {
z-index:1;
bottom: 242px;
right: 50%;
}
#cookie-policy {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
background-color: #f8f9fa;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: block;
}
/* features section */
.w3l-features {
background: linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.3)), url(../images/services_01.jpg) no-repeat center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
z-index: 1;
min-height:500px;
}
.w3l-features::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 18%);
z-index: -1;
}
.w3l-features .call-grids-w3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 12px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.w3l-features {
background:none;
}
.w3l-features::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 /0%);
z-index: -1;
}
.w3l-features .call-grids-w3 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0;
}
.wthree-services-grid1 .wthree-services-captn1 {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid2 .wthree-services-captn2 {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid3 .wthree-services-captn3 {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid4 .wthree-services-captn4 {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid5 .wthree-services-captn5 {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid6 .wthree-services-captn6 {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
}
@media (max-width: 480px) {
/* features section */
.w3l-features {
background:none;
}
.w3l-features::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 /0%);
z-index: -1;
}
.w3l-features .call-grids-w3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 12px;
}
.wthree-services-grid1 .wthree-services-captn1 {
margin-top:25px;
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid2 .wthree-services-captn2 {
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid3 .wthree-services-captn3 {
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid4 .wthree-services-captn4 {
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid5 .wthree-services-captn5 {
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
.wthree-services-grid6 .wthree-services-captn6 {
background-color: rgba(0, 0, 0, 0.5);
display:block;
top: 0%;
}
}
/* //features section */
#about-right3{
font-family: '微軟正黑體', serif;
padding:1.6% 2.5em 5% 2.5em;
text-align: center;
background:#f1f1f1;
min-height:36.6em;
border: 16.5px solid #efefef;
}
.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li:last-child .link {
border-bottom: 0;
}
#remove_alink{
text-decoration:none
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #b63b4d;
}
.accordion li.open i {
color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion li.default .submenu {display: block;}
/**
* Submenu
-----------------------------*/
/* For width 400px and larger: */ 
@media (max-width: 768px) {
.about-right3 { 
background: linear-gradient(rgba(43, 44, 47, 0.6), rgba(43, 44, 47, 0.6)), url(../images/haulian_shutterstock_615980543.jpeg);
width: 100%;
height: 570px;
overflow: hidden;
background-position:  center right;
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
}
}
.about-right3 h4{
color:#000000;
font-size:24px;
text-align:left;
font-weight:500;
margin-bottom:15px;
text-transform: uppercase;
padding-top:5.6%;
}
.about-right3 p{
color:#000000;
font-size:14px;
line-height:28px;
text-align:justify;
}
/*-- 狀態左右邊界調整--*/
.container1 {
width: 80%;
margin:0 18% 0 18%;   
}
/*-- counter--*/
.count_color {	
background: #f8f8f8;
}
#count_his {	
font-size: 24px;
font-weight: bold;
color:#000000;
padding-top:40px
padding-left:5px
}
#count_his1 {	
font-size: 24px;
font-weight: 700px;
color:#000000;
padding-left:47px
}
#watermark {
}
.box11 { 
border: 1px solid #000000
-moz-box-shadow: 0 0 0px #000000; 
-webkit-box-shadow: 0 0 px #000000; 
box-shadow:0 0 0px #000000; 
opacity:1 ;
border-radius: 50px;
width: 175px;
height:40px;
padding-top:50px
} 
.box12 { 
border: 0px solid #000000;
-moz-box-shadow: 0 0 0px #000000; 
-webkit-box-shadow: 0 0 px #000000; 
box-shadow:0 0 0px #000000; 
background-color: #f1f1f1;
opacity:1;
border-radius: 200px;
width: 1000px;
} 
.count_back {
background-color: #f7f7f7;
min-height:200px;
margin-bottom:-60px;
}
.w3_agile_stats_grid {
}
.agile_count_grid_left {
float: left;
width: 25%;
}
.agile_count_grid_left span,.agile_count_grid_right p{
font-size:2em;
}
.agile_count_grid_right {
float: left;
}
.agile_count_grid_left i {
font-size: 28px;
line-height: 2.2em;
color: #2c2c2c;
}
.agile_count_grid_right p{
color: #000000;
font-weight: bold;
text-align:center;
}
.w3_agile_stats_grid h4 {
font-size: 18px;
color: #2c2c2c;
text-transform: uppercase;
text-align:center;
}
/*-- //counter--*/
/* //stats */
p.sec-p{
margin-top:20px;
}
.about-right a{
color:#fff;
border:2px solid #fff;
padding:8px 20px;
display:inline-block;
margin-top:20px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.about-right a:hover{
color:#000;
border:2px solid #000;
}
/* 經營理念三角形陰影 */
.about-right:before {
position: absolute;
top: 0;
right: 0px;
content: '';
border-bottom:395px solid transparent;
border-right: 400px solid #373737;
opacity:0.1; 
z-index: 1;
}
.about-right6 a{
color:#fff;
border:2px solid #fff;
padding:8px 20px;
display:inline-block;
margin-top:20px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.about-right6 a:hover{
color:#000;
border:2px solid #000;
}
/* 經營理念三角形陰影 */
.about-right6:before {
position: absolute;
top: 0;
left: 0px;
content: '';
border-top:450px solid transparent;
border-left: 120px solid #fafafa;
opacity:1; 
z-index: 1;
}
.wrapper5 {
padding: 50px;
position: relative;
overflow-x: hidden;
max-width: 500px;
}
.wrapper5 .icon5 {
position: absolute;
top: 0;
height: 100%;
width: 10px;
display: flex;
align-items: center;
}
.icon5:first-child {
left: 0;
justify-content: flex-start;
}
.icon5:last-child {
right: 0;
justify-content: flex-end;
}
.icon5 i {
cursor: pointer;
font-size: 2.2rem;
text-align: center;
opacity:0.3;
}
.icon5 i:hover {
font-size: 3rem;
opacity:1;
}
.icon5:first-child i {
margin-left: 0px;
margin-top: -5px;
} 
.icon5:last-child i {
margin-right: 0px;
margin-top: -7px;
} 
.wrapper5 .tabs-box5 {
scroll-behavior: smooth;
}
.tabs-box5.dragging {
}
.tabs-box5 .tab5 {
}
.tabs-box5 .tab5:hover{
}
.tabs-box5.dragging .tab5 {
}
.tabs-box5 .tab5.is-active{
}
/*** Gallery ***/
.gallery-fltr {
padding-top: 30px;
padding-bottom: 30px;
}
.filter-button
{
font-size: 16px;
text-align: center;
color: #555;
margin-bottom: 30px;
margin-left: 10px;
padding: 6px 15px;
border-radius: 0;
background-color: #fff;
border:1px solid #1ba4df;
}
.filter-button:hover
{
font-size: 16px;
text-align: center;
color: #ffffff;
background-color: #1ba4df;
border-color: #1ba4df;
}
.gallery-fltr .gall-buttons-ul a.active{
background-color: #1ba4df !important;
border-radius: 0;
border-color:#1ba4df;
color: #fff;
}
.filter {
margin-bottom: 0px;
}
.gall-buttons-ul li{
display: inline-block;
}
ul.gall-buttons-ul {
padding-left: 0;
}
a.filter:focus {
outline: none;
}
/* tab list item */
/*.tabs .tabs-list{*/
/*display: flex;*/
/*list-style: none;*/
/*margin-left:14px;*/
/*}*/
/*.tabs .tabs-list li{*/
/*padding: 10px 25px;*/
/*background: #E8E8E8;*/
/*margin: 40px 0px;*/
/*transition: all 0.3s linear;*/
/*cursor: pointer;*/
/*font-family: sans-serif;*/
/*font-size: 14px;*/
/*color: #000;*/
/*display:inline-block*/
/*}*/
/*.tabs .tabs-list li:hover{*/
/*color:#1F9ED2;*/
/*}*/
/*.tabs .tabs-list li a{*/
/*text-decoration: none;*/
/*color:#000000;*/
/*}*/
/*.tabs .tabs-list li a:hover{*/
/*text-decoration: none;*/
/*color:#1F9ED2;*/
/*}*/
/*.tabs .tabs-list1{*/
/*display: flex;*/
/*list-style: none;*/
/*margin-left:14px;*/
/*}*/
/*.tabs .tabs-list1 li{*/
/*padding: 10px 25px;*/
/*background: #E8E8E8;*/
/*margin: 40px 0px;*/
/*transition: all 0.3s linear;*/
/*cursor: pointer;*/
/*font-family: sans-serif;*/
/*font-size: 14px;*/
/*color: #000;*/
/*display:inline-block*/
/*}*/
/*.tabs .tabs-list1 li:hover{*/
/*color:#1F9ED2;*/
/*}*/
/*.tabs .tabs-list1 li a{*/
/*text-decoration: none;*/
/*color:#000000;*/
/*}*/
/*.tabs .tabs-list1 li a:hover{*/
/*text-decoration: none;*/
/*color:#1F9ED2;*/
/*}*/
/*/* Tab content section */*/
/*.tabs .tab{*/
/*display:none;*/
/*width:100%;*/
/*min-height:200px;*/
/*height:auto;*/
/*border-radius:0px;*/
/*/*padding:20px 15px;*/*/
/*/*background-color:gainsboro;*/*/
/*color:darkslategray;*/
/*clear:both;*/
/*}*/
/*.tabs .tab h3{*/
/*border-bottom:3px solid cornflowerblue;*/
/*letter-spacing:0px;*/
/*font-weight:normal;*/
/*/*padding:5px;*/*/
/*text-align: left;*/
/*}*/
/*.tabs .tab p{*/
/*line-height:20px;*/
/*letter-spacing: 1px;*/
/*}*/
/*/* When active state */*/
/*.tabs .tabs-list li.active{*/
/*background-color:#bebebe !important;*/
/*color:#ffffff !important;*/
/*}*/
/*.tabs .tabs-list1 li.active{*/
/*background-color:#bebebe !important;*/
/*color:#ffffff !important;*/
/*}*/
/* Image Gallery / Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*div.row {*/
/*	display: flex;*/
/*	flex-flow: row wrap;*/
/*	align-items: flex-start;*/
/*    margin-left: -2rem;*/
/*    padding: 0 2rem 2rem 2rem;*/
/*}*/
/* Version 4, create a grid with 2x2 tiles */
div.gallery-tile-2 {
position: relative; 
flex: 50%;
max-width: 49%;
margin: 3.5%;
}
/* Version 5, create a row with 4 tiles */
div.gallery-tile-1 {
position: relative; 
display: inline-block;
margin:5% 1% 1% 1%;
text-align: center;
}
div.gallery-tile-2 img, div.gallery-tile-1 img {
display: inline-block;
object-fit: cover;
transition: transform .5s, filter 1.5s ease-in-out;
filter: grayscale(70%);
text-align: center;
font-family: 'Raleway', 'Arial', sans-serif;
position: relative;
margin:5% 1% 1% 1%;
min-width: 100px;
max-width: 220px;
overflow: hidden;
text-align: center;
background: #000000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
div.gallery-tile-2:hover img, div.gallery-tile-1:hover img {
filter: grayscale(0);
transition: all .3s;
}
div.gallery-title-2, div.gallery-title-1 {
position: absolute;
top: auto;
bottom: 40%;
left: 0;
right:0;
background: rgba(0,0,0, 0.6);
ptext-shadow: 0 0 6px rgba(0,0,0,.9);
}
div.gallery-title-2 h3 {
font-family: 'Raleway', sans-serif;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.3rem;
text-transform: uppercase;
color: #ffffff;
text-align: center;
margin: 0.5em 0.5em 0.3em 0.5em;
padding-top:0.5em;
}
div.gallery-title-1 h3 {
font-family: 'Raleway', sans-serif;
font-weight: 500;
font-size: 0.95rem;
line-height: 1.1rem;
text-transform: uppercase;
color: #ffffff;
text-align: center;
margin: 0.5em 0.5em 0.25em 0.5em;
padding-top:0.5em;
}
div.gallery-title-2 h4 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
line-height: 1.9rem;
letter-spacing: 0.01rem;
color: #ffffff;
text-align: center;
margin: 0rem 0.5rem 0.75rem 0.5rem;
text-overflow: ellipsis;
}
div.gallery-title-1 h4 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 2rem;
line-height: 1.6rem;
letter-spacing: 0.01rem;
color: #ffffff;
text-align: center;
margin: 0rem 0.5rem 0rem 0.5rem;
text-overflow: ellipsis;
}
div.gallery-title-2 a, div.gallery-title-1 a {
color: #fff;
}
/* Resizing all module menus for mobile */
@media screen and (max-width: 1000px) {
div.gallery-tile-2 {
flex: 100%;
max-width: 99%;
margin: 0.5%;
min-height: 200px;
}
div.gallery-title-2 h3 {
text-align: left;
font-size: 0.93rem;
line-height: 1.1rem;
margin-left: 1.55rem;
margin-right: 1rem;
padding-bottom: 0.3rem;
}
div.gallery-title-2 h4 {
text-align: left;
line-height: 1.2rem;
font-size: 1.3rem;
margin-left: 1.1rem;
margin-right: 1rem;
}
div.gallery-title-1 h3 {
font-size: 0.8rem;
line-height: 1rem;
}
div.gallery-title-1 h4 {
font-size: 1.2rem;
line-height: 1.4rem;
}
}
@media screen and (max-width: 700px) {
div.gallery-tile-2 {
flex: 100%;
max-width: 99%;
margin: 0.5%;
min-height: 230px;
}
div.gallery-tile-1 {
flex: 50%;
max-width: 49%;
margin: 0.5%;
}
}

/* Fixed sidenav, full height */
.sidenav {
height:100%;
width: 0;
position: fixed;
display: block;
top: 50px;
left: 0;
background: #ffffff;
color: #ffffff;
overflow-y: auto;
transition: 0.5s;
padding-bottom: 50px;
z-index: 9999999999999999;
}


/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 15px 6px 15px;
text-decoration: none;
font-size: 16px;
color: #ffffff;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
font-weight:bold;
letter-spacing:1px;
}


/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 0px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
/*--banner-bottom-*/
.bnr-btm-left ,.bnr-btm-right{
text-align: center;
background-color: #000000;
padding: 3em;
}
.bnr-btm-right{
background-color: #99abd5;
}
.bnr-btm-left:after {
position: absolute;
top: 0;
right: -53px;
content: '';
border-top: 0px solid transparent;
border-bottom: 181px solid transparent;
border-left: 53px solid #161616;
z-index: 1;
}
.holder img {
-webkit-filter: grayscale(90%);
opacity: 5;
transition: all 300ms!important;
-webkit-transition: all 300ms!important;
-moz-transition: all 300ms!important;
width:250px;
height:170px;
}
.holder.smooth {
padding: 0em 1.2em 0em 1.7em;
}
.holder.smooth {
float: left;
width: 25%;
}
.holder.smooth {
float: left;
width: 50%;
margin: 1em auto 0.1em;
}
.recent-places {
margin: 1em 0em 0em 0em;
}
.recent-places h4{
font-family: '微軟正黑體', sans-serif;
color: #ffffff;
font-size: 1.8em;
text-transform: uppercase;
margin: 0em 0em 1.5em 0em;
float:left;
font-weight: 600;
}
.recent-places h5 {
float: right;
width: 80%;
background: url(../images/hd-bg.png) 0% 73% repeat-x;
display: inline-block;
height: 15px;
margin:0.2em 0em 0em 0em;
}
/* Smooth Caption */
.smooth:hover img{
cursor: pointer;
box-shadow: 0px 0px 2px #ffffff;
}
.go-left{
background-color: rgba(0,0,0,0.5);
color: #FFFFFF;
position: absolute;
bottom: 0px;
right: -600px;
width: 360px;
text-align:center;   
font-size: 20px;
margin: 10px;
padding: 10px;
-webkit-transition: 0.5s Ease;
-moz-transition: 0.5s Ease;
-o-transition: 0.5s Ease;
transition: 0.5s Ease;
}
.smooth:hover > .go-left{    
right:0px;    
}
.go-top{
background-color: hsla(0, 0%, 11%, 0.6);
color: #FFFFFF;
position: absolute;
bottom: 0px;
top: 800px;
width:250px;
text-align:center;   
font-size:15px;
overflow: hidden;
-webkit-transition: 0.5s Ease;
-moz-transition: 0.5s Ease;
-o-transition: 0.5s Ease;
transition: 0.5s Ease;
}
.smooth:hover > .go-top{    
top:0px;    
}
.go-top h3{
font-family: '微軟正黑體', sans-serif;
color: #fff;
font-size: 1.2em;
text-transform: uppercase;
}
.go-top p{
font-size: 14px;
padding: 2em 1em 2em 1em;
text-align:justify;  
color: #FFF;
line-height: 20px;
font-family: verdana, arial, helvetica, helve, sans-serif;
font-family: '微軟正黑體', sans-serif;
}
.go-top a{
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #fff;
font-size: 12px;
padding: .5em 2em;
background: black;
font-weight: 500;
text-align: center;
border: solid 2px black;
border-radius:20px;
margin-left: 10px ;
}
.go-top a:hover{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #902F0D;
border: solid 2px #902F0D;
color: #fff;
border-radius:20px;
}
.content-item {
background-color:#f2f2f2;
height: 485px;	   
overflow: hidden;
position: relative;
width: 100%;
background-size: cover;
margin-top: 30px ;
}
/* For width 400px and larger: */ 
@media (max-width: 768px) {
.content-item  { 
-webkit-filter: grayscale(20%);
opacity: 5;
background:linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.1)),  url(../images/istockphoto-896358708-612x612.jpeg) no-repeat 0px 0px;
width: 100%;
height: 650px;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
}
.content-item .overlay {
bottom: 0;
height: 0;
opacity: .2;
position: relative;
left: 0;
text-indent: -9999px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
width: 0;
}
.content-item:hover .overlay {
border-bottom:1250px solid transparent;
border-left:1250px solid #000000;
border-right: 1250px  solid transparent;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.content-item .corner-overlay-content {
bottom: 15px;
color: #000000;
font-size: 1em;
position: absolute;
left: 15px;
/*-- w3layouts --*/
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.content-item:hover .corner-overlay-content {
opacity: 1;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.content-item .overlay-content {
bottom: 0;
left: 0;
opacity: 1;
padding: 3em 3em 7em 3em;
position: absolute;
width: 100%;
text-align: justify;
margin: 0 auto;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.content-item .overlay-content h2 {
border-bottom: 0px solid #333;
padding: 0 0 0.6em;
}
.content-item:hover .overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.overlay-content h2{
font-size:2em;
color:#000000;
margin:0 0 1em;
}
.overlay-content p{
color:#000000;
font-size:14px;
line-height:28px;
text-align:justify;
/*-- agileits --*/
}
.about-left1 h3{
font-family: '微軟正黑體', serif;
text-transform:capitalize;
font-size:1em;
color:#999;
}
.about-left1 h3 span{
display:block;
font-size:1.1em;
}
.about-left1 h3 {
font-family: '微軟正黑體', serif;
text-transform: capitalize;
font-size: 1.5em;
color: #1F9ED2;
}
.about-right1 i{
color:#ffffff;
opacity: 1;
margin:0em 0px 0px 80px;
font-size: 30px;
}
.about-right i{
color:#ffffff;
margin:1em 0;
font-size: 24px;
}
.about-left1 {
-webkit-filter: grayscale(30%);
opacity: 0.9;
padding:3.5% 3em 4.7% 3em;
text-align: center;
margin-top:2.1%;
background:linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.1)),  url(../images/m_vision_1.png) no-repeat 0px 0px;
background-size: 100%;
background-color: transparent;
overflow: hidden;
background-repeat: no-repeat;
}
.about-left1:hover {
-webkit-filter: grayscale(10%);
opacity: 1;
}
.about-left1 p{
color:#000000;
font-size:14px;
line-height:28px;
text-align:justify;
padding:0em 0em 0em 0em;
/*-- agileits --*/
}
#code_img {
width:110px;
height:40px;
cursor:pointer;
vertical-align:top;
}
#btnSend {
border-radius:0px;
}
.about-left1 h2 {
font-family: '微軟正黑體', serif;
margin: 2.5em 0 0 0;
color:#000000;
font-size:24px;
text-align:left;
font-weight:500;
padding:3em 0em 0.5em 0em;
text-transform: uppercase;
}
/*h4.card-text*/
/*{font-family: '微軟正黑體', serif;*/
/*margin: 0.5em 0 0 0;*/
/*color:#000000;*/
/*font-size:24px;*/
/*text-align:left;*/
/*font-weight:500;*/
/*padding:0em 2.5em 0em 1.4em;*/
/*text-transform: uppercase;*/
/*}*/
p.card-text{
color:#000000;
font-size:14px;
line-height:28px;
text-align:justify;
padding:0.8em 3.5em 1.5em 3.5em;
/*-- agileits --*/
}
.about-right1 {
padding:0em 0em 3em 0em;
margin-left:0px;
}
.about-right1 h2 {
font-family: '微軟正黑體', serif;
text-transform: capitalize;
color:#000000;
font-size:24px;
text-align:left;
font-weight:500;
margin-bottom:-1.3em;
text-transform: uppercase;
}
.about-right1 p {
text-align: justify;
margin-top:2.2em		
}
.about-left2 h3{
text-transform:capitalize;
font-size:1em;
color:#999;
}
.about-left2 h3 span{
display:block;
font-size:1.1em;
}
.about-left2 {
padding:5em 5em 5em 5em;
text-align: center;
background-color: #000000;
margin-top:30px;
margin-right:15px;
background:linear-gradient(rgba(43, 44, 47, 0.86), rgba(43, 44, 47, 0.86)),  url(../images/S__4718636.jpg) no-repeat 0px 0px;
background-size: cover;
}
.about-left2 h3 {
text-transform: capitalize;
font-size: 1.5em;
color: #1F9ED2;
}
.about-right2 i{
color:#ffffff;
margin:0em 0;
font-size: 24px;
}
.about-left2 p{
color:#fff;
font-size:14px;
line-height:28px;
text-align:justify;
padding-bottom:0px;
/*-- agileits --*/
}
.about-left2 h2 {
margin: 0em 0 0;
color:#fff;
font-size:24px;
text-align:left;
font-weight:700;
padding:0.5em 0em 0.5em 0em;
}
.about-right2 {
padding:0em 0em 3em 0em;
text-align: center;
margin-left:-15px;
}
.about-right2 h2 {
margin: 0.5em 0 0;
color:#fff;
font-size:24px;
text-align:left;
font-weight:700;
margin-bottom:-5px;
}
.about-right2 p {
text-align: justify;
padding-bottom:-100px;
}
.about-right-w3l {
background: #f6f6f6;
background-size: cover;
min-height: 420px;
width: 60%;
margin-top:0px;
border: 16px solid #4e4e4e;
}
.about-right-w3l {
text-align: left;
margin-top:-10px;
margin-bottom:70px;
}
.about-right-w3l h3 {
margin: 0.5em 0 0;
color:#ffffff;
font-size:24px;
text-align:left;
font-weight:700;
margin-bottom:-5px;
text-transform: uppercase;
}
.about-right-w3l h2 {
margin: 0.5em 0 0;
color:#fff;
font-size:24px;
text-align:left;
font-weight:700;
margin-bottom:10px;
}
.about-right-w3l p {
color:#fff;
font-size:14px;
line-height:28px;
text-align:justify;
padding-top:-20px;
width: 100%;
}
.about-left-w3ls h2 {
margin: 1em 0 0;
color:#ffffff;
font-size:24px;
text-align:left;
font-weight:700;
padding-bottom:0.5em;
}
.about-left-w3ls {
margin-top:-10px;
margin-bottom:250px;	 	 
padding:1em 5em 3.7em 5em;
width: 40%;
background: linear-gradient(rgba(43, 44, 47, 0.86), rgba(43, 44, 47, 0.86)), url(../images/injex.jpg) no-repeat 0px 0px;
background-size:cover;
}
.about-left-w3ls p {
color:#fff;
font-size:14px;
line-height:28px;
text-align:justify;
padding-top:0px;
}
.about-left-w3ls img {
width: 100%;
}
.about-bottom-agile{
position:relative;
margin-top:-15px;
}
.sub-img {
position: absolute;
bottom: 9px;
left: 190px;
z-index: 999;
width: 400px;
height: auto;
}
.sub-img img {
width: 100%;
border: 16px solid #4e4e4e;
}
/*-- footer --*/
.agileits-footer-top {
padding:35px 0;
}
.w3ls-address-grid i{
color: #00bfff;
font-size: 20px;
float: left;
margin: 0 4% 0 0;
display: inline-block;
line-height: 45px;
}
.w3-address1{
float: left;
margin-top: 0.7em;
}
.w3-address1 h6{
font-size: 18px;
color: #fff;
line-height: 22px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.w3-address1 p {
font-size: 13px;
color: #cecece;
margin-top: 4px;
}
.w3-address1 p a{
text-decoration:none;
color: #fff;
}
.w3-address1 p a:hover{
text-decoration:underline;
}
.address-more h4{
color:#fff;
font-size:2em;
margin: 0 15px 0.7em;
}
.agileinfo-footer{
background:#24282e;
}
.agileits-footer-bottom {
border-top: 1px double #353b44;
padding: 1em 0;
}
.footer-class{
float: left;
color: #fff;
font-size: 13px;
padding-top: 13px;
letter-spacing: 1px;
}
.footer-class a{
color: #e40a77;
text-decoration:none;
}
.footer-class a:hover {
color:#fff;
text-decoration:underline;
}
.w3layouts-agileits-social{
float:right;
}
.w3layouts-agileits-social li{
display:inline-block;
}
.w3layouts-agileits-social li a i {
margin: 0 8px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.w3layouts-agileits-social li a i.fa.fa-facebook, .w3layouts-agileits-social li a i.fa.fa-twitter, .w3layouts-agileits-social li a i.fa.fa-rss, .w3layouts-agileits-social li a i.fa.fa-vk {
height: 30px;
width: 30px;
line-height: 30px;
color: #FFF;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
text-align:center;
border:1px solid transparent;
}
.w3layouts-agileits-social li a i.fa.fa-facebook:hover {
color: #3b5998;
border:1px solid #3b5998;
}
.w3layouts-agileits-social li a i.fa.fa-twitter:hover{
color: #55acee;
border:1px solid #55acee;
}
.w3layouts-agileits-social li a i.fa.fa-rss:hover{
color: #f26522;
border:1px solid #f26522;
}
.w3layouts-agileits-social li a i.fa.fa-vk:hover{
color: #45668e;
border:1px solid #45668e;
}
.w3layouts-agileits-social li:nth-child(2){
margin:.5em 0;
}
.w3layouts-agileits-social li:nth-child(3){
margin:0 0 .5em 0;
}
/*-- //footer --*/
.table-hidden tbody{
overflow-y: auto;/*設定卷軸 auto 是有超過我的高度的時候才會出現卷軸*/
height: 32.4em;/*自己設定*/
display: block;
}
.table-hidden tr {
width: 100%;
display: inline-table;
}
.table-hidden1 tbody{
overflow-y: auto;/*設定卷軸 auto 是有超過我的高度的時候才會出現卷軸*/
height: 398px;/*自己設定*/
display: block;
}
.table-hidden1 tr {
width: 100%;
display: inline-table;
}
/*--copy-right--*/
.copy {
font-family: '微軟正黑體', sans-serif;
font-size: 12px;
text-align: center;
background-color:#ffffff!important;
}
.copy p {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
padding: 20px 20px;
background: #1e2223;
}
.copy p a {
color: #ff304d;
text-decoration: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.copy p a:hover{
color: #fff!important;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.testimonial {
color: #fff;
position: relative;
margin: 50px 0;
padding: 90px 0;
text-align: center;
background: linear-gradient(rgba(43, 44, 47, 0.8), rgba(43, 44, 47, 0.8)), url(../images/collabation.jpeg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;--*/
}
.testimonial .container {
max-width: 760px;
}
.about-page .testimonial {
padding-bottom: 90px;
}
.testimonial  h3.text-center{
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:30px;
font-weight:400;
line-height: 30px;
padding: 10px 0 20px;
text-transform:uppercase;
}
.testimonial p.text-center{
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:14px;
font-weight:500;
line-height: 0px;
padding: 10px 0 40px;
text-transform:capitalize;
}
.testimonial .testimonial-slider-nav {
position: relative;
width: 300px;
margin: 0 auto;
}
.testimonial .testimonial-slider-nav .slick-slide {
position: relative;
opacity: 0;
transition: .5s;
}
.testimonial .testimonial-slider-nav .slick-active {
opacity: 1;
transform: scale(1.3);
}
.testimonial .testimonial-slider-nav .slick-center {
transform: scale(1.8);
z-index: 1;
}
.testimonial .testimonial-slider-nav .slick-slide img {
position: relative;
display: block;
margin-top: 37px;
margin-left: 7px;
width: 80%;
height: auto;
border-radius: 100px;
}
.testimonial .testimonial-slider {
position: relative;
margin-top: 15px;
padding-top: 50px;
}
.testimonial .testimonial-slider::before {
position: absolute;
content: "";
width: 60px;
height: 65px;
top: 0;
left: calc(50% - 30px);
}
.testimonial .testimonial-slider h3 {
color: #fff;
font-size: 24px;
font-weight: 700;
line-height: 20px;
padding-top: 10px;
font-family: '微軟正黑體', sans-serif;
font-style: italic;
text-align:left;
}
.testimonial .testimonial-slider h4 {
font-size: 14px;
font-weight: 300;
color: #fff;
margin-bottom: 10px;
line-height: 0px;
}
.testimonial .testimonial-slider p {
color: #fff;
font-size: 15px;
width: 100%;
font-weight: 400;
margin-top: 0px;
text-align:justify;
line-height: 20px;
letter-spacing: 1px;	
}
/*.col-md-3 {*/
/*text-align: center;*/
/*padding-bottom: 0px;*/
/*border-right: 0.5px solid #eeeeee;*/
/*}*/
/*.col-md-3:last-child {*/
/*border-right: 0px solid black;*/
/*}*/
/*.counter {*/
/*animation-duration: 1s;*/
/*animation-delay: 0s;*/
/*color:#000000;*/
/*}*/
/*@media (max-width: 991px) {*/
/*.col-md-3 {*/
/*border-right: 0px dashed black;*/
/*border-bottom: 1px dashed black;*/
/*width: 50%;*/
/*margin: auto auto;*/
/*}*/
/*.col-md-3:last-child {*/
/*border-bottom: 0px dashed black;*/
/*}*/
/*}*/
/* 样式上层的 "Home" 链接 */
.treeview ul li:first-child div a {
color: #007bff; /* 修改链接颜色为蓝色 */
font-weight: bold; /* 加粗字体 */
}
/* 样式其他链接 */
.treeview ul li div a {
color: #444; /* 修改链接颜色为默认颜色 */
font-weight: normal; /* 恢复正常字体粗细 */
}
/* 鼠标悬停时的链接样式 */
.treeview ul li div a:hover {
text-decoration: underline; /* 链接下划线效果 */
}
/* 添加连接线的伪元素 */
.treeview ul li div:before {
content: "";
width: 30px;
height: 1px;
background-color: #444;
position: absolute;
top: 50%;
bottom: 50%;
left: 0;
z-index: -1; /* 将线条置于背后 */
}
/* 使连接线与链接垂直对齐 */
.treeview ul li div:before {
transform: translateY(-50%);
}
/* 鼠标悬停时的连接线样式 */
.treeview ul li div:hover:before {
background-color: #007bff; /* 链接悬停时的颜色 */
}
/*----start-video----*/
/* --- 通用電腦版樣式 --- */
.video {
    margin-bottom: 15px;
}

.video-bg {
    /* 這裡保持 fixed 給電腦版使用 */
    background: linear-gradient(rgba(43, 44, 47, 0), rgba(43, 44, 47, 0)), url(../images/DJI_0033.jpg) no-repeat;
    background-attachment: fixed;
    background-position: center 80px;
    min-height: 540px;
    position: relative;
    background-size: cover;
}

.video-bg a {
    height: 101px;
    width: 100px;
    display: inline-block;
    background: url(../images/index-media-cover-art-play-button-overlay-5.png) no-repeat 0px 0px;
    position: absolute;
    top: 50%; /* 改用 50% 搭配 transform 達成完美居中 */
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.video-bg a:hover {
    opacity: 1;
}

.light-box-info iframe {
    width: 100%;
    min-height: 500px;
}

.video-grid-pos {
    color: #ffffff;
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    text-align: center;
}

/* --- iPad Pro 12.9 橫屏 (Landscape) --- */
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .video {
        background: none;
        text-align: center;
        padding: 0;
    }
    .video-bg {
        /* 核心修正：iOS 必須改回 scroll 否則圖片會位移或消失 */
        background-attachment: scroll !important; 
        background-position: center center !important;
        background-size: cover !important;
        min-height: 640px;
    }
    .video-bg a {
        height: 81px;
        width: 80px;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* --- iPad Pro 12.9 直屏 (Portrait) --- */
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .video {
        background: none;
        text-align: center;
        padding: 0;
    }
    .video-bg {
        /* 核心修正：iOS 必須改回 scroll */
        background-attachment: scroll !important;
        background-position: center center !important;
        background-size: cover !important;
        min-height: 640px;
    }
    .video-bg a {
        height: 81px;
        width: 80px;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* 額外建議：針對其他 iPad 尺寸（如 iPad Air/Mini）也應做相同處理 */
@media only screen and (max-width: 1024px) {
    .video-bg {
        background-attachment: scroll !important;
    }
}
/* --- 手機版影片區域修正 --- */
@media (max-width: 480px) {
    .video {
        background: none;
        text-align: center;
        /* 核心修正：移除 margin-top: -300px; 避免重疊 */
        margin-top: 0; 
        padding: 0;
        margin-bottom: 20px;
    }

    .video-bg {
        /* 核心修正：確保無非法字元，使用 cover 填滿 */
        background: linear-gradient(rgba(43, 44, 47, 0), rgba(43, 44, 47, 0)), 
                    url(../images/DJI_0033.jpg) no-repeat center center;
        background-size: cover !important; /* 使用 cover 才能撐滿背景不留白 */
        background-attachment: scroll !important; /* 手機版務必使用 scroll */
        min-height: 300px; /* 手機版高度通常不需要到 540px，可視需求調整 */
        position: relative;
    }

    .video-bg a {
        height: 60px; /* 稍微縮小播放按鈕，更適合手機 */
        width: 60px;
        display: inline-block;
        background: url(../images/index-media-cover-art-play-button-overlay-5.png) no-repeat center center;
        background-size: contain;
        position: absolute;
        /* 使用百分比置中修正 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        opacity: 0.6; /* 手機版通常預設稍微亮一點，方便觸控 */
    }
}
.p3_style{  
font-size: 32px;
font-family: 'Spectral SC', sans-serif;
font-weight: 600;
color: #ffffff;
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
text-align: center;
text-transform:uppercase;
}
.p5_style{  
font-size: 14px;
font-family: 'Spectral SC', sans-serif;
font-weight: 600;
color: #ffffff;
position: absolute;
width: 100%;
text-align: justify;
text-transform:uppercase;
}
.video-bg h3{	
color: #ffffff;
position: absolute;
bottom: 0%;
left: 0;
width: 100%;
text-align: left;
}
/*-- /reset code --*/
/*-- navbar --*/
*,*:before,*:after {
box-sizing:border-box;
}
.page-wrapper {
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
}
#addtocart {
}
.cart-item {
position:absolute;
height:24px;
width:24px;
top:-10px;
right:-10px;
}
.cart-item :before {
content:'1';
display:block;
line-height:24px;
height:24px;
width:24px;
font-size:12px;
font-weight:600;
background:#ff0000;
color:white;
border-radius:20px;
text-align:center;
}
.cart-item.sendtocart {
.cart-item {
display:block;
animation: xAxis 1s forwards cubic-bezier(1.000,0.440,0.840,0.165);
&:before {
animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
}
}
.cart {
position:fixed;
top:24px;
right:40px;
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
border-radius:3px;
}
.cart i {
font-size:30px;
color:#000000;
}
.cart:before {
content:attr(data-totalitems);
font-size:12px;
font-weight:600;
position:absolute;
top:-11px;
right:-11px;
background:#ff0000;
line-height:24px;
padding:0 5px;
height:22px;
min-width:22px;
color:white;
text-align:center;
border-radius:24px;
}
.shake {
animation: shakeCart .4s ease-in-out forwards;
}
@keyframes xAxis {
100% {
transform: translateX(calc(50vw - 105px));
}
}
@keyframes yAxis {
100% {
transform: translateY(calc(-50vh + 75px));
}
}
@keyframes shakeCart {
25% {
transform:translateX(6px)
}
50% {
transform:translateX(-4px);
}
75% {
transform:translateX(2px);
}
100% {
transform:translateX(0);
}
}
.header-1 {
background: url(../images/banner1.jpg) 0px 0px no-repeat;
background-size: cover;
min-height: 380px;
}
.overlay3 {
background: #000000;
color: #666666;
position: absolute;
height: 100%;
width: 100%;
z-index: 5000;
text-align: center;
padding-top: 40%;
-ms-opacity: .50;
opacity: .50;
}
.overlay3 span {
font-size:30px;
}
/*-- banner --*/
.gallery-wthreegrids {
padding: 0;
}
.gallery-grid {
padding: 0; 
}
.gallery-grid img {
min-height: 240px;
}
.gallery-grid.gallery-grid3 {
float: right;
}
.gallery-grid.gallery-text, .gallery-grid.gallery-text2, .gallery-grid.gallery-text3 {
padding: 1.5em 3em;
min-height: 17.13em;
background-size: contain;
background-color: rgba(120,120,120,0.1);
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
text-align:justify;
}
.gallery-grid-row h4 {
font-weight:800px
margin-top: -2em;
line-height: 2em;
font-size: 1.5em;
color: #000000;
margin-bottom: 0em;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
}
.gallery-grid p { 
font-weight:400px
font-size: 1.2em;
color: #000000;
line-height: 1.6em;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
}
.gallery-grid.gallery-text:before {
content: '';
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid rgba(100,100,100,0);
top: 42%;
left: -15px;
position: absolute; 
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
} 
.gallery-grid.gallery-text3:before {
content: ''; 
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid rgba(100,100,100,0);
position: absolute;
top: 42%;
right: -15px;
z-index:9;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;	
} 
.gallery-grid-row:hover .gallery-grid{
background: rgba(1,1,1,0.8);
}
.gallery-grid-row:hover .gallery-grid h4{
color: #ffffff;
}
.gallery-grid-row:hover .gallery-grid p {
color: #ffffff;
}
.gallery-grid-row:hover .gallery-grid.gallery-text:before {
border-right-color:rgba(30,30,30,0.9);
} 
.gallery-grid-row:hover .gallery-grid.gallery-text3:before {
border-left-color:rgba(30,30,30,0.9);
}
.carousel-caption h2,
.carousel-caption h3 {
font-size: 3.3em;
font-weight: 600;
letter-spacing: 1px;
}
.carousel-caption h2 span,
.carousel-caption h3 span {
font-weight: 600;
}
.carousel-caption p {
letter-spacing: 4px;
font-size: 1em;
line-height: 1.8em;
font-weight: 300;
color: #fff;
margin: 1em auto 2em;
width: 70%;
}
.carousel-caption a {
color: #fff;
letter-spacing: 1px;
padding: 11px 20px;
background: none;
font-size: 0.9em;
border-radius: 0;
border: 1px solid #fff;
}
.carousel-caption a:hover {
background: #ff4f81;
border: 1px solid #ff4f81;
}
.codes {
padding: 5em 0;
background: #fff;
}
.codes.agileitsbg2 {
background: #E74C3C;
background-image: -webkit-linear-gradient(#ff9d2f, #ff6126);
background-image: -moz-linear-gradient(#ff9d2f, #ff6126);
background-image: -ms-linear-gradient(#ff9d2f, #ff6126);
background-image: linear-gradient(#ff9d2f, #ff6126);
padding-bottom: 10em;
}
.codes.agileitsbg3 {
background: #3498DB;
padding-bottom: 10em;
}
.codes.agileitsbg4 {
background: #2ECC71;
padding-bottom: 10em;
}
.p-mask h4 {
font-family: '微軟正黑體', sans-serif;
color:#ffffff;
font-size: 18px;
text-decoration: none;
line-height: 3em;
text-align: center;
margin-bottom: -35px;
}
.p-mask i {
opacity: 0.7;
display: block;
width: 35px;
height: 35px;
background: #000000;
border-radius: 100%;
font-size: 17px;
color: #ffffff;
line-height: 35px;
margin-left: 45%;
margin-top: -2%;
text-align:center;
transition: all .4s ease-in-out 0s
}
.p-mask5 i {
opacity: 0.7;
display: block;
width: 35px;
height: 35px;
background: #000000;
border-radius: 0px;
font-size: 17px;
color: #ffffff;
line-height: 35px;
margin-left: 0%;
margin-bottom: 0%;
text-align:center;
transition: all .4s ease-in-out 0s
}
@media (max-width: 768px) {
.p-mask i {
opacity: 0.7;
display: block;
width: 35px;
height: 35px;
background: #000000;
border-radius: 100%;
font-size: 17px;
color: #ffffff;
line-height: 35px;
margin-left: 38%;
margin-top: -2%;
text-align:center;
transition: all .4s ease-in-out 0s
}
}
i.mask  {
width: 30px;
height: 30px;
font-size: 18px;
color: #000000;
background: #ffffff;
line-height: 30px;
border-radius: 5px;
margin-right:0.5em;
}
h4.pmask {
font-family: '微軟正黑體', sans-serif;
color: #000000;
font-size: 15px;
text-align: center;
font-weight: 400;
}
h4.pmask:hover {
color: #1F9ED2;
font-weight: 500;
}
i.pmask {
color: #ffffff;
background: #000000;
font-size: 16px;
}
.p-mask p {
font-family: '微軟正黑體', sans-serif;
color: #ffffff;
text-align: justify;
}
.gallery_grid0{
position:relative;
overflow:hidden;
}
.gallery_grid{
position:relative;
overflow:hidden;
}
.gallery_grid2{
position:relative;
overflow:hidden;
}
.gallery_grid3{
position:relative;
overflow:hidden;
}
.gallery_grid3_1{
position:relative;
overflow:hidden;
}
.gallery_grid4{
position:relative;
overflow:hidden;
}
.gallery_grid5{
position:relative;
overflow:hidden;
}
.gallery_grid11{
position:relative;
overflow:hidden;
}
.gallery_grid12{
position:relative;
overflow:hidden;
}
.gallery_grid13{
position:relative;
overflow:hidden;
}
.gallery_grid16{
position:relative;
overflow:hidden;
}
.gallery_grid18{
position:relative;
overflow:hidden;
}
.gallery_grid24_1{
position:relative;
overflow:hidden;
}
.gallery_grid_industry_all{
position:relative;
overflow:hidden;
}
.gallery_grid0 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid2 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid3 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid3_1 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid4 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid5 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid11 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid12 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid13 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid16 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid18 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid24_1 .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid_industry_all .p-mask{
opacity: 0;
visibility: hidden;
background: rgba(0.1, 0.1, 0.1, 0.1);
top: 0%;
position: absolute;
padding:41% 0em;
width: 100%;
}
.gallery_grid0:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid2:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid3:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid3_1:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid4:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid5:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid11:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid12:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid13:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid16:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid18:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid24_1:hover .p-mask{
opacity: 1;
visibility: visible;
}
.gallery_grid_industry_all:hover .p-mask{
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.gallery_grid .p-mask
{
}
}
.p-mask1 h4 {
font-family: '微軟正黑體', sans-serif;
color:#ffffff;
font-size: 24px;
text-decoration: none;
line-height: 1.7em;
text-align: center;
}
.p-mask1 p {
font-family: '微軟正黑體', sans-serif;
margin: 0.7em;
font-size: 14px;
margin-right:0em;
color: #ffffff;
text-align: center;
}
.p-mask2 h4 {
font-family: '微軟正黑體', sans-serif;
color:#ffffff;
font-size: 24px;
text-decoration: none;
line-height: 1.7em;
text-align: center;
}
.p-mask2 p {
font-family: '微軟正黑體', sans-serif;
margin: 0.7em;
font-size: 14px;
color: #ffffff;
text-align: center;
}
.p-mask2 i {
color:#ffffff;
font-size: 20px;
text-decoration: none;
text-align: left;
}
/*-- features --*/
.features .agileits-title,.address .agileits-title{
margin-bottom: 3em;
} 
.features ul.nav.nav-tabs {
border: none;
position: absolute;
right: 15%;
top: 5%;
z-index: 999;
background: #fbfbfb;
border-radius:10px;
}
.features .tabs {
position: relative;
}
.features ul.nav.nav-tabs li a {
font-size: 1.2em;
color: #000000;
font-weight: bold;
border: none;
border-bottom: 3px solid transparent;
padding: 10px;
margin-right: 2em;
}
#skill_text
{
position: relative;
right: 56%;
top: 5%;
font-size: 1.8em;
font-weight: bold;
color: #000000;
}
#skill_ptext
{
position: relative;
right: 17%;
top: 15%;
font-size: 1.1em;
color: #000000;
line-height:22px;
text-align:justify;
}
.features ul.nav.nav-tabs li.active a {
color: #000000;
background: none;
border-bottom-color: #000000;
font-weight:bold;
} 
.features ul.nav.nav-tabs li a:hover { 
background: none;
color: #1F9ED2;
}
.features-left.agileinfo-img,.features-left.agileinfo-img2,.features-left.agileinfo-img3,.features-left.agileinfo-img4{
background: url(../equipment/20190822-IMG_4499.jpg)no-repeat center 0px;
background-size: cover;
min-height: 33em;
padding: 0;
-moz-animation: fadeInRight .5s ease;
-webkit-animation: fadeInRight .5s ease;
-ms-animation: fadeInRight .5s ease;
-o-animation: fadeInRight .5s ease;
animation: fadeInRight .5s ease;
}
.features-left.agileinfo-img2{
background: url(../equipment/大型射出機.jpg)no-repeat center 0px; 
background-size: cover;
-moz-animation: fadeInRight .5s ease;
-webkit-animation: fadeInRight .5s ease;
-ms-animation: fadeInRight .5s ease;
-o-animation: fadeInRight .5s ease;
animation: fadeInRight .5s ease;
}
.features-left.agileinfo-img3{
background: url(../equipment/equipment_04.jpg)no-repeat center 0px; 
background-size: cover;
-moz-animation: fadeInRight .5s ease;
-webkit-animation: fadeInRight .5s ease;
-ms-animation: fadeInRight .5s ease;
-o-animation: fadeInRight .5s ease;
animation: fadeInRight .5s ease;
}
.features-left.agileinfo-img4{
background: url(../equipment/coating.jpg)no-repeat center 0px; 
background-size: cover;
-moz-animation: fadeInRight .5s ease;
-webkit-animation: fadeInRight .5s ease;
-ms-animation: fadeInRight .5s ease;
-o-animation: fadeInRight .5s ease;
animation: fadeInRight .5s ease;
}
.features-right {
padding: 6.4em 10em 8em;
background: #fbfbfb;
float: right;
}
/*-- //features --*/
.overlay2
{
position: fixed;
z-index: 98;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background:#fbfbfb;
}
.overlay2 img
{
width: 40%;
z-index: 999;
opacity: 0.9;
}
@media (max-width: 768px) {
.overlay2 img
{
width: 100%;
z-index: 999;
opacity: 0.9;
}
}
.overlayContent
{
z-index: 99;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 50%;
height: 30%;
}
.overlayContent h2
{
font-family: '微軟正黑體', sans-serif;
font-size: 16px;
font-weight: bold;
color: #000;
}
.overlayContent img
{
width: 80px;
height: 80px;
}
.header-search-wrapper {
float: right;
position: relative;
}
#p_overlay
{
font-family: '微軟正黑體', sans-serif;
font-size: 23px;
font-weight: bold;
color: #000000;
}
/*.overlay1 {*/
/*height: 28%;*/
/*width: 100%;*/
/*display: none;*/
/*position: fixed;*/
/*z-index:9999999999999999;*/
/*top: 10%;*/
/*left: 0;*/
/*background-color: #ffffff;*/
/*background:linear-gradient(rgba(43, 44, 47, 0.5), rgba(43, 44, 47, 0.5)),  url(../images/search.png) no-repeat 0px 0px;*/
/*-moz-backface-visibility: hidden;*/
/*-webkit-backface-visibility: hidden;*/
/*opacity: 1;*/
/*background-size: cover;*/
/*}*/
/*@media screen and (min-width: 768px) and (max-width: 1024px) and orientation:landscape) {*/
/*.overlay1 {*/
/*height: 25%;*/
/*width: 100%;*/
/*display: none;*/
/*position: fixed;*/
/*z-index:9999999999999999;*/
/*top: 45.5%;*/
/*left: 0;*/
/*background-color: #ffffff;*/
/*background:linear-gradient(rgba(43, 44, 47, 0.5), rgba(43, 44, 47, 0.5)),  url(../images/search.png) no-repeat 0px 0px;*/
/*-moz-backface-visibility: hidden;*/
/*-webkit-backface-visibility: hidden;*/
/*opacity: 1;*/
/*background-size: cover;*/
/*}*/
/*}*/
.overlay-content2 {
position: relative;
top: 55%;
margin-top:-34px
}
/*.closebtn {*/
/*position: absolute;*/
/*top: 26%;*/
/*right: 0.5em;*/
/*font-size: 30px;*/
/*cursor: pointer;*/
/*color: #ffffff;*/
/*/* -- 讓關閉鈕在最上層 */*/
/*z-index:999999999999999999;*/
/*}*/
.closebtn:hover {
color: #ccc;
}
/* -- // */
.overlay1 input[type=text] {
padding: 12px;
font-size: 16px;
border: none;
float: center;
min-width: 20%;
background-color: #ffffff;
border-radius: 30px 0px 0px 30px;
border: 1.5px solid #e4e4e4;
height:51px;
}
.overlay1 input[type=text]:hover {
background: #ebebeb;
}
.overlay1 button {
border-radius: 0 30px 30px 0;
float: center;
min-width: 7%;
padding: 17px;
background: #1F9ED2;
color: #ffffff;
font-size: 14px;
border: none;
cursor: pointer;
margin-left:-4px;
height:51.5px;
}
.overlay1 button:hover {
background: #171717;
color: #ffffff;
}
@media (max-width: 768px) {
.overlay1 {
height: 12%;
width: 100%;
display: none;
position: fixed;
top: 7.8%;
left: 0;
background-color: #ffffff;
opacity: 1;
}
.overlay-content2 {
position: relative;
top: 55%;
margin-top:-26px
}
.overlay1 input[type=text] {
padding: 12px;
font-size: 16px;
border: none;
float: center;
min-width: 15%;
background-color: #ffffff;
border-radius: 30px 0px 0px 30px;
border: 1.5px solid #e4e4e4;
height:41px;
}
.overlay1 button {
border-radius: 0 30px 30px 0;
float: center;
width: 24%;
padding: 11.7px;
background: #1F9ED2;
color: #ffffff;
font-size: 14px;
border: none;
cursor: pointer;
margin-left:-4px;
height:41.5px;
}
}
/* -- //TOP HEADER */ 
/*--search--*/
.cd-main-header {
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
.cd-main-header {
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible {
-webkit-transform: translateX(-260px);
-moz-transform: translateX(-260px);
-ms-transform: translateX(-260px);
-o-transform: translateX(-260px);
transform: translateX(-260px);
}
.nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible {
-webkit-transform: translateX(260px);
-moz-transform: translateX(260px);
-ms-transform: translateX(260px);
-o-transform: translateX(260px);
transform: translateX(260px);
}
.cd-header-buttons {
position: absolute;
display: inline-block;
top: 0px;
right: 0%;
}
.cd-header-buttons li {
display: inline-block;
}
.cd-search-trigger, .cd-nav-trigger {
position: relative;
display: block;
width: 100%;
height: 44px;
overflow: hidden;
white-space: nowrap;
color: transparent;
z-index: 3;
}
.cd-search-trigger::before, .cd-search-trigger::after {
content: '';
position: absolute;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-search-trigger::before {
/* lens */
top: 11px;
left: 45px;
width: 16px;
height: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 3px solid #000000;
margin-top:-10px
}
.cd-search-trigger::after {
/* handle */
height: 3px;
width: 8px;
background: #000000;
bottom: 25px;
right: 45px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search-trigger span {
/* container for the X icon */
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.cd-search-trigger span::before, .cd-search-trigger span::after {
/* close icon */
content: '';
position: absolute;
display: inline-block;
height: 3px;
width: 16px;
top: 23%;
margin-top: -2px;
left: 54%;
margin-left: -11px;
background: #000000;
opacity: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.cd-search-trigger span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search-trigger span::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-search-trigger.search-is-visible::before, .cd-search-trigger.search-is-visible::after {
/* hide search icon */
-moz-opacity: 0;
opacity: 0;
}
.cd-search-trigger.search-is-visible span::before, .cd-search-trigger.search-is-visible span::after {
/* show close icon */
-moz-opacity: 1;
opacity: 1;
}
.cd-search-trigger.search-is-visible span::before {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-search-trigger.search-is-visible span::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-search {
position: absolute;
width: 100%;
top: 100%;
left: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-search input {
border-radius: 0;
border: none;
background: #fffffff;
width: 90%;
padding: 0 5%;
-webkit-box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
font-size: 1em;
padding: 1em 2em;
color: #000000;
border-radius: 30px 0px 0px 30px;
}
.cd-search i 
{
font-size: 16px;
}
.cd-search button {
background: #e5e5e5;
color: #535353;
border-radius: 0px 30px 30px 0px;   
margin-left:-5px
}
.cd-search button:hover {
background: #2d2d2d;
color: #ffffff;
}
.cd-search input::-webkit-input-placeholder {
color: #000000 !important;
}
.cd-search input::-moz-placeholder {
color: #000000 !important;
}
.cd-search input:-moz-placeholder {
color: #000000 !important;
}
.cd-search input:-ms-input-placeholder {
color: #000000 !important;
}
.cd-search input:focus {
outline: none;
}
.cd-search.is-visible {
-moz-opacity: 1;
opacity: 1;
visibility: visible;
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
/*--//search--*/
@media screen and (max-width: 768px) {
/left/
.side-collapse-container-left{
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container-left.out{
left:70%;
}
.side-collapse-left {
top:85px;
bottom:0;
left:0;
width:70%;
position:fixed;
overflow:hidden;
ransition:width .4s;
}
.side-collapse-left.in {
width:0;
}
.side-collapse-container-right{
position:relative;
right:0;
transition:right .4s;
}
.side-collapse-container-right.out{
right:50%;
}
.side-collapse-right {
top:85px;
bottom:0;
left:0;
width:50%;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse-right.in {
width:0;
}
}
.carousel.slide.grid_3.grid_4 {
border-top: 10px solid #3ACFD5;
border-bottom: 10px solid #3a4ed5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 10px 100%;
-moz-background-size: 10px 100%;
}
.carousel.slide.grid_3.grid_4 {
border-top: 10px solid #3ACFD5;
border-bottom: 10px solid #3a4ed5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 10px 100%;
-moz-background-size: 10px 100%;
background-size: 10px 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}
.carousel-indicators {
bottom: 10%;
left: 50%;
}
.carousel-indicators1 {
bottom: 5%;
left: 50%;
}
.carousel-caption {
position: inherit;
min-height: 630px;
padding-top: 15em;
text-align: center;
}
.carouse2-caption {
position: inherit;
min-height: 415.5px!important;
padding-top: 15em;
text-align: center;
opacity:1 ;
}
.carousel-control {
line-height: 44em;
}
.carousel-control1 {
line-height: 29em;
}
.glyphicon.fa-solid.fa-chevron-left {
font-size: 50px;
}
.glyphicon.fa-solid.fa-chevron-right {
font-size: 50px;
}
.carousel-caption h3 {
font-family: 'Orbitron', sans-serif;
color:#fff;
font-size: 32px;
font-weight: bold;
text-transform:uppercase;
text-align:left;
margin: 75px 20px 10px 26px;
}
.carousel-caption h2 {
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:20px;
text-transform:lowercase;
font-weight:400;
text-align:left;
margin: -10px 0px 10px 27px;
border-radius: 300px;
}
@media (max-width: 768px) {
.carousel-caption h3 {
font-family: 'Orbitron', sans-serif;
color:#fff;
font-size: 22px;
font-weight: 550px;
text-transform:uppercase;
text-align:left;
margin: 75px 20px 10px 26px;
}
.carousel-caption h2 {
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:13px;
text-transform:lowercase;
font-weight:400;
text-align:left;
margin: -10px 0px 10px 28px;
}
}
.carouse2-caption h2 {
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:14px;
text-transform:lowercase;
font-weight:400;
text-align:justify;
width:50%;
padding: 0.5em 0em 0em 5em;
line-height: 25px;
}
h4.carouse3-caption {
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:24px;
text-transform:lowercase;
font-weight:bold;
text-align:left;
padding: 0em 0em 0em 2.9em;
line-height: 30px;
}
/*-- top-bar --*/
body {
font-family: '微軟正黑體', sans-serif;
}

.top-bar {
color:#ffffff;
}
ul.top-contacts , ul.top-links {
list-style:none;
display:-webkit-inline-box;
}
ul.top-contacts {
float:left;
}
/*-- /下拉語系位置 --*/
ul.top-links {
  text-transform: uppercase;
  position: absolute;
  display: flex;
  justify-content: flex-end;
top:25%;
right:1%
}
ul.top-contacts li p span,ul.top-contacts p a, ul.top-links li a,ul.top-links li a i {
color:#000000;
}
ul.top-contacts li {
margin-right:25px;
}
/*-- /下拉語系裡面文字的位置 --*/
ul.top-links li a i{
margin-left:0px;
}
ul.top-links li a i:hover {
color:#5a5a5a;
}
ul.top-links li a:hover {
color:#5a5a5a;
}
ul.top-contacts a, ul.top-links a {
text-decoration:none;
}
ul.top-contacts li.top-hover:hover ,ul.top-contacts li.top-hover span:hover ,ul.top-contacts li.top-hover a:hover, ul.top-links a:hover{
color:#df4914;
}
ul.top-links li select.lang{
background-color:#252525;
text-transform: capitalize;
font-size: 14px;
border-radius: 0px 5px 5px 0px;
}
@media only screen and (device-width: 1024px) and (device-height: 1366px),
       only screen and (device-width: 1366px) and (device-height: 1024px) {
.search-container {
position: fixed;
top: 0.25%; /* 距离顶部的距离 */
right: 13%; /* 距离右侧的距离 */
z-index: 1049; /* 确保在其他元素之上，modal   z-index: 1050 */
}
ul.top-links li a i{
font-size:20px;
}
}
@media only screen and (device-width: 820px) and (device-height: 1180px),
       only screen and (device-width: 1180px) and (device-height: 820px) {
.search-container {
position: fixed;
top: 0.25%; /* 距离顶部的距离 */
right: 13%; /* 距离右侧的距离 */
z-index: 1049; /* 确保在其他元素之上，modal   z-index: 1050 */
}
ul.top-links li a i{
font-size:20px;
}

}
@media only screen and (device-width: 810px) and (device-height: 1080px),
       only screen and (device-width: 1080px) and (device-height: 810px) {
.search-container {
position: fixed;
top: 0.25%; /* 距离顶部的距离 */
right: 13%; /* 距离右侧的距离 */
z-index: 1049; /* 确保在其他元素之上，modal   z-index: 1050 */
}
ul.top-links li a i{
font-size:20px;
}

}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.search-container {
position: fixed;
top: 0.25%; /* 距离顶部的距离 */
right: 13%; /* 距离右侧的距离 */
z-index: 1049; /* 确保在其他元素之上，modal   z-index: 1050 */
}
ul.top-links li a i{
font-size:20px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.search-container {
position: fixed;
top: 0.25%; /* 距离顶部的距离 */
right: 13%; /* 距离右侧的距离 */
z-index: 1049; /* 确保在其他元素之上，modal   z-index: 1050 */
}
ul.top-links li a i{
font-size:20px;
}
}
@media (max-width: 480px) {
.search-container {
position: fixed;
top: 0.25%; /* 距离顶部的距离 */
right: 13%; /* 距离右侧的距离 */
z-index: 1049; /* 确保在其他元素之上，modal   z-index: 1050 */
}
ul.top-links li a i{
font-size:20px;
}
}
#phone_search 
{
background-color:transparent;
color:#000000
}
.navbar {
font-family: '微軟正黑體', sans-serif;
font-size: 16px;
font-weight:700px
}
.navbar a:hover
{
vertical-align: middle;
text-align: center;
width: 100%;
top: 0px;	
background: linear-gradient(rgb(248,248,248), rgb(248,248,248));	
}
@media (max-width: 768px) {
.navbar a:hover
{
vertical-align: middle;
text-align: center;
width: 100%;
top: 0px;	
background:transparent ;	
}
}
.navbar-inverse .navbar-nav>li>a.dropdown-toggle {
padding:0px 12px;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
color: #fff;
padding: 15px 22px;
}
/*-- /top-bar --*/
/*-- /header定位後不要偏移往下 --*/
.nav-links .navbar {
margin-bottom:0px;
}
.nav-links .navbar-inverse {
background-color:#ffffff;
border:none;
}
.nav-links_1 .navbar-inverse_1 {
background-color:#000000;
border:none;
}
.nav-links .navbar-inverse .navbar-brand {
color: #0A0A0A;
font-family: '微軟正黑體', sans-serif;
text-transform: uppercase;
font-size: 30px;
font-weight: 600;
padding:15px 15px;
}
.navbar-header img {
float:left;
position: absolute; 
left:0;
margin-top:0.8em;
width:100px;
height:60px;
opacity: 1;
}
.navbar-header img:hover {
background-color:#ffffff;
opacity: 0.8;
}
@media only screen and (device-width: 1024px) and (device-height: 1366px),
       only screen and (device-width: 1366px) and (device-height: 1024px) {
.navbar-header img {
float:left;
position: absolute; 
left:0;
margin-top:0.3em;
width:70px;
height:40px;
opacity: 1;
}
}
@media only screen and (device-width: 820px) and (device-height: 1180px),
       only screen and (device-width: 1180px) and (device-height: 820px) {

.navbar-header img {
float:left;
position: absolute; 
left:0;
margin-top:0.3em;
width:70px;
height:40px;
opacity: 1;
}
	   }
@media only screen and (device-width: 810px) and (device-height: 1080px),
       only screen and (device-width: 1080px) and (device-height: 810px) {

.navbar-header img {
float:left;
position: absolute; 
left:0;
margin-top:0.3em;
width:70px;
height:40px;
opacity: 1;
}
	   }
@media screen and (min-width: 768px) and (max-width: 1024px)
{
.navbar-header img {
float:left;
position: absolute; 
left:0;
margin-top:0.3em;
width:70px;
height:40px;
opacity: 1;
}
}
@media (max-width: 480px) {
.navbar-header img {
float:left;
position: absolute; 
left:0;
margin-top:0.3em;
width:70px;
height:40px;
opacity: 1;
}
}
.nav-links .navbar-brand {
height:inherit;
padding:10px 1px;
}
.nav-links_1 .navbar-brand {
height:5px;
padding:0px 15px;
}
.nav-links .navbar-nav>li>a {
padding:0px 20px;
color: #383838;
}
.nav-links_1 .navbar-nav>li>a {
padding:0px 20px;
color: #9d9d9d;
}
.nav-links .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
background-color:#fff;
color:#000000;
font-weight:bold;
}
.nav-links .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
color: #000000;
background-color: #FFFFFF;
font-weight:bold;
}
.navbar a::after {
position: absolute;
top: 30%;
left: 0;
width: 100%;
background: linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.1));
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.navbar a:hover::after {
opacity: 1;
border-radius:5px;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.split {
position: relative;
}
.split .split {
height: 100%;
}
.split .split .inner-wrapper {
height: 100%;
}
.split.split-no-anim {
transition: all 0s !important;
}
.split.split-no-anim * {
transition: all 0s !important;
}
.split .slides {
overflow: hidden;
height: 100%;
}
.split .slides .slide {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.split .slides .slide .slide-section {
position: relative;
}
.split .navigation-wrapper {
display: flex;
justify-content: space-between;
}
.split .navigation-wrapper .navigation-arrow.prevent {
pointer-events: none;
}
.split .navigation-wrapper .navigation-arrow.disable {
pointer-events: none;
opacity: 0.25;
}
.split .navigation-wrapper .navigation-arrow.prev {
font-family: 'Montserrat', sans-serif;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #000;
}
.split .navigation-wrapper .navigation-arrow.next {
font-family: 'Montserrat', sans-serif;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
.split .dots-wrapper .dot {
display: inline-block;
}
.split .dots-wrapper .dot.thumb {
pointer-events: none;
}
.split .dots-wrapper .dot.thumb.visible {
display: inline-block;
pointer-events: initial;
}
.split .dots-wrapper.default .dot {
height: 10px;
width: 10px;
border: 1px solid #000;
}
.split .dots-wrapper.default .dot.thumb {
opacity: 0.25;
}
.split .dots-wrapper.default .dot.thumb.visible {
opacity: 1;
}
.split.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
transition: background-color 0.15s;
}
.split.fullscreen > .inner-wrapper {
height: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.theme-left-to-right > .slide {
top: 0;
left: -100%;
transition: transform 0.45s;
}
.theme-left-to-right > .slide.init {
transform: translateX(100%);
}
.theme-left-to-right > .slide.previous {
transform: translateX(200%);
}
.theme-left-to-right > .slide.next {
transform: translateX(0);
}
.theme-right-to-left > .slide {
top: 0;
left: 100%;
transition: transform 0.45s;
}
.theme-right-to-left > .slide.init {
transform: translateX(-100%);
}
.theme-right-to-left > .slide.previous {
transform: translateX(-200%);
}
.theme-right-to-left > .slide.next {
transform: translateX(0);
}
.theme-bottom-to-top > .slide {
top: 100%;
left: 0;
transition: transform 0.45s;
}
.theme-bottom-to-top > .slide.init {
transform: translateY(-100%);
}
.theme-bottom-to-top > .slide.previous {
transform: translateY(-200%);
}
.theme-bottom-to-top > .slide.next {
transform: translateY(0);
}
.theme-top-to-bottom > .slide {
top: -100%;
left: 0;
transition: transform 0.45s;
}
.theme-top-to-bottom > .slide.init {
transform: translateY(100%);
}
.theme-top-to-bottom > .slide.previous {
transform: translateY(200%);
}
.theme-top-to-bottom > .slide.next {
transform: translateY(100%);
}
.theme-fly-away-in > .slide {
top: 0;
left: 100%;
}
.theme-fly-away-in > .slide .slide-section {
transition: transform 0.45s;
}
.theme-fly-away-in > .slide.init {
transform: translateX(-100%);
}
.theme-fly-away-in > .slide.previous {
transform: translateX(-200%);
}
.theme-fly-away-in > .slide.next {
transform: translateX(0);
}
.theme-fade-in-out .slide {
top: 0;
left: 0;
opacity: 0;
width: 100%;
transition: opacity 0.6s;
}
.theme-fade-in-out .slide.init {
opacity: 1;
}
.theme-fade-in-out .slide.previous {
opacity: 0;
}
.theme-fade-in-out .slide.next {
opacity: 0;
}
.theme-bottom-to-top-zoom-in > .slide {
top: 100%;
left: 0;
transition: transform 0.8s;
overflow: hidden;
}
.theme-bottom-to-top-zoom-in > .slide .image {
transform: scale(1.05);
transition: transform 0.8s;
}
.theme-bottom-to-top-zoom-in > .slide.init {
transform: translateY(-100%);
}
.theme-bottom-to-top-zoom-in > .slide.init .image {
transform: scale(1);
transition-delay: 0.5s;
}
.theme-bottom-to-top-zoom-in > .slide.previous {
transform: translateY(-200%);
}
.theme-bottom-to-top-zoom-in > .slide.previous .image {
transform: scale(1.05);
transition-delay: 0.8s;
}
.theme-bottom-to-top-zoom-in > .slide.next {
transform: translateY(0);
}
.theme-bottom-to-top-zoom-in > .slide.next .image {
transform: scale(1.05);
}
.theme-bottom-to-top-fade-out > .slide {
top: 100%;
left: 0;
transition: transform 1s;
}
.theme-bottom-to-top-fade-out > .slide .bodytext {
opacity: 0;
transition: opacity 0.3s;
}
.theme-bottom-to-top-fade-out > .slide.init {
transform: translateY(-100%);
}
.theme-bottom-to-top-fade-out > .slide.init .bodytext {
opacity: 1;
}
.theme-bottom-to-top-fade-out > .slide.previous {
transform: translateY(-200%);
}
.theme-bottom-to-top-fade-out > .slide.previous .bodytext {
opacity: 0;
}
.theme-bottom-to-top-fade-out > .slide.next {
transform: translateY(0);
}
.theme-bottom-to-top-fade-out > .slide.next .bodytext {
opacity: 0;
}
.theme-fly-in-top {
position: absolute;
width: 100%;
height: 100%;
}
.theme-fly-in-top > .slide {
transform: scale(0.25);
opacity: 0;
pointer-events: none;
transition: all 0.8s;
}
.theme-fly-in-top > .slide.init {
transform: scale(1);
opacity: 1;
pointer-events: all;
}
.theme-fly-in-top > .slide.previous {
transform: scale(1.75);
opacity: 0;
pointer-events: none;
}
.theme-fly-in-top > .slide.next {
transform: scale(1.75);
opacity: 0;
pointer-events: none;
}
.theme-fly-in-top.top .slide {
top: 0;
left: 0;
}
.theme-fly-in-top.top .slide:nth-child(2n+1) {
margin-top: 10%;
width: 100%;
height: 50%;
z-index: 2;
}
.theme-fly-in-top.top .slide.init:nth-child(2n+1) {
margin-top: 0;
}
.theme-fly-in-top.top .slide.previous:nth-child(2n+1), .theme-fly-in-top.top .slide.next:nth-child(2n+1) {
margin-top: -35%;
}
.theme-fly-in-top.left .slide {
top: 0;
left: 0;
}
.theme-fly-in-top.left .slide:nth-child(2n) {
margin-left: 25%;
width: 50%;
height: 100%;
z-index: 2;
}
.theme-fly-in-top.left .slide.init:nth-child(2n) {
margin-left: 0;
}
.theme-fly-in-top.left .slide.previous:nth-child(2n), .theme-fly-in-top.left .slide.next:nth-child(2n) {
margin-left: -35%;
}
.theme-fly-in-bottom {
position: absolute;
width: 100%;
height: 100%;
}
.theme-fly-in-bottom > .slide {
transform: scale(0.25);
opacity: 0;
pointer-events: none;
transition: all 0.8s;
}
.theme-fly-in-bottom > .slide.init {
transform: scale(1);
opacity: 1;
pointer-events: all;
}
.theme-fly-in-bottom > .slide.previous {
transform: scale(1.75);
opacity: 0;
pointer-events: none;
}
.theme-fly-in-bottom > .slide.next {
transform: scale(1.75);
opacity: 0;
pointer-events: none;
}
.theme-fly-in-bottom.bottom .slide {
bottom: 0;
right: 0;
}
.theme-fly-in-bottom.bottom .slide:nth-child(2n+1) {
width: 100%;
height: 50%;
margin-bottom: 10%;
}
.theme-fly-in-bottom.bottom .slide.init:nth-child(2n+1) {
margin-bottom: 0;
}
.theme-fly-in-bottom.bottom .slide.previous:nth-child(2n+1), .theme-fly-in-bottom.bottom .slide.next:nth-child(2n+1) {
margin-bottom: -35%;
}
.theme-fly-in-bottom.right .slide {
bottom: 0;
right: 0;
}
.theme-fly-in-bottom.right .slide:nth-child(2n) {
width: 50%;
height: 100%;
margin-right: 25%;
}
.theme-fly-in-bottom.right .slide.init:nth-child(2n) {
margin-right: 0;
}
.theme-fly-in-bottom.right .slide.previous:nth-child(2n), .theme-fly-in-bottom.right .slide.next:nth-child(2n) {
margin-right: -35%;
}
.theme-right-to-left > .slide {
top: 0;
left: 100%;
transition: transform 0.45s;
}
.theme-right-to-left > .slide.init {
transform: translateX(-100%);
}
.theme-right-to-left > .slide.previous {
transform: translateX(-200%);
}
.theme-right-to-left > .slide.next {
transform: translateX(0);
}
.theme-bottom-to-top-slow > .slide {
top: 100%;
left: 0;
transition: transform 0.6s;
}
.theme-bottom-to-top-slow > .slide.init {
transform: translateY(-100%);
}
.theme-bottom-to-top-slow > .slide.previous {
transform: translateY(-200%);
}
.theme-bottom-to-top-slow > .slide.next {
transform: translateY(0);
}
.theme-content-horizontal-vertical > .slide {
top: 0;
left: 0;
z-index: -1;
visibility: hidden;
}
.theme-content-horizontal-vertical > .slide.init {
z-index: 1;
visibility: visible;
}
.theme-content-horizontal-vertical > .slide.previous {
z-index: -1;
visibility: hidden;
}
.theme-content-horizontal-vertical > .slide.next {
z-index: -1;
visibility: hidden;
}
.theme-bottom-to-top-with-fade > .slide {
top: 100%;
left: 0;
opacity: 0;
transition: transform 0.9s, opacity 0.6s;
}
.theme-bottom-to-top-with-fade > .slide .bodytext img {
top: -100px;
transition: top 0.45s;
}
.theme-bottom-to-top-with-fade > .slide .bodytext .desc {
top: 100px;
opacity: 0;
transition: top 0.45s, opacity 0.15s;
}
.theme-bottom-to-top-with-fade > .slide.init {
transform: translateY(-100%);
opacity: 1;
}
.theme-bottom-to-top-with-fade > .slide.init .bodytext img {
top: 0;
}
.theme-bottom-to-top-with-fade > .slide.init .bodytext .desc {
top: 0;
opacity: 1;
transition: top 0.45s, opacity 0.15s;
}
.theme-bottom-to-top-with-fade > .slide.previous {
transform: translateY(-200%);
opacity: 0;
}
.theme-bottom-to-top-with-fade > .slide.previous .bodytext img {
top: -100px;
transition: top 0.45s;
}
.theme-bottom-to-top-with-fade > .slide.previous .bodytext .desc {
top: 100px;
opacity: 1;
transition: top 0.45s, opacity 0.15s;
}
.theme-bottom-to-top-with-fade > .slide.next {
transform: translateY(0);
opacity: 0;
}
.theme-bottom-to-top-with-fade > .slide.next .bodytext img {
top: -100px;
transition: top 0.45s;
}
.theme-bottom-to-top-with-fade > .slide.next .bodytext .desc {
top: 100px;
opacity: 1;
transition: top 0.45s, opacity 0.15s;
}
.theme-fade-in-out-slow > .slide {
top: 100%;
opacity: 0;
transition: opacity 0.6s;
}
.theme-fade-in-out-slow > .slide.init {
transform: translateY(-100%);
opacity: 1;
}
.theme-fade-in-out-slow > .slide.previous {
transform: translateY(100%);
opacity: 0;
}
.theme-fade-in-out-slow > .slide.next {
transform: translateY(100%);
opacity: 0;
}
.myCarousel {
position: relative;
background-color: #fafafa;
}
.myCarousel .slides-wrapper .slides {
position: absolute;
}
.myCarousel .slides-wrapper .slides.content1 {
height: 60%;
width: 50%;
top: 10%;
left: 0;
background-color: #fafafa;
}
/*技術能力手機調整*/
@media only screen and (max-width: 768px) {
.myCarousel {
margin-bottom:80px;
}
.myCarousel .slides-wrapper .slides.content1  {
width: 100%;
margin-bottom:150px;
}
#slides_photo{
height: 50%;
width: 100%;
top: 70%;
}
#slides_counter {
position: absolute;
top: 80%;
right: 0;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
line-height: 50px;
text-align: center;
font-size: 12px;
}
#counter-content {
position: absolute;
top: 80%;
margin-top: 50px;
right: 0;
width: 50px;
background-color: rgba(0, 0, 0, 0.3);
}
#counter-content_hr {
position: relative;
display: block;
transform: rotate(-45deg);
width: 20px;
}
#counter-content span {
display: block;
text-align: center;
line-height: 50px;
color: white;
font-size: 12px;
}
.myCarousel .slides-wrapper .slides.content1 .title {
font-size: 5.75em;
margin: 0;
margin-bottom: 10px;
font-weight:bold;
padding:10px;
text-align:left;
}
.myCarousel .slides-wrapper .slides.content1 .subtitle {
font-size: 1.2em;
padding:10px;
line-height: 1.5;
text-align:justify;
}
}
.myCarousel .slides-wrapper .slides.content1 .bodytext {
padding: 0 50px;
position: absolute;
top: 45%;
transform: translateY(-50%);
text-align:left;
}
.myCarousel .slides-wrapper .slides.content1 .title {
font-size: 1.75em;
margin: 0;
margin-bottom: 10px;
font-weight:bold;
padding:10px;
text-align:left;
}
.myCarousel .slides-wrapper .slides.content1 .subtitle {
font-size: 1.2em;
padding:10px;
line-height: 1.5;
text-align:justify;
}
.myCarousel .slides-wrapper .slides.photo {
height: 100%;
width: 50%;
top: 0;
right: 0;
}
.myCarousel .slides-wrapper .slides.photo .image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.myCarousel .slides-wrapper .slides.title {
height: 20%;
width: 55%;
bottom: 0;
left: 0;
}
.myCarousel .slides-wrapper .slides.title .bodytext {
padding: 0 50px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.myCarousel .slides-wrapper .slides.title .title {
margin: 0;
color: #fff;
margin-bottom: 5px;
font-family: serif;
font-size: 2.25em;
letter-spacing: 1px;
}
.myCarousel .slides-wrapper .slides.title .link {
position: relative;
color: #fff;
text-transform: uppercase;
font-size: 0.65em;
letter-spacing: 2px;
margin-left: 3px;
}
.myCarousel .slides-wrapper .slides.title .link:after {
content: "";
position: absolute;
top: 2px;
right: -15px;
width: 7px;
height: 7px;
transform: rotate(45deg);
border: 1px solid;
border-left: 0;
border-bottom: 0;
transition: right 0.3s;
}
.myCarousel .slides-wrapper .slides.title .link:hover span {
opacity: 0.5;
}
.myCarousel .slides-wrapper .slides.title .link:hover:after {
right: -18px;
}
.myCarousel .slides-wrapper .slides.title .red {
background-color: lightyellow;
}
.myCarousel .slides-wrapper .slides.title .red .title,
.myCarousel .slides-wrapper .slides.title .red .link {
color: #333;
}
.myCarousel .slides-wrapper .slides.title .blue {
background-color: lightblue;
}
.myCarousel .slides-wrapper .slides.title .green {
background-color: lightpink;
}
.myCarousel .slides-wrapper .slides.price {
height: 20%;
width: 25%;
bottom: 0;
left: 55%;
background-color: #333;
}
.myCarousel .slides-wrapper .slides.price > * {
transition-delay: 0.2s;
}
.myCarousel .slides-wrapper .slides.price .bodytext {
padding: 0 50px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.myCarousel .slides-wrapper .slides.price .bodytext span {
display: block;
color: #fff;
}
.myCarousel .slides-wrapper .slides.price .bodytext .title {
text-transform: uppercase;
margin-bottom: 10px;
}
.myCarousel .slides-wrapper .slides.price .bodytext .title.red {
color: lightyellow;
}
.myCarousel .slides-wrapper .slides.price .bodytext .title.blue {
color: lightblue;
}
.myCarousel .slides-wrapper .slides.price .bodytext .title.green {
color: lightpink;
}
.myCarousel .slides-wrapper .slides.price .bodytext .label {
font-size: 2em;
}
.myCarousel .slides-wrapper .slides.counter {
position: absolute;
top: 40%;
right: 0;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
line-height: 50px;
text-align: center;
font-size: 12px;
}
.myCarousel .slides-wrapper .counter-content {
position: absolute;
top: 40%;
margin-top: 50px;
right: 0;
width: 50px;
background-color: rgba(0, 0, 0, 0.3);
}
.myCarousel .slides-wrapper .counter-content hr {
position: relative;
display: block;
transform: rotate(-45deg);
width: 20px;
}
.myCarousel .slides-wrapper .counter-content span {
display: block;
text-align: center;
line-height: 50px;
color: white;
font-size: 12px;
}
.myCarousel #arrows {
position: absolute;
top: 0;
left: 0;
padding: 20px 0 0 63px;
}
.myCarousel #arrows span {
margin: 0 10px;
text-transform: uppercase;
font-size: 20px;
line-height: 0;
color:#000000
}
.myCarousel #arrows .prev  ,
.myCarousel #arrows .next{
width: auto;
height: auto;
border: none !important;
text-transform: uppercase;
font-size: 14px;
line-height: 1;
font-weight: bold;
color: #000;
}
#o_left
{
font-size: 30px;
background-color: #fff;
}
#o_right
{
font-size: 30px;
background-color: #fff;
}
.myCarousel #arrows .prev.disable,
.myCarousel #arrows .next.disable {
display: none;
}
.myCarousel #arrows .prev:hover,
.myCarousel #arrows .next:hover {
opacity: 0.5;
}
.view-group {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
padding-left: 0;
margin-bottom: 0;
}
.thumbnail
{
margin-bottom: 30px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item5.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 30px;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding: 0 1rem;
border: 0;
}
.item5.list-group-item .img-event {
float: left;
width: 30%;
}
.img-event img {
height:300px;
width: 100%;
}
.item5.list-group-item .list-group-image
{
margin-right: 10px;
}
.item5.list-group-item .thumbnail
{
margin-bottom: 0px;
display: inline-block;
}
.item5.list-group-item .caption
{
float: left;
width: 70%;
margin: 0;
}
.item5.list-group-item:before, .item5.list-group-item:after
{
display: table;
content: " ";
}
.item5.list-group-item:after
{
clear: both;
}
.btn-group
{
margin-bottom: 0px;
text-align:left;
background: #eeeeee;
}
/*---//project-tabs ends Here----*/
.footer1 {
font-family: '微軟正黑體', sans-serif;
background:linear-gradient(rgba(43, 44, 47, 0), rgba(43, 44, 47, 0)), url(../images/slid.jpg) no-repeat 0px 0px;
opacity: 1;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
position: relative;
background-size: cover;--*/
text-align: left;
}
.fl {float:left;}
.fr{float:right;}
.f-bg-w3l {
background: rgba(0, 0, 0, 0.48);
padding: 4em 0 2em 0;
}
.w3layouts_footer_grid h1 {
font-size: 19px;
color: #000000;  
position: relative;
font-weight: 500px;
margin-bottom: 0.5em;
letter-spacing: 0px;
}
.copyright  li {
right:0%;
float:right;
margin-top:-25px;
position: relative;
}
.w3layouts_footer_grid h2,
.w3layouts_footer_grid h3 {
font-size: 18px;
color: #00b7f1;  
position: relative;
font-weight: bold;
margin-bottom: 0.5em;
letter-spacing: 0px;
}
.w3layouts_footer_grid h1 span {
font-family: '微軟正黑體', serif;
color: #000000;
font-size: 19px;
}
.w3layouts_footer_grid h2 span,
.w3layouts_footer_grid h3 span {
font-family: '微軟正黑體', sans-serif;
color: #efefef;
font-size: 14px;
}
.w3layouts_footer_grid p {
margin-right: 0.2em;
}
.social_agileinfo li {
display: inline-block;
}
.social_agileinfo li a {
width: 40px;
height: 40px;
display: block;
border: 1px solid #fff;
text-align: center;
color: #fff;
}
.social_agileinfo li a i {
font-size: 1em;
line-height: 2.8em;
}
.w3_facebook:hover {
border: 1px solid #3b5998;
background: #3b5998;
}
.w3_twitter:hover {
border: 1px solid #1da1f2;
background: #1da1f2;
}
.w3_instagram:hover {
border: 1px solid #833ab4;
background: #833ab4;
}
.w3_google:hover {
border: 1px solid #dd4b39;
background: #dd4b39;
}
.w3l_footer_nav {
margin: 3em 0 3em;
}
.w3l_footer_nav li {
display: inline-block;
margin-right: 4em;
}
.w3l_footer_nav li a {
color: #fff;
font-weight: 400;
text-decoration: none;
letter-spacing: 0px;
}
.w3l_footer_nav li a:hover,
.w3l_footer_nav li a.active {
color: #00b7f1;
}
.w3layouts_footer_grid p {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 2em;
color: #ffffff;
}
.w3layouts_footer_grid form {
border: 1px solid #fff;
width: 100%;
}
.w3layouts_footer_grid input[type="email"] {
outline: none;
padding: 10px 15px;
color: #fafafa;
font-size: 14px;
width: 28%;
border: 1px solid #000000;
background: #000000;
letter-spacing: 0px;
margin-right: 0em;
}
button.btn1 {
color: #fff;
border: 1px solid #efefef;
padding: 10px 0;
text-align: center;
text-decoration: none;
background: #00b7f1;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
float: right;
width: 14%;
margin-right: 1.5em;
}
ul.con_inner_text li {
list-style-type: none;
color: #000000;
font-size: 12px;
margin-bottom: 5px;
padding: 1px 3px 1px 3px;
font-weight: 700px;
}
ul.con_inner_text li label {
display: inline-block;
margin-left: 1.7em;
}
ul.con_inner_text li img{
width:100px;
height:70px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity: 0.5;
border-radius: 0px;
}
ul.con_inner_text li img:hover{
opacity: 1;
filter: alpha(opacity=100);
}
.footer_content
{
font-family: '微軟正黑體', serif;
background: #f3f3f3;
/*	    background:linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.2)), url(../img/footer.png) no-repeat 0px 0px;*/
/*	background-size:cover;*/
}
.footer_content h1
{
margin-left: 4px;
}
#footer_content h5 {
margin: 0px 0;
font-size: 22px;
color: #000000;  
}
.footer_content hr {
margin: 30px 0;
width: 30%;
border: 0.5px solid #e0e0e0;
position: relative;
overflow: visible;
}       
.footer_content hr:after {
content: "";
border: 0.5px solid #000000;
position: absolute;
width: 40%;
top: -0.5px;
}
.footer_content1
{
background: #f3f3f3;
}
.footer_content1 hr {
margin: 10px 10px;
width: 100%;
border: 0.5px solid #e0e0e0;
position: relative;
overflow: visible;
text-align:center
}       
.footer_content1 hr:after {
content: "";
border: 0.5px solid #d7d7d7;
position: absolute;
width: 40%;
top: -0.5px;
}
ul.con_inner_text span {
display: inline-block;
opacity: 1;
width: 22px;
height: 22px;
border: 1px solid #000000;
border-radius: 100px;
font-size: 12px;
color: #000000;
line-height: 20px;
text-align:center;
transition: all .4s ease-in-out 0s
}
ul.con_inner_text li {
font-size: 14px;
color: #000000;
text-decoration:none;
}
ul.con_inner_text li a {
font-size: 14px;
color: #000000;
text-decoration:none;
}
ul.con_inner_text li a:hover {
color: #1F9ED2;
border-bottom:0.5px solid;
}
ul.con_inner_text li label {
color: #bfbfbf;
margin-right: 1em;
font-weight: 400 !important;
}
ul.con_inner_text.midimg li {
display: inline-block;
float: left;
}
.v-line{
border-left: 1px solid #eeeeee;
height:100%;
position: relative;
}
#lw-tab-text-h3
{
font-family: 'Raleway', sans-serif; 
font-size: 30px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h3 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h4
{
font-family: 'Raleway', sans-serif; 
font-size: 30px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h4 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h5
{
font-family: 'Raleway', sans-serif; 
font-size: 30px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h5 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h6
{
font-family: 'Raleway', sans-serif; 
font-size: 30px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h6 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h7
{
font-family: 'Raleway', sans-serif; 
font-size: 30px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h7 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h8
{
font-family: 'Raleway', sans-serif; 
font-size:30px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h8 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
/*ipad pro*/
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) {

.icon-container.rotate .fa-angle-down {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
}

/*ipad 10.9*/
@media only screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-min-device-pixel-ratio: 2) {
.icon-container.rotate .fa-angle-down {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
}


/*ipad 10.2*/
@media only screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-min-device-pixel-ratio: 2) {
.icon-container.rotate .fa-angle-down {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}


}

/*ipad 9.7*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.icon-container.rotate .fa-angle-down {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;}
}
@media (max-width: 480px) {
#lw-tab-text-h3
{
margin-top:-70px;
font-family: 'Raleway', sans-serif; 
font-size: 24px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h3 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h4
{
margin-top:-70px;
font-family: 'Raleway', sans-serif; 
font-size: 24px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h4 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h5
{
margin-top:-70px;
font-family: 'Raleway', sans-serif; 
font-size: 24px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h5 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h6
{
margin-top:-70px;
font-family: 'Raleway', sans-serif; 
font-size: 24px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h6 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h7
{
margin-top:-70px;
font-family: 'Raleway', sans-serif; 
font-size: 24px;
color:#fff;
font-weight:bold;
}
#lw-tab-text-h7 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
#lw-tab-text-h8
{
font-family: 'Raleway', sans-serif; 
font-size:24px;
color:#fff;
font-weight:bold;
}
margin-top:-70px;
#lw-tab-text-h8 span.box60  {
display:block;
font-size:  20px; 
font-weight:500px;
}
.lw-tab-content p {
margin-left: 0;
font-size:16px;
text-align:justify;
line-height:28px;
}
.lw-tab-text-move p {
text-align:justify;
}
/*永續發展按鈕旋轉*/
.icon-container.rotate .fa-angle-down {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
}
h2, h3 {
font-weight: 400;
line-height: 1.2;
}
h2 {
font-size: 1.875rem;
font-family: '微軟正黑體', sans-serif; 
text-transform: uppercase;
}
@media all and (min-width:1200px) {
h2 {
font-size: 2.5rem;
}
}
h3 {
font-size: 1.375rem;
}
@media all and (min-width:1200px) {
h3 {
font-size: 1.625rem;
}
}
.wrapper2 {
font-family: '微軟正黑體', sans-serif; 
padding-top: 20px;
padding-bottom: 20px;
}
@media all and (min-width: 85em) {
.wrapper2 {
max-width: 1260px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
}
/*社會*/
.lw-tab-panel.theme-blue {
background-image: url("../images/social_01.jpeg");
}
@media all and (min-width: 40em) {
.lw-tab-panel.theme-blue {
background-image: url("../images/social_01.jpeg");
}
}
@media all and (min-width:1200px) {
.theme-blue .lw-tab-image {
background-image: url("../images/social_01.jpeg");
}
}
.lw-tab-panel.theme-purple {
background-image: url("../images/energy_01.jpg");
}
@media all and (min-width: 40em) {
.lw-tab-panel.theme-purple {
background-image: url("../images/energy_01.jpg");
}
}
@media all and (min-width:1200px) {
.theme-purple .lw-tab-image {
background-image: url("../images/energy_01.jpg");
}
}
.lw-tab-panel.theme-orange {
background-image: url("../images/waste_01.jpg");
}
@media all and (min-width: 40em) {
.lw-tab-panel.theme-orange {
background-image: url("../images/waste_01.jpg");
}
}
@media all and (min-width:1200px) {
.theme-orange .lw-tab-image {
background-image: url("../images/waste_01.jpg");
}
}
/*.lw-tab-panel.theme-gery {*/
/*background-image: url("../images/photo-1518837695005-2083093ee35b.png");*/
/*}*/
/*@media all and (min-width: 40em) {*/
/*.lw-tab-panel.theme-gery {*/
/*background-image: url("../images/photo-1518837695005-2083093ee35b.png");*/
/*}*/
/*}*/
/*@media all and (min-width:1200px) {*/
/*.theme-gery .lw-tab-image {*/
/*background-image: url("../images/photo-1518837695005-2083093ee35b.png");*/
/*}*/
/*}*/
/*環境*/
.lw-tab-panel.theme-green {
background-image: url("../images/environment_01.jpeg");
}
@media all and (min-width: 40em) {
.lw-tab-panel.theme-green {
background-image: url("../images/environment_01.jpeg");
}
}
@media all and (min-width:1200px) {
.theme-green .lw-tab-image {
background-image: url("../images/environment_01.jpeg");
}
}
.lw-tab-panel.theme-yellow {
background-image: url("../images/governmance_01.jpg");
}
@media all and (min-width: 40em) {
.lw-tab-panel.theme-yellow {
background-image: url("../images/governmance_01.jpg");
}
}
@media all and (min-width:1200px) {
.theme-yellow .lw-tab-image {
background-image: url("../images/governmance_01.jpg");
}
}
/*手機*/
[data-tab-nav] a,
[data-accordion-header] {
font-family: '微軟正黑體', sans-serif; 
font-size: 1.8rem;
line-height: 1;
text-transform: uppercase;
display: block;
position: relative;
text-align: center;
will-change: background-color, color;
transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {*/
/**/
/*[data-accordion-header] {*/
/*background: linear-gradient(90deg, #606060 85%, #cfcfcf 15%);*/
/*color: #000000;*/
/*border-top: 0px solid;*/
/*border-bottom: 0px solid;*/
/*border-color: #fff;*/
/*padding: 0.9375rem 70px;*/
/*line-height: 1;*/
/*margin-top: 7px;*/
/**/
/*}*/
/**/
/*}*/
/*手機accordion背景顏色*/
[data-accordion-header] {
background: linear-gradient(90deg, #f3f3fa 100%, #cfcfcf 0%);
color: #000000;
border-top: 0px solid;
border-bottom: 0px solid;
border-color: #fff;
padding: 0.9375rem 50px;
line-height: 1;
margin-top: 7px;
}
[data-accordion-header] i {
float:right;
}
@media all and (min-width:1200px) {
[data-accordion-header] {
display: none;
}
}
[data-accordion-header]:hover {
background-color: #bbbbbb;
color: #000000;
}
[data-accordion-header]:after {
font-family: '微軟正黑體', sans-serif; 
font-size: 24px;
display: block;
position: absolute;
top: 50%;
margin-top: -0.5em;
right: 22px;
transform: rotate(90deg);
}
.lw-accordion-header.is-active {
background-color: #0097cd;
color: #fff;
border-color: #012538;
}
.lw-accordion-header.is-active:after {
display: none;
}
.lw-accordion-header.is-active:hover {
background-color: #0097cd;
color: #fff;
}
.lw-accordion-header.is-active.theme-green, .lw-accordion-header.is-active.theme-green:hover {
background-color: #70be49;
border-color: #42683c;
}
.lw-accordion-header.is-active.theme-yellow, .lw-accordion-header.is-active.theme-yellow:hover {
background-color: #000000;
border-color: #000000;
}
.lw-accordion-header.is-active.theme-purple, .lw-accordion-header.is-active.theme-purple:hover {
background-color: #8b244f;
border-color: #3f2a55;
}
.lw-accordion-header.is-active.theme-orange, .lw-accordion-header.is-active.theme-orange:hover {
background-color: #ff6600;
border-color: #ff6633;
}
.lw-accordion-header.is-active.theme-gery, .lw-accordion-header.is-active.theme-gery:hover {
background-color: #494949;
border-color: #808080;
}
[data-tab-nav] {
display: none;
}
@media all and (min-width:1200px) {
[data-tab-nav] {
display: block;
margin-top: 48px;
}
[data-tab-nav] a {
font-size: 1rem;
}
}
@media all and (min-width: 75em) {
[data-tab-nav] a {
font-size: 1.125rem;
}
}
[data-tab-nav] ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
[data-tab-nav] li {
list-style-type: none;
padding: 0;
border: 0px solid #000000;
background-color: #000000;
position: relative;
border-radius:30px;
}
[data-tab-nav] li a {
text-decoration: none;
color: #000000;
padding: 0.7em 1em;
position: relative;
font-size:16px;
font-weight:bold;
}
@media all and (min-width: 75em) {
[data-tab-nav] li a {
padding: 0.7em 1em;
}
}
[data-tab-nav] li a:before {
content: "";
display: block;
position: absolute;
background-color: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
will-change: transform;
transition: transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: 0;
border-radius:30px;
}
[data-tab-nav] li a:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
will-change: border-color;
transition: border-color 0.025s cubic-bezier(0.39, 0.575, 0.565, 1);
transition-delay: 0.4s;
}
[data-tab-nav] li a > span {
position: relative;
}
[data-tab-nav] li a:hover {
color: #000000;
}
[data-tab-nav] li.is-active a {
color: #fff;
background-color: transparent;
.lw-tab-panel .lw-tab-text-move {
will-change: transform;
transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translateX(150%);
}
}
}
[data-tab-nav] li.is-active a:before {
transform: translateX(-100%) translateY(0);
transition: transform 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
transition-delay: 0.025s;
}
[data-tab-nav] li.is-active a:after {
transition: border-color 0.025s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
[data-tab-nav] li.is-active a:hover {
color: #fff;
}
.lw-tab-nav ul {
margin: 0 auto;
display: flex;
justify-content: flex-start;
padding: 0 0 10px;
overflow: hidden;
}
.lw-tab-nav li {
flex: 0 1 0;
min-width: 110px;
margin-left: 20px;
margin-top: 0;
}
@media all and (min-width: 75em) {
.lw-tab-nav li {
min-width: 120px;
}
}
.lw-tab-nav li:first-child {
margin-left: 0;
}
.lw-tab-nav li a:before {
transform: translateY(0);
}
.lw-tab-nav li a:after {
border-width: 0px 0px 0 0px;
border-color: #fff transparent transparent transparent;
left: 50%;
margin-left: -10px;
bottom: -13px;
border-width: 0px 0px 0 0px;
border-color: #fff transparent transparent transparent;
}
.lw-tab-nav li.is-active a:before {
transform: translateY(-100%);
}
.lw-tab-nav li.is-active a:after {
border-color: #012538 transparent transparent transparent;
}
.lw-tabs {
position: relative;
}
@media all and (min-width:1200px) {
.lw-tabs {
overflow: hidden;
margin-left: -20px;
margin-right: -20px;
}
.lw-tabs h2 {
text-align: left;
margin-top: 0;
}
}
@media all and (min-width: 75em) {
.lw-tabs {
margin-left: -50px;
margin-right: -50px;
}
}
@media all and (min-width:1200px) {
.lw-tab-fixed {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
padding-top: 55px;
padding-left: 20px;
padding-right: 20px;
}
}
@media all and (min-width: 75em) {
.lw-tab-fixed {
padding-left: 50px;
padding-right: 50px;
}
}
[data-tab-panels] {
margin-top: 1.875rem;
margin-left: -20px;
margin-right: -20px;
}
@media all and (min-width:1200px) {
[data-tab-panels] {
margin: 0;
}
}
[data-tab-panel] {
max-height: 0;
overflow: hidden;
position: relative;
text-align: left;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
will-change: max-height;
transition: max-height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
[data-tab-panel] > * {
position: relative;
}
[data-tab-panel] p {
margin-left: 0;
margin-right: 0;
}
.lw-tab-panel:before, .lw-tab-panel:after {
content: "";
display: block;
position: absolute;
}
.lw-tab-panel:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 151, 205, 0.85);
background: linear-gradient(to bottom, #015374, rgba(0, 151, 205, 0.85));
}
/*手機下面三角形*/
.lw-tab-panel:after {
left: 50%;
margin-left: -15px;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 0 0px;
border-color: #ffffff #ffffff transparent #ffffff;
}
.lw-tab-panel.theme-blue:before {
  background: rgba(10, 20, 30, 0.7);;
}
.lw-tab-panel.theme-blue:after {
  border-color: #c0c0c0 transparent transparent transparent;
}
.lw-tab-panel.theme-green:before {
  background: rgba(10, 20, 30, 0.7);

}
.lw-tab-panel.theme-green:after {
  border-color: #ac0000 transparent transparent transparent;
}
.lw-tab-panel.theme-yellow:before {
  background: rgba(10, 20, 30, 0.7);
}
.lw-tab-panel.theme-yellow:after {
  border-color: #ac0000 transparent transparent transparent;
}
.lw-tab-panel.theme-purple:before {
  background: rgba(10, 20, 30, 0.7);
}
.lw-tab-panel.theme-purple:after {
  border-color: #590059 transparent transparent transparent;
}
.lw-tab-panel.theme-orange:before {
  background: rgba(10, 20, 30, 0.7);
}
.lw-tab-panel.theme-orange:after {
  border-color: #ffcc66 transparent transparent transparent;
}

.lw-tab-panel.theme-gery:before {
  background: rgba(10, 20, 30, 0.7);
}
.lw-tab-panel.theme-gery:after {
  border-color: #3a3a3a transparent transparent transparent;
}
@media all and (min-width:1200px) {
[data-tab-panel] {
max-height: none !important;
position: absolute;
overflow: visible;
top: 0;
left: 0;
right: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
will-change: opacity;
transition: 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
[data-tab-panel]:before, [data-tab-panel]:after {
display: none;
}
}
/*左版面顏色*/
@media all and (min-width:1200px) {
.lw-tab-panel {
display: flex;
}
.lw-tab-panel.theme-blue {
background: linear-gradient(to bottom, #015374, #0097cd) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#015374", endColorstr="#0097cd",GradientType=0 );
}
.lw-tab-panel.theme-green {
background: linear-gradient(to bottom, #558b41, #70be49) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#558b41", endColorstr="#70be49",GradientType=0 );
}
.lw-tab-panel.theme-yellow {
background: linear-gradient(to bottom, #5a5a5a, #505050) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#5a5a5a", endColorstr="#505050",GradientType=0 );
}
.lw-tab-panel.theme-purple {
background: linear-gradient(to bottom, #5e2852, #8b244f) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#5e2852", endColorstr="#8b244f",GradientType=0 );
}
.lw-tab-panel.theme-orange {
background: linear-gradient(to bottom, #df4914, #ff6600) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#df4914", endColorstr="#ff6600",GradientType=0 );
}
.lw-tab-panel.theme-gery {
background: linear-gradient(to bottom, #383838, #353535) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#383838", endColorstr="#808080",GradientType=0 );
}
.lw-tab-panel .lw-tab-text-move {
will-change: transform;
transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translateX(150%);
}
}
@media all and (min-width: 75em) {
.lw-tab-panel {
text-align: left;
}
}
.is-active + [data-tab-panel] {
max-height: 400px;
transition: max-height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media all and (min-width:1200px) {
.is-active + [data-tab-panel] {
max-height: none !important;
position: relative;
top: auto;
left: auto;
right: auto;
z-index: 2;
visibility: visible;
opacity: 1;
transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.is-active + [data-tab-panel] .lw-tab-text-move {
transform: translateX(0);
}
}
.lw-tab-panel.text-going-out .lw-tab-text-move {
transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translateX(-150%);
}
.lw-tab-content {
padding: 10px 20px 80px;
color: #fff;
}
.lw-tab-content > *:first-child {
margin-top: 0;
}
.lw-tab-content p {
margin-left: 0;
font-size:16px;
text-align:justify;
line-height:28px;
}
.lw-tab-text-move p {
text-align:justify;
}

.container-fluid2
{
margin: 30px 50px 0px 50px;
}
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

.container-fluid2
{
margin: 0px 50px 0px 50px !important;
}
	   }
/*ipad 9.7*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.wrapper2
{
width:95%;
}
.container-fluid2
{
margin: 0px 20px 0px 20px;
}
.lw-tab-content {
margin:-30px 30px 0px 30px;
}
.lw-tab-content p {
font-size:16px;
text-align:justify;
}
#lw-accordion-header1{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header1:visited{
color: #000000;
}
#lw-accordion-header1:hover{
color: #000000;
}
#lw-accordion-header1:active{
color: #000000;
}
#lw-accordion-header2{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header2:visited{
color: #000000;
}
#lw-accordion-header2:hover{
color: #000000;
}
#lw-accordion-header2:active{
color: #000000;
}
#lw-accordion-header3{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header3:visited{
color: #000000;
}
#lw-accordion-header3:hover{
color: #000000;
}
#lw-accordion-header3:active{
color: #000000;
}
#lw-accordion-header4{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header4:visited{
color: #000000;
}
#lw-accordion-header4:hover{
color: #000000;
}
#lw-accordion-header4:active{
color: #000000;
}
#lw-accordion-header5{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header5:visited{
color: #000000;
}
#lw-accordion-header5:hover{
color: #000000;
}
#lw-accordion-header5:active{
color: #000000;
}
#lw-accordion-header6{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header6:visited{
color: #000000;
}
#lw-accordion-header6:hover{
color: #000000;
}
#lw-accordion-header6:active{
color: #000000;
}
}
@media all and (max-width: 480px) {
.wrapper2
{
width:95%;
}
.container-fluid2
{
margin: 0px 20px 0px 20px;
}
.lw-tab-content {
margin:30px;
}
.lw-tab-content p {
font-size:16px;
text-align:justify;
}
#lw-accordion-header1{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header1:visited{
color: #000000;
}
#lw-accordion-header1:hover{
color: #000000;
}
#lw-accordion-header1:active{
color: #000000;
}
#lw-accordion-header2{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header2:visited{
color: #000000;
}
#lw-accordion-header2:hover{
color: #000000;
}
#lw-accordion-header2:active{
color: #000000;
}
#lw-accordion-header3{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header3:visited{
color: #000000;
}
#lw-accordion-header3:hover{
color: #000000;
}
#lw-accordion-header3:active{
color: #000000;
}
#lw-accordion-header4{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header4:visited{
color: #000000;
}
#lw-accordion-header4:hover{
color: #000000;
}
#lw-accordion-header4:active{
color: #000000;
}
#lw-accordion-header5{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header5:visited{
color: #000000;
}
#lw-accordion-header5:hover{
color: #000000;
}
#lw-accordion-header5:active{
color: #000000;
}
#lw-accordion-header6{
text-decoration: none;
color: #000000;
padding: 0.5em 1em;
position: relative;
font-size:18px;
font-weight:500;
}
#lw-accordion-header6:visited{
color: #000000;
}
#lw-accordion-header6:hover{
color: #000000;
}
#lw-accordion-header6:active{
color: #000000;
}

}
@media all and (min-width:1200px) {
.lw-tab-content {
padding-top: 233px;
width: 55%;
min-width: 560px;
}
}
@media all and (min-width: 75em) {
.lw-tab-content {
width: 60%;
min-width: 790px;
padding: 223px 50px 50px;
}
}
.lw-tab-image {
color: #fff;
}
@media all and (min-width:1200px) {
.lw-tab-image {
width: 45%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 223px 78px 50px 138px;
}
.lw-tab-image:before, .lw-tab-image:after {
content: "";
display: block;
position: absolute;
height: 150%;
width: 500px;
transform-origin: bottom right;
bottom: -15px;
z-index: 2;
}
.lw-tab-image:before {
transform: rotate(12deg);
right: 96%;
}
.lw-tab-image:after {
transform: rotate(4deg);
right: 99%;
}
}
@media all and (min-width: 75em) {
.lw-tab-image {
width: 40%;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 223px 78px 50px 138px;
position: relative;
}
.lw-tab-image .lw-tab-image-dimmer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
}
.lw-tab-image .stat {
display: block;
}
.lw-tab-image .stat p {
display: none;
}
/*右側凸顯顯示*/
@media all and (min-width: 75em) {
.lw-tab-image .stat {
font-family: 'Montserrat', sans-serif; 
font-size: 2.2rem;
font-weight: 500px;
width: 50%;
min-width: 800px;
padding: 15px 50px 50px 50px;
word-wrap:break-word;
display: block;
text-align: justify;
line-height: 1.0625;
text-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}
.lw-tab-image .stat p {
display: block;
}
.lw-tab-image .stat b {
font-size: 5rem;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
display: block;
}
}
@media all and (min-width: 87.5em) {
.lw-tab-image .stat {
font-size: 2rem;
margin: 0;
}
.lw-tab-image .stat b {
font-size: 6.25rem;
}
}
@supports ((-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%))) {
@media all and (min-width:1200px) {
.lw-tab-panel {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 85% 100%, 0% 85%);
clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 85% 100%, 0% 85%);
overflow: hidden;
}
.lw-tab-content {
padding-bottom: 200px;
}
.lw-tab-image {
-webkit-clip-path: polygon(16vw 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(16vw 0, 100% 0, 100% 100%, 0 100%);
width: 50%;
margin-left: -4.9%;
}
.lw-tab-image:before {
transform: rotate(20deg);
right: 98%;
}
.lw-tab-image:after {
transform: rotate(16deg);
right: 100%;
}
}
@media all and (min-width: 75em) {
.lw-tab-panel {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 45%, 100% 90%, 50% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 45%, 100% 90%, 50% 100%, 0 90%);
}
.lw-tab-content {
width: 59%;
padding-right: calc(15% + 50px);
}
.lw-tab-image {
-webkit-clip-path: polygon(10vw 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(10vw 0, 100% 0, 100% 100%, 0 100%);
width: 61%;
margin-left: -20%;
padding-left: calc(20% + 138px);
padding-right: 100px;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.lw-tab-image:before {
transform: rotate(30deg);
right: 98%;
}
.lw-tab-image:after {
transform: rotate(16deg);
right: 100%;
}
}
@media all and (min-width: 91.25em) {
.lw-tab-content,
.lw-tab-image {
width: 60%;
}
}
}
@media (max-width: 768px) {
.skills ul li {
display: inline-block;
margin: 0em 1em;
}
.skill-info {
margin-top: 2em;
margin-bottom: 1.2em;
}
}
#element{
margin-top:-10px;
}
#news_info{
/*    margin-top: 40px;*/
}
.post-slide{
}
.post-slide .post-img{
position: relative;
overflow: hidden;
border-radius: 0px;
}
.post-slide .post-img img{
height:200px;
width: 300px;
transform: scale(1,1);
transition:transform 0.2s linear;
}
.post-slide:hover .post-img img{
transform: scale(1.1,1.1);
}
.post-slide .over-layer{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
opacity:0;
background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
transition:all 0.50s linear;
}
.post-slide:hover .over-layer{
opacity:1;
text-decoration:none;
}
.post-slide .over-layer i{
position: relative;
top:45%;
text-align:center;
display: block;
color:#fff;
font-size:25px;
}
.post-slide .post-content{
background:#fff;
padding: 0px 30px 40px;
border-radius: 0px;
margin-top:-20px;
}
.post-slide .post-title a{
padding: 0px 15px 0px 15px;
font-size:18px;
font-weight:bold;
color:#333;
text-transform:uppercase;
transition: all 0.3s ease 0s;
text-align:left;
float:left;
}
.post-slide .post-title a:hover{
text-decoration: none;
color:#3498db;
}
.post-slide .post-description{
font-size:14px;
line-height:24px;
color:#000000;
margin-bottom:35px;
text-align:justify;
padding: 0px 15px 0px 15px;
}
.post-slide .post-date{
position: absolute;
bottom:6%;
right:10%;
font-weight:bold;
float: right;
color:#000000;
font-size: 14px;
}
.post-slide .post-date i{
font-size:14px;
margin-right:8px;
color: #000000;
}
#news_post-date{
position: absolute;
bottom:10%;
right:5.3%;
font-weight:bold;
float: right;
color:#000000;
font-size: 14px;
}
.news_post-date i{
font-size:14px;
margin-right:8px;
color: #000000;
}
.post-slide .read-more{
padding: 7px 20px;
float: right;
font-size: 12px;
background: #2196F3;
color: #ffffff;
box-shadow: 0px 10px 20px -10px #1376c5;
border-radius: 25px;
text-transform: uppercase;
}
.post-slide .read-more:hover{
background: #3498db;
text-decoration:none;
color:#fff;
}
@media only screen and (max-width:1280px) {
.post-slide .post-content{
padding: 0px 15px 25px 15px;
}
}
.text-overlay {
position: absolute;
top: 10px;
right: 10px;
background-color: #cc0000;
border-radius:5px;
color: white;
font-size: 14px;
font-weight: bold;
padding: 8px;
text-align: center;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.vertical-align {
margin: 7% 0;
}
/*-- //products --*/
/*-- 圖塊陰影用法 --*/
.box3 { 
border: 1px solid #ffffff;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity:1 ;
border-radius: 50px;
} 
.box8 { 
border: 1px solid #b2b2b2;
-moz-box-shadow: 0 0 0px #f7f7f7; 
-webkit-box-shadow: 0 0 px #f7f7f7; 
box-shadow:0 0 0px #f7f7f7; 
opacity:1 ;
border-radius: 50px;
width:120px;
height:30px;
text-align:justify;
padding-top:4px;
padding-left:9px;
background: #f7f7f7;
} 
.pa_italic
{
font-size: 18px;
font-weight:bold;
}
.menu-bar{
background-color: rgba(0,0,0,0.6);
text-align: center;
}
.menu-bar ul{
display: inline-flex;
list-style: none;
color: azure;
}
.menu-bar ul li{
width: 120px;
margin: 15px;
padding: 15px;
font-size: 18px;
}
.menu-bar ul li a{
color: white;
text-decoration: none;
}
.menu-bar ul li :hover{
color: orange;
border-radius: 3px;
}
.menu-bar .fa{
margin-right: 8px;
}
.sub-menu-1{
display: block;
list-style:none
}
.menu-bar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: rgba(0,0,0,0.6);
margin-top: 15px;
margin-left: 15px;
width: 350px;
}
.menu-bar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menu-bar ul li:hover .sub-menu-1 ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none
}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover{
color: orange;
}
.fa-angle-right{
float: right;
}
.sub-menu-2{
display: none;
}
.hover-me:hover .sub-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 40px;
background-color: rgba(0,0,0,0.6);
}
.box10 { 
background: #939393;
border: 0px solid #9b9b9b;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity:1 ;
border-radius: 0px;
text-align:justify;             
} 
.box70 { 
background-color: rgba(0,0,0,0.1);
border: 0px solid #9b9b9b;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity:1 ;
border-radius: 300px;
padding:10px;
width:80px
text-align:justify;             
} 
.box15 { 
background: #f9f9f9;
border: 0px solid #f9f9f9;
-moz-box-shadow: 0 0 0px #f9f9f9; 
-webkit-box-shadow: 0 0 px #f9f9f9; 
box-shadow:0 0 0px #f9f9f9; 
height:41px;
opacity:1 ;
border-radius: 0px;
} 
.animated .topIn {
animation: topIn 1s ease;
}
.animated .leftIn {
animation-name: leftIn;
animation-duration: 1s;
}
@keyframes topIn {
from { transform: translateY(-50px) }
to { transform: translateY(0px) }
}
@keyframes leftIn {
from { 
transform: translateX(-50px);
opacity: 0; 
}
to { 
transform: translateX(0px);
opacity: 1; 
}
}
.delay200 {
animation-delay: 200ms;
animation-duration:200ms;
animation-fill-mode: backwards!important;
}
.delay400 {
animation-delay: 400ms;
animation-fill-mode: backwards!important;
}
.delay600 {
animation-delay: 600ms;
animation-fill-mode: backwards!important;
}
.delay800 {
animation-delay: 800ms;
animation-duration:800ms;
animation-fill-mode: backwards!important;
}
.box20 {
font-size:  32px; 
position: relative;
display: inline-block;
margin-bottom: 0em;
color: #000000;
}
span.box20  {
font-size:  36px; 
margin-top: 2px;
letter-spacing:3px;
display: block;
}
@media (max-width: 768px) {
span.box20
{font-size:  28px; 
margin-bottom: 5px;
letter-spacing:3px;}
}
.box21 {
font-family: 'Raleway';
font-size:  14px; 
position: relative;
display: inline-block;
margin-bottom: 0.2em;
color: #000000;
font-weight:100px;
}
span.box21  {
font-family: 'Raleway';
font-size:  14px; 
margin-top: 2px;
letter-spacing:0px;
}
span.box60  {
display:block;
font-size:  20px; 
font-weight:600px;
}
.box20 i { 
font-size: 46px;
color: #000000;
}
.project-name {
text-align: center;
padding: 10px 0;
}
.success {
background: #78AD42 !important;
}
/* ALL animation types called */
@-webkit-keyframes bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounce-2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px);
}
60% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateX(100px);
}
60% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(0);
}f
}
@keyframes bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
/*#news*/
/*{*/
/**/
/*     background:linear-gradient(rgba(250, 250, 250, 1), rgba(230, 240, 255, 0.7)), url(../images/global-international-connections.jpeg) no-repeat 0px 0px;*/
/*      width: 100%;*/
/*   */
/*   	  background-position:left bottom;*/
/*      background-repeat: no-repeat;*/
/*      background-size: cover;*/
/*      -webkit-background-size: cover;*/
/*      -moz-background-size: cover;*/
/**/
/*}*/
@media (max-width: 768px) {
/* 調整手機上的右邊界超出範圍 */
/*.card:nth-child(odd) {*/
/*margin-right: 20px;*/
/*}*/
}
@media (max-width: 768px) {
#about
{
margin-top:-80px;
}
}
#about_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold;
}
#news_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#services_text
{   letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#skills_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#products_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#history_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#event_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#counter_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#research_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
#certification_text
{
letter-spacing:3px;
font-size: 18px;
font-weight:bold
}
@media (max-width: 768px) {
#about_text
{
font-size: 16px;
font-weight:500px
}
#news_text
{
font-size: 16px;
font-weight:500px
}
#services_text
{
font-size: 16px;
font-weight:500px
}
#skills_text
{
font-size: 16px;
font-weight:500px
}
#products_text
{
font-size: 16px;
font-weight:500px
}
}
.font {
font-size: 42px;
color: transparent; /* 文字顏色設定透明 */
background-image: linear-gradient(45deg, #FDC830, #ffcc33 95%); /* 設定漸層角度及顏色 */
-webkit-background-clip: text; /* 背景裁剪成文字的前景色 */
background-clip: text;
border-right: 0px solid #eee;
}
.box17 { 
background: #000000;
border: 0px solid #f9f9f9;
-moz-box-shadow: 0 0 0px #f9f9f9; 
-webkit-box-shadow: 0 0px #f9f9f9; 
box-shadow:0 0 0px #f9f9f9; 
opacity:1 ;
border-radius: 0px 0px 0px 0px;
} 
/*-- 雷射區塊 --*/
.box16 { 
-moz-box-shadow: 0 0 1px #ccc; 
-webkit-box-shadow: 0 1 px #ccc; 
box-shadow:0 0 1px #ccc; 
opacity:1 ;
border-radius: 0px 0px 0px 0px;
background: linear-gradient(
90deg, 
#800080 0%, 
#0000FF 20%, 
#008000 30%, 
#FFFF00 40%,  
#FFA500 50%, 
#c10000 65%, 
#8e0000 75%
)
} 
.circle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px; /* 设置圆形容器的宽度 */
  height: 400px; /* 设置圆形容器的高度 */
  border-radius: 50%; /* 将容器变成圆形 */
  background-color: #fff; /* 设置容器的背景颜色（可选） */
  margin: 0 auto; /* 居中容器 */
  position: relative;
}

.circle {
  width: 100px; /* 设置圆形元素的宽度 */
  height: 100px; /* 设置圆形元素的高度 */
  border-radius: 50%; /* 将元素变成圆形 */
  position: absolute;
}
.color
{
background-image: linear-gradient( 135deg, #ffd5f3 10%, #800080 100%);
}
.color1
{
background-image: linear-gradient( 135deg, #d9e0ff 10%, #0000FF 100%);
}
.color2
{
background-image: linear-gradient( 135deg, #d1fcd1 10%, #008000 100%);
}
.color3
{
background-image: linear-gradient( 135deg, #fef9d1 10%, #FFFF00 100%);
}
.color4
{
background-image: linear-gradient( 135deg, #ffe1b5 10%, #FFA500 100%);
}
.color5
{
background-image: linear-gradient( 135deg, #fec5a9 10%, #ff0000 100%);
}

.box9 { 
border: 1px solid #000000;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity:1 ;
border-radius: 30px;
margin-bottom:1em;
}
.box19 { 
border: 1px solid #000000;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity:1 ;
border-radius: 50px;
}
.box4 { 
border: 0px solid #ffffff;
-moz-box-shadow: 0 0 0px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc; 
opacity:1 ;
border-radius: 0px;
width:100%;
padding-top:30px;
background: #000000;
color:#ffffff
} 
.box4 hover { 
background: #000000;
color:#ffffff
} 
.box7 { 
border: 1px solid #ffffff;
-moz-box-shadow: 0 0 px #ccc; 
-webkit-box-shadow: 0 0 px #ccc; 
box-shadow:0 0 0px #ccc;
opacity:1 ;
border-radius: 50px;
background: #f4f4f4;
color:#050505 
} 
.box7 li  { 
padding:1px;
} 
.box7 hover { 
background: #000000;
color:#ffffff
} 
/*-- team --*/
/*--//stats --*/
.carousel-control {
color: #fff;
bottom: 0;
}
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control1 {
color: #fff;
bottom: 0;
}
.carousel-control1:hover,
.carousel-control1:focus {
color: #fff;
}
.carousel-control1.left,
.carousel-control1.right {
background-image: none;
}
.media-object {
margin: auto;
margin-top: 1em;
border-radius: 50%;
}
.adjust1 {
margin-bottom: 2px;
border: 0;
background: #ffffff;
box-shadow: 0 0 29px 0 rgba(41, 41, 41, 0.19);
padding: 48px 48px 65px;
}
@media screen and (max-width: 768px) {
.media-object {
margin-top: 0;
}
}
/* //testimonials */
p.Lor {
font-size: 15px;
color: #777;
line-height: 1.8em;
}
/*-- testimonials --*/
.testi-text {
position: relative;
padding: 24px;
}
.fone {
margin-top: 30px;
}
.carousel-control .active {
background: #31708f;
}
.carousel-control1 .active {
background: #31708f;
}
.adjust1 p{
color: #777;
line-height: 2em;
text-align: left;
font-size:15px;
letter-spacing:1px;
}
.testi-left .carousel-control.left,
.testi-left .carousel-control.right {
width: 19px;
height: 19px;
}
.testi-left .carousel-control1.left,
.testi-left .carousel-control1.right {
width: 19px;
height: 19px;
}
.testi-text1:before {
border-left: 10px solid #ad1a0a;
border-right: none !important;
left: auto !important;
right: -3% !important;
}
.testi-text h4 {
font-size: 1.3em;
color: #eac828;
line-height: 1.5em;
font-weight: 600;
letter-spacing: 2px;
text-align: left;
}
.caption.testi-text span {
font-size: 1.2em;
margin-right: 10px;
color: #777;
}
.testi-text h5 {
font-size: 1em;
color: #000 ;
line-height: 1.5em;
font-weight: 600;
letter-spacing:2px;
text-align: left;
}
.testi-left {
width: 89%;
margin: 0 auto;
position: relative;
}  
#o_carousel-indicators {
position: absolute;
bottom: 10px;
left: 52%;
z-index: 15;
padding-left: 0;
text-align: center;
list-style: none;
}
#o_carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
#o_carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}
#quote-carousel .carousel-indicators {
left: 40%;
top: 0%;
}
.carousel-indicators li{
display:block;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 3px solid #CCC;
opacity: 0.2;
border-radius:5px;
overflow: hidden;
transition: all 0.4s;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
width: 140px;
height: 130px;
border-radius: 5px;
border:3px solid #1F9ED2;
opacity: 1;
overflow: hidden;
margin: 0 -1.5em;
}
.carousel-inner {
text-align:justify;
min-height: 400px;	
left: 0%;
}
.item blockquote {
border-left: none;
margin: 0;
}
#quote-carousel h5.testi-title {
font-family: 'MonteCarlo', cursive;
color: #ffffff;
font-weight: 400px;
text-transform: capitalize;
width:60%;
margin: 0% 0% 0% 9%;
font-size:24px;
text-align:right;
}
.flyText {
opacity:0;
}
/*--//手機調整團隊的位置 --*/
@media (max-width: 768px) {
.carousel-indicators {
position: absolute;
bottom: 0px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -32%;
margin-top: 22%;
text-align: center;
list-style: none;
}
}
#team_p{
font-family: '微軟正黑體', sans-serif;
color:#000000;
font-size:30px;
font-weight:400;
line-height:0px;
text-transform:uppercase;
margin-bottom: -50px;
letter-spacing:0px;
}
.social1 {
text-align:justify;
color: #ffffff;
font-weight: 500;
text-transform: uppercase;
font-size:16px;
width:60%;
margin: 3% 0% 0% 35%;
line-height: 25px;
}
.social1 li {
display: inline-block
}
.social1 li a {
display: block;
width: 35px;
height: 35px;
background: #fff;
border-radius: 50%;
font-size: 17px;
color: #141414;
line-height: 35px;
margin-right: 0px;
text-align:center;
transition: all .4s ease-in-out 0s
}
.social1 li a:hover {
color: #fff;
background: #000;
}
span.test-info {
color:#000000;
}
.content1 {  
color: #000;  
text-align: center;  
background-color: #fff;    
display: none;  
}  
.load_center {  
text-align: center;  
}  
.menu_Main{
height:30px;
}
.menu_StaticMenuStyle{
}
.menu_StaticMenuItemStyle {
width:70px;
font-size:15px;
/*HorizontalPadding="5px" VerticalPadding="2px"*/
}
.menu_StaticHoverStyle{
color:#FFFFFF;
background-color:#668BB2 ;
width:60px;
}
.menu_StaticSelectedStyle{
}
.menu_DynamicMenuStyle{
font-size:15px;
border-right: #B1B266 thin solid;
border-top: #B1B266 thin solid;
border-left: #B1B266 thin solid;
border-bottom: #B1B266 thin solid ;
z-index: 100;
width:100px;
}
.menu_DynamicMenuItemStyle{
width:200px;
/*HorizontalPadding="5px" VerticalPadding="2px"*/
}
.menu_DynamicSelectedStyle{
}
.menu_DynamicHoverStyle{
color:#FFFFFF;
background-color:#B1B266 ;
width:100px;
}
.btnLoadMore
{
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
margin-top:50px;
}
.btnLoadMore:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore0 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore0:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
}  
#loadMore1 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:100px;
}  
#loadMore1:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:100px;
} 
.loadMore1 {  
font-family: '微軟正黑體', sans-serif;
padding: 0.8em 1em;
color: #000000;
background:#e8e8e8;
font-weight: 500;
text-align: center;
border: solid 0px black;
border-radius:100px;
}  
.loadMore1:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background:#000000;
border: solid 0px #e8e8e8;
color: #ffffff;
border-radius:100px;
} 
.loadMore_1 {  
font-family: '微軟正黑體', sans-serif;
padding: 0.8em 1em;
color: #000000;
background:#e8e8e8;
font-weight: 500;
text-align: center;
border: solid 0px black;
border-radius:5px;
}  
.loadMore_1:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background:#000000;
border: solid 0px #e8e8e8;
color: #ffffff;
border-radius:5px;
} 
.paging {  
font-family: 'Roboto', sans-serif;
padding: 0.3em 0.5em;
}  
.paging1 {
font-family: 'Roboto', sans-serif;
padding: 0.1em 0.5em;
color: #000000;
background: none;
font-weight: 500;
text-align: center;
border: solid 0px black;
border-radius: 3px;
}
.paging1:hover {
padding: 0.1em 0.5em;
font-family: 'Roboto', sans-serif;
text-decoration: none;
font-weight: 500;
text-align: center;
background: #e8e8e8;
border: solid 0px #e8e8e8;
color: #000000;
border-radius: 3px;
}
/*.paging1 {*/
/*  font-family: 'Roboto', sans-serif;*/
/*  padding: 0.1em 0.5em;*/
/*  color: #000000;*/
/*  background: none;*/
/*  font-weight: 500;*/
/*  text-align: center;*/
/*  border: solid 0px black;*/
/*  border-radius: 3px;*/
/**/
/*}*/
/**/
/**/
/**/
/*.paging1:hover {*/
/*  padding: 0.1em 0.5em;*/
/*  font-family: 'Roboto', sans-serif;*/
/*  font-weight: 500;*/
/*  text-align: center;*/
/*  background: #e8e8e8;*/
/*  border: solid 0px #e8e8e8;*/
/*  color: #000000;*/
/*  border-radius: 3px;*/
/*  }*/
/**/
/*}*/
/**/
/**/
/**/
/*.paging1:focus {*/
/*  color: #ffffff;*/
/*  background: #000000;*/
/**/
/*  */
/*}*/
/**/
/*   /* 未連結 */*/
/*        a:link*/
/*        {*/
/*            color: #000000;*/
/*        }*/
/*        /* 已連結過 */*/
/*        a:visited*/
/*        {*/
/*            color: #FF0000;*/
/*        }*/
/*        /* 滑鼠移至連結 */*/
/*        a:hover*/
/*        {*/
/*            color: #00FF00;*/
/*        }*/
/*        /* 選擇的連結 */*/
/*        a:active*/
/*        {*/
/*            color: #0000FF;*/
/*        }*/
@media (max-width: 768px) {
.loadMore1 {  
font-family: '微軟正黑體', sans-serif;
padding: 0.5em 0.8em;
color: #000000;
background:#e8e8e8;
font-weight: 500;
text-align: center;
border: solid 0px black;
border-radius:50px;
display:inline-block;
}  
.paging {  
padding: 1em 0.3em;
display:inline-block;
} 
.paging1 {  
display:inline-block;
} 
}
#loadMore2 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore2:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore2_1 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore2_1:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore2_2 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore2_2:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore2_3 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore2_3:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore2_4 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore2_4:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore2_5 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore2_5:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore3 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore3:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore3_1 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore3_1:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
/*#loadMore3_2 {  */
/* font-family: '微軟正黑體', sans-serif;*/
/*    text-decoration: none;*/
/*    color: #000;*/
/*    font-size: 14px;*/
/*    padding: 1em 5.5em;*/
/*    background: none;*/
/*    font-weight: 500;*/
/*    text-align: center;*/
/*    border: solid 1px black;*/
/*    border-radius:30px;*/
/*	*/
/*	 */
/**/
/*	 */
/*}  */
/*#loadMore3_2:hover {  */
/* 	font-family: '微軟正黑體', sans-serif;*/
/*	text-decoration:none;*/
/*	background: #000;*/
/*    border: solid 1px #000;*/
/*    color: #fff;*/
/*    */
/*  	border-radius:30px;*/
/*} */
#loadMore3_2 {
display: inline-block;
background-color: transparent;
font-family: "Dosis", sans-serif;
font-size: 16px;
font-weight: 300;
color: #000000;
text-transform: uppercase;
letter-spacing: 1px;
height: 50px;
line-height: 50px;
margin-right: 25px;
padding: 0 50px;
border: none;
border-right: 1px solid #000000;
position: relative;
text-decoration:none;
transition: color 0.2s ease-in-out 0s;
margin-bottom: 30px;
}
#loadMore3_2:before, #loadMore3_2:after {
content: "";
position: absolute;
top: 0;
}
#loadMore3_2:before {
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
background-color: #ffffff;
z-index: -1;
}
#loadMore3_2:after {
right: -1px;
width: 1px;
height: 50px;
background-color: #000000;
transform: rotate(-90deg);
transform-origin: center;
z-index: 0;
transition: width 0.3s ease-in-out, transform 0.2s ease-in-out 0.3s, z-index 0.15s ease-in-out;
}
#loadMore3_2:hover {
color: #ffffff;
transition: color 0.2s ease-in-out 0.25s;
}
#loadMore3_2:hover:after {
z-index: -1;
transform: rotate(0deg);
width: 100%;
transition: transform 0.2s ease-in-out, width 0.3s ease-in-out 0.2s;
}
.custom-col-md-2 {
flex: 0 0 20%;
max-width: 20%;
}
.snip1577 {
font-family: 'Montserrat', Arial, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #fff;
text-align: left;
font-size: 16px;
background: #000;
}
.snip1577 *,
.snip1577:before,
.snip1577:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1577 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1577:before,
.snip1577:after {
position: absolute;
top: 20px;
right: 20px;
content: '';
background-color: #fff;
z-index: 1;
opacity: 0;
}
.snip1577:before {
width: 0;
height: 1px;
}
.snip1577:after {
height: 0;
width: 1px;
}
.snip1577 figcaption {
position: absolute;
left: 0;
bottom: 0;
padding: 15px 20px;
}
.snip1577 h3,
.snip1577 h4 {
margin: 0;
font-size: 1.1em;
font-weight: normal;
opacity: 0;
}
.snip1577 h4 {
font-size: .8em;
text-transform: uppercase;
}
.snip1577 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1577:hover img,
.snip1577.hover img {
zoom: 1;
filter: alpha(opacity=20);
-webkit-opacity: 0.2;
opacity: 0.2;
}
.snip1577:hover:before,
.snip1577.hover:before,
.snip1577:hover:after,
.snip1577.hover:after {
opacity: 1;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.snip1577:hover:before,
.snip1577.hover:before {
width: 40px;
}
.snip1577:hover:after,
.snip1577.hover:after {
height: 40px;
}
.snip1577:hover h3,
.snip1577.hover h3,
.snip1577:hover h4,
.snip1577.hover h4 {
opacity: 1;
}
.snip1577:hover h3,
.snip1577.hover h3 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1577:hover h4,
.snip1577.hover h4 {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.vertical-separator {
border-right: 0.5px solid #ccc;
height: 100px; /* 确保分隔线的高度与内容相同 */
}
/*#loadMore3_2 {*/
/*    margin: 0px*/
/*    auto 0 auto;*/
/*	  text-decoration: none;*/
/*}*/
/**/
/*#loadMore3_2{*/
/*    width: 190px;*/
/*    height: 50px;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    border: 1px solid #000000;*/
/*    line-height: 45px;*/
/*    text-align: center;*/
/*    color: #000000;*/
/*    font-size: 16px;*/
/*    background: none;*/
/*    -webkit-transform: translateY(0);*/
/*    transform: translateY(0);*/
/*    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0);*/
/*    box-shadow: 0 0 3px rgba(0, 0, 0, 0);*/
/*    -webkit-transition: background 0.3s, color 0.3s, width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96);*/
/*    transition: background 0.3s, color 0.3s, width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96);*/
/*    transition: background 0.3s, color 0.3s, box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96);*/
/*    transition: background 0.3s, color 0.3s, box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), width 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-box-shadow 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96), -webkit-transform 0.3s cubic-bezier(0.12, 0.55, 0.51, 0.96)*/
/*}*/
/**/
/*#loadMore3_2*/
/*span {*/
/*    position: relative;*/
/*    z-index:1*/
/*}*/
/**/
/**/
/*#loadMore3_2*/
/*span {*/
/*       font-size: 14px;*/
/*}*/
/**/
/**/
/*#loadMore3_2:before {*/
/*    content: '';*/
/*    display: block;*/
/*    position: absolute;*/
/*    z-index: 0;*/
/*	color: #ffffff;*/
/*    background: #1f1f1f;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    top: 0;*/
/*    left: 0;*/
/*    -webkit-transform: scaleX(0);*/
/*    transform: scaleX(0);*/
/*    opacity: 0;*/
/*    -webkit-transition: opacity .3s, -webkit-transform .3s;*/
/*    transition: opacity .3s, -webkit-transform .3s;*/
/*    transition: transform .3s, opacity .3s;*/
/*    transition:transform .3s, opacity .3s, -webkit-transform .3s*/
/*}*/
/**/
/*#loadMore3_2:hover {*/
/*    color: #fff;*/
/*    -webkit-transform: translateY(-2px);*/
/*    transform: translateY(-2px);*/
/*    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);*/
/*    box-shadow:0 5px 10px rgba(0, 0, 0, 0.5)*/
/*	   */
/*}*/
/**/
/*#loadMore3_2:hover:before {*/
/*    -webkit-transform: scaleX(1);*/
/*    transform: scaleX(1);*/
/*    opacity:1*/
/*}*/
/*#loadMore3_2 {*/
/*    position: relative;*/
/*    text-align: center;*/
/*    margin: 0*/
/*    auto 50px auto;*/
/*    z-index:1*/
/*}*/
/**/
/*#loadMore3_2 {*/
/*    width:calc(50% - 10px)*/
/*}*/
#loadMore3_3 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore3_3:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore4 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore4:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore5 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore5:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore6 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore6:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMor11 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore11:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore11_0 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore11_0:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore21 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore21:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
#loadMore21_0 {  
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000;
font-size: 14px;
padding: 1em 6em;
background: none;
font-weight: 500;
text-align: center;
border: solid 1px black;
border-radius:30px;
}  
#loadMore21_0:hover {  
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
border-radius:30px;
} 
.noContent {  
color: #fff;  
background-color: #902F0D;  
border: solid 1px #902F0D;
}  
/*-- //team --*/
/* team */
.team-grid {
right: 0;
top: 0;
width: 100%;
}
.box5 {
background: #444;
position: relative;
overflow: hidden;
}
.box5:after,
.box5:before {
content: "";
}
.box5 .icon,
.box5 .icon li {
display: inline-block;
}
.box5:after,
.box5:before {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.62);
position: absolute;
top: -80px;
left: 15px;
opacity: 0;
z-index: 1;
transition: all .35s ease;
-webkit-transition: all .35s ease-in;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
-ms-transition: all .35s ease;
}
.box5:after {
top: auto;
left: auto;
bottom: -80px;
right: 15px
}
.box5:hover:after,
.box5:hover:before {
opacity: .75;
transform: scale(8);
transition-delay: .15s
}
.box5 img {
width: 100%;
height: auto;
transition: all .35s ease-out 0s
}
.box5 .icon {
margin: 0;
position: absolute;
bottom: 15px;
right: 15px;
z-index: 2;
transform: scale(0);
transition: all .35s ease-out
}
.box5:hover .icon {
transform: scale(1);
transition-delay: .15s
}
.box5 .icon li a {
display: block;
width: 35px;
height: 35px;
line-height: 35px;
background: #fff;
font-size: 18px;
color: #444;
margin-right: 10px;
position: relative;
transition: all .5s ease 0s;
border-radius: 50%;
text-align: center;
}
.box5 .icon li a:hover {
background: #444;
color: #fff
}
.box5 .box-content {
padding: 20px 15px;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.box5  {
font-size: 20px;
font-weight: 800;
color: #fff;
margin: 0 0 5px;
opacity: 0;
transform: translate(-20px, -20px);
transition: all .35s ease-out
}
.box5:hover  {
opacity: 1;
transform: translate(0, 0);
transition-delay: .15s
}
.box5 .post {
display: inline-block;
font-size: 16px;
color: #fff;
opacity: 0;
transform: translate(-20px, -20px);
transition: all .35s ease-out
}
.box5:hover .post {
opacity: 1;
transform: translate(0, 0);
transition-delay: .15s
}
.box6 ,
.box6 img,
.box6:after {
transition: all .35s ease 0s
}
@media only screen and (max-width:990px) {
.box5 {
margin-bottom: 30px
}
}
/* team */
/*********************** Demo - 13 *******************/
.box13 {
width: 85%;
position: relative;
transition: all .2s ease-out 0s;
text-align: center;
margin-top: 25px;/* 調整圖片兼間距 */
margin-left: 37px;/* 調整圖片兼間距 */
}
.box13 .box-content,
.box13:after {
position: absolute;
left: 20px;
right: 20px
}
.box13:after {
content: "";
display: block;
background: #000;
top: 20px;
bottom: 20px;
opacity: 0;
transform: rotate3d(-1, 1, 0, 100deg);
transition: all .4s ease-in-out 0s
}
.box13:hover:after {
opacity: .9;
transform: rotate3d(0, 0, 0, 0deg)
}
.box13 img {
width: 100%;
height: auto
}
.box13 .box-content {
top: 45%;
opacity: 0;
z-index: 1;
-webkit-transform: translate(10%, -30%);
transform: translate(10%, -30%);
transition: all .2s ease-out 0s
}
.box13:hover .box-content {
opacity: 1;
transform: translate(0, -50%);
transition-delay: .2s
}
.box13  {
display: block;
font-size: 22px;
font-weight: 700;
color: #4aa5ff;
margin: 0 0 10px;
text-transform: capitalize;
}
.box13 .post {
display: block;
font-size: 15px;
color: #ffffff;
margin-bottom: 20px;
text-transform: capitalize;
}
.box13 .social {
padding: 0;
margin: 0;
list-style: none
}
.box13 .social li {
display: inline-block
}
.box13 .social li a {
display: block;
width: 35px;
height: 35px;
background: #fff;
border-radius: 50%;
font-size: 17px;
color: #1b1462;
line-height: 35px;
margin-right: 5px;
transition: all .4s ease-in-out 0s
}
.box14 .icon li,
.box14 .post {
display: inline-block
}
.box13 .social li a:hover {
color: #fff;
background: #000;
}
@media only screen and (max-width:990px) {
.box13 {
margin-bottom: 30px
}
}
h5.blog-title {
color: #35b53e;
font-size: 1.2em;
}
/*-- footer --*/
.banner-info {
padding-top:130px;
}
.banner-info h3 {
font-family: 'Orbitron', sans-serif;
color:#fff;
font-size: 30px;
font-weight: 550px;
text-transform:uppercase;
text-align:left;
margin: 25px 20px 10px 202px;
}
.banner-info h2 {
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:14px;
text-transform:lowercase;
font-weight:400;
text-align:left;
margin: -10px 20px 10px 205px;
}
.banner-info p {
color:#fff;
padding: 30px 290px;
font-size: 15px;
word-spacing: 5px;
line-height: 25px;
}
/*-- about --*/
h5.title-w3 {
font-size: 30px;
text-transform: uppercase;
text-align: center;
margin-bottom: 2.5em;
color: #000;
}
h5.title-w3 label {
width: 100px;
height: 4px;
background: #ff2b0b;
vertical-align: middle;
margin: 0 20px;
}
.about-w3layouts,.portfolio,.testimonials {
padding: 100px 0;
}
ul.resp-tabs-list {
margin: 0 auto;
text-align: center;
float:none;
}
.tab1.resp-tab-content.resp-tab-content p {
color: #555;
font-size: 17px;
line-height: 34px;
}
/*-- gallery --*/
.w3l_gallery_grid li{
text-align: center;
display: inline-block;
float: left;
width: 33.3%;
padding: 1.83%;
font-size: 13px;
margin: 0em 0em 0em 0em;
}
.w3l_gallery_grid1 li{
text-align: center;
display: inline-block;
float: left;
width: 50%;
font-size: 14px;
}
.w3l_gallery_grid2 li{
text-align: center;
display: inline-block;
float: left;
width: 100%;
font-size: 14px;
}
.w3l_gallery_grid2 img{
width: 100px;
}
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
width: 200px;
height: 150px;
}
.box .overbox {
background-color: hsla(0, 0%, 11%, 0.6);
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
padding:4.5em 2em 2em;
}
.box,.box .overbox {
height: 150px;
}
.box:hover .overbox { opacity: 1; }
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box {
font-size:1.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover ,
.box:focus  {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 13px;
line-height:1.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
margin:10px 0 0 0;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
/*-- //gallery --*/
span.shortline1-1 , span.shortline1-2 , span.shortline1-3 {
background-color:#fff;
display:block;
width: 270px;
height: 0.5px;
left:20%;
position:absolute;
}
span.shortline1-1 {
top: 3%;
}
span.shortline1-2 {
top: 3%;
}
span.shortline1-3 {
top: 3%;
}
span.shortline2-1 , span.shortline2-2 , span.shortline2-3 {
background-color:#fff;
display:inline-block;
width: 270px;
height: 0.5px;
right:20%;
position:absolute;
}
span.shortline2-1 {
top:23%;
}
span.shortline2-2 {
top: 24%;
}
span.shortline2-3 {
top: 25%;
}
span.longline1 , span.longline2 , span.longline3 {
background-color:#fff;
display:block;
width: 855px;
height: 0.5px;
left: 20%;
position:absolute;
}
span.longline1 {
top: 41%;
}
span.longline2 {
top: 42%;
}
span.longline3 {
top: 43%;
}
.banner-info a.btn.btn-default.btn-lg  {
font-family: '微軟正黑體', sans-serif;
font-size:12px;
font-weight:500;
background-color:black;	
border:2px solid #fff;
border-radius:30px;
text-transform:uppercase;
color:#fff;
text-align:left;
margin: -30px 20px 10px -720px;/*-- /get stated --*/
}
.banner-info a.btn.btn-default.btn-lg:hover {
background-color:#902F0D;
}
/*-- /banner-info --*/
/*-- About-Us --*/
.about-us {
margin:0;
padding:0;
}
.about-us h3 {
font-family: '微軟正黑體', sans-serif;
text-transform: capitalize;
color:grey;
font-size:32px;
font-weight:400;
padding: 70px 0 20px;
letter-spacing:0px;
}
.about-us h5 {
font-family: '微軟正黑體', sans-serif;
color:grey;
font-size:24px;
font-weight:400;
padding: 25px 0 20px;
text-transform:uppercase;
}
.about-us h6 {
font-family: '微軟正黑體', sans-serif;
color:black;
font-size:20px;
font-weight:600;
text-transform:uppercase;
}
.about-us p.text-center {
word-spacing: 5px;
color:grey;
font-size:17px;
font-weight:500;
padding: 10px 0 40px;
}
.
iframe {
width:800px;
height:600px;
}
.accordion{
margin-left:60px;
margin-bottom:100px;
}
.accordion-collapse .accordion-body {
/*  height: calc(100vh - (3 * 52px));*/
box-sizing: border-box;
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 1rem 1.25rem;
font-size: 1rem;
color: #212529;
text-align: left;
background-color: #fff;
border: 0;
border-radius: 0;
overflow-anchor: none;
transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease
}
@media (prefers-reduced-motion: reduce) {
.accordion-button {
transition:none
}
}
.accordion-button:not(.collapsed) {
color: #000000;
background-color: #f4f4f4;
box-shadow:inset 0 -1px 0 rgba(0, 0, 0, .125)
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform:rotate(-180deg)
}
.accordion-button::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 1.25rem;
transition:transform .2s ease-in-out
}
@media (prefers-reduced-motion: reduce) {
.accordion-button::after {
transition:none
}
}
.accordion-button:hover {
z-index:2
}
.accordion-button:focus {
z-index: 3;
border-color: #86b7fe;
outline: 0;
box-shadow:0 0 0 .25rem rgba(13, 110, 253, .25)
}
.accordion-header {
margin-bottom:0
}
.accordion-button{
font-size:16px;
font-weight:bold;
}
.accordion-item 
{
width:750px;
background-color: #fff;
border:1px solid rgba(0, 0, 0, .125)
}
.accordion-item:first-of-type {
border-top-left-radius: .25rem;
border-top-right-radius:.25rem
}
.accordion-item:first-of-type .accordion-button {
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius:calc(.25rem - 1px)
}
.accordion-item:not(:first-of-type) {
border-top:0
}
.accordion-item:last-of-type {
border-bottom-right-radius: .25rem;
border-bottom-left-radius:.25rem
}
.accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-right-radius: calc(.25rem - 1px);
border-bottom-left-radius:calc(.25rem - 1px)
}
.accordion-item:last-of-type .accordion-collapse {
border-bottom-right-radius: .25rem;
border-bottom-left-radius:.25rem
}
.accordion-body {
padding:1rem 1.25rem
}
.accordion-flush .accordion-collapse {
border-width:0
}
.accordion-flush .accordion-item {
border-right: 0;
border-left: 0;
border-radius:0
}
.accordion-flush .accordion-item:first-child {
border-top:0
}
.accordion-flush .accordion-item:last-child {
border-bottom:0
}
.accordion-flush .accordion-item .accordion-button {
border-radius:0
}
.footer_accordion{
margin-left:0px;
margin-bottom:100px;

}
.accordion-item 
{
width:100%;
background-color: #fff;
border:1px solid rgba(0, 0, 0, .125)
}


/*手機隱私權調整*/
@media (max-width: 480px) {
.accordion{
margin-left:0px;
margin-bottom:100px;
}
.accordion-item 
{
width:100%;
background-color: #fff;
border:1px solid rgba(0, 0, 0, .125)
}
}
.about-us p.p1 {
color:grey;
font-size:12px;
line-height: 20px;
word-spacing: 5px;
text-align:justify
}
.button12 {
cursor: pointer;
background-color: #000;
width: 160px;
height: 40px;
padding:15px 40px;
line-height: 0px;
position: relative;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 0;
background:#000000;
margin-left:64px;
}
.button12 span {
color: #fff;
display: inline-block;
padding-left: 35px;
text-transform: uppercase;
font: 600 18px/55px '微軟正黑體';
transform: scaleX(0.6);
letter-spacing: 5px;
transform-origin: center left;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.button12 em {
position: absolute;
height: 1px;
background: #fff;
width: 47%;
right: 23px;
top: 50%;
transform: scaleX(0.25);
-webkit-transform:scaleX(0.25);
transform-origin: center right;
transition: all 0.3s ease;
z-index: 1;
}
.button12:before,
.button12:after {
content: '';
background: #efefef;
height: 50%;
width: 0;
position: absolute;
transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-transition:0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button12:before {
top: 0;
left: 0;
right: auto;
}
.button12:after {
bottom: 0;
right: 0;
left: auto;
}
.button12:hover:before {
width: 100%;
right: 0;
left: auto;
}
.button12:hover:after {
width: 100%;
left: 0;
right: auto;
}
.button12:hover span {
color: #000;
}
.button12:hover em {
background: #000;
transform: scaleX(.51);
transform: scaleX(.51);
}
.p1_style{  
color:grey;
font-size:14px;
font-weight:500;
line-height: 20px;
word-spacing: 5px;
text-align:justify
}
.p2_style{  
color: #000000;
line-height: 25px;
font-size: 16px;
letter-spacing: 0px;
font-weight: 800px;
text-align:justify
}
#u2_style
{
list-style:disc;
line-height: 25px;
font-weight: 600px;
padding-left: 20px; 
font-size: 16px;
color:#000000;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.accordion-body .p2_style{  
color: #000000;
line-height: 25px;
font-size: 14px;
letter-spacing: 0px;
font-weight: 400;
text-align:justify
}
#u2_style 
{
font-weight: bold;
line-height: 25px;
padding-left: 15px; 
font-size: 14px;
color:#000000;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.accordion-body .p2_style{  
color: #000000;
line-height: 25px;
font-size: 14px;
letter-spacing: 0px;
font-weight: 400;
text-align:justify
}
#u2_style 
{
font-weight: bold;
line-height: 25px;
padding-left: 15px; 
font-size: 14px;
color:#000000;
}
}
@media (max-width: 480px) {
.accordion-body .p2_style{  
color: #000000;
line-height: 25px;
font-size: 15px;
letter-spacing: 0px;
font-weight: 400;
text-align:justify
}
#u2_style 
{
font-weight: bold;
line-height: 25px;
padding-left: 15px; 
font-size: 15px;
color:#000000;
}
}
.p10_style{  
font-family: '微軟正黑體', sans-serif;
padding:10px 50px 10px 50px;
color: #000000;
line-height: 22px;
}
.p10_style p{  
color: #000000;
font-size: 14px;
text-align:justify;
font-weight: 700px;
}
.p10_style h1{  
color: #000000;
font-size: 22px;
font-weight: bold;
}
.p10_style h2{  
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing:0px;
}
.p10_style h3{  
text-transform: capitalize;
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing:0px;
}
/*三角小图标*/
.triangle-icon-right {
float: right;
width: 9px;
height: 9px;
margin-top: 5px;
margin-left: 8px;
margin-right: 5px;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
html{
scroll-padding-top: 60px;
}
article.a-post:target{
padding-top:44px;
}
/*-- services --*/
.services,.news{
padding-top: 0px;
background: #ffffff;
}
.services h3{
color: black;
font-size: 24px;
margin-bottom:10px;
}
#news_background
{
/**/
/* background:linear-gradient(rgba(43, 44, 47, 0.1), rgba(43, 44, 47, 0.6)), url(../img/news_b.) no-repeat 0px 0px;*/
background: 
-webkit-linear-gradient(rgba(135, 60, 255, 1), rgba(135, 60, 255, 0.0) 0%),
-webkit-linear-gradient(-25deg, rgba(130,140, 150, 0.1) 50%, rgba(180, 190, 200, 0.1) 0%);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
min-height: 550px;
position: relative;
background-size: cover;--*/
z-index:-1;
}
.about-us h3{
color: black;
font-size: 24px;
margin-bottom:25px;
font-weight:300px
}
.agile-heading h3{
text-align:center;
}
.wthree-services-grid1 {
transform:scale(1,1);transition: all .5s ease-out;
overflow: hidden;
position: relative;
display: block;
box-shadow: 0 0px 0px rgb(107, 107, 107),0 0px 0px rgba(0,0,0,.14);
border-radius:0px;
}
.wthree-services-grid1:hover {
}
.wthree-services-info1{
padding: 6em 0;
background-color: rgba(100, 100, 100, 0);
text-align: center;
}
.wthree-services-info1 h4{
color: #ffffff;
font-size: 1.4em;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
}
.w3ls-border{
width: 30%;
margin: 1em auto 0;
}
.wthree-services-captn1 {
height: 100%;
width: 100%;
position: absolute;
padding: 6em 3em;
text-align: justify;
top: -100%;
right: 0;
background-color: rgba(10, 10, 10, 0.3);
background-size: cover;
-webkit-transition: height 0.1s, opacity 0.1s, -webkit-transform 0.1s;
-moz-transition: height 0.1s, opacity 0.1s, -moz-transform 0.1s;
transition: height 0.1s, opacity 0.1s, transform 0.1s;
-webkit-transform: translateY(-0px);
-moz-transform: translateY(-0px);
transform: translateY(-0px);
}
.wthree-services-captn1 h4 {
text-align: center;
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
margin: -1em;
}
.wthree-services-captn1 p {
text-align:justify
font-size: 1em;
margin-top: 0em;
color: #ffffff;
line-height: 1.5em;
}
#wthree-services-captn1_p,#wthree-services-captn2_p,#wthree-services-captn3_p,#wthree-services-captn4_p,#wthree-services-captn5_p,#wthree-services-captn6_p
{
font-size: 16px;
}
.wthree-services-grid1:hover .wthree-services-captn1 {
display:block;
top: 0%;
}
.services-grids1{
margin:2em 0 0 0 !important;
}
.wthree-services-grid2 {
transform:scale(1,1);transition: all .5s ease-out;
overflow: hidden;
position: relative;
display: block;
box-shadow: 0 0px 0px rgb(107, 107, 107),0 0px 0px rgba(0,0,0,.14);
border-radius:0px;
}
.wthree-services-grid2:hover {
}
.wthree-services-info2{
padding: 6em 0;
background-color: rgba(100, 100, 100, 0);
text-align: center;
}
.wthree-services-info2 svg{
color: #ffffff;
font-size: 3em;
width: 85px;
height: 85px;
text-align:center;
transition: all .4s ease-in-out 0s
}
.wthree-services-info2 h4{
color: #ffffff;
font-size: 1.4em;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
}
.w3ls-border2{
width: 30%;
margin: 1em auto 0;
}
.wthree-services-captn2 {
height: 100%;
width: 100%;
position: absolute;
padding: 6em 3em;
text-align: justify;
top: -100%;
right: 0;
background-color: rgba(10, 10, 10, 0.3);
background-size: cover;
-webkit-transition: height 0.1s, opacity 0.1s, -webkit-transform 0.1s;
-moz-transition: height 0.1s, opacity 0.1s, -moz-transform 0.1s;
transition: height 0.1s, opacity 0.1s, transform 0.1s;
-webkit-transform: translateY(-0px);
-moz-transform: translateY(-0px);
transform: translateY(-0px);
}
.wthree-services-captn2 h4 {
text-align: center;
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
margin: -1em;
}
.wthree-services-captn2 p {
text-align:justify
font-size: 1em;
margin-top: 0em;
color: #ffffff;
line-height: 1.5em;
}
.wthree-services-grid2:hover .wthree-services-captn2 {
display:block;
top: 0%;
}
.services-grids2{
margin:2em 0 0 0 !important;
}
.wthree-services-grid3 {
transform:scale(1,1);transition: all .5s ease-out;
overflow: hidden;
position: relative;
box-shadow: 0 0px 0px rgb(107, 107, 107),0 0px 0px rgba(0,0,0,.14);
border-radius:0px;
}
.wthree-services-grid3:hover {
}
.wthree-services-info3{
padding: 6em 0;
background-color: rgba(100, 100, 100, 0);
text-align: center;
}
.wthree-services-info3 svg{
color: #ffffff;
font-size: 3em;
width: 85px;
height: 85px;
text-align:center;
transition: all .4s ease-in-out 0s
}
.wthree-services-info3 h4{
color: #ffffff;
font-size: 1.4em;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
}
.w3ls-border3{
width: 30%;
margin: 1em auto 0;
}
.wthree-services-captn3 {
height: 100%;
width: 100%;
position: absolute;
padding: 6em 3em;
text-align: justify;
top: -100%;
right: 0;
background-color: rgba(10, 10, 10, 0.3);
background-size: cover;
-webkit-transition: height 0.1s, opacity 0.1s, -webkit-transform 0.1s;
-moz-transition: height 0.1s, opacity 0.1s, -moz-transform 0.1s;
transition: height 0.1s, opacity 0.1s, transform 0.1s;
-webkit-transform: translateY(-0px);
-moz-transform: translateY(-0px);
transform: translateY(-0px);
}
.wthree-services-captn3 h4 {
text-align: center;
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
margin: -1em;
}
.wthree-services-captn3 p {
text-align:justify
font-size: 1em;
margin-top: 0em;
color: #ffffff;
line-height: 1.5em;
}
.wthree-services-grid3:hover .wthree-services-captn3 {
display:block;
top: 0%;
}
.services-grids3{
margin:2em 0 0 0 !important;
}
.wthree-services-grid4 {
transform:scale(1,1);transition: all .5s ease-out;
overflow: hidden;
position: relative;
display: block;
box-shadow: 0 0px 0px rgb(107, 107, 107),0 0px 0px rgba(0,0,0,.14);
border-radius:0px;
}
.wthree-services-grid4:hover {
}
.wthree-services-info4{
padding: 6em 0;
background-color: rgba(100, 100, 100, 0);
text-align: center;
}
.wthree-services-info4 svg{
color: #ffffff;
font-size: 3em;
width: 85px;
height: 85px;
text-align:center;
transition: all .4s ease-in-out 0s
}
.wthree-services-info4 h4{
color: #ffffff;
font-size: 1.4em;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
}
.w3ls-border4{
width: 30%;
margin: 1em auto 0;
}
.wthree-services-captn4 {
height: 100%;
width: 100%;
position: absolute;
padding: 6em 3em;
text-align: justify;
top: -100%;
right: 0;
background-color: rgba(10, 10, 10, 0.3);
background-size: cover;
-webkit-transition: height 0.1s, opacity 0.1s, -webkit-transform 0.1s;
-moz-transition: height 0.1s, opacity 0.1s, -moz-transform 0.1s;
transition: height 0.1s, opacity 0.1s, transform 0.1s;
-webkit-transform: translateY(-0px);
-moz-transform: translateY(-0px);
transform: translateY(-0px);
}
.wthree-services-captn4 h4 {
text-align: center;
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
margin: -1em;
}
.wthree-services-captn4 p {
text-align:justify
font-size: 1.4em;
margin-top: 0em;
color: #ffffff;
line-height: 1.5em;
}
.wthree-services-grid4:hover .wthree-services-captn4 {
display:block;
top: 0%;
}
.services-grids4{
margin:2em 0 0 0 !important;
}
.wthree-services-grid5 {
transform:scale(1,1);transition: all .5s ease-out;
overflow: hidden;
position: relative;
display: block;
box-shadow: 0 0px 0px rgb(107, 107, 107),0 0px 0px rgba(0,0,0,.14);
border-radius:0px;
}
.wthree-services-grid5:hover {
}
.wthree-services-info5{
padding: 6em 0;
background-color: rgba(100, 100, 100, 0);
text-align: center;
}
.wthree-services-info5 svg{
color: #ffffff;
font-size: 3em;
width: 85px;
height: 85px;
text-align:center;
transition: all .4s ease-in-out 0s
}
.wthree-services-info5 h4{
color: #ffffff;
font-size: 1.4em;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
}
.w3ls-border5{
width: 30%;
margin: 1em auto 0;
}
.wthree-services-captn5 {
height: 100%;
width: 100%;
position: absolute;
padding: 6em 3em;
text-align: justify;
top: -100%;
right: 0;
background-color: rgba(10, 10, 10, 0.3);
background-size: cover;
-webkit-transition: height 0.1s, opacity 0.1s, -webkit-transform 0.1s;
-moz-transition: height 0.1s, opacity 0.1s, -moz-transform 0.1s;
transition: height 0.1s, opacity 0.1s, transform 0.1s;
-webkit-transform: translateY(-0px);
-moz-transform: translateY(-0px);
transform: translateY(-0px);
}
.wthree-services-captn5 h4 {
text-align: center;
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
margin: -1em;
}
.wthree-services-captn5 p {
text-align:justify
font-size: 1em;
margin-top: 0em;
color: #ffffff;
line-height: 1.5em;
}
.wthree-services-grid5:hover .wthree-services-captn5 {
display:block;
top: 0%;
}
.services-grids5{
margin:2em 0 0 0 !important;
}
.wthree-services-grid6 {
transform:scale(1,1);transition: all .5s ease-out;
overflow: hidden;
position: relative;
display: block;
box-shadow: 0 0px 0px rgb(107, 107, 107),0 0px 0px rgba(0,0,0,.14);
border-radius:0px;
}
.wthree-services-grid6:hover {
}
.wthree-services-info6{
padding: 6em 0;
background-color: rgba(100, 100, 100, 0);
text-align: center;
}
.wthree-services-info6 svg{
color: #ffffff;
font-size: 3em;
width: 85px;
height: 85px;
text-align:center;
transition: all .4s ease-in-out 0s
}
.wthree-services-info6 h4{
color: #ffffff;
font-size: 1.4em;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
}
.w3ls-border6{
width: 30%;
margin: 1em auto 0;
}
.wthree-services-captn6 {
height: 100%;
width: 100%;
position: absolute;
padding: 6em 3em;
text-align: justify;
top: -100%;
right: 0;
background-color: rgba(10, 10, 10, 0.3);
background-size: cover;
-webkit-transition: height 0.1s, opacity 0.1s, -webkit-transform 0.1s;
-moz-transition: height 0.1s, opacity 0.1s, -moz-transform 0.1s;
transition: height 0.1s, opacity 0.1s, transform 0.1s;
-webkit-transform: translateY(-0px);
-moz-transform: translateY(-0px);
transform: translateY(-0px);
}
.wthree-services-captn6 h4 {
text-align: center;
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0px;
margin: -1em;
}
.wthree-services-captn6 p {
text-align:justify
font-size: 1em;
margin-top: 0em;
color: #ffffff;
line-height: 1.5em;
}
.wthree-services-grid6:hover .wthree-services-captn6 {
display:block;
top: 0%;
}
.services-grids6{
margin:2em 0 0 0 !important;
}
.services_accordion{
display:none;
}

@media only screen and (device-width: 1024px) and (device-height: 1366px),
       only screen and (device-width: 1366px) and (device-height: 1024px) {
.col-customer-12
{
width: 100% !important;
}
.col-customer-2
{
width: 16.66666667% !important;
}
}
@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: landscape)
{
.col-customer-12
{
width: 100% !important;
}
.col-customer-2
{
width: 16.66666667% !important;
}
}
@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (orientation: landscape)
{
.col-customer-12
{
width: 100% !important;
}
.col-customer-2
{
width: 16.66666667% !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
{
.col-customer-12
{
width: 100% !important;
}
.col-customer-2
{
width: 16.66666667% !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.services_container
{
display:none;
}
.services_accordion{
display:block;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.services_container
{
display:none;
}
.services_accordion{
display:block;
}

}
@media (max-width: 480px) {
.services_container
{
display:none;
}
.services_accordion{
display:block;
}
}
.wthree-services-grids, 
/*-- //services --*/
.about-us p.p2 {
color:grey;
padding: 20px 0 30px;
font-size:14px;
font-weight:500;
line-height: 20px;
word-spacing: 5px;
text-align:justify
}
.social-store img{
display:inline-block;
}
.social-store img.google {
margin-right: 10px;
}
/*-- /About-Us --*/
/*-- News --*/
.our-news {
margin:0;
padding:0;
background: #ffffff;
line-height: 0px;
}
.our-news  h3.text-center{
font-family: '微軟正黑體', sans-serif;
color:#ffffff;
font-size:30px;
font-weight:400;
line-height: 0px;
text-transform:uppercase;
letter-spacing:5px;
}
.our-news p.text-center{
font-family: '微軟正黑體', sans-serif;
color:grey;
font-size:16px;
font-weight:500;
line-height: 0px;
padding: 10px 0 40px;
text-transform:capitalize;
}
.inner-script h3 {
top:1%;
}
.w3l-button {
margin: 0em 2.2em 0em 4.3em;
}
.w3l-button a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000000;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #000000;
border-radius:30px;
}
.w3l-button a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
font-weight: 500;
border-radius:30px;
}
@media (max-width: 768px) {
.w3l-button {
margin: 0em 2em 0em 2em;
}
.w3l-button a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000000;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #000000;
border-radius:30px;
}
.w3l-button a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
font-weight: 500;
border-radius:30px;
}
}
#btn_all,#Button1,#Button3,#Button4,#Button5,#Button6{
margin: 2em 20px 0em 20px;
}
#btn_all,#Button1,#Button3,#Button4,#Button5,#Button6 {
width:160px;
display: inline-block;
padding: 15px 40px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 20px;
}
#btn_all:before,#Button1:before ,#Button3:before ,#Button4:before ,#Button5:before ,#Button6:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#btn_all:hover:before,#Button1:hover:before ,#Button3:hover:before ,#Button4:hover:before ,#Button5:hover:before ,#Button6:hover:before
{
left:100%;
}
#btn_all.active,#Button1.active,#Button3.active,#Button4.active,#Button5.active,#Button6.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 0px #000000;
color: #fff;
border-radius:0px;
}
.button-container
{
margin-bottom:25px;
}
.swiper-container
{
display:none;
}
@media only screen and (device-width: 1180px) and (device-height: 820px) {
.button-container
{
display:none;
}
#menu-list
{
display:none;
}
.swiper-container {
width: 100%;
display:block;
font-size: 14px;
margin-left:-20px;
margin-bottom:20px;   
}
.swiper-slide {
text-align: center;
font-size: 14px;
background: none;
}
#swiper_slide1,#swiper_slide2,#swiper_slide3,#swiper_slide4,#swiper_slide5 {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0;
font-size:14px;
background: none;
border: solid 0px #000000;
color: #c9c9c9;
}
#swiper_slide1:before,#swiper_slide2:before ,#swiper_slide3:before ,#swiper_slide4:before ,#swiper_slide5:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#swiper_slide1.active,#swiper_slide2.active,#swiper_slide3.active,#swiper_slide4.active,#swiper_slide5.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: none;
border: solid 0px #000000;
color: #000000;
font-weight:bold;
font-size:15px;
}
	   }
/*ipad 10.9新聞動態*/
@media only screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-min-device-pixel-ratio: 2) {
.button-container
{
display:none;
}
#menu-list
{
display:none;
}
.swiper-container {
width: 100%;
display:block;
font-size: 14px;
margin-left:-20px;
margin-bottom:20px;   
}
.swiper-slide {
text-align: center;
font-size: 14px;
background: none;
}
#swiper_slide1,#swiper_slide2,#swiper_slide3,#swiper_slide4,#swiper_slide5 {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0;
font-size:14px;
background: none;
border: solid 0px #000000;
color: #c9c9c9;
}
#swiper_slide1:before,#swiper_slide2:before ,#swiper_slide3:before ,#swiper_slide4:before ,#swiper_slide5:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#swiper_slide1.active,#swiper_slide2.active,#swiper_slide3.active,#swiper_slide4.active,#swiper_slide5.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: none;
border: solid 0px #000000;
color: #000000;
font-weight:bold;
font-size:15px;
}
}
@media only screen and (device-width: 1080px) and (device-height: 810px) {
.button-container
{
display:none;
}
#menu-list
{
display:none;
}
.swiper-container {
width: 100%;
display:block;
font-size: 14px;
margin-left:-20px;
margin-bottom:20px;   
}
.swiper-slide {
text-align: center;
font-size: 14px;
background: none;
}
#swiper_slide1,#swiper_slide2,#swiper_slide3,#swiper_slide4,#swiper_slide5 {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0;
font-size:14px;
background: none;
border: solid 0px #000000;
color: #c9c9c9;
}
#swiper_slide1:before,#swiper_slide2:before ,#swiper_slide3:before ,#swiper_slide4:before ,#swiper_slide5:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#swiper_slide1.active,#swiper_slide2.active,#swiper_slide3.active,#swiper_slide4.active,#swiper_slide5.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: none;
border: solid 0px #000000;
color: #000000;
font-weight:bold;
font-size:15px;
}
	   }
/*ipad 10.2新聞動態*/
@media only screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-min-device-pixel-ratio: 2) {
.button-container
{
display:none;
}
#menu-list
{
display:none;
}
.swiper-container {
width: 100%;
display:block;
font-size: 14px;
margin-left:-20px;
margin-bottom:20px;   
}
.swiper-slide {
text-align: center;
font-size: 14px;
background: none;
}
#swiper_slide1,#swiper_slide2,#swiper_slide3,#swiper_slide4,#swiper_slide5 {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0;
font-size:14px;
background: none;
border: solid 0px #000000;
color: #c9c9c9;
}
#swiper_slide1:before,#swiper_slide2:before ,#swiper_slide3:before ,#swiper_slide4:before ,#swiper_slide5:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#swiper_slide1.active,#swiper_slide2.active,#swiper_slide3.active,#swiper_slide4.active,#swiper_slide5.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: none;
border: solid 0px #000000;
color: #000000;
font-weight:bold;
font-size:15px;
}
}
/*ipad 9.7新聞動態*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.button-container
{
display:none;
}
#menu-list
{
display:none;
}
.swiper-container {
width: 100%;
display:block;
font-size: 14px;
margin-left:-20px;
margin-bottom:20px;   
}
.swiper-slide {
text-align: center;
font-size: 14px;
background: none;
}
#swiper_slide1,#swiper_slide2,#swiper_slide3,#swiper_slide4,#swiper_slide5 {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0;
font-size:14px;
background: none;
border: solid 0px #000000;
color: #c9c9c9;
}
#swiper_slide1:before,#swiper_slide2:before ,#swiper_slide3:before ,#swiper_slide4:before ,#swiper_slide5:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#swiper_slide1.active,#swiper_slide2.active,#swiper_slide3.active,#swiper_slide4.active,#swiper_slide5.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: none;
border: solid 0px #000000;
color: #000000;
font-weight:bold;
font-size:15px;
}
}
/*手機新聞動態*/
@media (max-width: 480px) {
.button-container
{
display:none;
}
#menu-list
{
display:none;
}
.swiper-container {
width: 100%;
display:block;
font-size: 14px;
margin-left:-20px;
margin-bottom:20px;   
}
.swiper-slide {
text-align: center;
font-size: 14px;
background: none;
}
#swiper_slide1,#swiper_slide2,#swiper_slide3,#swiper_slide4,#swiper_slide5 {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0;
font-size:14px;
background: none;
border: solid 0px #000000;
color: #c9c9c9;
}
#swiper_slide1:before,#swiper_slide2:before ,#swiper_slide3:before ,#swiper_slide4:before ,#swiper_slide5:before {
content: "";
position: absolute;
height: 150px;
width: 50px;
background : #fff;
left: -55px;
top: -40px;
transform: rotate(37deg);
transition: all .3s;
opacity: 0.3;
}
#swiper_slide1.active,#swiper_slide2.active,#swiper_slide3.active,#swiper_slide4.active,#swiper_slide5.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: none;
border: solid 0px #000000;
color: #000000;
font-weight:bold;
font-size:15px;
}
}
#industry_btn_all,#sports_btn_all,#helmets_btn_all,#medical_btn_all,#army_btn_all,#ar_btn_all,#Button7,#Button8,#Button9,#Button10,#Button11,#Button12,#Button13{
margin: 0px;
}
#industry_btn_all,#sports_btn_all,#helmets_btn_all,#medical_btn_all,#army_btn_all,#ar_btn_all,#Button7,#Button8,#Button9,#Button10,#Button11,#Button12,#Button13 {
display: inline-block;
padding: 15px 0px;
border-bottom: 0px solid #fafafa;
cursor: pointer;
letter-spacing: 2px;
position:relative;
/*  margin: 0 20px;*/
background-color: rgba(10, 10, 10, 0.3);
}
/*#Button7:before ,#Button8:before ,#Button9:before ,#Button10:before ,#Button11:before,#Button12:before ,#Button13:before*/
/*{*/
/*  content: "";*/
/*  position: absolute;*/
/*  height: 150px;*/
/*  width: 50px;*/
/*  background : #fff;*/
/*  left: -55px;*/
/*  top: -40px;*/
/*  transform: rotate(37deg);*/
/*  transition: all .3s;*/
/*  opacity: 0.3;*/
/*}*/
#industry_btn_all:hover:before,#sports_btn_all:hover:before,#helmets_btn_all:hover:before,#medical_btn_all:hover:before,#army_btn_all:hover:before,#ar_btn_all:hover:before,#Button7:hover:before ,#Button8:hover:before ,#Button9:hover:before ,#Button10:hover:before ,#Button11:hover:before,#Button12:hover:before ,#Button13:hover:before
{
/*  left:100%;*/
}
#industry_btn_all:hover,#sports_btn_all:hover,#helmets_btn_all:hover,#medical_btn_all:hover,#army_btn_all:hover,#ar_btn_all:hover,#Button7:hover ,#Button8:hover ,#Button9:hover ,#Button10:hover ,#Button11:hover,#Button12:hover ,#Button13:hover
{
background-color: #6c6c6c;
}
#industry_btn_all.active,#sports_btn_all.active,#helmets_btn_all.active,#medical_btn_all.active,#army_btn_all.active,#ar_btn_all.active,#Button7.active,#Button8.active,#Button9.active,#Button10.active,#Button11.active,#Button12.active,#Button13.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 0px #000000;
color: #fff;
border-radius:0px;
}
#laser_btn_all,#laser_193-450,#laser_450-565,#laser_565-610,#laser_610-965,#laser_965-1064,#laser_1064-10600{
margin: 0px;
}
#laser_btn_all,#laser_193-450,#laser_450-565,#laser_565-610,#laser_610-965,#laser_965-1064,#laser_1064-10600 {
display: inline-block;
padding: 15px 0px;
border-bottom: 0px solid #fafafa;
cursor: pointer;
letter-spacing: 2px;
position:relative;
/*  margin: 0 20px;*/
background-color: rgba(10, 10, 10, 0.3);
}
/*#Button7:before ,#Button8:before ,#Button9:before ,#Button10:before ,#Button11:before,#Button12:before ,#Button13:before*/
/*{*/
/*  content: "";*/
/*  position: absolute;*/
/*  height: 150px;*/
/*  width: 50px;*/
/*  background : #fff;*/
/*  left: -55px;*/
/*  top: -40px;*/
/*  transform: rotate(37deg);*/
/*  transition: all .3s;*/
/*  opacity: 0.3;*/
/*}*/
#laser_btn_all:hover:before,#laser_193-450:hover:before,#laser_450-565:hover:before,#laser_565-610:hover:before,#laser_610-965:hover:before,#laser_965-1064:hover:before,#laser_1064-10600:hover:before
{
/*  left:100%;*/
}
#laser_btn_all:hover,#laser_193-450:hover,#laser_450-565:hover,#laser_565-610:hover,#laser_610-965:hover,#laser_965-1064:hover,#laser_1064-10600:hover
{
background-color: #6c6c6c;
}
#laser_btn_all.active,#laser_193-450.active,#laser_450-565.active,#laser_565-610.active,#laser_610-965.active,#laser_965-1064.active,#laser_laser_1064-10600.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 0px #000000;
color: #fff;
border-radius:0px;
}
#Button14,#Button15,#Button16,#Button17,#Button18,#Button19,#Button20,#Button21,#Button22,#Button23,#laser_btn_all{
margin: 0px;
}
#Button14,#Button15,#Button16,#Button17,#Button18,#Button19,#Button20,#Button21,#Button22,#Button23,#laser_btn_all {
display: inline-block;
padding: 15px 0px;
border-bottom: 0px solid #fafafa;
cursor: pointer;
letter-spacing: 2px;
position:relative;
/*  margin: 0 20px;*/
background-color: rgba(10, 10, 10, 0.3);
}
/*#Button7:before ,#Button8:before ,#Button9:before ,#Button10:before ,#Button11:before,#Button12:before ,#Button13:before*/
/*{*/
/*  content: "";*/
/*  position: absolute;*/
/*  height: 150px;*/
/*  width: 50px;*/
/*  background : #fff;*/
/*  left: -55px;*/
/*  top: -40px;*/
/*  transform: rotate(37deg);*/
/*  transition: all .3s;*/
/*  opacity: 0.3;*/
/*}*/
#Button14:hover:before ,#Button15:hover:before ,#Button16:hover:before ,#Button17:hover:before,#Button18:hover:before ,#Button19:hover:before ,#Button20:hover:before ,#Button21:hover:before,#Button22:hover:before ,#Button23:hover:before,#laser_btn_all:hover:before
{
/*  left:100%;*/
}
#Button14:hover ,#Button15:hover ,#Button16:hover ,#Button17:hover,#Button18:hover ,#Button19:hover ,#Button20:hover ,#Button21:hover,#Button22:hover ,#Button23:hover,#laser_btn_all:hover
{
background-color: #6c6c6c;
}
#Button14.active,#Button15.active,#Button16.active,#Button17.active,#Button18.active,#Button19.active,#Button20.active,#Button21.active,#Button22.active,#Button23.active,#laser_btn_all.active
{
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 0px #000000;
color: #fff;
border-radius:0px;
}
/*  /* 未連結 */*/
/*        a:link*/
/*        {*/
/*            color: #000000;*/
/*        }*/
/*        /* 已連結過 */*/
/*        a:visited*/
/*        {*/
/*            color: #FF0000;*/
/*        }*/
/*        /* 滑鼠移至連結 */*/
/*        a:hover*/
/*        {*/
/*            color: #00FF00;*/
/*        }*/
/*        /* 選擇的連結 */*/
/*        a:active*/
/*        {*/
/*            color: #0000FF;*/
/*        }*/
.w3l-button1 {
margin: 2em 0 1em 0;
}
.w3l-button1 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: .5em 2em;
background: black;
font-weight: 500;
text-align: center;
border: solid 2px black;
border-radius:20px;
}
.w3l-button1 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #902F0D;
border: solid 2px #902F0D;
color: #fff;
border-radius:20px;
}
.w3l-button3 {
margin: 1em 2.4em 1em 0;
}
.w3l-button3 {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: .5em 2em;
background: black;
font-weight: 500;
text-align: center;
border: solid 2px black;
border-radius:5px;
}
.w3l-button3:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #902F0D;
border: solid 2px #902F0D;
color: #fff;
border-radius:5px;
}
.w3l-button2 {
margin: 2em 0 1em 0;
}
.w3l-button2 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: .5em 2em;
background: black;
font-weight: 500;
text-align: center;
border: solid 2px black;
border-radius:20px;
}
.w3l-button2 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #902F0D;
border: solid 2px #902F0D;
color: #fff;
border-radius:20px;
}
.w3l-button4 {
margin: 2em 0 1em 0;
}
.w3l-button4 {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000000;
font-size: 14px;
padding: .5em 2em;
background: #ffffff;
width:180px;
height:50px;
font-weight: 500;
text-align: center;
border: solid 1px #000000;
border-radius:5px;
}
.w3l-button4:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 1px #f6f6f6;
color: #fff;
border-radius:5px;
}
.w3l-button5 {
margin: 0em 2.5em 0em 0em;
}
.w3l-button5 {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: .5em 2em;
background: black;
font-weight: 500;
text-align: center;
border: solid 2px black;
border-radius:20px;
}
.w3l-button5:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #902F0D;
border: solid 2px #902F0D;
color: #fff;
border-radius:20px;
}
.w3l-button6 {
margin: 0em 0em 0em -0em;
}
.w3l-button6 {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000000;
font-size: 14px;
padding: .5em 1em;
background: #ffffff;
width:80px;
height:42px;
font-weight: 500;
text-align: center;
border: solid 1px #000000;
border-radius:0px;
}
.w3l-button6:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 1px #000000;
color: #fff;
border-radius:0px;
}
.inner-script h3 {
top:1%;
}
syntax:.ui-datepicker { z-index: 9999 !important; }
/*-- /News --*/
/*-- portfolio --*/
.myportfolio {
text-align:center;
margin:0;
padding:0 0 30px 0;
background: #f9f9fb;
width: 100%;
height: 100%;
}
.myportfolio h3 {
font-family: '微軟正黑體', sans-serif;
color:#fff;
font-size:30px;
font-weight:400;
line-height: 0px;
padding: 75px 0 20px;
text-transform:uppercase;
}
.myportfolio p {
color:grey;
font-size:17px;
font-weight:500;
line-height: 0px;
padding: 10px 0 20px;
}
.offer{
position: absolute;
bottom: 5px;
background: #000000;
border: 0px solid #ffffff;
padding: 0px;
color: #ffffff;
}
.offer a:hover{
position: absolute;
bottom: 0px;
opacity: 1;
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #ffcc00
border: solid 0px #ffffff;
color: #000000;
}
.offer p{
border-radius: 100px;
text-align: center;
line-height: 0em !important;
font-size: 0.9em !important;
}
.offer span{
font-family: '微軟正黑體', sans-serif;
color: #fff;
font-size: 14px;
text-align: center;
display: inline-block;
font-weight: 500px;
width:275px;
padding:5px;
}
.skills{
margin-top:10px
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.skills{
margin-top:-500px
}
}
@media only screen and (max-device-width: 480px) {

.skills{
margin-top:-500px
}
}
.skills h3{
text-transform: capitalize;
color: black;
font-size: 24px;
margin-bottom:20px;
font-weight:300px;
}
.about .grid {
text-align: center;
padding: 0 40px;
min-height:350px;
}
.about .grid i.fa {
font-size: 50px;
color: #d0d0d0;
color: #FF9800;
margin-bottom: 20px;
}
.about i.fa.fa-pencil, .services i.fa.fa-pencil {
color: #E91E63;
}
.about i.fa.fa-book, .services i.fa.fa-book {
color: #2196F3;
}
.about i.fa.fa-flask, .services i.fa.fa-flask {
color: #2d9e32;
}
.about .grid h3{
font-size: 17px;
color: #000000;
color: #1f6282;
line-height: 28px;
font-weight: 400;
text-transform: capitalize;
}
.about-head h3 {
font-size: 40px;
margin-bottom: 40px;
text-transform: uppercase;
color: #000;
}
.about-bottom-grid1
{
display: flex;
flex-direction: row; /* 默认水平排列 */
padding-bottom: 4%;
}

.bottomgridtext h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
margin: -20px 0px 0px 40px;
text-transform: uppercase;
font-weight: normal;
font-size: 24px;
font-weight:bold;
}
.bottomgridtext1 h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
margin: -20px 0px 0px 40px;
text-transform: uppercase;
font-weight: normal;
font-size: 24px;
font-weight:bold;
}

.bottomgridtext p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:400;
text-align:justify;
}

.bottomgridtext1 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:400;
text-align:justify;
}
.bottomgridtext{
position: relative;
padding-top: -10px;
padding-left: 20px;
padding-right: 70px;
background: #fff;
/*background: linear-gradient(135deg, #f4f4f4 70%, #ffffff 30%);*/
/*padding-bottom:7.1%;*/
}

.bottomleft {
padding-left: 30px;
padding-right: 60px;
/*background: linear-gradient(-135deg, #f2f2f2 70%, #ffffff 30%);*/
/*padding-bottom:4.5%;*/
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
}
.bottomgridimg {
padding: 0;
}
.bottomgridimg img {
border-radius:0px 0px 0px 0px;
width: 100%;
height:auto;
opacity:1
}
.readmore-w3 a {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
color: #fff;
font-size: 15px;
padding: 8px 0px;
margin: 2.5em 0 0;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Poppins', sans-serif;
}
.readmore-w3 i.fa.fa-long-arrow-right {
padding-left: 15px;
}
@keyframes fly-in-up {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fly-in-down {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in-text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.about-bottom-grid1,
.about-bottom-grid2 {
transition: opacity 0.3s ease-in-out;
}
.about-bottom-grid1:hover,
.about-bottom-grid2:hover {
opacity: 0.9;
}
.about-bottom-grid1 {
animation: fly-in-up 1s ease-in-out 0.5s, fade-in-text 0.5s ease-in-out 0.5s forwards;
opacity: 0;
}
.about-bottom-grid2 {
animation: fly-in-down 1s ease-in-out 1.5s forwards;
opacity: 0;
animation-fill-mode: forwards; /* 添加这一行 */
}
.bottomgridtext1 {
opacity: 0;
animation: fade-in-text 0.5s ease-in-out 0.5s forwards;
}
/* 定义背景飞入动画关键帧 */
@keyframes fly-in-background {
0% {
background-position: -100% 0;
}
100% {
background-position: 0 0;
}
}
/* 为背景添加飞入动画，延迟2秒，等待文本淡入后飞入 */
.background-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(230deg, #ffffff 70%, #f8f8fc 30%);
animation: fly-in-background 1s ease-in-out 2s forwards;
z-index: -1; /* 确保背景在内容下面 */
}

 .triangle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #ffffff;
  z-index: 9999;
}
.triangle_left {
position: absolute;
top: 50%;
right: 0px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #ffffff;
z-index:999;
}

/*ipad pro*/
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
.about-bottom-grid1 {
flex-direction: column-reverse; /* 垂直排列，反转顺序 */
}
#bottomgridtext_h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
#bottomgridtext_h4 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
.bottomgridimg {
  width: 100%; /* 或者是足夠寬的數值 */
}
.bottomgridimg img {
width: 100%;
height:auto;
display:block;
}
.bottomgridtext{
position: relative;
width: 100%;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(135deg, #f4f4f4 70%, #ffffff 30%);*/
}
.bottomleft {
width: 100%;
padding-left: 30px;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(-135deg, #f2f2f2 70%, #ffffff 30%);*/
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
}
.bottomgridtext p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
text-align:justify;
}
.bottomgridtext1 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
}
.triangle_left {
display:none;
}
.triangle {
display:none;
}
}
/*ipad 10.9*/
@media only screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-min-device-pixel-ratio: 2) {
.about-bottom-grid1 {
flex-direction: column-reverse; /* 垂直排列，反转顺序 */
}
#bottomgridtext_h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
#bottomgridtext_h4 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
.bottomgridimg {
  width: 100%; /* 或者是足夠寬的數值 */
}
.bottomgridimg img {
width: 100%;
height:auto;
}
.bottomgridtext{
position: relative;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(135deg, #f4f4f4 70%, #ffffff 30%);*/
}
.bottomleft {
padding-left: 30px;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(-135deg, #f2f2f2 70%, #ffffff 30%);*/
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
}
.bottomgridtext p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
text-align:justify;
}
.bottomgridtext1 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
}
.triangle_left {
display:none;
}
.triangle {
display:none;
}
}
/*ipad 10.2*/
@media only screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-min-device-pixel-ratio: 2) {

.about-bottom-grid1 {
flex-direction: column-reverse; /* 垂直排列，反转顺序 */
}
#bottomgridtext_h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
#bottomgridtext_h4 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
.bottomgridimg {
  width: 100%; /* 或者是足夠寬的數值 */
}
.bottomgridimg img {
width: 100%;
height:auto;
}
.bottomgridtext{
position: relative;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(135deg, #f4f4f4 70%, #ffffff 30%);*/
}
.bottomleft {
padding-left: 30px;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(-135deg, #f2f2f2 70%, #ffffff 30%);*/
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
}
.bottomgridtext p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
text-align:justify;
}
.bottomgridtext1 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
}
.triangle_left {
display:none;
}
.triangle {
display:none;
}
}
/*ipad 9.7*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.about-bottom-grid1 {
flex-direction: column-reverse; /* 垂直排列，反转顺序 */
}
#bottomgridtext_h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
#bottomgridtext_h4 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
.bottomgridimg {
  width: 100%; /* 或者是足夠寬的數值 */
}
.bottomgridimg img {
width: 100%;
height:auto;
}
.bottomgridtext{
width: 100%;
position: relative;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(135deg, #f4f4f4 70%, #ffffff 30%);*/
}
.bottomleft {
  width: 100%;
padding-left: 30px;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(-135deg, #f2f2f2 70%, #ffffff 30%);*/
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
}
.bottomgridtext p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
text-align:justify;
}
.bottomgridtext1 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
}
.triangle_left {
display:none;
}
.triangle {
display:none;
}
}
/*手機格式*/
@media (max-width: 480px) {
.about-bottom-grid1 {
flex-direction: column-reverse; /* 垂直排列，反转顺序 */
}
#bottomgridtext_h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
#bottomgridtext_h4 {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
padding: 40px 0px 10px 0px;
margin: 0px 0px 0px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight:bold;
}
.bottomgridimg img {
width: 100%;
height:auto;
}
.bottomgridtext{
position: relative;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(135deg, #f4f4f4 70%, #ffffff 30%);*/
}
.bottomleft {
padding-left: 30px;
padding:0px 0px 0px 40px;
padding-left: 0px;
padding-right: 40px;
min-height:450px;
background: #fff;
/*background: linear-gradient(-135deg, #f2f2f2 70%, #ffffff 30%);*/
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
}
.bottomgridtext p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
text-align:justify;
}
.bottomgridtext1 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
color: #000000;
line-height: 28px;
margin-left: 40px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight:300;
}
.triangle_left {
display:none;
}
.triangle {
display:none;
}
}
.w3l-button10 {
margin: 2em 2.6em 0em 2.6em;
}
.w3l-button10 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #000000;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #000000;
border-radius:30px;
}
.w3l-button10 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000;
border: solid 1px #000;
color: #fff;
font-weight: 500;
border-radius:30px;
}
.w3l-button30 {
margin: 2em 0em 0em 0em;
}
.w3l-button30 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #ffffff;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #ffffff;
border-radius:30px;
}
.w3l-button30 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #70be49;
border: solid 1px #70be49;
color: #fff;
font-weight: 500;
border-radius:30px;
}
.w3l-button31 {
margin: 2em 0em 0em 0em;
}
.w3l-button31 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #ffffff;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #ffffff;
border-radius:30px;
}
.w3l-button31 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #0089bd;
border: solid 1px #0089bd;
color: #fff;
font-weight: 500;
border-radius:30px;
}
.w3l-button32 {
margin: 2em 0em 0em 0em;
}
.w3l-button32 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #ffffff;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #ffffff;
border-radius:30px;
}
.w3l-button32 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #000000;
border: solid 1px #000000;
color: #fff;
font-weight: 500;
border-radius:30px;
}
.w3l-button33 {
margin: 2em 0em 0em 0em;
}
.w3l-button33 a {
font-family: '微軟正黑體', sans-serif;
text-decoration: none;
color: #ffffff;
font-size: 14px;
padding: .5em 2em;
background: none;
font-weight: 400;
text-align: center;
border: solid 1px #ffffff;
border-radius:30px;
}
.w3l-button33 a:hover {
font-family: '微軟正黑體', sans-serif;
text-decoration:none;
background: #8b244f;
border: solid 1px #8b244f;
color: #fff;
font-weight: 500;
border-radius:30px;
}
#lw-tab-panels .btn-box {
margin: 2em 0em 0em 0em;
padding-top: 10px;
position: relative;
text-align: left;
}
#lw-tab-panels .btn-box a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
}
#lw-tab-panels .btn-box a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #ffffff;
}
#lw-tab-panels .btn-box a:hover {
padding-left: 120px;
color: #fffff;
background-color: #70be49;
font-weight: bold;
}
#lw-tab-panels .btn-box a:hover:before {
width: 100px;
background-color: #fff;
}
#lw-tab-panels .btn-box1 {
margin: 2em 0em 0em 0em;
padding-top: 10px;
position: relative;
text-align: left;
}
#lw-tab-panels .btn-box1 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
}
#lw-tab-panels .btn-box1 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #ffffff;
}
#lw-tab-panels .btn-box1 a:hover {
padding-left: 120px;
color: #fffff;
background-color: #0089bd;
font-weight: bold;
}
#lw-tab-panels .btn-box1 a:hover:before {
width: 100px;
background-color: #fff;
}
#lw-tab-panels .btn-box2 {
margin: 2em 0em 0em 0em;
padding-top: 10px;
position: relative;
text-align: left;
}
#lw-tab-panels .btn-box2 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
}
#lw-tab-panels .btn-box2 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #ffffff;
}
#lw-tab-panels .btn-box2 a:hover {
padding-left: 120px;
color: #fffff;
background-color: #5e5e5e;
font-weight: bold;
}
#lw-tab-panels .btn-box2 a:hover:before {
width: 100px;
background-color: #fff;
}
#lw-tab-panels .btn-box3 {
margin: 2em 0em 0em 0em;
padding-top: 10px;
position: relative;
text-align: left;
}
#lw-tab-panels .btn-box3 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
}
#lw-tab-panels .btn-box3 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #ffffff;
}
#lw-tab-panels .btn-box3 a:hover {
padding-left: 120px;
color: #fffff;
background-color: #8b244f;
font-weight: bold;
}
#lw-tab-panels .btn-box3 a:hover:before {
width: 100px;
background-color: #fff;
}
#lw-tab-panels .btn-box4 {
margin: 2em 0em 0em 0em;
padding-top: 10px;
position: relative;
text-align: left;
}
#lw-tab-panels .btn-box4 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
}
#lw-tab-panels .btn-box4 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #ffffff;
}
#lw-tab-panels .btn-box4 a:hover {
padding-left: 120px;
color: #fffff;
background-color: #ff6633;
font-weight: bold;
}
#lw-tab-panels .btn-box4 a:hover:before {
width: 100px;
background-color: #fff;
}
#lw-tab-panels .btn-box5 {
margin: 2em 0em 0em 0em;
padding-top: 10px;
position: relative;
text-align: left;
}
#lw-tab-panels .btn-box5 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
text-decoration: none;
}
#lw-tab-panels .btn-box5 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #ffffff;
}
#lw-tab-panels .btn-box5 a:hover {
padding-left: 120px;
color: #fffff;
background-color:rgba(90, 100, 110, 0.2);
font-weight: bold;
}
#lw-tab-panels .btn-box5 a:hover:before {
width: 100px;
background-color: #fff;
}
#about-bottom-grid2 .btn-box4 {
margin: 0.5em 0em 0em 2.8em;
position: relative;
text-align: left;
}
#about-bottom-grid2 .btn-box4 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #000000;
line-height: 30px;
text-decoration: none;
}
#about-bottom-grid2 .btn-box4 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #000000;
}
#about-bottom-grid2 .btn-box4 a:hover {
padding-left: 120px;
color: #fffff;
background-color: #ffffff;
font-weight: bold;
}
#about-bottom-grid2 .btn-box4 a:hover:before {
width: 100px;
color:#000000
background-color: #000000;
}
#about-left .btn-box5 {
margin: 0.5em 0em 0em 4.5em;
position: relative;
text-align: left;
}
#about-left .btn-box5 a {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: inline-block;
position: relative;
padding: 5px 15px 5px 70px;
font-size: 16px;
color: #000000;
line-height: 30px;
text-decoration: none;
}
@media (max-width: 768px) {
#about-left .btn-box5 {
margin: 0.5em 0em 0em 2.5em;
position: relative;
text-align: left;
}
}
#about-left .btn-box5 a:before {
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
pointer-events: none;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 60px;
height: 1px;
color: #000000;
background-color: #000000;
}
#about-left .btn-box5 a:hover {
padding-left: 120px;
color: #fffff;
background-color: #ffffff;
font-weight: bold;
}
.item6{
display:-webkit-box;
background:none;
border:1px solid #eeeeee;
border-radius:0px;
padding:20px;
position:relative;
overflow:hidden;
margin:0 0 5px 0;
}
.item-ico{
/**/
/*   width:180px;*/
/*  height:120px;*/
overflow:hidden;
}
.item-ico img{
height:200px;
width: 300px;
transform: scale(1,1);
transition:transform 0.2s linear;
}
.item-ico:hover img{
transform: scale(1.1,1.1);
}
.item-ico .over-layer{
height:200px;
width: 300px;
position: absolute;
top:20px;
left:20px;
opacity:0;
background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
transition:all 0.50s linear;
}
.item-ico:hover .over-layer{
opacity:1;
text-decoration:none;
}
.item-ico .over-layer  i{
position: relative;
top:45%;
text-align:center;
display: block;
color:#fff;
font-size:20px;
}
/*.item-ico img{*/
/*  width:300px;*/
/*  height:200px;*/
/*    border-radius:0px;*/
/*}*/
.item-intro {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
font-size: 20px;
font-weight:bold;
text-align:left;
padding: 0px 50px 0px 50px;
}
.news_title a
{
text-decoration:none
}
.news_content{
display:-webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
text-align:justify;
font-size: 14px;
font-weight:500px;
line-height:26px;
margin-top:20px;
padding: 0px 0px 0px 0px;
}
.tip{
position: absolute;
top: 10px;
background: #cc0000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -35px;
width: 120px;
text-align: center;
color: #fff;
font-size: 14px;
padding: 5px 0;
font-weight:bold;
}
.container-fluid
{
margin:0 30px 0px 30px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.tip{
position: absolute;
top: 10px;
background: #cc0000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -35px;
width: 120px;
text-align: center;
color: #fff;
font-size: 14px;
padding: 5px 0;
font-weight:bold;
}
.item6{
display:-webkit-box;
background:none;
border:1px solid #eeeeee;
border-radius:0px;
padding:20px;
position:relative;
overflow:hidden;
margin:0 0 5px 0;
height:350px;
}
.item-ico{
/**/
/*   width:180px;*/
/*  height:120px;*/
overflow:hidden;
}
.item-ico img{
height:180px;
width: 250px;
transform: scale(1,1);
transition:transform 0.2s linear;
border-radius:0px;
}
.item-ico:hover img{
transform: scale(1,1);
}
.item-ico .over-layer{
height:180px;
width: 250px;
position: absolute;
top:20px;
left:20px;
opacity:0;
background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
transition:all 0.50s linear;
}
.item-ico:hover .over-layer{
opacity:1;
text-decoration:none;
}
.item-ico .over-layer  i{
position: relative;
top:45%;
text-align:center;
display: block;
color:#fff;
font-size:20px;
}
/*.item-ico img{*/
/*  width:300px;*/
/*  height:200px;*/
/*    border-radius:0px;*/
/*}*/
.item-intro {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
font-size: 20px;
font-weight:bold;
text-align:left;
padding: 0px 20px 0px 50px;
}
.news_content{
font-family: '微軟正黑體', sans-serif;
display:-webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
text-align:justify;
font-size: 14px;
font-weight:500;
line-height:25px;
margin-top:20px;
padding: 0px 0px 0px 0px;
}
}
/*手機新聞動態*/
@media (max-width:480px) {
.item6{
background:none;
border:1px solid #eeeeee;
border-radius:0px;
padding:0px;
position:relative;
overflow:hidden;
height:650px;
}
.item-ico{
/**/
/*   width:180px;*/
width:100%;
overflow:hidden;
}
.item-ico img{
width:100%;
height:220px;
transform: scale(1,1);
transition:transform 0.2s linear;
}
.item-ico:hover img{
transform: scale(1,1); 
}
.item-ico .over-layer{
width:100%;
height:200px;
position: absolute;
top:0px;
left:0px;
opacity:0;
background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
transition:all 0.50s linear;
}
.item-ico:hover .over-layer{
opacity:1;
text-decoration:none;
}
.item-ico .over-layer  i{
position: relative;
font-size:16px;
top:50%;
text-align:center;
display: block;
color:#fff;
}
.news_title {
    font-family: '微軟正黑體', sans-serif;
    position: absolute;
    text-align: justify;
    font-weight: bold;
    color: #000000;
    font-size: 18px;
    
    /* --- 關鍵修改 --- */
    top: 42%;             /* 設定標題的起點 */
    left: 7%;
    width: 85%;           /* 限制寬度，避免文字往右無限延伸 */
    line-height: 24px;    /* 設定行高，方便計算高度 */
    height: 48px;         /* 固定兩行的高度 (24px * 2) */
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;     /* 超過兩行自動隱藏並顯示 ... */
}

.news_content {
    font-family: '微軟正黑體', sans-serif;
    position: absolute;
    text-align: justify;
    font-weight: 500;
    line-height: 26px;
    padding: 0 25px;      /* 移除 top padding，改用 left/right padding */
    color: #000000;
    font-size: 14px;
    
    /* --- 關鍵修改 --- */
    /* 內容的 top = 標題的 top (42%) + 標題高度 (48px) + 間距 (例如 10px) */
    top: calc(42% + 58px); 
    left: 0%;
    right: 0%;
}
#news_post-date
{
position: absolute;
bottom:5%;
right:7%;
font-weight:500;
float: right;
color:#000000;
font-size: 14px;
}
.tip{
position: absolute;
top: 10px;
background: #cc0000;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 10px;
width: 80px;
text-align: center;
color: #fff;
font-size: 14px;
padding: 5px 0;
border-radius:5px;
font-weight:bold;
}
}
.carousel-double {
position: relative;
display: block;
width: 100%;
float: left;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);*/
margin-bottom:80px;
}
.carousel-double {
box-shadow: none;
}
.carousel-double--img img
{
width: 100%;
border:10px solid #f8f8f8;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);*/
}
.carousel-double *:focus {
outline: 0;
}
.carousel-double--next,
.carousel-double--prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carousel-double--next i,
.carousel-double--prev i {
border: 0;
border-radius: 50%;
font-size:24px;
line-height:40px;
width:40px;
height:40px;
text-align: center;
vertical-align: middle;
color:#000000
}
.carousel-double--next i:hover,
.carousel-double--prev i:hover {
background-color:#e6e6e6;
width:40px;
height:40px;
border-radius: 100%;
}
.carousel-double--next i:hover, .carousel-double--next i:focus,
.carousel-double--prev i:hover,
.carousel-double--prev i:focus {
outline: 0;
}
.carousel-double--next i:active,
.carousel-double--prev i:active {
outline: 0;
}
.carousel-double--next {
right: 1.5rem;
}
.carousel-double--prev {
left: 1.5rem;
}
.carousel-double--img-container {
position: relative;
display: block;
width: 100%;
float: left;
}
@media (min-width: 600px) {
.carousel-double--img-container {
width: 49.3%;
}
}
.carousel-double--txt-container {
position: relative;
display: block;
width: 100%;
height:100%;
float: left;
padding: 30px 80px 0px 80px;
}
.slide .title
{
font-family: '微軟正黑體', sans-serif;
font-size: 1.75em;
margin-bottom: -15px;
font-weight:bold;
padding:0px;
text-align:left;
}
.slide .subtitle
{
font-family: 'Heebo', sans-serif;
font-size: 1.1em;
padding:0px;
line-height: 25px;
text-align:justify;
font-weight:500px;
margin-top: 30px;
}
@media (min-width: 600px) {
.carousel-double--txt-container {
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);*/
width: calc(50% + 1rem);
margin-left: -1rem;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: linear-gradient(-135deg, #f4f4f4 80%, #f9f9f9 20%);
/*background:linear-gradient(rgba(43, 44, 47, 0), rgba(43, 44, 47, 0)), url(../images/company.png) no-repeat 0px 0px;*/
/*background-size:cover;*/
}
}
.pagingInfo {
font-family: 'Heebo', sans-serif;
letter-spacing:5px;
position: absolute;
bottom: 3rem;
left: 3rem;
height: 4rem;
font-size: 1.1em;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (max-device-height: 1024px) {
.container-fluid 
{
margin: 0px 0px 0px 0px;
}
.carousel-double--img-container {
width: 100% !important;
}
.carousel-double--img img
{
max-width: 100%;
height:auto;
border:0px solid #f8f8f8;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);*/
}

.carousel-double--img-container {
position: relative;
display: block;
width: 100%;
z-index:99;
}
.carousel-double--txt-container {
position: relative;
display: block;
width: 100%;
height:100%;
float: left;
padding: 150px 30px 150px 30px;
margin: 15% 0px 0px 0px;
}
.carousel-double--next,
.carousel-double--prev {
position: absolute;
top: 25%;
transform: translateY(-50%);
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide .title
{
font-family: '微軟正黑體', sans-serif;
font-size: 20px;
font-weight:bold;
text-align:left;
margin: 0px 0px 20px 0px;
line-height:23px;
}
.slide .subtitle
{
font-family: '微軟正黑體', sans-serif;
font-size: 16px;
padding:0px 0px 0px 0px;
line-height: 25px;
text-align:justify;
font-weight:400px;
margin-top: 0px;
}
.pagingInfo {
font-family: 'Heebo', sans-serif;
letter-spacing:5px;
position: absolute;
bottom: 0rem;
left: 3rem;
height: 4rem;
font-size: 14px;
}
}
@media only screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-min-device-pixel-ratio: 2) {

.container-fluid 
{
margin: 0px 0px 0px 0px;
}
.carousel-double--img-container {
width: 100% !important;
}
.carousel-double--img img
{
max-width: 100%;
height:auto;
border:0px solid #f8f8f8;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);*/
}

.carousel-double--img-container {
position: relative;
display: block;
width: 100%;
z-index:99;
}
.carousel-double--txt-container {
position: relative;
display: block;
width: 100%;
height:100%;
float: left;
padding: 150px 30px 150px 30px;
margin: 15% 0px 0px 0px;
}
.carousel-double--next,
.carousel-double--prev {
position: absolute;
top: 25%;
transform: translateY(-50%);
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide .title
{
font-family: '微軟正黑體', sans-serif;
font-size: 20px;
font-weight:bold;
text-align:left;
margin: 0px 0px 20px 0px;
line-height:23px;
}
.slide .subtitle
{
font-family: '微軟正黑體', sans-serif;
font-size: 16px;
padding:0px 0px 0px 0px;
line-height: 25px;
text-align:justify;
font-weight:400px;
margin-top: 0px;
}
.pagingInfo {
font-family: 'Heebo', sans-serif;
letter-spacing:5px;
position: absolute;
bottom: 0rem;
left: 3rem;
height: 4rem;
font-size: 14px;
}
}
/*ipad 10.9*/
@media only screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-min-device-pixel-ratio: 2) {

.container-fluid 
{
margin: 0px 0px 0px 0px;
}
.carousel-double--img-container {
width: 100% !important;
}
.carousel-double--img img
{
max-width: 100%;
height:auto;
border:0px solid #f8f8f8;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);*/
}

.carousel-double--img-container {
position: relative;
display: block;
width: 100%;
z-index:99;
}
.carousel-double--txt-container {
position: relative;
display: block;
width: 100%;
height:100%;
float: left;
padding: 150px 30px 150px 30px;
margin: 15% 0px 0px 0px;
}
.carousel-double--next,
.carousel-double--prev {
position: absolute;
top: 25%;
transform: translateY(-50%);
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide .title
{
font-family: '微軟正黑體', sans-serif;
font-size: 20px;
font-weight:bold;
text-align:left;
margin: 0px 0px 20px 0px;
line-height:23px;
}
.slide .subtitle
{
font-family: '微軟正黑體', sans-serif;
font-size: 16px;
padding:0px 0px 0px 0px;
line-height: 25px;
text-align:justify;
font-weight:400px;
margin-top: 0px;
}
.pagingInfo {
font-family: 'Heebo', sans-serif;
letter-spacing:5px;
position: absolute;
bottom: 0rem;
left: 3rem;
height: 4rem;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-fluid
{
margin: 0px 0px 0px 0px;
}
.carousel-double--img img
{
max-width: 100%;
height:auto;
border:0px solid #f8f8f8;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);*/
}
.carousel-double--img-container {
position: relative;
display: block;
width: 100%;
z-index:99;
}
.carousel-double--txt-container {
position: relative;
display: block;
width: 100%;
height:290px;
float: left;
padding: 20px 30px 0px 30px;
}
.carousel-double--next,
.carousel-double--prev {
position: absolute;
top: 23%;
transform: translateY(-50%);
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carousel-double--next {
right: 0.5rem;
}
.carousel-double--prev {
left: 0.5rem;
}
.slide .title
{
font-family: '微軟正黑體', sans-serif;
font-size: 20px;
margin-bottom: 0px;
font-weight:bold;
text-align:left;
}
.slide .subtitle
{
font-family: '微軟正黑體', sans-serif;
font-size: 14px;
padding:0px 0px 0px 0px;
line-height: 25px;
text-align:justify;
font-weight:400px;
margin-top: 0px;
}
.pagingInfo {
font-family: 'Heebo', sans-serif;
letter-spacing:5px;
position: absolute;
bottom: 1rem;
left: 3rem;
height: 4rem;
font-size: 14px;
}
}
#news
{
/*background: linear-gradient(rgba(43, 44, 47, 0), rgba(43, 44, 47, 0)), url(../img/newss.png) no-repeat 0px 0px;*/
/*background-position: center center;*/
/*background-size: cover;*/
/*-webkit-background-size: cover;*/
/*-moz-background-size: cover;*/
/* animation: moveBackground 8s infinite linear; /* 添加动画效果 */*/
}
/* ------------------------------------------------------------
NUMBER OF COLUMNS: Adjust #primaryNav li to set the number
of columns required in your site map. The default is 
4 columns (25%). 5 columns would be 20%, 6 columns would 
be 16.6%, etc. 
------------------------------------------------------------ */
#primaryNav li {
width:25%;
}
#primaryNav li ul li {
width:100% !important;
}
#primaryNav.col1 li { width:99.9%; }
#primaryNav.col2 li { width:50.0%; }
#primaryNav.col3 li { width:33.3%; }
#primaryNav.col4 li { width:25.0%; }
#primaryNav.col5 li { width:20.0%; }
#primaryNav.col6 li { width:16.6%; }
#primaryNav.col7 li { width:14.2%; }
#primaryNav.col8 li { width:12.5%; }
#primaryNav.col9 li { width:11.1%; }
#primaryNav.col10 li { width:10.0%; }
.sitemap {
margin: 0 0 50px 0;
float: left;
width: 100%;
}
ol, ul {
list-style: none;
}
#primaryNav {
margin: 0;
float: left;
width: 100%;
}
#primaryNav #home {
display: block;
float: none;
background: #ffffff;
z-index: 2;
padding: 0;
margin-left:41.5%;
}
#primaryNav li {
float: left;
background: url('images/L1-center.png') center top no-repeat;
padding: 0px 0;
margin-top: 30px;
}
#primaryNav li a {
margin: 0 15px 0 15px;
padding: 10px 0px;
display: block;
font-size: 14px;
font-weight: bold;
text-align: center;
color: black;	
background: #f3f3fa;
/*	background: linear-gradient(45deg, #1F9ED2 90%, #4b4b4b 0%);*/*/
border: 3.5px solid #eeeeee;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 0px; 
-moz-box-shadow: rgba(0,0,0,0.5) 0px 0px 0px; /* FF 3.5+ */	
}
#primaryNav li a:hover {
background-color: #000000;
border-color: #000000;
color:#ffffff;
}
#primaryNav li:last-child {
background: url('images/L1-right.png') center top no-repeat;
}
#primaryNav li a:link:before,
#primaryNav li a:visited:before {
color: #eeeeee;
}
/* --------	Second Level --------- */
#primaryNav li li {
width: 100%;
clear: left;
margin-top: 0;
padding: 10px 0 0 0;
background: url('images/vertical-line.png') center bottom repeat-y;
}
#primaryNav li li a {
background-color: #dadada;
border-color: #000000;
}
#primaryNav li li a:hover {
border-color: #000000;
background-color: #000000;
}
#primaryNav li li a.active {
border-color: #000000;
background-color: #000000;
}
#primaryNav li li:first-child {
padding-top: 30px;
}
#primaryNav li li:last-child {
background: url('images/vertical-line.png') center bottom repeat-y;
}
#primaryNav li li a:link:before,
#primaryNav li li a:visited:before {
color: #eeeeee;
}
/* --------	Third Level --------- */
#primaryNav li li ul {
margin: 0px 0px -15px 0px;
width: 100%;
float: right;
padding: 10px 0 10px 0;
background: #ffffff url('images/L3-ul-top.png') center top no-repeat;
}
#primaryNav li li li {
background: url('images/L3-center.png') left center no-repeat;
padding: 5px 0 5px 0;
}
#primaryNav li li li a {
background-color: #f8f8f8;
border-color: #f8f8f8;
font-size: 14px;
padding: 10px 0;
width: 80%;
float: right;
}
#primaryNav li li li a:hover {
background-color: #000000;
border-color: #000000;
}
#primaryNav li li li:first-child {
padding: 0px 0 5px 0;
background: url('images/L3-li-top.png') left center no-repeat;
}
#primaryNav li li li:last-child {
background: url('images/L3-bottom.png') left center no-repeat;
}
#primaryNav li li li a:link:before,
#primaryNav li li li a:visited:before {
color: #ccae14;
font-size: 9px;
}
.disabled-link {
color: #f7f7f7; /* 使用灰色表示不可点击状态 */
text-decoration: none; /* 可以选择去掉下划线 */
cursor: not-allowed; /* 显示禁止符号的鼠标指针 */
pointer-events: none; /* 禁用点击事件 */
}
/* ------------------------------------------------------------
Utility Navigation
------------------------------------------------------------ */
#utilityNav {
float: right;
max-width: 50%;
margin-right: 10px;
}
#utilityNav li {
float: left;
margin-bottom: 10px;
}
#utilityNav li a {
margin: 0 10px 0 0;
padding: 5px 10px;
display: block;	
border: 2px solid #e3ca4b;
font-size: 12px;
font-weight: bold;
text-align: center;
color: black;
background: #fff7aa url('images/white-highlight.png') top left repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px; 
-moz-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px; /* FF 3.5+ */	
}
#utilityNav li a:hover {
background-color: #fffce5;
border-color: #d1b62c;
}
#utilityNav li a:link:before,
#utilityNav li a:visited:before {
color: #ccae14;
font-size: 9px;
margin-bottom: 3px;
}
/*ipad pro*/
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) {

#sitemap
{
display:block !important;
}
}
/*手機平板不顯示網站地圖*/
@media (max-width: 1180px) {
#sitemap
{
display:none;
}
}
.g-btn { text-align: center; background-color: #fff; color: #000000; font-size: 16px; padding: 0 40px; display: inline-block; height: 50px; line-height: 50px; border: 0; border-radius: 4px; position: relative; -webkit-transition: color 0.5s, background-color 0.3s; -o-transition: color 0.5s, background-color 0.3s; transition: color 0.5s, background-color 0.3s; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); vertical-align: middle; background-position: center center; background-repeat: no-repeat }
.g-btn:before { content: ''; display: block; width: 50%; height: 1px; position: absolute; left: -33%; top: 50%; background: #333333; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s }
.g-btn.black { background-color: #5a5b5d; color: #fff }
/* .g-btn.btn-add-cart { background-image: url('../images/icon_cart.svg'); padding: 0 33px } */
.g-btn.btn-add-cart:before { content: url('../images/icon_cart.svg');}
/* .g-btn.btn-add-cart:before { display: none } */
.g-btn:focus { color: #333;;text-decoration:none }
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0em 0.8em 0em 0em; text-align: right }
.btn-wrap-center { margin: 3rem auto; text-align: center; font-size: 0 }
.btn-more { display: inline-block }
.btn-back { display: inline-block; color: #000; font-size: 1rem; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s }
.btn-back:before { content: ''; display: inline-block; width: 20px; height: 1px; background: #444; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; left: 0; z-index: -1; vertical-align: middle; margin-right: 20px }
.btn-back:after { content: ''; position: absolute; width: 10px; height: 8px; border-style: solid; border-color: #000; border-width: 1px 1px 0 0; transform: rotate(-135deg); -webkit-transition: left 0.5s ease; -o-transition: left 0.5s ease; transition: left 0.5s ease; display: block; bottom: 0; left: 0; top: 5px }
@media (min-width:992px) {
.g-btn:hover { color: #fff; background-color: #666 }
.g-btn:hover:before { background: #fff; left: 100%; width: 0 }
.g-btn.black:hover { background-color: #bca97a }
.g-btn2.black:hover,
.g-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media (max-width:992px) {
.g-btn { height: 40px; line-height: 40px; padding: 0 20px }
.g-btn:before { width: 23%; left: -15% }
.btn-wrap-center { margin: 1.5rem 0 }
}
@media only screen and (device-width: 1024px) and (device-height: 1366px) {

.g-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em 0.8em 0em 0em !important; text-align: right }
.g-btn:hover { color: #fff; background-color: #666 }
.g-btn:hover:before { background: #fff; left: 100%; width: 0 }
.g-btn.black:hover { background-color: #bca97a }
.g-btn2.black:hover,
.g-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)  {
.g-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0em 0.6em 0em 0em !important; text-align: right }
.g-btn:hover { color: #fff; background-color: #666 }
.g-btn:hover:before { background: #fff; left: 100%; width: 0 }
.g-btn.black:hover { background-color: #bca97a }
.g-btn2.black:hover,
.g-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.g-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em -1.8em 0em 0em; text-align: right }
.g-btn:hover { color: #fff; background-color: #666 }
.g-btn:hover:before { background: #fff; left: 100%; width: 0 }
.g-btn.black:hover { background-color: #bca97a }
.g-btn2.black:hover,
.g-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media (max-width:480px) {
.g-btn {font-size: 14px;}
.btn-wrap { margin: 20px auto }
.btn-wrap-right {margin: 0.5em -3em 0em 0em; text-align: right }
.g-btn:hover { color: #fff; background-color: #666 }
.g-btn:hover:before { background: #fff; left: 100%; width: 0 }
.g-btn.black:hover { background-color: #bca97a }
.g-btn2.black:hover,
.g-btn2.greenlake:hover { background-color: #bca97a }
.btn-back:hover { letter-spacing: 1px; color: #000 }
.btn-back:hover:before { width: 30px }
}
@media (max-width:480px) {
.g-btn { height: 40px; line-height: 40px; padding: 0 20px }
.g-btn:before { width: 23%; left: -15% }
.btn-wrap-center { margin: 1.5rem 0 }
}
#about-left .btn-box5 a:hover:before {
width: 100px;
color:#000000
background-color: #000000;
}
.btn-loadmore {
border: 0;
height: 100px;
padding: 1rem auto 3rem;
font-size: 1.823rem;
letter-spacing: 0px;
position: relative;
display: block;
color: #ffffff;
background: transparent;
-webkit-transition: letter-spacing 0.3s easeInOutCubic;
-o-transition: letter-spacing 0.3s easeInOutCubic;
transition: letter-spacing 0.3s easeInOutCubic;
}
.btn-loadmore .circle {
left: 50%;
top: 80px;
opacity: 1;
margin-left: -22.5px;
}
@media (min-width: 992px) {
.btn-loadmore:hover {
letter-spacing: 4px;
}
.btn-loadmore:hover .circle {
opacity: 0.3;
-webkit-animation: aw-move 0.5s ease-in-out alternate infinite;
animation: aw-move 0.5s ease-in-out alternate infinite;
}
}
.separator {
width: 0;
height: 0;
border-style: solid;
border-width: var(--height) var(--width) 0 0;
border-color: var(--top-color) var(--bottom-color) transparent transparent;
}
.separator.reverse {
transform: rotateY(180deg);
}
.vertical .separator.reverse {
transform: rotateX(180deg);
}
p.testi {	
text-align:justify;
color: #ffffff;
font-weight: 300;
text-transform: uppercase;
font-size:15px;
width:61%;
margin: 3% 0% 0% 10%;
line-height: 25px;
position: relative;
padding: 0.25em 1em;
}
@media (max-width: 768px) {
p.testi{ 
text-align:justify;
color: #ffffff;
font-weight: 300;
text-transform: uppercase;
font-size:15px;
width:60%;
margin: 3% 0% 0% 35%;
line-height: 25px;
position: relative;
}
#quote-carousel h5.testi-title {
font-family: 'MonteCarlo', cursive;
color: #ffffff;
font-weight: 400px;
text-transform: capitalize;
width:60%;
margin: 0% 0% 0% 30%;
font-size:24px;
text-align:right;
}
}
.portfolio{
/*    background:linear-gradient(rgba(43, 44, 47, 0), rgba(43, 44, 47, 0)),  url(../img/company_b.png) no-repeat 0px 0px;*/
margin-top:-100px;
}

figure.snip0028 {
font-family: '微軟正黑體', 'Arial', sans-serif;
position: relative;
display: inline-block;
margin:4% 1% 1.5% 1%;
min-width: 100px;
max-width: 220px;
max-height: 310px;
overflow: hidden;
text-align: center;
background: #000000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip0028 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0028 img {
opacity: 1;
width: 100%;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0028 figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: left;
}
figure.snip0028 figcaption > div {
background-color: #fff;
position: absolute;
width: 100%;
bottom: 28px;
left: 100%;
padding: 7px 10px;
border-radius: 0 0 0 5px;
-webkit-transition: left 0.35s;
transition: left 0.35s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip0028 figcaption > div i {
font-size: 23px;
padding: 6px;
color: #000000;
opacity: 0.6;
position: relative;
right: -150px;
-webkit-transition: right 0.35s, opacity 0.35s;
transition: right 0.35s, opacity 0.35s;
}
figure.snip0028 figcaption > div a {
opacity: 0.7;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
figure.snip0028 figcaption > div a:hover {
opacity: 1;
}
figure.snip0028 figcaption::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
background-image: linear-gradient(to top, #000000 0%, transparent 50%, #000000 100%);
}
figure.snip0028 h2 {
border-radius: 0 5px 0 0;
text-align: right;
margin: 0;
padding: 20px;
position: absolute;
font-size: 1em;
bottom: 70px;
right: 100%;
width: 90%;
word-spacing: -0.1em;
font-weight: 300;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
background-color: #000000;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
figure.snip0028 h2 span {
font-weight: 800;
}
figure.snip0028:hover img,
figure.snip0028.hover img {
opacity: 0.7;
}
figure.snip0028:hover figcaption > div,
figure.snip0028.hover figcaption > div {
left: 35%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
figure.snip0028:hover figcaption h2,
figure.snip0028.hover figcaption h2 {
right: 30px;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip0028:hover figcaption::before,
figure.snip0028.hover figcaption::before {
opacity: 0.8;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip0028:hover figcaption i,
figure.snip0028.hover figcaption i {
right: 0px;
}
figure.snip0028:hover a:first-child i,
figure.snip0028.hover a:first-child i {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
figure.snip0028:hover a:nth-child(2) i,
figure.snip0028.hover a:nth-child(2) i {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
figure.snip0028:hover a:nth-child(3) i,
figure.snip0028.hover a:nth-child(3) i {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#topbar {
font-family: '微軟正黑體', sans-serif;
position: fixed;		
background: linear-gradient(rgb(248,248,248), rgb(248,248,248));
width: 100%;
left: 0;
text-align:center;
opacity: 1;
}
#topbar_wrapper {
border-bottom:0px solid #d7d7d7;
width: 100%;
margin: 0 auto;
text-align: center;
display: none;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: absolute;
min-width: 200px;
}
#mainmenu li {
display: block;
width: 220px;
font-weight:500px
}
#mainmenu li:hover {
background-color: #e3e3e3;
}
#mainmenu li a{
color: #000000;
display: block;
padding: 14px;
text-decoration: none;
padding:10px
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: block;
position: absolute;
background-color: #fafafa;
border-radius: 0px 0px 0px 0px;
text-align:center;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li: hover ul {
display: block;
}
.menubox {
display: none;
position: absolute;
background-color: #e3e3e3;
border-left: 0px;
text-align: center;
left: 100%;
top: 0;
width: 100%;
}
.menubox  li{
display: block;
}
#laser li a:hover 
{
color:#b2b2b2;
}
#industry li a:hover 
{
color:#b2b2b2;
}
#sport li a:hover 
{
color:#b2b2b2;
}
#medical li a:hover 
{
color:#b2b2b2;
}
#helmet li a:hover 
{
color:#b2b2b2;
}
.menubox  li a:hover {
color: #e3e3e3;
}
#menu1
{
float: right; 
position: absolute;
padding-left: 20.5%;
padding-top: 1.5%;
color: #bdbdbd;
}
#menu2
{
float: right; 
position: absolute;
padding-left: 15.5%;
padding-top: 1.5%;
color: #bdbdbd;
}
#menu3
{
float: right; 
position: absolute;
padding-left: 18.5%;
padding-top: 1.5%;
color: #bdbdbd;
}
#menu4
{
float: right; 
position: absolute;
padding-left: 17%;
padding-top: 1.5%;
color: #bdbdbd;
}
#menu5
{
float: right; 
position: absolute;
padding-left: 15.8%;
padding-top: 1.5%;
color: #bdbdbd;
}
/*.rotate {*/
/*transform: rotate(180deg);*/
/*}*/
/*.rotate1 {*/
/*transform: rotate(0deg);*/
/*}*/
/*@media (max-width: 768px) {*/
/*.rotate {*/
/*transform: rotate(0deg);*/
/*}*/
/*}*/
figure.snip0071 {
font-family: '微軟正黑體', 'Arial', sans-serif;
position: relative;
display: inline-block;
margin:2.3% 1% 1.5% 1%;
min-width: 100px;
max-width: 46%;
max-height: 310px;
border: 0px solid rgba(255, 255, 255, 0.7);
overflow: hidden;
text-align: center;
background: #e5e5e5;
box-shadow: 0 0 0px rgba(255, 255, 255, 0.15);
}
figure.snip0071 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
figure.snip0071 .image {
position: relative;
width: 58%;
overflow: hidden;
right: -6%;
float: right;
z-index: 1;
box-shadow: 0px 0 20px rgba(0, 0, 0, 0.5);
-webkit-transform: skewX(-15deg);
transform: skewX(-15deg);  
opacity: 0.8;
transition: transform .5s, filter 1.5s ease-in-out;
filter: grayscale(100%);
}
figure.snip0071 .image img {
position: relative;  
display:inline-block
left: -20%;
max-width: 100%;
-webkit-transform: skewX(15deg);
transform: skewX(15deg);
}
figure.snip0071 figcaption {
background: #262626;
height: 100%;
margin: 0;
position: absolute;
width: 100%;
z-index: 1;
}
figure.snip0071 figcaption h2,
figure.snip0071 figcaption p {
margin: 0;
text-align: left;
width: 100%;
}
figure.snip0071 figcaption h2 {
color:#ffffff;
bottom: 60px;
position: absolute;
padding: 10px 7px;
background: rgba(0, 0, 0, 0.5);
font-size: 1.4em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0071 figcaption h2 span {
font-weight: 800;
}
figure.snip0071 figcaption p {
padding: 20px;
width: 50%;
bottom: 80px;
position: absolute;
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0071 figcaption .position {
position: absolute;
bottom: 0;
left: 0;
line-height: 40px;
padding-left: 20px;
font-style: italic;
opacity: 0.3;
}
.menu_img:hover {
opacity: 1;
}
figure.snip0071 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip0071.blue figcaption {
background: #20638f;
}
figure.snip0071.red figcaption {
background: #962d22;
}
figure.snip0071.yellow figcaption {
background: #ffcc00;
}
figure.snip0071:hover figcaption,
figure.snip0071.hover figcaption {
background: #333333;
}
figure.snip0071:hover.blue figcaption,
figure.snip0071.hover.blue figcaption {
background: #2472a4;
}
figure.snip0071:hover.red figcaption,
figure.snip0071.hover.red figcaption {
background: #ab3326;
}
figure.snip0071:hover.yellow figcaption,
figure.snip0071.hover.yellow figcaption {
background: #d67118;
}
figure.snip0071:hover .image,
figure.snip0071.hover .image {
box-shadow: 0px 0 0px rgba(0, 0, 0, 0.5);
transition: transform .3s, filter 0.5s ease-in-out;
filter: grayscale(0%);
}
figure.snip0072 {
font-family: '微軟正黑體', 'Arial', sans-serif;
position: relative;
display: inline-block;
margin:1.6% 0.7% 1% 0.7%;
min-width: 100px;
max-width: 30%;
max-height: 310px;
border: 0px solid rgba(255, 255, 255, 0.7);
overflow: hidden;
text-align: center;
background: #e5e5e5;
box-shadow: 0 0 0px rgba(255, 255, 255, 0.15);
}
figure.snip0072 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
figure.snip0072 .image {
position: relative;
width: 58%;
overflow: hidden;
right: -6%;
float: right;
z-index: 1;
box-shadow: 0px 0 20px rgba(0, 0, 0, 0.5);
-webkit-transform: skewX(-15deg);
transform: skewX(-15deg);  
opacity: 0.8;
transition: transform .5s, filter 1.5s ease-in-out;
filter: grayscale(100%);
}
figure.snip0072 .image img {
position: relative;  
display:inline-block
left: -20%;
max-width: 100%;
-webkit-transform: skewX(15deg);
transform: skewX(15deg);
}
figure.snip0072 figcaption {
background: #262626;
height: 100%;
margin: 0;
position: absolute;
width: 100%;
z-index: 1;
}
figure.snip0072 figcaption h2,
figure.snip0072 figcaption p {
margin: 0;
text-align: left;
width: 100%;
}
figure.snip0072 figcaption h2 {
color:#ffffff;
bottom: 60px;
position: absolute;
padding: 10px 7px;
background: rgba(0, 0, 0, 0.5);
font-size: 1.4em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0072 figcaption h2 span {
font-weight: 800;
}
figure.snip0072 figcaption p {
padding: 20px;
width: 50%;
bottom: 80px;
position: absolute;
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0072 figcaption .position {
position: absolute;
bottom: 0;
left: 0;
line-height: 40px;
padding-left: 20px;
font-style: italic;
opacity: 0.3;
}
.menu_img:hover {
opacity: 1;
}
figure.snip0072 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip0072.blue figcaption {
background: #20638f;
}
figure.snip0072.red figcaption {
background: #962d22;
}
figure.snip0072.yellow figcaption {
background: #ffcc00;
}
figure.snip0072.white figcaption {
background: #ffffff;
}
figure.snip0072:hover.white figcaption,
figure.snip0072.hover.white figcaption {
background: #ffffff;
}
figure.snip0072:hover figcaption,
figure.snip0072.hover figcaption {
background: #333333;
}
figure.snip0072:hover.blue figcaption,
figure.snip0072.hover.blue figcaption {
background: #2472a4;
}
figure.snip0072:hover.red figcaption,
figure.snip0072.hover.red figcaption {
background: #ab3326;
}
figure.snip0072:hover.yellow figcaption,
figure.snip0072.hover.yellow figcaption {
background: #d67118;
}
figure.snip0072:hover .image,
figure.snip0072.hover .image {
box-shadow: 0px 0 0px rgba(0, 0, 0, 0.5);
transition: transform .3s, filter 0.5s ease-in-out;
filter: grayscale(0%);
}
figure.snip1091 {
font-family: '微軟正黑體', 'Arial', sans-serif;
position: relative;
display: inline-block;
margin:1.8% 1% 1.5% 1%;
min-width: 100px;
max-width: 220px;
max-height: 310px;
overflow: hidden;
text-align: center;
background: #e5e5e5;
box-shadow: 0 0 0px rgba(255, 255, 255, 0.15);
}
figure.snip1091 * {
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.snip1091 img {
transition: transform .5s, filter 1.5s ease-in-out;
filter: grayscale(50%);
max-width: 100%;
position: relative;
top: 0;
left: 0;
}
figure.snip1091 figcaption {
position: absolute;
top: 50%;
left: 30px;
right: 30px;
-webkit-transform: rotate(0deg) translateY(-50%) scale(1);
transform: rotate(0deg) translateY(-50%) scale(1);
-webkit-transform-origin: center 0;
transform-origin: center 0;
}
figure.snip1091 figcaption h2 {
font-size:28px;
top: 50%;
letter-spacing: 1px;
color: #ffffff;
text-transform: uppercase;
padding: 10px 0;
margin: 0;
font-weight: 600;
}
figure.snip1091 figcaption h2 span {
font-weight: 800;
}
figure.snip1091 figcaption:before,
figure.snip1091 figcaption:after {
background-color: rgba(255, 255, 255, 0.5);
width: 100%;
height: 0px;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.snip1091 figcaption:before {
left: 0;
top: 0;
}
figure.snip1091 figcaption:after {
bottom: 0;
right: 0;
}
figure.snip1091.blue {
background: #091b27;
}
figure.snip1091.red {
background: #2e0e0a;
}
figure.snip1091.yellow {
background: #4f3204;
}
figure.snip1091.green {
background: #061c10;
}
figure.snip1091.navy {
background: #000000;
}
figure.snip1091 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
/*--顯示圖片(原本CSS沒有)
--*/
.menu_img:hover {
opacity: 0;
}
figure.snip1091:hover img,
figure.snip1091.hover img {
opacity: 1;
transition: transform .3s, filter 0.5s ease-in-out;
filter: grayscale(0%);
}
figure.snip1091:hover figcaption,
figure.snip1091.hover figcaption {
-webkit-transform: rotate(0deg) translateY(-50%) scale(0.9);
transform: rotate(0deg) translateY(-50%) scale(0.9);
}
figure.snip1091:hover figcaption:before,
figure.snip1091.hover figcaption:before,
figure.snip1091:hover figcaption:after,
figure.snip1091.hover figcaption:after {
width: 200%;
}
figure.snip1092 {
font-family: '微軟正黑體', 'Arial', sans-serif;
position: relative;
display: inline-block;
margin:1.2% 0.4% 0.8% 0.4%;
min-width: 50px;
max-width: 13%;
max-height: 310px;
overflow: hidden;
text-align: center;
background: #000000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1092 * {
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.snip1092 img {
transition: transform .5s, filter 0.5s ease-in-out;
filter: grayscale(100%);
max-width: 100%
position: relative;
top: 0;
left: 0;
}
figure.snip1092 figcaption {
position: absolute;
top: 50%;
left: 10px;
right: 10px;
-webkit-transform: rotate(0deg) translateY(110%) scale(0.9);
transform: rotate(0deg) translateY(100%) scale(0.9);
}
figure.snip1092 figcaption h2 {
font-size:20px;
top: 50%;
width:150px;
text-align:center;
letter-spacing: 2px;
color: #ffffff;
text-transform: uppercase;
border-radius:0px;
background-color: rgba(0, 20, 30, 0);
margin: 0;
font-weight: bold;
line-height: 0;
padding:1em 1em;
display: inline-block;
}
/*figure.snip1092 figcaption h2:before, figure.snip1092 figcaption h2:after { */
/*  content:'';*/
/*  width: 20px;*/
/*  height: 30px;*/
/*  position: absolute;*/
/*  display: inline-block;*/
/*}*/
/**/
/*figure.snip1092 figcaption h2:before {*/
/*  border-left: solid 1px #e9e9e9;*/
/*  border-top: solid 1px #e9e9e9;*/
/*  top:0;*/
/*  left: 0;*/
/*}*/
/**/
/*figure.snip1092 figcaption h2:after {*/
/*  border-right: solid 1px #e9e9e9;*/
/*  border-bottom: solid 1px #e9e9e9;*/
/*  bottom:0;*/
/*  right: 0;*/
/*}*/
figure.snip1092 figcaption h2 span {
font-weight: 100px;
}
figure.snip1092 figcaption:before,
figure.snip1092 figcaption:after {
background-color: rgba(230, 240, 255, 0.1);
width: 100%;
height: 600px;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.snip1092 figcaption:before {
left: 0;
top: 0;
}
figure.snip1092 figcaption:after {
bottom: 0;
right: 0;
}
figure.snip1092.blue {
background: #091b27;
}
figure.snip1092.red {
background: #2e0e0a;
}
figure.snip1092.yellow {
background: #4f3204;
}
figure.snip1092.green {
background: #061c10;
}
figure.snip1092.navy {
background: #000000;
}
figure.snip1092 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
/*--顯示圖片(原本CSS沒有)
--*/
.menu_img:hover {
opacity: 0;
}
figure.snip1092:hover img,
figure.snip1092.hover img {
opacity: 1;
transition: transform .3s, filter 0.5s ease-in-out;
filter: grayscale(0%);
}
figure.snip1092:hover figcaption,
figure.snip1092.hover figcaption {
-webkit-transform: rotate(0deg) translateY(-50%) scale(0.9);
transform: rotate(0deg) translateY(-50%) scale(0.9);
}
figure.snip1092:hover figcaption:before,
figure.snip1092.hover figcaption:before,
figure.snip1092:hover figcaption:after,
figure.snip1092.hover figcaption:after {
width: 200%;
}
.snip1577 {
font-family: 'Montserrat', '微軟正黑體', sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin:1.2% 0.4% 0.8% 0.4%;
min-width: 50px;
max-width: 13%;
max-height: 310px;
color: #fff;
text-align: left;
font-size: 16px;
background: #000;
}
.snip1577 *,
.snip1577:before,
.snip1577:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1577 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1577:before,
.snip1577:after {
position: absolute;
top: 20px;
right: 20px;
content: '';
background-color: #fff;
z-index: 1;
opacity: 0;
}
.snip1577:before {
width: 0;
height: 1px;
}
.snip1577:after {
height: 0;
width: 1px;
}
.snip1577 figcaption {
position: absolute;
top: 50%;
left: 10px;
right: 10px;
-webkit-transform: rotate(0deg) translateY(0%) scale(1);
transform: rotate(0deg) translateY(0%) scale(1);
-webkit-transform-origin: center 0;
transform-origin: center 0;
}
.snip1577 h3,
.snip1577 h4 {
margin: 0;
font-size: 1.3em;
font-weight: 400px;
opacity: 0;
color:#fff
}
.snip1577 h4 {
font-size: 16px;
letter-spacing:0px;
text-transform: uppercase;
}
figure.snip1104 {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0px;
min-width: 220px;
max-width: 350px;
max-height: 220px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1104 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
figure.snip1104 img {
max-width: 100%;
position: relative;
opacity: 0.6;
}
figure.snip1104 figcaption {
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
}
figure.snip1104 h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(0deg) rotate(0deg) translate(0, -50%);
transform: skew(0deg) rotate(0deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 800;
font-size:24px;
}
figure.snip1104 h2 span {
font-weight: 400;
font-size:18px;
}
figure.snip1104:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: '';
background: #ffffff;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(110deg) translateY(-50%);
transform: rotate(110deg) translateY(-50%);
}
figure.snip1104.blue {
background: #123851;
}
figure.snip1104.blue h2 {
background-color: rgba(255, 255, 255, 0.7);
color:#000000
}
figure.snip1104.red {
background: #581a14;
}
figure.snip1104.red h2 {
background-color: rgba(255, 255, 255, 0.7);
color:#000000
}
figure.snip1104.yellow {
background: #7f5006;
}
figure.snip1104.yellow h2 {
background-color: rgba(255, 255, 255, 0.7);
color:#000000
}
figure.snip1104:hover img,
figure.snip1104.hover img {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1104:hover h2,
figure.snip1104.hover h2 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.snip1104:hover:before,
figure.snip1104.hover:before {
-webkit-transform: rotate(110deg) translateY(-150%);
transform: rotate(110deg) translateY(-150%);
}
figure.snip0021 {
font-family: '微軟正黑體', 'Arial', sans-serif;
display:inline-block;
color: #fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 350px;
max-height: 220px;
width: 100%;
background: #000000;
text-align: center;
}
figure.snip0021 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0021 img {
opacity: 1;
width: 100%;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0021 figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: left;
}
figure.snip0021 figcaption > div {
float: left;
height: 100%;
overflow: hidden;
width: 50%;
position: relative;
}
figure.snip0021 figcaption::before {
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
width: 2px;
content: '';
opacity: 0;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
figure.snip0021 h2,
figure.snip0021 p {
margin: 0;
padding: 20px;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
left: 0;
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
figure.snip0021 h2 {
text-align: right;
display: inline-block;
word-spacing: -0.1em;
font-weight: 300;
text-transform: uppercase;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
-webkit-transform: translate3d(50%, 0%, 0);
transform: translate3d(50%, 0%, 0);
}
figure.snip0021 h2 span {
font-weight: 800;
}
figure.snip0021 p {
display: block;
bottom: 0;
text-align: justify;
font-size:14px;
line-height:1.8em
font-weight: 300;
top: 0%;
color: #000;
background: #ffffff;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, transparent 40%, rgba(0, 0, 0, 0.1) 100%);
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
figure.snip0021 .curl {
width: 0px;
height: 0px;
position: absolute;
bottom: 0;
right: 0;
background: linear-gradient(135deg, #ffffff, #f3f3f3 20%, #cccccc 38%, #bbbbbb 44%, #aaaaaa 50%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.4));
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: all .3s ease;
}
figure.snip0021 .curl:before,
figure.snip0021 .curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12%;
bottom: 6%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
transform: skew(-10deg) rotate(-6deg);
}
figure.snip0021 .curl:after {
left: auto;
right: 6%;
bottom: auto;
top: 14%;
transform: skew(-15deg) rotate(-84deg);
}
figure.snip0021 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
color: #ffffff;
}
figure.snip0021:hover img,
figure.snip0021.hover img {
opacity: 0.7;
}
figure.snip0021:hover figcaption h2,
figure.snip0021.hover figcaption h2,
figure.snip0021:hover figcaption p,
figure.snip0021.hover figcaption p {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
figure.snip0021:hover figcaption h2,
figure.snip0021.hover figcaption h2 {
opacity: 1;
}
figure.snip0021:hover figcaption p,
figure.snip0021.hover figcaption p {
opacity: 1;
}
figure.snip0021:hover figcaption::before,
figure.snip0021.hover figcaption::before {
background: #ffffff;
top: 0px;
bottom: 0px;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip0021:hover figcaption .curl,
figure.snip0021.hover figcaption .curl {
width: 40px;
height: 40px;
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
/*--顯示圖片(原本CSS沒有)
--*/
.menu_img2:hover {
opacity: 0;
}
.snip1577:hover img,
.snip1577.hover img {
zoom: 1;
filter: alpha(opacity=20);
-webkit-opacity: 0.2;
opacity: 0.2;
}
.snip1577:hover:before,
.snip1577.hover:before,
.snip1577:hover:after,
.snip1577.hover:after {
opacity: 1;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.snip1577:hover:before,
.snip1577.hover:before {
width: 40px;
}
.snip1577:hover:after,
.snip1577.hover:after {
height: 40px;
}
.snip1577:hover h3,
.snip1577.hover h3,
.snip1577:hover h4,
.snip1577.hover h4 {
opacity: 1;
}
.snip1577:hover h3,
.snip1577.hover h3 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1577:hover h4,
.snip1577.hover h4 {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
figure.snip0018 {
font-family: '微軟正黑體', Arial, sans-serif;
display:inline-block;
color: #fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
text-align: center;
}
figure.snip0018 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0018 img {
opacity: 1;
width: 100%;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0018 figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
figure.snip0018 figcaption > div {
height: 50%;
overflow: hidden;
width: 100%;
position: relative;
}
figure.snip0018 figcaption::before {
position: absolute;
top: 50%;
right: 50%;
left: 50%;
height: 2px;
content: '';
opacity: 0;
background-color: rgba(255, 255, 255, 0);
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
figure.snip0018 h2,
figure.snip0018 p {
margin: 0;
padding: 30px 35px;
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s,-webkit-transform 0.4s,-moz-transform 0.4s,-o-transform 0.4s,transform 0.4s;
}
figure.snip0018 h2 {
display: inline-block;
word-spacing: -0.1em;
font-weight: 300;
text-transform: uppercase;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: translate3d(0%, 50%, 0);
transform: translate3d(0%, 50%, 0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip0018 h2 span {
font-weight: 800;
}
figure.snip0018 p {
font-weight: 300;
text-align:justify;
line-height:1.8em;
top: 0%;
color: #000;
background: #fff;
-webkit-transform: translate3d(0%, -50%, 0);
transform: translate3d(0%, -50%, 0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip0018 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
color: #ffffff;
}
figure.snip0018:hover img {
opacity: 0.7;
}
figure.snip0018:hover figcaption h2,
figure.snip0018:hover figcaption p {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
figure.snip0018:hover figcaption h2 {
opacity: 1;
}
figure.snip0018:hover figcaption p {
opacity: 1;
}
figure.snip0018:hover figcaption::before {
background: #ffffff;
left: 0px;
right: 0px;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
figure.snip1384 {
display:inline-block;
position: relative;
overflow: hidden;
color: #ffffff;
font-size: 16px;
background-color: #000000;
}
figure.snip1384 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
figure.snip1384 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
figure.snip1384:after,
figure.snip1384 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
figure.snip1384:after {
content: '';
background-color: rgba(25, 25, 25, 1);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
figure.snip1384 figcaption {
z-index: 1;
padding: 40px;
}
figure.snip1384 h3,
figure.snip1384 .links {
width: 100%;
margin: 5px 0;
padding: 0;
}
figure.snip1384 h3 {
font-family: '微軟正黑體', 'Arial', sans-serif;
margin-top:-5px;
line-height: 0em;
font-weight: 700;
font-size: 1.4em;
text-transform: uppercase;
opacity: 0;
color:#ffffff;
text-align:left;
}
figure.snip1384 p {
font-family: '微軟正黑體', 'Arial', sans-serif;
margin-top:20px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0px;
opacity: 0;
top: 50%;
-webkit-transform: translateY(40px);
transform: translateY(40px);
color:#ffffff;
text-align:justify;
}
figure.snip1384 i {
position: absolute;
bottom: 10px;
right: 10px;
padding: 20px 25px;
font-size: 34px;
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
color:#ffffff;
}
figure.snip1384:hover img,
figure.snip1384.hover img {
zoom: 1;
filter: alpha(opacity=50);
-webkit-opacity: 0.5;
opacity: 0.5;
}
figure.snip1384:hover:after,
figure.snip1384.hover:after {
opacity: 1;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
figure.snip1384:hover h3,
figure.snip1384.hover h3,
figure.snip1384:hover p,
figure.snip1384.hover p,
figure.snip1384:hover i,
figure.snip1384.hover i {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
opacity: 1;
}
.triangle01 {
background-color: #f5f5f5;
transform: skewY(-2.5deg);
margin-top: 0vw;
}
.triangle01 > * {
transform: skewY(2.5deg);
}
.triangle02 {
background: linear-gradient(45deg, #f8f8fc ,#f8f8fc 75%,#eeeeee 25%,#eeeeee);
}
.square-flip{
text-align: center;
}
.square-flip{
width:260px;
height:260px;
font-family: '微軟正黑體', 'Arial', sans-serif;
position: relative;
display: inline-block;
margin:1% 0.5% 0.8% 0.5%;
overflow: hidden;
background: #000000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.square,.square2{
width:260px;
height:260px;
}
.square{
background-size: cover;
background-position:center center;
-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
-webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
overflow: hidden;
position:absolute;
top:0;
-webkit-backface-visibility: hidden; 
backface-visibility: hidden;    transition: transform .5s, filter 1.5s ease-in-out;
filter: grayscale(100%);
}
.square-flip .square{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
transform-style: preserve-3d;
z-index:1;
}
.square-flip:hover .square{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
transform-style: preserve-3d;
}
.square2{
background-size: cover;
background-position:center center;
-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
-webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
overflow: hidden;
position:absolute;
top:0;
-webkit-backface-visibility: hidden; 
backface-visibility: hidden;
}
.square-flip .square2{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
transform-style: preserve-3d;
z-index:1;
}
.square-flip:hover .square2{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
transform-style: preserve-3d;
}
/*Square content*/
.square-container{
padding:0px;
text-align:center;
position:relative;
top:50%;
-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
-webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
-webkit-transform: translateY(-50%) translateX(0px)  scale(1);
-ms-transform: translateY(-50%) translateX(0px)  scale(1);
transform: translateY(-50%) translateX(0px)  scale(1);
transform-style: preserve-3d;
z-index:2;
}
.square-flip:hover .square-container{
-webkit-transform: translateY(-50%) translateX(-650px)  scale(.88);
-ms-transform: translateY(-50%) translateX(-650px)  scale(.88);
transform: translateY(-50%) translateX(-650px)  scale(.88);
transform-style: preserve-3d;
}
.square-container2{
padding:0px;
text-align:center;
position:relative;
top:50%;
-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
-webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
-webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
-ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
transform-style: preserve-3d;
z-index:2;
}
.square-flip:hover .square-container2{
-webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
-ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
transform-style: preserve-3d;
}
/*Style text*/
.square-flip h2{
position:absolute;
color:white;
font-family: '微軟正黑體', 'Arial', sans-serif;
font-weight:700;
font-size:24px;
top: 50%;
left: 0%;
}
.square-flip h3{
color:white;
font-family: '微軟正黑體', 'Arial', sans-serif;
font-weight:500;
font-size:16px;
line-height:26px;
}
/*Elements*/
.flip-overlay{
display:block;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
position:absolute;
top:0;
}
.align-center{
margin:0 auto;
}
.kallyas-button{
display:block;
padding:19px 20px;
font-family: '微軟正黑體', 'Arial', sans-serif;
font-weight:600;
color:#fff;
margin:0 auto;
border-radius:0px;
text-decoration:none;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa067+0,ff2959+49,ff2024+100 */
}
.kallyas-button:hover{
background:#000000;
color:#000000;
}
a.kallyas-button
{
font-size:18px
}
.menu_img1:hover {
background:#000000;
color:#000000;
opacity: 0.5;
}
/*ADD SHADOWS OPTIONAL*/
/*You can delete this style*/
.centerflipcards{
width:100%;
height:295px;
text-align:center;
}
.clearfix{clear:both;}
.centerflipcards p{
font-family: '微軟正黑體', 'Arial', sans-serif;
font-size:13px;
margin-top:10px;
font-weight:700;
}
.button-box{
font-family: '微軟正黑體', 'Arial', sans-serif;
width: 100%;
position: relative;
transition: all 1s linear;
}
.button-box ul{
display: block;
list-style: none;
background: none;
}
.button-box ul li{
padding: 15px 25px;
background: none;
margin-bottom:5px;
transition: all 0.5s linear;
cursor: pointer;
font-family: sans-serif;
font-size: 16px;
color: #000;
/*	width:500px;*/
text-align:center;	
}
.button-box ul li.active{
background: #f8f8f8;
color: #000000;
border:1.1px solid #eeeeee;
}
.main .card {
color: #252a32;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 3px rgba(0, 0, 0, 0);
}
.main .card-image {
position: relative;
display: block;
width: 100%;
}
.main .card-image img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#product_h
{
opacity:1;
}
#product_h:hover
{     
opacity:1;
}
.snip1569 {
position: relative;
display: inline-block;
width: 100%;
color: #ffffff;
font-size: 14px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
background: none;
}
.snip1569 *,
.snip1569 *:before,
.snip1569 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1569 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1569 figcaption {
position: absolute;
top: 0px;
bottom: -5%;
left: 0px;
right: 0px;
background-color: rgba(10, 10, 10, 0.2);
/*   background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);*/
-webkit-transform: translateX(45%);
transform: translateX(45%);
opacity: 0;
border-radius:0px;
}
.snip1569 i {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 16px;
z-index: 1;
}

.custom-icon {
font-size: 1px; /* 设置图标的大小，可以根据需要调整 */
}
.snip1569 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1569:hover figcaption,
.snip1569.hover figcaption {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media only screen and (device-width: 1024px) and (device-height: 1366px)  and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:66px !important;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:38px !important;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (device-width: 1180px) and (device-height: 820px) {

.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:51px !important;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (device-width: 820px) and (device-height: 1180px) {

.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:58px !important;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (device-width: 1080px) and (device-height: 810px) {
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:43px !important;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (device-width: 810px) and (device-height: 1080px) {
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:56px !important;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:38px ;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:52px;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
@media (max-width: 480px) {
.snip1569 figcaption,
.snip1569 figcaption {
background-color: rgba(10, 10, 10, 0.1);
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1569 i {
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
right: 0px;
width: 20px;
margin-left:45px;
text-align: center;
color: #fff;
font-size: 12px;
padding: 3px 0;
border-radius:0px;
font-weight:bold;
}
}
/* #loadMore3_2 {*/
/*    padding-right:130px*/
/*}*/
/**/
/* #loadMore3_2:before {*/
/*    width: 100px*/
/*}*/
/* #loadMore3_2 {*/
/**/
/*    margin-top: 40px;*/
/*    color: #000000;*/
/**/
/*	font-size: 14px;*/
/* */
/*}*/
/**/
/* #loadMore3_2{*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    padding-right: 100px;*/
/*    -webkit-transition: padding .5s;*/
/*    transition:padding .5s*/
/*}*/
/**/
/* #loadMore3_2:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: 15px;*/
/*    width: 70px;*/
/*    height: 1px;*/
/*    background: #1c6ab0;*/
/*    z-index: 1;*/
/*    -webkit-transition: width .5s;*/
/*    transition:width .5s*/
/*}*/
/**/
/* #loadMore3_2:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    z-index: 0;*/
/*    top: 50%;*/
/*    right: 0;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    border: 13px*/
/*    solid #ecf0f4;*/
/*    border-radius: 50%;*/
/*    background: #1c6ab0;*/
/*    -webkit-box-sizing: content-box;*/
/*    box-sizing: content-box;*/
/*    -webkit-transform: translateY(-50%);*/
/*    transform:translateY(-50%)*/
/*}*/
/*.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 {*/
/*position: relative;*/
/*min-height: 1px;*/
/*padding-right: 10px;*/
/*padding-left: 10px;*/
/*}*/
/*.col-xs-1-5 {*/
/*width: 20%;*/
/*float: left;*/
/*}*/
/*@media (min-width: 768px) {*/
/*.col-sm-1-5 {*/
/*width: 20%;*/
/*float: left;*/
/*}*/
/*}*/
/*@media (min-width: 992px) {*/
/*.col-md-1-5 {*/
/*width: 20%;*/
/*float: left;*/
/*}*/
/*}*/
/*@media (min-width: 1200px) {*/
/*.col-lg-1-5 {*/
/*width: 20%;*/
/*float: left;*/
/*}*/
/*}*/
@media only screen and (max-width: 600px) {
.main .container-fluid2 {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
}
.button-box{
font-family: '微軟正黑體', 'Arial', sans-serif;
width: 100%;
position: relative;
transition: all 1s linear;
margin-top: -30px;
}
.button-box ul{
display: flex;
list-style: none;
margin-left: 15px;
}
.button-box ul li{
padding: 15px 25px;
background: #E8E8E8;
margin: 30px 0px;
transition: all 0.5s linear;
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
color: #000;
/*	width:500px;*/
text-align:center;
}
.button-box ul li.active{
background: #000;
color: #fff;
}
.button-box1{
margin-top: 0px;
font-family: '微軟正黑體', 'Arial', sans-serif;
margin-bottom: -30px;
height: 110px;
cursor: pointer;
box-shadow: 0px 10px 25px -20px rgba(255,255,255,1);
}
.button-box1 ul{
display: flex;
list-style: none;
width: 96%;
margin-left: 20px;	
}
.button-box1 ul li{
/*-- 置中對齊\ --*/
display: table;
margin: 0 auto;
/*-- end --*/
padding: 15px 20px;
transition: all 0.5s linear;
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
color: #fff;
}
.button-box1 ul li.active{
font-size: 18px;
color: #fff;
}
.button-box1 ul li:hover{
font-size: 18px;
color: #fff;
}
.button-box2{
font-family: '微軟正黑體', 'Arial', sans-serif;
width: 100%;
position: relative;
transition: all 1s linear;
margin-top: -30px;
margin-bottom: 0px;
}
.button-box2 ul{
display: flex;
list-style: none;
margin-left: 8px;
}
.button-box2 ul li{
background: none;
padding: 15px 25px;
margin: 30px 0px;
transition: all 0.5s linear;
cursor: pointer;
font-family: sans-serif;
font-size: 16px;
color: #000;
text-align:center;
}
.button-box2 ul li:hover{
background: #000000;
color: #fff;
}
.button-box2 ul li.active:hover{
background: #000000;
color: #fff;
}
.button-box2 ul li.active {
color: #000000;
/*background-color:#000000;*/
border-bottom: 0.5px solid #6b6b6b;
padding-bottom: 5px;
-webkit-transition: border-color 300ms linear;
transition: border-color 300ms linear;
font-weight: bold;
position: relative;
}
.button-box2 ul li.active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 30%;
height: 1px;
background: #000000; 
transition: width 300ms linear;
}
.button-box2  ul li.active:hover::after {
width: 100%;
background: #000000; 
}
#swiper_slide6,#swiper_slide7,#swiper_slide8,#swiper_slide9,#swiper_slide10,#swiper_slide11,#swiper_slide12,#swiper_slide13,#swiper_slide14{
font-family: '微軟正黑體', 'Arial', sans-serif;
width: 100%;
position: relative;
margin-top: -30px;
margin-bottom: 0px;
background: none;
padding: 15px 20px;
margin: 30px 0px;
cursor: pointer;
font-size: 14px;
color: #d7d7d7;
text-align:center;
}
/*.button-box2 ul li.active{*/
/*background: #000000;*/
/*color: #fff;*/
/*}*/
#swiper_slide6:hover,#swiper_slide7:hover,#swiper_slide8:hover,#swiper_slide9:hover,#swiper_slide10:hover,#swiper_slide11:hover,#swiper_slide12:hover,#swiper_slide13:hover,#swiper_slide14:hover{
background: none;
color: #000;
}
#swiper_slide6.active,#swiper_slide7.active,#swiper_slide8.active,#swiper_slide9.active,#swiper_slide10.active,#swiper_slide11.active,#swiper_slide12.active,#swiper_slide13.active,#swiper_slide14.active {
color: #000000;
/*background-color:#000000;*/
border-bottom: 0px solid #6b6b6b;
padding-bottom: 0px;
font-weight: bold;
font-size: 16px;
position: relative;
}
/*#swiper_slide6.active::after,#swiper_slide7.active::after,#swiper_slide8.active::after,#swiper_slide9.active::after,#swiper_slide10.active::after,#swiper_slide11.active::after,#swiper_slide12.active::after,#swiper_slide13.active::after,#swiper_slide14.active::after {*/
/*content: "";*/
/*position: absolute;*/
/*left: 0;*/
/*bottom: 0;*/
/*width: 30%;*/
/*height: 1px;*/
/*background: #000000; */
/*}*/
@media (max-width: 768px) {
.button-box2 ul{
display: block;
}
}
.box{
width: 30%;
height: 250px;
margin-left: 15px;
margin-bottom: 20px;
cursor: pointer;
box-shadow: 0px 10px 25px -20px rgba(255,255,255,1);
}
.box img{
width: 100%;
height: 100%
}
/*-- portfolio --*/
.filtr-item {
padding: 15px;
}
.filtr-item1 {
padding-bottom: 25px;
}
.filtr-item2 {
padding-bottom: 30px;
}
.filtr-item3 {
padding-bottom: 10px;
padding-left: 8px;
padding-right: 8px;
}
.filtr-item4 {
padding: 1px;
}
.hover {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hover .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.overlay i
{
position: relative;
top: 30%;
left: 0%;
font-size: 1.8em;
opacity: 1;
border-radius: 100%;
color: #ffffff;
transition: all .4s ease-in-out 0s
}
.hover img {
display: block;
position: relative;
}
.hover h4 {
font-family: '微軟正黑體', sans-serif;
bottom: -93%;
left: 0%;
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 16px;
padding: 0;
letter-spacing: 0px;
font-weight:400px;
}
@media (max-width: 768px) {
.hover h4 {
font-family: '微軟正黑體', sans-serif;
bottom: -30%;
left: 0%;
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 16px;
padding: 0;
letter-spacing: 0px;
font-weight:400px;
}
.overlay i
{
display:none
}
}
.hover .button.info {
font-family: '微軟正黑體', sans-serif;
display: inline-block;
text-decoration: none;
padding: 7px 14px;
color: #fff;
border: none;
background-color: #000000;
font-size: 1.1em;
outline:none;
font-weight: 300;
border-radius:100px;
width:120px;
}
.hover .button.info:hover {
-webkit-box-shadow: 0 0 5px #fff;
-moz-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
}
.ehover14 img{
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
border: 0px solid #ffffff;
}
.ehover14:hover img{
-ms-filter: brightness(1.4);
filter: brightness(1.4);
-webkit-filter: brightness(1.4);
}
.ehover14 .overlay {
-moz-opacity: 0;
opacity: 0;
width: 100%;
height: 300px;
left: 0%;
top: 0%;
border-radius:0px;
border: 0px solid #dcdcdc;
-webkit-transition: opacity 0.35s, transform 0.35s;
-moz-transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
padding: 3em 0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}
.ehover14:hover .overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.ehover14 .button  {
color:	#FFF;
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-moz-transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-150%,-400%,0);
-moz-transform: translate3d(-150%,-400%,0);
-o-transform: translate3d(-150%,-400%,0);
-ms-transform: translate3d(-150%,-400%,0);
transform: translate3d(-150%,-400%,0);
}
.ehover14 h4 {
background-color: rgba(10, 10, 10, 1);
color:	#FFF;
padding: 0.5em;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s, transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
-webkit-transform: translate3d(-50%,-40%,0);
-moz-transform: translate3d(-50%,-40%,0);
-o-transform: translate3d(-50%,-40%,0);
transform: translate3d(-50%,-40%,0);
-ms-transform: translate3d(-50%,-40%,0);
}
.ehover14:hover .button, .ehover14:hover h4{
-moz-opacity: 1;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.ehover14:hover .overlay{
-moz-opacity: 1;
opacity: 1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
/*-- Contact --*/
.contact { 
font-family: '微軟正黑體', sans-serif;
padding: 15px 0px;
color: #FFF;
position: relative;
}
.footer-nav {
margin-top: 20px;
}
.footer-nav ul li {
display: inline-block;
padding: 0 25px;
width:20%;
border-right: solid 1px #00B7C9;
border-right-style: dashed;
}
.footer-nav ul li a {
color: #D6D6D6;
}
.footer-nav ul li a:hover {
color: #00B7C9;
}
.footer-logo a {
margin: 0;
color: #6E6E6E;
}
.footer-nav ul li:nth-child(1) {
padding-left: 5px;
}
.footer-nav ul li:nth-child(3) {
border-right: none;
}
/*--//portfolio--*/
/*--//features--*/
label.tab-label-1 {
margin-left: 31%;
}
.myportfolio img.outer {
display: inline-block;
margin: 0 2px 4px 0;
width: 280px;
}
/*-- /portfolio --*/
/*-- contact-us --*/
/*-- Copyright --*/
.footer_footer
{
background-color:#f3f3f3
}
.copyright {
font-family: '微軟正黑體', serif;
font-weight: 600px;
color: #000000;
font-size: 14px;
text-align: left; 
padding-top: 0.5em;
padding-bottom: 1.5em;
}
.copyright p {
font-size: 16px;
color: #ffffff;
font-weight: 500;
}
.copyright a {
color: #1F9ED2;
}
.footer_footer hr {
border: 0.5px solid #e0e0e0;
}       
.copyright  a:hover {
color: #1F9ED2;
}
/*-- //Copyright --*/
p.p3{
padding:0;
display: inline-block;
color: #fff;
vertical-align: middle;
margin: -25px 0 0;
font-size:14px;
font-weight: 500;
}
p.p4 {
padding:0;
display:block;
color:#fff;
vertical-align: middle;
font-weight: 400;
font-size:14px;
margin: -47px 0 0 80px;
}
p.p5 {
padding:0;
display:block;
color:#fff;
vertical-align: middle;
font-weight: 400;
font-size:14px;
margin: -5px 0 0 80px;
}
p.p6{
font-family: '微軟正黑體', sans-serif;
padding:0;
display: inline-block;
color: #fff;
vertical-align: middle;
margin: -25px 0 0;
font-size:10px;
font-weight: 500;
text-align:justify
}
p.p7{
font-family: '微軟正黑體', sans-serif;
color: #fff;
font-size:12px;
font-weight: 500;
text-align:center
}
p.p8{
font-family: '微軟正黑體', sans-serif;
display: inline-block;
color: #808080;
vertical-align: middle;
font-size:10px;
font-weight: 500;
text-align:justify
}
p.p3 a , p.p4 a, p.p5 a {
text-decoration:none;
color:#fff;
}
i.glyphicon.glyphicon-envelope:hover ,p.p3 a:hover , p.p4 a:hover {
color:#df4914;
}
.contact-us iframe.googlemaps {
height:400px;
width: 100%;
margin-bottom: 2%;
}
/*-- /contact-us --*/
/*-- updates --*/
.our-updates {
padding:0em 0;
background: #f9f9fb;
}
.our-updates h3.text-center {
font-family: '微軟正黑體', sans-serif;
color:#000000;
font-size:30px;
font-weight:400;
line-height: 0px;
padding: 75px 0 20px;
text-transform:uppercase;
}
.our-updates p.text-center {
color:grey;
font-size:17px;
font-weight:500;
line-height: 0px;
padding: 10px 0 50px;
}
.our-testimonials {
margin:0;
padding:0 0 50px 0;
}
.our-testimonials h3.text-center {
font-family: '微軟正黑體', sans-serif;
color:grey;
font-size:30px;
font-weight:400;
line-height: 0px;
padding: 75px 0 20px;
text-transform:uppercase;
}
.our-testimonials p.text-center {
color:grey;
font-size:17px;
font-weight:500;
line-height: 0px;
padding: 10px 0 50px;
}
.update-row {
padding:10px 0;
}
.view2 {
width: 200px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
}
.view2 .mask2,.view2 {
width: 200px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view2 img {
display: block;
position: relative;
}
.view2 h4 {
font-family: '微軟正黑體', sans-serif;
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 15px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 40px 0 0 0;
}
.view2 p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 5px;
text-align: center;
}
.view2 a.info {
font-size: 12px;
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view2 a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.update-details {
margin-left: -5%;
}   
.update-details h4 {
color:#000;
font-size: 20px;
font-family: '微軟正黑體', sans-serif;
font-weight: 400;	
line-height:25px;
}
.update-details p {
color: grey;
font-size: 14px;
font-weight: 500;
word-spacing: 4px;
padding: 20px 0;
line-height:23px;	
}
.update-details a {
color:#df4914;
text-decoration:none;
}
.update-details a:hover { 
color:#ae380e;
}
/*-- /updates --*/
.popover-title { 
color:#000;
}
.cloud-tags {
margin-top: -2%;
}
.cloud-tags a {
padding:10px 15px;
background-color:#12197D;
color:#fff;
display: inline-block;
margin: 5px 5px 5px 0;
text-decoration:none;
}
.cloud-tags a:hover {
background-color:#0A17CE;
}
.post-tags img {
width:70px;
}
.post-tags a {
text-decoration:none;
}
.post-tags a p.p5:hover {
color:#F39A7C;
}
.post-tags a p.p5{
color:#FF4402;
line-height: 17px;
margin: -28% 0 0 35%;
font-size: 12px;
word-spacing: 3px;
}
.post-tags p.p6 {
color:#fff;
margin:0 0 0 34%;
line-height: 26px;
font-size: 11px;
word-spacing: 5px;
}
.post-tags div {
margin-bottom:30px;
}
.post-tags img , .post-tags p.p5  p.p6{
display:inline;
} 
/*-- sliding-animations --*/
/*-- Pop-up animation --*/
/*button {*/
/*	padding: 1em 2em;*/
/*	outline: none;*/
/*	font-weight: 600;*/
/*	border: none;*/
/*	color: #fff;*/
/*	background: #c94e50;*/
/*}*/
.button-wrap {
padding: 2.5em 0 0;
font-size: 1.25em;
}
button.trigger {
background: #c94e50;
color: #fff;
border: none;
}
.dialog,
.dialog__overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dialog {
position: fixed;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
pointer-events: none;
}
.dialog__overlay {
position: absolute;
z-index: 1;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
.dialog--open .dialog__overlay {
opacity: 1;
pointer-events: auto;
}
.dialog__content {
width: 50%;
max-width: 560px;
min-width: 290px;
background: #fff;
padding: 4em;
text-align: center;
position: relative;
z-index: 5;
opacity: 0;
}
.dialog--open .dialog__content {
pointer-events: auto;
}
/* Content */
.dialog h2 {
margin: 0;
font-weight: 400;
font-size: 2em;
padding: 0 0 2em;
margin: 0;
}
/*-- /Pop-up animation --*/
/*---- responsive-design -----*/
@media(max-width:1920px){
span.shortline1-1,span.shortline1-2 , span.shortline1-3 {
left: 28%;	
}
span.shortline2-1,span.shortline2-2 , span.shortline2-3 {
right:28%;	
}
span.longline1 , span.longline2 , span.longline3 {
left: 28%;
width: 846px;	
}
.banner-info p {
padding: 30px 533px;
}
.our-updates p.text-center {
word-spacing: 5px;
}
label.tab-label-1 {
margin-left: 35.5%;
}
}
@media (max-width: 1680px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 24%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 24%;
}
span.longline1 , span.longline2 , span.longline3 {
left: 24%;
width: 867px;
}
.banner-info p {
padding: 30px 390px;
}
label.tab-label-1 {
margin-left: 33.5%;
}
}
@media (max-width: 1600px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 23%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 23%;
}
span.longline1 , span.longline2 , span.longline3 {
left: 23%;
width: 857px;
}
.banner-info p {
padding: 30px 400px;
}
label.tab-label-1 {
margin-left: 33%;
}
}
@media (max-width: 1440px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 20%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 20%;
}
span.longline1 , span.longline2 , span.longline3 {
left: 20%;
width:855px;
}
.banner-info p {
padding: 30px 290px;
}
label.tab-label-1 {
margin-left: 31%;
}
}
@media (max-width: 1366px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 18%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 18%;
}
span.longline1, span.longline2, span.longline3 {
left: 18%;
width: 758px;
}
label.tab-label-1 {
margin-left: 30%;
}
}
@media (max-width: 1280px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 16%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 16%;
}
span.longline1, span.longline2, span.longline3 {
left: 16%;
width: 860px;
}
.banner-info p {
padding: 30px 270px;
}
label.tab-label-1 {
margin-left: 28.5%;
}
}
@media (max-width: 1080px) {
footer .footer-about ul.social-icons li a i.fa.fa-facebook {
padding: 9px 14px;	
}
footer .footer-about ul.social-icons li a i.fa.fa-twitter {
padding: 9px 11px;
}
footer .footer-about ul.social-icons li a i.fa.fa-linkedin {
padding: 8px 13px 11px;
}
footer .footer-about ul.social-icons li a i.fa.fa-google-plus {
padding: 9px 10px;
}
.nav-links .navbar-inverse .navbar-brand {
font-size: 25px;
font-weight: 500;
margin-left: -13%;
}
.nav-links ul.nav.navbar-nav.navbar-right {
margin-right: -7%;
}
.nav-links .navbar-nav>li>a {
padding: 30px 20px;
}
span.shortline1-1 , span.shortline2-1 {
top: 22.5%;
}
span.shortline1-2 , span.shortline2-2 {
top: 23.5%;
}
span.shortline1-3 , span.shortline2-3 {
top: 24.5%;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left:16%;
width:230px;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right:16%;
width:230px;
}
span.longline1, span.longline2, span.longline3 {
left:16%;
width: 724px;
}
span.longline1 {
top: 39%;
}
span.longline2 {
top: 40%;	
}
span.longline3 {
top: 41%;	
}
.banner-info h2 {
font-size: 30px;
font-weight: 400;
}
.banner-info h3 {
font-size: 20px;
}
.banner-info p {
padding: 30px 200px;
font-size: 14px;
}
.video iframe {
width:440px;
height:324px;
}
.about-us p.p1 {
font-size: 13px;
}
.about-us p.p2 {
font-size: 13px;
}
.content {
padding: 434px 0;
}
.contact-info i {
margin: 25px 20px 10px 0;
}
p.p4 { 
margin: -27px 0 0 53px;
}
.email-info p.p3 {
margin: -95px 0 0 53px;
}
.email-info p.p4 { 
margin: -46px 0 0 53px;
}
.update-details {
margin-left: 5%;
}
footer h3 {
font-size:20px;
}
.post-tags a p.p5 {
margin: -36% 0 0 40%;
}
.post-tags p.p6 {
margin: 0 0 0 26%;	
}
footer ul.nav.navbar-nav.navbar-right {
margin-right: 18%;
}
.update-details h4 { 
font-size:17px;
}
label.tab-label-1 {
margin-left: 24.5%;
}
footer .navbar p {
padding: 15px 0 0 198px;
}
}
@media (max-width: 1050px) {
label.tab-label-1 {
margin-left: 23.5%;
}
span.longline1, span.longline2, span.longline3 {
width: 705px;
}
.banner-info p {
padding: 30px 170px;
font-size: 13px;
}
}
@media (max-width: 1024px) {
.nav-links ul.nav.navbar-nav.navbar-right {
margin: 0 -4% 0 -5%;
}
label.tab-label-1 {
margin-left: 23%;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 15%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 15%;
}
span.longline1, span.longline2, span.longline3 {
width: 707px;
left:15%;
}
}
@media (max-width: 991px) {
.contact-details {
padding-bottom: 30px;
}
.contact-us {
padding-bottom:30px;
}
.cloud {
padding-bottom: 30px;
}
footer .footer-about h3 {
padding: 50px 0 20px;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 13%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 13%;
}
span.longline1, span.longline2, span.longline3 {
width: 719px;
left:13%;
}
.nav-links .navbar-inverse .navbar-brand {
margin-left: 0%;
}
.nav-links .navbar-inverse .navbar-brand {
font-size: 35px;
padding-top: 50px;
}
.nav-links .navbar-header {
margin-left: 26%;
}
.video iframe {
width: 730px;
height: 406px;
}
.about-us p.p1 {
font-size: 14px;
padding: 30px 0 0;
}
.about-us p.p2 {
font-size: 14px;
}
.social-store img.google {
margin-left: 22%;
}
label.tab-label-1 {
margin-left: 22.5%;
}
#googleMap {
margin:10% auto 10%;
}
.email-info p.p3 {
margin: -44px 0 0 0px;
}
.email-info p.p4 {
margin: -22px 0 0 53px;
}
.post-tags a p.p5 {
margin: -20% 0 0 29%;
}
.post-tags p.p6 {
margin: 0 0 0 30%;
}
footer ul.nav.navbar-nav.navbar-right {
margin-right: 10%;
}
footer .navbar p {
padding: 15px 0 0 71px;
}
.update-details {
margin-left: -17%;
}
}
@media (max-width: 900px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 10%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 10%;
}
span.longline1, span.longline2, span.longline3 {
left:10%;
}
.content {
padding: 576px 0;
}
.pignose-layerslider .slide-visual .script-wrap {
right:170px;	
}
.banner-info p {
padding: 30px 110px;
}
}
@media (max-width: 800px) {
.nav-links ul.nav.navbar-nav.navbar-right {
margin: 0 -2% 0 -5%;
}
label.tab-label-1 {
margin-left: 16%;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 5%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 5%;
}
span.longline1, span.longline2, span.longline3 {
width: 721px;
left:5%;
}
span.shortline1-1, span.shortline2-1 {
top: 27%; 
}
span.shortline1-2, span.shortline2-2 {
top: 28%; 
}
span.shortline1-3, span.shortline2-3 {
top: 29%; 
}
span.longline1 {
top: 46%;
}
span.longline2 {
top: 47%;
}
span.longline3 {
top: 48%;
}
.banner-info p {
padding: 30px 145px;
line-height: 20px;
}
.header {
height: 500px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:250px;
}
.nav-links .navbar-header {
margin-left: 25%;
}
}
@media (max-width: 768px) {	
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 4%;
width: 215px;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 4%;
width: 215px;
}
span.longline1, span.longline2, span.longline3 {
width: 693px;
left: 4%;
}
.banner-info p {
padding: 30px 80px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:290px;
}
label.tab-label-1 {
margin-left: 14%;
}
.contact-us p.text-center , .about-us p.text-center , .our-news p.text-center , .myportfolio p , .our-updates p.text-center {
font-size:15px;
}
.contact-details p {
font-size:13px;
}
}
@media (max-width: 736px) {
footer .footer-about ul.social-icons li a i.fa.fa-facebook {
padding: 13px 18px;
}
footer .footer-about ul.social-icons li a i.fa.fa-twitter {
padding: 13px 15px;
}
footer .footer-about ul.social-icons li a i.fa.fa-linkedin {
padding: 12px 16px 14px;
}
footer .footer-about ul.social-icons li a i.fa.fa-google-plus {
padding: 12px 14px;
}
footer .footer-about ul.social-icons {
text-align: center;
padding-bottom: 35px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
text-align:center;
}
.nav-links .navbar-header {
margin-left: 0%;
}
.nav-links .navbar-inverse .navbar-brand {
padding-top:25px;
}
.nav-links button.navbar-toggle {
}
.banner-info h3 {
font-size: 19px;
}
.banner-info h2 {
font-size: 25px;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 8%;
width: 180px;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 8%;
width: 180px;
}
span.longline1, span.longline2, span.longline3 {
width: 604px;
left: 8%;
}
span.longline1 {
top: 43%;
}
span.longline2 {
top: 44%;
}
span.longline3 {
top: 45%;
}
.banner-info p {
padding: 15px 80px 25px;
}
.top-bar button.navbar-toggle {
}
.video iframe {
width: 100%;
height: 382px;
}
label.tab-label-1 {
margin-left: 12%;
}
.contact-us p.text-center, .about-us p.text-center, .our-news p.text-center, .myportfolio p, .our-updates p.text-center {
font-size: 14px;
}
.post-tags a p.p5 {
margin: -10% 0 0 14%;
}
.post-tags p.p6 {
margin: 0 0 0 14%;
}
.pignose-layerslider .slide-visual .script-wrap {
right:320px;
}
footer ul.nav.navbar-nav.navbar-right {
margin-right: -3%;
}
footer .footer-about h3 {
padding: 45px 0 20px;
}
footer .footer-about p {
padding-bottom:20px;
}
footer .footer-about a {
top:80%;
}
.social-store img.google {
margin-left: 21%;
}
.contact-us iframe.googlemaps {
height: 285px;
}
}
@media (max-width: 667px) {
ul.top-contacts {
float: none;
margin-left: 90px;
}
ul.top-links  { 
float: none;
margin-left: 171px;
margin-top: 5px;	
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 5%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 5%;
}
span.longline1, span.longline2, span.longline3 {
width: 586px;
left: 5%;
}
.video iframe {
height:358px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:385px;
}
.banner-info p {
padding: 15px 30px 25px;
}
.social-store img.google {
margin-left: 17%;
}
label.tab-label-1 {
margin-left: 8%;
}
.contact-us h3 , .about-us h3 , .our-news h3.text-center , .myportfolio h3 , .our-updates h3.text-center {
font-size:25px;
}
}
@media (max-width:640px){
.banner-info h3 {
font-size: 18px;
}
.banner-info h2 {
font-size: 23px;
padding: 15px 0 30px;
}
.banner-info p {
padding: 15px 50px 25px;
}
.video iframe {
height: 343px;
}
.contact-us p.text-center, .about-us p.text-center, .our-news p.text-center, .myportfolio p, .our-updates p.text-center {
font-size: 13px;
}
label.tab-label-1 {
margin-left: 6%;
}
.myportfolio img {
width:260px;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 7%;
width:155px;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 7%;
width:155px;
}
span.longline1, span.longline2, span.longline3 {
width: 535px;
left: 7%;
}
span.longline1 {
top: 41%;
}
span.longline2 {
top: 42%;
}
span.longline3 {
top: 43%;
}
.myportfolio img.outer { 
width:260px;
}
.social-store img.google {
margin-left: 15%;
}
.content {
padding: 536px 0;
}
.update-details {
margin-left: -7%;
}
footer .navbar p {
padding: 15px 0 0 0px;
}
}
@media (max-width: 600px) {
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 5%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 5%;
}
span.longline1, span.longline2, span.longline3 {
width: 526px;
left: 5%;
}
.banner-info p {
padding: 15px 50px 25px;
font-size:12px;
}
.video iframe {
height: 321px;
}
.social-store img.google {
margin-left: 13%;
}
.pignose-layerslider .slide-visual .script-wrap {
right:440px;
}
label.tab-label-1 {
margin-left: 3%;
}
.myportfolio img.outer {
width: 245px;
}
.content {
padding: 506px 0;
}
}
@media (max-width: 568px) {
ul.top-contacts {
margin-left: 65px;
}
ul.top-links {
margin-left: 140px;
}	
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 2%;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 2%;
}
span.longline1, span.longline2, span.longline3 {
width: 529px;
left: 2%;
}
.banner-info p {
padding: 15px 30px 25px;
}
.video iframe {
height: 303px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:470px;
}
.tabs label {
font-size:12px;
}
label.tab-label-1 {
margin-left: 7.5%;
}
.myportfolio img.outer {
width: 230px;
}
.content {
padding: 476px 0;
}
.social-store img.google {
margin-left: 10.5%;
}
.post-tags a p.p5 {
margin: -12% 0 0 16%;
}
.post-tags p.p6 {
margin: 0 0 0 16%;
}
}
@media (max-width: 480px){
ul.top-contacts {
margin-left: 22px;
}
ul.top-links {
margin-left: 88px;
}
.header {
height: 350px;
}
.banner-info {
padding-top: 55px;
}
.banner-info h2 {
font-size: 19px;
}
.banner-info h3 {
font-size: 17px;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 {
left: 2%;
width:115px;
}
span.shortline2-1, span.shortline2-2, span.shortline2-3 {
right: 2%;
width:115px;
}
span.shortline1-1, span.shortline2-1 {
top: 58px;
}
span.shortline1-2, span.shortline2-2 {
top: 63px;
}
span.shortline1-3, span.shortline2-3 {
top: 68px;
}
span.longline1 {
top: 126px;
}
span.longline2 {
top: 131px;
}
span.longline3 {
top: 136px;
}
span.longline1, span.longline2, span.longline3 {
width: 444px;
left: 2%;
}
.banner-info p {
padding: 15px 10px 25px;
line-height: normal;
}
.contact-us h3, .about-us h3, .our-news h3.text-center, .myportfolio h3, .our-updates h3.text-center {
font-size: 20px;
}
.contact-us p.text-center, .about-us p.text-center, .our-news p.text-center, .myportfolio p, .our-updates p.text-center {
font-size: 12px;
}
.video iframe {
height: 253px;
}
.about-us p.p1 {
font-size: 12px;
word-spacing: 7px;
}
.about-us p.p2 {
font-size: 12px;
word-spacing: 7px;
}
.social-store img.google {
margin: 0 2px 0 13px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:608px;
}
.tabs label {
padding: 12px 12px;
margin-bottom: 25px;
}
label.tab-label-1 {
margin-left: 29px;
}
.myportfolio img.outer {
width: 185px;
}
.content {
padding: 385px 0;
}
.update-details {
margin-left: 12%;
}
.post-tags a p.p5 {
margin: -15% 0 0 21%;
}
.post-tags p.p6 {
margin: 0 0 0 21%;
}
footer .navbar p {
padding: 15px 65px 13px 0px;
}
footer .navbar-toggle {
margin-top:13px;
}
footer .footer-about p {
padding-bottom: 0px;
}
.image-gallery ,.cloud-tags {
text-align: center;
}
.contact-us iframe.googlemaps {
height: 260px;
}
}
@media (max-width: 414px) {
.top-bar {
text-align:center;	
}
ul.top-contacts {
margin-left: 0;
display:block;
}
ul.top-contacts li {
margin-right: 0px;	
padding-bottom:11px;
}
ul.top-links {
margin-left: -8px;
margin-top: 1px;
}
.nav-links .navbar-inverse .navbar-brand {
font-size: 30px;
padding: 25px 0;
}
.nav-links button.navbar-toggle {
}
.banner-info h3 {
font-size: 15px;
}
.banner-info h2 {
font-size: 16px;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3 , span.shortline2-1, span.shortline2-2, span.shortline2-3 {
width:90px;
}
span.longline1, span.longline2, span.longline3 {
width: 380px;
}
span.longline1 {
top: 121px;
}
span.longline2 {
top: 126px;
}
span.longline3 {
top: 131px;
}
.video iframe {
height: 216px;
}
.social-store img.google {
margin: 0 0px 0 0px;
width: 180px;
}
.social-store img.apple {
width:180px;
}
label.tab-label-1 {
margin-left: 12px;
}
.tabs label {
padding: 10px 8px;
}
.myportfolio img.outer {
width: 153px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:643px;
}
.content {
padding: 322px 0;
}
.view2 img , .view2 , .view2 .mask2, .view2 .content {
width:150px;
height:150px;
}
.view2 h4 {
margin-top:15px;
}
.update-details {
margin-left: 1%;
padding-bottom: 25px;
}
.update-details h4 {
font-size: 16px;
}
.update-details p {
font-size:13px;
padding:10px 0;
}
.post-tags a p.p5 {
margin: -19% 0 0 23%;
}
.post-tags p.p6 {
margin: 0 0 0 23%;
}
}
@media (max-width: 384px) {
.nav-links .navbar-inverse .navbar-brand {
font-size: 28px;
}
.banner-info h3 {
font-size: 14px;
}
.banner-info h2 {
font-size: 15px;
}
span.shortline1-1, span.shortline2-1 {
top: 34px;
}
span.shortline1-2, span.shortline2-2 {
top: 38px;
}
span.shortline1-3, span.shortline2-3 {
top: 42px;
}
span.longline1, span.longline2, span.longline3 {
width: 352px;
}
span.longline1 {
top: 93px;
}
span.longline2 {
top: 97px;
}
span.longline3 {
top:101px;
}
.banner-info a.btn.btn-default.btn-lg {
font-size:12px;
}
.video iframe {
height: 199px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:659px;
}
.social-store img.google , .social-store img.apple {
width: 165px;
}
.tabs label {
font-size: 11px;
}
label.tab-label-1 {
margin-left: 10px;
}
.myportfolio img.outer {
width: 138px;
}
.header {
height: 300px;
}
.banner-info {
padding-top: 30px;
}
.content {
padding: 292px 0;
}
.view2 img, .view2, .view2 .mask2, .view2 .content {
width: 130px;
height: 130px;
}
.update-details {
margin-left: -6%;
padding-bottom: 35px;
}
.update-details h4 {
font-size: 15px;
}
.update-details p {
font-size: 12px;
padding: 7px 0;
}
.view2 h4 {
margin-top: 7px;
font-size:13px;
}
.view2 a.info {
font-size: 10px;
}
.post-tags a p.p5 {
margin: -21% 0 0 23%;
}
footer .navbar p {
padding: 15px 60px 13px 0px;
}
}
@media (max-width: 375px) {
.video iframe {
height: 194px;
}
.social-store img.google , .social-store img.apple {
width: 160px;
}
span.longline1, span.longline2, span.longline3 {
width: 344px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:664px;
}
.myportfolio img.outer {
width: 280px;
}
.content {
padding: 1136px 0;
}
label.tab-label-1 {
margin-left: 5px;
}
}
@media (max-width: 320px) {
label.tab-label-1 {
margin-left: 2px;
}
.tabs label {
font-size: 10px;
padding: 10px 5px;
}
.nav-links .navbar-inverse .navbar-brand {
font-size: 22px;
}
.banner-info h2 {
font-size: 13px;
}
.banner-info h3 {
font-size: 13px;
}
.banner-info p {
padding: 6px 0px 20px;
font-size: 12px;
line-height: 16px;
}
span.shortline1-1, span.shortline2-1 {
top: 33px;
}
span.shortline1-2, span.shortline2-2 {
top: 37px;
}
span.shortline1-3, span.shortline2-3 {
top: 41px;
}
span.shortline1-1, span.shortline1-2, span.shortline1-3, span.shortline2-1, span.shortline2-2, span.shortline2-3 {
width: 65px;
}
span.longline1 {
top: 87px;
}
span.longline2 {
top: 91px;
}
span.longline3 {
top: 95px;
}
span.longline1, span.longline2, span.longline3 {
width: 292px;
}
.video iframe {
height: 163px;
}
.pignose-layerslider .slide-visual {
height: 340px;
}
.pignose-layerslider .slide-visual .script-wrap {
right:714px;
width: 245px;
height: 246px;
padding: 10px;
}
.script-wrap ul.script-group img{
width: 245px;
height: 246px;
}
.content {
padding: 915px 0;
}
.view2 h4 {
margin-top: 5px;
font-size: 11px;
}
.view2 p {
padding: 10px 5px 5px;
}
.update-details {
margin-left: 10%;
width: 100%;
}
.update-details h4 {
font-size: 14px;
margin-top: -3%;
}
.update-details p {
font-size: 11px;
padding: 7px 0;
}
.post-tags a p.p5 {
margin: -27% 0 0 30%;
}
.post-tags p.p6 {
margin: 0 0 0 31%;
}
footer .navbar p {
padding: 15px 0px 13px 0px;
}
footer .navbar-toggle { 
margin-right:5px;
}
footer .footer-about a {
top: 86%;
}
.social-store img.google, .social-store img.apple {
width: 135px;
}
.social-store img.google {
margin-left:-1px;
}
}