@charset "UTF-8";


/* html
------------------------------------------------- */
html {
    overflow-y: hidden;
}


/* hnav, enav
------------------------------------------------- */
@media screen and (max-width:750px){
#hnav,
#enav {
    display: none;
}
}


/* mainvisual
------------------------------------------------- */
.mainvisual {
    width: 100%;
    height: 8.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    opacity: 0;
}
.mainvisual p {
    width: 100%;
    font-size: 0.18rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1;
    text-align: center;
    position: absolute;
    left: 0;
    top: 5.6rem;
    transition: 0.4s;
}
.mainvisual .box {
    width: 100vw;
    height: 3rem;
    display: flex;
    position: absolute;
    left: 0;
    top: 2.16rem;
}
.mainvisual .box .infinity {
    width: 23.542rem;
    position: absolute;
    right: 0;
    top: 0;
}
.mainvisual .box .infinity.on1 {
    animation: infinity-right 30s infinite linear 0s both;
}
.mainvisual .box .shape {
    width: auto;
    height: 3rem;
    position: absolute;
}
.mainvisual .box .shape.shape1 {
    width: 1.9959rem;
    left: 0;
}
.mainvisual .box .shape.shape2 {
    width: 2.785rem;
    left: 2.3959rem;
}
.mainvisual .box .shape.shape3 {
    width: 1.9128rem;
    left: 5.7809rem;
}
.mainvisual .box .shape.shape4 {
    width: 2.48rem;
    left: 8.3937rem;
}
.mainvisual .box .shape.shape5 {
    width: 2.3rem;
    left: 10.8737rem;
}
.mainvisual .box .shape.shape6 {
    width: 2.1224rem;
    left: 13.3737rem;
}
.mainvisual .box .shape.shape7 {
    width: 2.3504rem;
    left: 15.6961rem;
}
.mainvisual .box .shape.shape8 {
    width: 2.5619rem;
    left: 18.4465rem;
}
.mainvisual .box .shape.shape9 {
    width: 2.2336rem;
    left: 21.3084rem;
}
.mainvisual.on2 p {
    opacity: 0;
}
.mainvisual.on2 .box {
    width: 96vw;
    height: 9.2rem;
    border-radius: 50%;
    left: 2vw;
    top: 0.4rem;
    box-sizing: border-box;
}
.mainvisual.on2 .box .infinity {
    width: 100%;
    right: 0;
    display: block;
    transition: 0.1s ease;
}
.mainvisual.on2 .box .shape {
    top: 2rem;
    transition: 0.35s ease-in-out;
}
.mainvisual.on2 .box .shape.shape1 {
    left: calc(50% - 0.99795rem);
}
.mainvisual.on2 .box .shape.shape2 {
    left: calc(50% - 1.3925rem);
}
.mainvisual.on2 .box .shape.shape3 {
    left: calc(50% - 0.9564rem);
}
.mainvisual.on2 .box .shape.shape4 {
    left: calc(50% - 1.24rem);
}
.mainvisual.on2 .box .shape.shape5 {
    left: calc(50% - 1.15rem);
}
.mainvisual.on2 .box .shape.shape6 {
    left: calc(50% - 1.0612rem);
}
.mainvisual.on2 .box .shape.shape7 {
    left: calc(50% - 1.1752rem);
}
.mainvisual.on2 .box .shape.shape8 {
    left: calc(50% - 1.28095rem);
}
.mainvisual.on2 .box .shape.shape9 {
    left: calc(50% - 1.1168rem);
}
.mainvisual.on2.on3 .box .infinity {
    width: auto;
    position: static;
}
.mainvisual.on2.on3 .box .shape img {
    display: block;
    animation: shapeAnimation 0.3s ease 0.1s 1 forwards;
}
.mainvisual.on2.on3.on4 .box {
    animation: boxAnimation 12s ease-in-out infinite;
}
.mainvisual.on2.on3.on4 .box .shape {
    transition: 0.1s;
}
.mainvisual.on2.on3.on4 .box .shape img {
    animation: footerShape 8s linear infinite;
}
.mainvisual.on2.on3.on4 .box .shape.shape1 img,
.mainvisual.on2.on3.on4 .box .shape.shape5 img {
    animation: footerShape 60s linear infinite;
}
.mainvisual.on2.on3.on4 .box .shape.shape2 img,
.mainvisual.on2.on3.on4 .box .shape.shape8 img {
    animation: footerShape 50s linear infinite;
}
.mainvisual.on2.on3.on4 .box .shape.shape3 img,
.mainvisual.on2.on3.on4 .box .shape.shape7 img {
    animation: footerShape 40s linear infinite;
}
.mainvisual.on2.on3.on4 .box .shape.shape4 img,
.mainvisual.on2.on3.on4 .box .shape.shape6 img,
.mainvisual.on2.on3.on4 .box .shape.shape9 img {
    animation: footerShape 30s linear infinite;
}
.mainvisual h2 {
    width: 12.6738rem;
    text-align: center;
    padding-top: 0.4rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: 0.2s ease-out;
}
.mainvisual h2 span {
    height: 0.168rem;
    display: block;
    font-size: 0.14rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #8D8D8D;
    margin-top: 0.5rem;
    opacity: 0;
}
.mainvisual h2.active1 {
    opacity: 1;
}
.mainvisual h2.active1 path {
    fill: none;
    stroke: #2A323C;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1;
    animation: logoAnimation 1.4s ease-in forwards;
}
.mainvisual h2.active2 {
    opacity: 1;
}
.mainvisual h2.active2 path {
    fill: #2A323C;
    stroke: #2A323C;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1;
}
@media screen and (max-width:750px){
.mainvisual {
    height: 8rem;
}
.mainvisual p {
    font-size: 0.14rem;
    top: 4.25rem;
}
.mainvisual .box {
    height: 1rem;
    top: 2.16rem;
}
.mainvisual .box .infinity {
    width: 11.761rem;
    padding-top: 0.5rem;
}
.mainvisual .box .infinity.on1 {
    animation: infinity-right 30s infinite linear 0s both;
}
.mainvisual .box .shape {
    height: 1.5rem;
}
.mainvisual .box .shape.shape1 {
    width: 0.99795rem;
    left: 0;
    margin-right: 0.2rem;
}
.mainvisual .box .shape.shape2 {
    width: 1.3925rem;
    margin-right: 0.3rem;
    left: 1.19795rem;
}
.mainvisual .box .shape.shape3 {
    width: 0.9564rem;
    margin-right: 0.34rem;
    left: 2.89045rem;
}
.mainvisual .box .shape.shape4 {
    width: 1.24rem;
    left: 4.18685rem;
}
.mainvisual .box .shape.shape5 {
    width: 1.15rem;
    margin-right: 0.1rem;
    left: 5.42685rem;
}
.mainvisual .box .shape.shape6 {
    width: 1.0612rem;
    margin-right: 0.1rem;
    left: 6.67685rem;
}
.mainvisual .box .shape.shape7 {
    width: 1.1752rem;
    margin-right: 0.2rem;
    left: 7.83805rem;
}
.mainvisual .box .shape.shape8 {
    width: 1.28095rem;
    margin-right: 0.15rem;
    left: 9.21325rem;
}
.mainvisual .box .shape.shape9 {
    width: 1.1168rem;
    left: 10.6442rem;
}
.mainvisual.on2 .box {
    width: 120vw;
    height: 6.4rem;
    left: -10vw;
    top: 0.2rem;
}
.mainvisual.on2 .box .shape {
    top: 2.5rem;
}
.mainvisual.on2 .box .shape.shape1 {
    left: calc(50% - 0.498975rem);
}
.mainvisual.on2 .box .shape.shape2 {
    left: calc(50% - 0.69625rem);
}
.mainvisual.on2 .box .shape.shape3 {
    left: calc(50% - 0.4782rem);
}
.mainvisual.on2 .box .shape.shape4 {
    left: calc(50% - 0.64rem);
}
.mainvisual.on2 .box .shape.shape5 {
    left: calc(50% - 0.575rem);
}
.mainvisual.on2 .box .shape.shape6 {
    left: calc(50% - 0.5306rem);
}
.mainvisual.on2 .box .shape.shape7 {
    left: calc(50% - 0.5876rem);
}
.mainvisual.on2 .box .shape.shape8 {
    left: calc(50% - 0.640475rem);
}
.mainvisual.on2 .box .shape.shape9 {
    left: calc(50% - 0.5584rem);
}
.mainvisual.on2.on3.on4 .box {
    animation: boxAnimationSp 12s ease-in-out infinite;
}
.mainvisual h2 {
    width: 2.6015rem;
    padding: 0 0 1rem;
    margin-left: 0.2rem;
}
.mainvisual h2 span {
    height: 0.1705rem;
    font-size: 0.11rem;
    line-height: 1.55;
    margin: 0.2rem 0.2rem 0 0;
}
.mainvisual h2 span.mt {
    margin-top: 0.02rem;
}
.mainvisual h2.active1 path,
.mainvisual h2.active2 path {
    stroke-width: 0.5;
}
}


