scss上传

+*.iml
+.idea/
+.ipr
+.iws
+*.diff
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn/
+*.swp
+*.swo
+*.pyc
+*.pyo
+.build
+node_modules
+_site
+sea-modules
+spm_modules
+.cache
+dist
+coverage
+.sass-cache

+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+
+http_path = "/"
+css_dir = "./css"
+sass_dir = "./sass"
+images_dir = "images/yohood/mobile"
+javascripts_dir = "./res/js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+ line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+Encoding.default_external = "utf-8";
\ No newline at end of file

+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var ftp = require('gulp-ftp');
+var fs = require('fs');
+var uglify = require('gulp-uglify'),
+  rename = require('gulp-rename');
+var concat = require('gulp-concat');
+var exec = require('child_process').exec;
+var compass = require('gulp-compass');
+var jshint = require('gulp-jshint');
+var stylish = require('jshint-stylish');
+
+//获取package.json的配置参数
+var config = JSON.parse(fs.readFileSync('./package.json').toString());
+
+var dist_assets_dir = 'dist/' + config.name + '/assets';
+var dist_seajs_dir = 'dist/' + config.name + '/' + config.version + "/min";
+var dist_js_dir = 'dist/' + config.name + '/' + config.version;
+var source_js_dir = 'js/';
+
+var dist_dir = {
+  css: 'dist/' + config.name + '/' + config.version,
+  image: 'images/yohood/mobile',
+  font: dist_assets_dir + '/fonts'
+};
+
+
+gulp.task('default', function() {
+  gulp.watch(['sass/**', 'js/**'], ['compass-dist', 'build']);
+});
+
+//compass的watch
+gulp.task('cw', function(cb) {
+  /*exec('compass watch', function(err) 
+  {
+      if (err) return cb(err); 
+      cb(); 
+  });*/
+  gulp.watch(['sass/**'], ['compass-dist']);
+});
+
+//js代码验证
+gulp.task('lint', function() {
+  return gulp.src(['js/*.js', 'js/**/*.js'])
+    .pipe(jshint())
+    .pipe(jshint.reporter(stylish));
+});
+
+//编译部署compass
+gulp.task('compass-dist', function() {
+  gulp.src('sass/**')
+    .pipe(compass({
+      css: 'css',
+      sass: 'sass',
+      image: 'images/yohood/mobile',
+      font: dist_dir.font,
+
+      style: 'compressed'
+    }))
+    .on('error', function(error) {
+      console.log(error);
+      this.emit('end');
+    });
+});
+
+
+//执行spm的build
+gulp.task('spm', function(cb) {
+  exec('spm build --include all', function(err) {
+    if (err) return cb(err);
+    cb();
+  });
+});
+
+gulp.task('js', ['seajs', 'copy', 'concat'], function() {
+  console.log("压缩合并完成");
+});
+
+gulp.task('seajs', function() {
+  gulp.src('js/util/seajs_dev.js')
+    .pipe(uglify())
+    .pipe(rename('seajs.min.js'))
+    .pipe(gulp.dest(dist_seajs_dir));
+});
+gulp.task('copy', function() {
+  gulp.src(dist_js_dir + '/index.js')
+    .pipe(rename('z_index.js'))
+    .pipe(gulp.dest(dist_seajs_dir));
+  gulp.src(source_js_dir + '/yas.js')
+    .pipe(gulp.dest(dist_js_dir));
+});
+
+gulp.task('concat', function() {
+  gulp.src(dist_seajs_dir + '/*.js')
+    .pipe(concat('index.min.js'))
+    .pipe(gulp.dest(dist_js_dir));
+});
+
+//拷贝assets到发布目录
+gulp.task('assets', function() {
+  gulp.src('assets/**')
+    .pipe(gulp.dest(dist_assets_dir));
+});
+gulp.task('yangshi', ['assets', 'compass-dist'], function() {
+
+
+});
+
+//spm build
+gulp.task('build', function() {
+  exec('spm build --include all', function() {
+    exec('gulp build-debug');
+    exec('gulp build-production');
+  });
+});
+
+//generate all-debug.js for development ENV
+gulp.task('build-debug', function() {
+  gulp.src(['js/util/seajs.js', 'dist/yohogirls-frontend-web/0.0.1/index-debug.js'])
+    .pipe(concat('all-debug.js'))
+    .pipe(gulp.dest('dist/yohogirls-frontend-web/0.0.1'))
+});
+
+//generate all.js for production ENV
+gulp.task('build-production', function() {
+  gulp.src(['js/util/seajs.js', 'dist/dist/yohogirls-frontend-web/0.0.1/index.js'])
+    .pipe(concat('all.js'))
+    .pipe(gulp.dest('dist/yohogirls-frontend-web/0.0.1'))
+});
+
+//发布到CDN
+gulp.task('dist', ['compass-dist'], function() {
+  var ftpstream = ftp(ftpConfig);
+  return gulp.src('dist/**')
+    .pipe(ftpstream)
+    .pipe(gutil.noop());
+});
+
+//发布到CDN
+gulp.task('comp', ['compass-dist', 'js'], function() {
+  //编译到本地
+  console.log("将文件编译到本地！！！！");
+});
\ No newline at end of file

+{
+  "name": "yohood",
+  "version": "0.0.1",
+  "description": "yohood",
+  "keywords": [],
+  "homepage": "",
+  "author": "yue.liu@yoho.cn",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "licenses": "MIT",
+  "spm": {
+    "main": "index.js",
+    "dependencies": {
+      "jquery": "~1.8.3"
+    },
+    "devDependencies": {
+      "expect.js": "0.3.1"
+    }
+  },
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-compass": "^2.0.4",
+    "gulp-concat": "^2.5.2",
+    "gulp-ftp": "^1.0.3",
+    "gulp-jshint": "^1.10.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^1.2.0",
+    "gulp-util": "^3.0.4",
+    "jshint-stylish": "^1.0.1",
+    "spm": "3"
+  },
+  "scripts": {
+    "test": "spm test",
+    "build": "spm build"
+  },
+  "dependencies": {
+    "compass": "^0.1.1"
+  }
+}
\ No newline at end of file

