<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* layouts/page/notescontent/index.twig */
class __TwigTemplate_9cf3c69159e72506e4f4b1f6c8419c800bab7cf89b3eb2fa896c10c3a84b2e18 extends \Twig\Template
{
    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->parent = false;

        $this->blocks = [
        ];
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        // line 1
        echo "



    <div class=\"container \" style=\"margin-top:100px;\">
        <div class=\"row\">
          <div class=\"col-sm-3\">
                      ";
        // line 9
        echo "            <style>
            @charset \"UTF-8\";
            .c-tree a{
                text-decoration: none;
            }
            .c-tree-view,.c-tree-view>.c-tree{
                position:relative
                }
            .c-tree{-webkit-font-smoothing:initial}
            .c-tree .c-tree{display:none}
            .c-tree-title{display:block;cursor:pointer;color:#333}
            .c-tree-title:before{content:'';position:absolute;left:0;right:0;height:50px;background:0 0}
            .c-tree-title.tree-hover:before,.c-tree-title:hover:before{background:#f1f2f4}
            .c-tree-title-inner{position:relative;z-index:2;padding:0 30px 0 0px;line-height:50px;height:50px}
            .c-tree-arrow{content:'';position:absolute;right:20px;top:50%;margin-top:-2px;border-style:solid;border-color:#999 transparent;border-width:5px 4px 0;transition:transform .2s linear}
            .c-tree-arrowdown{content:'';position:absolute;right:20px;top:50%;margin-top:-2px;border: solid;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;transition:transform .2s linear; transform: rotate(45deg);
  -webkit-transform: rotate(45deg);}

             .c-tree-arrowright{content:'';position:absolute;right:20px;top:50%;margin-top:-2px;border: solid;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;transition:transform .2s linear; transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);}


            .c-tree-icon{float:left;margin-right:5px;margin-top:17px;width:16px;height:16px;background-size:contain;background-position:center center;background-repeat: no-repeat;}
            .c-tree-iconlock{float:left;margin-right:5px;margin-top:17px;width:16px;height:16px;background-size:contain;background-position:center center;background-repeat: no-repeat;background-image:url('";
        // line 38
        echo twig_escape_filter($this->env, $this->getAttribute((isset($context["path"]) ? $context["path"] : null), "image", []), "html", null, true);
        echo "/lock.png');}    
            
            .c-tree-text-extra{float:right;color:#999}
            .c-tree-text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size: 14px;
            }
            .c-tree-icon.text{background-image:url(../img/tree/text.svg)}
            .c-tree-icon.loading,.c-tree-title.tree-open .c-tree-icon.loading{background-image:url(../img/tree/loading.svg)}
            .c-tree-level1{
/*                margin-block-start: 0em;
                margin-block-end: 0em;*/
                padding-inline-start: 5px;
                list-style-type: none;

            }
            .c-tree-level1-text{
                color: #7c4799;
            }
            .c-tree-level1>.c-tree-item{border-bottom:1px solid #e5e5e5}
            .c-tree-title+.c-tree-level2{border-top:1px solid #e5e5e5}
            .c-tree-level2-text{
                color: #026dbf;
            }
            .c-tree-level2{
                padding-inline-start: 5px;
                list-style-type: none;
            }
            .c-tree-level2 .c-tree-title-inner{padding-left:10px}
            .c-tree-level3-text{
                color: #67a566;
            }
            .c-tree-level3{
                padding-inline-start: 5px;
                list-style-type: none;
            }
            .c-tree-level3 .c-tree-title-inner{padding-left:20px}
            .c-tree-level4-text{
                color: #ad4e62;
            }
            .c-tree-level4{
                padding-inline-start: 5px;
                list-style-type: none;
            }
            .c-tree-level4 .c-tree-title-inner{padding-left:30px}
            .c-tree-title.tree-open .c-tree-arrow{transform:rotate3d(0,0,1,180deg)}
            .c-tree-title.tree-open+.c-tree{display:block}
            .c-tree-title.tree-actived,.c-tree-title.tree-actived:hover{color:#000}
            /*.c-tree-title.tree-actived:before,.c-tree-title.tree-actived:hover:before{background:#00a4ff}*/
            .c-tree-title.tree-actived:before,.c-tree-title.tree-actived:hover:before{}
            /*.c-tree-title.tree-actived .c-tree-text-extra{color:#fff}*/
            .c-tree-title.tree-actived .c-tree-text-extra{color:#000}
            .c-tree-title.tree-actived .c-tree-arrow{border-top-color:#000}
            .c-tree-title.tree-focus,.c-tree-title.tree-focus:hover{color:#000}
            .c-tree-title.tree-focus:before,.c-tree-title.tree-focus:hover:before{background:#00a4ff}
            .c-tree-title.tree-focus .c-tree-text-extra{color:#000}
            .c-tree-title.tree-focus .c-tree-arrow{border-top-color:#000}
            .c-tree-title.tree-highlight:before{border:1px dashed #f2f2f2;background-clip:padding-box;border-radius:2px;box-sizing:border-box}.c-tree-mask{position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;background:#343638;opacity:.7;filter:alpha(opacity=70)}
            .c-tree-title.tree-renaming:before,.c-tree-title.tree-renaming:hover:before{background-color:#00a4ff;z-index:11}
            .c-tree-title.tree-renaming .c-tree-title-inner{z-index:11}
            .c-tree-input{position:absolute;left:16px;right:0;top:0;padding:2px;box-sizing:border-box}
            .c-tree-input input{display:block;box-sizing:border-box;padding:0 4px;width:100%;height:20px;background:#fff;font-size:12px;line-height:20px;color:#000}
            .c-tree.no-level .c-tree-item{padding-left:0}
            .c-tree-tooltips{box-sizing:border-box;position:absolute;z-index:1000;max-width:100%;border-right:1px solid #e5e5e5;pointer-events:none}
            .c-tree-tooltips .c-tree-item{border-bottom:none}
            .c-tree-result{padding:0 15px;word-wrap:break-word;color:#666}
          
#MAXIM{content:\"v_u2018919145523\"}


                .btn2 {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btn2:hover {
  background-color: RoyalBlue;
}
            </style>
            ";
        // line 169
        echo "            ";
        // line 170
        echo "
            ";
        // line 172
        echo "            <div class=\"c-tree-view\" style=\"  \">
                <ul class=\"c-tree c-tree-level1\" style=\"\">
                     <li id=\"doc.1117\" class=\"c-tree-item\"><a href=\"/developer/doc/1117\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-arrowright c-tree-level1-text\"></i><i class=\"c-tree-iconlock \" style=\"\"></i><span class=\"c-tree-level1-text\">HTTP</span></div></a>
                        

                    </li>
                    <li id=\"doc.1117\" class=\"c-tree-item\"><a href=\"/developer/doc/1117\" class=\"c-tree-title tree-hover tree-actived tree-open\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-arrowdown c-tree-level1-text\"></i><i class=\"c-tree-iconlock\" style=\"\"></i><span class=\"c-tree-level1-text\">HTTP</span></div></a>
                            <ul class=\"c-tree c-tree-level2\" style=\"\">
                            <li id=\"doc.1117\" class=\"c-tree-item\"><a href=\"/developer/doc/1117\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-iconlock\" style=\"\"></i><span class=\"c-tree-level2-text\">HTTP</span></div></a>
                            </li>
                            </ul>

                    </li>
                    <li id=\"doc.1018\" class=\"c-tree-item\">
                        <a href=\"/developer/doc/1018\" class=\"c-tree-title tree-hover tree-actived tree-open\" style=\"text-decoration: none;\" alt=\"World Stand English13231313123123122331\">
                            <div class=\"c-tree-title-inner\">
                                <i class=\"c-tree-arrowdown c-tree-level1-text\"></i>
                                <i class=\"c-tree-iconlock \" style=\"\"></i>
                                <span class=\"c-tree-text  c-tree-level1-text\">World Stand English13231313123123122331</span></div></a>
                                <ul class=\"c-tree c-tree-level2\" style=\"list-style-type: none;text-decoration: none;\">
                                <li id=\"chapter.10257-doc.1018\" class=\"c-tree-item\">
                                    <a href=\"/noteslist/le1/10257\" class=\"c-tree-title
                                     ";
        // line 194
        if (((isset($context["urivar2"]) ? $context["urivar2"] : null) == "10257")) {
            echo "   
                                     tree-hover tree-actived tree-open
                                     ";
        }
        // line 197
        echo "                                     \" style=\"color: #000000;text-decoration: none;\">
                                        <div class=\"c-tree-title-inner\">
                                            <i class=\"c-tree-arrowdown c-tree-level2-text \"></i>
                                            <i class=\"c-tree-iconlock\" style=\"\"></i>
                                            <span class=\"c-tree-text c-tree-level2-text\">Starter11111111111111111111111111111111111</span>
                                        </div>
                                    </a>
                                    <ul class=\"c-tree c-tree-level3\">
                                        <li id=\"section.1008084-chapter.10257-doc.1018\" class=\"c-tree-item\">
                                            <a href=\"/developer/section/1008084\" class=\"c-tree-title tree-hover tree-actived tree-open\">
                                                <div class=\"c-tree-title-inner\">
                                                     <i class=\"c-tree-arrowdown c-tree-level3-text\"></i>
                                            <i class=\"c-tree-iconlock\" style=\"\"></i>
                                                    <span class=\"c-tree-text c-tree-level3-text\">Jan</span>
                                                </div>
                                            </a>
                                                  <ul class=\"c-tree c-tree-level4\" style=\"list-style-type: none;text-decoration: none;\">
                                                        <li id=\"chapter.10360-doc.1018\" class=\"c-tree-item\">
                                                            <a href=\"/noteslist/le4/10360\" class=\"c-tree-title
                                                             
                                                                
                                                          
                                                            \" style=\"color: #000000;text-decoration: none;\">
                                                                <div class=\"c-tree-title-inner\">
                                                                    
                                                                    <i class=\"c-tree-iconlock\" style=\"\"></i>
                                                                    <span class=\"c-tree-text c-tree-level4-text\">Week1</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li id=\"chapter.10360-doc.1018\" class=\"c-tree-item\">
                                                            <a href=\"/noteslist/le4/10360\" class=\"c-tree-title
                                                            ";
        // line 229
        if (((isset($context["urivar2"]) ? $context["urivar2"] : null) == "10360")) {
            echo "   
                                                                tree-hover tree-actived tree-open
                                                            ";
        }
        // line 232
        echo "                                                            \" style=\"color: #000000;text-decoration: none;\">
                                                                <div class=\"c-tree-title-inner\">
                                                                    
                                                                    <i class=\"c-tree-iconlock\" style=\"\"></i>
                                                                    <span class=\"c-tree-text c-tree-level4-text\">Week2</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                    </ul>            

                                        </li>

                                        <li id=\"section.1008085-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008085\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level3-text\">浏览器和设备 | Browsers and devices</span></div></a></li><li id=\"section.1008086-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008086\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level3-text\">构建工具 | Build tools</span></div></a></li><li id=\"section.1008087-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008087\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level3-text\">内容 | Contents</span></div></a></li><li id=\"section.1008088-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008088\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">下载 | Download</span></div></a></li><li id=\"section.1008089-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008089\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">JS 脚本 | JavaScript</span></div></a></li><li id=\"section.1008090-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008090\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">主题 | Theming Bootstrap</span></div></a></li><li id=\"section.1008091-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008091\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">打包器 | Webpack</span></div></a></li></ul>
                                </li>
                                <li id=\"chapter.10258-doc.1018\" class=\"c-tree-item\">
                                    <a href=\"/noteslist/le1/10258\" class=\"c-tree-title
                                     ";
        // line 248
        if (((isset($context["urivar2"]) ? $context["urivar2"] : null) == "10258")) {
            echo "   
                                     tree-hover tree-actived tree-open
                                     ";
        }
        // line 251
        echo "                                    \" style=\"color: #000000;text-decoration: none;\">
                                        <div class=\"c-tree-title-inner\">
                                            <i class=\"c-tree-arrowright c-tree-level2-text\"></i>
                                            <i class=\"c-tree-icon\"></i>
                                            <span class=\"c-tree-text c-tree-level2-text\">快速开始2 | Getting started</span>
                                        </div>
                                    </a>
                                    <ul class=\"c-tree c-tree-level3\"><li id=\"section.1008084-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008084\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level4-text\">无障碍 | Accessibility</span></div></a></li><li id=\"section.1008085-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008085\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">浏览器和设备 | Browsers and devices</span></div></a></li><li id=\"section.1008086-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008086\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">构建工具 | Build tools</span></div></a></li><li id=\"section.1008087-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008087\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">内容 | Contents</span></div></a></li><li id=\"section.1008088-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008088\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">下载 | Download</span></div></a></li><li id=\"section.1008089-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008089\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">JS 脚本 | JavaScript</span></div></a></li><li id=\"section.1008090-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008090\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">主题 | Theming Bootstrap</span></div></a></li><li id=\"section.1008091-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008091\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">打包器 | Webpack</span></div></a></li></ul>
                                </li>
                                </ul>
                            </div>
                        </a>
                    </li>

                </ul>
                

                    
    

          </div>
          ";
        // line 273
        echo "          <div class=\"col-sm-9\">
                    <div class=\"container\">
                     
                        <div class=\"row\">
                            <div class=\"col-6 redbr\">
                                 <a href=\"/\">主頁</a>
                                 <a href=\"/\">World Stand English</a>
                                 >
                                 <a href=\"/\">Starter</a>
                                 >
                                 <a href=\"/\">Jan</a>
                                 >
                                 <a href=\"/\">Week 2</a>
                            </div>
                            <div class=\"col-6 redbr \">
                                       <div class=\"clearfix\">     
                                        
                                        ";
        // line 291
        echo "                                        <div class=\"col-6 float-right\">
                                            <div class=\"input-group \">
                                              <select class=\"custom-select\" id=\"inputGroupSelect04\">
                                                <option selected>依標題排序</option>
                                                <option value=\"1\">One</option>
                                                <option value=\"2\">Two</option>
                                                <option value=\"3\">Three</option>
                                              </select>
                                              <div class=\"input-group-append\">
                                                <button class=\"btn btn-outline-secondary\" type=\"button\">
                                                    <i class=\"fa fa-caret-down\"></i></button>
                                              </div>
                                            </div>
                                        </div>

                                        ";
        // line 307
        echo "
                                        <button class=\"btn2 float-right\"><i class=\"fa fa-bars\"></i></button>

                                        <button class=\"btn2 float-right\"><i class=\"fa fa-th\"></i></button>

                                        

                                        ";
        // line 315
        echo "                                       ";
        // line 324
        echo "                                        ";
        // line 325
        echo "
                                     </div>
                                   
                            </div>
                        </div>
                    </div>

                    ";
        // line 333
        echo "                    <div class=\"container\">
                     
                        <div class=\"row\">
                                <div class=\"col-2\">
                                    類型
                                </div>
                                <div class=\"col-5\">
                                    標題
                                </div>
                                <div class=\"col-4\">
                                    更新時間
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    詳情
                                </div>    

                        </div>
                        ";
        // line 351
        echo "                        <div class=\"row\">
                                <div class=\"col-2\">
                                    <a href=\"#\"><i class=\"fa fa-folder ml-1\" style=\"color: rgb(255, 170, 0);\"></i></a>
                                </div>
                                <div class=\"col-5\">
                                    <a href=\"#\"><span>BEN</span></a>
                                </div>
                                <div class=\"col-4\">
                                    2019-10-14 10:24:26
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    <a href=\"#\"><i class=\"fa fa-search\"></i></a>
                                </div>    

                        </div>
                        <div class=\"row\">
                                <div class=\"col-2\">
                                    <a href=\"#\"><i class=\"fa fa-folder ml-1\" style=\"color: rgb(255, 170, 0);\"></i></a>
                                </div>
                                <div class=\"col-5\">
                                    <a href=\"#\"><span>BEN</span></a>
                                </div>
                                <div class=\"col-4\">
                                    2019-10-14 10:24:26
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    <a href=\"#\"><i class=\"fa fa-search\"></i></a>
                                </div>    

                        </div>
                        <div class=\"row\">
                                <div class=\"col-2 \">
                                    <a href=\"#\"><i class=\"fa fa-folder ml-1\" style=\"color: rgb(255, 170, 0);\"></i></a>
                                </div>
                                <div class=\"col-5\">
                                    <a href=\"#\"><span>BEN</span></a>
                                </div>
                                <div class=\"col-4\">
                                    2019-10-14 10:24:26
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    <a href=\"#\"><i class=\"fa fa-search\"></i></a>
                                </div>    

                        </div>
                        ";
        // line 397
        echo "                    </div>    

                    ";
        // line 400
        echo "
                    ";
        // line 402
        echo "
                    
          </div>
          ";
        // line 406
        echo "        </div>
        </div>  
        
    </section>
";
    }

    public function getTemplateName()
    {
        return "layouts/page/notescontent/index.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  413 => 406,  408 => 402,  405 => 400,  401 => 397,  354 => 351,  335 => 333,  326 => 325,  324 => 324,  322 => 315,  313 => 307,  296 => 291,  277 => 273,  254 => 251,  248 => 248,  230 => 232,  224 => 229,  190 => 197,  184 => 194,  160 => 172,  157 => 170,  155 => 169,  70 => 38,  39 => 9,  30 => 1,);
    }

    /** @deprecated since 1.27 (to be removed in 2.0). Use getSourceContext() instead */
    public function getSource()
    {
        @trigger_error('The '.__METHOD__.' method is deprecated since version 1.27 and will be removed in 2.0. Use getSourceContext() instead.', E_USER_DEPRECATED);

        return $this->getSourceContext()->getCode();
    }

    public function getSourceContext()
    {
        return new Source("



    <div class=\"container \" style=\"margin-top:100px;\">
        <div class=\"row\">
          <div class=\"col-sm-3\">
                      {# new menu 2 #}
            <style>
            @charset \"UTF-8\";
            .c-tree a{
                text-decoration: none;
            }
            .c-tree-view,.c-tree-view>.c-tree{
                position:relative
                }
            .c-tree{-webkit-font-smoothing:initial}
            .c-tree .c-tree{display:none}
            .c-tree-title{display:block;cursor:pointer;color:#333}
            .c-tree-title:before{content:'';position:absolute;left:0;right:0;height:50px;background:0 0}
            .c-tree-title.tree-hover:before,.c-tree-title:hover:before{background:#f1f2f4}
            .c-tree-title-inner{position:relative;z-index:2;padding:0 30px 0 0px;line-height:50px;height:50px}
            .c-tree-arrow{content:'';position:absolute;right:20px;top:50%;margin-top:-2px;border-style:solid;border-color:#999 transparent;border-width:5px 4px 0;transition:transform .2s linear}
            .c-tree-arrowdown{content:'';position:absolute;right:20px;top:50%;margin-top:-2px;border: solid;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;transition:transform .2s linear; transform: rotate(45deg);
  -webkit-transform: rotate(45deg);}

             .c-tree-arrowright{content:'';position:absolute;right:20px;top:50%;margin-top:-2px;border: solid;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;transition:transform .2s linear; transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);}


            .c-tree-icon{float:left;margin-right:5px;margin-top:17px;width:16px;height:16px;background-size:contain;background-position:center center;background-repeat: no-repeat;}
            .c-tree-iconlock{float:left;margin-right:5px;margin-top:17px;width:16px;height:16px;background-size:contain;background-position:center center;background-repeat: no-repeat;background-image:url('{{ path.image }}/lock.png');}    
            
            .c-tree-text-extra{float:right;color:#999}
            .c-tree-text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size: 14px;
            }
            .c-tree-icon.text{background-image:url(../img/tree/text.svg)}
            .c-tree-icon.loading,.c-tree-title.tree-open .c-tree-icon.loading{background-image:url(../img/tree/loading.svg)}
            .c-tree-level1{
/*                margin-block-start: 0em;
                margin-block-end: 0em;*/
                padding-inline-start: 5px;
                list-style-type: none;

            }
            .c-tree-level1-text{
                color: #7c4799;
            }
            .c-tree-level1>.c-tree-item{border-bottom:1px solid #e5e5e5}
            .c-tree-title+.c-tree-level2{border-top:1px solid #e5e5e5}
            .c-tree-level2-text{
                color: #026dbf;
            }
            .c-tree-level2{
                padding-inline-start: 5px;
                list-style-type: none;
            }
            .c-tree-level2 .c-tree-title-inner{padding-left:10px}
            .c-tree-level3-text{
                color: #67a566;
            }
            .c-tree-level3{
                padding-inline-start: 5px;
                list-style-type: none;
            }
            .c-tree-level3 .c-tree-title-inner{padding-left:20px}
            .c-tree-level4-text{
                color: #ad4e62;
            }
            .c-tree-level4{
                padding-inline-start: 5px;
                list-style-type: none;
            }
            .c-tree-level4 .c-tree-title-inner{padding-left:30px}
            .c-tree-title.tree-open .c-tree-arrow{transform:rotate3d(0,0,1,180deg)}
            .c-tree-title.tree-open+.c-tree{display:block}
            .c-tree-title.tree-actived,.c-tree-title.tree-actived:hover{color:#000}
            /*.c-tree-title.tree-actived:before,.c-tree-title.tree-actived:hover:before{background:#00a4ff}*/
            .c-tree-title.tree-actived:before,.c-tree-title.tree-actived:hover:before{}
            /*.c-tree-title.tree-actived .c-tree-text-extra{color:#fff}*/
            .c-tree-title.tree-actived .c-tree-text-extra{color:#000}
            .c-tree-title.tree-actived .c-tree-arrow{border-top-color:#000}
            .c-tree-title.tree-focus,.c-tree-title.tree-focus:hover{color:#000}
            .c-tree-title.tree-focus:before,.c-tree-title.tree-focus:hover:before{background:#00a4ff}
            .c-tree-title.tree-focus .c-tree-text-extra{color:#000}
            .c-tree-title.tree-focus .c-tree-arrow{border-top-color:#000}
            .c-tree-title.tree-highlight:before{border:1px dashed #f2f2f2;background-clip:padding-box;border-radius:2px;box-sizing:border-box}.c-tree-mask{position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;background:#343638;opacity:.7;filter:alpha(opacity=70)}
            .c-tree-title.tree-renaming:before,.c-tree-title.tree-renaming:hover:before{background-color:#00a4ff;z-index:11}
            .c-tree-title.tree-renaming .c-tree-title-inner{z-index:11}
            .c-tree-input{position:absolute;left:16px;right:0;top:0;padding:2px;box-sizing:border-box}
            .c-tree-input input{display:block;box-sizing:border-box;padding:0 4px;width:100%;height:20px;background:#fff;font-size:12px;line-height:20px;color:#000}
            .c-tree.no-level .c-tree-item{padding-left:0}
            .c-tree-tooltips{box-sizing:border-box;position:absolute;z-index:1000;max-width:100%;border-right:1px solid #e5e5e5;pointer-events:none}
            .c-tree-tooltips .c-tree-item{border-bottom:none}
            .c-tree-result{padding:0 15px;word-wrap:break-word;color:#666}
          
#MAXIM{content:\"v_u2018919145523\"}


                .btn2 {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btn2:hover {
  background-color: RoyalBlue;
}
            </style>
            {# <div class=\"c-tree-view\">
                <ul class=\"c-tree c-tree-level1\">
                    <li id=\"doc.1018\" class=\"c-tree-item\">
                        <a href=\"/developer/doc/1018\" class=\"c-tree-title tree-hover tree-actived tree-open\" style=\"text-decoration: none;\">
                            <div class=\"c-tree-title-inner\">
                                <i class=\"c-tree-arrow\"></i>
                                <i class=\"c-tree-icon\" style=\"background-image:url('https://main.qcloudimg.com/raw/ee986e17811d33bae535a2eb2647ecb1.png')\"></i>
                                <span class=\"c-tree-text\">Bootstrap 4</span></div></a>
                                <ul class=\"c-tree c-tree-level2\" style=\"list-style-type: none;text-decoration: none;\">
                                <li id=\"chapter.10257-doc.1018\" class=\"c-tree-item\">
                                    <a href=\"/developer/chapter/10257\" class=\"c-tree-title tree-hover tree-actived tree-open\" style=\"color: #000000;text-decoration: none;\">
                                        <div class=\"c-tree-title-inner\">
                                            <i class=\"c-tree-arrow\"></i>
                                            <i class=\"c-tree-icon\"></i>
                                            <span class=\"c-tree-text\">快速开始 | Getting started</span>
                                        </div>
                                    </a>
                                    <ul class=\"c-tree c-tree-level3\"><li id=\"section.1008084-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008084\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">无障碍 | Accessibility</span></div></a></li><li id=\"section.1008085-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008085\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">浏览器和设备 | Browsers and devices</span></div></a></li><li id=\"section.1008086-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008086\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">构建工具 | Build tools</span></div></a></li><li id=\"section.1008087-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008087\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">内容 | Contents</span></div></a></li><li id=\"section.1008088-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008088\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">下载 | Download</span></div></a></li><li id=\"section.1008089-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008089\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">JS 脚本 | JavaScript</span></div></a></li><li id=\"section.1008090-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008090\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">主题 | Theming Bootstrap</span></div></a></li><li id=\"section.1008091-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008091\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">打包器 | Webpack</span></div></a></li></ul>
                                </li>
                                <li id=\"chapter.10258-doc.1018\" class=\"c-tree-item\">
                                    <a href=\"/developer/chapter/10258\" class=\"c-tree-title\" style=\"color: #000000;text-decoration: none;\">
                                        <div class=\"c-tree-title-inner\">
                                            <i class=\"c-tree-arrow\"></i>
                                            <i class=\"c-tree-icon\"></i>
                                            <span class=\"c-tree-text\">快速开始2 | Getting started</span>
                                        </div>
                                    </a>
                                </li>
                                </ul>
                            </div>
                        </a>
                    </li>
                </ul>
                
            </div>
            <div class=\"c-tree-view\">
                <ul class=\"c-tree c-tree-level1\">
                    <li id=\"doc.1018\" class=\"c-tree-item\">
                        <a href=\"/developer/doc/1018\" class=\"c-tree-title tree-hover tree-actived tree-open\" style=\"text-decoration: none;\">
                            <div class=\"\">
                                <i class=\"c-tree-arrow\"></i>
                                <i class=\"c-tree-icon\" style=\"background-image:url('https://main.qcloudimg.com/raw/ee986e17811d33bae535a2eb2647ecb1.png')\"></i>
                                <span class=\"c-tree-text\">Bootstrap 4</span></div></a>
                                
                            </div>
                        </a>
                    </li>
                </ul>
            </div> #}
            {# end new menu 2 #}

            {# test menu3 #}
            <div class=\"c-tree-view\" style=\"  \">
                <ul class=\"c-tree c-tree-level1\" style=\"\">
                     <li id=\"doc.1117\" class=\"c-tree-item\"><a href=\"/developer/doc/1117\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-arrowright c-tree-level1-text\"></i><i class=\"c-tree-iconlock \" style=\"\"></i><span class=\"c-tree-level1-text\">HTTP</span></div></a>
                        

                    </li>
                    <li id=\"doc.1117\" class=\"c-tree-item\"><a href=\"/developer/doc/1117\" class=\"c-tree-title tree-hover tree-actived tree-open\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-arrowdown c-tree-level1-text\"></i><i class=\"c-tree-iconlock\" style=\"\"></i><span class=\"c-tree-level1-text\">HTTP</span></div></a>
                            <ul class=\"c-tree c-tree-level2\" style=\"\">
                            <li id=\"doc.1117\" class=\"c-tree-item\"><a href=\"/developer/doc/1117\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-iconlock\" style=\"\"></i><span class=\"c-tree-level2-text\">HTTP</span></div></a>
                            </li>
                            </ul>

                    </li>
                    <li id=\"doc.1018\" class=\"c-tree-item\">
                        <a href=\"/developer/doc/1018\" class=\"c-tree-title tree-hover tree-actived tree-open\" style=\"text-decoration: none;\" alt=\"World Stand English13231313123123122331\">
                            <div class=\"c-tree-title-inner\">
                                <i class=\"c-tree-arrowdown c-tree-level1-text\"></i>
                                <i class=\"c-tree-iconlock \" style=\"\"></i>
                                <span class=\"c-tree-text  c-tree-level1-text\">World Stand English13231313123123122331</span></div></a>
                                <ul class=\"c-tree c-tree-level2\" style=\"list-style-type: none;text-decoration: none;\">
                                <li id=\"chapter.10257-doc.1018\" class=\"c-tree-item\">
                                    <a href=\"/noteslist/le1/10257\" class=\"c-tree-title
                                     {% if urivar2 == '10257' %}   
                                     tree-hover tree-actived tree-open
                                     {% endif %}
                                     \" style=\"color: #000000;text-decoration: none;\">
                                        <div class=\"c-tree-title-inner\">
                                            <i class=\"c-tree-arrowdown c-tree-level2-text \"></i>
                                            <i class=\"c-tree-iconlock\" style=\"\"></i>
                                            <span class=\"c-tree-text c-tree-level2-text\">Starter11111111111111111111111111111111111</span>
                                        </div>
                                    </a>
                                    <ul class=\"c-tree c-tree-level3\">
                                        <li id=\"section.1008084-chapter.10257-doc.1018\" class=\"c-tree-item\">
                                            <a href=\"/developer/section/1008084\" class=\"c-tree-title tree-hover tree-actived tree-open\">
                                                <div class=\"c-tree-title-inner\">
                                                     <i class=\"c-tree-arrowdown c-tree-level3-text\"></i>
                                            <i class=\"c-tree-iconlock\" style=\"\"></i>
                                                    <span class=\"c-tree-text c-tree-level3-text\">Jan</span>
                                                </div>
                                            </a>
                                                  <ul class=\"c-tree c-tree-level4\" style=\"list-style-type: none;text-decoration: none;\">
                                                        <li id=\"chapter.10360-doc.1018\" class=\"c-tree-item\">
                                                            <a href=\"/noteslist/le4/10360\" class=\"c-tree-title
                                                             
                                                                
                                                          
                                                            \" style=\"color: #000000;text-decoration: none;\">
                                                                <div class=\"c-tree-title-inner\">
                                                                    
                                                                    <i class=\"c-tree-iconlock\" style=\"\"></i>
                                                                    <span class=\"c-tree-text c-tree-level4-text\">Week1</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li id=\"chapter.10360-doc.1018\" class=\"c-tree-item\">
                                                            <a href=\"/noteslist/le4/10360\" class=\"c-tree-title
                                                            {% if urivar2 == '10360' %}   
                                                                tree-hover tree-actived tree-open
                                                            {% endif %}
                                                            \" style=\"color: #000000;text-decoration: none;\">
                                                                <div class=\"c-tree-title-inner\">
                                                                    
                                                                    <i class=\"c-tree-iconlock\" style=\"\"></i>
                                                                    <span class=\"c-tree-text c-tree-level4-text\">Week2</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                    </ul>            

                                        </li>

                                        <li id=\"section.1008085-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008085\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level3-text\">浏览器和设备 | Browsers and devices</span></div></a></li><li id=\"section.1008086-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008086\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level3-text\">构建工具 | Build tools</span></div></a></li><li id=\"section.1008087-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008087\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level3-text\">内容 | Contents</span></div></a></li><li id=\"section.1008088-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008088\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">下载 | Download</span></div></a></li><li id=\"section.1008089-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008089\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">JS 脚本 | JavaScript</span></div></a></li><li id=\"section.1008090-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008090\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">主题 | Theming Bootstrap</span></div></a></li><li id=\"section.1008091-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008091\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">打包器 | Webpack</span></div></a></li></ul>
                                </li>
                                <li id=\"chapter.10258-doc.1018\" class=\"c-tree-item\">
                                    <a href=\"/noteslist/le1/10258\" class=\"c-tree-title
                                     {% if urivar2 == '10258' %}   
                                     tree-hover tree-actived tree-open
                                     {% endif %}
                                    \" style=\"color: #000000;text-decoration: none;\">
                                        <div class=\"c-tree-title-inner\">
                                            <i class=\"c-tree-arrowright c-tree-level2-text\"></i>
                                            <i class=\"c-tree-icon\"></i>
                                            <span class=\"c-tree-text c-tree-level2-text\">快速开始2 | Getting started</span>
                                        </div>
                                    </a>
                                    <ul class=\"c-tree c-tree-level3\"><li id=\"section.1008084-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008084\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text c-tree-level4-text\">无障碍 | Accessibility</span></div></a></li><li id=\"section.1008085-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008085\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">浏览器和设备 | Browsers and devices</span></div></a></li><li id=\"section.1008086-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008086\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">构建工具 | Build tools</span></div></a></li><li id=\"section.1008087-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008087\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">内容 | Contents</span></div></a></li><li id=\"section.1008088-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008088\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">下载 | Download</span></div></a></li><li id=\"section.1008089-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008089\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">JS 脚本 | JavaScript</span></div></a></li><li id=\"section.1008090-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008090\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">主题 | Theming Bootstrap</span></div></a></li><li id=\"section.1008091-chapter.10257-doc.1018\" class=\"c-tree-item\"><a href=\"/developer/section/1008091\" class=\"c-tree-title\"><div class=\"c-tree-title-inner\"><i class=\"c-tree-icon\"></i><span class=\"c-tree-text\">打包器 | Webpack</span></div></a></li></ul>
                                </li>
                                </ul>
                            </div>
                        </a>
                    </li>

                </ul>
                

                    
    

          </div>
          {# end sm-3 #}
          <div class=\"col-sm-9\">
                    <div class=\"container\">
                     
                        <div class=\"row\">
                            <div class=\"col-6 redbr\">
                                 <a href=\"/\">主頁</a>
                                 <a href=\"/\">World Stand English</a>
                                 >
                                 <a href=\"/\">Starter</a>
                                 >
                                 <a href=\"/\">Jan</a>
                                 >
                                 <a href=\"/\">Week 2</a>
                            </div>
                            <div class=\"col-6 redbr \">
                                       <div class=\"clearfix\">     
                                        
                                        {# new select box #}
                                        <div class=\"col-6 float-right\">
                                            <div class=\"input-group \">
                                              <select class=\"custom-select\" id=\"inputGroupSelect04\">
                                                <option selected>依標題排序</option>
                                                <option value=\"1\">One</option>
                                                <option value=\"2\">Two</option>
                                                <option value=\"3\">Three</option>
                                              </select>
                                              <div class=\"input-group-append\">
                                                <button class=\"btn btn-outline-secondary\" type=\"button\">
                                                    <i class=\"fa fa-caret-down\"></i></button>
                                              </div>
                                            </div>
                                        </div>

                                        {# end new select box #}

                                        <button class=\"btn2 float-right\"><i class=\"fa fa-bars\"></i></button>

                                        <button class=\"btn2 float-right\"><i class=\"fa fa-th\"></i></button>

                                        

                                        {# select box #}
                                       {#  <div class=\"input-group mb-2 col-6 float-right\">
                                        <select class=\"custom-select mr-sm-2\" id=\"inlineFormCustomSelect\">
                                        <option selected>Choose...</option>
                                        <option value=\"1\">One</option>
                                        <option value=\"2\">Two</option>
                                        <option value=\"3\">Three</option>
                                      </select>

                                        </div> #}
                                        {# end select box #}

                                     </div>
                                   
                            </div>
                        </div>
                    </div>

                    {# bottom row #}
                    <div class=\"container\">
                     
                        <div class=\"row\">
                                <div class=\"col-2\">
                                    類型
                                </div>
                                <div class=\"col-5\">
                                    標題
                                </div>
                                <div class=\"col-4\">
                                    更新時間
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    詳情
                                </div>    

                        </div>
                        {# new row #}
                        <div class=\"row\">
                                <div class=\"col-2\">
                                    <a href=\"#\"><i class=\"fa fa-folder ml-1\" style=\"color: rgb(255, 170, 0);\"></i></a>
                                </div>
                                <div class=\"col-5\">
                                    <a href=\"#\"><span>BEN</span></a>
                                </div>
                                <div class=\"col-4\">
                                    2019-10-14 10:24:26
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    <a href=\"#\"><i class=\"fa fa-search\"></i></a>
                                </div>    

                        </div>
                        <div class=\"row\">
                                <div class=\"col-2\">
                                    <a href=\"#\"><i class=\"fa fa-folder ml-1\" style=\"color: rgb(255, 170, 0);\"></i></a>
                                </div>
                                <div class=\"col-5\">
                                    <a href=\"#\"><span>BEN</span></a>
                                </div>
                                <div class=\"col-4\">
                                    2019-10-14 10:24:26
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    <a href=\"#\"><i class=\"fa fa-search\"></i></a>
                                </div>    

                        </div>
                        <div class=\"row\">
                                <div class=\"col-2 \">
                                    <a href=\"#\"><i class=\"fa fa-folder ml-1\" style=\"color: rgb(255, 170, 0);\"></i></a>
                                </div>
                                <div class=\"col-5\">
                                    <a href=\"#\"><span>BEN</span></a>
                                </div>
                                <div class=\"col-4\">
                                    2019-10-14 10:24:26
                                </div>
                                <div class=\"col-1 d-flex justify-content-center\">
                                    <a href=\"#\"><i class=\"fa fa-search\"></i></a>
                                </div>    

                        </div>
                        {# end new row #}
                    </div>    

                    {# end bottom row #}

                    {# <div class=\"container\"> #}

                    
          </div>
          {# end sm-9 #}
        </div>
        </div>  
        
    </section>
", "layouts/page/notescontent/index.twig", "/home/atwebshk/public_html/bora5/application/views/layouts/page/notescontent/index.twig");
    }
}
