@charset "UTF-8";

/* Scrollbar */
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; }
::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; }
::-webkit-scrollbar-thumb { background-color: #9a9a9a; }


body { font-family: 'Noto Sans SC', sans-serif; font-size: 100%; background-color: #C4E0FD; color: #fff; margin: 0; }
.content{ margin: 3em; }
.wishes{ width: 90%; margin: 0 auto; }
.foot{ color: #333; text-align: center; }
.name{ padding: 30px 0 30px 0; }
.name a { color: #333; text-decoration: none; }

#pic { width: 70%; margin: 0 auto; text-align: center; }
#pic img { margin-top: -150px; max-width: 900px; }
		
ul,li { list-style: none; }
ul { padding: 3em; font-size: 0; text-align: center; }
ul li { display: inline-block; *display: inline; zoom: 1; margin: 1em 1em 3em; font-size: 16px; /* border: 2px solid black; */ }

ul a { 
	box-shadow: 5px 5px 7px rgba(33,33,33,0.7);
	position:relative;
	display:inline-block;
	font-size:100%;
	text-decoration:none;
	color:#000;
	background-color:#ffc;
	/* height:10em; 不固定贴纸高度 */
	width:150px;
	padding:1em;
	-moz-transition: -moz-transform .15s linear;
	-webkit-transition: -webkit-transform .15s linear;
	-o-transition: -o-transform .15s linear;
	-ms-transition: -ms-transform .15s linear; 
	transition: transform .15s linear;
    border-radius: 40px;
}
        
ul p { text-align: left; }
ul h2 { font-size: 100%; text-align: right; }
ul h3 { font-size: 80%; text-align: right;  }
        
ul li:nth-child(3n) a { background-color: #cfc; }        
ul li:nth-child(3n+1) a { background-color: #ccf; }

ul li a:hover, ul li a:focus { 
	-moz-box-shadow: 10px 10px 7px rgba(0,0,0,0.7);
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,0.7);
    box-shadow: 10px 10px 7px rgba(0,0,0,0.7);
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -o-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    border-radius: 40px;
    position: relative;
    z-index: 5;
}

@media screen and (max-width:768px){
.content{ margin: 0; }
ul li { margin: 1em 1em 1em; font-size: 16px; /* border: 1px solid black; */ }
ul a { width: 220px; }
#pic { width: 100%; }
}

@media screen and (max-width:580px){
ul a { width: 280px; }
#pic { width: 90%; }
#pic img { margin-top:-100px; }
}