@charset 'utf-8'; /* 모바일만 ~767px */
/* PC부터 1280px~ */
@media screen and (max-width: 1440px) {
  .side_menu li {
    width: 100px;
    height: 110px;
  }
  .club_manage_tab_menu {
    padding: 0 10%;
  }
  .tab_menu li a img {
    padding: 0 12%;
  }
  .upi_card_img {
    height: 145px;
  }
}
@media screen and (max-width: 1200px) {
  .promotion_banner.adsGo {
    margin-right: 15px;
  }

  /* visit korea card - coko */
  .visit-card--coko__benefit .benefit__item {
    padding: 30px;
  }

  .visit-card--coko__benefit .benefit__item__info {
    width: 320px;
  }
}
@media screen and (max-width: 1024px) {
  .card_info_list.table {
    width: 100%;
    overflow-x: auto;
  }
  .franchisee {
    min-width: 1016px;
  }

  /* visit korea card - coko */
  .visit-card--coko__benefit .benefit__item {
    padding: 25px;
  }

  .visit-card--coko__benefit .benefit__item__info {
    width: 260px;
  }

  .visit-card--coko__benefit .benefit__item__info h3 {
    font-size: 25px;
  }

  .visit-card--coko__benefit .benefit__item__info p {
    font-size: 20px;
  }
}
@media screen and (max-width: 1000px) {
  .header {
    padding-bottom: 5%;
  }
  .club_manage_tab_menu {
    display: none;
  }
  .club_manage_tab_menu.mo {
    display: block;
    width: 100%;
    padding: 0 15px;
  }
  .tab_menu li a {
    padding-bottom: 25px;
  }
  .tab_menu li a img {
    padding: unset;
    width: 46%;
  }
  /*.visual_section { padding: 0 20px; }*/
  .side_menu li {
    width: 80px;
    height: 90px;
  }
  .top_ad_banner {
    padding: 0 20px 30px 20px;
  }
  .bottom_ad_banner.cashback .bottom_ad_banner_img {
    height: 185px;
    background: url("../images/ads/UPI_line banner_1_mobile.png") center center
      no-repeat;
    background-size: contain;
  }
  .card_info {
    padding: 0 15px;
  }

  /* visit korea card - coko */
  .visit-card--coko__benefit .benefit__item {
    padding: 25px;
  }

  .visit-card--coko__benefit .benefit__item__info {
    width: 260px;
  }

  .visit-card--coko__benefit .benefit__item__info + .imgCon {
    width: 150px;
  }

  .visit-card--coko__benefit .benefit__item__info + .imgCon img {
    width: 100%;
  }
}

