@charset "utf-8";
*{margin:0;padding:0;list-style:none;box-sizing: border-box; }
img { border:none!important; }
.ikea_mx_homepage{display:block;margin:auto; width:100%; height:259px; position:relative; padding-top:0px; }
.tf { display:inline-block!important; position:relative; vertical-align:bottom!important; bottom:0!important;}



.ikea_mx_homepage .heyboy2{display:block; margin:auto; font-size:0; box-sizing:border-box; }
.ikea_mx_homepage .heyboy2 .mxjbox{display:inline-block; width:265px; height:259px; position:relative; overflow:hidden; margin:0px;	perspective:1000px; -webkit-perspective:1000px; vertical-align: bottom; margin-right:0px;}
.ikea_mx_homepage .heyboy2 .mxjbox .huahua{transition: all .5s ease;}
.ikea_mx_homepage .heyboy2 .mxjbox .huahua .front-content{position:relative; top:151.5px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
.ikea_mx_homepage .heyboy2 .mxjbox .back-content{position:absolute; top:0; left:0; z-index:1; opacity:0; transition: all .5s ease; backface-visibility:hidden; transform-style:preserve-3d; -webkit-transform:translateY(151.5px)rotateX(-90deg); -moz-transform:translateY(151.5px)rotateX(-90deg); -ms-transform:translateY(151.5px)rotateX(-90deg); -o-transform:translateY(151.5px)rotateX(-90deg); transform:translateY(151.5px)rotateX(-90deg); }
.ikea_mx_homepage .heyboy2 .mxjbox:hover .huahua{opacity:0; -webkit-transform: translateY(-151.5px) rotateX(90deg); -moz-transform: translateY(-151.5px) rotateX(90deg); -ms-transform: translateY(-151.5px) rotateX(90deg); -o-transform: translateY(-151.5px) rotateX(90deg); transform: translateY(-151.5px) rotateX(90deg);}
.ikea_mx_homepage .heyboy2 .mxjbox:hover .back-content {opacity:1; -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0);}


.ikea_mx_homepage .heyboy3{position:absolute;margin:auto;display:block; width:750px; font-size: 0px;  height:250px; }
.ikea_mx_homepage .heyboy3 img{display:inline-block; position:absolute; right:0; }
.ikea_mx_homepage .m302 { position:absolute;left:0; z-index:999; }
.ikea_mx_homepage .m303 { z-index:9; }



.ikea_mx_homepage .xixi{font-size:22px; font-weight:bold; padding:0px; padding-left:0px;}
.ikea_mx_homepage .heyboy1{display:block; margin:auto; font-size:0; box-sizing:border-box; }

.heyboy1 .slider { width:100%; height:250px; margin:auto; padding:0; -webkit-perspective:306000px; perspective:306000px;}
.heyboy1 .slider img{ display:block;}
.heyboy1 .slider * { -webkit-transition:all 1s linear; transition:all 1s linear;}
.heyboy1 a .container { box-sizing:border-box; display:inline-block; margin-right:-6px;  width:250px; height:250px;  -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:rotateY(0deg) rotateX(0deg); transform:rotateY(0deg) rotateX(0deg);}
.heyboy1 a:nth-child(2) .container { animation-delay:.2s; }
.heyboy1 a:nth-child(3) .container { animation-delay:.4s; }

.heyboy1 .slide, .slide:after, .slide:before { display:inline-block; width:inherit; height:inherit; position:absolute; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; background-size:cover; background-position:center;}

.testone .slide.x { -webkit-transform:rotateY(0deg); transform:rotateY(0deg);}
.testone .slide.x:after { content: ''; background-image:url('../images/idx/tb1.jpg'); -webkit-transform:translateZ(125px) rotateZ(-90deg); transform:translateZ(0px) rotateZ(-90deg) ;}
.testone .slide.x:before { content:''; background-image:url('../images/idx/tc1.jpg'); -webkit-transform:translateZ(-125px) rotateZ(-90deg); transform:translateZ(0px) rotateZ(-90deg) scaleX(-1);}

.testone .slide.y { -webkit-transform:rotateX(90deg); transform:rotateX(90deg);}
.testone .slide.y:after { content:''; background-image:url('../images/idx/ta1.jpg'); -webkit-transform:translateZ(125px) scale(1); transform:translateZ(125px) scale(1);}
.testone .slide.y:before { content:''; background-image:url('../images/idx/tb1.jpg'); -webkit-transform:translateZ(-125px) scaleY(-1) ; transform:translateZ(-125px) scaleY(-1) ;}

.testone .slide.z { -webkit-transform:rotateX(0); transform:rotateX(0); }
.testone .slide.z:after { content:''; background-image:url('../images/idx/ta1.jpg'); -webkit-transform:translateZ(125px); transform:translateZ(125px);}
.testone .slide.z:before { content:''; background-image:url('../images/idx/tc1.jpg'); -webkit-transform:translateZ(-125px) scaleY(-1); transform:translateZ(-125px) scaleY(-1);}



