<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/index.php');
    return;
}

if(G5_COMMUNITY_USE === false) {
    include_once(G5_THEME_SHOP_PATH.'/index.php');
    return;
}

include_once(G5_THEME_PATH.'/head.php');
?>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="<?php echo G5_THEME_URL?>/css/main.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo G5_THEME_URL?>/css/common.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo G5_THEME_URL?>/css/icofont.min.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo G5_THEME_URL?>/css/slick.css" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <div id="main">
	<!--
        <div class="site-map">
            <ul>
                <li>
                    <a href="#sec1">
                        <span><i class="icofont-home"></i> MAIN</span>
                        <div class="line"></div>
                    </a>
                </li>
                <li>
                    <a href="#sec2">
                        <span><i class="icofont-building-alt"></i> COMPANY</span>
                        <div class="line"></div>
                    </a>
                </li>
                <li>
                    <a href="#sec4">
                        <span><i class="icofont-map-pins"></i> CONTACT</span>
                        <div class="line"></div>
                    </a>
                </li>
                <li>
                    <a href="#sec6">
                        <span><i class="icofont-newspaper"></i> NEWS</span>
                        <div class="line"></div>
                    </a>
                </li>
            </ul>
        </div>
		-->
        <div class="sec sec1 banner">
            <div class="mainSlider">
                <div class="bn bn01">
                    <div class="textBox">
                        <h1>
                            몸만 떠나는 가벼운 피크닉
                        </h1>
                        <p>
                            사랑하는 가족, 연인과 함께 정원에서의 낭만 가득한 피크닉을 즐겨보세요
                        </p>
                    </div>
                </div>
                <div class="bn bn02">
                    <div class="textBox">
                        <h1>
                            정원에서 즐기는 피크닉
                        </h1>
                        <p>
                            퍼스트가든을 함께 즐길 수 있어요
                        </p>
                    </div>                
                </div>
                <div class="bn bn03">
                    <div class="textBox">
                        <h1>
                            프라이빗 피크닉
                        </h1>
                        <p>
                            널찍한 개별텐트에서 여유로움을 느껴보세요
                        </p>
                    </div>  
                </div>
            </div>
            <div class="mainArrow">
                <ul class="arrowBox">
                    <li class="bnArrow bn_left"><i class="fa fa-angle-left"></i></li>
                    <li class="bnArrow bn_right"><i class="fa fa-angle-right"></i></li>
                </ul>
            </div>
        </div>   
		<!--
        <div class="sec sec2" id="sec2">
            <div class="sec2-inner">
                <div class="sec2-tit">
                <p class="ss">FACE-THEME</p>
                    <h3><strong>잘 만든 홈페이지는</strong><br>
                        시간이 지나도<br class="mo_br"> 그 가치를<br>
                        간직합니다.
                    </h3>
                </div>
                <div class="sec2-contents">
                    <ul class="elm">
                        <li class="sec2-con background">
                            <a href="<?php echo G5_THEME_URL?>/sub/history.php">
                                <p>Since 2015</p>
                                <dl>
                                    <dt class="cha-num" data-rate="2015">2015</dt>
                                    <dd>연혁</dd>
                                </dl>
                            </a>
                        </li>
                        <li class="sec2-con background">
                            <a href="<?php echo G5_THEME_URL?>/sub/product1.php">
                                <dl>
                                    <dt class="cha-num2" data-rate="823">823+</dt>
                                    <dd>프로젝트</dd>
                                </dl>
                            </a> 
                        </li>
                        <li class="sec2-con background">
                            <a href="<?php echo G5_THEME_URL?>/sub/company.php">
                                <dl>
                                    <dt class="cha-num3" data-rate="96">96</dt>
                                    <dd>고객사</dd>
                                </dl>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
		-->
        <div class="sec3 sec" id="sec3">
            <div class="sec3-inner">
                <div class="sec3-lt">
                    <div data-dot-title="Private Tent">
                        <img src="<?php echo G5_THEME_URL?>/img/product_img_1.png" alt="sec2">
                        <!--<p>해당 구역에 알맞는 텍스트를 입력해주세요.</p>-->
                    </div>
                    <div data-dot-title="All-in-One Set">
                        <img src="<?php echo G5_THEME_URL?>/img/product_img_2.png" alt="sec2">
                    </div>
                    <div data-dot-title="One-Stop Food">
                        <img src="<?php echo G5_THEME_URL?>/img/product_img_3.png" alt="sec2">
                    </div>
                    <div data-dot-title="Wetland Walk">
                        <img src="<?php echo G5_THEME_URL?>/img/product_img_4.png" alt="sec2">
                    </div>
                </div>
                <div class="sec3-rt">
                    <p class="ss">Hee-Garden Picnic</p>
                    <h3>
                        도심속에서 만나는 정원 피크닉
                    </h3>
                    <ul>

                    </ul>
                </div>
            </div>
        </div>
		<!--
        <div class="sec4 sec" id="sec4">
            <div class="sec4-inner">
                <h3>OUR COMPANY
                    <div class="mo-con"></div>
                </h3>
                <ul>
                    <li>
                       <a href="<?php echo G5_THEME_URL?>/sub/company.php">
                            <div class="sec4-img">
                                <img src="<?php echo G5_THEME_URL?>/img/our_1.jpg" alt="sec4">
                            </div>
                            <dl>
                                <dt>회사소개</dt>
                                <dd>앞서가는 트렌드와 끊임없이<br>
                                    발전하는 페이스메이커
                                </dd>
                            </dl>
                       </a>
                    </li>
                    <li>
                         <a href="<?php echo G5_THEME_URL?>/sub/business1.php">
                            <div class="sec4-img">
                                <img src="<?php echo G5_THEME_URL?>/img/our_2.jpg" alt="sec4">
                            </div>
                            <dl>
                                <dt>사업안내</dt>
                                <dd>앞서가는 트렌드와 끊임없이<br> 
                                    발전하는 페이스메이커
                                </dd>
                            </dl>
                       </a>
                    </li>
                    <li>
                        <a href="<?php echo G5_THEME_URL?>/sub/business2.php">
                            <div class="sec4-img">
                                <img src="<?php echo G5_THEME_URL?>/img/our_3.jpg" alt="sec4">
                            </div>
                            <dl>
                                <dt>사업영역</dt>
                                <dd>앞서가는 트렌드와 끊임없이<br>
                                    발전하는 페이스메이커
                                </dd>
                            </dl>
                       </a>
                    </li>
                    <li>
                        <a href="<?php echo G5_THEME_URL?>/sub/vision.php">
                            <div class="sec4-img">
                                <img src="<?php echo G5_THEME_URL?>/img/our_4.jpg" alt="sec4">
                            </div>
                            <dl>
                                <dt>경영이념</dt>
                                <dd>앞서가는 트렌드와 끊임없이<br>
                                    발전하는 페이스메이커
                                </dd>
                            </dl>
                       </a>
                    </li>
                </ul>
            </div>
        </div>
		-->
        <div class="sec5" id="sec5">
            <div class="sec5-inner">
                <div class="mo-ani-arrow">
                    <img src="<?php echo G5_THEME_URL?>/img/arrow_next2.png" alt="arrow">
                </div>
                <ul>
                    <li>
                        <div class="sec5-bg">
                            <div class="sec5-con">
                                <h3>01</h3>
                                <h4>퍼스트가든</h4>
                                <dl>
                                    <dt>23가지의 테마가 있는 유럽식 정원</dt>
                                    <dd>동물 먹이주기 체험</dd>
                                    <dd>아이노리(놀이기구)</dd>
                                    <dd>365일 별빛축제</dd>
                                </dl>
                                <a href="https://firstgarden.co.kr">More view</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="sec5-bg">
                            <div class="sec5-con">
                                <h3>02</h3>
                                <h4>퍼스트가든 워터플레이</h4>
                                <dl>
                                    <dt>4,000평 규모의 취사형 수영장</dt>
                                    <dd>프라이빗한 카바나존</dd>
                                    <dd>1M 규모의 안전한 수심</dd>
                                    <dd>버블존, 바데풀 등 다양한 시설</dd>
                                </dl>
                                <a href="https://firstgarden.co.kr">More view</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="sec5-bg">
                            <div class="sec5-con">
                                <h3>03</h3>
                                <h4>희가든 가든피크닉</h4>
                                <dl>
                                    <dt>공식 인스타그램</dt>
                                    <dd>&nbsp;</dd>
                                    <dd>&nbsp;</dd>
                                </dl>
                                <a href="https://www.instagram.com/hgardenpicnic/">More view</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
