@charset "utf-8";



/*-----------------------------------------------

    animation

-----------------------------------------------*/

/* jsAnimationList */

.jsAnimationList{

    overflow: hidden;

    font-size: 0;

    font-weight: bold;

    letter-spacing: 3px;

	transition: 1s;

    display: flex;

    justify-content: center;

    align-items: center;

}

.jsAnimationList .item{

    overflow: hidden;

    font-size: 44px;

    opacity: 0;

    -webkit-transform: translate(0px, 50px);

    transform: translate(0px, 50px);

    -webkit-transition: opacity 0.5s cubic-bezier(0.18, 1.00, 0.29, 1.00), -webkit-transform 2s cubic-bezier(0.18, 1.00, 0.29, 1.00);

    transition: opacity 0.5s cubic-bezier(0.18, 1.00, 0.29, 1.00), -webkit-transform 2s cubic-bezier(0.18, 1.00, 0.29, 1.00);

    transition: opacity 0.5s cubic-bezier(0.18, 1.00, 0.29, 1.00), transform 2s cubic-bezier(0.18, 1.00, 0.29, 1.00);

    transition: opacity 0.5s cubic-bezier(0.18, 1.00, 0.29, 1.00), transform 2s cubic-bezier(0.18, 1.00, 0.29, 1.00), -webkit-transform 1.5s cubic-bezier(0.18, 1.00, 0.29, 1.00);

}

.jsAnimationList .item.is-active{

    -webkit-transform: none;

    transform: none;

    opacity: 1;

}

.end .jsAnimationList{

	transform: scale(0.8, 0.8);

    scale: none;

}

.end-2 .jsAnimationList{

    opacity: 0;

}



.animeItem{

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

}

@media only screen and (max-width:767px){

    .jsAnimationList .item{

        font-size: 24px;

    }

}





.intro {

    display: flex;

    z-index: 99999;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    align-items: center;

    justify-content: center;

    background-color: #fff;

	transition: 0.2s;

}



.scene02 .intro {

    opacity: 0;

}



.scene02-end .intro {

    display: none;

    opacity: 0;

    visibility: hidden;

}



.introLogo {

    opacity: 0;

    height: 0;

	transition: 0.2s;

}

.start-2 .introLogo {

    height: auto;

    opacity: 1;

}

@media only screen and (max-width:767px){

    .start-2 .introLogo {

        width: 236px;

        height: auto;
        margin: 0 auto;

    }

}



/* svg */

/* topTitPc */

#topTitPc{

    width: 1398px;

    height: 158px;

}

#topTitPc .st0{fill:url(#SVGID_Top_);}

#topTitPc .st1{fill:none;stroke:#fff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

@media only screen and (max-width:767px){

    #topTitSp{

        width: 262px;

        height: auto;

    }

    #topTitSp .st0{fill:url(#SVGID_Sp_);}

    #topTitSp .st1{fill:url(#SVGID_00000174578520265891590420000013182980907773955719_);}

    #topTitSp .st2{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

}



/* recruitTxt */

#recruitTxt{

    width: 284px;

    height: 87px;

}

#recruitTxt .st0{fill:url(#SVGID_2_);}

#recruitTxt .st1{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

@media only screen and (max-width:767px){

    #recruitTxt{

        width: 127px;

        height: auto;

    }

}



/*-----------------------------------------------

    index

-----------------------------------------------*/



/* container */

#container{

    position: relative;

    top: 0;

    left: 0;

    z-index: 999;

    width: 100%;

}



/* secBg */

.gro .secBg{

    position: fixed;

    top: 0;

    left: 0;

    z-index: -1;

    width: 100vw;

    height: 100vh;

}

.gro .secBg img,

.gro .secBg video{

    width:100%;

    height:100%;

    position:absolute;

    top:0;

    left:0;

    object-fit:cover;

    font-family:'object-fit:cover;';

}

.gro .secBg .itemBg{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    transition: 1500ms ease;

    pointer-events: none;

}

.gro .secBg .itemBg:nth-child(2)::before{

    content: "";

    width: 100%;

    height: 100%;

    background: #000;

    opacity: 0.3;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 10;

}