+/*css reset*/
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, i {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    vertical-align: baseline;
+}
+
+body {
+    line-height: 1.5;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+caption, th, td, b, strong {
+    text-align: left;
+    font-weight: normal;
+}
+
+table, td, th {
+    vertical-align: middle;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+    content: "";
+}
+
+blockquote, q {
+    quotes: "" "";
+}
+
+a img {
+    border: none;
+}
+
+em, cite {
+    font-style: normal;
+}
+
+body {
+    background: #fff;
+    font: 12px/1.5 "arial","helvetica","微软雅黑";
+    color: #000;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: normal;
+    color: #111;
+}
+
+a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+a:focus{
+    outline: none;
+}
+
+dl, dt, dd, ul, li {
+    list-style: none;
+}
+
+/**
+* 闭合浮动
+* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
+*/
+.clearfix:before,
+.clearfix:after {
+    content: "";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.clearfix { 
+    zoom:1;
+    *zoom: 1; /* IE6-7 触发 hasLayout */
+}
+
+@font-face {font-family: 'iconfont';
+    src: url('../fonts/iconfont.eot'); /* IE9*/
+    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
+    url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+    url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+.iconfont{
+    font-family:"iconfont" !important;
+    font-size:16px;font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
\ No newline at end of file

+@charset "utf-8";
+
+/**
+ * 引用自定义字体
+ * @param string $name 字体名称
+ *
+ */
+
+@mixin font-family($name) {
+    font-family: $name;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0;
+    -moz-font-smoothing: grayscale;
+}
+
+@mixin retina-sprite($map, $sprite, $scale) {
+    $width: image-width(sprite-file($map, $sprite));
+    $height: image-height(sprite-file($map, $sprite));
+    $offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);
+    background: sprite-url($map) 0 $offsetY no-repeat;
+    $zoomX: ceil(image_width(sprite-path($map)) / $scale);
+    $zoomY: auto;
+    @include background-size($zoomX $zoomY);
+    display: block;
+}
+
+@mixin pos-sprite($map, $posY) {
+    background: sprite-url($map) 0 $posY no-repeat;
+}
\ No newline at end of file

+@charset "utf-8";
+
+@import "_base";
+
+@import "style/_common";
+
+@import "style/_home";
+
+@import "style/_activity";
+
+@import "style/_news";
+
+@import "style/_brand";
+
+@import "style/_video";
+
+@import "style/_site-activity";
+
+@import "style/_show";
+
+@import "style/_detail";
+@import "style/_other";
\ No newline at end of file

+@charset "utf-8";
+
+@import "_base";
+
+@import "_mixins";
+
+@import "mobile/_common";
+
+@import "mobile/_home";
+
+@import "mobile/_activity";
+
+@import "mobile/_brand";
+
+@import "mobile/_video";
+
+@import "mobile/_scene";
+@import "mobile/_show";
+@import "mobile/_other";
+@import "mobile/_detail";
+@import "mobile/_news";
\ No newline at end of file

+.content-tab {
+    margin: (12rem / $remNum) 0 0 0;
+    text-align: center;
+    ul {
+        display: inline-block;
+        border-left: 1px solid #000;
+        li {
+            float: left;
+            border: 1px solid #000;
+            border-left: none;
+            a {
+                display: block;
+                width: 96rem / $remNum;
+                height: 34rem / $remNum;
+                line-height: 34rem / $remNum;
+                text-align: center;
+                font-size: 14rem / $remNum;
+                color: #000;
+            }
+        }
+        li.current {
+            background: #000;
+            a {
+                color: #fff;
+            }
+        }
+    }
+}
+
+.activity-main {
+    margin: (12rem / $remNum) 0 0 0;
+}
+
+.activity-content {
+    display: none;
+    img {
+        width: 100%;
+    }
+    .section {
+        margin: (24em / $remNum) 0 0 0;
+        p, h4 {
+            padding: 0 (16rem / $remNum);
+            line-height: 20rem / $remNum;
+            font-size: 14rem / $remNum;
+        }
+    }
+}
+
+.activity-content.current {
+    display: block;
+}
+
+.activity-cooperation {
+    padding: 0 0 0 (16rem / $remNum);
+    h2 {
+        font-size: 16rem / $remNum;
+        color: #000;
+        line-height: 22rem / $remNum;
+    }
+}
\ No newline at end of file

+.search-wrap {
+    position: relative;
+    z-index: 2;
+    height: 44rem / $remNum;
+    padding: 0 (8rem / $remNum);
+    background: #f0f0f0;
+    text-align: center;
+    input {
+        width: 304rem / $remNum;
+        height: 28rem / $remNum;
+        margin: (8rem / $remNum) 0 0 0;
+        padding: 0;
+        border: none;
+        outline: none;
+        font-size: 14rem / $remNum;
+        border-radius: 2px;
+    }
+    input:focus, input.hasVal {
+        width: 272rem / $remNum;
+        padding-left: 32rem / $remNum;
+    }
+    .search-btn {
+        position: absolute;
+        color: #8e8e93;
+        font-size: 14rem / $remNum;
+        top: 12rem / $remNum;
+        left: 50%;
+        margin-left: -21rem / $remNum;
+        span {
+            margin-right: 2rem / $remNum;
+            font-size: 14rem / $remNum;
+            vertical-align: 2%;
+        }
+    }
+    input:focus ~ .search-btn, input.hasVal ~ .search-btn {
+        left: 18rem / $remNum;
+        margin-left: 0;
+        em {
+            display: none;
+        }
+    }
+}
+
+.brand-content {
+    padding: 0 0 0 (16rem / $remNum);
+}
+
+.no-search {
+    display: none;
+    text-align: center;
+    font-size: 12rem / $remNum;
+    margin: (20rem / $remNum) 0 0 0;
+    a {
+        font-size: 12rem / $remNum;
+        line-height: 16rem / $remNum;
+        color: #000;
+    }
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+
+.overlay.show {
+    display: block;
+}
\ No newline at end of file

+$remNum: 20;
+
+html {
+    font-size: 20px;
+}
+
+@media only screen and (min-width: 360px) {
+    html {
+        font-size: 22.5px !important;
+    }
+}
+
+@media only screen and (min-width: 375px) {
+    html {
+        font-size: 23.43px !important;
+    }
+}
+
+@media only screen and (min-width: 401px) {
+    html {
+        font-size: 25px !important;
+    }
+}
+
+@media only screen and (min-width: 428px) {
+    html {
+        font-size: 26.75px !important;
+    }
+}
+
+@media only screen and (min-width: 480px) {
+    html {
+        font-size: 30px !important;
+    }
+}
+
+@media only screen and (min-width: 569px) {
+    html {
+        font-size: 35px !important;
+    }
+}
+
+@media only screen and (min-width: 640px) {
+    html {
+        font-size: 40px !important;
+    }
+}
+
+/*header*/
+.header-download-wrap {
+    height: 44rem / $remNum;
+    &.show {
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+    }
+}
+
+.header-download {
+    position: relative;
+    height: 44rem / $remNum;
+    border-top: 1px solid #bcbcbe;
+    border-bottom: 1px solid #000;
+    background: #fff;
+    &.fix {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 20;
+    }
+    .tip-pic {
+        position: absolute;
+        top: 50%;
+        left: 20rem / $remNum;
+        width: 36rem / $remNum;
+        height: 36rem / $remNum;
+        margin: (-18rem / $remNum) 0 0 0;
+        background: image-url("app-icon.png");
+        background-size: 100% 100%;
+    }
+    .tip-info {
+        position: relative;
+        margin: 0 0 0 (62rem / $remNum);
+        h2 {
+            font-size: 12rem / $remNum;
+            line-height: 14rem / $remNum;
+            margin-top: 8rem / $remNum;
+        }
+        p {
+            color: #959192;
+            font-size: 10rem / $remNum;
+            line-height: 14rem / $remNum;
+        }
+        .yohoboy-download-app {
+            position: absolute;
+            width: 53rem / $remNum;
+            height: 21rem / $remNum;
+            top: 2rem / $remNum;
+            right: 30rem / $remNum;
+            border: 1px solid #000;
+            line-height: 21rem / $remNum;
+            border-radius: 2px;
+            text-align: center;
+            font-size: 10rem / $remNum;
+            color: #000;
+        }
+    }
+    .tip-close {
+        position: absolute;
+        width: 20rem / $remNum;
+        height: 20rem / $remNum;
+        top: 0;
+        right: 0;
+        background: image-url("tip-c.png");
+        background-size: 100% 100%;
+    }
+}
+
+.logo {
+    position: relative;
+    height: 43rem / $remNum;
+    line-height: 43rem / $remNum;
+    text-align: center;
+    font-size: 24rem / $remNum;
+    border-bottom: 1px solid #000;
+    .back-btn {
+        position: absolute;
+        left: 10rem / $remNum;
+        font-size: 22rem / $remNum;
+        color: #000;
+    }
+}
+
+.bd {
+    padding-bottom: 20rem / $remNum;
+}
+
+.slide-main {
+    position: relative;
+}
+
+.slide-box {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    height: 155rem / $remNum;
+    .slide-wrap {
+        width: 100%;
+        overflow: hidden;
+        position: relative;
+        .box {
+            float: left;
+            width: 100%;
+            position: relative;
+            img {
+                display: block;
+                width: 100%;
+                height: 155rem / $remNum;
+            }
+        }
+    }
+}
+
+.slide-navigator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 5px;
+    text-align: center;
+    .dib {
+        display: inline-block;
+        a {
+            float: left;
+            width: 6rem / $remNum;
+            height: 6rem / $remNum;
+            margin-left: 3rem / $remNum;
+            background: #d0cfcb;
+            border-radius: 50%;
+        }
+        a:first-child {
+            margin-left: 0;
+        }
+        .swiper-active-switch, .on {
+            background: #989795;
+        }
+    }
+}
+
+.layout-item {
+    margin: 0 0 (45rem / $remNum) 0;
+    .image-box {
+        position: relative;
+        height: 206rem / $remNum;
+        overflow: hidden;
+        .item-tag {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 25rem / $remNum;
+            padding: 0 (10rem / $remNum);
+            line-height: 25rem / $remNum;
+            background: #000;
+            color: #fff;
+            font-size: 14rem / $remNum;
+        }
+        .play-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 46rem / $remNum;
+            height: 40rem / $remNum;
+            margin: (-20rem / $remNum) 0 0 (-23rem / $remNum);
+            background: image-url("play.png");
+            background-size: 100% 100%;
+        }
+    }
+    .content {
+        margin: (10rem / $remNum) 0 0 0;
+        padding: 0 (16rem / $remNum);
+        h2 {
+            a {
+                line-height: 25rem / $remNum;
+                color: #000;
+                font-size: 20rem / $remNum;
+            }
+        }
+        p {
+            margin: (10rem / $remNum) 0 0 0;
+            font-size: 14rem / $remNum;
+            line-height: 20rem / $remNum;
+        }
+        .time {
+            margin: 0;
+            color: #aaa;
+            font-size: 12rem / $remNum;
+        }
+    }
+}
+
+.pagination-inner {
+    padding: 0 (15rem / $remNum);
+    a {
+        float: left;
+        font-size: 18rem / $remNum;
+        color: #000;
+        span {
+            font-size: 14rem / $remNum;
+            vertical-align: 8%;
+        }
+    }
+    a.next {
+        float: right;
+    }
+}
+
+.cooperation-list {
+    margin: (12rem / $remNum) 0 0 0;
+    li {
+        float: left;
+        margin: 0 (9rem / $remNum) (9rem / $remNum) 0;
+        .img-box {
+            width: 138rem / $remNum;
+            height: 93rem / $remNum;
+            line-height: 93rem / $remNum;
+            overflow: hidden;
+            border: 1px solid #e0e0e0;
+            text-align: center;
+            &.current {
+                border: 1px solid #000;
+            }
+            img {
+                vertical-align: middle;
+                max-width: 100%;
+                max-height: 100%;
+                width: auto;
+                background: #fff;
+            }
+        }
+        p {
+            margin: (6rem / $remNum) 0;
+            font-size: 12rem / $remNum;
+            line-height: 14rem / $remNum;
+            text-align: center;
+            color: #000;
+        }
+    }
+    li:hover {
+        .img-box {
+            border: 1px solid #000;
+        }
+    }
+}
+
+.img-zoom {
+    display: none;
+    position: fixed;
+    max-width: 100%;
+    z-index: 99;
+    top: 50%;
+    left: 50%;
+    img {
+        display: block;
+        -width: 100%;
+    }
+}
+
+.img-zoom.show {
+    display: block;
+}
\ No newline at end of file

+.detail-title {
+    margin: (15rem / $remNum) 0;
+    padding: 0 0 0 (14rem / $remNum);
+    .title {
+        line-height: 24rem / $remNum;
+        font-size: 20rem / $remNum;
+        font-weight: bold;
+    }
+    .subtitle {
+        margin: (5rem / $remNum) 0 0 0;
+        font-size: 12rem / $remNum;
+        line-height: 15rem / $remNum;
+        color: #a5a5a5;
+    }
+}
+
+.brand-title {
+    margin: (8rem / $remNum) 0;
+    .title {
+        font-size: 16rem / $remNum;
+        text-align: center;
+    }
+}
+
+.detail-article {
+    margin: (15rem / $remNum) (15rem / $remNum) 0;
+    font-size: 14rem / $remNum;
+    line-height: 24rem / $remNum;
+    img {
+        margin-left: -15rem / $remNum;
+        width: 320rem / $remNum;
+    }
+    p {
+        margin: (10rem / $remNum) 0;
+        font-size: 14rem / $remNum;
+        line-height: 24rem / $remNum;
+    }
+}
+
+.related-post {
+    margin: (28rem / $remNum) (17rem / $remNum) 0 (17rem / $remNum);
+    h2 {
+        font-weight: bold;
+        font-size: 16rem / $remNum;
+        line-height: 18rem / $remNum;
+    }
+    ul {
+        margin: (4rem / $remNum) 0 0 0;
+        li {
+            margin: (16rem / $remNum) 0 0 0;
+            padding: (16rem / $remNum) 0 0 0;
+            border-top: 1px solid #e5e5e5;
+            a {
+                display: block;
+            }
+            .image-box {
+                float: left;
+                width: 96rem / $remNum;
+                height: 61rem / $remNum;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .content {
+                float: left;
+                width: 182rem / $remNum;
+                margin: (8rem / $remNum) 0 0 (8rem / $remNum);
+                font-size: 14rem / $remNum;
+                line-height: 22rem / $remNum;
+                color: #000;
+            }
+            &:first-child {
+                border-top: none;
+            }
+        }
+    }
+}
+
+.share {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
+    text-align: center;
+    ul {
+        display: inline-block;
+    }
+    li {
+        float: left;
+        margin-left: 41rem / $remNum;
+        a {
+            display: block;
+            width: 46px;
+            height: 48px;
+            background-image: image-url("share.png");
+            background-size: 100% auto;
+        }
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+    .yohoo-share-button-sina {
+        a {
+            background-position: 0 -151px;
+        }
+    }
+    .yohoo-share-button-qq {
+        a {
+            background-position: 0 -50px;
+        }
+    }
+}
+
+.enter-store {
+    display: block;
+    width: 94rem / $remNum;
+    height: 33rem / $remNum;
+    margin: (15rem / $remNum) auto 0;
+    padding-left: 34px;
+    line-height: 35rem / $remNum;
+    border: 1px solid #000;
+    border-radius: 4px;
+    background: #fff;
+    color: #000;
+    background: url("../images/yohood/enter-store.png") no-repeat 10px center;
+}
\ No newline at end of file

+.home-logo {
+    border: none;
+}
+
+.banner-swiper {
+    height: 156rem / $remNum;
+    overflow: hidden;
+    img {
+        width: 100%;
+    }
+}
+
+.channel-list {
+    li {
+        float: left;
+        margin: (22rem / $remNum) 0 0 (29rem / $remNum);
+        text-align: center;
+    }
+    .channel-pic {
+        width: 66rem / $remNum;
+        height: 66rem / $remNum;
+        line-height: 66rem / $remNum;
+        border-radius: 50%;
+        border: 1px solid #000;
+        text-align: center;
+        color: #000;
+        font-size: 24rem / $remNum;
+    }
+    .video {
+        font-size: 16rem / $remNum;
+    }
+    .recmmend {
+        background: image-url("recmmend.png") no-repeat center center;
+        background-size: 36% auto;
+    }
+    .show {
+        background: image-url("show.png") no-repeat center center;
+        background-size: 36% auto;
+    }
+    .ticket {
+        background: image-url("ticket.png") no-repeat center center;
+        background-size: 36% auto;
+    }
+    .contact {
+        font-size: 16rem / $remNum;
+    }
+    .channel-name {
+        margin-top: 9rem / $remNum;
+        line-height: 15rem / $remNum;
+        font-size: 12rem / $remNum;
+        font-weight: bold;
+        color: #000;
+    }
+    .channel-name-cn {
+        line-height: 15rem / $remNum;
+        font-size: 12rem / $remNum;
+        color: #000;
+    }
+    li.current {
+        .channel-pic {
+            color: #fff;
+            background: #000;
+        }
+    }
+    li.current {
+        .channel-pic.recmmend {
+            background: #000 image-url("recmmend-current.png") no-repeat center center;
+            background-size: 36% auto;
+        }
+        .channel-pic.show {
+            background: #000 image-url("show-current.png") no-repeat center center;
+            background-size: 36% auto;
+        }
+        .channel-pic.ticket {
+            background: #000 image-url("ticket-current.png") no-repeat center center;
+            background-size: 36% auto;
+        }
+    }
+}
\ No newline at end of file

+.news-select {
+    position: relative;
+    margin: (15rem / $remNum) 0;
+    text-align: center;
+    select {
+        font-size: 16rem / $remNum;
+        border: none;
+        outline: none;
+        font-family: "arial","helvetica","微软雅黑";
+        text-align: center;
+        border-color: red;
+        option{
+            border-color: red;
+        }
+    }
+}
+.news-main{
+    display: none;
+}
+.news-main.current{
+    display: block;
+}
\ No newline at end of file

+.contact-us-section {
+    margin: (10rem / $remNum) 0 0 0;
+    text-align: center;
+    h2 {
+        font-size: 16rem / $remNum;
+    }
+    p {
+        font-size: 14rem / $remNum;
+        line-height: 20rem / $remNum;
+    }
+}
\ No newline at end of file

+.scene-bd {
+    padding: 0;
+}
+
+.scene-tab {
+    margin: (10rem / $remNum) 0 0 (14rem / $remNum);
+    li {
+        float: left;
+        width: 96rem / $remNum;
+        height: 34rem / $remNum;
+        line-height: 34rem / $remNum;
+        text-align: center;
+        background: #fff;
+        border: 1px solid #000;
+        a {
+            font-size: 12rem / $remNum;
+            color: #000;
+        }
+    }
+    li.current {
+        background: #000;
+        a {
+            color: #fff;
+        }
+    }
+    li.disable.current {
+        background: #ebebeb;
+        color: #fff;
+        border-color: #ebebeb;
+        cursor: default;
+        a {
+            color: #fff;
+        }
+    }
+    li.disable {
+        background: #fff;
+        border-color: #ebebeb;
+        cursor: default;
+        a {
+            color: #ebebeb;
+        }
+    }
+}
+
+.scene-content {
+    position: relative;
+    margin: 0 0 0 (14rem / $remNum);
+    border-left: 2px solid #e0e0e0;
+    .scene-intro {
+        position: absolute;
+        top: 15rem / $remNum;
+        left: 23rem / $remNum;
+        padding: 0 (16rem / $remNum);
+        height: 28rem / $remNum;
+        line-height: 28rem / $remNum;
+        background: #000;
+        color: #fff;
+        font-size: 12rem / $remNum;
+    }
+    .scene-intro:before {
+        position: absolute;
+        content: "";
+        width: 6rem / $remNum;
+        height: 17rem / $remNum;
+        top: 0;
+        left: -6rem / $remNum;
+        background: url("../images/yohood/site-activity-intro-icon.png") no-repeat;
+        background-size: 100% 100%;
+    }
+    .scene-time {
+        position: absolute;
+        top: 50rem / $remNum;
+        left: 23rem / $remNum;
+        color: #aeaeae;
+    }
+    .scene-icon {
+        position: absolute;
+        top: 29rem / $remNum;
+        left: -4rem / $remNum;
+        width: 6rem / $remNum;
+        height: 6rem / $remNum;
+        background: url("../images/yohood/site-activity-icon.png") no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.scene-content {
+    .main-layout {
+        display: none;
+    }
+    .main-layout.current {
+        display: block;
+    }
+    .layout-section {
+        position: relative;
+        padding: (83rem / $remNum) 0 0 (16rem / $remNum);
+    }
+    .layout-item {
+        width: 272rem / $remNum;
+    }
+    .image-box {
+        img {
+            width: 100%;
+        }
+    }
+}
\ No newline at end of file

+.show-title {
+    color: #0099bb;
+}
+
+.layout-item {
+    .image-box {
+        height: 320rem / $remNum;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+        .pic-tip {
+            display: block;
+            position: absolute;
+            background: rgba(255, 255, 255, 0.9);
+            color: #009abe;
+            text-decoration: none;
+            height: 12rem / $remNum;
+            line-height: 12rem / $remNum;
+            padding: 0 (5rem / $remNum);
+            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: 8rem / $remNum;
+            left: -2rem / $remNum;
+            z-index: 10;
+        }
+    }
+}
\ No newline at end of file

+.main-title {
+    font-size: 16rem / $remNum;
+    line-height: 46rem / $remNum;
+    text-align: center;
+    color: #000;
+}
+
+.video-wrap {
+    .layout-item {
+        .image-box {
+            height: 206rem / $remNum;
+        }
+        img {
+            width: 100%;
+        }
+    }
+}
\ No newline at end of file

+.activity-main {
+    margin: 30px 0 50px 0;
+}
+
+.activity-content {
+    display: none;
+    &:first-child {
+        display: block;
+    }
+    &.current {
+        display: block;
+    }
+}
+
+.activity-content .section {
+    width: 820px;
+    text-align: center;
+    margin: 0 auto 20px;
+    p {
+        text-align: left;
+        font-size: 14px;
+        line-height: 18px;
+        color: #000;
+    }
+    h4 {
+        text-align: left;
+        font-weight: bold;
+    }
+}
+
+.video-wrap {
+    .layout-item {
+        height: 362px;
+        margin: 0 28px 0 0;
+        .image-box {
+            height: 198px;
+            overflow: hidden;
+            img {
+                width: 100%;
+            }
+        }
+    }
+}
+
+.activity-cooperation .section {
+    text-align: left;
+    margin: 0 0 12px 0;
+    h2 {
+        color: #000;
+        line-height: 20px;
+        font-size: 18px;
+        font-weight: bold;
+    }
+}
+
+.contant-tab {
+    margin: 30px 0 0 0;
+    text-align: center;
+    ul {
+        display: inline-block;
+        li {
+            float: left;
+            margin-left: 18px;
+            a {
+                display: block;
+                padding: 0 10px;
+                line-height: 30px;
+                color: #000;
+                border: 2px solid #7e7e7e;
+                border-radius: 2px;
+                font-size: 14px;
+            }
+        }
+        &:first-child {
+            margin-left: 0;
+        }
+        li.current a {
+            background: #000;
+            color: #fff;
+        }
+    }
+}
\ No newline at end of file

+.brand-main {
+    margin: 50px 0;
+}
+
+.search-wrap {
+    position: relative;
+    width: 306px;
+    height: 36px;
+    margin: 0 auto;
+    padding: 0;
+    line-height: 36px;
+    input {
+        width: 260px;
+        height: 36px;
+        line-height: 36px\9;
+        padding: 0 36px 0 10px;
+        margin: 0;
+        border: none;
+        background: url("../images/yohood/search-bg.png");
+        outline: none;
+    }
+    .search-btn {
+        position: absolute;
+        top: 0px;
+        right: 10px;
+        color: #000;
+        font-weight: bold;
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+.brand-content {
+    margin: 38px 0 0 0;
+    .no-search {
+        display: none;
+        margin: 100px 0 120px 0;
+        text-align: center;
+        line-height: 22px;
+        font-size: 16px;
+        a {
+            font-size: 16px;
+            color: #000;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.brand-list {
+    li {
+        float: left;
+    }
+}
+
+.brand-introduction {
+    display: none;
+    position: fixed;
+    width: 644px;
+    max-height: 604px;
+    top: 50%;
+    left: 50%;
+    margin: -314px 0 0 -352px;
+    padding: 24px 30px 30px;
+    z-index: 102;
+    background: #fff;
+    h2 {
+        font-size: 18px;
+        color: #000;
+        line-height: 20px;
+    }
+    .brand-info {
+        margin: 20px 0 0 0;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #e0e0e0;
+        .pic {
+            float: left;
+            width: 200px;
+            height: 200px;
+            overflow: hidden;
+            margin-top: 6px;
+            img {
+                width: 100%;
+            }
+        }
+        .text {
+            float: left;
+            margin: 0 0 0 29px;
+            p {
+                width: 414px;
+                max-height: 192px;
+                overflow-x: hidden;
+                margin: 0;
+                line-height: 24px;
+                font-size: 14px;
+            }
+            a {
+                display: block;
+                width: 94px;
+                height: 33px;
+                margin-top: 15px;
+                padding-left: 34px;
+                line-height: 35px;
+                border: 1px solid #000;
+                border-radius: 4px;
+                background: #fff;
+                color: #000;
+                background: url("../images/yohood/enter-store.png") no-repeat 10px center;
+            }
+        }
+    }
+    .brand-close-btn {
+        position: absolute;
+        color: #b2b2b2;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+.related-post {
+    h3 {
+        margin-top: 28px;
+        line-height: 22px;
+        font-size: 18px;
+    }
+    .post-list {
+        margin-top: 17px;
+        width: 666px;
+        .layout-item {
+            float: left;
+            width: 200px;
+            margin-right: 22px;
+            .image-box {
+                height: 128px;
+                overflow: hidden;
+            }
+            .content {
+                h2 {
+                    margin: 8px 0 0 0;
+                    line-height: 20px;
+                    a {
+                        font-size: 14px;
+                        font-weight: normal;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

+.yoho-nav {
+    width: 100%;
+    height: 34px;
+    line-height: 34px;
+    background: #f4f4f4;
+    border-bottom: 1px solid #d8d8d8;
+    ul {
+        float: left;
+        padding-left: 10px;
+        li {
+            float: left;
+            position: relative;
+            width: 100px;
+            cursor: pointer;
+            span {
+                display: block;
+                width: 100%;
+                height: 100%;
+                line-height: 37px;
+                text-align: center;
+            }
+            a {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                color: #000000;
+                display: none;
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+        li.current {
+            height: 35px;
+            line-height: 35px;
+            border-right: 1px solid #d8d8d8;
+            border-left: 1px solid #d8d8d8;
+            background: #fff;
+        }
+        li:hover {
+            span {
+                display: none;
+            }
+            a {
+                display: block;
+            }
+        }
+    }
+    .contact-btn {
+        float: right;
+        margin: 0 15px;
+        color: #aaaaaa;
+    }
+}
+
+.header {
+    width: 100%;
+    padding: 14px 0 0 0;
+}
+
+.logo {
+    margin: 0 0 21px 0;
+    height: 79px;
+    background: url("../images/yohood/logo.png") no-repeat center center;
+}
+
+@keyframes rainbow {
+    90% {
+        border-radius: 50%;
+        width: 144px;
+        height: 144px;
+        margin: -50px 0 0 -16px;
+    }
+    100% {
+        border-radius: 0;
+        width: 122px;
+        height: 44px;
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
+}
+
+
+@-webkit-keyframes rainbow {
+    90% {
+        border-radius: 50%;
+        width: 144px;
+        height: 144px;
+        margin: -50px 0 0 -16px;
+    }
+    100% {
+        border-radius: 0;
+        width: 126px;
+        height: 44px;
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
+}
+
+
+@-moz-keyframes rainbow {
+    90% {
+        border-radius: 50%;
+        width: 144px;
+        height: 144px;
+        margin: -50px 0 0 -16px;
+    }
+    100% {
+        border-radius: 0;
+        width: 126px;
+        height: 44px;
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
+}
+
+
+@-ms-keyframes rainbow {
+    90% {
+        border-radius: 50%;
+        width: 144px;
+        height: 144px;
+        margin: -50px 0 0 -16px;
+    }
+    100% {
+        border-radius: 0;
+        width: 126px;
+        height: 44px;
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
+}
+
+
+@keyframes rainbow {
+    90% {
+        border-radius: 50%;
+        width: 144px;
+        height: 144px;
+        margin: -50px 0 0 -16px;
+    }
+    100% {
+        border-radius: 0;
+        width: 126px;
+        height: 44px;
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
+}
+
+
+.nav {
+    border-top: 2px solid #000;
+    border-bottom: 2px solid #000;
+    overflow: hidden;
+    ul {
+        width: 980px;
+        margin: 0 auto;
+        li {
+            position: relative;
+            float: left;
+            line-height: 44px;
+            height: 44px;
+            width: 122px;
+            a {
+                position: relative;
+                z-index: 10;
+                width: 122px;
+                display: none;
+                font-size: 14px;
+                color: #fff;
+                &:focus {
+                    outline: none;
+                }
+            }
+            span {
+                display: block;
+                text-align: center;
+                font-size: 14px;
+                color: #000;
+            }
+            i {
+                display: none;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 44px;
+                height: 44px;
+                margin-left: -22px;
+                margin-top: -22px;
+                border-radius: 50%;
+                background: #000;
+                z-index: 9;
+            }
+        }
+        li:hover, li.current {
+            span {
+                display: none;
+            }
+        }
+        li.current {
+            a {
+                display: block;
+                background: #000;
+                text-align: center;
+            }
+            i {
+                display: none;
+            }
+        }
+        li.animate a {
+            display: block;
+            text-align: center;
+            margin: 0 auto;
+        }
+        li.animate i {
+            display: block;
+            animation: .5s rainbow forwards;
+            -webkit-animation: .5s rainbow forwards;
+            -moz-animation: .5s rainbow forwards;
+            -ms-animation: .5s rainbow forwards;
+            width: 122px\9;
+            margin-left: 0\9;
+            left: 0\9;
+            width: 122px\0;
+            margin-left: 0\0;
+            left: 0\0;
+            border-radius: 0\0;
+            /* -webkit-transition: all 1s 1s; */
+        }
+    }
+}
+
+.slide-main {
+    position: relative;
+}
+
+.slide-box {
+    position: relative;
+    margin: 16px 0 0 0;
+    visibility: hidden;
+    overflow: hidden;
+    .slide-wrap {
+        height: 468px;
+        overflow: hidden;
+        position: relative;
+        .box {
+            float: left;
+            width: 100%;
+            position: relative;
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+.slide-navigator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -32px;
+    text-align: center;
+    .dib {
+        *display: inline !important;
+        zoom: 1;
+        a {
+            float: left;
+            width: 10px;
+            height: 10px;
+            margin: 0 10px 0 0;
+            background-image: url("../images/yohood/sprites.png");
+            background-position: 0 -144px;
+            &:focus {
+                outline: none;
+            }
+        }
+        .on {
+            background-position: 0 -124px;
+        }
+    }
+}
+
+.slide-control {
+    a {
+        position: absolute;
+        top: 50%;
+        margin: -28px 0 0 0;
+        font-size: 48px;
+        color: #000;
+        &:focus {
+            outline: none;
+        }
+    }
+    .slide-prev {
+        left: -70px;
+    }
+    .slide-next {
+        right: -70px;
+    }
+}
+
+.content-tab {
+    margin: 30px 0 0 0;
+    text-align: center;
+    ul {
+        display: inline-block;
+        *display: inline !important;
+        *zoom: 1;
+        li {
+            float: left;
+            margin-left: 18px;
+            a {
+                display: block;
+                padding: 0 10px;
+                line-height: 30px;
+                color: #000;
+                border: 1px solid #000;
+                border-radius: 2px;
+                font-size: 14px;
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+        &:first-child {
+            margin-left: 0;
+        }
+        li.current a {
+            background: #000;
+            color: #fff;
+        }
+    }
+}
+
+.main-layout {
+    width: 1008px;
+    .layout-item {
+        float: left;
+        width: 308px;
+        margin: 0 28px 26px 0;
+        .image-box {
+            position: relative;
+            a {
+                display: block;
+                img {
+                    display: block;
+                    margin: 0 auto;
+                    max-width: 100%;
+                }
+                &:focus {
+                    outline: none;
+                }
+            }
+            .item-tag {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                padding: 0 11px;
+                background: #000;
+                line-height: 26px;
+                font-size: 14px;
+                color: #fff;
+            }
+            .play-icon {
+                position: absolute;
+                width: 50px;
+                height: 43px;
+                background: url("../images/yohood/play.png");
+                background-size: 100% 100%;
+                left: 50%;
+                top: 50%;
+                margin: -22px 0 0 -25px;
+            }
+            .play-icon.small {
+                background: url("../images/yohood/play-small.png");
+            }
+        }
+        .content {
+            h2 {
+                margin: 15px 0 0 0;
+                a {
+                    line-height: 24px;
+                    font-size: 20px;
+                    font-weight: bold;
+                    color: #000;
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
+            p {
+                margin: 8px 0 0 0;
+                font-size: 14px;
+                color: #000;
+                line-height: 20px;
+            }
+            .time {
+                margin: 0;
+                color: #b2b2b2;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+.pagination {
+    margin: 56px 0 0 0;
+    text-align: center;
+    .pagination-inner {
+        display: inline-block;
+        *display: inline !important;
+        zoom: 1;
+        a {
+            float: left;
+            width: 36px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            color: #999997;
+            &:focus {
+                outline: none;
+            }
+        }
+        .current {
+            background: #000;
+            color: #fff;
+            border-radius: 2px;
+        }
+    }
+}
+
+.cooperation-list {
+    width: 1005px;
+    margin: 12px 0 0 0;
+    li {
+        float: left;
+        margin: 0 27px 27px 0;
+        a {
+            display: block;
+            &:focus {
+                outline: none;
+            }
+        }
+        .img-box {
+            width: 172px;
+            height: 116px;
+            overflow: hidden;
+            border: 1px solid #e0e0e0;
+            display: table-cell;
+            vertical-align: middle;
+            text-align: center;
+            &:hover {
+                border: 1px solid #000;
+            }
+        }
+        p {
+            margin: 16px 0 0 0;
+            line-height: 16px;
+            text-align: center;
+            color: #000;
+        }
+    }
+    li.current {
+        .img-box {
+            border: 1px solid #000;
+        }
+    }
+}
+
+.limited-goods {
+    position: relative;
+    padding: 30px 0 30px 0;
+    background: #333333;
+    h2 {
+        font-size: 24px;
+        color: #8b8b8b;
+        font-weight: bold;
+        text-align: center;
+        background: url("../images/yohood/limited-line.png") no-repeat center center;
+    }
+}
+
+.limited-slide-box {
+    position: relative;
+    width: 944px;
+    margin: 28px auto 0;
+    visibility: hidden;
+    overflow: hidden;
+    .slide-wrap {
+        position: relative;
+        overflow: hidden;
+    }
+    .box {
+        position: relative;
+        float: left;
+        width: 100%;
+    }
+}
+
+.goods-list {
+    width: 992px;
+    li {
+        float: left;
+        width: 150px;
+        margin: 0 48px 0 0;
+        .img-box {
+            position: relative;
+            height: 200px;
+            text-align: center;
+            overflow: hidden;
+            img {
+                width: 100%;
+            }
+            span {
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 55px;
+                height: 25px;
+                line-height: 25px;
+                background: #000;
+                color: #fff;
+                font-size: 14px;
+                text-align: center;
+            }
+            span.red {
+                background: #ef3d00;
+            }
+        }
+        .goods-name {
+            margin: 5px 0 0 0;
+            line-height: 18px;
+            font-size: 14px;
+            color: #ccc;
+        }
+        .price {
+            margin: 6px 0 0 0;
+            line-height: 18px;
+            color: #ccc;
+            font-size: 12px;
+            .original-price {
+                color: #999;
+                text-decoration: line-through;
+                margin-right: 4px;
+            }
+        }
+    }
+}
+
+.limited-slide-control {
+    a {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        font-size: 30px;
+        color: #ebebeb;
+        &:focus {
+            outline: none;
+        }
+    }
+    .limited-slide-prev {
+        margin-left: -510px;
+    }
+    .limited-slide-next {
+        margin-left: 480px;
+    }
+    .disable {
+        color: #4a4a4a;
+    }
+}
+
+.return-top {
+    position: fixed;
+    bottom: 410px;
+    left: 50%;
+    margin-left: 600px;
+    a {
+        color: #000;
+    }
+    span {
+        display: block;
+    }
+}
+
+.img-zoom {
+    display: none;
+    position: fixed;
+    z-index: 102;
+    left: 50%;
+    top: 50%;
+    img {
+        display: block;
+    }
+}
+
+.img-zoom.show {
+    display: block;
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    background: #000 \9;
+    filter: alpha(opacity = 50) \9;
+    width: 100% \9;
+    height: 100% \9;
+    z-index: 101;
+}
+
+.overlay.show {
+    display: block;
+}
+
+.share {
+    position: absolute;
+    z-index: 99;
+    left: 50%;
+    top: 367px;
+    margin-left: -596px;
+    h4 {
+        font-size: 14px;
+        margin-bottom: 5px;
+    }
+    li {
+        position: relative;
+        width: 34px;
+        height: 34px;
+        margin-bottom: 13px;
+        img {
+            display: block;
+            width: 100%;
+        }
+    }
+    .wx-qrcode-dialog {
+        display: none;
+        position: absolute;
+        background: #fff url("../images/yohood/share-wx-bg.png");
+        width: 223px;
+        height: 220px;
+        left: 50px;
+        top: -88px;
+        padding: 12px 0 0 0;
+        text-align: center;
+        .wx-popup-hd {
+            margin-bottom: 5px;
+            font-size: 16px;
+        }
+        .wx-popup-bd {
+            width: 125px;
+            height: 125px;
+            margin: 0 auto;
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+        .wx-popup-ft {
+            font-size: 14px;
+        }
+    }
+}
+
+.ft {
+    width: 100%;
+}
\ No newline at end of file

+.detail-title {
+    margin: 48px 0 28px;
+    font-size: 28px;
+    h2, h3 {
+        line-height: 40px;
+        font-weight: bold;
+    }
+    .time {
+        font-size: 12px;
+        color: #b2b2b2;
+        line-height: 24px;
+    }
+}
+
+.detail-body {
+    float: left;
+    width: 644px;
+    img {
+        max-width: 100%;
+    }
+}
+
+.detail-slide {
+    margin-bottom: 20px;
+}
+
+.detail-slide-body {
+    position: relative;
+    width: 100%;
+    height: 415px;
+    overflow: hidden;
+    .detail-slide-piclist {
+        height: 415px;
+        overflow: hidden;
+        position: relative;
+        .box {
+            float: left;
+            width: 644px;
+            height: 415px;
+            line-height: 415px;
+            position: relative;
+            background: #000;
+            text-align: center;
+            img {
+                max-width: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
+}
+
+.slide-box {
+    position: relative;
+    margin: 16px 0 0 0;
+    visibility: hidden;
+    overflow: hidden;
+    .slide-wrap {
+        height: 468px;
+        overflow: hidden;
+        position: relative;
+        .box {
+            float: left;
+            width: 100%;
+            position: relative;
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+.slide-shadow {
+    a {
+        position: absolute;
+        width: 322px;
+        top: 0;
+        bottom: 0;
+        &:focus {
+            outline: none;
+        }
+    }
+    .slide-shadow-prev {
+        left: 0;
+    }
+    .slide-shadow-next {
+        right: 0;
+    }
+}
+
+.detail-slide-big-ctrl {
+    a {
+        display: none;
+        position: absolute;
+        font-size: 40px;
+        top: 50%;
+        color: #fff;
+        margin-top: -30px;
+        z-index: 20;
+        &:focus {
+            outline: none;
+        }
+    }
+    .slide-big-ctrl-prev {
+        left: 5px;
+    }
+    .slide-big-ctrl-next {
+        right: 5px;
+    }
+}
+
+.detail-slide-ctrl {
+    padding: 15px 0 0 0;
+    width: 100%;
+    height: 65px;
+    overflow: hidden;
+    position: relative;
+    .detail-slide-ctrl-prev, .detail-slide-ctrl-next {
+        display: none;
+        position: absolute;
+        top: 15px;
+        width: 30px;
+        height: 65px;
+        line-height: 65px;
+        background: rgba(230, 230, 230, 0.9);
+        font-size: 18px;
+        text-align: center;
+        color: #000;
+    }
+    .detail-slide-ctrl-prev {
+        left: 0;
+    }
+    .detail-slide-ctrl-next {
+        right: 0;
+    }
+}
+
+.detail-slide-ctrl-tabs {
+    position: relative;
+    left: 0;
+    top: 0;
+    li {
+        position: relative;
+        float: left;
+        padding: 0 0 0 9px;
+        img {
+            display: block;
+            width: 100px;
+            height: 65px;
+        }
+    }
+    li:first-child {
+        padding: 0;
+    }
+    li:first-child.current {
+        .border {
+            left: 0px;
+        }
+    }
+    li.current {
+        .border {
+            position: absolute;
+            left: 7px;
+            right: 0px;
+            top: 0px;
+            bottom: 0px;
+            border: 2px solid #000;
+        }
+        .arrow {
+            position: absolute;
+            top: -9px;
+            left: 50%;
+            margin: 0 0 0 -9px;
+            width: 0;
+            height: 0;
+            border-left: 9px solid transparent;
+            border-right: 9px solid transparent;
+            border-bottom: 9px solid black;
+        }
+    }
+}
+
+.text-body {
+    margin: 0 0 25px 0;
+    font-size: 14px;
+    line-height: 28px;
+    p {
+        margin: 25px 0;
+    }
+}
+
+.detail-related-post {
+    h3 {
+        font-weight: bold;
+    }
+}
+
+.detail-side {
+    width: 280px;
+    float: right;
+    padding-bottom: 62px;
+}
+
+.detail-ad {
+    li {
+        margin-bottom: 15px;
+        img {
+            display: block;
+        }
+    }
+}
+
+.app-download {
+    width: 278px;
+    height: 158px;
+    margin-top: 28px;
+    border: 1px solid #000;
+    .qr {
+        float: left;
+        margin: 22px 0 0 18px;
+        width: 114px;
+        height: 114px;
+        img {
+            display: block;
+            width: 100%;
+        }
+    }
+    .download-text {
+        float: left;
+        margin: 20px 0 38px 12px;
+        width: 108px;
+        img {
+            display: block;
+            width: 50px;
+        }
+        p {
+            font-size: 12px;
+            color: #666;
+        }
+        .yoho-name {
+            font-size: 18px;
+            color: #000;
+            font-weight: bold;
+        }
+    }
+}
+
+.side-related-post.fix {
+    position: fixed;
+    top: 0px;
+    left: 50%;
+    width: 280px;
+    margin-left: 210px;
+}
+
+.side-related-tab {
+    border-bottom: 1px solid #000;
+    a {
+        float: left;
+        width: 140px;
+        text-align: center;
+        font-size: 18px;
+        line-height: 38px;
+        color: #000;
+        font-weight: bold;
+    }
+    a.current {
+        border-bottom: 2px solid #000;
+    }
+}
+
+.side-related-list {
+    display: none;
+    &.current {
+        display: block;
+    }
+    .layout-item {
+        float: none;
+        margin: 20px 0 0 0;
+        .image-box {
+            float: left;
+            width: 82px;
+            height: 53px;
+            overflow: hidden;
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+            .play-icon {
+                width: 20px;
+                height: 20px;
+                margin: -10px 0 0 -10px;
+            }
+        }
+        .content {
+            float: left;
+            margin-left: 16px;
+            width: 182px;
+            h2 {
+                margin: 0;
+                a {
+                    font-size: 14px;
+                    font-weight: normal;
+                    line-height: 20px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

+.bd {
+    width: 980px;
+    margin: 0 auto;
+}
+
+.wrapper {
+    width: 980px;
+    margin: 0 auto;
+}
+
+.slide-main {
+    position: relative;
+}
+
+.slide-box {
+    position: relative;
+    margin: 16px 0 0 0;
+    visibility: hidden;
+    overflow: hidden;
+    .slide-wrap {
+        height: 468px;
+        overflow: hidden;
+        position: relative;
+        .box {
+            float: left;
+            width: 100%;
+            position: relative;
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+.slide-navigator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -32px;
+    text-align: center;
+    .dib {
+        display: inline-block;
+        a {
+            float: left;
+            width: 10px;
+            height: 10px;
+            margin: 0 10px 0 0;
+            background-image: url("../images/yohood/sprites.png");
+            background-position: 0 -144px;
+        }
+        .on {
+            background-position: 0 -124px;
+        }
+    }
+}
+
+.slide-control {
+    a {
+        position: absolute;
+        top: 50%;
+        margin: -28px 0 0 0;
+        font-size: 48px;
+        color: #000;
+    }
+    .slide-prev {
+        left: -70px;
+    }
+    .slide-next {
+        right: -70px;
+    }
+}
+
+.content-wrap {
+    margin: 50px 0 0 0;
+}
+
+.cooperation {
+    position: relative;
+    margin: 48px 0;
+    height: 118px;
+    border: 1px solid #000;
+}
+
+.cooperation-slide-box {
+    position: relative;
+    width: 800px;
+    margin: 0 auto;
+    padding: 28px 0 0 0;
+    visibility: hidden;
+    overflow: hidden;
+    .slide-wrap {
+        position: relative;
+        overflow: hidden;
+        .box {
+            position: relative;
+            float: left;
+            width: 100%;
+        }
+    }
+}
+
+.cooperation {
+    .partner {
+        float: left;
+        margin: 0 50px 0 0;
+    }
+    .media {
+        float: left;
+        height: 68px;
+        padding: 0 0 0 50px;
+        border-left: 1px solid #000;
+    }
+    h2 {
+        font-size: 14px;
+        line-height: 20px;
+    }
+    ul {
+        li {
+            float: left;
+            height: 60px;
+            width: 132px;
+            a {
+                width: 132px;
+                height: 60px;
+                display: table-cell;
+                vertical-align: middle;
+                text-align: center;
+            }
+        }
+    }
+    .partner ul, .media ul {
+        li {
+            width: 115px;
+            a {
+                width: 115px;
+            }
+        }
+    }
+}
+
+.cooperation-slide-control {
+    a {
+        position: absolute;
+        top: 50%;
+        margin-top: -16px;
+        color: #000;
+        font-size: 26px;
+    }
+    .cooperation-slide-prev {
+        left: 20px;
+    }
+    .cooperation-slide-next {
+        right: 20px;
+    }
+    .disable {
+        color: #d9d9d9;
+    }
+}
\ No newline at end of file

+.news-tab ul {
+    li {
+        margin-left: 8px;
+    }
+}
+
+.news-main {
+    margin: 30px 0 50px 0;
+}
\ No newline at end of file

+.contact-us {
+    padding: 20px 0 30px;
+}
+
+.contact-us-section {
+    text-align: center;
+    font-size: 16px;
+    line-height: 28px;
+}
\ No newline at end of file

+.show-title {
+    line-height: 98px;
+    font-size: 32px;
+    color: #0099bb;
+    text-align: center;
+}
+
+.show-wrap {
+    padding-bottom: 50px;
+    .layout-item {
+        height: 396px;
+        .image-box {
+            height: 308px;
+            overflow: hidden;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+            .pic-tip {
+                display: block;
+                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;
+            }
+        }
+    }
+}
+
+.img-zoom {
+    .pic-tip {
+        display: block;
+        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;
+    }
+    .close-btn {
+        position: absolute;
+        top: 6px;
+        right: -58px;
+        width: 27px;
+        height: 27px;
+        background-image: url("../images/yohood/close-btn.png");
+        background-size: 100% 100%;
+    }
+}
\ No newline at end of file

+.site-activity-date {
+    margin: 38px 0 0 0;
+    width: 120px;
+    line-height: 38px;
+    font-size: 22px;
+    color: #000;
+    border-bottom: 4px solid #000;
+    text-align: center;
+}
+
+.site-activity-content {
+    float: left;
+    width: 738px;
+}
+
+.site-activity-content .main-layout {
+    width: auto;
+    border-left: 2px solid #e0e0e0;
+    margin-left: 96px;
+    padding-bottom: 50px;
+    .layout-section {
+        width: auto;
+        position: relative;
+        padding-top: 84px;
+        .site-activity-intro {
+            position: absolute;
+            top: 28px;
+            left: 18px;
+            background: #000;
+            border-radius: 2px;
+            padding: 0 15px;
+            color: #fff;
+            line-height: 28px;
+            span {
+                position: absolute;
+                left: -6px;
+                top: 0;
+                width: 6px;
+                height: 17px;
+                background: url("../images/yohood/site-activity-intro-icon.png") no-repeat;
+            }
+        }
+        .site-activity-time {
+            position: absolute;
+            color: #000;
+            left: -98px;
+            top: 35px;
+        }
+        .site-activity-icon {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            top: 40px;
+            left: -6px;
+            background: url("../images/yohood/site-activity-icon.png") no-repeat;
+        }
+    }
+}
+
+.site-activity-content .layout-item {
+    float: none;
+    width: 630px;
+    margin: 0 0 0 18px;
+    .image-box {
+        float: left;
+        width: 310px;
+        height: 174px;
+        overflow: hidden;
+        a {
+            display: table-cell;
+            width: 310px;
+            height: 174px;
+            text-align: center;
+            vertical-align: middle;
+        }
+    }
+    .content {
+        float: left;
+        margin-left: 28px;
+        width: 290px;
+    }
+}
+
+.site-activity-tab.fix {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    width: 134px;
+    margin: 10px 0 0 356px;
+}
+
+.site-activity-tab {
+    float: right;
+    margin-top: 79px;
+    h4 {
+        line-height: 42px;
+        padding-top: 14px;
+        border-top: 1px dashed #979797;
+        font-size: 14px;
+        text-align: center;
+    }
+    li {
+        width: 130px;
+        margin-bottom: 18px;
+        line-height: 42px;
+        background: #fff;
+        text-align: center;
+        font-size: 14px;
+        border: 2px solid #7e7e7e;
+        border-radius: 2px;
+        a {
+            display: block;
+            color: #000;
+        }
+    }
+    .current {
+        border-radius: 0;
+        background: #000;
+        border-color: #000;
+        a {
+            color: #fff;
+        }
+    }
+    .disable {
+        border-color: #ccc;
+        a {
+            color: #ccc;
+            cursor: default;
+        }
+    }
+}
\ No newline at end of file

+.video-list {
+    margin: 28px 0 50px;
+}
\ No newline at end of file