/* 태블릿부터 768px~ */
@media screen and (max-width: 768px) {
  header {
    border: unset;
  }
  #header {
    height: unset;
    padding: 25px 15px 30px;
  }
  .tab_menu {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  }
  header {
    width: 100%;
    padding: 0;
  }
  h1 {
    width: 220px;
  }
  h1 a {
    width: 220px;
    background: url("../images/ads/mo_bi.png") center center/contain no-repeat;
  }
  .lang_ico {
    width: 20px;
    margin: 7px 0 0 0;
  }
  .lang_ico img {
    width: 20px;
    height: 20px;
  }
  .lang_wrap {
    width: unset;
    height: auto;
  }
  .lang_menu {
    width: unset;
  }
  .lang_wrap > div {
    display: none;
  }
  .lang_wrap > div:nth-child(1) {
    display: block;
  }
  .lang_menu a {
    font-size: 15px;
    font-weight: 400;
  }
  .lang {
    height: 25px;
  }
  .lang_btn {
    z-index: 1;
  }
  .lang_btn img {
    width: 15px;
  }
  /*.visual_section { width: 100%; height: 370px; }*/
  /*.visual_section.adsgo { height: unset; }*/
  /*.visual_section.upi { height: unset; }*/
  #container {
    width: 100%;
  }
  .top_ad_banner_img {
    display: none;
  }
  .top_ad_banner.cashback .top_ad_banner_img {
    display: block;
    height: 140px;
    background: url("../images/ads/UPI_main banner.png") center center no-repeat;
    background-size: contain;
  }

  .mo_apply_guide #myModal2-1 .modal-content {
    top: 10%;
  }
  .mo_apply_guide #myModal1-1 .modal-content {
    top: -2%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 65vw;
  }
  .promotion_banner {
    width: 100%;
    height: auto;
  }
  .swiper-wrapper {
    width: 100%;
  }

  .promotion_banner.adsGo {
    width: 100%;
    margin-right: unset;
  }
  .promotion_banner.adsUpi {
    width: 100%;
    margin-right: unset;
  }
  .app_down_btn {
    display: none;
  }
  .mo_appdown_banner1 {
    display: block;
    height: 90px;
    margin: 0;
    background-color: transparent;
  }
  .mo_appdown_banner1 a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    background: url("../images/ads/mo_app_store.png") center center/cover
      no-repeat;
  }
  .mo_mobile_wrap {
    display: block;
    width: 100%;
    margin: 20px 0;
    background-color: transparent;
  }
  .mo_appdown_minibanner {
    float: left;
    margin-left: 5px;
  }
  .mo_appdown_minibanner a {
    display: block;
    width: 180px;
    height: 65px;
    font-size: 20px;
    background: url("../images/ads/mo_app_store2.png") center center/contain
      no-repeat;
  }
  .mo_appdown_banner2 {
    display: block;
    height: 60px;
    margin: 30px 0;
    background-color: transparent;
  }
  .mo_appdown_banner2 a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    background: url("../images/ads/mo_app_store2.png") center center/contain
      no-repeat;
  }
  .mo_appdown_banner2 {
    display: block;
  }
  .mo_appdown_banner2 a {
    display: block;
  }
  .triple_plate {
    display: block;
    width: 100%;
    height: 86px;
    background: url("../images/ads/mo_benefits.png") center center/contain
      no-repeat;
  }
  .triple_plate_img {
    width: 100%;
    height: 86px;
    background: url("../images/ads/mo_benefits.png") center center/cover
      no-repeat;
  }
  .triple_mobile {
    display: none;
  }
  .triple_app {
    display: none;
  }
  .triple_sns {
    display: none;
  }
  .triple_benefit,
  .triple_benefit img {
    width: 100%;
  }
  .mo_mobile_wrap {
    display: block;
  }
  .mo_top_banner {
    display: block;
    width: 100%;
    padding: 20px 0;
  }
  #myModal4-1 .modal-content {
    top: -2%;
  }
  .mo_top_banner img {
    width: 100%;
  }
  .mo_triple_sns {
    float: right;
    margin: 10px 5px 0px 0px;
  }
  .mo_triple_sns ul li {
    float: left;
    width: 45px;
    height: 45px;
    margin: 0 5px;
  }
  .mo_triple_sns ul li a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mo_triple_sns ul li a img {
    width: 45px;
    height: 45px;
  }
  .bottom_ad_banner.upi {
    padding-bottom: unset;
  }
  .bottom_ad_banner.upi .bottom_ad_banner_img {
    height: 115px;
    background: url("../images/ads/QR_line banner_mobile.png") center center
      no-repeat;
    background-size: cover;
  }
  .upi_qr_card_howto.mo {
    display: block;
    padding: 30px 15px;
    background-color: #f0f0f0;
  }
  .upi_qr_card_howto.pc {
    display: none;
  }
  .upi_qr_card_howto p {
    display: block;
    margin: unset;
    font-weight: 800;
    font-size: 23px;
  }
  .upi_qr_card_howto > ul li {
    padding-bottom: 30px;
  }
  .upi_qr_card_howto > ul li:first-of-type {
    padding: 30px 0;
  }
  .upi_card_img.upi {
    background: #131313 url("../images/ads/UPI_line banner_2_mobile.png") center
      center no-repeat;
    background-size: contain;
  }
  /* footer */
  .ft_menu {
    width: 100%;
  }
  .ft_info_wrap {
    width: 100%;
  }
  .side_menu li {
    float: left;
  }
  .side_menu li a {
    width: 25%;
    background: none;
  }
  .ft_info_section {
    padding: 30px;
  }
  .ft_menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ft_menu_wrap {
    padding: unset;
  }
  .ft_menu li {
    padding: 10px;
  }
  .ft_menu li:nth-child(1) {
    padding-left: 0;
  }
  .ft_menu li:nth-child(4) {
    padding-right: 0;
  }
  .ft_menu li a {
    font-size: 15px;
    font-weight: 600;
  }
  .ft_menu li a:after {
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    width: 1px;
    height: 20px;
    content: "";
    background: #d5d5d5;
  }
  .ft_info_left {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .ft_company_name {
    font-size: 14px;
  }
  .ft_info_left ul {
    font-size: 12px;
  }
  .ft_customer_center {
    font-size: 14px;
  }
  .ft_info_right ul {
    font-size: 12px;
    padding: 10px 0;
  }
  .ft_info_left ul span {
    font-weight: 300;
  }
  .ft_info_right ul span {
    font-weight: 300;
  }
  .ft_copyright {
    font-size: 12px;
    font-weight: 400;
    color: #ddd;
  }
  /* modal */
  .modal-content,
  .modal-content img {
    left: 0;
    width: 100%;
  }
  #myModal1.show,
  #myModal2.show,
  #myModal3.show,
  #myModal4.show,
  #myModal5.show {
    display: none;
  }
  #myModal1-1.show,
  #myModal2-1.show,
  #myModal3-1.show,
  #myModal4-1.show,
  #myModal5-1.show {
    display: block;
  }

  /* visit korea card - coko */
  .visit-card--coko__benefit .benefit__item {
    padding: 20px;
  }

  .visit-card--coko__benefit .benefit__item__info {
    width: 212px;
  }

  .visit-card--coko__benefit .benefit__item__info h3 {
    font-size: 20px;
  }

  .visit-card--coko__benefit .benefit__item__info p {
    font-size: 16px;
  }

  .visit-card--coko__benefit .benefit__item__info + .imgCon {
    width: 110px;
  }
}

