index.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Maybii - Enjoy the Internet</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" class="index">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Maybii</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">关于Maybii</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#pricing">资费套餐</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#guide">使用指南</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#team">团队介绍</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#shop">立即购买</a>
                    </li>
                    <!-- <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li> -->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->
    <header>
        <div class="container">
            <div class="intro-text">
                <div class="intro-lead-in">Welcome To Maybii!</div>
                <div class="intro-heading">Enjoy the internet!</div>
                <a href="#about" class="page-scroll btn btn-xl">了解更多</a>
            </div>
        </div>
    </header>

    <!-- About Section -->
    <section id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">关于Maybii</h2>
                    <h3 class="section-subheading text-muted">专业的网络加速服务</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <ul class="timeline">
                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4 class="subheading">隐藏你的IP地址</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">匿名私人享受网上冲浪，匿名的流浪网站，连接到网络服务器，等于构建一个专用网络，利用加密技术对传输数据进行加密，以保证数据的私密和安全。</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4 class="subheading">没有限制</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">任何线路都不限制流量，不限制速度，不阻止任何网站或游戏，这样你就可以玩什么游戏，或访问任何网站来体验整个互联网。</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4 class="subheading">多平台设备兼容</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">支持各平台手机（iOS/Android等）、电脑（Windows/Mac OS等），支持PPTP、L2TP/IPSec协议，选择适合你那个的服务器来连接，你讲获得最好的速度。</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="img/about/4.jpg" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4 class="subheading">安全访问网站</h4>
                                </div>
                                <div class="timeline-body">
                                    <p class="text-muted">高速访问全球网站，我们有全球各地的网络服务器，我们没有任何限制，访问只有你懂得的网站。</p>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                            <a class="timeline-image" href="http://maybii.heidianer.com/products/maybiivps" style="display: inline-block;">
                                <h4>那么
                                    <br>现在就开始吧
                                    <br>Go!</h4>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Pincing Section -->
    <section id="pricing"  class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">套餐</h2>
                    <h3 class="section-subheading text-muted"></h3>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-3">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">￥19.00/月</h4>
                    <p class="text-muted">有效期一个月</p>
                </div>
                <div class="col-md-3">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-star fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">￥49.00/季</h4>
                    <p class="text-muted">有效期3个月</p>
                    <p class="text-yellow">相当于每月16.6元</p>
                </div>
                <div class="col-md-3">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-heartbeat fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">￥89.00/半年</h4>
                    <p class="text-muted">有效期6个月</p>
                    <p class="text-yellow">相当于每月14.8元</p>
                </div>
                <div class="col-md-3">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-diamond fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">￥149.00/年</h4>
                    <p class="text-muted">有效期1年</p>
                    <p class="text-yellow">相当于每月12.4元</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Grid Section -->
    <section id="guide">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">使用指南</h2>
                    <h3 class="section-subheading text-muted">如果你的设备不在此列，可以按照『xx系统 + vpn配置』关键字百度。</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#win7-pptp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/windows2.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Windows7(PPTP)</h4>
                        <p class="text-muted">其他windows版本请百度一下</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#mac-pptp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/mac2.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Mac OS(PPTP)</h4>
                        <p class="text-muted">适用于苹果电脑</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#ios-pptp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/ios2.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>iOS(PPTP)</h4>
                        <p class="text-muted">适用于iPhone、iPad</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#android-pptp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/android2.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Android(PPTP)</h4>
                        <p class="text-muted">适用于Android系统</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#win7-l2tp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/windows.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Windows7(L2TP)</h4>
                        <p class="text-muted">其他windows版本请百度一下</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#mac-l2tp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/mac.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Mac OS(L2TP)</h4>
                        <p class="text-muted">适用于苹果电脑</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#ios-l2tp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/ios.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>iOS(L2TP)</h4>
                        <p class="text-muted">适用于iPhone、iPad</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 portfolio-item">
                    <a href="#android-l2tp-Modal" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/android.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Android(L2TP)</h4>
                        <p class="text-muted">适用于Android系统</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Team Section -->
    <section id="team" class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">团队介绍</h2>
                    <h3 class="section-subheading text-muted">Valar Dohaeris(凡人皆有一死)</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="team-member">
                        <img src="img/team/team11.jpg" class="img-responsive img-circle" alt="">
                        <h4>小木</h4>
                        <p class="text-muted">Engineer</p>
                        <!-- <ul class="list-inline social-buttons">
                             <li><a href="#"><i class="fa fa-twitter"></i></a>
                             </li>
                             <li><a href="#"><i class="fa fa-facebook"></i></a>
                             </li>
                             <li><a href="#"><i class="fa fa-linkedin"></i></a>
                             </li>
                             </ul> -->
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="team-member">
                        <img src="img/team/team22.jpg" class="img-responsive img-circle" alt="">
                        <h4>小唐</h4>
                        <p class="text-muted">Engineer</p>
                        <!-- <ul class="list-inline social-buttons">
                             <li><a href="#"><i class="fa fa-twitter"></i></a>
                             </li>
                             <li><a href="#"><i class="fa fa-facebook"></i></a>
                             </li>
                             <li><a href="#"><i class="fa fa-linkedin"></i></a>
                             </li>
                             </ul> -->
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="team-member">
                        <img src="img/team/team33.jpg" class="img-responsive img-circle" alt="">
                        <h4>小苍</h4>
                        <p class="text-muted">Marketing</p>
                        <!-- <ul class="list-inline social-buttons">
                             <li><a href="#"><i class="fa fa-twitter"></i></a>
                             </li>
                             <li><a href="#"><i class="fa fa-facebook"></i></a>
                             </li>
                             <li><a href="#"><i class="fa fa-linkedin"></i></a>
                             </li>
                             </ul> -->
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <p lcass="large text-muted">Winter is comming (凜冬將至)</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Shop setion -->
    <section id="shop">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">访问商店</h2>
                    <!-- <h3 class="section-subheading text-muted">燕云楼</h3> -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center hidden-xs">
                    <button class="btn btn-primary shop-go" onClick="javascript:window.open('http://maybii.heidianer.com/products/maybiivps','_blank')">立即选购</button>
                </div>
                <div class="col-lg-12 text-center visible-xs-block">
                    <img src="http://up.img.heidian.co/maybii-shop-qrcode.png" alt="访问商店" style="width: 200px;height: auto;">
                </div>
            </div>
        </div>
    </section>

    <!-- Clients Aside -->
    <!-- <aside class="clients">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/envato.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/designmodo.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/themeforest.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img src="img/logos/creative-market.jpg" class="img-responsive img-centered" alt="">
                    </a>
                </div>
            </div>
        </div>
    </aside> -->

    <!-- Contact Section -->
    <!-- <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Contact Us</h2>
                    <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>
                                <button type="submit" class="btn btn-xl">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section> -->

    <footer class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <span class="copyright">Copyright &copy; Maybii 2016</span>
                </div>
                <div class="col-md-4">
                    <ul class="list-inline social-buttons">
                        <li><a href="#"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="list-inline quicklinks">
                        <li><a href="#">Privacy Policy</a>
                        </li>
                        <li><a href="#">Terms of Use</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Portfolio Modals -->
    <!-- Use the modals below to showcase details about your portfolio projects! -->

    <!-- Portfolio Modal 1 -->
    <div class="portfolio-modal modal fade" id="win7-pptp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Windows7系统下pptp的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                            <ol>
                                <li>
                                    <p class="text-left">进入<B>控制面板</B> 点击<B>查看网络状态和任务</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-1.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">点击<B>设置新的连接或网络</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-2.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">点击<B>连接到工作区</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-3.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">选择<B>使用我的Internet连接</B>(VPN)</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-4.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">填写相关信息(服务器地址以邮件中的为准),然后点击下一步</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-5.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">输入用户名和密码, 然后点击<B>创建</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-6.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">VPN连接已经创建，在需要连接到VPN的时候请在右下角的<B>系统托盘区</B> ，点击<B>网络适配器</B> 图标。 在弹出的列表中点击对应的VPN连接，就可以连接了</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/win7-pptp-7.jpg" alt="">
                                </li>
                            </ol>

                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 2 -->
    <div class="portfolio-modal modal fade" id="mac-pptp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Mac系统下pptp的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                            <ol>
                                <li>
                                    <p class="text-left">打开 <B>系统偏好设置</B> , 选择 <B>网络</B> 。</p>
                                </li>
                                <li>
                                    <p class="text-left">点击左下脚的<B>加号</B>, 在弹出的窗口中 <B>VPN类型</B> 选择 <B>PPTP</B> , 然后点击 <B>创建</B> 。</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/mac-pptp-1.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">将服务器地址和用户名填入对应位置</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/mac-pptp-2.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">点击 <B>鉴定设置</B> ，在弹出的窗口中输入 VPN密码</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/mac-pptp-3.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">点击 <B>高级</B> , 在弹出的窗口中勾选 <B>通过VPN发送所有流量</B> 。</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/mac-pptp-4.jpg" alt="">
                                    <img class="img-responsive img-centered" src="img/guide/pptp/mac-pptp-5.jpg" alt="">
                                </li>
                                <li>
                                    <p class="text-left">最后点击右下角的 <B>应用</B> 。到这里VPN设置完成，你可以通过点击 <B>连接</B> 来连接到对应的VPN。</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/mac-pptp-6.jpg" alt="">
                                </li>
                            </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 3 -->
    <div class="portfolio-modal modal fade" id="ios-pptp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>iOS系统下pptp的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                            <ol>
                                <li>
                                    <p>打开 设置,　选择 通用, 再选择 网络 , 再选择 VPN 。你将会看到下面的界面。</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/ios-pptp-1.jpg" alt="">
                                </li>
                                <li>
                                    <p>点击 添加VPN配置</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/ios-pptp-2.jpg" alt="">
                                </li>
                                <li>
                                    <p>在顶部的标签页中选择 PPTP , 然后填写详细信息。</p>
                                    <p> ---- 描述 - 任何名字, 比如 “pptp”</p>
                                    <p> ---- 服务器 - VPN 服务器地址(域名或者是IP地址)</p>
                                    <p> ---- 账号 - VPN 用户名</p>
                                    <p> ---- 密码 - VPN 密码</p>
                                    <p> ---- 发送所有流量 - 打开这个开关(默认是开启的)</p>
                                    <p>然后按下 存储 按钮.</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/ios-pptp-3.jpg" alt="">
                                </li>
                                <li>
                                    <p>新的VPN配置已经成功创建。选中你要连接的vpn，然后右上角开关启动</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/ios-pptp-4.jpg" alt="">
                                </li>
                            </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 4 -->
    <div class="portfolio-modal modal fade" id="android-pptp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Android系统下pptp的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                            <p class="item-intro text-muted">不同Android手机可以百度关键词『某某系统 + PPTP』</p>
                            <ol>
                                <li>
                                    <p>打开 设置,　选择 无线和网络 , 再选择 VPN 。再选择 添加VPN 。</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/android-pptp-1.jpg" alt="">
                                </li>
                                <li>
                                    <p>选择 PPTP</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/android-pptp-2.jpg" alt="">
                                </li>
                                <li>
                                    <p>填写详细信息。</p>
                                    <p> ---- 描述 - 任何名字, 比如 “pptp”</p>
                                    <p> ---- 服务器 - VPN 服务器地址(域名或者是IP地址)</p>
                                    <p> ---- 账号 - VPN 用户名</p>
                                    <p> ---- 密码 - VPN 密码</p>
                                    <p>然后按下 保存 按钮.</p>
                                    <img class="img-responsive img-centered" src="img/guide/pptp/android-pptp-3.jpg" alt="">
                                </li>
                                <li>
                                    <p>在VPN 配置列表界面，选择刚刚创建的VPN，然后连接就可以了。</p>
                                </li>
                            </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 5 -->
    <div class="portfolio-modal modal fade" id="win7-l2tp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Windows7系统下L2TP的配置</h2>
                            <h4>Windows10 配置可参考<a href="http://jingyan.baidu.com/article/a501d80c197aa1ec630f5eeb.html">win10系统如何设置VPN网络</a></h4>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                            <ol>
                                <li>
                                    <p>进入<B>控制面板</B> 点击<B>查看网络状态和任务</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-1.jpg" alt="">
                                </li>
                                <li>
                                    <p>点击<B>设置新的连接或网络</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-2.jpg" alt="">
                                </li>
                                <li>
                                    <p>点击<B>连接到工作区</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-3.jpg" alt="">
                                </li>
                                <li>
                                    <p>选择<B>使用我的Internet连接</B>(VPN)</p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-4.jpg" alt="">
                                </li>
                                <li>
                                    <p>填写相关信息,然后点击下一步</p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-5.jpg" alt="">
                                </li>
                                <li>
                                    <p>输入用户名和密码, 然后点击<B>创建</B></p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-6.jpg" alt="">
                                </li>
                                <li>
                                    <p>VPN连接已经创建，在需要连接到VPN的时候请在右下角的<B>系统托盘区</B> ，点击<B>网络适配器</B> 图标。 在弹出的列表中 右键 点击对应的VPN连接, 选择 属性 。</p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-7.jpg" alt="">
                                </li>
                                <li>
                                    <p>在打开的属性对话框中选择 安全 标签页,然后 VPN类型 选择 L2TP/IPSec 。 然后点击 高级设置 , 在弹出的高级设置对话框中，选择 使用预共享的密钥作身份验证 , 并且 密钥 输入框中输入 L2TP　共享密钥 。 之后点击确定来保存修改。</p>
                                    <img class="img-responsive img-centered" src="img/guide/l2tp/win7-l2tp-8.jpg" alt="">
                                </li>
                            </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 6 -->
    <div class="portfolio-modal modal fade" id="mac-l2tp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Mac系统下L2TP的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                        <ol>
                            <li>
                                <p>打开 系统偏好设置 , 选择 网络 。</p>
                            </li>
                            <li>
                                <p>点击左下脚的加号, 在弹出的窗口中 VPN类型 选择 IPSec 上的L2TP , 然后点击 创建 。</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/mac-l2tp-1.jpg" alt="">
                            </li>
                            <li>
                                <p>将服务器地址和用户名填入对应位置</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/mac-l2tp-2.jpg" alt="">
                            </li>
                            <li>
                                <p>点击 鉴定设置 ，在弹出的窗口中输入 VPN密码 和 共享密钥 。</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/mac-l2tp-3.jpg" alt="">
                            </li>
                            <li>
                                <p>点击 高级 , 在弹出的窗口中勾选 通过VPN发送所有流量 。</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/mac-l2tp-4.jpg" alt="">
                            </li>
                            <li>
                                <p>最后点击右下角的 应用 。到这里VPN设置完成，你可以通过点击 连接 来连接到对应的VPN。</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/mac-l2tp-5.jpg" alt="">
                            </li>
                        </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 7 -->
    <div class="portfolio-modal modal fade" id="ios-l2tp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>iOS系统下L2TP的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                        <ol>
                            <li>
                                <p>打开 设置,　选择 通用, 再选择 网络 , 再选择 VPN 。你将会看到下面的界面。</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/ios-l2tp-1.jpg" alt="">
                            </li>
                            <li>
                                <p>点击 添加VPN配置</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/ios-l2tp-2.jpg" alt="">
                            </li>
                            <li>
                                <p>在顶部的标签页中选择 L2TP , 然后填写详细信息。</p>
                                <p> ---- 描述 - 任何名字, 比如 “l2tp”</p>
                                <p> ---- 服务器 - VPN 服务器地址(域名或者是IP地址)</p>
                                <p> ---- 账号 - VPN 用户名</p>
                                <p> ---- 密码 - VPN 密码</p>
                                <p> ---- 密钥 - VPN L2TP 共享密钥</p>
                                <p> ---- 发送所有流量 - 打开这个开关(默认是开启的)</p>
                                <p>然后按下 存储 按钮.</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/ios-l2tp-3.jpg" alt="">
                            </li>
                            <li>
                                <p>新的VPN配置已经成功创建。选中你要连接的vpn，然后右上角开关启动</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/ios-l2tp-4.jpg" alt="">
                            </li>
                        </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Portfolio Modal 8 -->
    <div class="portfolio-modal modal fade" id="android-l2tp-Modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2>Android系统下L2TP的配置</h2>
                            <p class="item-intro text-muted">账号信息一律以邮件中的为准。</p>
                        <ol>
                            <li>
                                <p>打开 设置,　选择 无线和网络 , 再选择 VPN 。再选择 添加VPN 。</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/android-l2tp-1.jpg" alt="">
                            </li>
                            <li>
                                <p>选择 PPTP</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/android-l2tp-2.jpg" alt="">
                            </li>
                            <li>
                                <p>填写详细信息。</p>
                                <p> ---- 描述 - 任何名字, 比如 “l2tp”</p>
                                <p> ---- 服务器 - VPN 服务器地址(域名或者是IP地址)</p>
                                <p> ---- 账号 - VPN 用户名</p>
                                <p> ---- 密码 - VPN 密码</p>
                                <p> ---- IPSec预共享密钥 - VPN L2TP 共享密钥</p>
                                <p>然后按下 保存 按钮.</p>
                                <img class="img-responsive img-centered" src="img/guide/l2tp/android-l2tp-3.jpg" alt="">
                            </li>
                            <li>
                                <p>在VPN 配置列表界面，选择刚刚创建的VPN，然后连接就可以了。</p>
                            </li>
                        </ol>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/agency.js"></script>

    <script type='text/javascript'>
     (function(m, ei, q, i, a, j, s) {
         m[a] = m[a] || function() {
             (m[a].a = m[a].a || []).push(arguments)
         };
         j = ei.createElement(q),
         s = ei.getElementsByTagName(q)[0];
         j.async = true;
         j.charset = 'UTF-8';
         j.src = i + '?v=' + new Date().getUTCDate();
         s.parentNode.insertBefore(j, s);
     })(window, document, 'script', '//static.meiqia.com/dist/meiqia.js', '_MEIQIA');
     _MEIQIA('entId', 9019);
    </script>

</body>

</html>