@font-face {
    font-family: 'JalnanGothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* visual Section */
.jb_special .summer_visual                              {position:relative; height:560px; overflow:hidden;}
.jb_special .summer_visual .summer_bg                   {width:100%; height:100%; object-fit:cover; border-radius:0 0 200px 200px;}
.jb_special .choose_content                             {position:absolute; top:42%; 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; color:white; letter-spacing:-0.055em; font-weight: 800;}
.jb_special .x_sm_display{display:none;}
/* 인트로 */
.intro                                                  { margin-top:5.06rem; text-align: center;}
.intro h3                                               { font-size:2.4rem; letter-spacing:-0.06em; font-weight:700; color:#333; line-height: 1.4; word-break: keep-all;}
.intro h3 em                                            { color:#4b81ed;}
.intro h3 br                                            { display:none;}
.intro p                                                { margin:.5rem 0 5.06rem;  font-size:1.666rem; letter-spacing:-0.06em; color:#8c8c8c;}
.intro p br                                             { display:none;}
.intro div                                              { overflow: hidden; border-radius:2rem;}

/* radius 공통 */
.jb_special .radius                                     {border-radius:1.6rem;}

/* summer trip badge */
.summer_badge                                           {position:relative; display:flex; align-items: center; gap:0 6rem; margin-bottom:3rem; padding:0 54px; height:180px; background-color:#bbe87c; overflow:hidden;}
.summer_badge::after                                    {position:absolute; right:0; top:50%; transform:translateY(-50%); width:446px; height:373px; background-image: url('/resources/jns-img/special/summer/img_badge_bg.png'); background-size:cover; content:'';}
.summer_badge .num                                      {position:relative; font-size:3.2rem; letter-spacing:-0.02em; font-family: 'JalnanGothic'; color:#364e13;}
.summer_badge .num::after                               {position:absolute; right:-54px; top:50%; transform:translateY(-50%); display:inline-block; width:1px; height:140px; background-color:#95be5c; content:'';}
.summer_badge .txt_wrap                                 {position:relative; z-index:11;}
.summer_badge em                                        {font-size:2.4rem; font-weight: 700; letter-spacing:-0.06em; color:#374f14;}
.summer_badge p                                         {margin-top:8px; font-size:1.6rem; font-weight:400; letter-spacing:-0.06em; color:#374f14;}
.summer_badge.two                   {background-color:#9bdfff;}
.summer_badge.two .num              {color:#163f52;}
.summer_badge.two .num::after       {background-color:#70a2ba;}
.summer_badge.two em                {color:#163f52;}
.summer_badge.two p                 {color:#163f52;}
.summer_badge.two::after            {width:486px; height:351px; background-image: url('/resources/jns-img/special/summer/img_badge_bg_2.png');}
.summer_badge.three                   {background-color:#4c81ed ;}
.summer_badge.three .num              {color:#fff;}
.summer_badge.three .num::after       {background-color:#99b7f5;}
.summer_badge.three em                {color:#fff;}
.summer_badge.three p                 {color:#fff;}
.summer_badge.three::after            {width:472px; height:200px; background-image: url('/resources/jns-img/special/summer/img_badge_bg_3.png');}

 /* summer trip list */
.summer_special                                         {margin-bottom:5.333rem;}
.summer_list_con                                        {margin-bottom:4rem;}
.summer_list_con .summer_list                           {display:flex; margin-top:2.133rem;}
.summer_list_con .tit_area                              {position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1.3rem 0; flex:0 0 460px; padding:1.3rem 0;}
.summer_list_con .tit_area .tt_wrap                     {flex-direction:column; gap:1.3rem 0;}
.summer_list_con .tit_area::after                       {position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-block; width:1px; height:100%; background-color:#e4e4e4; content:'';}
.summer_list_con .con_area                              {flex: 0 0 calc(100% - 460px);}
.summer_list_con .bg_area                               {height:480px;}
.summer_list_con .bg_area img                           {width:100%; height:100%; object-fit:cover;}
.summer_list_con .tit_area em                           {font-size:2.533rem; font-weight:700; letter-spacing:-0.075em; line-height: 1;}
.summer_list_con .tit_area p                            {display:flex; align-items:center; gap:0 8px; font-size:1.267rem; font-weight:300; color:#787878; letter-spacing:-0.055em;}
.summer_list_con .tit_area .link                        {display:inline-block; width:auto; padding:0 2rem; height:45px; line-height:45px; font-size:1.267rem; font-weight:300; letter-spacing:-0.055em; background-color:#f0f0f0;}
.summer_list_con .con_area                              { padding:1.3rem 0 1.3rem 3rem;}
.summer_list_con .con_area p                            {font-size:1.4rem; font-weight:300; color:#222222; line-height: 1.6; letter-spacing:-0.055em; word-break:keep-all;}

@media (max-width: 1300px) {
    .summer_badge::after                                {width:300px; height:251px;}
}
@media (min-width: 1025px) {
    .summer_badge::after                                {right:2rem;}
}
@media (max-width: 1024px) {
    /* visual Section */
    .jb_special .summer_visual                          { height: 450px;}
    .jb_special .choose_content h2                      { font-size:3rem;}
    .jb_special .choose_content p                       { font-size:2.4rem;}
    .jb_special .summer_visual .summer_bg               {border-radius:0 0 160px 160px;}
    .jb_special .radius                                 {border-radius:1rem;}
    .summer_special                                     {margin-bottom:4rem;}
    .summer_list_con .tit_area .txt_wrap                {gap:1rem 0;}

    /* 인트로 */
    .intro                                              { margin-top:3.06rem;}
    .intro h3                                           { font-size:2rem;}
    .intro p                                            { margin-bottom:3.06rem; font-size:1.4rem;}
    .intro div                                          { border-radius:1rem;}
    .summer_badge                                       {gap:0 4rem; height:160px; margin-bottom:2rem; padding:0 30px;}
    .summer_badge em                                    {font-size:2rem;}
    .summer_badge .num                                  {font-size:3rem;}
    .summer_badge::after                                {width:200px; height:167px;}
    .summer_badge.two::after                            {width:200px; height:144px;}
    .summer_badge.three::after                          {width:200px; height:85px;}

    .summer_badge .num::after                           {right:-40px; height:140px;}
    .summer_badge p                                     {font-size:1.4rem;}
    .summer_list_con                                    {margin-bottom:3.6rem;}
    .summer_list_con .summer_list                       {margin-top:1.6rem;}
    .summer_list_con .tit_area em                       {font-size:2.4rem;}
    .summer_list_con .con_area                          {padding:1rem 1.4rem; flex:0 0 50%;}
    .summer_list_con .con_area p                        {font-size:1.3rem;}
    .summer_list_con .tit_area                          {flex:0 0 50%; gap:1rem 0; padding:1.3rem 0 1.3rem 1rem;}
    .summer_list_con .tit_area .tt_wrap                 {gap:1rem 0;}
    .summer_list_con .tit_area .link                    {padding:0 1.2rem; font-size:1.1rem;}
    .summer_list_con .tit_area p                        {font-size:1.1rem;}
    .summer_list_con .bg_area                           {height:400px;}
}

@media (max-width:768px) {
    /* visual Section */
    .jb_special .summer_visual                          { height:380px;}
    .jb_special .summer_visual .summer_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 h3                                           { font-size:1.75rem;}
    .intro p                                            { font-size:1.23rem;}

    .summer_special                                     {margin-bottom:3.6rem;}

    .summer_badge                                       {padding:0 20px; gap:0 3rem; height:140px; margin-bottom:1rem;}
    .summer_badge em                                    {font-size:1.75rem;}
    .summer_badge .num                                  {font-size:2.8rem;}
    .summer_badge .num::after                           {right:-25px; height:100px;}
    .summer_badge p                                     {font-size:1.3rem;}
    .summer_badge::after                                {width:150px; height:125px;}
    .summer_badge.two::after                            {width:150px; height:108px;}
    .summer_badge.three::after                          {width:150px; height:64px;}
    .summer_list_con                                    {margin-bottom:3rem;}
    .summer_list_con .summer_list                       {flex-wrap:wrap; margin-top:1.5rem;}
    .summer_list_con .tit_area                          {flex:0 0 100%; padding:0;}
    .summer_list_con .tit_area.m_flex                   {flex-direction:row; align-items:center; justify-content:space-between; gap:1rem;}
    .summer_list_con .tit_area .link                    {padding:0 1rem; font-size:1rem;}
    .summer_list_con .con_area                          {flex:0 0 100%; padding:1rem 0;}
    .summer_list_con .tit_area::after                   {display:none;}
    .summer_list_con .tit_area em                       {font-size:2rem;}
    .summer_list_con .con_area p                        {font-size:1.2rem;}
    .summer_list_con .tit_area p                        {font-size:1rem;}
    .summer_list_con .bg_area                           {height:300px;}
}
@media (min-width:569px) {
    .map_mobile { display:none;}
}
@media (max-width:568px) {
    .map_mobile { display:block;}
    .map_pc     { display:none;}
}
@media (max-width:600px) {
    .con_inner                                              { width: 86%;}

    /* visual Section */
    .jb_special .choose_content                             {padding:0 .8rem;}
    .jb_special .summer_visual                              { height:220px;}
    .jb_special .choose_content h2                          { font-size:1.6rem;}
    .jb_special .choose_content p                           { font-size:1.3rem;}
    .jb_special .summer_visual .summer_bg                   {border-radius: 0 0 60px 60px;}
    .summer_special                                         {margin-bottom:3rem;}

    /* 인트로 */
    .intro                                                  { margin-top: 2.3rem;}
    .intro h3                                               { font-size:1.55rem;}
    .intro h3 br                                            { display:none;}
    .intro p                                                { margin-bottom:2.3rem; font-size:1.1rem;}
    .intro p br                                             { display:block;}
    .summer_badge                                           {padding:30px 15px 0; height:120px; gap:0 2rem;}
    .summer_badge em                                        {font-size:1.55rem;}
    .summer_badge .num                                      {position:absolute; left:0; top:-1px; padding:.5rem .8rem; font-size:1.3rem; color:#fff; background-color:#364e13;}
    .summer_badge.two .num                                  {color:#fff; background-color:#163f52;}
    .summer_badge.three .num                                {color:#4c81ed; background-color:#fff;}
    .summer_badge::after                                    {width:100px; height:84px; top:2rem;}
    .summer_badge.two::after                                {width:80px; height:58px;}
    .summer_badge.three::after                              {width:80px; height:34px;}
    .summer_badge .num::after                               {display:none; right:-15px;}
    .summer_badge p                                         {font-size:1.2rem;}
    .summer_list_con                                        {margin-bottom:2rem;}
    .summer_list_con .summer_list                           {margin-top:1rem;}
    .summer_list_con .tit_area .link                        {height:40px; line-height: 40px;}
    .summer_list_con .tit_area em                           {font-size:1.7rem;}
    .summer_list_con .con_area p                            {font-size:1rem;}    
    .summer_list_con .tit_area p                            {font-size:.9rem;}   
    .summer_list_con .bg_area                               {height:240px;}
}
@media (max-width:480px) {
    .summer_badge                                           {height:100px;}
    .summer_badge .num                                      {padding:.3rem .5rem;}
}
@media (max-width:430px) {
    .summer_list_con .tit_area.m_flex                       {flex-wrap:wrap; align-items:flex-start; gap:.5rem 0;}
    .summer_list_con .tit_area em                           {font-size:1.4rem;}
    .summer_badge em                                        {font-size:1.3rem;}
    .summer_badge .num                                      {font-size:1.2rem;}
    .summer_badge p                                         {font-size:1rem;}
}
@media (max-width:350px) {
    .summer_badge                                           {height:80px;}
    .summer_badge p                                         {display:none;}
}

