/* imgbox videobox -------------------------------------- */
.img_box,
.video_box {
    border-radius: 37px;
    overflow: hidden;
    margin-top: 35px;
}

.video_box {
    position: relative;
    max-width: 1012px;
    margin: auto;
}
marquee{
    position: absolute;
    width: 100vw;
    top: 400px;
    left: 50%;
    right: 0;
    color: #888;
    font-size: 140px;
    line-height: 150px;
    transform: translateX(-50%) !important;
}

.video_box video {
    width: 100%;
    height: auto;
}

/* text font style -------------------------------------- */
.text_19,
.text_19 span,
.text_w_19,
.text_w_19 span {
    font-size: 19px;
    line-height: 29px;
    margin-top: 20px;
}

.text_19 {
    color: #888;
}

.text_19 span {
    color: #000;
    font-family: 'SpokaHanSansNeoB';
}

.text_w_19 {
    color: #888;
    margin-top: 20px;
}

.text_w_19 span {
    color: #fff
}

/* title font style -------------------------------------- */
.title_black_28 {
    font-size: 28px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 35px;
}

.title_black_38 {
    font-size: 38px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 52px;
}

.title_black_40,
.title_black_40 span {
    font-size: 40px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 47px;
}

.title_white_52 {
    font-size: 52px;
    font-family: 'SpokaHanSansNeoB';
    text-align: center;
    color: #fff;
    padding-bottom: 45px;
    line-height: 1;
}

.title_black_52 {
    font-size: 52px;
    font-family: 'SpokaHanSansNeoB';
    text-align: center;
    padding-bottom: 45px;
    line-height: 1;
}

.title_white_28 {
    font-size: 28px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 35px;
    color: #fff;
}

.title_white_38,
.title_white_38 span {
    font-size: 38px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 52px;
    color: #fff;
}

.title_white_40,
.title_white_40 span {
    font-size: 40px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 60px;
    text-align: center
}

.title_white_40 {
    color: #888;
}

.title_white_40 span {
    color: #fff;
}

.title_38,
.title_38 span {
    font-size: 38px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 52px;
    color: #888;
}

.title_38 {
    color: #888;
}

.title_38 span {
    color: #fff;
}

.cont_title {
    margin:120px 0 45px;
    text-align: center;
}

.cont_title p {
    color: #888;
    font-size: 28px;
    font-family: 'SpokaHanSansNeoB';
    line-height:2.5;
}

.cont_title h3 {
    font-size: 52px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 1.5;
    color: #fff;
    /* margin-top: 10px; */
    line-height:1.5
}

/* margin top -------------------------------------- */
.mt_20 {
    margin-top: 20px;
}

.mt_85 {
    margin-top: 85px;
}
.mt_110 {
    margin-top: 110px;
}

.pm_75 {
    padding-left: 75px;
    margin-top: 75px;
}

/* padding-left margin-top 75 */

.textbox_1012 {
    max-width: 1012px;
    margin: 90px auto 0;
}

/* textbox width :1012px */

/* white box -------------------------------------- */
.sub_white {
    background: #fff;
    max-width: 1386px;
    margin: auto;
    border-radius: 17px;
    padding: 150px 187px;
    overflow: hidden;
}

.sub_white .title_black_40 {
    margin-bottom: 25px;
}

.sub_white .title_black_28 {
    margin-bottom: 20px;
}

.sub_white .title_black_38 {
    margin-bottom: 25px;
}

/* section */
.section {
    text-align: left;
    margin-top: 30px;
    padding: 0;
}

.section_flex_box {
    gap: 100px;
    max-width: 880px;
    margin: 0 auto;
}

/* 000, 왜 망설이시나요? -------------------------------------- */
.icon_list {
    margin-top: 120px;
}
.icon_list .cont_title {
    margin-top:0;
}

.icon_list h3 {
    color: #000;
    margin-top: 0;
}

.icon_list .sub_white {
    padding: 150px;
}

.icon_list .list_box .list_card {
    position:relative;
    display: flex;
    align-items: center;
    padding: 23px 0;
    padding:28px 0 28px 260px;
}

.icon_list .list_box .list_card + .list_card {
    border-top: 2px dotted #a6a6a6;
}

.icon_list .list_box .list_card .img_box {
    margin-top: 0;
    position:absolute;
    left:55px;
}

.icon_list .list_box .list_card .text_box {
    width: 100%;
}

.icon_list .list_box .list_card .text_box h3 {
    font-size: 28px;
    line-height: 35px;
    font-family: 'SpokaHanSansNeoB';
}


