@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("/css/kb/function_opt.css");
:root {
	--main-color-1: #E4C17D;
	--main-color-2: #fbf1e5;	
	--main-color-3: #bca06a;	
	--main-color-4: #c08b2b;	
	--main-color-5: #f9f4f0;
	--main-color-6: #f7f7f7;
	--main-color-7: #f3f4f6;
	--main-color-8: #AC7D26;
	--main-color-9: #fafafa;
	--main-color-10: #e5e5e5;
	--main-color-11: #d1c8c1;
	
	--font-color-1: #111111;	
	--font-color-2: #222222;	
	--font-color-3: #c08b2b;
	
	--border-color-1: #cccccc;
	--border-color-2: #e1e1e1;
	--border-color-3: #a9a9a9;
	
	--min-width: 320;
	--max-width: 1600;
	
	--fluid-vw: calc((100vw - var(--min-width) * 1px) / (var(--max-width) - var(--min-width)));
	
	--width-8: clamp(2px, calc(2px + (4 - 2) * var(--fluid-vw)), 4px);
	--width-40: clamp(20px, calc(20px + (40 - 20) * var(--fluid-vw)), 40px);
	--width-60: clamp(30px, calc(30px + (60 - 30) * var(--fluid-vw)), 60px);
	--width-80: clamp(40px, calc(40px + (80 - 40) * var(--fluid-vw)), 80px);
	--width-100: clamp(50px, calc(50px + (100 - 50) * var(--fluid-vw)), 100px);
	--width-120: clamp(60px, calc(60px + (120 - 60) * var(--fluid-vw)), 120px);	
	
	--padding-4: clamp(2px, calc(2px + (4 - 2) * var(--fluid-vw)), 4px);
	--padding-8: clamp(4px, calc(4px + (8 - 4) * var(--fluid-vw)), 8px);
	--padding-10: clamp(5px, calc(5px + (10 - 5) * var(--fluid-vw)), 10px);
	--padding-14: clamp(7px, calc(7px + (14 - 7) * var(--fluid-vw)), 14px);
	--padding-16: clamp(8px, calc(8px + (16 - 8) * var(--fluid-vw)), 16px);
	--padding-20: clamp(10px, calc(10px + (20 - 10) * var(--fluid-vw)), 20px);
	--padding-26: clamp(13px, calc(13px + (26 - 13) * var(--fluid-vw)), 26px);
	--padding-30: clamp(15px, calc(15px + (30 - 15) * var(--fluid-vw)), 30px);
	--padding-40: clamp(20px, calc(20px + (40 - 20) * var(--fluid-vw)), 40px);	
	--padding-50: clamp(25px, calc(25px + (50 - 25) * var(--fluid-vw)), 50px);	
	--padding-60: clamp(30px, calc(30px + (60 - 30) * var(--fluid-vw)), 60px);	
	
	--margin-4: clamp(2px, calc(2px + (4 - 2) * var(--fluid-vw)), 4px);
	--margin-4-: clamp(-4px, calc(-2px - (4 - 2) * var(--fluid-vw)), -4px);
	--margin-6: clamp(3px, calc(3px + (6 - 3) * var(--fluid-vw)), 6px);
	--margin-10: clamp(5px, calc(5px + (10 - 5) * var(--fluid-vw)), 10px);
	--margin-10-: clamp(-10px, calc(-5px - (10 - 5) * var(--fluid-vw)), -5px);
	--margin-20: clamp(10px, calc(10px + (20 - 10) * var(--fluid-vw)), 20px);
	--margin-20-: clamp(-20px, calc(-10px - (20 - 10) * var(--fluid-vw)), -10px);
	--margin-26-: clamp(-26px, calc(-13px - (26 - 13) * var(--fluid-vw)), -13px);
	--margin-30: clamp(15px, calc(15px + (30 - 15) * var(--fluid-vw)), 30px);
	--margin-30-: clamp(-30px, calc(-15px - (30 - 15) * var(--fluid-vw)), -15px);
	--margin-40: clamp(20px, calc(20px + (40 - 20) * var(--fluid-vw)), 40px);
	--margin-40-: clamp(-40px, calc(-20px - (40 - 20) * var(--fluid-vw)), -20px);
	--margin-50: clamp(25px, calc(25px + (50 - 25) * var(--fluid-vw)), 50px);
	--margin-60: clamp(30px, calc(30px + (60 - 30) * var(--fluid-vw)), 60px);
	--margin-80: clamp(40px, calc(40px + (80 - 40) * var(--fluid-vw)), 80px);	
	
	--gap-4: clamp(2px, 2px + (4 - 2) * var(--fluid-vw), 4px);
	--gap-8: clamp(4px, 4px + (8 - 4) * var(--fluid-vw), 8px);
	--gap-10: clamp(5px, 5px + (10 - 5) * var(--fluid-vw), 10px);
	--gap-12: clamp(6px, 6px + (12 - 6) * var(--fluid-vw), 12px);
	--gap-20: clamp(10px, 10px + (20 - 10) * var(--fluid-vw), 20px);
	--gap-24: clamp(12px, 12px + (24 - 12) * var(--fluid-vw), 24px);
	--gap-30: clamp(15px, 15px + (30 - 15) * var(--fluid-vw), 30px);
	--gap-40: clamp(20px, 20px + (40 - 20) * var(--fluid-vw), 40px);
	--gap-60: clamp(30px, 30px + (60 - 30) * var(--fluid-vw), 60px);
	
	--font-size-15: clamp(14px, 14px + (15 - 14) * var(--fluid-vw), 15px);
	--font-size-16: clamp(15px, 15px + (16 - 15) * var(--fluid-vw), 16px);
	--font-size-17: clamp(15px, 15px + (17 - 15) * var(--fluid-vw), 17px);
	--font-size-18: clamp(16px, 16px + (18 - 16) * var(--fluid-vw), 18px);
	--font-size-20: clamp(18px, 18px + (20 - 18) * var(--fluid-vw), 20px);
	--font-size-22: clamp(18px, 18px + (22 - 18) * var(--fluid-vw), 22px);
	--font-size-24: clamp(18px, 18px + (24 - 18) * var(--fluid-vw), 24px);
	--font-size-28: clamp(22px, 22px + (28 - 22) * var(--fluid-vw), 28px);
	--font-size-38: clamp(28px, 28px + (38 - 28) * var(--fluid-vw), 38px);
	--font-size-38-20: clamp(20px, 20px + (38 - 20) * var(--fluid-vw), 38px);
	--font-size-44: clamp(32px, 32px + (44 - 32) * var(--fluid-vw), 44px);
	--font-size-55: clamp(32px, 32px + (55 - 32) * var(--fluid-vw), 55px);	
	--font-size-65: clamp(40px, 40px + (65 - 40) * var(--fluid-vw), 65px);	
	--font-size-90: clamp(48px, 48px + (90 - 48) * var(--fluid-vw), 90px);	

	--border-radius-20: clamp(10px, 10px + (20 - 10) * var(--fluid-vw), 20px);
}
.pc-only { display: none !important; }
@media (min-width: 769px) { .pc-only { display: block !important; }}
.mobile-only { display: block !important; }
@media (min-width: 769px) { .mobile-only { display: none !important; }}

