@media (max-width: 768px) {
  .ser_yb_consys {
    margin: 1rem 0;
    padding: 1rem;
  }
  
  .comparison-table table {
    min-width: 600px;
  }
  
  .advantage-grid {
    grid-template-columns: 1fr;
  }
}


.notice-box {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  border-left: 4px solid #006cff;
}

.warning-box {
  background: #fff5f5;
  border-left: 4px solid #ff4d4d;
  padding: 1rem;
  margin: 1.5rem 0 0 0;
}


.step-list {
  counter-reset: step-counter;
  padding-left: 0;
}

.step-list li {
  counter-increment: step-counter;
  padding: 1rem 1rem 1rem 3rem;
  margin: 0.8rem 0;
  background: white;
  position: relative;
  border-radius: 6px;
}

.step-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #006cff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.logo{width: 100%;max-width: 120px;}
menu{width: 60px;height: 60px;border: 3px solid #fff;}
menu:before,menu:after,.menu{content:"";display: block;width: 100%;height: 5px;background-color: #fff;border-radius: 3px;transition: all .3s;margin: 5px 0;}
.close:before{transform: rotate(45deg) scale(1.1) translate(-1px, -6px);transform-origin:left;}
.close:after{transform: rotate(-45deg) scale(1.1) translate(-2px, 7px);transform-origin: left;}
header h4>div{height: 5px;opacity: 0;transform: translateX(-100%);transition: all .5s}
header .w-16:hover h4>div{transform: translateX(0);opacity: 1;}
#banner{padding-top: 116px;}
.po-a.w-100.h-100{top: 0;left: 0;}
.stars img{opacity: 0;animation: starsAni 3s ease-in-out infinite}
@keyframes starsAni{0%{opacity: .3;filter: brightness(1) grayscale(.5);}30%,70%{opacity: 1;filter: brightness(3) grayscale(.5);}}
#banner .container{width: 85%;}
.bnr1 .txt{max-width: 40.96vw;z-index: 999;}
.bnr2 .txt{max-width: 36.96vw;z-index: 999;}
.picScale{opacity: 0;bottom: 2%;right: 6%;}
#banner .slideInLeft{opacity: 0;}
.bnr1 .picScale{max-width: 45.6vw;}
.bnr2 .picScale{max-width: 61.88vw;}
.bnr2 .w-25{top: 0;right: 0;}
.bnr3 .txt{bottom: 13%;left: 0}
.slick-active .txt:not(.h-100){animation: btnSectionBox2 2s ease-in-out;animation-delay: .2s}
.slick-active .house{animation: picScale2 2s linear;}
.slick-active .starScale{animation: starScale 3s ease-in-out;}
.slick-active .ballScale{animation: ballScale 2s ease-in-out;}
.slick-active .picScale{animation: picScale 1s ease;transform-origin: bottom;animation-delay: .4s}
.slick-active .slideInLeft{animation:slideInLeft 1s ease;animation-delay: .6s}
.slick-active .w-25 .fadeInLeft{opacity: 0;animation:fadeInLeft .5s ease;}
#banner .slick-active *{animation-fill-mode: forwards;}
#banner .slick-cloned *{animation: none}
.icon{width: 40px;}
#process .picScale{bottom:0;right: 0;animation-fill-mode: forwards;}
#process .w-20:hover .picScale img{animation: tada 1s}
#process .w-20:hover .fadeInDown img{animation: swing 1s}
#process .w-20:hover .fadeInDownBig img{animation:sealScale 1s}
section#service .w-33:hover .fadeInDownBig img{animation:sealScale 1s}
.arrow{animation: arrow 2s ease-in-out infinite;top: 20%;right: -10%;width: 15vw;max-width: 40px;}
.ball1{width: 2vw;height: 2vw;bottom: 15%;right: 10px;}
.ball2{width: 3vw;height: 3vw;bottom: 0%;right: 6%;}
.ball3{width: 4vw;height: 4vw;bottom: -10%;right: 15%;}
section#news .arcT-1{border-bottom:none}
section#news .arcB-1{border-Top:none}
section#news .arcB-1 .bgc-lg1,#about span{height: 2px;}
section#news .txtOF:not(.bgc-w){width: calc(100% - 40px)}
#needToKnow h2,.item h2{max-width: 100%;min-width: 240px;width: 15vw;}
article#service .w-80>.bgc-lg1{padding: 2px 2px 2px 0;}
.item .po-a:not(.anchor){top: 0;left: 0;max-width: 80%;transform: translateY(-50%)}
.item .w-20{box-shadow: 16px 16px 16px rgba(0,0,0,.5);z-index: 2;}
.item .w-80{padding: 2% 0 0 2%;}
.ClinkPage{bottom: 0;left: 0;}
.newsBox>a:last-of-type .txtOF{border:none}
.items{border-top: none;}
.pic{width: 15vw;height: 15vw;border: 10px solid; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.5),5px 5px 10px rgba(0,0,0,.5);box-shadow: inset 0 0 5px rgba(0,0,0,.5),5px 5px 10px rgba(0,0,0,.5);border-image: url("../images/200803050922_797.jpg") 24 repeat;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.5),0 0 5px rgba(0,0,0,.3);box-shadow:inset 0 0 5px rgba(0,0,0,.5),0 0 5px rgba(0,0,0,.3);transition: all .3s ease-in-out}
#product .w-33:hover .pic{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.5),5px 5px 5px rgba(0,0,0,.3);box-shadow:inset 0 0 5px rgba(0,0,0,.5),5px 5px 5px rgba(0,0,0,.3);transform: scale(1.05)}
.pic img{max-width: 100%; max-height: 100%;z-index: -1;}
.pic .po-a{transform:rotate(-45deg);top: 5%;left: -40%;}
#PD .po-a:not(#anchor){transform:rotate(-45deg);top:7%;left: -40%;}
#contact .title>span.d-b,#process span{height: 5px;}
#contact .human{bottom: 0;right: 5vw;width: 42vw;max-width: 1000px;}
#contact .ball1{right: auto;left: 26%;bottom:2%}
#contact .ball2{right: auto;left: 18%;bottom: 2%;}
#contact .ball3{right: auto;left: 8%;bottom: 5%;}
.diamond.po-a{bottom:0;right:-10%;width:6vw}
button.btn.border-2:hover {background: #44c64d;color: #fff;transition: all .3s ease}
#contact .w-40{bottom: 15%;right: 4%;}
#contact{padding: 4% 0 150px;}
.switch{width: 60px;}
[class^="asideIcon"]{right: -10vw;}
[class^="asideIcon"]:hover{z-index: 999999}
[class^="asideIcon"] .tab{width: 2.5vw;}
[class^="asideIcon"] a{width: 10vw;border-color: #eee}
.asideIcon1{top: 0;}
.asideIcon1 .tab{background-color: #21b90c;}
.asideIcon2{top: 10vw;}
.asideIcon2 .tab{background-color: #3669bd;}
.asideIcon3{top: 18vw;}
.asideIcon3 .tab{background-color: #9b32fa;}
.asideIcon4{top: 26vw;}
.asideIcon4 .tab{background-color: #c61818;}
.box{-moz-column-count: 4;-webkit-column-count: 4;column-count: 4;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;}
.box .shopPic{display: inline-block;overflow:hidden;-webkit-column-break-inside: avoid;break-inside: avoid;float: left;}