/* visual Section */
.jb_special .beach_visual                             {position:relative; height:500px; overflow:hidden;}
.jb_special .beach_visual .beach_bg                 {width:100%; height:100%; object-fit:cover; border-radius:0 0 200px 200px;}
.jb_special .choose_content                         {position:absolute; top:50%; left:0; width:100%; padding:0 1.3rem; text-align:center; transform:translateY(-50%);}
.jb_special .choose_content p                       {font-size:2.667rem; letter-spacing:-0.055em; font-weight: 500; color:#fff;}
.jb_special .choose_content h2                      {font-size:3.6rem; letter-spacing:-0.055em; font-weight: 800; color:white;}

/* 인트로 */
.intro                                      {margin-top:4rem; text-align: center;}
.intro p                                    {font-size:1.563rem; font-weight:400; letter-spacing:-0.06em; line-height:1.6; color:#8c8c8c;}
.intro p em                                 {font-weight:700;}

/*common*/
.radius                                     {border-radius:1.6rem;}
.align_center                               {align-items:center;}

/*best area*/
.best_area                                  {position:relative; max-width:1200px; padding:6rem 0 5.5rem; margin:4rem auto 4px; border-bottom:1px solid #cccdcf;}
.best_area .area_con                        {position:relative; z-index:1000;}
.best_area::before                          {position:absolute; top:0; left:0; display:inline-block; width:100%; height:70%; border-radius:1.6rem; background-color:#bbcbff; content:'';}
.best_area .best_list                       {position:relative; z-index:100; justify-content:center; padding-top:.667rem;}
.best_area .best_list::after                {position:absolute; top:-.5rem; left:0; width:100%; height:60px; background-image:url('/resources/jns-img/special/beach/img_wave.png'); opacity:.5; background-size:cover; background-repeat:no-repeat; content: '';}
.best_area .best_list li                    {z-index: 100;}
.best_area .best_list li:nth-child(1),
.best_area .best_list li:nth-child(3)       {margin-top:40px;}

.best_area .best_list .best_txt             {display:flex; justify-content: flex-end; margin-top:-1.5rem; padding-right:2.4rem; font-size:1.4rem; font-style:italic; font-weight:400; line-height:1.4; letter-spacing:-0.075em;}
.best_area .best_list .best_txt .txt_left   {display:flex; flex-direction: column; text-align:left;}
.best_area .best_list .best_txt .bold       {font-weight:500;}
.best_area .tag_area                        {margin-bottom:4px; font-size:2rem; font-weight:700; color:#365ee3; letter-spacing:-0.065em;}
.best_tit_img img                           {position:relative; z-index: 300;}

/* 관광지 리스트 타이틀 */
.beachlist .main_tit                    {justify-content:space-between; align-items:center; gap:4px 0; margin-bottom:1.6rem;}
.beachlist .main_tit .gap               {align-items:center; gap:0 10px;}
.beachlist .main_tit .badge             {display:inline-block; padding:0 1.3rem; height:40px; line-height:40px; font-size:1.6rem; font-weight:700; letter-spacing:-0.05em; color:#fff; background-color: #7494ff;}
.beachlist .main_tit .badge.green       {color:#000; background-color:#6eecc0;}
.beachlist .main_tit .tit               {font-size:2.667rem; font-weight:700; letter-spacing:-0.06em;}
.beachlist .main_tit .add               {font-size:1.267rem; font-weight:300; letter-spacing:-0.055em; color:#737373;}

/* 관광지 리스트 */
.beachlist                                   {max-width:1200px; margin:0 auto; padding-top:4rem; padding-bottom:5.3rem; border-bottom:1px solid #dcdcdc;}
.beachlist.first                            {border-top:1px solid #cccdcf;}
.beachlist .main_img                         {margin-bottom:3rem;}
.beachlist .beachlist_txt                    {text-align: center;}
.beachlist .beachlist_txt h4                 {margin: .6rem 0 .8rem; font-size:2.2rem; font-weight:700; letter-spacing:-0.055em; color:#3b3d41;}
.beachlist .beachlist_txt p                  {padding:0 2rem; font-size:1.3rem; font-weight:300; letter-spacing:-.06em; line-height:1.6; word-break: keep-all;}
.beachlist .beachlist_img                    {justify-content:center; gap:0 1.5%; margin:2.4rem 0;}
.beachlist .beachlist_img div                {position:relative; overflow:hidden; width:calc((100% - 1.5%)/2);  border-radius:2rem;}
.beachlist .btn_wrap                         {text-align:center; margin-top:2.4rem;}
.beachlist .btn_wrap .link_btn               {display:inline-block; min-width:260px; height:60px; line-height:60px; font-size:1.3rem; font-weight:700; letter-spacing: -.06em; color:#000; border:1px solid #a6a6a6; border-radius:8px;}

/*scroll guide*/
.scroll_guide                               {margin:0 0 4px; padding:0 4px; text-align:right; color:#8c8c8c; font-size: .9rem;}
.scroll_guide,
.scroll_guide.sm                            {display:none;}

@media (max-width: 1300px) {
    .beachlist .beachlist_txt p br          {display:none;}
}
@media (max-width: 1200px) {
    .best_area .best_list                   {padding:.667rem 2rem 0;}
    .best_area .best_list li                {flex:1;}
    .best_area .best_list .best_txt         {padding-right:1.4rem; font-size:1.3rem; }
}
@media (max-width: 1024px) {
    .scroll_guide                           {display:block;}

    /* visual Section */
    .jb_special .beach_visual           {height: 450px;}
    .jb_special .choose_content h2      {font-size:3rem;}
    .jb_special .choose_content p       {font-size:2.4rem;}
    .jb_special .beach_visual .beach_bg {border-radius:0 0 160px 160px;}
    /* 인트로 */
    .intro                              {margin-top:3.06rem;}
    .intro p                            {margin-bottom:2.733rem; padding:0 2rem; font-size:1.4rem;}
    .intro p br                         {display:none;}

    /* 관광지 리스트 */
    .beachlist .beachlist_txt h4         {font-size:1.9rem;}
    .beachlist .beachlist_txt p          {font-size:1.18rem;}
    .beachlist .beachlist_img div        {border-radius:1rem;}
    .best_area::before                   {height:60%;}
    .best_area                           {padding:4rem 0 5.5rem;}
    .best_area .tag_area                 {font-size:1.6rem;}
    .best_tit_img img                    {width:70%;}
    .best_area .best_list                {padding:.667rem 1rem 0; justify-content: flex-start; overflow-y: hidden; overflow-x: auto; flex-wrap: nowrap;}
    .best_area .best_list .best_txt      {padding-right:1rem; margin-top:-.6rem; font-size:1.2rem;}
    .best_area .best_list .best_txt      {padding-right:1rem; margin-top:-.6rem; font-size:1.2rem;}
    .beachlist .main_img                 {margin-bottom:2rem;}
    .beachlist .main_img img             {border-radius:1rem;}
    .beachlist .main_tit .tit            {font-size:2.2rem;}
    .beachlist .main_tit .badge          {font-size:1.4rem;}
    .beachlist .main_tit                {margin-bottom:1.4rem;}
    .beachlist .main_tit .add           {font-size:1.1rem;}
    .beachlist .beachlist_img           {margin:2rem 0;}
    .beachlist .btn_wrap                {margin-top:2rem}
}

@media (max-width:768px) {
    /* visual Section */
    .jb_special .beach_visual               {height:380px;}
    .jb_special .beach_visual .beach_bg     {border-radius: 0 0 120px 120px;}
    .jb_special .choose_content h2          {font-size:2.4rem;}
    .jb_special .choose_content p           {font-size:2rem;}
    .jb_special .choose_content img         {width:60%;}

    /* 인트로 */
    .intro p                                    {padding:0; font-size:1.23rem;}

    /* 관광지 리스트 */
    .beachlist                                  {padding-bottom: 4rem;}
    .beachlist .beachlist_txt h4                {font-size:1.8rem;}
    .beachlist .beachlist_img                   {margin: 1.2rem 0;}
    .beachlist .btn_wrap                        {margin-top:1.8rem;}
    .beachlist .btn_wrap .link_btn              {min-width: 140px; height: 40px; font-size:1.08rem; line-height:40px;}
    .best_area                                  {padding:4rem 0; border-bottom:none;}
    .best_area::before                          {height:100%;}
    .beachlist .main_img                        {margin-bottom:1.2rem;}
    .beachlist .main_tit .tit                   {font-size:2rem;}
    .beachlist.first                            {border-top:none;}
    .best_area .tag_area                        {font-size:1.4rem;}
    .best_area .best_list li                    {flex:50% 0 0;}
}
@media (min-width:569px) {
    .map_mobile {display:none;}

}
@media (max-width:568px) {
    .map_mobile {display:block;}
    .map_pc     {display:none;}
}

@media (max-width:468px) {
    .scroll_guide.sm                            {display:block;}

    /* visual Section */
    .jb_special .beach_visual         {height:220px;}
    .jb_special .choose_content h2      {font-size:1.8rem;}
    .jb_special .choose_content p       {font-size:1.6rem;}
    .jb_special .beach_visual .beach_bg {border-radius: 0 0 60px 60px;}

    .con_inner                              {width: 86%;}

    /* 인트로 */
    .intro                                  {margin-top: 2.3rem;}
    .intro p                                {margin-bottom:1.3rem; font-size:1.1rem;}

    /* 관광지 리스트 */
    .beachlist                               {padding:2rem 0;}
    .beachlist .beachlist_txt h4             {font-size: 1.4rem; margin: .3rem 0;}
    .beachlist .beachlist_txt p              {padding: 0; font-size: 1.02rem; line-height: 1.5;}
    .beachlist .beachlist_img                {justify-content: flex-start; overflow-y: hidden; overflow-x: auto; flex-wrap: nowrap; margin:1.2rem 0;}
    .beachlist .beachlist_img div            {flex: 90% 0 0;}
    .beachlist .btn_wrap .link_btn           {min-width: 120px; font-size: 1.05rem;}
    .best_area                              {margin:2.3rem auto 4px; padding:2rem 0;}
    .best_area .best_list li                {flex:90% 0 0;}
    .best_area .tag_area                    {font-size:1.3rem;}
    .best_tit_img img                       {width:90%;}
    .best_area .best_list .best_txt         {margin-top:-1.5rem; font-size: 1rem;}
    .beachlist .main_tit                    {margin-bottom:.8rem;}
    .beachlist .main_tit .tit               {font-size:1.6rem;}
    .beachlist .main_tit .badge             {padding:0 1rem; height:32px; line-height: 32px; font-size:1.2rem;}
    .beachlist .main_tit .add               {font-size:1rem;}
    .beachlist .main_img                    {margin-bottom:.8rem;}
    .best_area .best_list li                {margin-top:8px !important;}
}