:root {
    --spacing-width : calc(100% - 50px);
}

/* GLOBAL */
body {display: flex; flex-direction: column; height: 100dvh;}
header * {font-family: "Inter" , sans-serif;}
header { position: fixed; width: 100%; height: 130px; background-color: transparent; z-index: 1002; transition: all 0.25s;}
header .menu_list {display: flex; align-items: center; justify-content: center; gap: 70px;  width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s;}
header .menu_list li {}
header .menu_list li > a { color: #3C3B3B; font-size: 24px; font-weight: 500; }
header .menu_list li > a span {color: #D83225; font-weight: 500; }
header .menu_list li.on > a {font-weight: 700; color: #D83225;}
header .menu_list li.on > a::before {content: ""; display: inline-block; margin-right: 6px; width: 23px; height: 20px; background: url(/img/header_check.svg) no-repeat center / contain;}
header.stick { height: 75px; background: #FFF; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.20);}
header.stick:has(.hamburger.is-open) {background-color: transparent; box-shadow: none;}
header.stick:has(.hamburger.is-open) .mob_logo {opacity: 0; visibility: hidden;}
header .mob_logo { opacity: 0; visibility: hidden; transition: opacity 0.4s; position: absolute; left: 19px; top: 50%; transform: translateY(-50%); width: 139px;}
header .mob_logo > img {width: 100%; object-fit: contain;}

footer { width: 100%; padding: 65px 0 70px; background: #474747;  text-align: center;}
footer .footer_logo {width: 100%; max-width: 165px; margin: 0 auto; margin-bottom: 32px;}
footer .footer_logo > img {width: 100%;}
footer .info_list {display: flex; justify-content: center;  flex-wrap: wrap;  width: var(--spacing-width); max-width: 800px; margin: 0 auto; margin-bottom: 30px;}
footer .info_list li { color: #FFF; font-family: "Inter" , sans-serif; font-size: 18px; line-height: 180%; word-break: keep-all;}
footer .info_list li::after {content: "|"; display: inline-block; margin: 0 10px;}
footer .info_list li:last-of-type::after {display: none;}
footer .copyright { color: #FFF; text-align: center; font-family: "Inter" , sans-serif; font-size: 18px; line-height: 160%; }
footer .cap { color: #FFF; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 400; line-height: 160%; }

/* 토스트 알림창 */
.tostPop {position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 35px; color: #FFF; text-align: center; font-family: 'Pretendard' , sans-serif; font-size: 16px; font-weight: 400; border-radius: 12px; word-break: keep-all; background: rgba(0, 0, 0, 0.46); opacity: 0; pointer-events: none; transition: .3s; z-index: 1004;}
.tostPop.on { opacity: 1; bottom: 100px;}


.jw-startin {flex-grow: 1;}
.container {padding-top: 130px; width: 100%; margin: 0 auto;}
.page_btn { display: flex; align-items: center; justify-content: center; width: fit-content; height: 90px; margin: 0 auto; padding: 0px 57px; border-radius: 45.299px; background: #D83225; box-shadow: 0 5.373px 5.373px 0 rgba(0, 0, 0, 0.25); }
.page_btn > p {white-space: nowrap; flex-shrink: 0; color: #FFF; font-family: "Inter" , sans-serif; font-size: 39px; font-weight: 700; }
.page_btn > em {display: inline-block; flex-shrink: 0; width: 60px; aspect-ratio: 1; margin-left: 10px; background-color: #D83225; border-radius: 50%; background-image: url(/img/btn_arrow.svg); background-repeat: no-repeat; background-position: center; background-size: 33px;}
.quotes_txt { position: relative; width: fit-content; margin: 0 auto; color: #3C3B3B; text-align: center; font-weight: 700; line-height: 160%; letter-spacing: -0.08em; }
.quotes_txt::before {content: ""; display: block; width: 103px; aspect-ratio: 1; position: absolute; top: 50%; left: -53px; transform: translate( -100% , -50%); background: url(/img/quotes_text_start.png) no-repeat center / cover;}
.quotes_txt::after { content: ""; display: block; width: 103px; aspect-ratio: 1; position: absolute; top: 50%; right: -53px; transform: translate( 100% , -50%); background: url(/img/quotes_text_end.png) no-repeat center / cover;}
.quotes_txt > span {color: #D83225; font-weight: 700; line-height: 160%; letter-spacing: -0.08em;}
.quotes_txt > em { display: inline-block; vertical-align: top; margin-left: 4px; font-family: "Inter",sans-serif; font-size: 27px; font-style: normal; font-weight: 500; line-height: 160%; }

.hamburger { display: none; position: absolute; top: 50%; right: 19px; transform: translateY(-50%); width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 1001; }
.hamburger span { display: block; width: 100%; height: 2px; background: #333; border-radius: 10px; transition: all 0.3s ease; transform-origin: center; }
.hamburger span + span { margin-top: 5px; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 998; }
.mobile-nav *  {font-family: "Inter" , sans-serif;}
.mobile-nav { position: fixed; top: 0; right: -100%; width: 400px; height: 100%; background: #fff; z-index: 999; padding: 60px 0 40px; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; }
.mobile-nav.is-open { right: 0; }

.mobile-nav .menu_list { display: flex; flex-direction: column; gap: 0; }
.mobile-nav .menu_list li {position: relative; padding-left: 52px;}
.mobile-nav .menu_list li + li {margin-top: 40px;}
.mobile-nav .menu_list li > a { color: #3C3B3B; font-size: 24px; font-weight: 500; }
.mobile-nav .menu_list li > a span {color: #D83225; font-weight: 500; }
.mobile-nav .menu_list li.on > a {font-weight: 700; color: #D83225;}
.mobile-nav .menu_list li.on > a::before { content: ""; position: absolute; left: 23px; top: 50%; transform: translateY(-50%); display: inline-block; margin-right: 6px; width: 23px; height: 20px; background: url(/img/header_check.svg) no-repeat center / contain; vertical-align: middle; }

.fixed_wrap { width: calc(100% - 50px); max-width: 1690px; position: fixed; bottom: 2dvh; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 2;}
.fixed_wrap .top_btn { position: absolute; bottom: 0; right: 20px; pointer-events: auto; width: 87px; aspect-ratio: 1; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.fixed_wrap .top_btn.visible { opacity: 1; visibility: visible; }
.fixed_wrap .top_btn > img {width: 100%;}

.jw-startin .reference {width: calc(100% - 50px); max-width: 1560px; margin: 0 auto; margin-top: 150px; margin-bottom: 96px; padding: 60px 0 70px; background-color: #fff; border-radius: 30px;}
.jw-startin .reference * {font-family: "Inter" , sans-serif;}
.jw-startin .reference .inner {width: 100%; max-width: 1250px; margin: 0 auto; padding: 0 25px;}
.jw-startin .reference .ti { margin-bottom: 40px; color: #3C3B3B; font-size: 30px; font-weight: 700; line-height: 130%; }
.jw-startin .reference ul > li { padding-left: 15px; text-indent: -15px; color: #3C3B3B; font-size: 16px; font-weight: 400; line-height: 130%;}
.jw-startin .reference ul > li + li {margin-top: 20px;}

.br_hidden {display: block;}
.br_1600 {display: none;}
.br_1024 {display: none;}
.br_768 {display: none;}
.br_650 {display: none;} 
.br_500 {display: none;}
.br_400 {display: none;}

@media screen and (max-width: 1600px) {
    .quotes_txt > em {font-size: 20px;}
    .quotes_txt::before {width: 60px; left: -22px;}
    .quotes_txt::after {width: 60px; right: -22px;}
    
    .jw-startin .reference .inner {padding: 0 35px;}

    footer .info_list li {font-size: 16px;}
    footer .copyright {font-size: 16px;}
    footer .cap {font-size: 15px;}

}

@media screen and (max-width: 1024px) {
    header .menu_list {gap: 40px;}
    header .menu_list li > a {font-size: 20px;}
    header .menu_list li.on > a::before {width: 18px; height: 15px;}

    .fixed_wrap .top_btn {width: 60px;}
    
}

@media (max-width: 768px) {
    header { padding: 0 20px; height: 56px; display: flex; align-items: center; }
    header.stick { height: 65px;}
    header.stick .mob_logo { opacity: 1; visibility: visible;}

    header .menu_list { display: none; }
    .hamburger { display: flex; flex-direction: column; }
    
    .container {padding-top: 60px;}

    footer {padding: 40px 0 60px;}
    footer .footer_logo {max-width: 120px; margin-bottom: 25px;}
    footer .info_list {flex-wrap: wrap; padding: 0 20px;}
    footer .info_list li {font-size: 15px;}
    footer .info_list li:nth-of-type(1) {width: 100%;}
    footer .info_list li:last-of-type {width: 100%;}
    footer .copyright {font-size: 15px;} 
    footer .cap {font-size: 14px;} 
    
}

@media (max-width: 650px) {
    .quotes_txt > em {font-size: 15px;}
    .quotes_txt::before {width: 40px; left: -10px; }
    .quotes_txt::after {width: 40px; right: -10px; }

    .jw-startin .reference { margin-top: 100px; padding: 40px 0 50px; border-radius: 15px;}
    .jw-startin .reference .inner {padding: 0 40px;}
    .jw-startin .reference .ti {font-size: 22px; margin-bottom: 20px;}
    .jw-startin .reference ul > li {font-size: 14px; word-break: break-all;}
    
    
}


@media (max-width: 500px) {
    .quotes_txt > em {font-size: 15px;}
    .mobile-nav {width: 100%;}
    .fixed_wrap .top_btn {width: 50px; right: 0px;}

    .jw-startin .reference {padding: 30px 0 40px;}
    .jw-startin .reference .ti {font-size: 20px;}
    .jw-startin .reference .inner {padding: 0 25px;}

    footer .info_list {margin-bottom: 25px;}
    footer .info_list li {font-size: 14px;}
    footer .info_list li::after {margin: 0 6px;}

    footer .copyright {font-size: 14px;}
    footer .cap {font-size: 13px;} 
}


/* KV */
.jw-startin {background-color: #F8FAFC; background-image: url(/img/main_bg.png); background-repeat: no-repeat; background-size: 1500px; background-position: 100% 0%;}
.jw-startin section {overflow-x: hidden; width: 100%; margin: 0 auto;}

.sec_kv {height: auto; padding-top: 100px;}
.sec_kv .title_area {display: flex; justify-content: center; text-align: center; width: var(--spacing-width); max-width: 1655px; margin: 0 auto;}
.sec_kv .title_area img {width: 100%; max-width: 946px; margin: 0 auto;}
.sec_kv .title_area .left {width: 100%; max-width: 694px; padding-bottom: 42px;}
.sec_kv .title_area .left > img { width: 100%; max-width: 670px; margin: 0 auto;}
.sec_kv .title_area .right {width: 100%; max-width: 950px;}

.sec_kv .title_area .main_title p { position: relative; color: #3C3B3B; font-family: "62570"; font-size: 130px; font-style: normal; font-weight: 400; letter-spacing: -0.06em; }
.sec_kv .title_area .main_title p::after {content: ""; display: block; width: 106px; aspect-ratio: 1; position: absolute; left: calc(50% - 106px); top: -70px; background: url(/img/main_check.svg) no-repeat center / contain;}
.sec_kv .title_area .main_title p > span { color: #D83225; font-family: "62570"; font-weight: 400; letter-spacing: -0.06em; }

.sec_kv .title_area .left {}
.sec_kv .title_area .left > p { color: #3C3B3B; font-family: "Noto Serif KR" , sans-serif; font-size: 32px; font-weight: 500; line-height: 150%; letter-spacing: -0.055em; }
.sec_kv .title_area .left > p span {color: #D83225; font-family: "Noto Serif KR" , sans-serif; font-weight: 700; line-height: 150%; letter-spacing: -0.055em;}

.sec_kv .title_area .left > p.one {margin-bottom: 2px;}
.sec_kv .title_area .left > p.two { padding-top: 40px; margin-bottom: 27px; font-size: 29px;}

.sec_kv .text_box { padding: 74px 0 102px; text-align: center; background-color: #fff;}
.sec_kv .text_box .quotes_txt { margin: 0 auto; font-size: 30px; font-weight: 500; line-height: 180%; letter-spacing: -0.05em;}

@media screen and (max-width: 1600px) {
    .sec_kv .title_area .main_title p {font-size: 95px;}
    .sec_kv .title_area .left > p {font-size: 25px;}
    .sec_kv .title_area .left > p.two {font-size: 23px;}
    .sec_kv .title_area .main_title p::after { width: 90px; left: calc(50% - 80px); top: -55px;}
    .sec_kv .title_area .right > img {height: 100%; object-fit: contain; object-position: bottom;}
    .sec_kv .text_box .quotes_txt {font-size: 24px;}

    
    .page_btn {height: 74px;}
    .page_btn > p {font-size: 28px; }
}
@media screen and (max-width: 1024px) {
    .sec_kv .title_area {flex-wrap: wrap;}
    .sec_kv .title_area .main_title p {font-size: 111px;}
    .sec_kv .title_area .left {max-width: 580px;}
    .sec_kv .title_area .left > p {font-size: 28px;}
    .sec_kv .title_area .left > p.one {margin-bottom: 18px;}
    .sec_kv .title_area .left > p.two {font-size: 25px; padding-top: 30px;}
    .sec_kv .title_area .main_title p::after { left: calc(50% - 90px);}
    .sec_kv .title_area .right {max-width: 763px;}
    
    .sec_kv .text_box {padding: 50px 0 60px;}
    .sec_kv .text_box .quotes_txt {font-size: 20px;}
    
    .page_btn {height: 76px; padding: 0 50px;}
    .page_btn > em {width: 50px; background-size: 28px;}
    .page_btn > p {font-size: 32px; }

    .sec_kv .text_box .quotes_txt::before { left: 10px;}
    .sec_kv .text_box .quotes_txt::after { right: 10px;}
    
}

@media screen and (max-width: 768px) {
    .sec_kv {padding-top: 60px;}
}

@media screen and (max-width: 650px) {

    .sec_kv .title_area {width: 100%;}
    .sec_kv .title_area .main_title p {font-size: 61px;}
    .sec_kv .title_area .left {max-width: 320px;}
    .sec_kv .title_area .left > p {font-size: 20px;}
    .sec_kv .title_area .left > p.one {margin-bottom: 14px;}
    .sec_kv .title_area .left > p.two {font-size: 16px; padding-top: 20px;}
    .sec_kv .title_area .main_title p::after { width: 50px; left: calc(50% - 50px); top: -35px;}
    .sec_kv .title_area .right {max-width: 763px;}
    
    .sec_kv .text_box .quotes_txt {font-size: 16px;}
    .sec_kv .text_box .quotes_txt::before { left: 0px;}
    .sec_kv .text_box .quotes_txt::after { right: 0px;}

    .page_btn {height: 44px; padding: 0 30px; padding-right: 25px; box-shadow: 0 2.62px 2.62px 0 rgba(0, 0, 0, 0.25);}
    .page_btn > em {width: 30px; background-size: 16px; margin-left: 5px;}
    .page_btn > p {font-size: 18px; }
}

@media screen and (max-width: 420px) {
    .sec_kv .text_box .quotes_txt::before { left: 5px;}
    .sec_kv .text_box .quotes_txt::after { right: 5px;}
}

.main .navi_bar { width: var(--spacing-width); max-width: 1560px; margin: 0 auto; padding: 32px; border-radius: 90px; background: #D83225;}
.main .navi_bar ul {display: flex; align-items: center; justify-content: center; gap: 69px;}
.main .navi_bar ul li {cursor: pointer; color: #FFF; font-family: "Inter" , sans-serif; font-size: 35px; font-weight: 500; line-height: 160%;}
.main .navi_bar ul li.on {font-weight: 600; border-bottom: 4px solid #fff;}

.navi_select { display: none; position: relative; width: 100%; text-align: center; }
.navi_select * {font-family: "Inter" , sans-serif; }
.select-trigger { display: flex; align-items: center; justify-content: center; gap: 10px; background: #D83225; color: #fff; border: none; border-radius: 50px; padding: 13px 22px; cursor: pointer; width: calc(100% - 40px); margin: 0 auto; transition: background 0.2s, box-shadow 0.2s; user-select: none; outline: none; }
.select-trigger.open { border-radius: 22px 22px 0 0; }
.select-trigger .arrow { transition: transform 0.25s cubic-bezier(.4,0,.2,1); flex-shrink: 0; opacity: 0.9; }
.select-trigger.open .arrow { transform: rotate(180deg); }
.select-label {color: #fff; font-weight: 600; font-size: 20px;}
.select-dropdown { position: absolute; top: 100%; left: 0; right: 0; width: calc(100% - 40px); margin: 0 auto; background: #fff; border-radius: 0 0 20px 20px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s; z-index: 100; border: 1px solid #D83225; border-top: none; }
.select-dropdown.open { max-height: 320px; opacity: 1; }
.select-option { padding: 13px 22px; color: #444; font-size: 18px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, padding-left 0.15s; border-top: 1px solid rgba(217,48,37,0.1); }
.select-option:first-child { border-top: 1px solid rgba(217,48,37,0.12); }

@media (max-width: 768px) {
    .navi_bar    { display: none; }
    .navi_select { display: block; }
}

/* 그래프 박스 */
.graph_box {width: var(--spacing-width); max-width: 1558px; margin-inline: auto; margin-top: 85px; padding: 70px 20px; border-radius: 40px; background: #FFF; text-align: center;}
.graph_box * {font-family: "Inter", sans-serif;}
.graph_box > .ti { margin-bottom: 50px; color: #3C3B3B; font-size: 40px; font-weight: 500; line-height: 160%; }
.graph_box > .ti span {color: #D83225; font-weight: 700;}
.graph_box > .ti em {display: inline-block; vertical-align: top; margin-left: 2px; font-family: "Inter",sans-serif; font-size: 22px; font-style: normal; font-weight: 600; line-height: 160%;} 
.graph_box .chart_wrap {display: flex; justify-content: center;}
.graph_box .name_list { display: flex; flex-direction: column; flex-shrink: 0; width: 227px; margin-right: 2em; }
.graph_box .name_list p { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #3C3B3B; font-size: 24px; font-weight: 400; line-height: 140%; letter-spacing: -1.2px; }
.graph_box .name_list p span { color: #3C3B3B; font-weight: 500; }
.graph_box .chart { flex: 1; max-width: 1040px;}
.graph_box .group { display: flex; flex-direction: column; justify-content: center; }
.graph_box .bar-row { display: flex; align-items: center; margin-bottom: 6px; }
.graph_box .bar-row:last-child { margin-bottom: 0; }
.graph_box .bar-wrap { flex: 1; position: relative; height: 45px; }
.graph_box .bar { height: 100%; border-radius: 0 10px 10px 0; position: absolute; left: 0; top: 0; }
.graph_box .bar-label { position: absolute; top: 50%; transform: translateY(-50%); color: #3C3B3B; font-size: 26px; font-weight: 500; white-space: nowrap; pointer-events: none; }
.graph_box .bar.color0 {background: #D83225;}
.graph_box .bar.color1 {background: #4B4B4B;}

.graph_box .tag_wrap {display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 30px; margin-bottom: 70px;}
.graph_box .tag_wrap .tag {display: flex; align-items: center;}
.graph_box .tag_wrap .tag > span {display: inline-block; color: #3C3B3B; font-size: 18px; font-weight: 400; line-height: 160%; }
.graph_box .tag_wrap .color { width: 40px; height: 20px; margin-right: 5px; }
.graph_box .tag_wrap .color.one {background: #D83225;}
.graph_box .tag_wrap .color.two {background: #4B4B4B;}

.graph_box > .desc { margin-bottom: 1.5em; color: #3C3B3B; font-size: 26px; font-weight: 400; line-height: 160%; }
.graph_box > .desc span {font-weight: 500; color: #3C3B3B;}
.graph_box > .desc em {display: inline-block; vertical-align: top; margin-left: 2px; font-family: "Inter",sans-serif; font-size: 18px; font-style: normal; font-weight: 600; line-height: 160%;}
.graph_box > .cap { color: #3C3B3B; font-size: 15px; font-weight: 400; line-height: 140%; }

@media screen and (max-width: 1600px) {
    .graph_box > .ti { font-size: 30px; margin-bottom: 2em;}
    .graph_box > .ti em {font-size: 20px;}
    
    .graph_box .name_list {margin-right: 1em;}
    .graph_box .name_list p {font-size: 22px;}
    .graph_box .bar-label {font-size: 22px;}

    .graph_box > .desc {font-size: 22px;}
    .graph_box > .desc span {}
    .graph_box > .desc em {font-size: 15px;}
    .graph_box > .cap {}

}

@media screen and (max-width: 1024px) {
    .graph_box {padding:50px 20px; margin-top: 50px;}
    .graph_box ~ .desc_wrap {padding-top: 50px !important;}
    .graph_box > .ti {font-size: 24px;}
    .graph_box > .ti em {font-size: 16px;}
    .graph_box .name_list {width: fit-content;}
    .graph_box .name_list p {font-size: 18px;}
    .graph_box .bar-label {font-size: 18px;}
    .graph_box .bar-wrap {height: 40px;}
    
    .graph_box .tag_wrap {margin-bottom: 40px; padding-top: 20px;}
    .graph_box .tag_wrap .tag > span {font-size: 15px;}
    .graph_box > .desc {font-size: 18px;}
    .graph_box > .desc em {font-size: 15px;}
    .graph_box > .cap {font-size: 14px;}
    
}

@media screen and (max-width: 768px) {
    .graph_box > .ti {font-size: 20px;}
    .graph_box > .ti em {font-size: 14px;}
    .graph_box .name_list p {font-size: 16px;}
    .graph_box .bar-label {font-size: 16px;}
    .graph_box .bar-wrap {height: 35px;}
    .graph_box .bar {border-radius: 0 6px 6px 0;}
    
    .graph_box .tag_wrap {margin-bottom: 40px; padding-top: 20px;}
    .graph_box .tag_wrap .tag > span {font-size: 13px;}
    .graph_box > .desc {font-size: 16px;}
    .graph_box > .desc em {font-size: 12px;}
    .graph_box > .cap {font-size: 14px;}
    
}

@media screen and (max-width: 650px) {
    .graph_box {padding: 40px 20px; border-radius: 10px;}
    .graph_box .name_list p {justify-content: flex-start; font-size: 15px;}
    .graph_box .name_list p .br_hidden_650 {display: none;}
    .graph_box > .cap {letter-spacing: normal; font-size: 13px;}
    .graph_box > .desc .br_hidden_650 {display: none;}
    .graph_box .bar-label {font-size: 15px;}
    .graph_box .tag_wrap {gap: 10px;}
    .graph_box .tag_wrap .color { width: 20px; height: 10px;}
}

@media screen and (max-width: 410px) {
    .graph_box {padding: 40px 10px;}
    .graph_box .chart_wrap {overflow-x: auto;}
    .graph_box .chart {min-width: 310px;}
    .graph_box .name_list {min-width: 310px;}
    .graph_box .name_list p {font-size: 14px;}
    .graph_box > .desc {font-size: 15px;}

}



/* 메인 페이지 */
.main .sec_kv .title_area .left { margin: 0 -40px 0 20px; }

.main .sec_01 {padding-top: 125px; padding-bottom: 175px;}
.main .sec_01 > .ti { margin-bottom: 56px; color: #3C3B3B; text-align: center; font-family: "Inter" , sans-serif; font-size: 64px; font-weight: 600; line-height: 160%; }

.main .sec_01 .quotes_txt {margin-top: 111px; margin-bottom: 84px; font-size: 48px;}
.main .sec_01 > .img_wrap { display: flex; align-items: flex-start; justify-content: center; background: rgba(0, 113, 188, 0.05); padding: 35px 0;}
.main .sec_01 > .img_wrap .img_box { position: relative; padding: 0px 60px; text-align: center;}
.main .sec_01 > .img_wrap .img_box > img {width: 100%; max-width: 360px;}
.main .sec_01 > .img_wrap .img_box + .img_box::before {content: ""; display: block; position: absolute; top: 8%; left: 0; width: 2px; height: 74%; background: url(/img/sec_01_line.png) no-repeat top / cover;}
.main .sec_01 > .img_wrap .img_box > p { padding-top: 19px; color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 20px; font-weight: 500; line-height: 160%; }

.main .desc_wrap {padding-top: 70px;}
.main .desc_wrap > p { color: #3C3B3B; text-align: center; font-family: "Inter" , sans-serif; font-size: 26px; font-style: normal; font-weight: 400; line-height: 160%; }
.main .desc_wrap > p + p {margin-top: 44px;}
.main .desc_wrap > p span { color: #3C3B3B; font-family: "Inter" , sans-serif; font-style: normal; font-weight: 500; line-height: 160%; }
.main .desc_wrap > p em {display: inline-block; vertical-align: top; margin-left: 4px; font-family: "Inter",sans-serif; font-size: 17px; font-style: normal; font-weight: 400; line-height: 160%;}

.main .sec_01 .content_box {width: var(--spacing-width); max-width: 1234px; margin: 0 auto; margin-top: 104px; border-radius: 30px; overflow: hidden; background: #FFF;}
.main .sec_01 .content_box .head {padding: 24px 0 17px; text-align: center; background: #D83225;}
.main .sec_01 .content_box .head > p { color: #FFF; text-align: center; font-family: "Inter" , sans-serif; font-size: 38px; font-style: normal; font-weight: 600; line-height: 160%; }
.main .sec_01 .content_box .flex_wrap {display: flex; align-items: center; justify-content: center; gap: 40px; padding: 12px 0;}
.main .sec_01 .content_box .flex_wrap > .img_box {width: 100%; max-width: 388px;} 
.main .sec_01 .content_box .flex_wrap > .img_box > img {width: 100%;}
.main .sec_01 .content_box .flex_wrap .txt_01 { color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 33px; font-weight: 500; line-height: 140%; }

.main .sec_01 .content_box .flex_wrap .txt_02 {margin-top: -2px; color: #FB4D43; font-size: 88px; font-weight: 900; line-height: 160%; }
.main .sec_01 .content_box .flex_wrap .txt_02 span { color: #FB4D43; font-size: 66px; font-weight: 600; line-height: 160%; }
.main .sec_01 .content_box .flex_wrap .txt_02 span + span {font-size: 51px;}
.main .sec_01 .content_box .flex_wrap .txt_02 em {display: inline-block; vertical-align: text-top; margin-left: 4px; color: #FB4D43; font-family: "Inter",sans-serif; font-size: 22px; font-style: normal; font-weight: 400; line-height: 160%;}

.main .sec_01 .people_img { width: var(--spacing-width); max-width: 1234px; margin: 0 auto; margin-top: 67px; border-radius: 30px; overflow: hidden; background: #FFF; }
.main .sec_01 .people_img > img {width: 100%;}



.main .sec_02 { }
.main .sec_02 .quotes_txt { margin-top: 154px; font-size: 48px; }
.main .sec_02 .flex_wrap { display: flex; justify-content: space-between; row-gap: 30px; flex-wrap: wrap;}
.main .sec_02 .flex_wrap li.card {width: calc(100% / 4 - 15px);}

.main .board_box { width: var(--spacing-width); max-width: 1400px; margin: 0 auto; margin-top: 98px; margin-bottom: 130px;}
.main .board_box .head {text-align: center; padding-bottom: 37px;}
.main .board_box .head > p { font-family: "Inter" , sans-serif; color: #3C3B3B; font-size: 45px; font-weight: 600; line-height: 160%; }
.main .board_box .head > p em {display: inline-block; vertical-align: top; margin-left: 4px; font-family: "Inter",sans-serif; font-size: 22px; font-style: normal; font-weight: 600; line-height: 160%;}
.main .board_box .flex_wrap {padding-top: 54px; border-top: 1px solid #8f8f8f;}
.main .board_box .flex_wrap li {position: relative; min-height: 342px; padding: 0 30px; padding-top: 48px; padding-bottom: 35px; border-radius: 24px; border: 1px solid #A9A9A9; background: #FCFFFF; }
.main .board_box .flex_wrap li * { font-family: "Inter" , sans-serif;}
.main .board_box .flex_wrap .ti { margin-bottom: 42px; color: #3C3B3B; font-size: 25px; font-weight: 700; line-height: normal; }
.main .board_box .flex_wrap .caption { display: flex; align-items: center; min-height: 4.5em; color: #3C3B3B; font-size: 18px; font-weight: 500; line-height: 160%; word-break: keep-all;}
.main .board_box .flex_wrap .desc { margin-top: 18px; color: #D83225; font-size: 20px; font-weight: 500; line-height: 140%; word-break: keep-all;}

.main .board_box .flex_wrap .img_box {position: absolute; width: 100%; top: 20px; right: 35px;}
.main .board_box .flex_wrap .img_box > img {width: 100%;}

.main .board_box .flex_wrap li:nth-of-type(1) .img_box {max-width: 90px; top: 19px; right: 32px;}
.main .board_box .flex_wrap li:nth-of-type(2) .img_box {max-width: 90px; top: 39px; right: 32px;}  
.main .board_box .flex_wrap li:nth-of-type(3) .img_box {max-width: 104px; top: 25px; right: 25px;} 
.main .board_box .flex_wrap li:nth-of-type(4) .img_box {max-width: 74px; top: 32px; right: 37px;} 
.main .board_box .flex_wrap li:nth-of-type(5) .img_box {max-width: 106px; top: 20px; right: 25px;}

.main .board_box .flex_wrap li.card.full { display: flex; width: 100%; padding: 59px 37px;}
.main .board_box .flex_wrap li.card.full .img_box {position: static; margin-left: 40px;}
.main .board_box .flex_wrap li.card.full .ti_wrap { display: flex; align-items: center; width: 100%; max-width: 285px; border-right: 1px solid #DAE5ED;}
.main .board_box .flex_wrap li.card.full .ti {margin-bottom: 0;}
.main .board_box .flex_wrap li.card.full .flex_box {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 37px 0 27px; padding-left: 37px; padding-right: 25px;}
.main .board_box .flex_wrap li.card.full .flex_box .cap {width: 100%;  margin-top: 60px; color: #3C3B3B; text-align: center; font-size: 15px; font-weight: 400; line-height: 140%; }
.main .board_box .flex_wrap li.card.full .txt_wrap {width: 100%; max-width: 307px;}
.main .board_box .flex_wrap li.card.full .txt_wrap > div + div { margin-top: 30px;}
.main .board_box .flex_wrap li.card.full .caption {min-height: auto;}
.main .board_box .flex_wrap li.card.full .table_wrap {width: calc((100% - 307px) - 20px);}

.main .board_box .table_wrap {  overflow-x: auto;}
.main .board_box .table_wrap .table {min-width: 350px; border-radius: 30px; overflow: hidden; border: 1px solid #D3D3D3;}
.main .board_box .table_wrap .head { padding-bottom: 19px; color: #3C3B3B; text-align: center; font-size: 24px; font-weight: 600; line-height: 160%; }
.main .board_box .table_wrap .head em { display: inline-block; vertical-align: top; margin-left: 4px; font-family: "Inter",sans-serif; font-size: 15px; font-style: normal; font-weight: 600; line-height: 160%; }

.main .board_box .thead * {font-family: "Inter" , sans-serif; font-size: 18px; color: #fff; font-weight: 600; line-height: 160%; }
.main .board_box .thead .tr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; background-color: #4B4B4B; }
.main .board_box .thead .th { display: flex; align-items: center; justify-content: center; padding: 27px 5px; color: #fff; font-weight: 600; text-align: center; border-right: 1px solid #94D1FF; }
.main .board_box .thead .th:last-child { border-right: none; }
.main .board_box .tbody * { color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 18px; font-weight: 500; line-height: 160%; }
.main .board_box .tbody .tr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-top: 1px solid #DAE5ED; background-color: #fff; }
.main .board_box .tbody .td { display: flex; align-items: center; justify-content: center; padding: 27px 5px; text-align: center; }
.main .board_box .tbody .td.table_ti { color: #3C3B3B; font-weight: 500; line-height: normal; background-color: #F8FAFC;}
.main .board_box .tbody .td:last-child { border-right: none; }



.main .sec_03 .quotes_txt { margin-top: 141px; font-size: 48px; }

.main .sec_03 .board_box {max-width: 1200px; margin-bottom: 171px;}
.main .sec_03 .board_box > .flex_wrap {display: flex; align-items: flex-start; justify-content: center; gap: 30px; padding: 0 30px; padding-top: 54px; border-top: 1px solid #8f8f8f;}
.main .sec_03 .board_box > .flex_wrap > .item {}
.main .sec_03 .board_box > .flex_wrap > .item > p { word-break: keep-all; margin-top: 25px; color: #232323; text-align: center; font-family: "Inter" , sans-serif; font-size: 26px; font-weight: 700; line-height: normal; }
.main .sec_03 .board_box > .flex_wrap > .item > .img_box { position: static; max-width: none !important; border-radius: 40px; border: 1px solid #A9A9A9; overflow: hidden; }
.main .sec_03 .board_box > .flex_wrap > .item > .img_box img {width: 100%;}



.main .sec_04 .quotes_txt { margin-top: 141px; font-size: 48px; }
.main .sec_04 .page_btn { margin-top: 94px; padding: 0 10px; padding-right: 47px; height: 74px; border: 4px solid #D83225; background: #FCFFFF; box-shadow: 0 4.179px 4.179px 0 rgba(0, 0, 0, 0.25); }
.main .sec_04 .page_btn > p { margin-left: 20px; color: #3C3B3B; font-size: 31px; font-weight: 700; }
.main .sec_04 .page_btn > em {margin-left: 0; width: 46px;}

@media screen and (max-width: 1600px) {
    .jw-startin.main section .quotes_txt {font-size: 30px; margin-top: 111px;}
    .jw-startin.main .sec_kv .quotes_txt { margin-top: 0; margin-bottom: 0;}

    

    .main .sec_01 {padding-bottom: 120px;}
    .main .sec_01 > .ti {font-size: 54px;}
    .main .sec_01 .quotes_txt {font-size: 30px;}
    .main .sec_01 .content_box .head > p {font-size: 30px;}
    .main .sec_01 .content_box .flex_wrap {gap: 20px;}
    .main .sec_01 .content_box .flex_wrap .txt_01 {font-size: 28px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 {font-size: 70px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span {font-size: 45px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span + span {font-size: 38px;}


    .main .board_box .head > p {font-size: 40px;}
    .main .board_box .flex_wrap .ti {font-size: 22px;}
    .main .board_box .flex_wrap .caption {font-size: 16px;}
    .main .board_box .flex_wrap .desc {font-size: 18px;}

    .main .board_box .thead * ,
    .main .board_box .tbody * {font-size: 16px;}
    
    .main .board_box .flex_wrap li.card.full {padding: 40px 15px; padding-left: 30px;}
    .main .board_box .flex_wrap li.card.full .img_box {margin-left: 20px;}
    .main .board_box .flex_wrap li.card.full .txt_wrap {max-width: 250px;}
    .main .board_box .flex_wrap li.card.full .ti_wrap {max-width: 230px;}
    .main .board_box .flex_wrap li.card.full .table_wrap {width: calc((100% - 250px) - 40px);}


    .main .sec_04 .page_btn {height: 64px; padding: 0 6px; padding-right: 30px;}
    .main .sec_04 .page_btn > p {font-size: 25px;}



    .main .desc_wrap > p {font-size: 22px;}
    .main .desc_wrap > p em {font-size: 15px;}

    .main .navi_bar ul {gap: 40px;}
    .main .navi_bar ul li {font-size: 24px;}

    
    .br_hidden {display: none;}
    .br_1600 {display: block;}
}

@media screen and (max-width: 1200px) {
    .main .board_box .flex_wrap .img_box {max-width: 80px !important; aspect-ratio: 1; top: 20px !important; right: 20px !important;}
    .main .board_box .flex_wrap .img_box > img {height: 100%; object-fit: contain;}
    .main .board_box .flex_wrap .caption {font-size: 15px;}
    .main .board_box .flex_wrap .desc {font-size: 16px;}
    
    .main .board_box .flex_wrap li.card.full .ti_wrap {max-width: 200px;}
    .main .board_box .flex_wrap li.card.full .flex_box {padding-left: 25px; padding-right: 20px;}
    .main .board_box .flex_wrap li.card.full .txt_wrap {display: flex; max-width: none; justify-content: space-between; margin-bottom: 60px; gap: 20px;}
    .main .board_box .flex_wrap li.card.full .txt_wrap > div + div {margin-top:  0;}
    .main .board_box .flex_wrap li.card.full .caption { min-height: 4.8em; align-items: center;}
    .main .board_box .flex_wrap li.card.full .table_wrap {width: 100%; padding: 20px; border-radius: 30px; background: #F8FAFC; }
    .main .board_box .flex_wrap li.card.full .flex_box .cap {margin-top: 25px; font-size: 14px;}
}


@media screen and (max-width: 1024px) {
    .jw-startin.main section .quotes_txt {font-size: 25px; margin-top: 90px;}
    .jw-startin.main .sec_kv .quotes_txt {font-size: 20px;}
    .main .sec_kv .title_area .left { margin: 0;}
    .main .sec_01 {padding-bottom: 80px;}
    .main .sec_01 > .ti {font-size: 38px;}
    .main .sec_01 > .img_wrap .img_box {padding: 0 40px;}
    .main .sec_01 > .img_wrap .img_box > img {max-width: 300px;}
    .main .sec_01 > .img_wrap .img_box > p {font-size: 16px;}
    .main .sec_01 > .img_wrap .img_box + .img_box::before {top: 5%;}
    .main .sec_01 .content_box .head > p {font-size: 25px;}
    .main .sec_01 .content_box .flex_wrap {gap: 20px;}
    .main .sec_01 .content_box .flex_wrap > .img_box {max-width: 300px;}
    .main .sec_01 .content_box .flex_wrap .txt_box {width: 100%; max-width: 300px;}
    .main .sec_01 .content_box .flex_wrap .txt_01 {font-size: 20px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 {font-size: 50px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span {font-size: 35px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span + span {font-size:25px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 em {font-size: 17px;}
    
    .main .sec_02 .flex_wrap {grid-template-columns: repeat(2, 1fr); padding-top: 28px;}
    
    .main .board_box {margin-top: 80px;}
    .main .board_box .head {padding-bottom: 25px;}
    .main .board_box .head > p {font-size: 32px;}
    .main .board_box .head > p em {font-size: 18px;}
    .main .board_box .flex_wrap li {min-height: auto;}
    .main .board_box .flex_wrap li.card {width: calc(100% / 2 - 15px);}
    .main .board_box .flex_wrap li.card.full {flex-wrap: wrap;}
    .main .board_box .flex_wrap li.card.full .ti_wrap { border: none; max-width: none;}
    .main .board_box .flex_wrap li.card.full .flex_box {padding-left: 0; padding-right: 0;}

    .main .board_box .flex_wrap .caption {font-size: 16px;}
    .main .board_box .flex_wrap .desc {font-size: 16px;}
    
    .main .board_box .table_wrap {}
    .main .board_box .thead * {font-size: 18px;}
    .main .board_box .tbody * {font-size: 18px;}
    
    .main .sec_03 .board_box {margin-bottom: 120px;}
    .main .sec_03 .board_box > .flex_wrap {padding: 0 20px; padding-top: 28px; gap: 20px;}
    .main .sec_03 .board_box > .flex_wrap > .item > p {font-size: 22px;}
    
    .main .desc_wrap > p {font-size: 18px;}
    
    .main .navi_bar {padding: 20px 32px;}
    .main .navi_bar ul li {font-size: 18px;}
    .main .navi_bar ul li.on {border-width: 2px;}
    
    .br_1024 {display: block;}
}


@media screen and (max-width: 768px) {
    .main .board_box {margin-bottom: 80px;}
    .main .board_box .table_wrap .head {font-size: 20px;}
    .main .board_box .table_wrap .head em {font-size: 13px;}

    
    .main .board_box .flex_wrap .img_box {max-width: 100px !important;}
    .main .board_box .flex_wrap li.card.full {padding: 0 30px; padding-top: 20px;}
    .main .board_box .flex_wrap li.card.full .flex_box {padding-top: 0px;}
    .main .board_box .flex_wrap li.card.full .ti_wrap {justify-content: space-between;}
    .main .board_box .flex_wrap li.card.full .txt_wrap {flex-wrap: wrap; margin-bottom: 30px;}
    .main .board_box .flex_wrap li.card.full .txt_wrap > div {width: 100%;}

    .main .board_box .flex_wrap li.card.full .flex_box .cap {font-size: 13px;}

}


@media screen and (max-width: 650px) {
    .jw-startin.main section .quotes_txt {font-size: 22px; margin-top: 70px;}
    
    .main .sec_01 { padding-top: 60px; padding-bottom: 80px;}
    .main .sec_01 > .ti {font-size: 28px; margin-bottom: 40px;}
    
    .main .sec_01 > .img_wrap .img_box {padding: 0 20px; min-height: 200px;}
    .main .sec_01 > .img_wrap .img_box + .img_box::before {height: 65%; top: 20px;}

    .main .sec_01 .content_box {margin-top: 50px;}
    .main .sec_01 .content_box .head > p {font-size: 20px;}
    .main .sec_01 .content_box .flex_wrap {gap: 5px; padding: 20px 10px;}
    .main .sec_01 .content_box .flex_wrap > .img_box {max-width: 150px;}
    .main .sec_01 .content_box .flex_wrap .txt_box {width: 100%; max-width: 200px;}
    .main .sec_01 .content_box .flex_wrap .txt_01 {font-size: 16px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 {font-size: 38px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span {font-size: 25px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span + span {font-size: 16px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 em { font-size: 12px;}

    .main .sec_01 .people_img {padding-top: 50px;}
    .main .sec_01 .people_img > img {width: 120%; margin-left: -10%;}

    .main .sec_02 .flex_wrap {padding-top: 20px; gap: 15px;}
    .main .board_box {margin-top: 60px;}
    .main .board_box .head {padding-bottom: 20px;}
    .main .board_box .head > p {font-size: 24px;}
    .main .board_box .head > p em {font-size: 13px;}
    .main .board_box .flex_wrap li {}
    .main .board_box .flex_wrap .ti {font-size: 18px; min-width: 85px;}
    .main .board_box .flex_wrap li.card {width: 100%; padding: 0 20px; padding-top: 48px; padding-bottom: 35px;}
    .main .board_box .flex_wrap li.card.full {padding: 0 20px; padding-top: 20px;}
    .main .board_box .flex_wrap .caption {font-size: 15px; align-items: flex-start;}
    .main .board_box .flex_wrap .desc {font-size: 15px;}
     
    .main .board_box .thead * {font-size: 15px; word-break: keep-all;}
    .main .board_box .thead .th { display: flex; align-items: center; justify-content: center; padding: 15px 10px;}
    .main .board_box .tbody * {font-size: 15px; word-break: keep-all;}
    .main .board_box .tbody .td { display: flex; align-items: center; justify-content: center; padding: 15px 5px;}

    .main .sec_03 .board_box { margin-bottom: 80px;}
    .main .sec_03 .board_box > .flex_wrap { padding: 0 10px; padding-top: 20px; gap: 10px;}
    .main .sec_03 .board_box > .flex_wrap > .item > .img_box {border-radius: 20px;}
    .main .sec_03 .board_box > .flex_wrap > .item > p {font-size: 18px; margin-top: 15px;}

    .main .sec_04 .page_btn { border-width: 2px; margin-top: 50px; height: 40px; padding: 0 4px; padding-right: 20px; box-shadow: 0 2.62px 2.62px 0 rgba(0, 0, 0, 0.25);}
    .main .sec_04 .page_btn > p {font-size: 18px; margin-left: 15px;}
    .main .sec_04 .page_btn > em {width: 30px;}

    .main .desc_wrap {padding-top: 40px;}
    .main .desc_wrap > p {font-size: 16px;}
    .main .desc_wrap > p + p {margin-top: 30px;}
    .main .desc_wrap > p em {font-size: 13px;}


    
    .br_650 {display: block;}
    .br_hidden_650 {display: none;}
    
}

@media screen and (max-width: 500px) {
    .jw-startin.main section .quotes_txt {font-size: 20px; margin-top: 50px; margin-bottom: 40px;}

    .jw-startin.main .sec_kv .quotes_txt {font-size: 17px;}
    
    .main .sec_01 > .ti {margin-bottom: 30px;}
    .main .sec_01 .content_box .head > p {font-size: 18px;}
    .main .sec_01 .content_box .flex_wrap .txt_box {min-width: 168px;}
    .main .sec_01 .content_box .flex_wrap .txt_01 {font-size: 15px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 {font-size: 34px; white-space: nowrap;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span {font-size: 22px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 span + span {font-size: 15px;}
    .main .sec_01 .content_box .flex_wrap .txt_02 em { font-size: 10px;}
    .main .sec_01 .content_box .flex_wrap > .img_box {max-width: 120px;}
    .main .sec_01 .people_img {margin-top: 40px;}
    .main .sec_01 > .img_wrap .img_box > p {font-size: 14px;}
    
    .main .sec_02 .desc_wrap {padding-top: 0;}
    .main .sec_02 .flex_wrap {grid-template-columns: repeat(1, 1fr);}
    .main .board_box .head {padding-bottom: 15px;}
    .main .board_box .head > p {font-size: 22px;}
    .main .board_box .flex_wrap .ti {}
    .main .board_box .flex_wrap .caption {margin-top: 0;}
    .main .board_box .flex_wrap li.card.full .table_wrap {background-color: transparent; padding: 10px 0;}
    .main .board_box .flex_wrap li.card.full .flex_box .cap {margin-top: 15px;}
    
    .main .board_box .table_wrap .head {font-size: 18px; padding-bottom: 15px;}
    .main .board_box .table_wrap .head em {font-size: 13px;}
    
    .main .board_box .table_wrap .table {border-radius: 15px; min-width: auto;}
    .main .board_box .thead * {font-size: 13px;}
    .main .board_box .thead .th { padding: 15px 5px;}
    .main .board_box .tbody * {font-size: 13px;}
    .main .board_box .tbody .td {padding: 15px 5px;}
    

    
    
    .main .sec_03 .desc_wrap {padding-top: 0;}
    .main .sec_03 .board_box > .flex_wrap {padding: 0; padding-top: 20px;}
    .main .sec_03 .board_box > .flex_wrap > .item > p {font-size: 15px;}

    .main .sec_04 .desc_wrap {padding-top: 0;}
    
    .br_hidden_500 {display: none;}
    .br_500 {display: block;}
}
@media screen and (max-width: 400px) {
    .jw-startin.main section .quotes_txt {font-size: 18px;}
    .jw-startin.main .sec_kv .quotes_txt {font-size: 16px;}

    .main .sec_01 .content_box .head > p {font-size: 16px;}
    .main .board_box .flex_wrap .img_box {max-width: 90px !important;}
    .main .sec_01 > .img_wrap .img_box + .img_box::before {height: 55%;}

    
}


/* step 공용 */
.sec_kv .step_title {text-align: center;}
.sec_kv .step_title > p { position: relative; display: inline-block; color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 96px; font-weight: 700; line-height: 140%; }
.steps .sec_kv {padding-top: 0;}
.steps .sec_kv .step_title > p::after {content: ""; display: block; width: 82px; aspect-ratio: 1 / 1.05; position: absolute; left: calc(0% - 48px); top: -38px; background: url(/img/step_kv_titlecheck.png) no-repeat center / contain;}
.steps .sec_kv .title_area .left {margin: 0; padding-top: 138px;}
.steps .sec_kv .title_area .left > p.one { font-size: 40px; font-weight: 600; margin-bottom: 25px; }
.steps .sec_kv .title_area .left > p.two {font-size: 32px; padding-top: 28px;}
.steps .sec_kv .title_area .right > img {max-width: none;}

.steps .quotes_txt {font-size: 48px;}
.steps .quotes_txt > em { color: #3C3B3B; display: inline-block; vertical-align: top; margin-left: 4px; font-family: "Inter", sans-serif; font-size: 30px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: -1.5px; }
.user_area {  background: rgba(0, 113, 188, 0.05);}


/* step_01 시작 전 당부 */
.step_01 .sec_kv .title_area .right {max-width: 907px;}
.step_01 .sec_01 .board_box { width: var(--spacing-width); max-width: 1440px; margin: 0 auto;}
.step_01 .sec_01 .board_box .table_wrap { margin-top: 70px; margin-bottom: 187px; overflow-x: auto;}
.step_01 .sec_01 .board_box .table_wrap .table {min-width: 380px; border-radius: 30px; overflow: hidden; border: 1px solid #D3D3D3;}
.step_01 .sec_01 .board_box .thead * {font-family: "Inter" , sans-serif; font-size: 24px; color: #fff; font-weight: 600; line-height: 160%; }
.step_01 .sec_01 .board_box .thead .tr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; background-color: #4B4B4B; }
.step_01 .sec_01 .board_box .thead .th { padding: 21px 16px; color: #fff; font-weight: 600; text-align: center; border-right: 1px solid #94D1FF; }
.step_01 .sec_01 .board_box .thead .th:last-child { border-right: none; }
.step_01 .sec_01 .board_box .tbody * { color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 22px; font-weight: 500; line-height: 160%; }
.step_01 .sec_01 .board_box .tbody .tr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-top: 1px solid #D3D3D3; background-color: #fff; }
.step_01 .sec_01 .board_box .tbody .tr:nth-of-type(odd) { background-color: #F3F3F3;}
.step_01 .sec_01 .board_box .tbody .td { display: flex; align-items: center; justify-content: center; padding: 23px 16px; text-align: center; word-break: keep-all;}
.step_01 .sec_01 .board_box .tbody .td.ti { background-color: #D83225; color: #fff; font-size: 24px;}
.step_01 .sec_01 .board_box .tbody .td:last-child { border-right: none; }
.step_01 .sec_01 .board_box .table_wrap em { display: inline-block; vertical-align: super; margin-left: 2px; color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }


.step_01 .sec_01 .board_box .table_wrap > .pc {display: block;}
.step_01 .sec_01 .board_box .table_wrap > .mob { display: none; }
.step_01 .sec_01 .board_box .table_wrap > .desc { margin-top: 32px; color: #3C3B3B; text-align: center; font-family: "Inter", sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: 140%; }
.step_01 .sec_01 .board_box .table_wrap > .cap { margin-top: 10px; margin-right: 15px; text-align: right; color: #3C3B3B; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 400; line-height: 140%; }


.step_01 .sec_01 .box_list { width: 100%; max-width: 650px; margin: 0 auto;}
.step_01 .sec_01 .box_list > li {text-align: center; border-radius: 10px; background-color: #fff; overflow: hidden;}
.step_01 .sec_01 .box_list > li + li { margin-top: 32px; }
.step_01 .sec_01 .box_list > li * { font-family: "Inter", sans-serif; word-break: keep-all;}

.step_01 .sec_01 .box_list > li > .ti_box { padding: 10px; background: #D83225; }
.step_01 .sec_01 .box_list > li > .ti_box > p { color: #FFF; font-size: 18px; font-weight: 600; line-height: 160%; }
.step_01 .sec_01 .box_list > li .body {padding: 16px 16px 20px;}
.step_01 .sec_01 .box_list > li .body > p { padding-bottom: 16px; color: #3C3B3B; font-size: 16px; font-weight: 500; line-height: 150%; letter-spacing: -0.8px; }
.step_01 .sec_01 .box_list > li .flex_wrap {display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid #D3D3D3;}
.step_01 .sec_01 .box_list > li .inner_box { width: calc(50% - 6px); padding: 8px 5px; border-radius: 4px; background: #F3F3F3; }
.step_01 .sec_01 .box_list > li .inner_box > p { margin-bottom: 3px; color: #3C3B3B; font-size: 15px; font-weight: 500; line-height: 140%; letter-spacing: -0.75px; }
.step_01 .sec_01 .box_list > li .inner_box .val { color: #D83225; font-size: 17px; font-weight: 600; line-height: 140%; letter-spacing: -0.85px; }




.step_01 .sec_02 .quotes_txt {margin-bottom: 85px;}

.step_01 .app-wrapper { width: calc(100% - 30px); max-width: 1200px; height: 1020px; display: flex; flex-direction: column; overflow: hidden; margin: 0 auto; padding: 64px 0 90px; }
.step_01 .progress-bar { display: flex; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; }
.step_01 .progress-bar .dot { width: 14px; height: 14px; border-radius: 50%; background: #D9D9D9; transition: all 0.3s ease; }
.step_01 .progress-bar .dot.active { background: #D83225; }
.step_01 .progress-bar .dot.done { /* background: #48BB78; */ }

/* Swiper */
.step_01 .swiper { flex: 1; width: 100%; overflow: hidden; }
.step_01 .swiper-wrapper { height: 100%; }
.step_01 .swiper-slide { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.step_01 .swiper-slide * {font-family: "Inter", sans-serif;} 
.step_01 .slide-category { padding-top: 20px; margin-bottom: 24px; text-align: center; color: #4B4B4B; font-size: 22px; font-weight: 600; line-height: 160%; }
.step_01 .slide-question { margin-bottom: 24px; color: #3C3B3B; text-align: center; font-size: 42px; font-style: normal; font-weight: 600; line-height: 160%; }
.step_01 .slide-question span { color: #3C3B3B; font-weight: 600; line-height: 160%; }
.step_01 .slide-question > em { color: #3C3B3B; display: inline-block; vertical-align: top; margin-left: 4px; font-size: 30px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: -1.5px; }
.step_01 .slide-question .mob_hidden {display: inline-block;}
.step_01 .slide-question .br_hidden {display: block;}

.step_01 .user_area .options { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 690px; padding-top: 86px; margin: 0 auto; border-top: 1px solid #8f8f8f; }
.step_01 .user_area .option-btn { position: relative; width: 100%; max-width: 580px; margin: 0 auto; padding: 20px 20px; border-radius: 20px; border: 3px solid transparent; background: #fff; color: #3C3B3B; font-size: 24px; font-weight: 400; line-height: 140%; cursor: pointer; transition: all 0.2s ease; }
.step_01 .user_area .option-btn .mob_br {display: none;}
.step_01 .user_area .option-btn > span { color: #3C3B3B; font-weight: 500; }
.step_01 .user_area .option-btn:hover { border: 3px solid #D83225; border-color: #D83225; background: linear-gradient(0deg, rgba(216, 50, 37, 0.20) 0%, rgba(216, 50, 37, 0.20) 100%), #FFF; }
.step_01 .user_area .option-btn.selected { border: 3px solid #D83225; border-color: #D83225; background: linear-gradient(0deg, rgba(216, 50, 37, 0.20) 0%, rgba(216, 50, 37, 0.20) 100%), #FFF; color: #D83225; font-weight: 500; }
.step_01 .user_area .option-btn.selected > span {color: #D83225; font-weight: 600;}
.step_01 .user_area .option-btn.selected::before { content: ''; position: absolute; left: 16px; bottom: 5px; width: 70px; aspect-ratio: 1 / 1.2; background: url(/img/user_check.png) no-repeat center / contain; }
.step_01 .user_area #options-2 {padding-top: 62px;}

.step_01 .user_area .next_wrap { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 8px; flex-shrink: 0; }
.step_01 .user_area .next-btn { display: flex; align-items: center; background: transparent; border: none; color: #3C3B3B; font-family: "Inter", sans-serif; font-size: 28px; font-weight: 500; line-height: 160%; cursor: pointer; transition: color 0.2s; }
.step_01 .user_area .next-btn.active { /* color: #3C3B3B; */ }
.step_01 .user_area .next-btn .arrow { display: inline-block; flex-shrink: 0; width: 46px; aspect-ratio: 1; margin-left: 10px; background-color: #CBD5E0; border-radius: 50%; background-image: url(/img/btn_arrow.svg); background-repeat: no-repeat; background-position: center; background-size: 24px; }
.step_01 .user_area .next-btn.active .arrow { background-color: #D83225; }

/* Summary slide */
.step_01 .summary-slide { padding: 20px 28px 15px; }
.step_01 .summary-slide .slide-category {margin-bottom: 2px;}
.step_01 .sec_02 .summary-slide .quotes_txt { margin-bottom: 50px; color: #3C3B3B; font-size: 30px; font-weight: 500; line-height: 160%; letter-spacing: -0.05em; }
.step_01 .sec_02 .summary-slide .quotes_txt::before {width: 40px; left: -10px; top: calc(50% - 15px); }
.step_01 .sec_02 .summary-slide .quotes_txt::after {width: 40px; right: -10px; top: calc(50% - 15px);}
.step_01 .summary-title { text-align: center; margin-bottom: 30px; color: #3C3B3B; font-size: 42px; font-weight: 600; line-height: 160%; }
.step_01 .summary-list { display: flex; flex-direction: column; flex: 1; overflow-y: auto; margin-bottom: 30px; }
.step_01 .summary-item { padding: 18px 21px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #8F8F8F; }
.step_01 .summary-item .label_wrap {display: flex; align-items: center;}
.step_01 .summary-item-label { color: #3C3B3B; font-size: 24px; font-weight: 400; line-height: 160%; }
.step_01 .summary-item-value { margin-left: 4px; color: #3C3B3B; font-size: 24px; font-weight: 400; line-height: 160%; word-break: keep-all;}
.step_01 .summary-item-value span { color: #3C3B3B; font-weight: 500; line-height: 160%; }
.step_01 .summary-item-value em {display: none;}
.step_01 .summary-item-value .br_hidden {display: none;}

.step_01 .summary-badge { display: inline-block; color: #D83225; font-size: 24px; font-weight: 500; line-height: 160%; word-break: keep-all; white-space: nowrap; text-align: right;}
.step_01 .summary-badge > span {color: #D83225; font-weight: 500; line-height: 160%; }
.step_01 .summary-badge .mob_br {display: none;}
/* .summary-badge .badge-yes { background: var(--primary-light); color: var(--primary); } */
/* .summary-badge .badge-no { background: #EBF8FF; color: #3182CE; } */

.step_01 .summary-slide .btn_wrap {display: flex; justify-content: center; align-items: center; gap: 40px;}
.step_01 .summary-slide .pdf_btn { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 45px; border-radius: 45px; border: 2px solid #D83225; background: #FFF; box-shadow: 0 5.373px 5.373px 0 rgba(0, 0, 0, 0.25); color: #3C3B3B; font-size: 28px; font-weight: 500; }
.step_01 .summary-slide .pdf_btn span { color: #3C3B3B; font-weight: 500; }
.step_01 .summary-slide .pdf_btn .mob_hidden {margin-right: 0.2em;}
.step_01 .summary-slide .pdf_btn > em { display: inline-block; flex-shrink: 0; width: 36px; aspect-ratio: 1; margin-left: 10px; background-image: url(/img/download.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.step_01 .summary-slide .page_btn { margin: 0; height: 70px; padding: 0 45px; color: #FFF; font-size: 32px; font-weight: 700; }
.step_01 .summary-slide .page_btn > em {width: 30px; background-size: 100%; background-size: 15px;}






/* step_02 복용 중 당부 */
.step_02 .sec_kv .title_area { gap: 40px; }
.step_02 .sec_kv .title_area .right { width: var(--spacing-width); max-width: 814px; margin: 0 auto;}
.step_02 .sec_ti { padding-top: 30px; margin-bottom: 112px; color: #3C3B3B; text-align: center; font-family: "Inter" , sans-serif; font-size: 36px; font-weight: 500; line-height: 160%; }
.step_02 .sec_01 { padding-top: 80px;}

.step_02 .user_area { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 930px; }
.step_02 .user_area + .user_area {margin-top: 24px;}
.step_02 .user_area .list_wrap {width: var(--spacing-width); max-width: 1200px; margin: 0 auto;}
.step_02 .user_area .list_wrap * {font-family: "Inter" , sans-serif;}
.step_02 .list_wrap > h2 { margin-bottom: 20px; color: #4B4B4B; font-size: 24px; font-weight: 600; line-height: 160%; }
.step_02 .list_wrap > p { color: #3C3B3B; font-size: 42px; font-weight: 600; line-height: 160%; }
.step_02 .list_wrap > p::after {content: ""; display: block; width: 100%; height: 1px; margin-top: 28px; background: #8F8F8F;}
.step_02 .list_wrap > p span { color: #D83225; font-weight: 600; line-height: 160%; }

.step_02 .list_wrap > button { width: 100%; max-width: 244px; padding: 15px 0; margin-top: 5%; border-radius: 45px; background: #D83225; text-align: center; color: #fff; font-size: 28px; font-weight: 500; transition: all 0.25s;}
.step_02 .list_wrap > button:disabled { background: #FFF; color: rgba(60, 59, 59, 0.46); }


.step_02 .user_area .cover_wrap { display: none; position: absolute; width: 100%; height: 100%; padding-top: 50px; background: #F8FAFC;}
.step_02 .user_area .cover_wrap .inner { position: relative; width: var(--spacing-width); max-width: 1200px; margin: 0 auto;}
.step_02 .user_area .cover_wrap .inner > p { margin-bottom: 29px; color: #3C3B3B; font-family: "Inter" , sans-serif; font-size: 48px; font-weight: 700; line-height: 140%; }
.step_02 .user_area .cover_wrap .img_box { position: relative; }
.step_02 .user_area .cover_wrap .img_box > img { width: 100%; max-width: 763px; margin: 0 auto;}
.step_02 .user_area .cover_wrap .img_box > img.mob {display: none;}
.step_02 .user_area .cover_wrap .text_wrap { position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, 45%); width: 100%; padding: 36px 15px; border-radius: 40px; border: 1px solid #A9A9A9; background: #FFF; }
.step_02 .user_area .cover_wrap .text_wrap > p { word-break: keep-all; color: #3C3B3B; text-align: center; font-family: "Inter" , sans-serif; font-size: 26px; font-weight: 400; line-height: 160%; }
.step_02 .user_area .cover_wrap .text_wrap > p .br_hidden {display: block;}
.step_02 .user_area .cover_wrap .text_wrap > p span { color: #D83225; font-family: "Inter" , sans-serif; font-weight: 600; }
.step_02 .user_area .cover_wrap .text_wrap > p em { display: inline-block; vertical-align: top; font-style: normal; font-family: "Inter", sans-serif; font-size: 17px;}
.step_02 .user_area .cover_wrap .close_btn { position: absolute; top: 40px; left: 10px; width: 38px; height: 30px; background: url(/img/back_arrow.svg) no-repeat center / contain;}

/* ── check_list ── */
.step_02 .check_list { list-style: none; display: flex; flex-direction: column; gap: 28px; width: fit-content; margin: 0 auto; padding: 48px 0 0px; }
.step_02 .check_list li { display: flex; align-items: center; }

.step_02 .check_list label { display: flex; align-items: center; gap: 18px; cursor: pointer; padding: 0px 12px; width: 100%; user-select: none; }
.step_02 .check_list label:hover .box {border-color: #D83225;}

.step_02 .check_list input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.step_02 .check_list .box { position: relative; width: 42px; aspect-ratio: 1; flex-shrink: 0; border-radius: 10px; border: 2px solid #A9A9A9; background: #FFF; display: grid; place-items: center; transition: border-color 0.25s; }
.step_02 .check_list .box svg { opacity: 0; visibility: hidden; display: block; position: absolute; top: 45%; left: 65%; transform: translate(-50%, -50%); width: 63px; aspect-ratio: 1 / 1.2; transition: opacity 0.25s ease; }
.step_02 .check_list .item-text { text-align: left; letter-spacing: normal; color: #3C3B3B; font-size: 26px; font-weight: 400; line-height: 1.4; transition: color 0.2s; }
.step_02 .check_list .item-text > span { letter-spacing: normal; font-weight: 400;}
.step_02 .check_list label:has(input:checked) .box { border-color: #D83225; }
.step_02 .check_list label:has(input:checked) .box svg { display: block; opacity: 1; visibility: visible; }
.step_02 .check_list label:has(input:checked) .item-text { color: #D83225; font-weight: 500;}
.step_02 .check_list label:has(input:checked) .item-text > span { color: #D83225; font-weight: 500;}


.step_02 .btn_wrap { padding: 150px 0 10px; display: flex; justify-content: center; align-items: center; gap: 40px;}
.step_02 .btn_wrap * {font-family: "Inter" , sans-serif;}
.step_02 .pdf_btn { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 45px; border-radius: 45px; border: 2px solid #D83225; background: #FFF; box-shadow: 0 5.373px 5.373px 0 rgba(0, 0, 0, 0.25); color: #3C3B3B; font-size: 28px; font-weight: 500; }
.step_02 .pdf_btn > em { display: inline-block; flex-shrink: 0; width: 36px; aspect-ratio: 1; margin-left: 10px; background-image: url(/img/download.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.step_02 .page_btn { margin: 0; height: 70px; padding: 0 45px; color: #FFF; font-size: 32px; font-weight: 700; }
.step_02 .page_btn > em {width: 30px; background-size: 100%;}

.step_02 .graph_box {margin-top: 142px;}


/* step_03 생활 속 당부 */
.step_03 .sec_kv .title_area { gap: 40px; } 
.step_03 .sec_kv .title_area .left {max-width: 775px;}
.step_03 .sec_kv .title_area .right { width: var(--spacing-width); max-width: 738px;}
.step_03 .sec_ti { padding-top: 30px; margin-bottom: 112px; color: #3C3B3B; text-align: center; font-family: "Inter" , sans-serif; font-size: 36px; font-weight: 400; line-height: 160%; }

.step_03 .sec_01 { padding-top: 80px; }
.step_03 .confirm_list * {font-family: "Inter" , sans-serif;}
.step_03 .confirm_list { width: var(--spacing-width); max-width: 1440px; margin: 0 auto; border-top: 1px solid #8F8F8F;}
.step_03 .confirm_list > li { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 38px 24px;  gap: 20px; border-bottom: 1px solid #8F8F8F;}
.step_03 .confirm_list > li > p { word-break: keep-all; padding-left: 25px; text-indent: -25px; color: #3C3B3B; font-size: 34px; font-weight: 500; line-height: 160%; }
.step_03 .confirm_list > li .open_btn { display: block; width: 100%; max-width: 204px; padding: 10px 0; border-radius: 10px; background: #D83225; color: #FFF; text-align: center; font-size: 26px; font-weight: 500; line-height: 160%;}
.step_03 .confirm_list > li .open_btn span { display: inline-block; color: #fff; font-weight: 500; line-height: 160%;}
.step_03 .confirm_list > li .open_btn span em {display: inline-block; width: 20px; aspect-ratio: 1; background: url(/img/confirm_check.svg) no-repeat center / contain; vertical-align: middle;}
.step_03 .confirm_list > li .open_btn .pc {display: inline-block;}
.step_03 .confirm_list > li .open_btn .mob {display: none;}
.step_03 .confirm_list > li .open_btn.done { background: #4B4B4B; cursor: auto;}


/* step_03 팁 팝업 */
.step_03 .confirm_list .popup { opacity: 0; visibility: hidden; transition: opacity 0.3s; position: absolute; top: 50%; right: calc(204px + 24px + 50px); transform: translateY(-35%); width: 840px; height: auto; border-radius: 40px; background: #FFF; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.20)); z-index: 1; }
.step_03 .confirm_list .popup.on { opacity: 1; visibility: visible;}
.step_03 .confirm_list .popup::after { content: ""; display: block; position: absolute; width: 50px; height: 44px; left: calc(100% - 5px); top: 35%; transform: translateY(-50%); background: url(/img/popup_tip_tag.svg) no-repeat center / contain; }
.step_03 .confirm_list .popup.last { transform: translateY(-65%);}
.step_03 .confirm_list .popup.last::after { top: 65%; }
.step_03 .confirm_list .popup.mid { transform: translateY(-50%);}
.step_03 .confirm_list .popup.mid::after { top: 50%; }

.step_03 .confirm_list .popup .inner {padding: 43px 60px 58px;}
.step_03 .confirm_list .popup.tip h2 { width: 78px; padding: 4px 0; border-radius: 10px; border: 2px solid #D83225; background: #FFF; text-align: center; color: #D83225; font-size: 28px; font-weight: 600; line-height: 130%; letter-spacing: -0.03em; }
.step_03 .confirm_list .popup.tip ul {padding-top: 40px; margin-bottom: 43px;}
.step_03 .confirm_list .popup.tip li + li {margin-top: 26px;}
.step_03 .confirm_list .popup.tip li > p { margin-bottom: 2px; color: #3C3B3B; font-size: 28px; font-weight: 600; line-height: 160%; }
.step_03 .confirm_list .popup.tip li > p::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 4px; background: url(/img/popup_tip_check.svg) no-repeat center / contain;}
.step_03 .confirm_list .popup.tip li > p.warn { color: #D83225;}
.step_03 .confirm_list .popup.tip li > p.warn::before { background-image: url(/img/popup_tip_warning.svg);}
.step_03 .confirm_list .popup.tip li > .desc { display: inline-block; padding-left: 28px; word-break: keep-all; color: #3C3B3B; font-size: 20px; font-weight: 400; line-height: 160%; }
.step_03 .confirm_list .popup.tip li > .desc.big { font-size: 22px; }
.step_03 .confirm_list .popup.tip .desc > em { color: #3C3B3B; display: inline-block; vertical-align: top; font-size: 15px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: -1.5px; }
.step_03 .confirm_list .popup.tip .close_btn { display: block; width: 140px; padding: 13px 0; margin: 0 auto; border-radius: 45px; background: #D83225; color: #FFF; font-size: 20px; font-weight: 500; }


.step_03 .btn_wrap { padding: 95px 0 10px; display: flex; justify-content: center; align-items: center; column-gap: 30px; row-gap: 60px; flex-wrap: wrap; width: var(--spacing-width); max-width: 900px; margin: 0 auto;}
.step_03 .btn_wrap * {font-family: "Inter" , sans-serif;}
.step_03 .pdf_btn { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 45px; border-radius: 45px; border: 2px solid #D83225; background: #FFF; box-shadow: 0 5.373px 5.373px 0 rgba(0, 0, 0, 0.25); color: #3C3B3B; font-size: 28px; font-weight: 500; }
.step_03 .pdf_btn > em { display: inline-block; flex-shrink: 0; width: 36px; aspect-ratio: 1; margin-left: 10px; background-image: url(/img/download.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.step_03 .share_btn { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 45px; border-radius: 45px; border: 2px solid #D83225; background: #FFF; box-shadow: 0 5.373px 5.373px 0 rgba(0, 0, 0, 0.25); color: #3C3B3B; font-size: 28px; font-weight: 500; }
.step_03 .share_btn > em { display: inline-block; flex-shrink: 0; width: 36px; aspect-ratio: 1; margin-left: 10px; background-image: url(/img/share_icon.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.step_03 .page_btn { margin: 0; height: 70px; padding: 0 45px; color: #FFF; font-size: 32px; font-weight: 700; }
.step_03 .page_btn > em {width: 30px; background-size: 100%;}






/* step_tip 스타틴 복약을 위한 Tip */
.step_tip * {font-family: "Inter" , sans-serif;}
.step_tip .sec_kv .title_area .left {max-width: fit-content; padding-top: 175px; padding-left: 30px; padding-right: 10px;}
.step_tip .sec_kv .title_area .right {max-width: 570px;}
.step_tip .sec_kv .step_title > p span { color: #D83225; font-weight: 700; line-height: 140%;}

.step_tip .sec_board {}
.step_tip .tag_menu {display: flex; align-items: center; justify-content: center; gap: 30px; width: var(--spacing-width); max-width: 1312px; margin: 0 auto;}
.step_tip .tag_menu .menu_btn { display: block; width: 100%; border-radius: 20px; background: #FFF; padding: 20px 0; max-height: 90px; color: #3C3B3B; text-align: center; font-size: 36px; font-weight: 400; line-height: 140%; }
.step_tip .tag_menu .menu_btn.on { color: #FFF; font-weight: 700; background: #D83225;}

.step_tip .board_wrap { width: var(--spacing-width); max-width: 1312px; min-height: 500px; margin: 0 auto; padding-top: 80px; margin-bottom: 150px;}
.step_tip .board_wrap > .top {display: flex; align-items: center; justify-content: space-between; border-bottom: 4px solid #D83225; padding: 0 12px 10px;}
.step_tip .board_wrap > .top .ti { color: #3C3B3B; font-size: 36px; font-weight: 700; line-height: 140%; }
.step_tip .board_wrap > .top .total { color: #3C3B3B; font-size: 20px; font-weight: 500; line-height: 140%; }
.step_tip .board_wrap > .top .total > span { color: #D83225; font-weight: 700; line-height: 140%; }

.step_tip .board_wrap .item_list {padding: 2px 0; min-height: 260px; margin-bottom: 100px;}
.step_tip .board_wrap .item_list > li {cursor: pointer; display: flex; padding: 34px 0 41px;}
.step_tip .board_wrap .item_list > li + li { border-top: 1px solid #8f8f8f;}
.step_tip .board_wrap .item_list .img_box { width: 100%; max-width: 427px; aspect-ratio: 427 / 250; border-radius: 20px; overflow: hidden;}
.step_tip .board_wrap .item_list .img_box > img {width: 100%; height: 100%; object-fit: cover;}
.step_tip .board_wrap .item_list .text_wrap { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 20px 10px 13px 38px;}
.step_tip .board_wrap .item_list .text_wrap .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; min-height: auto; margin-bottom: 10px; color: #3C3B3B; font-size: 28px; font-weight: 700; line-height: 160%; }
.step_tip .board_wrap .item_list .text_wrap .title span { margin-right: 0.2em; font-weight: 700; color: #3C3B3B;}
.step_tip .board_wrap .item_list .text_wrap .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 100%; max-height: 4.8em; color: #3C3B3B; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 400; line-height: 160%; }
.step_tip .board_wrap .item_list .text_wrap .date_box {display: flex; align-items: center; gap: 60px;}
.step_tip .board_wrap .item_list .text_wrap .date,
.step_tip .board_wrap .item_list .text_wrap .date span,
.step_tip .board_wrap .item_list .text_wrap .view,
.step_tip .board_wrap .item_list .text_wrap .view span { display: inline-block; color: #666; font-size: 18px; font-weight: 400; line-height: 160%; }
.step_tip .board_wrap .item_list .text_wrap .link_btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 142px; padding: 12px 0; margin-left: auto; border-radius: 50px; border: 2px solid #D83225; background: #D83225; color: #FFF; font-size: 18px; font-weight: 500; }
.step_tip .board_wrap .item_list .text_wrap .link_btn > em { display: inline-block; flex-shrink: 0; width: 20px; aspect-ratio: 1; margin-left: 6px; background-image: url(/img/icon_link.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }
 

.step_tip .board_wrap.video .item_list {display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 28px;}
.step_tip .board_wrap.video .item_list > li {display: block; width: calc(100% / 2 - 14px);}
.step_tip .board_wrap.video .item_list > li + li {border: none;}
.step_tip .board_wrap.video .item_list .text_wrap {padding: 20px 15px 0;}
.step_tip .board_wrap.video .item_list .text_wrap .title {margin-bottom: 5px; min-height: 4.8em;}
.step_tip .board_wrap.video .item_list .text_wrap .date_box {justify-content: space-between; gap: 10px;}
.step_tip .board_wrap.video .item_list .thumb_box {width: 100%; max-width: 641px; aspect-ratio: 73/41; border-radius: 20px; overflow: hidden;}
.step_tip .board_wrap.video .item_list .thumb_box img {width: 100%; height: 100%; object-fit: cover;}


.step_tip .board_wrap.card .item_list {display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 28px;}
.step_tip .board_wrap.card .item_list > li {display: block; width: calc((100% / 3) - 20px);}
.step_tip .board_wrap.card .item_list > li + li {border: none;}
.step_tip .board_wrap.card .item_list .text_wrap {padding: 20px 15px 0;}
.step_tip .board_wrap.card .item_list .text_wrap .title {margin-bottom: 5px;}
.step_tip .board_wrap.card .item_list .text_wrap .date_box {justify-content: space-between; gap: 10px;}
.step_tip .board_wrap.card .item_list .img_box {width: 100%; max-width: 418px; aspect-ratio: 1; border-radius: 20px; overflow: hidden;}
.step_tip .board_wrap.card .item_list .img_box img {width: 100%; height: 100%; object-fit: cover;}


.step_tip .board_wrap .item_list:has(li.no_content) { display: flex; padding: 0 11px;}
.step_tip .board_wrap .item_list > li.no_content { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 36px; border-radius: 20px; border: 1px solid rgba(60, 59, 59, 0.30); background: #F8FAFC; color: #3C3B3B; text-align: center; font-size: 30px; font-style: normal; font-weight: 400; line-height: 160%; }

.step_tip .pagination {display: flex; justify-content: center; align-items: center; gap: 5px;} 
.step_tip .pagination .btn { display: block; width: 24px; aspect-ratio: 1; margin: 0 15px;}
.step_tip .pagination .num { display: flex; justify-content: center; align-items: center; width: 48px; aspect-ratio: 1; border-radius: 4px; background-color: #fff; cursor: pointer; color: #3C3B3B; text-align: center; font-size: 20px; font-weight: 500; }
.step_tip .pagination .num.on {font-weight: 600; color: #fff; border-radius: 6px; background: #D83225;}

/* 하단 링크 배너 */
.sec_banner {padding: 47px 0; background: #EBF3F8;}
.sec_banner .banner_list { display: flex; align-items: center; justify-content: center; gap: 30px; width: calc(100% - 40px); margin-inline: auto;}
.sec_banner a { display: block; width: 100%; max-width: 350px; aspect-ratio: 350 / 90; border-radius: 10px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.16)); }
.sec_banner a img {width: 100%;}


/* step_01 ~ 03, step_tip 반응형 Media */
@media screen and (max-width : 1600px) {
    .steps .sec_kv .step_title > p {font-size: 76px;}
    .steps .sec_kv .title_area .left > img {max-width: 600px;}
    .steps .sec_kv .title_area .left > p.one {font-size: 30px; margin-bottom: 20px;}
    .steps .sec_kv .title_area .left > p.two {font-size: 28px; padding-top: 20px;}
    .steps .sec_kv .step_title > p::after {width: 60px; left: calc(0% - 36px);}
    .steps .quotes_txt {font-size: 40px;}
    .steps .quotes_txt em {font-size: 20px;}

    .step_01 .sec_01 .board_box .table_wrap {margin-top: 40px; margin-bottom: 100px;}
    .step_01 .sec_01 .board_box .thead * {font-size: 20px; word-break: keep-all;}
    .step_01 .sec_01 .board_box .thead .th { display: flex; align-items: center; justify-content: center;}
    .step_01 .sec_01 .board_box .thead .tr,
    .step_01 .sec_01 .board_box .tbody .tr {grid-template-columns: 1fr 1.5fr 1fr 1fr;}
    .step_01 .sec_01 .board_box .tbody * { font-size: 19px;}
    .step_01 .sec_01 .board_box .tbody .td.ti {font-size: 20px;}
    .step_01 .sec_01 .board_box .table_wrap em {font-size: 13px;}

    .step_01 .app-wrapper {height: calc(100dvh); min-height: 950px; max-height: 1020px;}
    .step_01 .slide-category {font-size: 20px;}
    .step_01 .slide-question {font-size: 36px;}
    .step_01 .slide-question > em {font-size: 20px;}
    .step_01 .user_area .options {padding-top: 60px !important;}
    .step_01 .user_area .option-btn {font-size: 20px;}
    .step_01 .user_area .next-btn {font-size: 26px;}

    .step_01 .summary-title {font-size: 34px;}
    .step_01 .summary-item-value {font-size: 19px;}
    .step_01 .summary-item-label {font-size: 19px;}
    .step_01 .summary-badge {font-size: 20px;}
    .step_01 .sec_02 .summary-slide .quotes_txt {font-size: 22px;}
    .step_01 .summary-slide .pdf_btn {font-size: 24px; height: 64px;}
    .step_01 .summary-slide .page_btn {font-size: 28px; height: 64px;}

    
    .step_02 .sec_kv .title_area .left > p.two {font-size: clamp(21px, 1.5vw, 28px); padding-top: 20px;}
    .step_02 .sec_ti {font-size: 28px;}

    .step_02 .list_wrap > h2 {font-size: 20px;}
    .step_02 .list_wrap > p {font-size: 36px;}
    .step_02 .check_list .box {width: 34px;}
    .step_02 .check_list .box svg {width: 54px;}
    .step_02 .check_list .item-text {font-size: 22px;}
    .step_02 .list_wrap > button {font-size: 24px;}
    
    .step_02 .user_area {height: auto; min-height: 750px; padding: 65px 0;}
    .step_02 .user_area .cover_wrap .close_btn {width: 30px; height: 22px;}
    .step_02 .user_area .cover_wrap .inner > p {font-size: 40px;}
    .step_02 .user_area .cover_wrap .img_box > img {max-width: 600px;}
    .step_02 .user_area .cover_wrap .text_wrap > p {font-size: 22px;}
    .step_02 .user_area .cover_wrap .text_wrap > p em {font-size: 15px;}

    .step_02 .pdf_btn {font-size: 24px; height: 64px;}
    .step_02 .page_btn {font-size: 28px; height: 64px;}



    .step_03 .sec_kv .title_area .left > p.two {font-size: clamp(19px, 1.5vw, 28px); padding-top: 20px;}
    .step_03 .sec_ti {font-size: 28px; margin-bottom: 80px;}
    .step_03 .confirm_list > li > p {font-size: 28px;}
    .step_03 .confirm_list > li .open_btn { max-width: 180px; font-size: 22px;}

    .step_tip .sec_kv .title_area .right { max-width: 470px;}
    .step_tip .sec_kv .title_area {margin-bottom: 20px;}
    .step_tip .sec_kv .step_title > p {font-size: 52px;}
    .step_tip .tag_menu .menu_btn {font-size: 30px;}
    .step_tip .board_wrap > .top .ti {font-size: 30px;}
    .step_tip .board_wrap .item_list .text_wrap .title {font-size: 24px;}
    .step_tip .board_wrap .item_list .text_wrap .desc {font-size: 16px;}
}



@media screen and (max-width : 1200px) {

    
    .step_03 .confirm_list .popup {width: 740px; right: 22%;}
    .step_03 .confirm_list .popup.tip h2 {font-size: 24px;}
    .step_03 .confirm_list .popup.tip li > p {font-size: 24px;}
    .step_03 .confirm_list .popup.tip li > .desc.big {font-size: 19px;}
    .step_03 .confirm_list .popup.tip li > .desc {font-size: 18px;}
    .step_03 .confirm_list .popup.tip .desc > em {font-size: 13px;}

}


@media screen and (max-width : 1024px) {
    .steps .sec_kv .title_area .left {padding-top: 80px; padding-bottom: 0;}
    .steps .sec_kv .title_area {gap: 0; row-gap: 15px;}
    .steps .sec_kv .title_area .right > img {max-width: 768px; margin: 0 auto;}
    .steps .quotes_txt {font-size: 35px;}
    .steps .quotes_txt em {font-size: 18px;}

    .step_01 .sec_01 .board_box .thead .th { display: flex; align-items: center; justify-content: center; padding: 15px 5px;}
    .step_01 .sec_01 .board_box .tbody .td { padding: 20px 5px;}
    .step_01 .sec_01 .board_box .thead * {font-size: 17px;}
    .step_01 .sec_01 .board_box .tbody * { font-size: 16px;}
    .step_01 .sec_01 .board_box .tbody .td.ti {font-size: 17px;}

    .step_01 .app-wrapper { padding: 40px 0 60px; }
    .step_01 .progress-bar .dot {width: 12px; height: 12px;}
    .step_01 .slide-category {font-size: 18px; margin-bottom: 10px;}
    .step_01 .slide-question {font-size: 28px;}
    .step_01 .slide-question > em {font-size: 15px;}
    .step_01 .user_area .options {padding-top: 40px !important; gap: 18px;}
    .step_01 .user_area .option-btn {font-size: 18px; padding: 18px 20px;}
    .step_01 .user_area .option-btn.selected::before {width: 60px;}
    .step_01 .user_area .next-btn {font-size: 22px;}
    .step_01 .user_area .next-btn .arrow {width: 40px;}

    .step_01 .summary-title {font-size: 30px; margin-bottom: 15px;}
    .step_01 .summary-item {padding: 10px 4px;}
    .step_01 .summary-badge {font-size: 18px;}
    .step_01 .summary-item .label_wrap {flex-wrap: wrap; width: 80%;}
    .step_01 .summary-item-value {font-size: 18px; margin-left: 0;}
    .step_01 .summary-item-value .br_1024 {display: none;}
    .step_01 .summary-item-label {font-size: 18px; width: 100%;}
    .step_01 .sec_02 .summary-slide .quotes_txt {font-size: 20px;}
    .step_01 .summary-slide .pdf_btn {font-size: 20px; height: 58px;}
    .step_01 .summary-slide .page_btn {font-size: 20px; height: 58px;}
    .step_01 .summary-slide .pdf_btn > em {width: 30px;}
    .step_01 .summary-slide .page_btn > em {width: 30px;}
    .step_01 .mob_hidden {display: none;}
    .step_01 .slide-question .br_hidden {display: none;}

    .step_02 .list_wrap > h2 {font-size: 18px; margin-bottom: 15px;}
    .step_02 .list_wrap > p {font-size: 30px;}
    
    .step_02 .check_list {gap: 20px;}
    .step_02 .check_list .item-text {font-size: 18px;}
    
    .step_02 .user_area .cover_wrap .inner > p {font-size: 36px;}
    .step_02 .user_area .cover_wrap .text_wrap > p {font-size: 18px;}
    .step_02 .user_area .cover_wrap .text_wrap > p em {font-size: 13px;}

    .step_02 .btn_wrap {padding-top: 80px;}
    .step_02 .pdf_btn {font-size: 20px; height: 58px;}
    .step_02 .page_btn {font-size: 20px; height: 58px;}
    .step_02 .pdf_btn > em {width: 30px;}
    .step_02 .page_btn > em {width: 30px;}

    .step_02 .user_area .cover_wrap .text_wrap .br_hidden {display: none;}
    
    .step_02 .graph_box {margin-top: 100px;}

    .jw-startin.step_02 .reference {margin-top: 80px;}



    .step_03 .sec_ti {font-size: 24px; margin-bottom: 40px;}
    .step_03 .confirm_list > li { padding: 25px 15px;}
    .step_03 .confirm_list > li > p {font-size: 22px; text-indent: -20px; padding-left: 20px;}
    .step_03 .confirm_list > li .open_btn {font-size: 20px;}

    .step_03 .btn_wrap {padding-top: 80px; row-gap: 40px;}
    .step_03 .pdf_btn,
    .step_03 .share_btn,
    .step_03 .page_btn {font-size: 20px; height: 58px; padding: 0 25px;}
    .step_03 .pdf_btn > em,
    .step_03 .share_btn > em,
    .step_03 .page_btn > em {width: 30px; background-size: 80%;  margin-left: 5px;}

    body:has(.popup.tip.on) {overflow: hidden;}
    .step_03 .confirm_list .popup { position: fixed; top: 0; left: 0; right: auto; width: 100%; height: 100dvh; transform: translateY(0) !important; background: transparent; z-index: 1003; }
    .step_03 .confirm_list .popup::after {display: none;}
    .step_03 .confirm_list .popup .bg { opacity: 0; visibility: hidden; transition: opacity .3s; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #00000080; }
    .step_03 .confirm_list .popup .inner { position: fixed; opacity: 0; visibility: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); max-width: 1250px; transition: opacity .3s; padding: 86px 77px 80px; border-radius: 20px; background: #fff; }
    .step_03 .confirm_list .popup.on .bg { opacity: 1; visibility: visible; pointer-events: all; transition: opacity .3s;}
    .step_03 .confirm_list .popup.on .inner { opacity: 1; visibility: visible; padding: 50px; max-width: 768px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);}
    .step_03 .confirm_list .popup.tip ul {padding-top: 20px; margin-bottom: 30px;}
    .step_03 .confirm_list .popup.tip .close_btn { padding: 10px 0; font-size: 18px;}


    .step_tip .tag_menu .menu_btn {font-size: 24px;}
    .step_tip .board_wrap > .top .ti {font-size: 24px;}
    .step_tip .board_wrap > .top .total {font-size: 18px;}
    .step_tip .board_wrap .item_list .text_wrap {padding: 10px 25px;}
    .step_tip .board_wrap .item_list .text_wrap .title {font-size: 20px;}
    .step_tip .board_wrap .item_list .text_wrap .desc {font-size: 15px;}
    .step_tip .board_wrap .item_list .text_wrap .date,
    .step_tip .board_wrap .item_list .text_wrap .date span,
    .step_tip .board_wrap .item_list .text_wrap .view,
    .step_tip .board_wrap .item_list .text_wrap .view span {font-size: 14px;}
    .step_tip .board_wrap .item_list .img_box {max-width: 300px;}
    .step_tip .board_wrap .item_list .text_wrap .date_box {margin-top: 10px; gap: 30px;}
    .step_tip .board_wrap .item_list .text_wrap .link_btn { max-width: 122px; padding: 8px 0; font-size: 16px; }
    .step_tip .board_wrap .item_list .text_wrap .link_btn > em { width: 18px;  }
    

    .step_tip .board_wrap .item_list > li.no_content {font-size: 20px;}

    .sec_banner .banner_list {gap: 20px;}
    .sec_banner a {max-width: 250px;}


}


@media screen and (max-width : 768px) {
    .steps .sec_kv .step_title > p {font-size: 60px;}
    .steps .sec_kv .title_area .left {padding-top: 30px; padding-left: 10px;}
    .steps .sec_kv .title_area .left > p.one {font-size: 26px; margin-bottom: 14px;}
    .steps .sec_kv .title_area .left > p.two {font-size: 22px; padding-top: 20px;}
    .steps .sec_kv .title_area .left > img {max-width: 500px;}
    .steps .sec_kv .step_title > p::after {width: 50px; left: calc(0% - 25px); top: -22px;}
    .steps .quotes_txt {font-size: 30px;}
    .steps .quotes_txt em {font-size: 16px;}
    .steps .quotes_txt::after {width: 38px; right: -20px;}
    .steps .quotes_txt::before {width: 38px; left: -20px;}

    .step_01 .sec_01 .board_box .table_wrap {margin-bottom: 50px;}
    .step_01 .sec_01 .board_box .table_wrap > .pc {display: none;}
    .step_01 .sec_01 .board_box .table_wrap > .mob { display: block; }
    .step_01 .sec_01 .board_box .table_wrap > .desc {margin-top: 25px;}
    .step_01 .sec_01 .board_box .table_wrap em {font-size: 12px;}

    .step_01 .app-wrapper {height: calc(100dvh - 50px); min-height: 800px; padding-bottom: 50px;}
    .step_01 .progress-bar .dot {width: 10px; height: 10px;}
    .step_01 .summary-slide {padding: 0 0 15px;}
    .step_01 .slide-category {font-size: 16px;}
    .step_01 .slide-question {font-size: 22px;}
    .step_01 .slide-question > em {font-size: 13px;}
    .step_01 .user_area .option-btn {font-size: 16px; border-width: 2px; border-radius: 12px; padding: 14px 10px;}
    .step_01 .user_area .option-btn.selected {border-width: 2px;}
    .step_01 .user_area .next-btn {font-size: 18px;}
    .step_01 .user_area .next-btn .arrow {width: 32px; background-size: 17px;}

    .step_01 .summary-title {font-size: 22px;}
    .step_01 .summary-item {padding: 8px 4px;}
    .step_01 .summary-item-label {font-size: 13px;}
    .step_01 .summary-item-value {font-size: 15px;}
    .step_01 .summary-badge {font-size: 15px;}
    .step_01 .summary-badge .mob_br {display: block;}
    .step_01 .sec_02 .summary-slide .quotes_txt {margin-bottom: 30px; font-size: 15px;}
    .step_01 .sec_02 .summary-slide .quotes_txt::after {width: 24px;}
    .step_01 .sec_02 .summary-slide .quotes_txt::before {width: 24px;}
    .step_01 .summary-slide .btn_wrap {gap: 10px;}
    .step_01 .summary-slide .pdf_btn {font-size: 17px; height: 48px; padding: 0 15px;}
    .step_01 .summary-slide .page_btn {font-size: 17px; height: 48px; padding: 0 20px;}
    .step_01 .summary-slide .pdf_btn > em {width: 24px; margin-left: 2px;}
    .step_01 .summary-slide .page_btn > em {width: 24px; margin-left: 3px;}
    .step_01 .sec_02 .quotes_txt {margin-bottom: 45px;}

    /* .steps .quotes_txt {font-size: 22px;} */
    .step_02 .sec_ti {font-size: 20px; margin-bottom: 80px;}
    .step_02 .sec_01 {padding-top: 40px;}

    
    .step_02 .list_wrap > h2 {font-size: 18px;}
    .step_02 .list_wrap > p {font-size: 20px;}
    .step_02 .list_wrap > p::after {margin-top: 25px;}
    .step_02 .list_wrap > button {font-size: 17px; padding: 10px 5px; margin-top: 40px; max-width: 144px;}
    .step_02 .check_list {padding-top: 25px;}

    .step_02 .check_list label {align-items: flex-start;}
    .step_02 .check_list .item-text {font-size: 17px;}
    .step_02 .check_list .box {width: 28px; border-radius: 6px; border: 1.5px solid #A9A9A9;}
    .step_02 .check_list .box svg {width: 42px;}

    .step_02 .user_area .cover_wrap .close_btn { left: 0; width: 30px;}
    .step_02 .user_area .cover_wrap .inner > p {font-size: 28px;}
    .step_02 .user_area .cover_wrap .text_wrap > p {font-size: 17px; line-height: 1.5;}
    .step_02 .user_area .cover_wrap .text_wrap > p .br_hidden {display: none;}

    .step_02 .btn_wrap {gap: 10px;}
    .step_02 .pdf_btn {font-size: 17px; height: 48px; padding: 0 20px; box-shadow: 0 2.62px 2.62px 0 rgba(0, 0, 0, 0.25);}
    .step_02 .page_btn {font-size: 17px; height: 48px; padding: 0 20px; box-shadow: 0 2.62px 2.62px 0 rgba(0, 0, 0, 0.25);}
    .step_02 .pdf_btn > em {width: 24px; margin-left: 2px;}
    .step_02 .page_btn > em {width: 24px; margin-left: 3px;}
    
    .step_02 .graph_box {margin-top: 70px;}

    .step_03 .sec_kv .title_area .left > p.two {font-size: clamp(19px, 1.5vw, 28px);}
    .step_03 .sec_kv .title_area .left { max-width: 400px;}
    .step_03 .sec_kv .title_area .left > img {width: var(--spacing-width);}
    .step_03 .sec_ti {font-size: 20px;}

    .step_03 .confirm_list > li > p {font-size: 20px; text-indent: -20px; padding-left: 20px;}
    .step_03 .confirm_list > li .open_btn {font-size: 18px; max-width: 160px; }
    .step_03 .confirm_list .popup.on .inner { padding: 30px 24px; max-width: 500px; border-radius: 30px;}
    .step_03 .confirm_list .popup.tip h2 {font-size: 18px; width: 52px; padding: 2px 0;}
    .step_03 .confirm_list .popup.tip li > p {font-size: 18px;}
    .step_03 .confirm_list .popup.tip li > p::before {width: 20px; height: 20px;}
    .step_03 .confirm_list .popup.tip li > .desc {font-size: 16px; padding-left: 25px;}
    .step_03 .confirm_list .popup.tip li > .desc br {display: none;}
    .step_03 .confirm_list .popup.tip li > .desc.big {font-size: 16px;}
    .step_03 .confirm_list .popup.tip li + li {margin-top: 14px;}
    .step_03 .confirm_list .popup.tip .close_btn {font-size: 17px; width: 140px;}
    .step_03 .confirm_list .popup.tip .desc > em {font-size: 12px;}


    .step_tip .sec_kv .title_area {row-gap: 40px; margin-bottom: 46px;}
    .step_tip .sec_kv .title_area .right {width: var(--spacing-width);}
    .step_tip .sec_kv .step_title > p::after { left: calc(0% - 12px);}

    .step_tip .board_wrap {margin-bottom: 100px; min-height: 400px; padding-top: 50px;}
    .step_tip .board_wrap > .top {padding: 0 8px 10px;}
    .step_tip .board_wrap > .top .ti {font-size: 20px;}
    .step_tip .board_wrap > .top .total {font-size: 18px;}
    .step_tip .board_wrap .item_list {padding-top: 10px; margin-bottom: 60px;}
    .step_tip .board_wrap .item_list > li {flex-wrap: wrap; padding: 24px 0;}
    .step_tip .board_wrap .item_list .text_wrap {padding: 16px 6px 0px;}
    .step_tip .board_wrap .item_list .text_wrap .title {font-size: 18px;}
    .step_tip .board_wrap .item_list .text_wrap .desc {font-size: 15px; max-height: 4.8em; margin-bottom: 10px;}
    .step_tip .board_wrap .item_list .text_wrap .date_box {justify-content: space-between; gap: 20px;}
    .step_tip .board_wrap .item_list .text_wrap .link_btn { max-width: 102px; padding: 8px 0; font-size: 15px; }
    .step_tip .board_wrap .item_list .text_wrap .link_btn > em { width: 16px;  }
    
    .step_tip .board_wrap .item_list .img_box {max-width: none; border-radius: 11px;}

    .step_tip .board_wrap.video .item_list {column-gap: 20px;}
    .step_tip .board_wrap.video .item_list .thumb_box {border-radius: 12px;}
    .step_tip .board_wrap.video .item_list .text_wrap {padding: 15px 00px 0;}
    
    .step_tip .board_wrap.card .item_list {column-gap: 20px;}
    .step_tip .board_wrap.card .item_list > li {width: calc(100% / 2 - 10px);}

    .step_tip .board_wrap .item_list:has(li.no_content) {min-height: 200px;}
    .step_tip .board_wrap .item_list > li.no_content { width: 100%; font-size: 17px; margin-top: 20px; padding: 24px 0 !important;}


    .step_tip .pagination .num {font-size: 18px; width: 34px;}


    .br_768 {display: block;}

	.sec_banner .banner_list {gap: 20px; flex-wrap:wrap;}
    .sec_banner a {max-width: 165px;}
}

@media screen and (max-width : 650px) {
    .steps .sec_kv .title_area .left > p.two {font-size: 18px;}

    .step_02 .sec_ti {font-size: 17px; margin-bottom: 50px;}
    
    .step_02 .user_area {min-height: 700px;}
    .step_02 .user_area .list_wrap {width: calc(100% - 30px);}
    .step_02 .user_area .cover_wrap .text_wrap {bottom: auto; top: 62%; transform: translate(-50% , -0%); border-radius: 30px; padding: 20px 5px;}
    .step_02 .user_area .cover_wrap .img_box > img.pc {display: none;}
    .step_02 .user_area .cover_wrap .img_box > img.mob {display: block; width: calc(100% - 40px); max-width: 340px; }
    .step_02 .user_area .cover_wrap .text_wrap > p .br_hidden_768 {display: none;}
    .step_02 .check_list label { padding: 0 8px;}




    .step_03 .sec_ti {font-size: 17px; margin-bottom: 50px;}

    .step_03 .confirm_list > li {padding: 16px 8px;}
    .step_03 .confirm_list > li > p {font-size: 16px; text-indent: -15px; padding-left: 15px;}


    .step_03 .confirm_list > li .open_btn { max-width: 63px; padding: 8px 0; font-size: 15px; }
    .step_03 .confirm_list > li .open_btn .pc {display: none;}
    .step_03 .confirm_list > li .open_btn .mob {display: inline-block;}

    .step_03 .btn_wrap {row-gap: 16px; padding-top: 40px; max-width: 480px;}
    .step_03 .pdf_btn,
    .step_03 .share_btn,
    .step_03 .page_btn {font-size: 17px; height: 58px; padding: 0 20px; height: 46px;}
    .step_03 .page_btn {margin-top: 16px;}
    .step_03 .pdf_btn > em,
    .step_03 .share_btn > em,
    .step_03 .page_btn > em {width: 24px; background-size: 80%;  margin-left: 5px;}

    
    .jw-startin.step_03 .reference { margin-top: 64px;}
    
    .step_tip .sec_kv .step_title > p {font-size: 58px;}

    .step_tip .board_wrap.video .item_list > li {width: 100%;}
    .step_tip .board_wrap.video .item_list > li + li {padding-top: 0;}
    .step_tip .board_wrap.video .item_list .text_wrap {padding: 15px 7px 0;} 
    .step_tip .board_wrap.video .item_list .text_wrap .title {min-height: 3.2em; -webkit-line-clamp: none;}

}


@media screen and (max-width : 500px) {
    .steps .quotes_txt {font-size: 22px;}
    .steps .quotes_txt em {font-size: 14px;}
    
    .step_01 .sec_01 .box_list > li + li { margin-top: 16px; }
    .step_01 .sec_01 .board_box .table_wrap > .desc {font-size: 14px;}
    .step_01 .sec_01 .board_box .table_wrap > .cap {font-size: 14px; text-align: center;}

    .step_02 .btn_wrap {flex-wrap: wrap; width: calc(100% - 50px); margin: 0 auto; gap: 16px; padding-top: 40px;}
    .step_02 .user_area .cover_wrap .text_wrap > p {font-size: 16px;}
    .jw-startin.step_02 .reference {margin-top: 60px;}

    .step_tip .tag_menu {gap: 13px;}
    .step_tip .tag_menu .menu_btn {font-size: 18px; padding: 12px 0; border-radius: 10px;}
    
    .step_tip .board_wrap.card .item_list {column-gap: 0px;}
    .step_tip .board_wrap.card .item_list > li {width: 100%; padding: 24px 8px 0;}
    .step_tip .board_wrap.card .item_list .img_box {max-width: 100%;}
    .step_tip .board_wrap.card .item_list .text_wrap {padding: 16px 0 0;}
}

@media screen and (max-width : 400px) {
    .step_01 .app-wrapper {min-height: 850px;}
    .step_01 .sec_02 .summary-slide .quotes_txt {font-size: 14px;}

    .step_01 .summary-slide .pdf_btn {font-size: 15px; padding: 0 10px;}
    .step_01 .summary-slide .page_btn {font-size: 15px; padding: 0 10px;}

    .step_02 .user_area .cover_wrap .text_wrap > p {font-size: 15px;}
    .step_02 .check_list .item-text {font-size: 15px;}
    .step_02 .check_list .box {width: 26px;}
    .step_02 .check_list .box svg {width: 36px;}

    .step_03 .sec_kv .title_area .left > p.two {font-size: 16px;}

    .step_tip .sec_kv .step_title > p {font-size: 45px;}
    .step_tip .sec_kv .step_title > p::after {width: 40px; top: -15px;}

    .step_tip .board_wrap .item_list .text_wrap .date_box {gap: 20px;}
    .step_tip .board_wrap .item_list .text_wrap .link_btn { max-width: 90px; padding: 6px 0; font-size: 14px; }
    .step_tip .board_wrap .item_list .text_wrap .link_btn > em { width: 16px;  }
    

    .br_400 {display: block;}
}




/* detail_news 상세 게시글 */
.detail.news * {font-family: "Inter", sans-serif;}
.detail.news .container {padding-top: 240px;}
.detail.news .board_detail { width: var(--spacing-width); max-width: 1056px; margin: 0 auto;}
.detail.news .board_detail > h2 { display: block; padding-bottom: 39px; border-bottom: 2px solid #D83225; text-align: center; color: #3C3B3B; font-size: 42px; font-weight: 700; line-height: 140%; }
.detail.news .board_detail .title_area { display: flex; align-items: center; justify-content: space-between; padding: 20px 15px; border-bottom: 1px solid #8F8F8F;}
.detail.news .board_detail .title_area .ti { color: #3C3B3B; font-size: 28px; font-weight: 700; line-height: 160%; }
.detail.news .board_detail .title_area .date, 
.detail.news .board_detail .title_area .date span { white-space: nowrap; color: #666; font-size: 18px; font-weight: 400; line-height: 160%; }
.detail.news .board_detail .content_area {padding-top: 70px; padding-bottom: 60px;}
.detail.news .board_detail .content_area img { width: 100%; margin-bottom: 40px;}
.detail.news .board_detail .content_area p {margin-bottom: 40px; color: #3C3B3B; font-size: 18px; font-weight: 400; line-height: 160%; }

.detail.news .bottom_wrap {width: fit-content; margin: 0 auto 200px;}
.detail.news .share_btn { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 45px; border-radius: 45px; border: 2px solid #D83225; background: #D83225; box-shadow: 0 5.373px 5.373px 0 rgba(0, 0, 0, 0.25); color: #fff; font-size: 28px; font-weight: 500; }
.detail.news .share_btn > em { display: inline-block; flex-shrink: 0; width: 36px; aspect-ratio: 1; margin-left: 10px; background-image: url(/img/share_icon_white.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }
    





/* Tip 게시물 팝업 - .popup.media **전용** */
body:has(.popup.media.on) {overflow: hidden;}
.popup.media * {font-family: "Inter" , sans-serif;}
.popup.media { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: hidden; z-index: 1003; }
.popup.media .bg { opacity: 0; visibility: hidden; transition: opacity .3s; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: #00000080; }
.popup.media .inner { position: fixed; opacity: 0; visibility: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); max-width: 1250px; transition: opacity .3s; padding: 86px 77px 80px; border-radius: 20px; background: #fff; }
.popup.media .inner .close_btn { position: absolute; top: 35px; right: 35px; width: 26px; aspect-ratio: 1; background: url(/img/pop_close_btn.svg) no-repeat center/ contain; }

.popup.media.on .bg { opacity: 1; visibility: visible; pointer-events: all; transition: opacity .3s;}
.popup.media.on .inner { opacity: 1; visibility: visible; }

.popup.media .flex_box { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;}
.popup.media .txt_wrap {}
.popup.media .txt_wrap .ti { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: none; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; color: #3C3B3B; font-size: 28px; font-weight: 600; line-height: 160%; }
.popup.media .txt_wrap .date,
.popup.media .txt_wrap .date span { color: #666; font-size: 18px; font-weight: 400; line-height: 160%; }

.popup.media.video .video_wrap { width: 100%; aspect-ratio: 1920 / 1080; margin-bottom: 20px; overflow: hidden;}

.popup.media.card .inner { max-width: 830px; padding: 80px 94px;}
.popup.media.card .card_wrap { width: 100%; max-width: 640px; aspect-ratio: 1; margin-bottom: 20px;}
.popup.media.card .card_wrap img { width: 100%; height:100%; object-fit: cover;}

.popup.media .share_btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 180px; height: 50px; padding: 0; border-radius: 45px; border: 2px solid #D83225; background: #FFF; color: #3C3B3B; font-size: 20px; font-weight: 500; }
.popup.media .share_btn > em { display: inline-block; flex-shrink: 0; width: 24px; aspect-ratio: 1; margin-left: 6px; background-image: url(/img/share_icon.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; }

.popup.card .swiper-outer { position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 20px; }
.popup.card .swiper { width: 100%; height: 100%; overflow: hidden; }
.popup.card .swiper-wrapper { display: flex; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); height: 100%; }
.popup.card .swiper-slide { flex: 0 0 100%; height: auto; overflow: hidden; }
.popup.card .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.popup.card .nav-btn { position: absolute; top: 50%;  width: 30px; aspect-ratio: 1; cursor: pointer; }
.popup.card .nav-btn.prev { left: -53px; background: url(/img/slide_prev.svg) no-repeat center / contain;}
.popup.card .nav-btn.next { right: -53px; background: url(/img/slide_next.svg) no-repeat center / contain;}
.popup.card .nav-btn:active { transform: scale(0.92); }
.popup.card .nav-btn:disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; }
.popup.card .nav-btn svg { width: 18px; height: 18px; stroke: #2a2a2a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }

.popup.card .swiper-pagination { position: static; display: flex; align-items: center; justify-content: center; margin-top: 24px; }
.popup.card .swiper-pagination-bullet { opacity: 1; width: 14px; height: 14px; border-radius: 50%; background: #D9D9D9; cursor: pointer; transition: background 0.25s, width 0.25s, border-radius 0.25s; }
.popup.card .swiper-pagination-bullet-active { background: #D83225; }



/* Tip 게시물 반응형 Media */
@media screen and (max-height: 900px) {
    .popup.media.video .inner {max-width: 768px;}
    .popup.media .inner .close_btn {width: 18px; right: 25px; top: 25px;}
    .popup.media.card .inner { max-width: 600px; padding: 50px 80px;}
}


@media screen and (max-width: 1600px) {
    .detail.news .container {padding-top: 200px;}



    .popup.media .inner {max-width: 1024px; padding: 50px;}
    .popup.media .inner .close_btn {width: 18px; right: 25px; top: 25px;}
    .popup.media .txt_wrap .ti {font-size: 22px;}
    .popup.media .txt_wrap .date, .popup.media .txt_wrap .date span {font-size: 16px;}
    .popup.media .share_btn {max-width: 122px; height: 44px; font-size: 17px;}
    .popup.media .share_btn > em {width: 24px;}

}
@media screen and (max-width: 1024px) {
    .detail.news .container {padding-top: 160px;}
    .detail.news .board_detail > h2 {font-size: 35px; padding-bottom: 25px;}

    .detail.news .board_detail .title_area {column-gap: 20px;}
    .detail.news .board_detail .title_area .ti { font-size: 24px;  }
    .detail.news .board_detail .title_area .date, 
    .detail.news .board_detail .title_area .date span {font-size: 16px;}
    .detail.news .board_detail .content_area {padding-top: 40px; padding-bottom: 40px;}
    .detail.news .board_detail .content_area p {font-size: 16px;}

    .detail.news .share_btn {height: 60px; padding: 0 25px; font-size: 24px;}
    .detail.news .share_btn > em {width: 30px;}


}
@media screen and (max-width: 768px) {
    .detail.news .container {padding-top: 145px;}
    .detail.news .board_detail > h2 {font-size: 32px;}

    .detail.news .board_detail .title_area {flex-wrap: wrap; justify-content: center; padding: 14px 0;}
    .detail.news .board_detail .title_area .ti { display: inline-block; width: 100%; text-align: center; margin-bottom: 4px;}
    .detail.news .board_detail .title_area .date, 
    .detail.news .board_detail .title_area .date span {font-size: 14px;}

    .detail.news .board_detail .content_area {padding-top: 24px;}
    .detail.news .board_detail .content_area img {margin-bottom: 20px;}

    .detail.news .share_btn { height: 42px; padding: 0 20px; font-size: 17px; box-shadow: 0 2.62px 2.62px 0 rgba(0, 0, 0, 0.25);}
    .detail.news .share_btn > em {width: 22px; margin-left: 3px;}

    .detail.news .bottom_wrap {margin-bottom: 100px;}


    .popup.media .inner {padding: 50px 12px;}
    .popup.media .flex_box {padding: 0 4px; flex-wrap: wrap;}

    .popup.media .inner .close_btn {width: 18px; right: 14px; top: 18px;}
    .popup.media .txt_wrap {width: 100%;}
    .popup.media .txt_wrap .ti {font-size: 18px; margin-bottom: 2px;}
    .popup.media .txt_wrap .date, .popup.media .txt_wrap .date span {font-size: 14px;}
    .popup.media .share_btn { margin: 0 auto;}
    .popup.media .share_btn > em {margin-left: 2px;}

    .popup.media.card .inner { max-width: 500px; padding: 50px 50px;}
    .popup.media.card .card_wrap {margin-bottom: 10px;}
    .popup.card .nav-btn {width: 24px;}
    .popup.card .nav-btn.prev {left: -30px;}
    .popup.card .nav-btn.next {right: -30px;}
    .popup.card .swiper-pagination {margin-top: 20px;}
    
    .popup.card .swiper-pagination-bullet {width: 10px; height: 10px;}

}

@media screen and (max-width: 650px) {}

@media screen and (max-width: 500px) {
    .detail.news .container {padding-top: 80px;}

    .popup.media.card .inner { padding: 50px 17px;}
    .popup.card .nav-btn { display: none;}

}

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