본문 내용
#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; } #replyGo { width: 940px; margin: 0 auto; } .btm_team.team_marg { width: 940px; margin: 40px auto 10px auto; } .db_cont_detail { max-width: 1920px; margin: 0 auto; overflow: hidden; } #contents, .wrap_contView, .db_cont_detail { width: 100% !important; max-width: 100% !important; } .theme_name.theme_better { max-width: 1920px; margin: 0 auto; } /* 001 */ .theme_better .section-001 img { width: 100%; display: block; } /* 002: 배경+버튼 */ .theme_better .section-002 { height: 180px; background-image: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=ea768000-cc03-4c7e-983d-5f328d411339); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; position: relative; } .theme_better .section-002 .inner { max-width: 1920px; margin: 0 auto; height: 100%; position: relative; } .theme_better .bt-btn-wrap { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 45px; } .theme_better .bt-btn img { width: 158px; display: block; } /* 003 배경 + 텍스트 + 썸네일 */ .theme_better .section-003 { background-image: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=5022be63-a140-4550-b827-27767465dde9); background-repeat: no-repeat; background-position: top center; background-size: cover; padding-top: 80px; padding-bottom: 120px; } .theme_better .section-003 .inner { max-width: 1920px; margin: 0 auto; } /* 텍스트 이미지 */ .theme_better .bt-text { text-align: center; padding-bottom: 40px; } .theme_better .bt-text-img { display: none; } .theme_better .bt-text-img.is-active { /* 활성화 시 텍스트 표시 */ display: block; } .theme_better .bt-text-img img { max-width: 420px; width: 100%; display: inline-block; } /* 썸네일 공통 */ .theme_better .bt-thumbs { display: none; width: 700px; margin: 40px auto 0; grid-template-columns: repeat(2, 1fr); gap: 30px; position: relative; } .theme_better .bt-thumbs.is-active, .theme_better .bt-thumbs.active { display: grid; } .theme_better .bt-thumbs .thumb img { width: 100%; display: block; } /* 썸네일 네비게이션 (화살표 포함) */ .theme_better .bt-nav { position: absolute; top: 240px; left: 0; width: 100%; max-width: none; transform: none; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } /* 화살표 */ .theme_better .bt-arrow { pointer-events: auto; width: 35px; height: 35px; background: none; border: none; opacity: 1; } .theme_better .bt-arrow.disabled { opacity: 0.6; } .theme_better .bt-arrow img { width: 100%; height: 100%; display: block; } .theme_better .bt-arrow-prev { margin-left: -140px; } .theme_better .bt-arrow-next { margin-right: -140px; } /* 인디케이터 */ .theme_better .bt-dots { margin-top: 40px; display: flex; justify-content: center; gap: 18px; } /* 도트 */ .theme_better .bt-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #FFFFFF; opacity: 0.6; cursor: pointer; border: none; } .theme_better .bt-dot.is-active { background-color: #144A77; opacity: 1; } /* 004 */ .theme_better .section-004 img { width: 100%; display: block; } /* 배경색 */ .theme_better .section-002, .theme_better .section-003 { background-color: #aef6e5; } /* MOBILE */ /* 기본값: PC는 보이기, 모바일은 숨기기 */ .theme_better { display: block; } .theme_better_mo { display: none; } @media all and (max-width:720px) { .theme_better { display: none; } .theme_better_mo { display: block; } #contents { padding: 0 0 24px 0; } .tit_cont.titleType1, .wrap_contView .box_modInfo, .db_cont_detail, .recommendation_group { width: auto !important; margin: 0 15px !important; } .btm_team.team_marg { width: auto !important; margin: 20px 15px 0 !important; } .ai_review_summary { padding: 0 15px; } .theme_name .inr { padding: 0 1.5rem; } .theme_name p { font-size: 1.6rem; } } /* 모바일 공통 래퍼 */ .theme_better_mo { width: 100%; max-width: none; margin: 0 auto; background-color: #aef6e5; } .theme_better_mo img { display: block; width: 100%; } /* m001 */ .theme_better_mo .mo-001 img { width: 100%; } /* m002 : 배경 + 버튼 */ .theme_better_mo .mo-002 { background-image: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=65ebd9d6-f2a3-4a19-b7b7-7e5cf8a29f69); background-repeat: no-repeat; background-position: center top; background-size: cover; height: 90px; position: relative; } .theme_better_mo .mo-btn-wrap { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 24px !important; } .theme_better_mo .mo-btn img { width: 90px; height: auto; } /* m003 : 배경 + 텍스트 + 썸네일 */ .theme_better_mo .mo-003 { background-image: url(https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d1209b6f-edb4-4764-beab-cc3edc45a536); background-repeat: no-repeat; background-position: center top; background-size: cover; padding: 40px 0 60px; } .theme_better_mo .mo-003 .inner { width: 100%; max-width: 360px; margin: 0 auto; } /* 텍스트 */ .theme_better_mo .mo-text { text-align: center; margin-bottom: 24px; } .theme_better_mo .mo-text-img { display: none; } .theme_better_mo .mo-text-img img { width: auto; height: 40px; margin: 0 auto; } .theme_better_mo .mo-text-img.is-active { display: block; } /* 썸네일 */ .theme_better_mo .mo-thumbs { display: none; width: 100%; max-width: 320px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; } .theme_better_mo .mo-thumbs.is-active { display: grid; } .theme_better_mo .mo-thumbs .thumb img { width: 150px; height: 130px; object-fit: cover; } /* 모바일 페이지 인디케이터 */ .theme_better_mo .mo-dots { margin-top: 20px; display: flex; justify-content: center; gap: 12px; } .theme_better_mo .mo-dot { width: 6px; height: 6px; border-radius: 50%; padding: 0; border: none; background-color: #FFFFFF; cursor: pointer; } .theme_better_mo .mo-dot.is-active { background-color: #144A77; } /* m004 */ .theme_better_mo .mo-004 img { width: 100%; } @media (max-width: 768px) { #contents, .wrap_contView, .db_cont_detail, .cont_blank { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; } body, html { overflow-x: hidden !important; } } function BetterThemeTabs_PC() { var $wrapper = jQuery(.theme_name.theme_better); if (!$wrapper.length) return; var $buttons = $wrapper.find(.bt-btn); var $texts = $wrapper.find(.bt-text-img); var $groups = $wrapper.find(.bt-thumbs); var $sec003 = $wrapper.find(.section-003); var $dots = $wrapper.find(.bt-dot); var $arrowPrev = $wrapper.find(.bt-arrow-prev); var $arrowNext = $wrapper.find(.bt-arrow-next); var maxTab = 3; var PC_BG = { 1: https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=5022be63-a140-4550-b827-27767465dde9, 2: https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=5022be63-a140-4550-b827-27767465dde9, 3: https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=1b909917-d3b8-4023-bdff-ac257c4eabc3 }; function setTab(tab) { var t = parseInt(tab, 10); if (isNaN(t)) t = 1; if (t maxTab) t = maxTab; var tabStr = String(t); $buttons.each(function() { var $btn = jQuery(this); var btnTab = String($btn.data(tab)); var onSrc = $btn.data(on); var offSrc = $btn.data(off); var $img = $btn.find(img); if (btnTab === tabStr) { $btn.addClass(is-active); if (onSrc && $img.length) $img.attr(src, onSrc); } else { $btn.removeClass(is-active); if (offSrc && $img.length) $img.attr(src, offSrc); } }); $texts.each(function() { var $t = jQuery(this); if (String($t.data(tab)) === tabStr) $t.addClass(is-active); else $t.removeClass(is-active); }); $groups.each(function() { var $g = jQuery(this); if (String($g.data(tab)) === tabStr) $g.addClass(is-active); else $g.removeClass(is-active); }); $dots.each(function() { var $d = jQuery(this); if (String($d.data(tab)) === tabStr) $d.addClass(is-active); else $d.removeClass(is-active); }); $sec003.css(background-image, url( + (PC_BG[t] || PC_BG[1]) + )); if (t === 1) $arrowPrev.addClass(disabled); else $arrowPrev.removeClass(disabled); $arrowNext.removeClass(disabled); } $buttons.on(click, function(e) { e.preventDefault(); setTab(jQuery(this).data(tab)); }); $dots.on(click, function(e) { e.preventDefault(); setTab(jQuery(this).data(tab)); }); $arrowPrev.on(click, function(e) { e.preventDefault(); var current = parseInt($buttons.filter(.is-active).data(tab) || 1, 10); setTab(current - 1); }); $arrowNext.on(click, function(e) { e.preventDefault(); var current = parseInt($buttons.filter(.is-active).data(tab) || 1, 10); if (current === maxTab) setTab(1); else setTab(current + 1); }); setTab(1); } function BetterThemeTabs_MO() { var $root = jQuery(.theme_better_mo); if (!$root.length) return; var $buttons = $root.find(.mo-btn); var $texts = $root.find(.mo-text-img); var $groups = $root.find(.mo-thumbs); var $section3 = $root.find(.mo-003); var $dots = $root.find(.mo-dot); var MO_BG = { 1: https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d1209b6f-edb4-4764-beab-cc3edc45a536, 2: https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=d1209b6f-edb4-4764-beab-cc3edc45a536, 3: https://cdn.visitkorea.or.kr/img/call?cmd=VIEW&id=83c53452-c0f5-44d9-9f9b-790c7d545193 }; function setTab_MO(tab) { var t = parseInt(tab, 10); if (isNaN(t)) t = 1; if (t 3) t = 3; var tabStr = String(t); $buttons.each(function() { var $btn = jQuery(this); var btnTab = String($btn.data(tab)); var onSrc = $btn.data(on); var offSrc = $btn.data(off); var $img = $btn.find(img); if (btnTab === tabStr) { if (onSrc && $img.length) $img.attr(src, onSrc); } else { if (offSrc && $img.length) $img.attr(src, offSrc); } }); $texts.each(function() { var $t = jQuery(this); if (String($t.data(tab)) === tabStr) { $t.addClass(is-active); } else { $t.removeClass(is-active); } }); $groups.each(function() { var $g = jQuery(this); if (String($g.data(tab)) === tabStr) { $g.addClass(is-active); } else { $g.removeClass(is-active); } }); $dots.each(function() { var $d = jQuery(this); if (String($d.data(tab)) === tabStr) { $d.addClass(is-active); } else { $d.removeClass(is-active); } }); var bg = MO_BG[t] || MO_BG[1]; $section3.css(background-image, url( + bg + )); } $buttons.on(click, function(e) { e.preventDefault(); var tab = jQuery(this).data(tab); setTab_MO(tab); }); $dots.on(click, function(e) { e.preventDefault(); var tab = jQuery(this).data(tab); setTab_MO(tab); }); setTab_MO(1); } if (window.jQuery) { jQuery(function() { BetterThemeTabs_PC(); BetterThemeTabs_MO(); }); } else { document.addEventListener(DOMContentLoaded, function() { BetterThemeTabs_PC(); BetterThemeTabs_MO(); }); }
조회수
해당 여행기사에서 소개된 여행지들이 마음에 드시나요?
평가를 해주시면 개인화 추천 시 활용하여 최적의 여행지를 추천해 드리겠습니다.
댓글
댓글 (건)
유의사항
불건전한 댓글의 경우 별도의 통보 없이 삭제될 수 있습니다. 댓글/답글 등록 시 사용자의
닉네임, 이미지 (투어원패스 및 대한민국 구석구석
마이페이지 명칭 사용)가 함께 표시됩니다.
AI가 빠르게 요약해주는 사용자 후기!
AI 요약 서비스는 최근 3년 이내 작성된 댓글이 일정한 개수 이상인 경우 제공됩니다.
최근 3년 이내 작성된 댓글이
일정한 개수 이상인 경우
사용자 후기 요약 정보가 제공됩니다.
사진 후기
추천 여행기사
인근 축제/공연/행사
인근 여행지
인근 여행코스
AI콕콕 플래너 생성 코스
AI콕콕 플래너로 생성된 여행 코스입니다.
AI콕콕 플래너는 여행 지역, 기간, 테마를 선택하면 자동으로 여행 일정을 생성해주고,
사용자가 편집할 수 있는 서비스입니다.
사용자 제작 코스
사용자가 직접 생성한 추천 코스입니다.
사용자 제작 코스는 자신이 원하는 여행지를 선택하여,
여행 코스를 자유롭게 만들 수 있는 서비스입니다.
