<body>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        p {
            font-size: 18px;
            font-family: Microsoft JhengHei;
        }

        a {
            color: #696969;
        }

        a:hover {
            color: #4682B4;
        }

        /* Unopened lightbox */

        .lightbox {
            display: none;
        }

        /* Opened lightbox */

        .lightbox:target {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Lightbox content */

        .lightbox figcaption {
            width: auto;
            position: relative;
            padding: 1.5em;
            background-color: rgba(0, 0, 0, .7);
        }

        /* Close button */

        .lightbox .close {
            position: relative;
            display: block;
        }

        .lightbox .close::after {
            right: -1rem;
            top: -1rem;
            width: 2rem;
            height: 2rem;
            position: absolute;
            display: flex;
            z-index: 1;
            align-items: center;
            justify-content: center;
            background-color: black;
            border-radius: 50%;
            color: white;
            content: "×";
            cursor: pointer;
        }

        /* Lightbox overlay */

        .lightbox .close::before {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: rgba(0, 0, 0, .7);
            content: "";
            cursor: default;
        }
    </style>
    <center>
        <div class="container" style="font-family:Microsoft JhengHei;">

            <div style="padding: 20px 0;">
                <div style="display: inline-block; padding: 0 20px 20px 20px;">
                    <p>乘坐客運</p>
                    <a href="#bus">
                        <i class="fa fa-bus" style="font-size:48px"></i>
                    </a>
                </div>
                <div style="display: inline-block; padding: 0 20px 20px 20px;">
                    <p>自行開車</p>
                    <a href="#car">
                        <i class="fa fa-car" style="font-size:48px;"></i>
                    </a>
                </div>
                <div id="bus" style="padding: 10px; vertical-align: top; overflow:hidden;">
                    <div class="col-md-4 col-sm-6 col-xs-12 load" style=" display:inline-block; padding: 10px 0; text-align: left;">
                        <i class="fa fa-bus" style="font-size:36px;display: inline-block; padding: 0 10px;"></i>
                        <h3 style="display: inline-block;">乘坐客運</h3>
                        <hr>
                        <p>從高雄火車站經六龜轉乘至寶來原票價 319 元(高雄-六龜全票 238 元；六龜-寶來全票 81 元)，104 年 1 月 1 日起使用一卡通普通卡(便利商店可買卡儲值)或學生卡，只要 72 元
                            (高雄-六龜最高票價自付 60 元；六龜-寶來優惠票 12 元)，以高雄客運公司網站公告為主。由農場主人至寶來國小接送。</p>
                    </div>
                    <div class="col-md-8 col-sm-6 col-xs-12 load" style=" display:inline-block;">
                        <a href="http://ecloud.ewang.com.tw/userUpload/images/tomato/bus.png">
                            <img class="col-xs-12" src="http://ecloud.ewang.com.tw/userUpload/images/tomato/bus.png" alt="">
                        </a>
                    </div>
                </div>
                <div id="car" style="padding: 10px; vertical-align: top; overflow:hidden;  overflow:hidden;">
                    <div class="col-md-4 col-sm-6 col-xs-12 load" style=" display:inline-block; padding: 10px 0;text-align: left;">
                        <i class="fa fa-car" style="font-size:36px;display: inline-block; padding: 10px;"></i>
                        <h3 style="display: inline-block;">自行開車</h3>
                        <hr>
                        <p>使用導航，搜尋「家營農場露營區」。</p>
                    </div>
                    <div class="col-md-8 col-sm-6 col-xs-12 load" style="display: inline-block; padding: 20px;">
                        <iframe allowfullscreen="" frameborder="0" height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3670.5951496171792!2d120.68310280000001!3d23.075299599999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e5998c3976ebf%3A0x71ae867af61cadd6!2z6I2W5r-D5a6254ef6L6y5aC0KOiNlua_g-eUsOeHn-i-suWgtCk!5e0!3m2!1szh-TW!2stw!4v1513498710660"
                            style="border:0" width="600"></iframe>
                    </div>
                </div>
            </div>
            <!--交通資訊-->

            <div style="padding: 20px 0;">
                <hr>
                <h2>附近景點</h2>
                <hr>

                <div class="col-md-4 col-sm-6 col-xs-12" style="margin-bottom:20px;">
                    <a href="#example1">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/tomato/house_s.jpg" alt="">
                    </a>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <a href="#example2">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/tomato/pencil_s.jpg" alt="">
                    </a>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <a href="#example3">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/tomato/sakura_s.jpg" alt="">
                    </a>
                </div>

                <div class="lightbox" id="example1">
                    <figure>
                        <a href="#" class="close"></a>
                        <figcaption>
                            <img style="max-width: 800px;" src="http://ecloud.ewang.com.tw/userUpload/images/tomato/house_b.jpg" alt="">
                            <br>
                            <p style="color:aliceblue"><strong>賴家古厝</strong></p>
                        </figcaption>
                    </figure>
                </div>

                <div class="lightbox" id="example2">
                    <figure>
                        <a href="#" class="close"></a>
                        <figcaption>
                            <img style="max-width: 800px;" src="http://ecloud.ewang.com.tw/userUpload/images/tomato/pencil_b.jpg" alt="">
                            <br>
                            <p style="color:aliceblue"><strong>鉛筆村</strong></p>
                        </figcaption>
                    </figure>
                </div>

                <div class="lightbox" id="example3">
                    <figure>
                        <a href="#" class="close"></a>
                        <figcaption>
                            <img style="max-width: 800px;" src="http://ecloud.ewang.com.tw/userUpload/images/tomato/sakura_b.jpg" alt="">
                            <br>
                            <p style="color:aliceblue"><strong>櫻花</strong></p>
                        </figcaption>
                    </figure>
                </div>

            </div>

        </div>
    </center>
</body>