diff --git a/.gitignore b/.gitignore
index fb5700d2..07a87f35 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,6 @@ Thumbs.db
 /vendor
 /.settings
 /.buildpath
-/.project
\ No newline at end of file
+/.project
+
+app/index/controller/DataMigration.php
\ No newline at end of file
diff --git a/app/index/controller/Common.php b/app/index/controller/Common.php
new file mode 100644
index 00000000..2e4b8c50
--- /dev/null
+++ b/app/index/controller/Common.php
@@ -0,0 +1,210 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\controller;
+
+use app\BaseController;
+use app\index\model\LanguageModel;
+use app\index\model\ProductCategoryModel;
+use app\index\model\ProductModel;
+use app\index\model\SysConfigModel;
+use app\index\model\SysNavigationItemModel;
+use think\facade\Lang;
+use think\facade\View;
+
+abstract class Common extends BaseController
+{
+    // 当前语言id
+    protected $lang_id = 1;
+
+    /**
+     * 控制器初始化
+     * @access public
+     */
+    public function initialize()
+    {
+        // 获取国家/语言列表
+        $languages = $this->getLanguages();
+        // 输出国家/语言列表
+        View::assign('header_languages', $languages);
+
+        // 获取当前语言
+        $current_language = $this->getCurrentLanguage($languages);
+        if (!empty($current_language)) {
+            $this->lang_id = $current_language['id'];
+        }
+
+        // 获取产品分类
+        $categorys = $this->getProductCategory($this->lang_id);
+        // 输出产品分类
+        View::assign('header_categorys', $categorys);
+
+        // 获取热销产品
+        $hot_products = $this->getHotProducts($this->lang_id);
+        // 输出热销产品
+        View::assign('header_hot_products', $hot_products);
+
+        // 输出顶部导航
+        View::assign('header_navigation', $this->getNavigation('NAV_67f3701f3e831', $this->lang_id));
+
+        // 获取系统配置
+        $configs = $this->getSysConfig($this->lang_id, ['basic', 'contact', 'media']);
+        // 输出系统配置
+        View::assign('basic_config', $configs['basic']);
+        View::assign('contact_config', $configs['contact']);
+        View::assign('media_config', $configs['media']);
+
+        // 获取底部导航
+        $footer_navigation = $this->getNavigation('NAV_67f60be43df8d', $this->lang_id);
+        // 输出底部导航
+        View::assign('footer_navigation', $footer_navigation);
+    }
+
+    // 获取当前语言
+    private function getCurrentLanguage($languages)
+    {
+        $current_code = Lang::getLangSet();
+        foreach ($languages as $item) {
+            if ($item['lang_code'] == $current_code) {
+                return $item;
+            }
+        }
+
+        return [];
+    }
+
+    // 获取产品分类
+    protected function getProductCategory($language = 1)
+    {
+        $categorys = ProductCategoryModel::field([
+                'id',
+                'pid',
+                'name',
+                'icon',
+                'level'
+            ])
+            ->language($language)
+            ->displayed()
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        if ($categorys->isEmpty()) {
+            return [];
+        }
+
+        return array_to_tree($categorys->toArray(), 0, 'pid', 1, false);
+    }
+
+    // 获取顶部导航
+    protected function getNavigation($unique_label, $language = 1)
+    {
+        $nav = SysNavigationItemModel::hasWhere('navigation', [
+                'unique_label' => $unique_label,
+                'language_id'  =>  $language,
+                'status'       => 1
+            ])
+            ->order(['sort' => 'asc', 'id' => 'asc'])
+            ->select();
+        if ($nav->isEmpty()) {
+            return [];
+        }
+
+        return array_to_tree($nav->toArray(), 0, 'pid', 1, false);
+    }
+
+    // 获取热销产品
+    protected function getHotProducts($language = 1, $limit = 3)
+    {
+        $products = ProductModel::field([
+                'id',
+                'name',
+                'cover_image',
+            ])
+            ->language($language)
+            ->onSale(true)
+            ->onShelves(true)
+            ->hot(true)
+            ->limit($limit)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        if ($products->isEmpty()) {
+            return [];
+        }
+
+        return $products->toArray();
+    }
+
+    // 获取国家/语言列表
+    protected function getLanguages()
+    {
+        $languages = LanguageModel::alias('l')
+            ->field([
+                'l.id',
+                'l.name'    => 'lang_name',
+                'l.en_name' => 'lang_en_name',
+                'l.code'    => 'lang_code',
+                'l.icon'    => 'lang_icon',
+                'l.url'     => 'lang_url',
+                'c.id'      => 'country_id',
+                'c.name'    => 'country_zh_name',
+                'c.en_name' => 'country_en_name',
+                'c.code'    => 'country_code',
+            ])
+            ->join('sys_country c', 'c.id = l.country_id')
+            ->where('l.status', '=', 1)
+            ->where('c.status', '=', 1)
+            ->order(['l.sort' => 'asc', 'l.id' => 'asc'])
+            ->select();
+
+        return $languages;
+    }
+
+    // 获取系统联系方式配置
+    protected function getSysConfig($language, $group = [])
+    {
+        $configs = SysConfigModel::alias('c')
+            ->field([
+                'c.id',
+                'c.title',
+                'c.name',
+                'c.value',
+                'c.extra',
+                'c.type',
+                'g.unique_label'
+            ])
+            ->join('sys_config_group g', 'g.id = c.group_id')
+            ->where('g.unique_label', 'in', $group)
+            ->where('g.language_id', '=', $language)
+            ->order(['c.sort' => 'asc', 'c.id' => 'desc'])
+            ->select();
+        if ($configs->isEmpty()) {
+            return [];
+        }
+        $configs = $configs->toArray();
+        $data = [];
+        foreach ($configs as $cfg) {
+            $current = &$data;
+            if (!isset($current[$cfg['unique_label']])) {
+                $current[$cfg['unique_label']] = [];
+            }
+            $current = &$current[$cfg['unique_label']];
+
+            // 根据name中"."拆分为多维数组
+            $parts = explode('.', $cfg['name']);
+            foreach ($parts as $part) {
+                if (!isset($current[$part])) {
+                    $current[$part] = [];
+                }
+                $current = &$current[$part];
+            }
+            $current = [
+                'title' => $cfg['title'],
+                'type'  => $cfg['type'],
+                'value' => $cfg['value'],
+                'extra' => $cfg['extra'],
+            ];
+        }
+        unset($current);
+        
+        return $data;
+    }
+}
diff --git a/app/index/controller/Index.php b/app/index/controller/Index.php
index 81f7c98f..2eb95687 100644
--- a/app/index/controller/Index.php
+++ b/app/index/controller/Index.php
@@ -3,10 +3,147 @@ declare (strict_types = 1);
 
 namespace app\index\controller;
 
-class Index
+use app\index\model\ArticleModel;
+use app\index\model\FaqModel;
+use app\index\model\ProductModel;
+use app\index\model\SysBannerModel;
+use think\facade\View;
+
+/**
+ * 首页控制器
+ */
+class Index extends Common
 {
     public function index()
     {
-        return '您好！这是一个[' . lang('home') . ']示例应用';
+        // 获取banner数据
+        $banner = $this->getBannerData();
+        View::assign('focus_images', $banner['focus_images']);
+        View::assign('product_categorys', $banner['product_categorys']);
+        View::assign('featured_topics', $banner['featured_topics']);
+        View::assign('video', array_shift($banner['video']));
+        View::assign('scenes', $banner['scenes']);
+        View::assign('brand_story', $banner['brand_story']);
+        View::assign('data_statistics', $banner['data_statistics']);
+
+        // 获取明星产品/热点产品
+        View::assign('featured_products', $this->getFeaturedProducts());
+
+        // 获取推荐文章
+        View::assign('recommend_articles', $this->getRecommendArticles());
+
+        // 获取常见问题
+        View::assign('recommend_faq', $this->getRecommendFAQ());
+
+        return View::fetch('index');
+    }
+
+    // 获取banner数据
+    private function getBannerData()
+    {
+        $banners = SysBannerModel::with(['items'])
+            ->uniqueLabel([
+                'BANNER_67f61cd70e8e1', 
+                'BANNER_67f633023a5b3',
+                'BANNER_67f63f8ab5029', 
+                'BANNER_67f724ed81b1e', 
+                'BANNER_67f7392b4d83a',
+                'BANNER_67f7410e244fb',
+                'BANNER_67f76a96545f9',
+            ])
+            ->language($this->lang_id)
+            ->recommend(true)
+            ->enabled(true)
+            ->select();
+        $banner_map = [];
+        foreach ($banners as $v) {
+            $banner_map[$v->unique_label] = $v;
+        }
+        
+        // 处理焦点轮播图和产品分类
+        $data['focus_images']      = [];  // 焦点轮播图
+        $data['product_categorys'] = [];  // 产品分类信息
+        $data['featured_topics']   = [];  // 特色专题及公司实力
+        $data['video']             = [];  // 视频
+        $data['scenes']            = [];  // 场景介绍
+        $data['brand_story']       = [];  // 品牌故事
+        $data['data_statistics']   = [];  // 数据统计
+        if (!empty($banner_map)) {
+            $data['focus_images']      = $banner_map['BANNER_67f61cd70e8e1']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['product_categorys'] = $banner_map['BANNER_67f633023a5b3']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['product_categorys'] = $banner_map['BANNER_67f633023a5b3']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['featured_topics']   = $banner_map['BANNER_67f63f8ab5029']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['video']             = $banner_map['BANNER_67f724ed81b1e']->items->where('type', '=', 'video')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['scenes']            = $banner_map['BANNER_67f7392b4d83a']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['brand_story']       = $banner_map['BANNER_67f7410e244fb']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+            $data['data_statistics']   = $banner_map['BANNER_67f76a96545f9']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
+        }
+
+        return $data;
+    }
+
+    // 获取明星/热点产品
+    private function getFeaturedProducts()
+    {
+        $products = ProductModel::field([
+                'id',
+                'name',
+                'short_name',
+                'cover_image',
+            ])
+            ->language($this->lang_id)
+            ->enabled(true)
+            ->onSale(true)
+            ->onShelves(true)
+            ->hot(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        if ($products->isEmpty()) {
+            return [];
+        }
+
+        return $products->toArray();
+    }
+
+    // 获取推荐文章
+    private function getRecommendArticles()
+    {
+        $articles = ArticleModel::field([
+                'id',
+                'title',
+                'desc',
+                'image'
+            ])
+            ->language($this->lang_id)
+            ->enabled(true)
+            ->recommend(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->limit(6)
+            ->select();
+        if ($articles->isEmpty()) {
+            return [];
+        }
+
+        return $articles->toArray();
+    }
+
+    // 获取推荐问题
+    private function getRecommendFAQ()
+    {
+        $faqs = FaqModel::field([
+                'id',
+                'question',
+                'image',
+                'answer'
+            ])
+            ->language($this->lang_id)
+            ->recommend(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->limit(6)
+            ->select();
+        if ($faqs->isEmpty()) {
+            return [];
+        }
+        return $faqs->toArray();
     }
 }
diff --git a/app/index/lang/en-us.php b/app/index/lang/en-us.php
index 616c89c0..75fa39c3 100644
--- a/app/index/lang/en-us.php
+++ b/app/index/lang/en-us.php
@@ -1,5 +1,25 @@
 <?php
 
 return [
-    'home' => 'Home',
+    'header_navigation' => [
+        'product_categorys' => 'Products'
+    ],
+    'header_search'  => [
+        'history'     => 'Search History',
+        'hot_product' => 'Popular Products',
+    ],
+    'footer_navigation' => [
+        'product_categorys' => 'Product'
+    ],
+    'footer_contact' => 'Contact',
+    'index'          => [
+        'featured_products'     => 'Featured Products',
+        'view_all'              => 'View All',
+        'learn_more'            => 'Learn More',
+        'orico_technology'      => 'ORICO Technology',
+        'orico_technology_desc' => 'Designed to be just as easy to learn as iPhone.Chatting with friends.',
+        'faq'                   => 'FAQ',
+        'faq_short_desc'        => 'What are you most concerned about',
+        'faq_desc'              => 'Our customer support is available Manday to Friday 9am600pmAverage arswer time 24h',
+    ]
 ];
\ No newline at end of file
diff --git a/app/index/lang/zh-cn.php b/app/index/lang/zh-cn.php
index 34c3cb46..3ad53f3b 100644
--- a/app/index/lang/zh-cn.php
+++ b/app/index/lang/zh-cn.php
@@ -1,5 +1,25 @@
 <?php
 
 return [
-    'home' => '首页',
+    'header_navigation' => [
+        'product_categorys' => '产品列表'
+    ],
+    'header_search'  => [
+        'hot_product' => '热销产品',
+        'history'     => '搜索记录',
+    ],
+    'footer_navigation' => [
+        'product_categorys' => '产品'
+    ],
+    'footer_contact' => '联系我们',
+    'index'          => [
+        'featured_products'     => '明星产品/热点产品',
+        'view_all'              => '查看所有',
+        'learn_more'            => '了解更多',
+        'orico_technology'      => 'ORICO 技术',
+        'orico_technology_desc' => '强大功能、简单使用',
+        'faq'                   => '常见问题',
+        'faq_short_desc'        => '回答您最关心的问题',
+        'faq_desc'              => '客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内',
+    ]
 ];
\ No newline at end of file
diff --git a/app/index/model/ArticleCategoryModel.php b/app/index/model/ArticleCategoryModel.php
new file mode 100644
index 00000000..0f9d4da4
--- /dev/null
+++ b/app/index/model/ArticleCategoryModel.php
@@ -0,0 +1,19 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\ArticleCategoryBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 文章分类模型
+ * @mixin \think\Model
+ */
+class ArticleCategoryModel extends ArticleCategoryBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+}
diff --git a/app/index/model/ArticleLeaveMessageModel.php b/app/index/model/ArticleLeaveMessageModel.php
new file mode 100644
index 00000000..77e40652
--- /dev/null
+++ b/app/index/model/ArticleLeaveMessageModel.php
@@ -0,0 +1,19 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\ArticleLeaveMessageBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 文章留言模型
+ * @mixin \think\Model
+ */
+class ArticleLeaveMessageModel extends ArticleLeaveMessageBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+}
diff --git a/app/index/model/ArticleModel.php b/app/index/model/ArticleModel.php
new file mode 100644
index 00000000..4d6937aa
--- /dev/null
+++ b/app/index/model/ArticleModel.php
@@ -0,0 +1,37 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\ArticleBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 文章模型
+ * @mixin \think\Model
+ */
+class ArticleModel extends ArticleBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        return $query->where('language_id', '=', $language);
+    }
+
+    // 首页推荐状态范围查询
+    public function scopeRecommend($query, bool $stat = true)
+    {
+        return $query->where('recommend', '=', (int)$stat);
+    }
+
+    // 启用状态范围查询
+    public function scopeEnabled($query, bool $stat = true)
+    {
+        return $query->where('enabled', '=', (int)$stat);
+    }
+}
diff --git a/app/index/model/CountryModel.php b/app/index/model/CountryModel.php
new file mode 100644
index 00000000..58c91ac2
--- /dev/null
+++ b/app/index/model/CountryModel.php
@@ -0,0 +1,15 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\CountryBaseModel;
+
+/**
+ * 国家模型
+ * @mixin \think\Model
+ */
+class CountryModel extends CountryBaseModel
+{
+    //
+}
diff --git a/app/index/model/FaqModel.php b/app/index/model/FaqModel.php
new file mode 100644
index 00000000..89bfd5cc
--- /dev/null
+++ b/app/index/model/FaqModel.php
@@ -0,0 +1,31 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\FaqBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * FAQ模型
+ * @mixin \think\Model
+ */
+class FaqModel extends FaqBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        return $query->where('language_id', '=', $language);
+    }
+
+    // 推荐状态范围查询
+    public function scopeRecommend($query, bool $stat)
+    {
+        return $query->where('recommend', '=', (int)$stat);
+    }
+}
diff --git a/app/index/model/LanguageModel.php b/app/index/model/LanguageModel.php
new file mode 100644
index 00000000..a907a4e8
--- /dev/null
+++ b/app/index/model/LanguageModel.php
@@ -0,0 +1,15 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\LanguageBaseModel;
+
+/**
+ * 语言模型
+ * @mixin \think\Model
+ */
+class LanguageModel extends LanguageBaseModel
+{
+    //
+}
diff --git a/app/index/model/ProductCategoryModel.php b/app/index/model/ProductCategoryModel.php
new file mode 100644
index 00000000..ddc69e95
--- /dev/null
+++ b/app/index/model/ProductCategoryModel.php
@@ -0,0 +1,31 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\ProductCategoryBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 产品分类模型
+ * @mixin \think\Model
+ */
+class ProductCategoryModel extends ProductCategoryBaseModel
+{
+    // 启用软件删除
+    use SoftDelete;
+    // 软件删除时间字段
+    protected $deleteTime = 'deleted_at';
+
+    // 所属语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        $query->where('language_id', '=', $language);
+    }
+
+    // 显示的分类范围查询
+    public function scopeDisplayed($query)
+    {
+        $query->where('is_show', '=', 1);
+    }
+}
diff --git a/app/index/model/ProductModel.php b/app/index/model/ProductModel.php
new file mode 100644
index 00000000..2bf9fee7
--- /dev/null
+++ b/app/index/model/ProductModel.php
@@ -0,0 +1,49 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\ProductBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 产品模型
+ * @mixin \think\Model
+ */
+class ProductModel extends ProductBaseModel
+{
+    // 启用软件删除
+    use SoftDelete;
+    // 软件删除时间字段
+    protected $deleteTime = 'deleted_at';
+
+    // 所属语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        $query->where('language_id', '=', $language);
+    }
+
+    // 启用状态范围查询
+    public function scopeEnabled($query)
+    {
+        $query->where('status', '=', 1);
+    }
+
+    // 在售状态范围查询
+    public function scopeOnSale($query, bool $stat = true)
+    {
+        $query->where('is_sale', '=', (int)$stat);
+    }
+
+    // 上架状态范围查询
+    public function scopeOnShelves($query, bool $stat = true)
+    {
+        $query->where('is_show', '=', (int)$stat);
+    }
+
+    // 热销状态范围查询
+    public function scopeHot($query, bool $stat = true)
+    {
+        $query->where('is_hot', '=', (int)$stat);
+    }
+}
diff --git a/app/index/model/SysBannerItemModel.php b/app/index/model/SysBannerItemModel.php
new file mode 100644
index 00000000..860da226
--- /dev/null
+++ b/app/index/model/SysBannerItemModel.php
@@ -0,0 +1,25 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysBannerItemBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 横幅模型
+ * @mixin \think\Model
+ */
+class SysBannerItemModel extends SysBannerItemBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 启用状态范围查询
+    public function scopeEnabled($query)
+    {
+        $query->where('status', '=', 1);
+    }
+}
diff --git a/app/index/model/SysBannerModel.php b/app/index/model/SysBannerModel.php
new file mode 100644
index 00000000..0b46819d
--- /dev/null
+++ b/app/index/model/SysBannerModel.php
@@ -0,0 +1,53 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysBannerBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 横幅（分类）模型
+ * @mixin \think\Model
+ */
+class SysBannerModel extends SysBannerBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 关联横幅数据项
+    public function items()
+    {
+        return $this->hasMany(SysBannerItemModel::class, 'banner_id', 'id');
+    }
+
+    // 唯一标识范围查询
+    public function scopeUniqueLabel($query, string|array $unique_label)
+    {
+        if (is_array($unique_label)) {
+            $query->whereIn('unique_label', $unique_label);
+            return;
+        }
+        $query->where('unique_label', '=', $unique_label);
+    }
+
+    // 所属语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        $query->where('language_id', '=', $language);
+    }
+
+    // 首页推荐状态范围查询
+    public function scopeRecommend($query, bool $recommend = true)
+    {
+        $query->where('recommend', '=', (int)$recommend);
+    }   
+
+    // 启用状态范围查询
+    public function scopeEnabled($query, bool $enabled = true)
+    {
+        $query->where('status', '=', (int)$enabled);
+    }
+}
diff --git a/app/index/model/SysConfigGroupModel.php b/app/index/model/SysConfigGroupModel.php
new file mode 100644
index 00000000..f86be2ca
--- /dev/null
+++ b/app/index/model/SysConfigGroupModel.php
@@ -0,0 +1,19 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysConfigGroupBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 系统配置分组模型
+ * @mixin \think\Model
+ */
+class SysConfigGroupModel extends SysConfigGroupBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+}
diff --git a/app/index/model/SysConfigModel.php b/app/index/model/SysConfigModel.php
new file mode 100644
index 00000000..6f38c13c
--- /dev/null
+++ b/app/index/model/SysConfigModel.php
@@ -0,0 +1,25 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysConfigBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 系统配置模型
+ * @mixin \think\Model
+ */
+class SysConfigModel extends SysConfigBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 关联分组
+    public function group()
+    {
+        return $this->belongsTo(SysConfigGroupModel::class, 'group_id', 'id');
+    }
+}
diff --git a/app/index/model/SysNavigationItemModel.php b/app/index/model/SysNavigationItemModel.php
new file mode 100644
index 00000000..8bdcf1af
--- /dev/null
+++ b/app/index/model/SysNavigationItemModel.php
@@ -0,0 +1,20 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysNavigationItemBaseModel;
+
+/**
+ * 导航项模型
+ * @mixin \think\Model
+ */
+class SysNavigationItemModel extends SysNavigationItemBaseModel
+{
+    // 关联导航
+    public function navigation()
+    {
+        return $this->hasOne(SysNavigationModel::class, 'id', 'nav_id');
+    }
+}
+ 
\ No newline at end of file
diff --git a/app/index/model/SysNavigationModel.php b/app/index/model/SysNavigationModel.php
new file mode 100644
index 00000000..feb0b18e
--- /dev/null
+++ b/app/index/model/SysNavigationModel.php
@@ -0,0 +1,25 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysNavigationBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 导航模型
+ * @mixin \think\Model
+ */
+class SysNavigationModel extends SysNavigationBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 根据unique_label获取
+    public function scopeUniqueLabel($query, string $unique_label)
+    {
+        $query->where('unique_label', '=', $unique_label);
+    }
+}
diff --git a/app/index/route/v1.php b/app/index/route/route.php
similarity index 62%
rename from app/index/route/v1.php
rename to app/index/route/route.php
index 40a544ab..d89ce17a 100644
--- a/app/index/route/v1.php
+++ b/app/index/route/route.php
@@ -11,3 +11,15 @@
 use think\facade\Route;
 
 Route::get('/', 'Index/index');
