/* visual */
#visual{ text-align: center; padding-top: 120px; }
#visual h2{ font-size: 6rem; font-weight: 700; color: transparent; letter-spacing: -0.02em; margin: 40px 0  80px; background: linear-gradient(to right, #111, #111, #111, #111 50%, transparent 50%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: -100%; animation: textBg 2.5s both; }
#visual .overflow{ overflow: hidden; animation: bgClip 1.2s 0.3s both; }
#visual .bg{ background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; padding-bottom: 31.25%; animation: bgScale 1.5s 1.5s both; }

/* lnb */
#lnb{ animation: textClip 1s 1.2s both; }
#lnb ul{ display: flex; justify-content: center; align-items: center; margin: -19px; }
#lnb ul li{ position: relative; padding: 19px; }
#lnb ul li::before{ content: ""; width: 6px; height: 9px; background: url("/img/sub/lnb_icon.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb ul li:first-of-type::before{ display: none; }
#lnb a{ display: inline-block; font-size: 16px; font-weight: 400; color: #111; }
#lnb .local01 a{ font-family: var(--engFont); color: rgba(17, 17, 17, 0.4); }

/* common */
:root{
	--subPt: 80px;
	--subPb: 280px;
}
#sub{ padding-top: var(--headerH); }
.sub-content{ padding: var(--subPt) 0 var(--subPb); }
.grayBg{ background: var(--grayBg); }
sub,
sup{ font-family: var(--baseFont); font-size: small; font-weight: 300; line-height: inherit; }
sub.m,
sup.m{ font-size: medium; }
sub{ vertical-align: sub; }
sup{ vertical-align: super; }
sup.m{ vertical-align: text-top; }


/* 간격 */
.pt80{ padding-top: 80px; }
.pb80{ padding-bottom: 80px; }
.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }
.pt130{ padding-top: 130px; }
.pb130{ padding-bottom: 130px; }
.pt160{ padding-top: 160px; }
.pb160{ padding-bottom: 160px; }

/* base */
.base{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.8; }
.base strong{ font-weight: 600; }


