@import url('sub.css');
/* 공통 */
:root {
    --marb50 : 50px;
    --marb70 : 70px;
}

.clinic_top {margin-bottom: var(--marb50);}
.clinic_top mark {background: rgba(196, 211, 178, 0.6); color: inherit;}

.fertility_dl {margin-bottom: var(--marb70);}
.fertility_dl dl {display: flex; gap: 30px; }
.fertility_dl dl + dl {margin-top: var(--marb70);}
.fertility_dl dl dt {width: 230px; flex-shrink: 0;}
.fertility_dl dl dd {flex: 1;}
.fertility_dl dl dd .dot_list {display: flex; flex-direction: column; gap: 6px;}

.fertility_process {counter-reset: certi;}
.fertility_process li {counter-increment: certi; display: flex; padding: 50px 20px; flex-direction: column; align-items: center; gap: 20px; border-radius: var(--borderR20); background: var(--grayBg); position: relative; text-align: center;}
.fertility_process li::before {content: '0'counter(certi); display: flex; width: 28px; height: 28px; justify-content: center; align-items: center; aspect-ratio: 1/1; border-radius: 50%; background: var(--main); color: var(--white); font-family: var(--eng); font-size: 1rem; font-weight: 500; line-height: 166.667%;}
.fertility_process li:not(:last-child)::after {position: absolute; content: ''; top: 50%; right: 0; transform: translate(50%, -50%); width: 23px;  background: var(--border); aspect-ratio: 23/15; background: url('/info/img/certi_arrow.svg') center / cover no-repeat;}

.fertility_info {padding: 45px 50px; border-radius: var(--borderR20); border: 1px solid var(--border); background: var(--white);}
.fertility_info h4 {margin-bottom: 15px; display: flex; gap: 12px;}
.fertility_info h4::before {content: ''; display: flex; aspect-ratio: 1/1; background: url('/fertility/img/iui_info_deco.svg') center / cover no-repeat; height: 1lh;}
.fertility_info .dot_list {display: flex; flex-direction: column; gap: 6px;}
.fertility_info .dot_list li::before {background: var(--sub);}

.imgflex {margin-bottom: var(--marb70);}
.imgflex img {width: 100%; border-radius: var(--borderR20);}

/* 시험관아기시술 */
.ivf_cont .imgflex img {min-height: 250px; object-fit: cover;}


/*******************************************************************************
    @media ~1700px
*******************************************************************************/
@media all and (max-width:1700px){
/* 공통 */
.clinic_top br {display: none;}
.fertility_dl br {display: none;}
.fertility_info br {display: none;}
}

/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){

}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 공통 */
.fertility_process {gap: 15px;}
.fertility_process li {padding: 40px 20px;}
.fertility_process li:not(:last-child)::after {width: 20px;}

.fertility_dl dl dt {width: 120px;}
}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){
:root {
    --marb50 : 30px;
    --marb70 : 40px;
}

/* 공통 */
.fertility_process {gap: 10px;}
.fertility_process li {padding: 30px 15px; gap: 15px;}
.fertility_process li::before {width: 26px; height: 26px;}
.fertility_process li:not(:last-child)::after {width: 18px;}
.fertility_process li .iconbox img {height: 75px; width: auto; max-width: 100%;}

.fertility_dl dl {display: block;}
.fertility_dl dt {width: 100%; margin-bottom: 15px;}

.fertility_info {padding: 30px 35px;}
}

/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){
:root {
    --marb50 : 20px;
    --marb70 : 30px;
}

/* 공통 */
.clinic_top span,
.clinic_top mark {line-height: inherit;}

.fertility_dl dt {margin-bottom: 10px;}
.fertility_dl dl dd .dot_list {gap: 3px;}

.fertility_process {grid-template-columns: repeat(2, 1fr);}
.fertility_process li {padding: 20px 10px;}
.fertility_process li::before {width: 23px; height: 23px;}
.fertility_process li:nth-child(2n)::after {display: none;}
.fertility_process li:not(:last-child)::after {width: 15px;}
.fertility_process li .iconbox img {height: 60px;}

.fertility_info {padding: 20px 25px;}
.fertility_info h4 {gap: 10px; margin-bottom: 10px;}
.fertility_info .dot_list {gap: 3px;}

/* 인공수정 */
.iui_cont .imgflex {grid-template-columns: 1fr;}
}

/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
/* 공통 */
.fertility_process {grid-template-columns: 1fr;}
.fertility_process li:not(:last-child)::after {top: auto; bottom: 0; right: auto; left: 50%; transform: translate(-50%, 50%) rotate(90deg);}
}

/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}