@extends('layout.layout')
@section('css')
        <link href="{{asset('css/components.css')}}" rel="stylesheet">
        <link href="{{asset('css/font-awesome.min.css')}}" rel="stylesheet">
        <link href="{{asset('css/app.css')}}" rel="stylesheet">
        <link href="{{asset('css/animate.css')}}" rel="stylesheet">

        
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

        <!-- Fonts -->
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="bookmark" href="favicon.ico">

        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700' rel='stylesheet' type='text/css'>

        <!-- Styles -->
        <link href="{{asset('css/app.css')}}" rel="stylesheet">
        <link rel="stylesheet" href="{{asset('css/wongwah/header.css')}}" />
        <link rel="stylesheet" href="{{asset('css/wongwah/index.css')}}" />
        <link rel="stylesheet" href="{{asset('css/wongwah/footer.css')}}" />

    
    <link href="{{asset('css/docs.min.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/pageLayout.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/introduction.css')}}" rel="stylesheet">

    <style>
        .top-banner .wrapper.style3 {
                background-image: url('{{asset('upload/'.$banner->img)}}');
        }
        .color-title, a.photo-more{
            color: #3776c6;
        }
        .section-title{
            color: #FFFFFF;
        }
        .navbar-default .navbar-nav > li:not(.open):hover:before{
            border-bottom: 10px solid #3776c6;
        }
        .button, .nav-id li.active a{
            background: #3776c6;
        }
        .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
            background-color: #3776c6;
        }
        #footer h3, #footer a:hover, #footer a:focus{
            color: white;
        }
    </style>
@stop
@section('content')
<!-- 首頁navber -->
@include('layout.nav')
<div id="app">
    <section class="top-banner">
        <div class="pageBanner wrapper style3">
            <div class="inner">
                <header class="align-center">
                    <h3 class="slogan">{{$banner->title1}}</h3>
                    <h1 class="slogan-c">{{$banner->title2}}</h1>
                </header>
            </div>
        </div>
    </section>
    <section class="aboutSection">
        <div class="container">
            <div class="row wrapper style2">
                <div class="col-xs-12 about-content" role="main">

                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{asset('/')}}"><i class="glyphicon glyphicon-home"></i></a></li>
                        <li class="breadcrumb-item active">全台最具規模的庫板製造及施工的專業隔間公司</li>
                    </ol>

                    <div class="pageSec">
                        
                        <div class="about-paragraph" id="about-1">

                            <h2 class="sec-title color-title text-center"><i class="fa fa-tag" aria-hidden="true" style="margin-right: 20px;"></i>{!!$about->s1_title!!}</h2>
                            <hr>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="img-wrapper">
                                        <img src="{!!asset('upload/'.$about->s1_img)!!}" width="30%" style=" margin: 0 20px 20px 0"><br>
                                        <p style="white-space:pre-wrap; color: #636b6f; letter-spacing: 1px; line-height: 140%; font-size: 16px; font-weight: 400;">{!!$about->s1_body!!}</p>
                                    </div>
                                    <div style="clear: both;"></div>
                                    <br>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-left">
                                        <p></p><p></p><p><span style="font-size: large; font-weight: bold;"><span style="color: rgb(0, 0, 0);">{!!$about->s1_item_title1!!}</span><br></span></p>
                                        {!!$about->s1_item_body1!!}
                                        <div>
                                            <span style="font-size: large; font-weight: bold; color: rgb(0, 0, 0);">{!!$about->s1_item_title2!!}</span>
                                        </div>
                                    <div></div>
                                    <div>
                                        {!!$about->s1_item_body2!!}
                                    </div>
                                    <div>
                                    <span style="font-size: large; font-weight: bold;"><span style="color: rgb(0, 0, 0);">【金屬庫板材質】分為：</span><br></span></p><ol>
                                                <li>耐燃一級 - 紙蜂巢庫板。 <br>
                                                </li>
                                                <li>耐燃二級 - PU庫板。<br>
                                                </li>
                                                <li>防火一小時岩棉庫板(綠建材)。<br>
                                                </li>
                                                <li>【以上庫板材質皆為內政部營建署認證合格之建材，依材質之不同完工時可檢附證明】。<br>
                                                </li>
                                                <li>【以上庫板鋼板可分為：抗靜電鋼板、抗菌鋼板、抗鹽化鋼板、白鐵】。 <br>
                                                </li>
                                                </ol>
                                    </div>
                                    <p><br></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="about-paragraph" id="about-2">
                            <h2 class="sec-title color-title text-center"><i class="fa fa-tag" aria-hidden="true" style="margin-right: 20px;"></i>{{$about->s2_title}}</h2><hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="img-wrapper">
                                        <img src="{{asset('upload/'.$about->s2_img)}}" width="40%" style="float:left; margin: 0 20px 20px 0">
                                        <p style="white-space:pre-wrap; color: #636b6f; letter-spacing: 1px; line-height: 140%; font-size: 16px; font-weight: 400;">{!!$about->s2_body!!}</p>
                                    </div>
                                    <div style="clear: both;"></div>
                                    <br>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-left">
                                        <div>
                                            <h3>{!!$about->s2_item_title1!!}</h3>
                                            {!!$about->s2_item_body1!!}
                                            <br>
                                            <h3>{!!$about->s2_item_title2!!}</h3>
                                            {!!$about->s2_item_body2!!}
                                        </div>
                                        <div>
                                            <h3>{!!$about->s2_item_title3!!}</h3>
                                            {!!$about->s2_item_body3!!}
                                            <br>
                                            <h3>{!!$about->s2_item_title4!!}</h3>
                                            {!!$about->s2_item_body4!!}


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

