:root{--ani:cubic-bezier(.32,.94,.6,1)}

.main .main_Deco {position: relative; padding-left: 1rem; width: fit-content;}
.main .main_Deco:after {content:''; width: .625rem; height: .625rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; left: 0; top:0;}

.main .ygap4 {--y-gap:4rem;}
@media(max-width:500px){
    .main .font-60 {font-size: 4.3rem;}
}

#mainVisual {overflow:hidden; position:relative; width:100%; aspect-ratio: 16/8; transition:transform .6s var(--ani)}
#mainVisual .VisualBg {background: no-repeat center url('/img/main/mainVisualBg.jpg'); background-size: cover; opacity:0;transform:scale(1.05);width:100%;height:100%;transition:all 2s var(--ani)}
#mainVisual .VisualBg.on {opacity:1;transform:scale(1)}

#mainVisual .TxtBox {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); width:1410px; max-width: 90%;}
#mainVisual .Txt_rollingBox {height: 5rem; overflow: hidden;}
#mainVisual .rolling{position:relative; height:auto;}
#mainVisual .rolling li{width:100%; height:5rem; line-height:5rem;}

@media(max-width:1240px){
    #mainVisual {aspect-ratio: 16/11;}
}
@media(max-width:990px){
    #mainVisual {margin-top: 4rem;}
}
@media(max-width:768px){
    #mainVisual {aspect-ratio: 16/23;}
    #mainVisual .VisualBg {background-image: url('/img/main/mainVisualBg_m.jpg');}
}
@media(max-width:500px){
    #mainVisual {aspect-ratio: 16/27;}
    .Txt_rollingBox {flex-direction: column;}
}

/* worry */
#worry {background: no-repeat center url('/img/main/worryBg.jpg'); background-size: cover;}
#worry .Titbox {height: 65rem; position: relative; padding-bottom: 18rem;}
#worry .TextBox {position: absolute; width: 100%; height: 100%;}
#worry .TextBox li {position: absolute;}
#worry .topText li:nth-child(1) {left:9rem; top:8rem;}
#worry .topText li:nth-child(2) {right:3rem; top:17rem;}
#worry .topText li:nth-child(3) {left:0; top:23rem;}
#worry .topText li:nth-child(4) {right:23rem; top:5rem;}
#worry .topText li:nth-child(5) {right:0; top:29rem;}

#worry .bottomText li:nth-child(1) {left:7rem; bottom:24rem;}
#worry .bottomText li:nth-child(2) {right:2rem; bottom:11rem;}
#worry .bottomText li:nth-child(3) {left:20rem; bottom:4rem;}
#worry .bottomText li:nth-child(4) {left:3rem; bottom:13rem;}
#worry .bottomText li:nth-child(5) {right:11.5rem; bottom:22rem;}
#worry .bottomText li:nth-child(6) {right:25rem; bottom:5rem;}

#worry .Line {position: absolute; z-index: 3; padding: 1rem 0; bottom:6rem; right:0; left:0; margin: auto; width:.125rem; height: 28.9375rem;}
#worry .circle {/* background: no-repeat center url('/img/main/circle.png'); */ position: relative; padding: 4rem 0;}
#worry .circleImg {position: absolute; right:0; left:0; top:0; margin: auto; width: 36.125rem;}
@media(max-width:990px){
    #worry .topText {height: 50%; top:-7rem;}
    #worry .bottomText {height: 50%; bottom: 1rem;}

    #worry .topText li:nth-child(1) {left:1rem; top:6rem;}
    #worry .topText li:nth-child(2) {right:3rem; top:11rem;}
    #worry .topText li:nth-child(3) {left:0; top:17rem;}
    #worry .topText li:nth-child(4) {right:12rem; top:0;}
    #worry .topText li:nth-child(5) {right:0; top:21rem;}

    #worry .bottomText li:nth-child(1) {left:2rem; bottom:24rem;}
    #worry .bottomText li:nth-child(2) {right:1rem; bottom:11rem;}
    #worry .bottomText li:nth-child(3) {left:2rem; bottom:4rem;}
    #worry .bottomText li:nth-child(4) {left:0; bottom:16rem;}
    #worry .bottomText li:nth-child(5) {right:2rem; bottom:22rem;}
    #worry .bottomText li:nth-child(6) {right:4rem; bottom:2rem;}
}
@media(max-width:500px){
    #worry .topText li:nth-child(2) {top:13rem;}
    #worry .topText li:nth-child(4) {right:3rem;}

    #worry .bottomText li:nth-child(1) {left: 1rem;}
    #worry .bottomText li:nth-child(2) {right:0;}
}



/* service */
#service .serviceBg {position: absolute; top:0; right:0; left:0; margin: auto; z-index: -1;}
/* #service .mark_BL {position: relative; margin-top: 3rem;} */
#service .mark_BL {width: 50%; height: 7.125rem; background-color: #3073fe; mix-blend-mode: difference; z-index: -1; position: absolute; top:0; bottom:0; right:0; margin: auto;}

#service .serviceWrap {margin-top: 8rem;}
#service .serviceBox {display: flex; align-items: center; justify-content: space-between;}

#service .Desc {padding:0 1rem;}
#service .Desc.Left div {width: fit-content; margin-left: auto;}

#service .serviceBtn {display: flex; align-items: center; font-family: var(--pointfont); color:#fff; margin-top: 2rem;}
#service .serviceBtn p {border-bottom:1px solid #fff; line-height: 1; transition: all ease-in-out .3s;}
#service .serviceBtn:hover p {letter-spacing: 2px;}
#service .serviceBtn span {transform: translateX(0px); transition: all ease .3s;}
#service .serviceBtn:hover span {transform: translateX(10px);}

#service .serviceDeco {position: absolute; width: 27.6875rem; z-index: -1;}
#service .serviceDeco.Deco01 {right:2rem; top:45rem;}
#service .serviceDeco.Deco02 {left:2rem; bottom:21rem;}
@media(max-width:768px){
    #service .Tit {margin-top: 25%;}
    #service .serviceWrap {margin-top: 20%;}
    #service .mark_BL {width: 57%; right:-5rem}
    #service .serviceDeco {display: none;}

    #service .serviceBox {flex-wrap: wrap;}
    #service .serviceBox .Desc {order:2; padding: 4rem 0;}
    #service .serviceBox .Right img {margin-left: auto;}
    #service .serviceBox img {width: 31.6875rem;}

    #service .Desc.Left {width: 31.6875rem; margin-left: auto;}
    #service .Desc.Left div {margin-left: 0;}
}


/* with */
#with .withLeftSwiper .swiper-wrapper,
#with .withLastSwiper .swiper-wrapper,
#with .withRightSwiper .swiper-wrapper {
    -webkit-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
  }




footer .Line {width: 100%; height: 1px; background-color: #4c4c4c; margin-bottom: 5rem;}


#topBtn {transition: ease .3s; transform: scale(1); width: 5rem;}
#topBtn:hover {transform: scale(.85); transition: ease .3s; }