@charset "utf-8";
/* CSS Document */

.floormap input{
	display: none;
}
input[name="red"]:checked ~ .shopbox.red .kk{
	left: 0px!important;
	top: -5px!important;
}
input[name="red"]:checked ~ .shopbox.red .kk .fbox{
	left: inherit;
	top: inherit;
}
input[name="red"]:checked ~ .shopbox.red .kk .fbox .fbox2{
	left: inherit;
	top: inherit;
}
input[name="red"]:checked ~ .shopbox.red .kk .fbox .fbox2 .fbox3{
	left: inherit;
	top: inherit;
}

input[name="yellow"]:checked ~ .shopbox.yellow .kk{
	left: 0px!important;
	top: -5px!important;
}
input[name="yellow"]:checked ~ .shopbox.yellow .kk .fbox{
	left: inherit;
	top: inherit;
}
input[name="yellow"]:checked ~ .shopbox.yellow .kk .fbox .fbox2{
	left: inherit;
	top: inherit;
}
input[name="yellow"]:checked ~ .shopbox.yellow .kk .fbox .fbox2 .fbox3{
	left: inherit;
	top: inherit;
}

input[name="blue"]:checked ~ .shopbox.blue .kk{
	left: 0px!important;
	top: -5px!important;
}
input[name="blue"]:checked ~ .shopbox.blue .kk .fbox{
	left: inherit;
	top: inherit;
}
input[name="blue"]:checked ~ .shopbox.blue .kk .fbox .fbox2{
	left: inherit;
	top: inherit;
}
input[name="blue"]:checked ~ .shopbox.blue .kk .fbox .fbox2 .fbox3{
	left: inherit;
	top: inherit;
}

input[name="green"]:checked ~ .shopbox.green .kk{
	left: 0px!important;
	top: -5px!important;
}
input[name="green"]:checked ~ .shopbox.green .kk .fbox{
	left: inherit;
	top: inherit;
}
input[name="green"]:checked ~ .shopbox.green .kk .fbox .fbox2{
	left: inherit;
	top: inherit;
}
input[name="green"]:checked ~ .shopbox.green .kk .fbox .fbox2 .fbox3{
	left: inherit;
	top: inherit;
}

.floormap{
	position: relative;
	width: 1030px;
	height: 470px;
	transform: scale(1);
	background-image: url(img/shopmap/map2.svg);
	margin: 30px 0;
	background-repeat: no-repeat;
}
.shopbox{
	position: absolute;
}
.shopbox .kk-main{
	position: relative;
	left: 0px;
	top: 0px;
}
.shopbox .kk-main .kk{
	position: absolute;
	left: 0px;
	top: 0px;
	transition: all 0.1s;
	z-index: 1;
}
.shopbox .kk-main .kk .fbox{
	position: absolute;
	width:inherit;
	height: inherit;
}
.shopbox .kk-main .kk .fbox .fbox2{
	position: absolute;
	width: inherit;
	height: inherit;
}
.shopbox .kk-main .kk .fbox .fbox2 .fbox3{
	position: absolute;
	width: inherit;
	height: inherit;
}


.f114-gray{
	left: 352px;
	top: 75px;
	z-index: 2;
}
.shopbox.f114-gray .kk-main .kk{
	width: 67px;
	height: 33px;
	background-image: url(img/shopmap/f114-gray.svg);
}
.f109-gray{
	left: 271px;
	top: 233px;
	z-index: 5;
}
.shopbox.f109-gray .kk-main .kk{
	width: 89px;
	height: 46px;
	background-image: url(img/shopmap/f109-111-gray.svg);
}
.f106-gray{
	left: 462px;
	top: 166px;
	z-index: 4;
}
.shopbox.f106-gray .kk-main .kk{
	width: 89px;
	height: 46px;
	background-image: url(img/shopmap/f106-gray.svg);
}
.f115-gray{
	left: 447px;
	top: 151px;
	z-index: 2;
}
.shopbox.f115-gray .kk-main .kk{
	width: 33px;
	height: 29px;
	background-image: url(img/shopmap/f115-gray.svg);
}
.f114-gray2{
	left: 389px;
	top: 159px;
	z-index: 2;
}
.shopbox.f114-gray2 .kk-main .kk{
	width: 77px;
	height: 34px;
	background-image: url(img/shopmap/f114-gray2.svg);
}
.f104-gray{
	left: 557px;
	top: 282px;
	z-index: 3;
}
.shopbox.f104-gray .kk-main .kk{
	width: 71px;
	height: 31px;
	background-image: url(img/shopmap/f104-gray.svg);
}


		
.f113{
	left: 278px;
	top: 95px;
	z-index: 3
}
.shopbox.f113 .kk-main .kk{
	width: 120px;
	height: 62px;
	background-image: url(img/shopmap/f113.svg);
}
.shopbox.f113 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f113.svg);
}
.shopbox.f113 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f113.svg);
}
.shopbox.f113 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f113.svg);
}

