v2

+<?php
+
+namespace App\Http\Controllers\V2;
+
+use Illuminate\Support\Facades\Cache;
+
+/**
+ * v2 版的功能基础类
+ * @author：dc
+ * @time 2022/12/28 9:25
+ * Class Base
+ * @package App\Http\Controllers\V2
+ */
+class Base {
+
+    /**
+     * 构造
+     * Base constructor.
+     */
+    public function __construct()
+    {
+
+    }
+
+
+
+
+    /**
+     * 获取数据
+     * @param $url
+     * @param array $data
+     * @return array|mixed
+     * @author：dc
+     * @time 2022/12/28 9:32
+     */
+    protected final function getData($url,$data=[]){
+
+        //        $url = 'https://oa.shopk.com/api/shopk/'.$url;
+        $url = 'http://local.oa.shopk.com/api/shopk/'.$url;
+
+        // 缓存
+        $cacheKey = md5($url.':'.json_encode($data));
+        if(Cache::has($cacheKey)){
+            return Cache::get($cacheKey);
+        }
+
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_TIMEOUT, 30);
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+        curl_setopt($ch, CURLOPT_POST, true);
+        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
+        $a = curl_exec($ch);
+//        $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        $a = json_decode($a,true);
+
+        // 缓存1小时
+        Cache::set($cacheKey,$a['data']??[],3600);
+
+        return $a['data']??[];
+    }
+
+}

+<?php
+
+namespace App\Http\Controllers\V2;
+
+use Illuminate\Support\Facades\View;
+
+/**
+ * 第二版的控制器
+ * @author：dc
+ * @time 2022/12/28 9:26
+ * Class Index
+ * @package App\Http\Controllers\V2
+ */
+class Index extends Base
+{
+
+
+    /**
+     * 首页
+     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+     * @author：dc
+     * @time 2022/11/16 9:06
+     */
+    public function home()
+    {
+
+        return view('v2/home');
+    }
+
+
+    /**
+     * 博客
+     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+     * @author：dc
+     * @time 2022/12/28 10:13
+     */
+    public function blog()
+    {
+
+        $lists  =   $this->getData('blog');
+        if(!empty($lists['links'])){
+            foreach ($lists['links'] as &$link){
+                preg_match("/page=(\d+)/i",$link['url'],$p);
+                $link['page'] = $p[1]??0;
+            }
+        }
+        return view('v2/blog/lists',[
+            'lists' =>  $lists
+        ]);
+    }
+
+    /**
+     * 博客详情
+     * @param $id
+     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+     * @author：dc
+     * @time 2022/12/28 10:13
+     */
+    public function blog_info($id){
+
+        $data  =   $this->getData('blog/'.$id,['prev'=>1,'next'=>1,'correlation'=>1]);
+
+        if(!$data){
+            return redirect('/');
+        }
+
+        return view('v2/blog/info',[
+            'data' =>  $data
+        ]);
+    }
+
+
+
+
+
+}

@@ -99,6 +99,6 @@ return [
     |
     |
     */
     */
 
 
-    'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_cache'),
+    'prefix' => env('CACHE_PREFIX', 'shopk_home'),
 
 
 ];
 ];

+Copyright (c) 2014, Indian Type Foundry (info@indiantypefoundry.com).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

+/*Swiper Banner*/
+if ($('.swiper-wrapper .swiper-slide').length < 2) { $('.swiper-pagination').hide() }
+var mySwiper = new Swiper('.slider_banner', {
+  effect: 'fade',
+  speed: 1000,
+  fadeEffect: {
+    crossFade: true,
+  },
+  autoplay: {
+    delay: 5000,
+    disableOnInteraction: false,
+  },
+  navigation: {
+    nextEl: '.banner_button_next',
+    prevEl: '.banner_button_prev',
+  },
+  pagination: {
+    el: '.slider_banner .swiper-pagination',
+    clickable: true,
+  },
+  on: {
+
+  },
+
+});
+
+var swiper = new Swiper('.product-slide', {
+  slidesPerView: 3,
+  pagination: {
+    el: '.product-slide .swiper-pagination',
+    clickable: true,
+  },
+  navigation: {
+    nextEl: '.product-slide .swiper-button-next',
+    prevEl: '.product-slide .swiper-button-prev',
+  },
+  breakpoints: {
+    640: {
+      slidesPerView: 2
+    },
+    480: {
+      slidesPerView: 1,
+      loop: true
+    }
+  }
+})
+
+
+var mHeadTop = $('.web_head').offset().top
+var $backToTopTxt = "TOP",
+  $backToTopEle = $('<span class="gotop"></span>').appendTo($("body"))
+    .html('<em>' + $backToTopTxt + '</em>').attr("title", $backToTopTxt).click(function () {
+      $("html, body").animate({ scrollTop: 0 }, 600);
+    }),
+  $backToTopFun = function () {
+    var st = $(document).scrollTop(),
+      winh = $(window).height();
+    (st > mHeadTop) ? $backToTopEle.addClass('active') : $backToTopEle.removeClass('active');
+    if (!window.XMLHttpRequest) {
+      $backToTopEle.css("top", st + winh - 210);
+    }
+  };
+$(window).bind("scroll", $backToTopFun);
+$(function () { $backToTopFun(); });
+
+
+
+// get window size
+var winWidth = 0;
+var winHeight = 0;
+
+function getWinSize() {
+  if (window.innerWidth) {
+    winWidth = window.innerWidth;
+  } else if ((document.body) && (document.body.clientWidth)) {
+    winWidth = document.body.clientWidth;
+  }
+  if (window.innerHeight) {
+    winHeight = window.innerHeight;
+  } else if ((document.body) && (document.body.clientHeight)) {
+    winHeight = document.body.clientHeight;
+  }
+  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
+    if (window.innerWidth && window.innerHeight) {
+      winWidth = window.innerWidth;
+      winHeight = window.innerHeight;
+    } else {
+      winHeight = document.documentElement.clientHeight;
+      winWidth = document.documentElement.clientWidth;
+    }
+  }
+}
+getWinSize();
+
+
+var $nav = $('.web_head'),
+  navTop = $('.nav_wrap').offset().top,
+  headH = $nav.outerHeight(),
+  winTop_1 = 0,
+  spr = $('body').height() - $nav.height(),
+  holder = jQuery('<div class="head_holder">');
+
+function fixedTop() {
+  var winTop_2 = $(window).scrollTop();
+  holder.css('height', $('.head_bottom').outerHeight());
+  if (winTop_2 > headH && winWidth >= 950) {
+    holder.show().appendTo($nav);
+    $nav.addClass('fixed-nav');
+    $nav.parents('body').addClass('fixed-body');
+    setTimeout(function () { $nav.addClass('fixed-nav-active') });
+  } else {
+    holder.hide();
+    $nav.removeClass('fixed-nav fixed-nav-active');
+    $nav.parents('body').removeClass('fixed-body');
+  }
+  if (winTop_2 > winTop_1 && winWidth >= 950) {
+    $nav.removeClass('fixed-nav-appear');
+  } else if (winTop_2 < winTop_1) {
+    $nav.addClass('fixed-nav-appear');
+  }
+  winTop_1 = $(window).scrollTop();
+}
+fixedTop();
+$(window).on('scroll', function () {
+  fixedTop();
+})
+$(window).on('resize', function () {
+  fixedTop();
+})
+
+
+
+
+function mSizeChange() {
+  getWinSize();
+  if (winWidth <= 950) {
+    if ($('.mobile-head-items').length < 1) {
+      var mobileService = '<div class="mobile-head-items"><div class="mobile-head-item mobile-head-nav"><div class="title"></div><div class="main-content-wrap side-content-wrap"><div class="content-wrap"></div></div></div></div>'
+      $('body').append(mobileService)
+      if ($('body .aside').length > 0) {
+        $('.mobile-head-items').append('<div class="mobile-head-item mobile-head-aside"><div class="title"></div><div class="main-content-wrap side-content-wrap"><div class="content-wrap"></div></div></div>')
+      }
+      $('.mobile-head-item').each(function () {
+        $(this).find('.title').click(function () {
+          if ($(this).parents('.mobile-head-item').find('.main-content-wrap').length > 0) {
+            var pItem = $(this).parents('.mobile-head-item')
+            if (!pItem.find('.main-content-wrap').hasClass('show-content-wrap')) {
+              pItem.find('.main-content-wrap').addClass('show-content-wrap')
+              pItem.find('.side-content-wrap').stop().animate({ 'left': '0' }, 300)
+              pItem.find('.middle-content-wrap').addClass('middle-show-content-wrap')
+              pItem.find('.side-content-wrap').append("<b class='mobile-ico-close'></b>")
+              pItem.siblings('.mobile-head-item').find('.main-content-wrap').removeClass('show-content-wrap')
+              pItem.siblings('.mobile-head-item').find('.side-content-wrap').stop().animate({ 'left': '-70%' }, 300)
+              pItem.siblings('.mobile-head-item').find('.middle-content-wrap').removeClass('middle-show-content-wrap')
+              pItem.siblings('.mobile-head-item').find('.side-content-wrap .mobile-ico-close').remove()
+              if ($('.mobile-head-items').find('.mobile-body-mask').length < 1) {
+                $('.mobile-head-items').append('<div class="mobile-body-mask"></div>')
+              }
+            } else {
+              pItem.find('.main-content-wrap').removeClass('show-content-wrap')
+              pItem.find('.side-content-wrap').stop().animate({ 'left': '-70%' }, 300)
+              pItem.find('.middle-content-wrap').removeClass('middle-show-content-wrap')
+              pItem.find('.side-content-wrap .mobile-ico-close').remove()
+            }
+            $('.mobile-body-mask').click(function () {
+              $('.mobile-body-mask').remove()
+              $('.mobile-head-item .main-content-wrap').removeClass('show-content-wrap')
+              $('.mobile-head-item .side-content-wrap').animate({ 'left': '-70%' }, 300)
+              $('.mobile-head-item .middle-content-wrap').removeClass('middle-show-content-wrap')
+              $('.mobile-head-item .side-content-wrap .mobile-ico-close').remove()
+            })
+            $('.mobile-ico-close').click(function () {
+              $('.mobile-body-mask').remove()
+              $('.mobile-head-item .main-content-wrap').removeClass('show-content-wrap')
+              $('.mobile-head-item .side-content-wrap').stop().animate({ 'left': '-70%' }, 300)
+              $('.mobile-head-item .middle-content-wrap').removeClass('middle-show-content-wrap')
+              $('.mobile-head-item .side-content-wrap .mobile-ico-close').remove()
+            })
+          }
+        })
+      })
+      $('.nav_wrap .head_nav').clone().appendTo('.mobile-head-item.mobile-head-nav .main-content-wrap .content-wrap')
+    }
+  }
+  //mobile end
+  else {
+    $(document).ready(function () {
+      $('.mobile-body-mask,.mobile-head-items,.mobile-head-items,.mobile-nav-items,.mobile-cart-items,.mobile-tab-items').remove()
+    });
+  }
+}
+$(function () { mSizeChange(); })
+$(window).resize(function () { mSizeChange() });
+
+
+$(function () {
+
+  
+  // 瀑布流
+  function waterfall(){
+    getWinSize();
+    if (winWidth <= 950) {
+      $('.creators_sell_wrap').masonry({
+        itemSelector: '.sell_item', 
+        gutter: 10,
+        originLeft: true
+      });
+    }else{
+      $('.creators_sell_wrap').masonry({
+        itemSelector: '.sell_item', 
+        gutter: 28,
+        originLeft: true
+      });
+    }
+  }
+  waterfall()
+
+  $(window).resize(function(){
+    waterfall()
+  })
+
+
+})

