:root{
	--outline1:rgb(245, 203, 141); 			/*外框顏色*/
	--outline2:rgb(93, 91, 88);
	--border:#ccc; 
	--nav_sm:#ff86a5;    					  /*選單顏色*/
	--nav_lg:#70b0e7;	
	--nav_a_font:#f4e8c8;
	--nav_a_botom:#a6e22c;
	--nav_a_hover: #f4eed3;                 	         
	--container_sm:rgb(186, 215, 83);       /*內容顏色*/
	--container_lg:#d6cbe9;
	--container1_div_bg: rgba(126, 67, 5, 0.8);
	--container2_font:rgb(236, 224, 221);
	--header_bg:#888;						 /*標題顏色*/
	--header_font:rgb(85, 12, 12);
	--menu_btn_bg : rgb(68, 64, 64);       /*左邊選單按鈕顏色*/
	--menu_btn_font:rgb(239, 213, 213);
	--menu_bg:#9090db;
	--henberg_btn_bg : rgb(49, 46, 46);   /*右邊漢堡選單顏色*/	
	--black:#000;
	--white:#fff;		
}
*{
	margin:0;
	padding: 0;
	list-style: none;
}
.grid_center {           /*---------------------置中設定-------------------------------*/
	display: flex;       /* 要置中需設成 flex     */
	align-items: center; /*垂直致中*/
	justify-content: center;/*水平置中*/ 			
}
.grid_header
{
	width:100%;
	height:20%;
	display:grid;
	outline:1px var(--outline2) solid ; /* rgb(245, 203, 141) */
	grid-template-columns:repeat(auto-fit,minmax(300,3frx)); 
	border:1px var(--border) solid;
	border-radius:10px;    
}
.grid-container {	
	font-size:22px;
	height:40px;
	color:var(--nav_lg);
	position:inline-block;
	background-color: var(--container_lg);
}
.grid-container1 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(280px,1fr));/* 達成RWD的功效  最小為 280px  若寬為 W 則 W/280 取其整數最多個數 剩下的再分配給個格子數 */
	grid-template-rows: repeat(auto-fit,minmax(80px,1fr));/* 達成RWD的功效  最小為 80px  若高為 H 則 H/80 取其整數最多個數 剩下的再分配給個格子數 */
	grid-column-gap: 10px;
	background-color:var(--container_lg);
	color:var(--white);
	margin :0 auto;
}
.grid-container1 > div {                                   /* 每一格內容作設定    */
	background-color:var(--container1_div_bg);	
	padding: 20px 0;
	font-size: 20px;
	border:1px var(--border) solid;
	border-radius:10px;
}
.hide{
	display:none;
} 
#menu_control{
	position :absolute;
	z-index:-2;
	opacity:0;
}
#menu_control:checked ~ .header nav{left:0;} 
@media screen and (max-width:768px){	         /*手機畫面         */
	.grid_container2
	{	
		width:100%;
		height:600px;
		display:grid;
		border-radius:5px; 
		font-size:16px;
		outline:1px var(--outline1) solid ; /* rgb(245, 203, 141) */
		grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); 
		color:var(--container2_font);
		background-color: var(--container_sm) ;
	}
	.grid_container3 /*以grid_area 排版*/
	{
		width:100%;
		height:600px;  
		background-color: var(--container_sm) ;
		display:grid;
		border-radius:5px; 
		outline:1px var(--outline1) solid ; /* rgb(245, 203, 141) */
		grid-template-columns: 10% 20% 20% 20% 20% 10%; 
		grid-template-rows:10% 20% 20% 20% 20% 10%;     
		grid-template-areas: 
		"a1 a1 a1 a1 a1 a1"
		"b1 b1 b1 b1 b1 b1"
		"b1 b1 b1 b1 b1 b1"
		"c1 c1 c1 c1 c1 c1"
		"c1 c1 c1 c1 c1 c1" 
		"d1 d1 d1 d1 d1 d1";
	}	
	.header{
		display: flex;
		justify-content: center;/*水平置中*/
		align-items: center; /*垂直致中*/
		background-color:var(--header_bg);
		color:var(--header_font);
		height:50px;
		font-size:20px;
		font-weight:bold;		
	}	
	.co{						/*+ - 符號*/
		position:absolute;
		right:30px;
	}
	nav{					/*下拉式百葉窗式選單*/
		width: 100%;
		height: calc(100vh-50px);
		background-color:var(--nav_sm);/* #6386a5;*/
		position: absolute;
		top:50px;
		left:-130%;
		transition: .5s;
		z-index:9;
		border:1px var(--border) solid;
		border-radius:5px;
	}
	nav a{		
		border-bottom: none;
		color: var(--nav_a_font); 
		text-decoration: none;
		display: block;
		left:0px;
		padding: 6px 20px;
		border-bottom: 1px solid var(--nav_a_botom);
	
	}
	.menu_btn,.menu_btn2{
		width: 47px;
		height: 47px;	
		display: block;
		position: absolute;
		top: 2px;
	}	
	.menu_btn  /*  左邊顯示文字的按鈕  */
	{
		left:2px;
		text-align: center;   /*文字橫向置中*/
		background-color:var(--menu_btn_bg);
		color:var(--menu_btn_font);
		border-radius:5px;
	}
	.menu_btn2{		/*  右邊漢堡選單按鈕  */
		right: -14px;
	}
	.menu_btn2 span{
		opacity: 0;
		width: 1px;
		height: 1px;
		overflow:hidden;
	}
	.menu_btn2::before{     /* 漢堡選單效果*/
		content: '';
		position:absolute;
		height: 3px;
		width: 24px;
		left: 2px;
		background-color: var(--henberg_btn_bg);
		top: 0;
		bottom: 0;
		margin: auto;
		box-shadow: 0px 8px 0px  var(--henberg_btn_bg),      /* 下方線 */
		0px -8px 0px  var(--henberg_btn_bg);                          /* 上方線 */
	}
	#menu-0,#menu-1,#menu-2,#menu-3,#menu-4,#menu-5,#menu-6,#menu-7,#menu-8,#menu-9
	{		
		color:var(--black);
		background-color: var(--menu_bg);
	}		
}
:root{
	--dist:100px;
}
@media screen and (max-width:1300px) {	/*中螢幕畫面         */
	:root
	{
		--dist:93px;
	}
	a{font-size:14px};
}
@media screen and (min-width:768px)  {   /*大螢幕畫面  */ 
	.grid_container2
	{	
		width:100%;
		height:600px;
		display:grid;
		border-radius:5px; 
		outline:1px var(--outline1) solid ; /* rgb(245, 203, 141) */
		grid-template-columns: 1fr 1fr 1fr 1fr; 
		grid-template-rows:10% 1fr 1fr 5%; 
	}
	.grid_container3 ,.grid_container4/*以grid_area 排版*/
	{
		width:100%;
		height:600px;  
		background-color: var(--container_lg) ;
		display:grid;
		border-radius:5px; 
		outline:1px var(--outline1) solid ; /* rgb(245, 203, 141) */
		grid-template-columns: 10% 20% 20% 20% 20% 10%; 
		grid-template-rows:10% 20% 20% 20% 20% 10%;     
		grid-template-areas: 
		"a1 a1 a1 a1 a1 a1"
		"b1 b1 b1 c1 c1 c1"
		"b1 b1 b1 c1 c1 c1"
		"b1 b1 b1 c1 c1 c1"
		"b1 b1 b1 c1 c1 c1" 
		"d1 d1 d1 d1 d1 d1";
	}		
	.menu_btn{display: none;}	
	.menu_btn2{display: none;}
	.co{
		position:absolute;
		display:none;
	}	
	li a
	{
		text-align: left;	
	}
	.header{
		display: flex;       /* 要置中需設成 flex     */
        align-items: center; /*垂直致中*/
        justify-content: center;/*水平置中*/		
		height:40px;		
		background-color:var(--header_bg);
		color:var(--header_font);		
		font-size:24px;
		font-weight:bold;
		border:1px var(--border)  solid;
		border-radius:5px;
	}		
	nav{
		position: relative;
		left:0px;
		display: flex;
		width:auto;
		height: 30px;
		background-color: var(--nav_lg);
		text-align: center;
		z-index:9;
		border:1px var(--border) solid;
		border-radius:5px;		
	}
	nav a{
		border-bottom: none;
		color: var(--nav_a_font);
		text-decoration: none;
		display: block;
		top:0px;
		left:0px;
		padding: 6px 20px;
		border:1px var(--border) solid;		
		border-radius:4px;
	}	
	nav a:hover{
		background-color: var(--nav_a_hover);
		color:var(--black);
	}
	#menu-0,#menu-1,#menu-2,#menu-3,#menu-4,#menu-5,#menu-6,#menu-7,#menu-8,#menu-9
	{		
		position:absolute;
		top:30px;
		width:320px;
		background-color: var(--menu_bg);	
		color:var(--black);
	}
	#menu-0
	{		
        left:1px;			
	}
	#menu-1
	{		
        left:calc(var(--dist)*1.1);			
	}
	#menu-2
	{		
		left:calc(var(--dist)*2);	
		width:280px;			
	}
	#menu-3
	{		
		left:calc(var(--dist)*3);
		width:280px;	
	}
	#menu-4
	{	
		left:calc(var(--dist)*4.5);	
	}
	#menu-5
	{
		left:calc(var(--dist)*5.9);	
	}
	#menu-6
	{		
		left:calc(var(--dist)*7);
		width:220px;		
	}	
	#menu-7
	{	
		left:calc(var(--dist)*8.3);
		width:240px;
	}	
	#menu-8
	{		
		left:calc(var(--dist)*9.3);
	}	
	#menu-9
	{		
		left:calc(var(--dist)*11);
	}
}