@charset "utf-8";
/* CSS Document */

html, body { margin:0px; }

body { width:100%; margin:0px; font-size-adjust:100%; -webkit-text-size-adjust:100%; background:url(../img/footer_bg.jpg) repeat-y center top; font-size:16px; color:#333333; }

a { outline:none; text-decoration:none; }

ul, ol { list-style:none; margin:0; padding:0; }
li { vertical-align:top; }

h1, h2, h3, h4, h5, p { padding:0; margin:0; }

img { border:none; }

input { padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; vertical-align:top; }

.noSelect { user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; }

/*-------------------------------------------------------------------------------------*/
/* Main Lang Format */

.en_format { font-family:'Montserrat', sans-serif; }

.tc_format { font-family:'Montserrat', "Microsoft JhengHei", "微軟正黑體", sans-serif; }

.sc_format { font-family:'Montserrat', "Microsoft JhengHei", "微軟正黑體", sans-serif; }

/* ---------------- clear fix ---------------- */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

#wrap { width:100%; min-width:1000px; position:relative; background:url(../img/main_bg.jpg) no-repeat center top; }
#wrap .container { width:1000px; margin:0px auto; position:relative; box-sizing:border-box; }

#top { }
#top .logo { float:left; width:538px; height:50px; padding:28px 0 26px 24px; }
#top .logo a { display:block; width:100%; height:100%; background:url(../img/logo.png) no-repeat left top; }
#top .lang { float:right; width:104px; min-height:77px; padding:13px 9px 0 138px; background:url(../img/other_logo.jpg) no-repeat left top; }
#top .lang_area { width:100%; height:21px; position:relative; z-index:10; cursor:pointer; }
#top .lang_area p { display:block; height:21px; padding:0 4px; position:relative; line-height:21px; font-size:15px; color:#000000; }
#top .lang_area p span { font-size:12px; }
#top .lang_area p:before { vertical-align:top; padding-right:6px; font-size:17px; color:#6c558c; }
#top .lang_area ul.lang_list { position:absolute; left:0; top:22px; z-index:-1; width:100%; background-color:#108cc6; border-radius:0 0 8px 8px; display:none; font-size:13px; overflow:hidden; }
#top .lang_area ul.lang_list li { padding:2px 0; }
#top .lang_area ul.lang_list li a { display:block; padding:2px 0; background-color:transparent; color:#ffffff; text-align:center; transition:all 0.2s ease; }
#top .lang_area ul.lang_list li a:hover { background-color:#64b93e; color:#ffffff; }

#menu { background-color:#4a2e71; }
#menu .container { text-align:center; }
#menu ul.menu_list { }
#menu ul.menu_list li { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin-left:-20px; margin-right:-4px; *margin-right:0; position:relative; }
#menu ul.menu_list li:first-child { margin-left:0; }
#menu ul.menu_list li a.lv1 { display:block; height:40px; padding:0 60px; background-color:transparent; position:relative; z-index:1; font-size:16px; color:#ffffff; font-weight:bold; line-height:40px; }
#menu ul.menu_list li a.lv1:after { position:absolute; right:0; top:0; content:""; display:block; width:20px; height:40px; background:url(../img/menu_row.png) no-repeat right top; }
#menu ul.menu_list li a.lv1:hover { z-index:10; background-color:#75c424; }
#menu ul.menu_list li a.lv1:hover:before { position:absolute; left:0; top:0; z-index:100; content:""; width:0; height:0; border-style:solid; border-width:20px 0 20px 20px; border-color:transparent transparent transparent #4a2e71; }
#menu ul.menu_list li#menu_1 a.lv1:hover:before { display:none; }
#menu ul.menu_list li#menu_5 a.lv1:after { display:none; }
#menu ul.menu_list li#menu_5 a.lv1:hover { background-image:none; }

#banner { height:627px; padding:33px 0 37px 0; overflow:hidden; text-align:center; box-sizing:border-box; }
#banner .banner_area { width:892px; height:557px; margin:0 auto; position:relative; }
#banner .banner_area a.bnr_row { position:absolute; top:50%; z-index:100; width:33px; height:42px; margin-top:-21px; background-color:#42abd2; transition:background-color 0.2s ease;}
#banner .banner_area a.bnr_row img{margin-top: 13px;}
#banner .banner_area a.prev_bnr { left:-33px; }
#banner .banner_area a.next_bnr { right:-33px; }
#banner .banner_area a.bnr_row:hover { }

#banner .banner_show { width:892px; height:557px; position:relative; }
#banner .banner_show .banner { position:absolute; top:0px; z-index:10; display:block; width:892px; height:557px; text-align:center; transition:z-index 0.5s ease; }
#banner .banner_show .banner:after { content:""; display:inline-block; zoom:1; *display:inline; vertical-align:middle; height:100%; }
#banner .banner_show .banner img { width:634px; height:425px; vertical-align:middle; transition:all 0.8s ease; }
#banner .banner_show .banner.hide { z-index:1; }
#banner .banner_show .banner.active { z-index:20; }
#banner .banner_show .banner.active img { width:100%; height:100%; box-shadow:0 0 45px rgba(0,0,0,0.6); }

#main { }
#main .container { padding:30px 24px 0 20px; min-height:100px; }
#main .title { padding-left:6px; padding-bottom:12px; font-size:32px; color:#3b276f; line-height:32px; font-weight:bold; }
#main .content_area { min-height:500px; padding:30px 12px 26px 7px; border-top:1px solid #3b276f; }
#main .content_area a:hover { text-decoration:underline; }

#footer { background:url(../img/footer_bg.jpg) repeat-y center top; position:relative; }
#footer:before { position:absolute; right:0; top:0; content:""; width:100%; height:8px; background-color:rgba(255,255,255,0.2); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#33ffffff', endColorstr='#33ffffff'); display:none; }
#footer .container:before { position:absolute; left:76px; top:0; content:""; width:0; height:0; border-style:solid; border-width:11px 10px 0 10px; border-color:#b2c5ea transparent transparent transparent; display:none; }
#footer .footer_btn_area { width:100%; padding:44px 0 11px 0; text-align:center; box-sizing:border-box; display:none; }
#footer .footer_btn_area a { display:inline-block; zoom:1; *display:inline; vertical-align:top; width:458px; height:64px; margin-left:12px; margin-right:8px; *margin-right:12px; background:url(../img/footer_btn_bg.jpg) no-repeat center top; border-radius:20px 0 20px 0; box-shadow:0 0 10px 2px rgba(255,255,255,0.6), inset 5px 5px 5px rgba(0,0,0,0.2); transition:all 0.2s ease; line-height:64px; text-align:center; font-size:18px; color:#ffffff; }
#footer .footer_btn_area a img { padding-left:16px; vertical-align:middle; margin-top:-4px; }
#footer .footer_btn_area a:hover { color:#3b276f; }
#footer .copyright { padding:10px 16px; text-align:right; font-size:10px; color:#ffffff; }
#footer .copyright a { color:#ffffff; }
#footer .copyright a:hover { text-decoration:underline; }

/*-------------------------------------------------------------------------------------*/
/* INDEX */

#indexType { }
#indexType #footer:before { display:block; }
#indexType #footer .container:before { display:block; }
#indexType #footer .footer_btn_area { display:block; }

/*-------------------------------------------------------------------------------------*/
/* PROJECTS */

.project_cate_list { float:left; width:189px; padding-left:4px; padding-top:1px; }
.project_cate_list ul { }
.project_cate_list ul li { padding-bottom:16px; }
.project_cate_list ul li a { display:block; width:100%; height:33px; padding:0 18px; background:#64b93e; background:-moz-linear-gradient(left, #64b93e 10%, #108cc6 85%); background:-webkit-linear-gradient(left, #64b93e 10%,#108cc6 85%); background:linear-gradient(to right, #64b93e 10%,#108cc6 85%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#64b93e', endColorstr='#108cc6',GradientType=1 ); border-radius:12px 0 12px 0; box-shadow:0 0 10px 2px rgba(255,255,255,0.6), inset 5px 5px 5px rgba(0,0,0,0.2); box-sizing:border-box; font-size:14px; color:#ffffff; line-height:14px; transition:all 0.2s ease; }
.project_cate_list ul li a:after { content:""; display:inline-block; zoom:1; *display:inline; vertical-align:middle; height:100%; }
.project_cate_list ul li a span { display:inline-block; zoom:1; *display:inline; vertical-align:middle; }
.project_cate_list ul li a:hover { color:#3b276f; }

.project_content { float:right; width:759px; margin-right:-24px; min-height:712px;}

.project_list { padding:4px 0 16px 0; }
.project_list .project { float:left; width:228px; min-height:202px; margin:0 19px 14px 6px; background-color:#e4f8ff; }
.project_list .project_photo { width:100%; height:160px; text-align:center; }
.project_list .project_photo:after { content:''; display:inline-block; zoom:1; *display:inline; vertical-align:middle; height:100%; }
.project_list .project_photo img { vertical-align:middle; }
.project_list .project_name { min-height:22px; padding:10px 14px; text-align:center; }
.project_list .project_name:after { content:''; display:inline-block; zoom:1; *display:inline; vertical-align:middle; height:100%; }
.project_list .project_name p { display:inline-block; zoom:1; *display:inline; vertical-align:middle; font-size:13px; color:#3b276f; }

#main .multipage { padding:0 13px 20px 13px; text-align:right; }
#main .multipage a { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0 3px; *margin:0 5px; width:21px; height:20px; background-color:transparent; font-size:14px; color:#000000; text-align:center; font-weight:bold; line-height:20px; font-family:'Oxygen', sans-serif; transition:all 0.2s ease; }
#main .multipage a.row { background-color:#75C424; font-size:10px; color:#ffffff; }
#main .multipage a.onpage, 
#main .multipage a:hover { background-color:#4A2E71; color:#ffffff; }

.project_detail { width:730px; padding:16px 7px 30px 3px; margin-left:5px; border-top:1px solid #3b276f; }
.project_detail .project_detail_title { padding-bottom:4px; font-size:18px; color:#000000; }
.project_detail .project_detail_date { padding-bottom:14px; font-size:14px; color:#549a0b; }
.project_detail .project_detail_desc { padding-bottom:20px; font-size:15px; color:#000000; }
.project_detail .project_detail_photo { padding-bottom:22px; }

.project_detail .large_photo { float:left; width:592px; height:371px; background-color:#999999; text-align:center; position:relative; z-index:100; box-shadow:5px 5px 5px rgba(0,0,0,0.2); }
.project_detail .large_photo:after {content:""; display:inline-block; zoom:1; *display:inline; vertical-align:middle; height:100%; }
.project_detail .large_photo img { vertical-align:middle; max-height: 371px; max-width: 592px;}

.project_detail .sub_photo_area { float:right; width:105px; height:333px; padding:19px 0; position:relative; margin:0 auto; }
.project_detail .sub_photo_area a.list_row { position:absolute; left:40px; z-index:1000; font-size:42px; color:#3b276f; transition:all 0.2s ease; }
.project_detail .sub_photo_area a.prev_list { top:-20px; }
.project_detail .sub_photo_area a.prev_list:before { content:"\f106"; }
.project_detail .sub_photo_area a.next_list { bottom:-20px; }
.project_detail .sub_photo_area a.next_list:before { content:"\f107"; }
.project_detail .sub_photo_area a.list_row:hover { color:#75c424; }

.project_detail .list_area { position:relative; width:105px; height:333px; overflow:hidden; }
.project_detail .list_area .list { position:absolute; left:0; top:0; width:105px; }
.project_detail .list_area .list a.item { float:left; display:block; width:105px; height:105px; margin-bottom:9px; background-color:#999999; text-align:center; cursor:pointer; }
.project_detail .list_area .list a.item:before { content:""; display:inline-block; zoom:1; *display:inline; vertical-align:middle; height:100%; }
.project_detail .list_area .list a.item img { vertical-align:middle; transition:all 0.2s ease; }