.col-md-3 .allimg{
    float: left;
    margin-top: 20px;
}
.col-md-3 .dianhua{
    float: left;
    padding-top: 0px;
    margin-bottom: 13px;
}
.col-md-3 .hydl{
    float: left;
    margin-top: 25px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
.ejtitle{
    float: left;
    width: 100%;
    margin-top: 39px;
    margin-bottom: 25px;
    color: #fff;
    font-size: 18px;
    background: #f5f5f5;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
}
.ejtitle-com{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #58c9e9;
}
.ejtitle-cul{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #4d9ace;
}
.ejtitle-voip{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #1cd599;
}
.ejtitle-fax{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #67b362;
}
.ejtitle-feilv{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: rgb(194, 4, 194);
}
.ejtitle-mess{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #e425a6;
}
.ejtitle-fri{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #9f3794;
}

a .ejtitle-news{
    color: #fff;
}
.ejtitle-news{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #62a4fd;
}

a .ejtitle-active{
    color: #fff;
}
.ejtitle-active{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #e48a21;
}
.ejtitle-ivr{
    padding: 10px 50px;
    border-radius: 5px;
    background-color: #7f8ae7;
}


.ejicon{
    float: left;
    width: 100%;
    height: auto;
    font-size: 16px;
    line-height: 36px;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 20px;
    word-wrap: break-word;
    border: 1px solid #e9e9e9;
}
.ejicon table{
    width: 100%;
}
.ejicon table td, .ejicon table tr{
    border-color: #ebebeb;
    padding: 6px;
    /* white-space: nowrap !important; */
    
}
.ejicon .nav-item {
    width: 25%;
}
.ejicon .nav-item button{
    background-color: #e2e6e9;
    width: 99%;
    border: 1px solid #cdd3f7;
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }

.ejicon .messages td{
    padding: 10px;
}
.ejicon .messages td input{
    width: 50%;
}
.ejicon .messages td textarea{
    width: 50%;
}
.ejicon img{
    max-width: 100%;
}
.friend img{
    width: 100%;
    height: 290px;
    object-fit: contain;
    text-align: center;
}
.friend h3{
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    font-size: 16px;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 10px;
}
.friend p{
    width: 100%;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}
.friend p a{
    font-size: 14px;
    font-weight: normal;
}


.ilates_title {
    float: left;
    width: 75%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    font-weight: bold;
}

.ilates_title>span {
    margin-right: 3rem;
    font-weight: normal;
}

.ilates_date {
    float: right;
    width: 25%;
    text-align: right;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    color: #999;
}

.ilates_date>span {
    float: left;
}

.ilates td:hover {
    background-color: #f3f8fc;
}

.news_info {
    width: 100%;
    padding: 3px 20px;
}

.news_title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #333;
    margin-top: 20px;
    margin-bottom: 15px;
}

.news_date {
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #999;
    margin-bottom: 1rem;
}

.news_date>span {
    margin: 0px 12px;
}

.news_con {
    line-height: 30px;
    padding-bottom: 1rem;
}
.news_con img{
    max-width: 100%;
}




@media only screen and (max-width: 767px) {

    .conleft{
        display: none;
    }
    
.ejicon .messages td input{
    width: 100%;
}
.ejicon .messages td textarea{
    width: 100%;
}
}


