/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;text-decoration: none;}
article, aside, details, figcaption, figure, 
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
/* ---reset.css--- */

body {font-family:"微軟正黑體",'Open Sans', sans-serif ;color: #6d6d6d;margin: 0;padding: 0;
-webkit-text-size-adjust:none;}
.wrap{margin:0 auto;background-color: #fff;}


i{font-style: normal;}
h1{text-indent: -999%;font-size: 0;}
h2{margin: 0; font-weight: normal;font-size: 16px;line-height: 25px;padding: 10px;}
h3{float: left;font-size: 21px;margin: 0 0 0 10px;font-weight: bold;letter-spacing:0;}
h3 a{ color:#fff;}
h4{float: left;font-size: 16px;margin: 7px 0 0 5px;font-weight: normal;color:#fff; display:none;}
h5{font-size: 16px;color: #A6A6A6;font-weight: normal;margin: 4px 0 0 24px;}
h5 a{color: #A6A6A6;}
h6{margin:0;font-size: 25px;font-weight: normal;}
h7{margin:0;font-size: 15px;font-weight: normal;}
h8{margin:0;font-size: 19px;font-weight: normal;}

.top-top {position: fixed;top: 0;z-index: 9999;width: 100%;}
.top-top #TOP-MENU #logo .icon{font-size:19px; float:left;margin: -2px 0 0 7px;}
.top-top #TOP-MENU #logo .icon a{ color:#2A80AC;}
.Round{ width:28px; height:28px; border-radius:28px;background-color: rgb(125, 217, 255);float:left;margin: 3px 5px 0 2px;}
.fa-facebook{margin: 6px 0 0 8px;}
.fa-google{margin: 5px 0 0 6px;}
	
#TOP-MENU{display:block;width:100%;height:60px;position:relative;
background-color:#118AC8;background-image: url(../images/overlay.png);
background-position: top left,	center center;background-repeat: repeat,no-repeat;background-size: auto,cover;	}
	
#TOP-MENU #BTN{display:block;position:absolute;right:5px;top:8px;
    width: 43px;height: 43px;border: solid 1px #fff;
    border-radius: 4px;cursor: pointer;z-index: 2;box-sizing: border-box;}

/*#TOP-MENU #BTN:after {
    display: block;content: "≡";
    color:#fff;width: 100%;line-height:32px;
    font-size: 50px;/*text-align: center;position: absolute;top: 0; left: 2px;}*/
i.fa-bars {
    color: #fff;
    width: 100%;
    font-size: 33px;
    position: relative;
    left: 6px;
    top: 4px;
}

#TOP-MENU #logo{ padding: 15px 0 0 0;}

.top #side .icon{font-size:19px; float:left;margin: -2px 0 0 7px;}
.top #side .icon a{ color:#2A80AC;}
	
#NAV{width:100%;height:auto;display:none;}
#NAV ul{width:100%;height:auto;}
#NAV li{width:100%;float:none;}
#NAV li a{display: block;width: 95%;height: 51px;line-height: 50px;
padding:0 0 0 5%;	text-align: left;text-decoration: none;background-color: rgba(36, 44, 43, 0.95);
background-image: url(../images/overlay.png);
background-position: top left,	center center;background-repeat: repeat,no-repeat;background-size: auto,cover;	
color: #fff;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;
	border-top-color: #FFF;	border-right-color: #FFF;border-bottom-color: #FFF;	border-left-color: #FFF;}
#NAV li a:hover{border:1px solid #FFF;}


.wrap{width:100%;margin:0 auto;background-color: #fff; padding:60px 0 0 0;}
.warp-side{ float:left;width:100%;margin: 0 auto;
-moz-box-shadow:0;
-webkit-box-shadow:0;
box-shadow: 0;}

/*---------------------top---------------------*/
.top{ display:none;}
#logo{float:left;margin: 0;}



/*------------------header-----------------------*/
.header{float: left;width:100%;height:auto;background-color: #fff; margin:0;}

.header .pc{ display:none;width:100%;height: 120px;float: left;}
.header .mobile{display:block;width:100%;height:208px;float: left;}
#abgne_fade_pic {position: relative;}
#abgne_fade_pic img{ width:100%;}
#abgne_fade_pic a.ad {position: absolute;left: 0;/* 讓圖片疊在一起 */}
#abgne_fade_pic .control {
    position: relative;top:88%;left: 43%;width: 65px;margin: 0 auto;float: left; padding: 0;}
#abgne_fade_pic .ad .box{position: absolute;top: 30%;left: 9%;color: #fff;background-color:rgba(19, 26, 36, 0.57);
padding: 11px 7px;}	


#abgne_fade_pic-pc {position: relative;}
#abgne_fade_pic-pc img{ width:100%;}
#abgne_fade_pic-pc a.ad {position: absolute;left: 0;/* 讓圖片疊在一起 */}
#abgne_fade_pic-pc .control {
    position: relative;top:88%;left: 43%;width: 65px;margin: 0 auto;float: left; padding: 0;}
#abgne_fade_pic-pc .ad .box{position: absolute;top: 30%;left: 9%;color: #fff;background-color:rgba(19, 26, 36, 0.57);
padding: 11px 7px;}	


/*------------------content-----------------------*/
.content-index {
    float: left;
    width:100%;
    height: auto;
    background-color: #fff;
    margin:0 0 5px 0;
    padding: 0;
    border: 0px solid #ccc;}
.content {
    float: left;width: 100%;height: auto;
    background-color: #fff;margin: 10px 0;padding: 0;
    border: 0px solid #ccc;}
.content-index .SERVICES{ text-align:center; width:100%; display:block;margin: 10px 0 0 0;font-size: 23px;font-weight: normal; color:#fff;}

.column-mobile{float: left;width: 100%;padding: 20px 0;background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;}
.column-mobile ul li{float:left; text-align:center;margin:3px 0 0 0;padding: 0;}
.column-mobile ul #Project a { color: #fff;padding: 28px 19px;width: 115px;float: left;margin: 1px 2px;}
#Project a .services-icon{ width:70px; height:70px; border-radius:70px; border:2px solid #fff;margin: 0 0 10px 22px;}
.column-mobile ul #Project a p .fa.fa-recycle{ font-size:37px;margin: 19px 0 0 0;}

.column-pc{float: left;width: 100%;display:none}
.column-pc ul li {float: left;text-align: center;margin: 3px 0 0 3px;padding: 0;}

.column-pc ul #Project1 a{background-image: url(../images/column01.jpg);height:94px;width: 320px; display:block; text-indent:-9999px;}
.column-pc ul #Project2 a{background-image: url(../images/column02.jpg);height:94px;width: 320px; display:block; text-indent:-9999px;}
.column-pc ul #Project3 a{background-image: url(../images/column03.jpg);height:94px;width: 320px; display:block; text-indent:-9999px;}
.column-pc ul #Project4 a{background-image: url(../images/column04.jpg);height:94px;width: 320px; display:block; text-indent:-9999px;}
.column-pc ul #Project5 a{background-image: url(../images/column05.jpg);height:94px;width: 320px; display:block; text-indent:-9999px;}
.column-pc ul #Project6 a{background-image: url(../images/column06.jpg);height:94px;width: 320px; display:block; text-indent:-9999px;}


.column-pc ul #Project1 a:hover{background-image: url(../images/column01-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column-pc ul #Project2 a:hover{background-image: url(../images/column02-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column-pc ul #Project3 a:hover{background-image: url(../images/column03-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column-pc ul #Project4 a:hover{background-image: url(../images/column04-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column-pc ul #Project5 a:hover{background-image: url(../images/column05-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column-pc ul #Project6 a:hover{background-image: url(../images/column06-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}



/* 隱藏連結文字 */
#abgne_fade_pic .control a {
    font-size: 1px;float: left; display:block; text-indent:-9999px;
    text-align: center;border-radius:3px;
    background-color: #ccc; color:#ccc;
    padding: 3px;margin: 5px 3px;width:3px; height:3px;}
#abgne_fade_pic .control a:hover {background-color:#005784;}
#abgne_fade_pic .control .on{background-color:#0085CA;}


/*main*/
.main{float: left;width:100%;height:auto;margin: 5px 0 0 0;}
#sidebar{float: left;width:100%; display:none;}
#sidebar ol li{padding:8px 5px;margin: 5px 5px;color:#0096d6;font-weight:bolder;
-webkit-border-radius: 3px;border: 1px solid #A6A6A6; color:#0096d6;background-color:#fff;
-moz-border-radius: 3px;border-radius: 3px;}

#sidebar ol li img{ position: relative; top:1px;width: 20px;}
#sidebar ol li b{ position: relative; top:-3px;}
#sidebar ol #side-green b{position: relative; top:0px;}
#sidebar ol #side-blue b a{color:#0096d6;}

#side-oran{border: 1px solid #A6A6A6; color:#0096d6;background-color:#fff;}
#side-green{border: 1px solid #A6A6A6; color:#0096d6;background-color:#fff;}

#about{    float: left;
    width: 90%;
    padding: 10px;
    margin: 0 5px;
    border: 1px solid #A6A6A6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: auto;}

#company{    float: left;
    width: 90%;
    padding: 10px;
    margin:5px 5px 0 5px;
    border: 1px solid #A6A6A6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: auto;}

#title .fa.fa-plus-square{color:#18B4BC;}


#about #title{color:#0096d6;border-bottom: 1px solid #0096d6;padding: 0 0 7px 0;}
#company #title{color:#0096d6;border-bottom: 1px solid #0096d6;padding: 0 0 7px 0;}

#more a{background-color: #0096d6;color: #fff; font-style: normal;
    font-size: 12px; padding: 4px 6px 6px 6px;
    float: right;  margin: -5px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#more a:hover{background-color: #FF6633;
	-o-transition: background-color .20s linear;
	-webkit-transition: background-color .20s linear;
	-moz-transition: background-color .20s linear;
	transition: background-color .20s linear;}



/*------------------footer---------------------*/
#index{position:relative; bottom:0;}
	
.footer{width:100%;height:auto;/*position:fixed; bottom:0;*/
padding:2px 0;text-align: center;color: #fff;font-size: 13px;float: left;background-color: #00375d;
background-image: url(../images/overlay.png);
background-position: top left,	center center;
    background-repeat: repeat,	no-repeat;
    background-size: auto,	cover;}

.foot{width:100%;height:auto;margin:0 auto;font-size: 16px;}

#foot-nav{text-align: center;padding: 10px 0; display:none;}
#foot-nav ul{}
#foot-nav ul li{margin: 0;display: inline; border-left: #fff 0px solid;float: left;
    padding: 5px 0;width: 33%;}