.f115{
	left: 480px;
	top: 106px;
}
.shopbox.f115 .kk-main .kk{
	width: 105px;
	height: 57px;
	background-image: url(img/shopmap/f115.svg);
}
.shopbox.f115 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f115.svg);
}
.shopbox.f115 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f115.svg);
}
.shopbox.f115 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f115.svg);
}

.f121{
	left: 694px;
	top: 153px;
	z-index: 2
}
.shopbox.f121 .kk-main .kk{
	width: 127px;
	height: 52px;
	background-image: url(img/shopmap/f121.svg);
}
.shopbox.f121 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f121.svg);
}
.shopbox.f121 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f121.svg);
}
.shopbox.f121 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f121.svg);
}

.f101{
	left: 759px;
	top: 180px;
}
.shopbox.f101 .kk-main .kk{
	width: 191px;
	height: 79px;
	background-image: url(img/shopmap/f101.svg);
}
.shopbox.f101 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f101.svg);
}
.shopbox.f101 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f101.svg);
}
.shopbox.f101 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f101.svg);
}

.f105{
	left: 598px;
	top: 318px;
	z-index: 4;
}
.shopbox.f105 .kk-main .kk{
	width: 139px;
	height: 85px;
	background-image: url(img/shopmap/f105.svg);
}
.shopbox.f105 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f105.svg);
}
.shopbox.f105 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f105.svg);
}
.shopbox.f105 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f105.svg);
}

.f107{
	left: 571px;
	top: 392px;
	z-index: 4;
}
.shopbox.f107 .kk-main .kk{
	width: 70px;
	height: 33px;
	background-image: url(img/shopmap/f107.svg);
}
.shopbox.f107 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f107.svg);
}
.shopbox.f107 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f107.svg);
}
.shopbox.f107 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f107.svg);
}




.f114{
	left: 369px;
	top: 61px;
}
.shopbox.f114 .kk-main .kk{
	width: 80px;
	height: 38px;
	background-image: url(img/shopmap/f114.svg);
}
.shopbox.f114 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f114.svg);
}
.shopbox.f114 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f114.svg);
}
.shopbox.f114 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f114.svg);
}



.f119{
	left: 398px;
	top: 348px;
}
.shopbox.f119 .kk-main .kk{
	width: 83px;
	height: 54px;
	background-image: url(img/shopmap/f119.svg);
}
.shopbox.f119 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f119.svg);
}
.shopbox.f119 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f119.svg);
}
.shopbox.f119 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f119.svg);
}



.f120{
	left: 740px;
	top: 124px;
	z-index: 1;
}
.shopbox.f120 .kk-main .kk{
	width: 123px;
	height: 54px;
	background-image: url(img/shopmap/f120.svg);
}
.shopbox.f120 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f120.svg);
}
.shopbox.f120 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f120.svg);
}
.shopbox.f120 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f120.svg);
}

.f106{
	left: 330px;
	top: 207px;
	z-index: 5;
}
.shopbox.f106 .kk-main .kk{
	width: 286px;
	height: 114px;
	background-image: url(img/shopmap/f106.svg);
}
.shopbox.f106 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f106.svg);
}
.shopbox.f106 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f106.svg);
}
.shopbox.f106 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f106.svg);
}
input[name="blue"]:checked ~ .f106-gray{
	z-index: 2;
}





.f118{
	left: 402px;
	top: 142px;
	z-index: 1;
}
.shopbox.f118 .kk-main .kk{
	width: 58px;
	height: 34px;
	background-image: url(img/shopmap/f118.svg);
}
.shopbox.f118 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f118.svg);
}
.shopbox.f118 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f118.svg);
}
.shopbox.f118 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f118.svg);
}
.shopbox.f118 .kk-main .kk2{
	width: 58px;
	height: 34px;
	background-image: url(img/shopmap/f118.svg);
}

.f108{
	left: 489px;
	top: 159px;
	z-index: 3;
}
.shopbox.f108 .kk-main .kk{
	width: 85px;
	height: 48px;
	background-image: url(img/shopmap/f108.svg);
}
.shopbox.f108 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f108.svg);
}
.shopbox.f108 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f108.svg);
}
.shopbox.f108 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f108.svg);
}
input[name="green"]:checked ~ .f106-gray{
	z-index: 3;
}