/* page-title */
.page-title{ text-align: center; margin-bottom: 60px; }
.page-title h3{ font-size: 5.6rem; font-weight: 700; color: #111; letter-spacing: -0.02em; padding-bottom: 30px; position: relative; }
.page-title h3::before{ content: ""; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.page-title p{ margin-top: 40px; }


/* q-box */
.q-box{
	--icon: 50px;
}
.q-box dl{ border: 1px solid #BEBEBE; text-align: center; }
.q-box dl > *{ padding: 60px; }
.q-box dl dt{ display: flex; justify-content: center; align-items: center; background: rgba(var(--mainRGB), 0.03); border-bottom: 1px solid #DDD; font-size: 32px; font-weight: 700; color: #222; letter-spacing: -0.02em; }
.q-box dl dt::before{ content: "Q"; width: var(--icon); height: var(--icon); background: var(--mainColor); border-radius: 50%; font-size: 24px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; line-height: var(--icon); }
.q-box dl dt p{ max-width: calc(100% - var(--icon)); padding-left: 20px; }
.q-box dl dd{ font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.02em; }


/* popup */
#popup{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 999; display: none; }
#popup .blank{ width: 100%; height: 100%; }
#popup .inner{ background: #FFF; max-width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#popup .close{ width: 50px; height: 50px; background: none; border: none; padding: 0; position: absolute; top: 40px; right: 40px; }
#popup .close::before{ content: ""; display: inline-block; width: 25px; height: 25px; background: url("/img/sub/popup_close.svg") no-repeat center center / contain; }

@media screen and (max-width: 1600px){
	/* visual */
	#visual{ padding-top: 80px; }
	#visual h2{ margin: 30px 0 60px; }

	/* common */
	:root{
		--subPt: 60px;
		--subPb: 220px;
	}

	/* 간격 */
	.pt80{ padding-top: 60px; }
	.pb80{ padding-bottom: 60px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }
	.pt130{ padding-top: 100px; }
	.pb130{ padding-bottom: 100px; }
	.pt160{ padding-top: 100px; }
	.pb160{ padding-bottom: 100px; }

	/* base */
	.base{ font-size: 18px; }

	/* page-title */
	.page-title{ margin-bottom: 40px; }
	.page-title p{ margin-top: 30px; }

	/* q-box */
	.q-box{
		--icon: 45px;
	}
	.q-box dl > *{ padding: 40px; }
	.q-box dl dt{ font-size: 26px; }
	.q-box dl dt::before{ font-size: 22px; }
	.q-box dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual{ padding-top: 40px; }
	#visual h2{ font-size: 6.3rem; margin: 15px 0 40px; }

	/* lnb */
	#lnb a{ font-size: 15px; }
	#lnb ul{ margin: -13px; }
	#lnb ul li{ padding: 13px; }

	/* common */
	:root{
		--subPt: 40px;
		--subPb: 150px;
	}
	sub,
	sup{ font-size: x-small; }
	sub.m,
	sup.m{ font-size: small; }

	/* 간격 */
	.pt80{ padding-top: 40px; }
	.pb80{ padding-bottom: 40px; }
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }
	.pt130{ padding-top: 60px; }
	.pb130{ padding-bottom: 60px; }
	.pt160{ padding-top: 70px; }
	.pb160{ padding-bottom: 70px; }

	/* base */
	.base{ font-size: 17px; }

	/* page-title */
	.page-title{ margin-bottom: 40px; }
	.page-title h3{ font-size: 5.8rem; padding-bottom: 20px; }
	.page-title h3::before{ width: 7px; height: 7px; }
	.page-title p{ margin-top: 20px; }

	/* q-box */
	.q-box{
		--icon: 40px;
	}
	.q-box dl > *{ padding: 20px; }
	.q-box dl dt{ font-size: 22px; }
	.q-box dl dt::before{ font-size: 20px; }
	.q-box dl dt p{ padding-left: 15px; }
	.q-box dl dd{ font-size: 17px; }

	/* popup */
	#popup .close{ width: 45px; height: 45px; top: 10px; right: 10px; }
	#popup .close::before{ width: 18px; height: 18px; }
}

@media screen and (max-width: 900px){
	/* q-box */
	.q-box{
		--icon: 30px;
	}
	.q-box dl dt{ flex-direction: column; font-size: 21px; padding: 15px 20px; }
	.q-box dl dt::before{ font-size: 18px; }
	.q-box dl dt p{ max-width: 100%; padding-left: 0; padding-top: 10px; }

	/* page-title */
	.page-title{ margin-bottom: 30px; }
}


/*  Signal - 진단 : 유전성 재발열 증후군의 신호 */
#hrfs .hrfs{ text-align: center; }
#hrfs .q-box dl dd p.bold{ font-size: 26px; font-weight: 700; color: var(--mainColor); margin-bottom: 20px; }
#hrfs .q-box dl dd p.bold sup{ font-weight: 400; }
#hrfs .p-box{ margin-top: 60px; }

@media screen and (max-width: 1600px){
	#hrfs .q-box dl dd p.bold{ font-size: 22px; }
}

@media screen and (max-width: 1280px){
	#hrfs .q-box dl dd p.bold{ font-size: 18px; margin-bottom: 15px; }
	#hrfs .p-box{ margin-top: 40px; }
}

@media screen and (max-width: 700px){
	#hrfs .hrfs br{ display: none; }
}


/*  Signal - 자가진단 체크리스트 */
#checklist .check{
	--icon: 100px;
}
#checklist .check{ text-align: center; }
#checklist .check .small{ font-size: 18px; font-weight: 300; color: #666; letter-spacing: -0.02em; margin-top: 20px; }
#checklist .check .small strong{ font-weight: 600; }
#checklist .check .grayLine{ border: 1px solid #BEBEBE; padding: 100px; }
#checklist .check .grayBg{ background: #F5F5F5; border-radius: 10px; padding: 60px; padding-top: 100px; }

#checklist .check .title{ margin-bottom: 50px; } 
#checklist .check .title p{ font-size: 20px; font-weight: 600; color: #333; letter-spacing: -0.02em; margin-bottom: 15px; }
#checklist .check .title h4{ font-size: 4.8rem; font-weight: 700; color: var(--pink); letter-spacing: -0.02em; }
#checklist .check .title h4 sup{ font-weight: 300; }

#checklist .check .box{ display: flex; align-items: center; background: #FFF; box-shadow: 0 0 8px rgba(0, 0, 0, 0.03); border-radius: 10px; padding: 10px 100px; }
#checklist .check .box .icon{ width: var(--icon); }
#checklist .check .box p{ width: calc(100% - (var(--icon) * 2)); font-size: 24px; font-weight: 600; color: #111; letter-spacing: -0.02em; padding: 0 30px; }
#checklist .check .box p sup{ color: #333; }

#checklist .check .answer{ display: flex; justify-content: center; }
#checklist .check .answer > div{ padding: 25px 0; position: relative; z-index: 20; }
#checklist .check .answer > div:not(:last-of-type){ margin-right: 40px; }
#checklist .check .answer > div::before{ content: ""; width: 1px; height: calc(100% - 20px); border-right: 2px solid var(--pink); position: absolute; top: 50%; left: calc(50% - 2px); z-index: -1; transform: translateY(-50%); }
#checklist .check .answer > div::after{ content: ""; width: 16px; height: 9px; background: url("/img/sub/signal/pink_arrow.svg") no-repeat bottom center / contain; position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); }
#checklist .check .answer span{ width: 160px; height: 55px; display: flex; justify-content: center; align-items: center; background: var(--pink); border: 1px solid var(--pink); border-radius: 999px; font-size: 24px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; line-height: 1; }

#checklist .check .answer > div:last-of-type::before{ border-right: 2px dashed #BBB; }
#checklist .check .answer > div:last-of-type::after{ display: none; }
#checklist .check .answer > div:last-of-type span{ background: #FFF; border-color: #BBB; color: #BBB; }

#checklist .check .bottom{ margin-top: 60px; }
#checklist .check .bottom h5{ font-size: 42px; font-weight: 700; color: #333; letter-spacing: -0.02em; margin-bottom: 40px; }
#checklist .check .bottom h5 em{ display: inline-block; border-bottom: 2px solid #333; padding-bottom: 5px; }
#checklist .check .bottom p.bold{ font-size: 28px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; margin-top: 40px; }

@media screen and (max-width: 1600px){
	#checklist .check{
		--icon: 90px;
	}
	#checklist .check .small{ font-size: 17px; }
	#checklist .check .grayLine{ padding: 70px; }
	#checklist .check .grayBg{ padding: 40px; padding-top: 70px; }

	#checklist .check .title{ margin-bottom: 40px; } 
	#checklist .check .title p{ font-size: 18px; }

	#checklist .check .box{ padding: 10px 70px; }
	#checklist .check .box p{ font-size: 20px; }

	#checklist .check .answer span{ width: 130px; height: 50px; font-size: 20px; }

	#checklist .check .bottom{ margin-top: 40px; }
	#checklist .check .bottom h5{ font-size: 36px; margin-bottom: 40px; }
	#checklist .check .bottom p.bold{ font-size: 24px; margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	#checklist .page-title{ margin-bottom: 30px; }
	#checklist .check{
		--icon: 80px;
	}
	#checklist .check .small{ font-size: 16px; margin-top: 15px; }
	#checklist .check .grayLine{ padding: 40px; }
	#checklist .check .grayBg{ padding: 25px; padding-top: 50px; }

	#checklist .check .title{ margin-bottom: 30px; } 
	#checklist .check .title p{ font-size: 17px; margin-bottom: 10px; }

	#checklist .check .box{ padding: 10px 40px; }
	#checklist .check .box p{ font-size: 18px; }

	#checklist .check .answer span{ width: 100px; height: 40px; font-size: 18px; }

	#checklist .check .bottom{ margin-top: 40px; }
	#checklist .check .bottom h5{ font-size: 28px; margin-bottom: 20px; }
	#checklist .check .bottom p.bold{ font-size: 22px; margin-top: 20px; }
}

