body { width: 100%; height: 100%; margin: 0; } p{ margin: 0; } *{ box-sizing: border-box; } .main-color{ color: #FF6666!important; } .color0{ color:#fff!important } .color1{ color:rgba(0,0,0,.8)!important; } .color2{ color:rgba(0,0,0,.5)!important; } .color3{ color:rgba(0,0,0,.3)!important; } .color4{ color:rgba(0,0,0,.4)!important; } .color5{ color:rgba(255,255,255,.5)!important; } .color6{ color:rgba(0,0,0,1)!important; } .color-red { color: #f9413e!important; } .color-yellow{ color: #ffcf4d!important; } .color-green { color: green!important; } .price-bgcolor{ background-color: #ff9f19!important; } .main-bgcolor{ background-color: #22b1ff!important; } .bgcolor1{ background-color: #fff!important; } .bgcolor2{ background-color: #f7f7f7!important; } .bgcolor3{ background-color: #999!important; } .bgcolor4{ background-color: #f44336!important; } .fs0{ font-size: 0px!important; } .fs12{ font-size: 12px!important; } .fs14{ font-size: 14px!important; } .fs15{ font-size: 15px!important; } .fs16 { font-size: 16px!important; } .fs18 { font-size: 18px!important; } .fs20{ font-size: 20px!important; } .fs22{ font-size: 22px!important; } .fs24{ font-size: 24px!important; } .fs26{ font-size: 26px!important; } .fs30{ font-size: 30px!important; } .fs44{ font-size: 44px!important; } .ml5{ margin-left:5px!important; } .mt5{ margin-top:5px!important; } .mt10{ margin-top:10px!important; } .mb10{ margin-bottom:10px!important; } .mr15{ margin-right:15px!important; } .mr10{ margin-right:10px!important; } .mr5{ margin-right: 5px!important; } .mb10{ margin-bottom: 10px!important; } .mb20{ margin-bottom: 20px!important; } .mb5{ margin-bottom: 5px!important; } .mb0{ margin-bottom: 0!important; } .m20{ margin:20px; } .pd0{ padding: 0; } .pd5{ padding: 5px; } .pd10{ padding: 10px; } .pd15{ padding: 15px; } .pd5-15{ padding: 5px 15px; } .pl10{ padding-left: 10px; } .pr10{ padding-right: 10px; } .pt15{ padding-top: 15px; } .pb0{ padding-bottom: 0; } .pb15{ padding-bottom: 15px; } .pl5{ padding-left: 5px; } .pl15{ padding-left: 15px; } .pr15{ padding-right: 15px; } .pr20{ padding-right: 20px; } .lh24{ line-height: 24px; } .lh30{ line-height: 30px; } .lh36{ line-height: 36px; } .lh40{ line-height: 40px; } .lh44{ line-height: 44px; } .lh50{ line-height: 50px; } .bold{ font-weight: bold!important; } .items { display: -webkit-box; display: -webkit-flex; display: flex; align-items: center } .items-top{ align-items:initial; } .item{ -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .item-cb{ -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -o-box-pack: center; box-pack: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; } .center { position: fixed; width: 85%; top: 145px; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center; color:#999; z-index: 100; } .del-line{ text-decoration: line-through; } .mui-btn { font-size: 18px; font-weight: 400; line-height: 1.42; position: relative; display: inline-block; margin-bottom: 0; padding: 6px 12px; cursor: pointer; -webkit-transition: all; transition: all; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: .2s; transition-duration: .2s; text-align: center; vertical-align: top; white-space: nowrap; color: #333; border: 1px solid #ccc; border-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: #fff; background-clip: padding-box; } .mui-btn-primary{ color: #fff; border: 1px solid #FF6666; background-color: #FF6666; } .mui-btn-grey { color: #fff; border: 1px solid #acacb4; background-color: #acacb4; } .mui-btn-block { font-size: 18px; display: block; width: 100%; margin-bottom: 10px; padding: 10px 0; } .mui-content-padded { margin: 10px; } .main{ position: absolute; left: 0px; top: 0px; width: 1280px; height: 720px; overflow: hidden; } .head img { position: absolute; top: 20px; left: 50px; } .head .title{ position: absolute; top: 26px; left: 310px; font-size: 34px; font-weight: bold; color: white; line-height: 43px; text-align: center; } .content{ position: absolute; left: 30px; right: 30px; top: 83px; height: 620px; overflow: hidden; } .mui-card { border: 3px solid transparent; position: relative; overflow: hidden; margin: 8px; border-radius: 5px; background-color: white; background-clip: padding-box; } .col-xs-3.active .mui-card{ border: 3px solid #fff; box-shadow: 0 0 30px #12a1eb; } .col-xs-3.active .mui-card{ transform: scale(1.06); } .col-xs-4.active .mui-card{ border: 3px solid #fff; box-shadow: 0 0 30px #12a1eb; } .col-xs-4.active .mui-card{ transform: scale(1.06); } .mui-card-header{ height: 200px; overflow: hidden; } .mui-card-content { padding: 10px; position: relative; font-size: 24px; } .mui-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mui-ellipsis-2 { display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .row { box-sizing: border-box; } .row:after, .row:before { display: table; content: " "; } .row:after { clear: both; } .col-xs-1, .col-xs-2, .col-xs-2_4, .col-xs-2_5, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9,.col-xs-9_5, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; min-height: 1px; float: left; box-sizing: border-box; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9_5 { width: 79.16666667%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2_5 { width: 20.83333333%; } .col-xs-2_4 { width: 20%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; }