<!--
                                                                                                                                                                                                                             
                                                                                                                                                                                                                         
        GGGGGGGGGGGGG               AAA               ZZZZZZZZZZZZZZZZZZZEEEEEEEEEEEEEEEEEEEEEE     DDDDDDDDDDDDD        EEEEEEEEEEEEEEEEEEEEEE   SSSSSSSSSSSSSSS IIIIIIIIII        GGGGGGGGGGGGGNNNNNNNN        NNNNNNNN
     GGG::::::::::::G              A:::A              Z:::::::::::::::::ZE::::::::::::::::::::E     D::::::::::::DDD     E::::::::::::::::::::E SS:::::::::::::::SI::::::::I     GGG::::::::::::GN:::::::N       N::::::N
   GG:::::::::::::::G             A:::::A             Z:::::::::::::::::ZE::::::::::::::::::::E     D:::::::::::::::DD   E::::::::::::::::::::ES:::::SSSSSS::::::SI::::::::I   GG:::::::::::::::GN::::::::N      N::::::N
  G:::::GGGGGGGG::::G            A:::::::A            Z:::ZZZZZZZZ:::::Z EE::::::EEEEEEEEE::::E     DDD:::::DDDDD:::::D  EE::::::EEEEEEEEE::::ES:::::S     SSSSSSSII::::::II  G:::::GGGGGGGG::::GN:::::::::N     N::::::N
 G:::::G       GGGGGG           A:::::::::A           ZZZZZ     Z:::::Z    E:::::E       EEEEEE       D:::::D    D:::::D   E:::::E       EEEEEES:::::S              I::::I   G:::::G       GGGGGGN::::::::::N    N::::::N
G:::::G                        A:::::A:::::A                  Z:::::Z      E:::::E                    D:::::D     D:::::D  E:::::E             S:::::S              I::::I  G:::::G              N:::::::::::N   N::::::N
G:::::G                       A:::::A A:::::A                Z:::::Z       E::::::EEEEEEEEEE          D:::::D     D:::::D  E::::::EEEEEEEEEE    S::::SSSS           I::::I  G:::::G              N:::::::N::::N  N::::::N
G:::::G    GGGGGGGGGG        A:::::A   A:::::A              Z:::::Z        E:::::::::::::::E          D:::::D     D:::::D  E:::::::::::::::E     SS::::::SSSSS      I::::I  G:::::G    GGGGGGGGGGN::::::N N::::N N::::::N
G:::::G    G::::::::G       A:::::A     A:::::A            Z:::::Z         E:::::::::::::::E          D:::::D     D:::::D  E:::::::::::::::E       SSS::::::::SS    I::::I  G:::::G    G::::::::GN::::::N  N::::N:::::::N
G:::::G    GGGGG::::G      A:::::AAAAAAAAA:::::A          Z:::::Z          E::::::EEEEEEEEEE          D:::::D     D:::::D  E::::::EEEEEEEEEE          SSSSSS::::S   I::::I  G:::::G    GGGGG::::GN::::::N   N:::::::::::N
G:::::G        G::::G     A:::::::::::::::::::::A        Z:::::Z           E:::::E                    D:::::D     D:::::D  E:::::E                         S:::::S  I::::I  G:::::G        G::::GN::::::N    N::::::::::N
 G:::::G       G::::G    A:::::AAAAAAAAAAAAA:::::A    ZZZ:::::Z     ZZZZZ  E:::::E       EEEEEE       D:::::D    D:::::D   E:::::E       EEEEEE            S:::::S  I::::I   G:::::G       G::::GN::::::N     N:::::::::N
  G:::::GGGGGGGG::::G   A:::::A             A:::::A   Z::::::ZZZZZZZZ:::ZEE::::::EEEEEEEE:::::E     DDD:::::DDDDD:::::D  EE::::::EEEEEEEE:::::ESSSSSSS     S:::::SII::::::II  G:::::GGGGGGGG::::GN::::::N      N::::::::N
   GG:::::::::::::::G  A:::::A               A:::::A  Z:::::::::::::::::ZE::::::::::::::::::::E     D:::::::::::::::DD   E::::::::::::::::::::ES::::::SSSSSS:::::SI::::::::I   GG:::::::::::::::GN::::::N       N:::::::N
     GGG::::::GGG:::G A:::::A                 A:::::A Z:::::::::::::::::ZE::::::::::::::::::::E     D::::::::::::DDD     E::::::::::::::::::::ES:::::::::::::::SS I::::::::I     GGG::::::GGG:::GN::::::N        N::::::N
        GGGGGG   GGGGAAAAAAA                   AAAAAAAZZZZZZZZZZZZZZZZZZZEEEEEEEEEEEEEEEEEEEEEE     DDDDDDDDDDDDD        EEEEEEEEEEEEEEEEEEEEEE SSSSSSSSSSSSSSS   IIIIIIIIII        GGGGGG   GGGGNNNNNNNN         NNNNNNN
                                                                                                                                                                                                                         
                                                                                                                                                                                                                                                                                                                                                                                                                                                 
 -->
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-ua-compatible" content="IE=edge">
    <meta http-equiv="x-ua-compatible" content="IE=9,10,11">
    <meta property="og:title" content="諭方老師奇門異數
