#api_page .wide {max-width: 1200px;margin: 0 auto;padding: 0 20px;}
/* Banner Section */
#api_page .api_banner {height: auto;padding: 80px 0; display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(90deg, #ececff 0%, #ececff 25%, #f1e7f5 50%, #fddce3 75%, #fddce2 100%);text-align: center;}
#api_page .api_banner h1 {font-size: 46px;font-weight: bold;margin-bottom: 20px;background: linear-gradient(to right, #6a21e2, #d62d60);-webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: capitalize;}
#api_page .api_banner p {font-size: 16px;line-height: 1.5;color: #28282c;max-width: 922px;margin: 0 auto;}
/* Resource Section */
#api_page .resource {padding: 80px 0;background-color: #fff;}
#api_page .resource .content_box {display: flex;align-items: center;gap: 60px;}
#api_page .resource .content_box.margin-bottom-80 {margin-bottom: 80px;}
#api_page .resource .content_box .image_part,#api_page .resource .content_box .text_part {width: 50%;}
#api_page .resource .content_box.reverse {flex-direction: row-reverse;}
#api_page .resource .content_box .image_part img {width: 100%;height: auto;border-radius: 8px;}
#api_page .resource .content_box .text_part h2 {font-size: 34px;font-weight: bold;max-width: 462px;margin-bottom: 36px;}
#api_page .resource .content_box .text_part p {font-size: 16px;color: #65656c;margin-bottom: 15px;max-width: 558px;line-height: 1.5;}
/* Solutions Section */
#api_page .solutions {padding: 80px 0;}
#api_page .solutions .section_title {font-size: 48px;font-weight: bold;margin-bottom: 66px;}
#api_page .solutions .solutions_box {display: flex;justify-content: space-between;gap: 20px;}
#api_page .solutions .solutions_box .solutions_list {display: flex;flex-direction: column;gap: 30px;justify-content: space-between;}
#api_page .solutions .solutions_box .solutions_list .solution_item {display: flex;align-items: flex-start;gap: 20px;}
#api_page .solutions .solutions_box .solutions_list .solution_item .icon {width: 64px;height: 64px;}
#api_page .solutions .solutions_box .solutions_list .solution_item .info{flex: 1;}
#api_page .solutions .solutions_box .solutions_list .solution_item .info h3 {font-size: 24px;font-weight: bold;color: #000;margin-bottom: 10px;}
#api_page .solutions .solutions_box .solutions_list .solution_item .info p {font-size: 16px;color: #65656c;max-width: 604px;line-height: 1.5;}
/* Scene Section */
#api_page .scene {padding: 80px 0;background-color: #fff;}
#api_page .scene .section_title {font-size: 48px;font-weight: bold;margin-bottom: 66px;text-align: center;}
#api_page .scene .industries_box {display: grid;grid-template-columns: repeat(2, 1fr);gap: 40px;}
#api_page .scene .industries_box .industry_item .image img {width: 100%;height: auto;border-radius: 8px;}
#api_page .scene .industries_box .industry_item h3 {font-size: 24px;font-weight: bold;color: #333;margin: 46px 0 18px 0;}
#api_page .scene .industries_box .industry_item p {font-size: 16px;color: #555;line-height: 30px;margin: 0;max-width: 526px;line-height: 1.5;}
/* Process Section */
#api_page .process {padding: 80px 0;color: white;background: linear-gradient(90deg, #ececff 0%, #ececff 25%, #f1e7f5 50%, #fddce3 75%, #fddce2 100%);}
#api_page .process .section_title {font-size: 48px;font-weight: bold;margin-bottom: 100px;color: #402e29;text-align: center;}
#api_page .process .process_box {display: flex;justify-content: center;align-items: center;gap: 30px;margin-top: 60px;}
#api_page .process .process_box .process_item {width: auto;max-width: 304px;height: 340px;text-align: center;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);position: relative;color: white;margin: 0;}
#api_page .process .process_box .process_item:nth-child(1) {background-color: #3d0082;}
#api_page .process .process_box .process_item:nth-child(3) {background-color: #5700b8;}
#api_page .process .process_box .process_item:nth-child(5) {background-color: #7001eb;}
#api_page .process .process_box .process_item .step_container {position: absolute;top: -44px;left: 50%;transform: translateX(-50%);width: 88px;height: 88px;display: flex;align-items: center;justify-content: center;}
#api_page .process .process_box .process_item .step_container .step {width: 88px;height: 88px;background-color: white;color: #7001eb;font-size: 36px;font-weight: bold;border-radius: 50%;display: flex;align-items: center;justify-content: center;border: 1px solid #660ec9;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);}
#api_page .process .process_box .process_item h3 {font-size: 24px;font-weight: bold;color: white;margin-bottom: 15px;margin: 60px 40px 15px;line-height: 1.5;}
#api_page .process .process_box .process_item p {font-size: 16px;color: white;opacity: 0.9;max-width: 244px;margin-left: 38px;margin-right: 46px;text-align: left;line-height: 1.8;}
#api_page .process .process_box .arrow {width: 60px;height: 12px;position: relative;margin: 0 5px;background-color: #9239ec;border-radius: 6px;}
#api_page .process .process_box .arrow::after {content: ""; position: absolute; right: 10px; top: -22px; width: 10px; height: 34px; background-color: #9239ec; transform: rotate(-45deg); border-radius: 6px;}
#api_page .process .process_box .arrow::before {content: ""; position: absolute; right: 10px; top: 0px; width: 10px; height: 34px; background-color: #9239ec; transform: rotate(45deg); border-radius: 6px;}
/* Contact Section */
#api_page .contact {background: url("../images/api/contact_bg.png") no-repeat center;padding: 120px 0 150px;}
#api_page .contact .contact_form_box {background: white;padding: 60px;border-radius: 12px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);max-width: 800px;margin: 0 auto;text-align: center;}
#api_page .contact .contact_form_box h2 {font-size: 32px;font-weight: bold;margin-bottom: 10px;color: #333;}
#api_page .contact .contact_form_box p {font-size: 16px;color: #666;margin-bottom: 40px;line-height: 1.5;}
#api_page .contact .contact_form_box form {display: flex;flex-direction: column;gap: 20px;align-items: center;width: 100%;text-align: left;}
#api_page .contact .contact_form_box form .form_row {display: flex;flex-direction: column;gap: 20px;margin-bottom: 20px;width: 100%;align-items: center;}
#api_page .contact .contact_form_box form .form_row.company_row {flex-direction: column;}
#api_page .contact .contact_form_box form .form_row.contact_row {flex-direction: row;gap: 20px;align-items: stretch;}
#api_page .contact .contact_form_box form .form_row.submit_row {display: flex;justify-content: center;margin-top: 24px;margin-bottom: 56px;}
#api_page .contact .contact_form_box form .form_row input,
#api_page .contact .contact_form_box form .form_row textarea {width: 100%;padding: 15px;border: 1px solid #e0e0e0;border-radius: 8px;font-size: 16px;color: #333;background-color: #edf2fa;box-sizing: border-box;}
#api_page .contact .contact_form_box form .form_row.contact_row .phone_input {display: flex;width: calc(50% - 10px);align-items: stretch;}
#api_page .contact .contact_form_box form .form_row.contact_row .phone_input select {width: 140px;border-radius: 8px 0 0 8px;border-right: 0;border: 1px solid #e0e0e0;background-color: #edf2fa;padding: 15px;font-size: 14px;color: #333;box-sizing: border-box;}
#api_page .contact .contact_form_box form .form_row.contact_row .phone_input input {width: calc(100% - 120px);border-radius: 0 8px 8px 0;border-left: 0;}
#api_page .contact .contact_form_box form .form_row.contact_row input {width: calc(50% - 10px);box-sizing: border-box;}
#api_page .contact .contact_form_box form .form_row.message_row textarea {resize: none;overflow: hidden;}
#api_page .contact .contact_form_box form .form_row input:focus,
#api_page .contact .contact_form_box form .form_row textarea:focus {outline: none;border-color: #002FA5;background-color: white;}
#api_page .contact .contact_form_box form .form_row .submit_button {background-color: #ff910b;color: white;font-weight: bold;cursor: pointer;transition: background-color 0.3s ease;width: 220px;height: 50px;border: none;border-radius: 22px;font-size: 16px;margin: 0;}
#api_page .contact .contact_form_box form .form_row .submit_button:hover {background-color: #ff7f00;}
/* Responsive Design */
@media (max-width: 1024px) {
    #api_page .api_banner {padding: 50px 0;}
    /* Resource Section */
    #api_page .resource .content_box,#api_page .resource .content_box.reverse {flex-direction: column;}
    #api_page .resource .content_box .image_part,#api_page .resource .content_box .text_part {width: 100%;}
    /* Resource Section */
    #api_page .resource {padding: 60px 0;}
    #api_page .resource .content_box {gap: 20px;padding: 0 10px;}
    #api_page .resource .content_box.margin-bottom-80 {margin-bottom: 60px;}
    #api_page .resource .content_box .text_part h2 {font-size: 28px;margin-bottom: 20px;max-width: 100%;}
    #api_page .resource .content_box .text_part p {font-size: 14px;max-width: 100%;}
    /* Solutions Section */
    #api_page .solutions .solutions_box .solutions_image{text-align: center;}
    #api_page .solutions .solutions_box .solutions_list .solution_item .icon {width: 50px;height: 50px;}
    /* Scene Section */
    #api_page .scene {padding: 60px 0;}
    #api_page .scene .section_title {margin-bottom: 48px;}
    #api_page .scene .industries_box {grid-template-columns: repeat(2, 1fr);gap: 30px;}
    /* Process Section */
    #api_page .process .process_box {flex-direction: column;gap: 40px;}
    #api_page .process .process_box .process_item {margin: 0;padding: 60px 30px 40px;height: auto;margin-bottom: 30px;}
    #api_page .process .process_box .arrow {width: 12px;height: 60px;margin: 0;background-color: #92add9;border-radius: 6px;display: none;}
    #api_page .process .process_box .arrow::after,#api_page .process .process_box .arrow::before {display: none;}
}
@media (max-width: 768px) {
    /* Banner Section */
    #api_page .api_banner {padding: 30px 0;}
    #api_page .api_banner h1 {font-size: 24px;margin-bottom: 16px;}
    #api_page .api_banner p {font-size: 14px;line-height: 20px;}
    /* Resource Section */
    #api_page .resource .content_box .text_part h2 {font-size: 18px;}
    /* Solutions Section */
    #api_page .solutions {padding: 50px 0;}
    #api_page .solutions .section_title {font-size: 28px;margin-bottom: 40px;}
    #api_page .solutions .solutions_box {flex-direction: column;}
    #api_page .solutions .solutions_box .solutions_list {gap: 24px;margin-bottom: 10px;}
    #api_page .solutions .solutions_box .solutions_list .solution_item {gap: 16px;}
    #api_page .solutions .solutions_box .solutions_list .solution_item .icon {width: 40px;height: 40px;}
    #api_page .solutions .solutions_box .solutions_list .solution_item .info h3 {font-size: 16px;margin-bottom: 6px;}
    #api_page .solutions .solutions_box .solutions_list .solution_item .info p {font-size: 14px;max-width: 100%;}
    /* Scene Section */
    #api_page .scene {padding: 50px 0;}
    #api_page .scene .section_title {margin-bottom: 40px;font-size: 28px;}
    #api_page .scene .industries_box {grid-template-columns: 1fr;gap: 40px;}
    #api_page .scene .industries_box .industry_item h3 {font-size: 20px;margin: 24px 0 12px 0;}
    #api_page .scene .industries_box .industry_item p {font-size: 14px;line-height: 22px;max-width: 100%;}
    /* Process Section */
    #api_page .process {padding: 60px 0;}
    #api_page .process .section_title {margin-bottom: 48px;text-align: center;font-size: 28px;}
    #api_page .process .process_box {gap: 30px;margin-top: 40px;}
    #api_page .process .process_box .process_item .step_container .step{width: 60px;height: 60px;font-size: 30px;}
    #api_page .process .process_box .process_item {padding: 0px 20px 30px;max-width: 280px;margin-bottom: 40px;}
    #api_page .process .process_box .process_item h3 {font-size: 16px;margin: 40px 20px 10px 20px;}
    #api_page .process .process_box .process_item p {font-size: 11px;margin-left: 20px;margin-right: 20px;max-width: 240px;}
    #api_page .process .process_box .arrow {width: 10px;height: 40px;display: none;}
    /* Contact Section */
    #api_page .contact {padding: 80px 0 180px 0;}
    #api_page .contact .contact_form_box {padding: 40px 20px;margin: 0 10px;}
    #api_page .contact .contact_form_box h2 {font-size: 24px;margin-bottom: 8px;}
    #api_page .contact .contact_form_box p {font-size: 14px;margin-bottom: 32px;}
    #api_page .contact .contact_form_box form .form_row {flex-direction: column;margin-bottom: 0px;}
    #api_page .contact .contact_form_box form .form_row.company_row {flex-direction: column;}
    #api_page .contact .contact_form_box form .form_row.contact_row {flex-direction: column;gap: 16px;}
    #api_page .contact .contact_form_box form .form_row.submit_row {margin-top: 16px;margin-bottom: 40px;}
    #api_page .contact .contact_form_box form .form_row input,
    #api_page .contact .contact_form_box form .form_row textarea {padding: 12px;font-size: 14px;}
    #api_page .contact .contact_form_box form .form_row.contact_row .phone_input {width: 100%;}
    #api_page .contact .contact_form_box form .form_row.contact_row .phone_input select {width: 120px;padding: 12px;}
    #api_page .contact .contact_form_box form .form_row.contact_row .phone_input input {width: calc(100% - 100px);}
    #api_page .contact .contact_form_box form .form_row.contact_row input {width: 100%;}
    #api_page .contact .contact_form_box form .form_row .submit_button {width: 200px;height: 44px;font-size: 15px;}
}