
.fk-index-main .f-main-list{
text-align:center;
width:100%}
.fk-index-main .f-main-item{
display:inline-block;
margin:0 64px 120px 64px;
width:146px;
*display:inline;
_zoom:1;
position:relative;
height:207px}
.fk-infoBlockWrap .fk-infoBlock{
width:146px;
height:146px;
transform-origin:center center;
position:relative;
_overflow:visible}
.fk-infoBlockWrap .f-bg{
width:146px;
height:146px;
background:#27c9f8;
background:linear-gradient(145deg,#06e5f8,#3eb5f8);
position:absolute;
z-index:0;
left:0;
top:0;
border-radius:73px;
transition:all .3s;
transform-origin:center center;
overflow:visible}
.fk-infoBlockWrap .f-infoBlock-normal .f-bg{
background:transparent}
.fk-infoBlockWrap .f-infoIcon{
background:url(home_ico.png?v=20190329) no-repeat -209px -24px;
width:90px;
height:70px;
position:absolute;
left:50%;
top:50%;
margin-left:-45px;
margin-top:-35px;
transition:opacity .3s}
.fk-infoBlockWrap .f-infoIcon-listedBrand{
background-position:-95px -130px}
.fk-infoBlockWrap .f-infoIcon-funcRich{
background-position:-86px -232px}
.fk-infoBlockWrap .f-infoIcon-oneKey{
background-position:-99px -330px}
.fk-infoBlockWrap .f-infoIcon-model{
background-position:-204px -327px}
.fk-infoBlockWrap .f-infoIcon-site3to1{
background-position:-208px -231px}
.fk-infoBlockWrap .f-infoIcon-easeMaintain{
background-position:-209px -128px}
.fk-infoBlockWrap .f-infoIcon-superSevice{
background-position: -90px -21px}

.fk-infoBlockWrap .f-infoIcon-welfare{
background-position:-321px -24px}

.fk-infoBlockWrap .f-infoIcon-title{
background-position:-321px -134px}
.fk-infoBlockWrap .f-infoIcon-dispatch{
background-position:-321px -235px}
.fk-infoBlockWrap .f-infoIcon-cht{
background-position:-450px -20px}
.fk-infoBlockWrap .f-infoIcon-gongshang{
background-position:-450px -136px}
.fk-infoBlockWrap .f-infoIcon-dangan{
background-position:-450px -236px}
.fk-infoBlockWrap .f-infoIcon-gmxcy{
background-position:-450px -330px}
.fk-infoBlockWrap .f-infoIcon-zcdx{
background-position:-554px -24px}

.f-index-model .f-item:hover .fk-casePc-formWrapHover,.fk-casePc-formWrapHover:hover{
transform:scale(1.02,1.02) translateZ(0)}

.fk-index-screen .f-qrCodeImg{
width:134px;
height:134px}
.fk-index-screenHover .f-screenMask,.fk-index-screenUnHover .f-screenMask{
opacity:0;
filter:alpha(opacity=0)}
.fk-index-screenHover .f-screenMask{
transition:opacity .3s}
.fk-index-screenHover .f-qrCode,.fk-index-screenUnHover .f-qrCode{
top:-151px}
.fk-index-screenHover .f-qrCode{
transition:top .3s}
.fk-index-screenHover .f-btn-preview,.fk-index-screenHover .f-btn-free,.fk-index-screenUnHover .f-btn-preview,.fk-index-screenUnHover .f-btn-free{
filter:alpha(opacity=0);
opacity:0}
.fk-index-screenHover .f-btn{
transition:opacity .3s}
.fk-index-screenHover:hover .f-screenMask{
filter:alpha(opacity=60);
opacity:.6;
transform:scale(1)}
.fk-index-screenHover:hover .f-btn-preview,.fk-index-screenHover:hover .f-btn-free,.fk-index-screenHover:hover .f-btn{
filter:alpha(opacity=100);
opacity:1}
.fk-index-screenHover:hover .f-qrCode{
top:75px}
.fk-index-mobiArea{
width:220px;
height:452px;
position:relative}

.f-main-itemHover .fk-infoBlockWrap:hover .f-infoBlock-fasico .f-bg{
height:159px;
width:236px;
left:-45px;
top:-13px;
border-radius:20px 20px 0 0/20px 20px 0 0;
background-color:#06e5f8;
background:linear-gradient(90deg,#3eb5f8,#06e5f8)}
.f-main-itemHover .fk-infoBlockWrap-listedBrand:hover .f-infoBlock-fasico .f-bg{
background-color:#64aaf2;
background:linear-gradient(90deg,#64edea,#64aaf2)}
.f-main-itemHover .fk-infoBlockWrap-funcRich:hover .f-infoBlock-fasico .f-bg{
background-color:#f8788b;
background:linear-gradient(90deg,#f8c84c,#f8788b)}
.f-main-itemHover .fk-infoBlockWrap-oneKey:hover .f-infoBlock-fasico .f-bg{
background-color:#f65589;
background:linear-gradient(90deg,#f26768,#f65589)}
.f-main-itemHover .fk-infoBlockWrap-model:hover .f-infoBlock-fasico .f-bg{
background-color:#c467ff;
background:linear-gradient(90deg,#fe80fb,#c467ff)}
.f-main-itemHover .fk-infoBlockWrap-site3to1:hover .f-infoBlock-fasico .f-bg{
background-color:#38cf7a;
background:linear-gradient(90deg,#32dab7,#38cf7a)}

.f-main-itemHover .fk-infoBlockWrap-title:hover .f-infoBlock-fasico .f-bg{
background-color:#d72204;
background:linear-gradient(90deg,#f65589,#d72204)}
.f-main-itemHover .fk-infoBlockWrap-easeMaintain:hover .f-infoBlock-fasico .f-bg{
background-color:#b376ff;
background:linear-gradient(90deg,#44aaf8,#b376ff)}
.f-main-itemHover .fk-infoBlockWrap-superSevice:hover .f-infoBlock-fasico .f-bg{
background-color:#6cbaf8;
background:linear-gradient(90deg,#7ee1f9,#6cbaf8)}
.f-main-itemHover .fk-infoBlockWrap:hover .f-infoBlock-normal .f-bg{
height:159px;
width:236px;
left:-45px;
top:0;
bottom:-13px;
background:#fff;
border-radius:0 0 20px 20px/ 0 0 20px 20px}
.fk-infoBlockWrap{
position:relative;
width:146px;
height:146px}
.fk-infoBlockWrap .f-wrapBg{
position:absolute;
width:100%;
height:100%;
border-radius:0;
transition:all .3s;
overflow:visible}
.f-main-itemHover .fk-infoBlockWrap:hover .f-wrapBg{
width:236px;
height:318px;
box-shadow:0 0 10px 0 rgba(0,0,0,0.15);
left:-45px;
top:-13px;
border-radius:20px}
.fk-infoBlockWrap .f-infoWrap{
position:absolute;
top:0;
z-index:2;
text-align:center;
width:238px;
left:-45px;
transition:all .3s;
opacity:0;
filter:alpha(opacity=0)}
.f-infoBlock-fasico .f-infoWrap{
top:-13px;
text-align:center}
.fk-infoBlockWrap-listedBrand .f-bg{
background-color:#64aaf2;
background:linear-gradient(145deg,#64edea,#64aaf2)}
.fk-infoBlockWrap-listedBrand:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#64edea,#64aaf2)}
.fk-infoBlockWrap-funcRich .f-bg{
background-color:#f8788b;
background:linear-gradient(145deg,#f8c84c,#f8788b)}
.fk-infoBlockWrap-funcRich:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#f8c84c,#f8788b)}
.fk-infoBlockWrap-oneKey .f-bg{
background-color:#f65589;
background:linear-gradient(145deg,#f26768,#f65589)}
.fk-infoBlockWrap-oneKey:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#f26768,#f65589)}
.fk-infoBlockWrap-model .f-bg{
background-color:#c467ff;
background:linear-gradient(145deg,#fe80fb,#c467ff)}
.fk-infoBlockWrap-model:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#fe80fb,#c467ff)}
.fk-infoBlockWrap-site3to1 .f-bg{
background-color:#38cf7a;
background:linear-gradient(145deg,#32dab7,#38cf7a)}
.fk-infoBlockWrap-site3to1:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#32dab7,#38cf7a)}
.fk-infoBlockWrap-easeMaintain .f-bg{
background-color:#b376ff;
background:linear-gradient(145deg,#44aaf8,#b376ff)}
.fk-infoBlockWrap-easeMaintain:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#44aaf8,#b376ff)}
.fk-infoBlockWrap-superSevice .f-bg{
background-color:#6cbaf8;
background:linear-gradient(145deg,#7ee1f9,#6cbaf8)}
.fk-infoBlockWrap-superSevice:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#7ee1f9,#6cbaf8)}

.fk-infoBlockWrap-title .f-bg{
background-color:#d72204;
background:linear-gradient(145deg,#f65589,#d72204)}
.fk-infoBlockWrap-title:hover .f-infoBlock-fasico .f-bg{
background:linear-gradient(90deg,#f65589,#d72204)}

.fk-infoBlock .f-info-title{
font-size:16px;
padding-top:45px;
padding-bottom:25px;
line-height:1}
.fk-infoBlock .f-info-desc{
font-size:13px;
padding:0 10px;
line-height:1.8;
margin-top:-7px}
.fk-infoBlock .f-button{
background:#fff;
display:inline-block;
width:100px;
height:30px;
line-height:30px;
border-radius:15px;
z-index:3;
color:#2f82ff}
.f-infoBlock-fasico .f-info-title{
font-size:16px;
padding-top:35px;
padding-bottom:18px;
line-height:1}
.f-infoBlock-fasico .f-info-desc{
font-size:13px;
padding:0 10px;
line-height:1.8;
margin-top:-7px;
padding-bottom:16px}
.f-infoBlock-fasico .f-button.raised{
background:transparent;
color:#fff;
display:block;
margin:0 auto;
width:100px;
height:30px;
line-height:30px;
border-radius:15px;
z-index:3;
font-size:12px}
.f-infoBlock-fasico-mulLine .f-info-title{
padding-top:35px;
padding-bottom:10px}
.f-infoBlock-fasico-mulLine .f-info-desc{
font-size:13px;
padding:0 10px;
line-height:1.8;
margin-top:-7px;
padding-bottom:10px}
.f-infoBlock-fasico .f-button.raised:hover{
background-color:#fff;
color:#666}
.f-infoBlock-fasico .f-button.raised:hover .anim{
display:none}
.f-infoBlock-normal .f-info-title{
color:#333}
.f-infoBlock-normal .f-info-desc{
color:#666}
.f-infoBlock-fasico .f-info-title,.f-infoBlock-fasico .f-info-desc{
color:#fff}
.f-main-itemHover .fk-infoBlockWrap:hover .f-infoIcon{
opacity:0;
filter:alpha(opacity=0)}
.f-main-itemHover .fk-infoBlockWrap:hover .f-infoWrap{
opacity:1;
filter:alpha(opacity=100)}
.f-infoBlock-name{
padding-top:45px;
transition:opacity .1s;
opacity:1;
text-align:center;
font-size:16px;
color:#333;
line-height:1;
position:absolute;
top:146px;
width:100%;
left:0}
.f-main-itemHover:hover .f-infoBlock-name{
opacity:0;
filter:alpha(opacity=0)}
.fk-index-tabs{
padding-top:68px;
font-size:0;
display:inline-block;
*display:inline;
*zoom:1;
position:relative}
.fk-index-tabs .f-tab{
padding-bottom:15px;
width:70px;
margin-left:70px;
color:#333;
font-size:18px;
padding:0 12px 15px 12px;
line-height:1;
width:auto;
cursor:pointer}
.fk-index-tabs .f-tab-first,.fk-index-tabs .f-tab:first-child{
margin-left:0}
.fk-index-tabs .f-tab-activeLine{
position:absolute;
height:2px;
background:#4975e5;
display:block;
width:0}
.fk-index-tabs .f-tabLink{
color:#333;
display:block}
.fk-index-sliderPanel{
position:relative;
width:100%;
height:600px;
overflow:hidden}
.fk-index-sliderPanel .f-sldList{
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
overflow:hidden}
.set_4_button2{
position:relative;
font-weight:400;
text-align:center;
width:auto;
line-height:70px;
font-size:21px;
overflow:hidden;
position:relative;
z-index:0;
cursor:pointer;
color:#fff;
border-radius:35px;
border:solid #fff 1px;
width:220px;
text-align:center}
.set_4_button2.raised{
-moz-transition:all .1s;
-o-transition:all .1s;
-webkit-transition:all .1s;
transition:all .1s}
.anim{
-moz-transform:translateY(-50%) translateX(-50%);
-ms-transform:translateY(-50%) translateX(-50%);
-webkit-transform:translateY(-50%) translateX(-50%);
transform:translateY(-50%) translateX(-50%);
position:absolute;
top:50%;
left:50%;
z-index:-1}
.anim:before{
position:relative;
content:'';
display:block;
margin-top:100%}
.anim:after{
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border-radius:50%}
.hoverable .anim{
-moz-animation:anim-out .75s;
-webkit-animation:anim-out .75s;
animation:anim-out .75s}
.hoverable .anim:after{
-moz-animation:anim-out-pseudo .75s;
-webkit-animation:anim-out-pseudo .75s;
animation:anim-out-pseudo .75s}
.hoverable .anim,.hoverable .anim:after{
animation-iteration-count:infinite;
animation-duration:1.3s}
@-webkit-keyframes anim-in{
0%{
width:0}
100%{
width:100%}
}
@-moz-keyframes anim-in{
0%{
width:0}
100%{
width:100%}
}
@-ms-keyframes anim-in{
0%{
width:0}
100%{
width:100%}
}
@keyframes anim-in{
0%{
width:0}
100%{
width:100%}
}
@-webkit-keyframes anim-in-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@-moz-keyframes anim-in-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@-ms-keyframes anim-in-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@keyframes anim-in-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@-webkit-keyframes anim-out{
0%{
width:0}
100%{
width:100%}
}
@-moz-keyframes anim-out{
0%{
width:0}
100%{
width:100%}
}
@-ms-keyframes anim-out{
0%{
width:0}
100%{
width:100%}
}
@keyframes anim-out{
0%{
width:0}
100%{
width:100%}
}
@-webkit-keyframes anim-out-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@-moz-keyframes anim-out-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@-ms-keyframes anim-out-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}
@keyframes anim-out-pseudo{
0%{
background:rgba(0,0,0,0.25)}
100%{
background:transparent}
}

.fk-index-main,.f-index-model,.f-index-helper,.f-index-guest,.fk-footer{

margin:0 auto;
z-index:10;
padding-top:2px;
margin-top:-2px;
max-width:1200px}
.webHead{
position:fixed;
top:0;
left:0;
height:70px;
z-index:99}

@keyframes sidePanelCircle{
0%{
transform:translate(0,0)}
100%{
transform:translate(14px,0)}
}
@keyframes sidePanel{
0%{
transform:translate(0,-20px)}
100%{
transform:translate(0,0)}
}
@keyframes bPanel{
0%{
transform:translate(263px,-236px);
opacity:0}
100%{
transform:translate(0,0);
opacity:1}
}
@keyframes mPanel{
0%{
transform:translate(-146px,118px);
opacity:0}
100%{
transform:translate(0,0);
opacity:1}
}
@keyframes bPanelMountain{
0%{
transform:translate(85px,-45px)}
100%{
transform:translate(0,0)}
}
@keyframes mPanelBar1{
0%{
transform:translate(-74px,56px) scale(0,0)}
100%{
transform:translate(0,0) scale(1,1)}
}
@keyframes mPanelBar2{
0%{
transform:translate(-55px,43px) scale(0,0)}
100%{
transform:translate(0,0) scale(1,1)}
}
@keyframes mPanelBar3{
0%{
transform:translate(-38px,30px) scale(0,0)}
100%{
transform:translate(0,0) scale(1,1)}
}
@keyframes mPanelBar4{
0%{
transform:translate(-20px,16px) scale(0,0)}
100%{
transform:translate(0,0) scale(1,1)}
}
@keyframes mPanelBar5{
0%{
transform:translate(0,0) scale(0,0)}
100%{
transform:translate(0,0) scale(1,1)}
}
@keyframes sPanelCircle{
0%{
transform:translate(-25px,19px)}
100%{
transform:translate(0,0)}
}
@keyframes sPanelLine{
0%{
transform:translate(-12px,9px) scale(0,0)}
100%{
transform:translate(0,0) scale(1,1)}
}
@keyframes sidePanelBar1{
from{
transform:scale(0,0)}
to{
transform:scale(1,1)}
}
@keyframes panelList{
from{
opacity:.2}
to{
opacity:1}
}


/*ÁªÏµÎÒÃÇ*/

    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
    #dituContent{width:550px; max-width:90%;height:200px;border:#ccc solid 1px; float:left; margin-left:5%; margin-bottom:20px;}
    .rlzy_lxwm{max-width:90%;float: left;line-height:2;margin-left: 30px;}
    
@media screen and (max-width:420px)
{
     #dituContent{height:150px;}
}


    
@media screen and (max-width:1024px){
    
}
@media screen and (max-width:776px){
    
}
@media screen and (max-width:420px)
{
    .fk-index-main .f-main-item { margin:5px;}
    .f-infoBlock-name{ padding-top:20px;}
    .fk-index-main .f-main-list {margin:0px;padding:0;}
    
    .fk-infoBlockWrap{ display:;}
    
    .f-main-itemHover .fk-infoBlockWrap:hover .f-infoBlock-fasico .f-bg{
height:146px;
width:146px;
left:0px;
top:0px;
border-radius:73px;}


.f-main-itemHover .fk-infoBlockWrap:hover .f-wrapBg{
box-shadow:none;
}

    .f-infoBlock-fasico{display:;}
    .f-main-itemHover .fk-infoBlockWrap:hover .f-infoIcon{opacity:1;filter:alpha(opacity=1)}
    .f-infoBlock-normal{display:none;}
    .f-infoWrap{display:none;}
    .f-main-itemHover:hover .f-infoBlock-name{opacity:1;filter:alpha(opacity=1)}

}