@@include("./include/meta.html", {"pageTitle" : "한 발 앞선 경호, 완벽한 보안 :: 인텔리전스"})
@@include("./include/header.html")

<section class="main-banner">
    <div id="bg-wrap">
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
            <defs>
                <radialGradient id="Gradient1" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5"><animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 173, 255, 1)"></stop><stop offset="100%" stop-color="rgba(0, 0, 0, 0)"></stop></radialGradient>
                <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5"><animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(236,143,38, 1)"></stop><stop offset="100%" stop-color="rgba(236,143,38, 0)"></stop></radialGradient>
                <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5"><animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0,173,255, 1)"></stop><stop offset="100%" stop-color="rgba(0,173,255, 0)"></stop></radialGradient>
            </defs>
            <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)"><animate attributeName="x" dur="12s" values="25%;0%;25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform></rect>
            <rect x="2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)"><animate attributeName="x" dur="24s" values="-25%;0%;-25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite"></animateTransform>
            </rect>
            <rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)"><animate attributeName="x" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite"></animateTransform>
            </rect>
        </svg>
    </div>
    <div class="main-top-text">
        <h2 class="--title">
            <small>한 발 앞선 경호, 완벽한 보안.</small>
            <span class="animation">Proactive Security, Unmatched Protection.</span>
        </h2>
        <p class="--sub-text">
            중요한 순간일수록 더 정교한 보안이 필요합니다. <br>
            행사, VIP, 기업 맞춤 경호 솔루션을 제공합니다.
        </p>
    </div>
</section>

<section class="why-reason section">
    <div class="container">
        <div class="title-wrap">
            <span class="--title-deco">Why Choose? INTELLIGENCE</span>
            <h2 class="--title">당신의 안전을 위한 <br class="device-mobile">최고의 선택</h2>
            <p class="--sub-text">고객의 안전을 최우선으로 생각하는 전문 기업으로 <br class="device-mobile">다양한 맞춤형 경호 솔루션을 제공합니다.</p>
        </div>
        <ul class="contents-wrap reason-list">
            <li class="reason-box">
                <h3 class="--title MB10">
                    <span class="icon material-symbols-outlined">security</span>
                    <span>경험과 신뢰를 겸비한 전문 경호팀</span>
                </h3>
                <p class="--sub-text">
                    VIP 경호 및 대규모 행사 경호를 성공적으로 수행한 경력을 <br class="device-pc">
                    보유한 전문 경호팀을 운영, 고객의 안전을 최우선으로 보장합니다.
                </p>
            </li>
            <li class="reason-box">
                <h3 class="--title MB10">
                    <span class="icon material-symbols-outlined">data_table</span>
                    <span>보안 시스템과 맞춤형 경호 솔루션</span>
                </h3>
                <p class="--sub-text">
                    고객의 동선과 일정을 분석해 개별 맞춤형 경호 플랜을 설계,<br class="device-pc">
                    예기치 못한 상황에도 즉각 대응합니다.
                </p>
            </li>
            <li class="reason-box">
                <h3 class="--title MB10">
                    <span class="icon material-symbols-outlined">comment</span>
                    <span>신속한 위기 대응 및 철저한 사후 관리</span>
                </h3>
                <p class="--sub-text">
                    경호 서비스 종료 후에도 사후 보고서를 통해 고객의 안전 상태를 <br class="device-pc">
                    지속적으로 모니터링하고 피드백을 제공합니다.
                </p>
            </li>
            <li class="reason-box">
                <h3 class="--title MB10">
                    <span class="icon material-symbols-outlined">lock</span>
                    <span>철저한 기밀 유지 및 프라이버시 보호</span>
                </h3>
                <p class="--sub-text">
                    모든 경호 인력은 기밀 유지 서약을 체결하고, 고객 정보의 유출을 <br class="device-pc">
                    방지하기 위해 철저한 보안 프로토콜을 준수합니다.
                </p>
            </li>
        </ul>
    </div>
</section>