.promo-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 40px;
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin-top: 10px;
}
.main-title {
    color: #0379f5;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}
.highlight {
    background-color: #ebf8ff;
    padding: 3px 1px;
    border-radius: 5px;
    color: #0379f5;
}
.price {
    font-size: 36px;
    color: #e53e3e;
    font-weight: bold;
    margin: 15px 0;
    background: linear-gradient(to right, #fff5f5, #fed7d7);
    padding: 12px 25px;
    border-radius: 50px;
    display: inline-block;
}
.features {
    text-align: left;
    margin: 25px 0;
    line-height: 1.8;
}
.feature-item {
    margin-bottom: 12px;
    padding-left: 15px;
    border-left: 3px solid #e2e8f0;
}
.tag {
    display: inline-block;
    background-color: #2b6cb0;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    margin-top: 15px;
}
.saving {
    color: #38a169;
    font-weight: bold;
    font-size: 18px;
}
.saving2 {
    color: #e66104;
    font-weight: bold;
    font-size: 18px;
}
.title3 {
    background-color: #2b6cb0;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    text-align: center;
    margin: 20px 0;
    font-size: 21px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content3 {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    border-left: 4px solid #2b6cb0;
}
.feature3 {
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 3px solid #e2e8f0;
}
.highlight {
    font-weight: bold;
    color: #0379f5;
}

.fax-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 30px;
    width: 100%;
    margin-top: 12px;
}
.main-title {
    color: #2b6cb0;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}
.description {
    background-color: #ffebf3;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    line-height: 1.6;
    color: #e0008f;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
.region-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.region-row {
    display: flex;
    justify-content: center;
    padding: 15px;
    border-radius: 8px;
    font-size: 18px;
    align-items: center;
}
.region-name {
    font-weight: bold;
    font-size: 20px;
}
.region-number {
    font-weight: bold;
    background-color: #aeffc6fa;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    text-align: center;
    color: #222;
}

/* Alternating row colors */
.row-1 { background-color: #ebf8ff; color: #2b6cb0; }
.row-2 { background-color: #fff5f5; color: #c53030; }
.row-3 { background-color: #f0fff4; color: #276749; }
.row-4 { background-color: #faf5ff; color: #6b46c1; }

.rate-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 30px;
    width: 100%;
    margin-top: 10px;
}
.main-title {
    color: #2b6cb0;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
}
.notes {
    background-color: #fffaf0;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #dd6b20;
    margin-top: 20px;
}
.notes-title {
    font-weight: bold;
    color: #dd6b20;
    margin-bottom: 10px;
}
.highlight2 {
    color: #c53030;
    font-weight: bold;
}
.rate-container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    white-space: normal !important;
}
.rate-container th {
    background-color: #2b6cb0;
    color: white;
    padding: 12px 15px;
    text-align: left;
}
.erji .rate-container .table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
    white-space: normal !important;
}
.rate-container tr:nth-child(even) {
    background-color: #f8fafc;
}


.feature-header {
    background-color: #2b6cb0;
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.feature-grid {
    margin-left: 0;
    margin-right: 0px;
    background-color: white;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feature-item2 {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;
    line-height: 22px;
}
.feature-item2::before {
    content: "●";
    color: #2b6cb0;
    margin-right: 10px;
    font-size: 32px;
}


.header {
    background-color: #2b6cb0;
    color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;

}
.feature-container {
    background-color: white;
    padding: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feature-item3 {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
}
.feature-item3:last-child {
    border-bottom: none;
}
.feature-number {
    background-color: #2b6cb0;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}
.feature-content {
    flex-grow: 1;
}
.feature-title {
    font-weight: bold;
    color: #2b6cb0;
    margin-bottom: 8px;
    font-size: 18px;
}
@media (max-width: 600px) {
    .feature-item3 {
        flex-direction: column;
    }
    .feature-number {
        margin-bottom: 10px;
    }
}


.marketing-container {
    width: 100%;
    margin-top: 10px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}
.header3 {
    background: linear-gradient(135deg, #0b9d6e, #4ae2b7);
    color: white;
    padding: 30px 20px;
    text-align: center;
}
.main-title2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.sub-title {
    font-size: 20px;
    font-weight: 500;
}
.content {
    padding: 25px;
}
.highlight {
    color: #e53e3e;
    font-weight: bold;
}
.cta {
    background-color: #f0fff4;
    border-left: 4px solid #38a169;
    padding: 15px;
    margin: 20px 0;
    font-weight: bold;
}
.benefits {
    margin-top: 25px;
}
.benefit-item {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;
}
.benefit-icon {
    color: #2b6cb0;
    font-size: 20px;
    margin-right: 10px;
    margin-top: 3px;
}
@media (max-width: 600px) {
    .main-title {
        font-size: 24px;
    }
    .sub-title {
        font-size: 18px;
    }
}




.feature-row {
    display: flex;
    margin-bottom: 15px;
    gap: 15px;
    margin-top: 33px;
}
.feature-box {
    flex: 1;
    padding: 15px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    padding-left: 50px;
}
.feature-badge {
    position: absolute;
    left: -15px;
    top: -15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #3182ce;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.feature-content2 {
    line-height: 1.6;
    font-weight: bold;
    color: #1d1e1e;
}
.sub-features {
    font-weight: normal;
    font-size: 14px;
    color: #666767;
    margin-top: 5px;
    padding-left: 10px;
    border-left: 2px solid #e2e8f0;
}
/* Different badge colors */
.badge1 { background-color: #3182ce; } /* Blue */
.badge2 { background-color: #e53e3e; } /* Red */
.badge3 { background-color: #38a169; } /* Green */
.badge4 { background-color: #805ad5; } /* Purple */
.badge5 { background-color: #dd6b20; } /* Orange */
.badge6 { background-color: #d53f8c; } /* Pink */
.badge7 { background-color: #00b5d8; } /* Cyan */
.badge8 { background-color: #718096; } /* Gray */

@media (max-width: 600px) {
    .feature-row {
        flex-direction: column;
    }
    .feature-box {
        padding-left: 50px;
    }
}



.card-crm {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    overflow: hidden;
}
.card-header-crm {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 18px 25px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.card-content-crm {
    padding: 25px;
}
.price-table-crm {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}
.price-table-crm th {
    background-color: #e2e8f0;
    padding: 14px;
    text-align: left;
    font-weight: 600;
}
.price-table-crm td {
    padding: 14px;
    border-bottom: 1px solid #edf2f7;
}
.highlight-crm {
    background-color: #ebf4ff;
    padding: 12px 15px;
    border-radius: 8px;
    border-left: 4px solid #4f46e5;
    margin: 15px 0;
    font-weight: 500;
}
.feature-list-crm {
    margin: 15px 0;
    padding-left: 20px;
}
.feature-list-crm li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}
.feature-list-crm li:before {
    content: "•";
    color: #4f46e5;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: -3px;
}
.note-crm {
    font-size: 14px;
    color: #718096;
    font-style: italic;
}



.section-title-rm {
    color: white;
    padding: 18px 25px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(135deg, #0c93db, #7bc4df);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 6px;
}

.feature-row-rm {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.feature-card-rm {
    flex: 1 1 calc(50% - 20px);
    min-width: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.feature-header-rm {
    padding: 12px 15px;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
}
.feature-header-rm:before {
    content: "●";
    margin-right: 10px;
    font-size: 20px;
    color: #2b6cb0;
}
.feature-content-rm {
    padding: 15px;
    line-height: 1.7;
    background-color: white;
}
/* Light background colors */
.color1 { background-color: #ebf8ff; } /* Light blue */
.color2 { background-color: #fff5f5; } /* Light red */
.color3 { background-color: #f0fff4; } /* Light green */
.color4 { background-color: #faf5ff; } /* Light purple */
.color5 { background-color: #fffaf0; } /* Light orange */
.color6 { background-color: #f8fafc; } /* Light gray */
.color7 { background-color: #ebf4ff; } /* Light blue 2 */
.color8 { background-color: #fff5f7; } /* Light pink */
.color9 { background-color: #f0fdf4; } /* Light green 2 */
.color10 { background-color: #f5f3ff; } /* Light purple 2 */
.color11 { background-color: #fffbeb; } /* Light yellow */
.color12 { background-color: #ecfdf5; } /* Light teal */





.service-section-sms {
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.section-title-sms {
    text-align: center;
    padding: 15px;
    margin: 0;
    font-size: 22px;
    color: white;
}

.section-content-sms {
    padding: 20px;
    background-color: #f9f9f9;
}

/* 不同區塊的背景色 */
.mass-sms .section-title-sms {
    background-color: #00a854;
}

.interactive-sms .section-title-sms {
    background-color: #f39c12;
}

.sms-api .section-title-sms {
    background-color: #9b59b6;
}

.feature-list-sms {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.feature-list-sms li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
}

.feature-list-sms li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #2c7be5;
    font-weight: bold;
}

.divider-sms {
    border-top: 2px solid #e0e0e0;
    margin: 30px 0;
}

.highlight-sms {
    font-weight: bold;
    color: #2c7be5;
}

.content-text-sms {
    margin-bottom: 15px;
    line-height: 1.7;
}

.hydlcon-2{
    background: url(../images/dy.jpg);
}