.sub.dx{ word-break: keep-all; }

.sub.dx .s1 .txt .tab a.on{ background: linear-gradient(to left, #8bcfe3 0%, #87e5ae 100%, #000 100%); }
.sub.dx .s1 .rect{ background-color: #f3fef9; }

/*
.sub.dx .subTitle{ text-align: center; word-break: keep-all; }
.sub.dx .subTitle .grad{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #8bcfe3 0%, #87e5ae 100%);
    font-size: 30px; font-weight: 700; letter-spacing: -0.03em; display: inline-block; margin-bottom: 15px;
}
.sub.dx .subTitle strong{ font-size: 48px; letter-spacing: -0.03em; color: #222222; line-height: calc(64 / 48); font-weight: 700; display: block; }
.sub.dx .subTitle p{ font-size: 22px; letter-spacing: -0.045em; margin-top: 25px; line-height: calc(30 / 22); color: #555555; }
.sub.dx .subTitle strong b{ 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #8bcfe3 0%, #87e5ae 100%);
}

@media screen and (max-width: 1280px){
    .sub.dx .subTitle .grad{ font-size: 24px; }
    .sub.dx .subTitle strong{ font-size: 35px; }
    .sub.dx .subTitle p{ font-size: 20px; }
}

@media screen and (max-width: 1024px){
    .sub.dx .subTitle .grad{ font-size: 20px; }
    .sub.dx .subTitle strong{ font-size: 30px; }
    .sub.dx .subTitle p{ font-size: 18px; }
}

@media screen and (max-width: 820px){
    .sub.dx .subTitle .grad{ font-size: 16px; }
    .sub.dx .subTitle strong{ font-size: 25px; }
    .sub.dx .subTitle p{ font-size: 16px; margin-top: 10px; }
}

@media screen and (max-width: 500px){
    .sub.dx .subTitle .grad{ font-size:14px; }
    .sub.dx .subTitle strong{ font-size: 22px; }
    .sub.dx .subTitle p{ font-size: 14px; }
}
*/

.sub.dx .subTitle{ text-align: center; word-break: keep-all; }
.sub.dx .subTitle .grad{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #8bcfe3 0%, #87e5ae 100%);
    font-size: 30px; font-weight: 700; letter-spacing: -0.03em; display: inline-block; margin-bottom: 15px;
}

@media screen and (max-width: 1280px){
    .sub.dx .subTitle .grad{ font-size: 24px; }
}

@media screen and (max-width: 1024px){
    .sub.dx .subTitle .grad{ font-size: 20px; }
}

@media screen and (max-width: 820px){
    .sub.dx .subTitle .grad{ font-size: 16px; }
}

@media screen and (max-width: 500px){
    .sub.dx .subTitle .grad{ font-size:14px; }
}



.sub.mendix .s2{ padding-top: 40px; padding-bottom: 140px; box-sizing: border-box; position: relative; background-color: #f3fef9; }
.sub.mendix .s2 .svgbx{ margin-top: 55px; text-align: center; }

@media screen and (max-width: 820px){
    .sub.mendix .s2{ padding-bottom: 100px; }
}



.sub.mendix .s3{ padding: 150px 0; }
.sub.mendix .s3 .vsbx{ display: flex; justify-content: space-between; margin-top: 60px; align-items: center; }
.sub.mendix .s3 .vsbx .top{ width: 100%; display: block; text-align: center; height: 55px; border-radius: 100px; background-color: #c9c9c9; color: #fff; font-size: 24px; letter-spacing: -0.03em; line-height: 1.3; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: -1px; }
.sub.mendix .s3 .vsbx .rbx .top{ background-color: unset; background: linear-gradient(to right, #8bcfe3, #87e5ae); }


.sub.mendix .s3 .vsbx .gif{ text-align: center; }
.sub.mendix .s3 .vsbx .lbx{ width: calc(640 / 1440 * 100%); border-radius: 30px; border: 1px solid #dddddd; box-sizing: border-box; overflow: hidden; }
.sub.mendix .s3 .vsbx .rbx{ width: calc(640 / 1440 * 100%); border-radius: 30px; border: 1px solid #dddddd; box-sizing: border-box; overflow: hidden; }
.sub.mendix .s3 .vsbx .vs{ font-size: 48px; letter-spacing: -0.03em; font-weight: 700; padding: 0 10px; box-sizing: border-box; }


.sub.mendix .s3 .grid{ width: 100%; margin-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px 0; word-break: keep-all; }
.sub.mendix .s3 .grid li{ position: relative; width: calc(460 / 1440 * 100%); border-radius: 22px; background: linear-gradient(to right, #f3f3f3, #f3f3f3); color: #222; padding: 30px 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; height: 280px; transition-duration: 0.4s; overflow: hidden; }
.sub.mendix .s3 .grid li::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: linear-gradient(to right, #8bcfe3, #87e5ae); transition-duration: 0.4s; opacity: 0; }
.sub.mendix .s3 .grid li.on{ background-color: unset; color: #fff; }
.sub.mendix .s3 .grid li.on::before{ opacity: 1; }
.sub.mendix .s3 .grid li .icon{ position: relative; z-index: 1; }
.sub.mendix .s3 .grid li dl dt{ font-size: 24px; letter-spacing: -0.03em; font-weight: 600; line-height: 1.3; position: relative; z-index: 1; }
.sub.mendix .s3 .grid li dl dd{ font-size: 16px; letter-spacing: -0.03em; margin-top: 20px; line-height: calc(24 / 16); position: relative; z-index: 1; }

@media screen and (max-width: 1280px){
    .sub.mendix .s3{ padding: 120px 0; }
    .sub.mendix .s3 .vsbx{ margin-top: 50px; }
    .sub.mendix .s3 .vsbx .top{ font-size: 20px; height: 45px; }
    .sub.mendix .s3 .vsbx .vs{ font-size: 35px; }

    .sub.mendix .s3 .grid{ margin-top: 60px; gap: 20px 0; }
    .sub.mendix .s3 .grid li{ padding: 30px 20px; height: 260px; }
    .sub.mendix .s3 .grid li dl dt{ font-size: 20px; }
    .sub.mendix .s3 .grid li dl dd{ font-size: 14px; }
}

@media screen and (max-width: 820px){
    .sub.mendix .s3{ padding: 100px 0; }
    .sub.mendix .s3 .vsbx{ margin-top: 30px; }
    .sub.mendix .s3 .vsbx .lbx{ border-radius: 20px; }
    .sub.mendix .s3 .vsbx .rbx{ border-radius: 20px; }
    .sub.mendix .s3 .vsbx .top{ font-size: 16px; height: 40px; }
    .sub.mendix .s3 .vsbx .vs{ font-size: 24px; }

    .sub.mendix .s3 .grid{ margin-top: 40px; gap: 10px 0; justify-content: space-between; }
    .sub.mendix .s3 .grid li{ padding: 20px; height: 240px; width: 49%; }
    .sub.mendix .s3 .grid li dl dt{ font-size: 18px; }
}

@media screen and (max-width: 500px){
    .sub.mendix .s3 .vsbx{ flex-direction: column; }
    .sub.mendix .s3 .vsbx .lbx{ width: 100%; }
    .sub.mendix .s3 .vsbx .rbx{ width: 100%; }
    .sub.mendix .s3 .vsbx .vs{ padding: 30px 0; }
    .sub.mendix .s3 .grid li{ width: 100%; height: auto; }
    .sub.mendix .s3 .grid li dl{ margin-top: 20px; }
}




.sub.mendix .s4{ position: relative; padding: 110px 0; box-sizing: border-box; word-break: keep-all; }
.sub.mendix .s4 .bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.sub.mendix .s4 .bg img {width: 100%; height: 100%; object-fit: cover;}
.sub.mendix .s4 .imgbx{ text-align: center; margin-top: 75px; }
.sub.mendix .s4 .iconlist{ margin-top: 195px; display: flex; }
.sub.mendix .s4 .iconlist li{ height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid rgba(0,0,0,0.1); text-align: center; padding: 0 10px; box-sizing: border-box; width: 100%; }
.sub.mendix .s4 .iconlist li:last-of-type{ border-right: none; }
.sub.mendix .s4 .iconlist li .icon{ height: 90px; display: flex; align-items: center; justify-content: center; }
.sub.mendix .s4 .iconlist li span{ display: block; text-align: center; margin-top: 35px; font-size: 22px; letter-spacing: -0.045em; line-height: 1.3; font-weight: 600; }

@media screen and (max-width: 1280px){
    .sub.mendix .s4 .iconlist{ margin-top: 100px; }
    .sub.mendix .s4 .iconlist li span{ font-size: 18px; margin-top: 20px; }
}

@media screen and (max-width: 820px){
    .sub.mendix .s4{ padding: 70px 0; }
    .sub.mendix .s4 .iconlist{ margin-top: 70px; flex-wrap: wrap; }
    .sub.mendix .s4 .iconlist li{ height: 150px; width: 50%; margin-bottom: 10px; }
    .sub.mendix .s4 .iconlist li:nth-of-type(2n){ border-right: 0; }
    .sub.mendix .s4 .iconlist li span{ font-size: 16px; margin-top: 10px; }
}

@media screen and (max-width: 500px){
    .sub.mendix .s4 .iconlist{ margin-top: 30px; }
    .sub.mendix .s4 .iconlist li span{ font-size: 14px; }
    .sub.mendix .s4 .imgbx{ margin-top: 40px; }
}


.sub.mendix .s5{ padding: 150px 0; box-sizing: border-box; position: relative; word-break: keep-all; }
.sub.mendix .s5 .grid{ margin-top: 55px; display: flex; flex-direction: column; gap: 20px; }
.sub.mendix .s5 .grid .row{ width: 100%; display: flex; justify-content: space-between; gap: 20px; }
.sub.mendix .s5 .grid .row .lbx{ width: calc(440 / 1440 * 100%); border-radius: 20px; background-color: #f2f7f8; padding: 10px; box-sizing: border-box; min-height: 160px; text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.sub.mendix .s5 .grid .row .lbx dl dt{ font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: #222222; line-height: 1.3; }
.sub.mendix .s5 .grid .row .lbx dl dd{ font-size: 18px; font-weight: 500; letter-spacing: -0.03em; color: #555555; margin-top: 7px; line-height: 1.3; }
.sub.mendix .s5 .grid .row .rbx{ width: calc(1000 / 1440 * 100%); border: 1px solid #dddddd; border-radius: 20px; box-sizing: border-box; padding: 20px 50px; display: flex; align-items: center; }
.sub.mendix .s5 .grid .row .rbx > ul li{ display: flex; align-items: baseline; display: flex; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: #555555; line-height: 1.3; margin-bottom: 7px; }
.sub.mendix .s5 .grid .row .rbx > ul li:last-of-type{ margin-bottom: 0; }
.sub.mendix .s5 .grid .row .rbx > ul li::before{ content: '‣'; margin-right: 10px; }

@media screen and (max-width: 1280px){
    .sub.mendix .s5{ padding: 120px 0; }
    .sub.mendix .s5 .grid .row .lbx dl dt{ font-size: 22px; }
    .sub.mendix .s5 .grid .row .lbx dl dd{ font-size: 16px; }
    .sub.mendix .s5 .grid .row .rbx{ padding: 20px 30px; }
    .sub.mendix .s5 .grid .row .rbx > ul li{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    .sub.mendix .s5{ padding: 70px 0; }
    .sub.mendix .s5 .grid{ gap: 10px; }
    .sub.mendix .s5 .grid .row{ gap: 10px; }
    .sub.mendix .s5 .grid .row .lbx dl dt{ font-size: 18px; }
    .sub.mendix .s5 .grid .row .lbx dl dd{ font-size: 14px; }
    .sub.mendix .s5 .grid .row .rbx{ padding: 20px 15px; }
    .sub.mendix .s5 .grid .row .rbx > ul li{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .sub.mendix .s5 .grid{ margin-top: 30px; }
    .sub.mendix .s5 .grid .row{ flex-direction: column; margin-bottom: 20px; }
    .sub.mendix .s5 .grid .row .lbx{ width: 100%; min-height: unset; padding: 20px 10px; border-radius: 16px; }
    .sub.mendix .s5 .grid .row .rbx{ width: 100%; border-radius: 16px; }
}


/* Digital Twin */

.cursor{ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; font-size: 18px; background: linear-gradient(135deg, #8ad1dd, #87e5ae); border-radius: 50%; z-index: 999999; position: fixed; pointer-events: none !important; transition: opacity 0.2s; transform: translate(-50%, -50%); opacity: 0; }
.cursor.show{ opacity: 1; }

.sub.dx .s1 .txt .tab a:not(.on):hover{ color: #8bd1de; }


.sub.digital{ width: 100%; position: relative; overflow: hidden; }
.sub.digital .s0{ width: 100%; height: 100vh; position: relative; }
.sub.digital .s0 .inner{ width: 100%; height: 100vh; position: relative; }
.sub.digital .s0 .inner .vidwrap{
    width: calc(480 / 1920 * 100%);
    height: 60%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 30px;
}
.sub.digital .s0 .inner .vidwrap iframe{
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #000;
}

@media screen and (max-width: 1280px){
    .sub.digital .s0 .inner .vidwrap{ width: 50%; }
}

@media screen and (max-width: 820px){
    .sub.digital .s0 .inner .vidwrap{ width: 80%; }
}


.sub.digital .s2{ width: 100%; position: relative; background-color: #f3fef9; padding-top: 50px; padding-bottom: 150px; }
.sub.digital .s2 .efflist{ margin-top: 80px; }
.sub.digital .s2 .efflist ul{ display: flex; gap: 20px; }
.sub.digital .s2 .efflist li{ border-radius: 22px; padding: 1px; box-sizing: border-box; position: relative; width: 100%; background: linear-gradient(135deg, #8ad1dd, #87e5ae); transition-duration: 0.4s; }
.sub.digital .s2 .efflist li .inn{ background-color: #fff; color: #222222; padding: 55px 40px; box-sizing: border-box; transition-duration: 0.4s; height: 440px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 21px; }
.sub.digital .s2 .efflist li .inn dl dt{ 
    font-size: 24px; font-weight: 700; letter-spacing: -0.03em;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #8bcfe3 0%, #87e5ae 100%);
}
.sub.digital .s2 .efflist li .inn dl dd{ font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: calc(50 / 36); margin-top: 20px; }
.sub.digital .s2 .efflist li .inn p{ font-size: 18px; letter-spacing: -0.03em; color: #555555; line-height: calc(30 / 18); color: #555555; transition-duration: 0.4s; }

.sub.digital .s2 .efflist li.on{ transform: translateY(-30px); }
.sub.digital .s2 .efflist li.on .inn{ color: #fff; background-color: rgba(255,255,255,0); }
.sub.digital .s2 .efflist li.on .inn dl dt{ filter: saturate(0) brightness(200); }
.sub.digital .s2 .efflist li.on .inn dl dd{ color: #fff; }
.sub.digital .s2 .efflist li.on .inn p{ color: #fff; }

@media screen and (max-width: 1280px){
    .sub.digital .s2 .efflist{ margin-top: 60px; }
    .sub.digital .s2 .efflist ul{ gap: 10px; }
    .sub.digital .s2 .efflist li .inn{ padding: 30px 15px; height: 330px; }
    .sub.digital .s2 .efflist li .inn dl dt{ font-size: 22px; }
    .sub.digital .s2 .efflist li .inn dl dd{ font-size: 22px; }
    .sub.digital .s2 .efflist li .inn p{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    .sub.digital .s2{ padding-bottom: 100px; padding-top: 10px; }
    .sub.digital .s2 .efflist ul{ flex-wrap: wrap; justify-content: center; }
    .sub.digital .s2 .efflist ul li{ width: calc((100% - (10px * 2)) / 3); }

    .sub.digital .s2 .efflist li.on{ transform: translateY(0); }
    .sub.digital .s2 .efflist li .inn{ padding: 20px 15px; height: 260px; }
    .sub.digital .s2 .efflist li .inn dl dt{ font-size: 18px; }
    .sub.digital .s2 .efflist li .inn dl dd{ font-size: 18px; }
    .sub.digital .s2 .efflist li .inn p{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .sub.digital .s2{ padding-bottom: 70px; }
    .sub.digital .s2 .efflist{ margin-top: 30px; }
    .sub.digital .s2 .efflist ul{ gap: 10px; }
    .sub.digital .s2 .efflist ul li{ width: calc(50% - 5px); border-radius: 15px; }
    .sub.digital .s2 .efflist li.on{ transform: translateY(0); }

    .sub.digital .s2 .efflist li .inn{ height: 200px; border-radius: 14px; }
    .sub.digital .s2 .efflist li .inn p{ font-size: 13px; }
    .sub.digital .s2 .efflist li .inn dl dt{ font-size: 16px; }
    .sub.digital .s2 .efflist li .inn dl dd{ font-size: 16px; margin-top: 10px; }
}

@media screen and (max-width: 350px){
    .sub.digital .s2 .efflist ul{ gap: 10px 0; max-width: 200px; margin: 0 auto; }
    .sub.digital .s2 .efflist ul li{ width: 100%; }
}



.sub.digital .s3{ position: relative; padding: 150px 0; }
.sub.dx .s3 .bg {
    width: 100%; height: 100%;
    z-index: -1;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    filter: blur(150px);
}
.sub.dx .s3 .bg .obj {
    width: 50vw; height: 50vw;
    max-width: 500px;
    max-height: 500px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.sub.dx .s3 .bg .obj._1 {
    top: 7%; left: -5%;
}
.sub.dx .s3 .bg .obj._2 {
    top: 45%; right: -3%;
}
.sub.dx .s3 .bg .obj canvas {
    width: 100%; height: 100%;
    display: block;
}

.sub.dx .s3 .flexwrap{ margin-top: 140px; display: flex; align-items: center; justify-content: space-between; }
.sub.dx .s3 .flexwrap .lbx{ width: 50%; padding-left: calc(80 / 1440 * 100%); box-sizing: border-box; padding-right: 20px; box-sizing: border-box; }
.sub.dx .s3 .flexwrap .lbx .listset{ margin-bottom: 55px; }
.sub.dx .s3 .flexwrap .lbx .listset:last-of-type{ margin-bottom: 0; }
.sub.dx .s3 .flexwrap .lbx .listset strong{ font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: calc(44 / 30); color: #222222; display: block; }
.sub.dx .s3 .flexwrap .lbx .listset ol{ margin-top: 15px; }
.sub.dx .s3 .flexwrap .lbx .listset ol li{ display: flex; align-items: baseline; margin-bottom: 5px; font-size: 20px; letter-spacing: -0.03em; color: #555555; line-height: 1.4; }
.sub.dx .s3 .flexwrap .lbx .listset ol li::before{ content: '‣'; margin-right: 6px; }
.sub.dx .s3 .flexwrap .lbx .listset ol li:last-of-type{ margin-bottom: 0; }
.sub.dx .s3 .flexwrap .rbx{ width: 50%; position: relative;  }


.sub.dx .vidWrap{ position: relative; width: 100%; padding:56.25% 0 0 0; cursor: pointer; background-color: #000; }
.sub.dx .vidWrap .control{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 1; background-color: rgba(0,0,0,0.6); transition-duration: 0.2s; }
.sub.dx .vidWrap .control .circle{ animation: 6s rot infinite linear; }

@keyframes rot {
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}


.sub.dx .vidWrap .control .center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.sub.dx .vidWrap .control .center > div{ transition-duration: 0.2s; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.sub.dx .vidWrap .control .center > div.pause{ opacity: 0; }
.sub.dx .vidWrap iframe{ position:absolute;top:0;left:0;width:100%;height:100%; z-index: 0; }

.sub.dx .vidWrap .control.hide{ opacity: 0; }

@media screen and (min-width: 821px){
    .sub.dx .vidWrap .control.hide:hover{ opacity: 1; }
}


.sub.dx .vidWrap .control.p .center > div.play{ opacity: 0; }
.sub.dx .vidWrap .control.p .center > div.pause{ opacity: 1; }

.sub.dx .s3 .flexwrap .rbx .smlist{ position: absolute; top: calc(100% + 15px); left: 0; display: flex; gap: 8px; width: 100%; }
.sub.dx .s3 .flexwrap .rbx .smlist li{ width: 100%; border-radius: 10px; background-color: #f3f3f3; color: #222222; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 13px; box-sizing: border-box; }
.sub.dx .s3 .flexwrap .rbx .smlist li span{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.03em; line-height: calc(18 / 14); text-align: center; }
.sub.dx .s3 .flexwrap .rbx .smlist li em{ display: block; text-align: center; padding: 10px; box-sizing: border-box; font-size: 12px; letter-spacing: -0.03em; font-weight: 600; line-height: calc(16 / 12); color: #fff; background: linear-gradient(135deg, #8ad1dd, #87e5ae); border-radius: 7px; margin-top: 10px; width: 100%; }


.sub.dx .s3 .flexwrap.p_bottom{ padding-bottom: 120px; }
.sub.dx .s3 .flexwrap.full{ display: block; position: relative; }
.sub.dx .s3 .flexwrap.full .rbx{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%); }

.sub.digital .s3 .slideWrap .imgslide{ width: 100%; cursor: none; }
.sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn{ width: 100%; }
.sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn .thumb{ width: 100%; }
.sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn .flex{ margin-top: 15px; display: flex; align-items: baseline; font-size: 18px; letter-spacing: -0.03em; justify-content: center; line-height: 1.3; }
.sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn .flex span{ color: #aaaaaa; display: block; margin-right: 10px; flex-shrink: 0; }
.sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn .flex p{ color: #222; }


@media screen and (max-width: 1280px){
    .sub.digital .s3{ padding: 120px 0; }
    .sub.dx .s3 .flexwrap{ margin-top: 70px; }
    .sub.dx .s3 .flexwrap .lbx{ padding-left: 3%; }
    .sub.dx .s3 .flexwrap .lbx .listset strong{ font-size: 24px; }
    .sub.dx .s3 .flexwrap .lbx .listset ol li{ font-size: 16px; }

    .sub.dx .s3 .flexwrap .rbx .smlist{ flex-wrap: wrap; justify-content: space-between; gap: 10px 0; width: 100%; position: static; margin-top: 10px; }
    .sub.dx .s3 .flexwrap .rbx .smlist li{ width: 49%; min-height: 100px; }
    .sub.dx .s3 .flexwrap.p_bottom{ padding-bottom: 0; }

    .sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn .flex{ font-size: 14px; }
    .sub.digital .s3 .slideWrap .imgslide .swiper-slide .inn .flex span{ margin-right: 5px; }
}

@media screen and (max-width: 820px){
    .sub.dx .s3 .flexwrap{ flex-direction: column; margin-top: 50px; }
    .sub.dx .s3 .flexwrap.p_bottom{ flex-direction: column-reverse; }
    .sub.dx .s3 .flexwrap.p_bottom .lbx{ margin-top: 50px; }

    .sub.dx .s3 .flexwrap .lbx{ width: 100%; padding: 0; margin-top: 30px; }
    .sub.dx .s3 .flexwrap .lbx .listset{ margin-bottom: 30px; }
    .sub.dx .s3 .flexwrap .lbx .listset strong{ font-size: 20px; }
    .sub.dx .s3 .flexwrap .lbx .listset ol li{ font-size: 14px; }

    .sub.dx .s3 .flexwrap .rbx{ width: 100%; }

    .sub.dx .s3 .flexwrap.full{ display: flex; flex-direction: column-reverse; }
    .sub.dx .s3 .flexwrap.full .rbx{ position: static; transform: translateY(0); width: 90%; margin: 0 auto;  }
    .sub.dx .s3 .flexwrap.full .lbx{ margin-top: 30px; }
    .sub.dx .s3 .slideWrap .imgslide{ overflow: visible; }
}

@media screen and (max-width: 500px){
    .sub.dx .s3 .flexwrap .lbx .listset strong{ font-size: 16px; }
}



/* salesforce */
.sub.salesforce .s2{ background-color: #f3fef9; padding-top: 50px; padding-bottom: 125px; }
.sub.salesforce .tabWrap{ margin-top: 60px; }

@media screen and (max-width: 1280px){
    .sub.salesforce .tabWrap{ margin-top: 30px; }
}

@media screen and (max-width: 820px){
    .sub.salesforce .s2{ padding-top: 10px; padding-bottom: 70px; }
}


.sub.salesforce .s3 .bg .obj._1{ top: 23%; }
.sub.salesforce .s3 .bg .obj._2{ top: 75%; }
.sub.salesforce .s3{ position: relative; padding: 200px 0; }
.sub.salesforce .s3 .iconlist{ margin-top: 50px; display: flex; flex-wrap: wrap; gap: 30px; padding-bottom: 250px; }
.sub.salesforce .s3 .iconlist li{ width: calc(33.33% - 60px/3); height: 280px; border-radius: 22px; background-color: #f3f3f3; color: #222; position: relative; overflow: hidden; }
.sub.salesforce .s3 .iconlist li::after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: linear-gradient(to right, #8bcfe3, #87e5ae); transition-duration: 0.4s; opacity: 0; }
.sub.salesforce .s3 .iconlist li .inn{ width: 100%; height: 100%; position: relative; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; }
.sub.salesforce .s3 .iconlist li .inn dl dt{ font-size: 24px; letter-spacing: -0.03em; font-weight: 600; line-height: calc(34 / 24); }
.sub.salesforce .s3 .iconlist li .inn dl dd{ font-size: 16px; letter-spacing: -0.03em; line-height: calc(24 / 16); margin-top: 20px; }
.sub.salesforce .s3 .iconlist li.on::after{ opacity: 1; }
.sub.salesforce .s3 .iconlist li.on{ color: #fff; }

.sub.salesforce .s3 .ssolabo{ margin-top: 60px; display: flex; align-items: center; padding-bottom: 250px; }
.sub.salesforce .s3 .ssolabo .side{ padding: 0 35px; box-sizing: border-box; width: calc(395 / 1660 * 100%); }
.sub.salesforce .s3 .ssolabo .side > ul li{ border-radius: 22px; overflow: hidden; position: relative; padding: 10px; box-sizing: border-box; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background-color: #f3f3f3; }
.sub.salesforce .s3 .ssolabo .side > ul li:last-of-type{ margin-bottom: 0; }
.sub.salesforce .s3 .ssolabo .side > ul li::after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: linear-gradient(to right, #8bcfe3, #87e5ae); opacity: 0; transition-duration: 0.4s; }
.sub.salesforce .s3 .ssolabo .side > ul li dl{ position: relative; z-index: 1; text-align: center; }
.sub.salesforce .s3 .ssolabo .side > ul li dl dt{ font-size: 24px; letter-spacing: -0.03em; font-weight: 600; line-height: 1.3; color: #222; transition-duration: 0.4s; }
.sub.salesforce .s3 .ssolabo .side > ul li dl dd{ font-size: 16px; letter-spacing: -0.03em; margin-top: 11px; line-height: calc(24 / 16); color: #555; transition-duration: 0.4s; }
.sub.salesforce .s3 .ssolabo .side > ul li.on::after{ opacity: 1; }
.sub.salesforce .s3 .ssolabo .side > ul li.on dl dt{ color: #fff; }
.sub.salesforce .s3 .ssolabo .side > ul li.on dl dd{ color: #fff; }

.sub.salesforce .s3 .ssolabo .center{ width: calc(810 / 1440 * 100%); }

@media screen and (max-width: 1280px){
    .sub.salesforce .s3{ padding: 120px 0; }
    .sub.salesforce .s3 .iconlist{ gap: 20px; padding-bottom: 120px; }
    .sub.salesforce .s3 .iconlist li{ height: 250px; width: calc(33.33% - 40px / 3); }
    .sub.salesforce .s3 .iconlist li .inn{ padding: 20px 15px; }
    .sub.salesforce .s3 .iconlist li .inn dl dt{ font-size: 20px; }
    .sub.salesforce .s3 .iconlist li .inn dl dd{ font-size: 14px; }

    .sub.salesforce .s3 .ssolabo{ padding-bottom: 120px; }
    .sub.salesforce .s3 .ssolabo .side{ padding: 0 10px; }
    .sub.salesforce .s3 .ssolabo .side > ul li dl dt{ font-size: 20px; }
    .sub.salesforce .s3 .ssolabo .side > ul li dl dd{ font-size: 14px; }
    .sub.salesforce .s3 .ssolabo .side > ul li dl dd br{ display: none; }
}

@media screen and (max-width: 820px){
    .sub.salesforce .s3 .iconlist{ gap: 20px 0; justify-content: space-between; }
    .sub.salesforce .s3 .iconlist li{ width: 48%; height: 220px; }
    .sub.salesforce .s3 .iconlist li .inn{ padding: 20px; }
    .sub.salesforce .s3 .iconlist li .inn dl dt{ font-size: 18px; }
    .sub.salesforce .s3 .iconlist li .inn dl dd{ margin-top: 10px; }

    .sub.salesforce .s3 .ssolabo{ flex-direction: column; margin-top: 40px; }
    .sub.salesforce .s3 .ssolabo .side{ width: 100%; padding: 0; }
    .sub.salesforce .s3 .ssolabo .side > ul{ width: 100%; display: flex; align-items: center; gap: 10px; }
    .sub.salesforce .s3 .ssolabo .side > ul li{ width: 100%; display: flex; align-items: center; margin-bottom: 0; }
    .sub.salesforce .s3 .ssolabo > .center{ width: 100%; margin: 20px 0; }
}


@media screen and (max-width: 500px){
    .sub.salesforce .s3{ padding: 70px 0; }
    .sub.salesforce .s3 .iconlist{ margin-top: 30px; padding-bottom: 70px; }
    .sub.salesforce .s3 .iconlist li{ width: 100%; height: auto; }
    .sub.salesforce .s3 .iconlist li .inn dl{ margin-top: 20px; }
    .sub.salesforce .s3 .ssolabo .side{ order: 3; margin-top: 10px; }
    .sub.salesforce .s3 .ssolabo .side:last-of-type ul{ flex-direction: column-reverse; }
    .sub.salesforce .s3 .ssolabo .side > ul{ flex-direction: column; }
    .sub.salesforce .s3 .ssolabo > .center{ order: 0; margin: 0; }
    
    .sub.salesforce .s3 .ssolabo .side > ul li{ height: 150px; }
    .sub.salesforce .s3 .ssolabo .side > ul li dl dt{ font-size: 18px; }
    .sub.salesforce .s3 .ssolabo .side > ul li dl dd{ font-size: 13spx; }
}



.sub.salesforce .s4{ position: relative; padding: 165px 0; }
.sub.salesforce .s4 .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
.sub.salesforce .s4 .bg img {width: 100%; height: 100%; object-fit: cover;}
.sub.salesforce .s4 .slideWrap{ margin-top: 70px; z-index: 1; position: relative; }
.sub.salesforce .s4 .slideWrap .protectsw{ width: 100%; overflow: visible; }
.sub.salesforce .s4 .slideWrap .protectsw .inn{ width: 100%; border-radius: 25px; border: 1px solid #dddddd; box-sizing: border-box; background-color: #fff; padding: 60px 45px; height: 435px; }
.sub.salesforce .s4 .slideWrap .protectsw .inn .flx{ display: flex; justify-content: space-between; align-items: flex-start; line-height: 1.3; }
.sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dt{ font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: #222222; }
.sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dd{ font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: #222222; margin-top: 6px; }

.sub.salesforce .s4 .slideWrap .protectsw .inn .flx .icon{
    display: flex; align-items: center; gap: 4px; font-size: 30px; font-weight: 500;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #8bcfe3 0%, #87e5ae 100%);
}

.sub.salesforce .s4 .slideWrap .protectsw .inn > ol{ margin-top: 30px;  }
.sub.salesforce .s4 .slideWrap .protectsw .inn > ol li{ margin-bottom: 5px; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: #555555; display: flex; align-items: baseline; line-height: calc(32 / 20); }
.sub.salesforce .s4 .slideWrap .protectsw .inn > ol li::before{ content: '‣'; margin-right: 8px; }

.sub.salesforce .s4 .bottompage{ max-width: 550px; margin: 0 auto; margin-top: 65px; width: 100%; }
.sub.salesforce .s4 .bottompage .bar{ width: 100%; position: relative; background-color: rgba(0,0,0,0.1); height: 3px; }
.sub.salesforce .s4 .bottompage .bar span{ display: block; width: 20%; height: 100%; background-color: #222222; position: absolute; left: 0; top: 0; }
.sub.salesforce .s4 .bottompage .fraction{ margin-top: 30px; display: flex; justify-content: center; gap: 25px; align-items: center; }
.sub.salesforce .s4 .bottompage .fraction .btn{ font-size: 24px; color: #222222; cursor: pointer; }
.sub.salesforce .s4 .bottompage .fraction .swiper-pagination{ font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: #d8e2e5; }
.sub.salesforce .s4 .bottompage .fraction .swiper-pagination .swiper-pagination-current{ color: #222; }

@media screen and (max-width: 1280px){
    .sub.salesforce .s4{ padding-bottom: 120px; }
    .sub.salesforce .s4 .slideWrap{ margin-top: 40px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn{ padding: 40px 30px; height: 365px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dt{ font-size: 28px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dd{ font-size: 16px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx .icon{ font-size: 26px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn > ol li{ font-size: 16px; }

    .sub.salesforce .s4 .bottompage{ margin-top: 40px; }
    .sub.salesforce .s4 .bottompage .fraction .swiper-pagination{ font-size: 24px; }
}

@media screen and (max-width: 820px){
    .sub.salesforce .s4{ padding: 70px 0; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn{ padding: 20px; height: 295px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dt{ font-size: 22px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dd{ font-size: 14px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx .icon{ font-size: 22px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn > ol li{ font-size: 14px; }

    .sub.salesforce .s4 .bottompage{ margin-top: 30px; }
    .sub.salesforce .s4 .bottompage .fraction{ gap: 15px; }
    .sub.salesforce .s4 .bottompage .fraction .swiper-pagination{ font-size: 20px; }
}

@media screen and (max-width: 500px){
    .sub.salesforce .s4 .slideWrap .protectsw .inn{ border-radius: 15px; height: 325px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dt{ font-size: 18px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx dl dd{ font-size: 13px; margin-top: 5px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn .flx .icon{ font-size: 18px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn > ol{ margin-top: 20px; }
    .sub.salesforce .s4 .slideWrap .protectsw .inn > ol li{ font-size: 13px; }

    .sub.salesforce .s4 .bottompage .fraction .swiper-pagination{ font-size: 16px; }
}