@charset "utf-8";

/* 공통 */

.con-tit01 {display: block; line-height: 1.4; margin-bottom: 25px; font-size: 28px;}

.cha-tit-st1 {position: relative;}
.cha-tit-st1::after {content: ''; position: absolute; right: -20px; bottom: -25px; width: 280px; height: 175px; background: url(../images/content/con-tit-cha01.png) no-repeat center / contain;}

.con-box:has(.cha-tit-st1) {margin-top: 100px; padding: 30px; border: 1px solid var(--gray-e5); border-radius: 20px;}

@media only screen and (max-width: 600px) {
	.cha-tit-st1::after {width: 220px; height: 115px;}
	.con-box:has(.cha-tit-st1) {margin-top: 40px;}
}
@media only screen and (max-width: 500px) {
	.cha-tit-st1::after {width: 180px; height: 75px;}
}

.tit-wrap:has(.con-tit01) {padding-bottom: 20px; border-bottom: 1px solid var(--gray-e5);}
.tit-wrap.dash {border-bottom: 1px dashed var(--gray-e5);}

@media only screen and (max-width: 1023px) {
	.con-tit01 {font-size: 24px;}
}
@media only screen and (max-width: 767px) {
	.con-tit.txt-30 {font-size: 26px;}
}

.num-st1 {display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 5px;}

.deco-st1 {position: relative; isolation: isolate;}
.deco-st1::before {content: ''; position: absolute; left: 0; bottom: 10px; z-index: -1; width: 100%; height: 30%; background-color: var(--primary100);}

.deco-st2 {position: relative; isolation: isolate;}
.deco-st2::before {content: ''; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 100%;}
.deco-st2.deco-yellow::before {background-color: rgba(255, 174, 26, 0.5);}

/* sub00 */
.agree-list {display: flex; flex-wrap: wrap; gap: 15px 20px; padding: 0 30px !important;}
.agree-list li {width: calc(50% - 10px);}
.agree-list label {display: flex; align-items: center; gap: 10px;}

@media only screen and (max-width: 1023px) {
	.agree-list {flex-direction: column;}
	.agree-list li {width: 100%;}
	.agree-list li .chk-st1 {flex-shrink: unset;}
	.agree-list label {word-wrap: break-word; word-break: break-all;}
}

