@charset "utf-8";


:root {
  --color_main: #006ed2;
  --color_black: #111111;
  --color_gray_656: #656565;
  --color_gray_d9: #d9d9d9;
  --color_white: #ffffff;
}



/* 지도&썸네일 */
.tourism #count{display:none;}
.tourism .region_container                                                                    { position:relative; bottom:40px; left:50%; width:90%; max-width:1200px; transform: translateX(-50%); }
.tourism .region_slide .circle_img                                                            { position: relative;  height:200px; text-align: center;  border-radius: 1.3em; overflow: hidden; }
.tourism .region_slide .circle_img .img_thumb                                                 { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.tourism .region_slide .circle_img .name .img_down                                            {display: inline-block; margin-top:16px;}
.tourism .region_slide .circle_img .name                                                      { width:90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tourism .region_slide .circle_img .name span                                                 { display:block; font-size: 1.5rem; color: #fff; font-weight:700;}
.tourism .region_slide .circle_img .name span:last-of-type                                    { font-size: 1.2rem; font-weight:300;}
.tourism .region_container::before                                                            { position:absolute; top:53%; left: 50%; width:110%; height:1px; background-color: #787878; transform: translate(-50%, -50%); content:''; }
.tourism .region_container .region_slide                                                      {  overflow:hidden;}
.tourism .region_container .swiper-button-next,
.swiper-rtl .swiper-button-prev,
.tourism .region_container .swiper-button-prev,
.swiper-rtl .swiper-button-next                                                              {width:50px; height:50px; background:#fff; border-radius:50%; box-shadow:rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;}
.tourism .region_container .swiper-button-next, .swiper-rtl .swiper-button-prev              {right:-7%;}
.tourism .region_container .swiper-button-prev, .swiper-rtl .swiper-button-next              {left:-7%;}
.tourism .region_container .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.tourism .region_container .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after                                                         {content:''; width:10px; height:16px;}
.tourism .region_container .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after                                                         {background:url('/resources/jns-img/month/2503/img_nav_next.png') center/cover no-repeat;}
.tourism .region_container .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after                                                         {background:url('/resources/jns-img/month/2503/img_nav_prev.png') center/cover no-repeat;}
.tourism .region_container .swiper-button-next.swiper-button-disabled,
.tourism .region_container .swiper-button-prev.swiper-button-disabled                           {opacity:0; pointer-events:none;}
.tourism .theme_map_area                                                                        {margin-top:100px;}
.tourism .theme_map_area .map_wrap                                                              { position: relative; margin:0 auto;}
.tourism #map                                                                                   {width: 100%; height: 500px; border-radius:20px; }
/* .tourism h1                                                                                     {margin-bottom: 30px; font-size: 22px; color: #333;} */

/* 커스텀 InfoWindow 스타일 */
.tourism .custom-infowindow                                                                     {padding:6px 12px; text-align:center; }
.tourism .custom-infowindow h3                                                                  { font-size: 16px; color: #111; font-weight:700; letter-spacing: -.055em;}
.tourism .gm-ui-hover-effect                                                                    { display: none !important; }
.tourism .gm-style-iw-c                                                                         { padding: 0 !important; }
.tourism .gm-style-iw-d                                                                         { overflow: auto !important; }
.tourism .gm-style-iw-ch                                                                        { padding: 0 !important; }

/* Main Container */
.tourism 							              {margin-bottom: 10rem;}
.tourism .tourism_safety_index      { background: white; width: 100%; min-height: 100vh; display: flex; justify-content: center; padding: 60px 0; }
.tourism .main_container            { width: 1300px; margin:0 auto; display: flex; flex-direction: column; gap: 80px; }

/* Title Section */
.tourism .index_title_section             { position: relative; width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; background-image: url('/resources/jns-img/content/tourism/img_index_top.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 28px; }
.tourism .title_bg_image            { width: 100%; height: 100%; object-fit: cover; }
.tourism .title_overlay             { position: absolute; inset: 0; background: rgba(0, 77, 145, 0.6); }
.tourism .title_content             { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; color: white; text-align: center; }
.tourism .main_title                {   font-weight: 700; font-size: 2.75rem; line-height: 1.36; letter-spacing: -2.552px; margin: 0; }
.tourism .sub_title                 {   font-weight: 500; font-size: 1.75rem; line-height: normal; letter-spacing: -1.54px; margin: 0; }
.tourism .description               {   font-weight: 400; font-size: 1.25rem; line-height: 1.6; letter-spacing: -1.1px; margin-top: 15px; }
.tourism .description p             { margin: 0; }

/* Cards Grid */
.tourism .sec_list                  { width: 100%; display: flex; flex-direction: column; gap:60px 0;} 
.tourism .sec_list a                { text-decoration: none; }
.tourism .card                      { display: flex; gap: 20px 40px; }
.tourism .sec_list a:nth-child(2n) .card                  {flex-direction: row-reverse;}    
.tourism .card_image_wrapper        { width: 100%; height: 340px; position: relative; overflow: hidden; }
.tourism .card_image_wrapper .card_image { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.tourism .card_content              { display:flex; align-items: center; width: 100%; border-bottom: 1px solid #c8c8c8; }
.tourism .card_inner                { display: flex; flex-direction: row; align-items: center; gap: 30px;}
.tourism .icon_wrapper              { position: relative; flex-shrink: 0; width: 100px; height: 100px; border-radius: 50px; display: flex; justify-content: center; align-items: center; }
.tourism .icon_yellow               { background: #fff797; }
.tourism .icon_green                { background: #cefccb; }
.tourism .icon_pink                 { background: #ffcbff; }
.tourism .icon_blue                 { background: #bedeff; }
.tourism .icon_orange               { background: #FFE2CB;}

.tourism .icon                      { position: absolute; width: 52px; height: 52px; left: 24px; top: 24px; }
.tourism .icon_medical              { width: 44px; height: 43.55px; left: 28px; top: 28.23px; }
.tourism .icon_warning              { width: 49.2px; height: 42.6px; left: 25.4px; top: 26.7px; }
.tourism .icon_accessibility        { width: 42.94px; height: 44px; left: 28.53px; top: 28px; }
.tourism .card_text                 { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tourism .card_title                {   font-weight: 700; font-size: 1.75rem; line-height: normal; letter-spacing: -1.54px; color: #111; margin: 0; }
.tourism .card_desc                 {   font-weight: 400; font-size: 1.1875rem; line-height: 1.58; letter-spacing: -1.045px; color: #656565; }
.tourism .card_desc p               { margin: 0; }


/* 주요 관광안내소 카테고리 */
.region_area						{width:100%; display: inline-grid; padding: 40px; row-gap: 10px; column-gap: 10px; grid-template-rows: repeat(2,fit-content(100%)); grid-template-columns: repeat(8,minmax(0,1fr)); border-radius:20px; background-color:#f8f8f8;}
.region_area .click_el 				{display: flex; align-items:center; justify-content: center; padding:14px 0; border-radius: 8px; background: #E2E4E7;}
.region_area .click_el.on			{color:#fff; background: #006ED2;}

/* 주요관광안내소 갯수 */
.center_count						{width:100%; margin-bottom:20px; display:flex; justify-content:flex-start; color: #5D5D5D; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: -0.05em;}
.center_count em					{font-weight:700; color:#006ED2;}

@media (min-width: 769px) {
  .tourism .sec_list a:nth-child(2n) .card .card_content    {justify-content: flex-end;}
  .tourism .sec_list a:nth-child(2n) .card .card_inner      {flex-direction: row-reverse;}

  .tourism .sec_list a:nth-child(2n) .card .card_text       {text-align: right;}
  .tourism.index .sec_list a:nth-child(2n) .content_button   {margin-left: auto !important;}
}
@media (max-width: 1300px) {
.tourism .card_desc p br			{display:none;}
.tourism .sec_list a				{display:flex;}
.tourism .card						{justify-content: space-between;}
.tourism .card_inner   				{padding: 40px 0;}
}

@media (max-width: 1024px) {
.tourism                                 {margin-bottom:6rem;}
.tourism .tourism_safety_index      { padding: 60px 20px; }
.tourism .main_container            { width: 100%; max-width: 900px; gap: 60px; }
.tourism .index_title_section             { height: 400px; border-radius: 12px; background-image: url('/resources/jns-img/content/tourism/img_index_top_m.jpg'); }
.tourism .title_content             { padding: 0 20px; gap: 15px; }
.tourism .main_title                { font-size: 2.25rem; letter-spacing: -2px; }
.tourism .sub_title                 { font-size: 1.5rem; letter-spacing: -1.3px; }
.tourism .description               { font-size: 1.125rem; letter-spacing: -1px; margin-top: 10px; }
.tourism .sec_list                  { gap: 50px 30px; }
.tourism .card                      { width: 100%; }
.tourism .card_image_wrapper        { height: 300px; }
.tourism .card_image_wrapper .card_image { border-radius: 10px; }
.tourism .card_inner                { padding: 30px 0; gap: 18px; }
.tourism .icon_wrapper              { width: 80px; height: 80px; border-radius: 45px; }
.tourism .icon_wrapper img          { width: 36px; }
.tourism .icon                      { width: 47px; height: 47px; left: 21.5px; top: 21.5px; }
.tourism .icon_medical              { width: 39.6px; height: 39.2px; left: 25.2px; top: 25.4px; }
.tourism .icon_warning              { width: 44.28px; height: 38.34px; left: 22.86px; top: 24.03px; }
.tourism .icon_accessibility        { width: 38.65px; height: 39.6px; left: 25.68px; top: 25.2px; }
.tourism .card_title                { font-size: 1.625rem; letter-spacing: -1.4px; }
.tourism .card_desc                 { font-size: 1.1rem; letter-spacing: -0.95px; line-height:1.4;}
.tourism .card_text					        {gap:5px;}


/* 관광안내소 카테고리 */
.region_area                        {grid-template-columns: repeat(6, minmax(0,1fr)); padding: 30px;}

/* 지도&썸네일 */
.tourism .theme_map_area              {margin-top:80px;}
.tourism  .theme_map_area .map_wrap   { margin:1.8rem auto 0; }
.tourism  .region_container           { width: 90%; }
}

/* 반응형 - 768px 이하 */
@media (max-width: 768px) {
.tourism                                 {margin-bottom:4rem;}
.tourism .tourism_safety_index      { padding: 40px 15px; }
.tourism .main_container            { gap: 40px; }
.tourism .index_title_section             { height: 350px; }
.tourism .title_content             { gap: 12px; }
.tourism .main_title                { font-size: 1.875rem; letter-spacing: -1.7px; }
.tourism .sub_title                 { font-size: 1.375rem; letter-spacing: -1.2px; }
.tourism .description               { font-size: 1rem; letter-spacing: -0.9px; line-height: 1.55; margin-top: 8px; }
.tourism .sec_list                  { gap: 40px; }
.tourism .card_image_wrapper        { height: 280px; }
.tourism .card_inner                { padding: 0 16px; gap: 16px; }
.tourism .icon_wrapper              { width: 70px; height: 70px; border-radius: 40px; }
.tourism .icon                      { width: 41.6px; height: 41.6px; left: 19.2px; top: 19.2px; }
.tourism .icon_medical              { width: 35.2px; height: 34.84px; left: 22.4px; top: 22.58px; }
.tourism .icon_warning              { width: 39.36px; height: 34.08px; left: 20.32px; top: 21.36px; }
.tourism .icon_accessibility        { width: 34.35px; height: 35.2px; left: 22.82px; top: 22.4px; }
.tourism .card_title                { font-size: 1.5rem; letter-spacing: -1.3px; }
.tourism .card_desc                 { font-size: 1.065rem; letter-spacing: -0.9px; line-height: 1.55; }

/* 관광안내소 카테고리 */
.region_area                        {grid-template-columns: repeat(4, minmax(0,1fr)); padding: 20px;}
.region_area .click_el              {padding: 12px 0; font-size: 14px;}

/* 지도&썸네일 */
.tourism #map                                                   { height: 450px; }
.tourism  .theme_map_area .map_wrap                             { margin:1.3rem auto 0;}
.tourism .region_container                                      { bottom:30px; }
.tourism .region_container::before                              { width: 100%; }
.tourism .region_slide .circle_img                              { height: 180px; }
.tourism .region_container .swiper-button-next,
.tourism .region_container .swiper-rtl .swiper-button-prev,
.tourism .region_container .swiper-button-prev,
.tourism .region_container .swiper-rtl .swiper-button-next        {width:40px; height:40px;}
.tourism .region_slide .circle_img .name span                     {font-size:1.4rem;}
}

/* 반응형 - 600px 이하 */
@media (max-width: 600px) {
.tourism .index_title_section             { background-image: url('/resources/jns-img/content/tourism/img_index_top_m2.jpg'); }
}

/* 반응형 - 480px 이하 */
@media (max-width: 480px) {
.tourism .tourism_safety_index      { padding: 30px 10px; }
.tourism .main_container            { gap: 30px; }
.tourism .index_title_section       { height: 260px; position: relative; }
.tourism .title_content             { padding: 0 15px; gap: 10px; }
.tourism .main_title                { font-size: 1.7rem; letter-spacing: -1.4px; line-height: 1.3; }
.tourism .sub_title                 { font-size: 1.125rem; letter-spacing: -1px; }
.tourism .description               { font-size: 1rem; letter-spacing: -0.75px; line-height: 1.5; margin-top: 5px; }
.tourism .description p             { display: flex; flex-direction: column; }
.tourism .description p br          { display: none; }
.tourism .sec_list                  { gap: 30px; }
.tourism .card_image_wrapper        { height: 240px; }
.tourism .card                      {gap:10px;}
.tourism .card_inner                { padding:0 8px; gap: 14px; }
.tourism .icon_wrapper              { width: 50px; height: 50px; border-radius: 35px; }
.tourism .icon_wrapper img          { width: 26px; }
.tourism .icon                      { width: 36.4px; height: 36.4px; left: 16.8px; top: 16.8px; }
.tourism .icon_medical              { width: 30.8px; height: 30.49px; left: 19.6px; top: 19.76px; }
.tourism .icon_warning              { width: 34.44px; height: 29.82px; left: 17.78px; top: 18.69px; }
.tourism .icon_accessibility        { width: 30.06px; height: 30.8px; left: 19.97px; top: 19.6px; }
.tourism .card_content              { border-bottom: none; }
.tourism .card_title                { font-size: 1.25rem; letter-spacing: -1.1px; }
.tourism .card_text                 { gap: 4px; }
.tourism .card_desc                 { font-size:1rem; letter-spacing: -0.8px; line-height: 1.3; }
.tourism .card_desc p br            { display: none; }

/* 관광안내소 카테고리 */
.region_area                                                                          { grid-template-columns: repeat(3, minmax(0,1fr)); padding: 15px; row-gap: 8px; column-gap: 8px;}
.region_area .click_el                                                                {padding: 10px 0; font-size: 13px;}

/* 지도&썸네일 */
.tourism .theme_map_area                                                                {margin-top:40px;}
.tourism   #map                                                                         { height:350px; }
.tourism .theme_map_area .map_wrap                                                      { margin:1.6rem auto 0;}
.tourism .region_container                                                              { bottom:20px; }
.tourism .region_slide .circle_img .name span                                           { font-size: 1.22rem; }
.tourism .region_slide .circle_img .name span:last-of-type                              {font-size:1.1rem;}
.tourism .region_container .swiper-button-next, .swiper-rtl .swiper-button-prev         { top:55%; width:32px; height:32px; }
.tourism .region_container .swiper-button-prev, .swiper-rtl .swiper-button-next         { top:55%; width:32px; height:32px; }
.tourism .region_slide .circle_img                                                      { height: 140px; }
}



.tourism .page_wrapper               { width: 100%; display: flex; flex-direction: column; align-items: center; }
.tourism .tour_top_section           { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: url('/resources/jns-img/content/tourism/img_tourism_top.jpg'); background-size:cover; background-position: center; background-repeat:no-repeat; }
.tourism .tour_top_section.medical   { background-image: url('/resources/jns-img/content/tourism/img_medical_top.jpg'); }
.tourism .tour_top_section.tourinfo  { background-image: url('/resources/jns-img/content/tourism/img_tour_top.jpg'); }
.tourism .tour_top_section.tourguide { background-image: url('/resources/jns-img/content/tourism/img_guide_top.jpg'); }
.tourism .tour_top_section.rest      { background-image: url('/resources/jns-img/content/tourism/img_rest_top.jpg'); }

.tourism .tour_top_background        { width: 100%; height: 100%; display: flex; flex-direction: column; }
.tourism .tour_top_background img    { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.tourism .tour_top_content_wrapper   { width: 100%; max-width: 1300px; display: flex; flex-direction: column; align-items: center; gap: 46px; padding: 0 20px; }
.tourism .tour_top_title_box         { display: flex; align-items: center; gap: 6px; }

.tourism .tour_top_title             {   font-weight: 700; font-size: 2.75rem; line-height: 1; letter-spacing: -2.552px; color: #ffffff; white-space: nowrap; margin-bottom:0;}
.tourism .tour_top_description       {   font-weight: 400; font-size: 1.25rem; line-height: 1.6; letter-spacing: -1.1px; color: #ffffff; text-align: center; }
.tourism .section_title              {   font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -1.76px; color: #111111; text-align: center; margin-bottom: 32px; }
.tourism .section_title.lg 			     {margin-bottom:48px;}
.tourism .section_title.mb_0         {margin-bottom:0;} 
.tourism .safety_section             { width: 100%; max-width: 1300px; display: flex; flex-direction: column; align-items: center; }
.tourism .safety_cards_container     { width: 100%; display: flex; gap: 40px 20px; justify-content: center; flex-wrap: wrap; }
.tourism .safety_card                { display: flex; flex-direction: column; gap: 16px; flex:0 0 auto; width:calc((100% - 40px)/3); align-items: center; }
.tourism .safety_card_image          { width: 100%; height: 260px; border-radius: 20px; overflow: hidden; }
.tourism .safety_card_image img      { width: 100%; height: 100%; object-fit: cover; }
.tourism .safety_card_footer         { display: flex; align-items: center; gap: 8px; }
.tourism .safety_badge               { display: inline-flex; align-items: center; justify-content: center; margin-top:1px; padding: 4px 8px; border: 1px solid #006ed2; border-radius: 13.5px;   font-weight: 500; font-size: 1rem; line-height: 1; letter-spacing: -0.88px; color: #006ed2; white-space: nowrap; }
.tourism .safety_card_text           {   font-weight: 400; font-size: 1.25rem; line-height: 1; letter-spacing: -1.1px; color: #111111; white-space: nowrap; }
.tourism .feature_section            { width: 94%; max-width: 1300px; margin:0 auto; padding-top: 100px; display: flex; flex-direction: column; align-items: center; }
.tourism .feature_container          { position: relative; width: 100%; display: flex; flex-direction: column; border-radius: 20px 20px 0 20px; overflow: hidden; }
.tourism .feature_layout_1           { border-radius: 20px 20px 0 20px; }
.tourism .feature_layout_2           { border-radius: 20px 0 20px 20px; }
.tourism .feature_image_box          { width: 100%; height: 380px; overflow: hidden; flex-shrink: 0; }
.tourism .feature_image_box img      { width: 100%; height: 100%; object-fit: cover; }
.tourism .feature_text_box           { width: 100%; background-color: #ffffff; padding: 40px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.tourism .feature_text_right         { position:absolute; bottom: 0; right: 0; width:auto; border-radius: 20px 0 0 0; }
.tourism .feature_text_left          { position:absolute; bottom: 0; left: 0; width:auto; border-radius: 0 20px 0 0; }
.tourism .feature_description        {   font-weight: 400; font-size: 1.25rem; line-height: 1.6; letter-spacing: -1.1px; color: #111111; }
.tourism .feature_button             { display: inline-flex; align-items: center; gap: 6px; padding: 14px 28px; border: 1px solid #666b6f; border-radius: 8px; background-color: transparent;   font-weight: 500; font-size: 1.125rem; line-height: 1; letter-spacing: -0.99px; color: #666b6f; cursor: pointer; white-space: nowrap; }
.tourism .feature_button:hover       { background-color: rgba(102, 107, 111, 0.05); }
.tourism .content_section            { width: 94%; max-width: 1300px; margin:0 auto; padding-top:100px; display: flex; flex-direction: column; align-items: center; }
.tourism .content_section.border_bottom {padding-bottom:80px; border-bottom:1px solid #3c3c3c;}
.tourism .content_section.top        {padding-top:80px;}
.tourism .content_section.top:last-of-type{padding-bottom:0; border-bottom:none;}
.tourism .content_container          { width: 100%; display: flex; flex-direction: column; overflow: hidden; }

.tourism .content_image_box          { width: 100%; height: 380px; overflow: hidden; flex-shrink: 0; }
.tourism .content_image_box img      { width: 100%; height: 100%; object-fit: cover; border-radius:20px 20px 0 20px;}
.tourism .content_text_box           { width: 100%; max-width: 1000px; background-color: #ffffff; padding: 30px 40px 0; display: flex; flex-direction: column; gap: 30px; align-items: center; align-self: center; border-radius: 20px 20px 0 0; margin-top:-100px; }
.tourism .content_text_box.lg        {max-width:1100px; gap:20px; padding-bottom:20px; border-bottom:1px solid #c8c8c8;}
.tourism .img_layout_wrap            {display:flex; gap:20px; margin-top:50px;}

.tourism .img_layout_wrap .img       {flex:1; border-radius:20px; overflow: hidden;}
.tourism .img_layout_wrap .img img   {width:100%;}


.tourism .content_text_box .txt_gap  {align-items:center; justify-content: center; gap:6px;}
.tourism .content_description        { font-weight: 400; font-size: 1.3rem; line-height: 1.6; letter-spacing: -1.1px; color: #111111; text-align: center; }
.tourism.index .content_button       {margin-top:22px;}
.tourism .content_button             { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 14px 28px; border: 1px solid #656565; border-radius: 8px; background-color: transparent;   font-weight: 500; font-size: 1.125rem; line-height: 1; letter-spacing: -0.99px; color: #656565; cursor: pointer; white-space: nowrap; }
.tourism .content_button:hover       { background-color: rgba(101, 101, 101, 0.05); }
.tourism .phone_icon                 { width: 20px; height: 19px; }
.tourism .taxi_app_box               { width: 100%; max-width: 900px; background-color: #eff1f3; border-radius: 20px; padding: 20px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.tourism .taxi_app_icon              { width: 100px; height: 100px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.tourism .taxi_app_icon img          { width: 100%; height: 100%; object-fit: cover; }
.tourism .taxi_app_info              { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tourism .taxi_app_title             { font-weight: 700; font-size: 1.125rem; line-height: 1; letter-spacing: -0.99px; color: #000000; text-align: center; white-space: nowrap; }
.tourism .taxi_app_buttons           { display: flex; gap: 10px; }
.tourism .app_button                 { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: 1px solid #656565; border-radius: 8px; background-color: transparent;   font-weight: 500; font-size: 1.125rem; line-height: 1; letter-spacing: -0.99px; color: #666b6f; cursor: pointer; white-space: nowrap; }
.tourism .app_button:hover           { background-color: rgba(101, 101, 101, 0.05); }


/* Responsive */
@media (max-width: 1024px) {
  .tourism.index .content_button                        {margin-top:16px;}

  .tourism .feature_section, .tourism .content_section	{padding-top: 80px;}	
  .tourism .content_section.top                          {padding-top:60px;}
  .tourism .content_section.border_bottom                {padding-bottom:60px;}
  .tourism .tour_top_section                             { height: 350px; }
  .tourism .tour_top_title                               { font-size: 2.25rem; }
  .tourism .tour_top_content_wrapper					          {gap:36px;}
  .tourism .tour_top_description                         { font-size: 1.125rem; }
  .tourism .section_title,  
  .tourism .section_title.lg                             { font-size: 1.75rem; margin-bottom: 26px; }
					
  .tourism .safety_cards_container 						           {gap:30px 20px;}
  .tourism .safety_card_image                            { height: 220px; }
  .tourism .safety_card_text                             { font-size: 1.125rem; }
  .tourism .feature_image_box                            { height: 320px; }
  .tourism .feature_text_box                             { padding: 30px; gap:16px;}
  .tourism .feature_description, .content_description    { font-size: 1.125rem; }
  .tourism .feature_description br, .tourism .content_description br{display:none;}
  .tourism .feature_button, 
  .tourism .content_button, 
  .tourism .app_button 									                 { font-size: 1rem; padding: 12px 24px; }
  .tourism .content_image_box                            { height: 320px; }
  .tourism .content_text_box                             { padding: 24px; gap:20px;}
  .tourism .content_text_box.lg                          { gap:16px;}
  .tourism .taxi_app_box                                 { max-width: 700px; }
  .tourism .taxi_app_icon                                { width: 80px; height: 80px; }
  .tourism .taxi_app_title                               { font-size: 1rem; }
  .center_count											                     {margin-bottom:1rem;}

  .tourism .img_layout_wrap                               {margin-top:40px; gap:16px;}
  .tourism .img_layout_wrap .img                          {border-radius:10px;}
  .tourism .content_image_box img                         {border-radius: 10px 10px 0 10px;}
}

@media (max-width: 768px) {
  .tourism .tour_top_section                          { height: 300px; }
  .tourism .tour_top_content_wrapper                  { gap: 30px; }
  .tourism .tour_top_title                            { font-size: 2rem; }
  .tourism .tour_top_description                      { font-size: 1.1rem; }
  .tourism .section_title,
  .tourism .section_title.lg                          { font-size: 1.6rem; margin-bottom:20px; }
  .tourism .feature_section, .tourism .content_section { padding-top: 60px; }
  .tourism .safety_cards_container                    { gap: 26px 16px; }
  .tourism .safety_cards_container.nowrap			        { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; overflow-x:auto;}
  .tourism .safety_card                               { width: 100%; flex: 0 0 45%; gap:8px}
  .tourism .safety_card_image                         { height: 200px; }
  .tourism .safety_card_text                          { font-size: 1rem; }
  .tourism .safety_badge                              { font-size: 1.067rem; }
  .tourism .feature_container                         { border-radius: 20px; }
  .tourism .feature_layout_1, .feature_layout_2       { border-radius: 20px; }
  .tourism .feature_image_box                         { height: 280px; }
  .tourism .feature_layout_2						              {flex-direction:column-reverse;}
  .tourism .feature_text_box                          { position:relative; padding: 24px; margin-top: 0; border-radius: 0 0 20px 20px; }
  .tourism .feature_text_right, .feature_text_left    { border-radius: 0 0 20px 20px; align-self: stretch; }
  .tourism .feature_description, .tourism .content_description { font-size: 1rem; line-height:1.4;}
  .tourism .feature_button, .content_button           { font-size: 1.067rem; padding: 10px 20px; }
  .tourism .content_image_box                         { height: 280px; }
  .tourism .content_text_box                          { padding: 20px; gap:16px;}  
  .tourism .taxi_app_box                              { padding: 16px; }
  .tourism .taxi_app_icon                             { width: 70px; height: 70px; }
  .tourism .taxi_app_title                            { font-size: 1.067rem; }
  .tourism .app_button                                { font-size: 1.067rem; padding: 10px 20px; }

  .tourism .img_layout_wrap                           {margin-top:30px; gap:12px;}
  .tourism .card,.tourism .sec_list a:nth-child(2n) .card             {flex-direction: column;}
  .tourism .card_content                                              {border-bottom:none;}

}


@media (max-width: 480px) {
  .tourism.index .content_button                        {margin-top:10px;}

  .tourism .tour_top_section                          { height: 200px; }
  .tourism .tour_top_content_wrapper                  { gap: 20px; }
  .tourism .tour_top_title_box img                    {width:24px;}
  .tourism .tour_top_title                            { font-size: 1.8rem; }
  .tourism .tour_top_description                      { font-size:1rem; }
  .tourism .tour_top_description br					          {display:none;}
  .tourism .section_title,
  .tourism .section_title.lg                          { font-size: 1.5rem; margin-bottom: 16px; }
  .tourism .feature_section, .tourism .content_section         { padding-top: 40px;}
  .tourism .content_section.top                                {padding-top:40px;}
  .tourism .content_section.border_bottom                      {padding-bottom:40px;}
  .tourism .safety_cards_container					  { gap:16px 2%;}
  .tourism .safety_card_image                         { height: 130px; }
  .tourism .safety_card_text                          { font-size: 1rem; }
  .tourism .safety_badge                              { font-size: 1rem; }

  .tourism .feature_image_box                         { height: 140px; }
  .tourism .feature_text_box                          { position:relative; padding: 10px 16px; gap:10px; border:1px solid #f1f3f5; }
  .tourism .feature_description, .tourism .content_description { font-size: 1rem; }
  .tourism .feature_button, .tourism .content_button           { font-size: .95rem; padding: 10px 16px; }
  .tourism .phone_icon                                { width: 16px; height: 15px; }
  .tourism .content_image_box                         { height: 240px; }
  .tourism .content_text_box                          { width:90%; padding: 16px 16px 0; gap:14px;}
  .tourism .content_text_box.lg                       { gap:14px; padding-bottom: 10px;}
  .tourism .taxi_app_box                              { padding: 12px; }
  .tourism .taxi_app_icon                             { width: 60px; height: 60px; }
  .tourism .taxi_app_title                            { font-size: 1rem; }
  .tourism .taxi_app_buttons                          { flex-direction: column; gap: 8px; }
  .tourism .app_button                                { font-size: 1rem; padding: 8px 16px; }
  .center_count										                    {font-size:14px;}

  .tourism .img_layout_wrap                           {margin-top:20px; gap:8px;}
}

/** 의료기관 **/
.medical_list									{ gap:1rem 2%; }
.medical_list.con_inner								{width:100%;}
.medical_list li									{ position:relative; width:32%; padding-bottom:3rem; text-align:left; background:#eef1f3; border-radius:1rem}
.medical_list .info_area						{ padding:1.5rem}
.medical_list .info_area .cate				{ align-items:center; gap:.3em; font-size:.97rem; }
.medical_list .info_area .cate .badge		{ padding:.3em .8em; color:#fff; border-radius:2em; }
.medical_list .info_area .cate .bg_green	{ background:#26ae7b}
.medical_list .info_area .cate .bg_blue		{ background:var(--blue)}
.medical_list .info_area .cate .bg_grey		{ color:#646464; background:#F0F0F0;}

.medical_list .info_area .cate .area		{ font-weight:700; color:#666b6f}
.medical_list .info_area .name				{ display:block; margin:.4em 0; font-weight:700; font-size:1.24rem; letter-spacing:-.01em;  }
.medical_list .info_area .txt					{ display:block; margin:.15em 0; padding-left:1.3em; font-size:1.09rem; letter-spacing:-.01em; color:#666; background:no-repeat 0 .2em / 18px}
.medical_list .info_area .txt.time                           {display:none;}
.medical_list .info_area .add				{ background-image:url(https://tour.jb.go.kr/resources/jns-img/sub/bg_location.svg)}
.medical_list .info_area .call				{ background-image:url(https://tour.jb.go.kr/resources/jns-img/sub/bg_tel.svg)}
.medical_list .btn_area						{ position:absolute; bottom:0; left:0; width:100%; border-top:1px solid #fff; }
.medical_list .btn_area>a					{ flex:1; display:block; padding:.7em; text-align:center; font-size:1.07rem; color:#777; }
.medical_list .btn_area .arr					{ position:relative; display:inline-block; width:17px; height:8px; margin:.3em 0 0 .2em; vertical-align:top; }
.medical_list .btn_area .arr::after			{ position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--blue); content:""}
.medical_list .btn_area .arr::before		{ position:absolute; right:0; bottom:25%; width:35%; height:1px; background:var(--blue); transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); content:""}

.medical_link									{ gap:1rem 2%; margin:3.5rem auto}
.medical_link.con_inner							{width:100%;}
.medical_link li								{ width:49%; }
.medical_link li>a								{ display:block; padding:2.5rem; border-radius:1em; }
.medical_link .search							{ color:#fff; background:url(/resources/jns-img/content/bg_medical01.png), linear-gradient(45deg,#26a875,#30b180); background-repeat:no-repeat, no-repeat; background-position:top 50% right 2.5rem, 0 0;}
.medical_link .emergency						{ color:#000; background:url(/resources/jns-img/content/bg_medical02.png), linear-gradient(45deg,#f6da52,#f5d547); background-repeat:no-repeat, no-repeat; background-position:top 50% right 2.5rem, 0 0;}
.medical_link li em								{ display:block; margin-bottom:.3em; font-weight:700; font-size:1.66rem;}
.medical_link li span							{ display:block; padding-right:8rem; font-weight:300; font-size:1rem; letter-spacing:-.01em; opacity:.8}

/* 관광안내소 */
.medical_list.center								{width: 100%;}
.medical_list.center li								{width:calc((100% - 6%)/4); background-color: #fff; border:1px solid #c8c8c8;}
.medical_list.center  .btn_area						{width:calc(100% - 3rem); left:50%; transform: translateX(-50%); border-top: 1px solid #c8c8c8;}
.medical_list.center .cate							{gap:6px; margin-top:10px;}


@media all and (min-width:1025px){
	.mobile											{ display:none !important}
  .tourism .tour_top_title_box img     {margin-top:3px;}
}

@media all and (max-width:1024px){
	.medical_list.center li						{width:32%;}
}


@media all and (max-width:968px){
	.medical_link li>a								{ padding:1.8rem; }
	.medical_link .search,
	.medical_link .emergency					{ background-position:top 50% right 1.8rem, 0 0;}
}
@media all and (max-width:968px) and (min-width:769px){
	.medical_link li span	br						{ display:none}
}
@media all and (max-width:768px){
	.medical_list li,
	.medical_list.center li									{ width:calc((100% - 2%)/2); padding-bottom:2.5rem; }
	.medical_list .info_area						{ padding:1.2rem }
	.medical_list .info_area .cate				{ font-size:.92rem; }
	.medical_list .info_area .cate .badge		{ padding:.2em .6em; }
	.medical_list .info_area .name				{ margin:.3em 0; font-size:1.15rem; }
	.medical_list .info_area .txt					{ margin:.1em 0; padding-left:1em; font-size:1rem; background-size:15px}
	.medical_list .btn_area>a					{ padding:.6em; font-size:1rem; }

	.medical_link li								{ width:100%; }
	.medical_link li em							{ font-size:1.45rem;}
	.medical_link li span							{ font-size:.95rem; }
}
@media all and (max-width:568px){
	.medical_list .info_area						{ padding:1rem }
	.medical_list .info_area .cate				{ font-size:.9rem; }
	.medical_list .info_area .name				{ font-size:1.08rem; }
	.medical_list .info_area .txt					{ font-size:.95rem; background-size:13px; background-position-y:.3em}
	.medical_list .btn_area>a					{ font-size:.95rem; }
	.medical_list .btn_area .arr					{ width:12px; margin-top:.2em; }

	.medical_link							{ margin:2rem auto}
	.medical_link li>a								{ padding:1.5rem; }
	.medical_link .search,
	.medical_link .emergency					{ background-position:top 50% right 1.5rem, 0 0; background-size:85px, cover; }
	.medical_link li em							{ font-size:1.2rem;}
	.medical_link li span							{ padding-right:6rem; }
}
@media all and (max-width:468px){
	.medical_link li span	br						{ display:none}
}
@media all and (max-width:358px){
	.medical_list									{ flex-direction:column; gap:.8rem}
	.medical_list li,
	.medical_list li, .medical_list.center li		{ width:100%; }
}


/* 군산 페리 이용안내 */

.ferry_con_wrap                                                      {margin-bottom:10rem;}
.ferry_con_wrap .cont_visual_top .cont_visual                        {position:relative; height:500px; overflow:hidden;}
.ferry_con_wrap .cont_visual_top .cont_visual .flowermap_bg          {width:100%; height:100%; object-fit:cover; border-radius:0 0 200px 200px;}
.ferry_con_wrap .cont_visual_top .visual_content                     {position:absolute; top:50%; left:0; width:100%; padding:0 1.3rem; text-align:center; transform:translateY(-50%); }
.ferry_con_wrap .cont_visual_top .visual_content p                   {margin-top:12px; font-size:1.6rem; letter-spacing:-0.055em; font-weight: 500; color:#fff; line-height: 1.5;}
.ferry_con_wrap .cont_visual_top .visual_content h2                  {font-size:3.6rem; letter-spacing:-0.055em; font-weight: 700; color:#fff;}

/* Tab Wrapper */
.ferry_con_wrap .tab_wrapper                                                                                {background-color: #f5f5f5; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px; border-radius: 12px; width: 100%; max-width: 1300px; margin:100px 0; }
.ferry_con_wrap .tab_button                                                                                 {display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; border-radius: 12px; width: 100%; max-width: 635px; background-color: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease; }
.ferry_con_wrap .tab_button--active                                                                         {background-color: #ffffff; border-color: #d9d9d9; }
.ferry_con_wrap .tab_icon                                                                                   {position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.ferry_con_wrap .tab_icon_img                                                                               {width: 100%; height: 100%; object-fit: contain; }
.ferry_con_wrap .tab_text                                                                                   {font-size: 1.375rem; line-height: normal; font-weight: 400; color: #111111; text-align: center; letter-spacing: -1.21px; white-space: nowrap; }
.ferry_con_wrap .tab_button--active .tab_text                                                               {color: #006ed2; font-weight: 700; }

/* Content */
.ferry_con_wrap .content                                                                                    {display: flex; flex-direction: column; gap: 100px; align-items: center; width: 100%; max-width: 1300px; }
.ferry_con_wrap .content--hidden                                                                            {display: none; }
.ferry_con_wrap .map_container .map_bg                                                                      {width: 100%; height:100%;}
.ferry_con_wrap .map_bg img                                                                                 {width:100%; height:100%; object-fit: cover;}

/* Section */
.ferry_con_wrap .section                                                                                    {width: 100%; }
.ferry_con_wrap .section_title                                                                              {font-size: 2.133rem; line-height: normal; font-weight: 700; color: #111111; text-align: center; letter-spacing: -1.76px; white-space: nowrap; margin-bottom: 40px; }

/* Route Grid */
.ferry_con_wrap .route_grid                                                                                 {display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }

@media (min-width: 1024px) {
  .ferry_con_wrap .route_grid                                                                               {grid-template-columns: repeat(2, 1fr); }
}

/* Map Container */
.ferry_con_wrap .map_container                                                                              {border: 1px solid #d9d9d9; height: 400px; overflow: hidden; border-radius: 20px; position: relative; }

/* Route Image */
.ferry_con_wrap .route_image                                                                                {height: 400px; border-radius: 20px; overflow: hidden; position: relative; }
.ferry_con_wrap .route_image img                                                                            {width: 100%; height: 100%; object-fit: cover; }

/* Info Box */
.ferry_con_wrap .info_box                                                                                   {border: 1px solid #006ed2; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; padding: 20px 40px; border-radius: 20px; }

@media (min-width: 1024px) {
  .ferry_con_wrap .info_box                                                                                 {flex-direction: row; gap: 40px; }
}

.ferry_con_wrap .info_main                                                                                  {display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ferry_con_wrap .info_icon                                                                                  {width: 48px; height: 48px; flex-shrink: 0; }
.ferry_con_wrap .info_route                                                                                 {font-size: 1.5rem; line-height: normal; font-weight: 700; color: #006ed2; text-align: center; letter-spacing: -1.32px; white-space: nowrap; flex-shrink: 0; }
.ferry_con_wrap .info_details                                                                               {display: flex; flex-direction: column; gap: 20px; align-items: center; flex-shrink: 0; }

@media (min-width: 1024px) {
  .ferry_con_wrap .info_details                                                                             {flex-direction: row; }
}

.ferry_con_wrap .info_item                                                                                  {display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.ferry_con_wrap .info_item_icon                                                                             {width: 24px; height: 24px; flex-shrink: 0; }
.tourism .traffic_info.flex                                                                                 {gap:10px; justify-content: center; padding-top:20px;}


.tourism .info_text                                                                                         {display: flex; align-items:center; gap:4px; font-size: 1.25rem; line-height: normal; color: #000000; letter-spacing: -1.1px; white-space: pre-wrap; flex-shrink: 0; }

.tourism .info_text--bold                                                                                   {font-weight: 700; }
.tourism .traffic_info.flex .info_text                                                                      {color:#656565;} 
.tourism .info_text--small                                                                                  {font-size: 1.125rem; }

/* Table Wrapper */
.ferry_con_wrap .table_wrapper                                                                              {overflow-x: auto; margin-bottom: 8px; }

/* Schedule Table */
.ferry_con_wrap .schedule_table                                                                             {width: 100%; border-collapse: collapse; }
.ferry_con_wrap .schedule_table thead tr                                                                    {background-color: #004889; }
.ferry_con_wrap .schedule_table thead th                                                                    {border-right: 1px solid #ffffff; padding: 12px; font-size: 1.125rem; text-align: center; color: #ffffff; font-weight: 500; letter-spacing: -0.99px; }
.ferry_con_wrap .schedule_table thead th:last-child                                                         {border-right: none; }
.ferry_con_wrap .schedule_table tbody td                                                                    {background-color: #ffffff; border-bottom: 1px solid #d9d9d9; padding: 20px; font-size: 1.125rem; text-align: center; color: #505050; letter-spacing: -0.99px; }
.ferry_con_wrap .schedule_table tbody .td_port                                                              {background-color: #f0f0f0; }
.ferry_con_wrap .table_note                                                                                 {text-align:center; font-size: 1rem; line-height: 1.875; color: #111111; letter-spacing: -0.88px;}

/* Fare Table */
.ferry_con_wrap .fare_table                                                                                 {width: 100%; border-collapse: collapse; }
.ferry_con_wrap .fare_table .fare_header                                                                    {background-color: #004889; }
.ferry_con_wrap .fare_table .fare_header th                                                                 {border-right: 1px solid #ffffff; padding: 12px; font-size: 1.125rem; text-align: center; color: #ffffff; font-weight: 500; letter-spacing: -0.99px; }
.ferry_con_wrap .fare_table .fare_header th:last-child                                                      {border-right: none; }
.ferry_con_wrap .fare_table .fare_subheader                                                                 {background-color: #f0f0f0; }
.ferry_con_wrap .fare_table .fare_subheader th                                                              {border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; padding: 12px; font-size: 1.125rem; text-align: center; color: #111111; letter-spacing: -0.99px; }
.ferry_con_wrap .fare_table .fare_subheader th:last-child                                                   {border-right: none; }
.ferry_con_wrap .fare_table tbody td                                                                        {border-bottom: 1px solid #d9d9d9; padding: 20px; font-size: 1.125rem; text-align: center; color: #505050; letter-spacing: -0.99px; }
.ferry_con_wrap .fare_table tbody .td_grade                                                                 {background-color: #f0f0f0; font-weight: 500; }
.ferry_con_wrap .fare_notes                                                                                 {display: flex; flex-direction: column; gap:6px; font-size: 1.125rem; color: #111111; text-align: center; margin-top: 8px; letter-spacing: -0.99px; }
.ferry_con_wrap .fare_notes p                                                                               {display: flex;  flex-wrap:wrap; gap:6px 10px; justify-content: center; margin-bottom: 0; }

/* Link Button */
.ferry_con_wrap .link_button_wrap                                                                           {text-align:center;}
.ferry_con_wrap .link_button                                                                                {display: inline-flex; gap: 6px; align-items: center; margin: 60px auto 0; padding: 18px 30px; border-radius: 8px; border: none; cursor: pointer; font-size: 1.125rem; line-height: normal; font-weight: 500; text-align: center; letter-spacing: -0.99px; white-space: nowrap; }
.ferry_con_wrap .link_button--primary                                                                       {background-color: #006ed2; color: #ffffff; }
.ferry_con_wrap .link_button--secondary                                                                     {background-color: transparent; color: #656565; border: 1px solid #656565; }
.ferry_con_wrap .link_button_icon                                                                           {width: 24px; height: 24px; flex-shrink: 0; }

/* Tourism Grid */
.ferry_con_wrap .tourism_grid                                                                               {display: grid; grid-template-columns: 1fr; gap: 40px 20px; }

@media (min-width: 768px) {
  .ferry_con_wrap .tourism_grid                                                                             {grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ferry_con_wrap .tourism_grid                                                                             {grid-template-columns: repeat(3, 1fr); }
  .ferry_con_wrap .tourism_card:hover .tourism_arrow                                                          {transform: translateX(10px);}
}

/* Tourism Card */
.ferry_con_wrap .tourism_card                                                                               {display: flex; flex-direction: column; gap: 20px; transition:transform .3s;}

.ferry_con_wrap .tourism_image                                                                              {height: 270px; border-radius: 20px; overflow: hidden; }
.ferry_con_wrap .tourism_image img                                                                          {width: 100%; height: 100%; object-fit: cover; }
.ferry_con_wrap .tourism_info                                                                               {display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 0 20px; }
.ferry_con_wrap .tourism_details                                                                            {display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ferry_con_wrap .tourism_name                                                                               {font-size: 1.333rem; line-height: normal; font-weight: 700; color: #111111; letter-spacing: -1.1px; }
.ferry_con_wrap .tourism_location                                                                           {display: flex; gap: 6px; align-items: center; }
.ferry_con_wrap .tourism_location_icon                                                                      {width: 14px; height: 19px; overflow: hidden; flex-shrink: 0; }
.ferry_con_wrap .tourism_location p                                                                         {font-size: 1.2rem; line-height: normal; color: #656565; letter-spacing: -0.99px; }
.ferry_con_wrap .tourism_arrow                                                                              {width: 40px; height: 40px; flex-shrink: 0; transition: transform 0.3s;}
.ferry_con_wrap .tourism_arrow svg                                                                          {width: 100%; height: 100%; }

/* Empty State */
.ferry_con_wrap .empty_state                                                                                {text-align: center; padding: 100px 0; }
.ferry_con_wrap .empty_state_title                                                                          {font-size: 2rem; font-weight: 700; color: #111111; letter-spacing: -1.76px; }
.ferry_con_wrap .empty_state_text                                                                           {font-size: 1.25rem; color: #505050; margin-top: 16px; letter-spacing: -1.1px; }

/* Responsive */

@media (max-width: 1024px) {
  .tourism .traffic_info.flex                                                                               {gap:8px;}


 /* visual Section */
  .ferry_con_wrap .cont_visual_top .cont_visual                                                             {height: 450px; }
  .ferry_con_wrap .cont_visual_top .cont_visual .flowermap_bg                                               {border-radius: 0 0 150px 150px; }
  .ferry_con_wrap .cont_visual_top .visual_content h2                                                       {font-size:3rem; }
  .ferry_con_wrap .cont_visual_top .visual_content p                                                        {font-size:1.4rem; }

  
  .ferry_con_wrap .tab_wrapper                                                                              {margin:80px 0; }
  .ferry_con_wrap .section_title                                                                            {font-size: 1.8rem; margin-bottom: 40px; }
  .ferry_con_wrap .content                                                                                  {gap:80px;}
  .ferry_con_wrap .tab_text                                                                                 {font-size: 1.125rem; }
  .ferry_con_wrap .map_label--shidao                                                                        {left: 50px; top: 140px; }
  .ferry_con_wrap .info_box,.info_details,.ferry_con_wrap .info_details                                     {gap:10px;}
  .ferry_con_wrap .route_grid                                                                               {margin-bottom: 16px; gap:16px;}
  .ferry_con_wrap .route_image                                                                              {border-radius: 10px;}
  .ferry_con_wrap .tourism_grid                                                                             {gap:30px 20px;}
  .ferry_con_wrap .tourism_card                                                                             {gap:16px;}
  .ferry_con_wrap .fare_notes p                                                                             {gap:3px 5px;}
  .ferry_con_wrap .fare_notes                                                                               {gap:5px; font-size:1rem;}
  .ferry_con_wrap .link_button                                                                              {margin-top: 40px;}

}

@media (max-width: 768px) {
  .tourism .traffic_info.flex                                                                              {gap:4px 6px;}


  .ferry_con_wrap .cont_visual_top .cont_visual                                                            {height:380px; }
  .ferry_con_wrap .cont_visual_top .cont_visual .flowermap_bg                                              {border-radius: 0 0 120px 120px; }
  .ferry_con_wrap .cont_visual_top .visual_content h2                                                      {font-size:2.4rem; }
  .ferry_con_wrap .cont_visual_top .visual_content p                                                       {font-size:1.3rem; }
  .ferry_con_wrap .cont_visual_top .visual_content img                                                     {width:60%; }

  .ferry_con_wrap .tab_wrapper                                                                              {margin: 60px 0; }
  .ferry_con_wrap .section_title                                                                            {font-size: 1.7rem; margin-bottom: 20px; }
  .ferry_con_wrap .content                                                                                  {gap:60px;}
  .ferry_con_wrap .route_grid                                                                               {margin-bottom: 12px; gap:12px;}

  
  .ferry_con_wrap .info_route                                                                               {font-size: 1.25rem; }
  .tourism .info_text                                                                                {font-size: 1rem; }
  .tourism .info_text--small                                                                         {font-size: 0.95rem; }
  .ferry_con_wrap .schedule_table thead th,
  .ferry_con_wrap .schedule_table tbody td                                                                  {font-size: 0.95rem; padding: 10px 8px; }
  .ferry_con_wrap .fare_table .fare_header th,
  .ferry_con_wrap .fare_table .fare_subheader th,
  .ferry_con_wrap .fare_table tbody td                                                                      {font-size: 0.95rem; padding: 10px 8px; }
  .ferry_con_wrap .info_box,.info_details,.ferry_con_wrap .info_details                                     {gap:6px;}


  .ferry_con_wrap .tourism_grid                                                                             {gap:26px;}
  .ferry_con_wrap .tourism_card                                                                             {gap:12px;}
  .ferry_con_wrap .tourism_name                                                                             {font-size: 1.3rem; }
  .ferry_con_wrap .tourism_location p                                                                       {font-size: 1rem; }
  .ferry_con_wrap .fare_notes                                                                               {font-size: .95rem;}
  .ferry_con_wrap .link_button                                                                              {margin-top: 30px;}
}

@media (max-width: 480px) {

  .tourism .traffic_info.flex                                                                               {padding-top:10px;}

  .ferry_con_wrap .cont_visual_top .cont_visual                                                             {height:220px; }
  .ferry_con_wrap .cont_visual_top .visual_content h2                                                       {font-size:1.8rem; }
  .ferry_con_wrap .cont_visual_top .visual_content p                                                        {font-size:1.2rem; }
  .ferry_con_wrap .cont_visual_top .visual_content p br                                                     {display:none;}
  .ferry_con_wrap .cont_visual_top .cont_visual .flowermap_bg                                               {border-radius: 0 0 60px 60px; }


  .ferry_con_wrap .tab_wrapper                                                                              {margin:40px 0; }
  .ferry_con_wrap .tab_button                                                                               {padding: 10px 6px; gap:4px;}
  .ferry_con_wrap .tab_icon                                                                                 {width: 20px; height: auto; }
  .ferry_con_wrap .tab_text                                                                                 {font-size: 0.95rem; }
  .ferry_con_wrap .section_title                                                                            {margin-bottom: 12px; font-size: 1.6rem; }
  .ferry_con_wrap .content                                                                                  {gap:40px;}  
  .ferry_con_wrap .info_box                                                                                 {padding: 16px 20px; }
  .tourism .info_text--small                                                                                {display:none;}
  .ferry_con_wrap .info_item_icon                                                                           {width: 20px; height: 20px;}
  .ferry_con_wrap .info_icon                                                                                {width:36px; height:auto;}
  .ferry_con_wrap .link_button                                                                              {min-height:45px; margin-top:16px; padding: 14px 24px; font-size: 1rem; }
  .ferry_con_wrap .map_container                                                                            {height: 200px; }
  .ferry_con_wrap .route_image                                                                              {height: 200px; }
  .ferry_con_wrap .tourism_card                                                                             {gap:8px;}
  .ferry_con_wrap .tourism_info                                                                             {padding:0;}
  .ferry_con_wrap .tourism_name                                                                             {font-size: 1.2rem; }
  .ferry_con_wrap .tourism_arrow                                                                            {width:36px; height:36px;}
  .ferry_con_wrap .tourism_image                                                                            {height: 220px; }
  .ferry_con_wrap .fare_notes                                                                               {font-size: .95rem;}

}

/* ========== GTI ========== */

.traffic_info_wrap .traffic_info .gti_page                       { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; }
.traffic_info_wrap .gti_tit                        { width: 531px; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 103px; text-align: center; color: var(--color_black); }
.traffic_info_wrap .gti_tit_title                  { margin: 0; width: 531px; font-weight: 700; font-size: 2rem; line-height: 1.1875; letter-spacing: -1.76px; }
.traffic_info_wrap .gti_tit_desc                   { margin: 0; width: 535px; font-weight: 400; font-size: 1.25rem; line-height: 1.6; letter-spacing: -1.1px; white-space: pre; }
.traffic_info_wrap .gti_station                    { width: 1300px; display: flex; flex-direction: column; margin-top: 40px; }
.traffic_info_wrap .gti_station_hero               { width: 1300px; height: 440px; position: relative; }
.traffic_info_wrap .gti_station_hero_clip          { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.traffic_info_wrap .gti_station_hero_img           { position: absolute; left: -1.02%; top: -40.85%; width: 101.77%; height: 161.27%; max-width: none; }
.traffic_info_wrap .gti_station_row                { width: 1300px; display: flex; align-items: center; justify-content: space-between; margin-top: 41px; }
.traffic_info_wrap .gti_station_row_left           { display: flex; align-items: center; gap: 30px; padding-left: 20px; }
.traffic_info_wrap .gti_station_name               { width: 143px; height: 48px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.traffic_info_wrap .gti_station_badge              { width: 48px; height: 48px; border-radius: 30px; background: var(--color_main); display: flex; align-items: center; justify-content: center; padding: 11px 10px 9px; flex: 0 0 auto; }
.traffic_info_wrap .gti_station_badge_icon_wrap    { width: 40px; height: 40px; position: relative; }
.traffic_info_wrap .gti_station_badge_icon         { position: absolute; inset: 0; width: 40px; height: 40px; }
.traffic_info_wrap .gti_station_name_text          { font-weight: 700; font-size: 2rem; line-height: 1.4375; letter-spacing: -1.76px; text-align: center; white-space: nowrap; }
.traffic_info_wrap .gti_station_divider            { width: 1px; height: 70px; background: var(--color_gray_d9); flex: 0 0 auto; }
.traffic_info_wrap .gti_station_meta               { width: 722px; height: 60px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 0 0 auto; }
.traffic_info_wrap .gti_station_meta_desc          { margin: 0; width: 722px; height: 32px; font-weight: 400; font-size: 1.25rem; line-height: 1.6; letter-spacing: -1.1px; white-space: nowrap; }
.traffic_info_wrap .gti_station_addr               { width: 195px; height: 22px; display: flex; align-items: center; gap: 6px; }
.traffic_info_wrap .gti_station_addr_icon          { width: 15px; height: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.traffic_info_wrap .gti_station_addr_icon_svg      { width: 15px; height: 20px; max-width: none; }
.traffic_info_wrap .gti_station_addr_text          { margin: 0; font-weight: 400; font-size: 1.125rem; line-height: 1.2222222; letter-spacing: -0.99px; color: var(--color_gray_656); white-space: pre; }
.traffic_info_wrap .gti_station_addr_label         { font-weight: 700; }
.traffic_info_wrap .gti_station_cta                { width: 177px; height: 50px; display: flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 8px; border: 1px solid var(--color_gray_656); text-decoration: none; flex: 0 0 auto; margin-right: 20px; }
.traffic_info_wrap .gti_station_cta_text           { font-weight: 500; font-size: 1.125rem; line-height: 1.2222222; letter-spacing: -0.99px; text-align: center; color: var(--color_gray_656); white-space: pre; }
.traffic_info_wrap .gti_cards                      { width: 1300px; height: 180px; display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.traffic_info_wrap .gti_card                       { width: 640px; height: 180px; position: relative; flex: 0 0 auto; }
.traffic_info_wrap .gti_card_label                 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 49px; display: flex; align-items: center; justify-content: center; padding: 10px 20px; background: var(--color_white); }
.traffic_info_wrap .gti_card_label_text            { font-weight: 700; font-size: 1.5rem; line-height: 1.2083333; letter-spacing: -1.32px; text-align: center; white-space: nowrap; color: var(--color_main); }
.traffic_info_wrap .gti_card_body                  { position: absolute; left: 0; top: 25px; width: 640px; height: 155px; border: 1px solid var(--color_gray_d9); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 40px; }
.traffic_info_wrap .gti_card_kpis                  { display: flex; align-items: center; gap: 16px; }
.traffic_info_wrap .gti_card_kpi                   { margin: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.4; letter-spacing: -1.1px; color: var(--color_gray_656); white-space: pre; }
.traffic_info_wrap .gti_card_kpi_label             { font-weight: 700; }
.traffic_info_wrap .gti_card_kpi_single            { margin-top: 0; }
.traffic_info_wrap .gti_card_route                 { width: 478px; text-align: center; font-size: 1.25rem; letter-spacing: -1.1px; color: var(--color_gray_656); }
.traffic_info_wrap .gti_card_route_line            { margin: 0; font-weight: 700; line-height: 1.4; }
.traffic_info_wrap .gti_card_route_value           { font-weight: 400; }
.traffic_info_wrap .gti_card_route_line_secondary  { font-weight: 400; }

/* ========== Layout ========== */
.traffic_info_wrap .title_section                  { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; text-align: center; margin: 0 auto; }
.traffic_info_wrap .main_title                     { font-weight: 700; font-size: 2rem; line-height: 1.2; color: #111111; letter-spacing: -0.11rem; white-space: nowrap; }
.traffic_info_wrap .sub_title                      { font-weight: 400; font-size: 1.25rem; line-height: 1.6; color: #111111; letter-spacing: -0.06875rem; white-space: pre-wrap; }
.traffic_info_wrap .content_wrapper                { position: relative; margin: 2.667rem auto 0;}
.traffic_info_wrap .station_section                { position: relative; width: 100%; margin-top:100px;}
.traffic_info_wrap .station_section.first         {margin-top:0;}     
.traffic_info_wrap .station_image                  { width: 100%; height: 27.5rem; object-fit: cover; border-radius: 20px; }
.traffic_info_wrap .station_info_wrapper           { display: flex; align-items: center; gap: 1.875rem; padding:0 1.6rem; margin-top: 2.5625rem; flex-wrap: wrap; }
.traffic_info_wrap .station_info_left              { display: flex; align-items: center; gap: 0.625rem; }
.traffic_info_wrap .train_icon_wrapper             { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: #006ed2; border-radius: 1.875rem; flex-shrink: 0; }
.traffic_info_wrap .train_icon                     { width: 2.5rem; height: 2.5rem; }
.traffic_info_wrap .station_name                   { font-weight: 700; font-size: 2rem; line-height: 1.5; color: #111111; letter-spacing: -0.11rem; white-space: nowrap; }
.traffic_info_wrap .divider_vertical               { width: 0.0625rem; height: 4.375rem; background-color: #d9d9d9; flex-shrink: 0; }
.traffic_info_wrap .station_details                { display: flex; flex-wrap: wrap; gap: 0.6rem 0.375rem; flex:1; display:flex; justify-content: space-between; align-items: center;}
.traffic_info_wrap .station_details .detail_gap    {flex-direction: column; gap:6px;}
.traffic_info_wrap .station_description            { font-weight: 400; font-size: 1.25rem; line-height: 1.6; color: #111111; letter-spacing: -0.06875rem; }
.traffic_info_wrap .address_row                    { display: flex; align-items: center; gap: 0.375rem; }
.traffic_info_wrap .location_icon                  { width: 0.9375rem; height: 1.25rem; flex-shrink: 0; }
.traffic_info_wrap .address_text                   { font-weight: 400; font-size: 1.125rem; line-height: 1.5; color: #656565; letter-spacing: -0.061875rem; }
.traffic_info_wrap .address_text .bold             { font-weight: 700; }
.traffic_info_wrap .route_cards_wrapper            { display: flex; gap: 1.25rem; margin-top: 6.875rem; flex-wrap: wrap; }
.traffic_info_wrap .route_card                     { display:flex; justify-content: center; align-items:center; position: relative; flex: 1; border: 0.0625rem solid #d9d9d9; border-radius: 1.25rem; padding: 2rem 2.5rem 2rem; }
.traffic_info_wrap .route_card_header              { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; padding: 0.625rem 1.25rem; white-space: nowrap; }
.traffic_info_wrap .route_card_title               { font-weight: 700; font-size: 1.5rem; line-height: 1.5; color: #006ed2; letter-spacing: -0.0825rem; }
.traffic_info_wrap .route_card_content             { display: flex; flex-direction: column; align-items: center; gap: 0.375rem;}
.traffic_info_wrap .route_info_row                 { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.traffic_info_wrap .route_info_item                { font-weight: 400; font-size: 1.25rem; line-height: 1.4; color: #656565; letter-spacing: -0.06875rem; white-space: pre; }
.traffic_info_wrap .route_info_item .bold          { font-weight: 700; }
.traffic_info_wrap .route_description              { font-weight: 400; font-size: 1.25rem; line-height: 1.4; color: #656565; letter-spacing: -0.06875rem; text-align: center;}
.traffic_info_wrap .route_description .bold        { font-weight: 700; }
.traffic_info_wrap .booking_button                 { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; border: 0.0625rem solid #656565; border-radius: 0.5rem; background-color: transparent; font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 1.5; color: #656565; letter-spacing: -0.061875rem; cursor: pointer; display: block; transition: all 0.3s ease; }
.traffic_info_wrap .booking_button:hover           { background-color: #f5f5f5; }

/* ========== Media Query: 1024px ========== */
@media (max-width: 1024px) {
  .traffic_info_wrap .station_section             {margin-top:80px;}
  .traffic_info_wrap .gti_station                  { width: 100%; max-width: 1300px; padding: 0 24px; }
  .traffic_info_wrap .gti_station_hero             { width: 100%; }
  .traffic_info_wrap .gti_station_row              { width: 100%; }
  .traffic_info_wrap .gti_cards                    { width: 100%; }
  .traffic_info_wrap .gti_station_cta              { margin-right: 0; }
  .traffic_info_wrap .main_title                   { font-size: 1.75rem; letter-spacing: -0.096rem; }
  .traffic_info_wrap .sub_title                    { font-size: 1.125rem; letter-spacing: -0.061875rem; }
  .traffic_info_wrap .content_wrapper              { margin-top: 2rem; }
  .traffic_info_wrap .divider_vertical             { height: 8rem;}
  .traffic_info_wrap .station_image                {border-radius:10px;}
  .traffic_info_wrap .station_name                 { font-size: 1.75rem; letter-spacing: -0.096rem; }
  .traffic_info_wrap .station_description          { font-size: 1.125rem; letter-spacing: -0.061875rem; }
  .traffic_info_wrap .route_card                   { min-width: 100%; }
  .traffic_info_wrap .route_cards_wrapper          { margin-top: 5rem; }
  .traffic_info_wrap .booking_button               {margin-top:1rem;}
}

/* ========== Media Query: 768px ========== */
@media (max-width: 768px) {
  .traffic_info_wrap .station_section                 {margin-top:60px;}

    .traffic_info_wrap .gti_tit                      { width: 100%; max-width: 531px; padding: 0 24px; }
    .traffic_info_wrap .gti_station_row              { flex-direction: column; align-items: stretch; gap: 16px; }
    .traffic_info_wrap .gti_station_row_left         { padding-left: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
    .traffic_info_wrap .gti_station_divider          { width: 100%; height: 1px; }
    .traffic_info_wrap .gti_station_meta             { width: 100%; height: auto; }
    .traffic_info_wrap .gti_station_meta_desc        { width: 100%; height: auto; white-space: normal; }
    .traffic_info_wrap .gti_station_cta              { align-self: flex-end; }
    .traffic_info_wrap .gti_cards                    { height: auto; flex-direction: column; align-items: stretch; gap: 16px; }
    .traffic_info_wrap .gti_card                     { width: 100%; max-width: 640px; margin: 0 auto; }
    .traffic_info_wrap .gti_card_body                { width: 100%; }
    .traffic_info_wrap .gti_card_kpis                { flex-direction: column; gap: 6px; }
    .traffic_info_wrap .gti_card_route               { width: 100%; }
    .traffic_info_wrap .main_title                   { font-size: 1.5rem; letter-spacing: -0.0825rem; white-space: normal; }
    .traffic_info_wrap .sub_title                    { font-size: 1rem; letter-spacing: -0.055rem; }
    .traffic_info_wrap .content_wrapper              { margin-top: 1.6rem;}
    .traffic_info_wrap .divider_vertical             { display:none;}
    .traffic_info_wrap .station_image                { height: 18.75rem; }
    .traffic_info_wrap .station_info_wrapper         { padding:0; flex-direction: column; align-items: flex-start; gap:.8rem 1.25rem; margin-top: 1.875rem; }
    .traffic_info_wrap .station_name                 { font-size: 1.5rem; letter-spacing: -0.0825rem; }
    .traffic_info_wrap .station_description          { font-size: 1rem; letter-spacing: -0.055rem; line-height: 1.5; }
    .traffic_info_wrap .address_text                 { font-size: 1rem; letter-spacing: -0.055rem; }
    .traffic_info_wrap .route_cards_wrapper          { margin-top: 3.75rem; gap: 1.875rem; }
    .traffic_info_wrap .route_card                   { padding: 1.875rem 1.25rem 2rem; }
    .traffic_info_wrap .route_card_title             { font-size: 1.25rem; letter-spacing: -0.06875rem; }
    .traffic_info_wrap .route_info_item              { font-size: 1.125rem; letter-spacing: -0.061875rem; }
    .traffic_info_wrap .route_description            { font-size: 1.125rem; letter-spacing: -0.061875rem; }
    .traffic_info_wrap .route_description br         {display:none;}
    .traffic_info_wrap .booking_button               { margin-top: .8rem; font-size: 1rem; padding: 0.75rem 1.5rem; }
}

/* ========== Media Query: 480px ========== */
@media (max-width: 480px) {
    .traffic_info_wrap .station_section              {margin-top:40px;}

    .traffic_info_wrap .gti_station                  { padding: 0 16px; }
    .traffic_info_wrap .gti_tit                      { padding: 0 16px; }
    .traffic_info_wrap .gti_tit_title                { font-size: 1.75rem; }
    .traffic_info_wrap .gti_station_name_text        { font-size: 1.75rem; }
    .traffic_info_wrap .gti_card_label_text          { font-size: 1.25rem; }
    .traffic_info_wrap .gti_card_body                { padding: 24px 20px; }
    .traffic_info_wrap .title_section                { gap: 0.5rem; }
    .traffic_info_wrap .main_title                   { font-size: 1.4rem; letter-spacing: -0.06875rem; }
    .traffic_info_wrap .sub_title                    { font-size: 0.875rem; letter-spacing: -0.048125rem; }
    .traffic_info_wrap .content_wrapper              { margin-top: 1.3rem; }
    .traffic_info_wrap .station_image                { height: 15rem; }
    .traffic_info_wrap .train_icon_wrapper           { width: 2.5rem; height: 2.5rem; }
    .traffic_info_wrap .train_icon_wrapper img       {width: 16px; height: auto;}
    .traffic_info_wrap .train_icon                   { width: 2rem; height: 2rem; }
    .traffic_info_wrap .station_info_wrapper         {margin-top:1rem;}
    .traffic_info_wrap .station_name                 { font-size: 1.25rem; letter-spacing: -0.06875rem; }
    .traffic_info_wrap .station_description          { font-size: 0.9375rem; letter-spacing: -0.051562rem; }
    .traffic_info_wrap .address_text                 { font-size: 0.9375rem; letter-spacing: -0.051562rem; }
    .traffic_info_wrap .route_cards_wrapper          { margin-top: 3rem; gap: 1.5rem; }
    .traffic_info_wrap .route_card                   { padding: 1rem 1rem 1rem; }
    .traffic_info_wrap .route_card_content           {padding-top:1rem;}
    .traffic_info_wrap .route_card_title             { font-size: 1.125rem; letter-spacing: -0.061875rem; }
    .traffic_info_wrap .route_info_row               { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .traffic_info_wrap .route_info_item              { font-size: 1rem; letter-spacing: -0.055rem; }
    .traffic_info_wrap .route_description            { font-size: 1rem; letter-spacing: -0.055rem; text-align: left; }
    .traffic_info_wrap .booking_button               { width: 100%; margin-top: .6rem; text-align: center; font-size: 0.9375rem; }
}