@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-ExtraBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-ExtraBoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('./fonts/InterTight-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*---------- common start ----------*/

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 10px;
    font-family: 'Inter Tight', Verdana, Arial, sans-serif;
    color: #2F2F2F;
}
body.overflow {
    overflow: hidden;
}
.mobile {
    display: none !important;
}
.standard_article {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
/*    padding: 12rem 20rem;*/
    overflow: hidden;
    z-index: 2;
}
.bubble_image_container {
    display: block;
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: contain;
}
.black_link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2F2F2F;
    font-size: 2rem;
    line-height: 1em;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    padding: 2.4rem 2.5rem;
    border-radius: 7.5rem;
    transition: transform .4s ease;
    position: relative;
    box-sizing: border-box;
}
.black_link:hover {
    transform: scale(1.05);
}
.black_link.with_arrow:before {
    content: '';
    display: block;
    width: 7rem;
    height: 7rem;
    background-image: url(./img/arrow_left_white.svg);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 100%;
    transition: transform .4s ease;
    background-color: #2F2F2F;
    border-radius: 50%;
}
.black_link.with_arrow:hover:before {
    transform: translateX(1rem);
}
.ai_image_wrapper {
    display: block;
    position: relative;
}
.ai_image_wrapper:after,
.blur_image_container:after {
    content: '*';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    bottom: 1em;
    right: 1em;
    color: #FFFFFF;
    font-size: 2.5em;
    line-height: 1em;
    z-index: 3;
}
.blur_image_container:after {
    bottom: .3em;
    right: .3em;
}

/*----------common end ----------*/

/*---------- index start ----------*/