.f117{
	left: 528px;
	top: 166px;
	z-index: 3;
}
.shopbox.f117 .kk-main .kk{
	width: 101px;
	height: 52px;
	background-image: url(img/shopmap/f117.svg);
}
.shopbox.f117 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f117.svg);
}
.shopbox.f117 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f117.svg);
}
.shopbox.f117 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f117.svg);
}


.f103{
	left: 584px;
	top: 177px;
	z-index: 4;
}
.shopbox.f103 .kk-main .kk{
	width: 101px;
	height: 50px;
	background-image: url(img/shopmap/f103.svg);
}
.shopbox.f103 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f103.svg);
}
.shopbox.f103 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f103.svg);
}
.shopbox.f103 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f103.svg);
}
.shopbox.f103 .kk-main .kk-b1{
	width: 101px;
	height: 50px;
	background-image: url(img/shopmap/f103.svg);
}

.f104{
	left: 570px;
	top: 264px;
	z-index: 2;
}
.shopbox.f104 .kk-main .kk{
	width: 95px;
	height: 40px;
	background-image: url(img/shopmap/f104.svg);
}
.shopbox.f104 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f104.svg);
}
.shopbox.f104 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f104.svg);
}
.shopbox.f104 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f104.svg);
}
.shopbox.f104 .kk-main .kk-b1{
	width: 95px;
	height: 40px;
	background-image: url(img/shopmap/f104.svg);
}



.f190{
	left: 634px;
	top: 226px;
	z-index: 1;
}
.shopbox.f190 .kk-main .kk{
	width: 93px;
	height: 39px;
	background-image: url(img/shopmap/f190.svg);
}
.shopbox.f190 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f190.svg);
}
.shopbox.f190 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f190.svg);
}
.shopbox.f190 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f190.svg);
}



.f109{
	left: 287px;
	top: 220px;
	z-index: 4;
}
.shopbox.f109 .kk-main .kk{
	width: 97px;
	height: 39px;
	background-image: url(img/shopmap/f109.svg);
}
.shopbox.f109 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f109.svg);
}
.shopbox.f109 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f109.svg);
}
.shopbox.f109 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f109.svg);
}



.f110{
	left: 320px;
	top: 198px;
	z-index: 3;
}
.shopbox.f110 .kk-main .kk{
	width: 98px;
	height: 39px;
	background-image: url(img/shopmap/f110.svg);
}
.shopbox.f110 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f110.svg);
}
.shopbox.f110 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f110.svg);
}
.shopbox.f110 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f110.svg);
}

.f102{
	left: 355px;
	top: 176px;
	z-index: 2;
}
.shopbox.f102 .kk-main .kk{
	width: 98px;
	height: 39px;
	background-image: url(img/shopmap/f102.svg);
}
.shopbox.f102 .kk-main .kk .fbox{
	background-image: url(img/shopmap/f102.svg);
}
.shopbox.f102 .kk-main .kk .fbox .fbox2{
	background-image: url(img/shopmap/f102.svg);
}
.shopbox.f102 .kk-main .kk .fbox .fbox2 .fbox3{
	background-image: url(img/shopmap/f102.svg);
}
.shopbox.f102 .kk-main .kk-b1{
	width: 98px;
	height: 39px;
	background-image: url(img/shopmap/f102.svg);
}




/*经过模块显示图片*/
.f-pic{
	position: absolute;
	z-index: 100
}
.f-pic .skew{
	position: absolute;
	left: 0px;
	top: 0px;
	transform: skewX(-55deg) rotate(8deg);
	z-index: 2;
}
.f-pic .skew:hover ~ .flogo{
	/*opacity: 1;*/
	display: block;
}

.f-pic .flogo{
	position: absolute;
	left: -170px;
	bottom: 0px;
	width: 390px;
	display: none;
	box-shadow: 0 0 40px 0px rgba(0,0,0,0.4);
	border: 1px solid #ccc;
	/*transition: opacity 0.3s;
	opacity: 0;*/
	border-radius: 5px;
	background-color: #fff;
}
.f-pic .flogo dl dt{
	padding: 10px;
}
.f-pic .flogo dl dt img{
	width: 100%;
}
.f-pic .flogo dl dd{
	height: 60px;
	padding: 0 10px;
}
.f-pic .flogo dl dd .img{
	float: right;
	width: 150px;
	height: 60px;
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center;
}
.f-pic .flogo dl dd .title{
	font-size: 16px;
	font-weight: bold;
	padding: 15px 0;
}
.f-pic .flogo:before{
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	margin-left: -7px;
	transform: rotate(45deg);
	background-color: #fff;
	border: 5px solid transparent;
	border-bottom: 5px solid #fff;
	border-right: 5px solid #fff;
	box-shadow: 0 0 40px 0px rgba(0,0,0,0.4);
}