/* benefit_box --------------------------------------  */
.benefit {
    margin-top: 120px;
}

.benefit_box {
    position: relative;
    margin: 60px auto;
    text-align: center;
}

.benefit_box span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 406px;
    height: 413px;
    margin: auto;
}

.benefit_box span:nth-child(2) {
    transition: width 2s ease-in-out;
}

.benefit_box span:nth-child(3) {
    transition: width 2s ease-in-out;
}

.benefit_box.aos-animate span:nth-child(2) {
    width: 680px;
}

.benefit_box.aos-animate span:nth-child(3) {
    width: 1090px;
}

.benefit_box span:before,
.benefit_box span:after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 406px;
    height: 413px;
    margin: auto 0;
    background: url('/static/images/sub/sub3/benefit_bg.png') no-repeat center/100% 100%;
    transition: all 2s ease-in-out;
}

.benefit_box.aos-animate span:nth-child(2):before,
.benefit_box.aos-animate span:nth-child(2):after {
    opacity: .4;
    width: 276px;
    height: 281px;
    filter: blur(5px);
}

.benefit_box.aos-animate span:nth-child(3):before,
.benefit_box.aos-animate span:nth-child(3):after {
    opacity: .2;
    width: 175px;
    height: 178px;
    ;
    filter: blur(10px);
}

.benefit_box span:before {
    left: 0;
}

.benefit_box span:after {
    right: 0;
}


/* 000 why? -------------------------------------- */
.why_box {
    text-align: center;
    margin-top: 30px;
}

.why_box .title_black {
    padding-top: 45px;
    margin-top: 50px;
    background: url('/static/images/icon/check_icon.png')no-repeat center top;
    font-size: 40px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 52px;
    text-align: center;
}

.why_box .section_flex_column+.section_flex_column {
    margin-top: 100px;
}


/* .youtube -------------------------------------- */
.youtube {
    margin-top: 190px;
}

.youtube .title {
    color: #fff;
    font-size: 47px;
    font-family: 'SpokaHanSansNeoB';
    line-height: 67px;
    margin-bottom: 60px;
    text-align: center;
}

.youtube .youtube_slide li {
    border-radius: 30px;
    overflow: hidden;
}

.youtube_slide {
    overflow: visible !important;
    /* 양옆 슬라이드 넘치게 */
    padding: 40px 0;
}

.youtube .swiper-slide:after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    left: 0;
    top: 0;
}

.youtube_slide .swiper-wrapper {
    overflow: visible;
}