#foot-nav ul li:first-child{ border-left:none;}
#foot-nav ul li a{color: #fff;}
#foot-nav ul li a:hover{color:#0BB7FF;}



.block_title-ant a::before {
    background-color: #00405B;
    color: #fff;
    content: "";
    font-size: 9px;
    font-style: italic;
    height: 44px;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0px;width: 10px;}
.block_title-ant a{
    background-color: #0096d6; color: #fff; padding-left: 35px;}
.block_title-ant a{font-weight: bolder;position: relative;}

/*----- footer資料內容等等 -----*/
#service .mobile{ width:50%; float:left; margin:2px 0;}
#service .fax{width:50%; float:left;margin:2px 0;}
#service .line{width:50%; float:left;margin:2px 0;}
#service .wechat{width:50%; float:left;margin:2px 0;}
#service .address{width:100%; float:left;margin:2px 0;display:none;}

#service{width:100%;float: left; margin:5px 0 0 0;font-size: 16px;}
#service a{ color:#fff;}

#copyright{width:100%;float: left;margin:5px 0;font-size: 16px;}
#copyright a{color: #fff;}
#copyright a:hover{color:#0BB7FF;}
.design{ display:none;color: #fff;}

@media screen and (min-width:360px){
#about {float: left;width: 91.4%;}
#company {float: left;width: 91.4%;}
.column ul li { margin: 3px 0 0 20px;}
#abgne_fade_pic {height: 234px;}
#abgne_fade_pic .control {top: 208px;}
.column-mobile ul #Project a {margin: 1px 11px;}	
}


@media screen and (min-width:375px){
#abgne_fade_pic {height: 244px;}
#about {float: left;width: 91.4%;}
#company {float: left;width: 91.4%;}
.column ul li { margin: 3px 0 0 30px;}
#abgne_fade_pic .control {top: 215px;}
.column-mobile ul #Project a {margin: 1px 15px;}
}

@media screen and (min-width: 414px){
#abgne_fade_pic {height: 270px;}
#abgne_fade_pic .control {top: 245px; left:45%;}
.column ul li { margin: 3px 0 0 47px;}
#about {float: left;width: 92.4%;}
#company {float: left;width: 92.4%;}
.column-mobile ul #Project a {margin: 1px 25px;}
}

@media screen and (min-width: 480px){

#abgne_fade_pic {height: 312px;}
#abgne_fade_pic .control {top: 285px;left: 45%;}
.column ul li { margin: 3px 0 0 80px;}
#about {float: left;width: 93.4%;}
#company {float: left;width: 93.4%;}
.column-mobile ul #Project a {margin: 1px 41px;}
}

@media screen and (min-width: 600px){
h6{margin:0;font-size: 41px;font-weight: normal;}
h7{margin:0;font-size: 29px;font-weight: normal;}
h8{margin:0;font-size: 33px;font-weight: normal;}

#abgne_fade_pic {height:391px;}
#abgne_fade_pic .control {top: 345px;left: 46.5%;}
.column ul li { margin: 0;}
#about {float: left;width: 94.5%;}
#company {float: left;width: 94.5%;}
.column ul #Project1 a{width: 300px;}
.column ul #Project2 a{width: 300px;}
.column ul #Project3 a{width: 300px;}
.column ul #Project4 a{width: 300px;}
.column ul #Project5 a{width: 300px;}
.column ul #Project6 a{width: 300px;}
.column-mobile ul #Project a {margin: 1px 22px;}
#copyright {margin: 15px 0;font-size: 14px;}
#service {font-size: 16px;margin: 10px 0 0 0;}
}

@media screen and (min-width: 640px){
	
/*----電腦版bn-----*/
.header .pc{ display:block;}
.header .mobile{ display:none;}

#abgne_fade_pic-pc {height: 208px;}
#abgne_fade_pic-pc .control {top: 182px;left: 47%;}
#abgne_fade_pic-pc .control a {
    font-size: 1px;float: left; display:block; text-indent:-9999px;
    text-align: center;border-radius:3px;
    background-color: #ccc; color:#ccc;
    padding: 3px;margin: 5px 3px;width:3px; height:3px;}
#abgne_fade_pic-pc .control a:hover {background-color:#005784;}
#abgne_fade_pic-pc .control .on{background-color:#0085CA;}


.column ul li { margin: 0;}
#about {float: left;width: 95.0%;}
#company {float: left;width: 95.0%;}
.column ul #Project1 a{width: 320px;}
.column ul #Project2 a{width: 320px;}
.column ul #Project3 a{width: 320px;}
.column ul #Project4 a{width: 320px;}
.column ul #Project5 a{width: 320px;}
.column ul #Project6 a{width: 320px;}

.column-mobile ul #Project a {margin: 1px 29px;}

}

@media screen and (min-width: 768px){
#abgne_fade_pic-pc {height: 250px;}
#abgne_fade_pic-pc .control {top: 225px;left: 47%;}
.column ul li { margin: 4px; padding:0;}
#about {float: left;width: 95.8%;}
#company {float: left;width: 95.8%;}
.column {float: left;width: 86%;padding: 0 54px;}
.column ul #Project1 a{width: 321px;}
.column ul #Project2 a{width: 321px;}
.column ul #Project3 a{width: 321px;}
.column ul #Project4 a{width: 321px;}
.column ul #Project5 a{width: 321px;}
.column ul #Project6 a{width: 321px;}
.column-mobile ul #Project a {margin: 1px;padding: 28px 5px;}
#Project a .services-icon {margin: 0 0 10px 21px;}
h2 {padding: 22px;}
}

@media screen and (min-width: 800px){
#abgne_fade_pic-pc {height: 260px;}
#abgne_fade_pic-pc .control {top: 225px;left: 47%;}
.column-mobile ul #Project a {padding: 28px 8px;}
.column ul li { margin: 4px; padding:0;}
#about {float: left;width: 96.0%;}
#company {float: left;width: 96.0%;}
.column {float: left;width: 83%;padding: 0 68px;}
#foot-nav ul li {padding: 5px 0;width: 16%;}
}


@media screen and (min-width: 1024px){
#TOP-MENU{display:none;}	
#NAV{display:none;}

.top{width:100%;margin:0 auto;color:#fff;float: left; padding:12px 0; display:block;
background-color:#118AC8;background-image: url(../images/overlay.png);
background-position: top left,	center center;
    background-repeat: repeat,	no-repeat;
    background-size: auto,	cover;}
.top #side{width:1024px;margin:0 auto;}

#menu{ float:right; font-size:14px;margin: 0;}
#menu ul li{float:left; text-align:center;height: 25px;
    width: 130px;border-left: rgba(238, 238, 238, 0.52) 1px solid;}
#menu ul li a{ color:#fff; display:block;padding: 6px;}
#menu ul li a:hover{ background-color:#0bb7ff;
     -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    transition:  background-color .25s linear;}