@media screen and (max-width: 900px){
	#checklist .page-title{ margin-bottom: 15px; }

	#checklist .check .grayLine{ padding: 20px; padding-bottom: 40px; }
	#checklist .check .grayBg{ padding: 20px; padding-top: 30px; }

	#checklist .check .title{ margin-bottom: 20px; } 
	#checklist .check .title h4{ font-size: 5rem; }

	#checklist .check .box{ flex-direction: column; padding: 15px 25px 20px; }
	#checklist .check .box p{ width: 100%; padding: 0; padding-top: 5px; }

	#checklist .check .answer > div:not(:last-of-type){ margin-right: 20px; }
	#checklist .check .answer span{ width: 80px; height: 35px; font-size: 17px; }

	#checklist .check .bottom br{ display: none; }
	#checklist .check .bottom h5{ font-size: 24px; }
	#checklist .check .bottom h5 em{ padding-bottom: 0; }
	#checklist .check .bottom p.bold{ font-size: 19px; }
}

@media screen and (max-width: 700px){
	#checklist .check .title p em{ display: block; }
	#checklist .check .box p em{ display: block; }
}


/* Inflammation - 질환 특징 : 염증성 증상 */
#inflammation .q-box dl dd p{ font-size: 18px; color: #333; margin-top: 30px; }
#inflammation .q-box ul li{ font-size: 20px; font-weight: 500; color: #222; text-indent: -14px; padding-left: 14px; }
#inflammation .q-box ul li:not(:last-of-type){ margin-bottom: 20px; }
#inflammation .q-box ul li::before{ content: ""; display: inline-block; width: 4px; height: 4px; background: #222; border-radius: 50%; vertical-align: middle; margin-right: 10px; transform: translateY(-1px); }
#inflammation .q-box ul li sup{ font-weight: 300; }

@media screen and (max-width: 1600px){
	#inflammation .q-box dl dd p{ font-size: 17px; }
	#inflammation .q-box ul li{ font-size: 18px; }
	#inflammation .q-box ul li:not(:last-of-type){ margin-bottom: 15px; }
}

@media screen and (max-width: 1820px){
	#inflammation .q-box dl dd p{ font-size: 16px; margin-top: 20px; }
	#inflammation .q-box ul li{ font-size: 17px; text-indent: -12px; padding-left: 12px; }
	#inflammation .q-box ul li:not(:last-of-type){ margin-bottom: 10px; }
	#inflammation .q-box ul li::before{ margin-right: 8px; }
}


/* Recurrence - 질환 특징 : 반복적인 발열 증상 */
#recurrence{ background: url("/img/sub/recurrence/recurrence_bg.png") no-repeat bottom center / contain; }
#recurrence .center{ text-align: center; }
#recurrence .whiteBox{ background: #FFF; padding: 100px; padding-top: 60px; }


#recurrence .card{ text-align: center; }
#recurrence .card br{ display: none; }
#recurrence .card .title{ margin-bottom: 120px; }
#recurrence .card .title h6{ font-size: 24px; font-weight: 600; color: #333; letter-spacing: -0.02em; margin-bottom: 20px; }
#recurrence .card .title p{ font-size: 18px; font-weight: 300; color: #777; letter-spacing: -0.02em; }

#recurrence .card .flex-box{ display: flex; flex-wrap: wrap; color: #FFF; margin-bottom: -30px; }
#recurrence .card .flex-box > div{ width: calc((100% - 60px) / 3); min-height: 500px; margin-right: 30px; margin-bottom: 30px; position: relative; }
#recurrence .card .flex-box > div:nth-of-type(3n){ margin-right: 0; }
#recurrence .card .item > div{ height: 100%; border-radius: 20px; transition: opacity 0.4s, transform 0.4s; }
#recurrence .card .item dl{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 100px; position: relative; z-index: 10; }
#recurrence .card .item dl dt{ font-family: var(--engFont); font-size: 7rem; font-weight: 700; letter-spacing: -0.02em; }
#recurrence .card .item p{ font-size: 22px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; margin-top: 12px; }
#recurrence .card .item .bold p{ font-size: 26px; font-weight: 500; }
#recurrence .card .item .viewmore{ background: linear-gradient(to right, var(--mainColor), #4F0A12); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-top: 40px; }

#recurrence .card .front{ background: #E65062; padding: 15px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#recurrence .card .front .bold{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 2px dashed #FFF; border-radius: 10px; padding: 20px; }
#recurrence .card .front .bold p{ margin-top: 0; line-height: 1.7; }

#recurrence .card .back{ padding: 15px 15px 40px; overflow: hidden; position: relative; }
#recurrence .card .back img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }


#recurrence .sign{ text-align: center; }
#recurrence .sign h4{ font-size: 40px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; margin-bottom: 60px; }	
#recurrence .sign h4::before{ content: "Q"; width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; margin-right: 20px; font-size: 24px; font-weight: 700; color: #FFF; vertical-align: middle; transform: translateY(-3px); }
#recurrence .sign a{ margin: 0 auto; }


/* popup */
#popup.recurrence{
	--icon: 140px;
}
#popup.recurrence .inner{ width: 1540px; padding: 100px 125px; display: none; }
#popup.recurrence .page-title{ font-family: var(--engFont); }

#popup.recurrence table{ width: calc(100% + 20px); border-collapse: unset; border-spacing: 10px; margin: -10px; }
#popup.recurrence table th, 
#popup.recurrence table td{ clip-path: inset(0 0 0 0 round 10px); -webkit-clip-path: inset(0 0 0 0 round 10px); }
#popup.recurrence table th{ width: 485px; background: #FFF3F5; padding: 10px; }
#popup.recurrence table td{ background: #FFFAFB; padding: 0 60px; }

#popup.recurrence dl{ letter-spacing: -0.02em; }
#popup.recurrence dl dt{ font-family: var(--engFont); font-size: 32px; font-weight: 700; color: #111; }
#popup.recurrence dl dt sup{ color: #333; }
#popup.recurrence dl dd{ font-size: 18px; font-weight: 500; color: #333; line-height: 1.5; margin-top: 15px; }

#popup.recurrence .flex{ display: flex; align-items: center; padding-right: 20px; }
#popup.recurrence .flex .icon{ width: var(--icon); }
#popup.recurrence .flex ul{ width: calc(100% - var(--icon)); }
#popup.recurrence .flex ul li{ font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.02em; padding-left: 40px; position: relative; }
#popup.recurrence .flex ul li:not(:last-of-type){ margin-bottom: 20px; }
#popup.recurrence .flex ul li::before{ content: ""; width: 24px; height: 22px; background: url("/img/sub/recurrence/pink_arrow.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }


@media (hover: hover) and (pointer: fine) {
	#recurrence .card br{ display: block; }
	#recurrence .card .item dl{ padding-bottom: 40px; }

	#recurrence .card .front{ opacity: 1; transform: scaleX(1); }
	#recurrence .card .back{ opacity: 0; transform: scaleX(-1); pointer-events: none; }
	#recurrence .card .back .bold{ display: none; }

	#recurrence .card .item:hover .front{ opacity: 0; transform: scaleX(-1); }
	#recurrence .card .item:hover .back{ opacity: 1; transform: scaleX(1); pointer-events: auto; }
}

@media screen and (max-width: 1600px){
	#recurrence .whiteBox{ padding: 70px; padding-top: 40px; }
	#recurrence .card .flex-box > div{ min-height: 450px; }

	#recurrence .card .title{ margin-bottom: 80px; }
	#recurrence .card .title h6{ font-size: 22px; }
	#recurrence .card .title p{ font-size: 17px; }

	#recurrence .card .item dl{ padding-bottom: 70px; }
	#recurrence .card .item p{ font-size: 20px; }
	#recurrence .card .item .bold p{ font-size: 22px; }

	#recurrence .sign h4{ font-size: 32px; margin-bottom: 40px; }	
	#recurrence .sign h4::before{ width: 45px; height: 45px; font-size: 22px;transform: translateY(-2px); }

	/* popup (공통) */
	#popup.recurrence .inner{ padding: 70px 90px; }
	#popup.recurrence table th{ width: 350px; }
	#popup.recurrence table td{ padding: 0 40px; }

	#popup.recurrence dl dt{ font-size: 26px; }
	#popup.recurrence dl dd{ font-size: 17px; }

	#popup.recurrence .flex ul li{ font-size: 18px; padding-left: 35px; }
	#popup.recurrence .flex ul li:not(:last-of-type){ margin-bottom: 15px; }
	#popup.recurrence .flex ul li::before{ width: 22px; height: 20px; }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1600px) {
	#recurrence .card .back{ padding-bottom: 30px; }
}

@media screen and (max-width: 1280px){
	#recurrence .whiteBox{ padding: 40px; padding-top: 30px; }
	#recurrence .card .flex-box > div{ min-height: 400px; }

	#recurrence .card .title{ margin-bottom: 40px; }
	#recurrence .card .title h6{ font-size: 20px; margin-bottom: 10px; }
	#recurrence .card .title p{ font-size: 16px; }

	#recurrence .card .item p{ font-size: 17px; }
	#recurrence .card .item .bold p{ font-size: 19px; }

	#recurrence .sign h4{ font-size: 26px; margin-bottom: 30px; }	
	#recurrence .sign h4::before{ width: 35px; height: 35px; margin-right: 15px; font-size: 18px;transform: translateY(-2px); }

	/* popup (공통) */
	#popup.recurrence .inner{ padding: 30px 40px; }
	#popup.recurrence table th{ width: 300px; }
	#popup.recurrence table td{ padding: 0 30px; }

	#popup.recurrence dl dt{ font-size: 22px; }
	#popup.recurrence dl dd{ font-size: 16px; margin-top: 5px; }

	#popup.recurrence .flex ul li{ font-size: 17px; padding-left: 30px; }
	#popup.recurrence .flex ul li:not(:last-of-type){ margin-bottom: 10px; }
	#popup.recurrence .flex ul li::before{ width: 20px; height: 18px; }
}

