@charset "utf-8";
/* CSS Document */
*{
	box-sizing: border-box	
}
body,h1,h2,h3,h4,ul,li,p,figure,form{
	margin: 0;
	padding: 0;
	list-style: none
}
body{
	margin: 20px;
	background: #eee;
	color: #333;
}
main{
	width:1400px;
	margin: 80px auto 0 auto;
	padding: 20px;
	border: 1px solid #ccc;
	background: #FFF
}
#main_inner{
	display: flex;
	justify-content: space-between
}
#previewbox{
	width: 41%;
}
#iteminfo{
	width: 57%;
	display: flex
}
#abox{
	line-height: 180%;
}
#abox h3{
	font-size: 18px;
	display: inline-block;
	margin-bottom: 15px;
	color: #0067B8;
	border-left: 4px solid #0067B8;
	padding-left: 10px;
}
.note{

	border-radius: 10px;
	margin-bottom: 30px;
	padding: 15px 20px;
	background: rgba(228,233,252,0.4)
}
.note h2{
	font-size: 18px;
	padding: 0;
	text-align: center;
	margin: 0 0 10px 0;
}
.note p{
	text-align: center;
	font-size: 15px;
}
.iteminfo_left{
	width: 50%;

}
.iteminfo_right{
	width: 50%;

}
.big{
	font-size: 50px;
	color: #0067B8
}
h1{
	font-size: 30px;

	margin-bottom: 20px;
	padding-bottom: 10px;
	text-align: center;
	border-bottom: double 3px #333;
}
h2{
	text-align: center;
	font-size: 20px;
	margin-bottom: 30px;
}
.t1{
	text-align: center;
	margin-bottom: 10px;
	background: #eee;
	padding: 5px;
}
.dt1{
	position: relative;
	height: 203px
}
.dt1 img{
	position: absolute;
	left: 0;
	top:0;
}
.model_list{
	display: flex;
	flex-wrap: wrap;

	overflow-y: scroll;
	overflow-x: hidden
}
.model_list li{
	width: 33.3%;
	border: 10px solid #FFF;
}
.model_list.col6 li{
	width: 33.3%;


	border: 5px solid #FFF;
}
.model_list li:hover{
	border: 5px solid #ccc;
}
.model_list li a{
	display: block;
	color: #333;

}
.model_list figure{
	display: block;
	margin: 0;
	padding: 0;
}
.model_list figure img{
	width: 100%;
	height: auto
}
.model_list h3{
	font-size: 12px;
	text-align: center;
	font-weight: normal;
	line-height: 120%;
}

.model_list2{

}
.model_list2 li{
	width: 100%;
	border: 10px solid #FFF;
}

.model_list2 li:hover{
	border: 10px solid #ccc;
}
.model_list2 li a{
	display: block;
	color: #333;
	padding: 10px;
}

.model_list2 h3{
	font-size: 17px;
	text-align: center;
}
.model_list2 p{
	font-size: 15px;
	text-align: center;
}

.txt1{
	font-size: 15px;
	margin-bottom: 10px;
	text-align: center
}
.txt2{
	font-size: 15px;
	margin-bottom: 10px;
	line-height: 200%;
}
#model_name{
	border: 2px dashed #333;
	background: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	line-height: 140%;
	padding: 7px 7px;
	margin:0 auto 15px auto;
	width: 98%;
}
#model_price{
	text-align: right;
	font-size: 18px;
	margin-bottom: 15px;
}
#model_price span{
	font-size: 25px;
}
.btn1{
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	line-height: 1;
	padding: 20px;
	background: #0067B8;
	color: #FFF;
	border-radius: 5px;
	font-weight: bold;
	margin-bottom: 30px;
}
.select_item{
	border: 2px solid #333;
	background: #FFF;
	padding: 10px;
	display: flex;
	margin-bottom: 10px;
	background: #eee;
}
.select_item figure{
	width: 50px;
}
.select_item .inr{
	padding-left: 10px;
}
.select_item p{
	display: none;
}
.cat_name{
	font-size: 18px;
	text-align: center;
	padding: 5px;
	background: #eee;
}
#shell_img{
	display: flex;
	justify-content:center
}
.item{
	width: 46%;
	text-align: center;
	margin: 1%;
}
.noselect{
	text-align: center;
	padding: 40px 0;
	background: rgba(236,233,208,0.5);

}
.pageback{
	padding-top: 15px;
}
.pageback a{
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-decoration: none;
	padding: 10px;
	display: inline-block;
	background: #333;
	color: #FFF;
}
.btn2{
	display: inline-block;
	color: #000;
	background: #eee;
	border-radius: 5px;
	line-height: 1;
	width: 200px;
	text-decoration: none;
	text-align: center;
	padding: 15px;
	border: 1px solid #ccc;
}
.ta2{
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ccc
}
.ta2 td,.ta2 td{
	border-collapse: collapse;
	border: 1px solid #ccc;
	font-size: 14px;
	padding: 5px;
}
.ta2 th{
	background: #eee
}