<section class="service-info section gray-back">
    <div class="container">
        <div class="title-wrap text-center">
            <span class="--title-deco">INTELLIGENCE Service</span>
            <h3 class="--title">고객중심 START-to-END <br class="device-mobile">경호 보안 서비스</h3>
            <p class="--sub-text">
                고객의 안전을 최우선으로 생각하는 경호 전문 <br class="device-mobile">기업으로 다양한 맞춤형 경호 솔루션을 제공합니다. <br>
                신뢰할 수 있는 경호 인력과 첨단 보안 시스템으로 <br class="device-mobile">당신의 일상과 비즈니스를 안전하게 보호해드립니다.
            </p>
        </div>
        <ul class="contents-wrap service-list MT150">
            <li class="--service-item">
                <div class="text">
                    <div class="--item-category MB50 flex-box">
                        <h4 class="--big-title">VIP 경호 서비스 <span class="--en-deco">VIP Protection <span class="hidden-mobile">Service</span></span></h4>
                        <p class="--list-text">
                            VIP 경호 서비스는 출퇴근부터 행사장까지 24시간 빈틈없는 맞춤형 경호를 제공합니다.<br>
                            국내외에서 검증된 경호팀과 첨단 보안 장비로 안전한 환경을 보장해드립니다.
                        </p>
                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item01">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
                    </div>

                    <ul class="--item-detail-list flex-box MT50 service-item01">
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">이동 경호 서비스</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>사전 동선 분석:</strong> 고객의 출퇴근 경로와 이동 시간대에 따른 위험 요소 파악</li>
                                <li class="--sub-text"><strong>전담 경호원 배치:</strong> 출퇴근 시간대 1:1 밀착 경호 제공</li>
                                <li class="--sub-text"><strong>이동 시 동선 보호:</strong> 예상치 못한 돌발 상황에 대한 사전 대처 방안 마련</li>
                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">행사 및 공식 석상 경호 서비스</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>행사장 출입 통제:</strong> 출입구 보안 강화 및 신원 확인 절차 운영</li>
                                <li class="--sub-text"><strong>VIP 대기실 보호:</strong> 대기실 내 전담 요원 배치 및 외부 접촉 통제</li>
                                <li class="--sub-text"><strong>주요 구역 경호:</strong> 무대, 대기실, VIP 라운지 등 고객의 주요 동선에 맞춘 경호 인력 배치</li>
                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">숙소 및 프라이버시 보호 서비스</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>숙소 보안 점검:</strong> 숙소 내·외부 위험 요소 사전 점검 및 보안 시스템 점검</li>
                                <li class="--sub-text"><strong>프라이버시 보호:</strong> 고객의 개인정보와 방문 기록 비공개 처리</li>
                                <li class="--sub-text"><strong>기밀 유지 서약:</strong> 모든 경호 요원의 기밀 유지 서약서 체결</li>
                            </ol>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="--service-item line-dash MT90 PT90">
                <div class="text">
                    <div class="--item-category MB50 flex-box">
                        <h4 class="--big-title">여성 안심 서비스 <span class="--en-deco">Women's Safety <span class="hidden-mobile">Service</span></span></h4>
                        <p class="--list-text">
                            데이트 폭력, 스토킹, 신변 보호 등 위협적인 상황에서 여성의 안전을 지켜드립니다. <br>
                            여성 고객이 일상 속에서 안심할 수 있도록 전담 경호원 배치와 긴급 출동 시스템을 제공합니다.
                        </p>
                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item05">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
                    </div>

                    <ul class="--item-detail-list flex-box MT50 service-item05">
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">위기 상황 &middot; 긴급 출동 서비스</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>현장 출동 지원:</strong> 데이트 폭력, 스토킹 등 위협 상황 발생 시 즉각적인 현장 출동을 통해 신속히 보호 조치</li>
                                <li class="--sub-text"><strong>안전 확보 서비스:</strong> 고객이 요청한 장소에 신속히 도착하여 위기 상황 제압 및 안전 확보</li>
                                <li class="--sub-text"><strong>긴급 출동 경호팀 배치:</strong> 사전에 등록된 출퇴근 경로 및 자주 방문지에 경호팀을 배치해 긴급 상황 발생 시 즉각 대응</li>
                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">맞춤형 동행 보호 서비스</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>전담 경호원 배치:</strong> 출퇴근길, 귀가길 등 고객이 요청한 시간대에 1:1 전담 경호원 배치로 밀착 보호</li>
                                <li class="--sub-text"><strong>심야 시간대 안심 서비스:</strong> 고객이 안심할 수 있는 심야 시간대 전담 경호 제공</li>
                                <li class="--sub-text"><strong>안전 동행 서비스:</strong> 고객이 귀가하는 동안 동행하여 위험 요소를 사전에 차단하고 안전한 귀가를 지원</li>
                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">스토킹 및 괴한 방지</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>긴급 호출 시스템 구축:</strong> 위급 상황 시 즉각적인 도움 요청 가능</li>
                                <li class="--sub-text"><strong>주변 순찰 및 감시 서비스:</strong> 고객이 지정한 시간대에 거주지 주변 순찰 및 의심 인물 감시로 안전 확보</li>
                                <li class="--sub-text"><strong>신변보호 및 법정동행 지원:</strong> 안심동행 및 법정동행 등 신변 위협에 대한 지원</li>
                            </ol>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="--service-item line-dash MT90 PT90">
                <div class="text">
                    <div class="--item-category MB50 flex-box">
                        <h4 class="--big-title">경비 서비스 <span class="--en-deco">Security Guard <span class="hidden-mobile">Service</span></span></h4>
                        <p class="--list-text">
                            경비 서비스는 건물 출입 통제부터 자산 보호까지 24시간 철저한 보안 체계를 제공합니다.<br>
                            경험 많은 경비 인력을 통해 고객의 재산과 안전을 완벽히 보호해드립니다.
                        </p>
                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item02">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
                    </div>

                    <ul class="--item-detail-list flex-box MT50 service-item02">
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">건물 출입 통제 및 보안 관리</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>출입구 보안:</strong> 출입문, 주차장, 비상구 등 주요 출입구에 보안 요원 배치</li>
                                <li class="--sub-text"><strong>방문객 통제:</strong> 방문객 사전 예약제 운영 및 입출입 시간 관리</li>
                                <li class="--sub-text"><strong>24시간 순찰:</strong> 야간 시간대 주요 구역 순찰 및 상황 보고</li>
                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">현장 경비 및 순찰 서비스</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>고정 경비:</strong> 건물 내 특정 구역에 고정 배치된 경비 요원 운영</li>
                                <li class="--sub-text"><strong>이동 순찰:</strong> 주차장, 창고, 옥상 등 사각지대 순찰 강화</li>
                                <li class="--sub-text"><strong>순찰 기록 관리:</strong> 순찰 시간, 경로, 이상 유무 등을 데이터로 기록 및 관리</li>

                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">자산 보호 및 재산 관리</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>귀중품 보호:</strong> 금고, 금전 보관함 등 주요 자산이 있는 구역에 보안 요원 배치</li>
                                <li class="--sub-text"><strong>CCTV 모니터링:</strong> 실시간 CCTV 모니터링을 통한 자산 보호</li>
                                <li class="--sub-text"><strong>보안 보고서 제공:</strong> 월간/주간 단위로 보안 상황 및 자산 보호 현황 보고서 제공</li>
                            </ol>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="--service-item line-dash MT90 PT90">
                <div class="text">
                    <div class="--item-category MB50 flex-box">
                        <h4 class="--big-title">기업 보안 서비스<span class="--en-deco">Corporate Security <span class="hidden-mobile">Service</span></span></h4>
                        <p class="--list-text">
                            기업 보안 서비스는 사무실 보안 강화부터 기밀 유출 방지까지 체계적인 보안 솔루션을 제공합니다.<br>
                            기업의 자산과 정보를 보호하기 위해 맞춤형 보안 컨설팅과 첨단 보안 시스템을 제공합니다.
                        </p>
                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item03">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
                    </div>

                    <ul class="--item-detail-list flex-box MT50 service-item03">
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">사무실 보안 및 출입 통제 관리</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>출입 기록 관리:</strong> 출입 시간 및 경로 데이터 수집 및 분석</li>
                                <li class="--sub-text"><strong>야간 순찰:</strong> 야간 시간대 사무실 순찰 및 잠금 장치 점검</li>
                                <li class="--sub-text"><strong>CCTV 모니터링:</strong> 사무실 내외부 실시간 감시 및 데이터 기록</li>
                            </ol>
                        </li>
                        <li class="--item-detail">
                            <div class="img-box">
                                <h5 class="--title MB10 text-center">비상 상황 대응 및 위기 관리</h5>
                            </div>
                            <ol class="--list">
                                <li class="--sub-text"><strong>위기 대응 매뉴얼:</strong> 각종 위기 상황(화재, 침입, 데이터 유출)에 대한 대응 계획 수립</li>
                                <li class="--sub-text"><strong>위기 발생 시 즉각 출동:</strong> 보안 요원의 즉각적인 현장 출동 및 상황 대응</li>
                                <li class="--sub-text"><strong>대피 경로 확보:</strong> 직원 및 방문객 대피 경로 사전 설계 및 비상구 관리</li>
                            </ol>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</section>

