.body
		{ 
			margin: 0; padding: 0;
		}
		

		.container-fluid{
			margin: 0 auto; padding: 0;
			min-width: 100.8%;
		}


		.header
		{
			min-height: 100vh;
			background-image: url(../pic/banner_header.jpg);
			background-position: center center;
			background-image:rgba(0,0,0,0.7)
			background:#000; filter:Alpha(opacity=70);
					
		}
		.align-items-center
		{
			padding-top: 18%;
		}
		.header h1,.header h3,.aboutcontent h2,.aboutcontent p,.resume,.des h2,.des p
		
		{	
			color: black;
			text-align: center;
			font-family:'微軟正黑體';
			font-weight: bolder;
		}
		hr
		{	
			width: 5%;
			background-color: orange;
			size: 10px;
			color: orange;
		}
		ul 
		{ /* 取消ul預設的內縮及樣式 */
        	margin: 0;
        	padding: 0;
        	list-style: none;
    	}

    ul.drop-down-menu 
    	{
        	border: #ccc 1px solid;
        	display: inline-block;
        	font-family: '微軟正黑體';
        	font-size:13px;
			float: right;

    	}

    ul.drop-down-menu li 
    	{
        	position: relative;
        	white-space: nowrap;
        	border-right: #ccc 1px solid;
        	
    	}

    ul.drop-down-menu > li:last-child 
    	{
        	border-right: none;
    	}

    ul.drop-down-menu > li 
    	{
        	float: left; /* 只有第一層是靠左對齊*/
    	}

     ul.drop-down-menu a {
        background-color: #000;
        opacity: 0.7;
        color: #fff000;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 40px;

    }
    ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
        background-color: #ef5c28;
        color: #fff;
    }
    ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
        background-color: #ef5c28;
        color: #fff;
    }
	ul.drop-down-menu ul {
        border: #ccc 1px solid;
        position: absolute;
        z-index: 99;
        left: -1px;
        top: 100%;
       min-width: 180px;
    }

    ul.drop-down-menu ul li {
        border-bottom: #ccc 1px solid;
    }

    ul.drop-down-menu ul li:last-child {
        border-bottom: none;
    }

    ul.drop-down-menu ul { /*隱藏次選單*/
        display: none;
    }

    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
        display: block;
    }

	.cell_menu
	{
		background-color: #000;
		opacity: 0.7;
		width: 90%;



	}
	.cell_menu .nav li a
	{
			text-decoration: none;
			font-family: '微軟正黑體';
			color: white;
	}	
	#example-navbar-collapse
	{
		padding-right:50px;
	}	

		.about
		{
		
			padding: 5%;
			background-color: #082e54;
			
		}
		.aboutcontent
		{
			 opacity: 1;
	;
		}
		.aboutcontent h2,.aboutcontent p,.resume a,.aboutcontent_cell
		{
			color:white;
		}
		.resume
		{
			width: 70px;
			height: 30px;
			border-radius: 30px;
			margin: 0 auto;
			background-color: green;
		}
		.resume a
		{
			text-decoration: none;
		}
		
		.skillbox
		{
			opacity: 1;
			max-width: 100%;
			text-align: center;
			
		}
		.skillbox_cell
		{
			max-width: 100%;
			text-align: center;	
		}
		.thumbnail
		{
				display: inline-block;
				padding: 5%;
		}
		.thumbnail img
		{
			left:0;
			top:0;
			right:0;
			bottom:0;
			margin:auto;
			transition:2s;
			margin:5%;

		}
		.thumbnail img:hover
		{

			transform:rotate(360deg);  
   			-webkit-transform:rotate(360deg);  
    		-moz-transform:rotate(360deg);  
    		-o-transform:rotate(360deg);  
    		-ms-transform:rotate(360deg); 

		}
		
		.thumbnail h3,.thumbnail p,.des h2,.des p
		{
			font-weight: bolder;
			font-family:'微軟正黑體';
		}
		.workbox
		{
			background-image: url(../pic/work_banner.jpg);
			background-attachment: fixed;
			background-size: cover;
			margin-right: 1px;
			margin-left: 1px;
			padding-bottom: 15px;

		}
		.admin,.art,.web
		{
			text-align: center;
			color: white;
			

		}
		.admin .thumbnail,.art .thumbnail,.web .thumbnail
		{
			display: inline-block;
			background-size: cover;
			width: 300px;
			height: 240px;
			padding: 5px;
			justify-content: center;

		}

		.workbox .thumbnail:hover
		{
				opacity: 0.3;
			
		}

		.workbox .thumbnail h3,.workbox .thumbnail h4
		{
			opacity: 0;
			line-height: 200px;
		
		}
		.workbox .thumbnail h3:hover,.workbox .thumbnail p:hover,.workbox .thumbnail h4:hover
		{
			opacity: 1;
			font-weight: bolder;
			color:blue;
			background-color: #fff;
		
		}
		#webcrab
		{
			opacity: 1;
			z-index: 100;
			background-size: 300px 250px;
			background-repeat: no-repeat;
		}
		#webcrab h4
		{
			line-height: 67px;
		}
		
		}
		#webcrab:hover
		{
			opacity: 1;
			transform:scale(1.1,1.1);
			
		}
		.web .thumbnail a
		{
			text-decoration: none;
		}
		 .paintbox {
				background-size: 350px 240px;
				

		}
	



		.footer
		{
		
			background-image: url(../pic/footer_banner.jpg);
			height: 300px;
			
			vertical-align: bottom;
			background-size: cover;
			background-position: center center;
			background-image:rgba(0,0,0,0.7)
			background:#000; filter:Alpha(opacity=70);

		
		}
		.footer img
		{
			display: block;
		}
		
@media only screen and (max-width: 768px) 
		{
				
			.skillcontent,.skillbox,.aboutcontent,.menu{display: none;}
			.ski=[;]  llbox_cell,.skillcontent_cell,.aboutcontent_cell,.cell_menu{display: block;}

		}
	@media only screen and (min-width: 769px) 
		{
			
			.skillbox_cell,.skillcontent_cell,.aboutcontent_cell,.cell_menu{display: none;}
		}

@media only screen and (max-width: 320px) 
		{
				
			.cell_menu{width: 100px;}
	

		}

@media only screen and (max-width: 375px) 
		{
				
			.cell_menu{width: 100px;}
	

		}
@media only screen and (max-width: 768px) 
		{
				
			.cell_menu{width: 98%;}

		
			
		}
@media only screen and (max-width: 720px) 
		{
				
			.cell_menu{width: 97.5%;}
			
		}
@media only screen and (max-width: 908px) 
		{
				
		
			.webcrab img{height: 200px;}
			
			
		}