@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*nav*/
.nav{padding-top:2em;}
.nav ul li a{color:#fff; font-size:16px;}
.nav ul li a:hover{background:#ff8502;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding-top:20px; transition:.3s; background:#000; padding-bottom:10px; }
#header .page{padding:0;}
#header.show{padding-top:10px; box-shadow: 0 5px 10px rgba(0,0,0,0.3);}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
/*default use*/
#defaultbg{position:fixed; top:0; left:0; z-index:-1; width:100%; height:auto;}
#defaultimg{height:100vh;background:url(images/defautimg-bg.png) no-repeat bottom center;line-height:  0; z-index: 2; background-size: 100%;}
#defaultimg .icon {position: absolute; bottom: 10vh; width: 100%;text-align: center;color: #333;}
#defaultimg .icon i {font-size: 36px;-webkit-animation: mymove 1s infinite;animation: mymove 1s infinite; position: relative;text-shadow: 1px 1px 4px rgba(0,0,0,0.3);}
/*animation*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0% {top: 0px; }
    60% {top: 40px; color:#fff;}
	80%{top: 30px;}
	85%{top: 40px; color:#fff;}
	100%{top: 0px;}
}

@keyframes mymove {
 	0% {top: 0px;}
    60% {top: 40px; color:#fff;}
	80%{top: 30px;}
	85%{top: 40px; color:#fff;}
	100%{top: 0px;}
	}
.d1{background:url(images/d1.jpg) no-repeat, url(images/loop.jpg); background-size: 100%; background-position:top,50vh;}
.dgametheme{text-align:center; padding-top:4em;}
.d2{background:url(images/d1-2.png) no-repeat top center; background-size:100%; min-height:155px; z-index: 3; position:relative;}
.d3{z-index:2; margin-top:-155px; position:relative; min-height: 30vh;}
.d4{z-index:3; margin-top:-215px;  position:relative;}
.d5{z-index:3; position:relative;}
.d6{z-index:2; background:#fff url(images/d6-bg.jpg) no-repeat left; margin-top:-135px; position:relative;}
.d6 .rr{position:absolute; right:0; top:0; z-index: -1;}
.d6 .page{padding:3em 5em; z-index: 10;}
.d6 .link{position:absolute; bottom:1em; right:0;}
.d6 i{color: #008cd6;padding: 0 1px;}
.d3, .d4, .d5{line-height:0; text-align: center; overflow: hidden;}
.spot{position:relative; z-index:3;}
.ll{position:absolute; left:0; z-index: 4; bottom:-5em; width:23%; z-index: 3;}
.ll img{width:100%; height: auto; opacity: .7;}
.inner{position:absolute; line-height: 180%; font-size:15px; z-index: 10; text-align: left;}
.dtitle{font-size:40px; margin-bottom:5%; letter-spacing:5px; position:relative; display:inline-block;}
.d3 .inner{width:35%; top:15%; right:50%;}
.d4 img{max-width:100%; height: auto;}
.d4 .inner{top:20%; right:10%;}
.d4 .dtitle{color:#fff; text-shadow:0 0 5px rgba(0,0,0,1); }
.d4 .more a{color:#fff; border:none; background:#ff8502;}
.d5 .inner{width:25%; top:10%; left:10%;}
.more a{display:inline-block; padding:0.1em 1em; border:1px solid #000; color:#000; letter-spacing:1px;}
.more a:hover{background:#000; color:#fff;}
.d3 .dtitle::after, .d5 .dtitle::after, .d4 .dtitle::after{content:""; width:154px; height:98px; position:absolute; top:-200%; background:url(images/title-bg.png) no-repeat; z-index:-1;}
.d3 .dtitle::after{ right:-60%;}
.d4 .dtitle::after{ right:70%;}
.d5 .dtitle::after{right:-50%;}

.recommend{padding:1.5em; font-size:13px;}
.recommend h4{color:#0098e8; font-size:16px;}
.recommend h4, .recommend p{margin:0.2em 0; padding:0;}
/*content*/
.bg{background:url(images/d1.jpg) repeat-y ; background-attachment: fixed;}
.content{background:linear-gradient(#000 5%,rgba(0,0,0,0));}
.content .page{max-width:1360px;}
.content .main{background:linear-gradient(rgba(236,245,206,1) 30px,rgba(255,255,255,1) 50px,rgba(255,255,255,0.7)); box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 1em;}
#banner div::before{content:""; width:100vw; height:30%; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); position:absolute; bottom:0;}
#banner{overflow:hidden; position:relative; line-height: 0;}
#banner div{width:50%; height:100%; position:absolute; top:0; left:0; z-index: 200;/* background:url(images/bg-2.png) no-repeat left;*/ background-size:90%;}
#banner h4{position:absolute; top:50%; left:20%; font-size:300%; color:#fff; text-shadow:0 0 5px rgba(0,0,0,1); text-align: right;}
.tit{margin:0 0 0.5em 0; color:#626e26;}
/*list*/
.list{padding:1em;}

.list h3.subject{font-weight:normal; margin:0; color:#646a24;}
.list a{diaplay:block; float:left; color:#666; background:#fff; line-height: 0; box-shadow: 0 0 10px rgba(0,0,0,0.2); width:100%;}
.list a:hover{color:#014283; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.list figure img{transition:.3s;}
.list a:hover h3.subject{color:#ff6600;}
.list a:hover img{transform:scale(1.05, 1.05);}
.list a:hover p{color:#333;}
.list figure{diaplay:block;}
.list figure div{line-height:0; overflow: hidden; position:relative;}
/* image hover mask effect*/
.list.pic a:hover div::before{opacity:1;}
.list.pic figure div::before{content:"詳細內容→";  text-align: center; color:#fff; width:100%; height:100%; position:absolute;  background:rgba(153,51,0,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list.pic figure div.detail::before{content:"VIEW";}

.list figcaption{padding:0.3em 0.5em; min-height: 3em; diaplay:block; line-height: 160%;}
.list figcaption p{font-size:14px; color:#666; padding-top:0.5em; margin:0;}
.list.gallery a{background:rgba(255,255,255,0.8); padding:13px; color:#646a24;}
.list.gallery figure{background:rgba(255,255,255,0.7);}
.list.gallery a:hover {color:#d74900;}

.innerhtml .col-m12{padding: 0.5em;}
/*prodetail*/
.prodetail h1.subject{font-size:22px; margin-top:0; color:#226EB5;}
.prodetail .col-6, .prodetail .col-12{padding:0 1em;}
.prodetail .col-6 img{border:10px solid #fff; filter: drop-shadow(0 -7px 5px rgba(0,0,0,0.1));}
.prodetail h4.subtit{margin-bottom:0.5em; color:#999; border-bottom:1px solid #ccc;}
.prodetail h4.subtit span{display:inline-block; padding:0.3em 1em; border-radius:0.5em 0.5em 0 0; border:1px solid #ccc; border-bottom:none; transform:translateY(2px); background:#fff;}
/*footer*/
#footer{font-size:13px; color:#ccc; background:#000; word-break: break-all; line-height: 1.5em; padding-top:3em; padding-bottom:1em; z-index: 11; position:relative;}
#footer .copyright{color:#ffa800; border-top:1px solid #666; text-align: center; padding-top:1em;}
#footer .copyright span{display:inline-block;}
#footer .col-8 a{display:block; color:#fff; }
#footer .col-8 a:hover{color:#ff8502; text-decoration:underline;}
.online-contact {position: fixed;cursor: pointer;bottom: 2%; right: -200px;z-index: 199; width: 270px;height: auto; text-align: center;font-size: 15px; transition: 1s;line-height: 160%;}
.online-contact h3.qabtn { border-radius: 50%;width: 60px; height: 60px;background: #0C0;color: #fff; text-align: center; margin: 0 10px 0 0;float: left;padding: 5px;cursor: pointer; font-size: 60px;overflow: hidden; transition: 0.3s;}
.online-contact-hover {right: 1em;}
@media screen and (max-width:1439px){/*desktop 1440*/
	#banner h4{left:3%;}
.d3 img{transform:translateX(-20%);}
.d5 img{transform:translateX(-15%);}
.d3 .inner{width:40%; top:15%; right:53%;}
.d4 .inner{top:20%; right:10%;}
.d4 .dtitle{color:#fff; text-shadow:0 0 10px rgba(0,0,0,1); }
.d5 .inner{width:25%; top:10%; left:5%;}
}
@media screen and (max-width:1280px){/*desktop*/
	.logo{padding-top:0.5em;}
	#header{padding-top:10px;}
	.nav ul li a{font-size:15px;}
	.d1 .page{padding:5%;}
	.d3 .inner{width:50%; top:15%; right:40%;}
	.d3 img{transform:translateX(-23%);}
	.d5 img{transform:translateX(-18%);}
	.d6{background:#fff;}
	#defaultimg{height:70vh;}
	#defaultimg .icon{bottom: 39vh;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.inner{font-size:14px;}
	.ll{left:-10%;}
	.d3 img{max-width:160%; transform:translateX(-12%);}
	.d5 img{max-width:140%; transform:translateX(0);}
	.d3 .inner{width:50%; top:0%; right:40%;}
	.d5 .inner{width:43%; top:-2%; left:5%;}	
	.nav ul li a{padding-left:0.3em; padding-right:0.3em;}
	.d6 .page{padding:5em 1em 3em 1em;}
	#banner div::before{height:10%;}
	.content{background:none;}
	#defaultimg{height:40vh;} 
	#defaultimg .icon{top: 32vh;}
	#defaultimg .icon i {font-size: 25px;}
}
@media screen and (max-width:767px){/*phone*/
	#banner h4{font-size:200%;}
	.nav{padding-top:0;}
	.nav ul li a{color:#ccc;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	#defaultimg{height:48vh;} 
	.dtitle{font-size:30px;}
	.prodetail .col-6, .prodetail .col-12{padding:0;}
	.d3 img{max-width:140%; transform:translateX(-10%);}
	.d3 .inner{top:-4%;}
	.d4 img{max-width:150%; transform:translateX(0);}
	.d4{margin-top:-32%;}
	.d4 .inner{top:5%;}
	.d5 img{max-width:130%; transform:translateX(0);}
	.d5 .inner{width:70%; top:0; text-shadow:0 0 5px rgba(255,255,255,1);}
	.d3 .dtitle::after, .d5 .dtitle::after, .d4 .dtitle::after{background-size:50%; top:-70%;}
	.d3 .dtitle::after{ right:-80%;}
	.d4 .dtitle::after{ right:0%;}
	.d5 .dtitle::after{right:-60%;}
	.d6 .page{padding:10em 1em 3em 1em;}
	.d6 .link{position:static; padding-top:2em; text-align: center;}
	.side{padding-left:0; padding-right:0;}
	#footer .col-m6{padding: 1em;}
	#defaultimg .icon{top: 37vh;}
	#defaultimg .icon i {font-size: 20px;}
}