#menu ul li:first-child{ border-left:none;}

#abgne_fade_pic-pc {height: 370px;}
#abgne_fade_pic-pc .control {top: 340px;left: 47%;}


.column-pc{float: left;width: 95%;display:block;padding: 0 25px;}
.column-mobile{ display:none;}

.column ul li { margin:5px 10px; padding:0;}
#about {float: left;width: 44.8%;height: 325px;margin: 10px 5px 0 27px;}
#company {float: left;width: 44.8%;height: 325px;margin: 10px 5px 0 0;}

.column {float: left;width: 100%;padding: 0;}
#foot-nav ul li {padding: 5px 0;width: 16%;}
.content-index { margin: 0 0 15px 0;}


/*----- footer資料內容等等 -----*/
.foot {font-size: 13px;}
#service{width:100%;float: left; margin:5px 0 0 0;font-size: 13px;}
#service a{ color:#fff;}
#service .mobile{ width:13%; float:left; margin:2px 0 0 135px;}
#service .fax{width:13%; float:left;margin:2px 0;}
#service .line{width:13%; float:left;margin:2px 0;}
#service .wechat{width:13%; float:left;margin:2px 0;}
#service .address{width:22%; float:left;margin:2px 0;display:block;}

#copyright{width:43%;float: left;margin:5px 0 5px 157px;font-size: 13px;text-align: left;}
#copyright a{color: #fff;}
#copyright a:hover{color:#0BB7FF;}
.design{display:block;width:31%;float: left;margin:5px 0;font-size: 13px;text-align: left;}
.design a{color: #fff;}
.design a:hover{color:#0BB7FF;}

#foot-nav{text-align: center; padding: 10px 0 5px 0; display:block;}
#foot-nav ul{}
#foot-nav ul li{margin-left: 5px;display: inline; border-left: #fff 1px solid; padding:0 0 0 6px;width: 8%;
    float: none;}
#foot-nav ul li:first-child{ border-left:none;}
#foot-nav ul li a{color: #fff;}
#foot-nav ul li a:hover{color:#0BB7FF;}

}