#function h1, #function h2, #function h3, #function h4, #function h5, #function h6, #function p, #function b, #function div, #function textarea {
	font-family: 'Pretendard', sans-serif !important;
}
.section .tit .tit_sub2 {
    color: #333;
    margin-bottom: var(--margin-60);
}
#function .tit_sub p {
    color: var(--font-color-2);
    text-align: center;
    margin-bottom: var(--margin-10);
}
#function .function-tit {
    color: var(--font-color-2);
    font-size: var(--font-size-65);
    font-weight: 700;
    margin-bottom: var(--margin-40);
    text-align: center;
}
#function .div1.info-container-area {
    background-color: var(--main-color-6);
    padding: var(--padding-40);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
}
#function .div1.info-container {
    background-color: var(--main-color-6);
    padding: var(--padding-40);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
}

#function .div3 .icon-scale {
    width: var(--width-40);
    height: var(--width-40);
    margin-right: var(--margin-20);
}
#function .div3 .title {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--font-color-2);
}
#function .div3 .line {
    position: relative;
    flex-grow: 1;
    height: 2px;
    background-color: var(--main-color-1);
    margin-left: var(--margin-20);
    margin-right: var(--margin-4);
}
#function .div3 .icon-dot {
    position: relative;
    right: 0;
    content: "";
    display: block;
    width: var(--width-8);
    height: var(--width-8);
    border-radius: 50%;
    background-color: var(--main-color-4);
}

