@charset "utf-8";
/* CSS Document */
/*第6回css
**********************/
body {
	font-family: "微软雅黑","宋体",'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
#main.index p{
	letter-spacing: 0;
	font-family: "微软雅黑","宋体",'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
#main.index {
	background: url(/image/global/science-edu/micro_zh-CN/content6/main_bg.png) #eee no-repeat center top;
}
#main.index * {
	box-sizing: border-box;
}

/*--for windows Tablet--*/
.ui-draggable,
.ui-droppable {
  -ms-touch-action: none;
  touch-action: none;
}

/*--タイトル--*/
#main.index #top {
	font-family: "微软雅黑","宋体",'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	min-width: 870px;
}
#main.index #top .title {
	border-bottom: #231815 dotted 1px;
	letter-spacing: 0.1em;
}
#main.index #top .title p {
	letter-spacing: 0 !important;
}
#main.index #top .title p.label {
	background: #E60027;
	color: #FFF;
	font-size: 13px;
	display: inline-block;
	border-radius: 50px;
	padding: 3px 15px;
	text-align: center;
	min-width: 68px;
	margin-bottom: 8px;
}
#main.index #top .title p.large {
	font-weight: 700;
	font-size: 28px;
	padding-bottom: 12px;
	letter-spacing: 0.05em !important;
}
#main.index #top p.desc {
	font-size: 14px;
	line-height: 1.5;
	margin-top: 12px;
}


/*--コンテンツ--*/

#main{
	padding-bottom: 80px;
}
#main .book{
	display: block;
	width: 100%;
	height: 780px;
	margin-top: 40px;
	position: relative;
	background:	url(/image/global/science-edu/micro_zh-CN/content6/book_bg.png) no-repeat center top 30px;
}
#main .about .book{
	height: 580px;
	background:	url(/image/global/science-edu/micro_zh-CN/content6/book_bg_about.png) no-repeat center top 30px;
}
#main .book > h2{
	position: absolute;
	top: 64px;
	left: 62px;
}
#main .book #leftIndex{
	position: absolute;
	bottom: 60px;
	left: 26px;
}
#main .book.under #leftIndex{
	bottom: 260px;
}
#main .book #rightIndex{
	position: absolute;
	bottom: 60px;
	right: 26px;
}
#main .book.under #rightIndex{
	bottom: 260px;
}
#main .tabArea{
	display: block;
	width: 100%;
	height: 50px;
}
#main .tabArea ul::after{
	content: "";
	display: block;
	clear: both;
}
#main .tabArea ul{
	display: block;
	padding-left: 220px;
}
#main .tabArea ul li a{
	display: block;
	float: left;
	width: 152px;
	height: 39px;
	background-position: center top 5px;
	background-repeat: no-repeat;
}
#main .tabArea ul li:not(.active) a:hover{
	background-position: center top;
}
#main .tabArea ul li.active a{
	height: 50px;
}
#main .tabArea ul li.about a{
	background-image: url(/image/global/science-edu/micro_zh-CN/content6/tab_about.png);
}
#main .tabArea ul li.rose a{
	background-image: url(/image/global/science-edu/micro_zh-CN/content6/tab_rose.png);
}
#main .tabArea ul li.lily a{
	background-image: url(/image/global/science-edu/micro_zh-CN/content6/tab_lily.png);
}
#main .tabArea ul li.chrysanthemum a{
	margin-left: 50px;
	background-image: url(/image/global/science-edu/micro_zh-CN/content6/tab_mum.png);
}
#main .tabArea ul li.other a{
	background-image: url(/image/global/science-edu/micro_zh-CN/content6/tab_other.png);
}

#main .infoArea{
	display: block;
	width: 960px;
	margin-top: 105px;
	margin-left: auto;
	margin-right: auto;
}
#main .infoArea::after{
	content: "";
	display: block;
	clear: both;
}
#main .infoArea .info1{
	display: inline-block;
	float: left;
}
#main .infoArea .info2{
	display: inline-block;
	float: right;
	margin-right: 23px;
}
#main .photoArea{
	display: block;
	width: 960px;
	margin-top: 87px;
	margin-left: auto;
	margin-right: auto;
}
#main .photoArea::after{
	content: "";
	display: block;
	clear: both;
}
#main .photoArea .photoParts{
	display: block;
	float: left;
	width: 411px;
	height: 172px;
}
#main .photoArea .photoParts:nth-child(2){
	margin-left: 105px;
}
#main .photoArea .photoParts:nth-child(3){
	margin-top: 10px;
	margin-left: 35px;
}
#main .photoArea .photoParts:nth-child(4){
	margin-top: 10px;
	margin-left: 95px;
}
#main .photoArea .photoParts::after{
	content: "";
	display: block;
	clear: both;
}
#main .photoArea .photoParts h3{
	display: inline-block;
	margin-top: 3px;
	margin-bottom: 5px;
	min-height: 16px;
}
#main .photoArea .photoParts .viewArea{
	display: block;
	float: right;
	width: 196px;
	height: 168px;
	background: #EEE;
}
#main .photoArea .photoParts .viewArea img{
	opacity: 0;
	max-width: 100%;
}
#main .photoArea .photoParts .putArea{
	display: block;
	float: left;
	width:200px;
	height: 145px;
	box-shadow: 0 0 3px rgba(0,0,0,0.25);
	background: url(/image/global/science-edu/micro_zh-CN/content6/put_bg.png) no-repeat #FFF center center;
}
#main #success{
	display: block;
	opacity: 0;
	width:80px;
	height: 80px;
	position: absolute;
	top: 53px;
	right: 451px;
	z-index: 5;
}
#main #success img{
	max-width:100%;
}
@keyframes rubberBand {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1);}
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(.95, 1.05, 1); }
  75% { transform: scale3d(1.05, .95, 1); }
  to { transform: scale3d(1, 1, 1); }
}
.rubberBand {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: rubberBand;
}
#main #successMsg{
	display: block;
	opacity: 0;
	width:420px;
	background: #feecd1;
	border-radius: 8px;
	font-size: 13px;
	line-height: 100%;
	box-sizing: border-box;
	padding: 12px 12px 12px 28px;
	color: #4e463b;
	position: absolute;
	top: 62px;
	right: 50px;
	z-index: 4;
}
#main .selectList{
	display: block;
	width:1100px;
	height: 200px;
	margin-top: 75px;
	margin-left: auto;
	margin-right: auto;
}
#main .selectList .drag,
#main .selectList .dragBg{
	display: block;
	width:204px;
	height: 149px;
	padding: 7px 10px;
	border: #e2e2e2 solid 1px;
	background: #FFF;
	box-shadow: 0 0 2px rgba(0,0,0,0.15);
	box-sizing: border-box;
	position: absolute;
	top: 617px;
}
#main .selectList .drag{
	z-index: 2;
}
#main .selectList .drag:not(.trueFlag) {
	cursor: move;
}
#main .selectList .drag:not(.trueFlag) img,
#main .selectList .dragBg img{
	max-width:100%;
}
#main .selectList .drag.trueFlag{
	padding: 0;
	border: none;
	box-shadow: none;
}
#main .selectList .drag:nth-child(1),
#main .selectList .dragBg:nth-child(5){
	left: 100px;
}
#main .selectList .drag:nth-child(2),
#main .selectList .dragBg:nth-child(6){
	left: 325px;
}
#main .selectList .drag:nth-child(3),
#main .selectList .dragBg:nth-child(7){
	left: 550px;
}
#main .selectList .drag:nth-child(4),
#main .selectList .dragBg:nth-child(8){
	left: 775px;
}