@media screen and (min-width: 1200px){
h2 { padding: 15px 22px;}
.wrap{width:1024px;margin:0 auto;background-color: #fff;}
.warp-side{ float:left;width:1024px;margin: 0 auto;
-moz-box-shadow:0px 0px 10px rgba(3, 3, 5, 0.05),0px 0px 10px rgba(3, 3, 5, 0.42),0px 0px 5px rgba(3, 3, 5, 0);
-webkit-box-shadow:0px 0px 10px rgba(3, 3, 5, 0.05),0px 0px 10px rgba(3, 3, 5, 0.42),0px 0px 5px rgba(3, 3, 5, 0);
box-shadow: 0px 0px 10px rgba(3, 3, 5, 0.05),0px 0px 10px rgba(3, 3, 5, 0.42),0px 0px 5px rgba(3, 3, 5, 0);}

/*---------------------top---------------------*/
.top{width:100%;margin:0 auto;color:#fff;float: left; padding:12px 0; display:block;
background-color:#118AC8;background-image: url(../images/overlay.png);
background-position: top left,	center center;
    background-repeat: repeat,	no-repeat;
    background-size: auto,	cover;}
.top #side{width:1024px;margin:0 auto;}


#logo{float:left;margin: 0;}

#menu{ float:right; font-size:14px;margin: 0;}
#menu ul li{float:left; text-align:center;height: 31px;
    width: 130px;border-left: rgba(238, 238, 238, 0.52) 1px solid;}
#menu ul li a{ color:#fff; display:block;padding: 6px;}
#menu ul li a:hover{ background-color:#0bb7ff;
     -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    transition:  background-color .25s linear;}