.breadcrumbs {
    display: block;
    width: 100%;
    height: auto;
    padding-left: 19rem;
    box-sizing: border-box;
    font-size: 2rem;
    line-height: 1.1em;
    padding-top: 5rem;
}
.breadcrumbs a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.breadcrumbs a:hover {
    text-decoration: none;
}
.index_main {
    display: block;
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom, #FFFFFF, #F6F6F6 40%);
    position: relative;
}
.bubble_image_container_1 {
    width: 155rem;
    height: 311rem;
    background-image: url(./img/bubbles_1.png);
    background-position: 0 0;
    top: 29.9rem;
    left: 0;
}
.bubble_image_container_2 {
    width: 124.2rem;
    height: 149.1rem;
    background-image: url(./img/bubbles_2.png);
    background-position: 100% 0;
    top: 261rem;
    right: 0;
}
.bubble_image_container_3 {
    width: 137.1rem;
    height: 166.5rem;
    background-image: url(./img/bubbles_3.png);
    background-position: 0 0;
    bottom: 0;
    left: 0;
}
.kv_article {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
}
.kv_section {
    display: block;
    width: auto;
    height: 100%;
    position: relative;
    filter: blur(2px);
    opacity: .8;
    transition: .8s ease;
    /*background-image: url(./img/kv_desktop.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;*/
}
.kv_section::before {
    content: '';
    display: block;
    width: 6rem;
    height: 6rem;
    border: .5rem solid #FFFFFF;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: 12rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: 5;
    filter: drop-shadow(-0.2rem 0.2rem 0 #4ADCCF);
    animation: arrow_bottom 4s linear infinite;
}
@keyframes arrow_bottom {
    50% {
        transform: translateY(-2rem) rotate(-45deg);
    }
    100% {
        transform: translateY(0) rotate(-45deg); 
    }
}
.start_anim .kv_section {
    opacity: 1;
    filter: none;
}
.kv_article .ai_image_wrapper {
    width: auto;
    height: 100%;
    z-index: 1;
}
.kv_desktop {
    display: block;
    width: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}
.kv_tablet {
    display: none;
}
.kv_mobile {
    display: none;
}
.oncode_logo {
    display: block;
    width: 12.4rem;
    position: absolute;
    top: 5.3rem;
    left: 4.4rem;
    z-index: 2;
    transform: translateY(1rem);
    opacity: 0;
    transition: .8s ease 1.5s;
}
.start_anim .oncode_logo {
    opacity: 1;
    transform: none;
}
.kv_text_container {
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    top: 32vh;
    left: 12.2rem;
    z-index: 3;
    transform: translateX(-3rem);
    opacity: 0;
    transition: .8s ease 1s;
}
.start_anim .kv_text_container {
    opacity: 1;
    transform: none;
}
.kv_title {
    display: block;
    width: auto;
    height: auto;
    text-align: left;
    font-size: 21em;
    line-height: 1em;
    font-weight: 400;
    color: #FFFFFF;
}
.kv_title span {
    font-weight: 600;
}
.kv_text {
    display: block;
    width: 56rem;
    height: auto;
    text-align: left;
    font-size: 3em;
    line-height: normal;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 4rem;
}
.article_item_1 {
    margin-top: 25.1rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: .8s ease;
}
.start_anim.article_item_1 {
    opacity: 1;
    transform: none;
}
.standard_title {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 6rem;
    line-height: 1em;
    font-weight: 600;
    padding: 0 34rem;
    box-sizing: border-box;
}
.app_image_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0 34.2rem 0 61rem;
    box-sizing: border-box;
    margin-top: 2rem;
}
.app_image {
    display: block;
    width: 27.7rem;
    opacity: 0;
    transform: translateX(-2rem);
    transition: .8s ease .5s;
}
.app_image_description {
    display: block;
    width: auto;
    height: auto;
    text-align: left;
    font-size: 2.3rem;
    line-height: normal;
    font-weight: 400;
    margin-top: 5rem;
    opacity: 0;
    transform: translateX(2rem);
    transition: .8s ease .5s;
}
.start_anim .app_image,
.start_anim .app_image_description {
    opacity: 1;
    transform: none;
}
.start_anim .app_image_description {
    opacity: .4;
}
.article_item_2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 21.2rem;
    padding: 0 19.2rem;
}
.article_item_2 .article_image {
    display: block;
    width: 69.6rem;
    height: 75.4rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: .8s ease;
    background-image: url(./img/image_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}
.start_anim.article_item_2 .article_image {
    opacity: 1;
    transform: none;
}
.info_container_1 {
    display: block;
    width: 74.2rem;
    margin-top: 22.2rem;
    opacity: 0;
    transform: translateX(2rem);
    transition: .8s ease;
}
.start_anim .info_container_1 {
    opacity: 1;
    transform: none;
}
.info_container_1_text {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 3rem;
    line-height: normal;
    color: #AFAFAF;
    font-weight: 500;
}
.info_container_1_title {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 4.5rem;
    line-height: normal;
    color: #2C2C2C;
    font-weight: 600;
    margin-top: 2.5rem;
}
.article_item_3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 21.2rem;
    padding: 0 19.2rem;
}
.article_item_3 .ai_image_wrapper {
    display: block;
    width: auto;
}
.article_item_3 .ai_image_wrapper:after {
    right: 2em;
}
.article_item_3 .article_image {
    display: block;
    width: 96.9rem;
    height: 93.6rem;
    opacity: 0;
    transform: translateY(-2rem) scaleX(0.8);
    transition: .8s ease;
    background-image: url(./img/image_2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.start_anim.article_item_3 .article_image {
    opacity: 1;
    transform: none;
}
.info_container_2 {
    display: block;
    width: 61rem;
    margin-top: 29.6rem;
    opacity: 0;
    transform: translateX(2rem);
    transition: .8s ease;
}
.start_anim .info_container_2 {
    opacity: 1;
    transform: none;
}
.info_container_2_title {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 6rem;
    line-height: normal;
    font-weight: 600;
}
.info_container_2_text {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 3rem;
    line-height: normal;
    font-weight: 500;
    margin-top: 2.5rem;
}
.info_container_2_text_mini {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 2.3rem;
    line-height: normal;
    font-weight: 400;
    margin-top: 2.5rem;
    opacity: .7;
}
.article_item_3 .black_link {
    margin-top: 2.5rem;
    width: 28.8rem;
    height: 7rem;
}
.article_item_4 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 24rem;
    padding-right: 8.6rem;
    padding-bottom: 22.1rem;
}
.cases_map {
    display: block;
    width: 103rem;
    height: auto;
    position: relative;
}
.case_item {
    display: block;
    position: absolute;
    cursor: pointer;
    color: #000000;
    text-decoration: none;
    opacity: 0;
    transform: translateY(2rem);
    transition: .6s ease;
}
.start_anim .case_item {
    opacity: 1;
    transform: none;
}
.start_anim .case_item:hover {
    transform: scale(1.05);
}
.case_item_1 {
    width: 62.6rem;
    height: 49.3rem;
    top: 0;
    left: 35rem;
    background-image: url(./img/case_image_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition-delay: .5s;
}
.case_1_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 56.4rem;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.7rem;
    margin: 0 auto;
}
.case_1_container:after {
    content: '';
    display: block;
    width: 9.5rem;
    height: 9.5rem;
    background-color: #FFFFFF;
    border-radius: 50%;
    background-image: url(./img/arrow_ref_black.png);
    background-repeat: no-repeat;
    background-size: 3.4rem 3.4rem;
    background-position: center;
}
.case_text_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 46.8rem;
    height: 9.5rem;
    background-color: #FFFFFF;
    border-radius: 5rem;
    padding: 2rem 3.5rem;
    box-sizing: border-box;
}
.case_title {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 2rem;
    line-height: 1em;
    color: #000000;
    font-weight: 600;
}
.case_text {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 2rem;
    line-height: 1em;
    color: #000000;
    font-weight: 400;
    opacity: .4;
}
.case_item_2 {
    top: 2.2rem;
    left: 11.4rem;
    width: 21.8rem;
    transition-delay: .7s;
}
.case_item_3 {
    top: 19rem;
    left: 6.8rem;
    width: 28.4rem;
    transition-delay: .9s;
}
.case_item_4 {
    top: 51.5rem;
    left: 54rem;
    width: 32.6rem;
    transition-delay: 1.1s;
}
.blur_image_container {
    display: block;
    width: 100%;
    position: relative;
}
.case_image {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    transition: opacity .4s ease;
}
.case_image.case_image_noblur {
    opacity: 0;
}
.case_image.case_image_blur {
    z-index: 2;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.case_item:hover .case_image_blur {
    opacity: 0;
}
.case_item:hover .case_image_noblur {
    opacity: 1;
}
.case_arrow_image {
    display: block;
    width: 5.6rem;
    height: 5.6rem;
    object-fit: contain;
    transition: transform .4s ease, opacity .4s ease;
    opacity: .8;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 3;
}
.case_item:hover .case_arrow_image {
    opacity: 1;
    transform: scale(.9);
}
.info_container_3 {
    display: block;
    width: 80.1rem;
    margin-top: 5.6rem;
    opacity: 0;
    transform: translateX(2rem);
    transition: .8s ease;
}
.start_anim .info_container_3 {
    opacity: 1;
    transform: none;
}
.info_container_3_title {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 6rem;
    line-height: normal;
    font-weight: 600;
}
.info_container_3_text {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 3rem;
    line-height: normal;
    font-weight: 500;
    margin-top: 2.5rem;
}
.info_container_3_text_mini {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 2.3rem;
    line-height: normal;
    font-weight: 400;
    margin-top: 2.5rem;
    opacity: .7;
}
.article_item_4 .black_link {
    margin-top: 2.5rem;
    width: 32.9rem;
}
.back_to_top_button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
        opacity: 0;
    width: 9rem;
    height: 9rem;
    background-color: #2F2F2F;
    border-radius: 50%;
    position: fixed;
    right: 10rem;
    bottom: 5rem;
    z-index: -100;
    transition: opacity .4s ease, background-color .4s ease;
    border: none;
    outline: none;
    cursor: pointer;
}
.back_to_top_button svg {
    width: 50%;
    fill: #FFFFFF;
}
.back_to_top_button.active {
    z-index: 100;
    opacity: 1;
}
.back_to_top_button.active:hover {
    background-color: #328B93;
}

