@charset "utf-8";
/* CSS Document */
body{ font-size: 12px; background:#512fbc !important; }
.w1920{ margin:0 auto;}
.w1920{ max-width: 1920px;}
.banner2{ display: none;}
.w1920 img{ display: block; }
.banner-bg{ background:url(//deal.tomtop.com/activity/201710/20171030_Shopping_Carnival_bannerBG.jpg) center top no-repeat;}
.height80{ height:80px; width:20px;}
.banner{ position:relative;}
.banner6,.banner7{ position: absolute; width: 44.5%; bottom:18.85%;  display: table-cell;overflow: hidden;
    transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
}
.banner6{ left: 2.1%} .banner7{ right: 2.1%}
.banner8{ position: absolute; bottom:0%; width: 65.8%; left: 17.5%}
.banner-bg2{ background:url(//deal.tomtop.com/activity/201710/20171030_Shopping_Carnival_boBG.jpg) center no-repeat;}
.new{ -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; vertical-align: middle;  position: absolute; background: rgba(0, 0, 0, 0.68); color: #fff; top:100%;  width: 101%; height: 101%;  display: table-cell;}
.new2{font-size: 38px;  text-align: center; width: 100%; height: 100%; text-transform: uppercase; text-decoration: underline;}
.new2 a{padding-top: 20%; display: table-cell; color: #fff; height: 100%; width: 100%;  position: absolute;}
.banner6:hover .new,.banner7:hover .new,.banner9:hover .new,.banner10:hover .new{top: 0;}
.relative{ position:relative;}

.banner9,.banner10{position:absolute;bottom:19%; width: 42.74%;display: grid; overflow: hidden; transition: all 0.3s ease;}
.banner9{ left: 3%;}
.banner9 .new2 a{ padding-top: 30%;}
.banner10{ right: 3%;}
.banner10 .new2 a{ padding-top: 30%;}

.banner-bg3{ background:#7c21c6 url(//deal.tomtop.com/activity/201710/20171030_Shopping_Carnival_bottom.jpg) center top no-repeat; }
.hidden{ overflow: hidden;}
.M-ICO li{width: 20%; float: left; display: block; overflow: hidden;  margin: 1% 0;}

/*----------------*/
.item-hover.circle.effect20 { -webkit-perspective: 900px;-moz-perspective: 900px; perspective: 900px;}
.item-hover.circle { position: relative;/*    width: 220px;height: 220px;*/}
.item-hover { display: inline-block;}
.item-hover { position: relative; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
/*----------------*/
.item-hover.circle.effect20 .img {
    -webkit-transition: all 0.35s linear;
    -moz-transition: all 0.35s linear;
    transition: all 0.35s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.item-hover.circle .img { position: relative;/* width: 220px; height: 220px;*/}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*----------------*/
/*
.item-hover.circle .img:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
*/
/*----------------*/

.item-hover img { width: 100%;height: 100%;}
/*----------------*/
.item-hover.circle.effect20 .info {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.item-hover.circle .info {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*----------------*/
.item-hover.circle.effect20.top_to_bottom .info .info-back {
    -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
    transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
}
/*

.item-hover.circle.effect20.colored .info .info-back {
    background: rgba(22, 85, 113, 1);
}
*/

.item-hover.circle.effect20 .info .info-back {
    opacity: 1;
    visibility: hidden;
    width: 100%;
    height: 100%;
/*    background: #333333;*/
    -webkit-transition: all 0.35s linear;
    -moz-transition: all 0.35s linear;
    transition: all 0.35s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*----------------*/

.item-hover.circle.effect20 .info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 55px 0 0 0;
    height: 110px;
    text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
/*----------------*/
.item-hover a:hover {
    text-decoration: none;
}

.item-hover a {
    color: #333;
}
/*----------------*/
.item-hover.circle.effect20.top_to_bottom a:hover .img {
    -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
    transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
}

.item-hover.circle.effect20 a:hover .img {
    opacity: 0;
}
/*----------------*/
.item-hover.circle.effect20.top_to_bottom a:hover .info .info-back {
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
}


.item-hover.circle.effect20 a:hover .info .info-back {
    opacity: 1;
    visibility: visible;
}
li{ list-style-type:none;}

@media(max-width:768px){ .new2{ font-size: 25px;} }
@media(max-width:550px){ 
.new2{ font-size: 16px;}
.M-ICO li {
    width: 50%;
    margin: 0% 0;
    padding: 0%;
}
}
@media(max-width:340px){ .new2{ font-size: 12px;} }