@charset "utf-8";

#homeBtn {
	width: 100px;
	display: inline-block;
	margin: 0;
	padding: 4px 0 4px 0;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
    cursor: pointer;
}

#selectFunction {
    width: 848px;
    position: absolute;
	top: 608px;
	left: 526px;
	margin: 0;
	padding: 8px;
    border-top: 1px solid #999;
}
#selectFunction input {display: none;}
#selectFunction input[type="radio"]:checked + label {
    color: #fff;
    border: 1px solid #843c0c;
    background-color: #d26317;
}
#selectFunction label {
    color: #333;
    border: 1px solid #843c0c;
    background-color: #fff;
    border-radius: 6px;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    font-size: 14px;
	line-height: 18px;
    text-align: center;
    display: inline-block;
    margin: 0 0 4px 0;
    padding: 4px 0 4px 0;
    width: 206px;
}
#selectFunction label:hover {
    color: #fff;
    border: 1px solid #843c0c;
    background-color: #d26317;
    cursor: pointer;
}

/* description area */
#descriptionArea {
	width: 424px;
	height: 68px;
	position: absolute;
	top: 20px;
	left: 42px;
	margin: 0;
	padding: 12px;
	text-align: left;
    color: #333;
    background: #fff;
    border: solid 1px #999;
}
.descriptionTitle {
    font-size: 18px;
	line-height: 20px;
    color: #843c0c;
    margin-bottom: 6px;
}
.disc {
	list-style-type: disc;
    margin-left: 14px;
	padding-left: 20px;
    font-size: 16px;
	line-height: 22px;
}
.disc li {
    margin-bottom: 8px;
}

/* option area */
#consumaTitle {
    width: 450px;
    height: 16px;
	position: absolute;
	top: 126px;
	left: 42px;
	margin: 0;
	padding: 6px 0;
    font-size: 14px;
	text-align: center;
    color: #fff;
    background: #999;
}
#consumaArea {
    width: 448px;
	height: 331px;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 160px;
	left: 42px;
}
#optionTitle {
    width: 450px;
    height: 16px;
	position: absolute;
	top: 500px;
	left: 42px;
	margin: 0;
	padding: 6px 0;
    font-size: 14px;
	text-align: center;
    color: #fff;
    background: #999;
}
#optionArea {
    width: 448px;
	height: 226px;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 534px;
	left: 42px;
}
.optionBlock {
	width: 218px;
	height: 105px;
	position: absolute;
	background: #fff;
	border: solid 1px #999;
}
.consuma1 {top: 0px; left: 0px;}
.consuma2 {top: 0px; left: 230px;}
.consuma3 {top: 113px; left: 0px;}
.consuma4 {top: 113px; left: 230px;}
.consuma5 {top: 226px; left: 0px;}
.consuma6 {top: 226px; left: 230px;}
.option1 {top: 0px; left: 0px;}
.option2 {top: 0px; left: 230px;}
.option3 {top: 113px; left: 0px;}
.option4 {top: 113px; left: 230px;}
.optionBlockTitle {
    width: 210px;
    height: 12px;
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    text-align: center;
    color: #333;
}

/* 360 roll */
#rollBase {
	width: 720px;
	height: 540px;
	position: absolute;
	top: 20px;
	left: 590px;
	margin: 0;
	padding: 0;
	z-index: 100;
}
#icon360deg {
	width: 86px;
	height: 40px;
	position: absolute;
	top: 560px;
	left: 907px;
	margin: 0;
	padding: 0;
	pointer-events: none;
	z-index: 90;
}

/* closeup */
#closeupBase {
    width: 720px;
	height: 540px;
	position: absolute;
	top: 20px;
	left: 590px;
	margin: 0;
	padding: 0;
	z-index: 200;
    display: none;    /* default */
}
#closeupProduct {
    width: 100%;
    height: 100%;
    position: relative;
}
.closeupPoint {
    width: 40px;
	height: 40px;
	position: absolute;
	margin: 0;
	padding: 0;
    cursor: pointer;
    background-image: url(../images/closeup.png);
    background-repeat: no-repeat;
}
.closeupPoint:hover {background-image: url(../images/closeup_on.png)}

/* move */
#moveBase {
    width: 720px;
	height: 540px;
	position: absolute;
	top: 20px;
	left: 590px;
	margin: 0;
	padding: 0;
	z-index: 200;
    display: none;    /* default */
}

.moveCover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
	left: 0px;
}

#moveProduct {pointer-events: none;}
#moveOver1 {pointer-events: none;}
#moveOver2 {pointer-events: none;}
#moveOver3 {pointer-events: none;}
#moveMask {pointer-events: none;}
.movePoint {
    width: 40px;
	height: 40px;
	position: absolute;
	margin: 0;
	padding: 0;
    cursor: pointer;
    background-image: url(../images/moveClose.png);
    background-repeat: no-repeat;
}
.movePoint:hover {background-image: url(../images/moveClose_on.png);}
.moveOpened {background-image: url(../images/moveOpen.png) !important;}
.moveOpened:hover {background-image: url(../images/moveOpen_on.png) !important;}
.moveDisable {
    cursor: default !important;
    pointer-events: none !important;
}

/* size */
#sizeBase {
    width: 640px;
	height: 480px;
	position: absolute;
	top: 50px;
	left: 520px;
	margin: 0;
	padding: 0;
	z-index: 200;
    display: none;    /* default */
}
#optionImg {
	width: 640px;
	height: 480px;
	position: absolute;
	top: 0px;
	left: 0px;
}
#optionFoot {
	width: 640px;
	height: 480px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#controlBase {
	width: 280px;
	height: 400px;
	position: absolute;
	top: 110px;
	left: 1160px;
	margin: 0;
	padding: 0;
	z-index: 200;
}
.ttl {
	width: 100px;
	position: absolute;
	left: 0px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 18px;
	text-align: right;
}
.selector {
	width: 160px;
	min-height: 20px;
	position: absolute;
	left: 120px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	text-indent: 28px;
	background-image: url(../images/option.png);
	background-repeat: no-repeat;
	cursor: pointer;
}
.selector:hover {text-decoration: underline;}

#roll_ttl {top: 0px;}
#roll1 {top: 0px;}
#roll2 {top: 32px;}
#basket_ttl {top: 80px;}
#position1 {top: 80px;}
#position2 {top: 112px;}
#position3 {top: 144px;}
#position4 {top: 176px;}
#position5 {top: 208px;}
#stacker_ttl {top: 256px;}
#stacker1 {top: 256px;}
#stacker2 {top: 288px;}
#printer_ttl {top: 336px;}
#printer1 {top: 336px;}
#footprint_ttl {top: 384px;}
#footprint1 {top: 384px;}

/* PRO1000 */
.opener {
	width: 160px;
	min-height: 20px;
	position: absolute;
	left: 120px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	text-indent: 28px;
	background-image: url(../images/option.png);
	background-repeat: no-repeat;
	cursor: pointer;
}
.opener:hover {text-decoration: underline;}

#tray_ttl {top: 0px;}
#position0 {top: 0px;}