/*---------- index end ----------*/

/*---------- footer start ----------*/

.index_footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 6.8rem 19.8rem;
    position: relative;
    z-index: 2;
}
.footer_item {
    display: block;
    width: auto;
}
.footer_text {
    display: block;
    width: auto;
    text-align: left;
    font-size: 1.8rem;
    line-height: normal;
    color: #191919;
}
.footer_link {
    display: block;
    width: auto;
    text-align: left;
    font-size: 1.8rem;
    line-height: normal;
    color: #4C83B4;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 1.2rem;
}
.footer_link:hover {
    text-decoration: none;
}
.footer_text_footnote {
    display: block;
    width: auto;
    text-align: left;
    font-size: 1.8rem;
    line-height: normal;
    color: #191919;
    margin-top: 1.2rem;
    opacity: .5;
}

/*---------- footer end ----------*/

.modal {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(47, 47, 47, 0.75);
    z-index: 10;
}

.modal.hidden {
    display: none;
}

.modal__container {
    display: flex;
    align-items: center;
    width: 751px;
    height: 413px;
    background-color: #fff;
    clip-path: path('M0 38.6994C0 15.6143 20.3192 -2.20934 43.2249 0.662896C116.517 9.85328 267.704 27 375.5 27C483.296 27 634.483 9.85329 707.775 0.662901C730.681 -2.20933 751 15.6143 751 38.6994V364.301C751 387.386 730.681 405.209 707.775 402.337C634.483 393.147 483.296 376 375.5 376C267.704 376 116.517 393.147 43.2249 402.337C20.3192 405.209 0 387.386 0 364.301V38.6994Z');
    text-align: center;
}

