추천 여행지 여행 가서 뭐 할지 고민돼? 여행 미션 긁고 확인해 봐! 여행지 다시 뽑기 이미지로 저장하기 랜덤 여행 뽑기 공유하기 #contents { width: 100%; padding: 0 0 70px 0; } .tit_cont.titleType1, .wrap_contView .box_modInfo, .db_cont_detail, .recommendation_group { width: 940px; margin: 0 auto; } .btm_team.team_marg { width: 940px; margin: 40px auto 10px; } .random_travel { position: relative; max-width: 1920px; padding: 3.6rem 0; margin: 0 auto; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=9a9b8bbb-f4fc-4a0e-b03f-02736f4f84f6) center 0 / cover no-repeat; } .random_travel .mo { display: none; } .random_travel .inr { max-width: 94rem; margin: 0 auto; } .random_travel .title { margin: 0 auto; text-align: center; } .random_travel p { font-size: 2rem; color: #000; } .random_travel .title img { width: 69.47%; } .random_travel .gatcha_body { width: 25.53%; height: auto; aspect-ratio: 192 / 314; position: relative; margin: -13rem auto 0; padding-top: 2.5rem; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=ace05f2e-d415-41fe-9b15-3d3ad386a188) center / 100% 100% no-repeat; } .random_travel .gatcha_body .box { position: relative; width: 93.75%; height: auto; aspect-ratio: 1 / 1.05; margin: 0 auto; overflow: hidden; } .random_travel .gatcha_body .bottom { position: relative; z-index: 3; height: 100px; } /* 여행지 뽑기 공 */ .random_travel .red_ball_1 { top: 36.44%; left: 20.34%; } .random_travel .red_ball_2 { top: 46.61%; left: 44.49%; transform: rotate(100deg); } .random_travel .red_ball_3 { top: 65.68%; left: 21.19%; } .random_travel .blue_ball_1 { top: 13.47%; left: 41.95%; transform: rotate(100deg); } .random_travel .blue_ball_2 { top: 47.88%; left: 27.54%; } .random_travel .blue_ball_3 { top: 50.85%; left: 66.53%; transform: rotate(-90deg); } .random_travel .orange_ball_1 { top: 25.19%; left: 64.8%; } .random_travel .orange_ball_2 { top: 69.92%; left: 38.14%; transform: rotate(100deg); } .random_travel .green_ball_1 { top: 49.07%; left: 8.24%; } .random_travel .green_ball_2 { top: 65.68%; left: 55.08%; } .random_travel .lever { position: relative; margin: 0 auto; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=f4d1d67f-ffbe-4a1d-9d44-33ba1f64a93c) center / 100% 100% no-repeat; width: 23.33%; height: auto; aspect-ratio: 1 / 1; } .random_travel .tool_lever { position: absolute; top: 38%; left: 50%; transform: translateX(-50%); width: 83.33%; } .random_travel .tool_lever.turn { animation: lever_rotate 0.3s 1 linear forwards; } @keyframes lever_rotate { 0% { transform: translateX(-50%) rotate(0) } 100% { transform: translateX(-50%) rotate(90deg) } } /* 여행지 결과 공 */ .random_travel .slot { position: relative; width: 36.67%; height: auto; aspect-ratio: 88 / 56; margin: 1rem auto 0; overflow: hidden; } .random_travel .prize { position: absolute; width: 22.32%; height: auto; } .random_travel .slot .prize { width: 50%; } .random_travel .prize img { width: 100%; height: 100%; } .random_travel .prize.rewarded { left: 49%; display: none; } .random_travel .prize.rewarded.show { display: block; cursor: pointer; } .random_travel .prize.rewarded.dropping { top: -48%; left: 50%; animation: dropping 1s forwards ease-out; } @keyframes dropping { 0% { transform: translateX(-51%) translateY(-20px) rotate(0) } 30% { transform: translateX(-52%) translateY(20px) rotate(0) } 60% { transform: translateX(-48%) translateY(36px) rotate(-40deg) } 90% { transform: translateX(-49%) translateY(38px) rotate(-58deg) } 100% { transform: translateX(-51%) translateY(38px) rotate(-60deg) } } /* 여행지 결과 안내 손 */ .random_travel .hand_guide { position: absolute; width: 10rem; height: 4.6rem; bottom: 0.5rem; right: 1rem; opacity: 0; transition: 0.3s; pointer-events: none; } .random_travel .hand_guide img { width: 100%; height: 100%; } .random_travel .hand_guide.show { opacity: 1; animation: handBounce 1.2s ease-out infinite; } @keyframes handBounce { 0% { transform: translateY(0) } 40% { transform: translateY(-1rem) } 50% { transform: translateY(-1.2rem) } 60% { transform: translateY(-1rem) } 100% { transform: translateY(0) } } /* 여행지 뽑기 버튼*/ .random_travel .btn_play { display: block; margin: 2rem auto 0; cursor: pointer; } .random_travel .btn_play img { width: 100%; } .random_travel .btn_play.disabled { pointer-events: none; cursor: auto; } .boom_ball { position: fixed; left: 50%; top: 50%; width: 8rem; height: 8rem; transform: translate(-50%, -50%); transform-origin: center center; z-index: 9999; pointer-events: none; } .confetti_piece { pointer-events: none; } /* 결과 레이어 팝업 */ .random_travel .layer_popup { opacity: 0; visibility: hidden; transition: none; filter: drop-shadow(10px 10px 20px rgba(193, 7, 190, 0.4)); background: #fff; border-radius: 30px; position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); max-width: 64rem; width: 100%; height: auto; z-index: 100; } .random_travel .layer_popup::before { content: ''; position: absolute; top: -8rem; left: 50%; transform: translateX(-50%); display: inline-block; width: 71.88%; height: auto; aspect-ratio: 460 / 200; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=53dd8e4d-30f1-42fe-8b58-498d6ba6d63e) 0 0 / 100% 100% no-repeat; } .random_travel .layer_popup::-webkit-scrollbar { width: 5px; } .random_travel .layer_popup::-webkit-scrollbar-thumb { border-radius: 2px; background: #BBB; } .random_travel .layer_popup::-webkit-scrollbar-track { border-radius: 2px; background: #EEE; } .random_travel .layer_popup img { width: 100%; } .random_travel .layer_popup .popup_content { margin-top: -5.2rem; padding: 0 2rem 2rem 2rem; position: relative; } .random_travel .layer_popup .popup_header { display: block; position: relative; } .random_travel .layer_popup .popup_header .stit { display: flex; align-items: center; justify-content: center; width: fit-content; height: 4.1rem; padding: 0 2rem; margin: 0 auto; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; border-radius: 2rem; } .random_travel .layer_popup .popup_header .area { display: block; padding: 1rem 0; text-align: center; font-size: 5.2rem; font-weight: 800; line-height: 1; } .random_travel .layer_popup .popup_header .explain { font-size: 2.1rem; line-height: 1.3; color: #000; text-align: center; } .random_travel .layer_popup .popup_header .img_city { position: absolute; top: -2rem; left: 0; } /* 지역별 스타일 */ .seoul .popup_header .stit { color: #660BB6; background: #F2EAFF; } .seoul .popup_header .area { color: #8222D7; -webkit-text-stroke: 1px #660BB6; } .seoul .popup_header .img_city { width: 27.67%; } .gyeonggi .popup_header .stit { color: #4BA712; background: #ECF6DA; } .gyeonggi .popup_header .area { color: #69C72F; -webkit-text-stroke: 1px #4BA712; } .gyeonggi .popup_header .img_city { width: 27.17%; } .incheon .popup_header .stit { color: #0679CC; background: #E9F6FF; } .incheon .popup_header .area { color: #1C9DF9; -webkit-text-stroke: 1px #0679CC; } .incheon .popup_header .img_city { width: 25.5%; } .daejeon .popup_header .stit { color: #C107BE; background: #FAEDFA; } .daejeon .popup_header .area { color: #DE42DB; -webkit-text-stroke: 1px #C107BE; } .daejeon .popup_header .img_city { width: 17.5%; } .busan .popup_header .stit { color: #060FC2; background: #EFF0FF; } .busan .popup_header .area { color: #1F29E6; -webkit-text-stroke: 1px #060FC2; } .busan .popup_header .img_city { width: 22.17%; } .daegu .popup_header .stit { color: #D07301; background: #FBF6E3; } .daegu .popup_header .area { color: #F2A427; -webkit-text-stroke: 1px #D07301; } .daegu .popup_header .img_city { width: 22.33%; } .gwangju .popup_header .stit { color: #BB0A36; background: #FFEDF4; } .gwangju .popup_header .area { color: #EF436E; -webkit-text-stroke: 1px #BB0A36; } .gwangju .popup_header .img_city { width: 27.33%; } .ulsan .popup_header .stit { color: #D64000; background: #FBEEE8; } .ulsan .popup_header .area { color: #F07039; -webkit-text-stroke: 1px #D64000; } .ulsan .popup_header .img_city { width: 22.33%; } .chungcheong .popup_header .stit { color: #5E6A00; background: #F7FAE2; } .chungcheong .popup_header .area { color: #ACBD2C; -webkit-text-stroke: 1px #5E6A00; } .chungcheong .popup_header .img_city { width: 25.67%; } .gangwon .popup_header .stit { color: #00912C; background: #E7FBED; } .gangwon .popup_header .area { color: #33B259; -webkit-text-stroke: 1px #00912C; } .gangwon .popup_header .img_city { width: 22.67%; } .gyeongsang .popup_header .stit { color: #923300; background: #FAF0E4; } .gyeongsang .popup_header .area { color: #B15C2F; -webkit-text-stroke: 1px #923300; } .gyeongsang .popup_header .img_city { width: 21.67%; } .jeolla .popup_header .stit { color: #910000; background: #FFEAEA; } .jeolla .popup_header .area { color: #B81414; -webkit-text-stroke: 1px #910000; } .jeolla .popup_header .img_city { width: 22.83%; } .jeju .popup_header .stit { color: #009689; background: #E3F7F9; } .jeju .popup_header .area { color: #0BC3A4; -webkit-text-stroke: 1px #009689; } .jeju .popup_header .img_city { width: 28.33%; } .random_travel .layer_popup .popup_travel { padding: 2rem 1.4rem 1.4rem; margin-top: 2rem; background: #F5F4FF; border-radius: 2rem; } .random_travel .layer_popup .popup_travel .tit { display: flex; align-items: center; justify-content: center; gap: 0.6rem; line-height: 1; font-size: 2.4rem; font-weight: 600; color: #000; } .random_travel .layer_popup .popup_travel .tit::before { content: ''; display: inline-block; width: 1.6rem; height: 2.2rem; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=96a20d39-79a6-4ec3-9b43-59a96949e7ea) 0 0 / 100% 100% no-repeat; } .random_travel .layer_popup .popup_travel .spot_wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 1.6rem; margin-top: 1.8rem; } .random_travel .layer_popup .popup_travel .spot_wrap a { border-radius: 1.6rem; height: 16rem; border: 1px solid #ccc; overflow: hidden; background: #fff; } .random_travel .layer_popup .popup_travel .spot_wrap a .img { position: relative; height: 71.25%; } .random_travel .layer_popup .popup_travel .spot_wrap a .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .random_travel .layer_popup .popup_travel .spot_wrap a .img .copyright { position: absolute; bottom: 0.8rem; right: 0.8rem; display: block; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1; z-index: 1; letter-spacing: -0.03em; } .random_travel .layer_popup .popup_travel .spot_wrap a .img.copy::after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); } .random_travel .layer_popup .popup_travel .spot_wrap a .spot_name { display: flex; align-items: center; justify-content: center; color: #000; height: calc(100% - 71.25%); font-size: 1.9rem; letter-spacing: -0.02em; font-weight: 700; } .random_travel .layer_popup .scratch_wrap { position: relative; width: 100%; height: auto; aspect-ratio: 600 / 130; margin-top: 2.4rem; } .random_travel .layer_popup .scratch_wrap #scratchCanvas { position: absolute; width: 100% !important; height: 100% !important; } .random_travel .layer_popup .scratch_wrap #scratchCanvas.fade-out { transition: opacity 0.5s ease; opacity: 0; } .random_travel .layer_popup .scratch_wrap .before_scratch { position: absolute; top: 0; left: 0; } .random_travel .layer_popup .scratch_box { align-content: center; text-align: center; width: 100%; height: 100%; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=8c7033c6-6f09-4df2-b176-8e405f1dee0b) 0 0 / 100% 100% no-repeat; } .random_travel .layer_popup .scratch_box span { display: inline-block; align-content: center; height: 3.7rem; padding: 0 2rem; background: #fff; border-radius: 99rem; color: #000; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; } .random_travel .layer_popup .scratch_box p { color: #fff; font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.3; margin-top: 0.8rem; } .random_travel .layer_popup .popup_btn { display: flex; justify-content: center; gap: 1.6rem; margin-top: 2.4rem; } .random_travel .layer_popup .popup_btn button { flex: 1; height: 5.2rem; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; color: #fff; border-radius: 99rem; } .random_travel .layer_popup .popup_btn button::after { content: ''; display: inline-block; margin-left: 0.8rem; width: 0.8rem; height: 1.3rem; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=aedca3f0-54f7-4a18-bbfb-40e328b09b6f) 0 0 / 100% 100% no-repeat; } .random_travel .layer_popup .popup_btn button.replay { background: #443CB4; border: 2px solid #443CB4; } .random_travel .layer_popup .popup_btn button.share { background: #CA3393; border: 2px solid #CA3393; } .random_travel .layer_popup .popup_btn button.save_img { color: #ccc; border: 2px solid #ccc; } .random_travel .layer_popup .popup_btn button.save_img::after { background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=0e6e1372-5adc-49c9-aaf8-95d8aa6f90ee) 0 0 / 100% auto no-repeat; } .random_travel .layer_popup .popup_btn button.save_img.on { color: #443CB4; border: 2px solid #443CB4; } .random_travel .layer_popup .popup_btn button.save_img.on::after { background-position: 0 -1.3rem; } @media all and (min-width: 768px) and (max-width: 1023px) { .random_travel .btn_play img.pc{display:block} #contents { padding: 0 0 24px 0; } .user_expression { padding: 30px 15px; } .tit_cont.titleType1, .wrap_contView .box_modInfo, .db_cont_detail, .recommendation_group { width: auto; margin: 0 15px; } .btm_team.team_marg { width: auto; margin: 20px 15px 0; } .ai_review_summary { padding: 0 15px; } .random_travel .inr { padding: 0 2.4rem; } .random_travel img { width: 100%; } .random_travel .title img { width: 72.47%; } .random_travel .gatcha_body { width: 34%; margin-top: -9rem; } .random_travel .prize.rewarded.dropping { top: -55%; } .random_travel .hand_guide { width: 8rem; height: 3.6rem; } .random_travel .layer_popup { max-width: calc(100% - 4.8rem); width: 68.09%; } .random_travel .layer_popup::before { top: -6rem } .random_travel .layer_popup .popup_content { padding: 0 1.5rem 1.5rem 1.5rem; margin-top: -4.2rem; } .random_travel .layer_popup .popup_header .stit { height: 2.8rem; padding: 0 1.4rem; font-size: 1.7rem; } .random_travel .layer_popup .popup_header .area { font-size: 4.2rem; padding: 0.6rem 0; } .random_travel .layer_popup .popup_header .explain { font-size: 1.5rem; } .random_travel .layer_popup .popup_header .img_city { top: -1.2rem; } .random_travel .layer_popup .popup_travel { padding: 1.5rem 0.8rem 0.8rem; margin-top: 1.5rem; } .random_travel .layer_popup .popup_travel .tit { font-size: 1.8rem; } .random_travel .layer_popup .popup_travel .tit::before { width: 1.3rem; height: 1.8rem; } .random_travel .layer_popup .popup_travel .spot_wrap { gap: 1rem; margin-top: 1.2rem; } .random_travel .layer_popup .popup_travel .spot_wrap a { height: 10rem; } .random_travel .layer_popup .popup_travel .spot_wrap a .img .copyright { font-size: 0.8rem; right: 0.4rem; bottom: 0.4rem; } .random_travel .layer_popup .popup_travel .spot_wrap a .spot_name { font-size: 1.3rem; } .random_travel .layer_popup .scratch_wrap { margin-top: 1.8rem; } .random_travel .layer_popup .scratch_box span { height: 2.4rem; padding: 0 1.2rem; line-height: 1; font-size: 1.5rem; } .random_travel .layer_popup .scratch_box p { font-size: 1.3rem; margin-top: 0.4rem; } .random_travel .layer_popup .popup_btn { margin-top: 1.8rem; gap: 1rem; } .random_travel .layer_popup .popup_btn button { font-size: 1.1rem; height: 4.2rem; } .random_travel .layer_popup .popup_btn button::after { width: 0.5rem; height: 0.8rem; margin-left: 0.6rem; vertical-align: -0.05rem; } .random_travel .layer_popup .popup_btn button.save_img.on::after { background-position: 0 -0.8rem; } } @media all and (max-width: 767px) { #contents { padding: 0 0 24px 0; } .user_expression { padding: 30px 15px; } .ai_review_summary { padding: 0 15px; } .tit_cont.titleType1, .wrap_contView .box_modInfo, .db_cont_detail, .recommendation_group { width: auto; margin: 0 15px; } .btm_team.team_marg { width: auto; margin: 20px 15px 0; } .random_travel { overflow: hidden; width: 100%; height: auto; padding: 15.38vw 0; background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=9c72fa06-d159-49a6-a56f-3b13c173f763) 0 0 / 100% 100% no-repeat; } .random_travel .inr { padding: 0; } .random_travel .pc { display: none; } .random_travel .mo { display: block; } .random_travel img { width: 100%; } .random_travel .title img { width: 100%; } .random_travel .gatcha_body { width: 49.23%; height: auto; aspect-ratio: 192 / 314; margin: -10.26vw auto 0; padding-top: 5.13vw; } /* 여행지 결과 공 */ .random_travel .prize { width: 10.26vw; height: 10.26vw; } .random_travel .slot .prize { width: 10.26vw; height: 10.26vw; } @keyframes dropping { 0% { transform: translateX(-51%) translateY(-3.13vw) rotate(0) } 30% { transform: translateX(-52%) translateY(3.13vw) rotate(0) } 60% { transform: translateX(-48%) translateY(5.63vw) rotate(-40deg) } 90% { transform: translateX(-49%) translateY(5.94vw) rotate(-58deg) } 100% { transform: translateX(-51%) translateY(5.94vw) rotate(-60deg) } } .random_travel .prize.rewarded.dropping { top: -40%; } /* 여행지 뽑기 버튼*/ .random_travel .btn_play { width: 42.82%; height: auto; } /* 여행지 결과 안내 손 */ .random_travel .hand_guide { width: 20.51vw; height: 9.23vw; bottom: 2.05vw; } @keyframes handBounce { 0% { transform: translateY(0) } 40% { transform: translateY(-1.56vw) } 50% { transform: translateY(-1.88vw) } 60% { transform: translateY(-1.56vw) } 100% { transform: translateY(0) } } .random_travel .btn_play { margin: 6.41vw auto 0; } /* 결과 레이어 팝업 */ .random_travel .layer_popup { max-width: none; width: calc(100% - 8.21vw); height: auto; bottom: auto; top: calc(50% + 4.5vw); transform: translate(-50%, -50%); border-radius: 4.10vw; } .random_travel .layer_popup::before { width: 72.07%; height: auto; aspect-ratio: 258 / 120; top: -12.54vw; } .random_travel .layer_popup .popup_content { margin-top: -7.69vw; padding: 0 3.08vw 3.08vw 3.08vw; border-radius: 4.10vw; } .random_travel .layer_popup .popup_header .stit { height: 6.92vw; line-height: 6.92vw; font-size: 4.10vw; padding: 0 3.08vw; } .random_travel .layer_popup .popup_header .area { font-size: 8.72vw; padding: 1.54vw 0; } .random_travel .layer_popup .popup_header .explain { font-size: 3.59vw; } .random_travel .layer_popup .popup_header .img_city { top: -3.08vw; } .seoul .popup_header .img_city { width: 26.67vw; } .gyeonggi .popup_header .img_city { width: 25.64vw; } .incheon .popup_header .img_city { width: 23.08vw; } .daejeon .popup_header .img_city { width: 20vw; } .busan .popup_header .img_city { width: 23.08vw; } .daegu .popup_header .img_city { width: 23.08vw; } .gwangju .popup_header .img_city { width: 23.59vw; } .ulsan .popup_header .img_city { width: 24.62vw; } .chungcheong .popup_header .img_city { width: 25.13vw; } .gangwon .popup_header .img_city { width: 23.08vw; } .gyeongsang .popup_header .img_city { width: 23.08vw; } .jeolla .popup_header .img_city { width: 23.08vw; } .jeju .popup_header .img_city { width: 25.64vw; } .random_travel .layer_popup .popup_travel { padding: 4.10vw 6.15vw; border-radius: 4.10vw; margin-top: 4.10vw; } .random_travel .layer_popup .popup_travel .tit { font-size: 4.10vw; } .random_travel .layer_popup .popup_travel .tit::before { width: 2.56vw; height: 3.59vw; } .random_travel .layer_popup .popup_travel .spot_wrap { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas:top topleft right; margin-top: 3.08vw; gap: 4.10vw; } .random_travel .layer_popup .popup_travel .spot_wrap a { height: auto; width: 34.36vw; border-radius: 3.08vw; } .random_travel .layer_popup .popup_travel .spot_wrap a:first-child { grid-area: top; justify-self: center; width: 34.36vw; } .random_travel .layer_popup .popup_travel .spot_wrap a:nth-child(2) { grid-area: left; } .random_travel .layer_popup .popup_travel .spot_wrap a:nth-child(3) { grid-area: right; } .random_travel .layer_popup .popup_travel .spot_wrap a .img { height: 17.95vw; } .random_travel .layer_popup .popup_travel .spot_wrap a .img .copyright { font-size: 2.05vw; bottom: 1.03vw; right: 1.03vw; letter-spacing: -0.02em; } .random_travel .layer_popup .popup_travel .spot_wrap a .spot_name { font-size: 3.33vw; height: 7.44vw; } .random_travel .layer_popup .scratch_wrap { height: 23.08vw; } .random_travel .layer_popup .scratch_box { background: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=23623a6f-811a-47c2-a40e-abe988bbf5e9) 0 0 / 100% 100% no-repeat; } .random_travel .layer_popup .scratch_box span { height: 6.67vw; line-height: 7.18vw; padding: 0 3.59vw; font-size: 3.59vw; } .random_travel .layer_popup .scratch_box p { font-size: 3.33vw; letter-spacing: -0.03em; } .random_travel .layer_popup .popup_btn { gap: 4.36vw; margin-top: 4.10vw; } .random_travel .layer_popup .popup_btn button { height: 11.28vw; font-size: 3.08vw; line-height: 1.2; letter-spacing: -0.02em; } .random_travel .layer_popup .popup_btn button::after { display: inline-block; width: 1.54vw; height: 2.56vw; margin-left: 1.03vw; vertical-align: -0.5px; } .random_travel .layer_popup .popup_btn button.save_img { border: 1px solid #ccc; } .random_travel .layer_popup .popup_btn button.save_img.on { border: 1px solid #443CB4; } .random_travel .layer_popup .popup_btn button.save_img.on::after { background-position: 0 -2.56vw; } } function createScratchCover() { const coverImg = new Image(); const isMobile = window.innerWidth { ctx.globalCompositeOperation = 'source-over'; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; } resetScratchCanvas(); var brushRadius = 20; var isDrawing = false; function getPointerPos(e) { const rect = canvas.getBoundingClientRect(); const clientX = e.clientX || e.touches[0].clientX; const clientY = e.clientY || e.touches[0].clientY; return {x: (clientX - rect.left) * dpr, y: (clientY - rect.top) * dpr}; } function scratch(e) { if (!isDrawing) return; const pos = getPointerPos(e); ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.arc(pos.x, pos.y, brushRadius * dpr, 0, Math.PI * 2); ctx.fill(); } canvas.addEventListener('mousedown', e => { isDrawing = true; scratch(e); }); canvas.addEventListener('mousemove', scratch); canvas.addEventListener('mouseup', () => isDrawing = false); canvas.addEventListener('touchstart', e => { isDrawing = true; scratch(e); e.preventDefault(); }); canvas.addEventListener('touchmove', scratch); canvas.addEventListener('touchend', () => isDrawing = false); function getScratchedPercent() { const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const total = imageData.data.length / 4; let cleared = 0; for (let i = 3; i { const newType = window.innerWidth 30) { canvas.classList.add('fade-out'); setTimeout(() => { canvas.style.pointerEvents = 'none'; }, 800); $saveImg.disabled = false; $saveImg.classList.add('on'); } } canvas.addEventListener('mouseup', checkResult); canvas.addEventListener('touchend', checkResult); var $playBtn = document.getElementById('playBtn'); var $saveImg = document.getElementById('btnSaveImg'); var $lever = document.getElementById('lever'); var $reward = document.querySelector('.prize.rewarded'); var $rewardBall = document.querySelector('.prize.rewarded img'); var $handGuide = document.querySelector('.hand_guide'); var $prizes = document.querySelectorAll('.box>.prize'); var $layerPopup = document.querySelector('.layer_popup'); var $popupClose = document.querySelector('.popup_close'); var dropTimer, handGuideTimer; var ballInitialPositions = []; var initialRotations = []; $prizes.forEach((ball, idx) => { ballInitialPositions[idx] = {left: ball.offsetLeft, top: ball.offsetTop}; const transform = getComputedStyle(ball).transform; let angle = 0; if (transform && transform !== 'none') { const values = transform.split('(')[1].split(')')[0].split(','); const a = parseFloat(values[0]); const b = parseFloat(values[1]); angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); } initialRotations[idx] = angle; }); var ballLoops = []; function shuffleBalls() { const duration = 3; const balls = Array.from($prizes); ballLoops.forEach(stop => stop && stop()); ballLoops = []; balls.forEach((ball, idx) => { const maxOffsetX = 20; const maxOffsetY = 10; const maxRotation = 20; let x = 0, y = 0; let vx = (Math.random() - 0.5) * 8; let vy = (Math.random() - 0.5) * 8; let rotation = 20; let vrot = (Math.random() - 0.5) * 8; let elapsed = 0; let running = true; function animate() { if (!running) return; elapsed += 1 / 60; if (elapsed >= duration) { running = false; gsap.to(ball, {y: 0, rotation: initialRotations[idx], duration: 0.2, ease: power2.out}); return; } x += vx; y += vy; rotation += vrot; if (x > maxOffsetX || x maxOffsetY || y maxRotation || rotation running = false; }); } function playGotcha() { if ($playBtn.disabled) return; $playBtn.disabled = true; $playBtn.classList.add('disabled'); $lever.classList.add('turn'); clearTimeout(dropTimer); clearTimeout(handGuideTimer); $reward.style.display = 'none'; $reward.style.opacity = '0'; $reward.classList.remove('popping', 'show'); renderPlacePopup(); resetScratchCanvas(); setTimeout(() => { shuffleBalls(); dropTimer = setTimeout(() => { $rewardBall.src = getRandomRewardBallImage(); $reward.style.display = 'block'; $reward.classList.add('dropping', 'show'); $reward.style.opacity = '1'; }, 3000); handGuideTimer = setTimeout(() => { $handGuide.classList.add('show'); }, 4000); }, 400); } function openReward(e) { e.preventDefault(); e.stopPropagation(); $handGuide.classList.remove('show'); if ($reward.classList.contains('popping')) return; $reward.classList.add('popping'); const imgSrc = $reward.querySelector('img').src; $reward.style.opacity = '0'; const rect = $reward.getBoundingClientRect(); const startX = rect.left + rect.width / 2; const startY = rect.top + rect.height / 2; const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; const $boomBall = document.createElement('img'); $boomBall.src = imgSrc; $boomBall.className = 'boom_ball'; document.body.appendChild($boomBall); gsap.set($boomBall, { position: 'fixed', left: startX, top: startY, xPercent: -50, yPercent: -50, scale: 0, rotation: 0, zIndex: 9999, opacity: 1 }); const tl = gsap.timeline(); tl.to($boomBall, {scale: 1, duration: 0.3, ease: back.out(1.7)}, 0).to($boomBall, { duration: 0.6, left: centerX, top: centerY, rotation: 360, ease: power1.inOut }, 0).to($boomBall, {scale: 0.85, duration: 0.15, yoyo: true, repeat: 2, ease: power1.inOut}); tl.to($boomBall, { scale: 1.5, opacity: 0, duration: 0.5, ease: power3.out, onStart: () => { launchConfetti(centerX, centerY); } }); function launchConfetti(centerX, centerY, yOffset = 100) { const container = document.querySelector('.random_travel'); const box = container.getBoundingClientRect(); const confettiCount = 120; const colors = [#FF3B3B, #FF8C3B, #FFDA3B, #3BFF80, #3BFFCC, #3BB3FF, #B43BFF, #FF6EC7, #410694, #DF5DB8]; function getLocalPos(x, y) { return {x: x - box.left, y: y - box.top}; } for (let i = 0; i = 768 && window.innerWidth conf.remove() }); } } tl.eventCallback(onComplete, () => { $boomBall.remove(); $layerPopup.classList.add('active'); gsap.fromTo($layerPopup, {opacity: 0}, { opacity: 1, duration: 0.5, ease: power2.out, onStart: () => { $layerPopup.style.visibility = 'visible'; $layerPopup.style.display = 'block'; } }); $reward.classList.remove('show', 'popping'); $reward.style.display = 'none'; $reward.style.opacity = ''; }); } function hidePopup() { gsap.to($layerPopup, { opacity: 0, duration: 0.4, ease: power2.out, onComplete: () => { resetGotcha(); } }); } function resetGotcha() { clearTimeout(dropTimer); clearTimeout(handGuideTimer); canvas.classList.remove('fade-out'); canvas.style.pointerEvents = 'auto'; ctx.globalCompositeOperation = 'source-over'; ctx.clearRect(0, 0, canvas.width, canvas.height); $layerPopup.style.opacity = '0'; $layerPopup.style.visibility = 'hidden'; $prizes.forEach((ball, idx) => { if (ballLoops[idx]) ballLoops[idx](); gsap.set(ball, {x: 0, y: 0, rotation: initialRotations[idx]}); ball.style.left = ballInitialPositions[idx].left + 'px'; ball.style.top = ballInitialPositions[idx].top + 'px'; ball.style.opacity = '1'; ball.style.display = 'block'; }); $reward.classList.remove('dropping', 'show', 'popping'); $reward.style.display = 'none'; $reward.style.opacity = '0'; $reward.style.transform = 'translateY(0)'; $handGuide.classList.remove('show'); $playBtn.disabled = false; $playBtn.classList.remove('disabled'); $lever.classList.remove('turn'); $saveImg.disabled = true; $saveImg.classList.remove('on'); } function renderPlacePopup() { let place; let safety = 0; const MAX_TRY = 50; do { place = getRandomProperty(); safety++; if (safety > MAX_TRY) { console.warn('새로운 place.cl 을 찾지 못했습니다. 그대로 진행합니다.'); break; } } while (!checkCartridge(place)); const mission = shuffle(place.mi)[0]; const $popupContent = document.getElementById('popupContent'); $popupContent.className = 'popup_content ' + place.cl; document.getElementById('popupDesc').textContent = place.ds; document.getElementById('popupArea').textContent = place.nm; const $cityImg = document.getElementById('popupCityImg'); $cityImg.src = place.ci; $cityImg.crossOrigin = 'anonymous'; $cityImg.alt = place.nm; document.getElementById('popupExplain').innerHTML = place.cp; const spot1 = place.p1; const $spot1Link = document.getElementById('spot1Link'); const $spot1ImgWrap = document.getElementById('spot1ImgWrap'); const $spot1Img = document.getElementById('spot1Img'); const $spot1Copy = document.getElementById('spot1Copy'); const $spot1Name = document.getElementById('spot1Name'); $spot1Link.href = spot1.db || '#'; $spot1Img.src = spot1.im; $spot1Img.crossOrigin = 'anonymous'; $spot1Name.textContent = spot1.tt; if (spot1.cr) { $spot1Copy.textContent = spot1.cr; $spot1Copy.style.display = ''; $spot1ImgWrap.classList.add('copy'); } else { $spot1Copy.textContent = ''; $spot1Copy.style.display = 'none'; $spot1ImgWrap.classList.remove('copy'); } const spot2 = place.p2; const $spot2Link = document.getElementById('spot2Link'); const $spot2ImgWrap = document.getElementById('spot2ImgWrap'); const $spot2Img = document.getElementById('spot2Img'); const $spot2Copy = document.getElementById('spot2Copy'); const $spot2Name = document.getElementById('spot2Name'); $spot2Link.href = spot2.db || '#'; $spot2Img.src = spot2.im; $spot2Img.crossOrigin = 'anonymous'; $spot2Name.textContent = spot2.tt; if (spot2.cr) { $spot2Copy.textContent = spot2.cr; $spot2Copy.style.display = ''; $spot2ImgWrap.classList.add('copy'); } else { $spot2Copy.textContent = ''; $spot2Copy.style.display = 'none'; $spot2ImgWrap.classList.remove('copy'); } const spot3 = place.p3; const $spot3Link = document.getElementById('spot3Link'); const $spot3ImgWrap = document.getElementById('spot3ImgWrap'); const $spot3Img = document.getElementById('spot3Img'); const $spot3Copy = document.getElementById('spot3Copy'); const $spot3Name = document.getElementById('spot3Name'); $spot3Link.href = spot3.db || '#'; $spot3Img.src = spot3.im; $spot3Img.crossOrigin = 'anonymous'; $spot3Name.textContent = spot3.tt; if (spot3.cr) { $spot3Copy.textContent = spot3.cr; $spot3Copy.style.display = ''; $spot3ImgWrap.classList.add('copy'); } else { $spot3Copy.textContent = ''; $spot3Copy.style.display = 'none'; $spot3ImgWrap.classList.remove('copy'); } setupSpotLink($spot1Link, spot1.db); setupSpotLink($spot2Link, spot2.db); setupSpotLink($spot3Link, spot3.db); document.getElementById('missionTitle').textContent = mission.tt; document.getElementById('missionText').innerHTML = mission.ct; } function setupSpotLink($link, url) { $link.onclick = function (e) { e.preventDefault(); if (!url || url === '#') { return; } if (window.appYn === 'Y') { if (confirm('선택하신 여행지 상세 페이지로 이동하시겠습니까?')) { location.href = url; } } else { window.open(url, '_blank'); } }; } function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } function getRandomRewardBallImage() { const url = new URL('https://cdn.visitkorea.or.kr/img/call?cmd=VIEW'); const items = [ 1a6f93f8-8530-4fc0-ad58-34c1c8bc4e9f, /* Blue */ 7511c936-d1be-4da8-adcf-a95d9dc0d60c, /* Green */ 025d951b-6a7f-4139-86be-f9a24f52ce32, /* Red */ e2473cde-e85f-42e1-af58-728a1213dbd3 /* Orange */ ]; url.searchParams.set('id', shuffle(items)[0]); return url.href; } function copyToClipboard() { const url = location.href; const success = () => alert('URL을 클립보드에 복사했습니다.\n함께 하고 싶은 사람들에게 공유해볼까요?'); const failure = (err) => console.error('클립보드에 URL을 복사하지 못했습니다. : ', err); try { if (navigator.clipboard) { navigator.clipboard .writeText(url) .then(success) .catch(failure); } else { const tempInput = document.createElement('textarea'); tempInput.value = url; document.body.appendChild(tempInput); tempInput.select(); const successful = document.execCommand('copy'); if (successful) { success(); } else { failure('execCommand를 통한 복사 실패'); } document.body.removeChild(tempInput); } } catch (error) { failure(error); } } async function downloadRewordImage() { try { const canvas = await createRewordImage(); if (!canvas) { console.log('이미지 생성 중 오류가 발생했습니다.'); return; } if (appYn === 'Y') { const device = getDevice(); const dataUrl = canvas.toDataURL('image/png'); if (device === 'Android') { callAppNativeFunction({'imageUrl': dataUrl}, 'imageDownload'); return; } if (device === 'iOS') { const href = 'app://savePhoto?src=' + dataUrl; const link = document.createElement(a); link.href = href; document.body.appendChild(link); link.click(); document.body.removeChild(link); return; } } var kakaoInApp = isKakaoInApp(); var isMobileFlag = (typeof mobileYn !== 'undefined' && mobileYn === 'Y'); if (kakaoInApp || isMobileFlag) { try { const url = await uploadCanvasAndGetImageUrl(canvas); const link = document.createElement('a'); link.href = url; link.download = `랜덤여행_뽑기_결과_${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } catch (e) { alert('카카오 인앱 다운로드 처리 중 오류:', e); const blob = await canvasToBlob(canvas); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `랜덤여행_뽑기_결과_${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } return; } const blob = await canvasToBlob(canvas); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `랜덤여행_뽑기_결과_${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } catch (err) { console.error(이미지 다운로드 중 오류:, err); } } async function createRewordImage() { const popup = document.querySelector('div.layer_popup'); const rewordImage = document.querySelector('div.popup_content'); if (!popup || !rewordImage) { console.error('레이어 팝업 또는 캡쳐 대상 요소를 찾을 수 없습니다.'); return ; } const wrapper = document.createElement('div'); wrapper.style.position = 'fixed'; wrapper.style.left = '-99999px'; wrapper.style.top = '0'; wrapper.style.pointerEvents = 'none'; const cloneImage = rewordImage.cloneNode(true); wrapper.appendChild(cloneImage); popup.appendChild(wrapper); const removeTarget = cloneImage.querySelector('div.popup_btn'); if (removeTarget) { removeTarget.remove(); } const canvas = await html2canvas(cloneImage, { useCORS: true, allowTaint: false }); popup.removeChild(wrapper); return rescaleImage(canvas); } function rescaleImage(canvas) { const extraTop = Math.floor(canvas.height * 0.05); const rescaledCanvas = document.createElement('canvas'); rescaledCanvas.width = canvas.width; rescaledCanvas.height = canvas.height + extraTop; const ctx = rescaledCanvas.getContext('2d'); ctx.fillStyle = #fff; ctx.fillRect(0, 0, rescaledCanvas.width, rescaledCanvas.height); ctx.drawImage(canvas, 0, extraTop); return rescaledCanvas; } function isKakaoInApp() { var ua = navigator.userAgent.toLowerCase(); return ua.indexOf('kakaotalk') > -1; } function canvasToBlob(canvas) { return new Promise(function (resolve, reject) { canvas.toBlob(function (blob) { if (!blob) { reject(new Error('Blob 생성 실패')); return; } resolve(blob); }, 'image/png'); }); } async function uploadCanvasAndGetImageUrl(canvas) { const blob = await canvasToBlob(canvas); const fileName = 'canvas_img_' + Date.now() + '.png'; const formData = new FormData(); formData.append('file', blob, fileName); const imgSaveResultData = imgServerSave(formData); const imgPath = JSON.parse(imgSaveResultData.responseText).body.result[0].fullPath; if (!imgPath) { alert('이미지 업로드 실패 (imgPath 비어 있음)'); throw new Error('이미지 업로드 실패 (imgPath 비어 있음)'); } const result = setUploadImg(imgPath); const imgId = result.responseJSON.body.imgId; if (!imgId) { alert('이미지 ID 발급 실패'); throw new Error('이미지 ID 발급 실패'); } return 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=' + imgId + '&inflow=randomTravel'; } function imgServerSave(image) { return $.ajax({ url: mainUploadUrl + '?isUserUpload=true&inflow=dress', type: 'POST', cache: false, contentType: false, processData: false, data: image, async: false }); } function setUploadImg(imgPath) { let cmd = 'RECOM_IMAGE_SAVE'; return $.ajax({ url: mainurl + '/call', dataType: 'json', type: 'POST', data: { cmd: cmd, imgPath: imgPath }, async: false }); } document.addEventListener('click', (e) => { const $play = e.target.closest('button.btn_play'); if ($play) { playGotcha(); } const $reward = e.target.closest('.prize.rewarded'); if ($reward) { openReward(e); } const $replay = e.target.closest('button.replay'); if ($replay) { hidePopup(); } const $save = e.target.closest('button.save_img'); if ($save) { downloadRewordImage(); } const $share = e.target.closest('button.share'); if ($share) { copyToClipboard(); } }); var cartridge = window.cartridge || []; function checkCartridge(item) { if (cartridge.length === 13) { cartridge = []; } const bullet = item.cl; if (cartridge.includes(bullet)) { return false; } cartridge.push(bullet); return true; } function getRandomProperty() { const items = [ { cl: 'seoul', nm: '서울', ds: '대한민국의 수도', cp: '500년 역사와 힙스터 감성의 현재가 공존하는 곳! 세계가 열광하는 K-문화의 중심지로 떠나봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=7f4ccafb-806c-406a-be46-c70f6f63d55b', p1: { tt: '헌릉과 인릉', cr: 'ⓒ 서울특별시청 정원도시국', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=0dce091c-1a1c-4851-a428-e84b018023d5', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=dc1158ac-23a0-4102-90a4-0e43a4e333bc' }, p2: { tt: '국립중앙박물관', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=8650a617-96f2-4e59-9a6a-e8cd50370350', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=0363da87-ef3b-4c21-8508-34f70dda31fb' }, p3: { tt: '서울숲', cr: 'ⓒ 한국관광공사 포토코리아 - 임태원', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=3c9f4f0e-765b-4979-917f-fa9d847e977b', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=02f56ab2-5e53-470f-8ec3-95cf8fb88aa4' }, mi: [ { tt: '헌릉과 인릉 홍살문 앞에서 인증샷 남기기', ct: '태종과 인릉은 태종과 순조, 그리고 왕비들의 무덤이야. 붉은 홍살문 앞에서 인증샷을 찍어봐!' }, { tt: '국립중앙박물관 반가사유상 앞에서 멍때리기', ct: '사유의 방에는 국보 반가사유상 2점이 나란히 전시되어 있어. 절제된 미가 돋보이는 반가사유상을 보며, 생각에 잠겨봐. ' }, { tt: '서울숲에서 피크닉 즐기기', ct: '복잡한 도심 속 힐링 명소에서 여유를 즐겨봐. 치킨, 떡볶이 등 인근 맛집 먹거리도 함께 즐겨봐!' } ] },{ cl: 'gyeonggi', nm: '경기도', ds: '자연을 품은 도심', cp: '빌딩 숲과 푸른 자연, 짜릿한 액티비티까지 가득한 곳! 다채로운 매력 즐기러 가자!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=5beea0e7-00ac-4d3f-8752-f478c1c47f9a', p1: { tt: '한국민속촌', cr: 'ⓒ 한국관광공사-라이브스튜디오', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=a9ed24f3-dc06-413f-9675-7f12da6bb9e9', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=bbb988ee-f8e9-43e7-8fdf-691cd78a68ba' }, p2: { tt: '궁평항', cr: 'ⓒ 한국관광공사 포토코리아 -송재근', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=0a3ef2c6-a99c-4fe9-a653-3ac487c60043', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=2a099a85-cc53-41bc-9d34-44830fd6f643' }, p3: { tt: '서울대공원', cr: 'ⓒ 한국관광공사 포토코리아-김지연', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=93d53004-b803-49d2-b10a-426c58ab6706', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=e53a8783-309b-4c79-8381-d6eab8b40937' }, mi: [ { tt: '한국민속촌에서 조선판 롤플레잉 하기', ct: '조선시대 생활을 유쾌하게 경험하고 싶다면 한국 민속촌으로! 사또, 구미호 등 테마 한복을 입고 다양한 미션에도 참여해 봐!' }, { tt: '궁평항의 일몰을 타임랩스로 촬영하기', ct: '일몰 명소로 유명한 궁평항에서 실시간으로 붉게 물들어가는 하늘을 카메라에 담아봐! ' }, { tt: '내가 가장 좋아하는 동물과 시밀러룩 입기', ct: '가장 좋아하는 동물과 비슷한 의상 또는 아이템을 준비해서 동물과 함께 셀카를 찍고 SNS에 공유해봐!' } ] }, { cl: 'incheon', nm: '인천', ds: '세계로 통하는 관문', cp: '개항장 거리에서 레트로 감성 폭발! 이국적인 매력과 바다 뷰 즐기러 가자!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=c0eba9f3-57b2-477f-84c2-988569b032f6', p1: { tt: '강화 전등사', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d00d4675-b0c3-4994-9dc0-e6c74f4ca724', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=cb007a7c-ee6e-4f23-adfe-34f3adf1d19c' }, p2: { tt: '송도 센트럴파크', cr: 'ⓒ 한국관광공사 포토코리아-전종훈', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=c800c747-c29b-478f-947e-34769e0afa40', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=87e613c6-f7c3-4d3f-8d60-13c2f8166b95' }, p3: { tt: '신포국제시장', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=1af78035-5c72-40f3-a7d2-1907c1ed2f78', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=28e67b66-ad86-458a-b1d1-42c120c07d29' }, mi: [ { tt: '전등사 죽림다원에서 전통차 마시기', ct: '고즈넉한 사찰의 여유로움을 즐기며 시간을 보내고, 경내를 걸으며 느낀 감정을 글로 남겨봐!' }, { tt: '송도 센트럴파크 전망대에서 야경 촬영하기', ct: 'G타워 전망대에서는 송도의 스카이라인이 한눈에 들어와! 아름다운 야경을 파노라마 사진으로 남겨봐!' }, { tt: '신포국제시장 대표 먹거리 즐기기', ct: '개항 이후 형성된 전통시장에서 시장의 인심을 느껴봐. 단맛과 짠맛의 조화가 환상적인 닭강정과 공갈빵도 먹어봐!' } ] }, { cl: 'daejeon', nm: '대전', ds: '첨단 과학 기술의 산실', cp: '전국 어디서든 찾기 좋은 교통의 허브이자 맛집 천국! 먹거리, 즐길 거리 가득한 유잼 도시로 함께 가자!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=584c24b8-12b3-441e-9461-b482a07567bc', p1: { tt: '장태산자연휴양림', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=61d16a11-3507-4fd1-b136-1f3f4ae869af', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=ee78a56f-8fb0-421e-b714-b20472df9e00' }, p2: { tt: '국립중앙과학관', cr: 'ⓒ 트래블리더 15기 오소현', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=32495697-e0ca-47d0-8175-674149c0fb63', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=eea09e24-5043-489f-ab6a-7267f405f9e2' }, p3: { tt: '뿌리공원', cr: 'ⓒ 김지영 여행작가', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=8d658c0d-0ae9-470c-b191-f127585eed01', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=3732f9d0-1c50-45ef-81d6-0b25a83e86da' }, mi: [ { tt: '장태산자연휴양림 트레킹 후 감상 기록하기', ct: '메타세쿼이아 숲길을 걸으며 경치를 만끽한 후, 길을 걸으며 느낀 감상을 글로 기록해 봐!' }, { tt: '국립중앙과학관에서 인증샷 찍기', ct: '뫼비우스의 띠, 뉴턴 동상 등 야외 조형물을 감상하고 마음에 드는 동상을 골라 인증샷을 남겨 봐.' }, { tt: '뿌리공원에서 내 성씨 조형물 찾기', ct: '244개의 성씨 조형물 중에서 내 성씨를 찾고, 문중의 유래를 읽으며 나의 뿌리에 대해 생각해 봐!' } ] }, { cl: 'busan', nm: '부산', ds: '해양 문화의 중심지', cp: '바다와 산, 도심이 어우러진 여행 종합 선물 세트! 일상을 벗어나 자유로움 만끽하러 가자!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=a5bfd8b1-82d6-4323-a853-5a12ea4e5f16', p1: { tt: '광안리해수욕장', cr: 'ⓒ 한국관광공사-부산관광공사', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=bd61a410-7f61-41ab-b5ef-8be8284a9344', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=98763dd6-119d-4e32-910e-a40652334bda' }, p2: { tt: '해동용궁사', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=2b0b06c7-8c83-4368-baa5-186199f7db9c', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=2116b628-ded9-42c2-b17e-99d17b5b65e4' }, p3: { tt: '감천문화마을', cr: 'ⓒ 한국관광공사-부산관광공사', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=2d0929b4-3367-4862-a92e-1729f7cde3bd', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=bfafd82a-6e0a-4455-bfef-10e478de5ca4' }, mi: [ { tt: '광안리해수욕장 \'나만의 PICK 3\' 선정하기', ct: '아름다운 바다와 광안대교, 전망 좋은 카페와 귀여운 소품샵 등 광안리에서 가장 마음에 드는 3가지를 골라 SNS에 공유해봐!' }, { tt: '해동용궁사 해수관음대불 앞에서 소원 빌기', ct: '한 가지 소원은 반드시 들어준다는 전설이 있는 거대한 관음대불 앞에서 꼭 이뤄지길 바라는 소원을 빌어봐.' }, { tt: '감천문화마을 소품숍에서 나를 위한 선물 사기', ct: '특색있는 소품숍에서 부산 여행을 기념할 작은 기념품을 구매해 봐. 엽서를 구매해 여행의 감상도 적어 봐!' } ] }, { cl: 'daegu', nm: '대구', ds: '근대 역사의 상징', cp: '역사 여행도 미식 여행도 무엇이든 OK! 레트로한 골목길마다 숨겨진 매력 찾아 떠나자!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=4ef11cc4-d383-48b2-9957-8d83199620ee', p1: { tt: '2.28 기념중앙공원', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=976abd6f-72ba-43df-8e9e-afff6a6ae112', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=5867538d-b30f-4ce8-90f4-145e90dfa69e' }, p2: { tt: '대구간송미술관', cr: 'ⓒ 대구간송미술관 서지은', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=8e75301d-a6cd-4357-a97f-4a46c3d76475', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=dbf69897-f41d-415a-8ef5-c7c3b6a36697' }, p3: { tt: '이월드', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=f3deb30e-022e-41fc-9ea8-0eade1c71d0f', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=c560c170-53fc-425f-aea9-7443e764ea4b' }, mi: [ { tt: '2.28 기념중앙공원에서 역사적 의미 되새기기', ct: '독재에 저항한 대구 학생들의 2.28 의거를 기념하는 공원에서 오늘날 우리가 누리는 민주주의의 가치에 대해 생각해 봐.' }, { tt: '대구간송미술관 소장품 중 1점 골라 SNS에 리뷰하기', ct: '간송 전형필 선생이 남긴 소중한 문화유산을 감상하고, 가장 인상적인 소장품에 대한 감상을 SNS에 기록해 봐.' }, { tt: '이월드 전망대에서 대구 야경 감상하기 ', ct: '대구의 랜드마크인 83타워 전망대에서 도심의 아름다운 야경을 감상하며 도시의 활력을 느껴봐' } ] }, { cl: 'gwangju', nm: '광주', ds: '전통이 빛나는 예술 도시', cp: '아름다운 예술을 꽃피운 곳! 남도 미식과 개성 넘치는 예술의 매력에 흠뻑 빠져봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=98a134bb-f86b-4da2-b538-c07b8ed0946a', p1: { tt: '무등산', cr: 'ⓒ 한국관광공사 포토코리아-배근한', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=c6abb2c6-06ea-4720-8e14-f48168ab3049', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=9095256d-36c5-4bf0-b4d7-11fa47b784ac' }, p2: { tt: '국립광주과학관', cr: 'ⓒ 국립광주광학관 이현정', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=ea9d1b49-a357-43c1-a071-4defdbdaa546', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=5d5c80fe-6ae3-42b2-8d49-537e826605a6' }, p3: { tt: '국립아시아문화전당', cr: 'ⓒ 트래블리더 17기 이나경', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d55aae0b-c878-4bed-bce8-eb543b6a8291', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=bb65a57c-a442-45c2-9d0b-996b76c3d89d' }, mi: [ { tt: '무등산 주상절리대에서 오등완 인증샷 찍기', ct: '서석대나 규봉암에서 용암이 빚은 신비한 바위기둥을 배경으로 무등산 등정의 기쁨을 담은 사진을 남겨봐!' }, { tt: '국립광주과학관 관람하고 미래의 지구 상상하기', ct: '빛, 과학, 우주, AI 등에 대한 전시를 관람하며 과학이 바꿀 미래 세상을 머릿속에 그려봐!' }, { tt: '국립아시아문화전당에서 아시아 지식 탐닉하기 ', ct: '아시아문화박물관 도서관 내 소장 자료를 통해 다채로운 아시아문화를 이해하는 시간을 가져봐!' } ] }, { cl: 'ulsan', nm: '울산', ds: '해오름의 도시', cp: '한반도에서 가장 먼저 해를 맞이하는 곳! 산업 중심지이자 고래의 신비까지 간직한 도시로 떠나봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=4dfc9315-e95a-44e9-9d40-75382812a22e', p1: { tt: '대왕암공원', cr: 'ⓒ 한국관광공사 포토코리아-노미영', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=4f5a5650-e542-4143-b2d5-e8ce008ea27b', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=9e0f6d0d-ae33-4032-ac05-620137804c00' }, p2: { tt: '장생포고래박물관', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=1f6e9801-7bfc-4833-bdd9-4e90c9cd1701', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=e1635bb9-938b-4a91-bb7b-e0cbb25d30e3' }, p3: { tt: '태화강 국가정원', cr: 'ⓒ 한국관광공사 포토코리아-두드림', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=ca38b983-c501-47e9-b7a4-4df745889772', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=34647178-fe80-4b2c-a0f4-0c372f7daf34' }, mi: [ { tt: '대왕암 출렁다리 위에서 인증샷 남기기', ct: '아찔한 바다 사이를 잇는 출렁다리를 건너며 스릴을 만끽하고, 파도와 바람 소리가 생생하게 담긴 동영상을 촬영해 봐!' }, { tt: '장생포고래박물관에서 고래 굿즈 구매하기', ct: '울산의 상징인 고래의 모습을 담은 친환경 굿즈를 구매하고 실생활에서 환경 보호에 동참할 방법에 대해 고민해 봐.' }, { tt: '스마트폰 끄고 태화강 국가정원 십리대숲 걷기', ct: '심신 안정과 피로 회복에 도움을 주는 음이온을 충전하며 자연의 소리가 마음을 편안하게 하는 대나무 군락지를 걸어봐!' } ] }, { cl: 'chungcheong', nm: '충청도', ds: '내륙의 심장', cp: '복잡한 생각을 내려놓고 힐링하기 좋은 곳! 청정 자연이 선사하는 여유와 활력을 만끽해봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=f6413412-5268-4021-976c-bbc65dd83688', p1: { tt: '법주사', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=2ccc83c2-ee56-4312-ba52-a357e9974b05', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=4d6d9f37-1bf8-46a4-8ff6-82f408035acf' }, p2: { tt: '국립세종수목원', cr: 'ⓒ 한국관광공사 포토코리아-김용훈', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=a73f90c3-2377-4fc4-8e85-a820638650cb', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=6db3636f-0970-4dc0-abf1-63c2ae3b7495' }, p3: { tt: '만천하 스카이워크', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=4d9d15c3-274f-4988-9041-0d732edb15bd', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=9ff81615-d49a-4fb8-8b4c-2cfd3ed239d6' }, mi: [ { tt: '법주사에서 눈 감고 계곡물 소리 듣기', ct: '속리산 자락에 자리한 법주사 경내의 벤치에 앉아 마음의 평정을 가져다줄 자연의 소리에 집중해 봐!' }, { tt: '국립세종수목원 한국전통정원 산책하기', ct: '궁궐 정원, 민가 정원 등 다양한 주제의 전통정원을 걸으며 자연에 순응하며 풍류를 즐기던 선조들의 지혜를 배워봐!' }, { tt: '만천하스카이워크에서 아찔한 액티비티 체험하기 ', ct: '집와이어, 알파인코스터, 슬라이드 중 하나를 골라 아찔한 스릴을 느끼며 단양의 절경을 감상해 봐.' } ] }, { cl: 'gangwon', nm: '강원도', ds: '청정 자연의 보고', cp: '푸른 동해와 웅장한 산의 기운이 서린 곳! 자연과 하나 되는 익사이팅한 경험을 즐기러 가자!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=9c048ccf-a40e-425c-a11a-7b25c87d7573', p1: { tt: '속초해수욕장', cr: 'ⓒ 양자영 취재기자', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=5c6e08a8-8e67-419a-a3fb-d424919c1978', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=12e3b8dc-81ad-44e7-87af-ffd9adb412d6' }, p2: { tt: '낙산사', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=25b7a6c5-1099-4dd5-8154-b53ea507c9c8', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=e4d4eb0f-61c5-4381-a914-a23bac522aed' }, p3: { tt: '소금산그랜드밸리', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=f7774b00-833e-420c-a82b-1488e1941e9a', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=0f4d9774-cac4-473c-9a1e-17b25c9c3799' }, mi: [ { tt: '속초해수욕장에 어울리는 나만의 플리 만들기 ', ct: '해변을 걸으며 나의 감성이 담긴 플레이리스트를 만들고, 푸른 바다가 그리울 때 이 플리를 들으며 추억을 떠올려봐!' }, { tt: '낙산사 해수관음상 앞에서 인증샷 찍기', ct: '16m 높이의 거대한 해수관음상 앞에서 간절한 소원을 마음에 새기며 인증샷을 남겨봐!' }, { tt: '소금산그랜드밸리에서 잔도 트레킹하기', ct: '절벽을 따라 이어진 고도 200m 높이의 잔도를 걸으며 아찔한 풍경을 즐겨봐. 기암괴석을 배경으로 사진도 남겨봐.' } ] }, { cl: 'gyeongsang', nm: '경상도', ds: '역사가 살아 숨 쉬는 땅', cp: '천 년의 역사가 숨 쉬는 곳! 고즈넉한 유적을 거닐며 과거로 시간여행을 떠나봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d1f4bf0a-4870-4418-8933-3fff00616e9d', p1: { tt: '해인사', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=2aee88c9-da3f-4edf-b414-6752da112985', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=77872fac-c479-4f61-9475-9f172ed8a2c8' }, p2: { tt: '바람의 언덕', cr: 'ⓒ 한국관광공사-라이브스튜디오', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=f397ff2a-a2c4-448c-afe0-74b7744f68d7', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=90c5cf0c-ff79-4b64-a3b9-afa02a465e46' }, p3: { tt: '경주월드', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=5d561736-62ba-44c4-9c4b-4eaaae2703b6', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=158b5695-9c71-47ef-a2b3-939856efaae0' }, mi: [ { tt: '해인사에서 팔만대장경의 위엄 느껴보기', ct: '국가의 안녕에 대한 염원이 담긴 유네스코 세계기록유산인 해인사 대장경판을 가까이에서 감상해 봐!' }, { tt: '바람의 언덕에서 풍차를 배경으로 인생샷 남기기', ct: '푸른 바다, 초록빛 언덕, 붉은 풍차가 어우러진 이국적인 장소에서 여행을 추억할 멋진 사진을 찍어봐!' }, { tt: '경주월드에서 드라켄 타고 스릴 즐기기', ct: '여러 방송에도 소개된 경주월드의 상징, 드라켄을 타고 90도 경사로 수직 낙하하는 짜릿함을 느껴봐!' } ] }, { cl: 'jeolla', nm: '전라도', ds: '한국 미식의 상징', cp: '전국 최고의 맛과 멋을 간직한 곳! 한국적 아름다움과 최고의 미식을 누려봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=364222ff-0add-4263-a7bf-c10f974b3ab6', p1: { tt: '죽녹원', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=1a7ca86c-4181-4384-8b9a-0209d661aa3b', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=1424238b-7957-4660-8cd7-ef5742808ded' }, p2: { tt: '화엄사', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=428330b6-4063-4611-9dba-44178086c7f1', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=f7e763b3-7616-4bb2-b85d-5c630977c374' }, p3: { tt: '전주 한옥마을', cr: 'ⓒ 한국관광공사-IR 스튜디오', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=9aed9273-21f7-44c2-8658-8639e3da6b70', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=66dba60b-a623-4753-a3b4-76a62fcbbe05' }, mi: [ { tt: '죽녹원에서 사랑이 변치 않는 길 산책하기', ct: '대나무가 뿜어내는 음이온 덕분에 더 아름답게 보인다는 대나무숲을 소중한 사람과 함께 걸어봐.' }, { tt: '화엄사에서 천년 고찰의 기운 느끼기', ct: '사시사철 아름다운 지리산 자락의 화엄사 경내를 걸으며 여러 문화재에 어린 영험한 기운을 경험해 봐.' }, { tt: '한복 입고 전주 한옥마을에서 인증샷 찍기', ct: '태조 이성계의 어진을 모신 경기전 내부의 대나무숲에서 고운 한복을 입고 고즈넉한 인생샷을 남겨봐!' } ] }, { cl: 'jeju', nm: '제주도', ds: '세계적인 화산섬', cp: '독특한 지형과 푸른 바다가 그림 같은 풍경을 만드는 곳! 널리 알려지지 않은 비경을 찾아 떠나봐!', ci: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d9feb53c-e009-409d-b8a1-c9bcaeca155a', p1: { tt: '성산일출봉', cr: 'ⓒ 한국관광공사 포토코리아-전형준', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=92222f3b-d161-458b-8c5d-a2930cbc5a7b', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=f5da2334-1c8c-4049-8e06-4db38333a57f' }, p2: { tt: '비자림', cr: 'ⓒ 한국관광공사 포토코리아-김정훈', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=418aaaab-5de5-4ee2-a587-4b9505fc1260', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=e0abf9cf-9865-4bf4-9077-93f2bb083a45' }, p3: { tt: '산방산탄산온천', cr: '', im: 'https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=ad6eabcb-de8b-47e2-998f-357b4de1c216', db: 'https://korean.visitkorea.or.kr/detail/ms_detail.do?cotid=b55f95bc-e11c-430f-a24c-1d04f8ec23cc' }, mi: [ { tt: '성산일출봉 분화구를 배경으로 인증샷 찍기', ct: '성산일출봉 정상에서 웅장한 분화구를 배경으로 나만의 특징을 담은 인스타그래머블한 사진을 남겨봐!' }, { tt: '비자림에서 숲속 요정 콘셉트의 사진 찍기', ct: '비자나무 숲속을 신비롭게 밝히는 햇빛 아래서 청량한 자연을 배경으로 요정 같은 인생샷을 남겨봐!' }, { tt: '산방산탄산온천에서 조용히 명상하기', ct: '피부 미용과 피로 회복에 좋은 탄산온천에서 내면의 소리에 집중하며 이너뷰티까지 가꿔봐!' } ] } ]; return shuffle(items)[0]; }