.gro .secBg .itemBg:last-child{

    background: #fff;

    width:100%;

    height:100%;

    position:absolute;

    top:0;

    left:0;

}

.gro .secBg.isState02 .itemBg:nth-child(1),

.gro .secBg.isState03 .itemBg:nth-child(1),

.gro .secBg.isState03 .itemBg:nth-child(2){

    opacity: 0;

    -webkit-filter: brightness(200%);

    filter: brightness(200%);

}

.gro .secBg .itemBg:nth-child(1){

    z-index: 3;

}

.gro .secBg .itemBg:nth-child(2){

    z-index: 2;

}

.gro .secBg .itemBg:nth-child(3){

    z-index: 1;

}

@media only screen and (max-width:767px){

    .gro .secBg .itemBg:nth-child(2)::after{

        display: none;

    }

}



/* secFirstview */

.gro .secFirstview{

    position: relative;

}

.gro .secFirstview .swiper-slide{

    height: 810px;

    position: relative;

    overflow: hidden;

    background: #fff;

}

.gro .secFirstview .swiper-slide .img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.gro .secFirstview .swiper-slide .img img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: cover;

    font-family: 'object-fit: cover;'

}

.gro .secFirstview video{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: cover;

    font-family: 'object-fit: cover;';

    filter: invert(1);

}

@media only screen and (max-width:767px){

    .gro .secFirstview .swiper-slide{

        height: 100vw;

    }

}

/* secHero */

.gro .secHero{

    position: relative;

    z-index: 9999;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 120px;

}

.gro .secHero .bnrBox{
    opacity: 0;
    transition:opacity 1s ease-out;
    position: absolute;
    bottom: 50px;
    right: 50px;
    z-index: 99;
}
.scene02-end-bnr .gro .secHero .bnrBox{
    opacity: 1;
}

.gro .secHero .wrapper {
    width: 1620px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
}