/* second
------------------------------------------------- */
.second {
    padding: 1.95rem 0 2.2rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: 0.4s;
}
.second.is-show {
    opacity: 1;
}
.second .inner {
    z-index: 2;
}
.second .con {
    width: 48.25%;
    margin-left: 0.64rem;
}
.second .con h3 {
    font-size: 0.67rem;
    font-weight: 100;
    font-variation-settings: "wght" 250;
    line-height: 1.328;
    margin-bottom: 0.5rem;
}
.second .con p {
    font-size: 0.18rem;
    line-height: 2.4;
    margin-bottom: 2em;
}
.second .photo {
    width: 45.33%;
    height: 6.33rem;
    margin-top: 1.48rem;
    position: relative;
}
.second .photo picture {
    position: absolute;
}
.second .photo picture img {
    position: relative;
    z-index: 2;
}
.second .photo .photo1 {
    width: 4.37rem;
    right: 0;
    top: 0;
}
.second .photo .photo2 {
    width: 2.97rem;
    left: 0;
    bottom: 0;
}
.second .photo .photo1::after,
.second .photo .photo2::after {
    content: '';
    width: 4.29rem;
    height: 5.09rem;
    background-color: #CED3D9;
    position: absolute;
    right: -0.31rem;
    bottom: -0.4rem;
    mix-blend-mode: multiply;
    filter: blur(30px);
    z-index: 1;
}
.second .photo .photo2::after {
    width: 2.92rem;
    height: 1.77rem;
    right: -0.3rem;
    bottom: -0.31rem;
}
.second .infiniteslide_wrap {
    opacity: 0.75;
    position: absolute;
    top: 1.24rem;
    z-index: 1;
}
.second .infiniteslide li {
    width: 39.9rem;
    margin-right: 1rem;
}
@media screen and (max-width:750px){
.second {
    padding: 0.26rem 0 0.95rem;
}
.second .con {
    width: 100%;
    margin: 0 0 0.3rem;
}
.second .con h3 {
    font-size: 0.38rem;
    line-height: 1.342;
    margin-bottom: 0.3rem;
}
.second .con p {
    font-size: 0.15rem;
    line-height: 2;
    margin-bottom: 0.3rem;
}
.second .photo {
    width: 100%;
    height: 3.4rem;
    margin-top: 0;
}
.second .photo .photo1 {
    width: 2.15rem;
    right: 0.16rem;
}
.second .photo .photo2 {
    width: 1.77rem;
}
.second .photo .photo1::after,
.second .photo .photo2::after {
    width: 2.11rem;
    height: 2.51rem;
    right: -0.16rem;
    bottom: -0.25rem;
}
.second .photo .photo2::after {
    width: 1.73rem;
    height: 1.07rem;
    right: -0.18rem;
    bottom: -0.19rem;
}
.second .infiniteslide_wrap {
    opacity: 0.5;
    top: 0.04rem;
}
.second .infiniteslide li {
    width: 14.1625rem;
    margin-right: 0.3rem;
}
}