<!--
        <div class="sec6" id="sec6">
            <div class="sec6-inner">
                <div class="sec6-lt">
                    <h3>
                    페이스메이커의<br>
                        최신소식을 확인해보세요.
                    </h3>
                    <div class="sec6-wrap">
                        <div>
                            <div class="sec6-con">
                                <div class="sec6-img background" style="background-image:url('<?php echo G5_THEME_URL?>/img/sec3_con1.png')">
                                    
                                </div>
                                <p>Welcom Face-maker!!</p>
                            </div>
                        </div>
                        <div>
                            <div class="sec6-con">
                                <div class="sec6-img background" style="background-image:url('<?php echo G5_THEME_URL?>/img/sec3_con2.png')">
                                    
                                </div>
                                <p>Hello, Face-maker</p>
                            </div>
                        </div>
                        <div>
                            <div class="sec6-con">
                                <div class="sec6-img background" style="background-image:url('<?php echo G5_THEME_URL?>/img/sec3_con3.png')">
                                    
                                </div>
                                <p>Creative Web Agency</p>
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="sec6-rt">
                    <?php echo latest("theme/basic","gallery01","4","200") ?>
                </div>
            </div>
        </div>
-->
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="<?php echo G5_THEME_URL?>/js/main.js"></script>
    <script src="<?php echo G5_THEME_URL?>/js/slick.js"></script>
    <script src="<?php echo G5_THEME_URL?>/js/slick.min.js"></script>
    <script>
        AOS.init({
        duration: 1200,
        })

    </script>
    <script>
        var helpers = {
            addZeros: function (n) {
                return (n < 10) ? '0' + n : '' + n;
            }
        };

        function sliderInit() {
        let $slider2 = $('.mainSlider');
        $slider2.each(function() {
            var $sliderParent = $(this).parent();
            $(this).slick({
            fade:true,
            slidesToShow: 1,
            draggable:false,
            speed:1000,
            dots:false,
            lazyLoad: 'progressive',
            // autoplay:true,
            autoplaySpeed:1000,
            pauseOnFocus:false,
            pauseOnHover:false,
            prevArrow: $('.bn_left'),
            nextArrow: $('.bn_right'),
            responsive: [
                {
                breakpoint: 767,
                settings: {
                    adaptiveHeight: true
                }
                }
            ]
            });
                        
            if ($(this).find('.bn').length > 1) {
                $(this).siblings('.slides-numbers').show();
            }

            $(this).on('afterChange', function(event, slick, currentSlide){
            $sliderParent.find('.slides-numbers .active').html(helpers.addZeros(currentSlide + 1));
            });

            var sliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
            $sliderParent.find('.slides-numbers .total').html(helpers.addZeros(sliderItemsNum));

        });
        
        };

        sliderInit();
    </script>
    
<?php
 include_once(G5_THEME_PATH.'/tail.php');