RWD形象官網 | 盯睛設計 GAZE CREATIVE DESIGN[網站設計/平面設計/CSR/ESG/品牌規劃]"/>
    <meta property="og:url" content="http://gaze-design.com/work/%e8%ab%ad%e6%96%b9%e8%80%81%e5%b8%ab%e5%a5%87%e9%96%80%e7%95%b0%e6%95%b8RWD%e5%bd%a2%e8%b1%a1%e5%ae%98%e7%b6%b2"/>
    <meta name="keywords" content="" />
	<meta property="og:description" name="description"  content="">
    <meta name="author" content="盯睛設計有限公司 GAZE CREATIVE DESIGN">
    <meta name="copyright" content="盯睛設計有限公司 GAZE CREATIVE DESIGN">
    <link rel="alternate" href="https://gaze-design.com" hreflang="zh-tw" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <meta property="og:image" content="https://gaze-design.com/dist/images/img_wordmark_pc.png" />
    <meta property="og:title" content="諭方老師奇門異數
RWD形象官網 | 盯睛設計 GAZE CREATIVE DESIGN[網站設計/平面設計/CSR/ESG/品牌規劃]"/>
    <meta property="og:locale" content="zh_TW"/>
    <meta property="og:type" content="Website"/>
<!--     <meta property='og:image' content='https://gaze-design.com/dist/images/gaze_logo.png'> -->
    <meta property="og:description" content=""/>
    <meta property="og:url" content="https://gaze-design.com" />
    <meta property="article:publisher" content="https://www.facebook.com/gazecreativedesign/"/>
    <meta property="article:section" content="台北網頁設計精選"/>
    <link rel="shortcut icon" href="/dist/images/gaze_ico.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" sizes="128x128" href="/dist/images/gaze_ico128.ico">
    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="/dist/images/gaze_ico128.ico">
    <meta name="format-detection" content="telephone=no">
    <title>諭方老師奇門異數
RWD形象官網 | 盯睛設計 GAZE CREATIVE DESIGN[網站設計/平面設計/CSR/ESG/品牌規劃]</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Noto+Sans+TC:wght@300;400;500&family=Playfair+Display:ital@1&family=Press+Start+2P&display=swap"> -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Noto+Sans+TC:wght@300;400;500&family=Playfair+Display:ital@1&family=Press+Start+2P&display=swap" rel="stylesheet">
    <!-- <noscript>
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Noto+Sans+TC:wght@300;400;500&family=Playfair+Display:ital@1&family=Press+Start+2P&display=swap" rel="stylesheet">
    </noscript> -->
	<!-- Global site tag (gtag.js) - Google Ads: 950663333 -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=AW-950663333"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'AW-950663333');
	  gtag('config', 'UA-173121382-1');
	</script>
	<!-- Event snippet for Website lead conversion page -->
	<script>
	  gtag('event', 'conversion', {'send_to': 'AW-950663333/uewVCKrftNgBEKXxp8UD'});
	</script>	<script type="application/ld+json">
{
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "諭方老師奇門異數
RWD形象官網",
      "image": [
        "https://gaze-design.com/upload/2022_11_21_1743442.webp"
       ],
      "author": [{
          "@type": "Corporation",
          "name": "盯睛設計 GAZE CREATIVE DESIGN[網站設計/平面設計/CSR/ESG/品牌規劃]",
          "url": "https://gaze-design.com/"
        }]
    }
