#pricing_index #main{position: relative;}
#pricing_index #main .l_shape{display: block;position:absolute;top:-85px;left:0;width: 726px;height: 506px;background: url('../images/pricing/l_shape.png') center no-repeat;background-size: cover;}
#pricing_index #main .r_shape{display: block;position:absolute;top:-85px;right:0;width: 985px;height: 411px;background: url('../images/pricing/r_shape.png') center no-repeat;background-size: cover;}
#pricing_index #main .box_plan{padding:118px 0 90px;margin:0 auto;position: relative;}
#pricing_index #main .box_plan .word{font-size: 48px;line-height: 48px;font-weight: bold;color:#000000;text-align: center;padding:0 20px;}
#pricing_index #main .box_plan .tabs_box{width:46%;padding-top:80px;margin:0 auto;display: grid;grid-template-columns: auto;display: none;}
#pricing_index #main .box_plan .tabs_box.multi_lang{grid-template-columns: 82% 18%;}
#pricing_index #main .box_plan .tabs_box.multi_lang .currency{display: flex;}
#pricing_index #main .box_plan .tabs_box .tabs{display: flex;align-items: center;justify-content: center;background-color: #fff;padding:4px;border-radius: 40px;border:2px solid var(--primaryColor);}
#pricing_index #main .box_plan .tabs_box.multi_lang .tabs{padding:4px 20px 4px 4px;border-radius: 40px 0 0 40px;}
#pricing_index #main .box_plan .tabs .item{display: flex;align-items: center;justify-content: center;flex: 1;padding:18px 20px;color: #222222;font-size: 16px;line-height:16px;text-align: center;cursor: pointer;position: relative;}
#pricing_index #main .box_plan .tabs .item.current{background-color: var(--primaryColor);color: #fff;font-weight: bold;border-radius: 30px;}
#pricing_index #main .box_plan .tabs .item .save_label{display: none;justify-content: center;align-items: center;background-color: #fd461a;padding:8px;border-radius: 4px;color: #fff;font-size: 14px;font-weight:normal;position: absolute;z-index: 1;top: 62px;left: auto;}
#pricing_index #main .box_plan .tabs .item .save_label::before {content: "";position: absolute;top: -7px;left:auto;transform: rotate(0deg);border-style: solid;border-width: 0 7px 7px 7px;border-color: transparent transparent #fd461a transparent;}

#pricing_index #main .box_plan .pricing_cards { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; justify-content: center; max-width: 1200px; margin-left: auto; margin-right: auto; }
#pricing_index #main .box_plan .pricing_card { background: #ffffff; border: 1px solid #B9B9B9; border-radius: 30px; padding: 40px 50px 50px 50px; display: flex; flex-direction: column; gap: 30px; min-width: 578px; min-height: 870px; align-items: stretch; }
#pricing_index #main .box_plan .card_header { height: 49px; display: flex; align-items: center; }
#pricing_index #main .box_plan .card_header .plan_title { font-family: 'Open Sans', sans-serif; font-size: 36px; font-weight: bold; color: #000000; margin: 0; text-align: left; }
#pricing_index #main .box_plan .card_price { height: 162px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; }
#pricing_index #main .box_plan .price_container { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
#pricing_index #main .box_plan .currency_symbol { font-family: 'Open Sans', sans-serif; font-size: 48px; font-weight: bold; color: #000000; line-height: 2; }
#pricing_index #main .box_plan .price_amount { font-family: 'Open Sans', sans-serif; font-size: 96px; font-weight: bold; color: #000000; line-height: 1; }
#pricing_index #main .box_plan .price_period { font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: bold; color: #000000; line-height: 1; }
#pricing_index #main .box_plan .saved_label { display: inline-block; background: #FFF1F1; border-radius: 10px; padding: 8px 30px; margin-top: -10px; width: fit-content; }
#pricing_index #main .box_plan .saved_label span { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: bold; color: #FF2929; line-height: 1; }
#pricing_index #main .box_plan .saved_placeholder { height: 41px; margin-top: -10px; }
#pricing_index #main .box_plan .card_features { padding-top:50px; display: flex; flex-direction: column; gap: 50px; flex-grow: 1; position: relative; }
#pricing_index #main .box_plan .card_features::before { content: ''; position: absolute; top: 0; left: 0; width: 470px; height: 1px; background: #D8D8D8; z-index: 0; }
#pricing_index #main .box_plan .feature_item { display: flex; align-items: center; gap: 20px; }
#pricing_index #main .box_plan .feature_item .check_icon { flex-shrink: 0; width: 21px; height: 15px; }
#pricing_index #main .box_plan .feature_item span { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; color: #222222; line-height: 1; }
#pricing_index #main .box_plan .card_button { margin-top: auto; }
#pricing_index #main .box_plan .generate_btn { display: block; width: 100%; background: #FF6B35; border-radius: 10px; padding: 15px 30px; text-align: center; text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: bold; color: #FFFFFF; line-height: 1; transition: background-color 0.3s ease; }
#pricing_index #main .box_plan .generate_btn:hover { background: #e55a2b; }