.youtube_slide .swiper-slide {
    width: 680px;
    /* 슬라이드 너비 고정 → 좌우가 보이는 효과 */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.youtube_slide .swiper-slide img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.youtube_slide .swiper-slide-active {
    transform: scale(1);
    /* 가운데 강조 */
    opacity: 1;
    z-index: 3;
}

.youtube .swiper-slide.swiper-slide-active:after {
    display: block;
    position: absolute;
    background: url('/static/images/icon/youtube_mark.png')no-repeat;
    width: 100px;
    height: 73px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 유튜브 네비게이션 버튼 위치 조절 -------------------------------------- */
.youtube .swiper_button {
    position: absolute;
    width: 790px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}

.youtube_slide .swiper-button-next,
.youtube_slide .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.youtube_slide .swiper-button-next {
    right: -20px;
}

.youtube_slide .swiper-button-prev {
    left: -20px;
}


/* check icon 있는 리스트 -------------------------------------- */
.list_chk li {
    position: relative;
    text-align: center;
    color: #fff;
    line-height: 1.8;
    font-family: 'SpokaHanSansNeoM';
}

.list_chk li:before {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 20px;
    background: url('/static/images/icon/bu_icon.png')no-repeat;
}

.list_chk li span {
    color: #888;
    font-size: 28px;
}

/* xray */
.xray {
    margin-top: 50px;
}

.xray h2 {
    font-size: 52px;
    font-family: 'SpokaHanSansNeoB';
    text-align: center;
    line-height: 70px;
    color: #fff;
    padding-bottom: 45px;
}

.xray .flex_margin {
    max-width: 1012px;
    margin: 20px auto 0;
    justify-content: space-between;
}

.xray .flex_margin .flex_left {
    width: calc(50% - 75px);
}

.xray .flex_margin .section_flex_right {
    width: calc(50% - 65px);
}

.xray .section_flex_box .section_flex_left {
    padding-left: 75px;
}

.xray .flex_margin .text_19 {
    color: #fff;
}

.xray .section_flex_box .title_white_28 {
    margin-bottom: 20px;
}

.xray .xray_img_slide .slide_img {
    position: relative;
}

.xray .xray_img_slide .img_box {
    position: relative;
}

.xray .xray_img_slide .slide_img:before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9;
    opacity: 0;
    transition: .3s ease-in-out;
}

.xray .xray_img_slide li:hover .slide_img:before {
    opacity: 1;
}

.xray .xray_img_slide .swiper-slide {
    max-width: 1032px;
}

.xray .xray_img_slide .slide_img .img_left {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.xray_bottom {
    margin-top: 150px;
}

/* qna */
.qna .sub_white {
    padding: 70px 150px 95px;
    margin-top: 65px;
}

.qna .sub_white h2:before {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url('/static/images/icon/title_icon.png')no-repeat;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.qna h2 {
    position: relative;
    font-size: 52px;
    font-family: 'SpokaHanSansNeoB';
    text-align: center;
    line-height: 1.5;
    padding-top: 70px;
}

.qna .qna_wrap {
    max-width: 860px;
    margin: 45px auto;
}

.qna .qna_wrap .qna_list {
    margin-bottom: 15px;
}

.qna .qna_wrap .qna_list .qna_q {
    background: #e8e8e9;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
}

.qna .qna_wrap .qna_list .qna_q:hover {
    background: #d8d8d9;
}

.qna .qna_wrap .qna_list .qna_q p {
    position: relative;
    font-size: 19px;
    font-family: 'SpokaHanSansNeoM';
    line-height: 60px;
    padding: 0 60px 0 60px;
    margin: 0;
}

.qna .qna_wrap .qna_list .qna_q p:before {
    content: 'Q';
    display: inline-block;
    position: absolute;
    left: 30px;
}

.qna .qna_wrap .qna_list .qna_q .qna_icon {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #666;
    transition: transform 0.3s ease;
    background: url('/static/images/icon/arrow_black.png')no-repeat;
    width: 14px;
    height: 8px;
}

.qna .qna_wrap .qna_list.active .qna_q .qna_icon {
    transform: translateY(-50%) rotate(180deg);
}

.qna .qna_wrap .qna_list .qna_a {
    max-height: 0;
    overflow: hidden;
    padding: 0 30px 0 60px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.qna .qna_wrap .qna_list.active .qna_a {
    max-height: 500px;
    padding: 20px 30px 20px 60px;
}

.qna .qna_wrap .qna_list .qna_a p {
    position: relative;
    font-size: 19px;
    font-family: 'SpokaHanSansNeoM';
    line-height: 1.5;
    margin: 0;
}

.qna .qna_wrap .qna_list .qna_a p:before {
    content: 'A';
    display: inline-block;
    position: absolute;
    left: -30px;
}


/* .section.xray, .section.qna{ margin-top:120px; } */
.qna .sub_black {
    margin-top: 65px;
    background: transparent
}

.qna .sub_black h2 {
    color: #fff;
}

.qna .sub_black .qna_wrap .qna_list .qna_q {
    background: #222224;
}

.qna .sub_black .qna_wrap .qna_list .qna_q .qna_icon {
    background: url('/static/images/icon/arrow_white.png')no-repeat
}

.qna .sub_black .qna_wrap .qna_list .qna_q p {
    color: #fff;
}

.qna .sub_black .qna_wrap .qna_list .qna_a p {
    color: #fff;
}

.qna .qna_wrap .qna_list .qna_q p:before,
.section.qna .sub_black .qna_wrap .qna_list .qna_a p:before {
    color: #9b9b9b
}

@media(max-width:1528px) {

    /* common -------------------------------------- */
    .sub_white {
        padding: 150px 100px;
    }

    .section {
        padding: 0 20px;
    }

    .section_flex_box {
        max-width: 100%;
    }

    /* youtube -------------------------------------- */
    .youtube {
        margin-top: 190px
    }

    /* qna -------------------------------------- */
    .qna .sub_black h2 {
        padding-top: 0;
    }

    .qna .sub_white {
        padding: 70px 100px 95px;
    }

    /* xray -------------------------------------- */
    .xray .xray_img_slide .swiper-slide {
        width: 800px;
        max-width: 100%;
    }

}

@media(max-width:1024px) {

    marquee{
        top: 200px;
        font-size: 70px;
        line-height: 75px;
    }

    .sub_white {
        max-width: 100%;
        padding: 60px 50px;
    }

    .pm_75 {
        padding-left: 0;
        margin-top: 38px;
    }

    /* common ----------------------------------------- */
    .section .section_inner {
        max-width: 100%;
        padding: 0;
    }

    .textbox_1012 {
        margin-top: 45px;
    }


    /* font style ----------------------------------------- */
    .title_white_52,
    .title_black_52 {
        font-size: 26px;
        line-height: 27px;
    }

    .title_black_28 {
        font-size: 16px;
        line-height: 20px;
    }

    .title_black_38,
    .title_white_38,
    .title_white_38 span {
        font-size: 20px;
        line-height: 26px;
    }

    .title_black_40,
    .title_black_40 span,
    .title_white_40,
    .title_white_40 span {
        font-size: 20px;
        line-height: 24px;
    }

    .text_19,
    .text_19 span,
    .text_w_19,
    .text_w_19 span {
        font-size: 14px;
        line-height: 20px;
        margin-top: 10px;
    }
    
    .text_19,
    .text_w_19{
        font-weight:500;
    }

    .text_19 span,
    .text_w_19 span{
        font-family: 'SpokaHanSansNeoB';
    }

    .title_38,
    .title_38 span {
        font-size: 20px;
        line-height: 26px;
    }

    .title_white_28 {
        font-size: 16px;
        line-height: 20px;
    }

    .cont_title {
        margin:90px auto 40px;
    }

    .cont_title p {
        font-size: 14px;
    }

    .cont_title h3 {
        font-size: 25px;
        /* margin-top: 10px; */
    }


    .img_box,
    .video_box {
        border-radius: 18px;
        margin-top: 40px;
        margin-top: 0;
    }

    .section_flex_box {
        gap: 50px;
    }

    /* xray -------------------------------------------- */
    .xray {
        padding: 0;
    }

    .xray h2 {
        font-size: 25px;
        line-height: 35px;
        padding-bottom: 40px;
    }

    .xray .flex_margin {
        max-width: 506px;
        margin-top: 10px;
        gap: 0;
    }

    .xray .flex_margin .flex_left {
        padding-left: 0;
    }

    .xray .xray_img_slide .swiper-slide {
        width: 490px;
        max-width: 100%;
    }

    .section.xray_bottom {
        margin-top: 60px;
    }

    /* section qna */
    .qna {
        padding: 0 20px;
    }

    .qna .sub_white {
        margin-top: 30px;
        padding: 35px 50px 47px;
    }

    .qna h2 {
        font-size: 25px;
        line-height: 35px;
        padding-top: 35px;
    }

    .qna .sub_white h2:before {
        background-size: auto 25px;
    }

    .qna .qna_wrap {
        margin-top: 35px;
        max-width: 100%;
    }

    .qna .qna_wrap .qna_list .qna_q {
        border-radius: 4px;
    }

    .qna .qna_wrap .qna_list .qna_q p {
        padding: 10px 20px 10px 30px;
        font-size: 14px;
        line-height: 20px;
    }

    .qna .qna_wrap .qna_list .qna_q p:before {
        left: 15px;
    }

    .qna .qna_wrap .qna_list .qna_q .qna_icon {
        background-size: 9px 6px;
        top: 18px;
        right: 15px;
        width: 9px;
        height: 6px;
    }

    .qna .qna_wrap .qna_list .qna_q .qna_icon,
    .qna.sub_black .qna_wrap .qna_list .qna_q .qna_icon {
        background-size: 9px 6px !important;
    }

    .qna .qna_wrap .qna_list.active .qna_a {
        padding: 10px 15px 10px 30px;
    }

    .qna .qna_wrap .qna_list.active .qna_a p {
        font-size: 14px;
        line-height: 20px;
    }

    .qna .qna_wrap .qna_list .qna_a p:before {
        left: -15px;
    }

    /* check icon 있는 리스트 */
    .list_chk li {
        font-size: 14px;
    }

    .list_chk li:before {
        width: 12px;
        height: 12px;
        background-size: 12px 12px;
        margin-right: 10px;
    }

    /* 000, 왜 망설이시나요 */
    .icon_list {
        margin-top: 78px;
        padding:0 20px;
    }
    .icon_list .cont_title{
        margin:0 auto 40px;
    }

    .icon_list .sub_white {
        padding: 60px 75px
    }

    .icon_list .list_box .list_card {
        padding: 14px 0 14px 130px;
    }

    .icon_list .list_box .list_card .img_box {
        width: 75px;
        left:28px;
    }

 
    .icon_list .list_box .list_card .text_box h3 {
        font-size: 16px;
        line-height: 1.3
    }
   

    /* benefit_box */
    .benefit{
        margin-top:0;
    }
    .benefit .cont_title{
        margin-top: 55px;
    }

    .benefit_box {
        margin: 30px auto;
    }

    .benefit_box img {
        width: 203px;
    }

    .benefit_box span {
        height: 206px;
        width: 203px;
    }

    .benefit_box.aos-animate span:nth-child(2) {
        width: 340px;
    }

    .benefit_box.aos-animate span:nth-child(2):before,
    .benefit_box.aos-animate span:nth-child(2):after {
        width: 138px;
        height: 140px;
        filter: blur(3px)
    }

    .benefit_box.aos-animate span:nth-child(3) {
        width: 545px;
    }

    .benefit_box.aos-animate span:nth-child(3):before,
    .benefit_box.aos-animate span:nth-child(3):after {
        width: 87px;
        height: 89px;
        filter: blur(5px);
    }


    /* 000 why? */
    .why_box {
        margin: 15px 20px;
    }

    .why_box .title_black {
        margin-top: 25px;
        padding-top: 23px;
        background-size: 17px 17px;
        font-size: 20px;
        line-height: 26px;
    }

    .why_box .section_flex_column + .section_flex_column {
        margin-top: 50px;
    }

    
    .why_box .img_box {
        margin-top: 30px;
    }

    /* .section.youtube */
    .youtube {
        margin-top: 100px !important;
    }

    .youtube .title {
        font-size: 23px;
        line-height: 33px;
        margin-bottom: 30px;
    }

    .youtube_slide {
        padding: 0;
    }

    .youtube .youtube_slide li {
        border-radius: 11px;
    }

    .youtube .youtube_slide .swiper-slide {
        width: 420px !important;
    }

    .youtube .swiper-slide.swiper-slide-active:after {
        background-size: 50px 36px;
        width: 50px;
        height: 36px;
    }

    .youtube_slide .swiper-button-next,
    .youtube_slide .swiper-button-prev {
        top: auto;
        transform: none;
    }

    .youtube .swiper_button {
        width: 500px;
    }

}

@media(max-width:580px) {


    /* br 모바일 제거 */
    .pm_75 {
        padding-left: 0;
        margin-top: 0;
    }

    /* padding-left, margin-left 75px */
    .sub_white .title_black_28 {
        margin-bottom: 10px;
    }

    .sub_white .title_black_38 {
        margin-bottom: 0;
    }

    .section_flex_box {
        gap: 10px
    }

    .section_flex_box>div {
        width: 100%;
    }


    /* 왜 망설이시나요 */
    .icon_list .sub_white {
        padding: 30px 20px
    }

    .icon_list .list_box .list_card {
        padding-left: 100px;
    }

    .icon_list .list_box .list_card .img_box {
        left:10px;
    }

    .icon_list .list_box .list_card .text_box h3 {
        font-size: 16px;
        line-height: 1.3
    }

    /* youtube */
    .youtube {
        margin-top: 100px
    }

    .youtube .youtube_slide {
        padding: 0;
    }

    .youtube .youtube_slide .swiper-slide {
        width: 250px !important;
    }

    .youtube .youtube_slide li {
        margin: 0;
    }

    .youtube .swiper-slide.swiper-slide-active:after {
        width: 50px;
        height: 36px;
        background-size: cover
    }

    .youtube .swiper-button-next,
    .swiper-button-prev {
        width: 17px;
        height: 30px;
    }

    .youtube .swiper-button-prev {
        left: 10px;
    }

    .youtube .swiper-button-next {
        right: 10px;
    }

    .youtube .youtube_slide .swiper-button-next,
    .youtube .youtube_slide .swiper-button-prev {
        top: 20px;
    }

    /* xray */
    .xray .flex_margin {
        gap: 20px;
        max-width: 100%;
        padding: 0 20px;
    }

    .xray .flex_margin .section_flex_right {
        width: 100%;
    }

    .xray .xray_img_slide .swiper-slide {
        width: 270px;
    }

    .xray .flex_margin .title_white_28 {
        margin-bottom: 10px;
    }

    /* qna */
    .qna .sub_white {
        margin-top: 35px;
        padding: 35px 20px 47px;
    }

    .qna .sub_white h2 {
        padding: 35px 20px 0;
    }

    .qna .qna_wrap .qna_list {
        margin-bottom: 5px;
    }


}