/* =m-header */ #main1 .category { position: absolute; top: 0; left:0px; width: 210px; height: 500px; z-index: 999; } #main1 .category-hd { position: relative; box-sizing: border-box; width: 210px; height: 40px; padding-left: 46px; padding-right: 30px; font-size: 16px; font-weight: bold; line-height: 40px; color: #fff; background: #f61b1b; } #main1 .category-hd .icon { position: absolute; top: 10px; left: 13px; width: 20px; height: 20px; background: url(../images/icon/menu.png) no-repeat; background-position: top center; background-size: 100%; } #main1 .category-hd .arrow { position: absolute; top: 12px; right: 10px; width: 15px; height: 15px; background: url(../images/icon/arrow_02.png) no-repeat; } #main1 .category-bd { overflow: hidden; width: 210px; height: 480px; margin-bottom: 20px; } #main1 .category-item-hd { position: relative; height: 40px; padding-left: 46px; padding-right: 30px; font-size: 14px; line-height: 40px; } #main1 .category-item-hd:before { display: none; content: ">"; position: absolute; right: 10px; width: 20px; font-family: @΢ÈíÑźÚ; font-weight: bold; text-align: center; color: #ababab; } #main1 .category-item-hd:after { content: ""; position: absolute; right: 8px; left: 8px; bottom: 0; height: 1px; border-bottom: 1px dashed #e5e5e5; } #main1 .category-item-hd .icon { position: absolute; top: 13px; left: 18px; width: 15px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: 100%; } #main1 .category-item-hd a { display: block; font-weight:500; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } #main1 .category-item-bd { display: none; position: absolute; top: 0px; left: 210px; width: 990px; height: 500px; background: #fff; } #main1 .category-item-bd .hot-word { position: absolute; top: 0; left: 0; width: 570; height: 440px; margin: 25px 120px 35px 36px; font-size: 14px; line-height: 22px; overflow: hidden; } #main1 .category-item-bd .hot-word-item:after { content: ""; display: block; clear: both; } #main1 .category-item-bd .hot-word-hd { position: relative; float: left; width: 100px; margin-right: 30px; font-weight: bold; text-align: justify; padding:3px 0px; } #main1 .category-item-bd .hot-word-hd:before { content: ">"; position: absolute; right: -30px; width: 30px; font-family: @΢ÈíÑźÚ; font-weight: normal; text-align: center; } #main1 .category-item-bd .hot-word-hd:after { content: ""; display: inline-block; width: 100%; } #main1 .category-item-bd .hot-word-bd { float: left; width: 480px; color: #666; } #main1 .category-item-bd .hot-word-bd:after { content: ""; clear: both; display: block; height: 10.5px; margin-bottom: 10.5px; border-bottom: 1px dashed #e5e5e5; } #main1 .category-item-bd .hot-word-bd a { float: left; margin-left: 14px; } #main1 .category-item-bd .hot-word-bd a:hover, #main1 .category-item-bd .hot-word-bd a.highlight { color: #cf304e; } #main1 .category-item-bd .hot-brand { position: absolute; top: 0; right: 0; box-sizing: border-box; width: 264px; height: 500px; padding: 10px 3px; } #main1 .category-item-bd .hot-brand-logo:after { content: ""; display: block; clear: both; } #main1 .category-item-bd .hot-brand-logo a { float: left; margin: 3px; width: 123px; height: 50px; } #main1 .category-item-bd .hot-brand-logo a img:hover { border:1px solid #c6c6c6; } #main1 .category-item-bd .hot-brand-activity { margin-top: 10px; } #main1 .category-item-bd .hot-brand-activity a { display: block; width: 252px; margin: 6px 3px; } #main1 .category:hover .category-hd { color: #ffd789; } #main1 .category:hover .category-hd .icon, #main1 .category:hover .category-hd .arrow { background-position: center bottom; } #main1 .category-item:hover { background: #fff; } #main1 .category-item:hover .category-item-hd { color: #ff464e; } #main1 .category-item:hover .category-item-hd:before, #main1 .category-item:hover .category-item-bd { display: block; } #main1 .category-pagination { /*display: none;*/ position: absolute; bottom: 2.5px; width: 100%; height: 15px; font-size: 0; text-align: center; } #main1 .category-arrow { display: inline-block; width: 15px; height: 15px; border: 0; padding: 0; margin: 0 5px; background: url(../images/icon/arrow_03.png) no-repeat; cursor: pointer; } #main1 .category-prev { background-position: right top; } #main1 .category-next { background-position: right bottom; } #main1 .category-prev:disabled { background-position: left top; } #main1 .category-next:disabled { background-position: left bottom; } #main1 .category-arrow:active { background-color: #fff; } #main1 .category-arrow:disabled, #main1 .category-arrow:disabled:active { background-color: none; cursor: not-allowed; } /* =product */ #main1 .product { display: block; width: 280px; height:360px; background: #fff; transition: linear .2s; border:1px solid #f2f2f2; } #main1 .product:hover { transform: translateY(-5px); box-shadow: 0 0 10px #999; } #main1 .product .hd { position: relative; padding: 50%; } #main1 .product .hd .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #main1 .product .hd .tag { position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-repeat: no-repeat; background-size: 100%; } #main1 .product .bd { padding: 6px 12px; } #main1 .product .bd .name { margin: 6px auto; font-size: 16px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:500; } #main1 .product .bd .price { margin: 6px auto; font-size: 12px; color: #787878; } #main1 .product .bd .price .symbol, .product .bd .price .num { font-style: normal; color: #ff464e; } #main1 .product .bd .price .num { margin-right: 5px; font-size: 24px; } /* =m-banner */ #main1 .m-banner { position: relative; z-index: 1; overflow: hidden; height: 500px; } #main1 .m-banner .w { padding-left: 205px; } #main1 .m-banner .slick-list { z-index: 1; } #main1 .m-banner .slick-dots { position: absolute; bottom: 14px; left: 0; z-index: 2; width: 100%; margin: 0; padding: 0; font-size: 0; text-align: center; padding-left:100px; } #main1 .m-banner .slick-dots li { display: inline-block; margin: 0 5px; } #main1 .m-banner .slick-dots button { border: 0; padding: 0; width: 20px; height: 20px; color: #fff; background: #000; background: rgba(0, 0, 0, .25); border-radius: 50%; cursor: pointer; } #main1 .m-banner .slick-dots .slick-active button { background: #dd2727; } /* =m-act */ #main1 .m-act { padding: 30px; } #main1 .m-act .w { height: 186px; } #main1 .m-act-slick { position: static; margin-right: -8px;} #main1 .m-act-slick a { display: block; margin-right: 8px; } #main1 .m-act-slick a img:hover { display: block; margin-right: 6px; border:0px solid red; box-shadow: 0 0 5px #999; } #main1 .m-act-slick .slick-arrow { position: absolute; top: 0; bottom: 0; z-index: 9; margin: auto; width: 38px; height: 80px; background: url(../images/icon/arrow.png) no-repeat; cursor: pointer; opacity: .25; } #main1 .m-act-slick .slick-arrow:hover { opacity: .5; } #main1 .m-act-slick .slick-arrow.slick-disabled, #main1 .m-act-slick .slick-arrow.slick-disabled:hover { opacity: .1; cursor: not-allowed; } #main1 .m-act-slick .slick-prev { left: 0; background-position: 0 0; } #main1 .m-act-slick .slick-next { right: 0; background-position: -43px 0; } /* =m-brand */ #main1 .m-brand { margin: 0px auto; background-color:#fff; padding:30px; } #main1 .m-brand a { position: relative; float: left; width: 148px; height: 75px; margin-left:2px; } #main1 .m-brand a:after { content: attr(title); position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; letter-spacing: 2px; line-height: 75px; text-transform: uppercase; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; color: #fff; background: #000; background: rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; transition: opacity .2s;} #main1 .m-brand a:hover:after { visibility: visible; opacity: 0.7; } /* =m-promotion */ #main1 .m-promotion { margin: 0px auto; background-color: #f4f4f4; padding-bottom:50px; padding-top:30px;} #main1 .m-promotion .m-hd { height: 60px; padding: 0 10px; line-height: 60px; } #main1 .m-promotion .m-hd .name { display: inline; margin: 0 auto; font-size: 21px; margin-right: 21px; } #main1 .m-promotion .m-hd .sub-name { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; color: #a4a4a4;line-height: 60px; } #main1 .m-promotion-slick { position: static; height: 380px; overflow: hidden; } #main1 .m-promotion-slick .product { margin: 10px; } #main1 .m-promotion-slick .slick-arrow { position: absolute; top: 14px; width: 32px; height: 32px; font-size: 28px; font-family: @΢ÈíÑźÚ; line-height: 30px; text-align: center; color: #ff464e; background: #fff; cursor: pointer; } #main1 .m-promotion-slick .slick-prev { right: 50px; } #main1 .m-promotion-slick .slick-next { right: 10px; } #main1 .m-promotion-slick .slick-arrow:hover, #main1 .m-promotion-slick .slick-arrow:active { background: #ff464e; color: #fff; } #main1 .m-promotion-slick .slick-arrow.slick-disabled, #main1 .m-promotion-slick .slick-arrow.slick-disabled:hover { color: #ff464e; background: #eee; cursor: not-allowed; } /* =m-floor-gray */ #main1 .m-floor-gray { margin: 0px auto; padding:30px; background-color:#ffffff; } #main1 .m-floor-gray .m-hd { box-sizing: border-box; height: 60px; padding: 0 10px; line-height: 60px; border: ; border-bottom-color:; background-color:; background-image:; } #main1 .m-floor-gray .m-hd .name { display: inline; margin: 0 auto; font-size: 21px; margin-right: 21px; } #main1 .m-floor-gray .m-hd .sub-name { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; color: #a4a4a4; } #main1 .m-floor-gray .m-hd .hot-word { float: right; width: 900px;height: 60px;line-height: 60px; overflow: hidden;} #main1 .m-floor-gray .m-hd .hot-word a { margin: 15px 5px 0 0; float: right; padding: 0 16px; line-height: 30px; font-size: 16px; } #main1 .m-floor-gray .m-hd .hot-word a:hover { color: #ff464e; text-decoration: underline; } #main1 .m-floor-gray .m-bd a { float: left; margin: 10px; } #main1 .m-floor-gray .m-bd .banner { width: 280px; height: 360px; transition: linear .2s; } #main1 .m-floor-gray .m-bd .banner:hover { transform: translateY(-5px); box-shadow: 0 0 10px #999; } /* =m-floor-red */ #main1 .m-floor-red { margin: 0px auto; padding:30px; background-color:#f4f0ea; margin-top:0px; margin-bottom:0px; } #main1 .m-floor-red .m-hd { box-sizing: border-box; height: 60px; padding: 0 10px; line-height: 60px; color: #000; } #main1 .m-floor-red .m-hd .name { display: inline; margin: 0 auto; font-size: 21px; margin-right: 21px; } #main1 .m-floor-red .m-hd .sub-name { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; color: #fff; } #main1 .m-floor-red .m-hd .hot-word { float: right; width: 900px;height: 60px;line-height: 60px; overflow: hidden;} #main1 .m-floor-red .m-hd .hot-word a {background-image: linear-gradient(-180deg,#fc8f53,#ff594c); box-sizing: border-box; margin: 15px 5px 0 0; float: right; padding: 0 16px; line-height: 30px; font-size: 16px; border: 1px solid #fb8d8d; color: #f4f4f4; background:-ms-linear-gradient(bottom,#fc8f53 0%,#ff594c 100%);/** IE9 IE10 **/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8f53',endColorstr='#ff594c',grandientType=1); /** IE7 **/ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8f53',endColorstr='#ff594c',grandientType=1); /** IE8 **/ } #main1 .m-floor-red .m-hd .hot-word a:hover { color: #fff; border-color: #fff; background: #f85454; } #main1 .m-floor-red .m-bd { background: #fff; } #main1 .m-floor-red .m-bd .banner { width: 420px; height: 460px; overflow: hidden; float: left; } #main1 .m-floor-red .m-bd .banner .slick-dots { width: 100%; padding-left: 0; font-size: 0; height: 20px; line-height: 20px; text-align: center; position: absolute; bottom: 20px; } #main1 .m-floor-red .m-bd .banner .slick-dots li { display: inline-block; } #main1 .m-floor-red .m-bd .banner .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 14px; height: 14px; margin: 0 3px; cursor: pointer; border: 0; outline: none; border-radius: 50%; background: #000; } #main1 .m-floor-red .m-bd .banner .slick-dots li.slick-active button { background-color: #f61b1b; } #main1 .m-floor-red .m-bd .products { width: 780px; float: left; } #main1 .m-floor-red .m-bd .products img {position: relative; left: 0; border:1px solid #f4f4f4; } #main1 .m-floor-red .m-bd .products a { float: left; width: 260px; height: 230px; position: relative; overflow:hidden; } #main1 .m-floor-red .m-bd .products a:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: #f6f6f6; } #main1 .m-floor-red .m-bd .products a:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #f6f6f6; } /* =m-floor-green */ #main1 .m-floor-green { padding: 30px; } #main1 .m-floor-green .m-hd { box-sizing: border-box; height: 60px; padding: 0 10px; line-height: 60px; color: #000; background:; } #main1 .m-floor-green .m-hd .name { display: inline; margin: 0 auto; font-size: 21px; margin-right: 21px; } #main1 .m-floor-green .m-hd .sub-name { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; color: #fff; } #main1 .m-floor-green .m-hd .hot-word { float: right; width: 900px;height: 60px;line-height: 60px; overflow: hidden;} #main1 .m-floor-green .m-hd .hot-word a { box-sizing: border-box; margin: 15px 5px 0 0; float: right; padding: 0 16px; line-height: 30px; font-size: 16px; border: 1px solid #9bd3d2; background: #60bab8; color: #f0f0f0; } #main1 .m-floor-green .m-hd .hot-word a:hover { color: #fff; border-color: #fff; background: #68bdbc; } #main1 .m-floor-green .m-bd { background: #fff; } #main1 .m-floor-green .m-bd .banner { width: 270px; float: left; padding: 15px 5px 15px 15px; } #main1 .m-floor-green .m-bd .banner a { display: block; width: 270px; } #main1 .m-floor-green .m-bd .banner a.large { display: block; height: 450px; overflow:hidden; } #main1 .m-floor-green .m-bd .banner a.small { display: block; height: 135px; margin-top: 15px; overflow:hidden; } #main1 .m-floor-green .m-bd .banner a.small1 { display: block; height: 135px; margin-top: 15px; overflow:hidden; } #main1 .m-floor-green .m-bd .banner img { position: relative; left: 0; } #main1 .m-floor-green .m-bd .products { width: 900px; padding: 10px 5px; float: left; } #main1 .m-floor-green .m-bd .product { float: left; margin: 5px; padding: 4px; border: 1px solid #eaeaea; transition: none; } #main1 .m-floor-green .m-bd .product:hover { border-color: #ff464e; transform: none; box-shadow: none; }