@media screen and (max-width: 1200px){
	#recurrence br{ display: none; }
	#recurrence .card .flex-box > div{ min-height: 350px; }
	#recurrence .card .front{ padding: 10px; }
}

@media screen and (max-width: 1000px){
	#recurrence .card .flex-box > div{ width: 100%; min-height: auto; margin-right: 0; }
	#recurrence .card .item dl{ padding-bottom: 0; }
	#recurrence .card .item dl dt{ padding-bottom: 10px; }
	#recurrence .card .item p{ margin-top: 5px; }
	#recurrence .card .item .viewmore{ margin: 0 auto; margin-top: 40px; position: relative; left: 0; transform: unset; }

	#recurrence .card .front{ opacity: 0; transform: scaleX(1); }
	#recurrence .card .back{ padding: 25px 17px !important; opacity: 1; transform: scaleX(1); pointer-events: auto; }
	#recurrence .card .back::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; z-index: 2; }
	#recurrence .card .back .bold{ display: block; }

	/* popup (공통) */
	#popup.recurrence{
		--icon: 100px;
	}
	#popup.recurrence .inner{ padding: 30px 25px; }

	#popup.recurrence table tr, 
	#popup.recurrence table th,
	#popup.recurrence table td{ width: 100%; }
	#popup.recurrence table tr{ display: flex; flex-direction: column; }
	#popup.recurrence table tr:not(:last-of-type){ margin-bottom: 30px; }
	#popup.recurrence table th{ padding: 10px 20px; margin-bottom: 10px; }
	#popup.recurrence table td{ padding: 0 20px; }

	#popup.recurrence .flex{ padding-right: 0; }
	#popup.recurrence .flex ul li{ padding-left: 25px; }
	#popup.recurrence .flex ul li::before{ width: 16px; height: 15px; }
}

@media screen and (max-width: 900px){
	#recurrence .page-title{ margin-bottom: 20px; }
	#recurrence .whiteBox{ padding: 30px 25px; }

	#recurrence .card .title{ margin-bottom: 30px; }
	#recurrence .card .title h6{ font-size: 19px; }
	
	#recurrence .card .item dl dt{ font-size: 6.5rem; }
	#recurrence .card .item p{ font-size: 16px; }
	#recurrence .card .item .bold p{ font-size: 17px; }

	#recurrence .sign h4{ font-size: 22px; }	
	#recurrence .sign h4::before{ width: 30px; height: 30px; margin-right: 10px; transform: translateY(-1px); }

	/* popup (공통) */
	#popup.recurrence .page-title{ margin-bottom: 20px; }
	#popup.recurrence .page-title h3{ padding-bottom: 15px; }
	#popup.recurrence dl dt{ font-size: 21px; }
}


/* Endurance - 질환 특징 : 계속되는 증상, 끊임없는 고통 */
#endurance .caps{
	--bg01: #F27A7F;
	--bg02: #E94A56;
	--bg03: #D93C4F;
}
#endurance .caps .page-title{ margin-bottom: 80px; }
#endurance .caps .page-title + .base strong{ font-weight: 500; }
#endurance .caps .lineBox{ border: 1px solid #D6D6D6; padding: 80px 70px; }

#endurance .caps .table{ min-width: 1000px; width: 100%; overflow: hidden; }
#endurance .caps table{ width: calc(100% + 20px); border-collapse: unset; border-spacing: 10px; text-align: center; margin: -10px; }
#endurance .caps table colgroup col.s{ width: 200px; }

#endurance .caps table thead tr{ margin-bottom: 10px; }
#endurance .caps table thead tr th:nth-of-type(2){ --bgA: var(--bg01); --bgB: var(--bg01); }
#endurance .caps table thead tr th:nth-of-type(2) dl::before, 
#endurance .caps table thead tr th:nth-of-type(2) dl::after, 
#endurance .caps table thead tr th:nth-of-type(2) dl dt::before{ display: none; }
#endurance .caps table thead tr th:nth-of-type(3){ --bgA: var(--bg02); --bgB: var(--bg01); }
#endurance .caps table thead tr th:nth-of-type(4){ --bgA: var(--bg03); --bgB: var(--bg02); }
#endurance .caps table thead th dl{ min-height: 160px; display: flex; flex-direction: column; justify-content: center; background: var(--bgA); border-radius: 10px; color: #FFF; padding: 22px; position: relative; }
#endurance .caps table thead th dl::before, 
#endurance .caps table thead th dl::after{ content: ""; width: 60px; height: 100%; mask: url("/img/sub/endurance/triangle.svg") no-repeat center left / contain; -webkit-mask: url("/img/sub/endurance/triangle.svg") no-repeat center left / contain; position: absolute; top: 0; }
#endurance .caps table thead th dl::before{ background: #FFF; left: -11px; }
#endurance .caps table thead th dl::after{ background: var(--bgB);left: -20px; }
#endurance .caps table thead th dl dt{ font-family: var(--engFont); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; }
#endurance .caps table thead th dl dt::before{ content: ""; width: 120px; height: 100%; background: var(--bgA); position: absolute; top: 0; left: -10px; z-index: -1; }
#endurance .caps table thead th dl dd{ font-size: 18px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; margin-top: 5px; }

#endurance .caps table tbody{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; }
#endurance .caps table tbody th,
#endurance .caps table tbody td{ border-radius: 10px; }
#endurance .caps table tbody th{ background: #F5F5F5; font-weight: 600; color: #555; padding: 30px 20px; }
#endurance .caps table tbody td{ border: 1px solid #EEE; padding: 20px; }