</script>
<link rel="canonical" href="https://gaze-design.com/work/諭方老師奇門異數RWD形象官網"/>
<link rel="stylesheet" href="/dist/css/main.css">
<link rel="stylesheet" href="/dist/css/workinfo.css">
<link rel="stylesheet" href="/dist/css/aos.css">
</head>

<body id="pageone">
     <!-- 201111 -->
 <header class="header_show ind-ch">
<!-- 201111 -->
    <div class="header_box">
        <!-- mobile menu -->
        <div class="menu-wrapper">
            <span>
                menu
            </span>  
            <span>
                close
            </span> 
            <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120.93 64.93">
                <g>
                    <path d="M43.23,9.34C29.5,12.23,14.48,19.09,5.96,29.02c-8.1,9.44-7.57,21.44,3.73,28.68,10.91,6.99,26.93,7.13,39.87,6.54,13.6-.63,27.4-2.67,40.13-6.91,11.08-3.69,23.79-9.34,28.98-19.15,3.59-6.79,1.45-14.16-3.56-19.94C102.16,3.29,76.02-1.92,55.66,1.45c-13.91,2.31-25.84,9.38-33.98,19.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".93" class="opDZOeOq_0"></path>
                </g>
            </svg>
        </div>
        <div class="nav_box">
            <nav>
                <ul>
                    <li>
                        <a href="/about/" title="關於台北的 盯睛設計有限公司">
                            <span>about</span>
                            <div class="mask-bx">
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                            </div>
                            <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120.93 64.93">
                                <g>
                                    <path d="M43.23,9.34C29.5,12.23,14.48,19.09,5.96,29.02c-8.1,9.44-7.57,21.44,3.73,28.68,10.91,6.99,26.93,7.13,39.87,6.54,13.6-.63,27.4-2.67,40.13-6.91,11.08-3.69,23.79-9.34,28.98-19.15,3.59-6.79,1.45-14.16-3.56-19.94C102.16,3.29,76.02-1.92,55.66,1.45c-13.91,2.31-25.84,9.38-33.98,19.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".93" class="opDZOeOq_0"></path>
                                </g>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="/service/" title="服務項目包含 網站設計/平面設計/包裝設計/CSR設計/ESG設計">
                            <span>service</span>
                            <div class="mask-bx">
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                            </div>
                            <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120.93 64.93">
                                <g>
                                    <path d="M43.23,9.34C29.5,12.23,14.48,19.09,5.96,29.02c-8.1,9.44-7.57,21.44,3.73,28.68,10.91,6.99,26.93,7.13,39.87,6.54,13.6-.63,27.4-2.67,40.13-6.91,11.08-3.69,23.79-9.34,28.98-19.15,3.59-6.79,1.45-14.16-3.56-19.94C102.16,3.29,76.02-1.92,55.66,1.45c-13.91,2.31-25.84,9.38-33.98,19.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".93" class="opDZOeOq_0"></path>
                                </g>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="/work/" title="作品集有 網站/平面/包裝/CSR/ESG 的相關設計">
                            <span>work</span>
                            <div class="mask-bx">
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                            </div>
                            <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120.93 64.93">
                                <g>
                                    <path d="M43.23,9.34C29.5,12.23,14.48,19.09,5.96,29.02c-8.1,9.44-7.57,21.44,3.73,28.68,10.91,6.99,26.93,7.13,39.87,6.54,13.6-.63,27.4-2.67,40.13-6.91,11.08-3.69,23.79-9.34,28.98-19.15,3.59-6.79,1.45-14.16-3.56-19.94C102.16,3.29,76.02-1.92,55.66,1.45c-13.91,2.31-25.84,9.38-33.98,19.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".93" class="opDZOeOq_0"></path>
                                </g>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="/contact/" title="立即洽詢 盯睛設計 網站/平面/包裝/CSR/ESG 等相關設計">
                            <span>contact</span>
                            <div class="mask-bx">
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                                <div class="mask">
                                    <div class="h-circle"></div>
                                </div>
                            </div>
                            <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120.93 64.93">
                                <g>
                                    <path d="M43.23,9.34C29.5,12.23,14.48,19.09,5.96,29.02c-8.1,9.44-7.57,21.44,3.73,28.68,10.91,6.99,26.93,7.13,39.87,6.54,13.6-.63,27.4-2.67,40.13-6.91,11.08-3.69,23.79-9.34,28.98-19.15,3.59-6.79,1.45-14.16-3.56-19.94C102.16,3.29,76.02-1.92,55.66,1.45c-13.91,2.31-25.84,9.38-33.98,19.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".93" class="opDZOeOq_0"></path>
                                </g>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="nav-cbx mo">
                <ul>
                    <li>
                        <a href="tel:0255751900" class="tel" title="播打電話至[盯睛設計] 洽詢網站設計或平面設計">02 5575 1900</a>
                    </li>
                    <li>
                        <a href="emailto:info@gaze-design.com" title="寄信至[盯睛設計] 洽詢網站設計或平面設計">info@gaze-design.com</a>
                    </li>
                </ul>
            </div>
            <div class="nav-bg mo">
                Let's make something creative and amazing together!
            </div>
        </div>
    </div>