#menu ul li:first-child{ border-left:none;}


#TOP-MENU{ display:none;}
#NAV{ display:none;}


/*------------------header-----------------------*/
.header{float: left;width:1024px;height:auto;background-color: #fff; margin:0px 0 0 0;}

/*------------------content-----------------------*/
.content-index {
    float: left;
    width:96%;
    height: auto;
    background-color: #fff;
    margin: 0 0 0 0;
    padding: 0 20px 10px 20px;
    border: 0px solid #ccc;}
.content {
    float: left;
    width: 944px;
    height: auto;
    background-color: #fff;
    margin: 10px 0;
    padding: 0 40px 180px 40px;
    border: 0px solid #ccc;}

.content-map { margin:10px 0 0 0; padding: 20px 40px 8px 40px;}

.column-pc {width: 100%;padding: 0 8px;}
.column{float: left;width: 100%;padding: 0 0px;}
.column ul{}
.column ul li{float:left; text-align:center;margin: 3px;padding: 0;}
.column ul #Project1 a{background-image: url(../images/column01.jpg);height:94px;width: 321px; display:block; text-indent:-9999px;}
.column ul #Project2 a{background-image: url(../images/column02.jpg);height:94px;width: 321px; display:block; text-indent:-9999px;}
.column ul #Project3 a{background-image: url(../images/column03.jpg);height:94px;width: 321px; display:block; text-indent:-9999px;}
.column ul #Project4 a{background-image: url(../images/column04.jpg);height:94px;width: 321px; display:block; text-indent:-9999px;}
.column ul #Project5 a{background-image: url(../images/column05.jpg);height:94px;width: 321px; display:block; text-indent:-9999px;}
.column ul #Project6 a{background-image: url(../images/column06.jpg);height:94px;width: 321px; display:block; text-indent:-9999px;}

.column ul #Project1 a:hover{background-image: url(../images/column01-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column ul #Project2 a:hover{background-image: url(../images/column02-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column ul #Project3 a:hover{background-image: url(../images/column03-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column ul #Project4 a:hover{background-image: url(../images/column04-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column ul #Project5 a:hover{background-image: url(../images/column05-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}
.column ul #Project6 a:hover{background-image: url(../images/column06-hover.jpg);
-o-transition: background-image.20s linear;-webkit-transition: background-image .20s linear;
-moz-transition: background-image .20s linear;transition:  background-image .20s linear;}

#abgne_fade_pic {width:1024px;height:332px;float: left;position: relative;}
#abgne_fade_pic a.ad {position: absolute;left: 0;/* 讓圖片疊在一起 */}
#abgne_fade_pic .control {
    position: relative;
    top: 333px;left: 50%;
    width: 65px;
    margin: 0 auto;
    float: left;
    padding: 0;}

/* 隱藏連結文字 */
#abgne_fade_pic .control a {
    font-size: 1px;float: left; display:block; text-indent:-9999px;
    text-align: center;border-radius:3px;
    background-color: #ccc; color:#ccc;
    padding: 3px;margin: 5px 3px;width:3px; height:3px;}