#endurance .caps table p{ min-height: 3em; font-weight: 500; line-height: 1.5; margin-bottom: 50px; }
#endurance .caps table div{ max-width: 325px; margin: 0 auto; padding: 30px 0; }
#endurance .caps table ul{ display: flex; justify-content: center; }
#endurance .caps table ul li{ max-width: calc((100% - 30px) / 2); width: 120px; position: relative; margin-right: 30px; }
#endurance .caps table ul li:last-of-type{ margin-right: 0; }
#endurance .caps table figure{ display: block; background: #FFF6F5; padding-bottom: 100%; border-radius: 50%; }
#endurance .caps table figure img{ max-width: calc(100% - 40px); max-height: calc(100% - 40px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#endurance .caps .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -15px; }
#endurance .caps .grid-box > *{ margin: 15px; }
#endurance .caps .dlBox dl,
#endurance .caps .dlBox dl dd{ display: flex; flex-direction: column; }
#endurance .caps .dlBox dl dd,
#endurance .caps .dlBox ul{ flex: 1 0 auto; }
#endurance .caps .dlBox dl dt{ background: #FDE7E6; border-radius: 2px; font-family: var(--engFont); font-size: 48px; font-weight: 700; color: #D93C4F; letter-spacing: -0.02em; text-align: center; padding: 20px; }
#endurance .caps .dlBox dl dt p{ font-size: 18px; font-weight: 400; color: #333; margin-top: 10px; }
#endurance .caps .dlBox figure{ margin: 20px 0; }
#endurance .caps .dlBox ul{ border: 1px solid #DEDEDE; padding: 30px; }
#endurance .caps .dlBox ul li{ font-size: 18px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.8; padding-left: 14px; position: relative; }
#endurance .caps .dlBox ul li:not(:last-of-type){ margin-bottom: 15px; }
#endurance .caps .dlBox ul li::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.8em / 2); left: 0; transform: translateY(-50%); }


#endurance .burden dl{ background: #FFF; padding: 60px; text-align: center; letter-spacing: -0.02em; }
#endurance .burden dl:not(:last-of-type){ margin-bottom: 30px; }
#endurance .burden dl > *{ max-width: 1400px; width: 100%; margin: 0 auto; }
#endurance .burden dl dt{ font-size: 30px; font-weight: 600; color: #333; margin-bottom: 40px; }
#endurance .burden dl dt em{ display: inline-block; border-bottom: 2px solid rgba(var(--mainRGB), 0.6); margin-bottom: 3px; }
#endurance .burden dl dd p{ font-size: 16px; font-weight: 500; color: #FF8592; margin-bottom: 15px; }
#endurance .burden ul{ background: #FBF3F4; padding: 30px; }
#endurance .burden ul li{ font-size: 19px; font-weight: 500; color: #333; letter-spacing: -0.02em; text-indent: -14px; padding-left: 14px; }
#endurance .burden ul li:not(:last-of-type){ margin-bottom: 20px; }
#endurance .burden ul li::before{ content: ""; display: inline-block; width: 4px; height: 4px; background: var(--mainColor); border-radius: 50%; vertical-align: middle; margin-right: 10px; transform: translateY(-2px); }


/* 스크롤바 커스텀 */
#endurance .caps .scrollbar .os-content{ padding-bottom: 15px !important; }
#endurance .caps .scrollbar.os-theme-dark > .os-scrollbar-horizontal, 
#endurance .caps .scrollbar.os-theme-light > .os-scrollbar-horizontal{ height: 15px; }
#endurance .caps .scrollbar.os-theme-dark > .os-scrollbar, 
#endurance .caps .scrollbar.os-theme-light > .os-scrollbar{ padding: 10px 0 0; }
#endurance .caps .scrollbar.os-theme-dark > .os-scrollbar > .os-scrollbar-track, 
#endurance .caps .scrollbar.os-theme-light > .os-scrollbar > .os-scrollbar-track{ background: var(--grayBg); }
#endurance .caps .scrollbar.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle{ background: rgba(0, 0, 0, 0.5); }

@media screen and (max-width: 1600px){
	#endurance .caps .page-title{ margin-bottom: 60px; }
	#endurance .caps .lineBox{ padding: 40px 30px; }

	#endurance .caps table thead th dl{ min-height: 150px; padding: 15px; }
	#endurance .caps table thead th dl dt{ font-size: 34px; }
	#endurance .caps table thead th dl dd{ font-size: 17px; }
	#endurance .caps table tbody{ font-size: 18px; }
	#endurance .caps table tbody th{ padding: 25px 15px; }

	#endurance .caps table p{ margin-bottom: 30px; }
	#endurance .caps table ul li{ width: 100px; }

	#endurance .caps .dlBox dl dt{ font-size: 40px; }

	#endurance .burden dl{ padding: 40px; }
	#endurance .burden dl dt{ font-size: 24px; margin-bottom: 30px; }
	#endurance .burden ul li{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#endurance .caps table colgroup col.s{ width: 170px; }
	#endurance .caps table thead th dl dt{ font-size: 30px; }
}

