﻿.classes-thing {
	width: 100%;
	height: auto;
	margin: auto;
}
.classes-thing-root {
	width: 1200px;
	height: auto;
	margin: auto;
	padding: 20px 0px 20px 0px;
}
.classes-thing-root ul {display: block; height:100%; width:auto; text-align: left;}
.classes-thing-root ul li {list-style: none; display: inline-block; margin: 2px; padding-left:10px; padding-right:10px; border-left:0px solid #1D5590; font-size: 14px; background-color: #eeeeee;}
.classes-thing-root ul li a {display: inline-block; height:auto; line-height: 40px; color:#333333; text-decoration:none; padding: 0px 10px 0px 10px;}
.classes-thing-root ul li a:visited {display: inline-block; color:#333333; text-decoration:none; padding: 0px 10px 0px 10px;}
.classes-thing-root ul li a:hover {display: inline-block; color:#FF9800; text-decoration:none; padding: 0px 10px 0px 10px;}
.classes-thing-root ul li a:active {display: inline-block; color:#FF9800; text-decoration:none; padding: 0px 10px 0px 10px;}

.classes-thing-node {
	width: 1200px;
	height: auto;
	margin: auto;
	border: 1px solid #aaaaaa;
	padding: 8px;
}
.classes-thing-node ul {display: inline; height:100%; width:auto;}
.classes-thing-node ul li {list-style: none; display: inline-block; margin: 2px; padding-left:10px; padding-right:10px; border-left:0px solid #1D5590; font-size: 14px;}
.classes-thing-node ul li a {display: inline-block; height:auto; line-height: 40px; color:#333333; text-decoration:none; margin-top:0px;}
.classes-thing-node ul li a:visited {display: inline-block; color:#333333; text-decoration:none; margin-top:0px;}
.classes-thing-node ul li a:hover {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}
.classes-thing-node ul li a:active {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}

.thing {
	width: 100%;
	height: auto;
	margin: auto;
	padding: 10px 0px 10px 0px;
}
.thing-content {
	width: 1200px;
	height: auto;
	margin: auto;
	padding: 10px 0px 10px 0px;
}
.thing-content p {font-size: 14px; text-indent: 2em; line-height: 150%; padding: 0px 2px 0px 2px;}
.thing-content ul {display: flex; flex-wrap: wrap; height:100%; width:auto; padding: 0px 0px 0px 0px;}
.thing-content ul li {list-style: none; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: calc((100% - 20px * 3) / 4); box-sizing: border-box; margin-left:20px; margin-top:0px; font-size: 14px;}
.thing-content ul li:nth-child(4n+1) {margin-left:0px ! important;}
.thing-content ul li span a {position: relative; display: flex; justify-content: center; align-items: flex-start; text-align: center; color:#333333; text-decoration:none; margin-top:0px; width: 100%; height: 100%;overflow: hidden;}
.thing-content ul li span a:visited {display: flex; color:#333333; text-decoration:none; margin-top:0px;}
.thing-content ul li span a:hover {display: flex; color:#FF9800; text-decoration:none; margin-top:0px;}
.thing-content ul li span a:active {display: flex; color:#FF9800; text-decoration:none; margin-top:0px;}
.thing-content ul li:hover a img {transform:scale(1.1);}

.product-play::before {position:absolute; z-index: 1024; left: 20px; bottom: 15px; content:""; width: 25px; height: 25px; border: 2px solid #ffffff; border-radius: 50%;}
.product-play::after {position:absolute; z-index: 1024; left: 31px; bottom: 23px; content:""; width: 0px; height: 0px; border-left: 10px solid #ffffff; border-top: 6px solid #ffffff; border-bottom: 6px solid #ffffff; border-right: 10px solid #ffffff; border-top-color: transparent; border-bottom-color: transparent; border-left-color: white; border-right-color: transparent;}

.thing-image {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 180px;
	border: 1px solid #dddddd;
	background-color: #fafafa;
	overflow:hidden;
	padding: 1px;
	box-sizing: border-box;
}
.thing-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:all .5s;
}
.thing-view {
	display: block;
	flex-grow: 1;
	width: 100%;
	height: 80px;
	overflow:hidden;
	padding: 15px 5px 20px 5px;
	box-sizing: border-box;
}
.thing-view a {font-size: 16px;}
.thing-view label {display: block; padding: 8px 0px 8px 0px; color: #999999;}

.thing-page {
	width: 1200px;
	height: auto;
	margin: auto;
	padding: 20px 0px 20px 0px;
}
.thing-page-disabled {
	color: #aaaaaa;
	padding:5px 10px 5px 10px;
}
.thing-page-omit {
	color: #666666;
	padding:5px 3px 5px 3px;
	border:0px solid #f9f9f9 ! important;
}
.thing-page-current {
	color: #ffffff;
	background-color: #2b3aa1;
	padding:5px 10px 5px 10px;
}
.thing-page ul {display: block; height:100%; width:auto; text-align: center;}
.thing-page ul li {list-style: none; display: inline-block; margin: 2px; border:1px solid #f9f9f9; font-size: 14px;}
.thing-page ul li a {display: inline-block; height:auto; padding:5px 10px 5px 10px; color:#333333; font-size: 14px; text-decoration:none; margin-top:0px;}
.thing-page ul li a:visited {display: inline-block; color:#333333; text-decoration:none; margin-top:0px;}
.thing-page ul li a:hover {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}
.thing-page ul li a:active {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}


@media screen and (max-width:768px){


	.classes-thing {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0px 20px 0px 20px;
	}
	.classes-thing-root {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 20px 0px 20px 0px;
	}
	.classes-thing-root ul {display: block; height:100%; width:auto; text-align: left;}
	.classes-thing-root ul li {list-style: none; display: inline-block; margin: 2px; padding-left:10px; padding-right:10px; border-left:0px solid #1D5590; font-size: 14px; background-color: #eeeeee;}
	.classes-thing-root ul li a {display: inline-block; height:auto; line-height: 40px; color:#333333; text-decoration:none; padding: 0px 10px 0px 10px;}
	.classes-thing-root ul li a:visited {display: inline-block; color:#333333; text-decoration:none; padding: 0px 10px 0px 10px;}
	.classes-thing-root ul li a:hover {display: inline-block; color:#FF9800; text-decoration:none; padding: 0px 10px 0px 10px;}
	.classes-thing-root ul li a:active {display: inline-block; color:#FF9800; text-decoration:none; padding: 0px 10px 0px 10px;}

	.classes-thing-node {
		width: 100%;
		height: auto;
		margin: auto;
		border: 1px solid #aaaaaa;
		padding: 0px;
	}
	.classes-thing-node ul {display: inline; height:100%; width:auto;}
	.classes-thing-node ul li {list-style: none; display: inline-block; margin: 2px; padding-left:10px; padding-right:10px; border-left:0px solid #1D5590; font-size: 14px;}
	.classes-thing-node ul li a {display: inline-block; height:auto; line-height: 40px; color:#333333; text-decoration:none; margin-top:0px;}
	.classes-thing-node ul li a:visited {display: inline-block; color:#333333; text-decoration:none; margin-top:0px;}
	.classes-thing-node ul li a:hover {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}
	.classes-thing-node ul li a:active {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}

	.thing {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 10px 0px 10px 0px;
	}
	.thing-content {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 10px 0px 10px 0px;
	}
	.thing-content p {font-size: 14px; text-indent: 2em; line-height: 150%; padding: 0px 2px 0px 2px;}
	.thing-content ul {height:100%; width:auto; padding: 0px 20px 0px 20px;}
	.thing-content ul li {list-style: none; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; width: calc((100% - 20px * 1) / 2); box-sizing: border-box; margin-left:20px; margin-top:0px; font-size: 14px;}
	.thing-content ul li:nth-child(2n+1) {margin-left:0px ! important;}
	.thing-content ul li span a {display: flex; justify-content: center; align-items: flex-start; text-align: center; color:#333333; text-decoration:none; margin-top:0px; overflow: hidden;}
	.thing-content ul li span a:visited {display: flex; color:#333333; text-decoration:none; margin-top:0px;}
	.thing-content ul li span a:hover {display: flex; color:#FF9800; text-decoration:none; margin-top:0px;}
	.thing-content ul li span a:active {display: flex; color:#FF9800; text-decoration:none; margin-top:0px;}
	.thing-image {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		width: 100%;
		height: 40vw;
		border: 1px solid #dddddd;
		background-color: #fafafa;
		overflow:hidden;
		padding: 0px;
		box-sizing: border-box;
	}
	.thing-image a {width: 100%; height: 100%;}
	.thing-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.thing-view {
		display: block;
		flex-grow: 1;
		width: 100%;
		height: 80px;
		overflow:hidden;
		padding: 15px 5px 20px 5px;
		box-sizing: border-box;
	}
	.thing-view a {font-size: 16px;}
	.thing-view label {display: block; padding: 8px 0px 8px 0px; color: #999999;}

	.thing-page {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 20px 0px 20px 0px;
	}
	.thing-page-disabled {
		color: #aaaaaa;
		padding:5px 10px 5px 10px;
	}
	.thing-page-omit {
		color: #666666;
		padding:5px 3px 5px 3px;
		border:0px solid #f9f9f9 ! important;
	}
	.thing-page-current {
		color: #ffffff;
		background-color: #2b3aa1;
		padding:5px 10px 5px 10px;
	}
	.thing-page ul {display: block; height:100%; width:auto; text-align: center;}
	.thing-page ul li {list-style: none; display: inline-block; margin: 2px; border:1px solid #f9f9f9; font-size: 14px;}
	.thing-page ul li:nth-child(n+3):nth-last-child(n+3) {display: none;}
	.thing-page ul li a {display: inline-block; height:auto; padding:5px 10px 5px 10px; color:#333333; font-size: 14px; text-decoration:none; margin-top:0px;}
	.thing-page ul li a:visited {display: inline-block; color:#333333; text-decoration:none; margin-top:0px;}
	.thing-page ul li a:hover {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}
	.thing-page ul li a:active {display: inline-block; color:#FF9800; text-decoration:none; margin-top:0px;}


}