.mobile-720-version{display: none !important;}
.alert-phone {background: url('../images/resize.png') center center no-repeat;background-size: auto;background-size: contain;}
.mobile-image{display: none;}
.desktop-image{display: block;}

/* preloader */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0e5fba; z-index: 9999999; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.preloader-spinner { width: 50px; height: 50px; border: 4px solid #fff; border-top: 4px solid #0e5fba; border-radius: 50%; animation: spin 1s linear infinite; }
.preloader-progress { margin-top: 20px; width: 200px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.preloader-progress-bar { height: 100%; background: #0e5fba; width: 0%; }

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes floatMedium {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-15px) translateX(10px); }
  75% { transform: translateY(15px) translateX(-10px); }
}

@keyframes floatFast {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-30px); }
}

@keyframes floatWave {
  0%, 100% { transform: translateX(0px) translateY(0px); }
  33% { transform: translateX(-15px) translateY(-10px); }
  66% { transform: translateX(15px) translateY(-10px); }
}

/* Scroll Progress Bar */
#scroll-progress-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  z-index: 9999;
}

#scroll-progress-bar {
  height: 6px;
  background: #0e5fba;
  width: 0%;
}




body.loading { overflow: hidden; }
html,body { overflow: auto; -webkit-overflow-scrolling: auto; /* 或者直接唔加 */;overflow-x: hidden; }

/* Gobal */