@media screen and (max-width: 1280px){
	#endurance .caps .page-title{ margin-bottom: 40px; }
	#endurance .caps .lineBox{ padding: 25px; }

	#endurance .caps table colgroup col.s{ width: 120px; }
	#endurance .caps table thead th dl{ min-height: 120px; }
	#endurance .caps table thead th dl dt{ font-size: 26px; }
	#endurance .caps table thead th dl dd{ font-size: 16px; }
	#endurance .caps table tbody{ font-size: 17px; }
	#endurance .caps table tbody th{ padding: 20px 15px; }

	#endurance .caps table div{ padding: 10px 0; }
	#endurance .caps table p{ margin-bottom: 20px; }
	#endurance .caps table ul li{ max-width: calc((100% - 20px) / 2); width: 90px; margin-right: 20px; }
	#endurance .caps table ul li img{ max-width: calc(100% - 30px); max-height: calc(100% - 30px); }

	#endurance .caps .grid-box{ margin: -10px; }
	#endurance .caps .grid-box > *{ margin: 10px; }
	#endurance .caps .dlBox dl dt{ font-size: 32px; padding: 10px 20px; }
	#endurance .caps .dlBox dl dt p{ font-size: 17px; margin-top: 5px; }
	#endurance .caps .dlBox figure{ margin: 15px 0; }
	#endurance .caps .dlBox ul{ padding: 20px 25px; } 
	#endurance .caps .dlBox ul li{ font-size: 17px; }
	#endurance .caps .dlBox ul li:not(:last-of-type){ margin-bottom: 10px; }

	#endurance .burden dl{ padding: 20px; }
	#endurance .burden dl dt{ font-size: 22px; margin-bottom: 20px; }
	#endurance .burden dl dd p{ font-size: 15px; margin-bottom: 5px; }
	#endurance .burden ul{ padding: 20px; }
	#endurance .burden ul li{ font-size: 17px; }
	#endurance .burden ul li:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1100px){
	#endurance .caps .dlBox br{ display: none; }
}

@media screen and (max-width: 900px){
	#endurance .caps .center br{ display: none; }
	#endurance .caps .grid-box{ grid-template-columns: repeat(1, 1fr); margin: -20px -10px; }
	#endurance .caps .grid-box > *{ margin: 20px 10px; }
	#endurance .caps .dlBox dl dt{ font-size: 26px; }
	#endurance .caps .dlBox ul{ padding: 15px 20px; }

	#endurance .burden dl dt{ font-size: 20px; }
}

@media screen and (max-width: 600px){
	#endurance .burden dl dd p span{ display: block; }
}


/* Need to Treat - 대처 및 치료 */
#treat .page-title{ margin-bottom: 80px; position: relative; z-index: 10; }

#treat .goal{ overflow: hidden; }
#treat .goal .diagram{
	--gap: 40px;
	--gap01: 70px;
	--gap02: 80px;
	--gap03: 95px;
	--width: (100% + (var(--gap) * 2)) / 3;
}
#treat .goal .diagram{ max-width: 1000px; margin: 0 auto; position: relative; }
#treat .goal .diagram .circle{ width: calc(var(--width) + (var(--gap01) * 2)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#treat .goal .diagram .circle i{ display: block; padding-bottom: 100%; border: 1px solid rgba(var(--mainRGB), 0.18); border-radius: 50%; }
#treat .goal .diagram .circle i::before, 
#treat .goal .diagram .circle i::after{ content: ""; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#treat .goal .diagram .circle i::before{ width: calc(100% + (var(--gap02) * 2)); height: calc(100% + (var(--gap02) * 2)); border: 1px solid rgba(var(--mainRGB), 0.1); }
#treat .goal .diagram .circle i::after{ width: calc(100% + (var(--gap02) * 2) + (var(--gap03) * 2)); height: calc(100% + (var(--gap02) * 2) + (var(--gap03) * 2)); border: 1px solid rgba(var(--mainRGB), 0.03); }
#treat .goal .diagram .flex-box{ display: flex; }
#treat .goal .diagram .item{ width: calc(var(--width)); margin-right: calc(var(--gap) * -1); padding: 15px; background: #FFF; border: 2px solid var(--mainColor); border-radius: 50%; position: relative; z-index: var(--index); transition: transform 1s 0.7s, background 0.5s; }
#treat .goal .diagram .item:first-of-type{ transform: translateX(calc(100% - var(--gap))); }
#treat .goal .diagram .item:last-of-type{ transform: translateX(calc((100% - var(--gap)) * -1)); margin-right: 0; }
#treat .goal .diagram .aos-animate .item:first-of-type{ transform: translateX(0); }
#treat .goal .diagram .aos-animate .item:last-of-type{ transform: translateX(0); }
#treat .goal .diagram .item::before{ content: ""; display: block; padding-bottom: 100%; border: 2px dotted var(--mainColor); border-radius: inherit; transition: border-color 0.5s; }
#treat .goal .diagram .item p{ font-size: 24px; font-weight: 600; color: #333; letter-spacing: -0.02em; line-height: 1.6; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); transition: color 0.5s; }
#treat .goal .diagram .item p em{ color: var(--mainColor); transition: color 0.5s; }

#treat .goal .diagram .active{ background: var(--mainColor); }
#treat .goal .diagram .active::before{ border-color: #FFF; }
#treat .goal .diagram .active p{ color: #FFF; }
#treat .goal .diagram .active p em{ color: #FFF; }


#treat .dl .item{ display: flex; align-items: center; background: #FFF; padding: 40px 80px; position: relative; }
#treat .dl .item:not(:last-of-type){ margin-bottom: 11px; }
#treat .dl .item::before{ content: ""; width: 100%; height: 100%; background: #FFF; border: 1px solid #FFF; position: absolute; top: 0; left: 0; transition: background 0.4s, border-color 0.4s; }
#treat .dl .item .icon{ width: 120px; position: relative; z-index: 10; }
#treat .dl .item dl{ width: calc(100% - 120px); letter-spacing: -0.02em; padding-right: 80px; position: relative; z-index: 10; }
#treat .dl .item dl *{ line-height: 1.5; }
#treat .dl .item dl dt{ font-size: 24px; font-weight: 600; color: var(--mainColor); }
#treat .dl .item dl dd{ font-size: 19px; font-weight: 300; color: #333; margin-top: 15px; }
#treat .dl p{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.8; text-align: center; margin-top: 40px; }
#treat .dl p strong{ font-weight: 500; }