.modal__title {
    font-size: 60px;
    font-weight: 700;
}

.modal__text {
    font-size: 23px;
    line-height: 27px;
    padding: 25px 75px 30px 75px;
}

.modal__btn {
    width: 189px;
    height: 70px;
    margin: 0 auto;
    font-size: 20px !important;
    padding: 0 !important;
}

@media screen and (max-width: 1800px) {
    html {
        font-size: .52vw;
    }
}

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

    /*---------- common start ----------*/

    html {
        font-size: 1vw;
    }
    .mobile {
        display: block !important;
    }
    .desktop {
        display: none !important;
    }
    .black_link {
        font-size: 1.9rem;
        padding: 2.2rem 2.4rem;
        border-radius: 6rem;
    }
    .black_link.with_arrow:before {
        width: 6.7rem;
        height: 6.7rem;
    }
    .ai_image_wrapper:after,
    .blur_image_container:after {
        content: '*';
        display: block;
        width: 1em;
        height: 1em;
        position: absolute;
        bottom: 1em;
        right: 1em;
        color: #FFFFFF;
        font-size: 2.5em;
        line-height: 1em;
        z-index: 3;
    }
    .blur_image_container:after {
        bottom: .3em;
        right: .3em;
    }

    /*----------common end ----------*/

    /*---------- index start ----------*/

    .breadcrumbs {
        padding-left: 11rem;
        font-size: 2rem;
        line-height: 1.1em;
        padding-top: 5rem;
    }
    .index_main {
        background: linear-gradient(to bottom, #FFFFFF, #F6F6F6 40%);
    }
    .bubble_image_container_1 {
        width: 100%;
        height: 242.6rem;
        background-image: url(./img/bubbles_1_tablet.png);
        background-position: 0 0;
        top: 132.2rem;
    }
    .bubble_image_container_2 {
        width: 100%;
        height: 149.1rem;
        background-image: url(./img/bubbles_2_tablet.png);
        background-position: 100% 0;
        top: 427.7rem;
        right: auto;
        left: 0;
    }
    .bubble_image_container_3 {
        display: none;
    }
    .kv_article {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        padding: 2.4rem 3.1rem;
    }
    .kv_article .ai_image_wrapper {
        width: 100%;
    }
    .kv_desktop {
        display: none;
    }
    .kv_tablet {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        object-fit: contain;
    }
    .oncode_logo {
        width: 11.8rem;
        top: 5rem;
        left: 7.8rem;
    }
    .kv_text_container {
        width: 100%;
        top: 65vh;
        top: calc(var(--vh, 1vh) * 60);
        left: 0;
    }
    .kv_title {
        width: 100%;
        text-align: center;
        font-size: 15.3em;
    }
    .kv_text {
        width: 100%;
        text-align: center;
        font-size: 2.8em;
        margin-top: 2.2rem;
        box-sizing: border-box;
        padding: 0 18rem;
    }
    .article_item_1 {
        margin-top: 16.5rem;
    }
    .standard_title {
        font-size: 4.3rem;
        padding: 0;
        font-weight: 500;
    }
    .standard_title.gray_standard_title {
        color: #AFAFAF;
        padding-left: 11.6rem;
    }
    .article_item_1 .standard_title:nth-child(3) {
        margin-top: 1.4rem;
        padding-left: 27.7rem;
    }
    .app_image_container {
        padding: 0 10rem 0 12rem;
        margin-top: 0rem;
    }
    .app_image {
        width: 31rem;
    }
    .app_image_description {
        font-size: 1.9rem;
        opacity: .4;
        margin-top: 8rem;
        width: 42rem;
    }
    .article_item_2 {
        display: block;
        margin-top: 10.5rem;
        padding: 0 11.4rem;
    }
    .article_item_2 .article_image {
        width: 77.1rem;
        height: 62.7rem;
        background-image: url(./img/image_1_tablet.png);
        margin: 0 auto;
    }
    .article_item_2 .article_image:after {
        content: '*';
        display: block;
        width: 1em;
        height: 1em;
        position: absolute;
        bottom: 1em;
        right: 1em;
        color: #FFFFFF;
        font-size: 2.5em;
        line-height: 1em;
        z-index: 3;
    }
    .info_container_1 {
        width: 100%;
        margin-top: 4.8rem;
    }
    .info_container_1_text {
        font-size: 2.8rem;
        color: #AFAFAF;
        font-weight: 600;
        width: 50.8rem;
        margin-top: 2.4rem;
        font-weight: 500;
    }
    .info_container_1_title {
        font-size: 4.3rem;
        color: #2F2F2F;
        font-weight: 600;
        margin-top: 2.8rem;
    }
    .info_container_1_text_mini {
        display: block;
        width: 61.9rem;
        height: auto;
        text-align: left;
        font-size: 1.9rem;
        line-height: 1.3em;
        color: #2C2C2C;
        opacity: .4;
        margin-top: 2.4rem;
    }
    .article_item_3 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        width: 93rem;
        height: 106.6rem;
        background-color: #FFFFFF;
        border-radius: 4.8rem;
        margin-top: 15.7rem;
        padding: 5rem 8rem 2rem;
    }
    .article_item_3 .ai_image_wrapper {
        width: auto;
    }
    .article_item_3 .ai_image_wrapper:after {
        right: 2em;
    }   
    .article_item_3 .article_image {
        width: 82.2rem;
        height: 50.9rem;
        background-image: url(./img/image_2_tablet.png);
    }
    .info_container_2 {
        width: 55.4rem;
        margin-top: 0;
    }
    .info_container_2_title {
        font-size: 4.3rem;
    }
    .info_container_2_text {
        width: 51.1rem;
        font-size: 2.9rem;
        margin-top: 2.4rem;
    }
    .info_container_2_text_mini {
        font-size: 1.9rem;
        margin-top: 2.4rem;
    }
    .article_item_4 {
        display: block;
        padding: 12.8rem 0 13.3rem;
    }
    .cases_map {
        width: 100%;
        height: 59rem;
    }
    .case_item_1 {
        width: 59.8rem;
        height: 42.9rem;
        left: 34rem;
    }
    .case_1_container {
        display: none;
    }
    .case_item_2 {
        top: 1rem;
        left: 13rem;
        width: 19.1rem;
    }
    .case_item_3 {
        top: 15.7rem;
        left: 10rem;
        width: 24.7rem;
    }
    .case_item_4 {
        top: 46rem;
        left: 52.1rem;
        width: 28.2rem;
    }
    .case_image.case_image_noblur {
        opacity: 1;
    }
    .case_image.case_image_blur {
        display: none;
    }
    .case_arrow_image {
        display: none;
    }
    .info_container_3 {
        width: 100%;
        margin-top: 4.4rem;
        padding: 0 10rem;
        box-sizing: border-box;
    }
    .info_container_3_title {
        width: 46.8rem;
        font-size: 4.3rem;
    }
    .info_container_3_text {
        width: 100%;
        font-size: 2.9rem;
        margin-top: 1.2rem;
    }
    .info_container_3_text_mini {
        width: 72.2rem;
        font-size: 2rem;
        margin-top: 1.2rem;
    }
    .article_item_4 .black_link {
        margin-top: 2.5rem;
        width: 31rem;
    }
    .back_to_top_button {
        width: 8rem;
        height: 8rem;
    }

    /*---------- index end ----------*/

    /*---------- footer start ----------*/

    .index_footer {
        display: block;
        padding: 6.6rem 11.6rem;
    }
    .footer_item {
        display: block;
        width: 100%;
    }
    .footer_item:nth-child(2) {
        margin-top: 3.6rem;
    }
    .footer_text {
        font-size: 1.7rem;
    }
    .footer_link {
        font-size: 1.7rem;
        margin-top: 1.2rem;
    }
    .footer_text_footnote {
        font-size: 1.7rem;
        margin-top: 1.2rem;
    }

    /*---------- footer end ----------*/

    .modal__container {
        width: 688px;
        clip-path: path('M0 39.2581C0 15.9805 20.7311 -1.89627 43.7971 1.2352C112.378 10.5459 247.262 27 344 27C440.738 27 575.622 10.5459 644.203 1.2352C667.269 -1.89627 688 15.9804 688 39.258V363.742C688 387.02 667.269 404.896 644.203 401.765C575.622 392.454 440.738 376 344 376C247.262 376 112.378 392.454 43.7971 401.765C20.7311 404.896 0 387.02 0 363.742V39.2581Z');
    }
}

