.sub .xgap5 {--x-gap:5rem;}
.sub .ygap2 {--y-gap:2rem;}
.sub .ygap3 {--y-gap:3rem;}
.sub .ygap5 {--y-gap:5rem;}


.sub .subTit {overflow:hidden; font-size: 6.25rem; font-family: var(--pointfont); font-weight: 700; line-height: 1.1; text-transform: uppercase;}
.sub .subTit span {display:block;}
@media(max-width:1400px) {
    .sub .subTit {font-size: 5vw;}
}
@media(max-width:768px) {
     .sub .subTit {font-size: 4.3rem;}
}

.sub .Dot {position: relative; padding-left: 2rem;}
.sub .Dot:after {content:''; width: 1.5rem; height: 1.5rem; background-image: url('/img/sub/Dot.svg'); background-size: cover; background-repeat: no-repeat; position: absolute; left: 0; top: .1875rem;}


/* intro */
.sub .intro {background-color: var(--black); padding: 3.75rem 0;}

#TxtEffect {background-color: var(--black); font-size: 3.125rem; overflow: hidden;}
#TxtEffect .Txt_Inner {position: relative; color: rgba(240, 240, 240, .2); font-weight: 600;}
#TxtEffect .Txt_Inner .Txt {position: relative; word-break: keep-all; background: linear-gradient(to right, var(--white), var(--white)) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;}

#TxtEffect .box.Img{overflow:hidden; border-radius:1.875rem;}
#TxtEffect .box.Img img {display:block; width:100%; height:100%; object-fit:cover; transform-origin:center center;}
@media(max-width:768px) {
    .sub .intro .TxtBox {padding: 3rem 1rem;}
    #TxtEffect {font-size: 2.7rem;}
}


