@import url(https://fonts.googleapis.com/css?family=Oswald);
		body{
			font-family: arial, sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: arial, '微軟正黑體' !important;
            /*Firefox hack*/
            background: #000;
            padding: 0;
            margin: 0;
            color: #fff;
		}


		.img-responsive {
          display: block;
          max-width: 100%;
          height: auto;
        }

		.bg1{
     		background-color: #000;
            background-image: url(../images/bg.jpg);
            background-position: top center;
            background-repeat: no-repeat;
            min-height:3000px;
            position: relative;
            overflow: hidden;

		}

		#watercool{
            width:60%;
            margin:0 auto;
            color:#ddd;
            line-height:20px;
        }

		.title1{
			color:#3399FF;
			line-height: 200%;
			font-size:50px;
			font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
		}

		.title{
			color:#3399FF;
			line-height: 100%;
			font-size:40px;
			font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
		}	

		.conimg-box{
			margin-bottom: 2%;
			float: left;
			max-width: 320px;
			margin-left:2%;
			height:340px;
		}

		.licon, .ricon{
			width:100px;
			height:20px;
			background-color:#ff6600;
			cursor:pointer;	
		}
		
		.conimg-img{
			width: 340px;
			overflow: hidden;
		}

/*
		.conimg-img:hover{
			box-shadow:inset 0px 0px 30px #3399FF;
		}
*/

		.conimg-box p{
			text-align: center;
		}


		#conimg img{
            cursor:pointer;
            transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            margin-left:2%;
        }


        #conimg img:hover{
             transform: scale(1.2, 1.2);
             -webkit-transform: scale(1.2, 1.2);
        }		

		.closebox{
			background: #3399FF;
		    color: #fff;
		    font-family: 'Helvetica', 'Arial', sans-serif;
		    font-size: 2em;
		    font-weight: bold;
		    padding:10px 6px 0px 6px;
		    text-align: center;
		    width: 30px;
		    height: 30px;
		    position: absolute;
			cursor:pointer;
		    border-radius: 5px;
		    right:10px;
			top:10px;
			-webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
			-moz-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
			-o-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
			transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
	
    	}
		

		.closebox:hover{	
			transform:rotate(180deg);
		}	


        .content{
			width:60%;
			background-color: #333;
			min-height: 400px;
			max-width:1060px;

			display: none;
			border: 1px solid #3399FF;
			z-index:10;
			padding:2%;
			padding-top:4%;
			padding-bottom:4%;
			border-radius: 6px;
			box-shadow:inset 0px 0px 60px #3399FF;
			position: absolute;
        }



        .content a{
        	color:#fff;
        	text-decoration: none;
        }

		.content img{
			margin-bottom: 4%;
			margin:0 auto;
		}

        .content .spec{
        	float:left;
        	width:54%;
        }
		.galleryimg {
			clear:both;
			padding-top:6%;
		}	
		.content .galleryimg img{
			padding-right:4px;
			width:200px;
		}
		.boximg{
			width:400px;
			padding-top:3%;
			float:left;
			background-color: #000;
			padding:1%;
			margin-right:4%;
			box-shadow: 0px 0px 20px #000;
		}

		.boxlearn{
			background-color:#666;
			padding:2%;
			width:60%;
			cursor: pointer;
			text-align: center;
			border-radius: 6px;
			margin-top:4%;
		}
		.boxlearn:hover{
			box-shadow:inset 0px 0px 60px #3399FF;
		}

		.spec{
			font-size:16px;
			float:right;

		}

		.spec_table{
			border:2px solid #999;
			padding:6%;

		}

        .spec_table tr:nth-child(n+2):nth-child(even) td{
			background:#535456;
		}

		#frmBg {
			display:none; 
			position:absolute; 
			background:url("../images/opacity-bk.png") repeat; 
			_background:#000;
			top:0px; 
			width:100%; 
			z-index:7; 
			cursor:pointer;
		}
		
@media screen and (max-width: 1880px) {
		.conimg-box{
			margin-bottom: 2%;
			float: left;
			max-width: 260px;
			margin-left:2%;
			height:260px;
		}

		.conimg-box img{
			width: 260px;
		}
}

@media screen and (max-width: 1680px) {
		.conimg-box{
			margin-bottom: 2%;
			float: left;
			max-width: 260px;
			margin-left:2%;
			height:260px;
		}

		.conimg-box img{
			width: 260px;
		}

		.content .spec{
        	width:100%;
        }

        .boximg{
			width:96%;
			padding-top:3%;
			float:left;
			background-color: #000;
			padding:1%;
			margin-right:4%;
			box-shadow: 0px 0px 20px #000;
		}
		.title{
			color:#3399FF;
			line-height: 100%;
			margin-top:4%;
			font-size:40px;
			font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
		}

		.content .galleryimg img{
			padding-right:4px;
			width:180px;
		}
		.bg1{
			min-height:3200px;			
		}	
}		

@media screen and (max-width: 1366px) {
		.conimg-box{
			margin-bottom: 2%;
			float: left;
			max-width: 220px;
			margin-left:2%;
			height:260px;
		}

		.conimg-box img{
			width: 220px;
		}

		.content .spec{
        	width:100%;
        }

        .boximg{
			width:96%;
			padding-top:3%;
			float:left;
			background-color: #000;
			padding:1%;
			margin-right:4%;
			box-shadow: 0px 0px 20px #000;
		}
		.title{
			color:#3399FF;
			line-height: 100%;
			margin-top:4%;
			font-size:40px;
			font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
		}
		.content .galleryimg img{
			padding-right:4px;
			width:150px;
		}
		.bg1{
			min-height:4000px;			
		}	


@media screen and (max-width: 960px) {
		.content .galleryimg img{
			padding-right:4px;
			width:160px;
		}
		.bg1{
			min-height:3600px;			
		}		

}


@media screen and (max-width: 800px) {
		.conimg-box{
			margin-bottom: 2%;
			float: left;
			max-width: 320px;
			margin-left:2%;
			height:300px;
		}

		.conimg-box img{
			width: 340px;
		}

		.title1{
			font-size:34px;
			line-height: 50px;
			margin-bottom: 4%;
		}
		.content .galleryimg img{
			padding-right:4px;
			width:140px;
		}
		.boximg{
			margin-top:10%;
		}
		.bg1{
			min-height:6000px;			
		}

}