#function .div4.concept-container-area {
    width: 100%;
}
#function .div4 .header-tit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margin-40);
    margin-bottom: var(--margin-40);
}
#function .div4 .header-tit img {
    width: var(--width-40);
    height: var(--width-40);
    margin-right: var(--margin-20);
}
#function .div4 .icon {
    font-size: 14px;
    vertical-align: middle;
    margin-right: 10px;
}
#function .div4 .icon img {
    width: var(--width-40);
    height: var(--width-40);
    margin-right: var(--margin-20);
}
#function .div4 .quotes.margin-top-80 {
    display: flex;
    position: relative;
    align-items: center;
}
#function .div4 .quotes.margin-top2-80 {
    display: flex;
    position: relative;
    align-items: center;
}
#function .div4 .quotes img {
    width: var(--width-40);
    height: var(--width-40);
    margin-right: var(--margin-6);
}
#function .div4 .quotes p {
    font-size: var(--font-size-24);
    font-weight: 700;
    margin: 5px 0;
    color: var(--font-color-2);
}

#function .div4 .quotes_smenu {
    display: flex;
    position: relative;
    align-items: center;
    margin-bottom: var(--margin-10);
}
#function .div4 .quotes_smenu img {
    width: var(--width-40);
    height: var(--width-40);
    margin-right: var(--margin-6);
}
#function .div4 .quotes_smenu p {
    font-size: var(--font-size-20);
    font-weight: 700;
    margin: 5px 0;
    color: var(--font-color-2);
}
#function .div4 .content-section.flex {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-60);
}
#function .div4 .content-section-in {
	width: 100%;
}
#function .div4 .p-description {
    background-color: var(--main-color-4);
    color: #ffffff;
    padding: var(--margin-10) var(--margin-40) var(--margin-10) var(--margin-20);
    font-size: var(--font-size-20);
    font-weight: 600;
    display: inline-flex;
    border-radius: 8px;
    margin-bottom: var(--margin-20);
    justify-content: flex-start;
}
#function .div4 .list-items p {
    display: flex;
    font-size: var(--font-size-18);
    color: var(--font-color-2);
    margin-bottom: var(--margin-20);
    position: relative;
    padding-left: var(--padding-20);
    align-items: flex-start;
    flex-wrap: wrap;
    font-weight: 400;
    letter-spacing: 0.01em;
    background-color: transparent;
    margin-left: var(--margin-10-);
}
#function .div4 .list-items p.margin-bottom-0 {
    margin-bottom: 0;
}
#function .div4 .list-items p:last-child {
    margin-bottom: 0;
}
#function .div4 .sub-content p {
    font-size: var(--font-size-18);
    font-weight: 400;
    color: var(--font-color-2);
    letter-spacing: 0.01em;
}
#function .div4 .law-table th {
    font-size: var(--font-size-17);
    background-color: var(--main-color-2);
    color: #333;
    padding: var(--padding-16);
    border-bottom: 1px solid var(--main-color-11);
    font-weight: 600;
}
#function .div4 .law-table td {
    background-color: #ffffff;
    padding: var(--padding-14);
    border-bottom: 1px solid var(--main-color-11);
    color: var(--font-color-2);
    font-weight: 400;
}
#function .div4 .law-table td:first-child {
  font-weight: 600;
}
#function .div4 .law-table a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #666666;
}
#function .div4 .law-table tbody tr:hover {
  background-color: #fafafa;
}
#function .div4 .card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 40px 30px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    transition: transform 0.3s ease;
    flex-direction: column;
    align-items: center;
}
#function .div4 .card:hover {
    transform: translateY(-5px);
}
#function .div4 .icon-card {
    margin-bottom: var(--margin-30);
    width: var(--width-80);
    height: var(--width-80);
    background-color: var(--main-color-2);
    border-radius: 50%;
    padding: var(--padding-14);
}
#function .div4 .title-card {
    font-size: var(--font-size-22);
    color: var(--font-color-2);
    margin-bottom: var(--margin-20);
    font-weight: 700;
}
#function .div4 .value {
    font-size: var(--font-size-55);
    color: var(--main-color-4);
    font-weight: 700;
    margin-bottom: var(--margin-20);
}
#function .div4 .description-card {
    font-size: var(--font-size-16);
    color: var(--font-color-2);
    font-weight: 400;
    margin-bottom: var(--margin-40);
	letter-spacing: 0.03em;
}
#function .div4 .button-arr {
    display: flex;
    background-color: var(--main-color-4);
    color: #fff;
    text-decoration: none;
    padding: var(--padding-10) var(--padding-30);
    border-radius: 25px;
    font-size: var(--font-size-16);
    font-weight: 600;
    transition: background 0.2s;
    align-items: center;
}
#function .div4 .button-arr:hover {
    background-color: var(--main-color-8);
}
#function .div4 .button-arr span {
    margin-left: var(--margin-6);
	font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
}