.testwo .slide.x { -webkit-transform:rotateY(90deg); transform:rotateY(90deg);}
.testwo .slide.x:after { content: ''; background-image:url('../images/idx/tb2.jpg'); -webkit-transform:translateZ(125px) rotateZ(-90deg); transform:translateZ(125px) rotateZ(-90deg);}
.testwo .slide.x:before { content:''; background-image:url('../images/idx/tc2.jpg'); -webkit-transform:translateZ(-125px) rotateZ(-90deg); transform:translateZ(-125px) rotateZ(-90deg) scaleX(-1);}

.testwo .slide.y { -webkit-transform:rotateX(90deg); transform:rotateX(90deg);}
.testwo .slide.y:after { content:''; background-image:url('../images/idx/ta2.jpg'); -webkit-transform:translateZ(125px) scale(1); transform:translateZ(125px) scale(1);}
.testwo .slide.y:before { content:''; background-image:url('../images/idx/tb2.jpg'); -webkit-transform:translateZ(-125px) scaleY(-1) ; transform:translateZ(-125px) scaleY(-1) ;}

.testwo .slide.z { -webkit-transform:rotateX(0); transform:rotateX(0); }
.testwo .slide.z:after { content:''; background-image:url('../images/idx/ta2.jpg'); -webkit-transform:translateZ(125px); transform:translateZ(125px);}
.testwo .slide.z:before { content:''; background-image:url('../images/idx/tc2.jpg'); -webkit-transform:translateZ(-125px) scaleY(-1); transform:translateZ(-125px) scaleY(-1);}



.testthree .slide.x { -webkit-transform:rotateY(90deg); transform:rotateY(90deg);}
.testthree .slide.x:after { content: ''; background-image:url('../images/idx/tb3.jpg'); -webkit-transform:translateZ(125px) rotateZ(-90deg); transform:translateZ(125px) rotateZ(-90deg);}
.testthree .slide.x:before { content:''; background-image:url('../images/idx/tc3.jpg'); -webkit-transform:translateZ(-125px) rotateZ(-90deg); transform:translateZ(-125px) rotateZ(-90deg) scaleX(-1);}

.testthree .slide.y { -webkit-transform:rotateX(90deg); transform:rotateX(90deg);}
.testthree .slide.y:after { content:''; background-image:url('../images/idx/ta3.jpg'); -webkit-transform:translateZ(125px) scale(1); transform:translateZ(125px) scale(1);}
.testthree .slide.y:before { content:''; background-image:url('../images/idx/tb3.jpg'); -webkit-transform:translateZ(-125px) scaleY(-1) ; transform:translateZ(-125px) scaleY(-1) ;}

.testthree .slide.z { -webkit-transform:rotateX(0); transform:rotateX(0); }
.testthree .slide.z:after { content:''; background-image:url('../images/idx/ta3.jpg'); -webkit-transform:translateZ(125px); transform:translateZ(125px);}
.testthree .slide.z:before { content:''; background-image:url('../images/idx/tc3.jpg'); -webkit-transform:translateZ(-125px) scaleY(-1); transform:translateZ(-125px) scaleY(-1);}

.heyboy1 a .container { -webkit-animation:rotate 20s infinite cubic-bezier(1, -0.05, 0.5, 1.2); animation:rotate 20s infinite cubic-bezier(1, -0.05, 0.5, 1.2);}

@-webkit-keyframes 
rotate {  
  0%, 10% { -webkit-transform:rotateY(0deg) rotateX(0deg); transform:rotateY(0deg) rotateX(0deg);}
 15%, 25% { -webkit-transform:rotateY(0deg) rotateX(90deg); transform:rotateY(0deg) rotateX(90deg);}
 30%, 40% { -webkit-transform:rotateY(0deg) rotateX(180deg); transform:rotateY(0deg) rotateX(180deg);}
 45%, 55% { -webkit-transform:rotateY(0deg) rotateX(270deg); transform:rotateY(0deg) rotateX(270deg);}
 60%, 70% { -webkit-transform:rotateY(0deg) rotateX(180deg); transform:rotateY(0deg) rotateX(180deg);}
 75%, 85% { -webkit-transform:rotateY(0deg) rotateX(90deg);   transform:rotateY(0deg) rotateX(90deg);}
 90%, 100% { -webkit-transform:rotateY(0deg) rotateX(0deg); transform:rotateY(0deg) rotateX(0deg);}
 }

@keyframes 
rotate {  
  0%, 10% { -webkit-transform:rotateY(0deg) rotateX(0deg); transform:rotateY(0deg) rotateX(0deg);}
 15%, 25% { -webkit-transform:rotateY(0deg) rotateX(90deg); transform:rotateY(0deg) rotateX(90deg);}
 30%, 40% { -webkit-transform:rotateY(0deg) rotateX(180deg); transform:rotateY(0deg) rotateX(180deg);}
 45%, 55% { -webkit-transform:rotateY(0deg) rotateX(270deg); transform:rotateY(0deg) rotateX(270deg);}
 60%, 70% { -webkit-transform:rotateY(0deg) rotateX(180deg); transform:rotateY(0deg) rotateX(180deg);}
 75%, 85% { -webkit-transform:rotateY(0deg) rotateX(90deg);   transform:rotateY(0deg) rotateX(90deg);}
 90%, 100% { -webkit-transform:rotateY(0deg) rotateX(0deg); transform:rotateY(0deg) rotateX(0deg);}
 }