#treat .page{
	--width: (100% - 30px) / 2;
	--gap: 10%;
	--mb: -104px;
}
#treat .page .flex-box{ display: flex; }
#treat .page .item{ width: calc(var(--width)); height: 480px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 30px; margin-right: 30px; transition: width 0.5s; }
#treat .page .item:last-of-type{ margin-right: 0; }
#treat .page .item01{ background: url("/img/sub/treat/treat_img01.jpg") no-repeat center left / cover; }
#treat .page .item02{ background: url("/img/sub/treat/treat_img02.jpg") no-repeat center left / cover; }
#treat .page .item p{ font-size: 36px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; position: relative; z-index: 10; }
#treat .page .item div{ padding-top: 40px; }
#treat .page .item a{ margin: 0 auto; }

@media (hover: hover) and (pointer: fine) {
	#treat .dl .item:hover::before{ background: #FFF3F5; border-color: rgba(var(--mainRGB), 0.15); }

	#treat .page .item div{ margin-top: var(--mb); transition: margin 0.5s; }
	#treat .page .item a{ opacity: 0; transition: opacity 0.5s; }

	#treat .page .hover .item{ width: calc(var(--width) - var(--gap)); }

	#treat .page .item:hover{ width: calc(var(--width) + var(--gap)); }
	#treat .page .item:hover div{ margin-top: 0; }
	#treat .page .item:hover a{ opacity: 1; }
}

@media screen and (max-width: 1600px){
	#treat .page-title{ margin-bottom: 60px; }

	#treat .goal .diagram{
		--gap: 30px;
		--gap01: 60px;
		--gap02: 70px;
		--gap03: 85px;
	}
	#treat .goal .diagram{ max-width: 900px; }
	#treat .goal .diagram .item p{ font-size: 22px; }

	#treat .dl .item{ padding: 30px 60px; }
	#treat .dl .item dl{ padding-right: 60px; }
	#treat .dl .item dl dt{ font-size: 22px; }
	#treat .dl .item dl dd{ font-size: 18px; }
	#treat .dl p{ font-size: 18px; }

	#treat .page{
		--mb: -85px;
	}
	#treat .page .item{ height: 400px; }
	#treat .page .item p{ font-size: 28px; }
	#treat .page .item div{ padding-top: 30px; }
}

@media screen and (max-width: 1280px){
	#treat .page-title{ margin-bottom: 30px; }

	#treat .goal .diagram{
		--gap: 30px;
		--gap01: 50px;
		--gap02: 60px;
		--gap03: 65px;
	}
	#treat .goal .diagram{ max-width: 800px; }
	#treat .goal .diagram .item{ padding: 10px; }
	#treat .goal .diagram .item p{ font-size: 20px; }

	#treat .dl .item{ padding: 25px 40px; }
	#treat .dl .item dl{ padding-right: 40px; }
	#treat .dl .item dl dt{ font-size: 20px; }
	#treat .dl .item dl dd{ font-size: 17px; margin-top: 10px; }
	#treat .dl p{ font-size: 17px; margin-top: 30px; }

	#treat .page{
		--mb: -70px;
	}
	#treat .page .item{ height: 350px; }
	#treat .page .item p{ font-size: 24px; }
	#treat .page .item div{ padding-top: 20px; }
}

@media screen and (max-width: 1100px){
	#treat .dl br{ display: none; }

	#treat .page{
		--width: (100% - 20px) / 2;
	}
	#treat .page .item{ margin-right: 20px; }
}

@media screen and (max-width: 900px){
	#treat .goal .diagram{
		--gap: 20px;
		--gap01: 40px;
		--gap02: 50px;
		--gap03: 55px;
	}
	#treat .goal .diagram .item p{ font-size: 18px; }

	#treat .dl .item{ padding: 20px 25px; }
	#treat .dl .item dl dt{ font-size: 19px; }

	#treat .page .flex-box{ flex-direction: column; }
	#treat .page .item{ width: 100% !important; height: 180px; margin-right: 0; margin-bottom: 20px; }
}

@media screen and (max-width: 650px){
	#treat .page-title br{ display: none; }

	#treat .goal .diagram .circle{ display: none; }
	#treat .goal .diagram .flex-box{ flex-wrap: wrap; justify-content: center; margin-bottom: 17%; }
	#treat .goal .diagram .item{ width: calc((100% + var(--gap)) / 2); margin-bottom: -17%; transform: unset !important; }
	#treat .goal .diagram .item:nth-of-type(2){ margin-right: 0; }

	#treat .dl .item{ flex-direction: column-reverse; align-items: flex-start; }
	#treat .dl .item dl{ width: 100%; padding-right: 0; padding-top: 20px; }
	#treat .dl .item .icon{ width: 100px; }
}


/* Need to Treat - 환자를 위한 페이지 / 의료진을 위한 페이지 */
#page .viewmore{ margin: 0 auto; }
#page .q-box dl dd .flex{ display: flex; flex-wrap: wrap; justify-content: center; margin: 60px -10px -10px; }
#page .q-box dl dd .flex > *{ margin: 0 10px 10px; }

@media screen and (max-width: 1600px){
	#page .q-box dl dd .flex{ margin-top: 40px; }
}

@media screen and (max-width: 1280px){
	#page .q-box dl dd .flex{ margin-top: 20px; }
}

@media screen and (max-width: 800px){
	#page br{ display: none; }
}