</header>


<div class="cursor">
    <span>yes!</span>
    <i>
        <img src="/dist/images/pen.png" alt="查看 台北 網站設計/平面設計/包裝設計/CSR設計/ESG設計 公司 [盯睛設計] 的聯絡方式" title="查看 台北 網站設計/平面設計/包裝設計/CSR設計/ESG設計 公司 [盯睛設計] 的聯絡方式">
    </i>
    <div class="arr-bx">
        <div class="l-arr">
            <div class="arrow arrow-first"></div>
            <div class="arrow arrow-second"></div>
        </div>
        <div class="r-arr">
            <div class="arrow arrow-first"></div>
            <div class="arrow arrow-second"></div>
        </div>
    </div>
</div>

<a href="/" class="logo" title="返回 盯睛設計 RWD網站 首頁">
    <div class="l-eyes">
        <div class="img-bx">
            <img src="/dist/images/icon_eye_up.png" alt="網站 logo 上半部 設計" title="網站 logo 上半部 設計">
        </div>
        <div class="img-bx">
            <img src="/dist/images/icon_eye_down.png" alt="網站 logo 下半部 設計" title="網站 logo 下半部 設計">
        </div>
    </div>
    <div class="cen-nose">
        <img src="/dist/images/icon_eye_center.png" alt="網站 logo 中間部份 設計" title="網站 logo 中間部份 設計">
    </div>
    <div class="r-eyes">
        <div class="circle"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
    </div>
    <div class="hid">
        盯睛設計 GAZE CREATIVE DESIGN [網站設計/平面設計/CSR/ESG設計]
    </div>
</a>    
    <main>
        <div class="workinfo-banner">
          <img class="pc" src="/upload/2022_11_21_1743442.webp" alt="" title="">
          <img class="mo" src="/upload/2022_11_21_1743463.webp" alt="" title="">
        </div>
        <section class="workinfo-item">
          
          <div class="flex-bx">
            <div class="l-bx">
              <h1 class="ti">諭方老師奇門異數<br />
RWD形象官網</h1>
            </div>
            <div class="r-bx">
              <div class="class-bx">
                <div class="class-list">
                  <div class="class-ti">
                    category /
                  </div>
                  <div class="class-des">Web Design</div>
                </div>
                <div class="class-list">
                  <div class="class-ti">
                    client /
                  </div>
                  <div class="class-des">諭方老師</div>
                </div>
                <div class="class-list">
                  <div class="class-ti">
                    deliverables /
                  </div>
                  <div class="class-des">UI/UX design<br />