<section class="clients-info section">
    <div class="container">
        <div class="flex-box">
            <div class="title-wrap">
                <span class="--title-deco">INTELLIGENCE Partner</span>
                <h3 class="--title MB30">인텔리젼스와<br>함께한 고객</h3>
                <p class="--sub-text">
                    제휴 파트너의 지속적인 <br class="device-pc">
                    비지니스 성장을 위해 <br class="device-pc"><br class="device-mobile">
                    선도적인 역할을 수행할 것입니다!
                </p>
            </div>
            <ul class="contents-wrap clients-list MT20">
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates01.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">PROSCOM</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates09.png" class="H70" alt="에이셋 로고">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">에이셋</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates03.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">엣스퍼트</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates04.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">코엑스</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates05.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">넥슨</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates06.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">POSCO</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates07.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">롯대백화점</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates08.jpg" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">롯데월드 타워</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates10.png" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">G360</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates11.png" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">ARSLAN SRS</h4>
                </li>
                <li class="flex-box">
                    <div class="logo-img MB20">
                        <img src="assets/images/affiliates12.png" class="H70" alt="">
                    </div>
                    <h4 class="--title small MB10 PL10 text-center">대한탐정협회</h4>
                </li>
            </ul>
        </div>
    </div>