/* sub01 */
.intro-box {border-radius: 10px; overflow: hidden;}
.intro-box .intro-tit {display: block; padding: 15px; font-size: 24px; color: #fff; text-align: center;}
.intro-box span {line-height: 1.4; font-weight: 600; font-size: 22px;}
.intro-box p {line-height: 1.5; margin-top: 15px; font-weight: 500; font-size: 16px; color: var(--gray-44);}

.intro-box.intro-sec01 {border: 1px solid #5F89D7;}
.intro-sec01 .intro-tit {background-color: #5F89D7;}
.intro-sec01 .bottom {background: var(--primary200) url(../images/content/sub0101-img02.png) no-repeat center / cover;}
.intro-sec01 .chat-item {display: flex; gap: 20px 30px;}
.intro-sec01 .chat-item:nth-child(2) {width: fit-content; margin-top: -30px; margin-left: auto;}
.intro-sec01 .chat-item .img-wrap {position: relative; isolation: isolate; overflow: visible;}
.intro-sec01 .chat-item .img-wrap::before,
.intro-sec01 .chat-item .img-wrap::after {content: ''; position: absolute; z-index: -1;}
.intro-sec01 .chat-item:first-child .img-wrap::before {left: 4px; top: -20px; width: 140px; height: 140px; background-color: #C0DEFF; border-radius: 100%;}
.intro-sec01 .chat-item:first-child .img-wrap::after  {right: -2px; top: -16px; width: 70px; height: 51px; background: url(../images/content/sub0101-img04.png) no-repeat center / contain;}
.intro-sec01 .chat-item:nth-child(2) .img-wrap::after  {left: -2px; top: -34px; width: 80px; height: 56px; background: url(../images/content/sub0101-img06.png) no-repeat center / contain;}
.intro-sec01 .chat-item .txt-wrap .chat-st1 {display: block; width: 100%; max-width: 430px; padding: 15px 20px; background-color: #fff;}
.intro-sec01 .chat-item:first-child .txt-wrap .chat-st1 {border-radius: 20px 20px 20px 0;}
.intro-sec01 .chat-item:nth-child(2) .txt-wrap .chat-st1 {border-radius: 20px 20px 0 20px;}

.intro-box.intro-sec02 {border: 1px solid #00B4FF;}
.intro-sec02 .intro-tit {background-color: #00B4FF;}
.intro-sec02 .bottom .item {flex: 1; height: 230px; padding: 25px 30px; background-repeat: no-repeat; background-position: right bottom; background-size: 100% auto; border-radius: 10px;}
.intro-sec02 .bottom .item:first-child {background-color: #DEF5FF; background-image: url(../images/content/sub0101-img07.png);}
.intro-sec02 .bottom .item:nth-child(2)  {background-color: #EBFFEE; background-image: url(../images/content/sub0101-img08.png);}
.intro-sec02 .bottom .item:nth-child(3)  {background-color: #DEE2FF; background-image: url(../images/content/sub0101-img-09.png);}

.intro-box.intro-sec03 {border: 1px solid var(--secondary400);}
.intro-sec03 .intro-tit {background-color: var(--secondary400);}
.intro-sec03 .bottom {background-color: #FFF2FB;}
.intro-sec03 .bottom .item {flex: 1; padding: 25px 30px; border-radius: 10px; background-color: #fff; text-align: center;}
.intro-sec03 .bottom .img-wrap {margin-bottom: 15px; border-radius: 10px;}
.intro-sec03 .bottom .img-wrap img {width: 100%;}

@media only screen and (max-width: 1100px) {
	.intro-sec01 .chat-item:nth-child(2) {margin-top: 40px;}

	.intro-sec02 .bottom .item {height: 280px;}
	
	.intro-sec03 .bottom {flex-direction: column;}
	.intro-sec03 .bottom .item {display: flex; align-items: center; gap: 15px 20px; padding: 15px;}
	.intro-sec03 .bottom .txt-wrap {text-align: start;}
	.intro-sec03 .bottom .img-wrap {flex-shrink: 0; max-width: 430px; margin-bottom: 0;}
}
@media only screen and (max-width: 700px) {
	.intro-box .intro-tit {font-size: 20px;}
	.intro-box span {font-size: 18px;}

	.intro-sec01 .chat-item .img-wrap::before,
	.intro-sec01 .chat-item .img-wrap::after {display: none;}
	
	.intro-sec02 .bottom {flex-direction: column;}
	.intro-sec02 .bottom .item {flex: unset;}

	.intro-sec03 .bottom .item {flex-direction: column;}
	.intro-sec03 .bottom .txt-wrap {text-align: center;}
}
@media only screen and (max-width: 500px) {
	.intro-sec01 .chat-item .img-wrap {display: none;}
	
	.intro-sec02 .bottom .item {height: 250px;}
	
	.intro-sec03 .bottom .txt-wrap br {display: none;}
}
@media only screen and (max-width: 400px) {
	.intro-sec02 .bottom .item {height: 200px; padding: 20px 25px;}
}

.intro-step .step-wrap {display: flex; gap: 30px;}
.intro-step .step-wrap li {padding: 30px; background-color: #fff; border-radius: 10px; text-align: center;}

@media only screen and (max-width: 1023px) {
	.intro-step .step-wrap {gap: 20px;}
}
@media only screen and (max-width: 767px) {
	.intro-step .step-wrap {flex-direction: column; }
	.intro-step .step-wrap li {display: flex; justify-content: space-between;}
	.intro-step .step-wrap .img-wrap {max-width: 350px;}
	.intro-step .step-wrap .bottom .txt-24 {font-size: 20px;}
}
@media only screen and (max-width: 500px) {
	.intro-step .step-wrap li {flex-direction: column;}
}



/* sub02 */
.progress-list li {position: relative; padding-bottom: 30px; border-bottom: 1px solid var(--gray-e5);}
.progress-list li + li {margin-top: 30px;}
.progress-list li .img-wrap {width: 100%; max-width: 600px;}
.progress-list li .img-wrap img {width: 100%;}
.progress-list li::after {content: ''; position: absolute; z-index: 1;}
.progress-list li:nth-child(1)::after {right: 0; bottom: -60px; width: 150px; height: 200px; background: url(../images/content/cha01-img05.png) no-repeat center / contain;}
.progress-list li:nth-child(2)::after {left: 550px; bottom: -10px; width: 120px; height: 150px; background: url(../images/content/cha02-img01.png) no-repeat center / contain;}
.progress-list li:nth-child(3)::after {right: 0; bottom: -60px; width: 270px; height: 165px; background: url(../images/content/sub0201-ico01.png) no-repeat center / contain;}
.progress-list li:nth-child(4)::after {left: 550px; bottom: -10px; width: 150px; height: 180px; background: url(../images/content/cha01-img11-horz.png) no-repeat center / contain;}
.progress-list li:nth-child(4)::before {content: ''; position: absolute; left: -30px; top: -18px; width: 85px; height: 100px; background: url(../images/content/sub0201-ico02.png) no-repeat center / contain;}

.test-list {}
.test-list li {display: flex; align-items: center; gap: 20px 30px;}
.test-list li + li {margin-top: 10px;}
.test-list li .txt-wrap {display: flex; align-items: center; gap: 10px; width: 100%;}
.test-list li .txt-wrap::before {content: ''; flex-shrink: 0; display: block; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H18V1M17 12H12V17H17V12Z' fill='%231B2024'/%3E%3C/svg%3E%0A") no-repeat center / contain;}

.deep-list {display: flex; flex-wrap: wrap; gap: 16px;}
.deep-list li {flex: 1 1 calc(33.333% - 11px);}
.deep-list li a {display: flex; flex-flow: column wrap; justify-content: space-between; gap: 10px; width: 100%; height: 160px; padding: 18px; background-color: var(--primary200); background-repeat: no-repeat; border-radius: 10px;}
.deep-list li:nth-child(2n) a {background-color: var(--secondary100);}
.deep-list li a .img-wrap {display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; background-color: #fff; border-radius: 5px;}
.deep-list li span {margin-top: auto;}
.deep-list li i {display: inline-block; width: 30px; height: 30px; line-height: 30px; margin-left: 10px; font-size: 12px; color: var(--primary500); background-color: #fff; border-radius: 10px; text-align: center; transition: transform 0.3s;}
.deep-list li i::before {font-weight: 800 !important;}
.deep-list li:nth-child(2n) i {color: var(--secondary400);}
.deep-list li:nth-child(1) a {background-image: url(../images/content/sub0202_img01.png); background-position: right 24px bottom; background-size: 139px auto;}
.deep-list li:nth-child(2) a {background-image: url(../images/content/sub0202_img02.png); background-position: right bottom; background-size: 175px auto;}
.deep-list li:nth-child(3) a {background-image: url(../images/content/sub0202_img03.png); background-position: right 10px bottom; background-size: 189px auto;}
.deep-list li:nth-child(4) a {background-image: url(../images/content/sub0202_img04.png); background-position: right 30px bottom; background-size: 106px auto;}
.deep-list li:nth-child(5) a {background-image: url(../images/content/sub0202_img05.png); background-position: right 30px bottom; background-size: 130px auto;}
.deep-list li:nth-child(6) a {background-image: url(../images/content/sub0202_img06.png); background-position: right 20px bottom; background-size: 145px auto;}
.deep-list li a:hover i {transform: translateX(10px);}

.deep-list.deep-list-st2 li {flex: 1 1 calc(25% - 12px);}
.deep-list.deep-list-st2 li a {height: 300px;}
.deep-list.deep-list-st2 li:nth-child(2n) a {background-color: var(--primary200);}
.deep-list.deep-list-st2 li.pink a {background-color: var(--secondary100);}
.deep-list.deep-list-st2 li.pink a *[class^="cate-"] {background-color: var(--secondary400);}
.deep-list.deep-list-st2 li.yellow a {background-color: var(--cate5);}
.deep-list.deep-list-st2 li.yellow a *[class^="cate-"] {background-color: var(--point400);}
.deep-list.deep-list-st2 li:nth-child(2n) i {color: var(--primary500);}
.deep-list.deep-list-st2 li.pink i {color: var(--secondary400);}
.deep-list.deep-list-st2 li.yellow i {color: var(--point400);}
.deep-list.deep-list-st2 li:nth-child(1) a {background-image: url(../images/content/sub0310-ico01.png); background-position: right bottom; background-size: 159px auto;}
.deep-list.deep-list-st2 li:nth-child(2) a {background-image: url(../images/content/sub0310-ico02.png); background-position: right 8px bottom; background-size: 144px auto;}
.deep-list.deep-list-st2 li:nth-child(3) a {background-image: url(../images/content/sub0202_img03.png); background-position: right 5px bottom; background-size: 162px auto;}
.deep-list.deep-list-st2 li:nth-child(4) a {background-image: url(../images/content/sub0310-ico03.png); background-position: right bottom; background-size: 154px auto;}
.deep-list.deep-list-st2 li:nth-child(5) a {background-image: url(../images/content/sub0202_img04.png); background-position: right 15px bottom; background-size: 106px auto;}
.deep-list.deep-list-st2 li:nth-child(6) a {background-image: url(../images/content/sub0202_img05.png); background-position: right bottom; background-size: 123px auto;}
.deep-list.deep-list-st2 li:nth-child(7) a {background-image: url(../images/content/sub0310-ico04.png); background-position: right 10px bottom; background-size: 145px auto;}
.deep-list.deep-list-st2 li:nth-child(8) a {background-image: url(../images/content/sub0310-ico05.png); background-position: right 9px bottom; background-size: 130px auto;}

.setp-list {display: flex; align-items: center; gap: 25px; background-color: var(--gray-f5); border-radius: 100px;}
.setp-list li {flex: 1; position: relative; padding: 10px; color: var(--gray800); text-align: center; border-radius: 100px;}
.setp-list li::after {content: ''; position: absolute; right: -20px; top: 50%; width: 9px; height: 17px; background: url("data:image/svg+xml,%3Csvg width='9' height='17' viewBox='0 0 9 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.750001 0.75L7.75 8.33333L0.750001 15.9167' stroke='%235C656D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / contain; transform: translateY(-50%);}
.setp-list li:last-child:after {display: none;}
.setp-list li em {display: none; font-size: 15px; border-radius: 100px;}
.setp-list li span { font-size: 18px;}
.setp-list li.active {color: #fff; background-color: var(--primary500);}
.setp-list li.active em {display: inline-block; margin-right: 10px; padding: 5px 10px; color: var(--primary500); background-color: #fff;}

.setp-list2 {display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 20px; border-radius: 10px 10px 0 0;}
.setp-list2 li {position: relative; padding: 10px 20px; font-size: 18px; color: var(--gray-75); background-color: var(--gray-f5); border: 1px solid var(--gray-cc); border-radius: 100px;}
.setp-list2 li::after {content: ''; position: absolute; right: -20px; top: 50%; width: 8px; height: 15px; background: url("data:image/svg+xml,%3Csvg width='9' height='17' viewBox='0 0 9 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.750001 0.75L7.75 8.33333L0.750001 15.9167' stroke='%235C656D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / contain; transform: translateY(-50%);}
.setp-list2 li:last-child:before {display: none;}
.setp-list2 li:last-child:after {display: none;}
.setp-list2 li.done {color: var(--primary500); background-color: var(--primary100); border: 1px solid var(--primary100);}
.setp-list2 li.on {font-weight: 600; color: #fff; background-color: var(--primary500); border: 1px solid var(--primary500);}

.tab-st-cont {padding: 20px; border: 1px solid var(--gray-e5); border-radius: 10px;}
.tab-st-cont > div + div {margin-top: 40px;}

.done-wrap {}
.done-wrap .top span {display: flex; align-items: center; gap: 10px;}
.done-wrap .top span::before {content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--primary500); border-radius: 100%;}
.done-wrap .btn-wrap {}
.done-wrap .btn-wrap .txt-wrap {padding: 25px; background-color: var(--primary100); border-radius: 10px 10px 0 0;}
.done-wrap .btn-wrap > * {flex: 1;}
.done-wrap .btn-wrap > * .img-wrap {border-radius: 10px 10px 0 0;}
.done-wrap .btn-wrap > * .img-wrap img {width: 100%;}
.done-wrap .btn-wrap > * span {display: block; padding: 15px 25px; background-color: #fff; border: 1px solid var(--gray-e5); border-top: 0; border-radius: 0 0 10px 10px;}
.done-wrap .btn-wrap > * span i {display: inline-block; transition: transform .3s;}
.done-wrap .btn-wrap > * span i::before {font-weight: 700 !important;}
.done-wrap .btn-wrap a:hover i {transform: rotateZ(-45deg);}

.btn-cover-wrap {position: relative; height: -webkit-fill-available;}
.btn-cover {position: absolute; left: 0; top: 0; display: flex; flex-direction: column; width: 100%; height: -webkit-fill-available;}
.btn-cover .txt-wrap {height: -webkit-fill-available;}
.btn-cover-wrap:hover .btn-cover {display: none; }
.detail-btn {display: flex; flex-wrap: wrap; height: -webkit-fill-available; margin: -5px;}
.detail-btn li {flex: 1 1 33.3333%; padding: 5px;}
.detail-btn li a {display: flex; flex-direction: column; height: -webkit-fill-available;}
.detail-btn li a .txt-wrap {height: -webkit-fill-available; padding: 15px !important;}
.detail-btn li a span {padding: 10px 15px !important;}

@media only screen and (max-width: 1023px) {
	.progress-list li {flex-direction: column;}
	.progress-list li .img-wrap {max-width: 100%;}
	.progress-list li .txt-wrap {padding-top: 0; padding-bottom: 60px; padding-left: 20px;}
	.progress-list li:nth-child(1)::after {width: 100px; height: 150px;}
	.progress-list li:nth-child(2)::after {left: unset; right: 30px; width: 80px; height: 110px;}
	.progress-list li:nth-child(3)::after {width: 230px; height: 125px;}
	.progress-list li:nth-child(4)::after {left: unset; right: 10px; bottom: -40px; width: 100px; height: 130px;}
	.progress-list li:nth-child(4)::before {left: -20px; width: 55px; height: 70px;}

	.deep-list li {flex: 1 1 calc(50% - 8px);}

	.deep-list.deep-list-st2 li {flex: 1 1 calc(33.333% - 11px);}

	.btn-wrap {flex-direction: column;}
	.btn-wrap > * {width: 100%;}
	.btn-cover {display: none;}
	.btn-cover .txt-wrap {border-radius: 10px !important;}
	.btn-cover > span i {display: none !important;}
	.btn-cover-wrap {height: auto;}
	.btn-cover-wrap .detail-btn {position: relative; padding-top: 35px; height: auto;}
	.detail-btn li a {height: auto;}
	.detail-btn li a .txt-wrap {height: auto; min-height: 110px;}
	.detail-btn::before {content: '심층상담 신청'; position: absolute; left: 0; top: 5px; padding-left: 5px; font-weight: 700; font-size: 20px;}
}
@media only screen and (max-width: 767px) {
	.test-list li {flex-flow: column wrap; align-items: flex-start;}
	
	.deep-list li {flex: 1 1 100%;}

	.deep-list.deep-list-st2 li {flex: 1 1 calc(50% - 8px);}

	.setp-list {flex-flow: column wrap; background-color: transparent;}
	.setp-list li {width: 100%; background-color: var(--gray-f5);}
	.setp-list li::after {right: 50%; top: unset; bottom: -20px; transform: translate(-50%, 0) rotateZ(90deg);}

	.done-wrap .rg .txt-22 {font-size: 20px;}
	.done-wrap .rg .txt-18 {font-size: 17px;}
}
@media only screen and (max-width: 500px) {
	.deep-list li a {background-size: 100px auto !important;}
	.deep-list li:nth-child(4) a {background-size: 80px auto !important;}

	.deep-list.deep-list-st2 li {flex: 1 1 100%;}
	.deep-list.deep-list-st2 li a {height: 200px;}
	.deep-list.deep-list-st2 li:nth-child(5) a {background-size: auto 80px !important;}
	.deep-list.deep-list-st2 li:nth-child(6) a {background-size: auto 80px !important;}
	.deep-list.deep-list-st2 li:nth-child(8) a {background-size: auto 80px !important;}

	.detail-btn li {flex: 1 1 50%;}
}



/* sub03 */
.gradiant-wrap {position: relative; padding: 40px; background: linear-gradient(0deg, #FFE2AC 0%, #FFF8CD 100%); border-radius: 10px;}
.gradiant-wrap::after {content: ''; position: absolute; right: 60px; top: 20px; width: 315px; height: 280px; background: url(../images/content/cha03-img01.png) no-repeat center / contain;}
.gradiant-wrap strong {color: var(--point400);}
.gradiant-wrap p {color: var(--point700);}

.process-list1 {display: flex; justify-content: space-between; gap: 10px; width: 100%; max-width: 1000px; margin: 0 auto;}
.process-list1 li {position: relative; text-align: center;}
.process-list1 li::after {content: ''; position: absolute; right: -7vw; top: 60px; width: 15px; height: 30px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5L16 16L1.5 30.5' stroke='%237D8890' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / contain;}
.process-list1 li:last-child:after {display: none;}
.process-list1 .img-wrap {display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; margin: 0 auto; margin-bottom: 20px; background-color: var(--cate5); border-radius: 100%;}
.process-list1 li:last-child img {margin-top: 22px;}

@media only screen and (max-width: 1100px) {
	.gradiant-wrap::after {width: 245px;}
}
@media only screen and (max-width: 999px) {
	.gradiant-wrap::after {position: static; right: unset; top: unset; display: block; height: 215px; margin-top: 30px; margin-left: auto;}
}
@media only screen and (max-width: 767px) {
	.process-list1 {flex-direction: column; gap: 80px;}
	.process-list1 li::after {right: 50%; top: unset; bottom: -50px; transform: translateX(50%) rotateZ(90deg);}
}

.info-wrap1 {}
.info-wrap1 .item {flex: 1; padding: 30px 30px 30px 300px; border-radius: 20px;}
.info-wrap1 .item:first-child {background: var(--cate5) url(../images/content/sub0310-ico09.png) no-repeat left bottom / contain; border: 1px solid rgba(255, 174, 26, 0.3);}
.info-wrap1 .item:last-child {background: var(--primary100) url(../images/content/sub0310-ico10.png) no-repeat left bottom / contain; border: 1px solid var(--primary200);}

@media only screen and (max-width: 1100px) {
	.info-wrap1 .item {padding: 25px 25px 25px 250px;}
	.info-wrap1 .item:first-child {background-position: left -30px bottom;}
	.info-wrap1 .item:last-child {background-position: left -30px bottom;}
}
@media only screen and (max-width: 900px) {
	.info-wrap1 {flex-direction: column;}
}
@media only screen and (max-width: 500px) {
	.info-wrap1 .item {padding: 25px 25px 64% 25px;}
	.info-wrap1 .item:first-child {background-position: left bottom;}
	.info-wrap1 .item:last-child {background-position: left bottom;}
}

.table-list > li {display: flex; gap: 10px;}
.table-list > li + li {margin-top: 10px;}
.table-list > li .th {flex-shrink: 0; display: flex; align-items: center; width: 240px; line-height: 1.4; padding: 20px 30px; background-color: var(--primary100); border-radius: 10px;}
.table-list > li .rg {width: 100%; padding: 20px; background-color: var(--gray-f6); border-radius: 10px;}

.note-btn-wrap {}
.note-btn-wrap p {display: none;}

.state-wrap {position: relative;}
.state-wrap .state-info {display: none; position: absolute; left: -400px; bottom: 50%; width: 400px; padding: 15px; background-color: #fff; border: 1px solid var(--gray-e5); border-radius: 10px; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.05); text-align: left; transform: translateY(50%);}
.state-wrap .state-info.active {display: block;}
.state-wrap .state-info::after {content: ''; position: absolute; right: -6px; bottom: 50%; width: 10px; height: 10px; background-color: #fff; border-right: 1px solid var(--gray-e5); border-top: 1px solid var(--gray-e5); transform: translateY(50%) rotateZ(45deg);}
.state-wrap .state-info .close {position: absolute; right: 10px; top: 10px; font-size: 18px;}

.table-scroll-wrap:has(.state-wrap) {padding-bottom: 45px;}

.kcb-items {display: flex; gap: 20px; }
.kcb-items .item {flex: 1; padding: 30px; border-radius: 20px;}
.kcb-items .item:nth-child(1) {background-color: var(--cate3);}
.kcb-items .item:nth-child(2) {background-color: var(--cate2);}
.kcb-items .item:nth-child(2) strong {color: #FF7F24;}
.kcb-items .item:nth-child(3) {background-color: var(--cate1);}
.kcb-items .item:nth-child(3) strong {color: var(--state2);}

@media only screen and (max-width: 1023px) {
	/* .state-wrap .state-info {left: 120px; bottom: 50%; transform: translate(0, 50%);} */
	/* .state-wrap .state-info::after {left: -6px; bottom: 50%; transform: translate(0, 50%) rotateZ(135deg);} */

	.kcb-items {flex-direction: column;}
}
@media only screen and (max-width: 767px) {
	.table-list li .th {width: 150px; padding: 10px 20px;}
	.table-list li .rg {padding: 15px;}
}
@media only screen and (max-width: 600px) {
	.table-list > li {flex-direction: column;}
	.table-list > li + li {margin-top: 20px;}
	.table-list li .th {width: 100%;}

	.state-wrap .state-info {left: -250px; width: 250px;}
	/* .state-wrap .state-info {left: 0; bottom: 30px; width: 100%; transform: translate(0, 0);} */
	/* .state-wrap .state-info::after {left: 20px; bottom: -6px; transform: translate(0, 0) rotateZ(45deg);} */
}



/* popup */
.popup-wrap .con-tit01 {font-size: 24px;}




/* @media only screen and (max-width: 1150px) {
	.score-wrap {flex-direction: column;}
}
@media only screen and (max-width: 1023px) {
	.compare-wrap .img-wrap {display: none;}

	.doc-sec04 .chart-wrap {flex-direction: column;}
	.doc-sec04 .chart-wrap .lf {width: 100%;}

	.doc-popup .doc-sec05 {flex-direction: column;}
	.doc-popup .doc-sec05 .lf .txt-wrap {width: 100%;}
	.doc-popup .doc-sec05 .lf .txt-wrap > * {font-size: 18px;}
}
@media only screen and (max-width: 767px) {
	.split-wrap {flex-direction: column;}

	.compare-wrap .flex:has(.table-wrap) {flex-direction: column;}
	
	.item-tit {flex-wrap: wrap; padding: 8px 20px; border-radius: 25px;}
	.item-tit::before {display: none;}

	.doc-popup .doc-sec05 .lf .mid .img-wrap {display: none;}
	.deco-img::after {}
}
@media only screen and (max-width: 600px) {
	.score-wrap .item {flex-direction: column;}
	.score-wrap .item .lf {flex-flow: row wrap; justify-content: flex-start; align-items: center;}
	.score-wrap .item .lf .img-wrap {height: 45px;}
	.score-wrap .item .lf .img-wrap img {height: 100%;}
	.gauge-container {margin: 0 auto;}
}
@media only screen and (max-width: 500px) {
	.cash-flow .item {flex-direction: column;}
} */