html{
	background: #ffd9ec;
	color: #00a835;
	font:400 14px/1.4 BlinkMacSystemFont,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
body{
	margin:0;
}
button,input{
	font:inherit;
}
a{
	color:#ff32bb;
}
::selection{
	background: #1e67ff;
	color: #ffc9d5;
}

.pink{
	color:#ff32bb;
}
.cur{
	cursor: pointer;
	color:#ff32bb;
}

::-webkit-scrollbar-track-piece{
	background:#ffd9ec;
}
::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-thumb{
	height:40px;
	background-color:#00a835;
	border:0;
}
::-webkit-scrollbar-thumb:hover{
	background-color:#ff32bb;
}



.style-list-box{
	font-weight: bold;
	font-size:18px;
}
.style-list-box h4{
	margin:0;
	font-size:14px;
	font-style:italic;
	opacity: .5;
	padding:30px 0 6px 20px;
}
.style-list-box a{
	line-height: 40px;
	display: block;
	cursor: pointer;
	padding:0 44px 0 20px;
	position: relative;
	color:#00a835;
}
.style-list-box a .name{
	letter-spacing:.5em;
}
.style-list-box a .cor{
	position: absolute;
	right:0;
	top:0;
	width: 40px;
	text-align: center;
}
.style-list-box a .cor:hover{
	background:#00a835;
	color:#ffd9ec;
}
.cor.remove:after{
	content: '✕';
}
.cor.vote:after{
	content: '❤';
}
.style-list-box a:hover{
	box-shadow: 4px -2px 0 #ff32bb;
	color:#ff32bb;
}
.style-list-box a.active{
	background:#00a835;
	color: #ffd9ec;

	box-shadow: 4px -2px 0 #ff32bb;
}



.content{

}
.content p{

}
.content p .line{
	display: inline-block;
}
.content del{
	opacity: .3;
}
.content b{
	margin:0 2px;
}

h1{
	margin:0 -10px 0 0;
	padding:30px 0 20px 15px;

	font-weight: 800;
	font-size:3em;
	line-height: 1;

	text-shadow:4px -2px 0 #ff32bb;
}
.output img{
	display: inline-block;
	height: 480px;
	width: 640px;
	object-fit: contain;
	background: #222;
}
.output img[data-wide="21:9"]{
	height: 320px;
	width: 748px;
}
.output img[data-wide="16:9"]{
	height: 405px;
	width: 720px;
}
.output img[data-wide="1:1"]{
	height: 500px;
	width: 500px;
}
.side-right-box {
	font-size:12px;
	text-align: left;
	background:#ffd9ec;
}

.style{

}
.style .group{

}
.style .group .head h3{
	background:#00a835;
	color:#ffd9ec;
	font-size:18px;
	line-height: 40px;
	padding:0 14px;
	letter-spacing:.5em;
}
.style .group .body{
	padding:10px;
}
.style .group .body h4{
	border:0;
	margin:20px 10px 15px;
	font-size:14px;
}
.style .label-box{
	padding:4px 0;
}
.style .label-box .head{
	overflow: hidden;
	line-height: 1;
}
.style .label-box .head b{
	float: left;
	letter-spacing:.5em;
}
.style .label-box .head span{
	float: right;
	color:#ff32bb;
}

.style .style-ctrl-box{
	padding:20px 0;
	overflow: hidden;
}

input[type="range"]{
	width: 100%;
	margin:0;

}
input[type="checkbox"],
input[type="radio"]{
	display: inline-block;
	vertical-align: middle;
	margin-top:-3px;
}
.btn-box{
	padding:2px 0 0;
}
.btn{
	float: left;
	background:#00a835;
	color:#ffd9ec;
	border:0;
	cursor: pointer;
	outline:none;
	user-select:none;
	margin:0 6px 6px 0;

	font-weight: bold;
	font-size:14px;
	padding:8px 12px;

	text-align: center;
	box-sizing: border-box;
}
.btn.big{

	font-size:2em;
	line-height: 30px;
	height:60px;
	margin:0 10px 10px 0;
	padding:15px 0;
	width:calc( 50% - 10px);
}
.btn.wire{
	background:#ffd9ec;
	color:#00a835;
	box-shadow: 0 0 0 2px #00a835 inset;
}
.btn:active{
	box-shadow: 4px -2px 0 #ff32bb;
}
.btn.wire:active{
	box-shadow:
			0 0 0 2px #00a835 inset,
			4px -2px 0 #ff32bb;
}

.label-box{
	display: block;
}

input[type="file"]{
	display: none;
}


.img-list{
	white-space: nowrap;
	overflow: auto;
	font-size:0;
}
.img-list img{
	display: inline-block;
	vertical-align: top;
	width: 160px;
	height: 120px;
	object-fit: contain;
	cursor: pointer;
	background: #ff32bb;
}
.img-list img:nth-child(even){
	background:#00a835;
}



@media (min-width:1160px){
	html{
		overflow: hidden;
		padding-bottom:200px;
	}
	h1{
		/*width: 4.5em;*/
	}


	.side-left-box{
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		width: 210px;
		overflow: hidden;
		overflow-y: auto;
	}

	.style-list-box{
		width: 180px;
		padding:10px 0 100px;
	}

	.output{
		position: absolute;
		top:0;
		right:300px;
		bottom:0;
		left:210px;

		height: 480px;
		margin:auto;
		text-align: center;

	}

	.side-right-box {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;

		width: 300px;
	}

	.style{
		position: absolute;
		top:0;
		bottom:0;
		right:0;
		left:0;

		padding:20px 0 120px;

		overflow: hidden;
		overflow-y: auto;
	}

	.btn-box{
		position: absolute;
		bottom:0;
		right:0;
		left:0;
		z-index:1;

		padding:5px 0 0 0;
		background:#ffd9ec;
	}

	.btn-box:before{
		content: '';

		position: absolute;
		pointer-events: none;
		height:40px;
		left:0;
		right:0;
		bottom:100%;
		z-index:1;

		background: linear-gradient(rgba(255, 217, 236, 0), #ffd9ec);
	}



	.ctrl-box{
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:130px;
	}

	.img-list{
		position: fixed;
		bottom:0;
		left:0;
		right:0;
	}
}



@media (max-width:1160px){
	h1{
		font-size:2.4em;
	}
	.style-list-box{
		overflow: hidden;
		padding:2px 0 4px;
	}
	.style-list-box h4{
		display: none;
	}
	.style-list-box a{
		float: left;
		line-height: 40px;
		padding:0 40px 0 10px;
	}
	.output{
		position: sticky;
		top: 0;
		left: 0;
	}
	.output img{
		display: block;
		margin:0 auto;
		max-width:100%;
		height:auto;
	}
	.btn-box{
		overflow: hidden;
		padding:30px 0 10px 10px;
	}
	.img-list{
		padding-top:0;
	}
	.style .group .body{
		padding:10px 20px;
	}
}

@media (max-width:630px){
	.style-list-box a{
		width: 33.33%;
		box-sizing:border-box;
		padding:0 10px 0 0;
		text-align: center;
		letter-spacing:.3em;

	}
	.style-list-box a .cor{
		width: 30px;
	}
}

@media (max-width:370px){
	.style-list-box a{
		font-size:14px;
		line-height: 30px;
	}
}