/*intro*/
.main_intro {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0 auto;
    z-index: 99999999;
    text-align: center;
    opacity: 1;
    animation: intro 2s 5s linear both;
    animation-iteration-count: 1;
    background-image: url(../img/main_intro.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 152px;
}
@keyframes intro {
    0% {
        opacity: 1;
        display: block;
    }
    50% {
        opacity: 0;
        display: block;
    }
    100% {
        opacity: 0;
        display: none;
        z-index: -2;
    }
}
.main_intro .title {
    margin-bottom: 79px;
    font-size: 90px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
}
.main_intro .title span {
    color: #5056e4;
}
.main_intro > .subtitle {
    font-size: 32px;
    font-weight: 300;
    color: #fff;
}
.main_intro h4 {
    font-size: 80px;
    font-weight: 700;
    color: #fff;
}
.main_intro h4 span {
    color: #5056e4;
}
.main_intro_con {
    position: relative;
    margin-top: 93px;
}
.main_intro_con::after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #000 0%, transparent 50%, #000 100%);
    background-size: 800% auto;
    animation: shine 7s 1.5s linear;
}
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* main_visual */
.main_visual {
    position: relative;
    transform: translateY(-82px);
    z-index: -1;
    min-height: 100vh;
}
.main_visual > video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.main_visual > img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
.main_visual::after {
    content: '';
    display: block;
    width: 600px;
    height: 10px;
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    background-color: #5056e4;
    z-index: 1;
}
.main_visual::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
}
.main_visual_wrap {
    position: absolute;
    left: 0px;
    top: 50px;
    width: 100%;
    height: 100%;

    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
}
.main_visual_wrap h2 {
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    letter-spacing: 0px;
}
.main_visual_wrap p {
    font-size: 30px;
    font-weight: 300;
    color: #fff;
    margin-top: 167px;
    letter-spacing: 0px;
}

/* main_slogan */
.main_slogan {
    padding-top: 185px;
    padding-bottom: 178px;
}
.main_slogan > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.main_slogan h2 {
    font-size: 64px;
    font-weight: 700;
    position: relative;
    color: #333333;
    letter-spacing: 0px;
}
.main_slogan h2 > span {
    color: #5056e4;
}
.main_slogan h2 > img {
    position: absolute;
    left: 0px;
    bottom: 37px;
}
.main_slogan p {
    font-size: 20px;
    font-weight: 300;
    color: #333333;
    padding-top: 94px;
    line-height: 32px;
}
.main_slogan p span {
    font-weight: 700;
    color: #5056e4;
}
.main_slogan p b {
    font-weight: 600;
}
.main_slogan p strong {
    font-weight: 700;
}

/* main_graph */
.main_graph {
    position: relative;
}
.main_graph_wrap {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding-top: 172px;
    text-align: center;
    padding-bottom: 106px;
}
.main_graph_wrap h2 {
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    line-height: 76px;
    margin-bottom: 50px;
    position: relative;
}
.main_graph_wrap h2 > span {
    color: #5056e4;
}
.main_graph_wrap h2 > img {
    position: absolute;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
}
.main_graph_wrap p {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 68px;
}
.main_graph_wrap h4 {
    font-size: 36px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 109px;
}
.main_graph_wrap h4 > span {
    font-size: 50px;
    font-weight: 700;
    margin-left: 14px;
}
.main_graph_con02 {
    display: flex;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
}
.main_graph_con02 > span {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 40px;
    background-color: rgba(80, 86, 228, 0.2);
    border-radius: 20px;
    width: 290px;
    text-align: center;
    display: inline-block;
}
.main_graph_con02 > span:last-child {
    border: 1px solid #fff;
    background-color: transparent;
    margin-left: 32px;
}
.main_graph_con01 {
    position: relative;
}
.main_graph_con01 > img:nth-of-type(1) {
    position: relative;
    z-index: 1;
}
.main_graph_con01 > img:nth-of-type(2) {
    position: absolute;
    z-index: 2;
    left: 24%;
    top: 13%;
}
#main_graph {
    position: absolute;
    left: 24%;
    top: 15%;
    max-width: 993px !important;
    max-height: 195px !important;
}
.main_graph_scroll {
    margin-top: 204px;
    display: flex;
    justify-content: center;
    position: relative;
}
.main_graph_scroll > a {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    z-index: 3;
    width: fit-content;
    /* animation: scroll 2s infinite linear; */
}
.main_graph_scroll > a > img {
    margin-top: 6px;
}
.main_graph_scroll::before {
    content: '';
    display: block;
    width: 101px;
    height: 101px;
    background-color: rgba(152, 123, 249, 0.08);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 31px;
    transform: translateX(-50%);
}
.main_graph_scroll::after {
    content: '';
    display: block;
    width: 73px;
    height: 73px;
    background-color: rgba(152, 123, 249, 0.05);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 85px;
    transform: translateX(-50%);
}
@keyframes scroll {
    0% {
        transform: translateY(20px);
        opacity: 1;
    }
    50% {
        transform: translateY(0px);
        opacity: 0.3;
    }
    100% {
        transform: translateY(20px);
        opacity: 1;
    }
}