.f114-pic{
	left: 380px;
	top: 66px;
}
.f114-pic .skew{
	width: 60px;
	height: 18px;
}
.f114-pic .flogo{
	bottom: 10px;
}

.f113-pic{
	left: 309px;
	top: 100px;
	z-index: 3
}
.f113-pic .skew{
	width: 60px;
	height: 48px;
}

.f115-pic{
	left: 503px;
	top: 115px;
	z-index: 10
}
.f115-pic .skew{
	width: 60px;
	height: 34px;
}


.f109-pic{
	left: 300px;
	top: 226px;
	z-index: 6;
}
.f109-pic .skew{
	width: 76px;
	height: 18px;
}
.f109-pic .flogo{
	left: -160px;
	bottom: 20px;
}

.f110-pic{
	left: 332px;
	top: 202px;
	z-index: 14
}
.f110-pic .skew{
	width: 80px;
	height: 23px;
}
.f110-pic .flogo{
	left: -160px;
	bottom: 20px;
}

.f111-pic{
	left: 364px;
	top: 181px;
	z-index: 3
}
.f111-pic .skew{
	width: 80px;
	height: 23px;
}

.f116-pic{
	left: 491px;
	top: 164px;
	z-index: 3
}
.f116-pic .skew{
	width: 64px;
	height: 32px;
}

.f117-pic{
	left: 544px;
	top: 174px;
	z-index: 3
}
.f117-pic .skew{
	width: 64px;
	height: 32px;
}

.f118-pic{
	left: 410px;
	top: 145px;
	z-index: 3
}
.f118-pic .skew{
	width: 54px;
	height: 22px;
}
.f118-pic .flogo{
	left: -180px;
	bottom: 10px;
}

.f108-pic{
	left: 478px;
	top: 168px;
	z-index: 4;
}
.f108-pic .skew{
	width: 140px;
	height: 32px;
}
.f108-pic .flogo{
	left: -140px;
	bottom: 20px;
}

.f107-pic{
	left: 402px;
	top: 267px;
	z-index: 3
}
.f107-pic .skew{
	width: 64px;
	height: 32px;
}

.f106-pic{
	left: 456px;
	top: 277px;
	z-index: 3
}
.f106-pic .skew{
	width: 64px;
	height: 32px;
}

.f119-pic{
	left: 408px;
	top: 362px;
	z-index: 10
}
.f119-pic .skew{
	width: 60px;
	height: 20px;
}
.f119-pic .flogo{
	left: -170px;
	bottom: 10px;
}

.f105-pic{
	left: 595px;
	top: 328px;
	z-index: 10
}
.f105-pic .skew{
	width: 140px;
	height: 20px;
}
.f105-pic .flogo{
	left: -130px;
	bottom: 15px;
}

.f101-pic{
	left: 810px;
	top: 210px;
	z-index: 10
}
.f101-pic .skew{
	width: 100px;
	height: 30px;
}
.f101-pic .flogo{
	left: -150px;
	bottom: 10px;
}

.f121-pic{
	left: 708px;
	top: 160px;
	z-index: 3
}
.f121-pic .skew{
	width: 100px;
	height: 32px;
}

.f120-pic{
	left: 750px;
	top: 138px;
	z-index: 3;
}
.f120-pic .skew{
	width: 100px;
	height: 22px;
}
.f120-pic .flogo{
	left: -150px;
	bottom: 10px;
}

.f122-pic{
	left: 428px;
	top: 218px;
	z-index: 5
}
.f122-pic .skew{
	width: 175px;
	height: 42px;
}
.f122-pic .flogo{
	left: -130px;
	bottom: 0px;
}

.f103-pic{
	left: 600px;
	top: 182px;
	z-index: 4;
}
.f103-pic .skew{
	width: 70px;
	height: 32px;
}
.f103-pic .flogo{
	left: -140px;
	bottom: 20px;
}

.f104-pic{
	left: 581px;
	top: 271px;
	z-index: 10;
}
.f104-pic .skew{
	width: 70px;
	height: 22px;
}
.f104-pic .flogo{
	left: -160px;
	bottom: 20px;
}

.f102-pic{
	left: 366px;
	top: 183px;
	z-index: 14;
}
.f102-pic .skew{
	width: 75px;
	height: 18px;
}
.f102-pic .flogo{
	left: -160px;
	bottom: 20px;
}