/* about
------------------------------------------------- */
.about {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: 0.4s;
}
.about.is-show {
    opacity: 1;
}
.about .inner {
    max-width: 13.12rem;
}
.about .headline1 {
    margin-left: 0.24rem;
}
.about .box {
    padding: 1.4rem 0 2.65rem;
    position: relative;
}
.about .box::before,
.about .box::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #2F3136;
    border-radius: 1.2rem 0 0 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.about .box::after {
    width: 100vw;
    border-radius: 0;
    left: 50%;
    z-index: 1;
}
.about .box .sec1 {
    padding: 0 0.49rem 0.4rem 1.09rem;
    position: relative;
    z-index: 4;
}
.about .box .sec1 .ttl {
    width: 40%;
}
.about .box .sec1 .headline2,
.about .box .sec1 .headline2 span {
    color: #fff;
}
.about .box .sec1 .con {
    width: 44%;
    margin-top: 0.5rem;
}
.about .box .sec1 .con p {
    line-height: 2.2;
    color: #fff;
}
.about .box .sec2 {
    width: 11.37rem;
    margin-left: 1.21rem;
    position: relative;
    z-index: 3;
}
.about .box .sec2::after {
    content: '';
    width: 100%;
    height: 9.28rem;
    background: url("../img/recruit/top/about_bg.png") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: -0.76rem;
}
.about .box .sec2 ul li {
    width: 2.68rem;
    margin: 0 0 1.72rem 0.47rem;
    position: relative;
    z-index: 2;
}
.about .box .sec2 ul li.about2 {
    width: 2.53rem;
    margin: 0 0 0 0.56rem;
}
.about .box .sec2 ul li.about3 {
    position: absolute;
    left: 4.4rem;
    top: 1.93rem;
    margin: 0;
}
.about .box .sec2 ul li.about4 {
    width: 2.53rem;
    position: absolute;
    left: 8.38rem;
    top: 1.1rem;
    margin: 0;
}
.about .box .sec2 ul li.about5 {
    position: absolute;
    left: 8.2rem;
    top: 4.2rem;
    margin: 0;
}
.about .box .sec2 ul li figure {
    display: block;
    cursor: pointer;
}
.about .box .sec2 ul li figure img {
    display: block;
    transition: 0.15s;
}
.about .box .sec2 ul li figure figcaption {
    width: 2.5rem;
    height: 0.44rem;
    background-color: #fff;
    border-radius: 0.4rem;
    font-size: 0.18rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0.04rem auto 0;
    padding-bottom: 0.02rem;
    box-sizing: border-box;
    position: relative;
}
.about .box .sec2 ul li.about2 figure figcaption {
    margin-top: 0.25rem;
}
.about .box .sec2 ul li.about3 figure figcaption {
    margin-top: 0.1rem;
}
.about .box .sec2 ul li.about4 figure figcaption {
    margin-top: 0.24rem;
}
.about .box .sec2 ul li.about5 figure figcaption {
    margin-top: 0.1rem;
}
.about .box .sec2 ul li figure figcaption::after {
    content: '';
    width: 0.3rem;
    height: 0.3rem;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86577%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086577%22%20transform%3D%22translate(-439.915%20-3093.915)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_85%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2085%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(439.915%203093.915)%22%20fill%3D%22%23d562ff%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86576%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086576%22%20transform%3D%22translate(450.4%203104.401)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94450%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094450%22%20d%3D%22M-12898.692-12850.5h9.028%22%20transform%3D%22translate(12898.692%2012855.014)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94451%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094451%22%20d%3D%22M0%2C0H9.028%22%20transform%3D%22translate(4.514)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    bottom: -0.23rem;
    margin-left: -0.15rem;
    transition: 0.15s;
}
@media (hover: hover) and (min-width:751px) {
.about .box .sec2 ul li figure:hover img {
    transform: translateY(-0.07rem);
}
.about .box .sec2 ul li figure:hover figcaption::after {
    transform: rotate(90deg);
}
}
@media screen and (max-width:750px){
.about .headline1 {
    margin-left: 0;
}
.about .box {
    padding: 0.64rem 0 2.5rem;
}
.about .box::before {
    width: 100vw;
    border-radius: 0.4rem 0.4rem 0 0;
    left: -3.87vw;
}
.about .box::after {
    display: none;
}
.about .box .sec1 {
    padding: 0 0.24rem 0.3rem;
}
.about .box .sec1 .ttl {
    width: 100%;
}
.about .box .sec1 .con {
    width: 100%;
    margin-top: 0.225rem;
}
.about .box .sec1 .con p {
    font-size: 0.14rem;
    line-height: 2;
}
.about .box .sec2 {
    width: 95%;
    margin: 0 auto;
}
.about .box .sec2::after {
    content: '';
    width: 5.48rem;
    height: 7.18rem;
    background-image: url("../img/recruit/top/about_bg_sp.png");
    left: -1.04rem;
    top: -0.54rem;
}
.about .box .sec2 ul li {
    width: 1.45rem;
    margin: 0 0 0.3rem;
}
.about .box .sec2 ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about .box .sec2 ul li.about2 {
    width: 1.3688rem;
    margin: 0.6rem 0 0.3rem;
}
.about .box .sec2 ul li.about3 {
    position: static;
    margin: 0 0 0.3rem;
}
.about .box .sec2 ul li.about4 {
    width: 1.3688rem;
    position: static;
    margin: 0.6rem 0 0.3rem;
}
.about .box .sec2 ul li.about5 {
    position: static;
    margin: 0 auto;
}
.about .box .sec2 ul li figure figcaption {
    width: 1.32rem;
    height: 0.3rem;
    font-size: 0.14rem;
    margin: 0.08rem auto 0;
    padding-bottom: 0.01rem;
}
.about .box .sec2 ul li.about2 figure figcaption {
    margin-top: 0.2rem;
}
.about .box .sec2 ul li.about3 figure figcaption {
    margin-top: 0.15rem;
}
.about .box .sec2 ul li.about4 figure figcaption {
    margin-top: 0.2rem;
}
.about .box .sec2 ul li.about5 figure figcaption {
    margin-top: 0.15rem;
}
.about .box .sec2 ul li figure figcaption::after {
    bottom: -0.28rem;
}
}


/* future
------------------------------------------------- */
.future {
    margin: -0.8rem 0 1.15rem;
    position: relative;
    z-index: 2;
}
.future::after {
    content: '';
    width: 100vw;
    height: 9.11rem;
    background: url("../img/recruit/top/future_bg.png") center top no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -50vw;
    z-index: 1;
}
.future .inner {
    max-width: 13.12rem;
}
.future .box {
    padding-top: 1.5rem;
    position: relative;
}
.future .box::before,
.future .box::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #D9DDE3;
    border-radius: 0 1.2rem 1.2rem 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