+
+Route::group('product', function() {
+    // 产品列表页
+    Route::get('index/:id', 'Product/index')->name('product_index');
+    // 产品详情页
+    Route::get('detail/:id', 'Product/detail')->name('product_detail');
+    // 产品搜索页
+    Route::get('search', 'Product/search')->name('product_search');
+});
+
+// 数据迁移
+Route::get('/data/migration', 'DataMigration/index');
diff --git a/app/index/view/index/index.html b/app/index/view/index/index.html
new file mode 100644
index 00000000..5f39d797
--- /dev/null
+++ b/app/index/view/index/index.html
@@ -0,0 +1,382 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" type="text/css" href="static/index/css/index.css" />
+{/block}
+{block name="main"}
+<div class="orico_Page_index">
+    <div class="pageMain">
+        <!-- banner -->
+        {notempty name="focus_images"}
+        <div class="swiper-container bannerswiper">
+            <div class="swiper-wrapper">
+                {volist name="focus_images" id="focus"}
+                <div class="swiper-slide">
+                    <a href="{$focus.link}" target="_blank"><img src="{$focus.image}" alt="{$focus.title}"></a>
+                </div>
+                {/volist}
+            </div>
+            <!-- 如果需要分页器 -->
+            <div class="swiper-pagination"></div>
+            <!-- 如果需要导航按钮 -->
+            <div class="swiper-button-prev"></div>
+            <div class="swiper-button-next"></div>
+        </div>
+        {/notempty}
+        <!-- 产品分类信息 -->
+        {notempty name="product_categorys"}
+        <div class="catMain">
+            {volist name="product_categorys" id="cate"}
+            <a class="catit" href="{$cate.link}">
+                <img src="{$cate.image}" src="catIcoImg" />
+                <span class="catName" {notempty name="cate.title_txt_color"}style="color:{$cate.title_txt_color};"{/notempty}>{$cate.title}</span>
+            </a>
+            {/volist}
+        </div>
+        {/notempty}
+        <!-- 特色专题及公司实力 -->
+        {notempty name="featured_topics"}
+        <div class="featuredtopicsMain">
+            <div class="ftcontent">
+                {volist name="featured_topics" id="topic" mod="2"}
+                <a class="ftItme" href="{$topic.link}">
+                    {if condition="$mod == '1'"}
+                    <div class="ftItme_right">
+                        <img src="{$topic.image}" />
+                    </div>
+                    <div class="ftItme_left">
+                        <p>{$topic.title}</p>
+                        <div class="subtitle">
+                            <span>{:lang('index.view_all')} ></span>
+                            <div class="tpicture"></div>
+                        </div>
+                    </div>
+                    {else/}
+                    <div class="ftItme_left">
+                        <p>{$topic.title}</p>
+                        <div class="subtitle">
+                            <span>{:lang('index.view_all')}</span>
+                            <div class="tpicture"></div>
+                        </div>
+                    </div>
+                    <div class="ftItme_right">
+                        <img src="{$topic.image}" />
+                    </div>
+                    {/if}
+                </a>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+        <!-- 明星产品/热点产品 -->
+        {notempty name="featured_products"}
+        <div class="featuredProducts">
+            <p class="biaoti">{:lang('index.featured_products')}</p>
+            <div class="swiper fpSwiper">
+                <div class="swiper-wrapper">
+                    {volist name="featured_products" id="product"}
+                    <div class="swiper-slide picture">
+                        <a class="primg">
+                            <img src="{$product.cover_image}" />
+                        </a>
+                        <div class="fpptitle">{$product.name}</div>
+                        <div class="subtitle">{$product.short_name}</div>
+                        <a class="more">{:lang('index.learn_more')} ></a>
+                    </div>
+                    {/volist}
+                </div>
+                <div class="swiperasd">
+                    <div class="swiper-container1">
+                        <div class="slideshow-pag swiper-pagination"></div>
+                    </div>
+                    <div class="swiper-container swi1">
+                        <img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
+                        <img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/notempty}
+        <!-- 视频宣传 -->
+        {notempty name="video"}
+        <div class="hotProduct">
+            <div class="hotvideo">
+                <iframe src="{$video.video}" title="YouTube video player" style="width:100%;height:67rem;z-index:9999;" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen id="videoElement"></iframe>
+            </div>
+            <img src="{$video.image}" class="hotImg" />
+        </div>
+        {/notempty}
+        <!-- 场景介绍 -->
+        {notempty name="scenes"}
+        <div class="sceneIntroduction">
+            {volist name="scenes" id="scene"}
+            <div class="sceneitem">
+                <div class="sceneInfo">
+                    <p class="scenetitle" {notempty name="scene.title_txt_color"}style="color:{$scene.title_txt_color};"{/notempty}>{$scene.title}</p>
+                    <p class="subtitle" {notempty name="scene.desc_txt_color"}style="color:{$scene.desc_txt_color};"{/notempty}>{$scene.desc}</p>
+                    <a class="sceneMore" href="{$scene.link}">{:lang('index.learn_more')} ></a>
+                </div>
+                <div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
+            </div>
+            {/volist}
+        </div>
+        {/notempty}
+        <!-- orico科技 -->
+        <div class="oricoTechnology">
+            <p class="ottitle">{:lang('index.orico_technology')}</p>
+            <span class="otsbtitle">{:lang('index.orico_technology_desc')}</span>
+            <div class="beforeafter">
+                <div id="after"></div>
+                <div id="before"></div>
+                <div class="drag-circle"></div>
+            </div>
+        </div>
+        <!-- 品牌故事 -->
+        {notempty name="brand_story"}
+        <div class="brandStory">
+            <div class="swiper brandStoryswiper">
+                <div class="swiper-wrapper">
+                    {volist name="brand_story" id="story"}
+                    <div class="swiper-slide bsitem">
+                        <div class="itmImg">
+                            <img src="{$story.image}" class="bsImg" />
+                        </div>
+                        <div class="bsinf">
+                            <div class="bstitle" {notempty name="story.title_txt_color"}style="color:{$story.title_txt_color};"{/notempty}>{$story.title}</div>
+                            <div class="bssubtitle" {notempty name="story.desc_txt_color"}style="color:{$story.desc_txt_color};"{/notempty}>{$story.desc}</div>
+                            <a class="bsmore" href="{$story.link}">{:lang('index.learn_more')} ></a>
+                        </div>
+                    </div>
+                    {/volist}
+                </div>
+                <div class="swiperasd bs_swiperasd" id="timeline">
+                    <div class="bs_swcontainer">
+                        <div class="swiper-pagination bs_pagination"></div>
+                        <hr>
+                        <!-- <span class="time1">2021</span> -->
+                        <!-- <span class="time2">2022</span> -->
+                        <!-- <span class="time3">2023</span> -->
+                    </div>
+                    <div class="swiper-container bs_bts">
+                        <img class="slideshow-btn  swiper-button-next" src="static/index/temp_images/rightcheck.png" alt="" />
+                        <img class="slideshow-btn  swiper-button-prev " src="static/index/temp_images/lefta.png" alt="" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/notempty}
+        <!-- 数据统计-->
+         {notempty name="data_statistics"}
+        <div class="oricoDataStatistics">
+            <div class="odsmain">
+                {volist name="data_statistics" id="ods"}
+                <div class="odsItem">
+                    <h1 {notempty name="ods.desc_txt_color"}style="color:{$ods.desc_txt_color};"{/notempty}>{$ods.desc}</h1>
+                    <h3 {notempty name="ods.title_txt_color"}style="color:{$ods.title_txt_color};"{/notempty}>{$ods.title}</h3>
+                </div>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+        <!-- 文章轮播 -->
+         {notempty name="recommend_articles"}
+        <div class="oricoPub">
+            <div class="swiper pubswiper">
+                <div class="swiper-wrapper">
+                    {volist name="recommend_articles" id="article"}
+                    <div class="swiper-slide  pubSwitem">
+                        <a class="pubimgdiv" href="{:url('article/index', ['id' => $article.id])}">
+                            <img src="{$article.image}" class="pubimg" />
+                        </a>
+                        <a class="pubinfo">
+                            <span>{$article.title}</span>
+                        </a>
+                    </div>
+                    {/volist}
+                </div>
+                <div class="swiperasd pubswiperasd">
+                    <div class="swiper-container">
+                        <img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
+                        <img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/notempty}
+        <!-- FAQ-->
+         {notempty name="recommend_faq"}
+        <div class="oricoFQA">
+            <div class="fqaleft">
+                <h1 class="title">{:lang('index.faq')}</h1>
+                <p class="dec">{:lang('index.faq_short_desc')}</p>
+                <p class="sudec">{:lang('index.faq_desc')}</p>
+            </div>
+            <div class="fqaright">
+                <ul class="accordion">
+                    {volist name="recommend_faq" id="faq"}
+                    <li class="fqali">
+                        <div class="fqa-question">
+                            <h3>{$faq.question} </h3>
+                            <span class="xiala">+</span>
+                        </div>
+                        <div class="fqa-answer">
+                            <p>{$faq.answer|raw}</p>
+                        </div>
+                    </li>
+                    {/volist}
+                </ul>
+            </div>
+        </div>
+        {/notempty}
+        <!-- 底部固定提示 -->
+        <div class="oricofixd-info">
+            <div class="ofiinfo">We use cookies to ensure you get the best experience on our website. By
+                continuing to browse, you agree to our use of cookies.</div>
+            <div class="ofibt"><button>OK,got it!</button></div>
+            <div class="oficlose"><span class="close-btn">×</span></div>
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script>
+$(document).ready(function() {
+    let isDragging = false;
+    let startX;
+    let initialLeft;
+    $('.drag-circle').mousedown(function(e) {
+        isDragging = true;
+        startX = e.pageX;
+        initialLeft = $('.drag-circle').position().left;
+    });
+    $(document).mousemove(function(e) {
+        if (isDragging) {
+            const currentX = e.pageX;
+            const diffX = currentX - startX;
+            let newLeft = initialLeft + diffX;
+            const containerWidth = $('.beforeafter').width();
+            newLeft = Math.max(20, Math.min(containerWidth - 20, newLeft));
+            $('.drag-circle').css('left', newLeft);
+            $('#before').width(newLeft);
+        }
+    });
+    $(document).mouseup(function() {
+        isDragging = false;
+    });
+    // 底部关闭
+    $(".oficlose").on("click", function() {
+        $(".oricofixd-info").hide();
+    });
+});
+$(function() {
+    // banner轮播
+    var mySwiper = new Swiper('.bannerswiper', {
+        // 配置选项
+        loop: true,
+        autoplay: {
+            delay: 3000,
+        },
+        pagination: {
+            el: '.swiper-pagination',
+        },
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+    });
+    var fpSwiper = new Swiper(".fpSwiper", {
+        slidesPerView: 3,
+        spaceBetween: 30,
+        slidesPerGroup: 1,
+        loop: true,
+        autoplay: {
+            delay: 5000,
+            pauseOnMouseEnter: true,
+            disableOnInteraction: false,
+        },
+        slidesPerView: "auto",
+        centeredSlides: true,
+        loopFillGroupWithBlank: true,
+        loopAdditionalSlides: 3,
+        pagination: {
+            el: ".swiper-pagination",
+            type: "progressbar",
+        },
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
+    });
+    //品牌故事轮播
+    var brandStoryswiper = new Swiper(".brandStoryswiper", {
+        pagination: {
+            el: ".swiper-pagination",
+        },
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
+    });
+    // 宣传banner
+    var pubswiper = new Swiper(".pubswiper", {
+        loop: true,
+        autoplay: {
+            delay: 5000,
+            pauseOnMouseEnter: true,
+            disableOnInteraction: false,
+        },
+        //slidesPerView: 1,
+        slidesPerView: "auto",
+        centeredSlides: true,
+        spaceBetween: 32,
+        pagination: {
+            el: ".swiper-pagination",
+            click: true
+        },
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
+    });
+    // FAQ问答展开收起
+    $(".fqali").on('click', function() {
+        if ($(this).children("div.fqa-answer").is(':visible')) {
+            $(".fqali").removeClass('active');
+            $(".fqa-answer").hide();
+            $(".text-name").addClass('text-hidden');
+            $(".xiala").text('+');
+        } else {
+            $(".fqali").removeClass('active');
+            $(".fqa-answer").hide();
+            $(".text-name").addClass('text-hidden')
+            $(".xiala").text('+');
+            $(this).addClass('active');
+            $(this).children('div.fqa-answer').show();
+            $(this).children('div.fqa-question').find('span').text('-');
+            $(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
+        }
+    })
+
+
+    // 首先隐藏视频元素和加载中的图片  要放开注释
+    $("#hotvideo").hide();
+    // 监听视频的加载事件
+    setTimeout(function() {
+    	$("#hotvideo").on("load", function() {
+    		// 视频加载完成时，显示视频元素，隐藏加载中的图片
+    		$("#hotvideo").show();
+    		$("#hotImg").hide();
+    	});
+    }, 1000);
+    // 监听视频的加载失败事件
+    setTimeout(function() {
+    	$("#hotvideo").on("error", function() {
+    		// 视频加载失败时，显示加载中的图片，隐藏视频元素
+    		$("#hotImg").show();
+    		$("#videoElement").hide();
+    	});
+    }, 1500);
+});
+</script>
+{/block}
\ No newline at end of file
diff --git a/app/index/view/public/base.html b/app/index/view/public/base.html
new file mode 100644
index 00000000..b68be35a
--- /dev/null
+++ b/app/index/view/public/base.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		{block name="title"}<title>{$basic_config['website_seo_title']['value']}</title>{/block}
+		{block name="seo"}
+		<meta name="keywords" content="{$basic_config['website_seo_keyword']['value']}" />
+		<meta name="description" content="{$basic_config['website_seo_description']['value']}" />
+		{/block}
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" type="text/css" href="static/index/css/public.css" />
+		<link rel="stylesheet" type="text/css" href="static/index/css/fonts.css" />
+        <link rel="stylesheet" type="text/css" href="static/index/css/orico_header.css" />
+        <link rel="stylesheet" type="text/css" href="static/index/css/orico_footer.css" />
+		{block name="style"}{/block}
+		<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
+		<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
+		<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
+	</head>
+	<body>
+        {block name="header"}
+            {include file="public/header"/}
+        {/block}
+		{block name="main"}{/block}
+        {block name="footer"}
+            {include file="public/footer"/}
+        {/block}
+		{block name="script"}{/block}
+	</body>
+</html>
+</html>
\ No newline at end of file
diff --git a/app/index/view/public/footer.html b/app/index/view/public/footer.html
new file mode 100644
index 00000000..b337fc2d
--- /dev/null
+++ b/app/index/view/public/footer.html
@@ -0,0 +1,74 @@
+<footer class="orico_footer">
+    <div class="fotter">
+        <!--中间信息-->
+        <div class="footerMain">
+            <!-- 上面-->
+            <div class="foottxttop">
+                <!--ico -->
+                <a href="/">
+                    <img src="static/index/images/bottomlogo.png" class="footerico" />
+                </a>
+                <div class="foootCt">
+                    <p class="ftitle">{:lang('footer_navigation.product_categorys')}</p>
+                    <ul>
+                        {volist name="header_categorys" id="vo"}
+                        <li><a href="{:url('product_index', ['id' => $vo.id])}" class="fline">{$vo.name}</a></li>
+                        {/volist}
+                    </ul>
+                </div>
+                {if condition="!empty($footer_navigation)"}
+                {volist name="footer_navigation" id="vo"}
+                <div class="foootCt">
+                    <p class="ftitle">{$vo.name}</p>
+                    {if condition="!empty($vo.children)"}
+                    <ul>
+                        {volist name="vo.children" id="vc"}
+                        <li><a href="{$vo.link}" class="fline">{$vc.name}</a></li>
+                        {/volist}
+                    </ul>
+                    {/if}
+                </div>
+                {/volist}
+                {/if}
+                <div class="foootCt">
+                    <p class="ftitle">{:lang('footer_contact')}</p>
+                    {if condition="!empty($contact_config)"}
+                    <ul>
+                        {volist name="contact_config" id="vo"}
+                        <li>
+                            <a href="javascript:void(0);" class="fline">
+                            {if condition="$vo.type == 'image'"}
+                                <img src="{$vo.value}" {if condition="!empty($vo.extra)"}style="{$vo.extra}"{/if} />
+                            {else/}
+                                {$vo.value}
+                            {/if}
+                            </a>
+                        </li>
+                        {/volist}
+                    </ul>
+                    {/if}
+                </div>
+            </div>
+            <div class="foottxtbottom">
+                {if condition="!empty($media_config)"}
+                <div class="ftopicos">
+                    <ul>
+                        {volist name="media_config" id="vo"}
+                        <a href="{$vo.url.value}"><img src="{$vo.image.value}" {if condition="!empty($vo.image.extra)"}style="{$vo.image.extra}"{/if} /></a>
+                        {/volist}
+                    </ul>
+                </div>
+                {/if}
+                {if condition="!empty($basic_config.website_powerby)"}
+                <div class="ftcopyright">
+                    <span>{$basic_config.website_powerby.value}</span>
+                    {if condition="!empty($basic_config.website_icp)"}
+                    <a href="https://beian.miit.gov.cn/">（{$basic_config.website_icp.value}）</a>
+                    {/if}
+                </div>
+                {/if}
+                <!-- <div class="batext">粤公网安备 44030702002297号</div> -->
+            </div>
+        </div>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/app/index/view/public/header.html b/app/index/view/public/header.html
new file mode 100644
index 00000000..769856a0
--- /dev/null
+++ b/app/index/view/public/header.html
@@ -0,0 +1,200 @@
+<header class="header-PC">
+    <div id="header">
+        <!-- LOG -->
+        <div class="nav1">
+            <a>
+                <img src="static/index/images/logo.png" />
+            </a>
+        </div>
+        <!--顶部导航栏 -->
+        <div class="nav2">
+            <nav id="booNavigation" class="booNavigation">
+                <ul>
+                    {if condition="!empty($header_categorys)"}
+                    <li class="navItem">
+                        <a href="javascript:void(0);">{:lang('header_navigation.product_categorys')}</a>
+                        <img src="static/index/images/black-down.png" class="downimg" />
+                        <ol class="navItemConten">
+                            <!-- 左边子菜单-->
+                            <ul class="navItem_cyleft">
+                                {volist name="header_categorys" id="vo"}
+                                <li class="{$key == 0 ? 'it_active' : ''}">
+                                    <a href="javascript:void(0);">{$vo.name}</a>
+                                </li>
+                                {/volist}
+                            </ul>
+                            <!-- 右边子菜单-->
+                            {volist name="header_categorys" id="vo"}
+                            {if condition="$key == 0"}
+                            <div class="navItem_cyright" style="display: block;">
+                            {else/}
+                            <div class="navItem_cyright" style="display: none;">
+                            {/if}
+                                {volist name="vo.children" id="vc"}
+                                <dl class="nav_cyrightit">
+                                    <dt>
+                                        <a href="{:url('product_index', ['id' => $vc.id])}">{$vc.name}</a>
+                                    </dt>
+                                    {volist name="vc.children" id="vcc"}
+                                    <dd>
+                                        <a href="{:url('product_index', ['id' => $vcc.id])}">{$vcc.name}</a>
+                                    </dd>
+                                    {/volist}
+                                <dl>
+                                {/volist}
+                            </div>
+                            {/volist}
+                        </ol>
+                    {/if}
+                    {volist name="header_navigation" id="vo"}
+                    <li class="navItem">
+                        <a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
+                        {if condition="!empty($vo.children)"}
+                        <img src="static/index/images/black-down.png" class="downimg" />
+                        <!--下拉菜单 -->
+                        <ol class="navItemConten1">
+                            {volist name="vo.children" id="voc"}
+                            <li>
+                                <a href="{$vo.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
+                            </li>
+                            {/volist}
+                        </ol>
+                        {/if}
+                    </li>
+                    {/volist}
+                </ul>
+            </nav>
+        </div>
+        <!-- 顶部搜索/国家选择/商店-->
+        <div class="nav3">
+            <img src="static/index/images/icon-search.png" id="openModalBtn" class="searchimg" />
+            <div class="choesCountry">
+                <img src="static/index/images/icon-language.png" id="countrycheck" class="checkimg" />
+                <!--国家选择 -->
+                <div class="topCountry" id="top-country">
+                    <ul>
+                        <li class="closec">
+                            <span class="closecountrybt">×</span>
+                        </li>
+                        {volist name="header_languages" id="vo"}
+                        <a href="{$vo.lang_url}">
+                            <li>
+                                <div class="cico">
+                                    <img src="{$vo.lang_icon}" class="countryimg" />
+                                </div>
+                                <p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
+                            </li>
+                        </a>
+                        {/volist}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 搜索弹框-->
+    <div class="searchmodalMian" id="scmodal">
+        <div class="searchmodalct">
+            <span class="close-btn">×</span>
+            <input type="text" name="keywords" id="serrchinput" autocomplete="off" />
+            <!-- 历史记录 -->
+            <div class="searchhistory">
+                <p class="h_title">{:lang('header_search.history')}</p>
+                <ul></ul>
+            </div>
+            <div class="popProduct">
+                <p class="h_title">{:lang('header_search.hot_product')}</p>
+                <div class="popmain">
+                    {volist name="header_hot_products" id="vo"}
+                    <div class="popitem">
+                        <a href="{:url('product_detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}" class="popimg" /></a>
+                        <div class="productName">{$vo.name}</div>
+                    </div>
+                    {/volist}
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+<script>
+$(document).ready(function() {
+    // 搜索历史记录处理
+    function history(keywords) {
+        var history = localStorage.getItem('header_search_keywords');
+        if (!history) {
+            history = [];
+        } else {
+            history = JSON.parse(history);
+        }
+
+        // 记录搜索关键词
+        if (keywords) {
+            if (history.includes(keywords)) {
+                history.splice(history.indexOf(keywords), 1);
+            }
+            history.unshift(keywords);
+            if (history.length > 3) {
+                history.pop();
+            }
+            localStorage.setItem('header_search_keywords', JSON.stringify(history));
+            return history;
+        }
+
+        // 回显搜索历史记录
+        history.forEach(function(item) {
+            $('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
+        });
+
+        return history;
+    }
+	// 封装一个函数用于处理鼠标悬停显示和隐藏内容
+	function handleHover($element, $content) {
+		$element.mouseenter(function() {
+			$content.stop(true, true).slideDown(400);
+		}).mouseleave(function() {
+			$content.stop(true, true).slideUp(400);
+		});
+	}
+	// 处理第一个导航项
+	handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
+	// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
+	$('.navItem_cyleft li').mouseenter(function() {
+		$(this).addClass('it_active').siblings().removeClass('it_active');
+        $('.navItem_cyright').hide();
+        $('.navItem_cyright').eq($(this).index()).show();
+	});
+	// 处理第5 - 8个导航项
+	for (let i = 4; i < 8; i++) {
+		handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
+	}
+	// 点击搜索
+	$('#openModalBtn').click(function() {
+		$('#scmodal').toggle();
+	});
+	$('.close-btn').click(function() {
+		$('#scmodal').hide();
+	});
+    // 搜索历史记录回显
+    history();
+    // 执行搜索
+    $('#serrchinput').keydown(function(event) {
+        if (event.originalEvent.keyCode == 13) {
+            var keywords = $(this).val();
+            if (keywords == '') {
+                return false;
+            }
+            // 记录搜索关键词
+            history(keywords);
+
+            // 跳转到搜索页面
+            window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
+        }
+    });
+	// 点击选择国家
+	$('#countrycheck').click(function() {
+		$('#top-country').toggle();
+	});
+	$('.closecountrybt').click(function() {
+		$('#top-country').hide();
+	});
+});
+</script>
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index 3f2817f0..ef1960ca 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/static/index/css/OEMandODM.css b/public/static/index/css/OEMandODM.css
new file mode 100755
index 00000000..8f61ac59
--- /dev/null
+++ b/public/static/index/css/OEMandODM.css
@@ -0,0 +1,153 @@
+.orico_Page_OEMandODM {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .bdimg1 {
+  width: 100%;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotbt1 {
+  font-size: 2rem;
+  font-family: Montserrat-Bold, Montserrat;
+  padding-bottom: 4.0625rem;
+  padding-top: 5.5rem;
+  font-weight: 700;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 {
+  width: 75%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 6.25rem;
+  align-items: baseline;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item {
+  width: 21rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbic1 {
+  width: 6.25rem;
+  height: 6.25rem;
+  margin-bottom: 1.25rem;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbtp1 {
+  font-size: 18px;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  padding-bottom: 18px;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbts1 {
+  text-align: center;
+  font-size: 16px;
+  font-family: Montserrat-Medium, Montserrat;
+  color: #9e9e9f;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 {
+  padding-bottom: 5.625rem;
+  background: #fff;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .iotbt1 {
+  font-size: 32px;
+  font-family: Montserrat-Bold, Montserrat;
+  padding-bottom: 65px;
+  padding-top: 88px;
+  font-weight: 700;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs {
+  width: 70%;
+  padding-bottom: 1.25rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div {
+  width: 20rem;
+  height: 15.9375rem;
+  text-align: center;
+  background: #fff;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div .fdimgs-div-span {
+  position: absolute;
+  bottom: 0px;
+  z-index: 9999;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(200, 200, 200, 0.1));
+  height: 45px;
+  width: 100%;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div .fdtitle {
+  font-size: 18px;
+  font-weight: bold;
+  z-index: 9999;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  color: #fff;
+  line-height: 45px;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .iotbt1 {
+  font-size: 32px;
+  font-family: Montserrat-Bold, Montserrat;
+  padding-bottom: 65px;
+  padding-top: 88px;
+  font-weight: 700;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .fdimgs {
+  width: 70%;
+  padding-bottom: 110px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .fdimgs img {
+  border-style: none;
+  font-size: 0;
+}
diff --git a/public/static/index/css/achievement.css b/public/static/index/css/achievement.css
new file mode 100755
index 00000000..82acd66d
--- /dev/null
+++ b/public/static/index/css/achievement.css
@@ -0,0 +1,232 @@
+.orico_Page_achievement {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_achievement .achievementMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.orico_Page_achievement .achievementMain .acvImg {
+  width: 100%;
+  height: auto;
+}
+.orico_Page_achievement .achievementMain .achInfo {
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: #fff;
+  height: 28.75rem;
+}
+.orico_Page_achievement .achievementMain .achInfo .title {
+  height: 11.25rem;
+  line-height: 11.25rem;
+  font-size: 2rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  color: #000000;
+  text-align: center;
+}
+.orico_Page_achievement .achievementMain .achInfo .achNums {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 101.25rem;
+}
+.orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju .title1 {
+  margin-top: 2.5rem;
+  font-size: 2rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  color: #000000;
+}
+.orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju .subtitle1 {
+  margin-top: 1rem;
+  font-size: 1.125rem;
+  font-family: Montserrat-Regular, Montserrat;
+  font-weight: 400;
+  color: #707070;
+}
+.orico_Page_achievement .achievementMain .achTimes {
+  width: 100%;
+  height: auto;
+  position: relative;
+  background: #f2f2f2;
+  font-family: Montserrat;
+  padding-bottom: 10%;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent {
+  width: 80%;
+  max-width: 101.25rem;
+  margin: 0 auto;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .title {
+  height: 11.25rem;
+  line-height: 11.25rem;
+  font-size: 2rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  color: #000000;
+  text-align: center;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist {
+  width: 100%;
+  display: flex;
+  max-width: 101.25rem;
+  flex-direction: row;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-time {
+  width: 15%;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-time .event_year {
+  width: 6.25rem;
+  text-align: center;
+  float: left;
+  margin-top: 0.625rem;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-time .event_year li {
+  height: 2.9rem;
+  line-height: 2.9rem;
+  border-left: 1px solid #d4d4d4;
+  font-size: 1.125rem;
+  color: #828282;
+  cursor: pointer;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-time .event_year li.current {
+  border-left: 4px solid #0066ff;
+  color: #004bfa;
+  font-weight: 600;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con {
+  width: 85%;
+  height: 41.5625rem;
+  background-color: white;
+  border-radius: 1rem;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list {
+  width: 98%;
+  height: 91%;
+  overflow: auto;
+  margin: 1.875rem 0.625rem;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list {
+  width: 98%;
+  background: url(../achievementimg/greyline.png) 50px 0 repeat-y;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div {
+  overflow: hidden;
+  color: black;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div h3 {
+  margin: 0 0 0 2.1875rem;
+  padding-left: 2.5rem;
+  background: url(../achievementimg/greyyuandian.png) 3px 3px no-repeat;
+  height: 2.375rem;
+  font-size: 1.25rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  color: #000000;
+  line-height: 1.875rem;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div .backgroundimg {
+  background: url(../achievementimg/yaundian.png) 3px 3px no-repeat !important;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li p {
+  width: 90%;
+  margin-left: 1.5rem;
+  display: inline-block;
+  padding-left: 0.625rem;
+  line-height: 1.5625rem;
+  font-size: 1rem;
+  margin-bottom: 0.625rem;
+  font-family: Montserrat-Medium, Montserrat;
+  font-weight: 500;
+  color: #707070;
+  line-height: 1.25rem;
+}
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li p span {
+  font-family: Montserrat-Medium, Montserrat;
+  width: 100%;
+  text-align: left;
+  padding: 0 0.9375rem 0.625rem 0.9375rem;
+  background: #fff;
+  margin: 0;
+  margin-left: 1.875rem;
+  display: block;
+  float: left;
+}
+.orico_Page_achievement .achievementMain .tech {
+  background: #fff;
+  width: 100%;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent {
+  width: 80%;
+  max-width: 101.25rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 8.125rem;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .title {
+  height: 11.25rem;
+  line-height: 11.25rem;
+  font-size: 2rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  color: #000000;
+  text-align: center;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon {
+  height: 21.875rem;
+  background-color: #f2f2f2;
+  display: flex;
+  border-radius: 1rem;
+  margin-top: 1.25rem;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon div {
+  width: 50%;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon .text img {
+  margin-top: 5rem;
+  margin-left: 4.0625rem;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon .text .year {
+  margin-left: 4.0625rem;
+  margin-top: 2.5rem;
+  font-size: 1.75rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  color: #000000;
+  line-height: 1.625rem;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon .text .context {
+  margin-left: 65px;
+  width: 80%;
+  font-size: 16px;
+  font-family: Montserrat-Medium, Montserrat;
+  font-weight: 500;
+  color: #707070;
+  line-height: 26px;
+  margin-top: 14px;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon .text .context p {
+  font-family: inherit;
+}
+.orico_Page_achievement .achievementMain .tech .techcontent .techcon .tech-img img {
+  margin: 1.5625rem 0 1.5625rem 1.5625rem;
+}
diff --git a/public/static/index/css/animate.min.css b/public/static/index/css/animate.min.css
new file mode 100755
index 00000000..f3f10688
--- /dev/null
+++ b/public/static/index/css/animate.min.css
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -https://daneden.github.io/animate.css/
+ * Version - 3.7.2
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2019 Daniel Eden
+ */
+
+@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion:reduce),(print){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}}
\ No newline at end of file
diff --git a/public/static/index/css/articleDetail.css b/public/static/index/css/articleDetail.css
new file mode 100755
index 00000000..03a31f15
--- /dev/null
+++ b/public/static/index/css/articleDetail.css
@@ -0,0 +1,212 @@
+.orico_Page_articleDetail {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_articleDetail .articleDetailMain {
+  width: 75%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 2.6rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft {
+  width: calc(100% - 1.5rem - 25rem);
+  min-height: 650px;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  float: left;
+  margin-right: 1.25rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .blog_title {
+  margin: 2.5rem;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 2.5rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .blog_title h2 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 2.125rem;
+  color: #252525;
+  margin-bottom: 1.0625rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .blog_title p {
+  color: #929292;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .blog_content {
+  margin: 2.5rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .blog_content p {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  color: #252525;
+  margin-bottom: 0.625rem;
+  text-indent: 0 !important;
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .blog_content img {
+  max-width: 100%;
+  margin: 0 auto;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright {
+  width: 25rem;
+  position: fixed;
+  top: 100px;
+  right: 12.5%;
+  z-index: 10;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .blog_share {
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  float: left;
+  position: relative;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .blog_share h3 {
+  font-size: 1rem;
+  line-height: 2.125rem;
+  color: #959595;
+  font-weight: bold;
+  padding: 1.25rem 1.875rem;
+  border-bottom: 1px solid #e8e8e8;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .clearfix {
+  overflow: hidden;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .share_list {
+  padding: 1.875rem;
+  display: flex;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .share_list .atdit {
+  float: left;
+  margin-right: 3.125rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .share_list .atdit img {
+  margin: 0 auto;
+  display: block;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply {
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  float: left;
+  margin-top: 1.25rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply h3 {
+  font-size: 1rem;
+  line-height: 2.125rem;
+  color: #959595;
+  font-weight: bold;
+  padding: 1.25rem 1.875rem;
+  border-bottom: 1px solid #e8e8e8;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply .itinp {
+  background: #f2f2f2;
+  border: none;
+  border-radius: 8px;
+  height: 48px;
+  box-shadow: none;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply form {
+  width: auto;
+  height: auto;
+  padding: 1.25rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply form span {
+  font-size: 0.875rem;
+  font-weight: bold;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply form input {
+  width: 98%;
+  height: 2rem !important;
+  border: 1px solid #dbdbdb;
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .repply form textarea {
+  text-indent: 10px;
+  width: 98%;
+  padding: 10px 0;
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+  border: 1px solid #dbdbdb;
+}
+.orico_Page_articleDetail .articleDetailMain .atmright .comment_btn {
+  margin: 1.25rem 1.25rem;
+  width: auto;
+  height: 2.75rem;
+  line-height: 2.75rem;
+  background: #009fdf;
+  color: #ffffff;
+  text-align: center;
+  cursor: pointer;
+}
+.orico_Page_articleDetail .xq {
+  width: 75%;
+  margin: 0 auto;
+  background: #f1f1f1;
+  display: flex;
+}
+.orico_Page_articleDetail .xq .love1 {
+  margin-top: 5%;
+}
+.orico_Page_articleDetail .xq .love1 .tt {
+  height: 5rem;
+}
+.orico_Page_articleDetail .xq .love1 p {
+  font-size: 1.4em;
+  color: #101010;
+  font-weight: bold;
+  text-align: center;
+}
+.orico_Page_articleDetail .xq .love1 img {
+  width: 100%;
+  display: block;
+}
+.orico_Page_articleDetail .xq .love2 {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.orico_Page_articleDetail .xq .love2 li {
+  width: 31%;
+  margin-right: 3.5%;
+  float: left;
+}
+.orico_Page_articleDetail .xq .love2 li .lvtit {
+  font-size: 0.75rem;
+  color: #444;
+  margin-top: 1.1875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orico_Page_articleDetail .xq .love2 li .lvimg {
+  width: 100%;
+  height: 280px;
+  position: relative;
+  overflow: hidden;
+}
+.orico_Page_articleDetail .xq .love2 li .lvimg img {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+}
+.orico_Page_articleDetail .xq .love2 .lvimg img:hover {
+  transition: all 0.2s linear;
+  -webkit-transition: all 0.2s linear;
+  transform: scale3d(1.2, 1.2, 1);
+}
diff --git a/public/static/index/css/brand.css b/public/static/index/css/brand.css
new file mode 100755
index 00000000..67b10c1e
--- /dev/null
+++ b/public/static/index/css/brand.css
@@ -0,0 +1,112 @@
+.orico_Page_brand {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_brand .brandMain {
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_brand .brandMain .img-responsive {
+  height: auto;
+  max-width: 100%;
+}
+.orico_Page_brand .brandMain .our_brand_con {
+  display: flex;
+  flex-direction: column;
+  padding-top: 5rem;
+  background: #ffffff;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg {
+  width: 80%;
+  margin: 0 auto;
+  max-width: 101.25rem;
+  padding: 5rem 0;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .Table-Cell {
+  width: 50%;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .Table-Cell hr {
+  z-index: 99;
+  width: 5%;
+  height: 4px;
+  background-color: blue;
+  position: unset;
+  margin-bottom: 40px;
+  margin-left: 10%;
+  margin-top: 5px;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .Table-Cell .title {
+  margin-left: 10%;
+  font-size: 24px;
+  font-weight: 600;
+  color: #000000;
+  line-height: 20px;
+  font-family: Montserrat-Bold, Montserrat;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .Table-Cell p {
+  font-family: Montserrat-Medium, Montserrat;
+  font-size: 14px;
+  color: #707070;
+  line-height: 22px;
+  margin-left: 10%;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .Table-Cell .des {
+  width: 80%;
+  margin-top: 20px;
+}
+.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .right img {
+  margin: 0 auto;
+  margin-left: 10%;
+}
+.orico_Page_brand .brandMain .dis_bril_bg {
+  background: #f2f2f2;
+  padding: 4.2% 0;
+  overflow: hidden;
+}
+.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con {
+  width: 80%;
+  max-width: 101.25rem;
+  background: #fff;
+  height: 28.125rem;
+  overflow: hidden;
+  display: flex;
+  border-radius: 1rem;
+  margin: 0 auto;
+  text-align: center;
+}
+.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .iconimg {
+  margin: 0 auto;
+  margin-top: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-top: 2.5rem;
+}
+.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .title p {
+  font-family: Montserrat-Bold, Montserrat;
+}
+.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .subtitle {
+  width: 80%;
+  font-size: 0.875rem;
+  color: #707070;
+  font-family: Montserrat-Medium, Montserrat;
+  margin-top: 2.5rem;
+  margin-left: 10%;
+}
+.orico_Page_brand .brandMain .dis_bril_bg .dis_bril_con .subtitle p {
+  font-family: Montserrat-Medium;
+  line-height: 22px;
+}
diff --git a/public/static/index/css/bussiness.css b/public/static/index/css/bussiness.css
new file mode 100755
index 00000000..d0af630b
--- /dev/null
+++ b/public/static/index/css/bussiness.css
@@ -0,0 +1,168 @@
+.orico_Page_bussiness {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_bussiness .bussinessMain {
+  width: 100%;
+  background: #f2f2f2;
+  position: relative;
+}
+.orico_Page_bussiness .bussinessMain .bd_main {
+  max-width: 1366px;
+  background: #fff;
+  border-radius: 16px;
+  padding: 70px 2.4375rem;
+  margin: 40px auto;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .sfbt1 {
+  font-size: 24px;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  text-align: center;
+  padding-bottom: 55px;
+  color: #000;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 21px;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin-right: 10px;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .itlable {
+  font-size: 14px;
+  font-family: Montserrat-Bold, Montserrat;
+  color: #000000;
+  font-weight: bold;
+  padding-bottom: 10px;
+  width: fit-content;
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: 5px;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .itlable .redtag {
+  position: absolute;
+  right: -10px;
+  top: 0px;
+  color: #ee2f53;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .itinp {
+  background: #f2f2f2;
+  border-radius: 8px;
+  height: 48px;
+  border: none;
+  box-shadow: none;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .form-control {
+  display: block;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .sfbchecks {
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .sfbchecks .sfbcheckboxlist {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .sfbchecks .sfbcheckboxlist .cit {
+  width: 100%;
+  font-size: 14px;
+  font-family: Montserrat-Regular, Montserrat;
+  color: #000;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+  font-weight: 400;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .sfbchecks .sfbcheckboxlist .cit .sfbcheckboxit {
+  margin: 0;
+  border: 1px solid #ccc;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  margin-right: 10px;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bd_ct .bd_from .theit .bditem .ittextarea {
+  height: 200px;
+  padding: 15px;
+  background: #f2f2f2;
+  border: none;
+  border-radius: 8px;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .bttj {
+  font-size: 14px;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  width: 212px;
+  padding: 15px 15px;
+  background: #004bfa;
+  border-radius: 28px;
+  color: #fff;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 10px;
+  cursor: pointer;
+}
+.orico_Page_bussiness .bussinessMain .bd_main .error {
+  border: 1px solid #ff4155 !important;
+}
+.orico_Page_bussiness .csunbmit {
+  height: 35px;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+.orico_Page_bussiness .submitBtn {
+  width: 75px;
+  height: 30px;
+  line-height: 26px;
+  background-color: #339b53;
+  text-align: center;
+  display: block;
+  color: #ffffff;
+  font-size: 12px;
+  border-radius: 6px;
+  float: left;
+}
+.orico_Page_bussiness .cli {
+  border-bottom: 1px dashed #ccc;
+  text-align: left;
+  font-size: 12px;
+}
+.orico_Page_bussiness .ccontent {
+  width: 98%;
+  padding: 10px;
+  background: #f6f9fb;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+}
diff --git a/public/static/index/css/category.css b/public/static/index/css/category.css
new file mode 100755
index 00000000..ef94f887
--- /dev/null
+++ b/public/static/index/css/category.css
@@ -0,0 +1,177 @@
+.orico_Page_category {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_category .categoryMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.orico_Page_category .categoryMain .categorybgimg {
+  width: 100%;
+  height: auto;
+}
+.orico_Page_category .categoryMain .tabs {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4%;
+}
+.orico_Page_category .categoryMain .tabs .tabitme {
+  padding: 10px 20px;
+  font-size: 1.5em;
+  font-weight: bold;
+  cursor: pointer;
+}
+.orico_Page_category .categoryMain .tabs .tabitme.on {
+  color: #009fdf;
+}
+.orico_Page_category .categoryMain .categorySearch {
+  width: 67%;
+  height: 3rem;
+  margin: 2rem auto;
+  position: relative;
+}
+.orico_Page_category .categoryMain .categorySearch .search_icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+  position: absolute;
+  left: 1.875rem;
+  top: 0.9375rem;
+  background: url(../categoryImg/search.png);
+  z-index: 9;
+}
+.orico_Page_category .categoryMain .categorySearch .search {
+  width: 100%;
+  height: 3rem;
+  line-height: 2.875rem;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.125rem;
+  text-indent: 3.75rem;
+  background: #fff;
+  color: #414446;
+  font-size: 0.875rem;
+}
+.orico_Page_category .categoryMain .tabConten {
+  width: 80%;
+  max-width: 101.25rem;
+  margin: 0 auto;
+  position: relative;
+  background: #fff;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain {
+  position: relative;
+  margin: 2% 0;
+  width: 100%;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem {
+  float: left;
+  width: 29.1%;
+  height: auto;
+  margin: 0 0 1.5rem 1.5rem;
+  background: #f5f5f5;
+  padding: 1rem;
+  position: relative;
+  min-height: 32rem;
+  overflow: hidden;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem a {
+  color: #000;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: all 0.2s linear;
+  -webkit-transition: all 0.2s linear;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem a img {
+  width: 100%;
+  max-height: 18.75rem;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem a h3 {
+  color: #252525;
+  font-size: 1.25rem;
+  font-weight: bold;
+  line-height: 1.875rem;
+  margin: 0.75rem 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  max-height: 4rem;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem a p {
+  height: 4.5rem;
+  overflow: hidden;
+  color: #929292;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin-bottom: 0.75rem;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem span {
+  color: #929292;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin-bottom: 0.75rem;
+  position: absolute;
+  bottom: 1rem;
+}
+.orico_Page_category .categoryMain .tabConten .Page {
+  zoom: 1;
+  text-align: center;
+  color: #555;
+  clear: both;
+  padding-bottom: 2rem;
+}
+.orico_Page_category .categoryMain .tabConten .Page span {
+  padding: 0px 0px;
+  display: inline-block;
+}
+.orico_Page_category .categoryMain .tabConten .Page .p_page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_category .categoryMain .tabConten .Page .p_page .a_prev,
+.orico_Page_category .categoryMain .tabConten .Page .p_page .a_next {
+  display: inline-block;
+  width: 10px;
+  height: 21px;
+}
+.orico_Page_category .categoryMain .tabConten .Page .p_page .a_prev {
+  background: url(../categoryImg/pfl.png) no-repeat;
+  margin-right: 10px;
+  padding: 0 10px;
+}
+.orico_Page_category .categoryMain .tabConten .Page .p_page .a_next {
+  background: url(../categoryImg/prh.png) no-repeat;
+  margin-left: 10px;
+  padding: 0 10px;
+}
+.orico_Page_category .categoryMain .tabConten .Page .p_page .num a {
+  display: inline-block;
+  width: 34px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  color: #444;
+}
+.orico_Page_category .categoryMain .tabConten .Page .p_page .num a.a_cur,
+.orico_Page_category .categoryMain .tabConten .Page .p_page .num a:hover {
+  background: #444;
+  color: #fff;
+}
diff --git a/public/static/index/css/contact.css b/public/static/index/css/contact.css
new file mode 100755
index 00000000..4319b927
--- /dev/null
+++ b/public/static/index/css/contact.css
@@ -0,0 +1,165 @@
+.orico_Page_contact {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f1f1f1;
+}
+.orico_Page_contact .contactMain {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.orico_Page_contact .contactMain .contactImg {
+  height: auto;
+  width: 100%;
+}
+.orico_Page_contact .contactMain .contact_c {
+  width: 75%;
+  margin: 0 auto;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact {
+  background-color: #fff;
+  border-radius: 1.5rem;
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 4rem;
+  margin-top: 3rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info {
+  width: 575px;
+  margin-right: 5.5rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .title {
+  color: #000;
+  display: block;
+  width: 100%;
+  font-family: "Montserrat-Bold";
+  font-size: 1.5rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all {
+  margin-top: 40px;
+  border-top: 1px solid #e3e3e3;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list {
+  display: flex;
+  padding-top: 2.3125rem;
+  padding-bottom: 2.3125rem;
+  border-bottom: 1px solid #e3e3e3;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .title {
+  font-size: 0.875rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .list_img {
+  width: 3rem;
+  height: 3rem;
+  margin-right: 1rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .list_img img {
+  width: inherit;
+  height: inherit;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .list_right {
+  width: 31.875rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .list_right .des {
+  font-size: 0.875rem;
+  color: #000;
+  line-height: 1.5rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .sub_list {
+  width: 15.1875rem;
+  margin-right: 1.5rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .sub_list .title {
+  font-size: 0.875rem;
+  font-family: "Montserrat-Bold";
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .info .info_all .list .sub_list .des {
+  font-size: 0.875rem;
+  color: #000;
+  line-height: 1.5rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question {
+  width: 35.9375rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .title {
+  font-size: 1.5rem;
+  color: #000;
+  display: block;
+  width: 100%;
+  font-family: "Montserrat-Bold";
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list {
+  margin-top: 1.5rem;
+  font-size: 1.5rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .title {
+  font-family: "Montserrat-Bold";
+  font-size: 0.875rem;
+  padding-bottom: 0.3125rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .title .f_red {
+  color: #ff0000;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .itinp {
+  background: #f2f2f2;
+  box-shadow: none;
+  border: none;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .ittextarea {
+  height: 100px;
+  background: #f2f2f2;
+  border: none;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .form_input input,
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .form_input textarea {
+  background: #f2f2f2;
+  border-radius: 8px;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .form_input input {
+  margin-top: 0.5rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  width: calc(100% - 32px);
+  line-height: 1rem;
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .form_input textarea {
+  margin-top: 0.5rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  width: calc(100% - 32px);
+}
+.orico_Page_contact .contactMain .contact_c .all_contact .question .question_form .list .contact_button {
+  padding: 0.9375rem 2.5rem;
+  border-radius: 1.75rem;
+  font-size: 0.875rem;
+  background-color: #004bfa;
+  color: #fff;
+  font-family: "Montserrat-Bold";
+  display: inline-block;
+  cursor: pointer;
+}
+.orico_Page_contact .contactMain .contact_c .become_dis {
+  padding-top: 2rem;
+  padding-bottom: 1.625rem;
+  font-size: 1.125rem;
+  width: 100%;
+  text-align: center;
+  color: #004bfa;
+  background-color: #fff;
+  border-radius: 0.75rem;
+  margin-top: 1.5rem;
+  font-family: "Montserrat-SemiBold";
+}
+.orico_Page_contact .contactMain .contact_c .become_dis .text_blue {
+  color: #004bfa;
+}
+.orico_Page_contact .contactMain .contact_c .become_dis .text_blue a:visited {
+  text-decoration: none;
+}
diff --git a/public/static/index/css/distributor.css b/public/static/index/css/distributor.css
new file mode 100755
index 00000000..d6ff554f
--- /dev/null
+++ b/public/static/index/css/distributor.css
@@ -0,0 +1,125 @@
+.orico_Page_distributor {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_distributor .distributorMain {
+  max-width: 85.375rem;
+  max-height: 78.75rem;
+  background: #fff;
+  border-radius: 1rem;
+  padding: 4.375rem 2.4375rem;
+  margin: 2.5rem auto;
+}
+.orico_Page_distributor .distributorMain .redtag {
+  position: absolute;
+  right: -10px;
+  top: 0px;
+  color: #ee2f53;
+}
+.orico_Page_distributor .distributorMain .t1 {
+  font-size: 1.5rem;
+  color: #004bfa;
+  padding-bottom: 1rem;
+  text-align: center;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: 700;
+}
+.orico_Page_distributor .distributorMain .s1 {
+  font-size: 1rem;
+  color: #707070;
+  padding-bottom: 0.3125rem;
+  font-weight: 500;
+  text-align: center;
+}
+.orico_Page_distributor .distributorMain .s2 {
+  padding-bottom: 55px;
+}
+.orico_Page_distributor .distributorMain .bd_ct {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.orico_Page_distributor .distributorMain .bd_ct .thimg {
+  width: 40.1875rem;
+  height: 41.125rem;
+  margin-right: 1.5rem;
+}
+.orico_Page_distributor .distributorMain .bd_ct .thimg .bdimg {
+  width: 100%;
+  height: 100%;
+}
+.orico_Page_distributor .distributorMain .bd_from {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.orico_Page_distributor .distributorMain .bd_from .theit {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+}
+.orico_Page_distributor .distributorMain .bd_from .theit .bditem {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin-right: 0.625rem;
+}
+.orico_Page_distributor .distributorMain .bd_from .theit .bditem .itlable {
+  font-size: 0.875rem;
+  font-family: Montserrat-Bold, Montserrat;
+  color: #000000;
+  font-weight: bold;
+  padding-bottom: 0.625rem;
+  width: fit-content;
+  position: relative;
+}
+.orico_Page_distributor .distributorMain .bd_from .theit .bditem select {
+  border: 1px solid #f2f2f2;
+}
+.orico_Page_distributor .distributorMain .bd_from .theit .bditem1 {
+  width: 100%;
+}
+.orico_Page_distributor .distributorMain .bd_from .form-control {
+  display: block;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+.orico_Page_distributor .distributorMain .itinp {
+  background: #f2f2f2;
+  border: none;
+  border-radius: 0.5rem;
+  height: 3rem;
+  box-shadow: none;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_distributor .distributorMain .ittextarea {
+  height: 6.25rem;
+  padding: 0.9375rem;
+  background: #f2f2f2;
+  border: none;
+  border-radius: 0.5rem;
+  font-family: Montserrat-Regular, Montserrat;
+}
+.orico_Page_distributor .distributorMain .bttj {
+  font-size: 0.875rem;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  width: 10rem;
+  padding: 1.2rem 3.75rem;
+  background: #004bfa;
+  border-radius: 1.75rem;
+  color: #fff;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 2.5rem;
+  cursor: pointer;
+}
diff --git a/public/static/index/css/download.css b/public/static/index/css/download.css
new file mode 100755
index 00000000..99416947
--- /dev/null
+++ b/public/static/index/css/download.css
@@ -0,0 +1,285 @@
+.orico_Page_download {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_download .downloadMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.orico_Page_download .downloadMain .topimg {
+  width: 100%;
+  position: relative;
+}
+.orico_Page_download .downloadMain .topimg img {
+  width: 100%;
+}
+.orico_Page_download .downloadMain .topimg .banner_title {
+  font-size: 3.5rem;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  color: #fff;
+  top: 50%;
+  height: 56px;
+  line-height: 56px;
+  margin-top: -28px;
+  font-family: "Montserrat-Bold";
+}
+.orico_Page_download .downloadMain .contact_c {
+  width: 85.375rem;
+  margin: auto;
+}
+.orico_Page_download .downloadMain .contact_c .search_all {
+  background-color: #fff;
+  border-radius: 1.5rem;
+  margin: auto;
+  display: flex;
+  font-family: "Montserrat-Medium";
+  color: #9e9e9f;
+  z-index: 9;
+  position: relative;
+  width: 100%;
+  padding: 4rem;
+  font-size: 1rem;
+  margin-top: -96px;
+}
+.orico_Page_download .downloadMain .contact_c .search_all input {
+  padding: 1.4375rem 2rem;
+  width: 100%;
+  background: none;
+  background-color: #f2f2f2;
+  border-radius: 2rem;
+  outline: none;
+  border: none;
+}
+.orico_Page_download .downloadMain .contact_c .search_all .searchbtn {
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  margin-top: -0.75rem;
+  right: 6rem;
+}
+.orico_Page_download .downloadMain .contact_c .search_all .searchbtn img {
+  width: 100%;
+}
+.orico_Page_download .downloadMain .contact_c .tab {
+  margin-top: 4rem;
+  display: flex;
+  justify-content: space-between;
+}
+.orico_Page_download .downloadMain .contact_c .tab .tabit {
+  width: 27.5rem;
+  font-size: 1.125rem;
+  padding-top: 1.5625rem;
+  padding-bottom: 1.5625rem;
+  font-family: "Montserrat-Bold";
+  text-align: center;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  position: relative;
+  background-color: #fff;
+  color: #000;
+}
+.orico_Page_download .downloadMain .contact_c .tab .on {
+  background-color: #004bfa;
+  color: #fff;
+}
+.orico_Page_download .downloadMain .contact_c .tab .on::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  transform: rotate(45deg);
+  background-color: #004bfa;
+  left: 50%;
+  z-index: 0;
+  width: 12px;
+  height: 12px;
+  margin-bottom: -6px;
+  margin-left: -8px;
+}
+.orico_Page_download .downloadMain .contact_c .softlist {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit {
+  padding: 80px 64px;
+  margin-bottom: 24px;
+  background-color: #fff;
+  border-radius: 24px;
+  display: flex;
+  justify-content: flex-start;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit .left_img {
+  width: 320px;
+  height: 320px;
+  margin-right: 64px;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit .left_img img {
+  width: 320px;
+  height: 320px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit .title {
+  font-size: 1.125rem;
+  font-family: "Montserrat-Bold";
+  color: #000;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit .sub_title {
+  font-size: 0.875rem;
+  margin-top: 0.875rem;
+  font-family: "Montserrat-Regular";
+  color: #9e9e9f;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit .des {
+  line-height: 20px;
+  margin-top: 8px;
+  font-size: 16px;
+  font-family: "Montserrat-Medium";
+  color: #000;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .softit .l_button {
+  border-radius: 28px;
+  padding: 15px 40px;
+  margin-top: 74px;
+  display: inline-block;
+  font-family: "Montserrat-Bold";
+  color: #004bfa;
+  background-color: rgba(0, 75, 250, 0.05);
+  cursor: pointer;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page {
+  zoom: 1;
+  text-align: center;
+  color: #555;
+  clear: both;
+  padding-bottom: 2rem;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page span {
+  padding: 0px 0px;
+  display: inline-block;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .a_prev,
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .a_next {
+  display: inline-block;
+  width: 10px;
+  height: 21px;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .a_prev {
+  background: url(../downloadImg/pfl.png) no-repeat;
+  margin-right: 10px;
+  padding: 0 10px;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .a_next {
+  background: url(../downloadImg/prh.png) no-repeat;
+  margin-left: 10px;
+  padding: 0 10px;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .num a {
+  display: inline-block;
+  width: 34px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  color: #444;
+}
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .num a.a_cur,
+.orico_Page_download .downloadMain .contact_c .softlist .Page .p_page .num a:hover {
+  background: #444;
+  color: #fff;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs {
+  margin-top: 32px;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .hd {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .hd ul {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .hd ul li {
+  margin-right: 80px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  font-size: 16px;
+  position: relative;
+  cursor: pointer;
+  font-family: "Montserrat-Bold";
+  color: #000;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .hd ul .von {
+  border-bottom: 2px solid #004bfa;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten {
+  margin-top: 24px;
+  height: auto;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: flex-start;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd {
+  margin-right: 24px;
+  width: 671px;
+  margin-bottom: 34px;
+  background-color: #fff;
+  border-radius: 24px;
+  overflow: hidden;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd video {
+  width: 100%;
+  display: block;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit {
+  padding-left: 56px;
+  padding-right: 56px;
+  height: 114px;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit .htit1 {
+  font-family: "Montserrat-Regular";
+  color: #000;
+  font-size: 16px;
+  margin-top: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit .htit2 {
+  font-family: "Montserrat-Regular";
+  color: #9e9e9f;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: 14px;
+  margin-top: 16px;
+  line-height: 20px;
+}
diff --git a/public/static/index/css/fonts.css b/public/static/index/css/fonts.css
new file mode 100755
index 00000000..69f04b75
--- /dev/null
+++ b/public/static/index/css/fonts.css
@@ -0,0 +1,220 @@
+@font-face {
+  font-family: 'icomoon';
+  src: url('fonts/icomoon/icomoon.eot?ujw7hy');
+  src: url('fonts/icomoon/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/icomoon/icomoon.ttf?ujw7hy') format('truetype'),
+    url('fonts/icomoon/icomoon.woff?ujw7hy') format('woff'), url('fonts/icomoon/icomoon.svg?ujw7hy#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^='icon-'],
+[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-Collection:before {
+  content: '\e900';
+}
+.icon-culture-P:before {
+  content: '\e901';
+}
+.icon-facebook:before {
+  content: '\e902';
+}
+.icon-in:before {
+  content: '\e903';
+}
+.icon-twitter:before {
+  content: '\e904';
+}
+.icon-youtobe:before {
+  content: '\e905';
+}
+.icon-country:before {
+  content: '\e90a';
+}
+.icon-menu:before {
+  content: '\e906';
+}
+.icon-arrow:before {
+  content: '\e907';
+}
+.icon-r-arrow:before {
+  content: '\e907';
+}
+.icon-close:before {
+  content: '\e909';
+}
+.icon-search:before {
+  content: '\e908';
+}
+.icon-B-arrow:before {
+  content: '\e90b';
+}
+
+.icon-qq1:before {
+  content: '\e90c';
+}
+.icon-wx1:before {
+  content: '\e90d';
+}
+.icon-ys1:before {
+  content: '\e90e';
+}
+.icon-kf1:before {
+  content: '\e90f';
+}
+.icon-top1:before {
+  content: '\e910';
+}
+.icon-QQ:before {
+  content: '\e911';
+  color: rgba(0, 0, 0, 0.3);
+  margin-right: 10px;
+}
+.icon-xl:before {
+  content: '\e919';
+}
+
+.icon-QQ1:before {
+  content: '\e91c';
+}
+.icon-PYQ:before {
+  content: '\e91d';
+}
+.icon-Under-line:before {
+  content: '\e91e';
+}
+.icon-On-line:before {
+  content: '\e91f';
+}
+.icon-contect:before {
+  content: '\e920';
+}
+.icon-support:before {
+  content: '\e921';
+}
+.icon-media:before {
+  content: '\e922';
+}
+.icon-join:before {
+  content: '\e923';
+}
+
+@font-face {
+  font-family: 'icomoon01';
+  src: url('fonts-20190124/icomoon.eot?ll2528');
+  src: url('fonts-20190124/icomoon.eot?ll2528#iefix') format('embedded-opentype'),
+    url('fonts-20190124/icomoon.ttf?ll2528') format('truetype'), url('fonts-20190124/icomoon.woff?ll2528') format('woff'),
+    url('fonts-20190124/icomoon.svg?ll2528#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^='icons-'],
+[class*=' icons-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon01' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icons-weixin:before {
+  content: '\e903';
+  color: #fff;
+}
+.icons-Forum:before {
+  content: '\e900';
+  color: #fff;
+}
+.icons-sina:before {
+  content: '\e901';
+  color: #fff;
+}
+.icons-toutiao:before {
+  content: '\e902';
+  color: #fff;
+}
+
+.icons-douyin:before {
+  content: '\e904';
+  color: #fff;
+}
+
+@font-face {
+  font-family: 'icomoon02';
+  src: url('fonts/other/icomoon.eot?ujw7hy');
+  src: url('fonts/other/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/other/icomoon.ttf?ujw7hy') format('truetype'),
+    url('fonts/other/icomoon.woff?ujw7hy') format('woff'), url('fonts/other/icomoon.svg?ujw7hy#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^='icona-'],
+[class*=' icona-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon02' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icona-zhihu:before {
+  content: '\e904';
+  color: #fff;
+}
+@font-face {
+  font-family: 'icomoon05';
+  src: url('fonts-20220322/icomoon.eot?cdcz43');
+  src: url('fonts-20220322/icomoon.eot?cdcz43#iefix') format('embedded-opentype'),
+    url('fonts-20220322/icomoon.ttf?cdcz43') format('truetype'), url('fonts-20220322/icomoon.woff?cdcz43') format('woff'),
+    url('fonts-20220322/icomoon.svg?cdcz43#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^='iconb-'],
+[class*='iconb-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon05' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconb-caret-down:before {
+  content: '\e900';
+}
+.iconb-caret-up:before {
+  content: '\e901';
+}
diff --git a/public/static/index/css/fq.css b/public/static/index/css/fq.css
new file mode 100755
index 00000000..2bb5e6b6
--- /dev/null
+++ b/public/static/index/css/fq.css
@@ -0,0 +1,89 @@
+.orico_Page_fq {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_fq .img-responsive img {
+  height: auto;
+  width: 100%;
+}
+.orico_Page_fq .fqMain {
+  max-width: 101.25rem;
+  min-width: 80%;
+  padding: 2.3% 0;
+  margin: 0 auto;
+}
+.orico_Page_fq .fqMain .Table-Row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.orico_Page_fq .fqMain .Table-Row .Table-Cell {
+  float: left;
+  width: 49%;
+  margin-right: 1%;
+}
+.orico_Page_fq .fqMain .Table-Row .Table-Cell .faq-all-text {
+  padding: 5% 0;
+}
+.orico_Page_fq .fqMain .Table-Row .Table-Cell .faq-all-text .faq-title {
+  font-size: 1.125em;
+  color: #101010;
+  margin-bottom: 2%;
+}
+.orico_Page_fq .fqMain .Table-Row .Table-Cell .faq-all-text .faq-des {
+  font-size: 0.875em;
+  color: #737373;
+  line-height: 1.875em;
+}
+.orico_Page_fq .fqMain .Page {
+  zoom: 1;
+  text-align: center;
+  color: #555;
+  clear: both;
+  padding-bottom: 2rem;
+}
+.orico_Page_fq .fqMain .Page span {
+  padding: 0px 0px;
+  display: inline-block;
+}
+.orico_Page_fq .fqMain .Page .p_page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_fq .fqMain .Page .p_page .a_prev,
+.orico_Page_fq .fqMain .Page .p_page .a_next {
+  display: inline-block;
+  width: 10px;
+  height: 21px;
+}
+.orico_Page_fq .fqMain .Page .p_page .a_prev {
+  background: url(../fqimg/pfl.png) no-repeat;
+  margin-right: 10px;
+  padding: 0 10px;
+}
+.orico_Page_fq .fqMain .Page .p_page .a_next {
+  background: url(../fqimg/prh.png) no-repeat;
+  margin-left: 10px;
+  padding: 0 10px;
+}
+.orico_Page_fq .fqMain .Page .p_page .num a {
+  display: inline-block;
+  width: 34px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  color: #444;
+}
+.orico_Page_fq .fqMain .Page .p_page .num a.a_cur,
+.orico_Page_fq .fqMain .Page .p_page .num a:hover {
+  background: #444;
+  color: #fff;
+}
diff --git a/public/static/index/css/index.css b/public/static/index/css/index.css
new file mode 100755
index 00000000..e7da38cd
--- /dev/null
+++ b/public/static/index/css/index.css
@@ -0,0 +1,835 @@
+.orico_Page_index {
+  width: 100%;
+  position: relative;
+  height: auto;
+  padding-bottom: 3.75rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_index .pageMain {
+  width: 100%;
+  position: relative;
+}
+.orico_Page_index .pageMain .bannerswiper {
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+.orico_Page_index .pageMain .bannerswiper .swiper-slide img {
+  width: 100%;
+  height: 100%;
+}
+.orico_Page_index .pageMain .bannerswiper .swiper-button-next {
+  right: 9%;
+  top: 53%;
+}
+.orico_Page_index .pageMain .bannerswiper .swiper-button-prev {
+  left: 9%;
+  top: 53%;
+}
+.orico_Page_index .pageMain .bannerswiper .swiper-horizontal > .swiper-pagination-bullets,
+.orico_Page_index .pageMain .bannerswiper .swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: 5%;
+}
+.orico_Page_index .pageMain .bannerswiper .swiper-button-next,
+.orico_Page_index .pageMain .bannerswiper .swiper-button-prev {
+  color: #fff;
+}
+.orico_Page_index .pageMain .bannerswiper .swiper-pagination-bullet-active {
+  width: 1.5rem !important;
+  border-radius: 10px;
+  color: #ffffff !important;
+  background-color: #ffffff !important;
+}
+.orico_Page_index .pageMain .catMain {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  height: 14.375rem;
+  background: #fff;
+}
+.orico_Page_index .pageMain .catMain .catit {
+  min-width: 15%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_index .pageMain .catMain .catit .catIcoImg {
+  height: 4.6875rem;
+  width: 4.6875rem;
+}
+.orico_Page_index .pageMain .catMain .catit .catName {
+  padding-top: 1rem;
+  font-size: 1rem;
+  font-weight: bold;
+}
+.orico_Page_index .pageMain .featuredtopicsMain {
+  width: 100%;
+  position: relative;
+  margin-top: 24px;
+  overflow: hidden;
+  padding-top: 3vw;
+  display: flex;
+  justify-content: center;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent {
+  width: 85%;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme {
+  width: 100%;
+  max-height: 30rem;
+  display: flex;
+  flex-direction: row;
+  background: #fff;
+  justify-content: space-between;
+  border-radius: 1.625rem;
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left {
+  width: 53%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left p {
+  font-size: 2.625rem;
+  line-height: 2.8125rem;
+  font-weight: 600;
+  height: 5.9375rem;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle {
+  font-size: 1.125rem;
+  font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle .tpicture {
+  width: 1.375rem;
+  height: 1.375rem;
+  background: url("/static/index/images/more2.png") no-repeat;
+  background-position: -26px 0px;
+  margin-left: 1.625rem;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover {
+  color: #004bfa;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover .tpicture {
+  background-position: 0 0;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right {
+  width: 47%;
+  overflow: hidden;
+  position: relative;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img {
+  width: 100%;
+  transition: transform 0.3s ease-in-out;
+  border-start-end-radius: 1.625rem;
+  border-end-end-radius: 1.625rem;
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img:hover {
+  transform: scale(1.09);
+}
+.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme:nth-child(even) .ftItme_right img {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-start-start-radius: 1.625rem;
+  border-end-start-radius: 1.625rem;
+}
+.orico_Page_index .pageMain .featuredProducts {
+  position: relative;
+}
+.orico_Page_index .pageMain .featuredProducts .biaoti {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 6rem;
+  margin-top: 42px;
+  margin-bottom: 14px;
+  width: 85%;
+  margin: 0 auto;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper {
+  width: 116%;
+  margin-left: 6%;
+  position: relative;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture {
+  display: block;
+  width: 21.875rem;
+  height: 29.375rem;
+  background: #ffffff;
+  border-radius: 1.625rem;
+  text-align: center;
+  font-size: 1.125rem;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg {
+  width: 13.5rem;
+  height: 12.875rem;
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 30%;
+  margin-left: -6.75rem;
+  margin-top: -6.4375rem;
+  background-repeat: no-repeat;
+  transition: transform 0.3s ease-in-out;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img {
+  width: 13.5rem;
+  height: 12.875rem;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img:hover {
+  transform: scale(1.1);
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .fpptitle {
+  font-size: 1.25rem;
+  text-align: center;
+  line-height: 1.5rem;
+  font-weight: 700;
+  margin-top: 18rem;
+  padding: 0 1.875rem;
+  max-height: 3.0625rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .subtitle {
+  text-align: center;
+  line-height: 1.125rem;
+  font-size: medium;
+  width: 80%;
+  margin: auto;
+  margin-top: 1rem;
+  margin-bottom: 1.25rem;
+  max-height: 33px;
+  overflow: hidden;
+  font-weight: 600;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .more {
+  font-size: 0.8rem;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  color: #004bfa;
+  margin-left: -40px;
+  font-weight: 600;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd {
+  display: flex;
+  width: 85%;
+  position: relative;
+  height: 6.25rem;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 {
+  width: 85%;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background-color: #555 !important;
+  margin-top: 0px;
+  height: 2px !important;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .slideshow-pag {
+  width: 86%;
+  right: 3%;
+  top: 50%;
+  height: 1px;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 {
+  width: 15%;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  z-index: 1;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .slideshow-btn {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-next,
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-prev {
+  position: static !important;
+  margin-left: 95px;
+  margin-top: 24px;
+}
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-prev,
+.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-next {
+  position: static !important;
+  margin-left: 40px;
+  margin-top: -40px;
+}
+.orico_Page_index .pageMain .hotProduct {
+  position: relative;
+  margin: 0 auto;
+}
+.orico_Page_index .pageMain .hotProduct .hotvideo {
+  width: 100%;
+  height: 50rem;
+  overflow: hidden;
+  transform-origin: center center;
+  transform: scale(1);
+  transition: transform 0.3s ease-in-out;
+  background-size: 100% 100%;
+  background-position: center center;
+  animation: breath 4s linear infinite;
+  display: none;
+}
+.orico_Page_index .pageMain .hotProduct .hotImg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.orico_Page_index .pageMain .sceneIntroduction {
+  width: 100%;
+  background: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding-top: 1%;
+  overflow: hidden;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem {
+  overflow: hidden;
+  width: 49.5%;
+  display: block;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 34rem;
+  margin-bottom: 1%;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .scenetitle {
+  font-size: 1.875rem;
+  text-align: center;
+  font-weight: bold;
+  max-height: 5.5rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  padding-top: 10%;
+  z-index: 10;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .subtitle {
+  font-size: 1rem;
+  text-align: center;
+  line-height: 1.4em;
+  margin-top: 0.3125rem;
+  max-height: 1.5rem;
+  z-index: 999;
+  overflow: hidden;
+  display: -webkit-box;
+  margin-bottom: 0.3125rem;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  z-index: 10;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .sceneMore {
+  font-size: 1rem;
+  color: #004bfa;
+  text-align: center;
+  z-index: 10;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneimg {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+  background-size: 100% 100%;
+  z-index: 9;
+}
+.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneimg:hover {
+  transform: scale(1.09);
+  /* background-size: auto 120%; */
+}
+.orico_Page_index .pageMain .oricoTechnology {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-top: 6rem;
+  padding-bottom: 1.25rem;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding-bottom: 120px;
+  background: #fff;
+}
+.orico_Page_index .pageMain .oricoTechnology .ottitle {
+  font-weight: 700;
+  font-size: 3.5rem;
+}
+.orico_Page_index .pageMain .oricoTechnology .otsbtitle {
+  font-weight: 400;
+  font-size: 1.375rem;
+  padding-top: 1.25rem;
+  padding-bottom: 5rem;
+  width: 30%;
+  margin: 0 auto;
+}
+.orico_Page_index .pageMain .oricoTechnology .beforeafter {
+  width: 85%;
+  margin: 0 auto;
+  height: 53.75rem;
+  position: relative;
+  border-radius: 1.75rem;
+}
+.orico_Page_index .pageMain .oricoTechnology #after {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-image: url("/static/index/images/indeximg1.jpg");
+  width: 100%;
+  height: 53.75rem;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 1.75rem;
+}
+.orico_Page_index .pageMain .oricoTechnology #before {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border-right: 0.25rem solid rgba(255, 255, 255, 0.5019607843);
+  background-image: url("/static/index/images/indeximg2.jpg");
+  width: 50%;
+  height: 53.75rem;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-start-start-radius: 1.75rem;
+  border-end-start-radius: 1.75rem;
+}
+.orico_Page_index .pageMain .oricoTechnology .drag-circle {
+  left: 50%;
+  transform: translateY(-50%);
+  position: absolute;
+  top: 50%;
+  width: 48px;
+  height: 48px;
+  margin: -24px 0 0 -24px;
+  content: "";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff url("/static/index/images/ba-arrow.png") center center/22px 22px no-repeat;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  transform: scale(1);
+  z-index: 5;
+}
+.orico_Page_index .pageMain .brandStory {
+  padding: 0 7%;
+  position: relative;
+  margin: 0 auto;
+  background: #fff;
+}
+.orico_Page_index .pageMain .brandStory .brandStoryswiper {
+  padding-bottom: 1.25rem;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper {
+  position: relative;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem {
+  display: flex;
+  width: 100%;
+  height: 43.75rem;
+  background: #ffffff;
+  border-radius: 26px 26px 26px 26px;
+  text-align: center;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .itmImg {
+  width: 50%;
+  text-align: left;
+  border-radius: 1.625rem;
+  height: 42.625rem;
+  transition: transform 0.3s ease-in-out;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .itmImg .bsImg {
+  margin-left: 1%;
+  border-radius: 26px 26px 26px 26px;
+  width: 98%;
+  height: 41.625rem;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  margin-left: 10%;
+  justify-content: center;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bstitle {
+  font-size: 3rem;
+  text-align: left;
+  line-height: 4rem;
+  font-weight: bolder;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bssubtitle {
+  font-size: 1.25rem;
+  text-align: left;
+  line-height: 1.575rem;
+  width: 80%;
+  margin-bottom: 5%;
+  margin-top: 1.25rem;
+}
+.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bsmore {
+  font-size: 1rem;
+  text-align: left;
+  width: 80%;
+  font-family: Montserrat !important;
+  color: #004bfa;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd {
+  position: relative;
+  height: 6.25rem;
+  display: flex;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer {
+  width: 85%;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer hr {
+  z-index: -1;
+  width: 85%;
+  position: absolute;
+  top: 2.6875rem;
+  left: 1rem;
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination {
+  bottom: 3rem;
+  width: 86%;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet {
+  margin-right: 28%;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background-color: #fff;
+  cursor: pointer;
+  opacity: 1;
+  border: 1px solid #cccccc;
+  float: left;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet-active {
+  background-color: #000;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer span {
+  font-weight: bold;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time1 {
+  position: absolute;
+  top: 3.4375rem;
+  left: 0.2%;
+  height: 2px;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time2 {
+  position: absolute;
+  top: 3.4375rem;
+  left: 25.3%;
+  height: 2px;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time3 {
+  position: absolute;
+  top: 3.4375rem;
+  left: 51%;
+  height: 2px;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .swiper-container {
+  width: 15%;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts {
+  width: 15%;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .slideshow-btn {
+  z-index: 9999;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-next {
+  position: static;
+  margin-left: 5.9375rem;
+  margin-top: 1.5rem;
+}
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-prev {
+  position: static;
+  margin-left: 2.5rem;
+  margin-top: -2.5rem;
+}
+.orico_Page_index .pageMain .oricoDataStatistics {
+  background-color: #004bf9;
+  width: 100%;
+}
+.orico_Page_index .pageMain .oricoDataStatistics .odsmain {
+  max-width: 120rem;
+  min-width: 75rem;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  display: flex;
+  margin: 0 auto;
+}
+.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem {
+  color: #fff;
+  padding: 5.625rem 0;
+  text-align: center;
+}
+.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem h1 {
+  font-size: 3.125rem;
+  animation: number-scroll 1s ease-in-out forwards;
+}
+.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem h3 {
+  font-size: 1.25rem;
+  padding-top: 0.9375rem;
+}
+.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem:nth-child(2) {
+  margin: 0 18%;
+}
+.orico_Page_index .pageMain .oricoPub {
+  max-width: 84%;
+  background-color: #fff;
+  position: relative;
+  margin: 0 auto;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiper {
+  padding-top: 3.5em;
+  overflow: hidden;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem {
+  position: relative;
+  display: flex;
+  width: 31%;
+  height: 100%;
+  background: #ffffff;
+  border-radius: 26px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  max-height: 43.75rem;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubimgdiv {
+  background-repeat: no-repeat;
+  transition: transform 0.3s ease-in-out;
+  background-size: 100% 100%;
+  max-height: 300px;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubimgdiv img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 1.625rem;
+  object-fit: cover;
+  vertical-align: middle;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubinfo {
+  position: absolute;
+  left: 5%;
+  bottom: 5%;
+  color: white;
+  width: 90%;
+  font-weight: 600;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubinfo span {
+  width: 100%;
+  height: 3.75rem;
+  font-size: 1.5rem;
+  display: -webkit-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #fff;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-wrap: auto;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiperasd {
+  position: relative;
+  width: 55%;
+  margin-left: 22.5%;
+  height: 6rem;
+  display: flex;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container {
+  margin: 0;
+  right: 0;
+  width: auto;
+  position: absolute;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .slideshow-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next,
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-container-rtl .swiper-button-prev {
+  background-image: none;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next,
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-prev {
+  margin-left: 4.875rem;
+  margin-top: 1.5625rem;
+  position: static;
+}
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-prev,
+.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-next {
+  position: static;
+  margin-left: 1.75rem;
+  margin-top: -2.5rem;
+}
+.orico_Page_index .pageMain .oricoFQA {
+  width: 85%;
+  margin: 0 auto;
+  margin-top: 4.5rem;
+  display: flex;
+  flex-direction: row;
+  background-color: white;
+  border-radius: 1.625rem;
+  align-items: baseline;
+  box-shadow: 5px 5px 30px 5px #d6d6de;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaleft {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaleft h1.title {
+  font-size: 3.5rem;
+  text-align: left;
+  font-weight: bold;
+  width: 75%;
+  margin-left: 15%;
+  margin-top: 10%;
+  overflow: hidden;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaleft .dec {
+  font-size: 1.5rem;
+  text-align: left;
+  width: 75%;
+  margin-left: 15%;
+  font-weight: 400;
+  margin-top: 1%;
+  padding: 1% 0;
+  line-height: 1.7rem;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaleft .sudec {
+  font-size: 1rem;
+  text-align: left;
+  width: 75%;
+  margin-left: 15%;
+  margin-top: 2%;
+  margin-bottom: 10%;
+  line-height: 1.5rem;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright {
+  width: 60%;
+  display: flex;
+  margin-bottom: 7%;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion {
+  margin-top: 10%;
+  margin-bottom: auto;
+  margin-left: 3%;
+  width: 90%;
+  border: 1px solid #d6d6d6;
+  border-radius: 0.625rem;
+  display: flex;
+  flex-direction: column;
+  padding: 3% 0;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali {
+  margin-left: 5%;
+  margin-top: 1%;
+  width: 90%;
+  margin-bottom: 0.625rem;
+  border-bottom: 1px solid #d6d6d6;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question {
+  font-size: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  overflow: hidden;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question .xiala {
+  height: 1.875rem;
+  text-align: center;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer {
+  font-size: 1rem;
+  font-weight: 400;
+  padding: 0.625rem;
+  display: none;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer p {
+  line-height: 1.75rem;
+}
+.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali:last-child {
+  border-bottom: none;
+}
+.orico_Page_index .pageMain .oricofixd-info {
+  height: 88px;
+  background-color: #333;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 9999;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.orico_Page_index .pageMain .oricofixd-info .ofiinfo {
+  width: 80%;
+  text-wrap: wrap;
+  margin-left: 7%;
+}
+.orico_Page_index .pageMain .oricofixd-info .ofiinfo p {
+  font-weight: 400;
+}
+.orico_Page_index .pageMain .oricofixd-info .ofibt {
+  width: 10%;
+}
+.orico_Page_index .pageMain .oricofixd-info .ofibt button {
+  width: 9.375rem;
+  height: 3.125rem;
+  border: 1px solid grey;
+  border-radius: 1.5625rem;
+  color: white;
+  background-color: #333;
+  cursor: pointer;
+}
+.orico_Page_index .pageMain .oricofixd-info .oficlose {
+  width: 10%;
+  margin-right: 7%;
+}
+.orico_Page_index .pageMain .oricofixd-info .oficlose .close-btn {
+  font-size: 1.875rem;
+  margin-right: 3.125rem;
+  color: white;
+  cursor: pointer;
+  float: right;
+  width: 1.25rem;
+}
diff --git a/public/static/index/css/introduction.css b/public/static/index/css/introduction.css
new file mode 100755
index 00000000..584e6835
--- /dev/null
+++ b/public/static/index/css/introduction.css
@@ -0,0 +1,123 @@
+.orico_Page_introduction {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_introduction .introductionMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.orico_Page_introduction .introductionMain .iotbpage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotbt1 {
+  font-size: 32px;
+  font-family: Montserrat-Bold, Montserrat;
+  padding-bottom: 65px;
+  padding-top: 88px;
+  font-weight: 700;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 {
+  width: 75%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 100px;
+  align-items: baseline;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item {
+  width: 336px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbic1 {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 20px;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbtp1 {
+  font-size: 18px;
+  font-family: Montserrat-Bold, Montserrat;
+  font-weight: bold;
+  padding-bottom: 18px;
+}
+.orico_Page_introduction .introductionMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbts1 {
+  text-align: center;
+  font-size: 16px;
+  font-family: Montserrat-Medium, Montserrat;
+  color: #9e9e9f;
+}
+.orico_Page_introduction .introductionMain .iotb_part2 {
+  padding-bottom: 90px;
+  background: #fff;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_introduction .introductionMain .iotb_part2 .iotbt1 {
+  font-size: 32px;
+  font-family: Montserrat-Bold, Montserrat;
+  padding-bottom: 65px;
+  padding-top: 88px;
+  font-weight: 700;
+}
+.orico_Page_introduction .introductionMain .iotb_part2 .fdimgs {
+  width: 70%;
+  padding-bottom: 110px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20px;
+}
+.orico_Page_introduction .introductionMain .iotb_part2 .fdimgs .fdimgs-div {
+  width: 320px;
+  height: 255px;
+  background: #fff;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+}
+.orico_Page_introduction .introductionMain .iotb_part2 .fdimgs .fdimgs-div .fdimgs-div-span {
+  position: absolute;
+  bottom: 0px;
+  z-index: 9999;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(200, 200, 200, 0.1));
+  height: 45px;
+  width: 100%;
+}
+.orico_Page_introduction .introductionMain .iotb_part2 .fdimgs .fdimgs-div span {
+  font-size: 18px;
+  font-weight: bold;
+  z-index: 9999;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  color: #fff;
+  line-height: 45px;
+}
diff --git a/public/static/index/css/new_arrival.css b/public/static/index/css/new_arrival.css
new file mode 100755
index 00000000..efe9499d
--- /dev/null
+++ b/public/static/index/css/new_arrival.css
@@ -0,0 +1,106 @@
+@charset "UTF-8";
+.orico_Page_newproducts {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f9f9f9;
+}
+.orico_Page_newproducts p,
+.orico_Page_newproducts a,
+.orico_Page_newproducts div,
+.orico_Page_newproducts span {
+  font-family: "Microsoft YaHei", "Arial", sans-serif;
+}
+.orico_Page_newproducts .opdBanner {
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+.orico_Page_newproducts .opdBanner .opdbannerImg {
+  width: 100%;
+  height: auto;
+  display: none;
+  object-fit: cover;
+  transition: opacity 1s ease-in-out;
+}
+.orico_Page_newproducts .opdbannerImg:first-child {
+  display: block;
+}
+.orico_Page_newproducts .oricoNewPrMain {
+  width: 85%;
+  padding: 50px 0 10px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title {
+  font-size: 1.5em;
+  color: #101010;
+  margin-bottom: 1.25rem;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list {
+  display: flex;
+  flex-wrap: wrap; /* 自动换行 */
+  justify-content: flex-start; /* 水平方向均匀分布 */
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem {
+  width: 18%;
+  float: left;
+  background: #fff;
+  padding-bottom: 1em;
+  margin-top: 2.1%;
+  position: relative;
+  margin-right: 2.1%;
+  padding-top: 30px;
+  padding-bottom: 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .oNpicoNEW {
+  width: 4.5rem;
+  height: 1.875rem;
+  background: #df2c39;
+  font-size: 0.75rem;
+  color: #fff;
+  text-align: center;
+  line-height: 1.875rem;
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prdimg {
+  display: inline-block;
+  width: 100%;
+  max-width: 220px;
+  margin: 25px auto;
+  display: none;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prdimg-show {
+  display: block;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prdName {
+  color: #444;
+  font-size: 0.875rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prddec {
+  font-size: 0.875rem;
+  color: #737373;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem:hover {
+  box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
+  transform: translate3d(0, -2px, 0);
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem:nth-child(5n) {
+  margin-right: 0px;
+}
diff --git a/public/static/index/css/orico_footer.css b/public/static/index/css/orico_footer.css
new file mode 100755
index 00000000..9a2e3a12
--- /dev/null
+++ b/public/static/index/css/orico_footer.css
@@ -0,0 +1,127 @@
+.orico_footer {
+  background: #000;
+  font-size: 1rem;
+}
+.orico_footer .fotter {
+  margin: 0 auto;
+  overflow: hidden;
+  padding-bottom: 5.5rem;
+  padding-top: 2.25rem;
+  position: relative;
+}
+.orico_footer .fotter .footerico {
+  position: absolute;
+  height: 3.125rem;
+  left: 8%;
+  top: 5%;
+}
+.orico_footer .fotter .footerMain {
+  min-width: 1024px;
+  max-width: 75rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+.orico_footer .fotter .footerMain .foottxttop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.orico_footer .fotter .footerMain .foottxttop .foootCt {
+  gap: 1.5rem;
+  display: grid;
+}
+.orico_footer .fotter .footerMain .foottxttop .foootCt .ftitle {
+  font-weight: 700;
+  color: #fff;
+  font-size: 1.25rem;
+}
+.orico_footer .fotter .footerMain .foottxttop .foootCt ul {
+  display: grid;
+  gap: 0.75rem;
+}
+.orico_footer .fotter .footerMain .foottxttop .foootCt ul .fline {
+  color: #fff;
+  opacity: 0.7;
+  transition: opacity 0.2s ease-in-out;
+  overflow-wrap: anywhere;
+}
+.orico_footer .fotter .footerMain .foottxtbottom {
+  padding-left: 10%;
+  padding-left: 14%;
+  display: grid;
+  padding-top: 8%;
+}
+.orico_footer .fotter .footerMain .foottxtbottom .ftopicos {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 1%;
+  gap: 2rem;
+}
+.orico_footer .fotter .footerMain .foottxtbottom .ftopicos ul {
+  gap: 0.75rem 1.5rem;
+  flex-wrap: wrap;
+  display: flex;
+}
+.orico_footer .fotter .footerMain .foottxtbottom .ftopicos ul img {
+  height: 30px;
+  width: 30px;
+}
+.orico_footer .fotter .footerMain .foottxtbottom .ftcopyright {
+  color: #b3b3b3;
+  font-size: 0.875rem;
+}
+.orico_footer .fotter .footerMain .foottxtbottom .ftcopyright a {
+  color: #b3b3b3;
+}
+.orico_footer .fotter .footerMain .foottxtbottom .batext {
+  color: #fff;
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+.oricoCont {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 3.5rem auto;
+}
+.oricoCont .ctitem {
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.oricoCont .ctitem .ctimg {
+  max-width: 6.25rem;
+  width: 3.75rem;
+  height: 3.75rem;
+  margin-top: 2%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.oricoCont .ctitem .cttitle {
+  font-size: 1.25rem;
+  text-align: center;
+  font-weight: 600;
+  line-height: 2.5rem;
+}
+.oricoCont .ctitem .ctdec {
+  font-size: 0.875rem;
+  text-align: center;
+  line-height: 1rem;
+  margin: auto;
+}
+
+@media screen and (max-width: 1777px) {
+  .footerico {
+    top: 65% !important;
+    bottom: 24%;
+    left: 50% !important;
+  }
+}
diff --git a/public/static/index/css/orico_header.css b/public/static/index/css/orico_header.css
new file mode 100755
index 00000000..ef796aa8
--- /dev/null
+++ b/public/static/index/css/orico_header.css
@@ -0,0 +1,350 @@
+@charset "UTF-8";
+.header-PC {
+  width: 100%;
+}
+.header-PC #header {
+  margin: 0 auto;
+  height: 3.75rem;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 999;
+  background: white;
+  color: black;
+}
+.header-PC #header .nav1 {
+  position: relative;
+  width: 20%;
+}
+.header-PC #header .nav1 img {
+  width: 45%;
+  margin-left: 40%;
+}
+.header-PC #header .nav2 {
+  position: relative;
+  width: 60%;
+}
+.header-PC #header .nav2 .navItem {
+  font-size: 1rem;
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-content: center;
+  width: 12.5%;
+  height: 60px;
+  text-align: center;
+  float: left;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  -webkit-transition: all 0.5s ease;
+}
+.header-PC #header .nav2 .navItem a {
+  padding-right: 5px;
+  text-decoration: none;
+  word-break: keep-all;
+  white-space: norwap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  text-wrap: nowrap;
+}
+.header-PC #header .nav2 .navItem .downimg {
+  height: 0.75rem;
+}
+.header-PC #header .nav2 .navItem .navItemConten {
+  width: 100%;
+  z-index: 999;
+  background-color: #f2f2f2;
+  max-height: 41.25rem;
+  box-shadow: 3px 5px 60px -20px #88909a;
+  position: fixed;
+  border: 1px solid lightgray;
+  top: 3.75rem;
+  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
+  left: 0;
+  display: none;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft {
+  float: left;
+  text-align: center;
+  width: 20%;
+  max-height: 41.25rem;
+  font-size: 1rem;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li {
+  cursor: pointer;
+  zoom: 1;
+  clear: both;
+  border: 1px solid transparent;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li a {
+  line-height: 2.75rem;
+  color: #656a6d;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li a:hover {
+  color: #004bfa;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li.it_active {
+  border-color: #dddddd;
+  background-color: #ffffff;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright {
+  max-height: 41.25rem;
+  min-height: 28.75rem;
+  overflow-y: auto;
+  border-left: 1px solid #dddddd;
+  font-weight: normal;
+  background-color: #fff;
+  margin: 0 auto;
+  box-shadow: -3px 0 0px #f3f3f3;
+  text-align: left;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  margin-inline-start: 1.25rem;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(225, 225, 225, 0.5);
+  padding-bottom: 0.8125rem;
+  padding-top: 1rem;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt img {
+  height: 1rem;
+  max-width: 100%;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt a {
+  color: #333;
+  text-decoration: none;
+  word-break: keep-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  text-wrap: nowrap;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd {
+  font-size: 0.875rem;
+  line-height: 2.5rem;
+  padding-top: 0vw;
+  font-weight: 100;
+  display: inline-block;
+  margin-right: 3%;
+  margin-inline-start: 2.5rem;
+}
+.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd a:hover {
+  color: #004bf9;
+  font-weight: 600;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-transition: all 0.2s linear;
+}
+.header-PC #header .nav2 .navItem .navItemConten.active {
+  max-height: 41.25rem; /* 根据实际内容调整合适高度 */
+  opacity: 1;
+}
+.header-PC #header .nav2 .navItem .navItemConten1 {
+  background-color: #fff;
+  color: black;
+  position: absolute;
+  top: 60px;
+  left: 20px;
+  width: auto;
+  height: auto;
+  z-index: 9999;
+  border-radius: 5px;
+  box-shadow: 0 0 1px 0 #88909a;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0;
+}
+.header-PC #header .nav2 .navItem .navItemConten1 li {
+  color: #fff;
+  float: left;
+  text-align: center;
+  line-height: 1.5rem;
+  padding: 0.5rem 2rem;
+  display: list-item;
+}
+.header-PC #header .nav2 .navItem .navItemConten1 li a {
+  cursor: pointer;
+}
+.header-PC #header .nav2 .navItem .navItemConten1 li a:hover {
+  color: #004bfa;
+}
+.header-PC #header .nav3 {
+  position: relative;
+  width: 20%;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.header-PC #header .nav3 .searchimg {
+  margin-left: 10%;
+}
+.header-PC #header .nav3 .storetopbt {
+  background: #004cfa;
+  color: #fff;
+  padding: 0 0.9375rem;
+  border-radius: 1.25rem;
+  height: 2.375rem;
+  line-height: 2.5rem;
+  margin-left: 15%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+}
+.header-PC #header .nav3 .storetopbt .storeImgico {
+  width: 1.25rem;
+  margin-right: 0.5rem;
+}
+.header-PC #header .nav3 .choesCountry {
+  position: relative;
+  margin-left: 15%;
+}
+.header-PC #header .nav3 .choesCountry .topCountry {
+  display: none;
+  width: 21.25rem;
+  background-color: white;
+  position: fixed;
+  right: 5%;
+  top: 80px;
+  border-radius: 15px;
+  box-shadow: 2px 2px 10px 1px #88909a;
+}
+.header-PC #header .nav3 .choesCountry .topCountry li {
+  width: 100%;
+  height: 3.125rem;
+  line-height: 3.125rem;
+  text-align: center;
+  display: flex;
+}
+.header-PC #header .nav3 .choesCountry .topCountry li .countryName {
+  width: 70%;
+  text-align: left;
+  margin-left: 10px;
+  font-size: 1rem;
+}
+.header-PC #header .nav3 .choesCountry .topCountry li .cico {
+  width: 18%;
+  margin-left: 0;
+}
+.header-PC #header .nav3 .choesCountry .topCountry li .cico .countryimg {
+  margin-left: 0;
+  margin-left: 1.25rem;
+  margin-top: 0.9375rem;
+  vertical-align: top;
+}
+.header-PC #header .nav3 .choesCountry .topCountry li.closec {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  height: 1.875rem;
+}
+.header-PC #header .nav3 .choesCountry .topCountry .closecountrybt {
+  color: #aaa;
+  margin-top: -5px;
+  cursor: pointer;
+  height: 20px;
+  width: 20px;
+  margin-right: 10px;
+}
+.header-PC .searchmodalMian {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 998;
+  display: none;
+}
+.header-PC .searchmodalMian .searchmodalct {
+  background-color: #fff;
+  padding: 1.25rem;
+  border-radius: 1.25rem;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  position: fixed;
+  right: 2%;
+  width: 45%;
+  top: 5rem;
+  height: 80%;
+  overflow-y: auto;
+  z-index: 998;
+}
+.header-PC .searchmodalMian .searchmodalct .close-btn {
+  color: #aaa;
+  float: right;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+.header-PC .searchmodalMian .searchmodalct #serrchinput {
+  margin-left: 10%;
+  margin-top: 5%;
+  width: 80%;
+  height: 2.75rem;
+  border: 1px solid grey;
+  border-radius: 22px;
+  background-position: 95% 50%;
+  padding-left: 5%;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory,
+.header-PC .searchmodalMian .searchmodalct .popProduct {
+  margin-top: 5%;
+  margin-left: 10%;
+  width: 80%;
+  display: flex;
+  position: relative;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory .h_title,
+.header-PC .searchmodalMian .searchmodalct .popProduct .h_title {
+  position: absolute;
+  left: 0;
+  top: 1%;
+  font-size: 16px;
+  color: #989898;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory ul,
+.header-PC .searchmodalMian .searchmodalct .popProduct ul {
+  margin-top: 10%;
+  margin-left: 1%;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain,
+.header-PC .searchmodalMian .searchmodalct .popProduct .popmain {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem,
+.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem {
+  text-align: center;
+  margin-top: 10%;
+  margin-left: 1%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 30%;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .popimg,
+.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .popimg {
+  width: 7.1875rem;
+  height: 7.1875rem;
+  margin: 0 auto;
+}
+.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .productName,
+.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName {
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.8rem;
+}
diff --git a/public/static/index/css/product_xc.css b/public/static/index/css/product_xc.css
new file mode 100755
index 00000000..e6e5ede7
--- /dev/null
+++ b/public/static/index/css/product_xc.css
@@ -0,0 +1,159 @@
+.orico_Page_productxc {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f2f2f2;
+}
+.orico_Page_productxc .productxcMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.orico_Page_productxc .productxcMain p {
+  font-family: inherit;
+}
+.orico_Page_productxc .productxcMain .culture_top {
+  background: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_productxc .productxcMain .culture_top img {
+  height: auto;
+  max-width: 100%;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con {
+  max-width: 101.25rem;
+  width: 80%;
+  background: #f2f2f2;
+  overflow: hidden;
+  display: flex;
+  margin: 0 auto;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div {
+  width: 29%;
+  height: 597px;
+  background: #fff;
+  overflow: hidden;
+  text-align: center;
+  margin-left: 6%;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  border-radius: 1rem;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .iconimg {
+  display: flex;
+  justify-content: center;
+  margin-top: 3.125rem;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .iconimg img {
+  height: auto;
+  max-width: 100%;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  font-family: Montserrat-Bold, Montserrat;
+  margin-top: 2rem;
+  width: 90%;
+  margin-left: 5%;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .subtitle {
+  width: 80%;
+  font-size: 0.875rem;
+  color: #707070;
+  font-family: Montserrat-Medium, Montserrat;
+  margin-top: 1.375rem;
+  margin-left: 10%;
+}
+.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div:first-child {
+  margin-left: 0;
+}
+.orico_Page_productxc .productxcMain .culture_vision {
+  background-color: #fff;
+  overflow: hidden;
+  width: 100%;
+}
+.orico_Page_productxc .productxcMain .culture_vision .subtitle {
+  font-size: 1.25rem;
+  color: #101010;
+  line-height: 2em;
+  margin-bottom: 2%;
+  font-weight: 600;
+  font-family: Montserrat-Bold, Montserrat;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container {
+  width: 80%;
+  margin: 0 auto;
+  max-width: 101.25rem;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .title {
+  font-size: 3em;
+  font-weight: 600;
+  color: #101010;
+  text-align: center;
+  padding-top: 2.3%;
+  padding-bottom: 2%;
+  line-height: 2em;
+  font-family: "LATO-MEDIUM";
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table {
+  margin-bottom: 4%;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row {
+  display: table-row;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .left {
+  width: 46.7%;
+  text-align: center;
+  vertical-align: middle;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .left img {
+  border-radius: 1rem;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right {
+  width: 46.7%;
+  text-align: center;
+  vertical-align: middle;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right p {
+  margin-left: 5%;
+  text-align: left;
+  display: inline-block;
+  width: 90%;
+  font-size: 1.25rem;
+  color: #101010;
+  line-height: 2em;
+  margin-bottom: 2%;
+  font-family: Montserrat-Bold, Montserrat;
+  margin-right: 10%;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right .des {
+  font-size: 16px;
+  color: #737373;
+  line-height: 1.6rem;
+  font-family: Montserrat-Medium, Montserrat;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .Table-Cell {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .center {
+  width: 6.6%;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des {
+  font-size: 1rem;
+  color: #737373;
+  line-height: 1.6rem;
+  font-family: Montserrat-Medium, Montserrat;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des,
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .subtitle {
+  text-align: left;
+}
+.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 img {
+  border-radius: 1rem;
+}
diff --git a/public/static/index/css/products.css b/public/static/index/css/products.css
new file mode 100755
index 00000000..95fab4de
--- /dev/null
+++ b/public/static/index/css/products.css
@@ -0,0 +1,88 @@
+@charset "UTF-8";
+.orico_Page_products {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f9f9f9;
+}
+.orico_Page_products p, .orico_Page_products a, .orico_Page_products div, .orico_Page_products span {
+  font-family: "Microsoft YaHei", "Arial", sans-serif;
+}
+.orico_Page_products .pageMain {
+  width: 85%;
+  padding: 50px 0 10px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  margin-top: 2%;
+}
+.orico_Page_products .pageMain .ori-pd-title {
+  font-size: 1.5em;
+  color: #101010;
+  margin-bottom: 1.25rem;
+}
+.orico_Page_products .pageMain .ori-pd-list {
+  display: flex;
+  flex-wrap: wrap; /* 自动换行 */
+  justify-content: flex-start; /* 水平方向均匀分布 */
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem {
+  width: 24%;
+  float: left;
+  background: #fff;
+  padding-bottom: 1em;
+  margin-top: 15px;
+  position: relative;
+  margin-right: 1%;
+  padding-top: 30px;
+  padding-bottom: 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg {
+  display: inline-block;
+  width: 100%;
+  max-width: 220px;
+  margin: 25px auto;
+  display: none;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg-show {
+  display: block;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
+  color: #101010;
+  font-size: 1.125rem;
+  padding-bottom: 0.625rem;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
+  font-size: 1.125rem;
+  color: #737373;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
+  width: 92%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.3125rem;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 0.65rem;
+  cursor: pointer;
+  margin: 0 0.3125rem;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.65rem;
+}
+.orico_Page_products .pageMain .ori-pd-list .oripditem:hover {
+  box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
+  transform: translate3d(0, -2px, 0);
+}
diff --git a/public/static/index/css/products_detail.css b/public/static/index/css/products_detail.css
new file mode 100755
index 00000000..96744bdd
--- /dev/null
+++ b/public/static/index/css/products_detail.css
@@ -0,0 +1,393 @@
+@charset "UTF-8";
+.orico_Page_prdetail {
+  width: 100%;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f1f1f1;
+  /* 模态框背景 */
+  /* 模态框内容 */
+}
+.orico_Page_prdetail p,
+.orico_Page_prdetail a,
+.orico_Page_prdetail div,
+.orico_Page_prdetail span {
+  font-family: "Microsoft YaHei", "Arial", sans-serif;
+}
+.orico_Page_prdetail .oriprdetail {
+  display: flex;
+  flex-direction: column;
+  padding: 2.5rem 0 1.375rem 0;
+  position: relative;
+  margin-top: 3%;
+}
+.orico_Page_prdetail .oriprdetail .product_address {
+  width: 70%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 0.75rem;
+  margin-bottom: 1.3%;
+}
+.orico_Page_prdetail .oriprdetail .product_address .pathname {
+  font-size: 0.75rem;
+  color: #737373;
+}
+.orico_Page_prdetail .oriprdetail .product_address .pathname:first {
+  color: #333;
+}
+.orico_Page_prdetail .oriprdetail .product_address .pathname:hover {
+  color: #004bfa;
+}
+.orico_Page_prdetail .oriprdetail .product_address .arrow {
+  position: relative;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-right: 1px solid #737373;
+  border-bottom: 1px solid #737373;
+  transform: rotate(315deg);
+  margin: 0 0.625rem;
+}
+.orico_Page_prdetail .oriprdetail .product_address .arrow:last-child {
+  display: none;
+}
+.orico_Page_prdetail .oriprdetail .cp {
+  width: 70%;
+  margin: 0 auto;
+  margin-bottom: 1.875rem;
+  overflow: hidden;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl {
+  width: 48%;
+  margin-right: 3em;
+  float: left;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 31.875rem;
+  display: flex;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg {
+  width: 80px;
+  overflow: hidden;
+  float: left;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg #imageMenu {
+  width: 100%;
+  overflow: hidden;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg #imageMenu li {
+  width: 5rem;
+  height: 5.4375rem;
+  overflow: hidden;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg #imageMenu li img {
+  width: 98%;
+  cursor: pointer;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg {
+  position: relative;
+  margin: 0 auto;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg #midimg {
+  width: 100%;
+  max-width: 510px;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .scrollbutton {
+  width: 3.3125rem;
+  height: 4.5rem;
+  overflow: hidden;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp,
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled {
+  background: url(../productDetailimg/fl.png) no-repeat;
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  transform: translate(0%, -50%);
+  cursor: pointer;
+  left: -2%;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp:hover,
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled:hover {
+  background: url(../productDetailimg/fl1.png) no-repeat;
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown,
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled {
+  background: url(../productDetailimg/rh.png) no-repeat;
+  position: absolute;
+  z-index: 1;
+  right: -2%;
+  top: 50%;
+  transform: translate(0%, -50%);
+}
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown:hover,
+.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled:hover {
+  background: url(../productDetailimg/rh1.png) no-repeat;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh {
+  width: 45%;
+  float: left;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon {
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .ctit1 {
+  font-size: 1.25em;
+  color: #333;
+  line-height: 1.875em;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.5rem;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg {
+  margin-top: 0.5rem;
+  padding: 1rem 0;
+  font-size: 0.75rem;
+  border-bottom: 1px solid #ddd;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table {
+  display: table;
+  width: 100%;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row {
+  display: table-row;
+  width: 100%;
+  clear: both;
+  overflow: hidden;
+  font-size: 0.875em;
+  color: #737373;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .Table-Cell {
+  display: table-cell;
+  margin: 0;
+  padding: 4px 0;
+  line-height: 1.4em;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms2 {
+  width: 5%;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms3 {
+  width: 30%;
+  color: #333;
+  font-size: 14px;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms4 {
+  width: 65%;
+  font-size: 14px;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dt {
+  margin-right: 0px;
+  line-height: 40px;
+  font-weight: 600;
+  font-size: 1rem;
+  color: #666;
+  font-size: 0.875rem;
+  margin-right: 1.875rem;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok {
+  width: auto;
+  float: left;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor {
+  width: 20px;
+  height: 20px;
+  float: left;
+  margin-right: 9px;
+  cursor: pointer;
+  margin-bottom: 2px;
+  border: 1px solid #d4d4d4;
+  border-radius: 10px;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor img {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor.on {
+  width: 20px;
+  height: 20px;
+  border-radius: 12px;
+  border: 2px solid #737373;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .buy {
+  padding: 1rem 0;
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .buy .thebt {
+  font-size: 0.875rem;
+  padding: 0.5rem 30px;
+  text-align: center;
+  margin-right: 1.125rem;
+  border-radius: 32px;
+  cursor: pointer;
+  margin-bottom: 1.125rem;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .buy .bttype1 {
+  border: 0.0625rem solid #0044e2;
+  background: #0044e2;
+  color: #fff;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .buy .bttype2 {
+  border: 0.0625rem solid #0044e2;
+  color: #0044e2;
+  background: #fff;
+}
+.orico_Page_prdetail .oriprdetail .cp .cprh .buy .bttype3 {
+  border: 0.0625rem solid #009fdf;
+  background: #009fdf;
+  color: #fff;
+}
+.orico_Page_prdetail .oriprdetail .oriprInfo {
+  width: 100%;
+  background: #fff;
+  padding: 20px 0 21px 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.orico_Page_prdetail .oriprdetail .oriprInfo img {
+  max-width: 100%;
+}
+.orico_Page_prdetail .oriprdetail .oriprInfo .titleprinfo {
+  text-align: center;
+  display: inline-block;
+  margin: 0 auto;
+  font-size: 1rem;
+  font-weight: bold;
+}
+.orico_Page_prdetail .oriprdetail .oriprInfo .products_des {
+  width: 75%;
+  margin-bottom: 50px;
+}
+.orico_Page_prdetail .oriprdetail .oriprInfo .products_des img {
+  text-align: center;
+  display: block;
+}
+.orico_Page_prdetail .XJmodal {
+  display: none;
+  position: fixed;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.orico_Page_prdetail .XJmodal-content {
+  background-color: #fefefe;
+  margin: 5% auto;
+  padding: 40px;
+  padding-top: 10px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 600px;
+  z-index: 111;
+  /* 关闭按钮 */
+}
+.orico_Page_prdetail .XJmodal-content h2 {
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  padding-bottom: 40px;
+}
+.orico_Page_prdetail .XJmodal-content .close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.orico_Page_prdetail .XJmodal-content .close:hover,
+.orico_Page_prdetail .XJmodal-content .close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20px;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  margin-right: 20px;
+  margin-bottom: 15px;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group .detail-w {
+  width: 40%;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group .detail-w01 {
+  width: 90%;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=text],
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=email],
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group select,
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group textarea {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group textarea {
+  min-height: 100px;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group input {
+  height: 2.75rem;
+  line-height: 2.75rem;
+  padding: 0 0.625rem;
+  margin-top: 0.625rem;
+  border: 1px solid #dbdbdb;
+  display: inline-block;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group select {
+  height: 2.75rem;
+  line-height: 2.75rem;
+  padding: 0 0.625rem;
+  margin-top: 0.625rem;
+  border: 1px solid #dbdbdb;
+  display: inline-block;
+}
+.orico_Page_prdetail .XJmodal-content .tkitem > .form-group:nth-child(2n) {
+  margin-right: 0;
+}
+.orico_Page_prdetail .XJmodal-content .submit-btn {
+  background-color: #004CFA;
+  color: white;
+  padding: 10px 100px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 0 auto;
+  display: block;
+}
+.orico_Page_prdetail .XJmodal-content .submit-btn:hover {
+  background-color: #004CFA;
+}
diff --git a/public/static/index/css/public.css b/public/static/index/css/public.css
new file mode 100755
index 00000000..5afbd503
--- /dev/null
+++ b/public/static/index/css/public.css
@@ -0,0 +1,153 @@
+@font-face {
+	font-family: "Montserrat";
+	src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Montserrat-Bold";
+	src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Montserrat-Medium";
+	src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}
+
+::-webkit-scrollbar {
+	width: 0.625rem;
+	background: #d2eafb;
+}
+
+::-webkit-scrollbar-track {
+	border-radius: 0.5rem;
+	background: #eeeeee;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	font-family: 'Montserrat';
+}
+
+*:hover {
+	transition: all 0.2s linear;
+	-webkit-transition: all 0.2s linear;
+}
+
+body {
+	font-size: 1.2em;
+	font-weight: 400;
+	color: #333;
+}
+
+select,
+input,
+textarea,
+button {
+	outline: none;
+	font-size: 0.875rem;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	color: #414446;
+	-moz-border-radius: 0;
+	-ms-border-radius: 0;
+	-o-border-radius: 0;
+}
+
+a {
+	color: #000;
+	cursor: pointer;
+	text-decoration: none;
+	transition: all 0.2s linear;
+	-webkit-transition: all 0.2s linear;
+	text-decoration: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+	display: block;
+}
+
+ul li {
+	padding: 2px 0;
+	list-style-type: none;
+}
+
+ol,
+ul,
+a {
+	list-style: none;
+}
+
+/* 修改垂直滚动条 */
+::-webkit-scrollbar {
+	width: 6px;
+	/* 修改宽度 */
+}
+
+/* 修改滚动条轨道背景色 */
+::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+/* 修改滚动条滑块颜色 */
+::-webkit-scrollbar-thumb {
+	background-color: #ccc;
+}
+
+/* 修改滚动条滑块悬停时的颜色 */
+::-webkit-scrollbar-thumb:hover {
+	background-color: #D8DFE8;
+}
+
+/* 修改滚动条滑块移动时的颜色 */
+::-webkit-scrollbar-thumb:active {
+	background-color: #D8DFE8;
+}
+
+/* 修改滚动条滑块的圆角 */
+::-webkit-scrollbar-thumb {
+	border-radius: 5px;
+}
+
+/* 整体滚动条 */
+* {
+	scrollbar-width: thin;
+	/* 滚动条宽度 */
+	scrollbar-color: #D8DBE6 transparent;
+	/* 滚动条颜色（滑块颜色 轨道颜色） */
+}
+
+/* 滚动条轨道 */
+*::-moz-scrollbar-track {
+	background-color: #f0f0f0;
+}
+
+/* 滚动条滑块 */
+*::-moz-scrollbar-thumb {
+	background-color: #D8DBE6;
+	border-radius: 5px;
+	/* 滑块的圆角 */
+}
+
+/* 滚动条的上下箭头 */
+*::-moz-scrollbar-button {
+	display: none;
+	/* 隐藏上下箭头 */
+}
+
+/* 滚动条的上下箭头：向上箭头 */
+*::-moz-scrollbar-button:vertical:decrement {
+	display: none;
+}
+
+/* 滚动条的上下箭头：向下箭头 */
+*::-moz-scrollbar-button:vertical:increment {
+	display: none;
+}
\ No newline at end of file
diff --git a/public/static/index/fonts/Montserrat-Bold.ttf b/public/static/index/fonts/Montserrat-Bold.ttf
new file mode 100755
index 00000000..efddc834
Binary files /dev/null and b/public/static/index/fonts/Montserrat-Bold.ttf differ
diff --git a/public/static/index/fonts/Montserrat-Medium.ttf b/public/static/index/fonts/Montserrat-Medium.ttf
new file mode 100755
index 00000000..dfc7e2fc
Binary files /dev/null and b/public/static/index/fonts/Montserrat-Medium.ttf differ
diff --git a/public/static/index/fonts/Montserrat-Regular.ttf b/public/static/index/fonts/Montserrat-Regular.ttf
new file mode 100755
index 00000000..aa9033a8
Binary files /dev/null and b/public/static/index/fonts/Montserrat-Regular.ttf differ
diff --git a/public/static/index/fonts/Montserrat-SemiBold.ttf b/public/static/index/fonts/Montserrat-SemiBold.ttf
new file mode 100755
index 00000000..cbf44db9
Binary files /dev/null and b/public/static/index/fonts/Montserrat-SemiBold.ttf differ
diff --git a/public/static/index/images/2577U3-L1.jpg b/public/static/index/images/2577U3-L1.jpg
new file mode 100644
index 00000000..a7d457a7
Binary files /dev/null and b/public/static/index/images/2577U3-L1.jpg differ
diff --git a/public/static/index/images/AU.png b/public/static/index/images/AU.png
new file mode 100644
index 00000000..961845fe
Binary files /dev/null and b/public/static/index/images/AU.png differ
diff --git a/public/static/index/images/BR.png b/public/static/index/images/BR.png
new file mode 100644
index 00000000..8a0db435
Binary files /dev/null and b/public/static/index/images/BR.png differ
diff --git a/public/static/index/images/CN.png b/public/static/index/images/CN.png
new file mode 100644
index 00000000..67e9f0c0
Binary files /dev/null and b/public/static/index/images/CN.png differ
diff --git a/public/static/index/images/ID.png b/public/static/index/images/ID.png
new file mode 100644
index 00000000..06394f2b
Binary files /dev/null and b/public/static/index/images/ID.png differ
diff --git a/public/static/index/images/IR.png b/public/static/index/images/IR.png
new file mode 100644
index 00000000..4d843ffc
Binary files /dev/null and b/public/static/index/images/IR.png differ
diff --git a/public/static/index/images/MX.png b/public/static/index/images/MX.png
new file mode 100644
index 00000000..789d901e
Binary files /dev/null and b/public/static/index/images/MX.png differ
diff --git a/public/static/index/images/NL.png b/public/static/index/images/NL.png
new file mode 100644
index 00000000..6f9a11ee
Binary files /dev/null and b/public/static/index/images/NL.png differ
diff --git a/public/static/index/images/TH.png b/public/static/index/images/TH.png
new file mode 100644
index 00000000..fb7d64f0
Binary files /dev/null and b/public/static/index/images/TH.png differ
diff --git a/public/static/index/images/TR.png b/public/static/index/images/TR.png
new file mode 100644
index 00000000..801bcaf8
Binary files /dev/null and b/public/static/index/images/TR.png differ
diff --git a/public/static/index/images/US.png b/public/static/index/images/US.png
new file mode 100644
index 00000000..e8f51085
Binary files /dev/null and b/public/static/index/images/US.png differ
diff --git a/public/static/index/images/VN.png b/public/static/index/images/VN.png
new file mode 100644
index 00000000..9a796839
Binary files /dev/null and b/public/static/index/images/VN.png differ
diff --git a/public/static/index/images/ba-arrow.png b/public/static/index/images/ba-arrow.png
new file mode 100644
index 00000000..62877752
Binary files /dev/null and b/public/static/index/images/ba-arrow.png differ
diff --git a/public/static/index/images/black-down.png b/public/static/index/images/black-down.png
new file mode 100644
index 00000000..f6de96b3
Binary files /dev/null and b/public/static/index/images/black-down.png differ
diff --git a/public/static/index/images/bottomlogo.png b/public/static/index/images/bottomlogo.png
new file mode 100644
index 00000000..d982f292
Binary files /dev/null and b/public/static/index/images/bottomlogo.png differ
diff --git a/public/static/index/images/icon-4-01.png b/public/static/index/images/icon-4-01.png
new file mode 100644
index 00000000..930fdc60
Binary files /dev/null and b/public/static/index/images/icon-4-01.png differ
diff --git a/public/static/index/images/icon-4-02.png b/public/static/index/images/icon-4-02.png
new file mode 100644
index 00000000..eaf397e0
Binary files /dev/null and b/public/static/index/images/icon-4-02.png differ
diff --git a/public/static/index/images/icon-4-03.png b/public/static/index/images/icon-4-03.png
new file mode 100644
index 00000000..c6268a8f
Binary files /dev/null and b/public/static/index/images/icon-4-03.png differ
diff --git a/public/static/index/images/icon-4-04.png b/public/static/index/images/icon-4-04.png
new file mode 100644
index 00000000..47af6487
Binary files /dev/null and b/public/static/index/images/icon-4-04.png differ
diff --git a/public/static/index/images/icon-language.png b/public/static/index/images/icon-language.png
new file mode 100644
index 00000000..8f3c7fb8
Binary files /dev/null and b/public/static/index/images/icon-language.png differ
diff --git a/public/static/index/images/icon-search.png b/public/static/index/images/icon-search.png
new file mode 100644
index 00000000..ef675d40
Binary files /dev/null and b/public/static/index/images/icon-search.png differ
diff --git a/public/static/index/images/indeximg1.jpg b/public/static/index/images/indeximg1.jpg
new file mode 100644
index 00000000..2ffb1074
Binary files /dev/null and b/public/static/index/images/indeximg1.jpg differ
diff --git a/public/static/index/images/indeximg2.jpg b/public/static/index/images/indeximg2.jpg
new file mode 100644
index 00000000..9ffd4d33
Binary files /dev/null and b/public/static/index/images/indeximg2.jpg differ
diff --git a/public/static/index/images/logo.png b/public/static/index/images/logo.png
new file mode 100644
index 00000000..2492eddc
Binary files /dev/null and b/public/static/index/images/logo.png differ
diff --git a/public/static/index/images/more2.png b/public/static/index/images/more2.png
new file mode 100644
index 00000000..ab1db1e4
Binary files /dev/null and b/public/static/index/images/more2.png differ
diff --git a/public/static/index/images/shopico.png b/public/static/index/images/shopico.png
new file mode 100644
index 00000000..e3c3131a
Binary files /dev/null and b/public/static/index/images/shopico.png differ
diff --git a/public/static/index/images/wx.png b/public/static/index/images/wx.png
new file mode 100644
index 00000000..4580b38c
Binary files /dev/null and b/public/static/index/images/wx.png differ
diff --git a/public/static/index/js/before-after.min.js b/public/static/index/js/before-after.min.js
new file mode 100755
index 00000000..1045b18b
--- /dev/null
+++ b/public/static/index/js/before-after.min.js
@@ -0,0 +1 @@
+!function(a){function b(b,c,d){b.on("mousedown.ba-events touchstart.ba-events",function(e){b.addClass("ba-draggable"),c.addClass("ba-resizable");var f=e.pageX?e.pageX:e.originalEvent.touches[0].pageX,g=b.outerWidth(),h=b.offset().left+g-f,i=d.offset().left,j=d.outerWidth();minLeft=i+10,maxLeft=i+j-g-10,b.parents().on("mousemove.ba-events touchmove.ba-events",function(b){var c=b.pageX?b.pageX:b.originalEvent.touches[0].pageX;leftValue=c+h-g,leftValue<minLeft?leftValue=minLeft:leftValue>maxLeft&&(leftValue=maxLeft),widthValue=100*(leftValue+g/2-i)/j+"%",a(".ba-draggable").css("left",widthValue),a(".ba-resizable").css("width",widthValue)}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events",function(){b.removeClass("ba-draggable"),c.removeClass("ba-resizable"),a(this).off(".ba-events")}),e.preventDefault()})}a.fn.beforeAfter=function(){var c=this,d=c.width()+"px";c.find(".resize img").css("width",d),b(c.find(".handle"),c.find(".resize"),c),a(window).resize(function(){var a=c.width()+"px";c.find(".resize img").css("width",a)})}}(jQuery);
\ No newline at end of file
diff --git a/public/static/index/js/headfoot.js b/public/static/index/js/headfoot.js
new file mode 100644
index 00000000..da6690c2
--- /dev/null
+++ b/public/static/index/js/headfoot.js
@@ -0,0 +1,51 @@
+//加载公共头部和尾部
+async function loadHTML(url, targetId) {
+	try {
+		const response = await fetch(url);
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`);
+		}
+		const html = await response.text();
+		document.getElementById(targetId).innerHTML = html;
+	} catch (error) {
+		console.error('Error loading HTML:', error);
+	}
+}
+// 加载头部
+loadHTML('head.html', 'header');
+// 加载尾部
+loadHTML('footer.html', 'footer');
+$(document).ready(function() {
+	// 封装一个函数用于处理鼠标悬停显示和隐藏内容
+	function handleHover($element, $content) {
+		$element.mouseenter(function() {
+			$content.stop(true, true).slideDown(400);
+		}).mouseleave(function() {
+			$content.stop(true, true).slideUp(400);
+		});
+	}
+	// 处理第一个导航项
+	handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
+	// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
+	$('.navItem_cyleft li').mouseenter(function() {
+		$(this).addClass('it_active').siblings().removeClass('it_active');
+	});
+	// 处理第5 - 8个导航项
+	for (let i = 4; i < 8; i++) {
+		handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
+	}
+	// 点击搜索
+	$('#openModalBtn').click(function() {
+		$('#scmodal').toggle();
+	});
+	$('.close-btn').click(function() {
+		$('#scmodal').hide();
+	});
+	// 点击选择国家
+	$('#countrycheck').click(function() {
+		$('#top-country').toggle();
+	});
+	$('.closecountrybt').click(function() {
+		$('#top-country').hide();
+	});
+});
\ No newline at end of file
diff --git a/public/static/index/temp_images/2.jpg b/public/static/index/temp_images/2.jpg
new file mode 100644
index 00000000..7df3030d
Binary files /dev/null and b/public/static/index/temp_images/2.jpg differ
diff --git a/public/static/index/temp_images/2022.jpg b/public/static/index/temp_images/2022.jpg
new file mode 100644
index 00000000..00a61222
Binary files /dev/null and b/public/static/index/temp_images/2022.jpg differ
diff --git a/public/static/index/temp_images/3.jpg b/public/static/index/temp_images/3.jpg
new file mode 100644
index 00000000..c7d5f032
Binary files /dev/null and b/public/static/index/temp_images/3.jpg differ
diff --git a/public/static/index/temp_images/9858RU3-800×800-1.jpg b/public/static/index/temp_images/9858RU3-800×800-1.jpg
new file mode 100644
index 00000000..733d7bec
Binary files /dev/null and b/public/static/index/temp_images/9858RU3-800×800-1.jpg differ
diff --git a/public/static/index/temp_images/PC-videoimg.jpg b/public/static/index/temp_images/PC-videoimg.jpg
new file mode 100644
index 00000000..fdee6365
Binary files /dev/null and b/public/static/index/temp_images/PC-videoimg.jpg differ
diff --git a/public/static/index/temp_images/ba-arrow.png b/public/static/index/temp_images/ba-arrow.png
new file mode 100644
index 00000000..62877752
Binary files /dev/null and b/public/static/index/temp_images/ba-arrow.png differ
diff --git a/public/static/index/temp_images/banner.jpg b/public/static/index/temp_images/banner.jpg
new file mode 100644
index 00000000..ab91a934
Binary files /dev/null and b/public/static/index/temp_images/banner.jpg differ
diff --git a/public/static/index/temp_images/banner2.jpg b/public/static/index/temp_images/banner2.jpg
new file mode 100644
index 00000000..5b59eec2
Binary files /dev/null and b/public/static/index/temp_images/banner2.jpg differ
diff --git a/public/static/index/temp_images/banner3.jpg b/public/static/index/temp_images/banner3.jpg
new file mode 100644
index 00000000..5b7a2c66
Binary files /dev/null and b/public/static/index/temp_images/banner3.jpg differ
diff --git a/public/static/index/temp_images/contact-Us.png b/public/static/index/temp_images/contact-Us.png
new file mode 100644
index 00000000..d572106f
Binary files /dev/null and b/public/static/index/temp_images/contact-Us.png differ
diff --git a/public/static/index/temp_images/customer-service.png b/public/static/index/temp_images/customer-service.png
new file mode 100644
index 00000000..275c0334
Binary files /dev/null and b/public/static/index/temp_images/customer-service.png differ
diff --git a/public/static/index/temp_images/indeximg1.jpg b/public/static/index/temp_images/indeximg1.jpg
new file mode 100644
index 00000000..2ffb1074
Binary files /dev/null and b/public/static/index/temp_images/indeximg1.jpg differ
diff --git a/public/static/index/temp_images/indeximg2.jpg b/public/static/index/temp_images/indeximg2.jpg
new file mode 100644
index 00000000..9ffd4d33
Binary files /dev/null and b/public/static/index/temp_images/indeximg2.jpg differ
diff --git a/public/static/index/temp_images/lefta.png b/public/static/index/temp_images/lefta.png
new file mode 100644
index 00000000..91a233ff
Binary files /dev/null and b/public/static/index/temp_images/lefta.png differ
diff --git a/public/static/index/temp_images/more2.png b/public/static/index/temp_images/more2.png
new file mode 100644
index 00000000..ab1db1e4
Binary files /dev/null and b/public/static/index/temp_images/more2.png differ
diff --git a/public/static/index/temp_images/raid2.png b/public/static/index/temp_images/raid2.png
new file mode 100644
index 00000000..bd5f4a54
Binary files /dev/null and b/public/static/index/temp_images/raid2.png differ
diff --git a/public/static/index/temp_images/rightcheck.png b/public/static/index/temp_images/rightcheck.png
new file mode 100644
index 00000000..c60fe43a
Binary files /dev/null and b/public/static/index/temp_images/rightcheck.png differ
diff --git a/public/static/index/temp_images/s1.png b/public/static/index/temp_images/s1.png
new file mode 100644
index 00000000..8c46a1c6
Binary files /dev/null and b/public/static/index/temp_images/s1.png differ
diff --git a/public/static/index/temp_images/s2.png b/public/static/index/temp_images/s2.png
new file mode 100644
index 00000000..777f952f
Binary files /dev/null and b/public/static/index/temp_images/s2.png differ
diff --git a/public/static/index/temp_images/s3.png b/public/static/index/temp_images/s3.png
new file mode 100644
index 00000000..aa52a6fd
Binary files /dev/null and b/public/static/index/temp_images/s3.png differ
diff --git a/public/static/index/temp_images/s4.png b/public/static/index/temp_images/s4.png
new file mode 100644
index 00000000..c380f94c
Binary files /dev/null and b/public/static/index/temp_images/s4.png differ
diff --git a/public/static/index/temp_images/幻影-S40系列-800-1.jpg b/public/static/index/temp_images/幻影-S40系列-800-1.jpg
new file mode 100644
index 00000000..946fa6cc
Binary files /dev/null and b/public/static/index/temp_images/幻影-S40系列-800-1.jpg differ