/*----------------------------------------------------
*	index CSS FILE | by zhanglong | 
*	 
*	--COLOR PRIMARY 		14bc88
*	--COLOR RED				f5696c
*	--COLOR YELLOW			ffc600
*	--TEXT MAIN  			202020
*	--TEXT SECONDARY  		202020
* 
-----------------------------------------------------*/
@media (min-width: 1680px)  { .container { width: 1440px; }}

.surface-idx01 {  }
    .surface-idx01 .in { padding: 1rem; overflow: hidden; }
    .surface-idx01 .i { width: 25%; float: left; background-repeat: no-repeat; background-image: url(../images/nav-icon-02.png); background-size: 10rem auto; height: 8rem; overflow: hidden; padding-left: 12rem;}
    .surface-idx01 .i-01 { background-position: 0 0; }
    .surface-idx01 .i-02 { background-position: 0 -8rem; }
    .surface-idx01 .i-03 { background-position: 0 -16rem; }
    .surface-idx01 .i-04 { background-position: 0 -24rem; }
    .surface-idx01 .t { font-size: 1.8rem; padding-top: 1rem; }
    .surface-idx01 .d { color: #9f9f9f; }

	.surface-idx01 .in { text-align: center; }
    .surface-idx01 .in .x { display: inline-block;  }
    .surface-idx01 .in .xi { display: block; background-repeat: no-repeat; background-position: 50% 50%; width: 26rem; height: 10rem; line-height: 1000em; overflow: hidden; font-size: 2.2rem; text-align: center; color: #222; text-shadow: 0 0 1rem rgba(255,255,255,1); }
    .surface-idx01 .in .x1 .xi { background-image: url(../images/idx-fs1.jpg); }
    .surface-idx01 .in .x2 .xi { background-image: url(../images/idx-fs2.jpg); }
    .surface-idx01 .in .x3 .xi { background-image: url(../images/idx-fs3.jpg); }
    .surface-idx01 .in .x4 .xi { background-image: url(../images/idx-fs4.jpg); }

.surface-sketch {  }
    .surface-sketch .list .x { width: 33.33333333%; float: left; position: relative; border: 1rem solid #f0f0f0; }
    .surface-sketch .list .x img { width: 100%; }
    .surface-sketch .list p { color: #fff; background-color: rgba(0,0,0,0.5); font-size: 1.4rem; padding: 1rem 0; width: 100%; position: absolute; left: 0; bottom: 0; text-align: center; white-space: nowrap;overflow: hidden;  }



.surface-fitment {  }
    .surface-fitment .la { width: 32%; float: left; padding-right: 2rem; }
    .surface-fitment .lb { width: 36%; float: right; }
    .surface-fitment .l { width: 25%; float: left; }
    .surface-fitment .l a { display: block; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; overflow: hidden; color: #FFF; font-size: 2rem; border: 1rem solid #FFF;
    }
    .surface-fitment .l a img { width: 100%; }
    /*
    .surface-fitment .la a { height: 36rem; }
    .surface-fitment .lb a { height: 18rem; }
    */
    .surface-fitment .l a + a { margin-top: 2rem; }

.surface-article {  }
    .surface-article .in { border: 1px solid #d0d0d0; background-color: #FFF; }
    .surface-article .l { width: 33.3333333333%; float: left; padding: 4rem; position: relative;}
    .surface-article .l + .l { border-left: 1px solid #d0d0d0; }
    .surface-article .lh { padding: 1.5rem 0 0 6rem; font-size: 1.8rem; }
    .surface-article .lh1 { background: url(../images/index-article-i1.png) no-repeat 0 50%; }
    .surface-article .lh2 { background: url(../images/index-article-i2.png) no-repeat 0 50%; }
    .surface-article .lh3 { background: url(../images/index-article-i3.png) no-repeat 0 50%; }
    .surface-article .lst, .surface-article .lbox { padding-top: 2rem; }
        .surface-article .lst a { display: block; line-height: 3rem; white-space: nowrap; overflow: hidden; }
    .surface-article .more { position: absolute; top: 6rem; right: 3rem; }
    .surface-article .lbox { margin: 0 -1rem; }
    .surface-article .lbox .i { width: 50%; float: left; padding: 1rem; }
    .surface-article .lbox .btn { text-align: left; line-height: 5rem; height: 5rem; }

.surface-progress {  }
    .surface-progress .in { text-align: center; }
    .surface-progress .i { width: 13%; text-align: center; display: inline-block;}
    .surface-progress .ico { width: 8rem; height: 8rem; border: 1px solid #d0d0d0; border-radius: 100%; margin: 0 auto; overflow: hidden; padding: 1.6rem; background-color: #FFF;}
    .surface-progress .ico img { width: 100%; display: block; }
    .surface-progress .t { font-size: 1.8rem; padding-top: 1rem; }
    .surface-progress .d { color: #9f9f9f; }

.flink { background-color: #FFF; padding: 2rem 0 6rem;}
    .flink a { padding: 0.5rem 1rem; display: inline-block;}

/*
 * 
 *          mobile only 
 * 
 */

.section-enter { padding: 0.5rem 1.5rem; }
    .section-enter .i { width: 20%; float: left; padding: 0.5rem; }
    .section-enter .i a { background-position: 50% 0; background-repeat: no-repeat;background-size: 80% auto; display: block; text-align: center; padding: 100% 0 0.5rem; white-space: nowrap;}
    .section-enter .i .a1 { background-image: url(../images/idx-m-enter01.png); }
    .section-enter .i .a2 { background-image: url(../images/idx-m-enter02.png); }
    .section-enter .i .a3 { background-image: url(../images/idx-m-enter03.png); }
    .section-enter .i .a4 { background-image: url(../images/idx-m-enter04.png); }
    .section-enter .i .a5 { background-image: url(../images/idx-m-enter05.png); }
    .section-enter .i .a6 { background-image: url(../images/idx-m-enter06.png); }
    .section-enter .i .a7 { background-image: url(../images/idx-m-enter07.png); }
    .section-enter .i .a8 { background-image: url(../images/idx-m-enter08.png); }
    .section-enter .i .a9 { background-image: url(../images/idx-m-enter09.png); }
    .section-enter .i .a10 { background-image: url(../images/idx-m-enter10.png); }

.gird .swiper-slide { padding: 0.5rem; }

.section-header-midx { position: relative; border-top: 1px solid #e4e4e4; padding-bottom: 1rem;}
    .section-header-midx .t { display: block; font-size: 2.2rem; line-height: 1.4; font-weight: bold; color: #222; padding-left: 1rem; padding-top: 2rem; border-top: 1rem solid #f0f0f0;}
    .section-header-midx .d { padding-left: 1rem; font-size: 1.2rem; color: #9f9f9f; }
    .section-header-midx .more { padding: 0.5rem; position: absolute; right: 1rem; top: 2.6rem; display: block;}

.swiper-mobcat .swiper-slide a { height: 3rem; line-height: 3rem; display: block; text-align: center; border: 1px solid #dfdfdf; margin: 0 0.4rem;}
.surface-article {  }
.surface-article .mu { text-align: center; }
.surface-article .mu a { display: inline-block; text-align: center; width: 30%; border: 1px solid #dfdfdf; height: 3rem; line-height: 3rem;} 
.surface-article .list .i { display: block; height: 3.4rem; line-height: 3.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.surface-article .list .i span { padding-right: 1rem; color: #999; }
.surface-article .article-im { padding: 1rem; }
.surface-article .article-im .i { display: block; position: relative; margin: 1.5rem 0;}
.surface-article .article-im img { float: right; width: 28%; height: 6rem; }
.surface-article .article-im .t { float: left; width: 72%; font-size: 1.4rem; font-weight: bold;}
.surface-article .article-im span { position: absolute; bottom: 0; left: 0; color: #999; padding: 0 0.5rem; border: 1px solid #dfdfdf;}

.section-calc { padding: 1rem 1rem 2rem; }
.section-calc .t { font-size: 1.6rem; font-weight: bold; padding-bottom: 0.5rem; }
.section-calc .c { display: table; width: 100%; }
.section-calc .c1, .section-calc .c2 { display: table-cell; vertical-align: top; }
.section-calc .c1 { width: 1%; padding-right: 1rem;}
.section-calc .c1 img { width: 10rem; }
.section-calc .c2 .acre { background: url(../images/m2.png) no-repeat 90% 50% / auto 1.2rem; padding-right: 2.4rem; }
.section-calc .c2 .htype { padding-right: 3rem; background: url(../images/arr-select.png) no-repeat 96% 50% / auto 3.2rem; }
.section-calc .act { padding-top: 0.6rem; }

@media (max-width: 829px) {
    .gird { padding: 0.5rem; }
    .gird-company .swiper-slide, 
    .gird-designer .swiper-slide 
    { text-align: center; }

    .gird-company .cv, 
    .gird-designer .cv 
    { height: 0; padding-bottom: 100%; background-size: cover; background-position: 50% 0; border-radius: 1rem; display: block;}

    .gird-company .d { padding-top:1rem; }
    .gird-company .t { font-size: 1.4rem; font-weight: bold; line-height: 1.2; height: 4rem; margin-bottom: 1rem; display: block; overflow: hidden;}

    .gird-designer .t { font-size: 1.4rem; font-weight: bold; line-height: 1.4; display: block; padding: 0.5rem 0;}
    .gird-designer .d { color: #999; }

    .gird-sketch .swiper-slide a { display: block; position: relative; }
    .gird-sketch .swiper-slide img { width: 100%; }
    .gird-sketch .swiper-slide span { position: absolute; left: 15%; top: 4%; font-size: 1.8rem; color: #111; text-align: center;}
    .gird-sketch .swiper-slide span i { font-size: 1.4rem; display: block;}
    .surface-baili { padding: 1rem; }
    .surface-baili img {  width: 30%; float: left; margin-right: 1rem; }
    .surface-article .article-im .t { line-height: 1.4; font-size: 1.2rem; height: 3.4rem; overflow: hidden; }

}


.xinjiayouhua {text-align: center;}
.youhuabr {
/*background:url(xinjiazt.jpg);*/
max-width:1140px;
width:100%;margin:0 auto;  
background-size: 100%;
}
.xinjiayouhua .xfzta {text-align: end;padding-right: 15%;padding-top: 6%;padding-bottom: 6%;width: 50%;margin-left: 55%;}
.xinjiayouhua .xfzta .one1 {background: #14bc88; width: 220px;text-align: center;padding: 10px 0;border-radius: 10px;margin: 15px 0;}
.xinjiayouhua .xfzta .one2 {background: #ff972f; width: 220px;text-align: center;padding: 10px 0;border-radius: 10px;margin-left: 25%;margin-top: 15px;margin-bottom: 15px;}
.xinjiayouhua .xfzta .one3 {background: #ebebeb; width: 220px;text-align: center;padding: 10px 0;border-radius: 10px;margin-left: 50%;margin-top: 15px;margin-bottom: 15px;}
.xinjiayouhua .xfzta h2 {font-size: 13px;margin: 10px 0;}
.xinjiayouhua .xfzta .one1 h2 {color:#fff;}
.xinjiayouhua .xfzta .one2 h2 {color:#fff;}