.future .box::before {
    width: 100vw;
    border-radius: 0;
    right: 50%;
    z-index: 1;
}
.future .box .sec1 {
    padding: 0 0.94rem 0.5rem 0.72rem;
    position: relative;
    z-index: 4;
}
.future .box .sec1 .ttl {
    width: 52%;
}
.future .box .sec1 .con {
    width: 44%;
    margin-top: 0.5rem;
}
.future .box .sec1 .con p {
    line-height: 2.2;
}
.future .box .sec2 {
    border-radius: 0 0 1.2rem 0;
    position: relative;
    z-index: 4;
    overflow: hidden;
}
.future .box .sec2::after {
    content: '';
    width: 100vw;
    height: 9.11rem;
    background: url("../img/recruit/top/future_bg.jpg") center top no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -50vw;
    z-index: 1;
}
.future .box .sec2 .con {
    position: relative;
    z-index: 2;
}
.future .box .sec2 .img {
    width: 10.94rem;
    margin: 0 auto 0.25rem;
}
.future .box .sec2 h5 {
    font-size: 0.22rem;
    text-align: center;
}
.future .box .sec2 h5 span {
    display: inline-block;
    background-color: #fff;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    line-height: 1.18;
    margin: 0.075rem 0;
}
.future .box .sec2 ul {
    width: 9.11rem;
    margin: 0.55rem auto 0.63rem;
    display: flex;
    justify-content: space-between;
}
.future .box .sec2 ul li {
    width: 1.73rem;
    height: 1.73rem;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0.24rem 0.22rem rgba(0,0,0,0.1);
    font-size: 0.18rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.future .box .sec2 ul li:nth-child(2),
.future .box .sec2 ul li:nth-child(4) {
    margin-top: 1.04rem;
}
.future .box .sec2 p {
    font-size: 0.28rem;
    line-height: 1.8;
    color: #fff;
    text-align: center;
    padding-bottom: 0.8rem;
}
@media screen and (max-width:750px){
.future {
    margin: -1.15rem 0 0.5rem;
}
.future::after {
    display: none;
}
.future .box {
    padding-top: 0.5rem;
}
.future .box::after {
    width: 100vw;
    background: url("../img/recruit/top/future_bg_sp.png") center bottom no-repeat #D9DDE3;
    background-size: 100% auto;
    border-radius: 0 0.4rem 0.4rem 0;
    right: -3.87vw;
}
.future .box::before {
    display: none;
}
.future .box .sec1 {
    padding: 0 0.24rem 0.45rem;
}
.future .box .sec1 .ttl {
    width: 100%;
}
.future .box .sec1 .con {
    width: 100%;
    margin-top: 0.25rem;
}
.future .box .sec1 .con p {
    font-size: 0.14rem;
    line-height: 2;
}
.future .box .sec2 {
    border-radius: 0;
    overflow: inherit;
}
.future .box .sec2::after {
    display: none;
}
.future .box .sec2 .img {
    width: 5.038rem;
    margin: 0 0 0 -0.755rem;
}
.future .box .sec2 h5 {
    font-size: 0.18rem;
}
.future .box .sec2 ul {
    width: 3.39rem;
    margin: 0.25rem auto 0;
    flex-wrap: wrap;
}
.future .box .sec2 ul li {
    width: 1.13rem;
    height: 1.13rem;
    box-shadow: 0 0.08rem 0.12rem rgba(0,0,0,0.1);
    font-size: 0.14rem;
}
.future .box .sec2 ul li:nth-child(2) {
    margin-top: 0.85rem;
}
.future .box .sec2 ul li:nth-child(4),
.future .box .sec2 ul li:nth-child(5) {
    margin-top: -0.4rem;
}
.future .box .sec2 p {
    font-size: 0.19rem;
    line-height: 1.789;
    padding-bottom: 0.55rem;
    margin-top: -0.1rem;
}
}


/* voice
------------------------------------------------- */
.voice {
    margin-bottom: 2.27rem;
}
.voice p {
    line-height: 2.2;
    margin-bottom: 0.45rem;
}
.voice ul li {
    width: 23.88%;
    cursor: pointer;
}
.voice ul li picture {
    display: block;
    width: 100%;
    height: 39.65vw;
    position: relative;
    overflow: hidden;
}
.voice ul li picture::after {
    content: '';
    width: 0.3rem;
    height: 0.3rem;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86577%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086577%22%20transform%3D%22translate(-439.915%20-3093.915)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_85%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2085%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(439.915%203093.915)%22%20fill%3D%22%23322bff%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86576%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086576%22%20transform%3D%22translate(450.4%203104.401)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94450%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094450%22%20d%3D%22M-12898.692-12850.5h9.028%22%20transform%3D%22translate(12898.692%2012855.014)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94451%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094451%22%20d%3D%22M0%2C0H9.028%22%20transform%3D%22translate(4.514)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center center no-repeat;
    background-size: cover;
    position: absolute;
    right: 0.16rem;
    bottom: 0.16rem;
    transition: 0.15s;
    z-index: 2;
}
.voice ul li.voice2 picture::after {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86577%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086577%22%20transform%3D%22translate(-439.915%20-3093.915)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_85%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2085%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(439.915%203093.915)%22%20fill%3D%22%23ff4b67%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86576%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086576%22%20transform%3D%22translate(450.4%203104.401)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94450%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094450%22%20d%3D%22M-12898.692-12850.5h9.028%22%20transform%3D%22translate(12898.692%2012855.014)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94451%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094451%22%20d%3D%22M0%2C0H9.028%22%20transform%3D%22translate(4.514)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}
.voice ul li.voice3 picture::after {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86577%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086577%22%20transform%3D%22translate(-439.915%20-3093.915)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_85%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2085%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(439.915%203093.915)%22%20fill%3D%22%2366d97d%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86576%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086576%22%20transform%3D%22translate(450.4%203104.401)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94450%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094450%22%20d%3D%22M-12898.692-12850.5h9.028%22%20transform%3D%22translate(12898.692%2012855.014)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94451%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094451%22%20d%3D%22M0%2C0H9.028%22%20transform%3D%22translate(4.514)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}
.voice ul li.voice4 picture::after {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86577%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086577%22%20transform%3D%22translate(-439.915%20-3093.915)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_85%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2085%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(439.915%203093.915)%22%20fill%3D%22%233bd5db%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86576%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086576%22%20transform%3D%22translate(450.4%203104.401)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94450%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094450%22%20d%3D%22M-12898.692-12850.5h9.028%22%20transform%3D%22translate(12898.692%2012855.014)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_94451%22%20data-name%3D%22%E3%83%91%E3%82%B9%2094451%22%20d%3D%22M0%2C0H9.028%22%20transform%3D%22translate(4.514)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}
.voice ul li picture h4 {
    font-size: 0.85rem;
    font-weight: 100;
    font-variation-settings: "wght" 250;
    line-height: 1.45;
    color: #fff;
    position: absolute;
    left: 0.13rem;
    bottom: 0;
    z-index: 2;
}
.voice ul li picture img {
    display: block;
    transition: 0.2s;
}
.voice ul li dl {
    padding: 0.16rem 0.23rem 0;
    display: flex;
    align-items: center;
}
.voice ul li dl dt {
    font-size: 0.28rem;
    font-weight: 500;
    line-height: 1.1;
    margin-right: 0.2rem;
}
.voice ul li dl dd {
    font-size: 0.15rem;
    margin-top: 0.05rem;
}
@media (hover: hover) and (min-width:751px) {
.voice ul li:hover picture img {
    transform: scale(1.05);
}
.voice ul li:hover picture::after {
    transform: rotate(90deg);
}
}
@media screen and (max-width:750px){
.voice {
    margin-bottom: 0.75rem;
}
.voice .headline1 {
    margin-bottom: 0.2rem;
}
.voice p {
    font-size: 0.14rem;
    line-height: 2;
    margin-bottom: 0.2rem;
}
.voice ul li {
    width: 100%;
    margin-bottom: 0.22rem;
}
.voice ul li picture {
    height: 2.1rem;
}
.voice ul li picture::after {
    right: 0.1rem;
    bottom: 0.1rem;
}
.voice ul li picture h4 {
    font-size: 0.6rem;
    left: 0.1rem;
}
.voice ul li dl {
    padding: 0.1rem 0.15rem 0;
}
.voice ul li dl dt {
    font-size: 0.22rem;
}
.voice ul li dl dd {
    font-size: 0.14rem;
    margin-top: 0.025rem;
}
}


/* culture
------------------------------------------------- */
.culture {
    margin-bottom: 1.55rem;
    position: relative;
}
.culture::after {
    content: '';
    width: 11.1148rem;
    height: 10.5151rem;
    background: url("../img/recruit/common/gnav_shape.svg") center center no-repeat;
    background-size: cover;
    position: absolute;
    right: 50%;
    top: -1.06rem;
    margin-right: 3.71rem;
    z-index: 1;
    animation: footerShape 40s linear infinite;
}
.culture .inner {
    z-index: 2;
}
.culture .sec {
    margin-bottom: 1.3rem;
}
.culture .sec .ttl {
    width: 4rem;
    margin-right: 0.3rem;
}
.culture .sec .photo {
    width: 62vw;
    margin-right: calc(6.32rem - 50cqw);
}
.culture ul {
    width: 11.35rem;
    margin: 0 auto;
}
.culture ul li {
    width: 5rem;
    padding: 0 0.45rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.culture ul li.right {
    margin-right: 0.25rem;
}
.culture ul li h4 {
    font-size: 0.34rem;
    font-weight: 100;
    font-variation-settings: "wght" 250;
    line-height: 1.4;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}
.culture ul li p {
    font-size: 0.15rem;
}
.culture ul li.waku {
    display: block;
    background-color: #fff;
    border-radius: 0.82rem;
    padding: 0.5rem 0.64rem 0.62rem;
    position: relative;
}
.culture ul li.waku .cover {
    opacity: 0;
}
.culture ul li.waku.isAnimate .cover {
    animation: fadeUp 0.5s ease 0.1s 1 forwards;
}
.culture ul li.waku h4 {
    font-size: 0.44rem;
}
.culture ul li.waku.wi1 {
    width: 9.23rem;
    margin: 0.65rem auto 0.62rem;
}
.culture ul li.waku.wi1 .con {
    width: 45%;
}
.culture ul li.waku.wi1 .photo {
    width: 43%;
    margin: 0.1rem 0.2rem 0 0;
}
.culture ul li.waku.wi1 .photo img {
    display: block;
    border-radius: 0.08rem;
}
.culture ul li.waku.wi2 {
    width: 5.12rem;
}
.culture ul li.waku svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -0.06rem;
    right: 0.03rem;
    top: -0.06rem;
    bottom: 0.03rem;
    transform: scale(-1, -1);
}
.culture ul li.waku svg .rect1 {
    width: 100%;
    height: 100%;
}
.culture ul li.waku svg .rect2 {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
}
.culture ul li.waku svg .rect1,
.culture ul li.waku svg .rect2 {
    stroke-dasharray: 2700;
    stroke-width: 0.5px;
    fill: transparent;
    opacity: 0;
}
.culture ul li.waku.isAnimate svg .rect1,
.culture ul li.waku.isAnimate svg .rect2 {
    animation: cultureAnimation 1.4s linear 0.1s 1 forwards;
}
.culture ul li.co1 .rect1,
.culture ul li.co1 .rect2 {
    stroke: #d462ff;
}
.culture ul li.co2 .rect1,
.culture ul li.co2 .rect2 {
    stroke: #7BFF95;
}
.culture ul li.co3 .rect1,
.culture ul li.co3 .rect2 {
    stroke: #FF4B67;
}
.culture ul li.co4 .rect1,
.culture ul li.co4 .rect2 {
    stroke: #322BFF;
}
.culture .shape {
    width: 11.11rem;
    position: absolute;
}
@media screen and (max-width:750px){
.culture {
    margin-bottom: 0.7rem;
}
.culture::after {
    width: 5.7816rem;
    height: 5.4697rem;
    top: 1.05rem;
    margin-right: 0.14rem;
}
.culture .sec {
    margin-bottom: 0.6rem;
}
.culture .sec .ttl {
    width: 100%;
    margin: 0 0 0.2rem;
}
.culture .sec .ttl .headline1 {
    margin-bottom: 0.2rem;
}
.culture .sec .ttl p {
    font-size: 0.14rem;
    line-height: 2;
}
.culture .sec .photo {
    width: 96.266vw;
    margin-right: -2vw;
}
.culture ul {
    width: 100%;
    margin: 0 auto;
}
.culture ul li {
    width: 3.01rem;
    padding: 0 0.24rem;
    margin-bottom: 0.3rem;
}
.culture ul li.right {
    margin-right: 0;
}
.culture ul li:nth-child(5),
.culture ul li:nth-child(7) {
    margin-left: 0.45rem;
}
.culture ul li h4 {
    font-size: 0.2rem;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin-bottom: 0.15rem;
}
.culture ul li p {
    font-size: 0.14rem;
    line-height: 2;
}
.culture ul li.waku {
    width: 3.42rem;
    border-radius: 0.56rem;
    padding: 0.35rem 0.35rem 0.4rem;
}
.culture ul li.waku h4 {
    font-size: 0.26rem;
}
.culture ul li.waku.wi1 {
    width: 3.42rem;
    margin: 0 0 0.3rem;
}
.culture ul li.waku.wi1 .con {
    width: 100%;
}
.culture ul li.waku.wi1 .photo {
    width: 100%;
    margin: 0.1rem 0 0;
}
.culture ul li.waku.wi2 {
    width: 3.42rem;
}
.culture ul li.waku svg {
    left: -0.04rem;
    right: 0.02rem;
    top: -0.04rem;
    bottom: 0.02rem;
}
}


/* description
------------------------------------------------- */
.description {
    background-color: #D9DDE3;
    padding: 0.95rem 0 1.65rem;
    position: relative;
}
.description::after {
    content: '';
    width: 11.1148rem;
    height: 10.5151rem;
    background: url("../img/recruit/common/gnav_shape.svg") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: -6.45rem;
    margin-left: 1.7rem;
    z-index: 1;
    animation: footerShape 40s linear infinite;
}
.description .inner {
    z-index: 2;
}
.description .headline1 {
    margin-bottom: 0.7rem;
}
.description .box {
    width: 10.48rem;
    background-color: #fff;
    border-radius: 0.16rem;
    padding: 0.55rem 1rem 1.5rem;
    margin: 0 auto;
    box-sizing: border-box;
}
.description .box table {
    width: 100%;
}
.description .box table th {
    width: 20.5%;
    font-size: 0.16rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    padding: 0.3rem 0;
    border-bottom: 0.01rem solid #CECECE;
}
.description .box table td {
    font-size: 0.15rem;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    padding: 0.3rem 0;
    border-bottom: 0.01rem solid #CECECE;
}
.description .btn {
    width: 5.45rem;
    margin: -0.69rem auto 0;
}
.description .btn a {
    width: 100%;
    height: 1.38rem;
    background-color: #737579;
    border-radius: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.description .btn a::after {
    content: '';
    width: 102%;
    height: 102%;
    background: url("../img/recruit/top/entry_bg.jpg") center center no-repeat;
    background-size: cover;
    border-radius: 0.8rem;
    position: absolute;
    left: -1%;
    top: -1%;
    transform: scale(0);
    transition: 0.2s;
    z-index: 1;
}
.description .btn a span {
    font-size: 0.29rem;
    font-weight: 500;
    color: #fff;
    position: relative;
    transition: 0.2s;
    z-index: 2;
}
@media (hover: hover) and (min-width:751px) {
.description .btn a:hover::after {
    transform: scale(1);
}
.description .btn a:hover span {
    letter-spacing: 0.1em;
}
}
@media screen and (max-width:750px){
.description {
    padding: 0.4rem 0 0.65rem;
}
.description::after {
    width: 5.7816rem;
    height: 5.4697rem;
    top: -1.55rem;
    margin-left: 0.43rem;
}
.description .headline1 {
    margin-bottom: 0.35rem;
}
.description .headline1 span {
    height: 0.34rem;
    overflow: hidden;
}
.description .box {
    width: 100%;
    padding: 0.3rem 0.24rem 1rem;
}
.description .box table th {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: none;
}
.description .box table th .spon {
    display: inline;
}
.description .box table td {
    display: block;
    width: 100%;
    font-size: 0.15rem;
    padding: 0.1rem 0 0.2rem;
    margin-bottom: 0.2rem;
}
.description .btn {
    width: 2.98rem;
    margin: -0.38rem auto 0;
}
.description .btn a {
    height: 0.76rem;
}
.description .btn a span {
    font-size: 0.18rem;
}
}


/* footer
------------------------------------------------- */
#footer {
    background-color: #D9DDE3;
}


/* modal-about
------------------------------------------------- */
#modal-about {
    width: 91.6vw;
    height: 100vh;
    background-color: #D9DDE3;
    padding: 0 1.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: -93vw;
    top: 0;
    box-sizing: border-box;
    z-index: 99;
    transition: 0.3s;
}
body.about-active #modal-about {
    right: 0;
}
#modal-about h3 {
    font-size: 0.15rem;
    letter-spacing: normal;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    position: absolute;
    left: 0.77rem;
    top: 0.4rem;
}
#modal-about h3 span {
    height: 0.32rem;
    display: inline-block;
    font-size: 0.32rem;
    padding-right: 0.15rem;
}
#modal-about .about-cont {
    width: 9.4rem;
    height: 3.4rem;
    margin: 0 auto;
    padding: 2.2rem 0;
    position: absolute;
    opacity: 0;
    z-index: 1
}
#modal-about.active1 .about-cont1,
#modal-about.active2 .about-cont2,
#modal-about.active3 .about-cont3,
#modal-about.active4 .about-cont4,
#modal-about.active5 .about-cont5 {
    opacity: 1;
    z-index: 10;
}
#modal-about .about-cont .sec figure {
    width: 3.91rem;
}
#modal-about .about-cont .sec .con {
    width: 4.4rem;
    position: relative;
}
/*#modal-about .about-cont .sec .con::after {
    content: '';
    width: 95%;
    height: 0.75rem;
    background: linear-gradient(0deg, rgba(217,221,227,1) 0, rgba(217,221,227,0.94) 60%, rgba(217,221,227,0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
}*/
#modal-about .about-cont .sec .con h4 {
    font-size: 0.48rem;
    font-weight: 100;
    font-variation-settings: "wght" 250;
    line-height: 1.45;
    margin-bottom: 0.25rem;
}
#modal-about .about-cont .sec .con .over {
    width: 100%;
    height: 3.2rem;
    overflow-y: auto;
    position: relative;
}
#modal-about .about-cont .sec .con .over p {
    line-height: 2.2;
    padding-bottom: 0.6rem;
}
#modal-about .about-cont .mnav {
    width: 100%;
    padding-left: 8.4vw;
    position: fixed;
    left: 0;
    bottom: 0.5rem;
    box-sizing: border-box;
    display: none;
}
#modal-about .about-cont .mnav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
#modal-about .about-cont .mnav ul li {
    width: 0.6rem;
    height: 0.6rem;
    background-color: #CECECE;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}
