@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; }

.container .product_surgery .inner{padding: 100px 12.6% 50px;}
.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;letter-spacing: -0.02em;}
.container .title_box h4 strong{color:#4B47CD; }
.container .title_box .sub_title{font-size: 28px; 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;}

.intro .inner{padding: 160px 12.6% 0;}
.intro .title_box h4{text-align: left;}
.intro .title_box .color01{color: #075690;}
.intro .title_box .color02{color: #D9763F;}

.suwon .container .section01 .p-color{color:#E89847;}
.suwon .container .section01 .inner .text_box .sub_explain{border-color: #E89847;}
.suwon .container .section04 .p-color{color:#775D3A;}
.suwon .container .section04 .inner .text_box .sub_explain{border-color: #775D3A;}
.suwon .container .section06 .p-color{color:#13595F;}
.suwon .container .section06 .inner .text_box .sub_explain{border-color: #13595F;}
.suwon .container .section08 .p-color{color:#5C0D8C;}
.suwon .container .section08 .inner .text_box .sub_explain{border-color: #5C0D8C;}
.suwon .container .section10 .p-color{color:#775D3A;}
.suwon .container .section10 .inner .text_box .sub_explain{border-color: #775D3A;}
.suwon .container .section12 .p-color{color:#D9763F;}
.suwon .container .section12 .inner .text_box .sub_explain{border-color: #D9763F;}
.suwon .container .section14 .p-color{color:#075690;}
.suwon .container .section14 .inner .text_box .sub_explain{border-color: #075690;}
.suwon .container .section16 .p-color{color:#A98A65;}
.suwon .container .section16 .inner .text_box .sub_explain{border-color: #A98A65;}
.suwon .container .section16.product_surgery .text_box h4{white-space:nowrap;}
.suwon .container .section03 ul li .icon_box{background-image:url(../images/icon_product_07.png);}
.suwon .container .section05 ul li .icon_box{background-image:url(../images/icon_product_02.png);}
.suwon .container .section07 ul li .icon_box{background-image:url(../images/icon_product_03.png);}
.suwon .container .section09 ul li .icon_box{background-image:url(../images/icon_product_05.png);}
.suwon .container .section11 ul li .icon_box{background-image:url(../images/icon_product_02.png);}
.suwon .container .section13 ul li .icon_box{background-image:url(../images/icon_product_01.png);}
.suwon .container .section15 ul li .icon_box{background-image:url(../images/icon_product_04.png);}
.suwon .container .section17 ul li .icon_box{background-image:url(../images/icon_product_02.png);}

.suwon .container .section06.product_surgery .inner{display: grid;grid-template-columns: repeat(2, 1fr);gap: 0 120px;}
.suwon .container .section06.product_surgery .inner .product_comparison{grid-column: span 2;}
.suwon .container .section06 .comparison_table{width: 100%; color: var(--color-gray-800); border-collapse: collapse;margin-top:20px;}
.suwon .container .section06 .comparison_table-head th{background:#13595F;color: #fff;font-size: 22px;font-weight: 500;padding-block: 14px;  border-left: 1px solid #e8e8e8;}
.suwon .container .section06 .comparison_table-body{font-size: 17px;;text-align: center;}
.suwon .container .section06 .comparison_cell-category{background: #D1F2F5;border-bottom: 1px solid #fff;border-right: 1px solid #fff;font-weight: 400;}
.suwon .container .section06 .comparison_table-body td{padding-block: 15px;border-bottom: 1px solid #e8e8e8;border-right: 1px solid #e8e8e8;}
.suwon .container .section06 .comparison_table-body td img{width: calc(97/565 * 100%)}

.cheongdam .container .section01 .p-color{color:#64183C;}
.cheongdam .container .section01 .inner .text_box .sub_explain{border-color: #64183C;}
.cheongdam .container .section04 .p-color{color:#775D3A;}
.cheongdam .container .section04 .inner .text_box .sub_explain{border-color: #775D3A;}
.cheongdam .container .section06 .p-color{color:#13595F;}
.cheongdam .container .section06 .inner .text_box .sub_explain{border-color: #13595F;}
.cheongdam .container .section08 .p-color{color:#075690;}
.cheongdam .container .section08 .inner .text_box .sub_explain{border-color: #075690;}
.cheongdam .container .section10 .p-color{color:#5C0D8C;}
.cheongdam .container .section10 .inner .text_box .sub_explain{border-color: #5C0D8C;}
.cheongdam .container .section12 .p-color{color:#D9763F;}
.cheongdam .container .section12 .inner .text_box .sub_explain{border-color: #D9763F;}


.cheongdam .container .section05 ul li .icon_box{background-image:url(../images/icon_product_02.png);}
.cheongdam .container .section07 ul li .icon_box{background-image:url(../images/icon_product_03.png);}
.cheongdam .container .section09 ul li .icon_box{background-image:url(../images/icon_product_04.png);}
.cheongdam .container .section11 ul li .icon_box{background-image:url(../images/icon_product_05.png);}
.cheongdam .container .section13 ul li .icon_box{background-image:url(../images/icon_product_06.png);}



.container .product_surgery  .title_box h4{font-size: 45px;}
.container .product_surgery .inner .text_box .sub_title{font-size: 25px;}
.container .product_surgery .inner .text_box .desc_text{font-size: 22px;}
.container .product_surgery .inner .text_box .sub_explain p{font-size: 22px;}
.container .product_surgery .inner .img_box{height: 500px;}

.container .info_surgery{background: #FAFAFB;}
.container .info_surgery ul{display: grid; grid-template-columns:repeat(5, 1fr);align-items: baseline;}
.container .info_surgery ul li{display: flex; flex-direction:column;justify-content: center; align-items: center; border-right: 1px solid #DFE0E2; text-align: center; padding: 0 20px; box-sizing: border-box;}
.container .info_surgery ul li:last-of-type{border-right: none;}
.container .info_surgery ul li:nth-of-type(2) .icon_box{background-position: 0 25%;}
.container .info_surgery ul li:nth-of-type(3) .icon_box{background-position: 0 50%;}
.container .info_surgery ul li:nth-of-type(4) .icon_box{background-position: 0 75%;}
.container .info_surgery ul li:nth-of-type(5) .icon_box{background-position: 0 100%;}
.container .info_surgery ul li .icon_box{width: 100px; height: 100px;background-image:url(../images/icon_product_01.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;}
.container .info_surgery .content_box{margin-top:0}
.container .info_surgery .title_box .title{font-size: 30px;}
.container .info_surgery .inner{padding: 20px 12.6% 40px;}
.container .info_surgery .info_text{font-size:18px; margin-top: 0;}
.container .info_surgery .info_text strong{font-size:23px; font-weight: 600; line-height: 1; color: var(--gray-color-1000); display: inline-block;margin-bottom: 8px;}



.container .section02 {width: 100%; background-image: url(../images/img_section02_bg.webp);  background-repeat: no-repeat;  background-position: 0 0 ; background-size: cover;}
.container .section02 .inner {padding: 0; width: calc(1280/ 1920 * 100%);max-width: 1280px; margin: 0 auto; display : flex; justify-content: space-between; align-items: center; gap: 80px; color: #fff;letter-spacing: -1px;box-sizing: border-box;}
.container .section02 .inner > div {flex: 1;}
.container .section02 .text_box h4{font-size: 40px;font-weight: 600;margin-bottom:32px;}
.container .section02 .text_box p{font-size: 28px;line-height: 1.5;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    
    .container .title_box .sub_title{font-size:24px;}
    .container .title_box h4{font-size: 52px;margin-top:8px;text-wrap: balance;word-break: keep-all;}

    /* content */
    .container .section02 .inner {width:100%;}
    .container .section02 .text_box h4{font-size: 34px;}
    .container .section02 .text_box p{font-size: 24px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container .section02 .text_box h4{font-size: 32px;}
    .container .section02 .text_box p{font-size: 20px;}
    .container .section02 .inner {padding: 60px 12.6%;}
    .container .info_surgery .info_text{ text-wrap:balance; word-break:keep-all;}

}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .title_box .sub_text{font-size: 20px}
    /* content */
    .container .section02 .inner {padding: 0;}
    .container .info_surgery ul li .icon_box{width: 100px;height: 120px;}
    .container .info_surgery ul li{padding: 0 10px;}
    .container .info_surgery .info_text{font-size: 16px;margin-top: 0;}
    .container .info_surgery .info_text strong{font-size: 20px; }
}


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

    /* content */
    .cheongdam .container .info_surgery .inner{padding: 20px 5% 40px;}
    .container .section02 .inner {gap: 40px;}

    .suwon .container .section16.product_surgery .text_box h4{white-space: normal;}

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #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 h4{font-size: 34px;}
    .container .title_box .sub_title{font-size:18px;}
    .container .product_surgery .title_box h4{font-size: 34px; margin-top:8px;}
    .container .product_surgery .inner .text_box .desc_text{font-size: 16px;}
    .container .content_box{margin-top: 40px;}
    .container .title_box .sub_text{font-size: 16px;text-wrap:balance; word-break:keep-all;}
    .container .product_surgery .inner .text_box .sub_explain p{font-size:16px;}

    .container .info_surgery ul li:nth-of-type(2n){border-right: none;}
    .container .info_surgery ul li .icon_box{width: 88px;height: 88px;}
    .container .info_surgery ul{ grid-template-columns:repeat(2, 1fr) ;grid-template-rows: auto auto;gap: 28px 0;}

    .container .info_surgery .inner{padding: 60px 24px;}
    .container .info_surgery .content_box{margin-top:40px}
    .container .info_surgery .title_box .title{font-size: 34px;}

    .container .info_surgery ul li:nth-child(1) {grid-column: 1;}
    .container .info_surgery ul li:nth-child(2) {grid-column: 2;}
    .container .info_surgery ul li:nth-child(3) {grid-column: 1;}
    .container .info_surgery ul li:nth-child(4) {grid-column: 2;}
    .container .info_surgery ul li:nth-child(5) {grid-column: 1 /3;}
    .container .info_surgery .info_text{font-size: 16px;margin-top: 12px; }
    .container .info_surgery .info_text strong{font-size: 24px;margin-bottom: 8px;}

    .container .section02 {background-image: url(../images/img_section02_bg_mo.jpg);}
    .container .section02 .inner {flex-direction: column-reverse;width:100%; gap: 16px;}
    .container .section02 .text_box{text-align: center;}
    .container .section02 .text_box h4{font-size: 24px;;margin-bottom:20px;}
    .container .section02 .text_box p{font-size: 18px;}
    .container .section02 .inner .img_box{max-width: 400px;}

    .suwon .container .section06.product_surgery .inner{display: grid;grid-template-columns: repeat(1, 1fr);gap: 0 20px;}
    .suwon .container .section06.product_surgery .inner .product_comparison{grid-column: span 1;}
    .suwon .container .section06 .comparison_table-head th{font-size: 14px;}
    .suwon .container .section06 .comparison_table-body{font-size: 12px;}
    .suwon .container .section06 .comparison_table-body td{padding:15px 4px;text-wrap: balance; word-break:keep-all;}
    .suwon .container .section06 .comparison_table-body td img{width: calc(72/133 * 100%)}
}