@charset "utf-8";
body {margin:0; padding:0; font-family: Arial,微軟正黑體, Helvetica,Microsoft JhengHei ,sans-serif;}
a{text-decoration:none; transition:.3s;}
#header, #footer, #defaultimg, .content, .innerhtml, .frm, .flexfrm, #banner{width:100%; height:auto; float:left;}
.flexfrm{display:flex; align-items:stretch; align-content:stretch;}
.page{height:auto; position:relative; margin:auto auto; padding:auto auto; display:table;}
.rwdimg{width:100%; height:auto;}/*讓圖自適應用*/
*{box-sizing:border-box;}
figure{margin:0; padding:0;}
[class*="col-"] {
    float: left;
   
}

/*header*/
#header{position:fixed; z-index:200;}
.logo{ height:auto; float:left; line-height:0; text-align:left; width:35%;}
.logo img{max-width:100%; height:auto; transition:.3s;}
#header .page{display:table;}
.logo a{padding-top:1%;}
.logo a.show{padding-top:0.2%; padding-right:13%;}

/*mobile menu btn*/
.menu{width:40px; height:40px; padding:3px; position:relative; border-radius:0.5em; text-align:center;  float:right;  transform:translateY(50%); background:#fff margin-right:3px; cursor:pointer;}
.menu > div{width:60%; height:1px; position:absolute; top:20%; left:20%; background:#333;}
.menu > div::before{ content:""; width:100%; height:1px; position:absolute; top:-7px; left:0; background:#333;}
.menu > div::after{ content:""; width:100%; height:1px; position:absolute; top:7px; left:0; background:#333;}

/*nav*/
.nav{float:right; height:auto; position:absolute; bottom:0%; right:0; width:60%;}
.nav a{text-align:center; display:inline-block;}
.nav ul{padding:0; margin: 0; list-style:none; font-size:0; text-align:right;}
.nav ul li{display:inline-block; margin:0; padding:0; z-index: 10; position:relative;}
.nav ul li ul{background:#D9E8D8; width:100%; position:absolute; border-top:4px solid #39662d;}
.nav ul li ul li{display:block;}
.nav ul li ul li a{display:block; border-bottom:1px dotted #ccc; color:#666; font-size: 14px; padding:0.4em 0.2em;}
.nav ul li ul li a:hover{color:#333; background:#f5f5f5; }
.nav span.line{width:1px; height:15px; background:#fff; display:inline-block; transform:rotate(15deg); margin:0 18px;}
/*subnav*/
.subtoggle{display:none;}

#submenu{float:left; width:100%; overflow:hidden;}
.subnav ul{margin:0; padding:0; list-style:none;  font-size:16px;}
.subnav ul li{padding:0.4em 0;}
.subnav ul li a{border-radius:1.5em; background:#7096b9; color:#fff; padding:1em;}
.subnav ul li ul li a::before{content:"-"; margin-right:0.5em; color:#ccc;}
.subnav ul li ul li a{border:none; font-size:14px; color:#333; border-bottom:1px dotted #ccc; padding:0.4em 0 0.4em 1em; background:#f5f5f5;}
.subnav a:hover{color:#fff; background:#333;}
.subnav a{width:100%; color:#fff; display:block; padding-left:0.5em;}
/*footer*/
/*defaultimg*/
#defaultimg{line-height:0;}
#defaultimg .page{padding:0;}
#banner{position:relative; background:url(images/banner.jpg) no-repeat; background-attachment:fixed; background-size:cover; height:30vh; background-position:bottom;}
#banner div{position:absolute; top:70%; left:50%; transform:translate(-50%,-50%); display:inline-block; font-size:300%; color:#fff; text-shadow:0 0 10px rgba(0,0,0,0.5); text-align:center; line-height:1em;}
#banner div span{font-size:14px; border-top:1px solid #fff; letter-spacing:2px;}
/*content*/
.content{padding:2em 0;}
.side{height:auto; float:left; width:28%; padding:0em 1em 1em 1em;}
.main{height:auto; float:left; text-align:left; width:72%; padding:0em 1em 1em 1em;}
.sidetit{border-bottom:3px solid #efefef; position:relative; font-size:18px; color:#333; font-weight:normal; margin-top:0.5em; margin-bottom:0.5em; line-height:200%;}
.sidetit::before{content:""; width:4em; height:4px; position:absolute; bottom:-3px; left:0; background:#C00;}
.sidetit span{font-size:13px; color:#066;}
.innerhtml {line-height:1.6em;}
.innerhtml img{max-width:100%;}
.path{font-size:13px; font-weight:normal; color:#999; text-align:right;}
.path a{color:#999;}

/*contact*/
.page{width:1200px;}
.contact, .contactinfo{padding:0 2em;}
.contact p{margin-bottom:0; line-height:2em; font-weight: bold;}
.contact input[type^="text"]{height:40px; width:100%; border:none; border:none; color:#333; color:#333; font-size:16px; padding:0.5em; border-radius:0.5em; border:1px solid #ccc;}
.contact textarea{width:100%; border:none; color:#333; border-radius:0.5em; font-size:16px; padding:0.5em; border:1px solid #ccc;}
select{height:auto; width:100%;}
input:focus, textarea:focus, select:focus{outline:none;}
/*contactinfo*/
.contactinfo{position:relative;}
.contactinfo::before{content:""; width:30px; height:30px; background:#efefef; transform:rotate(45deg) translateX(-50%); left:0; top:50%; position:absolute; display:block;}
.contactinfo p{ border-bottom:1px dashed #999; font-size:14px; line-height:2em;}
.contactinfo .subtit{color:#666; font-weight:bold;}
.contactinfo span{color:#ccc; padding:0 0.2em; font-size:13px;}

/*btn*/
.btn{padding:0.5em 3em; background:#666; color:#fff; border-radius:0.3em; display:inline-block;}
.btn:hover{background:#333;}
/*youtube*/
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}
/*Grid for all situation and >1200px*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


@media screen and (max-width:1280px){/*desktop*/
.logo a.show{padding-top:0.2%; padding-right:9%;}

}

@media screen and (max-width:1280px){/*desktop-small*/
.BannerDivMobile{display:none;}

.page{width:100%; padding:0 2%;}
/*nav*/
.nav ul{margin:0;}
	

/*content*/
.side.contactinfo{width:40%;}
.main.contact{width:60%;}
.side{width:28%; padding:0em 1em 1em 1em; }
.main{width:72%; padding:0em 1em 1em 1em;}

/*Grid s size for desktop or landscape*/
.col-d1 {width: 8.33%;}
.col-d2 {width: 16.66%;}
.col-d3 {width: 25%;}
.col-d4 {width: 33.33%;}
.col-d5 {width: 41.66%;}
.col-d6 {width: 50%;}
.col-d7 {width: 58.33%;}
.col-d8 {width: 66.66%;}
.col-d9 {width: 75%;}
.col-d10 {width: 83.33%;}
.col-d11 {width: 91.66%;}
.col-d12 {width: 100%;}


}
@media screen and (min-width:1280px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none !important;}}


@media screen and (max-width:1280px)and (min-width:960px){/*desktop-small*/.hide-ds{display:none !important;}}
@media screen and (max-width:959px)and (min-width:768px){/*pad*/.hide-p{display:none !important;}}
@media screen and (max-width:920px){/*pad*/
.BannerDivMobile{display:none;}

.page{width:100%; padding:0 2%;}
/*header*/
#header .page{display:table;}
.logo{width:30%;}
.logo a.show{padding-top:0.2%; padding-right:8%;}
/*nav*/
.nav{width:65%;}
.nav span.line{margin:0 10px;}

#banner{height:25vh;}
#banner div{font-size:200%;}
/*content*/
.side.contactinfo{width:40%;}
.main.contact{width:60%;}
.side{width:28%; padding:0em 1em 1em 1em; }
.main{width:72%; padding:0em 1em 1em 1em;}
/*contact*/
.contact, .contactinfo{padding:0 1em;}
/*Grid s size for pad*/
.col-p1 {width: 8.33%;}
.col-p2 {width: 16.66%;}
.col-p3 {width: 25%;}
.col-p4 {width: 33.33%;}
.col-p5 {width: 41.66%;}
.col-p6 {width: 50%;}
.col-p7 {width: 58.33%;}
.col-p8 {width: 66.66%;}
.col-p9 {width: 75%;}
.col-p10 {width: 83.33%;}
.col-p11 {width: 91.66%;}
.col-p12 {width: 100%;}

}


@media screen and (max-width:767px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none !important;}
.page{width:100%; padding:0 1em;}
/*header*/

#header .page, #defaultimg .page{padding:0;}

.logo{width:70%; padding:3px 0;}
/*nav*/
.nav{width:100%; background:#f5f5f5; display:none; position:static;}
.nav .col-12{text-align:center;}
.nav ul{margin:0; padding:0; list-style:none;}
.nav ul li{display:block; margin:0; padding:0; font-size:18px; width:100%;}
.nav ul li a{text-align:center; line-height:200%; padding:0.2em 0; font-weight:normal; font-size:18px; display:block; border-radius:0;}
.nav ul li a:hover{background:#333; color:#fff;}
.nav ul li ul{display: block; position:relative; border-top:none; font-size:14px;}
.nav ul li ul li a{display:block; border-bottom:1px dotted #ccc; color:#666; font-size: 14px; padding:0.4em 0.2em;}
.nav ul li ul li a:hover{color:#333; background:#f5f5f5; }
	/*subnav*/
#submenu{border:1px solid #ccc; float:left; width:100%; border-radius:5px; box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.subtoggle{padding:15px; display:block;}
.subnav{display:none;}
.subnav ul li{padding:0;}
.subnav ul li a{border-bottom:1px dotted #ccc; line-height:160%; padding:0.5em 1em; background:none; border-radius:0; color:#666; font-size:15px;}

#banner{height:35vh;}
/*content*/
.content{padding:0 0 2em 0;}
.side.contactinfo{width:100%;}
.main.contact{width:100%;}
.side{width:100%; padding:1em; }
.main{width:100%; padding:1em;}

.contact, .contactinfo{padding:1em;}
.contactinfo::before{display:none;}
.contactinfo{float:right;}
/*Grid s size for mobile*/
.col-m1 {width: 8.33%;}
.col-m2 {width: 16.66%;}
.col-m3 {width: 25%;}
.col-m4 {width: 33.33%;}
.col-m5 {width: 41.66%;}
.col-m6 {width: 50%;}
.col-m7 {width: 58.33%;}
.col-m8 {width: 66.66%;}
.col-m9 {width: 75%;}
.col-m10 {width: 83.33%;}
.col-m11 {width: 91.66%;}
.col-m12 {width: 100%;}

}