#gotop { display:none; position:fixed; z-index:89; width:50px; height:50px; line-height:50px; right:10px; bottom:10px; cursor:pointer; text-align:center; font-size:13px; color:#FFFFFF; font-weight:bold; background:rgba(0,0,0,0.8); behavior:expression(this.onFocus=this.blur());/*for IE*/transition-property:all 0.3s;-moz-transition:all 0.3s; /* Firefox 4 */-webkit-transition:all 0.3s; /* Safari and Chrome */-o-transition:all 0.3s; /* Opera */ -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;}
#gotop:hover { background:rgba(0,0,0,0.4); behavior:expression(this.onFocus=this.blur());/*for IE*/transition-property:all 0.3s;-moz-transition:all 0.3s; /* Firefox 4 */-webkit-transition:all 0.3s; /* Safari and Chrome */-o-transition:all 0.3s; /* Opera */}

.m_header{ display:block; position:fixed; z-index:99; top:0; left:0; width:100%;}
.logo{ position:relative; background:url(../images/bg.gif) rgba(255,255,255,1); width:100%; padding:10px 1.2%; box-shadow:0px 0px 12px -2px rgba(0,0,0,0.2); 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;}
.logo-d{ background:url(../images/bg.gif) rgba(255,255,255,0.9); padding:5px 1.2%; box-shadow:0px 0px 12px -2px rgba(0,0,0,0.2); 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;}

.logo_p{ position:relative; width:412px; height:70px; background:url(../images/logo.svg) no-repeat center center; background-size:contain; -ms-behavior:url(css/backgroundsize.min.htc); behavior:url(css/backgroundsize.min.htc); cursor:pointer; 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;}
.logo_p h1{ position:absolute; z-index:0; left:-99999px;}
.logo-pd{ width:382px; height:65px; 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;}

.btns{ position:absolute; width:60%; right:1.2%; top:12%; text-align:right;}
.btns a{ display:inline-block; vertical-align:middle; color:rgba(0,0,0,0.8); font-size:15px; line-height:1.5; font-weight:300; margin-left:1.2vw;}
.btns a:first-child{ margin-left:0vw;}
.btns a:hover{ color:rgba(0,0,0,1);}
.btns a:hover > span{ 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;}
.btns a span{ margin-right:5px; font-size:90%; color:rgba(0,0,0,0.3); 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;}

.btn { position:absolute; width:60%; right:1.2%; bottom:14%; text-align:right;}
.btn a{ position:relative; display:inline-block; margin-left:2.5vw; font-size:18px;} 
.btn a:first-child{ margin-left:0vw;} 

.top_menu { display:none;}

/*mobile*/
.menu_c_open{overflow:hidden;}
.m_menu{ display:none;}
.m_box{ display:none;}
.tm_menu span { display:none;}
.tm_menu_x span { display:none;}

