/*
 ：hover
 block 盒子 ，可以設定寬高
 inline 文字，不能設定寬高
 * */
ul{
	margin: 0;/*去掉外邊距*/
	list-style: none;
	padding: 0;/*去掉內邊距*/
}
body{
	display: flex;/*盒子垂直居中，彈性盒模型，flex佈局*/
	margin: 0;
	/*平滑漸變linear-gradient*/
	background-image: linear-gradient(#f17c67 50%,#376956 50%);
	background-repeat: no-repeat;
	height: 100%;/*繼承父元素的高度*/
}
html{
	height: 100%;/*繼承視窗的高度*/
}

.box{
	display: flex;/*讓紫色變成和pink水平*/
	margin:auto;/*盒子水平居中    margin：auto auto，上下，左右*/
	/*width: 390px;  後面盒子要變小，不能設定絕對寬度*/
	height: 90px;
	background-color: #fff;
	position: relative;
}
.box .list{
	width:300px;
	height: 90px;
	transition: 0.5s;
	overflow: hidden;
	
}
.box .btn{/*必須要加空格*/
	width: 90px;
	height: 90px;
	/*background-color: orchid;*/
	position: relative;/*成為參照物*/
}
.box .list ul li{
	width: 75px;
	height: 90px;
	text-align: center;
	line-height: 90px;
	font-size: 14px;
	font-weight: bold;/*加粗*/
	cursor: pointer;/*滑鼠移到字上出現小手*/
}
.box .list ul{
	display: flex;
	width: 300px;
	
}
.box .list ul li:hover{
	color: #0cf;
}


/*偽元素：憑空生成的元素 before/after ，解決樣式缺陷性
 偽類：狀態/滿足條件*/
.box .btn:before,.box .btn:after{
	position: absolute;/*對應參照物的位置*/
	left: 25px;
	top: 43px;
	display: block;
	content: '';
	width: 40px;
	height: 4px;
	background-color: black;
	transform: rotate(45deg);
	transition: 0.5s;
}
.box .btn:after{
	transform: rotate(-45deg);
}

.box .checkbox:checked~.btn:before{
     top: 33px;
	transform: rotate(0deg);
}
.box .checkbox:checked~.btn:after{
    top: 53px;
	transform: rotate(-180deg);
}
.box .checkbox{
	margin: 0;
	right: 0;
	position: absolute;
	width: 90px;
	height: 90px;
	z-index: 1;
	opacity: 0/*透明度*/;
	
}


.box .checkbox:checked~.list{
	width: 0;
}