#pricing_index #main .functions{background-color: var(--primaryColor);}
#pricing_index #main .box_function{padding:100px 0 90px;margin:0 auto;}
#pricing_index #main .box_function .word{font-size: 40px;line-height: 40px;font-weight: bold;color:#fff;text-align: center;padding:0 20px;}
#pricing_index #main .box_function .items_box{margin:50px 0 auto;display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;}
#pricing_index #main .box_function .item{border:1px solid var(--primaryColor);background-color: #fff;border-radius: 6px;display: flex;align-items: stretch;}
#pricing_index #main .box_function .item .inside{width:100%;display: flex;justify-content: center;align-items: center;border-radius: 5px;padding:30px 10px;border-left: 0px solid #ed5d5d;border-right: 0px solid #ed5d5d;text-align: center;}
#pricing_index #main .box_function .item .title{font-size:16px;line-height:16px;font-weight: bold;color:#222222;}
#pricing_index #main .faq{background-color: var(--primaryColor);}
#pricing_index #main .box_faq{padding:100px 0 70px;margin:0 auto;}
#pricing_index #main .box_faq .word{font-size: 40px;line-height: 40px;font-weight: bold;color:#000000;text-align: center;padding:0 20px;}
#pricing_index #main .box_faq .items_box{margin-top:60px;}
#pricing_index #main .box_faq .item{background-color: #fff;padding:18px;border-radius: 6px;margin-top:10px;position: relative;}
#pricing_index #main .box_faq .item:first-child{margin-top:0;}
#pricing_index #main .box_faq .item .title{color: #222222;font-weight: bold;cursor: pointer;padding-right: 40px;font-size: 20px;line-height: 20px;}
#pricing_index #main .box_faq .item .title::before {content: "";position: absolute;top: 26px;right: 18px;transform: rotate(180deg);border-style: solid;border-width: 0 7px 7px 7px;border-color: transparent transparent #3b3b3b transparent;}
#pricing_index #main .box_faq .item .title::after {content: "";position: absolute;top: 26px;right: 20px;transform: rotate(180deg);border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #fff transparent;}
#pricing_index #main .box_faq .item.current .title::before {content: "";position: absolute;top: 24px;right: 18px;transform: rotate(0deg);border-style: solid;border-width: 0 7px 7px 7px;border-color: transparent transparent #3b3b3b transparent;}
#pricing_index #main .box_faq .item.current .title::after {content: "";position: absolute;top: 26px;right: 20px;transform: rotate(0deg);border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #fff transparent;}
#pricing_index #main .box_faq .item .content{display:none;color: #404040;margin-top:13px;font-size:14px;line-height:28px;padding:10px 0 0;border-top:none;}
#pricing_index #main .box_faq .item.current .content{border-top:1px solid #d5d5d5;}
#pricing_index #main .box_faq .item:first-child .content{display: block;}
/*currency*/
#pricing_index #main .box_plan .currency{display:none;padding: 5px 30px 5px 10px;border:2px solid var(--primaryColor);border-left:unset;border-radius: 0 40px 40px 0;width: 100%;align-items: center;justify-content:center;cursor: pointer;position: relative;}
#pricing_index #main .box_plan .currency .curr_currency{cursor: pointer;color: #222;font-size:16px;font-weight:bold;position: relative;}
#pricing_index #main .box_plan .currency .curr_currency::before {content: "";position: absolute;top: 10px;right: -20px;transform: rotate(180deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #333 transparent;}
#pricing_index #main .box_plan .currency .curr_currency::after {content: "";position: absolute;top: 10px;right: -19px;transform: rotate(180deg);border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #fff transparent;}
#pricing_index #main .box_plan .currency .currency_items{display:none;position: absolute;z-index: 2;left: 0;top:100%;padding-top:10px;}
#pricing_index #main .box_plan .currency .currency_items ul{box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);background-color:#fff;border:1px solid var(--primaryColor);border-radius: 6px;padding:10px;}
#pricing_index #main .box_plan .currency .currency_items li{padding: 8px 20px;}
#pricing_index #main .box_plan .currency .currency_items li:hover{background-color: #f2f5f6;border-radius: 4px;}
#pricing_index #main .box_plan .currency .currency_items li a{text-decoration: none;display: flex;align-items: center;}
#pricing_index #main .box_plan .currency .currency_items li.selected a{color: var(--primaryColor);}
#pricing_index #main .box_plan .currency:hover .curr_currency{color: var(--primaryColor);}
#pricing_index #main .box_plan .currency .btn_box{display: none;}
#pricing_index #main .box_plan .currency .choose_title{display: none;}