</section>

<section class="inquiry-form section" style="background-color:#eff8ff;">
    <div class="container">
        <div class="flex-box">
            <div class="title-box">
                <div class="title-wrap">
                    <span class="--title-deco">Counseling</span>
                    <h3 class="--title MB30">상담 문의</h3>
                    <p class="--sub-text">몇가지 정보를 입력해 주시면 <br class="device-pc">빠른 연락을 드립니다.</p>
                </div>
                <div class="contents-wrap hidden-mobile">
                    <ul class="--list MT50">
                        <li class="--list-text">
                            <strong>VIP 경호 서비스 <br class="device-pc"><small>(VIP Protection Service)</small></strong>
                        </li>
                        <li class="--list-text MT20">
                            <strong>여성 안심 서비스 <br class="device-pc"><small>(Women's Safety Service)</small></strong>
                        </li>
                        <li class="--list-text MT20">
                            <strong>경비 서비스 <br class="device-pc"><small>(Security Guard Service)</small></strong>
                        </li>
                        <li class="--list-text MT20">
                            <strong>기업 보안 서비스 <br class="device-pc"><small>(Corporate Security Service)</small></strong>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="form-box MT50">
                <form name="form" data-form="request-form">
                    <div class="type__details">
                        <input type="radio" name="type" value="VIP 경호 서비스" id="dot-1" checked>
                        <input type="radio" name="type" value="경비 서비스" id="dot-2">
                        <input type="radio" name="type" value="기업 보안 서비스" id="dot-3">
                        <input type="radio" name="type" value="여성 안심 서비스" id="dot-5">
                        <input type="radio" name="type" value="기타 " id="dot-4">
                        <span class="details">상담분야 <span class="required">(필수)</span></span>
                        <div class="category">
                            <label for="dot-1">
                                <span class="dot one"></span>
                                <span>VIP 경호 서비스</span>
                            </label>
                            <label for="dot-5">
                                <span class="dot five"></span>
                                <span>여성 안심 서비스</span>
                            </label>
                            <label for="dot-2">
                                <span class="dot two"></span>
                                <span>경비 서비스</span>
                            </label>
                            <label for="dot-3">
                                <span class="dot three"></span>
                                <span>기업 보안 서비스</span>
                            </label>
                            <label for="dot-4">
                                <span class="dot four"></span>
                                <span>기타 </span>
                            </label>
                        </div>
                    </div>

                    <div class="user__details">
                        <div class="input__box">
                            <span class="details">기업명 <span class="required">(필수)</span></span>
                            <input type="text" name="company_name" required>
                        </div>
                        <div class="input__box">
                            <span class="details">담당자명 <span class="required">(필수)</span></span>
                            <input type="text" name="manager_name" required>
                        </div>
                        <div class="input__box">
                            <span class="details">연락처 <span class="required">(필수)</span></span>
                            <input type="tel" name="phone" data-regex="phone-number" maxlength="13" placeholder="010-1234-5678" required>
                        </div>
                        <div class="input__box">
                            <span class="details">이메일 <span class="required">(필수)</span></span>
                            <input type="email" name="email" data-regex="email-address" placeholder="info@intelligence.com" required>
                        </div>
                        <div class="input__box full">
                            <span class="details">예산범위</span>
                            <input type="text" name="budget_range">
                        </div>
                        <div class="input__box full">
                            <span class="details">문의내용 <span class="required">(필수)</span></span>
                            <textarea rows="3" name="contents" required></textarea>
                        </div>
                    </div>

                    <div class="user__details">
                        <div class="input__box full agree">
                            <div class="checkbox">
                                <input type="checkbox" id="agree" />
                                <label for="agree">개인정보 처리방침 동의</label>
                            </div>
                            <a href="#agree-pop" class="link btn-agree-detail">자세히보기</a>
                        </div>
                    </div>

                    <div class="button">
                        <button type="submit" class="btn" id="btn-submit">
                            <span class="loading" style="display:none"><i class="fa fa-spin fa-spinner"></i></span>
                            <span class="text">문의하기</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<div class="dim-layer" id="agree-pop">
    <div class="dimBg"></div>
    <div id="layer2" class="pop-layer">
        <div class="pop-container">
            <div class="pop-contents">
                <h6 class="title MB20">개인정보 취급방침</h6>
                <p>회사는 상담을 위해 아래와 같은 개인정보를 수집하고 있습니다.</p>
                <ol class="--list-text MT20">
                    <li class="MB10">
                        <span>수집항목 :</span> (필수) 상담분야, 연락처 <br>
                        (선택) 기업명, 담당자명, 이메일, 예산범위, 문의내용
                    </li>
                    <li class="MB10">
                        <span>수집방법 : </span> 고객 직접 작성
                    </li>
                    <li class="MB10">
                        <span>이용 목적 :</span> 당사의 유선 상담을 희망하는 고객 대상 상담 진행
                    </li>
                    <li>
                        <span>보유 기간 :</span>회사는 이용 목적이 달성된 후 내규에 준하여 보관 및 파기합니다.
                    </li>
                </ol>
                <p class="small MT20">
                    * 위의 개인정보 수집, 이용에 대한 동의를 거부할 권리가 있습니다. <br>
                    그러나 동의를 거부하실 경우 본 페이지의 이용에 제한이 있습니다
                </p>

                <div class="btn-r">
                    <a href="#" class="btn-layerClose">Close</a>
                </div>
                <!--// content-->
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        mobileMenu();
        scrollAnimateMove();

        var giMenuDuration = 700;

        $('.btn-agree-detail').click(function(){
            var $href = $(this).attr('href');
            layer_popup($href);
        });

        $(".all-menu").click(function () {
            $(".nav-container").css({ 'display': 'block'});
            $(".nav-container").css({ 'left': '-100%'});
            $(".nav-container").animate({ left: '0'}, { duration: giMenuDuration});
            // $(".nav-container").addClass("toggle")
        });

        $(".nav-header").click(function () {
            $(".nav-container").css({ 'left': '-100%'});
            $(this).parent(".nav-container").animate({ duration: giMenuDuration});
            // $(".nav-container").css({ 'display': 'none'});

        });


        $('[data-btn="list-more"]').on('click', function(){
            var targetSelector = $(this).data('target');
            $(this).parent().toggleClass('open');
            $(targetSelector).toggleClass('open');
        });

        $(".menu-list").click(function() {
            var submenu = $(this).find(".list-hide");
            if($(submenu).is(":visible")){
                $(submenu).slideUp();
            }else{
                $(submenu).slideDown();
            }
        });

        $('body').on('keypress', '[data-regex="phone-number"]', function(e){
            if (e.which != 8 && e.which != 0 &&  e.which != 45 && (e.which < 48 || e.which > 57)) {
                e.preventDefault();
            }
        }).on('blur','[data-regex="phone-number"]', function(e){
            if($(this).val() == '') return;
            var transNum = $(this).val().regex('phone');
            if( transNum === false ) {
                alert('유효하지 않은 전화번호 입니다.');
                $(this).val("");
                $(this).focus();
                return;
            }
            else {
                $(this).val(transNum)
            }
        });

        $('body').on('blur', '[data-regex="email-address"]', function(e){
            if($(this).val() == '') return;
            var trans_num = $(this).val().regex('email');
            console.log(trans_num)
            if(! trans_num) {
                alert('유효하지 않은 이메일주소 입니다.');
                $(this).val("");
                $(this).focus();
            }
        });

        $('[data-form="request-form"]').on('submit',function(e) {
            e.preventDefault();

            if($('[name="type"]:checked').length === 0) {
                alert("상담 분야를 선택하세요");
                return;
            }

            if($('[name="phone"]').val().length === 0) {
                alert("연락처를 입력 하세요");
                $('[name="phone"]').focus();
                return;
            }


            if(! $('#agree').prop('checked')) {
                alert("개인정보 처리방침에 동의하세요");
                $('#agree').focus();
                return;
            }


            const formData = $('[data-form="request-form"]').serialize()

            $.ajax({
                url: "/request",
                type: "POST",
                data: formData,
                dataType: "json",
                beforeSend: function() {
                    $("#btn-submit").attr('disabled',true)
                    $('#btn-submit .text').hide()
                    $("#btn-submit .loading").show()
                },
                success: function() {
                    alert("상담 신청이 완료되었습니다.")

                    $("#btn-submit").removeAttr('disabled')
                    $('#btn-submit .text').show()
                    $("#btn-submit .loading").hide()

                    $('[data-form="request-form"]').reset()
                },
                error: function(err) {
                    var message = err?.responseJSON?.error ?? "상담 신청도중 오류가 발생하였습니다.\\n서버 관리자에게 문의하세요"

                    $("#btn-submit").removeAttr('disabled')
                    $('#btn-submit .text').show()
                    $("#btn-submit .loading").hide()
                    alert(message)

                },
                complete: function() {
                    $("#btn-submit").removeAttr('disabled')
                    $('#btn-submit .text').show()
                    $("#btn-submit .loading").hide()
                }
            })
        })
    });


    function scrollAnimateMove(){

        $('[data-button="btn-animate-move"]').on('click', function(e){
            e.preventDefault();
            var target =  $(this).attr("data-target");
            var position = $(target).offset();
            var targetOffset = $(this).attr("data-offset");

            console.log(position);
            console.log(targetOffset);

            if( targetOffset == null ){
                //console.log(null);
                $('html,body').animate({ scrollTop : position.top }, 500);

            } else {
                $('html,body').animate({ scrollTop : position.top - targetOffset  }, 500);

            }
        });

        return false;
    }

    function mobileMenu(){
        var burger =$('#burger'),
            nav    = $('#main-nav'),
            body    = $('body'),
            subMenu = $(".gnb-nav-wrap li a")

        burger.click(function(){
            $(this).toggleClass("is-open");
            nav.toggleClass("is-open");
            body.toggleClass("is-scroll");
        });

        subMenu.click(function(){
            burger.removeClass("is-open");
            nav.removeClass("is-open");
            body.removeClass("is-scroll");
        });
    }

    function layer_popup(el){

        var $el = $(el);		//레이어의 id를 $el 변수에 저장
        var isDim = $el.prev().hasClass('dimBg');	//dimmed 레이어를 감지하기 위한 boolean 변수

        isDim ? $('.dim-layer').fadeIn() : $el.fadeIn();

        $el.find('a.btn-layerClose').click(function(){
            isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
            return false;
        });

        $('.layer .dimBg').click(function(){
            $('.dim-layer').fadeOut();
            return false;
        });

    }




</script>


</div>
@@include("./include/footer.html")
@@include("./include/tail.html")