Prototyping<br />
Website development</div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-bx">
            <div class="l-bx">
              <div class="des-ti">
                about the project /
              </div>
            </div>
            <div class="r-bx">
              <div class="sh-des">整體設計以極具東方文化特色的筆墨圖樣風格，並使用親切溫暖且素雅明亮的宣紙紋理作為背景，搭配轉動中的命理羅盤、層次交疊且向下飄落的漢文字句，以及利用鼠標滑過去開啟不同紋樣窗門來展現不同服務項目的互動設計，呈現了融合現代與傳統東方神秘文化的印象感。其中更有運用視差滾動的技術，使整體畫面更加立體豐富。</div>
                            <a target="_blank" href="https://yufang.vip/" class="more-ani cursor-scale small" title=" 網址連結">
                <span>v</span>
                <span>i</span>
                <span>s</span>
                <span>i</span>
                <span>t</span>
                <i></i>
                <span>w</span>
                <span>e</span>
                <span>b</span>
                <span>s</span>
                <span>i</span>
                <span>t</span>
                <span>e</span>
              </a>
                          </div>
          </div>
        </section>
                <div class="html-bx">
        	          	<div class="editor_Content" data-aos="fade-up">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_180616.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_180629.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="fade-left">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_180450.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_180503.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="fade-right">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_180406.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_180421.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="zoom-in-right">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_180320.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_180336.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="zoom-in-left">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_175146.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_175203.webp" style="height:1138px; width:768px" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="zoom-in-up">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_175100.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_175115.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="fade-left">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_175023.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_175037.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="fade-right">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_174944.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_174959.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="fade-left">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_174844.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_174858.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="zoom-in">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_174457.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_174533.webp" style="width:100%" /></p>
</div>
          	</div>
          	          	<div class="editor_Content" data-aos="zoom-in-up">
              	<div class="editor_box pc_use"><p><img alt="" src="/upload/images/2022_11_21_174754.webp" style="width:100%" /></p>
</div>
              	<div class="editor_Box mo_use"><p><img alt="" src="/upload/images/2022_11_21_174807.webp" style="width:100%" /></p>
</div>
          	</div>
          	        </div>
                <div class="flex-btnbx">
        	         	<a href="/work/中研院基因體研究中心P3實驗室RWD網站系統" class="prev-btn" title="中研院基因體研究中心P3實驗室 RWD 網站系統/網站設計">
            	<div class="arr"></div>
            	<span>prev</span>
          	</a>
          	          	<a href="/work/" class="backlist-btn more-ani cursor-scale small">
                <span>
                  b
                </span>
                <span>
                  a
                </span>
                <span>
                  c
                </span>
                <span>
                  k
                </span>
                <i></i>
                <span>
                  t
                </span>
                <span>
                  o
                </span>
                <i></i>
                <span>
                  l
                </span>
                <span>
                  i
                </span>
                <span>
                  s
                </span>
                <span>
                  t
                </span>
          	</a>
        	          	<a href="/work/粉紅森林RWD形象官網" class="next-btn" title="粉紅森林咖啡生豆商 RWD形象官網/網站設計/平面設計/dm設計/型錄設計/展場設計">
            	<div class="arr"></div>
            	<span>next</span>
          	</a>
          	        </div>
                <a href="/work/中研院基因體研究中心P3實驗室RWD網站系統" class="full-prev cursor-scale larr" title="中研院基因體研究中心P3實驗室 RWD 網站系統/網站設計"></a>
                <a href="/work/粉紅森林RWD形象官網" class="full-next cursor-scale rarr" title="粉紅森林咖啡生豆商 RWD形象官網/網站設計/平面設計/dm設計/型錄設計/展場設計"></a>
            </main>
        <div class="popup-bx">
      <div class="des-bx">
        <div class="b-ti">左右滑動可切換專案</div>
        <div class="e-ti">Swipe left and right to switch projects</div>
        <div class="finger-bx">
          <div class="line">
            <div class="ar-l"></div>
            <div class="ar-r"></div>
          </div>
        </div>
      </div>
    </div>
    <section class="contact-item">
    <a href="/contact/" class="cursor-scale" title="立即填寫表單 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求">
        <div class="tx">you <i>need</i> us?</div>
        <div class="moball">
            <span>yes!</span>
        </div>
    </a>
</section>
<footer>
    <div class="f-bx">
        <div>
            <ul>
                <li>
                    <a href="tel:0255751900" class="tel" title="播打電話至 盯睛設計 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求">02 5575 1900</a>
                </li>
                <li>
                    <a href="emailto:info@gaze-design.com" title="寄信至 盯睛設計 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求">info@gaze-design.com</a>
                </li>
                <li>
                    <a href="https://g.page/gaze-design?share" target="_blank" title="地圖連結 盯睛設計 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求">106068 台北市大安區信義路四段265巷21弄19號</a>
                </li> 
            </ul>
        </div>
        <div>
            <div class="copyright">
                © 2022 GAZE CREATIVE DESIGN CO., LTD.
            </div>
        </div>
    </div>
