body
{
	margin: 0;
	padding: 0;
	color: #555;
	font: normal 10pt '微軟正黑體','Microsoft JhengHei',Arial,Helvetica,sans-serif;
	background: #EFEFEF;
}

#page
{
	margin-top: 0px;
	margin-bottom: 0px;
	background: white;
	border: 0;
}

#header
{
	margin: 0;
	padding: 0;
	border-top: 0px solid #C9E0ED;
}

#content
{
    
    padding: 0px;
    background: white;
}

#sidebar
{
	padding: 20px 20px 20px 0;
}

#footer
{
	padding: 10px;
	margin: 10px 20px;
	font-size: 0.8em;
	text-align: center;
	border-top: 1px solid #C9E0ED;
}
.even_rows_clr{
    display: none;
    clear: both;
}
#logo
{
	padding: 10px 20px;
	font-size: 200%;
}

#mainmenu
{
	
}

#mainmenu ul
{
	padding:6px 20px 5px 20px;
	margin:0px;
}

#mainmenu ul li {
    display: inline;
    border-right: 1px solid #e380ff;
    padding: 0 10px;
}
#mainmenu ul li:last-child{
border:0;
}
#mainmenu ul li a
{
	color:#e380ff;
	background-color:transparent;
	text-transform: uppercase;
	font-size:18px;
	font-weight:normal;
	text-decoration:none;
	padding:5px 10px;
}

#mainmenu ul li a:hover, #mainmenu ul li.active a
{
	color: white;
	text-decoration:none;
}

div.flash-error, div.flash-notice, div.flash-success
{
	padding:.8em;
	margin-bottom:1em;
	border:2px solid #ddd;
}

div.flash-error
{
	background:#FBE3E4;
	color:#8a1f11;
	border-color:#FBC2C4;
}

div.flash-notice
{
	background:#FFF6BF;
	color:#514721;
	border-color:#FFD324;
}

div.flash-success
{
	background:#E6EFC2;
	color:#264409;
	border-color:#C6D880;
}

div.flash-error a
{
	color:#8a1f11;
}

div.flash-notice a
{
	color:#514721;
}

div.flash-success a
{
	color:#264409;
}

div.form .rememberMe label
{
	display: inline;
}

div.view
{
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #C9E0ED;
}

div.breadcrumbs
{
	font-size: 0.9em;
	padding: 5px 20px;
}

div.breadcrumbs span
{
	font-weight: bold;
}

div.search-form
{
	padding: 10px;
	margin: 10px 0;
	background: #eee;
}

.portlet
{

}

.portlet-decoration
{
	padding: 3px 8px;
	background: #B7D6E7;
	border-left: 5px solid #6FACCF;
}

.portlet-title
{
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	margin: 0;
	color: #298dcd;
}

.portlet-content
{
	font-size:0.9em;
	margin: 0 0 15px 0;
	padding: 5px 8px;
	background:#EFFDFF;
}

.portlet-content ul
{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.portlet-content li
{
	padding: 2px 0 4px 0px;
}

.operations
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.operations li
{
	padding-bottom: 2px;
}

.operations li a
{
	font: bold 12px Arial;
	color: #0066A4;
	display: block;
	padding: 2px 0 2px 8px;
	line-height: 15px;
	text-decoration: none;
}

.operations li a:visited
{
	color: #0066A4;
}

.operations li a:hover
{
	background: #80CFFF;
}
.index_row {
	min-height: 200px;
    position: relative;
    padding: 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 45px 0;
    background-position: 50% 50%;
}
.round_tit {
    border-bottom: 3px solid #aaa;
    border-radius: 50% 50%;
    text-align: center;
    position: absolute;
    top: 20px;
    padding: 10px 15px 9px;
    left: 0;
    right: 0;
    margin: auto;
    width: 190px;
    font-size: 24px;
    text-transform: uppercase;
    z-index: 2;
}
#aboutUs .round_tit{
    color: #401a57;    
}
.index_about_con{
    color: #401a57;
    margin: 0 auto;
    max-width: 720px;
        padding: 50px 20px 60px;
    position: relative;
    z-index: 1;
}
.contact_row .round_tit{
	background: white;
}
.index_top_row{text-align: center;color:white;}
.r_header{text-align: center;
    
	background: url("../imgs/menu.png") no-repeat 50% 100%;
	padding-bottom: 25px;
	padding-top: 15px;
	position: relative;
	z-index: 10;
}
.about_bottom {
    background: url('../imgs/about_btm.png') no-repeat 50% 100%;
    height: 70px;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}