+@charset "utf-8";
+html { font-size: 625%; }
+body { background: #FFF; font-size: 14px; }
+body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, form, object, iframe, blockquote, pre, a, abbr, address, code, img, fieldset, form, label, figure { margin: 0; padding: 0; }
+body, html, input, button, textarea { color: #212121; font-family: Arial; line-height: 1.5; }
+body { background-color: #fff; }
+article, aside, figcaption, figure, footer, header, main, nav, section { display: block; }
+h1 { font-size: 20px; }
+h2 { font-size: 18px; }
+h3 { font-size: 16px; }
+h4, h5 { font-size: 14px; }
+img { max-width: 100%; border: none; vertical-align: middle; }
+li { list-style: none; }
+i, em { font-style: normal; }
+a { color: #333; text-decoration: none; }
+a:focus { outline: none; }
+a:hover { color: #000; text-decoration: none; }
+input[type="text"]:focus { outline: none; }
+input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; }
+ input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
+ padding: 0;
+ border: none;
+}
+hr { margin: 15px 0 15px 0; height: 1px; border: none; border-top: 1px dashed #c1c1c1; }
+a:active, select, input, textarea { outline: 0!important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }
+* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0; -ms-box-sizing: border-box; -o-box-sizing: border-box; }
+/*-------------------------------
+			font start
+			----------------------------------*/
+@font-face { font-weight: normal; font-style: normal; font-family: 'fontawesome'; src: url("fonts/Font-Awesome/fontawesome-webfont.eot"); src: url("fonts/Font-Awesome/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Font-Awesome/fontawesome-webfont.woff2") format("woff2"), url("fonts/Font-Awesome/fontawesome-webfont.woff") format("woff"), url("fonts/Font-Awesome/fontawesome-webfont.ttf") format("truetype"), url("fonts/Font-Awesome/fontawesome-webfont.svg#fontawesomeBold") format("svg"); font-display: fallback; }
+@font-face { font-family: "Roboto-Regular"; font-style: normal; src: url(fonts/Roboto/Roboto-Regular.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Roboto-Bold"; font-style: normal; src: url(fonts/Roboto/Roboto-Bold.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Roboto-Black"; font-style: normal; src: url(fonts/Roboto/Roboto-Black.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Roboto-Light"; font-style: normal; src: url(fonts/Roboto/Roboto-Light.ttf) format("TrueType"); font-display: fallback; }
+
+@font-face { font-family: "Poppins-Bold"; font-style: normal; src: url(fonts/Poppins/Poppins-Bold.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Poppins-Light"; font-style: normal; src: url(fonts/Poppins/Poppins-Light.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Poppins-Medium"; font-style: normal; src: url(fonts/Poppins/Poppins-Medium.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Poppins-Regular"; font-style: normal; src: url(fonts/Poppins/Poppins-Regular.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "Poppins-SemiBold"; font-style: normal; src: url(fonts/Poppins/Poppins-SemiBold.ttf) format("TrueType"); font-display: fallback; }
+
+@font-face { font-family: "ProximaNova"; font-style: normal; src: url(fonts/proximanova.ttf) format("TrueType"); font-display: fallback; }@font-face { font-family: "DENMARK"; font-style: normal; src: url(fonts/DENMARK.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "ProximaNova-Bold"; font-style: normal; src: url(fonts/ProximaNova-Bold.otf) format("OpenType"); font-display: fallback; }
+@font-face { font-family: "ProximaNova-Light"; font-style: normal; src: url(fonts/proximanova-light.otf) format("OpenType"); font-display: fallback; }
+@font-face { font-family: "ProximaNova-Semibold"; font-style: normal; src: url(fonts/ProximaNova-Semibold.woff.ttf) format("TrueType"); font-display: fallback; }
+@font-face { font-family: "ProximaNova-Extrabold"; font-style: normal; src: url(fonts/ProximaNova-Extrabold.otf) format("OpenType"); font-display: fallback; }
+
+@font-face { font-family: "pe-icon-7-stroke"; font-style: normal; src: url(fonts/Pe-icon-7-stroke.woff) format("woff"); font-display: fallback; }
+
+
+/*-------------------------------
+			font end
+			----------------------------------*/
+/* clear floating */
+.clearfix:after, .layout:after, .sys_row:after, .web_main:after, .page_main:after, .nav_wrap .head_nav:after, .items_list ul:after, .product_items:after, .promote_list:after, .cate_items ul:after, .web_head .logo:after, .product-intro:after, .detail-tabs:after, .foot_items:after, .news_cell:after, .sys_row:after, .banner_navigate_button:after, .foor_service:after { clear: both; display: block; visibility: hidden; height: 0; content: ""; }
+.clearfix, .layout, .sys_row, .clearfix, .layout, .sys_row, .flex_row, .web_main, .page_main, .nav_wrap .head_nav, .items_list ul, .product_items, .promote_list, .cate_items ul, .web_head .logo, .product-intro, .detail-tabs, .foot_items, .sys_row, .banner_navigate_button, .foor_service { *zoom: 1;}
+.clear { clear: both; }
+/* layout */
+body { position: absolute; top: 0; left: 0; overflow-x: hidden; width: 100%; min-width: 1200px; }
+.layout { position: relative; margin: 0 auto; width: 1520px; }
+
+/* flex */
+.flex_row{ display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; }
+.flex_row_nowrap { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex_row_center {justify-content: center;-webkit-justify-content: center;-ms-flex-pack: center;}
+
+/*gotop*/
+.gotop { position: fixed; right: 50px; bottom: 50px; z-index: 99999; visibility: hidden; -webkit-box-sizing: content-box; box-sizing: content-box; width: 50px; height: 50px; background-color: #000000; background-clip: content-box; box-shadow: 0 0 8px rgba(0,0,0,.2); color: #ffffff; text-align: center; text-align: center; font-size: 18px; line-height: 50px; opacity: 0; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -ms-transform: translateY(100%); }
+.gotop:hover, .gotop.active:hover { background-color: #000000; color: #fff; }
+.gotop.active { visibility: visible; opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; -ms-transform: none; }
+.gotop:before, .gotop em { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
+.gotop em { position: absolute; top: 0; left: 0; width: 100%; color: #fff; font-size: 12px; opacity: 0; -webkit-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); filter: alpha(opacity=0); -ms-transform: translateY(10px); }
+.gotop:before { display: block; content: '\f176'; font-family: 'fontawesome'; }
+.gotop:hover em { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; filter: alpha(opacity=100); -ms-transform: none; }
+.gotop:hover:before { opacity: 0; -webkit-transform: translateY(-15px) scale(.5); -o-transform: translateY(-15px) scale(.5); transform: translateY(-15px) scale(.5); -ms-transform: translateY(-15px) scale(.5); filter: alpha(opacity=0); }
+
+
+/* placeholder */
+input::-webkit-input-placeholder {
+ color: rgba(0,0,0,.71);
+}
+ input:-moz-placeholder {
+ color: rgba(0,0,0,.71);
+}
+ input::-moz-placeholder {
+ color: rgba(0,0,0,.71);
+}
+ input:-ms-input-placeholder {
+ color: rgba(0,0,0,.71);
+}
+
+/* box-sizing */
+.nav_wrap{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; }
+/* font-family */
+.search-btn, .side-cate li .icon-cate:before, .product-btn-wrap a:before, .mobile-head-item .title:before, .head_nav > li:after, .head_nav li b:after, .download-item .item-button:before, .faq-item .faq-title:before { display: inline-block; text-decoration: inherit; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: "fontawesome"; speak: none; }
+
+/*==============web_head=================*/
+
+/* web_head */
+.web_head { position: relative;z-index: 2;background-color: #000000;padding: 30px 0;}
+.web_head .layout {position: relative;width: 98%;max-width: 1776px;display: flex; -webkti-display: flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center;}
+.web_head .logo { position: relative;}
+.web_head .logo img { width: auto;}
+
+/*nav*/
+.web_head .nav_wrap { position: relative; display: inline-block;flex: 1;}
+.web_head .nav_wrap .head_nav { position: relative;font-size: 0;text-align: right;padding-right: 27px;}
+.head_nav > li { position: relative; display: inline-block; margin: 0 0 0 17px;}
+.head_nav>li>a { position: relative; display: inline-block;color: #ffffff; font-size: 18px; font-family: "ProximaNova";}
+.head_nav>li>a:hover{text-decoration: underline;}
+
+.fixed-nav .head_layer{width: 100%;padding: 10px 0;position: fixed;left: 0;top: 0;background-color: #000000;box-shadow: 0 2px 5px rgba(0,0,0,0.2);z-index: 9;-webkit-transition: none;-o-transition: none;transition: none;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%);transform: translateY(-100%);opacity:1;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff,endColorstr=#e5ffffff);}
+.fixed-nav-active .head_layer{-webkit-transform: none;-ms-transform: none;-o-transform: none;transform: none;opacity: 1;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;transition: all 0.6s ease;}
+.fixed-nav .logo a,.fixed-nav .logo img,.fixed-nav .head_nav li a{-webkit-transition: none;-o-transition: none;transition: none;}
+
+li::after,li img,a{-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
+
+
+/* web_footer */
+.web_footer{position: relative;z-index: 1;border-top: 2px solid #afafaf;}
+.foot_service .foot_items{padding: 27px 0 28px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;
+flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:flex-end;-webkit-flex-wrap: nowrap;-moz-flex-wrap: nowrap;-ms-flex-wrap: nowrap;-o-flex-wrap: nowrap;flex-wrap:nowrap;}
+.foot_items img{width: auto;}
+.foot_item{position: relative;}
+.foot_item_contact {width: 42.76%;padding: 0 11% 0 0;}
+.foot_item_about {width: 22.37%;}
+.foot_item_links {width: 24.34%;}
+.foot_item_order {flex: 1;}
+.foot_item .title{position: relative;font-size: 19px;color: #000000;font-family: "ProximaNova-Semibold";margin: 2px 0 21px;white-space: nowrap;text-transform: uppercase;font-weight: normal;}
+/* .foot_item.foot_item_contact .title{margin-bottom: 26px;} */
+.foot_txt_list li{position: relative;overflow: hidden;margin-bottom: 3px;}
+.foot_txt_list li a{color: #9c9c9e;font-size: 17px;font-family: "ProximaNova";display:inline-block;-webkit-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
+.foot_txt_list li:hover a{text-decoration: underline;}
+.foot_item_contact p{color: #000000;font-size: 19px;font-family: "ProximaNova";line-height: 1.31;opacity: .9;margin: 21px 0 1px;}
+.foot_contact_list {overflow: hidden;}
+.foot_contact_list li{margin-bottom: 5px;}
+.foot_contact_list .item_val{opacity: 1;color: #99999b;font-size: 17px;font-family: "ProximaNova";font-style: normal;padding-left: 32px;position: relative;}
+.foot_contact_list .item_val a{color: #99999b;}
+.foot_contact_list .contact_item_tel .item_val{background: url(img/demo/tel.png) no-repeat left top;}
+.foot_contact_list .contact_item_eml .item_val{background: url(img/demo/email.png) no-repeat left top;}
+.foot_contact_list .inquiry_btn{text-decoration: underline;}
+
+.foot_bar{background-color: #000000;border-top: 1px solid #666666;}
+.foot_bar .layout{align-items: center;}
+.copyright{flex: 1;color:#ffffff;font-size:16px;font-family: "ProximaNova";line-height: 1;}
+.foot_pay{font-size: 0;padding: 14px 0;}
+.foot_pay li{display: inline-block;margin-left: 7px;}
+.foot_pay li:hover img{transform: rotate(35deg);}
+
+/* web_footer end */
+
+/*-------------------------------------------------------- 
+														page: index
+																	------------------------------------------------------*/
+
+/* swiper */
+.swiper-container-fade { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; }
+.swiper-container-fade .swiper-slide { height: auto; }
+/*slider_banner*/
+.slider_banner.layout{width: 100%;}
+.slider_banner .swiper-slide{position: relative;}
+.slider_banner .swiper-slide img { width: 100%;}
+.slider_banner .swiper-slide img+img { position: absolute; top: 0; left: 0; }
+.slider_banner .swiper-slide img { width: 100%; }
+.slider_banner .swiper-slide.swiper-slide-active img { transform: scale(1); }
+.slider_banner .slider_swiper_control {position: absolute; bottom: 50px; right: 250px; z-index: 2;}
+.slider_banner .swiper-button-white { position: static; position: relative; right: auto; left: auto; display: inline-block; overflow: hidden; margin: auto; width: 60px; height: 90px; border-radius: 0; background-color: #ffffff; background-position: center; background-repeat: no-repeat; vertical-align: middle; text-indent: -9999px; opacity: 1; filter: alpha(opacity=100); }
+.slider_banner .swiper-pagination { bottom:62px; opacity: 1; width: auto;left: 50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;}
+.slider_banner:hover .swiper-pagination { opacity: 1; }
+.slider_banner .swiper-pagination-bullet:before { display: none; }
+.slider_banner .swiper-pagination-bullet { display: inline-block; box-sizing: border-box;margin: 0 11px; width: 8px; height: 8px; background-color: #fff;border: 3px solid #ffffff; opacity: .5; border-radius: 50%; }
+.slider_banner .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1;width: 18px;height: 18px;border-color: #e00024;background-color: transparent;}
+
+
+.banner_info{position: absolute;top: 41.3%;left: 0;padding-left: 3.75%;width: 50%;z-index: 9;}
+.banner_info h2{color: #fff;font-size: 64px;font-family: "ProximaNova-Bold";line-height: 1.36;font-weight: normal;}
+.banner_info p{color: #ffffff;font-size: 18px;font-family: "ProximaNova";margin: 16px 0 40px;}
+.banner_info .more{display: inline-block;color: #000000;font-size: 18px;font-family: "ProximaNova";line-height: 48px;padding: 0 26px 0 25px;border: 1px solid #ffffff;background-color: #ffffff;}
+.banner_info .more:hover{background-color: transparent;color: #ffffff;}
+
+.banner_nav{position: absolute;bottom: 39px;left: 0;width: 100%;padding: 0 3.75%;justify-content: space-between;}
+.banner_nav .nav_item{display: inline-block;}
+.nav_item h3{color: #ffffff;font-size: 26px;font-family: "ProximaNova";font-weight: normal;line-height: 1.2;}
+.nav_item h3 a{color: #ffffff;}
+.nav_item h3 a::after{content: '';width: 17px;height: 13px;background: url(img/demo/right2.png) no-repeat center;display: inline-block;margin-left: 7px;}
+.nav_item p{color: #ffffff;font-size: 18px;font-family: "ProximaNova";margin-top: 10px;}
+.nav_item:hover h3 a::after{transform: translateX(10px);}
+
+/*=======index public=============*/ 
+.web_main { position: relative; z-index: 1;}
+.web_main img{width: auto;}
+.index_main>section{position:relative;}
+.index_hd { position: relative;z-index: 1;}
+.hd_title { position: relative;color:#ffffff;font-size: 50px; font-family: "ProximaNova-Bold";font-weight: normal; line-height: 1;}
+
+
+/* index_creators_selling */
+.index_creators_selling{background-color: #000000;padding: 105px 0 91px;}
+.creators_sell_wrap{padding: 97px 0 16px;}
+.creators_sell_wrap h3{color: #ffffff;font-size: 22px;font-family: "ProximaNova";font-weight: normal;line-height: 1;padding: 14px 0 15px;}
+.creators_sell_wrap h3 a{color: #ffffff;}
+.sell_item{width: calc(33.3% - 18.66px);}
+.sell_item >a{display: block;overflow: hidden;}
+.sell_item:hover img{transform: scale(1.2);}
+.index_creators_selling .more{display: inline-block;color: #ffffff;font-size: 26px;font-family: "ProximaNova";}
+.index_creators_selling .more::after{content: '';width: 17px;height: 13px;background: url(img/demo/right.png) no-repeat center;display: inline-block;margin-left: 10px;}
+.index_creators_selling .more:hover::after{margin-left: 20px;}
+
+/* index_social_channels */
+.index_social_channels{background-color: #eaeaea;padding: 104px 0 100px;}
+.index_social_channels .hd_title{color: #000000;}
+.sell_social_wrap{margin-top: 54px;}
+.social_tips{position: absolute;top: calc(40% + 2px);right: 0;transform: translateX(54.2%);padding: 8px 20px;align-items:center;background-color:#ffffff;border-radius: 4px;max-width: 90%;}
+.social_tips::after{content: '';border-width: 9px;border-style: solid;border-color: transparent #fff transparent transparent;position: absolute;top: 50%;right: 100%;transform: translate(1px,-50%) scaleY(.75);}
+.social_tips p{color: #000000;font-size: 19px;font-family: "ProximaNova";display: inline-block;}
+.social_tips .bag{margin-left: 33px;width: 24px;height: 28px;}
+.social_tips .bag::after{content: '';width: 100%;height: 100%;background: url(img/demo/bag.png) no-repeat center;display: inline-block;}
+.social_display{width: 47.5%;position: relative;}
+.sell_social_content{width: 52.5%;padding: 5px 9.2% 0 3.95%;}
+.sell_social_content p{color: #000000;font-size: 27px;font-family: "ProximaNova";line-height: 1.37;}
+.channels_list{margin: 136px 0 49px;font-size: 0;}
+.channels_list img{width: auto;}
+.channels_list li{display: inline-block;margin-right: 34px;}
+.channels_list li:hover{animation: swing .5s;}
+.start{display: inline-block;color: #ffffff;font-size: 19px;font-family: "ProximaNova";line-height: 52px;padding: 0 25px;border:1px solid #000000;background-color: #000000;}
+.start:hover{background-color: transparent;color: #000;}
+
+
+/* index_workflow */
+.index_workflow{padding: 103px 0 101px;text-align: center;}
+.index_workflow .hd_title{color: #000000;text-align: left;}
+.workflow_wrap{margin: 67px 0 79px;column-gap: 28px;}
+.workflow_wrap .step_item{width: calc(33.3% - 18.66px);text-align: left;}
+.step_item h3{color: #2a2a2a;font-size: 27px;font-family: "ProximaNova";line-height: 1;font-weight: normal;}
+.step_item p{color: #2b2b2b;font-size: 18px;font-family: "ProximaNova-Light";line-height: 1.61;margin: 36px 0 31px;min-height: 58px;}
+.step_item > a{display: block;overflow: hidden;}
+.step_item:hover > a img{transform: scale(1.2);}
+
+.nav_item h3 a::after,.sell_item img,.more::after,.step_item img,.item-img::before{-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
+
+
+/*-------------------------------------------------------- 
+													page : Blog
+																	------------------------------------------------------*/
+.sys_sub_head{position: relative;}
+.page-title-bar{position: relative;text-align: center;background-color: #767676;padding: 41px 0;}
+.page-title-bar .title{position: relative;text-transform: uppercase;color: #fff;font-size: 26px;font-weight: 400;font-family: "Poppins-Regular";}
+.page_bar {position: relative;margin-top: 30px;text-align: center;}
+.page_bar .pages {display: flex;justify-content: center;flex-wrap: wrap;}
+.page_bar a, .page_bar span {position: relative;display: inline-block;vertical-align: top;padding: 0 14px;line-height: 34px;min-width: 42px;text-align: center;color: #737373;font-size: 14px;font-family: "Poppins-Regular";border: 1px solid #e7e7e7;margin: 4px;text-align: center;border-radius: 4px;-webkit-transition: none;-o-transition: none;transition: none;transition: all .3s ease;}
+.page_main {padding-bottom: 60px;}
+.page_main .layout,.product-slide-wrap .layout{max-width: 1145px;width: 98%;}
+.blog-article, .entry {line-height: 2.5;font-size: 16px;font-family: "Poppins-Regular";}
+.blog-article p{color: #585858;}
+.blog-article strong{color: #3b3f5c;}
+.blog-article .ql-size-large{color: #000;}
+.blog-article img {margin-bottom: 15px;}
+
+.blog-item {position: relative;border-bottom: 1px solid #eee;padding: 45px 0 35px;}
+.blog-item .item-title {position: relative;text-align: center;font-size: 24px;font-family: "Poppins-Regular";font-weight: 400;margin-bottom: 10px;}
+.blog-item .item-title a{color: #000000;}
+.blog-item .item-title a:hover {color: #56cfe1;}
+.blog-item .item-author {position: relative;text-align: center;font-family: "Poppins-Regular";color: #999;text-transform: uppercase;padding: 0 0 20px;}
+.blog-item .item-author .time {padding: 10px;}
+.blog-item .item-author .author {padding: 10px;}
+.blog-item .item-img {padding: 20px 0 0;justify-content: center;align-items: center;}
+.blog-item .item-img a {display: block;}
+.blog-item .item-text {position: relative;padding: 30px 0 20px;line-height: 2.2;font-size: 16px;font-family: "Poppins-Regular";}
+.blog-item .item-els {justify-content: space-between;align-items: center;font-family: "Poppins-Regular";}
+.blog-item .item-els .item-more {text-transform: uppercase;margin: 10px 0;}
+.btn-learnmore {display: inline-block;font-family: "Poppins-Regular";background-color: #1b1b1b;color: #fff!important;line-height: 45px;padding: 0 43px;letter-spacing: 1px;border: none;-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);overflow: hidden;cursor: pointer;}
+.btn-learnmore:after {z-index: -1;content: '';display: block;width: 100%;padding: 50% 0;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%) scale(0);-ms-transform: translate(-50%,-50%) scale(0);-o-transform: translate(-50%,-50%) scale(0);transform: translate(-50%,-50%) scale(0);background-color: #56cfe1;-webkit-transition: all .6s ease;-o-transition: all .6s ease;transition: all .6s ease;border-radius: 50%;visibility: hidden;opacity: 0;}
+.btn-learnmore:hover:after {-webkit-transform: translate(-50%,-50%) scale(2);-ms-transform: translate(-50%,-50%) scale(2);-o-transform: translate(-50%,-50%) scale(2);transform: translate(-50%,-50%) scale(2);visibility: visible;opacity: 1;}
+.blog-item .item-els .item-tag {text-transform: uppercase;margin: 10px 0;font-family: "Poppins-Regular";}
+.blog-item .item-els .item-tag label {color: #999;margin: 5px;}
+.blog-item .item-els .item-tag em {margin: 5px;font-weight: 700;}
+
+.page-sns{text-align: right;margin: 0;}
+.page-sns li {margin: 5px 8px;}
+.page-sns li img {max-width: 20px;-moz-transition-duration: .3s;-webkit-transition-duration: .3s;-o-transition-duration: .3s;-ms-transition-duration: .3s;transition-duration: .3s;}
+.page-sns li:hover a img {-moz-transform: translateY(-5px);-webkit-transform: translateY(-5px);-o-transform: translateY(-5px);-ms-transform: translateY(-5px);transform: translateY(-5px);}
+.turn-pages {margin: 30px 0 10px;justify-content: space-between;align-items: center;}
+.turn-pages a:hover{color: #56cfe1;}
+.turn-pages a i {font-size: 50px;}
+.turn-pages a .info {max-width: 300px;padding: 0 15px;font-family: "Poppins-Regular";}
+.turn-pages a .info p {text-transform: uppercase;color: #999;margin: 10px 0 5px;}
+.turn-pages a .info strong {display: block;font-weight: 400;font-size: 18px;}
+.turn-pages .next{text-align: right;flex-direction: row-reverse;}
+.pegk {display: inline-block;font-family: pe-icon-7-stroke;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 24px;cursor: pointer;}
+.pe-7s-angle-right::before {content: "\e684";}
+.pe-7s-angle-left::before {content: "\e686";}
+
+.index-section {padding: 30px 0;}
+.sm-section-title-bar {text-align: center;margin: 20px 0;}
+.sm-section-title-bar .title {position: relative;display: inline-block;vertical-align: middle;text-transform: uppercase;font-size: 18px;font-family: "Poppins-Regular";}
+.sm-section-title-bar .title::before, .sm-section-title-bar .title::after {content: "//";position: relative;display: inline-block;vertical-align: middle;padding: 0 15px;font-size: 14px;}
+.product-slide-wrap {position: relative;}
+.product-slide{position: relative;}
+.product-item {position: relative;padding: 15px;}
+.product-item a:hover{color: #56cfe1;}
+.product-item .item-inner {position: relative;}
+.product-item .item-inner .item-img {position: relative;width: 100%;overflow: hidden;min-height: 100px;}
+.product-item .item-inner .item-img::before {content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: #000;opacity: 0;visibility: hidden;z-index: 1;}
+.product-item .item-inner .item-img:hover::before {opacity: .2;visibility: visible;}
+.product-item .item-inner .item-info {position: relative;text-align: center;padding: 15px 0;font-family: "Poppins-Regular";}
+.product-item .item-inner .item-info .item-title {font-size: 16px;}
+.product-item .item-inner .item-info .item-price {margin-top: 5px;color: #818181;}
+.product-slide-wrap .swiper-button-prev, .product-slide-wrap .swiper-button-next  {position: absolute;top: 40%;color: #000;width: 50px;height: 50px;line-height: 50px;text-align: center;border: 2px solid #000;border-radius: 100%;opacity: 0;visibility: hidden;-moz-transform: scale(1);-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(.8);-moz-transition-duration: .3s;-webkit-transition-duration: .3s;-o-transition-duration: .3s;-ms-transition-duration: .3s;transition-duration: .3s;z-index: 9;}
+.product-slide-wrap .swiper-button-prev{left: 10px;right: auto;}
+.product-slide-wrap .swiper-button-next{right: 10px;left: auto;}
+
+/*-------------------------------------------------------- 
+													mobile style
+																	------------------------------------------------------*/
+
+
+
+																	
+@media only screen and (max-width: 1680px) {
+/* layout */
+body { min-width: 1440px; }
+
+/* header */
+
+
+/* index */
+.banner_info{top: 30%;}
+.banner_info h2{font-size: 4.3vw;line-height: 1.1;}
+.banner_info p{margin: 1.8% 0 4.5%;}
+/* price */
+
+/* footer */
+
+}
+
+@media only screen and (max-width: 1520px) {
+.layout{width: 1440px;}
+
+}
+
+@media only screen and (max-width: 1440px) {
+/* header */
+
+/* layout */
+body { min-width: 1280px; }
+.layout{ width: 1280px; }
+
+/* index */
+
+/* price */
+
+
+/* footer */
+
+}
+
+ @media only screen and (max-width: 1366px) {
+/* layout */
+
+/* header */
+ 
+/* index */ 
+
+
+/* footer */
+
+}
+ @media only screen and (max-width: 1280px) {
+/* layout */
+body { min-width: unset; }
+.layout{ width: 98%; }
+
+/* header */
+
+
+/* index */
+.nav_item h3{font-size: 22px;}
+.hd_title{font-size: 42px;}
+.sell_social_content p{font-size: 22px;}
+.step_item h3{font-size: 24px;}
+
+/* footer */
+
+}
+
+
+@media only screen and (max-width: 950px) {
+body { min-width: 100%; }
+.layout {width: 100%;}
+
+.mobile-body-mask { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6); }
+.mobile-ico-close { position: absolute; top: 0; right: -35px; width: 30px; height: 30px; background: #fff url(img/mobile_close.png) center center no-repeat; background-size: 50% auto; cursor: pointer; }
+.sub-content { position: relative; right: auto; z-index: 99999; display: block; border: none; border-radius: 0; box-shadow: none; }
+.lang-more { display: none !important; }
+.mobile-head-items { position: fixed; top: 0; left: 0; z-index: 999; display: block; width: 100%; height: 25px; background: #161622; text-align: left; line-height: 25px; }
+.mobile-head-item { float: left; width: 45px; }
+.mobile-head-item .title { font-family: "fontawesome";overflow: hidden; width: 100%; height: 25px; color: #FFF; text-align: center; line-height: 25px; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); }
+.mobile-head-item .title a { position: relative; display: block; color: #FFF; }
+.mobile-head-item.mobile-head-home .title a:before { content: '\f015'; }
+.mobile-head-item.mobile-head-nav .title:before { content: '\f0c9'; }
+.mobile-head-item .main-content-wrap { top: 0; z-index: 99999; display: block; background: #FFF; }
+.mobile-head-item .main-content-wrap .content-wrap { overflow-y: auto; padding: 15px 10px; height: 100%; background-color: #fff; }
+.mobile-head-item .main-content-wrap.middle-content-wrap .content-wrap { overflow-y: hidden; }
+.mobile-head-item .side-content-wrap { position: fixed; left: -70%; display: block; width: 70%; height: 100%; }
+.mobile-head-item .middle-content-wrap { position: absolute; left: 0; visibility: hidden; padding: 20px 0; width: 100%; height: auto; opacity: 0; }
+.mobile-head-item .middle-show-content-wrap { top: 26px; visibility: visible; opacity: 1; }
+.web_head .nav_wrap .head_nav, .web_head .change-language, .head-search .search-attr, .btn--search,.head_bar,.head_inquiry { display: none; }
+.layout { margin: 0 auto; width: 98%; }
+.web_head{ padding: 25px 0 0; padding-top: 25px; height: auto; background: #000; position: relative; left: auto; top: auto; }
+.web_head .logo{ position: relative; display: block; width: 100%; max-width: unset; text-align: center; -webkit-transform: unset; transform: unset; }
+.web_head .nav_wrap { position: static; }
+.nav_wrap .logo img { height: 100px; }
+
+
+/* header */
+.web_head .layout{height: 100%;}
+.head_layer{background-color: #000000;padding: 10px 0;}
+
+/*nav */
+.head_nav { width: 100%; }
+.head_nav > li { display: block; }
+.head_nav li { padding-top: 4px; padding-bottom: 4px; padding-left: 28px; }
+.head_nav li, .head_nav li a, .head_nav>li ul li a, .head_nav li:hover a { color: #111; }
+.head_nav li.has-child { margin-top: 0; margin-bottom: 0; padding-left: 28px; }
+.head_nav li.has-child>a { margin-top: 3px; margin-right: 35px; margin-bottom: 3px; }
+.head_nav li.has-child>ul { position: relative; top: auto; left: auto; display: block; margin-left: 0; padding: 0 0 0 10px; width: 100%; border-top: unset; box-shadow: unset; opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); background: #fff; display: none; }
+.head_nav li a { position: relative; display: block; height: 1.4em; line-height: 1.4em; }
+.head_nav li a:hover { color: inherit; }
+.head_nav li em { display: block; overflow: hidden; height: 1.4em; }
+.head_nav li li { font-size: 14px; }
+.head_nav li li li { font-size: 12px; }
+.head_nav li li a { color: #666; }
+.head_nav li.has-child a b { position: absolute; top: 10px; right: -35px;background: none; display: inline-block; overflow: hidden; -webkit-box-sizing: content-box; box-sizing: content-box; width: 15px; height: 15px; border: 1px solid #111; border-radius: 2px; line-height: 15px; }
+.head_nav li.has-child a b:before, .head_nav li.has-child a b:after { position: absolute; top: 50%; left: 3px; display: block; margin-top: -.5px; width: 9px; height: 1px; background-color: #111; content: ''; }
+.head_nav li.has-child a b:after { -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -ms-transform: rotate(90deg); }
+.head_nav li.has-child a:hover b { border-color: #111; }
+.head_nav>li { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #f2f2f2; }
+.head_nav>li>a { position: relative; position: relative; margin-bottom: -1px; text-transform: uppercase; text-transform: uppercase; font-size: 16px; }
+.head_nav li, .head_nav li.has-child { padding-left: 3px;margin: 0; }
+.head_nav li.active>a>b:after { display: none; }
+.web_head .nav_wrap { display: none; }
+.head_nav>li ul li { border-bottom: none; }
+.head_nav > li:before { display: none; }
+.head_right,.head_brand_nav{display: none;}
+.head_nav>li>a::after{content: none;}
+.web_head .logo span{display: none;}
+
+/* index */
+.hd_title{font-size: 36px;}
+.banner_info{top: 25%;width: 70%;}
+.banner_info p{font-size: 16px;}
+.banner_info .more{font-size: 16px;line-height: 2.5;}
+.nav_item h3{font-size: 18px;}
+.nav_item p{font-size: 16px;margin-top: 5px;}
+.banner_nav{bottom: 5%;}
+.index_creators_selling,.index_social_channels,.index_workflow{padding: 5.5% 0 5%;}
+.creators_sell_wrap{padding-top: 6%;}
+.sell_social_wrap{margin-top: 3.5%;}
+.workflow_wrap{margin: 4% 0 5%;}
+.sell_item{width: calc(33.3% - 6.66px);}
+.creators_sell_wrap h3{font-size: 18px;}
+.index_creators_selling .more{font-size: 22px;}
+.sell_social_content p{font-size: 18px;}
+.channels_list{margin: 21% 0 7%;}
+.social_tips p{font-size: 16px;}
+.social_tips .bag{margin-left: 15px;}
+.social_tips{padding: 8px 10px;transform: translateX(40%);}
+.start{font-size: 16px;line-height: 2.5}
+.step_item h3{font-size: 20px;}
+.step_item p{font-size: 16px;margin: 15px 0;min-height:51px;}
+
+/* footer */
+.foot_service .foot_items{flex-wrap: wrap;}
+.foot_items .foot_item {width: 50%;margin: 10px 0;}
+.foot_item_contact{padding-right: 5%;}
+
+}
+
+ @media only screen and (max-width: 768px) {
+
+
+/* index */
+.hd_title{font-size: 28px;}
+.social_display{width: 100%;}
+.social_tips{top: 60%;transform: none;right: 5%;}
+.sell_social_content{width: 100%;padding: 30px 5%;}
+.channels_list{margin: 5% 0;}
+
+/* footer */
+
+
+}
+
+ @media only screen and (max-width: 640px) {
+
+/* index */
+.hd_title{font-size: 24px;}
+.banner_info{top: 15%;padding-left: 2%;}
+.nav_item h3{font-size: 16px;}
+.nav_item p{font-size: 14px;}
+.banner_nav{padding: 0 2%;}
+.nav_item h3 a::after{width: 12px;height: 9px;background-size: 100% auto;}
+.banner_info .more{font-size: 14px;padding: 0 15px;}
+.banner_info p{font-size: 14px;}
+.creators_sell_wrap h3{font-size: 16px;}
+.index_creators_selling .more{font-size: 18px;}
+.sell_social_content p{font-size: 16px;}
+.channels_list li{margin: 0 20px 5px 0;}
+.step_item h3{font-size: 18px;}
+.step_item p{font-size: 14px;min-height:45px;}
+.workflow_wrap{column-gap: 20px;}
+.workflow_wrap .step_item{width: calc(50% - 10px);margin-bottom: 20px;}
+
+/* blog */
+.page-title-bar{padding: 25px 0;}
+.page-title-bar .title{font-size: 20px;}
+.blog-item .item-title{font-size: 18px;}
+.blog-item .item-text{font-size: 14px;}
+.turn-pages a .info strong{font-size: 16px;}
+.sm-section-title-bar .title{font-size: 16px;}
+
+/* footer */
+
+
+
+}
+
+
+ @media only screen and (max-width: 480px) {
+
+/* index */
+.hd_title{font-size: 18px;}
+.banner_nav{display: none;}
+.banner_info{top: 50%;transform: translateY(-50%);}
+.creators_sell_wrap h3{font-size: 14px;}
+.index_creators_selling .more{font-size: 16px;}
+.step_item h3{font-size: 16px;}
+.workflow_wrap .step_item{width: 90%;margin: 10px auto;}
+.sell_item{width: calc(50% - 5px);}
+.social_tips p{font-size: 14px;}
+.start{font-size: 14px;padding: 0 18px;}
+
+/* blog */
+.blog-item .item-title{font-size: 16px;}
+.btn-learnmore{padding: 0 25px;}
+.blog-article, .entry{font-size: 14px;line-height: 1.8;}
+.product-item .item-inner .item-info .item-title{font-size: 14px;}
+
+/* footer */
+.foot_items .foot_item{width: 100%;}
+.foot_item .title{font-size: 16px;margin-bottom: 10px;}
+.foot_item_contact p{font-size: 16px;}
+.foot_txt_list li a,.foot_contact_list .item_val,.copyright{font-size: 14px;}
+
+}
+
+
+@media only screen and (max-width: 360px) {
+	.banner_info p{font-size: 12px;}
+}
+
+ @media only screen and (max-width: 320px) {
+
+}
+
+
+
+/*-------------------------------
+			swiper-slide start
+			----------------------------------*/
+.slider_banner { position: relative; overflow: hidden; }
+.swiper-container-no-flexbox .swiper-slide { float: left; }
+.swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
+.swiper-wrapper { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: content-box; box-sizing: content-box; width: 100%; height: 100%; -webkit-transition-property: -webkit-transform; -o-transition-property: transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; }
+.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
+.swiper-container-multirow>.swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
+.swiper-container-free-mode>.swiper-wrapper { margin: 0 auto; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
+.swiper-slide { position: relative; overflow: hidden; width: 100%; height: 100%; -webkit-transition-property: -webkit-transform; -o-transition-property: transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }
+.swiper-invisible-blank-slide { visibility: hidden; }
+.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; }
+.swiper-container-autoheight .swiper-wrapper { -webkit-transition-property: height, -webkit-transform; -o-transition-property: transform, height; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
+.swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; }
+.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
+.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; pointer-events: none; }
+.swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
+.swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
+.swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
+.swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
+.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal>.swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y; }
+.swiper-container-wp8-vertical, .swiper-container-wp8-vertical>.swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x; }
+.index_exhibition_wrap .swiper-button-next, .index_exhibition_wrap .swiper-button-prev { position: absolute; z-index: 2; width: 50px; height: 24px; border-radius: 2px; text-align: center; font-size: 30px; line-height: 24px; opacity: 1; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -webkit-tap-highlight-color: rgba(0,0,0,0); }
+.index_exhibition_wrap .swiper-button-next:before, .index_exhibition_wrap .swiper-button-prev:before { content: '';background-position: center center;background-repeat: no-repeat;width: 50px;height: 24px;display: inline-block; color: #010000;}
+.swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev { }
+.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.5; cursor: auto;/* pointer-events:none; */ }
+.index_exhibition_wrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next { top: 147px; right: 377px; left: auto; }
+.index_exhibition_wrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev { top: 147px; right: 315px; left: auto; }
+.index_exhibition_wrap .swiper-button-prev:before, .swiper-container-rtl .swiper-button-next:before { background-image: url('img/demo/arrow_left_l.png'); }
+.index_exhibition_wrap .swiper-button-next:before, .swiper-container-rtl .swiper-button-prev:before { background-image: url('img/demo/arrow_right_l.png');}
+.index_exhibition_wrap .swiper-button-next.swiper-button-disabled:before { background-image: url('img/demo/arrow_right_s.png');  }
+.index_exhibition_wrap .swiper-button-prev.swiper-button-disabled:before { background-image: url('img/demo/arrow_left_s.png'); }
+.application_container.swiper-container-horizontal {position: relative;}
+.index_application_wrap .swiper-button-next, .index_application_wrap .swiper-button-prev {cursor: pointer;;position: absolute;top:52.5%;width: 65px;height: 150px;background-color: rgba(241, 237, 73);z-index: 2;text-align: center;opacity: 0.5;}
+.index_application_wrap .swiper-button-prev{ right: auto; left: -30px; }
+.index_application_wrap .swiper-button-next{ right: -30px; left: auto; }
+.index_application_wrap .swiper-button-next:before, .index_application_wrap .swiper-button-prev:before{color: #666;font-size: 65px;font-family: "Poppins-Light";line-height: 150px;}
+.index_application_wrap .swiper-button-prev::before{content: '<'; }
+.index_application_wrap .swiper-button-next::before{content: '>'; }
+.index_application_wrap .swiper-button-next.swiper-button-disabled, .index_application_wrap .swiper-button-prev.swiper-button-disabled{opacity: 0.6;}
+.index_application_wrap .swiper-button-next:hover, .index_application_wrap .swiper-button-prev:hover{opacity: 0.8;}
+.swiper-button-lock { display: none; }
+.swiper-pagination { position: absolute; z-index: 2; text-align: center; -webkit-transition: .3s opacity; -o-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
+.swiper-pagination.swiper-pagination-hidden { opacity: 0; }
+.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { text-align: center; }
+.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; }
+/* .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { position: relative; -webkit-transform: scale(.33); transform: scale(.33); -ms-transform: scale(.33); }
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); -ms-transform: scale(1); }
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); -ms-transform: scale(1); }
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(.66); transform: scale(.66); -ms-transform: scale(.66); }
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(.33); transform: scale(.33); -ms-transform: scale(.33); }
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(.66); transform: scale(.66); -ms-transform: scale(.66); }
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(.33); transform: scale(.33); -ms-transform: scale(.33); } */
+/* .swiper-pagination-bullet, .swiper-pagination-bullet:before, .swiper-pagination-bullet:after { display: inline-block; width: 8px; height: 8px; vertical-align: top; } */
+.swiper-pagination-bullet { position: relative; cursor: pointer; display: none; }
+.swiper-pagination-bullet:before { /* background-color: #fff;  */content: ''; }
+/* .swiper-pagination-bullet-active:before { background-color: #fff; } */
+.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }
+.swiper-container-vertical>.swiper-pagination-bullets { top: 50%; right: 10px; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
+.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: 6px 0; }
+.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; width: 8px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -ms-transform: translateY(-50%); }
+.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: .2s top, .3s -webkit-transform; -o-transition: .2s transform, .3s top; transition: .2s top, .3s -webkit-transform; transition: .2s transform, .3s top; transition: .2s transform, .3s top, .3s -webkit-transform; }
+/* .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } */
+.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); -ms-transform: translateX(-50%); }
+.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s left, .3s -webkit-transform; -o-transition: .2s transform, .3s left; transition: .2s left, .3s -webkit-transform; transition: .2s transform, .3s left; transition: .2s transform, .3s left, .3s -webkit-transform; }
+.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s right, .3s -webkit-transform; -o-transition: .2s transform, .3s right; transition: .2s right, .3s -webkit-transform; transition: .2s transform, .3s right; transition: .2s transform, .3s right, .3s -webkit-transform; }
+.swiper-pagination-progressbar { position: absolute; background: rgba(0, 0, 0, .25); }
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #007aff; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; -ms-transform: scale(0); -ms-transform-origin: left top; }
+.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; -ms-transform-origin: right top; }
+.swiper-container-horizontal { overflow: hidden; }
+.swiper-container-horizontal>.swiper-pagination-progressbar { top: 0; left: 0; width: 100%; height: 4px; }
+.swiper-container-vertical>.swiper-pagination-progressbar { top: 0; left: 0; width: 4px; height: 100%; }
+.swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, .25); }
+.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff; }
+.swiper-pagination-black .swiper-pagination-bullet-active { background: #000; }
+.swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, .25); }
+.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000; }
+.swiper-pagination-lock { display: none; }
+.swiper-scrollbar { position: relative; border-radius: 10px; background: rgba(0, 0, 0, .1); -ms-touch-action: none; }
+.swiper-container-horizontal>.swiper-scrollbar { position: absolute; bottom: 3px; left: 1%; z-index: 50; width: 98%; height: 5px; }
+.swiper-container-vertical>.swiper-scrollbar { position: absolute; top: 1%; right: 3px; z-index: 50; width: 5px; height: 98%; }
+.swiper-scrollbar-drag { position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: rgba(0, 0, 0, .5); }
+.swiper-scrollbar-cursor-drag { cursor: move; }
+.swiper-scrollbar-lock { display: none; }
+.swiper-zoom-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
+.swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; }
+.swiper-slide-zoomed { cursor: move; }
+.swiper-lazy-preloader { position: absolute; top: 50%; left: 50%; z-index: 10; margin-top: -21px; margin-left: -21px; width: 42px; height: 42px; -webkit-transform-origin: 50%; transform-origin: 50%; -ms-transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; }
+.swiper-lazy-preloader:after { display: block; width: 100%; height: 100%; background-position: 50%; background-size: 100%; background-repeat: no-repeat; content: ''; }
+.swiper-lazy-preloader-white:after { }
+ @-webkit-keyframes swiper-preloader-spin { 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+}
+}
+ @keyframes swiper-preloader-spin { 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+}
+}
+.swiper-container .swiper-notification { position: absolute; top: 0; left: 0; z-index: -1000; opacity: 0; pointer-events: none; }
+.swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
+.swiper-container-fade .swiper-slide { -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; pointer-events: none; }
+.swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; }
+.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; }
+.swiper-container-cube { overflow: visible; }
+.swiper-container-cube .swiper-slide { z-index: 1; visibility: hidden; width: 100%; height: 100%; -webkit-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform-origin: 0 0; }
+.swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; }
+.swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -ms-transform-origin: 100% 0; }
+.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; }
+.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev { visibility: visible; pointer-events: auto; }
+.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
+.swiper-container-cube .swiper-cube-shadow { position: absolute; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); }
+.swiper-container-flip { overflow: visible; }
+.swiper-container-flip .swiper-slide { z-index: 1; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
+.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; }
+.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; }
+.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
+.swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px; }
+ @media screen and (max-width: 480px) {
+.swiper-pagination-bullet { margin: 0 5px; width: 10px; height: 10px; }
+}
+/*ie*/
+.swiper-container { overflow: hidden; }
+.slider_banner .swiper-container .swiper-wrapper { width: 2000%; }
+.swiper-slide { float: left\9; }
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.swiper-container .swiper-wrapper { width: auto; }
+}
+/*-------------------------------
+			swiper-slide end
+			----------------------------------*/
+
+
+
+
+/*-------------------------------
+			animation  start
+			----------------------------------*/
+.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.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
+ @-webkit-keyframes fadeInLeftA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(-30%, 0, 0);
+ transform: translate3d(-30%, 0, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+}
+}
+ @keyframes fadeInLeftA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(-30%, 0, 0);
+ transform: translate3d(-30%, 0, 0);
+ -ms-transform: translate3d(-30%, 0, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ -ms-transform: none;
+}
+}
+.fadeInLeftA { -webkit-animation-name: fadeInLeftA; animation-name: fadeInLeftA; }
+ @-webkit-keyframes fadeInUpA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 30%, 0);
+ transform: translate3d(0, 30%, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+}
+}
+ @keyframes fadeInUpA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 30%, 0);
+ transform: translate3d(0, 30%, 0);
+ -ms-transform: translate3d(0, 30%, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ -ms-transform: none;
+}
+}
+.fadeInUpA { -webkit-animation-name: fadeInUpA; animation-name: fadeInUpA; }
+
+@-webkit-keyframes fadeInUpB { 0% {
+	opacity: 0;
+	-webkit-transform: translate3d(0, 30%, 0);
+	transform: translate3d(0, 30%, 0);
+   }
+	100% {
+	opacity: 1;
+	-webkit-transform:  translate3d(0, -84px, 0);
+	transform:  translate3d(0, -84px, 0);
+   }
+   }
+	@keyframes fadeInUpB { 0% {
+	opacity: 0;
+	-webkit-transform: translate3d(0, 30%, 0);
+	transform: translate3d(0, 30%, 0);
+	-ms-transform: translate3d(0, 30%, 0);
+   }
+	100% {
+	opacity: 1;
+	-webkit-transform:  translate3d(0, -84px, 0);
+	transform:  translate3d(0, -84px, 0);
+	-ms-transform:  translate3d(0, -84px, 0);
+   }
+   }
+   .fadeInUpB { -webkit-animation-name: fadeInUpB; animation-name: fadeInUpB; }
+   
+
+@-webkit-keyframes fadeInRightA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(30%, 0, 0);
+ transform: translate3d(30%, 0, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+}
+}
+ @keyframes fadeInRightA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(30%, 0, 0);
+ transform: translate3d(30%, 0, 0);
+ -ms-transform: translate3d(30%, 0, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ -ms-transform: none;
+}
+}
+.fadeInRightA { -webkit-animation-name: fadeInRightA; animation-name: fadeInRightA; }
+ @-webkit-keyframes twinkling { 0% {
+ opacity: 0;
+}
+ 100% {
+ opacity: 1;
+}
+}
+ @-webkit-keyframes OrangePulse { from {
+ background-color: rgba(210,174,109,.2);
+ -webkit-box-shadow: 0 0 10px rgba(210,174,109,1);
+}
+ 50% {
+ background-color: rgba(210,174,109,1);
+ -webkit-box-shadow: 0 0 10px rgba(210,174,109,1);
+}
+to { background-color: rgba(210,174,109,.2); -webkit-box-shadow: 0 0 10px rgba(210,174,109,1); }
+}
+ @-webkit-keyframes swing { 20% {
+ -webkit-transform: rotate(40deg);
+ transform: rotate(40deg);
+}
+ 40% {
+ -webkit-transform: rotate(-20deg);
+ transform: rotate(-20deg);
+}
+ 60% {
+ -webkit-transform: rotate(10deg);
+ transform: rotate(10deg);
+}
+ 80% {
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+}
+ 100% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+}
+ @keyframes swing { 20% {
+ -webkit-transform: rotate(40deg);
+ transform: rotate(40deg);
+ -ms-transform: rotate(40deg);
+}
+ 40% {
+ -webkit-transform: rotate(-20deg);
+ transform: rotate(-20deg);
+ -ms-transform: rotate(-20deg);
+}
+ 60% {
+ -webkit-transform: rotate(10deg);
+ transform: rotate(10deg);
+ -ms-transform: rotate(10deg);
+}
+ 80% {
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ -ms-transform: rotate(-10deg);
+}
+ 100% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+}
+}
+.swing { -webkit-transform-origin: top center; transform-origin: top center; -ms-transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }
+ @-webkit-keyframes jump { 0% {
+ -webkit-transform: translateY(0);
+}
+ 25% {
+ -webkit-transform: translateY(-20%);
+}
+ 50% {
+ -webkit-transform: translateY(0);
+}
+ 75% {
+ -webkit-transform: translateY(-10%);
+}
+ 100% {
+ -webkit-transform: translateY(0);
+}
+}
+ @keyframes jump { 0% {
+ transform: translateY(0);
+}
+ 25% {
+ transform: translateY(-20%);
+}
+ 50% {
+ transform: translateY(0);
+}
+ 75% {
+ transform: translateY(-10%);
+}
+ 100% {
+ transform: translateY(0);
+}
+}
+ @-webkit-keyframes bounceInA { 0%, 100%, 20%, 40%, 60%, 80% {
+ -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
+ transition-timing-function: cubic-bezier(0.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);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+}
+}
+ @keyframes bounceInA { 0%, 100%, 20%, 40%, 60%, 80% {
+ -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
+ transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
+}
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ -ms-transform: scale3d(.3, .3, .3);
+}
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ -ms-transform: scale3d(1.1, 1.1, 1.1);
+}
+ 40% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ -ms-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);
+ -ms-transform: scale3d(1.03, 1.03, 1.03);
+}
+ 80% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ -ms-transform: scale3d(.97, .97, .97);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ -ms-transform: scale3d(1, 1, 1);
+}
+}
+.bounceInA { -webkit-animation-name: bounceInA; animation-name: bounceInA; -webkit-animation-duration: .75s; animation-duration: .75s; }
+ @-webkit-keyframes fadeInDownA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -20%, 0);
+ transform: translate3d(0, -20%, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+}
+}
+ @keyframes fadeInDownA { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -20%, 0);
+ transform: translate3d(0, -20%, 0);
+ -ms-transform: translate3d(0, -20%, 0);
+}
+ 100% {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ -ms-transform: none;
+}
+}
+.fadeInDownA { -webkit-animation-name: fadeInDownA; animation-name: fadeInDownA; }
+ @keyframes fadeInA { 0% {
+ opacity: 0;
+}
+ 100% {
+ opacity: 1;
+}
+}
+.fadeInA { -webkit-animation-name: fadeInA; animation-name: fadeInA; }
+ @-webkit-keyframes flipInY { 0% {
+ opacity: 0;
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+}
+ 0%, 40% {
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+}
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(-20deg);
+ transform: perspective(400px) rotateY(-20deg);
+}
+ 60% {
+ opacity: 1;
+ -webkit-transform: perspective(400px) rotateY(10deg);
+ transform: perspective(400px) rotateY(10deg);
+}
+ 80% {
+ -webkit-transform: perspective(400px) rotateY(-5deg);
+ transform: perspective(400px) rotateY(-5deg);
+}
+to { -webkit-transform: perspective(400px); transform: perspective(400px); }
+}
+ @keyframes flipInY { 0% {
+ opacity: 0;
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+}
+ 0%, 40% {
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+}
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(-20deg);
+ transform: perspective(400px) rotateY(-20deg);
+}
+ 60% {
+ opacity: 1;
+ -webkit-transform: perspective(400px) rotateY(10deg);
+ transform: perspective(400px) rotateY(10deg);
+}
+ 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; }
+/* animate.css */
+@-webkit-keyframes fadeInUp { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+}
+to { opacity: 1; -webkit-transform: none; transform: none; }
+}
+ @keyframes fadeInUp { 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+}
+to { opacity: 1; -webkit-transform: none; transform: none; }
+}
+.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: none; transform: none; }
+}
+ @-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 zoomInA { 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.6, .6, .6);
+ transform: scale3d(.6, .6, .6);
+}
+ 50% {
+ opacity: 1;
+}
+}
+ @keyframes zoomInA { 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.6, .6, .6);
+ transform: scale3d(.6, .6, .6);
+}
+ 50% {
+ opacity: 1;
+}
+}
+.zoomInA { -webkit-animation-name: zoomInA; animation-name: zoomInA; }
+
+/*-------------------------------
+			animation  end
+			----------------------------------*/

+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>{{$web['title']??''}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+
+    <meta name="format-detection" content="telephone=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="facebook-domain-verification" content="nzjrc3iklw88h0npf9sx583ri5tc30">
+
+    <meta property="og:url" content="{{request()->url()}}"/>
+    <meta property="og:title" content="{{$web['title']??''}}"/>
+    <meta property="og:description" content="{{$web['description']??''}}"/>
+    <meta property="og:type" content="{{$web['type']??''}}"/>
+    <meta property="og:site_name" content="{{$web['site_name']??''}}"/>
+
+    <meta name="description" itemprop="description" content="{{$web['description']??''}}"/>
+    <meta name="keywords" itemprop="keywords" content="{{$web['keywords']??''}}"/>
+
+    <link rel="shortcut icon" href="/uploads/favico.png"/>
+    <link rel="stylesheet" type="text/css" href="/v2/style.css">
+</head>
+
+<body>
+<div class="container">
+    <!-- web_head start -->
+    <header class="web_head">
+        <div class="head_layer">
+            <div class="layout">
+                <figure class="logo">
+                    <a href="/">
+                        <img src="/v2/img/demo/logo_ico.png" alt="{{$web['site_name']??''}}">
+                    </a>
+                </figure>
+                <nav class="nav_wrap">
+                    <ul class="head_nav">
+                        <li><a href="/#how-it-works">How it works</a></li>
+                        <li><a href="/#discover-creators">Discover creators</a></li>
+                        <li><a href="/#social-integrations">Social integrations</a></li>
+                        <li><a href="#join">Join</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </header>
+    <!--// web_head end -->
+
+    @yield('content')
+
+    <!-- web_footer start -->
+    <footer class="web_footer" id="join">
+        <!-- foot_service -->
+        <section class="foot_service">
+            <div class="layout">
+                <div class="foot_items">
+                    <!-- foot_item_contact -->
+                    <nav class="foot_item foot_item_contact wow fadeInLeftA" data-wow-delay=".1s" data-wow-duration=".8s">
+                        <div class="foot_item_bd">
+                            <a href="#" class="foot_logo"><img src="/v2/img/demo/foot_logo.png" alt=""></a>
+                            <p>Our company is dedicated to creating unique and comfortable clothing for men and women.</p>
+                            <address class="foot_contact_list">
+                                <ul>
+                                    <li class="contact_item contact_item_tel">
+                                        <div class="contact_txt">
+                                            <p class="item_val">Call Us: <a href="tel:800-123-4567">800-123-4567</a></p>
+                                        </div>
+                                    </li>
+                                    <li class="contact_item contact_item_eml">
+                                        <div class="contact_txt">
+                                            <p class="item_val"><a class="inquiry_btn" href="mail::2@qq.com">Send us an email</a></p>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </address>
+                        </div>
+                    </nav>
+                    <!-- foot_item_about -->
+                    <nav class="foot_item foot_item_about wow fadeInLeftA" data-wow-delay=".1s" data-wow-duration=".8s">
+                        <div class="foot_item_hd">
+                            <h2 class="title">COMPANY</h2>
+                        </div>
+                        <div class="foot_item_bd">
+                            <ul class="foot_txt_list">
+                                <li><a href="#">About Us</a></li>
+                                <li><a href="#">Contact Us</a></li>
+                                <li><a href="/blogs">Blog</a></li>
+                                <li><a href="#">Privacy Policy</a></li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <!-- foot_item_links -->
+                    <nav class="foot_item foot_item_links wow fadeInLeftA" data-wow-delay=".1s" data-wow-duration=".8s">
+                        <div class="foot_item_hd">
+                            <h2 class="title">INFORMATION</h2>
+                        </div>
+                        <div class="foot_item_bd">
+                            <ul class="foot_txt_list">
+                                <li><a href="#">FAQ's</a></li>
+                                <li><a href="#">Terms</a></li>
+                                <li><a href="#">Delivery Info</a></li>
+                                <li><a href="#">Refund Policy</a></li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <!-- foot_item_order -->
+                    <nav class="foot_item foot_item_order wow fadeInLeftA" data-wow-delay=".1s" data-wow-duration=".8s">
+                        <div class="foot_item_hd">
+                            <h2 class="title">ORDER</h2>
+                        </div>
+                        <div class="foot_item_bd">
+                            <ul class="foot_txt_list">
+                                <li><a href="#">My Account</a></li>
+                                <li><a href="#">View Cart</a></li>
+                                <li><a href="#">Wishlist</a></li>
+                                <li><a href="#">Checkout</a></li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </section>
+        <!-- foot_bar -->
+        <section class="foot_bar">
+            <div class="layout flex_row">
+                <div class="copyright">© 2022 SHOPK</div>
+                <ul class="foot_pay">
+                    <li><a href="#"><img src="/v2/img/demo/pay01.png" alt=""></a></li>
+                    <li><a href="#"><img src="/v2/img/demo/pay02.png" alt=""></a></li>
+                    <li><a href="#"><img src="/v2/img/demo/pay03.png" alt=""></a></li>
+                    <li><a href="#"><img src="/v2/img/demo/pay04.png" alt=""></a></li>
+                    <li><a href="#"><img src="/v2/img/demo/pay05.png" alt=""></a></li>
+                </ul>
+            </div>
+        </section>
+    </footer>
+    <!--// web_footer end -->
+</div>
+<!--// container end -->
+
+<script src="/v2/js/jquery.min.js"></script>
+<script src="/v2/js/common.js"></script>
+
+</body>
+
+</html>

+@extends('v2/base')
+
+@section('content')
+
+    <!-- sys_sub_head -->
+    <section class="sys_sub_head">
+        <div class="page-title-bar">
+            <h2 class="title">Blog</h2>
+        </div>
+    </section>
+
+    <!-- web_main start -->
+    <section class="web_main page_main">
+        <div class="layout">
+            <div class="blog-item">
+                <h2 class="item-title blog-title">{{$data['blog_title']}}</h2>
+                <div class="item-author">
+                    <span class="time">{{date('F:d,Y',strtotime($data['blog_push_time']))}}</span>|
+                    <span class="author">BY {{$data['blog_push_author']}}</span>
+                </div>
+                <article class="blog-article">
+                    {!! $data['body']['blog_body']??'' !!}
+                </article>
+                <div class="item-els flex_row">
+                    <div class="item-tag">
+                        <label>tags:</label>
+                        <em>{{$data['blog_seo_keywords']}}</em>
+                    </div>
+                    <ul class="page-sns flex_row">
+                        <li class="shear-facebook"><a href="javascript:;"><img src="/v2/img/demo/psns01.png"></a></li>
+                        <li class="shear-twitter"><a href="javascript:;"><img src="/v2/img/demo/psns02.png"></a></li>
+                        <li class="shear-email"><a href="javascript:;"><img src="/v2/img/demo/psns03.png"></a></li>
+                        <li class="shear-pinterest"><a href="javascript:;"><img src="/v2/img/demo/psns04.png"></a></li>
+                    </ul>
+                </div>
+                <div class="turn-pages flex_row">
+                    @if(!empty($data['prev_data']))
+                        <a href="/blog/{{$data['prev_data']['blog_id']}}" class="prev flex_row">
+                            <i class="pegk pe-7s-angle-left"></i>
+                            <div class="info">
+                                <p>previous post</p>
+                                <strong>{{$data['prev_data']['blog_title']}}</strong>
+                            </div>
+                        </a>
+                    @else
+                        <a class="prev flex_row"></a>
+                    @endif
+                    @if(!empty($data['next_data']))
+                        <a href="/blog/{{$data['next_data']['blog_id']}}" class="next flex_row">
+                            <i class="pegk pe-7s-angle-right"></i>
+                            <div class="info">
+                                <p>next post</p>
+                                <strong>{{$data['next_data']['blog_title']}}</strong>
+                            </div>
+                        </a>
+                    @endif
+                </div>
+            </div>
+
+        </div>
+
+        @if(!empty($data['correlation_data']))
+        <!-- related-product -->
+        <div class="index-section related-product">
+            <div class="sm-section-title-bar">
+                <h2 class="title">related stories</h2>
+            </div>
+            <div class="product-slide-wrap related-product-slide-wrap">
+                <div class="layout">
+                    <div class="product-slide">
+                        <ul class="swiper-wrapper">
+                            @foreach($data['correlation_data'] as $item)
+                            <li class="swiper-slide product-item">
+                                <div class="item-inner">
+                                    <div class="item-img">
+                                        <a href="/blog/{{$item['blog_id']}}">
+                                            <img src="{{$item['blog_thumbnail']}}" alt="">
+                                        </a>
+                                    </div>
+                                    <div class="item-info">
+                                        <h2 class="item-title">
+                                            <a href="/blog/{{$item['blog_id']}}">{{$item['blog_title']}}</a>
+                                        </h2>
+                                        <div class="item-price">{{date('F d',strtotime($item['blog_push_time']))}}</div>
+                                    </div>
+                                </div>
+                            </li>
+                            @endforeach
+                        </ul>
+                    </div>
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
+                </div>
+            </div>
+        </div>
+        @endif
+    </section>
+    <!--// web_main end -->
+
+
+@endsection

+@extends('v2/base')
+
+@section('content')
+
+    <!-- sys_sub_head -->
+    <section class="sys_sub_head">
+        <div class="page-title-bar">
+            <h2 class="title">Blog</h2>
+        </div>
+    </section>
+
+    <!-- web_main start -->
+    <section class="web_main page_main">
+        <div class="layout">
+            <div class="blog_list">
+                <ul class="blog-list-items">
+                    @foreach($lists['data']??[] as $list)
+                    <li class="blog-item">
+                        <h2 class="item-title">
+                            <a href="/blog/{{$list['blog_id']}}">{{$list['blog_title']}}</a>
+                        </h2>
+                        <div class="item-author">
+                            <span class="time">{{date('F:d,Y',strtotime($list['blog_push_time']))}}</span>|
+                            <span class="author">BY {{$list['blog_push_author']}}</span>
+                        </div>
+                        @if($list['blog_thumbnail'])
+                        <div class="item-img flex_row">
+                            <a href="/blog/{{$list['blog_id']}}">
+                                <img src="{{$list['blog_thumbnail']}}" alt="{{$list['blog_title']}}">
+                            </a>
+                        </div>
+                        @endif
+                        <div class="item-text">
+                            {!! $list['blog_seo_description'] !!}
+                        </div>
+                        <div class="item-els flex_row">
+                            <a href="/blog/{{$list['blog_id']}}" class="btn-learnmore item-more">read more</a>
+                            <div class="item-tag">
+                                <label>tags:</label>
+                                <em>{{$list['blog_seo_keywords']}}</em>
+                            </div>
+                        </div>
+                    </li>
+                    @endforeach
+                </ul>
+                <div class="page_bar">
+                    <div class="pages">
+                        @foreach($lists['links']??[] as $p)
+                            @if($p['url'])
+                            <a href="?page={{$p['page']}}" class="@if($p['active']) current @endif page-fy">{!! $p['label'] !!}</a>
+                            @else
+                                <span class="page-fy" style="cursor: no-drop;">{!! $p['label'] !!}</span>
+                            @endif
+                        @endforeach
+{{--                        <a href='' class='page-fy' id="first_page">&lt;&lt;</a>--}}
+{{--                        <a href='' class='page-fy'> &lt; Prev </a>--}}
+{{--                        <a href="" class='page-fy'> Next &gt; </a>--}}
+{{--                        <a href='' class='page-fy'>&gt;&gt;</a>--}}
+{{--                        <span class='current2' id="page_total">Page 1 / 2</span>--}}
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+
+    </section>
+    <!--// web_main end -->
+
+
+@endsection

+@extends('v2/base')
+
+@section('content')
+    <!-- banner -->
+    <section class="slider_banner swiper-container layout">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide">
+                <a href="#"><img src="/v2/img/demo/banner_index.png" alt="banner_index" /></a>
+                <div class="banner_info wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <h2>Create your <br> Own shop</h2>
+                    <p>Sell products your fans will love. We produce and deliver. You get commissions</p>
+                    <a href="#" class="more">Start creating for free</a>
+                </div>
+                <div class="banner_nav flex_row wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <div class="nav_item">
+                        <h3><a href="#">Launch a <br> free store</a></h3>
+                        <p>Free server and domain name</p>
+                    </div>
+                    <div class="nav_item">
+                        <h3><a href="#">Choose <br> products</a></h3>
+                    </div>
+                    <div class="nav_item">
+                        <h3><a href="#">Sell on your <br> social channels</a></h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- web_main start -->
+    <section class="web_main index_main">
+
+        <!-- index_creators_selling -->
+        <section class="index_creators_selling" id="discover-creators">
+            <div class="layout">
+                <div class="index_hd wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <h2 class="hd_title">Creators Selling on Shopk</h2>
+                </div>
+                <div class="creators_sell_wrap wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <div class="sell_item">
+                        <a href="#"><img src="/v2/img/demo/selling01.png" alt=""></a>
+                        <h3><a href="#">Ryan Salzer</a></h3>
+                    </div>
+                    <div class="sell_item">
+                        <a href="#"><img src="/v2/img/demo/selling02.png" alt=""></a>
+                        <h3><a href="#">Ryan Salzer</a></h3>
+                    </div>
+                    <div class="sell_item">
+                        <a href="#"><img src="/v2/img/demo/selling03.png" alt=""></a>
+                        <h3><a href="#">Ryan Salzer</a></h3>
+                    </div>
+                    <div class="sell_item">
+                        <a href="#"><img src="/v2/img/demo/selling04.png" alt=""></a>
+                        <h3><a href="#">Ryan Salzer</a></h3>
+                    </div>
+                    <div class="sell_item">
+                        <a href="#"><img src="/v2/img/demo/selling05.png" alt=""></a>
+                        <h3><a href="#">Ryan Salzer</a></h3>
+                    </div>
+                    <div class="sell_item">
+                        <a href="#"><img src="/v2/img/demo/selling06.png" alt=""></a>
+                        <h3><a href="#">Ryan Salzer</a></h3>
+                    </div>
+                </div>
+                <a href="#" class="more">Check them out here</a>
+            </div>
+        </section>
+        <!-- index_creators_selling end -->
+
+        <!-- index_social_channels -->
+        <section class="index_social_channels" id="social-integrations">
+            <div class="layout">
+                <div class="index_hd wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <h2 class="hd_title">Sell on your social channels</h2>
+                </div>
+                <div class="sell_social_wrap flex_row wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <div class="social_display">
+                        <img src="/v2/img/demo/social.png" alt="">
+                        <div class="social_tips flex_row">
+                            <p>Share anything, everywhere</p>
+                            <a href="#" class="bag"></a>
+                        </div>
+                    </div>
+                    <div class="sell_social_content">
+                        <p>Create on Spring, then feed your products
+                            seamlessly across your social channels. Let your fans shop exactly where they are consuming your
+                            content.</p>
+                        <ul class="channels_list">
+                            <li><a href="#"><img src="/v2/img/demo/facebook.png" alt=""></a></li>
+                            <li><a href="#"><img src="/v2/img/demo/ins.png" alt=""></a></li>
+                            <li><a href="#"><img src="/v2/img/demo/twitter.png" alt=""></a></li>
+                            <li><a href="#"><img src="/v2/img/demo/print.png" alt=""></a></li>
+                            <li><a href="#"><img src="/v2/img/demo/tiktok.png" alt=""></a></li>
+                            <li><a href="#"><img src="/v2/img/demo/youtube.png" alt=""></a></li>
+                        </ul>
+                        <a href="#" class="start">Start creating</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- index_social_channels end -->
+
+        <!-- index_workflow -->
+        <section class="index_workflow" id="how-it-works">
+            <div class="layout">
+                <div class="index_hd wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <h2 class="hd_title">How it works</h2>
+                </div>
+                <div class="workflow_wrap flex_row wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
+                    <div class="step_item">
+                        <div class="step_info">
+                            <h3>Create</h3>
+                            <p>Choose products and create acustom store for free.</p>
+                        </div>
+                        <a href="#"><img src="/v2/img/demo/work01.png" alt=""></a>
+                    </div>
+                    <div class="step_item">
+                        <div class="step_info">
+                            <h3>Share</h3>
+                            <p>Connect your social accounts, share your products with your fans and friends.</p>
+                        </div>
+                        <a href="#"><img src="/v2/img/demo/work02.png" alt=""></a>
+                    </div>
+                    <div class="step_item">
+                        <div class="step_info">
+                            <h3>Earn</h3>
+                            <p>Get the profit you deserve while we handle production,shipping, and customer support for you.</p>
+                        </div>
+                        <a href="#"><img src="/v2/img/demo/work03.png" alt=""></a>
+                    </div>
+                </div>
+                <a href="#" class="start">Start creating</a>
+            </div>
+        </section>
+        <!-- index_workflow end -->
+
+    </section>
+    <!--// web_main end -->
+
+@endsection

@@ -12,45 +12,59 @@ use Illuminate\Support\Facades\Route;
 | contains the "web" middleware group. Now create something great!
 | contains the "web" middleware group. Now create something great!
 |
 |
 */
 */
-
+// TODO::这个是第一版 的路由，暂时不要删除，可能会临时想起了恢复看下
 // 多语言
 // 多语言
-$px = explode('/',trim($_SERVER['PATH_INFO']??'','/').'/')[0];
-if (empty(\App\Fun::lang()[$px])){
-    $px = '';
-}
-
-define('THE_LANG',$px ? : 'en');
-
-Route::prefix($px)->group(function (){
-    // 首页
-    Route::get('/', [\App\Http\Controllers\Index::class,'home']);
-//    Route::get('/index.html', [\App\Http\Controllers\Index::class,'home']);
-
-// 关于我们
-    Route::get('about-us', [\App\Http\Controllers\Index::class,'about']);
-//    Route::get('about-us.html', [\App\Http\Controllers\Index::class,'about']);
-//    Route::get('about-us/index.html', [\App\Http\Controllers\Index::class,'about']);
-
-//博客
-    Route::get('blog', [\App\Http\Controllers\Index::class,'blog'])->name('blog');
-//    Route::get('blog.html', [\App\Http\Controllers\Index::class,'blog'])->name('blog');
-    Route::get('blog/{id}', [\App\Http\Controllers\Index::class,'blog_info'])->name('blog.info')->where('id','\d+');
-//    Route::get('blog/{id}.html', [\App\Http\Controllers\Index::class,'blog_info'])->name('blog.info')->where('id','\d+');
-
+//$px = explode('/',trim($_SERVER['PATH_INFO']??'','/').'/')[0];
+//if (empty(\App\Fun::lang()[$px])){
+//    $px = '';
+//}
 //
 //
-    Route::get('kol-solution', [\App\Http\Controllers\Index::class,'kolSolution']);
-//    Route::get('kol-solution.html', [\App\Http\Controllers\Index::class,'kolSolution']);
-
+//define('THE_LANG',$px ? : 'en');
 //
 //
-    Route::get('faq', [\App\Http\Controllers\Index::class,'fqa']);
-//    Route::get('faq.html', [\App\Http\Controllers\Index::class,'fqa']);
-
+//Route::prefix($px)->group(function (){
+//    // 首页
+//    Route::get('/', [\App\Http\Controllers\Index::class,'home']);
+////    Route::get('/index.html', [\App\Http\Controllers\Index::class,'home']);
+//
+//// 关于我们
+//    Route::get('about-us', [\App\Http\Controllers\Index::class,'about']);
+////    Route::get('about-us.html', [\App\Http\Controllers\Index::class,'about']);
+////    Route::get('about-us/index.html', [\App\Http\Controllers\Index::class,'about']);
+//
+////博客
+//    Route::get('blog', [\App\Http\Controllers\Index::class,'blog'])->name('blog');
+////    Route::get('blog.html', [\App\Http\Controllers\Index::class,'blog'])->name('blog');
+//    Route::get('blog/{id}', [\App\Http\Controllers\Index::class,'blog_info'])->name('blog.info')->where('id','\d+');
+////    Route::get('blog/{id}.html', [\App\Http\Controllers\Index::class,'blog_info'])->name('blog.info')->where('id','\d+');
+//
+////
+//    Route::get('kol-solution', [\App\Http\Controllers\Index::class,'kolSolution']);
+////    Route::get('kol-solution.html', [\App\Http\Controllers\Index::class,'kolSolution']);
+//
+////
+//    Route::get('faq', [\App\Http\Controllers\Index::class,'fqa']);
+////    Route::get('faq.html', [\App\Http\Controllers\Index::class,'fqa']);
+//
+//
+//    Route::get('shop', [\App\Http\Controllers\Index::class,'shop']);
+////    Route::get('shop.html', [\App\Http\Controllers\Index::class,'shop']);
+//
+//    Route::get('shopk-app', [\App\Http\Controllers\Index::class,'shopApp']);
+////    Route::get('shopk-app.html', [\App\Http\Controllers\Index::class,'shopApp']);
+//
+//});
+/***************************** end first ***********************************/
 
 
-    Route::get('shop', [\App\Http\Controllers\Index::class,'shop']);
-//    Route::get('shop.html', [\App\Http\Controllers\Index::class,'shop']);
 
 
-    Route::get('shopk-app', [\App\Http\Controllers\Index::class,'shopApp']);
-//    Route::get('shopk-app.html', [\App\Http\Controllers\Index::class,'shopApp']);
+/**
+ * 第二版暂时没有多语言功能
+ */
+Route::get('/', [\App\Http\Controllers\V2\Index::class,'home']);
+// 博客列表
+Route::get('/blogs', [\App\Http\Controllers\V2\Index::class,'blog']);
+// 博客详情
+Route::get('/blog/{id}', [\App\Http\Controllers\V2\Index::class,'blog_info'])->where('id','\d+');
+// 单页
+Route::get('/page/{id}', [\App\Http\Controllers\V2\Index::class,'page'])->where('id','\d+');
 
 
-});
 
 

-<?php
-
-namespace Tests;
-
-use Illuminate\Contracts\Console\Kernel;
-
-trait CreatesApplication
-{
-    /**
-     * Creates the application.
-     *
-     * @return \Illuminate\Foundation\Application
-     */
-    public function createApplication()
-    {
-        $app = require __DIR__.'/../bootstrap/app.php';
-
-        $app->make(Kernel::class)->bootstrap();
-
-        return $app;
-    }
-}

-<?php
-
-namespace Tests\Feature;
-
-use Illuminate\Foundation\Testing\RefreshDatabase;
-use Tests\TestCase;
-
-class ExampleTest extends TestCase
-{
-    /**
-     * A basic test example.
-     *
-     * @return void
-     */
-    public function testBasicTest()
-    {
-        $response = $this->get('/');
-
-        $response->assertStatus(200);
-    }
-}

-<?php
-
-namespace Tests;
-
-use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
-
-abstract class TestCase extends BaseTestCase
-{
-    use CreatesApplication;
-}

-<?php
-
-namespace Tests\Unit;
-
-use PHPUnit\Framework\TestCase;
-
-class ExampleTest extends TestCase
-{
-    /**
-     * A basic test example.
-     *
-     * @return void
-     */
-    public function testBasicTest()
-    {
-        $this->assertTrue(true);
-    }
-}