mobile.css 17.3 KB
@charset "utf-8";
/**
 * @file:      style.css V1.1.0
 * @author:    wzx(zhixiang.wang@yoho.cn)
 * @update:    2014-07-12 14:55:29;
*/
body, dl, dd, ul,  h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, optgroup, p, blockquote, figure, hr, menu, dir, thead, tbody, tfoot, th, td {margin:0; padding:0; }
ul{list-style-type: none; list-style-image: none; }
a {text-decoration: none; color: #000;}
a:active {background-color: transparent; }
a:active, a:hover {outline: 0 none; }
a:focus {outline: 1px dotted; }
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 62.5%; }
body {font-size: 14px; line-height: 1.5; }
body, button, input, select, textarea {font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; -ms-text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis; text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis; }
h1, h2, h3, h4, h5, h6 {font-weight: normal; }
abbr, acronym {border-bottom: 1px dotted; cursor:help; }
b, strong {font-weight: bold; } dfn {font-style: italic; }
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark {background-color: #D2E5FF; color: #000; }
em {font-style: normal;}
code, kbd, pre, samp {font-family: monaco, menlo, consolas, 'courier new', courier, monospace; }
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word; overflow: auto; }
q {quotes: none; }
q:before, q:after {content: ''; content: none; }
small {font-size: 85.7%; }
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup {top: -0.5em; }
sub {bottom: -0.25em; }
table {border-collapse: collapse; border-spacing: 0; }
th {text-align: left; }
table th, table td {border: 1px solid #ddd; padding: 8px 10px; }
table th {font-weight: inherit; border-bottom-width: 2px; border-bottom-color: #ccc; }
img {border: 0 none; width: auto\9; height: auto; max-width: 100%; vertical-align: top; -ms-interpolation-mode: bicubic; } svg:not(:root) {overflow: hidden; } fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend {border: 0 none; white-space: normal; *margin-left: -7px; }
button, input, select, textarea {font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
input, button {*overflow: visible; }
button, select {text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer; }
button[disabled], input[disabled] {cursor: default; } input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto; }
textarea {overflow: auto; resize: vertical; }
select:disabled option:checked, option:disabled:checked {color: #D2D2D2; }
@media screen and (-webkit-min-device-pixel-ratio:0) {input {line-height: normal !important; } }
input::-moz-placeholder, textarea::-moz-placeholder {color: darkGray; opacity: 1; } label {cursor: pointer; }
select[size], select[multiple], select[size][multiple] {border: 1px solid #AAA; padding:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block; } audio, canvas, video, progress {display: inline-block; vertical-align: baseline; }
audio:not([controls]) {display: none; height: 0; }
.dib {display: inline-block; *display: inline; zoom: 1;}
.clearfix:after {clear: both; display: block; visibility: hidden; height: 0; content: "";}
.clearfix {zoom: 1;}
/*font-face*/
@font-face {
    font-family: volupia;
    src: url('../fonts/volupia.eot'); /*IE 9*/
    src: url('../fonts/volupia.eot?#iefix') format('embedded-opentype'),
         url('../fonts/volupia.woff') format('woff'),
         url('../fonts/volupia.ttf') format('truetype'),
         url('../fonts/volupia.svg#volupia') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:iconfont;
    src:url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/iconfont.woff') format('woff'),
         url('../fonts/iconfont.ttf') format('truetype'),
         url('../fonts/iconfont.svg#volupia') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*home*/
.mobile-container {width: 320px; margin: 0 auto; overflow: hidden;}
.mobile-navigator {width: 250px; margin: 0 auto; padding: 20px 0; overflow: hidden;}
.mobile-navigator ul {margin-right: -40px;}
.mobile-navigator li {width: 60px; height: 100px; float: left; text-align: center; margin-right: 35px;}
.mobile-navigator a {float: left; padding-top: 60px; position: relative; width: 100%;}
.mobile-navigator ins{background-image: url("../images/yohood/mobile_v2.png"); background-size: 60px 600px; width: 60px; height: 60px; position: absolute; top: 0; left: 0;}
.mobile-container .navigator-info {background-position: 0 0;}
.mobile-container .navigator-news {background-position: 0 -60px;}
.mobile-container .navigator-brand {background-position: 0 -120px;} 
.mobile-container .navigator-scene {background-position: 0 -180px;}
.mobile-container .navigator-show {background-position: 0 -240px;}
.mobile-container .navigator-live {background-position: 0 -410px;}
.mobile-container .navigator-bear {background-position: 0 -468px;}
.mobile-buy-ticket {width: 289px; margin: 0 auto 20px;}
.mobile-buy-ticket a {display: block; height: 49px; line-height: 49px; background: #e30012; text-align: center; color: #fff; font-size: 17px;}

/*list styles*/
.mobile-position {height: 44px; line-height: 44px; background-color: #000; position: relative;}
.mobile-position h2 {font-size: 17px; text-align: center; color: #fff;}
.mobile-back {position: absolute; left: 0; width: 44px; height: 44px; color: #fff; line-height: 44px;text-align: center; background-image: url("../images/yohood/mobile.png"); background-size: 60px 450px; background-position: 0 -360px;}
.mobile-news-navigator {width: 90px; margin: 0 auto; position: relative;}
.mobile-news-navigator {font-size: 17px; color: #fff;}
.mobile-news-navigator ins{position: absolute; background-image: url("../images/yohood/mobile.png"); background-size: 60px 450px; background-position: -10px -404px; width: 13px; height: 8px; top: 18px; right: 5px;}
.mobile-news-navigator select {position: absolute; opacity: 0; width: 100%; height: 44px; left: 0; top: 0;}
.fluid-item {margin-bottom: 30px;}
.image-box {position: relative; font-size: 0; margin-bottom: 10px;}
.image-video img {opacity: 0.5; filter: alpha(opacity=50);}
.fluid-tag {position: absolute; bottom: 0; left: 0; background: #000; color: #FFF; padding: 0 10px; font-size: 14px;}
.fluid-tag:active {background: #000;}
.content {padding: 0 6px;}
.content .time {color: #888; margin-bottom: 5px;}
.content p {font-size: 12px;}
.volupia {font-family: volupia !important;}
.icon-video {background-image: url("../images/yohood/mobile.png"); background-size: 60px 450px; background-position:0 -300px; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -30px;}

/*detail styles*/
.detail-body {padding: 0 10px;}
.detail-body h1 {font-size: 24px; text-align: left; line-height: 1.3;}
.detail-body .time{color: #aaa; font-size: 16px; margin-bottom: 10px;}
.detail-content img,.detail-content video{margin-bottom: 20px;}
.detail-content p {font-size: 14.4px; line-height: 1.8; margin-bottom: 12px;}

.detail-pagination {padding: 0px; overflow: hidden;}
.detail-pagination a { float: left; width: 143px; height: 42px; line-height: 42px; border: 1px solid #666; text-align: center; margin-right: 30px; font-size: 16px; color: #666; position: relative;}
.detail-pagination a.prev::after{width: 12px; height: 12px; border-top: 2px solid #666; border-left: 2px solid #666; position: absolute; top: 14px;left:30px; content: ""; -webkit-transform: rotate(-45deg);}
.detail-pagination a.next::after{ width: 12px; height: 12px; border-top: 2px solid #666; border-left: 2px solid #666; position: absolute; top: 14px; right:30px;content: ""; -webkit-transform: rotate(135deg);}
.detail-pagination a:last-of-type { margin-right: 0;}

/* brand list styles */
.brand-list {padding: 8px 5px; width: 310px; overflow: hidden;}
.brand-list ul {margin-right: -30px;}
.brand-list li {width: 147px; height: 140px; margin-right: 16px; float: left; text-align: center;}
.brand-list img {border: 1px solid #ccc; margin-bottom: 10px; display: block;}
.brand-list a {color: #666;}

/*brand detail styles*/
.brand-info-logo {padding: 10px 0 0 148px; height: 76px; margin-bottom: 10px;}
.brand-info-logo h2{font-size: 24px; line-height: 24px;}
.brand-logo {float: left; border: 1px solid #ccc; margin-left: -138px; *display: inline;}
.brand-content-info {padding: 0 10px;}

.brand-goods-list {padding: 0 10px; overflow: hidden;}
.brand-goods-list ul {margin-right: -20px;}
.brand-goods-list li {width: 145px; margin:0 10px 10px 0; float: left;}
.brand-goods-list li img {display: block; margin-bottom: 5px;}
.brand-goods-list li a {color: #999;}
.brand-goods-list p del {color: #000;}
.brand-goods-list p span {color: #f00;}

/*show styles*/
.show-title {font-family: Arial; font-size: 30px; color: #0099bb; text-align: center; padding: 10px 0;}
.show-list {margin-right: -10px;}
.model {display:none;width:100%;height:100%;  position: fixed; background:#fff;/* rgba(0,0,0,0.5)*/ left:0px; top: 0px; z-index: 9999;} 
.mask {position: absolute;top: 0px; background-color: #777; z-index: 1002; left: 0px;}
.pic-tip {position: absolute;left: 80px;top: 80px;background: rgba(255, 255, 255, 0.9);color: #009abe;text-decoration: none;height: 18px;line-height: 18px;padding: 0 5px;border-radius: 11px;
font-family: 'Helvetica';font-weight: bold;box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);}
.pic-tip:after {position: absolute;content: "";background-image: url("../images/yohood/vedio-btn.png");background-repeat: no-repeat;background-position: 0 -55px;background-size: 30px 310px;width: 7px;height: 5px;top: 13px;left: -2px;}
.look_big_image {cursor:pointer;}
.image-prev {position: absolute;left: 5px;top: 85%;font-size: 54px;margin-top: -27px;-webkit-transition: color 0.5s ease;-moz-transition: color 0.5s ease;-o-transition: color 0.5s ease;transition: color 0.5s ease;z-index: 1003;}
.image-next {position: absolute;right: 5px;top: 85%;font-size: 54px;margin-top: -27px;-webkit-transition: color 0.5s ease;-moz-transition: color 0.5s ease;-o-transition: color 0.5s ease;transition: color 0.5s ease;z-index: 1003;}
.iconfont {font-family: "iconfont";font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0;-moz-font-smoothing: grayscale;}
.ui-dialog-close {position: absolute;top: 60px;right: 10px;padding: 10px;font-size: 22px;z-index: 99999;-webkit-transition: color 0.2s ease;-moz-transition: color 0.2s ease;-o-transition: color 0.2s ease;transition: color 0.2s ease;}

.shareBox {padding: 0 12px;height: 84px;background: #f1f2f3;position: relative;}
.appBox {padding-left: 70px;position: relative;width:100%;box-sizing: border-box;-webkit-box-sizing: border-box;}
.appLogo {padding: 12px 0;margin-left: -70px;float: left;}
.sppIntro {padding: 15px 0;line-height: 18px;}
.appDownload {position: absolute;right: 10px;top: 50%;margin-top: -16px;text-align: center;text-decoration: none;color: #fff;background: #0099bb;width: 98px;height: 32px;line-height: 32px;font-size: 14px;
   border-radius: 3px;
}
.show-list img{float: left; margin:0 2px 2px 0; width: 105px;}
.pagination {padding: 10px 0; text-align: center;}
.pagination a {color: #777777;}

/*introdution styles*/
.activity-ask {text-align: center; font-size: 20px; font-family: Arial; padding: 5px 0;}
.activity-qa {padding: 10px 15px;}
.activity-qa h3 {font-size: 14px; font-weight:bold; color:#333;}
.activity-qa h3 span {color:#fff;background:#000;border-radius: 50%; font-size: 14px;width:20px; height:20px;display: inline-block ;text-align: center;}
.activity-qa p {margin-bottom: 25px; font-size: 12px;color:#666;padding-top:5px;}

/*scene styles*/
.scene-wrap {margin: 10px auto 0;}
.scene-nav {width: 140px; border-bottom: 2px solid #333; overflow: hidden; margin-left: 30px;}
.scene-nav a {float: left; width: 50%; text-align: center; font-size: 14px;}
.scene-nav a.current {color: #f00;}

.scene-item {padding: 20px 0 10px 30px; margin-left: 100px; border-left: 1px solid #aaa; position: relative;}
.scene-item h2 {position: relative; font-size: 13px; line-height: 15px;}
.scene-item h3 {font-size: 16px; color: #666; margin-bottom: 10px;}
.scene-item h2 i {width: 18px; height: 18px; background: url("../images/yohood/sprites.png") 0 -375px no-repeat; position: absolute; left: -39px; top: 7px;}
.scene-item .times {position: absolute; top: 20px; left: -90px; width: 70px;text-align: center; text-align: center;}
.scene-item .times span {font-size: 12px; font-family: Arial; display: block;}
.scene-item .times strong {font-size: 16px; display: block; background: #eeeeee; height: 30px; line-height: 30px;}
.img-box img {width: 100px; margin-bottom: 5px;}
.img-box p{font-size: 12px;}
.over h2 i {background-position: 0 -354px;}
.over,.over a,.over h3 {color: #aaaaaa !important;}
.over img {opacity: 0.5; filter: alpha(opacity=50);}

/*share styles*/
.share-hd{ padding-top: 5px;}
.share-hd h1{ margin-left: 15px; font-size: 20px; line-height: 46px; font-weight: bold;}
.share-hd .style-you-up{ text-align: center;}
.share-hd p{ margin: 0 15px; font-size: 16px; font-weight: normal; font-family:"微软雅黑"; line-height: 26px;}
.share-hd p a{ color: #bf1c2d;}

.wallpaper-download{margin-top: 18px;padding-top: 18px;background: url("../images/yohood/share-line.png") no-repeat left top;}
.wallpaper-hd .download-icon{ float: left; margin-left: 15px; padding-top: 32px; font-size: 12px; line-height: 12px; background: url("../images/yohood/download-icon.png") no-repeat top center;}
.wallpaper-hd .download-title{ float: right; margin-right: 15px; font-size: 14px; font-weight: bold; line-height: 42px;}

.wallpaper-box{position:relative;margin-top: 10px; height: 310px;}
.wallpaper-list{position: absolute; top: 0;left: 0;display: none;}
.wallpaper-list.current{display: block;}
.wallpaper-list li{float: left; margin: 5px 0 0 5px;}
.wallpaper-nav{width: 38px; margin: 5px auto 0;}
.wallpaper-nav li{ float: left;margin-left: 6px;width: 5px;height: 5px;background: url("../images/yohood/point.png");}
.wallpaper-nav li:first-child{ margin-left: 0;}
.wallpaper-nav li.current{background: url("../images/yohood/point-current.png");}

.more-app{margin-top: 22px;}
.more-app h3{padding-left:16px;font-size: 16px;border-bottom: 1px solid #cccccc;}
.app-list li{ height: 60px; border-top: 1px solid #e9eaea;}
.app-list li:first-child{border-top: none;}
.app-list li.dark-border{border-color: #cccccc;}
.app-list li .app-info{ float: left;padding-left: 60px;margin-top: 10px; background-position: 10px center; background-repeat: no-repeat;}
.app-list li.yoho .app-info{ background-image: url("../images/yohood/app-icon01.png");}
.app-list li.fashion .app-info{ background-image: url("../images/yohood/app-icon02.png");}
.app-list li.girl .app-info{ background-image: url("../images/yohood/app-icon03.png");}
.app-list li.show .app-info{ background-image: url("../images/yohood/app-icon04.png");}
.app-list li.yhsj .app-info{ background-image: url("../images/yohood/app-icon05.png");}
.app-list li .app-info h6{ line-height: 25px; font-size: 16px;}
.app-list li .app-info p{ margin-bottom: 4px; line-height: 12px; font-size: 12px; color: #828181;}
.app-list li .app-btn{float: right; margin-right: 10px;}
.app-list li .app-btn a{display: block;margin-top: 14px; width: 58px; height: 28px; line-height: 28px; color: #6a6a6a; border: 1px solid #000; font-size: 12px; text-align: center;}

/* recommend styles */
.recommend-top{ padding-top: 20px; margin-bottom: 27px;}
.recommend-top .recommend-title h2{height: 30px;}
.recommend-top .recommend-title h2 img{ display: block; margin: 0 auto;}
.recommend-top .recommend-title p{ line-height: 30px; font-size: 16px; font-family: "微软雅黑"; text-align: center;}
.recommend-top .recommend-info{ margin: 20px 0 0 0; line-height: 20px; font-size: 14px; font-family: "微软雅黑"; text-indent: 2em;}

.recommend-box{margin-bottom: 40px;}
.recommend-box .goods-pic{ float: none; width: 100%;}
.recommend-box .goods-pic img{ display: block; margin: 0 auto;}
.recommend-box .goods-info{ float: none;width: 100%;}
.recommend-box .goods-info h4{ font-size: 18px; line-height: 20px;}
.recommend-box .goods-info p{ line-height: 20px; font-size: 14px;font-family: "微软雅黑";}
.recommend-box .goods-info .info{margin: 8px 0 6px 0;}



/*yohood展会页面*/
.exhibition-containt{width:320px;overflow:hidden;margin:0 auto;}
.exhibition-bannerimg{width:320px;margin:0 auto 50px auto;}
.exhibition-row-containt{width:320px;overflow:hidden;margin-bottom:90px;}
.exhibition-img-containt{width:320px;overflow:hidden;float:left;text-align:center;}
.exhibition-img{width:300px;margin:0 auto;height:391px;margin-bottom:50px;}
.exhibition-text{color:#4a4a4a;	font-size:19px;	font-family:"Helvetica","Arial";width:300px;overflow:hidden;margin:10px auto;text-align:left;}