@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 [class*="section"] .inner{padding: 40px 12.6%;}
.container .title_box{text-align: center}
.container .title_box h4{font-size: 55px; line-height: 1.5; font-weight: 700; color: var(--gray-color-1000); margin-top:10px;}
.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;}

.container .info_surgery .inner{padding: 20px 12.6% 40px;}
.container .info_surgery .title_box h4{font-size: 30px; }
.container .info_surgery .content_box{margin-top: 0;}

.container .product_surgery .inner .img_box{height: 500px;}
.container .section01 .p-color{color:var(--primary-color);}
.container .section01 .inner .text_box .sub_explain{border-color: var(--primary-color);}
.container .section03 .p-color{color:#144365;}
.container .section03 .inner .text_box .sub_explain{border-color: #144365;}
.container .section05 .p-color{color:#F18F6A;}
.container .section05 .inner .text_box .sub_explain{border-color: #F18F6A;}
.container .section07 .p-color{color:#B56436;}
.container .section07 .inner .text_box .sub_explain{border-color: #B56436;}
.container .section09 .p-color{color:#2754B3;}
.container .section09 .inner .text_box .sub_explain{border-color: #2754B3;}
.container .section11 .p-color{color:#FA8466;}
.container .section11 .inner .text_box .sub_explain{border-color: #FA8466;}

.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 .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 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 .info_text{font-size: 18px;font-weight: 400;line-height: 1.5;color: var(--gray-color-900);letter-spacing: -1px;}
.container .info_surgery .info_text b{font-size: 20px; font-weight: 400;}
.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: 16px;}

.container .section04 ul li .icon_box{background-image:url(../images/icon_product_02.png);}
.container .section06 ul li .icon_box{background-image:url(../images/icon_product_03.png);}
.container .section08 ul li .icon_box{background-image:url(../images/icon_product_04.png);}
.container .section10 ul li .icon_box{background-image:url(../images/icon_product_05.png);}
.container .section12 ul li .icon_box{background-image:url(../images/icon_product_06.png);}



/* 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 */
    .container .info_surgery .info_text{font-size: 18px; text-wrap:balance; word-break:keep-all;}
    .container .info_surgery .info_text strong{font-size: 26px; }

}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .title_box .sub_text{font-size: 20px}
    /* content */
    .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: 60px 5%;}

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

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    .container [class*="section"] .inner{padding: 40px 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 .info_surgery .inner{padding: 20px 24px 40px;}
    .container .title_box .sub_title{font-size:18px;}
    .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;}
    .container .info_surgery .content_box{margin-top:24px;}



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

}