* {
    color: #1c1c1c;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

body {
    width: 100%;
    /*max-width: 1016px;*/
    margin: 0 auto;
}
/*2023.07.11 헤더 중복삭제 */
/*header {*/
/*    height: 201px;*/
/*    width: 100%;*/
/*    background-color: #fff;*/
/*    opacity: 0.8;*/
/*    position: fixed;*/
/*}*/

h3 {
    color: #767676;
    text-align: center;
    font-weight: 300;
    font-size: 16px;
}
/*2023.07.11 메인이미지 높ㄴ이 변경 */
.main_banner {
    width: 100%;
     /*height: calc(100lvh - 181px);*/
    /*aspect-ratio: 1/1.7;*/
    height: calc(100vh - 200px);
    padding: 30px;
    margin-top: 60px;
    box-sizing: border-box;
    animation: blur-banner 2s ease-in-out forwards;
    /*margin-top: 201px;*/
}
.main_banner .gradient{
    display: none;
}
div.content{
    width: 100%;
    max-width: 1016px;
    margin: 0 auto;
    overflow: hidden;
}
@keyframes blur-banner {
    from {
        /* filter: blur(3px) */
        filter: grayscale(100%);
    }

    to {
        /* filter: blur(0); */
        filter: grayscale(0);
    }
}

.main_banner .banner-txt_box .logo {
    width: 200px;
    height: 20px;
    margin-bottom: 40px;
    background: url(../../../../../img/logo.png) no-repeat center / cover;
    animation: fade-up-banner 0.5s linear 0.5s forwards;
    opacity: 0;
}

.banner-txt_box {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 100px;
}

.banner-big_title {
    font-size: 55px;
    font-weight: 700;
    animation: fade-up-banner 0.5s linear 0.5s forwards;
    opacity: 0;
    color: #fff;
}
.banner-big_title.smaller{
    font-size: 40px;
}
.banner-big_title:has(font),
.banner-small_title:has(font){
    padding: 0 20px;
    margin-top: 20px;
    word-break: keep-all;
    text-align: center;
}
.banner-big_title font,
.banner-small_title font{
    color: #fff;
}
@keyframes fade-up-banner {
    from {
        transform: translate(0, 50%);
        opacity: 0;
    }

    to {
        transform: translate(0, -50%);
        opacity: 1;
    }
}

.banner-small_title {
    font-size: 24px;
    font-weight: 300;
    animation: fade-in-banner 0.5s linear 1s forwards;
    opacity: 0;
    color: #fff;
}

@keyframes fade-in-banner {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.main_description_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.main_description_small {
    margin-bottom: 20px;
    color: #767676;
    font-size: 24px;
}
.main_description_small font{
    color: #767676;
}

.main_description_big {
    font-size: 55px;
    font-weight: 700;
    color: #3A4C40;
    text-align: center;
    margin: 20px 0;
}
.main_description_big font{
    color: #3A4C40;
}
.common_section {
    background-color: #efefef;
    padding: 80px 20px 20px;
}

.common_box {
    width: 100%;
}

.common_img.full-width {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.common_img img {
    width: 100%;
}

.common_title,
.common_sub {
    text-align: center;
}

.common_title {
    font-size: 44px;
    font-weight: 700;
    margin: 40px 0 10px;
}

.common_sub {
    margin-bottom: 80px;
    font-weight: 700;
}

.common_section .common_box:nth-last-child(1) .common_img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:         "video1 video1"
        "photo1 photo2";
    gap: 10px;
    height: 700px;
}
.common_section .common_box:nth-last-child(1) .photo-3d{
    display: flex;
    align-items: center;
}

.common_section .common_box:nth-last-child(1) .common_img .photo-3d,
.common_section .common_box:nth-last-child(1) .common_img .video-3d {
    border-radius: 16px;
}

.common_section .common_box .common_img .photo-3d {
    overflow: hidden;
    text-align: center;
}





.common_section .common_box .common_img .video-3d-large {
    grid-area: video1;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.common_section .common_box .common_img .video-3d-large video {
    height: 100%;
    width: 100%;
    object-fit: cover;

}
.common_section .common_box .common_img .video-3d-large::after{
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;






    .
































    ........
    left: 0;
}
.common_section .common_box .common_img .video-3d-small video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.common_section .common_box .common_img .video-3d-small::after{
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.common_section .common_box .common_img .video-3d-small{
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.symptoms-img_box {
    width: 100%;
    height: 100vw;
    max-height: 1000px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.symptoms-img_box img {
    width: 100%;
}

.make-bold {
    font-weight: 700;
}

.text-img {
    font-size: 55px;
    font-weight: 300;
    position: absolute;
    top: 50%;
}

section.plan-step {
    padding: 100px 120px;
}

section.plan-step .title {
    font-size: 44px;
    font-weight: 700;
    color: #3A4C40;
    text-align: center;
    margin-bottom: 80px;
}
section.plan-step .title font{
    color: #3A4C40;
}
section.plan-step .step_box:nth-child(2) {
    background: url(../../../../../img/common/step01.jpg) no-repeat center/ cover;
    /*background-position: -30px;*/
    /*background-size: 130%;*/
}

section.plan-step .step_box:nth-child(3) {
    background: url(../../../../../img/common/step02.jpg) no-repeat center / cover;
    justify-content: end;
    /*background-size: 130%;*/
}

section.plan-step .step_box:nth-child(4) {
    background: url(../../../../../img/common/step03.jpg) no-repeat center / cover;
    /*background-position: -80px -70px;*/
    /*background-size: 130%;*/
}

section.plan-step .step_box {
    width: 100%;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    margin-bottom: 40px;
}

section.plan-step .step_box .txt_box {
    background-color: rgba(14, 10, 10, 0.9);
    width: 320px;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
}

section.plan-step .step_box .txt_box .step {
    font-size: 44px;
    color: #7a73cd;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid #7a73cd;
    margin-bottom: 30px;
}
section.plan-step .step_box .txt_box .step:has(font){
    margin-bottom: 16px;
}
section.plan-step .step_box .txt_box .step font{
    color: #7a73cd;
}
section.plan-step .step_box .txt_box .tit {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

section.plan-step .step_box .txt_box .sub {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}
section.plan-step .step_box .txt_box .tit font,
section.plan-step .step_box .txt_box .sub font{
    color: #ffffff;
}
section.radar-chart {
    width: 100%;
    height: 1100px;
    overflow: hidden;
}

.symptoms-desc_box {
    padding: 40px 100px 80px;
    /* border-bottom: 1px solid #efefef; */
}

.symptoms-desc_box .symptoms_img {
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.symptoms-desc_box .symptoms_tit {
    color: #7a73cd;
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    margin: 20px 0;
}
.symptoms-desc_box .symptoms_tit font{
    color: #7a73cd;
}
.symptoms-desc_box .symptoms_sub {
    color: #767676;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    width: 100%;
}
.symptoms-desc_box .symptoms_sub font{
    display: inline-block;
    width: 100%;
    line-break: anywhere;
}
section .txt span.bold,
section .tit span.bold {
    color: #7a73cd;
    font-weight: 700;
}

.video-3d {
    position: relative;
}

.video-3d .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    transform: translate(-50%, -50%);
}

section.radar-chart img {
    width: 100%;
}
@media screen and (max-width: 1920px){
    /*.main_banner{*/
    /*    background-position: center;*/
    /*}*/
}
@media screen and (max-width:1016px) {
    .main_banner{
        /*height: calc(100lvh - 141px);*/
        margin-top: 40px;
    }

    .common_section .common_box:nth-child(3) .common_img{
        height: 500px;
    }
}
@media screen and (max-width:820px) {
    .common_img img {}

    .common_img.full-width {
        height: 300px;
    }

    .banner-big_title {
        font-size: 32px;
    }

    .banner-small_title {
        font-size: 16px;
    }

    .main_description_big {
        font-size: 32px;
    }

    .main_description_small {
        font-size: 16px;
    }

    .common_title {
        font-size: 32px;
    }

    .symptoms-img_box {
        height: 600px;
    }

    .sline01 .flex-box {
        padding: 10px;
    }

    .sline01 .flex-box .txt {
        font-size: 16px;
        line-height: 20px;
    }

    section.radar-chart {
        height: 100vw;
        overflow: hidden;
    }

    section.plan-step {
        padding: 40px 10px;
    }

    section.plan-step .title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    section.plan-step .step_box {
        height: 50vw;
    }

    section.plan-step .step_box .txt_box {
        width: 45vw;
        height: 100%;
        padding: 40px 20px;
    }

    .symptoms-desc_box .symptoms_tit {
        margin: 10px 0;
    }
}

@media screen and (max-width:560px) {
    section.plan-step .step_box .txt_box .step {
        font-size: 24px;

        padding-bottom: 8px;

        margin-bottom: 16px;
    }
    .common_section .common_box .common_img .photo-3d img {
        /*height: 100%;*/
        /*width: auto;*/
    }
    section.plan-step .step_box {
        margin-bottom: 100px;
        border-radius: 12px;
    }


    section.plan-step .step_box .txt_box {
        width: calc(100vw - 20px);
        height: 180px;
        padding: 20px 32px;
        box-sizing: border-box;
        transform: translate(0, 80%);
        border-radius: 12px;
    }

    section.plan-step .step_box {
        overflow: visible;
    }

    .color-section .symptoms-desc_box .symptoms_img {
        height: 50vw;
        border-radius: 16px;
    }

    .symptoms-img_box {
        height: 100vw;
    }

    .sline01 .flex-box {
        flex-direction: column;
    }

    .sline01 .flex-box:nth-child(2),
    .sline01 .flex-box:nth-child(5) {
        flex-direction: column;
    }

    .sline01 .flex-box .img {
        width: 100%;
    }

    .sline01 .flex-box .txt {
        width: 100%;
    }

    .sline01 .flex-box .img img {
        width: 100%;
    }

    .sline01 .banner_box2 .txt {
        font-size: 24px;
    }

    section.plan-step .title {
        font-size: 24px;
    }

    .common_img.full-width,
    .common_img {
        height: 50vw;
        border-radius: 12px;
    }

    .common_title {
        font-size: 20px;
    }

    .common_sub {
        margin-bottom: 15vw;
        font-weight: 400;
        word-break: keep-all;
    }

    .banner-big_title,
    .main_description_big {
        font-size: 20px;
    }

    .banner-small_title,
    .main_description_small {
        font-size: 14px;
    }

    .main_description_box {
        padding: 20vw 10px;
    }

    .common_section {
        padding: 40px 10px;
    }

    .common_section .common_box:nth-child(3) .common_img .photo-3d,
    .common_section .common_box:nth-child(3) .common_img .video-3d {
        border-radius: 12px;
    }
}

@media screen and (max-width:460px) {
    section.plan-step .step_box {
        margin-bottom: 200px;
    }    .common_section .common_box:nth-child(3) .common_img{
             height: 400px;
         }
}

@media screen and (max-width:320px) {
    section.plan-step .step_box .txt_box .sub {
        font-size: 14px;
    }
    section.plan-step .step_box .txt_box{
        padding: 16px 16px;
    }
    .common_section .common_box .common_img .photo-3d{
        display: flex;
        justify-content: center;
    }
    .common_section .common_box .common_img .photo-3d img{
        width: auto;
        height: 100%;
    }
    .common_title {
        font-size: 16px;
    }
}