main{background: #EEE;}
.qoute-wrap{margin: 80px auto;}
.qoute-wrap h3{
    font-size:38px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 20px;
    color: #9bc9e3;
}
.qoute-wrap h3 .word{
    display: inline-block;
    color: #9bc9e3;
}

.qoute-wrap-b h3,.qoute-wrap-b h3 .word{

    color: #b7afa6;
}
.qoute-wrap h6{font-style: normal;font-size: 15px;line-height: 1.6;color: #034ea2}
.qoute-wrap{padding-top: 40px;background: url('../images/dsg/icon-qoute.png') top left no-repeat;background-size: 30px;}
.section-title h4,
.section-title h3{
 font-weight: 700; color: #034ea2;
}
.cta-btn{padding-right: 30px;background: url('../images/dsg/ico_touch_black.png') center right no-repeat;background-size: 20px;display: inline-block;padding-right: 30px;padding-top: 10px;padding-bottom: 10px;}
.cta-btn-wrap{text-align: center;}

.ss4-carousel-wrap{display: none !important;}
.color-blue{color: #0e5fba;}
.photo-credit {position: relative;}
.carousel-block{position: relative;}
.carousel-block h6{
font-size: 10px;
  z-index: 2;
  position: absolute;
  font-family: 'Merriweather', serif;
  font-weight: normal !important;
  color: #FFF;
  bottom: 7px;
  left: 20px;
  text-shadow: 0px 0px 3px #000;text-align: left;}


/* footer */
.footer-credit{padding-bottom: 180px;}
.roc-banner{width: 100%;text-align: center;margin: 80px auto;}
.roc-banner img{width: 300px;}

/* ROC Banner - default desktop view */
.roc-banner-desktop{display: block;}
.roc-banner-mobile{display: none;}

/* kv */
#kv-wrap{padding-top: 280px;min-height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;}
.kv-inner{text-align: center;position: relative;z-index: 9;}
.kv-wrap p.merriweather{font-size: 18px ;line-height: 1.6;}
.scroll-btn{margin: 30px auto;width: 30px;}
.kv-title{margin-bottom: 80px;}

.kv-layer-1{width: 540px;height: 300px;background: #FFF;position: absolute;top: 260px;left: 50%;transform: translateX(-50%);opacity: 0;}
.kv-layer-2{width: 300px;height: 480px;background: #FFF;position: absolute;top: 180px;left: calc(50% + 480px);transform: translateX(-50%);z-index: 3;opacity: 0;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);}
.kv-layer-3{width: 300px;height: 480px;background: #034ea2;position: absolute;top: 195px;left: calc(50% + 490px);transform: translateX(-50%);z-index: 2;opacity: 0;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);}
.kv-layer-4{width: 280px;height: 280px;background: #EEE;position: absolute;top: 155px;left:calc(50% - 380px);transform: translateX(-50%);z-index: 3;opacity: 0;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);}
.kv-layer-5{width: 380px;height: 280px;background: #ccc;position: absolute;top: 395px;left:calc(50% - 480px);transform: translateX(-50%);z-index: 2;opacity: 0;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);}
.kv-layer-6{width: 80px;height: 280px;background: #034ea2;position: absolute;top: 300px;left:calc(50% - 300px);transform: translateX(-50%);z-index: 1;opacity: 0;}

.kv-inner h1 span{position: relative;}
.kv-inner h1 span span{position: absolute;width: 0;height: 100%;background: #fdf1f1;z-index: -1;left: -20px;}

/* section 1 */
.bg-1{background:#c4d9f2 ;position: relative;}
.cloud-bg{position: absolute;pointer-events: none;}
.cloud-1{top:1110px;left:40%;transform: translateX(-50%);}
.cloud-2{top:330px;left:50%;transform: translateX(-50%);}
.cloud-3{top:240px;left:0;z-index: 3;}
.cloud-4{top:140px;right:0;z-index: 3;}
.cloud-5{top:900px;right:0;z-index: 1;}
.cloud-6{bottom:200px;right:0;z-index: 3;}
.cloud-7{bottom:200px;right:0;z-index: 3;}
.cloud-8{bottom:800px;left:50%;transform: translateX(-50%);z-index: 3;}
.cloud-9{bottom:800px;left:0;z-index: 3;}
.cloud-10{bottom:300px;left:0;z-index: 3;}
.cloud-11{bottom:340px;left:50%;transform: translateX(-50%);z-index: 3;}
.cloud-12{bottom:420px;left:25%;transform: translateX(-50%);z-index: 3;}
.cloud-13{bottom:900px;left: -110px;  z-index: 1;  width: 500px;}
.cloud-14{bottom: -280px;  right: 0%;  z-index: 1;  width: 400px;}
.cloud-15{bottom: 1280px;  right: 0%;  z-index: 1;  width: 400px;}
.cloud-16{bottom: -4680px;  right: 0%;  z-index: 1;  width: 400px;}
.cloud-17{bottom: -3580px;  right: 0%;  z-index: 1;  width: 400px;}
.cloud-18{bottom: -3480px;  left: 0%;  z-index: 1;  width: 400px; animation: floatSlow 6s ease-in-out infinite;}
.cloud-19 {  bottom: -920px;  right: 10%;  z-index: 1;   width: 72vw; animation: floatMedium 8s ease-in-out infinite;}
.cloud-20 {  bottom: -5080px;  left: 0%;  z-index: 1;   width: 72vw; animation: floatFast 5s ease-in-out infinite;}
.cloud-21 {  bottom: -400px;  left: -5%;  z-index: 1;   width: 42vw; animation: floatWave 7s ease-in-out infinite;}

#section-1{padding-bottom: 120px;overflow: visible;}
#section-1 .context{z-index: 2;position: relative;}

.bg-1.active .ss1-graph img{transform: scale(1.2) !important;}
.bg-1.active .cloud-6,.bg-1.active .cloud-7, .bg-1.active .cloud-8, .bg-1.active .cloud-11{transform: translateY(-1200px) !important;opacity: 0 !important;}
.bg-1.active .cloud-9, .bg-1.active .cloud-10, .bg-1.active .cloud-12{transform: translateY(-1200px) !important;opacity: 0 !important;}

.graph-title{position: relative;text-align: center;padding: 6px 0 1px;}
.graph-title h5{color:#034ea2;z-index: 8;position: relative;}
.graph-title span{content: "";position: absolute;top: 8px;left: 8px;width: calc(100% + 10px);height: calc(100% - 3px);background: #fdf1f1;z-index: 0;}
.ss1-graph{position: relative;margin-top: -10vw;}
.ss1-graph-obj{position: absolute;text-align: center;z-index: 2;}
.ss1-graph-obj span{background: #FFF;padding: 0 8px;}
.ss1-graph-obj .ss1-icon{width: 40px;height: 40px;background: #FFF;border-radius: 100%;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin:0 auto 8px auto;position: relative;overflow: visible;}
.ss1-graph-obj .ss1-icon::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;border-radius: 100%;background: rgba(255, 255, 255, 0.6);animation: radarPulse 2s ease-out infinite;z-index: -1;}
.ss1-graph-obj h5,.ss3-graph-obj h5{font-size: 13px ;font-family: "Montserrat", sans-serif !important;font-weight: bold;}
.ss1-graph-obj.active{z-index: 1;}


@keyframes radarPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.ss1-graph-obj span,
.ss1-graph-obj .ss1-icon,
.ss2-graph-obj span,
.ss2-graph-obj .ss2-icon,
.ss3-graph-obj span,
.ss3-graph-obj .ss3-icon,
.ss4-info-box span{transition: all 0.3s ease}

.ss1-graph-obj.active span,
.ss1-graph-obj.active .ss1-icon,
.ss1-graph-obj:hover span,
.ss1-graph-obj:hover .ss1-icon,
.ss2-graph-obj.active span,
.ss3-graph-obj.active span,
.ss3-graph-obj.active .ss3-icon,
.ss4-info-box.active span{background-color: #ffc6c6 !important;}

.ss2-graph-obj .ball {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
 
  background: rgba(255, 255, 255, 0.6);
  animation: radarPulse2 2s ease-out infinite;
  z-index: -1;
}
@keyframes radarPulse2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}
.ss1-graph-obj-1{top: 33%;  left: 58%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;cursor: pointer;}
.ss1-graph-obj-1::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss1-graph-obj-1::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss1-graph-obj-1.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss1-graph-obj-1.active::after{width: calc(var(--line-width) * 2);transition: width 0.4s ease 0.4s;}

.ss1-graph-obj-2{top: 40%;  left: 45%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;cursor: pointer;}
.ss1-graph-obj-2::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss1-graph-obj-2::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss1-graph-obj-2.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss1-graph-obj-2.active::after{width: calc(var(--line-width) * 2);transition: width 0.4s ease 0.4s;}

.ss1-graph-obj-3{top: 48%;  left: 56%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;cursor: pointer;}
.ss1-graph-obj-3::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss1-graph-obj-3::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss1-graph-obj-3.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss1-graph-obj-3.active::after{width: calc(var(--line-width) * 2);transition: width 0.4s ease 0.4s;}

.ss1-graph-obj-4{top: 58%;  left: 34%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;cursor: pointer;}
.ss1-graph-obj-4::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss1-graph-obj-4::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));left: calc(50% - 1px);z-index: -1;transition: none;}
.ss1-graph-obj-4.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss1-graph-obj-4.active::after{width: 250px;transition: width 0.4s ease 0.4s;}

.ss1-graph-obj-5{top: 54%;left: 86%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;cursor: pointer;}
.ss1-graph-obj-5::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss1-graph-obj-5::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss1-graph-obj-5.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss1-graph-obj-5.active::after{width: 30vw ;transition: width 0.4s ease 0.4s;}

.ss1-graph-obj-6{top: 68%;  left: 48%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;cursor: pointer;}
.ss1-graph-obj-6::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss1-graph-obj-6::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: 50px;right: calc(50% - 1px);z-index: -1;transition: none;}
.ss1-graph-obj-6.active::after{width: 40px;transition: width 0.4s ease;bottom: 50px;left:50%;right: auto}
.ss1-graph-obj-6.active::before{height: var(--line-height);transition: height 0.4s ease 0.4s;bottom: 50px;left:calc( 50% + 40px);right: auto}



.ss1-graph-b-info{height: 0;overflow: hidden;transition: height 0.4s ease;}
.ss1-graph-b-info.active{height: 530px;}
.ss1-graph-b-infolist{padding: 0;margin: 0;;}
.ss1-graph-b-infolist li{list-style: none;background: #FFF;border-radius:12px;display: none;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);overflow: hidden;}
.ss1-graph-b-infolist li.active{display: block;animation: popupEffect 0.5s ease forwards;}

@keyframes popupEffect {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.ss1-graph-b-infolist .inner{padding: 20px;}
.ss1-graph-b-infolist  p{font-size: 13px;}
.ss1-graph-b-infolist  h6{margin-bottom: 4px;font-weight: bold;font-size: 14px;}

.graph-title .top-bar{position: absolute;width: 100%;height: 3px;background: #034ea2;z-index: 9;top:0;left: 0;}
.graph-title .bottom-bar{position: absolute;width: 100%;height: 3px;background: #034ea2;z-index: 9;bottom:0;left: 0;}
.graph-title .left-bar{position: absolute;width: 3px;height: 100%;background: #034ea2;z-index: 9;left: 0;top: 0;}
.graph-title .right-bar{position: absolute;width: 3px;height: 100%;background: #034ea2;z-index: 9;right: 0;top: 0;}

/* section 2 */
.bg-2{background:#c4d9f2 url('../images/dsg/ss2-bg.jpg') top center repeat;background-size: 100% auto;;;position: relative;}

#section-2{padding-top: 60px;z-index: 4;}

#section-2 .section-title{position: relative;margin-left: 20px;margin-bottom: 90px;}
#section-2 .section-title h4{margin-left: -60px;z-index: 8;position: relative;margin-bottom: 0;}
#section-2 .section-title h3{margin-left: 80px;z-index: 8;position: relative;}
#section-2 .section-title  .title-bg-a{position: absolute;width: 100%;height: 75px;background: url('../images/dsg/title-bg.jpg') center center no-repeat;background-size: 100%   auto;left: -85px;top: -10px;z-index: 2;}
#section-2 .section-title  .title-bg-b{position: absolute;width: 430px;  height: 140px;background: url('../images/dsg/title-bg.jpg') center center no-repeat;background-size: 100%   auto;right: 15px;bottom: -10px;z-index: 1;}

.ss2-graph-a {position: relative;}
.ss2-graph-a .context{position: absolute;bottom: 20px;width: 100%;z-index: 9;}
.ss2-graph-inner{width: 100%;height: 100vh;position: relative;}
.ss2-skyline-layer{position: absolute;width: 100%;min-width: 1200px;height:100%;top: 0;left: 50%;transform: translateX(-50%);background-size: contain;background-position: center center;background-repeat: no-repeat;opacity: 0;transition: opacity 0.5s ease;will-change: opacity;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform: translateX(-50%) translateZ(0);transform: translateX(-50%) translateZ(0);}
.ss2-skyline-layer.active{opacity: 1;}
.ss2-graph-a .bottom-cloud{position: absolute;width: 100%;min-width: 1200px;height:100%;top: 0;left: 50%;transform: translateX(-50%);background: url('../images/dsg/ss2-graph-a-clouds.png') center center no-repeat;background-size: 100% auto;z-index: 9;top:25%;pointer-events: none;}
.ss2-graph-a .bottom-cloud-color{position: absolute;width: 120%;height:100%;top: 0;left:-10% ;background: #72b7d9;z-index: 0;pointer-events: none;filter: blur(50px);border-radius: 20%;opacity: .7;}

.ss2-carousel-wrap {
  margin-left: -10%;
  width: 120%;
}
.ss2-owl-slider::before {
  content: "　";
  position: absolute;
  width: 30%;
  left: 0;
top: 0%;
  height: 100%;
  background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  z-index: 9;
  pointer-events: none;
  filter: blur(20px);
}
.ss2-owl-slider::after {
  content: "　";
  position: absolute;
  width: 30%;
  right: 0;
top: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  z-index: 9;
  pointer-events: none;
  filter: blur(20px);
}

.owl-theme .owl-nav [class*="owl-"] {font-size: 28px;line-height: 1;width: 40px !important;height: 40px !important;text-align: center;}
.ss2-carousel-wrap{padding-bottom: 40px ;position: relative;}
.ss2-carousel{ display: flex; align-items: center; justify-content: center;}
.ss2-owl-slider {  margin: 0 auto;position: relative;}
.ss2-carousel .owl-stage-outer{padding-bottom: 160px;padding-top: 40px;}
.ss2-owl-slider .item {    padding: 10px;    text-align: center;    transition: all 0.3s ease;}
.ss2-owl-slider .item img {    width: 100%;    height: auto;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    transition: transform 0.3s ease, box-shadow 0.3s ease;}
.ss2-owl-slider .owl-item.center .item {    transform: scale(1.1);}
.ss2-owl-slider .owl-item.center .item img {    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);}
.ss2-carousel-caption{position: absolute;width: 100%;bottom: 120px;}

.owl-item{opacity: .8;}
.owl-item.center{opacity: 1;}
.owl-item{padding: 20px 0}
.owl-item .carousel-block{transition:  all .6s cubic-bezier(0.65, 0, 0.35, 1);box-shadow: 2px 2px 10px rgba(0,0,0,.5);transform: scale(.9)}
.carousel-block{width: 100%;aspect-ratio: 16 / 10;opacity: .4;}

.owl-item.center {z-index: 9}
.owl-item.center .carousel-block{z-index: 2;opacity: 1;transform: scale(1)}

/* Navigation arrows for ss2-owl-slider */
.ss2-owl-slider .owl-nav{position: absolute;width: 36%;left: 50%;top: 35%;transform: translate(-50%, -50%);z-index: 100;}
.ss2-owl-slider .owl-nav button{position: absolute;width: 50px;height: 50px;background: #FFF !important;border-radius: 50%;color: #034ea2 !important;font-size: 32px;line-height: 50px;text-align: center;transition: all 0.3s ease;border: none;cursor: pointer;pointer-events: auto;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);z-index: 101;}
.ss2-owl-slider .owl-nav button:hover{background: #f0f0f0 !important;transform: scale(1.1);box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);}
.ss2-owl-slider .owl-nav button.owl-prev{left: 0;}
.ss2-owl-slider .owl-nav button.owl-next{right: 0;}
.ss2-owl-slider .owl-nav button span{display: block;margin-top: -4px;}
.owl-theme .owl-nav [class*="owl-"] {width: 30px;height: 30px;border-radius: 100%;box-shadow: 2px 2px 5px #333;background: #FFF;opacity: 1 !important;;}
.owl-theme .owl-nav span{color: #000 !important;}
.ss2-owl-slider .owl-nav .owl-prev{left: -100px !important;position: absolute;}
.ss2-owl-slider .owl-nav .owl-next{right: -100px !important;position: absolute;}
.owl-theme .owl-nav [class*="owl-"]:hover {background-color: #034ea2 !important;}
.owl-theme .owl-nav [class*="owl-"]:hover span{color: #FFF !important;}
.owl-theme .owl-nav .disabled{display: none !important;}
.ss2-graph-b{position: relative;margin-top: -23vw;}
.ss2-graph-obj{position: absolute;text-align: center;cursor: pointer;}
.ss2-graph-obj span{background: #FFF;padding: 0 8px;}
.ss2-graph-obj h5,.ss4-info-box h5{font-size: 14px;font-family: "Montserrat", sans-serif !important;
  font-weight: bold;}

.cloud-4.cssb{position: absolute;bottom: -100px;right: 0;top:auto;width: 600px;left: auto; transform: 0 !important;z-index: 3;}
.cloud-2.cssb{position: absolute;bottom: -300px;left: 50%;transform: translateX(-50%);top:auto;width: 600px;z-index: 2;}
.cloud-3.cssb{position: absolute;bottom: -100px;left: 0;top:auto;width: 500px;z-index: 3;}


.ss1-graph .cloud-4.cssb{position: absolute;bottom: -220px;right: 0;top:auto;width: 600px;left: auto; transform: 0 !important;z-index: 2;}
.ss1-graph .cloud-2.cssb{position: absolute;bottom: -400px;left: 50%;transform: translateX(-50%);top:auto;width: 600px;z-index: 2;}
.ss1-graph .cloud-3.cssb{position: absolute;bottom: -90px;left: -100px;top:auto;width: 500px;z-index:2;}


.ss2-graph-a .cloud-4.cssb{position: absolute;bottom: -220px;right: 0;top:auto;width: 600px;left: auto; transform: 0 !important;z-index: 2;}
.ss2-graph-a .cloud-2.cssb{position: absolute;bottom: -400px;left: 50%;transform: translateX(-50%);top:auto;width: 600px;z-index: 2;}
.ss2-graph-a .cloud-3.cssb{position: absolute;bottom: -90px;left: -100px;top:auto;width: 500px;z-index:2;}

.ss2-graph-obj-1{top: 45%;  left: 56%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss2-graph-obj-1::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss2-graph-obj-1::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss2-graph-obj-1.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss2-graph-obj-1.active::after{width: 300px;transition: width 0.4s ease 0.4s;}

.ss2-graph-obj-2{top: 43%;  left: 33%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss2-graph-obj-2::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss2-graph-obj-2::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));left: calc(50% - 1px);z-index: -1;transition: none;}
.ss2-graph-obj-2.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss2-graph-obj-2.active::after{width: 250px;transition: width 0.4s ease 0.4s ;}

.ss2-graph-obj-3{top: 58%;  left: 34%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss2-graph-obj-3::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss2-graph-obj-3::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss2-graph-obj-3.active::after{width: 100px;transition: width 0.4s ease;bottom: 20px;left:50%;right: auto}
.ss2-graph-obj-3.active::before{height: var(--line-height);transition: height 0.4s ease 0.4s;bottom: 20px;left:calc( 50% + 100px);right: auto}

.ss2-graph-obj-4{top: 43%;  left: 23%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss2-graph-obj-4::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss2-graph-obj-4::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));left: calc(50% - 1px);z-index: -1;transition: none;}
.ss2-graph-obj-4.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss2-graph-obj-4.active::after{width: 300px;transition: width 0.4s ease 0.4s;}

.ss2-graph-c{width: 100vw;height: 100vh;position: relative;}
.ss2-graph-c::after{content: '';position: absolute;bottom: -10vw;left: 0;width: 100%;height: 300px;background: linear-gradient(to top, rgba(231,224,218,1) 0%, rgba(231,224,218,0) 100%);pointer-events: none;z-index: 10;}
.ss2-zoom{position: absolute;width: auto;height: 820px;width: 974px;;top:50%;left: 50%;transform: translate(-50%,-50%);z-index: 3;}

.ss2-zoom-obj{position: absolute;overflow: hidden;}
.ss2-zoom-1{width: 485px;height: 240px;left: calc(50% - 167px);top:0;background: url('../images/dsg/ss2-zoom-1.jpg') center center no-repeat;background-size: cover;}
.ss2-zoom-2{width: 230px;height: 255px;left: 0;top: calc(50% - 100px);background: url('../images/dsg/ss2-zoom-3.jpg') center center no-repeat;background-size: cover;}
.ss2-zoom-3{width: 232px;height: 257px;right: 0;top: calc(50% - 102px);background: url('../images/dsg/ss2-zoom-2.jpg') center center no-repeat;background-size: cover;}
.ss2-zoom-4{width: 480px;height: 240px;left: calc(50% - 340px);bottom: 0;background: url('../images/dsg/ss2-zoom-4.jpg') center center no-repeat;background-size: cover;}
.ss2-zoom-5{width: 330px;height: 220px;right: 0;bottom: 20px;background: url('../images/dsg/ss2-zoom-5.jpg') center center no-repeat;background-size: cover;}
.ss2-zoom-c{width: 480px;height: 310px;;left: calc(50% - 240px);top: calc(50% - 155px);}
.ss2-zoom-c-img{position: absolute;width: 100%;height: 100%;background: url('../images/dsg/ss2-zoom-c.jpg') top center no-repeat;background-size: cover; transform: scale(1.2) ;transform-origin: center center;}
.ss2-zoom-c h6{font-size: 6px;  z-index: 2;  position: absolute;  color: #FFF;  bottom: 0; left:20px;  text-shadow: 0px 0px 3px #000;}
.ss2-graph-b-info{height: 0;overflow: hidden;transition: height 0.4s ease;}
.ss2-graph-b-info.active{height: 530px;}
.ss2-graph-b-infolist{padding: 0;margin: 0;;}
.ss2-graph-b-infolist li{list-style: none;background: #FFF;border-radius:12px;display: none;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);overflow: hidden;}
.ss2-graph-b-infolist li.active{display: block;animation: popupEffect 0.5s ease forwards;}
.ss2-graph-b-infolist .inner{padding: 20px;}
.ss2-graph-b-infolist  p{font-size: 13px;}
.ss2-graph-b-infolist  h6{margin-bottom: 4px;font-weight: bold;font-size: 14px;}





/* section 3 */
.bg-3{background:#e7e0da url('../images/dsg/ss3-bg.jpg') top center repeat;background-size: 100% auto;position: relative;}

#section-3{padding-top: 120px;}
#section-3 .section-title{position: relative;margin-left: 20px;margin-bottom: 90px;}
#section-3 .section-title h4{margin-left: -80px;z-index: 8;position: relative;margin-bottom: 0;}
#section-3 .section-title h3{margin-left: 80px;z-index: 8;position: relative;}
#section-3 .section-title  .title-bg-a{position: absolute;width: 90%;height: 80px;background: url('../images/dsg/title-bg.jpg') center center no-repeat;background-size: 100%   auto;left: -105px;top: -10px;z-index: 2;}
#section-3 .section-title  .title-bg-b{position: absolute;width: 430px;  height: 140px;background: url('../images/dsg/title-bg.jpg') center center no-repeat;background-size: 100%   auto;right: 15px;bottom: -10px;z-index: 1;}
#section-3 .section-title  .title-bg-a .border-1{position: absolute;left: -8px;top:30px;width: 7px;height: 50px;background: #034ea2;}
#section-3 .section-title  .title-bg-b .border-1{position: absolute;left: -8px;top:30px;width: 7px;height: 90px;background: #034ea2;}
#section-3 .section-title  .title-bg-b .border-2{position: absolute;right: -8px;top:0;width: 7px;height: 120px;background: #034ea2;}
#section-3 .section-title  .title-bg-b .border-3{position: absolute;right: -8px;top:0;width: 120px;height: 7px;background: #034ea2;}


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ss3-inner-graph-icon{position: absolute;right: -100px;width: 200px !important;top:20%;animation: bounce 2s ease-in-out infinite;}
.ss3-graph-a{width: 100vw;height: 100vh;position: relative;display: flex;flex-direction: column;padding-top: 80px;}
.ss3-graph-inner{width: 100%;flex: 1;position: relative;}
.ss3-ai-layer{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-size: cover;background-position: center center;background-repeat: no-repeat;opacity: 0;transition: opacity 0.5s ease;}
.ss3-ai-layer.active{opacity: 1;}
.ss3-graph-a .context{width: 100%;padding: 20px 0;flex-shrink: 0;}
.ss3-graph-bg{position: relative;}
.ss3-graph-bg::before{content: '　';position: absolute;width: 100%;height: 100px;top: 0;left: 0;}
.ss3-graph-bg::before{background: url('../images/dsg/ss3-bg-bottom.png') top center no-repeat;background-size: 100% 100%;}
.ai-watermark{position: absolute;right: 0;top:0;width: 260px;z-index: 9;;}

.ss3-graph-b{position: relative;margin-top: -4vw;}
.ss3-graph-b.active{margin-top: -200px;}
.ss3-graph-obj{position: absolute;text-align: center;cursor: pointer;}
.ss3-graph-obj .ss3-icon{width: 40px;height: 40px;background: #FFF;border-radius: 100%;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin:0 auto 8px auto;position: relative;overflow: visible;}
.ss3-graph-obj .ss3-icon::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;border-radius: 100%;background: rgba(255, 255, 255, 0.6);animation: radarPulse 2s ease-out infinite;z-index: -1;}
.ss3-graph-obj span{background: #FFF;padding: 0 8px;}

.ss3-graph-obj-1{top:30%;left:68%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss3-graph-obj-1::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss3-graph-obj-1::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss3-graph-obj-1.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss3-graph-obj-1.active::after{width: 300px;transition: width 0.4s ease 0.4s;}

.ss3-graph-obj-2{top: 63%;  left: 74%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss3-graph-obj-2::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss3-graph-obj-2::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss3-graph-obj-2.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss3-graph-obj-2.active::after{width: 300px;transition: width 0.4s ease 0.4s;}

.ss3-graph-obj-3{top:72%;left: 47%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss3-graph-obj-3::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss3-graph-obj-3::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));right: calc(50% - 1px);z-index: -1;transition: none;}
.ss3-graph-obj-3.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss3-graph-obj-3.active::after{width: var(--line-width);transition: width 0.4s ease 0.4s;}

.ss3-graph-obj-4{top: 53%;left: 24%;transform: translate(-50%, -50%);--line-height: 200px;--line-width: 100px;}
.ss3-graph-obj-4::before{content: '';position: absolute;width: 2px;height: 0;background: #034ea2;bottom: 100%;left: 50%;transform: translateX(-50%);z-index: -1;transition: none;}
.ss3-graph-obj-4::after{content: '';position: absolute;height: 2px;width: 0;background: #034ea2;bottom: calc(100% + var(--line-height));left: calc(50% - 1px);z-index: -1;transition: none;}
.ss3-graph-obj-4.active::before{height: var(--line-height);transition: height 0.4s ease;}
.ss3-graph-obj-4.active::after{width: 300px;transition: width 0.4s ease 0.4s;}


.ss3-graph-b-info{height: 0;overflow: hidden;transition: height 0.4s ease;pointer-events: none;}
.ss3-graph-b-info.active{height: 530px;}
.ss3-graph-b-infolist{padding: 0;margin: 0;;}
.ss3-graph-b-infolist li{list-style: none;background: #FFF;border-radius:12px;display: none;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);overflow: hidden;}
.ss3-graph-b-infolist li.active{display: block;animation: popupEffect 0.5s ease forwards;pointer-events: auto;}
.ss3-graph-b-infolist .inner{padding: 20px;}
.ss3-graph-b-infolist  p{font-size: 13px;}
.ss3-graph-b-infolist  h6{margin-bottom: 4px;font-weight: bold;font-size: 14px;}


.ss3-graph-c{width: 100vw;height: 100vh;position: relative;pointer-events: none;}
.ss3-graph-c::after{content: '';position: absolute;bottom: -10px;left: 0;width: 100%;height: 300px;background:url('../images/dsg/ss4-bg.png') bottom center no-repeat;background-size: 100% 100%;pointer-events: none;z-index: 10;}
.ss3-zoom{position: absolute;width: auto;height: 820px;width: 974px;;top:50%;left: 50%;transform: translate(-50%,-50%);;;}

.ss3-zoom-obj{position: absolute;overflow: hidden;}
.ss3-zoom-1{width: 485px;height: 240px;left: calc(50% - 167px);top:0;background: url('../images/dsg/ss3-zoom-1.jpg') right bottom no-repeat;background-size: cover;}
.ss3-zoom-2{width: 230px;height: 255px;left: 0;top: calc(50% - 100px);background: url('../images/dsg/ss3-zoom-2.jpg') center center no-repeat;background-size: cover;}
.ss3-zoom-3{width: 232px;height: 257px;right: 0;top: calc(50% - 102px);background: url('../images/dsg/ss3-zoom-3.jpg') center center no-repeat;background-size: cover;}
.ss3-zoom-4{width: 480px;height: 240px;left: calc(50% - 340px);bottom: 0;background: url('../images/dsg/ss3-zoom-4.jpg') center center no-repeat;background-size: cover;}
.ss3-zoom-5{width: 330px;height: 220px;right: 0;bottom: 20px;background: url('../images/dsg/ss3-zoom-5.jpg') center center no-repeat;background-size: cover;}
.ss3-zoom-c{width: 480px;height: 310px;left: calc(50% - 240px);top: calc(50% - 155px);}
.ss3-zoom-c-img{position: absolute;width: 100%;height: 100%;background: url('../images/dsg/ss3-zoom-c.jpg') center center no-repeat;background-size: cover; transform: scale(1.2) ;transform-origin: center center;}



/* section 4 */
.bg-4{background:#e7e0da url('../images/dsg/ss4-bg.jpg') top center repeat;background-size: 100% auto;position: relative;}

.ss4-bgobj{position: absolute;}
.ss4-bg1{top: 1800px;  left: calc(50% - 680px);width:280px;z-index: 12;}
.ss4-bg2{bottom: -180px;left: calc(50% - 480px);width:180px;}
.ss4-bg3{bottom: 480px;right: calc(50% - 480px);width:180px;}
.ss4-bg4{bottom: -30px;right: 0;width: 250px;}
.ss4-bg5{top: -80px;left: 0;width: 280px;}
.ss4-bg6{top: 40%;right: 100px;width: 150px;}
.ss4-bg7{width: 100%;top:0px;left:0}
.ss4-bg8{width: 100%;bottom:0;left:0}




#section-4{padding-top: 20px;}
#section-4 .section-title{position: relative;margin-left: -20px;margin-bottom: 90px;}
#section-4 .section-title h4{margin-left: -20px;z-index: 8;position: relative;margin-bottom: 0;}
#section-4 .section-title h3{margin-left: 40px;z-index: 8;position: relative;}
#section-4 .section-title  .title-bg-a{position: absolute;width: 90%;height: 80px;background: url('../images/dsg/title-bg.jpg') center center no-repeat;background-size: 100%   auto;left: -55px;  top: -2px;z-index: 2;}
#section-4 .section-title  .title-bg-b{position: absolute;width: 460px;  height: 90px;background: url('../images/dsg/title-bg.jpg') center center no-repeat;background-size: 100%   auto;right: 15px;bottom: -10px;z-index: 1;}
#section-4 .section-title  .title-bg-a .border-1{position: absolute;left: -8px;top:30px;width: 7px;height: 50px;background: #034ea2;}
#section-4 .section-title  .title-bg-a .border-2{position: absolute;left: -8px;bottom:0;width: 20px;height: 7px;background: #034ea2;}
#section-4 .section-title  .title-bg-b .border-1{position: absolute;right: -8px;top:30px;width: 7px;height: 60px;background: #034ea2;}

.ss4-owl-slider::before {
  content: "　";
  position: absolute;
  width: 30%;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(-90deg, rgba(236,236,236,0) 0%, rgba(236,236,236,1) 100%);
  z-index: 9;
  pointer-events: none;
}
.ss4-owl-slider::after {
  content: "　";
  position: absolute;
  width: 30%;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(236,236,236,0) 0%, rgba(236,236,236,1) 100%);
  z-index: 9;
  pointer-events: none;
}

.ss4-owl-slider .item{background: none !important;}
.ss4-owl-slider .item h6{font-size: 10px;margin-top: 10px;}

.ss4-carousel-wrap{padding-bottom: 40px ;position: relative;}
.ss4-carousel{width: 100vw; display: flex; align-items: center; justify-content: center;}
.ss4-owl-slider {width: 100%;     margin: 0 auto;position: relative;}
.ss4-carousel .owl-stage-outer{padding-bottom: 120px;padding-top: 40px;}
.ss4-owl-slider .item {    padding: 20px;    text-align: left;    transition: all 0.3s ease;}
.ss4-owl-slider .item img {  background: #FFF;  width: 100%;    height: auto;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    transition: transform 0.3s ease, box-shadow 0.3s ease;}
.ss4-owl-slider .owl-item.center .item {    transform: scale(1.1);}
.ss4-owl-slider .owl-item.center .item img {    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);}
.ss4-carousel-caption{position: absolute;width: 100%;bottom: 120px;}
.ss4-carousel-wrap .owl-dots{display: block !important;}

.ss4-owl-slider .owl-item{opacity: 1;}
.ss4-owl-slider .owl-item img{opacity: .8;}
.ss4-owl-slider .owl-item.center .item img{opacity: 1;}
.ss4-owl-slider .owl-item .item{position: relative;}
.ss4-owl-slider .owl-item .item::before{content: "";position: absolute;width: calc(100% - 40px);height: calc(100% - 40px);z-index: 1;top: 20px;left: 20px;z-index: -1;}

/* Navigation arrows for ss4-owl-slider */
.owl-nav.disabled{display: block !important;}
.ss4-owl-slider .owl-nav{position: absolute;width: 26%;left: 50%;top: 40%;transform: translate(-50%, -50%);z-index: 100;}
.ss4-owl-slider .owl-nav button{position: absolute;width: 50px !important;height: 50px !important;background: #FFF !important;border-radius: 50% !important;color: #034ea2 !important;font-size: 32px;line-height: 50px;text-align: center;transition: all 0.3s ease;border: none;cursor: pointer;pointer-events: auto;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;z-index: 101;}
.ss4-owl-slider .owl-nav button:hover{background: #f0f0f0 !important;transform: scale(1.1);box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;}
.ss4-owl-slider .owl-nav .owl-prev{left: -100px !important;position: absolute;}
.ss4-owl-slider .owl-nav .owl-next{right: -100px !important;position: absolute;}
.ss4-owl-slider .owl-nav button span{display: block;margin-top: -4px;color: #034ea2 !important;}

.ss4-graph-wrap{width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;}
.ss4-graph{aspect-ratio: 4 / 3;margin-top: 0px;height: 100vh;position: relative;display: flex;align-items: center;justify-content: center;}
.ss4-graph>img{width: 100%;height: auto;object-fit: cover;}
.ss4-graph-bg{position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 1;}
.ss4-graph-bg>img{width: 100%;height: 100vh;object-fit: cover;image-rendering: -webkit-optimize-contrast;image-rendering: high-quality;backface-visibility: hidden;transform: translateZ(0);}

.ss4-info-box-wrap{position: absolute;width: 100%;height: 100%;top:0;left: 0;}
.ss4-info-box{position: absolute;left: 50%;bottom: 50%;transform: translate(-50%,-50%);text-align: center;z-index: 2;cursor: default;}
.ss4-img-overlay{position: absolute;top:0;left: -1000%;width: 3000%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 3;pointer-events: none;opacity: 0;transition: opacity 0.3s ease;}
.ss4-img-overlay.active{opacity: 1;}
.ss4-info-box.active{z-index: 5;}
.ss4-img-overlay-object{position: absolute;width: 100%;left: 0;top:0;height: 100%;z-index: 4;pointer-events: none;opacity:0}
.ss4-img-overlay-object.active{opacity: 1;}
.ss4-img-overlay-info{position: absolute;width: 100%;left: 0;top:0;height: 100%;z-index: 6;pointer-events: none;}
.ss4-info-box span{background: #FFF;padding: 0 16px;}
.ss4-info-box  h5{margin-bottom: 0;}
.ss4-scroll-down{width: 17px;position: relative;left: 50%;transform: translateX(-50%);z-index: 1000;opacity: 0.7;transition: opacity 0.3s ease;margin-top: 10px;}

/* Connection lines for ss4-info-box */
.ss4-info-box::before{content: '';position: absolute;width: 0;height: 2px;background: #FFF;z-index: -1;transition: width 0.4s ease;right: 100%;}
.ss4-info-box::after{content: '';position: absolute;width: 2px;height: 0;background: #FFF;z-index: -1;transition: height 0.4s ease;}

.ss4-info-box-1{left: 19%;  bottom: 12%;}
.ss4-info-box-1::before{top: -300px;  left: 50%;}
.ss4-info-box-1::after{bottom: 100%;left: 50%;}
.ss4-info-box-1.active::before{width: 30vw;transition: width 0.4s ease 0.4s;}
.ss4-info-box-1.active::after{height: 300px;transition: height 0.4s ease;}

.ss4-info-box-2{left: 44%;  bottom: 6%;}
.ss4-info-box-2::before{top: -250px;  left: 50%;}
.ss4-info-box-2::after{bottom: 100%;left: 50%;}
.ss4-info-box-2.active::before{width: 300px;transition: width 0.4s ease 0.4s;}
.ss4-info-box-2.active::after{height: 250px;transition: height 0.4s ease;}

.ss4-info-box-3{left: 53%;  bottom: 19%;}
.ss4-info-box-3::before{top: -30vh;  left: 50%;}
.ss4-info-box-3::after{bottom: 100%;left: 50%;}
.ss4-info-box-3.active::before{width: 150px;transition: width 0.4s ease 0.4s;}
.ss4-info-box-3.active::after{height: 30vh;transition: height 0.4s ease;}

.ss4-info-box-4{left: 34%;  bottom: 45%;}
.ss4-info-box-4::before{top: calc(100% + 150px);  left: 50%;}
.ss4-info-box-4::after{top: 100%;left: 50%;}
.ss4-info-box-4.active::before{width: 20vw;transition: width 0.4s ease 0.4s;}
.ss4-info-box-4.active::after{height: 150px;transition: height 0.4s ease;}


.ss4-img-info{position: absolute;background: #FFF;border-radius: 10px;display: block;overflow: hidden;opacity: 0;transition: opacity 0.4s ease;}
.ss4-img-info.active{ opacity: 1;}
.ss4-img-info .inner{padding: 15px;}
.ss4-img-info p{font-size: 13px;}
.ss4-img-info h6{margin-bottom: 4px;font-weight: bold;font-size: 14px;}
.ss4-img-info-1{width: 500px;left: calc(80% - 250px);top: 50%;transform: translate(-50%,-50%);}
.ss4-img-info-1 img{width: 200px;}
.ss4-img-info-3{width: 440px;left: calc(50% + 120px);  top: 50%;transform: translate(-50%,-50%);padding-left: 160px;position: absolute;}
.ss4-img-info-3 img{position: absolute;left: 20px;top:20px;width: 130px;}
.ss4-img-info-2{width: 400px;  left: calc(50% + 230px);  top: calc(50% + 130px);transform: translate(-50%,-50%);position: relative;}
.ss4-img-info-4{width: 400px;left: calc(50% + 200px);top: calc(50% + 130px);transform: translate(-50%,-50%);position: absolute;}
.ss4-img-info-2 img{width: 200px;}
.ss4-img-info-4  img{width: 100%;}

.scroll-hints-before{padding-bottom: 60px;margin-top: 25px;}


.ss4-scroll-hints{left: 50%;transform: translateX(-50%);z-index: 5;position: absolute;top:-90px;transition: transform 0.5s ease;background: url('../images/dsg/ss4-scroll-mobile.png') bottom center no-repeat;background-size: 14px auto;padding-bottom: 25px;}
.ss4-scroll-hints.active{transform: translateX(-50%) translateY(200px);transition: transform 0.5s ease;background: url('../images/dsg/ss4-scroll.png') bottom center no-repeat;background-size: 14px auto;}
.ss4-scroll-hints h6{color: #000;}
.ss4-scroll-hints.active h6{color: #FFF;text-shadow: 2px 2px 2px #000;}


.mobile-copule{display: none;}