/* main_team */
.main_team {
    background-color: #252a33;
    padding-top: 239px;
    padding-bottom: 74px;
}
.main_team_title {
    position: relative;
}
.main_team_title h2 {
    position: absolute;
    left: 0px;
    top: -63px;
    font-size: 100px;
    font-weight: 700;
    color: #fff;
    text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.16);
}
.main_team_title h2 > img {
    position: absolute;
    left: 0px;
    bottom: 72px;
}
.main_team_title p {
    position: absolute;
    right: 72px;
    bottom: 48px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    line-height: 34px;
}
.main_team_title p > span {
    font-weight: 700;
    color: #987bf9;
}
.main_team_con {
    padding-top: 168px;
    padding-bottom: 168px;
    position: relative;
}
.main_team_rolling {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
}
.main_team_source01 {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
}
.main_team_source02 {
    position: absolute;
    left: 35%;
    top: 36%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
}
.travel-slider {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 628px;
}
.travel-slider-planet {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    z-index: 3;
}
.travel-slider-planet > img {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}
.main_team_wrap {
    max-width: 660px;
    width: 100%;
    overflow: hidden;
    margin-top: 71px;
}
.travel-slider .main_team_swiper {
    height: var(--travel-slider-height);
    padding-top: var(--travel-slider-vertical-padding);
    padding-bottom: var(--travel-slider-vertical-padding);
    width: 416px;
}
:root {
    --travel-slider-height: 200px;
    --travel-slider-vertical-padding: 92px;
}
.main_team_swiper h1 {
    font-size: 60px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    opacity: 0.2;
    transition: all 0.5s;
}
.main_team_swiper .swiper-slide-active h1 {
    opacity: 1;
}
.rolling {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 556px;
    height: 556px;
}
.main_team .main_team_page {
    position: relative;
    bottom: 0px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    max-width: 416px;
    justify-content: space-evenly;
    margin-top: 71px;
}
.main_team .main_team_page > span {
    width: auto;
    height: auto;
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.14);
    background-color: transparent;
    border-radius: 0px;
    opacity: 1;
    margin: 0px 0px 22px !important;
}
.main_team .main_team_page > span.swiper-pagination-bullet-active {
    color: #5056e4;
    font-weight: 700;
}
.main_team .main_team_page2 {
    position: absolute;
    left: 25%;
    top: 50%;
    bottom: 0px;
    transform: translateX(-50%) translateY(-50%);
    z-index: 10;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}
.swiper-pagination-current {
    font-size: 170px;
    font-weight: 900;
    color: #fff;
    position: relative;
}
.swiper-pagination-current::before {
    content: '0';
}
.main_team_category {
    display: flex;
    justify-content: space-between;
    /* cursor: default; */
}
.main_team_category_line {
    width: 1px;
    height: 352px;
    background-color: #fff;
}
.main_team_category h3 {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    transition: all 0.2s;
}
.main_team_category p {
    font-size: 19px;
    font-weight: 200;
    color: #fff;
    opacity: 0.3;
    transition: all 0.2s;
    line-height: 24px;
    position: relative;
    z-index: 1;
}
.team_category {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 54px;
    width: 19%;
    transition: all 0.5s;
    position: relative;
}
.team_category > img {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    z-index: 1;
    transition: all 0.2s;
}
.team_category:hover {
    background-position: center 360px;
}
.team_category:hover img {
    opacity: 0;
    bottom: 50px;
}
.team_category:hover h3 {
    font-size: 32px;
    font-weight: 600;
}
.team_category:hover p {
    font-size: 24px;
    font-weight: 500;
    opacity: 1;
    line-height: 30px;
}
.team_category::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #5056e4, transparent);
    width: 100%;
    height: 0px;
    transition: all 0.5s;
}
.team_category:hover::before {
    height: 250px;
}
.main_team_category01 > img {
    opacity: 1;
}
.main_team_category02 > img {
    opacity: 0.8;
}
.main_team_category03 > img {
    opacity: 0.6;
}
.main_team_category04 > img {
    opacity: 0.3;
}
.main_team_category05 > img {
    opacity: 0.1;
}
.main_team_scroll {
    margin-top: 185px;
    display: flex;
    justify-content: center;
    position: relative;
}
.main_team_scroll > a {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    z-index: 3;
    width: fit-content;
}
.main_team_scroll > a > img {
    margin-top: 6px;
}
.main_team_scroll::before {
    content: '';
    display: block;
    width: 101px;
    height: 101px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 31px;
    transform: translateX(-50%);
}
.main_team_scroll::after {
    content: '';
    display: block;
    width: 73px;
    height: 73px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 85px;
    transform: translateX(-50%);
}