#modal-about .about-cont .mnav ul li::before {
    content: '';
    width: 0.24rem;
    height: 0.14rem;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.243%22%20height%3D%2213.501%22%20viewBox%3D%220%200%2020.243%2013.501%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-round-back%22%20data-name%3D%22Icon%20ionic-ios-arrow-round-back%22%20d%3D%22M20.791%2C11.51a.919.919%2C0%2C0%2C0-.007%2C1.294l4.268%2C4.282H8.789a.914.914%2C0%2C0%2C0%2C0%2C1.828H25.052L20.777%2C23.2a.925.925%2C0%2C0%2C0%2C.007%2C1.294.91.91%2C0%2C0%2C0%2C1.287-.007l5.794-5.836h0a1.026%2C1.026%2C0%2C0%2C0%2C.19-.288.872.872%2C0%2C0%2C0%2C.07-.352.916.916%2C0%2C0%2C0-.26-.64l-5.794-5.836A.9.9%2C0%2C0%2C0%2C20.791%2C11.51Z%22%20transform%3D%22translate(-7.882%20-11.252)%22%20fill%3D%22%232f3136%22%2F%3E%3C%2Fsvg%3E') right center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.07rem 0 0 -0.12rem;
    transition: 0.3s;
}
#modal-about .about-cont .mnav ul li:nth-child(1)::before {
    transform: scale(-1, 1);
}
#modal-about .about-cont .mnav ul li:nth-child(2) {
    width: 1.6rem;
    height: auto;
    background-color: rgba(0,0,0,0);
    border-radius: 0;
    margin: 0 0.2rem;
    text-align: center;
}
#modal-about .about-cont .mnav ul li:nth-child(2) a {
    display: block;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2216.25%22%20viewBox%3D%220%200%2020%2016.25%22%3E%20%3Cpath%20id%3D%22Icon_awesome-list-ul%22%20data-name%3D%22Icon%20awesome-list-ul%22%20d%3D%22M1.875%2C3.375A1.875%2C1.875%2C0%2C1%2C0%2C3.75%2C5.25%2C1.875%2C1.875%2C0%2C0%2C0%2C1.875%2C3.375Zm0%2C6.25A1.875%2C1.875%2C0%2C1%2C0%2C3.75%2C11.5%2C1.875%2C1.875%2C0%2C0%2C0%2C1.875%2C9.625Zm0%2C6.25A1.875%2C1.875%2C0%2C1%2C0%2C3.75%2C17.75a1.875%2C1.875%2C0%2C0%2C0-1.875-1.875Zm17.5.625H6.875a.625.625%2C0%2C0%2C0-.625.625v1.25A.625.625%2C0%2C0%2C0%2C6.875%2C19h12.5A.625.625%2C0%2C0%2C0%2C20%2C18.375v-1.25A.625.625%2C0%2C0%2C0%2C19.375%2C16.5Zm0-12.5H6.875a.625.625%2C0%2C0%2C0-.625.625v1.25a.625.625%2C0%2C0%2C0%2C.625.625h12.5A.625.625%2C0%2C0%2C0%2C20%2C5.875V4.625A.625.625%2C0%2C0%2C0%2C19.375%2C4Zm0%2C6.25H6.875a.625.625%2C0%2C0%2C0-.625.625v1.25a.625.625%2C0%2C0%2C0%2C.625.625h12.5A.625.625%2C0%2C0%2C0%2C20%2C12.125v-1.25A.625.625%2C0%2C0%2C0%2C19.375%2C10.25Z%22%20transform%3D%22translate(0%20-3.375)%22%20fill%3D%22%232f3136%22%2F%3E%3C%2Fsvg%3E') center top no-repeat;
    background-size: 0.2rem auto;
    padding-top: 0.18rem;
}
#modal-about .about-cont .mnav ul li:nth-child(2) a span {
    font-size: 0.14rem;
    font-weight: 500;
}
#modal-about .about-cont .mnav ul li:nth-child(2)::before {
    display: none;
}
#modal-about .btn,
#modal-voice .btn {
    width: 1.14rem;
    height: 1.14rem;
    position: fixed;
    right: 0.39rem;
    bottom: 0.46rem;
    cursor: pointer;
    display: none;
    z-index: 12;
}
#modal-about .btn::after,
#modal-voice .btn::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #D562FF;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    transition: 0.2s;
}
#modal-about .btn span,
#modal-voice .btn span {
    width: 0.56rem;
    height: 0.32rem;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256.425%22%20height%3D%2233.732%22%20viewBox%3D%220%200%2056.425%2033.732%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_86605%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2086605%22%20transform%3D%22translate(-1354.788%20-13.135)%22%20style%3D%22isolation%3A%20isolate%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_93995%22%20data-name%3D%22%E3%83%91%E3%82%B9%2093995%22%20d%3D%22M-8036.8-14938.271h-64%22%20transform%3D%22translate(901.651%2017001.322)%20rotate(30)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_93996%22%20data-name%3D%22%E3%83%91%E3%82%B9%2093996%22%20d%3D%22M-8036.8-14938.271h-64%22%20transform%3D%22translate(15839.922%208932.521)%20rotate(-30)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 2;
}
@media screen and (max-height:650px){
#modal-about {
    display: block;
    overflow-y: auto;
}
#modal-about .about-cont {
    padding: 1.2rem 0 2.2rem;
}
#modal-about .about-cont .mnav {
    padding-left: 0;
    position: absolute;
    left: 0;
}
}
@media (hover: hover) and (min-width:751px) {
#modal-about .about-cont .mnav ul li:hover::before {
    margin-left: -0.06rem;
}
#modal-about .about-cont .mnav ul li:nth-child(1):hover::before {
    margin-left: -0.18rem;
}
#modal-about .btn:hover::after,
#modal-voice .btn:hover::after {
    width: 95%;
    height: 95%;
}
}
@media screen and (max-width:750px){
#modal-about {
    width: 100vw;
    padding: 0;
    display: block;
    right: -105vw;
    overflow-y: auto;
}
#modal-about h3 {
    font-size: 0.14rem;
    display: block;
    left: 3.87vw;
    top: 0.3rem;
}
#modal-about h3 span {
    height: 0.24rem;
    display: block;
    font-size: 0.24rem;
    margin-bottom: 0.05rem;
    padding: 0;
}
#modal-about .about-cont {
    width: 92.26%;
    height: auto;
    padding: 1.15rem 0 1.8rem;
    left: 3.78vw;
}
#modal-about .about-cont .sec figure {
    width: 2.93rem;
    margin: 0 auto;
    padding-bottom: 0.125rem;
}
#modal-about .about-cont .sec .con {
    width: 100%;
}
#modal-about .about-cont .sec .con::after {
    height: 0.6rem;
}
#modal-about .about-cont .sec .con h4 {
    font-size: 0.34rem;
    margin-bottom: 0.1rem;
}
#modal-about .about-cont .sec .con .over {
    height: 2rem;
}
#modal-about .about-cont .sec .con .over p {
    font-size: 0.15rem;
    line-height: 1.8;
    padding-bottom: 0.4rem;
}
#modal-about .about-cont .mnav {
    padding-left: 0;
    position: absolute;
    left: 0;
    bottom: 1rem;
    display: none;
}
#modal-about .about-cont .mnav ul li {
    width: 0.46rem;
    height: 0.46rem;
}
#modal-about .about-cont .mnav ul li::before {
    width: 0.16rem;
    height: 0.11rem;
    margin: -0.055rem 0 0 -0.08rem;
}
#modal-about .about-cont .mnav ul li:nth-child(2) a {
    padding-top: 0.15rem;
}
#modal-about .btn,
#modal-voice .btn {
    width: 0.72rem;
    height: 0.72rem;
    right: 0.15rem;
    bottom: auto;
    top: 0.22rem;
}
#modal-about .btn span,
#modal-voice .btn span {
    width: 0.35rem;
    height: 0.2rem;
}
}