#preview{
	display: flex;
	flex: 1;
	margin-bottom: 20px;
	justify-content: space-between;
	height: 280px;
	width: 100%;
}
#p_conf #preview{

	flex: 1;
	margin-bottom: 20px;
	justify-content: space-between;
	min-height: 500px;
	width:100%;

}
.confbox{
	width: 1000px;
	margin: 0 auto;

}
#preview .item1{
	width: 500px;
	height: 500px
}
#preview .item2{
	width: 500px;

}
#preview .pv{
	position: absolute;
	width: 262px;
	height: 262px;
}

#p_conf #preview .pv{
	position: absolute;
	width: 500px;
	height: auto;
}
#preview .pv img{
	width: 100%;
	height: 100%;
}


.gnav{
	display: flex;
	margin-bottom: 10px
}
.gnav li{
	padding: 0 5px;
	width: 50%;
	text-align: center
}
.gnav li a{
	color: #000;
	text-decoration: none;
	border: 1px solid #444;
	border-radius: 5px;
	display: block
}
#selected_item{
	padding-bottom: 4px;
	text-align: center;

}
.gmap iframe{
	width: 100%;
	height: 250px;
	padding-top: 15px;
}
.iprice{
	text-align: center;
	font-size: 12px;
}
.page-head{
	display: flex;
	justify-content: space-between;
}
#price_list{
	width: 200px;
	border: 1px solid #ccc;
	padding: 7px;
	text-align: center
}
#price_list h4{
	font-size: 13px;
	font-weight: normal
}
#p-sum{
	color: #C10015;
	font-weight: bold
}
#page-menu{
	width: calc(100% - 220px);
	display: flex;
	column-gap: 5px;
	padding-bottom: 30px;
}
#page-menu li{
	justify-content: space-between;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-align: center;
	padding: 0 5px;
	flex: 1;
	font-size: 13px;
}
#p_model #n_model,
#p_shell #n_shell,
#p_shell_op #n_shell_op,
#p_face #n_face,
#p_face_op #n_face_op,
#p_logo_a #n_logo_a,
#p_logo_b #n_logo_b,
#p_upgrade #n_upgrade,
#p_ear #n_ear,
#p_conf #n_conf{
	background: #eee;
	border: 3px solid #ccc;
}
#page-menu li a{
	color: #000;
	display:flex;
	align-items: center;
	justify-content: center;
	height: 50px
}
.reset{
	padding-top: 5px	
}
.reset a{
	font-size: 12px;
	color: #000;
}
.reset_parts{
	text-align: center;

}
.reset_parts a{
	color: #000;
	font-size: 14px;
}
.specbox{
	display: flex;
	width: 100%;
	justify-content: center;
	gap:20px;
}
.specbox .item1{

	width: 500px;
}
.specbox .item2{

	width: 500px;
}
.ta1{
	width: 100%;

}
.ta1 th,.ta1 td{

	font-size: 15px;
	padding: 13px;
}
.chg{
	color: #000;
	font-size: 13px;
}
.ta1 th{
	text-align: left
}
.ta1 tr:nth-child(2n) td,.ta1 tr:nth-child(2n) th{
	background: #eee
}
.prc{
	font-size: 14px !important;	
}
.prc p{
	padding-top: 4px;
}