/* main_portfolio */
.main_portfolio {
    background-color: #000000;
    padding-top: 146px;
    padding-bottom: 145px;
}
.main_portfolio > div {
    display: flex;
    justify-content: space-between;
}
.main_portfolio_img {
    position: relative;
}
.main_portfolio > div > a:hover .main_portfolio_img::after {
    opacity: 1;
}
.main_portfolio_img::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    bottom: -5px;
    left: 0px;
    position: absolute;
    background-color: #5056e4;
    opacity: 0;
    transition: all 0.2s;
}
.main_portfolio_img h3 {
    font-size: 100px;
    font-weight: 700;
    color: #fff;
    text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.16);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
}
.main_portfolio03 .main_portfolio_img h3 {
    font-size: 60px;
}
.main_portfolio03 .main_portfolio_img h3 > img {
    margin-bottom: 7px;
    margin-top: 26px;
}
.main_portfolio03 .main_portfolio_img h3 > span {
    font-size: 80px;
}
.main_portfolio h4 {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    margin-top: 55px;
    text-align: center;
    margin-bottom: 23px;
    transition: all 0.2s;
}
.main_portfolio p {
    font-size: 18px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 31px;
    text-align: center;
    line-height: 24px;
}
.main_portfolio_line {
    margin: 0 auto;
    width: 100%;
    max-width: 356px;
    background-color: #707070;
    height: 1px;
}
.main_portfolio > div > a:hover h4 {
    color: #5056e4;
    font-weight: 700;
}