#function .div4 .content-section.column::before {
    content: '';
    position: absolute;
    left: 60px;
    top: 120px;
    bottom: 120px;
    width: 2px;
    border-left: 2px dashed var(--main-color-4);
    z-index: 1;
}
#function .div4 .step-item-area {
    width: 100%;
    display: flex;
    position: relative;
    z-index: 2;
    align-items: stretch;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
#function .div4 .step-item {
    display: flex;
    align-items: center;
    gap: var(--gap-30);
    position: relative;
    z-index: 2;
}
/*#function .div4 .step-item::before {
    content: '';
    position: absolute;
    left: 60px;
    top: 60px;
    bottom: 60px;
    width: 2px;
    border-left: 2px dashed var(--main-color-4);
    z-index: -1;
}*/
#function .div4 .step-item-dot {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}
#function .div4 .step-item-dot::after {
    content: '';
    position: absolute;
    left: 55px;
    width: 12px;
    height: 12px;
    background-color: var(--main-color-4);
    border-radius: 50%;
    z-index: 1;
}
#function .div4 .icon-wrapper.c11 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 240deg, var(--main-color-4) 240deg 360deg);
}
#function .div4 .icon-wrapper.c12 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 120deg, var(--main-color-4) 120deg 360deg);
}
#function .div4 .icon-wrapper.c13 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 0deg, var(--main-color-4) 0deg 360deg);
}
#function .div4 .icon-wrapper.c21 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 270deg, var(--main-color-4) 270deg 360deg);
}
#function .div4 .icon-wrapper.c22 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 180deg, var(--main-color-4) 180deg 360deg);
}
#function .div4 .icon-wrapper.c23 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 90deg, var(--main-color-4) 90deg 360deg);
}
#function .div4 .icon-wrapper.c24 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 0deg, var(--main-color-4) 0deg 360deg);
}
#function .div4 .icon-wrapper.c61 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 300deg, var(--main-color-4) 300deg 360deg);
}
#function .div4 .icon-wrapper.c62 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 240deg 0deg, var(--main-color-4) 240deg 360deg);
}
#function .div4 .icon-wrapper.c63 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 180deg 0deg, var(--main-color-4) 180deg 360deg);
}
#function .div4 .icon-wrapper.c64 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 120deg 0deg, var(--main-color-4) 120deg 360deg);
}
#function .div4 .icon-wrapper.c65 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 60deg 0deg, var(--main-color-4) 60deg 360deg);
}
#function .div4 .icon-wrapper.c66 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 0deg, var(--main-color-4) 0deg 360deg);
}
#function .div4 .icon-wrapper.c51 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 288deg, var(--main-color-4) 288deg 360deg);
}
#function .div4 .icon-wrapper.c52 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 216deg, var(--main-color-4) 216deg 360deg);
}
#function .div4 .icon-wrapper.c53 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 144deg, var(--main-color-4) 144deg 360deg);
}
#function .div4 .icon-wrapper.c54 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 72deg, var(--main-color-4) 72deg 360deg);
}
#function .div4 .icon-wrapper.c55 {
    flex-shrink: 0;
    width: var(--width-120);
    height: var(--width-120);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    padding: 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(#ffffff, #ffffff), conic-gradient(var(--main-color-2) 0deg 0deg, var(--main-color-4) 0deg 360deg);
}
#function .div4 .icon-wrapper svg {
    width: var(--width-100);
    height: var(--width-100);
    fill: none;
    stroke: var(--font-color-2);
    stroke-width: 2;
    background-color: var(--main-color-5);
    border-radius: 50%;
    padding: var(--padding-16);
}
#function .div4 .step-number {
    position: relative;
    background-color: var(--main-color-9);
    flex-shrink: 0;
    display: flex;
    width: 130px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px 0 0 8px;
}
#function .div4 .step-number::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--main-color-9);
    z-index: 10;
}
#function .div4 .step-number .step-label {
    font-size: var(--font-size-16);
    font-weight: 700;
    color: var(--main-color-4);
}

#function .div4 .step-number .num {
    font-size: var(--font-size-44);
    font-weight: 700;
    color: var(--main-color-4);
    line-height: 1;
    margin-top: var(--margin-4);
}

