﻿@charset "utf-8";
body {margin:0; padding:0; font-size:15px; line-height:160%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體'; background:url(images/bg.jpg) repeat-x #bfe7dc;}
a{text-decoration:none; color:#666;}
div{border:0px solid #f00;}
#footer, #defaultimg, .content, #header, .innerhtml, .news .block div.frame{width:100%; height:auto; float:left;}
.content .page{padding-bottom:2em;}
.page{height:auto; position:relative; margin:auto auto; padding:auto auto; display:table; background:#fff;}
.block{height:auto; float:left; line-height:0;}
.rwdimg{width:100%; height:auto;}
*{box-sizing:border-box;}

/*header*/
.logo{height:auto; float:left;}
.logo img{max-width:100%; height:auto;}
#header select{width:auto; height:26px; float:right; margin:1em 0.2em;}
#header{overflow:hidden;}
#header .page{padding:0;}
#form{width:5em; float:right; padding-top:0.6em;}
#form select{height:27px;}
/*block setting*/
.one.block{width:100%; padding:1em;}
/*footer*/
#footer{text-align:center; font-size:13px; color:#666; line-height:200%;}
#footer .page{border-top:2px solid #333; padding:1em 0;}

/*default*/
#defaultimg{line-height:0; position:relative;}
#defaultimg .page{padding:0;}
#defaultimg img{width:100%; height:auto;}
#defaultimg div.dtit{background:rgba(217,46,38,0.7); color:#fff; font-size:18px; width:100%; height:auto; padding:0.5em; position:absolute; bottom:0; left:0; z-index:10; line-height:180%;}

.dword p{text-align:right;}
.dword a{color:#000;}
.dword a:hover{color:#900;} 

/*content*/
.side{height:auto; float:left;}
.main{height:auto; float:left; line-height:180%; text-align:left;}
.innerhtml{line-height:180%;}
.innerhtml img{max-width:100%; height:auto;}
h1.maintit{font-weight:normal; font-size:22px; color:#007130;}
h1.tit{text-align:center; font-weight:normal; color:#007130;}
h1.tit hr{width:3em; margin:1.5em auto;}
.one{width:100%;}
a.mlink{color:#069;}
a.mlink:hover{color:#C00;}
/*gallery*/
.gallery .block{padding:1em;}
.gallery .block div{padding:0.3em; border:1px solid #ccc; text-align:center;}
.gallery .block div:hover{cursor:pointer; background:#f2edea; border:1px solid #1e5cbc; color:#1e5cbc;}
.gallery .block div h3{font-weight:normal;}

/*news*/
.news .block{padding:1em; cursor:pointer;}
.news .block div.frame:hover h3.tit{color:#369;}
.news .block div.pic{width:35%; height:auto; float:left;}
.news .block h3.tit{width:65%; float:right; text-align:left; padding:0 0.3em; margin:0; line-height:180%;}
.news .block div.innerhtml{width:65%; float:right; text-align:left; padding:0 0.3em; margin:0; line-height:180%;}
.news .block span{font-size:13px; color:#ccc; }


/*.inputframe{height:auto; padding:10px 5%; text-align:left; float:left; width:100%;}*/
.contact .block{padding:1em;}
.contact p{margin-bottom:0; line-height:150%;}
.contact input{height:30px; width:100%;}
.contact textarea{width:100%;}
select{height:auto; width:100%;}


/*btn*/
.btn{padding:0.5em 3em; background:#666; color:#fff; border-radius:0.3em;}
.btn:hover{background:#333;}

@media screen and (max-width:767px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
.page{width:100%;}
/*header*/
.logo{width:45%; padding-left:1%; padding-top:3%;}
#header{border-bottom:1px solid #ccc; position:fixed; z-index:199; background:#fff;}
/*nav*/

/*nav*/
.menu{width:100%; height:auto; position:absolute; top:0px; left:0;}
.nav{position:fixed; top:0; left:0; width:100vw; height:100vh;  z-index:200; display:block; background:rgba(0,0,0,0.5); display:none;}
.nav ul{margin:0; padding:0; list-style:none; display:block; height:100vh; background:#fff; width:55%; float:left;}
.nav ul li{display:block; float:left; line-height:200%; display:block; width:100%; background:#fff; border-bottom:1px dotted #ccc;}
.nav ul li a{color:#666; font-size:15px; padding:1em;}
.nav ul li a:hover{color:#D92E26;}
.nav ul li ul{border:1px solid #efefef; border-top:3px solid #efefef; width:100%; background:#fff; height:inherit;}
.nav ul li ul li{border-bottom:1px dotted #ccc; clear:both; line-height:200%; width:inherit; display:block; background:#fff;}
.nav ul li ul li:hover{background:#f6f6f6; color:#D92E26;}
.nav ul li ul li a{padding:0 0.5em; line-height:2em; font-size:13px;}
.nav a{width:100%; height:auto; display:block;}
.underline{border-bottom:0;}
/*subnav*/
#submenu{border:1px solid #ccc; float:left; width:100%; border-radius:5px; margin-top:3em;}
.subtoggle{padding:15px;}
.subnav{display:none;}
/*footer*/
#footer{background:url(images/head-bg.png) top no-repeat; height:10em;}
/*content*/
.tit{text-align:center; font-weight:normal;}
.side{width:100%;}
.main{width:100%; padding:6em 2% 1em 2%;}
/*default*/
#defaultimg div.dtit{text-align:center;}
#defaultimg div.dtit span{display:block; width:100%; height:auto; float:left;}
.dword p{text-align:center;}
.dword h3{font-weight:normal; line-height:200%; padding:0 1em; font-size:16px; word-break:break-all;}
/*block use*/
.two.block{width:100%;}
.three.block{width:100%;}
.four.block{width:100%;}
/*news*/
.news .block div.frame{background:#f6f6f6;}
.news .block div.pic{width:100%;}
.news .block h3.tit{width:100%;}
.news .block div.innerhtml{width:100%;}


}

@media screen and (min-width:768px) and (max-width:1023px){/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none;}
.page{width:100%;}
/*header*/
.logo{width:28%; padding-left:1%; }
/*nav*/
.menu{width:100%; height:auto; position:absolute; top:-140px; left:0;}

/*nav*/
.nav{float:right; width:110%; position:relative; min-height:3em;}
.nav ul{margin:0; padding:0; list-style:none; display:block; }
.nav ul li{display:inline-block; float:left; line-height:200%; position:relative;}
.nav ul li a{color:#000; font-size:13px; padding:0.5em 0.7em 0 0; word-break:keep-all; }
.nav ul li a:hover{color:#D92E26;}
.nav ul li ul{position:absolute; border-top:3px solid #efefef; width:125px; background:rgba(255,255,255,0.8); clear:left; margin-left:-10%; border-bottom:1px solid #efefef;}
.nav ul li ul li{border-left:1px solid #efefef; border-right:1px solid #efefef; clear:both; width:inherit; display:block;}
.nav ul li ul li:hover{background:#f6f6f6; color:#D92E26;}
.nav ul li ul li a{padding:0.2em 0.5em; line-height:1.2em; font-size:13px;}
.nav a{width:100%; height:auto; display:block;}
.underline{border-bottom:1px solid;}
/*subnav*/
.subtoggle{display:none;}
/*content*/
.side{width:25%; }
.main{width:75%;  padding:0 2% 0 5%;}
/*default page use*/
h1.tit{font-size:33px;}
.dword h3{font-weight:normal; line-height:200%; padding:0 4em; font-size:16px;}
/*block use*/
.two.block{width:50%;}
.three.block{width:33.3%;}
.four.block{width:50%;}
/*news*/
.news .block{border-bottom:1px dotted #ccc;}
.news .block div.pic{width:35%;}
.news .block h3.tit{width:65%;}
.news .block div.innerhtml{width:65%;}
}
@media screen and (min-width:900px) and (max-width:1023px){/*pad*/
/*nav*/
.nav{float:right; width:110%; position:relative; min-height:3em;}
.nav ul{margin:0; padding:0; list-style:none; display:block; }
.nav ul li{display:inline-block; float:left; line-height:200%; position:relative;}
.nav ul li a{color:#000; font-size:15px; padding-right:1.6em; word-break:keep-all; }
.nav ul li a:hover{color:#D92E26;}
.nav ul li ul{position:absolute; border-top:3px solid #efefef; width:125px; background:rgba(255,255,255,0.8); clear:left; margin-left:-10%; border-bottom:1px solid #efefef;}
.nav ul li ul li{border-left:1px solid #efefef; border-right:1px solid #efefef; clear:both; width:inherit; display:block;}
.nav ul li ul li:hover{background:#f6f6f6; color:#D92E26;}
.nav ul li ul li a{padding:0.2em 0.5em; line-height:1.2em; font-size:13px;}
.nav a{width:100%; height:auto; display:block;}
.underline{border-bottom:1px solid;}
}

@media screen and (min-width:1024px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none;}
.page{width:1024px;}
/*header*/
.logo{width:28%;}
/*nav*/
.nav ul li a{padding:0.7em 1.5em 0 1.5em;}
/*nav*/
.menu{width:100%; height:auto; position:absolute; top:-140px; left:0;}
.nav{float:right; width:100%; position:relative; min-height:3em;}
.nav ul{margin:0; padding:0; list-style:none; display:block;}
.nav ul li{display:inline-block; float:left; line-height:200%; position:relative;}
.nav ul li a{color:#000; font-size:15px; padding:0.7em 2em 0 0em; }
.nav ul li a:hover{color:#D92E26;}
.nav ul li ul{position:absolute; border-top:3px solid #efefef; background:rgba(255,255,255,0.8); clear:left; margin-left:-0.3em; border-bottom:1px solid #efefef; width:105%;}
.nav ul li ul li{border-left:1px solid #efefef; border-right:1px solid #efefef; clear:both; width:100%; display:block;}
.nav ul li ul li:hover{background:#f6f6f6; color:#D92E26;}
.nav ul li ul li a{padding:0.3em ; line-height:1.2em; font-size:13px;}
.nav a{width:100%; height:auto; display:block;}
.underline{border-bottom-style:solid; border-bottom-width:1px;}

/*subnav*/
.subtoggle{display:none;}
/*content*/
.side{width:25%;}
.main{width:75%; padding:0 0.3em;}
/*default page use*/
h1.tit{font-size:33px;}
.dword h3{font-weight:normal; line-height:200%; padding:0 4em; font-size:16px;}
/*block use*/
.two.block{width:50%;}
.three.block{width:33.3%;}
.four.block{width:25%;}
/*news*/
.news .block{border-bottom:1px dotted #ccc;}
.news .block div.pic{width:35%;}
.news .block h3.tit{width:65%;}
.news .block div.innerhtml{width:65%;}
}