#abgne_fade_pic .control a:hover {background-color:#005784;}
#abgne_fade_pic .control .on{background-color:#0085CA;}


/*main*/
.main{float: left;width:1024px;height:auto;margin: 8px 0 0 0;}
#sidebar{float: left;width:15%;}
#sidebar ol{}
#sidebar ol li{padding:8px 5px;margin: 5px 5px;color:#0096d6;font-weight:bolder;
-webkit-border-radius: 3px;border: 1px solid #A6A6A6; color:#0096d6;background-color:#fff;
-moz-border-radius: 3px;
border-radius: 3px;}

#sidebar ol li img{ position: relative; top:1px;width: 20px;}
#sidebar ol li b{ position: relative; top:-3px;}
#sidebar ol #side-green b{position: relative; top:0px;}

#side-oran{border: 1px solid #A6A6A6; color:#0096d6;background-color:#fff;}
#side-green{border: 1px solid #A6A6A6; color:#0096d6;background-color:#fff;}

#about{float: left;width:44.3%;padding: 10px;margin: 5px 4px 5px 11px;border:1px solid #A6A6A6;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;height: 325px;}

#company{float: left;width:45%;padding: 10px 10px 10px 10px;margin: 5px 0px  5px 5px;border:1px solid #A6A6A6;
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;height: 325px;}