.gro .secHero .topTitImg{
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.gro .secHero .topTxt{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gro .secHero .topTxt .jp{
    animation-delay: 1.2s;
    position: static;
    width: 490px;
}

.gro .secHero .topTxt .jp02{
    animation-delay: 1.2s;
    position: static;
    width: 650px;
    margin-top: 50px;
}

.gro .secHero .topTxt .jpSub{
    animation-delay: 1.2s;
    margin: 20px 0 0 35px;
}

.gro .secHero .titBox{

    position: relative;

    display: inline-block;

    margin-top: 41px;

}

.gro .secHero .bgCover{

    background: #fff;

    padding: 6px 3px;

}

.gro .secHero .titBox span{

    display: block;

}

.gro .scene02-end2 .secHero .titJpnCover{

    animation: animetionTop 1s cubic-bezier(.785,.135,.15,.86) .5s normal forwards;

}

@media only screen and (max-width:767px){

    .gro .secHero{

        padding-top: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-flow: column;

        min-height: 667px;

    }
    .gro .secHero .wrapper{
        width: 92%;
        height: 100%;
    }

    .gro .secHero .topTitImg{
        margin: 0 auto;

    }

    .gro .secHero .titBox{

        margin-top: 29px;

    }
    .gro .secHero .topTxt .eng{
        max-width: 345px;
    }
    .gro .secHero .topTxt .jp{
        width: 275px;
        height: auto;
        right: 0;
        bottom: 0;
        top: 10vw;
        margin: auto;
        display: flex;
        align-items: center;
    }
    .gro .secHero .topTxt .jpSub{
        margin: 10px 0 0 4.5%;
        width: 90%;
    }
    .gro .secHero .bnrBox {
        right: 0;
        left: 0;
        margin: auto;
        width: 92%;
    }

    .gro .secHero .bgCover{

        padding: 8px 3px;

    }

    .gro .secHero .titJpn{

        width: 18px;

    }
    .gro .secHero .topTxt .jp02 {
        width: 94.205%;
        margin-top: 30px;
    }

}



/* secTopBnr */

.gro .secTopBnr{

    position: relative;

    margin: 190px auto 0;

}

.gro .secTopBnr .bnrInner.lazyloaded{

    background: url(../img/index/bgTopBnr.jpg) center top / cover;

}

.gro .secTopBnr .bnrInner{

    position: relative;

    height: 600px;

    display: block;

    text-decoration: none;

    color: #fff;

}

.gro .secTopBnr .wrapper{

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

}

.gro .secTopBnr .bnrIcon{

    position: absolute;

    top: -40px;

    left: -5px;

}

.gro .secTopBnr .flexBox{

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

}

.gro .secTopBnr .leftBox{

    position: relative;

}

.gro .secTopBnr .jpnImg{

    position: absolute;

    top: calc(50% - 50px);

    left: 175px;

}

.gro .secTopBnr .btnBox{

    width: 200px;

    padding-bottom: 18px;

    border-bottom: solid 1px #fff;

    position: relative;

}

.gro .secTopBnr .btnBox::before{

    content: "";

    margin: auto;

    position: absolute;

    top: 5px;

    right: 4px;

    width: 5px;

    height: 5px;

    border-top: 1px solid #fff;

    border-right: 1px solid #fff;

    transform: rotate(45deg);

}

.gro .secTopBnr .btnBox::after{

    content: "";

    margin: auto;

    position: absolute;

    top: 7px;

    right: 4px;

    width: 17px;

    height: 1px;

    background: #fff;

}

.gro .secTopBnr .btnTxt{

    font-size: 13px;

    font-weight: 300;

    letter-spacing: 1.5px;

}

@media only screen and (max-width:767px){

    .gro .secTopBnr{

        margin: 80px 0 0;

    }

    .gro .secTopBnr .bnrInner.lazyloaded{

        background: url(../img/index/bgTopBnr_sp.jpg) center top / cover;

    }

    .gro .secTopBnr .bnrInner{

        height: 104vw;

        min-height: 390px;

    }

    .gro .secTopBnr .bnrIcon{

        width: 127px;

        top: -20px;

        left: 0;

    }

    .gro .secTopBnr .flexBox{

        display: block;

        padding-bottom: 15px;

    }

    .gro .secTopBnr .engImg{

        width: 245px;

        margin-left: -5px;

    }

    .gro .secTopBnr .jpnImg{

        position: static;

        width: 285px;

        margin-top: -20px;

    }

    .gro .secTopBnr .btnBox{

        width: 165px;

        padding-bottom: 13px;

        margin-top: 42px;

    }

    .gro .secTopBnr .btnTxt{

        font-size: 12px;

        font-weight: 300;

        letter-spacing: 1px;

    }

}

/* secCmnTit */

.gro .secCmnTit{

    text-align: center;

}

.gro .secCmnTit .animeWrapper{

    padding-top: 70px;

}

.gro .secCmnTit .cmnEngTit{

    position: relative;

}

.gro .secCmnTit .cmnEngTit::before{

    position: absolute;

    content: "";

    width: 20px;

    height: 1px;

    background: #000750;

    left: calc(50% - 10px);

    top: -45px;

}

.gro .secCmnTit .cmnEngTit::after{

    position: absolute;

    content: "";

    width: 50px;

    height: 1px;

    background: #000750;

    left: calc(50% - 25px);

    top: -45px;

    transform: rotate(-60deg);

}

.gro .secCmnTit .cmnJpnTit{

    font-size: 24px;

    font-weight: bold;

    letter-spacing: 4px;

    margin-top: 38px;

}

@media only screen and (max-width:767px){

    .gro .secCmnTit .animeWrapper{

        padding-top: 35px;

    }

    .gro .secCmnTit .cmnEngTit img{

        width: auto;

        height: 20px;

    }

    .gro .secCmnTit .cmnEngTit::before{

        width: 10px;

        left: calc(50% - 5px);

        top: -20px;

    }

    .gro .secCmnTit .cmnEngTit::after{

        width: 23px;

        left: calc(50% - 11.5px);

        top: -20px;

    }

    .gro .secCmnTit .cmnJpnTit{

        font-size: 17px;

        letter-spacing: 1px;

        margin-top: 14px;

    }

}

/* secIntro */

.gro .secIntro{

    padding: 136px 0 170px;

}

.gro .secIntro .txtBox{

    margin-top: 48px;

}

.gro .secIntro .txt{

    font-size: 18px;

    line-height: 2.22;

    letter-spacing: 2px;

    font-weight: bold;

    color: #fff;

    text-align: center;

}

.gro .secIntro .txt.mt18{

    margin-top: 18px;

}

@media only screen and (max-width:767px){

    .gro .secIntro{

        padding: 85px 0 95px;

    }

    .gro .secIntro .txtBox{

        margin-top: 30px;

    }

    .gro .secIntro .txt{

        font-size: 13px;

        line-height: 1.69;

        letter-spacing: 1px;

        text-align: left;

    }

    .gro .secIntro .txt.mt18{

        margin-top: 10px;

    }

    .gro .secIntro .txtBox02{

        display: flex;

        justify-content: center;

    }

}

/* secInformation */

.gro .secInformation{

    padding-top: 165px;

}

.gro .secInformation .boxList{

    margin-top: 70px;

    display: flex;

}

.gro .secInformation .boxItem{

    width: 28.986%;

    margin-right: 6.521%;

}

.gro .secInformation .boxItem:last-child{

    margin-right: 0;

}

.gro .secInformation .txtBox{

    margin-top: 40px;

}

.gro .secInformation .tit{

    font-size: 20px;

    letter-spacing: 2px;

    font-weight: bold;

}

.gro .secInformation .txt{

    font-size: 14px;

    line-height: 2.14;

    letter-spacing: 2px;

    margin-top: 25px;

    font-weight: bold;

}

.gro .secInformation .btnBox{

    width: 500px;

    margin: 38px auto 0;

}

.gro .secInformation .btnInner{

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 2px;

    color: #3e3a39;

    border: solid 1px #3e3a39;

    height: 55px;

    box-shadow: 2px 2px 0 0 #3e3a39;

    position: relative;

}

.gro .secInformation .btnInner::before{

    content: "";

    margin: auto;

    position: absolute;

    top: calc(50% - 2.5px);

    right: 40px;

    width: 5px;

    height: 5px;

    border-top: 1px solid #3e3a39;

    border-right: 1px solid #3e3a39;

    transform: rotate(45deg);

}

.gro .secInformation .btnInner::after{

    content: "";

    margin: auto;

    position: absolute;

    top: calc(50% - 0.5px);

    right: 40px;

    width: 17px;

    height: 1px;

    background: #3e3a39;

}

@media only screen and (max-width:767px){

    .gro .secInformation{

        padding-top: 65px;

    }

    .gro .secInformation .boxList{

        margin-top: 40px;

        display: block;

    }

    .gro .secInformation .boxItem{

        width: 100%;

        margin-right: 0;

    }

    .gro .secInformation .boxItem:nth-child(n+2){

        margin-top: 35px;

    }

    .gro .secInformation .txtBox{

        margin-top: 20px;

    }

    .gro .secInformation .tit{

        font-size: 15px;

        letter-spacing: 1px;

    }

    .gro .secInformation .txt{

        font-size: 13px;

        line-height: 1.69;

        margin-top: 13px;

        letter-spacing: 1px;

    }

    .gro .secInformation .btnBox{

        width: 76.812%;

        min-width: 265px;

        margin: 35px auto 0;

    }

    .gro .secInformation .btnInner{

        font-size: 12px;

        letter-spacing: 1px;

        height: 45px;

    }

    .gro .secInformation .btnInner::before{

        right: 20px;

    }

    .gro .secInformation .btnInner::after{

        right: 20px;

    }

}

/* secJigyo */

.gro .secJigyo{

    margin-top: 215px;

    position: relative;

}

.gro .secJigyo .jigyoInner{

    color: #3e3a39;

    display: block;

    text-decoration: none;

}

.gro .secJigyo .contentBox{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.gro .secJigyo .wrapper{

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

}

.gro .secJigyo .secCmnTit{

    position: absolute;

    left: -10px;

    top: -132px;

}

.gro .secJigyo .txtBox{

    padding-left: 110px;

}

.gro .secJigyo .topTit{

    font-size: 24px;

    letter-spacing: 5px;

    font-weight: bold;

}

.gro .secJigyo .txt{

    font-size: 14px;

    line-height: 2.14;

    letter-spacing: 1.5px;

    margin-top: 32px;

    font-weight: bold;

}

.gro .secJigyo .btnBox{

    width: 200px;

    margin-top: 38px;

    padding-bottom: 18px;

    border-bottom: solid 1px #3e3a39;

    position: relative;

}

.gro .secJigyo .btnBox::before{

    content: "";

    margin: auto;

    position: absolute;

    top: 5px;

    right: 4px;

    width: 5px;

    height: 5px;

    border-top: 1px solid #3e3a39;

    border-right: 1px solid #3e3a39;

    transform: rotate(45deg);

}

.gro .secJigyo .btnBox::after{

    content: "";

    margin: auto;

    position: absolute;

    top: 7px;

    right: 4px;

    width: 17px;

    height: 1px;

    background: #3e3a39;

}

.gro .secJigyo .btnTxt{

    font-size: 13px;

    font-weight: 300;

    letter-spacing: 1.5px;

}

@media only screen and (max-width:767px){

    .gro .secJigyo{

        margin-top: 92px;

    }

    .gro .secJigyo .jigyoInner{

        background: #f4f1e3;

    }

    .gro .secJigyo .contentBox{

        position: static;

        padding: 30px 0 70px;

    }

    .gro .secJigyo .wrapper{

        position: static;

        display: block;

    }

    .gro .secJigyo .secCmnTit{

        left: 4%;

        top: -45px;

    }

    .gro .secJigyo .secCmnTit .cmnEngTit img{

        width: auto;

        height: 126px;

    }

    .gro .secJigyo .txtBox{

        padding-left: 0;

    }

    .gro .secJigyo .topTit{

        font-size: 17px;

        letter-spacing: 2px;

    }

    .gro .secJigyo .txt{

        font-size: 13px;

        line-height: 1.69;

        letter-spacing: 0.5px;

        margin-top: 15px;

    }

    .gro .secJigyo .btnBox{

        width: 165px;

        padding-bottom: 13px;

        margin-top: 24px;

    }

    .gro .secJigyo .btnTxt{

        font-size: 12px;

        letter-spacing: 1px;

    }

}

/* secService */

.gro .secService{

    margin-top: 165px;

}

.gro .secService .boxList{
    display: flex;
    flex-wrap: wrap;
    margin-top: 106px;
    position: relative;
}
.gro .secService .boxItem{
    border: 1px solid #3e3a39;
    border-left: none;
    width: 50%;
}
.gro .secService .boxItem:nth-child(1){
    padding-right: 7px;
}
.gro .secService .boxItem:nth-child(2n){
    border-left: none;
    border-right: none;
    padding-left: 7px;
}
.gro .secService .boxItem:nth-child(3){
    border-top: none;
    padding-right: 7px;
}
.gro .secService .boxItem:nth-child(4){
    border-top: none;
}
.gro .secService .flBox {
    width: 760px;
    max-width: calc(100% - 60px);
    margin: 0 auto;
    padding: 100px 0;
}
.gro .secService .boxList .boxImg{
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.gro .secService .boxInner{
    text-decoration: none;
}
.gro .secService .txtBox{
 
}
.gro .secService .txtBox img{
    position: relative;
    top: -25px;
}
.gro .secService .topTit{
    font-size: 24px;
    font-weight: bold;
    margin-top: 60px;
    letter-spacing: 2px;
    color: #000;
}
.gro .secService .txt{
    font-size: 14px;
    margin-top: 25px;
    color: #000;
    letter-spacing: 1.5px;
}
.gro .secService .btnBox {
    width: 200px;
    padding-bottom: 18px;
    border-bottom: solid 1px #3e3a39;
    position: relative;
    margin: 25px 0px 0 auto;
    padding-right: 35px;
    color: #3e3a39;
}
.gro .secService .btnTxt{
    text-align: left;
    font-size: 13px;
    letter-spacing: 2px;
}
.gro .secService .btnBox::before {
    content: "";
    margin: auto;
    position: absolute;
    top: 5px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #3e3a39;
    border-right: 1px solid #3e3a39;
    transform: rotate(45deg);
}
.gro .secService .btnBox::after {
    content: "";
    margin: auto;
    position: absolute;
    top: 7px;
    right: 4px;
    width: 17px;
    height: 1px;
    background: #3e3a39;
}

@media only screen and (max-width:1600px){

    .gro .secService .btnBox{

        margin: 20px auto 0;

    }

}

@media only screen and (max-width:767px){

    .gro .secService{

        margin-top: 64px;

    }
    .gro .secService .boxList{
        display: block;
        margin-top: 39px;
    }
    .gro .secService .boxItem{
        border: 1px solid #3e3a39;
        border-left: none;
        border-right: none;
    }
    .gro .secService .boxItem:nth-child(1){
        padding-right: 0px;
    }
    .gro .secService .boxItem:nth-child(2n){
        border-left: none;
        border-top: none;
        padding-left: 0;
    }
    .gro .secService .boxItem:nth-child(3){
        border-top:none;
        padding-right: 0;
    }
    .gro .secService .boxItem:nth-child(4){
        border-top: none;
    }
    .gro .secService .boxList .boxImg{
        text-align: unset;
        width: 37.334%;
        margin: 0 auto 0 0;
        padding-top: 0px;
    }
    .gro .secService .flBox {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    .gro .secService .boxItem {
        width: 100%;
    }
    .gro .secService .boxInner{
        text-decoration: none;
    }
    .gro .secService .txtBox{
        padding: 40px 0 45px 25px;
        width: 62.666%;
    }
    .gro .secService .boxList .boxItem:nth-child(2n) .txtBox{
        padding: 40px 0 40px 15px;
    }
    .gro .secService .txtBox img{
        top: 0px;
    }
    .gro .secService .txtBox .img.im01{
        width: 65px;
    }
    .gro .secService .txtBox .img.im02{
        width: 35px;
    }
    .gro .secService .txtBox .img.im03{
        width: 54px;
    }
    .gro .secService .txtBox .img.im04{
        width: 87px;
    }
    .gro .secService .topTit{
        font-size: 14px;
        margin-top: 0;
        letter-spacing: 0.5px;
    }
    .gro .secService .txt{
        font-size: 11px;
        line-height: 1.63;
        margin-top: 10px;
    }
    .gro .secService .btnBox {
        width: 95px;
        padding-bottom: 9px;
        margin: 17px 0 0;
        padding-right: 35px;
    }
    .gro .secService .btnTxt{
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .gro .secService .btnBox::before {
        top: 3px;
        right: 0;
    }
    .gro .secService .btnBox::after {
        top: 5px;
        right: 0;
    }
    .gro .secService .flBox{
        display: flex;
        align-items: center;
    }
    .gro .secService .boxList .boxItem:nth-child(2n) .flBox{
        flex-direction: row-reverse;
    }
    .gro .secService .spanDot{
        display: none;
    }
    .gro .secService .spanSp{
        display: inline-block;
    }
}
@media only screen and (max-width:360px){
    .gro .secService .txtBox {
        padding: 38px 0 38px 25px;
    }
    .gro .secService .boxList .boxItem:nth-child(2n) .txtBox {
        padding: 29px 0 29px 15px;
    }
}
@media only screen and (max-width:359px){
    .gro .secService .txtBox {
        padding: 25px 0 30px 25px;
    }
    .gro .secService .boxList .boxItem:nth-child(2n) .txtBox {
        padding: 19px 0 17px 15px;
    }
}

/* secBenefits */

.gro .secBenefits{

    text-align: center;

    margin-top: 60px;

}

@media only screen and (max-width:767px){

    .gro .secBenefits{

        margin-top: 50px;

    }

}
/* animeLoadLeft */
.gro .animeLoadLeft{
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.scene02-end .gro  .animeLoadLeft{
    animation: animetionLeft 1s cubic-bezier(.785,.135,.15,.86) .5s normal forwards;
}
/* animeHideLeft */
.gro .animeHideLeft{
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.gro .animeHideLeft.jsShow{
    animation: animetionLeft 1s cubic-bezier(.785,.135,.15,.86) .5s normal forwards;
}
@keyframes animetionLeft{
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    to {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
}