@charset "utf-8";

/*공통*/
.sub-container ul li{background: url(../../skin/board/member/img/li_cc.png) no-repeat top 12px left; padding-left: 16px; padding-bottom: 8px; color: #333; font-size: 16px;}
body:has(.f7f7f7) #ft{margin-top: 0;}
.mb_140{margin-bottom: 140px;}
.mt_140{margin-top: 140px;}
.mb_80{margin-bottom: 80px;}
.sub-container table{border-top: 2px solid black; width: 100%; border-spacing: 0;}
.sub-container th,.sub-container td{border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;padding: 10px;}
.sub-container th{background: white;}
.sub-container tr td:last-child{border-right: 0;}

/*줄기세포*/
.cell{color: #333;}
.cell_visual{ border-radius: 24px;}
.cell1 .title{margin-top: 32px; font-size: 40px; margin-bottom: 16px; font-weight: bold;}
.sub-container.f7f7f7.cell2{padding: 100px 0 100px;}
.cell2 .flex1{display: flex; gap: 16px; max-width: 1400px; margin: 0 auto 0;}
.cell2 .flex1 .box{background: white; border-radius: 24px; border: 2px solid #ddd; padding: 40px; display: flex; height: 480px; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 100%;}
.cell2 .flex1 .box2{border-color: #660FA8;}
.cell2 .flex1 .box .label{font-size: 14px; border-radius: 30px; line-height: 36px; display: inline-block; background: #eaeaea; padding: 0 12px 0;}
.cell2 .flex1 .box2 .label{background: #660FA8; color: white;}
.cell2 .flex1 .box .textbox .text1{font-size: 24px; font-weight: bold; margin-bottom: 4px;}
.cell2 .flex1 .box .textbox .text2{font-size: 12px; color: #666; margin-bottom: 32px;}
.cell2 .flex1 .box .textbox .text3{height: 75px;}
.cell3{margin-top: 120px;}
.cell3 .title{font-size: 40px; margin-bottom: 52px; font-weight: bold;}
.cell3 .flex1{display: flex; gap: 16px; margin-bottom: 40px;}
.cell3 .flex1 .box{background: #f7f7f7; border-radius: 12px; display: flex; flex-direction: column; text-align: center; padding: 40px; width: 100%;}
.cell3 .flex1 .box b{font-weight: bold; font-size: 18px; display: block; margin-bottom: 8px;}
.cell3 .flex2{display: flex; gap: 16px; margin-bottom: 40px;}
.cell3 .flex2 .box{border: 2px solid #ddd; border-radius: 24px; padding: 40px; width: 100%;}
.cell3 .flex2 .box .title_area{border-bottom: 2px solid #ddd; padding-bottom: 32px; margin-bottom: 32px; font-size: 24px; font-weight: bold;}
.cell3 .flex2 .box .title_area span{font-size: 12px; color: #666; display: block; margin-top: 8px; font-weight: normal;}
.cell3 .ppbox{background: rgba(102, 15, 168, 0.05); text-align: center; color: #660FA8; border: 1px solid #660FA8; padding: 40px; margin-bottom: 120px;}
.cell4{background: url(./img/bg1.png) center no-repeat; background-color: #030206; background-size: cover; padding: 120px 0 120px; max-width: unset; width: 100%; text-align: center; margin-bottom: 120px;}
.cell4 .title{font-size: 40px; color: white; font-weight: bold; margin-bottom: 52px;}
.cell4 .flex1{display: flex; gap: 16px; max-width: 1400px; margin: 0 auto 0;}
.cell4 .flex1 .box{border-radius: 24px; padding: 116px 16px 40px; font-size: 18px; font-weight: bold; width: 100%;}
.cell4 .flex1 .box:nth-child(1){background: url(./img/icon1.png) center top 40px no-repeat #fff;}
.cell4 .flex1 .box:nth-child(2){background: url(./img/icon2.png) center top 40px no-repeat #fff;}
.cell4 .flex1 .box:nth-child(3){background: url(./img/icon3.png) center top 40px no-repeat #fff;}
.cell4 .flex1 .box:nth-child(4){background: url(./img/icon4.png) center top 40px no-repeat #fff;}
.cell5 .title{font-size: 40px; margin-bottom: 16px; text-align: center; font-weight: bold;}
.cell5 .sub_title{text-align: center; margin-bottom: 52px;}
.cell5 .flex1{display: flex; flex-direction: column; gap: 16px; margin-bottom: 120px;}
.cell5 .flex1 .box{background: #f7f7f7; border-radius: 24px; padding: 40px; display: flex; gap: 24px; position: relative;}
.cell5 .flex1 .box::after{content: ""; width: 1px; position: absolute; left: 90px; top: 100px; border-left: 1px dashed #660FA8; height: 120px; z-index: 2;}
.cell5 .flex1 .box2::after{display: none;}
.cell5 .flex1 .box .step{width: 100px; background: #660FA8; border-radius: 12px; color: white; font-weight: bold; justify-content: center; display: flex; align-items: center;}
.cell5 .flex1 .box .text b{font-weight: bold; font-size: 18px; display: block; margin-bottom: 8px;}
.cell5 .flex1 .box .text span{font-size: 14px; display: block; margin-bottom: 12px; color: #660FA8;}
.cell5 .flex1 .box .text:has(span) b{margin-bottom: 2px;}
.cell6{max-width: unset; padding: 120px 0 120px; text-align: center; color: white; background: url(./img/bg2.png) center no-repeat #660FA8; background-size: cover; display: none;}
.cell6 .title{font-size: 40px; font-weight: 500; margin-bottom: 16px;}
.cell6 .title b{font-size: 52px; display: block;}


@media screen and (max-width: 1460px){
    .cell4{margin: 0 0 120px;}
    .cell6{margin: 0;}
    .cell2 .flex1,.cell4 .flex1{margin: 0 16px 0;}
    .cell_visual{width: 100%;}
    .cell1 .title,.cell4 .title{font-size: 28px;}
    .cell3 .title{font-size: 28px; margin-bottom: 32px;}
    .cell5 .sub_title{margin-bottom: 32px;}
    .cell5 .title{margin-bottom: 8px; font-size: 28px;}
    .cell6 .title{font-size: 32px;}
    .cell6 .title b{font-size: 36px;}
}

@media screen and (max-width: 1000px){
    .mb_140,.cell3 .ppbox,.cell4,.cell5 .flex1{margin-bottom: 100px;}
    .cell3{margin-top: 100px;}
    .cell4,.cell6{padding: 100px 16px 100px;}
    .cell3 .flex2 .box{padding: 32px;}
    .cell3 .flex2 .box .title_area{padding-bottom: 24px; margin-bottom: 24px; font-size: 20px;}
    .cell3 .flex1, .cell3 .flex2{margin-bottom: 24px;}
    .cell2 .flex1 .box{height: 320px; padding: 32px;}
    .cell2 .flex1 .box .textbox .text3{height: unset;}
    .cell3 .flex1 .box b{font-size: 16px; margin-bottom: 8px;}
    .cell4 .flex1 .box,.cell5 .flex1 .box .text b{font-size: 16px;}
    .cell_visual,.cell2 .flex1 .box,.cell3 .flex2 .box,.cell4 .flex1 .box{border-radius: 12px;}
}

@media screen and (max-width: 840px){
    .cell2 .flex1{flex-direction: column;}
    .cell2 .flex1 .box{height: unset;}
    .cell2 .flex1 .box .label{margin-bottom: 16px;}
    .cell3 .flex1{flex-wrap: wrap;}
    .cell3 .flex1 .box,.cell4 .flex1 .box{height: unset; width: calc(50% - 8px);}
    .cell2 .flex1 .box .textbox .text1{font-size: 20px;}
    .cell6 .title b{font-size: 32px;}
    .cell5 .flex1 .box::after{display: none;}
    .cell5 .flex1 .box{flex-direction: column;align-items: flex-start; gap: 8px;}
    .cell5 .flex1 .box .step{font-size: 12px; font-weight: normal; width: unset; padding: 4px 8px 4px;}
    .cell4 .flex1{flex-wrap: wrap;}
    .cell3 .flex2{flex-direction: column;}
    .cell3 .flex1 .box b{margin-bottom: 4px;}
}

@media screen and (max-width: 500px){
    .mb_140, .cell3 .ppbox, .cell4, .cell5 .flex1{margin-bottom: 80px;}
    .sub-container.f7f7f7.cell2{padding: 80px 0 80px;}
    .cell2 .flex1,.cell3 .flex1,.cell3 .flex2,.cell4 .flex1,.cell5 .flex1{gap: 8px;}
    .cell3 .title,.cell4 .title{margin-bottom: 24px;}
    .cell3{margin-top: 80px;}
    .cell3 .flex1 .box, .cell4 .flex1 .box{width: calc(50% - 4px);}
    .cell6 .title{font-size: 20px;}
    .cell6 .title b{font-size: 28px;}
    .cell3 .ppbox,.cell5 .flex1 .box{padding: 28px;}
    .cell4 .flex1 .box{padding-bottom: 32px;}
}