</footer>
<div id="awwwards" style="position: fixed; z-index: 999; transform: translateY(-50%); top: 50%;  left: 0"><a href="https://www.awwwards.com/sites/yufang-yu-fang-lao-shi-qi-men-yi-shu" target="_blank"><svg width="53.08" height="171.358"><path class="js-color-bg" fill="white" d="M0 0h53.08v171.358H0z"></path><g class="js-color-text" fill="black"><path d="M20.047 153.665v-1.9h3.888v-4.093h-3.888v-1.9h10.231v1.9h-4.59v4.093h4.59v1.9zM29.898 142.236c-.331.565-.784.997-1.359 1.294s-1.222.446-1.944.446c-.721 0-1.369-.149-1.943-.446a3.316 3.316 0 0 1-1.36-1.294c-.331-.564-.497-1.232-.497-2.002s.166-1.438.497-2.002a3.316 3.316 0 0 1 1.36-1.294c.574-.297 1.223-.445 1.943-.445.723 0 1.369.148 1.944.445a3.307 3.307 0 0 1 1.359 1.294c.331.564.497 1.232.497 2.002s-.166 1.438-.497 2.002m-1.703-3.347c-.435-.33-.967-.496-1.601-.496-.633 0-1.166.166-1.601.496-.433.332-.649.78-.649 1.346 0 .564.217 1.013.649 1.345.435.331.968.497 1.601.497.634 0 1.166-.166 1.601-.497.435-.332.649-.78.649-1.345.001-.566-.214-1.014-.649-1.346M22.911 134.852v-1.813h1.186a3.335 3.335 0 0 1-.951-1.009 2.423 2.423 0 0 1-.352-1.271c0-.682.19-1.229.57-1.645.381-.413.932-.621 1.652-.621h5.262v1.812h-4.721c-.419 0-.727.096-.921.285-.195.19-.292.447-.292.769 0 .302.115.58.35.833.234.254.577.458 1.03.613.454.156.993.234 1.616.234h2.938v1.813h-7.367zM29.898 125.136a3.314 3.314 0 0 1-1.359 1.294c-.575.297-1.222.445-1.944.445-.721 0-1.369-.148-1.943-.445a3.322 3.322 0 0 1-1.36-1.294c-.331-.565-.497-1.232-.497-2.002 0-.771.166-1.438.497-2.003a3.313 3.313 0 0 1 1.36-1.293c.574-.297 1.223-.446 1.943-.446.723 0 1.369.149 1.944.446s1.028.728 1.359 1.293.497 1.232.497 2.003c.001.769-.166 1.436-.497 2.002m-1.703-3.347c-.435-.331-.967-.497-1.601-.497-.633 0-1.166.166-1.601.497-.433.331-.649.778-.649 1.345 0 .564.217 1.013.649 1.344.435.332.968.498 1.601.498.634 0 1.166-.166 1.601-.498.435-.331.649-.779.649-1.344.001-.567-.214-1.014-.649-1.345M22.911 117.75v-1.812h1.199c-.419-.265-.742-.586-.972-.966s-.345-.784-.345-1.213c0-.272.05-.569.146-.892l1.682.336a1.429 1.429 0 0 0-.205.76c0 .576.261 1.048.783 1.418.521.37 1.342.557 2.461.557h2.617v1.812h-7.366zM29.812 111.252c-.391.511-.857.851-1.403 1.016l-.776-1.446c.381-.138.68-.329.893-.577.215-.249.321-.544.321-.885a1.2 1.2 0 0 0-.168-.658c-.112-.175-.294-.263-.548-.263-.225 0-.406.105-.548.313-.142.21-.291.534-.446.973-.019.068-.058.17-.117.307-.224.565-.506 1.004-.848 1.315-.34.313-.779.467-1.314.467-.381 0-.727-.102-1.039-.306a2.185 2.185 0 0 1-.744-.84 2.554 2.554 0 0 1-.279-1.207c0-.497.105-.949.314-1.359.211-.408.506-.725.886-.949l.993 1.082c-.43.292-.644.686-.644 1.184a.84.84 0 0 0 .154.504.471.471 0 0 0 .401.212c.176 0 .338-.103.49-.307.15-.205.334-.604.547-1.199.205-.564.474-1.001.805-1.308.332-.308.756-.46 1.271-.46.721 0 1.299.229 1.732.687s.65 1.057.65 1.797c.001.759-.194 1.396-.583 1.907M35.481 17.006l-4.782 14.969h-3.266l-2.584-9.682-2.584 9.682h-3.268l-4.782-14.969h3.713l2.673 10.276 2.525-10.276h3.445l2.524 10.276 2.674-10.276zM37.978 27.163c1.426 0 2.496 1.068 2.496 2.495 0 1.425-1.07 2.495-2.496 2.495-1.425 0-2.494-1.07-2.494-2.495-.001-1.427 1.069-2.495 2.494-2.495"></path></g></svg></a></div>
<div class="fixbot-bx mo">
    <div class="flex-fbx">
        <a href="/contact/" title="立即填寫 手機版表單 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求">
            <div class="img-bx">
                <img src="/dist/images/fix-icon1.png" alt="立即填寫 手機版表單 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求 的icon" title="立即填寫 手機版表單 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求 的icon">
            </div>
            <div class="tx">
                聯絡我們
            </div>
        </a>
        <a href="tel:0255751900" class="tel" title="立即播打手機版電話 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求">
            <div class="img-bx">
                <img src="/dist/images/fix-icon2.png" alt="立即播打手機版電話 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求 的icon" title="立即播打手機版電話 洽詢 網站設計/平面設計/包裝設計/CSR設計/ESG設計 需求 的icon">
            </div>
            <div class="tx">
                立即洽詢
            </div>
        </a>
    </div>