@media (max-width: 1024px){ 
   #pricing_index #main .box_plan .pricing_cards { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; padding: 0 15px; }
}
@media (max-width: 768px) {
    #pricing_index #main .l_shape{display: block;position:absolute;top:-60px;left:0;width: 220px;height: 190px;background: url('../images/pricing/l_shape_m.png') center no-repeat;background-size: cover;}
    #pricing_index #main .r_shape{display: block;position:absolute;top:0;right:0;width: 150px;height: 90px;background: url('../images/pricing/r_shape_m.png') center no-repeat;background-size: cover;}
    #pricing_index #main .box_plan{padding:75px 0 50px;}
    #pricing_index #main .box_plan .word{font-size: 30px;line-height: 30px;}
    
    #pricing_index #main .box_plan .pricing_card { min-width: auto; min-height: auto; padding: 30px 25px; gap: 20px; }
    #pricing_index #main .box_plan .card_header .plan_title { font-size: 28px; text-align: center; }
    #pricing_index #main .box_plan .currency_symbol { font-size: 36px; }
    #pricing_index #main .box_plan .price_amount { font-size: 72px; }
    #pricing_index #main .box_plan .price_period { font-size: 20px; }
    #pricing_index #main .box_plan .saved_label { margin-left: 0; margin-top: 10px; }
    #pricing_index #main .box_plan .saved_label span { font-size: 16px; }
    #pricing_index #main .box_plan .card_features { gap: 25px; }
    #pricing_index #main .box_plan .feature_item span { font-size: 16px; }
    #pricing_index #main .box_plan .generate_btn { font-size: 18px; padding: 12px 20px; }
    #pricing_index #main .box_plan .card_features::before { width: 100%; max-width: calc(100vw - 80px); }
    
    #pricing_index #main .box_plan .tabs_box{padding-top:40px;padding-right: 15px;width: 100%;}
    #pricing_index #main .box_plan .tabs .item{padding:11px 5px;font-size: 14px;line-height: 14px;}
    #pricing_index #main .box_function{padding:44px 0 53px;}
    #pricing_index #main .box_function .word{font-size: 28px;line-height: 28px;}
    #pricing_index #main .box_function .items_box{margin:40px 0 auto;}
    #pricing_index #main .box_function .items_box{grid-template-columns: repeat(1, 1fr);gap: 15px;}
    #pricing_index #main .box_function .item .inside{justify-content: left;padding: 15px 10px;border-left: 3px solid #ed5d5d;border-right: 3px solid #ed5d5d;}
    #pricing_index #main .box_function .item .title{font-size: 14px;line-height: 14px;}
    #pricing_index #main .box_faq{padding:50px 0;}
    #pricing_index #main .box_faq .word{font-size: 28px;line-height: 28px;}
    #pricing_index #main .box_faq .items_box{margin-top:30px;}
    #pricing_index #main .box_faq .item{padding:20px 15px;margin-top:12px;}
    #pricing_index #main .box_faq .item .title{font-size: 14px;line-height: 14px;padding-right: 30px;}
    #pricing_index #main .box_faq .item .content{font-size: 12px;line-height: 20px;}
    #pricing_index #main .box_faq .item.current .title::before{top:23px;border-width: 0 8px 8px 8px;}
    #pricing_index #main .box_faq .item.current .title::after{top:25px;border-width: 0 6px 6px 6px;}
    #pricing_index #main .box_faq .item .title::before{top:25px;border-width: 0 8px 8px 8px;}
    #pricing_index #main .box_faq .item .title::after{top:25px;border-width: 0 6px 6px 6px;}
    /*currency*/
    #pricing_index #main .mask{display:none;width: 100%;height: 100vh;position: fixed;background-color: #00000040;top: 0;left: 0;z-index: 13;}
    #pricing_index #main .box_plan .tabs_box.multi_lang{grid-template-columns: auto;}
    #pricing_index #main .box_plan .tabs_box.multi_lang .tabs{padding:4px;border-radius:40px;}
    #pricing_index #main .box_plan .tabs{order:2;}
    #pricing_index #main .box_plan .currency{display: none;order: 1;width: 18%;margin: 0 auto 23px;padding: 2px 0;border:unset;border-bottom:1px solid #bebebe;border-radius:0;align-items: center;justify-content:left;cursor: pointer;position: relative;}
    #pricing_index #main .box_plan .currency .curr_currency{width:100%;cursor: pointer;color: #222;font-size:14px;font-weight:bold;position: relative;}
    #pricing_index #main .box_plan .currency .curr_currency::before {content: "";position: absolute;top: 10px;right: 0;transform: rotate(180deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #333 transparent;}
    #pricing_index #main .box_plan .currency .curr_currency::after {content: "";position: absolute;top: 10px;right: 1px;transform: rotate(180deg);border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #fff transparent;}
    #pricing_index #main .box_plan .currency .currency_items{display:none;border-radius: 40px 40px 0 0;background-color: #fff;width: 100%;position: fixed;z-index: 13;left: 0;top:unset;bottom:0;padding-top:10px;}
    #pricing_index #main .box_plan .currency .currency_items ul{background-color:#fff;border:unset;border-radius: unset;box-shadow:unset;padding:10px;}
    #pricing_index #main .box_plan .currency .currency_items li{padding: 8px 20px;}
    #pricing_index #main .box_plan .currency .currency_items li:hover{background-color: #f2f5f6;border-radius: 4px;}
    #pricing_index #main .box_plan .currency .currency_items li a{text-decoration: none;display: flex;align-items: center;justify-content: center;}
    #pricing_index #main .box_plan .currency:hover .curr_currency{color: var(--primaryColor);}
    #pricing_index #main .box_plan .currency .btn_box{box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);padding:20px 10px;background-color: #fff;display: flex;justify-content: center;align-items: center;gap: 10px;}
    #pricing_index #main .box_plan .currency .btn_box a{display: block;padding:10px;min-width:110px;border-radius: 4px;color: #222;background-color:#f2f2f2;text-align: center;text-decoration: unset;}
    #pricing_index #main .box_plan .currency .btn_box a.ok{background-color: #ffde00;font-weight: bold;}
    #pricing_index #main .box_plan .currency .choose_title{display:flex;font-weight: bold;font-size: 18px;color: #222;padding: 10px;justify-content: center;}
}
@media (min-width: 1200px) and (max-width: 1480px){
    #pricing_index #main .l_shape{width: 600px;height: 420px;}
    #pricing_index #main .r_shape{width: 650px;height: 390px;}
}