/* structure */
.sub .structure {background-color: #dfdfdf;}
.sub .structure .radar-chart {width: 34.375rem; aspect-ratio: 1 / 1; margin: auto;}
.sub .structure .radar-chart canvas {width: 100%; height: 100%; display: block;}
@media(max-width:768px) {
    .sub .structure .Img {order:2; padding-top: 5rem;}
}


/* business */
.sub .business {background-color: #a5a5a5;}
.sub .business .flexBox {padding-top: 12.5rem; --x-gap:3rem;}
.sub .business .Img {overflow: hidden; visibility: hidden;}
.sub .business .Img img {display: block; width: 100%; height: 100%; object-fit: cover;}
@media(max-width:1240px) {
    .sub .business .Txt {width: 100%; padding-top: 2rem;}
}



/* direction */
.sub .direction {background-color: var(--black);}
.sub .direction .TxtBox {font-family: var(--pointfont); position: relative; text-transform: uppercase; font-size: 7vw; line-height: 1; font-weight: 900;  -webkit-text-stroke-width: .05rem; -webkit-text-stroke-color: var(--white); text-shadow: none;}

.sub .direction .TxtBox h2 {display: block; width: fit-content; margin: 0 auto;}

.sub .direction .flexList {max-width: 1290px; width: 95%;}
.sub .direction .box2,.sub .direction .box3 {margin-left: -5rem;}
.sub .direction .Dott {aspect-ratio: 1 / 1; border:1px solid var(--white); background-color: var(--black); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.sub .direction .Dott.BL {background-color: #000;}
.sub .directionList {display: flex; flex-direction: column; gap:1.3rem;}
.sub .directionList li {line-height: 1;}
.sub .directionList li span {font-family: var(--pointfont); font-size: 1rem;}

.sub .direction .Line {position: relative;}
.sub .direction .Line:after {content:''; width: 15%; height: 1px; background-color: var(--white); position: absolute; top: 50%; left: -15%; transform: translateY(-50%); transform: translateY(-50%) scaleX(var(--line-after)); transform-origin: right center;}
.sub .direction .Line:before {content:''; width: 1px; height: 350%; background-color: var(--white); position: absolute; left: 50%; transform: translateY(-50%);  bottom: -350%; transform: scaleY(var(--line-before)); transform-origin: top center;}


.sub .direction .Desc {background-color: var(--subcolor); position: relative; aspect-ratio: 17 / 18; padding: 6rem 6rem 9rem; border-radius: 1.875rem; max-width: 56.25rem; width: 100%; margin-left: auto; margin-top: 10rem; display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; justify-content: space-between;}
@media(max-width:990px) {
    .sub .direction .TxtBox {font-size: 10vw;}
    .sub .direction .box .Dott {max-width: 34.375rem;}
    .sub .direction .box2,.sub .direction .box3 {margin-left: 0rem;}
    .sub .direction .box2 {margin-top: -7rem;}
    .sub .direction .box3 {margin-top: -7rem;}

    .sub .direction .Line:before {left: 25%; bottom: -410%;}
}
@media(max-width:500px) {
    .sub .direction .TxtBox {font-size: 12vw;}
    .sub .direction .box .Dott {max-width: 30rem;}
    .sub .direction .Desc {padding: 4rem 4rem 6rem;}
}


/* trust */
.sub .trust {background-color: #a5a5a5; position: relative; z-index: 2;}
.sub .trust .trustSwiper {}

.sub .trust .trustSwiper .swiper-slide {width: auto !important;}
.sub .trust .trustSwiper .swiper-slide img {object-fit: contain; height: 3.75rem;}
.sub .trust .trustSwiper .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}



/* solution */
.sub .solution {background-color: #dfdfdf;}

.sub .solutionList {border-top: 1px solid var(--black);}
.sub .solutionList li {border-bottom:1px solid var(--black); cursor: pointer; font-weight: 600; padding: .5rem 0; text-transform: uppercase; font-family: var(--pointfont); position: relative;}
.sub .solutionList li:after {content:'+'; font-size: 1.625rem; position: absolute; right:0; top: 0; bottom: 0; margin: auto; height: fit-content; font-family: var(--pointfont); transform: rotate(0deg); transition: transform 0.45s ease;}
.sub .solutionList li:hover:after {transform: rotate(360deg);}


.sub .solutionBox .DotInner {display: flex; align-items: center; justify-content: center; padding: 6rem;}
.sub .solutionBox .Dort {width: 3.75rem; height: 3.75rem; border-radius: 3.75rem; background-color: var(--black);   animation: dotScale 1.8s ease-in-out infinite;}


@keyframes dotScale {
    0% {transform: scale(1);}
    50% {transform: scale(1.25);}
    100% {transform: scale(1);}
} 


/* plan */
.sub .plan {background-color: #838383;}
.sub .plan .Tit {font-family: var(--pointfont); font-weight: 700; line-height: 1.2;}
.sub .plan .hover {position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-color: var(--black); border-radius: 1.875rem; z-index: 0; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform .7s cubic-bezier(.22, 1, .36, 1),width .7s cubic-bezier(.22, 1, .36, 1),height .7s cubic-bezier(.22, 1, .36, 1);}

.sub .plan .Line {width: 100%; height: 1px; background-color: var(--black); margin: 2rem auto;}
.sub .plan .planBox {position: relative; z-index: 1; padding: 5rem; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; transition: color .4s ease;}
.sub .plan .Desc {display: flex; align-items: flex-end; justify-content: space-between; margin-top: 9.375rem;}
.sub .plan .DescList {display: flex; flex-direction: column; gap: 1rem;}

.sub .plan .planBox.on {color: var(--white);}
.sub .plan .planBox.on .svgImg {filter: invert(1) brightness(3); animation: rotate 8s linear infinite;}
.sub .plan .planBox .svgImg1 {width: 4.5625rem;}
.sub .plan .planBox .svgImg2 {width: 6.5625rem;}
.sub .plan .planBox.on .Line {background-color: var(--white);}
.sub .plan .planBox.on .Dot:after {filter: invert(1) brightness(3);}

.sub .plan .planBox_wrap {--x-gap:5vw}
.sub .plan .planBox_wrap .box {align-self: stretch; display: flex; flex-direction: column; justify-content: space-between;}

@media(max-width:1100px) {
    .sub .plan .planBox_wrap {--x-gap:4vw}
}
@media(max-width:990px) {
    .sub .plan .Desc {flex-direction: column; gap: 5rem; margin-top: 1rem;}
    .sub .plan .planBox .svgImg {align-self: flex-start;}
}


/* Our */
.sub .Our {background-color: #dfdfdf;}

.sub .Our .Tit {display: flex; align-items: baseline; gap: 1rem; line-height: 1; position: sticky; top: 7rem; height: auto;}
.sub .Our .Tit h3 {font-family: var(--pointfont); font-weight: 700; font-size: 4.48vw;}

.sub .Our .mark_D {width: 2.875rem; height: 2.875rem; aspect-ratio: 1 / 1; border-radius: 50%; border: .375rem solid var(--black); position: relative;}
.sub .Our .mark_D:after {content:''; width: 1.25rem; height: 1.25rem; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--black); position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.sub .Our .mark_D.Wh {border-color: var(--white);}
.sub .Our .mark_D.Wh:after {background-color: var(--white);}

.sub .Our .TT {text-transform: uppercase; font-weight: 900;}
.sub .Our .DD {position: relative; padding-left: 1.5rem;}
.sub .Our .DD:after {content:''; width: .8125rem; height: .8125rem; border-radius: 50%; border: .1875rem solid var(--black); position: absolute; left: 0; top: .5rem;}
.sub .Our .DD.Wh:after {border-color: var(--white);}

.sub .Our .Desc {display: flex; flex-direction: column; gap: 7rem; padding-left: 5vw; height: auto;}
.sub .Our .Desc ul {display: flex; flex-direction: column; gap: .5rem;}


.sub .Our.Our_02 {background-color: var(--pointcolor);} 
.sub .Our.Our_03 {background-color: var(--black);} 
@media(max-width:990px) {
    .sub .Our .Desc {padding-left: 1vw;}
}
@media(max-width:500px) {
    .sub .Our .Title {width: 15%;}
    .sub .Our .Tit {flex-direction: column; align-items: center;}
    .sub .Our .Tit h3 {font-size: 7vw; writing-mode: sideways-rl;}

    .sub .Our .Desc {width: 80%;}

}


/* bo_intro */
.bo_intro {background-color: var(--black); padding: 3.75rem 0;}
.bo_intro .Inner {border-radius: 1.875rem; background: no-repeat center / cover; aspect-ratio: 18 / 8; position: relative;}
.bo_intro .Txt {position: absolute; width: fit-content; height: fit-content; top: 50%; transform: translateY(-50%); left: 10%;}

.bo_intro .star.Right:after {right: 1rem;}
@media(max-width:768px) {
    .bo_intro .Inner {aspect-ratio: 1 / 1;}
}


/* way */
/* .sub .way {background-color: #313131;} */
.sub .way .TitFlex {display: flex; align-items: flex-end; gap: 2rem; justify-content: space-between;}
.sub .way .flexList {padding-top: 10rem;}

.sub .way .flexBox {position: relative; display: flex; justify-content: space-between; padding-top: 9.375rem;}

.sub .way .DotBox {position: relative; right: 0;transform: translateY(50%);}
.sub .way .Dot2 {width: 7.5rem; height: 7.5rem; border-radius: 50%; border:.125rem solid var(--white)}

#Form {max-width: 41.875rem; width: 95%; border-radius: 1.875rem; background-color: var(--black); padding: 5rem; display: flex; flex-direction: column; gap:3rem; margin-left: auto; mix-blend-mode: difference;}
#Form .input_box {width: 100%;}
#Form .input_box input[type='text'], #Form .input_box input[type='email'] {background-color: transparent; padding: .7rem .3rem 1rem; color:var(--white); font-size: 1.125rem; width: 100%; border: none; border-bottom: 1px solid var(--white);}
#Form .input_box input[type="text"]::placeholder, #Form .input_box input[type='email']::placeholder {color: rgba(247,247,247, .5); font-size: .875rem;}

#Form .checkbox {margin-top: -2rem; cursor: pointer;}
#Form .checkbox input[type="checkbox"] {display: none;}
#Form .checkbox label {position: relative; padding-left: 1.75rem; cursor: pointer; display: inline-block; color: var(--white);}

#Form .checkbox label::before {content: ''; position: absolute; left: 0; bottom: .3rem; width: 1.125rem; height: 1.125rem; border: 1px solid var(--white); border-radius: 0; background: var(--white);}
#Form .checkbox input:checked + label::before {border-color: var(--white); background:var(--white);}
#Form .checkbox input:checked + label::after {content: ''; position: absolute; left: .375rem; bottom: .6rem; width: .3125rem; height: .625rem; border: .125rem solid var(--black); border-top: none; border-left: none; transform: rotate(45deg);}

#Form .submit {width: 100%; text-align: center; font-family: var(--pointfont); color: var(--black); background-color: var(--white); font-weight: 800; padding: 1rem;}

#Form .agreeTxt {max-height: 0; overflow: hidden; padding: 0; opacity: 0; transition: max-height .4s cubic-bezier(.22, 1, .36, 1),     padding .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;}
#Form .agreeTxt.on {max-height: 6.25rem; padding: 1rem 0;opacity: 1; overflow-y: auto;}

input[type=text]:focus, input[type=password]:focus, input[type='email'], textarea:focus, select:focus {box-shadow: none; border:1px solid var(--pointcolor)}

@media(max-width:768px) {
    .sub .way .TitFlex {flex-direction: column; align-items: flex-start;}
}

@media(max-width:500px) {
    .sub .way .DotBox {display: none;}
    #Form {margin-right: auto;}
}