#function .div4 .step-number2 {
    position: relative;
    background-color: var(--main-color-2);
    flex-shrink: 0;
    display: flex;
    width: 130px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px 0 0 8px;
}
#function .div4 .step-number2::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--main-color-2);
    z-index: 10;
}
#function .div4 .step-number2 .step-label {
    font-size: var(--font-size-16);
    font-weight: 700;
    color: var(--main-color-4);
}

#function .div4 .step-number2 .num {
    font-size: var(--font-size-44);
    font-weight: 700;
    color: var(--main-color-4);
    line-height: 1;
    margin-top: var(--margin-4);
}


#function .div4 .description-area {
    margin-bottom: var(--margin-20);
    padding: var(--padding-30);
    background-color: var(--main-color-2);
    border-radius: var(--border-radius-20);
}
#function .div4 .content-section-area .content-section {
    margin-top: 0;
}
#function .div4 .content-section.margin-top-0 {
    margin-top: 0;
}
#function .div4 .faq-container {
    max-width: 100%;
    margin: 0 auto;
}
#function .div4 .faq-item {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color-2);
    padding: var(--margin-30) 0 var(--margin-30) var(--margin-40);
}
#function .div4 .faq-item:last-child {
    border-bottom: none;
}
#function .div4 .faq-row {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
#function .div4 .faq-row .symbol {
    display: flex;
    color: var(--font-color-1);
    font-size: var(--font-size-38);
    font-weight: 500;
    width: var(--width-80);
    height: 100%;
    font-family: 'Georgia', serif;
    border-right: solid 2px var(--border-color-3);
    padding: var(--padding-10) 0;
}
#function .div4 .answer .symbol {
    color: var(--main-color-4);
    border-right: solid 2px var(--main-color-4);
}
#function .div4 .faq-row .text {
    padding-left: var(--padding-40);
    font-size: 15px;
}
#function .div4 .question .text {
    width: calc(100% - var(--width-80));
    font-weight: 700;
    color: var(--font-color-2);
    font-size: var(--font-size-20);
}
#function .div4 .answer .text {
    font-weight: 400;
    width: calc(100% - var(--width-100));
    color: var(--font-color-2);
    font-size: var(--font-size-18);
	letter-spacing: 0.01em;
}
	
	
@media (max-width: 1700px) {

}

@media (max-width: 1500px) {

}

@media (max-width: 1300px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 1024px) {

}

@media (max-width: 860px) {	

}

@media all and (max-width: 768px){
	#function .div4 .content-section.magin-top-40 {
		grid-template-columns: 1fr;
	}
	#function .div4 .content-section.flex {
		grid-template-columns: 1fr;
	}
	#function .div4 .icon-wrapper.c11, #function .div4 .icon-wrapper.c12, #function .div4 .icon-wrapper.c13, #function .div4 .icon-wrapper.c21, #function .div4 .icon-wrapper.c22, #function .div4 .icon-wrapper.c23, #function .div4 .icon-wrapper.c24 {
		display: none;
	}
	#function .div4 .step-item::before {
		display: none;
	}
	#function .div4 .content-section.column::before {
		display: none;
	}
	#function .div4 .step-item-dot::after {
		display: none;
	}
	#function .div4 .step-item-area {
		flex-direction: column;
	}
	#function .div4 .content-card {
		border-radius: 0px 0px 8px 8px;
	}
	#function .div4 .step-number {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
		flex-direction: row;
		padding: var(--padding-16) 0;
		gap: var(--gap-12);
	}
	#function .div4 .step-number::after {
		top: auto;
		right: 50%;
		bottom: -30px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid var(--main-color-2);
	}
	#function .div4 .faq-row {
		align-items: stretch;
	}
	#function .div4 .faq-row .symbol, #function .div4 .answer .symbol {
		border-right: solid 0px;
		padding: 0;
		font-size: 24px;
	}
	#function .div4 .faq-row .text {
		padding-left: 0;
	}
	#function .div4 .faq-item {
		gap: 10px;
		display: inline-flex;
		flex-direction: column;
		padding-left: 0;
	}
	#function .section .inner {
        padding: 20px 0;
    }
}

@media all and (max-width: 620px){

}

@media all and (max-width: 560px){

}

@media all and (max-width: 500px){
}

@media all and (max-width: 520px){

}

@media all and (max-width: 500px){

}

@media all and (max-width: 490px){

}

@media all and (max-width: 450px){

}

@media all and (max-width: 400px){

}

@media all and (max-width: 370px){

}