#title .fa.fa-plus-square{color:#18B4BC;}


#about #title{color:#0096d6;border-bottom: 1px solid #0096d6;padding: 0 0 7px 0;}
#company #title{color:#0096d6;border-bottom: 1px solid #0096d6;padding: 0 0 7px 0;}

#more a{background-color: #0096d6;
    color: #fff;
    font-style: normal;
    font-size: 12px;
    padding: 4px 6px 6px 6px;
    float: right;
    margin: -5px;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
#more a:hover{
	background-color: #FF6633;
	-o-transition: background-color .20s linear;
	-webkit-transition: background-color .20s linear;
	-moz-transition: background-color .20s linear;
	transition: background-color .20s linear;
}

/*關於星羽*/
.main-content-about{float: left;width:100%; margin:0 0 10px 0;}

.main-content-about p{ font-size:15px;margin: 0 0 10px 5px; line-height:21px;}
.main-content-about img{ border-radius:5px; padding:2px;}

.font{    font-size: 16px;
    line-height: 27px;
    margin: 0 0 10px 0;
    float: left;    width: 100%;
    padding: 10px;}
.main-content p #ph-pic{}

/*左邊邊攔*/
.column-sidebar{float: left;width:16%;margin: 0 0 20px 0;}
.column-sidebar #title{color:#0096d6;border-bottom: 1px solid #0096d6;padding: 0 0 7px 0; font-size:16px;    margin: 9px 0 0px 0px;font-weight:bolder;
}
.column-sidebar ul{font-size:15px;}

.column-sidebar ul li{margin:0;border:0px; }

.column-sidebar ul li a{
	margin:5px 0 0 0;text-align:center;background-color: #0096d6;color:#fff; float:left;
	margin: 5px 0 0 0; padding: 10px 21px;width: 110px;
/* box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3) inset;*/
}
.column-sidebar ul li a:hover{background-color:#067593;
-o-transition: background-color .25s linear;-webkit-transition: background-color .25s linear;
	-moz-transition: background-color .25s linear;transition: background-color .25s linear;}
.column-sidebar ul li img{ position: relative; top:0px;width: 19px;}

.column-sidebar ul #Project{font-weight:bolder;}

#active a{background-color:#067593;}
#Pj{ position:relative;left: -18px;}
.fa-chevron-right{padding: 0 2px 0 3px;}


