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

@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);

* {margin:0px; padding:0px;}
.cleardiv {clear:both;}
body, html {position:relative; height:100%; width:100%; background:url(../images/bg2.jpg) top center repeat;}
#back {position:fixed; right:40px; bottom:120px; cursor:pointer; display:none; z-index:10;}

#wrapper {background:url(../images/bg.jpg) top center no-repeat;}

nav {display:none; margin-top:40px;}
.nav>li>a {padding:8px;}
.navbar {min-height:36px;
	background:#d1c0a5; border:none; color:#743506;
	padding: 0px;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
	-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
	transition: background .5s ease-in-out,padding .5s ease-in-out;}
.navbar-default .navbar-nav>li {color:#743506; font-size:15px; font-family:微軟正黑體; font-weight:bold;}
.navbar-default .navbar-nav>li>a {color:#743506; font-size:15px; font-family:微軟正黑體; font-weight:bold;}
.navbar-default .navbar-nav>li>a:hover {color:#743506;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {color:white; background:#743506;}
.top-nav-collapse {padding: 0;}
nav .container {width:980px; padding-left:10px; padding-right:10px;}

#layout { width:980px;margin:auto; position:relative; }
header {height:400px; background:url(../images/mobile.jpg) center no-repeat; margin-top:-20px;//*box-shadow:0px 0px 30px rgba(0, 0, 0, 0.5);*//}
header img {display:none;}
#content {min-height:350px; margin: 0;}
section .title {width:515px; height:65px; margin:auto;}
section .title2 {width:834px; height:224px; margin:auto;}
#spe_gds {width:980px; margin:auto; padding:10px 0px; position:relative;}
#spe_gds a {display:inline-block; width:480px; height:300px; margin:5px 10px 5px 0px; box-sizing:border-box; position:relative; background:white;}
#spe_gds a:nth-child(2n) {margin-right:0px;}
#spe_gds a.nth-child-2n {margin-right:0px;}
#spe_gds a img {outline:none; border:none;}
#spe_gds a:hover {bottom:5px;}
#spe_gds a:hover img {opacity:0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);}
footer {width:100%; height:100px; }

@media screen and (max-width: 768px) {
	#back {right:10px; bottom:10px;}
	#back img {width:60px; height:auto;}
	body, html {background:none;}
	#wrapper {background:none;}
	nav {display:none !important;}
	#layout {width:100%;}
	header {height:auto; position:relative; background:none; margin-top:10px;}
	header img {display:block; width:100%; height:auto;}
	#content {min-height:auto; background:none; margin-top:0px;}
	
@media screen and (max-width: 480px) {
	
}

@media screen and (max-width: 360px) {
	
	section .title {width:100%; height:auto; margin:auto;}
	section .title img {width:100%; height:auto; margin:auto;}
	section .title2 {width:100%; height:auto; margin:auto;}
	section .title2 img {width:100%; height:auto; margin:auto;}
}