/* modal-voice
------------------------------------------------- */
#modal-voice {
    width: 91.6vw;
    height: 100vh;
    background-color: #fff;
    padding-left: 0.75rem;
    position: fixed;
    right: -93vw;
    top: 0;
    box-sizing: border-box;
    z-index: 99;
    transition: 0.3s;
    overflow-y: auto;
}
body.voice-active #modal-voice {
    right: 0;
}
#modal-voice h3 {
    font-size: 0.15rem;
    letter-spacing: normal;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    padding: 0.4rem 0 0.1rem;
}
#modal-voice h3 span {
    height: 0.32rem;
    display: inline-block;
    font-size: 0.32rem;
    padding-right: 0.15rem;
}
#modal-voice .voice-cont {
    position: absolute;
    opacity: 0;
    z-index: 1;
}
#modal-voice.active1 .voice-cont1,
#modal-voice.active2 .voice-cont2,
#modal-voice.active3 .voice-cont3,
#modal-voice.active4 .voice-cont4 {
    opacity: 1;
    z-index: 10;
}
#modal-voice .voice-cont .photo1 {
    margin-bottom: 0.35rem;
    position: relative;
}
#modal-voice .voice-cont .photo1 .vnav {
    width: 3.6rem;
    background-color: #fff;
    border-radius: 0 0 0 0.3rem;
    padding: 0 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
}
#modal-voice .voice-cont .photo1 .vnav ul {
    height: 0.52rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#modal-voice .voice-cont .photo1 .vnav ul li {
    font-size: 0.15rem;
    line-height: 1.4;
    color: rgba(47,49,54,0.5);
    padding-left: 0.18rem;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}
