.bg-white{ background: #fff; padding: 18px; margin: 32px auto 0;}
.bg-white .title-search{ color: #0279ff; font-size: 18px; border: 3px solid #0279ff; padding: 8px; font-weight: bold;}

.main-search { width: 100%; padding: 8px 0;}
.main-search ul{ font-size: 0; padding: 0 1%; display: flex; flex-wrap: wrap;}
.main-search ul li{ width: 18%; display: inline-block; margin: 4px 1%; font-size: 12px; background: #f3f3f3; border: 1px solid #ccc; border-radius: 4px;}
.main-search ul li a{ display: block; width: 100%; padding: 16px 8px; text-align: center; font-weight: bold; color: #000;}
.main-search ul li a strong{ font-size: 18px;}
.main-search ul li:hover{ border: 1px solid #d60000; color: #d60000;}
.main-search ul li:hover a{ color: #d60000;}

.search-row1{font-size: 0;}
.search-row1 div{width: 33.33%; display: inline-block; font-size: 14px; padding: 10px 0;}
.search-row1 div select{border:1px solid #CCC; border-radius: 3px; width: 78%;}
.search-row1 div span{display: inline-block; width:19%; padding: 0 1% 0 0; text-align: right; color: #0279ff; font-weight:bold;}

.search-row2{font-size: 0;}
.search-row2 div{width: 33.33%; display: inline-block; font-size: 14px; padding: 10px 0;}
.search-row2 div select{border:1px solid #CCC; border-radius: 3px; width:36%;}
.search-row2 div span{display: inline-block; width:19%; padding: 0 1% 0 0; text-align: right; color: #0279ff; font-weight:bold;}

.search-row1 select,.search-row2 select{padding:3px 5px;}
.result-container{overflow: hidden; padding: 10px 0;}
.page{float: right;}
.page a{border-bottom:3px solid #FFF; padding: 0 5px; display: inline-block; font-size: 14px; font-weight: bold;}
.page a:hover{border-bottom:3px solid #005abf; color: #005abf;}

.page-active{border-bottom:3px solid #005abf !important; color: #005abf;}

.result{float:left; font-size: 14px;}
.result strong{color: #0078ff;color: #0078ff;
    font-size: 23px;}
.result a {display: inline-block; font-weight: bold; padding: 0 3px;}
.result a:hover{text-decoration: underline; color: #0078ff;}

.used-list{display: flex; flex-wrap: wrap;}
.used-list >div{display: inline-block; width: 48%; margin: 10px 1%; padding: 0 0 10px; border:1px solid #91dcff; border-radius: 10px; overflow:hidden;}
.used-list >div >h3{display:block; background: #d6f5fe; padding: 10px; font-size: 14px; margin: 0 0 10px;}
.used-list >div div,.used-list >div figure{display: inline-block; width:48%; vertical-align: top;}
.used-list >div figure{padding: 0 10px 10px 10px;}
.used-list >div figure img{width: 100%;}
.used-list >div div p{font-size: 14px;}
.used-list >div div p span{color: #FF0000; font-size: 18px; font-weight: bold;}
.used-list >div div p span strong{font-size: 12px; padding: 0 0 0 5px;}
.used-list >div div a{display:block; background:#34bfff; padding:5px 3px; text-align: center; color: #FFF; font-weight: bold;}
.used-list >div div a:hover{background: #7cd6ff;}
.line-footer{ background:url(../images/curve-top.png); height: 36px; width: 100%; border-bottom: 25px solid #FFF; position: relative; top: 22px;}

.title-yellow{display:block; padding: 3px; margin: 0 0 10px; border:2px solid #fcc400; color: #fcc400; width: 100%; text-align: center;}

.title-blue{display:block; padding: 3px; margin: 0 0 10px; border:2px solid #28a6ff; color: #28a6ff; width: 100%; text-align: center;}
	
.fillter-color{ display:inline-block; margin: 0 5px 0 0; cursor: pointer; border: 1px solid #FFF; border-radius: 3px; width:30px; height: 30px; -webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 2px 0px rgba(50, 50, 50, 0.75);}
.color0{ background: #fff; border: 1px solid #CCC;}
.color1{ background: #000;}
.color2{ background: #ff0000;}
.color3{ background: #003cff;}
.color4{ background: #fff000;}
.color5{ background: #1be200;}
.color6{ background: #a46000;}
.color7{
background: #fdfac7; /* Old browsers */
background: -moz-linear-gradient(top, #fdfac7 0%, #9b7100 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fdfac7 0%,#9b7100 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fdfac7 0%,#9b7100 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfac7', endColorstr='#9b7100',GradientType=0 ); /* IE6-9 */}
.color8{
background: #eef4f5; /* Old browsers */
background: -moz-linear-gradient(top, #eef4f5 0%, #93aabb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #eef4f5 0%,#93aabb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eef4f5 0%,#93aabb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef4f5', endColorstr='#93aabb',GradientType=0 ); /* IE6-9 */}
.color9{ background: #adadad;}
.color10{ background: #ffa200;}
.color11{ background: #c14df2;}
.color12{ background: #ffaccd;}
.color13{ background: #ffe9c3;}
.color14{
background: #fefde6; /* Old browsers */
background: -moz-linear-gradient(top, #fefde6 0%, #f2e5bb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fefde6 0%,#f2e5bb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fefde6 0%,#f2e5bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefde6', endColorstr='#f2e5bb',GradientType=0 ); /* IE6-9 */}
.color15{ background: #737580;}
.color16{ background: #004bb2;}
.color17{
background: #ffffff; /* Old browsers */
/*background: -moz-linear-gradient(top, #ff0000 0%, #ffa500 25%, #15ff00 50%, #1900ff 76%, #8300ff 100%);*/ /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, #ff0000 0%,#ffa500 25%,#15ff00 50%,#1900ff 76%,#8300ff 100%);*/ /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, #ff0000 0%,#ffa500 25%,#15ff00 50%,#1900ff 76%,#8300ff 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#8300ff',GradientType=0 );*/ /* IE6-9 */}

.select-color{padding: 0 0 10px;}
.select-color label img{display: none;}
.select-color span,.select-color div{display: inline-block; vertical-align: middle;	}
.select-color span{width:6%; padding: 0 1% 0 0; text-align: right; color: #0279ff; font-weight:bold; font-size: 14px;}
.select-color input[type=checkbox]{ display:none }
.select-color input[type=checkbox]:checked + label img{display: block;}

.form-button{overflow: hidden; padding: 20px 0 0; border-top:1px solid #CCC;}
.form-button p{float: left; font-size: 11px; padding: 0 0 0 7%;}
.form-button div{float: right;}

.form-button button{border: 2px solid #76bdff; font-weight: bold; padding: 8px 40px; margin: 0 10px; border-radius: 5px; background: #FFF; cursor: pointer;}
.form-button button:hover{background: #76bdff !important; color: #FFF;}
.button-blue{background:#005abf !important; color: #FFF;}


/* contact */
.box-contact{ display:table; width: 100%; text-align: center; margin: 0 0 20px;}
.box-contact a{ color: #fff;}
.box-contact .tel{ background: url(../images/pattern-tile-darkblue.png); width: 50%; display: table-cell; padding: 15px;}
.box-contact .tel span{ display: inline-block; width: 200px; vertical-align: middle; font-size: 24px; font-weight: bold;}
.box-contact .tel small{ display: block; font-size: 12px; font-weight: normal;}
.box-contact .mail{ background: url(../images/pattern-tile-blue.png); width: 50%; display: table-cell; padding: 15px;}
.box-contact .mail span{ display: inline-block; width: 60%; vertical-align: middle; font-size: 22px; font-weight: bold;}
  .contact-top{ display: none;}

@media(max-width:1273px){
  .contact-top{ display: none;}
}

@media(max-width:680px){
.page,.result{width: 100%; text-align: center; padding:10px 0 0;}
.page a{font-size: 14px;}
.used-list >div{width:100%; margin: 0 0 20px;}
}
@media(max-width:580px){

  .box-contact{ display: block;}
  .box-contact .tel, .box-contact .mail{ display: block; width: 100%;}
}

@media(max-width:768px){
	.search-row1 span,.search-row2 span,.select-color span{width: 100%!important; text-align: left!important;}
	.form-button p,.form-button div{width: 100%; text-align: center;}
	.form-button p{padding: 0 0 10px;}
	.box-contact .mail span{ font-size: 18px;  width: 80% !important;}
}

@media(max-width:480px){
	.search-row1 div,.search-row2 div{width: 100%;}
	.search-row2 div select{width: 47%;}
	.search-row1 div select{width:100%;}
	.form-button button{width: 90%; margin: 0 0 10px;}
	
}

@media(max-width:480px){
.used-list >div figure{width: 100%;}
.used-list >div div{width: 100%; padding: 10px 10px 0;}
}