@charset "utf-8";
/* product_surgery ->  sub_common.css*/
/* #content */
.img_box img{width: 100%;  }
.sub_visual {width: 100%; height:450px; position: relative;
    background-image: url(../images/img_visual_bg.webp);  background-repeat: no-repeat;  background-position: center bottom; background-size: cover;
    /*background-attachment: fixed;*/background-color: rgba(0, 0, 0, 0.2); background-blend-mode: darken;}
.sub_visual .text_box {text-align: center; color: #fff;}
.sub_visual .text_box .add_text{font-family: "El Messiri", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 20px;}
.sub_visual .text_box h3{font-size: 40px; font-weight: 200; line-height: 1.3; }

.b_color{color:#3D9BFF !important;}
.yellow{color:#FFF8C0 !important;}
.purple{color:#7077FF !important;}

.elMessiri{font-family: "El Messiri", sans-serif; }

.container [class*="section"] .inner{padding: 160px 12.6%;}
.container .title_box{text-align: center}
.container .title_box h4{font-size: 64px; line-height: 1.5; font-weight: 700; color: var(--gray-color-1000); margin-top:10px;}
.container .title_box h4 strong{color:#3D9BFF; }
.container .title_box .sub_title{font-size: 40px; line-height: 1.3; font-weight: 700;}
.container .title_box .sub_text{font-size: 26px; line-height: 1.5; font-weight: 400; color: var(--gray-color-800); letter-spacing: -1px;margin-top:36px;}

.container .content_box{margin-top: 80px;}

.section01 .content_box ul{display: flex; justify-content: space-between;align-items: center;gap: 50px;}
.section01 .content_box ul li{flex:1}
.section01 .content_box ul .text_box{display: flex; flex-direction: column; gap:28px; letter-spacing: -0.02em;line-height: 1.5; }
.section01 .content_box ul .text_box .title_box{text-align: left;}
.section01 .content_box ul .text_box .desc_text{font-size:36px; color: var(--gray-color-800); }
.section01 .content_box ul .img_box{border-radius: 30px; overflow:hidden;}

.section02{background: linear-gradient(0deg ,#fff 0%,#EBF5FF 50%)}
.section02 .explain_wrap{display: flex;justify-content:center;align-items: center;gap: 40px;margin-bottom: 76px;}
.section02 .explain_item{width:250px; height: 250px;  display: flex; justify-content: center;align-items: center; border-radius: 100%; background: #3D9BFF;}
.section02 .explain_item:nth-child(even){background: #7077FF;}
.section02 .explain_item p{font-size: 32px;line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; text-align: center; color: #fff;}
.section02 .img_box{border-radius:12px;overflow:hidden;margin-bottom: 27px;}
.section02 .bottom_section{position: relative;width: calc(1280 / 1420 * 100%);margin: 0 auto; display: flex; justify-content: center;align-items: center;}
.section02 .bottom_section > div {flex:1;height: 600px;position: static;}
.section02 .large_explain_wrap{position:absolute; top: 50%;}
.section02 .large_explain_item{width:360px;height: 360px;display: flex;justify-content: center;align-items: center;border-radius: 100%;background: linear-gradient(212deg, #52A5FF 7.35%, #52A5FF 92.06%);flex-direction: column;color:  #fff;gap: 20px;text-align:  center;mix-blend-mode: multiply;backdrop-filter: blur(4.7px);position: absolute;top: 50%;transform: translate(0,-50%);left:37px;}
.section02 .right .large_explain_item{background: #7077FF;right: 37px; left:auto;}
.section02 .large_explain_item h5{font-size: 32px; }
.section02 .large_explain_item .desc_text{font-size: 20px;line-height: 1.5;}
.section02 .left{background:url(../images/img_section02_01.jpg);background-repeat: no-repeat;background-size: cover;border-radius: 26px 0 0 26px;background-position: right center;}
.section02 .right{background:url(../images/img_section02_02.jpg);background-repeat: no-repeat;background-size: cover;border-radius: 0 26px 26px 0;}

.section03{background: linear-gradient(0deg ,#F0F7FF 0%,#C8EDFF 25%,#DCECFF 50%,#F0F7FF 100%);}
.section03 .img_box{width: calc(1336/1420 * 100%); margin: 0 auto;}
.section03 .point-list {width: calc(1170/1420 * 100%);margin: 0 auto;display :grid;grid-template-columns: repeat(4, 1fr);background:#fff;border-radius: 40px;padding: 50px 0;box-sizing: border-box;}
.section03 .point-list li{width: 100%;padding: 0 40px;box-sizing: border-box;display: flex;flex-direction:column;justify-content: center;align-items: center;gap:20px;text-align: center;border-right: 1px solid var(--gray-color-200);}
.section03 .point-list li:last-of-type{border-right: none;}
.section03 .point-list li .icon_box{width: 120px;height: 120px;background-image:url(../images/icon_section03.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;}
.section03 .point-list li:nth-of-type(2) .icon_box{background-position: 0 33.3%;}
.section03 .point-list li:nth-of-type(3) .icon_box{background-position: 0 66.6%;}
.section03 .point-list li:nth-of-type(4) .icon_box{background-position: 0 100%;}
.section03 .point-list .info_text{font-size: 23px; font-weight: 400; line-height: 1.5; color: var(--gray-color-900);letter-spacing: -1px;margin-top: 20px; }
.section03 .point-list .info_text strong{font-size: 32px; font-weight: 600; line-height: 1; color: var(--gray-color-1000); display: inline-block;margin-bottom: 16px;}

.section04{background: linear-gradient(97deg, #87C1FF 0%, #3D9BFF 100%);}
.section04 .title_box h4{color: #fff;}
.section04 .feature-list { display: grid;grid-template-columns: repeat(4, 1fr);align-items: center; justify-content: center;gap: 30px;list-style: none;padding: 0;position: relative; }
.section04 .feature-list .feature-list-item{position: relative; display:flex; justify-content: center; align-items: center; width: 100%; padding:40px 0 ; border-radius: 24px; background: #E4F1FF;}
.section04 .feature-list .main_text  {font-size: 32px;font-weight: 500;letter-spacing: -1px; line-height: 1.3; color: #180D07; text-align: center; }

.section05 .top_section{width: calc(1080 / 1420 * 100%); margin: 0 auto;position: relative; }
.section05 .product_wrap{z-index:1;}
.section05 .product_card{z-index:1;;width:327px;border-radius: 15px; overflow: hidden;letter-spacing: -0.02em;text-align: center;box-shadow: 6px 11px 20px #D9E4EE;position:absolute; top: 50%; left: 50%;}
.section05 .product_card:nth-of-type(1){transform: translate(calc(-120%), calc(-200% + 50px));}
.section05 .product_card:nth-of-type(2){ transform: translate(-150%, -50%);}
.section05 .product_card:nth-of-type(3){transform: translate(calc(-120%), calc(100% - 50px));}
.section05 .card_header{font-size: 24px;background:#007BFF;color: #fff;padding: 13px 0;}
.section05 .card_body{font-size: 24px;line-height: 1.2;background:#fff;color:var(--gray-color-800);padding: 23px 0;}
.section05 .img_box{width: calc(1240/1420* 100%);margin: 0 0 0 auto;}
.section05 .text_box{border:1px solid #3D9BFF;border-radius:24px;width: 100%;padding:38px 0;text-align: center;box-sizing: border-box;}
.section05 .text_box .main_text{font-size: 26px; line-height:1.5; letter-spacing: -0.02em;color: var( --gray-color-800); }

.section06{background: linear-gradient(0deg ,#F5F5FF 0%,#DDDEFF 50%, #F5F5FF 100%)}
.section06 .point-list {width: calc(1170/1420 * 100%);margin: 0 auto;display :grid;grid-template-columns: repeat(4, 1fr);background:#fff;border-radius: 40px;padding: 50px 0;box-sizing: border-box;}
.section06 .point-list li{width: 100%;padding: 0 40px;box-sizing: border-box;display: flex;flex-direction:column;justify-content: center;align-items: center;gap:20px;text-align: center;border-right: 1px solid var(--gray-color-200);}
.section06 .point-list li:last-of-type{border-right: none;}
.section06 .point-list li .icon_box{width: 120px;height: 120px;background-image:url(../images/icon_section06.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;}
.container .point-list li:nth-of-type(2) .icon_box{background-position: 0 33.3%;}
.container .point-list li:nth-of-type(3) .icon_box{background-position: 0 66.6%;}
.container .point-list li:nth-of-type(4) .icon_box{background-position: 0 100%;}
.section06 .point-list .info_text{font-size: 23px; font-weight: 400; line-height: 1.5; color: var(--gray-color-900);letter-spacing: -1px;margin-top: 20px; }
.section06 .point-list .info_text strong{font-size: 32px; font-weight: 600; line-height: 1; color: var(--gray-color-1000); display: inline-block;margin-bottom: 16px;}

.section07{background: linear-gradient(97deg, #969BFF 0%, #7077FF 101.24%);}
.section07 .title_box h4{color: #fff;}
.section07 .feature-list { display: grid;grid-template-columns: repeat(4, 1fr);align-items: center; justify-content: center;gap: 30px;list-style: none;padding: 0;position: relative; }
.section07 .feature-list .feature-list-item{position: relative;display:flex;justify-content: center;align-items: center;width: 100%;padding:40px 0;border-radius: 24px;background: #fff;}
.section07 .feature-list .main_text  {font-size: 32px;font-weight: 500;letter-spacing: -1px; line-height: 1.3; color: #180D07; text-align: center; }

.section08{background-image: url(../images/img_section08_bg.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;}
.section08 .img_box{width: calc(1168/1420 * 100%); margin: 0 auto;}
.section08 .text_box{border:1px solid #7077FF;border-radius:24px;width: 100%;padding:38px 0;text-align: center;box-sizing: border-box;}
.section08 .text_box .main_text{font-size: 26px; line-height:1.5; letter-spacing: -0.02em;color: var( --gray-color-800); }

.banner{background: linear-gradient(98deg, #7077FF -1.95%, #434799 128.24%);position:  relative;}
.container .banner .inner{padding: 0 12.6%;display: flex;justify-content: space-around;align-items: center;position: relative;z-index: 1;}
.banner h4{font-size: 64px;line-height: 1.4;color: #fff;letter-spacing:-0.02em;}
.banner .main_text{font-size: 32px;line-height: 1.4;color: #fff;letter-spacing:-0.02em;font-weight: 700;}
.banner .img_box{width: calc(700/1920 * 100%);}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container [class*="section"] .inner{padding: 120px 12.6%;}
    .container .title_box .sub_title{font-size:24px;}
    .container .title_box h4{font-size: 52px; margin-top:8px;}

    /* content */
    .section02 .explain_wrap{gap: 12px;}
    .section02 .explain_item{width:200px;height:200px;}

    .section03 .point-list {width: 100%;}
    .section04 .feature-list { gap: 18px;}
    .section04 .feature-list .main_text  {font-size: 24px}

    .section06 .point-list {width: 100%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .banner h4{font-size: 40px;}
    .banner .main_text{font-size: 36px; }

    .section02 .bottom_section{position: relative;width: 100%;}
    .section02 .bottom_section > div {flex:1;height: 400px;position: static;}
    .section02 .large_explain_wrap{position:absolute; top: 50%;}
    .section02 .large_explain_item{width:240px;height: 240px;left:18px;top: 60%;}
    .section02 .right .large_explain_item{right: 24px;left:auto;}
    .section02 .large_explain_item h5{font-size: 24px;}
    .section02 .large_explain_item .desc_text{font-size: 18px;}
    .section02 .left{border-radius: 12px 0 0 12px;background-position:right center;}
    .section02 .right{border-radius: 0 12px 12px 0;background-position:left center;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .title_box .sub_text{font-size: 20px}
    /* content */
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .container [class*="section"] .inner{padding: 60px 5%;}

    /* content */
    .section01 .content_box ul{gap: 24px;}
    .section01 .content_box ul .text_box .desc_text{font-size: 22px;}

    .section02 .explain_wrap{flex-wrap: wrap;gap: 24px;margin-bottom: 40px;}
    .section02 .explain_item{width:240px; height: 240px;  display: flex; justify-content: center;align-items: center; border-radius: 100%; background: #3D9BFF;}
    .section02 .explain_item:nth-child(2), .section02 .explain_item:nth-child(3){background: #7077FF;}
    .section02 .explain_item:nth-child(4){background: #3D9BFF;}


    .section03 .point-list {width: 100%;grid-template-columns: repeat(2, 1fr);background:#fff;border-radius: 40px;padding: 50px 0;box-sizing: border-box;gap: 24px 0;}
    .section03 .point-list  li:nth-of-type(2n){border-right: none;}
    .section03 .point-list li .icon_box{width: 88px; height: 88px; }
    .section03 .point-list .info_text{font-size: 20px;margin-top: 16px;}
    .section03 .point-list .info_text strong{font-size: 28px;}

    .section04 .feature-list { grid-template-columns: repeat(2, 1fr);gap: 24px; }
    .section04 .feature-list .feature-list-item{padding:24px 0 ; border-radius: 12px;}
    .section04 .feature-list .main_text  {font-size: 24px; }

    .section05 .top_section{width: 100%; margin: 0 auto;position: relative; }
    .section05 .product_card{z-index:1;;width:280px;border-radius:12px;}
    .section05 .product_card:nth-of-type(1){transform: translate(calc(-110%), calc(-200% + 20px));}
    .section05 .product_card:nth-of-type(2){ transform: translate(-120%, -50%);}
    .section05 .product_card:nth-of-type(3){transform: translate(calc(-110%), calc(100% - 20px));}
    .section05 .card_header{font-size: 18px;background:#007BFF;color: #fff;padding: 8px 0;}
    .section05 .card_body{font-size: 18px;line-height: 1.2;background:#fff;color:var(--gray-color-800);padding: 12px 0;}
    .section05 .img_box{width: calc(1240/1420* 100%);margin: 0 0 0 auto;}
    .section05 .text_box{padding: 24px;text-wrap: balance;word-break: keep-all;}
    .section05 .text_box .main_text{font-size: 18px;}

    .section06 .point-list {width: 100%;grid-template-columns: repeat(2, 1fr);background:#fff;border-radius: 40px;padding: 50px 0;box-sizing: border-box;gap: 24px 0;}
    .section06 .point-list  li:nth-of-type(2n){border-right: none;}
    .section06 .point-list li .icon_box{width: 88px; height: 88px; }
    .section06 .point-list .info_text{font-size: 20px;margin-top: 16px;}
    .section06 .point-list .info_text strong{font-size: 28px;}
    
    .section07 .feature-list { grid-template-columns: repeat(2, 1fr);gap: 24px; }
    .section07 .feature-list .feature-list-item{padding:24px 0 ; border-radius: 12px;}
    .section07 .feature-list .main_text  {font-size: 24px; }

    .section08 .text_box{padding: 24px;text-wrap: balance;word-break: keep-all;}
    .section08 .text_box .main_text{font-size: 18px;}
    
    .banner h4{font-size: 36px;}
    .banner .main_text{font-size: 30px;}
    .banner .img_box{width: calc(400/778 * 100%);}

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:767px) {
    #wrap { min-width: 375px; }
    .container [class*="section"] .inner{padding: 60px 24px;}

    .sub_visual {padding: 0 5%;height: 240px;background-image: url(../images/img_visual_bg_mo.jpg);background-position: center center;background-attachment:local ;;}
    .sub_visual .text_box{text-align: left;}
    .sub_visual .text_box h3{font-size: 20px; }
    .sub_visual .text_box .add_text{font-size:12px;}

    /* content */
    .container .title_box .sub_title{font-size: 22px;}
    .container .title_box h4{font-size: 34px; margin-top:8px;}
    .container .content_box{margin-top: 40px;}
    .container .title_box .sub_text{font-size: 16px;text-wrap:balance; word-break:keep-all;}

    .section01 .content_box ul{flex-direction:column;gap: 20px;}
    .section01 .content_box ul li{flex:1}
    .section01 .title_box .sub_title{text-align: center;}
    .section01 .title_box h4{text-align: center;}
    .section01 .content_box ul .text_box{ gap:15px; text-align: center;}
    .section01 .content_box ul .text_box .title_box{text-align: left;}
    .section01 .content_box ul .text_box .desc_text{font-size: 16px;}
    .section01 .content_box ul .img_box{border-radius: 10px;}

    .section02 .explain_wrap{flex-wrap: wrap;gap: 9px;margin-bottom: 40px;}
    .section02 .explain_item{width:135px; height: 135px;  display: flex; justify-content: center;align-items: center; border-radius: 100%; background: #3D9BFF;}
    .section02 .explain_item:nth-child(2), .section02 .explain_item:nth-child(3){background: #7077FF;}
    .section02 .explain_item:nth-child(4){background: #3D9BFF;}
    .section02 .explain_item p{font-size: 17px;}
    .section02 .img_box{border-radius:12px;overflow:hidden;margin-bottom: 27px;}
    .section02 .bottom_section{display: flex;justify-content: center;width: 266px;margin: 0 auto;padding-top: 457px;border: 1px dashed #7077FF;border-radius: 999px;box-sizing: border-box;flex-direction: column;position: relative;box-sizing: border-box;}
    .section02 .large_explain_wrap{position:absolute; top: 50%;}
    .section02 .large_explain_item{width: 220px;height: 220px;gap: 7px;text-align:  center;mix-blend-mode: multiply;backdrop-filter: blur(4.7px);position: absolute;top: 24px;transform: translate(-50%,0);left: 50%;}
    .section02 .right .large_explain_item{background: #7077FF;right: auto;left:auto;transform: translate(-50%, 84%);}
    .section02 .large_explain_item h5{font-size: 24px;font-weight: 500;}
    .section02 .large_explain_item .desc_text{font-size: 16px;}
    .section02 .left{background:none;}
    .section02 .right{background:none}

    .section03 .point-list {width: 100%;grid-template-columns: repeat(2, 1fr);border-radius: 10px;padding: 18px 0;box-sizing: border-box;gap: 24px 0;}
    .section03 .point-list li{width: 100%;box-sizing: border-box;display: flex;flex-direction:column;justify-content: center;align-items: center;gap: 9px;text-align: center;border-right: 1px solid var(--gray-color-200);}
    .section03 .point-list li:last-of-type{border-right: none;}
    .section03 .point-list li .icon_box{width: 70px;height: 70px;}
    .section03 .point-list .info_text{font-size: 15px;margin-top: 0;}
    .section03 .point-list .info_text strong{font-size: 20px;margin-bottom: 6px;}

    .section04{background:#3D9BFF;}
    .section04 .feature-list { grid-template-columns: repeat(1, 1fr);gap: 12px; }
    .section04 .feature-list .feature-list-item{padding: 15px 0;border-radius: 12px;}
    .section04 .feature-list .main_text  {font-size: 18px;}
    .section04 .feature-list .main_text br{display: none;}

    .section05{background: linear-gradient(0deg, #DEEDFF 35%, #fff 100%);}
    .section05 .top_section{width: 100%;display: flex;flex-direction: column-reverse;justify-content:center;align-items: center;margin-bottom: 20px;}
    .section05 .product_wrap{width: 100%;}
    .section05 .product_card{z-index:1;width: 100%;border-radius: 10px;overflow: hidden;letter-spacing: -0.02em;text-align: center;box-shadow: 6px 11px 20px #D9E4EE;position:relative;top: 0%;left: 0%;margin-bottom: 20px;}
    .section05 .product_card:nth-of-type(1),.section05 .product_card:nth-of-type(2),  .section05 .product_card:nth-of-type(3){transform: translate(0, 0);}
    .section05 .card_header{font-size: 20px;background:#007BFF;color: #fff;padding: 5px 0;}
    .section05 .card_body{font-size: 16px;line-height: 1.2;background:#fff;color:var(--gray-color-800);padding: 15px 0;}
    .section05 .img_box{width: 100%;margin: auto;}
    .section05 .text_box{border-radius: 10px;padding: 20px 30px;background: #fff;}
    .section05 .text_box .main_text{font-size: 18px;text-wrap: balance;word-break: keep-all;}

    .section06 .title .small-text{font-size:28px;}
    .section06 .point-list {width: 100%;grid-template-columns: repeat(2, 1fr);border-radius: 10px;padding: 18px 0;box-sizing: border-box;gap: 14px 0;}
    .section06 .point-list li{width: 100%;box-sizing: border-box;display: flex;flex-direction:column;justify-content: center;align-items: center;gap: 9px;text-align: center;border-right: 1px solid var(--gray-color-200);}
    .section06 .point-list li:last-of-type{border-right: none;}
    .section06 .point-list li .icon_box{width: 70px;height: 70px;}
    .section06 .point-list .info_text{font-size: 15px;margin-top: 0;}
    .section06 .point-list .info_text strong{font-size: 20px;margin-bottom: 6px;}

    .section07 .feature-list { grid-template-columns: repeat(1, 1fr);gap: 12px; }
    .section07 .feature-list .feature-list-item{padding: 15px 0;border-radius: 12px;}
    .section07 .feature-list .main_text  {font-size: 18px;}
    .section07 .feature-list .main_text br{display: none;}

    .section08{background-position: center center;background-size: 150% auto;}
    .section08 .img_box{width:100%;}
    .section08 .text_box{border-radius: 10px;padding: 20px 30px;background: #fff;}
    .section08 .text_box .main_text{font-size: 18px;text-wrap: balance;word-break: keep-all;}
    
    .banner h4{font-size: 33px;}
    .container .banner .inner{padding: 64px 0 0 120px;}
    .banner .img_box{width: 100%;}
    .banner .text_box{position: absolute;left: 5%;text-align: left;z-index:1;top: 12%;}
    .banner .main_text{font-size: 18px;margin-bottom: 8px;font-weight: 500;}
}