/*資源左邊邊攔*/
.column-sidebar-Project{float: left;width:16%;margin: 0 0 20px 0;}
.column-sidebar-Project #title{color:#0096d6;border-bottom: 1px solid #0096d6;padding: 0 0 7px 0; font-size:16px;    margin:16px 0 0px 0px;font-weight:bolder;
}
.column-sidebar-Project ul{font-size:15px;}

.column-sidebar-Project ul li{margin:0;border:0px; }

.column-sidebar-Project ul li a {
    margin: 5px 0 0 0;
    padding: 12px 21px;
    text-align: left;
    background-color: #0096d6;
    color: #fff;
    float: left;
    width: 110px;}
	
.column-sidebar-Project ul li a:hover{background-color:#067593;
-o-transition: background-color .15s linear;-webkit-transition: background-color .15s linear;
	-moz-transition: background-color .15s linear;transition: background-color .15s linear;}
.column-sidebar-Project ul li img{ position: relative; top:0px;width: 19px;}

.column-sidebar-Project ul #Project{font-weight:bolder;}

#Pj-Project {position: relative;left: -3px;}


.main-content {float: left;width: 750px;height: 300px;
    margin: 0;padding: 0 0 0 40px;}
	
#project1{height: 630px;}
#project2{height: 350px;}
#project3{height: 503px;}
#project4{height: 528px;}
#project5{height: 402px;}
#project6{height: 402px;}
#about-cont{height:296px;}
#infor-cont{height: auto;}
#infor-cont img {
    border-radius: 15px;
    padding: 8px;
    width: 250px;}

.main-content #title{color: #fff;
    border-bottom: 0px solid #00C2BC;
    background-color: #A6A6A6;
    padding: 10px 10px;
    font-size: 19px;
    margin: 0 5px 5px 7px;
    width: 98%;
    float: left;background-image: url(../images/overlay.png);
background-position: top left,	center center;
    background-repeat: repeat,	no-repeat;
    background-size: auto,	cover;}
.main-content p{font-size: 16px;line-height: 27px;margin: 0;float: left; width: 100%;padding: 10px;}
.main-content img {
    border-radius: 15px;
    padding: 8px;
    width: 130px;}


/*----- footer資料內容等等 -----*/
.foot { width: 1024px;margin: 0 auto;}
#service { width: 100%; margin:0 0;}
#service .mobile{ width:13%; float:left; margin:2px 0 0 135px;}
#service .fax{width:13%; float:left;margin:2px 0;}
#service .line{width:13%; float:left;margin:2px 0;}
#service .wechat{width:13%; float:left;margin:2px 0;}
#service .address{width:22%; float:left;margin:2px 0;display:block;}


/*新增加的邊攔*/

.block_title a::before {
    background-color: #00405B;
    color: #fff;
    content: "";
    font-size: 9px;
    font-style: italic;
    height: 44px;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0px;width: 10px;
}
.block_title a{
    background-color: #0096d6;
    color: #fff;
    padding-left: 35px;
}
.block_title a{
    font-weight: bolder;
    position: relative;}

.fa-recycle:before {
    content: "\f1b8";
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.block_title-ant a::before {
    background-color: #00405B;
    color: #fff;
    content: "";
    font-size: 9px;
    font-style: italic;
    height: 40px;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0px;width: 10px;
}
.block_title-ant a{
    background-color: #0096d6;
    color: #fff;
    padding-left: 35px;
}
.block_title-ant a{
    font-weight: bolder;
    position: relative;}
}

@media screen and (min-width: 1920px){
#index {
    position:relative;top:0px;bottom: 0;padding: 30px 0 120px 0;}

}


/* Scroll To Top */

.scroll-to-top {
	position: fixed;
	right: 15px;
	bottom: 50px;
	font-size: 1.15em;
	height: 40px;
	width: 40px;
	background-color: #3498db;
	line-height: 38px;
	color: #ffffff;
	text-align: center;
	opacity: .9;
	cursor: pointer;
    z-index: 5;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.scroll-to-top:hover {opacity: 1;}

.fa-chevron-up{ position:relative;top:10px;}