.xilieWrap { margin-bottom: 40px; width: 100%; height: 334px; } .xilieWrap.b-color1 { background: #fff; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; } .xilieWrap { -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; } .xilieWrap.b-color4 { background: url(images/product/goldenBg.jpg) center no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/product/goldenBg.jpg', sizingMethod='scale'); -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; } .xilieWrap.b-color2 { background: url(images/product/silverBg.jpg) center no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/product/silverBg.jpg', sizingMethod='scale'); } .xilieWrap.b-color5 { background: url(images/product/yellowBg.jpg) center no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/product/yellowBg.jpg', sizingMethod='scale'); } .xilieWrap.b-color6 { background: url(images/product/greenBg.jpg) center no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/product/greenBg.jpg', sizingMethod='scale'); } .xilieWrap.b-color7 { background: url(images/product/redBg.jpg) center no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/product/redBg.jpg', sizingMethod='scale'); } .xilieWrap.b-color3 { background: url(images/product/blackBg.jpg) center no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/product/blackBg.jpg', sizingMethod='scale'); } .xilieWrap .textLeft { float: left; width: 45%; position: relative; height: 100%; text-align: center; } .xilieWrap .textLeft .text { width: 400px; height: 135px; position: absolute; left: 50%; top: 50%; margin: -67px 0 0 -200px; } .xilieWrap .textLeft .text .num { display: inline-block; margin: 0 auto; margin-bottom: 30px; font-size: 16px; padding-bottom: 6px; border-bottom: 2px solid #000; } .xilieWrap .textLeft .text h2 { font-size: 32px; margin-bottom: 22px; } .xilieWrap .textLeft .text span { display: inline-block; font-size: 14px; } .xilieWrap .sellRight { width: 55%; float: left; height: 100%; padding-top: 114px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000; font-size: 14px; } .xilieWrap .sellRight .sellContent { padding-left: 108px; } .xilieWrap .sellRight .sellContent .sellTab { margin-bottom: 46px; *width:100%; } .xilieWrap .sellRight .sellContent .sellTab span { float: left; margin-left: -108px; display: inline-block; width: 77px; line-height: 40px; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn { float: left; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li { text-align: center; line-height: 40px; font-size: 12px; position: relative; float: left; display: inline-block; width: 40px; height: 40px; margin-right: 36px; border-radius: 50%; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-golden, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color101, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color102 { background: #f0d6ad; color: #fff; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-silver, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color201, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color202 { background: #d7dcdd; color: #fff; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-white, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color501 { background: #fff; color: #a1a1a1; border: 1px solid #d1d1d1; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-green, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color301 { background: #dfefcf; color: #a1a1a1; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-yellow, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color601 { background: #fff7ca; color: #a1a1a1; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-black, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color401 { background: #616161; color: #fff; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.c-red, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.color701 { background: #eb6877; color: #fff; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.active i { background: url(../../img/icon/icon-xilie.png) center no-repeat; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li.bd { border: 1px solid #ebebeb; } .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li i { width: 52px; height: 52px; display: block; position: absolute; left: -6px; top: -6px; } .xilieWrap .sellRight .sellContent .sellTab .sellSwitch ul li:hover, .xilieWrap .sellRight .sellContent .sellTab .sellBtn ul li:hover { cursor: pointer; } .xilieWrap .sellRight .sellContent .sellTab .sellSwitch ul li { width: 150px; *width: 88px; height: 34px; line-height: 34px; color: #fff; font-size: 14px; background: #c5c5c5; background: -webkit-gradient(linear, left top, right top, from(#c5c5c5), to(#d1d1d1)); background: linear-gradient(to right, #c5c5c5, #d1d1d1); margin-right: 20px; margin-bottom: 20px; position: relative; float: left; padding-left: 20px; border-radius: 4px; } .xilieWrap .sellRight .sellContent .sellTab .sellSwitch ul li i { display: inline-block; width: 10px; height: 14px; background: url(../images/product/icon-out.png) center no-repeat; background-size: 100%; position: absolute; right: 12px; top: 10px; } .xilieWrap .sellRight .sellContent .sellTab .sellSwitch ul li.active { background: #21b3ba; } .xilieWrap .sellRight .sellContent .sellTab .sellSwitch ul li.active i { background: url(../images/product/icon-inside.png) center no-repeat; background-size: 100%; }