﻿* {
    margin: 0;
    padding: 0;
    color: #333;

}
html {
    -webkit-text-size-adjust: none
}
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/; max-width:700px;}

/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
}
body {
    -moz-user-select: none;
    font-family: "Microsoft Yahei", Tahoma, Arial, sans-serif;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #f7f7f7!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}
ul li, ol li, dl li {
    list-style-type: none
}
img {
    border: 0;
    vertical-align: bottom;
}
em {
  font-style: normal;
  font-size: inherit;
}
a{
    text-decoration: none;
}
i{
    font-style:normal;
}
/**
  header部分
*/
#headcitycode{
    display: inline-block;
    position: absolute;  left: 10px;  top: 6px;
}
.pg-hd {
    padding-left: 10px;
    box-sizing: content-box;
    height: 44px;
    line-height: 44px;
    font-size: 12px;
    border-bottom: 2px solid #ececec;
    background-color: #fff;
    position: relative;
}
.pg-hd .location-wrap{
    display: inline-block;
    position: absolute;  left: 110px;  top: 0;  height: 44px;  line-height: 44px;
}
.pg-hd img, .pg-hd span {
    vertical-align: middle;
}
.pg-hd span{
    color:#000;
    font-size: 12px;
}
.pg-hd .logo {
    height: 33.5px;
}
.pg-hd .telephone {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 14px;
    height: 24px;
    display: inline-block;
}
.pg-hd .icon-location{
    vertical-align: middle;
    margin: 0 5px 0 10px;
}
 /*
浮动导航开始
*/
.fix-nav {
    display: none;
    position: fixed;
    left: 100%;
    bottom: 64px;
    /*note ：修复魅族内置浏览器置顶按钮不可见的问题。偶然发现魅族内置浏览器上必须设置width：100%置顶按钮才可见,据此特殊处理*/
    width: 100%;
    margin-left: -60px;
}
.fix-nav .fix-nav-wrap{
    background-color: rgba(148, 149, 148, 0.8);
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 7px;
}

.fix-nav .fix-nav-wrap:active{
    background-color: black;
}

.fix-nav p {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}
.fix-nav .i-totop {
    width: 33px;
    display: block;
    margin: 0 auto 2px;
    padding-top: 8px;
}

/*
浮动导航结束
*/

/*页面之前滑动切换*/
.index_page {
    min-width:320px;
    max-width: 640px;
    margin: auto;
    position: relative;
    background-color: #e7e7e7;/*20150701*/
}

/*banner样式*/
.swipe-outer{
    background-color: #fff;
    padding: 9.375% 0;
	height:117px;
    overflow: hidden;
    position: relative;
}
.swipe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.swipe_wrap {
    overflow: hidden;
    position: relative;
}
.swipe_wrap a{
    display: block;
    width: 100%;
    padding: 9.375% 0;
}
.swipe_wrap img{
    position: absolute;
    left: 0;
    top:0;
    display: block;
    width:100%;
    height: 100%;
}

.slide_nav{
    position: relative;
    margin: -19px 0 0px 0;
    text-align: right;
    display: none;
}

.slide_nav .position{
    text-align: right;
    list-style: none;
    margin: auto;
    padding: 0 5px 5px 0;
}

.slide_nav .position li{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background: white;
    margin-left:5px;
}

.slide_nav .position li.active{
    background-color:#0baf4c;
}

/*
/*
主要功能区开始
*/
.top-btn {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #d9d9d9;
    background-color: white;
    overflow: hidden;
    padding-bottom: 15px;
}

