/* PC-first (±âº» = PC) */

/* ==========================
COMMON
========================== */
:root {
	--key-color: #FFBF15;
	--text-color: #555;
}
.text-center {text-align: center;}

.kakao-page {}
.kakao-page .desc {font-size: 20px; line-height: 1.4; letter-spacing: -0.01em;}

.bubble-gray {display: inline-flex; position: relative; padding: 9px 18px; border-radius: 10px; background: #fff; font-weight: 600; font-size: 20px; line-height: 1.4; color: #555; letter-spacing: -0.02em;}
.bubble-gray:after {content:''; position: absolute; bottom: -12px; left: 50%; margin-left: -7.5px; border-left: 7px transparent solid; border-right: 7px solid transparent; border-top: 15px solid #fff;}

.kakao-page .tit-group {padding: 80px 0; background: linear-gradient(180deg, #FFEBB4 0%, rgba(255, 246, 223, 0.8) 42.59%, rgba(255, 251, 240, 0) 88.74%);}
.tit-group h3 {padding-top: 32px; font-size: 84px;font-weight: 800; line-height: 1.2; letter-spacing: -0.02em;}
.tit-group h3 em {color: var(--key-color);}

.kakao-page .kk-h4 {font-size: 32px; line-height: 1.3;}
.kakao-page .tit-group .desc {padding-top: 32px; color: #555;}
.kakao-page .kk-how {max-width: 848px; padding: 0 24px 60px; margin: 0 auto;}
.kakao-page .border-box {padding: 31px; border-radius: 20px; border: 1px solid #DBDBDB; letter-spacing: -0.01em;}
.kakao-page .border-box + .border-box {margin-top: 16px;}
.kakao-page .border-box .desc {margin: 8px 0 24px; color: #555;}
.kakao-page .border-box .kk-h5 {display: inline-flex; padding-left: 31px; background-repeat: no-repeat; background-position: left 5px; font-size: 24px; color: #333; line-height: 1.3; letter-spacing: -0.01em;
	background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.07545 3.52868C2.07545 2.72631 2.72631 2.07546 3.52868 2.07546H18.4713C19.2737 2.07546 19.9245 2.72631 19.9245 3.52868V13.2736C19.9245 14.076 19.2737 14.7268 18.4713 14.7268H16.5225C15.9495 14.7269 15.4848 15.1915 15.4848 15.7646V18.4572L12.0585 15.0308L11.9825 14.9619C11.7978 14.8106 11.5656 14.7268 11.3248 14.7268H3.52868C2.72631 14.7268 2.07545 14.076 2.07545 13.2736V3.52868ZM16.1172 4.41744C15.6914 4.03381 15.0354 4.06867 14.6518 4.49446L9.8128 9.8645C9.78693 9.83579 9.76037 9.8069 9.73375 9.77735C9.25006 9.2405 8.64865 8.57256 8.17919 8.05152C7.7956 7.62597 7.13954 7.59214 6.71381 7.97551C6.28814 8.35904 6.25349 9.0151 6.63679 9.4409C7.10616 9.96185 7.7077 10.6289 8.19135 11.1657C8.4332 11.4341 8.64532 11.6709 8.79737 11.8396C8.87327 11.9239 8.93484 11.9907 8.97674 12.0372C8.99754 12.0603 9.01341 12.0788 9.02437 12.091C9.02985 12.097 9.03474 12.102 9.03754 12.1051L9.0416 12.1092C9.23838 12.3276 9.51881 12.4527 9.8128 12.4527C10.1066 12.4526 10.3863 12.3275 10.583 12.1092L16.1932 5.88283C16.5766 5.45705 16.5429 4.80101 16.1172 4.41744ZM0 13.2736C0 15.2222 1.58007 16.8023 3.52868 16.8023H10.8951L15.7888 21.696C16.0856 21.9928 16.5321 22.0816 16.9198 21.921C17.3075 21.7604 17.5602 21.382 17.5603 20.9623V16.8023H18.4713C20.4199 16.8023 22 15.2222 22 13.2736V3.52868C22 1.58007 20.4199 0 18.4713 0H3.52868C1.58007 0 0 1.58007 0 3.52868V13.2736Z' fill='%23555555'/%3E%3C/svg%3E%0A");
}
.kakao-page .border-box .gray-bg {display: inline-flex; margin: 24px 0; padding: 6px 16px; border-radius: 5px; background: #f5f5f5; font-weight: 600; font-size: 22px; line-height: 1.3;}
.kakao-page .border-box .gray-bg span {padding-left: 0.2em; font-weight: 400;}
.kakao-page .border-box .gray-bg-note {line-height: 1.4; color: #555;}
.kakao-page .border-box div.gray-bg-note {margin: -7px 0 30px;}
.kakao-page .border-box p.gray-bg-note {margin: -9px 0 24px; font-size: 16px;}
.kakao-page .border-box .note {font-size: 14px; color: #777;}
.kakao-page .btn-kakao {justify-content: center; margin-top: 16px; padding: 10px 0; min-width: 192px; background: #222; border-radius: 4px; font-weight: 700; color: #fff; line-height: 1.4;}

.kakao-page .kk-how .kk-ol-area {display: flex; padding-left: 60px; padding-top: 32px; margin-top: 32px; border-top: 1px solid #DBDBDB; text-align: left; line-height: 1.4;}
.kakao-page .kk-how .kk-ol-area .left {width: 247px;}
.kakao-page .kk-how .kk-ol-area .left strong {font-size: 20px;}
.kakao-page .kk-how .kk-ol {line-height: 1.7;}
.kakao-page .kk-how .kk-ol > li {list-style: auto; padding-left: 2px; font-size: 18px; color: #555;}

.kakao-page .kk-ftr {max-width: 1072px; padding: 0 24px; margin: 0 auto;}
.kakao-page .kk-ftr .gray-box-area {display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin: 30px 0 60px;}
.kakao-page .kk-ftr .gray-box {background: #F8F8F8; border-radius: 20px;}
.kakao-page .kk-ftr .gray-box-area .desc {padding: 32px 0 20px; font-size: 20px; letter-spacing: -0.01em; line-height: 1.4; color: #333;}
.kakao-page .kk-ftr .gray-box-area .desc b {font-weight: 700;}
.kakao-page .kk-ftr .gray-box-area .img-area {max-width: 300px; margin: 0 auto; aspect-ratio: 300 / 310;}
.kakao-page .kk-ftr .gray-box-area .img-area img {}

.kakao-page .kk-btm {padding: 40px 0; background: #FDF8E8; font-size: 28px; line-height: 1.3; letter-spacing: -0.01em;}
.kakao-page .kk-btm em {font-weight: 700;}

/* ÅÂºí¸´ ÀÌÇÏ (1199px ÀÌÇÏ) */
@media (max-width: 1199px){

}

/* ¸ð¹ÙÀÏ ÀÌÇÏ (767px ÀÌÇÏ) */
@media (max-width: 767px) {
	.kakao-page .desc {font-size: 17px;}
	.bubble-gray {padding: 8px 12px 6px; font-size: 16px;}
	.bubble-gray:after {bottom: -10px; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #fff;}
	.kakao-page .tit-group {padding: 50px 0 45px;}
	.tit-group h3 {padding-top: 20px; font-size: 44px; line-height: 1.35;}
	.kakao-page .tit-group .desc {padding-top: 16px;}
	.kakao-page .kk-how {max-width: 800px; margin: 0 auto; padding:0 16px 40px;}
	.kakao-page .border-box {padding: 29px 31px; border-color: #E5E5E5; border-radius: 10px; }
	.kakao-page .border-box .kk-h5 {background-position: left 3px; font-size: 20px;}
	.kakao-page .border-box .note {margin: 0 -25px; font-size: 13px;}
	.kakao-page .btn-kakao {display: inline-flex !important;}
	.kakao-page .kk-how .kk-ol-area {flex-direction: column; padding-left: 0;}
	.kakao-page .kk-how .kk-ol-area .left {width: auto; padding-bottom: 8px; text-align: center;}
	.kakao-page .kk-how .kk-ol-area .left strong {font-weight: 600; font-size: 17px; }
	.kakao-page .kk-how .kk-ol {padding-left: 15px;}
	.kakao-page .kk-how .kk-ol > li {font-size: 14px;}

	.kakao-page .kk-ftr {padding: 0 16px;}
	.kakao-page .kk-h4 {font-size: 24px;}
	.kakao-page .kk-ftr .gray-box-area {grid-template-columns: repeat(1, 1fr); margin: 20px 0 40px;}
	.kakao-page .border-box .gray-bg {margin: 20px 0; font-size: 18px;}
	.kakao-page .kk-how .border-box .gray-bg-note {margin-top: -11px;}
	.kakao-page .border-box div.gray-bg-note {margin-bottom: 27px;}
	.kakao-page .border-box p.gray-bg-note {margin-bottom: 20px;}
	.kakao-page .kk-ftr .gray-box-area .desc {padding-top: 24px; font-size: 17px;}
	.kakao-page .kk-ftr .gray-box-area .img-area {max-width: 206px; aspect-ratio: 206 / 212;}
	.kakao-page .kk-ftr .gray-box-area .img-area img{width: 100%;}
	.kakao-page .kk-btm {padding: 22px 0; font-size: 20px;}
}