#modal-voice .voice-cont .photo1 .vnav ul li.active {
    color: rgba(47,49,54,1);
    cursor: default;
}
#modal-voice .voice-cont .photo1 .vnav ul li::before {
    content: '';
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    background-color: #CECECE;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -0.03rem;
    transition: 0.3s;
}
#modal-voice .voice-cont .ttlbox {
    width: 9.85rem;
}
#modal-voice .voice-cont .ttlbox .con {
    width: 5.45rem;
}
#modal-voice .voice-cont .ttlbox .con h4 {
    font-size: 0.48rem;
    font-weight: 100;
    font-variation-settings: "wght" 250;
    line-height: 1.5;
    margin-bottom: 0.3rem;
    white-space: nowrap;
}
#modal-voice .voice-cont .ttlbox .con p {
    line-height: 2.2;
    padding-right: 0.35rem;
}
#modal-voice .voice-cont .ttlbox .name {
    width: 3.27rem;
}
#modal-voice .voice-cont .ttlbox .name dl {
    display: flex;
    align-items: center;
}
#modal-voice .voice-cont .ttlbox .name dl dt {
    font-size: 0.28rem;
    font-weight: 500;
    line-height: 1.1;
    margin-right: 0.2rem;
}
#modal-voice .voice-cont .ttlbox .name dl dd {
    font-size: 0.15rem;
    margin-top: 0.05rem;
}
#modal-voice .voice-cont .sec {
    width: 9.8rem;
    padding-top: 1.2rem;
}
#modal-voice .voice-cont .sec .con1 {
    width: 5.45rem;
}
#modal-voice .voice-cont .sec .con1 h5,
#modal-voice .voice-cont .sec .con2 h5 {
    font-size: 0.26rem;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    line-height: 1.45;
    margin-bottom: 0.5rem;
}
#modal-voice .voice-cont .sec .con1 p {
    line-height: 2.2;
}
#modal-voice .voice-cont .sec .con2 {
    width: 3.9rem;
}
#modal-voice .voice-cont .sec .photo {
    width: 3.27rem;
}
#modal-voice .voice-cont .photo2 {
    width: 91.6vw;
    margin: 0.6rem 0 0.8rem -0.75rem;
}
#modal-voice .voice-cont .mnav {
    padding: 0 0.75rem 1rem 0;
}
#modal-voice .voice-cont .mnav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
#modal-voice .voice-cont .mnav ul li {
    width: 0.6rem;
    height: 0.6rem;
    background-color: #CECECE;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}
#modal-voice .voice-cont .mnav ul li::before {
    content: '';
    width: 0.24rem;
    height: 0.14rem;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.243%22%20height%3D%2213.501%22%20viewBox%3D%220%200%2020.243%2013.501%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-round-back%22%20data-name%3D%22Icon%20ionic-ios-arrow-round-back%22%20d%3D%22M20.791%2C11.51a.919.919%2C0%2C0%2C0-.007%2C1.294l4.268%2C4.282H8.789a.914.914%2C0%2C0%2C0%2C0%2C1.828H25.052L20.777%2C23.2a.925.925%2C0%2C0%2C0%2C.007%2C1.294.91.91%2C0%2C0%2C0%2C1.287-.007l5.794-5.836h0a1.026%2C1.026%2C0%2C0%2C0%2C.19-.288.872.872%2C0%2C0%2C0%2C.07-.352.916.916%2C0%2C0%2C0-.26-.64l-5.794-5.836A.9.9%2C0%2C0%2C0%2C20.791%2C11.51Z%22%20transform%3D%22translate(-7.882%20-11.252)%22%20fill%3D%22%232f3136%22%2F%3E%3C%2Fsvg%3E') right center no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.07rem 0 0 -0.12rem;
    transition: 0.3s;
}
#modal-voice .voice-cont .mnav ul li:nth-child(1)::before {
    transform: scale(-1, 1);
}
#modal-voice .voice-cont .mnav ul li:nth-child(2) {
    width: 1.6rem;
    height: auto;
    background-color: rgba(0,0,0,0);
    border-radius: 0;
    margin: 0 0.2rem;
    text-align: center;
}
#modal-voice .voice-cont .mnav ul li:nth-child(2) a {
    display: block;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2216.25%22%20viewBox%3D%220%200%2020%2016.25%22%3E%20%3Cpath%20id%3D%22Icon_awesome-list-ul%22%20data-name%3D%22Icon%20awesome-list-ul%22%20d%3D%22M1.875%2C3.375A1.875%2C1.875%2C0%2C1%2C0%2C3.75%2C5.25%2C1.875%2C1.875%2C0%2C0%2C0%2C1.875%2C3.375Zm0%2C6.25A1.875%2C1.875%2C0%2C1%2C0%2C3.75%2C11.5%2C1.875%2C1.875%2C0%2C0%2C0%2C1.875%2C9.625Zm0%2C6.25A1.875%2C1.875%2C0%2C1%2C0%2C3.75%2C17.75a1.875%2C1.875%2C0%2C0%2C0-1.875-1.875Zm17.5.625H6.875a.625.625%2C0%2C0%2C0-.625.625v1.25A.625.625%2C0%2C0%2C0%2C6.875%2C19h12.5A.625.625%2C0%2C0%2C0%2C20%2C18.375v-1.25A.625.625%2C0%2C0%2C0%2C19.375%2C16.5Zm0-12.5H6.875a.625.625%2C0%2C0%2C0-.625.625v1.25a.625.625%2C0%2C0%2C0%2C.625.625h12.5A.625.625%2C0%2C0%2C0%2C20%2C5.875V4.625A.625.625%2C0%2C0%2C0%2C19.375%2C4Zm0%2C6.25H6.875a.625.625%2C0%2C0%2C0-.625.625v1.25a.625.625%2C0%2C0%2C0%2C.625.625h12.5A.625.625%2C0%2C0%2C0%2C20%2C12.125v-1.25A.625.625%2C0%2C0%2C0%2C19.375%2C10.25Z%22%20transform%3D%22translate(0%20-3.375)%22%20fill%3D%22%232f3136%22%2F%3E%3C%2Fsvg%3E') center top no-repeat;
    background-size: 0.2rem auto;
    padding-top: 0.18rem;
}
#modal-voice .voice-cont .mnav ul li:nth-child(2) a span {
    font-size: 0.14rem;
    font-weight: 500;
}
#modal-voice .voice-cont .mnav ul li:nth-child(2)::before {
    display: none;
}