.about_top {
    background: url('../imgs/about_top.png') no-repeat 50% 0%;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
}
.index_mid_bg {
    background: #C9C3DC;
    margin: 25px 0 35px;
}


.index_prd_bottom {
    background: url('../imgs/prod_btm.png') no-repeat 50% 100%;
    height: 70px;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}
.index_prd_top {
    background: url('../imgs/prod_top.png') no-repeat 50% 0%;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
}
.index_prd_mid_bg {
	min-height: 140px;
    background: white;
    margin: 45px 0 35px;
    text-align:center;
    position: relative;
    z-index: 2;
}
.address_row {
    background: url("../imgs/add_icon.png") no-repeat 0 3px;
    padding-left: 30px;
    padding-top: 3px;
    line-height: 30px;
}
.phone_row {
    background: url("../imgs/phone_icon.png") no-repeat 0 3px;
    padding-left: 30px;
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
}
.mail_row {
    background: url("../imgs/email_icon.png") no-repeat 0 3px;
    padding-left: 30px;
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
}
a{color: inherit;text-decoration: none;}
.r_footer {
    font-size: 10px;
    text-align: center;
    background: url("../imgs/footer.png") 50% 0;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #999;
    margin-top: 100px;
}
.index_prd_div{display: inline-block;width: 16.5%;height: 150px;text-align: center;border-right: 1px solid #eee;}
.index_prd_div img{display: block;margin: 0 auto;}
.in_tit{
	height: 30px;
    margin-top: 15px;
    font-size: 18px;
    padding: 0 20px;
    color: #aaa;
}
.index_prd_inner{
	max-width: 900px;margin: 0 auto;
}
.prd_banner{
	    font-size: 26px;
    text-transform: Uppercase;
    margin-top: 10px;
}
.cate_nav {
    font-size: 17px;
    text-align: center;
    color: #aaa;
    padding: 15px 0;
}
.web_inner{width: 960px;margin: 0 auto;}
.prd_item{width: 24%;float: left;margin:0px 0.5% 10px;min-height: 365px;}
.prd_item img{display: block;}
img{max-width: 100%;}
.prd_sku{
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: #6F41AD;
    margin-bottom: 3px;
    margin-top: 5px;
}
.prd_tit {
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.prd_img_wrapper{position: relative;background: white;}
.clr{clear: both;}
.iv{display: none;}
.plus_icon {
    background: url('../imgs/enlarge_ins.png') no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}
.cate_nav a.active{color: #6F41AD}
.cate_nav span{margin: 0 8px;}
.prject_img_wrapper{
    position: relative;
    color:white;
    text-align: center; 
}
.prject_img_wrapper:hover{
    transition: all 2s;    
}
.prj_tit {
    font-weight: bold;
    font-size: 25px;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    text-shadow: 2px 2px 8px #000;
}
.prj_date{
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;    
}
.prj_line{
    max-width:60px;background:rgba(255,255,255,0.8); height:3px;margin:10px auto;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;        
}
.prject_img_wrapper{
    height: 175px;
}
.gallery_list .prject_img_wrapper{
    height: 275px;
}
.prject_img_wrapper img{
    max-width: 110%;
    width: 100%;
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */   
    position: absolute;
    left: -20%;
    right: -20%;
    top:-20%;
    bottom:-20%;
    margin:auto;
}
.prject_img_wrapper:hover img{
    transition: all 0.5s;
}
.prj_bg_overlay{
    background: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}
.prject_img_wrapper:hover .prj_bg_overlay{
    opacity: 0;
    transition: 1s all;
}
.prject_img_wrapper:hover img{
  filter: grayscale(0%); /* Current draft standard */
    -webkit-filter: grayscale(0%); /* New WebKit */
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: none; /* IE */
    -webkit-filter: grayscale(0); /* Old WebKit */      
    width: 110%;
    max-width: 110%;
}
.prj_item {
    overflow: hidden;
    width: 25%;
    float: left;
}
.ft_fade:hover{
    transition: all 0.5s;    
}
.prject_img_wrapper:hover .ft_fade{
transition: all 0.5s;    
opacity: 0;
}
.prj_plus{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: url('../imgs/gallery_large.png') no-repeat 50% 50%;
    opacity: 0;
}
.prject_img_wrapper:hover .prj_plus{
    opacity: 0.6;
}
.index_pj_info {
    background: rgba(0,0,0,0.9);
    position: absolute;
    width: 90%;
    height: 84px;
    z-index: 1;
    border-radius: 50% 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    transition: all 0.5s;
}
.index_pj_info:hover {
}
.prject_img_wrapper:hover .index_pj_info{
opacity: 0;
}
.index_pj .ft_fade{
    z-index: 2;
}

.index_pj .prj_client {
    font-weight: normal;
    font-size: 13px;
    position: absolute;
    top: 97px;
    left: 0;
    right: 0;
}
.index_pj .prj_date {
    font-weight: normal;
    font-size: 12px;
    position: absolute;
    top: 112px;
    left: 0;
    right: 0;
}
.index_pj .prj_line {
height: 2px;top:84px;max-width: 95px;
}
.index_pj .prj_tit {
    font-weight: bold;
    font-size: 19px;
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
}
.prj_more {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: -160px;
    margin: auto;
    background: url('../imgs/more_btn.png') no-repeat 50% 100%;
    opacity: 0;
    height: 100%;
}

.index_more_pj {
    width: 40px;
    padding-left: 25px;
    background: url('../imgs/enlarge.png') no-repeat 0% 50%;
    color: #ccc;
    margin: 0 auto;
    font-size: 17px;
    background-size: auto 100%;
    height: 24px;
    line-height: 27px;
    margin-top: 40px;
}
.index_pj_wrap .prject_img_wrapper{
    height: 195px;
}
.r_header_inner{max-width: 1060px;padding: 10px 20px;margin: 0 auto;position: relative;}
.word_logo{
    position: absolute;
    color: white;
    text-align: left;
    font-size: 15px;
    font-weight: normal;
    left: 10px;
    top: 30px;
}
.index_prd_div.last{
    border:0;
}
.backtotop{
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    background: url('../imgs/backtotop.png') no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    display: none;
}
.backtotop:hover{
    background: url('../imgs/backtotop_roll.png') no-repeat;
    background-size: 100% 100%;
}
.ftc_link{
    display: inline-block;height: 36px;width: 36px;
}
.foot_add_link{background: url("../imgs/footer_add.png") no-repeat;}
.foot_add_link:hover{background: url("../imgs/footer_add_roll.png") no-repeat;}
.foot_phone_link{background: url("../imgs/footer_phone.png") no-repeat;}
.foot_phone_link:hover{background: url("../imgs/footer_phone_roll.png") no-repeat;}
.foot_email_link{background: url("../imgs/footer_email.png") no-repeat;}
.foot_email_link:hover{background: url("../imgs/footer_email_roll.png") no-repeat;}

.prj_item {display: none;}
.prj_item.active {display: block;}
.contact_row img{margin: 0 10px;}
.contact_row{padding: 50px 0 15px;}
.mobile_menu{display: none;}
.prj_item.index_pj_wrap{width:32%;margin:0 0.5%;display: block;}
.index_addr_row{width:55%;float:left;}
.index_oth_row{width:38%;float:right;}
.fancybox-skin{padding: 0 !important;}
#close_menu{display: none;}
.logo_in_mobile{display: none;}
.mobile_sep_line{display: none;}
#mainmenu ul ul{display: none;}
.lang_block a{color: #e380ff;margin:0 5px;}
.lang_block a.active{color: white;}
.lang_block {
    color: white;
    position: absolute;
    right: 0;
    top: 22px;
    font-size: 16px;
    text-transform: uppercase;
}
.index_pj_wrap{
    position: relative;
}
.index_pj_wrap:hover .prj_bg_overlay{
    opacity: 0;
    transition: 1s all;
}
@media screen and (max-width: 760px) {
    .index_pj_wrap .prject_img_wrapper{
        height: 300px;
    }
    .index_pj_info{
            height: 175px;
    }
.index_pj .prj_tit {
    font-weight: bold;
    font-size: 25px;
    position: absolute;
    top: 95px;
    left: 0;
    right: 0;
}    
.index_pj .prj_line{
    top: 125px;
}
.index_pj .prj_client{
    font-size: 16px;
        top: 145px;
}
.index_pj .prj_date{
        top: 170px;
        font-size: 16px;
}
    #slider_index li{height: 350px;position: relative;z-index: 1;}
    #slider_index li .bx-center-div{height: 350px;position: relative;overflow: hidden;}
    #slider_index li img{height: 100%;position: absolute;top:-230px;bottom:-250px;left: -500px;right: -500px;margin:auto;width: auto;max-width: 250%;}
    .even_rows_clr{
        display: block;
    }
    .bx-wrapper .bx-has-pager .bx-pager{
        bottom: 65px !important;
        z-index: 9;
    }
    .lang_block {
right: 45px;
    top: 15px;

    }
    #mainmenu ul ul{
        display: block;
        padding: 0;
        margin: 0;
        margin-top: 10px;
    }
    #mainmenu ul ul li{
        text-align: left;
        padding: 0;
    }
    #mainmenu ul ul li a{
        font-size: 15px;
    }
    #close_menu {
        display: block;
        color: white;
        margin-bottom: 10px;
        cursor: pointer;
        height: 30px;
        width: 30px;
        float: right;
        background: url("../imgs/mobile.png") no-repeat;
        background-size: 100%;
        margin-right: 10px;
        margin-top: 10px;
    }
    .mobile_menu {
        display: block;
        background: #e380ff;
        color: white;
        text-align: center;
        color: white;
        padding: 5px 15px;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 7px;
        background: url("../imgs/list_btn.png") no-repeat;
        height: 29px;
        background-size: 100% 132%;
        width: 30px;
    }
    .word_logo{top:7px;}
    .r_header{padding-bottom: 20px;padding-top: 0;min-height: 50px;}
    .r_header_inner{padding-left: 5px;}
    #mainmenu{clear: both;}
    #mainmenu ul li{display: block;width: 100%;text-align: center;border:0;margin-bottom: 5px;}
    #mainmenu ul li a{padding: 0;margin: 0;}
    .index_row{min-height: 175px;}

    .index_prd_div{width: 50%;border: 0;}
    .prj_item.index_pj_wrap{width:100%; margin:5px 0;}
    .index_addr_row{width:100%;float:none;margin-bottom: 10px;}
    .index_oth_row{width:100%;float:none;}
    .phone_row{margin-bottom: 10px;}
    .index_row{max-width: 100%;overflow: hidden;}
    .backtotop{width: 40px;height: 40px;right: 15px;bottom: 15px;}
    .index-st_row{padding-top: 70px !important;margin-top: -50px !important;overflow: visible;padding-bottom: 60px !important;padding-left: 10px;padding-right: 10px;height: 250px;}
    .web_inner{max-width: 100%;}
    .prj_item{width: 50%;}
    .gallery_st_row{}
    .prd_item{width: 49%;min-height: 370px;}
    .index_row{background-size: auto;}
    .cate_nav{
        font-size: 14px;padding-left: 10px;padding-right: 10px;
        max-width: 95%;margin-left: auto;margin-right: auto;
    }
    .gallery_st_row{padding-bottom: 0px !important;}
    .index_tp_s1{font-size: 20px !important;}
    .index_tp_s2{font-size: 40px !important;}
    .index_top_row{
        margin-top: 35px;
    }
    body{width: 100%;overflow-x:hidden;}
    .gallery_list .prj_item{width: 100%;}
    #page{width: 100%;}
    #mainmenu{
        position: fixed;
        right: -60%;
        background: #2A1732;
        width: 60%;
        top: 0;
        height: 100%;
        z-index: 999;
        overflow: auto;
    }
    #hd_logo{
        display: none;
    }
    .logo_in_mobile{display: block;text-align: center;}
    .logo_in_mobile img{
        width: 50%;
        margin-left: 20px;
        margin-top: 85px;
    }
    .mword_logo {
        color: white;
        text-align: left;
        padding-left: 26%;
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    #mainmenu ul li{text-align: left;color: white;padding-left: 23%;margin-bottom: 15px;}
    .mobile_sep_line{width: 90%;border-bottom: 1px solid #441D4D;margin:20px auto;display: block;}
    #mainmenu ul li a{color: white;}
    .mobile_menu.open{display: none;}
}
.cate_sub_nav{
    border-radius: 10px;background: #6F41AD;padding:5px;margin-bottom: 10px;
}
.cate_sub_nav a{
        color: #c1c1c1;
}
.cate_sub_nav a.active{
color: white;
}
@media screen and (max-width: 480px) {
    #slider_index li{height: 280px;position: relative;z-index: 1;}
    #slider_index li .bx-center-div{height: 280px;position: relative;overflow: hidden;}    
    .index_row{background-size: auto 100%;}
}
.footer_c_row{
    padding: 20px;
    text-align: center;
}
.footer_c_row a{margin:0 5px;}
.slider_tit {
    position: absolute;
    font-size: 50px;
    top: 175px;
    left: 0;
    font-weight: bold;
    right: 0;
    margin: auto;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 10px #000;
}
.slider_con {
    position: absolute;
    font-size: 18px;
    bottom: 180px;
    left: 0;
    color: white;
    text-align: center;
    right: 0;
    text-shadow: 2px 2px 10px #000;
}

.bx-wrapper .bx-pager{
    text-align: center !important;
    padding: 0 !important;
    bottom: 100px !important;
}
.bx-wrapper .bx-pager.bx-default-pager a{
        background: #333 !important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{
    background: #6F41AD !important;
}