@charset "UTF-8";

@media (max-width: 1024px) {
    #index_revenue .revenue_card_wrap {flex-direction: column; align-items: center; padding: 0 20px;}
    #index_revenue .revenue_card {width: 100%;}
    #index_revenue .revenue_card .info_circle {width: 200px; height: 200px;}
    #index_revenue .revenue_card .info_circle .percent {font-size: 48px;}

    #index_menu .menu_header h2 {font-size: 32px;}
    #index_menu .menu_header .sub_desc {font-size: 16px;}
    #index_menu .menu_card {flex-direction: column; height: auto; padding: 40px 20px;}
    #index_menu .menu_card .img_box {width: 100%; height: 300px; border-radius: 8px;}
    #index_menu .menu_card .circle_price {position: relative; left: 0; transform: none; margin: 30px auto; width: 180px; height: 180px;}
    #container #index_menu .menu_card .text_box {text-align: center; padding: 0; width: 100%; word-break: keep-all;}
    #index_menu .menu_card .circle_price strong {font-size: 32px;}

    #index_brand .title_area h2 {font-size: 40px;}
    #index_brand .point_box_wrap {flex-direction: column; align-items: center;}
    #index_brand .point_box {width: 100%; max-width: 400px;}
    #index_brand {height: auto; padding: 80px 0;}

    #index_inquiry {padding: 160px 0;}
    #index_inquiry .inquiry_btn {font-size: 24px; padding: 22px 50px;}

    #index_cost {padding: 140px 0;}
    #index_cost .cost_badge_wrap {gap: 40px;}

    #index_support {padding: 140px 0 160px;}
    #index_support .support_header {margin-bottom: 80px;}
    #index_support .support_grid {gap: 30px;}

    #index_sales {padding: 140px 0 180px;}
    #index_sales .receipt_wrap {gap: 30px;}
    #index_sales .receipt_card {width: 260px;}
    #index_sales .receipt_body .price strong {font-size: 24px;}

    #index_turnover {padding: 120px 0;}
    #index_turnover .turnover_item {grid-template-columns: 1fr 1fr;}
    #index_turnover .item_text {padding: 40px 30px;}

    #index_system {padding: 120px 0;}
    #index_system .system_item.text {padding: 40px 30px;}

    #index_return_rate .rate_chart { width: 90%; max-width: 420px; }
    #index_return_rate svg path { stroke-width: 32; }
    #index_return_rate .rate_value { font-size: 46px; bottom: 10px; }
    #index_return_rate .rate_value span { font-size: 52px; }
    #index_return_rate span.rate_text { font-size: 20px; }

    #index_return .return_header {padding: 120px 20px 80px;}
    #index_return .return_circle_wrap {gap: 20px;}
    #index_return .return_circle {width: 240px; height: 240px; font-size: 24px; border-radius: 18px;}

    #index_quality .quality_bubble {padding: 30px 40px; width: 80%;}
    #index_quality .quality_no {font-size: 60px;}
    #index_quality .quality_bg {padding: 160px 0 140px;}

    #index_aside .float_btn {width: 60px; height: 60px;}
    #index_aside .float_btn.call strong,
    #index_aside .float_btn.call span { display: none; }
    #index_aside .float_btn.call .icon { display: inline; }
}

