#caseJJ_box { position: relative; z-index: 1; background-color: #f7f7f7; }
#caseJJ_box * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#caseJJ_box .se {
  width:0;height:0;border-style:solid;/* border-width:50px 35px 50px 35px;*/
  /* border-color:transparent transparent #319ad4;*/
  position:absolute;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:center;
}
#caseJJ_box .rooteJJ_box { width: 100vw; height: 100%; position: absolute; top: 0; left: 0; }
#caseJJ_box .se svg { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#caseJJ_box .se { transform-origin: center; width: 50px; height: 50px; -webkit-animation: seround 15s linear infinite; -moz-animation: seround 15s linear infinite; -o-animation: seround 15s linear infinite }
#caseJJ_box .ss01 {top: 13vw;left: 5vw;}
#caseJJ_box .ss01 svg { fill: #6e96ed; }
#caseJJ_box .ss02 {right: 5vw;top: 40vw;animation-duration: 11s;width: 40px;height: 40px;}
#caseJJ_box .ss02 svg { fill: #e66560; }
#caseJJ_box .ss03 {right: 50vw;bottom: 40px;width: 40px;height: 40px;animation-duration: 8s;}
#caseJJ_box .ss03 svg { fill: #54af60; width: 100%; }
.bg-decor-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.decor-circle-red { position: absolute; top: -8rem; left: -8rem; width: 24rem; height: 24rem; background-color: rgba(234,67,53,0.05); border-radius: 50%; filter: blur(40px); }
.decor-circle-blue { position: absolute; top: 5rem; left: 2.5rem; width: 16rem; height: 16rem; background-color: rgba(66,133,244,0.03); border-radius: 50%; filter: blur(30px); }
.decor-circle-green { position: absolute; bottom: -8rem; right: -8rem; width: 30rem; height: 30rem; background-color: rgba(52,168,83,0.05); border-radius: 50%; filter: blur(40px); }
.page-wrapper { width: min(1280px,100%); margin: 0 auto; padding: 4rem 1rem; position: relative; }
.header-section { text-align: center; margin-bottom: 1rem; }
.header-subtitle { color: #6b7280; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 0.5rem; }
.google-icon { width: 20px; height: 20px; margin: 0; }
.header-title { font-size: 3.5rem; font-weight: 900; color: #1f2937; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.hollow-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 4px solid; background-color: transparent; }
.dot-red { border-color: #EA4335; }
.dot-yellow { border-color: #FBBC05; }
.dot-green { border-color: #34A853; }
.table-scroll-area { width: 100%; overflow-x: scroll; padding: 20px; -ms-overflow-style: none; scrollbar-width: none; }
.table-scroll-area::-webkit-scrollbar { display: none; }
.table-card { border-radius: 12px; position: relative; padding: 40px 0; margin: 0px auto 0px auto; }
.pricing-table { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; text-align: center; box-shadow: 0 15px 40px -10px rgba(0,0,0,0.08); }
.pricing-table th,.pricing-table td { border-bottom: 1px solid #f3f4f6; border-right: 1px solid #f3f4f6; padding: 1.25rem 1.5rem; vertical-align: middle; }
.pricing-table th:last-child,.pricing-table td:last-child { border-right: none; }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table th:first-child { border-top-left-radius: 12px; }
.pricing-table th:last-child { border-top-right-radius: 12px; }
.pricing-table tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.pricing-table tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.pricing-table tbody tr { transition: background-color 0.2s; }
.pricing-table tbody tr:hover { background-color: rgba(249,250,251,0.8); }
.th-title-cell { width: 20%; background-color: #f9fafb; text-align: left; vertical-align: bottom; }
.th-title-eng { font-size: 0.875rem; color: #9ca3af; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.th-title-cht { font-size: 1.25rem; font-weight: bold; color: #374151; margin-top: 4px; }
.th-basic { width: 26.6%; position: relative; border-top: 4px solid #4285F4; padding-top: 2rem !important; }
.th-advanced { width: 26.6%; position: relative; border-top: 4px solid #FBBC05; background-color: rgba(251,188,5,0.03); padding-top: 2rem !important; }
.th-pro { width: 26.6%; position: relative; border-top: 4px solid #EA4335; background-color: rgba(234,67,53,0.03); padding-top: 2rem !important; }
.col-title { font-size: 1.8rem; font-weight: bold; color: #1f2937; margin-bottom: 0.25rem; text-align: center; }
.col-title-red { font-size: 1.8rem; font-weight: bold; color: #EA4335; margin-bottom: 0.25rem; text-align: center; }
.col-desc { font-size: 0.875rem; color: #6b7280; font-weight: normal; text-align: center; }
.pro-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) skewX(-12deg); background-color: #EA4335; color: white; font-size: 0.875rem; font-weight: bold; padding: 4px 20px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 2px solid white; white-space: nowrap; z-index: 10; }
.pro-badge-text { display: inline-block; transform: skewX(12deg); }
.td-label { font-weight: bold; color: #374151; text-align: left; background-color: #f9fafb; }
.bg-yellow-light { background-color: rgba(251,188,5,0.03); }
.bg-red-light { background-color: rgba(234,67,53,0.03); }
.price-blue { color: #4285F4; font-weight: 900; font-size: 2.5rem; }
.price-yellow { color: #FBBC05; font-weight: 900; font-size: 2.5rem; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.price-red-box { display: inline-block; background-color: white; border: 2px solid rgba(234,67,53,0.15); padding: 0.5rem 1rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: transform 0.2s; }
.price-red-box:hover { transform: translateY(-4px); }
.price-red { color: #EA4335; font-weight: 900; font-size: 2.5rem; }
.price-unit { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-left: 0.25rem; }
.text-bold { font-weight: bold; }
.text-red { color: #EA4335; font-weight: bold; }
.text-gray-icon { color: #d1d5db; font-size: 1.25rem; }
.check-container { display: flex; flex-direction: column; items-align: center; justify-content: center; gap: 4px; }
.check-circle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #34A853; color: white; border-radius: 50%; font-size: 12px; margin: 0 auto; }
.sub-text { display: block; font-size: 0.75rem; color: #6b7280; font-weight: normal; margin-top: 4px; }
.badge-gray { display: inline-block; font-size: 0.875rem; color: #6b7280; background-color: #f3f4f6; border-radius: 6px; padding: 4px 8px; margin-top: 6px; }
.badge-yellow { display: inline-block; font-size: 0.875rem; color: #d97706; background-color: #fef3c7; border-radius: 6px; padding: 4px 8px; margin-top: 6px; font-weight: 500; }
.badge-red { display: inline-block; font-size: 0.875rem; color: #b91c1c; background-color: #fee2e2; border-radius: 6px; padding: 4px 8px; margin-top: 6px; font-weight: bold; }
.swipe-indicator { display: none; text-align: right; color: #6b7280; font-size: 0.875rem; font-weight: bold; margin-bottom: 0.5rem; padding-right: 10px; }
.swipe-icon { display: inline-block; color: #4285F4; margin-left: 0.5rem; animation: slideRight 1.5s infinite; }
.check-container span { text-align: center; }
@keyframes slideRight {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
@media (max-width:1280px){
  #caseJJ_box .ss02 svg{display:none;}
}
@media (max-width:1024px) {
  .price-red,.price-yellow,.price-blue { font-size: 1.75rem; }
  .col-title,.col-title-red { font-size: 1.5rem; }
  .pricing-table th,.pricing-table td { padding: 1.25rem 1rem; }
  #caseJJ_box .ss03{display:none;}
}
@media (max-width:950px) {
  .swipe-indicator { display: block; }
  .th-title-cell { position: sticky; left: 0; z-index: 21; box-shadow: 4px 0 10px -2px rgba(0,0,0,0.08); width: 22%; }
  .pricing-table th:first-child { border-top-left-radius: 0px; }
  .td-label { position: sticky; left: 0; z-index: 20; box-shadow: 4px 0 10px -2px rgba(0,0,0,0.08); }
  .table-card { overflow-x: scroll; padding: 10px 0; }
  .pricing-table th,.pricing-table td { padding: 7px 9px; }
  .header-section { margin: 2rem 0; }
}
@media (max-width:768px) {
  #caseJJ_box .ss01{display:none;}
  .header-title { font-size: 2.5rem; gap: 0.75rem; }
  .hollow-dot { width: 14px; height: 14px; border-width: 3px; }
  .page-wrapper { padding: 2rem 1rem; }
  .table-scroll-area { padding: 0; }
}