#price_index .price_info_box { padding: 60px 0 100px; background-color: #f6f9fe; } #price_index .price_info_box .price_info_title { text-align: center; margin-bottom: 50px; } #price_index .price_info_box .price_info_title .title { font-size: 60px; font-weight: bold; color: #000000; line-height: 1.4; margin-bottom: 30px; } #price_index .price_info_box .price_info_title .small_title { font-size: 24px; font-weight: bold; color: #1e51e4; margin-bottom: 15px; } #price_index .price_info_box .price_info_title .sub_title { font-size: 24px; color: #1c2746; } #price_index .price_info_change { display: flex; justify-content: center; margin-bottom: 50px; } #price_index .price_info_change .change_out { padding: 7px; background: #fff; display: inline-block; border-radius: 999px; border: 1px solid #1e61f0; } #price_index .price_info_change .change_btn { display: inline-block; height: 55px; line-height: 55px; padding: 0 35px; background: transparent; color: #2465f0; font-weight: bold; border-radius: 999px; cursor: pointer; min-width: 144px; font-size: 16px; text-align: center; position: relative; } #price_index .price_info_change .change_btn.cur { background: #2563eb; color: #fff; } #price_index .price_info_plan { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; } #price_index .price_info_plan .price_item { flex: 1; max-width: 580px; background: #ffffff; border-radius: 16px; padding: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; display: flex ; flex-direction: column; } #price_index .price_info_plan .price_item:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } #price_index .price_info_plan .price_item .price_item_discount { background-color: #000000; color: #ffffff; text-align: center; padding: 15px 20px; font-size: 16px; margin: 0; } #price_index .price_info_plan .price_item .price_item_content{ flex: 1; display: flex;flex-direction: column; justify-content: space-between; position: relative; padding: 20px 30px 55px 30px; } #price_index .price_info_plan .price_item .price_item_plan .plan_name { font-size: 26px; font-weight: bold; color: #1e60ed; margin-bottom: 13px; } #price_index .price_info_plan .price_item .price_item_plan .plan_desc { font-size: 16px; color: #3b4659; margin-bottom: 20px; } #price_index .price_info_plan .price_item .price_item_plan .plan_starting { font-size: 14px; color: #868ea5; margin-bottom: 8px; } #price_index .price_info_plan .price_item .price_item_plan .plan_price { display: flex;align-items: baseline; font-size: 50px; color: #000000; } #price_index .price_info_plan .price_item .price_item_plan .plan_price .currency { font-weight: bold; margin-right: 4px; line-height: 1; } #price_index .price_info_plan .price_item .price_item_plan .plan_price .amount { font-weight: bold; line-height: 1; } #price_index .price_info_plan .price_item .price_item_plan .plan_price .amount .month{display: flex;align-items: center;gap: 5px;} #price_index .price_info_plan .price_item .price_item_plan .plan_price .amount .original{ display: flex;flex-direction: column;gap: 5px; } #price_index .price_info_plan .price_item .price_item_plan .plan_price .amount .original .line_through{font-weight: bold;text-decoration: line-through;color: #a7a7a7;font-size: 20px;} #price_index .price_info_plan .price_item .price_item_plan .plan_price .amount .original .first_report{padding: 3px 6px;border-radius: 3px; background: #01ad74; text-decoration: none; font-size: 12px; color: #fff;} #price_index .price_info_plan .price_item .price_item_plan .plan_price .period { margin-left: 8px; display: none; flex-direction: column;gap: 6px; font-size: 14px; } #price_index .price_info_plan .price_item .price_item_plan .plan_price .period span{line-height: 1;} #price_index .price_info_plan .price_item .price_item_plan .plan_price.discount .currency, #price_index .price_info_plan .price_item .price_item_plan .plan_price.discount .amount{color: #ec2323;} #price_index .price_info_plan .price_item .price_item_plan .price_note { font-size: 14px; color: #868ea5; } #price_index .price_info_plan .price_item .price_item_plan .plan_features { padding: 25px 0 30px;margin-top: 20px; border-top: 1px solid #e5e7eb; } #price_index .price_info_plan .price_item .price_item_plan .features_title { font-size: 16px; color: #000000; margin-bottom: 20px; } #price_index .price_info_plan .price_item .price_item_plan .features_list { list-style: none; padding: 0; margin: 0; } #price_index .price_info_plan .price_item .price_item_plan .features_list li { display: flex; margin-bottom: 10px; font-size: 14px; line-height: 1.5; color: #3b4659;gap : 9px; } #price_index .price_info_plan .price_item .price_item_plan .check_icon { background: url(/frontend/web/images/pricing/dui_icon.png) no-repeat center / contain; width: 14px; height: 9px; display: inline-block; margin-top: 7px; } #price_index .price_info_plan .price_item .price_item_plan .features_list li span { flex: 1; } #price_index .price_info_plan .price_item .price_item_plan .features_list li span em{color: #0050ff; font-weight: bold;} #price_index .price_info_plan .price_item .upgrade_btn { height: 50px; line-height: 50px; padding: 0 10px; background: #2563eb; color: #ffffff; border-radius: 999px; font-size: 16px; cursor: pointer; text-align: center; } #price_index .price_info_plan .price_item .upgrade_btn:hover { background: #2159d3; } #price_index .price_info_plan .price_item .price_hot { position: absolute; top: -22px; right: 20px; width: 58px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; padding: 0 6px; } #price_index .price_info_mobile_plan { display: none; } #price_index .price_info_box.show_year .year{display: block !important;} #price_index .price_info_box.show_year .month{display: none !important;} #price_index .price_info_box.show_year .week{display: none !important;} #price_index .price_info_box.show_month .year{display: none !important;} /* #price_index .price_info_box.show_month .month{display: block !important;} */ #price_index .price_info_box.show_month .week{display: none !important;} @media (max-width: 1024px) { #price_index .price_info_plan { gap: 2vw; } #price_index .price_info_plan .price_item .price_item_discount { padding: 2vw 2.66vw; } #price_index .price_info_plan .price_item .price_item_content{ padding: 2.66vw; } } @media (max-width: 768px) { #price_index .price_info_box { padding: 10vw 0; } #price_index .price_info_box .price_info_title { margin-bottom: 6vw; } #price_index .price_info_box .price_info_title .title { font-size: 30px; margin-bottom: 4vw; } #price_index .price_info_box .price_info_title .small_title { font-size: 18px; margin-bottom: 2vw; } #price_index .price_info_box .price_info_title .sub_title { font-size: 18px; } #price_index .price_info_change { margin: 0 2.6667vw 6vw } #price_index .price_info_change .change_out {display: flex ; justify-content: space-between; padding: 1vw; width: 100%; } #price_index .price_info_change .change_btn { height: 7.33vw; line-height: 7.33vw; padding: 0 1.66vw; min-width: 50%; font-size: 3vw; box-sizing: border-box;} #price_index .price_info_plan { display: none; } #price_index .price_info_mobile_plan { display: block; } #price_index .price_info_mobile_plan .plan_item { background: #ffffff; border-radius: 8px; margin-bottom: 4vw; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } #price_index .price_info_mobile_plan .plan_item .plan_header { padding: 4vw; border-bottom: 1px solid #e5e7eb; } #price_index .price_info_mobile_plan .plan_item .plan_name { font-size: 6vw; font-weight: bold; color: #000000; margin-bottom: 4vw; } #price_index .price_info_mobile_plan .plan_item .plan_price_section { display: flex; justify-content: space-between; align-items: center; gap: 4vw; } #price_index .price_info_mobile_plan .plan_item .plan_price { display: flex; align-items: baseline; flex: 1; margin-bottom: 1vw; font-size: 8.88vw; color: #000000; line-height: 1; } #price_index .price_info_mobile_plan .plan_item .plan_price .currency { margin-right: 0.5vw; font-weight: bold; } #price_index .price_info_mobile_plan .plan_item .plan_price .amount { font-weight: bold; } #price_index .price_info_mobile_plan .plan_item .plan_price .amount .original{ font-size: 4.8vw; text-decoration: line-through; color: #a7a7a7; } #price_index .price_info_mobile_plan .plan_item .plan_price .period { margin-left: 1vw; display: flex; flex-direction: column; gap: 0.6vw; font-size: 3vw; } #price_index .price_info_mobile_plan .plan_item .plan_price.discount .currency, #price_index .price_info_mobile_plan .plan_item .plan_price.discount .amount{color: #ec2323;} #price_index .price_info_mobile_plan .plan_item .upgrade_btn { padding: 3vw 6vw; background: #2563eb; color: #ffffff; border-radius: 8px; font-size: 3.5vw; font-weight: bold; text-align: center; cursor: pointer; } #price_index .price_info_mobile_plan .plan_item .learn_more_btn { display: flex; justify-content: center; align-items: center; padding: 3vw; cursor: pointer; color: #2563eb; font-size: 3.5vw; gap: 2vw; } #price_index .price_info_mobile_plan .plan_item .learn_more_arrow { font-size: 3vw; } #price_index .price_info_mobile_plan .plan_item .features_section { display: none; } #price_index .price_info_mobile_plan .plan_item .features_list { padding: 4vw; } #price_index .price_info_mobile_plan .plan_item .features_list li { display: flex; align-items: flex-start; margin-bottom: 3vw; font-size: 3.5vw; line-height: 1.4; color: #3b4659; gap: 2vw; } #price_index .price_info_mobile_plan .plan_item .features_list li:last-child { margin-bottom: 0; } #price_index .price_info_mobile_plan .plan_item .check_icon { background: url(/frontend/web/images/pricing/dui_icon.png) no-repeat center / contain; width: 3.5vw; height: 2.5vw; display: inline-block; margin-top: 1vw; flex-shrink: 0; } #price_index .price_info_mobile_plan .plan_item .features_list li span{flex: 1;} #price_index .price_info_mobile_plan .plan_item .features_list li span em{color: #0050ff; font-weight: bold;} #price_index .price_info_mobile_plan .plan_item.cur .learn_more_arrow { transform: rotate(180deg); } #price_index .price_info_mobile_plan .plan_item.cur .features_section { display: block; } } /* Get What Section */ #price_index .get_what_box { background-color: #ffffff; padding: 80px 0 50px; display: none;} #price_index .get_what_box .section_title { font-size: 36px; font-weight: bold; color: #1a202c; text-align: center; margin-bottom: 55px; } #price_index .get_what_box .features_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } #price_index .get_what_box .features_grid .feature_card { background-color: #e2f2ff; border-radius: 12px; padding: 20px; } #price_index .get_what_box .features_grid .feature_card .feature_icon { margin-bottom: 20px; display: flex; justify-content: center;align-items: center; width: 45px;height: 45px;background: #fff;border-radius: 999px; } #price_index .get_what_box .features_grid .feature_card .feature_icon i { width: 48px; height: 48px; background-size: contain; background-repeat: no-repeat; background-position: center; display: block; } #price_index .get_what_box .features_grid .feature_card .feature_icon .icon_1 { background-image: url(/frontend/web/images/pricing/get_icon_1.png); width: 27px; height: 17px; } #price_index .get_what_box .features_grid .feature_card .feature_icon .icon_2 { background-image: url(/frontend/web/images/pricing/get_icon_2.png); width: 24px; height: 21px; } #price_index .get_what_box .features_grid .feature_card .feature_icon .icon_3 { background-image: url(/frontend/web/images/pricing/get_icon_3.png); width: 25px; height: 25px; } #price_index .get_what_box .features_grid .feature_card .feature_icon .icon_4 { background-image: url(/frontend/web/images/pricing/get_icon_4.png); width: 25px; height: 21px; } #price_index .get_what_box .features_grid .feature_card .feature_icon .icon_5 { background-image: url(/frontend/web/images/pricing/get_icon_5.png); width: 24px; height: 21px; } #price_index .get_what_box .features_grid .feature_card .feature_content { display: flex;flex-direction: column;gap: 8px;line-height: 1.5;justify-content: space-between; } #price_index .get_what_box .features_grid .feature_card .feature_title { font-size: 18px; font-weight: bold; color: #232d3a; } #price_index .get_what_box .features_grid .feature_card .feature_desc { font-size: 14px; color: #3b4659; } @media (max-width: 1024px) { #price_index .get_what_box .features_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { #price_index .get_what_box{padding: 10vw 0;} #price_index .get_what_box .section_title { font-size: 28px; margin-bottom: 6vw; } #price_index .get_what_box .features_grid { grid-template-columns: repeat(1, 1fr);gap: 3vw; } } /* Frequently Questions Section */ #price_index .frequently_questions_box { background-color: #ffffff; padding: 50px 0 80px; } #price_index .frequently_questions_box .section_title { font-size: 36px; font-weight: bold; color: #1a202c; text-align: center; margin-bottom: 60px; } #price_index .frequently_questions_box .faq_item { background-color: #f6f9fe; border-radius: 8px; margin-bottom: 20px; overflow: hidden; } #price_index .frequently_questions_box .faq_item .faq_question { padding: 36px 30px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 20px; } #price_index .frequently_questions_box .faq_item .faq_question .question_text { font-size: 18px; font-weight: bold; color: #000000; flex: 1; } #price_index .frequently_questions_box .faq_item .faq_question .arrow_icon { width: 18px; height: 10px; background-image: url('../images/pricing/down_icon.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } #price_index .frequently_questions_box .faq_item .faq_answer { display: none; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_content { padding: 0 30px 36px; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_item { font-size: 14px; color: #3b4659; line-height: 1.6; margin-bottom: 15px; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_item:last-child{margin-bottom: 0;} #price_index .frequently_questions_box .faq_item .faq_answer .answer_item b{ font-weight: bold; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_item_list li { margin-bottom: 10px; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_item_list li:last-child { margin-bottom: 0; } #price_index .frequently_questions_box .faq_item.cur { background-color: #eff8ff; } #price_index .frequently_questions_box .faq_item.cur .faq_question { padding-bottom: 20px; } #price_index .frequently_questions_box .faq_item.cur .faq_answer { display: block; } #price_index .frequently_questions_box .faq_item.cur .faq_question .arrow_icon { transform: rotate(180deg); } #price_index .agreement-link {color: #007bff;text-decoration: underline;} @media (max-width: 768px) { #price_index .frequently_questions_box{padding: 10vw 0;} #price_index .frequently_questions_box .section_title { font-size: 28px; margin-bottom: 6vw; } #price_index .frequently_questions_box .faq_item { margin-bottom: 2.66vw; } #price_index .frequently_questions_box .faq_item .faq_question { padding: 4vw; gap: 2.66vw; } #price_index .frequently_questions_box .faq_item .faq_question .question_text { font-size: 16px; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_content { padding: 0 4vw 4vw; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_item { margin-bottom: 2vw; } #price_index .frequently_questions_box .faq_item .faq_answer .answer_item_list li { margin-bottom: 1.66vw; } #price_index .frequently_questions_box .faq_item.cur .faq_question { padding-bottom: 2.66vw; } }