#modal-voice.active1 .voice-cont .photo1 .vnav {
    border-top: 0.03rem solid #322BFF;
}
#modal-voice.active1 .voice-cont .photo1 .vnav ul li.active::before {
    background-color: #322BFF;
}
#modal-voice.active1 .btn::after {
    background-color: #322BFF;
}
#modal-voice.active2 .voice-cont .photo1 .vnav {
    border-top: 0.03rem solid #FF4B67;
}
#modal-voice.active2 .voice-cont .photo1 .vnav ul li.active::before {
    background-color: #FF4B67;
}
#modal-voice.active2 .btn::after {
    background-color: #FF4B67;
}
#modal-voice.active3 .voice-cont .photo1 .vnav {
    border-top: 0.03rem solid #66D97D;
}
#modal-voice.active3 .voice-cont .photo1 .vnav ul li.active::before {
    background-color: #66D97D;
}
#modal-voice.active3 .btn::after {
    background-color: #66D97D;
}
#modal-voice.active4 .voice-cont .photo1 .vnav {
    border-top: 0.03rem solid #3BD5DB;
}
#modal-voice.active4 .voice-cont .photo1 .vnav ul li.active::before {
    background-color: #3BD5DB;
}
#modal-voice.active4 .btn::after {
    background-color: #3BD5DB;
}
@media (hover: hover) and (min-width:751px) {
#modal-voice .voice-cont .photo1 .vnav ul li:hover {
    color: rgba(47,49,54,1);
}
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(1):hover::before {
    background-color: #66D97D;
}
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(2):hover::before {
    background-color: #3BD5DB;
}  
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(3):hover::before {
    background-color: #FF4B67;
}    
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(4):hover::before {
    background-color: #322BFF;
}
#modal-voice .voice-cont .mnav ul li:hover::before {
    margin-left: -0.06rem;
}
#modal-voice .voice-cont .mnav ul li:nth-child(1):hover::before {
    margin-left: -0.18rem;
}
}
@media screen and (max-width:750px){
#modal-voice {
    width: 100vw;
    padding: 0;
    right: -105vw;
}
#modal-voice h3 {
    font-size: 0.14rem;
    display: block;
    padding: 0.3rem 0 0.25rem 3.87vw;
}
#modal-voice h3 span {
    height: 0.24rem;
    display: block;
    font-size: 0.24rem;
    margin-bottom: 0.05rem;
    padding: 0;
}
#modal-voice .voice-cont {
    width: 92.26%;
    left: 3.78vw;
}
#modal-voice .voice-cont .photo1 {
    width: 96.22vw;
    margin-bottom: 0.3rem;
}
#modal-voice .voice-cont .photo1 .vnav {
    width: 65vw;
    padding: 0 0.2rem;
}
#modal-voice .voice-cont .photo1 .vnav ul {
    height: 0.4rem;
}
#modal-voice .voice-cont .photo1 .vnav ul li {
    font-size: 0.13rem;
    padding-left: 0.14rem;
}
#modal-voice .voice-cont .ttlbox {
    width: 100%;
}
#modal-voice .voice-cont .ttlbox .con {
    width: 100%;
}
#modal-voice .voice-cont .ttlbox .con h4 {
    font-size: 0.26rem;
    margin-bottom: 0.2rem;
}
#modal-voice .voice-cont .ttlbox .con p {
    font-size: 0.14rem;
    line-height: 2;
    padding-right: 0;
}
#modal-voice .voice-cont .ttlbox .name {
    width: 100%;
    margin-top: 0.15rem;
}
#modal-voice .voice-cont .ttlbox .name dl {
    display: flex;
}
#modal-voice .voice-cont .ttlbox .name dl dt {
    font-size: 0.22rem;
}
#modal-voice .voice-cont .ttlbox .name dl dd {
    font-size: 0.14rem;
    margin-top: 0.025rem;
}
#modal-voice .voice-cont .sec {
    width: 100%;
    padding-top: 0.6rem;
}
#modal-voice .voice-cont .sec .con1 {
    width: 100%;
}
#modal-voice .voice-cont .sec .con1 h5,
#modal-voice .voice-cont .sec .con2 h5 {
    font-size: 0.2rem;
    margin-bottom: 0.15rem;
}
#modal-voice .voice-cont .sec .con1 p {
    font-size: 0.14rem;
    line-height: 2;
}
#modal-voice .voice-cont .sec .con2 {
    width: 100%;
}
#modal-voice .voice-cont .sec .photo {
    width: 70%;
    margin: 0.2rem auto 0;
}
#modal-voice .voice-cont .photo2 {
    width: 100vw;
    margin: 0.2rem 0 0.5rem -3.78vw;
}
#modal-voice .voice-cont .mnav {
    padding: 0 0 1rem;
}
#modal-voice .voice-cont .mnav ul li {
    width: 0.46rem;
    height: 0.46rem;
}
#modal-voice .voice-cont .mnav ul li::before {
    width: 0.16rem;
    height: 0.11rem;
    margin: -0.055rem 0 0 -0.08rem;
}
#modal-voice .voice-cont .mnav ul li:nth-child(2) a {
    padding-top: 0.15rem;
}
@media (hover: hover) and (min-width:751px) {
#modal-voice .voice-cont .photo1 .vnav ul li:hover {
    color: rgba(47,49,54,1);
}
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(1):hover::before {
    background-color: #322BFF;
}
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(2):hover::before {
    background-color: #FF4B67;
}  
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(3):hover::before {
    background-color: #66D97D;
}    
#modal-voice .voice-cont .photo1 .vnav ul li:nth-child(4):hover::before {
    background-color: #3BD5DB;
}
#modal-voice .voice-cont .mnav ul li:hover::before {
    margin-left: -0.06rem;
}
#modal-voice .voice-cont .mnav ul li:nth-child(1):hover::before {
    margin-left: -0.18rem;
}
}