@media (min-width: 769px) and (max-width: 1240px){
    #pricing_index #main .l_shape{width: 400px;height: 340px;}
    #pricing_index #main .r_shape{width: 400px;height: 390px;}
    #pricing_index #main .box_plan .tabs_box{width: 55%;}
    
   #pricing_index #main .box_plan .pricing_card { min-width: 450px; padding: 35px 40px; }
    #pricing_index #main .box_plan .card_features::before { width: 370px; }
}

/*多语言样式兼容*/
html[lang='en'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .stat .price{font-size: 22px;}
html[lang='en'] #pricing_index #main .box_plan[currency='THB'] .items_box .box .top .stat .price{font-size: 35px;}
html[lang='th'] #pricing_index #main .box_plan .items_box .box .top .stat .price{font-size: 35px;}
html[lang='th'] #pricing_index #main .box_plan .items_box .box .top .limit{font-size: 12px;}
html[lang='th'] #pricing_index #main .box_plan .tabs .item .save_label{font-size: 12px;}
html[lang='th'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .stat .price{font-size: 25px;}
html[lang='th'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .limit{font-size: 11px;}
html[lang='th'] #pricing_index #main .box_plan[currency='IDR'] .tabs .item .save_label{font-size: 11px;}
html[lang='th'] #pricing_index #main .box_plan[currency='THB'] .items_box .box .top .stat .price{font-size: 39px;}
html[lang='th'] #pricing_index #main .box_plan[currency='JPY'] .items_box .box .top .stat .price{font-size: 40px;}
html[lang='th'] #pricing_index #main .box_plan[currency='EUR'] .items_box .box .top .stat .price{font-size: 40px;}
html[lang='th'] #pricing_index #main .box_plan[currency='EUR'] .tabs .item .save_label{font-size: 14px;}
html[lang='th'] #pricing_index #main .box_plan[currency='EUR'] .items_box .box .top .limit{font-size: 13px;}
html[lang='ja'] #pricing_index #main .box_plan .items_box .box .top .stat .price{font-size: 40px;}
html[lang='ja'] #pricing_index #main .box_plan .items_box .box .top .limit{font-size: 14px;}
html[lang='ja'] #pricing_index #main .box_plan .tabs .item .save_label{font-size: 14px;}
html[lang='ja'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .stat .price{font-size: 28px;}
html[lang='ja'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .limit{font-size: 13px;}
html[lang='es'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .stat .price{font-size: 25px;}
html[lang='es'] #pricing_index #main .box_plan .items_box .labels .item:last-child{font-size: 13px;}
html[lang='id'] #pricing_index #main .box_plan .items_box .box .top .limit{font-size: 9px;}
html[lang='id'] #pricing_index #main .box_plan .tabs .item .save_label{font-size: 12px;}
html[lang='id'] #pricing_index #main .box_plan[currency='USD'] .items_box .box .top .stat .price{font-size: 40px;}
html[lang='id'] #pricing_index #main .box_plan[currency='USD'] .items_box .box .top .limit{font-size: 12px;}
html[lang='id'] #pricing_index #main .box_plan[currency='THB'] .items_box .box .top .stat .price{font-size: 37px;}
html[lang='id'] #pricing_index #main .box_plan[currency='THB'] .items_box .box .top .limit{font-size: 10px;}
html[lang='id'] #pricing_index #main .box_plan[currency='THB'] .tabs .item .save_label{font-size: 14px;}
html[lang='id'] #pricing_index #main .box_plan[currency='JPY'] .tabs .item .save_label{font-size: 14px;}
html[lang='id'] #pricing_index #main .box_plan[currency='JPY'] .items_box .box .top .limit{font-size: 10px;}
html[lang='id'] #pricing_index #main .box_plan[currency='EUR'] .tabs .item .save_label{font-size: 14px;}
html[lang='id'] #pricing_index #main .box_plan[currency='EUR'] .items_box .box .top .limit{font-size: 11px;}
html[lang='id'] #pricing_index #main .box_plan[currency='IDR'] .items_box .box .top .stat .price{font-size: 23px;}
html[lang='id'] #pricing_index #main .box_plan[currency='IDR'] .tabs .item .save_label{font-size: 14px;}
html[lang='id'] #pricing_index #main .box_plan .currency_symbol {font-size: 40px;}
html[lang='id'] #pricing_index #main .box_plan .price_amount{font-size: 80px;}
@media (max-width: 768px) {
    html[lang='id'] #pricing_index #main .box_plan .currency_symbol {font-size: 30px;}
    html[lang='id'] #pricing_index #main .box_plan .price_amount{font-size: 40px;}
    html[lang='id'] #pricing_index #main .box_plan .price_container{gap: 10px;}
    html[lang='id'] #pricing_index #main .box_plan .card_price{height: auto;}
}