@charset "utf-8";

/* -------------------- simulator_modal -------------------- */
#simulator_modal{
	clear: both;
	width: 100%;
	height: 100%;
	font-size: 15px;
	color: #4d4d4d;
	position: fixed;	
	top: 0;
	left: 0;
	visibility: hidden;
	display: none;
}

#simulator_modal_inner{
	width: 920px;
	height: 589px;
	z-index: 65535;
	position: absolute;
}

#lens_list{
	z-index: 65535;
	width: 610px;
	float: left;
	overflow: hidden;
	background-color:#fff;
}

#body_list{
	width: 310px;
	float: left;
	overflow: hidden;
	background-color:#fff;
}

#simulator_modal h3{
	height: 25px;
	padding: 12px 0;
	background-color: #333;
	text-align: center;
	line-height: 0;
	position: relative;
	z-index: 2;
}

#simulator_modal .list_inner{
	height: 425px;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}

.smart #simulator_modal .list_inner{
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	overflow-y: auto;
}

.ios5 #simulator_modal .list_inner{
	-webkit-overflow-scrolling: auto;
}

#simulator_modal .list_inner ul{
	min-height: 425px;
}

#simulator_modal #lens_list .list_inner{
	height: 425px;
	width: 609px;
	border-right: 1px solid #2f2f2f;
}

#simulator_modal #body_list .list_inner{
	width: 310px;
}

#simulator_modal #lens_list .list_inner ul{
	width: 609px;
	overflow: hidden;
	position: absolute;	
	top: 0;
	left: 0;
}

#simulator_modal #body_list .list_inner ul{
	width: 310px;
	overflow: hidden;
	position: absolute;	
	top: 0;
	left: 0;
}

#simulator_modal .list_inner li{
	list-style: none;
	height: 40px;
	line-height: 40px;
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	background-image:url(../img/modal/parts_modal_list_bg_off.png);
	background-repeat: repeat;
}

#simulator_modal .list_inner li a:active{ background-color: transparent;}
#simulator_modal .list_inner li:hover{	background-image:url(../img/modal/parts_modal_list_bg.png);}
#simulator_modal.isTouch .list_inner li:hover{	background-image:url(../img/modal/parts_modal_list_bg_off.png);}
#simulator_modal .list_inner li.current{	background-image:url(../img/modal/parts_modal_list_bg.png);}

.smart #simulator_modal .list_inner li:hover{	background-image:url(../img/modal/parts_modal_list_bg_off.png);}
.smart #simulator_modal .list_inner li:hover{	background-image:url(../img/modal/parts_modal_list_bg_off.png);}
.smart #simulator_modal .list_inner li.current{
	background-image:url(../img/modal/parts_modal_list_bg.png);
	background-repeat: repeat;
}

#simulator_modal .list_inner a{
	color: #4d4d4d;
	display: block;
	padding: 0 0 0 70px;
	position: relative;
}

#simulator_modal .list_inner a:hover{
	text-decoration: none;
}

#lens_list a{
	width: 540px;
}

#body_list a{
	width: 240px;
}

#simulator_modal .list_inner li span{
	margin: -2px 15px 0 0;
	position: absolute;
	top: 0;
	left: 15px;
}

#simulator_modal .list_inner li img {
    margin: 3px 5px 0 0;
    vertical-align: middle;
}

#simulator_modal .list_inner li.CX a{
	padding: 0 0 0 110px;
}

#simulator_modal .modal_sort{
	position: relative;
	top: 0;
	left: 0;
	padding: 10px 0;
	background-color: #dfdddf;
	overflow: hidden;
	z-index: 12;
}

#simulator_modal #lens_list .modal_sort{
	border-right: 1px solid #2f2f2f;
}

#simulator_modal .modal_sort ul{
	width: auto;
	padding: 0 0 0 10px;
	float: left;
	border-top: 1px solid #a6a6a6;
}

#simulator_modal .modal_sort li{
	width: 50px;
	height: 50px;
	margin: 0 10px 0 0;
	background-repeat: no-repeat;
	cursor: pointer;
	float: left;
}

#simulator_modal .modal_sort li.FX{ background-image:url(../img/modal/btn_modal_format_fx_off.png);}
#simulator_modal .modal_sort li.DX{ background-image:url(../img/modal/btn_modal_format_dx_off.png);}
#simulator_modal .modal_sort li.CX{ background-image:url(../img/modal/btn_modal_format_cx_off.png);}
#simulator_modal .modal_sort li.FX:hover{ background-image:url(../img/modal/btn_modal_format_fx_on.png);}
#simulator_modal .modal_sort li.DX:hover{ background-image:url(../img/modal/btn_modal_format_dx_on.png);}
#simulator_modal .modal_sort li.CX:hover{ background-image:url(../img/modal/btn_modal_format_cx_on.png);}
#simulator_modal .modal_sort li.FX.current{ background-image:url(../img/modal/btn_modal_format_fx_on.png);}
#simulator_modal .modal_sort li.DX.current{ background-image:url(../img/modal/btn_modal_format_dx_on.png);}
#simulator_modal .modal_sort li.CX.current{ background-image:url(../img/modal/btn_modal_format_cx_on.png);}

#simulator_modal .modal_sort li.zoom{ background-image:url(../img/modal/btn_modal_type_zoom_off.png);}
#simulator_modal .modal_sort li.singlefocal{ background-image:url(../img/modal/btn_modal_type_single_off.png);}
#simulator_modal .modal_sort li.zoom:hover{ background-image:url(../img/modal/btn_modal_type_zoom_on.png);}
#simulator_modal .modal_sort li.singlefocal:hover{ background-image:url(../img/modal/btn_modal_type_single_on.png);}
#simulator_modal .modal_sort li.zoom.current{ background-image:url(../img/modal/btn_modal_type_zoom_on.png);}
#simulator_modal .modal_sort li.singlefocal.current{ background-image:url(../img/modal/btn_modal_type_single_on.png);}

#modal_btm_btn{
	position: absolute;
	z-index: 10;
	bottom: 45px;
	right: 0;
}

#modal_btm_btn p{
	position: absolute;
}

#modal_btm_btn p a{
	display: block;
	overflow: hidden;
}

#modal_btm_btn p a img{
	margin: -5px 0 0 0;
}

#modal_btm_btn a:hover{
	opacity: .7;
}

#modal_btm_btn .btn_ok{ right: 60px;}
#modal_btm_btn .btn_cancel{ right: 0;}

.overlay{
	width: 100%;
	height: 100%;
	z-index: 100;
	clear: both;
	position: fixed;
	background-image:url(../img/modal/parts_bg_modal_overlay.png);
	top: 0;
	left: 0;
}


/* scroll bar */
.modal_scroll_bar{
	width: 6px;
	background-color: #dadada;
	border-radius: 6px;
	position: absolute;
	top: 6px;
	right: 3px;
	cursor: pointer;
}

.smart .modal_scroll_bar{
	max-height: 413px;
	background: none;
}