.showMobile {
  display: none;
}
.hideMobile {
  display: block;
}

/* 가로 모드 (Landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .showMobile {
    display: block !important;
  }
  .hideMobile {
    display: none !important;
  }

  .bottom_ad_banner.cashback {
    padding: unset;
  }
  .bottom_ad_banner.cashback .bottom_ad_banner_img {
    height: 116px;
  }

  .v_wrap {
    padding: 40px 15px;
  }

  .sec1 {
    padding: 40px 10px 0;
    height: auto;
  }

  .appDownloadQrCode {
    display: flex;
    justify-content: center;
  }

  .appDownloadQrCode img {
    width: 120px;
    height: auto;
  }

  .appDownloadBtns {
    display: flex;
    justify-content: center;
    width: 70%;
    gap: 10px;
  }

  .appDownloadBtns a {
    width: 30%;
  }

  .appDownloadBtns a img {
    width: 100%;
  }

  .sec1 .content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .sec1 .vis-container {
    display: block;
  }

  .sec1 h1 {
    font-size: 40px;
    text-align: center;
    width: 100%;
  }

  .sec1 p {
    font-size: 16px;
    text-align: center;
  }

  .sec1 .mainVisualCardImg {
    width: 50%;
  }

  .mainVisualImg {
    margin-top: 30px;
    height: 180px;
    overflow: hidden;
    text-align: center;
  }

  .section-title {
    font-size: 26px;
    margin-bottom: 20px;
    letter-spacing: -1px;
  }

  .sec2 {
    padding: 40px 0;
  }

  .vk-card {
    padding: 20px 20px 0;
    text-align: center;
    height: 100%;
  }

  .vk-card h3 {
    font-size: 22px;
  }

  .vk-card p {
    font-size: 16px;
    margin: 8px 0;
  }

  .vk-card small {
    font-size: 13px;
  }

  .vk-card .imgCon {
    text-align: center;
  }

  .vk-card .imgCon img {
    width: 100%;
  }

  .vk-card .imgCon.v1 {
    height: auto;
    margin-top: 30px;
  }
  .vk-card .imgCon.v2 {
    height: auto;
    margin-top: 30px;
  }

  .vk-card .imgCon.v1 img {
    width: 50%;
    height: auto;
  }
  .vk-card .imgCon.v2 img {
    width: 80%;
  }
  .vk-card .imgCon.v3 {
    width: 100%;
    height: auto;
    margin: 30px 0;
  }
  .vk-card .imgCon.v4 {
    width: 100%;
    height: auto;
    margin: 30px 0;
  }

  /*.sec3 .vk-img-card {*/
  /* display: flex;*/
  /* justify-content: space-between;*/
  /* align-items: center;*/
  /*}*/
  .sec3 .vk-img-card .imgCon {
    width: 200px;
  }

  .sec3 .vk-img-card .imgCon img {
    width: 100%;
  }

  .sec3 .vk-img-card h3 {
    font-size: 18px;
    /*text-align: right;*/
  }

  .sec3 .vk-img-card p {
    font-size: 14px;
    /*text-align: right;*/
  }

  .sec3 .vk-img-card .textCon h3 {
    letter-spacing: -1px;
  }

  .sec3 .vk-img-card .textCon p {
    letter-spacing: -1px;
  }

  .kt-banner.kr img {
    width: 150%;
  }

  .kt-banner img {
    width: 120%;
  }

  .sec4 {
    padding: 40px 20px 0;
  }

  .sec4::before {
    background-size: cover;
  }

  .sec4 .visual-img-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sec4 .visual-img-container p {
    font-size: 12px;
  }

  .sec4 img {
    width: 70%;
  }

  .section-sub-title {
    font-size: 16px;
  }

  .sec6 h3 {
    font-size: 20px;
  }

  .sec6 ul li {
    font-size: 16px;
    word-break: break-all;
  }

  .sec6 .detail {
    padding: 40px;
  }

  .sec6 .imgCon {
    padding: 0 100px;
  }

  .sec6 .imgCon2 {
    height: 300px;
  }

  .download-banner .vis-container {
    display: block;
  }

  .download-banner h1 {
    font-size: 26px;
    text-align: center;
    width: 100%;
  }

  .download-banner .content {
    display: flex;
    justify-content: center;
  }

  .download-banner .appDownloadBtns {
    margin-top: 30px;
  }

  .download-banner .download-info {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper-inner-contents {
    display: block;
  }

  .sec5 .swiper-content {
    top: 0;
  }

  .sec5 .swiper-content {
    text-align: center;
  }

  .sec5 .swiper-content h3 {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .sec5 .swiper-content .num {
    font-size: 30px;
    margin-bottom: 0;
  }

  .sec5 .swiper-content p {
    font-size: 18px;
  }

  .swiper-inner-contents .imgCon {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .swiper-inner-contents img {
    width: 40%;
  }

  .sec5 .swiper-content .imgCon {
    overflow: hidden;
  }

  .swiper1 .swiper-pagination {
    width: 100%;
  }

  .swiper-wrapper {
    padding-bottom: 50px;
  }

  .swiper1 .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }

  .swiper1 .swiper-pagination {
    bottom: 20px;
  }
}

/* 세로 모드 (Portrait) */
@media only screen and (max-width: 768px) {
  /* 여기에 태블릿 세로 모드에 적용할 스타일을 작성하세요 */
}

@media screen and (max-width: 600px) {
  .showMobile {
    display: block !important;
  }
  .hideMobile {
    display: none !important;
  }

  .bottom_ad_banner.cashback {
    padding: unset;
  }
  .bottom_ad_banner.cashback .bottom_ad_banner_img {
    height: 116px;
  }

  .v_wrap {
    padding: 60px 20px;
  }

  .sec1 {
    padding: 40px 10px 0;
    height: auto;
  }

  .appDownloadQrCode {
    display: flex;
    justify-content: center;
  }

  .appDownloadQrCode img {
    width: 100px;
    height: auto;
  }

  .appDownloadBtns {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }

  .appDownloadBtns a {
    width: 30%;
  }

  .appDownloadBtns a img {
    width: 100%;
  }

  .sec1 .vis-container {
    display: block;
  }

  .sec1 h1 {
    font-size: 37px;
    text-align: center;
    width: 100%;
  }

  .sec1 p {
    font-size: 16px;
    text-align: center;
  }

  .sec1 .mainVisualCardImg {
    width: 80%;
  }

  .mainVisualImg {
    margin-top: 30px;
    height: 180px;
    overflow: hidden;
    text-align: center;
  }

  .section-title {
    font-size: 24px;
    margin-bottom: 20px;
    letter-spacing: -1px;
  }

  .sec2 {
    padding: 40px 0;
  }

  .vk-card {
    padding: 20px 20px 0;
    text-align: center;
    height: auto;
  }

  .vk-card h3 {
    font-size: 22px;
  }

  .vk-card p {
    font-size: 16px;
    margin: 8px 0;
  }

  .vk-card small {
    font-size: 13px;
  }

  .vk-card .imgCon {
    text-align: center;
  }

  .vk-card .imgCon img {
    width: 90%;
  }

  .vk-card .imgCon.v1 {
    height: auto;
    margin-top: 30px;
  }
  .vk-card .imgCon.v2 {
    height: auto;
    margin-top: 30px;
  }

  .vk-card .imgCon.v1 img {
    width: 50%;
    height: auto;
  }
  .vk-card .imgCon.v2 img {
    width: 60%;
  }
  .vk-card .imgCon.v3 {
    width: 100%;
    height: auto;
    margin: 30px 0;
  }
  .vk-card .imgCon.v4 {
    width: 100%;
    height: auto;
    margin: 30px 0;
  }

  .sec3 .cld-row [class*="cld-col"] {
    margin: 0;
    padding: 0;
  }

  .sec3 .vk-img-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sec3 .vk-img-card .imgCon {
    width: 120px;
  }

  .sec3 .vk-img-card .imgCon img {
    width: 100%;
  }

  .sec3 .vk-img-card h3 {
    font-size: 18px;
    text-align: right;
  }

  .sec3 .vk-img-card p {
    font-size: 14px;
    text-align: right;
  }

  .kt-banner.kr img {
    width: 150%;
  }

  .kt-banner img {
    width: 120%;
  }

  .sec4 {
    padding: 40px 20px 0;
  }

  .sec4 .visual-img-container p {
    font-size: 12px;
  }
  .sec4 img {
    width: 100%;
  }

  .section-sub-title {
    font-size: 16px;
  }

  .sec6 h3 {
    font-size: 20px;
  }

  .sec6 ul li {
    font-size: 16px;
  }

  .sec6 .detail {
    padding: 40px;
  }

  .download-banner .vis-container {
    display: block;
  }

  .download-banner h1 {
    font-size: 26px;
    text-align: center;
    width: 100%;
  }

  .download-banner .content {
    display: flex;
    justify-content: center;
  }

  .download-banner .appDownloadBtns {
    margin-top: 30px;
  }

  .swiper-inner-contents {
    display: block;
  }

  .sec5 .swiper-content {
    top: 0;
  }

  .sec5 .swiper-content {
    text-align: center;
  }

  .sec5 .swiper-content h3 {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .sec5 .swiper-content .num {
    font-size: 30px;
    margin-bottom: 0;
  }

  .sec5 .swiper-content p {
    font-size: 18px;
  }

  .sec5 .swiper-content img {
    width: 80%;
  }

  .sec5 .swiper-content .imgCon {
    overflow: hidden;
  }

  .swiper1 .swiper-pagination {
    width: 100%;
  }

  .swiper-wrapper {
    padding-bottom: 50px;
  }

  .swiper1 .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }

  .swiper1 .swiper-pagination {
    bottom: 20px;
  }

  .sec4::before {
    background-size: cover;
  }

  /* visit korea card - coko */
  .visit-card--coko .sec1 .mainVisualCardImg {
    width: 60%;
  }

  .visit-card--coko .sec2 {
    padding: 60px 0;
  }

  .visit-card--coko .sec3 .cld-row {
    margin: auto;
  }

  .visit-card--coko__benefit {
    width: 100%;
    margin: auto;
    padding: 0 20px;
  }

  .visit-card--coko__benefit .benefit__item {
    width: 100%;
    margin: auto;
    padding: 20px;
  }

  .visit-card--coko__benefit .benefit__item:nth-child(2n) {
    margin: auto;
  }

  .visit-card--coko__benefit .benefit__item:not(:first-of-type) {
    margin-top: 20px;
  }

  .visit-card--coko__benefit .benefit__item__info {
    width: 222px;
  }

  .visit-card--coko__benefit .benefit__item__info h3 {
    color: #282828;
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -1px;
  }

  .visit-card--coko__benefit .benefit__item__info p {
    color: #282828;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .visit-card--coko__benefit .benefit__item__info + .imgCon {
    width: 100px;
  }

  /* basic card - heendy */
  .basic-card--heendy .vk-card {
    padding: 20px;
  }

  .basic-card--heendy .vk-card .imgCon {
    margin: 10px auto 0;
  }

  .basic-card--heendy .vk-card .imgCon.v1 {
    margin: 10px auto -20px;
  }

  .basic-card--heendy .vk-card .imgCon.v3 {
    width: 240px;
  }

  .basic-card--heendy .vk-card .imgCon.v3 img {
    width: 100%;
  }

  .basic-card--heendy .vk-card .imgCon.v4 {
    width: 166px;
  }

  .basic-card--heendy .vk-card .imgCon.v4 img {
    width: 100%;
  }

  .basic-card--heendy .sec3 .vk-img-card h3 {
    letter-spacing: -1px;
  }

  .basic-card--heendy__step {
    padding: 40px 0;
  }

  .basic-card--heendy__step .step__slider__title {
    font-size: 20px;
    margin-bottom: 15px;
    letter-spacing: -1px;
  }

  .basic-card--heendy__step .step__slider__wrapper {
    padding-bottom: 0;
  }

  .basic-card--heendy__step .step__cont .swiper-pagination {
    margin-top: 15px;
  }

  .basic-card--heendy__step .step__cont .swiper-pagination span {
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
  }

  .basic-card--heendy__step .step__cont .swiper-button-next {
    right: 5px !important;
  }

  .basic-card--heendy__step .step__cont .swiper-button-prev {
    left: 5px !important;
  }

  .basic-card--heendy__info {
    padding: 60px 20px;
  }

  .basic-card--heendy__info table:not(:first-of-type) {
    margin-top: 20px;
  }

  .basic-card--heendy__info table th {
    font-size: 14px;
  }

  .basic-card--heendy__info table td {
    font-size: 14px;
  }

  .basic-card--heendy__download {
    margin: 80px auto 0;
    width: 260px;
  }

  .basic-card--heendy__info .info__tip {
    margin-top: 20px;
    color: #282828;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
  }
}