.new-btn {display:inline-block; text-align: center; background:var(--purple); color:var(--white); padding:12px 30px; border-radius:30px; font-size:15px; text-decoration:none; transition:all 0.3s ease;}
.new-btn2 {display:inline-block; text-align: center; background:var(--green); color:var(--white); padding:12px 30px; border-radius:30px; font-size:15px; text-decoration:none; transition:all 0.3s ease;}

.banner-example {margin-top:120px;}
.example .row .rowin {padding:0 12px;}
.example .col-9 {width:73%;}
.example .col-3 {width:27%;}
.example .row {margin:0 -12px;}
h1 span{color:var(--green);}

.accordion {margin:0; padding:0; list-style:none;}
.accordion-item {border:1px solid #e5e5e5; margin-bottom:30px; border-radius:10px;}
.accordion-thumb {display:block; margin:0; cursor:pointer; font-weight:normal; gap:26px; padding: 25px; position:relative; box-shadow: 0 0px 20px #0000001a; background: #ffff9905; position:relative;}
.accordion-thumb .btns {display:flex; gap:8px; position:absolute; right:10px; top:10px;}
.accordion-thumb .btns {display:flex; gap:8px;}
.accordion-thumb a img {height:18px;}
.accordion-panel p {font-size:1rem; color:#5b5b5b; line-height:1.7; margin-bottom:0.6rem; word-wrap:break-word; word-break: break-word}
.accordion-panel h4 {font-size:24px; color:var(--purple); margin-bottom:14px; font-weight:600; line-height:2rem;}
.accordion-panel .cont {margin-bottom:16px;}
.accordion-panel .cont + .cont {border-top:1px solid #2133431f; padding-top:13px;}
.accordion-item.is-active {border:1px solid #3cc88e; box-shadow:0 1px 11px #2279551f;}

.example .tagline{
    font-size: 15px;
    border: 1px solid var(--green);
    position: absolute;
    right: 10px;
    top: -11px;
    padding: 3px 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.three-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.breadcrumb {list-style:none; display:flex; gap:8px; justify-content:center; margin-top:10px;}
ul.breadcrumb li {font-size:15px; color:#5b5b5b;}
ul.breadcrumb li a {color:white;} 
ul.breadcrumb li a.active {color:var(--green);} 
ul.breadcrumb li:not(:last-child)::after {content: "|"; margin-left: 10px; color:white;}

/** List ul **/
.example .domain-list {list-style:none; display:flex; gap:15px; flex-wrap:wrap; margin:20px 0 20px 0; padding:0;}
.example .domain-list li {background:var(--white); border:1px solid var(--purple); padding:8px 15px; border-radius:20px; transition:all 0.3s ease; cursor:pointer;}
.example .domain-list li a {color:var(--purple); font-size:15px; text-decoration:none;}
.example .domain-list li.active {background:var(--purple);}
.example .domain-list li.active a {color:var(--white);}
.example .domain-list li:hover {background:var(--purple); color:var(--white);}
.example .domain-list li:hover a {color:var(--white);}

.example .left_side_main img {border-radius:12px; margin-bottom:20px;}
.example .left_side {margin-bottom:25px; position:relative;}
.example {padding:70px 0;}
.accordion-thumb a {display:flex; border:1px solid #ccc; min-width:38px; justify-content:center; align-items:center; height:38px; border-radius:4px; gap:5px; font-weight:400;}
.example .cont1.userlist {padding:23px; border:1px solid #e5e5e5; border-radius:10px;}
.example .summary {border-top:1px solid #0ebb74; padding-top:20px; margin-top:30px;}
.example .imgexample {width:100%; height:400px; object-fit:cover; margin-bottom:30px; border-radius:15px;}
.example .cont1.userlist p b {color:#213343; min-width:212px; display:inline-block; font-weight:600;}
.accordion.faq .accordion-item .accordion-thumb .hdn::before {content:""; display:inline-block; height:8px; width:9px; margin-right:1rem; margin-left:0.5rem; vertical-align:middle; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); transition:transform 0.2s ease-out; position:absolute; right:-10px; top:5px;}
.accordion-panel .cont:last-child {border:none; margin-bottom:0;}
.accordion-panel {margin:0; padding:25px; border-top:1px solid var(--green); display:none; max-height: 700px; overflow: auto;}

.example strong {color:var(--purple);}
.accordion.faq .accordion-item.is-active .accordion-thumb .hdn::before {transform:rotate(-138deg);}
.accordion-item.is-active .accordion-thumb h4 {color:var(--green);}
.example .title h2 {font-size:40px; color:var(--purple); line-height:48px; margin-bottom:1.2rem; font-weight:600;}
.example .title {max-width:100%; text-align:left; margin:0 auto 20px auto;}
.accordion-thumb h4 {font-size:24px; color:var(--purple); margin-bottom:14px; font-weight:600; line-height:2rem;}
.accordion-thumb p {font-size:1rem; color:#464646; line-height:1.7; margin-bottom:0.6rem;}
.accordion-thumb .hdn ul li {display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#888;}
.accordion-thumb .hdn ul li img {height:16px;}
.accordion-thumb .hdn ul {display:inline-flex; margin:10px 10px; gap:34px;}
.banner-example {margin-top:82px; background:var(--purple); height:200px; display:flex; margin-bottom:0;}
.banner-example h1 {color:var(--white); font-size:2.5rem; font-weight:400; line-height:2.2rem; margin-bottom:14px;}
.banner-example p {font-size:1rem; color:#ffffffb0; text-align:center; max-width:1000px; font-weight:400; margin-top:15px; line-height:1.7; margin-bottom:0.6rem;}
.example {padding:50px 0;}
.example .col-3 .rowin {height:100%;}
.example .left_side .example-img {position:absolute; right:-52px; bottom:0;}
.example .left_side ul li a {padding:16px 0 16px 20px; display:block; font-size:15px; color:var(--purple);}
.example .left_side_main {position:sticky; top:109px; padding-right:45px;}
.example h3 {font-size:2rem; margin-bottom:1rem; font-weight:500; color:var(--green); line-height:2.1rem;}
.example .left_side ul li::before {content:""; display:inline-block; height:8px; width:9px; margin-right:1rem; margin-left:0.5rem; vertical-align:middle; border-right:1px solid; border-bottom:1px solid; transform:rotate(-45deg); transition:transform 0.2s ease-out; position:absolute; left:0; top:0; bottom:0; margin:auto;}
.example .left_side ul li + li {border-top:1px solid #e5e5e5;}
.example .left_side ul li {position:relative;}
.left_side_cont {padding:30px 0; background:var(--purple); padding:24px; border-radius:10px;}
.left_side_cont h4 {font-size:24px; color:var(--white); margin-bottom:14px; font-weight:600; line-height:2rem; text-align: justify;}
.left_side_cont p {font-size:1rem; color:var(--white); line-height:1.7; margin-bottom:0.6rem;}
.accordion-panel .cont .table th {background:var(--purple); color:var(--white); font-weight:600;}
.accordion-panel .cont .table {background:var(--white); margin-top:12px; width:100%;}
.accordion-panel .cont .table th, .accordion-panel .cont .table td {border:1px solid #e5e5e5; padding:10px; font-size:1rem;}
.accordion-panel .cont .table td {border:1px solid #e5e5e5; padding:10px; font-size:1rem; color:#5b5b5b;}
.example .cont1 p {font-size:1rem; color:#5b5b5b; margin-bottom:0.6rem; line-height:1.7;}
.example .cont1 {margin-bottom:20px; padding:20px; border:1px solid #e5e5e5; border-radius:10px;}
.example .cont1 .table th, .example .cont1 .table td {border:1px solid #e5e5e5; padding:10px; font-size:1rem;}
.example .cont1 .table th {background:#21334324; color:var(--purple); font-weight:600;}
.accordion.faq {border:1px solid #e5e5e5; padding:15px; border-radius:12px;}
.faq .accordion-thumb {padding:15px;}
.faq .accordion-panel {padding:15px; border-top:1px solid #52606c;}
.faq .accordion-thumb h4 {font-size:24px; margin-bottom:14px; color:var(--purple); font-weight:600; line-height:2rem;}
.accordion.faq .accordion-item {border-radius:4px;}
.accordion.faq .accordion-item.is-active {border:1px solid #213343c7;}
.accordion.faq .accordion-item .hdn {padding-right:30px; position:relative; width:100%;}
.testimonial {margin-bottom:70px;}
.testimonial .set .komaicon {max-width:62px; position:absolute; left:25px; top:22px;}
.testimonial .stars img {height:22px;}
.testimonial .stars {font-style:normal; font-size:18px; margin-bottom:32px; display:flex; align-items:center; gap:9px; text-align:right; justify-content:right; font-weight:600; color:var(--purple);}
.testimonial p {font-size:1rem; text-align:left; font-style:italic; line-height:1.7; margin-bottom:0.6rem;}
.testimonial .swiper-slide {text-align:center;}
.testimonial .swiper-button-prev::after, .testimonial .swiper-button-next::after {font-size:20px; color:var(--light-black);}
.testimonial .swiper-button-prev, .testimonial .swiper-button-next {border:1px solid #ccc; padding:10px; width:56px; height:56px; border-radius:50%;}
.testimonial .swiper-container {max-width:1200px;}
.testimonial h6 {font-size:1.125rem; text-align:right; margin-top:20px; color:var(--purple); line-height:1.5rem; margin-bottom:0.5rem; font-weight:500;}
.testimonial .set {border:1px solid #ccc; padding:41px; border-radius:11px;}
.testimonial .swiper_main {position:relative; max-width:94%; margin:auto;}


.example .accordion-panel ul {border-bottom:1px solid var(--purple); border-top:1px solid var(--purple); margin:25px 0; padding:15px 0; position:relative; list-style:none;}
.example .accordion-panel ul li {padding:3px 0; list-style:none; text-decoration:none; padding-left:26px; position:relative; font-size:1rem; line-height:1.7; margin-bottom:0.6rem;}
.example .accordion-panel ul li::before {content:"➤"; position:absolute; left:0px; color:var(--purple); line-height:31px; font-size:0.8rem; bottom:0; top:0; margin:auto;}
.example .accordion-panel ul ul {background:#fff !important; border:1px solid #cccccc75; margin:0; padding:0;}
.example .accordion-panel ul ul li {padding-left:28px; color:#333; font-size:1rem; line-height:1.7;}
.example .accordion-panel ul ul li::before {content:"➤"; color:var(--green); position:absolute; left:7px; font-size:0.8rem; line-height:1.8; margin-top:5px;}
.example .accordion-panel ul ul ul {padding:0 !important; margin-left:20px;}
.example .accordion-panel ul ul ul li {color:#333; font-size:1rem; line-height:1.7; margin:4px 0;}
.example .accordion-panel ul ul ul li::before {content:""; color:var(--green); position:absolute; left:7px; font-size:0.8rem; line-height:1.8; margin-top:11px; font-weight:600; width:6px; height:6px; border:2px solid var(--green); border-radius:10px;}
.example .accordion-panel ul {background:#0ebb7426 !important; border-radius:5px; margin-top:7px; margin-bottom:10px; padding:10px 10px !important; margin-left:0; list-style:none;}
/* .example .accordion-panel .ul2 {background:#0ebb7426 !important; border-radius:5px; margin-top:7px; margin-bottom:10px; padding:10px 10px !important; margin-left:0; list-style:none;} */
.example .accordion-panel ul li {padding-left:28px !important; font-size:1rem; line-height:1.7; margin-bottom:0.6rem;}
/* .example .accordion-panel .ul2 li {padding-left:28px !important; font-size:1rem; line-height:1.7; margin-bottom:0.6rem;} */
.example .accordion-panel ul li::before {display:block !important; content:"➤"; position:absolute; left:0px; color:var(--purple); font-size:0.8rem; line-height:1.7;}
/* .example .accordion-panel .ul2 li::before {display:block !important; content:"➤"; position:absolute; left:0px; color:var(--purple); font-size:0.8rem; line-height:1.7;} */
.example .accordion-panel ul.ul1 {padding:0px 0 15px; margin-left:0;}
.example .accordion-panel ul.ul1 li:last-child {padding-left:0;}
.example .accordion-panel ul.ul1 li:last-child::before {display:none;}
.example .accordion-panel ol {padding:0; margin:20px 0; border-radius:9px; margin-bottom:77px; position:relative; border:none; list-style:none;}
.example .accordion-panel ol li {margin:10px 0; padding-left:0; font-size:1rem; line-height:1.7; position:relative;}
.example .accordion-panel ol li:last-child {padding-bottom:0; margin-bottom:0;}
.example .accordion-panel ol li p {margin-bottom:0; font-weight:400; color:var(--purple); font-size:1rem; line-height:1.7;}
.example .accordion-panel ol li p strong {margin-top:10px; display:block; font-weight:600;}
.example .accordion-panel ol li.example b, .example ol li.example strong {font-size:17px; margin-bottom:0; font-weight:500; color:var(--purple); margin-top:6px; background-image:url(../img/case-studies.png); background-size:40px; padding-left:49px; background-repeat:no-repeat; height:40px; display:flex; align-items:center;}
.example .accordion-panel ol ul {margin:0; border:none; background:#fff !important; border:1px solid #cccccc75;}
.example .accordion-panel ol ul li {margin:2px 0; font-size:1rem; line-height:1.7; padding-left:28px;}
.example .accordion-panel ol ul ul {padding:0 !important; margin-left:20px;}
.example .accordion-panel ol ul ul li {margin:4px 0; color:#333; font-size:1rem; line-height:1.7;}
.example .accordion-panel ol.ul2 {padding:10px 10px 10px 39px !important; margin-bottom:70px; margin-top:20px; background:#0ebb7426 !important; border-radius:5px;}
.example .accordion-panel ol.ul2 li {padding-left:0 !important; font-size:1rem; line-height:1.7;}
.example .accordion-panel ol::after {background-image:url(../img/example/arrow-green-small2.png); background-repeat:no-repeat; background-position:left bottom; content:""; position:absolute; left:14px; bottom:-88px; width:48px; height:130px; background-size:100%; transform:rotate(296deg);}
.example .accordion-panel li::marker {font-family:"Montserrat", sans-serif; color:var(--black); font-size:1rem;}


.dpp-page * {line-height:1.7; letter-spacing:0.4px; word-break:break-word;}
.dpp-page p {margin-bottom:0.6rem; font-size:1rem; line-height:1.7;}
.dpp-page h4 {margin-bottom:14px; font-size:24px; line-height:2rem; font-weight:600; color:var(--purple);}
.dpp-page ul {margin-bottom:20px;}
.dpp-page ul li {margin-bottom:6px; position:relative; padding-left:35px;}
.dpp-page ul li::before {content:"➤"; position:absolute; left:15px; color:var(--green); font-size:14px; line-height:1.5;}
.dpp-page ul li a {opacity:0.5;}
.dpp-page ul li a:hover {opacity:1;}
.dpp-page ul ul {margin-top:6px; margin-bottom:6px; padding-left:20px;}
.dpp-page ul ul li {padding-left:25px;}
.dpp-page ul ul li::before {content:"→"; left:10px; color:var(--purple); font-size:12px;}
.dpp-page table {width:100%; border-collapse:collapse; margin:20px 0; font-size:1rem; line-height:1.2rem; border:1px solid #ddd; display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; border-radius:8px;}
.dpp-page table th, .dpp-page table td {border:1px solid #ddd; padding:10px; text-align:left;}
.dpp-page table th {background:var(--purple); color:#fff; font-weight:600;}
.dpp-page table td {background:#fff; color:#333;}
.dpp-page table tr:nth-child(even) td {background:#f9f9f9;}

@media (max-width: 1199px) {
.example .accordion-panel ul li {padding-left:20px;}
.example .accordion-panel ul ul li {padding-left:24px;}
.example .accordion-panel .ul2 li {padding-left:24px !important;}
.example .accordion-panel ol ul li {padding-left:24px;}
}

@media (max-width: 768px) {
.example .accordion-panel ul {margin:15px 0; padding:10px 0;}
.example .accordion-panel ol {margin-bottom:50px;}
.example .accordion-panel ul li, .example ol li {font-size:0.9rem;}
.example .accordion-panel ul li {padding-left:18px;}
.example .accordion-panel .ul2 li {padding-left:20px !important;}
}

@media (max-width: 1199px) {
.example .left_side_main {padding-right:0; top:0; margin-bottom:22px;}
.example .left_side_main img {width:100%;}
.example .left_side .example-img {right:0; width:auto;}
.testimonial .swiper_main {padding:0 76px;}
.accordion-panel {padding:16px;}
.example .col-3, .example .col-9 {width:100%;}
.example .row {display:block;}
}