#gotop { width:48px; height:48px; display:none; position:fixed; z-index:10; right:20px; bottom:25px; cursor:pointer; text-align:center; line-height:1.3; font-size:10px; color:#ffffff; background:url(../images/symbol/top.png) no-repeat center center rgba(0,160,170,0.6); background-size:34px; border-radius:50px; padding:8px; behavior:expression(this.onFocus=this.blur()); transition-property:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s;}
#gotop:hover { width:48px; height:48px; background:url(../images/symbol/top.png) no-repeat center center rgba(0,160,170,1); background-size:34px; behavior:expression(this.onFocus=this.blur()); transition-property:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s;}

#top-image { background:url(../images/pic/ipic.jpg) no-repeat center center; background-size:cover; position:fixed ; top:0; width:100%; z-index:0; height:100%;}
#ibox_bg{ position:absolute; z-index:2; width:50%; left:25%; top:44%; transform:translateY(-44%);}
#ibox{ width:100%; text-align:center; padding:50px; background:rgba(255,255,255,0.9); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow:1px 1px 30px -2px rgba(0,0,0,1);}
.logo{ margin:0 auto; width:500px; overflow:hidden; margin-bottom:10px;}
.logo img{ width:100%;}
.logo2{ display:none;}
.ibox_f{ font-size:16px; line-height:1.7;}
.ibox_f span{ display:block; font-size:150%; margin-bottom:5px; font-weight:bold; color:#0f8579;}
.ibox_btn{ width:100%; text-align:center; margin-top:30px;}
.ibox_btn_c{ display:inline-block; vertical-align:middle; margin:0 10px;}
.ibox_btn a{ display:inline-block; padding:10px 30px; border:1px solid #444444; font-size:18px; font-weight:bold; color:#444444; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.ibox_btn a:hover{ border:1px solid #0f8579; background:#0f8579; color:#ffffff;}
.ifooter{ position:absolute; z-index:2; width:100%; bottom:0; left:0; background:rgba(0,0,0,0.7); color:#ffffff; font-size:14px; line-height:1.7; text-align:center; padding:20px;}
.ifooter i{ display:inline-block; margin-left:15px;}
.ifooter img{ width:20px;}
.ifooter span{ display:inline-block; font-size:13px; color:#cccccc; margin-left:15px;}
.ifooter a{ color:#ffffff;}

#top{display:block; width:100%; height:80px; position:fixed; left:0px; top:0px; z-index:10; background:#ffffff; box-shadow:0 0px 8px -5px #000000;}
#top_logo{ height:100%; display:inline-block; vertical-align:middle; margin-left:20px;}
#top_logo img{width:auto; height:100%;}
#top_btn{ display:inline-block; vertical-align:middle;}
#top_btn a{display:inline-block; vertical-align:middle; font-size:18px; font-weight:bold; color:#2F2F2F; line-height:80px; margin:0 20px;}
#top_btn a:hover{ color:#0f8579;}
#top_rbtn{ float:right;}
#top_rbtn a{ display:inline-block; vertical-align:middle; line-height:80px; font-size:18px; font-weight:bold; color:#ffffff; background:url(../images/symbol/icon01-w.png) no-repeat 30px center #20ac9e; background-size:15px; padding:0 30px 0 60px;}
#top_rbtn a:hover{ background:url(../images/symbol/icon01-w.png) no-repeat 35px center #0f8579; background-size:15px;}

.banner{ position:relative; width:100%; text-align:center; padding:140px 0 160px 0; font-size:20px; font-weight:bold; color:#ffffff; letter-spacing:1px; text-shadow:0px 0px 8px rgba(0%,0%,0%,0.8)}
.banner span{ display:block; font-size:32px; font-weight:normal; font-family: 'PT Serif', serif; margin-bottom:5px; letter-spacing:5px;}
.banner_mask{ position:absolute; bottom:0; width:100%; z-index:2; height:180px; background:url(../images/banner_mask.png) repeat-x 0 bottom; background-size:contain;}

.path_bg{ position:absolute; z-index:3; overflow:hidden; width:80%; bottom:50px; left:10%; text-align:left; background:rgba(255,255,255,0.8); border-bottom:1px dashed #dddcdc; -webkit-border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;}
.path{ display:inline-block; font-size:14px; font-weight:normal; text-shadow:none; color:#ffffff; background:rgba(15,130,120,0.8); padding:15px 25px; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; border-radius:10px 0 0 0;}
.path a{ display:inline-block; vertical-align:middle; color:#ffffff;}
.path a:hover{ color:#c2ddd3;}
.path span{ display:inline-block; vertical-align:top; margin:0 6px; font-size:13px; color:#c2ddd3;}
.path img{ display:inline-block; vertical-align:middle; width:16px; margin-right:5px;}

.content_bg{ position:relative; width:100%;}
.content_box{ position:absolute; z-index:4; width:80%; top:-50px; left:10%;}
.content{ width:100%; padding:5% 10% 6% 10%; overflow:hidden; background:#ffffff;}
.content_c{ margin:0 auto; width:100%;}

.footer{ margin:0 auto; width:100%; padding:15px; font-size:16px; line-height:1.7; background:rgba(0,0,0,0.6); border-top:1px dashed #ffffff; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; margin-bottom:60px;}
.footer_f{ display:inline-block; vertical-align:top; width:60%; color:#ffffff;}
.footer_f i{ display:inline-block; margin-left:15px;}
.footer_f img{ width:20px;}
.footer_d{ display:inline-block; vertical-align:top; width:40%; font-size:13px; color:#cccccc; text-align:right;}

.ab_list{ width:100%; overflow:hidden; text-align:center; margin-bottom:30px;}
.ab_list a{ display:inline-block; font-size:16px; padding:4px 10px; margin:0 5px 10px 5px; border-radius:5px; background:#f0f0f0; border-left:2px solid #0f8579; border-top:1px solid #dbdbdb; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; color:#000000;}
.ab_list a:hover{ background:#505050; border-left:2px solid #04d4bf; border-top:1px solid #333333; border-right:1px solid #333333; border-bottom:1px solid #333333; color:#ffffff;}
.ab_title{ font-size:18px; color:#0f8579; font-weight:bold; background:url(../images/symbol/icon01.png) no-repeat 20px center #e6f2f1; background-size:14px; padding:5px 20px 5px 45px; margin-bottom:10px; border-radius:5px;}

#pagec{ display:table; width:100%; margin-bottom:20px;}
#pagec img{ width:100%;}
#pagec_c{ display:table-cell; width:50%; vertical-align:middle;}
#pagec_p{ display:table-cell; width:50%; vertical-align:middle;}

/*PHOTP*/
#po_list{ width:100%; overflow:hidden; text-align:center; margin-top:10px;}
#po_list_c{ display:inline-block; vertical-align:top; width:25%; padding:0 7px; margin-bottom:10px;}
#po_list_p_k{ width:100%; background:#ffffff; padding-bottom:4%; margin-bottom:10px; box-shadow:2px 2px 9px -2px rgba(0,0,0,0.4); border:1px solid #CCCCCC; border-radius:5px;}
#po_list_p_bg{ position:relative; width:94%; height:0; padding-bottom:69%; overflow:hidden; margin:3% 0 0 3%;}
#po_list_p{ position:absolute; left:0; top:0; width:100%; height:100%; -ms-behavior:url(css/backgroundsize.min.htc); behavior:url(css/backgroundsize.min.htc);}
#po_list_tt{ margin:0 auto; width:94%; font-size:14px; line-height:1.5; margin-top:2px;}

.cbox{ width:100%;}
.cbox_c{ display:inline-block; vertical-align:top; width:50%; padding:10px;}
.cbox_c img{ display:block; width:100%;}

/*===平版型區===*/
@media (min-width: 685px) and (max-width: 1200px) {
#gotop { width:38px; height:38px; display:none; position:fixed; right:13px; bottom:15px; background-size:32px; padding:8px; }
#gotop:hover { width:38px; height:38px; background-size:32px;}

#ibox_bg{ width:70%; left:15%; top:40%; transform:translateY(-40%);}
#ibox{ padding:45px; box-shadow:1px 1px 30px -2px rgba(0,0,0,1);}
.logo{ margin:0 auto; width:400px; margin-bottom:20px;}
.ibox_f{ font-size:15px; line-height:1.5;}
.ibox_btn{ margin-top:30px;}
.ibox_btn_c{ margin:0 10px;}
.ibox_btn a{ padding:8px 26px; font-size:17px;}
.ifooter{ font-size:14px; line-height:1.7; padding:20px;}
.ifooter i{ display:inline-block; margin-left:15px;}
.ifooter img{ width:18px;}
.ifooter span{ display:inline-block; font-size:13px; margin-left:15px;}

#top{ height:60px;}
#top_logo{ margin-left:20px;}
#top_btn{ display:none;}
#top_rbtn{ float:right; margin-right:60px;}
#top_rbtn a{ line-height:60px; font-size:16px; background:url(../images/symbol/icon01-w.png) no-repeat 30px center #20ac9e; background-size:15px; padding:0 30px 0 60px;}
#top_rbtn a:hover{ background:url(../images/symbol/icon01-w.png) no-repeat 35px center #0f8579; background-size:15px;}
#menu_b{display:none;}

.banner{ padding:90px 0 130px 0; font-size:18px; text-shadow:0px 0px 6px rgba(0%,0%,0%,0.8)}
.banner span{ font-size:30px; margin-bottom:5px; letter-spacing:5px;}
.banner_mask{ height:160px;}

.path_bg{ width:90%; bottom:50px; left:5%; -webkit-border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;}
.path{ font-size:13px; padding:13px 20px; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; border-radius:10px 0 0 0;}
.path span{ margin:0 6px; font-size:13px;}
.path img{ width:16px; margin-right:5px;}

.content_box{ width:90%; top:-50px; left:5%;}
.content{ padding:8% 5% 10% 5%;}

.footer{ padding:15px; font-size:16px; line-height:1.7; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; margin-bottom:60px;}
.footer_f{ display:block; width:100%; text-align:center;}
.footer_f i{ display:inline-block; margin-left:15px;}
.footer_f img{ width:18px;}
.footer_d{ display:block; width:100%; font-size:13px; text-align:center;}

.ab_list{ margin-bottom:30px;}
.ab_list a{ font-size:16px; padding:4px 10px; margin:0 5px 10px 5px;}
.ab_title{ font-size:17px; background:url(../images/symbol/icon01.png) no-repeat 16px center #e6f2f1; background-size:14px; padding:5px 18px 5px 40px; margin-bottom:10px;}

#pagec{margin-bottom:20px;}
#pagec_c{ display:table-cell; width:50%;}
#pagec_p{ display:table-cell; width:50%;}

#po_list{ margin-top:10px;}
#po_list_c{ width:25%; padding:0 7px; margin-bottom:10px;}
#po_list_p_k{ padding-bottom:4%; margin-bottom:10px; box-shadow:2px 2px 7px -2px rgba(0,0,0,0.4);}
#po_list_p_bg{ width:94%; height:0; padding-bottom:69%; margin:3% 0 0 3%;}
#po_list_tt{ width:94%; font-size:14px; line-height:1.5;}

.cbox_c{ display:inline-block; width:50%; padding:10px;}
}

/*===手機版型區===*/
@media screen and (max-width: 686px) {
#gotop { width:32px; height:32px; display:none; position:fixed; z-index:999; right:10px; bottom:10px; background-size:24px; padding:8px; }
#gotop:hover { width:32px; height:32px; background-size:24px;}

#ibox_bg{ width:70%; left:15%; top:30%; transform:translateY(-30%);}
#ibox{ padding:6%; box-shadow:1px 1px 25px -2px rgba(0,0,0,1);}
.logo{ display:none;}
.logo2{ display:block; margin:0 auto; width:90%; margin-bottom:4%;}
.logo2 img{ width:100%;}
.ibox_f{ font-size:14px; line-height:1.5;}
.ibox_f span{ font-size:130%; line-height:1.1;}
.ibox_btn{ margin-top:7%;}
.ibox_btn_c{ display:block; margin:0 auto; padding-bottom:4%;}
.ibox_btn a{ width:60%; padding:5px 10px; font-size:15px;}
.ifooter{ font-size:13px; line-height:1.5; padding:2%;}
.ifooter i{ display:block; margin-left:0px;}
.ifooter img{ width:16px; margin:5px 0;}
.ifooter span{ display:block; font-size:12px; margin-left:0px;}

#top{ height:50px;}
#top_logo{ margin-left:2%; padding:1px 0;}
#top_btn{ display:none;}
#top_rbtn{ display:none;}
#menu_b{display:inline-block; border:1px solid #ffffff; color:#ffffff; padding:2px 15px 2px 35px; border-radius:5px; margin-top:10px; background:url(../images/symbol/icon01-w.png) no-repeat 14px center; background-size:14px;}

.banner{ padding:70px 0 120px 0; font-size:16px; text-shadow:0px 0px 6px rgba(0%,0%,0%,0.8)}
.banner span{ font-size:24px; margin-bottom:2px; letter-spacing:2px;}
.banner_mask{ height:160px;}

.path_bg{ width:90%; bottom:50px; left:5%; -webkit-border-radius:8px 8px 0 0; -moz-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0;}
.path{ font-size:12px; padding:10px 16px; -webkit-border-radius:8px 0 0 0; -moz-border-radius:8px 0 0 0; border-radius:8px 0 0 0;}
.path span{ margin:0 4px; font-size:12px;}
.path img{ width:14px; margin-right:3px;}

.content_box{ width:90%; top:-50px; left:5%;}
.content{ padding:12% 6% 15% 6%;}

.footer{ padding:13px; font-size:15px; line-height:1.5; -webkit-border-radius:0 0 8px 8px; -moz-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; margin-bottom:60px;}
.footer_f{ display:block; width:100%; text-align:center;}
.footer_f i{ display:block; margin-left:0px;}
.footer_f img{ width:16px; margin:5px 0;}
.footer_d{ display:block; width:100%; font-size:12px; text-align:center;}

.ab_list{ margin-bottom:6%;}
.ab_list a{ font-size:14px; padding:3px 6px; margin:0 3px 10px 3px;}
.ab_title{ font-size:16px; background:url(../images/symbol/icon01.png) no-repeat 14px center #e6f2f1; background-size:12px; padding:4px 15px 4px 35px; margin-bottom:8px;}

#pagec{ margin-bottom:20px;}
#pagec_c{ display:block; width:100%;}
#pagec_p{ display:block; width:100%;}

#po_list{ margin-top:6px;}
#po_list_c{ width:50%; padding:0 5px; margin-bottom:4px;}
#po_list_p_k{ padding-bottom:4%; margin-bottom:10px; box-shadow:2px 2px 5px -2px rgba(0,0,0,0.4);}
#po_list_p_bg{ width:94%; height:0; padding-bottom:69%; margin:3% 0 0 3%;}
#po_list_tt{ width:94%; font-size:13px; line-height:1.3;}

.cbox_c{ display:block; width:100%; padding:10px 0;}
}