</div>
@stop
@section('script')
    <script src="{{asset('js/components.js')}}"></script>
    <script src="{{asset('js/ie/html5shiv.js')}}"> </script>
    <script src="{{asset('js/ie/respond.min.js')}}"></script>
    <script src="{{asset('js/jquery.mousewheel.min.js')}}"></script>
    <script src="{{asset('js/jquery.poptrox.min.js')}}"></script>
    <script src="{{asset('js/jquery.scrolly.min.js')}}"></script>
    <script src="{{asset('js/jquery.scrollex.min.js')}}"></script>
    <script src="{{asset('js/jquery.lettering.js')}}"></script>
    <script src="{{asset('js/jquery.textillate.js')}}"></script>

    <script src="{{asset('js/smoothScroll.js')}}"></script>

    <script>

        $(document).ready(function(){

            $(".home").click(function(){
                $("html, body").animate({scrollTop:0}, 500);
            });

            $(window).scroll(function () {

                $(".slideanim").each(function(){
                    var pos = $(this).offset().top;

                    var winTop = $(window).scrollTop();
                    if (pos < winTop + 600) {
                        $(this).addClass("slide");
                    }
                });
            })

        });

        function myMap() {
            var mapx = parseFloat('24.0628792');
            var mapy = parseFloat('120.6726313');
            var myCenter = new google.maps.LatLng(mapx, mapy);
            var mapProp = {center:myCenter, zoom:18, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var marker = new google.maps.Marker({position:myCenter});
            marker.setMap(map);
        }

        function theBodyLoad(){
            if($('.slogan').length > 0){
                $('.slogan').textillate({
                    in: { effect: 'rollIn' },
                    loop: true,
                    out: {
                        effect: 'fadeOut',
                        delayScale: 1.5,
                        delay: 5,
                        sync: false,
                        shuffle: true,
                    }
                });
            }
            if($('.slogan-c').length > 0){
                $('.slogan-c').textillate({
                    in: { effect: 'rollIn' },
                    loop: true,
                    out: {
                        effect: 'fadeOut',
                        delayScale: 1.5,
                        delay: 5,
                        sync: false,
                        shuffle: true,
                    }
                });
            }
        }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUBHlB3qV9ODgcVGyKyESZpk_hZcCWhzk&amp;callback=myMap"></script>
    <script>

        var footerHeight;

        $(document).ready(function(){

            $('body').scrollspy({
                target: '#pageNavigatorMenu',
                offset: 60
            });
            footerHeight = $('footer').outerHeight() + $('.copyright').outerHeight() + 40;
            $("#sidebar").affix({
                offset: {
                    top: 285,
                    bottom: 920
                }
            }).on('affix.bs.affix', function () { // before affix

            });
        })

        function showMoreHistory(moreBtn){
            $(moreBtn).parent().remove();
            $('#History div.well').removeClass('hidden');
        }
    </script>
@stop