/* responsive css */

@media screen and (max-width: 1500px) {
.container { width: 96%;}
.header-container { width: 96%;}
.menu_container { width: 98%;}
.footer-container { width: 96%;}
.left-container { float: left; width: 50%;}
.right-area { box-sizing: border-box; float: right; padding-left: 8px; width: 50%;}
.up-container { float: left; width: 51%;}
.up-right { float: left; width: 46%;}
.top-img { width: 100%;}
.box-area { margin: 0;}
.footer .footer-txt h3 { margin: 0 0 0 10px;}
.main-tit { float: left; top: 0; width: 100%;}
.block { display: inline-block; margin: 24px 12px 0; vertical-align: top; width: 275px; float: none;}
}
/* tab landscape mode */
@media screen and (max-width: 1024px) {
.container { width: 96%;}
.header-container { width: 90%;}
.menu_container { width: 100%;}
.footer-container { width: 100%;}
.up-container { width: 50%;}
.up-container { width: 50%;}
.up-right { width: 50%; margin: 50px 0 0 ;}
.top-img { float: left; height: auto; width: 100%;}

.footer .footer-txt h3 { margin: 0 0 0 10px;}
.box-area { width: 100%;}
}
@media screen and (max-width: 950px) {
.main-tit { float: left; width: 100%; text-align: center; vertical-align: middle; top: 0;}
.block { display: inline-block; margin: 24px 12px 0; width: 275px;}
}
@media screen and (max-width: 888px) {
.Guarantee-icon { float: right; margin: 22px 0 0; text-align: center; width: 100%;}
.see-btn { float: left; width: 100%;}
}
/* tab poitraid mode */
@media screen and (max-width: 768px) {
.footer-bg { margin: 10px 0 0;}
.up-container { width: 100%;}
.up-right { float: left; margin-left: 0; text-align: center; width: 100%;}
.top-img { float: left; height: 422px; width: 100%;}
.fill_left { width: 100%;}
.fill_right { width: 100%;}
.fill_right_img { text-align: center;}
.page_left { width: 100%;}
.page_right { text-align: center; min-height: initial; width: 100%;}
}
@media screen and (max-width: 850px) {
select { background-color: #c1c1c1; color: #5e5e5e; font-family: opensansregular; font-size: 20px;}
}
/* Nexus 7 potraid mode */
@media screen and (max-width: 603px) {
.block {width: 100%; margin: 0;}
.main-tit h2 { margin: 0;}
.top-img { height: unset;}
}
/* iphone 5 landsacpe mode */
@media screen and (max-width: 580px) {
.left-container { width: 100%;}
.left-txt { width: 100%;}
.right-area { margin: 15px 0 0; padding: 0; width: 100%; height: auto;}
.box-txt > h2 { text-align: center;}
.box-txt span { text-align: center;}
.block { float: left; margin: 23px 0 0 0; width: 100%;}
}
/* iphone  4 landsacpe mode */
@media screen and (max-width: 480px) {
.logo { width: 90%;}
.page_left span { word-wrap: break-word;}
.up-txt { margin-top: 10px;}
.up-txt > h2 { font-size: 35px;}
.left-txt > h2 { font-size: 35px;}
.left-txt h2 span { font-size: 25px; padding-top: 14px;}
.fill_left > span { font-size: 35px;}
.page header h1 { font-size: 35px; margin: 10px 0 15px 0;}
.left-txt { margin-top: 15px;}
}
/* iphone 4,5 potraid mode */
@media screen and (max-width: 320px) {
.top-img { height: auto;}
.box { margin: 0 0 30px;}
.box-area { margin: 0; text-align: center; width: 100%;}
.box { width: 100%; height: initial;}
}


/* small phone */
@media screen and (max-width: 280px) {
.block-box .block-txt { width: 100%;}
.block-box .block-txt .block-img-1 { width: 96%;}
.block-box .block-txt .block-img-2 { width: 96%;}
}