PageSourceSearch

https://durunubi.kr/koreatrail-introduction.do

html durunubi.kr collected 2026-10-01 14:12:39 UTC 144,185 bytes, 3,386 lines download raw bytes

1
2
3
4
5
6
7
8
9    
10    
11
12
13
14
15
16
17
18
19
20<!DOCTYPE html>
21<html lang="ko">
22<head>
23    <meta charset="UTF-8">
24    <meta http-equiv="X-UA-Compatible" content="IE=edge">
25    <meta name="viewport" content="width=device-width, initial-scale=1.0">
26    <meta name="format-detection" content="telephone=no"> <!-- IOS 사파리 숫자 자동 링크 제거 -->
27
28    
29    
30    
31
32    
33    <meta property="og:type" content="website" />
34
35    <meta name="naver-site-verification" content="6c2dc9e621ce849aa1855a9dbdf0e57a6cef97fa" />
36
37    
38    
39    
40        <title>코리아둘레길 소개 < 두루누비</title>
41        <meta property="og:title" content="코리아둘레길 소개" />
42    
43
44    
45    
46    
47        <meta property="og:description" content="우리나라 외곽을 하나로 연결하는 약 4,500km의 초장거리 걷기여행길" />
48    
49
50    
51    
52    
53
54    <meta property="og:url" content="https://durunubi.kr:443/koreatrail-introduction.do?&step1=kt&step2=intro" />
55    
56
57    
58    
59        <meta property="og:image" content="/durunubi_2022/assets/images/logo.png"/>
60    
61    
62
63    <link rel="shortcut icon" href="/images/favicon.ico">
64
65    <link rel="stylesheet" href="/durunubi_2024/assets/css/bootstrap.min.css">
66    <link rel="stylesheet" href="/durunubi_2024/assets/css/swiper.css">
67
68    
68<script src="/durunubi_2024/assets/js/jquery-3.6.0.min.js"></script>
68
69    
69<script src="/durunubi_2024/assets/js/bootstrap.bundle.min.js"></script>
69
70    
70<script src="/durunubi_2024/assets/js/swiper-bundle11.min.js"></script>
70
71    
71<script src="/assets/javascripts/login.js?version=2"></script>
71
72    
72<script src="/assets/javascripts/moment.js"></script>
72
73    
73<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.16/vue.js" integrity="sha512-LnT1nhi1a/7Iu/cSAwUdqMMTSrh6WXC15R9Tge+5IY4EanqNDRuSPy0Sf9ls2qE1EnKmfb1IZYTWL/WHu/40VA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
73
74
75    <style>
76
77        .user-skip {position:relative; z-index:3000}
78        .user-skip a {position:absolute;top:-200px;left:0;width:140px;text-align:center;border: 1px solid #fb0685;background-color:#000}
79        .user-skip a:focus { top:0; z-index:1000; text-decoration:none;}
80        .user-skip span { display:inline-block; padding:2px 6px 0 0; font-size:14px; line-height:20px; color:#fff; white-space:nowrap; }
81
82        .skip-item {opacity:0; z-index:3000}
83        .skip-item:focus-within{opacity:1;}
84        .skip-item a {text-align:center;border: 1px solid #fb0685;background-color:#000}
85        .skip-item a:focus { top:0; z-index:1000; text-decoration:none;}
86        .skip-item span { display:inline-block; padding:2px 6px 0 0; font-size:14px; line-height:20px; color:#fff; white-space:nowrap; }
87
88
89        main:focus {outline: 0;}
90    </style>
91
92    
93        
93<script>
94            function focusOnContents() {
95                var target = document.getElementsByTagName("main")[0];
96                target.setAttribute("tabindex", "0");
97                target.focus();
98                target.setAttribute("tabindex", "-1");
99            }
100        </script>
100
101    
102
103</head>
104
105<body>
106
107<div class="user-skip" id="skip-navi">
108    
109    
110        <a href="javascript:focusOnContents();"><span>본문 바로가기</span></a>
111    
112    <a href="#main-menu"><span>메인 메뉴 바로가기</span></a>
113</div>
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130<script>
131    function loginEnter(){
132        /*비밀번호 입력 input 창에서 엔터 입력시 동작*/
133
134        // if (event.keyCode === 13) {
135        //     /*로그인 버튼 클릭*/
136        //     $("#loginSubmitButton").click();
137        // }
138
139        //key가 눌렸을 경우
140        document.onkeypress = function (e) {
141            //key 초기화
142            var result = "";
143
144            if (typeof(e) != "undefined") result = e.which;
145            else result = event.keyCode;
146            if (result == 13) {
147                //엔터 입력시 실행 함수
148                $("#loginSubmitButton").click();
149            }
150        }
151    }
152
153    function adminLoginEnter(){
154        /*비밀번호 입력 input 창에서 엔터 입력시 동작*/
155
156        // if (event.keyCode === 13) {
157        //     /*로그인 버튼 클릭*/
158        //     $("#loginSubmitButton").click();
159        // }
160
161        //key가 눌렸을 경우
162        document.onkeypress = function (e) {
163            //key 초기화
164            var result = "";
165
166            if (typeof(e) != "undefined") result = e.which;
167            else result = event.keyCode;
168            if (result == 13) {
169                //엔터 입력시 실행 함수
170                $("#adminLoginSubmitButton").click();
171            }
172        }
173    }
174
175
176    // 2020-08-24 추가 / 네이버 로그인
177    $(function() {
178        $("#naverLogin").on("click", function() {
179            window.name = "snsParentWindow"    // ie에서 opnner 미인식으로 보완
180            window.open('/api/sns/naver.do?type=login','navLogin','width=850, height=650, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no');
181        });
182    });
183
184
185    // 2020-08-24 추가 / 카카오 로그인
186    $(function() {
187        $("#kakaoLogin").on("click", function() {
188            window.name = "snsParentWindow"    // ie에서 opnner 미인식으로 보완
189            window.open('/api/sns/kakao.do?type=login','kaoLogin','width=850, height=650, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no');
190        });
191    });
192
193
194</script>
194
195
196
197<div id="userLogin" class="modal fade" data-backdrop="static" tabindex="-1">
198    <div class="modal-dialog modal-dialog-centered">
199        <div class="modal-content shadow">
200            <div class="modal-header">
201                
202                <button type="button" class="close" data-dismiss="modal" aria-label="닫기" style="z-index: 5">
203                    <span aria-hidden="true"></span>
204                </button>
205            </div>
206            <div class="modal-body">
207
208                <div class="text-center">
209                    <span class="d-logo mb-5"><span>두루누비</span></span>
210                </div>
211
212                <form method="POST" action="/api/auth/login" id="loginForm">
213                    <div id="loginNormal">
214                        <div class="form-group letter-1 mb-4 pb-2">
215                            <label for="id1" class="h5 font-weight-normal">아이디</label>
216                            <input type="text" name="principal" class="form-control letter-1" id="id1" placeholder="아이디를 입력하세요." title="아이디를 입력하세요.">
217                        </div>
218
219                        <div class="form-group letter-1 mb-4 pb-2">
220                            <label for="pw1" class="h5 font-weight-normal">비밀번호</label>
221                            <input type="password" name="credencials" class="form-control letter-1" id="pw1" placeholder="비밀번호를 입력하세요." title="비밀번호를 입력하세요." onkeypress="loginEnter(event)">
222                        </div>
223
224                        <div class="form-group d-flex align-items-center justify-content-between letter-1 mb-4">
225
226                            <div class="custom-control custom-checkbox">
227                                <input type="checkbox" class="custom-control-input" id="customCheck1" name="remember-me">
228                                <label class="custom-control-label" for="customCheck1">로그인 유지</label>
229                            </div>
230
231                        </div>
232
233                        <div class="form-group letter-1 mb-5">
234                            <button type="button" class="btn btn-success btn-block" onclick="login()" id="loginSubmitButton">로그인</button>
235                        </div>
236                    </div>
237                </form>
238
239
240                <h5 class="text-center S-Core letter-1 mb-4">SNS 계정으로 로그인하기</h5>
241
242                <div class="text-center mb-4">
243                    <button type="button" class="btn btn-link p-0 rounded-0" id="naverLogin" title="새 창 열림"><i class="icon icon-login-naver" title="네이버 로그인"></i></button>
244                    <button type="button" class="btn btn-link p-0 rounded-0" id="kakaoLogin" title="새 창 열림"><i class="icon icon-login-kakao" title="카카오 로그인"></i></button>
245                </div>
246
247            </div>
248            
249        </div>
250    </div>
251</div>
252
253
254
255
256
257
258
259
260
261
262
263
264<script>
265    $(document).ready(function() {
266
267        //1. 회원 약관 호출
268        //clauseCall(1, 'clause_id1', '#more-set-terms');
269
270        $('#more-set-terms').on('show.bs.modal', function() {
271            var scrollLock = false;
272            var $modal = $('#more-set-terms');
273
274            $modal.on('keydown' , function(e) {
275                if(e.keyCode === 34 || e.keyCode === 40) {
276
277                    if(scrollLock === true) {
278                        return;
279                    }
280
281                    scrollLock = true;
282
283                    var container = $("#clause_id1");
284                    var scrollSize = container.scrollTop() + 160;
285
286                    var timeoutMill = 200;
287                    container.animate({scrollTop: scrollSize}, timeoutMill);
288
289                    setTimeout(function () {
290                        scrollLock = false;
291                    }, timeoutMill);
292                }
293
294                if(e.keyCode === 33 || e.keyCode === 38) {
295
296                    if(scrollLock === true) {
297                        return;
298                    }
299
300                    scrollLock = true;
301
302                    var container = $("#clause_id1");
303                    var scrollSize = container.scrollTop() - 160;
304
305                    var timeoutMill = 200;
306                    container.animate({scrollTop: scrollSize}, timeoutMill);
307
308                    setTimeout(function () {
309                        scrollLock = false;
310                    }, timeoutMill);
311                }
312            });
313        });
314
315        $('#more-set-terms').on('hide.bs.modal', function() {
316            var $modal = $('#more-set-terms');
317            $modal.off('keydown');
318        });
319    });
320</script>
320
321
322<!-- 회원약관 처리방침 모달 Modal web-->
323
324<!--//// 회원약관 처리방침 자세히보기 Modal -->
325
326<!-- 2022개편 회원약관 처리방침 모달 web -->
327<div id="more-set-terms" class="modal fade" tabindex="-1">
328    <div class="modal-dialog modal-lg modal-dialog-scrollable">
329        <div class="modal-content shadow">
330            <div class="modal-header pb-20">
331                <div class="clearfix position-relative">
332                    <h2 class="mb-0">회원약관</h2>
333                </div>
334                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
335                    <span aria-hidden="true"></span>
336                </button>
337            </div>
338            <div class="modal-body mt-40 pb-32" id="clause_id1">
339
340            </div>
341
342        </div>
343    </div>
344</div>
345
346
347
348
349
350
351
352
353
354
355
356
357
358<script>
359    $(document).ready(function () {
360        //DMZ 테마노선 약관 호출
361        //clauseCall(4, 'clause_id4', 'more-set-privacy-dmz');
362    });
363
364</script>
364
365
366<div id="more-set-privacy-dmz" class="modal fade" tabindex="-1">
367    <div class="modal-dialog modal-lg modal-dialog-scrollable">
368        <div class="modal-content shadow">
369            <div class="modal-header pb-20">
370                <div class="clearfix position-relative">
371                    <h2 class="mb-0">개인정보 처리방침</h2>
372                </div>
373                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
374                    <span aria-hidden="true"></span>
375                </button>
376            </div>
377            <div class="modal-body mt-40 pb-32" id="clause_id4">
378            </div>
379        </div>
380    </div>
381</div>
382
383
384
385
386
387
388
389
390
391<script>
392    $(document).ready(function() {
393
394        //개인위치정보 처리방침 호출
395        //clauseCall(5, 'clause_id5', '#more-set-privacy')
396
397        $('#more-set-locprivacy').on('show.bs.modal', function() {
398            var scrollLock = false;
399            var $modal = $('#more-set-privacy');
400
401            $modal.on('keydown' , function(e) {
402                if(e.keyCode === 34 || e.keyCode === 40) {
403
404                    if(scrollLock === true) {
405                        return;
406                    }
407
408                    scrollLock = true;
409
410                    var container = $("#clause_id5");
411                    var scrollSize = container.scrollTop() + 160;
412
413                    var timeoutMill = 200;
414                    container.animate({scrollTop: scrollSize}, timeoutMill);
415
416                    setTimeout(function () {
417                        scrollLock = false;
418                    }, timeoutMill);
419                }
420
421                if(e.keyCode === 33 || e.keyCode === 38) {
422
423                    if(scrollLock === true) {
424                        return;
425                    }
426
427                    scrollLock = true;
428
429                    var container = $("#clause_id5");
430                    var scrollSize = container.scrollTop() - 160;
431
432                    var timeoutMill = 200;
433                    container.animate({scrollTop: scrollSize}, timeoutMill);
434
435                    setTimeout(function () {
436                        scrollLock = false;
437                    }, timeoutMill);
438                }
439            });
440        });
441
442        $('#more-set-privacy').on('hide.bs.modal', function() {
443            var $modal = $('#more-set-privacy');
444            $modal.off('keydown');
445        });
446    });
447
448</script>
448
449
450<div id="more-set-locprivacy" class="modal fade" tabindex="-1">
451    <div class="modal-dialog modal-lg modal-dialog-scrollable">
452        <div class="modal-content shadow">
453            <div class="modal-header pb-20">
454                <div class="clearfix position-relative">
455                    <h2 class="mb-0">개인위치정보 처리방침</h2>
456                </div>
457                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
458                    <span aria-hidden="true"></span>
459                </button>
460            </div>
461            <div class="modal-body mt-40 pb-32" id="clause_id5">
462
463
464            </div>
465
466        </div>
467    </div>
468</div>
469
470
471
472
473
474
475
476
477
478<script>
479    $(document).ready(function () {
480        //DMZ 개인위치정보 처리방침 호출
481        //clauseCall(6, 'clause_id6', 'more-set-locprivacy-dmz');
482
483        $('#more-set-locprivacy-dmz').on('show.bs.modal', function() {
484            var scrollLock = false;
485            var $modal = $('#more-set-locprivacy-dmz');
486
487            $modal.on('keydown' , function(e) {
488                if(e.keyCode === 34 || e.keyCode === 40) {
489
490                    if(scrollLock === true) {
491                        return;
492                    }
493
494                    scrollLock = true;
495
496                    var container = $("#clause_id6");
497                    var scrollSize = container.scrollTop() + 160;
498
499                    var timeoutMill = 200;
500                    container.animate({scrollTop: scrollSize}, timeoutMill);
501
502                    setTimeout(function () {
503                        scrollLock = false;
504                    }, timeoutMill);
505                }
506
507                if(e.keyCode === 33 || e.keyCode === 38) {
508
509                    if(scrollLock === true) {
510                        return;
511                    }
512
513                    scrollLock = true;
514
515                    var container = $("#clause_id6");
516                    var scrollSize = container.scrollTop() - 160;
517
518                    var timeoutMill = 200;
519                    container.animate({scrollTop: scrollSize}, timeoutMill);
520
521                    setTimeout(function () {
522                        scrollLock = false;
523                    }, timeoutMill);
524                }
525            });
526        });
527
528        $('#more-set-locprivacy').on('hide.bs.modal', function() {
529            var $modal = $('#more-set-locprivacy-dmz');
530            $modal.off('keydown');
531        });
532    });
533
534</script>
534
535
536<div id="more-set-locprivacy-dmz" class="modal fade" tabindex="-1">
537    <div class="modal-dialog modal-lg modal-dialog-scrollable">
538        <div class="modal-content shadow">
539            <div class="modal-header pb-20">
540                <div class="clearfix position-relative">
541                    <h2 class="mb-0">개인위치정보 처리방침</h2>
542                </div>
543                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
544                    <span aria-hidden="true"></span>
545                </button>
546            </div>
547            <div class="modal-body mt-40 pb-32" id="clause_id6">
548            </div>
549        </div>
550    </div>
551</div>
552
553
554
555
556
557
558
559
560
561
562
563<script>
564
565    $(document).ready(function() {
566
567        //3. 위치기반서비스 약관 불러오기
568        //clauseCall(3, "clause_id3", '#more-set-location')
569
570        $('#more-set-location').on('show.bs.modal', function() {
571            var scrollLock = false;
572            var $modal = $('#more-set-location');
573
574            $modal.on('keydown' , function(e) {
575                if(e.keyCode === 34 || e.keyCode === 40) {
576
577                    if(scrollLock === true) {
578                        return;
579                    }
580
581                    scrollLock = true;
582
583                    var container = $("#clause_id3");
584                    var scrollSize = container.scrollTop() + 160;
585
586                    var timeoutMill = 200;
587                    container.animate({scrollTop: scrollSize}, timeoutMill);
588
589                    setTimeout(function () {
590                        scrollLock = false;
591                    }, timeoutMill);
592                }
593
594                if(e.keyCode === 33 || e.keyCode === 38) {
595
596                    if(scrollLock === true) {
597                        return;
598                    }
599
600                    scrollLock = true;
601
602                    var container = $("#clause_id3");
603                    var scrollSize = container.scrollTop() - 160;
604
605                    var timeoutMill = 200;
606                    container.animate({scrollTop: scrollSize}, timeoutMill);
607
608                    setTimeout(function () {
609                        scrollLock = false;
610                    }, timeoutMill);
611                }
612            });
613        });
614
615        $('#more-set-location').on('hide.bs.modal', function() {
616            var $modal = $('#more-set-location');
617            $modal.off('keydown');
618        });
619
620    });
621</script>
621
622
623<!-- 2022개편 위치기반서비스 이용약관 모달 web -->
624<div id="more-set-location" class="modal fade" tabindex="-1">
625    <div class="modal-dialog modal-lg modal-dialog-scrollable">
626        <div class="modal-content shadow">
627            <div class="modal-header pb-20">
628                <div class="clearfix position-relative">
629                    <h2 class="mb-0">위치기반서비스 이용약관</h2>
630                </div>
631                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
632                    <span aria-hidden="true"></span>
633                </button>
634            </div>
635            <div class="modal-body mt-40 pb-32" id="clause_id3">
636
637            </div>
638
639        </div>
640    </div>
641</div>
642
643
644
645
646
647
648
649
650<script>
651    /*모든 페이지에서 poi 버튼 호출 시 실행되는 함수*/
652    var poiClickPageCall = function (type, poiIdx) {
653        //TODO : not yet
654        //type : 호출하는 poi 타입. 타입은 정의하여 다시 전달드리겠습니다 (1-3-4P_action-follow-morecontents 참조)
655        //  "dot_poi" 형태로 호출하시면 관리자가 등록한 POI
656        //  "wpoint_poi" 호 호출하면 유저가 삽입한 컨텐츠 poi
657        //poiIdx : 선택한 점형정보 인덱스 값입니다.
658
659        var data = poiGlobal[poiIdx];
660        $('#poiType').html('');
661
662        $('#poiTitle').html('');
663        $('#poiTitle').show();
664
665        $('#poiBasicContents').html('');
666        $('#poiThumbnail').html('');
667        $('#poiContetns').html('');
668
669
670        /*poiGlobal 은 POI 정보가 저장되는 전역변수 -  네이버 , 다음맵 호출시 데이터 참조하고 있음에 공통 적용*/
671
672        if(data.type === "accommodations"){
673            $('#poiType').html('숙박');
674        }else if(data.type === "touristSpots"){
675            $('#poiType').html('관광지');
676        }else if(data.type === "facilities"){
677            $('#poiType').html('문화시설');
678        }else if(data.type === "restaurant"){
679            $('#poiType').html('음식점');
680        }else if(data.type === "tourist"){
681            $('#poiType').html('안내소');
682        }else if(data.type === "toilet"){
683            $('#poiType').html('화장실');
684        }else if(data.type === "water"){
685            $('#poiType').html('식수');
686        }else if(data.type === "store"){
687            $('#poiType').html('매점');
688        }else if(data.type === "dangerSignal"){
689            $('#poiType').html('위험구간');
690            $('#poiTitle').hide();
691        }else if(data.type === "necessariness"){
692            $('#poiType').html('필수 경유지');
693            $('#poiTitle').hide();
694            data.content = '코스 내에는 총 7개의 필수 경유지가 있으며 3개 이상 통과 시 완보 처리됩니다.</br>
694역방향 / 정방향으로 걸으셔도 무방합니다.'
695        }else if(data.type === "rest"){
696            $('#poiType').html(data.title);
697            $('#poiTitle').hide();
698        }
699        else{
700            $('#poiType').html(data.title);
701            $('#poiTitle').hide();
702        }
703
704        //팝업 제목 설정
705        if (data.title == '' || data.title == null || data.title == undefined) {
706            $('#poiTitle').html('');
707        } else {
708            $('#poiTitle').html(data.title);
709        }
710
711        // 기본 정보 셋팅
712        let basicContents = '';
713        if (data.basic_content) {
714            basicContents += "<li> 주소 : " + data.basic_content + "</li>";
715        }
716        if(data.usetime){
717            basicContents += "<li> 운영시간 : " + data.usetime + "</li>"
718        }
719        $('#poiBasicContents').html(basicContents);
720
721
722        if (data.thumbnail_src == '' || data.thumbnail_src == null || data.thumbnail_src == undefined) {
723            $('#poiThumbnail').html('');
724        } else {
725            $('#poiThumbnail').html("<img src='" + data.thumbnail_src + "' class='img-fluid' alt='' />");
726        }
727
728
729        //소개
730        if (data.content == '' || data.content == null || data.content == undefined) {
731            $('#poiContetns').html('');
732        } else {
733            data.content = data.content.replace(/(?:\r\n|\r|\n)/g, '<br />');
734            $('#poiContetns').html(data.content);
735        }
736
737        $('#hiddenPoiClick').click();
738    };
739
740    /*사용자 poi 버튼 호출 시 실행되는 함수*/
741    var userPoiClickPageCall = function (type, seq) {
742        //TODO : not yet
743        //type : 호출하는 poi 타입. 타입은 정의하여 다시 전달드리겠습니다 (1-3-4P_action-follow-morecontents 참조)
744        //  "dot_poi" 형태로 호출하시면 관리자가 등록한 POI
745        //  "wpoint_poi" 호 호출하면 유저가 삽입한 컨텐츠 poi
746        //poiIdx : 선택한 점형정보 인덱스 값입니다.
747        $('#poiUserType').html('');
748        $('#poiUserTitle').html('');
749        $('#poiUserThumbnail').html('');
750        $('#poiUserBasicContents').html('');
751
752
753        var data = userPoiArr[seq];
754
755
756        /*poiGlobal 은 POI 정보가 저장되는 전역변수 -  네이버 , 다음맵 호출시 데이터 참조하고 있음에 공통 적용*/
757        if (data.title == '' || data.title == null || data.title == undefined) {
758            $('#poiUserTitle').html('');
759        } else {
760            $('#poiUserTitle').html(data.title);
761        }
762
763        if(data.type == 'PHOTO'){
764            $('#poiUserType').html('사진');
765            var path = "/editImgUp.do?filePath=" + data.data;
766            var contents = "" +
767                '<img alt="" class="img-responsive" src="' + path + '" onerror="this.src=\'/images/bg_img.png\'">';
768            $('#poiUserThumbnail').html(contents);
769        }else if(data.type == 'MEMO'){
770            $('#poiUserType').html('메모');
771        }else if(data.type == 'VOICE'){
772            $('#poiUserType').html('음성녹음');
773            var path = "/getVideo.do?save_path=" + data.data;
774            var contents = "" +
775                "<audio src='"+path+"' style='width:100%;' controls>"
776            $('#poiUserThumbnail').html(contents);
777        }else if(data.type == 'WAY'){
778            $('#poiUserType').html('필수 경유지');
779            data.content = '코스 내에는 총 7개의 필수 경유지가 있으며 3개 이상 통과 시 완보 처리됩니다.</br>
779역방향 / 정방향으로 걸으셔도 무방합니다.'
780        }
781
782        if (data.content == '' || data.content == null || data.content == undefined) {
783            $('#poiUserBasicContents').html('');
784        } else {
785            $('#poiUserBasicContents').html("<li>" + data.content + "</li>");
786        }
787
788
789        $('#hiddenUserPoiClick').click();
790    };
791</script>
791
792
793
794<input type="hidden" id="hiddenPoiClick" data-toggle="modal" data-target="#mapInformationModal">
795<!-- POI 클릭 모달 Modal -->
796<div id="mapInformationModal" class="modal fade" tabindex="-1" style="z-index: 1051">
797    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
798        <div class="modal-content shadow">
799            <div class="modal-header mb-lg-5 mb-0">
800                <div class="clearfix position-relative">
801                    <h2 class="mb-0" id="poiType">여행지 정보</h2>
802                </div>
803                <button type="button" class="close" data-dismiss="modal" aria-label="닫기">
804                    <span aria-hidden="true"></span>
805                </button>
806            </div>
807            <div class="modal-body">
808
809
810                <div class="imgs mb-16" id="poiThumbnail">
811                    썸네일 이미지
812                </div>
813
814                <p></p>
815
816                <h4 id="poiTitle"> 타이틀 </h4>
817
818                <ul class="b mb-3" id="poiBasicContents">
819                    주소
820                </ul>
821
822                <p id="poiContetns"> 컨텐츠 </p>
823
824
825            </div>
826
827
828
829        </div>
830    </div>
831</div>
832
833
834
835
836
837
838
839
840<!-- // 지역문화행사 -->
841
842<input type="hidden" id="hiddenUserPoiClick" data-toggle="modal" data-target="#poiUserModal">
843<!-- POI 클릭 모달 Modal -->
844
845
846
847<div id="poiUserModal" class="modal fade" tabindex="-1" style="z-index: 1051">
848    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
849        <div class="modal-content shadow">
850            <div class="modal-header mb-lg-5 mb-0">
851                <div class="clearfix position-relative">
852                    <h2 class="mb-0" id="poiUserType">여행지 정보</h2>
853                </div>
854                <button type="button" class="close" data-dismiss="modal" aria-label="닫기">
855                    <span aria-hidden="true"></span>
856                </button>
857            </div>
858            <div class="modal-body">
859
860
861                <div class="imgs mb-16" id="poiUserThumbnail">
862
863                </div>
864
865                <p></p>
866
867                <h4 id="poiUserTitle"></h4>
868
869                <ul class="b mb-3" id="poiUserBasicContents">
870                </ul>
871
872            </div>
873
874
875
876        </div>
877    </div>
878</div>
879
880<!-- // 지역문화행사 -->
881
882
883
884
885
886
887
888
889<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
889
890
891<script>
892    $(document).ready(
893        function(){
894            Kakao.init('a3673d4ff6136ff193e82a4c59866fb2');
895        }
896    );
897
898    /*카카오스토리 공유*/
899    function kakaostoryShareClick() {
900        window.open('https://story.kakao.com/s/share?url=' +window.location.href, 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;
901    }
902
903
904    function sendSns(sns, url, txt)
905    {
906        var o;
907        var _url = encodeURIComponent(url);
908        var _txt = encodeURIComponent(txt);
909        var _br  = encodeURIComponent('\r\n');
910
911        url=window.location.href;
912        // url='http://www.durunubi.kr';
913        switch(sns)
914        {
915            case 'facebook':
916                o = {
917                    method:'popup',
918                    url:'http://www.facebook.com/sharer/sharer.php?u=' + encodeURI(url) + 't=title'
919                };
920                break;
921
922            case 'twitter':
923                o = {
924                    method:'popup',
925                    url:'http://twitter.com/intent/tweet?text=' + _txt + '&url=' + _url
926                };
927                break;
928
929            case 'me2day':
930                o = {
931                    method:'popup',
932                    url:'http://me2day.net/posts/new?new_post[body]=' + _txt + _br + _url + '&new_post[tags]=epiloum'
933                };
934                break;
935
936            case 'kakaotalk':
937                o = {
938                    method:'web2app',
939                    param:'sendurl?msg=' + _txt + '&url=' + _url + '&type=link&apiver=2.0.1&appver=2.0&appid=dev.epiloum.net&appname=' + encodeURIComponent('Epiloum 개발노트'),
940                    a_store:'itms-apps://itunes.apple.com/app/id362057947?mt=8',
941                    g_store:'market://details?id=com.kakao.talk',
942                    a_proto:'kakaolink://',
943                    g_proto:'scheme=kakaolink;package=com.kakao.talk'
944                };
945                break;
946
947            case 'kakaostory':
948                o = {
949                    method:'web2app',
950                    param:'posting?post=' + _txt + _br + _url + '&apiver=1.0&appver=2.0&appid=dev.epiloum.net&appname=' + encodeURIComponent('Epiloum 개발노트'),
951                    a_store:'itms-apps://itunes.apple.com/app/id486244601?mt=8',
952                    g_store:'market://details?id=com.kakao.story',
953                    a_proto:'storylink://',
954                    g_proto:'scheme=kakaolink;package=com.kakao.story'
955                };
956                break;
957
958            case 'band':
959                o = {
960                    method:'web2app',
961                    param:'create/post?text=' + _txt + _br + _url,
962                    a_store:'itms-apps://itunes.apple.com/app/id542613198?mt=8',
963                    g_store:'market://details?id=com.nhn.android.band',
964                    a_proto:'bandapp://',
965                    g_proto:'scheme=bandapp;package=com.nhn.android.band'
966                };
967                break;
968
969            default:
970                alert('지원하지 않는 SNS입니다.');
971                return false;
972        }
973
974        switch(o.method)
975        {
976            case 'popup':
977                window.open(o.url);
978                break;
979
980            case 'web2app':
981                if(navigator.userAgent.match(/android/i))
982                {
983                    // Android
984                    setTimeout(function(){ location.href = 'intent://' + o.param + '#Intent;' + o.g_proto + ';end'}, 100);
985                }
986                else if(navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i))
987                {
988                    // Apple
989                    setTimeout(function(){ location.href = o.a_store; }, 200);
990                    setTimeout(function(){ location.href = o.a_proto + o.param }, 100);
991                }
992                else
993                {
994                    alert('이 기능은 모바일에서만 사용할 수 있습니다.');
995                }
996                break;
997        }
998    }
999
1000    /*클립보드 복사*/
1001    function clipboard(str) {
1002        $('#clip_target').val(str);
1003        $('#clip_target').select();
1004
1005        prompt('컨트롤키와 C 키(Ctrl + C)를 동시에 눌러서 URL 을 복사하세요',window.location.href)
1006        try {
1007            var successful = document.execCommand('copy');
1008            // alert('클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요.');
1009        } catch (err) {
1010            alert('이 브라우저는 지원하지 않습니다.');
1011        }
1012    }
1013
1014
1015    //<![CDATA[
1016    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
1017    // Kakao.init('f5cdf39bfbc2024e1a7a4e9f1c32dcb3');
1018    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
1019    function sendLink() {
1020        var description = $('#opdescription').val;
1021        var title = $('#optitle').val();
1022        var image= $('#opimage').val;
1023        var url=window.location.href;
1024
1025        if(window.location.href.indexOf('dmz') > -1 ){
1026            //dmz는 앱으로 볼수 없어 앱 버튼을 제거
1027            Kakao.Link.sendDefault({
1028                objectType: 'feed',
1029                content: {
1030                    title: title,
1031                    description: '',
1032                    imageUrl: '',
1033                    link: {
1034                        mobileWebUrl: encodeURI(url),
1035                        webUrl: encodeURI(url)
1036                    }
1037                },
1038                social: {
1039
1040                },
1041                buttons: [
1042                    {
1043                        title: '웹으로 보기',
1044                        link: {
1045                            mobileWebUrl: url,
1046                            webUrl: url
1047                        }
1048                    }
1049                ]
1050            });
1051        }else{
1052            Kakao.Link.sendDefault({
1053                objectType: 'feed',
1054                content: {
1055                    title: title,
1056                    description: '',
1057                    imageUrl: '',
1058                    link: {
1059                        mobileWebUrl: encodeURI(url),
1060                        webUrl: encodeURI(url)
1061                    }
1062                },
1063                social: {
1064
1065                },
1066                buttons: [
1067                    {
1068                        title: '웹으로 보기',
1069                        link: {
1070                            mobileWebUrl: url,
1071                            webUrl: url
1072                        }
1073                    },
1074                    {
1075                        title: '앱으로 보기',
1076                        link: {
1077                            mobileWebUrl: url,
1078                            webUrl: url
1079                        }
1080                    }
1081                ]
1082            });
1083        }
1084
1085    }
1086    //]]>
1087
1088    function shareStory() {
1089        var url=window.location.href;
1090        var title = $('#optitle').val();
1091        Kakao.Story.share({
1092            url: url,
1093            text: title
1094        });
1095    }
1096
1097</script>
1097
1098
1099
1100<input type="hidden" id="optitle" value="코리아둘레길 소개"/>
1101<input type="hidden" id="opdescription" value="우리나라 외곽을 하나로 연결하는 약 4,500km의 초장거리 걷기여행길"/>
1102<input type="hidden" id="opimage" value="/editImgUp.do?filePath="/>
1103
1104<input type="hidden" id="hiddenShareClick" data-toggle="modal" data-target="#shareModal">
1105<!-- 공유 변경 안내 Modal -->
1106<!-- Share Modal -->
1107<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
1108    <div class="modal-dialog modal-sm" role="document">
1109        <div class="modal-content">
1110            <div class="modal-header bg-color-gray-light none-border-bottom">
1111                <button type="button" class="close" data-dismiss="modal"><span class="closed"><span>닫기</span></span></button>
1112                <h6 class="modal-title text-primary bold text-center">공유하기</h6>
1113            </div>
1114            <div class="modal-body">
1115                <h6 class="text-center mb-30">공유하실 SNS를 선택해주세요.</h6>
1116
1117                
1117<script>
1118                    /* $(document).ready(function () {
1119                             var text;
1120                             text = "<a class=\"pl-2 pr-2 fb-xfbml-parse-ignore\" title=\"페이스북 공유하기\"  data-href=\""+encodeURIComponent(window.location.href)+"\" data-layout=\"button\" data-size=\"small\" data-mobile-iframe=\"false\" target=\"_blank\" href=\"https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"\" onClick=\"window.open(this.href, '', 'width=400, height=600'); return false;\">\n" +
1121                                 "                        <i class=\"icon-facebook\"></i>\n" +
1122                                 "                    </a>"
1123                             $("#fb_insert").prepend(text);
1124                     });*/
1125                </script>
1125
1126                <div class="text-center mb-30">
1127                    
1128
1129                    
1130
1131
1132                    
1133
1134                    <a href="#" class="pl-2 pr-2" title="카카오톡 공유하기" onclick="sendLink()">
1135                        <i class="icon-kakao"></i>
1136                    </a>
1137                    <a href="#" class="pl-2 pr-2" title="카카오 스토리 공유하기"  onclick="shareStory()">
1138                        <i class="icon-story"></i>
1139                    </a>
1140                    <a href="#" class="pl-2 pr-2" title="URL 공유하기" onclick="clipboard()">
1141                        <i class="icon-url"></i>
1142                    </a>
1143                </div>
1144
1145                <!--
1146                <div class="text-center mb-30">
1147                    <button type="button" class="btn btn-primary btn-line btn-small" data-dismiss="modal">확인</button>
1148                </div>
1149                -->
1150
1151            </div>
1152
1153        </div>
1154    </div>
1155</div>
1156
1157
1158
1159
1160
1161
1162
1163<div class="modal fade " id="app_QRcode" tabindex="-1">
1164	<div class="modal-dialog" role="document">
1165		<div class="modal-content">
1166			<div class="modal-header">
1167				<div class="clearfix position-relative">
1168					<h3 class="mb-0">앱 다운로드</h3>
1169				</div>
1170				<button type="button" class="close" data-dismiss="modal" aria-label="닫기">
1171					<span aria-hidden="true"></span>
1172				</button>
1173			</div>
1174			<div class="modal-body">
1175				<h5 class="mt-8 mb-20 text-center">여행을 즐기는 또 다른 방법<br>두루누비 APP</h5>
1176				<p class="text-center text-muted mb-30">
1177					
1178					코스 안내부터 여행기록까지 가능한  APP을 다운로드 받아보세요.<br>아래 QR코드를 휴대폰 카메라로 찍으시면 다운로드 가능합니다.
1179				</p>
1180				<div class="row">
1181					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
1182						<img alt="두루누비(코리아둘레길) 앱(안드로이드) 다운로드 - https://play.google.com/store/apps/details?id=kr.durunubi" src="/images/android_qr.png" class="pull-right" style="max-width:100%">
1183					</div>
1184					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
1185						<img alt="두루누비(코리아둘레길) 앱(IOS) 다운로드 - https://apps.apple.com/us/app/%EB%91%90%EB%A3%A8%EB%88%84%EB%B9%84-%EC%BD%94%EB%A6%AC%EC%95%84%EB%91%98%EB%A0%88%EA%B8%B8/id1226279088?l=ko" src="/images/ios_qr.png" class="pull-left" style="max-width:100%">
1186					</div>
1187				</div>
1188				<div class="row mb-40">
1189					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center text-primary">
1190						<span style="width:175px; max-width:100%; display:inline-block" class="pull-right">[Android]</span>
1191
1192					</div>
1193					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center text-primary">
1194						<span style="width:175px; max-width:100%; display:inline-block" class="pull-left">[IOS]</span>
1195					</div>
1196				</div>
1197				<p class="text-center text-muted mb-15">
1198					
1199					* Android 6.0 / iOS 12 이상 버젼 지원
1200				</p>
1201			</div>
1202		</div>
1203	</div>
1204</div>
1205
1206
1207
1208
1209
1210<div id="imageViewModal" class="modal fade" tabindex="-1">
1211    <div class="modal-dialog modal-lg modal-dialog-scrollable">
1212        <div class="modal-content shadow">
1213            <div class="modal-header">
1214                <h2>&nbsp;</h2>
1215                <button type="button" class="close focus-inset" data-dismiss="modal" aria-label="닫기">
1216                    <span aria-hidden="true"></span>
1217                </button>
1218            </div>
1219            <div class="modal-body pb-40 pl-40 pr-40">
1220
1221
1222                <img id="imageView" class="img-fluid" onerror="this.src='/images/bg_img.png'"/>
1223
1224
1225            </div>
1226            <div class="modal-footer justify-content-center border-top pt-40 pb-40">
1227                <button type="button" class="btn btn-default w-180" data-dismiss="modal">닫기</button>
1228            </div>
1229        </div>
1230    </div>
1231</div>
1232
1233<script>
1234    var imgUrl = "";
1235
1236    $(document).on('click', '.openImageView', function() {
1237        imgUrl = $(this).data('url');
1238        $('#imageView').attr('src', imgUrl);
1239        $('#imageView').attr('alt', $(this).attr("title"));
1240
1241        var img = new Image();
1242        img.onload=function(){
1243            //파일 존재 시 내용
1244            $('#imageViewModal').modal();
1245        }
1246        img.onerror=function(){
1247            //파일 없을 시 내용
1248            $('#imageView').attr('src', '/images/bg_img.png');
1249            $('#imageViewModal').modal();
1250        }
1251        img.src = imgUrl;
1252
1253
1254    })
1255</script>
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270<div id="loginOnePassModal" class="modal fade" tabindex="-1">
1271    <input type="hidden" id="loginOnePassModal_cert" value="">
1272    <div class="modal-dialog modal-md modal-dialog-centered">
1273        <div class="modal-content shadow">
1274            <div class="modal-header pb-20">
1275                <div class="clearfix position-relative">
1276                    <h2 class="mb-0">두루누비 통합 로그인</h2>
1277                </div>
1278                <button type="button" class="close" data-dismiss="modal" aria-label="닫기">
1279                    <span aria-hidden="true"></span>
1280                </button>
1281            </div>
1282            <div class="modal-body pb-32">
1283                <div class="text-center mb-24"><img src="/durunubi_2022/images/onepass_logo.png" class="img-fluid" alt="한국관광공사 투어원패스 로고"/></div>
1284
1285                <div class="text-muted mb-24 text-center">
1286                    투어원패스는 한국관광공사 통합로그인 서비스로 SNS 인증을 통해 간편하게 이용할 수 있습니다
1287                    
1288                </div>
1289
1290                
1291
1292                
1293
1294
1295                <div class="mb-20">
1296                    <button type="button" class="btn btn-warning btn-block focus-inset-dark" onclick="fnLinkSitePopup()" title="새창 열림">투어 원패스 로그인</button>
1297                </div>
1298                
1299
1300                <div class="bg-gray-f6 rounded text-center text-muted py-3">
1301                    <h5 class="S-Core font-size-18">처음 오셨나요?</h5>
1302                    <div>투어 원패스 로그인하시면 두루누비에 회원가입이 됩니다.</div>
1303                </div>
1304            </div>
1305        </div>
1306    </div>
1307</div>
1308
1309<script>
1310    function fnLinkSitePopup() {
1311        /* "function fnLinkSitePopup" 이 문자열로 검색해서 나오는 부분도 확인
1312        var now = new Date();
1313        var start = new Date(2026, 2, 17, 19, 0, 0);
1314        var end   = new Date(2026, 2, 17, 21, 0, 0);
1315        if (now >= start && now <= end) {
1316            alert("로그인 서비스 점검 중입니다.\n시스템 점검 일시: 2026. 3. 17.(화) 19:00 ~ 21:00\n\nLogin service is under maintenance.\nMaintenance period: March 17, 2026 (Tue) 19:00 ~ 21:00");
1317            return;
1318        }
1319        */
1320
1321        saveReferrer();
1322
1323//사이트별 부여받은 코드 사용(연계 신청시 제공되며, 서버단에서 넘겨받아 사용할수 있게 처리)
1324        var linkSiteApiId = 'BaMovEw4eAXTHgvTd8Eogw';
1325
1326//개발서버(사용시 host 파일 'pass.knto.or.kr 222.99.52.216' 추가)
1327//var req_url = "https://pass.knto.or.kr:9591/front/login/login" + "?linkSiteApiId=";
1328//운영서버(운영서버 적용시 사용)
1329        
1330        var req_url = "https://pass.knto.or.kr/front/login/login" + "?linkSiteApiId=" + linkSiteApiId + "&cert=" + $("#loginOnePassModal_cert").val();
1331        
1332        
1333        $("#loginOnePassModal_cert").val("");
1334
1335        //투어원패스 팝업 셋팅
1336        var uri = req_url;
1337        var popupName = "";
1338        var options = "width=560, height=600"; //팝업사이즈
1339
1340        //투어원패스 팝업 호출
1341        var win = window.open(uri, "_blank", options);
1342        return win;
1343    }
1344
1345    function saveReferrer() {
1346        $.ajax({
1347            type: 'POST',
1348            dataType: 'json',
1349            url: '/saveBeforeLogin.do',
1350            success: function (result) {
1351            }
1352        });
1353    }
1354
1355    function autoLoginCheck() {
1356        var linkSiteApiId = 'BaMovEw4eAXTHgvTd8Eogw';
1357        var req_url = "https://pass.knto.or.kr:9591/api/loginCheck" + "?linkSiteApiId=";
1358        var uri = req_url + linkSiteApiId;
1359        $.ajax({
1360            type: 'GET',
1361            url: uri,
1362            success: function (result) {
1363                alert(result);
1364            },
1365            error: function (result) {
1366                //var temp = result.state();
1367                alert(result);
1368            }
1369        });
1370    }
1371</script>
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384<div id="searchUserAccountModal" class="modal fade" tabindex="-1">
1385    <div class="modal-dialog modal-md modal-dialog-centered">
1386        <div class="modal-content shadow">
1387            <div class="modal-header pb-20">
1388                <div class="clearfix position-relative">
1389                    <h2 class="mb-0">통합 로그인 계정 찾기</h2>
1390                </div>
1391                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1392                    <span aria-hidden="true"></span>
1393                </button>
1394            </div>
1395            <div class="modal-body pb-32">
1396
1397
1398                <h5 class="S-Core text-muted">통합 로그인 가입 시 회원 구분 및 인증하신 휴대폰 번호을 통해 계정 정보를 알려드립니다.</h5>
1399
1400                <div class="text-muted mb-4">
1401                    ※기존 두루누비 회원(미전환 회원)은 통합 로그인에서 사용 하실 SNS 계정을 선택하시면 자동으로 전환 가입 처리 후 이용 가능합니다.
1402                </div>
1403
1404
1405                <h6 class="S-Core font-size-20 mb-3">회원구분</h6>
1406
1407                <div class="mb-4">
1408                    <div class="custom-control custom-radio custom-control-inline">
1409                        <input type="radio" id="generalMember" name="customRadioInline" class="custom-control-input">
1410                        <label class="custom-control-label" for="generalMember">일반 회원(만 14세 이상)</label>
1411                    </div>
1412                    <div class="custom-control custom-radio custom-control-inline">
1413                        <input type="radio" id="childMember" name="customRadioInline" class="custom-control-input">
1414                        <label class="custom-control-label" for="childMember">어린이 회원 (만14세 미만)</label>
1415                    </div>
1416                </div>
1417
1418                <h6 class="S-Core font-size-20 mb-3">본인 인증</h6>
1419                <style>#searchUserAccountModal .media .media-body::after{top: 18px; bottom: auto;}</style>
1420                <div class="media rounded-pill border px-md-3 py-4 align-items-start position-relative">
1421                    <div>
1422                        <i class="icon icon-phone"></i>
1423                    </div>
1424                    <div class="media-body letter-1 pl-30 pr-0">
1425                        <h5 class="mt-3">휴대폰 인증</h5>
1426                        <div class="text-gray-6 mb-4">휴대폰 인증을 통해 보호자의 정보 확인을 진행합니다.</div>
1427                        <button type="button" class="btn btn-success" title="새창 열림">인증하기</button>
1428                    </div>
1429
1430                    <a href="#" class="stretched-link" title="휴대폰 인증, 새 창 열림"></a>
1431                </div>
1432
1433            </div>
1434
1435        </div>
1436    </div>
1437</div>
1438
1439
1440
1441<script>
1442    function backPage() {
1443        history.back();
1444    }
1445</script>
1445
1446
1447
1448<script>
1449    /*이용약관 불러오는 API 호출 공통함수*/
1450    function clauseCall(type,id, modalId) {
1451        $.ajax({
1452            cache:false,
1453            async:false,
1454            type: "GET",
1455            data : {type : type},
1456            dataType: "json",
1457            url: "/api/clauseCall",
1458            success: function(result) {
1459                var data =result.response;
1460                // console.log(data);
1461                // console.log(id);
1462                $('#'+id).html(data.contents);
1463
1464                if(modalId){
1465                    $(modalId).modal('show');
1466                }
1467            }
1468        });
1469    }
1470
1471</script>
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480<link rel="stylesheet" href="/assets/stylesheets/global.css">
1481<script src="/assets/javascripts/global.js?version=260703"></script>
1481
1482
1483<!-- 코스 공유하기 팝업 -->
1484<div id="shareSNSModal" class="modal fade" tabindex="-1">
1485    <div class="modal-dialog modal-dialog-centered">
1486        <div class="modal-content shadow">
1487            <div class="modal-header">
1488                <h2>&nbsp;</h2>
1489                <button type="button" class="close" data-dismiss="modal" aria-label="닫기">
1490                    <span aria-hidden="true"></span>
1491                </button>
1492            </div>
1493            <div class="modal-body pb-40 pl-40 pr-40">
1494
1495
1496                <h4 class="text-center S-Core font-weight-bold text-muted">
1497                    <span class="d-block">공유하실 SNS를</span>선택해주세요.
1498                </h4>
1499                
1499<script>
1500                    $(document).ready(function () {
1501                        var text;
1502                        /* text = "<button type='button' class=\"btn p-0 mx-2\" title=\"페이스북 공유하기\"  data-href=\""+encodeURIComponent(window.location.href)+"\" data-layout=\"button\" data-size=\"small\" data-mobile-iframe=\"false\" target=\"_blank\" href=\"https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"\" onClick=\"window.open(this.href, '', 'width=400, height=600'); return false;\">" +
1503                             "<i class=\"icon sns-facebook\"></i>" +
1504                             "</button>";*/
1505                        text = " <div class=\"fb-share-button\" data-href=\"https://developers.facebook.com/docs/plugins/\" data-layout=\"button\" data-size=\"large\">" +
1506                            "<a title=\"페이스북\" target=\"_blank\" href=\"https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&amp;src=sdkpreparse\" class=\"fb-xfbml-parse-ignore\"><i class=\"icon sns-facebook\"></i>" +
1507                            "</a>" +
1508                            "</div>"
1509
1510                        $("#fb_insert").prepend(text);
1511                    });
1512                </script>
1512
1513                
1514
1515
1516                <div class="d-flex justify-content-center align-items-center mt-40 mb-35" id="fb_insert">
1517
1518                    <button type="button" class="btn p-0 ml-10 mr-10 rounded-0" onclick="sendLink()" title="카카오톡"><i class="icon sns-kakao"></i></button>
1519                    <button type="button" class="btn p-0 ml-10 mr-10 rounded-0" onclick="clipboard()" title="URL"><i class="icon sns-url"></i></button>
1520                </div>
1521
1522            </div>
1523        </div>
1524    </div>
1525</div>
1526
1527
1528<!-- header -->
1529
1530    <header >
1531
1532        
1533        <h1 style="display: inline;">
1534            <a href="/" class="logo"><span>두루누비</span></a>
1535        </h1>
1536        
1537
1538            
1539        
1540            
1541        
1542
1543        
1544            
1545            
1546                <!--웹, 모바일 웹-->
1547                <div class="container-fluid header-top">
1548                    <div class="position-relative">
1549
1550
1551                        <div class="main-menu-wrap container">
1552                            <div class="d-flex align-items-center">
1553                                <ul class="main-menu mb-0 d-flex">
1554                                    <li class="">
1555                                        <a id="main-menu" href="/koreatrail-introduction.do">코리아둘레길</a>
1556                                        <ul>
1557                                            <li>
1558                                                <a href="/koreatrail-introduction.do">코리아둘레길 소개</a>
1559                                            </li>
1560                                            <li>
1561                                                <a href="/haeparang-introduction.do">해파랑길</a>
1562                                            </li>
1563                                            <li>
1564                                                <a href="/namparang-introduction.do">남파랑길</a>
1565                                            </li>
1566                                            <li>
1567                                                <a href="/seohaerang-introduction.do">서해랑길</a>
1568                                            </li>
1569                                            <li>
1570                                                <a href="/dmz-introduction.do">DMZ 평화의 길</a>
1571                                            </li>
1572                                        </ul>
1573                                    </li>
1574                                    
1575                                    <li class="">
1576                                        <a href="/koreatrail-rest-area.do">걷기여행정보</a>
1577                                        <ul>
1578                                            <li>
1579                                                <a href="/koreatrail-rest-area.do">코리아둘레길 쉼터 안내</a>
1580                                            </li>
1581                                            <li>
1582                                                <a href="/walk-program.do">걷기여행 프로그램</a>
1583                                            </li>
1584                                            <li>
1585                                                <a href="/koreatrail-recommend.do">추천 코스</a>
1586                                            </li>
1587                                        </ul>
1588                                        
1589                                    </li>
1590                                    <li>
1591                                        <a href="/koreatrail-review.do">여행이야기</a>
1592                                        <ul>
1593                                            <li>
1594                                                <a href="/koreatrail-review.do">여행 후기</a>
1595                                            </li>
1596                                            <li>
1597                                                <a href="/bbs-koreatrail-video.do">스토리텔링</a>
1598                                            </li>
1599                                            
1600                                                <li>
1601                                                    <a href="/bbs-koreatrail-walker.do">코리아둘레길 원정대</a>
1602                                                </li>
1603                                                <li>
1604                                                    <a href="/hallFame-review-list.do">명예의 전당</a>
1605                                                </li>
1606                                            
1607                                        </ul>
1608                                    </li>
1609                                    
1610                                        <li>
1611                                            <a href="/road-walk.do">자료실</a>
1612                                            <ul>
1613                                                <li>
1614                                                    <a href="/road-walk.do">여행 자료실</a>
1615                                                </li>
1616                                                <li>
1617                                                    <a href="/bbs-manual.do">이용 가이드</a>
1618                                                </li>
1619                                                <li>
1620                                                    <a href="/bbs-etc.do">기타</a>
1621                                                </li>
1622                                                <li>
1623                                                    <a href="https://www.data.go.kr/data/15101974/openapi.do" target="_blank">공공데이터</a>
1624                                                </li>
1625                                            </ul>
1626                                        </li>
1627                                    
1628                                    <li>
1629                                        <a href="/9-4-3-announce-notice.do">고객지원</a>
1630                                        <ul>
1631                                            <li>
1632                                                <a href="/9-4-3-announce-notice.do">공지사항</a>
1633                                            </li>
1634                                            <li>
1635                                                <a href="/9-3-0-announce-faq.do">FAQ</a>
1636                                            </li>
1637                                            <li>
1638                                                <a href="/error-reporting-list.do">오류 신고</a>
1639                                            </li>
1640                                            
1641                                                <li>
1642                                                    <a href="/brochure-apply.do">홍보물신청</a>
1643                                                </li>
1644
1645                                                <li>
1646                                                    <a href="/application-for-partnership.do">제휴신청</a>
1647                                                </li>
1648                                            
1649                                        </ul>
1650                                    </li>
1651                                </ul>
1652                            </div>
1653                        </div>
1654
1655                        <div class="d-flex align-items-center util">
1656                            <div class="event_wrap">
1657                                <div class="d-xl-block d-lg-block d-none">
1658                                    <a href="/8-3-0-info-event.do" class="sp green"><span class="">이벤트</span></a>
1659                                </div>
1660                                <div class="d-xl-block d-lg-block d-none">
1661                                    <a href="/safe-trail-guide.do" class="sp blue"><span class="">안전걷기여행</span></a>
1662                                </div>
1663                            </div>
1664
1665                            <div class="mypage" id="mypage">
1666                                
1667                                    <button class="icon icon-login" data-toggle="modal" data-target="#loginOnePassModal" title="로그인 레이어 팝업"></button>
1668                                
1669
1670                                
1671                            </div>
1672                            <div class="language" id="language">
1673                                <button class="icon icon-language" title="언어 선택 레이어 팝업"></button>
1674                                <div class="language-select">
1675                                    <a href="/changeLocale.do?langCode=ko">한국어</a>
1676                                    <a href="/changeLocale.do?langCode=en">English</a>
1677                                </div>
1678                            </div>
1679                            <div>
1680                                <button id="icon-search-bk" class="icon icon-search focus-common" onclick="clickSearchIcon();" title="검색"></button>
1681                            </div>
1682                            <div>
1683                                <button class="icon icon-sitebar d-lg-block d-none" onclick="$('#sitemap').addClass('active'); $('body').addClass('overflow-hidden');" title="메뉴"></button>
1684                                <button class="icon icon-sitebar mobile d-lg-none d-block" onclick="mobileMenu();" title="메뉴"></button>
1685                            </div>
1686                        </div>
1687
1688                    </div>
1689                </div>
1690                <!--// 웹, 모바일 웹-->
1691            
1692        
1693
1694
1695        <!-- 검색 리뉴얼 -->
1696        <div id="search">
1697            <div class="search-wrap">
1698                <div class="search-header">
1699                    <div class="container">
1700                        <button type="button" class="close" aria-label="닫기" onclick="searchPopupClose()">
1701                            <i class="icon icon-close-bk"></i>
1702                        </button>
1703
1704                        <div class="input-group input-group-search-box">
1705                            <div class="input-group-prepend">
1706                                <select title="검색 항목 선택" class="custom-select custom-select-lg text-muted" name="menu" id="menu">
1707                                    <option value="total">
1707전체</option>
1708                                    <option value="road">길</option>
1709                                    <option value="course">코스</option>
1710                                    <option value="navi">메뉴</option>
1711                                    <option value="cnt">콘텐츠</option>
1712                                        
1713                                </select>
1714                            </div>
1715                            <input type="text" class="form-control rounded-pill mx-2" title="검색어를 입력하세요" placeholder="검색어를 입력하세요" name="qt" id="qt" onkeyup="topPressEnter();">
1716                            <div class="input-group-append">
1717                                <button class="btn btn-success rounded-pill focus-common" type="button" onclick="searchPageGo(false);">검색</button>
1718                            </div>
1719                        </div>
1720                            
1721
1722                    </div>
1723                </div>
1724                <div class="search-contents">
1725                    <div class="container pt-5">
1726
1727                        <div class="row my-3">
1728                            <div class="col-xl-1 col-lg-2 col-md-2">
1729                                <h6 class="search-tit S-Core font-weight-500">추천 검색어</h6>
1730                            </div>
1731                            <div class="col-xl-11 col-lg-10 col-md-10" id="recommendKeyword">
1732
1733                            </div>
1734                        </div>
1735                        <div class="row my-3">
1736                            <div class="col-xl-1 col-lg-2 col-md-2">
1737                                <h6 class="search-tit S-Core font-weight-500">인기 키워드</h6>
1738                            </div>
1739                            <div class="col-xl-11 col-lg-10 col-md-10" id="popularKeyword">
1740
1741                            </div>
1742                        </div>
1743                            
1744
1745
1746
1747                        <div class="searchBox searchBox-course">
1748
1749                            <div class="accordion" id="accordionExample">
1750                                <div class="card">
1751                                    <div class="card-header" id="headingOne">
1752                                        <h2 class="mb-0">
1753                                            <button class="btn btn-link btn-block text-left focus-inset" type="button" data-toggle="collapse" data-target="#collapseSearch" aria-expanded="true" aria-controls="collapseSearch">
1754                                                코스 검색
1755                                            </button>
1756                                        </h2>
1757                                    </div>
1758
1759                                    <div id="collapseSearch" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
1760                                        <div class="card-body">
1761                                            <table class="table table-block table-block-border">
1762                                                <caption>코스 검색</caption>
1763                                                <colgroup>
1764                                                    <col width="12%" />
1765                                                    <col width="37%" />
1766                                                    <col width="12%" />
1767                                                    <col width="37%" />
1768                                                </colgroup>
1769                                                <tbody>
1770                                                <tr>
1771                                                    <th>지역</th>
1772                                                    <td>
1773                                                        <div class="row">
1774                                                            <div class="col-6">
1775                                                                <select title="도/시 선택" class="custom-select custom-select-lg" name="dosi" id="dosi" onchange="searchDistrict();">
1776                                                                    <option value="">도/시 전체</option>
1777                                                                </select>
1778                                                            </div>
1779                                                            <div class="col-6">
1780                                                                <select title="시/군 선택" class="custom-select custom-select-lg" name="sigun" id="sigun">
1781                                                                    <option value="">시/군 전체</option>
1782                                                                </select>
1783                                                            </div>
1784                                                        </div>
1785
1786
1787                                                    </td>
1788                                                    <th class="mt-4 mt-lg-0">거리</th>
1789                                                    <td>
1790
1791                                                        <div class="custom-control custom-radio custom-control-inline">
1792                                                            <input type="radio" id="distance01" name="distance" class="custom-control-input" checked="checked" value="">
1793                                                            <label class="custom-control-label" for="distance01">
1793전체</label>
1794                                                        </div>
1795                                                        <div class="custom-control custom-radio custom-control-inline">
1796                                                            <input type="radio" id="distance02" name="distance" class="custom-control-input" value="1">
1797                                                            <label class="custom-control-label" for="distance02">5km 미만</label>
1798                                                        </div>
1799                                                        <div class="custom-control custom-radio custom-control-inline">
1800                                                            <input type="radio" id="distance03" name="distance" class="custom-control-input" value="2">
1801                                                            <label class="custom-control-label" for="distance03">5 ~ 10km</label>
1802                                                        </div>
1803                                                        <div class="custom-control custom-radio custom-control-inline">
1804                                                            <input type="radio" id="distance04" name="distance" class="custom-control-input" value="3">
1805                                                            <label class="custom-control-label" for="distance04">10km 초과</label>
1806                                                        </div>
1807
1808                                                    </td>
1809                                                </tr>
1810                                                <tr>
1811
1812                                                    <th>소요시간</th>
1813                                                    <td>
1814
1815                                                        <div class="custom-control custom-radio custom-control-inline">
1816                                                            <input type="radio" id="time01" name="time" class="custom-control-input" checked="checked" value="">
1817                                                            <label class="custom-control-label" for="time01">전체</label>
1818                                                        </div>
1819                                                        <div class="custom-control custom-radio custom-control-inline">
1820                                                            <input type="radio" id="time02" name="time" class="custom-control-input" value="1">
1821                                                            <label class="custom-control-label" for="time02">2시간 미만</label>
1822                                                        </div>
1823                                                        <div class="custom-control custom-radio custom-control-inline">
1824                                                            <input type="radio" id="time03" name="time" class="custom-control-input" value="2">
1825                                                            <label class="custom-control-label" for="time03">2 ~ 4시간</label>
1826                                                        </div>
1827                                                        <div class="custom-control custom-radio custom-control-inline">
1828                                                            <input type="radio" id="time04" name="time" class="custom-control-input" value="3">
1829                                                            <label class="custom-control-label" for="time04">4시간 초과</label>
1830                                                        </div>
1831
1832                                                    </td>
1833                                                    <th>
1833난이도</th>
1834                                                    <td>
1835
1836                                                        <div class="custom-control custom-radio custom-control-inline">
1837                                                            <input type="radio" id="difficulty01" name="difficulty" class="custom-control-input" checked="checked" value="">
1838                                                            <label class="custom-control-label" for="difficulty01">전체</label>
1839                                                        </div>
1840                                                        <div class="custom-control custom-radio custom-control-inline">
1841                                                            <input type="radio" id="difficulty02" name="difficulty" class="custom-control-input" value="1">
1842                                                            <label class="custom-control-label" for="difficulty02">쉬움</label>
1843                                                        </div>
1844                                                        <div class="custom-control custom-radio custom-control-inline">
1845                                                            <input type="radio" id="difficulty03" name="difficulty" class="custom-control-input" value="2">
1846                                                            <label class="custom-control-label" for="difficulty03">보통</label>
1847                                                        </div>
1848                                                        <div class="custom-control custom-radio custom-control-inline">
1849                                                            <input type="radio" id="difficulty04" name="difficulty" class="custom-control-input" value="3">
1850                                                            <label class="custom-control-label" for="difficulty04">어려움</label>
1851                                                        </div>
1852
1853                                                    </td>
1854                                                </tr>
1855
1856                                                    
1857
1858                                                </tbody>
1859                                            </table>
1860
1861
1862                                            <div class="text-center mt-5">
1863                                                <button type="button" class="btn btn-default mx-1 w-180 focus-common" onclick="resetCourseFilter();">초기화</button>
1864                                                <button type="button" class="btn btn-success mx-1 w-180 focus-common" onclick="searchPageGo(true);">검색</button>
1865                                            </div>
1866
1867
1868                                        </div>
1869                                    </div>
1870                                </div>
1871                            </div>
1872
1873                        </div>
1874
1875
1876                    </div>
1877                </div>
1878            </div>
1879            <div class="search-back"></div>
1880        </div>
1881        <!-- //검색 리뉴얼 -->
1882
1883        <!-- PC 사이트맵 -->
1884        <nav id="sitemap">
1885
1886            <div class="sitemap-wrap">
1887                <button type="button" class="btn btn-link close" title="닫기"  onclick="$('#sitemap').removeClass('active');$('body').removeClass('overflow-hidden');">닫기 <span></span></button>
1888
1889                <div class="sitemap-body">
1890
1891                    <div class="container">
1892                        <div class="row row-grid">
1893                            <div class="col-grid col-xl col-lg-12">
1894                                <a href="/koreatrail-introduction.do" class="depth1 active"><span>코리아둘레길</span></a>
1895                            </div>
1896                            <div class="col-grid col-lg col-md-4 col-4">
1897                                <a href="/koreatrail-introduction.do" class="depth2 active"><span>코리아둘레길 소개</span></a>
1898                                <ul>
1899                                    <li>
1900                                        <a href="/koreatrail-users-guide.do" class="depth3 " >
1901                                            <span>이용 안내</span>
1902                                        </a>
1903                                    </li>
1904                                </ul>
1905                            </div>
1906                            <div class="col-grid col-lg col-md-4 col-4">
1907                                <a href="/haeparang-introduction.do" class="depth2 "><span>해파랑길</span></a>
1908                                <ul>
1909                                    <li>
1910                                        <a href="/haeparang-introduction.do" class="depth3 " ><span>소개</span></a>
1911                                    </li>
1912                                    <li>
1913                                        <a href="/haeparang-guiding-system.do" class="depth3 " ><span> 안내체계</span></a>
1914                                    </li>
1915                                    <li>
1916                                        <a href="/haeparang-course-list.do" class="depth3"><span>코스 안내</span></a>
1917                                    </li>
1918                                </ul>
1919                            </div>
1920                            <div class="col-grid col-lg col-md-4 col-4">
1921                                <a href="/namparang-introduction.do" class="depth2"><span> 남파랑길</span></a>
1922                                <ul>
1923                                    <li>
1924                                        <a href="/namparang-introduction.do" class="depth3"><span>소개</span></a>
1925                                    </li>
1926                                    <li>
1927                                        <a href="/namparang-guiding-system.do" class="depth3"><span>안내체계</span></a>
1928                                    </li>
1929                                    <li>
1930                                        <a href="/namparang-course-list.do" class="depth3"><span>코스 안내</span></a>
1931                                    </li>
1932                                </ul>
1933                            </div>
1934                            <div class="col-grid col-lg col-md-4 col-4">
1935                                <a href="/seohaerang-introduction.do" class="depth2"><span>서해랑길</span></a>
1936                                <ul>
1937                                    <li>
1938                                        <a href="/seohaerang-introduction.do" class="depth3"><span>소개</span></a>
1939                                    </li>
1940                                    <li>
1941                                        <a href="/seohaerang-guiding-system.do" class="depth3"><span>안내체계</span></a>
1942                                    </li>
1943                                    <li>
1944                                        <a href="/seohaerang-course-list.do" class="depth3"><span>코스 안내</span></a>
1945                                    </li>
1946                                </ul>
1947                            </div>
1948                            <div class="col-grid col-lg col-md-4 col-8">
1949                                <a href="/dmz-introduction.do" class="depth2"><span>DMZ 평화의 길</span></a>
1950                                <ul>
1951                                    <li>
1952                                        <a href="/dmz-introduction.do" class="depth3 " >
1953                                            <span>횡단노선 소개</span>
1954                                        </a>
1955                                    </li>
1956                                    <li>
1957                                        <a href="/dmz-introduction-theme.do" class="depth3 " >
1958                                            <span>테마노선 소개</span>
1959                                        </a>
1960                                    </li>
1961                                    <li>
1962                                        <a href="/dmz-guiding-system.do" class="depth3 " >
1963                                            <span>안내체계</span>
1964                                        </a>
1965                                    </li>
1966                                    <li>
1967                                        <a href="/dmz-course-list.do" class="depth3"><span>코스 안내</span></a>
1968                                    </li>
1969                                </ul>
1970                            </div>
1971                        </div>
1972                        
1973                            <div class="row row-grid">
1974                                <div class="col-grid col-xl col-lg-12">
1975                                    <a href="/koreatrail-rest-area.do" class="depth1"><span>걷기여행정보</span></a>
1976                                </div>
1977
1978                                <div class="col-grid col-lg col-md-4 col-4">
1979                                    <a href="/koreatrail-rest-area.do" class="depth2"><span>코리아둘레길 쉼터 안내</span></a>
1980                                </div>
1981
1982                                <div class="col-grid col-lg col-md-4 col-4">
1983                                    <a href="/walk-program.do" class="depth2"><span>걷기여행 프로그램</span></a>
1984                                </div>
1985
1986                                <div class="col-grid col-lg col-md-4 col-4">
1987                                    <a href="/koreatrail-recommend.do" class="depth2"><span>추천 코스</span></a>
1988                                </div>
1989
1990                                <div class="col-grid col-lg col-md-4 col-4"></div>
1991                                <div class="col-grid col-lg col-md-4 col-4"></div>
1992                            </div>
1993                        
1994                        <div class="row row-grid">
1995                            <div class="col-grid col-xl col-lg-16">
1996                                <a href="/koreatrail-review.do" class="depth1"><span>여행이야기</span></a>
1997                            </div>
1998                            <div class="col-grid col-lg col-md-4 col-4">
1999                                <a href="/koreatrail-review.do" class="depth2"><span>여행 후기</span></a>
2000                            </div>
2001                            <div class="col-grid col-lg col-md-4 col-4">
2002                                <a href="/bbs-koreatrail-video.do" class="depth2"><span>스토리텔링</span></a>
2003                            </div>
2004
2005                            
2006                                <div class="col-grid col-lg col-md-4 col-4">
2007                                    <a href="/bbs-koreatrail-walker.do" class="depth2"><span>코리아둘레길 원정대</span></a>
2008                                </div>
2009                                <div class="col-grid col-lg col-md-4 col-4">
2010                                    <a href="/hallFame-review-list.do" class="depth2"><span>명예의 전당</span></a>
2011                                </div>
2012                            
2013                            
2014
2015                            <div class="col-grid col-lg col-md-4 col-4"></div>
2016                        </div>
2017                        
2018                            <div class="row row-grid">
2019                                <div class="col-grid col-xl col-lg-12">
2020                                    <a href="/road-walk.do" class="depth1"><span>자료실</span></a>
2021                                </div>
2022                                <div class="col-grid col-lg col-md-4 col-4">
2023                                    <a href="/road-walk.do" class="depth2"><span>여행 자료실</span></a>
2024                                </div>
2025                                <div class="col-grid col-lg col-md-4 col-4">
2026                                    <a href="/bbs-manual.do" class="depth2"><span>이용 가이드</span></a>
2027                                </div>
2028                                <div class="col-grid col-lg col-md-4 col-4">
2029                                    <a href="/bbs-etc.do" class="depth2"><span>기타</span></a>
2030                                </div>
2031                                <div class="col-grid col-lg col-md-4 col-4">
2032                                    <a href="https://www.data.go.kr/data/15101974/openapi.do" target="_blank" class="depth2" ><span>공공데이터</span></a>
2033                                </div>
2034                                <div class="col-grid col-lg col-md-4 col-4"></div>
2035                            </div>
2036                        
2037                        <div class="row row-grid">
2038                            <div class="col-grid col-xl col-lg-12">
2039                                <a href="/9-4-3-announce-notice.do" class="depth1"><span>고객지원</span></a>
2040                            </div>
2041                            <div class="col-grid col-lg col-md-4 col-4">
2042                                <a href="/9-4-3-announce-notice.do" class="depth2"><span>공지사항</span></a>
2043                            </div>
2044                            <div class="col-grid col-lg col-md-4 col-4">
2045                                <a href="/9-3-0-announce-faq.do" class="depth2"><span>FAQ</span></a>
2046                            </div>
2047                            <div class="col-grid col-lg col-md-4 col-4">
2048                                <a href="/error-reporting-list.do" class="depth2"><span>오류 신고</span></a>
2049                            </div>
2050                            
2051                                <div class="col-grid col-lg col-md-4 col-4">
2052                                    <a href="/brochure-apply.do" class="depth2"><span>홍보물신청</span></a>
2053                                </div>
2054                                <div class="col-grid col-lg col-md-4 col-4">
2055                                    <a href="/application-for-partnership.do" class="depth2"><span>제휴신청</span></a>
2056                                </div>
2057                            
2058                            
2059                        </div>
2060                        <div class="row row-grid">
2061                            <div class="col-grid col-xl col-lg-12">
2062                                <a href="/8-3-0-info-event.do" class="depth1"><span>이벤트</span></a>
2063                            </div>
2064                            <div class="col-grid col-lg col-md-4 col-4"></div>
2065                            <div class="col-grid col-lg col-md-4 col-4"></div>
2066                            <div class="col-grid col-lg col-md-4 col-4"></div>
2067                            <div class="col-grid col-lg col-md-4 col-4"></div>
2068                            <div class="col-grid col-lg col-md-4 col-4"></div>
2069                        </div>
2070                        <div class="row row-grid">
2071                            <div class="col-grid col-xl col-lg-12">
2072                                <a href="/safe-trail-guide.do" class="depth1"><span>안전걷기여행</span></a>
2073                            </div>
2074                            <div class="col-grid col-lg col-md-4 col-4">
2075                                <a href="/safe-trail-guide.do" class="depth2"><span>안전 여행 가이드</span></a>
2076
2077                            </div>
2078                            <div class="col-grid col-lg col-md-4 col-4">
2079                                <a href="/safe-trail-emergency-report.do" class="depth2"><span>긴급 신고 방법</span></a>
2080
2081                            </div>
2082                            <div class="col-grid col-lg col-md-4 col-4">
2083                                <a href="/safe-trail-emergency-center.do" class="depth2"><span>응급의료기관 안내</span></a>
2084
2085                            </div>
2086                            <div class="col-grid col-lg col-md-4 col-4"></div>
2087                            <div class="col-grid col-lg col-md-4 col-4"></div>
2088                        </div>
2089                        
2090                    </div>
2091
2092                </div>
2093
2094
2095
2096            </div>
2097
2098            <div class="sitemap-back"></div>
2099
2100        </nav>
2101        <!-- // PC 사이트맵 -->
2102
2103
2104
2105        <!-- 퀵메뉴 -->
2106
2107        <div id="quickMenu">
2108            <div class="quickMenu-wrap">
2109
2110                <div class="q_menu_wrap">
2111                    <button id="quickMenu-open" type="button" title="퀵메뉴 열기" class="q_menu_onoff"></button>
2112                    <ul id="quickMenu-body" inert>
2113                        <li>
2114                            <a class="focus-inset" href="javascript:void(0)" data-toggle="modal" data-target="#app_QRcode">
2115								<span>
2116									<span class="q_icon q_icon_1"></span>
2117									<span>앱다운</span>
2118								</span>
2119                            </a>
2120                        </li>
2121                        <li>
2122
2123                            <a class="focus-inset" 
2124                               href="javascript:void(0)" onclick="needAuthenticationTOP()"
2125                            >
2126                                <span>
2127									<span class="q_icon q_icon_2"></span>
2128									<span>스탬프</span>
2129								</span>
2130                            </a>
2131
2132                        </li>
2133                        
2134                            <li>
2135                                <a class="focus-inset" href="/8-3-0-info-event.do">
2136								<span>
2137									<span class="q_icon q_icon_3"></span>
2138									<span>이벤트</span>
2139								</span>
2140                                </a>
2141                            </li>
2142                        
2143
2144                        <li>
2145                            <a class="focus-inset" href="/error-reporting-list.do">
2146								<span>
2147									<span class="q_icon q_icon_4"></span>
2148									<span>오류 신고</span>
2149								</span>
2150                            </a>
2151                        </li>
2152
2153                        
2154                            <li>
2155                                <a class="focus-inset" href="/koreatrail-rest-area.do">
2156								<span>
2157									<span class="q_icon q_icon_5"></span>
2158									<span>쉼터</span>
2159								</span>
2160                                </a>
2161                            </li>
2162                            <li>
2163                                <a class="focus-inset" href="/dmz-main.do">
2164								<span>
2165									<span class="q_icon q_icon_6"></span>
2166									<span>테마노선</span>
2167								</span>
2168                                </a>
2169                            </li>
2170                        
2171                        <li>
2172                            <a class="focus-inset goto_top" href="javascript:window.scrollTo(0,0)" title="최상단으로 이동">
2173                                <span class="q_icon q_icon_top"></span>
2174                            </a>
2175                        </li>
2176                    </ul>
2177                </div>
2178
2179
2180                <a href="/haeparang-introduction.do" title="해파랑길 바로가기" class="q_menu q_menu_01"></a>
2181                <a href="/namparang-introduction.do" title="남파랑길 바로가기" class="q_menu q_menu_02"></a>
2182                <a href="/seohaerang-introduction.do" title="서해랑길 바로가기" class="q_menu q_menu_03"></a>
2183                <a href="/dmz-introduction.do" title="DMZ 평화의 길 바로가기" class="q_menu q_menu_04"></a>
2184            </div>
2185        </div>
2186
2187        <!-- // 퀵메뉴 -->
2188
2189
2190
2191        <!-- 모바일 메뉴 -->
2192        <div id="mobile-gnb">
2193            <div class="mobile-head-link">
2194                <a href="/8-3-0-info-event.do" class="sp green"><span class="">이벤트</span></a>
2195                <a href="/safe-trail-guide.do" class="sp blue"><span class="">안전걷기여행</span></a>
2196            </div>
2197            <div class="mobile-body">
2198                <ul class="mobile-munu-wrap">
2199                    <li>
2200                        <a href="javascript:void(0)" class="on">코리아둘레길</a>
2201                        <ul class="sub">
2202                            <li>
2203                                <a href="javascript:void(0)">코리아둘레길 소개</a>
2204                                <div class="depth">
2205                                    <a href="/koreatrail-introduction.do">코리아둘레길 소개</a>
2206                                    <a href="/koreatrail-users-guide.do">이용 안내</a>
2207                                </div>
2208                            </li>
2209                            <li>
2210                                <a href="/haeparang-introduction.do">해파랑길</a>
2211                                <div class="depth">
2212                                    <a href="/haeparang-introduction.do">소개</a>
2213                                    <a href="/haeparang-guiding-system.do"> 안내체계 </a>
2214                                    <a href="/haeparang-course-list.do"> 코스 안내 </a>
2215                                </div>
2216                            </li>
2217                            <li>
2218                                <a href="javascript:void(0)">남파랑길</a>
2219                                <div class="depth">
2220                                    <a href="/namparang-introduction.do">소개</a>
2221                                    <a href="/namparang-guiding-system.do">안내체계</a>
2222                                    <a href="/namparang-course-list.do">코스 안내</a>
2223                                </div>
2224                            </li>
2225                            <li>
2226                                <a href="javascript:void(0)">서해랑길</a>
2227                                <div class="depth">
2228                                    <a href="/seohaerang-introduction.do">소개</a>
2229                                    <a href="/seohaerang-guiding-system.do">안내체계</a>
2230                                    <a href="/seohaerang-course-list.do">코스 안내</a>
2231                                </div>
2232                            </li>
2233                            <li>
2234                                <a href="javascript:void(0)">DMZ 평화의 길</a>
2235                                <div class="depth">
2236                                    <a href="/dmz-introduction.do">횡단노선 소개</a>
2237                                    <a href="/dmz-introduction-theme.do">테마노선 소개</a>
2238                                    <a href="/dmz-guiding-system.do">안내체계</a>
2239                                    <a href="/dmz-course-list.do">코스 안내</a>
2240                                </div>
2241                            </li>
2242                        </ul>
2243                    </li>
2244                    
2245                        <li>
2246                            <a href="javascript:void(0)">걷기여행정보</a>
2247                            <ul class="sub">
2248                                <li>
2249                                    <a href="/koreatrail-rest-area.do">코리아둘레길 쉼터 안내</a>
2250                                </li>
2251                                
2252                                    <li>
2253                                        <a href="/walk-program.do">걷기여행 프로그램</a>
2254                                    </li>
2255                                
2256                                <li>
2257                                    <a href="/koreatrail-recommend.do">추천 코스</a>
2258                                </li>
2259                            </ul>
2260                        </li>
2261                    
2262                    <li>
2263                        <a href="javascript:void(0)">여행이야기</a>
2264                        <ul class="sub">
2265                            <li>
2266                                <a href="/koreatrail-review.do">여행 후기</a>
2267                            </li>
2268                            <li>
2269                                <a href="/bbs-koreatrail-video.do">스토리텔링</a>
2270                            </li>
2271                            
2272                                <li>
2273                                    <a href="/bbs-koreatrail-walker.do">코리아둘레길 원정대</a>
2274                                </li>
2275                                <li>
2276                                    <a href="/hallFame-review-list.do"><span>명예의 전당</span></a>
2277                                </li>
2278                            
2279                        </ul>
2280                    </li>
2281                    
2282                        <li>
2283                            <a href="javascript:void(0)">자료실</a>
2284                            <ul class="sub">
2285                                <li>
2286                                    <a href="/road-walk.do#">여행 자료실</a>
2287                                </li>
2288                                <li>
2289                                    <a href="/bbs-manual.do">이용 가이드</a>
2290                                </li>
2291                                <li>
2292                                    <a href="/bbs-etc.do">기타</a>
2293                                </li>
2294                                <li>
2295                                    <a href="https://www.data.go.kr/data/15101974/openapi.do" target="_blank">공공데이터</a>
2296                                </li>
2297                                    
2298                            </ul>
2299                        </li>
2300                    
2301                    <li>
2302                        <a href="javascript:void(0)">고객지원</a>
2303                        <ul class="sub">
2304                            <li>
2305                                <a href="/9-4-3-announce-notice.do">공지사항</a>
2306                            </li>
2307                            <li>
2308                                <a href="/9-3-0-announce-faq.do">FAQ</a>
2309                            </li>
2310                            <li>
2311                                <a href="/error-reporting-list.do">오류 신고</a>
2312                            </li>
2313                            
2314                                <li>
2315                                    <a href="/brochure-apply.do">홍보물신청</a>
2316                                </li>
2317
2318                                <li>
2319                                    <a href="/application-for-partnership.do">제휴신청</a>
2320                                </li>
2321                            
2322                        </ul>
2323                    </li>
2324                    
2325                </ul>
2326            </div>
2327            
2328            
2329            
2330                
2331                
2332                    <select class="app-lang" onchange="location.href='/changeLocale.do?langCode='+$(this).val()"  title="언어 선택 레이어 팝업">
2333                        <option value="ko" >한국어</option>
2334                        <option value="en" >English</option>
2335                    </select>
2336                
2337            
2338        </div>
2339        <!-- //모바일 메뉴 -->
2340
2341        
2342            <div id="breadcrumb">
2343                <div class="container">
2344                    <div class="breadcrumb-wrap">
2345                        <div class="navi">
2346                            <div class="btn-group" role="group">
2347                                <a href="/main.do" class="home btn btn-secondary"><span>홈</span></a>
2348                                <div class="btn-group depth-1" role="group">
2349                                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle text-white focus-common" data-toggle="dropdown" aria-expanded="false">
2350                                        코리아둘레길
2351                                        
2352                                        
2353                                        
2354                                        
2355
2356                                        
2357                                        
2358
2359                                        
2360                                        
2361                                        
2362                                        
2363                                        
2364                                        
2365                                        
2366                                        
2367                                        
2368                                    </button>
2369                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
2370                                        <a class="dropdown-item" href="/koreatrail-introduction.do">코리아둘레길</a>
2371                                        <a class="dropdown-item" href="/haeparang-introduction.do"> 해파랑길</a>
2372                                        <a class="dropdown-item" href="/namparang-introduction.do"> 남파랑길</a>
2373                                        <a class="dropdown-item" href="/seohaerang-introduction.do">    서해랑길</a>
2374                                        <a class="dropdown-item" href="/dmz-introduction.do">   DMZ 평화의 길</a>
2375
2376                                        <a class="dropdown-item" href="/koreatrail-rest-area.do">걷기여행정보</a>
2377                                        <a class="dropdown-item" href="/koreatrail-review.do">여행이야기</a>
2378                                        
2379                                            <a class="dropdown-item" href="/bbs-koreatrail-video.do">자료실</a>
2380                                        
2381                                        <a class="dropdown-item" href="/9-4-3-announce-notice.do">  고객지원</a>
2382                                        <a class="dropdown-item" href="/safe-trail-guide.do">   안전걷기여행</a>
2383                                        
2384                                    </div>
2385                                </div>
2386                                
2387                                    <div class="btn-group depth-2" role="group">
2388                                        <button id="btnGroupDrop2" type="button" class="btn btn-secondary dropdown-toggle text-white focus-common" data-toggle="dropdown" aria-expanded="false">
2389                                            
2390                                                 코리아둘레길 소개
2391                                                
2392                                            
2393                                            
2394                                            
2395                                            
2396                                            
2397                                            
2398                                            
2399                                            
2400                                            
2401                                            
2402                                            
2403
2404                                            
2405                                        </button>
2406                                        
2407                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
2408                                                <a class="dropdown-item" href="/koreatrail-introduction.do">    코리아둘레길 소개</a>
2409                                                <a class="dropdown-item" href="/koreatrail-users-guide.do">     이용 안내</a>
2410                                            </div>
2411                                        
2412                                        
2413                                        
2414                                        
2415                                        
2416                                        
2417                                        
2418                                        
2419                                        
2420                                        
2421                                        
2422                                    </div>
2423                                
2424                                
2425                            </div>
2426                        </div>
2427
2428                        
2429                    </div>
2430
2431                    
2432                </div>
2433            </div>
2434
2435
2436        
2437
2438    </header>
2439
2440
2441
2442<main class="sub" id="appVue">
2443    
2444        <section class="page-title">
2445            <div class="container">
2446                <h1>코리아둘레길</h1>
2447                <div class="h5">우리나라 외곽을 하나로 연결하는 약 4,500km의 초장거리 걷기여행길</div>
2448                <div class="text-center my-lg-5 my-3">
2449                    
2450                        
2451                    
2452
2453
2454
2455<!-- Tab -->
2456<ul class="nav nav-pills nav-fill nav-success d-none d-lg-flex">
2457	<li class="nav-item ">
2458		<a class="nav-link active" href="/koreatrail-introduction.do" title="선택됨">코리아둘레길 소개</a>
2459	</li>
2460	<li class="nav-item">
2461		<a class="nav-link " href="/koreatrail-users-guide.do" title="">이용 안내</a>
2462	</li>
2463</ul>
2464
2465<div class="d-block d-lg-none">
2466	<select class="custom-select custom-select-lg text-muted" onchange="changeTabState(event)">
2467		<option value="10-0-1" selected>코리아둘레길 소개</option>
2468		<option value="10-0-2" >이용 안내</option>
2469	</select>
2470</div>
2471<!-- // Tab -->
2472
2473                </div>
2474            </div>
2475        </section>
2476    
2477
2478    <section class="contents">
2479
2480        <div class="korealode-present-wrap">
2481            <div class="container">
2482                <div class="text-center">
2483                    <p class="font-size-40 S-Core font-weight-bold mb-0">
2484                        동.서.남해안 및 DMZ 접경지역 등 우리나라 외곽을<br/>
2485                        하나로 연결하는 약 4,500km의 걷기여행길<br/>
2486                    </p>
2487                    <p class="h4 font-weight-normal mt-32">
2488                        코리아둘레길은 동.서.남해안 및 DMZ 접경지역 등 우리나라 외곽을 하나로 연결하는<br/>
2489                        약 4,500KM의 초장거리 걷기여행길입니다.<br/>
2490                        ‘대한민국을 재발견하며 함께 걷는 길’을 비전으로 ‘평화, 만남, 치유, 상생’의 가치를 구현합니다.<br/>
2491                        동쪽의 해파랑길, 남쪽의 남파랑길, 서쪽의 서해랑길, 북쪽의 DMZ 평화의 길로 구성되며<br/>
2492                        10개의 광역지자체, 78개의 기초 지자체와 함께 만들어갑니다.
2493                    </p>
2494                </div>
2495            </div>
2496
2497            <div class="container skip-item">
2498                <a href="#course-list"><span>코리아둘레길 지도 건너뛰기</span></a>
2499            </div>
2500
2501            <div class="container map position-relative mb-50 d-md-block d-none">
2502                <div class="container text-center">
2503                    <div class="set position-absolute">
2504                        
2505                    </div>
2506                    <div class="expand" id="mapPlMi">
2507                        <a href="javascript:void(0);" class="zoom plus" id="mapZoomIn" onclick="mapObj.zoomIn()">
2508                            <i class="icon icon-plus" title="지도 확대"></i>
2509                        </a>
2510                        <a href="javascript:void(0);" class="zoom minus mt-1" id="mapZoomOut" onclick="mapObj.zoomOut()">
2511                            <i class="icon icon-minus" title="지도 축소"></i>
2512                        </a>
2513                    </div>
2514                </div>
2515
2516
2517                <div id="map" class="map-wrap"></div>
2518
2519
2520            </div>
2521
2522            <div class="container d-md-none d-block my-5 text-center">
2523                <button type="button" class="btn btn-outline-success rounded-pill btn-block" data-toggle="modal" data-target="#mapMobileModal">코리아둘레길 지도</button>
2524            </div>
2525
2526            <div class="container d-md-block d-none" id="course-list">
2527                <div class="clearfix position-relative">
2528                    <h3 class="mb-0">코리아둘레길 코스</h3>
2529                </div>
2530                <div class="table-responsive">
2531                    <table class="table table-bordered">
2532                        <caption>코리아둘레길 코스</caption>
2533                        <colgroup>
2534                            <col width="25%">
2535                            <col width="*">
2536                            <col width="12%">
2537                            <col width="12%">
2538                            <col width="12%">
2539                        </colgroup>
2540                        <thead class="text-center">
2541                        <tr>
2542                            <th>지역</th>
2543                            <th>코스명</th>
2544                            <th>길이</th>
2545                            <th>시간</th>
2546                            <th>
2546난이도</th>
2547                        </tr>
2548                        </thead>
2549                        <tbody>
2550                        <tr v-for="(item, index) in courseList">
2551                            <td>{{item.locationName}}</td>
2552                            <td>
2553                                <a :href="'/course-detail-view.do?crs_idx=' + item.idx" style="text-decoration: none;color: inherit;" title="코스 상세 보기">
2554                                    {{item.name}}
2555                                </a>
2556                            </td>
2557                            <td>{{item.distance}}km</td>
2558                            <td>{{getDistanceString(item.hour, item.minute)}}</td>
2559                            <td>{{getLevelString(item.level,)}}</td>
2560
2561                        </tr>
2562                        </tbody>
2563                    </table>
2564                </div>
2565
2566                <nav class="text-center mt-5">
2567                    <ul class="pagination">
2568
2569                    </ul>
2570                </nav>
2571
2572            </div>
2573
2574            <!-- 모바일 용 코스 안내 -->
2575            <div class="container d-md-none d-block">
2576                <div class="clearfix position-relative">
2577                    <h3 class="mb-0">코리아둘레길 코스</h3>
2578                </div>
2579                <div>
2580                    <table class="table table-bordered">
2581                        <caption>코리아둘레길 코스</caption>
2582                        <colgroup>
2583                            <col width="*">
2584                            <col width="40%">
2585                        </colgroup>
2586                        <thead class="text-center">
2587                        <tr>
2588                            <th>지역<br/>코스명</th>
2589                            <th>길이<br/>시간<br/>난이도</th>
2590                        </tr>
2591                        </thead>
2592                        <tbody>
2593                        <tr v-for="(item, index) in courseList">
2594                            <td>{{item.locationName}}<br>{{item.name}}</td>
2595                            <td class="text-center">
2596                                {{item.distance}}km <br/>
2597                                {{getDistanceString(item.hour, item.minute)}} <br/>
2598                                {{getLevelString(item.level,)}}
2599                            </td>
2600                        </tr>
2601                        </tbody>
2602                    </table>
2603                </div>
2604
2605                <nav class="text-center mt-5">
2606                    <ul class="pagination">
2607
2608                    </ul>
2609                </nav>
2610
2611            </div>
2612
2613            <div class="container">
2614                <div class="text-center mb-50">
2615                    <h2>
2616                        한 걸음 한 걸음 대한민국을 발견하는 길,<br/>
2617                        코리아둘레길로 여행자 여러분을 초대합니다.
2618                    </h2>
2619                </div>
2620                <div class="row">
2621                    <a class="col-xl-3 col-lg-6" href="/haeparang-introduction.do" title="클릭 시 해파랑길 소개로 이동">
2622                        <div class="box mb-4">
2623                            <div class="icon-box">
2624                                <i title="해파랑길 로고" class="icon icon-haparang-logo"></i>
2625                            </div>
2626                            <h4 class="S-Core font-weight-bold mt-27">해파랑길</h4>
2627                            <p class="font-size-16 text-muted mt-12 mb-32">
2628                                동해안의 주요 해수욕장과 일출 명소,
2629                                관동팔경을 두루 거치는 아름다운 해변 길
2630                            </p>
2631                            <ul class="list-inline mb-0 text-left">
2632                                <li class="my-2">
2633                                    <div class="row">
2634                                        <div class="col-4">
2635                                            <i class="icon icon-location-blue mr-1" ></i><span>시작점</span>
2636                                        </div>
2637                                        <div class="col-8 pl-0">
2638                                            <span class="text-muted">부산 오륙도 해맞이공원</span>
2639                                        </div>
2640                                    </div>
2641                                </li>
2642                                <li class="my-2">
2643                                    <div class="row">
2644                                        <div class="col-4">
2645                                            <i class="icon icon-location-blue mr-1"></i><span>종착점</span>
2646                                        </div>
2647                                        <div class="col-8 pl-0">
2648                                            <span class="text-muted">~ 강원도 고성 통일전망대</span>
2649                                        </div>
2650                                    </div>
2651                                </li>
2652                                <li class="my-2">
2653                                    <div class="row">
2654                                        <div class="col-4">
2655                                            <i class="icon icon-course-blue mr-1"></i><span>코스</span>
2656                                        </div>
2657                                        <div class="col-8 pl-0">
2658                                            <span class="text-muted">50개 코스</span>
2659                                        </div>
2660                                    </div>
2661                                </li>
2662                                <li class="my-2">
2663                                    <div class="row">
2664                                        <div class="col-4">
2665                                            <i class="icon icon-street-blue mr-1"></i><span>길이</span>
2666                                        </div>
2667                                        <div class="col-8 pl-0">
2668                                            <span class="text-muted">750 km</span>
2669                                        </div>
2670                                    </div>
2671                                </li>
2672                            </ul>
2673
2674                            <span class="d-inline-block line"></span>
2675
2676                            <p class="date mb-0 text-center font-weight-normal">
2677                                2016년 5월 개통
2678                            </p>
2679                        </div>
2680                    </a>
2681
2682                    <a class="col-xl-3 col-lg-6" href="/namparang-introduction.do" title="클릭 시 남파랑길 소개로 이동">
2683                        <div class="box mb-4">
2684                            <div class="icon-box">
2685                                <i title="남파랑길 로고" class="icon icon-namparang-logo"></i>
2686                            </div>
2687                            <h4 class="S-Core font-weight-bold mt-27">남파랑길</h4>
2688                            <p class="font-size-16 text-muted mt-12 mb-32">
2689                                한려수도와 다도해의 섬들을 지나며 남해의
2690                                아름다움을 느끼는 낭만의 길
2691                            </p>
2692                            <ul class="list-inline mb-0 text-left">
2693
2694                                <li class="my-2">
2695                                    <div class="row">
2696                                        <div class="col-4">
2697                                            <i class="icon icon-location-blue mr-1"></i><span>시작점</span>
2698                                        </div>
2699                                        <div class="col-8 pl-0">
2700                                            <span class="text-muted">부산 오륙도 해맞이공원</span>
2701                                        </div>
2702                                    </div>
2703                                </li>
2704                                <li class="my-2">
2705                                    <div class="row">
2706                                        <div class="col-4">
2707                                            <i class="icon icon-location-blue mr-1"></i><span>종착점</span>
2708                                        </div>
2709                                        <div class="col-8 pl-0">
2710                                            <span class="text-muted">~ 해남군 땅끝탑</span>
2711                                        </div>
2712                                    </div>
2713                                </li>
2714                                <li class="my-2">
2715                                    <div class="row">
2716                                        <div class="col-4">
2717                                            <i class="icon icon-course-blue mr-1"></i><span>코스</span>
2718                                        </div>
2719                                        <div class="col-8 pl-0">
2720                                            <span class="text-muted">90개 코스</span>
2721                                        </div>
2722                                    </div>
2723                                </li>
2724                                <li class="my-2">
2725                                    <div class="row">
2726                                        <div class="col-4">
2727                                            <i class="icon icon-street-blue mr-1"></i><span>길이</span>
2728                                        </div>
2729                                        <div class="col-8 pl-0">
2730                                            <span class="text-muted">1,470 km</span>
2731                                        </div>
2732                                    </div>
2733                                </li>
2734                            </ul>
2735
2736                            <span class="d-inline-block line"></span>
2737
2738                            <p class="date mb-0 text-center font-weight-normal">
2739                                2020년 10월 개통
2740                            </p>
2741                        </div>
2742                    </a>
2743
2744                    <a class="col-xl-3 col-lg-6" href="/seohaerang-introduction.do" title="클릭 시 서해랑길 소개로 이동">
2745                        <div class="box mb-4">
2746                            <div class="icon-box">
2747                                <i title="서해랑길 로고" class="icon icon-separang-logo"></i>
2748                            </div>
2749                            <h4 class="S-Core font-weight-bold mt-27">서해랑길</h4>
2750                            <p class="font-size-16 text-muted mt-12 mb-32">
2751                                해지는 바다와 갯벌 속 삶의 모습들을
2752                                만나는 생태와 역사의 길
2753                            </p>
2754                            <ul class="list-inline mb-0 text-left">
2755
2756                                <li class="my-2">
2757                                    <div class="row">
2758                                        <div class="col-4">
2759                                            <i class="icon icon-location-blue mr-1"></i><span>시작점</span>
2760                                        </div>
2761                                        <div class="col-8 pl-0">
2762                                            <span class="text-muted">전라남도 해남군 땅끝탑</span>
2763                                        </div>
2764                                    </div>
2765                                </li>
2766                                <li class="my-2">
2767                                    <div class="row">
2768                                        <div class="col-4">
2769                                            <i class="icon icon-location-blue mr-1"></i><span>종착점</span>
2770                                        </div>
2771                                        <div class="col-8 pl-0">
2772                                            <span class="text-muted">~ 인천 강화 평화전망대</span>
2773                                        </div>
2774                                    </div>
2775                                </li>
2776                                <li class="my-2">
2777                                    <div class="row">
2778                                        <div class="col-4">
2779                                            <i class="icon icon-course-blue mr-1"></i><span>코스</span>
2780                                        </div>
2781                                        <div class="col-8 pl-0">
2782                                            <span class="text-muted">109개 코스</span>
2783                                        </div>
2784                                    </div>
2785                                </li>
2786                                <li class="my-2">
2787                                    <div class="row">
2788                                        <div class="col-4">
2789                                            <i class="icon icon-street-blue mr-1"></i><span>길이</span>
2790                                        </div>
2791                                        <div class="col-8 pl-0">
2792                                            <span class="text-muted">1,800 km</span>
2793                                        </div>
2794                                    </div>
2795                                </li>
2796                            </ul>
2797
2798                            <span class="d-inline-block line"></span>
2799
2800                            <p class="date mb-0 text-center font-weight-normal">
2801                                2022년 6월 개통
2802                            </p>
2803                        </div>
2804                    </a>
2805                    <a class="col-xl-3 col-lg-6" href="/dmz-introduction.do" title="클릭 시 DMZ 평화의 길로 소개로 이동">
2806                        <div class="box ">
2807                            <div class="icon-box">
2808                                <i title="DMZ 평화의 길 로고" class="icon icon-dmz-logo"></i>
2809                            </div>
2810                            <h4 class="S-Core font-weight-bold mt-27">DMZ 평화의 길</h4>
2811                            <p class="font-size-16 text-muted mt-12 mb-32">
2812                                아픈 역사의 상흔과 살아있는 생태 자원을
2813                                만나는 화합과 평화의 길
2814                            </p>
2815                            <ul class="list-inline mb-0 text-left">
2816                                <li class="my-2">
2817                                    <div class="row">
2818                                        <div class="col-4">
2819                                            <i class="icon icon-location-blue mr-1"></i><span>시작점</span>
2820                                        </div>
2821                                        <div class="col-8 pl-0">
2822                                            <span class="text-muted">인천 강화 평화전망대</span>
2823                                        </div>
2824                                    </div>
2825                                </li>
2826                                <li class="my-2">
2827                                    <div class="row">
2828                                        <div class="col-4">
2829                                            <i class="icon icon-location-blue mr-1"></i><span>종착점</span>
2830                                        </div>
2831                                        <div class="col-8 pl-0">
2832                                            <span class="text-muted">~ 강원도 고성 통일전망대</span>
2833                                        </div>
2834                                    </div>
2835                                </li>
2836                                <li class="my-2">
2837                                    <div class="row">
2838                                        <div class="col-4">
2839                                            <i class="icon icon-course-blue mr-1"></i><span>코스</span>
2840                                        </div>
2841                                        <div class="col-8 pl-0">
2842                                            <span class="text-muted">35개 코스</span>
2843                                        </div>
2844                                    </div>
2845                                </li>
2846                                <li class="my-2">
2847                                    <div class="row">
2848                                        <div class="col-4">
2849                                            <i class="icon icon-street-blue mr-1"></i><span>길이</span>
2850                                        </div>
2851                                        <div class="col-8 pl-0">
2852                                            <span class="text-muted">510 km</span>
2853                                        </div>
2854                                    </div>
2855                                </li>
2856                            </ul>
2857
2858                            <span class="d-inline-block line"></span>
2859
2860                            <p class="date mb-0 text-center font-weight-normal">
2861                                2024년 9월 개통
2862                            </p>
2863                        </div>
2864                    </a>
2865                </div>
2866            </div>
2867        </div>
2868
2869    </section>
2870
2871
2872</main>
2873
2874<!-- 모바일 맵 상세보기 -->
2875<div id="mapMobileModal" class="modal fade" tabindex="-1">
2876    <div class="modal-dialog">
2877        <div class="modal-content">
2878            <div class="modal-header justify-content-center">
2879                <h4 class="mb-0 text-center S-Core">지도 상세보기</h4>
2880                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2881                    <span aria-hidden="true"></span>
2882                </button>
2883            </div>
2884            <div class="modal-body p-0">
2885
2886                <div class="map position-relative">
2887                    <div class="container text-center">
2888
2889                        <div class="set position-absolute">
2890                            
2891                        </div>
2892
2893                        <div class="expand" id="mapPlMi">
2894                            <div class="zoom plus" id="mapZoomIn" onclick="mapObj.zoomIn()">
2895                                <i class="icon icon-plus" title="지도 확대"></i>
2896                            </div>
2897                            <div class="zoom minus mt-1" id="mapZoomOut" onclick="mapObj.zoomOut()">
2898                                <i class="icon icon-minus" title="지도 축소"></i>
2899                            </div>
2900                        </div>
2901                    </div>
2902
2903                    <div id="map" class="map-wrap"></div>
2904
2905                </div>
2906
2907
2908            </div>
2909        </div>
2910    </div>
2911</div>
2912
2913<!-- Openlayer 팝업용 -->
2914<div id="popup" class="ol-popup" inert>
2915    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
2916    <div id="popup-content"></div>
2917</div>
2918
2919
2920
2921
2922
2923
2924
2925
2926
2927<script src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=ew8mu2aat2&submodules=geocoder"></script>
vendor: 2 bytes, line 2927
2927
2928<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3673d4ff6136ff193e82a4c59866fb2"></script>
2928
2929
2930
2931<script src="/js/csmap.js?version=250310"></script>
vendor: 2 bytes, line 2931
2931
2932<script src="/js/koreatrailsMap.js?version=1"></script>
2932
2933
2934<script>
2935    var vueData = {
2936        courseList : [],
2937    };
2938
2939    var appVue = new Vue({
2940        el: '#appVue',
2941        mixins: [courseMixin],
2942        data: vueData,
2943        mounted: function () {
2944
2945        }
2946    });
2947</script>
2947
2948
2949<script>
2950    $(document).ready(function() {
2951        getMarkerLocation('KT');
2952
2953        var modalCnt = 0;
2954        $('#mapMobileModal').on('shown.bs.modal', function (e) {
2955            if (modalCnt == 0) {
2956                $("#map").attr("id", "maps");
2957                initMaps();
2958                modalCnt = 1;
2959            }
2960        });
2961    });
2962
2963    function changeLocation(type) {
2964        switch(type) {
2965            case 'HE': location.href = '/haeparang-introduction.do'; break;
2966            case 'NA': location.href = '/namparang-introduction.do'; break;
2967            case 'SEO': location.href = '/seohaerang-introduction.do'; break;
2968            case 'DMZ': location.href = '/dmz-introduction.do'; break;
2969        }
2970    }
2971</script>
2971
2972
2973
2974
2975
2976
2977
2978
2979<script>
2980function changeTabState(event) {
2981    var value = event.target.value;
2982    if(value == "10-0-1") {
2983        location.href = '/koreatrail-introduction.do';
2984    } else if(value == "10-0-2") {
2985        location.href = '/koreatrail-users-guide.do';
2986    }
2987}
2988</script>
2988
2989
2990
2991
2992
2993
2994
2995
2996
2997    <footer>
2998        <div class="inner">
2999            <ul class="service-box d-flex justify-content-center">
3000                <li>
3001                    <a href="https://knto.or.kr/helpdeskPolicyPrivacyHomepage" target="_blank" title="새 창 열림"><b><u>개인정보 처리방침</u></b></a>
3002                </li>
3003                <li>
3004                    <a href="javascript:void(0)" onclick="clauseCall(5, 'clause_id5', '#more-set-locprivacy')" class="popup-open">개인위치정보 처리방침</a>
3005                </li>
3006                    
3007                <li>
3008                    <a href="javascript:void(0)" onclick="clauseCall(3, 'clause_id3', '#more-set-location')" class="popup-open">위치기반서비스 이용약관</a>
3009                </li>
3010                <li>
3011                    <a href="javascript:void(0)" onclick="clauseCall(1, 'clause_id1', '#more-set-terms')" class="popup-open">회원약관</a>
3012                </li>
3013                <li>
3014                    <a href="#">관련 사이트</a>
3015                    <ul class="site-list">
3016                        <li><a href="/dmz-main.do" target="_blank">DMZ 평화의 길 테마노선</a></li>
3017                        <li><a href="https://blog.naver.com/koreatrails" target="_blank" title="새 창 열림">두루누비 네이버 블로그</a></li>
3018                        <li><a href="https://www.facebook.com/durunubi.kr" target="_blank" title="새 창 열림">두루누비 페이스북</a></li>
3019                        <li><a href="https://www.instagram.com/durunubi/" target="_blank" title="새 창 열림">두루누비 인스타그램</a></li>
3020                        <li><a href="https://kto.visitkorea.or.kr/" target="_blank" title="새 창 열림">한국관광공사</a></li>
3021                        <li><a href="https://korean.visitkorea.or.kr" target="_blank" title="새 창 열림">대한민국 구석구석</a></li>
3022                        <li><a href="https://pass.knto.or.kr/" target="_blank" title="새 창 열림">Tour One Pass</a></li>
3023                    </ul>
3024                </li>
3025            </ul>
3026            <div class="footer-txt">
3027                <p class="margin-top-26 margin-bottom-12">
3028                    (26464) 강원도 원주시 세계로 10 (반곡동) 한국관광공사<br>통신판매업신고 : 제2022-강원원주-0381호
3029                </p>
3030                <p>&copy; Copyright by KTO. ALL RIGHTS RESERVED.</p>
3031            </div>
3032
3033            
3034            <div class="wa-mark">
3035                <span class="hd-element">과학기술정보통신부 WA(WEB접근성) 품질인증 마크, 웹와치(WebWatch) 2026.02.17 ~ 2027.02.16</span>
3036            </div>
3037            
3038        </div>
3039    </footer>
3040
3041
3042
3043    
3044
3045
3046
3047
3048    <!-- fnr2024-event.do는 이벤트 페이지 내에도 애널리틱스가 들어가 중복 카운트를 막기 위해 배제 -->
3049
3050    <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 69 bytes, lines 3050-3051
3050
3051    <script async src="https://www.googletagmanager.com/gtag/js?id=
3051G-MNF0DEM3SY
vendor: 17 bytes, lines 3051-3052
3051"></script>
3052    
3052<script>
3053        window.dataLayer = window.dataLayer || [];
3054        function gtag(){dataLayer.push(arguments);}
3055
3056        
3057
3058
3059        <!-- test -->
3060        gtag('js', new Date());
3061
3062        gtag('config', 'G-MNF0DEM3SY');
3063    </script>
3063
3064
3065
3066<script>
3067    // 브라우저 보안정책 관련 TOP 로그인 처리 (파이어폭스 로그인 안되는 문제)
3068    window.addEventListener('message', function(event) {
3069        if (event.origin === 'https://pass.knto.or.kr' && event.data.type === 'login_success') {
3070            var redirectUrl = event.data.redirectUrl;
3071            window.location.href = redirectUrl;
3072        }
3073    }, false);
3074</script>
3074
3075
3076<script>
3077    //헤더에 있던 스크립트 이관
3078
3079    <!-- 검색 리뉴얼 start-->
3080
3081    $(document).ready(function() {
3082        searchRegion();
3083
3084        //메뉴 팝업 포커스가 다시 x로 돌아가도록
3085        //TODO : 추후 보완 필요
3086        /*$('#menuStampButton')[0].addEventListener('focusout', function(event){
3087            $('#menuClose').focus();
3088        });*/
3089    });
3090
3091    function topPressEnter() {
3092        if(window.event.keyCode == 13){
3093            searchPageGo(false);
3094        }
3095    }
3096
3097    function searchPageGo(isCourse) {
3098        var $qt = $("#qt");
3099        var $menu = $("#menu");
3100
3101        if($qt.val().trim() === '') {
3102            alert("검색어를 입력하세요");
3103            return;
3104        }
3105
3106        if(isCourse) {
3107            $menu.val('course');
3108        }
3109
3110        var menu = $menu.val();
3111        var qt = $qt.val();
3112
3113        if(",텔레,세탁,테더,코인,업비트,환치기,환전사기,알트,손대손,무통,암호화폐" +
3114            ",그룹방,유령작업,텔문의,연식계정,케이구매,아이i스,브액구매,작대기구매,마양구매,떨구매,떨액구매,얼음술구매,우유주사,".indexOf(qt) > -1){
3115            alert("지원하지 않는 검색어입니다.");
3116            return;
3117        }
3118
3119        if(menu === "course") {
3120            var rgn_idx = $("select[name=dosi]").val();
3121            var dist_num = $("select[name=sigun]").val();
3122            var crs_dstnc = $("input[name=distance]:checked").val();
3123            var crs_totl_rqrm_hour = $("input[name=time]:checked").val();
3124            var level_no = $("input[name=difficulty]:checked").val();
3125            location.href = "/search-result.do?qt=" + qt + "&menu=" + menu + "&rgn_idx=" + rgn_idx + "&dist_num=" + dist_num + "&crs_dstnc=" + crs_dstnc + "&crs_totl_rqrm_hour=" + crs_totl_rqrm_hour + "&level_no=" + level_no;
3126        } else {
3127            location.href = "/search-result.do?qt=" + qt + "&menu=" + menu;
3128        }
3129    }
3130
3131    function searchRegion() {
3132        $.ajax({
3133            cache: false,
3134            async: false,
3135            type: 'GET',
3136            dataType: 'json',
3137            url: '/api/regions',
3138            success: function(result) {
3139                var html = '<option value="" selected>도/시 전체</option>';
3140                $.each(result.response, function(index, data) {
3141                    html = html + '<option value="' + data.rgn_Idx + '">' + data.rgn_Kor_Nm_Short + '</option>';
3142                });
3143
3144                $('#dosi').html(html);
3145                //$this.searchDistrict(false);
3146            }
3147        })
3148    }
3149
3150    function searchDistrict() {
3151        $.ajax({
3152            cache: false,
3153            async: false,
3154            type: 'GET',
3155            dataType: 'json',
3156            data: {rgn_Idx: $('#dosi').val()},
3157            url: '/api/region/detail',
3158            success: function(result) {
3159                var html = '<option value="" selected>시/군 전체</option>';
3160                $.each(result.response, function(index, data) {
3161                    html = html + '<option value="' + data.dist_Num + '">' + data.dist_Kor_Nm + '</option>';
3162                });
3163
3164                $('#sigun').html(html);
3165            }
3166        })
3167    }
3168
3169    function resetCourseFilter() {
3170        $('#sigun').html('<option value="">시/군 전체</option>');
3171        $('#sigun').val('');
3172        $('#dosi').val('');
3173        $('input:radio[name=distance]').removeAttr('checked');
3174        $('input:radio[name=distance]:radio[value=""]').prop('checked', true);
3175        $('input:radio[name=time]').removeAttr('checked');
3176        $('input:radio[name=time]:radio[value=""]').prop('checked', true);
3177        $('input:radio[name=difficulty]').removeAttr('checked');
3178        $('input:radio[name=difficulty]:radio[value=""]').prop('checked', true);
3179    }
3180
3181    let focusOutObject = null;
3182    function clickSearchIcon(focusOutObj) {
3183        if(focusOutObj) {
3184            focusOutObject = focusOutObj;
3185        }else{
3186            focusOutObject = null;
3187        }
3188
3189        // "real", "day", "week", "month", "recommend"
3190        popularSearch('day');
3191        popularSearch('recommend');
3192
3193        $('#search').addClass('active');
3194        setTimeout(function() {
3195            $('#search .close').focus();
3196        }, 100);
3197    }
3198
3199    function searchPopupClose(){
3200        $('#search').removeClass('active');
3201
3202        if(focusOutObject){
3203            //클로즈 버튼 클릭 시 돌아갈 포커스를 지정한 경우
3204            focusOutObject.focus();
3205        }else{
3206            $('#icon-search-bk').focus(); //헤더로 돌아가도록
3207        }
3208    }
3209
3210    let relateSiteOpen = false;
3211    function relateSiteKeyboard(){
3212        if(relateSiteOpen){
3213
3214        }else{
3215
3216        }
3217    }
3218
3219    function popularSearch(type) {
3220        $.ajax({
3221            type: "GET",
3222            dataType: "json",
3223            url: "/popularSearch?type=" + type,
3224            success: function (result) {
3225                var $div;
3226                var html = '';
3227
3228                switch(type) {
3229                    case "day": $div = $("#popularKeyword"); break;
3230                    case "recommend": $div = $("#recommendKeyword"); break;
3231                }
3232
3233                $.each(result.response, function(key, value) {
3234
3235                    if(value === null) {
3236                        return true;
3237                    }
3238
3239                    html = html + '<a href="javascript:void(0);" class="keyword" onclick="$(\'#qt\').val(\'' + value + '\'); searchPageGo(false); ">' + value + '</a>'
3240                });
3241
3242                $div.html(html);
3243            }
3244        });
3245    }
3246    //---검색 리뉴얼 end
3247
3248    function loginCheckCommon() {
3249        //로그인 상태인 지 확인
3250        if (confirm("로그인 후 이용 가능합니다.")) {
3251            $('#loginOnePassModal').modal('show');
3252        } else {
3253            return false;
3254        }
3255    }
3256
3257
3258    function logout() {
3259        if (confirm("로그아웃하시겠습니까?"/*"로그아웃하시겠습니까?"*/)) {
3260            location.href = "./12-1-0-logOut.do";
3261        }
3262    }
3263
3264    function needAuthenticationTOP() {
3265        alert("로그인 후 이용 가능합니다.");
3266        if ($("#sitemap").hasClass("active")) {
3267            $('#sitemap').removeClass('active');
3268        }
3269        $('#loginOnePassModal').modal('show');
3270    }
3271</script>
3271
3272
3273<!-- 검색 팝업 활성화  -->
3274<script>
3275    $(document).on('click', '#search .search-back', function(){
3276        $('#search').removeClass('active');
3277        $('#icon-search-bk').focus();
3278    });
3279
3280    $(document).on('click', '#sitemap .sitemap-back', function(){
3281        $('#sitemap').removeClass('active');
3282        $('#icon-sitebar-bk').focus();
3283    });
3284</script>
3284
3285
3286<script>
3287    //헤더 메뉴
3288    $('body').on('mouseenter', '.main-menu', function(){
3289        $('.header-top').addClass('open');
3290        $('header .logo').addClass('open');
3291    });
3292    $('body').on('mouseleave', '.main-menu', function(){
3293        $('.header-top').removeClass('open');
3294        $('header .logo').removeClass('open');
3295    });
3296
3297    $('body').on('focusin', '.main-menu a', function(){
3298        $('.header-top').addClass('open');
3299        $('header .logo').addClass('open');
3300    });
3301    $('body').on('focusin', '.logo, .util a', function(){
3302        $('.header-top').removeClass('open');
3303        $('header .logo').removeClass('open');
3304    });
3305
3306
3307    //퀵메뉴
3308
3309    $('body').on('click', '.q_menu_onoff', function(){
3310        if($('#quickMenu').hasClass('open')){
3311            $('#quickMenu').removeClass('open');
3312            $('#quickMenu-open').attr('title', '퀵메뉴 열기');
3313
3314            $('#quickMenu-body').attr('inert', '');
3315        }else{
3316            $('#quickMenu').addClass('open');
3317            $('.quickMenu').focus();
3318            $('#quickMenu-open').attr('title', '퀵메뉴 닫기');
3319
3320            $('#quickMenu-body').removeAttr('inert');
3321        }
3322    });
3323
3324    $('body').on('click', '.icon-language', function(){
3325        if($('#language').hasClass('on')){
3326            $('#language').removeClass('on');
3327            $('.icon-language').attr('title', '언어 선택 레이어 팝업 열기');
3328        }else{
3329            $('#language').addClass('on');
3330            $('.icon-language').focus();
3331            $('.icon-language').attr('title', '언어 선택 레이어 팝업 열기');
3332        }
3333    });
3334
3335
3336    $('body').on('focusin', '.q_menu_wrap a', function(){
3337        $('#quickMenu').addClass('open');
3338    });
3339    $('body').on('focusin', '.q_menu', function(){
3340        $('#quickMenu').removeClass('open');
3341    });
3342    $('body').on('focusin', '.icon-sitebar', function(){
3343        $('#quickMenu').removeClass('open');
3344    });
3345
3346
3347
3348    //모바일메뉴
3349    $('body').on('click', '#mobile-gnb .mobile-munu-wrap > li > a', function(){
3350        $('#mobile-gnb .mobile-munu-wrap > li > a').removeClass('on');
3351        $(this).addClass('on');
3352    });
3353
3354    function mobileMenu() {
3355        if($('.icon-sitebar.mobile').hasClass('open')){
3356            $('.icon-sitebar.mobile').removeClass('open');
3357            $('#mobile-gnb').removeClass('open');
3358            $('body,html').css({'overflow-y':'auto', 'height':'auto'});
3359            $('body,html').css('overflow-y', 'auto');
3360            $('.header-top').removeClass('open');
3361            $('header .logo').removeClass('open');
3362        }else{
3363            $('.icon-sitebar.mobile').addClass('open');
3364            $('#mobile-gnb').addClass('open');
3365            $('body,html').css({'overflow-y':'hidden', 'height':'100%'});
3366            $('body,html').css('overflow-y', 'hidden');
3367            $('.header-top').addClass('open');
3368            $('header .logo').addClass('open');
3369        }
3370    }
3371
3372    function mypageClick(){
3373        if($('#mypage').hasClass('on')){
3374            $('#mypage').removeClass('on');
3375            $('.icon-login').attr('title', '마이페이지 레이어 팝업 열기');
3376        }else{
3377            $('#mypage').addClass('on');
3378            $('.icon-login').focus();
3379            $('.icon-login').attr('title', '마이페이지 레이어 팝업 닫기');
3380        }
3381    }
3382
3383
3384</script>
3384
3385
3386

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.