</div><div class="top_btn">
    <div class="l-footer_scroll__inner">
    <div class="l-footer_scroll__circle">
        <svg class="l-footer_scroll__circle-svg" viewBox="0,0,128,128" xmlns="http://www.w3.org/2000/svg">
            <circle class="l-footer_scroll__circle-path" cx="64" cy="64" r="63"></circle>
        </svg>
    </div>
    <div class="l-footer_scroll__cap">
        <div class="l-footer_scroll__cap-text">TOP</div>
    </div>
    </div>
    <div class="l-footer_scroll__bar">
        <div class="l-footer_scroll__bar-line"></div>
    </div>
</div>    <script src="/dist/js/main.js"></script>
    <script src="/dist/js/gsap.min.js"></script>
    <script src="/dist/js/ScrollTrigger.min.js"></script>
    <script src="/dist/js/index.js"></script>
    <script src="/dist/js/workinfo.js"></script>
    <script type="text/javascript" src="/quote/function.js"></script>
    <script>
              function pageprev(){
        $(location).attr('href', '/work/中研院基因體研究中心P3實驗室RWD網站系統');
      }
	         function pagenext(){
        $(location).attr('href', '/work/粉紅森林RWD形象官網');
      }
      
  
      document.addEventListener('touchstart', handleTouchStart, false);        
      document.addEventListener('touchmove', handleTouchMove, false);
      var xDown = null;                                                        
      var yDown = null;                                                        
      function handleTouchStart(evt) {                                         
          xDown = evt.touches[0].clientX;                                      
          yDown = evt.touches[0].clientY;    
          $('.popup-bx').addClass('hid');  
          setCookie('ok',1,1);                          
      };                                                
      function handleTouchMove(evt) {
          if ( ! xDown || ! yDown ) {
              return;
          }

          var xUp = evt.touches[0].clientX;                                    
          var yUp = evt.touches[0].clientY;

          var xDiff = xDown - xUp;
          var yDiff = yDown - yUp;
          if(Math.abs( xDiff )+Math.abs( yDiff )>70){

          if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
              if ( xDiff > 0 ) {
                  pageprev();
              } else {
                  pagenext();
              }                       
          }
          /* reset values */
          xDown = null;
          yDown = null;
          }
      };

    </script>
    

</body>

</html>