.top-btn li{
    width: 25%;
    text-align: center;
    float: left;
    display: inline;
    margin-top: 15px;
}
.top-btn li a{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.top-btn li a span{
    position: absolute;
    top: -10px;
    right: -20px;
}
.top-btn li p{
    margin-top: 5px;
    font-size: 12px;
    line-height: 15px;
    color: #333;
}

.icon-index-nav-1, 
.icon-index-nav-2, 
.icon-index-nav-3, 
.icon-index-nav-4, 
.icon-index-nav-5, 
.icon-index-nav-6, 
.icon-index-nav-7, 
.icon-index-nav-8,
.icon-search,
.icon-more,
.icon-location,
.icon-tel,
.icon-free,
.icon-shengqian,
.icon-baozhang,
.icon-3min,
.icon-more2,
.icon-tel-green,
.icon-notice,
.icon-info,
.zxzzd-qa-list li:after{
    background: url('//img.to8to.com/wap/v2/index-page-sprite-v2.png?v=20150314') no-repeat;
    background-size: 115px 593px;
}
.icon-index-nav-1, 
.icon-index-nav-2, 
.icon-index-nav-3, 
.icon-index-nav-4, 
.icon-index-nav-5, 
.icon-index-nav-6, 
.icon-index-nav-7, 
.icon-index-nav-8{
    width: 43px;
    height: 43px;
    position: relative;
    display: inline-block;
}
.icon-info{
    background-position: -50px -160px;
    width: 18px;
    height: 18px;
}
.icon-tel-green{
    background-position: -50px -110px;
    width: 24px;
    height: 24px;
}
.icon-more2{
    background-position: -26px -414px;
    width: 8px;
    height: 10px;
}
.icon-3min{
    background-position: -30px -515px;
    width: 79px;
    height: 62px;
}
.icon-shengqian{
    background-position: -50px -30px;
    width: 30px;
    height: 35px;
}
.icon-baozhang{
    background-position: -50px -70px;
    width: 30px;
    height: 35px;
}
.icon-free{
    background-position: -50px -10px;
    width: 22px;
    height: 18px;
}
.icon-search{
    background-position: 19px -421px;
    position: absolute;
    right: 18px;
    top: 5px;
    padding: 7px 0 7px 20px;
    display: block;
    height: 30px;
    width: 39px;
    box-sizing: border-box;
    border-left: 1px solid #d0cecd;
}
.icon-more{
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 5px;
    background-position: -26px -435px;
}

.icon-index-nav-1 {
  background-position: 0 -208px;
}

.icon-index-nav-2 {
  background-position: 0 -260px;
}

.icon-index-nav-3 {
  background-position: 0 0;
}

.icon-index-nav-4 {
  background-position: 0 -52px;
}

.icon-index-nav-5 {
  background-position: 0 -104px;
}

.icon-index-nav-6 {
  background-position: 0 -364px;
}

.icon-index-nav-7 {
  background-position: 0 -312px;
}

.icon-index-nav-8 {
  background-position: 0 -156px;
}
.icon-location{
    display: inline-block;
    background-position: 0 -534px;
    width: 10px;
    height: 13px;
}
.icon-tel{
    display: inline-block;
    background-position: 0 -569px;
    width: 24px;
    height: 24px;
}
.icon-notice{
    background-position: -50px -140px;
    width: 14px;
    height: 14px;
    display: inline-block;
}

/*
主要功能区结束
*/
/*********平宣开始*************/
.top-sct-px{
    display: block;
    width: 100%;
    height: 64px;
    border-top: 1px solid #d9d9d9;
}
.px-sct{
    width: 50%;
    display: block;
    height: 100%;
    float: left;
    padding: 9px 15px;
    position: relative;
}
.px-title{
    color: #fd8e35;
    font-size: 16px;
    font-weight: bold;
    line-height: 19px;
    margin-top: 3px;
}
.px-bz .px-title{
    color: #ff6b06;
}
.px-summary{
    color: #999;
    font-size: 12px;
    line-height: 14px;
    margin-top: 3px;
}
.icon-shengqian,.icon-baozhang{
    display: block;
    position: absolute;
}
.icon-shengqian{
    top: 13px;
    right: 10px;
}
.icon-baozhang{
    top: 14px;
    right: 10px;
}
.px-sq:after{
    content: "";
    display: block;
    height: 44px;
    width: 0;
    border-left: 1px solid #d9d9d9;
    position: absolute;
    right: 0;
    top: 9px;
}
/*********平宣结束*************/
/*********3分钟学装修开始*************/
.top-sct-3min{
    display: block;
    width: 100%;
    height: 62px;
    border-top: 1px solid #d9d9d9;
    position: relative;
}
.icon-3min{
    display: block;
    float: left;
    overflow: hidden;
    margin-left: 13px;
    margin-right: 3px;
}
.min3-title{
    font-size: 16px;
    line-height: 19px;
    color: #333;
    margin-top: 10px;
}
.min3-summary{
    margin-top: 8px;
    font-size: 12px;
    line-height: 14px;
    color: #999;
}
.icon-more2{
    position: absolute;
    top: 26px;
    right: 15px;
    display: block;
}
/*********3分钟学装修结束*************/
/*
装修招标开始
*/
.top-sct {
    background-color: white;
    margin: 10px 0;
    border-bottom: 1px solid #d9d9d9;
}
 .tb-half-pixel{
    border-top: 0!important;
    border-bottom: 0!important;
    background-position: left top, left bottom;
    background-image: linear-gradient(to top, transparent 0%,transparent 50%,#d9d9d9 50%,#d9d9d9 100%),linear-gradient(to bottom, transparent 0%,transparent 50%,#d9d9d9 50%,#d9d9d9 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9)),-webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9));
    background-image: -ms-linear-gradient(bottom, transparent 0%,transparent 50%,  #d9d9d9 50%, #d9d9d9 100%),-ms-linear-gradient(top, transparent 0%,transparent 50%,  #d9d9d9 50%, #d9d9d9 100%);
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: repeat-x!important;
}

.top-sct .sct-hd {
    height: 45px;
    line-height: 42px;
    border-top: 2px solid #fe8864;
    border-bottom: 1px solid #d9d9d9;
}
.top-sct .sct-hd h1 {
    font-size: 16px;
    color: #000000;
    height: 42px;
    line-height: 42px;
    font-weight: bold;
    padding: 0 10px;
    border-bottom: 1px solid #e3e3e3;
}
.top-sct .sct-hd .sct-hd-aside {
    font-size: 10.5px;
    color: #333333;
    float: right;
    font-weight: normal;
}
.top-sct .sct-hd .sct-hd-aside em {
    color: #0bad4c;
    margin: 0 2px;
}

.top-sct .sct-bd .sct-zxzb {
    margin: 0 3.125% 0 2.65625%;
}
.top-sct .sct-bd .sct-zxzb  li {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    border-top: 1px dotted #eeeeee;
}

.top-sct [class^=col] {
    display: inline-block;
    font-size: inherit;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-sct .col-time {
    width: 24%;
}
.top-sct .col-name {
    width: 38%;
    color: #0bad4c;
    padding-left: 0.3em;
}
.top-sct .col-info {
    width:33.83085%;
    text-align: right;
}
.top-sct .col-info em {
    /*color: #0bad4c;*/
}
/*new*/
.sct-hd-mfsj-info{
    font-size: 14px;
    color: #000000;
    float: right;
    overflow: hidden;
}
.sct-hd-mfsj-info em{
    color: #0bad4c;
    font-weight: bold;
    margin: 0.5em;
}
.lastest-zbs-wrap{
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    color: #000;
    border: 0;
    overflow: hidden;
    padding: 0 10px;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
}
.lastest-zbs{
    position: relative;
}
.lastest-zbs li{
    padding-left: 14px;
}
.lastest-zbs-wrap .icon-notice{
    position: absolute;
    top: 9px;
    left: 10px;
}
.mfsj-from{
    padding: 10px 15px;
}
.mfsj-from input,.mfsj-from select{
    -webkit-appearance : none;
    -moz-appearance : none;
    appearance : none;
    outline: 0;
    font-size: 14px;
    display: block;
    background: #fff;
    -webkit-border-radius:0;
    border-radius: 0;
}
.mfsj-from input:focus,
.mfsj-from input:active,
.mfsj-from select:active,
.mfsj-from select:focus{
    outline: 0;
}
.mfsj-from input:focus,
.mfsj-from input:active{
    border-color: green;
}
input::-webkit-input-placeholder{
    font-size: 14px;
    color: #999999;
}
.lshc-add{
    position: relative;

}
.mfsj-from .row {
    position: relative;
    display: block;
    height: 44px;
    margin-bottom: 10px;
    width: 100%;
    border:1px solid #e3e3e3;
 }


.mfsj-name,.mfsj-tel,.mfsj-area{
    font-size: 16px;
    color: #000;
    padding: 10px 15px;
    line-height: 20px;
}
.add-downs{
    position: relative;
}
.add-downs:after{
    position: absolute;
    content: "";
    display: block;
    border-top: 5px solid #666;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 20px;
    right: 10px;
}
.mfsj-area-row span{
    position: absolute;
    display: block;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
    top: 1px;
    right: 0px;
    color: #999999;
}
.mfsj-area{
    padding-right: 62px;
    width: 100%;
    border: 0;
}
.mfsj-cost{
    display: block;
    width: 100%;
    height: 42px;
    border: 0;
    padding: 0 10px;
    font-size: 16px;
    line-height: 42px;
}
.mfsj-submit{
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #ea4504;
    color: #fff;
    border: 0!important;
    font-size: 17px;
}
.mfsj-info{

}
.mfsj-info em{
    color: #ea4504;
}
.mfsj-info .icon-info{
    display: block;
    float: left;
    overflow: hidden;
}
.mfsj-info div{
    display: block;
    margin-left: 27px;
    font-size: 12px;
    color: #999999;
    line-height: 19px;
}
.mfsj-cost-row label{
    position: absolute;
    height: 42px;
    line-height: 42px;
    color: #999;
    font-size: 14px;
    top: 1px;
    left: 15px;
}
.mfsj-location-row{
    border: 0!important;
}
.mfsj-location-pov ,
.mfsj-location-city{
    float: left;
    width: 50%;

}
.mfsj-location-row .mfsj-prov-wrap:after,
.mfsj-location-row .mfsj-city-wrap:after{
    position: absolute;
    content: "";
    display: block;
    border-top: 5px solid #666;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 20px;
    right: 10px;
}
.mfsj-location-row .mfsj-prov-wrap{
    position: relative;
    margin-right: 5px;
    border-radius: 0;
}

.mfsj-location-row .mfsj-city-wrap{
    position: relative;
    margin-left: 5px;
    border-radius: 0;
}
.mfsj-location-row select{
    height: 44px;
    line-height: 46px;
    border: 1px solid #e3e3e3;
    width: 100%;
     background-color: #fff;
    padding: 0 15px;
}

.zx-dialog-wrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0,0,0,.5);
    display: none;
    z-index: 1010;
    text-align: center;
}
.zxd-dialog{
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -95px auto auto -150px;
    width: 300px;
    height: auto;
    background-color: #fff;
    text-align: center;
    padding: 15px;
    z-index: 1020;
}
.zxd-dialog-title{
    font-size: 19px;
    margin-bottom: 10px;
}
.zxd-dialog-info{
    text-align: left;
    font-size: 12px;
    line-height: 16px;
    margin: 0 20px;
    color: #333;
}
.zxd-mask{
    position: fixed;
    top: 0;
    height: 768px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}
.zxd-dialog-btn{
    width: 130px;
    height: 35px;
    line-height: 35px;
    background-color: #f36f20;
    color: #fff;
    font-size: 17px;
    display: inline-block;
    margin: 15px 0;
}
.weixintj {
    padding-top: 10px;
    font-size: 12px;
    line-height: 15px;
    color: red;
    padding-bottom: 10px;
    margin: 0 20px;
    -webkit-user-select: initial;
}
.weixintj em {
    font-weight: 700;
    color: rgb(255, 0, 0);
}
/*
装修招标结束
*/
/*装修效果图开始*/
.top-sct-xgt{
    position: relative;
    border-bottom: 0px;
}
.xgt-swip-nav-hd{
    position: absolute;
    height: 42px;
    top: 2px;
    right: 0;
}
.xgt-swip-nav-hd li{
    float: left;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
}
.xgt-swip-nav-hd li span{ 
    display: block;
    height: 42px;
    border-bottom: 2px solid transparent;
    line-height: 42px;
    font-size: 14px;
    color: #000000;
}
.xgt-swip-nav-hd li.active span{ 
    border-bottom-color: #ff565b; 
}
.sct-bd-xgt.swipe{
    position: relative;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
}
.sct-bd-xgt > .swipe_wrap > div{
    width: 100%;
}
.xgt-list{
    margin: 0 10px 10px;
}
.xgt-list li{
    float: left;
    width: 50%;
    margin-top: 5px;
    overflow: hidden;
 }
.xgt-list li .page-container{
    display: block;
    position: relative;
    width: auto;
    height: 0;
    padding: 50% 0;
}
.xgt-list .page-wrap{
    position: absolute;
    top: 0;    
}
.xgt-list li:nth-of-type(2n) .page-wrap{
    margin: 5px 0 0 5px;
}
.xgt-list li:nth-of-type(2n+1) .page-wrap{
    margin: 5px 5px 0 0;
}
.xgt-list li img{
    position: static;
    display: block;
    margin: 0;
    max-width: 100%;
    width: auto;
    height: auto;
}
.xgt-list li footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: url(//img.to8to.com/wap/jwf-shadow.png) repeat-x;
    background-size: 4px 40px;
}
.xgt-list li p{
    font-size: 13px;
    line-height: 16px;
    color: #fff;
    position: absolute;
    left: 7px;
    bottom: 6px;
}
.swipe-xgt .sct-footer-xgt a{
    padding: 0;
    font-size: 14px;
}
.top-sct-xgt .sct-footer-xgt{
    border-bottom: 0!important;
    background-position: left bottom;
    background-image: linear-gradient(to bottom, transparent 0%,transparent 50%,#d9d9d9 50%,#d9d9d9 100%);
    background-image: -ms-linear-gradient(top, transparent 0%,transparent 50%,  #d9d9d9 50%, #d9d9d9 50%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9));
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: repeat-x!important;
}

/*装修行情开始*/
.situation-box-item{
    overflow: hidden;
    margin-bottom: 10px;
}
.situation-box-item > a{
    display: block;
    width: 80px;
    height: 80px;
    float: left;
    position: relative;
}
.situation-box-item > a > span{
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3em;
    color: #fff;
    line-height: 4;
    display: block;
    text-align: center;
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.6) 0%,rgba(255,255,255,0) 100%);
}
.situation-box-item a img{
    width: 100%;
    height: 100%;
}
.situation-box-item > div{
    margin-left: 93px;
}
.situation-box-item h3{
    font-weight: normal;
    font-size: 14px;
    line-height: 100%;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.situation-box-item p{
    margin-top: 11px;
    font-size: 12px;
    line-height: 22px;
    color: #999;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
}
.cityhref-box-top{
    height: 44px;
    line-height: 44px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
}
.cityhref-box .arrow-down {
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #666;

    position: absolute;
    top: 20px;
    margin-left: 0.5em;
    margin-top: 0;
}
/*
    装修早知道开始
*/
.sct-zxzzd *{
    /* font-family: "宋体"; */
}
.top-sct-zxzzd{
    border-bottom: 0;
}
.zxzzd-items{
    overflow: hidden;
}

.zxzzd-item{
    width: 50%;
    float: left;
    box-sizing: border-box;
    display: inline-block;
    height: 64px;
    position: relative;
/*    border-bottom: 1px solid #cccccc;*/
    border-bottom: 0 !important;
    background-position: bottom;
    background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: repeat-x !important;
}
.zxzzd-item p{
    font-size: 12px;
    color:#999999;
    line-height: 14px;
}
.zxzzd-item img{
    position: absolute;
}
.zxzzd-item h3{
    font-size: 16px;
    color: #000;
    line-height: 19px;
    font-weight: normal;
    margin: 12px 0 8px;
}
.zxzzd-item:nth-of-type(2n){
    padding-left: 12px;
}
.zxzzd-item:nth-of-type(2n + 1){
    position: relative;
}

.zxzzd-item:nth-of-type(2n + 1):after{
    position: absolute;
    right: 0;
    width: 1px;
    content: '';
    top: 0;
    height: 100%;
    border-right: 0 !important;
    background-position: right, left;
    background-image: linear-gradient(to left, transparent 50%, #fbfbfb 100%), linear-gradient(to right, transparent 50%, transparent 100%);
/*
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9)),-webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9));
*/
    -webkit-background-size: 1px 100%;
    background-size: 1px 100%;
    background-repeat: repeat-y !important;
}
.zxzzd-item:nth-of-type(1) img{
    width: 50px;
    height: 53px;
    right: 0;
    bottom: 0;
}
.zxzzd-item:nth-of-type(2) img{
    width: 52px;
    height: 46px;
    right: 0;
    bottom: 12px;
}
.zxzzd-item:nth-of-type(3) img{
    width: 36px;
    height: 40px;
    right: 0;
    bottom: 12px;
}
.zxzzd-item:nth-of-type(4) img{
    width: 42px;
    height: 38px;
    right: 0;
    bottom: 12px;
}
/* 搜索模块 */
.search-ipt{
    margin-top: 11px;
    height: 40px;
    position: relative;
    border: 1px solid #c8c6c4;
    border-radius: 5px;
}
.search-ipt input{
    height: 100%;
    font-size: 14px;
    width: 100%;
    padding-left: 15px;
    padding-right: 60px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 0;
    -webkit-apprence:none;
}
.search-keys{
    margin: 15px 0;
    line-height: 14px;
}
.search-keys label{
    color: #999999;
}
.search-keys *{
    font-size: 12px;
}
.search-keys-list{
    display: inline;
}
.search-keys-list li{
    list-style: none;
    display: inline-block;
    margin-right: 1em;
    color: #0bad4c;
}
.zxzzd-qa-list li{
    border-top: 1px dotted #e3e3e3;
    padding-right: 6%;
    height: 69px;
    position: relative;
}
.zxzzd-qa-list li:after{
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 10px;
    background-position: -26px -415px;
    left: 96.5%;
    top: 30px;
}

.zxzzd-qa-list li h3{
    color: #000;
    font-weight: normal;
    margin: 15px 0 9px 0;
    font-size: 14px;
    line-height: 100%;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.zxzzd-qa-list li div{
    margin-bottom: 15px;
    line-height: 100%;
    color: #999999;
}
.zxzzd-qa-list li div *{
    font-size: 11px;
    line-height: 100%;
    color: #999999;
}

/*
    装修早知道结束
*/

/*热门城市默认隐藏，点击时打开*/
.cityhref-box{
    border: 0;
}
.cityhref-box *{
    font-size: 14px;
}
.cityhref-box.active .arrow-down{
    border-bottom:6px solid #000;
    border-top: none;
}

.cityhref-box.active .cityhref-box-top{
    border-bottom: 1px solid #ccc;
}

.cityhref-box.active .cityhref-list{
    display:block;
}
.cityhref-box-top .cityhref-btn{
    display: block;
    font-size: 14px;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.cityhref-list{
    display:none;
    overflow: auto;
    padding: 8px 3.125% 8px 2.65625%;
    background-color: #fff;
}
.cityhref-list li{
    float: left;
    width: 3em;
    height: 2em;
    line-height: 2;
    text-align: center;
}
@media screen and (max-width: 600px){
    .situation-box-item > a{
        width: 80px;
        height: 80px;
    }
}
.sct-bd-pd{
    margin: 0 3.125%;
}
.top-sct .sct-hd-zxxg{
    border-top-color:#ff565b;
}
.top-sct .sct-hd-zxhq{
    border-top-color:#666666;
}
.top-sct-zxhq .situation-box{
    border-bottom: 1px solid transparent;
}
.top-sct-zxhq .sct-bd-pd{
    margin-top: 10px;
}
.top-sct-mfsj .sct-hd-mfsj{
    border-top-color:#f5c132!important;   
}
.site-info{
    margin: 10px 0 0 0;/*20150701*/
    padding: 8px 4.6875%;
    text-indent: 2em;
    font-size: 14px;
    line-height: 2em;
    border-top: 1px solid #d9d9d9;
}
.sct-footer{
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    color:#333;
    text-align: center;
    /*border: 1px solid #ccc;*/
    /*border-width: 0 0 0 1px;*/
    background-color: #f5f5f5;
    box-sizing: border-box;
}
.sct-footer a{
    display: block;
    color: #000;
}
.sct-footer span{
    font-family: '宋体';
    font-size: 14px;
}

.swipe_wrap > div {
  float:left;
  width:100%;
  position: relative;
  /*height:150px;*/
}
.slide_nav{
    display: block;
}

div.pg-ft{
    margin-top: 0;
    background-color: #E7E7E7;
}
body{
    background-color: #e7e7e7;
}
.user-feedback{
    height: 65px;
    padding: 15px 4.6875%;
    position: relative;
    box-sizing:border-box;
    border-top: 1px solid #d9d9d9;
}
.user-feedback h3{
    font-size: 16px;
    color: #333333;
    line-height: 100%;
    margin-bottom: 8px;
    font-weight: normal;
}
.user-feedback p{
    font-size: 12px;
    color: #333;
}
.user-feedback .icon-more{
    position: absolute;
    right: 4.6875%;
    top:28px;
}
/*咨询热线开始*/
.top-sct-zxrx{
    display: block;
    height: 46px;
    width: 100%;
    text-align: center;
    border-top: 1px solid #d9d9d9;
    margin-bottom: 0;
    border-bottom: 0;
}
.top-sct-zxrx{
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
}
.top-sct-zxrx .span-info{
    font-size: 14px;
    color: #333333;
}
.top-sct-zxrx .span-tel{
    font-size: 14px;
    color: #ff6b06;
    font-weight: bold;
}
.top-sct-zxrx .icon-tel-green{
    display: inline-block;
    vertical-align: middle;
    margin: 0 9px;
}
/*咨询热线结束*/

/* 城市选择页css */
/* 当前城市开始 */
.city_page .row:last-of-type{
    /*border-bottom: 2px solid #ebebeb;*/
    border-bottom:none;
}
.city_page .current-city {
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    background-color: #fbf7f5;
}
.city_page .current-city em,.city_page #position a {
    color: #0bae4c;
}

/* 当前城市结束 */
.city_page{
    background-color:white;
}

.city_page .row {
    overflow: hidden;
}

.city_page .row-hd {
    border-bottom: 2px solid #38b801;
    font-size: 14px;
    color: #0baf4d;
    font-family: "宋体";
    height: 30px;
    line-height: 30px;
    background-color: #efefef;
    padding-left: 4.21875%;
}

.city_page .row-bd ul {
    background-color: #f6f7f5;
    list-style: none;
    margin: 0 auto;
    position: relative;
    bottom: -1px;
}
.city_page .row-bd ul li {
    float: left;
    display: inline;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.city_page .row-bd ul li:active{
    background-color:#0baf4d;
}

/* 热门城市开始 */
.city_page .col-3 li {
    width: 33%;
}
.city_page .col-3 li:nth-child(3n) {
    border-bottom: 1px dotted #dddddd;
}
.city_page .col-3 li:nth-child(3n+1), .col-3 li:nth-child(3n+2) {
    border-bottom: 1px dotted #dddddd;
    border-right: 1px dotted #dddddd;
}

/* 热门城市结束 */
/* 按字母排序结束 */
.city_page .col-5 li {
    width: 19%;
}
.city_page .col-5 li:nth-child(5n) {
    border-bottom: 1px dotted #dddddd;
}
.city_page .col-5 li:nth-child(5n+1), .col-5 li:nth-child(5n+2), .col-5 li:nth-child(5n+3), .col-5 li:nth-child(5n+4) {
    border-bottom: 1px dotted #dddddd;
    border-right: 1px dotted #dddddd;
}

/* 热字母排序结束 */
.m3-icon, .main-enter span, .knowlage i {
    background: url("//img.to8to.com/wap/v2/m3icon.png") no-repeat;  }

.main-enter {
    width: 100%;
    padding-top: 15px;
background-color: #fff}
.main-enter li {
    text-align: center;
    float: left;
    width: 25%;
    font-size: 12px;
    color: #333;
    margin-bottom: 15px; }
.main-enter span {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 51px;
    background-size: 50px; }
.main-enter span.icon-zxtuku-enter {
    background-position: 0 0; }
.main-enter span.icon-zxgl-enter {
    background-position: 0 -58px; }
.main-enter span.icon-zxgx-enter {
    background-position: 0 -117px; }
.main-enter span.icon-pptm-enter {
    background-position: 0 -176px; }
.main-enter span.icon-gyyf-enter {
    background-position: 0 -234px;
    margin-top: 6px; }
.main-enter span.icon-hxsj-enter {
    background-position: 0 -292px;
    margin-top: 6px; }
.main-enter span.icon-zxbj-enter {
    background-position: 0 -349px;
    margin-top: 6px; }
.main-enter span.icon-zxb-enter {
    background-position: 0 -407px;
    margin-top: 6px; }
.main-enter span em {
    background-color: red;
    font-size: 11px;
    position: absolute;
    right: -10px;
    top: -5px;
    padding: 2px 3px;
    color: #fff;
    border-radius: 8px; }
.main-enter h2 {
    padding-top: 8px; }

.sp {
    height: 10px;
    background: #e7e7e7;
    /*border-top: solid 1px #d9d9d9;
    border-bottom: solid 1px #d9d9d9;*/ }

.sp2 {
    height: 10px;
    border-top: solid 1px #d9d9d9;
    background: #e7e7e7;
     }

.knowlage{
    background-color: #fff;/*20150701*/
    border-bottom: solid 1px #e3e3e3;
}
.knowlage li {
    text-align: center;
    float: left;
    width: 33.33%;
    height: 45px;
    line-height: 45px;
    border-left: 0 !important;
    background-position: left;
    background-image: linear-gradient(to left, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
    -webkit-background-size: 1px 100%;
    background-size: 1px 100%;
    background-repeat: repeat-y !important;
    position: relative; }
.knowlage li:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    left: 0;
    width: 100%;
    z-index: 1;
    border-bottom: 0 !important;
    background-position: bottom;
    background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
    /*linear-gradient(to top,transparent 0%,transparent 50%, #d9d9d9 100% ),
    linear-gradient(to bottom,transparent 0%, transparent 50%,#f5f5f5 100%);*/
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: repeat-x !important; }
.knowlage i {
    background-size: 50px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: -4px; }
.knowlage i.rj {
    background-position: 0 -469px; }
.knowlage i.fs {
    background-position: 0 -493px;
    vertical-align: -5px; }
.knowlage i.xz {
    background-position: 0 -517px; }
.knowlage i.xw {
    background-position: 0 -538px; }
.knowlage i.dk {
    background-position: 0 -564px; }
.knowlage i.mb {
    background-position: 0px -587px; }
.knowlage span {
    font-size: 13px;
    display: inline-block; }
/*half pixel line */
.top-half-pixel {
    border-top: 0 !important;
    background-position: bottom;
    background-image: linear-gradient(to top, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
    /*linear-gradient(to bottom,transparent 0%, transparent 50%,#d9d9d9 100%)*/
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: repeat-x !important; }

.bottom-half-pixel {
    border-bottom: 0 !important;
    background-position: bottom;
    background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #d9d9d9 50%, #d9d9d9 100%);
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    background-repeat: repeat-x !important; }

.left-half-pixel {
    border-left: 0 !important;
    background-position: left,right;
    background-image: linear-gradient(to left, transparent 50%, #fbfbfb 100%), linear-gradient(to right, transparent 50%, transparent 100%);
    /*
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9)),-webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9));
    */
    -webkit-background-size: 1px 100%;
    background-size: 1px 100%;
    background-repeat: repeat-y !important; }

.right-half-pixel {
    border-right: 0 !important;
    background-position: right, left;
    background-image: linear-gradient(to left, transparent 50%, #fbfbfb 100%), linear-gradient(to right, transparent 50%, transparent 100%);
    /*
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9)),-webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #d9d9d9), to(#d9d9d9));
    */
    -webkit-background-size: 1px 100%;
    background-size: 1px 100%;
    background-repeat: repeat-y !important; }

/*half pixel line ...end*/
/*add dialog style by lshc.lu 20150715*/
.h5-dialog-bg {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    vertical-align: middle;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
.h5-dialog-bg figure {
    position: relative;
    display: block;
    margin: 0 20px; }
.h5-dialog-bg figure span {
    position: absolute;
    right: -11px;
    top: -10px; }
.h5-dialog-bg figure span img {
    height: 24px;
    position: relative;
    z-index: 100; }
.h5-dialog-bg figure p {
    position: absolute;
    bottom: 0;
    height: 70px;
    width: 100%;
    z-index: 119; }

/* 抢免费设计名额 */
.free-design {
    position: relative;
    
    background-color: #fff;
    margin: 10px 0;
    
}
.free-design header {
    border-top: 2px solid #f5c132;
}
.free-design h1 {
    padding: 0 10px;
    height: 42px;
    border-bottom: 1px solid #e3e3e3;
    line-height: 42px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
.free-design .free-design-tip {
    position: absolute;
    height: 42px;
    top: 0;
    right: 0;

    padding-right: 10px;

    line-height: 42px;
}
.free-design .free-design-tip-color {
    color: #0bad4c;
}

.free-design .free-design-body {

}
.free-design .free-design-count {
    padding: 20px 0 20px 0;

    text-align: center;
    font-size: 21px;
}
.free-design .num {
    vertical-align: inherit;
    display: inline-block;
    width: 27%;
    font-size: 0;
    text-align: center;
    color: #fff;
}
.free-design .num .free-design-img {
    display: inline-block;
    background: url('//img.to8to.com/wap/v2/numbg.png') no-repeat;
    background-size: 100% 100%;
    width: 33.3%;
}
.free-design .num span {
    display: inline-block;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
    padding: 5px;
}
.mfsj-from .mfsj-form-arrow {
    position: relative;
}
.mfsj-from .mfsj-form-arrow:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    bottom: 17px;
    right: 5px;
    border: 5px solid transparent;
    border-left: 5px solid #aaa;
}
.mfsj-from .zxd-form-agree.mfsj-form-agree input[type=checkbox]:checked {
    border: 1px solid #ddd;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphZWZhZWY2OS02ZWY0LWQ0NDAtODMzMi02OTRhN2FlOTNiZWIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0VBNkVCQkU5MDVDMTFFNkFGMDBDRjlBNUQwRkQ0NTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0VBNkVCQkQ5MDVDMTFFNkFGMDBDRjlBNUQwRkQ0NTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjFDRkI5RjI5MDVDMTFFNjkyQTZENTFERkM0QTlENEIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjFDRkI5RjM5MDVDMTFFNjkyQTZENTFERkM0QTlENEIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6wfspqAAACOklEQVR42rSWyYviQBSHk7hr4wbiehDxoLYnFRH8+0VwvYh68CBKqyCoiLuo880UpJ2eNu2SeYfwKCpfXn71q1clXy4XSZJ4TiaT6XS62WxOp5P0eBgMBrvd7vP5AoGALMuMyEAPh0O73bZYLKFQ6O3tjUlPoClotVqNRqP9fp9Kpcxms3Q+n5vN5mAwuOgUoADyJZnvLBaLZDIp6RedTsftdivoiw6SrgEQrIJA6KsvGuB6vVZQ57l103YLS2jUhUV9Hx8fJOFwWDiP0Afd7XZ7vd5vL8sydDGovM7t9/uCK8pXx19F44RWqyVy9qFa8qvo5XJZr9dFpR6PJ5PJqEK/hGZDVyqV4/FIbrPZcrncF6c9iWYfV6vV7XZLbjKZ8vm81Wr9Msd4bSA2Pc9rA92yWqPRmM/nwhLZbNbpdP477RONMWkrJHRXVFMURcNqzBF5Op2mkX477fN9tdLxeFwul+m0P1otHo9Ho9FbFSjXPSUWi4l8NpuVSiX6gLbVEomEhm5/Vf3+J0T5tC3oQtB7rKaFFkHhLIuwEfZCGSHrbrfTtprWMqoRDAZxEt4CjclqtRoHBQugbbWfqxbB/xaLRdHHUYCT80er3YsmHA4HdK/Xez2oYbUH0ASncqFQQJ97rPaN1vwjgt5aE8ZRQG3z97cBXjQiKD5zuVy35vHtSCTyUIcByHVHQTtah75nI0Cwit/vx2TD4VAvLiiAYP/jxUxWr5NsCloE++Lp6yS7FB1wlGgAvwQYAFSOl9K82s+BAAAAAElFTkSuQmCC") no-repeat center;
    background-size: 15px;
}
.mfsj-from .mfsj-form-agree {
    color: #666;
}
.mfsj-from .zxd-form-agree.mfsj-form-agree a {
    text-decoration: underline;
    color: #666;
}
.free-design .free-design-gift {
    padding-bottom: 20px;
}
.free-design .free-design-gift-wrap {
    padding: 0 15px;
    position: relative;
    overflow: hidden;
}
.free-design .free-design-gift-box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border:1px solid #fe8864;
    width: 48%;
    font-size: 14px;
    line-height: 16px;
    height: 74px;
}
.free-design .free-design-gift-box:nth-child(1) {
    float: left;
    padding: 20px 19px 20px 10px;
}
.free-design .free-design-gift-box:nth-child(2) {
    float: right;
    padding: 20px 10px 20px 19px;
}
.free-design .free-design-gift-circle {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    width: 50px;
    height: 50px;
    border: 1px solid #fe8864;
    border-radius: 50%;
    background-color: #fff;

    text-align: center;
    line-height: 50px;
    color: #fe8864;
}
.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        -moz-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        -moz-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

.free-design-modal {
    text-align: center;
}
.free-design-modal .free-design-modal-title {
    font-weight: bold;
    display: block;
    padding: 10px 0;
    font-size: 20px;
}
.free-design-modal .free-design-modal-text {
    font-size: 16px;
    margin-top: 15px;
}
.free-design-modal .free-design-modal-text-c {
    color: #ea4504;
}
/* ----------- iPhone 4 and 4S ----------- */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
 .free-design .free-design-gift-box {
    font-size: 12px;
  }  
  .free-design-modal .free-design-modal-text {
    font-size: 14px;
  }
}
/* ----------- iPhone 5 and 5S ----------- */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .free-design .free-design-gift-box {
    font-size: 12px;
  }
  .free-design-modal .free-design-modal-text {
    font-size: 14px;
  }
}

/* ----------- iPhone 6 ----------- */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .free-design .free-design-gift-box {
    font-size: 14px;
  }  
  .free-design-modal .free-design-modal-text {
    font-size: 16px;
  }
}