@charset "utf-8";

@import url(../../../fonts/Nelphim/Nelphim.css);
@import url('https://fonts.cdnfonts.com/css/rage-italic');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');


/* #content */
.img_box img {width: 100%;}
.block {display: block;}

.p_color {color: #FF7D9D;}
.p_text_n {font-family: 'Nelphim', serif;}
.p_text_m {font-family: 'Montserrat', sans-serif;}
.p_text_r {font-family: 'Rage Italic', sans-serif;}
.p_text_s {font-family: "Noto Serif KR", serif;}
.highlighter {position: relative; z-index: 1;}
.highlighter::before {content: ''; display: block; width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; z-index: -1;}


section > .inner {padding: 160px 16.66%; box-sizing: border-box;}
section .inner .title_text {font-weight: 700; font-size: 64px; line-height: 80px; letter-spacing: -1px; text-align: center;}
section .inner .add_text {display: block; font-weight: 400; font-size: 40px; line-height: 50px; color: #7765E3; text-align: center; margin-bottom: .25rem;}
section .inner .sub_explain p {font-weight: 300; font-size: 32px; line-height: 50px; letter-spacing: -1px; text-align: center; margin-bottom: 1em;}
section .inner .sub_explain p:last-of-type {margin-bottom: 0;}
section .inner .sub_explain p strong {font-weight: 700;}



.sub_visual {padding: 130px 0; text-align: center; background: rgba(240, 235, 255, .5);}
.sub_visual h1 {font-size: 72px; line-height: 1em; letter-spacing: -1px;}


.success_models .inner {padding: 0; margin-top: 160px; position: relative;}
.success_models .inner .title_text {font-size: 50px; margin-bottom: 80px;}
.success_models .mySwiper {overflow: hidden;} 
.success_models .mySwiper li {border-radius: 30px; background: linear-gradient(0, rgba(255, 200, 117, 1) 0%, rgba(255, 155, 123, 0.98) 100%);}
/* .success_models .mySwiper li.on {} */
.success_models .mySwiper li a {display: block; position: relative;}
.success_models .mySwiper .text_box {padding: 30px 8.5% 0; color: #fff;}
.success_models .mySwiper .text_box p {font-size: 18px; line-height: 1em; letter-spacing: -1px;} 
.success_models .mySwiper .text_box strong {display: block; font-size: 32px; line-height: 1em; margin: 8px 0;} 
.success_models .mySwiper .text_box .badge {display: inline-block; font-weight: 700; font-size: 16px; line-height: 27px; padding: 0 10px; 
    background: rgba(255,255,255,.1); border: 1px solid #fff; border-radius: 100px;}
.success_models .mySwiper .img_box img {border-radius: 0 0 30px 30px;}
.success_models .mySwiper .badge_tv {display: block; width: 32%; padding-top: 32%; background: url(../images/icon_badge.png) center no-repeat; 
    background-size: contain; position: absolute; bottom: 10px; right: 10px;}
/* .success_models .swiper-button-prev {top: 55%; left: calc(16% - 50px);} 
.success_models .swiper-button-next {top: 55%; right: calc(16% - 50px);}
.success_models .swiper-button-prev:after, 
.success_models .swiper-button-next:after {color:  #713FFF;}
.success_models .swiper-scrollbar {display: block; background: #DFE0E2; bottom: 0;}
.success_models .swiper-scrollbar-drag {background:  #713FFF;}
.success_models .swiper-horizontal > .swiper-scrollbar, 
.success_models .swiper-scrollbar.swiper-scrollbar-horizontal {width: 66%; bottom: 150px; left: 50%; transform: translateX(-50%);} */


.visual {background-image: url(../images/img_visual_bg.png); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; position: relative;}
.visual .inner {padding: 0; margin: 0 13%; position: relative; z-index: 1;}
.visual .inner::before {content: 'Real'; display: block; font-family: 'Nelphim', serif; font-size: 210px; color: #fff; position: absolute; top: 30%; left: 5%; z-index: -1;}
.visual .inner::after {content: 'Model'; display: block; font-family: 'Nelphim', serif; font-size: 210px; color: #fff; position: absolute; bottom: 26%; right: 0; z-index: -1;}
.visual .inner .model {width: 65%; padding-top: calc(903/870 * 65%); background-repeat: no-repeat; background-position: center top; background-size: cover; 
    position: relative; top: 0; left: 50%; transform: translateX(-50%);}
.visual .inner .text_box {position: absolute; top: 43%; right: 0;}
.visual .inner .text_box .p_color {font-weight: 800; font-size: 40px; letter-spacing: -1px; margin-bottom: .4em;}
.visual .inner .text_box ul li {display: inline-block; background: rgba(255, 125, 157, .5); border-radius: 4px; padding: 6px; margin-right: 10px;
    font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: -1px; text-align: center; color: #fff;}
.visual .slogan {width: 35%; padding-top: calc(240/605 * 35%);
    background-repeat: no-repeat; background-position: center right; background-size: cover; position: absolute; bottom: 13%; left: 0; z-index: 2;}
.visual .sub_title {font-weight: 100; font-size: 70px; line-height: 90px; letter-spacing: -1px; text-align: right; color: #2E3032;
    position: absolute; left: 5%; top: 46%; transform: translateY(-50%); z-index: 2;}
.visual .sub_title .p_color {display: block; color: #785BCA;}


.all_compare {background: #F8F5FF;}
.all_compare .inner .mySwiper {position: relative;}
.all_compare .inner .swiper {width: 80%;}
.all_compare .inner ul li {display: flex;}
.all_compare .inner ul li .img_box {width: 50%; position: relative;}
.all_compare .inner ul li .img_box.before img {border-radius: 30px 0 0 30px;}
.all_compare .inner ul li .img_box.after img {border-radius: 0 30px 30px 0;}
.all_compare .inner ul li .img_box p {width: 100%; font-size: 32px; line-height: 1em; text-align: center; color: #fff; 
    padding: 15px 0; box-sizing: border-box; position: absolute; bottom: 0; left: 0;}
.all_compare .inner ul li .img_box.before p {background: rgba(39, 39, 39, .9); border-radius: 0 0 0 30px;}
.all_compare .inner ul li .img_box.after p {background: rgba(119, 101, 227, .9); border-radius: 0 0 30px 0;}
.all_compare .swiper-button-prev,
.all_compare .swiper-button-next {width: 80px; height: 80px; background-size: contain;}
.all_compare .swiper-button-prev::after,
.all_compare .swiper-button-next::after {font-size: 0;}
.all_compare .swiper-button-prev {background-image: url(../images/bnt_prev.png); left: 0;}
.all_compare .swiper-button-next {background-image: url(../images/bnt_next.png); right: 0;}


.video {background: #F8F5FF;}
.video .inner {padding: 0 16.66%;}
.video .inner .video_box {width: 100%; padding-top: calc(720/1280 * 100%); overflow: hidden; position: relative; border-radius: 30px; margin-top: 80px;}
.video .inner .video_box iframe {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.video .inner .shadow {width: 100%; padding-top: calc(115/1280 * 100%); background: url(../images/img_shadow.png) center no-repeat; background-size: contain;}


.diagnosis {background: #F8F5FF;}
.diagnosis .inner {padding: 0; position: relative;}
.diagnosis .inner .text_box {margin-left: 40%; padding: 160px 0 108px; position: relative; z-index: 1;}
.diagnosis .inner .text_box::before {content: 'BEFORE'; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 250px; line-height: 1; color: rgba(119, 101, 227, .1);
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: -1;}
.diagnosis .inner .title_text {margin-bottom: 90px;}
.diagnosis .inner ul {width: 80%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; column-gap: 34px; row-gap: 28px;}
.diagnosis .inner ul li {display: flex; align-items: center; gap: 14px; padding: 38px 5%; background: #fff; border-radius: 24px;}
.diagnosis .inner ul li .check {flex-shrink: 0; display: block; width: 50px; height: 50px; background: url(../images/icon_check.png) center no-repeat; background-size: contain;}
.diagnosis .inner ul li p {flex-grow: 1; font-weight: 300; font-size: 28px; letter-spacing: -1px; color: #272727;}
.diagnosis .inner .model {display: inline-block; width: 45%; padding-top: calc(870/908 * 45%);
    background-repeat: no-repeat; background-position: center top; background-size: cover; position: absolute; bottom: 0; left: 0;}


.solution {background: linear-gradient(0, rgba(223, 215, 255, 1) 0, rgba(239, 235, 255, 1) 100%); color: #272727;}
.solution .inner {padding: 160px 16.66% 0;}
.solution .inner .highlighter::before {background: #EEFFC9;}
.solution .inner .chart_box {background-image: url(../images/img_note_bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
    padding: 200px 0; margin-bottom: 160px;}
.solution .inner .title_text span {display: block; color: #7765E3; font-weight: 400; font-size: 50px; line-height: 1;}
.solution .inner .chart_box .highlighter::before {background: #E3DEF6;}
.solution .inner .chart_box table {width: 65%; margin: 35px auto; text-align: center; background: pink; border-top: 3px solid #272727;}
.solution .inner .chart_box table tr {height: 110px; line-height: 110px; font-size: 36px; border-bottom: 2px solid rgba(80, 80, 80, .5);}
.solution .inner .chart_box table tr th {width: 40%; background: #E9F0FF;}
.solution .inner .chart_box table tr td {width: 60%; background: #fff;}
.solution .inner .chart_box table tr td span {display: inline-block; width: 28%; position: relative;}
.solution .inner .chart_box table tr td span.check::after {content: ''; display: block; width: 70%; padding-top: 70%; background: url(../images/icon_circle.png) center no-repeat;
    background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.solution .inner .con .title_text {margin-bottom: 40px;}    
.solution .inner .con .img_box {margin-top: 62px;}


.result_compare {background: #B7ACF6; overflow: hidden; position: relative; z-index: 1;}
.result_compare::before {content: 'AFTER'; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 250px; line-height: 1; color: rgba(119, 101, 227, .1);
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: -1;}
.result_compare .inner {padding: 140px 16.66% 160px;}
.result_compare .inner .title_text {color: #fff;}
.result_compare .inner .img_box {margin: 100px 0 80px;}
.result_compare .twentytwenty-horizontal .twentytwenty-handle:before, 
.result_compare .twentytwenty-horizontal .twentytwenty-handle:after, 
.result_compare .twentytwenty-vertical .twentytwenty-handle:before, 
.result_compare .twentytwenty-vertical .twentytwenty-handle:after {background: rgba(255,255,255,.6);}
.result_compare .twentytwenty-handle {background: #fff;}
.result_compare .twentytwenty-left-arrow {border-right: 6px solid #7765E3;}
.result_compare .twentytwenty-right-arrow {border-left: 6px solid #7765E3;}
.result_compare .text_box {text-align: center;}
.result_compare .text_box .m_color {display: inline-block; font-size: 34px; line-height: 50px; letter-spacing: -1px;
    background: #fff; padding: 30px 80px; border-radius: 100px; border: 1px solid #713FFF;}


.banner {background: #F0EBFF;}
.banner .inner {padding: 0; position: relative; z-index: 1;}
.banner .inner::before {content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(119, 101, 227, 0.67) 0%, rgba(119, 101, 227, 1) 100%); position: absolute; top: 0; left: 0; z-index: -1;}
.banner .inner p {font-weight: 200; font-size: 50px; letter-spacing: -1px; color: #F0EBFF; position: absolute; left: 16%; top: 50%; transform: translateY(-50%); z-index: 1;}
.banner .inner p::before {content: '“'; display: block; font-family: inherit; font-weight: 200; font-size: 120px; line-height: .5; letter-spacing: -1px; color: inherit;}
.banner .inner .model {width: 45%; padding-top: calc(655/768 * 45%);
    background-repeat: no-repeat; background-position: right top; background-size: cover; position: relative; top: 0; left: 50%;}



/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section > .inner {padding: 150px 10%;}

    .visual .inner {margin: 0 10%;}
    .visual .sub_title {font-size: 38px; line-height: 1.3;}
    .video .inner {padding: 0 10%;}
    .solution .inner {padding: 150px 10% 0;}
    .banner .inner p {left: 10%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 150px 8%;}

    .visual .inner {margin: 0 8%;}
    .video .inner {padding: 0 8%;}
    .solution .inner {padding: 150px 8% 0;}
    .banner .inner p {left: 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}

    .visual .inner {margin: 0 6%;}
    .video .inner {padding: 0 6%;}
    .solution .inner {padding: 150px 6% 0;}
    .banner .inner p {left: 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section > .inner {padding: 120px 5%;}


    .sub_visual {padding: 80px 0;}
    .sub_visual h1 {font-size: 64px;}

    
    .success_models .inner {margin-top: 60px;}
    .success_models .inner .title_text {font-size: 35px; margin-bottom: 60px;}
    .success_models .mySwiper .text_box {padding: 24px 8.5% 0;}
    .success_models .mySwiper .text_box p {font-size: 16px;} 
    .success_models .mySwiper .text_box strong {font-size: 27px;} 
    /* .success_models .swiper-button-prev {left: calc(5% - 2em);} 
    .success_models .swiper-button-next {right: calc(5% - 2em);}
    .success_models .swiper-button-prev:after, 
    .success_models .swiper-button-next:after {font-size: 2em; font-weight: 900;}
    .success_models .swiper-horizontal > .swiper-scrollbar, 
    .success_models .swiper-scrollbar.swiper-scrollbar-horizontal {width: 90%; height: 3px; bottom: 60px;} */


    .visual {background-image: url(../images/img_visual_bg_tab.png);}
    .visual .inner {padding: 150px 0 0 5%; margin: 0;}
    .visual .inner::before {top: 85px; left: 5%;}
    .visual .inner::after {bottom: auto; top: 271px; right: 5%;}
    .visual .inner .model {width: 100%; padding-top: calc(903/870 * 100%); background-position: right bottom; background-size: contain; bottom: 0; left: auto; transform: translateX(0); right: -15%;}
    .visual .inner .text_box {top: auto; bottom: 150px; right: auto; left: 5%;}
    .visual .inner .text_box .p_color {font-weight: 700; font-size: 35px; letter-spacing: -1px; margin-bottom: .6em;}
    .visual .inner .text_box ul {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
    .visual .inner .text_box ul li {margin-right: 0;}
    .visual .slogan {width: 95%; padding-top: calc(240/605 * 95%); bottom: 36px; left: 0;}
    .visual .sub_title {font-size: 65px; line-height: 85px; text-align: left; top: 220px; transform: translateY(0);}
    .visual .sub_title i {display: block;}
        

    .all_compare .inner .swiper {width: 100%;}
    .all_compare .inner ul li .img_box p {font-size: 20px; padding: 9.5px 0;}
    .all_compare .swiper-button-prev,
    .all_compare .swiper-button-next {width: 60px; height: 60px;}
    .all_compare .swiper-button-prev {left: -30px;}
    .all_compare .swiper-button-next {right: -30px;}


    .video .inner .title_text i {display: block;}
    .video .inner .video_box {margin-top: 60px;}

    
    .diagnosis .inner {padding: 0 5%;}
    .diagnosis .inner .text_box {margin-left: 0; padding: 110px 0 60px;}
    .diagnosis .inner .text_box::before {font-size: 160px; top: 0;}
    .diagnosis .inner .title_text {margin-bottom: 60px;}
    .diagnosis .inner ul {width: 100%; gap: 20px;}
    .diagnosis .inner ul li {border-radius: 15px;}
    .diagnosis .inner .model {display: block; width: 100%; padding-top: calc(870/908 * 100%); position: relative;}


    .solution .inner {padding: 120px 5% 0;}
    .solution .inner .sub_explain .block {display: inline;}
    .solution .inner .sub_explain i {display: block;}
    .solution .inner .chart_box {padding: 186px 0 120px; margin-bottom: 20px;}
    .solution .inner .chart_box table {width: 80%; margin: 60px auto 0; border-width: 2px;}
    .solution .inner .chart_box table tr {height: 70px; line-height: 70px; font-size: 28px; border-width: 1px;}
    .solution .inner .con .img_box {margin-top: 60px;}

    
    .result_compare::before {font-size: 160px; top: -35px;}
    .result_compare .inner {padding: 80px 0 120px;}
    .result_compare .inner .img_box {margin: 60px 0;}
    .result_compare .text_box {padding: 0 5%;}
    .result_compare .text_box .m_color {display: block; text-align: center; padding: 30px 0;}
    .result_compare .text_box .m_color i {display: block;}


    .banner .inner {padding: 150px 0 0;}
    .banner .inner p {text-align: center; position: relative; left: 0; top: 0; transform: translateY(0);}
    .banner .inner .model {width: 100%; padding-top: calc(655/768 * 100%); background-position: center top; position: relative; top: 0; left: 0;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    section > .inner {padding: 60px 5%;}
    section .inner .title_text {font-size: 34px; line-height: 44px;}
    section .inner .add_text {font-size: 22px; line-height: 26px;}
    section .inner .sub_explain p {font-size: 16px; line-height: 24px;}
    

    .sub_visual {padding: 50px 5%;}
    .sub_visual h1 {font-size: 34px;}
    

    .success_models .inner {margin-top: 40px;}
    .success_models .inner .title_text {font-size: 28px; margin-bottom: 40px;}
    .success_models .mySwiper li {border-radius: 20px;}
    .success_models .mySwiper .text_box strong {font-size: 27px; margin: 8px 0;}  
    /* .success_models .swiper-button-prev {left: calc(5% - 6px);} 
    .success_models .swiper-button-next {right: calc(5% - 13px);}
    .success_models .swiper-button-prev:after, 
    .success_models .swiper-button-next:after {font-size: 0; display: block; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: contain;}
    .success_models .swiper-button-prev:after {background-image: url(../images/bnt_prev.png);}
    .success_models .swiper-button-next:after {background-image: url(../images/bnt_next.png);}
    .success_models .swiper-horizontal > .swiper-scrollbar, 
    .success_models .swiper-scrollbar.swiper-scrollbar-horizontal {bottom: 60px;} */


    .visual .inner {padding: 80px 0 0 5%;}
    .visual .inner::before {font-size: 105px; top: 32px;}
    .visual .inner::after {font-size: 105px; top: 160px; right: 5%;}
    .visual .inner .text_box {bottom: 60px;}
    .visual .inner .text_box .p_color {font-size: 17px;}
    .visual .inner .text_box ul {gap: 5px;}
    .visual .inner .text_box ul li {border-radius: 2px; padding: 3px; font-size: 14px; line-height: 1;}
    .visual .slogan {bottom: 25px;}
    .visual .sub_title {font-size: 35px; line-height: 45px; top: 100px;}


    .all_compare .inner ul li .img_box.before img {border-radius: 15px 0 0 15px;}
    .all_compare .inner ul li .img_box.after img {border-radius: 0 15px 15px 0;}
    .all_compare .inner ul li .img_box p {font-size: 14px; padding: 6px 0;}
    .all_compare .inner ul li .img_box.before p {border-radius: 0 0 0 15px;}
    .all_compare .inner ul li .img_box.after p {border-radius: 0 0 15px 0;}
    .all_compare .swiper-button-prev,
    .all_compare .swiper-button-next {width: 30px; height: 30px;}
    .all_compare .swiper-button-prev {left: -15px;}
    .all_compare .swiper-button-next {right: -15px;}


    .video .inner .video_box {border-radius: 15px; margin-top: 30px;}


    .diagnosis .inner .text_box {padding: 38px 0 30px;}
    .diagnosis .inner .text_box::before {font-size: 80px;}
    .diagnosis .inner .title_text {margin-bottom: 30px;}
    .diagnosis .inner ul {gap: 15px;}
    .diagnosis .inner ul li {gap: 8px; padding: 18px 5%; border-radius: 8px;}
    .diagnosis .inner ul li .check {width: 25px; height: 25px;}
    .diagnosis .inner ul li p {font-size: 14px;}


    .solution .inner {padding: 60px 0 0;}
    .solution .inner .chart_box {padding: 70px 0; margin: 0 5% 30px;}
    .solution .inner .title_text span {font-size: 25px;}
    .solution .inner .chart_box table {margin: 30px auto 0;}
    .solution .inner .chart_box table tr {height: 34px; line-height: 34px; font-size: 14px;}
    .solution .inner .con .title_text {margin-bottom: 30px;}    
    .solution .inner .con .img_box {margin-top: 30px;}


    .result_compare::before {font-size: 80px; top: -17.5px;}
    .result_compare .inner {padding: 38px 0 60px;}
    .result_compare .inner .img_box {margin: 30px 0;}
    .result_compare .twentytwenty-horizontal .twentytwenty-handle:before, 
    .result_compare .twentytwenty-horizontal .twentytwenty-handle:after, 
    .result_compare .twentytwenty-vertical .twentytwenty-handle:before, 
    .result_compare .twentytwenty-vertical .twentytwenty-handle:after {background: rgba(255,255,255,.6);}
    .result_compare .twentytwenty-handle {width: 24px; height: 24px; margin-left: -14px;}
    .result_compare .twentytwenty-left-arrow {margin-left: -16px;}
    .result_compare .twentytwenty-right-arrow {margin-right: -14px;}
    .result_compare .twentytwenty-horizontal .twentytwenty-handle:before {width: 2px; margin-bottom: 17px;}
    .result_compare .twentytwenty-horizontal .twentytwenty-handle:after {width: 2px; margin-top: 17px;}
    .result_compare .text_box .m_color {font-size: 17px; line-height: 25px; padding: 15px 0; border-radius: 50px;}


    .banner .inner {padding: 75px 0 0;}
    .banner .inner p {font-size: 25px;}
    .banner .inner p::before {font-size: 60px;}
}