@media (max-width: 768px) {
    .font_size_xl {font-size: 40px;}
    .font_size_l {font-size: 32px;}
    .font_size_m {font-size: 18px;}

    #hd_wrapper {flex-wrap: wrap;}
    #mobile_menu_btn {display: block;order: 2;}
    #logo {order: 1;}
    #hd .gnb_2dul {padding: 0}

    #gnb {width: 100%;max-height: 0;overflow: hidden;background: rgba(0, 0, 0, 0.95);order: 3;transition: max-height 0.45s ease-in-out, margin-top 0.45s ease-in-out;padding-right: 0;margin-top: 0;}
    #gnb.on {max-height: 100vh;margin-top: 15px;transition: max-height 0.45s ease-in-out, margin-top 0.45s ease-in-out}
    #hd .gnb_1dli {width: 100%;display: flex;flex-direction: column;align-items: flex-start;padding: 8px 0;box-sizing: border-box;position: relative;}
    #hd .gnb_1da {flex-grow: 1;color: #fff;}
    .submenu_toggle {background: none;border: none;display: inline-block;color: #fff;font-size: 1.2rem;cursor: pointer;padding-right: 15px;position: absolute;top: 20px;right: 0;}

    #hd .gnb_2dul {display: none !important;position: static;transform: none !important;width: 100%;}
    #hd .gnb_1dli.open > .gnb_2dul {display: block !important;}
    #hd .gnb_2dul .gnb_2dul_box {box-shadow: none;border: none;}
    #hd .gnb_2da {text-align: left;padding: 8px 15px;}

    .site-footer {margin-bottom: 65px;}

    #container {margin-top: 80px;}

    #upper_banner {height: 300px;}
    #upper_banner .banner_title>h1 {font-size: 2rem;}
    #upper_banner .banner_title>p {font-size: 1rem;}
    #upper_banner .banner_title>h1 {font-size: 1.5rem;}

    #index_aside {right: 16px; bottom: 20px;}
    #index_aside .float_btn_wrap {gap: 10px;}

    #index_inquiry {padding: 140px 0;}
    #index_inquiry .inquiry_logo img {height: 48px;}
    #index_inquiry .inquiry_btn {font-size: 20px; padding: 18px 36px;}

    #index_cost {padding: 120px 0;}
    #index_cost .cost_badge_wrap {flex-direction: column; gap: 30px; margin-bottom: 80px; align-items: center;}
    #index_cost .cost_badge {width: 200px; height: 200px;}
    #index_cost .cost_table {font-size: 14px;}
    #index_cost .cost_notice {text-align: left;}

    #index_support {padding: 120px 0 140px;}
    #index_support .support_header {margin-bottom: 60px;}
    #index_support .support_grid {grid-template-columns: 1fr; gap: 24px;}
    #index_support .support_card .card_body {padding: 24px 22px;}

    #index_sales {padding: 120px 0 160px;}
    #index_sales .sales_header {margin-bottom: 80px;}
    #index_sales .receipt_wrap {flex-direction: column; gap: 40px; align-items: center;}
    #index_sales .receipt_card {max-width: 400px; width: 100%;}
    #index_sales .sales_coin {height: auto;}
    
    #index_turnover {padding: 100px 0;}
    #index_turnover .turnover_header {margin-bottom: 60px;}
    #index_turnover .turnover_item {grid-template-columns: 1fr;}
    #index_turnover .item_text {padding: 30px 0;}

    #index_system {padding: 100px 0;}
    #index_system .system_header {margin-bottom: 60px;}
    #index_system .system_grid {grid-template-columns: 1fr; gap: 24px;}
    #index_system .system_item.text {padding: 30px 24px;}
    #index_system .system_item:nth-of-type(1) {order: 1;}
    #index_system .system_item:nth-of-type(2) {order: 2;}
    #index_system .system_item:nth-of-type(3) {order: 4;}
    #index_system .system_item:nth-of-type(4) {order: 3;}
    #index_system .system_item:nth-of-type(5) {order: 5;}
    #index_system .system_item:nth-of-type(6) {order: 6;}
    #container #index_system .system_item.text {text-align: center;}

    #index_return .return_footer_wrap {width: 100%;}
    #index_return_rate .rate_chart {width: 100%;max-width: 300px;}
    #index_return_rate svg path {stroke-width: 24;}
    #index_return_rate .rate_value {bottom: 6px;font-size: 36px;}
    #index_return_rate .rate_value span {font-size: 44px;}
    #index_return_rate span.rate_text {font-size: 18px;}

    #index_return .return_header {padding: 100px 20px 60px;}
    #index_return .return_body {padding-bottom: 0;}
    #index_return .return_circle_wrap {grid-template-columns: 1fr; gap: 30px; padding: 0 15px;}
    #index_return .return_circle {width: 100%; height: 120px; font-size: 22px; word-break: keep-all;}
    #index_return .return_circle>br {display: none;}
    #index_return .return_footer {padding: 60px 20px 100px;}

    #index_quality .quality_bubble {width: calc(100% - 40px); padding: 25px 20px;}
    #index_quality .quality_bubble p {font-size: 18px;}
    #index_quality .quality_no {font-size: 48px; margin-bottom: 30px;}
    #index_quality .quality_desc {font-size: 18px;}
    #index_quality .quality_reason {font-size: 16px; padding: 14px 24px;}

    #index_menu_tab .tab_btn_wrap {gap: 20px;}
    #index_menu_tab .btn_tab {font-size: 18px;}
    #index_menu_tab .swiper_container_outer {padding: 0 10px;}

    #index_table {padding: 80px 20px;}
    #index_table .sub_grid {flex-direction: column; gap: 50px;}
    #index_table .title_area h2 {font-size: 32px;}

    #index_feature {padding: 100px 20px;}
    #index_feature .middle_quote p {font-size: 18px;}
    #index_feature .bottom_info p {font-size: 16px;}

    #index_banner {height: 400px;}
    #index_banner .main_title {font-size: 36px;}
    #index_banner .sub_text {font-size: 16px;}
    #index_locate {height: auto; padding: 100px 15px;}
    #index_locate .top_sub_title {font-size: 20px;}
    #index_locate .bottom_desc p {font-size: 16px;}

    #index_form {bottom: auto; top: 100%; z-index: 1001;}
    #index_form.active {transform: translateY(-100%)}
    #index_form .form_input {flex-direction: column; width: 90%; gap: 10px;}
    #index_form input, #index_form select {width: 100%;}
    #index_form .form_title {font-size: 20px;}
    #index_form .m_close {display: flex;}
    #form_m_btn {display: block;}

    #index_brand .title_area h2 {font-size: 36px;}

    #index_philo {height: 1200px;}
    #index_philo .philosophy_content {padding-bottom: 0;}
    #index_philo .underline_text {font-size: 18px;}

    #index_gall #gall_circle,
    #index_gall #gall_circle2 {display: none;}

    #hd_pop .hd_pops {top:15px !important;left:15px !important; width: 80%;}
    #hd_pop .hd_pops_con {width:100% !important;min-height:200px !important; height: auto !important;}
    #hd_pop .hd_pops_con img {width:100% !important}
}

@media (max-width:525px) {
      #index_cost .cost_table {background: none;}
    #index_cost .cost_table thead {display: none;}
    #index_cost .cost_table,
    #index_cost .cost_table tbody,
    #index_cost .cost_table tr,
    #index_cost .cost_table td {display: block;width: 100%;}
    #index_cost .cost_table tr {border: 1px solid #de7878;margin-bottom: 20px;padding: 16px 25px; background: #fff; border-radius: 6px; text-align: left;}
    #index_cost .cost_table td {border: none;padding: 6px 0;font-size: 15px;}
    #index_cost .cost_table .td_label {display: inline;color: #555;}
    #index_cost .cost_table td.highlight2 {font-weight: 700;color: var(--mc);}
}

@media (max-width:425px) {
    .form_title {font-size: 20px;}
    #policy_modal .policy_content {padding: 30px 20px;}
    #policy_modal .policy_close {width: 40px; height: 40px;}

    #index_philo {height: 1400px;}

    #index_menu .menu_card {width: 100%;}

    #index_inquiry .inquiry_desc br,
    #index_support .support_card .card_body p br {display: none;}
}

@media (max-width:375px) {
    #index_banner .visual_content {padding: 0; text-align: center;}

    #index_turnover .turnover_header p br,
    #index_turnover .item_text p br,
    #index_support .support_header p br {display: none;}
}

@media (max-width:320px) {
    #index_philo {height: 1600px;}
}