.banner{ position:relative; width:100%; text-align:center; padding:180px 0 130px 0; font-size:30px; font-weight:400; color:#ffffff; letter-spacing:1px; text-shadow:0px 0px 8px rgba(0%,0%,0%,0.8); border-bottom:1px solid #ffffff}
.banner_mask{ position:absolute; bottom:0; width:100%; z-index:2; height:160px; /*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:70%; min-width:1000px; top:-60px; left:50%; transform:translate(-50%,0%); padding-bottom:60px;}
.content_c{ width:100%; overflow:hidden; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; border-top:3px solid #499362; box-shadow:0px 0px 12px -2px rgba(0,0,0,0.3);}
.content{ width:100%; padding:5% 8% 6% 8%; background:#ffffff;}
.footer{ margin:0 auto; width:100%; padding:15px; font-size:15px; line-height:1.7; background:rgba(0,0,0,0.6); border-top:1px dashed #ffffff; text-align:center;}
.footer_f{ display:inline-block; vertical-align:top; width:90%; color:#ffffff;}
.footer_f i{ display:inline-block; margin-left:15px;}

.atitle_box{ display:block; margin-bottom:5px;}
.atitle{ position:relative; display:inline-block; font-size:25px; line-height:1.5; color:#2a6078; font-weight:500; padding-right:30px;}
.atitle:before{ content:""; display:block; position:absolute; z-index:2; right:0; top:50%; width:20px; height:1px; background:#2a6078;}
.ac_box{ display:block; overflow:hidden;}
.ac_box ul{ padding-left:10px;}
.ac_box li{ display:inline-block; width:50%; vertical-align:top; list-style:none; background:url(../images/symbol/icon_02.png) no-repeat 0px 13px; background-size:6px; padding:0 20px 0 20px;}
.ac_pic{ width:100%;}
.ac_pic_c{ display:inline-block; vertical-align:top; width:25%; padding:8px;}
.ac_pic_c a{ display:block; width:100%; padding:6px; border:1px solid rgba(0,0,0,0.2); overflow:hidden;}
.ac_pic_p{ width:100%; height:0; padding-bottom:75%; -ms-behavior:url(css/backgroundsize.min.htc); behavior:url(css/backgroundsize.min.htc);}
.ac_pic_f{ width:100%; text-align:center; font-size:16px; color:#666666;}

/*團隊成員*/
.pp_list{ width:100%;}
.pp_list_box{ display:block; width:100%; margin-bottom:2.5%;}
.pp_list_c{ display:block; width:100%; overflow:hidden; background:rgba(255,255,255,0.6); padding:20px; box-shadow:0px 0px 12px rgba(0,0,0,0.1); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
.pp_list_n{ font-size:130%; font-weight:500; font-family: 'Noto Sans TC', sans-serif; margin-bottom:10px; padding:0 10px; color:#3d7928; background:#FFF3E1;}
.pp_list_n span{ font-size:16px; color:rgba(0,0,0,0.5); margin-left:10px; font-weight:400;}
.pp_list_file{ display:table; width:100%; border-bottom:1px dotted #CCCCCC; padding-bottom:5px; margin-bottom:5px;}
.pp_list_file_t{ display:table-cell; width:90px; color:#666666; position:relative; padding-left:15px;}
.pp_list_file_t:before{ position:absolute; z-index:1; display:block; content:""; width:1px; height:14px; right:20px; top:10px; background:#cccccc;}
.pp_list_file_f{ display:table-cell;}
.table_color{ width:100%}
.table_color tr:nth-child(odd){	background:rgba(0,0,0,0.1);}

@media (min-width:993px) and (max-width:1600px) {
.logo{ padding:6px 1.2%;}
.logo-d{ padding:6px 1.2%;}
.logo_p{ width:383px; height:65px;}
.logo-pd{ width:353px; height:60px;}

.btns{ display:block; position:absolute; width:60%; right:1.2%; top:8%;}
.btns a{ display:inline-block; margin-left:1.2vw; font-size:14px;}
.btn { display:block; position:absolute; width:60%; right:1.2%; bottom:13%;}
.btn a{ position:relative; display:inline-block; margin-left:2.5vw; font-size:18px;}

.banner{ padding:155px 0 130px 0; font-size:30px; text-shadow:0px 0px 8px rgba(0%,0%,0%,0.8); }
.banner_mask{ height:160px;}
.content_box{ width:70%; min-width:900px; top:-55px; padding-bottom:60px;}
.content{ padding:4% 6% 5% 6%; }
.footer{ padding:15px; font-size:15px; line-height:1.7;}
.footer_f{ width:90%;}
.footer_f i{ display:inline-block; margin-left:15px;}

.atitle{ font-size:23px; padding-right:30px;}

 /*團隊成員*/
.pp_list_n{ font-size:125%; margin-bottom:10px; padding:0 10px; }

}

/*===平版型區===*/
@media (min-width: 685px) and (max-width: 992px) {
#gotop { width:52px; height:52px; line-height:52px; font-size:14px;}

.logo{ position:relative; width:100%; padding:0 1.2%; border-top:3px solid #499362;}
.logo-d{ padding:0 1.2%;}
.logo_p{ width:324px; height:55px;}
.logo-pd{ width:324px; height:55px;}

.btns{ display:none;}
.btn { display:none;}

.tm_menu { position:absolute; z-index:992; top:0px; right:0; width:55px; height:55px; background:#499362; cursor:pointer;}
/*.tm_menu span { display:none; position:absolute; z-index:992; top:50%; transform:translate(-50%,-50%); right:23px; cursor:pointer; font-size:16px; color:#0856b4;}*/
.custom-menu-toggle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:24px; height:2px; background:#ffffff; display:block; margin:auto; transition: 400ms;}
.custom-menu-toggle:before { position:absolute; width:24px; height:2px; background:#ffffff; display:block; margin:auto; transition:400ms; content:''; backface-visibility:hidden; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg) translateY(8px);}
.custom-menu-toggle:after { position:absolute; width:24px; height:2px; background:#ffffff; display:block; margin:auto; transition:400ms; content:''; backface-visibility: hidden; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg) translateY(-8px);}

.tm_menu_x { position:absolute; z-index:999; top:0px; right:0; width:55px; height:55px; background:#ffffff; cursor:pointer;}
/*.tm_menu_x span { display:none; position:absolute; z-index:992; top:50%; transform:translate(0%,-50%); right:30px; cursor:pointer; font-size:16px; color:#ffffff;}*/
.custom-menu-toggle-x { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:24px; height:2px; border-radius:10px; background:none; display:block; margin:auto; transition: 400ms;}
.custom-menu-toggle-x:before { position:absolute; width:24px; height:2px; border-radius:10px; background:#999999; display:block; margin:auto; transition:400ms; content:''; backface-visibility:hidden; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) translateY(0px);}
.custom-menu-toggle-x:after { position:absolute; width:24px; height:2px; border-radius:10px; background:#999999; display:block; margin:auto; transition:400ms; content:''; backface-visibility: hidden; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg) translateY(-0px);}

.m_menu{ display:none; position:fixed; z-index:100; width:100%; height:100%; top:0; overflow:hidden; background:rgba(0,0,0,0.8);}
.m_box{ display:block; position:absolute; z-index:100; right:-320px; width:320px; height:100vh; padding:50px 30px; background:rgba(255,255,255,1); box-shadow:0px 0px 10px -2px rgba(0,0,0,0.3); overflow-y:auto;}
.m_btns{ width:100%; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:15px;}
.m_btns a{ display:inline-block; vertical-align:middle; font-size:16px; color:rgba(0,0,0,0.6); line-height:1.7;}
.m_btns span{ display:inline-block; vertical-align:middle; color:rgba(0,0,0,0.3); font-size:70%; margin:0 1vw;}
.m_btn{ width:100%;}
.m_btn a{ display:block; width:100%; padding:12px 20px 12px 35px; font-size:18px; color:rgba(0,0,0,1); border-bottom:1px solid rgba(0,0,0,0.1); background:url(../images/symbol/icon_04y.svg) no-repeat 10px 17px; background-size:18px;}

.banner{ padding:140px 0 100px 0; font-size:24px; text-shadow:0px 0px 6px rgba(0%,0%,0%,0.8); }
.banner_mask{ height:140px;}
.content_box{ width:90%; min-width:90%; top:-50px; padding-bottom:50px;}
.content{ padding:5% 6% 5% 6%;}
.footer{ padding:12px; font-size:15px; line-height:1.6;}
.footer_f i{ display:inline-block; margin-left:15px;}

.atitle_box{ margin-bottom:5px;}
.atitle{ font-size:22px; padding-right:30px;}
.ac_box ul{ padding-left:10px;}
.ac_box li{ display:inline-block; width:50%; list-style:none; background:url(../images/symbol/icon_02.png) no-repeat 0px 13px; background-size:6px; padding:0 20px 0 15px;}
.ac_pic_c{ display:inline-block; width:33.2%; padding:6px;}
.ac_pic_c a{ padding:5px;}

/*團隊成員*/
.pp_list_box{ margin-bottom:2.5%;}
.pp_list_c{ padding:20px; }
.pp_list_n{ font-size:125%; margin-bottom:10px; padding:0 10px; }
.pp_list_n span{ font-size:16px; margin-left:10px;}
.pp_list_file{ padding-bottom:5px; margin-bottom:5px;}
.pp_list_file_t{ display:table-cell; width:86px; }
.pp_list_file_t:before{ height:14px; right:20px; top:8px;}

}

/*===手機版型區===*/
@media screen and (max-width: 686px) {
#gotop { width:42px; height:42px; line-height:42px; font-size:13px;}

.logo{ position:relative; width:100%; padding:0 1.2%; border-top:3px solid #499362;}
.logo-d{ padding:0 1.2%;}
.logo_p{ width:264px; height:44px;}
.logo-pd{ width:264px; height:44px;}

.btns{ display:none; }
.btn { display:none; }

.tm_menu { position:absolute; z-index:992; top:0px; right:0; width:44px; height:44px; background:#499362; cursor:pointer;}
.custom-menu-toggle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:2px; background:#ffffff; display:block; margin:auto; transition: 400ms;}
.custom-menu-toggle:before { position:absolute; width:22px; height:2px; background:#ffffff; display:block; margin:auto; transition:400ms; content:''; backface-visibility:hidden; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg) translateY(6px);}
.custom-menu-toggle:after { position:absolute; width:22px; height:2px; background:#ffffff; display:block; margin:auto; transition:400ms; content:''; backface-visibility: hidden; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg) translateY(-6px);}

.tm_menu_x { position:absolute; z-index:999; top:0px; right:0; width:44px; height:44px; cursor:pointer;}
.custom-menu-toggle-x { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:2px; border-radius:10px; background:none; display:block; margin:auto; transition: 400ms;}
.custom-menu-toggle-x:before { position:absolute; width:22px; height:2px; border-radius:10px; background:#999999; display:block; margin:auto; transition:400ms; content:''; backface-visibility:hidden; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) translateY(0px);}
.custom-menu-toggle-x:after { position:absolute; width:22px; height:2px; border-radius:10px; background:#999999; display:block; margin:auto; transition:400ms; content:''; backface-visibility: hidden; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg) translateY(-0px);}

.m_menu{ display:none; position:fixed; z-index:100; width:100%; height:100%; top:0; overflow:hidden; background:rgba(0,0,0,0.8);}
.m_box{ display:block; position:absolute; z-index:100; right:-100%; width:100%; height:100vh; padding:40px 0px; background:rgba(255,255,255,1); overflow-y:auto;}
.m_btns{ width:100%; border-bottom:1px solid rgba(255,255,255,0.1); padding:0 0 20px 30px;}
.m_btns a{ display:inline-block; vertical-align:middle; font-size:16px; color:rgba(0,0,0,0.6); line-height:1.7;}
.m_btns span{ display:inline-block; vertical-align:middle; color:rgba(0,0,0,0.3); font-size:70%; margin:0 2.5vw;}
.m_btn{ width:100%;}
.m_btn a{ display:block; width:100%; padding:8px 20px 8px 51px; font-size:18px; color:rgba(0,0,0,1); border-bottom:1px solid rgba(0,0,0,0.1); background:url(../images/symbol/icon_04y.svg) no-repeat 30px 14px; background-size:16px;}

.banner{ padding:100px 0 90px 0; font-size:20px; text-shadow:0px 0px 4px rgba(0%,0%,0%,0.8); }
.banner_mask{ height:110px;}
.content_box{ width:90%; min-width:90%; top:-50px; padding-bottom:40px;}
.content{ padding:7% 6% 7% 6%;}
.footer{ padding:8px; font-size:14px; line-height:1.5;}
.footer_f i{ display:block; margin-left:0px;}

.atitle{ font-size:20px; padding-right:30px;}
.ac_box ul{ padding-left:5px;}
.ac_box li{ display:block; width:100%; background:url(../images/symbol/icon_02.png) no-repeat 0px 10px; background-size:6px; padding:0 20px 0 15px;}
.ac_pic_c{ display:inline-block; width:50%; padding:5px;}
.ac_pic_c a{ padding:4px;}
.ac_pic_f{ font-size:15px;}

/*團隊成員*/
.pp_list_box{ margin-bottom:2.5%;}
.pp_list_c{ padding:12px; }
.pp_list_n{ font-size:115%; margin-bottom:10px; padding:4px 10px; }
.pp_list_n span{ font-size:15px; margin-left:10px;}
.pp_list_file{ padding-bottom:5px; margin-bottom:5px;}
.pp_list_file_t{ display:table-cell; width:70px; padding-left:10px;}
.pp_list_file_t:before{ height:14px; right:15px; top:5px;}

}