@media screen and (max-width: 768px) {
        
    /*---------- common start ----------*/

    .black_link {
        font-size: 3.7rem;
        padding: 4.1rem 4.5rem;
        border-radius: 14rem;
    }
    .black_link.with_arrow:before {
        width: 13rem;
        height: 13rem;
    }
    .ai_image_wrapper:after,
    .blur_image_container:after {
        content: '*';
        display: block;
        width: 1em;
        height: 1em;
        position: absolute;
        bottom: 1em;
        right: 1em;
        color: #FFFFFF;
        font-size: 3rem;
        line-height: 1em;
        z-index: 3;
    }
    .blur_image_container:after {
        bottom: .3em;
        right: .3em;
    }

    /*----------common end ----------*/

    /*---------- index start ----------*/
    .breadcrumbs {
        padding-left: 14rem;
        font-size: 3rem;
        line-height: 1.1em;
        padding-top: 5rem;
    }
    .index_main {
        background: linear-gradient(to bottom, #FFFFFF, #F6F6F6 40%);
    }
    .bubble_image_container_1 {
        width: 100%;
        height: 270rem;
        background-image: url(./img/bubbles_1_mobile.png);
        background-position: 0 0;
        top: 170rem;
        background-size: 70% auto;
    }
    .bubble_image_container_2 {
        width: 100%;
        height: 250rem;
        background-image: url(./img/bubbles_2_mobile.png);
        background-position: 0px 15rem;
        top: 604rem;
        right: auto;
        left: 0;
        background-size: 110% auto;
    }
    .bubble_image_container_3 {
        display: none;
    }
    .kv_article {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        padding: 2.4rem 3.1rem;
    }
    .kv_article .ai_image_wrapper {
        width: 100%;
    }
    .kv_desktop {
        display: none;
    }
    .kv_tablet {
        display: none;
    }
    .kv_mobile {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        object-fit: contain;
    }
    .oncode_logo {
        width: 11.2rem;
        top: 10rem;
        left: 10rem;
        filter: drop-shadow(1px 1px 0px black);
    }
    .kv_text_container {
        width: 100%;
        top: 65vh;
        top: calc(var(--vh, 1vh) * 55);
        left: 0;
    }
    .kv_title {
        width: 100%;
        text-align: center;
        font-size: 15.5em;
    }
    .kv_text {
        width: 100%;
        text-align: center;
        font-size: 4.5em;
        margin-top: 3rem;
        box-sizing: border-box;
        padding: 0 9rem;
    }
    .article_item_1 {
        margin-top: 30rem;
    }
    .standard_title {
        text-align: center;
        font-size: 7rem;
        padding: 0;
        font-weight: 500;
    }
    .standard_title.gray_standard_title {
        color: #AFAFAF;
        padding-left: 0;
    }
    .article_item_1 .standard_title:nth-child(3) {
        margin-top: 1rem;
        padding: 0 4rem;
    }
    .app_image_container {
        display: flex;
        flex-direction: column-reverse;
        padding: 0 12.5rem;
        margin-top: 4.5rem;
    }
    .app_image {
        width: 58rem;
        margin-top: 4rem;
    }
    .app_image_description {
        font-size: 3.7rem;
        opacity: .4;
        margin-top: 8rem;
        width: 100%;
        text-align: center;
        font-weight: 500;
    }
    .article_item_2 {
        margin-top: 19rem;
        padding: 0 8.4rem;
    }
    .article_item_2 .article_image {
        width: 75rem;
        height: 61rem;
        background-image: url(./img/image_1_mobile.png);
    }
    .article_item_2 .article_image:after {
        content: '*';
        display: block;
        width: 1em;
        height: 1em;
        position: absolute;
        bottom: 1em;
        right: 1em;
        color: #FFFFFF;
        font-size: 2.5em;
        line-height: 1em;
        z-index: 3;
    }
    .info_container_1 {
        width: 100%;
        margin-top: 11.5rem;
    }
    .info_container_1_text {
        font-size: 5.5rem;
        width: 100%;
        margin-top: 4.5rem;
        text-align: center;
    }
    .info_container_1_title {
        font-size: 7rem;
        margin-top: 2.8rem;
        text-align: center;
    }
    .info_container_1_text_mini {
        display: block;
        width: 100%;
        height: auto;
        text-align: left;
        font-size: 3.6rem;
        line-height: 1.3em;
        margin-top: 4.5rem;
        text-align: center;
    }
    .article_item_3 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        width: 93rem;
        height: 180.5rem;
        background-color: #FFFFFF;
        border-radius: 9rem;
        margin: 15.7rem auto 0;
        padding: 6rem 7rem 2rem;
    }
    .article_item_3 .ai_image_wrapper {
        width: auto;
    }
    .article_item_3 .ai_image_wrapper:after {
        right: 2em;
    }   
    .article_item_3 .article_image {
        width: 82rem;
        height: 50rem;
        background-image: url(./img/image_2_mobile.png);
    }
    .article_item_3 .black_link {
        margin-top: 4.5rem;
        width: 53rem;
        height: 13rem;
        margin-left: 6.5rem;
    }
    .info_container_2 {
        width: 83rem;
        margin-top: 6.5rem;
    }
    .info_container_2_title {
        font-size: 7.5rem;
        text-align: center;
    }
    .info_container_2_text {
        width: 100%;
        font-size: 5.5rem;
        margin-top: 4.5rem;
        text-align: center;
    }
    .info_container_2_text_mini {
        font-size: 3.75rem;
        margin-top: 4.5rem;
        text-align: center;
    }
    .article_item_4 {
        display: block;
        padding: 19.5rem 0 10rem;
    }
    .cases_map {
        width: 100%;
        height: 59rem;
    }
    .case_image {
        display: none !important;
    }
    .blur_image_container {
        height: 100%;
    }
    .case_item {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .case_item_1 {
        width: 55rem;
        height: 40rem;
        left: 34rem;
        background-image: url(./img/case_image_1_mobile.png);
    }
    .case_1_container {
        display: none;
    }
    .case_item_2 {
        top: -2rem;
        left: 13rem;
        width: 18rem;
        height: 13rem;
        background-image: url(./img/case_image_2_mobile.png);
    }
    .case_item_3 {
        top: 12.7rem;
        left: 10rem;
        width: 25rem;
        height: 41rem;
        background-image: url(./img/case_image_3_mobile.png);
    }
    .case_item_4 {
        top: 42rem;
        left: 49.1rem;
        width: 29rem;
        height: 15rem;
        background-image: url(./img/case_image_4_mobile.png);
    }
    .case_image.case_image_noblur {
        opacity: 1;
    }
    .case_image.case_image_blur {
        display: none;
    }
    .case_arrow_image {
        display: none;
    }
    .info_container_3 {
        width: 100%;
        margin-top: 9rem;
        padding: 0 4rem;
        box-sizing: border-box;
    }
    .info_container_3_title {
        width: 100%;
        font-size: 8.3rem;
        line-height: normal;
        text-align: center;
    }
    .info_container_3_text {
        width: 100%;
        font-size: 5.5rem;
        margin-top: 7rem;
        text-align: center;
    }
    .info_container_3_text_mini {
        width: 100%;
        font-size: 3.8rem;
        margin-top: 2rem;
        text-align: center;
        padding: 0 4rem;
        box-sizing: border-box;
    }
    .article_item_4 .black_link {
        margin-top: 7rem;
        width: 60rem;
        height: 13rem;
        margin-left: 9.5rem;
    }
    .back_to_top_button {
        width: 12rem;
        height: 12rem;
    }

    /*---------- index end ----------*/

    /*---------- footer start ----------*/

    .index_footer {
        display: block;
        padding: 12.5rem 16rem;
    }
    .footer_item {
        display: block;
        width: 100%;
    }
    .footer_item:nth-child(2) {
        margin-top: 7rem;
    }
    .footer_text {
        font-size: 3rem;
    }
    .footer_link {
        font-size: 3rem;
        margin-top: 2rem;
    }
    .footer_text_footnote {
        font-size: 3rem;
        margin-top: 2rem;
    }

    /*---------- footer end ----------*/

    .modal__container {
        width: 343px;
        height: 276px;
        clip-path: path('M0 30.9749C0 12.5861 16.3685 -1.54102 34.6043 0.826091C70.8951 5.53685 128.518 12 171.5 12C214.482 12 272.105 5.53685 308.396 0.826095C326.631 -1.54102 343 12.5861 343 30.9749V237.025C343 255.414 326.632 269.541 308.396 267.174C272.105 262.463 214.482 256 171.5 256C128.518 256 70.8952 262.463 34.6043 267.174C16.3685 269.541 0 255.414 0 237.025V30.9749Z');
    }

    .modal__title {
        font-size: 28px;
    }

    .modal__text {
        font-size: 13px;
        line-height: 16px;
        padding: 15px 30px;
    }

    .modal__btn {
        width: 142px;
        height: 45px;
        font-size: 13px !important;
        padding: 0 !important;
    }
}