@media screen and (max-width: 1660px) {
    .main_intro {
        background-position: center center;
    }
    .main_intro .title {
        font-size: 45px;
    }
    .main_intro > .subtitle {
        font-size: 18px;
    }
    .main_intro h4 {
        font-size: 40px;
    }
    .main_visual {
        transform: none;
    }
    .main_visual_wrap h2 {
        font-size: 30px;
        margin-bottom: 6px;
    }
    .main_visual_wrap > img {
        width: 45%;
    }
    .main_visual_wrap p {
        font-size: 18px;
        margin-top: 49px;
    }
    .main_slogan {
        padding-top: 120px;
        padding-bottom: 135px;
    }
    .main_slogan h2 {
        font-size: 32px;
    }
    .main_slogan p {
        font-size: 14px;
        padding-top: 48px;
        line-height: 22px;
    }
    .main_graph_wrap {
        padding-top: 120px;
    }
    .main_graph_wrap h2 {
        font-size: 32px;
        line-height: 43px;
        margin-bottom: 26px;
    }
    .main_graph_wrap p {
        font-size: 18px;
        margin-bottom: 40px;
    }
    .main_graph_con01 {
        width: 80%;
        margin: 0 auto;
    }
    #main_graph {
        left: 0%;
    }
    .main_graph_con01 > img:nth-of-type(2) {
        left: -5%;
    }
    .main_graph_wrap h4 {
        font-size: 22px;
        margin-bottom: 15px;
        margin-top: 18px;
    }
    .main_graph_wrap h4 > span {
        font-size: 35px;
        margin-left: 10px;
    }
    .main_graph_con02 > span {
        font-size: 16px;
        line-height: 36px;
        width: 250px;
    }
    .main_graph_scroll {
        margin-top: 13px;
    }
    .main_team {
        padding-top: 145px;
        padding-bottom: 60px;
    }
    .main_team_title h2 {
        top: -27px;
        font-size: 50px;
    }
    .main_team_title p {
        right: 32px;
        bottom: 10px;
        font-size: 16px;
        line-height: 25px;
    }
    .main_team_title h2 > img {
        bottom: 34px;
    }
    .main_team_source02 {
        left: 19%;
    }
    .main_team .main_team_page2 {
        left: 12%;
        top: 32%;
    }
    .swiper-pagination-current {
        font-size: 90px;
    }
    .main_team_source01 {
        left: 71%;
    }
    .main_team_wrap {
        max-width: 400px;
        width: 100%;
        overflow: hidden;
        margin-top: 0px;
        z-index: 15;
    }
    .travel-slider .main_team_swiper {
        height: auto;
        padding-top: 0px;
        padding-bottom: 0px;
        width: auto;
    }
    .travel-slider {
        justify-content: center;
    }
    .main_team_swiper h1 {
        font-size: 30px;
    }
    .main_team .main_team_page {
        margin-top: 30px;
    }
    .main_team_category h3 {
        font-size: 18px;
    }
    .main_team_category_line {
        height: 234px;
    }
    .main_team_category p {
        font-size: 14px;
        line-height: 18px;
    }
    .team_category:hover h3 {
        font-size: 19px;
    }
    .team_category:hover p {
        font-size: 15px;
        line-height: 18px;
    }
    .team_category:hover::before {
        height: 170px;
    }
    .main_team_scroll {
        margin-top: 120px;
    }
    .main_portfolio {
        padding-top: 98px;
        padding-bottom: 82px;
    }
    .main_portfolio_img h3 {
        font-size: 50px;
    }
    .main_portfolio03 .main_portfolio_img h3 {
        font-size: 30px;
    }
    .main_portfolio03 .main_portfolio_img h3 > span {
        font-size: 40px;
    }
    .main_portfolio03 .main_portfolio_img h3 > img {
        margin-top: 15px;
    }
    .main_portfolio h4 {
        font-size: 14px;
        margin-top: 30px;
        margin-bottom: 18px;
    }
    .main_portfolio p {
        font-size: 14px;
        margin-top: 18px;
        line-height: 20px;
    }
}
@media (max-width: 992px) {
    .main_intro .title {
        font-size: 24px;
    }
    .main_visual > img {
        top: 15%;
    }
    .main_intro > .subtitle {
        font-size: 14px;
    }
    .main_team {
        overflow: hidden;
    }
    .main_intro h4 {
        font-size: 20px;
    }
    .main_visual > video {
        width: 340% !important;
        max-width: 340% !important;
    }
    .main_visual {
        overflow: hidden;
    }
    .main_visual_wrap h2 {
        font-size: 40px;
        margin-bottom: 45px;
        line-height: 48px;
    }
    .main_visual_line {
        margin: 0 auto 85px;
        width: 2px;
        height: 37px;
        background-color: #fff;
    }
    .main_visual_wrap > img {
        width: 263px;
    }
    .main_visual_wrap p {
        font-size: 22px;
        margin-top: 17px;
    }
    .main_portfolio > div {
        flex-direction: column;
    }
    .main_slogan {
        overflow: hidden;
        padding-top: 132px;
        padding-bottom: 117px;
    }
    .main_visual_wrap::after {
        content: '';
        display: block;
        width: 180px;
        height: 6px;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: translateX(-50%);
        background-color: #5056e4;
    }
    .main_slogan h2 {
        font-size: 44px;
        line-height: 50px;
    }
    .main_slogan > div {
        flex-direction: column;
    }
    .main_slogan h2 > img {
        bottom: initial;
        width: 175px;
        top: -13px;
    }
    .main_slogan p {
        font-size: 16px;
        padding-top: 78px;
        line-height: 30px;
    }
    .main_team {
        padding-top: 0px;
        padding-bottom: 131px;
        background: linear-gradient(to bottom, #252a33, #000000);
    }
    .main_team_con {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 76px;
        margin-bottom: 295px;
    }
    .main_team_rolling {
        width: 350px;
    }
    .rolling {
        width: 310px;
        height: 310px;
    }
    .main_team_wrap {
        max-width: 350px;
        margin-top: 315px;
    }
    .travel-slider {
        height: 350px;
        max-width: 350px;
    }
    .main_team .main_team_page {
        margin-top: 229px;
    }
    .main_team .main_team_page2 {
        left: 19%;
        top: -12%;
    }
    .main_team .main_team_page > span {
        font-size: 16px;
        margin: 0px 8px 19px !important;
    }
    .main_team_source02 {
        left: 29%;
        top: 10%;
    }
    .swiper-pagination-current {
        font-size: 60px;
    }
    .main_team_category {
        flex-direction: column;
    }
    .main_team_category_line {
        display: none;
    }
    .main_team_source01 {
        left: 50%;
    }
    .team_category:hover {
        background-position: initial;
    }
    .team_category {
        padding-bottom: 48px;
        width: 100%;
    }
    .team_category:hover h3 {
        font-size: 24px;
    }
    .team_category h3 {
        font-size: 24px;
    }
    .team_category:hover p {
        font-size: 19px;
        line-height: 24px;
        opacity: 0.3;
    }
    .team_category p {
        font-size: 19px;
        line-height: 24px;
        margin-top: 27px;
    }
    .main_team_category > div {
        margin-bottom: 49px;
    }
    .main_team_category > div:last-child {
        margin-bottom: 0px;
    }
    .team_category:hover::before {
        display: none;
    }
    .team_category:hover img {
        opacity: 1;
        bottom: 0px;
    }
    .main_team_scroll {
        display: none;
    }
}